/* =========================================================================
   Periódico Digital — hoja de estilos única
   Generada por disenio.py; no editar a mano el CSS de docs/.
   ========================================================================= */

/* ---------- Fuentes variables (subconjunto español, woff2) ---------- */
@font-face {
  font-family: 'Fraunces';
  src: url('/assets/fraunces.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Epilogue';
  src: url('/assets/epilogue.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  color-scheme: light dark;

  /* Tipografía */
  --serif: 'Fraunces', 'Georgia', 'Times New Roman', serif;
  --sans: 'Epilogue', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Escala fluida 320px → 1440px (16px → 20px de cuerpo) */
  --t--1: clamp(0.83rem, 0.81rem + 0.11vw, 0.89rem);
  --t-0:  clamp(1rem, 0.96rem + 0.22vw, 1.13rem);
  --t-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.42rem);
  --t-2:  clamp(1.44rem, 1.3rem + 0.7vw, 1.8rem);
  --t-3:  clamp(1.73rem, 1.5rem + 1.15vw, 2.37rem);
  --t-4:  clamp(2.07rem, 1.71rem + 1.8vw, 3.07rem);
  --t-5:  clamp(2.49rem, 1.93rem + 2.8vw, 4.05rem);
  --t-6:  clamp(2.99rem, 2.15rem + 4.2vw, 5.33rem);

  /* Ritmo vertical */
  --e-1: 0.25rem;  --e-2: 0.5rem;   --e-3: 0.75rem;  --e-4: 1rem;
  --e-5: 1.5rem;   --e-6: 2rem;     --e-7: 3rem;     --e-8: 4rem;
  --e-9: 6rem;

  /* Medida de lectura: 60-75 caracteres */
  --medida: 68ch;
  --ancho: 1280px;

  /* Color — tema claro */
  --fondo: #ffffff;
  --fondo-2: #f7f6f3;
  --fondo-3: #efedE8;
  --tinta: #0a1f33;
  --tinta-2: #4a5866;
  --tinta-3: #6b7784;
  --linea: #e2ddd4;
  --linea-fuerte: #c9c2b6;
  --acento: #b3121a;
  --acento-tinta: #8f0e15;
  --azul: #0a3d62;
  --sombra: 0 1px 2px rgb(10 31 51 / .04), 0 8px 24px -12px rgb(10 31 51 / .12);
  --sombra-alta: 0 2px 4px rgb(10 31 51 / .06), 0 16px 40px -16px rgb(10 31 51 / .2);
  --foco: #0a3d62;

  --sec-agricultura-y-campo: #178c56;
  --sec-alimentacion-y-agricultura-global: #178c56;
  --sec-animales-y-mascotas: #178c56;
  --sec-arqueologia-y-origenes: #8c4e17;
  --sec-arquitectura-y-espacios: #8c1761;
  --sec-arte-y-diseno: #8c1761;
  --sec-astronomia-y-espacio: #17278c;
  --sec-biodiversidad-y-conservacion: #175b8c;
  --sec-biologia-y-vida: #17798c;
  --sec-celebraciones-y-fiestas: #8c2717;
  --sec-ciencia-y-descubrimientos: #17798c;
  --sec-cine-y-entretenimiento: #65178c;
  --sec-clima-y-meteorologia: #73178c;
  --sec-clima-y-transicion-energetica: #8c1732;
  --sec-computacion-cuantica-y-criptografia: #858c17;
  --sec-comunicacion-y-medios: #3a178c;
  --sec-cultura-y-sociedad: #8c2717;
  --sec-datos-curiosos-y-anecdotas: #2c178c;
  --sec-deportes-y-actividad-fisica: #8c3a17;
  --sec-desastres-y-catastrofes: #8c1728;
  --sec-economia-global-y-geopolitica: #8c172a;
  --sec-economia-y-negocios: #8c172a;
  --sec-educacion-y-aprendizaje: #3a178c;
  --sec-energia-nuclear-y-fusion: #176d8c;
  --sec-energia-y-recursos: #178c7b;
  --sec-exploracion-espacial-moderna: #8c174c;
  --sec-filosofia-y-etica-aplicada: #3a178c;
  --sec-filosofia-y-pensamiento: #3a178c;
  --sec-fisica-y-materia: #17278c;
  --sec-fotografia-y-imagen: #8c1761;
  --sec-gastronomia-y-alimentacion: #8c2717;
  --sec-historia-de-la-ciencia: #8c4e17;
  --sec-historia-y-civilizaciones: #8c4e17;
  --sec-ingenieria-y-construccion: #17778c;
  --sec-inteligencia-artificial: #175b8c;
  --sec-inteligencia-artificial-aplicada: #175b8c;
  --sec-internet-y-red: #175b8c;
  --sec-inventos-y-patentes: #17798c;
  --sec-juegos-y-diversion: #65178c;
  --sec-linguistica-y-lenguaje: #738c17;
  --sec-literatura-y-escritura: #65178c;
  --sec-longevidad-y-biomedicina: #1d178c;
  --sec-matematicas-y-computacion: #17278c;
  --sec-matematicas-y-numeros: #17278c;
  --sec-materiales-y-nanotecnologia: #17598c;
  --sec-medicina-y-salud: #178c75;
  --sec-medio-ambiente-y-naturaleza: #178c56;
  --sec-moda-y-estilo: #8c1761;
  --sec-musica-y-sonido: #65178c;
  --sec-neurociencia-y-conducta: #8c172e;
  --sec-oceanos-y-criosfera: #178c56;
  --sec-oceanos-y-vida-marina: #178c56;
  --sec-plantas-y-jardineria: #178c56;
  --sec-politica-y-gobierno: #8c172a;
  --sec-premios-y-reconocimientos: #8c172a;
  --sec-psicologia-y-mente: #178c75;
  --sec-quimica-y-sustancias: #17798c;
  --sec-religion-y-espiritualidad: #8c4e17;
  --sec-robotica-y-automatizacion: #175b8c;
  --sec-salud-publica-y-epidemiologia: #178c75;
  --sec-salud-y-bienestar: #178c75;
  --sec-supersticiones-y-creencias: #8c4e17;
  --sec-teatro-y-espectaculos: #65178c;
  --sec-tecnologia-e-innovacion: #175b8c;
  --sec-terapias-alternativas: #178c75;
  --sec-tradiciones-y-costumbres: #8c4e17;
  --sec-transporte-y-movilidad: #8c3a17;
  --sec-urbanismo-y-movilidad: #176f8c;
  --sec-viajes-y-turismo: #8c3a17;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo: #101114;
    --fondo-2: #171920;
    --fondo-3: #1f222b;
    --tinta: #f4f2ee;
    --tinta-2: #b3b8c2;
    --tinta-3: #8b919d;
    --linea: #2a2e39;
    --linea-fuerte: #3d4350;
    --acento: #ff5a5f;
    --acento-tinta: #ff7b80;
    --azul: #7fb3d9;
    --sombra: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px -12px rgb(0 0 0 / .6);
    --sombra-alta: 0 2px 4px rgb(0 0 0 / .4), 0 16px 40px -16px rgb(0 0 0 / .7);
    --foco: #7fb3d9;

    --sec-agricultura-y-campo: #7be0b1;
    --sec-alimentacion-y-agricultura-global: #7be0b1;
    --sec-animales-y-mascotas: #7be0b1;
    --sec-arqueologia-y-origenes: #e0aa7b;
    --sec-arquitectura-y-espacios: #e07bbb;
    --sec-arte-y-diseno: #e07bbb;
    --sec-astronomia-y-espacio: #7b88e0;
    --sec-biodiversidad-y-conservacion: #7bb6e0;
    --sec-biologia-y-vida: #7bcfe0;
    --sec-celebraciones-y-fiestas: #e0887b;
    --sec-ciencia-y-descubrimientos: #7bcfe0;
    --sec-cine-y-entretenimiento: #be7be0;
    --sec-clima-y-meteorologia: #ca7be0;
    --sec-clima-y-transicion-energetica: #e07b92;
    --sec-computacion-cuantica-y-criptografia: #d9e07b;
    --sec-comunicacion-y-medios: #997be0;
    --sec-cultura-y-sociedad: #e0887b;
    --sec-datos-curiosos-y-anecdotas: #8d7be0;
    --sec-deportes-y-actividad-fisica: #e0997b;
    --sec-desastres-y-catastrofes: #e07b8a;
    --sec-economia-global-y-geopolitica: #e07b8c;
    --sec-economia-y-negocios: #e07b8c;
    --sec-educacion-y-aprendizaje: #997be0;
    --sec-energia-nuclear-y-fusion: #7bc5e0;
    --sec-energia-y-recursos: #7be0d1;
    --sec-exploracion-espacial-moderna: #e07ba8;
    --sec-filosofia-y-etica-aplicada: #997be0;
    --sec-filosofia-y-pensamiento: #997be0;
    --sec-fisica-y-materia: #7b88e0;
    --sec-fotografia-y-imagen: #e07bbb;
    --sec-gastronomia-y-alimentacion: #e0887b;
    --sec-historia-de-la-ciencia: #e0aa7b;
    --sec-historia-y-civilizaciones: #e0aa7b;
    --sec-ingenieria-y-construccion: #7bcde0;
    --sec-inteligencia-artificial: #7bb6e0;
    --sec-inteligencia-artificial-aplicada: #7bb6e0;
    --sec-internet-y-red: #7bb6e0;
    --sec-inventos-y-patentes: #7bcfe0;
    --sec-juegos-y-diversion: #be7be0;
    --sec-linguistica-y-lenguaje: #cae07b;
    --sec-literatura-y-escritura: #be7be0;
    --sec-longevidad-y-biomedicina: #807be0;
    --sec-matematicas-y-computacion: #7b88e0;
    --sec-matematicas-y-numeros: #7b88e0;
    --sec-materiales-y-nanotecnologia: #7bb4e0;
    --sec-medicina-y-salud: #7be0cc;
    --sec-medio-ambiente-y-naturaleza: #7be0b1;
    --sec-moda-y-estilo: #e07bbb;
    --sec-musica-y-sonido: #be7be0;
    --sec-neurociencia-y-conducta: #e07b8f;
    --sec-oceanos-y-criosfera: #7be0b1;
    --sec-oceanos-y-vida-marina: #7be0b1;
    --sec-plantas-y-jardineria: #7be0b1;
    --sec-politica-y-gobierno: #e07b8c;
    --sec-premios-y-reconocimientos: #e07b8c;
    --sec-psicologia-y-mente: #7be0cc;
    --sec-quimica-y-sustancias: #7bcfe0;
    --sec-religion-y-espiritualidad: #e0aa7b;
    --sec-robotica-y-automatizacion: #7bb6e0;
    --sec-salud-publica-y-epidemiologia: #7be0cc;
    --sec-salud-y-bienestar: #7be0cc;
    --sec-supersticiones-y-creencias: #e0aa7b;
    --sec-teatro-y-espectaculos: #be7be0;
    --sec-tecnologia-e-innovacion: #7bb6e0;
    --sec-terapias-alternativas: #7be0cc;
    --sec-tradiciones-y-costumbres: #e0aa7b;
    --sec-transporte-y-movilidad: #e0997b;
    --sec-urbanismo-y-movilidad: #7bc7e0;
    --sec-viajes-y-turismo: #e0997b;
  }
}

:root[data-tema="oscuro"] {
  --fondo: #101114;
  --fondo-2: #171920;
  --fondo-3: #1f222b;
  --tinta: #f4f2ee;
  --tinta-2: #b3b8c2;
  --tinta-3: #8b919d;
  --linea: #2a2e39;
  --linea-fuerte: #3d4350;
  --acento: #ff5a5f;
  --acento-tinta: #ff7b80;
  --azul: #7fb3d9;
  --sombra: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px -12px rgb(0 0 0 / .6);
  --sombra-alta: 0 2px 4px rgb(0 0 0 / .4), 0 16px 40px -16px rgb(0 0 0 / .7);
  --foco: #7fb3d9;
}

/* ---------- Reinicio ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  font-family: var(--sans);
  font-size: var(--t-0);
  line-height: 1.6;
  color: var(--tinta);
  background: var(--fondo);
  font-synthesis-weight: none;
  font-synthesis-style: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* WCAG 2.2 — 2.4.13 Focus Appearance: 2px y contraste ≥3:1 */
:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 3px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* WCAG 2.2 — 2.5.8 Target Size: 24×24 CSS px mínimo */
a[class], button, .objetivo {
  min-block-size: 24px;
  min-inline-size: 24px;
}

::selection { background: var(--acento); color: #fff; }

.saltar {
  position: absolute; inset-inline-start: -9999px; top: var(--e-3);
  background: var(--tinta); color: var(--fondo);
  padding: var(--e-3) var(--e-5); border-radius: 4px; z-index: 100;
  font-family: var(--sans); font-weight: 600;
}
.saltar:focus { inset-inline-start: var(--e-4); }

.solo-lectores {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Estructura ---------- */
.contenedor { width: min(100% - var(--e-6), var(--ancho)); margin-inline: auto; }
@media (max-width: 640px) { .contenedor { width: min(100% - var(--e-4), var(--ancho)); } }

/* ---------- Cabecera ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--linea);
  view-transition-name: cabecera;
}
.cabecera__fila {
  display: flex; align-items: center; gap: var(--e-5);
  block-size: 60px;
}
.logo {
  font-family: var(--serif);
  font-variation-settings: 'wght' 900, 'SOFT' 40, 'WONK' 1, 'opsz' 40;
  font-size: var(--t-1); letter-spacing: -.02em; text-decoration: none;
  display: flex; align-items: center; gap: var(--e-2);
  white-space: nowrap;
}
.logo__marca { color: var(--acento); }
.nav { display: flex; gap: var(--e-1); margin-inline-start: auto; align-items: center; }
.nav a, .nav button {
  font-family: var(--sans); font-size: var(--t--1); font-weight: 500;
  color: var(--tinta-2); text-decoration: none;
  padding: var(--e-2) var(--e-3); border-radius: 6px;
  background: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--e-2);
  transition: background .15s, color .15s;
}
.nav a:hover, .nav button:hover { background: var(--fondo-3); color: var(--tinta); }
.nav a[aria-current="page"] { color: var(--tinta); font-weight: 700; }
/* En móvil el logotipo y la navegación se pisaban: el logo se reduce, los
   rótulos redundantes desaparecen (a Portada se llega tocando la cabecera) y
   lo que queda son objetivos táctiles de 44px. */
@media (max-width: 720px) {
  .nav .oculta-movil { display: none; }
  .cabecera__fila { gap: var(--e-2); }
  .logo { font-size: var(--t-0); flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }
  .nav { flex: none; gap: 0; }
  .nav a, .nav button { padding: var(--e-2); min-block-size: 44px; min-inline-size: 44px; justify-content: center; }
}
@media (max-width: 420px) {
  .nav a[href="/"] { display: none; }
  .logo__marca + * , .logo { letter-spacing: -.03em; }
}

/* ---------- Barra de progreso (scroll-driven, sin JS) ---------- */
.progreso {
  position: fixed; inset-block-start: 0; inset-inline: 0; block-size: 3px;
  background: var(--acento); transform-origin: 0 50%; transform: scaleX(0);
  z-index: 60;
}
@supports (animation-timeline: scroll()) {
  .progreso {
    animation: crecer linear both;
    animation-timeline: scroll(root block);
  }
}
@keyframes crecer { to { transform: scaleX(1); } }

/* ---------- Etiqueta de sección ---------- */
.etiqueta {
  font-family: var(--sans); font-size: .69rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--color-seccion, var(--azul));
  display: inline-flex; align-items: center; gap: var(--e-2);
  text-decoration: none;
}
.etiqueta::before {
  content: ''; inline-size: 14px; block-size: 2px;
  background: currentColor; flex: none;
}
a.etiqueta:hover { text-decoration: underline; text-underline-offset: 3px; }

.meta {
  font-family: var(--sans); font-size: var(--t--1); color: var(--tinta-3);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2);
}
.meta__punto::before { content: '·'; margin-inline-end: var(--e-2); }

/* ---------- Portada: retícula bento ---------- */
.portada { padding-block: var(--e-6) var(--e-8); }

.marquesina {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e-4); flex-wrap: wrap;
  padding-block-end: var(--e-4); margin-block-end: var(--e-6);
  border-block-end: 3px double var(--tinta);
}
.marquesina__fecha {
  font-family: var(--sans); font-size: var(--t--1); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3);
}
.marquesina__cifras { display: flex; gap: var(--e-5); font-family: var(--sans); }
.cifra { display: flex; align-items: baseline; gap: var(--e-2); }
.cifra b {
  font-family: var(--serif); font-size: var(--t-2);
  font-variation-settings: 'wght' 800, 'opsz' 30;
  color: var(--acento); line-height: 1;
}
.cifra span { font-size: var(--t--1); color: var(--tinta-3); text-transform: uppercase; letter-spacing: .06em; }

.bento {
  display: grid; gap: var(--e-5);
  grid-template-columns: repeat(12, 1fr);
  align-items: start;
}
.bento > * { grid-column: span 12; }
@media (min-width: 900px) {
  .bento__apertura { grid-column: span 7; grid-row: span 2; }
  .bento__secundario { grid-column: span 5; }
  .bento__tercio { grid-column: span 4; }
  .bento__mitad { grid-column: span 6; }
}
@media (min-width: 640px) and (max-width: 899px) {
  .bento__tercio, .bento__mitad, .bento__secundario { grid-column: span 6; }
}

/* ---------- Piezas ---------- */
.pieza {
  display: flex; flex-direction: column; gap: var(--e-3);
  padding: var(--e-5); background: var(--fondo);
  border: 1px solid var(--linea); border-radius: 10px;
  position: relative; isolation: isolate;
  transition: border-color .18s, box-shadow .18s, transform .18s;
  container-type: inline-size;
}
.pieza::after {
  content: ''; position: absolute; inset-block-start: 0; inset-inline: 0;
  block-size: 3px; background: var(--color-seccion, var(--azul));
  border-start-start-radius: 10px; border-start-end-radius: 10px;
  opacity: .9;
}
.pieza:hover { border-color: var(--linea-fuerte); box-shadow: var(--sombra); transform: translateY(-2px); }
.pieza:has(a:focus-visible) { border-color: var(--foco); }

.pieza__titulo {
  font-family: var(--serif); line-height: 1.12; letter-spacing: -.02em;
  font-variation-settings: 'wght' 700, 'SOFT' 20, 'opsz' 40;
  font-size: var(--t-2); text-wrap: balance;
}
.pieza__titulo a { text-decoration: none; }
.pieza__titulo a::after { content: ''; position: absolute; inset: 0; }
.pieza__titulo a:hover { color: var(--acento); }

.pieza__sumario {
  font-size: var(--t-0); color: var(--tinta-2); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; text-wrap: pretty;
}

/* Apertura: la pieza dominante de la portada */
.pieza--apertura { padding: var(--e-6); gap: var(--e-4); }
.pieza--apertura .pieza__titulo {
  font-size: var(--t-5);
  font-variation-settings: 'wght' 800, 'SOFT' 30, 'WONK' 1, 'opsz' 100;
}
.pieza--apertura .pieza__entradilla {
  font-family: var(--serif); font-size: var(--t-1); font-style: italic;
  color: var(--tinta-2); line-height: 1.4; text-wrap: pretty;
  font-variation-settings: 'wght' 400, 'opsz' 40;
}
.pieza--apertura .pieza__sumario { -webkit-line-clamp: 4; font-size: var(--t-1); }
.pieza--apertura::after { block-size: 5px; }

.pieza--compacta { padding: var(--e-4) var(--e-5); gap: var(--e-2); }
.pieza--compacta .pieza__titulo { font-size: var(--t-1); }
.pieza--compacta .pieza__sumario { -webkit-line-clamp: 2; font-size: var(--t--1); }

/* Lista tipográfica sin tarjeta, para bloques densos */
.sumario-lista { display: grid; gap: 0; }
.sumario-lista li { list-style: none; border-block-end: 1px solid var(--linea); }
.sumario-lista li:last-child { border-block-end: 0; }
.sumario-lista a {
  display: grid; gap: var(--e-1); padding-block: var(--e-3);
  text-decoration: none; position: relative;
}
.sumario-lista a:hover .sumario-lista__t { color: var(--acento); }
.sumario-lista__t {
  font-family: var(--serif); font-size: var(--t-0); line-height: 1.25;
  font-variation-settings: 'wght' 650, 'opsz' 24; text-wrap: pretty;
}

.rotulo {
  font-family: var(--sans); font-size: var(--t--1); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--tinta);
  padding-block-end: var(--e-2); margin-block-end: var(--e-4);
  border-block-end: 2px solid var(--tinta);
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
}
.rotulo a { font-weight: 600; letter-spacing: .04em; color: var(--tinta-3); text-decoration: none; }
.rotulo a:hover { color: var(--acento); }

.bloque { margin-block-start: var(--e-8); }

/* ---------- Artículo ---------- */
.articulo-disposicion {
  display: grid; gap: var(--e-7);
  grid-template-columns: 1fr;
  padding-block: var(--e-6) var(--e-8);
}
@media (min-width: 1080px) {
  .articulo-disposicion {
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--medida)) minmax(0, 1fr);
  }
  .articulo-disposicion > * { grid-column: 2; }
  .articulo-disposicion > .indice { grid-column: 1; grid-row: 1 / span 3; justify-self: end; }
}

.migas {
  font-family: var(--sans); font-size: var(--t--1); color: var(--tinta-3);
  display: flex; gap: var(--e-2); align-items: center; flex-wrap: wrap;
  margin-block-end: var(--e-4);
}
.migas a { text-decoration: none; }
.migas a:hover { color: var(--acento); text-decoration: underline; }

.titular {
  font-family: var(--serif);
  font-size: var(--t-6); line-height: 1.04; letter-spacing: -.03em;
  font-variation-settings: 'wght' 800, 'SOFT' 30, 'WONK' 1, 'opsz' 144;
  text-wrap: balance; margin-block: var(--e-3) var(--e-4);
  view-transition-name: titular;
}
.entradilla {
  font-family: var(--serif); font-size: var(--t-2); font-style: italic;
  line-height: 1.35; color: var(--tinta-2); text-wrap: pretty;
  font-variation-settings: 'wght' 400, 'opsz' 60;
  margin-block-end: var(--e-5);
}

.firma {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3);
  padding-block: var(--e-4); margin-block-end: var(--e-6);
  border-block: 1px solid var(--linea);
  font-family: var(--sans); font-size: var(--t--1); color: var(--tinta-3);
}
.firma__autor { color: var(--tinta); font-weight: 600; }
.firma__acciones { margin-inline-start: auto; display: flex; gap: var(--e-2); }
.boton-icono {
  inline-size: 36px; block-size: 36px; display: grid; place-items: center;
  border: 1px solid var(--linea); border-radius: 8px; background: var(--fondo);
  color: var(--tinta-2); cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.boton-icono:hover { background: var(--fondo-3); color: var(--acento); border-color: var(--linea-fuerte); }
.boton-icono[aria-pressed="true"] { color: var(--acento); border-color: var(--acento); background: color-mix(in srgb, var(--acento) 8%, var(--fondo)); }
.boton-icono svg { inline-size: 18px; block-size: 18px; }

/* Cuerpo del texto */
.cuerpo {
  font-family: var(--serif);
  font-variation-settings: 'wght' 380, 'opsz' 14, 'SOFT' 0;
  font-size: var(--t-1); line-height: 1.62; color: var(--tinta);
  max-inline-size: var(--medida);
  hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 8 3 3;
}
.cuerpo > * + * { margin-block-start: 1.35em; }
.cuerpo p { text-wrap: pretty; }
.cuerpo > p:first-of-type::first-letter {
  float: inline-start; font-size: 3.4em; line-height: .82;
  padding-inline-end: .08em; padding-block-start: .04em;
  font-variation-settings: 'wght' 800, 'opsz' 144, 'WONK' 1;
  color: var(--acento);
}
.cuerpo h2:not(.ladillo) {
  font-family: var(--sans); font-size: var(--t-1);
  font-weight: 800; letter-spacing: -.01em; line-height: 1.25;
  margin-block-start: 2.2em; text-wrap: balance; scroll-margin-top: 84px;
}
.cuerpo h2.ladillo, .cuerpo h3 {
  font-family: var(--sans); font-size: var(--t--1); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-seccion, var(--azul));
  margin-block-start: 2.4em; scroll-margin-top: 84px;
}
.cuerpo ul { padding-inline-start: 0; list-style: none; }
.cuerpo li { padding-inline-start: 1.6em; position: relative; margin-block-start: .6em; }
.cuerpo li::before {
  content: ''; position: absolute; inset-inline-start: .35em; inset-block-start: .62em;
  inline-size: 6px; block-size: 6px; border-radius: 50%;
  background: var(--color-seccion, var(--acento));
}
.cuerpo hr { border: 0; border-block-start: 1px solid var(--linea); margin-block: 2.4em; }
.cuerpo strong { font-variation-settings: 'wght' 700, 'opsz' 14; }
.cuerpo a { color: var(--acento); }

/* Índice flotante */
.indice {
  position: sticky; top: 84px; align-self: start;
  max-inline-size: 240px; font-family: var(--sans);
  max-block-size: calc(100vh - 120px); overflow-y: auto;
}
@media (max-width: 1079px) { .indice { display: none; } }
.indice__rotulo {
  font-size: .69rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tinta-3); margin-block-end: var(--e-3);
}
.indice ol { list-style: none; padding: 0; display: grid; gap: var(--e-1); border-inline-start: 2px solid var(--linea); }
.indice a {
  display: block; font-size: var(--t--1); line-height: 1.35; color: var(--tinta-3);
  text-decoration: none; padding: var(--e-2) var(--e-3);
  border-inline-start: 2px solid transparent; margin-inline-start: -2px;
  transition: color .15s, border-color .15s;
}
.indice a:hover { color: var(--tinta); }
.indice a[aria-current="true"] { color: var(--acento); border-inline-start-color: var(--acento); font-weight: 600; }

/* Paginación y relacionados */
.paginador {
  display: grid; gap: var(--e-4); grid-template-columns: 1fr 1fr;
  margin-block-start: var(--e-8); padding-block-start: var(--e-5);
  border-block-start: 1px solid var(--linea);
}
@media (max-width: 640px) { .paginador { grid-template-columns: 1fr; } }
.paginador a {
  display: grid; gap: var(--e-2); padding: var(--e-4);
  border: 1px solid var(--linea); border-radius: 10px; text-decoration: none;
  transition: border-color .18s, background .18s;
}
.paginador a:hover { border-color: var(--linea-fuerte); background: var(--fondo-2); }
.paginador__dir { font-family: var(--sans); font-size: .69rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); }
.paginador__t { font-family: var(--serif); font-size: var(--t-0); line-height: 1.25; font-variation-settings: 'wght' 650, 'opsz' 24; }
.paginador a:last-child { text-align: end; }
@media (max-width: 640px) { .paginador a:last-child { text-align: start; } }

/* ---------- Rejilla de secciones ---------- */
.rejilla-secciones {
  display: grid; gap: var(--e-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}
.tarjeta-seccion {
  display: grid; gap: var(--e-2); padding: var(--e-5);
  border: 1px solid var(--linea); border-radius: 10px; text-decoration: none;
  background: var(--fondo); position: relative; overflow: hidden;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.tarjeta-seccion::before {
  content: ''; position: absolute; inset-block: 0; inset-inline-start: 0;
  inline-size: 4px; background: var(--color-seccion, var(--azul));
}
.tarjeta-seccion:hover { border-color: var(--linea-fuerte); transform: translateY(-2px); box-shadow: var(--sombra); }
.tarjeta-seccion__t {
  font-family: var(--serif); font-size: var(--t-1); line-height: 1.15;
  font-variation-settings: 'wght' 700, 'opsz' 30;
}
.tarjeta-seccion__n { font-family: var(--sans); font-size: var(--t--1); color: var(--tinta-3); }

/* ---------- Búsqueda ---------- */
.buscador-caja { max-inline-size: 640px; margin-block: var(--e-6); }
#buscador-pf { --pagefind-ui-scale: .9; }

/* ---------- Pie ---------- */
.pie {
  margin-block-start: var(--e-9); padding-block: var(--e-7) var(--e-6);
  border-block-start: 1px solid var(--linea); background: var(--fondo-2);
  font-family: var(--sans); font-size: var(--t--1); color: var(--tinta-3);
}
.pie__rejilla { display: grid; gap: var(--e-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.pie h2 { font-size: .69rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta); margin-block-end: var(--e-3); }
.pie ul { list-style: none; padding: 0; display: grid; gap: var(--e-2); }
.pie a { text-decoration: none; }
.pie a:hover { color: var(--acento); text-decoration: underline; }
.pie__legal { margin-block-start: var(--e-6); padding-block-start: var(--e-4); border-block-start: 1px solid var(--linea); display: flex; flex-wrap: wrap; gap: var(--e-4); justify-content: space-between; }

/* ---------- Estado / avisos ---------- */
.aviso {
  display: grid; gap: var(--e-3); place-items: center; text-align: center;
  padding: var(--e-8) var(--e-4); color: var(--tinta-3);
}
.aviso h1, .aviso h2 { font-family: var(--serif); font-size: var(--t-3); color: var(--tinta); font-variation-settings: 'wght' 700, 'opsz' 60; }
.boton {
  display: inline-flex; align-items: center; gap: var(--e-2);
  font-family: var(--sans); font-size: var(--t--1); font-weight: 600;
  padding: var(--e-3) var(--e-5); border-radius: 8px;
  background: var(--acento); color: #fff; text-decoration: none; border: 0; cursor: pointer;
}
.boton:hover { background: var(--acento-tinta); }
.boton--fantasma { background: transparent; color: var(--tinta); border: 1px solid var(--linea-fuerte); }
.boton--fantasma:hover { background: var(--fondo-3); }

/* ---------- Rendimiento: saltar el trabajo fuera de pantalla ----------
   Solo sobre las tarjetas, que tienen alto uniforme y medido (~314px). Aplicarlo
   a los contenedores grandes hacía encoger el documento al salir de pantalla y
   la barra de desplazamiento daba saltos: CLS gratis a cambio de nada. */
.pieza { content-visibility: auto; contain-intrinsic-size: auto 320px; }
.rejilla-secciones .tarjeta-seccion { content-visibility: auto; contain-intrinsic-size: auto 116px; }

/* ---------- Transiciones entre documentos ---------- */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: desvanecer .18s ease both reverse; }
  ::view-transition-new(root) { animation: desvanecer .22s ease both; }
}
@keyframes desvanecer { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Impresión ---------- */
@media print {
  .cabecera, .nav, .progreso, .indice, .paginador, .pie, .firma__acciones,
  .bloque--relacionados, .saltar { display: none !important; }
  html { font-size: 11pt; }
  body { background: #fff; color: #000; }
  .cuerpo { max-inline-size: none; font-size: 11pt; line-height: 1.45; }
  .titular { font-size: 24pt; }
  .cuerpo a::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; word-break: break-all; }
  .articulo-disposicion { display: block; }
  .pie-impresion { display: block !important; margin-top: 2em; padding-top: 1em; border-top: 1pt solid #999; font-size: 9pt; }
  h2, h3 { break-after: avoid; }
  p, li { orphans: 3; widows: 3; }
}
.pie-impresion { display: none; }

.cuerpo{font-size:calc(var(--t-1) * var(--escala-lectura, 1));}
.retomar{position:fixed;inset-block-end:var(--e-5);inset-inline:auto;left:50%;transform:translateX(-50%);display:flex;gap:var(--e-3);align-items:center;background:var(--fondo);border:1px solid var(--linea-fuerte);border-radius:12px;padding:var(--e-3) var(--e-4);box-shadow:var(--sombra-alta);z-index:70;font-family:var(--sans);font-size:var(--t--1);max-inline-size:calc(100vw - 2rem);flex-wrap:wrap;justify-content:center}