/* 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}

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

aside{
  position:sticky; top:0; height:100vh; overflow-y:auto;
  background: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}
  .abrir-menu{
    display:flex; align-items:center; gap:.55rem; 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;
    color:var(--clay); cursor:pointer;
  }
  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,.pasos,.subir{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}
.cubierta img.logo{width:7.5rem; height:auto; margin:0 0 1.6rem; filter:drop-shadow(0 12px 24px rgba(0,0,0,.6))}
@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} }