/* Sagrada Biblia Straubinger — hoja de estilos del sitio */

/* Cinzel — capital romana para el título del banner (SIL Open Font License 1.1, alojada
   localmente en /assets/fonts/; ver OFL-Cinzel.txt). Solo subconjunto latino (incl. acentos y ñ). */
@font-face {
  font-family: 'Cinzel'; font-weight: 400; font-style: normal; font-display: optional;
  src: url(/assets/fonts/cinzel-400.woff2) format('woff2');
}
@font-face {
  font-family: 'Cinzel'; font-weight: 600; font-style: normal; font-display: optional;
  src: url(/assets/fonts/cinzel-600.woff2) format('woff2');
}

:root {
  --paper: #fdfcf9;
  --paper-raised: #ffffff;
  --ink: #2b2620;
  --ink-soft: #6b6257;
  --accent: #9e1f1f;        /* rojo: títulos de capítulo, versículos, enlaces */
  --accent-soft: #b34a4a;
  --link: #9e1f1f;
  --link-note: #1f5f8b;     /* azul: llamadas y enlaces a notas del comentario */
  --nref: #7f6714;          /* dorado: pastillas de referencia cruzada */
  --rule: #e4ddd2;
  --chip-bg: #f4f0e7;
  --note-bg: #f4efe6;
  --hl: #fdf1c7;
  --sel-bg: #b65d5d;        /* caja del elemento actual (capítulo/libro) */
  --sel-ink: #ffffff;
  --hover-bg: #e2e2e2;      /* resaltado hover circular: flechas y tira de capítulos */
  --active-bg: #d0d0d0;     /* algo más oscuro al pulsar */
  --topbar-h: 2.7rem;       /* altura de la barra sticky; se descuenta al saltar a anclas */
  --doc-top: 3rem;          /* aire bajo el banner con que abren Acerca, Láminas y Créditos */
  --topbar-ink: #e8e6e1;    /* color del texto de la barra: Inicio · Acerca · Opciones (los 3) */
}
:root[data-theme="dark"] {
  --paper: #262626;
  --paper-raised: #2e2e2e;
  --ink: #dcd5c7;
  --ink-soft: #a29888;
  --accent: #e08b6d;
  --accent-soft: #c97f6f;
  --link: #e08b6d;
  --link-note: #7fb3d5;
  --nref: #cbaa5c;          /* dorado más luminoso sobre fondo oscuro */
  --rule: #3a342b;
  --chip-bg: #2c2720;
  --note-bg: #26221c;
  --hl: #4a3f1e;
  --sel-bg: #e5ddd0;
  --sel-ink: #191612;
  --hover-bg: rgba(255,255,255,.14);   /* resaltado hover sobre fondo oscuro: velo claro, texto legible */
  --active-bg: rgba(255,255,255,.22);
}
/* Tema claro por defecto, independiente del sistema operativo; el oscuro se activa solo
   con data-theme="dark" (conmutable desde el panel Opciones). */

/* Transición elegante al conmutar de tema: activa brevemente (clase theme-anim) para que
   colores, fondos y bordes hagan un fundido al cambiar las variables; sin coste permanente. */
.theme-anim, .theme-anim *, .theme-anim *::before, .theme-anim *::after {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, fill .35s ease !important;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.19rem);
  line-height: 1.72;
  /* El pie va abajo del todo aunque la página sea corta —la de error lo es—: sin esto treparía
     hasta media pantalla y dejaría un vacío bajo él. El `margin-top: 6rem` del pie sigue mandando
     en las páginas largas, que es donde hace falta el aire. */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
body > main, body > .shell { flex: 1 0 auto; }
.wrap { max-width: 46rem; margin: 0 auto; padding: 0 1.1rem; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

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

/* ——— barra superior (siempre oscura) ——— */
.topbar {
  background: #262525; color: var(--topbar-ink);
  position: sticky; top: 0; z-index: 30;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
}
:root[data-theme="dark"] .topbar { background: #262626; }
.tb-wrap {
  max-width: 76rem; margin: 0 auto; padding: 0 3.2rem;
  display: flex; align-items: center; justify-content: center;
  gap: 1.7rem; min-height: var(--topbar-h); position: relative;
}
.topbar a { color: var(--topbar-ink); font-size: .93rem; letter-spacing: .02em; }
/* botón «Opciones» y su panel desplegable (menú anclado al botón) */
.opts { display: inline-flex; align-items: center; }
.opts-btn {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--topbar-ink); font: inherit; font-size: .93rem; letter-spacing: .02em;
}
.opts-btn:hover { text-decoration: underline; }
.opts-panel {
  /* position: fixed → coordenadas de viewport: el JS fija top/left exactos y sujeta al viewport,
     sin depender de ningún bloque contenedor. Los valores de aquí son solo fallback. */
  position: fixed; top: var(--topbar-h); left: .7rem; z-index: 40;
  width: 21rem; max-width: calc(100vw - 1.4rem);
  background: var(--paper-raised); color: var(--ink); text-align: left;
  border: 1px solid var(--rule); border-radius: .6rem;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .22);
  padding: .95rem 1.05rem;
}
.opts-panel[hidden] { display: none; }
.opts-panel .opt {
  display: flex; gap: .55rem; align-items: flex-start;
  font-size: .95rem; line-height: 1.4; cursor: pointer;
}
.opts-panel .opt input { margin: .18rem 0 0; flex: 0 0 auto; accent-color: var(--accent); }
.opt-hint { margin: .5rem 0 0; color: var(--ink-soft); font-size: .82rem; line-height: 1.45; }
/* separación entre ajustes del panel */
.opt-hint + .opt, .opts-panel .opt + .opt {
  margin-top: .85rem; padding-top: .85rem; border-top: 1px solid var(--rule);
}

/* ——— cabecera con imagen (siempre oscura) ——— */
.banner {
  background: #000;
  text-align: center; padding: 2.1rem 1rem 2.4rem;
  border-bottom: 1px solid #000;
}
.banner a { display: inline-block; }
.banner a:hover { text-decoration: none; }
.b-title {
  display: block; color: #fff; font-family: 'Cinzel', serif; font-weight: 600; line-height: 1.1;
  font-variant: small-caps; letter-spacing: .1em;
  font-size: clamp(2.1rem, 5vw, 3.3rem);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .75);
}
.b-sub {
  display: block; margin-top: .55rem; color: #fff;
  font-family: 'Cinzel', serif; font-weight: 600;
  font-variant: small-caps; letter-spacing: .22em;
  font-size: clamp(.9rem, 2vw, 1.15rem);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .75);
}

.site-footer {
  margin-top: 6rem; padding: 1rem 0;
  background: black; color: #ffffff; font-size: 1rem; text-align: center;
}

/* ——— rejilla: AT a la izquierda, texto en el centro, NT a la derecha ——— */
.shell {
  max-width: 82rem; margin: 0 auto; padding: 0 1.1rem;
  display: grid; grid-template-columns: 14.5rem minmax(0, 1fr) 14.5rem;
  gap: 2.4rem; align-items: start;
}
/* dentro de la rejilla, el margen auto encogería el main a su contenido:
   ancho definido y centrado con justify-self */
.shell > main.wrap { padding: 0; margin: 0; width: 100%; justify-self: center; }

/* sin scroll propio: la lista fluye entera y desplaza con la página */
.sidebar {
  padding: 1.5rem 1rem 2rem 0; font-size: 1.02rem; line-height: 1.45;
  border-right: 1px solid var(--rule);
}
.sidebar.sb-right {
  border-right: none; border-left: 1px solid var(--rule);
  padding: 1.5rem 0 2rem 1rem;
}
.sidebar ul { list-style: none; margin: 0 0 .6rem; padding: 0; }
.sidebar a { display: block; padding: .13rem .55rem; border-radius: .25rem; }
.sidebar a:hover { text-decoration: underline; }
.sidebar a.current,
.sidebar li.sb-sec a.current,
.sidebar li.group a.current { background: var(--sel-bg); color: var(--sel-ink); }
.sidebar li.group a { font-style: italic; color: var(--ink-soft); font-size: .92em; }
.sidebar li.sb-sec { margin-top: .55rem; }
.sidebar li.sb-sec a {
  font-variant: small-caps; letter-spacing: .07em;
  color: var(--ink-soft); font-weight: 600;
}
.sb-head {
  font-variant: small-caps; letter-spacing: .08em; font-weight: 600;
  color: var(--ink);
  margin: 0 0 .35rem; padding: 0 .55rem;
}
.sb-head a { color: inherit; padding: 0; display: inline; }

/* anchura media: el NT baja bajo el AT, en una sola columna izquierda */
@media (max-width: 78rem) {
  .shell { grid-template-columns: 14.5rem minmax(0, 1fr); }
  .shell > main.wrap { grid-column: 2; grid-row: 1 / span 2; }
  .sidebar.sb-left { grid-column: 1; grid-row: 1; padding-bottom: 0; }
  .sidebar.sb-right {
    grid-column: 1; grid-row: 2;
    border-left: none; border-right: 1px solid var(--rule);
    padding: 1.2rem 1rem 2rem 0;
  }
}
@media (max-width: 62rem) {
  .shell { display: block; }
  .sidebar { display: none; }
  .shell > main.wrap { padding: 0; }
}

/* ——— portada ——— */
.home .hero { text-align: center; padding: 2.4rem 0 .6rem; }
.hero-note { color: var(--ink-soft); font-size: .95rem; font-style: italic; margin: 0 0 1.5rem; }
.hero-links { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }
.btn {
  display: inline-block; padding: .55rem 1.3rem; border-radius: 2rem;
  background: var(--accent); color: var(--paper); font-size: .95rem;
}
.btn:hover { text-decoration: none; filter: brightness(1.1); }
/* Botón fantasma (Prólogo): colores del chip (texto --ink, borde --rule) y su hover de borde. */
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--rule); }
.btn.ghost:hover { filter: none; border-color: var(--accent-soft); }
:root[data-theme="dark"] .btn.ghost:hover { border-color: var(--ink); }

.indice { padding-bottom: 2rem; }
.testamento {
  text-align: center; font-variant: small-caps; letter-spacing: .18em;
  color: var(--ink); font-size: 1.25rem; margin: 2.6rem 0 .6rem;
  border-top: 1px solid var(--rule); padding-top: 2rem;
}
.testamento a { color: inherit; }
.sec { margin: 1.1rem 0; }
.sec h3 { text-align: center; font-size: .95rem; margin: 0 0 .5rem; }
.sec h3 a {
  color: var(--link); font-variant: small-caps; letter-spacing: .12em; font-weight: 600;
}
.chips { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }
.chip {
  border: 1px solid var(--rule); border-radius: .4rem;
  padding: .28rem .75rem; font-size: .93rem; color: var(--ink);
}
.chip:hover { border-color: var(--accent-soft); text-decoration: none; }
:root[data-theme="dark"] .chip:hover { border-color: var(--ink); }
/* En oscuro, el borde de reposo de las cajas (chips, rejilla de capítulos) un pelín más
   brillante que --rule, en el mismo tono cálido que las pastillas nref. */
:root[data-theme="dark"] .chip,
:root[data-theme="dark"] .chapgrid a { border-color: #4a443a; }
.chip.group { font-style: italic; color: var(--ink-soft); }

/* ——— migas y navegación de capítulo ——— */
.crumbs {
  margin: 1.4rem 0 0; color: var(--ink-soft); font-size: 1.02rem;
  font-variant: small-caps; letter-spacing: .08em;
}
.crumbs a { color: var(--ink-soft); }
.chapnav {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; margin: 2.2rem 0 0; padding: .35rem 0;
  border-block: 1px solid var(--rule);
  font-size: 1.045rem;
}
.chapnav .cn-book {
  font-variant: small-caps; letter-spacing: .1em; font-weight: 600; color: var(--accent);
}
.cn-prev, .cn-next { color: var(--ink-soft); white-space: nowrap; }
.cn-prev.off, .cn-next.off { opacity: .3; }

/* ——— cabecera: flechas, título y (en capítulos) tira de capítulos ——— */
/* Fila superior con las flechas flanqueando el título (padding amplio); en las páginas de
   capítulo, la tira va debajo a todo el ancho. Igual en libros sin capítulos (sin tira). */
.chap-head {
  display: flex; flex-direction: column; align-items: stretch; row-gap: .7rem;
  margin: 2.1rem 0 0;
}
.ch-top {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(1.2rem, 5vw, 3rem);   /* padding amplio entre las flechas y el título */
}
.arrow {
  display: flex; align-items: center; justify-content: center;
  width: 2.8rem; height: 2.8rem; border-radius: 50%;
  background: none; color: var(--ink); cursor: pointer;   /* mismo color que h1.chap-title */
  font-size: 3rem; line-height: 1;
}
/* .is-hover replica :hover al navegar (el navegador no reevalúa :hover tras recargar hasta
   que el ratón se mueve; ver biblia.js). :active oscurece un poco más al pulsar. */
.arrow:hover, .arrow.is-hover { text-decoration: none; background: var(--hover-bg); }
.arrow:active { background: var(--active-bg); }
.arrow.off { visibility: hidden; }
/* el glifo ‹ › cae un poco bajo dentro de su caja; se sube para centrarlo ópticamente */
.arrow .chev { display: block; line-height: 1; transform: translateY(-0.08em); }
.chap-title {
  text-align: center; margin: 0; font-weight: 700;
  font-size: clamp(1.5rem, 4vw, 2.1rem); line-height: 1.25; color: var(--ink);
}
.chap-title a { color: inherit; }
.chap-title a:hover { text-decoration: none; opacity: .8; }
.chap-title .cn { color: var(--accent); }
.chapstrip {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: .05rem .3rem; margin: 0;   /* el row-gap de .chap-head separa de la fila superior */
  font-variant-numeric: tabular-nums; font-size: 1.02rem;
}
/* Todos los números comparten la misma caja circular: el actual en rojo y el hover en gris,
   homogéneo con el resaltado de las flechas de navegación. */
.chapstrip a, .chapstrip .cur {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.7em; height: 1.7em; padding: 0 .2em; border-radius: 50%;
}
.chapstrip a { color: var(--accent); }
/* En tema oscuro los números van en blanco (--ink); el hover usa el velo claro de --hover-bg. */
:root[data-theme="dark"] .chapstrip a { color: var(--ink); }
.chapstrip a:hover { background: var(--hover-bg); text-decoration: none; }
.chapstrip a:active { background: var(--active-bg); }
.chapstrip .cur { background: var(--sel-bg); color: var(--sel-ink); font-weight: 600; }
.chapter .texto { border-top: 1px solid var(--rule); padding-top: 1.3rem; margin-top: 1.5rem; }

/* ——— títulos ——— */
.doc h1 {
  text-align: center; color: var(--accent); font-weight: 700;
  font-size: 1.9rem; margin: 1.6rem 0 1.2rem; line-height: 1.25;
}
.doc h1.chap-title { color: var(--ink); margin: 0; }
/* Título de los libros sin capítulos (<h1> sin .chap-title): mismo margen (0) y mismo tamaño
   que el título de capítulo, para que solo difiera el color. Va en rojo (--accent, heredado de
   .doc h1) a propósito: en un título de lectura, el identificador de la unidad que lees va en
   rojo —«Capítulo N» en los capítulos; el nombre del libro cuando el libro es su propia unidad. */
.chapter .ch-top h1 { margin: 0; font-size: clamp(1.5rem, 4vw, 2.1rem); }
.book-heading {
  text-align: center; color: var(--ink-soft); font-variant: small-caps;
  letter-spacing: .1em; margin: 0 0 1.2rem;   /* el row-gap de .chap-head separa del título */
}
.parte {
  text-align: center; font-variant: small-caps; letter-spacing: .14em;
  color: var(--ink-soft); margin: 1.8rem 0 -0.4rem;
}

.chapgrid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .4rem; margin: 1.4rem 0 2rem;
}
.chapgrid a {
  display: block; min-width: 3rem; text-align: center; padding: .38rem;
  border: 1px solid var(--rule); border-radius: .5rem;
  color: var(--accent); font-variant-numeric: tabular-nums; font-size: .8em;
}
/* En tema oscuro los números van en blanco (--ink), como en la tira; el hover sigue marcando el borde. */
:root[data-theme="dark"] .chapgrid a { color: var(--ink); }
/* Resaltado por el borde, sin fondo. En claro se mantiene (--accent-soft); en oscuro, en blanco. */
.chapgrid a:hover { border-color: var(--accent-soft); text-decoration: none; }
:root[data-theme="dark"] .chapgrid a:hover { border-color: var(--ink); }

/* ——— texto bíblico ——— */
.texto { margin-top: 1.4rem; }
.texto p { margin: 0; text-indent: 1.4em; }
.texto p.margin { margin-top: 1em; }
.texto p.noindent { text-indent: 0; }
.texto h5 {
  text-align: center; font-variant: small-caps; letter-spacing: .14em;
  color: var(--ink-soft); font-weight: 600; margin: 2.2rem 0 1rem;
}
.texto h6 {
  text-align: center; font-weight: 700; font-size: 1.1rem;
  color: var(--accent-soft); margin: 1.7rem 0 .8rem; line-height: 1.4;
}
.texto.intro { font-size: .98em; }
/* atribución de una intro transcluida (párrafo del libro tomado de la intro del Pentateuco):
   toda la línea es enlace, en cursiva y tinta suave uniforme (sin el rojo de enlace) */
.texto.intro p.intro-fuente { text-indent: 0; margin-top: 1rem; font-size: .9em; }
.texto.intro p.intro-fuente a { color: var(--ink-soft); font-style: italic; }
/* En libros de capítulo único (páginas .chapter) la intro no lleva la línea superior de
   .chapter .texto: luce como en las páginas-índice; el separador lo pone el texto bíblico. */
.chapter .texto.intro { border-top: none; margin-top: 1.4rem; padding-top: 0; }

/* número de versículo: tamaño normal y en línea, para no confundirlo con las llamadas de nota */
.texto sup {
  color: var(--accent); font-weight: 700;
  font-size: 1em; vertical-align: baseline; line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-right: .25em;
}

/* llamada de nota: pastilla sin fondo, solo borde */
.nref, .nback {
  padding: .1em .2em; margin-right: .2em; margin-left: .2em;
  border: 1px solid var(--rule); border-radius: .3em;
  color: var(--nref);
}
/* En tema oscuro, borde de la pastilla un punto más marcado que --rule (cálido y sutil), sin
   llegar al dorado del número: resalta un poco más, pero no se iguala al número. */
:root[data-theme="dark"] .nref, :root[data-theme="dark"] .nback { border-color: #4a443a; }
/* Hover: el propio color del borde un punto más contrastado (oscurecido en claro, aclarado en
   oscuro), no el azul de nota. En oscuro debe superar en especificidad al override de reposo. */
.nref:hover, .nback:hover { border-color: color-mix(in srgb, var(--rule), black 18%); text-decoration: none; }
:root[data-theme="dark"] .nref:hover, :root[data-theme="dark"] .nback:hover {
  border-color: color-mix(in srgb, #4a443a, white 20%);
}

/* referencia cruzada (sr) */
a.sr { border-bottom: 1px dotted color-mix(in srgb, var(--link) 55%, transparent); }
a.sr:hover { text-decoration: none; border-bottom-style: solid; }

/* ——— comentario ——— */
.comentario { margin-top: 3rem; }
.comentario h2, .intro-title {
  text-align: center; font-variant: small-caps; letter-spacing: .2em;
  color: var(--accent); font-size: 1.1rem; font-weight: 700;
  border-top: 1px solid var(--rule); padding-top: 1.6rem;
}
.intro-title { margin: 2.4rem 0 0; font-size: 1.2rem; }
.ftn { font-size: .92em; line-height: 1.6; color: var(--ink); margin: .65rem 0; }
.ftn p { margin: .2rem 0; padding-left: 2.2em; text-indent: -2.2em; }
.ftn p + p { padding-left: 2.2em; text-indent: 0; }
.nback { margin-left: 0; }
/* número de versículo al inicio de una nota: rojo, como en el texto bíblico */
.vn { color: var(--accent); font-weight: 700; }
.nlink { font-family: system-ui, sans-serif; font-size: .85em; color: var(--link-note); }
.nlink::before { content: "["; }
.nlink::after { content: "]"; }

/* ——— láminas ilustradas (cabecera de capítulo) ——— */
.laminas {
  display: flex; flex-wrap: wrap; gap: 1.6rem; justify-content: center;
  margin: 1.4rem 0 2rem;
}
figure.lamina { margin: 0; max-width: min(340px, 100%); text-align: center; }
/* las apaisadas necesitan más ancho para no verse pequeñas (misma altura visual que las verticales) */
figure.lamina.wide { max-width: min(540px, 100%); }
/* lámina única (no en galería): algo más grande, 390px de lado corto */
.laminas.solo figure.lamina { max-width: min(390px, 100%); }
.laminas.solo figure.lamina.wide { max-width: min(487px, 100%); }
/* varias láminas juntas: igualan ALTURA para que la fila quede alineada aunque tengan proporciones
   o incluso orientaciones distintas (una hace de referencia; el ancho lo marca cada proporción).
   En móvil (angosto) apilan una por fila, así que se dejan a lo ancho. */
/* El `:not(.registro) >` acota estas reglas a la CABECERA. Sin él alcanzaban también al registro
   del pie, y con más peso que las suyas: la retícula menuda de allí quedaba anulada por una regla
   pensada para dos láminas de Doré a toda altura. La cabecera y el registro no comparten
   tratamiento —uno se contempla y el otro se consulta—, así que tampoco comparten reglas. */
@media (min-width: 560px) {
  :not(.registro) > .laminas:not(.solo) figure.lamina,
  :not(.registro) > .laminas:not(.solo) figure.lamina.wide { max-width: none; }
  :not(.registro) > .laminas:not(.solo) figure.lamina img { width: auto; height: 27rem; }
  /* Un capítulo puede reunir láminas de varios géneros a la vez —Doré, otro grabado, una pieza
     arqueológica, un mapa—. Cuantas más, más pequeñas: el encabezado no debe empujar el texto
     bíblico fuera de la pantalla, que es a lo que se viene.
     Pero DORÉ NO CEDE: es la ilustración propia de esta edición y las demás son añadidos, así que
     el espacio lo ceden ellas. Cuando comparte capítulo, Doré conserva su altura y el resto encoge. */
  :not(.registro) > .laminas:has(figure.lamina:nth-child(3)) figure.lamina:not([data-genero="dore"]) img { height: 22rem; }
  :not(.registro) > .laminas:has(figure.lamina:nth-child(5)) figure.lamina:not([data-genero="dore"]) img { height: 18rem; }
}
/* ——— galería de láminas (/laminas/): la fotografía arqueológica reunida en una página propia,
   con el aspecto de la hoja de revisión pero sin sus botones ni veredictos. Rejilla de celdas
   iguales; cada lámina se ajusta con `contain` y se abre entera en una pestaña. Ancho mayor que la
   columna de lectura: aquí sí es una galería, no un pie de página. */
.galeria { max-width: 74rem; margin: 0 auto; padding: 0 1.1rem 3rem; }
/* El título y la entradilla son los de una página del sitio, no los de una galería aparte: el <h1>
   lo pone `.doc h1` (centrado, en rojo) y la entradilla se centra bajo él en ancho de lectura. */
.galeria > h1 { margin: var(--doc-top) 0 .7rem; }
.galeria .gal-intro { color: var(--ink-soft); max-width: 46rem; margin: 0 auto 1rem; }
.galeria .gal-intro + .gal-intro { margin-bottom: 2rem; }
/* Buscador: filtra las fichas en vivo (biblia.js). Centrado y del ancho de la entradilla, para que
   se lea como parte del encabezamiento y no como un cromo de aplicación. */
.gal-busca { max-width: 46rem; margin: 0 auto 1.6rem; }
.gal-busca input {
  width: 100%; padding: .55rem .8rem; font: inherit; font-size: .95rem;
  color: inherit; background: var(--paper-raised);
  border: 1px solid var(--rule); border-radius: .35rem;
}
.gal-busca input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.gal-cuenta { margin: .5rem 0 0; font-size: .86rem; font-style: italic; color: var(--ink-soft); }
/* Índice de libros: una tira de enlaces menudos para saltar dentro de la página. */
.gal-indice {
  display: flex; flex-wrap: wrap; gap: .3rem .9rem; justify-content: center;
  max-width: 60rem; margin: 0 auto 2.4rem; padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--rule);
  font-size: .84rem; line-height: 1.5;
}
.gal-indice a { color: var(--ink-soft); text-decoration: none; }
.gal-indice a:hover { color: var(--link); text-decoration: underline; }
.galeria .rejilla[hidden], .galeria figure[hidden] { display: none; }
/* Cada libro abre su tramo en versalitas, como los demás encabezados de la obra. */
.galeria > h2 {
  margin: 2.6rem 0 1rem; text-align: center; font-variant: small-caps; letter-spacing: .14em;
  font-size: 1.1rem; font-weight: 700; color: var(--accent);
  border-bottom: 1px solid var(--rule); padding-bottom: .4rem;
}
/* Tres columnas fijas: con celdas anchas la lámina se ve, no se adivina. Al estrecharse la
   pantalla baja a dos y luego a una, antes de que la miniatura deje de decir nada. */
.galeria .rejilla { display: grid; gap: 1.1rem; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 62rem) { .galeria .rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 38rem) { .galeria .rejilla { grid-template-columns: 1fr; } }
.galeria figure {
  margin: 0; background: var(--paper-raised); border: 1px solid var(--rule);
  border-radius: .4rem; overflow: hidden; display: flex; flex-direction: column;
}
.galeria .lienzo { display: block; background: color-mix(in srgb, var(--ink) 4%, transparent); }
/* Alto del lienzo acorde a la celda ancha de tres columnas: con 14rem la lámina quedaba en una
   franja apaisada y las verticales, diminutas. */
.galeria .lienzo img { display: block; width: 100%; height: 18rem; object-fit: contain; }
.galeria figcaption { padding: 1rem; }
.galeria .gal-pie { margin: 0; font-size: 1rem; line-height: 1.4; }
.galeria .gal-meta { margin: .45rem 0 0; color: var(--ink-soft); font-size: .9rem; line-height: 1.5; }
.galeria .gal-meta a { color: inherit; }
.galeria .gal-meta a:hover { color: var(--link); }

/* ——— registro de imágenes (al pie del capítulo) ———
   La cabecera contempla; el registro se consulta. De ahí que aquí NO se herede su tratamiento —una
   fila de figuras grandes igualadas en altura— sino una retícula de celdas iguales, más menuda: un
   capítulo puede reunir ocho piezas de museo y ocho fotografías a 22 rem convierten el pie de
   página en una segunda portada, con la última lámina huérfana en su propia fila.

   Cada celda es un passepartout de tamaño fijo y la lámina se ajusta dentro con `contain`, nunca
   con `cover`: recortar una pieza de museo a un lienzo cuadrado la mutila, que es la misma razón
   por la que build.py respeta la proporción original al normalizar. Así las columnas quedan
   alineadas aunque convivan un obelisco vertical y un relieve apaisado, y quien quiera ver la
   lámina entera la abre en una pestaña. */
.registro { margin: 3rem 0 0; text-align: center; }
/* El registro venía rotulado, pero justo encima está la barra del capítulo, que ya centra el nombre
   del libro en versalitas: dos rótulos centrados seguidos repetían el gesto. Se abre ahora con un
   asterismo —el remate de imprenta para separar sin volver a titular—; el <h2> sigue en el DOM,
   oculto, porque `aria-labelledby` de la sección lo nombra. */
.registro::before {
  content: "⁂"; display: block; margin: .4rem 0 1.6rem;
  color: var(--ink-soft); font-size: 1.15rem; line-height: 1;
}
.registro .laminas {
  margin: 0; display: grid; gap: 1.5rem 1.4rem;
  /* Dos por fila como mucho: en la columna de lectura (46 rem) no caben tres de 18 rem, y no
     conviene que quepan. El registro respalda; si sus figuras compiten en tamaño con la cabecera
     de Doré, deja de ser un pie de página y pasa a ser una segunda galería. */
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  /* `justify-content` centra las COLUMNAS; `justify-items`, la figura DENTRO de su columna. Hacen
     falta las dos: las figuras llevan `max-width`, así que casi nunca llenan su celda —una sola
     lámina, con celda de 30rem y tope de 390px, se quedaba visiblemente escorada a la izquierda—. */
  justify-content: center; justify-items: center; align-items: start;
}
.registro figure.lamina,
.registro figure.lamina.wide { max-width: none; }
.registro figure.lamina img { width: 100%; height: 20rem; object-fit: contain; }
.registro figure.lamina figcaption { font-size: .95rem; line-height: 1.5; }
/* Pie extenso: el que no solo identifica la pieza, sino que la comenta —el material comparativo
   (Enuma Elish, Gilgamés) exige decir en qué se aparta del texto bíblico, no solo en qué se le
   parece—. Con doce líneas, el centrado del registro deja los renglones sin margen común y la
   lectura a tientas: lo que es un párrafo se compone como un párrafo. */
figure.lamina figcaption.extenso { text-align: left; text-wrap: pretty; }
/* Una sola lámina no forma retícula: se le da el aire que la fila no le quita. */
.registro .laminas.solo { grid-template-columns: minmax(0, 30rem); }
.registro .laminas.solo figure.lamina img { height: 23rem; }
/* el registro entero desaparece si no queda ninguna lámina visible (lo marca biblia.js) */
.registro[hidden] { display: none; }

/* la lámina se abre en pestaña nueva a su resolución completa */
figure.lamina a.lamina-open { display: block; cursor: pointer; }
figure.lamina img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--rule); border-radius: .3rem;
  background: #fff;                 /* el grabado es sobre blanco: fondo estable en ambos temas */
}
/* La fotografía no es tinta sobre papel: solo enseña fondo cuando el encuadre la deja con franjas
   a los lados —`contain` a altura fija en el registro—, y allí el blanco deslumbra sobre el tema
   oscuro. Que lo herede del tema; el grabado conserva su papel. */
figure.lamina[data-genero="arqueologia"] img { background: var(--paper-raised); }
figure.lamina figcaption {
  margin-top: .9rem; font-size: .86rem; font-style: italic;
  color: var(--ink-soft); line-height: 1.4;
}
figure.lamina figcaption a { color: inherit; }
/* géneros desactivados en Opciones. La clase se pone pronto en <html> desde el <head> para que no
   haya parpadeo; biblia.js oculta además el contenedor si no queda ninguna lámina visible.
   Los slugs son los del enum Generator.Genero: si se añade uno, añádase aquí su regla. */
html.sin-dore        figure.lamina[data-genero="dore"],
html.sin-grabado     figure.lamina[data-genero="grabado"],
html.sin-arqueologia figure.lamina[data-genero="arqueologia"] { display: none; }
.laminas[hidden] { display: none; }

/* panel de opciones: rótulo de grupo y casillas sangradas bajo él.
   Las opciones sueltas van separadas por filete, pero dentro del grupo ese filete rompería la
   agrupación y multiplicaría la altura: las casillas de género van juntas y sin regla. */
.opt-grupo {
  margin: .95rem 0 .35rem; padding-top: .85rem; border-top: 1px solid var(--rule);
  font-family: system-ui, sans-serif; font-size: .78rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-soft);
}
.opts-panel .opt.sub { padding-left: .9rem; font-size: .9rem; }
.opts-panel .opt.sub + .opt.sub { margin-top: .4rem; padding-top: 0; border-top: 0; }
/* el panel nunca debe rebasar la pantalla: si no cabe, se desplaza dentro de sí mismo */
.opts-panel { max-height: calc(100vh - var(--topbar-h) - 1.4rem); overflow-y: auto; }

/* separación superior al llegar por ancla (la barra sticky no debe tapar el destino) */
:target { scroll-margin-top: calc(var(--topbar-h) + .65rem); }
/* resaltado del bloque de destino: lo dispara el JS en cada navegación (reinicia la animación
   con un reflow), de modo que se ilumina siempre —también al repetir el mismo ancla—, cosa que
   :target no garantiza. */
.flash { animation: hl 1.44s linear; }
@keyframes hl { from { background: var(--hl); } to { background: transparent; } }
/* Enriquecimiento progresivo: sin JavaScript no hay quien reinicie .flash, así que caemos al
   resaltado nativo por :target (menos consistente al repetir el mismo ancla, pero el salto, el
   contenido y la señalización del destino siguen funcionando). Acotado a `scripting: none` para
   no interferir con la ruta JS cuando sí hay scripts. */
@media (scripting: none) {
  :target { animation: hl 1.44s linear; }
  .texto p:has(> a:target) { animation: hl 1.44s linear; }
}

/* ——— popover de nota ——— */
#nota-pop {
  position: absolute; z-index: 50; max-width: min(37rem, calc(100vw - 2rem));
  background: var(--paper-raised); color: var(--ink);
  border: 1px solid var(--rule); border-radius: .6rem;
  box-shadow: 0 6px 24px rgba(0,0,0,.18);
  padding: .8rem 1rem; font-size: 1.08rem; line-height: 1.6;
  max-height: 500px; overflow-y: auto; overscroll-behavior: contain;   /* tope 500px; el JS lo baja si el viewport es corto */
}
#nota-pop .pop-go {
  display: block; margin-top: .5rem; font-size: .88rem;
  color: var(--ink-soft); font-family: system-ui, sans-serif;
}
#nota-pop .nback { display: none; }

@media (max-width: 34rem) {
  .chapnav .cn-prev span, .chapnav .cn-next span { display: none; }
  .tb-wrap { gap: 1.1rem; justify-content: flex-start; }
  .chap-head { gap: .55rem; }
  .arrow { width: 1.9rem; height: 2.9rem; font-size: 1.4rem; }
  .banner { padding: 1.9rem 1rem 2.1rem; }
}

/* ——— página «Acerca» ——— */
.about section:not(.about-hero) { margin-top: 2.6rem; }
.about-hero {
  display: flex; gap: 2rem; align-items: center;
  margin: var(--doc-top) 0 .6rem;   /* el h1 va oculto: abre el hero */
}
.about-cover {
  flex: 0 0 auto; width: 15rem; height: auto; border-radius: .3rem;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .28);
  border: 1px solid var(--rule);
}
.about-lead { flex: 1 1 0; min-width: 0; }
.about-work {
  font-size: 1.9rem; font-weight: 700; color: var(--accent);
  line-height: 1.15; margin: 0;
}
.about-byline {
  font-style: italic; color: var(--ink-soft); line-height: 1.4;
  margin: .35rem 0 1rem;
}
.about-lead p { margin: .6rem 0; }
/* En «Acerca» los párrafos van en bloque (sin sangría), separados por espacio, como el hero. */
.about .texto p { text-indent: 0; margin: .7rem 0 0; }
.about-rev {
  font-variant: small-caps; letter-spacing: .12em; color: var(--ink-soft);
  margin-top: 1rem;
}

/* tarjetas de «dónde leerla» */
.about-links {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: .9rem; margin: 1.2rem 0 .6rem;
}
.about-card {
  display: flex; flex-direction: column; gap: .3rem;
  padding: 1rem 1.15rem; border-radius: .6rem;
  background: var(--chip-bg); border: 1px solid var(--rule);
  color: var(--ink);
}
.about-card:hover {
  text-decoration: none; border-color: var(--accent-soft);
  transform: translateY(-2px);
}
.about-card { transition: transform .12s ease, border-color .12s ease; }
.ac-title {
  color: var(--accent); font-weight: 700; font-size: 1.08rem;
}
.ac-title::after { content: " ↗"; font-size: .85em; color: var(--ink-soft); }
/* la flecha anuncia que se sale del sitio; una tarjeta interna no la lleva */
.about-card:not([target]) .ac-title::after { content: none; }
.ac-desc { color: var(--ink-soft); font-size: .92rem; line-height: 1.45; }
.about-note {
  color: var(--ink-soft); font-size: .88rem; font-style: italic;
  margin: .4rem 0 0;
}

/* ficha (lista de definición a dos columnas) */
.about-ficha {
  display: grid; grid-template-columns: max-content 1fr;
  gap: .35rem 1.2rem; margin: 1rem 0 0;
}
.about-ficha dt {
  font-variant: small-caps; letter-spacing: .06em; color: var(--ink-soft);
}
.about-ficha dd { margin: 0; color: var(--ink); }

@media (max-width: 34rem) {
  .about-hero { flex-direction: column; text-align: center; gap: 1.3rem; }
  .about-cover { width: 11rem; }
  .about-byline { margin-inline: auto; }
}


/* ——— página de error ——— */
/* El mismo aire bajo el banner con que abren Acerca, Láminas y Créditos. */
.error > h1 { margin-top: var(--doc-top); }


/* ——— créditos de las imágenes ——— */
/* Una tabla larga que se consulta, no se lee: tipo menor, filas alternas para seguir el renglón
   y la columna de licencia en versalitas, que es dato legal y no debe competir con el título. */
.creditos > h1 { margin-top: var(--doc-top); }
.creditos p { max-width: 46rem; margin-inline: auto; }
.cr-tabla {
  width: 100%; margin: 2.2rem 0 0;
  border-collapse: collapse; font-size: .92rem; line-height: 1.4;
}
.cr-tabla th, .cr-tabla td {
  text-align: left; padding: .45rem .7rem; border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.cr-tabla th {
  font-variant: small-caps; letter-spacing: .06em; font-weight: 600;
  color: var(--ink-soft); border-bottom-width: 2px;
}
.cr-tabla tbody tr:nth-child(even) { background: var(--chip-bg); }
.cr-tabla td:last-child { white-space: nowrap; color: var(--ink-soft); font-size: .86rem; }
.cr-anon { color: var(--ink-soft); font-style: italic; }

/* El pie del sitio va sobre negro: el rojo de los enlaces no se lee ahí. */
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: .15em; }

@media (max-width: 40rem) {
  /* En pantalla estrecha la tabla se desborda; que ruede ella y no la página entera. */
  .creditos { overflow-x: auto; }
  .cr-tabla { min-width: 34rem; }
}