/* ═══════════════════════════════════════════════════════════════════════
   Sitio público — Clínica Volta (rediseño 2026-09)
   ═══════════════════════════════════════════════════════════════════════

   Origen: la maqueta del equipo diseño/UX/marketing (docs del proyecto,
   claude/REDISENO_SITIO.md). Mobile-first: las reglas base son las del
   celular y las media queries agregan columnas.

   Todo el sitio va en negro con banda de foto. Concepto, Voltapp y Blog eran
   papel claro (`.paper`) y pasaron a oscuro (`.ink-page`) en 2026-10: en
   blanco y con una cuadrícula vacía arriba parecían páginas sin terminar.
   El papel queda solo para el artículo del blog, que es lectura larga.

   Sin JS de estilos ni de navegación: el menú del celular es un <details>.
   Las fuentes se sirven desde acá (ver la nota de las @font-face).
   ═══════════════════════════════════════════════════════════════════════ */

/* Servidas localmente y no desde Google: sin ellas el primer pintado sale
   con la fuente del sistema, y evita una conexión a un tercero en un sitio
   donde la gente escribe sobre su salud. Solo el subconjunto latin (ya trae
   ñ, tildes y ¿¡). Dos familias: Oswald para títulos y Libre Franklin para
   todo lo demás. */
@font-face{font-family:'Oswald';font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/oswald-var-latin.5f49329007f1.woff2") format('woff2')}
@font-face{font-family:'Libre Franklin';font-style:normal;font-weight:300 700;font-display:swap;src:url("../fonts/libre-franklin-var-latin.d5e6781d1469.woff2") format('woff2')}
@font-face{font-family:'Libre Franklin';font-style:italic;font-weight:300 700;font-display:swap;src:url("../fonts/libre-franklin-var-italic-latin.d29132a2eee2.woff2") format('woff2')}

:root{
  color-scheme: dark;
  --ink:#0A0A0A; --ink-2:#131417; --ink-3:#1C1E22;
  --line:rgba(255,255,255,.12); --line-2:rgba(255,255,255,.2);
  --paper:#F4F3EF;
  --silver:#C8CCD1; --silver-dim:#8B9097;
  --sheet:#F4F3EF; --sheet-2:#E9E7E1; --sheet-line:#D5D2CA;
  --graphite:#16181B; --graphite-2:#55595F;
  --volt:#FFCF00; --volt-hover:#FFE04D; --volt-ink:#7A5E00;
  /* Cyan de la línea gráfica: para rótulos chicos (encabezados de tabla,
     datos, bajadas). El amarillo sigue siendo el acento y los botones; el
     cyan acompaña sin competir. --cyan-ink es la versión oscura, para leerse
     sobre el papel claro. */
  --cyan:#19C3E6; --cyan-ink:#00788C;
  --warn:#FFB020;
  --ok:#3DD68C; --low:#F06A5A;
  --wa:#25D366; --wa-ink:#062A14;
  --display:'Oswald','Arial Narrow',system-ui,sans-serif;
  --body:'Libre Franklin',system-ui,-apple-system,sans-serif;
  /* Las etiquetas chicas (siglas, fechas, rótulos) van en Libre Franklin seminegrita:
     eran IBM Plex Mono, que no trae el subíndice de VO₂. Donde hay cifras en
     columna (`.mono`) van tabulares, como en la monoespaciada. */
  --label:'Libre Franklin',system-ui,sans-serif;
  --fs-xl:clamp(38px,9.6vw,104px);
  --fs-h1:clamp(40px,6vw,72px);
  --fs-h2:clamp(30px,4vw,48px);
  --fs-h3:clamp(21px,2.2vw,26px);
  --fs-lead:clamp(18px,1.8vw,22px);
  --fs-body:clamp(16px,1.3vw,18px);
  --fs-data:clamp(13px,1.1vw,15px);
  --gut:clamp(16px,5.5vw,80px);
  --tap:52px; --bar:64px; --head:60px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--ink);color:var(--paper);font:400 var(--fs-body)/1.55 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;text-transform:uppercase;line-height:1;margin:0;text-wrap:balance;letter-spacing:.005em}
p{margin:0}
.v{color:var(--volt)}
.mono{font-family:var(--label);font-weight:600;font-variant-numeric:tabular-nums}
.wrap{max-width:1280px;margin-inline:auto;padding-inline:var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:3px solid var(--volt);outline-offset:2px}

/* ── Header ───────────────────────────────────────── */
.head{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:#0A0A0A;border-bottom:1px solid var(--line)}
.head-in{display:flex;align-items:center;gap:20px;height:var(--head)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.brand .mark{height:40px;width:auto}
.brand .word{height:28px;width:auto;position:relative;top:3px}
.nav{display:none}
.head-actions{display:none}
.menu{margin-left:auto}
.head-login{margin-left:auto;min-height:40px;padding:0 14px}
.head-login+.menu{margin-left:4px}
/* En los teléfonos más angostos (360 px) logo + Ingresar + "Menú ☰" no caben:
   la palabra se oculta a la vista, no al lector de pantalla. */
@media (max-width:399px){.head-in{gap:12px}.menu>summary>span:first-child{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
.menu>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;height:44px;padding:0 4px;font:600 14px/1 var(--display);letter-spacing:.14em;text-transform:uppercase}
.menu>summary::-webkit-details-marker{display:none}
.burger{width:22px;height:14px;position:relative;display:inline-block}
.burger::before,.burger::after,.burger i{content:"";position:absolute;left:0;right:0;height:2px;background:var(--paper)}
.burger::before{top:0}.burger i{top:6px}.burger::after{bottom:0;right:6px}
.menu[open]>summary .burger i{opacity:0}
.menu[open]>summary .burger::before{top:6px;transform:rotate(45deg)}
.menu[open]>summary .burger::after{bottom:6px;right:0;transform:rotate(-45deg)}
.menu-panel{position:fixed;left:0;right:0;top:calc(var(--head) + env(safe-area-inset-top,0px));bottom:0;background:var(--ink);overflow:auto;padding:12px var(--gut) calc(24px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)}
.menu-panel .grp{font:600 11px/1 var(--label);color:var(--silver-dim);letter-spacing:.14em;text-transform:uppercase;padding:18px 0 6px}
.menu-panel a.it{display:flex;justify-content:space-between;align-items:center;min-height:56px;border-bottom:1px solid var(--line);text-decoration:none;font:500 22px/1 var(--display);text-transform:uppercase;letter-spacing:.02em}
.menu-panel a.it::after{content:"→";color:var(--silver-dim);font-family:var(--body)}
.menu-panel a.it[aria-current]{color:var(--volt)}
.menu-panel .menu-cta{display:grid;gap:10px;margin-top:24px}
@media (min-width:1080px){
  :root{--head:76px}
  .menu{display:none}
  .head .head-login{display:none}  /* .head: le gana a .btn, que va después */
  .nav{display:flex;gap:clamp(14px,1.6vw,26px);margin-left:auto}
  .nav a{font:500 13px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--silver);padding:10px 0;border-bottom:2px solid transparent}
  .nav a:hover{color:var(--paper)}
  .nav a[aria-current]{color:var(--paper);border-bottom-color:var(--volt)}
  .head-actions{display:flex;gap:10px;align-items:center;margin-left:12px}
  .brand .mark{height:52px}.brand .word{height:33px;top:4px}
  .nav a{white-space:nowrap}
}
/* Con ocho ítems el menú no cabe con el espaciado de antes: se aprieta, y
   bajo 1280 px sale además la palabra VOLTA (queda el círculo). */
@media (min-width:1080px){
  .nav{gap:clamp(12px,1.2vw,18px)}
  .nav a{letter-spacing:.06em}
}
@media (min-width:1080px) and (max-width:1279px){.brand .word{display:none}}
/* Submenú del menú de computador (Concepto → Ejercicio es medicina). */
@media (min-width:1080px){
  .nav-dd{position:relative;display:flex}
  .nav-dd .caret{display:inline-block;border:4px solid transparent;border-top-color:currentColor;margin-left:6px;transform:translateY(2px)}
  .nav-dd>a.in{color:var(--paper);border-bottom-color:var(--volt)}
  .dd{display:none;position:absolute;top:100%;left:-16px;z-index:70;min-width:250px;padding:8px 0;background:var(--ink-2);border:1px solid var(--line-2);border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.5)}
  .nav-dd:hover .dd,.nav-dd:focus-within .dd{display:grid}
  .nav .dd a{padding:12px 16px;border:0}
  .nav .dd a:hover{background:var(--ink-3)}
  .nav .dd a[aria-current]{color:var(--volt)}
}

/* ── Botones ──────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--tap);padding:0 24px;font:600 15px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border:0;cursor:pointer;transition:background .15s,color .15s,transform .15s;white-space:nowrap}
.btn-volt{color:var(--ink);background:linear-gradient(225deg,transparent 11px,var(--volt) 11.5px)}
.btn-volt:hover{background:linear-gradient(225deg,transparent 11px,var(--volt-hover) 11.5px)}
.btn-wa{background:var(--wa);color:var(--wa-ink)}
.btn-wa:hover{background:#3BE07A}
.btn-line{color:var(--paper);box-shadow:inset 0 0 0 1px var(--line-2)}
.btn-line:hover{box-shadow:inset 0 0 0 1px var(--paper)}
.btn-sm{min-height:44px;padding:0 16px;font-size:13px}
.btn .ico{width:18px;height:18px;flex:none}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.link{font:600 14px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;display:inline-flex;gap:8px;align-items:center;min-height:44px;border-bottom:2px solid var(--volt)}
.link:hover{color:var(--volt)}
@media (max-width:560px){.btn-row.stack>.btn{flex:1 1 100%}}

/* ── Barra fija móvil ─────────────────────────────── */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:1fr 1fr;background:var(--ink);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
.bar a{height:var(--bar);display:flex;align-items:center;justify-content:center;gap:8px;font:600 15px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
.bar .b-res{background:var(--volt);color:var(--ink)}
.bar .b-wa{background:var(--wa);color:var(--wa-ink)}
.has-bar{padding-bottom:calc(var(--bar) + env(safe-area-inset-bottom,0px))}
@media (min-width:1080px){.bar{display:none}.has-bar{padding-bottom:0}}
/* En computador no hay barra: WhatsApp queda como globo fijo abajo a la
   derecha, siempre a mano. En el celular lo reemplaza la barra. */
.wa-fab{display:none}
@media (min-width:1080px){
  .wa-fab{display:grid;place-items:center;position:fixed;right:24px;bottom:24px;z-index:60;width:60px;height:60px;border-radius:50%;background:var(--wa);color:#fff;box-shadow:0 6px 20px rgba(0,0,0,.45);transition:transform .15s}
  .wa-fab:hover{transform:scale(1.07)}
  .wa-fab svg{width:30px;height:30px}
}

/* ── Asistente virtual (Chatnorris) ───────────────── */
/* El globo del chat va abajo a la derecha y no se puede mover desde adentro:
   vive en un shadow DOM y su caja trae estilos en línea (de ahí los
   !important). En el celular se sube la caja entera por encima de la barra de
   Reservar | WhatsApp: con transform, la caja pasa a ser la referencia de sus
   elementos fijos, así que el globo y la ventana del chat suben juntos. En el
   computador, el globo de WhatsApp se apila encima del chat. */
@media (max-width:1079px){
  #chatnorris-widget-root{position:fixed!important;right:0!important;bottom:calc(var(--bar) + env(safe-area-inset-bottom,0px))!important;width:0!important;height:0!important;transform:translateZ(0)!important}
}
@media (min-width:1080px){.wa-fab{bottom:92px}}

/* ── Tipos comunes ────────────────────────────────── */
.eyebrow{display:flex;align-items:center;gap:12px;font:600 12px/1.2 var(--body);letter-spacing:.32em;text-transform:uppercase;color:var(--silver)}
.eyebrow::before{content:"";width:32px;height:2px;background:var(--volt);flex:none}
.display{font-size:var(--fs-xl);font-weight:700;line-height:.94}
.h1{font-size:var(--fs-h1);font-weight:700;line-height:.96}
.h2{font-size:var(--fs-h2);line-height:1}
.h3{font-size:var(--fs-h3);line-height:1.1;letter-spacing:.02em}
.lead{font-size:var(--fs-lead);line-height:1.5;color:var(--silver);max-width:40ch}
.muted{color:var(--silver-dim)}
.small{font-size:14px;line-height:1.5}
/* Espaciado compacto: con los valores anteriores (hasta 120px por lado) cada
   página pedía bajar mucho para ver poco, sobre todo en el celular. */
.sec{padding-block:clamp(40px,6vw,80px)}
.sec-tight{padding-block:clamp(28px,4vw,52px)}
.sec-head{display:grid;gap:12px;margin-bottom:clamp(20px,3vw,32px);max-width:820px}
.hair{border-top:1px solid var(--line)}
.ph-tag{display:inline-block;font:600 11px/1 var(--label);letter-spacing:.06em;color:var(--ink);background:var(--warn);padding:4px 6px;vertical-align:middle}
.tbd{font-family:var(--label);font-weight:600;background:rgba(255,176,32,.14);color:var(--warn);padding:0 4px;white-space:nowrap}

/* ── Hero Home ────────────────────────────────────── */
/* En el celular el texto va SOBRE la foto, igual que en escritorio. Antes la
   foto ocupaba la primera pantalla entera y el titular aparecía recién al
   bajar: quien entraba no leía qué es Volta. La foto es el fondo de la primera
   pantalla (descontando el encabezado y la barra de reservar) y el texto se
   apoya abajo, sobre un degradado que lo deja legible. */
.hero{position:relative;background:var(--ink);display:flex;align-items:flex-end;
  min-height:calc(100svh - var(--head, 61px) - var(--bar, 64px))}
.hero-media{position:absolute;inset:0;width:100%;overflow:hidden}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:var(--pos-m,var(--pos,38% 25%))}
.hero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(10,10,10,.97) 0%,rgba(10,10,10,.9) 38%,rgba(10,10,10,.45) 66%,rgba(10,10,10,.15) 100%)}
.hero-body{padding:28px var(--gut) 32px;display:grid;gap:18px;position:relative;width:100%}
@media (max-width:899px){.hero .display{font-size:clamp(34px,10vw,48px)}}
.hero-body .lead{color:var(--paper)}
.hero-note{font:600 13px/1.4 var(--label);color:var(--silver-dim);display:flex;flex-wrap:wrap;gap:6px 16px}
.hero-note span::before{content:"✓ ";color:var(--volt)}
.metro-ico{display:inline-block;vertical-align:-2px;margin-right:4px}
@media (min-width:900px){
  .hero{min-height:min(88vh,860px)}
  .hero-media img{object-position:var(--pos,70% 35%)}
  .hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,10,.96) 0%,rgba(10,10,10,.82) 34%,rgba(10,10,10,.1) 68%),linear-gradient(0deg,rgba(10,10,10,.9),transparent 30%)}
  .hero-body{max-width:1280px;margin-inline:auto;width:100%;padding-block:120px 72px}
  .hero-body>*{max-width:640px}
}

/* ── Franja de datos ──────────────────────────────── */
.datastrip{border-block:1px solid var(--line);background:var(--ink-2)}
.datastrip .wrap{display:grid;grid-template-columns:1fr 1fr;gap:0}
.datum{padding:18px 0;display:grid;gap:4px;border-bottom:1px solid var(--line)}
.datum:nth-child(odd){padding-right:12px}
.datum b{font:600 clamp(20px,2.4vw,28px)/1 var(--display);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.datum span{font:600 12px/1.3 var(--label);color:var(--silver-dim);letter-spacing:.04em;text-transform:uppercase}
.datum.cta{align-content:center}
@media (min-width:900px){
  .datastrip .wrap{grid-template-columns:repeat(4,1fr) auto;align-items:stretch}
  .datum{border-bottom:0;border-right:1px solid var(--line);padding:22px 24px}
  .datum:first-child{padding-left:0}
  .datum.cta{border-right:0;padding-right:0}
}

/* ── Selector de casos ────────────────────────────── */
.cases{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.case{position:relative;display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:4/5;overflow:hidden;text-decoration:none;background:var(--ink-3);isolation:isolate}
.case img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .5s}
.case::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(10,10,10,.95) 8%,rgba(10,10,10,.2) 60%,transparent)}
.case:hover img{transform:scale(1.04)}
.case .c-in{padding:14px;display:grid;gap:6px}
.case .c-kicker{font:600 12px/1.2 var(--label);color:var(--paper);letter-spacing:.06em;text-transform:uppercase}
.case h3{font-size:clamp(18px,2vw,24px);line-height:1.05;color:var(--volt)}
.case p{font-size:14px;line-height:1.35;color:var(--silver)}
.case .arrow{position:absolute;top:12px;right:12px;width:36px;height:36px;display:grid;place-items:center;background:rgba(10,10,10,.6);color:var(--paper)}
@media (min-width:900px){
  /* Tres columnas: con seis programas son dos filas parejas. Las que cupieran
     dejaban cinco arriba y una sola abajo. */
  .cases{grid-template-columns:repeat(3,1fr);gap:14px}
  .case .c-in{padding:18px}
}

/* ── Pasos (secuencia real) ───────────────────────── */
.steps{display:grid;gap:0;counter-reset:s}
.step{display:grid;grid-template-columns:56px 1fr;gap:4px 16px;padding:22px 0;border-top:1px solid var(--line)}
.step .n{grid-row:span 2;font:600 13px/1 var(--label);color:var(--volt);padding-top:6px}
.step h3{font-size:var(--fs-h3)}
.step p{color:var(--silver);font-size:16px;max-width:46ch}
.periobars{display:flex;align-items:flex-end;gap:5px;height:34px;margin-bottom:20px}
.periobars i{flex:1;background:var(--line-2);display:block}
.periobars i.on{background:var(--volt)}
@media (min-width:900px){
  .steps{grid-template-columns:repeat(4,1fr);gap:28px}
  .step{grid-template-columns:1fr;border-top:2px solid var(--line-2);padding-top:18px}
  .step .n{grid-row:auto;padding:0 0 18px}
}

/* ── Split con foto ───────────────────────────────── */
.split{display:grid;gap:28px;align-items:center}
.split .media{aspect-ratio:4/3;overflow:hidden}
.split .media img{width:100%;height:100%;object-fit:cover}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr;gap:64px}.split.flip .media{order:2}}

/* ── Banda Voltapp (única banda volt del sitio) ───── */
.voltband{background:var(--volt);color:var(--ink);overflow:hidden}
.voltband .wrap{display:grid;gap:28px;padding-block:clamp(40px,6vw,72px);align-items:center}
.voltband .eyebrow{color:var(--ink);font-size:15px}
/* Letra negra fina sobre amarillo se pierde: una sombra corta la engruesa y la
   despega del fondo. Solo el texto, no el teléfono de al lado. */
.voltband .vb-text{text-shadow:0 1px 2px rgba(0,0,0,.3)}
.voltband .eyebrow::before{background:var(--ink)}
.voltband .lead{color:#2B2610}
.voltband .link{border-color:var(--ink)}
.voltband .link:hover{color:var(--ink);border-color:transparent}
@media (min-width:900px){.voltband .wrap{grid-template-columns:1.1fr .9fr}}

/* ── Teléfono (Voltapp) ───────────────────────────── */
.phone{width:min(300px,82vw);margin-inline:auto;background:var(--ink);border:10px solid var(--ink-3);border-radius:34px;padding:18px 16px 20px;color:var(--paper);box-shadow:0 30px 60px -20px rgba(0,0,0,.45);font-size:13px}
.phone .ph-top{display:flex;justify-content:space-between;font:600 11px/1 var(--label);color:var(--silver-dim);margin-bottom:14px}
.phone .ph-title{font:600 13px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--silver);margin-bottom:10px}
.gauge{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center;padding:12px;background:var(--ink-2);margin-bottom:10px}
.gauge svg{width:96px;height:96px}
.gauge b{font:600 22px/1 var(--display);display:block}
.gauge span{color:var(--silver-dim);font-size:12px;line-height:1.35;display:block;margin-top:4px}
.load{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--ink-2);margin-bottom:10px}
.dot{width:10px;height:10px;border-radius:50%;background:var(--volt);flex:none}
.exrow{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:9px 0;border-top:1px solid var(--line)}
.exrow b{font-weight:600}
.exrow .mono{color:var(--volt);font-size:12px;text-align:right}
.exrow small{color:var(--silver-dim);font-size:11px;grid-column:1/-1}
.spark{margin-top:8px;background:var(--ink-2);padding:10px 12px}
.spark svg{width:100%;height:60px;display:block}
.ex-flag{display:block;text-align:center;font:600 10px/1 var(--label);color:var(--silver-dim);margin-top:10px}

/* ── Tarjetas de precio ───────────────────────────── */
.plans{display:grid;gap:14px}
.plan{position:relative;background:var(--ink-2);padding:26px 22px 22px;display:flex;flex-direction:column;gap:14px;box-shadow:inset 0 0 0 1px var(--line)}
.plan.hl{box-shadow:inset 0 0 0 2px var(--volt)}
.plan .badge{position:absolute;top:-1px;right:-1px;background:linear-gradient(225deg,transparent 8px,var(--volt) 8.5px);color:var(--ink);font:600 11px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;padding:8px 14px 8px 12px}
.plan .kicker{font:600 12px/1 var(--label);color:var(--cyan);letter-spacing:.06em;text-transform:uppercase}
.plan h3{font-size:clamp(24px,2.6vw,30px)}
.price{font:700 clamp(38px,4.4vw,52px)/1 var(--display);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.price small{font-size:.38em;font-weight:500;color:var(--silver-dim);letter-spacing:.08em;margin-left:6px}
/* El precio normal tachado arriba del precio con descuento: chico y apagado,
   para que mande la cifra que se paga. */
.price-before{position:relative;justify-self:start;display:inline-block;font:600 clamp(18px,1.8vw,22px)/1 var(--display);color:var(--silver-dim);text-decoration:none;margin-bottom:-8px}
/* El tachado en diagonal y en rojo: se lee como "antes" de un vistazo, y una
   raya horizontal fina se confundía con un subrayado a ese tamaño. */
.price-before::after{content:"";position:absolute;left:-6%;right:-6%;top:50%;border-top:2px solid var(--low);transform:rotate(-14deg)}
.per{font:600 14px/1 var(--label);color:var(--volt)}
.valley{background:var(--ink-3);padding:10px 12px;font-size:14px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.valley b{font-family:var(--label);font-weight:600}
.feats{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:15px;color:var(--silver)}
.feats li{padding-left:24px;position:relative}
.feats li::before{content:"";position:absolute;left:0;top:.55em;width:12px;height:2px;background:var(--volt)}
.plan .btn{margin-top:auto}
.plan details{border-top:1px solid var(--line);padding-top:10px}
.plan summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font:600 13px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--silver)}
.plan ol{margin:6px 0 0;padding-left:20px;color:var(--silver);font-size:14px;display:grid;gap:6px}
/* Fila centrada y no grilla de 3: una familia con uno o dos planes (la
   evaluación inicial va sola) quedaba pegada a la izquierda. Cada tarjeta
   conserva el ancho de un tercio. */
@media (min-width:900px){.plans{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch}.plans>.plan{flex:0 1 calc((100% - 28px) / 3)}}
.guarantees{display:grid;gap:10px;margin-top:22px;font-size:15px;color:var(--silver)}
.guarantees div{display:flex;gap:10px;align-items:flex-start}
.guarantees div::before{content:"✓";color:var(--volt);font-weight:700}
@media (min-width:900px){.guarantees{grid-template-columns:repeat(3,1fr)}}
.addons{display:grid;gap:0;margin-top:8px}
.addon{display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.addon b{font-family:var(--display);font-weight:500;text-transform:uppercase;letter-spacing:.04em}

/* ── Horarios (Formato 2) ─────────────────────────── */
.hours{display:grid;gap:0}
.hblock{padding:22px 0;border-top:1px solid var(--line);display:grid;gap:12px}
.hblock h3{font-size:20px;letter-spacing:.08em;display:flex;align-items:center;gap:12px}
.hblock h3 .ic{width:40px;height:40px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-2);display:grid;place-items:center;flex:none}
.hblock p{font-size:15px;color:var(--silver);max-width:34ch}
.hrow{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.hrow span{font:500 13px/1 var(--display);letter-spacing:.12em;text-transform:uppercase}
.hrow b{font:500 20px/1 var(--display);color:var(--volt);font-variant-numeric:tabular-nums;letter-spacing:.02em}
@media (min-width:900px){.hours{grid-template-columns:repeat(3,1fr);gap:0}.hblock{padding:8px 32px;border-top:0;border-left:1px solid var(--line)}.hblock:first-child{border-left:0;padding-left:0}}

/* ── FAQ ──────────────────────────────────────────── */
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center;min-height:64px;padding:12px 0;font:500 clamp(17px,1.6vw,20px)/1.25 var(--body)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 26px/1 var(--display);color:var(--volt);flex:none}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 20px;color:var(--silver);max-width:64ch}

/* ── Siguiente paso (siempre negro) ───────────────── */
.next{background:var(--ink);color:var(--paper);border-top:1px solid var(--line);position:relative;overflow:hidden}
.next .wrap{display:grid;gap:22px;padding-block:clamp(40px,6vw,72px)}
.next .h2{font-size:clamp(34px,5vw,64px);font-weight:700}
.next .aside{display:flex;gap:10px;align-items:center;font-size:15px;color:var(--silver)}
@media (min-width:900px){.next .wrap{grid-template-columns:1.2fr 1fr;align-items:end}.next .acts{justify-self:end;display:grid;gap:16px}}

/* ── Footer ───────────────────────────────────────── */
.foot{background:var(--ink);border-top:1px solid var(--line);color:var(--silver);font-size:15px}
.foot .cols{display:grid;gap:28px;padding-block:48px 28px}
.foot h4{font:600 11px/1 var(--label);letter-spacing:.14em;color:var(--silver-dim);margin-bottom:12px}
.foot a{text-decoration:none;display:flex;align-items:center;min-height:36px}
.foot a:hover{color:var(--volt)}
.foot .fbrand img{height:70px;width:auto;margin-bottom:12px}
.foot .fbar{border-top:1px solid var(--line);padding-block:18px;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;font:600 12px/1.4 var(--label);color:var(--silver-dim)}
@media (min-width:760px){.foot .cols{grid-template-columns:1.3fr 1fr 1fr 1fr}}

/* ── Hero de página (acción) ──────────────────────── */
/* Texto a un lado y foto al costado, no la foto de fondo a todo el ancho: la
   mayoría de las fotos no aguantaban el recorte de banner (caras cortadas,
   el texto encima de lo que había que ver), y la banda alta empujaba el
   contenido hacia abajo. En el celular la foto va arriba, baja, y el texto
   debajo. El inicio conserva su portada a pantalla completa (`.hero`). */
.phero{position:relative;overflow:hidden;background:var(--ink);border-bottom:1px solid var(--line)}
.phero .bg{position:relative;height:clamp(150px,44vw,240px)}
.phero .bg img{width:100%;height:100%;object-fit:cover}
.phero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--ink) 0%,rgba(10,10,10,0) 45%)}
.phero .wrap{position:relative;padding-block:8px 32px;display:grid;gap:14px}
@media (min-width:900px){
  .phero .bg{position:absolute;top:0;bottom:0;left:50%;right:0;height:auto}
  .phero .bg::after{background:linear-gradient(90deg,var(--ink) 0%,rgba(10,10,10,0) 28%)}
  .phero .wrap{min-height:clamp(380px,34vw,460px);align-content:center;padding-block:48px}
  .phero .wrap>*{max-width:calc(50% - 48px)}
  .phero .h1{font-size:clamp(40px,4.4vw,64px)}
}
/* Sombra suave en el texto de la portada, que va sobre la foto: con el
   degradado solo, una foto clara se comía el título y la bajada. En las demás
   páginas el texto va al lado de la foto y no la necesita. */
.hero-body .eyebrow{text-shadow:0 1px 2px rgba(0,0,0,.6),0 2px 16px rgba(0,0,0,.45)}
/* El título y la bajada van sobre la foto: sombra marcada (un borde corto y
   un halo ancho) para que se lean aunque el fondo sea claro. */
.hero-body :is(.display,.lead){text-shadow:0 1px 3px rgba(0,0,0,.85),0 2px 10px rgba(0,0,0,.7),0 4px 32px rgba(0,0,0,.6)}
.hero-body .eyebrow::before{box-shadow:0 1px 3px rgba(0,0,0,.5)}
.crumbs{font:600 12px/1 var(--label);color:var(--silver-dim);display:flex;gap:8px;flex-wrap:wrap}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--volt)}

/* ── Programas ────────────────────────────────────── */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;box-shadow:inset 0 0 0 1px var(--line-2);text-decoration:none;font:500 13px/1 var(--display);letter-spacing:.1em;text-transform:uppercase}
.chip:hover{box-shadow:inset 0 0 0 1px var(--volt);color:var(--volt)}
.prog{display:grid;gap:20px;padding-block:clamp(28px,4vw,52px);border-top:1px solid var(--line)}
.prog .media{aspect-ratio:16/9;overflow:hidden}
@media (min-width:900px){.prog .media{aspect-ratio:4/3}}
.prog .media img{width:100%;height:100%;object-fit:cover}
.prog .body{display:grid;gap:14px;align-content:start}
.prog .who{font:600 12px/1.2 var(--label);color:var(--volt);letter-spacing:.06em;text-transform:uppercase}
@media (min-width:900px){.prog{grid-template-columns:5fr 6fr;gap:56px;align-items:center}.prog:nth-of-type(even) .media{order:2}}
.callout{box-shadow:inset 0 0 0 1px var(--volt);padding:24px;display:grid;gap:14px}
.callout.soft{box-shadow:inset 0 0 0 1px var(--line-2)}

/* ── Equipo (Formato 1) ───────────────────────────── */
.founder{display:grid;gap:26px}
.founder .portrait{aspect-ratio:4/5;background:var(--ink-3);display:grid;place-items:center;position:relative;overflow:hidden}
.founder .portrait img.mono-mark{width:46%;opacity:.9}
.founder .portrait .ph-note{position:absolute;left:12px;bottom:12px}
.quote{font:500 clamp(22px,2.6vw,32px)/1.25 var(--body);font-style:italic;color:var(--paper);border-left:2px solid var(--volt);padding-left:18px;max-width:34ch}
.creds{display:grid;gap:0}
.cred{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;padding:14px 0;border-bottom:1px solid var(--line)}
.cred .ic{width:36px;height:36px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-2);display:grid;place-items:center;grid-row:span 2;color:var(--volt)}
.cred b{font-weight:600}
.cred span{color:var(--silver-dim);font-size:14px}
@media (min-width:900px){.founder{grid-template-columns:5fr 7fr;gap:64px;align-items:start}}
.team{display:grid;gap:0}
.member{display:grid;grid-template-columns:112px 1fr;gap:18px;padding:18px 0;border-top:1px solid var(--line);align-items:start}
/* Cuadrada de verdad: `aspect-ratio` es solo un mínimo, y una foto vertical
   estiraba el recuadro y se veía entera. La foto va encima, recortada según
   el encuadre elegido en el admin. */
.member .av{width:112px;aspect-ratio:1;background:var(--ink-3);display:grid;place-items:center;position:relative;overflow:hidden}
.member .av img{width:48%;opacity:.5}
.member h3{font-size:22px}
.member .role{font:500 12px/1.3 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--silver);margin-top:6px}
.member details summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font:600 13px/1 var(--display);letter-spacing:.12em;text-transform:uppercase}
@media (min-width:900px){.team{grid-template-columns:1fr 1fr;column-gap:48px}}

/* ── Contacto (Formato 3) ─────────────────────────── */
.contact{display:grid;gap:22px}
.reserve-box{box-shadow:inset 0 0 0 1px var(--volt);background:rgba(255,207,0,.05);padding:24px;display:grid;gap:16px}
.cdata{display:grid;gap:0}
.cdata a,.cdata div.cd{display:grid;grid-template-columns:40px 1fr;gap:2px 14px;padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none;align-items:center}
.cdata .ic{grid-row:span 2;color:var(--volt)}
.cdata small{font:600 11px/1 var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.cdata b{font-weight:500;font-size:17px}
.map{position:relative;background:#16171A;aspect-ratio:16/10;overflow:hidden}
.map svg{width:100%;height:100%;display:block}
.map .btn{position:absolute;right:12px;bottom:12px}
.form{display:grid;gap:14px}
.field{display:grid;gap:6px}
.field label{font:600 13px/1.2 var(--label);letter-spacing:.1em;text-transform:uppercase;color:var(--silver)}
.field input,.field select,.field textarea{font:400 16px/1.4 var(--body);color:var(--paper);background:var(--ink-2);border:1px solid var(--line-2);padding:14px;min-height:52px;border-radius:0}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--volt);outline-offset:0}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--silver)}
.consent input{width:26px;height:26px;accent-color:var(--volt);flex:none;margin-top:2px}
.fold{box-shadow:inset 0 0 0 1px var(--line);padding:0 20px}
.fold>summary{list-style:none;cursor:pointer;min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::after{content:"⌄";font-size:24px;color:var(--silver)}
.fold[open]>summary::after{content:"⌃"}
.fold .form{padding-bottom:24px}
@media (min-width:900px){.contact{grid-template-columns:1fr 1fr;gap:40px;align-items:start}}

/* ══ PAPEL (informativas) ═════════════════════════════ */
.paper{background:var(--sheet);color:var(--graphite)}
.paper .eyebrow{color:var(--graphite-2)}
.paper .lead,.paper .muted{color:var(--graphite-2)}
.paper .hair,.paper .step,.paper .faq details{border-color:var(--sheet-line)}
.paper .step p{color:var(--graphite-2)}
.paper .step .n{color:var(--volt-ink)}
.paper .periobars i{background:var(--sheet-line)}
.paper .periobars i.on{background:var(--graphite)}
.paper .link{border-color:var(--volt)}
.paper .link:hover{color:var(--volt-ink)}
.paper a.inl{color:var(--graphite);text-decoration:underline;text-decoration-color:var(--volt);text-decoration-thickness:3px;text-underline-offset:3px}
.paper :focus-visible{outline-color:var(--graphite)}
.paper .btn-line{color:var(--graphite);box-shadow:inset 0 0 0 1px var(--graphite)}
/* Concepto, Voltapp y Blog en oscuro, como el resto del sitio. Sus componentes
   (comparativa, métricas, posts, categorías) se dibujaron para el papel y
   toman el color de estas variables: acá se reasignan a la tinta en vez de
   reescribir cada regla. La banda de foto (`.phero`) lleva las categorías del
   blog, por eso también entra. */
.ink-page,.phero{--sheet:var(--ink);--sheet-2:var(--ink-2);--sheet-line:var(--line);--graphite:var(--paper);--graphite-2:var(--silver)}
.phero .cats a{box-shadow:inset 0 0 0 1px var(--line-2);color:var(--paper);background:rgba(10,10,10,.35)}
.phero .cats a[aria-current]{background:var(--volt);color:var(--ink)}
.ink-page .meta .cat{color:var(--cyan)}
.addon-app{color:var(--volt);margin-top:4px}
.gridbg{background-image:linear-gradient(var(--sheet-line) 1px,transparent 1px),linear-gradient(90deg,var(--sheet-line) 1px,transparent 1px);background-size:48px 48px;background-position:-1px -1px}
.ihero{border-bottom:1px solid var(--sheet-line)}
.ihero .wrap{display:grid;gap:28px;padding-block:clamp(48px,8vw,104px)}
.ihero .fig{margin:0}
.ihero .fig img{width:100%;aspect-ratio:4/3;object-fit:cover}
@media (min-width:900px){.ihero .wrap{grid-template-columns:1.1fr .9fr;align-items:center;gap:64px}}
figcaption{font:600 12px/1.4 var(--label);color:var(--graphite-2);margin-top:10px;display:flex;gap:10px}
figcaption b{color:var(--graphite);font-weight:600;white-space:nowrap}
/* Al lado del texto la columna es angosta: el rótulo va debajo de la leyenda
   y no a su costado, que la apretaba en un hilo. */
.concept-intro figcaption{flex-direction:column-reverse;gap:4px}
.concept-intro figcaption b{color:var(--cyan)}
.prose{max-width:66ch;display:grid;gap:18px;font-size:clamp(17px,1.4vw,19px);line-height:1.65}
.prose h2{font-size:clamp(26px,3vw,36px);margin-top:18px}
.prose strong{font-weight:600}
.fig-inline{margin:8px 0}
.fig-inline img{width:100%}
/* Concepto: la segunda foto a la izquierda del texto en computador. En el
   celular va después del texto, para que se lea primero. */
.concept-intro{display:grid;gap:24px}
@media (min-width:900px){
  .concept-intro{grid-template-columns:5fr 7fr;gap:56px;align-items:center}
  .concept-intro .fig-inline{order:-1;margin:0}
}
/* Comparación de Concepto. Celular: una tarjeta por alternativa con sus tres
   filas rotuladas (formato "Tarjetas comparativa"). Computador: las mismas
   tarjetas son las filas de una tabla y los rótulos suben al encabezado, que
   solo se ve ahí. Volta va con el borde amarillo encendido. */
.cmp{display:grid;gap:16px;--cmp-cols:minmax(0,1.45fr) repeat(3,minmax(0,1.3fr))}
.cmp-head{display:none}
.cmp-card{position:relative;background:linear-gradient(180deg,var(--ink-3),var(--ink-2));border:1px solid var(--line-2);border-radius:14px;padding:16px 18px 6px}
.cmp-card.us{border:2px solid var(--volt);box-shadow:0 0 0 1px rgba(255,207,0,.25),0 0 28px rgba(255,207,0,.22),inset 0 0 24px rgba(255,207,0,.06)}
.cmp-who{display:flex;align-items:center;gap:14px;font:700 clamp(26px,7vw,34px)/1 var(--display);letter-spacing:.02em;text-transform:uppercase;padding-bottom:14px;border-bottom:1px solid var(--line)}
.cmp-card.us .cmp-who{color:var(--volt)}
.cmp-ico{flex:none;width:52px;height:52px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:10px;background:var(--ink);color:var(--paper)}
.cmp-card.us .cmp-ico{border-color:rgba(255,207,0,.5)}
.cmp-ico img{width:40px;height:40px;object-fit:contain}
.cmp dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr)}
.cmp-row{display:grid;grid-column:1/-1;grid-template-columns:subgrid;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.cmp-row:first-child{border-top:0}
.cmp-row dt{display:flex;align-items:center;gap:12px;font:600 12px/1.2 var(--label);letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);padding-right:12px;white-space:nowrap}
.cmp-row dt svg,.cmp-head svg{flex:none;color:var(--paper)}
.cmp-ico svg{width:30px;height:30px}
.cmp-row dd{margin:0;padding-left:14px;border-left:1px solid var(--line-2);font-size:15px;line-height:1.35;color:var(--silver)}
.cmp-card.us dd{color:var(--volt)}
@media (max-width:400px){.cmp-card{padding-inline:14px}.cmp-row dt{gap:8px;letter-spacing:.05em;padding-right:10px}.cmp-row dd{padding-left:10px}}
@media (min-width:900px){
  .cmp{gap:12px}
  .cmp-head{display:grid;grid-template-columns:var(--cmp-cols);gap:0;padding:0 24px 4px}
  .cmp-head span{display:flex;align-items:center;gap:10px;font:600 12px/1.2 var(--label);letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);padding-left:20px}
  .cmp-card{display:grid;grid-template-columns:var(--cmp-cols);align-items:stretch;padding:18px 24px}
  .cmp-who{border:0;padding:0;font-size:clamp(22px,2.2vw,30px)}
  .cmp dl{display:contents}
  .cmp-row{grid-column:auto;display:flex;align-items:center;border:0;border-left:1px solid var(--line);padding:4px 20px}
  .cmp-row dt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .cmp-row dd{border:0;padding:0;font-size:16px}
  .cmp-card.us{padding-block:24px}
}
.metrics{display:grid;gap:0}
.metric{display:grid;grid-template-columns:92px 1fr;gap:4px 18px;padding:14px 0;border-top:1px solid var(--sheet-line)}
.metric .sig{grid-row:span 2;font:600 clamp(20px,2.4vw,28px)/1 var(--label);color:var(--cyan);padding-top:2px}
.metric .sig::after{content:"";display:block;width:28px;height:3px;background:var(--volt);margin-top:10px}
.metric b{font-weight:600;font-size:18px}
.metric p{color:var(--graphite-2);font-size:16px}
@media (min-width:900px){.metrics{grid-template-columns:1fr 1fr;column-gap:56px}}
.refs{font:400 13px/1.6 var(--label);color:var(--graphite-2);display:grid;gap:8px;padding-left:18px;margin:0}
.soft-cta{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;padding:28px 0;border-top:1px solid var(--sheet-line)}

/* Voltapp (papel) */
.vfeat{display:grid;gap:28px;padding-block:clamp(40px,6vw,72px);border-top:1px solid var(--sheet-line);align-items:center}
.vfeat .phone{margin:0 auto}
@media (min-width:900px){.vfeat{grid-template-columns:1fr 1fr;gap:72px}.vfeat.flip .phone{order:-1}}
.privacy{background:var(--sheet-2);padding:28px;display:grid;gap:12px}

/* Blog */
.cats{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.cats a{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;text-decoration:none;box-shadow:inset 0 0 0 1px var(--sheet-line);font:500 13px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--graphite)}
.cats a[aria-current]{background:var(--graphite);color:var(--sheet);box-shadow:none}
.featured{display:grid;gap:22px;text-decoration:none;padding-block:28px;border-bottom:1px solid var(--sheet-line)}
.featured img{width:100%;aspect-ratio:16/9;object-fit:cover}
@media (min-width:900px){.featured{grid-template-columns:1.2fr 1fr;align-items:center;gap:56px}}
.posts{display:grid;gap:0}
.post{display:grid;grid-template-columns:1fr 96px;gap:16px;padding:22px 0;border-bottom:1px solid var(--sheet-line);text-decoration:none;align-items:start}
.post img{width:96px;aspect-ratio:1;object-fit:cover}
.post h3{font-size:clamp(20px,2vw,24px);margin:8px 0}
.post p{color:var(--graphite-2);font-size:15px}
.meta{font:600 12px/1.2 var(--label);color:var(--graphite-2);letter-spacing:.04em;text-transform:uppercase}
.meta .cat{color:var(--cyan-ink)}
@media (min-width:900px){.posts{grid-template-columns:1fr 1fr 1fr;column-gap:36px}.post{grid-template-columns:1fr;border-bottom:0;border-top:1px solid var(--sheet-line)}.post img{width:100%;aspect-ratio:3/2;order:-1}}
.article-head{display:grid;gap:18px;max-width:66ch}
.author{display:grid;grid-template-columns:56px 1fr;gap:14px;align-items:center;padding:20px 0;border-block:1px solid var(--sheet-line)}
.author .av{width:56px;height:56px;background:var(--graphite);display:grid;place-items:center}
.author .av img{width:60%}
.rirscale{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin:8px 0}
.rirscale div{background:var(--sheet-2);padding:10px 4px;text-align:center;font:600 13px/1.2 var(--label)}
.rirscale div.hl{background:var(--graphite);color:var(--volt)}
.idbox{background:var(--graphite);color:var(--sheet);padding:26px;display:grid;gap:14px}
.idbox .lead{color:#C9CCCF}

/* ── Ajustes de desborde ──────────────────────────── */
.wrap>*,.split>*,.next .wrap>*,.hero-body>*,.contact>*,.founder>*,.prog>*,.ihero .wrap>*,.vfeat>*,.voltband .wrap>*{min-width:0}
.btn{white-space:normal;text-align:center;line-height:1.15;padding-block:10px}
.tbd{white-space:normal;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.menu-panel .menu-cta .btn{width:100%}
.menu:not([open]) .menu-panel{display:none}
.ico{width:18px;height:18px;flex:none}
.case h3{font-size:clamp(17px,2vw,24px);hyphens:auto;overflow-wrap:anywhere}
.nav a{white-space:nowrap}
.step{align-content:start}
@media (min-width:900px){.hero .display{font-size:clamp(56px,6.4vw,92px)}.hero-body>*{max-width:720px}}
.guarantees div{display:block;position:relative;padding-left:24px}
.guarantees div::before{position:absolute;left:0;top:0}
.btn-sm{white-space:nowrap}
.paper .tbd{color:#6B4200;background:#FFE3A6}

/* ── Piezas propias de Django ─────────────────────── */
/* El encuadre que se elige en el admin (`focus_field`, etiqueta `{% foco %}`):
   `--pos` en todas las pantallas, `--pos-m` solo en el celular. */
img.foco{object-position:var(--pos,50% 50%)}
@media (max-width:899px){img.foco{object-position:var(--pos-m,var(--pos,50% 50%))}}
/* Hueco de foto sin cargar: solo lo ve el staff. */
.phlab{display:grid;place-items:center;width:100%;height:100%;min-height:160px;padding:16px;text-align:center;font:600 12px/1.4 var(--label);color:var(--silver-dim);background:repeating-linear-gradient(135deg,var(--ink-2) 0 12px,var(--ink-3) 12px 24px)}
.note{font:600 12px/1.5 var(--label);color:var(--warn)}
.honey{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.errors{margin-top:6px;font-size:14px;color:#FF8A8A}
.formnote{padding:16px 18px;border-left:3px solid var(--volt);background:rgba(255,207,0,.07);font-size:15px;line-height:1.6;margin-bottom:18px}
.map iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.3) contrast(1.05)}
.map-link{display:grid;place-items:center;gap:10px;text-align:center;text-decoration:none;padding:24px;background:radial-gradient(circle at 50% 45%,rgba(255,207,0,.12),transparent 55%),var(--ink-2)}
.map-link strong{font:600 20px/1.2 var(--display);text-transform:uppercase;letter-spacing:.04em}
.plan .feats li.off{color:var(--silver-dim);text-decoration:line-through;text-decoration-color:rgba(255,255,255,.25)}
.plan .feats li.off::before{background:var(--line-2)}
.couple{font-size:14px;color:var(--silver)}
.couple b{font-family:var(--label);font-weight:600;color:var(--paper)}
.group-lead{color:var(--silver);margin-top:-8px;margin-bottom:22px}
.chip[aria-current]{background:var(--volt);color:var(--ink);box-shadow:none}
/* "Ver más" sin JS: la casilla oculta es el interruptor (_clamp.html). */
.clamp-more{display:none}
@media (max-width:899px){
  .clamp-text{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
  .clamp-toggle:checked ~ .clamp-text{-webkit-line-clamp:unset;overflow:visible}
  .clamp-more{display:inline-flex;min-height:44px;align-items:center;cursor:pointer;font:600 13px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--volt)}
  .clamp-more::after{content:"Ver más"}
  .clamp-toggle:checked ~ .clamp-more::after{content:"Ver menos"}
}
.quotes{display:grid;gap:14px}
.quote-card{background:var(--ink-2);padding:24px;display:grid;gap:14px;box-shadow:inset 0 0 0 1px var(--line)}
.quote-card p{font-size:18px;line-height:1.5}
.quote-card cite{font:600 12px/1.3 var(--label);font-style:normal;color:var(--silver-dim);letter-spacing:.06em;text-transform:uppercase}
@media (min-width:900px){.quotes{grid-template-columns:repeat(3,1fr)}}
.shots{display:flex;gap:16px;overflow-x:auto;padding-bottom:6px}
.shots figure{margin:0;flex:0 0 min(260px,70vw)}
.shots img{width:100%;border:10px solid var(--ink-3);border-radius:28px;background:var(--ink)}
.shots figcaption{font:600 12px/1.4 var(--label);margin-top:8px}
.member .av img.photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1}
.founder .portrait img.photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.case .ph-empty{position:absolute;inset:0;z-index:-2;background:var(--ink-3)}
.prose p a,.prose li a{color:inherit;text-decoration:underline;text-decoration-color:var(--volt);text-decoration-thickness:3px;text-underline-offset:3px}
.prose ul{margin:0;padding-left:22px;display:grid;gap:8px}
.post.nolink{cursor:default}
.article-cover img{width:100%;max-width:1100px;aspect-ratio:16/8;object-fit:cover}
.cred .ic svg{width:18px;height:18px}
.featured img{width:100%;aspect-ratio:16/9;object-fit:cover}
.prog .media .phlab,.featured .phlab{aspect-ratio:4/3}
/* Los **destacados** de los textos editables (filtro `accent`). En papel el
   amarillo no se lee como texto: pasa a subrayado grueso. */
.y{color:var(--volt)}
.c{color:var(--cyan)}
.paper .c{color:var(--cyan-ink)}
.paper .y{color:inherit;background:linear-gradient(transparent 62%,var(--volt) 62%)}
.voltband .y{color:inherit}

/* ── Planes y precios: todo centrado (pedido de la clínica, 2026-10) ──────
   `.centrado` va en la sección de tarjetas y en la de complementos. Los
   adornos que dependían de alinear a la izquierda —el guion de cada ítem, la
   ✓ de la garantía, el precio en pareja a dos columnas— se reacomodan para
   que no queden colgando a un costado del texto centrado. */
.centrado{text-align:center}
.centrado .sec-head{justify-items:center;text-align:center;margin-inline:auto}
.centrado .chips{justify-content:center}
.centrado .group-lead{margin-inline:auto;max-width:60ch}
.centrado .plan{align-items:center}
.centrado .plan .btn{align-self:stretch;justify-content:center}
.centrado .valley{flex-direction:column;align-items:center;justify-content:center;align-self:stretch;gap:4px}
.centrado .feats{justify-items:center}
.centrado .feats li{padding-left:0}
.centrado .feats li::before{position:static;display:inline-block;vertical-align:middle;margin-right:8px}
.centrado .guarantees{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px}
.centrado .guarantees div{display:flex;justify-content:center;padding-left:0}
.centrado .guarantees div::before{position:static}
.centrado .addon{flex-direction:column;align-items:center;gap:6px}

/* ── Testimonios ─────────────────────────────────────── */
/* Columnas y no grilla: los pantallazos tienen alturas distintas y una grilla
   dejaría huecos bajo los cortos. */
.reviews-head{padding-top:clamp(36px,5vw,64px)}
.reviews-wall{columns:3 280px;column-gap:16px}
.review-shot{display:block;break-inside:avoid;margin-bottom:16px;border-radius:12px;overflow:hidden;border:1px solid var(--line-2);background:var(--ink-2);transition:border-color .15s}
.review-shot:hover{border-color:var(--cyan)}
.review-shot img{display:block;width:100%;height:auto}
.review-card{break-inside:avoid;margin:0 0 16px;display:grid;gap:14px;padding:22px;border:1px solid var(--line-2);border-radius:14px;background:linear-gradient(180deg,var(--ink-3),var(--ink-2))}
.rc-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rc-stars{color:var(--volt);font-size:18px;letter-spacing:2px;line-height:1}
.rc-stars .off{color:var(--line-2)}
.rc-src{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font:600 11px/1 var(--label);letter-spacing:.1em;text-transform:uppercase;color:var(--silver-dim)}
.rc-src .ico{width:14px;height:14px;color:var(--cyan)}
.review-card blockquote{margin:0;font-size:16px;line-height:1.6;color:var(--paper)}
.review-card figcaption{display:flex;align-items:center;gap:10px;margin:0;font:500 14px/1.2 var(--body);color:var(--silver)}
.review-card figcaption a{text-decoration:none}
.sec-link{color:inherit;text-decoration:underline;text-decoration-color:var(--volt);text-decoration-thickness:3px;text-underline-offset:6px;transition:color .15s}
.sec-link:hover{color:var(--volt)}
.sec-link span{font-size:.6em;vertical-align:.35em;color:var(--volt)}
.g-summary{display:flex;align-items:center;gap:8px;font-size:16px;color:var(--silver)}
.g-summary b{font:700 22px/1 var(--display);color:var(--paper)}
.review-card figcaption b{color:var(--paper);font-weight:600;white-space:normal}
.rc-av{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--ink);border:1px solid var(--line-2);font:600 14px/1 var(--display);color:var(--cyan)}
.rc-date{margin-left:auto;font-size:13px;color:var(--silver-dim)}

/* ── Ejercicio es medicina ───────────────────────────── */
.fx{display:grid;gap:14px}
.fx-card{display:grid;gap:10px;align-content:start;padding:22px;border:1px solid var(--line-2);border-radius:14px;background:linear-gradient(180deg,var(--ink-3),var(--ink-2))}
.fx-n{font:600 13px/1 var(--label);color:var(--volt);letter-spacing:.1em}
.fx-card h3{font-size:clamp(22px,2.2vw,26px)}
.fx-card p{color:var(--silver);font-size:16px;line-height:1.55}
.fx-card .fx-dato{color:var(--cyan);font-size:14px;line-height:1.45;padding-top:10px;border-top:1px solid var(--line)}
@media (min-width:700px){.fx{grid-template-columns:1fr 1fr}}
@media (min-width:1080px){.fx{grid-template-columns:repeat(3,1fr);gap:16px}}
.nat-stats{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.nat-stat{display:grid;gap:8px;align-content:start;padding:22px;background:var(--ink-2)}
.nat-stat .silueta{width:64px;height:64px;flex:none;color:var(--silver-dim)}
.nat-stat.up .silueta{color:var(--volt)}
.nat-who{display:flex;align-items:center;gap:12px;margin:4px 0 6px}
.nat-who>span{font:600 13px/1.2 var(--label);letter-spacing:.08em;text-transform:uppercase;color:var(--paper)}
.nat-stat.up .nat-who>span{color:var(--volt)}
/* La barra de MET-h: el rango natural en verde de fondo, lo de cada persona
   encima. Va de 0 a 70 (MET_ESCALA en sitio_extras). */
.met{margin-bottom:8px}
.met-bar{position:relative;height:10px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden}
.met-ok{position:absolute;top:0;bottom:0;background:rgba(61,214,140,.28)}
.met-fill{position:absolute;top:0;bottom:0;left:0;border-radius:5px;background:var(--silver)}
.nat-stat.ok .met-fill{background:var(--ok)}
.nat-stat.bajo .met-fill{background:var(--low)}
.nat-stat.up .met-fill{background:var(--cyan)}
.met-scale{position:relative;height:16px;margin-top:5px;font:600 10px/16px var(--label);letter-spacing:.06em;text-transform:uppercase;color:var(--silver-dim)}
.met-scale span{position:absolute;top:0;white-space:nowrap}
.met-scale .met-zone{text-align:center;color:var(--ok);border-top:1px solid rgba(61,214,140,.5);line-height:14px}
.nat-stat b{font:700 clamp(40px,5vw,60px)/1 var(--display);color:var(--silver)}
.nat-stat.up b{color:var(--volt)}
.nat-stat>span{font-size:15px;line-height:1.45;color:var(--silver)}
@media (min-width:800px){.nat-stats{grid-template-columns:repeat(3,1fr)}}
.nat-note{margin-top:12px;font-size:13px;color:var(--silver-dim)}
.nat-prose{margin-top:clamp(28px,4vw,44px)}
/* El cuerpo de Ejercicio es medicina ocupa el ancho de la página y va
   justificado. La partición en sílabas evita los huecos entre palabras. */
.med-prose{max-width:none}
.med-prose p{text-align:justify;hyphens:auto}
.pull{margin:8px 0;padding:4px 0 4px 20px;border-left:3px solid var(--cyan);font:500 clamp(20px,2.2vw,26px)/1.35 var(--body);font-style:italic;color:var(--paper)}
.fitt{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.fitt-it{display:grid;gap:6px;align-content:start;padding:20px;background:var(--ink)}
.fitt-l{font:700 clamp(40px,5vw,56px)/1 var(--display);color:var(--volt)}
.fitt-it b{font:600 15px/1.2 var(--label);letter-spacing:.08em;text-transform:uppercase;color:var(--cyan)}
.fitt-it p{color:var(--silver);font-size:15px}
@media (min-width:900px){.fitt{grid-template-columns:repeat(6,1fr)}}
.dose-min{margin-top:clamp(24px,3vw,36px);display:grid;gap:10px;max-width:780px;padding:22px 24px;border-left:3px solid var(--volt);background:var(--ink-2)}
.dose-min p{font-size:17px;line-height:1.6}
.sources summary{cursor:pointer;font:600 13px/1 var(--label);letter-spacing:.12em;text-transform:uppercase;color:var(--silver-dim)}
.sources ol{margin:16px 0 0;padding-left:20px;display:grid;gap:8px;font-size:13px;line-height:1.5;color:var(--silver-dim);max-width:900px}