/* Virgen de Medjugorje · Inicio
   Una portada corta: la Virgen a sangre, el mensaje del 25 con sus enlaces, el índice
   del sitio (cuatro accesos iguales, con foto) y la franja «Haz silencio».
   Solo usa los tokens de sitio.css. Las clases propias llevan el prefijo .inicio-.
   Los componentes compartidos (.mensaje, .foto, .franja-silencio, .aviso…)
   no se redefinen: aquí solo se les da su lugar dentro de cada composición. */

/* ==========================================================================
   1. Hero (composición A): la foto a sangre, pegada al borde derecho, al superior
      y al inferior, con el borde izquierdo fundido en el papel. En celular, la foto
      va arriba, a todo lo ancho, con el borde inferior fundido.
   ========================================================================== */

.inicio-hero {
  --inicio-foto: min(56vw, 54rem);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overflow: clip;
}

.inicio-hero__dentro { position: relative; z-index: 1; }

.inicio-hero__texto { padding-block: var(--e-3) var(--e-5); }

.inicio-hero__titulo {
  margin: 0;
  font-family: var(--f-titulo);
  font-size: var(--t-cartel);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.inicio-hero__bajada {
  max-width: 34rem;
  margin: var(--e-3) 0 0;
  font-size: var(--t-base);
  line-height: 1.5;
  color: var(--tinta-2);
}

.inicio-hero__acciones { margin-top: var(--e-4); }

/* En celular la franja superior solo dice el día litúrgico: aquí se dice de quién es el sitio.
   Desde 900 px la franja ya lo dice y esta nota no se repite. */
.inicio-hero__nota {
  max-width: 30rem;
  margin: var(--e-3) 0 0;
  font-size: var(--t-xs);
  line-height: 1.45;
  color: var(--tinta-3);
}
.inicio-hero__nota a { color: inherit; text-decoration-color: var(--linea-fuerte); }
.inicio-hero__nota a:hover { color: var(--tinta); text-decoration-color: currentColor; }

/* La foto (el recorte sin personas: 1200 × 1250). La figura es un contenedor de tamaño: con sus
   medidas (cqw, cqh) se calcula el encuadre para la proporción real de la foto, que a todo el
   ancho mide 104.17cqw de alto. La estatua va de la corona (al 38 % del alto) al pedestal, que
   toca el borde inferior:
   - lo normal es alinear el borde inferior de la foto con el del marco (se ve la estatua entera);
   - si el marco es muy bajo, la foto no sube más de 36cqw: se ve la corona y se corta el pedestal;
   - si el marco es más alto que la foto, la foto lo cubre por alto y se centra. */
.inicio-hero__foto {
  position: relative;
  order: -1;
  height: 37vh;
  height: 37svh;
  min-height: 13rem;
}
.inicio-hero__foto .foto__img {
  --inicio-fundido: linear-gradient(to bottom, #000 calc(100% - 3.25rem), transparent);
  --inicio-vineta: radial-gradient(120% 120% at 50% 50%, #000 52%, rgb(0 0 0 / .7) 100%);
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
  -webkit-mask-image: var(--inicio-fundido);
  mask-image: var(--inicio-fundido);
  animation: inicio-aparece 1.2s ease both;
}
@supports (container-type: size) {
  .inicio-hero__foto { container-type: size; }
  .inicio-hero__foto .foto__img {
    --inicio-desfase: min(0px, max(100cqh - 104.17cqw, -36cqw));
    object-position: 50% var(--inicio-desfase);
  }
}
/* La foto de la portada aparece una sola vez, con un fundido */
@keyframes inicio-aparece {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* El pie va sobre el fundido de la foto, abajo, con velo: no toca la figura de la estatua */
.inicio-hero__foto .foto__pie {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  padding: var(--e-4) var(--margen) 0;
  background-image: linear-gradient(to bottom, transparent, var(--velo) 65%);
  color: var(--tinta-2);
  font-size: var(--t-xs);
  line-height: 1.35;
  text-align: right;
}

/* De noche, la foto baja la luz (lo hace sitio.css) y se viñeta sin perder el fundido */
:root[data-hora="noche"] .inicio-hero__foto .foto__img {
  -webkit-mask-image: var(--inicio-fundido), var(--inicio-vineta);
  mask-image: var(--inicio-fundido), var(--inicio-vineta);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

@media (max-width: 479.98px) {
  /* Los dos botones, uno junto al otro, sin partir sus palabras */
  .inicio-hero__acciones { gap: var(--e-2); }
  .inicio-hero__acciones .boton { flex: 1 1 auto; padding-inline: .7rem; font-size: var(--t-sm); white-space: nowrap; }
}

@media (min-width: 900px) {
  .inicio-hero {
    /* De día el fundido lateral ocupa el 12 % del ancho de la foto; de noche se conserva el 30 % */
    --inicio-borde: 12%;
    justify-content: center;
    /* Alto: 60vh entre 30 y 40rem, y nunca menos del 70 % del ancho de la foto, que es lo que
       necesita la estatua para verse entera, de la corona al pedestal. */
    min-height: max(clamp(30rem, 60vh, 40rem), var(--inicio-foto) * .7);
  }
  /* El texto llega hasta donde empieza la foto: con el fundido corto ya no se monta sobre ella */
  .inicio-hero__texto {
    max-width: calc(100% + var(--margen) + max(0px, (100vw - var(--ancho-amplio)) / 2) - var(--inicio-foto) + var(--e-3));
    padding-block: var(--e-6);
  }
  /* El nombre, a tamaño de cartel, sin pasar del ancho que deja la foto ni del alto de la ventana */
  .inicio-hero__titulo { font-size: min(var(--t-cartel), 15vh, (100vw - var(--inicio-foto)) / 5.5); }
  .inicio-hero__bajada { max-width: 30rem; margin-top: var(--e-4); font-size: var(--t-md); line-height: 1.45; }
  .inicio-hero__acciones { margin-top: var(--e-5); }
  .inicio-hero__nota { display: none; }

  /* La foto llega al borde visible de la página: el hero ocupa todo el ancho, así que basta
     con right: 0. Con «100% - 100vw» la foto y su pie se metían debajo de la barra de
     desplazamiento (15 px en Windows) y el pie quedaba pegado a la barra. */
  .inicio-hero__foto {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    order: 0;
    width: var(--inicio-foto);
    height: auto;
    min-height: 0;
  }
  .inicio-hero__foto .foto__img { --inicio-fundido: linear-gradient(to right, transparent, #000 var(--inicio-borde)); }
  /* El pie, en la esquina inferior derecha y estrecho: la estatua ocupa el centro de la foto
     (del 37 al 63 % de su ancho) y el pie no pasa del último tercio. */
  .inicio-hero__foto .foto__pie {
    left: auto;
    max-width: min(15rem, 33%);
    padding: .4rem var(--e-4) .45rem .75rem;
    background-color: var(--velo);
    background-image: none;
    transition: background-color var(--dur-tema) ease;
  }
  :root[data-hora="noche"] .inicio-hero { --inicio-borde: 30%; }
}

/* ==========================================================================
   2. El mensaje del 25, resuelto con tipografía: el numeral grande del color del
      tiempo, el mes y el año, y el texto íntegro. Debajo del texto (no en una columna
      aparte): los enlaces y el motivo para volver.
   ========================================================================== */

.inicio-mes { padding-block: var(--e-5) var(--e-6); }

.inicio-mes__rejilla { display: grid; grid-template-columns: minmax(0, 1fr); }

.inicio-mes .mensaje { max-width: none; }
.inicio-mes .mensaje__cabeza { margin-bottom: var(--e-5); }
.inicio-mes .mensaje__cabeza .etiqueta { margin-bottom: var(--e-4); }

.inicio-mes__fecha {
  margin: 0 0 var(--e-3);
  font-family: var(--f-titulo);
  font-weight: 500;
  letter-spacing: 0;
}
.inicio-mes__fecha time { display: flex; align-items: flex-end; gap: var(--e-3); }
.inicio-mes__numeral {
  flex: none;
  font-size: clamp(6rem, 3.5rem + 12vw, 11.5rem);
  font-weight: 500;
  line-height: .72;
  letter-spacing: -.04em;
  font-variant-numeric: lining-nums;
  color: var(--lit);
  transition: color var(--dur-tema) ease;
}
.inicio-mes__mes {
  padding-bottom: .1em;
  font-size: var(--t-lg);
  font-style: italic;
  line-height: 1.1;
  color: var(--tinta);
}

/* Crédito y fuente, seguidos */
.inicio-mes .mensaje__pie {
  max-width: none;
  margin-top: var(--e-5);
  padding-top: var(--e-3);
  font-size: var(--t-xs);
}
.inicio-mes .mensaje__pie p { margin: 0; }

/* .inicio-mes__despues solo agrupa: sus hijos se colocan en la rejilla del mensaje */
.inicio-mes__despues { display: contents; }

/* Bajo el mensaje, los enlaces: su página, todos los mensajes y cómo leerlos (sin nota) */
.inicio-mes__enlaces {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--e-5);
  margin-top: var(--e-3);
}

/* El motivo para volver: cuándo se espera el próximo (lo escribe proximo.js) y el feed */
.inicio-mes__seguir {
  margin: var(--e-2) 0 0;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--tinta-2);
}
.inicio-mes__feed {
  display: inline-block;
  padding-block: .2rem;
  color: var(--enlace);
  font-weight: 500;
  white-space: nowrap;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
}
.inicio-mes__feed:hover { text-decoration-color: currentColor; }
/* Si ya pasó ese día 25 y el mensaje no está aquí, lo dice el aviso: la línea no se repite */
:root[data-proximo-estado="tarde"] .inicio-mes__proximo { display: none; }

.inicio-mes__atraso { margin: var(--e-4) 0 0; }

@supports (grid-template-columns: subgrid) {
  @media (min-width: 900px) {
    .inicio-mes { padding-block: var(--e-5); }
    /* Dos columnas (la fecha y el texto) y aire a la derecha. Bajo un mismo filete: a la izquierda,
       el crédito y el motivo para volver; a la derecha, bajo el texto, los enlaces. */
    .inicio-mes__rejilla {
      grid-template-columns: minmax(13rem, 1fr) minmax(0, var(--ancho-texto)) minmax(0, .4fr);
      grid-template-rows: auto 1fr auto auto;
      column-gap: var(--e-7);
    }
    .inicio-mes .mensaje {
      display: grid;
      grid-column: 1 / 3;
      grid-row: 1 / 4;
      grid-template-columns: subgrid;
      grid-template-rows: subgrid;
    }
    .inicio-mes .mensaje__cabeza { grid-column: 1; grid-row: 1; margin-bottom: var(--e-4); }
    .inicio-mes__fecha time { display: block; }
    .inicio-mes__numeral { display: block; margin-left: -.04em; }
    .inicio-mes__mes { display: block; padding: var(--e-4) 0 0; }
    .inicio-mes .mensaje > .aviso { grid-column: 2; grid-row: 1; margin-top: 0; }
    /* En la portada el texto usa una medida algo más ancha que la de lectura (40rem) */
    .inicio-mes .mensaje__texto { grid-column: 2; grid-row: 1 / 3; max-width: none; }
    .inicio-mes .mensaje:has(> .aviso) .mensaje__texto { grid-row: 2; }
    .inicio-mes .mensaje__pie { grid-column: 1; grid-row: 3; margin-top: var(--e-4); }
    .inicio-mes__enlaces {
      grid-column: 2;
      grid-row: 3;
      align-self: start;
      margin-top: var(--e-4);
      padding-top: var(--e-3);
      border-top: 1px solid var(--linea);
      transition: border-color var(--dur-tema) ease;
    }
    .inicio-mes__seguir { grid-column: 1; grid-row: 4; display: block; align-self: start; margin-top: var(--e-2); font-size: var(--t-xs); line-height: 1.5; }
    .inicio-mes__feed { padding-block: .15rem; }
    .inicio-mes__atraso { grid-column: 2; grid-row: 4; }
  }
}

/* ==========================================================================
   3. Explora: cuatro accesos iguales en forma y tamaño (Mensajes, Historia, Peregrinar y
      Orar). Cada uno: una foto en proporción 4:5, el número, el título y una línea, en una
      misma rejilla: cuatro columnas en escritorio, dos por dos en tableta (la foto a la
      izquierda del texto) y cuatro filas en celular. Debajo, lo demás, en filas con filete
      que siguen las mismas columnas.
   ========================================================================== */

/* --inicio-hueco: el hueco entre columnas, el mismo para las fotos y para las filas menores */
.inicio-explora { --inicio-hueco: var(--e-5); padding-block: var(--e-6); }
.inicio-explora__titulo { margin-bottom: var(--e-3); }

.inicio-explora__num {
  display: block;
  font-family: var(--f-titulo);
  font-size: 1.125rem;
  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;
}

.inicio-explora__nombre a,
.inicio-explora__lista a { color: var(--tinta); text-decoration: none; }
.inicio-explora__medio:hover .inicio-explora__nombre a,
.inicio-explora__lista a:hover .inicio-explora__lista-titulo {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .14em;
  text-decoration-color: var(--lit);
}

/* Los cuatro accesos. En celular: filas con la foto a la izquierda, el título, una línea y flecha */
.inicio-explora__medios {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--linea-fuerte);
  transition: border-color var(--dur-tema) ease;
}
.inicio-explora__medio {
  position: relative;
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--e-4);
  min-width: 0;
  padding-block: var(--e-3);
  border-bottom: 1px solid var(--linea-fuerte);
  transition: border-color var(--dur-tema) ease;
}
/* El mismo marco 4:5 para las cuatro fotos, a todos los anchos */
.inicio-explora__foto .foto__img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
/* El encuadre de cada foto en su marco: la Virgen al centro, la torre de la iglesia, el crucifijo
   sobre el camino de piedras y el relieve entero */
.inicio-explora__foto--reina-de-la-paz-flores-recorte .foto__img { object-position: 24% 50%; }
.inicio-explora__foto--iglesia-santiago-recorte .foto__img { object-position: 88% 50%; }
.inicio-explora__foto--crucifijo-camino-recorte .foto__img { object-position: 50% 45%; }
.inicio-explora__foto--relieve-anunciacion-recorte .foto__img { object-position: 50% 50%; }
/* El pie de estas cuatro fotos se lee con lector de pantalla; a la vista, cada una lleva
   su título y su línea. */
.inicio-explora__foto .foto__pie {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.inicio-explora__cuerpo { min-width: 0; }
.inicio-explora__nombre {
  margin: 0;
  font-family: var(--f-titulo);
  font-size: var(--t-lg);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0;
}
.inicio-explora__texto {
  margin: var(--e-1) 0 0;
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--tinta-2);
}
/* Toda la pieza es el enlace */
.inicio-explora__nombre a::after { content: ""; position: absolute; inset: 0; }
.inicio-explora__nombre a:focus-visible { outline: none; }
.inicio-explora__nombre a:focus-visible::after { outline: 2px solid var(--foco); outline-offset: 2px; }
.inicio-explora__flecha { color: var(--tinta-3); transition: color var(--dur-rapida) ease; }
.inicio-explora__medio:hover .inicio-explora__flecha { color: var(--lit); }

/* Lo demás: filas con filete (el número, el título, una línea y la flecha) */
.inicio-explora__lista {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}
.inicio-explora__lista li { border-bottom: 1px solid var(--linea-fuerte); transition: border-color var(--dur-tema) ease; }
.inicio-explora__lista a {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: var(--e-3);
  padding-block: .625rem;
}
.inicio-explora__lista .inicio-explora__num { font-size: var(--t-md); }
.inicio-explora__lista-cuerpo { display: grid; gap: .15rem; min-width: 0; }
.inicio-explora__lista-titulo { font-family: var(--f-titulo); font-size: var(--t-md); font-weight: 600; line-height: 1.15; }
.inicio-explora__lista-desc { font-size: var(--t-sm); line-height: 1.4; color: var(--tinta-2); }
.inicio-explora__lista .flecha { color: var(--tinta-3); transition: color var(--dur-rapida) ease; }
.inicio-explora__lista a:hover .flecha { color: var(--lit); }
.inicio-explora__lista a:focus-visible { outline-offset: -2px; }

@media (max-width: 359.98px) {
  /* En pantallas muy estrechas la flecha cede su sitio al texto: la línea no pasa de dos renglones
     y las cuatro filas miden lo mismo */
  .inicio-explora__medio { grid-template-columns: 5.5rem minmax(0, 1fr); }
  .inicio-explora__flecha { display: none; }
}

@media (min-width: 700px) {
  /* Dos por dos: la foto a la izquierda y, a su lado, el número, el título y la línea */
  .inicio-explora__medios { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-5) var(--inicio-hueco); border-top: 0; }
  .inicio-explora__medio { grid-template-columns: clamp(7.5rem, 18vw, 10rem) minmax(0, 1fr); padding: 0; border-bottom: 0; }
  .inicio-explora__flecha { display: none; }
  /* Las filas menores, en las mismas dos columnas */
  .inicio-explora__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--inicio-hueco); margin-top: var(--e-5); border-top: 1px solid var(--linea-fuerte); transition: border-color var(--dur-tema) ease; }
}

@media (min-width: 960px) {
  /* Cuatro columnas iguales: la foto arriba y, debajo, el número, el título y la línea */
  .inicio-explora__medios { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .inicio-explora__medio { display: block; }
  .inicio-explora__cuerpo { margin-top: var(--e-3); }
}

@media (min-width: 1180px) {
  .inicio-explora { padding-block: var(--e-5); }
  .inicio-explora__titulo { margin-bottom: var(--e-4); }
  /* Las cinco filas menores, en un solo renglón (desde el 19 de octubre de 2026 son cinco, con Para niños) */
  .inicio-explora__lista { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  /* Sin flecha: cada fila es entera un enlace. El número y el título, en un renglón; debajo, la
     línea, desde el borde de la columna (como el texto de las fotos) para que quepa sin partirse */
  .inicio-explora__lista a { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--e-2); padding-block: var(--e-3) var(--e-1); }
  .inicio-explora__lista-cuerpo { display: contents; }
  .inicio-explora__lista-desc { grid-column: 1 / -1; margin-top: .15rem; }
  .inicio-explora__lista .flecha { display: none; }
  .inicio-explora__lista li { border-bottom: 0; }
}

/* ==========================================================================
   4. Cierre: la franja «Haz silencio» (siempre oscura), a todo el ancho y baja, con sus
      tres enlaces.
   ========================================================================== */

/* La franja compartida, sin su aire de sección y en una fila: la luz, el título y su línea,
   el botón y los enlaces. En pantallas estrechas el botón y los enlaces bajan y se apilan. */
.inicio-silencio { padding-block: var(--e-5); text-align: left; }
.inicio-silencio .franja-silencio__dentro {
  grid-template-columns: auto minmax(0, 1fr) auto;
  justify-items: start;
  align-items: center;
  gap: var(--e-1) var(--e-3);
}
.inicio-silencio .franja-silencio__luz { grid-column: 1; grid-row: 1 / 3; align-self: start; margin-bottom: 0; }
.inicio-silencio .franja-silencio__titulo { grid-column: 2; grid-row: 1; }
.inicio-silencio .franja-silencio__texto { grid-column: 2 / -1; grid-row: 2; align-self: start; margin-bottom: 0; }
.inicio-silencio .boton { grid-column: 3; grid-row: 1; justify-self: end; }
.inicio-silencio__enlaces {
  display: grid;
  grid-column: 1 / -1;
  width: 100%;
  margin: var(--e-2) 0 0;
  padding: 0;
  list-style: none;
}
.inicio-silencio__enlaces li + li { border-top: 1px solid rgb(239 230 214 / .16); }
.inicio-silencio__enlaces a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 2.75rem;
  color: var(--noche-fija-tinta);
  font-size: var(--t-sm);
  font-weight: 500;
  text-decoration: none;
}
.inicio-silencio__enlaces a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.inicio-silencio__enlaces a:focus-visible { outline-color: #e6b566; }

@media (max-width: 419.98px) {
  /* En pantallas muy estrechas la luz se achica para que el título y el botón quepan en un renglón */
  .inicio-silencio .franja-silencio__luz { width: 3rem; height: 3rem; }
  .inicio-silencio .franja-silencio__texto { grid-column: 1 / -1; }
  .inicio-silencio .franja-silencio__luz { grid-row: 1; align-self: center; }
}
@media (min-width: 640px) {
  .inicio-silencio .franja-silencio__dentro { column-gap: var(--e-4); }
  .inicio-silencio .franja-silencio__luz { align-self: center; }
  .inicio-silencio .franja-silencio__texto { grid-column: 2; }
  .inicio-silencio .boton { grid-row: 1 / 3; }
  .inicio-silencio__enlaces { display: flex; flex-wrap: wrap; gap: 0 var(--e-6); margin-top: var(--e-2); padding-top: var(--e-1); border-top: 1px solid rgb(239 230 214 / .16); }
  .inicio-silencio__enlaces li + li { border-top: 0; }
  .inicio-silencio__enlaces a { display: inline-flex; justify-content: flex-start; gap: .35rem; }
}
@media (min-width: 1100px) {
  .inicio-silencio { padding-block: var(--e-4); }
  .inicio-silencio .franja-silencio__dentro { grid-template-columns: auto minmax(0, 1fr) auto auto; column-gap: var(--e-5); }
  .inicio-silencio .franja-silencio__texto { max-width: none; }
  .inicio-silencio__enlaces { grid-column: 4; grid-row: 1 / 3; width: auto; margin: 0; padding: 0 0 0 var(--e-5); border-top: 0; border-left: 1px solid rgb(239 230 214 / .16); flex-wrap: nowrap; gap: 0 var(--e-5); }
}