/* Landing kairus.mx — dirección "Turno de noche" (27-sep-2026).
   La página cuenta una sola historia: un mensaje que llega a las 22:46 y
   una cita que aparece en la agenda a las 8:00. Noche (hero y cierre) →
   día (el resto). Las capturas reales del portal son la evidencia.
   Celular primero: base 360 px, @media sube a 768 y 1024.
   Contraste: cada par texto/fondo de este archivo mide ≥ 4.5:1 (WCAG 2.2);
   verificado con Playwright sobre la página renderizada. */

/* Identidad Receta (9-oct-2026): Newsreader para titulares y cifras, Hanken Grotesk para texto. Autoalojadas, OFL. */
@font-face{font-family:'Newsreader';font-style:normal;font-weight:300 600;font-display:swap;src:url(../fonts/newsreader-latin.woff2?v=2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:300 600;font-display:swap;src:url(../fonts/newsreader-italic-latin.woff2?v=2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url(../fonts/hanken-grotesk-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/jetbrains-mono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+2212}

:root{
  /* Identidad Receta (9-oct-2026, assets/marca/README.md): papel #F2F4EE,
     tinta #10201B, verde consulta #0B6B55, menta #BDEED3. Los nombres de
     variables viejos se conservan para no reescribir cada regla.
     Contraste medido: tinta/papel 15.2, verde/papel 5.8, grafito/papel 6.2,
     papel/noche 15.2, menta/noche 13.1. */
  /* noche */
  --night:#10201B; --night-2:#16302A; --night-3:#1B3A31;
  --night-line:rgba(242,244,238,.14);
  --on-night:#F2F4EE; --on-night-2:#E3ECE6;
  --signal:#BDEED3;                           /* menta; tinta encima: 13.1 */
  --moon:#BDEED3;
  /* día */
  --day:#F2F4EE; --paper:#FBFCF8; --white:#FFFFFF;
  --ink:#10201B; --ink-2:#4E5E58; --muted:#4E5E58;
  --line:#D8DED6; --line-2:#E3ECE6;
  --brand:#0B6B55;
  --brand-soft:#DCEFE4;
  --danger:#B42318;
  --radius:10px; --radius-sm:8px; --pill:999px;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Hanken Grotesk',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --maxw:1200px; --gutter:20px; --nav-h:60px;
  --shadow-shot:0 1px 2px rgba(16,32,27,.06),0 18px 40px -18px rgba(16,32,27,.28);
}

*,*::before,*::after{box-sizing:border-box}
/* overflow-x:hidden SOLO en html: en body rompe el header sticky (sep-2026). */
html{scroll-behavior:smooth;overflow-x:hidden;-webkit-text-size-adjust:100%}
/* clip recorta igual que hidden pero no convierte a <html> en contenedor de
   scroll: en celulares hidden puede quitar la inercia del desplazamiento
   y romper position:sticky (28-sep-2026). */
@supports (overflow-x:clip){html{overflow-x:clip}}
body{margin:0;background:var(--day);color:var(--ink);font-family:var(--sans);font-size:1.03rem;line-height:1.6;-webkit-font-smoothing:antialiased;font-synthesis:none}
img{max-width:100%;display:block;height:auto}
a{color:var(--brand);text-underline-offset:3px}
button{cursor:pointer;font:inherit;border:none;background:none;color:inherit}
h1,h2{font-family:var(--serif);font-weight:400;margin:0;letter-spacing:-.01em;text-wrap:balance}
h3,h4{font-family:var(--sans);font-weight:650;margin:0;letter-spacing:-.005em}
p,ul,ol,dl,dd,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
.mono{font-family:var(--mono);font-weight:500;font-size:.78em;letter-spacing:.02em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
section{position:relative;padding:72px 0;scroll-margin-top:var(--nav-h)}
:is(a,button,input,summary,[tabindex]):focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:6px}
.night :is(a,button,input,summary):focus-visible,.nav :is(a,button):focus-visible,.foot a:focus-visible{outline-color:var(--signal)}
.skip{position:absolute;left:-9999px;top:8px;z-index:300;background:var(--ink);color:#fff;padding:10px 16px;border-radius:8px}
.skip:focus{left:8px}

/* fondos por bloque: noche en los extremos, día alternado en medio */
.night{background:var(--night);color:var(--on-night)}
#problema,#tumandas,#porque,#compliance,#calculadoras{background:var(--day)}
#como,#especialidades,#pricing,#faq{background:var(--paper)}
#tumandas .mini-chat{margin-top:20px;max-width:520px}
#tumandas .niveles-cta{margin-top:20px}


/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:13px 24px;border-radius:var(--pill);font-weight:650;font-size:1rem;text-decoration:none;text-align:center;transition:transform .15s ease,background-color .15s ease,border-color .15s ease,box-shadow .15s ease}
.btn:active{transform:scale(.98)}
.btn-signal{background:var(--signal);color:var(--night)}
.btn-signal:hover{background:#A9E4C6}
.btn-line{border:1px solid var(--night-line);color:var(--on-night)}
.btn-line:hover{border-color:var(--on-night-2)}
.btn-ink{background:var(--brand);color:#fff}
.btn-ink:hover{background:#0B6B55}
.btn-line-ink{border:1.5px solid var(--ink);color:var(--ink)}
.btn-line-ink:hover{background:var(--ink);color:#fff}
.btn-sm{min-height:44px;padding:8px 16px;font-size:.9rem}
.btn-block{width:100%}

/* ---------- header ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:100;height:var(--nav-h);color:var(--on-night);transition:background-color .25s ease,box-shadow .25s ease}
.nav.solid{background:#10201B;box-shadow:0 1px 0 var(--night-line)}

.nav-in{max-width:var(--maxw);height:100%;margin:0 auto;padding:0 var(--gutter);display:flex;align-items:center;gap:20px}
.nlogo{display:flex;align-items:center;gap:10px;color:var(--on-night);text-decoration:none;font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.9rem}
.nlogo img{border-radius:8px}
.nlinks{display:none;gap:26px;margin-left:12px}
.nlinks a,.nlogin{color:var(--on-night-2);text-decoration:none;font-size:.93rem;font-weight:500;white-space:nowrap}
.nlinks a:hover,.nlogin:hover{color:var(--on-night)}
.nright{margin-left:auto;display:flex;align-items:center;gap:10px}
.nlogin{display:none}
.nhbtn{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;color:var(--on-night)}
.nmob{position:fixed;inset:0;z-index:200;background:var(--night);display:flex;flex-direction:column;padding:80px 24px 32px;gap:4px;visibility:hidden;opacity:0;transition:opacity .2s ease,visibility .2s}
.nmob.open{visibility:visible;opacity:1}
.nmob a:not(.btn){color:var(--on-night);text-decoration:none;font-family:var(--serif);font-size:1.9rem;padding:6px 0;border-bottom:1px solid var(--night-line)}
.nmob .btn{margin-top:auto}
.nmob-close{position:absolute;top:10px;right:14px;width:44px;height:44px;display:grid;place-items:center;color:var(--on-night)}

/* ---------- hero ---------- */
#hero{padding:calc(var(--nav-h) + 18px) 0 0;overflow:hidden}
#hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(520px 360px at 85% 30%,rgba(189,238,211,.12),transparent 70%),
             radial-gradient(420px 300px at 0% 0%,rgba(11,107,85,.55),transparent 70%)}
.hero-grid{position:relative;display:grid;gap:36px}
.stamp{display:inline-flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:.88rem;color:var(--on-night-2);margin-bottom:14px}
.stamp .mono{font-size:.8rem;color:var(--on-night);background:var(--night-3);border:1px solid var(--night-line);padding:3px 9px;border-radius:var(--pill)}
.stamp-ico{color:var(--moon)}
.stamp-sep{width:14px;height:1px;background:var(--night-line)}
#hero h1{font-size:clamp(2.3rem,9.4vw,4.7rem);line-height:1.02;color:var(--on-night)}
#hero .lead{margin-top:14px;font-size:1.05rem;line-height:1.55;color:var(--on-night-2);max-width:36em}
.cta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.cta-row .btn-line:not(#hero-wa){display:none}
.hero-mic{margin-top:12px;font-size:.82rem;color:var(--on-night-2)}

.hero-shot{position:relative;max-width:360px;margin:0 auto;width:100%}
.device{position:relative;border-radius:22px;background:var(--night-3);border:1px solid var(--night-line);padding:6px;box-shadow:0 30px 80px -30px rgba(189,238,211,.22),0 20px 50px -20px rgba(0,0,0,.6)}
.device-bar{display:flex;align-items:center;gap:8px;padding:8px 10px 10px;color:var(--on-night-2)}
.device-bar .mono{font-size:.7rem}
.device-dot{width:7px;height:7px;border-radius:50%;background:var(--signal)}
.device-tag{margin-left:auto;font-size:.66rem;font-weight:700;color:var(--night);background:var(--signal);padding:1px 7px;border-radius:var(--pill)}
.device img{border-radius:16px;width:100%}
.note{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:var(--pill);background:var(--on-night);color:var(--night);font-size:.8rem;font-weight:600;box-shadow:0 10px 24px -10px rgba(0,0,0,.5);white-space:nowrap}
.note .mono{color:var(--brand);font-size:.74rem}
/* aparecen en orden, como la conversación; sin JS y solo con movimiento permitido */
@media (prefers-reduced-motion:no-preference){
  .note{animation:nota .5s cubic-bezier(.2,.7,.3,1) .5s both}
  .note-b{animation-delay:.85s}
}
@keyframes nota{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.note-a{top:64px;right:-6px}
.note-b{top:64%;right:-6px}
.hero-shot figcaption{margin-top:12px;text-align:center;font-size:.76rem;color:var(--on-night-2)}

.proofline{position:relative;display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:center;margin-top:44px;padding-top:20px;padding-bottom:22px;border-top:1px solid var(--night-line);color:var(--on-night-2);font-size:.86rem}
.proofline li{display:inline-flex;align-items:center;gap:8px}
.proofline svg{color:var(--signal)}

/* ---------- encabezado de bloque ---------- */
.shead{max-width:720px;margin-bottom:36px}
.kicker{font-family:var(--mono);font-size:.74rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);margin-bottom:12px;display:flex;align-items:center;gap:10px}
.kicker::before{content:"";width:18px;height:1.5px;background:currentColor}
.shead h2{font-size:clamp(2rem,7.4vw,3.4rem);line-height:1.06}
.shead p:not(.kicker){margin-top:14px;color:var(--muted);font-size:1.03rem;max-width:40em}
.night .shead p:not(.kicker){color:var(--on-night-2)}
.night .kicker{color:var(--signal)}
.aside{margin-top:18px;font-size:.93rem;color:var(--muted)}
/* Fila de enlaces sueltos (Aviso, Términos): área táctil de 44 px. */
.aside a{display:inline-flex;align-items:center;min-height:44px}
.fine{margin-top:22px;font-size:.8rem;color:var(--muted)}
.fine.center{text-align:center}
.ico{width:24px;height:24px;flex-shrink:0;color:var(--brand)}

/* ---------- 2 · problema: bitácora de horas ---------- */
.log{border-top:1px solid var(--line)}
.log li{display:grid;grid-template-columns:64px 1fr;gap:14px;padding:20px 0;border-bottom:1px solid var(--line)}
.log time{padding-top:3px;color:var(--brand);font-size:.9rem}
.log h3{font-size:1.14rem;margin-bottom:4px}
.log p{color:var(--muted)}
.figures{display:grid;gap:28px;margin-top:44px}
.figure{display:flex;flex-direction:column;gap:6px}
.fig-n{font-family:var(--serif);font-size:clamp(3rem,13vw,5.2rem);line-height:.95;color:var(--ink)}
.fig-l{font-size:1rem;color:var(--ink-2);max-width:22em}
.fig-s{color:var(--muted);font-size:.72rem;text-transform:uppercase}
.fig-s a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* ---------- 3 · así se ve: tres capítulos con capturas reales ---------- */
.story{display:grid;gap:64px}
.chapter{display:grid;gap:22px}
.clock{display:inline-flex;align-items:center;gap:10px;color:var(--brand);font-size:.82rem;margin-bottom:10px}
.clock-n{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid var(--line-2);color:var(--ink);font-size:.72rem}
.chapter h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,6vw,2.4rem);line-height:1.08;margin-bottom:10px}
.chapter-copy>p:not(.clock):not(.aside){color:var(--muted);max-width:32em}
.chapter-copy .btn{margin-top:22px}
.shot .frame{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-shot)}
.shot figcaption{margin-top:10px;font-family:var(--mono);font-size:.72rem;color:var(--muted)}
/* anillo sobre la cita de Mariana (jueves 17:30); coordenadas en % de cada captura */
.ring{position:absolute;left:var(--rx,42%);top:var(--ry,86.1%);width:var(--rw,29%);height:var(--rh,6.6%);border:2.5px solid var(--brand);border-radius:12px;box-shadow:0 0 0 6px rgba(189,238,211,.30);pointer-events:none}
.shot-cal{--rx:19.4%;--ry:53.5%;--rw:75.8%;--rh:14.1%}
.shot-agenda{--rx:9.2%;--ry:70.8%;--rw:81.7%;--rh:26.4%}
.only-m{display:inline}

/* ---------- 4 · equipo ---------- */
.versus{display:grid;gap:14px}
.vs-col{border-radius:var(--radius);padding:24px 22px}
.vs-col h3{font-family:var(--mono);font-weight:500;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
.vs-col li{position:relative;padding:10px 0 10px 28px;border-top:1px solid var(--line)}
.vs-col li:first-child{border-top:none}
.vs-col li::before{content:"";position:absolute;left:2px;top:19px;width:12px;height:1.5px;background:var(--muted)}
.vs-hoy{background:var(--paper);color:var(--ink-2)}
.vs-hoy h3{color:var(--muted)}
.vs-con{background:var(--brand);color:var(--on-night)}
.vs-con h3{color:var(--signal)}
.vs-con li{border-top-color:var(--night-line)}
.vs-con li::before{top:14px;left:0;width:14px;height:8px;background:none;border-left:2px solid var(--signal);border-bottom:2px solid var(--signal);transform:rotate(-45deg)}
.pull{margin-top:40px;font-family:var(--serif);font-size:clamp(1.6rem,5.6vw,2.4rem);line-height:1.15;max-width:22em}
.pull em{font-style:italic;color:var(--brand)}

/* ---------- 5 · especialidades: lista, no tarjetas ---------- */
.esp-list{border-top:1px solid var(--line-2)}
.esp-list li{display:grid;grid-template-columns:28px 1fr;column-gap:14px;padding:18px 0;border-bottom:1px solid var(--line-2)}
.esp-list .ico{grid-row:span 2;margin-top:4px}
.esp-list h3{font-family:var(--serif);font-weight:400;font-size:1.65rem;line-height:1.1}
.esp-list p{color:var(--muted);margin-top:4px}

/* ---------- 6 · confianza ---------- */
.trust{display:grid;gap:28px}
/* Compromisos verificables (28-sep-2026): reemplazan la tarjeta del fundador. */
.estandar{list-style:none;margin:0;padding:26px 22px;background:var(--paper);border-radius:var(--radius);display:grid;gap:18px}
.estandar li{padding-left:18px;border-left:3px solid var(--brand)}
.estandar h3{font-size:1.05rem;margin-bottom:4px}
.estandar p{margin:0;color:var(--ink-2);font-size:.97rem}
/* Título y "¿Tu pregunta no está aquí?" van juntos en .faq-lado: en
   escritorio es la columna izquierda fija (antes el título era sticky y se
   encimaba con el bloque del asistente al bajar). En celular .faq-lado se
   "disuelve" para que el bloque siga saliendo después de las preguntas. */
.faq-layout{display:flex;flex-direction:column}
.faq-lado{display:contents}
.faq-layout .fwrap{order:1}
.faq-layout .faq-mas{order:2}
.faq-mas{margin-top:28px;padding:22px;border-radius:var(--radius);background:var(--paper);display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;justify-content:space-between}
.faq-mas p{margin:0;max-width:40em;color:var(--ink-2)}
.faq-mas .btn{margin-top:0;gap:10px}
.faq-lado .faq-mas{padding:0;background:none} /* mismo fondo que la sección: sin relleno queda alineado al título */
.mbar .btn{gap:10px}
.guarantees{display:grid;gap:12px}
.ticket{display:flex;gap:18px;align-items:flex-start;padding:20px;border:1.5px dashed var(--line-2);border-radius:var(--radius)}
.ticket-n{font-family:var(--serif);font-size:3rem;line-height:.9;color:var(--brand);min-width:2.2em}
.ticket .mono{color:var(--muted);text-transform:uppercase;font-size:.7rem}
.ticket h3{font-size:1.05rem;margin:2px 0 4px}
.ticket p:not(.mono){color:var(--muted);font-size:.95rem}
.proofs{display:grid;gap:0;border-top:1px solid var(--line)}
.proofs li{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.proofs h3{font-size:1rem}
.proofs p{color:var(--muted);font-size:.95rem}
.notfor{margin-top:36px;border-left:3px solid var(--ink);padding:4px 0 4px 20px}
.notfor h3{font-family:var(--serif);font-weight:400;font-size:1.7rem;margin-bottom:10px}
.notfor li{padding:6px 0;color:var(--ink-2)}

/* ---------- 7 · precios ---------- */
.plans{display:grid;gap:16px}
.plan{position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px}
.plan-feat{background:var(--brand);color:var(--on-night);border-color:var(--brand);display:flex;flex-direction:column}
.plan-guar{margin:auto 0 18px;padding-top:18px;border-top:1px solid var(--night-line);display:grid;gap:8px;font-size:.93rem;color:var(--on-night-2)}
.plan-guar .mono{display:inline-block;min-width:9.5em;color:var(--signal)}
.plan-badge{display:inline-block;margin-bottom:12px;color:var(--night);background:var(--signal);padding:3px 10px;border-radius:var(--pill);font-size:.7rem;text-transform:uppercase}
.plan-name{font-family:var(--mono);font-weight:500;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.plan-feat .plan-name{color:var(--on-night-2)}
.plan-price{font-family:var(--serif);font-size:3rem;line-height:1;margin-top:8px}
.plan-price span{font-family:var(--sans);font-size:.9rem;color:var(--muted)}
.plan-feat .plan-price span{color:var(--on-night-2)}
.plan-setup{font-size:.9rem;color:var(--muted);margin-top:6px}
.plan-feat .plan-setup{color:var(--on-night-2)}
.plan-desc{margin:14px 0;color:var(--ink-2)}
.plan-feat .plan-desc{color:var(--on-night)}
.ticks{display:grid;gap:8px;margin-bottom:22px}
.ticks li{display:flex;gap:10px;align-items:flex-start;font-size:.95rem}
.ticks svg{width:15px;height:15px;flex-shrink:0;margin-top:4px;color:var(--brand)}
.plan-feat .ticks svg{color:var(--signal)}
.ticks li.na{color:var(--muted)}
.ticks li.na svg{color:var(--muted)}
.soft{color:var(--muted)}
.plan-feat .soft{color:var(--on-night-2)}
.plan-mic{margin-top:10px;text-align:center;font-size:.8rem;color:var(--muted)}
.plan-feat .plan-mic{color:var(--on-night-2)}
.plan-valor{margin:4px 0 0;font-size:.85rem;color:var(--muted)}
.plan-feat .plan-valor{color:var(--on-night-2)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.cmp-wrap{overflow-x:auto;margin-top:8px}
.cmp{width:100%;border-collapse:collapse;font-size:.95rem}
.cmp th,.cmp td{padding:10px 8px;text-align:left;border-bottom:1px solid var(--line)}
.cmp thead th{font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cmp thead th:not(:first-child),.cmp td{text-align:center;width:28%}
.cmp tbody th[scope=row]{font-weight:400}
.cmp-grupo th{padding-top:22px;font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border-bottom:2px solid var(--line-2)}
.cmp-si{color:var(--brand);font-weight:700}
.cmp-no{color:var(--muted)}
.cmp-total th,.cmp-total td{font-weight:700;background:var(--brand-soft)}
.sub-h{font-family:var(--serif);font-weight:400;font-size:1.8rem;margin:56px 0 14px}
.addons{border-top:1px solid var(--line-2)}
.addons li{display:grid;grid-template-columns:24px 1fr;column-gap:14px;row-gap:6px;padding:16px 0;border-bottom:1px solid var(--line-2)}
.addons .ico{margin-top:3px}
.addons h3{font-size:1.02rem}
.addons p{color:var(--muted);font-size:.95rem}
.addon-price{grid-column:2;color:var(--ink)!important;font-size:.8rem!important}

/* plegables */
.fold{margin-top:20px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius)}
.fold summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:18px 20px;font-weight:650;cursor:pointer;min-height:56px}
.fold summary::-webkit-details-marker{display:none}
.fold .arr{transition:transform .2s ease;flex-shrink:0}
.fold[open] .arr{transform:rotate(180deg)}
.fold-body{padding:0 20px 22px}
.calc-grid{display:grid;gap:28px}
.calc-grid .cbox+.cbox{border-top:1px solid var(--line);padding-top:28px}
.cbox h3{font-size:1.08rem;margin-bottom:4px}
.csub{font-size:.93rem;color:var(--muted);margin-bottom:18px}
.crow{margin-bottom:16px}
.crow label{display:flex;justify-content:space-between;gap:12px;font-size:.92rem;color:var(--ink-2);margin-bottom:6px}
.crow .val{font-family:var(--mono);font-size:.84rem;color:var(--brand);white-space:nowrap}
.crow input[type=range]{width:100%;accent-color:#0B6B55;min-height:44px}
.cres{background:var(--brand-soft);border-radius:var(--radius-sm);padding:18px;margin-top:16px}
.cres .big{font-family:var(--serif);font-size:2.3rem;line-height:1;color:var(--ink)}
.cres .rl{font-size:.9rem;color:var(--ink-2);margin:6px 0 10px}
.cres .rcta{font-size:.92rem;color:var(--ink-2)}
.cextra{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
.cextra .cn{font-family:var(--serif);font-size:1.7rem;line-height:1.1}
.cextra .cl{font-size:.84rem;color:var(--muted)}
.cdisc{margin-top:12px;font-size:.8rem;color:var(--muted)}
.ccompare{margin-top:30px;padding-top:26px;border-top:1px solid var(--line)}
.ccompare h3{font-size:1.08rem;margin-bottom:4px}
.ctable{width:100%;border-collapse:collapse;font-size:.95rem}
.ctable th,.ctable td{padding:12px 8px;text-align:left;border-bottom:1px solid var(--line)}
.ctable thead th{font-family:var(--mono);font-weight:500;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ctable td.util{font-family:var(--serif);font-size:1.4rem;text-align:right}
.ctable thead th:last-child{text-align:right}
.ctable tr.feat th,.ctable tr.feat td{background:var(--brand-soft)}
.ctable td.util.neg{color:var(--danger)}
.tl{display:grid;gap:0}
.tl li{display:grid;grid-template-columns:36px 1fr;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
.tl li:last-child{border-bottom:none}
.tl-n{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;font-size:.78rem}
.tl h3{font-size:1rem}
.tl p{font-size:.93rem;color:var(--muted)}

/* ---------- 8 · datos ---------- */
.data-grid{display:grid;gap:40px}
.data-h{font-size:1.1rem;display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:12px}
.tag{font-size:.68rem;color:var(--brand);background:var(--brand-soft);padding:3px 8px;border-radius:var(--pill)}
.data-list>div{padding:14px 0;border-top:1px solid var(--line)}
.data-list dt{display:flex;align-items:center;gap:10px;font-weight:650}
.data-list dt .ico{width:18px;height:18px}
.data-list dd{margin:4px 0 0 28px;color:var(--muted);font-size:.95rem}
.callout{margin-top:20px;background:var(--paper);border-radius:var(--radius-sm);padding:18px 20px}
.callout h4{margin-bottom:4px}
.callout p{color:var(--ink-2);font-size:.95rem}

/* ---------- 9 · FAQ ---------- */
.fwrap{border-top:1px solid var(--line-2)}
.fi{border-bottom:1px solid var(--line-2)}
.fq{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;text-align:left;padding:18px 0;min-height:60px;font-weight:600;font-size:1.03rem;color:var(--ink)}
.fq .arr{transition:transform .2s ease;flex-shrink:0;color:var(--brand)}
.fq[aria-expanded="true"] .arr{transform:rotate(180deg)}
.fa{padding:0 32px 20px 0;color:var(--ink-2)}

/* ---------- 10 · formulario ---------- */
#lead-form{padding-bottom:88px}
.lf-grid{display:grid;gap:32px}
.lf-copy h2{font-size:clamp(2.1rem,7.6vw,3.4rem);line-height:1.05;color:var(--on-night)}
.lf-copy>p:not(.stamp):not(.lf-trust){margin-top:14px;color:var(--on-night-2)}
.lf-list{margin-top:20px;display:grid;gap:8px}
.lf-list li{display:flex;gap:10px;align-items:center;color:var(--on-night)}
.lf-list svg{color:var(--signal);flex-shrink:0}
.lf-wa{margin-top:22px;width:100%}
@media (min-width:480px){.lf-wa{width:auto}}
.lf-trust{margin-top:20px;font-size:.84rem;color:var(--on-night-2)}
.lf-trust svg{display:inline;vertical-align:-2px;margin-right:6px;color:var(--signal)}
.lf-trust a{color:var(--on-night)}
.lf-card{background:var(--white);color:var(--ink);border-radius:22px;padding:24px 20px}
.lf-form{display:grid;gap:14px}
.lf-form label{display:block;font-size:.9rem;font-weight:600;margin-bottom:6px}
.lf-form input[type=text],.lf-form input[type=tel]{width:100%;min-height:50px;padding:12px 14px;font:inherit;font-size:16px;color:var(--ink);background:var(--day);border:1.5px solid var(--line-2);border-radius:12px}
.lf-form input::placeholder{color:#5F6F69}
.lf-form input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(189,238,211,.35)}
.lf-trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lf-consent{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap}
.lf-consent input{width:24px;height:24px;margin:0;accent-color:#0B6B55;flex-shrink:0}
.lf-consent label{flex:1;min-height:44px;font-weight:400;font-size:.88rem;color:var(--ink-2);margin:0}
.lf-submit{min-height:54px;border-radius:var(--pill);background:var(--brand);color:#fff;font-weight:700;font-size:1.03rem;transition:transform .15s ease,background-color .15s ease}
.lf-submit:hover{background:#10201B}
.lf-submit:active{transform:scale(.98)}
.lf-submit:disabled{opacity:.7;cursor:progress}
.lf-after{text-align:center;font-size:.85rem;color:var(--muted)}
.campo-error input{border-color:var(--danger)!important}
.err-msg{display:block;flex-basis:100%;margin-top:6px;font-size:.84rem;color:var(--danger);font-weight:600}
.form-confirmacion{margin-top:14px;padding:14px 16px;border-radius:12px;font-weight:600}
.form-confirmacion.ok{background:var(--brand-soft);color:var(--brand)}
.form-confirmacion.err{background:#FDECEA;color:#8A1C12}

/* ---------- barra fija en celular ---------- */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:90;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));background:rgba(16,32,27,.95);border-top:1px solid var(--night-line);transform:translateY(110%);transition:transform .25s ease}
.mbar.show{transform:none}

/* ---------- footer ---------- */
.foot{background:var(--night-2);color:var(--on-night-2);padding:56px 0 calc(88px + env(safe-area-inset-bottom));font-size:.92rem}
.fg{display:grid;gap:32px}
.fbrand-name{font-family:var(--serif);font-size:2rem;color:var(--on-night);margin-bottom:6px}
.fcol{display:flex;flex-direction:column;gap:8px}
.fcol h2{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--on-night);margin-bottom:4px}
.fcol a{color:var(--on-night-2);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.fcol a:hover{color:var(--on-night);text-decoration:underline}
.fbot{margin-top:40px;padding-top:20px;border-top:1px solid var(--night-line);display:grid;gap:8px;font-size:.8rem}
/* El enlace heredaba el azul de marca: invisible sobre el fondo azul del pie. */
.fbot a{color:var(--on-night);text-decoration:underline}

/* ================= 480+ ================= */
@media (min-width:480px){
  .cta-row .btn-line{display:inline-flex}
  .figures{grid-template-columns:1fr 1fr}
}

/* ================= 768+ ================= */
@media (min-width:768px){
  :root{--gutter:32px;--nav-h:68px}
  section{padding:88px 0}
  .only-m{display:none}
  .shot-cal{--rx:46.6%;--ry:81.5%;--rw:12.6%;--rh:5.1%}
  .shot-agenda{--rx:5%;--ry:79.3%;--rw:90%;--rh:6%}
  .log li{grid-template-columns:120px 1fr 1.2fr;align-items:baseline;gap:24px;padding:26px 0}
  .log time{font-size:1.05rem}
  .log h3{font-size:1.3rem;margin:0}
  .versus{grid-template-columns:1fr 1fr;gap:16px}
  .vs-col{padding:30px 28px}
  .esp-list li{grid-template-columns:28px 220px 1fr;align-items:baseline;column-gap:18px;padding:22px 0}
  .esp-list .ico{grid-row:auto;align-self:center;margin:0}
  .esp-list p{margin:0}
  .guarantees{grid-template-columns:1fr 1fr}
  .proofs{grid-template-columns:1fr 1fr;column-gap:32px}
  .addons li{grid-template-columns:24px 1fr 250px;align-items:baseline}
  .addon-price{grid-column:3;text-align:right}
  .calc-grid{grid-template-columns:1fr 1fr;gap:40px}
  .calc-grid .cbox+.cbox{border-top:none;padding-top:0;border-left:1px solid var(--line);padding-left:40px}
  .fold summary{padding:20px 26px}
  .fold-body{padding:0 26px 26px}
  .tl{grid-template-columns:1fr 1fr;column-gap:32px}
  .tl li:nth-last-child(2){border-bottom:none}
  .data-grid{grid-template-columns:1fr 1fr;gap:56px}
  .lf-card{padding:32px 30px}
  .fg{grid-template-columns:repeat(3,1fr)}
  .fbrand{grid-column:1/-1}
  .foot{padding-bottom:40px}
}

/* ================= 1024+ ================= */
@media (min-width:1024px){
  .fg{grid-template-columns:1.6fr 1fr 1fr 1fr}
  .fbrand{grid-column:auto}
  .nlinks,.nlogin{display:flex}
  .nhbtn{display:none}
  #hero{padding-top:calc(var(--nav-h) + 56px)}
  .hero-grid{grid-template-columns:1.1fr .9fr;align-items:center;gap:56px}
  .hero-shot{max-width:400px}
  .note-a{right:-34px}
  .note-b{right:-34px;top:64%}
  .proofline{justify-content:flex-start;margin-top:64px}
  .chapter{grid-template-columns:5fr 7fr;align-items:center;gap:64px}
  .chapter:nth-child(even) .chapter-copy{order:2}
  .story{gap:120px}
  .shot-cal .frame{max-width:560px;margin-left:auto}
  .esp-layout,.faq-layout{display:grid;grid-template-columns:4fr 7fr;gap:64px;align-items:start}
  .esp-layout .shead{position:sticky;top:calc(var(--nav-h) + 32px)}
  .faq-lado{display:block;position:sticky;top:calc(var(--nav-h) + 32px)}
  .faq-lado .faq-mas{margin-top:32px;flex-direction:column;align-items:flex-start}

  .trust{grid-template-columns:1.2fr 1fr;align-items:start}
  .estandar{grid-row:span 2;padding:32px 30px}

  .guarantees{grid-template-columns:1fr}
  .proofs{grid-column:1 / -1;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
  .proofs li{flex-direction:column;border-bottom:none;padding:20px 20px 0 0}
  /* Growth: banda completa con dos columnas; Starter y Max debajo, más chicos */
  .plans{grid-template-columns:1fr 1fr}
  .plan-feat{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;column-gap:56px;padding:40px 44px}
  .plan-feat>*{grid-column:1}
  .plan-feat .plan-badge{justify-self:start}
  .plan-feat .ticks{grid-column:2;grid-row:1 / span 6;align-self:center;margin:0;gap:12px;font-size:1rem}
  .plan-feat .plan-guar{margin:6px 0 18px}
  .plan-feat .plan-price{font-size:4.2rem}
  .lf-grid{grid-template-columns:1fr 1fr;align-items:center;gap:72px}
  .mbar{display:none}
}

/* hover solo con puntero real */

/* ---------- niveles de atención ---------- */
.niveles{display:grid;gap:14px;counter-reset:none}
.nivel{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:22px 20px;display:flex;flex-direction:column;gap:10px}
.nivel:nth-child(3){border-color:var(--brand);box-shadow:inset 0 3px 0 var(--signal)}
.nivel-n{color:var(--brand);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase}
.nivel h3{font-size:1.2rem}
.nivel > p:not(.nivel-n){color:var(--ink-2);font-size:.97rem}
.mini-chat{margin-top:auto;background:#EFEAE2;border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:6px}
.mc{max-width:88%;font-size:.86rem;line-height:1.4;padding:7px 10px;border-radius:10px;color:#111}
.mc.pac{align-self:flex-end;background:#D9FDD3;border-bottom-right-radius:3px}
.mc.bot{align-self:flex-start;background:#FFFFFF;border-bottom-left-radius:3px}
.niveles-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
@media (min-width:1024px){.niveles{grid-template-columns:1fr 1fr 1.15fr;align-items:stretch}}

@media (hover:hover){
  .btn-signal:hover,.btn-ink:hover{transform:translateY(-1px)}
}

/* sin movimiento: ni transiciones ni scroll suave */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}

@media (min-width:1024px){#tumandas .proofs{grid-template-columns:repeat(3,1fr)}}
#compliance{border-top:1px solid var(--line)}
#compliance .data-list{max-width:780px}
#arranque{background:var(--day);border-top:1px solid var(--line)}
#arranque .niveles-cta{margin-top:20px}
.nlogo{min-height:44px}
.rcta a{display:inline-flex;align-items:center;min-height:44px}

/* Tipografía Receta (9-oct-2026): titulares y cifras en Newsreader 400 con
   tracking negativo; h3 y texto en Hanken Grotesk. */
h1,h2{font-weight:400;letter-spacing:-.02em}
h1,#hero h1{font-size:clamp(2.4rem,8.4vw,4.4rem);line-height:1.02}
h2{font-size:clamp(2rem,6.4vw,3.1rem);line-height:1.06}
h1 em,h2 em{font-style:italic;color:var(--brand)}
.nmob a:not(.btn){font-family:var(--serif);font-weight:400;font-size:1.8rem}
.fig-n,.ticket-n,.plan-price,.cres .big{font-family:var(--serif);font-weight:400;letter-spacing:-.03em}
.fig-n{font-size:clamp(2.8rem,11vw,4.6rem)}
.ticket-n{font-size:2.3rem;white-space:nowrap;flex:none;min-width:3.1em}
.plan-price span{letter-spacing:0;display:inline-block;white-space:nowrap}
.plan-price{font-size:2.9rem}
.cres .big{font-size:2.2rem}
.chapter h3,.esp-list h3,.notfor h3,.sub-h{font-family:var(--serif);font-weight:400;letter-spacing:-.015em}
.chapter h3{font-size:clamp(1.6rem,5vw,2.2rem)}
.esp-list h3,.notfor h3{font-size:1.5rem}
.sub-h{font-size:1.6rem}
.pull{font-weight:600;letter-spacing:-.015em;font-size:clamp(1.35rem,4.6vw,2rem)}
.cextra .cn{font-weight:700;font-size:1.45rem}
.ctable td.util{font-weight:700;font-size:1.2rem}
.fbrand-name{font-weight:800;font-size:1.7rem;letter-spacing:-.02em}

.btn-sm{white-space:nowrap}
@media (max-width:380px){.btn-sm{padding:8px 12px;font-size:.84rem}}

/* ================= Ilustraciones (28-sep-2026) =================
   Exportadas a WebP con fondo transparente (color a alfa contra blanco),
   así sirven sobre --day y --paper. .ilus-night ya viene recoloreada a
   --night para la sección oscura. */
.ilus{display:block;max-width:100%;height:auto}
.ilus-night{display:block;max-width:100%;height:auto;border-radius:var(--radius)}
figure{margin:0}
.fig-desk{display:none}
.shead-fig{max-width:420px;margin:-12px auto 28px}
.shead-fig .ilus{margin:0 auto}

/* Problema: cada momento con su escena */
.log li{grid-template-columns:88px 1fr;column-gap:16px}
.log-img{grid-row:span 2;width:88px;height:88px;object-fit:contain;align-self:start}
.log li>time{align-self:end}

/* Tú mandas: dos escenas lado a lado */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 28px}
.duo figure{display:flex;flex-direction:column;gap:8px}
.duo .ilus{width:100%;aspect-ratio:1/1;object-fit:contain}
.duo figcaption{font-size:.86rem;color:var(--muted);text-align:center}

/* Especialidades: ilustración en lugar del icono */
.esp-list li{grid-template-columns:72px 1fr}
.esp-img{grid-row:span 2;width:72px;height:72px;object-fit:contain}

/* Tus datos */
.con-fig{display:grid;gap:24px}
.con-fig figure{max-width:340px;margin:0 auto}

/* Formulario enviado */
.lead-ok-img{width:220px;margin:0 auto 8px}
.lead-ok-img[hidden]{display:none}

@media (min-width:768px){
  .log{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;border-top:none}
  .log li{display:flex;flex-direction:column;gap:8px;padding:20px;border:1px solid var(--line);border-radius:var(--radius);align-items:stretch}
  .log-img{width:100%;height:auto;aspect-ratio:1/1;margin-bottom:6px}
  .log h3{margin:0 0 4px}
  .esp-list li{grid-template-columns:96px 220px 1fr;align-items:center}
  .esp-img{grid-row:auto;width:96px;height:96px}
  .duo{gap:28px;max-width:880px}
}
@media (min-width:1024px){
  .fig-desk{display:block}
  #como .wrap,#arranque .wrap{display:grid;grid-template-columns:1fr 380px;column-gap:56px}
  #como .wrap>*,#arranque .wrap>*{grid-column:1 / -1}
  #como .shead,#arranque .shead{grid-column:1;align-self:center}
  #como .shead-fig,#arranque .shead-fig{grid-column:2;grid-row:1;margin:0 0 36px}
  .con-fig{grid-template-columns:1fr 340px;gap:56px;align-items:center}
  .faq-fig{margin-top:28px;max-width:260px}
  .lf-fig{margin:24px 0 8px;max-width:440px}
}

/* Oferta oct-2026: 2 planes, recordatorio con botón, bloque fundador y
   selector del formulario. */
@media (min-width:768px){.plans-2{grid-template-columns:1fr 1fr;align-items:stretch}}
.rec-mock{max-width:380px;margin:0 auto;background:#ECE5DD;border-radius:var(--radius);padding:18px 14px;display:grid;gap:8px}
.rec-burbuja{background:var(--white);border-radius:12px 12px 12px 4px;padding:10px 12px 18px;position:relative;font-size:.92rem;color:var(--ink);box-shadow:0 1px 1px rgba(16,32,27,.12)}
.rec-burbuja p{margin:0}
.rec-hora{position:absolute;right:10px;bottom:4px;font-size:.68rem;color:var(--muted)}
.rec-botones{display:grid;gap:4px}
.rec-botones span{display:block;background:var(--white);border-radius:10px;padding:10px;text-align:center;color:#0B6B55;font-weight:600;font-size:.92rem;box-shadow:0 1px 1px rgba(16,32,27,.12)}
.rec-respuesta{justify-self:end;background:#D9FDD3;border-radius:12px 12px 4px 12px;padding:8px 12px 18px;position:relative;min-width:120px;font-size:.92rem}
.rec-respuesta p{margin:0}
.rec-mock figcaption{font-size:.78rem;color:var(--ink-2);text-align:center}
#fundador .plan{background:var(--night-2);border-color:var(--night-line);color:var(--on-night)}
#fundador .plan-name,#fundador .plan-price span,#fundador .plan-setup{color:var(--on-night-2)}
#fundador .fine,#fundador .fine a{color:var(--on-night-2)}
.lf-select{width:100%;min-height:50px;padding:12px 14px;font:inherit;font-size:16px;color:var(--ink);background:var(--day);border:1.5px solid var(--line-2);border-radius:12px}
/* Te escuchamos */
.escucha{display:grid;gap:28px;align-items:center}
.escucha h2{max-width:18em}
.escucha p:not(.kicker){margin-top:14px;color:var(--on-night-2);font-size:1.03rem;max-width:40em}
.escucha-cta{padding:24px;border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);background:rgba(255,255,255,.04)}
.escucha-cta .escucha-ej{margin:0 0 18px;font-size:.95rem}
.escucha-cta .btn{gap:10px;width:100%;justify-content:center}
@media (min-width:900px){.escucha{grid-template-columns:1.4fr 1fr;gap:56px}}
/* Revisión 2-oct: precios lado a lado, cupo fundador y "para ti / no para ti". */
@media (min-width:768px){
  .plans-2 .plan{display:flex;flex-direction:column}
  .plans-2 .plan-feat{grid-column:auto;padding:24px 22px}
  .plans-2 .plan-feat .ticks{margin:0 0 22px;gap:8px;font-size:inherit;align-self:stretch}
  .plans-2 .plan-feat .plan-price{font-size:2.6rem}
  .plans-2 .plan .ticks{flex:1}
}
.fundador-top{display:grid;gap:8px 56px}
.cupo{background:var(--night-2);border:1px solid var(--night-line);border-radius:var(--radius);padding:24px 22px;margin-bottom:36px;color:var(--on-night)}
.cupo-n strong{font-size:3rem;font-weight:800;letter-spacing:-.03em;color:var(--signal);line-height:1}
.cupo-n span{color:var(--on-night-2)}
.cupo-barra{height:8px;border-radius:var(--pill);background:rgba(255,255,255,.12);margin:14px 0 10px;overflow:hidden}
.cupo-barra span{display:block;height:100%;min-width:6px;background:var(--signal);border-radius:inherit}
.cupo-cierre{font-size:.88rem;color:var(--on-night-2);margin-bottom:16px}
.cupo .ticks{margin:0}
.cupo .ticks svg{color:var(--signal)}
#no-es-para-ti{padding-top:48px;padding-bottom:48px}
.fit{display:grid;gap:28px}
.fit .notfor{margin-top:0}
.isfor{border-left:3px solid var(--brand);padding:4px 0 4px 20px}
.isfor h3{font-size:1.4rem;font-weight:700;letter-spacing:-.018em;margin-bottom:10px}
.isfor li{padding:6px 0;color:var(--ink-2)}
@media (min-width:900px){
  .fundador-top{grid-template-columns:1.4fr 1fr;align-items:center}
  .fit{grid-template-columns:1fr 1fr;gap:56px}
}

/* ---------- escenas animadas (assets/js/escenas.js) ----------
   .escena ocupa la misma caja que antes tenía la imagen (.log-img); el SVG
   se ajusta con "meet" igual que object-fit:contain, así los elementos
   dibujados caen sobre el bitmap a cualquier tamaño. */
.escena{position:relative;display:block}
.escena>img,.escena>svg{position:absolute;inset:0;width:100%;height:100%}
.escena>img{object-fit:contain}
.escena>svg{overflow:visible;pointer-events:none}
.escena .aro{fill:none;stroke:var(--signal);stroke-width:2;opacity:0}
.mov-btn{position:fixed;left:12px;bottom:calc(76px + env(safe-area-inset-bottom));z-index:95;min-height:44px;padding:0 16px;border:1px solid var(--line-2);border-radius:var(--pill);background:var(--white);color:var(--ink);font:600 .85rem/1 var(--sans);box-shadow:0 2px 10px rgba(16,32,27,.14);cursor:pointer}
.mov-btn:hover{border-color:var(--brand)}
.mov-btn:focus-visible{outline:3px solid var(--signal);outline-offset:2px}
.mov-btn[hidden]{display:none}
/* Oculto a la vista; aparece al recibir foco con teclado (WCAG 2.2.2: debe haber forma de pausar) */
.mov-btn:not(:focus){width:1px;min-height:0;height:1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;box-shadow:none}
@media (min-width:768px){.mov-btn{bottom:20px;left:20px}}

/* Poses del personaje sobre el fondo (escenas.js, cambio de poses). La caja se
   da en % del cuadro con las variables que escribe scripts/procesar-poses.py
   (<escena>-poses.json). La pose "a" es la estática; JS solo cambia opacity. */
.escena .poses{position:absolute;left:var(--p-left);top:var(--p-top);width:var(--p-w);height:var(--p-h);pointer-events:none}
.escena .poses img{position:absolute;inset:0;width:100%;height:100%;opacity:0}
.escena .poses img[data-pose="a"]{opacity:1}
.escena .poses[data-estatica="b"] img[data-pose="a"]{opacity:0}
.escena .poses[data-estatica="b"] img[data-pose="b"]{opacity:1}

/* ---------- hero: escena 3D suave (reemplaza la captura del portal) ----------
   La tarjeta flota en capas a distinta altura (--z) y se inclina un poco; el chat es texto real
   (accesible y traducible) sobre vidrio, no parte de la imagen. Sin JS o con "reducir movimiento"
   queda en su estado final y quieta. */
.hero-escena{position:relative;width:100%;max-width:min(92vw,500px);margin:0 auto}
.e3d{--rx:0deg;--ry:0deg;width:100%;aspect-ratio:1;perspective:1100px}
.e3d .tarjeta{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry))}
.e3d .cara{position:absolute;inset:0;border-radius:26px;overflow:hidden;background:var(--night);box-shadow:0 0 0 1px rgba(255,255,255,.14) inset,0 34px 70px -28px rgba(0,0,0,.75),0 0 60px -14px rgba(189,238,211,.38)}
.e3d .cara img{display:block;width:100%;height:100%;object-fit:cover}
.e3d .capa{position:absolute;inset:0;pointer-events:none;transform-style:preserve-3d;transform:translateZ(var(--z,0px))}
.chat{position:absolute;display:flex;flex-direction:column;gap:3px;max-width:62%;padding:9px 13px;border-radius:16px;color:var(--on-night);font-size:.8rem;line-height:1.35;
  background:rgba(15,27,51,.66);border:1px solid rgba(189,238,211,.42);box-shadow:0 14px 30px -14px rgba(0,0,0,.8);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transform:translateZ(var(--z,60px))}
.chat p{margin:0}
.chat .mono{font-size:.66rem;letter-spacing:.04em;color:var(--on-night-2)}
.c-paciente{left:-5%;top:7%;border-radius:16px 16px 16px 4px;background:rgba(248,250,252,.16);border-color:rgba(248,250,252,.35)}
.c-kairus{right:-5%;top:43%;border-radius:16px 16px 4px 16px;background:rgba(11,107,85,.78)}
.c-kairus .mono{color:var(--signal)}
.c-escribe{right:-5%;top:43%;flex-direction:row;gap:5px;padding:12px 15px;opacity:0;border-radius:16px 16px 4px 16px;background:rgba(11,107,85,.78)}
.c-escribe i{width:7px;height:7px;border-radius:50%;background:var(--signal)}
.c-cita{left:-3%;bottom:7%;flex-direction:row;align-items:center;gap:10px;max-width:70%;background:rgba(189,238,211,.16);border-color:var(--signal)}
.c-cita svg{flex:none;color:var(--night);background:var(--signal);border-radius:50%;padding:3px;width:24px;height:24px}
.c-cita span{display:flex;flex-direction:column;font-size:.72rem;color:var(--on-night-2)}
.c-cita b{font-size:.84rem;color:var(--on-night)}
.hero-escena figcaption{margin-top:14px;text-align:center;font-size:.76rem;color:var(--on-night-2)}
@media (max-width:520px){.chat{font-size:.7rem;padding:7px 10px;max-width:60%;border-radius:14px}.chat .mono{font-size:.6rem}.c-paciente{left:-3%;top:3%}.c-kairus,.c-escribe{right:-3%;top:47%}.c-cita{left:-2%;bottom:4%}.c-cita span{font-size:.64rem}.c-cita b{font-size:.76rem}}
@media (min-width:1024px){.hero-escena{max-width:500px}}

/* mientras escenas.js arma la intro del hero (clase puesta por el script de <head>) */
.esc-pre .e3d .chat{opacity:0}
.esc-pre .e3d .poses[data-estatica="b"] img[data-pose="a"]{opacity:1}
.esc-pre .e3d .poses[data-estatica="b"] img[data-pose="b"]{opacity:0}

/* ================= Botones y tarjetas planos (identidad Receta, 9-oct-2026) =================
   Sin degradados, brillos ni sombras de volumen: tinta, papel y verde consulta. El movimiento vive en
   la página (scroll y bucles), no en el relieve. */
.btn{transition:background .15s ease,border-color .15s ease,color .15s ease}
.btn-ink{background:var(--brand);color:var(--paper);box-shadow:none}
.btn-ink:hover{background:#095A48}
.btn-line{background:transparent;box-shadow:none}
.btn-line:hover{background:rgba(242,244,238,.08)}
.btn-line-ink{background:transparent;border:1.5px solid var(--ink);color:var(--ink);box-shadow:none}
.btn-line-ink:hover{background:var(--ink);color:var(--paper)}
.plan-feat .btn-line-ink,.cupo .btn-line-ink{border-color:var(--paper);color:var(--paper)}
.plan-feat .btn-line-ink:hover,.cupo .btn-line-ink:hover{background:var(--paper);color:var(--ink)}
.btn:active{transform:scale(.98)}
.plan,.nivel,.fold{background:var(--paper);box-shadow:none}
.plan-feat{background:var(--brand);box-shadow:none}
.cupo{background:var(--brand);box-shadow:none}
.shot .frame{box-shadow:none}
@media (min-width:768px){.log li{background:var(--paper);box-shadow:none}}
@media (prefers-reduced-motion:reduce){.btn{transition:none}.btn:active{transform:none}}

/* ---------- fase 2: especialidades, figuras nuevas y cierre ---------- */
.esp-grid{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
.esp-grid .esp:last-child{grid-column:1/-1;max-width:calc(50% - 7px);justify-self:center}
.esp{display:flex;flex-direction:column;gap:6px;padding:14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);box-shadow:none}
.esp .ilus{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain}
.esp h3{font-size:1.05rem;margin:0}
.esp p{margin:0;font-size:.9rem;color:var(--muted);line-height:1.45}
.como-fig,.eq-fig{margin:30px auto 0;max-width:520px}
.como-fig .ilus,.eq-fig .ilus{width:100%;height:auto}
.como-fig figcaption,.eq-fig figcaption{margin-top:8px;text-align:center;font-size:.86rem;color:var(--muted)}
.duo-inv{margin-top:28px}
.duo .ilus{aspect-ratio:auto}
.con-fig figure+figure{margin-top:0}
.lf-cierre{display:block;width:100%;max-width:480px;height:auto;margin-top:24px;border-radius:var(--radius);box-shadow:0 24px 44px -26px rgba(0,0,0,.8)}
/* 7 especialidades: 4 + 3 centradas */
@media (min-width:768px){.esp-grid{display:flex;flex-wrap:wrap;justify-content:center}.esp-grid .esp,.esp-grid .esp:last-child{flex:0 0 calc((100% - 42px)/4);max-width:none}}
@media (min-width:1024px){.eq-fig{margin:0 auto 34px}}
.esp .ilus{mix-blend-mode:multiply}   /* el blanco de la imagen se funde con el degradado de la tarjeta */
.con-figs{display:grid;gap:14px;align-content:center;justify-items:center}
.con-figs figure{max-width:300px;width:100%;margin:0}
@media (min-width:768px) and (max-width:1023px){.con-figs{grid-template-columns:1fr 1fr}}

/* Ajustes de espacio: calculadora, cómo empezar, imágenes sobre fondo, franja de respaldo */
.calc-grid{margin-top:56px}
.cbox{padding:4px 0}
.calc-grid .crow{margin-bottom:26px}
.cbox .csub{margin-bottom:22px}
.cres{margin-top:8px}
.duo .ilus,.como-fig .ilus,.eq-fig .ilus{mix-blend-mode:multiply}
.tl{gap:20px}
@media(min-width:900px){
  .tl{grid-template-columns:repeat(3,1fr);column-gap:28px;margin-top:8px}
  .tl li{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:14px;padding:26px 24px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 10px 24px -14px rgba(11,107,85,.28)}
  .tl li:last-child,.tl li:nth-last-child(2){border-bottom:1px solid var(--line)}
  .tl-n{width:38px;height:38px;font-size:.95rem}
  .tl h3{font-size:1.08rem;margin-bottom:6px}
}
.respaldo{display:flex;flex-direction:column;align-items:center;gap:12px;padding:26px 0;margin-top:28px;border-top:1px solid rgba(148,163,184,.25)}
.respaldo-t{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:#A3B2AB}
.respaldo-l{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;list-style:none;margin:0;padding:0}
.marca{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.9rem;color:#A3B2AB}
.marca-visa{font-style:italic;font-weight:800;letter-spacing:.04em;font-size:1.05rem}
.cextra{margin-top:8px;margin-bottom:14px}
.ccompare{margin-top:48px}

/* Cómo empezar: tres filas con imagen y texto, alternadas y centradas */
#como .wrap{display:block}
.filas{display:grid;gap:40px;margin-top:56px}
.fila{display:grid;gap:16px;align-items:center}
.fila-img img{display:block;width:100%;max-width:480px;height:auto;margin:0 auto;mix-blend-mode:multiply}
.fila-txt h3{font-size:1.25rem;margin-bottom:8px}
.fila-txt p{color:var(--muted);line-height:1.6}
@media(min-width:900px){
  .filas{gap:56px;max-width:1040px;margin-left:auto;margin-right:auto}
  .fila{grid-template-columns:1fr 1fr;gap:56px}
  .fila:nth-child(even) .fila-img{order:2}
}


/* ================= Subpáginas (5-oct-2026) =================
   Cada página abre con una banda de noche (.pg-hero): título a un lado y su
   escena animada al otro. Header y footer son los mismos en todas
   (app/sitio-cabecera.php y sitio-pie.php). */
.con-nav-solido main{padding-top:var(--nav-h)}
.pg-hero{padding:calc(var(--nav-h) + 28px) 0 44px;overflow:hidden}
.pg-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(520px 360px at 85% 30%,rgba(189,238,211,.12),transparent 70%),radial-gradient(420px 300px at 0% 0%,rgba(11,107,85,.55),transparent 70%)}
.pg-grid{position:relative;display:grid;gap:28px;align-items:center}
.pg-hero h1{font-size:clamp(2.1rem,8.4vw,3.9rem);line-height:1.04;color:var(--on-night)}
.pg-hero .lead{margin-top:14px;font-size:1.05rem;line-height:1.55;color:var(--on-night-2);max-width:36em}
.pg-hero .kicker{margin-bottom:12px}
.pg-solo{padding-bottom:56px}
.pg-escena{margin:0 auto;width:100%;max-width:min(92vw,520px)}
.e-pagina{aspect-ratio:960/717;border-radius:26px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.14) inset,0 34px 70px -28px rgba(0,0,0,.75),0 0 60px -14px rgba(189,238,211,.38)}
.e-pagina>img{object-fit:contain}
@media (min-width:900px){.pg-grid{grid-template-columns:1.1fr .9fr;gap:56px}.pg-solo .pg-grid{grid-template-columns:1fr}}
/* elementos que la intro de la escena anima: ocultos solo mientras escenas.js la arma */
.esc-pre .escena [data-pre]{opacity:0}
.log-2{grid-template-columns:1fr}
.log-1{max-width:520px}
@media (min-width:768px){.log.log-2{grid-template-columns:repeat(2,1fr)}.log.log-1{grid-template-columns:1fr}}
.calc-uno{grid-template-columns:1fr;max-width:640px}
.vermas{margin-top:26px}
.vermas a{display:inline-flex;align-items:center;min-height:44px;font-weight:650;color:var(--brand);text-decoration:none;border-bottom:1.5px solid currentColor}
.vermas a:hover{color:#0B5A49}
.plan-fund{margin-top:14px;padding:14px 16px;border-radius:var(--radius-sm);background:var(--brand-soft);border:1px solid var(--line-2)}
.plan-fund-n{color:var(--brand);text-transform:uppercase;letter-spacing:.08em;font-size:.72rem}
.plan-fund-p{font-size:1.6rem;font-weight:800;letter-spacing:-.02em;color:var(--ink);margin:2px 0}
.plan-fund-p span{font-size:.82rem;font-weight:500;color:var(--muted);letter-spacing:0}
.faq-pagina{max-width:860px}
.faq-pagina .faq-mas{margin-top:32px}
.escena .aro-ok{transform-box:fill-box}
.plan .plan-fund,.plan .plan-fund p{color:var(--ink)}
.plan .plan-fund .plan-fund-n{color:var(--brand)}
.plan .plan-fund .plan-setup,.plan .plan-fund .plan-fund-p span{color:var(--ink-2)}

/* ---------- Fase 1 (7-oct-2026): scroll suave y transición entre páginas ---------- */
/* Lenis: el scroll nativo suave del navegador estorba cuando Lenis está activo. */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
/* Fundido corto entre páginas del mismo sitio (Chrome/Edge/Safari recientes;
   en los demás la navegación es la normal). El header se queda en su lugar. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .nav{view-transition-name:nav}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.22s;animation-timing-function:cubic-bezier(.2,.7,.3,1)}
}

/* ---------- Fase 2 (7-oct-2026): fondo WebGL del hero y pasos atados al scroll ---------- */
.hero-gl{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:0;transition:opacity .9s ease}
.hero-gl.on{opacity:.7}
#hero.night::before{z-index:0}
.hero-grid{z-index:1}
@supports (color:color-mix(in srgb,red,blue)){
  #como .tl li{--a:1;border-color:color-mix(in srgb,var(--signal) calc(var(--a)*70%),var(--line))}
  #como .tl-n{background:color-mix(in srgb,var(--brand) calc(var(--a)*100%),var(--ink))}
}

/* ---------- Video y Lottie (7-oct-2026): solo escritorio los reproduce; celular ve el poster ---------- */
.demo-video{margin:8px auto 28px;max-width:600px}
.demo-video video{display:block;width:100%;height:auto;aspect-ratio:600/504;border-radius:var(--radius);background:var(--night);cursor:pointer}
.demo-video figcaption{margin-top:8px;font-size:.82rem;color:var(--muted);text-align:center}
.lt-check{display:none;width:22px;height:22px;flex:none}
.lt-check.on{display:inline-block}
.lt-check svg{display:block;width:100%;height:100%}
.rec-respuesta .lt-check{position:absolute;top:6px;right:8px}
.rec-respuesta:has(.lt-check.on) p{padding-right:26px}


/* ---------- Encabezado Receta (9-oct-2026): pastilla clara flotante en todas las páginas ---------- */
:root{--nav-h:82px}
.nav{inset:12px 0 auto;height:auto;padding:0 var(--gutter);color:var(--ink);background:none;box-shadow:none}
.nav.solid{background:none;box-shadow:none}
.nav-in{height:58px;padding:0 8px 0 16px;background:rgba(251,252,248,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:10px}
.nlogo{color:var(--ink);letter-spacing:0;text-transform:none}
.nlogo img{border-radius:0;height:28px;width:auto}
.nlinks a,.nlogin{color:#33423C}
.nlinks a:hover,.nlogin:hover,.nlinks a[aria-current]{color:var(--brand)}
.nhbtn{color:var(--ink)}
.nav .btn-signal{background:var(--brand);color:var(--paper);box-shadow:none}
.nav .btn-signal:hover{background:#095A48}
.nav :is(a,button):focus-visible{outline-color:var(--brand)}
/* Botones Receta: planos, esquinas de 6 px. Verde sobre papel; menta sobre noche. */
.btn{border-radius:6px}
.btn-signal,.btn-signal:hover{box-shadow:none}
.btn-signal{background:var(--brand);color:var(--paper)}
.btn-signal:hover{background:#095A48}
.night .btn-signal,.foot .btn-signal,.nmob .btn-signal{background:var(--signal);color:var(--night)}
.night .btn-signal:hover,.foot .btn-signal:hover{background:#A9E4C6}
/* Cabecera de subpáginas en papel (Receta): la noche se reserva para el cierre y el pie. */
.night.pg-hero{background:var(--day);color:var(--ink);border-bottom:1px solid var(--line)}
.night.pg-hero::before{display:none}
.night.pg-hero h1{color:var(--ink)}
.night.pg-hero .lead,.night.pg-hero .shead p:not(.kicker){color:#2B3A35}
.night.pg-hero .kicker{color:var(--brand)}
.night.pg-hero .btn-signal{background:var(--brand);color:var(--paper)}
.night.pg-hero :is(a,button,input,summary):focus-visible{outline-color:var(--brand)}
/* Ilustraciones de línea de tinta (fondo blanco): se funden con el papel. */
img[src*="ilustraciones/"]{mix-blend-mode:multiply}
.ilu-s1 img{width:100%;height:auto}