/**
 * sitio.css — los componentes del archivo.
 *
 * Depende de tokens.css, que debe enlazarse ANTES que este archivo.
 * Las clases están en español y son términos de oficio, no de interfaz —
 * folio, rótulo, legajo, lacre, rúbrica, filete, placa, tomo, tapa, cartela,
 * plaquita, cinta, consola, colofón. Esa es la metáfora del sitio y se respeta.
 *
 * ORDEN DEL DOCUMENTO (index.html):
 *   hero · I Biografía · II Podcast · III En la prensa · IV La biblioteca
 *   · V Trayectoria · VI Contacto
 *
 * ═══ QUÉ COMPARTEN LAS TRES PÁGINAS ═══
 * index.html, libros.html y titulos.html enlazan este mismo archivo. Todo lo
 * marcado «[COMPARTIDO]» se ve en las tres y no se toca a la ligera. Los 51
 * facsímiles de libros/*.html son autocontenidos y NO enlazan este archivo.
 */

/* ═══════════════════════════════════════════════════════════════
   BASE                                                [COMPARTIDO]
   ═══════════════════════════════════════════════════════════════ */
* { box-sizing: border-box; margin: 0 }
html { scroll-behavior: smooth }
html, body {
  max-width: 100%; overflow-x: clip;   /* clip, no hidden: hidden crea
                                          un scroll container y eso mata
                                          todos los position:sticky */
  /* overscroll-behavior-y: dentro del navegador integrado de Instagram/
     Facebook, el gesto de swipe vertical se lo roba su propia capa de
     "pull" en vez de dejarlo hacer scroll a la pagina, y se siente como
     si la pagina "saltara" a otra parte. contain evita que el gesto se
     propague fuera del documento. */
  overscroll-behavior-y: contain;
}
img { max-width: 100%; height: auto }

body {
  font-family: var(--serif);
  font-size: var(--t-base);
  color: var(--tinta);
  line-height: var(--lh-normal);
  background-color: var(--papel);
  min-height: 100vh;
  /* Cifras elzevirianas en todo el sitio: en una página de historia los años
     (1810, 1819-1831) son texto, no datos de panel de control. */
  font-variant-numeric: oldstyle-nums;
  font-feature-settings: "onum" 1, "kern" 1, "liga" 1;
}

p { text-wrap: pretty }   /* evita la palabra huérfana en la última línea */

/* Texto sólo para lectores de pantalla. Lo consumen los ocho avisos
   «(abre en una pestaña nueva)», el <h3> del aside de datos y la <label>
   del buscador. Sin !important: position:absolute basta, y así el recuento
   de !important del archivo se queda en los seis justificados. */
.vh {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* El atributo hidden lo pone el filtro del buscador de libros.html sobre las
   fichas que no coinciden, sobre las secciones que quedan vacías y sobre el
   aviso #qAviso. Sin esto, cualquier display distinto de `inline` —y .tomo,
   .card y section lo son— anularía el atributo. */
[hidden] { display: none !important }

/* ── fondo fijo: pergamino de archivo ──                [COMPARTIDO]
   Siete capas, ~1,2 KB, cero imágenes. El orden manda:
   ruido → renglones → manchas → viñeta → base. */
.fondo {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-color: var(--papel-fondo);
  background-image:
    var(--ruido),
    repeating-linear-gradient(0deg, rgba(90, 69, 48, .07) 0 1px, transparent 1px 34px),
    radial-gradient(48rem 34rem at 85% 6%,  rgba(122, 90, 44, .16), transparent 60%),
    radial-gradient(44rem 32rem at 6% 38%,  rgba(90, 69, 48, .13), transparent 58%),
    radial-gradient(50rem 36rem at 80% 92%, rgba(138, 101, 50, .13), transparent 62%),
    radial-gradient(125% 92% at 50% 46%, transparent 50%, rgba(74, 55, 30, .17) 100%),
    linear-gradient(170deg, #F0E6CC 0%, #E5D7B4 55%, var(--papel) 100%);
}

/* ── barra de progreso de lectura ──                    [COMPARTIDO] */
#progreso {
  position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 90;
  background: linear-gradient(90deg, var(--oro), var(--oro-claro));
  box-shadow: 0 0 8px rgba(169, 129, 62, .55);
}

/* ── panel pergamino ──                                 [COMPARTIDO] */
.g {
  background: linear-gradient(180deg, rgba(255, 253, 247, .75), rgba(252, 247, 235, .55) 45%), var(--panel);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
  border: 1px solid var(--linea);
  border-top-color: rgba(255, 255, 255, .9);
  border-radius: var(--r-md);
  box-shadow: var(--s-2), var(--brillo-interior);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .g { background: var(--panel-solido) }
  header.nav { background: #F1E8D2 }
}

/* ═══════════════════════════════════════════════════════════════
   FOCO — un solo color por superficie.                 [COMPARTIDO]
   El lacre da 7.10:1 sobre papel. Dentro de .banda-noche caería a
   1.58:1, así que la banda REDEFINE --foco a --oro-luz (9.05:1) y
   todo control de dentro lo hereda sin una sola regla extra.
   ═══════════════════════════════════════════════════════════════ */
:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px }
:focus:not(:focus-visible) { outline: none }

/* ── navegación ──                                      [COMPARTIDO] */
.skip-link {
  position: absolute; left: var(--e-4); top: -60px; z-index: 100;
  display: inline-flex; align-items: center; min-height: var(--tactil);
  background: var(--tinta); color: var(--sobre-oscuro);
  font-family: var(--sans); font-size: var(--t-sm);
  padding: 0 var(--e-4); border-radius: 0 0 var(--r-sm) var(--r-sm);
  text-decoration: none;
  transition: top var(--d-2) var(--ease-suave);
}
.skip-link:focus { top: 0 }

header.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(240, 231, 209, .88);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  border-bottom: 1px solid var(--linea);
  box-shadow: 0 3px 18px rgba(74, 55, 30, .12);
}
nav.principal {
  max-width: var(--ancho-max); margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 0 var(--e-5);
  align-items: center; justify-content: center;
  padding: var(--e-3) var(--e-4);
  font-family: var(--sans); font-size: var(--t-xs);
}
/* Área táctil de 44px en todos los enlaces de la nav (WCAG 2.5.5).
   El tamaño subió de --t-2xs (10.5px) a --t-xs (12-13px): era el texto más
   pequeño del sitio y a la vez la navegación primaria. */
nav.principal a {
  display: inline-flex; align-items: center; min-height: var(--tactil);
  color: var(--marron-sua); text-decoration: none;
  letter-spacing: var(--track-amplio); text-transform: uppercase;
  white-space: nowrap; position: relative;
  transition: color var(--d-3) var(--ease-salida);
}
/* La marca del nav ya no son tres iniciales entre un recuadro sino su logo
   real. Va por máscara, igual que la rúbrica del hero: así hereda el color del
   nav —y su hover— en vez de traer un color fijo que chocaría con el papel. El
   texto «A·M·G» sigue en el marcado, oculto, para el lector de pantalla. */
nav.principal .brand {
  margin-right: auto; padding: 0; border: 0;
  width: clamp(78px, 12vw, 104px); height: 34px; flex: none;
  overflow: hidden; text-indent: -200vw; white-space: nowrap;
  background-color: currentColor; color: var(--marron);
  -webkit-mask: url("../img/marca/rubrica-amg.svg") left center / contain no-repeat;
  mask: url("../img/marca/rubrica-amg.svg") left center / contain no-repeat;
}
nav.principal .brand:hover, nav.principal .brand:focus-visible { color: var(--oro-tinta) }
nav.principal a:not(.brand)::after {
  content: ""; position: absolute; left: 0; bottom: 11px; width: 100%; height: 1px;
  background: var(--oro-claro); transform: scaleX(0); transform-origin: left;
  transition: transform var(--d-3) var(--ease-salida);
}
nav.principal a:not(.brand):hover::after,
nav.principal a:not(.brand):focus-visible::after { transform: scaleX(1) }
nav.principal a:hover, nav.principal a:focus-visible { color: var(--oro-tinta) }

/* ── estructura ──                                      [COMPARTIDO] */
.wrap { max-width: var(--ancho-max); margin: 0 auto; padding: 0 var(--e-5) }
section { padding: var(--e-seccion) 0; position: relative }
section[id] { scroll-margin-top: var(--nav-h) }

/* Un tinte muy leve y distinto por folio, para que se note el cambio de
   sección al pasar. Deliberadamente sutil: la banda oscura del podcast sigue
   siendo el único contraste fuerte del sitio (ver comentario debajo); esto es
   variación de temperatura del papel, no una segunda banda que le compita.
   Va en degradado, no en color plano: a color plano, el padding vacío antes
   del pie —o entre dos secciones— se veía como un recuadro suelto sin nada
   dentro. Con el tinte apagándose hacia los dos bordes, el relleno vacío
   vuelve a fundirse con el papel de alrededor. */
#biografia   { background: linear-gradient(rgba(197, 165, 114, 0), rgba(197, 165, 114, .20) 18%, rgba(197, 165, 114, .20) 82%, rgba(197, 165, 114, 0)) }
#prensa      { background: linear-gradient(rgba(120, 132, 96,  0), rgba(120, 132, 96,  .16) 18%, rgba(120, 132, 96,  .16) 82%, rgba(120, 132, 96,  0)) }
#biblioteca  { background: linear-gradient(rgba(179, 128, 82,  0), rgba(179, 128, 82,  .22) 18%, rgba(179, 128, 82,  .22) 82%, rgba(179, 128, 82,  0)) }
#trayectoria { background: linear-gradient(rgba(163, 108, 108, 0), rgba(163, 108, 108, .18) 18%, rgba(163, 108, 108, .18) 82%, rgba(163, 108, 108, 0)) }
#contacto    { background: linear-gradient(rgba(140, 128, 84,  0), rgba(140, 128, 84,  .20) 18%, rgba(140, 128, 84,  .20) 82%, rgba(140, 128, 84,  0)) }

/* ── la banda oscura: SÓLO el podcast ──
   Es el único contraste de superficie que queda en el sitio, y por eso vale.
   Con dos bandas alternas (la clara y la oscura de antes) ninguna significaba
   nada; con una sola, la sección que la lleva es la que manda. */
.banda-noche {
  --foco: var(--oro-luz);        /* el lacre da 1.58:1 aquí dentro */
  color: var(--sobre-oscuro);
  background-color: var(--noche);
  background-image:
    radial-gradient(70rem 40rem at 82% 0%, rgba(232, 198, 142, .10), transparent 62%),
    linear-gradient(180deg, var(--noche-alta), var(--noche-baja) 62%, var(--noche));
  position: relative;
  /* clip-path, NO overflow:hidden. Es lo que recorta el ::before de aquí abajo
     a los límites de esta banda. Comprobado en el navegador: con overflow el
     ::before NO se recorta —se derrama sobre toda la pantalla— porque su
     posición se resuelve contra el viewport, no contra esta caja; con
     clip-path sí se recorta, y sigue anclado al viewport. */
  clip-path: inset(0);
  border-top: 1px solid var(--linea-noche);
  border-bottom: 1px solid var(--linea-noche);
  box-shadow: inset 0 18px 34px -26px rgba(0, 0, 0, .8);
}
/* EL MISMO RENGLÓN DEL PERGAMINO, SOLO QUE CLARO.
   Mismos parámetros exactos que la capa de renglones de .fondo —mismo origen,
   mismo paso de 34px, misma position:fixed— así que es literalmente el mismo
   dibujo, en el mismo sitio, igual de quieto. Lo único distinto es la tinta:
   blanca en vez de sepia, para que se perciba sobre el color oscuro que esta
   sección pone encima.
   Va con position:fixed real, igual que .fondo, y no con
   background-attachment:fixed (que los navegadores móviles no componen) ni
   con una posición recalculada por JavaScript en cada cuadro (que en el
   scroll con inercia de un teléfono llega tarde y se ve como si las líneas
   se movieran solas). Al ser composición nativa, en el móvil se comporta
   igual que en el escritorio. */
.banda-noche::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, .085) 0 1px, transparent 1px 34px);
}
/* El texto se pinta ENCIMA del renglón: sin este position:relative, el
   contenido —sin posicionar— pinta antes que cualquier descendiente
   posicionado, y el renglón le pasaría por encima a la letra. */
.banda-noche > .wrap { position: relative; z-index: 1 }

/* ── encabezado de sección: el folio ──                 [COMPARTIDO: h2, .sub]
   El numeral romano es una MARCA DE AGUA: va detrás del contenido del
   encabezado (z-index:-1 dentro del contexto de apilamiento que crea .enc),
   por lo que nunca se sale del panel ni empuja nada. El rótulo legible es
   .enc-rotulo. Todo .enc-meta lleva aria-hidden en el marcado, así que el
   lector de pantalla oye «Biografía», no «Folio dos, uno, Biografía». */
.enc { position: relative; z-index: 0; margin-bottom: var(--e-4) }
.enc-meta { margin-bottom: var(--e-3); line-height: 1 }
.enc-num {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%); z-index: -1;
  font-family: var(--serif); font-size: var(--t-display); line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(138, 101, 50, .22);
  font-variant-numeric: normal; font-feature-settings: normal;
  pointer-events: none; user-select: none; -webkit-user-select: none;
  text-shadow: -1px -1px 0 rgba(255, 251, 235, .35), 1px 1.5px 1px rgba(58, 45, 29, .28);
}
@supports not (-webkit-text-stroke: 1px black) {
  .enc-num { color: rgba(138, 101, 50, .10); text-shadow: none }
}
.enc-rotulo {
  display: inline-flex; align-items: center; gap: var(--e-3);
  font-family: var(--sans); font-size: var(--t-2xs);
  letter-spacing: var(--track-rotulo); text-transform: uppercase;
  color: var(--oro-tinta);
}
h2 {
  font-weight: 400; font-size: var(--t-3xl); color: var(--marron);
  margin-bottom: var(--e-2); overflow-wrap: break-word; line-height: var(--lh-apretado);
  display: inline-block; max-width: 100%; text-wrap: balance;
}
/* El filete se conserva: es lo que cierra el encabezado en libros.html y
   titulos.html, donde no hay .enc-meta que lo anuncie. */
h2::after {
  content: ""; display: block; width: 100%; height: 2px; margin-top: var(--e-3);
  background: linear-gradient(90deg, var(--oro), transparent);
}
.sub {
  font-family: var(--sans); font-size: var(--t-sm); color: var(--marron-sua);
  margin: var(--e-3) 0 var(--e-6);
  max-width: var(--medida-corta);
}
.sub em { font-style: italic; color: var(--marron) }
.kicker {
  font-family: var(--sans); font-size: var(--t-2xs); letter-spacing: var(--track-marca);
  text-transform: uppercase; color: var(--oro-tinta); margin-bottom: var(--e-3);
}
/* cabecera de página interior — libros.html y titulos.html */
.page-hero { padding: var(--e-7) 0 var(--e-1) }
.page-hero h1 {
  font-weight: 400; font-size: var(--t-2xl); color: var(--marron); line-height: var(--lh-corto);
}

/* aparición al hacer scroll ──                          [COMPARTIDO]
   El IntersectionObserver que la dispara usa threshold:0 con rootMargin
   negativo. No se sube: con threshold .12 los paneles más altos que la
   pantalla no llegaban a cumplirlo NUNCA y se quedaban invisibles. */
/* El retardo va DENTRO del atajo. Escrito como declaración suelta antes de
   `transition` no servía de nada: el atajo reinicia transition-delay a 0s y
   los --rev-delay del marcado no producían ningún escalonado. */
[data-rev] {
  opacity: 0; transform: translateY(26px);
  transition: opacity var(--d-4) var(--ease-salida) var(--rev-delay, 0s),
              transform var(--d-4) var(--ease-salida) var(--rev-delay, 0s);
}
[data-rev].vis { opacity: 1; transform: none }

/* ═══════════════════════════════════════════════════════════════
   HERO «frontispicio»                                  [sólo index]
   Rejilla asimétrica: la palabra a la izquierda, el hombre a la
   derecha. Debajo del apellido, la rúbrica; debajo del retrato, el
   sello de lacre anclado a la esquina de la FOTOGRAFÍA (no del
   figure), para que el pie pueda crecer sin descolgarlo.
   ═══════════════════════════════════════════════════════════════ */
.hero {
  /* svh, no vh: en móvil la barra de URL se oculta al bajar y vuelve al subir.
     Con vh el alto del hero cambia en pleno gesto y la página da un salto.
     svh mide siempre con la barra visible. vh queda de respaldo. */
  min-height: 78vh;
  min-height: 78svh;
  display: flex; flex-direction: column; justify-content: center;
  position: relative; padding: var(--e-7) 0 var(--e-8); overflow: visible;
}
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 140px; z-index: -1;
  background: linear-gradient(180deg, transparent, rgba(58, 45, 29, .09) 65%, rgba(58, 45, 29, .15));
  pointer-events: none;
}
.hero + section { position: relative; box-shadow: inset 0 24px 32px -28px rgba(58, 45, 29, .32) }
.rosa {
  position: absolute; right: -140px; top: 44%; transform: translateY(-50%);
  width: min(560px, 58vw); color: var(--oro); opacity: .16; z-index: -1;
  mix-blend-mode: multiply;
  filter: drop-shadow(-1px -1px 0 rgba(255, 247, 225, .18)) drop-shadow(2px 3px 3px rgba(58, 45, 29, .22));
  animation: girar 150s var(--ease-lineal) infinite;
}
@supports not (mix-blend-mode: multiply) { .rosa { opacity: .11; mix-blend-mode: normal } }
/* Pausa fuera del viewport: una animación corriendo invisible es batería
   quemada. La clase .fuera la pone el IntersectionObserver del pie. */
.hero.fuera .rosa, .hero.fuera h1.nombre-mayor .apellido { animation-play-state: paused }
@keyframes girar { to { transform: translateY(-50%) rotate(360deg) } }

.hero-rejilla {
  display: grid; grid-template-columns: 1.08fr .92fr; gap: var(--e-8);
  align-items: center;
}
.hero-texto { min-width: 0 }
.hero-texto .kicker { margin-bottom: var(--e-4) }
h1.nombre-mayor { font-weight: 400; line-height: .98; color: var(--marron) }
h1.nombre-mayor .nombre {
  display: block; font-size: var(--t-lg);
  letter-spacing: var(--track-nombre); text-transform: uppercase; color: var(--marron-sua);
  margin-bottom: var(--e-3);
}
h1.nombre-mayor .apellido {
  display: block; font-size: var(--t-display); letter-spacing: var(--track-display);
  line-height: var(--lh-apretado);
  background: linear-gradient(105deg, var(--marron) 0 38%, var(--oro-claro) 50%, var(--marron) 62% 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--marron);
  animation: destello 9s var(--ease-entrada) infinite; text-wrap: balance;
}
@keyframes destello { 0%, 100% { background-position: 0% 0 } 50% { background-position: 100% 0 } }
@supports not (-webkit-background-clip: text) {
  h1.nombre-mayor .apellido { background: none; -webkit-text-fill-color: currentColor; color: var(--marron) }
}
/* La rúbrica salió del hero: repetía el nombre que ya está compuesto en grande
   justo encima. Su sitio ahora es la marca del nav y el pie. La regla se queda
   por si vuelve a hacer falta en otra sección; hoy no la usa nadie. */
.rubrica {
  display: block; width: min(340px, 78%); aspect-ratio: 631 / 456;
  margin: var(--e-3) 0 0; color: var(--oro-claro);
  background-color: currentColor;
  -webkit-mask: url("../img/marca/rubrica-amg.svg") left center / contain no-repeat;
  mask: url("../img/marca/rubrica-amg.svg") left center / contain no-repeat;
  animation: firmar var(--d-5) .7s var(--ease-suave) both;
}
@keyframes firmar { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }

.hero .lead {
  font-family: var(--sans); font-size: var(--t-base); color: var(--marron-sua);
  max-width: var(--medida-corta); line-height: 1.85; margin-top: var(--e-5);
}
.hero .lead b { color: var(--oro-tinta); font-weight: 600 }

/* ── el guarismo: una cifra grande y una etiqueta ──
   Se usa tres veces (51 en el hero, 106 en el podcast, 51 en la biblioteca)
   y en las tres es el mismo objeto tipográfico, no tres inventos. */
.guarismo {
  display: flex; align-items: baseline; gap: var(--e-3);
  margin-top: var(--e-6); flex-wrap: wrap;
}
.guarismo b {
  font-family: var(--serif); font-weight: 400; font-size: var(--t-xl);
  line-height: .9; color: var(--oro-tinta);
  font-variant-numeric: oldstyle-nums; font-feature-settings: "onum" 1;
}
.guarismo span {
  font-family: var(--sans); font-size: var(--t-xs);
  letter-spacing: var(--track-amplio); text-transform: uppercase;
  color: var(--marron-sua); max-width: 22ch; line-height: var(--lh-corto);
}

.hero-cta { display: flex; gap: var(--e-4); margin-top: var(--e-6); flex-wrap: wrap }
.cta {
  display: inline-flex; align-items: center; min-height: var(--tactil);
  background: var(--marron); color: var(--sobre-oscuro);   /* 8.01:1 */
  padding: 0 var(--e-6); border-radius: var(--r-pill); text-decoration: none;
  font-family: var(--sans); font-size: var(--t-sm); letter-spacing: .04em;
  transition: background var(--d-2) var(--ease-salida), transform var(--d-2) var(--ease-salida);
}
/* Antes el hover pasaba a --oro y dejaba el par en 4.68:1, a un pelo del filo.
   Oscurecer en vez de aclarar sube a 11.95:1 y además es lo que hace el resto
   del sitio: el estado activo es MÁS tinta, no menos. */
.cta:hover { background: var(--tinta); transform: translateY(-2px) }
.cta:active, .cta-ghost:active { transform: scale(.96) }
.cta-ghost {
  display: inline-flex; align-items: center; min-height: var(--tactil);
  border: 1px solid var(--oro);        /* 3.98:1 — cumple SC 1.4.11 */
  color: var(--oro-tinta);             /* 5.53:1 */
  padding: 0 var(--e-6); border-radius: var(--r-pill); text-decoration: none;
  font-family: var(--sans); font-size: var(--t-sm); letter-spacing: .04em;
  transition: background var(--d-2) var(--ease-salida), color var(--d-2) var(--ease-salida),
              transform var(--d-2) var(--ease-salida);
}
.cta-ghost:hover, .cta-ghost:focus-visible {
  background: var(--oro-tinta); color: var(--panel-solido); transform: translateY(-2px);   /* 6.79:1 */
}

/* ── credenciales: las tres instituciones, con su logotipo real ──
   Van antes de los botones —quedaban perdidas al fondo del hero—, así que el
   filete que las separaba de las CTA ahora las separa del párrafo. */
.credenciales {
  list-style: none; padding: 0; margin-top: var(--e-6);
  display: flex; flex-wrap: wrap; gap: var(--e-6);
  border-top: 1px solid var(--linea-sutil); padding-top: var(--e-5);
}
.credencial { display: flex; align-items: center; gap: var(--e-3) }
/* Sin mix-blend-mode. Los dos ficheros YA traen canal alfa (academia-historia.png
   200×200 RGBA con las esquinas a alpha 0; uis.webp 120×58 RGBA), así que no hay
   caja blanca que borrar: multiply sólo ensuciaba el amarillo del escudo y volvía
   beige el wordmark BLANCO de la UIS. Requisito del cliente: color de marca real. */
.cred-logo { flex: none }
/* No hay archivo del escudo real del AGN todavía: en vez de un logo inventado
   que aparente serlo, un sello tipográfico neutro, en la misma paleta que el
   resto de la identidad. Se sustituye por el logo real en cuanto se consiga. */
.cred-monograma {
  width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--oro); border-radius: 50%;
  font-family: var(--serif); font-size: var(--t-xs); letter-spacing: .06em;
  color: var(--oro-tinta);
}
.cred-texto { display: flex; flex-direction: column; font-family: var(--sans) }
.cred-texto b {
  font-size: var(--t-sm); font-weight: 600; color: var(--marron); letter-spacing: .01em;
}
.cred-texto {
  font-size: var(--t-xs); color: var(--marron-sua); line-height: var(--lh-corto);
}

/* ── el retrato y su sello ──
   El figure es una rejilla de dos filas: fotografía y pie. El sello se coloca
   en la MISMA celda que la fotografía (1/1) y se ancla a su esquina inferior
   derecha con márgenes negativos. Así el pie puede crecer a dos o tres líneas
   sin arrastrar el lacre, que es lo que pasaba con `bottom` en porcentaje. */
.retrato {
  display: grid; grid-template-rows: auto auto;
  position: relative; justify-self: center; max-width: 400px; width: 100%;
}
.retrato img {
  grid-area: 1 / 1; display: block; width: 100%;
  border: 1px solid rgba(138, 101, 50, .45); border-radius: var(--r-xs);
  box-shadow: 0 30px 70px rgba(58, 45, 29, .40), 0 6px 18px rgba(58, 45, 29, .24);
  filter: sepia(.08) contrast(1.02);
}
.retrato-pie {
  grid-area: 2 / 1; margin-top: var(--e-4); text-align: center;
  font-family: var(--serif); font-style: italic; font-size: var(--t-xs);
  color: var(--marron-sua); line-height: 1.5; text-wrap: balance;
}
.sello-wrap {
  grid-area: 1 / 1; position: relative; align-self: end; justify-self: end;
  width: 104px; margin: 0 -28px -30px 0;
  transform: rotate(7.6deg); transition: transform var(--d-3) var(--ease-salida);
}
.retrato:hover .sello-wrap { transform: rotate(4.6deg) scale(1.04) }
.sello-wrap::before {
  content: ""; position: absolute; left: 10%; top: 56%; width: 80%; height: 44%;
  background: radial-gradient(closest-side, rgba(48, 36, 23, .45), rgba(48, 36, 23, 0) 72%);
  filter: blur(4px); transform: rotate(-8deg); pointer-events: none; z-index: -1;
}
.sello { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 14px rgba(58, 30, 17, .4)) }

/* ═══════════════════════════════════════════════════════════════
   I · BIOGRAFÍA                                        [sólo index]
   Una sola columna de prosa a --medida, con los datos duros en un
   aside a la derecha. Las dos columnas de antes obligaban al ojo a
   subir y bajar dentro de un mismo panel: eso es un periódico, no
   una biografía.
   ═══════════════════════════════════════════════════════════════ */
.bio-panel {
  padding: var(--e-7);
  display: grid; grid-template-columns: minmax(0, 1fr) 260px;
  gap: 0 var(--e-7); align-items: start;
}
.bio-panel > .enc, .bio-panel > .sub { grid-column: 1 / -1 }
.bio {
  grid-column: 1; max-width: var(--medida);
  font-size: var(--t-lectura); text-align: justify; hyphens: auto;
  orphans: 3; widows: 3;
}
.bio.escribiendo { text-align: left }
.bio p + p { margin-top: var(--e-3); text-indent: 1.5em }
.bio em { font-style: italic }
.bio > p:first-child::first-letter {
  font-size: 3.4em; float: left; line-height: .82;
  padding: var(--e-1) var(--e-3) 0 0; color: var(--lacre); font-family: var(--serif);
}
.bio.escribiendo p:last-child::after {
  content: "▍"; color: var(--oro-tinta); animation: parpadeo .9s step-end infinite;
}
@keyframes parpadeo { 50% { opacity: 0 } }

.bio-datos {
  grid-column: 2; border-left: 1px solid var(--linea-sutil); padding-left: var(--e-5);
}
.bio-datos .dato { padding: var(--e-3) 0; border-bottom: 1px solid var(--linea-sutil) }
.bio-datos .dato:last-child { border-bottom: none }
.dato b {
  display: block; font-family: var(--sans); font-size: var(--t-2xs);
  letter-spacing: var(--track-amplio); text-transform: uppercase;
  color: var(--oro-tinta); margin-bottom: var(--e-1);
}
.dato span { font-family: var(--serif); font-size: var(--t-sm); color: var(--tinta); line-height: 1.45 }

/* ═══════════════════════════════════════════════════════════════
   II · PODCAST — la pieza protagonista       [sólo index, .banda-noche]
   Sube del final del documento al segundo folio y cambia de
   superficie: es la única sección en oscuro de todo el sitio.
   Rejilla de dos columnas: a la izquierda el argumento (lockup ·
   guarismo · tres hechos · dos botones), a la derecha la consola con
   el reproductor real de Spotify. Debajo, a todo el ancho, la cinta
   con los fragmentos de muestra.
   ═══════════════════════════════════════════════════════════════ */
.banda-noche h2 { color: var(--sobre-oscuro) }
.banda-noche h2::after { background: linear-gradient(90deg, var(--oro-luz), transparent) }
.banda-noche .sub { color: var(--sobre-noche-sua); max-width: var(--medida) }
.banda-noche .sub em { color: var(--sobre-oscuro) }
.banda-noche .enc-rotulo { color: var(--oro-luz) }
.banda-noche .enc-num {
  -webkit-text-stroke-color: rgba(232, 198, 142, .28);
  text-shadow: none;
}
@supports not (-webkit-text-stroke: 1px black) {
  .banda-noche .enc-num { color: rgba(232, 198, 142, .12) }
}

.podcast-rejilla {
  display: grid; grid-template-columns: 1fr 1.04fr; gap: var(--e-7);
  align-items: center;
}
.podcast-texto { min-width: 0 }

.lockup { display: inline-flex; align-items: center; gap: var(--e-2) }
.ico-spotify { flex: none; fill: var(--verde-spotify) }
.lockup-txt {
  font-family: var(--sans); font-size: var(--t-2xs);
  letter-spacing: var(--track-marca); text-transform: uppercase;
  color: var(--sobre-noche-sua);
}

/* El guarismo de la banda es el gancho de la sección: 106 episodios se lee
   antes que cualquier frase, y por eso es la única cifra del sitio que sube
   a --t-cifra (52 → 88px). El número vive UNA sola vez en el HTML. */
.podcast-texto .guarismo { margin-top: var(--e-4); align-items: baseline }
.podcast-texto .guarismo b { font-size: var(--t-cifra); color: var(--oro-luz) }
.podcast-texto .guarismo span { color: var(--sobre-noche-sua) }

.hechos { list-style: none; padding: 0; margin-top: var(--e-5); display: grid; gap: var(--e-3) }
.hecho {
  position: relative; padding-left: var(--e-5);
  font-family: var(--sans); font-size: var(--t-sm);
  color: var(--sobre-noche-sua); line-height: var(--lh-normal);
}
.hecho::before {
  content: ""; position: absolute; left: 2px; top: .62em;
  width: 5px; height: 5px; transform: rotate(45deg);
  background: var(--oro-luz);
}
.hecho b { color: var(--sobre-oscuro); font-weight: 600 }

.podcast-cta { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-6) }
/* El verde REAL de Spotify, que sólo es legible aquí: sobre la banda oscura,
   como fondo de botón con --sobre-verde encima, da 6.28:1. Sobre pergamino
   daría 1.95:1 y por eso este botón no existe fuera de la banda. */
.btn-spotify {
  display: inline-flex; align-items: center; gap: var(--e-3);
  min-height: var(--tactil); padding: 0 var(--e-5);
  background: var(--verde-spotify); color: var(--sobre-verde);
  border-radius: var(--r-pill); text-decoration: none;
  font-family: var(--sans); font-size: var(--t-sm); font-weight: 700; letter-spacing: .02em;
  box-shadow: 0 8px 22px rgba(29, 185, 84, .26);
  transition: background var(--d-2) var(--ease-salida), transform var(--d-2) var(--ease-salida),
              box-shadow var(--d-2) var(--ease-salida);
}
.btn-spotify svg { flex: none; fill: currentColor }
.btn-spotify:hover {
  background: var(--verde-spotify-alto); transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(29, 185, 84, .34);
}
.btn-spotify:active { transform: translateY(0) scale(.98) }
.btn-fantasma {
  display: inline-flex; align-items: center; min-height: var(--tactil);
  padding: 0 var(--e-5); border-radius: var(--r-pill);
  border: 1px solid var(--oro-luz); background: transparent; color: var(--oro-luz);
  font-family: var(--sans); font-size: var(--t-sm); cursor: pointer; text-align: center;
  transition: background var(--d-2) var(--ease-salida), color var(--d-2) var(--ease-salida);
}
.btn-fantasma:hover { background: var(--oro-luz); color: var(--noche) }
.btn-fantasma:active { transform: scale(.96) }

/* La consola: marco de archivo para un widget ajeno.
   El fondo es casi negro a propósito — el embed de Spotify trae su propio
   redondeo de esquina, y sobre un fondo oscuro esas cuatro «uñas» dejan de
   verse. Sobre pergamino se veían como cuatro manchas beige. */
.consola {
  border: 1px solid rgba(232, 198, 142, .34); border-radius: var(--r-md);
  background: #101010; overflow: hidden;
  box-shadow: var(--s-noche), var(--brillo-noche);
}
.embed { display: block; width: 100%; border: 0; min-height: 352px }

/* La cinta: los tres fragmentos de muestra. Es el puente entre el embed
   (que necesita conexión y confianza) y el oído del visitante. */
.cinta {
  margin-top: var(--e-6);
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center; gap: var(--e-4);
  padding: var(--e-4) var(--e-5);
  border: 1px solid var(--linea-noche); border-radius: var(--r-md);
  background: rgba(0, 0, 0, .26);
  box-shadow: var(--brillo-noche);
}
.bobina {
  width: 44px; height: 44px; flex: none; color: var(--oro-luz);
  opacity: .55; transition: opacity var(--d-2) var(--ease-salida);
}
.bobina.girando { animation: girar2 3.2s var(--ease-lineal) infinite; opacity: .95 }
@keyframes girar2 { to { transform: rotate(360deg) } }
.cinta-cuerpo { min-width: 0 }
.cinta .titulo {
  font-family: var(--sans); font-size: var(--t-sm); letter-spacing: .04em;
  color: var(--oro-luz); margin-bottom: var(--e-3); line-height: var(--lh-corto);
}
.cinta noscript { grid-column: 1 / -1 }
.cinta-nota {
  font-family: var(--sans); font-size: var(--t-xs);
  color: var(--sobre-noche-sua); line-height: var(--lh-normal);
}
.ctl { display: flex; align-items: center; gap: var(--e-4) }
#btnPlay {
  width: 52px; height: 52px; flex: none; border-radius: var(--r-pill);
  border: none; cursor: pointer;
  background: var(--oro-luz); color: var(--noche);   /* 9.05:1 */
  /* Un <button> no hereda la familia: sin esto el glifo ▶/❚❚ salía en Arial,
     la única aparición de Arial en todo el sitio. */
  font-family: var(--sans); font-size: var(--t-base); line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .38);
  transition: background var(--d-2) var(--ease-salida), transform var(--d-2) var(--ease-salida);
}
#btnPlay:hover { background: var(--sobre-oscuro); transform: scale(1.06) }
#btnPlay:active { transform: scale(.96) }
#btnPlay .ico { display: inline-block; transition: transform var(--d-1) var(--ease-salida) }
/* NO TOCAR EL ANCHO. La barra mide 44px de alto para cumplir WCAG 2.5.5, pero
   la pista visible sigue siendo de 5px: el relleno vertical la engorda sin
   tocar el ANCHO, que es lo que el JS usa para el punto de búsqueda
   (A.currentTime = A.duration * (e.clientX - r.left) / r.width). */
.barra {
  flex: 1; min-width: 0; height: var(--tactil); padding: 19.5px 0;
  background: rgba(232, 198, 142, .26); background-clip: content-box;
  border-radius: 3px; cursor: pointer; position: relative;
  transition: padding var(--d-1) var(--ease-salida);
}
.barra:hover, .barra:focus-visible { padding: 18px 0 }
.barra .fill {
  height: 100%; width: 0%; border-radius: 3px;
  transition: width var(--d-1) var(--ease-lineal);
  background: linear-gradient(90deg, var(--oro-luz), var(--sobre-oscuro));
}
.tiempo {
  font-family: var(--sans); font-size: var(--t-xs); color: var(--sobre-noche-sua);
  min-width: 42px; text-align: right;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.cinta .otro {
  display: inline-flex; align-items: center; min-height: var(--tactil);
  padding: 0 var(--e-5); border-radius: var(--r-pill);
  border: 1px solid var(--oro-luz); background: transparent; color: var(--oro-luz);
  font-family: var(--sans); font-size: var(--t-sm); cursor: pointer; white-space: nowrap;
  transition: background var(--d-2) var(--ease-salida), color var(--d-2) var(--ease-salida);
}
.cinta .otro:hover { background: var(--oro-luz); color: var(--noche) }
.cinta .otro:active { transform: scale(.96) }

/* ═══════════════════════════════════════════════════════════════
   III · EN LA PRENSA                                   [sólo index]
   Cartelas de archivo con el LOGOTIPO REAL de cada medio, no un
   masthead imitado con CSS. Se acabaron las rotaciones: giraban el
   titular entero y a 200 % de zoom recortaban las descendentes.
   ═══════════════════════════════════════════════════════════════ */
.prensa-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: var(--e-5); align-items: stretch;
}
.cartela {
  position: relative; display: flex; flex-direction: column; gap: var(--e-2);
  padding: var(--e-5); text-decoration: none;
  color: var(--tinta);   /* sin esto el <a> hereda el azul #0000EE del navegador */
  background-color: var(--cartela-bajo);
  background-image:
    var(--ruido),
    repeating-linear-gradient(1deg, rgba(90, 69, 48, .045) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, var(--cartela-alto), var(--cartela-bajo));
  background-blend-mode: multiply, normal, normal;
  border: 1px solid rgba(138, 101, 50, .32); border-radius: var(--r-xs);
  box-shadow: var(--s-3), inset 0 1px 0 rgba(255, 255, 255, .55);
  /* opacity va la primera: esta lista SUSTITUYE a la de [data-rev] (misma
     especificidad, más abajo en el archivo). Sin ella las cartelas saltaban de
     0 a 1 sin fundido mientras se deslizaban. */
  transition: opacity var(--d-4) var(--ease-salida) var(--rev-delay, 0s),
              transform var(--d-3) var(--ease-salida), box-shadow var(--d-3) var(--ease-salida),
              border-color var(--d-3) var(--ease-salida);
}
.cartela:hover, .cartela:focus-visible {
  transform: translateY(-6px); border-color: var(--oro);
  box-shadow: var(--s-4), inset 0 1px 0 rgba(255, 255, 255, .6); z-index: 2;
}
.cartela:focus-visible { outline-offset: 4px }
.cartela:active { transform: translateY(-2px) scale(.995) }
/* La plaquita es el logotipo real del medio. content-box para que el filete
   inferior se dibuje DEBAJO del logotipo sin comerse dos píxeles de arte, y
   max-inline-size para que a 360px se escale en vez de desbordar. */
.plaquita {
  box-sizing: content-box; display: block;
  block-size: auto; max-inline-size: 100%;
  padding-bottom: var(--e-3); margin-bottom: var(--e-2);
  border-bottom: 2px solid rgba(122, 46, 29, .45);
}
.cartela .titular {
  font-size: var(--t-md); line-height: 1.4; color: var(--marron); font-weight: 400;
  overflow-wrap: break-word; text-wrap: balance;
}
.cartela .titular.q::before { content: "« " }
.cartela .titular.q::after { content: " »" }
.cartela .nota {
  font-family: var(--sans); font-size: var(--t-xs); color: var(--marron-sua);
  margin-top: auto; padding-top: var(--e-3); line-height: var(--lh-corto);
}
.cartela .ver-nota {
  font-family: var(--sans); font-size: var(--t-xs); font-weight: 600;
  color: var(--oro-tinta);       /* 6.27:1 sobre el papel de la cartela */
  opacity: 0; transform: translateX(-4px);
  transition: opacity var(--d-2) var(--ease-salida), transform var(--d-2) var(--ease-salida);
}
.cartela:hover .ver-nota, .cartela:focus-visible .ver-nota { opacity: 1; transform: none }
/* la pieza destacada: la entrevista más citada de su trayectoria */
.cartela.destacada {
  grid-column: 1 / -1; align-items: center; text-align: center;
  padding: var(--e-7) var(--e-6); gap: var(--e-3);
}
.destacada .titular {
  font-size: var(--t-xl); font-style: italic; color: var(--oro-tinta);
  max-width: var(--medida); margin-top: var(--e-2);
  hanging-punctuation: first last;
}
.destacada .titular.q::before { content: "\201C"; margin-left: -.32em }
.destacada .titular.q::after { content: "\201D"; margin-right: -.32em }
.destacada .nota { margin-top: 0 }

/* ═══════════════════════════════════════════════════════════════
   IV · LA BIBLIOTECA                     [.tomo/.tapa/.placa: index + libros]
   ═══════════════════════════════════════════════════════════════ */
.buscador {
  display: flex; gap: var(--e-2); max-width: 560px; margin-bottom: var(--e-5);
}
/* en libros.html el buscador va justo debajo del «volver al inicio» */
.volver + .buscador { margin-top: var(--e-5) }
.buscador .q {
  flex: 1; min-width: 0; min-height: var(--tactil); padding: 0 var(--e-4);
  border: 1px solid var(--linea-campo); border-radius: var(--r-pill);
  background: rgba(255, 253, 247, .85); color: var(--tinta);
  font-family: var(--sans); font-size: var(--t-sm);
  transition: border-color var(--d-2) var(--ease-salida);
}
.buscador .q:focus { border-color: var(--oro-tinta) }
.buscador ::placeholder { color: var(--marron-sua); opacity: 1; font-style: italic }
.buscador button {
  flex: none; min-height: var(--tactil); padding: 0 var(--e-5);
  border: none; border-radius: var(--r-pill);
  background: var(--marron); color: var(--sobre-oscuro);   /* 8.01:1 */
  font-family: var(--sans); font-size: var(--t-sm); font-weight: 600; cursor: pointer;
  transition: background var(--d-2) var(--ease-salida);
}
.buscador button:hover { background: var(--tinta) }        /* 11.95:1 */
.buscador button:active { transform: scale(.97) }

.estante { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-5) }
.estante + .cta { margin-top: var(--e-6) }
.tomo {
  position: relative; display: flex; flex-direction: column; text-decoration: none;
  color: var(--tinta);   /* sin esto el <a> hereda el azul #0000EE del navegador */
  /* opacity la primera, por lo mismo que en .cartela: esta lista sustituye a la
     de [data-rev] y sin ella el tomo aparecía de golpe. */
  transition: opacity var(--d-4) var(--ease-salida) var(--rev-delay, 0s),
              transform var(--d-3) var(--ease-salida);
}
.tomo:hover, .tomo:focus-visible { transform: translateY(-10px) }
.tomo:hover .tapa img, .tomo:focus-visible .tapa img {
  transform: translateY(-4px) scale(1.028) rotate(.35deg); box-shadow: var(--s-objeto-alto);
}
.tomo:hover .placa .leer, .tomo:focus-visible .placa .leer { text-decoration: underline }
.tomo:active .tapa img { transform: translateY(-1px) scale(1.01) }

/* ── LA TAPA: dos reglas y ninguna más ──
   1) El ALTO lo pone la COLUMNA, no la ventana. `aspect-ratio` sobre la caja
      hace que el alto crezca con el ancho de la celda: a 339px de celda la
      caja mide 440px y la portada vertical se dibuja a ~287px, ocupando la
      celda entera. Con un alto atado al viewport (el `block-size` que había
      aquí) esas mismas portadas caían a 137-155px y dejaban 190px de hueco.
      Además, al ser constante dentro de una fila, todas las portadas se
      apoyan en la misma línea: el estante.
   2) La caja del <img> es EXACTAMENTE la portada dibujada. Sin object-fit y
      sin width/height forzados, con sólo max-block-size + max-inline-size,
      el algoritmo de elementos reemplazados (CSS 2.1 §10.4) reduce la caja
      hasta que encaja conservando la proporción. Como el marco y la sombra
      cuelgan de esa caja, nunca enmarcan papel vacío — que es justo lo que
      pedía el cliente. Las portadas reales van de 0.59 a 1.44 y las envuelve
      a todas.
   Y como el alto de .tapa ya es definido ANTES de que cargue la imagen, el
   `loading="lazy"` de las 46 portadas no mueve un solo píxel de la página. */
.tapa {
  position: relative; display: flex; align-items: flex-end; justify-content: center;
  background: transparent; border: none;
  padding: 0;
  /* min-block-size:0 NO es decorativo. .tapa es un elemento flexible dentro de
     .tomo, y el mínimo automático de un elemento flexible es el tamaño de su
     contenido: sin esto, una portada más alta que la caja EMPUJA la caja y la
     proporción deja de mandar. Con el mínimo a cero la caja mide siempre lo
     mismo dentro de una fila —el estante— y es la portada la que se ajusta. */
  min-block-size: 0;
  overflow: visible;
}
/* La portada ocupa TODO el ancho de la ficha y el alto lo pone su propia
   proporción: así la placa del título mide exactamente lo mismo que la
   portada, sin papel de sobra a los lados en ningún ancho de pantalla. */
.tapa img {
  display: block;
  inline-size: 100%; block-size: auto;
  position: relative; z-index: 1;
  box-shadow: var(--s-objeto); border: 1px solid rgba(138, 101, 50, .22);
  transition: transform var(--d-3) var(--ease-salida), box-shadow var(--d-3) var(--ease-salida);
}
/* La sombra de suelo se CONTRAE al levantar el objeto (eso es física, no
   adorno) y ahora mide lo que mide el libro: --ancho-tapa la escribe el
   script sobre el .tomo y hereda hasta aquí. El 60 % es el respaldo exacto
   del comportamiento anterior si el script no llega a correr. */
.tapa::after {
  content: ""; position: absolute; left: 50%; bottom: -6px; z-index: 0;
  width: 100%; height: 13px;
  transform: translateX(-50%) scaleX(1);
  background: radial-gradient(closest-side, rgba(58, 45, 29, .38), rgba(58, 45, 29, 0) 75%);
  filter: blur(3px); pointer-events: none;
  transition: transform var(--d-3) var(--ease-salida), opacity var(--d-3) var(--ease-salida);
}
.tomo:hover .tapa::after { transform: translateX(-50%) scaleX(.84); opacity: .65 }
/* (Aquí vivía .tapa-vacia, un tomo en blanco para las obras sin portada
   digitalizada. Ninguna de las 48 fichas la usa —las 46 con texto tienen
   portada y las 2 de terceros son .card sin tapa—, así que se retira. Si
   algún día entra una obra sin portada, este es su sitio.) */
.cat {
  position: absolute; top: var(--e-2); left: var(--e-3); z-index: 3;
  font-family: var(--sans); font-size: var(--t-2xs); letter-spacing: var(--track-marca);
  color: var(--oro-tinta);
  border: 1px solid rgba(138, 101, 50, .4); border-radius: var(--r-xs); padding: 3px var(--e-2);
  background: rgba(252, 247, 235, .82);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.placa {
  background: linear-gradient(180deg, #F6EFDD, #EDE2C4);
  border: 1px solid var(--linea); border-top: 2px solid var(--oro-claro);
  padding: var(--e-4); display: flex; flex-direction: column; flex: 1;
  box-shadow: 0 12px 30px rgba(74, 55, 30, .2);
}
/* La placa ocupa la CELDA entera. Atarla al ancho dibujado de la portada
   (width: var(--ancho-tapa)) se veía bien con portadas parejas, pero con las
   reales —de 0.59 a 1.44— dejaba placas de 132px dentro de celdas de 339px:
   el título caía en columnas de 8-12 caracteres, hasta 15 líneas, y se
   desbordaba del marco. Además obligaba a recalcular el ancho en cuanto
   cargaba cada imagen, que es lo que hacía saltar la página con lazy-load.
   --ancho-tapa sigue existiendo, pero sólo para la sombra de suelo. */
.placa h3 {
  font-weight: 400; font-size: var(--t-md); line-height: var(--lh-corto);
  margin-bottom: var(--e-1); color: var(--marron); text-wrap: balance;
  /* mismas defensas que .cartela .titular y .card h3: «Barrancabermeja» e
     «independencias» no caben en una columna estrecha sin partirse */
  overflow-wrap: break-word; hyphens: auto;
}
.placa .autor { font-family: var(--sans); font-size: var(--t-xs); color: var(--marron-sua); margin-bottom: var(--e-3) }
.placa .leer { margin-top: auto; color: var(--oro-tinta); font-family: var(--sans); font-size: var(--t-sm) }

/* obra insigne: primera ficha en formato panorámico.
   `aspect-ratio: auto` es OBLIGATORIO — sin él la tapa hereda la proporción
   del bloque base y, con un ancho fijo de 320px, se estiraría a 416px de alto
   partiendo la variante panorámica. Aquí el alto lo pone la fila. */
.tomo.insigne { grid-column: 1 / -1; flex-direction: row; align-items: stretch; gap: 0 }
.tomo.insigne .tapa {
  aspect-ratio: auto; block-size: auto; width: 320px; flex: none; border: none;
  align-items: center; padding: 0;
}
.tomo.insigne .tapa img { inline-size: 100%; block-size: auto }
.tomo.insigne .tapa::after { display: none }
.tomo.insigne .placa { border-top: 2px solid var(--oro-claro); justify-content: center; padding: var(--e-6) var(--e-7) }
.tomo.insigne .placa h3 { font-size: var(--t-lg); text-wrap: balance }
.tomo.insigne .placa .autor { font-size: var(--t-xs); margin-bottom: var(--e-4) }
.tomo.insigne .nota-insigne {
  font-family: var(--sans); font-size: var(--t-sm); color: var(--marron-sua);
  line-height: 1.75; margin-bottom: var(--e-4); max-width: var(--medida-corta);
}
.insigne-rotulo {
  font-family: var(--sans); font-size: var(--t-2xs); letter-spacing: var(--track-rotulo);
  text-transform: uppercase; color: var(--lacre); margin-bottom: var(--e-3);
}

/* ═══════════════════════════════════════════════════════════════
   V · TRAYECTORIA: legajo de tinta                     [sólo index]
   El punto del eje ya no es un sello SVG: es el NUMERAL ROMANO del
   cargo. Cinco piezas de marcado y cinco degradados menos, y el eje
   se lee como lo que es, una numeración de legajo.
   ═══════════════════════════════════════════════════════════════ */
.tl { padding: var(--e-7) }
.tl-item { display: grid; grid-template-columns: 128px 30px minmax(0, 1fr); gap: 0 var(--e-4); align-items: start }
.tl-año {
  font-variant-numeric: oldstyle-nums; font-feature-settings: "onum" 1;
  font-family: var(--serif); font-size: var(--t-md); color: var(--oro-tinta);
  text-align: right; padding: var(--e-4) 0; line-height: 1.15;
}
.tl-eje { position: relative; height: 100%; min-height: 88px }
.tl-eje::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px;
  background: repeating-linear-gradient(180deg, var(--oro-claro) 0 7px, rgba(169, 129, 62, .25) 7px 11px);
}
.tl-item:first-child .tl-eje::before { top: 32px }
.tl-item:last-child  .tl-eje::before { bottom: calc(100% - 40px) }
.tl-punto {
  position: absolute; left: 50%; top: 32px; transform: translate(-50%, -50%);
  width: 28px; height: 28px; border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
  background: var(--lacre); color: var(--sobre-lacre);   /* 7.46:1 */
  font-family: var(--serif); font-size: var(--t-2xs); line-height: 1; letter-spacing: .04em;
  font-variant-numeric: normal; font-feature-settings: normal;
  box-shadow: 0 2px 4px rgba(58, 30, 17, .38), inset 0 1px 0 rgba(255, 255, 255, .16);
  transition: transform var(--d-2) var(--ease-salida);
}
.tl-item:hover .tl-punto { transform: translate(-50%, -50%) scale(1.18) }
.tl-cargo { padding: var(--e-4) 0 var(--e-5) }
.tl-cargo b { display: block; font-size: var(--t-lg); font-weight: 400; color: var(--marron); text-wrap: balance }
.tl-cargo span { font-family: var(--sans); font-size: var(--t-sm); color: var(--marron-sua) }
/* Antes: color --oro-tinta y un border-bottom punteado en --linea-sutil, que
   compuesto sobre el panel daba 1.44:1 — la única señal de «esto es un
   enlace» era invisible, y el :hover la quitaba en vez de reforzarla.
   Ahora el subrayado es del MISMO color que el texto (5.53:1 sobre papel,
   muy por encima del 3:1 de SC 1.4.11 y del 4.5:1 del texto) y el estado
   activo lo engorda y oscurece a 7.10:1 en lugar de apagarlo. */
.link-discreto {
  display: inline-flex; align-items: center; min-height: var(--tactil);
  margin-top: var(--e-4); font-family: var(--sans); font-size: var(--t-sm);
  color: var(--oro-tinta);
  text-decoration: underline; text-decoration-color: currentColor;
  text-decoration-thickness: 1px; text-underline-offset: .18em;
  transition: color var(--d-2) var(--ease-salida);
}
.link-discreto:hover, .link-discreto:focus-visible {
  color: var(--lacre); text-decoration-thickness: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   VI · CONTACTO: correspondencia                       [sólo index]
   ═══════════════════════════════════════════════════════════════ */
.contacto-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--e-5);
  align-items: start;
}
.form { padding: var(--e-7) var(--e-7) var(--e-6); position: relative; overflow: hidden }
/* franja «par avion»: el único azul del sitio */
.form::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 7px;
  background: repeating-linear-gradient(-45deg,
    #B8452E 0 14px, #F3EBD3 14px 28px, #3E5C7A 28px 42px, #F3EBD3 42px 56px);
}
.form .kicker { margin-bottom: var(--e-4) }
.form label {
  display: block; font-family: var(--sans); font-size: var(--t-xs);
  letter-spacing: .10em; text-transform: uppercase; color: var(--marron-sua);
  margin: var(--e-4) 0 var(--e-2);
}
.form input, .form textarea {
  width: 100%; padding: var(--e-3); border-radius: var(--r-sm);
  border: 1px solid var(--linea-campo);   /* 3.98:1 — cumple SC 1.4.11 */
  background: rgba(255, 253, 247, .8);
  color: var(--tinta); font-family: var(--sans); font-size: var(--t-sm);
  transition: border-color var(--d-2) var(--ease-salida);
}
.form input { min-height: var(--tactil) }
.form input:focus, .form textarea:focus { border-color: var(--oro-tinta) }
.form input:focus-visible, .form textarea:focus-visible { outline-offset: 1px }
/* El placeholder va a --marron-sua (5.49:1) en cursiva: se lee como pista y
   no como un valor ya escrito. */
.form ::placeholder { color: var(--marron-sua); opacity: 1; font-style: italic }
.form button[type=submit] {
  margin-top: var(--e-5); background: var(--lacre); color: var(--sobre-lacre);   /* 7.46:1 */
  border: none; min-height: var(--tactil); padding: 0 var(--e-6);
  border-radius: var(--r-pill); font-family: var(--sans);
  font-size: var(--t-sm); font-weight: 600; cursor: pointer;
  transition: background var(--d-2) var(--ease-salida), transform var(--d-2) var(--ease-salida);
}
/* Aquí estaba el único fallo AA real del sitio: el hover cambiaba el fondo a
   --oro pero NO el color del texto, y --sobre-lacre sobre --oro da 4.18:1,
   por debajo de 4.5 con texto de 13.5-15px. Oscureciendo a --tinta el par
   sube a 11.95:1 y el gesto sigue siendo «se hunde el sello». */
.form button[type=submit]:hover { background: var(--tinta); transform: translateY(-2px) }
.form button[type=submit]:active, .cinta .otro:active { transform: scale(.96) }
/* Los tres estados del aviso viven aquí, no en un style inline del script.
   .msg también es el aviso del buscador de libros.html (#qAviso). */
.msg { margin-top: var(--e-3); font-family: var(--sans); font-size: var(--t-sm); color: var(--marron-sua) }
/* Los enlaces que el script inyecta dentro de un aviso (el correo de respaldo
   del formulario, el «ver todas» del buscador): sin esto heredan el #0000EE. */
.msg a {
  color: var(--lacre); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: .18em;
}
.msg a:hover, .msg a:focus-visible { text-decoration-thickness: 2px }
.msg.aviso { color: var(--oro-tinta) }    /* 6.77:1 sobre el panel */
.msg.ok    { color: var(--verde-audio) }  /* 6.51:1 sobre el panel */
.msg.error { color: var(--lacre) }        /* 8.69:1 sobre el panel */

.tarjeta-correo { padding: var(--e-6) var(--e-5) }
.tarjeta-correo h3 {
  font-weight: 400; font-size: var(--t-md); color: var(--marron);
  line-height: var(--lh-corto); margin-bottom: var(--e-3);
}
.tarjeta-correo p {
  font-family: var(--sans); font-size: var(--t-sm); color: var(--marron-sua);
  line-height: var(--lh-normal);
}
.correo-directo {
  display: inline-flex; align-items: center; gap: var(--e-2); min-height: var(--tactil);
  max-width: 100%; margin-top: var(--e-4);
  font-family: var(--sans); font-size: var(--t-sm); color: var(--oro-tinta);
  overflow-wrap: anywhere;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em;
  transition: color var(--d-2) var(--ease-salida);
}
.correo-directo svg { color: var(--oro-tinta); flex: none }
.correo-directo:hover, .correo-directo:focus-visible {
  color: var(--lacre); text-decoration-thickness: 2px;
}

/* Todo lo que se revela con :hover necesita su equivalente sin puntero fino. */
@media (hover: none) {
  .cartela .ver-nota { opacity: 1; transform: none }
  .tomo .placa .leer { text-decoration: underline; text-underline-offset: 2px }
}

/* ═══════════════════════════════════════════════════════════════
   TÍTULOS Y RECONOCIMIENTOS                          [titulos.html]
   ═══════════════════════════════════════════════════════════════ */
.panel { padding: var(--e-6) var(--e-7) }
.lista { list-style: none; padding: 0 }
.lista li {
  border-bottom: 1px solid rgba(138, 101, 50, .16); padding: var(--e-3) 0;
  font-size: var(--t-base); max-width: var(--medida);
}
.lista li:last-child { border-bottom: none }
.decada {
  font-family: var(--sans); font-size: var(--t-xs); letter-spacing: var(--track-marca);
  text-transform: uppercase; color: var(--oro-tinta); margin: var(--e-6) 0 var(--e-1);
}
.decada:first-child { margin-top: 0 }
.rec {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--e-4);
  border-bottom: 1px solid rgba(138, 101, 50, .12); padding: var(--e-3) 0;
}
.rec:last-child { border-bottom: none }
.rec .año {
  font-family: var(--serif); font-size: var(--t-base); color: var(--oro-tinta);
  font-variant-numeric: oldstyle-nums; font-feature-settings: "onum" 1;
}
.rec .que { font-family: var(--sans); font-size: var(--t-sm); color: var(--tinta); line-height: 1.6; max-width: var(--medida) }

/* ═══════════════════════════════════════════════════════════════
   EL ARCHIVO DE ARTÍCULOS          [articulos.html + articulos/*]
   Son 105 textos de un millón largo de palabras: aquí no hay
   objeto que mirar —no hay portada— sino prosa que leer, así que
   la ficha es tipográfica y la página de lectura se estrecha a la
   medida de un renglón cómodo.
   ═══════════════════════════════════════════════════════════════ */
/* EL EX LIBRIS
   Salía a tamaño natural, 745 px, y se comía la sección. Se contiene por
   tamaño, no por desaturación: las plumas y el «Ich Dien» son heráldica y
   significan algo para el autor, así que el color va tal cual. */
.exlibris { margin: var(--e-6) auto var(--e-5); text-align: center; max-width: 320px }
.exlibris img { width: min(190px, 52%); height: auto }
/* En la biblioteca va junto a la cifra, no centrado sobre toda la sección:
   centrado en un contenedor ancho quedaba descolgado a la derecha, sin
   relación con el texto —angosto— que tiene encima. En la misma fila, los
   dos leen como un solo dato: cuántas obras y el sello que las marca. */
.guarismo-fila { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e-5) }
.guarismo-fila .guarismo { margin-top: 0 }
.guarismo-fila .exlibris { margin: 0 0 0 auto; max-width: none }
.guarismo-fila .exlibris img { width: 58px }
/* El mismo sello cerrando cada artículo, como el colofón de un impreso: algo
   más pequeño que en la biblioteca y separado por un filete del texto. */
.exlibris-pie {
  margin: var(--e-7) auto var(--e-4); padding-top: var(--e-6);
  border-top: 1px solid var(--linea);
}
.exlibris-pie img { width: min(132px, 40%) }
.exlibris figcaption {
  font-family: var(--sans); font-size: var(--t-2xs); color: var(--marron-sua);
  margin-top: var(--e-2); line-height: var(--lh-normal);
}

/* El segundo «sub» de la biblioteca abre el bloque de los artículos: necesita
   aire por arriba para no leerse como pie del botón de las obras. */
.sub-articulos { margin-top: var(--e-6) }
.art-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: var(--e-4) }
.art-ficha {
  display: flex; flex-direction: column; gap: var(--e-2);
  padding: var(--e-5); text-decoration: none; color: var(--tinta);
  border: 1px solid var(--linea); border-top: 3px solid var(--oro-claro);
  border-radius: var(--r-xs); background: rgba(255, 253, 247, .38);
  transition: background var(--d-2) var(--ease-salida),
              transform var(--d-2) var(--ease-salida),
              box-shadow var(--d-2) var(--ease-salida);
}
.art-ficha:hover, .art-ficha:focus-visible {
  background: rgba(255, 253, 247, .78); transform: translateY(-3px); box-shadow: var(--s-objeto);
}
.art-ficha h3 {
  font-weight: 400; font-size: var(--t-md); line-height: var(--lh-corto); color: var(--marron);
  text-wrap: balance; overflow-wrap: break-word; hyphens: auto;
}
.art-extracto {
  font-family: var(--sans); font-size: var(--t-xs); line-height: var(--lh-normal);
  color: var(--marron-sua); overflow-wrap: break-word;
}
.art-meta {
  margin-top: auto; padding-top: var(--e-2);
  font-family: var(--sans); font-size: var(--t-2xs); letter-spacing: var(--track-rotulo);
  text-transform: uppercase; color: var(--oro-tinta);
}
.art-ficha[hidden] { display: none }

.wrap-lectura { max-width: calc(var(--medida) + var(--e-8) * 2) }
.art-cabeza { margin: var(--e-5) 0 var(--e-6) }
.art-cabeza h1 { text-wrap: balance; overflow-wrap: break-word; hyphens: auto }
.art-firma {
  font-family: var(--sans); font-size: var(--t-sm); color: var(--marron); margin-top: var(--e-3);
}
.art-dato {
  font-family: var(--sans); font-size: var(--t-2xs); letter-spacing: var(--track-rotulo);
  text-transform: uppercase; color: var(--oro-tinta); margin-top: var(--e-1);
}
/* El renglón de un artículo largo pide más aire entre líneas que una ficha, y
   la sangría francesa —no el espacio entre párrafos— es lo que marca el corte,
   como en el impreso. El primero no se sangra: nada lo precede. */
.art-cuerpo p {
  max-width: var(--medida); line-height: 1.78; text-indent: var(--e-5);
  text-align: justify; hyphens: auto; overflow-wrap: break-word;
}
.art-cuerpo p:first-child { text-indent: 0 }
.art-paso {
  display: flex; flex-wrap: wrap; gap: var(--e-4); justify-content: space-between;
  margin-top: var(--e-7); padding-top: var(--e-5); border-top: 1px solid var(--linea);
}
.art-paso a {
  flex: 1 1 240px; min-width: 0;
  font-family: var(--sans); font-size: var(--t-sm); color: var(--oro-tinta);
}
.art-paso .art-sig { text-align: right }

/* ═══════════════════════════════════════════════════════════════
   LA BIBLIOTECA COMPLETA                              [libros.html]
   ═══════════════════════════════════════════════════════════════ */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: var(--e-5) }
/* Se gana ancho de portada quitando 8px de acolchado a cada lado. La
   proporción de la caja la hereda del bloque base, así que dentro de una
   misma fila todas las portadas se apoyan en la misma línea. */
.grid .tomo .tapa { padding-inline: 0 }
/* La ficha SIN texto digitalizado es un <div>, no un enlace: no puede recibir
   foco ni llevar a ninguna parte. Antes se levantaba 4px con sombra al pasar
   el ratón — afordancia falsa. Ahora sólo se aclara, que es información
   («esto responde al puntero pero no es un destino»), no una promesa. */
.card {
  padding: var(--e-5); display: flex; flex-direction: column;
  border-top: 3px solid var(--oro-claro);
  transition: background var(--d-2) var(--ease-salida);
}
.card:hover { background: rgba(255, 253, 247, .55) }
.card h3 {
  text-wrap: balance; font-weight: 400; font-size: var(--t-md); line-height: var(--lh-corto);
  margin-bottom: var(--e-2); color: var(--marron); overflow-wrap: break-word;
}
.card .autor { font-family: var(--sans); font-size: var(--t-xs); color: var(--marron-sua); margin-bottom: var(--e-4) }
.card .pend { margin-top: auto; color: var(--marron-sua); font-family: var(--sans); font-size: var(--t-xs); font-style: italic }
.volver {
  display: inline-flex; align-items: center; min-height: var(--tactil);
  margin: var(--e-5) 0 0; color: var(--oro-tinta);
  text-decoration: none; font-family: var(--sans); font-size: var(--t-sm);
}
.volver:hover, .volver:focus-visible { text-decoration: underline }

/* ── publicaciones académicas ── */
.pub-grupo { margin-bottom: var(--e-6) }
.pub-grupo:last-child { margin-bottom: 0 }
.pub-grupo .decada { margin-top: 0 }
.pub {
  display: block; text-decoration: none; color: var(--tinta);   /* mata el azul del navegador */
  padding: var(--e-3) var(--e-1);
  border-bottom: 1px solid rgba(138, 101, 50, .14);
  /* opacity la primera: sustituye a la lista de [data-rev] (13 enlaces) */
  transition: opacity var(--d-4) var(--ease-salida) var(--rev-delay, 0s),
              background var(--d-2) var(--ease-salida);
}
.pub:last-child { border-bottom: none }
.pub:hover, .pub:focus-visible { background: rgba(169, 129, 62, .07) }
.pub:focus-visible { outline-offset: -2px }
.pub .pt { font-size: var(--t-base); color: var(--marron); line-height: 1.4; text-wrap: balance; max-width: var(--medida-ancha) }
.pub:hover .pt { color: var(--oro-tinta) }
.pub .pm {
  font-family: var(--sans); font-size: var(--t-xs); color: var(--marron-sua);
  margin-top: var(--e-1); font-variant-numeric: oldstyle-nums;
}
.pub .pm::after { content: " · leer →"; color: var(--oro-tinta); font-weight: 600 }

/* ── pie editorial ──                                   [COMPARTIDO] */
/* ── EL PIE ──
   Antes era un solo bloque centrado: firma, derechos y nueve enlaces sueltos
   en fila, todo con el mismo peso. Ahora es tres columnas —la marca, y los
   mismos nueve enlaces agrupados en Secciones / El archivo— con la letra
   pequeña de los derechos bajada a una franja aparte, como el colofón real
   de un impreso: lo legal va al final, en cuerpo menor, no compitiendo con
   la navegación. */
footer {
  margin-top: var(--e-7); border-top: 1px solid var(--linea);
  background: var(--pie);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  padding: var(--e-7) var(--e-5) 0;
  font-family: var(--sans); color: var(--marron-sua);
}
.pie-grid {
  max-width: var(--medida-ancha, 1100px); margin: 0 auto;
  display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: var(--e-6) var(--e-7);
  padding-bottom: var(--e-6);
}
.pie-marca { text-align: left }
/* En lugar de los tres ❦ de imprenta va el logo del propio historiador. El
   marcado sigue trayendo los signos —son el respaldo si la máscara no carga—,
   así que hay que esconderlos: de ahí el text-indent fuera de pantalla. */
footer .orn {
  width: 116px; height: 46px; margin: 0 0 var(--e-4);
  overflow: hidden; text-indent: -200vw; white-space: nowrap;
  background-color: currentColor; color: var(--oro-claro);
  -webkit-mask: url("../img/marca/rubrica-amg.svg") left center / contain no-repeat;
  mask: url("../img/marca/rubrica-amg.svg") left center / contain no-repeat;
}
.pie-nombre {
  font-family: var(--serif); font-size: var(--t-base); color: var(--marron);
  letter-spacing: .02em;
}
.pie-gremio {
  font-family: var(--sans); font-size: var(--t-xs); color: var(--marron-sua);
  letter-spacing: var(--track-amplio); text-transform: uppercase; margin-top: var(--e-1);
}
.pie-titulo {
  font-family: var(--sans); font-size: var(--t-2xs); letter-spacing: var(--track-amplio);
  text-transform: uppercase; color: var(--oro-tinta); margin-bottom: var(--e-3);
}
.pie-col ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--e-2) }
.pie-legal {
  border-top: 1px solid var(--linea-sutil); text-align: center;
  padding: var(--e-5) 0 var(--e-6);
}
footer .derechos {
  font-size: var(--t-2xs); line-height: 1.8; color: var(--marron-sua);
  max-width: var(--medida-corta); margin: 0 auto var(--e-2); opacity: .85;
}
footer .colofon {
  font-family: var(--serif); font-style: italic; font-size: var(--t-xs);
  color: var(--marron-sua);
  /* Sin opacity:.85 aquí — componía a #8b755b y bajaba el contraste a 3.27:1 */
}
footer a {
  display: inline-flex; align-items: center; min-height: var(--tactil);
  color: var(--oro-tinta); text-decoration: none; font-size: var(--t-xs);
}
footer a:hover, footer a:focus-visible { text-decoration: underline }

@media (max-width: 700px) {
  .pie-grid { grid-template-columns: 1fr; text-align: center; gap: var(--e-5) }
  .pie-marca { text-align: center }
  footer .orn { margin: 0 auto var(--e-4) }
  /* Apilados en una sola columna, once enlaces con área táctil de 44px cada
     uno se iban muy largo. En dos columnas por grupo el bloque se acorta a
     la mitad sin perder el tamaño del toque. */
  .pie-col ul {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--e-4); justify-items: center;
  }
  footer a { min-height: 38px }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — CUATRO cortes: 1024 · 900 · 700 · 560.
   Antes había cinco anchos distintos (1000, 980, 880 y 560 dos
   veces) repartidos en dos archivos y separados por 200 líneas.
   Cada corte de aquí resuelve una cosa y sólo aparece una vez.
   ═══════════════════════════════════════════════════════════════ */

/* 1024 — las tres rejillas de dos columnas colapsan a una:
   hero, biografía, podcast y contacto. */
@media (max-width: 1024px) {
  .hero { min-height: auto; padding: var(--e-6) 0 var(--e-7) }
  .hero-rejilla { grid-template-columns: minmax(0, 1fr); gap: var(--e-7) }
  .retrato { order: -1; max-width: 340px }

  .bio-panel { grid-template-columns: minmax(0, 1fr) }
  .bio { grid-column: 1; margin-inline: auto }
  .bio-datos {
    grid-column: 1; border-left: none; padding-left: 0;
    margin-top: var(--e-6); padding-top: var(--e-5);
    border-top: 1px solid var(--linea-sutil);
    /* 132px, no 140: a 360px el panel deja 288px útiles y con 140 la rejilla
       caía a UNA columna justo donde más falta hace aprovechar el ancho.
       Con 132 entran dos en móvil y cuatro en tableta. */
    display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: var(--e-4);
  }
  .bio-datos .dato { border-bottom: none; padding: 0 }

  .podcast-rejilla { grid-template-columns: minmax(0, 1fr); gap: var(--e-6) }
  .contacto-grid { grid-template-columns: minmax(0, 1fr) }
}

/* 900 — la nav pasa a UNA fila desplazable (antes se envolvía en tres líneas
   y se comía 136px fijos de alto en cada pantalla de móvil). El contenedor
   con scroll es el <nav>, no un ancestro del header pegajoso, así que
   position:sticky sigue funcionando. --nav-h baja a 64px en tokens.css. */
@media (max-width: 900px) {
  nav.principal {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    justify-content: flex-start; gap: 0 var(--e-4);
    padding: var(--e-2) var(--e-4);
    /* la máscara desvanece el último enlace; el acolchado extra garantiza
       que «Contacto» se alcance del todo al deslizar */
    padding-inline-end: var(--e-6);
    scroll-snap-type: x proximity;
    scrollbar-width: none; -ms-overflow-style: none;
    -webkit-mask-image: linear-gradient(90deg, #000 0 92%, transparent);
    mask-image: linear-gradient(90deg, #000 0 92%, transparent);
  }
  nav.principal::-webkit-scrollbar { display: none }
  nav.principal a { scroll-snap-align: center }
  nav.principal .brand { margin-right: var(--e-3); flex: none; scroll-snap-align: start }

  /* La marca de agua del folio se retira: con la columna estrecha, un h2 largo
     («Historia con Armando Martínez Garnica») ocupa todo el ancho y el numeral
     —que va detrás, en contorno dorado dentro de la banda oscura— lo cruzaba y
     se leía como un artefacto. El rótulo «Folio II» sigue anunciando el orden. */
  .enc-num { display: none }

  .estante { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .tomo.insigne { flex-direction: column }
  .tomo.insigne .tapa { width: 100%; border-right: none }
  .rosa { right: -200px; opacity: .08 }

  .bio-panel { padding: var(--e-6) var(--e-5) }
  .tl { padding: var(--e-6) var(--e-4) }
  /* «1987–2013» a t-md no cabe en 84px: se salía de su columna y se leía
     superpuesto con el cargo de al lado. Baja a t-sm y deja de partirse
     en dos renglones sin previo aviso. */
  .tl-item { grid-template-columns: 84px 24px minmax(0, 1fr); gap: 0 var(--e-3) }
  .tl-año { font-size: var(--t-sm); white-space: nowrap }
  .panel { padding: var(--e-5) var(--e-4) }
  .form { padding: var(--e-6) var(--e-5) var(--e-5) }
  .cartela.destacada { padding: var(--e-6) var(--e-5) }
}

/* 700 — la cinta del podcast se parte en dos filas: bobina + cuerpo arriba,
   «Otro fragmento» abajo. */
@media (max-width: 700px) {
  .cinta { grid-template-columns: 34px minmax(0, 1fr); gap: var(--e-3) var(--e-4) }
  .bobina { width: 34px; height: 34px }
  .cinta .otro { grid-column: 1 / -1; justify-self: start }
  .bio { text-align: left; hyphens: manual }
}

/* 560 — móvil: una columna en todo, botones a ancho completo. */
@media (max-width: 560px) {
  .wrap { padding: 0 var(--e-4) }
  .estante { grid-template-columns: minmax(0, 1fr) }
  .bio-panel { padding: var(--e-5) var(--e-4) }
  .tl-item { grid-template-columns: 64px 18px minmax(0, 1fr); gap: 0 var(--e-2) }
  .tl-año { font-size: var(--t-xs); white-space: nowrap }
  .cartela { padding: var(--e-5) var(--e-4) }
  .cinta { padding: var(--e-3) }
  .form { padding: var(--e-6) var(--e-4) var(--e-5) }
  .tarjeta-correo { padding: var(--e-5) var(--e-4) }
  .rec { grid-template-columns: 52px minmax(0, 1fr); gap: var(--e-2) }
  .retrato { max-width: 280px }
  .sello-wrap { width: 84px; margin: 0 -18px -20px 0 }
  .hero-cta > *, .podcast-cta > * { flex: 1 1 100%; justify-content: center }
  .credenciales { gap: var(--e-4) }
  .buscador button { padding: 0 var(--e-3) }
  h1.nombre-mayor .nombre { letter-spacing: .34em }
}

/* ═══════════════════════════════════════════════════════════════
   MOVIMIENTO REDUCIDO — un solo bloque, el último del archivo.
   No es «animation:none» — eso rompe cualquier elemento que dependa
   de la animación para volverse visible. Es duración casi cero
   conservando los estados finales. Cubre los cuatro vectores:
   transición, retardo de transición, animación y el
   stroke-dashoffset del SVG, sin el cual la rúbrica quedaría
   invisible para siempre.
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  [data-rev] { opacity: 1 !important; transform: none !important }
  .rubrica .trazo { stroke-dashoffset: 0 }
}


/* ═══════════════════════════════════════════════════════════════════════════
   COLOMBIA EN BIOGRAFÍA — el programa de UIS Stereo
   Los guiones no son artículos: tienen una arquitectura fija de cuatro
   movimientos (pregunta · documento · personaje · conclusión) y esa
   arquitectura es lo que se diagrama. El documento histórico se lee sobre
   el papel de recorte que ya usa la prensa; el personaje va en ficha con
   filete de lacre; la conclusión, centrada y con sello.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── El índice: parrilla de emisiones ─────────────────────────────────────── */
.radio-hero h1 { text-wrap: balance }
.radio-lema {
  font-family: var(--serif); font-size: var(--t-lg); font-style: italic;
  color: var(--marron); line-height: var(--lh-corto);
  max-width: var(--medida); margin-top: var(--e-3);
}

/* La ficha técnica del programa: cuatro datos duros, como la cabecera de una
   pauta radial. Se lee de un golpe, antes que cualquier prosa. */
.radio-ficha-tecnica {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--e-1); margin: var(--e-6) 0 var(--e-5);
  border: 1px solid var(--linea); border-radius: var(--r-xs);
  background: var(--panel-solido); box-shadow: var(--s-2);
  overflow: hidden;
}
.rft-dato {
  padding: var(--e-4) var(--e-3); text-align: center;
  border-right: 1px solid var(--linea-sutil);
}
.rft-dato:last-child { border-right: none }
.rft-dato b {
  display: block; font-family: var(--serif); font-size: var(--t-xl);
  line-height: 1; color: var(--oro-tinta); font-weight: 400;
}
.rft-dato span {
  display: block; margin-top: var(--e-2); font-family: var(--sans);
  font-size: var(--t-2xs); text-transform: uppercase;
  letter-spacing: var(--track-amplio); color: var(--marron-sua);
}
.radio-creditos {
  display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-6);
  margin: var(--e-5) 0 var(--e-6);
  padding-top: var(--e-4); border-top: 1px solid var(--linea-sutil);
  font-family: var(--sans); font-size: var(--t-xs); color: var(--marron-sua);
}
.radio-creditos b {
  display: block; font-size: var(--t-2xs); text-transform: uppercase;
  letter-spacing: var(--track-amplio); color: var(--oro-tinta); font-weight: 600;
}

.parrilla { display: grid; gap: var(--e-3); margin-bottom: var(--e-8) }

/* Cada emisión es una franja horizontal con el número al filo izquierdo:
   la lectura vertical de los guarismos es la que da la sensación de serie. */
.emision {
  display: grid; grid-template-columns: auto 1fr; gap: var(--e-5);
  align-items: start; padding: var(--e-5); text-decoration: none;
  color: var(--tinta); background: var(--panel-solido);
  border: 1px solid var(--linea-sutil);
  border-left: 3px solid var(--oro); border-radius: var(--r-xs);
  box-shadow: var(--s-2);
  transition: opacity var(--d-4) var(--ease-salida) var(--rev-delay, 0s),
              transform var(--d-3) var(--ease-salida),
              box-shadow var(--d-3) var(--ease-salida),
              border-left-color var(--d-3) var(--ease-salida);
}
.emision:hover, .emision:focus-visible {
  transform: translateX(4px); border-left-color: var(--lacre);
  box-shadow: var(--s-3);
}
.emision:active { transform: translateX(1px) scale(.997) }
.em-num {
  font-family: var(--serif); font-size: var(--t-xl); line-height: .9;
  color: var(--oro-claro); font-variant-numeric: tabular-nums;
  padding-top: var(--e-1);
}
.emision:hover .em-num, .emision:focus-visible .em-num { color: var(--lacre) }
.em-cuerpo { min-width: 0; display: flex; flex-direction: column; gap: var(--e-2) }
.em-titulo {
  font-family: var(--serif); font-size: var(--t-md); line-height: var(--lh-corto);
  color: var(--tinta); text-wrap: balance;
}
.em-extracto {
  font-family: var(--serif); font-size: var(--t-sm); color: var(--marron-sua);
  line-height: 1.55; max-width: var(--medida-ancha);
}
.em-pie {
  display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4);
  font-family: var(--sans); font-size: var(--t-2xs);
  text-transform: uppercase; letter-spacing: var(--track-amplio);
  color: var(--marron-sua);
}
.em-min { color: var(--oro-tinta) }
/* Los movimientos que trae esa emisión, como marcas de pauta. */
.em-partes {
  list-style: none; padding: 0; margin: var(--e-1) 0 0;
  display: flex; flex-wrap: wrap; gap: var(--e-1);
}
.em-partes li {
  font-family: var(--sans); font-size: var(--t-2xs);
  padding: 2px var(--e-2); border: 1px solid var(--linea);
  border-radius: var(--r-pill); color: var(--marron-sua);
}

/* ── La página del guion ──────────────────────────────────────────────────── */
.guion { max-width: var(--medida-ancha); margin: 0 auto; padding-bottom: var(--e-7) }
.gr-cabeza { margin: var(--e-5) 0 var(--e-7) }
.gr-cabeza h1 {
  margin-top: var(--e-4); text-wrap: balance;
  overflow-wrap: break-word; hyphens: auto;
}
/* El dial: número de emisión y nombre de la serie, como el lomo de un legajo. */
.gr-dial {
  display: flex; align-items: center; gap: var(--e-3);
  margin-top: var(--e-5); padding-bottom: var(--e-3);
  border-bottom: 1px solid var(--linea);
}
.gr-num {
  font-family: var(--serif); font-size: var(--t-xl); line-height: 1;
  color: var(--lacre); font-variant-numeric: tabular-nums;
}
.gr-serie {
  font-family: var(--sans); font-size: var(--t-2xs); line-height: 1.5;
  text-transform: uppercase; letter-spacing: var(--track-amplio);
  color: var(--marron-sua);
}
.gr-serie b { color: var(--oro-tinta); letter-spacing: var(--track-marca) }
.gr-meta {
  display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4);
  margin-top: var(--e-3); font-family: var(--sans); font-size: var(--t-xs);
  color: var(--marron-sua);
}
.gr-fecha { color: var(--oro-tinta); font-weight: 600 }

.gr-bloque { padding: 0; margin-bottom: var(--e-7) }
/* El rótulo del movimiento: versalitas con filete que corre hasta el margen. */
.gr-rotulo {
  display: flex; align-items: center; gap: var(--e-3);
  margin-bottom: var(--e-4);
  font-family: var(--sans); font-size: var(--t-2xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--track-rotulo);
  color: var(--oro-tinta);
}
.gr-rotulo::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--linea), transparent);
}
.gr-ico {
  display: grid; place-items: center; flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--oro); color: var(--lacre);
  font-family: var(--serif); font-size: var(--t-xs); letter-spacing: 0;
}
.gr-texto p {
  font-family: var(--serif); font-size: var(--t-lectura);
  line-height: var(--lh-normal); color: var(--tinta);
  margin-bottom: var(--e-3);
}
.gr-texto p + p { text-indent: 1.5em }
.gr-texto em { font-style: italic }
.gr-texto strong { font-weight: 600; color: var(--marron) }
.gr-texto ol, .gr-texto ul {
  margin: 0 0 var(--e-4) 1.4em; display: grid; gap: var(--e-2);
  font-family: var(--serif); font-size: var(--t-base);
  line-height: var(--lh-normal); color: var(--tinta);
}
.gr-texto table {
  width: 100%; border-collapse: collapse; margin: var(--e-4) 0;
  font-family: var(--sans); font-size: var(--t-xs);
}
.gr-texto td {
  padding: var(--e-2) var(--e-3);
  border: 1px solid var(--linea-sutil); vertical-align: top;
}
.gr-texto sup { font-size: .7em; color: var(--lacre) }

/* La pregunta abre el guion: es la voz del historiador, va en cursiva grande. */
.gr-pregunta .gr-texto > p:first-child {
  font-size: var(--t-lg); font-style: italic; color: var(--marron);
  line-height: var(--lh-corto); text-indent: 0;
}

/* El documento es una fuente de archivo: se lee sobre el papel de recorte. */
.gr-documento .gr-texto {
  padding: var(--e-5) var(--e-6);
  background-color: var(--cartela-bajo);
  background-image:
    var(--ruido),
    repeating-linear-gradient(1deg, rgba(90, 69, 48, .045) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, var(--cartela-alto), var(--cartela-bajo));
  background-blend-mode: multiply, normal, normal;
  border: 1px solid rgba(138, 101, 50, .32); border-radius: var(--r-xs);
  box-shadow: var(--s-2), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.gr-documento .gr-texto p { font-size: var(--t-base) }

/* El personaje: ficha biográfica, sangrada y con filete de lacre a la izquierda. */
.gr-personaje .gr-texto {
  padding-left: var(--e-5); border-left: 2px solid var(--lacre);
}
.gr-personaje .gr-texto > p:first-child {
  font-family: var(--serif); font-size: var(--t-md);
  color: var(--lacre); text-indent: 0;
}

/* La conclusión cierra: centrada, angosta, con el ornamento del sello. */
.gr-cierre .gr-texto {
  max-width: var(--medida-corta); margin: 0 auto; text-align: center;
}
.gr-cierre .gr-texto p { text-indent: 0; font-style: italic; color: var(--marron) }
.gr-cierre .gr-rotulo { justify-content: center }
.gr-cierre .gr-rotulo::after { display: none }
.gr-cierre .gr-rotulo::before {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--linea));
}

@media (max-width: 640px) {
  .emision { grid-template-columns: 1fr; gap: var(--e-2); padding: var(--e-4) }
  .em-num { font-size: var(--t-lg) }
  .rft-dato { border-right: none; border-bottom: 1px solid var(--linea-sutil) }
  .rft-dato:last-child { border-bottom: none }
  .gr-documento .gr-texto { padding: var(--e-4) }
  .gr-rotulo { letter-spacing: var(--track-amplio) }
}