/* =====================================================================
   ZSEQ — la secuencia de zipline.com, cuadro por cuadro.

   Orden de los beats, leído de las capturas del original:

     1 · entra la línea 1 del titular
     2 · entra la línea 2, indentada a la derecha, y aparece una
         miniatura entre las dos líneas
     3 · entra la línea 3, otra vez a la izquierda
     4 · el objeto colgado de un cable baja, y después vuelve a subir
     5 · aparece el segundo objeto abajo a la derecha
     6 · PREGUNTA: la pantalla se oscurece y "¿Te pasa esto?" queda sola,
         grande, al centro. Después se achica y sube hasta el lugar de la
         píldora, que la reemplaza.
     7 · la tarjeta CRECE hasta ocupar la mitad izquierda
     8 · cuatro slides: foto a la izquierda, problema centrado en la
         mitad derecha, y un riel de guiones abajo

   (La miniatura entre las líneas 1 y 2 se sacó; en su lugar va el
   equipo de tres — .zseq__team.)

   La tarjeta crece con clip-path, no con width/height: interpolar caja
   dispara layout en cada frame. El rectángulo de partida es la posición
   exacta de la miniatura, expresada en % de la tarjeta final.

   Todo se mueve leyendo --p (0→1), que escribe js/v2.js. Los tramos se
   derivan en CSS con clamp(), así que no hay una sola línea de JS por
   beat.
   ===================================================================== */

.zseq{
  position:relative;
  background:var(--ground-raise);   /* el crema del original */
  /* Su pacing: ~12 viewports, más 180vh para la pregunta (beat 6).
     Todos los tramos están recalculados sobre 1180vh de recorrido para
     que cada beat viejo ocupe EXACTAMENTE la misma distancia de scroll
     que antes: sólo se insertó la pregunta entre el titular y la
     tarjeta. Cuenta: p = vh / 1180. */
  height:1280vh;
  overflow:clip;

  /* ---- Tramos (entre paréntesis, en vh de scroll) ---- */
  --l1:   clamp(0, calc((var(--p,0) - .00847) * 23.6), 1);   /*  10 → 60  */
  --l2:   clamp(0, calc((var(--p,0) - .05508) * 23.6), 1);   /*  65 → 115 */
  --l3:   clamp(0, calc((var(--p,0) - .10169) * 23.6), 1);   /* 120 → 170 */

  /* El objeto colgado baja y vuelve a subir */
  --down: clamp(0, calc(var(--p,0) / .25424), 1);            /*   0 → 300 */
  --up:   clamp(0, calc((var(--p,0) - .25424) / .10169), 1); /* 300 → 420 */

  /* Segundo objeto */
  --pack: clamp(0, calc((var(--p,0) - .18644) * 18.88), 1);  /* 220 → 273 */

  /* PREGUNTA. Entra el fondo con la pregunta, se sostiene, se achica
     hacia la píldora y el fondo se va. */
  --qin:  clamp(0, calc((var(--p,0) - .37288) / .03390), 1); /* 440 → 480 */
  --qs:   clamp(0, calc((var(--p,0) - .45763) / .06780), 1); /* 540 → 620 */
  --qbg:  clamp(0, calc((var(--p,0) - .47458) / .05085), 1); /* 560 → 620 */

  /* Crecimiento de la tarjeta: arranca cuando la pregunta ya llegó a
     la píldora. */
  --grow: clamp(0, calc((var(--p,0) - .52542) / .11864), 1); /* 620 → 760 */
  /* El titular se apaga del todo en la cola del crecimiento. */
  --lede-out: clamp(0, calc((var(--p,0) - .59322) / .05085), 1); /* 700 → 760 */
  /* Las slides arrancan en data-handoff = .6441 (760vh), igual que antes. */
}

.zseq__pin{
  position:sticky;top:0;
  height:100svh;
  overflow:clip;
}

/* =====================================================================
   TITULAR — se construye línea por línea
   ===================================================================== */
.zseq__lines{
  position:absolute;z-index:2;
  left:26%;top:50%;translate:0 -50%;
  margin:0;
}
.zseq__line{
  display:block;
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:clamp(30px, 6.4vw, 92px);
  /* 1.1, no .92: las tres líneas iban pegadas y el titular se leía como
     un bloque; con aire, cada línea entra como una frase. */
  line-height:1.1;
  letter-spacing:var(--ls-hero);
  white-space:nowrap;

  /* El titular no se va: retrocede a gris, como en el original. */
  color:color-mix(in srgb, var(--paper) calc((1 - var(--grow)) * 100%), var(--paper-mute));
  opacity:calc(var(--l) * (1 - var(--lede-out)) * (1 - var(--qin)));
  transform:translate3d(0, calc((1 - var(--l)) * 26px), 0);
}
.zseq__line:nth-child(1){--l:var(--l1)}
/* La línea 2 va indentada: es lo que le da el escalonado al bloque. */
.zseq__line:nth-child(2){--l:var(--l2);margin-left:16.5vw;position:relative}

/* EL EQUIPO — tres círculos de vidrio en el hueco de la indentación de
   la línea 2: chat, teléfono y agenda. Entran de a uno con la línea.
   El anillo del color del suelo los separa donde se superponen. */
.zseq__team{
  position:absolute;right:100%;top:50%;translate:0 -50%;
  margin-right:clamp(12px, 1.6vw, 26px);
  display:flex;
}
.zseq__team > span{
  --in:clamp(0, calc(var(--l2) * 1.8 - var(--k) * .35), 1);
  display:grid;place-items:center;
  width:clamp(34px, 5.2vw, 76px);aspect-ratio:1;border-radius:50%;
  /* Relleno de marca, no vidrio: sobre el suelo liso el vidrio no
     tenía nada que desenfocar y los círculos se perdían. Sin brillo. */
  background:var(--blue-800);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 0 0 4px var(--ground-raise);
  color:var(--paper);
  opacity:var(--in);
  transform:scale(calc(.6 + var(--in) * .4));
}
.zseq__team > span + span{margin-left:calc(-1 * clamp(9px, 1.3vw, 19px))}
.zseq__team .ico{--ico-size:clamp(15px, 2.2vw, 32px)}
.zseq__line:nth-child(3){--l:var(--l3)}

/* =====================================================================
   LA TARJETA — miniatura que crece a página completa
   Vive siempre en su caja final; lo que crece es la ventana visible.
   ===================================================================== */
.zseq__card{
  position:absolute;z-index:3;
  left:2%;top:2.5%;
  width:47%;height:95%;

  /* Rectángulo de partida = la miniatura, en % de esta misma caja.
     Sale de medir el cuadro original: la miniatura cae entre la línea 1
     y la línea 2, pegada a la izquierda de la línea 2. */
  clip-path:inset(
    calc(44.2% - var(--grow) * 44.2%)
    calc(18.2% - var(--grow) * 18.2%)
    calc(44.9% - var(--grow) * 44.9%)
    calc(60.3% - var(--grow) * 60.3%)
    round calc(8px + var(--grow) * 12px)
  );
  /* Sin miniatura: entre los renglones del titular no hay imagen. La
     tarjeta aparece recién cuando empieza a crecer y se enciende en el
     primer quinto del crecimiento. */
  opacity:clamp(0, calc(var(--grow) * 5), 1);
  will-change:clip-path;
}

.zseq__slide{
  position:absolute;inset:0;
  opacity:0;transition:opacity 560ms var(--ease-out-soft);
}
.zseq__slide.is-on{opacity:1}

.zseq__slide img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  /* Zoom que vuelve a 1: la miniatura muestra un recorte, la tarjeta
     completa revela la escena entera. */
  transform:scale(calc(1.55 - var(--grow) * .55));
  transform-origin:center;
}

/* =====================================================================
   OBJETOS COLGADOS
   El cable llega desde el borde superior: es lo que hace que el objeto
   se lea como suspendido y no como pegado.
   ===================================================================== */
.zseq__hang{
  position:absolute;z-index:5;
  right:20%;top:0;
  width:clamp(140px, 17vw, 260px);
  opacity:calc((1 - var(--grow)) * (1 - var(--qin)));
  transform:translate3d(0, calc(var(--down) * 62vh - var(--up) * 46vh), 0);
}
.zseq__hang::before{
  content:"";position:absolute;left:50%;bottom:100%;
  width:1px;height:100vh;
  background:linear-gradient(to bottom, transparent, rgba(255,255,255,.28));
}
.zseq__hang img{width:100%;height:auto;display:block;
  filter:drop-shadow(0 24px 48px rgba(0,6,20,.5))}

.zseq__pack{
  position:absolute;z-index:4;
  right:23%;top:56%;
  width:clamp(90px, 11vw, 170px);
  opacity:calc(var(--pack) * (1 - var(--grow)) * (1 - var(--qin)));
  transform:translate3d(0, calc((1 - var(--pack)) * 30px), 0);
}
.zseq__pack img{width:100%;height:auto;display:block;
  filter:drop-shadow(0 20px 40px rgba(0,6,20,.5))}

/* =====================================================================
   ACTO 2 — titular por slide, alineado a la derecha y arriba
   ===================================================================== */

/* Rótulo fijo sobre los cuatro problemas: centrado y arriba de todo.

   Al centrarse queda por encima de la tarjeta, que ocupa la mitad
   izquierda. En vez de esquivarla, se resuelve como una píldora de
   vidrio flotando sobre la composición — el mismo material que usa el
   badge del hero. Así gana presencia sin crecer de cuerpo, que es lo
   que hacía falta: el tamaño ya estaba bien. */
/* El material vive en .ask-pill (css/v2.css): esta misma píldora se usa
   también en la sección de soluciones, y dos copias del mismo vidrio
   terminan divergiendo. Acá queda sólo dónde va y cuándo se enciende. */
.zseq__ask{
  position:absolute;z-index:9;
  left:50%;top:calc(var(--nav-h) + 3.2vh);
  translate:-50% 0;
  /* Aparece cuando la pregunta grande llega a su lugar y la reemplaza. */
  opacity:clamp(0, calc((var(--qs) - .7) / .3), 1);
}

/* PREGUNTA A PANTALLA COMPLETA (beat 6)
   El fondo es --ground-deep, el suelo más oscuro del sistema: la
   "pantalla negra" sin salir de los tres suelos. La pregunta viaja del
   centro al centro de la píldora (su top + la mitad de su alto, 18px) y
   se achica hasta el tamaño de su texto; en el último 30 % se cruza con
   la píldora real. */
.zseq__q{position:absolute;inset:0;z-index:8;pointer-events:none}
.zseq__q::before{
  content:"";position:absolute;inset:0;
  background:var(--ground-deep);
  opacity:calc(var(--qin) * (1 - var(--qbg)));
}
.zseq__q-text{
  position:absolute;left:50%;top:50%;
  translate:-50% -50%;
  margin:0;white-space:nowrap;
  font-size:clamp(34px, 6vw, 104px);
  color:var(--paper);
  transform-origin:50% 50%;
  transform:
    translate3d(0, calc((1 - var(--qin)) * 24px + var(--qs) * (var(--nav-h) + 3.2vh + 18px - 50svh)), 0)
    scale(calc(1 - var(--qs) * .87));
  opacity:calc(var(--qin) * (1 - clamp(0, calc((var(--qs) - .7) / .3), 1)));
}
.zseq__heads{
  position:absolute;z-index:5;
  right:3.5%;top:50%;translate:0 -50%;
  width:44%;
  text-align:center;
  opacity:var(--grow);
}
.zseq__head{
  position:absolute;top:50%;right:0;left:0;
  translate:0 -50%;
  margin:0;
  opacity:0;transform:translate3d(0,16px,0);
  transition:opacity 520ms var(--ease-out-soft), transform 520ms var(--ease-out-soft);
}
.zseq__head.is-on{opacity:1;transform:none}

/* El ícono nombra la pieza antes de que se lea el titular. Va centrado,
   sobre el mismo eje que el titular y el párrafo. */

.zseq__ico{
  display:block;
  --ico-size:clamp(30px, 2.9vw, 44px);
  color:var(--cyan-400);
  margin-inline:auto;
  margin-bottom:clamp(16px, 1.8vw, 26px);
}

/* El problema: la declaración. Unbounded, dos o tres palabras por línea. */
.zseq__prob{
  margin:0;
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:clamp(26px, 3.8vw, 56px);
  line-height:.98;
  letter-spacing:var(--ls-hero);
  color:var(--paper);
  text-wrap:balance;
}

/* La explicación del problema, debajo del titular. Con el texto
   centrado, el filete cyan pasa a ser una raya corta centrada arriba
   del párrafo: un borde lateral quedaría flotando sin nada que tocar.

   Sin etiqueta encima: el párrafo explica el titular que tiene arriba,
   así que nombrarlo sería ruido. */
.zseq__detail{
  margin:clamp(20px, 2.4vw, 32px) 0 0;
  font-family:var(--font-body);
  font-size:clamp(15px, 1.32vw, 20px);
  line-height:1.55;
  color:var(--paper-dim);
  text-wrap:pretty;
}
.zseq__detail::before{
  content:"";display:block;
  width:36px;height:3px;border-radius:2px;
  background:var(--cyan-400);
  margin:0 auto clamp(14px, 1.6vw, 20px);
}

/* --- Riel de guiones, abajo al lado de la tarjeta --- */
.zseq__rail{
  position:absolute;z-index:5;
  left:50.5%;bottom:5%;
  display:flex;flex-direction:column;gap:6px;
  opacity:var(--grow);
}
.zseq__tick{
  width:2px;height:26px;
  background:rgba(255,255,255,.20);
  transition:background 420ms var(--ease-out-soft);
}
.zseq__tick.is-on  {background:var(--paper)}
.zseq__tick.is-done{background:rgba(255,255,255,.45)}

/* =====================================================================
   SIN JS — el estado legible
   Todo lo de arriba se mueve con --p, que escribe js/v2.js. Sin script
   --p vale 0 y la escena quedaba en blanco: titular, tarjeta y los
   cuatro problemas en opacity:0. js/v2.js marca .is-js en la sección
   cuando toma el control; hasta entonces se ve la columna simple, la
   misma que los fallbacks de abajo.

   translate:none en .zseq__heads es obligatorio en los TRES bloques:
   la escena lo centra con translate:0 -50%, y en columna eso lo subía
   la mitad de su alto, encima de la foto.
   ===================================================================== */
.zseq:not(.is-js){height:auto;padding-block:var(--space-16)}
.zseq:not(.is-js) .zseq__pin{position:static;height:auto;
  display:flex;flex-direction:column;gap:var(--space-10);
  padding-inline:var(--container-pad)}
.zseq:not(.is-js) .zseq__lines{position:static;translate:none;left:auto}
.zseq:not(.is-js) .zseq__line{white-space:normal;opacity:1;transform:none;color:var(--paper)}
.zseq:not(.is-js) .zseq__line:nth-child(2){margin-left:0}
.zseq:not(.is-js) .zseq__card{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:4/5;
  max-width:560px;margin-inline:auto;
  clip-path:none;opacity:1;border-radius:20px;overflow:hidden}
.zseq:not(.is-js) .zseq__slide{opacity:1;display:none}
.zseq:not(.is-js) .zseq__slide.is-first{display:block}
.zseq:not(.is-js) .zseq__slide img{transform:none}
.zseq:not(.is-js) :is(.zseq__hang,.zseq__pack,.zseq__rail,.zseq__team,.zseq__q){display:none}
.zseq:not(.is-js) .zseq__ask{position:static;translate:none;opacity:1;
  align-self:center;margin-bottom:var(--space-4)}
.zseq:not(.is-js) .zseq__heads{position:static;translate:none;width:100%;text-align:center;opacity:1;
  display:flex;flex-direction:column;gap:var(--space-8)}
.zseq:not(.is-js) .zseq__head{position:static;translate:none;opacity:1;transform:none}

/* =====================================================================
   DEGRADACIONES
   Un pin de doce viewports en un teléfono es scroll secuestrado.
   ===================================================================== */
@media (max-width:900px){
  .zseq{height:auto;padding-block:var(--space-16)}
  .zseq__pin{position:static;height:auto;
    display:flex;flex-direction:column;gap:var(--space-10);
    padding-inline:var(--container-pad)}

  .zseq__lines{position:static;translate:none;left:auto}
  .zseq__line{white-space:normal;opacity:1 !important;transform:none !important;
    color:var(--paper) !important;font-size:clamp(30px,8.4vw,52px)}
  .zseq__line:nth-child(2){margin-left:0}

  /* relative, no static: los slides son absolutos y sin un ancestro
     posicionado acá se estiraban a toda la sección, detrás del texto. */
  .zseq__card{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:4/5;
    max-width:560px;margin-inline:auto;
    clip-path:none !important;opacity:1 !important;border-radius:20px;overflow:hidden}
  .zseq__slide{position:absolute;opacity:1;display:none}
  .zseq__slide.is-first{display:block}
  .zseq__slide img{transform:none !important}

  .zseq__hang,.zseq__pack,.zseq__rail,.zseq__team,.zseq__q{display:none}

  /* Centrada, como la cabecera de todas las demás secciones (.sec__head
     en css/v2.css). El fallback perdía el pin, no el eje. */
  .zseq__ask{position:static;translate:none;opacity:1 !important;
    align-self:center;margin-bottom:var(--space-4)}
  .zseq__heads{position:static;translate:none;width:100%;text-align:center;opacity:1 !important;
    display:flex;flex-direction:column;gap:var(--space-8)}
  .zseq__head{position:static;translate:none;opacity:1 !important;transform:none !important}
  .zseq__prob{font-size:clamp(24px,6.4vw,38px)}
}

@media (prefers-reduced-motion: reduce){
  .zseq{height:auto;padding-block:var(--space-16)}
  .zseq__pin{position:static;height:auto;
    display:flex;flex-direction:column;gap:var(--space-10);
    padding-inline:var(--container-pad)}
  .zseq__lines{position:static;translate:none;left:auto}
  .zseq__line{white-space:normal;opacity:1 !important;transform:none !important;color:var(--paper) !important}
  .zseq__line:nth-child(2){margin-left:0}
  .zseq__card{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:4/5;
    max-width:560px;margin-inline:auto;
    clip-path:none !important;opacity:1 !important;border-radius:20px;overflow:hidden}
  .zseq__slide{opacity:1;display:none}
  .zseq__slide.is-first{display:block}
  .zseq__slide img{transform:none !important}
  .zseq__hang,.zseq__pack,.zseq__rail,.zseq__team,.zseq__q{display:none}
  /* Centrada, como la cabecera de todas las demás secciones (.sec__head
     en css/v2.css). El fallback perdía el pin, no el eje. */
  .zseq__ask{position:static;translate:none;opacity:1 !important;
    align-self:center;margin-bottom:var(--space-4)}
  .zseq__heads{position:static;translate:none;width:100%;text-align:center;opacity:1 !important;
    display:flex;flex-direction:column;gap:var(--space-8)}
  .zseq__head{position:static;opacity:1 !important;transform:none !important}
}


/* El fallback de transparencia vive con .ask-pill en css/v2.css. */