/*
 * Cristianismo histórico: una mesa de estudio oscura con fichas de papel.
 * Letras: EB Garamond (texto y Reforma), Cinzel (patrística), Grenze Gotisch
 * (Edad Media), Bodoni Moda (Edad Moderna), Alegreya Sans (rótulos).
 */

:root {
  --mesa: #1E2A30;
  --papel: #F3EDDD;
  --papel-fuente: #EFE6CF;
  --tinta: #2A2522;
  --tinta-suave: #5C5248;
  --rojo: #A33A2E;
  --rojo-enlace: #8E2A20;
  --crema: #F3EDDD;
  --crema-suave: #D9D0BC;
  --gris-mesa: #A9A08D;
  --foco: #E9B44C;
  --serif: 'EB Garamond', Georgia, serif;
  --sans: 'Alegreya Sans', system-ui, sans-serif;
}

* { box-sizing: border-box; }
/* Hueco de la barra de desplazamiento reservado siempre: si no, las páginas cortas
   (sin barra) quedan unos píxeles desplazadas respecto a las largas. */
html { scrollbar-gutter: stable; }
[hidden] { display: none !important; }
body { margin: 0; background-color: var(--mesa); color: var(--crema); font-family: var(--sans); }
a { color: var(--crema); }
a:hover { color: #FFFFFF; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }

.pagina { max-width: 1200px; margin: 0 auto; padding: 36px 24px 56px; display: flex; flex-direction: column; gap: 26px; }
main { display: flex; flex-direction: column; gap: 30px; }

/* Cabecera en rejilla: el logo y el nombre a la izquierda, el menú a la derecha, y al pie, de
   margen a margen, la franja de los siglos, que hace de raya divisoria entre la cabecera y la página. */
.cabecera {
  display: grid; grid-template-columns: auto auto 1fr; align-items: end;
  grid-template-areas: "logo marca nav" "logo lema nav" "siglos siglos siglos";
}
.identidad, .nombre { display: contents; }
/* La raya de los siglos (y el trazo rojo de «HISTÓRICO», que la anuncia) se aviva al pasar por la franja: es un enlace. */
.cabecera { --raya-historico: #C8493A; }
.cabecera:has(.siglos ol:hover) { --raya-historico: #E2604C; }
.logo { grid-area: logo; align-self: start; margin: 4px 16px 0 0; flex: none; width: 84px; height: 84px; }
.marca { grid-area: marca; justify-self: start; }
.lema { grid-area: lema; align-self: start; }
/* Debajo de la raya cuelgan los rótulos de los siglos: de ahí el hueco inferior. */
.siglos { grid-area: siglos; margin-top: 28px; padding-bottom: 18px; }
/* Los enlaces del menú, en la misma línea de base que el lema (la caja del buscador, más alta, baja un poco más). */
.nav { grid-area: nav; justify-self: end; align-self: end; margin: 0 0 -12px 32px; }
@media (max-width: 1180px) {
  .cabecera { grid-template-columns: auto 1fr; grid-template-areas: "logo marca" "logo lema" "nav nav" "siglos siglos"; }
  .nav { justify-self: start; margin: 26px 0 0; }
}
@media (max-width: 640px) {
  .logo { width: 60px; height: 60px; margin-right: 12px; }
  .marca-1 { font-size: 36px; }
  .marca-2 { font-size: 16px; letter-spacing: 0.28em; }
  .cabecera { --trazo: 56px; }
  .lema { font-size: 15px; }
  .nav { margin-top: 22px; }
  .siglos { margin-top: 24px; }
}
/* El nombre, apilado: «Cristianismo» grande y debajo «HISTÓRICO» espaciado, con la raya roja de las fichas, que se desvanece: anuncia la de los siglos sin competir con ella. */
.marca { display: flex; flex-direction: column; gap: 4px; text-decoration: none; font-family: var(--serif); }
.marca-1 { font-weight: 600; font-size: 46px; line-height: 0.95; }
.marca-2 { display: flex; align-items: center; gap: 12px; font-weight: 500; font-size: 21px; line-height: 1; letter-spacing: 0.32em; text-transform: uppercase; color: #E9C9A0; }
.marca-2::after { content: ""; flex: none; width: var(--trazo, 96px); height: 2px; background: linear-gradient(to right, var(--raya-historico), transparent); }
.lema { margin: 6px 0 0; font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--crema-suave); }
/* Los siglos I–XXI sobre esa raya: una muesca por siglo, un punto en los que tienen notas, mayor
   cuantas más (lleva a ese siglo en la línea temporal), y rotulados solo el I y los múltiplos de
   cinco; los demás se rotulan al pasar o al enfocar. La raya va a 6px del borde de arriba y los
   rótulos cuelgan por debajo. Pasado el siglo XXI, la raya se desvanece: la historia sigue abierta. */
.siglos ol { position: relative; display: flex; margin: 0; padding: 0; list-style: none; background: linear-gradient(to right, var(--raya-historico) calc(100% * 41 / 42), transparent) 0 5px / 100% 2px no-repeat; }
/* Y al principio, un tope vertical: la historia tiene un comienzo firme y un final abierto. */
.siglos ol::before { content: ""; position: absolute; left: 0; top: 0; width: 2px; height: 12px; background-color: var(--raya-historico); }
.siglo-marca { position: relative; flex: 1; height: 12px; }
.siglo-marca > a { position: absolute; inset: 0; display: block; text-decoration: none; }
.siglo-marca .siglo-punto { position: absolute; left: 50%; top: 2px; width: 1px; height: 8px; background-color: var(--raya-historico); }
.siglo-marca.con-notas .siglo-punto { top: 3px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background-color: #E9C9A0; box-shadow: 0 0 0 2px var(--mesa); }
.siglo-marca.medio .siglo-punto { top: 2px; width: 8px; height: 8px; margin-left: -4px; }
.siglo-marca.mucho .siglo-punto { top: 0; width: 12px; height: 12px; margin-left: -6px; }
.siglo-rotulo { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); font-family: var(--serif); font-size: 12px; line-height: 1; letter-spacing: 0.06em; color: var(--gris-mesa); white-space: nowrap; visibility: hidden; }
.siglo-marca.rotulado .siglo-rotulo, .siglo-marca a:hover .siglo-rotulo, .siglo-marca a:focus-visible .siglo-rotulo { visibility: visible; }
.siglo-marca a:hover .siglo-rotulo, .siglo-marca a:focus-visible .siglo-rotulo { color: #E9C9A0; }
.siglo-marca a:hover .siglo-punto, .siglo-marca a:focus-visible .siglo-punto { background-color: var(--crema); }
.siglo-marca a:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
/* Dónde está el lector. En una nota, su siglo: el único punto rojo grande, con anillo crema y
   rótulo en negrita. En un tema, los siglos en que tiene notas: el mismo punto, en rojo. */
.siglo-marca.del-tema .siglo-punto { background-color: #C8493A; }
.siglo-marca.destacado .siglo-rotulo { visibility: visible; color: #E9C9A0; }
.siglo-marca.aqui .siglo-punto { top: -1px; width: 14px; height: 14px; margin-left: -7px; background-color: #C8493A; box-shadow: 0 0 0 2px #E9C9A0, 0 0 0 4px var(--mesa); }
.siglo-marca.aqui .siglo-rotulo { top: 17px; font-weight: 700; }
@media (max-width: 640px) {
  .siglo-marca.junto .siglo-rotulo { visibility: hidden; }
  /* Zona táctil más alta que el dibujo: los siglos son estrechos a este ancho. */
  .siglo-marca > a { inset: -14px 0 -18px; }
  .siglo-marca > a .siglo-punto { margin-top: 14px; }
  .siglo-marca > a .siglo-rotulo { margin-top: 14px; }
}
.nav { display: flex; gap: 22px; font-size: 17px; font-weight: 500; }
.nav { flex-wrap: wrap; align-items: center; }
.nav a { text-decoration: none; border-bottom: 1px solid rgba(243,237,221,0.35); padding-bottom: 2px; }

/* Buscador (cabecera y página de búsqueda) */
.buscador label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.buscador input { height: 44px; width: 220px; padding: 0 14px; border-radius: 3px; border: 1px solid rgba(243,237,221,0.35); background-color: rgba(0,0,0,0.22); color: var(--crema); font: inherit; font-size: 16px; }
.buscador input::placeholder { color: #A9A08D; }
.buscador-grande { display: flex; flex-wrap: wrap; gap: 12px; }
.buscador-grande input { flex: 1 1 320px; width: auto; font-size: 18px; }
.buscador-grande .boton { background: none; color: var(--crema); font: inherit; font-size: 16px; cursor: pointer; }
.resultados { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.resultado { padding: 16px 24px 18px; }
.resultado a { font-family: var(--serif); font-weight: 700; font-size: 22px; }
.resultado p { margin: 8px 0 0; font-family: var(--serif); font-size: 18px; line-height: 1.5; }
.resultado mark { background-color: #F1D98A; color: var(--tinta); padding: 0 2px; }
.resultado-fuente { background-color: var(--papel-fuente); }

/* Línea temporal */
.linea { display: flex; flex-direction: column; gap: 28px; border-left: 2px solid rgba(243,237,221,0.3); padding-left: 28px; margin-left: 8px; }
.siglo-nombre { position: relative; margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #C9BFA8; }
.siglo-nombre::before { content: ""; position: absolute; left: -36px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background-color: var(--rojo); }
.hitos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.hito { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; }
.hito-anio { min-width: 60px; font-weight: 700; font-size: 18px; color: #E07A6A; }
.hito-titulo { text-decoration: none; font-weight: 700; font-size: 24px; line-height: 1.2; border-bottom: 1px solid rgba(243,237,221,0.25); }
.hito-titulo.epoca-pat { font-family: 'Cinzel', serif; font-size: 20px; }
.hito-titulo.epoca-med { font-family: 'Grenze Gotisch', serif; }
.hito-titulo.epoca-ref { font-family: var(--serif); }
.hito-titulo.epoca-mod { font-family: 'Bodoni Moda', serif; }

/* Tu recorrido */
.recorrido { margin: 0; padding: 0 0 0 26px; color: var(--crema-suave); }
.recorrido li { padding: 3px 0; }
.recorrido a { text-decoration: none; color: var(--crema-suave); }
.recorrido a:hover { color: #FFFFFF; }
.recorrido [aria-current] { color: #FFFFFF; }

.intro { margin: 0; font-family: var(--serif); font-size: 21px; color: var(--crema-suave); }

/* Papel de ficha. La pauta azul va solo en los textos con altura de renglón fija
   (--renglon), para que cada raya caiga bajo un renglón y nunca cruce las letras. */
:root { --raya: rgba(64,104,150,0.18); }
/* La raya va 2px por debajo del final de cada renglón: en el hueco entre los rasgos que bajan
   (p, q, y) y los que suben del renglón siguiente. La imagen empieza un renglón más abajo para
   que no asome una raya encima del primero, y el relleno de abajo deja ver la del último. */
.nota .nota-texto, .ficha-nota .ficha-pista {
  padding-bottom: 3px;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 1px, var(--raya) 1px, var(--raya) 2px, transparent 2px, transparent var(--renglon));
  background-position: 0 var(--renglon); background-size: 100% calc(100% - var(--renglon)); background-repeat: no-repeat;
}
.papel {
  position: relative; color: var(--tinta); background-color: var(--papel);
  border-radius: 3px;
  box-shadow: 0 2px 3px rgba(0,0,0,0.35), 0 14px 30px rgba(0,0,0,0.32);
}
.papel a.enl { color: var(--rojo-enlace); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.papel a.enl:hover { color: #5E1A12; }
.pendiente { color: #6E655B; border-bottom: 1px dashed #8A8075; cursor: help; }
.num { font-weight: 700; color: var(--rojo); }
.columna-lateral .num { color: #E07A6A; }

/* Portada: el registro */
.registro { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 26px; }
.ficha-registro { padding: 18px 22px 20px; }
.ficha-registro:nth-child(3n+1) { transform: rotate(-1.5deg); }
.ficha-registro:nth-child(3n+2) { transform: rotate(1deg); }
.ficha-registro:nth-child(3n) { transform: rotate(-0.5deg); }
/* Concilios: el índice, una ficha corta por concilio en una sola columna, por fecha; sus
   notas, en la página de cada uno (/concilio/<clave>/). */
.concilios { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 26px; max-width: 920px; }
.concilios .ficha-registro:nth-child(n) { transform: none; }
.concilios .ficha-registro h2 { display: flex; align-items: baseline; gap: 14px; }
.concilio-anio { flex: none; font-family: var(--sans); font-size: 15px; font-weight: 700; letter-spacing: 0.06em; color: var(--rojo); }
.concilio-que { margin: 0 0 12px; font-family: var(--serif); font-style: italic; font-size: 18px; line-height: 1.4; }
.concilio-que p { margin: 0; }
.concilios .tema-datos { margin: 0; }
.concilios .tema-datos a { color: var(--tinta-suave); text-underline-offset: 3px; }
.intro p { margin: 0; }
/* Al llegar a una palabra desde la mesa (/registro/#clave), su ficha se levanta y las demás se apagan. */
.ficha-registro { scroll-margin-top: 32px; transition: opacity 200ms ease; }
.ficha-registro:target { transform: scale(1.04); z-index: 1; box-shadow: 0 0 0 3px var(--foco), 0 2px 3px rgba(0,0,0,0.35), 0 18px 36px rgba(0,0,0,0.45); }
:has(> .ficha-registro:target) > .ficha-registro:not(:target) { opacity: 0.5; }
:has(> .ficha-registro:target) > .ficha-registro:not(:target):hover { opacity: 1; }
.ficha-registro h2, .ficha-registro h3 { margin: 0 0 10px; padding-bottom: 8px; border-bottom: 2px solid var(--rojo); font-family: var(--serif); font-size: 28px; line-height: 1.05; }
.ficha-registro ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-family: var(--serif); font-size: 18px; line-height: 1.35; }

/* Nota */
.ruta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 16px; color: var(--crema-suave); }
.ruta a { text-decoration: none; border-bottom: 1px solid rgba(243,237,221,0.35); }
.dos-columnas { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.columna-principal { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.columna-lateral { flex: 1 1 300px; min-width: 260px; display: flex; flex-direction: column; gap: 26px; }

.nota, .ficha-fuente { padding: 26px 40px 30px; transform: rotate(-0.4deg); }
.nota-cabecera { display: flex; align-items: baseline; gap: 16px; border-bottom: 2px solid var(--rojo); padding-bottom: 12px; margin-bottom: 14px; }
.nota-cabecera .num { font-size: 20px; min-width: 44px; }
.nota h1, .ficha-fuente h1 { margin: 0; font-family: var(--serif); font-weight: 700; font-size: 32px; line-height: 1.12; }
.nota-texto { --renglon: 34px; font-family: var(--serif); font-size: 21px; line-height: var(--renglon); }
/* Párrafos sin hueco entre ellos (el hueco descuadraría la pauta): sangría, como en un libro. */
.nota-texto p { margin: 0; }
.nota-texto p + p { text-indent: 1.5em; }
.ficha-fuente .nota-texto p + p { text-indent: 0; margin-top: 12px; }
.nota-fuentes { margin: 22px 0 0; padding-top: 14px; border-top: 1px dashed #C9B98F; }
.nota-fuentes .etiqueta { margin: 0 0 8px; }
.nota-fuentes ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip { line-height: 1.25; padding-top: 6px; padding-bottom: 6px; }
.etiqueta { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-suave); }
.chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 3px; border: 1px solid #C9B98F; background-color: #EBE2CB; color: var(--tinta); font-size: 15px; text-decoration: none; }
.chip:hover { background-color: #E2D6B8; color: var(--tinta); }
/* Fuera del papel, discreto: está para quien lo busque, no es lo último que se lee de la nota. */
.nota-correccion { margin: -12px 0 0; text-align: right; font-size: 14px; }
.nota-correccion a { color: var(--gris-mesa); text-underline-offset: 3px; }
.nota-correccion a:hover { color: var(--crema); }

/* Formulario del buzón. Los campos van sobre el papel, así que el texto es tinta,
   no crema; el botón recupera el rojo de las fichas para que se vea. */
.formulario-buzon { display: flex; flex-direction: column; gap: 16px; margin: 18px 0 8px; }
.formulario-buzon .campo { display: flex; flex-direction: column; gap: 6px; }
.formulario-buzon label { font-family: var(--sans); font-size: 15px; font-weight: 700; color: var(--tinta); }
.formulario-buzon input[type="text"], .formulario-buzon input[type="email"],
.formulario-buzon select, .formulario-buzon textarea {
  width: 100%; padding: 10px 12px; border: 1px solid #C9B98F; border-radius: 3px;
  background-color: #FBF7EC; color: var(--tinta); font-family: var(--sans); font-size: 16px;
}
.formulario-buzon textarea { min-height: 190px; resize: vertical; font-family: var(--serif); font-size: 18px; line-height: 1.5; }
.formulario-buzon input:focus, .formulario-buzon select:focus, .formulario-buzon textarea:focus {
  outline: 2px solid var(--foco); outline-offset: 1px;
}
.formulario-buzon .ayuda { margin: 0; font-family: var(--sans); font-size: 14px; line-height: 1.4; color: var(--tinta-suave); }
.formulario-buzon .obligatorio { color: var(--rojo); }
.formulario-buzon .errorlist { margin: 0; padding: 0; list-style: none; font-family: var(--sans); font-size: 14px; color: var(--rojo-enlace); }
.formulario-buzon .errores { padding: 10px 14px; border-left: 3px solid var(--rojo); background-color: #F6E4DA; font-family: var(--sans); font-size: 15px; }
.formulario-buzon .campo-privacidad { gap: 4px; }
.formulario-buzon .campo-privacidad label { display: flex; align-items: flex-start; gap: 10px; font-weight: 500; font-size: 16px; }
.formulario-buzon .campo-privacidad input { margin-top: 3px; }
.formulario-buzon .boton { align-self: flex-start; background-color: var(--rojo); border-color: var(--rojo); color: var(--papel); font-weight: 700; cursor: pointer; }
.formulario-buzon .boton:hover { background-color: var(--rojo-enlace); color: #FFFFFF; }
.referencia { font-family: var(--sans); font-size: 0.85em; letter-spacing: 0.02em; white-space: nowrap; }
.formulario-buzon .trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ficha-fuente { background-color: var(--papel-fuente); }
.ficha-fuente .etiqueta { margin: 0 0 6px; }
.ficha-fuente h1 { margin-bottom: 12px; }

.anterior-siguiente { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.paso { display: flex; flex-direction: column; gap: 4px; padding: 10px 16px 12px; border-radius: 3px; border: 1px solid rgba(243,237,221,0.35); text-decoration: none; line-height: 1.3; color: var(--crema-suave); }
.paso:hover { background-color: rgba(243,237,221,0.08); color: #FFFFFF; }
.paso-siguiente { grid-column: 2; text-align: right; }
.paso-dir { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #C9BFA8; }
.paso .num { color: #E07A6A; }
.relaciones { display: flex; flex-direction: column; gap: 26px; margin-top: 10px; }
.relaciones .enlazan a { padding-left: 0; padding-right: 0; }
.relaciones .motivo { margin: 0 0 10px; padding-left: 14px; border-left: 2px solid rgba(224,122,106,0.5); font-size: 17px; }
.boton { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 3px; border: 1px solid rgba(243,237,221,0.45); text-decoration: none; font-size: 16px; font-weight: 500; }
.boton:hover { background-color: rgba(243,237,221,0.10); }

.titulo-col { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #C9BFA8; }
.arbol, .enlazan { list-style: none; margin: 0; padding: 0; }
.arbol a, .enlazan a { display: block; padding: 7px 10px; border-radius: 3px; text-decoration: none; color: var(--crema-suave); line-height: 1.3; }
.arbol a { padding-left: calc(10px + var(--nivel, 0) * 18px); }
.arbol a:hover, .enlazan a:hover { background-color: rgba(243,237,221,0.08); color: #FFFFFF; }
.arbol a[aria-current] { background-color: rgba(243,237,221,0.14); color: #FFFFFF; }
.enlazan li { color: var(--crema-suave); }
.motivo { margin: 0 10px 8px; font-family: var(--serif); font-style: italic; font-size: 15px; line-height: 1.4; color: var(--gris-mesa); }
.vacio { margin: 0; font-size: 14px; line-height: 1.5; color: var(--gris-mesa); }

/* Portada: la mesa (la monta mesa.js) */
.titulo-pagina { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 34px; }
/* Encima del título, qué clase de página es: un tema y una palabra del registro pueden llamarse igual. */
.antetitulo { margin: 0 0 4px; font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #E9C9A0; }
.mesa-cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.mesa-cabecera .intro { flex: 1 1 520px; }
/* El título de la portada para los buscadores y los lectores de pantalla: en su línea,
   discreto, sobre la frase de la mesa. */
.mesa-cabecera .mesa-titulo { flex: 1 1 100%; margin: 0 0 -6px; font-family: var(--serif); font-size: 15px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--crema); }
.mesa-acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.mesa-cabecera .boton { background: none; color: var(--crema); font: inherit; font-size: 16px; font-weight: 500; cursor: pointer; }
.mesa-fichas { list-style: none; margin: 0; padding: 0; position: relative; }
.hueco { position: absolute; }
/* Sin JavaScript (y hasta que mesa.js monta la mesa): la selección del HTML, en cuadrícula */
.mesa-fichas:not(.montada) { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 24px; }
.mesa-fichas:not(.montada) .ficha { min-height: 160px; }
.mesa-fichas:not(.montada) .ficha-tit { font-size: 21px; }
.ficha {
  position: relative; display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 18px 22px 20px;
  text-decoration: none; color: var(--tinta); background-color: var(--papel);
  border-radius: 3px;
  box-shadow: 0 2px 3px rgba(0,0,0,0.35), 0 12px 26px rgba(0,0,0,0.30);
  transform: rotate(var(--r, 0deg)); transition: transform 160ms ease, box-shadow 160ms ease;
}
.ficha:hover, .ficha:focus-visible { color: var(--tinta); transform: rotate(var(--r, 0deg)) translateY(-6px); box-shadow: 0 4px 6px rgba(0,0,0,0.35), 0 22px 40px rgba(0,0,0,0.38); }
.ficha-tit { border-bottom: 2px solid var(--rojo); padding-bottom: 8px; line-height: 1.05; font-weight: 700; }
/* Ficha de una nota: el número arriba y el título (una frase) algo menor que el de un tema.
   Si falta sitio, cede el comienzo del texto (la pista), nunca el título ni la fecha. */
.ficha-nota { gap: 8px; }
.ficha-num { flex: none; font-weight: 700; font-size: 15px; color: var(--rojo); line-height: 1; }
.ficha-nota .ficha-tit { flex: none; line-height: 1.12; }
.hueco-L .ficha-nota .ficha-tit { font-size: 23px; }
.hueco-M .ficha-nota .ficha-tit { font-size: 20px; }
.hueco-S .ficha-nota .ficha-tit { font-size: 18px; }
.hueco-L .ficha-nota .ficha-tit.largo { font-size: 19px; }
.hueco-M .ficha-nota .ficha-tit.largo { font-size: 17px; }
.hueco-S .ficha-nota .ficha-tit.largo { font-size: 16px; }
.ficha-nota.epoca-pat .ficha-tit { font-size: 0.82em; }
.ficha-nota .ficha-pista { flex: none; -webkit-line-clamp: var(--lineas, 2); }
.ficha-nota .ficha-dato { flex: none; }
.hueco-L .ficha-tit { font-size: 34px; }
.hueco-M .ficha-tit { font-size: 28px; }
.hueco-S .ficha-tit { font-size: 22px; }
.ficha-pista { --renglon: 26px; font-family: var(--serif); font-style: italic; font-size: 17px; line-height: var(--renglon); }
.hueco-S .ficha-pista { --renglon: 24px; font-size: 16px; }
.ficha-dato { margin-top: auto; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-suave); }
/* Ficha fijada (leída hace poco): una chincheta en el centro del borde de arriba.
   Clavada, no se levanta al pasar el ratón; solo se oscurece un poco la sombra. */
.chincheta-ficha { position: absolute; top: 2px; left: 50%; width: 30px; height: 30px; margin-left: -15px; }
.ficha.fijada:hover, .ficha.fijada:focus-visible { transform: rotate(var(--r, 0deg)); box-shadow: 0 2px 4px rgba(0,0,0,0.4), 0 14px 30px rgba(0,0,0,0.36); }
.leyenda .chincheta-ficha { position: static; width: 18px; height: 18px; margin: 0 6px 0 0; vertical-align: -3px; }

/* Letra según la época del debate */
.epoca-pat .ficha-tit, .tema.epoca-pat, .letra-pat { font-family: 'Cinzel', serif; }
.epoca-med .ficha-tit, .tema.epoca-med, .letra-med { font-family: 'Grenze Gotisch', serif; }
.epoca-ref .ficha-tit, .tema.epoca-ref, .letra-ref { font-family: var(--serif); }
.epoca-mod .ficha-tit, .tema.epoca-mod, .letra-mod { font-family: 'Bodoni Moda', serif; }
.epoca-neutra .ficha-tit, .tema.epoca-neutra { font-family: var(--serif); }  /* sin año en el título */
.ficha { overflow: hidden; }
.ficha-tit.largo { font-size: 0.78em; }
.hueco-L .ficha-tit.largo { font-size: 27px; }
.hueco-M .ficha-tit.largo { font-size: 22px; }
.hueco-S .ficha-tit.largo { font-size: 18px; }
.ficha-pista { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.epoca-pat .ficha-tit { font-size: 0.82em; }
.hueco-L .epoca-pat .ficha-tit { font-size: 28px; }
.hueco-M .epoca-pat .ficha-tit { font-size: 23px; }
.hueco-S .epoca-pat .ficha-tit { font-size: 18px; }

.mas-temas { display: flex; flex-direction: column; gap: 18px; border-top: 1px solid rgba(243,237,221,0.22); padding-top: 24px; }
.mas-temas h2 { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 28px; }
.mesa-textos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-auto-rows: minmax(74px, auto); grid-auto-flow: dense; gap: 6px 10px; }
.mesa-textos li { display: flex; align-items: center; justify-content: center; text-align: center; }
.mesa-textos li.doble { grid-column: span 2; }
.tema { position: relative; display: inline-block; padding: 6px 8px; text-decoration: none; font-weight: 700; line-height: 1.02; transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--r, 0deg)); transition: transform 160ms ease; }
.tema:hover, .tema:focus-visible { transform: translate(var(--x, 0), var(--y, 0)) scale(1.06); }
.tema.tam-1 { font-size: 18px; }
.tema.tam-2 { font-size: 23px; }
.tema.tam-3 { font-size: 32px; }
.tema.epoca-pat { font-size: 0.82em; }
.tema .dato { display: block; margin-top: 4px; font-family: var(--sans); font-weight: 500; font-size: 12px; letter-spacing: 0.04em; color: #C9BFA8; opacity: 0; transition: opacity 160ms ease; }
.tema:hover .dato, .tema:focus-visible .dato { opacity: 1; }
/* En «Más temas», la chincheta va delante de la palabra, a su tamaño. */
.tema .chincheta-ficha { position: static; display: inline-block; width: 0.8em; height: 0.8em; margin: 0 0.2em 0 0; vertical-align: -0.05em; }

.intro-pie { margin: 0; font-size: 16px; color: var(--crema-suave); }
.leyenda { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 26px; border-top: 1px solid rgba(243,237,221,0.22); padding-top: 20px; font-size: 15px; color: var(--crema-suave); }
.leyenda .letra-pat, .leyenda .letra-med, .leyenda .letra-ref, .leyenda .letra-mod { font-weight: 700; font-size: 19px; color: var(--crema); }
.leyenda .letra-pat { font-size: 16px; }

@media (prefers-reduced-motion: reduce) { .ficha, .tema, .tema .dato { transition: none; } }

@media (max-width: 820px) {
  .mesa-fichas { height: auto !important; display: flex; flex-direction: column; gap: 22px; }
  .hueco { position: static; width: auto !important; height: auto !important; min-height: 130px; }
  .ficha { transform: rotate(calc(var(--r, 0deg) * 0.4)); }
}

@media (max-width: 640px) {
  .mesa-textos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nota, .ficha-fuente { padding: 20px 20px 24px; transform: none; }
  .nota h1, .ficha-fuente h1 { font-size: 26px; }
  .nota-texto { --renglon: 30px; font-size: 19px; }
}

/* Temas: la lista y cada tema en el orden del fichero */
.tema-datos { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-suave); }
.tema-comienzo { margin: 0; font-family: var(--serif); font-size: 17px; line-height: 1.45; }
.ficha-registro h2 a, .ficha-registro h3 a { text-decoration: none; color: var(--tinta); }
.titulo-col a { color: inherit; }
.estructura { list-style: none; margin: 0; padding: 26px 34px 30px; display: flex; flex-direction: column; transform: rotate(-0.2deg); }
.estructura-nota { position: relative; margin-left: calc(var(--nivel, 0) * 28px); padding: 12px 0; border-top: 1px solid var(--raya); }
.estructura-nota:first-child { border-top: 0; }
.estructura-nota a { display: block; text-decoration: none; color: var(--tinta); font-family: var(--serif); font-size: 21px; font-weight: 600; line-height: 1.25; }
.estructura-nota a:hover .estructura-titulo { text-decoration: underline; text-decoration-color: var(--rojo); text-underline-offset: 3px; }
.estructura-nota .num { display: inline-block; width: 56px; font-size: 17px; }
.estructura-nota p { margin: 4px 0 0 56px; font-family: var(--serif); font-size: 17px; line-height: 1.45; color: var(--tinta-suave); }
/* En la página de una palabra del registro: los temas a los que pertenecen sus notas de entrada. */
.ver-tema { margin: 10px 0 0; font-size: 17px; color: var(--crema-suave); }
.ver-tema a { font-weight: 700; color: #E9C9A0; text-underline-offset: 4px; }
.fuentes-tema { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; font-family: var(--serif); font-size: 18px; color: var(--crema-suave); }
@media (max-width: 640px) {
  .estructura { padding: 18px 18px 22px; transform: none; }
  .estructura-nota { margin-left: calc(var(--nivel, 0) * 12px); }
  .estructura-nota p { margin-left: 0; }
}

/* Acerca de: el texto largo, sin la pauta de las notas */
.acerca { padding: 30px 40px 36px; }
.acerca-texto { font-family: var(--serif); font-size: 20px; line-height: 1.62; }
.acerca-texto h2 { margin: 30px 0 10px; padding-bottom: 6px; border-bottom: 1px solid #C9B98F; font-size: 25px; line-height: 1.15; }
.acerca-texto h2:first-child { margin-top: 0; }
.acerca-texto p { margin: 0 0 14px; }
.acerca-texto ul { margin: 0 0 16px; padding-left: 24px; }
.acerca-texto li { margin-bottom: 8px; }
.acerca-texto .num { font-size: 0.9em; }
.cifras { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; color: var(--crema-suave); }
.cifras li { display: grid; grid-template-columns: 3.2rem 1fr; align-items: baseline; gap: 10px; font-size: 16px; line-height: 1.3; }
.cifras strong { font-family: var(--serif); font-size: 27px; line-height: 1; color: #E9C9A0; }
@media (max-width: 640px) {
  .acerca { padding: 20px 20px 24px; }
  .acerca-texto { font-size: 19px; }
  .acerca-texto h2 { font-size: 23px; }
}

/* Bibliografía */
/* Temas por bloques (contenido/bloques.md) y el índice de letras de la bibliografía: una
   línea de enlaces arriba que lleva a cada bloque o letra. */
.indice-bloques, .indice-letras { display: flex; flex-wrap: wrap; gap: 8px 18px; font-family: var(--sans); font-size: 16px; }
.indice-letras { gap: 6px 14px; font-size: 18px; font-weight: 700; letter-spacing: 0.04em; }
.indice-bloques a, .indice-letras a { color: var(--crema); text-underline-offset: 4px; }
.bloque-temas { display: flex; flex-direction: column; gap: 18px; scroll-margin-top: 24px; }
.bloque-titulo { margin: 14px 0 0; font-family: var(--serif); font-size: 26px; font-weight: 500; color: #E9C9A0; }
.bibliografia li[id] { scroll-margin-top: 24px; }
.bibliografia { list-style: none; margin: 0; padding: 0; columns: 2 420px; column-gap: 40px; }
.bibliografia li { break-inside: avoid; padding: 10px 0; border-bottom: 1px solid rgba(243,237,221,0.12); font-family: var(--serif); font-size: 19px; line-height: 1.35; }
.bibliografia a { text-decoration: none; }
.bibliografia a:hover { text-decoration: underline; text-underline-offset: 3px; }
.citas { display: block; margin-top: 2px; font-family: var(--sans); font-size: 13px; color: var(--gris-mesa); }

/* Pie de todas las páginas */
.pie { display: flex; flex-direction: column; gap: 8px; margin-top: 30px; padding-top: 20px; border-top: 1px solid rgba(243,237,221,0.22); font-size: 15px; color: var(--gris-mesa); }
.pie p { margin: 0; }
.pie a { color: var(--crema-suave); }
.pie-marca { font-family: var(--serif); font-weight: 600; text-decoration: none; }

/* Móvil: buscador a todo lo ancho y pasos uno debajo de otro */
@media (max-width: 640px) {
  .nav { gap: 12px 18px; margin-top: 30px; }
  .buscador { flex: 1 1 100%; }
  .buscador input { width: 100%; }
  .anterior-siguiente { grid-template-columns: 1fr; }
  .paso-siguiente { grid-column: 1; }
}

/* «Saltar al contenido»: oculto hasta que se llega a él con el tabulador. */
.saltar {
  position: absolute; left: 16px; top: -80px; z-index: 20; padding: 10px 16px; border-radius: 3px;
  background-color: var(--papel); color: var(--tinta); font-weight: 700; text-decoration: none;
}
.saltar:focus { top: 12px; }
main:focus { outline: none; }

/* La línea con la dirección de la página: solo en papel. */
.pie-impresion { display: none; }

/* En papel: tinta sobre blanco, sin la mesa ni la navegación. Queda la ficha con su
   número, su título, su texto y sus fuentes, y al pie de dónde sale, para citarla. */
@media print {
  @page { margin: 18mm 16mm; }
  body { background: #FFFFFF !important; color: #000000; }
  .pagina { max-width: none; padding: 0; gap: 12pt; }
  .saltar, .cabecera, .pie, .ruta, .columna-lateral, .anterior-siguiente, .relaciones,
  .nota-correccion, .buscador, .mas-temas, .mesa, .mesa-cabecera { display: none !important; }
  .dos-columnas { display: block; }
  .papel, .estructura, .ficha-registro, .ficha-nota {
    background: none !important; box-shadow: none !important; transform: none !important;
    padding: 0 !important; color: #000000;
  }
  .nota .nota-texto, .ficha-nota .ficha-pista { background-image: none !important; }
  h1, h2, .titulo-pagina, .intro, .vacio { color: #000000; }
  a { color: #000000 !important; text-decoration: none; }
  .num { color: #000000 !important; }
  .chip { border: none; background: none; padding: 0; min-height: 0; font-size: 11pt; }
  .nota-fuentes ul { display: block; padding-left: 0; }
  .nota-fuentes li { margin: 2pt 0; list-style: none; }
  .nota-texto, .acerca-texto { font-size: 12pt; line-height: 1.5; }
  .pie-impresion {
    display: block; margin-top: 18pt; padding-top: 6pt; border-top: 0.5pt solid #000000;
    font-family: var(--sans); font-size: 9pt; color: #000000;
  }
}