/* mint · High performance (the mint branding canvas, 2026-11-03; docs/design-system.md). The shared layer of the
   public site: home, /peso/, the calculator, the quiz, legal, 404, /r/ and the affiliate pages with their panels.
   Loaded after mint.css (and after socios.css on the affiliate pages), before each page's own styles. The waitlist keeps
   its own file (it shares only cabecera.css with the site); the portal and the ops panels don't load this one.
   Selectors start with `html body` so they win over mint.css (whose rules start with `html`) and socios.css.
   On light the action is abeto with lima text; on dark it's lima with abeto text. Clorofila and cornflower are signals
   only, inside an abeto chip on light. TT Turns for titles and figures of 24 px or more (Inter Tight until the licensed
   web files are in assets/fonts/), Inter for everything that's read. No indigo, lila or coral. */
html:root{
  --abeto:#0F2A2E;--hueso:#EEF3EC;--menta:#BFE8D5;--niebla:#DDE4EA;--lima:#CDEB6B;--clorofila:#3CD36B;--corn:#6AB0FF;
  --ink2:#2F4A4D;--muted:#43585B;--line:#DDE4EA;--hover:#1B3D42;--bg2:#E4EBE5;
  --on-dark:#EEF3EC;--on-dark2:rgba(238,243,236,.74);--on-dark3:rgba(238,243,236,.56);--line-dark:rgba(238,243,236,.14);
  --wash:linear-gradient(180deg,#EEF3EC 0%,#E4EBE5 55%,#BFE8D5 100%);
  --aurora:radial-gradient(ellipse 50% 60% at 85% 20%,rgba(106,176,255,.85) 0%,rgba(106,176,255,0) 70%),
    radial-gradient(ellipse 55% 60% at 10% 90%,rgba(205,235,107,.9) 0%,rgba(205,235,107,0) 70%),
    linear-gradient(135deg,#CDEB6B 0%,#BFE8D5 40%,#9CCDEA 72%,#6AB0FF 100%);
  --senal:radial-gradient(ellipse 60% 70% at 90% 100%,rgba(205,235,107,.32) 0%,rgba(205,235,107,0) 70%),
    radial-gradient(ellipse 40% 40% at 70% 10%,rgba(60,211,107,.16) 0%,rgba(60,211,107,0) 70%),#0F2A2E;
  --glass:rgba(255,255,255,.55);--glass-line:rgba(255,255,255,.8);
  --display:"TT Turns","Inter Tight","Inter",system-ui,sans-serif;
  --text:"Inter",system-ui,-apple-system,sans-serif;
  /* Legacy names the pages still use inline, pointed at the High performance values. */
  --ink:#0F2A2E;--forest:#0F2A2E;--forest2:#1B3D42;--cream:#E4EBE5;--sand:#BFE8D5;--sand2:#DDE4EA;--sage:#2F4A4D;
  --coral:#0F2A2E;--ok:#0F2A2E;--warn:#0F2A2E;--okbg:#BFE8D5;--warnbg:#EEF3EC;--honeydew:#BFE8D5}

html body{background:var(--hueso);color:var(--abeto);font-family:var(--text);letter-spacing:0;font-feature-settings:normal}
html body ::selection{background:var(--lima);color:var(--abeto)}

/* Type: TT Turns for titles and figures, Inter for what's read. Sizes from the canvas's type board (desktop / phone). */
html body h1,html body h2,html body .h1,html body .h2,html body .h3,html body .serif,html body .fig{font-family:var(--display);color:inherit}
html body h1,html body .h1{font-weight:600;font-size:clamp(44px,5.6vw,76px);line-height:.95;letter-spacing:-.04em}
html body h2,html body .h2{font-weight:600;font-size:clamp(28px,3.2vw,40px);line-height:1.1;letter-spacing:-.02em}
html body .h3{font-weight:500;font-size:clamp(22px,2vw,28px);line-height:1.2;letter-spacing:-.01em}
html body h3:not(.h3){font-family:var(--text);font-weight:600;letter-spacing:-.01em}
html body .serif,html body .fig{font-weight:600;font-style:normal;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
/* The second half of a headline: the same family and color family, a step quieter. Never a gradient. */
html body .soft{font:inherit;color:var(--ink2);background:none;-webkit-text-fill-color:currentColor;padding:0}
html body .ey,html body .eyebrow{font-family:var(--text);font-size:12px;font-weight:600;line-height:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--abeto)}
html body .lead{font-family:var(--text);font-size:clamp(17px,1.4vw,18px);line-height:1.6;color:var(--ink2)}
html body .muted{color:var(--muted)}
html body .small{color:var(--muted)}
html body a{text-underline-offset:3px}

/* Actions: abeto with lima text on light; lima with abeto text on dark. Pills, Inter 600. */
html body .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 26px;border:0;border-radius:999px;
  background:var(--abeto);color:var(--lima) !important;font:600 15px/1.2 var(--text);letter-spacing:0;text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background .15s ease,transform .15s ease}
html body .btn:hover{background:var(--hover);transform:translateY(-1px)}
html body .btn-sm,html body .btn.sm{height:44px;padding:0 20px;font-size:14px}
html body .btn-w,html body .btn.lima,html body .dark .btn:not(.sec):not(.ghost-d){background:var(--lima);color:var(--abeto) !important}
html body .btn-w:hover,html body .btn.lima:hover,html body .dark .btn:not(.sec):not(.ghost-d):hover{background:var(--lima);box-shadow:0 0 0 4px rgba(205,235,107,.28)}
html body .btn.sec,html body .btn.ghost-d,html body .ghost{background:rgba(255,255,255,.6);color:var(--abeto) !important;border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
html body .btn.sec:hover,html body .btn.ghost-d:hover,html body .ghost:hover{background:#FFFFFF}
html body .btn[disabled]{opacity:.55;cursor:default;transform:none}
html body :focus-visible{outline:3px solid var(--abeto);outline-offset:3px}
html body .dark :focus-visible{outline-color:var(--lima)}
/* Text fields show focus with their own border and soft halo; the outline on top of it drew a second, heavier ring (the quiz name field). */
html body input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=button]):not([type=submit]):focus-visible,html body textarea:focus-visible,html body select:focus-visible{outline:none}

/* Cells: frosted white on the hueso ground, radius 28. Chips: abeto with hueso text; a signal goes inside one. */
html body .cell{background:var(--glass);border:1px solid var(--glass-line);border-radius:28px;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
html body .cell.solid{background:#FFFFFF;border-color:var(--line)}
html body .chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:999px;background:var(--abeto);color:var(--hueso);font:600 12.5px/1 var(--text);white-space:nowrap}
html body .chip.lima{color:var(--lima)}
html body .chip.ok{color:var(--clorofila)}
html body .chip.menta{background:var(--menta);color:var(--abeto)}
html body .chip.glass{background:var(--glass);color:var(--abeto);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
html body .chip i{width:7px;height:7px;border-radius:50%;background:var(--clorofila);flex:none}
html body .dot{width:8px;height:8px;border-radius:50%;background:var(--clorofila);box-shadow:none;flex:none}

/* Surfaces: the hueso → menta wash for heroes, señal (abeto with a lima glow) for dark bands, aurora for brand moments. */
html body .wash{background:var(--wash)}
html body .dark{background:var(--senal);color:var(--on-dark)}
html body .dark .ey,html body .dark .eyebrow{color:var(--on-dark3)}
html body .dark .lead,html body .dark p{color:var(--on-dark2)}
html body .dark .soft{color:var(--on-dark2)}
html body .dark .small,html body .dark .muted{color:var(--on-dark3)}
html body .dark .fig,html body .dark .serif{color:var(--lima)}
/* A white card inside a dark band reads as light again. */
html body .dark .light{color:var(--abeto)}
html body .dark .light p,html body .dark .light .lead{color:var(--ink2)}
html body .dark .light .small,html body .dark .light .muted{color:var(--muted)}
html body .dark .light .ey,html body .dark .light .eyebrow{color:var(--abeto)}
html body .dark .light .btn:not(.sec){background:var(--abeto);color:var(--lima) !important}
html body .dark .light .btn:not(.sec):hover{background:var(--hover);box-shadow:none}
html body .dark .light :focus-visible{outline-color:var(--abeto)}
html body .aurora-bg{background:var(--aurora)}
html body .photo{border-radius:28px;background:var(--menta)}

/* Footer: abeto. The header and the announcement band live in cabecera.css. */
html body .foot{background:var(--abeto);color:var(--on-dark3)}
html body .foot a{color:var(--on-dark2)}
html body .foot .lines a{color:var(--hueso)}
html body .foot b{color:var(--hueso) !important}
html body .foot img{height:28px;width:auto}

@media (prefers-reduced-motion:reduce){html body .btn{transition:none}html body .btn:hover{transform:none}}

/* «¿Dudas? Escríbenos» (Fran 2026-11-09): a pill fixed at the bottom right of every public page, opening mint's
   WhatsApp (MEDIBRI.contact.whatsapp, the Soporte number). site.js adds it only when that number is set. On a phone it
   rides above the bottom bar (.mbar) while that bar shows. */
html body .escribenos{position:fixed;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));z-index:40;
  display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 22px 0 18px;border-radius:999px;
  background:var(--abeto);color:var(--hueso) !important;font:600 15px/1 var(--text);text-decoration:none;white-space:nowrap;
  box-shadow:0 14px 34px -10px rgba(15,42,46,.45);transition:transform .2s ease,box-shadow .2s ease,bottom .25s ease}
html body .escribenos svg{flex:none;color:var(--lima)}
html body .escribenos:hover{transform:translateY(-2px);box-shadow:0 18px 40px -10px rgba(15,42,46,.5)}
html body .escribenos:focus-visible{outline:2px solid var(--lima);outline-offset:3px}
@media (max-width:900px){
  html body .escribenos{right:16px;bottom:max(16px,env(safe-area-inset-bottom));height:48px;padding:0 18px 0 15px;font-size:14px}
  html body:has(.mbar:not([hidden])) .escribenos{bottom:86px}
  html body:has(.stick.abierto) .escribenos{display:none}
}
@media (prefers-reduced-motion:reduce){html body .escribenos{transition:none}html body .escribenos:hover{transform:none}}
/* How much price the landings show (setting precio.landing, assets/js/precios.js): a hidden variant stays hidden even
   where its class sets a display. */
[data-pv][hidden]{display:none!important}