/* ==========================================================================
   Historia de Medjugorje: la portada de la sección y los capítulos.
   Solo tokens de sitio.css y clases con el prefijo .hist-.
   Las páginas las arma scripts/construir-historia.js con contenido/historia/*.md.

   Portada (/historia): composición A (cabecera con foto) y, debajo, el criterio editorial
   y el índice editorial de los capítulos, agrupados por etapas.
   Capítulo (/historia/<slug>): composición B (lectura): una columna centrada, sin barra lateral.
   Ronda 2: el capítulo no es una tira. Abre con la entradilla y «En pocas palabras»; cada apartado
   es un renglón que se abre en su lugar (.acordeon); lo de consulta (fechas, discrepancias, cómo se
   sabe, lecturas y fuentes) va al final, plegado; las notas de cada párrafo van juntas en una marca.
   Ningún texto baja de .875rem.
   ========================================================================== */

/* ---------- Subtítulo dentro del h1 (portada y capítulos) ---------- */

.hist-titulo__sub {
  display: block;
  margin-top: .3em;
  font-size: .5em;
  font-style: italic;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--tinta-2);
}

/* ==========================================================================
   Portada de la sección (/historia)
   ========================================================================== */

.hist-portada { padding-block: var(--e-5) var(--e-6); }
@media (min-width: 760px) {
  .hist-portada { padding-block: var(--e-6) var(--seccion); }
}

/* ---------- El criterio editorial: una frase principal y, debajo, las demás ----------
   La principal (lo que dice la Iglesia) va siempre a la vista, con la cinta del tiempo.
   Las demás van en un <details>: en escritorio, abierto y sin título, en tres columnas;
   en celular, historia.js lo deja plegado y su título son los rótulos de cada punto. */

.hist-criterio { margin-bottom: var(--e-5); }
.hist-criterio__titulo { margin-bottom: var(--e-3); }
.hist-criterio__principal {
  max-width: 50rem;
  margin: 0;
  padding-left: var(--e-4);
  border-left: 2px solid var(--lit);
  color: var(--tinta);
  font-size: 1.0625rem;
  line-height: 1.5;
  text-wrap: pretty;
  transition: border-color var(--dur-tema) ease;
}
.hist-criterio__mas {
  margin-top: var(--e-3);
  border-block: 1px solid var(--linea);
  transition: border-color var(--dur-tema) ease;
}
.hist-criterio__resumen {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: 2.75rem;
  padding-block: .4rem;
  color: var(--tinta-2);
  font-size: var(--t-xs);
  font-weight: 500;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}
.hist-criterio__resumen::-webkit-details-marker { display: none; }
.hist-criterio__resumen::after {
  content: "";
  flex: none;
  width: .5rem;
  height: .5rem;
  margin: 0 .3rem .25rem auto;
  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;
}
.hist-criterio__mas[open] > .hist-criterio__resumen::after { margin-bottom: -.2rem; transform: rotate(-135deg); }
.hist-criterio__resumen:hover { color: var(--tinta); }
.hist-criterio__lista {
  display: grid;
  gap: var(--e-3) var(--e-6);
  margin: 0;
  padding: 0 0 var(--e-4);
  list-style: none;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--tinta-2);
}
.hist-criterio__lista li { min-width: 0; text-wrap: pretty; }
.hist-criterio__lista strong { color: var(--tinta); }
@media (min-width: 760px) {
  .hist-criterio { margin-bottom: var(--e-7); }
  .hist-criterio__principal { padding-left: var(--e-5); font-size: var(--t-md); line-height: 1.45; }
  .hist-criterio__mas { margin-top: var(--e-5); border-bottom: 0; }
  .hist-criterio__resumen { display: none; }
  .hist-criterio__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: var(--e-4) 0 0; }
}

/* ---------- Los capítulos, por etapas ---------- */

.hist-capitulos__cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-1) var(--e-5);
  margin-bottom: var(--e-4);
}
.hist-capitulos__titulo {
  font-family: var(--f-titulo);
  font-size: var(--t-xl);
  font-weight: 500;
  line-height: 1.1;
}
.hist-capitulos__datos {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.4;
  color: var(--tinta-3);
}
.hist-etapas { margin: 0; padding: 0; list-style: none; }
.hist-etapa { position: relative; }
.hist-etapa__titulo { margin: var(--e-5) 0 var(--e-2); }
.hist-etapa:first-child .hist-etapa__titulo { margin-top: 0; }
.hist-capitulos .actualizado { margin-top: var(--e-4); }

/* En celular los doce capítulos van seguidos, en una sola lista: el nombre de cada etapa
   queda solo para los lectores de pantalla y los filetes de una etapa continúan en la siguiente. */
@media (max-width: 639.98px) {
  .hist-etapa__titulo,
  .hist-etapa:first-child .hist-etapa__titulo {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .hist-etapa + .hist-etapa { margin-top: -1px; }
  .hist-capitulos__datos { font-size: var(--t-xs); }
  /* La portada cabe en poco más de tres pantallas de celular (presupuesto: 2700 px):
     las doce filas van algo más juntas y los bloques, con menos aire entre sí. */
  .hist-portada { padding-block: var(--e-4) var(--e-5); }
  .hist-criterio { margin-bottom: var(--e-4); }
  .hist-capitulos__cabeza { margin-bottom: var(--e-3); }
  .hist-etapas .lista-ed__enlace { padding-block: .6rem; }
  .hist-capitulos .actualizado { margin-top: var(--e-3); }
}

/* En escritorio, la etapa va en un margen a la izquierda, como las partes de un libro,
   y los filetes de una etapa continúan en la siguiente. */
@media (min-width: 900px) {
  .hist-etapa {
    display: grid;
    grid-template-columns: 13rem minmax(0, 1fr);
    align-items: start;
  }
  .hist-etapa + .hist-etapa { margin-top: -1px; }
  .hist-etapa__titulo,
  .hist-etapa:first-child .hist-etapa__titulo {
    margin: 0;
    padding: calc(var(--e-4) + .5rem) var(--e-5) 0 0;
    border-top: 1px solid var(--linea);
    transition: border-color var(--dur-tema) ease, color var(--dur-tema) ease;
  }
}

/* ==========================================================================
   Capítulo: barra de progreso, cabecera, navegación de lectura, entradilla y banda
   ========================================================================== */

/* Barra de progreso: un filete del color del tiempo, pegado bajo la cabecera del sitio.
   La mueve historia.js; sin JavaScript no se ve. */
.hist-progreso {
  position: sticky;
  top: var(--alto-cabecera);
  z-index: 38; /* por debajo del panel del menú móvil (39) y de la cabecera (40) */
  height: 0;
  pointer-events: none;
}
.hist-progreso__barra {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--lit);
  transform: scaleX(0);
  transform-origin: left center;
  transition: background-color var(--dur-tema) ease;
}

.hist-cap__datos {
  margin: var(--e-4) 0 0;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--tinta-3);
}
.hist-cap__datos a { color: var(--tinta-2); text-decoration-color: var(--linea-fuerte); }
.hist-cap__datos a:hover { color: var(--tinta); text-decoration-color: currentColor; }

/* ---------- Navegación de lectura: «← Capítulo 5 · Capítulo 6 de 11 · Capítulo 7 →» ----------
   En el centro, el paso al capítulo anterior y al siguiente; a la izquierda, «Índice»; a la derecha,
   «Todos los capítulos», que se despliega sobre la página. En celular, el paso va arriba y los otros
   dos debajo. La barra por épocas queda solo en la portada de la sección. */

.hist-nav {
  position: relative;
  z-index: 30; /* su desplegable pasa sobre el texto; queda bajo la cabecera del sitio (40) */
  border-block: 1px solid var(--linea);
  font-size: var(--t-sm);
  line-height: 1.2;
  transition: border-color var(--dur-tema) ease;
}
.hist-nav__fila {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "pasos pasos" "indice todos";
  align-items: center;
  column-gap: var(--e-4);
}
.hist-nav__pasos {
  grid-area: pasos;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: .55rem;
  min-height: 3rem;
  margin: 0;
  border-bottom: 1px solid var(--linea);
  text-align: center;
  transition: border-color var(--dur-tema) ease;
}
.hist-nav__indice { grid-area: indice; justify-self: start; }
.hist-nav__todos { grid-area: todos; justify-self: end; }
.hist-nav__paso,
.hist-nav__indice,
.hist-nav__boton {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  color: var(--tinta-2);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.hist-nav__paso:hover,
.hist-nav__indice:hover,
.hist-nav__boton:hover {
  color: var(--tinta);
  text-decoration: underline;
  text-decoration-color: var(--lit);
  text-decoration-thickness: 2px;
  text-underline-offset: .3em;
}
.hist-nav__actual { color: var(--tinta); font-weight: 600; white-space: nowrap; }
.hist-nav__punto { color: var(--lit); transition: color var(--dur-tema) ease; }
.hist-nav__boton {
  gap: .55rem;
  list-style: none;
  cursor: pointer;
}
.hist-nav__boton::-webkit-details-marker { display: none; }
.hist-nav__boton::after {
  content: "";
  flex: none;
  width: .45rem;
  height: .45rem;
  margin-bottom: .2rem;
  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;
}
.hist-nav__todos[open] > .hist-nav__boton { color: var(--tinta); }
.hist-nav__todos[open] > .hist-nav__boton::after { margin-bottom: -.2rem; transform: rotate(-135deg); }
/* El desplegable: una hoja de papel con filete, bajo la barra y pegada a la derecha. Sin sombra. */
.hist-nav__lista {
  position: absolute;
  top: 100%;
  right: var(--margen);
  width: min(25rem, calc(100vw - 2 * var(--margen)));
  max-height: min(70vh, 36rem);
  margin: 0;
  padding: var(--e-2) var(--e-4);
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  background-color: var(--fondo);
  border: 1px solid var(--linea-fuerte);
  border-top: 2px solid var(--lit);
  transition: background-color var(--dur-tema) ease, border-color var(--dur-tema) ease;
}
.hist-capitulos-lista li + li { border-top: 1px solid var(--linea); transition: border-color var(--dur-tema) ease; }
.hist-capitulos-lista a {
  display: flex;
  align-items: baseline;
  gap: var(--e-3);
  min-height: 2.75rem;
  padding: .7rem 0;
  color: var(--tinta-2);
  font-size: var(--t-sm);
  line-height: 1.35;
  text-decoration: none;
}
.hist-capitulos-lista a:hover { color: var(--tinta); }
.hist-capitulos-lista a:hover .hist-capitulos-lista__t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.hist-capitulos-lista a:focus-visible { outline-offset: -2px; }
.hist-capitulos-lista__n {
  flex: none;
  min-width: 1.5rem;
  font-family: var(--f-titulo);
  font-size: var(--t-base);
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1;
  color: var(--lit);
  transition: color var(--dur-tema) ease;
}
.hist-capitulos-lista__t { flex: 1 1 auto; min-width: 0; }
.hist-capitulos-lista__m { flex: none; font-size: var(--t-xs); color: var(--tinta-3); white-space: nowrap; }
.hist-capitulos-lista a[aria-current="page"] { color: var(--tinta); font-weight: 600; }
.hist-capitulos-lista a[aria-current="page"] .hist-capitulos-lista__m { font-weight: 400; }
@media (min-width: 760px) {
  .hist-nav__fila {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas: "indice pasos todos";
  }
  .hist-nav__pasos { border-bottom: 0; }
}

/* ---------- La entrada: la entradilla y «En pocas palabras» ---------- */

.hist-cap__entrada { padding-top: var(--e-6); }
.hist-cap__columna { padding-block: var(--e-6) var(--seccion); }

/* La entradilla abre el capítulo, con su capitular del color del tiempo */
.hist-entradilla {
  margin: 0;
  font-size: clamp(1.1875rem, 1.08rem + .55vw, 1.375rem);
  line-height: 1.5;
  color: var(--tinta);
  text-wrap: pretty;
}
/* Capitular de dos renglones: su caja (tamaño × interlínea + margen) mide menos de tres renglones
   del párrafo (3em), para que el tercero ya no se sangre. */
.hist-entradilla::first-letter {
  float: left;
  margin: .05em .08em 0 -.02em;
  font-family: var(--f-titulo);
  font-size: 3.5em;
  font-weight: 500;
  line-height: .74;
  color: var(--lit);
}
/* «En pocas palabras»: el componente .minuto de sitio.css, a todo el ancho de la columna */
.hist-pocas { max-width: none; margin: var(--e-6) 0 0; }
.hist-pocas .minuto__lista li { font-size: var(--t-base); text-wrap: pretty; }
.hist-pocas .minuto__lista strong { font-weight: 600; }
.hist-cap__entrada > .hist-foto { margin-bottom: 0; }

/* Banda fotográfica (composición D de sitio.css) entre la entradilla y los apartados: en una página
   de lectura va algo más baja, para que el primer apartado no quede lejos. */
.hist-banda { margin-top: var(--e-6); }
.hist-banda .banda-foto__img { height: clamp(11rem, 28vw, 22rem); }

/* «En este capítulo» y el botón «Abrir todo» (lo muestra /js/plegables.js) */
.hist-abrir {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  min-height: 2.75rem;
}
.hist-abrir__rotulo { margin: 0; }
.hist-abrir__boton {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--tinta-2);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: underline;
  text-decoration-color: var(--linea-fuerte);
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
  cursor: pointer;
}
.hist-abrir__boton:hover { color: var(--tinta); text-decoration-color: var(--lit); }

/* ==========================================================================
   Capítulo: el texto
   ========================================================================== */

.hist-cap__texto { font-size: clamp(1.125rem, 1.06rem + .32vw, 1.25rem); }
.hist-cap__texto p { hyphens: manual; }

/* ---------- Apartados: renglones que se abren en su lugar ----------
   Cada «## » es un .acordeon de sitio.css (filetes y un signo que gira). Aquí solo se ajusta lo
   propio de un capítulo: el título es un encabezado dentro del <summary>, el texto se lee en tinta
   plena y el renglón ocupa toda la columna. El primero llega abierto. */

.hist-cap__texto .acordeon { max-width: none; scroll-margin-top: calc(var(--alto-cabecera) + .5rem); }
.hist-cap__texto .hist-apartado > summary {
  min-height: 3.25rem;
  font-size: clamp(1.375rem, 1.24rem + .6vw, 1.625rem);
  font-weight: 500;
  line-height: 1.15;
  text-wrap: balance;
}
/* El encabezado hereda la letra del <summary>: no la de los h2 y h3 de la prosa */
.hist-cap__texto .acordeon .hist-apartado__titulo,
.hist-cap__texto .acordeon .hist-perfil__nombre {
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}
.hist-cap__texto .hist-apartado[open] > summary { color: var(--tinta); }
.hist-cap__texto .hist-apartado > .hist-apartado__cuerpo { padding-bottom: var(--e-6); color: var(--tinta); }
.hist-apartado__cuerpo > :first-child { margin-top: 0; }
.hist-apartado__cuerpo > :last-child { margin-bottom: 0; }

/* Lo de consulta, al final: fechas, discrepancias, cómo se sabe, lecturas y fuentes */
.hist-apendices { margin-top: var(--e-7); }
.hist-apendices__rotulo { margin: 0 0 var(--e-2); }
.hist-cap__texto .hist-apendice > summary {
  min-height: 3rem;
  padding-block: var(--e-3);
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--tinta-2);
}
.hist-cap__texto .hist-apendice > summary:hover,
.hist-cap__texto .hist-apendice[open] > summary { color: var(--tinta); }
.hist-apendice__n {
  font-family: var(--f-texto);
  font-size: var(--t-sm);
  font-weight: 400;
  font-variant-numeric: lining-nums;
  color: var(--tinta-3);
}
.hist-cap__texto .hist-apendice > .hist-apartado__cuerpo { font-size: var(--t-base); line-height: 1.6; }

/* ---------- Notas: una sola marca al final de cada párrafo, con sus números ----------
   Cada número lleva a su fuente (y abre «Fuentes de este capítulo»). El área que se toca mide al
   menos 24 × 24 px sin cambiar el renglón. */

.hist-notas {
  position: relative;
  top: -.38em;
  margin-left: .12em;
  font-size: .875rem;
  font-style: normal;
  font-weight: 500;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 0;
  letter-spacing: 0;
  vertical-align: baseline;
  white-space: nowrap; /* la marca no se parte: si no cabe, baja entera al renglón siguiente */
}
.hist-notas a {
  display: inline-block;
  min-width: 1.5rem;
  margin-block: -.3rem;
  padding: .3rem .15rem;
  border-radius: var(--radio-chico);
  color: var(--tinta-3);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: color var(--dur-rapida) var(--curva), background-color var(--dur-rapida) var(--curva);
}
.hist-cap .hist-notas a { color: var(--tinta-3); }
.hist-cap .hist-notas a:hover { background-color: var(--lit-suave); color: var(--tinta); }
.hist-notas a:target,
.hist-notas a.hist-nota--vuelta {
  background-color: var(--lit-suave);
  box-shadow: 0 0 0 1px var(--lit);
  color: var(--tinta);
}

/* Fotos dentro del texto: la horizontal ocupa la columna; la vertical se queda más estrecha */
.hist-foto { margin-block: 2.2em; }
.hist-foto .foto__pie { font-size: var(--t-sm); }
.hist-foto--vertical { width: 80%; max-width: 25rem; margin-inline: auto; }
.hist-foto--estrecha { width: 60%; max-width: 17rem; margin-inline: auto; }

/* Cita destacada */
.hist-cap__texto .hist-cita { margin-block: 2.2em; }
.hist-cap__texto .hist-cita p { font-size: clamp(1.625rem, 1.4rem + 1vw, 2.125rem); line-height: 1.2; }

/* Sub-apartados */
.hist-sub > :last-child { margin-bottom: 0; }

/* ---------- Cronología: la fecha a la izquierda, el hecho a la derecha ---------- */

.hist-cap__texto .hist-crono {
  margin: 0 0 1.4em;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--linea);
  font-size: var(--t-sm);
  line-height: 1.5;
  transition: border-color var(--dur-tema) ease;
}
.hist-cap__texto .hist-crono__fila {
  display: grid;
  grid-template-columns: 6.25rem minmax(0, 1fr);
  column-gap: var(--e-4);
  margin: 0;
  padding-block: .6rem;
  border-bottom: 1px solid var(--linea);
  transition: border-color var(--dur-tema) ease;
}
.hist-crono__fecha {
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--lit);
  transition: color var(--dur-tema) ease;
}
.hist-crono__hecho { color: var(--tinta); text-wrap: pretty; }
.hist-crono__fuente { color: var(--tinta-3); }
.hist-crono__clave {
  margin: 0 0 var(--e-2);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--tinta-3);
}
@media (max-width: 479.98px) {
  .hist-cap__texto .hist-crono__fila { grid-template-columns: minmax(0, 1fr); row-gap: .1rem; }
}

/* ---------- Recuadros ---------- */

.hist-cap__texto .hist-recuadro { max-width: none; margin-block: 2em; font-size: var(--t-sm); }
.hist-cap__texto h3.hist-recuadro__titulo {
  margin: 0 0 .35em;
  font-family: var(--f-texto);
  font-size: var(--t-base);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
}
.hist-recuadro__sello { margin: 0 0 var(--e-2); }

/* Tabla de dos columnas («lo que dice» y «lo que no dice»): en celular, cada fila se apila */
@media (max-width: 559.98px) {
  .hist-tabla--2 .tabla,
  .hist-tabla--2 .tabla tbody,
  .hist-tabla--2 .tabla tr,
  .hist-tabla--2 .tabla td { display: block; }
  .hist-tabla--2 .tabla thead { display: none; }
  .hist-tabla--2 .tabla tr { padding-block: .7rem; border-top: 1px solid var(--linea); }
  .hist-tabla--2 .tabla tr:first-child { border-top: 0; }
  .hist-tabla--2 .tabla td { min-width: 0; padding: 0; border: 0; }
  .hist-tabla--2 .tabla td + td { margin-top: .6rem; }
  .hist-tabla--2 .tabla td::before {
    content: attr(data-rotulo);
    display: block;
    margin-bottom: .15rem;
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tinta-3);
  }
}
.hist-tabla .tabla td { color: var(--tinta); }

/* ==========================================================================
   «Los videntes»: fichas compactas arriba y, debajo, un renglón por perfil
   ========================================================================== */

/* Fichas compactas: nombre, año de nacimiento y lo que dice la parroquia, en una línea.
   Sin cajas: filetes, como el índice editorial. */
.hist-fichas { margin-bottom: var(--e-6); }
.hist-fichas__titulo { margin: 0 0 var(--e-2); }
.hist-fichas__lista {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--e-6);
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--linea);
  transition: border-color var(--dur-tema) ease;
}
.hist-fichas__ficha {
  min-width: 0;
  padding-block: var(--e-3);
  border-top: 1px solid var(--linea);
  transition: border-color var(--dur-tema) ease;
}
.hist-fichas__ficha p { margin: 0; }
.hist-fichas__nombre {
  font-family: var(--f-titulo);
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.2;
}
.hist-fichas__nombre a { color: var(--tinta); text-decoration: none; }
.hist-fichas__nombre a:hover { text-decoration: underline; text-decoration-color: var(--lit); text-decoration-thickness: 1px; text-underline-offset: .16em; }
.hist-fichas__linea {
  margin-top: .2rem;
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--tinta-2);
  text-wrap: pretty;
}
.hist-fichas .hist-fichas__linea { margin-top: .2rem; }
.hist-fichas__anio {
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--lit);
  transition: color var(--dur-tema) ease;
}
.hist-fichas__mensajes { font-size: var(--t-sm); line-height: 1.3; }
.hist-fichas__mensajes a {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  color: var(--enlace);
  text-decoration-color: var(--linea-fuerte);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}
.hist-fichas__mensajes a:hover { text-decoration-color: currentColor; }
@media (min-width: 560px) {
  .hist-fichas__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Perfiles: un renglón por vidente, dentro de su apartado */
.hist-cap__texto .hist-perfil > summary { min-height: 3rem; padding-block: var(--e-3); font-size: var(--t-md); }
.hist-cap__texto .hist-perfil > .hist-perfil__cuerpo { color: var(--tinta); }
.hist-perfil__cuerpo > :last-child { margin-bottom: 0; }
.hist-apartado--grupo > .hist-apartado__cuerpo > .hist-perfil:last-child { border-bottom: 0; }

/* La ficha: rótulo a la izquierda, dato a la derecha, entre filetes */
.hist-cap__texto .hist-ficha {
  margin: 0 0 1.3em;
  border-top: 1px solid var(--linea);
  font-size: var(--t-sm);
  line-height: 1.5;
  transition: border-color var(--dur-tema) ease;
}
.hist-ficha__fila {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  column-gap: var(--e-4);
  padding-block: .55rem;
  border-bottom: 1px solid var(--linea);
  transition: border-color var(--dur-tema) ease;
}
.hist-cap__texto .hist-ficha dt {
  padding-top: .18rem;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.hist-cap__texto .hist-ficha dd { margin: 0; color: var(--tinta); text-wrap: pretty; }
@media (max-width: 479.98px) {
  .hist-ficha__fila { grid-template-columns: minmax(0, 1fr); row-gap: .05rem; }
  .hist-cap__texto .hist-ficha dt { padding-top: 0; }
}

/* ==========================================================================
   «Si es tu primera vez aquí»: seis respuestas de un párrafo
   ========================================================================== */

/* La columna es más ancha que la de lectura: en escritorio, la pregunta va en un margen a la
   izquierda y la respuesta a la derecha, como las etapas de la portada. */
.hist-cap__ancha { max-width: calc(60rem + 2 * var(--margen)); }
.hist-cap--respuestas .hist-cap__columna { padding-top: var(--e-5); }
.hist-cap--respuestas .hist-cap__texto { max-width: none; font-size: var(--t-base); line-height: 1.6; }
.hist-cap--respuestas .hist-apendices,
.hist-cap--respuestas .hist-cap__final { max-width: none; }
.hist-resp {
  padding-block: var(--e-4) var(--e-2);
  border-top: 1px solid var(--linea);
  scroll-margin-top: calc(var(--alto-cabecera) + .5rem);
  transition: border-color var(--dur-tema) ease;
}
/* (tres clases: pesa más que el h2 de la prosa de sitio.css) */
.hist-cap__texto .hist-resp .hist-resp__titulo {
  margin: 0 0 var(--e-2);
  font-family: var(--f-titulo);
  font-size: var(--t-lg);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0;
  text-wrap: balance;
}
.hist-resp__cuerpo > p { margin: 0; text-wrap: pretty; }
.hist-resp__seguir {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 2.75rem;
  color: var(--tinta-2);
  font-size: var(--t-sm);
  font-weight: 500;
  line-height: 1.2;
  list-style: none;
  cursor: pointer;
}
.hist-resp__seguir::-webkit-details-marker { display: none; }
.hist-resp__seguir::after {
  content: "";
  flex: none;
  width: .45rem;
  height: .45rem;
  margin-bottom: .2rem;
  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;
}
.hist-resp__seguir:hover { color: var(--tinta); }
.hist-resp__seguir:hover > span:first-child { text-decoration: underline; text-decoration-color: var(--lit); text-decoration-thickness: 1px; text-underline-offset: .25em; }
.hist-resp__mas[open] > .hist-resp__seguir::after { margin-bottom: -.2rem; transform: rotate(-135deg); }
.hist-resp__resto { padding-bottom: var(--e-3); color: var(--tinta); }
.hist-resp__resto > :first-child { margin-top: 0; }
.hist-resp__resto > :last-child { margin-bottom: 0; }
@supports (interpolate-size: allow-keywords) {
  .hist-resp__mas { interpolate-size: allow-keywords; }
  .hist-resp__mas::details-content {
    block-size: 0;
    overflow-y: clip;
    transition: block-size var(--dur) var(--curva), content-visibility var(--dur) allow-discrete;
  }
  .hist-resp__mas[open]::details-content { block-size: auto; }
}
@media (min-width: 860px) {
  .hist-resp {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    column-gap: var(--e-6);
    align-items: start;
  }
  .hist-cap__texto .hist-resp .hist-resp__titulo { margin: 0; padding-top: .08em; }
}

/* Las salidas: por dónde seguir. Tres enlaces entre filetes; en escritorio, en una fila. */
.hist-salidas { margin-top: var(--e-6); }
.hist-salidas__titulo { margin: 0 0 var(--e-2); }
.hist-salidas__lista {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--e-6);
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--linea);
  transition: border-color var(--dur-tema) ease;
}
.hist-salidas__salida { min-width: 0; border-top: 1px solid var(--linea); transition: border-color var(--dur-tema) ease; }
.hist-salidas__enlace {
  display: grid;
  gap: .15rem;
  min-height: 2.75rem;
  padding-block: var(--e-3);
  color: var(--tinta);
  text-decoration: none;
}
.hist-salidas__nombre {
  font-family: var(--f-titulo);
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.15;
}
.hist-salidas__nombre .flecha { color: var(--lit); transition: color var(--dur-tema) ease, transform var(--dur-rapida) var(--curva); }
.hist-salidas__linea { font-size: var(--t-sm); line-height: 1.45; color: var(--tinta-2); text-wrap: pretty; }
.hist-salidas__enlace:hover .hist-salidas__nombre {
  text-decoration: underline;
  text-decoration-color: var(--lit);
  text-decoration-thickness: 1px;
  text-underline-offset: .16em;
}
.hist-salidas__enlace:focus-visible { outline-offset: -2px; }
@media (min-width: 760px) {
  .hist-salidas__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================================
   Final del capítulo: nota de la Iglesia, anterior y siguiente, fuentes
   ========================================================================== */

.hist-cap__final { max-width: var(--ancho-lectura); }
.hist-nota-iglesia { max-width: none; margin: var(--e-6) 0 0; font-size: var(--t-base); line-height: 1.55; }
.hist-paginacion { margin-top: var(--e-6); }

/* Las fuentes, dentro de su renglón plegado: el componente .fuentes sin su filete ni su margen */
.hist-fuentes { max-width: none; margin-top: 0; padding-top: 0; border-top: 0; }
.hist-fuentes .actualizado { margin: 0 0 var(--e-5); }
.hist-fuentes__grupo + .hist-fuentes__grupo { margin-top: var(--e-5); }
.hist-fuentes .hist-fuentes__rotulo { margin: 0 0 var(--e-1); color: var(--tinta); }
.hist-fuentes__nota { margin: 0 0 var(--e-2); font-size: var(--t-xs); line-height: 1.45; color: var(--tinta-3); }
.hist-fuentes .hist-fuentes__lista { margin-top: var(--e-2); padding-left: 1.9em; }
.hist-fuente { padding-left: .15em; scroll-margin-top: calc(var(--alto-cabecera) + 1.5rem); text-wrap: pretty; }
.hist-fuente::marker { font-variant-numeric: lining-nums tabular-nums; font-weight: 600; }
.hist-fuente__cita { overflow-wrap: anywhere; }
.hist-fuente__detalle { color: var(--tinta-3); }
/* La fuente a la que se llega desde una nota se resalta, con su número incluido */
.hist-fuente:target {
  background-color: var(--lit-suave);
  box-shadow: 0 0 0 .4rem var(--lit-suave), -1.8rem 0 0 .4rem var(--lit-suave);
}
.hist-fuente__volver {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  min-height: 1.5rem;
  margin-left: .15rem;
  border-radius: 999px;
  color: var(--tinta-3);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  vertical-align: middle;
}
.hist-fuentes a.hist-fuente__volver { color: var(--tinta-3); }
.hist-fuentes a.hist-fuente__volver:hover,
.hist-fuente:target a.hist-fuente__volver { background-color: var(--lit); color: var(--lit-tinta); }

/* Sellos: de dónde viene cada fuente. Una palabra en versalitas, del color del tiempo;
   sin borde ni fondo. */
.hist-sello {
  margin-right: .3rem;
  color: var(--lit);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1.3;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--dur-tema) ease;
}

.hist-nota-sitio {
  margin: var(--e-6) 0 0;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--tinta-3);
}
.hist-nota-sitio + .hist-nota-sitio { margin-top: var(--e-2); }

/* ==========================================================================
   Impresión: todos los renglones salen abiertos (sitio.css y comun.js); aquí se quita
   lo que solo sirve en pantalla.
   ========================================================================== */

@media print {
  .hist-progreso, .hist-nav, .hist-abrir, .hist-fuente__volver, .hist-fichas__mensajes, .hist-resp__seguir, .hist-salidas { display: none !important; }
  .hist-entradilla::first-letter { color: #000; }
  .hist-notas a { color: #000; }
  .hist-banda .banda-foto__img { height: auto; }
  .hist-cap__texto .acordeon > summary { min-height: 0; padding-block: .6rem .2rem; cursor: auto; }
  .hist-cap__texto .acordeon, .hist-resp { border-color: #bbb; }
  .hist-resp { display: block; }
  .hist-ficha__fila, .hist-crono__fila, .hist-recuadro, .hist-fichas__ficha { break-inside: avoid; }
}