/* ============================================================
   luzgasia — publica.css (v2 "Editorial del dato")
   Design system de las páginas PÚBLICAS (landing, quiénes somos,
   contacto, blog). El funnel sigue con funnel.css; el panel con
   panel.css. Sustituye a landing.css/paginas.css en estas páginas.

   Reglas de la dirección (spec ESPECIFICACION-rediseno-publica §5):
   - Base papel cálido; navy solo como momentos narrativos cosidos.
   - Ámbar SOLO en: "ia" del wordmark, cifra de ahorro, CTA primario.
   - TODO el movimiento detrás de @media (prefers-reduced-motion:
     no-preference) — y el estado oculto JAMÁS fuera de esa puerta.
   - Presupuesto de movimiento cerrado: pocas cosas se mueven, y con
     la firma --ease-gota. El resto, quieto a propósito.
   ============================================================ */

/* =================== LIENZO =================== */

.lz-cuerpo {
  background: var(--lz-papel);
  color: var(--lz-tinta);
}
.lz-cuerpo ::selection { background: var(--c-amarillo-400); color: var(--c-marino-950); }

/* Los destinos de anclaje respiran bajo la cabecera fija. */
.lz-cuerpo [id] { scroll-margin-top: 5.5rem; }

h1, h2, h3 { text-wrap: balance; }
.lz-cuerpo p { text-wrap: pretty; }

/* =================== RETÍCULA EDITORIAL ===================
   Un solo grid por sección con líneas nombradas: los hijos deciden
   dónde caen y el visual puede sangrar hasta el borde (full-bleed).
   En móvil colapsa a columna única con margen. */
.lz-grid {
  display: grid;
  grid-template-columns:
    [full-start] minmax(1.25rem, 1fr)
    [content-start] min(100% - 2.5rem, 78rem) [content-end]
    minmax(1.25rem, 1fr) [full-end];
}
.lz-grid > * { grid-column: content; }
.lz-grid > .lz-sangra-derecha { grid-column: content-start / full-end; }
.lz-grid > .lz-sangra-izquierda { grid-column: full-start / content-end; }
.lz-grid > .lz-full { grid-column: full; }

/* Subretícula interior de 12 columnas (solo escritorio). */
.lz-cols { display: grid; gap: var(--esp-5); }
@media (min-width: 64rem) {
  .lz-cols { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--esp-6); }
}

/* =================== SECCIONES Y TEMAS =================== */

.lz-seccion { padding-block: var(--esp-seccion); position: relative; }
.lz-seccion--apretada { padding-block: calc(var(--esp-seccion) * 0.55); }

/* Tema navy (momento narrativo full-bleed) con grano de marca. */
.lz-navy {
  background: var(--c-marino-950);
  color: var(--c-texto-inverso);
  position: relative;
}
.lz-navy::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-navy > * { position: relative; z-index: 1; }

/* Franja papel alternativa (cambio de temperatura, no de color). */
.lz-papel-2 { background: var(--lz-papel-2); }

/* Costura: un elemento que cruza la frontera entre dos secciones.
   La sección invadida compensa con su propio padding. */
.lz-cose-abajo { margin-block-end: -5.5rem; z-index: 2; position: relative; }
.lz-cosida { padding-block-start: calc(var(--esp-seccion) + 5.5rem); }

/* Cierre diagonal (clip) para coser navy→papel sin línea recta. */
.lz-diagonal-abajo { clip-path: polygon(0 0, 100% 0, 100% calc(100% - clamp(1.5rem, 4vw, 3.5rem)), 0 100%); }

/* =================== TIPOGRAFÍA EDITORIAL =================== */

.lz-display-1,
.lz-display-2,
.lz-display-3 {
  /* Bricolage Grotesque SOLO en display: el wordmark sigue en Space Grotesk
     (es la marca). En cuerpos grandes Bricolage tiene el caracter editorial
     que Space Grotesk no da; en cuerpos pequeños seria ruido. */
  font-family: var(--fuente-display);
  font-weight: 600;
  letter-spacing: var(--track-display);
  line-height: var(--lh-display);
  margin: 0;
}
.lz-display-1 { font-size: var(--fs-display-1); font-weight: 700; }
.lz-display-2 { font-size: var(--fs-display-2); }
.lz-display-3 { font-size: var(--fs-display-3); line-height: 1.12; }

/* La ÚNICA palabra en degradado ámbar del titular (dirección A). */
.lz-palabra-luz {
  background: linear-gradient(92deg, var(--c-amarillo-400), var(--c-amarillo-500));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Etiqueta de sección: índice numérico + small caps + regla. */
.lz-etiqueta {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--fuente-marca);
  font-size: var(--fs-etiqueta);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--lz-tinta-suave);
  margin: 0 0 var(--esp-5);
}
.lz-navy .lz-etiqueta { color: var(--lg-text-muted); }
.lz-etiqueta__num { color: var(--c-amarillo-500); font-weight: 700; font-variant-numeric: tabular-nums; }
.lz-etiqueta::after { content: ""; height: 1px; flex: 0 1 6rem; background: currentColor; opacity: 0.35; }

.lz-parrafo {
  font-size: var(--texto-m);
  line-height: var(--interlineado-texto);
  color: var(--lz-tinta-suave);
  max-width: var(--ancho-texto);
  margin: 0;
}
.lz-navy .lz-parrafo { color: var(--c-texto-inverso-suave); }

/* Cifra tratada como display (el dato ES el gráfico). Tabular para contar. */
.lz-cifra {
  font-family: var(--fuente-marca);
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* =================== BOTONES v2 =================== */

.lz-boton {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--fuente-marca);
  font-weight: 600;
  font-size: 1.05rem;
  text-decoration: none;
  padding: 0.95rem 1.6rem;
  border: 0;
  cursor: pointer;
  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),
              box-shadow var(--dur-v2-2) var(--ease-salida-v2);
}
.lz-boton:focus-visible { outline: 2px solid var(--c-foco); outline-offset: 3px; }
.lz-navy .lz-boton:focus-visible { outline-color: var(--c-foco-inverso); }

/* Primario: el ámbar. La esquina viva se AFILA al interactuar. */
.lz-boton--primario {
  background: var(--c-amarillo-500);
  color: var(--c-marino-950);
  box-shadow: var(--sombra-2);
}
.lz-boton--primario:hover,
.lz-boton--primario:focus-visible {
  border-radius: var(--radius-vivo);
  transform: translateY(-2px);
  box-shadow: var(--sombra-3);
}
.lz-boton--primario:active { transform: translateY(0); }

/* Azul de la casa: para acciones REALES que no son EL CTA (enviar un mensaje
   de soporte). El ámbar queda reservado a analizar (regla de dirección §6.5);
   sin variante, .lz-boton a secas quedaba transparente — un botón invisible. */
.lz-boton--azul {
  background: var(--lg-blue);
  color: var(--c-blanco);
  box-shadow: var(--sombra-2);
}
.lz-boton--azul:hover,
.lz-boton--azul:focus-visible {
  background: var(--c-marino-600);
  border-radius: var(--radius-vivo);
  transform: translateY(-2px);
  box-shadow: var(--sombra-3);
}
.lz-boton--azul:active { transform: translateY(0); }

/* --- CTA "Analizar mi factura": barrido de ESCANEO (el láser que lee la
   factura, llevado al botón). Solo alcanza a los CTA a /analizar
   (data-cta-analizar); el resto de primarios quedan sobrios. Un ÚNICO haz de
   luz cálida cruza el botón en HOVER y en focus-visible (teclado). El ámbar
   está permitido: es EL CTA. Sin motion → solo cambia el fondo, sin barrido. --- */
.lz-boton--primario[data-cta-analizar] {
  position: relative;
  overflow: hidden;      /* recorta el haz a la gota; el outline de foco se pinta fuera y no se recorta */
  isolation: isolate;    /* el 'screen' del haz se mezcla SOLO dentro del botón, no con la página */
}

/* --- LLAMADA AL CLIC: los CTA a /analizar (hero, cierre y el del header)
   pegan un TEMBLOR breve cada pocos segundos para pedir el clic — un tic de
   atención, no un baile constante (la sacudida vive solo al final del ciclo).
   En hover/foco/activo se apaga: manda el haz de escaneo y el lift de foco.
   Sin motion, nada se mueve. El hook data-cta-analizar lo llevan los tres. --- */
@media (prefers-reduced-motion: no-preference) {
  [data-cta-analizar] {
    animation: lz-cta-latido 5.5s ease-in-out 2.5s infinite;
    transform-origin: center;
    will-change: transform;
  }
  [data-cta-analizar]:hover,
  [data-cta-analizar]:focus-visible,
  [data-cta-analizar]:active { animation: none; }
  @keyframes lz-cta-latido {
    0%, 80%, 100% { transform: rotate(0) scale(1); }
    82.5% { transform: rotate(-2.6deg) scale(1.035); }
    85%   { transform: rotate(2.3deg)  scale(1.045); }
    87.5% { transform: rotate(-1.7deg) scale(1.03); }
    90%   { transform: rotate(1.1deg)  scale(1.02); }
    93%   { transform: rotate(0) scale(1); }
  }
}
.lz-boton--primario[data-cta-analizar]:hover,
.lz-boton--primario[data-cta-analizar]:focus-visible {
  background-color: color-mix(in srgb, var(--c-amarillo-500) 90%, var(--lg-white));
}
@media (prefers-reduced-motion: no-preference) {
  .lz-boton--primario[data-cta-analizar]::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 (fuera, a la izquierda) DENTRO de la puerta */
    transition: translate 0s;   /* al soltar el hover reposiciona al instante: sin barrido inverso */
  }
  .lz-boton--primario[data-cta-analizar]:hover::before,
  .lz-boton--primario[data-cta-analizar]:focus-visible::before {
    translate: 360% 0;                            /* un solo barrido, izquierda → derecha */
    transition: translate 0.85s var(--ease-gota);
  }
}

/* Secundario: tinta con borde; en navy, hueso con borde tenue. */
.lz-boton--secundario {
  background: transparent;
  color: var(--lz-tinta);
  border: 1.5px solid var(--lz-tinta);
}
.lz-boton--secundario:hover,
.lz-boton--secundario:focus-visible { border-radius: var(--radius-vivo); transform: translateY(-2px); }
.lz-navy .lz-boton--secundario { color: var(--c-texto-inverso); border-color: var(--c-texto-inverso-suave); }

/* Enlace-flecha (CTA terciario): la flecha se estira, el texto no se mueve. */
.lz-flecha {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--fuente-marca);
  font-weight: 600;
  color: inherit;
  text-decoration: none;
}
.lz-flecha svg { width: 1.15rem; height: 1.15rem; transition: translate var(--dur-v2-2) var(--ease-gota); }
.lz-flecha:hover svg,
.lz-flecha:focus-visible svg { translate: 5px 0; }
.lz-flecha:focus-visible { outline: 2px solid var(--c-foco); outline-offset: 3px; border-radius: var(--radius-vivo); }

/* =================== TARJETA GOTA =================== */

.lz-tarjeta {
  background: var(--c-blanco);
  border: 1px solid var(--lz-linea);
  border-radius: var(--radius-gota);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.lz-tarjeta--inv { border-radius: var(--radius-gota-inv); }
.lz-navy .lz-tarjeta {
  background: color-mix(in srgb, var(--c-marino-900) 72%, var(--c-marino-950));
  border-color: var(--lg-border);
}

/* =================== MOVIMIENTO ===================
   Estados ocultos SOLO dentro de las puertas (@supports + no-preference):
   sin soporte o con reduced-motion, todo visible y quieto. */

/* — Reveals scroll-driven (un gesto DISTINTO por tipo) — */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* Texto: sube 24px y asienta. */
    .lz-revela {
      animation: lz-sube linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
    /* Visual: se descubre con un barrido de recorte desde su lado. */
    .lz-revela-corte {
      animation: lz-corte linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 38%;
    }
    .lz-revela-corte--izq { animation-name: lz-corte-izq; }
    /* Regla/etiqueta: se dibuja. */
    .lz-revela-regla {
      animation: lz-regla linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
  }
  /* Fallback IO (publica.js añade .es-visible). Solo si NO hay timeline. */
  @supports not (animation-timeline: view()) {
    html.js .lz-revela,
    html.js .lz-revela-corte,
    html.js .lz-revela-corte--izq,
    html.js .lz-revela-regla {
      opacity: 0;
      translate: 0 20px;
      transition: opacity var(--dur-v2-3) var(--ease-salida-v2),
                  translate var(--dur-v2-3) var(--ease-salida-v2);
    }
    html.js .es-visible { opacity: 1; translate: 0 0; }
  }
  @keyframes lz-sube {
    from { opacity: 0; translate: 0 24px; }
    to { opacity: 1; translate: 0 0; }
  }
  @keyframes lz-corte {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0 0 0); }
  }
  @keyframes lz-corte-izq {
    from { clip-path: inset(0 0 0 100%); }
    to { clip-path: inset(0 0 0 0); }
  }
  @keyframes lz-regla {
    from { opacity: 0; scale: 0 1; }
    to { opacity: 1; scale: 1 1; }
  }

  /* Parallax sutil (≤10%) de las gotas decorativas, ligado al scroll. */
  @supports (animation-timeline: view()) {
    .lz-gota-flota {
      animation: lz-deriva linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    @keyframes lz-deriva {
      from { translate: 0 6%; }
      to { translate: 0 -6%; }
    }
  }
}

/* — La cifra que cuenta (SSR-first) —
   El valor real SIEMPRE está impreso en el HTML. Con soporte y sin
   reduced-motion, publica.js fija --n y el ::after pinta el conteo;
   el span del valor SSR se oculta solo durante la animación. */
@property --n {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
@media (prefers-reduced-motion: no-preference) {
  @supports (counter-set: n calc(var(--n))) {
    html.js .lz-cuenta.is-contando .lz-cuenta__valor { position: absolute; opacity: 0; }
    html.js .lz-cuenta.is-contando::after {
      counter-set: n calc(var(--n));
      content: counter(n);
      animation: lz-n var(--dur-cuenta, 1.4s) var(--ease-salida-v2) forwards;
    }
    @keyframes lz-n { from { --n: 0; } }
  }
}
.lz-cuenta { position: relative; }

/* =================== DETALLES COMPARTIDOS =================== */

/* FAQ: <details name="..."> exclusivo sin JS; abre animando 0fr→1fr. */
.lz-faq { display: grid; gap: 0; border-top: 1px solid var(--lz-linea); }
.lz-faq__item { border-bottom: 1px solid var(--lz-linea); }
.lz-faq__pregunta {
  font-family: var(--fuente-marca);
  font-weight: 600;
  font-size: var(--texto-l);
  padding: 1.1rem 2.5rem 1.1rem 0;
  cursor: pointer;
  list-style: none;
  position: relative;
}
.lz-faq__pregunta::-webkit-details-marker { display: none; }
.lz-faq__pregunta::after {
  content: "+";
  position: absolute;
  right: 0.4rem;
  top: 50%;
  translate: 0 -50%;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--c-amarillo-500);
  transition: rotate var(--dur-v2-2) var(--ease-gota);
}
.lz-faq__item[open] .lz-faq__pregunta::after { rotate: 45deg; }
.lz-faq__cuerpo { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-v2-2) var(--ease-salida-v2); }
.lz-faq__item[open] .lz-faq__cuerpo { grid-template-rows: 1fr; }
.lz-faq__interior { overflow: hidden; }
.lz-faq__interior p { margin: 0 0 1.1rem; color: var(--lz-tinta-suave); max-width: var(--ancho-texto); }
.lz-faq__pregunta:focus-visible { outline: 2px solid var(--c-foco); outline-offset: 2px; border-radius: var(--radius-vivo); }

/* Microcopy de compromiso-cero pegado al CTA. */
.lz-compromiso {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--texto-xs);
  color: var(--lz-tinta-suave);
}
.lz-navy .lz-compromiso { color: var(--lg-text-muted); }
.lz-compromiso svg { width: 0.95rem; height: 0.95rem; flex: none; }

/* Lista de comprobación editorial (sin tarjetas): regla + texto. */
.lz-lista-regla { list-style: none; margin: 0; padding: 0; }
.lz-lista-regla > li {
  padding: 1.15rem 0;
  border-top: 1px solid var(--lz-linea);
  display: grid;
  gap: 0.35rem;
}
.lz-lista-regla > li:last-child { border-bottom: 1px solid var(--lz-linea); }
.lz-navy .lz-lista-regla > li { border-color: var(--lg-border); }


/* ==========================================================================
   AURORA compartida — el fondo de las secciones navy de TODA la publica.
   Sustituye a las gotas flotantes: el isotipo no se repite como decoracion
   (decision de direccion, 2026-08-07). Tres masas de luz difusa que derivan
   muy despacio tras la puerta de motion.
   ========================================================================== */
/* CAPA PARTIDA (2026-08-26), igual que la aurora del hero en p-landing.css: el
   elemento SOLO deriva (transform, compositor) y el degradado con su
   `filter: blur(46px)` vive QUIETO en el ::before. Con fondo y filtro en el
   MISMO elemento animado, el navegador rehace el desenfoque en cada fotograma
   sobre ~2 Mpx. Medido en /colaboradores con CPU 6x a 1366x768, 3 pasadas:
   43,4 ms de media por cuadro y 116 de 116 cuadros perdidos -> 16,7 ms y 0 de
   300, que es exactamente lo mismo que da la aurora SIN animar (16,7 ms): la
   deriva deja de costar. Mismo aspecto.
   Un IntersectionObserver NO es la solucion aqui y ya se midio: fuera de
   pantalla esta aurora cuesta 0,2 ms/s (Chrome no rasteriza lo que no se ve),
   asi que el problema es justo cuando SI se ve, que es cuando un gate la
   dejaria corriendo igual. */
.lz-aurora {
  position: absolute;
  inset: -18%;
  pointer-events: none;
}
.lz-aurora::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(46rem 30rem at 76% 14%, rgb(27 111 224 / 0.30), transparent 62%),
    radial-gradient(40rem 30rem at 8% 86%, rgb(18 58 117 / 0.60), transparent 64%),
    radial-gradient(26rem 18rem at 58% 74%, rgb(255 138 30 / 0.08), transparent 60%);
  filter: blur(46px);
}
@media (prefers-reduced-motion: no-preference) {
  .lz-aurora { animation: lz-aurora-deriva 26s ease-in-out infinite alternate; }
  @keyframes lz-aurora-deriva {
    from { transform: translate3d(-1.5%, -1%, 0) scale(1); }
    to   { transform: translate3d(1.5%, 1.5%, 0) scale(1.06); }
  }
}

/* Realce de llegada a un ancla (#metodo): la seccion "respira" una vez para
   que el ojo sepa donde ha aterrizado. La dispara publica.js al navegar con
   hash; el estado normal es el reposo. */
@media (prefers-reduced-motion: no-preference) {
  .lz-llegada { animation: lz-llega 1s cubic-bezier(.2,.8,.2,1) 1; }
  @keyframes lz-llega {
    0%   { transform: scale(0.985); opacity: 0.6; }
    55%  { transform: scale(1.006); opacity: 1; }
    100% { transform: scale(1); }
  }
}

/* ---------- Aviso flotante (toast) ----------------------------------------
   Confirmacion efimera para una accion SIN navegacion. Hoy lo usa el correo de
   contacto: al pulsarlo se copia la direccion y aparece esto (tablero #13, el
   `mailto:` no abria nada en un equipo sin cliente de correo). Estilo de la
   casa (§6.5): superficie BLANCA, borde fino apenas tenido, un PUNTO de color
   (::before) como unica marca, texto en TINTA — nada de banda pastel. Lo crea y
   lo destruye publica.js: sin JS no existe (mejora progresiva). La web publica
   no tiene modo oscuro (§6.27), asi que fija sus propios colores sin temas. */
.lz-aviso-flotante {
  position: fixed;
  left: 50%;
  bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 1rem);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: min(28rem, calc(100vw - 2rem));
  padding: 0.7rem 1.05rem;
  background: #fff;
  color: var(--lz-tinta);
  border: 1px solid var(--lz-linea);
  border-radius: var(--radius-vivo);
  box-shadow: var(--sombra-3);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;   /* es un aviso: no roba clics */
}
.lz-aviso-flotante::before {
  content: "";
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--c-exito);   /* el PUNTO: la unica marca de color */
}
.lz-aviso-flotante--visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
@media (prefers-reduced-motion: no-preference) {
  .lz-aviso-flotante {
    transition: opacity var(--dur-v2-2) var(--ease-gota),
                transform var(--dur-v2-2) var(--ease-gota),
                visibility 0s linear var(--dur-v2-2);
  }
  .lz-aviso-flotante--visible {
    transition: opacity var(--dur-v2-2) var(--ease-gota),
                transform var(--dur-v2-2) var(--ease-gota);
  }
}