/* Virgen de Medjugorje · Reina de la Paz
   Sistema de diseño común: «Piedra, cielo y vela».
   Un libro de peregrino con luz. De día: papel, cielo y la piedra rojiza del Podbrdo.
   De noche: vigilia, con oscuro cálido, oro de vela, estrellas y la ventana de la iglesia encendida.
   El color litúrgico (--lit) es la cinta del libro: lo fija tiempo.js con data-color en <html>;
   de noche, data-hora="noche".

   Esta hoja es la única que define tokens y componentes compartidos. Las hojas de cada sección
   usan estos nombres y no los redefinen. Guía viva: /estilo. */

/* ==========================================================================
   Tipografías, servidas desde el propio sitio (/fonts/)
   Decisión del 8 de octubre de 2026: nada se carga de servidores ajenos. Los archivos son los
   WOFF2 de cada familia, subconjuntos latin y latin-ext, con su licencia (SIL Open Font License)
   y su origen en /fonts/LICENCIAS.txt. La CSP de server.js solo admite font-src 'self'.
   - Cormorant Garamond (títulos) y Newsreader (texto) son variables: un archivo por estilo y
     subconjunto cubre todos los pesos. Se declaran los pesos que el sitio usa: 400 a 600 en
     redonda; 400 a 500 en la cursiva.
   - unicode-range reparte el trabajo: latin trae el español; latin-ext solo se descarga si la
     página tiene letras croatas (č, ć, đ, š, ž). Si los dos cubren un signo, gana el último
     declarado, que es latin.
   - font-display: swap muestra el texto enseguida con la familia de respaldo. La plantilla
     (contenido/plantilla/cabeza.html) precarga los tres archivos de la primera pantalla.
   - El nombre de cada archivo lleva su versión (v21, v26, v33) porque se sirven con caché de un
     año: si una familia se actualiza, el archivo nuevo entra con otro nombre.
   ========================================================================== */

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/cormorant-garamond-redonda-latin-ext-v21.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/cormorant-garamond-redonda-latin-v21.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url("/fonts/cormorant-garamond-cursiva-latin-ext-v21.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url("/fonts/cormorant-garamond-cursiva-latin-v21.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/newsreader-redonda-latin-ext-v26.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/newsreader-redonda-latin-v26.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url("/fonts/newsreader-cursiva-latin-ext-v26.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url("/fonts/newsreader-cursiva-latin-v26.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Carones (č, š, ž) en los títulos
   Cormorant Garamond compone mal esas tres minúsculas: el carón sale corrido a la izquierda
   («Križevac», «Rupčić», «Tišina»). Para esas tres letras, y solo para ellas, los títulos toman
   el dibujo de EB Garamond, otra Garamond de proporciones casi iguales (Newsreader, la familia
   del texto, se probó primero: es más ancha y más negra, y la letra se nota). unicode-range hace
   que el navegador use estos archivos únicamente para U+010D, U+0161 y U+017E; el resto de cada
   título, también c, s y z, sigue en Cormorant Garamond. Las mayúsculas Č, Š y Ž salen bien en
   Cormorant y no se tocan.
   - Los archivos son el corte normal (400) de EB Garamond, subconjunto latin-ext, servidos
     también desde /fonts/. Solo se descargan en las páginas con alguna de esas tres letras
     en un título.
   - font-weight: 400 600 declara que sirve para todos los pesos de título, para que el
     navegador no invente una negrita; el trazo de EB Garamond 400 queda entre el 500 y el 600
     de Cormorant.
   - size-adjust: 96% iguala la altura de la x de las dos familias.
   ========================================================================== */

@font-face {
  font-family: "Titulo Carones";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/eb-garamond-redonda-latin-ext-v33.woff2") format("woff2");
  unicode-range: U+010D, U+0161, U+017E;
  size-adjust: 96%;
}
@font-face {
  font-family: "Titulo Carones";
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/eb-garamond-cursiva-latin-ext-v33.woff2") format("woff2");
  unicode-range: U+010D, U+0161, U+017E;
  size-adjust: 96%;
}

/* ==========================================================================
   Tokens
   ========================================================================== */

:root {
  /* Día: papel, la estatua blanca, el azul de los rosarios y la piedra rojiza del Podbrdo */
  --fondo: #faf7f1;
  --superficie: #ffffff;
  --superficie-2: #f3efe6;
  --banda-cielo: #e7f0f7;
  --banda-piedra: #f4e9e0;
  --tinta: #1c2630;
  --tinta-2: #3a4753;
  --tinta-3: #5a6672;
  --linea: #ded9cd;
  --linea-fuerte: #b7bcc1;
  --borde-campo: #7d8994;
  --marca: #245f8f;
  --marca-hondo: #1a4a72;
  --marca-tinta: #ffffff;
  --enlace: #1a4a72;
  --cielo: #a9cde6;
  --piedra: #a8583a;
  --piedra-texto: #8a4429;
  --vela: #b07a26;
  --foco: #245f8f;
  --velo: rgb(250 247 241 / .92);
  --sombra: none;
  /* Lo que es oscuro siempre, de día y de noche: la franja y la capa «Haz silencio» */
  --noche-fija: #0a0806;
  --noche-fija-tinta: #efe6d6;
  /* La cinta del libro: el color del tiempo litúrgico (verde por omisión) */
  --lit: #4f6b3a;
  --lit-tinta: #ffffff;
  --lit-suave: color-mix(in srgb, var(--lit) 10%, var(--fondo));
  /* La franja litúrgica: de día, el color del tiempo tal cual; de noche baja su luz (más abajo) */
  --franja-fondo: var(--lit);
  --franja-tinta: var(--lit-tinta);

  --f-titulo: "Titulo Carones", "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --f-texto: "Newsreader", "Iowan Old Style", Georgia, serif;
  /* Mínimos de texto: --t-xs (14 px) para notas; --t-sm (15 px) para pies de foto, fuentes y créditos.
     Solo las etiquetas en versalitas, la franja litúrgica y el subtítulo de la marca van a 13 px (.8125rem). */
  --t-xs: .875rem; --t-sm: .9375rem; --t-base: 1.125rem; --t-md: 1.375rem; --t-lg: 1.75rem;
  --t-xl: clamp(2rem, 1.5rem + 2vw, 2.75rem);
  --t-2xl: clamp(2.5rem, 1.8rem + 3vw, 3.75rem);
  --t-3xl: clamp(3rem, 2rem + 4.5vw, 5.25rem);
  --t-cartel: clamp(3.25rem, 1.5rem + 7vw, 7rem);
  --t-lectura: clamp(1.3125rem, 1.15rem + .7vw, 1.625rem);
  --e-1: .25rem; --e-2: .5rem; --e-3: .75rem; --e-4: 1rem; --e-5: 1.5rem; --e-6: 2rem; --e-7: 3rem; --e-8: 4rem; --e-9: 6rem;
  --seccion: clamp(3rem, 8vh, 5.5rem);
  --margen: clamp(1rem, 4vw, 2.5rem);
  /* Un solo eje: la marca, el título de la página y el contenido empiezan en la misma x */
  --ancho: 1320px; --ancho-amplio: 1320px; --ancho-texto: 40rem; --ancho-lectura: 36rem;
  --alto-cabecera: 4rem;
  --radio: 6px; --radio-chico: 3px;
  --dur-rapida: 180ms; --dur: 280ms; --dur-tema: 1.2s; --curva: cubic-bezier(.2, .7, .2, 1);
  /* Alias heredados del boceto, solo por compatibilidad. No usarlos en código nuevo. */
  --bg: var(--fondo); --bg-hondo: var(--superficie-2); --papel: var(--superficie); --tierra: var(--piedra-texto);
  --titulo: var(--f-titulo); --serif: var(--f-texto); --texto: var(--ancho-texto);
  color-scheme: light;
}
@media (min-width: 1200px) { :root { --alto-cabecera: 4.5rem; } }
:root[data-color="morado"] { --lit: #5d3f73; }
:root[data-color="blanco"] { --lit: #80632a; }
:root[data-color="rojo"] { --lit: #962f27; }
:root[data-color="rosa"] { --lit: #9a4d67; }
:root[data-hora="noche"] {
  /* Noche: vigilia. Oscuro cálido, oro de vela. */
  --fondo: #14100c; --superficie: #1d1712; --superficie-2: #261e17;
  --banda-cielo: #1b1712; --banda-piedra: #241913;
  --tinta: #efe6d6; --tinta-2: #d2c7b5; --tinta-3: #a99d8b;
  --linea: #3a3027; --linea-fuerte: #56493c; --borde-campo: #857767;
  --marca: #9cc4e4; --marca-hondo: #bdd9ef; --marca-tinta: #14100c; --enlace: #a9cdea;
  --cielo: #2a4560; --piedra: #d38a68; --piedra-texto: #e2a384; --vela: #e6b566;
  --foco: #e6b566; --velo: rgb(20 16 12 / .92);
  --lit: #a3bf88; --lit-tinta: #14100c;
  /* De noche la franja no deslumbra: el color del tiempo al 70 % sobre el papel oscuro */
  --franja-fondo: color-mix(in srgb, var(--lit) 70%, var(--fondo));
  --franja-tinta: var(--lit-tinta);
  color-scheme: dark;
}
:root[data-hora="noche"][data-color="morado"] { --lit: #bfa3d8; }
:root[data-hora="noche"][data-color="blanco"] { --lit: #e3c383; }
/* El rojo es el más oscuro de los cinco: al 70 % el texto no llega a 4.5:1; al 78 % sí */
:root[data-hora="noche"][data-color="rojo"] { --lit: #e08678; --franja-fondo: color-mix(in srgb, var(--lit) 78%, var(--fondo)); }
:root[data-hora="noche"][data-color="rosa"] { --lit: #e6a9bb; }

/* ==========================================================================
   Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--alto-cabecera) + 1rem);
  font-variant-numeric: lining-nums;
  hyphens: manual;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background-color: var(--fondo);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: var(--t-base);
  font-weight: 400;
  line-height: 1.65;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
  transition: background-color var(--dur-tema) ease, color var(--dur-tema) ease;
}
body > main { flex: 1 0 auto; width: 100%; min-width: 0; }
body.sin-scroll { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4, h5, h6 { margin: 0; }
h1, h2, h3 {
  font-family: var(--f-titulo);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.01em;
  text-wrap: balance;
}
h3 { font-weight: 600; }
h4, h5, h6 { font-family: var(--f-texto); font-weight: 600; line-height: 1.3; }

p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { margin: 0 0 1em; }
strong, b { font-weight: 600; }
small { font-size: var(--t-sm); }
abbr[title] { text-decoration: underline dotted; text-underline-offset: .2em; }
time, .cifra { font-variant-numeric: lining-nums; }
hr { margin: var(--e-7) 0; border: 0; border-top: 1px solid var(--linea); }

a {
  color: var(--enlace);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  transition: color var(--dur-rapida) ease, text-decoration-color var(--dur-rapida) ease;
}
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
  border-radius: 2px;
}
main:focus, main:focus-visible { outline: none; }

::selection { background: color-mix(in srgb, var(--lit) 28%, transparent); color: inherit; }

[hidden] { display: none !important; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

code, kbd, samp, pre {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: max(.875em, .8125rem);
}
code, kbd {
  padding: .1em .35em;
  border-radius: var(--radio-chico);
  background-color: var(--superficie-2);
  overflow-wrap: anywhere;
}

/* ==========================================================================
   Estructura: envolturas, accesibilidad
   ========================================================================== */

.envoltura {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--margen);
}
.envoltura--ancha { max-width: var(--ancho-amplio); }
.envoltura--texto { max-width: calc(var(--ancho-texto) + 2 * var(--margen)); }
/* Composición B (lectura): una sola columna centrada de 36rem */
.envoltura--lectura { max-width: calc(var(--ancho-lectura) + 2 * var(--margen)); }

.solo-lector {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.saltar {
  position: fixed;
  top: var(--e-3);
  left: var(--e-3);
  z-index: 200;
  padding: var(--e-3) var(--e-5);
  border-radius: 999px;
  background: var(--tinta);
  color: var(--fondo);
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-300%);
}
.saltar:focus, .saltar:focus-visible { transform: none; outline-color: var(--foco); }

/* ==========================================================================
   Detalles litúrgicos: el punto que respira
   ========================================================================== */

.punto-lit {
  display: inline-block;
  flex: none;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--lit);
  transition: background-color var(--dur-tema) ease;
}
.punto-lit.vivo { animation: respira 8s ease-in-out infinite; }
@keyframes respira {
  0%, 100% { transform: scale(.7); opacity: .55; }
  50% { transform: scale(1.15); opacity: 1; }
}

/* ==========================================================================
   Etiqueta (antetítulo en versalitas, del color del tiempo)
   ========================================================================== */

.etiqueta {
  margin: 0 0 var(--e-3);
  font-family: var(--f-texto);
  font-size: .8125rem;
  font-weight: 600;
  font-style: normal;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lit);
  transition: color var(--dur-tema) ease;
}

/* ==========================================================================
   Marca (signo + nombre + subtítulo)
   El signo: la silueta de la estatua (velo, mano tendida, corona de estrellas) en su hornacina.
   ========================================================================== */

.marca {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  min-height: 2.75rem;
  color: var(--tinta);
  text-decoration: none;
}
.marca:hover { color: var(--tinta); }
.marca__signo { flex: none; width: 2rem; height: 2rem; }
.marca__fondo, .marca__disco { fill: var(--marca); transition: fill var(--dur-tema) ease; }
.marca__figura { fill: var(--marca-tinta); transition: fill var(--dur-tema) ease; }
.marca__estrellas { fill: #f3d48b; transition: fill var(--dur-tema) ease; }
.marca__rostro { fill: var(--marca); transition: fill var(--dur-tema) ease; }
:root[data-hora="noche"] .marca__fondo,
:root[data-hora="noche"] .marca__disco,
:root[data-hora="noche"] .marca__rostro { fill: var(--cielo); }
:root[data-hora="noche"] .marca__figura { fill: var(--tinta); }
:root[data-hora="noche"] .marca__estrellas { fill: var(--vela); }
.marca__texto { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.marca__nombre {
  font-family: var(--f-titulo);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.05;
  letter-spacing: 0;
  white-space: nowrap;
}
.marca__lema {
  display: none;
  font-family: var(--f-texto);
  font-weight: 500;
  font-size: .8125rem;
  line-height: 1;
  letter-spacing: .01em;
  color: var(--tinta-3);
  white-space: nowrap;
}
@media (min-width: 480px) {
  .marca__nombre { font-size: 1.3rem; }
  .marca__lema { display: block; }
}

/* ==========================================================================
   Franja litúrgica: la cinta del libro. Encima de la cabecera; no es pegajosa.
   ========================================================================== */

.franja-lit {
  position: relative;
  z-index: 41;
  background-color: var(--franja-fondo);
  color: var(--franja-tinta);
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .01em;
  transition: background-color var(--dur-tema) ease, color var(--dur-tema) ease;
}
.franja-lit__fila {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-5);
  height: 1.5rem;
}
.franja-lit p {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.franja-lit__hoy { flex: 0 1 auto; font-weight: 600; }
.franja-lit__nota { display: none; }
@media (min-width: 900px) {
  .franja-lit__fila { justify-content: space-between; height: 1.75rem; }
  .franja-lit__nota { display: block; flex: none; }
}
/* De 900 a 1023 px las dos frases apenas caben en una línea: se aprietan un poco */
@media (min-width: 900px) and (max-width: 1023.98px) {
  .franja-lit { letter-spacing: 0; }
  .franja-lit__fila { gap: var(--e-3); }
}

/* ==========================================================================
   Cabecera del sitio
   ========================================================================== */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--alto-cabecera);
  background-color: var(--velo);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 3px solid var(--lit);
  border-bottom: 1px solid transparent;
  transition: border-bottom-color var(--dur) ease, border-top-color var(--dur-tema) ease, background-color var(--dur-tema) ease;
}
.cabecera.con-borde, .cabecera.menu-abierto { border-bottom-color: var(--linea); }
.cabecera__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  height: 100%;
}

/* Menú en una sola fila. Desde 960 px se ve el grupo principal (Mensajes, Historia, Peregrinar,
   Orar); desde 1200 px, después de un filete, también el grupo menor.
   Hasta 1200 px el grupo menor vive en el panel, junto al botón «Menú». */
.menu { display: none; }
.menu__lista {
  /* El hueco crece con la ventana, pero la fila tiene tope (--ancho-amplio): pasado 1.125rem,
     los enlaces, la lupa y «Silencio» ya no cabrían en ella */
  --menu-hueco: clamp(.875rem, 1.9vw - .7rem, 1.125rem);
  display: flex;
  align-items: center;
  gap: var(--menu-hueco);
  margin: 0;
  padding: 0;
  list-style: none;
}
.menu__lista li { display: flex; align-items: center; }
.menu__lista a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-family: var(--f-texto);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1;
  color: var(--tinta);
  text-decoration: none;
  white-space: nowrap;
}
.menu__menor a { font-size: 1rem; font-weight: 400; color: var(--tinta-2); }
.menu__lista li:not(.menu__menor) + .menu__menor::before {
  content: "";
  flex: none;
  width: 1px;
  height: 1.25rem;
  margin-right: var(--menu-hueco);
  background-color: var(--linea-fuerte);
}
.menu__lista a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .5rem;
  height: 2px;
  background: var(--linea-fuerte);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-rapida) var(--curva), background-color var(--dur-tema) ease;
}
.menu__lista a:hover { color: var(--tinta); }
.menu__lista a:hover::after { transform: scaleX(1); }
.menu__lista a[aria-current]:not([aria-current="false"]) { color: var(--tinta); }
.menu__lista a[aria-current]:not([aria-current="false"])::after { background: var(--lit); transform: scaleX(1); }

.cabecera__acciones {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--e-2);
}

/* Lupa: lleva al buscador de todo el sitio (/buscar), que a su vez enlaza al de los mensajes (/mensajes/buscar). Se ve en todos los anchos: un círculo de 44 px con la lupa de línea. */
.cabecera__buscar {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid transparent;
  border-radius: 50%;
  color: var(--tinta);
  text-decoration: none;
  transition: border-color var(--dur-rapida) ease, background-color var(--dur-rapida) ease;
}
.cabecera__buscar:hover { border-color: var(--linea-fuerte); background-color: var(--superficie); color: var(--tinta); }
.cabecera__buscar:focus-visible { border-radius: 50%; }
.cabecera__buscar[aria-current]:not([aria-current="false"]) { border-color: var(--lit); }
.cabecera__lupa {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}
.cabecera__lupa > * { vector-effect: non-scaling-stroke; }

/* Rótulo de los dos botones que solo llevan dibujo (la lupa y el punto de silencio): sale debajo
   al pasar el cursor y al enfocar con el teclado. El texto es el aria-label del propio botón.
   Una página que todavía lleve title="" conserva el aviso del navegador y no dobla el rótulo. */
.cabecera__buscar::after,
.cabecera__silencio:not([title])::after {
  content: attr(aria-label);
  position: absolute;
  top: calc(100% + .5rem);
  left: 50%;
  z-index: 2;
  padding: .4rem .65rem;
  border-radius: var(--radio-chico);
  background-color: var(--tinta);
  color: var(--fondo);
  font-family: var(--f-texto);
  font-size: var(--t-xs);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -3px);
  transition: opacity var(--dur-rapida) ease, transform var(--dur-rapida) var(--curva), visibility 0s linear var(--dur-rapida);
}
.cabecera__buscar:focus-visible::after,
.cabecera__silencio:not([title]):focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}
@media (hover: hover) {
  .cabecera__buscar:hover::after,
  .cabecera__silencio:not([title]):hover::after {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition-delay: 0s;
  }
}

/* Botón «Haz silencio» de la cabecera: un círculo con el punto litúrgico que respira.
   Desde 1320 px, donde ya cabe, lleva escrito «Silencio» (más abajo). */
.cabecera__silencio {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--linea-fuerte);
  border-radius: 50%;
  background: transparent;
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: var(--t-sm);
  font-weight: 500;
  line-height: 1;
  transition: border-color var(--dur-rapida) ease, background-color var(--dur-rapida) ease;
}
.cabecera__silencio:hover { border-color: var(--borde-campo); background-color: var(--superficie); }
.cabecera__silencio:focus-visible { border-radius: 50%; }
.cabecera__silencio .punto-lit { width: .625rem; height: .625rem; }
.cabecera__silencio-texto { display: none; }
/* En teléfono no cabe junto a la lupa y al menú: «Haz silencio» está en el panel.
   De 960 a 1023 px, con el menú ya en la fila, tampoco cabe. */
@media (max-width: 599.98px), (min-width: 960px) and (max-width: 1023.98px) {
  .cabecera__silencio { display: none; }
}
@media (min-width: 1320px) {
  .cabecera__silencio:has(.cabecera__silencio-texto) {
    width: auto;
    padding: 0 1.05rem 0 .9rem;
    border-radius: 999px;
  }
  .cabecera__silencio:has(.cabecera__silencio-texto):focus-visible { border-radius: 999px; }
  .cabecera__silencio-texto { display: inline; }
  /* Con el rótulo a la vista, sobra el que sale al pasar el cursor */
  .cabecera__silencio:has(.cabecera__silencio-texto)::after { content: none; }
}

/* Botón del menú móvil: hamburguesa dibujada con CSS y la palabra «Menú» */
.cabecera__menu {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  min-height: 2.75rem;
  padding: 0 1rem 0 .875rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: 999px;
  background: transparent;
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: var(--t-sm);
  font-weight: 500;
  line-height: 1;
  transition: border-color var(--dur-rapida) ease, background-color var(--dur-rapida) ease;
}
.cabecera__menu:hover { border-color: var(--borde-campo); background-color: var(--superficie); }
.cabecera__menu:focus-visible { border-radius: 999px; }
.cabecera__menu [data-menu-texto] { display: inline-block; min-width: 3.1em; text-align: left; }
.cabecera__menu-icono {
  position: relative;
  display: inline-block;
  flex: none;
  width: 1.125rem;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transition: background-color var(--dur-rapida) ease;
}
.cabecera__menu-icono::before,
.cabecera__menu-icono::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transition: transform var(--dur) var(--curva);
}
.cabecera__menu-icono::before { top: -6px; }
.cabecera__menu-icono::after { top: 6px; }
.cabecera__menu[aria-expanded="true"] .cabecera__menu-icono { background: transparent; }
.cabecera__menu[aria-expanded="true"] .cabecera__menu-icono::before { transform: translateY(6px) rotate(45deg); }
.cabecera__menu[aria-expanded="true"] .cabecera__menu-icono::after { transform: translateY(-6px) rotate(-45deg); }

/* Teléfono (hasta 600 px): la marca en una línea, la lupa y el menú. El botón del menú es un
   círculo con las tres rayas; la palabra «Menú» (o «Cerrar») sigue en el botón para quien no ve. */
@media (max-width: 599.98px) {
  .cabecera__fila { gap: var(--e-2); }
  .cabecera .marca { flex: 0 1 auto; min-width: 0; }
  .cabecera__menu { justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0; gap: 0; }
  .cabecera__menu [data-menu-texto] {
    position: absolute;
    width: 1px;
    height: 1px;
    min-width: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
@media (max-width: 374.98px) {
  .cabecera .marca__nombre { font-size: 1.1rem; }
}
@media (max-width: 359.98px) {
  .cabecera__fila, .cabecera__acciones { gap: var(--e-1); }
  .marca { gap: .5rem; }
  .marca__signo { width: 1.75rem; height: 1.75rem; }
  .cabecera .marca__nombre { font-size: 1rem; }
  /* A 320 px los dos círculos se dibujan de 40 px; su zona táctil sigue siendo de 44 */
  .cabecera__buscar, .cabecera__menu { width: 2.5rem; height: 2.5rem; }
  .cabecera__menu { position: relative; min-height: 0; }
  .cabecera__buscar::before, .cabecera__menu::before { content: ""; position: absolute; inset: -2px; }
}
/* Si aun así no cabe (otra tipografía, letra más grande), el nombre se parte en dos líneas
   antes que empujar los botones fuera de la pantalla */
@media (max-width: 479.98px) {
  .cabecera .marca__nombre { white-space: normal; text-wrap: balance; }
}

@media (min-width: 960px) {
  .menu { display: flex; flex: 1 1 auto; justify-content: center; min-width: 0; }
}
/* De 960 a 1279 px la marca va sin subtítulo: con la lupa, la fila ya no lo admite */
@media (min-width: 960px) and (max-width: 1279.98px) {
  .cabecera__fila { gap: var(--e-3); }
  .cabecera .marca__lema { display: none; }
}
@media (min-width: 960px) and (max-width: 1199.98px) {
  .menu__lista { --menu-hueco: clamp(.75rem, 3vw - 1rem, 1.5rem); }
  .menu__lista .menu__menor { display: none; }
  .cabecera__menu { padding: 0 .875rem 0 .75rem; }
}
@media (min-width: 1200px) {
  .cabecera__menu { display: none; }
}

/* ==========================================================================
   Panel del menú móvil (fuera del <header>, para que el backdrop-filter no lo atrape).
   Siete filas de una línea: el nombre a la izquierda y la descripción a la derecha.
   comun.js fija --menu-arriba con el borde inferior de la cabecera al abrir.
   ========================================================================== */

.menu-movil {
  position: fixed;
  top: var(--menu-arriba, var(--alto-cabecera));
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 39;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-block: var(--e-2) var(--e-4);
  background-color: var(--fondo);
  opacity: 1;
  transform: none;
  transition: opacity var(--dur) var(--curva), transform var(--dur) var(--curva), background-color var(--dur-tema) ease;
}
@starting-style {
  .menu-movil { opacity: 0; transform: translateY(-8px); }
}
.menu-movil__dentro { max-width: 44rem; padding-bottom: env(safe-area-inset-bottom, 0); }
.menu-movil__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}
.menu-movil__lista a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
  padding: .625rem 0;
  border-bottom: 1px solid var(--linea);
  color: var(--tinta);
  text-decoration: none;
  white-space: nowrap;
}
.menu-movil__nombre {
  flex: none;
  font-family: var(--f-titulo);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
}
/* La descripción cabe casi siempre en el mismo renglón; si no (pantallas angostas), baja a un
   segundo renglón en vez de cortarse con puntos suspensivos. */
.menu-movil__desc {
  min-width: 0;
  font-size: .875rem;
  line-height: 1.2;
  color: var(--tinta-3);
  text-align: right;
  white-space: normal;
  text-wrap: balance;
}
.menu-movil__lista a:hover .menu-movil__nombre {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  text-decoration-color: var(--lit);
}
.menu-movil__lista a[aria-current]:not([aria-current="false"]) {
  padding-left: var(--e-3);
  border-left: 3px solid var(--lit);
}
.menu-movil__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
  margin-top: var(--e-4);
}
/* Con doble clase para ganarle a .boton, que se define más abajo */
.menu-movil__acciones .boton { padding: .5rem .95rem; font-size: var(--t-sm); }
.menu-movil .modo { margin-top: var(--e-3); }
@media (min-width: 1200px) {
  .menu-movil { display: none !important; }
}

/* ==========================================================================
   Selector de modo: Automático / Día / Noche
   ========================================================================== */

.modo {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .125rem;
  padding: .1875rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: 999px;
  background: var(--superficie);
  transition: background-color var(--dur-tema) ease, border-color var(--dur-tema) ease;
}
.modo button {
  min-height: 2.5rem;
  padding: 0 1rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--tinta-2);
  font-family: var(--f-texto);
  font-size: var(--t-sm);
  font-weight: 500;
  line-height: 1;
  transition: background-color var(--dur-rapida) ease, color var(--dur-rapida) ease;
}
.modo button:hover { color: var(--tinta); background: var(--superficie-2); }
.modo button:focus-visible { border-radius: 999px; }
.modo button[aria-pressed="true"] { background: var(--tinta); color: var(--fondo); }

/* ==========================================================================
   Pie del sitio
   Arriba, el horizonte: el Križevac con su cruz, la iglesia de Santiago y el Podbrdo con la estatua.
   De noche se encienden las estrellas y la ventana de la iglesia.
   Ronda 3: el dibujo tiene un viewBox ancho (2400 × 112: el suelo, dos colinas lejanas y estrellas
   a los lados), así la altura se queda en 110 px a cualquier ancho sin cortar la cruz ni las torres.
   Debajo, el mapa del sitio en seis columnas y una sola franja con los créditos, el día litúrgico
   y el selector de modo. Mide 480 px o menos en escritorio y 600 px o menos en celular.
   ========================================================================== */

.pie {
  padding-bottom: var(--e-5);
  background-color: var(--superficie-2);
  color: var(--tinta-2);
  font-size: var(--t-sm);
  transition: background-color var(--dur-tema) ease, color var(--dur-tema) ease;
}
.pie__horizonte {
  display: block;
  width: 100%;
  max-width: none;
  height: clamp(3.5rem, 15vw, 6.875rem);
  background-color: var(--fondo);
  transition: background-color var(--dur-tema) ease;
}
/* Una página que todavía lleve el dibujo anterior (viewBox de 1200 × 160) conserva su altura:
   con 110 px se le cortarían la cruz y las torres */
.pie__horizonte[viewBox="0 0 1200 160"] { height: max(4.5rem, 10.5vw); }
/* De día, como el esquema de lugares: línea de 1.5 px en --tinta-3 y mancha plana.
   Las dos colinas (Križevac y Podbrdo) llevan la mancha de piedra; la iglesia, la cruz y la
   estatua, el blanco del papel. De noche todo vuelve a ser silueta, bajo las estrellas. */
.pie__colina {
  fill: var(--banda-piedra);
  stroke: var(--tinta-3);
  stroke-width: 1.5;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: fill var(--dur-tema) ease, stroke var(--dur-tema) ease;
}
/* Las colinas lejanas, a los lados (solo se ven en pantallas anchas): más pálidas */
.pie__colina--lejos {
  fill: color-mix(in srgb, var(--banda-piedra) 50%, var(--fondo));
  stroke: var(--linea-fuerte);
}
.pie__siluetas, .pie__arboles {
  fill: var(--superficie);
  stroke: var(--tinta-3);
  stroke-width: 1.5;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: fill var(--dur-tema) ease, stroke var(--dur-tema) ease;
}
.pie__arboles { fill: var(--superficie-2); }
.pie__suelo {
  fill: var(--superficie-2);
  stroke: var(--tinta-3);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  transition: fill var(--dur-tema) ease, stroke var(--dur-tema) ease;
}
:root[data-hora="noche"] .pie__colina { fill: var(--banda-piedra); stroke: var(--linea-fuerte); }
:root[data-hora="noche"] .pie__colina--lejos { fill: color-mix(in srgb, var(--banda-piedra) 55%, var(--fondo)); stroke: var(--linea); }
:root[data-hora="noche"] .pie__siluetas,
:root[data-hora="noche"] .pie__arboles { fill: var(--linea-fuerte); stroke: var(--linea-fuerte); }
:root[data-hora="noche"] .pie__suelo { stroke: var(--linea-fuerte); }
.pie__estrellas, .pie__ventana {
  fill: var(--vela);
  opacity: 0;
  transition: opacity var(--dur-tema) ease, fill var(--dur-tema) ease;
}
:root[data-hora="noche"] .pie__estrellas,
:root[data-hora="noche"] .pie__ventana { opacity: 1; }

/* Una página que todavía lleva el pie anterior (sin horizonte) conserva su aire arriba */
.pie > .envoltura:first-child { padding-top: var(--e-5); }
.pie__arriba {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-5);
  padding-top: var(--e-5);
}
.pie__marca { max-width: 24rem; }
.marca--pie .marca__signo { width: 2.5rem; height: 2.5rem; }
.marca--pie .marca__nombre { font-size: 1.5rem; }
.marca--pie .marca__lema { display: block; font-size: var(--t-xs); }
.pie__lema {
  margin: var(--e-3) 0 0;
  font-family: var(--f-titulo);
  font-style: italic;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--tinta);
  text-wrap: balance;
}
.pie__mapa {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e-4) var(--e-5);
}
.pie__grupo { min-width: 0; }
.pie__titulo {
  margin: 0;
  font-family: var(--f-titulo);
  font-size: 1.3125rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0;
}
/* «Este sitio» no lleva enlace: su título es un <span> con la misma caja */
.pie__titulo a, .pie__titulo > span {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--tinta);
  text-decoration: none;
}
.pie__titulo a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  text-decoration-color: var(--lit);
}
.pie__titulo a[aria-current]:not([aria-current="false"]) {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .22em;
  text-decoration-color: var(--lit);
}
.pie__mapa ul, .pie__sub { margin: 0; padding: 0; list-style: none; }
.pie__sub a, .pie__mapa ul a {
  display: inline-block;
  padding-block: .2rem;
  color: var(--tinta-2);
  font-size: var(--t-sm);
  line-height: 1.3;
  text-decoration: none;
}
.pie__sub a:hover, .pie__mapa ul a:hover { color: var(--tinta); text-decoration: underline; text-decoration-thickness: 1px; }
.pie__sub a[aria-current]:not([aria-current="false"]),
.pie__mapa ul a[aria-current]:not([aria-current="false"]) {
  color: var(--tinta);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--lit);
}
/* Renglón de enlaces del pie anterior («Sobre este sitio», «Preguntas frecuentes»…). En la
   plantilla de la ronda 3 esos enlaces son el sexto grupo del mapa; esto queda para las páginas
   que todavía no se han sincronizado. */
.pie__enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--e-5);
  margin: var(--e-3) 0 0;
}
.pie__enlaces a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  color: var(--tinta-2);
  text-decoration-color: var(--linea-fuerte);
}
.pie__enlaces a:hover { color: var(--tinta); text-decoration-color: currentColor; text-decoration-thickness: 1px; }
.pie__enlaces a[aria-current]:not([aria-current="false"]) { color: var(--tinta); text-decoration-thickness: 2px; text-decoration-color: var(--lit); }

/* La franja de abajo: a la izquierda los créditos, de corrido; a la derecha el día litúrgico
   y el selector de modo en el mismo renglón, con su nota debajo */
.pie__abajo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-4);
  margin-top: var(--e-4);
  padding-top: var(--e-4);
  border-top: 1px solid var(--linea);
  transition: border-color var(--dur-tema) ease;
}
.pie__creditos { max-width: 46rem; color: var(--tinta-2); font-size: var(--t-sm); line-height: 1.45; }
.pie__creditos p { display: inline; margin: 0; }
.pie__ajustes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2) var(--e-4);
  min-width: 0;
}
.pie__hoy {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0;
  color: var(--tinta-2);
  line-height: 1.35;
}
.pie__nota { flex-basis: 100%; margin: 0; color: var(--tinta-3); font-size: var(--t-xs); line-height: 1.45; }
.pie .modo button { min-height: 2.25rem; }

/* Celular: sin sublistas ni nota; los cinco títulos en tres columnas, los enlaces de «Este sitio»
   en un renglón, el día litúrgico encima del selector y aire debajo (también el del borde
   inferior del teléfono). El pie entero mide 600 px o menos. */
@media (max-width: 719.98px) {
  .pie { padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); }
  .pie__sub, .pie__nota { display: none; }
  .pie__arriba { gap: var(--e-2); padding-top: var(--e-2); }
  .marca--pie { min-height: 2.5rem; }
  .marca--pie .marca__signo { width: 2rem; height: 2rem; }
  .marca--pie .marca__nombre { font-size: 1.3rem; }
  .marca--pie .marca__lema { display: none; }
  .pie__lema { margin-top: 0; font-size: 1.3125rem; }
  /* Los cinco títulos en tres columnas (dos filas) */
  .pie__mapa { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--e-3); }
  .pie__titulo { font-size: 1.1875rem; }
  .pie__titulo a { min-height: 2.375rem; }
  .pie__grupo--sitio { grid-column: 1 / -1; }
  .pie__grupo--sitio .pie__titulo {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .pie__grupo--sitio .pie__sub { display: flex; flex-wrap: wrap; gap: 0 var(--e-4); }
  .pie__grupo--sitio .pie__sub a {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    padding-block: 0;
    font-size: .875rem;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--linea-fuerte);
  }
  .pie__enlaces { margin-top: 0; gap: 0 var(--e-4); font-size: .875rem; }
  .pie__abajo { gap: var(--e-3); margin-top: var(--e-1); padding-top: var(--e-3); }
  .pie__creditos { line-height: 1.35; }
  .pie__ajustes { gap: var(--e-2) var(--e-3); }
  .pie__hoy { flex-basis: 100%; }
  .pie .modo button { min-height: 2rem; }
}
@media (min-width: 720px) {
  .pie__titulo a, .pie__titulo > span { min-height: 0; padding-block: .2rem; }
  .pie__titulo { margin-bottom: var(--e-1); }
}
@media (min-width: 900px) {
  /* Seis columnas del ancho de su texto, repartidas: ningún enlace se parte en dos renglones */
  .pie__mapa { grid-template-columns: repeat(6, auto); justify-content: space-between; gap: var(--e-5) var(--e-4); }
  .pie__abajo { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--e-7); }
  .pie__ajustes { justify-content: flex-end; max-width: 37rem; text-align: right; }
}
/* De 900 a 1279 px la marca y el lema comparten un renglón encima del mapa */
@media (min-width: 900px) and (max-width: 1279.98px) {
  .pie__marca { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-6); max-width: none; }
  .pie__lema { margin-top: 0; }
}
/* Desde 1280 px, la marca a la izquierda (tan ancha como su nombre) y el mapa a la derecha */
@media (min-width: 1280px) {
  .pie__arriba { grid-template-columns: fit-content(18.5rem) minmax(0, 1fr); gap: var(--e-7); }
}

/* ==========================================================================
   Capa «Haz silencio» (aspecto conservado del boceto; siempre oscura). La luz respira en 8 s.
   ========================================================================== */

.silencio {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--noche-fija);
  color: #d8c9b2;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.4s ease, visibility 0s linear 1.4s;
}
.silencio[data-abierto] { opacity: 1; visibility: visible; transition: opacity 1.4s ease; }
.silencio__luz {
  width: min(46vmin, 280px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 222, 160, .95) 0%, rgba(242, 176, 96, .5) 16%, rgba(205, 124, 62, .14) 42%, transparent 68%);
  animation: respira-luz 8s ease-in-out infinite;
  transition: opacity 3s ease;
}
@keyframes respira-luz {
  0%, 100% { transform: scale(.78); opacity: .5; }
  50% { transform: scale(1.08); opacity: 1; }
}
.silencio[data-estado="terminado"] .silencio__luz { animation-duration: 16s; }
.silencio__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 11vh;
  display: grid;
  justify-items: center;
  gap: 1.1rem;
  padding-inline: 1rem;
  text-align: center;
  transition: opacity 1.6s ease;
}
.silencio__panel p {
  margin: 0;
  font-family: var(--f-titulo);
  font-style: italic;
  font-weight: 500;
  font-size: 1.5rem;
  color: #cdbda5;
}
.silencio__minutos { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.silencio button {
  min-height: 2.75rem;
  font: inherit;
  color: #d8c9b2;
  background: transparent;
  border: 1px solid rgba(216, 201, 178, .28);
  border-radius: 999px;
  padding: .55rem 1.15rem;
  cursor: pointer;
  transition: border-color .3s, color .3s, opacity .6s;
}
.silencio button:hover,
.silencio button:focus-visible { border-color: rgba(230, 181, 102, .8); color: #f3e4c9; }
.silencio button:focus-visible { outline: 2px solid rgba(230, 181, 102, .9); outline-offset: 3px; }
.silencio .silencio__discreto { border-color: transparent; font-size: .9rem; color: rgba(216, 201, 178, .7); }
.silencio__elegir { display: grid; justify-items: center; gap: 1.1rem; }
.silencio__final { display: none; }
.silencio[data-estado="en-silencio"] { cursor: none; }
.silencio[data-estado="en-silencio"] .silencio__panel { opacity: 0; pointer-events: none; }
.silencio[data-estado="terminado"] .silencio__elegir { display: none; }
.silencio[data-estado="terminado"] .silencio__final {
  display: grid;
  justify-items: center;
  gap: 1.1rem;
  animation: aparece 2.5s ease 1.5s both;
}
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }
.silencio__salir {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  opacity: 0;
  pointer-events: none;
}
.silencio[data-mostrar] { cursor: default; }
.silencio[data-mostrar] .silencio__salir,
.silencio .silencio__salir:focus-visible { opacity: 1; pointer-events: auto; }

/* ==========================================================================
   Secciones y bandas de color
   ========================================================================== */

.seccion {
  padding-block: var(--seccion);
  transition: background-color var(--dur-tema) ease;
}
.seccion--cielo { background-color: var(--banda-cielo); }
.seccion--piedra { background-color: var(--banda-piedra); }
.seccion--superficie { background-color: var(--superficie-2); }
.seccion__cabeza { max-width: 44rem; margin-bottom: var(--e-6); }
.seccion__cabeza .etiqueta { margin-bottom: var(--e-3); }
.seccion__titulo {
  margin: 0 0 var(--e-4);
  font-family: var(--f-titulo);
  font-size: var(--t-xl);
  font-weight: 500;
  line-height: 1.1;
}
.seccion__titulo:last-child { margin-bottom: 0; }
.seccion__intro { max-width: var(--ancho-texto); color: var(--tinta-2); }
.seccion__intro:last-child { margin-bottom: 0; }

/* ==========================================================================
   Cabecera de página. Tres variantes con el mismo marcado:
   (sin modificador) tipográfica, a la izquierda;
   --lectura  centrada, de ancho --ancho-lectura (composición B);
   --foto     composición A: la foto a sangre, pegada al borde derecho y al superior,
              con el borde izquierdo fundido en el papel. En celular, arriba y a todo lo ancho.
   ========================================================================== */

.cabecera-pagina { padding-block: var(--e-6) var(--e-7); }
.cabecera-pagina .migas { margin-bottom: var(--e-5); }
.cabecera-pagina .etiqueta { margin-bottom: var(--e-3); }
.titulo-pagina {
  max-width: 22ch;
  margin: 0 0 var(--e-4);
  font-family: var(--f-titulo);
  font-size: var(--t-2xl);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.01em;
}
.titulo-pagina:last-child { margin-bottom: 0; }
.bajada {
  max-width: var(--ancho-texto);
  margin: 0;
  font-size: var(--t-md);
  line-height: 1.5;
  color: var(--tinta-2);
}
.cabecera-pagina .acciones { margin-top: var(--e-5); }
@media (min-width: 900px) {
  .cabecera-pagina { padding-block: var(--e-7); }
}

/* Sin foto, compacta (ronda 3). Solo para la cabecera sin modificador; --foto y --lectura no cambian.
   En celular y tableta: menos relleno vertical y una bajada un punto más chica. */
@media (max-width: 1099.98px) {
  .cabecera-pagina:where(:not(.cabecera-pagina--foto, .cabecera-pagina--lectura)) { padding-block: var(--e-5) 1.25rem; }
  .cabecera-pagina:not(.cabecera-pagina--foto, .cabecera-pagina--lectura) .migas { margin-bottom: var(--e-4); }
  .cabecera-pagina:not(.cabecera-pagina--foto, .cabecera-pagina--lectura) .etiqueta { margin-bottom: var(--e-2); }
  .cabecera-pagina:not(.cabecera-pagina--foto, .cabecera-pagina--lectura) .titulo-pagina { margin-bottom: var(--e-3); }
  .cabecera-pagina:not(.cabecera-pagina--foto, .cabecera-pagina--lectura) .titulo-pagina:last-child { margin-bottom: 0; }
  .cabecera-pagina:not(.cabecera-pagina--foto, .cabecera-pagina--lectura) .bajada { font-size: 1.25rem; line-height: 1.45; }
  .cabecera-pagina:not(.cabecera-pagina--foto, .cabecera-pagina--lectura) .actualizado { margin-top: var(--e-3); }
}
/* Desde 1100 px, dos columnas dentro de .envoltura: las migas a todo el ancho; a la izquierda,
   la etiqueta y el título; a la derecha, la bajada, la fecha de verificación y las acciones.
   - Si la izquierda es más alta (título de dos renglones), la derecha baja hasta la base del título.
   - Si la derecha es más alta (bajada larga), empieza a la altura de la etiqueta y el título se
     queda pegado a ella. En los dos casos cada columna va de corrido, sin huecos.
   Filas: migas · etiqueta · relleno (1fr, absorbe la diferencia) · fecha · acciones.
   Solo se aplica cuando .envoltura lleva nada más que esas piezas; con cualquier otra dentro,
   o con la clase .cabecera-pagina--una, la cabecera se queda en una columna. */
@media (min-width: 1100px) {
  .cabecera-pagina:where(:not(.cabecera-pagina--foto, .cabecera-pagina--lectura, .cabecera-pagina--una)) { padding-block: var(--e-5) 1.75rem; }
  .cabecera-pagina:not(.cabecera-pagina--foto, .cabecera-pagina--lectura, .cabecera-pagina--una):has(> .envoltura > :is(.bajada, .actualizado, .acciones)):not(:has(> .envoltura > :not(.migas, .etiqueta, .titulo-pagina, .bajada, .actualizado, .acciones))) > .envoltura {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-rows: auto auto 1fr auto auto;
    column-gap: clamp(2.5rem, 5vw, 5rem);
  }
  .cabecera-pagina:not(.cabecera-pagina--foto, .cabecera-pagina--lectura, .cabecera-pagina--una):has(> .envoltura > :is(.bajada, .actualizado, .acciones)):not(:has(> .envoltura > :not(.migas, .etiqueta, .titulo-pagina, .bajada, .actualizado, .acciones))) > .envoltura > .migas {
    grid-area: 1 / 1 / 2 / -1;
    margin-bottom: var(--e-4);
  }
  .cabecera-pagina:not(.cabecera-pagina--foto, .cabecera-pagina--lectura, .cabecera-pagina--una):has(> .envoltura > :is(.bajada, .actualizado, .acciones)):not(:has(> .envoltura > :not(.migas, .etiqueta, .titulo-pagina, .bajada, .actualizado, .acciones))) > .envoltura > .etiqueta {
    grid-area: 2 / 1 / 3 / 2;
    margin-bottom: .375rem;
  }
  .cabecera-pagina:not(.cabecera-pagina--foto, .cabecera-pagina--lectura, .cabecera-pagina--una):has(> .envoltura > :is(.bajada, .actualizado, .acciones)):not(:has(> .envoltura > :not(.migas, .etiqueta, .titulo-pagina, .bajada, .actualizado, .acciones))) > .envoltura > .titulo-pagina {
    grid-area: 3 / 1 / 6 / 2;
    align-self: start;
    max-width: none;
    margin: 0;
    font-size: clamp(2.375rem, 1.3rem + 1.5vw, 2.75rem);
  }
  .cabecera-pagina:not(.cabecera-pagina--foto, .cabecera-pagina--lectura, .cabecera-pagina--una):has(> .envoltura > :is(.bajada, .actualizado, .acciones)):not(:has(> .envoltura > :not(.migas, .etiqueta, .titulo-pagina, .bajada, .actualizado, .acciones))) > .envoltura > .bajada {
    grid-area: 2 / 2 / 4 / 3;
    align-self: end;
    max-width: none;
    font-size: 1.25rem;
    line-height: 1.5;
  }
  .cabecera-pagina:not(.cabecera-pagina--foto, .cabecera-pagina--lectura, .cabecera-pagina--una):has(> .envoltura > :is(.bajada, .actualizado, .acciones)):not(:has(> .envoltura > :not(.migas, .etiqueta, .titulo-pagina, .bajada, .actualizado, .acciones))) > .envoltura > .actualizado {
    grid-area: 4 / 2 / 5 / 3;
    margin-top: var(--e-2);
  }
  /* La línea de la fecha es más baja que la del título: 3 px la dejan en la misma base */
  .cabecera-pagina:not(.cabecera-pagina--foto, .cabecera-pagina--lectura, .cabecera-pagina--una):has(> .envoltura > :is(.bajada, .actualizado, .acciones)):not(:has(> .envoltura > :not(.migas, .etiqueta, .titulo-pagina, .bajada, .actualizado, .acciones))) > .envoltura > .actualizado:last-child {
    margin-bottom: .1875rem;
  }
  .cabecera-pagina:not(.cabecera-pagina--foto, .cabecera-pagina--lectura, .cabecera-pagina--una):has(> .envoltura > :is(.bajada, .actualizado, .acciones)):not(:has(> .envoltura > :not(.migas, .etiqueta, .titulo-pagina, .bajada, .actualizado, .acciones))) > .envoltura > .acciones {
    grid-area: 5 / 2 / 6 / 3;
    margin-top: var(--e-4);
  }
}

/* Lectura: centrada y estrecha; debajo, la cinta del libro */
.cabecera-pagina--lectura { padding-bottom: var(--e-6); }
.cabecera-pagina--lectura > .envoltura {
  max-width: calc(var(--ancho-lectura) + 2 * var(--margen));
  text-align: center;
}
.cabecera-pagina--lectura > .envoltura::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2px;
  margin: var(--e-6) auto 0;
  background-color: var(--lit);
  transition: background-color var(--dur-tema) ease;
}
.cabecera-pagina--lectura .migas ol { justify-content: center; }
.cabecera-pagina--lectura .titulo-pagina,
.cabecera-pagina--lectura .bajada { margin-inline: auto; }
.cabecera-pagina--lectura .acciones { justify-content: center; }

/* Con foto, en celular: la foto arriba, a todo lo ancho, con el borde inferior fundido */
.cabecera-pagina--foto { position: relative; padding-top: 0; }
.cabecera-pagina--foto > .envoltura { display: flex; flex-direction: column; }
.cabecera-pagina--foto .foto {
  position: relative;
  order: -1;
  margin: 0 calc(-1 * var(--margen)) var(--e-4);
}
.cabecera-pagina--foto .foto__img {
  width: 100%;
  height: 34vh;
  height: 34svh;
  max-height: 34svh;
  min-height: 11rem;
  border-radius: 0;
  object-fit: cover;
  object-position: 50% 30%;
  /* Color de respaldo mientras la foto carga: va en la imagen, no en la figura, para que
     se funda con la misma máscara y nunca se vea un hueco ni un rectángulo. */
  background-color: var(--superficie-2);
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent);
  mask-image: linear-gradient(to bottom, #000 58%, transparent);
}
/* El pie de foto. En celular va debajo de la imagen, no encima (ronda 3), alineado con el
   texto. En escritorio, una etiqueta con velo en la esquina inferior derecha de la foto. */
.cabecera-pagina--foto .foto__pie {
  margin: 0;
  padding: 0 var(--margen);
  color: var(--tinta-2);
  font-size: var(--t-sm);
  line-height: 1.3;
}
@media (min-width: 900px) {
  .cabecera-pagina--foto {
    --foto-ancho: clamp(22rem, 44vw, 46rem);
    --texto-max: calc(100% - var(--foto-ancho) + max(0px, (100vw - var(--ancho)) / 2) + var(--margen) - var(--e-6));
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: clamp(26rem, 62vh, 37rem);
    padding-block: var(--e-7);
    overflow: hidden;
    overflow: clip;
  }
  .cabecera-pagina--foto > .envoltura { display: block; }
  .cabecera-pagina--foto > .envoltura > :not(.foto) { max-width: var(--texto-max); }
  .cabecera-pagina--foto > .envoltura > .titulo-pagina { max-width: min(18ch, var(--texto-max)); }
  .cabecera-pagina--foto > .envoltura > .bajada { max-width: min(var(--ancho-texto), var(--texto-max)); }
  /* La foto llega hasta el borde visible de la página. La cabecera ocupa todo el ancho, así que
     basta con right: 0. Con «100% - 100vw» la foto y su pie se metían debajo de la barra de
     desplazamiento (15 px en Windows) y el pie quedaba pegado a la barra. */
  .cabecera-pagina--foto .foto {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--foto-ancho);
    margin: 0;
  }
  /* De día el fundido es corto (12 % del ancho) para que el cielo conserve su color;
     de noche se alarga al 32 % (ver «Noche», más abajo). */
  .cabecera-pagina--foto .foto__img {
    height: 100%;
    max-height: none;
    min-height: 0;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12%);
    mask-image: linear-gradient(to right, transparent, #000 12%);
  }
  .cabecera-pagina--foto .foto__pie {
    position: absolute;
    right: 0;
    bottom: 0;
    max-width: 84%;
    padding: .35rem var(--margen) .35rem .75rem;
    background-color: var(--velo);
    text-align: right;
    transition: background-color var(--dur-tema) ease;
  }
}

/* ==========================================================================
   Migas de pan
   ========================================================================== */

.migas { font-size: var(--t-sm); line-height: 1.5; color: var(--tinta-3); }
.migas ol {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.migas li { min-width: 0; }
.migas li + li::before {
  content: "/";
  content: "/" / "";
  margin-right: .5rem;
  color: var(--linea-fuerte);
}
.migas a {
  position: relative;
  color: var(--tinta-2);
  text-decoration-color: var(--linea-fuerte);
}
.migas a:hover { color: var(--tinta); text-decoration-color: currentColor; }
/* Zona táctil de 44 px sin cambiar el renglón */
.migas a::after { content: ""; position: absolute; inset: -.7rem -.3rem; }
.migas [aria-current="page"] { color: var(--tinta-3); }

/* ==========================================================================
   Barra de sección (justo después de la cabecera de página).
   En celular se desplaza en horizontal; comun.js lleva a la vista el enlace activo.
   ========================================================================== */

.subnav {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-block: 1px solid var(--linea);
  transition: border-color var(--dur-tema) ease;
}
.subnav::-webkit-scrollbar { display: none; }
.subnav__lista {
  display: flex;
  gap: var(--e-5);
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 var(--margen);
  list-style: none;
}
.subnav__lista li { flex: none; }
.subnav__lista li:last-child { padding-right: var(--margen); }
.subnav__lista a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  color: var(--tinta-2);
  font-size: var(--t-sm);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}
.subnav__lista a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  background-color: var(--lit);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-rapida) var(--curva), background-color var(--dur-tema) ease;
}
.subnav__lista a:hover { color: var(--tinta); }
.subnav__lista a:hover::after { transform: scaleX(1); opacity: .45; }
.subnav__lista a[aria-current]:not([aria-current="false"]) { color: var(--tinta); font-weight: 600; }
.subnav__lista a[aria-current]:not([aria-current="false"])::after { transform: scaleX(1); opacity: 1; }
.subnav__lista a:focus-visible { outline-offset: -3px; }
/* Bajo una cabecera de lectura (centrada), la barra también va centrada. Si no cabe, los
   márgenes automáticos se anulan y se desplaza desde el borde izquierdo, como siempre. */
.cabecera-pagina--lectura + .subnav .subnav__lista,
.subnav--centro .subnav__lista { width: max-content; max-width: none; margin-inline: auto; }
.cabecera-pagina--lectura + .subnav .subnav__lista li:last-child,
.subnav--centro .subnav__lista li:last-child { padding-right: 0; }
/* Cuando la barra no cabe, su borde derecho se funde para invitar a desplazarla */
.subnav[data-desborda]:not([data-fin]) {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
}

/* ==========================================================================
   Botones y enlaces con flecha
   ========================================================================== */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 2.75rem;
  padding: .625rem 1.375rem;
  border: 1px solid var(--marca);
  border-radius: 999px;
  background-color: var(--marca);
  color: var(--marca-tinta);
  font-family: var(--f-texto);
  font-size: var(--t-base);
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-rapida) ease, border-color var(--dur-rapida) ease, color var(--dur-rapida) ease;
}
.boton:hover { background-color: var(--marca-hondo); border-color: var(--marca-hondo); color: var(--marca-tinta); text-decoration: none; }
.boton:focus-visible { outline-offset: 3px; border-radius: 999px; }
.boton--secundario {
  background-color: transparent;
  border-color: var(--borde-campo);
  color: var(--tinta);
}
.boton--secundario:hover { background-color: var(--superficie); border-color: var(--tinta); color: var(--tinta); }
.boton--fantasma {
  background-color: transparent;
  border-color: transparent;
  color: var(--enlace);
}
.boton--fantasma:hover { background-color: color-mix(in srgb, var(--marca) 10%, transparent); border-color: transparent; color: var(--enlace); }
/* Claro: para fondos que son oscuros siempre (la franja «Haz silencio») */
.boton--claro {
  background-color: transparent;
  border-color: rgb(239 230 214 / .5);
  color: var(--noche-fija-tinta);
}
.boton--claro:hover { background-color: rgb(239 230 214 / .1); border-color: #e6b566; color: #fff8ea; }
.boton--claro:focus-visible { outline-color: #e6b566; }
.boton--chico { padding: .5rem 1.05rem; font-size: var(--t-sm); }
.boton .punto-lit { width: .625rem; height: .625rem; }
.acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3);
  margin-top: var(--e-5);
}

.enlace {
  display: inline-block;
  padding-block: .5rem;
  color: var(--enlace);
  font-weight: 500;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: .25em;
}
.enlace:hover { text-decoration-color: currentColor; text-decoration-thickness: 1px; }
.flecha { display: inline-block; transition: transform var(--dur-rapida) var(--curva); }
a:hover .flecha, button:hover .flecha { transform: translateX(3px); }

/* ==========================================================================
   Tarjeta: plana, con filete y sin sombra. Solo para objetos reales
   (un formulario). Para listas de enlaces, usa .lista-ed.
   ========================================================================== */

.tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background-color: var(--superficie);
  transition: border-color var(--dur-rapida) ease, background-color var(--dur-tema) ease;
}
.tarjeta:hover { border-color: var(--linea-fuerte); }
/* Las fotos nunca llevan radio */
.tarjeta:has(.tarjeta__foto) { border-radius: 0; }
.tarjeta__foto {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--superficie-2);
}
.tarjeta__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  transition: filter var(--dur-tema) ease;
}
.tarjeta--vertical .tarjeta__foto { aspect-ratio: 3 / 4; }
.tarjeta__cuerpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--e-2);
  padding: var(--e-5);
}
.tarjeta__cuerpo .etiqueta { margin: 0; }
.tarjeta__titulo {
  margin: 0;
  font-family: var(--f-titulo);
  font-size: var(--t-lg);
  font-weight: 600;
  line-height: 1.1;
}
.tarjeta__titulo a { color: var(--tinta); text-decoration: none; }
.tarjeta__titulo a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.tarjeta:hover .tarjeta__titulo a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .15em;
  text-decoration-color: var(--lit);
}
.tarjeta__titulo a:focus-visible { outline: none; }
.tarjeta__titulo a:focus-visible::after { outline: 2px solid var(--foco); outline-offset: -2px; }
.tarjeta__texto { margin: 0; color: var(--tinta-2); line-height: 1.5; }
.tarjeta__texto a, .tarjeta .encima { position: relative; z-index: 2; }

/* ==========================================================================
   Rejillas
   ========================================================================== */

.rejilla,
.rejilla--2,
.rejilla--3,
.rejilla--4 {
  display: grid;
  gap: var(--e-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.rejilla { grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.rejilla--2,
.rejilla--3 { grid-template-columns: minmax(0, 1fr); }
.rejilla--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 639.98px) {
  .rejilla--4 .tarjeta__cuerpo { padding: var(--e-3) var(--e-4) var(--e-4); }
  .rejilla--4 .tarjeta__titulo { font-size: var(--t-md); }
  .rejilla--4 .tarjeta__texto { font-size: var(--t-sm); }
}
@media (min-width: 640px) {
  .rejilla, .rejilla--2, .rejilla--3, .rejilla--4 { gap: var(--e-6); }
  .rejilla--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 760px) {
  .rejilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rejilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ==========================================================================
   Fotos: sin radio, sin marco. Encuadre con --arriba, --centro y --abajo.
   ========================================================================== */

.foto { margin: 0; min-width: 0; }
.foto__img {
  width: 100%;
  height: auto;
  border-radius: 0;
  background-color: var(--superficie-2);
  transition: filter var(--dur-tema) ease;
}
.foto__pie {
  margin-top: var(--e-2);
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--tinta-3);
  text-wrap: pretty;
}
/* Las fotos llevan su pie y nada más: no hay crédito de autor (decisión del 7 de octubre de 2026). */
.foto--retrato .foto__img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }
.foto--apaisada .foto__img { aspect-ratio: 3 / 2; object-fit: cover; }
.foto--sangre .foto__img { max-height: 85vh; object-fit: cover; }
.foto--sangre .foto__pie { max-width: var(--ancho); margin-inline: auto; padding-inline: var(--margen); }
.envoltura > .foto--sangre { margin-inline: calc(-1 * var(--margen)); }
/* Encuadre: qué parte de la foto se conserva cuando se recorta */
.foto--arriba .foto__img, .cabecera-pagina--foto .foto--arriba .foto__img { object-position: 50% 12%; }
.foto--centro .foto__img, .cabecera-pagina--foto .foto--centro .foto__img { object-position: 50% 50%; }
.foto--abajo .foto__img, .cabecera-pagina--foto .foto--abajo .foto__img { object-position: 50% 88%; }
/* Para fotos con lo importante en el borde izquierdo (podbrdo-noche: la estatua) */
.foto--izquierda .foto__img, .cabecera-pagina--foto .foto--izquierda .foto__img { object-position: 0% 100%; }

/* Banda fotográfica (composición D): foto horizontal a sangre, como respiro entre bloques */
/* La foto no se estira más allá de su archivo (el más ancho mide 1600 px): en pantallas más
   anchas queda centrada sobre una franja de --superficie-2 de su misma altura. La franja es el
   ::before de la figura, puesto en la misma celda que la imagen; así vale para cualquier altura
   que le dé la hoja de una sección y no la tocan ni el filtro ni la viñeta de la noche. */
.banda-foto {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
}
.banda-foto::before {
  content: "";
  grid-area: 1 / 1;
  background-color: var(--superficie-2);
  transition: background-color var(--dur-tema) ease;
}
.banda-foto__img {
  grid-area: 1 / 1;
  justify-self: center;
  width: 100%;
  max-width: 1600px;
  height: clamp(13rem, 40vw, 30rem);
  border-radius: 0;
  object-fit: cover;
  object-position: 50% 50%;
  background-color: var(--superficie-2);
  transition: filter var(--dur-tema) ease;
}
.banda-foto__pie {
  grid-area: 2 / 1;
  padding-top: var(--e-2);
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--tinta-3);
}
/* En una banda el recorte es muy apaisado (hasta 4.5:1): «arriba» conserva el borde superior
   de la foto, para no cortar la cabeza de la estatua */
.banda-foto.foto--arriba .banda-foto__img { object-position: 50% 0; }
.banda-foto.foto--abajo .banda-foto__img { object-position: 50% 88%; }

/* ==========================================================================
   Prosa
   ========================================================================== */

.prosa { max-width: var(--ancho-texto); }
.prosa > :first-child { margin-top: 0; }
/* Los títulos de «Fuentes» y de «En un minuto» conservan su tamaño de etiqueta dentro de la prosa */
.prosa h2:not(.etiqueta, .minuto__titulo, .fuentes *) {
  margin: 2.2em 0 .5em;
  font-family: var(--f-titulo);
  font-size: var(--t-xl);
  font-weight: 500;
  line-height: 1.1;
}
.prosa h3:not(.etiqueta, .fuentes *) {
  margin: 1.8em 0 .45em;
  font-family: var(--f-titulo);
  font-size: var(--t-lg);
  font-weight: 600;
  line-height: 1.15;
}
.prosa h4 { margin: 1.6em 0 .4em; font-size: var(--t-base); }
.prosa h2 + h3:not(.etiqueta, .fuentes *) { margin-top: .9em; }
/* El primer título de una prosa no deja hueco arriba */
.prosa > :is(h2, h3, h4):first-child:first-child { margin-top: 0; }
.prosa ul, .prosa ol { margin: 0 0 1em; padding-left: 1.2em; }
.prosa li + li { margin-top: .4em; }
.prosa li::marker { color: var(--lit); }
.prosa a { color: var(--enlace); }
.prosa .foto { margin-block: 2em; }
.prosa .cita { margin-block: 2em; }
.prosa .aviso { margin-block: 1.5em; }
.prosa .minuto { margin-block: 2em; }
.prosa hr { margin: 2.5em 0; border: 0; border-top: 1px solid var(--linea); }
.prosa dl { margin: 0 0 1em; }
.prosa dt { font-weight: 600; }
.prosa dd { margin: 0 0 .75em; }
.prosa > :last-child { margin-bottom: 0; }
/* En la columna de lectura, un poco más de aire entre renglones */
.envoltura--lectura .prosa, .prosa--lectura { max-width: var(--ancho-lectura); line-height: 1.7; }

/* ==========================================================================
   Índice de una página larga (con filetes; en escritorio, columna lateral con .con-indice)
   ========================================================================== */

.indice {
  margin-bottom: var(--e-7);
  padding-block: var(--e-4);
  border-block: 1px solid var(--linea);
  transition: border-color var(--dur-tema) ease;
}
.indice .etiqueta { margin-bottom: var(--e-2); }
.indice ol, .indice ul { margin: 0; padding: 0; list-style: none; }
.indice a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: .3rem 0;
  color: var(--tinta-2);
  font-size: var(--t-sm);
  line-height: 1.4;
  text-decoration: none;
}
.indice a:hover { color: var(--tinta); text-decoration: underline; text-decoration-thickness: 1px; }
.indice a[aria-current]:not([aria-current="false"]) { color: var(--tinta); font-weight: 600; }
@media (min-width: 1024px) {
  .con-indice {
    display: grid;
    grid-template-columns: 14rem minmax(0, var(--ancho-texto));
    gap: var(--e-8);
    align-items: start;
  }
  .con-indice > .indice {
    position: sticky;
    top: calc(var(--alto-cabecera) + 1.5rem);
    max-height: calc(100vh - var(--alto-cabecera) - 3rem);
    overflow-y: auto;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .con-indice > .indice ol,
  .con-indice > .indice ul { border-left: 1px solid var(--linea); }
  .con-indice > .indice a {
    min-height: 0;
    margin-left: -1px;
    padding: .4rem 0 .4rem var(--e-4);
    border-left: 2px solid transparent;
  }
  .con-indice > .indice a[aria-current]:not([aria-current="false"]) { border-left-color: var(--lit); font-weight: 500; }
}

/* ==========================================================================
   Índice editorial (composición C): filas con filetes de 1 px,
   fecha o número a la izquierda y flecha a la derecha. Sin tarjetas.
   ========================================================================== */

.lista-ed {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content max-content;
  column-gap: var(--e-4);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--linea);
  transition: border-color var(--dur-tema) ease;
}
.lista-ed__fila {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  border-bottom: 1px solid var(--linea);
  transition: border-color var(--dur-tema) ease;
}
.lista-ed__enlace {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: baseline;
  padding-block: var(--e-4);
  color: var(--tinta);
  text-decoration: none;
}
.lista-ed__marca {
  grid-column: 1;
  min-width: 2.25rem;
  font-family: var(--f-titulo);
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.15;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--lit);
  white-space: nowrap;
  transition: color var(--dur-tema) ease;
}
.lista-ed__cuerpo { grid-column: 2; display: grid; gap: .2rem; min-width: 0; }
.lista-ed__titulo {
  font-family: var(--f-titulo);
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.15;
  text-wrap: balance;
}
.lista-ed__desc { font-size: var(--t-sm); line-height: 1.45; color: var(--tinta-2); text-wrap: pretty; }
.lista-ed__meta {
  grid-column: 3;
  font-size: var(--t-sm);
  line-height: 1.3;
  color: var(--tinta-3);
  text-align: right;
  white-space: nowrap;
}
.lista-ed__enlace > .flecha { grid-column: 4; color: var(--tinta-3); }
a.lista-ed__enlace:hover .lista-ed__titulo {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .16em;
  text-decoration-color: var(--lit);
}
a.lista-ed__enlace:hover > .flecha { color: var(--lit); }
a.lista-ed__enlace:focus-visible { outline-offset: -2px; }
@media (max-width: 639.98px) {
  .lista-ed { grid-template-columns: max-content minmax(0, 1fr) max-content; column-gap: var(--e-3); }
  .lista-ed__enlace { padding-block: var(--e-3); row-gap: .15rem; }
  .lista-ed__meta { grid-column: 2; grid-row: 2; text-align: left; white-space: normal; }
  .lista-ed__enlace > .flecha { grid-column: 3; grid-row: 1; }
}
@supports not (grid-template-columns: subgrid) {
  .lista-ed { display: block; }
  .lista-ed__fila { display: block; }
  .lista-ed__enlace { grid-template-columns: 3.25rem minmax(0, 1fr) max-content max-content; column-gap: var(--e-4); }
}

/* ==========================================================================
   Cita
   ========================================================================== */

.cita {
  margin: var(--e-6) 0;
  padding-left: var(--e-5);
  border-left: 2px solid var(--lit);
  transition: border-color var(--dur-tema) ease;
}
.cita p {
  margin: 0 0 var(--e-3);
  font-family: var(--f-titulo);
  font-size: var(--t-lg);
  font-style: italic;
  font-weight: 500;
  line-height: 1.3;
  color: var(--tinta);
  text-wrap: balance;
}
.cita p:last-of-type { margin-bottom: var(--e-3); }
.cita__ref {
  font-family: var(--f-texto);
  font-size: var(--t-sm);
  font-style: normal;
  color: var(--tinta-3);
}
.cita--grande {
  max-width: 48rem;
  margin-inline: auto;
  padding-left: 0;
  border-left: 0;
  text-align: center;
}
.cita--grande p { font-size: var(--t-2xl); line-height: 1.1; letter-spacing: -.01em; }
/* A tamaño de cartel: una sola frase que llena la página */
.cita--cartel {
  max-width: 68rem;
  margin: var(--e-7) auto;
  padding-left: 0;
  border-left: 0;
  text-align: center;
}
.cita--cartel p {
  margin-bottom: var(--e-5);
  font-size: var(--t-cartel);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.015em;
}
.cita--cartel p:last-of-type { margin-bottom: var(--e-5); }
.cita--cartel .cita__ref {
  display: block;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lit);
  transition: color var(--dur-tema) ease;
}

/* ==========================================================================
   Avisos: un filete a la izquierda, sin caja
   ========================================================================== */

.aviso {
  max-width: var(--ancho-texto);
  margin: var(--e-5) 0;
  padding: var(--e-1) 0 var(--e-1) var(--e-4);
  border-left: 3px solid var(--marca);
  color: var(--tinta);
  font-size: var(--t-sm);
  line-height: 1.55;
  transition: border-color var(--dur-tema) ease;
}
.aviso p { margin: 0 0 .5em; }
.aviso > :last-child { margin-bottom: 0; }
.aviso strong { font-weight: 600; }
/* De piedra: «confirma antes de viajar» y otros datos que pueden cambiar */
.aviso--piedra { border-left-color: var(--piedra); }
.aviso--piedra strong { color: var(--piedra-texto); }

/* ==========================================================================
   En un minuto: el resumen de una página, con el filete del tiempo
   ========================================================================== */

.minuto {
  max-width: var(--ancho-texto);
  margin: var(--e-6) 0;
  padding: var(--e-1) 0 var(--e-1) var(--e-5);
  border-left: 2px solid var(--lit);
  transition: border-color var(--dur-tema) ease;
}
.minuto__titulo {
  margin: 0 0 var(--e-3);
  font-family: var(--f-texto);
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lit);
  transition: color var(--dur-tema) ease;
}
.minuto__lista { margin: 0; padding: 0; list-style: none; }
.minuto__lista li {
  padding-block: .55rem;
  border-top: 1px solid var(--linea);
  line-height: 1.5;
  color: var(--tinta);
}
.minuto__lista li:first-child { padding-top: 0; border-top: 0; }
.minuto__lista li:last-child { padding-bottom: 0; }

/* Fecha de verificación de los datos de una página */
.actualizado {
  margin: var(--e-5) 0 0;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--tinta-3);
}
.actualizado::before {
  content: "";
  display: inline-block;
  width: .4375rem;
  height: .4375rem;
  margin-right: .55rem;
  border-radius: 50%;
  background-color: var(--lit);
  vertical-align: .08em;
  transition: background-color var(--dur-tema) ease;
}

/* ==========================================================================
   Fuentes (al final de las páginas con datos)
   ========================================================================== */

.fuentes {
  max-width: var(--ancho-texto);
  margin-top: var(--e-8);
  padding-top: var(--e-5);
  border-top: 1px solid var(--linea);
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--tinta-2);
}
.fuentes .etiqueta { margin: 0 0 var(--e-3); }
.fuentes :is(h2, h3, h4):not(.etiqueta) {
  margin: 0 0 var(--e-3);
  font-family: var(--f-texto);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lit);
}
.fuentes ol, .fuentes ul { margin: 0; padding-left: 1.2em; }
.fuentes li + li { margin-top: .5em; }
.fuentes li::marker { color: var(--tinta-3); }
.fuentes a { color: var(--enlace); }

/* ==========================================================================
   Tabla (con su propio scroll horizontal). Filetes; sin caja.
   ========================================================================== */

.tabla-envoltura {
  max-width: 100%;
  margin: var(--e-5) 0;
  overflow-x: auto;
  border-top: 1px solid var(--tinta);
  border-bottom: 1px solid var(--linea);
  transition: border-color var(--dur-tema) ease;
}
.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
  line-height: 1.45;
  font-variant-numeric: lining-nums tabular-nums;
}
.tabla caption {
  padding: var(--e-3) 0;
  caption-side: top;
  text-align: left;
  font-weight: 600;
  color: var(--tinta);
}
.tabla th,
.tabla td {
  padding: .75rem 1.5rem .75rem 0;
  border-top: 1px solid var(--linea);
  text-align: left;
  vertical-align: top;
}
.tabla th:last-child, .tabla td:last-child { padding-right: 0; }
.tabla thead th {
  border-top: 0;
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-3);
  white-space: nowrap;
}
.tabla caption + thead th { border-top: 1px solid var(--linea); }
.tabla tbody th { font-weight: 600; color: var(--tinta); white-space: nowrap; }
.tabla td { min-width: 8rem; color: var(--tinta-2); }
/* Las celdas no parten palabras: si no caben, la tabla se desplaza dentro de su envoltura */
.tabla th, .tabla td { overflow-wrap: normal; }

/* ==========================================================================
   Acordeón (preguntas): filetes y un signo que gira
   ========================================================================== */

.acordeon { max-width: var(--ancho-texto); border-bottom: 1px solid var(--linea); }
.acordeon:not(.acordeon + .acordeon) { border-top: 1px solid var(--linea); }
.acordeon > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  min-height: 2.75rem;
  padding: var(--e-4) 0;
  font-family: var(--f-titulo);
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.25;
  color: var(--tinta);
  list-style: none;
  cursor: pointer;
}
.acordeon > summary::-webkit-details-marker { display: none; }
.acordeon > summary::after {
  content: "";
  flex: none;
  width: .6rem;
  height: .6rem;
  margin: 0 .35rem .3rem 0;
  border-right: 1.5px solid var(--lit);
  border-bottom: 1.5px solid var(--lit);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--curva), border-color var(--dur-tema) ease;
}
.acordeon[open] > summary::after { margin-bottom: -.2rem; transform: rotate(-135deg); }
.acordeon > summary:hover { color: var(--marca-hondo); }
.acordeon > div { padding: 0 0 var(--e-5); color: var(--tinta-2); }
.acordeon > div > :last-child { margin-bottom: 0; }
/* Donde el navegador lo permite, el contenido se despliega en 280 ms */
@supports (interpolate-size: allow-keywords) {
  .acordeon { interpolate-size: allow-keywords; }
  .acordeon::details-content {
    block-size: 0;
    overflow-y: clip;
    transition: block-size var(--dur) var(--curva), content-visibility var(--dur) allow-discrete;
  }
  .acordeon[open]::details-content { block-size: auto; }
}

/* ==========================================================================
   Paginación (anterior y siguiente): dos renglones entre filetes
   ========================================================================== */

.paginacion {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: var(--e-7);
  border-top: 1px solid var(--linea);
  transition: border-color var(--dur-tema) ease;
}
.paginacion a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .2rem;
  min-height: 2.75rem;
  padding: var(--e-4) 0;
  border-bottom: 1px solid var(--linea);
  color: var(--tinta);
  text-decoration: none;
  transition: border-color var(--dur-tema) ease;
}
.paginacion a .etiqueta { margin: 0; color: var(--tinta-3); }
.paginacion a > span:last-child {
  font-family: var(--f-titulo);
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.2;
}
.paginacion a:hover > span:last-child {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .16em;
  text-decoration-color: var(--lit);
}
.paginacion a:hover .etiqueta { color: var(--lit); }
.paginacion__anterior .etiqueta::before { content: "← "; content: "← " / ""; }
.paginacion__siguiente { text-align: right; }
.paginacion__siguiente .etiqueta::after { content: " →"; content: " →" / ""; }
@media (min-width: 640px) {
  .paginacion { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e-6); border-bottom: 1px solid var(--linea); }
  .paginacion a { border-bottom: 0; }
  .paginacion__siguiente { grid-column: 2; }
}

/* ==========================================================================
   Formularios
   ========================================================================== */

.campo { display: grid; gap: var(--e-2); margin-bottom: var(--e-5); }
.campo__etiqueta { font-weight: 500; color: var(--tinta); line-height: 1.4; }
.campo__ayuda { margin: 0; font-size: var(--t-sm); line-height: 1.5; color: var(--tinta-3); }
.campo input:not([type="checkbox"]):not([type="radio"]),
.campo textarea,
.campo select {
  width: 100%;
  min-height: 2.75rem;
  padding: .625rem .875rem;
  border: 1px solid var(--borde-campo);
  border-radius: var(--radio-chico);
  background-color: var(--superficie);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: var(--t-base);
  line-height: 1.4;
  transition: border-color var(--dur-rapida) ease, background-color var(--dur-tema) ease;
}
.campo textarea { min-height: 9rem; line-height: 1.55; resize: vertical; }
.campo input:hover, .campo textarea:hover, .campo select:hover { border-color: var(--tinta); }
.campo input:focus-visible,
.campo textarea:focus-visible,
.campo select:focus-visible { outline: 2px solid var(--foco); outline-offset: 1px; border-color: var(--foco); border-radius: var(--radio-chico); }
.campo ::placeholder { color: var(--tinta-3); opacity: 1; }
.campo input[type="checkbox"],
.campo input[type="radio"] { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--marca); }
.campo-trampa {
  position: absolute !important;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.formulario__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  margin-top: var(--e-5);
}
.formulario__pie p { margin: 0; font-size: var(--t-sm); color: var(--tinta-3); }

/* ==========================================================================
   Chips (filtros)
   ========================================================================== */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 2.75rem;
  padding: .375rem 1rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: 999px;
  background: transparent;
  color: var(--tinta-2);
  font-family: var(--f-texto);
  font-size: var(--t-sm);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-rapida) ease, border-color var(--dur-rapida) ease, color var(--dur-rapida) ease;
}
.chip:hover { border-color: var(--tinta); color: var(--tinta); }
.chip:focus-visible { border-radius: 999px; }
.chip[aria-pressed="true"],
.chip[aria-current]:not([aria-current="false"]) { background-color: var(--tinta); border-color: var(--tinta); color: var(--fondo); }
.chip__cuenta { color: inherit; opacity: .8; font-variant-numeric: lining-nums tabular-nums; }
/* En pantallas muy angostas, dos columnas parejas en vez de una fila que se quiebra a medias */
@media (max-width: 399.98px) {
  .chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chips > li { display: flex; min-width: 0; }
  .chip { flex: 1 1 auto; justify-content: center; min-width: 0; padding-inline: .625rem; text-align: center; }
}

/* ==========================================================================
   Bloque de mensaje (contrato de copia fiel)
   Nada aquí altera caracteres: sin text-transform, sin ::first-letter,
   sin comillas generadas, sin justificado. Cada párrafo respeta sus saltos de línea.
   ========================================================================== */

.mensaje { max-width: var(--ancho-lectura); }
.mensaje__cabeza { margin-bottom: var(--e-5); }
.mensaje__tipo { margin: 0 0 var(--e-2); }
.mensaje__fecha {
  margin: 0 0 var(--e-2);
  font-family: var(--f-titulo);
  font-size: var(--t-xl);
  font-weight: 500;
  line-height: 1.1;
  font-variant-numeric: lining-nums;
}
h1.mensaje__fecha { font-size: var(--t-2xl); line-height: 1.05; }
.mensaje__via { margin: 0; font-size: var(--t-sm); color: var(--tinta-2); }
.mensaje__via a { color: var(--enlace); }
.mensaje__texto {
  max-width: var(--ancho-lectura);
  font-family: var(--f-texto);
  font-size: var(--t-lectura);
  font-style: normal;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: normal;
  text-align: start;
  text-transform: none;
  white-space: pre-line;
  hyphens: manual;
  color: var(--tinta);
}
.mensaje__texto p { margin: 0 0 1em; white-space: pre-line; }
.mensaje__texto p:last-child { margin-bottom: 0; }
.mensaje__pie {
  max-width: var(--ancho-lectura);
  margin-top: var(--e-6);
  padding-top: var(--e-4);
  border-top: 1px solid var(--linea);
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--tinta-2);
}
.mensaje__pie p { margin: 0 0 .3rem; }
.mensaje__pie p:last-child { margin-bottom: 0; }
.mensaje__credito { font-size: 1rem; color: var(--tinta-2); }
.mensaje__fuente { font-size: var(--t-sm); color: var(--tinta-3); }
.mensaje__fuente a { color: var(--enlace); }

/* ==========================================================================
   Franja «Haz silencio»: siempre oscura, de día y de noche
   ========================================================================== */

.franja-silencio {
  padding-block: var(--seccion);
  /* De noche la página también es oscura: un filete arriba y abajo evita que la franja se funda
     con la banda vecina. De día el filete está, pero transparente, para que nada cambie de alto. */
  border-block: 1px solid transparent;
  background-color: var(--noche-fija);
  color: var(--noche-fija-tinta);
  text-align: center;
  transition: border-color var(--dur-tema) ease;
}
:root[data-hora="noche"] .franja-silencio { border-block-color: var(--linea-fuerte); }
.franja-silencio__dentro { display: grid; justify-items: center; gap: var(--e-3); }
.franja-silencio__luz {
  width: 4.5rem;
  height: 4.5rem;
  margin-bottom: var(--e-2);
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 222 160 / .95) 0%, rgb(242 176 96 / .5) 18%, rgb(205 124 62 / .14) 44%, transparent 70%);
  animation: respira 8s ease-in-out infinite;
}
.franja-silencio__titulo {
  margin: 0;
  font-family: var(--f-titulo);
  font-size: var(--t-xl);
  font-style: italic;
  font-weight: 500;
  line-height: 1.1;
  color: var(--noche-fija-tinta);
}
.franja-silencio__texto {
  max-width: 34rem;
  margin: 0 0 var(--e-3);
  color: rgb(239 230 214 / .82);
  line-height: 1.55;
}
.franja-silencio :focus-visible { outline-color: #e6b566; }

/* ==========================================================================
   Ilustración propia: la vela. Línea de 1.5 px y mancha plana.
   ========================================================================== */

.vela { flex: none; width: 1.5rem; height: 3rem; overflow: visible; color: var(--tinta-3); }
.vela__llama {
  fill: var(--vela);
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: llama 6s ease-in-out infinite;
  transition: fill var(--dur-tema) ease;
}
.vela__mecha { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.vela__cuerpo { fill: var(--banda-piedra); stroke: currentColor; stroke-width: 1.5; transition: fill var(--dur-tema) ease; }
@keyframes llama {
  0%, 100% { transform: scale(1, 1); opacity: .92; }
  35% { transform: scale(.94, 1.06); opacity: 1; }
  70% { transform: scale(1.04, .95); opacity: .86; }
}

/* ==========================================================================
   Alias heredados del boceto (estilo nuevo). No usarlos en código nuevo.
   ========================================================================== */

.mensaje-texto {
  max-width: var(--ancho-lectura);
  font-family: var(--f-texto);
  font-size: var(--t-lectura);
  font-style: normal;
  font-weight: 400;
  line-height: 1.7;
  text-align: start;
  text-transform: none;
  hyphens: manual;
}
.mensaje-texto p { margin: 0 0 1em; white-space: pre-line; }
.fuente {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  max-width: var(--ancho-lectura);
  margin-top: var(--e-6);
  padding-top: var(--e-4);
  border-top: 1px solid var(--linea);
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--tinta-2);
}
.fuente svg { flex: none; width: 1.5rem; height: 1.5rem; color: var(--marca); }
.fuente strong { font-weight: 600; color: var(--tinta); }

/* ==========================================================================
   Noche: las fotos bajan la luz y se viñetan; el foco pasa a ser de vela (token --foco)
   ========================================================================== */

:root[data-hora="noche"] .foto__img,
:root[data-hora="noche"] .banda-foto__img,
:root[data-hora="noche"] .tarjeta__foto img {
  filter: brightness(.84) saturate(.9);
  -webkit-mask-image: radial-gradient(120% 120% at 50% 50%, #000 52%, rgb(0 0 0 / .7) 100%);
  mask-image: radial-gradient(120% 120% at 50% 50%, #000 52%, rgb(0 0 0 / .7) 100%);
}
:root[data-hora="noche"] .cabecera-pagina--foto .foto__img {
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent), radial-gradient(120% 120% at 50% 50%, #000 52%, rgb(0 0 0 / .7) 100%);
  mask-image: linear-gradient(to bottom, #000 58%, transparent), radial-gradient(120% 120% at 50% 50%, #000 52%, rgb(0 0 0 / .7) 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
@media (min-width: 900px) {
  :root[data-hora="noche"] .cabecera-pagina--foto .foto__img {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 32%), radial-gradient(120% 120% at 50% 50%, #000 52%, rgb(0 0 0 / .7) 100%);
    mask-image: linear-gradient(to right, transparent, #000 32%), radial-gradient(120% 120% at 50% 50%, #000 52%, rgb(0 0 0 / .7) 100%);
  }
}

/* ==========================================================================
   Guía de estilo (/estilo, página interna): muestras de color, escala y marcos de demostración
   ========================================================================== */

.estilo-muestras {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr));
  gap: var(--e-5) var(--e-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.estilo-muestra { min-width: 0; scroll-margin-top: calc(var(--alto-cabecera) + 1.5rem); }
.estilo-muestra__color {
  display: block;
  height: 3.5rem;
  border: 1px solid var(--linea);
  transition: background-color var(--dur-tema) ease, border-color var(--dur-tema) ease;
}
.estilo-muestra__datos { display: grid; gap: .1rem; padding-top: var(--e-2); font-size: var(--t-sm); line-height: 1.4; }
.estilo-muestra__nombre { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .8125rem; font-weight: 600; color: var(--tinta); }
.estilo-muestra__valor { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .8125rem; color: var(--tinta-3); overflow-wrap: anywhere; }
.estilo-muestra__uso { color: var(--tinta-2); font-size: var(--t-xs); }
.estilo-c-fondo { background-color: var(--fondo); }
.estilo-c-superficie { background-color: var(--superficie); }
.estilo-c-superficie-2 { background-color: var(--superficie-2); }
.estilo-c-banda-cielo { background-color: var(--banda-cielo); }
.estilo-c-banda-piedra { background-color: var(--banda-piedra); }
.estilo-c-tinta { background-color: var(--tinta); }
.estilo-c-tinta-2 { background-color: var(--tinta-2); }
.estilo-c-tinta-3 { background-color: var(--tinta-3); }
.estilo-c-linea { background-color: var(--linea); }
.estilo-c-linea-fuerte { background-color: var(--linea-fuerte); }
.estilo-c-borde-campo { background-color: var(--borde-campo); }
.estilo-c-marca { background-color: var(--marca); }
.estilo-c-marca-hondo { background-color: var(--marca-hondo); }
.estilo-c-marca-tinta { background-color: var(--marca-tinta); }
.estilo-c-enlace { background-color: var(--enlace); }
.estilo-c-cielo { background-color: var(--cielo); }
.estilo-c-piedra { background-color: var(--piedra); }
.estilo-c-piedra-texto { background-color: var(--piedra-texto); }
.estilo-c-vela { background-color: var(--vela); }
.estilo-c-foco { background-color: var(--foco); }
.estilo-c-velo { background-color: var(--velo); }
.estilo-c-noche-fija { background-color: var(--noche-fija); }
.estilo-c-noche-fija-tinta { background-color: var(--noche-fija-tinta); }
.estilo-c-lit { background-color: var(--lit); }
.estilo-c-lit-tinta { background-color: var(--lit-tinta); }
.estilo-c-lit-suave { background-color: var(--lit-suave); }
/* Los cinco colores litúrgicos, fijos (de día y de noche), para verlos juntos */
.estilo-lit-verde { background-color: #4f6b3a; }
.estilo-lit-morado { background-color: #5d3f73; }
.estilo-lit-blanco { background-color: #80632a; }
.estilo-lit-rojo { background-color: #962f27; }
.estilo-lit-rosa { background-color: #9a4d67; }
:root[data-hora="noche"] .estilo-lit-verde { background-color: #a3bf88; }
:root[data-hora="noche"] .estilo-lit-morado { background-color: #bfa3d8; }
:root[data-hora="noche"] .estilo-lit-blanco { background-color: #e3c383; }
:root[data-hora="noche"] .estilo-lit-rojo { background-color: #e08678; }
:root[data-hora="noche"] .estilo-lit-rosa { background-color: #e6a9bb; }

.estilo-escala { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--linea); }
.estilo-escala li { display: grid; gap: var(--e-1); padding-block: var(--e-4); border-bottom: 1px solid var(--linea); min-width: 0; }
.estilo-escala__meta { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .8125rem; color: var(--tinta-3); }
.estilo-escala__muestra { margin: 0; color: var(--tinta); overflow-wrap: anywhere; }
.estilo-t-cartel, .estilo-t-3xl, .estilo-t-2xl, .estilo-t-xl { font-family: var(--f-titulo); font-weight: 500; line-height: 1.05; letter-spacing: -.01em; }
.estilo-t-lg { font-family: var(--f-titulo); font-weight: 600; line-height: 1.15; }
.estilo-t-cartel { font-size: var(--t-cartel); font-style: italic; font-weight: 400; }
.estilo-t-3xl { font-size: var(--t-3xl); }
.estilo-t-2xl { font-size: var(--t-2xl); }
.estilo-t-xl { font-size: var(--t-xl); }
.estilo-t-lg { font-size: var(--t-lg); }
.estilo-t-lectura { font-size: var(--t-lectura); line-height: 1.7; }
.estilo-t-md { font-size: var(--t-md); line-height: 1.5; }
.estilo-t-base { font-size: var(--t-base); }
.estilo-t-sm { font-size: var(--t-sm); }
.estilo-t-xs { font-size: var(--t-xs); }

.estilo-demo { display: grid; gap: var(--e-7); min-width: 0; }
.estilo-demo > * { min-width: 0; }
.estilo-pieza { min-width: 0; scroll-margin-top: calc(var(--alto-cabecera) + 4rem); }
.estilo-pieza__nombre {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem var(--e-3);
  margin: 0 0 var(--e-4);
  padding-bottom: var(--e-2);
  border-bottom: 1px solid var(--linea);
  font-family: var(--f-texto);
  font-size: var(--t-base);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
}
.estilo-pieza__nombre code { font-size: .8125rem; font-weight: 400; background: none; padding: 0; color: var(--tinta-3); }
.estilo-fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-5); }
.estilo-nota { margin: var(--e-3) 0 0; max-width: var(--ancho-texto); font-size: var(--t-sm); line-height: 1.5; color: var(--tinta-3); }
.estilo-marco {
  overflow: hidden;
  border: 1px dashed var(--linea-fuerte);
  background-color: var(--fondo);
  transition: background-color var(--dur-tema) ease, border-color var(--dur-tema) ease;
}
.estilo-marco > .cabecera-pagina > .envoltura { padding-inline: var(--e-5); }
.estilo-marco--relleno { padding: var(--e-5); }
.estilo-hoy { display: flex; align-items: center; gap: .6rem; margin: 0 0 var(--e-6); color: var(--tinta-2); }
.estilo-pieza > :not(.estilo-pieza__nombre) + * { margin-top: var(--e-4); }
.estilo-croata { font-family: var(--f-titulo); font-size: var(--t-xl); font-weight: 500; line-height: 1.3; margin: 0; }
.estilo-croata--cursiva { font-style: italic; }
.estilo-signos { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e-5) var(--e-6); }
.estilo-signo { display: grid; justify-items: center; gap: var(--e-2); margin: 0; font-size: var(--t-xs); color: var(--tinta-3); }
.estilo-signo--16 .marca__signo { width: 16px; height: 16px; }
.estilo-signo--32 .marca__signo { width: 32px; height: 32px; }
.estilo-signo--64 .marca__signo { width: 64px; height: 64px; }
.estilo-signo--128 .marca__signo { width: 128px; height: 128px; }
.estilo-espacios { display: grid; gap: var(--e-2); margin: 0; padding: 0; list-style: none; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .8125rem; color: var(--tinta-3); }
.estilo-espacios li { display: flex; align-items: center; gap: var(--e-3); }
.estilo-espacio { display: block; flex: none; height: .75rem; background-color: var(--lit); transition: background-color var(--dur-tema) ease; }
.estilo-e-1 { width: var(--e-1); } .estilo-e-2 { width: var(--e-2); } .estilo-e-3 { width: var(--e-3); }
.estilo-e-4 { width: var(--e-4); } .estilo-e-5 { width: var(--e-5); } .estilo-e-6 { width: var(--e-6); }
.estilo-e-7 { width: var(--e-7); } .estilo-e-8 { width: var(--e-8); } .estilo-e-9 { width: var(--e-9); }
.estilo-radios { display: flex; flex-wrap: wrap; gap: var(--e-5); margin: 0; padding: 0; list-style: none; font-size: var(--t-xs); color: var(--tinta-3); }
.estilo-radios li { display: grid; gap: var(--e-2); justify-items: start; }
.estilo-radio { display: block; width: 5rem; height: 3rem; border: 1px solid var(--borde-campo); background-color: var(--superficie); }
.estilo-radio--radio { border-radius: var(--radio); }
.estilo-radio--chico { border-radius: var(--radio-chico); }
.estilo-radio--pildora { border-radius: 999px; }
.estilo-radio--foto { border-radius: 0; }
.estilo-encuadres { margin-top: var(--e-5); }
.estilo-encuadre .foto__img { aspect-ratio: 3 / 2; object-fit: cover; }

/* ==========================================================================
   Impresión
   ========================================================================== */

@media print {
  :root,
  :root[data-hora="noche"],
  :root[data-hora="dia"] {
    --fondo: #fff; --superficie: #fff; --superficie-2: #fff; --banda-cielo: #fff; --banda-piedra: #fff;
    --tinta: #000; --tinta-2: #222; --tinta-3: #444;
    --linea: #bbb; --linea-fuerte: #888; --enlace: #000; --marca: #000; --marca-hondo: #000;
    --lit: #000; --lit-tinta: #fff; --piedra-texto: #000; --velo: #fff;
    color-scheme: light;
  }
  @page { margin: 18mm 16mm; }
  body { display: block; min-height: 0; background: #fff; color: #000; font-size: 11pt; }
  .franja-lit, .cabecera, .menu-movil, .subnav, .pie, .silencio, .saltar, .franja-silencio,
  .boton, .acciones, .modo, .chips, .indice, .paginacion,
  button { display: none !important; }
  .seccion { padding-block: 1.5rem; background: none !important; }
  .cabecera-pagina, .cabecera-pagina--foto { display: block; min-height: 0; padding-block: 0 1rem; }
  .cabecera-pagina--foto .foto { position: static; width: auto; margin: 0 0 1rem; }
  .cabecera-pagina--foto .foto__pie { position: static; max-width: none; padding: .3rem 0 0; background: none; text-align: left; }
  .cabecera-pagina--foto > .envoltura > :not(.foto) { max-width: none; }
  a { color: #000; text-decoration: underline; }
  .fuentes a[href^="http"]::after,
  .mensaje__fuente a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; word-break: break-all; }
  .foto__img, .banda-foto__img, .tarjeta__foto img, .cabecera-pagina--foto .foto__img {
    filter: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    width: auto;
    height: auto;
    max-height: 12cm;
  }
  .foto, .banda-foto, .tarjeta, .cita, .minuto, .tabla-envoltura, .lista-ed__fila { break-inside: avoid; }
  .cita--cartel p { font-size: 28pt; }
  .mensaje { max-width: none; break-inside: auto; }
  .mensaje__texto, .mensaje-texto { max-width: none; font-size: 12.5pt; }
  .mensaje__pie, .mensaje__credito, .mensaje__fuente { display: block !important; max-width: none; color: #000; }
  .lista-ed__enlace > .flecha { display: none; }
  h1, h2, h3 { break-after: avoid; }
  /* Todo <details> sale abierto, aunque en pantalla esté cerrado. comun.js además los abre
     antes de imprimir, para los navegadores que no conocen ::details-content. */
  details::details-content {
    display: block !important;
    content-visibility: visible !important;
    block-size: auto !important;
    overflow: visible !important;
  }
  details > summary { list-style: none; }
  details > summary::-webkit-details-marker, .acordeon > summary::after { display: none !important; }
}

/* ==========================================================================
   Movimiento reducido: sin animaciones ni transiciones
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}