/* ==========================================================================
   VIENE DE LEJOS — sistema de diseño
   Concepto: una cámara oscura. Fuego, ocre, hueso y tiempo profundo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   ÍNDICE — busca el número con el punto («7.») para saltar a su sección.

    1-6  Variables, reinicio, tipografía, botones y utilidades base
      7  HERO — la boca de la cueva
      8  CRONOSCOPIO — el instrumento
      9  PORTADA — pieza destacada
     10  REJILLA DE ARTÍCULOS
     11  LÍNEA DEL TIEMPO horizontal
     12  ESTRATOS (secciones) y su mosaico
     13  MANIFIESTO
     14  PIE
     15  ARTÍCULO
     16  BLOQUES DE CONTENIDO
     17  FIN DE ARTÍCULO
     18  UTILIDADES / ANIMACIÓN DE ENTRADA
     19  LÍNEA DEL TIEMPO vertical
     20  ENTRADA DEL ARTÍCULO
     21  EL RESPALDO — referencias verificadas
     22  COLOFÓN
     23  EDICIONES
     24  ESTRATIGRAFÍA
     25  BOLETÍN
     26  DOSIER

   Se sirve comprimido: 75 KB en disco son unos 16 KB por el cable. Partirlo
   en varios ficheros ahorraría un par de KB y costaría una petición más por
   página, así que no compensa mientras no haya un paso de compilación.
   -------------------------------------------------------------------------- */

/* ----------------------------------------------------------- 1. tokens */
:root {
  /* superficies */
  --ink:        #0A0908;
  --ink-2:      #100E0B;
  --ink-3:      #17140F;
  --ink-4:      #211C16;

  /* tinta */
  --bone:       #EFE6D8;
  --bone-dim:   #A79D8E;
  --bone-mute:  #8C8377;   /* subido: a #6E665B daba 3,52:1, por debajo del mínimo WCAG */

  /* fuego */
  --ember:      #E0682C;
  --ember-soft: #F0955A;
  --ochre:      #D9A441;
  --blood:      #8C2F22;
  --moss:       #6E7A4F;
  --sky:        #5B7FA6;

  /* acento contextual (lo pisan las secciones) */
  --accent:     #D9A441;
  --accent-ink: #0A0908;

  --line:       color-mix(in oklab, var(--bone) 13%, transparent);
  --line-soft:  color-mix(in oklab, var(--bone) 7%, transparent);
  --glass:      color-mix(in oklab, var(--ink) 72%, transparent);

  /* velo — la tinta que oscurece una foto para que se lea el texto encima.
     Vale lo mismo en los dos temas a propósito: el modo papel aclara la
     página, no las fotografías. */
  --velo:       #0A0907;

  /* tipografía — se elige el juego en Ajustes */
  --font-display: "Fraunces", Georgia, serif;
  --font-read:    "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
  --display-tracking: -0.022em;
  --display-weight: 400;
  --read-size: 17px;

  /* medidas */
  --page:       1400px;
  --read:       690px;
  --gutter:     clamp(1.25rem, 4vw, 4rem);
  --radius:     2px;

  /* curvas */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   FOTOGRAFÍA CON TEXTO ENCIMA

   Una portada es una portada. Donde el titular va sobre la imagen, la pieza
   mantiene la paleta oscura también en modo papel: el texto sigue siendo claro
   y el velo sigue siendo tinta. Si no, en claro el degradado echaba crema
   sobre la foto para que se leyera un texto negro, y el resultado era leche.

   Se reasignan las variables, no las reglas: así todo lo que ya usa --bone o
   --ink dentro de estos bloques se corrige solo.
   -------------------------------------------------------------------------- */
.hero--foto,
.article-hero,
.stratum--foto,
.manifesto--foto {
  --ink:        #0A0907;
  --ink-2:      #100E0B;
  --ink-3:      #17140F;
  --ink-4:      #211C16;
  --bone:       #EFE6D8;
  --bone-dim:   #A79D8E;
  --bone-mute:  #8C8377;
  --line:       color-mix(in oklab, #EFE6D8 13%, transparent);
  --line-soft:  color-mix(in oklab, #EFE6D8 7%, transparent);
  color: var(--bone);
}

/* ==========================================================================
   JUEGOS TIPOGRÁFICOS
   Se cambian desde Ajustes. Cada uno ajusta también peso, interletraje y
   cuerpo, porque una tipografía no se sustituye por otra sin recalibrar.
   ========================================================================== */

/* Afilada — editorial contemporáneo. Titulares con aplomo, lectura cómoda. */
[data-fuentes="afilada"] {
  --font-display: "Instrument Serif", Georgia, serif;
  --font-read:    "Literata", Georgia, serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;
  --display-tracking: -0.015em;
  --display-weight: 400;
  --read-size: 17.5px;
}
[data-fuentes="afilada"] .display,
[data-fuentes="afilada"] h1,
[data-fuentes="afilada"] h2,
[data-fuentes="afilada"] h3 { font-variation-settings: normal; }

/* Clásica — old style, aire de libro antiguo. */
[data-fuentes="clasica"] {
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-read:    "Source Serif 4", Georgia, serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;
  --display-tracking: -0.005em;
  --display-weight: 500;
  --read-size: 17.5px;
}
[data-fuentes="clasica"] .display,
[data-fuentes="clasica"] h1,
[data-fuentes="clasica"] h2,
[data-fuentes="clasica"] h3 { font-variation-settings: normal; }
[data-fuentes="clasica"] .hero h1 { font-weight: 600; }

/* Rotunda — alto contraste, revista de quiosco. */
[data-fuentes="rotunda"] {
  --font-display: "Playfair Display", Georgia, serif;
  --font-read:    "Lora", Georgia, serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;
  --display-tracking: -0.02em;
  --display-weight: 500;
  --read-size: 17px;
}
[data-fuentes="rotunda"] .display,
[data-fuentes="rotunda"] h1,
[data-fuentes="rotunda"] h2,
[data-fuentes="rotunda"] h3 { font-variation-settings: normal; }

/* modo papel — expedición de día */
[data-theme="paper"] {
  --ink:        #EDE4D4;
  --ink-2:      #E6DCC9;
  --ink-3:      #DFD4BF;
  --ink-4:      #D6C9B1;
  --bone:       #1B1712;
  --bone-dim:   #554C40;
  --bone-mute:  #857A6B;
  --ember:      #B8451A;
  --ember-soft: #9C3F1C;
  --ochre:      #97701D;
  --line:       color-mix(in oklab, var(--bone) 18%, transparent);
  --line-soft:  color-mix(in oklab, var(--bone) 10%, transparent);
  --glass:      color-mix(in oklab, var(--ink) 78%, transparent);
  color-scheme: light;
}

/* ----------------------------------------------------------- 2. reset */
*, *::before, *::after { box-sizing: border-box; }
/* `hidden` tiene que ganar a cualquier display de clase, o un elemento oculto
   desde el HTML o desde JS sigue viéndose. */
[hidden] { display: none !important; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-read);
  font-size: var(--read-size);
  line-height: 1.62;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100svh;
}

img, video, canvas, svg { display: block; max-width: 100%; }
img, video { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--ember); color: #fff; }

/* grano de película sobre todo el documento */
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  pointer-events: none;
  z-index: 9999;
  opacity: .15;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  animation: grain 6s steps(6) infinite;
}
[data-theme="paper"] body::after { opacity: .26; mix-blend-mode: multiply; }
@keyframes grain {
  0%   { transform: translate(0,0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -3%); }
  60%  { transform: translate(-2%, -2%); }
  80%  { transform: translate(3%, 1%); }
  100% { transform: translate(0,0); }
}
@media (prefers-reduced-motion: reduce) { body::after { animation: none; } }
/* El grano es una capa a pantalla completa con mezcla: en móviles modestos
   cuesta cara al hacer scroll y casi no se aprecia. Fuera. */
@media (max-width: 700px) { body::after { display: none; } }

/* ----------------------------------------------------------- 3. tipografía */
.display, h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-variation-settings: "SOFT" 0, "WONK" 1;
  line-height: 0.98;
  letter-spacing: var(--display-tracking);
  text-wrap: balance;
}

.kicker {
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--bone-mute);
}
.kicker--accent { color: var(--accent); }

.stamp {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bone-dim);
  display: inline-flex;
  align-items: center;
  gap: .5em;
  white-space: nowrap;
}
.stamp::before {
  content: "";
  width: 5px; height: 5px;
  background: var(--accent);
  border-radius: 50%;
  flex: none;
}
.stamp--plain::before { display: none; }

.lede {
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  line-height: 1.5;
  color: var(--bone-dim);
  font-weight: 300;
  text-wrap: pretty;
}

/* ----------------------------------------------------------- 4. layout */
.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--read { max-width: calc(var(--read) + var(--gutter) * 2); }

.section-pad { padding-block: clamp(4rem, 9vw, 8.5rem); }
.rule { height: 1px; background: var(--line); border: 0; }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  padding-bottom: 1.6rem;
  margin-bottom: 2.8rem;
  border-bottom: 1px solid var(--line);
}
.section-head h2 { font-size: clamp(1.9rem, 4vw, 3.1rem); }
.section-head p { color: var(--bone-mute); max-width: 46ch; font-size: .95rem; }

/* ----------------------------------------------------------- 5. botones */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--bone);
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .78em 1.35em;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--line);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms ease,
              border-color 200ms ease, color 200ms ease;
}
.btn:active { transform: scale(.97); }
.btn .glyph { width: 15px; height: 15px; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { border-color: color-mix(in oklab, var(--accent) 60%, transparent); color: var(--accent); }
}
.btn--solid {
  --btn-bg: var(--accent);
  --btn-fg: var(--accent-ink);
  border-color: transparent;
  font-weight: 500;
}
@media (hover: hover) and (pointer: fine) {
  .btn--solid:hover {
    background: color-mix(in oklab, var(--accent) 84%, #fff);
    color: var(--accent-ink);
  }
}
.btn--ghost { border-color: transparent; padding-inline: .4em; }

/* enlace con subrayado que crece */
.link-under {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 260ms var(--ease-out);
}
@media (hover: hover) { .link-under:hover { background-size: 100% 1px; } }

/* ----------------------------------------------------------- 6. cabecera */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  backdrop-filter: blur(14px) saturate(1.2);
  background: var(--glass);
  border-bottom: 1px solid transparent;
  transition: border-color 300ms ease, background-color 300ms ease;
}
.site-header[data-stuck="1"] { border-bottom-color: var(--line); }
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 68px;
}
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: .55rem;
  font-family: var(--font-display);
  font-size: 1.32rem;
  letter-spacing: .16em;
  font-weight: 500;
  font-variation-settings: "WONK" 0;
  text-transform: uppercase;
}
.brand b { font-weight: 500; }

/* La marca: los trazos vienen de lejos y el punto es la llegada. El color lo
   hereda del sitio donde se ponga, así que sirve igual en la cabecera oscura
   que en el pie o sobre papel. */
.brand__marca {
  width: 2.6em; height: .72em;
  flex: none; align-self: center;
  color: var(--accent);
  overflow: visible;
}
.brand:hover .brand__marca { color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .brand__marca rect { transition: opacity 420ms var(--ease-out); }
  .brand:hover .brand__marca rect { opacity: .9; }
}
.brand__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 14px 2px color-mix(in oklab, var(--ember) 70%, transparent);
  animation: pulse 3.4s ease-in-out infinite;
  align-self: center;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .brand__dot { animation: none; } }

.nav { display: flex; align-items: center; gap: 1.6rem; }
.nav a {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone-dim);
  position: relative;
  padding-block: .4rem;
  transition: color 200ms ease;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 240ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .nav a:hover { color: var(--bone); }
  .nav a:hover::after { transform: scaleX(1); }
}
.nav a[aria-current="page"] { color: var(--bone); }
.nav a[aria-current="page"]::after { transform: scaleX(1); background: var(--accent); }

.header-tools { display: flex; align-items: center; gap: .5rem; }
.icon-btn {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  color: var(--bone-dim);
  transition: transform 160ms var(--ease-out), color 200ms ease, border-color 200ms ease;
}
.icon-btn:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
  .icon-btn:hover { color: var(--bone); border-color: var(--bone-mute); }
}
.icon-btn .glyph { width: 16px; height: 16px; }

.nav-toggle { display: none; }
@media (max-width: 860px) {
  .nav {
    position: fixed;
    inset: 68px 0 auto 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--ink-2);
    border-bottom: 1px solid var(--line);
    padding: 1rem var(--gutter) 2rem;
    clip-path: inset(0 0 100% 0);
    transition: clip-path 340ms var(--ease-drawer);
  }
  .nav[data-open="1"] { clip-path: inset(0 0 0 0); }
  .nav a { font-size: 1rem; padding-block: .9rem; width: 100%; border-bottom: 1px solid var(--line-soft); }
  .nav-toggle { display: grid; }
}

/* ==========================================================================
   7. HERO — la boca de la cueva
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  isolation: isolate;
  overflow: hidden;
  margin-top: -68px;
  padding-top: 68px;
}

/* cielo nocturno + resplandor de hoguera */
.hero__sky {
  position: absolute; inset: 0; z-index: -5;
  background:
    radial-gradient(120% 80% at 50% 118%, color-mix(in oklab, var(--ember) 55%, transparent) 0%, transparent 58%),
    radial-gradient(90% 60% at 50% 105%, color-mix(in oklab, var(--ochre) 40%, transparent) 0%, transparent 55%),
    linear-gradient(180deg, #05060A 0%, #0B0908 45%, #140D08 100%);
}
[data-theme="paper"] .hero__sky {
  background:
    radial-gradient(120% 80% at 50% 118%, color-mix(in oklab, var(--ember) 30%, transparent) 0%, transparent 58%),
    linear-gradient(180deg, #DCCFB6 0%, #E9E0CD 60%, #F0E7D6 100%);
}

/* estrellas */
.hero__stars { position: absolute; inset: 0; z-index: -4; opacity: .8; }
[data-theme="paper"] .hero__stars { opacity: 0; }

/* parpadeo del fuego */
.hero__fire {
  position: absolute;
  left: 50%; bottom: -30vh;
  width: min(120vw, 1400px); aspect-ratio: 1;
  translate: -50% 0;
  z-index: -3;
  background: radial-gradient(circle, color-mix(in oklab, var(--ember) 42%, transparent) 0%, transparent 62%);
  filter: blur(30px);
  animation: flicker 5.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes flicker {
  0%, 100% { opacity: .85; transform: translate(-50%, 0) scale(1); }
  35%      { opacity: 1;   transform: translate(-50%, -1%) scale(1.04); }
  60%      { opacity: .78; transform: translate(-50%, .5%) scale(.98); }
}
@media (prefers-reduced-motion: reduce) { .hero__fire { animation: none; } }

/* colinas en parallax */
.hero__ridge { position: absolute; left: -5%; width: 110%; z-index: -2; will-change: transform; }
.hero__ridge path { fill: var(--ink); }
.hero__ridge--far  { bottom: 22%; opacity: .55; }
.hero__ridge--mid  { bottom: 8%;  opacity: .8; }
.hero__ridge--near { bottom: -2%; opacity: 1; }
[data-theme="paper"] .hero__ridge path { fill: #2A231A; }
[data-theme="paper"] .hero__ridge--far path { fill: #6E6250; }
[data-theme="paper"] .hero__ridge--mid path { fill: #483E31; }

/* arco de piedra que enmarca la escena */
.hero__cave { position: absolute; inset: 0 0 auto 0; z-index: -1; width: 100%; height: min(38%, 300px); pointer-events: none; }
.hero__cave path { fill: var(--ink); }

/* linterna que sigue al puntero */
.hero__torch {
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms ease;
  background: radial-gradient(
    260px 260px at var(--tx, 50%) var(--ty, 50%),
    color-mix(in oklab, var(--ochre) 16%, transparent) 0%,
    transparent 70%);
  mix-blend-mode: screen;
}
@media (hover: hover) and (pointer: fine) { .hero__torch[data-on="1"] { opacity: 1; } }

.hero__content {
  position: relative;
  text-align: center;
  padding-block: clamp(4rem, 12vh, 9rem);
  display: grid;
  justify-items: center;
  gap: 1.6rem;
}
.hero h1 {
  font-size: clamp(3.2rem, 12.5vw, 11.5rem);
  line-height: .86;
  letter-spacing: -0.045em;
  font-weight: 300;
  max-width: 15ch;
}
.hero h1 em {
  font-style: italic;
  font-variation-settings: "WONK" 1, "SOFT" 40;
  color: var(--ember);
  font-weight: 400;
}
.hero .lede { max-width: 54ch; }
.hero__meta { display: flex; gap: 1.6rem; flex-wrap: wrap; justify-content: center; }

/* invitación a bajar */
.hero__scroll {
  position: absolute;
  bottom: 1.6rem; left: 50%;
  translate: -50% 0;
  display: grid; justify-items: center; gap: .7rem;
  color: var(--bone-mute);
}
.hero__scroll .line {
  width: 1px; height: 46px;
  background: linear-gradient(var(--bone-mute), transparent);
  position: relative; overflow: hidden;
}
.hero__scroll .line::after {
  content: ""; position: absolute; inset-inline: 0; height: 14px;
  background: var(--ember);
  animation: drop 2.4s var(--ease-in-out) infinite;
}
@keyframes drop { 0% { top: -14px; } 60%,100% { top: 46px; } }
@media (prefers-reduced-motion: reduce) { .hero__scroll .line::after { animation: none; top: 0; } }

/* ==========================================================================
   8. CRONOSCOPIO — el instrumento
   ========================================================================== */
.chrono {
  position: relative;
  border-block: 1px solid var(--line);
  background: var(--ink-2);
  padding-block: 1.15rem;
}
.chrono__inner { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); }
.chrono__read { display: grid; gap: .15rem; min-width: 11ch; }
.chrono__value {
  font-family: var(--font-mono);
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  font-weight: 300;
  color: var(--ember);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.chrono__unit { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--bone-mute); }

.chrono__scale {
  position: relative;
  flex: 1;
  height: 46px;
  border-left: 1px solid var(--line);
  padding-left: clamp(1rem, 3vw, 2rem);
}
.chrono__track {
  position: absolute;
  left: clamp(1rem, 3vw, 2rem); right: 0; top: 50%;
  height: 1px;
  background: linear-gradient(90deg, var(--line) 0%, var(--bone-mute) 100%);
}
.chrono__ticks { position: absolute; inset: 0 0 0 clamp(1rem, 3vw, 2rem); }
.chrono__tick {
  position: absolute; top: 50%; translate: -50% -50%;
  width: 1px; height: 9px;
  background: var(--bone-mute);
  opacity: .5;
}
.chrono__tick[data-major] { height: 17px; opacity: .9; }
.chrono__tick span {
  position: absolute; top: calc(100% + 6px); left: 50%;
  translate: -50% 0;
  font-family: var(--font-mono); font-size: .55rem;
  letter-spacing: .12em; color: var(--bone-mute);
  white-space: nowrap;
}
.chrono__needle {
  position: absolute; top: 50%; translate: -50% -50%;
  width: 2px; height: 30px;
  background: var(--ember);
  box-shadow: 0 0 12px color-mix(in oklab, var(--ember) 80%, transparent);
  transition: left 120ms linear;
}
.chrono__needle::before {
  content: ""; position: absolute; top: -7px; left: 50%; translate: -50% 0;
  width: 7px; height: 7px; border-radius: 50%; background: var(--ember);
}
.chrono__label { max-width: 30ch; font-size: .82rem; color: var(--bone-dim); line-height: 1.45; }
@media (max-width: 760px) {
  .chrono__scale { display: none; }
  .chrono__inner { justify-content: space-between; }
}

/* ==========================================================================
   9. PORTADA — pieza destacada
   ========================================================================== */
.lead-story {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}
@media (max-width: 900px) { .lead-story { grid-template-columns: 1fr; } }

.lead-story__media {
  position: relative;
  aspect-ratio: 4 / 3.2;
  overflow: hidden;
  background: var(--ink-3);
  border: 1px solid var(--line);
}
.lead-story__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 900ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .lead-story:hover .lead-story__media img { transform: scale(1.035); }
}
/* Una sombra en la esquina de abajo, solo para que la foto no flote suelta
   sobre el fondo. Nada de velo: aquí no hay texto encima que proteger. */
.lead-story__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(200deg, transparent 68%, color-mix(in oklab, var(--velo) 30%, transparent) 100%);
  pointer-events: none;
}
.lead-story__body { display: grid; gap: 1.35rem; }
.lead-story__body h2 { font-size: clamp(2.1rem, 5.2vw, 4.2rem); font-weight: 300; }
.lead-story__body h2 em { font-style: italic; color: var(--accent); }

.verdict {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.05rem, 1.9vw, 1.35rem);
  line-height: 1.35;
  color: var(--bone);
  border-left: 2px solid var(--accent);
  padding-left: 1.1rem;
}

.meta-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .75rem 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}

/* ==========================================================================
   10. REJILLA DE ARTÍCULOS
   ========================================================================== */
.grid-posts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: clamp(1.5rem, 3vw, 2.75rem) clamp(1.25rem, 2.5vw, 2.25rem);
}

.card { position: relative; display: grid; gap: .95rem; align-content: start; }
.card__media {
  position: relative;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  background:
    linear-gradient(145deg, var(--ink-4), var(--ink-2));
  border: 1px solid var(--line);
}
.card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 800ms var(--ease-out);
}
.card__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 80%, color-mix(in oklab, var(--velo) 26%, transparent) 100%);
  opacity: .9;
  transition: opacity 400ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .card:hover .card__media img { transform: scale(1.05); }
  .card:hover .card__media::after { opacity: .5; }
  .card:hover h3 { color: var(--accent); }
}
.card h3 {
  font-size: clamp(1.2rem, 1.9vw, 1.55rem);
  font-weight: 400;
  line-height: 1.08;
  transition: color 240ms ease;
}
.card p { color: var(--bone-mute); font-size: .92rem; line-height: 1.5; }
.card__foot { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.card a.cover { position: absolute; inset: 0; z-index: 2; }

/* sello temporal sobre la imagen */
.timechip {
  position: absolute;
  left: .7rem; top: .7rem;
  z-index: 1;
  display: inline-flex; align-items: center; gap: .45em;
  padding: .34em .7em;
  background: color-mix(in oklab, var(--ink) 78%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: .58rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--bone);
}
.timechip .glyph { width: 11px; height: 11px; color: var(--accent); }

/* etiqueta de sección */
.tag-section {
  display: inline-flex; align-items: center; gap: .45em;
  font-family: var(--font-mono);
  font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent);
}
.tag-section .glyph { width: 13px; height: 13px; }

/* fallback cuando no hay imagen: arte generativo */
.noimg {
  position: absolute; inset: 0;
  background:
    radial-gradient(80% 60% at 30% 20%, color-mix(in oklab, var(--accent) 26%, transparent), transparent 70%),
    repeating-linear-gradient(115deg, transparent 0 6px, color-mix(in oklab, var(--bone) 4%, transparent) 6px 7px),
    linear-gradient(150deg, var(--ink-4), var(--ink-2));
  display: grid; place-items: center;
}
.noimg .glyph { width: 34%; height: auto; color: color-mix(in oklab, var(--accent) 60%, transparent); opacity: .55; }

/* ==========================================================================
   11. LÍNEA DEL TIEMPO horizontal
   ========================================================================== */
.timeline {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, transparent, color-mix(in oklab, var(--ink-2) 70%, transparent) 30%, transparent);
}
.timeline__rail {
  display: flex;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  padding: 3rem var(--gutter) 4.5rem;
  cursor: grab;
  scrollbar-width: thin;
  scrollbar-color: var(--bone-mute) transparent;
}
.timeline__rail::-webkit-scrollbar { height: 3px; }
.timeline__rail::-webkit-scrollbar-thumb { background: var(--bone-mute); }
.timeline__rail[data-grabbing="1"] { cursor: grabbing; scroll-snap-type: none; }
.timeline__rail > * { scroll-snap-align: center; }

.epoch {
  position: relative;
  flex: none;
  width: clamp(230px, 26vw, 330px);
  padding: 2.6rem 1.6rem 0 0;
  border-top: 1px solid var(--line);
}
.epoch::before {
  content: "";
  position: absolute; top: -4px; left: 0;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--bone-mute);
  transition: background-color 300ms ease, transform 300ms var(--ease-out);
}
.epoch[data-has-post="1"]::before { background: var(--ember); box-shadow: 0 0 12px var(--ember); }
.epoch__years {
  font-family: var(--font-mono);
  font-size: clamp(1.05rem, 1.7vw, 1.45rem);
  color: var(--bone);
  letter-spacing: -.01em;
  display: block;
  margin-bottom: .15rem;
}
.epoch__unit { font-family: var(--font-mono); font-size: .56rem; letter-spacing: .2em; text-transform: uppercase; color: var(--bone-mute); }
.epoch h3 { font-family: var(--font-display); font-size: 1.12rem; font-weight: 400; margin-top: .9rem; line-height: 1.12; }
.epoch p { font-size: .84rem; color: var(--bone-mute); margin-top: .5rem; line-height: 1.5; max-width: 30ch; }
.epoch__posts { display: grid; gap: .5rem; margin-top: 1.1rem; }
.epoch__post {
  display: flex; gap: .6rem; align-items: flex-start;
  padding: .6rem .75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in oklab, var(--ink-3) 60%, transparent);
  font-size: .84rem;
  line-height: 1.3;
  transition: border-color 220ms ease, background-color 220ms ease, transform 220ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .epoch__post:hover { border-color: var(--accent); background: var(--ink-3); transform: translateX(3px); }
}
.epoch__post .glyph { width: 13px; height: 13px; color: var(--accent); flex: none; margin-top: .15rem; }

/* ==========================================================================
   12. ESTRATOS (secciones)
   ========================================================================== */
/* ==========================================================================
   MOSAICO DE ESTRATOS
   El fondo ya NO lo pinta la rejilla. Antes las separaciones eran el fondo
   asomando por un hueco de 1px, y cualquier celda vacía se veía como un
   rectángulo gris. Ahora cada tarjeta lleva su propio borde: si algún día
   sobra una celda, simplemente no se ve.
   ========================================================================== */
.strata {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 1px;
  background: transparent;
  border: 1px solid var(--line);
}
.stratum { box-shadow: 0 0 0 1px var(--line); }

/* Con seis estratos: dos grandes arriba y cuatro debajo. Ocho celdas para ocho
   tarjetas-columna, así que no sobra ninguna. */
@media (min-width: 1180px) {
  .strata--6 { grid-template-columns: repeat(4, 1fr); }
  .strata--6 > :nth-child(1),
  .strata--6 > :nth-child(2) { grid-column: span 2; }
}
@media (min-width: 900px) and (max-width: 1179px) {
  .strata--6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 899px) { .strata { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .strata { grid-template-columns: 1fr; } }
.stratum {
  position: relative;
  background: var(--ink);
  display: grid;
  align-content: end;
  min-height: 320px;
  overflow: hidden;
  isolation: isolate;
  transition: background-color 400ms ease;
}
.stratum__cuerpo {
  position: relative; z-index: 2;
  display: grid; gap: .55rem; align-content: end;
  padding: clamp(1.4rem, 2.6vw, 2rem);
}
/* La imagen vive detrás, oscurecida lo justo para que el texto respire */
.stratum__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.stratum__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.95) contrast(1.02) brightness(.88);
  transition: transform 900ms var(--ease-out), filter 600ms ease;
}
.stratum--foto::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--ink) 18%, transparent) 0%,
                            transparent 26%,
                            transparent 44%,
                            color-mix(in oklab, var(--ink) 82%, transparent) 84%,
                            var(--ink) 100%),
    linear-gradient(0deg, color-mix(in oklab, var(--accent) 16%, transparent), transparent 45%);
  transition: opacity 500ms ease;
}
@media (min-width: 900px) {
  .stratum--foto { min-height: 340px; }
}
/* Las dos de arriba mandan: más altura y titular mayor */
@media (min-width: 1180px) {
  .strata--6 > :nth-child(1).stratum--foto,
  .strata--6 > :nth-child(2).stratum--foto { min-height: 420px; }
  .strata--6 > :nth-child(1) h3,
  .strata--6 > :nth-child(2) h3 { font-size: 2.1rem; }
}
.stratum__glow {
  position: absolute; inset: auto -20% -60% -20%;
  height: 70%;
  background: radial-gradient(60% 100% at 50% 100%, color-mix(in oklab, var(--accent) 30%, transparent), transparent 70%);
  opacity: 0;
  transition: opacity 500ms ease;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .stratum:hover { background: var(--ink-2); }
  .stratum:hover .stratum__glow { opacity: 1; }
  .stratum:hover .stratum__arrow { transform: translateX(4px); color: var(--accent); }
  .stratum:hover .stratum__media img { transform: scale(1.06); filter: saturate(1) contrast(1) brightness(1); }
}
.stratum h3 { font-size: 1.75rem; font-weight: 400; }
.stratum .glyph--big { width: 26px; height: 26px; color: var(--accent); }
/* La sombra hace el trabajo que antes hacía apagar la foto entera: oscurece
   detrás de las letras y deja la imagen en paz. */
.stratum--foto h3 { text-shadow: 0 1px 3px color-mix(in oklab, var(--ink) 60%, transparent), 0 2px 26px var(--ink); }
.stratum--foto .stratum__desc,
.stratum--foto .stratum__tagline,
.stratum--foto .stamp { text-shadow: 0 1px 12px var(--ink); }
.stratum__desc { font-size: .88rem; color: var(--bone-dim); line-height: 1.5; }
.stratum--foto .stratum__desc { color: color-mix(in oklab, var(--bone) 78%, transparent); }
.stratum__tagline { font-family: var(--font-display); font-style: italic; color: var(--bone-dim); font-size: 1rem; }
.stratum__foot { display: flex; justify-content: space-between; align-items: center; padding-top: .8rem; }
.stratum__arrow { transition: transform 260ms var(--ease-out), color 260ms ease; }
.stratum__arrow .glyph { width: 20px; height: 20px; }

/* ==========================================================================
   13. MANIFIESTO
   ========================================================================== */
.manifesto {
  position: relative;
  text-align: center;
  padding-block: clamp(5rem, 12vw, 10rem);
  background:
    radial-gradient(70% 100% at 50% 0%, color-mix(in oklab, var(--blood) 22%, transparent), transparent 65%),
    var(--ink-2);
  border-block: 1px solid var(--line);
  overflow: hidden;
}
.manifesto blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 4.4vw, 3.4rem);
  font-weight: 300;
  line-height: 1.08;
  max-width: 20ch;
  margin-inline: auto;
  text-wrap: balance;
}
.manifesto blockquote em { font-style: italic; color: var(--ember); }
.manifesto cite { display: block; margin-top: 2rem; font-style: normal; }

/* manos rupestres decorativas */
.handprints { position: absolute; inset: 0; pointer-events: none; opacity: .07; }
.handprints .glyph { position: absolute; width: 90px; height: 90px; color: var(--ochre); }

/* ==========================================================================
   14. PIE
   ========================================================================== */
.site-footer { padding-block: clamp(3rem, 6vw, 5rem) 2rem; border-top: 1px solid var(--line); background: var(--ink); }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(2, minmax(0, .8fr)); gap: 2.5rem; }
@media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-grid h2 { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--bone-mute); margin-bottom: 1.1rem; font-weight: 500; }
.footer-links { display: grid; gap: .55rem; }
.footer-links a { color: var(--bone-dim); font-size: .92rem; transition: color 200ms ease; }
@media (hover: hover) { .footer-links a:hover { color: var(--accent); } }
.footer-bottom {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line-soft);
}
.footer-bottom p { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em; color: var(--bone-mute); text-transform: uppercase; }

/* ==========================================================================
   15. ARTÍCULO
   ========================================================================== */
.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 900;
  background: transparent;
}
.progress__bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--ochre), var(--ember));
  transition: width 90ms linear;
}

.article-hero {
  position: relative;
  min-height: min(88svh, 820px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  margin-top: -68px;
  padding-top: 68px;
  isolation: isolate;
}
.article-hero__img { position: absolute; inset: 0; z-index: -2; }
.article-hero__img img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.97) contrast(1.03) brightness(.9); }
/* Franja arriba para la cabecera, franja abajo para el titular, y en medio la
   ilustración sin tocar. Antes el degradado empezaba en 70% de tinta y la
   imagen entera iba al 60% de brillo: la portada no se veía. */
.article-hero__img::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(58% 54% at 18% 72%, color-mix(in oklab, var(--ink) 78%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, color-mix(in oklab, var(--ink) 62%, transparent) 0%, transparent 20%, transparent 40%, color-mix(in oklab, var(--ink) 86%, transparent) 90%, var(--ink) 100%),
    radial-gradient(90% 60% at 50% 100%, color-mix(in oklab, var(--accent) 16%, transparent), transparent 70%);
}
.article-hero--empty { min-height: min(70svh, 640px); }
.article-hero--empty .article-hero__img {
  background:
    radial-gradient(70% 60% at 50% 110%, color-mix(in oklab, var(--accent) 32%, transparent), transparent 65%),
    repeating-linear-gradient(100deg, transparent 0 14px, color-mix(in oklab, var(--bone) 3%, transparent) 14px 15px),
    linear-gradient(180deg, #05060A, var(--ink));
}
.article-hero__body { padding-bottom: clamp(2.5rem, 6vw, 4.5rem); display: grid; gap: 1.4rem; max-width: 24ch; }
.article-hero__body.wide { max-width: 100%; }
.article-hero h1 {
  font-size: clamp(2.5rem, 7.2vw, 6rem);
  font-weight: 300;
  max-width: 17ch;
  letter-spacing: -0.035em;
  text-shadow: 0 1px 3px color-mix(in oklab, var(--ink) 55%, transparent), 0 4px 40px var(--ink);
}
.article-hero h1 em { font-style: italic; color: var(--accent); }
.article-hero .lede { max-width: 52ch; text-shadow: 0 1px 16px var(--ink); }
.article-hero__meta { display: flex; flex-wrap: wrap; gap: .8rem 1.6rem; align-items: center; }
/* El antetítulo es diminuto y va en el color de la sección: sobre piel clara
   se pierde. Se aclara hacia el hueso sin perder el tono que lo identifica. */
.article-hero__meta .stamp, .article-hero .tag-section, .article-hero .kicker { text-shadow: 0 0 4px var(--ink), 0 0 10px var(--ink), 0 1px 2px var(--ink); }
.article-hero .tag-section,
.article-hero .kicker { color: color-mix(in oklab, var(--accent) 58%, var(--bone)); }

.article-body { display: grid; gap: 0; padding-block: clamp(2.5rem, 6vw, 4.5rem); }

/* ancla temporal pegajosa */
.anchor-rail {
  position: sticky; top: 68px; z-index: 300;
  background: var(--glass);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.anchor-rail__inner {
  display: flex; align-items: center; gap: .9rem;
  padding-block: .7rem;
  font-family: var(--font-mono); font-size: .62rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--bone-dim);
}
.anchor-rail__scale { flex: 1; height: 1px; background: var(--line); position: relative; }
.anchor-rail__dot {
  position: absolute; top: 50%; translate: -50% -50%;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}
@media (max-width: 700px) { .anchor-rail__scale { display: none; } }

/* ==========================================================================
   16. BLOQUES DE CONTENIDO
   ========================================================================== */
.blocks { display: grid; gap: clamp(1.6rem, 2.8vw, 2.4rem); }
.blocks > * { max-width: var(--read); margin-inline: auto; width: 100%; }

.b-p {
  font-size: 1.145rem;
  line-height: 1.72;
  color: color-mix(in oklab, var(--bone) 92%, transparent);
  text-wrap: pretty;
}
.b-p a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.b-p strong { font-weight: 600; color: var(--bone); }
.b-p mark { background: color-mix(in oklab, var(--accent) 22%, transparent); color: var(--bone); padding: .05em .25em; }
.b-p code { font-family: var(--font-mono); font-size: .86em; background: var(--ink-3); padding: .1em .4em; border-radius: 3px; }
.b-p--lead { font-size: 1.3rem; line-height: 1.55; color: var(--bone); font-weight: 300; }
.b-p--dropcap::first-letter {
  float: left;
  font-family: var(--font-display);
  font-size: 4.1em;
  line-height: .78;
  padding: .06em .12em 0 0;
  color: var(--accent);
  font-weight: 400;
}

.b-h { display: grid; gap: .45rem; margin-top: clamp(1.5rem, 3vw, 2.6rem); }
.b-h h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 400; }
.b-h h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 400; }

.b-list { display: grid; gap: .7rem; padding-left: 0; list-style: none; counter-reset: li; }
.b-list li { position: relative; padding-left: 2rem; font-size: 1.06rem; line-height: 1.6; color: color-mix(in oklab, var(--bone) 88%, transparent); }
.b-list--bullet li::before {
  content: ""; position: absolute; left: .35rem; top: .62em;
  width: 6px; height: 6px; border: 1px solid var(--accent); rotate: 45deg;
}
.b-list--number { counter-reset: li; }
.b-list--number li::before {
  counter-increment: li; content: counter(li, decimal-leading-zero);
  position: absolute; left: 0; top: .12em;
  font-family: var(--font-mono); font-size: .72rem; color: var(--accent);
}

/* imagen */
.b-img figure { display: grid; gap: .7rem; }
.b-img img { width: 100%; border: 1px solid var(--line); background: var(--ink-3); }
.b-img figcaption, .b-cap {
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .06em;
  color: var(--bone-mute); line-height: 1.5; text-transform: none;
}
.b-img--wide { max-width: min(1000px, 92vw) !important; }
.b-img--full { max-width: 100% !important; }
.b-img--full img { border-inline: 0; }

/* galería */
.b-gallery { max-width: min(1100px, 94vw) !important; }
.b-gallery__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: .6rem; }
.b-gallery figure { display: grid; gap: .5rem; }
.b-gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border: 1px solid var(--line); }

/* cita */
.b-quote { margin-block: clamp(1rem, 2vw, 2rem); }
.b-quote { text-align: center; margin-block: clamp(1.6rem, 3.5vw, 2.8rem); }
.b-quote blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 2.25rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.18;
  letter-spacing: -0.02em;
  position: relative;
  text-wrap: balance;
}
.b-quote blockquote::before {
  content: "\201C";
  display: block;
  font-size: 2.6em; line-height: .55;
  color: color-mix(in oklab, var(--accent) 55%, transparent);
  margin-bottom: .1em;
}
.b-quote cite { display: block; margin-top: 1.2rem; font-style: normal; justify-content: center; }

/* voz del ancestro — la pieza marca de la casa */
.b-ancestor { max-width: min(880px, 94vw) !important; margin-block: clamp(1.5rem, 3vw, 2.5rem); }
.b-ancestor__card {
  position: relative;
  padding-left: clamp(1.1rem, 2.5vw, 1.8rem);
  border-left: 2px solid var(--accent);
  display: grid;
  gap: 1rem;
}
.b-ancestor__head { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
/* Los sellos van con white-space: nowrap, y la ficha del ancestro es una
   rejilla: una rejilla nunca encoge por debajo de su contenido más ancho, así
   que en pantallas estrechas ese sello estiraba el bloque entero y sacaba el
   artículo de la pantalla. Aquí sí puede partirse. */
.b-ancestor__card, .b-ancestor__card > * { min-width: 0; }
.b-ancestor__head .stamp { white-space: normal; }
.b-ancestor__avatar {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in oklab, var(--accent) 14%, transparent);
  flex: none; overflow: hidden;
}
.b-ancestor__avatar img { width: 100%; height: 100%; object-fit: cover; }
.b-ancestor__avatar .glyph { width: 18px; height: 18px; color: var(--accent); }
.b-ancestor__id { display: grid; gap: .15rem; }
.b-ancestor__species { font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: var(--bone); }
.b-ancestor__text {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  line-height: 1.25;
  font-weight: 300;
  text-wrap: pretty;
}
.b-ancestor__text::before { content: "“"; color: var(--accent); }
.b-ancestor__text::after { content: "”"; color: var(--accent); }

/* entonces / ahora */
.b-thennow { max-width: min(1000px, 94vw) !important; margin-block: clamp(1.5rem, 3vw, 2.5rem); }
.b-thennow__grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(1rem, 2.5vw, 2rem); align-items: stretch; }
@media (max-width: 780px) { .b-thennow__grid { grid-template-columns: 1fr; } }
.b-thennow__side { display: grid; gap: .8rem; align-content: start; }
.b-thennow__side h3 { font-family: var(--font-display); font-size: 1.35rem; font-weight: 400; }
.b-thennow__side p { font-size: .96rem; color: var(--bone-dim); line-height: 1.55; }
.b-thennow__side img { aspect-ratio: 16/10; object-fit: cover; width: 100%; border: 1px solid var(--line); }
.b-thennow__grid { border-block: 1px solid var(--line); padding-block: clamp(1.4rem, 3vw, 2rem); }
.b-thennow__then .kicker { color: var(--ochre); }
.b-thennow__now .kicker { color: var(--sky); }
.b-thennow__vs {
  display: grid; place-items: center; gap: .6rem;
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .2em;
  color: var(--bone-mute); text-transform: uppercase;
}
.b-thennow__vs { align-self: stretch; }
.b-thennow__vs .bar { width: 1px; flex: 1; background: var(--line); min-height: 30px; }
@media (max-width: 780px) { .b-thennow__vs { flex-direction: row; } .b-thennow__vs .bar { display: none; } }

/* dato */
.b-fact { max-width: min(880px, 94vw) !important; }
.b-fact__card {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(1.2rem, 3vw, 2.4rem); align-items: center;
  padding-block: clamp(1.4rem, 3vw, 2rem);
  border-block: 1px solid var(--line);
}
@media (max-width: 620px) { .b-fact__card { grid-template-columns: 1fr; } }
.b-fact__value {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: .9; font-weight: 300; color: var(--accent);
  letter-spacing: -0.03em; white-space: nowrap;
}
.b-fact__text { font-size: 1rem; line-height: 1.55; color: var(--bone-dim); }
.b-fact__label { margin-bottom: .4rem; }

/* mini línea de tiempo */
.b-timeline { max-width: min(880px, 94vw) !important; }
.b-timeline__list { display: grid; gap: 0; border-left: 1px solid var(--line); padding-left: 1.6rem; }
.b-timeline__item { position: relative; padding-block: 1rem; border-bottom: 1px solid var(--line-soft); }
.b-timeline__item:last-child { border-bottom: 0; }
.b-timeline__item::before {
  content: ""; position: absolute; left: calc(-1.6rem - 4px); top: 1.55rem;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}
.b-timeline__when { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.b-timeline__item h3 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 400; margin-top: .3rem; }
.b-timeline__item p { font-size: .93rem; color: var(--bone-mute); margin-top: .3rem; line-height: 1.5; }

/* vídeo / audio / enlace */
.b-video { max-width: min(1000px, 94vw) !important; }
.b-video__frame { position: relative; aspect-ratio: 16/9; background: var(--ink-3); border: 1px solid var(--line); overflow: hidden; }
.b-video__frame iframe, .b-video__frame video { width: 100%; height: 100%; border: 0; display: block; }

.b-audio__card {
  display: flex; align-items: center; gap: 1.2rem;
  padding: 1.1rem 0; border-block: 1px solid var(--line);
}
.b-audio__cover { width: 74px; height: 74px; flex: none; object-fit: cover; border: 1px solid var(--line); background: var(--ink-3); display: grid; place-items: center; }
.b-audio__cover .glyph { width: 26px; height: 26px; color: var(--accent); }
.b-audio__body { flex: 1; display: grid; gap: .5rem; min-width: 0; }
.b-audio__body h3 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 400; }
.b-audio audio { width: 100%; height: 34px; }

.b-link__card {
  display: flex; gap: 1.2rem; align-items: center;
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--line);
  background: var(--ink-2);
  transition: border-color 240ms ease, transform 240ms var(--ease-out), background-color 240ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .b-link__card:hover { border-color: var(--accent); transform: translateY(-2px); background: var(--ink-3); }
}
.b-link__thumb { width: 84px; height: 64px; object-fit: cover; flex: none; border: 1px solid var(--line); }
.b-link__body { display: grid; gap: .3rem; min-width: 0; }
.b-link__body h3 { font-family: var(--font-display); font-size: 1.08rem; font-weight: 400; }
.b-link__body p { font-size: .88rem; color: var(--bone-mute); line-height: 1.45; }
.b-link__src { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }

/* separador */
.b-divider { display: grid; place-items: center; padding-block: clamp(1rem, 3vw, 2.4rem); }
.b-divider__line { width: 100%; height: 1px; background: var(--line); }
.b-divider__glyph { display: flex; align-items: center; gap: 1rem; color: var(--bone-mute); width: 100%; }
.b-divider__glyph::before, .b-divider__glyph::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.b-divider__glyph .glyph { width: 20px; height: 20px; color: var(--accent); }
.b-divider__stars { font-family: var(--font-mono); letter-spacing: 1em; color: var(--bone-mute); font-size: .8rem; }

.b-embed iframe, .b-embed > * { max-width: 100%; }

/* ==========================================================================
   17. FIN DE ARTÍCULO
   ========================================================================== */
.verdict-panel {
  margin-top: clamp(3rem, 7vw, 5rem);
  padding-top: clamp(1.6rem, 3.5vw, 2.4rem);
  border-top: 2px solid var(--accent);
  display: grid; gap: 1rem;
}
.verdict-panel h3 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); font-weight: 300; font-style: italic; }
.verdict-panel h3 em { color: var(--accent); font-style: italic; }

.share-row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }

/* ==========================================================================
   18. UTILIDADES / ANIMACIÓN DE ENTRADA
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--ember); color: #fff; padding: .8rem 1.2rem;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }

.empty-state {
  border: 1px dashed var(--line);
  padding: clamp(2rem, 6vw, 4rem);
  text-align: center;
  display: grid; gap: 1rem; justify-items: center;
  color: var(--bone-mute);
}
.empty-state .glyph { width: 34px; height: 34px; color: var(--bone-mute); }

.pill-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.pill {
  padding: .38em .85em;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: .62rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--bone-dim);
  transition: color 200ms ease, border-color 200ms ease, transform 160ms var(--ease-out);
}
.pill:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .pill:hover { color: var(--accent); border-color: var(--accent); } }
.pill[aria-current="true"], .pill.is-on { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }

.page-head { padding-block: clamp(4rem, 10vw, 7rem) clamp(2rem, 4vw, 3rem); display: grid; gap: 1.1rem; }
.page-head h1 { font-size: clamp(2.6rem, 8vw, 5.5rem); font-weight: 300; }
.page-head h1 em { font-style: italic; color: var(--accent); }

/* ----------------------------------------------------------- ajustes finos */
.chrono--sticky { position: sticky; top: 68px; z-index: 400; }
.handprints > span { position: absolute; display: block; }
.handprints .glyph { width: 90px; height: 90px; color: var(--ochre); }
.hero__stars circle { will-change: opacity; }
.lead-story { color: inherit; }

/* ==========================================================================
   19. LÍNEA DEL TIEMPO vertical
   ========================================================================== */
.tl { position: relative; display: grid; gap: 0; }
.tl::before {
  content: "";
  position: absolute;
  left: 8px; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--line) 4%, var(--line) 96%, transparent);
}
@media (min-width: 900px) { .tl::before { left: 210px; } }

.tl__stop {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: clamp(2rem, 5vw, 3.6rem) 0 clamp(2rem, 5vw, 3.6rem) 2.6rem;
  border-bottom: 1px solid var(--line-soft);
}
@media (min-width: 900px) {
  .tl__stop { grid-template-columns: 210px 1fr; gap: clamp(2rem, 5vw, 4rem); padding-left: 0; }
}
.tl__stop:last-child { border-bottom: 0; }

.tl__marker {
  position: absolute;
  left: 4px; top: clamp(2.4rem, 5.4vw, 4rem);
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--bone-mute);
  border: 2px solid var(--ink);
  box-shadow: 0 0 0 3px var(--ink);
}
.tl__marker[data-lit="1"] { background: var(--ember); box-shadow: 0 0 0 3px var(--ink), 0 0 14px var(--ember); }
@media (min-width: 900px) { .tl__marker { left: 206px; } }

.tl__when { display: grid; gap: .1rem; align-content: start; }
@media (min-width: 900px) { .tl__when { text-align: right; padding-right: 2.2rem; } }
.tl__years { font-family: var(--font-mono); font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 300; color: var(--bone); letter-spacing: -.02em; }
.tl__unit, .tl__era { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--bone-mute); }
.tl__era { margin-top: .5rem; color: var(--ochre); opacity: .8; }

.tl__body { display: grid; gap: .9rem; align-content: start; }
.tl__body h2 { font-size: clamp(1.5rem, 3.4vw, 2.4rem); font-weight: 400; }
.tl__body .lede { max-width: 56ch; }

.tl__posts { display: grid; gap: .7rem; margin-top: .8rem; }
.tl__post {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 1.1rem;
  align-items: center;
  padding: .8rem;
  border: 1px solid var(--line);
  background: var(--ink-2);
  transition: border-color 240ms ease, transform 240ms var(--ease-out), background-color 240ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .tl__post:hover { border-color: var(--accent); background: var(--ink-3); transform: translateX(4px); }
}
.tl__post-media { position: relative; width: 92px; height: 70px; overflow: hidden; background: var(--ink-3); display: block; }
.tl__post-media img { width: 100%; height: 100%; object-fit: cover; }
.tl__post-body { display: grid; gap: .3rem; min-width: 0; }
.tl__post-body strong { font-family: var(--font-display); font-size: 1.12rem; font-weight: 400; line-height: 1.15; }
.tl__post-body em { font-style: italic; font-size: .88rem; color: var(--bone-mute); }

/* ----------------------------------------------------------- retoques QA */
@media (max-width: 620px) {
  .hero__scroll .kicker { display: none; }
  .hero__scroll { bottom: 1rem; }
}
.article-hero > .wrap { width: 100%; }
.anchor-rail .glyph { width: 14px; height: 14px; }

/* el ancla temporal se compacta en pantallas pequeñas */
@media (max-width: 560px) {
  .anchor-rail__inner { gap: .55rem; font-size: .56rem; letter-spacing: .12em; }
  .anchor-rail__inner .rail-label { display: none; }
}

/* ==========================================================================
   20. ENTRADA DEL ARTÍCULO — «el comportamiento» sin caja
   ========================================================================== */
.behaviour {
  max-width: var(--read);
  margin-inline: auto;
  width: 100%;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  padding-left: clamp(1.1rem, 2.5vw, 1.8rem);
  border-left: 2px solid var(--accent);
  display: grid;
  gap: .5rem;
}
.behaviour p {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 300;
  line-height: 1.3;
  color: var(--bone);
  text-wrap: pretty;
}
.b-ancestor__head { gap: .7rem 1rem; }
.b-ancestor__when { margin-left: auto; }
@media (max-width: 620px) { .b-ancestor__when { margin-left: 0; width: 100%; } }

/* ==========================================================================
   21. EL RESPALDO — referencias verificadas
   ========================================================================== */
.respaldo {
  max-width: var(--read);
  margin-inline: auto;
  width: 100%;
  margin-top: clamp(3rem, 7vw, 4.5rem);
  padding-top: clamp(1.6rem, 3.5vw, 2.2rem);
  border-top: 1px solid var(--line);
}
.respaldo__head { display: grid; gap: .4rem; margin-bottom: 1.6rem; }
.respaldo__head h2 { font-size: clamp(1.4rem, 2.8vw, 1.9rem); font-weight: 400; }

.respaldo__lista { list-style: none; padding: 0; display: grid; gap: 0; }
.fuente {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: .3rem 0;
  padding-block: 1.15rem;
  border-bottom: 1px solid var(--line-soft);
}
.fuente:last-child { border-bottom: 0; }
.fuente__n {
  font-family: var(--font-mono); font-size: .68rem;
  color: var(--accent); padding-top: .3rem;
}
.fuente__cuerpo { display: grid; gap: .35rem; min-width: 0; }
.fuente__titulo { font-size: 1.02rem; font-weight: 400; line-height: 1.3; letter-spacing: 0; }
.fuente__titulo a {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size 260ms var(--ease-out), color 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .fuente__titulo a:hover { background-size: 100% 1px; color: var(--accent); }
}
.fuente__ficha {
  font-family: var(--font-mono); font-size: .64rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--bone-mute);
  display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: center;
}
.fuente__citas {
  border: 1px solid var(--line); border-radius: 100px;
  padding: .12em .5em; color: var(--bone-dim); text-transform: none; letter-spacing: .06em;
}
.fuente__nota { font-size: .95rem; line-height: 1.55; color: var(--bone-dim); }

.respaldo__pie {
  display: flex; gap: .6rem; align-items: flex-start;
  margin-top: 1.6rem; padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: .78rem; line-height: 1.55; color: var(--bone-mute);
}
.respaldo__pie .glyph { width: 15px; height: 15px; flex: none; margin-top: .15rem; color: var(--accent); }
.respaldo__pie strong { color: var(--bone-dim); font-weight: 500; }

/* retrato del ancestro: cuando hay foto real, gana presencia */
.b-ancestor__avatar:has(img) { width: 52px; height: 52px; border: 1px solid color-mix(in oklab, var(--accent) 40%, transparent); }
.b-ancestor__avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ----------------------------------------------------------- páginas legales */
.legal .legal__h {
  font-size: clamp(1.2rem, 2.2vw, 1.5rem); font-weight: 400;
  margin-top: clamp(1.8rem, 3.5vw, 2.6rem);
  max-width: var(--read); margin-inline: auto; width: 100%;
}
.legal .b-p { font-size: 1.03rem; }
.legal mark.pendiente {
  background: color-mix(in oklab, var(--ochre) 25%, transparent);
  color: var(--bone); padding: .05em .35em; border-radius: 3px;
  font-family: var(--font-mono); font-size: .82em;
}

/* ----------------------------------------------------------- portada con foto */
.hero__photo { position: absolute; inset: 0; z-index: -3; overflow: hidden; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.hero__photo::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--ink) 78%, transparent) 0%,
                            color-mix(in oklab, var(--ink) 30%, transparent) 34%,
                            color-mix(in oklab, var(--ink) 72%, transparent) 78%,
                            var(--ink) 100%),
    radial-gradient(70% 55% at 50% 48%, transparent 0%, color-mix(in oklab, var(--ink) 55%, transparent) 100%);
}
.hero--foto h1 { text-shadow: 0 2px 40px color-mix(in oklab, var(--ink) 75%, transparent); }
.hero__cap { position: absolute; left: 0; right: 0; bottom: 4.6rem; text-align: center; }
@media (max-width: 620px) { .hero__cap { display: none; } }

/* ----------------------------------------------------------- paginación */
.paginacion {
  display: flex; gap: .4rem; align-items: center; justify-content: center;
  flex-wrap: wrap; margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 2rem; border-top: 1px solid var(--line);
}
.paginacion__n, .paginacion__salto {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em;
  padding: .5em .8em; border: 1px solid var(--line); border-radius: 100px;
  color: var(--bone-dim);
  transition: color 200ms ease, border-color 200ms ease, background-color 200ms ease;
}
@media (hover: hover) { .paginacion__n:hover, .paginacion__salto:hover { color: var(--accent); border-color: var(--accent); } }
.paginacion__n.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.paginacion__gap { color: var(--bone-mute); padding: 0 .2rem; }

/* ----------------------------------------------------------- manifiesto con foto */
.manifesto--foto { isolation: isolate; }
.manifesto__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.manifesto__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) brightness(.66); }
/* Aquí la cita va en mitad de la foto, así que el viñeteado se queda: es el
   único sitio donde el texto no puede apoyarse en un borde. */
.manifesto__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(80% 90% at 50% 50%, transparent 0%, color-mix(in oklab, var(--ink) 74%, transparent) 100%),
    linear-gradient(180deg, var(--ink) 0%, transparent 22%, transparent 78%, var(--ink) 100%);
}
.manifesto--foto blockquote { text-shadow: 0 1px 4px color-mix(in oklab, var(--ink) 70%, transparent), 0 2px 40px var(--ink); }
.manifesto--foto .handprints { opacity: .04; }

/* ----------------------------------------------------------- miniaturas en la línea */
.epoch__thumb {
  width: 34px; height: 34px; border-radius: 4px; overflow: hidden; flex: none;
  background: var(--ink-3);
}
.epoch__thumb img { width: 100%; height: 100%; object-fit: cover; }
.epoch__post { align-items: center; }

/* ----------------------------------------------------------- retrato del ancestro, mayor */
.b-ancestor__avatar { width: 46px; height: 46px; }
.b-ancestor__avatar:has(img) {
  width: 92px; height: 92px;
  border: 1px solid color-mix(in oklab, var(--accent) 45%, transparent);
  box-shadow: 0 8px 30px color-mix(in oklab, var(--velo) 40%, transparent);
}
.b-ancestor__avatar .glyph { width: 24px; height: 24px; }
@media (max-width: 620px) {
  .b-ancestor__avatar:has(img) { width: 68px; height: 68px; }
}

/* ----------------------------------------------------------- buscador de cabecera */
.buscador { display: flex; align-items: center; gap: .3rem; }
.buscador__campo {
  width: 0; padding: 0; opacity: 0;
  border: 1px solid var(--line); border-radius: 100px;
  background: var(--ink-2); color: var(--bone);
  font-family: var(--font-mono); font-size: .74rem;
  transition: width 300ms var(--ease-out), opacity 200ms ease, padding 300ms var(--ease-out);
}
.buscador[data-abierto="1"] .buscador__campo { width: min(230px, 42vw); padding: .5rem .9rem; opacity: 1; }
.buscador__campo:focus { outline: none; border-color: var(--accent); }
@media (max-width: 860px) { .buscador[data-abierto="1"] .buscador__campo { width: 150px; } }

/* ----------------------------------------------------------- filtros del archivo */
.filtros { display: grid; gap: .7rem; padding: 1.2rem 0; border-block: 1px solid var(--line); }
.filtros__fila { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.filtros__et {
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--bone-mute); min-width: 4.5rem;
}

/* ----------------------------------------------------------- anterior / siguiente */
.vecinos { border-top: 1px solid var(--line); background: var(--ink-2); }
/* Nada de fondo aquí: el contenedor tiene 56px de padding a cada lado y ese
   fondo asomaba por ellos como dos franjas grises. La línea que separa las dos
   tarjetas la dibuja ahora la propia tarjeta de la derecha. */
.vecinos__inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
}
.vecinos__inner--solo { grid-template-columns: 1fr; }
.vecino--siguiente { border-left: 1px solid var(--line); }
.vecinos__inner--solo .vecino--siguiente { border-left: 0; }
@media (max-width: 700px) {
  .vecinos__inner { grid-template-columns: 1fr; }
  .vecino--siguiente { border-left: 0; border-top: 1px solid var(--line); }
}
.vecino {
  display: grid; gap: .35rem; align-content: center;
  padding: clamp(1.5rem, 3.5vw, 2.4rem) clamp(1.25rem, 4vw, 3rem);
  background: var(--ink-2); min-height: 120px;
  transition: background-color 260ms ease;
}
.vecino--siguiente { text-align: right; }
@media (hover: hover) and (pointer: fine) {
  .vecino:hover { background: var(--ink-3); }
  .vecino:hover .vecino__tit { color: var(--accent); }
}
.vecino__et {
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--bone-mute);
  display: flex; align-items: center; gap: .5rem;
}
.vecino--siguiente .vecino__et { justify-content: flex-end; }
/* La flecha se separa un poco al pasar por encima: sugiere hacia dónde lleva */
.vecino__flecha {
  color: var(--accent); font-size: .8rem; line-height: 1;
  transition: transform 260ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .vecino--anterior:hover .vecino__flecha { transform: translateX(-4px); }
  .vecino--siguiente:hover .vecino__flecha { transform: translateX(4px); }
}
.vecino__tit {
  font-family: var(--font-display); font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: 400; line-height: 1.15; transition: color 220ms ease;
}
.vecino__sec {
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent);
}

/* ==========================================================================
   22. COLOFÓN — cómo se ha hecho el artículo y cómo hay que leerlo
   Va al final y en voz baja: es letra pequeña honrada, no una advertencia.
   ========================================================================== */
.colofon {
  max-width: var(--read);
  margin-inline: auto;
  width: 100%;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: clamp(1.4rem, 3vw, 2rem);
  border-top: 1px solid var(--line);
}
.colofon__tit {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--bone-mute);
  margin-bottom: 1.3rem;
}
.colofon__lista {
  display: grid;
  gap: 0;
  margin: 0;
}
.colofon__item {
  display: grid;
  grid-template-columns: minmax(0, 13rem) 1fr;
  gap: .3rem 1.6rem;
  padding-block: .95rem;
  border-bottom: 1px solid var(--line-soft);
}
.colofon__item:last-child { border-bottom: 0; }
.colofon__item dt {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--bone-dim);
  display: flex;
  align-items: center;
  gap: .4rem;
  line-height: 1.5;
}
.colofon__item dt .glyph { width: 13px; height: 13px; flex: none; color: var(--accent); }
.colofon__item dd {
  margin: 0;
  font-size: .84rem;
  line-height: 1.6;
  color: var(--bone-mute);
}
.colofon__item--ia dt { color: var(--accent); }

@media (max-width: 620px) {
  .colofon__item { grid-template-columns: 1fr; gap: .35rem; }
}

/* ==========================================================================
   23. EDICIONES — el escaparate de piezas digitales
   ========================================================================== */
.ediciones {
  display: grid; gap: clamp(1rem, 2.5vw, 1.6rem);
  padding-bottom: 1.5rem;
}
.edicion {
  display: grid; grid-template-columns: minmax(0, 340px) 1fr;
  gap: clamp(1.2rem, 3vw, 2.2rem);
  align-items: center;
  border: 1px solid var(--line); border-radius: 4px;
  padding: clamp(1rem, 2.5vw, 1.6rem);
  transition: border-color 220ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .edicion:hover { border-color: color-mix(in oklab, var(--accent) 45%, var(--line)); }
}
/* La lámina de verdad, en pequeño. Va en un iframe porque el cartel se compone
   entero en cqw: no hay nada que escalar, encoge solo. No se puede pulsar —el
   enlace es el de la ficha— ni recibe foco. */
.edicion__lam {
  position: relative; aspect-ratio: 1 / 1.4142;
  overflow: hidden; border-radius: 3px;
  background: var(--ink-3);
  box-shadow: 0 10px 30px color-mix(in oklab, #000 32%, transparent);
  pointer-events: none;
}
.edicion__lam iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.edicion__img { overflow: hidden; border-radius: 3px; }
.edicion__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.edicion__cuerpo { display: grid; gap: .55rem; }
.edicion__cuerpo h2 { font-size: clamp(1.3rem, 3vw, 1.85rem); font-weight: 400; line-height: 1.2; margin: 0; }
.edicion__cuerpo p { font-size: .95rem; line-height: 1.65; color: var(--bone-dim); margin: 0; }
.edicion__pie { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: .5rem; }
.edicion__precio {
  font-family: var(--font-mono); font-size: .82rem;
  letter-spacing: .08em; color: var(--accent);
}
/* En modo gratuito el hueco del precio no se deja vacío: se dice que es gratis,
   que es justo lo que hay que leer antes de pulsar el botón. */
.edicion__precio--libre {
  text-transform: uppercase; letter-spacing: .18em; font-size: .66rem;
  border: 1px solid color-mix(in oklab, var(--accent) 45%, transparent);
  border-radius: 100px; padding: .4em .85em;
}
/* Dónde escuchar: el episodio a un lado, el programa al otro. */
.b-audio__donde {
  display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1rem;
  margin-top: .9rem; padding-top: .9rem;
  border-top: 1px solid var(--line-soft);
}
.b-audio__sigue {
  font-size: .76rem; color: var(--bone-mute); line-height: 1.5;
}
.b-audio__sigue a { color: var(--bone-dim); text-decoration: underline; text-underline-offset: 2px; }
@media (hover: hover) { .b-audio__sigue a:hover { color: var(--accent); } }

.ediciones__nota {
  display: flex; gap: .6rem; align-items: flex-start;
  max-width: var(--read); margin: 2rem auto 0; padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  font-size: .76rem; line-height: 1.55; color: var(--bone-mute);
}
.ediciones__nota .glyph { width: 15px; height: 15px; flex: none; margin-top: .15rem; color: var(--accent); }

@media (max-width: 700px) {
  .edicion { grid-template-columns: 1fr; }
  .edicion__img img { aspect-ratio: 16 / 10; }
}

/* ==========================================================================
   24. ESTRATIGRAFÍA — el corte del lector
   Primero se pregunta, una conducta cada vez, y luego se dibuja la columna.
   ========================================================================== */
.estrat { max-width: 900px; margin-inline: auto; padding-bottom: clamp(3rem, 8vw, 6rem); }

/* ------------------------------------------------------------- preguntas */
.ex {
  display: grid; gap: clamp(1.2rem, 3vw, 1.8rem); justify-items: start;
  max-width: var(--read); margin-inline: auto;
  padding: clamp(1.6rem, 4vw, 2.6rem) 0;
}
.ex__progreso { display: flex; gap: 4px; width: 100%; }
.ex__progreso span {
  flex: 1; height: 2px; background: var(--line);
  transition: background 300ms ease;
}
.ex__progreso .is-hecha { background: color-mix(in oklab, var(--sec, var(--accent)) 70%, transparent); }
.ex__progreso .is-ahora { background: var(--sec, var(--accent)); }
.ex__cuenta {
  font-family: var(--font-mono); font-size: .58rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--bone-mute); margin: 0;
}
.ex__conducta {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.4rem, 4vw, 2.3rem); line-height: 1.2;
  margin: 0; text-wrap: balance;
}
.ex__botones { display: flex; flex-wrap: wrap; gap: .6rem; }
.ex__nota { font-size: .72rem; color: var(--bone-mute); margin: 0; }

/* --------------------------------------------------------------- el corte */
.corte { display: grid; gap: clamp(1.8rem, 4vw, 2.8rem); }
.corte__cab { display: grid; gap: .6rem; max-width: var(--read); }
.corte__cab h2 {
  font-size: clamp(1.5rem, 4vw, 2.4rem); font-weight: 400; line-height: 1.15;
  margin: 0; text-wrap: balance;
}
.corte__cab h2 b { color: var(--accent); font-weight: 400; }
.corte__cab p { font-size: .95rem; line-height: 1.65; color: var(--bone-dim); margin: 0; }
.corte__cab p b { color: var(--bone); font-weight: 500; }

.col {
  display: grid; grid-template-columns: 6.2rem 1fr;
  gap: 0;
  position: relative;
  min-height: clamp(420px, 62vw, 640px);
}
.col__eje { position: relative; }
.col__eje span {
  position: absolute; right: 0; transform: translateY(-50%);
  padding-right: 1.1rem;
  font-family: var(--font-mono); font-size: .55rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--bone-mute);
  white-space: nowrap;
}
/* una marquita que lleva el rótulo hasta la línea del corte */
.col__eje span::after {
  content: ''; position: absolute; right: 0; top: 50%;
  width: .7rem; height: 0; border-top: 1px solid var(--line);
}
.col__terreno {
  position: relative;
  border-left: 1px solid var(--line);
}

.col__punto {
  position: absolute; left: -5px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--sec, var(--accent));
  transform: translateY(-50%);
  opacity: 0; transition: opacity 400ms ease;
}
.is-puesto .col__punto { opacity: 1; }
.col__punto--fantasma { background: var(--line-soft); }
.is-puesto .col__punto--fantasma { opacity: .5; }

.col__capa {
  position: absolute; left: 2.6rem; right: 0;
  display: grid; gap: .1rem; min-width: 0;
  opacity: 0; transform: translateY(-8px);
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
  transition-delay: var(--d);
}
.is-puesto .col__capa { opacity: 1; transform: none; }

/* La ficha desplazada se une a su punto con una L de guiones, siempre por el
   pasillo de la izquierda: nunca cruza el texto de ninguna otra capa. */
.col__capa::before,
.col__capa::after { content: ''; position: absolute; opacity: .5; }
.col__capa::after {                       /* el tramo horizontal, en el punto */
  left: -2.6rem; width: 1.5rem; height: 0;
  border-top: 1px dashed var(--sec, var(--accent));
  top: calc(.45rem - var(--desvio, 0px));
}
.col__capa::before {                      /* el tramo vertical, si hubo desvío */
  left: -1.1rem; width: 0;
  border-left: 1px dashed var(--sec, var(--accent));
  top: calc(.45rem - var(--desvio, 0px));
  height: var(--desvio, 0px);
}
.col__capa:not(.is-desviada)::before { display: none; }
/* sin desvío, el tramo horizontal se acorta: es solo un guión de enganche */
.col__capa:not(.is-desviada)::after { left: -1.9rem; width: .8rem; }

.col__anios {
  font-family: var(--font-mono); font-size: .57rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--sec, var(--accent));
  line-height: 1.5;
}
.col__tit { font-size: 1rem; line-height: 1.28; color: var(--bone); }
.col__tit:hover { color: var(--accent); }

/* las que no son tuyas siguen ahí, pero apagadas */
.col__capa--fantasma { opacity: 0; }
.is-puesto .col__capa--fantasma { opacity: .34; }
.col__capa--fantasma::before,
.col__capa--fantasma::after { border-color: var(--bone-mute); }
.col__capa--fantasma .col__anios { color: var(--bone-mute); }
.col__tit--no { color: var(--bone-mute); font-size: .92rem; }

.corte__pie {
  display: grid; gap: 1.2rem; justify-items: start;
  max-width: var(--read);
  padding-top: 1.4rem; border-top: 1px solid var(--line);
}
.corte__pie p { font-size: .82rem; line-height: 1.65; color: var(--bone-mute); margin: 0; }

.btn--grande { padding: .75rem 1.5rem; font-size: .72rem; }

@media (max-width: 620px) {
  /* En el móvil el eje sobra: no cabe sin recortarse y cada ficha ya lleva
     su edad escrita. La columna se queda con todo el ancho. */
  .col { grid-template-columns: 1fr; }
  .col__eje { display: none; }
  .col__terreno { margin-left: .35rem; }
  .col__capa { left: 2.1rem; }
  .col__capa::after { left: -2.1rem; width: 1.1rem; }
  .col__capa:not(.is-desviada)::after { left: -1.6rem; width: .7rem; }
  .col__capa::before { left: -1rem; }
}

/* ==========================================================================
   25. BOLETÍN — el formulario de alta
   ========================================================================== */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.bolform {
  display: grid; gap: .9rem;
  padding: clamp(1.1rem, 3vw, 1.6rem) 0;
  border-top: 1px solid var(--line);
  margin-top: 1.4rem;
}
.bolform__tit {
  font-family: var(--font-mono); font-size: .62rem; font-weight: 400;
  letter-spacing: .18em; text-transform: uppercase; color: var(--accent);
  margin: 0 0 .35rem;
}
.bolform__sub { font-size: .82rem; line-height: 1.6; color: var(--bone-mute); margin: 0; max-width: 60ch; }

.bolform__campos { display: flex; flex-wrap: wrap; gap: .5rem; position: relative; }
.bolform__campo {
  flex: 1 1 15rem; min-width: 0;
  background: transparent; color: var(--bone);
  border: 1px solid var(--line); border-radius: 100px;
  padding: .7rem 1.1rem;
  font-family: var(--font-mono); font-size: .78rem;
  transition: border-color 180ms ease;
}
.bolform__campo::placeholder { color: var(--bone-mute); }
.bolform__campo:focus { outline: none; border-color: var(--accent); }
.bolform__btn {
  flex: none; cursor: pointer;
  background: var(--accent); color: var(--accent-ink);
  border: 1px solid var(--accent); border-radius: 100px;
  padding: .7rem 1.5rem;
  font-family: var(--font-mono); font-size: .64rem;
  letter-spacing: .14em; text-transform: uppercase;
  transition: filter 180ms ease, opacity 180ms ease;
}
.bolform__btn:hover { filter: brightness(1.12); }
.bolform__btn[disabled] { opacity: .5; cursor: progress; }
.bolform__aviso {
  margin: 0; font-size: .76rem; line-height: 1.5; color: var(--bone-mute);
  min-height: 1.2em;
}
.bolform__aviso[data-estado="ok"] { color: var(--accent); }
.bolform__aviso[data-estado="err"] { color: #C4462F; }

/* al final del artículo se le da presencia: ahí es donde alguien decide */
.bolform--grande {
  max-width: var(--read); margin-inline: auto; width: 100%;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding: clamp(1.6rem, 4vw, 2.4rem);
  border: 1px solid var(--line); border-top: 2px solid var(--accent);
  border-radius: 4px;
  background: color-mix(in oklab, var(--ink) 96%, var(--accent));
}
.bolform--grande .bolform__tit {
  font-family: var(--font-display); font-size: clamp(1.3rem, 3vw, 1.8rem);
  letter-spacing: -.01em; text-transform: none; color: var(--bone);
}
.bolform--grande .bolform__sub { font-size: .92rem; }

/* ==========================================================================
   26. DOSIER — las series y su tira dentro del artículo
   ========================================================================== */
.dosier { display: grid; gap: .8rem; max-width: 900px; margin-inline: auto; padding-bottom: clamp(3rem, 8vw, 6rem); }
.dosier__pieza {
  display: grid; grid-template-columns: 3rem 260px 1fr; gap: clamp(1rem, 2.5vw, 1.6rem);
  align-items: center; padding: clamp(.9rem, 2vw, 1.3rem);
  border: 1px solid var(--line); border-left: 2px solid var(--sec, var(--accent));
  border-radius: 4px; color: inherit;
  transition: border-color 200ms ease, background 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .dosier__pieza:hover { background: rgba(255,255,255,.02); border-color: var(--sec, var(--accent)); }
}
.dosier__n {
  font-family: var(--font-mono); font-size: .78rem; color: var(--sec, var(--accent));
  align-self: start; padding-top: .2rem;
}
.dosier__img { overflow: hidden; border-radius: 3px; }
.dosier__img img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.dosier__cuerpo { display: grid; gap: .3rem; min-width: 0; }
.dosier__cuerpo h2 { font-size: clamp(1.1rem, 2.4vw, 1.45rem); font-weight: 400; line-height: 1.25; margin: 0; }
.dosier__cuerpo p { font-size: .86rem; line-height: 1.55; color: var(--bone-mute); margin: 0; }
@media (max-width: 760px) {
  .dosier__pieza { grid-template-columns: 2.2rem 1fr; }
  .dosier__img { grid-column: 2; }
}

/* la tira dentro del artículo */
.tirada {
  max-width: var(--read); margin-inline: auto; width: 100%;
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  padding: clamp(1.3rem, 3vw, 1.9rem);
  border: 1px solid var(--line); border-radius: 4px;
}
.tirada__cab { display: grid; gap: .25rem; margin-bottom: 1rem; }
.tirada__cab h2 { font-size: 1.25rem; font-weight: 400; margin: 0; }
.tirada__cab h2 a { color: var(--bone); }
.tirada__cab h2 a:hover { color: var(--accent); }
.tirada__cab p {
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--bone-mute); margin: 0;
}
.tirada__pasos { list-style: none; padding: 0; margin: 0; display: grid; counter-reset: paso; }
.tirada__pasos li {
  display: flex; gap: .8rem; align-items: baseline;
  padding: .5rem 0; border-bottom: 1px solid var(--line-soft);
  font-size: .92rem; line-height: 1.4;
}
.tirada__pasos li:last-child { border-bottom: 0; }
.tirada__pasos li::before {
  counter-increment: paso; content: counter(paso, decimal-leading-zero);
  font-family: var(--font-mono); font-size: .58rem; color: var(--bone-mute); flex: none;
}
.tirada__pasos li a { color: var(--bone-dim); }
.tirada__pasos li a:hover { color: var(--accent); }
.tirada__pasos li.is-aqui { color: var(--accent); }
.tirada__pasos li.is-aqui::before { color: var(--accent); }
.tirada__sigue {
  display: inline-block; margin-top: 1rem;
  font-family: var(--font-mono); font-size: .6rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
}
.tirada__sigue:hover { text-decoration: underline; }

/* enlace a otro artículo de la casa dentro del texto */
.enlace-casa {
  color: inherit;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: color 200ms ease, background-size 220ms var(--ease-out);
}
.enlace-casa:hover { color: var(--accent); background-size: 100% 2px; }

/* ------------------------------------------------------ interruptor de tema
   Se enseña el icono del modo al que se va a cambiar: sol si estás a oscuras,
   luna si estás en papel. Es la convención que todo el mundo reconoce. */
.tema-btn__sol, .tema-btn__luna { transition: transform 320ms var(--ease-out), opacity 200ms ease; }
[data-theme="ember"] .tema-btn__luna { display: none; }
[data-theme="paper"] .tema-btn__sol { display: none; }
@media (hover: hover) and (pointer: fine) {
  .tema-btn:hover .tema-btn__sol { transform: rotate(35deg); }
  .tema-btn:hover .tema-btn__luna { transform: rotate(-18deg); }
}