/* ============================================================
   luzgasia — p-blog.css (blog v2 "Editorial del dato")
   Lista + artículo. Depende de tokens.css + publica.css.
   Prefijo lzb- (blog). Reglas de la dirección:
   - Nada de grid de tarjetas simétricas: UNA pieza destacada como
     plano elevado + filas editoriales con separadores que respiran.
   - Ámbar solo donde el sistema ya lo permite (índices numéricos,
     .activo del TOC); el acento de lectura es el azul gas.
   - Profundidad por CAPAS, no uniforme: cada plano lleva su propia
     sombra (--sombra-1..4) y su propio radio gota. La textura de
     grano (noise.svg, soft-light) reaparece SOLO en los momentos
     navy (velo de hover, CTA del artículo), como en el resto del sistema.
   - SIN iconos ni ilustraciones en la lista (el cliente los retiró):
     la vista compone un rectángulo lleno —pieza destacada a todo el
     ancho + filas editoriales que llenan la fila, sin huecos muertos—.
     El icono de tema sobrevive solo en la cabecera del artículo.
   - Hover de cada entrada: un velo navy BARRE de izquierda a derecha
     cubriendo el contenido y emerge el CTA "Leer la guía →". Todo el
     mecanismo vive DENTRO de la puerta de movimiento (display:none
     fuera de ella): con reduced-motion no hay velo, solo el subrayado
     del titular, y el enlace sigue funcionando.
   ============================================================ */

/* =================== LISTA · cabecera editorial =================== */

.lzb-portada__titulo {
  margin: var(--esp-4) 0 var(--esp-5);
  max-width: 13ch;
}
.lzb-portada__sub { max-width: 36rem; }

/* =================== LISTA · pieza destacada =================== */

/* La pieza destacada se sienta como un PLANO elevado a TODO el ancho (no una
   simple franja): papel cálido en degradado, radio gota, borde fino y sombra
   honda. Es el único bloque "tarjeta" de la página —y por eso destaca— frente
   a las filas planas del archivo. Sin `overflow`: el velo de hover ya lleva su
   propio radio gota (encaja en la tarjeta) y así el anillo de foco del enlace
   —que se dibuja 4px por fuera— nunca queda recortado. */
.lzb-abre { padding-block: var(--esp-5) 0; }

.lzb-pieza {
  position: relative;
  background: linear-gradient(158deg, var(--c-blanco) 0%, var(--lz-papel-2) 100%);
  border: 1px solid var(--lz-linea);
  border-radius: var(--radius-gota);
  box-shadow: var(--sombra-3);
  padding: clamp(1.5rem, 1rem + 3vw, 3rem);
}
/* Guarda anti-desbordes: el texto puede encoger. */
.lzb-pieza__texto { min-width: 0; }

.lzb-pieza__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 var(--esp-4);
  font-size: var(--texto-xs);
  color: var(--lz-tinta-suave);
  font-variant-numeric: tabular-nums;
}
.lzb-cinta {
  font-family: var(--fuente-marca);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--lz-tinta);
  color: var(--lz-papel);
  padding: 0.28rem 0.55rem;
  border-radius: var(--radius-vivo);
}

.lzb-pieza__titulo { margin: 0 0 var(--esp-4); max-width: 18ch; text-wrap: balance; }
.lzb-pieza__desc { margin: 0 0 var(--esp-5); max-width: 44rem; }
.lzb-pieza__leer { color: var(--lz-tinta); }

/* Stretched link: el enlace vive en el titular; su ::after cubre la pieza. */
.lzb-enlace { color: inherit; text-decoration: none; }
.lzb-enlace::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.lzb-enlace:focus-visible { outline: none; }
.lzb-enlace:focus-visible::after {
  outline: 2px solid var(--c-foco);
  outline-offset: 4px;
  border-radius: var(--radius-vivo);
}
/* Con el hover v3 (inversion navy) el titular ya cambia de mundo entero: el
   subrayado azul de antes pesaba sobre el navy y se retira — la afordanza la
   dan la inversion, el laser y la flecha ambar. */

/* =================== LISTA · filas editoriales =================== */

.lzb-archivo__titulo { margin-bottom: var(--esp-5); }

.lzb-filas { list-style: none; margin: 0; padding: 0; position: relative; }
/* Cierre inferior del archivo: misma regla que respira en los bordes. */
.lzb-filas::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--lz-linea) 7%, var(--lz-linea) 93%, transparent);
  pointer-events: none;
}

/* Fila: SIN carril de icono. Fecha + titular grande + entradilla + minutos
   ocupan TODO el ancho (columnas que llenan la fila, sin huecos muertos: la
   suma de filas compone un rectángulo). Aire lateral para que el velo del
   hover pueda sangrar sin tocar el viewport. El contenido en z-index 1; el
   velo y el CTA se montan encima (z-index 3/4) solo con motion. */
.lzb-fila {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.3rem var(--esp-4);
  padding: 1.3rem clamp(0.4rem, 2vw, 0.9rem);
}
.lzb-fila > * { position: relative; z-index: 1; }

/* Separador superior: no una línea plana, sino una regla que se dibuja de
   dentro a fuera y se desvanece en los extremos (ritmo editorial). */
.lzb-fila::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--lz-linea) 7%, var(--lz-linea) 93%, transparent);
  pointer-events: none;
}

.lzb-fila__fecha {
  grid-column: 1;
  grid-row: 1;
  font-size: var(--texto-xs);
  color: var(--lz-tinta-suave);
  font-variant-numeric: tabular-nums;
}
.lzb-fila__min {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  font-size: var(--texto-xs);
  color: var(--lz-tinta-suave);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.lzb-fila__titulo {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
  font-family: var(--fuente-marca);
  font-weight: 600;
  font-size: var(--fs-display-3);
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.lzb-fila__desc {
  grid-column: 1 / -1;
  grid-row: 3;
  margin: 0;
  font-size: var(--texto-s);
  color: var(--lz-tinta-suave);
  max-width: 46rem;
}
.lzb-fila__flecha { display: none; }

@media (min-width: 64rem) {
  .lzb-fila {
    grid-template-columns: 10rem minmax(0, 1fr) 5.5rem 2.25rem;
    column-gap: var(--esp-6);
    align-items: baseline;
    padding: 1.6rem clamp(0.9rem, 1.4vw, 1.4rem);
  }
  .lzb-fila__fecha { grid-column: 1; grid-row: 1; }
  .lzb-fila__titulo { grid-column: 2; grid-row: 1; }
  .lzb-fila__desc { grid-column: 2; grid-row: 2; }
  .lzb-fila__min { grid-column: 3; grid-row: 1; }
  .lzb-fila__flecha {
    display: block;
    grid-column: 4;
    grid-row: 1;
    align-self: center;
    color: var(--lz-tinta);
  }
  .lzb-fila__flecha svg { width: 1.4rem; height: 1.4rem; display: block; }
}

/* =================== HOVER · escaneo (v3, 2026-08-07) ===================
   El v2 (fondo papel + subrayado) tampoco convencio. v3, con los gestos de
   la casa: al pasar, la fila se INVIERTE a navy (nada tapa el contenido:
   solo cambia de tema) y un LASER azul la recorre una vez, como el escaner
   que lee las facturas; la flecha se enciende en ambar y avanza. Los cambios
   de color van sin puerta de motion; laser y desplazamientos, dentro. */
.lzb-velo,
.lzb-ir { display: none; } /* legado del velo v1: ya sin markup */

.lzb-fila {
  border-radius: var(--radius-gota-s);
  overflow: clip; /* recorta el laser al radio de la fila */
  transition: background-color 240ms var(--ease-salida-v2),
              color 240ms var(--ease-salida-v2),
              box-shadow 240ms var(--ease-salida-v2);
}
.lzb-fila:hover,
.lzb-fila:focus-within {
  background: linear-gradient(108deg, var(--lg-navy) 0%, var(--lg-navy-2) 100%);
  color: var(--c-texto-inverso);
  box-shadow: 0 14px 30px rgb(11 26 51 / 0.22);
}
/* El titular Y SU ENLACE llevan color de tinta EXPLICITO (estilos globales
   de heading/anchor): sin estas reglas quedaban oscuros sobre el navy. */
.lzb-fila:hover .lzb-fila__titulo,
.lzb-fila:focus-within .lzb-fila__titulo,
.lzb-pieza:hover .lzb-pieza__titulo,
.lzb-pieza:focus-within .lzb-pieza__titulo,
.lzb-fila:hover .lzb-enlace,
.lzb-fila:focus-within .lzb-enlace,
.lzb-pieza:hover .lzb-enlace,
.lzb-pieza:focus-within .lzb-enlace { color: var(--c-texto-inverso); }
.lzb-fila:hover .lzb-fila__fecha,
.lzb-fila:focus-within .lzb-fila__fecha,
.lzb-fila:hover .lzb-fila__min,
.lzb-fila:focus-within .lzb-fila__min { color: var(--lg-blue-light); }
.lzb-fila:hover .lzb-fila__desc,
.lzb-fila:focus-within .lzb-fila__desc { color: color-mix(in srgb, var(--lz-papel) 78%, transparent); }
.lzb-fila:hover .lzb-fila__flecha,
.lzb-fila:focus-within .lzb-fila__flecha { color: var(--c-amarillo-400); }

/* La pieza destacada: misma inversion, con su elevacion de plano. */
.lzb-pieza {
  transition: background-color 260ms var(--ease-salida-v2),
              color 260ms var(--ease-salida-v2),
              box-shadow 260ms var(--ease-salida-v2),
              translate 260ms var(--ease-gota);
}
.lzb-pieza:hover,
.lzb-pieza:focus-within {
  background: linear-gradient(108deg, var(--lg-navy) 0%, var(--lg-navy-2) 100%);
  color: var(--c-texto-inverso);
  box-shadow: 0 18px 40px rgb(11 26 51 / 0.28);
}
.lzb-pieza:hover .lzb-pieza__desc,
.lzb-pieza:focus-within .lzb-pieza__desc { color: color-mix(in srgb, var(--lz-papel) 80%, transparent); }
.lzb-pieza:hover .lzb-pieza__meta,
.lzb-pieza:focus-within .lzb-pieza__meta { color: var(--lg-blue-light); }
.lzb-pieza:hover .lzb-pieza__leer,
.lzb-pieza:focus-within .lzb-pieza__leer { color: var(--c-amarillo-400); }

@media (prefers-reduced-motion: no-preference) {
  /* Laser de escaneo: una pasada L→R al entrar el cursor. El ::before esta
     libre (el separador de las filas vive en ::after). */
  .lzb-fila::before,
  .lzb-pieza::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background: linear-gradient(180deg, transparent 4%, var(--lg-blue-light) 50%, transparent 96%);
    opacity: 0;
    pointer-events: none;
    z-index: 2;
  }
  .lzb-fila:hover::before,
  .lzb-fila:focus-within::before,
  .lzb-pieza:hover::before,
  .lzb-pieza:focus-within::before {
    animation: lzb-laser-pasa 0.85s cubic-bezier(0.3, 0.6, 0.15, 1) 80ms forwards;
  }
  @keyframes lzb-laser-pasa {
    0%   { opacity: 0; left: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { opacity: 0; left: calc(100% - 3px); }
  }
  .lzb-fila__flecha svg { transition: translate 300ms var(--ease-gota); }
  .lzb-fila:hover .lzb-fila__flecha svg,
  .lzb-fila:focus-within .lzb-fila__flecha svg { translate: 6px 0; }
  .lzb-pieza:hover,
  .lzb-pieza:focus-within { translate: 0 -5px; }
  .lzb-pieza__leer svg { transition: translate 300ms var(--ease-gota); }
  .lzb-pieza:hover .lzb-pieza__leer svg,
  .lzb-pieza:focus-within .lzb-pieza__leer svg { translate: 6px 0; }
}

/* Estado vacío: regla editorial + texto, sin tarjeta muda. */
.lzb-vacio {
  border-top: 2px solid var(--lz-tinta);
  padding-top: var(--esp-5);
  margin: 0;
  max-width: 34rem;
  font-family: var(--fuente-marca);
  font-size: var(--texto-l);
  color: var(--lz-tinta-suave);
}

/* =================== ARTÍCULO · progreso de lectura ===================
   Scroll-driven puro CSS. Fuera de las puertas (@supports + no-preference)
   la barra queda en scaleX(0): invisible, sin JS de respaldo. */
.lzb-progreso {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--lg-blue);
  transform: scaleX(0);
  transform-origin: 0 50%;
  z-index: var(--capa-flotante);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll(root)) {
    .lzb-progreso {
      animation: lzb-progresa linear both;
      animation-timeline: scroll(root);
    }
    @keyframes lzb-progresa {
      from { transform: scaleX(0); }
      to { transform: scaleX(1); }
    }
  }
}

/* =================== ARTÍCULO · cabecera con presencia ===================
   La cabecera es una "cabecera de sección" con su propia atmósfera: una
   franja de papel más cálido (papel-2 → papel) a todo el ancho, cerrada
   por un filo fino y una sombra de costura. Sobre ella, el titular a la
   izquierda y la placa navy del tema a la derecha (composición asimétrica,
   nunca dos columnas simétricas). */

/* Aísla el árbol del artículo: el grano soft-light del CTA navy (.lz-navy
   ::after, mix-blend-mode) no puede mezclarse con nada de fuera. */
.lzb-articulo { isolation: isolate; }

.lzb-cabeza { position: relative; }
.lzb-cabeza::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, var(--lz-papel-2), var(--lz-papel));
  border-bottom: 1px solid var(--lz-linea);
  box-shadow: var(--sombra-1);
}

@media (min-width: 64rem) {
  .lzb-cabeza__inner { display: block; }
}
.lzb-cabeza__texto { min-width: 0; }

.lzb-volver {
  color: var(--lz-tinta-suave);
  font-size: var(--texto-s);
  margin-bottom: var(--esp-4);
}
.lzb-volver svg { width: 1.05rem; height: 1.05rem; }
/* La vuelta apunta a la izquierda: anula SIEMPRE el gesto +5px genérico de
   .lz-flecha (publica.css); el desplazamiento correcto vive tras la puerta. */
.lzb-volver:hover svg,
.lzb-volver:focus-visible svg { translate: 0 0; }

/* La etiqueta lleva la fecha dentro: puede partir en móvil y respira menos
   que la etiqueta de sección genérica (el titular manda). */
.lzb-cabeza__etiqueta { flex-wrap: wrap; margin-bottom: var(--esp-4); }

.lzb-cabeza__titulo { margin: 0 0 var(--esp-4); max-width: 22ch; text-wrap: balance; }
.lzb-cabeza__entradilla { font-size: var(--texto-l); max-width: 40rem; text-wrap: pretty; }

.lzb-firma {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  margin: var(--esp-4) 0 0;
}
.lzb-firma .blog-avatar { width: 2.75rem; height: 2.75rem; flex: none; }
.lzb-firma__quien { display: grid; line-height: 1.35; }
.lzb-firma__autor { font-family: var(--fuente-marca); font-weight: 600; color: var(--lz-tinta); }
.lzb-firma__datos { font-size: var(--texto-xs); color: var(--lz-tinta-suave); }

/* (La placa navy del tema se retiró de la cabecera el 2026-08-07 a petición
   directa: se leía como una imagen suelta. Cabecera solo tipográfica.) */

/* =================== ARTÍCULO · cuerpo + carril lateral =================== */

.lzb-cuerpo { padding-block: var(--esp-8) var(--esp-seccion); }

.lzb-cuerpo__marco { display: grid; gap: var(--esp-8); }
@media (min-width: 64rem) {
  .lzb-cuerpo__marco {
    /* Columna de lectura alineada con la cabecera; carril a la derecha. */
    grid-template-columns: minmax(0, var(--ancho-texto)) minmax(13rem, 16rem);
    column-gap: clamp(var(--esp-8), 7vw, 8rem);
    align-items: start;
  }
  .lzb-principal { grid-column: 1; grid-row: 1; }
  .lzb-lateral {
    grid-column: 2;
    grid-row: 1;
    /* Sticky en el ITEM del grid (no en un hijo): con align-items:start la
       columna mide su contenido y el sticky recorre todo el artículo. */
    position: sticky;
    top: calc(4.5rem + var(--esp-5));
    max-height: calc(100dvh - 4.5rem - var(--esp-6));
    overflow: auto;
  }
}

.lzb-lateral { display: grid; gap: var(--esp-6); align-content: start; }
.lzb-lateral__titulo {
  margin: 0 0 var(--esp-3);
  font-family: var(--fuente-marca);
  font-size: var(--fs-etiqueta);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--lz-tinta-suave);
}

/* Ficha "Sobre este artículo": tarjeta ligera de papel que da cuerpo al
   carril (la sombra más suave del sistema, un escalón bajo el resto). */
.lzb-ficha {
  background: var(--c-blanco);
  border: 1px solid var(--lz-linea);
  border-radius: var(--radius-gota-s);
  box-shadow: var(--sombra-1);
  padding: var(--esp-4) var(--esp-5);
}
.lzb-ficha .lzb-lateral__titulo { margin-bottom: var(--esp-4); }
.lzb-ficha__lista { margin: 0; display: grid; gap: var(--esp-3); }
.lzb-ficha__lista > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--esp-3);
}
.lzb-ficha__lista dt {
  font-size: var(--texto-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lz-tinta-suave);
}
.lzb-ficha__lista dd {
  margin: 0;
  font-family: var(--fuente-marca);
  font-weight: 600;
  font-size: var(--texto-s);
  color: var(--lz-tinta);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Índice (TOC de animaciones.js): solo escritorio; oculto sin JS ([hidden]). */
.lzb-toc {
  display: none;
  border-top: 2px solid var(--lz-tinta);
  padding-top: var(--esp-4);
}
@media (min-width: 64rem) {
  .lzb-toc { display: block; }
  .lzb-toc[hidden] { display: none; }
}
.toc { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; }
.toc__item--h3 { padding-left: var(--esp-3); }
.toc__enlace {
  display: block;
  padding: 0.32rem var(--esp-3);
  border-left: 2px solid var(--lz-linea);
  font-size: var(--texto-s);
  color: var(--lz-tinta-suave);
  text-decoration: none;
  transition: color var(--dur-v2-1) ease, border-color var(--dur-v2-1) ease;
}
.toc__enlace:hover { color: var(--lz-tinta); border-color: var(--lz-tinta-suave); }
.toc__enlace.activo {
  color: var(--lz-tinta);
  font-weight: 600;
  border-color: var(--c-amarillo-500);
}
.toc__enlace:focus-visible {
  outline: 2px solid var(--c-foco);
  outline-offset: 2px;
  border-radius: var(--radius-vivo);
}

/* Compartir */
.lzb-compartir { border-top: 2px solid var(--lz-tinta); padding-top: var(--esp-4); }
.lzb-compartir__botones { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.lzb-compartir__boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-width: 2.6rem;
  min-height: 2.6rem;
  padding: 0 0.7rem;
  border: 1px solid var(--lz-linea);
  border-radius: var(--radius-gota-s);
  background: var(--c-blanco);
  color: var(--lz-tinta);
  font-family: var(--fuente);
  font-weight: 600;
  font-size: var(--texto-s);
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--sombra-1);
  transition: border-radius var(--dur-v2-2) var(--ease-salida-v2),
              border-color var(--dur-v2-1) ease,
              box-shadow var(--dur-v2-1) ease,
              color var(--dur-v2-1) ease;
}
.lzb-compartir__boton svg { width: 1.15rem; height: 1.15rem; flex: none; }
.lzb-compartir__boton:hover,
.lzb-compartir__boton:focus-visible {
  border-radius: var(--radius-vivo);
  border-color: var(--lz-tinta);
  box-shadow: var(--sombra-2);
}
.lzb-compartir__boton:focus-visible { outline: 2px solid var(--c-foco); outline-offset: 2px; }
/* El rótulo del botón nativo cambia a "Enlace copiado": nunca parte. */
.lzb-compartir__texto { white-space: nowrap; }
.lzb-compartir__nativo.es-copiado { border-color: var(--c-exito); color: var(--c-exito); }
/* El botón nativo requiere JS (Web Share / portapapeles). */
html:not(.js) .lzb-compartir__nativo { display: none; }

/* =================== ARTÍCULO · prosa =================== */

.lzb-prosa {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--lz-tinta);
  counter-reset: lzb-apartado;
}
.lzb-prosa > :first-child { margin-top: 0; }

/* Los encabezados no quedan bajo la cabecera fija al saltar desde el índice. */
.lzb-prosa :is(h2, h3) {
  font-family: var(--fuente-marca);
  letter-spacing: -0.015em;
  color: var(--lz-tinta);
  scroll-margin-top: calc(4.5rem + var(--esp-4));
  text-wrap: balance;
}
.lzb-prosa h2 {
  font-size: var(--texto-2xl);
  line-height: 1.15;
  margin: var(--esp-8) 0 var(--esp-3);
  counter-increment: lzb-apartado;
}
/* Índice numérico editorial por apartado (mismo gesto que las etiquetas). */
.lzb-prosa h2::before {
  content: counter(lzb-apartado, decimal-leading-zero);
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--c-amarillo-500);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.3rem;
}
/* Acento de apartado: una regla azul corta que se desvanece (no una línea
   plana a todo el ancho) — da ritmo y profundidad a cada sección. */
.lzb-prosa h2::after {
  content: "";
  display: block;
  width: 3.25rem;
  height: 2px;
  margin-top: var(--esp-3);
  border-radius: 2px;
  background: linear-gradient(90deg, var(--lg-blue), transparent);
}
.lzb-prosa h3 {
  font-size: var(--texto-xl);
  line-height: 1.2;
  margin: var(--esp-6) 0 var(--esp-2);
}

.lzb-prosa p { margin: 0 0 var(--esp-4); text-wrap: pretty; }

/* Entradilla de cuerpo: el primer párrafo respira más grande. */
.lzb-prosa > p:first-child { font-size: 1.15rem; }

/* Capitular editorial si el artículo abre con párrafo (tinta, no ámbar). */
.lzb-prosa > p:first-child::first-letter {
  float: left;
  margin: 0.05em 0.12em 0 0;
  font-family: var(--fuente-marca);
  font-weight: 700;
  font-size: 3.3em;
  line-height: 0.72;
  color: var(--c-marino-800);
}

.lzb-prosa ul,
.lzb-prosa ol {
  margin: 0 0 var(--esp-4);
  padding-left: 1.4rem;
  display: grid;
  gap: var(--esp-2);
}
.lzb-prosa li::marker { color: var(--lg-blue); font-weight: 700; }

/* Cita: plano de papel con filo azul, radio gota y una comilla decorativa
   grande y tenue detrás (profundidad, sin caja vacía). */
.lzb-prosa blockquote {
  position: relative;
  margin: var(--esp-6) 0;
  padding: var(--esp-5) var(--esp-5) var(--esp-5) var(--esp-6);
  background: var(--lz-papel-2);
  border-left: 3px solid var(--lg-blue);
  border-radius: 0 var(--radius-gota-s) var(--radius-gota-s) 0;
  box-shadow: var(--sombra-1);
  color: var(--lz-tinta);
  font-weight: 500;
  overflow: hidden;
}
.lzb-prosa blockquote::before {
  content: "\201C";
  position: absolute;
  top: -0.55rem;
  right: 0.5rem;
  font-family: var(--fuente-marca);
  font-weight: 700;
  font-size: 5rem;
  line-height: 1;
  color: var(--lg-blue);
  opacity: 0.12;
  pointer-events: none;
}
.lzb-prosa blockquote p { position: relative; }
.lzb-prosa blockquote p:last-child { margin-bottom: 0; }

.lzb-prosa strong { color: var(--lz-tinta); }

.lzb-prosa a {
  color: var(--c-marino-700);
  text-decoration-thickness: 2px;
  text-decoration-color: var(--lg-blue);
  text-underline-offset: 2px;
}
.lzb-prosa a:hover { color: var(--c-marino-900); }
.lzb-prosa a:focus-visible {
  outline: 2px solid var(--c-foco);
  outline-offset: 2px;
  border-radius: var(--radius-vivo);
}

/* Separador de prosa: no una línea plana, sino una regla corta y centrada
   con un nodo azul (el "dato") en medio. */
.lzb-prosa hr {
  border: 0;
  height: 1px;
  width: min(100%, 18rem);
  margin: var(--esp-8) auto;
  background: linear-gradient(90deg, transparent, var(--lz-linea) 25%, var(--lz-linea) 75%, transparent);
  position: relative;
  overflow: visible;
}
.lzb-prosa hr::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--lg-blue);
  border-radius: 1.5px;
}

.lzb-prosa img {
  max-width: 100%;
  display: block;
  margin: var(--esp-5) auto;
  border-radius: var(--radius-gota-s);
  box-shadow: var(--sombra-2);
}

.lzb-prosa code {
  background: var(--lz-papel-2);
  border: 1px solid var(--lz-linea);
  border-radius: var(--radius-vivo);
  padding: 0.1em 0.35em;
  font-size: 0.9em;
}
.lzb-prosa pre {
  margin: 0 0 var(--esp-4);
  padding: 1.1rem 1.25rem;
  background: var(--c-marino-950);
  color: var(--c-texto-inverso);
  border-radius: var(--radius-gota-s);
  box-shadow: var(--sombra-2);
  overflow-x: auto;
}
.lzb-prosa pre code {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font-size: 0.9rem;
}

/* Tablas de las guías (extensión tables): reglas editoriales, sin cajas. */
.lzb-prosa table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--esp-5) 0;
  font-size: var(--texto-s);
  font-variant-numeric: tabular-nums;
}
.lzb-prosa th {
  text-align: left;
  font-family: var(--fuente-marca);
  font-weight: 600;
  padding: 0.6rem 0.75rem;
  border-bottom: 2px solid var(--lz-tinta);
}
.lzb-prosa td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--lz-linea);
  vertical-align: top;
}

/* =================== ARTÍCULO · CTA final (navy) ===================
   El plano más HONDO del artículo (sombra-4): cierra la lectura con el
   mayor peso visual. Grano de marca (.lz-navy) + un glow azul radial que
   nace de la esquina, todo recortado al radio gota. */
.lzb-cta {
  position: relative;
  margin-top: var(--esp-10);
  padding: clamp(2rem, 5vw, 3.25rem);
  border-radius: var(--radius-gota);
  overflow: clip;
  box-shadow: var(--sombra-4);
  display: grid;
  justify-items: start;
  gap: var(--esp-4);
}
.lzb-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 88% 0%, rgba(62, 160, 255, 0.30), transparent 62%);
  pointer-events: none;
}
.lzb-cta__titulo { max-width: 16ch; text-wrap: balance; }

/* =================== MOVIMIENTO (tras la puerta) ===================
   El movimiento restante de esta hoja: la vuelta al blog del artículo y el
   parallax ≤6px de la placa navy del artículo. (El velo de hover de la lista
   trae su propia puerta, más arriba.) Sin soporte de linear() cae al
   cubic-bezier; con reduced-motion nada se mueve y el estado de reposo
   (visible y quieto) es el único que existe. */
@media (prefers-reduced-motion: no-preference) {
  /* La vuelta al blog apunta a la izquierda: su gesto también. */
  .lzb-volver:hover svg,
  .lzb-volver:focus-visible svg { translate: -5px 0; }

  /* Parallax ≤6px de la placa navy del artículo, ligado al avance del scroll. */
  @supports (animation-timeline: view()) {
    .lzb-cabeza__icono {
      animation: lzb-deriva linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    @keyframes lzb-deriva {
      from { translate: 0 6px; }
      to { translate: 0 -6px; }
    }
  }
}

/* =================== ARTÍCULO · revelado al scroll (2026-08-07) ===========
   Las áreas del contenido BROTAN al entrar en pantalla (alzado + fundido
   ligado al scroll, CSS puro con view()). Doble puerta: sin soporte o con
   reduced-motion no pasa nada — el texto está completo y quieto. Lo que ya
   nace dentro del viewport aparece completo (su rango de entrada ya pasó). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .lzb-prosa > * {
      animation: lzb-brota linear both;
      animation-timeline: view();
      /* hasta cover 30%: el gesto dura un buen tramo de scroll y SE VE
         (con entry 55% terminaba nada mas asomar y pasaba desapercibido) */
      animation-range: entry 0% cover 30%;
    }
    @keyframes lzb-brota {
      from { opacity: 0; translate: 0 34px; }
      to   { opacity: 1; translate: 0 0; }
    }
  }
}

/* FALLBACK sin view() (Firefox y navegadores viejos): publica.js detecta la
   falta de soporte, marca los bloques con .lzb-espera y un IO los va soltando
   con .is-brotado al entrar en pantalla. El estado oculto SOLO existe si el
   JS llego a ponerlo: sin JS (o con reduced-motion, que el JS respeta) no se
   esconde nada. */
@media (prefers-reduced-motion: no-preference) {
  .lzb-espera { opacity: 0; translate: 0 34px; }
  .lzb-espera.is-brotado {
    opacity: 1;
    translate: 0 0;
    transition: opacity 640ms var(--ease-salida-v2), translate 640ms var(--ease-gota);
  }
}