/* ===================================================================
   PARROQUIA SAN BUENAVENTURA DE PUJILÍ — Sistema de diseño v1
   ===================================================================
   Paleta basada en fotografías reales de la parroquia:
   - Piedra:        #EFEBE3  (arcos y muros de piedra del templo)
   - Noche de piedra:#2A2420  (sombra de los arcos, texto principal)
   - Retablo:       #7A1F2B  (rojo del retablo dorado del altar mayor)
   - Retablo oscuro:#5C1620
   - Oro:           #C9A227  (hoja de oro tallada del retablo)
   - Danzante:      #2456A6  (azul de la vestimenta del Danzante)
   - Fiesta:        #E08A2E  (naranja de la ofrenda de frutas de Corpus Christi)
   ------------------------------------------------------------------- */

/* El sitio se ve mejor un poco más compacto: esto equivale a tener el
   navegador al 90% de zoom, pero de forma permanente y para todos.
   Como las medidas del sitio están en rem, todo escala proporcionalmente. */
html { font-size: 90%; }

:root {
  /* Le dice al navegador que este sitio es de tema claro y no debe
     "corregir" sus colores con un modo oscuro forzado (frecuente en
     Android/Chrome). Sin esto, algunos celulares repintan fondos y letras
     por su cuenta y pueden dejar un botón con letra oscura sobre fondo
     oscuro, aunque el CSS de aquí abajo diga otra cosa. */
  color-scheme: light;
  --piedra: #EFEBE3;
  --piedra-suave: #F7F5F0;
  --noche: #2A2420;
  --noche-suave: #4A4038;
  --retablo: #7A1F2B;
  --retablo-oscuro: #5C1620;
  --oro: #C9A227;
  --oro-suave: #E4C766;
  --danzante: #2456A6;
  --fiesta: #E08A2E;
  --oliva: #5A6B41;
  --blanco: #FFFFFF;
  --titulo: #5C1620;
  --subtitulo-acento: #B08D57;

  --serif: "Fraunces", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --arco: 999px 999px 12px 12px;
  --arco-chico: 60px 60px 6px 6px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  color: var(--noche);
  background: var(--piedra-suave);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

.envolvente { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ---------- Barra superior en kichwa ---------- */
.barra-kichwa {
  background: var(--noche);
  color: var(--oro-suave);
  text-align: center;
  font-size: 0.85rem;
  padding: 8px 16px;
  letter-spacing: 0.02em;
}

/* ---------- Navegación ---------- */
header.principal {
  background: var(--retablo);
  border-bottom: none;
  position: sticky;
  top: 0;
  z-index: 50;
}
nav.envolvente {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.marca {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.marca img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.marca-texto { display: flex; flex-direction: column; line-height: 1.1; }
.marca-texto strong { font-family: var(--serif); font-size: 1.05rem; font-weight: 600; color: var(--blanco); }
.marca-texto span { font-size: 0.72rem; color: rgba(255,255,255,0.75); letter-spacing: 0.04em; }

.menu-principal { display: none; gap: 18px; font-size: 0.92rem; font-weight: 500; flex-wrap: wrap; row-gap: 8px; }
.menu-principal a {
  position: relative;
  padding: 6px 2px;
  display: inline-block;
  white-space: nowrap;
  color: var(--blanco);
  transition: color 0.15s ease, transform 0.15s ease;
}
.menu-principal a:hover { color: var(--oro-suave); transform: translateY(-2px); }

.nav-acciones { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

.menu-toggle { display: block; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--blanco); }

@media (min-width: 880px) {
  .menu-principal { display: flex; }
  .menu-toggle { display: none; }
}

/* Celular y tablet: el botón ☰ agrega la clase "abierto" y el menú se
   despliega debajo de la barra roja, una opción debajo de otra. */
@media (max-width: 879px) {
  .menu-principal.abierto {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 6px 16px 14px;
    background: var(--retablo);
    box-shadow: 0 12px 24px rgba(0,0,0,0.2);
    max-height: calc(100vh - 80px);
    overflow-y: auto;
  }
  .menu-principal.abierto a {
    padding: 13px 8px;
    font-size: 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.14);
  }
  .menu-principal.abierto a:last-child { border-bottom: none; }
  .menu-principal.abierto a:hover { transform: none; }
}

/* ---------- Hero ---------- */
.hero {
  padding: 0;
  overflow: hidden;
}

.hero-imagen-envoltura { position: relative; width: 100%; }
.hero-imagen {
  position: relative;
  overflow: hidden;
  /* Altura calculada para que en la primera pantalla entren juntos el
     carrusel, la frase del día y los botones de acceso, sin hacer scroll. */
  height: clamp(240px, 46vh, 520px);
}
.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* La foto llena todo el rectángulo, centrada, sin ningún recorte
     calculado — así se pidió expresamente. El panel tiene un campo de
     "encuadre" por si alguna foto puntual necesita ajustarse a mano. */
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero-slide.activa { opacity: 1; }
.hero-caption {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(201,162,39,0.4);
  border-radius: 999px;
  padding: 9px 20px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--noche);
  box-shadow: 0 10px 24px -12px rgba(42,36,32,0.4);
  white-space: nowrap;
}

/* ---------- Sección "Palabra que inspira", con la espiga dorada ---------- */
.cita-inspiracion { padding: 10px 0 4px; }
.cita-inspiracion-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 26px;
  align-items: center;
  max-width: 1180px;
  padding-bottom: 4px;
}
.espiga-dorada {
  width: 62px;
  height: auto;
  color: var(--oro);
  flex-shrink: 0;
  margin-top: 4px;
  opacity: 0.9;
}
.cita-inspiracion-texto .eyebrow { margin-bottom: 16px; }
@media (max-width: 560px) {
  .cita-inspiracion-grid { grid-template-columns: 1fr; }
  .espiga-dorada { width: 34px; }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--retablo);
  margin-bottom: 18px;
}
/* La rayita decorativa del eyebrow se quitó a pedido del usuario. */

.hero-cita {
  font-family: var(--serif);
  font-size: clamp(0.82rem, 1.1vw, 1rem);
  color: var(--retablo-oscuro);
  font-weight: 500;
  font-style: italic;
  line-height: 1.32;
  letter-spacing: -0.005em;
}
.hero-cita-fuente {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fiesta);
}
.hero h1 em {
  font-style: italic;
  color: var(--retablo);
}

.hero p.intro {
  font-size: 1.08rem;
  color: var(--subtitulo-acento);
  max-width: 46ch;
  margin-bottom: 30px;
}

.punto-vivo { width: 8px; height: 8px; border-radius: 50%; background: #9a9a9a; flex-shrink: 0; }

.cta-fila { display: flex; flex-wrap: wrap; gap: 14px; }
.boton-primario, .boton-secundario {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: transform 0.35s var(--ease), background 0.35s var(--ease), border-color 0.35s var(--ease), color 0.35s var(--ease);
}
.boton-primario:hover, .boton-secundario:hover { transform: translateY(-3px); }
.boton-primario { background: var(--retablo); color: var(--blanco); }
.boton-primario:hover { background: var(--retablo-oscuro); }
.boton-secundario { border: 1.5px solid var(--oro); color: var(--retablo-oscuro); background: rgba(201,162,39,0.08); }
.boton-secundario:hover { border-color: var(--retablo); background: rgba(122,31,43,0.06); color: var(--retablo); }

/* ---------- Cinta de celebraciones ---------- */
.cinta-celebraciones {
  background: var(--noche);
  padding: 46px 0 40px;
}
.cinta-titulo {
  color: var(--oro-suave);
  font-family: var(--serif);
  font-size: 1.3rem;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.medalla-fila {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 720px) { .medalla-fila { grid-template-columns: repeat(3, 1fr); } }

.medalla {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(228,199,102,0.35);
  border-radius: 20px;
  padding: 20px 22px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), background 0.4s var(--ease);
}
a.medalla:hover { transform: translateY(-3px); border-color: var(--oro); background: rgba(255,255,255,0.1); }
a.medalla-pendiente { cursor: default; }
a.medalla-pendiente:hover { transform: none; border-color: rgba(228,199,102,0.35); background: rgba(255,255,255,0.06); }
.medalla .fecha {
  flex-shrink: 0;
  width: 54px; height: 54px;
  border-radius: 50%;
  border: 2px solid var(--oro);
  color: var(--oro-suave);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.7rem; line-height: 1.1;
}
.medalla .fecha strong { font-size: 1.1rem; font-family: var(--serif); }
.medalla .fecha .punto-vivo { width: 10px; height: 10px; }
.medalla h4 { color: var(--blanco); font-size: 0.98rem; margin-bottom: 4px; }
.medalla p { color: rgba(255,255,255,0.6); font-size: 0.82rem; }

/* ---------- Secciones generales ---------- */
section { padding: 92px 0; }
.titulo-seccion {
  font-family: var(--serif);
  color: var(--titulo);
  font-size: clamp(1.9rem, 3.8vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}
.subtitulo-seccion {
  color: var(--noche-suave);
  max-width: 56ch;
  margin-bottom: 52px;
  font-size: 1.04rem;
}

/* ---------- Refinamiento editorial: elevación ambiental compartida ----------
   Cualquier tarjeta del sitio (tarjeta-acceso, tarjeta-grupo, tarjeta-referente,
   tarjeta-video, tarjeta-emergencia...) recibe la misma sombra suave en reposo
   y la misma elevación al pasar el mouse, sin necesidad de repetirlo en cada
   bloque por separado. */
[class*="tarjeta-"] {
  box-shadow: 0 1px 2px rgba(42,36,32,0.04), 0 10px 28px -20px rgba(42,36,32,0.16);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
a[class*="tarjeta-"]:hover,
.tarjeta-grupo:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 48px -20px rgba(42,36,32,0.22);
}

/* ---------- Revelado al hacer scroll ----------
   Solo se ocultan los elementos si el JS realmente corrió (html.js). Si por
   algún motivo el script no carga, todo se queda visible desde el inicio —
   nunca depende del movimiento para poder leer el contenido. */
html.js .reveal-item {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
html.js .reveal-item.visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  html.js .reveal-item { opacity: 1; transform: none; transition: none; }
}

/* ---------- Grid de accesos ---------- */
/* En pantallas anchas, las 7 tarjetas entran en una sola fila */
@media (min-width: 1150px) { .grid-accesos { grid-template-columns: repeat(7, 1fr); gap: 12px; } }





.icono.i1 { background: rgba(122,31,43,0.1); color: var(--retablo); }
.icono.i2 { background: rgba(201,162,39,0.15); color: #8a6d15; }
.icono.i3 { background: rgba(36,86,166,0.1); color: var(--danzante); }
.icono.i4 { background: rgba(224,138,46,0.14); color: var(--fiesta); }

/* ---------- Institución ---------- */
.institucion-cabecera {
  border-radius: 0 0 60% 60% / 0 0 32px 32px;
  background: var(--fiesta);
  color: var(--blanco);
  padding: 56px 0 60px;
}
.institucion-cabecera .eyebrow { color: var(--oro-suave); }
.institucion-cabecera h1 { font-family: var(--serif); font-size: clamp(2rem,4.5vw,2.8rem); margin-bottom: 14px; }
.institucion-cabecera p { color: rgba(255,255,255,0.85); max-width: 62ch; }

.seccion-institucion { background: var(--piedra); }
.institucion-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}
@media (min-width: 900px) { .institucion-grid { grid-template-columns: 0.9fr 1.1fr; } }
/* La columna de fotos va apilada, no una sola imagen centrada: el texto de
   al lado es mucho más alto y con una sola foto quedaban huecos blancos
   grandes arriba y abajo. Con align-items: start la columna arranca arriba
   y las fotos van llenando. */
.institucion-imagen { display: flex; flex-direction: column; gap: 20px; }
.institucion-imagen figure {
  margin: 0;
  border-radius: var(--arco-chico);
  overflow: hidden;
  aspect-ratio: 4/5;
}
.institucion-imagen figure:nth-child(2) { aspect-ratio: 5/4; }
.institucion-imagen img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 899px) {
  /* En móvil no hace falta rellenar nada: basta la primera foto. */
  .institucion-imagen figure:nth-child(n+2) { display: none; }
  .institucion-imagen figure { aspect-ratio: 5/4; }
}
.institucion-texto p { margin-bottom: 16px; color: var(--noche-suave); }
.institucion-texto .marcador {
  display: inline-block;
  background: var(--blanco);
  border: 1px solid rgba(122,31,43,0.25);
  color: var(--retablo);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 6px;
}

/* ---------- Franja fotográfica festiva ---------- */
.franja-fotos { padding: 0; }
.franja-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}
@media (min-width: 720px) { .franja-grid { grid-template-columns: repeat(4, 1fr); } }
.franja-grid figure { aspect-ratio: 3/4; overflow: hidden; position: relative; }
.franja-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.franja-grid figure:hover img { transform: scale(1.06); }
.franja-grid figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.65), transparent);
  color: var(--blanco);
  font-size: 0.75rem;
  padding: 24px 14px 12px;
}

/* ---------- Grupos ---------- */
.seccion-grupos { text-align: center; }
.seccion-accesos { text-align: center; }
.cinta-grupos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 10px;
}
.chip-grupo {
  transition: transform 0.15s ease, background 0.15s ease;
  border: 1px solid rgba(42,36,32,0.15);
  border-radius: 999px;
  padding: 10px 20px;
  font-size: 0.88rem;
  font-weight: 500;
  background: var(--blanco);
  display: inline-block;
  text-decoration: none;
  color: var(--noche);
  cursor: pointer;
}
.chip-grupo:hover { background: rgba(122,31,43,0.08); transform: translateY(-2px); color: var(--retablo); }

/* ---------- Footer ---------- */
footer {
  background: var(--noche);
  color: rgba(255,255,255,0.75);
  padding: 60px 0 30px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  margin-bottom: 44px;
}
@media (min-width: 780px) { .footer-grid { grid-template-columns: 1.3fr 0.85fr 0.85fr 1fr; } }
.footer-marca { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.footer-marca img { width: 40px; height: 40px; border-radius: 50%; }
.footer-marca strong { color: var(--blanco); font-family: var(--serif); font-size: 1.05rem; }
.footer-col h5 { color: var(--oro-suave); font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 16px; }
.footer-col a, .footer-col p { display: block; font-size: 0.88rem; margin-bottom: 10px; color: rgba(255,255,255,0.72); }
.footer-col a:hover { color: var(--oro-suave); }
.redes-fila { display: flex; gap: 12px; margin-top: 4px; }
.redes-fila a {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem;
}
.pie-final {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 22px;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.45);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
}
/* Los botones flotantes (WhatsApp y Descarga la App, abajo a la derecha)
   tapaban el final del crédito del pie. En computadora se corre el texto a
   la izquierda, dejando libre el ancho de los botones; en el celular, donde
   el texto ocupa todo el ancho, se deja espacio debajo. */
.pie-final { padding-right: 170px; }
@media (max-width: 760px) {
  .pie-final { padding-right: 0; padding-bottom: 110px; }
}

/* ---------- Marcadores de posición de fotografía ---------- */
.foto-pendiente {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 24px;
  background: repeating-linear-gradient(
    135deg,
    var(--piedra) 0px, var(--piedra) 14px,
    var(--piedra-suave) 14px, var(--piedra-suave) 28px
  );
  border: 2px dashed rgba(122,31,43,0.35);
  color: var(--retablo-oscuro);
}
.foto-pendiente .marca-icono { font-size: 1.6rem; opacity: 0.6; }
.foto-pendiente strong { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.02em; }
.foto-pendiente span { font-size: 0.74rem; color: var(--noche-suave); max-width: 24ch; }

.franja-grid .foto-pendiente { border-width: 1px; padding: 14px; }
.franja-grid .foto-pendiente strong { font-size: 0.74rem; }
.franja-grid .foto-pendiente span { font-size: 0.66rem; }

/* ---------- Contacto ---------- */
.contacto-cabecera {
  border-radius: 0 0 60% 60% / 0 0 32px 32px;
  background: var(--fiesta);
  color: var(--blanco);
  padding: 56px 0 60px;
}
.contacto-cabecera .eyebrow { color: var(--blanco); opacity: 0.85; }
.contacto-cabecera h1 { font-family: var(--serif); font-size: clamp(2rem,4.5vw,2.8rem); margin-bottom: 14px; }
.contacto-cabecera p { color: rgba(255,255,255,0.9); max-width: 62ch; }

/* ---------- Momentos parroquiales (efecto parallax) ---------- */
.parallax-seccion { position: relative; padding: 8vh 0; background: var(--piedra-suave); }
.parallax-item {
  position: relative;
  height: 90vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  margin-bottom: 6vh;
}
.parallax-item:last-child { margin-bottom: 0; }
.parallax-media {
  position: relative;
  width: min(640px, 86vw);
  aspect-ratio: 4 / 5;
  border-radius: var(--arco);
  overflow: hidden;
  box-shadow: 0 30px 70px -20px rgba(42,36,32,0.5);
  opacity: 0;
  transform: scale(0.7);
  will-change: transform, opacity;
}
.parallax-media img { width: 100%; height: 100%; object-fit: cover; }
.parallax-media .foto-pendiente { border-radius: 0; }
.parallax-etiqueta {
  position: absolute;
  bottom: 24px; left: 50%;
  transform: translateX(-50%);
  background: var(--blanco);
  color: var(--noche);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 999px;
  box-shadow: 0 10px 24px -12px rgba(42,36,32,0.35);
  white-space: nowrap;
  z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
  .parallax-media { transition: none !important; opacity: 1 !important; transform: none !important; }
}


/* ---------- Página de Horarios ---------- */
.horarios-cabecera {
  border-radius: 0 0 60% 60% / 0 0 32px 32px;
  background: var(--fiesta);
  color: var(--blanco);
  padding: 56px 0 58px;
}
.horarios-cabecera .eyebrow { color: var(--oro-suave); }
.horarios-cabecera h1 { font-family: var(--serif); font-size: clamp(2rem,4.5vw,2.8rem); margin-bottom: 14px; }
.horarios-cabecera p { color: rgba(255,255,255,0.72); max-width: 60ch; margin-bottom: 8px; }
.semana-actual {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(228,199,102,0.12);
  border: 1px solid rgba(228,199,102,0.4);
  color: var(--oro-suave);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 18px;
}

.toggle-vista {
  display: inline-flex;
  background: var(--piedra);
  border-radius: 999px;
  padding: 5px;
  margin: 36px 0 8px;
}
.toggle-vista button {
  border: none;
  background: transparent;
  padding: 10px 22px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--noche-suave);
  cursor: pointer;
}
.toggle-vista button.activo {
  background: var(--retablo);
  color: var(--blanco);
}

.nota-aviso {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: rgba(201,162,39,0.1);
  border: 1px solid rgba(201,162,39,0.35);
  border-radius: 16px;
  padding: 16px 20px;
  font-size: 0.86rem;
  color: var(--noche-suave);
  margin-bottom: 40px;
}

.vista-horario { display: none; }
.vista-horario.activa { display: block; }

.grupo-horario {
  border: 1px solid rgba(42,36,32,0.06);
  border-radius: 20px;
  margin-bottom: 22px;
  overflow: hidden;
  background: var(--blanco);
}
.grupo-horario h3 {
  font-family: var(--serif);
  font-size: 1.15rem;
  background: var(--piedra);
  padding: 16px 22px;
  border-bottom: 1px solid rgba(42,36,32,0.08);
}
.fila-horario {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 22px;
  border-bottom: 1px solid rgba(42,36,32,0.06);
  font-size: 0.92rem;
}
.fila-horario:last-child { border-bottom: none; }
.fila-horario .hora { font-weight: 700; color: var(--retablo); font-family: var(--serif); font-size: 1.05rem; }
.fila-horario .lugar { font-weight: 600; }
.fila-horario .detalle { font-size: 0.8rem; color: var(--noche-suave); }
.fila-horario .nota {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--fiesta);
  background: rgba(224,138,46,0.12);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .fila-horario { grid-template-columns: 70px 1fr; }
  .fila-horario .nota { grid-column: 1 / -1; justify-self: start; margin-top: 4px; }
}

/* ---------- Rincón Apologético ---------- */
.apologetica-cabecera {
  border-radius: 0 0 60% 60% / 0 0 32px 32px;
  background: var(--fiesta);
  color: var(--blanco);
  padding: 56px 0 60px;
}
.apologetica-cabecera .eyebrow { color: var(--oro-suave); }
.apologetica-cabecera h1 { font-family: var(--serif); font-size: clamp(2rem,4.5vw,2.8rem); margin-bottom: 14px; }
.apologetica-cabecera p { color: rgba(255,255,255,0.85); max-width: 62ch; }

.pregunta-item {
  border: 1px solid rgba(42,36,32,0.12);
  border-radius: 18px;
  margin-bottom: 14px;
  overflow: hidden;
  background: var(--blanco);
}
.pregunta-boton {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--serif);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--noche);
}
.pregunta-boton .signo {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--retablo);
  color: var(--retablo);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  transition: transform 0.2s ease;
}
.pregunta-item.abierta .signo { transform: rotate(45deg); }
.pregunta-respuesta {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}
.pregunta-respuesta-interior {
  padding: 0 24px 24px;
  color: var(--noche-suave);
  font-size: 0.96rem;
  line-height: 1.65;
}
.pregunta-respuesta-interior p { margin-bottom: 12px; }
.pregunta-respuesta-interior .fuente {
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--retablo);
  background: rgba(122,31,43,0.08);
  padding: 3px 10px;
  border-radius: 999px;
  margin: 2px 6px 2px 0;
}

.dato-ecuador {
  background: rgba(201,162,39,0.1);
  border-left: 3px solid var(--oro);
  padding: 10px 14px;
  border-radius: 0 10px 10px 0;
  font-size: 0.88rem !important;
}

.enlaces-profundizar { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.enlaces-profundizar a {
  border: 1px solid rgba(42,36,32,0.12);
  border-radius: 12px;
  padding: 14px 18px;
  background: var(--blanco);
  font-weight: 700;
  font-size: 0.94rem;
  color: var(--retablo);
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: border-color 0.15s ease;
}
.enlaces-profundizar a span { font-weight: 500; font-size: 0.8rem; color: var(--noche-suave); }
.enlaces-profundizar a:hover { border-color: var(--retablo); }

.jovenes-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 720px) { .jovenes-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .jovenes-grid { grid-template-columns: repeat(3, 1fr); } }

.tarjeta-video {
  border: 1px solid rgba(42,36,32,0.06);
  border-radius: 20px;
  overflow: hidden;
  background: var(--blanco);
}
.tarjeta-video .miniatura {
  aspect-ratio: 9/12;
  background: repeating-linear-gradient(135deg, var(--piedra) 0px, var(--piedra) 14px, var(--piedra-suave) 14px, var(--piedra-suave) 28px);
  border-bottom: 1px dashed rgba(122,31,43,0.3);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; color: var(--retablo-oscuro); text-align: center; padding: 20px;
}
.tarjeta-video .miniatura .play { font-size: 1.8rem; }
.tarjeta-video .miniatura strong { font-size: 0.78rem; }
.tarjeta-video .miniatura span { font-size: 0.68rem; color: var(--noche-suave); max-width: 22ch; }
.tarjeta-video .cuerpo { padding: 16px 18px; }
.tarjeta-video h4 { font-family: var(--serif); font-size: 1rem; margin-bottom: 4px; }
.tarjeta-video p { font-size: 0.82rem; color: var(--noche-suave); }

.tarjeta-referente {
  border: 1px solid rgba(42,36,32,0.06);
  border-radius: 16px;
  padding: 18px 20px;
  background: var(--piedra);
}
.tarjeta-referente strong { display: block; font-family: var(--serif); font-size: 1rem; margin-bottom: 4px; }
.tarjeta-referente span { font-size: 0.82rem; color: var(--noche-suave); }
.tarjeta-referente .plataforma {
  display: inline-block; margin-top: 8px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--danzante);
}

/* ---------- Página de Grupos ---------- */
.filtro-categoria {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 36px;
}
.filtro-categoria button {
  border: 1px solid rgba(42,36,32,0.15);
  background: var(--blanco);
  color: var(--noche-suave);
  border-radius: 999px;
  padding: 9px 18px;
  font-family: var(--sans);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
}
.filtro-categoria button.activo {
  background: var(--retablo);
  border-color: var(--retablo);
  color: var(--blanco);
}

.grid-grupos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 640px) { .grid-grupos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .grid-grupos { grid-template-columns: repeat(3, 1fr); } }

.tarjeta-grupo {
  scroll-margin-top: 100px;
  border: 1px solid rgba(42,36,32,0.06);
  border-radius: 20px;
  background: var(--blanco);
  padding: 22px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tarjeta-grupo .categoria-etiqueta {
  align-self: flex-start;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--retablo);
  background: rgba(122,31,43,0.08);
  padding: 3px 10px;
  border-radius: 999px;
}
.tarjeta-grupo h3 { font-family: var(--serif); font-size: 1.12rem; margin-top: 2px; }
.tarjeta-grupo .carisma { font-size: 0.88rem; color: var(--noche-suave); flex-grow: 1; }
.tarjeta-grupo .encuentro {
  font-size: 0.78rem;
  color: var(--noche-suave);
  border-top: 1px dashed rgba(42,36,32,0.12);
  padding-top: 10px;
  margin-top: 4px;
}
.tarjeta-grupo .encuentro strong { color: var(--noche); }

/* Bloque de responsable: separado a propósito, para poder ocultarlo con una
   sola clase (ver Sistema de Diseño, nota sobre nombres de responsables) */
.tarjeta-grupo .bloque-responsable {
  font-size: 0.78rem;
  color: var(--danzante);
  font-weight: 600;
  background: rgba(36,86,166,0.07);
  border-radius: 10px;
  padding: 8px 12px;
  margin-top: 4px;
}
.tarjeta-grupo .bloque-responsable span {
  display: block;
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--noche-suave);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 2px;
}
/* Para ocultar todos los responsables de una vez en el futuro:
   agregar la clase "ocultar-responsables" al <body> y listo. */
body.ocultar-responsables .bloque-responsable { display: none; }

/* ---------- Inscripción a grupos por WhatsApp ---------- */
.boton-inscribirme {
  align-self: flex-start;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--retablo);
  background: rgba(122,31,43,0.08);
  border: none;
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}
.boton-inscribirme:hover { background: rgba(122,31,43,0.16); transform: translateY(-2px); }
.form-inscripcion {
  display: none;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px dashed rgba(42,36,32,0.12);
}
.form-inscripcion.abierto { display: flex; }
.form-inscripcion input {
  font-family: var(--sans);
  font-size: 0.85rem;
  padding: 9px 12px;
  border: 1px solid rgba(42,36,32,0.18);
  border-radius: 10px;
  background: var(--blanco);
}
.form-inscripcion input:focus { outline: 2px solid var(--retablo); border-color: transparent; }
.boton-enviar-whatsapp {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--blanco);
  background: #25D366;
  border: none;
  border-radius: 10px;
  padding: 9px 12px;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}
.boton-enviar-whatsapp:hover { background: #1DA851; transform: translateY(-2px); }
.form-inscripcion .nota-form { font-size: 0.7rem; color: var(--noche-suave); margin: 0; }

/* ---------- Avisos importantes (franja bajo el header) ---------- */
.avisos-franja { background: var(--fiesta); color: var(--blanco); }
.avisos-contenido {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 24px;
}
.avisos-contenido p { font-size: 0.85rem; margin: 0; flex-grow: 1; }
.avisos-icono { font-size: 1rem; flex-shrink: 0; }
.avisos-cerrar {
  background: none;
  border: none;
  color: var(--blanco);
  font-size: 0.9rem;
  cursor: pointer;
  opacity: 0.8;
  flex-shrink: 0;
}
.avisos-cerrar:hover { opacity: 1; }

/* ---------- Palabra que inspira (frase bíblica rotativa) ---------- */
.palabra-inspira { background: var(--piedra-suave); padding: 48px 0; text-align: center; }
.verso-rotativo {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  color: var(--titulo, var(--noche));
  max-width: 46ch;
  margin: 14px auto 8px;
  transition: opacity 0.4s ease;
}
.verso-cita {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--subtitulo-acento, var(--retablo));
  transition: opacity 0.4s ease;
}

/* ---------- Carrusel de fotos ---------- */
.carrusel-seccion { padding-bottom: 0; }
.carrusel {
  position: relative;
  max-width: 900px;
  margin: 28px auto 0;
  aspect-ratio: 16/9;
  border-radius: var(--arco);
  overflow: hidden;
  box-shadow: 0 24px 50px -20px rgba(42,36,32,0.35);
}
.carrusel-track { position: relative; width: 100%; height: 100%; }
.carrusel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.carrusel-slide.activa { opacity: 1; }
.carrusel-slide img { width: 100%; height: 100%; object-fit: cover; }
.carrusel-flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.85);
  border: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 1.3rem;
  cursor: pointer;
  color: var(--noche);
  transition: background 0.15s ease;
}
.carrusel-flecha:hover { background: var(--blanco); }
.carrusel-flecha.izquierda { left: 14px; }
.carrusel-flecha.derecha { right: 14px; }
.carrusel-puntos {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}
.carrusel-punto {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.55);
  cursor: pointer;
  padding: 0;
}
.carrusel-punto.activo { background: var(--blanco); width: 20px; border-radius: 4px; }

/* ---------- Divisor de arcos ----------
   El elemento de firma del sitio: la misma silueta de los arcos de piedra de
   la nave del templo, ahora como protagonista entre secciones y no solo como
   marco de foto. El relleno "muerde" el fondo claro de arriba y se funde con
   el color oscuro de la franja de abajo. */
.divisor-arcos { line-height: 0; margin-top: -1px; }
.divisor-arcos svg { display: block; width: 100%; height: 44px; }
.divisor-arcos path { fill: var(--noche); }

/* ---------- Botones flotantes (App + WhatsApp) ---------- */
.acciones-flotantes {
  position: fixed;
  bottom: 22px;
  right: 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  z-index: 40;
}
.whatsapp-flotante {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  transition: transform 0.15s ease;
  text-decoration: none;
  background: #25D366;
  box-shadow: 0 12px 28px -8px rgba(37,211,102,0.6);
}
.whatsapp-flotante:hover { transform: scale(1.08); }
.boton-app-flotante {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--retablo);
  color: var(--blanco);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 12px 28px -8px rgba(122,31,43,0.6);
  transition: transform 0.15s ease, background 0.15s ease;
}
.boton-app-flotante:hover { transform: translateY(-2px); background: var(--retablo-oscuro); }

/* ---------- Calendario interactivo ---------- */
.calendario-controles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.calendario-nav { display: flex; align-items: center; gap: 14px; }
.calendario-nav h3 { font-family: var(--serif); font-size: 1.2rem; min-width: 160px; text-align: center; }
.calendario-flecha {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(42,36,32,0.15);
  background: var(--blanco);
  font-size: 1.2rem;
  cursor: pointer;
  transition: background 0.15s ease;
}
.calendario-flecha:hover { background: var(--piedra-suave); }
.calendario-toggle { font-size: 0.82rem; color: var(--noche-suave); display: flex; align-items: center; gap: 6px; cursor: pointer; }

.calendario-leyenda { display: flex; gap: 18px; flex-wrap: wrap; font-size: 0.8rem; color: var(--noche-suave); margin-bottom: 14px; }
.calendario-leyenda span { display: flex; align-items: center; gap: 6px; }
.punto-leyenda { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.punto-leyenda.fiesta { background: var(--retablo); }
.punto-leyenda.novena { background: var(--danzante); }
.punto-leyenda.grupo { background: #2E8B57; }

.calendario-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 20px;
}
.calendario-cabecera-dia { text-align: center; font-size: 0.72rem; font-weight: 700; color: var(--noche-suave); padding: 6px 0; }
.calendario-dia {
  aspect-ratio: 1;
  border-radius: 10px;
  border: 1px solid rgba(42,36,32,0.08);
  padding: 6px;
  font-size: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.calendario-dia.vacio { border: none; }
.calendario-dia.con-evento { cursor: pointer; background: var(--piedra-suave); transition: background 0.15s ease; }
.calendario-dia.con-evento:hover { background: rgba(122,31,43,0.08); }
.calendario-puntos-dia { display: flex; gap: 3px; margin-top: auto; }

.calendario-detalle {
  border-top: 1px dashed rgba(42,36,32,0.15);
  padding-top: 14px;
}
.calendario-detalle-vacio { font-size: 0.85rem; color: var(--noche-suave); }
.calendario-detalle h4 { font-family: var(--serif); font-size: 1rem; margin-bottom: 8px; }
.calendario-detalle-item {
  border-left: 3px solid var(--retablo);
  padding: 6px 12px;
  margin-bottom: 6px;
  font-size: 0.85rem;
  display: flex;
  flex-direction: column;
}
.calendario-detalle-item span { color: var(--noche-suave); font-size: 0.78rem; }
.calendario-detalle-item.novena { border-left-color: var(--danzante); }
.calendario-detalle-item.grupo { border-left-color: #2E8B57; }

/* ---------- Mapa embebido (Contacto) ---------- */
.mapa-embebido {
  margin-top: 24px;
  aspect-ratio: 16/7;
  border-radius: var(--arco);
  overflow: hidden;
  border: 1px solid rgba(42,36,32,0.12);
}

/* ---------- Emergencias ---------- */
.seccion-emergencias { background: var(--piedra-suave); }
.tarjeta-emergencia {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--blanco);
  border-radius: var(--arco-chico);
  padding: 20px 22px;
  margin-top: 18px;
  border: 1px solid rgba(42,36,32,0.08);
}
.tarjeta-emergencia h3 { font-family: var(--serif); font-size: 1.05rem; margin-bottom: 6px; }
.tarjeta-emergencia p { font-size: 0.9rem; color: var(--noche-suave); margin-bottom: 6px; }
.emergencia-icono { font-size: 1.5rem; flex-shrink: 0; }
.tarjeta-emergencia.critica { border-left: 4px solid var(--fiesta); }
.lista-emergencia { margin: 8px 0; padding-left: 18px; }
.lista-emergencia li { font-size: 0.9rem; color: var(--noche-suave); margin-bottom: 6px; }

/* ---------- Modal de detalle de ministerio ---------- */
.tarjeta-grupo { cursor: pointer; }
.tarjeta-grupo .boton-inscribirme,
.tarjeta-grupo .form-inscripcion { cursor: default; }

.modal-ministerio {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20,18,15,0.6);
  z-index: 110;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-ministerio.abierto { display: flex; }
.modal-ministerio-caja {
  position: relative;
  background: var(--blanco);
  border-radius: 18px;
  padding: 32px;
  max-width: 640px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
}
.modal-cerrar {
  position: absolute;
  top: 16px; right: 16px;
  background: none;
  border: none;
  font-size: 1.3rem;
  cursor: pointer;
  color: var(--noche-suave);
}
.modal-ministerio-caja h3 { font-family: var(--serif); font-size: 1.4rem; margin: 10px 0 12px; }
.modal-ministerio-caja > p { font-size: 0.95rem; color: var(--noche-suave); margin-bottom: 18px; }

.modal-galeria { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-bottom: 20px; }
.modal-galeria img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.modal-galeria .foto-pendiente { grid-column: 1 / -1; aspect-ratio: 3/1; }

.modal-invitacion {
  background: var(--piedra-suave);
  border-radius: var(--arco-chico);
  padding: 18px 20px;
  margin-bottom: 20px;
}
.modal-verso { font-family: var(--serif); font-style: italic; font-size: 1.02rem; color: var(--titulo); margin-bottom: 6px; }
.modal-cita { font-size: 0.8rem; font-weight: 700; color: var(--subtitulo-acento); margin-bottom: 12px; }
.modal-invitacion > p:last-child { font-size: 0.9rem; color: var(--noche-suave); margin: 0; }

/* ---------- Botones de tema y búsqueda en el header ---------- */
.boton-buscar {
  background: none;
  border: 1px solid rgba(255,255,255,0.4);
  color: var(--blanco);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.15s ease;
  flex-shrink: 0;
}
.boton-buscar:hover { background: rgba(255,255,255,0.15); }

/* ---------- Buscador interno ---------- */
.buscador-panel {
  display: none;
  border-top: 1px solid rgba(42,36,32,0.06);
  background: var(--blanco);
  padding: 14px 24px;
}
.buscador-panel.abierto { display: block; }
.buscador-panel input {
  width: 100%;
  max-width: 480px;
  font-family: var(--sans);
  font-size: 0.95rem;
  padding: 10px 14px;
  border: 1px solid rgba(42,36,32,0.18);
  border-radius: 10px;
  background: var(--blanco);
}
.buscador-panel input:focus { outline: 2px solid var(--retablo); border-color: transparent; }
.buscador-resultados { max-width: 480px; margin-top: 8px; }
.buscador-item {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.9rem;
  color: var(--noche);
}
.buscador-item:hover { background: var(--piedra-suave); color: var(--retablo); }
.buscador-vacio { font-size: 0.85rem; color: var(--noche-suave); padding: 6px 12px; }

/* ---------- Galería y lightbox (Multimedia) ---------- */
.galeria-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 640px) { .galeria-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 980px) { .galeria-grid { grid-template-columns: repeat(4, 1fr); } }
.galeria-grid figure { aspect-ratio: 1; overflow: hidden; border-radius: var(--arco-chico); cursor: pointer; }
.galeria-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.galeria-grid figure:hover img { transform: scale(1.06); }

.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20,18,15,0.92);
  z-index: 100;
  align-items: center;
  justify-content: center;
}
.lightbox.abierto { display: flex; }
.lightbox img { max-width: 88vw; max-height: 82vh; border-radius: 8px; }
.lightbox-cerrar {
  position: absolute; top: 20px; right: 24px;
  background: none; border: none; color: var(--blanco);
  font-size: 1.6rem; cursor: pointer;
}
.lightbox-flecha {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,0.15); border: none; color: var(--blanco);
  width: 44px; height: 44px; border-radius: 50%; font-size: 1.6rem; cursor: pointer;
}
.lightbox-flecha.izquierda { left: 18px; }
.lightbox-flecha.derecha { right: 18px; }
.lightbox-flecha:hover { background: rgba(255,255,255,0.28); }

/* ---------- Recursos: embed y fuentes ---------- */
.recurso-embebido { border-radius: var(--arco); overflow: hidden; border: 1px solid rgba(42,36,32,0.12); margin-top: 20px; }
.recurso-fuente { font-size: 0.78rem; color: var(--noche-suave); margin-top: 10px; }
.recurso-fuente a { color: var(--retablo); font-weight: 600; }

/* ---------- Aviso de cookies ---------- */
.aviso-cookies {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  max-width: 640px;
  margin: 0 auto;
  background: var(--noche);
  color: rgba(255,255,255,0.9);
  border-radius: var(--arco-chico);
  padding: 16px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  z-index: 90;
  box-shadow: 0 20px 40px -14px rgba(0,0,0,0.4);
}
.aviso-cookies p { font-size: 0.82rem; margin: 0; flex: 1 1 260px; }
.aviso-cookies a { color: var(--oro-suave); font-weight: 600; text-decoration: underline; }
.aviso-cookies-boton {
  background: var(--blanco);
  color: var(--noche);
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  flex-shrink: 0;
}

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--retablo);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}


/* =====================================================================
   ADORNOS DORADOS
   Inspirados en el afiche de Corpus Christi 2026 de la parroquia: hojas
   doradas, filigranas y fondo con textura de papel. Todo va aquí, en la
   hoja de estilos compartida, así aplica automáticamente a las 12 páginas
   sin tener que tocar el HTML de cada una.
   ===================================================================== */

/* ---------- Fondo con textura de papel ---------- */
body {
  position: relative;
  background-color: var(--piedra-suave);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%22180%22%3E%3Cfilter%20id%3D%22f%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.85%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22180%22%20height%3D%22180%22%20filter%3D%22url%28%23f%29%22%20opacity%3D%220.5%22%2F%3E%3C%2Fsvg%3E");
  opacity: 0.5;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
}
body > * { position: relative; z-index: 1; }

/* ---------- Filigrana bajo los títulos de sección ---------- */
.titulo-seccion::after {
  content: "";
  display: block;
  width: 160px;
  height: 20px;
  margin-top: 14px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%2020%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23C9A227%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M6%2C10%20H58%22%2F%3E%3Cpath%20d%3D%22M102%2C10%20H154%22%2F%3E%3Cpath%20d%3D%22M64%2C10%20C68%2C4%2074%2C4%2078%2C10%20C74%2C16%2068%2C16%2064%2C10%20Z%22%2F%3E%3Cpath%20d%3D%22M96%2C10%20C92%2C4%2086%2C4%2082%2C10%20C86%2C16%2092%2C16%2096%2C10%20Z%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2280%22%20cy%3D%2210%22%20r%3D%222.4%22%20fill%3D%22%23C9A227%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}
/* Cuando el título va centrado, la filigrana también */
[style*="text-align:center"] .titulo-seccion::after,
.seccion-accesos .titulo-seccion::after { margin-left: auto; margin-right: auto; }
/* En cabeceras de color, la filigrana se ve mal sobre naranja: se oculta */
.institucion-cabecera .titulo-seccion::after,
.contacto-cabecera .titulo-seccion::after,
.horarios-cabecera .titulo-seccion::after,
.apologetica-cabecera .titulo-seccion::after { display: none; }

/* ---------- Ramas doradas en las esquinas de las cabeceras ---------- */
.institucion-cabecera,
.contacto-cabecera,
.horarios-cabecera,
.apologetica-cabecera,
.cita-inspiracion {
  position: relative;
  overflow: hidden;
}
.institucion-cabecera::after,
.contacto-cabecera::after,
.horarios-cabecera::after,
.apologetica-cabecera::after {
  content: "";
  position: absolute;
  right: 60px;
  top: 50%;
  transform: translateY(-50%);
  width: 200px;
  height: 200px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%3E%3Cline%20x1%3D%22134.0%22%20y1%3D%2272.0%22%20x2%3D%22158.0%22%20y2%3D%2272.0%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%223.4%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22132.8%22%20y1%3D%2280.8%22%20x2%3D%22145.4%22%20y2%3D%2284.2%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%223.4%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22129.4%22%20y1%3D%2289.0%22%20x2%3D%22150.2%22%20y2%3D%22101.0%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%223.4%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22124.0%22%20y1%3D%2296.0%22%20x2%3D%22133.2%22%20y2%3D%22105.2%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%223.4%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22117.0%22%20y1%3D%22101.4%22%20x2%3D%22129.0%22%20y2%3D%22122.2%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%223.4%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22108.8%22%20y1%3D%22104.8%22%20x2%3D%22112.2%22%20y2%3D%22117.4%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%223.4%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22100.0%22%20y1%3D%22106.0%22%20x2%3D%22100.0%22%20y2%3D%22130.0%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%223.4%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%2291.2%22%20y1%3D%22104.8%22%20x2%3D%2287.8%22%20y2%3D%22117.4%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%223.4%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%2283.0%22%20y1%3D%22101.4%22%20x2%3D%2271.0%22%20y2%3D%22122.2%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%223.4%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%2276.0%22%20y1%3D%2296.0%22%20x2%3D%2266.8%22%20y2%3D%22105.2%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%223.4%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%2270.6%22%20y1%3D%2289.0%22%20x2%3D%2249.8%22%20y2%3D%22101.0%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%223.4%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%2267.2%22%20y1%3D%2280.8%22%20x2%3D%2254.6%22%20y2%3D%2284.2%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%223.4%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%2266.0%22%20y1%3D%2272.0%22%20x2%3D%2242.0%22%20y2%3D%2272.0%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%223.4%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%2267.2%22%20y1%3D%2263.2%22%20x2%3D%2254.6%22%20y2%3D%2259.8%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%223.4%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%2270.6%22%20y1%3D%2255.0%22%20x2%3D%2249.8%22%20y2%3D%2243.0%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%223.4%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%2276.0%22%20y1%3D%2248.0%22%20x2%3D%2266.8%22%20y2%3D%2238.8%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%223.4%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%2283.0%22%20y1%3D%2242.6%22%20x2%3D%2271.0%22%20y2%3D%2221.8%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%223.4%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%2291.2%22%20y1%3D%2239.2%22%20x2%3D%2287.8%22%20y2%3D%2226.6%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%223.4%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22100.0%22%20y1%3D%2238.0%22%20x2%3D%22100.0%22%20y2%3D%2214.0%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%223.4%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22108.8%22%20y1%3D%2239.2%22%20x2%3D%22112.2%22%20y2%3D%2226.6%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%223.4%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22117.0%22%20y1%3D%2242.6%22%20x2%3D%22129.0%22%20y2%3D%2221.8%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%223.4%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22124.0%22%20y1%3D%2248.0%22%20x2%3D%22133.2%22%20y2%3D%2238.8%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%223.4%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22129.4%22%20y1%3D%2255.0%22%20x2%3D%22150.2%22%20y2%3D%2243.0%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%223.4%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%22132.8%22%20y1%3D%2263.2%22%20x2%3D%22145.4%22%20y2%3D%2259.8%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%223.4%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%22100%22%20cy%3D%2272%22%20r%3D%2230%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%225%22%2F%3E%3Ccircle%20cx%3D%22100%22%20cy%3D%2272%22%20r%3D%2217%22%20fill%3D%22%23FFFFFF%22%2F%3E%3Cpath%20d%3D%22M100%2C62%20V82%20M90%2C72%20H110%22%20stroke%3D%22%23FFF%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M96%2C6%20h8%20v8%20h8%20v8%20h-8%20v8%20h-8%20v-8%20h-8%20v-8%20h8%20z%22%20fill%3D%22%23FFFFFF%22%2F%3E%3Cpath%20d%3D%22M94%2C104%20h12%20v14%20h-12%20z%22%20fill%3D%22%23FFFFFF%22%2F%3E%3Cellipse%20cx%3D%22100%22%20cy%3D%22126%22%20rx%3D%2213%22%20ry%3D%229%22%20fill%3D%22%23FFFFFF%22%2F%3E%3Cpath%20d%3D%22M95%2C134%20h10%20v22%20h-10%20z%22%20fill%3D%22%23FFFFFF%22%2F%3E%3Cpath%20d%3D%22M72%2C178%20C72%2C166%2084%2C160%20100%2C160%20C116%2C160%20128%2C166%20128%2C178%20Z%22%20fill%3D%22%23FFFFFF%22%2F%3E%3Crect%20x%3D%2266%22%20y%3D%22178%22%20width%3D%2268%22%20height%3D%229%22%20rx%3D%224%22%20fill%3D%22%23FFFFFF%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  opacity: 0.20;
  pointer-events: none;
}

/* Rama decorativa junto a la cita bíblica de Inicio */

/* ---------- Marco dorado sutil en las tarjetas ---------- */
[class*="tarjeta-"] {
  border-color: rgba(201,162,39,0.28) !important;
}
[class*="tarjeta-"]:hover {
  border-color: rgba(201,162,39,0.65) !important;
}

/* ---------- Borde decorativo superior de las secciones claras ---------- */


@media (max-width: 700px) {
  .institucion-cabecera::after,
  .contacto-cabecera::after,
  .horarios-cabecera::after,
  .apologetica-cabecera::after,
  .titulo-seccion::after { width: 130px; }
}

@media print {
  body::before { display: none; }
}


/* ---------- Adornos de la franja de avisos ----------
   Espigas doradas a lado y lado, en vez del divisor de "olas" que se quitó. */
.cinta-celebraciones { position: relative; overflow: hidden; }
.cinta-celebraciones::before,
.cinta-celebraciones::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 110px;
  height: 220px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20200%22%3E%3Cpath%20d%3D%22M52%2C196%20C40%2C168%2034%2C140%2040%2C110%20C45%2C84%2056%2C50%2066%2C16%22%20fill%3D%22none%22%20stroke%3D%22%23C9A227%22%20stroke-width%3D%223.2%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M46%2C172%20C34%2C166%2026%2C156%2024%2C142%20C36%2C148%2044%2C158%2046%2C172%20Z%22%20fill%3D%22%23C9A227%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20C-6.6%2C-7.5%20-6.1%2C-21.6%200%2C-30.0%20C1.6%2C-21.0%202.2%2C-9.0%200%2C0%20Z%22%20transform%3D%22translate%2841%2C112%29%20rotate%28-18%29%22%20fill%3D%22%23C9A227%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20C6.6%2C-7.5%206.1%2C-21.6%200%2C-30.0%20C-1.6%2C-21.0%20-2.2%2C-9.0%200%2C0%20Z%22%20transform%3D%22translate%2841%2C112%29%20rotate%2842%29%22%20fill%3D%22%23C9A227%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20C-6.2%2C-7.1%20-5.7%2C-20.4%200%2C-28.3%20C1.6%2C-19.8%202.1%2C-8.5%200%2C0%20Z%22%20transform%3D%22translate%2843%2C98%29%20rotate%28-17%29%22%20fill%3D%22%23C9A227%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20C6.2%2C-7.1%205.7%2C-20.4%200%2C-28.3%20C-1.6%2C-19.8%20-2.1%2C-8.5%200%2C0%20Z%22%20transform%3D%22translate%2843%2C98%29%20rotate%2841%29%22%20fill%3D%22%23C9A227%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20C-5.9%2C-6.7%20-5.4%2C-19.2%200%2C-26.7%20C1.5%2C-18.7%202.0%2C-8.0%200%2C0%20Z%22%20transform%3D%22translate%2847%2C84%29%20rotate%28-15%29%22%20fill%3D%22%23C9A227%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20C5.9%2C-6.7%205.4%2C-19.2%200%2C-26.7%20C-1.5%2C-18.7%20-2.0%2C-8.0%200%2C0%20Z%22%20transform%3D%22translate%2847%2C84%29%20rotate%2839%29%22%20fill%3D%22%23C9A227%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20C-5.5%2C-6.2%20-5.1%2C-18.0%200%2C-25.0%20C1.4%2C-17.5%201.9%2C-7.5%200%2C0%20Z%22%20transform%3D%22translate%2851%2C70%29%20rotate%28-14%29%22%20fill%3D%22%23C9A227%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20C5.5%2C-6.2%205.1%2C-18.0%200%2C-25.0%20C-1.4%2C-17.5%20-1.9%2C-7.5%200%2C0%20Z%22%20transform%3D%22translate%2851%2C70%29%20rotate%2838%29%22%20fill%3D%22%23C9A227%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20C-5.2%2C-5.8%20-4.8%2C-16.8%200%2C-23.3%20C1.3%2C-16.3%201.7%2C-7.0%200%2C0%20Z%22%20transform%3D%22translate%2856%2C56%29%20rotate%28-13%29%22%20fill%3D%22%23C9A227%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20C5.2%2C-5.8%204.8%2C-16.8%200%2C-23.3%20C-1.3%2C-16.3%20-1.7%2C-7.0%200%2C0%20Z%22%20transform%3D%22translate%2856%2C56%29%20rotate%2837%29%22%20fill%3D%22%23C9A227%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20C-4.8%2C-5.4%20-4.4%2C-15.6%200%2C-21.7%20C1.2%2C-15.2%201.6%2C-6.5%200%2C0%20Z%22%20transform%3D%22translate%2860%2C42%29%20rotate%28-11%29%22%20fill%3D%22%23C9A227%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20C4.8%2C-5.4%204.4%2C-15.6%200%2C-21.7%20C-1.2%2C-15.2%20-1.6%2C-6.5%200%2C0%20Z%22%20transform%3D%22translate%2860%2C42%29%20rotate%2835%29%22%20fill%3D%22%23C9A227%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20C-4.5%2C-5.0%20-4.1%2C-14.4%200%2C-20.0%20C1.1%2C-14.0%201.5%2C-6.0%200%2C0%20Z%22%20transform%3D%22translate%2864%2C28%29%20rotate%28-10%29%22%20fill%3D%22%23C9A227%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20C4.5%2C-5.0%204.1%2C-14.4%200%2C-20.0%20C-1.1%2C-14.0%20-1.5%2C-6.0%200%2C0%20Z%22%20transform%3D%22translate%2864%2C28%29%20rotate%2834%29%22%20fill%3D%22%23C9A227%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20C6%2C-8%206%2C-22%200%2C-30%20C-6%2C-22%20-6%2C-8%200%2C0%20Z%22%20transform%3D%22translate%2866%2C22%29%20rotate%2812%29%22%20fill%3D%22%23C9A227%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  opacity: 0.30;
  pointer-events: none;
}
.cinta-celebraciones::before { left: 10px; }
.cinta-celebraciones::after  { right: 10px; transform: translateY(-50%) scaleX(-1); }

/* ---------- Espiga de fondo en el resto de páginas ----------
   Aparece tenue abajo a la izquierda del contenido de cada página interna,
   para que el motivo del afiche esté presente en todo el sitio. */
main, body > section:nth-of-type(2) { position: relative; }
.seccion-institucion,
.seccion-accesos { position: relative; overflow: hidden; }
.seccion-institucion::before {
  content: "";
  position: absolute;
  left: -30px;
  bottom: -40px;
  width: 150px;
  height: 300px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20200%22%3E%3Cpath%20d%3D%22M52%2C196%20C40%2C168%2034%2C140%2040%2C110%20C45%2C84%2056%2C50%2066%2C16%22%20fill%3D%22none%22%20stroke%3D%22%23C9A227%22%20stroke-width%3D%223.2%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M46%2C172%20C34%2C166%2026%2C156%2024%2C142%20C36%2C148%2044%2C158%2046%2C172%20Z%22%20fill%3D%22%23C9A227%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20C-6.6%2C-7.5%20-6.1%2C-21.6%200%2C-30.0%20C1.6%2C-21.0%202.2%2C-9.0%200%2C0%20Z%22%20transform%3D%22translate%2841%2C112%29%20rotate%28-18%29%22%20fill%3D%22%23C9A227%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20C6.6%2C-7.5%206.1%2C-21.6%200%2C-30.0%20C-1.6%2C-21.0%20-2.2%2C-9.0%200%2C0%20Z%22%20transform%3D%22translate%2841%2C112%29%20rotate%2842%29%22%20fill%3D%22%23C9A227%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20C-6.2%2C-7.1%20-5.7%2C-20.4%200%2C-28.3%20C1.6%2C-19.8%202.1%2C-8.5%200%2C0%20Z%22%20transform%3D%22translate%2843%2C98%29%20rotate%28-17%29%22%20fill%3D%22%23C9A227%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20C6.2%2C-7.1%205.7%2C-20.4%200%2C-28.3%20C-1.6%2C-19.8%20-2.1%2C-8.5%200%2C0%20Z%22%20transform%3D%22translate%2843%2C98%29%20rotate%2841%29%22%20fill%3D%22%23C9A227%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20C-5.9%2C-6.7%20-5.4%2C-19.2%200%2C-26.7%20C1.5%2C-18.7%202.0%2C-8.0%200%2C0%20Z%22%20transform%3D%22translate%2847%2C84%29%20rotate%28-15%29%22%20fill%3D%22%23C9A227%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20C5.9%2C-6.7%205.4%2C-19.2%200%2C-26.7%20C-1.5%2C-18.7%20-2.0%2C-8.0%200%2C0%20Z%22%20transform%3D%22translate%2847%2C84%29%20rotate%2839%29%22%20fill%3D%22%23C9A227%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20C-5.5%2C-6.2%20-5.1%2C-18.0%200%2C-25.0%20C1.4%2C-17.5%201.9%2C-7.5%200%2C0%20Z%22%20transform%3D%22translate%2851%2C70%29%20rotate%28-14%29%22%20fill%3D%22%23C9A227%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20C5.5%2C-6.2%205.1%2C-18.0%200%2C-25.0%20C-1.4%2C-17.5%20-1.9%2C-7.5%200%2C0%20Z%22%20transform%3D%22translate%2851%2C70%29%20rotate%2838%29%22%20fill%3D%22%23C9A227%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20C-5.2%2C-5.8%20-4.8%2C-16.8%200%2C-23.3%20C1.3%2C-16.3%201.7%2C-7.0%200%2C0%20Z%22%20transform%3D%22translate%2856%2C56%29%20rotate%28-13%29%22%20fill%3D%22%23C9A227%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20C5.2%2C-5.8%204.8%2C-16.8%200%2C-23.3%20C-1.3%2C-16.3%20-1.7%2C-7.0%200%2C0%20Z%22%20transform%3D%22translate%2856%2C56%29%20rotate%2837%29%22%20fill%3D%22%23C9A227%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20C-4.8%2C-5.4%20-4.4%2C-15.6%200%2C-21.7%20C1.2%2C-15.2%201.6%2C-6.5%200%2C0%20Z%22%20transform%3D%22translate%2860%2C42%29%20rotate%28-11%29%22%20fill%3D%22%23C9A227%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20C4.8%2C-5.4%204.4%2C-15.6%200%2C-21.7%20C-1.2%2C-15.2%20-1.6%2C-6.5%200%2C0%20Z%22%20transform%3D%22translate%2860%2C42%29%20rotate%2835%29%22%20fill%3D%22%23C9A227%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20C-4.5%2C-5.0%20-4.1%2C-14.4%200%2C-20.0%20C1.1%2C-14.0%201.5%2C-6.0%200%2C0%20Z%22%20transform%3D%22translate%2864%2C28%29%20rotate%28-10%29%22%20fill%3D%22%23C9A227%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20C4.5%2C-5.0%204.1%2C-14.4%200%2C-20.0%20C-1.1%2C-14.0%20-1.5%2C-6.0%200%2C0%20Z%22%20transform%3D%22translate%2864%2C28%29%20rotate%2834%29%22%20fill%3D%22%23C9A227%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20C6%2C-8%206%2C-22%200%2C-30%20C-6%2C-22%20-6%2C-8%200%2C0%20Z%22%20transform%3D%22translate%2866%2C22%29%20rotate%2812%29%22%20fill%3D%22%23C9A227%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  opacity: 0.13;
  pointer-events: none;
}

@media (max-width: 900px) {
  .cinta-celebraciones::before,
  .cinta-celebraciones::after { display: none; }
  .seccion-institucion::before { opacity: 0.08; }
}


/* ---------- Accesos rápidos (estilo icono + nombre) ----------
   Van justo debajo de la frase del día, en la franja entre las dos líneas
   doradas, para que se vean apenas la persona baja un poco. */
.seccion-accesos {
  position: relative;
  padding: 2px 0 16px;
  overflow: hidden;
}

.grid-accesos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  max-width: 940px;
  margin: 0 auto;
}
@media (min-width: 900px) { .grid-accesos { grid-template-columns: repeat(7, 1fr); } }

.tarjeta-acceso {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  text-align: center;
  text-decoration: none;
  padding: 14px 6px;
  border-radius: 16px;
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none !important;
  transition: transform 0.35s var(--ease), background 0.35s var(--ease), border-color 0.35s var(--ease);
}
.tarjeta-acceso .icono {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.45s var(--ease);
}
.tarjeta-acceso .icono svg { width: 100%; height: 100%; }
.tarjeta-acceso .nombre {
  font-family: var(--serif);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--retablo-oscuro);
  line-height: 1.25;
}
/* Movimiento al pasar el mouse: la tarjeta sube y el icono "rebota" */
.tarjeta-acceso:hover {
  transform: translateY(-6px) !important;
  background: var(--blanco);
  border-color: rgba(201,162,39,0.45);
  box-shadow: 0 16px 32px -18px rgba(42,36,32,0.3) !important;
}
.tarjeta-acceso:hover .icono { transform: translateY(-4px) scale(1.12) rotate(-4deg); }

@media (max-width: 900px) {
  .tarjeta-acceso .nombre { font-size: 0.78rem; }
}


/* ---------- Tarjetas informativas (Contacto, Multimedia, Recursos) ----------
   Mantienen el formato completo con título, texto y enlace. Se separaron de
   .tarjeta-acceso cuando esa pasó a ser solo icono + nombre en Inicio. */
.grid-tarjetas {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 640px)  { .grid-tarjetas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid-tarjetas { grid-template-columns: repeat(3, 1fr); } }

.tarjeta-info {
  display: block;
  text-align: left;
  text-decoration: none;
  color: inherit;
  background: var(--blanco);
  border: 1px solid rgba(201,162,39,0.28);
  border-radius: 18px;
  padding: 24px 22px;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
a.tarjeta-info:hover {
  transform: translateY(-5px);
  border-color: rgba(201,162,39,0.65);
  box-shadow: 0 20px 40px -20px rgba(42,36,32,0.25);
}
.tarjeta-info .icono {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
  margin-bottom: 14px;
  background: rgba(201,162,39,0.10);
}
.tarjeta-info h3 { font-family: var(--serif); font-size: 1.08rem; margin-bottom: 8px; }
.tarjeta-info p { font-size: 0.88rem; color: var(--noche-suave); margin-bottom: 12px; line-height: 1.55; }
.tarjeta-info .ir { font-size: 0.8rem; font-weight: 700; color: var(--retablo); display: inline-block; transition: transform 0.2s ease; }
a.tarjeta-info:hover .ir { transform: translateX(4px); }


/* ---------- Espiga a la izquierda de las cabeceras ----------
   Va antes del texto, dejando el título con aire a su derecha. */
.institucion-cabecera::before,
.contacto-cabecera::before,
.horarios-cabecera::before,
.apologetica-cabecera::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 110px;
  height: 210px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20200%22%3E%3Cpath%20d%3D%22M52%2C196%20C40%2C168%2034%2C140%2040%2C110%20C45%2C84%2056%2C50%2066%2C16%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%223.2%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M46%2C172%20C34%2C166%2026%2C156%2024%2C142%20C36%2C148%2044%2C158%2046%2C172%20Z%22%20fill%3D%22%23FFFFFF%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20C-6.6%2C-7.5%20-6.1%2C-21.6%200%2C-30.0%20C1.6%2C-21.0%202.2%2C-9.0%200%2C0%20Z%22%20transform%3D%22translate%2841%2C112%29%20rotate%28-18%29%22%20fill%3D%22%23FFFFFF%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20C6.6%2C-7.5%206.1%2C-21.6%200%2C-30.0%20C-1.6%2C-21.0%20-2.2%2C-9.0%200%2C0%20Z%22%20transform%3D%22translate%2841%2C112%29%20rotate%2842%29%22%20fill%3D%22%23FFFFFF%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20C-6.2%2C-7.1%20-5.7%2C-20.4%200%2C-28.3%20C1.6%2C-19.8%202.1%2C-8.5%200%2C0%20Z%22%20transform%3D%22translate%2843%2C98%29%20rotate%28-17%29%22%20fill%3D%22%23FFFFFF%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20C6.2%2C-7.1%205.7%2C-20.4%200%2C-28.3%20C-1.6%2C-19.8%20-2.1%2C-8.5%200%2C0%20Z%22%20transform%3D%22translate%2843%2C98%29%20rotate%2841%29%22%20fill%3D%22%23FFFFFF%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20C-5.9%2C-6.7%20-5.4%2C-19.2%200%2C-26.7%20C1.5%2C-18.7%202.0%2C-8.0%200%2C0%20Z%22%20transform%3D%22translate%2847%2C84%29%20rotate%28-15%29%22%20fill%3D%22%23FFFFFF%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20C5.9%2C-6.7%205.4%2C-19.2%200%2C-26.7%20C-1.5%2C-18.7%20-2.0%2C-8.0%200%2C0%20Z%22%20transform%3D%22translate%2847%2C84%29%20rotate%2839%29%22%20fill%3D%22%23FFFFFF%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20C-5.5%2C-6.2%20-5.1%2C-18.0%200%2C-25.0%20C1.4%2C-17.5%201.9%2C-7.5%200%2C0%20Z%22%20transform%3D%22translate%2851%2C70%29%20rotate%28-14%29%22%20fill%3D%22%23FFFFFF%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20C5.5%2C-6.2%205.1%2C-18.0%200%2C-25.0%20C-1.4%2C-17.5%20-1.9%2C-7.5%200%2C0%20Z%22%20transform%3D%22translate%2851%2C70%29%20rotate%2838%29%22%20fill%3D%22%23FFFFFF%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20C-5.2%2C-5.8%20-4.8%2C-16.8%200%2C-23.3%20C1.3%2C-16.3%201.7%2C-7.0%200%2C0%20Z%22%20transform%3D%22translate%2856%2C56%29%20rotate%28-13%29%22%20fill%3D%22%23FFFFFF%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20C5.2%2C-5.8%204.8%2C-16.8%200%2C-23.3%20C-1.3%2C-16.3%20-1.7%2C-7.0%200%2C0%20Z%22%20transform%3D%22translate%2856%2C56%29%20rotate%2837%29%22%20fill%3D%22%23FFFFFF%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20C-4.8%2C-5.4%20-4.4%2C-15.6%200%2C-21.7%20C1.2%2C-15.2%201.6%2C-6.5%200%2C0%20Z%22%20transform%3D%22translate%2860%2C42%29%20rotate%28-11%29%22%20fill%3D%22%23FFFFFF%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20C4.8%2C-5.4%204.4%2C-15.6%200%2C-21.7%20C-1.2%2C-15.2%20-1.6%2C-6.5%200%2C0%20Z%22%20transform%3D%22translate%2860%2C42%29%20rotate%2835%29%22%20fill%3D%22%23FFFFFF%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20C-4.5%2C-5.0%20-4.1%2C-14.4%200%2C-20.0%20C1.1%2C-14.0%201.5%2C-6.0%200%2C0%20Z%22%20transform%3D%22translate%2864%2C28%29%20rotate%28-10%29%22%20fill%3D%22%23FFFFFF%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20C4.5%2C-5.0%204.1%2C-14.4%200%2C-20.0%20C-1.1%2C-14.0%20-1.5%2C-6.0%200%2C0%20Z%22%20transform%3D%22translate%2864%2C28%29%20rotate%2834%29%22%20fill%3D%22%23FFFFFF%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20C6%2C-8%206%2C-22%200%2C-30%20C-6%2C-22%20-6%2C-8%200%2C0%20Z%22%20transform%3D%22translate%2866%2C22%29%20rotate%2812%29%22%20fill%3D%22%23FFFFFF%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  opacity: 0.20;
  pointer-events: none;
}
@media (max-width: 1100px) {
  .institucion-cabecera::before,
  .contacto-cabecera::before,
  .horarios-cabecera::before,
  .apologetica-cabecera::before { display: none; }
}

/* ---------- Tarjeta de transmisión en vivo ----------
   En reposo apunta a Radio Latacunga. Cuando el administrador marca que hay
   transmisión, se enciende con el punto rojo parpadeando. */
.medalla.en-vivo { border-color: #E23B3B; background: rgba(226,59,59,0.10); }
.medalla.en-vivo .fecha { border-color: #E23B3B; }
.medalla.en-vivo .punto-vivo { background: #E23B3B; animation: latido 1.4s ease-in-out infinite; }
@keyframes latido {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.78); }
}
@media (prefers-reduced-motion: reduce) {
  .medalla.en-vivo .punto-vivo { animation: none; }
}

/* En móvil las 7 tarjetas se acomodan en dos filas, así que el carrusel se
   achica un poco más para que la frase y los botones sigan entrando juntos
   en la primera pantalla, sin necesidad de hacer scroll. */
@media (max-width: 700px) {
  .hero-imagen { height: clamp(180px, 30vh, 300px); }
  .cita-inspiracion { padding: 8px 0 4px; }
  .seccion-accesos { padding: 2px 0 14px; }
}

/* ---------- Pantalla de inicio: una sola pantalla exacta ----------
   El carrusel, la frase del día y los botones ocupan juntos justo el alto
   visible, de modo que la franja oscura de avisos queda por debajo y no
   asoma al abrir. La foto es la que absorbe el espacio sobrante (flex:1),
   así da igual si la frase ocupa una línea o dos: siempre cuadra. */
.pantalla-inicio {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--alto-header, 64px));
}
.pantalla-inicio .hero {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}
.pantalla-inicio .hero-imagen-envoltura { flex: 1 1 auto; display: flex; }
.pantalla-inicio .hero-imagen { height: 100%; flex: 1 1 auto; }
.pantalla-inicio .cita-inspiracion,
.pantalla-inicio .seccion-accesos { flex: 0 0 auto; }

/* Si la pantalla es muy baja (o el navegador está muy ampliado), la foto
   no baja de un mínimo legible y entonces sí se permite el scroll normal. */
.pantalla-inicio .hero-imagen { min-height: 180px; }

/* ---------- Cabeceras alternadas: tomate / verde oliva ----------
   Siguiendo el orden del menú, las páginas van alternando color para que
   no se vean todas iguales: Quiénes somos (tomate), Horarios (oliva),
   Trámites (tomate), Ministerios (oliva), Catecismo (tomate),
   Apologética (oliva), Contacto (tomate). El verde es además el color
   litúrgico del tiempo ordinario, y contrasta bien con el vino del menú. */
.cabecera-verde { background: var(--oliva) !important; }

/* ---------- Botón de búsqueda ----------
   Antes era un emoji (🔎), que cada sistema dibujaba distinto — se veía
   azul y pixelado. Ahora es un ícono dibujado, del mismo dorado del sitio. */
.boton-buscar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(228,199,102,0.5);
  background: none;
  color: var(--oro-suave);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease), background 0.25s var(--ease);
}
.boton-buscar svg { width: 18px; height: 18px; }
.boton-buscar:hover { border-color: var(--oro); color: var(--oro); background: rgba(228,199,102,0.12); }




/* ---------- Espiga y cruz a los lados de los botones ----------
   Van dentro del flujo, como dos columnas más de la fila, en vez de ir
   posicionadas de forma absoluta: así nunca se solapan con el botón
   flotante de "Descarga la App" y quedan siempre simétricas. */
.seccion-accesos .envolvente {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2.5vw, 34px);
  /* Ancho acotado en función del ancho real de la ventana, para que la
     cruz de la derecha nunca llegue a tocar el botón flotante de
     "Descarga la App", que va fijo en esa esquina sin importar el tamaño. */
  max-width: min(1080px, calc(100vw - 350px));
}
.seccion-accesos .grid-accesos { flex: 0 1 940px; margin: 0; }
.seccion-accesos .espiga-dorada,
.seccion-accesos .cruz-dorada {
  flex: 0 0 auto;
  height: auto;
  color: var(--oro);
  fill: var(--oro);
  pointer-events: none;
}
.seccion-accesos .espiga-dorada { width: 66px; opacity: 0.62; }
.seccion-accesos .cruz-dorada  { width: 62px; opacity: 0.42; }

/* En pantallas angostas los adornos roban espacio a los botones */
@media (max-width: 1150px) {
  .seccion-accesos .espiga-dorada,
  .seccion-accesos .cruz-dorada { display: none; }
}

/* ---------- Tradiciones (Quiénes somos) ----------
   Fichas de las celebraciones de arraigo popular: Corpus Christi y el
   Danzante, el Niño de Isinche, Operación Mato Grosso y el resto del año
   litúrgico, tomadas del Plan Pastoral Parroquial. */
.seccion-tradiciones { position: relative; }
.grid-tradiciones {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 26px;
}
@media (min-width: 900px) { .grid-tradiciones { grid-template-columns: repeat(2, 1fr); } }

.tarjeta-tradicion {
  background: var(--blanco);
  border: 1px solid rgba(201,162,39,0.28);
  border-radius: 18px;
  padding: 26px 24px;
}
.tarjeta-tradicion h3 {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--retablo-oscuro);
  margin-bottom: 12px;
}
.tarjeta-tradicion p {
  font-size: 0.88rem;
  color: var(--noche-suave);
  line-height: 1.65;
  margin-bottom: 12px;
}
.tarjeta-tradicion p:last-child { margin-bottom: 0; }
.tarjeta-tradicion strong { color: var(--noche); }

/* ---------- Horario habitual por lugar (Plan Pastoral) ---------- */
.grid-horario-fijo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 24px;
}
@media (min-width: 900px)  { .grid-horario-fijo { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1300px) { .grid-horario-fijo { grid-template-columns: repeat(3, 1fr); } }

.bloque-fijo {
  background: var(--blanco);
  border: 1px solid rgba(201,162,39,0.28);
  border-radius: 16px;
  padding: 20px 18px;
}
.bloque-fijo h3 {
  font-family: var(--serif);
  font-size: 1.02rem;
  color: var(--retablo-oscuro);
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(201,162,39,0.25);
}
.fila-fija {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(42,36,32,0.08);
  font-size: 0.82rem;
}
.fila-fija:last-child { border-bottom: 0; }
.fila-fija .cuando { color: var(--noche-suave); }
.fila-fija .hora-fija { font-weight: 700; color: var(--retablo); text-align: right; }
.fila-fija .lugar-fijo { grid-column: 1 / -1; font-weight: 600; color: var(--noche); }
.fila-fija .detalle-fijo { grid-column: 1 / -1; font-size: 0.76rem; color: var(--noche-suave); }
.fila-fija .detalle-fijo:empty { display: none; }

/* Enlaces dentro de textos administrados desde el panel (respuestas del
   acordeón, tarjetas de contacto, tradiciones). Antes el color iba en un
   atributo style= dentro del contenido; se movió aquí porque el saneador
   de seguridad no conserva atributos de estilo — así el enlace mantiene su
   apariencia sin que un campo del panel pueda alterar el diseño. */
.pregunta-respuesta-interior a,
.tarjeta-info p a,
.tarjeta-tradicion p a,
.institucion-texto p a {
  color: var(--retablo);
  font-weight: 600;
}

/* ---------------------------------------------------------------------
   Rincón Apologético — respuestas largas
   El material de cada pregunta es extenso, así que se abre en dos niveles:
   un resumen corto y, dentro, un desplegable con la respuesta completa.
   --------------------------------------------------------------------- */

.seccion-apo-intro { padding-bottom: 0; }

.apo-intro-texto > p {
  max-width: 78ch;
}
.apo-intro-texto p {
  margin-bottom: 14px;
  font-size: 1.02rem;
  line-height: 1.75;
}

/* El botón del segundo nivel. Se distingue del acordeón principal por el
   fondo suave y el borde, para que se lea como "hay más adentro". */
.respuesta-completa {
  margin-top: 22px;
  border-top: 1px solid var(--piedra-borde, rgba(0,0,0,.12));
  padding-top: 18px;
}
.completa-boton {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 13px 18px;
  border: 1px solid var(--retablo);
  border-radius: var(--arco-chico, 10px);
  background: transparent;
  color: var(--retablo);
  font-family: inherit;
  font-size: 0.97rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.completa-boton:hover,
.completa-boton:focus-visible {
  background: var(--retablo);
  color: #fff;
}
.completa-boton .signo {
  font-size: 1.25rem;
  line-height: 1;
  flex-shrink: 0;
}

.completa-cuerpo {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}
/* En pantallas anchas la respuesta completa se reparte en dos columnas: el
   índice fijo a la izquierda y el texto a la derecha. La columna de texto se
   mantiene acotada a propósito (unos 78 caracteres por línea): estirarla a
   todo el ancho haría líneas de 130 caracteres, y en un texto tan largo el
   ojo pierde el renglón al volver al margen. El espacio que sobraba lo ocupa
   ahora el índice. */
.completa-cuerpo-interior {
  padding: 22px 2px 4px;
}

@media (min-width: 1000px) {
  .completa-cuerpo-interior {
    display: flex;
    align-items: flex-start;
    gap: 40px;
  }
  .apo-indice {
    flex: 0 0 232px;
    position: sticky;
    top: 96px;          /* deja libre la barra superior fija */
    max-height: calc(100vh - 130px);
    overflow-y: auto;
    margin-bottom: 0;
  }
  .apo-cuerpo-texto {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 78ch;
  }
}

/* En pantallas angostas el índice va arriba y el texto debajo, en una sola
   columna (el .completa-cuerpo-interior no es flex ahí). */
.apo-cuerpo-texto { max-width: 78ch; }

.apo-indice {
  margin: 0 0 24px;
  padding: 16px 18px;
  border-left: 2px solid var(--oro, var(--retablo));
  background: rgba(0, 0, 0, .022);
  border-radius: 0 var(--arco-chico, 10px) var(--arco-chico, 10px) 0;
}
.apo-indice-titulo {
  margin: 0 0 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--retablo);
}
.apo-indice ol {
  margin: 0;
  padding-left: 18px;
  font-size: 0.86rem;
  line-height: 1.45;
}
.apo-indice li { margin-bottom: 8px; }
.apo-indice a {
  color: var(--noche-suave, inherit);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.apo-indice a:hover,
.apo-indice a:focus-visible {
  color: var(--retablo);
  border-bottom-color: currentColor;
}

/* Para que el título al que se salta no quede tapado por la barra fija. */
.apo-subtitulo { scroll-margin-top: 92px; }

/* Apartados dentro de la respuesta completa */
.apo-subtitulo {
  margin: 30px 0 10px;
  font-family: var(--serif, inherit);
  font-size: 1.16rem;
  font-weight: 600;
  color: var(--retablo);
  line-height: 1.35;
}
.apo-subtitulo:first-child { margin-top: 0; }
.apo-subtitulo2 {
  margin: 22px 0 8px;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--noche, inherit);
  line-height: 1.4;
}
.completa-cuerpo-interior p {
  margin-bottom: 13px;
  line-height: 1.78;
}

/* Citas bíblicas y de los Padres */
.apo-cita {
  margin: 18px 0;
  padding: 14px 20px;
  border-left: 3px solid var(--oro, var(--retablo));
  background: rgba(0, 0, 0, .025);
  border-radius: 0 var(--arco-chico, 10px) var(--arco-chico, 10px) 0;
  font-style: italic;
  line-height: 1.7;
}
.apo-cita p:last-child { margin-bottom: 0; }

.apo-lista {
  margin: 14px 0 18px;
  padding-left: 24px;
}
.apo-lista li {
  margin-bottom: 10px;
  line-height: 1.72;
}

@media (max-width: 640px) {
  .completa-boton { font-size: 0.92rem; padding: 12px 14px; }
  .completa-cuerpo-interior { padding-top: 18px; }
  .apo-subtitulo { font-size: 1.08rem; }
  .apo-cita { padding: 12px 15px; }
}

/* ---------------------------------------------------------------------
   Portada de apologética: tarjetas de los ocho bloques
   --------------------------------------------------------------------- */
.grid-bloques {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 700px)  { .grid-bloques { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .grid-bloques { grid-template-columns: repeat(3, 1fr); } }

.tarjeta-bloque {
  display: flex;
  flex-direction: column;
  padding: 24px 24px 20px;
  background: var(--blanco, #fff);
  border: 1px solid rgba(122, 31, 43, .14);
  border-radius: var(--arco-chico, 12px);
  text-decoration: none;
  color: inherit;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.tarjeta-bloque:hover,
.tarjeta-bloque:focus-visible {
  border-color: var(--retablo);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .07);
}
.numero-bloque {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--oro, var(--retablo));
  margin-bottom: 8px;
}
.tarjeta-bloque h3 {
  margin: 0 0 10px;
  font-size: 1.2rem;
  line-height: 1.3;
  color: var(--retablo);
}
.tarjeta-bloque > p {
  margin: 0 0 14px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--noche-suave);
}
.preguntas-bloque {
  margin: 0 0 18px;
  padding-left: 18px;
  font-size: 0.83rem;
  line-height: 1.5;
  color: var(--noche-suave);
}
.preguntas-bloque li { margin-bottom: 6px; }
.tarjeta-bloque .ir {
  margin-top: auto;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--retablo);
}

/* Enlace de vuelta en la cabecera de cada bloque */
.volver-apologetica {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--oro-suave, #fff);
  text-decoration: none;
  opacity: .9;
}
.volver-apologetica:hover { opacity: 1; text-decoration: underline; }

/* ---------------------------------------------------------------------
   Catecismo: guía práctica. Acordeón de un solo nivel — las respuestas son
   cortas, así que se ve todo al abrir la pregunta.
   --------------------------------------------------------------------- */
.cat-etiqueta {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--retablo);
  margin-bottom: 5px;
}
.cat-respuesta-corta {
  margin: 0 0 16px;
  padding: 14px 18px;
  background: rgba(122, 31, 43, .045);
  border-left: 3px solid var(--retablo);
  border-radius: 0 var(--arco-chico, 10px) var(--arco-chico, 10px) 0;
  font-weight: 500;
  line-height: 1.7;
}
.cat-fuente {
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, .08);
  font-size: 0.82rem;
  color: var(--noche-suave);
}
.cat-fuente .cat-etiqueta { color: var(--noche-suave); }
.pregunta-respuesta-interior > p:not(.cat-respuesta-corta):not(.cat-fuente) {
  max-width: 78ch;
}

/* Flecha de vuelta al final de cada bloque, para no tener que subir hasta
   arriba después de leer. */
.volver-abajo {
  margin: 40px 0 0;
  text-align: center;
}
.volver-abajo a {
  display: inline-block;
  padding: 12px 26px;
  border: 1px solid var(--retablo);
  border-radius: 999px;
  color: var(--retablo);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .18s ease, color .18s ease;
}
.volver-abajo a:hover,
.volver-abajo a:focus-visible {
  background: var(--retablo);
  color: #fff;
}

/* La Misa paso a paso: recorrido continuo, sin desplegables. */
.aviso-recorrido {
  max-width: 78ch;
  margin: 0 0 34px;
  padding: 18px 22px;
  background: rgba(122, 31, 43, .04);
  border-left: 3px solid var(--oro, var(--retablo));
  border-radius: 0 var(--arco-chico, 10px) var(--arco-chico, 10px) 0;
}
.aviso-recorrido p {
  margin: 0 0 10px;
  font-size: 0.92rem;
  line-height: 1.7;
}
.aviso-recorrido p:last-child { margin-bottom: 0; }

.recorrido-misa { max-width: 78ch; }
.parte-misa { margin-bottom: 44px; }
.parte-misa-titulo {
  margin: 0 0 18px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--oro, var(--retablo));
  font-family: var(--serif, inherit);
  font-size: 1.4rem;
  color: var(--retablo);
}
.parte-misa-cuerpo p { margin-bottom: 13px; line-height: 1.78; }
.parte-misa-cuerpo blockquote { margin: 16px 0; }

/* ---------------------------------------------------------------------
   Trámites: botón de descarga de PDF, formulario de visita a enfermos y ancianos,
   y las tarjetas de ayuda (más información / intenciones / en línea).
   --------------------------------------------------------------------- */
.boton-descarga {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 14px;
  padding: 10px 18px;
  background: var(--retablo);
  color: #fff !important;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
}
.boton-descarga:visited { color: #fff !important; }
.boton-descarga:hover, .boton-descarga:focus-visible { background: var(--noche); color: #fff !important; }

.seccion-ayuda-tramites .grid-tarjetas { margin-top: 8px; }
.tarjeta-proximamente {
  opacity: 0.85;
  cursor: default;
}
.tarjeta-proximamente .ir { color: var(--noche-suave); }

.seccion-visita-enfermo .envolvente {
  max-width: 620px;
  padding: 32px 28px;
  background: rgba(122, 31, 43, .03);
  border: 1px solid rgba(122, 31, 43, .12);
  border-radius: var(--arco-chico, 14px);
}
.seccion-visita-enfermo h3 {
  margin: 0 0 10px;
  color: var(--retablo);
  font-size: 1.3rem;
}
.seccion-visita-enfermo > .envolvente > p { margin-bottom: 14px; line-height: 1.65; }

.campo-visita {
  display: block;
  margin-bottom: 16px;
}
.campo-visita span {
  display: block;
  margin-bottom: 5px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--noche);
}
.campo-visita input,
.campo-visita textarea,
.campo-visita select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.95rem;
  box-sizing: border-box;
  background: #fff;
}
.campo-visita textarea { resize: vertical; }

/* Campo trampa-antispam del formulario de trámites en línea (Netlify
   Forms): debe existir en el HTML para que los bots lo llenen y así se
   descarten, pero nunca debe verse ni ser alcanzable con teclado. */
.campo-oculto {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Utilidad general para mostrar/ocultar bloques con JS (ej. la nota de
   depósito del formulario de trámites, que solo aparece si el trámite
   elegido tiene un aporte). A diferencia de .campo-oculto, esto SÍ saca
   el bloque del flujo visual y de lectores de pantalla — no es para
   campos que igual deben enviarse. */
.oculto { display: none !important; }

.nota-deposito {
  background: var(--piedra-suave);
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 4px 0 16px;
  font-size: 0.92rem;
}
.nota-deposito strong { display: block; margin-bottom: 6px; }
.nota-deposito .dato-banco { display: block; }