/* Virgen de Medjugorje · Peregrinar
   Hoja propia de la guía para peregrinar (/peregrinar y /peregrinar/*).
   Solo usa los tokens de sitio.css y clases con el prefijo .per-.
   No redefine componentes compartidos (.minuto, .lista-ed, .tabla, .acordeon, .aviso, .fuentes…):
   aquí solo se colocan y se añaden las piezas propias de la sección.
   Sin tarjetas y sin sombras: filetes de 1 px, números a la izquierda y tipografía. */

/* ==========================================================================
   Cabecera: el título en dos renglones (palabras de búsqueda + precisión)
   ========================================================================== */

.per-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);
}
.cabecera-pagina .actualizado { margin-top: var(--e-4); }

/* Hora y cifras de horario: siempre alineadas */
.per-hora {
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
  color: var(--tinta);
}

/* La fuente de un dato, en una línea corta debajo del dato */
.per-fuente {
  display: block;
  margin-top: .2rem;
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--tinta-3);
}
.prosa + .per-fuente,
.tabla-envoltura + .per-fuente,
.acordeon + .per-fuente { margin-top: var(--e-3); }
.per-fuente a { color: inherit; text-decoration-color: var(--linea-fuerte); }
.per-fuente a:hover { color: var(--tinta); text-decoration-color: currentColor; }

/* Correos y direcciones largas: se parten antes de desbordar */
.per-correo { overflow-wrap: anywhere; }

/* ==========================================================================
   Cuerpo de las páginas de la guía: bloques numerados entre filetes.
   En escritorio, el título a la izquierda y el contenido a la derecha.
   ========================================================================== */

.per-cuerpo { padding-block: var(--e-6) var(--e-7); }
@media (min-width: 900px) {
  .per-cuerpo { padding-block: var(--e-7) var(--seccion); }
}

.per-bloque {
  display: grid;
  gap: var(--e-4) var(--e-7);
  padding-block: var(--e-6);
  border-top: 1px solid var(--linea);
  scroll-margin-top: calc(var(--alto-cabecera) + 1rem);
  transition: border-color var(--dur-tema) ease;
}
.per-bloque:first-child { padding-top: 0; border-top: 0; }
.per-bloque__cabeza { min-width: 0; }
.per-bloque__num {
  display: block;
  margin-bottom: var(--e-2);
  font-family: var(--f-titulo);
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--lit);
  transition: color var(--dur-tema) ease;
}
.per-bloque__titulo { font-size: var(--t-xl); line-height: 1.08; }
.per-bloque__nota {
  max-width: 22rem;
  margin: var(--e-3) 0 0;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--tinta-3);
}
.per-bloque__cuerpo { min-width: 0; }
.per-bloque__cuerpo > :first-child { margin-top: 0; }
.per-bloque__cuerpo > :last-child { margin-bottom: 0; }
.per-bloque__cuerpo > .prosa + .tabla-envoltura,
.per-bloque__cuerpo > .tabla-envoltura + .prosa,
.per-bloque__cuerpo > .acordeon + .prosa,
.per-bloque__cuerpo > .prosa + .prosa { margin-top: var(--e-5); }
.per-bloque__cuerpo .tabla-envoltura { max-width: 46rem; }
.per-bloque__cuerpo .aviso:last-child { margin-bottom: 0; }
@media (min-width: 900px) {
  .per-bloque {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    padding-block: var(--e-7);
  }
}
@media (min-width: 1200px) {
  .per-bloque { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); }
}

/* Subtítulo dentro de un bloque */
.per-sub {
  margin: var(--e-6) 0 var(--e-3);
  font-family: var(--f-titulo);
  font-size: var(--t-lg);
  font-weight: 600;
  line-height: 1.15;
}
.per-sub:first-child { margin-top: 0; }

/* Tablas de la guía: la primera columna puede partirse en dos renglones */
.per-tabla tbody th { min-width: 7.5rem; white-space: normal; }
.per-tabla td { min-width: 9rem; }
.per-tabla__detalle {
  display: block;
  margin-top: .2rem;
  font-weight: 400;
  color: var(--tinta-3);
}
.per-tabla a { color: var(--enlace); }
/* Contactos: la oficina con su «para qué», y a la derecha el teléfono y el correo */
.per-contactos tbody th { width: 58%; }
.per-contactos td { line-height: 1.7; }
/* En celular, el contacto va debajo de la oficina: los correos no se parten */
@media (max-width: 479.98px) {
  .per-contactos, .per-contactos tbody, .per-contactos tr, .per-contactos th, .per-contactos td { display: block; }
  .per-contactos thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .per-contactos tbody th { width: auto; padding: .7rem 0 0; }
  .per-contactos td { min-width: 0; padding: .2rem 0 .7rem; border-top: 0; }
}

/* Lista dentro de un aviso */
.per-aviso__lista { margin: 0 0 .5em; padding-left: 1.2em; }
.per-aviso__lista li + li { margin-top: .35em; }
.per-aviso__lista li::marker { color: var(--piedra); }

/* Cierre de página: anterior y siguiente, y las fuentes plegadas */
.per-cierre { margin-top: var(--e-6); }
@media (min-width: 900px) {
  .per-cierre { margin-top: var(--e-7); }
}
.per-cierre .paginacion { margin-top: 0; }
.per-fuentes {
  max-width: var(--ancho-texto);
  margin-top: var(--e-6);
  border-block: 1px solid var(--linea);
  transition: border-color var(--dur-tema) ease;
}
.per-fuentes > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  min-height: 2.75rem;
  padding-block: var(--e-3);
  list-style: none;
  cursor: pointer;
}
.per-fuentes > summary::-webkit-details-marker { display: none; }
.per-fuentes > summary::after {
  content: "";
  flex: none;
  width: .5rem;
  height: .5rem;
  margin: 0 .35rem .25rem 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;
}
.per-fuentes[open] > summary::after { margin-bottom: -.15rem; transform: rotate(-135deg); }
.per-fuentes__titulo {
  margin: 0;
  font-family: var(--f-texto);
  font-size: var(--t-xs);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lit);
  transition: color var(--dur-tema) ease;
}
.per-fuentes__cuenta { margin-left: .4rem; font-weight: 400; letter-spacing: 0; color: var(--tinta-3); }
.per-fuentes .fuentes { margin: 0; padding: 0 0 var(--e-5); border-top: 0; }

/* ==========================================================================
   /peregrinar · portada de la guía
   ========================================================================== */

.per-inicio { padding-block: var(--e-5) var(--e-6); }
.per-inicio__rejilla { display: grid; gap: var(--e-6); }
.per-inicio .minuto { max-width: none; margin: 0; }
.per-inicio .minuto__lista li { font-size: var(--t-sm); }
.per-inicio .minuto__lista strong { font-weight: 600; }
.per-sentido__titulo {
  margin: 0 0 var(--e-3);
  font-size: var(--t-xl);
  line-height: 1.08;
}
.per-sentido p { margin: 0 0 var(--e-3); max-width: var(--ancho-texto); color: var(--tinta-2); }
.per-sentido__enlaces { display: flex; flex-wrap: wrap; gap: 0 var(--e-5); margin: 0; font-size: var(--t-sm); }
@media (min-width: 900px) {
  .per-inicio { padding-block: var(--e-7) var(--e-8); }
  .per-inicio__rejilla {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--e-8);
    align-items: start;
  }
}

.per-guia { padding-bottom: var(--e-6); }
.per-guia__cabeza { margin-bottom: var(--e-4); }
/* En celular los dos botones de la portada caben en un renglón: el segundo dice solo «Programa» */
@media (max-width: 419.98px) {
  .per-solo-ancho { display: none; }
}
.per-guia__titulo { font-size: var(--t-xl); line-height: 1.08; }
/* El cierre de la portada, a todo el ancho: a la izquierda el aviso y la fecha; a la derecha,
   las fuentes. Los dos llenan su columna (sin el ancho de lectura de 40rem). */
.per-guia__cierre { display: grid; gap: var(--e-4); margin-top: var(--e-5); }
.per-guia__cierre .aviso { max-width: none; margin: 0; }
.per-guia__cierre .actualizado { margin-top: var(--e-4); }
.per-guia__cierre .per-fuentes { max-width: none; margin-top: 0; }
@media (min-width: 900px) {
  .per-guia { padding-bottom: var(--seccion); }
  .per-guia__cierre {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--e-8);
    align-items: start;
    margin-top: var(--e-6);
  }
}

/* ==========================================================================
   /peregrinar/lugares · la foto de la iglesia, el esquema y el índice de lugares
   ========================================================================== */

/* La página abre con el esquema, a todo el ancho */
.per-vista { min-width: 0; }

/* Esquema propio: línea de 1.5 px y mancha plana, con los tokens del sitio */
.per-esquema { margin: 0; min-width: 0; }
.per-esquema__svg { width: 100%; height: auto; overflow: visible; color: var(--tinta-3); }
.per-esq__sol { fill: var(--vela); transition: fill var(--dur-tema) ease; }
.per-esq__colina {
  fill: var(--banda-piedra);
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: fill var(--dur-tema) ease;
}
.per-esq__suelo,
.per-esq__linea {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.per-esq__obra {
  fill: var(--superficie);
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: fill var(--dur-tema) ease;
}
.per-esq__camino {
  fill: none;
  stroke: var(--piedra);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 2 5;
  vector-effect: non-scaling-stroke;
}
.per-esq__hito { fill: var(--piedra); transition: fill var(--dur-tema) ease; }
.per-esq__cruz-azul {
  fill: none;
  stroke: var(--marca);
  stroke-width: 2.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.per-esq__estrella { fill: var(--vela); }
.per-esq__guia {
  fill: none;
  stroke: var(--linea-fuerte);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.per-esq__num { transform-box: fill-box; transform-origin: 50% 50%; }
.per-esq__num circle {
  fill: var(--fondo);
  stroke: var(--lit);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  transition: fill var(--dur-tema) ease, stroke var(--dur-tema) ease;
}
.per-esq__num text {
  fill: var(--lit);
  font-family: var(--f-titulo);
  font-size: 19px;
  font-weight: 600;
  font-variant-numeric: lining-nums;
  text-anchor: middle;
  transition: fill var(--dur-tema) ease;
}
/* Las dos medidas a pie, bajo los números: de la iglesia al pie de cada colina */
.per-esq__medida {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.per-esq__km {
  fill: var(--tinta-2);
  font-family: var(--f-texto);
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
  text-anchor: middle;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transition: fill var(--dur-tema) ease;
}
@media (max-width: 639.98px) {
  /* En celular el dibujo se encoge: los números crecen para seguir leyéndose (13 px a 375 px) */
  .per-esq__num { transform: scale(1.7); }
  .per-esq__km { transform: scale(1.75); }
}
.per-esquema__pie {
  max-width: 52rem;
  margin-top: var(--e-3);
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--tinta-3);
}
.per-esquema__pie strong { font-weight: 600; color: var(--tinta-2); }

/* Índice de lugares: cada fila se abre para leer la ficha completa */
.per-filas { margin-top: var(--e-7); }
.per-filas--primera { margin-top: 0; }
.per-filas + .aviso { margin-top: var(--e-6); }
.per-filas__cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-2) var(--e-5);
  margin-bottom: var(--e-4);
}
.per-filas__titulo { font-size: var(--t-xl); line-height: 1.08; }
.per-filas__todos {
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--enlace);
  font-size: var(--t-sm);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: .25em;
}
.per-filas__todos:hover { text-decoration-color: currentColor; }
.per-filas__lista { border-top: 1px solid var(--tinta); transition: border-color var(--dur-tema) ease; }

.per-fila {
  border-bottom: 1px solid var(--linea);
  scroll-margin-top: calc(var(--alto-cabecera) + .5rem);
  transition: border-color var(--dur-tema) ease;
}
.per-fila__cabeza {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) max-content;
  column-gap: var(--e-3);
  align-items: baseline;
  padding-block: var(--e-4);
  list-style: none;
  cursor: pointer;
}
.per-fila__cabeza::-webkit-details-marker { display: none; }
.per-fila__num {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--f-titulo);
  font-size: var(--t-lg);
  font-weight: 600;
  line-height: 1.12;
  font-variant-numeric: lining-nums tabular-nums;
  /* «01», «km»: dos signos no se parten en dos renglones en la columna angosta del celular */
  white-space: nowrap;
  color: var(--lit);
  transition: color var(--dur-tema) ease;
}
.per-fila__titulo {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  font-family: var(--f-titulo);
  font-size: var(--t-lg);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: 0;
}
.per-fila__desc {
  grid-column: 2;
  grid-row: 2;
  margin-top: .25rem;
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--tinta-2);
  text-wrap: pretty;
}
/* El dato corto de la derecha solo cabe desde tableta; en celular lo dice la descripción */
.per-fila__meta {
  display: none;
  font-size: var(--t-sm);
  line-height: 1.4;
  color: var(--tinta-3);
}
.per-fila__signo {
  grid-column: 3;
  grid-row: 1;
  align-self: center;
  width: .6rem;
  height: .6rem;
  margin: 0 .35rem .3rem var(--e-2);
  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;
}
.per-fila[open] .per-fila__signo { margin-bottom: -.2rem; transform: rotate(-135deg); }
.per-fila__cabeza:hover .per-fila__titulo {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .16em;
  text-decoration-color: var(--lit);
}
.per-fila__cabeza:focus-visible { outline-offset: -2px; }
.per-fila__cuerpo {
  display: grid;
  gap: var(--e-5) var(--e-7);
  padding: var(--e-2) 0 var(--e-6);
}
.per-fila__texto { min-width: 0; }
.per-fila__texto > * + * { margin-top: var(--e-4); }
.per-fila__texto > .tabla-envoltura { margin-bottom: 0; }
.per-fila__texto > .aviso { margin-bottom: 0; }
.per-fila__texto .prosa > p:last-child { margin-bottom: 0; }
.per-fila__foto { max-width: 20rem; }
/* Un recorte muy vertical (1:2) se encuadra a 3:4 para no alargar la ficha */
.per-fila__foto--alta .foto__img { aspect-ratio: 3 / 4; object-fit: cover; object-position: 30% 40%; }
.per-fila__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--e-5);
  margin: var(--e-4) 0 0;
}
.per-fila__pie .per-fuente { flex: 1 1 14rem; margin: 0; padding-block: .5rem; }
@media (min-width: 640px) {
  .per-fila__cabeza {
    grid-template-columns: 3rem minmax(0, 1fr) max-content max-content;
    column-gap: var(--e-4);
  }
  .per-fila__meta { display: block; grid-column: 3; grid-row: 1; text-align: right; white-space: nowrap; }
  .per-fila__signo { grid-column: 4; }
  .per-fila__cuerpo { padding-left: calc(3rem + var(--e-4)); }
}
@media (min-width: 900px) {
  .per-fila__cuerpo--foto { grid-template-columns: minmax(0, 38rem) minmax(0, 17rem); justify-content: space-between; align-items: start; }
  .per-fila__cuerpo:not(.per-fila__cuerpo--foto) .per-fila__texto { max-width: 44rem; }
}
/* Donde el navegador lo permite, la ficha se despliega en 280 ms */
@supports (interpolate-size: allow-keywords) {
  .per-fila { interpolate-size: allow-keywords; }
  .per-fila::details-content {
    block-size: 0;
    overflow-y: clip;
    transition: block-size var(--dur) var(--curva), content-visibility var(--dur) allow-discrete;
  }
  .per-fila[open]::details-content { block-size: auto; }
}

/* «A pie desde la iglesia»: una sola fila, entre el esquema y la lista, que se abre en una tabla */
.per-filas--apie { margin-top: var(--e-5); }
.per-filas--apie + .per-filas { margin-top: var(--e-6); }
.per-fila__num--km { font-size: var(--t-md); font-style: italic; font-weight: 500; }
@media (min-width: 900px) {
  .per-fila__cuerpo:not(.per-fila__cuerpo--foto) .per-apie { max-width: 50rem; }
}
.per-apie > .tabla-envoltura { margin-top: 0; }
.per-apie__tabla tbody th { width: 38%; }
.per-apie__tabla td { min-width: 0; }
.per-apie__tabla td:nth-child(2) { width: 28%; }
.per-apie .per-fuente strong { font-weight: 600; color: var(--tinta-2); }
/* Los tiempos de una subida según quién sube: los minutos y, al lado, para quién.
   Si la columna es angosta, el «para quién» baja al renglón siguiente. */
.per-tiempos { display: grid; gap: .2rem; margin: 0; padding: 0; list-style: none; }
.per-tiempos li { display: flex; flex-wrap: wrap; column-gap: .5rem; }
.per-tiempos__min { flex: 0 0 6.5rem; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.per-tiempos__quien { flex: 1 1 7rem; min-width: 0; color: var(--tinta-3); }
@media (max-width: 479.98px) {
  .per-apie__tabla tbody th,
  .per-apie__tabla td:nth-child(2) { width: auto; }
}

/* Ficha de un lugar: tres o cuatro datos entre filetes */
.per-ficha {
  margin: 0 0 var(--e-5);
  border-top: 1px solid var(--linea);
  transition: border-color var(--dur-tema) ease;
}
.per-ficha > div {
  display: grid;
  grid-template-columns: 6.25rem minmax(0, 1fr);
  column-gap: var(--e-4);
  padding-block: .55rem;
  border-bottom: 1px solid var(--linea);
  transition: border-color var(--dur-tema) ease;
}
.per-ficha dt {
  padding-top: .2em;
  font-size: var(--t-xs);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.per-ficha dd { margin: 0; font-size: var(--t-sm); line-height: 1.5; color: var(--tinta); }

/* Antes de subir a las colinas: el texto y, a un lado, el camino de piedras.
   En celular la foto flota a la derecha y el texto la rodea. */
.per-subir {
  display: flow-root;
  margin-top: var(--e-7);
  padding-top: var(--e-6);
  border-top: 1px solid var(--linea);
  transition: border-color var(--dur-tema) ease;
}
.per-subir__titulo { margin-bottom: var(--e-4); font-size: var(--t-xl); line-height: 1.08; }
.per-subir__foto { float: right; width: 8.5rem; margin: .35rem 0 var(--e-3) var(--e-4); }
.per-subir__foto .foto__img { aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 42%; }
.per-subir__foto .foto__pie { font-size: var(--t-xs); }
@media (min-width: 760px) {
  .per-subir {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 15rem);
    gap: var(--e-5) var(--e-7);
    align-items: start;
  }
  .per-subir__texto { grid-column: 1; grid-row: 1; }
  .per-subir__foto { float: none; grid-column: 2; grid-row: 1; width: auto; margin: 0; }
  .per-subir__foto .foto__pie { font-size: var(--t-sm); }
}
@media (min-width: 900px) {
  .per-subir { padding-top: var(--e-7); }
}

/* ==========================================================================
   /peregrinar/programa · las dos temporadas, lado a lado
   ========================================================================== */

.per-hoy-linea {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  margin: 0 0 var(--e-5);
  font-family: var(--f-titulo);
  font-size: var(--t-md);
  font-style: italic;
  font-weight: 500;
  line-height: 1.3;
  color: var(--tinta);
}
.per-hoy-linea .punto-lit { transform: translateY(-.15em); }

.per-temporadas { display: grid; gap: var(--e-6); }
.per-temporada { min-width: 0; }
/* Cada temporada es un <details> abierto: sin JavaScript se leen las dos completas;
   con él, en celular queda abierta la vigente y la otra se pliega a un toque. */
.per-temporada__cabeza {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  gap: var(--e-2) var(--e-3);
  list-style: none;
  cursor: pointer;
}
.per-temporada__cabeza::-webkit-details-marker { display: none; }
.per-temporada__cabeza:focus-visible { outline-offset: 2px; }
.per-temporada__titulo { grid-column: 1; font-size: var(--t-md); font-weight: 600; line-height: 1.2; letter-spacing: 0; }
.per-temporada__cabeza .per-marca { grid-column: 1; justify-self: start; }
.per-temporada__rango { grid-column: 1 / -1; font-size: var(--t-sm); color: var(--tinta-3); }
.per-temporada__signo {
  grid-column: 2;
  grid-row: 1;
  width: .6rem;
  height: .6rem;
  margin: 0 .35rem .3rem var(--e-2);
  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;
}
.per-temporada[open] .per-temporada__signo { margin-bottom: -.2rem; transform: rotate(-135deg); }
.per-temporada--vigente { order: -1; }
@media (min-width: 640px) {
  .per-temporada__cabeza { grid-template-columns: minmax(0, max-content) max-content minmax(0, 1fr) max-content; }
  .per-temporada__cabeza .per-marca { grid-column: 2; grid-row: 1; }
  .per-temporada__signo { grid-column: 4; }
}
.per-temporada .tabla-envoltura { margin: var(--e-3) 0 0; }
.per-temporada__nota { margin: var(--e-3) 0 0; font-size: var(--t-sm); line-height: 1.5; color: var(--tinta-3); }
.per-temporada .tabla th,
.per-temporada .tabla td { padding-block: .6rem; }
.per-temporada .tabla td { min-width: 0; }
.per-temporada .tabla tbody th { width: 1%; padding-right: var(--e-4); }
/* La temporada vigente (la marca programa.js): filete del color del tiempo */
.per-temporada--vigente .tabla-envoltura {
  border-top: 3px solid var(--lit);
  transition: border-color var(--dur-tema) ease;
}
.per-marca {
  display: inline-block;
  padding: .15rem .55rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: var(--f-texto);
  font-size: var(--t-xs);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .04em;
  white-space: nowrap;
  vertical-align: .05em;
  color: var(--lit);
  transition: color var(--dur-tema) ease;
}
.per-marca--tenue { color: var(--tinta-3); }
/* El día de hoy, dentro de la temporada vigente */
.per-temporada .tabla tr.per-hoy th,
.per-temporada .tabla tr.per-hoy td {
  background-color: var(--lit-suave);
  transition: background-color var(--dur-tema) ease;
}
.per-temporada .tabla tr.per-hoy th { border-left: 3px solid var(--lit); padding-left: .6rem; }
.per-hoy .per-marca { margin-left: .35rem; }

.per-celda { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.per-celda__nota { display: block; color: var(--piedra-texto); }
@media (min-width: 480px) {
  .per-celda li { display: grid; grid-template-columns: 6rem minmax(0, 1fr); column-gap: var(--e-3); }
}
@media (min-width: 900px) {
  .per-temporadas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-7); align-items: start; }
}

.per-programa__mas { margin-top: var(--e-7); }
.per-programa__mas-rejilla { display: grid; gap: var(--e-6); }
.per-programa__mas .per-ficha { margin: var(--e-4) 0 0; }
.per-programa__mas .lista-ed { margin-top: var(--e-4); }
@media (min-width: 900px) {
  .per-programa__mas-rejilla { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--e-7); align-items: start; }
}

/* ==========================================================================
   /peregrinar/fechas · el calendario
   ========================================================================== */

.per-fechas__anio th {
  padding-top: var(--e-5);
  font-family: var(--f-titulo);
  font-size: var(--t-lg);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--lit);
  transition: color var(--dur-tema) ease;
}
.per-fechas tbody th[scope="row"] { width: 34%; }
.per-fechas .per-marca { margin-left: .35rem; }
/* Fechas que ya pasaron (las marca programa.js): se atenúan, pero se siguen leyendo */
.per-fechas tr.per-pasada th,
.per-fechas tr.per-pasada td,
.per-fechas tr.per-pasada .per-tabla__detalle { color: var(--tinta-3); }
.per-fechas tr.per-pasada th { font-weight: 400; }
.per-fechas tr.per-pasada a { color: inherit; }
@media (min-width: 640px) {
  .per-fechas tbody th[scope="row"] { width: 15rem; }
}
/* En celular, la fecha va encima de lo que se celebra: así el texto usa todo el ancho */
@media (max-width: 479.98px) {
  .per-fechas, .per-fechas tbody, .per-fechas tr, .per-fechas th, .per-fechas td { display: block; }
  .per-fechas thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .per-fechas tbody th[scope="row"] { width: auto; padding: .55rem 0 0; color: var(--lit); transition: color var(--dur-tema) ease; }
  .per-fechas td { min-width: 0; padding: .05rem 0 .55rem; border-top: 0; }
  .per-fechas tr.per-pasada th[scope="row"] { color: var(--tinta-3); }
}

/* ==========================================================================
   Una foto por página (lámina). En celular, una banda apaisada al principio del bloque;
   en escritorio, debajo del título, en la columna izquierda del bloque.
   ========================================================================== */

.per-lamina { margin-top: var(--e-4); }
.per-lamina .foto__img { aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 45%; }
@media (min-width: 900px) {
  .per-lamina { margin-top: var(--e-5); }
  .per-lamina .foto__img { aspect-ratio: auto; }
  /* Un recorte muy vertical se encuadra a 3:4 */
  .per-lamina--alta .foto__img { aspect-ratio: 3 / 4; object-position: 50% 42%; }
}

/* /peregrinar/planear · las preguntas y, a un lado, la foto del camino */
.per-con-lamina { display: grid; gap: var(--e-5); }
.per-con-lamina + .aviso { margin-top: var(--e-6); }
.per-lamina--lado { margin-top: 0; }
@media (min-width: 900px) {
  .per-lamina--lado .foto__img { aspect-ratio: 21 / 9; }
}
@media (min-width: 1100px) {
  .per-con-lamina {
    grid-template-columns: minmax(0, 1fr) minmax(0, 17rem);
    column-gap: var(--e-8);
    align-items: start;
  }
  .per-con-lamina > .per-filas { grid-column: 1; grid-row: 1; }
  .per-con-lamina > .per-lamina--lado {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: calc(var(--alto-cabecera) + 1.5rem);
  }
  .per-lamina--lado .foto__img { aspect-ratio: 3 / 4; }
}
.per-aviso-ancho { max-width: 52rem; }

/* /peregrinar/programa · la iglesia, bajo las Misas de la mañana */
.per-programa__foto { margin-top: var(--e-5); }
.per-programa__foto .foto__img { aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 32%; }

/* /peregrinar/como-llegar · distancias: en celular, cada aeropuerto con sus dos datos debajo */
@media (max-width: 479.98px) {
  .per-rutas, .per-rutas caption, .per-rutas tbody, .per-rutas tr, .per-rutas th, .per-rutas td { display: block; }
  .per-rutas thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .per-rutas tbody th { padding: .65rem 0 0; }
  .per-rutas td { min-width: 0; padding: .15rem 0 0; border-top: 0; }
  .per-rutas td:last-child { padding-bottom: .65rem; }
  .per-rutas td[data-rotulo]::before { content: attr(data-rotulo) ": "; font-weight: 600; color: var(--tinta-3); }
  /* Los enlaces de la tabla, con zona táctil suficiente */
  .per-rutas td > a:only-child { display: inline-block; padding-block: .3rem; }
}

/* ==========================================================================
   /peregrinar/preparar · lista para imprimir, con casillas (no se guarda nada)
   ========================================================================== */

.per-lista__imprimir { margin: var(--e-4) 0 0; }
.per-listas { display: grid; gap: var(--e-6); max-width: 52rem; }
@media (min-width: 640px) {
  .per-listas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-7); align-items: start; }
}
.per-lista { min-width: 0; margin: 0; padding: 0; border: 0; }
.per-lista__titulo {
  padding: 0;
  margin-bottom: var(--e-3);
  font-family: var(--f-titulo);
  font-size: var(--t-lg);
  font-weight: 600;
  line-height: 1.15;
  color: var(--tinta);
}
.per-casillas {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--tinta);
  transition: border-color var(--dur-tema) ease;
}
.per-casillas li { border-bottom: 1px solid var(--linea); transition: border-color var(--dur-tema) ease; }
.per-casillas label {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  column-gap: var(--e-3);
  align-items: start;
  min-height: 2.75rem;
  padding-block: .65rem;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--tinta);
  cursor: pointer;
}
.per-casillas input { width: 1.25rem; height: 1.25rem; margin: .1rem 0 0; accent-color: var(--marca); }
.per-casillas a { color: var(--enlace); }
.per-casillas label:has(input:checked) span { color: var(--tinta-3); }
.per-listas + .per-fuente { margin-top: var(--e-4); }

/* ==========================================================================
   /peregrinar/itinerarios · dos planes, día por día
   ========================================================================== */

.per-epoca { display: grid; gap: var(--e-3); margin-bottom: var(--e-6); }
.per-epoca__selector { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-4); }
.per-epoca__rotulo {
  margin: 0;
  font-family: var(--f-titulo);
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.2;
}
.per-epoca__nota { max-width: 52rem; margin: 0; font-size: var(--t-sm); line-height: 1.5; color: var(--tinta-2); }
.per-epoca__acciones { display: flex; flex-wrap: wrap; gap: 0 var(--e-5); }
.per-epoca__acciones:not(:has(button:not([hidden]))) { display: none; }

.per-planes { display: grid; gap: var(--e-7); }
.per-plan { min-width: 0; margin-top: 0; }
.per-plan .per-filas__cabeza { margin-bottom: var(--e-2); }
.per-plan__cuando {
  margin-left: .35em;
  font-size: .6em;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--tinta-2);
  white-space: nowrap;
}
.per-plan__intro { max-width: var(--ancho-texto); margin: 0 0 var(--e-4); font-size: var(--t-sm); line-height: 1.5; color: var(--tinta-2); }
.per-plan .per-fila__cabeza { grid-template-columns: 2.25rem minmax(0, 1fr) max-content; }
.per-plan .per-fila__signo { grid-column: 3; }
/* Las horas de cada día: a la izquierda la hora (o «Por la mañana»); a la derecha, qué y dónde */
.per-dia { font-size: 1rem; line-height: 1.5; color: var(--tinta-2); }
.per-dia li { padding-block: .5rem; border-top: 1px solid var(--linea); transition: border-color var(--dur-tema) ease; }
.per-dia li:first-child { padding-top: 0; border-top: 0; }
.per-dia a { color: var(--enlace); }
@media (min-width: 480px) {
  .per-dia li { grid-template-columns: 7.25rem minmax(0, 1fr); }
}
@media (min-width: 640px) {
  .per-plan .per-fila__cabeza { grid-template-columns: 3rem minmax(0, 1fr) max-content; }
}
@media (min-width: 1100px) {
  .per-planes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-8); align-items: start; }
}

/* ==========================================================================
   Impresión: las fichas plegadas se imprimen abiertas donde el navegador lo permite
   ========================================================================== */

@media print {
  .per-fila::details-content,
  .per-fuentes::details-content { content-visibility: visible; block-size: auto; }
  .per-fila__signo, .per-filas__todos, .per-epoca__selector, .per-epoca__acciones, .per-lista__imprimir { display: none; }
  .per-bloque, .per-fila, .per-lista { break-inside: avoid; }
  .per-planes { display: block; }
  .per-plan + .per-plan { margin-top: 1.5rem; }
  .per-fila__cuerpo { padding-bottom: .75rem; }
  .per-lamina, .per-subir__foto { max-width: 7cm; }
  /* «Imprimir la lista» (data-imprimir="lista"): solo sale la lista de Qué llevar */
  :root[data-imprimir="lista"] .cabecera-pagina,
  :root[data-imprimir="lista"] .per-bloque:not(.per-bloque--lista),
  :root[data-imprimir="lista"] .per-cierre,
  :root[data-imprimir="lista"] .per-bloque--lista .per-fuente { display: none; }
  :root[data-imprimir="lista"] .per-bloque--lista { display: block; padding: 0; border: 0; }
  :root[data-imprimir="lista"] .per-listas { margin-top: 1rem; }
}