/* ═══════════════════════════════════════════════════════════════
   Guía SaludHable — landing narrativa
   Sistema oscuro de producto (hermano de Guía ConFiHable),
   acento #0080f8 muestreado del pulpo 3D.
   ═══════════════════════════════════════════════════════════════ */

@font-face{font-family:Sora;src:url(./assets/sora-400-Cbrd5TVM.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Sora;src:url(./assets/sora-600-Cm09aD0D.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Sora;src:url(./assets/sora-700-SJ0ak-nu.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Manrope;src:url(./assets/manrope-400-DwEN4T2N.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Manrope;src:url(./assets/manrope-500-DdZca6K5.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Manrope;src:url(./assets/manrope-600-CdGLEHb2.woff2) format('woff2');font-weight:600;font-display:swap}

:root{
  --ink:#0a0e1c; --abyss:#132238; --indigo:#1b1c4b;
  --azul:#0080f8; --azul-claro:#5cb4ff; --azul-hondo:#0057b8;
  --alerta:#ff6b6b; --ambar:#ffcf6b; --verde:#34e0b0;
  --paper:#f8fafc; --paper-dim:#c2cbf2; --mist:#a9b2e8;
  --vidrio:rgba(255,255,255,.05); --vidrio-mas:rgba(255,255,255,.085);
  --borde:rgba(150,190,255,.16); --borde-mas:rgba(120,190,255,.40);
  --r:16px; --r-lg:26px; --r-xl:48px; --pill:999px;
  --maxw:1240px;
  --suave:cubic-bezier(.16,1,.3,1);
  /* rebote mínimo, al estilo de las páginas de Apple */
  --rebote:cubic-bezier(.34,1.42,.64,1);
  --lento:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  /* Cada acto se ENCUADRA al desplazarse, en vez de pasar de largo.
     `proximity` engancha solo cuando ya estás cerca del acto, así que
     el resto de la página (el tablero, el método, el formulario) sigue
     desplazándose con normalidad. */
  scroll-snap-type:y proximity;
  scroll-padding-top:64px;
}
body{
  margin:0; background:var(--ink); color:var(--paper);
  font-family:Manrope,-apple-system,"Segoe UI",Roboto,sans-serif;
  line-height:1.62; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%;
  overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(120% 70% at 50% -8%, rgba(0,128,248,.16), transparent 62%),
    radial-gradient(90% 60% at 8% 104%, rgba(27,28,75,.85), transparent 64%),
    radial-gradient(80% 55% at 96% 82%, rgba(19,34,56,.9), transparent 62%),
    var(--ink);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--azul-claro);outline-offset:3px;border-radius:10px}
.env{width:min(var(--maxw),100%);margin:0 auto;padding:0 clamp(18px,4vw,34px)}

/* ═════════ Barra ═════════ */
.barra{
  position:fixed; top:0; left:0; right:0; z-index:60;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  background:rgba(10,14,28,.72); border-bottom:1px solid transparent;
  transition:border-color .4s var(--suave), background .4s var(--suave);
}
.barra.pegada{border-bottom-color:var(--borde); background:rgba(10,14,28,.9)}
.barra .env{display:flex;align-items:center;gap:16px;height:64px}
.barra .marca img{height:30px;width:auto;display:block}
.barra nav{margin-left:auto;display:flex;align-items:center;gap:6px}
.barra nav a.sec{
  display:none; padding:8px 13px; border-radius:var(--pill);
  font-size:.86rem; color:var(--paper-dim);
  transition:color .3s, background .3s;
}
.barra nav a.sec:hover{color:var(--paper);background:var(--vidrio)}
.idioma{
  display:flex; gap:2px; padding:3px; border-radius:var(--pill);
  background:var(--vidrio); border:1px solid var(--borde);
}
.idioma button{
  border:0; background:transparent; color:var(--mist); cursor:pointer;
  font:600 .74rem/1 Manrope,sans-serif; letter-spacing:.06em;
  padding:6px 10px; border-radius:var(--pill); transition:background .3s, color .3s;
}
.idioma button[aria-pressed="true"]{background:rgba(0,128,248,.22);color:var(--paper)}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 20px; border-radius:var(--pill);
  font:600 .9rem/1 Manrope,sans-serif; cursor:pointer; border:1px solid transparent;
  transition:transform .35s var(--suave), box-shadow .35s var(--suave), background .35s;
}
.btn-p{background:linear-gradient(140deg,var(--azul),var(--azul-hondo));color:#fff;
  box-shadow:0 14px 34px -14px rgba(0,128,248,.9)}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 20px 44px -14px rgba(0,128,248,1)}
.btn-s{background:var(--vidrio);border-color:var(--borde);color:var(--paper)}
.btn-s:hover{border-color:var(--borde-mas);background:var(--vidrio-mas)}

/* ═════════ Aviso de versión de trabajo ═════════ */
.aviso-dev{
  position:fixed; z-index:70; left:0; right:0; bottom:0;
  background:rgba(255,207,107,.13); border-top:1px solid rgba(255,207,107,.34);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  font-size:.78rem; color:var(--ambar); text-align:center; padding:8px 16px;
}
.aviso-dev b{color:#ffe4a3}
.aviso-dev button{
  margin-left:10px;background:transparent;border:1px solid rgba(255,207,107,.4);
  color:var(--ambar);border-radius:var(--pill);font-size:.72rem;padding:2px 9px;cursor:pointer}

/* ═════════ Héroe ═════════ */
.heroe{min-height:100svh;display:grid;place-items:center;padding:110px 0 60px;position:relative}
.heroe .env{text-align:center}
.antetitulo{
  font:600 .68rem/1 Manrope,sans-serif; letter-spacing:.26em; text-transform:uppercase;
  color:var(--azul-claro); margin:0 0 18px;
}
h1{
  font-family:Sora; font-weight:700; letter-spacing:-.035em; line-height:1.03;
  font-size:clamp(2.1rem,7vw,4.4rem); margin:0 auto; max-width:16ch;
}
h1 em{font-style:normal;color:var(--azul-claro)}
.entrada{margin:22px auto 0;max-width:52ch;color:var(--paper-dim);
  font-size:clamp(1rem,2.6vw,1.16rem)}
.acciones{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.pista{margin-top:44px;color:var(--mist);font-size:.78rem;display:flex;
  align-items:center;justify-content:center;gap:9px}
.pista svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;
  animation:baja 2.4s var(--lento) infinite}
@keyframes baja{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(5px);opacity:1}}

/* ═════════ La historia: objeto pegado + actos que pasan ═════════ */
.historia{position:relative;padding:0 0 40px}
.historia .env{display:grid;gap:clamp(20px,4vw,56px)}
@media (min-width:1000px){
  /* 🪤 SIN `align-items:start`: con él, la celda de la escena se encoge a su
     propia altura y `position:sticky` se queda sin recorrido — la escena
     bajaba con el texto en vez de quedarse fija. */
  .historia .env{grid-template-columns:1fr 1fr}
}
.escena{
  position:sticky; top:64px; height:min(76svh,640px);
  display:grid; place-items:center; z-index:1;
}
@media (max-width:999px){
  /* 🪤 en una columna la escena queda PEGADA encima del texto que sube.
     Sin un fondo propio, el edificio y las letras se montan y no se lee nada.
     Por eso lleva un telón a sangre completa que se desvanece abajo.        */
  .escena{height:34svh; top:56px; margin-bottom:2px; z-index:3}
  .escena::before{
    /* el texto va en la MISMA columna, asi que no hace falta sangre completa:
       con -50vw se desbordaba la pagina a lo ancho. */
    content:""; position:absolute; inset:-60px -16px -10px; z-index:-1;
    /* opaco de verdad: cualquier desvanecido largo deja ver el texto que sube */
    background:var(--ink);
  }
  /* 🪤 El SVG del edificio lleva `overflow:visible` y es CUADRADO: con el ancho
     de la columna se dibuja más alto que su caja (medido: 354 px dentro de una
     caja de 287 → se sale 67 px por debajo). El telón de arriba solo llegaba
     10 px más abajo, así que en esa franja el texto que subía se veía A TRAVÉS
     del edificio. Este segundo telón sigue al dibujo: es cuadrado como él, así
     que su borde inferior cae siempre en la base del edificio, sea cual sea el
     tamaño de la pantalla. */
  .marco-escena::before{
    content:""; position:absolute; top:0; left:-16px; right:-16px;
    /* misma proporción que el viewBox de celular (420x390, ver guion.js), para
       que el borde inferior siga cayendo en la base del edificio */
    aspect-ratio:420/364; z-index:-1; pointer-events:none;
    background:var(--ink);
    box-shadow:0 16px 30px -12px var(--ink);
  }
  .acto{min-height:calc(100svh - 34svh - 60px); padding:14px 0 24px;
    justify-content:center;
    /* en celular la escena pegada ocupa la franja de arriba, así que el
       acto se engancha por su inicio y no por su centro */
    scroll-snap-align:start;}
  .acto h2{max-width:none}
}
.actos{display:grid;gap:0}
.acto{
  /* llena EXACTAMENTE la pantalla visible (descontando la barra), para que al
     engancharse quede encuadrado y no medio vacío */
  min-height:calc(100svh - 64px);
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(20px,4vw,40px) 0;
  scroll-snap-align:center;
}
.acto .num{
  font:600 .68rem/1 Manrope,sans-serif; letter-spacing:.24em; color:var(--azul-claro);
  margin-bottom:14px;
}
.acto h2{
  font-family:Sora;font-weight:600;letter-spacing:-.028em;line-height:1.12;
  font-size:clamp(1.5rem,4.2vw,2.5rem);margin:0 0 16px;max-width:18ch;
}
.acto h2 em{font-style:normal;color:var(--azul-claro)}
.acto p{margin:0 0 14px;color:var(--paper-dim);font-size:clamp(.97rem,2.4vw,1.06rem);max-width:46ch}
.acto p strong{color:var(--paper);font-weight:600}
.acto .aparece{opacity:0;transform:translateY(26px);
  transition:opacity .55s var(--suave),transform .7s var(--rebote)}
.acto.visible .aparece{opacity:1;transform:none}
.acto .aparece:nth-child(2){transition-delay:.06s}
.acto .aparece:nth-child(3){transition-delay:.12s}
.acto .aparece:nth-child(4){transition-delay:.18s}
.acto .aparece:nth-child(5){transition-delay:.24s}

/* dato destacado */
.dato{
  margin:18px 0 0; padding:16px 18px; border-radius:var(--r);
  background:var(--vidrio-mas); border:1px solid var(--borde);
}
.dato .cifra{font-family:Sora;font-weight:700;font-size:clamp(1.5rem,4.6vw,2.1rem);
  letter-spacing:-.03em;line-height:1.05}
.dato .cifra.mal{color:var(--alerta)}
.dato .cifra.bien{color:var(--verde)}
.dato .pie{font-size:.83rem;color:var(--mist);margin-top:5px}
.ejemplo{
  display:inline-flex;align-items:center;gap:6px;margin-top:10px;
  font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;
  color:var(--ambar);background:rgba(255,207,107,.1);
  border:1px solid rgba(255,207,107,.28);border-radius:var(--pill);padding:3px 10px;
}

/* puntos de progreso */
.progreso{
  position:fixed; left:clamp(10px,2vw,22px); top:50%; transform:translateY(-50%);
  z-index:40; display:none; flex-direction:column; gap:11px;
}
@media (min-width:1180px){.progreso{display:flex}}
.progreso i{
  width:7px;height:7px;border-radius:50%;background:rgba(169,178,232,.3);
  transition:background .4s var(--suave), transform .4s var(--suave);
}
.progreso i.on{background:var(--azul-claro);transform:scale(1.5)}

/* ═════════ El marco flotante (tablero) ═════════ */
.marco-zona{padding:clamp(40px,8vw,90px) 0}
.marco{
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--borde);background:linear-gradient(160deg,var(--vidrio-mas),var(--vidrio));
  box-shadow:0 50px 110px -40px rgba(0,50,130,.85);
  aspect-ratio:4/5;
}
@media (min-width:760px){ .marco{aspect-ratio:16/9} }
@media (min-width:1100px){ .marco{aspect-ratio:2.45/1} }
.marco::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(80% 60% at 50% 0%,rgba(0,128,248,.14),transparent 60%);
}
.cinta{display:flex;height:100%;transition:transform .9s var(--suave)}
.lamina{flex:0 0 100%;padding:clamp(16px,3vw,34px);display:flex;flex-direction:column}
.lamina h3{font-family:Sora;font-weight:600;font-size:clamp(1rem,2.4vw,1.3rem);margin:0 0 4px}
.lamina .sub{font-size:.82rem;color:var(--mist);margin:0 0 16px}
.rejilla{display:grid;gap:11px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  flex:1;align-content:center;grid-auto-rows:minmax(0,auto)}
.mosaico{
  background:var(--vidrio);border:1px solid var(--borde);border-radius:var(--r);
  padding:13px 15px;display:flex;flex-direction:column;justify-content:center;
}
.mosaico .k{font-size:.72rem;color:var(--mist);letter-spacing:.04em}
.mosaico .v{font-family:Sora;font-weight:700;font-size:clamp(1.1rem,3vw,1.7rem);
  letter-spacing:-.03em;margin-top:3px}
.mosaico .v.mal{color:var(--alerta)} .mosaico .v.bien{color:var(--verde)}
.mosaico .v.avisa{color:var(--ambar)}
.barras{display:flex;align-items:flex-end;gap:6px;height:64px;margin-top:10px}
.barras span{flex:1;background:linear-gradient(180deg,var(--azul-claro),var(--azul-hondo));
  border-radius:5px 5px 0 0;opacity:.85}
.lectura{margin:14px 0 0;font-size:.86rem;color:var(--paper-dim);max-width:62ch}
.lectura b{color:var(--paper);font-weight:600}
.mandos{display:flex;gap:7px;justify-content:center;margin-top:16px}
.mandos button{
  width:9px;height:9px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(169,178,232,.3);transition:background .35s,transform .35s}
.mandos button[aria-current="true"]{background:var(--azul-claro);transform:scale(1.35)}

/* ═════════ Bloques comunes ═════════ */
.bloque{padding:clamp(50px,9vw,110px) 0}
.titulo{font-family:Sora;font-weight:600;letter-spacing:-.03em;line-height:1.1;
  font-size:clamp(1.6rem,4.6vw,2.8rem);margin:0 0 14px;max-width:20ch}
.titulo em{font-style:normal;color:var(--azul-claro)}
.bajada{color:var(--paper-dim);max-width:56ch;margin:0 0 34px}
.tarjetas{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(238px,1fr))}
.tarjeta{
  /* 🔑 de JetBrains: en fondo oscuro la sombra no se ve.
     Las tarjetas se separan porque son MÁS CLARAS que el fondo. */
  background:linear-gradient(165deg,var(--vidrio-mas),var(--vidrio));
  border:1px solid var(--borde); border-radius:var(--r-lg);
  padding:24px 22px 26px;
  transition:border-color .5s var(--suave),background .5s var(--suave),transform .5s var(--suave);
}
.tarjeta:hover{border-color:var(--borde-mas);transform:translateY(-3px);
  background:linear-gradient(165deg,rgba(0,128,248,.12),var(--vidrio-mas))}
.tarjeta .ic{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;
  background:rgba(0,128,248,.15);border:1px solid rgba(0,128,248,.3);margin-bottom:14px}
.tarjeta .ic svg{width:19px;height:19px;stroke:var(--azul-claro);fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.tarjeta h3{font-family:Sora;font-weight:600;font-size:1.02rem;margin:0 0 7px;letter-spacing:-.01em}
.tarjeta p{margin:0;color:var(--mist);font-size:.9rem}

/* pasos numerados */
.pasos{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));counter-reset:p}
.paso{position:relative;padding:26px 22px;border-radius:var(--r-lg);
  background:linear-gradient(165deg,var(--vidrio-mas),var(--vidrio));border:1px solid var(--borde)}
.paso::before{
  counter-increment:p;content:counter(p,decimal-leading-zero);
  font-family:Sora;font-weight:700;font-size:2.3rem;letter-spacing:-.04em;
  color:rgba(0,128,248,.35);display:block;margin-bottom:8px;line-height:1;
}
.paso h3{font-family:Sora;font-weight:600;font-size:1.02rem;margin:0 0 6px}
.paso p{margin:0;color:var(--mist);font-size:.9rem}

/* testimonios — marcados como EJEMPLO a la vista */
.testimonios .tarjeta{position:relative;padding-top:34px}
.marca-ejemplo{
  position:absolute;top:12px;left:22px;
  font-size:.64rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ambar);background:rgba(255,207,107,.12);
  border:1px solid rgba(255,207,107,.32);border-radius:var(--pill);padding:3px 9px;
}
.testimonios blockquote{margin:0 0 14px;font-size:.96rem;color:var(--paper-dim)}
.testimonios .quien{font-size:.82rem;color:var(--mist)}

/* ═════════ Formulario ═════════ */
.cierre{position:relative;padding:clamp(56px,10vw,120px) 0 clamp(70px,10vw,120px)}
.caja{
  max-width:640px;margin:0 auto;padding:clamp(26px,5vw,44px);
  border-radius:var(--r-xl);border:1px solid var(--borde);
  background:linear-gradient(165deg,var(--vidrio-mas),var(--vidrio));
  box-shadow:0 50px 110px -46px rgba(0,50,130,.9);
}
.campos{display:grid;gap:13px;margin-top:22px}
@media (min-width:620px){.campos .fila{display:grid;gap:13px;grid-template-columns:1fr 1fr}}
label{display:block;font-size:.78rem;color:var(--mist);margin-bottom:6px;letter-spacing:.02em}
input,textarea,select{
  width:100%;padding:12px 14px;border-radius:12px;
  background:rgba(10,14,28,.6);border:1px solid var(--borde);color:var(--paper);
  font:400 .95rem/1.5 Manrope,sans-serif;transition:border-color .3s,background .3s;
}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--borde-mas);
  background:rgba(10,14,28,.85)}
textarea{min-height:96px;resize:vertical}
.resp{margin-top:16px;padding:13px 16px;border-radius:12px;font-size:.86rem;display:none}
.resp.ok{display:block;background:rgba(255,207,107,.12);border:1px solid rgba(255,207,107,.34);
  color:var(--ambar)}
.legal{margin-top:14px;font-size:.74rem;color:rgba(169,178,232,.7)}

/* ═════════ Pie ═════════ */
footer.pie{border-top:1px solid var(--borde);padding:38px 0 66px;text-align:center}
footer.pie img{height:34px;width:auto;margin-bottom:14px}
footer.pie p{margin:4px 0;font-size:.84rem;color:var(--mist)}
footer.pie .fino{font-size:.75rem;color:rgba(169,178,232,.6)}
.redes{display:flex;gap:9px;justify-content:center;margin:16px 0 20px}
.redes a{width:38px;height:38px;display:grid;place-items:center;border-radius:var(--pill);
  background:var(--vidrio);border:1px solid var(--borde);transition:border-color .3s,background .3s}
.redes a:hover{border-color:var(--borde-mas);background:rgba(0,128,248,.14)}
.redes svg{width:17px;height:17px;stroke:var(--paper-dim);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}

@media (min-width:860px){ .barra nav a.sec{display:inline-block} }

/* ═════════ Sin movimiento si así lo pide el sistema ═════════ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;scroll-snap-type:none}
  *{animation:none!important;transition-duration:.01ms!important}
  .acto .aparece{opacity:1;transform:none}
}

/* ═══════════════════════════════════════════════════════════════
   LA INSTITUCIÓN — el único objeto que vive durante todo el scroll
   y se va transformando. Silueta, sin detalles (decisión de Jhon).
   ═══════════════════════════════════════════════════════════════ */
/* el SVG se ENCAJA en su caja (preserveAspectRatio por defecto lo centra):
   con width fijo y height:auto se desbordaba hacia abajo en el celular. */
.edificio{width:100%;height:100%;max-width:540px;overflow:visible}
.edificio *{transition:opacity .9s var(--suave), fill .9s var(--suave),
            stroke .9s var(--suave), transform .9s var(--suave)}

/* silueta */
.ed-cuerpo{fill:#0e1730;stroke:rgba(120,170,255,.34);stroke-width:1.6}
.ed-suelo{stroke:rgba(120,170,255,.22);stroke-width:1.4}

/* halo: apagado al principio, encendido al final */
.ed-halo{fill:url(#halo);opacity:0}

/* ventanas: se encienden según --luz, cada una con su umbral --u
   🪤 se llama .vent y NO .v: `.v` ya era el valor de los mosaicos del
   tablero, y la colisión de nombres los dejaba invisibles. */
.vent{fill:var(--azul-claro);
   opacity:clamp(0, calc((var(--luz,0) - var(--u,.5)) * 8), .92)}

/* la cruz de la fachada */
.ed-cruz{fill:none;stroke:var(--azul-claro);stroke-width:4;stroke-linecap:round;
  opacity:clamp(.12, calc(var(--luz,0) * 1.2), 1)}

/* grietas: el problema */
.ed-grieta{stroke:var(--alerta);stroke-width:1.6;fill:none;stroke-linecap:round;opacity:0}
/* el cable cortado (la desconexión) */
.ed-cable{stroke:var(--alerta);stroke-width:2.6;fill:none;stroke-linecap:round;opacity:0}
.ed-chispa{fill:var(--alerta);opacity:0}
/* la puerta que se abre */
.ed-puerta{fill:var(--ambar);opacity:0}
/* los datos que entran */
.ed-dato{fill:var(--azul-claro);opacity:0}
/* el porcentaje / medidor */
.ed-arco{fill:none;stroke:var(--ambar);stroke-width:5;stroke-linecap:round;opacity:0;
  stroke-dasharray:1 1000}

/* ── los estados, acto por acto ────────────────────────────── */
.escena[data-acto="1"] .ed-grieta{opacity:.75}
.escena[data-acto="2"] .ed-grieta{opacity:1}
.escena[data-acto="2"] .ed-chispa{opacity:1}
.escena[data-acto="3"] .ed-puerta{opacity:1}
.escena[data-acto="3"] .ed-grieta{opacity:.5}
.escena[data-acto="4"] .ed-puerta{opacity:.55}
.escena[data-acto="4"] .ed-grieta{opacity:.4}
.escena[data-acto="5"] .ed-arco{opacity:1;stroke-dasharray:196 1000}
.escena[data-acto="5"] .ed-grieta{opacity:.35}
.escena[data-acto="6"] .ed-cable{opacity:1}
.escena[data-acto="6"] .ed-arco{opacity:.35;stroke-dasharray:196 1000}
.escena[data-acto="6"] .ed-grieta{opacity:.6}
.escena[data-acto="7"] .ed-dato{opacity:1;animation:sube 2.6s var(--lento) infinite}
.escena[data-acto="7"] .ed-cuerpo{stroke:rgba(0,128,248,.6)}
.escena[data-acto="8"] .ed-halo{opacity:.85}
.escena[data-acto="8"] .ed-cuerpo{fill:#10203f;stroke:rgba(92,180,255,.85)}
.escena[data-acto="8"] .ed-suelo{stroke:rgba(92,180,255,.5)}

@keyframes sube{
  0%{transform:translateY(24px);opacity:0}
  22%{opacity:1}
  100%{transform:translateY(-92px);opacity:0}
}
.ed-dato:nth-of-type(2){animation-delay:.5s}
.ed-dato:nth-of-type(3){animation-delay:1s}
.ed-dato:nth-of-type(4){animation-delay:1.5s}
.ed-dato:nth-of-type(5){animation-delay:2s}

/* el pulpo, que es el NARRADOR: asoma en los actos donde entramos nosotros */
.narrador{
  /* al doble de lo que medía (era 30% / 190px máx.): pedido de Jhon el 2-sep */
  position:absolute;right:0;bottom:4%;width:60%;max-width:380px;
  opacity:0;transform:translateY(18px) scale(.94);
  transition:opacity .9s var(--suave), transform .9s var(--suave);
  pointer-events:none;
  filter:drop-shadow(0 22px 40px rgba(0,60,140,.6));
}
.escena[data-acto="7"] .narrador,
.escena[data-acto="8"] .narrador{opacity:1;transform:none}
.marco-escena{position:relative;display:grid;place-items:center;width:100%;height:100%;
  max-width:540px;margin:0 auto}

/* ═══════════════════════════════════════════════════════════════
   Encuadre en celular
   ───────────────────────────────────────────────────────────────
   🪤 Va al FINAL del archivo a propósito: la regla base de `.acto`
   aparece después del bloque de celular de más arriba y, al tener
   la misma especificidad, ganaba ella. Aquí sí manda esta.

   En celular la escena pegada ocupa la franja superior, así que el
   acto se engancha por su INICIO, y el margen de enganche baja lo
   que mide esa franja para que el texto quede justo debajo.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:999px){
  html{ scroll-padding-top:calc(34svh + 62px); }
  .acto{ scroll-snap-align:start; }
}

/* ═══ Celular: encabezado holgado (2-sep) ═══════════════════════════
   El logo salía apretado contra el switch y el botón. Se encogen los
   dos para devolverle aire, y el logo gana alto.                      */
@media (max-width:640px){
  .barra .env{gap:8px}
  .barra .marca img{height:34px}
  .barra nav{gap:4px}
  .idioma{padding:2px}
  .idioma button{font-size:.66rem; padding:5px 7px}
  .btn{padding:8px 13px; font-size:.78rem}
}