/* Virgen de Medjugorje · Páginas de referencia rápida: Preguntas, Glosario, Sobre
   (con «Avisar de un error» y su página de recibido) y 404.
   Tipográficas, sin fotos. Solo usan los tokens de sitio.css; las clases propias llevan el
   prefijo .pag-. Los componentes compartidos (.acordeon, .indice, .lista-ed, .prosa, .tabla,
   .aviso, .minuto, .fuentes, .campo…) se usan con su marcado y no se redefinen: aquí solo se
   colocan (ancho, columnas y márgenes). */

/* ==========================================================================
   Común: el cuerpo de estas páginas empieza justo debajo de la cabecera de página
   ========================================================================== */

.pag-cuerpo { padding-block: 0 var(--seccion); }
.pag-cuerpo :is(h2, h3, p, details, section, div)[id] { scroll-margin-top: calc(var(--alto-cabecera) + 1.25rem); }

/* Contenido e índice. En escritorio el contenido llena la columna y el índice va a la derecha,
   pegajoso. En celular el índice va arriba, en dos columnas, para que no se coma la pantalla. */
.pag-indice ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e-4); }
.pag-indice__cuenta {
  margin-left: .5rem;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--tinta-3);
}
.pag-indice__todas { margin: var(--e-2) 0 0; }
@media (max-width: 1023.98px) {
  .pag-indice { margin-bottom: var(--e-6); }
}
@media (min-width: 1024px) {
  .pag-con-indice {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 15rem;
    column-gap: var(--e-8);
    align-items: start;
  }
  .pag-con-indice > :not(.pag-indice) { grid-column: 1; grid-row: 1; min-width: 0; }
  .pag-con-indice > .pag-indice {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: calc(var(--alto-cabecera) + 1.5rem);
    max-height: calc(100vh - var(--alto-cabecera) - 3rem);
    overflow-y: auto;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .pag-indice ol { display: block; border-left: 1px solid var(--linea); transition: border-color var(--dur-tema) ease; }
  .pag-indice a {
    min-height: 0;
    margin-left: -1px;
    padding: .4rem 0 .4rem var(--e-4);
    border-left: 2px solid transparent;
  }
  .pag-indice a:hover { border-left-color: var(--linea-fuerte); }
  .pag-indice__cuenta { margin-left: auto; padding-left: .5rem; }
  .pag-indice__todas { margin-top: var(--e-3); padding-left: var(--e-4); }
}

/* Un botón que se lee como enlace («Abrir todas») */
.pag-enlace-boton {
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--enlace);
  font-family: var(--f-texto);
  font-size: var(--t-sm);
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: .25em;
  cursor: pointer;
}
.pag-enlace-boton:hover { text-decoration-color: currentColor; }

/* Fuentes plegadas (Sobre y Glosario): el título, como etiqueta; la lista, al abrir */
.pag-fuentes { margin-top: var(--e-6); }
.pag-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;
}
.pag-fuentes__cuenta { margin-left: .4rem; font-weight: 400; letter-spacing: 0; color: var(--tinta-3); }
.pag-fuentes .fuentes { max-width: none; margin: 0; padding: 0 0 var(--e-5); border-top: 0; }
.pag-fuentes__nota { margin: 0 0 var(--e-3); color: var(--tinta-2); }

/* Número de orden, del color del tiempo (el mismo de .lista-ed__marca) */
.pag-num {
  flex: none;
  font-family: var(--f-titulo);
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--lit);
  transition: color var(--dur-tema) ease;
}

/* ==========================================================================
   Preguntas frecuentes (composición C): grupos numerados y filas con filete
   ========================================================================== */

.pag-faq__grupo + .pag-faq__grupo { margin-top: var(--e-7); }
.pag-faq__titulo {
  display: flex;
  align-items: baseline;
  gap: var(--e-3);
  margin: 0 0 var(--e-4);
  font-family: var(--f-titulo);
  font-size: var(--t-xl);
  font-weight: 500;
  line-height: 1.1;
}
/* Las filas llenan la columna; el texto de la respuesta conserva su ancho de lectura */
.pag-faq .acordeon { max-width: none; }
.pag-faq__respuesta { max-width: var(--ancho-texto); }
.pag-faq__respuesta p { margin: 0 0 .7em; }
.pag-faq__respuesta > :last-child { margin-bottom: 0; }

/* Debajo de cada respuesta: la fuente y la página del sitio que lo explica con calma */
.pag-faq__refs {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--e-1) var(--e-4);
  align-items: baseline;
  margin: var(--e-4) 0 0;
  font-size: var(--t-sm);
  line-height: 1.5;
}
.pag-faq__refs > div { display: contents; }
.pag-faq__refs dt {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.pag-faq__refs dd { margin: 0; color: var(--tinta-2); }
.pag-faq__refs a { color: var(--enlace); }
.pag-faq__cierre { max-width: var(--ancho-texto); margin: var(--e-7) 0 0; color: var(--tinta-2); }

@media (max-width: 479.98px) {
  /* En pantallas angostas, el rótulo va encima de sus enlaces */
  .pag-faq__refs { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pag-faq__refs dt { margin-top: var(--e-2); }
}
@media (min-width: 1200px) {
  /* En escritorio, la respuesta a la izquierda y, a su lado, la fuente y la página del sitio */
  .pag-faq__cuerpo {
    display: grid;
    grid-template-columns: minmax(0, 34rem) minmax(0, 1fr);
    column-gap: var(--e-7);
    align-items: start;
  }
  .pag-faq__cuerpo .pag-faq__refs {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin-top: 0;
    padding-left: var(--e-4);
    border-left: 1px solid var(--linea);
    transition: border-color var(--dur-tema) ease;
  }
  .pag-faq__cuerpo .pag-faq__refs > div + div dt { margin-top: var(--e-3); }
}

/* ==========================================================================
   Glosario: índice alfabético y, por letra, filas que se abren (el acordeón compartido).
   En la fila cerrada se leen el término y su pronunciación; al abrirla, el significado.
   ========================================================================== */

.pag-glosario__letras { margin: 0 0 var(--e-4); }
.pag-glosario__letras ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pag-glosario__letras a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  border-bottom: 2px solid var(--linea);
  color: var(--tinta);
  font-family: var(--f-titulo);
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: border-color var(--dur-rapida) ease, color var(--dur-rapida) ease;
}
.pag-glosario__letras a:hover { border-bottom-color: var(--lit); color: var(--tinta); }

.pag-glosario__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 var(--e-5);
  margin: 0 0 var(--e-4);
}
.pag-glosario__nota { max-width: var(--ancho-texto); margin: 0; font-size: var(--t-sm); color: var(--tinta-2); }

/* Una sola lista, en orden alfabético, que el navegador reparte en columnas de la misma
   altura (column-count). Un término nunca se parte entre dos columnas. En celular es una lista
   compacta: en la fila cerrada solo va la palabra; al abrirla, su pronunciación y su significado. */
.pag-glosario__terminos { column-count: 1; column-gap: var(--e-7); }
.pag-glosario__termino {
  max-width: none;
  margin-top: -1px;
  border-top: 1px solid var(--linea);
  break-inside: avoid;
  transition: border-color var(--dur-tema) ease;
}
.pag-glosario__termino:first-child { margin-top: 0; }
.pag-glosario__termino > summary { justify-content: flex-start; padding-block: var(--e-3); }
.pag-glosario__termino > summary::after { margin-left: auto; }
/* La letra, a la izquierda de la primera palabra de cada letra, del color del tiempo */
.pag-glosario__marca {
  flex: none;
  align-self: flex-start;
  width: 1.5rem;
  font-family: var(--f-titulo);
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.25;
  color: var(--lit);
  transition: color var(--dur-tema) ease;
}
.pag-glosario__cabeza { display: grid; gap: .15rem; min-width: 0; }
.pag-glosario__nombre dfn { font-style: normal; }
.pag-glosario__otro,
.pag-glosario__pron {
  font-family: var(--f-texto);
  font-size: var(--t-sm);
  font-weight: 400;
  line-height: 1.4;
  color: var(--tinta-3);
}
.pag-glosario__pron b { font-weight: 600; color: var(--tinta-2); white-space: nowrap; }
/* La definición se alinea con la palabra. Al llegar con un ancla (/glosario#gospa) la fila se
   abre sola (plegables.js): el margen de desplazamiento deja a la vista también su nombre. */
.pag-glosario__termino > .pag-glosario__definicion {
  padding-left: calc(1.5rem + var(--e-4));
  scroll-margin-top: calc(var(--alto-cabecera) + 6rem);
}
.pag-glosario__definicion p { margin: 0; }
.pag-glosario__definicion p + p { margin-top: .4rem; }
.pag-glosario__definicion a { color: var(--enlace); }
.pag-glosario__termino:has(> .pag-glosario__definicion:target) > summary .pag-glosario__nombre {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .18em;
  text-decoration-color: var(--lit);
}

/* Debajo de la lista: la clave de pronunciación y las fuentes, plegadas */
.pag-glosario__abajo { display: grid; gap: var(--e-5); margin-top: var(--e-7); }
.pag-glosario__abajo > .acordeon { max-width: none; }
.pag-glosario__abajo > .pag-fuentes { margin-top: 0; }
.pag-glosario__clave-titulo {
  margin: 0;
  font-family: var(--f-titulo);
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: 0;
}
.pag-glosario__clave > div > p { max-width: var(--ancho-texto); color: var(--tinta-2); }
.pag-glosario__clave .tabla th[scope="row"] { font-family: var(--f-titulo); font-size: var(--t-md); line-height: 1.2; }
/* La tabla de la clave cabe en un celular sin desplazarse */
.pag-glosario__clave .tabla th,
.pag-glosario__clave .tabla td { min-width: 0; padding-right: var(--e-4); }
.pag-glosario__clave .tabla td:last-child { padding-right: 0; }
.pag-glosario__clave .tabla thead th { white-space: normal; }

/* Dónde empieza cada columna. El navegador, por su cuenta, llena las primeras y deja corta la
   última (10, 10 y 8); con estos cortes quedan 14 y 14 en dos columnas y 10, 9 y 9 en tres.
   Además, al abrir una palabra ninguna otra cambia de columna. Si se añaden o se quitan
   términos, hay que mover las clases pag-glosario__corte-2 y pag-glosario__corte-3 en la lista. */
@media (min-width: 720px) and (max-width: 1099.98px) {
  .pag-glosario__terminos { column-count: 2; }
  .pag-glosario__corte-2 { break-before: column; }
}
@media (min-width: 1100px) {
  .pag-glosario__terminos { column-count: 3; }
  .pag-glosario__corte-3 { break-before: column; }
  .pag-glosario__abajo { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e-7); align-items: start; }
}

/* ==========================================================================
   Sobre este sitio: lo esencial a la vista, lo demás en filas que se abren, y el
   formulario «Avisar de un error» (un objeto real: tarjeta plana, con filete y sin sombra).
   ========================================================================== */

.pag-sobre__intro { display: grid; gap: var(--e-5); }
.pag-sobre__intro .minuto { max-width: none; margin: 0; }
.pag-sobre__intro .minuto__lista li { font-size: var(--t-sm); }
.pag-sobre__titulo {
  margin: 0 0 var(--e-4);
  font-family: var(--f-titulo);
  font-size: var(--t-xl);
  font-weight: 500;
  line-height: 1.1;
}
.pag-sobre__texto p { max-width: var(--ancho-texto); margin: 0 0 .9em; }
.pag-sobre__texto > :last-child { margin-bottom: 0; }
.pag-sobre__texto a,
.pag-sobre__plegables a,
.pag-sobre__mas a { color: var(--enlace); }
.pag-sobre__plegables { margin-top: var(--e-6); }
.pag-sobre .acordeon { max-width: none; }
.pag-sobre__pregunta {
  margin: 0;
  font-family: var(--f-titulo);
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: 0;
}
.pag-sobre__plegables .acordeon > div > p { max-width: var(--ancho-texto); margin: 0 0 .8em; }
.pag-sobre__credito {
  padding-left: var(--e-4);
  border-left: 2px solid var(--lit);
  font-weight: 500;
  color: var(--tinta);
  transition: border-color var(--dur-tema) ease;
}
.pag-sobre__mas { margin: var(--e-6) 0 0; color: var(--tinta-2); }
@media (min-width: 1200px) {
  .pag-sobre__intro { grid-template-columns: minmax(0, 34rem) minmax(0, 1fr); gap: var(--e-7); align-items: start; }
}

/* Avisar de un error */
.pag-aviso {
  display: grid;
  gap: var(--e-4);
  margin-top: var(--e-7);
  padding: var(--e-5) var(--e-4);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background-color: var(--superficie);
  transition: background-color var(--dur-tema) ease, border-color var(--dur-tema) ease;
}
.pag-aviso__lado, .pag-aviso__campos { min-width: 0; }
.pag-aviso__titulo {
  margin: 0 0 var(--e-3);
  font-family: var(--f-titulo);
  font-size: var(--t-lg);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0;
}
.pag-aviso__texto { margin: 0 0 var(--e-2); font-size: var(--t-sm); line-height: 1.5; color: var(--tinta-2); }
.pag-aviso__nota { margin: var(--e-3) 0 0; font-size: var(--t-sm); line-height: 1.5; color: var(--tinta-3); }
/* La región role="alert" siempre existe; solo se ve cuando tiene texto */
.pag-aviso__alerta:not(:empty) {
  margin: 0 0 var(--e-4);
  padding: var(--e-1) 0 var(--e-1) var(--e-4);
  border-left: 3px solid var(--piedra);
  color: var(--tinta);
  font-weight: 500;
  line-height: 1.5;
}
.pag-aviso__hecho {
  margin: 0;
  padding: var(--e-1) 0 var(--e-1) var(--e-4);
  border-left: 3px solid var(--lit);
  color: var(--tinta);
  font-weight: 500;
  line-height: 1.5;
  transition: border-color var(--dur-tema) ease;
}
.pag-aviso__hecho:focus { outline: none; }
.pag-aviso__formulario .campo { margin-bottom: var(--e-4); }
.pag-aviso__formulario .campo textarea { min-height: 7.5rem; }
.pag-aviso__formulario textarea[aria-invalid="true"] { border-color: var(--piedra); }
.pag-aviso__opcional { font-weight: 400; color: var(--tinta-3); }
.pag-aviso__fila { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--e-4); }
.pag-aviso__fila .campo { flex: 1 1 14rem; margin-bottom: 0; }
.pag-aviso__fila .boton { flex: 1 1 100%; }
.pag-aviso__formulario button[disabled] { cursor: progress; opacity: .75; }
@media (min-width: 640px) {
  .pag-aviso { padding: var(--e-6); }
  /* El botón, a la altura del campo (debajo de su rótulo) */
  .pag-aviso__fila .boton { flex: 0 0 auto; margin-top: calc(1.4em + var(--e-2)); }
}
@media (min-width: 900px) {
  .pag-aviso { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: var(--e-7); align-items: start; }
}

/* /sobre/aviso-recibido */
.pag-recibido { padding-block: var(--e-6) var(--seccion); }
.pag-recibido .migas { margin-bottom: var(--e-5); }
.pag-recibido .etiqueta { margin-bottom: var(--e-3); }
.pag-recibido__otra { margin: var(--e-5) 0 0; font-size: var(--t-sm); }
.pag-recibido__otra a { color: var(--enlace); }
@media (min-width: 900px) {
  .pag-recibido { padding-top: var(--e-7); }
}

/* ==========================================================================
   404: tipográfica. El número, a tamaño de cartel y del color del tiempo.
   ========================================================================== */

.pag-404 { padding-block: var(--e-6) var(--seccion); }
.pag-404__numero {
  margin: 0 0 var(--e-2);
  font-family: var(--f-titulo);
  font-size: var(--t-cartel);
  font-weight: 500;
  line-height: .9;
  letter-spacing: -.02em;
  font-variant-numeric: lining-nums;
  color: var(--lit);
  transition: color var(--dur-tema) ease;
}
.pag-404__buscar { max-width: 34rem; margin-top: var(--e-6); }
.pag-404__buscar .campo { margin-bottom: 0; }
.pag-404__fila { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.pag-404__fila input { flex: 1 1 12rem; }
.pag-404__secciones { margin-top: var(--e-7); }
.pag-404__secciones .etiqueta { margin-bottom: var(--e-3); }
.pag-404__listas { display: grid; grid-template-columns: minmax(0, 1fr); }
.pag-404__listas .lista-ed + .lista-ed { border-top: 0; }

@media (min-width: 900px) {
  .pag-404 { padding-top: var(--e-7); }
  .pag-404__listas { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e-7); }
  .pag-404__listas .lista-ed + .lista-ed { border-top: 1px solid var(--linea); }
}

@media print {
  .pag-glosario__letras, .pag-404__buscar, .pag-aviso, .pag-indice__todas { display: none; }
  .pag-glosario__terminos { column-count: 2; }
  .pag-faq__cuerpo { display: block; }
}