/* ============================================================
   luzgasia — p-landing.css (portada v2 "Editorial del dato")
   Depende de tokens.css + publica.css. Prefijo lzi- (inicio).
   ============================================================ */

/* Llegada a "Cómo funciona" (#metodo): la sección ya trae su propio aire
   interno; con el scroll-margin genérico (5.5rem) el scroll paraba antes de
   tiempo y el título quedaba descentrado, demasiado abajo. Aquí el margen se
   anula y el colchón bajo la cabecera fija lo pone el padding de la sección. */
#metodo { scroll-margin-top: 0; }

/* =================== HERO =================== */

.lzi-hero {
  min-height: 92svh;
  align-content: center;
  padding-block: calc(4.5rem + var(--esp-8)) var(--esp-10);
  overflow: clip;
}

/* Gotas de marca: planas, duras, enormes y recortadas por el borde. */
/* AURORA: tres masas de luz que se funden con blur. El ambar es un rescoldo
   minimo (el acento es solo para ahorro/CTA); el resto es luz azul de red.
   `inset` negativo para que el blur no enseñe el borde del lienzo. */
/* CAPA PARTIDA (2026-08-26): el elemento SOLO deriva (transform, compositor) y
   el degradado con su `filter: blur(46px)` vive QUIETO en el ::before. Tener
   fondo y filtro en el MISMO elemento que se anima obliga al navegador a
   REHACER el desenfoque en cada fotograma sobre una superficie de ~2 Mpx (el
   `inset: -18%` la hace mayor que el viewport). Medido con CPU 6x a 1366x768,
   3 pasadas: la landing arriba pasaba 47,2 ms de media por cuadro y perdia
   106 de 106; separando la capa, 18,6 ms y 30 de 269. En /colaboradores, con
   la misma aurora compartida de publica.css: 43,4 -> 16,7 ms y de 116/116
   cuadros perdidos a 0/300 (60 fps clavados). El aspecto es el mismo — misma
   deriva, mismo radio, mismo degradado.
   DOS trampas medidas, para que no vuelvan: (1) NO le pongas
   `will-change: transform` al elemento que lleva el filtro, lo empeora; (2) no
   bajes el radio buscando lo mismo — con 32/24/16 px el coste apenas se movia
   (39,2 / 38,4 / 37,3 ms), porque lo que se paga es la SUPERFICIE, no el radio. */
.lzi-hero__aurora {
  position: absolute; inset: -18%;
  pointer-events: none;
}
.lzi-hero__aurora::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(46rem 30rem at 76% 14%, rgb(27 111 224 / 0.34), transparent 62%),
    radial-gradient(40rem 30rem at 8% 86%, rgb(18 58 117 / 0.65), transparent 64%),
    radial-gradient(26rem 18rem at 58% 74%, rgb(255 138 30 / 0.09), transparent 60%),
    radial-gradient(30rem 22rem at 30% 30%, rgb(62 160 255 / 0.12), transparent 60%);
  filter: blur(46px);
}
@media (prefers-reduced-motion: no-preference) {
  .lzi-hero__aurora {
    animation: lzi-aurora 26s ease-in-out infinite alternate;
  }
  @keyframes lzi-aurora {
    from { transform: translate3d(-1.5%, -1%, 0) scale(1); }
    to   { transform: translate3d(1.5%, 1.5%, 0) scale(1.06); }
  }
}

.lzi-hero__texto { align-self: center; }
.lzi-hero__marco {
  position: relative;
  display: grid;
  gap: var(--esp-8);
}
@media (min-width: 64rem) {
  .lzi-hero__marco { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; }
}

.lzi-hero__titulo { display: grid; margin-block: var(--esp-4) var(--esp-5); }
/* Cortes deliberados: cada línea desplaza su sangría (editorial, no centrado). */
.lzi-hero__titulo span:nth-child(2) { margin-inline-start: clamp(0rem, 6vw, 5.5rem); }
.lzi-hero__titulo span:nth-child(3) { margin-inline-start: clamp(0rem, 2.5vw, 2.25rem); }

.lzi-hero__sub { max-width: 34rem; }

.lzi-hero__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-5);
  margin-block: var(--esp-6) var(--esp-4);
}

/* Rango REAL del catálogo: la cifra como pieza tipográfica, no como caja. */
.lzi-hero__rango {
  margin: var(--esp-6) 0 0;
  padding-top: var(--esp-4);
  border-top: 1px solid var(--lg-border);
  display: grid;
  gap: 0.15rem;
  max-width: 30rem;
}
.lzi-hero__rango-pre { font-size: var(--texto-xs); color: var(--lg-text-muted); }
.lzi-hero__rango-cifra {
  font-family: var(--fuente-marca);
  font-weight: 700;
  font-size: var(--texto-xl);
  letter-spacing: -0.02em;
  color: var(--c-amarillo-400); /* la cifra de ahorro: uso permitido del ámbar */
  font-variant-numeric: tabular-nums;
}
.lzi-hero__rango-fuente { font-size: var(--texto-xs); color: var(--lg-text-muted); }

/* --- El mazo de facturas (luz + gas) del hero ---
   Las dos cartas se TURNAN al frente en un ciclo de 16 s: la de delante se
   escanea (barrido láser), sus anotaciones aparecen escalonadas y el sello
   se estampa; luego pasa atrás y entra la otra. Con reduced-motion o sin
   soporte: mazo estático (luz delante, gas asomando detrás) y anotaciones
   visibles — el estado "animado" vive DENTRO de la puerta. */
.lzi-hero__figura { position: relative; }
/* El ESCENARIO acota el tamaño de la figura; dentro se apilan las tres
   escenas (mazo, subida, alta) ocupando exactamente la misma caja. La
   ALTURA la define la carta de luz (position relative, no absolute): antes
   era un min-height adivinado y en móvil la carta real crecía más que la
   reserva y pisaba la sección siguiente (bug 2026-08-09). */
.lzi-escenario {
  position: relative;
  max-width: 24rem;
  margin-inline: auto;
}
.lzi-mazo { position: relative; }
@media (min-width: 64rem) {
  /* Sangra hacia el borde derecho: descentrado editorial. */
  .lzi-escenario { margin-inline: auto -2.5rem; max-width: none; }
}
.lzi-factura {
  position: absolute;
  inset: 0 0 auto 0;
  background: var(--lz-papel);
  color: var(--lz-tinta);
  border-radius: var(--radius-gota);
  box-shadow: var(--sombra-4);
  padding: 1.5rem 1.5rem 2rem;
  overflow: clip;
}
/* Estado base (también el estático sin animación): luz delante, gas detrás.
   La de luz es la que DA ALTURA al mazo (ver .lzi-escenario). */
.lzi-factura--luz { position: relative; inset: auto; rotate: 2.5deg; z-index: 2; }
.lzi-factura--gas {
  rotate: -3deg;
  z-index: 1;
  translate: 6% -4%;
  scale: 0.96;
  filter: brightness(0.94);
}

/* Chip de suministro (luz azul-cálido / gas azul). Más grande y con
   RECUADRO (petición 2026-08-09): antes era una píldora pequeña que se
   perdía; ahora es una placa con borde, legible de un vistazo. */
.lzi-factura__chip {
  font-family: var(--fuente-marca);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.32rem 0.7rem;
  border-radius: 0.45rem;
  border: 2px solid;
  margin-right: 0.6rem;
}
.lzi-factura__chip--luz {
  background: color-mix(in srgb, var(--c-amarillo-400) 30%, var(--lz-papel));
  color: #6b4d00;
  border-color: color-mix(in srgb, #7a5800 45%, transparent);
}
.lzi-factura__chip--gas {
  background: color-mix(in srgb, var(--lg-blue) 15%, var(--lz-papel));
  color: var(--c-marino-700);
  border-color: color-mix(in srgb, var(--lg-blue) 55%, transparent);
}

/* Láser de escaneo de la carta frontal (solo animado). */
.lzi-factura__laser {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--lg-blue-light), transparent);
  opacity: 0;
}

/* --- El ciclo (16 s, dos mitades) --- */
/* ====== Ciclo del hero (8s, RÁPIDO — 2026-08-09: antes 11s, pasaba lento a la subida): escanea luz → escanea gas → sube la
   documentación → estampa MEJOR PRECIO con chispas → repite. Todo tras la
   puerta de motion; con reduced-motion, mazo estático (luz delante con sus
   notas y el sello de mejor precio visibles, gas detrás). ====== */
@media (prefers-reduced-motion: no-preference) {
  /* Turno de las dos cartas en UNA sola pasada (2026-08-09): luz delante
     0-40%, relevo ancho 40-50%, gas delante hasta el final — al acabar su
     sello, el conmutador pasa DIRECTO a la escena de subida (nada de
     volver a la luz: ese retorno era tiempo muerto). */
  .lzi-factura--luz { animation: lzi-turno-a 7s ease-in-out infinite; }
  .lzi-factura--gas { animation: lzi-turno-b 7s ease-in-out infinite; }
  @keyframes lzi-turno-a {
    0%, 40%   { rotate: 2.5deg; translate: 0 0; scale: 1; z-index: 3; filter: brightness(1); }
    50%, 100% { rotate: -3deg; translate: 6% -4%; scale: 0.96; z-index: 1; filter: brightness(0.94); }
  }
  @keyframes lzi-turno-b {
    0%, 40%   { rotate: -3deg; translate: 6% -4%; scale: 0.96; z-index: 1; filter: brightness(0.94); }
    50%, 100% { rotate: 2.5deg; translate: 0 0; scale: 1; z-index: 3; filter: brightness(1); }
  }

  /* (El antiguo "sube la documentación" — el mazo botando tras los dos
     escaneos — se quitó el 2026-08-09: retrasaba el paso a la escena de
     subida, que ahora cuenta esa historia por sí sola.) */

  /* Barrido láser RÁPIDO en cada carta mientras está delante. */
  .lzi-factura--luz .lzi-factura__laser { animation: lzi-laser-a 7s ease-in-out infinite; }
  .lzi-factura--gas .lzi-factura__laser { animation: lzi-laser-b 7s ease-in-out infinite; }
  @keyframes lzi-laser-a {
    0% { opacity: 0; top: 5%; }
    3% { opacity: 1; }
    18% { top: 93%; opacity: 1; }
    21%, 100% { opacity: 0; }
  }
  @keyframes lzi-laser-b {
    0%, 52% { opacity: 0; top: 5%; }
    55% { opacity: 1; }
    70% { top: 93%; opacity: 1; }
    73%, 100% { opacity: 0; }
  }

  /* Anotaciones: aparecen justo tras el escaneo de SU carta. */
  .lzi-factura .lzi-anota { opacity: 0; translate: 10px 0; }
  .lzi-factura--luz .lzi-anota { animation: lzi-anota-a 7s ease-out infinite; }
  .lzi-factura--gas .lzi-anota { animation: lzi-anota-b 7s ease-out infinite; }
  .lzi-factura .lzi-anota--2 { animation-delay: 0.3s; }
  .lzi-factura .lzi-anota--3 { animation-delay: 0.6s; }
  @keyframes lzi-anota-a {
    0%, 16% { opacity: 0; translate: 10px 0; }
    21%, 42% { opacity: 1; translate: 0 0; }
    48%, 100% { opacity: 0; translate: 10px 0; }
  }
  @keyframes lzi-anota-b {
    0%, 68% { opacity: 0; translate: 10px 0; }
    73%, 100% { opacity: 1; translate: 0 0; }
  }

  /* Sello de cabecera ("leída en 20 s" / "también la leemos"): pop rápido al
     terminar cada escaneo. */
  .lzi-factura__sello { scale: 1; }
  .lzi-factura--luz .lzi-factura__sello { animation: lzi-sello-a 7s var(--ease-gota) infinite; }
  .lzi-factura--gas .lzi-factura__sello { animation: lzi-sello-b 7s var(--ease-gota) infinite; }
  @keyframes lzi-sello-a {
    0%, 18% { opacity: 0; scale: 1.6; }
    22%, 42% { opacity: 1; scale: 1; }
    48%, 100% { opacity: 0; scale: 1.6; }
  }
  @keyframes lzi-sello-b {
    0%, 70% { opacity: 0; scale: 1.6; }
    74%, 100% { opacity: 1; scale: 1; }
  }

  /* REMATE por factura: el sello de MEJOR PRECIO se estampa en cuanto ESA
     factura termina de escanearse (luz ~17%, gas ~48%) — no espera a la otra. */
  .lzi-factura .lzi-sello-mejor { opacity: 0; }
  .lzi-factura--luz .lzi-sello-mejor { animation: lzi-mejor-a 7s var(--ease-gota) infinite; }
  .lzi-factura--gas .lzi-sello-mejor { animation: lzi-mejor-b 7s var(--ease-gota) infinite; }
  @keyframes lzi-mejor-a {
    0%, 28% { opacity: 0; scale: 1.8; rotate: 8deg; }
    33%, 44% { opacity: 1; scale: 1; rotate: -7deg; }
    50%, 100% { opacity: 0; scale: 1.8; rotate: 8deg; }
  }
  @keyframes lzi-mejor-b {
    0%, 84% { opacity: 0; scale: 1.8; rotate: 8deg; }
    89%, 100% { opacity: 1; scale: 1; rotate: -7deg; }
  }
  .lzi-factura--luz .lzi-mejor-chispas i { animation: lzi-mejor-chispa 7s var(--ease-salida-v2) infinite; }
  .lzi-mejor-chispas i:nth-child(1) { --dx: -2.6rem; --dy: -2rem; animation-delay: 0s; }
  .lzi-mejor-chispas i:nth-child(2) { --dx: 2.4rem; --dy: -2.4rem; }
  .lzi-mejor-chispas i:nth-child(3) { --dx: 3rem; --dy: 0.6rem; }
  .lzi-mejor-chispas i:nth-child(4) { --dx: -3rem; --dy: 0.8rem; }
  .lzi-mejor-chispas i:nth-child(5) { --dx: 1rem; --dy: -3.2rem; }
  .lzi-mejor-chispas i:nth-child(6) { --dx: -1.2rem; --dy: 2.4rem; }
  @keyframes lzi-mejor-chispa {
    0%, 31% { opacity: 0; translate: 0 0; scale: 0.4; }
    35% { opacity: 1; }
    48% { opacity: 0; translate: var(--dx) var(--dy); scale: 1; }
    100% { opacity: 0; }
  }
}

/* Sello de mejor precio: CUBRE POR COMPLETO la franja del total (de borde a
   borde de la factura), para que sustituya visualmente al importe antiguo. */
.lzi-sello-mejor {
  position: absolute;
  left: 1.1rem;
  right: 1.1rem;
  bottom: 1.15rem;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.5rem;
  line-height: 1;
  font-family: var(--fuente-marca);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--c-marino-950);
  background: var(--c-amarillo-400);
  padding: 0.65rem 0.7rem;
  border-radius: var(--radius-gota-s);
  rotate: -2.5deg;
  box-shadow: var(--sombra-3);
}
.lzi-sello-mejor small {
  font-size: 0.56rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.lzi-mejor-chispas { position: absolute; right: 2.4rem; bottom: 4.4rem; pointer-events: none; }
.lzi-mejor-chispas i {
  position: absolute;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px 999px 999px 2px;
  background: var(--c-amarillo-400);
  opacity: 0;
}
.lzi-mejor-chispas i:nth-child(2n) { background: var(--lg-blue-light); width: 0.35rem; height: 0.35rem; }
.lzi-factura__cab {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: var(--esp-4);
  margin-bottom: 1.4rem;
}
/* Título del documento: en tinta plena (el gris suave era poco legible
   sobre el papel a tamaño pequeño — petición 2026-08-09). */
.lzi-factura__doc {
  font-family: var(--fuente-marca);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--lz-tinta);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.lzi-factura__sello {
  font-family: var(--fuente-marca);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-marino-950);
  background: var(--c-amarillo-400);
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-vivo);
  rotate: -3deg;
}
.lzi-factura__linea {
  height: 0.5rem;
  border-radius: 999px;
  background: var(--lz-linea);
  margin-block: 0.6rem;
}
.lzi-factura__linea--ancha { width: 72%; height: 0.7rem; background: color-mix(in srgb, var(--lz-tinta) 18%, var(--lz-papel)); }
.lzi-factura__linea--corta { width: 45%; }

/* Cuerpo detallado: filas reales concepto ······ importe (como una factura). */
.lzi-factura__cuerpo { margin-top: 1.1rem; display: grid; gap: 0.55rem; }
.lzi-factura__fila {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  font-size: 0.78rem;
  line-height: 1.25;
}
.lzi-factura__concepto { display: grid; color: var(--lz-tinta); font-weight: 600; white-space: nowrap; }
.lzi-factura__concepto small { font-weight: 400; font-size: 0.85em; color: var(--lz-tinta-suave); }
.lzi-factura__puntos { flex: 1; border-bottom: 2px dotted color-mix(in srgb, var(--lz-tinta) 22%, transparent); translate: 0 -0.28em; min-width: 1rem; }
.lzi-factura__importe { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
/* Filas con hallazgo: subrayado de marcador azul bajo el concepto. */
.lzi-factura__fila--marca .lzi-factura__concepto {
  background: linear-gradient(transparent 62%, color-mix(in srgb, var(--lg-blue) 22%, transparent) 62%);
}
.lzi-factura__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 1.1rem;
  padding-top: 0.7rem;
  border-top: 2px solid var(--lz-tinta);
  font-family: var(--fuente-marca);
  font-weight: 700;
}
.lzi-factura__total strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }

/* Anotaciones del análisis: nota del asesor BAJO su fila, alineada a la
   derecha (nunca tapa el importe). */
.lzi-factura__fila { flex-wrap: wrap; }
.lzi-anota {
  flex-basis: 100%;
  justify-self: end;
  margin-left: auto;
  width: fit-content;
  max-width: 88%;
  font-size: 0.7rem;
  line-height: 1.25;
  font-weight: 600;
  color: var(--c-marino-700);
  background: color-mix(in srgb, var(--lg-blue) 9%, var(--lz-papel));
  border-left: 3px solid var(--lg-blue);
  padding: 0.28rem 0.5rem;
  border-radius: 0 var(--radius-vivo) var(--radius-vivo) 0;
  rotate: -0.8deg;
  margin-top: 0.15rem;
}
.lzi-anota--2 { rotate: 0.6deg; }
.lzi-anota--3 { rotate: -0.5deg; }

/* =================== HERO · VARIANTES POR TAMAÑO ===================
   El hero NO es un layout que se encoge: cada rango tiene su composición
   (petición directa). Escritorio (≥64rem) es el editorial de dos columnas
   con sangrado; tablet (48–64rem) compone dos columnas compactas; móvil
   (<48rem) es otro sistema — vertical, denso, con la animación simplificada. */

/* --- Tablet (48–64rem): dos columnas contenidas. Antes este rango apilaba
   texto + mazo gigante y el hero ocupaba dos pantallas. --- */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .lzi-hero { min-height: auto; }
  .lzi-hero__marco { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; }
  .lzi-escenario { max-width: 20rem; margin-inline: auto 0; }
  .lzi-factura { padding: 1.2rem 1.2rem 1.7rem; }
}

/* --- Móvil (<48rem): composición compacta. Sin sangrías editoriales en el
   título (a este ancho comían línea), mazo reducido que cabe entero. --- */
@media (max-width: 47.99rem) {
  .lzi-hero { min-height: auto; padding-block: calc(4rem + var(--esp-6)) var(--esp-8); }
  .lzi-hero__titulo span:nth-child(2),
  .lzi-hero__titulo span:nth-child(3) { margin-inline-start: 0; }
  .lzi-escenario { max-width: 18.5rem; margin-inline: auto; }
  .lzi-factura { padding: 1.1rem 1.1rem 1.6rem; }
  /* Versión COMPACTA de la carta (petición 2026-08-09: «animación más
     pequeña en móvil»): tipografías y respiraciones un punto por debajo.
     La altura ya es la real (la da la carta), así que nada se solapa. */
  .lzi-factura__cuerpo { gap: 0.4rem; margin-top: 0.8rem; }
  .lzi-factura__fila { font-size: 0.72rem; }
  .lzi-factura__cab { margin-bottom: 1rem; }
  .lzi-anota { max-width: 100%; font-size: 0.66rem; }
  .lzi-sello-mejor { font-size: 1.1rem; }
  /* La aurora con blur de 46px es cara en GPU móvil: menos radio, mismo look.
     El filtro vive en el ::before desde que la capa se partió (ver arriba):
     dejarlo aquí sobre el elemento lo aplicaría al que ANIMA y devolvería el
     re-desenfoque por fotograma que ese cambio quitó. */
  .lzi-hero__aurora::before { filter: blur(28px); }
}

/* --- Animación del mazo en móvil: OTRO gesto, no el de escritorio a presión.
   El ciclo de turnos (dos cartas intercambiándose + elevación del mazo) se
   apaga: en pantalla pequeña mareaba y costaba GPU. Queda la historia mínima
   en la carta de luz — láser, anotaciones, sello — en bucle más corto, y la
   de gas asomando detrás, estática. Sigue TODO tras la puerta de motion. --- */
@media (max-width: 47.99rem) and (prefers-reduced-motion: no-preference) {
  .lzi-mazo,
  .lzi-factura--luz,
  .lzi-factura--gas,
  .lzi-factura--gas .lzi-factura__laser,
  .lzi-factura--gas .lzi-anota,
  .lzi-factura--gas .lzi-factura__sello,
  .lzi-factura--gas .lzi-sello-mejor { animation: none; }
  .lzi-factura--luz .lzi-factura__laser,
  .lzi-factura--luz .lzi-anota,
  .lzi-factura--luz .lzi-factura__sello,
  .lzi-factura--luz .lzi-sello-mejor,
  .lzi-factura--luz .lzi-mejor-chispas i { animation-duration: 8s; }
}

/* =================== HERO · CICLO DE TRES ESCENAS ===================
   La figura rota facturas → subida multi-foto → contratación (publica.js
   pone data-escena="1|2|3" en .lzi-hero__figura). REGLAS DEL SISTEMA:
   - Sin JS o con reduced-motion NO hay data-escena: queda la escena 1
     (mazo) como siempre y las otras dos ni se ven. Los hitos se ven los
     tres por igual (son copy).
   - Mientras una escena nueva está delante, las animaciones del mazo se
     ponen a `animation: none`: al volver a la escena 1 arrancan de cero,
     con lo que cada vuelta ve el ciclo completo del escaneo. */

.lzi-escena {
  position: absolute;
  inset: 0;
  display: none; /* sin JS/motion no existen; el conmutador las enseña */
}

/* Tarjeta de escena: el mismo papel que una factura, ocupando la caja
   entera del escenario para que las tres escenas midan lo mismo. */
.lzi-tarjeta {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: var(--lz-papel);
  color: var(--lz-tinta);
  border-radius: var(--radius-gota);
  box-shadow: var(--sombra-4);
  padding: 1.5rem 1.5rem 1.75rem;
  overflow: clip;
  rotate: -1.2deg;
}
.lzi-escena--alta .lzi-tarjeta { rotate: 1.4deg; }


/* --- Escena 2: subida multi-foto --- */
.lzi-sub__zona {
  position: relative;
  flex: 1;
  display: grid;
  place-items: center;
  border: 2px dashed color-mix(in srgb, var(--lg-blue) 45%, transparent);
  border-radius: var(--radius-gota-s);
  margin-block: 0.4rem 1rem;
  overflow: clip;
}
.lzi-sub__pista {
  margin: 0;
  position: absolute;
  top: 1rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--lz-tinta-suave);
}
.lzi-sub__foto {
  position: absolute;
  width: 4.3rem;
  display: grid;
  gap: 0.25rem;
  padding: 0.3rem 0.3rem 0.4rem;
  background: var(--lz-papel);
  border-radius: var(--radius-vivo);
  box-shadow: var(--sombra-3);
}
.lzi-sub__foto-img {
  height: 4.6rem;
  border-radius: calc(var(--radius-vivo) - 2px);
  /* una "foto" de factura: papel con tres líneas insinuadas */
  background:
    linear-gradient(transparent 22%, color-mix(in srgb, var(--lz-tinta) 16%, transparent) 22%, color-mix(in srgb, var(--lz-tinta) 16%, transparent) 30%, transparent 30%,
      transparent 44%, color-mix(in srgb, var(--lz-tinta) 12%, transparent) 44%, color-mix(in srgb, var(--lz-tinta) 12%, transparent) 50%, transparent 50%,
      transparent 64%, color-mix(in srgb, var(--lz-tinta) 12%, transparent) 64%, color-mix(in srgb, var(--lz-tinta) 12%, transparent) 70%, transparent 70%),
    linear-gradient(160deg, color-mix(in srgb, var(--lg-blue) 14%, var(--lz-papel)), var(--lz-papel) 55%);
}
.lzi-sub__foto-pie {
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lz-tinta-suave);
  text-align: center;
}
/* Reposo (donde aterrizan): abanico de tres. */
.lzi-sub__foto--1 { translate: -74% 6%; rotate: -7deg; }
.lzi-sub__foto--2 { translate: 0 -4%; rotate: 2deg; z-index: 2; }
.lzi-sub__foto--3 { translate: 74% 8%; rotate: 8deg; }

/* Tic verde de cada hoja (esquina superior derecha de la foto). */
.lzi-sub__foto-check {
  position: absolute;
  top: -0.45rem;
  right: -0.45rem;
  width: 1.15rem;
  height: 1.15rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--c-exito);
  color: #fff;
  box-shadow: var(--sombra-2);
}
.lzi-sub__foto-check svg { width: 0.65rem; height: 0.65rem; }
/* La hoja 1 queda parcialmente bajo la 2: su tic va al lado libre. */
.lzi-sub__foto--1 .lzi-sub__foto-check { right: auto; left: -0.45rem; }

/* El VALE central: se estampa sobre el abanico al verificarse la subida. */
.lzi-sub__vale {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--fuente-marca);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--c-exito);
  background: var(--lz-papel);
  border: 2px solid var(--c-exito);
  border-radius: 999px;
  padding: 0.45rem 0.85rem;
  box-shadow: var(--sombra-3);
}
.lzi-sub__vale svg { width: 1.2rem; height: 1.2rem; flex: none; }

.lzi-sub__grupo {
  position: absolute;
  bottom: 0.8rem;
  font-family: var(--fuente-marca);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--c-marino-700);
  background: color-mix(in srgb, var(--lg-blue) 14%, var(--lz-papel));
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
}
.lzi-sub__barra {
  height: 0.5rem;
  border-radius: 999px;
  background: var(--lz-linea);
  overflow: clip;
}
.lzi-sub__progreso {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--lg-blue), var(--lg-blue-light));
  transform-origin: left center;
  scale: 0 1;
}
.lzi-sub__ok {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.8rem 0 0;
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--c-marino-700);
}
.lzi-sub__ok svg { width: 1.15rem; height: 1.15rem; flex: none; }

/* --- Escena 3: contratación --- */
.lzi-alta__lista { display: grid; gap: 0.7rem; margin-top: 0.2rem; }
.lzi-alta__fila { display: flex; align-items: center; gap: 0.55rem; font-size: 0.8rem; font-weight: 600; }
.lzi-alta__check {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--lg-blue) 55%, transparent);
  color: var(--c-marino-700);
}
.lzi-alta__check svg { width: 0.72rem; height: 0.72rem; }
.lzi-alta__firma {
  position: relative;
  flex: 1;
  min-height: 3.4rem;
  display: grid;
  align-content: end;
  margin-block: 0.6rem 0.9rem;
  color: var(--c-marino-700);
}
/* La firma a la IZQUIERDA: deja la derecha libre para que el tampón
   CONTRATADO caiga encima de su final y lo pise (petición 2026-08-09). */
.lzi-alta__firma svg { width: min(100%, 21rem); margin-inline: 0 auto; }
.lzi-alta__firma-linea { height: 2px; background: var(--lz-linea); border-radius: 999px; }
/* El remate: TAMPÓN cuadrado rojo "CONTRATADO", como el de una oficina
   (petición 2026-08-09). Tinta sobre el papel: borde doble, giro y
   multiply para que manche en vez de flotar. */
.lzi-alta__tampon {
  position: absolute;
  right: 1.1rem;
  bottom: 2.1rem;
  font-family: var(--fuente-marca);
  font-weight: 800;
  font-size: clamp(1.2rem, 0.9rem + 1vw, 1.6rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--c-error);
  border: 0.22rem solid var(--c-error);
  border-radius: 0.4rem;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c-error) 40%, transparent);
  padding: 0.45rem 0.75rem;
  rotate: -8deg;
  opacity: 0.92;
  mix-blend-mode: multiply;
}

/* --- Línea de estado bajo la figura (como el hilo de colaboradores) ---
   Una línea que se RELLENA hasta la escena activa, con los tres hitos
   numerados encima de sus paradas. Sin motion/JS: línea llena, hitos
   iguales (el relleno parcial vive en la puerta). */
.lzi-hitos-zona {
  display: grid;
  gap: 0.6rem;
  margin-top: var(--esp-5);
}
.lzi-hitos__linea {
  display: block;
  height: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--lg-blue) 30%, transparent);
  overflow: clip;
}
.lzi-hitos__linea span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--lg-blue), var(--lg-blue-light));
  transform-origin: left center;
}
/* Rejilla de 3 columnas iguales, NO flex con space-between: con textos más
   largos (inglés, euskera) el flex partía la fila y el tercer hito caía
   suelto debajo (bug multi-idioma 2026-08-10). Con `grid` los tres hitos
   caben siempre en su tercio y el texto se ajusta dentro. */
.lzi-hitos {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}
.lzi-hito {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-width: 0;
  text-align: center;
  font-size: clamp(0.66rem, 0.6rem + 0.2vw, 0.74rem);
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.2;
  color: var(--lg-text-muted);
  border: 1px solid var(--lg-border);
  border-radius: 999px;
  padding: 0.32rem 0.6rem;
  transition: color 0.5s ease, border-color 0.5s ease;
}
.lzi-hito__num { flex: none; }
.lzi-hito__num {
  font-family: var(--fuente-marca);
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--lg-blue-light);
}

/* --- Conmutación (solo con motion: es quien enseña las escenas 2 y 3) --- */
@media (prefers-reduced-motion: no-preference) {
  /* Relevo entre escenas FLUIDO: la que sale se desvanece y la que entra
     sube desde abajo con un fundido largo (0,7 s), solapados. */
  .lzi-escena {
    display: grid;
    opacity: 0;
    visibility: hidden;
    translate: 0 22px;
    scale: 0.985;
  }
  .lzi-mazo { transition: opacity 0.6s ease, translate 0.6s ease; }
  .lzi-escena {
    transition:
      opacity 0.7s var(--ease-salida-v2),
      translate 0.7s var(--ease-salida-v2),
      scale 0.7s var(--ease-salida-v2),
      visibility 0s 0.7s;
  }

  [data-escena="2"] .lzi-mazo,
  [data-escena="3"] .lzi-mazo { opacity: 0; translate: 0 -14px; }
  [data-escena="2"] .lzi-escena--subida,
  [data-escena="3"] .lzi-escena--alta {
    opacity: 1;
    visibility: visible;
    translate: 0 0;
    scale: 1;
    transition-delay: 0.2s, 0.2s, 0.2s, 0s;
  }

  /* La línea de estado se rellena hasta la parada de la escena activa. */
  .lzi-hitos__linea span {
    scale: 0.16 1;
    transition: scale 1s var(--ease-salida-v2);
  }
  [data-escena="2"] .lzi-hitos__linea span { scale: 0.55 1; }
  [data-escena="3"] .lzi-hitos__linea span { scale: 1 1; }

  /* El mazo se APAGA mientras no es su turno: al volver, todo su ciclo
     arranca de cero (por eso no hay que sincronizar relojes). */
  [data-escena="2"] :is(.lzi-mazo, .lzi-factura--luz, .lzi-factura--gas, .lzi-factura__laser, .lzi-anota, .lzi-factura__sello, .lzi-sello-mejor, .lzi-mejor-chispas i),
  [data-escena="3"] :is(.lzi-mazo, .lzi-factura--luz, .lzi-factura--gas, .lzi-factura__laser, .lzi-anota, .lzi-factura__sello, .lzi-sello-mejor, .lzi-mejor-chispas i) {
    animation: none;
  }

  /* Hito activo (por defecto, escena 1). */
  .lzi-hito--1 { color: var(--c-blanco); border-color: var(--lg-blue-light); }
  [data-escena] .lzi-hito--1 { color: var(--lg-text-muted); border-color: var(--lg-border); }
  [data-escena="1"] .lzi-hito--1,
  [data-escena="2"] .lzi-hito--2,
  [data-escena="3"] .lzi-hito--3 { color: #fff; border-color: var(--lg-blue-light); }

  /* ---- Coreografía escena 2 (≈6,5 s): tres hojas vuelan a la zona,
     se agrupan, la barra lee y remata el tic. Finitas, fill both:
     arrancan cada vez que data-escena="2" aparece. ---- */
  [data-escena="2"] .lzi-sub__foto--1 { animation: lzi-sub-foto-1 0.65s var(--ease-gota) 0.15s both; }
  [data-escena="2"] .lzi-sub__foto--2 { animation: lzi-sub-foto-2 0.65s var(--ease-gota) 0.5s both; }
  [data-escena="2"] .lzi-sub__foto--3 { animation: lzi-sub-foto-3 0.65s var(--ease-gota) 0.85s both; }
  @keyframes lzi-sub-foto-1 { from { translate: -160% 130%; rotate: -30deg; opacity: 0; } to { translate: -74% 6%; rotate: -7deg; opacity: 1; } }
  @keyframes lzi-sub-foto-2 { from { translate: 30% 150%; rotate: 18deg; opacity: 0; } to { translate: 0 -4%; rotate: 2deg; opacity: 1; } }
  @keyframes lzi-sub-foto-3 { from { translate: 170% 120%; rotate: 32deg; opacity: 0; } to { translate: 74% 8%; rotate: 8deg; opacity: 1; } }

  [data-escena="2"] .lzi-sub__grupo { animation: lzi-pop-suave 0.45s var(--ease-gota) 1.7s both; }
  [data-escena="2"] .lzi-sub__barra .lzi-sub__progreso { animation: lzi-sub-lee 1.3s var(--ease-salida-v2) 2s both; }
  @keyframes lzi-sub-lee { from { scale: 0 1; } to { scale: 1 1; } }

  /* GRAN FINAL SIMULTÁNEO (2026-08-09): en cuanto la barra llena (3,3 s),
     el vale verde salta al centro, cada hoja recibe su tic y la línea
     "leída como una sola factura" aparece — todo A LA VEZ, y el
     conmutador pasa a la firma sin esperas (4,9 s). */
  [data-escena="2"] .lzi-sub__vale { animation: lzi-pop-suave 0.45s var(--ease-gota) 3.35s both; }
  [data-escena="2"] .lzi-sub__foto-check { animation: lzi-pop-suave 0.35s var(--ease-gota) 3.35s both; }
  [data-escena="2"] .lzi-sub__foto--2 .lzi-sub__foto-check { animation-delay: 3.45s; }
  [data-escena="2"] .lzi-sub__foto--3 .lzi-sub__foto-check { animation-delay: 3.55s; }
  [data-escena="2"] .lzi-sub__ok { animation: lzi-pop-suave 0.45s var(--ease-gota) 3.35s both; }

  .lzi-sub__grupo, .lzi-sub__ok, .lzi-sub__vale, .lzi-sub__foto-check { opacity: 0; }
  @keyframes lzi-pop-suave {
    from { opacity: 0; scale: 0.7; }
    to { opacity: 1; scale: 1; }
  }

  /* ---- Coreografía escena 3 (≈7,5 s): checklist que se marca solo,
     firma que se dibuja, sello estampado. ---- */
  .lzi-alta__fila { opacity: 0; }
  [data-escena="3"] .lzi-alta__fila--1 { animation: lzi-alta-fila 0.45s var(--ease-salida-v2) 0.2s both; }
  [data-escena="3"] .lzi-alta__fila--2 { animation: lzi-alta-fila 0.45s var(--ease-salida-v2) 0.6s both; }
  [data-escena="3"] .lzi-alta__fila--3 { animation: lzi-alta-fila 0.45s var(--ease-salida-v2) 1s both; }
  [data-escena="3"] .lzi-alta__fila--4 { animation: lzi-alta-fila 0.45s var(--ease-salida-v2) 1.4s both; }
  @keyframes lzi-alta-fila { from { opacity: 0; translate: -12px 0; } to { opacity: 1; translate: 0 0; } }

  .lzi-alta__check svg { stroke-dasharray: 24; stroke-dashoffset: 24; }
  [data-escena="3"] .lzi-alta__fila--1 .lzi-alta__check svg { animation: lzi-alta-tic 0.4s ease-out 0.7s both; }
  [data-escena="3"] .lzi-alta__fila--2 .lzi-alta__check svg { animation: lzi-alta-tic 0.4s ease-out 1.1s both; }
  [data-escena="3"] .lzi-alta__fila--3 .lzi-alta__check svg { animation: lzi-alta-tic 0.4s ease-out 1.5s both; }
  [data-escena="3"] .lzi-alta__fila--4 .lzi-alta__check svg { animation: lzi-alta-tic 0.4s ease-out 1.9s both; }
  @keyframes lzi-alta-tic { to { stroke-dashoffset: 0; } }

  .lzi-alta__trazo { stroke-dasharray: 340; stroke-dashoffset: 340; }
  [data-escena="3"] .lzi-alta__trazo { animation: lzi-alta-firma 1.3s var(--ease-salida-v2) 2.4s both; }
  @keyframes lzi-alta-firma { to { stroke-dashoffset: 0; } }

  /* El tampón CONTRATADO cae con golpe seco al acabar el checklist+firma. */
  .lzi-alta__tampon { opacity: 0; }
  [data-escena="3"] .lzi-alta__tampon { animation: lzi-alta-tampon 0.45s var(--ease-gota) 3.9s both; }
  @keyframes lzi-alta-tampon {
    0%   { opacity: 0; scale: 2.3; rotate: 1deg; }
    55%  { opacity: 1; scale: 0.94; rotate: -8.5deg; }
    100% { opacity: 0.92; scale: 1; rotate: -8deg; }
  }
}

/* =================== BANDA DE DATOS =================== */

.lzi-datos__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--esp-6);
}
@media (min-width: 48rem) { .lzi-datos__lista { grid-template-columns: repeat(4, 1fr); gap: var(--esp-5); } }
.lzi-datos__lista > li {
  display: grid;
  gap: 0.4rem;
  align-content: start;
  border-top: 2px solid var(--lz-tinta);
  padding-top: var(--esp-4);
}
.lzi-datos__cifra { font-size: clamp(2.5rem, 5vw, 3.75rem); }
.lzi-datos__unidad { font-size: 0.45em; font-weight: 600; margin-left: 0.2rem; color: var(--lz-tinta-suave); }
.lzi-datos__texto { font-size: var(--texto-s); color: var(--lz-tinta-suave); max-width: 16rem; }

/* =================== EL MÉTODO (scrollytelling) =================== */

.lzi-metodo__cabecera { margin-bottom: var(--esp-8); }
.lzi-metodo__titulo { max-width: 22ch; }

.lzi-metodo__zona { display: grid; gap: var(--esp-6); }
@media (min-width: 64rem) {
  .lzi-metodo__zona { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--esp-10); }
}

/* Visual sticky (solo escritorio; en móvil el doc se muestra una vez arriba). */
.lzi-metodo__visual { display: none; }
@media (min-width: 64rem) {
  .lzi-metodo__visual {
    display: block;
    position: sticky;
    top: calc(4.5rem + 6vh);
    align-self: start;
  }
}

/* UNA sola factura que se va COMPLETANDO paso a paso (sin montón de hojas).
   El documento reacciona a cada paso con un gesto de la firma gota, y en el
   paso final celebra: glow cálido + chispas radiales alrededor de la cifra. */
.lzi-doc {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-blanco);
  border: 1px solid var(--lz-linea);
  border-radius: var(--radius-gota);
  box-shadow: var(--sombra-4);
  padding: 1.75rem;
  min-height: 26rem;
  transition: transform var(--dur-v2-3) var(--ease-salida-v2),
              box-shadow var(--dur-v2-3) var(--ease-salida-v2),
              border-color var(--dur-v2-3) ease;
  transition-timing-function: var(--ease-gota);
  transform: rotate(-1.1deg);
}
.lzi-doc__cuerpo-f { flex: 0 0 auto; }
/* Reacción a cada paso: se endereza, se inclina, y al final crece y brilla. */
[data-step="2"] .lzi-doc { transform: rotate(0deg); }
[data-step="3"] .lzi-doc { transform: rotate(0.9deg); }
[data-step="4"] .lzi-doc {
  transform: rotate(0deg) scale(1.03);
  border-color: color-mix(in srgb, var(--c-amarillo-400) 55%, var(--lz-linea));
  box-shadow: var(--sombra-4), 0 24px 70px rgba(255, 138, 30, 0.22);
}

.lzi-doc__titulo {
  font-family: var(--fuente-marca);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lz-tinta-suave);
}

/* Skeleton que se RELLENA (paso 2): cada fila tiene su barra <i> y su dato
   real <em>; al llegar el paso 2 la barra se apaga y el dato entra con un
   barrido de recorte, escalonado fila a fila. */
/* La factura DETALLADA del hero, reutilizada dentro del doc: filas
   concepto ····· importe que se RELLENAN en el paso 2 (la barra se apaga y el
   texto entra con un barrido de recorte, escalonado). */
.lzi-doc__cab { display: flex; align-items: center; gap: 0.55rem; }
.lzi-doc__cuerpo-f { display: grid; gap: 0.7rem; margin-top: 1.25rem; transition: opacity var(--dur-v2-3) var(--ease-salida-v2); }
.lzi-doc__fila { position: relative; display: flex; align-items: baseline; gap: 0.4rem; font-size: 0.82rem; line-height: 1.2; min-height: 1.05rem; }
.lzi-doc__f-bar {
  position: absolute;
  inset: 0.12rem 0 0.2rem 0;
  border-radius: 999px;
  background: var(--lz-linea);
  transition: opacity var(--dur-v2-3) var(--ease-salida-v2);
}
.lzi-doc__fila:nth-child(2) .lzi-doc__f-bar { width: 80%; }
.lzi-doc__fila:nth-child(4) .lzi-doc__f-bar { width: 62%; }
/* Los textos (todo menos la barra) entran con barrido, escalonados por fila. */
.lzi-doc__fila > :not(.lzi-doc__f-bar) {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition: opacity var(--dur-v2-2) ease,
              clip-path var(--dur-v2-3) var(--ease-salida-v2);
  transition-delay: calc(var(--fila, 0) * 110ms);
}
.lzi-doc__f-concepto { display: grid; font-weight: 600; color: var(--lz-tinta); white-space: nowrap; }
.lzi-doc__f-concepto small { font-weight: 400; font-size: 0.82em; color: var(--lz-tinta-suave); }
.lzi-doc__f-puntos { flex: 1; border-bottom: 2px dotted color-mix(in srgb, var(--lz-tinta) 20%, transparent); translate: 0 -0.28em; min-width: 0.75rem; }
.lzi-doc__f-importe { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; color: var(--lz-tinta); }
.lzi-doc__f-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 0.85rem;
  padding-top: 0.6rem;
  border-top: 2px solid var(--lz-tinta);
  font-family: var(--fuente-marca);
  font-weight: 700;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition: opacity var(--dur-v2-2) ease, clip-path var(--dur-v2-3) var(--ease-salida-v2);
  transition-delay: 0.6s;
}
.lzi-doc__f-total strong { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
/* Paso 2: se rellena (barras apagadas, textos + total visibles). */
[data-step="2"] .lzi-doc__f-bar,
[data-step="3"] .lzi-doc__f-bar,
[data-step="4"] .lzi-doc__f-bar { opacity: 0.14; }
[data-step="2"] .lzi-doc__fila > :not(.lzi-doc__f-bar),
[data-step="3"] .lzi-doc__fila > :not(.lzi-doc__f-bar),
[data-step="4"] .lzi-doc__fila > :not(.lzi-doc__f-bar),
[data-step="2"] .lzi-doc__f-total,
[data-step="3"] .lzi-doc__f-total,
[data-step="4"] .lzi-doc__f-total { opacity: 1; clip-path: inset(0 0 0 0); }
/* Paso 3-4: la factura cede el foco al overlay (compara/veredicto). */
[data-step="3"] .lzi-doc__cuerpo-f,
[data-step="4"] .lzi-doc__cuerpo-f { opacity: 0.4; }

/* Capas del relato (una por paso; data-step decide). */
/* Pie del doc: zona única al fondo con TRES capas superpuestas que se cruzan.
   Solo una es visible por paso → nunca hay texto sobre texto. */
.lzi-doc__pie {
  position: relative;
  margin-top: auto;
  padding-top: 0.85rem;
  min-height: 5.2rem;
}
.lzi-doc__pie-capa {
  position: absolute;
  inset: 0.85rem 0 0 0;
  opacity: 0;
  transition: opacity var(--dur-v2-3) var(--ease-salida-v2);
}
/* Cruce por paso: total (≤2) → comparación (3) → veredicto (4). */
[data-step="1"] .lzi-doc__pie-total,
[data-step="2"] .lzi-doc__pie-total { opacity: 1; }
[data-step="3"] .lzi-doc__compara { opacity: 1; }
[data-step="4"] .lzi-doc__veredicto { opacity: 1; }

.lzi-doc__pie-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 2px solid var(--lz-tinta);
  padding-top: 0.6rem;
  font-family: var(--fuente-marca);
  font-weight: 700;
}
.lzi-doc__pie-total strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }

.lzi-doc__compara { display: grid; gap: 0.7rem; align-content: center; }
.lzi-doc__barra {
  display: grid;
  gap: 0.3rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--lz-tinta-suave);
}
.lzi-doc__barra i {
  display: block;
  height: 1.5rem;
  border-radius: var(--radius-vivo);
  background: var(--lz-linea);
  width: 12%;
  transition: width 900ms var(--ease-salida-v2);
}
.lzi-doc__barra--a i { background: color-mix(in srgb, var(--lz-tinta) 22%, var(--lz-papel)); }
.lzi-doc__barra--b i { background: var(--lg-blue); transition-delay: 180ms; }
/* Las barras CRECEN al entrar el paso 3: la comparación se dibuja delante. */
[data-step="3"] .lzi-doc__barra--a i,
[data-step="4"] .lzi-doc__barra--a i { width: 100%; }
[data-step="3"] .lzi-doc__barra--b i,
[data-step="4"] .lzi-doc__barra--b i { width: 72%; }

/* Veredicto (paso 4): el total ACTUAL se tacha y la mejora cae debajo, con
   la insignia de ahorro. Estados finales visibles en estático; la animación
   (tachado → caída → pop) vive tras la puerta de motion, más abajo. */
.lzi-doc__veredicto { display: grid; gap: 0.35rem; align-content: center; }
.lzi-doc__vd-viejo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.85rem;
  color: var(--lz-tinta-suave);
}
.lzi-doc__vd-viejo strong { position: relative; font-weight: 600; font-variant-numeric: tabular-nums; }
.lzi-doc__vd-viejo strong::after {
  content: "";
  position: absolute;
  left: -2px; right: -2px;
  top: 54%;
  height: 2px;
  background: var(--c-error, #b3261e);
  transform-origin: left;
  transform: scaleX(1);
}
.lzi-doc__vd-nuevo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--fuente-marca);
  font-weight: 700;
  color: var(--lz-tinta);
}
.lzi-doc__vd-nuevo strong { font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.lzi-doc__vd-nuevo small { font-size: 0.5em; font-weight: 600; color: var(--lz-tinta-suave); }
.lzi-doc__vd-ahorro {
  justify-self: start;
  margin-top: 0.15rem;
  background: var(--c-amarillo-400);
  color: var(--c-marino-950);
  font-family: var(--fuente-marca);
  font-weight: 700;
  font-size: 0.82rem;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-vivo);
}
/* El FINAL ALEGRE (paso 4): el total ACTUAL se TACHA, la mejora CAE debajo y
   salta la insignia de ahorro con una ráfaga de chispas. Secuencia limpia (una
   cosa tras otra, sin solaparse); con reduced-motion, resultado quieto. */
@media (prefers-reduced-motion: no-preference) {
  /* 1. El tachado del total actual se dibuja de izquierda a derecha. */
  [data-step="4"] .lzi-doc__vd-viejo strong::after {
    transform: scaleX(0);
    animation: lzi-tacha 460ms var(--ease-salida-v2) forwards 150ms;
  }
  /* 2. La mejora CAE en su sitio, justo después del tachado. */
  [data-step="4"] .lzi-doc__vd-nuevo {
    opacity: 0;
    translate: 0 -10px;
    animation: lzi-cae 560ms var(--ease-gota) forwards 560ms;
  }
  /* 3. La insignia de ahorro salta al final. */
  [data-step="4"] .lzi-doc__vd-ahorro {
    opacity: 0;
    scale: 0.55;
    animation: lzi-pop 480ms var(--ease-gota) forwards 980ms;
  }
  @keyframes lzi-tacha { to { transform: scaleX(1); } }
  @keyframes lzi-cae { to { opacity: 1; translate: 0 0; } }
  @keyframes lzi-pop { to { opacity: 1; scale: 1; } }
  /* Chispas: 8 partículas radiales (ámbar y azul) que estallan desde la cifra. */
  .lzi-doc__chispas { position: absolute; inset: auto 1.75rem 5.5rem; height: 0; pointer-events: none; opacity: 0; }
  [data-step="4"] .lzi-doc__chispas { opacity: 1; }
  .lzi-doc__chispas i {
    position: absolute;
    left: 3.2rem; top: 0;
    width: 0.5rem; height: 0.5rem;
    border-radius: 999px 999px 999px 2px;
    background: var(--c-amarillo-400);
    opacity: 0;
  }
  .lzi-doc__chispas i:nth-child(2n) { background: var(--lg-blue-light); width: 0.38rem; height: 0.38rem; }
  [data-step="4"] .lzi-doc__chispas i { animation: lzi-chispa 850ms var(--ease-salida-v2) both; }
  [data-step="4"] .lzi-doc__chispas i:nth-child(1) { --dx: -3.4rem; --dy: -2.6rem; animation-delay: 300ms; }
  [data-step="4"] .lzi-doc__chispas i:nth-child(2) { --dx: 2.6rem; --dy: -3.2rem; animation-delay: 340ms; }
  [data-step="4"] .lzi-doc__chispas i:nth-child(3) { --dx: 4.4rem; --dy: -1.2rem; animation-delay: 380ms; }
  [data-step="4"] .lzi-doc__chispas i:nth-child(4) { --dx: -4.6rem; --dy: 0.4rem; animation-delay: 320ms; }
  [data-step="4"] .lzi-doc__chispas i:nth-child(5) { --dx: 3.6rem; --dy: 1.8rem; animation-delay: 420ms; }
  [data-step="4"] .lzi-doc__chispas i:nth-child(6) { --dx: -2.8rem; --dy: 2.4rem; animation-delay: 400ms; }
  [data-step="4"] .lzi-doc__chispas i:nth-child(7) { --dx: 1.2rem; --dy: -4.4rem; animation-delay: 360ms; }
  [data-step="4"] .lzi-doc__chispas i:nth-child(8) { --dx: -1.6rem; --dy: -3.8rem; animation-delay: 440ms; }
  @keyframes lzi-chispa {
    0% { opacity: 0; translate: 0 0; scale: 0.4; }
    18% { opacity: 1; }
    100% { opacity: 0; translate: var(--dx) var(--dy); scale: 1; }
  }
}

/* Barrido de lectura (solo visible en el paso 2). */
.lzi-doc__laser {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--lg-blue-light), transparent);
  opacity: 0;
}

/* Estado por paso: el paso 2 rellena la factura (arriba); el 3 y el 4
   traen el overlay de comparación y veredicto. */
[data-step="3"] .lzi-doc__compara,
[data-step="4"] .lzi-doc__veredicto { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: no-preference) {
  [data-step="2"] .lzi-doc__laser { opacity: 1; animation: lzi-escanea 2.2s ease-in-out infinite; }
  @keyframes lzi-escanea {
    0% { top: 8%; }
    50% { top: 88%; }
    100% { top: 8%; }
  }
}

/* Pasos de texto: aire generoso para que el sticky respire. */
.lzi-metodo__pasos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--esp-8);
}
@media (min-width: 64rem) {
  .lzi-metodo__pasos { gap: 0; }
  .lzi-paso { min-height: 72vh; display: grid; align-content: center; }
}
.lzi-paso {
  border-left: 2px solid var(--lz-linea);
  padding-left: clamp(1.25rem, 3vw, 2.25rem);
  transition: border-color var(--dur-v2-2) ease;
}
.lzi-paso.is-activo { border-color: var(--c-amarillo-500); }
.lzi-paso__num {
  font-family: var(--fuente-marca);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--c-amarillo-500);
  font-variant-numeric: tabular-nums;
}
.lzi-paso h3 { margin-block: 0.4rem 0.7rem; }

/* --- Remate del paso 4 (Te decimos la verdad): empujón vivo + CTA --- */
.lzi-paso__remate {
  display: grid;
  justify-items: start;
  gap: 0.5rem;
  margin-top: var(--esp-4);
}
.lzi-paso__vivo {
  font-family: var(--fuente-marca);
  font-weight: 600;
  font-size: var(--texto-s);
  color: var(--lz-tinta-suave);
}

/* El foco del final del recorrido va al titular (lectores de pantalla saben
   dónde acabó), pero SIN aro: el recuadro azul alrededor de «Te decimos la
   verdad» quedaba feo (petición directa 2026-08-15) y el brillo por palabras
   de abajo ya dice «has llegado». `tabindex="-1"`: no es alcanzable con Tab,
   así que quitarle el aro no le roba el foco visible a ningún teclado. */
.lzi-verdad:focus { outline: none; }

@media (prefers-reduced-motion: no-preference) {
  /* "Te decimos la verdad" entra palabra a palabra: solo aire y tiempo,
     sin marcadores ni subrayados — nada mancha la letra (2026-08-09). */
  .lzi-verdad__palabra { display: inline-block; opacity: 0; translate: 0 0.35em; filter: blur(3px); }
  [data-step="4"] .lzi-verdad__palabra {
    animation:
      lzi-verdad-palabra 0.55s var(--ease-salida-v2) calc(0.15s + var(--vp) * 0.14s) both,
      /* El BRILLO (2026-08-15, del dueño): tras posarse, cada palabra se
         enciende UNA vez en su color — Te amarillo, decimos naranja, la verdad
         verde — y vuelve a la tinta. Un ciclo y listo, minimalista. Los bordes
         de la keyframe no declaran `color`, así que interpola desde/hacia la
         tinta real sin fijar nada. */
      lzi-verdad-brillo 0.85s ease-in-out calc(1.35s + var(--vp) * 0.22s) 1;
  }
  @keyframes lzi-verdad-palabra {
    /* `from` EXPLÍCITO: la entrada arranca oculta aunque el estado en REPOSO ya
       sea visible (`[data-verdad-vista]`, ver abajo). Sin él, el `from` implícito
       tomaría el valor en reposo (visible) y la primera aparición no se vería
       animarse palabra a palabra. */
    from { opacity: 0; translate: 0 0.35em; filter: blur(3px); }
    to { opacity: 1; translate: 0 0; filter: blur(0); }
  }
  .lzi-verdad__palabra:nth-child(1) { --brillo: var(--c-amarillo-400); }
  .lzi-verdad__palabra:nth-child(2) { --brillo: var(--c-amarillo-500); }
  .lzi-verdad__palabra:nth-child(n + 3) { --brillo: var(--c-exito); }
  @keyframes lzi-verdad-brillo {
    45% {
      color: var(--brillo, var(--c-amarillo-400));
      text-shadow: 0 0 20px color-mix(in srgb, var(--brillo, var(--c-amarillo-400)) 45%, transparent);
    }
  }

  /* El remate aparece al llegar; el texto vivo respira en bucle. */
  .lzi-paso__remate { opacity: 0; translate: 0 10px; }
  [data-step="4"] .lzi-paso__remate { animation: lzi-remate-entra 0.6s var(--ease-gota) 0.5s both; }
  @keyframes lzi-remate-entra { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
  [data-step="4"] .lzi-paso__vivo { animation: lzi-vivo-late 2.4s ease-in-out 1.1s infinite; }
  @keyframes lzi-vivo-late {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -3px; }
  }

  /* FIX «desaparece el texto y el botón» (paso 04 «Te decimos la verdad»,
     reportado 2026-08-28). El reveal de las palabras y del remate estaba gateado
     SOLO en `[data-step="4"]`, que el JS del scrollytelling cambia según qué paso
     cruza el 55 % de la pantalla. Al subir un poco, el paso 3 volvía a cruzar el
     umbral → `data-step="3"` → estos elementos volvían a `opacity:0` y se
     quedaban EN BLANCO, sin recuperarse (el IntersectionObserver solo dispara al
     CRUZAR el umbral, no mientras el paso ya está dentro).
     Solución: en cuanto se alcanza el paso 4, el JS marca la zona
     `data-verdad-vista` (permanente, nunca se quita) y aquí fijamos el estado en
     reposo VISIBLE, independiente de `data-step`. La animación de entrada sigue
     disparándose la primera vez porque sus keyframes declaran `from` explícito. */
  [data-verdad-vista] .lzi-verdad__palabra { opacity: 1; translate: 0 0; filter: blur(0); }
  [data-verdad-vista] .lzi-paso__remate { opacity: 1; translate: 0 0; }
}

/* =================== QUÉ MIRAMOS (navy) =================== */

.lzi-mirada__titulo { max-width: 20ch; margin-bottom: var(--esp-8); }
.lzi-mirada__fila { display: grid; gap: 0.5rem; }
@media (min-width: 48rem) {
  .lzi-mirada__fila {
    grid-template-columns: 3.5rem minmax(0, 4fr) minmax(0, 6fr);
    gap: var(--esp-5);
    align-items: baseline;
  }
}
.lzi-mirada__num {
  font-family: var(--fuente-marca);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--c-amarillo-400);
  font-variant-numeric: tabular-nums;
}
.lzi-mirada__termino {
  font-family: var(--fuente-marca);
  font-weight: 600;
  font-size: var(--texto-xl);
  letter-spacing: -0.015em;
  margin: 0;
}
.lzi-mirada__texto { margin: 0; color: var(--c-texto-inverso-suave); max-width: 38rem; }
.lzi-mirada__lista > li { padding-block: 1.5rem; }

/* =================== 05 · COLABORADORES (papel) ===================
   Retícula editorial: intro a la izquierda (con el CTA ámbar como único
   acento) y los tres pasos a la derecha, reusando lz-lista-regla. Ámbar
   reservado al botón; los números de paso van en tinta marino. */
/* Composición CENTRADA de un solo eje: intro (etiqueta + título + texto +
   acciones) centrada, la escena viva EN EL MEDIO ABSOLUTO y la franja de pasos
   cerrando el rectángulo. Nada de columna coja a los lados: todo al centro. */
.lzi-colabora { gap: var(--esp-8); justify-items: center; text-align: center; }
.lzi-colabora__intro { max-width: 62ch; }
.lzi-colabora__titulo { max-width: 24ch; margin-inline: auto; margin-bottom: var(--esp-5); }
.lzi-colabora__texto { max-width: 56ch; margin-inline: auto; color: var(--c-marino-700); }
.lzi-colabora__acciones {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 1rem var(--esp-6); margin-top: var(--esp-6);
}
/* EL CIRCUITO DEL REFERIDO: una sola pieza viva (escena SVG + pasos) que
   llena la columna derecha. Bucle de 10s en tres actos — código emite →
   pulso viaja → factura se escanea y se sella (−€) → pulso ámbar vuelve →
   la gota late (+€) — con los tres pasos de abajo iluminándose en secuencia
   sincronizada (0-33-66%). Sin motion: escena completa y quieta (pulsos y
   láser ocultos: son ornamentos), sello visible, pasos plenos. */
.lzi-colabora__vivo {
  justify-self: stretch; /* la pieza viva ocupa TODO el ancho de contenido */
  width: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  align-content: center;
  gap: var(--esp-5);
  border-block: 1px solid var(--c-borde, #d8d3c8);
  padding-block: var(--esp-6);
  /* Profundidad de fondo: un halo radial de marino apenas perceptible detrás
     de la escena (plano, sin blur) que la asienta sobre el papel. */
  background: radial-gradient(60% 55% at 50% 42%,
    color-mix(in srgb, var(--c-marino-950) 5%, transparent), transparent 72%);
}
/* MEDIA ESCALA y centrada: la escena ocupa ~la mitad del ancho de antes,
   centrada en su columna; la tipografía interna del SVG sube de cuerpo para
   seguir leyéndose nítida a este tamaño. */
.lzi-circuito {
  width: min(100%, 26rem);
  height: auto;
  margin-inline: auto;
  color: var(--c-marino-800);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}
.lzi-circuito__linea { opacity: 0.3; }
.lzi-circuito__txt {
  fill: var(--c-marino-700);
  stroke: none;
  font-family: var(--fuente-marca);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.lzi-circuito__cifra {
  fill: var(--lg-orange, #f59e0b);
  stroke: none;
  font-family: var(--fuente-marca);
  font-size: 21px;
  font-weight: 700;
}
.cir-sello circle { stroke: var(--lg-orange, #f59e0b); }
.cir-meta__moneda { stroke: var(--c-marino-800); fill: color-mix(in srgb, var(--lz-papel) 60%, transparent); }
/* Suelo: horizonte finísimo + sombras planas bajo cada nodo (profundidad). */
.cir-suelo path { opacity: 0.18; }
.cir-suelo ellipse { fill: color-mix(in srgb, var(--c-marino-950) 10%, transparent); stroke: none; }
/* Ornamentos del bucle: ocultos en reposo (solo cobran vida con motion). */
.lzi-circuito__pulso, .cir-laser, .cir-codigo__anillo { opacity: 0; }
.cir-laser { fill: var(--lg-blue); stroke: none; }
.cir-codigo__anillo { stroke: var(--lg-blue); stroke-width: 1.5; }
.lzi-circuito__pulso { stroke-dasharray: 14 86; stroke-width: 2.5; }
.lzi-circuito__pulso--ida { stroke: var(--lg-blue); }
.lzi-circuito__pulso--vuelta { stroke: var(--lg-orange, #f59e0b); }

/* Los tres pasos, en franja horizontal que cierra el rectángulo. */
.lzi-colabora__pasos {
  display: grid;
  gap: var(--esp-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 30rem) { .lzi-colabora__pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Cada paso reserva sitio para la regla ámbar que barre bajo su número al
   entrar en turno; el ::after existe siempre pero invisible (scaleX 0). */
.lzi-colabora__paso { position: relative; padding-bottom: 0.35rem; }
.lzi-colabora__paso::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.1rem;
  width: 2.4rem;
  height: 2px;
  border-radius: 2px;
  background: var(--lg-orange, #f59e0b);
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
}
.lzi-colabora__num {
  display: inline-block;
  transform-origin: center;
  font-family: var(--fuente-marca);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--c-marino-800);
  font-variant-numeric: tabular-nums;
}
.lzi-colabora__paso-t {
  font-family: var(--fuente-marca);
  font-weight: 600;
  font-size: var(--texto-l);
  letter-spacing: -0.015em;
  margin: 0.15rem 0 0;
}
.lzi-colabora__paso-d { margin: 0.25rem 0 0; color: var(--c-marino-700); font-size: var(--texto-s); }

@media (prefers-reduced-motion: no-preference) {
  /* ACTO 1 (0-33%): el chip emite un anillo y el pulso azul viaja al doc. */
  .cir-codigo__anillo { animation: cir-anillo 10s var(--ease-salida-v2) infinite; }
  @keyframes cir-anillo {
    0%, 2% { opacity: 0; transform: scale(0.96); transform-origin: 77px 121px; }
    6% { opacity: 0.9; }
    16%, 100% { opacity: 0; transform: scale(1.12); transform-origin: 77px 121px; }
  }
  .lzi-circuito__pulso--ida { animation: cir-pulso-ida 10s linear infinite; }
  @keyframes cir-pulso-ida {
    0%, 8% { stroke-dashoffset: 100; opacity: 0; }
    10% { opacity: 1; }
    30% { stroke-dashoffset: 0; opacity: 1; }
    33%, 100% { stroke-dashoffset: 0; opacity: 0; }
  }
  /* ACTO 2 (33-60%): láser barre la factura y el sello −€ estampa. */
  .cir-laser { animation: cir-laser 10s ease-in-out infinite; }
  @keyframes cir-laser {
    0%, 32% { opacity: 0; transform: translateY(0); }
    35% { opacity: 0.85; }
    52% { opacity: 0.85; transform: translateY(140px); }
    56%, 100% { opacity: 0; transform: translateY(140px); }
  }
  .cir-sello {
    transform-box: fill-box;
    transform-origin: center;
    animation: cir-sello 10s var(--ease-gota) infinite;
  }
  @keyframes cir-sello {
    0%, 52% { opacity: 0; transform: scale(0.2) rotate(-14deg); }
    58%, 92% { opacity: 1; transform: scale(1) rotate(-6deg); }
    97%, 100% { opacity: 0; transform: scale(0.2) rotate(-14deg); }
  }
  /* ACTO 3 (60-90%): el pulso ámbar vuelve y la gota late con +€. */
  .lzi-circuito__pulso--vuelta { animation: cir-pulso-vuelta 10s linear infinite; }
  @keyframes cir-pulso-vuelta {
    0%, 58% { stroke-dashoffset: 100; opacity: 0; }
    60% { opacity: 1; }
    78% { stroke-dashoffset: 0; opacity: 1; }
    81%, 100% { stroke-dashoffset: 0; opacity: 0; }
  }
  .cir-meta__moneda {
    transform-box: fill-box;
    transform-origin: center;
    animation: cir-moneda 10s var(--ease-gota) infinite;
  }
  @keyframes cir-moneda {
    0%, 76% { transform: scale(1); }
    82% { transform: scale(1.16); }
    88%, 100% { transform: scale(1); }
  }
  .cir-meta__mas { animation: cir-mas 10s var(--ease-salida-v2) infinite; }
  @keyframes cir-mas {
    0%, 76% { opacity: 0; transform: translateY(6px); }
    82%, 94% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(0); }
  }
  /* Los pasos se iluminan por tercios, en sincronía con los actos. Cuando le
     toca a un paso, su TEXTO cobra vida DE VERDAD: el bloque pasa de atenuado a
     pleno, el número salta a ámbar y crece, una regla ámbar barre bajo él y el
     título se levanta un pelín. Los tres comparten keyframes; el desfase (0 /
     3,33 / 6,66 s) los pone en su turno. */
  .lzi-colabora__paso { animation: cir-paso 10s ease-in-out infinite; }
  .lzi-colabora__num { animation: cir-num-vivo 10s ease-in-out infinite; }
  .lzi-colabora__paso-t { animation: cir-t-vivo 10s ease-in-out infinite; }
  .lzi-colabora__paso::after { animation: cir-rail 10s ease-in-out infinite; }

  .lzi-colabora__paso--2,
  .lzi-colabora__paso--2 .lzi-colabora__num,
  .lzi-colabora__paso--2 .lzi-colabora__paso-t,
  .lzi-colabora__paso--2::after { animation-delay: 3.33s; }
  .lzi-colabora__paso--3,
  .lzi-colabora__paso--3 .lzi-colabora__num,
  .lzi-colabora__paso--3 .lzi-colabora__paso-t,
  .lzi-colabora__paso--3::after { animation-delay: 6.66s; }

  @keyframes cir-paso {
    0%, 30% { opacity: 1; }
    40%, 92% { opacity: 0.4; }
    100% { opacity: 1; }
  }
  @keyframes cir-num-vivo {
    0% { color: var(--c-marino-800); transform: scale(1); }
    8%, 26% { color: var(--lg-orange, #f59e0b); transform: scale(1.32); }
    40%, 100% { color: var(--c-marino-800); transform: scale(1); }
  }
  @keyframes cir-t-vivo {
    0% { transform: translateY(0); }
    8%, 26% { transform: translateY(-2px); }
    40%, 100% { transform: translateY(0); }
  }
  @keyframes cir-rail {
    0%, 4% { transform: translateX(-50%) scaleX(0); }
    12%, 26% { transform: translateX(-50%) scaleX(1); }
    38%, 100% { transform: translateX(-50%) scaleX(0); }
  }
}

/* =================== FAQ =================== */

.lzi-faq__marco { display: grid; gap: var(--esp-6); }
@media (min-width: 64rem) {
  .lzi-faq__marco { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--esp-10); }
  .lzi-faq__intro { position: sticky; top: calc(4.5rem + 2rem); align-self: start; }
}

/* =================== CIERRE (máquina de escribir con profundidad) ===============
   Sobre papel-2, diferenciado del pie navy. Ya NO es un titular gigante: tres
   frases MÁS PEQUEÑAS que se TECLEAN una tras otra sobre un plano en perspectiva
   (steps() sobre clip-path + cursor que viaja + reveal 3D de cada línea), y al
   terminar afloran el botón y el microcopy.
   Contrato de accesibilidad: SIN la puerta de motion (reduced-motion o sin JS),
   todo el texto se ve completo y quieto, con el botón visible; el estado oculto
   vive SIEMPRE dentro de @media no-preference + html.js. */
/* EL MOMENTO AZUL. Identidad propia del cierre: el AZUL DE LA GOTA (--lg-blue),
   que no es ni el papel de arriba ni el navy del pie — es el único bloque azul
   de toda la portada, así que cierra con voz propia y el corte con el footer
   navy se lee como decisión, no como hueco. Radial de luz arriba-derecha +
   caída hacia azul profundo abajo (profundidad), grano de marca encima y las
   gotas en tres planos (tinta navy, papel, azul claro). */
.lzi-cierre {
  position: relative;
  overflow: clip;
  /* OJO: nada de tokens inexistentes aquí (un var() roto en el clamp dejó esto
     a 0 y el texto pegado a los bordes). Aire generoso arriba/abajo + altura
     mínima con el contenido CENTRADO en vertical: el bloque se asienta. */
  padding-block: clamp(5rem, 6rem + 4vw, 9rem);
  min-height: min(58vh, 34rem);
  align-content: center;
  background:
    radial-gradient(120% 90% at 82% 8%, color-mix(in srgb, var(--lg-blue-light) 34%, transparent), transparent 58%),
    linear-gradient(152deg, var(--lg-blue) 8%, color-mix(in srgb, var(--lg-blue) 66%, var(--lg-navy)) 100%);
  color: var(--c-texto-inverso);
}
.lzi-cierre::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: url("/static/img/noise.svg");
  background-size: 240px;
  mix-blend-mode: soft-light;
  opacity: 0.09;
  pointer-events: none;
}
.lzi-cierre__centro {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: start;
  gap: var(--esp-4);
  max-width: 36rem; /* la columna de texto tiene medida; la derecha respira con las gotas */
}
.lzi-cierre .lzi-cierre__sub { color: var(--c-texto-inverso-suave); }
.lzi-cierre .lz-compromiso { color: color-mix(in srgb, var(--lz-papel) 72%, transparent); }
.lzi-cierre .lz-boton:focus-visible { outline-color: var(--c-foco-inverso, var(--lz-papel)); }

/* El titular deja de ser display-1: tipografía de marca, contenida. */
.lzi-cierre__titulo { margin: 0 0 var(--esp-2); }
.lzi-cierre__lineas {
  display: grid;
  justify-items: start;
  gap: 0.15em;
  /* Perspectiva del plano: las frases se levantan desde el fondo. */
  perspective: 1100px;
  perspective-origin: 20% 50%;
}
.lzi-cierre__linea {
  position: relative;
  display: block;
  font-family: var(--fuente-marca);
  font-weight: 600;
  font-size: clamp(1.35rem, 1.02rem + 1.7vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--c-texto-inverso-suave); /* navy: paper suave */
  transform-style: preserve-3d;
}
/* Sangrías editoriales: cada frase entra un poco más adentro (no centrado). */
.lzi-cierre__linea:nth-child(2) { margin-inline-start: clamp(0.75rem, 4vw, 3rem); }
.lzi-cierre__linea:nth-child(3) { margin-inline-start: clamp(0.25rem, 2vw, 1.5rem); }
/* La respuesta ("Nosotros sabemos leerla."), la punchline: TINTA NAVY sobre el
   azul de la gota — se lee como lo escrito con la pluma de la marca. El resto
   de líneas, en papel (ámbar RESERVADO al CTA). */
.lzi-cierre__tinta--azul { color: var(--lg-navy); }

/* El cursor de tecleo: barra fina que viaja por la línea. Invisible por defecto
   (solo cobra vida dentro de la puerta de motion). */
.lzi-cierre__caret {
  position: absolute;
  left: 0;
  top: 0.1em;
  bottom: 0.16em;
  width: 0.08em;
  margin-left: -0.03em;
  border-radius: 2px;
  background: var(--lz-papel); /* sobre el azul, el cursor es de papel */
  opacity: 0;
  pointer-events: none;
}

.lzi-cierre__sub { margin-top: var(--esp-2); }
.lzi-cierre__cta { margin-top: var(--esp-4); font-size: 1.2rem; padding: 1.1rem 2rem; }
.lzi-cierre__compromiso { margin-top: var(--esp-1); }

/* --- Movimiento: SOLO con motion permitido Y JavaScript (html.js).
   El estado oculto (texto recortado, cursor y CTA a 0) se aplica desde el
   primer paint gracias a html.js (boot.js), así no hay flash; las animaciones
   arrancan cuando publica.js marca .is-tecleando al entrar en viewport. --- */
@media (prefers-reduced-motion: no-preference) {
  /* Estado base oculto (pre-tecleo): cada frase en una sola línea, recortada. */
  html.js .lzi-cierre__lineas { transform-style: preserve-3d; }
  html.js .lzi-cierre__linea { width: max-content; max-width: 100%; opacity: 0; }
  html.js .lzi-cierre__tinta {
    display: inline-block;
    white-space: nowrap;
    clip-path: inset(0 100% 0 0); /* aún sin escribir */
  }

  html.js .lzi-cierre__sub,
  html.js .lzi-cierre__cta,
  html.js .lzi-cierre__compromiso { opacity: 0; translate: 0 10px; }

  /* Disparo (en viewport): cada frase se levanta en 3D mientras se teclea. */
  html.js .lzi-cierre.is-tecleando .lzi-cierre__linea {
    animation: lzi-cierre-plano var(--d, 1s) var(--ease-gota) var(--delay, 0s) both;
  }
  /* Tecleo: los steps() usan var(--n); van en longhand para que, si un motor no
     sustituyera la var dentro de steps(), solo se degrade el timing (a un barrido
     suave) sin perder animation-name — el texto SIEMPRE acaba visible. */
  html.js .lzi-cierre.is-tecleando .lzi-cierre__tinta {
    animation-name: lzi-cierre-teclea;
    animation-duration: var(--d, 1s);
    animation-delay: var(--delay, 0s);
    animation-timing-function: steps(var(--n, 20), end);
    animation-fill-mode: forwards;
  }
  /* Cursor: viaja con el recorte. En las dos primeras se apaga al terminar; en
     la última (--fin) se queda parpadeando como prompt. */
  html.js .lzi-cierre.is-tecleando .lzi-cierre__caret {
    animation-name: lzi-cierre-cursor-off;
    animation-duration: var(--d, 1s);
    animation-delay: var(--delay, 0s);
    animation-timing-function: steps(var(--n, 20), end);
    animation-fill-mode: forwards;
  }
  html.js .lzi-cierre.is-tecleando .lzi-cierre__linea--fin .lzi-cierre__caret {
    animation-name: lzi-cierre-cursor, lzi-cierre-parpadeo;
    animation-duration: var(--d, 1s), 1s;
    animation-delay: var(--delay, 0s), calc(var(--delay, 0s) + var(--d, 1s));
    animation-timing-function: steps(var(--n, 20), end), steps(1, end);
    animation-iteration-count: 1, infinite;
    animation-fill-mode: forwards, none;
  }
  /* Remate: al acabar el tecleo (--fin-cierre) afloran sub, CTA y microcopy. */
  html.js .lzi-cierre.is-tecleando .lzi-cierre__sub {
    animation: lzi-cierre-aflora 0.6s var(--ease-gota) var(--fin-cierre, 4.6s) forwards;
  }
  html.js .lzi-cierre.is-tecleando .lzi-cierre__cta {
    animation: lzi-cierre-aflora 0.6s var(--ease-gota) calc(var(--fin-cierre, 4.6s) + 0.16s) forwards;
  }
  html.js .lzi-cierre.is-tecleando .lzi-cierre__compromiso {
    animation: lzi-cierre-aflora 0.6s var(--ease-gota) calc(var(--fin-cierre, 4.6s) + 0.32s) forwards;
  }

  @keyframes lzi-cierre-plano {
    from { opacity: 0; transform: translateZ(-70px) rotateX(9deg); }
    60%  { opacity: 1; }
    to   { opacity: 1; transform: translateZ(0) rotateX(0); }
  }
  @keyframes lzi-cierre-teclea { to { clip-path: inset(0 0 0 0); } }
  /* Cursor de líneas intermedias: recorre y se desvanece al final. */
  @keyframes lzi-cierre-cursor-off {
    0%   { left: 0; opacity: 1; }
    88%  { opacity: 1; }
    100% { left: 100%; opacity: 0; }
  }
  /* Cursor de la última línea: recorre y se queda encendido. */
  @keyframes lzi-cierre-cursor {
    from { left: 0; opacity: 1; }
    to   { left: 100%; opacity: 1; }
  }
  @keyframes lzi-cierre-parpadeo {
    0%, 49%   { opacity: 1; }
    50%, 100% { opacity: 0; }
  }
  @keyframes lzi-cierre-aflora {
    to { opacity: 1; translate: 0 0; }
  }
}