/* ==========================================================================
   Orar como en Medjugorje: portada, Rosario y Vía Crucis guiados, confesión,
   Haz silencio y oraciones.
   Sistema «Piedra, cielo y vela»: solo tokens de sitio.css y clases con el prefijo .orar-.
   Filetes de 1 px y manchas planas; sin sombras, sin cajas, sin degradados con volumen.
   Los componentes compartidos (.cabecera-pagina, .subnav, .lista-ed, .foto, .aviso, .fuentes,
   .acordeon, .chips, .paginacion, .franja-silencio) se usan con su marcado y no se reestilizan:
   aquí solo se ajusta su encuadre dentro de esta sección.
   ========================================================================== */

/* ---------- Piezas comunes de la sección ---------- */

/* El título lleva las palabras con que se busca, en dos renglones: el nombre y, más chico, el lugar */
.orar-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);
}

/* Fuentes plegadas al pie de una página: un renglón entre filetes */
.orar-fuentes {
  max-width: var(--ancho-texto);
  margin-top: var(--e-6);
  border-block: 1px solid var(--linea);
  transition: border-color var(--dur-tema) ease;
}
.orar-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;
}
.orar-fuentes > summary::-webkit-details-marker { display: none; }
.orar-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;
}
.orar-fuentes[open] > summary::after { margin-bottom: -.15rem; transform: rotate(-135deg); }
.orar-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;
}
.orar-fuentes__cuenta { margin-left: .4rem; font-weight: 400; letter-spacing: 0; color: var(--tinta-3); }
.orar-fuentes .fuentes { margin: 0; padding: 0 0 var(--e-5); border-top: 0; }

/* Final de página: paginación y fuentes */
.orar-final { padding-block: var(--e-6) var(--seccion); }
.orar-final .paginacion { margin-top: 0; }

/* Rejilla de dos columnas: un texto y, a su lado, una foto, una lista o una ilustración */
.orar-dos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-6);
  align-items: start;
}
@media (min-width: 960px) {
  .orar-dos { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--e-8); }
  .orar-dos--centrado { align-items: center; }
}
.orar-dos__texto { max-width: var(--ancho-texto); }
.orar-dos__texto > :last-child { margin-bottom: 0; }
.orar-dos__texto .aviso { margin-block: var(--e-4); }

/* Horarios: lista de definiciones entre filetes */
.orar-horarios { margin: 0; }
.orar-horarios__titulo {
  margin: 0 0 var(--e-3);
  font-family: var(--f-titulo);
  font-size: var(--t-lg);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0;
}
.orar-horarios dl { margin: 0; border-top: 1px solid var(--linea); }
.orar-horarios__fila { padding: var(--e-3) 0; border-bottom: 1px solid var(--linea); }
.orar-horarios dt { margin: 0 0 .15rem; font-weight: 600; line-height: 1.35; color: var(--tinta); }
.orar-horarios dd { margin: 0; line-height: 1.5; color: var(--tinta-2); font-variant-numeric: lining-nums tabular-nums; }
.orar-horarios__nota { margin: var(--e-3) 0 0; font-size: var(--t-sm); color: var(--tinta-3); }
.orar-horarios .aviso { margin-bottom: 0; }

/* ==========================================================================
   /orar · portada (composición A) con el índice editorial de las formas de orar
   ========================================================================== */

/* Encuadre del relieve de la Anunciación: en celular, la franja de la Virgen y el ángel;
   en escritorio, el relieve entero con su paloma */
.orar-portada .foto__img { object-position: 50% 52%; }
@media (min-width: 900px) {
  .orar-portada .foto__img { object-position: 50% 38%; }
}
/* El segundo botón de la cabecera solo cabe con holgura desde tableta */
.orar-solo-ancho { display: none; }
@media (min-width: 640px) {
  .orar-solo-ancho { display: inline-flex; }
}

.orar-indice { padding-block: var(--e-6) var(--seccion); }
.orar-indice__titulo { margin: 0 0 var(--e-3); }

/* Cada forma de orar es un renglón: su foto, su número, su nombre y una flecha */
.orar-formas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 1px 0 0;
  list-style: none;
}
.orar-forma {
  position: relative;
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr) max-content;
  column-gap: var(--e-4);
  align-items: center;
  min-width: 0;
  margin-top: -1px;
  padding-block: var(--e-3);
  border-block: 1px solid var(--linea);
  transition: border-color var(--dur-tema) ease;
}
.orar-forma--texto { grid-template-columns: minmax(0, 1fr) max-content; min-height: 4.75rem; }
.orar-forma__foto .foto__img { aspect-ratio: 4 / 3; object-fit: cover; }
/* El pie y el crédito de estas miniaturas se leen con lector de pantalla; a la vista,
   cada foto lleva su pie en la página a la que conduce y el crédito está en el pie del sitio. */
.orar-forma__foto .foto__pie {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.orar-forma--rosario .foto__img { object-position: 50% 52%; }
.orar-forma--via .foto__img { object-position: 50% 40%; }
.orar-forma--confesion .foto__img { object-position: 50% 30%; }
.orar-forma--silencio .foto__img { object-position: 50% 62%; }
.orar-forma__cuerpo { min-width: 0; }
.orar-forma__titulo {
  margin: 0;
  font-family: var(--f-titulo);
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0;
}
.orar-forma__num {
  margin-right: .35em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--lit);
  transition: color var(--dur-tema) ease;
}
.orar-forma__titulo a { color: var(--tinta); text-decoration: none; }
/* Todo el renglón es el enlace */
.orar-forma__titulo a::after { content: ""; position: absolute; inset: 0; }
.orar-forma:hover .orar-forma__titulo a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .16em;
  text-decoration-color: var(--lit);
}
.orar-forma__titulo a:focus-visible { outline: none; }
.orar-forma__titulo a:focus-visible::after { outline: 2px solid var(--foco); outline-offset: -2px; }
.orar-forma__desc {
  margin: .2rem 0 0;
  font-size: var(--t-sm);
  line-height: 1.4;
  color: var(--tinta-2);
  text-wrap: pretty;
}
.orar-forma > .flecha { color: var(--tinta-3); }
.orar-forma:hover > .flecha { color: var(--lit); transform: translateX(3px); }
@media (min-width: 640px) {
  .orar-forma { grid-template-columns: 9rem minmax(0, 1fr) max-content; column-gap: var(--e-5); padding-block: var(--e-4); }
  .orar-forma--texto { grid-template-columns: minmax(0, 1fr) max-content; }
  .orar-forma__titulo { font-size: var(--t-lg); }
}
@media (min-width: 900px) {
  .orar-formas { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e-7); }
}

/* Lo que reza la parroquia: un texto breve y, al lado, dos salidas y su fuente, entre filetes */
.orar-parroquia .orar-dos { gap: var(--e-5); }
.orar-parroquia__salidas { max-width: var(--ancho-texto); }
.orar-parroquia .orar-fuentes { margin-top: 0; border-top: 0; }
@media (min-width: 960px) {
  .orar-parroquia .orar-dos { gap: var(--e-8); }
}

/* ==========================================================================
   /orar/rosario y /orar/via-crucis · la oración guiada
   La cabecera es la composición A, más baja: la oración empieza en la primera pantalla.
   ========================================================================== */

.orar-guia { padding-bottom: var(--e-5); }
.orar-guia .foto__img {
  height: 20vh;
  height: 20svh;
  max-height: 20svh;
  min-height: 7.5rem;
}
/* El crucifijo del camino: en celular, de la cubierta a la cintura */
.orar-guia--via .foto__img { object-position: 50% 34%; }
@media (min-width: 900px) {
  /* Baja: el primer paso y sus botones caben en la primera pantalla (1366 × 900) */
  .orar-guia { min-height: clamp(14rem, 30vh, 17rem); padding-block: var(--e-5); }
  .orar-guia .foto__img { height: 100%; max-height: none; min-height: 0; }
  .orar-guia--via .foto__img { object-position: 50% 42%; }
}

.orar-rezar { padding-block: var(--e-5) var(--seccion); }

/* El recorrido: sin JavaScript, una lectura completa con su índice; con JavaScript,
   un paso por pantalla (data-vista="pasos") o la lectura completa (data-vista="todo"). */
.orar-recorrido {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: 42rem;
}
.orar-recorrido__aviso { margin: 0 0 var(--e-4); color: var(--tinta-2); }

/* Elegir los misterios (solo en el Rosario) */
.orar-elegir {
  display: grid;
  gap: var(--e-2);
  margin: 0 0 var(--e-4);
}
.orar-elegir__hoy { margin: 0; font-size: var(--t-sm); line-height: 1.45; color: var(--tinta-2); }
/* Los cuatro grupos de misterios. Por debajo de 400 px van en dos filas de dos (así los deja
   .chips, de sitio.css); de 400 a 480 px caben en un renglón, a partes iguales; después,
   cada uno con su ancho. */
.orar-elegir .chip { justify-content: center; }
@media (min-width: 400px) and (max-width: 479.98px) {
  .orar-elegir .chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .25rem; }
  .orar-elegir .chip { min-height: 2.75rem; padding-inline: .2rem; font-size: var(--t-xs); }
}
@media (min-width: 480px) {
  .orar-elegir .chips { gap: .375rem; }
  .orar-elegir .chip { padding-inline: .9rem; }
}

/* El mapa de la oración: en celular, una tira de cuentas numeradas; en escritorio, una columna
   al lado, con el nombre de cada parte. Sin JavaScript son enlaces a cada paso. */
.orar-mapa { margin: 0 0 var(--e-4); min-width: 0; }
/* La tira es de un solo renglón: si no cabe (las catorce estaciones), se desliza de lado
   y recorrido.js lleva a la vista la parte en que vas. */
.orar-mapa__lista {
  display: flex;
  gap: .375rem;
  margin: -3px calc(-1 * var(--margen));
  padding: 3px var(--margen);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  list-style: none;
}
.orar-mapa__lista::-webkit-scrollbar { display: none; }
.orar-mapa__lista > li { flex: none; }
.orar-mapa__enlace {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.375rem;
  min-height: 2.375rem;
  padding: 0 .6rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: 999px;
  color: var(--tinta-2);
  font-size: var(--t-sm);
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  text-decoration: none;
  transition: background-color var(--dur-rapida) ease, border-color var(--dur-rapida) ease, color var(--dur-rapida) ease;
}
.orar-mapa__enlace:hover { border-color: var(--tinta); color: var(--tinta); }
.orar-mapa__enlace:focus-visible { border-radius: 999px; }
.orar-mapa__enlace[aria-current]:not([aria-current="false"]) {
  border-color: var(--lit);
  background-color: var(--lit);
  color: var(--lit-tinta);
}
/* El misterio de cada decena solo se nombra cuando ya están elegidos (con JavaScript) */
.orar-mapa__de { display: none; }
.orar-recorrido[data-vista] .orar-mapa__de { display: block; }
/* En la tira, el nombre largo de cada parte solo se lee con lector de pantalla */
.orar-mapa__enlace:not(.orar-mapa__enlace--nombre) .orar-mapa__nombre,
.orar-recorrido[data-vista] .orar-mapa__de {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* El renglón del paso: dónde vas y cómo ver todo */
.orar-recorrido__linea {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  min-height: 3.25rem;
  padding-block: var(--e-1);
  border-block: 1px solid var(--linea);
  /* html ya deja libre la cabecera (scroll-padding-top): aquí no hace falta más */
  scroll-margin-top: 0;
  transition: border-color var(--dur-tema) ease;
}
.orar-recorrido__estado {
  position: relative;
  margin: 0;
  min-width: 0;
  font-size: var(--t-xs);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--lit);
  transition: color var(--dur-tema) ease;
}
.orar-recorrido__todo { flex: none; margin-right: -.6rem; padding-inline: .6rem; }
/* En la lectura completa, el renglón acompaña la lectura: desde ahí se vuelve al paso a paso */
.orar-recorrido[data-vista="todo"] .orar-recorrido__linea {
  position: sticky;
  top: var(--alto-cabecera);
  z-index: 4;
  margin-inline: calc(-1 * var(--margen));
  padding-inline: var(--margen);
  background-color: var(--velo);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.orar-recorrido[data-vista="todo"] .orar-recorrido__todo { margin-right: 0; }
.orar-recorrido__cuerpo { min-width: 0; }

/* Los pasos */
.orar-paso {
  min-width: 0;
  padding-block: var(--e-6);
  border-bottom: 1px solid var(--linea);
  transition: border-color var(--dur-tema) ease;
}
/* Con JavaScript, el renglón del paso queda encima: un ancla a un paso le deja su lugar */
.orar-recorrido[data-vista] .orar-paso { scroll-margin-top: 3rem; }
.orar-paso > :last-child { margin-bottom: 0; }
.orar-paso__antes { margin: 0 0 var(--e-2); }
.orar-paso__titulo {
  margin: 0 0 var(--e-4);
  font-family: var(--f-titulo);
  font-size: var(--t-xl);
  font-weight: 500;
  line-height: 1.1;
}
.orar-paso__nota { margin: 0 0 var(--e-4); color: var(--tinta-2); }
.orar-paso__sub {
  margin: var(--e-6) 0 var(--e-3);
  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(--tinta-3);
}
.orar-paso__recuerda { display: none; margin: 0 0 var(--e-4); font-size: var(--t-sm); color: var(--tinta-3); }
.orar-recorrido[data-vista] .orar-paso__recuerda { display: block; }
.orar-paso__recuerda [data-serie] {
  display: block;
  margin-top: .1rem;
  font-family: var(--f-titulo);
  font-size: var(--t-md);
  font-style: italic;
  font-weight: 500;
  line-height: 1.2;
  color: var(--tinta);
}

/* Una oración, verso por verso */
.orar-oracion {
  margin: 0 0 var(--e-5);
  font-size: var(--t-lectura);
  line-height: 1.6;
  color: var(--tinta);
}
.orar-oracion--chica { font-size: var(--t-base); line-height: 1.6; }
.orar-oracion__nota { margin: 0 0 var(--e-3); font-size: var(--t-sm); color: var(--tinta-3); }

/* Los cuatro grupos de misterios dentro de cada misterio (lectura completa sin JavaScript) */
.orar-misterios {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-4) var(--e-6);
  align-items: start;
  margin: 0 0 var(--e-5);
}
@media (min-width: 640px) {
  .orar-misterios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.orar-misterio {
  min-width: 0;
  padding-left: var(--e-4);
  border-left: 2px solid var(--lit);
  transition: border-color var(--dur-tema) ease;
}
.orar-misterio .etiqueta { margin-bottom: var(--e-1); color: var(--tinta-3); }
.orar-misterio__titulo {
  margin: 0 0 var(--e-1);
  font-family: var(--f-titulo);
  font-size: var(--t-lg);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.005em;
  text-wrap: balance;
}
.orar-misterio__ref { margin: 0; font-size: var(--t-sm); color: var(--tinta-3); font-variant-numeric: lining-nums; }
.orar-misterio .foto { margin-top: var(--e-4); max-width: 20rem; }
.orar-misterio .foto__img { aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 12%; }
/* Con los misterios ya elegidos, el del paso se ve solo y grande */
.orar-recorrido[data-vista] .orar-misterios { grid-template-columns: minmax(0, 1fr); }
.orar-recorrido[data-vista] .orar-misterio .etiqueta { color: var(--lit); }
.orar-recorrido[data-vista] .orar-misterio__titulo { font-size: var(--t-xl); font-weight: 500; line-height: 1.1; }
.orar-recorrido[data-vista] .orar-paso--misterio .orar-paso__titulo {
  margin-bottom: var(--e-4);
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--tinta-2);
}
@media (min-width: 640px) {
  .orar-recorrido[data-vista] .orar-misterio:has(.foto) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 13rem;
    column-gap: var(--e-5);
    align-items: start;
  }
  .orar-recorrido[data-vista] .orar-misterio:has(.foto) > * { grid-column: 1; }
  .orar-recorrido[data-vista] .orar-misterio:has(.foto) > .foto { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; }
}

/* Paso a paso: solo el paso en que vas. Su antetítulo ya está en el renglón de arriba.
   El panel tiene una altura mínima, no fija: una oración corta queda centrada en ella y no
   deja un hueco sobre los botones; una larga crece lo que haga falta. */
.orar-recorrido[data-vista="pasos"] .orar-paso:not([data-actual]) { display: none; }
.orar-recorrido[data-vista="pasos"] .orar-paso {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 12rem;
  padding-block: var(--e-5);
  border-bottom: 0;
}
@media (min-width: 640px) {
  .orar-recorrido[data-vista="pasos"] .orar-paso { min-height: 15rem; }
}
.orar-recorrido[data-vista="pasos"] .orar-paso__antes,
.orar-recorrido[data-vista="pasos"] .orar-estacion__numero { display: none; }
.orar-paso--entra { animation: orar-fundido var(--dur-rapida) ease both; }
@keyframes orar-fundido { from { opacity: 0; } to { opacity: 1; } }
/* Lectura completa con JavaScript: sin cuentas */
.orar-recorrido[data-vista="todo"] .orar-cuentas { display: none; }

/* Las cuentas: círculos planos sobre un hilo. Las rezadas, del azul de los rosarios;
   la que toca, del color del tiempo. */
.orar-cuentas {
  position: relative;
  display: flex;
  align-items: center;
  gap: .5rem;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 var(--e-5);
  padding-block: .3rem;
}
.orar-cuentas::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  border-top: 1px solid var(--linea-fuerte);
}
.orar-cuenta {
  position: relative;
  flex: none;
  width: clamp(1.125rem, 5.4vw, 1.625rem);
  aspect-ratio: 1;
  border: 1.5px solid var(--linea-fuerte);
  border-radius: 50%;
  background-color: var(--fondo);
  transition: background-color var(--dur-rapida) ease, border-color var(--dur-rapida) ease, transform var(--dur-rapida) var(--curva);
}
.orar-cuenta--rezada { border-color: var(--marca); background-color: var(--cielo); }
.orar-cuenta--actual {
  border-color: var(--lit);
  background-color: var(--lit);
  outline: 2px solid color-mix(in srgb, var(--lit) 35%, transparent);
  outline-offset: 2px;
  transform: scale(1.12);
}

/* Vía Crucis */
.orar-estacion__numero { margin: 0 0 var(--e-2); }
.orar-aclamacion {
  margin: 0 0 var(--e-4);
  padding-left: var(--e-4);
  border-left: 2px solid var(--lit);
  font-family: var(--f-titulo);
  font-size: var(--t-md);
  font-style: italic;
  font-weight: 500;
  line-height: 1.3;
  transition: border-color var(--dur-tema) ease;
}
.orar-aclamacion abbr {
  margin-right: .15em;
  font-family: var(--f-texto);
  font-size: var(--t-sm);
  font-style: normal;
  font-weight: 600;
  color: var(--tinta-3);
  text-decoration: none;
}
.orar-estacion__ref { margin: 0 0 var(--e-3); font-size: var(--t-sm); color: var(--tinta-3); font-variant-numeric: lining-nums; }
.orar-estacion__invitacion { margin: 0 0 var(--e-5); font-size: var(--t-lectura); line-height: 1.55; }
.orar-paso .acordeon { max-width: none; }
.orar-paso .acordeon > summary { font-size: var(--t-base); font-family: var(--f-texto); font-weight: 500; }
.orar-paso .acordeon > div { color: var(--tinta); }
.orar-paso .acordeon .orar-oracion { font-size: var(--t-base); }
.orar-paso .acordeon .orar-paso__sub:first-child { margin-top: var(--e-2); }
.orar-paso > .foto { margin: 0 0 var(--e-5); max-width: 30rem; }
.orar-paso > .foto--apaisada .foto__img { aspect-ratio: 3 / 2; object-position: 50% 30%; }

/* Anterior y siguiente.
   En celular, una barra al alcance del pulgar: se pega al borde de abajo mientras la oración
   sigue más allá de la pantalla y, al llegar a su final, queda justo debajo del último verso
   (no lo tapa). Con una oración corta va pegada a ella, sin hueco.
   Desde 640 px los botones no flotan: van debajo de la oración, sobre un filete, y no hay
   velo que pueda tapar un verso. */
.orar-recorrido__controles {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-3);
  margin-inline: calc(-1 * var(--margen));
  padding: var(--e-3) var(--margen) calc(var(--e-3) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--linea);
  background-color: var(--velo);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background-color var(--dur-tema) ease, border-color var(--dur-tema) ease;
}
.orar-recorrido__controles .boton { width: 100%; min-height: 3rem; }
.orar-recorrido__controles .boton:disabled { opacity: .45; cursor: default; }
.orar-recorrido__controles .boton--secundario:disabled:hover { background-color: transparent; border-color: var(--borde-campo); }
@media (min-width: 640px) {
  .orar-recorrido__controles {
    position: static;
    display: flex;
    justify-content: space-between;
    margin-inline: 0;
    padding: var(--e-4) 0 0;
    background-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .orar-recorrido__controles .boton { width: auto; min-width: 11rem; }
}

/* Escritorio: el mapa pasa a una columna al lado, con el nombre de cada parte */
@media (min-width: 1000px) {
  .orar-recorrido {
    grid-template-columns: minmax(0, 42rem) minmax(13rem, 17rem);
    column-gap: var(--e-8);
    max-width: none;
  }
  .orar-recorrido > * { grid-column: 1; }
  .orar-recorrido > .orar-mapa {
    grid-column: 2;
    grid-row: 1 / span 6;
    align-self: start;
    position: sticky;
    top: calc(var(--alto-cabecera) + var(--e-5));
    max-height: calc(100vh - var(--alto-cabecera) - 3rem);
    margin: 0;
    overflow-y: auto;
  }
  .orar-mapa__lista { display: block; margin: 0; padding: 0; overflow: visible; border-left: 1px solid var(--linea); }
  .orar-mapa__enlace {
    display: grid;
    grid-template-columns: 1.625rem minmax(0, 1fr);
    column-gap: var(--e-2);
    align-items: baseline;
    justify-content: start;
    min-height: 0;
    margin-left: -1px;
    padding: .4rem 0 .4rem var(--e-4);
    border: 0;
    border-left: 2px solid transparent;
    border-radius: 0;
    line-height: 1.35;
    text-align: left;
  }
  .orar-mapa__enlace:hover { border-left-color: var(--linea-fuerte); }
  .orar-mapa__enlace:focus-visible { border-radius: 2px; outline-offset: -2px; }
  .orar-mapa__enlace[aria-current]:not([aria-current="false"]) {
    border-left-color: var(--lit);
    background-color: transparent;
    color: var(--tinta);
    font-weight: 600;
  }
  .orar-mapa__marca {
    font-family: var(--f-titulo);
    font-size: var(--t-md);
    font-weight: 600;
    line-height: 1;
    color: var(--lit);
    transition: color var(--dur-tema) ease;
  }
  .orar-mapa__enlace .orar-mapa__nombre,
  .orar-mapa__enlace:not(.orar-mapa__enlace--nombre) .orar-mapa__nombre {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    grid-column: 2;
  }
  /* El misterio que toca en cada decena, cuando ya están elegidos */
  .orar-recorrido[data-vista] .orar-mapa__de {
    position: static;
    width: auto;
    height: auto;
    margin: .1rem 0 0;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    grid-column: 2;
    font-size: var(--t-xs);
    font-weight: 400;
    line-height: 1.35;
    color: var(--tinta-3);
  }
}

/* ==========================================================================
   Debajo de la oración: cómo se reza y el lugar, en Medjugorje
   ========================================================================== */

.orar-pasos { margin: var(--e-4) 0; }
.orar-pasos > div { color: var(--tinta); }
.orar-nota { font-size: var(--t-sm); line-height: 1.5; color: var(--tinta-2); }
/* Salidas al final de un texto: dos o tres enlaces en un renglón */
.orar-salidas {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--e-5);
  margin: var(--e-2) 0 0;
  padding: 0;
  list-style: none;
}
/* Las mismas salidas, como renglones entre filetes */
.orar-salidas--filas { display: block; margin: 0; border-top: 1px solid var(--linea); transition: border-color var(--dur-tema) ease; }
.orar-salidas--filas li { border-bottom: 1px solid var(--linea); transition: border-color var(--dur-tema) ease; }
.orar-salidas--filas a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-4);
  padding-block: var(--e-3);
  color: var(--tinta);
  font-family: var(--f-titulo);
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}
.orar-salidas--filas a > .flecha { flex: none; color: var(--tinta-3); }
.orar-salidas--filas a:hover > span:first-child {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .16em;
  text-decoration-color: var(--lit);
}
.orar-salidas--filas a:hover > .flecha { color: var(--lit); }
.orar-salidas--filas a:focus-visible { outline-offset: -2px; }
.orar-como {
  margin: 0 0 var(--e-4);
  padding-left: 1.4em;
}
.orar-como li { padding-left: .2em; }
.orar-como li + li { margin-top: .5em; }
.orar-como li::marker { font-family: var(--f-titulo); font-weight: 600; color: var(--lit); }

/* Los misterios de cada día: cuatro renglones que se abren */
.orar-series__titulo {
  margin: 0 0 var(--e-2);
  font-family: var(--f-titulo);
  font-size: var(--t-lg);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0;
}
.orar-series__nota { margin: 0 0 var(--e-4); font-size: var(--t-sm); line-height: 1.5; color: var(--tinta-2); }
.orar-serie.acordeon { max-width: none; }
.orar-serie > summary { gap: var(--e-3); padding-block: var(--e-3); }
.orar-serie__nombre { flex: 1 1 auto; }
.orar-serie__dias {
  flex: 0 1 auto;
  text-align: right;
  font-family: var(--f-texto);
  font-size: var(--t-sm);
  font-weight: 400;
  color: var(--tinta-3);
}
.orar-serie--hoy .orar-serie__dias { color: var(--lit); font-weight: 600; }
.orar-serie--hoy .orar-serie__dias::after { content: " · hoy"; }
.orar-serie ol { margin: 0; padding-left: 1.25em; font-size: var(--t-sm); line-height: 1.45; color: var(--tinta-2); }
.orar-serie li + li { margin-top: .3em; }
.orar-serie li::marker { color: var(--lit); }

/* Dos fotos verticales en pareja, al lado de un texto (dos relieves de la subida) */
.orar-diptico {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-3);
  align-items: start;
  max-width: 32rem;
}
@media (min-width: 960px) {
  .orar-diptico { justify-self: end; width: 100%; gap: var(--e-4); }
}

/* Ilustración propia del Križevac: línea de 1.5 px y mancha plana. No es un mapa. */
.orar-monte { margin: 0; max-width: 30rem; }
.orar-monte svg { width: 100%; height: auto; }
.orar-monte__lejos { fill: var(--cielo); opacity: .45; transition: fill var(--dur-tema) ease; }
.orar-monte__cerro { fill: var(--banda-piedra); transition: fill var(--dur-tema) ease; }
.orar-monte__borde { fill: none; stroke: var(--linea-fuerte); stroke-width: 1.5; }
.orar-monte__sendero { fill: none; stroke: var(--piedra); stroke-width: 1.5; stroke-dasharray: 5 6; stroke-linecap: round; stroke-linejoin: round; }
.orar-monte__estacion { fill: var(--fondo); stroke: var(--piedra); stroke-width: 1.5; transition: fill var(--dur-tema) ease; }
.orar-monte__cruz { fill: var(--tinta-2); }
.orar-monte__luz { fill: var(--vela); opacity: .5; transition: fill var(--dur-tema) ease; }
.orar-monte__pie { margin-top: var(--e-3); font-size: var(--t-sm); line-height: 1.5; color: var(--tinta-3); }
@media (min-width: 960px) {
  .orar-monte { justify-self: end; width: 100%; }
}

/* ==========================================================================
   /orar/confesion · guía, examen de conciencia y acto de contrición
   ========================================================================== */

.orar-cuerpo { padding-block: var(--e-5) var(--seccion); }
/* Los apartados de la guía van más juntos que los de un capítulo de lectura */
.orar-cuerpo .prosa section > h2:not(.etiqueta, .minuto__titulo, .fuentes *) { margin-top: 1.3em; }
.orar-cuerpo .prosa section:first-of-type > h2:not(.etiqueta, .minuto__titulo, .fuentes *) { margin-top: 0; }

/* La guía cabe en cuatro pantallas y media: lo que no hace falta leer de corrido va en
   renglones que se abren en su lugar (.acordeon dentro de .orar-plegado). «Abrir todo» los
   abre de una vez y la impresión los saca todos (/js/plegables.js). */
.orar-guia-acciones { margin-bottom: var(--e-5); }
.orar-plegado { margin: 0 0 1em; }
.orar-plegado .acordeon { max-width: none; }
.prosa .orar-plegado summary h3 { margin: 0; font: inherit; line-height: inherit; }
.orar-plegado .acordeon > div { color: var(--tinta); }
.orar-plegado .acordeon .aviso { margin-bottom: 0; }
.orar-secreto { color: var(--tinta-2); }
.orar-salida { margin: 0; }
/* Las cuatro partes, dentro de su renglón: nombre y, debajo, qué es */
.prosa .orar-partes { margin: 0; }
.orar-partes > div + div { margin-top: var(--e-3); }
.prosa .orar-partes dt { font-weight: 600; color: var(--tinta); }
.prosa .orar-partes dd { margin: 0; color: var(--tinta-2); }
/* La cabecera de la guía es más baja que la de una portada: el contenido empieza antes */
.orar-cabecera-baja .foto__img { height: 26vh; height: 26svh; max-height: 26svh; min-height: 9rem; }
@media (min-width: 900px) {
  .orar-cabecera-baja { min-height: clamp(22rem, 46vh, 27rem); padding-block: var(--e-6); }
  .orar-cabecera-baja .foto__img { height: 100%; max-height: none; min-height: 0; }
}
/* En celular y tableta la guía se lee de corrido y la cabecera ya lleva a sus dos apartados
   principales: el índice «En esta página» solo va en la columna lateral de escritorio. */
@media (max-width: 1023.98px) {
  .orar-cuerpo > .indice { display: none; }
  .orar-acogida { margin-block: 1.25em; }
}

/* Pasos numerados: el número, en un círculo de línea */
.orar-pasos-lista { counter-reset: orar-paso; margin: 0 0 1em; padding: 0; list-style: none; }
.prosa .orar-pasos-lista { padding-left: 0; }
.orar-pasos-lista > li {
  counter-increment: orar-paso;
  position: relative;
  min-height: 2rem;
  padding-left: 2.75rem;
}
.prosa .orar-pasos-lista li + li { margin-top: var(--e-4); }
.orar-pasos-lista > li::before {
  content: counter(orar-paso);
  content: counter(orar-paso) / "";
  position: absolute;
  top: -.1rem;
  left: 0;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1.5px solid var(--lit);
  border-radius: 50%;
  color: var(--lit);
  font-family: var(--f-titulo);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1;
  transition: border-color var(--dur-tema) ease, color var(--dur-tema) ease;
}
.orar-pasos-lista strong { color: var(--tinta); }

/* «Si hace años que no te confiesas»: un filete de piedra, sin caja */
.orar-acogida {
  margin: 2em 0;
  padding: var(--e-1) 0 var(--e-1) var(--e-5);
  border-left: 2px solid var(--piedra);
  transition: border-color var(--dur-tema) ease;
}
.orar-acogida > :last-child { margin-bottom: 0; }
.orar-acogida__grande {
  font-family: var(--f-titulo);
  font-size: var(--t-lg);
  font-style: italic;
  font-weight: 500;
  line-height: 1.3;
  color: var(--tinta);
}

/* El examen de conciencia: cada mandamiento es un renglón (.acordeon) que se abre en su lugar.
   /js/plegables.js pone el botón «Abrir todo el examen» y los abre todos al imprimir. */
.orar-examen { margin: 0; }
.orar-examen .acordeon { max-width: none; }
.prosa .orar-examen summary h3 { margin: 0; font: inherit; line-height: inherit; }
.orar-examen h3 .orar-examen__num { color: var(--lit); font-variant-numeric: lining-nums; }
.orar-examen .acordeon > div { color: var(--tinta); }
.prosa .orar-examen ul { margin-bottom: 0; padding-left: 1.1em; }
.prosa .orar-examen li + li { margin-top: .3em; }
.orar-examen__antes { margin-bottom: var(--e-5); color: var(--tinta-2); }
.orar-examen__acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); margin: 0 0 var(--e-5); }
.orar-imprimir-boton { margin: 0 0 var(--e-5); }
.orar-examen__acciones .orar-imprimir-boton { margin: 0; }

/* Las fuentes plegadas, cuando van dentro de la columna de texto */
.prosa .orar-fuentes h2.orar-fuentes__titulo {
  margin: 0;
  font-family: var(--f-texto);
  font-size: var(--t-xs);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .14em;
}
.prosa .orar-fuentes { margin-top: var(--e-6); }

/* El acto de contrición: dos fórmulas, cada una en su renglón */
.orar-contricion .orar-oracion { margin-bottom: 0; font-size: var(--t-md); }
.orar-contricion .orar-oracion--chica { font-size: var(--t-base); }

/* La guía de confesión abre con el hijo pródigo (Lc 15, 21): la cita y un párrafo breve */
.orar-prodigo { margin: 0 0 var(--e-6); }
.prosa .orar-prodigo .cita { margin-block: 0 var(--e-4); }
.orar-prodigo > p { margin: 0; color: var(--tinta-2); }

.orar-solo-impresion { display: none; }

/* ==========================================================================
   /orar/silencio
   ========================================================================== */

.orar-boton-grande {
  min-height: 3.5rem;
  padding: .85rem 1.9rem;
  font-size: var(--t-md);
}
.orar-boton-grande .punto-lit { width: .75rem; height: .75rem; background: var(--marca-tinta); }
.orar-silencio__como { margin: 0 0 var(--e-5); padding-left: 1.2em; }
.orar-silencio__como li + li { margin-top: .45em; }
.orar-silencio__como li::marker { color: var(--lit); }

/* ==========================================================================
   /orar/oraciones · composición B (lectura): cada oración con su ancla y su fuente.
   Marcado: <article class="orar-plegaria" id="…"><h2 class="orar-plegaria__titulo">…</h2>
   <p class="orar-oracion">…</p><p class="orar-plegaria__fuente">Fuente: …</p></article>
   ========================================================================== */

.orar-plegaria {
  padding-block: var(--e-6);
  border-top: 1px solid var(--linea);
  transition: border-color var(--dur-tema) ease;
}
.orar-plegaria__titulo {
  margin: 0 0 var(--e-4);
  font-family: var(--f-titulo);
  font-size: var(--t-xl);
  font-weight: 500;
  line-height: 1.1;
}
.orar-plegaria .orar-oracion:last-of-type { margin-bottom: var(--e-4); }
.orar-plegaria__fuente { margin: 0; font-size: var(--t-sm); line-height: 1.5; color: var(--tinta-3); }
.orar-plegaria__fuente a { color: inherit; }
.orar-plegaria__otra {
  margin: var(--e-5) 0 var(--e-3);
  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(--tinta-3);
}
.orar-plegaria__nota { margin: 0 0 var(--e-3); font-size: var(--t-sm); line-height: 1.55; color: var(--tinta-2); }
.orar-plegaria__nota a { color: var(--enlace); }

/* La columna de lectura con las oraciones: cada una es un renglón que se abre en su lugar
   (<details class="acordeon orar-plegaria" id="…">), para que la página no sea una tira larga.
   /js/plegables.js abre la que pide el ancla (#salve) y todas al imprimir. */
.orar-oraciones { padding-block: var(--e-5) var(--seccion); }
.orar-oraciones__acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e-3);
  min-height: 2.75rem;
  margin: 0 0 var(--e-5);
}
.orar-oraciones__acciones .orar-imprimir-boton { margin: 0; }
/* Tres grupos: su título, una línea que dice qué hay y, debajo, sus oraciones plegadas */
.orar-grupo + .orar-grupo { margin-top: var(--e-7); }
.orar-grupo__titulo {
  margin: 0 0 var(--e-1);
  font-family: var(--f-titulo);
  font-size: var(--t-xl);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.01em;
  scroll-margin-top: calc(var(--alto-cabecera) + var(--e-4));
}
.orar-grupo__nota { margin: 0 0 var(--e-4); font-size: var(--t-sm); line-height: 1.5; color: var(--tinta-2); }
.orar-grupo__nota a { color: var(--enlace); white-space: nowrap; }
/* La imagen de la Virgen abre el grupo «Con María»: angosta, para no empujar las oraciones */
.orar-grupo__foto { max-width: min(18rem, 70vw); margin: 0 0 var(--e-5); }
/* Las respuestas de las letanías, como en la fuente: en negritas */
.orar-respuesta { font-weight: 600; }
/* La lista larga de invocaciones va en dos columnas donde hay ancho */
@media (min-width: 560px) {
  .orar-letania { columns: 2; column-gap: var(--e-6); }
}
.orar-plegaria.acordeon { max-width: none; padding-block: 0; border-top: 0; }
.orar-plegaria.acordeon:not(.acordeon + .acordeon) { border-top: 1px solid var(--linea); }
.orar-plegaria.acordeon > summary { font-size: var(--t-lg); font-weight: 500; line-height: 1.15; }
.orar-plegaria.acordeon .orar-plegaria__titulo { margin: 0; font: inherit; }
.orar-plegaria.acordeon > div { padding-bottom: var(--e-6); color: var(--tinta); }
.orar-oraciones__nota { margin-block: var(--e-6); }
.orar-oraciones .paginacion { margin-top: 0; }

/* ==========================================================================
   Impresión
   El Rosario, el Vía Crucis, las oraciones y la guía de la confesión salen completos, con
   todos sus renglones abiertos y sin controles. En /orar/confesion, el botón «Imprimir solo
   el examen» pone body.orar-imprime-examen mientras dura la impresión (/js/recorrido.js):
   entonces salen solo el examen de conciencia y el acto de contrición.
   ========================================================================== */

@media print {
  .orar-elegir,
  .orar-mapa,
  .orar-recorrido__linea,
  .orar-recorrido__controles,
  .orar-cuentas,
  .orar-grupo__foto,
  .orar-oraciones__acciones { display: none !important; }
  .orar-recorrido { display: block; max-width: none; }
  .orar-recorrido[data-vista] .orar-paso:not([data-actual]) { display: block; }
  .orar-recorrido[data-vista] .orar-paso__antes,
  .orar-recorrido[data-vista] .orar-estacion__numero { display: block; }
  .orar-recorrido[data-vista] .orar-paso { min-height: 0; padding-block: .8rem; border-bottom: 1px solid var(--linea); }
  .orar-paso { break-inside: avoid; }
  .orar-plegaria { padding-block: 1rem; break-inside: avoid; }
  .orar-plegaria.acordeon { padding-block: 0; }
  .orar-plegaria.acordeon > summary::after { display: none; }
  .orar-plegaria.acordeon::details-content { content-visibility: visible; block-size: auto; }
  .orar-oracion, .orar-estacion__invitacion { font-size: 12pt; }
  .orar-paso .acordeon::details-content,
  .orar-serie::details-content,
  .orar-fuentes::details-content { content-visibility: visible; block-size: auto; }

  .orar-imprime-examen #contenido > *,
  .orar-imprime-examen .con-indice > .indice,
  .orar-imprime-examen .prosa > * { display: none !important; }
  .orar-imprime-examen #contenido > .orar-cuerpo,
  .orar-imprime-examen #contenido > .orar-solo-impresion,
  .orar-imprime-examen .prosa > .orar-imprimible { display: block !important; }
  .orar-imprime-examen .con-indice { display: block; }
  .orar-imprime-examen .orar-cuerpo { padding: 0; }
  .orar-imprime-examen .orar-solo-impresion { margin: 0 0 1rem; font-size: 10pt; color: var(--tinta-3); }
  .orar-imprime-examen .orar-examen,
  .orar-imprime-examen .orar-contricion { margin: 0; padding: 0; border: 0; }
  .orar-examen .acordeon,
  .orar-plegado .acordeon { border: 0; }
  .orar-examen .acordeon > summary,
  .orar-plegado .acordeon > summary { min-height: 0; padding: .7rem 0 .2rem; }
  .orar-examen .acordeon > summary::after,
  .orar-plegado .acordeon > summary::after { display: none; }
  .orar-examen .acordeon > div,
  .orar-plegado .acordeon > div { padding-bottom: 0; }
  .orar-examen .acordeon::details-content,
  .orar-plegado .acordeon::details-content { content-visibility: visible; block-size: auto; }
  .orar-examen__acciones { display: none !important; }
  .orar-imprime-examen .prosa h2 { margin: 0 0 .5rem; font-size: 18pt; }
  .orar-imprime-examen .orar-contricion { margin-top: 1.25rem; break-inside: avoid; }
  .orar-imprime-examen .orar-examen h3 { break-after: avoid; font-size: 12.5pt; }
  .orar-imprime-examen .orar-examen ul { break-inside: avoid; }
  .orar-imprime-examen .orar-examen li { font-size: 10.5pt; }
  .orar-imprime-examen .orar-oracion { font-size: 11pt; }
}