/* EL LIBRO DE ELEINA · hoja única
   Tres piezas y de ahí sale todo: la portada, la plantilla de libro y la
   plantilla de sección. El criterio no es que sea bonito: es que quien
   llega con una pregunta la encuentre en un salto.

   LA PALETA ES LA DEL REGLAMENTO, DEL REVÉS.
   Los nombres de variable son los mismos que en `mesa.css` —bg, surface, fg,
   line, clay, gold, ultra, moss, wine— a propósito: eleina.info/umbral y el
   Libro son la misma paleta, uno claro y el otro oscuro, y quien abra las dos
   hojas de estilo tiene que ver el parentesco sin que nadie se lo cuente.

   No es una inversión aritmética. El fondo del reglamento es un hueso cálido
   ⟨#faf7ef, tono 43°⟩ y su negativo matemático sería un azul de medianoche; lo
   que se invierte es la claridad y se conserva el tono, así que el fondo del
   Libro es un pardo muy oscuro y no un negro frío. Y los acentos suben de
   claridad, porque el mismo bermellón que sobre papel contrasta 5,1 sobre este
   fondo contrastaría 3,1 y sería ilegible.

   Todos los pares de este bloque están comprobados contra WCAG AA:
   texto 14,9:1 · secundario 8,4 · etiquetas 5,0 · oro 8,5 · enlaces 7,7 ·
   vino 6,3 · teja 6,1. El original claro no llega en cuatro de ellos. */

:root{
  /* superficies — el hueso del reglamento, del revés */
  --bg:#14120d; --surface:#1c1a14; --surface-2:#232016; --surface-sunk:#0e0d09;
  --fg:#ece5d3; --fg-2:#b5ad98; --fg-3:#948d7a; --fg-4:#6d6757;
  --line:#2c2920; --line-2:#3a362a; --line-3:#504a3a;
  /* acentos — mismo tono que en claro, subida la claridad */
  --clay:#d9795c; --clay-hi:#e89376; --clay-lo:#b1492f; --clay-bg:#2a1811;
  --ultra:#93a4dd; --ultra-bg:#171b2b;
  --gold:#d1a860; --gold-2:#e3c48a; --gold-bg:#251d0f; --gold-line:rgba(209,168,96,.38);
  --moss:#96b581; --moss-bg:#161d13;
  --wine:#d47f78; --wine-bg:#2a1414;
  /* letra: la del reglamento en los títulos, una de texto propia en el cuerpo */
  --f-disp:"Cormorant Garamond",Georgia,serif;
  --f-texto:"Spectral",Georgia,"Times New Roman",serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sidebar:19rem;
  /* El fondo, elegido el 19 de septiembre: BRASA. Está aquí y no en un
     data-fondo porque ya no es una opción, es el fondo del Libro. */
  --fondo:
    radial-gradient(90% 55% at 50% 0%,   rgba(217,121,92,.09), rgba(0,0,0,0) 70%),
    radial-gradient(120% 75% at 50% 112%, rgba(138,47,47,.12), rgba(0,0,0,0) 66%),
    linear-gradient(#14120d 0%, #191310 46%, #14120d 100%);
  color-scheme:dark;
}

/* El claro no es un modo automático: es una salida para quien la necesite, y
   cuando se pide son exactamente los valores de `mesa.css`, sin retocar. */
:root[data-tema="claro"]{
  --bg:#faf7ef; --surface:#fffdf8; --surface-2:#f5f1e6; --surface-sunk:#ede8da;
  --fg:#1d1912; --fg-2:#5c5545; --fg-3:#8d8574; --fg-4:#b3ab99;
  --line:#e7e0cf; --line-2:#d8d0bb; --line-3:#c6bca3;
  --clay:#b1492f; --clay-hi:#c96545; --clay-lo:#8d3520; --clay-bg:#fbeee9;
  --ultra:#39497a; --ultra-bg:#eef0f7;
  --gold:#a67c3d; --gold-2:#c9a765; --gold-bg:#f8f1e0; --gold-line:rgba(166,124,61,.42);
  --moss:#4f6b41; --moss-bg:#eef2e9;
  --wine:#8a2f2f; --wine-bg:#f9ecea;
  /* El mismo gesto sobre papel: la brasa tiene que bajar a un tercio o el
     hueso se ensucia. Sin esto, el claro heredaba el degradado oscuro. */
  --fondo:
    radial-gradient(90% 55% at 50% 0%,   rgba(177,73,47,.05), rgba(0,0,0,0) 70%),
    radial-gradient(120% 75% at 50% 112%, rgba(138,47,47,.05), rgba(0,0,0,0) 66%),
    linear-gradient(#faf7ef 0%, #f7f1e5 46%, #faf7ef 100%);
  color-scheme:light;
}

/* ── EL FONDO, QUE NO ES PLANO ────────────────────────────────────
   La técnica es la de la portada de eleina.info: una capa fija con dos
   resplandores radiales anclados fuera del lienzo —arriba y abajo— sobre un
   lineal que templa el medio de la página. Alfas entre 0,06 y 0,14: tiene que
   notarse que no es plano y no tiene que notarse el degradado.

   Va en una capa fija y no en `body`, porque un fondo con `background-attachment`
   se rompe en iOS y porque así no se repinta al desplazar.

   El elegido es BRASA y vive arriba, en :root. Los otros dos que se probaron
   —arboleda y noche— se quedan aquí detrás de `data-fondo` por si algún día se
   quiere volver a mirar, junto con `plano`, que es el liso de antes. */

body::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:var(--fondo,none);
}
/* La barra lateral deja pasar el tinte en vez de ser una losa lisa encima. */
aside{background-color:var(--surface)}
@supports (background:color-mix(in srgb,red,blue)){
  aside{background-color:color-mix(in srgb, var(--surface) 84%, transparent)}
}

:root[data-fondo="arboleda"]{
  --fondo:
    radial-gradient(90% 55% at 50% 0%,   rgba(150,181,129,.06), rgba(0,0,0,0) 70%),
    radial-gradient(120% 75% at 50% 112%, rgba(79,107,65,.12), rgba(0,0,0,0) 66%),
    linear-gradient(#14120d 0%, #141610 46%, #14120d 100%);
}
:root[data-fondo="noche"]{
  --fondo:
    radial-gradient(90% 55% at 50% 0%,   rgba(147,164,221,.06), rgba(0,0,0,0) 70%),
    radial-gradient(120% 75% at 50% 112%, rgba(57,73,122,.14), rgba(0,0,0,0) 66%),
    linear-gradient(#14120d 0%, #12131a 46%, #14120d 100%);
}
:root[data-fondo="plano"]{ --fondo:none }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--f-texto); font-size:18px; line-height:1.68;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit; text-decoration-color:var(--gold-line); text-underline-offset:3px}
a:hover{text-decoration-color:var(--clay)}
/* Un enlace de prosa no se pinta de otro color: se subraya en oro. El azul del
   reglamento se reserva para donde el enlace es el asunto y no el texto. */
a.remite{color:var(--ultra); text-decoration-color:var(--ultra-bg)}
a.remite:hover{text-decoration-color:var(--ultra)}
::selection{background:var(--gold-bg); color:var(--fg)}
:focus-visible{outline:2px solid var(--clay); outline-offset:3px}

/* ── CUERO Y PERGAMINO ────────────────────────────────────────────
   El menú es una tira de cuero y la página es pergamino, y las dos texturas
   están hechas aquí dentro: son ruido SVG incrustado en esta hoja de estilo, no
   imágenes. Ni una petición más, ni un kilobyte más, y nada que se pueda quedar
   en 404 el día que alguien mueva una carpeta.

   EL RUIDO VA EN EL CANAL ALFA, y ésta es la única decisión que importa aquí.
   Lo natural sería pintar una mancha gris y mezclarla en `soft-light`, que es lo
   que hace todo el mundo; sobre este fondo no se ve nada. `soft-light` y
   `overlay` conservan la claridad del sustrato, y el sustrato es un pardo de
   claridad 8: mezclarle gris medio lo deja igual. Probado y descartado.

   Así que cada textura son dos capas en `normal`: una de luz —color hueso— y
   otra de sombra —negro—, y el ruido decide la transparencia de cada una, no su
   color. `feColorMatrix` es lo que traduce: la última fila convierte el valor
   del ruido en alfa. Sobre cualquier fondo, claro u oscuro, se comporta igual.

   Las alfas van entre 0,02 y 0,28 y el texto no pierde contraste: las dos capas
   se anulan en la media, así que la claridad del fondo no se mueve — sube donde
   el poro coge luz y baja donde tiene sombra, que es exactamente lo que hace
   una superficie de verdad.

   El mosaico se repite. Se disimula superponiendo frecuencias muy distintas con
   baldosas que no son múltiplos: 170 y 510 en el cuero, 290 y 870 en el papel.
   Las dos rejillas nunca coinciden y el ojo no encuentra el patrón. */

:root{
  /* CUERO · la luz. Ruido fino pasado por una lámpara rasante a 135°, arriba a
     la izquierda, como en las láminas del libro. Eso es lo que convierte una
     mancha en una superficie con poro. */
  --cuero-luz:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' stitchTiles='stitch' baseFrequency='0.92' numOctaves='4' seed='3'/%3E%3CfeDiffuseLighting surfaceScale='1.3' diffuseConstant='1' lighting-color='%23ffffff'%3E%3CfeDistantLight azimuth='135' elevation='55'/%3E%3C/feDiffuseLighting%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.93 0 0 0 0 0.88 0 0 0 0 0.75 0.40 0 0 0 -0.245'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23a)'/%3E%3C/svg%3E");
  /* CUERO · la sombra. El mismo ruido y la misma luz, invertida la fila del
     alfa: donde aquélla aclara, ésta no hace nada, y al revés. */
  --cuero-sombra:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' stitchTiles='stitch' baseFrequency='0.92' numOctaves='4' seed='3'/%3E%3CfeDiffuseLighting surfaceScale='1.3' diffuseConstant='1' lighting-color='%23ffffff'%3E%3CfeDistantLight azimuth='135' elevation='55'/%3E%3C/feDiffuseLighting%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -0.48 0 0 0 0.235'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23b)'/%3E%3C/svg%3E");
  /* CUERO · la mancha. La misma turbulencia a una frecuencia cincuenta veces
     más baja: una piel curtida no es uniforme, tiene zonas. */
  --cuero-zona:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='510' height='510'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' stitchTiles='stitch' baseFrequency='0.009' numOctaves='3' seed='11'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.34 0.12 0 0 -0.17'/%3E%3C/filter%3E%3Crect width='510' height='510' filter='url(%23c)'/%3E%3C/svg%3E");
  /* PAPEL · el grano, y aquí hubo que rectificar. La primera versión llevaba
     tres capas: grano fino, una veta achatada que imitaba la fibra de la piel
     estirada y unas aguas grandes de curtición desigual. Sobre el papel de un
     pergamino de verdad eso es lo que hay; en una pantalla de 1.440 px de ancho
     la veta se lee como **tiras horizontales**, y las aguas como suciedad. Lo
     que en el cuero funciona —y funciona porque la tira del menú mide 19rem, y
     ahí una frecuencia baja no da para formar bandas— en un fondo de pantalla
     completa se convierte en un patrón que se ve antes que el texto.

     Así que el papel se queda con una sola frecuencia, alta y sin dirección:
     grano parejo en todo el lienzo, como la piel del menú de al lado. La
     textura tiene que notarse al mirarla y desaparecer al leer. */
  --papel-luz:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1200'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='3' seed='5'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.94 0 0 0 0 0.9 0 0 0 0 0.8 0.46 0.16 0 0 -0.30'/%3E%3C/filter%3E%3Crect width='1600' height='1200' filter='url(%23d)'/%3E%3C/svg%3E");
  --papel-sombra:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1200'%3E%3Cfilter id='e'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='3' seed='5'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -0.5 -0.18 0 0 0.30'/%3E%3C/filter%3E%3Crect width='1600' height='1200' filter='url(%23e)'/%3E%3C/svg%3E");
  /* La costura del cuero: punto largo, hueco corto, en el oro del libro. */
  --cuero-costura:repeating-linear-gradient(to bottom,
    var(--gold-line) 0 11px, rgba(0,0,0,0) 11px 22px);
}

/* EL PAPEL. Las capas van en la misma capa fija que ya tenía el fondo, y no en
   `body`: un fondo con `background-attachment` se rompe en iOS. */
body::before{
  background-image:var(--papel-luz), var(--papel-sombra), var(--fondo);
  background-size:cover, cover, cover;
  background-repeat:no-repeat, no-repeat, no-repeat;
}
/* EL CUERO. Poro con relieve, zonas por debajo, la costura pegada al canto
   derecho y un viñeteado que redondea la pieza en vez de dejarla plana. */
aside{
  background-image:var(--cuero-costura), var(--cuero-luz), var(--cuero-sombra), var(--cuero-zona);
  background-size:1px 100%, 170px 170px, 170px 170px, 510px 510px;
  background-position:right 11px top, 0 0, 0 0, 0 0;
  background-repeat:repeat-y, repeat, repeat, repeat;
  box-shadow:inset -18px 0 30px -22px rgba(0,0,0,.95), inset 0 0 80px rgba(0,0,0,.28);
}

/* Sobre papel el gesto es el mismo a menos de la mitad: el hueso se ensucia
   enseguida, y una piel sin curtir tiene menos poro que una curtida. */
:root[data-tema="claro"] body::before{ opacity:.5 }
:root[data-tema="claro"] aside{
  /* Sin la capa de zonas: sobre piel clara esa mancha grande no lee como una
     curtición desigual, lee como suciedad. Queda el poro y nada más. */
  background-image:var(--cuero-costura), var(--cuero-luz), var(--cuero-sombra);
  background-size:1px 100%, 230px 230px, 230px 230px;
  box-shadow:inset -16px 0 26px -22px rgba(92,72,42,.45), inset 0 0 70px rgba(150,130,95,.1);
}

/* Quien pide más contraste no quiere ruido encima de la letra. */
@media (prefers-contrast:more){
  body::before{background-image:var(--fondo)}
  aside{background-image:var(--cuero-costura); box-shadow:none}
}

/* ── el armazón ───────────────────────────────────────────────── */
.armazon{display:grid; grid-template-columns:var(--sidebar) minmax(0,1fr)}
#abrir,.abrir-menu,.barra{display:none}

aside{
  position:sticky; top:0; height:100vh; overflow-y:auto;
  /* `background-color` y no el atajo `background`: el atajo reinicia
     `background-image` y se llevaba por delante el cuero de arriba. */
  background-color:var(--surface); border-right:1px solid var(--line-2);
  padding:1.6rem 1.1rem 4rem; font-size:15px;
}
.marca{display:block; margin-bottom:1.6rem; text-decoration:none}
.marca b{
  display:block; font-family:var(--f-disp); font-weight:600; font-size:1.45rem;
  line-height:1.05; letter-spacing:.01em;
}
.marca span{
  display:block; font-family:var(--f-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--clay); margin-top:.45rem;
}
nav ol,nav ul{list-style:none; margin:0; padding:0}
nav .libro{border-top:1px solid var(--line); padding:.15rem 0}
nav .libro:first-child{border-top:0}
nav details>summary{
  list-style:none; cursor:pointer; display:flex; gap:.6rem; align-items:baseline;
  padding:.5rem .4rem; border-radius:3px;
}
nav details>summary::-webkit-details-marker{display:none}
nav details>summary:hover{background:var(--surface-sunk)}
nav .num{
  font-family:var(--f-mono); font-size:10.5px; color:var(--clay);
  min-width:1.9rem; letter-spacing:.06em;
}
nav .nom{font-family:var(--f-disp); font-size:1.12rem; font-weight:600; line-height:1.2}
nav .secs{padding:.1rem 0 .6rem 2.5rem; border-left:1px solid var(--line); margin-left:.9rem}
nav .secs a{
  display:block; padding:.3rem .2rem; text-decoration:none; color:var(--fg-2);
  line-height:1.35; font-size:14.5px;
}
nav .secs a:hover{color:var(--fg)}
nav .secs a[aria-current="page"]{color:var(--clay); font-weight:600}
nav .secs a[aria-current="page"]::before{content:"▸ "; margin-left:-1em}
nav .portada-libro{font-style:italic}
.servicio{margin-top:1.6rem; padding-top:1rem; border-top:1px solid var(--line-2)}
.servicio a{display:block; padding:.3rem .4rem; color:var(--fg-2); text-decoration:none; font-size:14.5px}
.servicio a:hover{color:var(--fg)}

/* ── la columna de lectura ───────────────────────────────────── */
main{padding:3.4rem 3rem 8rem; max-width:52rem}
.miga{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--fg-3); margin:0 0 1.1rem;
}
.miga a{text-decoration:none; color:var(--clay)}
h1{
  font-family:var(--f-disp); font-weight:600; font-size:clamp(2.3rem,5vw,3.4rem);
  line-height:1.02; margin:0 0 .6rem; letter-spacing:-.01em; text-wrap:balance;
}
.bajada{margin:0 0 2.2rem; font-size:1.18rem; color:var(--fg-2); font-style:italic; max-width:54ch}
h2{
  font-family:var(--f-disp); font-weight:600; font-size:1.85rem; line-height:1.15;
  margin:2.8rem 0 .9rem; padding-bottom:.35rem; border-bottom:1px solid var(--line-2);
  text-wrap:balance;
}
h3{font-family:var(--f-disp); font-weight:600; font-size:1.35rem; margin:2rem 0 .5rem}
p{margin:0 0 1.05rem; max-width:66ch}
main ul,main ol{max-width:64ch; padding-left:1.3rem}
main li{margin-bottom:.4rem}
strong,b{font-weight:600}
em,i{font-style:italic}
code{
  font-family:var(--f-mono); font-size:.86em; background:var(--surface-sunk);
  padding:.1em .38em; border-radius:2px; overflow-wrap:anywhere;
}
hr{border:0; border-top:1px solid var(--line-2); margin:2.6rem 0}
.cita{
  font-family:var(--f-mono); font-size:.82em; color:var(--fg-3);
  overflow-wrap:anywhere;   /* no nowrap: las citas largas de Dágata rompían el teléfono ⟨paso 17⟩ */
}

/* La voz del mundo: lo que dice alguien de dentro, con su firma. No es
   la voz del libro, así que va en cursiva y sangrada, y la firma en mono. */
blockquote{
  margin:1.8rem 0; padding:.2rem 0 .2rem 1.3rem; border-left:1px solid var(--line-3);
  font-style:italic; color:var(--fg-2); max-width:60ch;
}
blockquote p{margin:0 0 .5rem}
blockquote footer{
  font-family:var(--f-mono); font-style:normal; font-size:11px; letter-spacing:.06em;
  color:var(--fg-3); margin-top:.5rem;
}

/* ── lo esencial: la página que abre cada libro ──────────────── */
/* El filete de un píxel en oro para la voz del editor: lo mejor que se vio en
   el Imperial Library, y aquí es lo que abre cada libro. */
.esencial{
  background:var(--surface); border:1px solid var(--gold-line);
  border-left:3px solid var(--gold); padding:1.5rem 1.7rem; margin:0 0 2.6rem;
}
.esencial h2{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); border:0; margin:0 0 1rem; padding:0; font-weight:500;
}
.esencial ol{list-style:none; margin:0; padding:0; counter-reset:e}
.esencial li{
  counter-increment:e; display:grid; grid-template-columns:2rem minmax(0,1fr);
  gap:.7rem; margin:0 0 .85rem; align-items:baseline; max-width:none;
}
.esencial li:last-child{margin-bottom:0}
.esencial li::before{
  content:counter(e); font-family:var(--f-mono); font-size:12px; color:var(--gold);
  font-variant-numeric:tabular-nums;
}

/* ── lo que no se sabe: el cierre de cada sección ────────────── */
.no-se-sabe{
  margin:3.4rem 0 0; padding:1.3rem 1.6rem; background:var(--surface-sunk);
  border:1px dashed var(--line-3);
}
.no-se-sabe h2{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fg-3); border:0; margin:0 0 .8rem; padding:0; font-weight:500;
}
.no-se-sabe p{color:var(--fg-2); margin-bottom:.7rem}
.no-se-sabe p:last-child{margin-bottom:0}

/* ── piezas de contenido ─────────────────────────────────────── */
.ficha{
  display:grid; grid-template-columns:minmax(7rem,auto) minmax(0,1fr);
  gap:.45rem 1.4rem; margin:1.6rem 0; padding:1.1rem 0;
  border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2);
}
.ficha dt{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--fg-3); padding-top:.35em;
}
.ficha dd{margin:0}
.dato{
  display:block; margin:1.8rem 0; padding-left:1.2rem; border-left:3px solid var(--gold);
  font-family:var(--f-disp); font-size:1.5rem; line-height:1.25; font-weight:600;
}
.dato small{
  display:block; font-family:var(--f-texto); font-size:.95rem; font-weight:400;
  color:var(--fg-2); margin-top:.35rem; font-style:italic;
}
.tabla{margin:1.7rem 0; overflow-x:auto}
table{border-collapse:collapse; width:100%; margin:0; font-size:.94em; min-width:30rem}
th,td{text-align:left; padding:.55rem .7rem; border-bottom:1px solid var(--line); vertical-align:top}
thead th{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--fg-3); border-bottom:1px solid var(--line-2); font-weight:500;
}
tbody tr:last-child td{border-bottom:1px solid var(--line-2)}
.num-col{text-align:right; font-variant-numeric:tabular-nums; font-family:var(--f-mono); font-size:.9em}

/* ── índice de secciones dentro de la portada de un libro ────── */
.indice{list-style:none; margin:2.4rem 0 0; padding:0; border-top:1px solid var(--line-2)}
.indice li{margin:0; border-bottom:1px solid var(--line)}
.indice a{
  display:grid; grid-template-columns:2.6rem minmax(0,1fr); gap:1rem;
  padding:.85rem .3rem; text-decoration:none; align-items:baseline;
}
.indice a:hover{background:var(--surface)}
.indice .n{font-family:var(--f-mono); font-size:11px; color:var(--clay); font-variant-numeric:tabular-nums}
.indice .t{font-family:var(--f-disp); font-size:1.25rem; font-weight:600}
.indice .pend{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--fg-3); margin-left:.6rem;
}

/* ── el esqueleto de una sección sin escribir ────────────────── */
.pendiente{
  border:1px dashed var(--line-2); padding:2rem 1.8rem; background:var(--surface);
  color:var(--fg-2);
}
.pendiente p:last-child{margin-bottom:0}

/* ── pie y paso a la siguiente ───────────────────────────────── */
.pasos{display:flex; gap:1rem; justify-content:space-between; margin:4rem 0 0; padding-top:1.2rem; border-top:1px solid var(--line-2)}
.pasos a{
  text-decoration:none; font-family:var(--f-texto); max-width:20rem;
  display:block; color:var(--fg-2);
}
.pasos a:hover{color:var(--fg)}
.pasos .et{
  display:block; font-family:var(--f-mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--clay); margin-bottom:.25rem;
}
.pasos .der{text-align:right; margin-left:auto}
footer{
  margin-top:3.5rem; padding-top:1.3rem; border-top:1px solid var(--line-2);
  font-size:.88rem; color:var(--fg-3); font-family:var(--f-mono);
  display:flex; flex-wrap:wrap; gap:.8rem 1.6rem;
}

/* ── la portada ──────────────────────────────────────────────── */
body.portada{background:var(--bg)}
.cubierta{max-width:60rem; margin:0 auto; padding:6rem 2rem 6rem}
.cubierta h1{font-size:clamp(3rem,9vw,6rem); margin-bottom:1rem}
.cubierta .lema{font-size:1.35rem; color:var(--fg-2); font-style:italic; max-width:34ch; margin-bottom:3.5rem}
.rejilla{display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1px; background:var(--line-2); border:1px solid var(--line-2)}
.rejilla a{background:var(--bg); padding:1.5rem 1.4rem; text-decoration:none; display:block}
.rejilla a:hover{background:var(--surface)}
.rejilla .n{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; color:var(--clay)}
.rejilla .t{display:block; font-family:var(--f-disp); font-size:1.7rem; font-weight:600; line-height:1.1; margin:.5rem 0 .4rem}
.rejilla .s{display:block; color:var(--fg-2); font-size:.95rem; font-style:italic; line-height:1.4}

/* ── teléfono ────────────────────────────────────────────────── */
@media (max-width:980px){
  body{font-size:17px}
  .armazon{display:block}
  aside{
    position:fixed; z-index:40; inset:0 auto 0 0; width:min(85vw,var(--sidebar));
    transform:translateX(-101%); transition:transform .2s ease; box-shadow:0 0 40px #0003;
  }
  #abrir:checked ~ aside{transform:none}
  .barra{
    display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:30;
    background:var(--bg); border-bottom:1px solid var(--line-2); padding:.7rem 1.1rem;
    font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  }
  .abrir-menu{display:flex; align-items:center; gap:.55rem; color:var(--clay); cursor:pointer}
  .buscar-movil{display:flex; align-items:center; gap:.45rem; color:var(--clay); text-decoration:none}
  main{padding:2rem 1.15rem 6rem}
  .tabla{margin-inline:-1.15rem; padding-inline:1.15rem}
  table{font-size:.88em}
  th,td{padding:.45rem .55rem}
  .cubierta{padding:3.5rem 1.15rem 5rem}
  .ficha{grid-template-columns:1fr; gap:.15rem .5rem}
  .ficha dt{padding-top:.8rem}
  .pasos{flex-direction:column; gap:1.4rem}
  .pasos .der{text-align:left; margin-left:0}
  html{scroll-padding-top:4.2rem}
  .subir{right:.9rem; bottom:.9rem; width:2.3rem; height:2.3rem}
  .en-esta-pagina ol{columns:auto}
}
@media print{
  aside,.abrir-menu,.barra,.pasos,.subir,.hallazgo-aviso{display:none}
  .armazon{display:block}
  main{max-width:none; padding:0}
  body{font-size:11pt; background:#fff; color:#000}
}

/* ── el índice de la página ⟨D-704⟩ ────────────────────────────
   Sale en toda página con seis apartados o más: el generador lo escribe
   detrás de la entradilla. No es un sumario decorativo, es la manera de
   llegar de una pregunta al apartado que la contesta sin bajar rodando. */
.en-esta-pagina{
  margin:1.6rem 0 2.6rem; padding:1rem 1.3rem 1.1rem;
  background:var(--surface); border:1px solid var(--line-2);
  border-left:2px solid var(--gold-line); font-size:.95em;
}
.en-esta-pagina > p{
  margin:0 0 .7rem; font-family:var(--f-mono); font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--fg-3);
}
.en-esta-pagina ol{
  list-style:none; margin:0; padding:0; max-width:none;
  columns:2 15rem; column-gap:2.2rem;
}
.en-esta-pagina li{
  margin:0 0 .4rem; break-inside:avoid; line-height:1.4;
  counter-increment:ap;
}
.en-esta-pagina ol{counter-reset:ap}
.en-esta-pagina li::before{
  content:counter(ap,decimal-leading-zero); margin-right:.55rem;
  font-family:var(--f-mono); font-size:10px; color:var(--fg-4);
}
.en-esta-pagina a{
  text-decoration:none; color:var(--fg-2);
  border-bottom:1px solid transparent; padding-bottom:1px;
}
.en-esta-pagina a:hover{color:var(--clay); border-bottom-color:var(--clay)}

/* El visor de un mapa: la lámina manda y el texto se aparta ⟨D-712⟩. */
main.visor-mapa{max-width:none; padding-right:3rem}
figure.visor{margin:1.4rem 0 1.2rem}
figure.visor img{width:100%; max-width:1500px}
figure.visor figcaption{max-width:58ch}
.vuelta-mapa{
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--fg-3); margin:0 0 2rem;
}
.vuelta-mapa a{color:var(--clay); text-decoration:none; border-bottom:1px solid var(--gold-line)}
.vuelta-mapa a:hover{border-bottom-color:var(--clay)}

/* Volver arriba. Sin JavaScript: un ancla fija que apunta al `id` del body.
   Siempre visible, porque la hoja no puede saber cuánto se ha bajado. */
.subir{
  position:fixed; z-index:20; right:1.4rem; bottom:1.4rem;
  width:2.6rem; height:2.6rem; display:grid; place-items:center;
  background:var(--surface); border:1px solid var(--line-3); border-radius:50%;
  color:var(--fg-3); text-decoration:none; font-size:1.1rem; line-height:1;
  box-shadow:0 6px 18px -8px rgba(0,0,0,.8); opacity:.55;
  transition:opacity .15s ease, color .15s ease, border-color .15s ease;
}
.subir:hover,.subir:focus{opacity:1; color:var(--clay); border-color:var(--clay)}
/* El ancla queda por debajo de la barra pegajosa del teléfono sin esto. */
html{scroll-padding-top:1.5rem}

/* ── Dágata: las fichas vertidas ─────────────────────────────── */
.ficha-disco{margin:0 0 3.2rem; padding-top:.4rem; border-top:1px solid var(--line-2)}
.ficha-disco > h2{margin-top:1.6rem}
.ficha-disco h3{font-size:1.45rem; margin:2.2rem 0 .6rem}
.ficha-disco h4{font-size:1.15rem; margin:1.6rem 0 .4rem}
.procedencia{margin-top:1.4rem; text-align:right}

/* Sólo sale en la edición de mesa (LIBRO=mesa): lo que es para quien dirige. */
.solo-mesa{
  margin:1.6rem 0; padding:.9rem 1.2rem; border:1px dashed var(--wine);
  background:var(--wine-bg); position:relative;
}
.solo-mesa::before{
  content:'Para quien dirige'; display:block; margin-bottom:.5rem;
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--wine);
}

/* ── las ilustraciones ⟨D-677⟩ ─────────────────────────────────
   Tres maneras y ninguna más: la lámina a todo el ancho de la columna, la medalla
   que flota a la derecha del texto, y la rejilla. Ninguna lleva texto encima. */
figure{margin:2.2rem 0}
figure img,.rejilla-img img{display:block; max-width:100%; height:auto}
figcaption{font-family:var(--f-texto); font-style:italic; font-size:.86rem; line-height:1.45;
  color:var(--fg-3); margin-top:.6rem; max-width:62ch}
figure.lamina img{width:100%; border-radius:3px; box-shadow:0 1px 0 var(--line-2), 0 18px 40px -22px rgba(0,0,0,.8)}
figure.lamina.mapa img{border-radius:2px}
figure.lamina.mapa a{display:block; cursor:zoom-in}
figure.portada-lamina{margin:0 0 2.6rem}
figure.medalla{float:right; clear:right; width:10rem; margin:.3rem 0 1.2rem 1.8rem}
figure.medalla img{width:100%; filter:drop-shadow(0 10px 14px rgba(0,0,0,.55))}
figure.medalla figcaption{text-align:center; margin-top:.35rem; font-size:.8rem}
main h2{clear:both}
.pareja{float:right; clear:right; width:15rem; margin:.3rem 0 1.4rem 1.8rem}
.pareja .rejilla-img{display:grid; grid-template-columns:1fr 1fr; gap:.8rem; align-items:center}
.pareja figure,.galeria figure{margin:0}
.pareja img,.galeria:not(.ancha) img{filter:drop-shadow(0 8px 12px rgba(0,0,0,.5))}
.pareja figure figcaption,.galeria figure figcaption{text-align:center; font-style:normal;
  font-family:var(--f-disp); font-size:.98rem; color:var(--fg-2); margin-top:.3rem}
.pareja > figcaption,.galeria > figcaption{margin-top:.8rem}
.galeria{margin:2rem 0 2.4rem; clear:both}
.galeria .rejilla-img{display:grid; grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr)); gap:1.4rem 1rem}
.galeria.ancha .rejilla-img{grid-template-columns:repeat(auto-fill,minmax(14rem,1fr)); gap:1.2rem 1rem}
.galeria.ancha img{width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:3px}
/* EL SELLO. La esfera con el dragón, arriba del menú y en todas las páginas,
   que es donde estaba en el Apócrifo. Y es el único enlace del Libro que sale
   del Libro: lleva a eleina.info, no a la portada de aquí —eso lo hace el
   título de debajo—, porque un logo que repite el enlace de al lado no sirve
   para nada y uno que te devuelve al sitio, sí ⟨25 de septiembre⟩. */
.sello{display:block; width:5.5rem; margin:0 0 1rem; line-height:0}
.sello img{
  width:100%; height:auto; border-radius:50%;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.55));
  transition:filter .25s, transform .25s;
}
.sello:hover img{filter:drop-shadow(0 8px 20px rgba(209,168,96,.4)); transform:translateY(-1px)}
.sello:focus-visible{outline-offset:6px; border-radius:50%}

/* EL FRONTISPICIO. La lámina grande de la portada, donde antes estaba el logo.
   Sin marco pintado: el marco lo pone la página, no el cuadro. */
.frontispicio{margin:0 0 2.6rem; max-width:46rem}
.frontispicio img{
  width:100%; height:auto; display:block; border-radius:2px;
  border:1px solid var(--gold-line);
  box-shadow:0 18px 44px rgba(0,0,0,.55);
}
.frontispicio figcaption{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--fg-3); margin-top:.8rem;
}
@media (max-width:640px){
  figure.medalla{width:6.8rem; margin-left:1rem}
  .pareja{width:10rem; margin-left:1rem}
  figure.lamina{margin-left:-.25rem; margin-right:-.25rem}
  .galeria.ancha .rejilla-img{grid-template-columns:1fr 1fr}
}
@media print{ figure,.galeria,.pareja{break-inside:avoid} }

/* ── el buscador ──────────────────────────────────────────────────
   La caja vive arriba del menú en todas las páginas y manda a buscar.html;
   allí se busca de verdad. En el teléfono la caja queda dentro del menú
   desplegable y, por si no se abre, la barra de arriba lleva un enlace
   directo. `mark` pinta con el oro del libro: es el mismo gesto que el
   dato destacado, no un amarillo de rotulador. */
.buscar{display:flex; margin:0 0 1.3rem; border:1px solid var(--line-2); border-radius:3px; background:var(--surface-sunk)}
.buscar:focus-within{border-color:var(--clay)}
.buscar input{
  flex:1; min-width:0; background:transparent; border:0; color:var(--fg);
  font-family:var(--f-texto); font-size:15px; padding:.55rem .2rem .55rem .7rem; outline:0;
}
.buscar input::placeholder{color:var(--fg-3); font-style:italic}
.buscar input::-webkit-search-cancel-button{appearance:none}
.buscar button{
  background:transparent; border:0; color:var(--fg-3); padding:0 .7rem; cursor:pointer;
  display:grid; place-items:center;
}
.buscar button:hover,.buscar button:focus-visible{color:var(--clay)}

mark,mark.hallazgo{
  background:var(--gold-bg); color:var(--gold-2); border-bottom:1px solid var(--gold-line);
  border-radius:2px; padding:0 .08em;
}
:root[data-tema="claro"] mark,:root[data-tema="claro"] mark.hallazgo{color:var(--fg)}
.hallazgo-aviso{
  position:sticky; top:.6rem; z-index:15; margin:0 0 1.6rem; padding:.45rem .8rem;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; color:var(--fg-2);
  background:var(--surface); border:1px solid var(--gold-line); border-radius:3px;
}
.hallazgo-aviso a{color:var(--clay)}

#buscador .caja{display:flex; margin:1.4rem 0 .6rem; border:1px solid var(--line-3); border-radius:3px; background:var(--surface)}
#buscador .caja:focus-within{border-color:var(--clay)}
#buscador .caja input{
  flex:1; min-width:0; background:transparent; border:0; color:var(--fg); outline:0;
  font-family:var(--f-disp); font-size:1.5rem; font-weight:600; padding:.7rem 1rem;
}
#buscador .caja input::placeholder{color:var(--fg-4); font-weight:400; font-style:italic}
#buscador .caja button{
  background:transparent; border:0; border-left:1px solid var(--line-2); color:var(--clay);
  padding:0 1.1rem; font-family:var(--f-mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; cursor:pointer;
}
#buscador .caja button:hover{background:var(--surface-sunk)}
#buscador .estado{margin:.2rem 0 1.8rem; color:var(--fg-3); font-size:.95rem; font-style:italic; min-height:1.4em}
.res{padding:1.15rem 0 1.2rem; border-top:1px solid var(--line-2)}
.res h2{margin:0 0 .5rem; font-size:1.35rem; line-height:1.2; display:flex; gap:.7rem; align-items:baseline; flex-wrap:wrap}
.res h2 a{text-decoration:none; color:var(--fg)}
.res h2 a:hover{color:var(--clay)}
.res .libro{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--clay); font-weight:400;
}
.res ul{list-style:none; margin:0; padding:0}
.res li{margin:0 0 .65rem; line-height:1.5; color:var(--fg-2)}
.res li .apartado{
  display:block; font-family:var(--f-mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--fg-3); text-decoration:none; margin-bottom:.12rem;
}
.res li .apartado:hover{color:var(--clay)}
.res .mas{margin:.2rem 0 0; font-size:.88rem; color:var(--fg-3); font-style:italic}
.mas-resultados{
  display:block; margin:1.6rem auto 0; padding:.6rem 1.4rem; cursor:pointer;
  background:var(--surface); color:var(--clay); border:1px solid var(--line-3); border-radius:3px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
}
.mas-resultados:hover{border-color:var(--clay)}
@media (max-width:980px){
  .buscar input{font-size:16px}              /* a menos de 16px iOS se acerca solo al enfocar */
  #buscador .caja input{font-size:1.25rem}
}