/* ============================================================
   luzgasia — chrome.css (v2 "Editorial del dato")
   Header + footer nuevos + view transitions MPA. Se carga en TODA
   la web (base.html): estiliza SOLO clases lz-* nuevas, así que no
   toca funnel/área/panel salvo el marco (header/footer).
   Las clases viejas .cabecera/.pie de base.css quedan muertas.
   ============================================================ */

/* ---------- View Transitions cross-document (MPA) ----------
   Solo CSS y solo si el usuario no pide reduced-motion. Firefox
   navega normal (degradación perfecta). El header persiste entre
   páginas; el resto hace un crossfade corto por defecto. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .lz-top { view-transition-name: lz-top; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 0.28s; }
}

/* =================== CABECERA =================== */

.lz-top {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--capa-cabecera);
  transition: background-color var(--dur-v2-2) var(--ease-salida-v2),
              box-shadow var(--dur-v2-2) var(--ease-salida-v2);
}

.lz-top__marco {
  max-width: min(100rem, 100% - 2.5rem);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-5);
  min-height: 4.5rem;
}

/* Modo por defecto: tinta sobre papel (páginas claras). */
.lz-top { color: var(--lz-tinta); }
.lz-top a { color: inherit; text-decoration: none; }

/* Sobre el hero navy (landing) el header nace transparente en claro. */
.lz-top--inverso { color: var(--c-texto-inverso); }

/* Al scrollear (publica.js observa un sentinel) se vuelve papel sólido.
   ⚠️ SIN `backdrop-filter`, y es una decisión MEDIDA (2026-08-27), no un olvido.
   El header fijo difuminaba lo que pasaba por debajo (blur 10px). Quieto no
   cuesta nada (el resultado se cachea), pero en un scroll a lo bruto lo de
   debajo cambia ENTERO en cada fotograma y hay que re-difuminarlo cada vez.
   Medido con el gesto real (spam de rueda nada más cargar, CPU 4x, mediana
   de 8 recargas limpias): peor fotograma 58 ms CON blur / 26 ms SIN él —
   crudos 54-78 ms frente a 24-30. Era exactamente el tirón que el dueño
   describía como «el header al scrollear rápido».
   A cambio, el papel sube del 92 % al 97 %: por la rendija del 3 % el
   contenido pasa nítido en vez de difuminado, que a 64 px de alto no se
   aprecia. Si algún día se recupera el blur, hay que volver a medir ESTE
   gesto, no un scroll suave: en suave el blur parece gratis. */
.lz-top.is-fija {
  color: var(--lz-tinta);
  background: color-mix(in srgb, var(--lz-papel) 97%, transparent);
  box-shadow: 0 1px 0 var(--lz-linea);
}

/* Logo (wordmark + isotipo). El "ia" en ámbar es de las POCAS apariciones
   permitidas del acento (dirección A). */
.lz-top__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--fuente-marca);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
}
.lz-top__logo img { width: 34px; height: 34px; display: block; }
.lz-top__ia { color: var(--c-amarillo-500); }

/* Navegación de escritorio: etiquetas small-caps con ÍNDICE numérico
   (gesto editorial; nada de píldoras ni subrayado viajero). */
.lz-top__nav { display: none; }
@media (min-width: 64rem) {
  .lz-top__nav {
    display: flex;
    align-items: center;
    gap: clamp(1.1rem, 2.5vw, 2.4rem);
  }
  .lz-top__enlace {
    font-family: var(--fuente-marca);
    font-size: var(--fs-etiqueta);
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    padding-block: 0.35rem;
    position: relative;
  }
  .lz-top__num {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--c-amarillo-500);
    font-variant-numeric: tabular-nums;
  }
  /* Subrayado que se dibuja desde la esquina viva (izq), con la firma gota. */
  .lz-top__enlace::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-v2-2) var(--ease-salida-v2);
    transition-timing-function: var(--ease-gota);
  }
  .lz-top__enlace:hover::after,
  .lz-top__enlace:focus-visible::after,
  .lz-top__enlace[aria-current="page"]::after { transform: scaleX(1); }
}

/* CTA del header: bloque con la esquina viva de la gota. Ámbar = solo CTA. */
.lz-top__cta {
  display: none;
  position: relative;
  overflow: hidden;      /* recorta el haz de escaneo; el outline de foco se pinta fuera y no se recorta */
  isolation: isolate;    /* el 'screen' del haz se mezcla SOLO dentro del CTA */
  font-family: var(--fuente-marca);
  font-weight: 600;
  font-size: 0.95rem;
  background: var(--c-amarillo-500);
  color: var(--c-marino-950) !important;
  padding: 0.62rem 1.15rem;
  border-radius: var(--radius-gota-s);
  transition: transform var(--dur-v2-1) var(--ease-gota),
              border-radius var(--dur-v2-2) var(--ease-salida-v2);
}
.lz-top__cta:hover,
.lz-top__cta:focus-visible {
  border-radius: var(--radius-vivo);
  transform: translateY(-1px);
  background-color: color-mix(in srgb, var(--c-amarillo-500) 90%, var(--lg-white));
}
/* Barrido de ESCANEO del CTA "Analizar mi factura" (mismo gesto que el CTA del
   hero, ver publica.css): un único haz de luz cálida cruza en HOVER/focus-visible,
   como el láser que lee la factura. Sin motion → solo cambia el fondo. */
@media (prefers-reduced-motion: no-preference) {
  .lz-top__cta::before {
    content: "";
    position: absolute;
    top: -30%;
    bottom: -30%;
    left: 0;
    width: 42%;
    z-index: 2;                 /* el haz pasa por encima del texto: lo "escanea" */
    pointer-events: none;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.08) 34%,
      rgba(255, 255, 255, 0.72) 50%,
      rgba(255, 255, 255, 0.08) 66%,
      transparent 100%);
    mix-blend-mode: screen;
    transform: skewX(-16deg);
    translate: -140% 0;         /* estado oculto DENTRO de la puerta */
    transition: translate 0s;
  }
  .lz-top__cta:hover::before,
  .lz-top__cta:focus-visible::before {
    translate: 360% 0;                           /* un solo barrido, izquierda → derecha */
    transition: translate 0.8s var(--ease-gota);
  }
}
@media (min-width: 64rem) { .lz-top__cta { display: inline-block; } }

.lz-top a:focus-visible {
  outline: 2px solid var(--c-foco);
  outline-offset: 3px;
  border-radius: var(--radius-vivo);
}
.lz-top--inverso:not(.is-fija) a:focus-visible { outline-color: var(--c-foco-inverso); }

/* Botón de menú (móvil): dos rayas que se cruzan en X. */
.lz-top__menu {
  display: inline-grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  border: 0; background: none; color: inherit; cursor: pointer;
  border-radius: var(--radius-vivo);
}
.lz-top__menu:focus-visible { outline: 2px solid var(--c-foco); outline-offset: 2px; }
.lz-top__menu span {
  grid-area: 1 / 1;
  width: 1.4rem; height: 2px;
  background: currentColor;
  transition: transform var(--dur-v2-2) var(--ease-gota);
}
.lz-top__menu span:first-child { transform: translateY(-4px); }
.lz-top__menu span:last-child { transform: translateY(4px); }
.lz-top__menu[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.lz-top__menu[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }
@media (min-width: 64rem) { .lz-top__menu { display: none; } }

/* Menú móvil: telón navy a pantalla completa con enlaces a escala póster. */
.lz-velo {
  position: fixed;
  inset: 0;
  z-index: calc(var(--capa-cabecera) - 1);
  background: var(--c-marino-950);
  color: var(--c-texto-inverso);
  display: grid;
  align-content: center;
  padding: 6rem clamp(1.25rem, 6vw, 3rem) 3rem;
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--dur-v2-2) var(--ease-salida-v2),
              visibility 0s linear var(--dur-v2-2);
}
.lz-velo.is-abierto {
  visibility: visible;
  opacity: 1;
  transition: opacity var(--dur-v2-2) var(--ease-salida-v2);
}
.lz-velo__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.lz-velo__enlace {
  font-family: var(--fuente-marca);
  font-size: clamp(2rem, 9vw, 3.4rem);
  font-weight: 600;
  letter-spacing: var(--track-display);
  line-height: 1.12;
  color: var(--c-texto-inverso);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.8rem;
}
.lz-velo__enlace .lz-top__num { font-size: 0.9rem; }
.lz-velo__enlace[aria-current="page"],
.lz-velo__enlace:hover,
.lz-velo__enlace:focus-visible { color: var(--c-amarillo-400); }
.lz-velo__cta {
  margin-top: var(--esp-6);
  justify-self: start;
  font-family: var(--fuente-marca);
  font-weight: 600;
  font-size: 1.15rem;
  background: var(--c-amarillo-500);
  color: var(--c-marino-950);
  text-decoration: none;
  padding: 0.9rem 1.5rem;
  border-radius: var(--radius-gota-s);
}
@media (prefers-reduced-motion: no-preference) {
  .lz-velo.is-abierto .lz-velo__lista > li {
    animation: lz-velo-sube var(--dur-v2-3) var(--ease-salida-v2) backwards;
  }
  .lz-velo.is-abierto .lz-velo__lista > li:nth-child(2) { animation-delay: 60ms; }
  .lz-velo.is-abierto .lz-velo__lista > li:nth-child(3) { animation-delay: 120ms; }
  .lz-velo.is-abierto .lz-velo__lista > li:nth-child(4) { animation-delay: 180ms; }
  .lz-velo.is-abierto .lz-velo__lista > li:nth-child(5) { animation-delay: 240ms; }
  @keyframes lz-velo-sube {
    from { opacity: 0; translate: 0 18px; }
    to { opacity: 1; translate: 0 0; }
  }
}
/* Con el velo abierto, el body no scrollea (clase que pone publica.js). */
.lz-sin-scroll { overflow: hidden; }

/* El main de las páginas claras deja hueco al header fijo; las que abren con
   hero navy full-bleed (landing) lo compensan en su propio hero. */
.lz-deja-cabecera { padding-top: 4.5rem; }

/* =================== PIE =================== */

.lz-pie {
  position: relative;
  /* Tres planos: glow que nace tras la identidad, campo de energia tenue y
     grano. El pie deja de ser una losa plana. */
  background:
    radial-gradient(52rem 24rem at 14% 18%, var(--c-marino-800), transparent 66%),
    radial-gradient(38rem 20rem at 88% 96%, color-mix(in srgb, var(--c-marino-800) 60%, var(--c-marino-950)), transparent 70%),
    var(--c-marino-950);
  color: var(--c-texto-inverso);
  overflow: clip;
}
/* LA LINEA DE ENERGIA: el borde superior es un gradiente azul->ambar de 2px.
   Es el detalle de personalidad del pie — y un borde de verdad: el pie empieza
   donde lo marca su linea, no donde se acaba el fondo de la seccion anterior. */
.lz-pie::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent, var(--lg-blue) 22%, var(--c-amarillo-500) 50%,
    var(--lg-blue) 78%, transparent);
  opacity: 0.85;
}
.lz-pie::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/static/img/noise.svg");
  background-size: 240px;
  mix-blend-mode: soft-light;
  opacity: 0.07;
  pointer-events: none;
}
.lz-pie__marco {
  position: relative;
  z-index: 1;
  max-width: min(100rem, 100% - 2.5rem);
  margin-inline: auto;
  padding-block: var(--esp-8) 0; /* --esp-7 no existe en tokens: era invalido y dejaba el pie sin aire arriba */
}

/* --- Banda 1 · tira de proveedores (marquesina) -------------------------
   Sustituye al claim + correo (peticion directa 2026-08-07): los logos de
   las comercializadoras con las que se compara, en placas claras (los
   wordmarks son oscuros y sobre el navy no se leerian), desfilando en bucle.
   El truco del -50% exige DOS filas identicas (la copia va aria-hidden). */
/* La banda queda ACORAZADA entre la linea de energia del borde superior y el
   filete divisor: el mismo aire simetrico por arriba (padding del marco) y
   por abajo, con la tira centrada. */
.lz-pie__identidad {
  display: grid;
  align-content: center;
  padding-bottom: var(--esp-8);
  border-bottom: 1px solid var(--lg-border);
}
/* ⚠️ LA MASCARA SE QUEDA, PERO LA ANIMACION DE DENTRO **NO PUEDE CORRER SIEMPRE**.
   Medido el 2026-08-26 con la CPU 6x frenada, barriendo el 70→100 % de la landing:

     mascara + animacion perpetua ..... peor cuadro 73 ms   <- el tiron que se notaba
     quitando SOLO la mascara ......... peor cuadro 29 ms
     quitando SOLO la animacion ....... peor cuadro 24 ms

   Una mascara sobre un subarbol que anima saca esa capa del camino rapido del
   compositor: cada fotograma se repinta en el hilo principal, y seguia costando
   aunque el pie ni estuviera en pantalla.
   El desvanecido NO se puede hacer con un degradado opaco encima porque el pie
   NO tiene fondo plano (lleva radial-gradients): una capa solida dejaria banda.
   Asi que la mascara se queda y lo que se corta es la animacion cuando no se ve
   (ver `.lz-tira-viva` mas abajo). No la conviertas en overlay sin mirar el fondo. */
.lz-pie__tira {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
/* En MOVIL/TABLET la mascara se QUITA (el logo entra y sale con corte seco).
   Reporte de Angel (2026-08-26): la marquesina «se queda vacia» SOLO en su
   dispositivo — irreproducible en Chromium y WebKit incluso con CPU x26 y
   red lenta (geometria y bucle correctos, cobertura 100% en 30/30 muestras).
   El unico mecanismo que cuadra es el de la nota de arriba: mascara sobre
   subarbol animado = repintado en el hilo principal en CADA fotograma, sobre
   una capa de ~5.800px de ancho (multiplicada por el dpr 3 de un movil real)
   — inanicion de rasterizado que un headless de escritorio no reproduce.
   Sin mascara el transform vuelve al compositor puro y esa familia entera de
   blancos y tirones desaparece de raiz. En una ventana de 390px el fundido
   eran ~31px de adorno: se cambian por el movimiento estable. El escritorio
   (aprobado) conserva su fundido tal cual. */
@media (max-width: 48rem) {
  .lz-pie__tira {
    mask-image: none;
    -webkit-mask-image: none;
  }
}
.lz-pie__tira-ventana { display: flex; width: max-content; }
.lz-pie__tira-fila {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  list-style: none;
  margin: 0;
  padding: 0 clamp(1.5rem, 4vw, 3rem) 0 0;
}
.lz-pie__tira-fila li {
  display: grid;
  place-items: center;
  background: var(--lz-papel, #fff);
  border-radius: 0.8rem;
  padding: 0.5rem 1.15rem;
}
.lz-pie__tira-fila img { display: block; height: 2.1rem; width: auto; }
@media (prefers-reduced-motion: no-preference) {
  .lz-pie__tira-ventana {
    animation: lz-pie-tira 60s linear infinite;   /* mas lento a peticion (2026-08-07) */
    /* PAUSADA de salida. La reanuda `chrome.js` cuando el pie entra en pantalla.
       Sin esto, una animacion infinita corre TODA la vida de la pagina aunque
       nadie la vea — y su coste se paga justo cuando bajas rapido hacia ella.
       El estado inicial es `paused` a proposito y NO al reves: si el JS no
       llega a ejecutarse (error, navegador viejo), lo que se pierde es el
       movimiento de un adorno, no la legibilidad de los logos. */
    animation-play-state: paused;
    /* `will-change` SOLO mientras se mueve: mantener la promesa de capa cuando
       esta parada obliga al navegador a conservar una textura que no usa. */
  }
  .lz-pie__tira-ventana.lz-tira-viva {
    animation-play-state: running;
    will-change: transform;
  }
  @keyframes lz-pie-tira { to { transform: translateX(-50%); } }
}
/* La duracion era FIJA (60s) y los keyframes en % recorren una fila que
   ENCOGE en movil (gaps/padding con clamp 4vw): 2922px/60s = 48,7 px/s en
   390 frente a 3282px/60s = 54,7 px/s en 1366 — un 11% MAS LENTA justo donde
   la pantalla es mas estrecha. 53s iguala los px/s del escritorio, que es el
   ritmo que el dueño aprobo mirando escritorio («mas lento a peticion»,
   2026-08-07); acelerarla MAS que eso es decision suya, no de este arreglo.
   Tocar solo la duracion no altera la costura del bucle (verificado: depende
   unicamente de que las dos filas sean identicas). */
@media (prefers-reduced-motion: no-preference) and (max-width: 40rem) {
  .lz-pie__tira-ventana { animation-duration: 53s; }
}
.lz-pie__lockup { display: flex; align-items: center; gap: 0.7rem; }
.lz-pie__lockup img { display: block; }
/* Sello de cierre de la columna "Siguenos": el lockup, MAS grande que cuando
   abria el pie, debajo de los iconos de redes (peticion directa 2026-08-07). */
.lz-pie__lockup--sello { margin-top: var(--esp-5); }
.lz-pie__lockup--sello .lz-pie__wordmark { font-size: 2.1rem; }

/* --- Wordmark ELECTRIFICADO (header + pie), v2 (peticion directa) --------
   publica.js pone .is-vivo (header: al cargar; pie: al entrar en vision, y
   lo quita al salir para que repita). Secuencia, cada silaba brilla primero
   y salta a la siguiente:
     1) "luz" BRILLA en AMARILLO y todo el wordmark chispea electrico.
     2) "gas" brilla NARANJA y un humo recorre la palabra de inicio a fin.
     3) "ia" entra como INTERFERENCIA (glitch) y queda un instante en VERDE
        electrico mientras unas pistas de placa base se dibujan hacia fuera.
   TODO contenido al tamaño del wordmark (humo y pistas viven dentro del
   span, escalados en em). Sin motion: nada se anima y los overlays no
   existen. */
.lzk-marca { position: relative; display: inline-block; }
/* Las LETRAS por delante de cualquier decorado (los circuitos van detrás):
   z-index explícito para que ningún stacking context intermedio lo cambie. */
.lzk { position: relative; display: inline-block; z-index: 1; }
.lzk-humo, .lzk-pistas { display: none; }

@media (prefers-reduced-motion: no-preference) {
  /* Fase 1 · luz (amarillo) + chispazo de TODO el logo. Tras la secuencia,
     cada sílaba queda EN BUCLE brillando por turnos (amarillo → naranja →
     verde, ciclo de 6 s) mientras siga a la vista: al salir del viewport
     publica.js quita .is-vivo y a la vuelta la secuencia entera se repite
     (petición directa 2026-08-07). */
  .is-vivo .lzk-luz {
    animation: lzk-luz-brilla 1.15s ease-in-out 0.05s both,
               lzk-lazo-luz 6s ease-in-out 4.5s infinite;
  }
  .lzk-marca.is-vivo { animation: lzk-marca-chispea 1.15s steps(2, jump-none) 0.05s both; }

  /* Fase 2 · gas (naranja) + humo que cruza la palabra entera */
  .is-vivo .lzk-gas {
    animation: lzk-gas-brilla 1.2s ease-in-out 1.3s both,
               lzk-lazo-gas 6s ease-in-out 4.5s infinite;
  }
  .lzk-humo {
    display: block;
    position: absolute;
    top: 12%;
    left: 0;
    width: 1em;
    height: 0.6em;
    border-radius: 999px;
    background: radial-gradient(closest-side, rgb(255 138 30 / 0.55), transparent 72%);
    filter: blur(3px);
    opacity: 0;
    pointer-events: none;
  }
  .is-vivo .lzk-humo { animation: lzk-humo-cruza 1.35s ease-in-out 1.35s both; }

  /* Fase 3 · "ia": interferencia y verde electrico + CIRCUITOS que brotan de
     la palabra ENTERA hacia fuera (lineas con codos de placa base, no rectas
     centradas), dibujandose con dashoffset y muriendo en su punto de
     soldadura. Contenidos a ~0.8em alrededor del wordmark. */
  .is-vivo .lzk-ia {
    animation: lzk-ia-glitch 1.5s steps(1, end) 2.7s both,
               lzk-lazo-ia 6s ease-in-out 4.5s infinite;
  }
  /* Centrado GEOMETRICO sobre la palabra y DETRAS de las letras (z-index -1
     sobre el relative del span): el nucleo es el punto medio del wordmark. */
  .lzk-pistas {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100% + 1.6em);
    height: calc(100% + 1.4em);
    transform: translate(-50%, -50%);
    z-index: -1;
    color: #2fd36a;
    opacity: 0;
    pointer-events: none;
  }
  .lzk-pistas path { stroke-dasharray: 60; stroke-dashoffset: 60; }
  .is-vivo .lzk-pistas { animation: lzk-pistas-luce 1.6s ease-out 2.75s both; }
  .is-vivo .lzk-pistas path { animation: lzk-pistas-traza 1.15s ease-out 2.75s both; }

  @keyframes lzk-luz-brilla {
    0%, 100% { color: inherit; text-shadow: none; }
    22%      { color: var(--c-amarillo-400); text-shadow: 0 0 16px rgb(255 201 60 / 0.65); }
    38%      { color: inherit; text-shadow: none; }
    55%      { color: var(--c-amarillo-400); text-shadow: 0 0 12px rgb(255 201 60 / 0.45); }
    80%      { color: var(--c-amarillo-400); }
  }
  @keyframes lzk-marca-chispea {
    0%, 100% { filter: none; }
    30%      { filter: brightness(1.35) drop-shadow(0 0 10px rgb(255 201 60 / 0.35)); }
    46%      { filter: none; }
    62%      { filter: brightness(1.2) drop-shadow(0 0 7px rgb(255 201 60 / 0.25)); }
  }
  @keyframes lzk-gas-brilla {
    0%, 100% { color: inherit; text-shadow: none; }
    28%      { color: #ff8a1e; text-shadow: 0 0 14px rgb(255 138 30 / 0.55); }
    75%      { color: #ff8a1e; text-shadow: 0 0 8px rgb(255 138 30 / 0.35); }
  }
  @keyframes lzk-humo-cruza {
    0%   { opacity: 0; left: 0; translate: 0 -0.05em; }
    14%  { opacity: 0.95; }
    85%  { opacity: 0.8; }
    100% { opacity: 0; left: 100%; translate: -100% -0.25em; }
  }
  @keyframes lzk-ia-glitch {
    0%   { transform: translate(0, 0); color: inherit; clip-path: none; }
    6%   { transform: translate(-0.06em, 0.03em); color: #2fd36a; clip-path: inset(0 0 52% 0); }
    12%  { transform: translate(0.06em, -0.03em); color: inherit; clip-path: inset(46% 0 0 0); }
    18%  { transform: translate(-0.04em, 0); color: #2fd36a; clip-path: inset(18% 0 32% 0); }
    24%  { transform: translate(0.03em, 0.02em); color: inherit; clip-path: inset(0 0 60% 0); }
    30%  { transform: translate(0, 0); color: #2fd36a; clip-path: none;
           text-shadow: 0 0 14px rgb(47 211 106 / 0.6); }
    82%  { transform: translate(0, 0); color: #2fd36a; clip-path: none;
           text-shadow: 0 0 10px rgb(47 211 106 / 0.45); }
    /* Aterriza en el ámbar de marca del "ia" (no en inherit): el acento del
       wordmark no puede desaparecer entre la intro y el bucle. */
    100% { transform: translate(0, 0); color: var(--c-amarillo-500); clip-path: none; text-shadow: none; }
  }
  @keyframes lzk-pistas-luce {
    0%   { opacity: 0; }
    14%  { opacity: 1; }
    78%  { opacity: 1; }
    100% { opacity: 0; }
  }
  @keyframes lzk-pistas-traza {
    from { stroke-dashoffset: 60; }
    to   { stroke-dashoffset: 0; }
  }

  /* --- El bucle de reposo: cada sílaba brilla en su turno (6 s) --- */
  @keyframes lzk-lazo-luz {
    0%, 30%, 100% { color: inherit; text-shadow: none; }
    13%           { color: var(--c-amarillo-400); text-shadow: 0 0 12px rgb(255 201 60 / 0.55); }
  }
  @keyframes lzk-lazo-gas {
    0%, 32%, 66%, 100% { color: inherit; text-shadow: none; }
    47%                { color: #ff8a1e; text-shadow: 0 0 12px rgb(255 138 30 / 0.5); }
  }
  /* El "ia" descansa en su ámbar de marca (no en inherit: perdería el acento
     del wordmark entre pulso y pulso). */
  @keyframes lzk-lazo-ia {
    0%, 64%, 100% { color: var(--c-amarillo-500); text-shadow: none; }
    80%           { color: #2fd36a; text-shadow: 0 0 12px rgb(47 211 106 / 0.5); }
  }
}
.lz-pie__wordmark {
  font-family: var(--fuente-marca);
  font-weight: 700;
  font-size: 1.75rem;
  letter-spacing: -0.045em;
  color: var(--c-texto-inverso);
}
.lz-pie__wordmark .lz-top__ia { color: var(--c-amarillo-500); }
/* (claim + correo retirados de la banda 1 el 2026-08-07; el correo sigue en
   Contacto y en los legales.) */
.lz-pie__claim-v4 {
  margin: 0;
  font-family: var(--fuente-display);
  font-size: 1.05rem;
  color: var(--c-texto-inverso-suave);
  max-width: 30rem;
}
.lz-pie__correo { font-size: var(--texto-s); color: var(--lg-text-muted); text-decoration: none; }
.lz-pie__correo:hover, .lz-pie__correo:focus-visible { color: var(--c-amarillo-400); }

/* --- Banda 2 · mapa ----------------------------------------------------- */
.lz-pie__mapa {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-6) var(--esp-5);
  padding-block: var(--esp-6);
  border-bottom: 1px solid var(--lg-border);
}
@media (min-width: 48rem) {
  .lz-pie__mapa { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.lz-pie__titulo {
  margin: 0 0 var(--esp-3);
  font-size: var(--texto-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-amarillo-400);
}
.lz-pie__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.lz-pie__lista a {
  color: var(--c-texto-inverso-suave);
  text-decoration: none;
  font-size: var(--texto-s);
  line-height: 1.5;
}
.lz-pie__lista a:hover,
.lz-pie__lista a:focus-visible { color: var(--c-amarillo-400); }
.lz-pie__lista a:focus-visible { outline: 2px solid var(--c-foco-inverso); outline-offset: 2px; border-radius: var(--radius-vivo); }

.lz-pie__redes { display: flex; gap: var(--esp-3); }
.lz-pie__red {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid var(--lg-border);
  border-radius: 50%;
  color: var(--c-texto-inverso-suave);
  transition: color .18s, border-color .18s, transform .18s;
}
.lz-pie__red svg { width: 1.2rem; height: 1.2rem; }
.lz-pie__red:hover,
.lz-pie__red:focus-visible { color: var(--c-amarillo-400); border-color: var(--c-amarillo-400); transform: translateY(-2px); }
.lz-pie__red:focus-visible { outline: 2px solid var(--c-foco-inverso); outline-offset: 2px; }

/* --- Banda 3 · cierre --------------------------------------------------- */
.lz-pie__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2) var(--esp-5);
  align-items: baseline;
  justify-content: space-between;
  padding-block: var(--esp-4);
  font-size: var(--texto-xs);
  color: var(--lg-text-muted);
}

/* =========================================================================
   Selector de idioma de CABECERA (2026-08-10): <details> nativo con el
   código actual (ES/EN/…) y un desplegable de papel. Sin JS obligatorio;
   publica.js solo lo cierra al pinchar fuera. Hereda el color del header
   (funciona en modo inverso sobre navy y en modo papel).
   ========================================================================= */
.lz-idioma { position: relative; }
.lz-idioma__actual {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--fuente-marca);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  padding: 0.38rem 0.7rem;
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  border-radius: 999px;
  color: inherit;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.lz-idioma__actual::-webkit-details-marker { display: none; }
.lz-idioma__actual svg { width: 0.95rem; height: 0.95rem; }
.lz-idioma__actual:hover,
.lz-idioma[open] .lz-idioma__actual { border-color: currentColor; }
.lz-idioma__lista {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  z-index: 60;
  min-width: 10rem;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  display: grid;
  gap: 2px;
  background: var(--lz-papel);
  color: var(--lz-tinta);
  border-radius: 0.8rem;
  box-shadow: var(--sombra-3);
  border: 1px solid var(--lz-linea);
}
.lz-idioma__opcion {
  display: block;
  padding: 0.45rem 0.7rem;
  border-radius: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--lz-tinta);
  text-decoration: none;
}
.lz-idioma__opcion:hover { background: var(--c-marino-50); }
.lz-idioma__opcion.es-activo { background: var(--c-marino-50); font-weight: 800; }

/* Idiomas en el velo móvil: chips claros sobre navy. */
.lz-velo__idiomas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: var(--esp-5);
}
.lz-velo__idioma {
  font-size: 0.74rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  text-decoration: none;
}
.lz-velo__idioma.es-activo { color: #fff; border-color: var(--lg-blue-light); }

/* Selector de idioma del pie (2026-08-10): chips discretos, el activo con
   borde vivo. Enlaces normales — sin JS. */
.lz-pie__idiomas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding-top: var(--esp-4);
  border-top: 1px solid var(--lg-border);
}
.lz-pie__idioma {
  font-size: var(--texto-xs);
  font-weight: 600;
  color: var(--lg-text-muted);
  border: 1px solid var(--lg-border);
  border-radius: 999px;
  padding: 0.22rem 0.65rem;
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.lz-pie__idioma:hover { color: #fff; }
.lz-pie__idioma.es-activo { color: #fff; border-color: var(--lg-blue-light); }

/* =========================================================================
   Aviso de cookies (art. 22.2 LSSI)
   Aceptar y rechazar con el MISMO peso visual: un rechazo de segunda clase
   invalida el consentimiento. No bloquea la página (no es un muro).
   ========================================================================= */
.lz-cookies {
  position: fixed;
  /* `sticky` PISA al `fixed` de arriba y el aviso RESERVA su hueco al final
     del documento. Medido (2026-08-28, 390x844 y 360x800): fijado tapaba
     PERMANENTEMENTE el cierre del pie — «Condiciones del servicio» y los seis
     chips de idioma caian bajo la banda (244-267px de alto) y, como la pagina
     termina ahi, ningun scroll los sacaba: inalcanzables hasta decidir
     cookies (la misma familia que la barra pegajosa de §6.70). El parcial
     vive al FINAL del <body> (tras el pie), asi que sticky se comporta IGUAL
     que fixed mientras se scrollea y, al llegar al fondo, se queda en su
     sitio del flujo DESPUES del pie: todo vuelve a ser alcanzable sin haber
     decidido. El `fixed` se queda como respaldo para navegadores sin sticky
     (mejor tapar el pie que perder el aviso). */
  position: sticky;
  inset-inline: 0;
  bottom: 0;
  z-index: 60;
  padding: var(--esp-3);
  pointer-events: none;
}

/* La caja se pinta ENTERA por sí misma —fondo Y color de texto— y no hereda
   nada. Flota fija sobre una página cuyas secciones alternan papel y navy: si
   heredase el color del texto, al pasar por encima de una sección navy se
   volvería texto claro sobre la tarjeta blanca y desaparecería. */
.lz-cookies__caja {
  pointer-events: auto;
  max-width: 60rem;
  margin-inline: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--esp-3) var(--esp-4);
  padding: var(--esp-3) var(--esp-4);
  border: 1px solid var(--c-borde);
  border-radius: var(--radio-l);
  background: var(--c-blanco);
  color: var(--c-texto);
  box-shadow: var(--sombra-2);
}

.lz-cookies__texto {
  flex: 1 1 20rem;
  margin: 0;
  font-size: var(--texto-s);
  /* Texto de cumplimiento legal: va en la tinta normal, no en la suave. Es lo
     que la persona tiene que LEER para decidir, no un pie de foto. */
  color: var(--c-texto);
  line-height: 1.55;
}

.lz-cookies__texto a { color: var(--c-marino-700); font-weight: 700; }

.lz-cookies__acciones {
  display: flex;
  gap: var(--esp-2);
  flex-wrap: wrap;
}

/* Los dos botones comparten estilo: ninguno es "el bueno". */
.lz-cookies__boton {
  padding: 0.5rem 1.1rem;
  border: 1.5px solid var(--c-marino-800);
  border-radius: var(--radio-pill);
  background: transparent;
  color: var(--c-marino-800);
  font: inherit;
  font-weight: 700;
  font-size: var(--texto-s);
  cursor: pointer;
  transition: background-color var(--trans-rapida), color var(--trans-rapida);
}

.lz-cookies__boton:hover {
  background: var(--c-marino-800);
  color: var(--c-blanco);
}

.lz-cookies--fuera { display: none; }

/* NO se añade aquí un `@media (prefers-color-scheme: dark)`.
   Había uno que ponía la caja navy, y era el ÚNICO sitio de toda la web
   pública que miraba el esquema del sistema: el resto de la página seguía en
   claro. Resultado en un equipo con el sistema en oscuro: caja navy con el
   texto y los dos botones todavía en azul marino —azul sobre azul, ilegible—
   justo en el aviso donde la persona tiene que decidir sobre sus datos.
   Un consentimiento que no se puede leer no es un consentimiento.
   Si algún día la web pública tiene modo oscuro de verdad, este bloque vuelve
   pero redefiniendo TAMBIÉN texto, enlace y botones, no solo el fondo. */

/* ============ NADA SE MUEVE FUERA DE PANTALLA (2026-08-27) ============

   MEDIDO, y es la cifra que justifica todo lo de abajo: con la landing quieta,
   scrolleada hasta el fondo y el hero COMPLETAMENTE fuera de vision, el hilo
   principal seguia haciendo 58,8 layouts/s + 58,8 recalculos de estilo/s y
   gastando 805 ms de CPU POR SEGUNDO. Pausando las animaciones: 0, 0 y 0 ms.
   Reproducido en 4 ejecuciones (762 / 805 / 870 / 981 ms/s) y en las cinco
   paginas publicas (/ 795 · /colaboradores 729 · /quienes-somos 633 ·
   /blog 538 · /contacto 364 ms/s), porque el latido del CTA y la aurora viven
   en hojas GLOBALES. Eso es el tiron que se nota al cargar y bajar rapido.

   Y NO VALE QUITAR "LAS QUE MAS CUESTAN": dejando UNA SOLA animacion viva el
   hilo principal ya hace 60 pasadas/s (lzi-laser-a sola = 60 layouts/s y
   290 ms/s). O se paran cuando no se ven, o da igual cuantas queden.

   VIVE EN CHROME.CSS Y NO EN PUBLICA.CSS A PROPOSITO: el FUNNEL no carga
   publica.css (solo base/chrome/funnel/tokens) y tiene 46 animaciones
   infinitas, las que mas — moverla aqui es lo que hace que tambien alli
   funcione. chrome.css lo cargan todas las paginas con cabecera.

   POR QUE UNA CLASE QUE **DUERME** Y NO UNA QUE DESPIERTA: asi, sin JS o si el
   observador falla, todo se mueve exactamente como hoy. Al reves —pausado por
   defecto— un fallo de JS dejaria la web entera congelada. Aqui lo que se
   arriesga si algo va mal es gastar CPU de mas, no romper la pagina.
   (La marquesina del pie SI nace pausada, y es deliberado: alli lo que se
   pierde sin JS es el movimiento de un adorno, no el pulso de un CTA.)

   `!important` es necesario a proposito: estas animaciones se declaran con el
   atajo `animation:` desde selectores mas especificos (`.lzi-factura--luz
   .lzi-factura__laser`), y sin el la pausa no gana. Es el unico sitio de la
   hoja donde se usa. */
@media (prefers-reduced-motion: no-preference) {
  .lz-duerme,
  .lz-duerme * {
    animation-play-state: paused !important;
  }
}

/* =========================================================================
   AREA TACTIL (2026-08-28). Solo con puntero grueso (dedo): en escritorio
   con raton no cambia NI UN PIXEL — la maqueta de 1366+ esta aprobada por el
   dueño. Medido en 390x844 / 360x800 / 1024x768: idiomas del pie 62x30,
   redes 38x38, selector de idioma de cabecera 61x33, enlaces del mapa del
   pie 19px de alto y nav de escritorio en tablet tactil 19px — todos por
   debajo de los ~40-44px que pide un pulgar. Aqui solo CRECE la caja
   pulsable; tipografia y composicion no se tocan.
   ========================================================================= */
@media (pointer: coarse) {
  /* Enlaces del mapa del pie: el padding agranda la caja y el margen
     negativo devuelve la mitad del aire — el ritmo vertical crece un poco
     (deseable en tactil) sin duplicar el interlineado. */
  .lz-pie__lista a { display: inline-block; padding-block: 0.6rem; margin-block: -0.3rem; }
  /* Chips de idioma del pie y selector de cabecera: alto minimo determinista
     (la fila flex los centra; solo se estira la pastilla). */
  .lz-pie__idioma { display: inline-flex; align-items: center; min-height: 2.5rem; }
  .lz-idioma__actual { min-height: 2.5rem; }
  /* Iconos de redes: de 38x38 a 44x44; el svg de dentro no cambia. */
  .lz-pie__red { width: 2.75rem; height: 2.75rem; }
  /* Nav de escritorio usada CON DEDO (tablet >=64rem, p. ej. iPad apaisado):
     la caja sube a ~44px y el subrayado se recoloca para seguir pegado al
     texto (compensa el padding añadido; 0.8rem - 0.35rem de base = 0.45rem). */
  .lz-top__enlace { padding-block: 0.8rem; }
  .lz-top__enlace::after { bottom: 0.45rem; }
}