/* Tipografía autoalojada: sin salto a un tercero antes del primer
   pintado. `swap` evita el texto invisible mientras carga. */
@font-face{
  font-family:"Manrope";
  src:url("../fonts/manrope-variable.woff2") format("woff2");
  font-weight:400 800;
  font-style:normal;
  font-display:swap;
}

:root{
  /* Superficies */
  --bg:#0A0A0C;
  --bg-soft:#101113;
  --surface:#16171B;
  --surface-2:#1D1E22;
  --border:rgba(255,255,255,.08);
  --border-soft:rgba(255,255,255,.14);

  /* Marca */
  --gold:#C9A96E;
  --gold-deep:#A87C42;
  --gold-soft:rgba(201,169,110,.14);
  --mint:#3ECFA4;
  --mint-deep:#199C77;
  --mint-soft:rgba(62,207,164,.14);

  /* Texto */
  --ink:#F3F1EC;
  --ink-2:#A6A099;
  --ink-3:#8A857A;

  /* Tipografía */
  --font:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --txt-xs:clamp(0.72rem,0.70rem + 0.12vw,0.80rem);
  --txt-sm:clamp(0.90rem,0.86rem + 0.20vw,0.98rem);
  --txt-md:1rem;
  --txt-lg:clamp(1.15rem,1.05rem + 0.55vw,1.38rem);
  --txt-xl:clamp(1.25rem,1.10rem + 0.70vw,1.45rem);
  --txt-2xl:clamp(1.90rem,1.40rem + 2.40vw,2.90rem);
  --txt-3xl:clamp(1.85rem,1.35rem + 2.60vw,3.40rem);

  /* Espaciado */
  --esp-1:8px;
  --esp-2:12px;
  --esp-3:20px;
  --esp-4:32px;
  --esp-5:52px;
  --esp-6:80px;

  /* Elevación */
  --elev-1:0 1px 2px rgba(0,0,0,.30),0 6px 18px rgba(0,0,0,.28);
  --elev-2:0 6px 18px rgba(0,0,0,.30),0 28px 60px rgba(0,0,0,.50);

  /* Formas */
  --radio-sm:10px;
  --radio:16px;
  --radio-lg:24px;

  /* El único gradiente de la página: halo ambiental dorado */
  --grad-halo:radial-gradient(120% 120% at 50% 0%,
    rgba(201,169,110,0.10) 0%,
    rgba(201,169,110,0.04) 32%,
    rgba(201,169,110,0.00) 60%);

  --container:1180px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* clip y no hidden: hidden sobre html rompe position:sticky en iOS. El menú
   cerrado vive fuera de pantalla y sin esto agranda el ancho del documento. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* Nada de overflow-x acá: convierte al body en contenedor de scroll y eso
     rompe position:sticky de todo lo que cuelga adentro. El desborde lateral
     lo corta html con overflow-x:clip. */
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
:focus-visible{outline:2.5px solid var(--gold);outline-offset:3px;border-radius:4px}

h1,h2,h3{font-weight:800;line-height:1.12;letter-spacing:-.03em;text-wrap:balance}
h1{letter-spacing:-.04em;line-height:1.05;overflow-wrap:break-word}
h2{letter-spacing:-.035em;line-height:1.08}
h1{font-size:var(--txt-3xl)}
h2{font-size:var(--txt-2xl)}
h3{font-size:var(--txt-xl);line-height:1.3;letter-spacing:-.02em}
p{max-width:64ch}

/* Enlace para saltar al contenido: solo visible al navegar con teclado */
.saltar{position:absolute;left:-9999px;top:0;z-index:200;background:var(--gold);
  color:#241C0E;padding:12px 20px;border-radius:0 0 var(--radio-sm) 0;font-weight:800}
.saltar:focus{left:0}

.container{max-width:var(--container);margin:0 auto;padding:0 var(--esp-3)}
.band{padding:clamp(88px,11vw,152px) 0}
.band--soft{background:var(--bg-soft)}
.band-head{display:flex;flex-direction:column;gap:16px;
  margin-bottom:clamp(32px,4vw,56px);max-width:680px}
.eyebrow{font-size:var(--txt-xs);font-weight:700;letter-spacing:.19em;
  text-transform:uppercase;color:var(--gold)}

.badge-nuevo{display:inline-flex;align-items:center;gap:9px;
  padding:11px 20px 11px 14px;border-radius:100px;
  background:var(--gold);color:#241C0E;
  font-size:.9rem;font-weight:800;letter-spacing:-.01em;
  text-decoration:none;box-shadow:0 6px 20px rgba(201,169,110,.35);
  transition:transform .18s,box-shadow .18s;margin-bottom:6px;
  animation:badge-entrada .5s ease .3s both}
.badge-nuevo:hover{transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(201,169,110,.5)}
.badge-nuevo__punto{width:8px;height:8px;border-radius:50%;
  background:#241C0E;flex-shrink:0;animation:badge-pulso 1.8s ease-in-out infinite}
.badge-nuevo__flecha{font-size:1.25em;font-weight:900;transition:transform .18s}
.badge-nuevo:hover .badge-nuevo__flecha{transform:translateX(3px)}
@keyframes badge-pulso{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes badge-entrada{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .badge-nuevo__punto{animation:none}
  .badge-nuevo{animation:none}
}
.lead{font-size:var(--txt-lg);color:var(--ink-2);line-height:1.55;max-width:54ch}

/* Revelado al hacer scroll. js/animaciones.js agrega la clase `visible`.
   Va detrás de .js, que ese mismo módulo pone en el <html>: si el script no
   corre, el contenido se ve igual en lugar de quedar en opacidad cero. */
.js [data-anim]{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .62s cubic-bezier(.22,.61,.36,1),
             transform .62s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--delay,0ms);
}
.js [data-anim].visible{opacity:1;transform:none}
.js [data-anim="escala"]{transform:scale(.97) translateY(22px)}
.js [data-anim="escala"].visible{transform:none}

/* ── Botones ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 26px;border-radius:100px;font-size:.97rem;font-weight:700;
  letter-spacing:-.01em;white-space:nowrap;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.btn svg{width:19px;height:19px;flex-shrink:0}
.btn--wa{background:var(--mint);color:#06231A;box-shadow:0 6px 20px rgba(62,207,164,.28)}
.btn--wa:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(62,207,164,.4)}
.btn--ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px var(--border-soft)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--gold)}
.btn--bloque{width:100%}

/* ── Navegación ── */
.topbar-promo{position:sticky;top:0;z-index:70;background:linear-gradient(90deg,var(--gold-deep),var(--gold));
  color:#1B1204;overflow:hidden}
.topbar-promo--oculta{display:none}
.topbar-promo__inner{display:flex;align-items:center;justify-content:center;gap:var(--esp-2);
  flex-wrap:wrap;padding:10px var(--esp-3);text-align:center}
.topbar-promo__txt{font-size:.88rem;font-weight:600;letter-spacing:-.01em}
.topbar-promo__txt strong{font-weight:800}
.topbar-promo__cta{font-size:.85rem;font-weight:800;text-decoration:underline;text-underline-offset:3px;
  white-space:nowrap}
.topbar-promo__cerrar{position:absolute;top:50%;right:var(--esp-3);transform:translateY(-50%);
  width:26px;height:26px;flex-shrink:0;color:#1B1204;opacity:.7;transition:opacity .15s}
.topbar-promo__cerrar:hover{opacity:1}
.topbar-promo__cerrar svg{width:16px;height:16px}
@media(max-width:640px){
  .topbar-promo__inner{padding:10px 44px 10px var(--esp-3)}
  .topbar-promo__cta{width:100%}
}

.nav{position:sticky;top:var(--topbar-promo-h,0px);z-index:60;background:rgba(10,10,12,.82);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--esp-3);height:70px}
.logo{display:flex;align-items:center;gap:9px;font-size:1.24rem;font-weight:800;letter-spacing:-.02em}
.logo__mark{width:26px;height:26px;flex-shrink:0;color:var(--gold)}
.nav__menu{display:flex;align-items:center;gap:28px}
.nav__menu a{font-size:.93rem;font-weight:600;color:var(--ink-2);transition:color .15s}
.nav__menu a:hover{color:var(--ink)}
.nav__cta{color:#06231A!important;padding:11px 20px;font-size:.9rem}
.nav__boton{display:none;flex-direction:column;gap:5px;padding:8px}
.nav__boton span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;
  transition:transform .22s,opacity .22s}
.nav__boton[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__boton[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__boton[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.sin-scroll{overflow:hidden}

@media(max-width:900px){
  .nav__boton{display:flex}
  .nav__menu{
    position:fixed;inset:70px 0 0;flex-direction:column;align-items:stretch;
    justify-content:flex-start;gap:0;padding:var(--esp-3);background:var(--bg);
    transform:translateX(100%);transition:transform .26s ease;overflow-y:auto;
  }
  /* Cerrado también se saca del árbol de accesibilidad: si no, el lector de
     pantalla sigue leyendo enlaces que están fuera de la pantalla. */
  .nav__menu{visibility:hidden;transition:transform .26s ease,visibility .26s}
  .nav__menu.abierto{transform:none;visibility:visible}
  .nav__menu a{padding:18px 4px;font-size:1.1rem;border-bottom:1px solid var(--border)}
  .nav__cta{margin-top:var(--esp-3);justify-content:center;border-bottom:none!important;padding:16px}
}

/* ── Hero ── */
.hero{padding:clamp(48px,7vw,88px) 0 clamp(56px,8vw,104px);position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;top:-30%;right:-10%;width:60vw;height:60vw;
  background:var(--grad-halo);filter:blur(90px);border-radius:50%;
  pointer-events:none;z-index:-1;
}
.hero__grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(36px,5vw,68px);align-items:center}
.hero__grid>*{min-width:0}
.hero__copy{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.hero__copy p{font-size:var(--txt-lg);color:var(--ink-2)}
.hero__ctas{display:flex;flex-wrap:wrap;gap:12px}
.hero__nota{font-size:var(--txt-sm)!important;color:var(--ink-3)!important}

/* Selector de tamaño de consultorio */
.tipo{display:flex;flex-wrap:wrap;gap:8px}
.tipo button{font-size:var(--txt-sm);font-weight:600;color:var(--ink-2);
  padding:8px 16px;border-radius:100px;box-shadow:inset 0 0 0 1px var(--border);
  transition:color .16s,box-shadow .16s,background .16s}
.tipo button:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--border-soft)}
.tipo button.activo{color:var(--gold);background:var(--gold-soft);
  box-shadow:inset 0 0 0 1px rgba(201,169,110,.4)}

/* ── Panel de producto (mockup) ── */
.panel{background:var(--surface);border-radius:var(--radio);border:1px solid var(--border);
  box-shadow:var(--elev-2);overflow:hidden}
.panel__bar{display:flex;align-items:center;gap:7px;padding:11px 15px;
  background:var(--surface-2);border-bottom:1px solid var(--border)}
.panel__dot{width:9px;height:9px;border-radius:50%;background:var(--border-soft)}
.panel__title{margin-left:8px;font-size:var(--txt-xs);font-weight:700;color:var(--ink-3);letter-spacing:.04em}
.panel__body{padding:17px}
.panel__head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}
.panel__h{font-size:.94rem;font-weight:800;letter-spacing:0;line-height:1.3}
.panel__head span{font-size:var(--txt-xs);color:var(--ink-3);font-weight:700}
.panel__pie{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);
  border:1px solid var(--border);border-radius:var(--radio-sm);overflow:hidden;margin-top:14px}
.panel__pie div{background:var(--surface-2);padding:12px 10px;text-align:center}
.panel__pie b{display:block;font-size:1.5rem;font-weight:800;color:var(--gold);
  line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.panel__pie span{font-size:var(--txt-xs);color:var(--ink-3);font-weight:700}

.turno{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;
  padding:11px 13px;border:1px solid var(--border);border-left:3px solid var(--mint);
  border-radius:var(--radio-sm);margin-bottom:8px;background:var(--surface-2);
  opacity:0;transform:translateY(10px);
  transition:opacity .4s ease,transform .4s ease,border-left-color .5s ease}
.turno.visible{opacity:1;transform:none}
.turno--pend{border-left-color:#D9A24C}
.turno--done{border-left-color:#5C9BDB;opacity:.62}
.turno--done.visible{opacity:.62}
.turno__h{font-size:.94rem;font-weight:800;font-variant-numeric:tabular-nums}
.turno__n{display:block;font-size:.87rem;font-weight:700;line-height:1.25}
.turno__s{display:block;font-size:var(--txt-xs);color:var(--ink-3);line-height:1.35}

.chip{font-size:.65rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  padding:3px 9px;border-radius:100px;white-space:nowrap;transition:background .4s,color .4s}
.chip--ok{background:var(--mint-soft);color:var(--mint)}
.chip--pend{background:rgba(217,162,76,.16);color:#E3B168}
.chip--done{background:rgba(92,155,219,.16);color:#7FB1E8}
.chip--cambia{animation:destello .7s ease}
@keyframes destello{
  0%{transform:scale(1)}
  40%{transform:scale(1.12)}
  100%{transform:scale(1)}
}

@media(max-width:900px){
  .hero__grid{grid-template-columns:1fr;gap:var(--esp-4)}
  .hero__ctas{width:100%}
  .hero__ctas .btn{flex:1}
}

/* ── CTA fijo, solo en celular ── */
.cta-fijo{display:none}
@media(max-width:760px){
  .cta-fijo{
    position:fixed;left:0;right:0;bottom:0;z-index:80;
    display:flex;align-items:center;justify-content:space-between;gap:var(--esp-2);
    padding:12px var(--esp-3) calc(12px + env(safe-area-inset-bottom));
    background:rgba(10,10,12,.94);backdrop-filter:blur(14px);
    border-top:1px solid var(--border);
    transform:translateY(110%);transition:transform .26s ease;
  }
  .cta-fijo.visible{transform:none}
  .cta-fijo span{font-size:var(--txt-sm);font-weight:700;color:var(--ink-2)}
  .cta-fijo .btn{padding:12px 20px;font-size:.9rem}
  /* Que la barra no tape el final de la página */
  body{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  .pie{padding-bottom:88px}
}

/* ── Franja de prueba social ── */
.franja{background:var(--bg-soft);border-block:1px solid var(--border);padding:var(--esp-4) 0}
.franja__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--esp-3)}
.franja__txt{font-size:var(--txt-md);color:var(--ink-2);max-width:44ch}
.franja__txt strong{color:var(--ink);display:block}
.franja__datos{display:flex;flex-wrap:wrap;gap:var(--esp-3)}
.franja__datos span{display:flex;flex-direction:column;font-size:var(--txt-xs);
  color:var(--ink-3);font-weight:700}
.franja__datos b{font-size:1.9rem;font-weight:800;color:var(--gold);line-height:1.1;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.franja__link{font-size:var(--txt-sm);font-weight:700;color:var(--gold);white-space:nowrap}
.franja__link:hover{text-decoration:underline}

/* ── Antes / después ── */
.antes-despues{display:flex;flex-direction:column;align-items:center;gap:var(--esp-3)}
.disperso{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:720px}
.ficha{background:var(--surface);border:1px solid var(--border);border-radius:var(--radio-sm);
  padding:12px 20px;font-size:var(--txt-sm);font-weight:700;color:var(--ink-3);
  box-shadow:var(--elev-1)}
/* Cada ficha con una inclinación distinta: la sensación de desorden es
   el mensaje de la sección, así que se define a mano y no al azar. */
.ficha:nth-child(1){transform:rotate(-3deg)}
.ficha:nth-child(2){transform:rotate(2deg)}
.ficha:nth-child(3){transform:rotate(-1.5deg)}
.ficha:nth-child(4){transform:rotate(3deg)}
.ficha:nth-child(5){transform:rotate(-2deg)}
.ficha:nth-child(6){transform:rotate(1.5deg)}
.ficha.visible{transition:transform .6s cubic-bezier(.22,.61,.36,1),opacity .6s}

.flecha{color:var(--ink-3);opacity:.5}
.flecha svg{width:22px;height:38px}

.unificado{background:var(--surface);border:1px solid rgba(201,169,110,.28);
  border-radius:var(--radio-lg);padding:var(--esp-4) var(--esp-4);text-align:center;
  box-shadow:var(--elev-2);max-width:520px;
  background-image:var(--grad-halo)}
.unificado p{color:var(--ink-2);margin:12px auto 0;max-width:42ch;font-size:var(--txt-md)}
.logo--grande{font-size:1.9rem;justify-content:center}
.logo--grande .logo__mark{width:34px;height:34px}

/* ── Recorrido de producto ── */
/* ── El recorrido como escena ──
   La captura se sostiene en pantalla mientras los pasos pasan al lado, y
   cambia sola al llegar cada uno. Sirve igual en teléfono, que es por donde
   entra la mayoría: ahí la escena se ancla arriba y el texto pasa por debajo.

   Sin JavaScript no hay escena: las cinco capturas quedan apiladas con su
   texto, que es lo que ya funcionaba. La clase `listo` la agrega
   js/animaciones.js recién cuando puede sostenerla. */
.recorrido{display:flex;flex-direction:column;gap:var(--esp-4)}
.escena__toma{margin:0}
.escena__pasos{display:none}

.recorrido.listo{position:relative}
.recorrido.listo .recorrido__escena{
  position:sticky;top:calc(70px + 14px);z-index:3;
  background:var(--bg);padding-bottom:14px;
  display:flex;flex-direction:column;gap:12px;
}
/* En teléfono la captura se recorta un poco arriba: a 2:1 quedaría una
   franja de 160px y no se leería nada. */
.recorrido.listo .escena__marco{position:relative;aspect-ratio:16/10}
@media(min-width:700px){ .recorrido.listo .escena__marco{aspect-ratio:1872/926} }
.recorrido.listo .escena__toma{
  position:absolute;inset:0;opacity:0;transform:scale(.97) translateY(10px);
  transition:opacity .5s ease,transform .6s cubic-bezier(.22,.61,.36,1),visibility .5s;
  pointer-events:none;visibility:hidden;
}
.recorrido.listo .escena__toma.activa{opacity:1;transform:none;pointer-events:auto;visibility:visible}
.recorrido.listo .escena__toma.activa .captura{
  border-color:rgba(201,169,110,.34);
  box-shadow:var(--elev-2),0 0 0 1px rgba(201,169,110,.16);
}
.recorrido.listo .escena__toma .captura{height:100%}
.recorrido.listo .escena__toma img{height:100%;object-fit:cover;object-position:top}

/* Los cinco pasos, como progreso: se llena el que estás leyendo. */
.recorrido.listo .escena__pasos{
  display:flex;gap:6px;list-style:none;padding:0;margin:0;
}
.escena__pasos li{
  height:2px;flex:1;background:var(--border-soft);border-radius:2px;
  transform-origin:left;transition:background .4s ease;
}
.escena__pasos li.activo{background:var(--gold)}

.recorrido.listo .paso{
  min-height:min(56vh,520px);display:flex;flex-direction:column;justify-content:center;
  gap:12px;opacity:.32;transition:opacity .45s ease;
}
.recorrido.listo .paso.activo{opacity:1}
.paso{display:flex;flex-direction:column;gap:12px}
.paso__num{font-size:var(--txt-xs);font-weight:800;letter-spacing:.16em;color:var(--gold);
  font-variant-numeric:tabular-nums}
.paso h3{font-size:var(--txt-xl);letter-spacing:-.03em}
.paso p{font-size:var(--txt-md);color:var(--ink-2)}
.paso__nota{font-size:var(--txt-sm)!important;color:var(--ink-3)!important;
  padding-top:12px;border-top:1px solid var(--border)}

@media(min-width:900px) and (min-aspect-ratio:1/1){
  .recorrido.listo{
    display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(32px,4vw,72px);
    align-items:start;
  }
  .recorrido.listo .recorrido__escena{
    order:2;top:clamp(90px,calc(50vh - 150px),320px);background:none;padding-bottom:0;
  }
  .recorrido.listo .recorrido__pasos{order:1}
  .recorrido.listo .paso{min-height:min(76vh,660px)}
}

.captura{display:block;border-radius:var(--radio);overflow:hidden;
  border:1px solid var(--border);background:#0E0E13;line-height:0;box-shadow:var(--elev-2);
  transition:border-color .2s,transform .2s,box-shadow .2s}
.captura:hover{border-color:rgba(201,169,110,.45);transform:translateY(-3px)}
.captura img{width:100%;height:auto;display:block}

.paso__txt{display:flex;flex-direction:column;gap:12px}

/* Sin escena —sin JavaScript o con menos animación pedida— cada paso vuelve
   a mostrarse con su captura al lado, que es como funcionaba antes. */
@media(min-width:900px){
  .recorrido:not(.listo) .paso{
    display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,4vw,56px);
    align-items:center;
  }
  .recorrido:not(.listo) .paso:nth-child(even) .paso__txt{order:2}
}

/* ── Video ── */
.video-wrap{position:relative;max-width:920px;margin:0 auto;border-radius:var(--radio);
  overflow:hidden;border:1px solid var(--border);box-shadow:var(--elev-2);
  background:#0E0E13;line-height:0}
.video-wrap video{width:100%;height:auto;display:block}
.video-play{position:absolute;inset:0;margin:auto;width:74px;height:74px;border-radius:50%;
  background:rgba(201,169,110,.94);color:#241C0E;display:flex;align-items:center;
  justify-content:center;box-shadow:0 8px 30px rgba(0,0,0,.45);
  transition:transform .18s,background .18s}
.video-play svg{width:34px;height:34px;margin-left:4px}
.video-play:hover{transform:scale(1.06);background:var(--gold)}
.video-play[hidden]{display:none}

/* Salida a WhatsApp al terminar el video: es el momento de más intención. */
.video-cta{max-width:none;margin-top:var(--esp-4);text-align:center}

/* ── Split (copy + visual) ── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,64px);align-items:center}
.split--flip .split__visual{order:-1}
.split__copy{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.split__copy ul{display:flex;flex-direction:column;gap:11px;list-style:none;margin-top:4px}
.split__copy li{display:flex;gap:11px;font-size:var(--txt-md);color:var(--ink-2);line-height:1.55}
.split__copy li svg{width:20px;height:20px;color:var(--mint);flex-shrink:0;margin-top:3px}
@media(max-width:880px){
  .split{grid-template-columns:1fr;gap:var(--esp-4)}
  .split--flip .split__visual{order:0}
}

/* ── Grilla de tarjetas ── */
.grilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:1px;
  background:var(--border);border:1px solid var(--border);border-radius:var(--radio);
  overflow:hidden}
.tarjeta{position:relative;background:var(--surface);padding:var(--esp-3) var(--esp-3);
  display:flex;flex-direction:column;gap:10px;transition:background .2s}
.tarjeta:hover{background:var(--surface-2)}
.tarjeta h3{font-size:1.12rem;font-weight:800;letter-spacing:-.015em}
.tarjeta p{font-size:var(--txt-md);color:var(--ink-2);max-width:none;line-height:1.6}
.nota-legal{margin-top:var(--esp-3);font-size:var(--txt-sm);color:var(--ink-3)}

/* ── Línea de tiempo de la implementación ── */
.linea{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:var(--esp-3)}
.linea li{background:var(--surface);border:1px solid var(--border);border-radius:var(--radio);
  padding:var(--esp-3);display:flex;flex-direction:column;gap:10px}
.linea__n{width:34px;height:34px;border-radius:50%;background:var(--gold-soft);
  color:var(--gold);display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:.95rem;box-shadow:inset 0 0 0 1px rgba(201,169,110,.3)}
.linea li h3{font-size:1.06rem;font-weight:800}
.linea li p{font-size:.93rem;color:var(--ink-2);max-width:none}

/* ── Mockup de la web de la clínica ── */
.web-demo__hero{background:#0D0E10;color:#fff;padding:38px 26px 42px;text-align:center}
.web-demo__eyebrow{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);font-weight:800}
.web-demo__titulo{font-weight:800;font-size:1.7rem;line-height:1.2;
  margin:11px 0 8px;letter-spacing:-.02em}
.web-demo__sub{font-size:.78rem;color:rgba(255,255,255,.6);max-width:34ch;margin:0 auto}
.web-demo__btn{display:inline-block;margin-top:16px;background:var(--mint);color:#06231A;
  font-size:.73rem;font-weight:800;padding:9px 20px;border-radius:100px}
.web-demo__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border)}
.web-demo__stats div{background:var(--surface-2);padding:16px 12px;text-align:center}
.web-demo__stats p{font-size:.63rem;color:var(--ink-3);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;max-width:none}

/* ── Teléfono con el recordatorio — pantalla real, se deja clara a propósito ── */
.fono{max-width:290px;margin:0 auto;background:#050506;border-radius:32px;
  padding:11px;box-shadow:0 26px 56px rgba(0,0,0,.55);border:1px solid var(--border)}
.fono__screen{background:#EDE7DD;border-radius:24px;padding:16px 13px;min-height:322px;
  display:flex;flex-direction:column;gap:11px}
.fono__top{display:flex;align-items:center;gap:9px;padding-bottom:11px;
  border-bottom:1px solid rgba(0,0,0,.09)}
.fono__av{width:32px;height:32px;border-radius:50%;background:var(--surface);color:var(--gold);
  display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800;flex-shrink:0}
.fono__nom{font-size:.82rem;font-weight:800;line-height:1.2;color:#1C1A16}
.fono__est{font-size:.66rem;color:#66615A}
.burbuja{background:#fff;border-radius:12px 12px 12px 3px;padding:11px 13px;font-size:.79rem;
  line-height:1.5;color:#1C1A16;box-shadow:0 1px 2px rgba(0,0,0,.09);max-width:none}
.burbuja strong{font-weight:800}
.burbuja__hora{display:block;text-align:right;font-size:.62rem;color:#66615A;margin-top:5px}
.burbuja--paciente{background:#D6F5C8;border-radius:12px 12px 3px 12px;align-self:flex-end;max-width:74%}

/* ── Caso AMCO ── */
.caso-band{position:relative;overflow:hidden}
.caso{display:flex;flex-direction:column;gap:var(--esp-4);align-items:flex-start}
.caso__quien{display:flex;align-items:center;gap:14px}
.caso .caso__av{width:52px;height:52px;border-radius:50%;background:var(--gold);color:#241C0E;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.05rem;
  flex-shrink:0}
.caso__quien strong{display:block;font-size:1.06rem;font-weight:800}
.caso__quien span{font-size:var(--txt-sm);color:var(--ink-3)}

.metricas{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;
  background:var(--border);border:1px solid var(--border);border-radius:var(--radio);
  overflow:hidden;width:100%}
.metrica{background:var(--surface);padding:var(--esp-3);background-image:var(--grad-halo)}
.metrica b{display:block;font-size:2.8rem;font-weight:800;color:var(--gold);line-height:1;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin-bottom:8px}
.metrica span{font-size:var(--txt-sm);color:var(--ink-2)}

.caso__citas blockquote{display:flex;flex-direction:column;gap:var(--esp-3)}
.caso__citas q{font-size:clamp(1.25rem,2.4vw,1.75rem);line-height:1.4;font-weight:700;
  letter-spacing:-.02em;quotes:"«" "»"}
.caso__citas figcaption{margin-top:var(--esp-2);font-size:var(--txt-sm);color:var(--ink-3)}

/* ── Precios ── */
/* Tres planes: o entran los tres en fila, o van uno debajo del otro. Dos
   arriba y uno solo abajo deja la fila coja, que es peor que apilarlos. */
.planes{display:grid;grid-template-columns:1fr;
  gap:var(--esp-2);align-items:stretch}
.plan{background:var(--surface);border:1px solid var(--border);border-radius:var(--radio);
  padding:var(--esp-4) var(--esp-3) var(--esp-3);display:flex;flex-direction:column;gap:6px;
  position:relative;transition:transform .2s,border-color .2s}
.plan:hover{transform:translateY(-3px);border-color:var(--border-soft)}
.plan--destacado{border:1.5px solid var(--gold);box-shadow:var(--elev-2);
  background-image:var(--grad-halo)}
.plan__badge{position:absolute;top:-12px;left:var(--esp-3);background:var(--gold);color:#241C0E;
  font-size:.67rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 13px;border-radius:100px}
.plan__nom{font-size:.79rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3)}
.plan__para{font-size:var(--txt-sm);color:var(--ink-2);margin-bottom:12px}
.plan__precio{display:flex;align-items:baseline;gap:5px;margin-bottom:var(--esp-2)}
.plan__precio b{font-size:2.9rem;font-weight:800;letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums}
.plan__precio span{font-size:.92rem;color:var(--ink-3);font-weight:600}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:9px;
  padding:var(--esp-2) 0;border-top:1px solid var(--border);margin-bottom:var(--esp-2)}
.plan li{display:flex;gap:9px;font-size:.92rem;color:var(--ink-2);line-height:1.5}
.plan li svg{width:17px;height:17px;color:var(--mint);flex-shrink:0;margin-top:3px}
.plan .btn{margin-top:auto}

.setup{margin-top:var(--esp-3);background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radio);padding:var(--esp-3) var(--esp-4);display:flex;flex-wrap:wrap;
  align-items:center;justify-content:space-between;gap:var(--esp-3)}
.setup__txt{display:flex;flex-direction:column;gap:7px;max-width:58ch}
.setup__txt strong{font-size:1.4rem;font-weight:800;letter-spacing:-.02em}
.setup__txt span{font-size:.96rem;color:var(--ink-2);line-height:1.55}
.setup__precio{text-align:right;flex-shrink:0}
.setup__precio b{display:block;font-size:2.6rem;font-weight:800;color:var(--gold);
  line-height:1;letter-spacing:-.03em}
.setup__precio span{font-size:var(--txt-sm);color:var(--ink-3)}

.setup--promo{border-color:var(--gold-deep);box-shadow:0 0 0 1px var(--gold-soft)}
.setup__promo-tag{display:inline-flex;align-self:flex-start;margin-top:2px;padding:5px 12px;
  border-radius:999px;background:var(--gold-soft);color:var(--gold);
  font-size:.82rem;font-weight:800;letter-spacing:-.01em}
.setup__precio-antes{display:block;font-size:var(--txt-sm);color:var(--ink-3);
  text-decoration:line-through;text-decoration-color:var(--ink-3)}

@media(max-width:560px){
  .setup{flex-direction:column;align-items:flex-start}
  .setup__precio{text-align:left}
}

/* ── Preguntas frecuentes ── */
.faq{display:flex;flex-direction:column;max-width:820px}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:22px 2px;cursor:pointer;list-style:none;font-size:1.06rem;font-weight:700;
  letter-spacing:-.01em;transition:color .15s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--gold)}
.faq summary::after{content:"";width:11px;height:11px;flex-shrink:0;
  border-right:2.2px solid var(--ink-3);border-bottom:2.2px solid var(--ink-3);
  transform:rotate(45deg) translateY(-3px);transition:transform .22s ease}
.faq details[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.faq details p{padding:0 2px 24px;color:var(--ink-2);font-size:var(--txt-md);max-width:70ch}

/* ── Cierre ── */
.cierre-band{position:relative;overflow:hidden;background:var(--bg-soft)}
.cierre-band::before{content:"";position:absolute;bottom:-40%;left:50%;
  transform:translateX(-50%);width:70vw;height:50vw;background:var(--grad-halo);
  filter:blur(100px);border-radius:50%;pointer-events:none}
.cierre{position:relative;text-align:center;display:flex;flex-direction:column;
  align-items:center;gap:20px}
.cierre h2{max-width:18ch}
.cierre p{color:var(--ink-2);font-size:var(--txt-lg);max-width:50ch}
.cierre .btn{margin-top:6px;padding:18px 34px;font-size:1.05rem}
.cierre__nota{font-size:var(--txt-sm)!important;color:var(--ink-3)!important}

/* ── Pie ── */
.pie{background:#0D0E10;color:var(--ink-3);padding:var(--esp-4) 0;font-size:var(--txt-sm);
  border-top:1px solid var(--border)}
.pie__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:18px}
.pie .logo{color:var(--ink);font-size:1.1rem}
.pie a:hover{color:var(--gold)}

/* ── Visor de capturas ampliadas ──
   Se conserva del sitio anterior, con los tokens nuevos. Sin estas reglas
   el visor no tapa la página: la imagen se apila al final del documento. */
.visor{position:fixed;inset:0;z-index:200;background:rgba(6,6,8,.94);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,48px)}
.visor[hidden]{display:none}
.visor__fig{max-width:100%;max-height:100%;display:flex;flex-direction:column;gap:12px;align-items:center}
.visor__fig img{max-width:100%;max-height:82vh;width:auto;height:auto;border-radius:var(--radio-sm);
  border:1px solid var(--border-soft);box-shadow:var(--elev-2)}
.visor__fig figcaption{font-size:var(--txt-sm);color:var(--ink-2);text-align:center}
.visor__cerrar,.visor__nav{position:absolute;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.07);border:1px solid var(--border-soft);color:var(--ink);
  border-radius:50%;transition:background .16s,transform .16s}
.visor__cerrar:hover,.visor__nav:hover{background:rgba(255,255,255,.16)}
.visor__cerrar{top:clamp(12px,3vw,26px);right:clamp(12px,3vw,26px);width:42px;height:42px;font-size:26px;line-height:1}
.visor__nav{top:50%;transform:translateY(-50%);width:46px;height:46px;font-size:30px;line-height:1;padding-bottom:4px}
.visor__nav:hover{transform:translateY(-50%) scale(1.06)}
.visor__nav--prev{left:clamp(8px,2vw,22px)}
.visor__nav--next{right:clamp(8px,2vw,22px)}

@media(max-width:600px){
  .visor__nav{width:38px;height:38px;font-size:24px}
  .visor__fig img{max-height:70vh}
}

/* ── Conversación de WhatsApp, mensaje por mensaje ──
   Es la única animación que demuestra el producto en vez de decorar: el
   visitante ve salir el recordatorio y llegar la respuesta. js/animaciones.js
   agrega `visible` a cada burbuja y al indicador de escritura. */
[data-burbuja]{
  opacity:0;transform:translateY(10px) scale(.98);
  transition:opacity .34s ease,transform .34s cubic-bezier(.22,.61,.36,1);
}
[data-burbuja].visible{opacity:1;transform:none}

.escribiendo{
  display:none;align-self:flex-start;gap:4px;align-items:center;
  background:#fff;border-radius:12px 12px 12px 3px;padding:11px 13px;
}
.escribiendo.visible{display:flex}
.escribiendo i{
  width:6px;height:6px;border-radius:50%;background:#9A948A;
  animation:puntito 1.1s infinite ease-in-out;
}
.escribiendo i:nth-child(2){animation-delay:.16s}
.escribiendo i:nth-child(3){animation-delay:.32s}
@keyframes puntito{
  0%,60%,100%{opacity:.35;transform:translateY(0)}
  30%{opacity:1;transform:translateY(-3px)}
}

/* ── Capturas: que se note que se pueden abrir ── */
.captura{cursor:zoom-in}
.captura img{transition:transform .45s cubic-bezier(.22,.61,.36,1)}
.captura:hover img,.captura:focus-visible img{transform:scale(1.03)}

/* ── Preguntas frecuentes: que se desplieguen, no que salten ──
   El navegador que no entienda ::details-content abre de golpe, como antes,
   y el contenido igual entra con un fundido. */
.faq details>*:not(summary){animation:faqEntra .34s cubic-bezier(.22,.61,.36,1) both}
@keyframes faqEntra{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

@supports selector(::details-content){
  .faq details::details-content{
    block-size:0;overflow:hidden;
    transition:block-size .32s cubic-bezier(.22,.61,.36,1),content-visibility .32s allow-discrete;
  }
  .faq details[open]::details-content{block-size:auto}
}

/* ═══ Gramática de movimiento ═══
   Tres piezas, no doce efectos sueltos: la escena que se sostiene mientras
   se lee, el hilo que hilvana la página, y un idioma común de apariciones.
   Todo con transform, opacity y clip-path. Nada que obligue al navegador a
   recalcular la página al scrollear. */

/* ── 1. La escena del recorrido ──
   En pantalla grande cada captura se queda fija mientras su texto pasa al
   lado: el visitante no lee sobre el sistema, lo ve operar mientras baja.
   Debajo de 900px vuelve al apilado, que ahí lee mejor. */

/* ── 2. El hilo dorado ──
   Se dibuja con el scroll de la página, sin una línea de JavaScript: usa
   las animaciones ligadas al scroll del navegador. Donde no existen, la
   línea queda quieta y no molesta. */
.hilo{
  position:fixed;left:clamp(10px,2.2vw,30px);top:104px;bottom:104px;width:1px;
  background:var(--border);z-index:40;pointer-events:none;display:none;
}
.hilo::after{
  content:"";position:absolute;inset:0;transform-origin:top;transform:scaleY(0);
  background:linear-gradient(180deg,rgba(201,169,110,.15),var(--gold) 72%,var(--gold));
  box-shadow:0 0 12px rgba(201,169,110,.45);
}
/* Recién cuando hay margen de sobra: el contenedor mide 1180 y a menos de
   1320 el hilo se le montaría encima al contenido. */
@media(min-width:1320px){ .hilo{display:block} }
@supports (animation-timeline:scroll()){
  .hilo::after{animation:hilo linear both;animation-timeline:scroll(root block)}
}
@keyframes hilo{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* ── 3. El idioma de las apariciones ── */

/* Títulos: la línea se descubre de izquierda a derecha. */
[data-anim] h2,[data-anim] h3{
  clip-path:inset(0 100% -20% 0);
  transition:clip-path .78s cubic-bezier(.22,.61,.36,1);
  transition-delay:calc(var(--delay,0ms) + 90ms);
}
[data-anim].visible h2,[data-anim].visible h3{clip-path:inset(0 -20% -20% 0)}

/* Capturas: la pantalla se enciende. Un barrido dorado cruza el borde y la
   imagen pasa de apagada a nítida. */
.captura{position:relative}
.captura::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(105deg,transparent 38%,rgba(201,169,110,.28) 50%,transparent 62%);
  transform:translateX(-120%);
}
[data-anim].visible .captura::after,
.recorrido.listo .escena__toma.activa .captura::after{animation:barrido 1.15s cubic-bezier(.22,.61,.36,1) .18s both}
@keyframes barrido{to{transform:translateX(120%)}}

/* La captura se enciende al entrar: apagada mientras espera, nítida cuando
   le toca. Se apoya en el estado de la escena y no en un ancestro con
   data-anim, porque al armarse la escena la captura sale del paso. */
.captura img{transition:filter .9s ease,transform .45s cubic-bezier(.22,.61,.36,1)}
.recorrido.listo .escena__toma .captura img{filter:saturate(.55) brightness(.82)}
.recorrido.listo .escena__toma.activa .captura img{filter:none}
.captura:hover img,.captura:focus-visible img{transform:scale(1.03)}

/* Tarjetas en grilla: entran escalonadas y con una inclinación mínima, para
   que no aterricen como un bloque. */
[data-anim-grupo] .tarjeta,[data-anim-grupo] .plan,[data-anim-grupo] .problema{
  transform:translateY(26px) rotate(.5deg) scale(.985);
}
[data-anim-grupo] .tarjeta.visible,[data-anim-grupo] .plan.visible,
[data-anim-grupo] .problema.visible{transform:none}
/* Después del escalonado la tarjeta sigue levantándose al pasar el mouse:
   sin esto, el reset de arriba le gana por especificidad y el hover queda mudo. */
[data-anim-grupo] .plan.visible:hover{transform:translateY(-3px)}
[data-anim-grupo] .tarjeta.visible:hover{transform:translateY(-2px)}

/* Botones: el relleno crece desde donde está el cursor. --mx y --my los
   escribe js/animaciones.js al pasar el mouse. */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::before{
  content:"";position:absolute;z-index:-1;left:var(--mx,50%);top:var(--my,50%);
  width:0;height:0;border-radius:50%;background:rgba(255,255,255,.16);
  transform:translate(-50%,-50%);transition:width .5s ease,height .5s ease;
}
.btn:hover::before,.btn:focus-visible::before{width:280px;height:280px}
.btn--wa::before{background:rgba(6,35,26,.16)}

/* ── El hero sigue al cursor ──
   Cuatro grados como techo duro: pasado eso deja de leerse como profundidad
   y empieza a leerse como truco. js/animaciones.js escribe --hx y --hy solo
   si hay un mouse de verdad. */
.hero__copy,.hero .panel{
  transform:translate3d(calc(var(--hx,0) * var(--peso,1) * 1px),calc(var(--hy,0) * var(--peso,1) * 1px),0);
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.hero__copy{--peso:.35}
.hero .panel{--peso:1}
.hero::before{
  transform:translate3d(calc(var(--hx,0) * 2.2px),calc(var(--hy,0) * 2.2px),0);
  transition:transform .8s cubic-bezier(.22,.61,.36,1);
}

/* Enlace dentro de un párrafo: se tiene que ver que es un enlace. */
.enlace-texto{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.enlace-texto:hover{color:var(--ink)}

/* Tres secciones tenían la misma grilla de tarjetas parejas. Ahora cada una
   tiene su propio ritmo: el equipo abre con una tarjeta grande, la
   diferenciación alterna tamaños y solo la seguridad conserva la grilla
   pareja, que ahí sirve porque son seis garantías equivalentes. */
.grilla--bento{grid-template-columns:1.25fr 1fr}
.grilla--bento .tarjeta:first-child{grid-row:span 2;justify-content:center}
.grilla--bento .tarjeta:first-child h3{font-size:var(--txt-xl)}


@media(max-width:760px){
  .grilla--bento{grid-template-columns:1fr}
  .grilla--bento .tarjeta:first-child{grid-row:auto}
}

/* En teléfono la captura entera mide 167px de alto y no se distingue nada.
   Se recorta a 3:2 mostrando la esquina superior izquierda, que es donde
   están la agenda y los datos que importan. Tocándola se abre entera. */
@media(max-width:899px){
  .paso .captura img{aspect-ratio:3/2;object-fit:cover;object-position:left top}
  .paso .captura{position:relative}
  .paso .captura::before{
    content:"Tocá para verla completa";
    position:absolute;left:0;right:0;bottom:0;z-index:2;
    padding:7px 12px;font-size:var(--txt-xs);font-weight:700;
    color:var(--ink);background:linear-gradient(0deg,rgba(10,10,12,.92),rgba(10,10,12,0));
    pointer-events:none;
  }
}

/* Las seis fichas viajan al centro del grupo y se apilan, con la de más
   abajo quedando arriba de todo. La distancia la mide js/animaciones.js. */
.ficha{transition:transform .9s cubic-bezier(.22,.61,.36,1),opacity .9s ease}
/* Cada una va al centro pero con su propio desvío, si no quedan las seis
   exactamente encimadas y parece que desaparecieron. Se ve una pila
   desprolija, que es justo lo que dice la sección. */
.disperso.junta .ficha{
  transform:translate(calc(var(--dx,0px) + var(--ox,0px)),calc(var(--dy,0px) + var(--oy,0px)))
            rotate(var(--giro,0deg)) scale(.94);
  opacity:.55;
}
.disperso.junta .ficha:nth-child(1){--giro:-7deg;--ox:-26px;--oy:-9px;z-index:1}
.disperso.junta .ficha:nth-child(2){--giro:5deg;--ox:20px;--oy:-14px;z-index:2}
.disperso.junta .ficha:nth-child(3){--giro:-3deg;--ox:-14px;--oy:8px;z-index:3}
.disperso.junta .ficha:nth-child(4){--giro:6deg;--ox:28px;--oy:6px;z-index:4}
.disperso.junta .ficha:nth-child(5){--giro:-5deg;--ox:-6px;--oy:-3px;z-index:5;opacity:.7}
.disperso.junta .ficha:nth-child(6){--giro:3deg;--ox:8px;--oy:12px;z-index:6;opacity:.85}

/* Cuando se juntaron, la ficha única toma el protagonismo. */
.disperso.junta ~ .flecha{opacity:1}
.antes-despues:has(.disperso.junta) .unificado{
  border-color:rgba(201,169,110,.5);
  box-shadow:var(--elev-2),0 0 0 1px rgba(201,169,110,.14);
}

/* ── Odontograma de muestra ──
   El visitante marca dientes y ve armarse el presupuesto. Es la pieza que
   demuestra el sistema en vez de contarlo. */
.odo{display:grid;grid-template-columns:1fr;gap:var(--esp-3);align-items:start}
.odo__panel{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radio);padding:var(--esp-3);overflow:hidden}

.odo__prest{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--esp-3)}
.odo__chip{font-size:var(--txt-sm);font-weight:700;color:var(--ink-2);
  padding:9px 15px;border-radius:100px;box-shadow:inset 0 0 0 1px var(--border);
  transition:color .16s,box-shadow .16s,background .16s}
.odo__chip:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--border-soft)}
.odo__chip.elegida{color:var(--gold);background:var(--gold-soft);
  box-shadow:inset 0 0 0 1px rgba(201,169,110,.45)}



.odo__pie{font-size:var(--txt-xs);color:var(--ink-3);margin-top:12px;max-width:52ch}

/* El presupuesto, como el del sistema */
.odo__presu{background:var(--surface);border:1px solid rgba(201,169,110,.26);
  border-radius:var(--radio);padding:var(--esp-3);box-shadow:var(--elev-1)}
.odo__titulo{font-size:var(--txt-xs);font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.odo__items{list-style:none;padding:0;margin:0;display:flex;flex-direction:column}
.odo__items li{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:baseline;
  padding:9px 0;border-bottom:1px solid var(--border);font-size:var(--txt-sm)}
.odo__pieza{font-weight:800;color:var(--gold);font-variant-numeric:tabular-nums}
.odo__nom{color:var(--ink-2)}
.odo__monto{font-weight:700;font-variant-numeric:tabular-nums}
.odo__vacio{font-size:var(--txt-sm);color:var(--ink-3);padding:14px 0}
.odo__vacio[hidden]{display:none}

.odo__total-fila{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid var(--border-soft);
  font-size:var(--txt-sm);color:var(--ink-2);max-width:none}
.odo__total-fila b{font-size:1.9rem;color:var(--ink);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}

.odo__limpiar{margin-top:16px;font-size:var(--txt-sm);font-weight:700;color:var(--ink-2);
  padding:10px 18px;border-radius:100px;box-shadow:inset 0 0 0 1px var(--border);
  transition:color .16s,box-shadow .16s}
.odo__limpiar:hover:not(:disabled){color:var(--ink);box-shadow:inset 0 0 0 1px var(--border-soft)}
.odo__limpiar:disabled{opacity:.4;cursor:default}
.odo__nota{font-size:var(--txt-xs);color:var(--ink-3);margin-top:14px}

@media(min-width:860px){
  .odo{grid-template-columns:1.35fr 1fr;gap:var(--esp-4)}
  .odo__panel,.odo__presu{padding:var(--esp-4)}
}

/* ── El odontograma, como el del sistema ──
   Cada pieza es el cuadrado con las cuatro caras marcadas por las diagonales
   y la oclusal en el centro, con su número debajo. Cuatro cuadrantes con la
   numeración que usan los odontólogos. Va sobre fondo claro porque así se ve
   en el sistema. */

.odo__boca{
  background:#F7F5F1;border-radius:var(--radio-sm);padding:16px 10px;
}
/* En el teléfono el panel cede su padding para que las piezas sean tocables. */
@media(max-width:520px){
  .odo__panel{padding:var(--esp-2)}
}

/* Las 32 piezas no entran sin achicarse en pantalla chica: como en el
   sistema, las dos arcadas deslizan de costado juntas, con una sola barra
   de scroll debajo de las dos. */
.odo__scroll{
  overflow-x:auto;display:flex;flex-direction:column;gap:16px;
  padding-bottom:10px;-webkit-overflow-scrolling:touch;
}
.odo__arcada{display:flex;gap:5px;width:max-content}
.odo__scroll::-webkit-scrollbar{height:6px}
.odo__scroll::-webkit-scrollbar-track{background:transparent}
.odo__scroll::-webkit-scrollbar-thumb{background:var(--gold-soft);border-radius:100px}
.odo__scroll{scrollbar-width:thin;scrollbar-color:var(--gold-soft) transparent}

.odo__diente{
  display:flex;flex-direction:column;align-items:center;gap:4px;padding:0;
  flex:0 0 42px;
  color:#9A968E;                              /* el trazo de la pieza */
  transition:transform .16s ease,color .2s ease;
}
.odo__diente svg{width:100%;height:auto;display:block}
.odo__diente .cara{fill:#fff;stroke:currentColor;stroke-width:1.3;
  transition:fill .25s ease}
.odo__diente .linea{fill:none;stroke:currentColor;stroke-width:1.1}
.odo__diente .cara--centro{fill:#fff}
.odo__num{font-size:10px;font-weight:700;color:#8A857A;font-variant-numeric:tabular-nums;
  letter-spacing:.02em}

.odo__diente:hover{transform:translateY(-2px);color:var(--gold-deep)}
.odo__diente:active{transform:none}
.odo__diente:focus-visible{outline-offset:4px;border-radius:4px}

.odo__diente.marcado{color:#4A463F}
.odo__diente.marcado .odo__num{color:#4A463F}
/* Se pintan las caras con selectores directos: la variable no siempre llega
   adentro del SVG y quedaban todas blancas. */
.odo__diente[data-tono="mint"] .cara{fill:#8FE3C6}
.odo__diente[data-tono="mint"] .cara--centro{fill:#3ECFA4}
.odo__diente[data-tono="gold"] .cara{fill:#EBD3A8}
.odo__diente[data-tono="gold"] .cara--centro{fill:#C9A96E}
.odo__diente[data-tono="rojo"] .cara{fill:#F0B3A9}
.odo__diente[data-tono="rojo"] .cara--centro{fill:#D9503A}

@media(min-width:620px){
  .odo__boca{padding:22px 20px}
  .odo__diente{flex-basis:48px}
}

@media(min-width:920px){
  .planes{grid-template-columns:repeat(3,1fr)}
}

/* ── Las razones se apilan ──
   Cada tarjeta se ancla debajo de la anterior, dejando ver su borde, y la
   siguiente sube por encima. Es sticky puro: no hay JavaScript de por medio,
   así que anda igual en iPhone y no depende de ningún observador.
   El escalonado sale de --i, que cada tarjeta trae en el HTML. */
/* El aire de abajo es lo que deja que la pila termine de armarse: sin él, el
   final del contenedor empuja a las tarjetas y el escalonado se aplasta. Va
   como elemento y no como padding: en un contenedor flex el rango del sticky
   lo limita la caja de contenido, así que el padding no cuenta. */
.pila{display:flex;flex-direction:column;gap:0}
.pila__aire{flex:0 0 auto;height:58vh}
.pila .tarjeta{
  position:sticky;
  top:calc(84px + (var(--i,1) - 1) * 16px);
  min-height:44vh;
  display:flex;flex-direction:column;justify-content:center;gap:12px;
  border:1px solid var(--border-soft);border-radius:var(--radio);
  background:var(--surface);
  padding:var(--esp-4);
  box-shadow:0 -18px 40px rgba(0,0,0,.45);
  transition:none;
}
/* La primera no necesita sombra hacia arriba: no tapa nada. */
.pila .tarjeta:first-child{box-shadow:none}
.pila .tarjeta h3{font-size:var(--txt-xl)}
.pila .tarjeta p{font-size:var(--txt-lg);color:var(--ink-2);max-width:46ch}

/* Un número grande y tenue detrás: da profundidad y dice cuántas van. */
.pila .tarjeta::before{
  content:"0" counter(razon);counter-increment:razon;
  position:absolute;right:var(--esp-4);top:var(--esp-3);
  font-size:clamp(2.4rem,6vw,4.2rem);font-weight:800;line-height:1;
  color:var(--ink);opacity:.06;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;pointer-events:none;
}
.pila{counter-reset:razon}

/* Donde el navegador sabe seguir el scroll, la de atrás se achica al ser
   tapada. Donde no (Safari de iPhone), simplemente se apila. */
@supports (animation-timeline: view()){
  @media(prefers-reduced-motion:no-preference){
    .pila .tarjeta{
      animation:tapar linear both;
      animation-timeline:view();
      animation-range:exit -20% exit 60%;
    }
    .pila .tarjeta:last-child{animation:none}
  }
}
@keyframes tapar{
  to{transform:scale(.94);opacity:.55}
}

@media(max-width:760px){
  .pila .tarjeta{min-height:40vh;padding:var(--esp-3);top:calc(80px + (var(--i,1) - 1) * 12px)}
  .pila .tarjeta p{font-size:var(--txt-md)}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  [data-anim]{opacity:1!important;transform:none!important}
  [data-burbuja]{opacity:1!important;transform:none!important}
  .escribiendo{display:none!important}
  .faq details::details-content{block-size:auto!important}
  [data-anim] h2,[data-anim] h3{clip-path:none!important}
  .captura img{filter:none!important}
  .captura::after{display:none!important}
  .hilo::after{transform:scaleY(1)!important}
  .hero__copy,.hero .panel,.hero::before{transform:none!important}
  [data-anim-grupo] .tarjeta,[data-anim-grupo] .plan,[data-anim-grupo] .problema{transform:none!important}
  .disperso.junta .ficha{transform:none!important;opacity:1!important}
  .pila .tarjeta{position:static!important;min-height:0!important;box-shadow:none!important}
  .pila__aire{display:none!important}
}

/* ── Moni ──
   El hilo se recrea en marcado propio: no hay capturas del asistente y no
   se esperan. Las burbujas reutilizan [data-burbuja], que ya trae su estado
   oculto y su excepción de prefers-reduced-motion. js/moni.js las revela. */
.moni{display:grid;grid-template-columns:1fr 1.05fr;gap:var(--esp-5);align-items:center}
.moni__copy{display:flex;flex-direction:column;gap:var(--esp-3)}

.moni__panel{background:var(--surface);border:1px solid var(--border);
  border-radius:18px;overflow:hidden;box-shadow:var(--elev-2)}
.moni__hilo{display:flex;flex-direction:column;gap:var(--esp-2);
  padding:var(--esp-3);min-height:340px}

.moni__msg{font-size:var(--txt-sm);line-height:1.5;padding:11px 14px;
  border-radius:14px;max-width:86%}
.moni__msg--yo{align-self:flex-end;background:var(--gold-soft);
  color:var(--ink);border-bottom-right-radius:4px}
.moni__msg--moni{align-self:flex-start;background:var(--surface-2);
  color:var(--ink);border-bottom-left-radius:4px}
.moni__msg strong{font-weight:800;color:var(--gold)}
.moni__fuente{display:block;margin-top:7px;font-size:var(--txt-xs);
  color:var(--gold);font-weight:700}

/* La tarjeta de confirmación: el dictado original arriba del texto a
   guardar. Verlos juntos es lo que hace que un agregado inventado salte
   a la vista — es así en el producto, y así se muestra acá. */
.moni__prop{align-self:flex-start;max-width:92%;display:flex;flex-direction:column;
  gap:6px;padding:13px 15px;border-radius:14px;background:var(--surface-2);
  border:1px solid var(--gold-soft)}
.moni__prop-tit{font-size:var(--txt-xs);font-weight:800;color:var(--gold);
  text-transform:uppercase;letter-spacing:.06em}
.moni__prop-dicho{font-size:var(--txt-xs);color:var(--ink-3);font-style:italic}
.moni__prop-txt{font-size:var(--txt-sm);line-height:1.5;color:var(--ink);
  padding:9px 11px;border-radius:9px;background:var(--bg-soft);margin:0}
.moni__prop-acc{align-self:flex-start;margin-top:3px;font-size:var(--txt-xs);
  font-weight:800;color:var(--bg);background:var(--gold);
  padding:7px 14px;border-radius:100px}

.moni__nota{margin-top:var(--esp-4);color:var(--ink-2);font-size:var(--txt-sm);
  max-width:70ch}
.moni__cta{margin-top:var(--esp-3)}

@media(max-width:900px){
  .moni{grid-template-columns:1fr;gap:var(--esp-4)}
}

.hero__moni{color:var(--ink-2);font-size:var(--txt-md);line-height:1.55;max-width:52ch}
.hero__moni strong{color:var(--gold);font-weight:800}