/* ==========================================================================
   La Voz de Dios · SECCIONES
   Cada bloque de la página. Solo lo que no es reutilizable fuera de aquí;
   todo lo demás vive en componentes.css.
   ========================================================================== */

/* --- Barra EN VIVO (solo mientras haya transmisión) ----------------------- */
.vivo{
  background:var(--c-alerta);color:var(--c-superficie);text-align:center;
  padding:10px var(--padding-lat);font-size:14px;line-height:1.5;
  position:relative;z-index:var(--z-alerta);
}
.vivo a{text-decoration:underline;font-weight:var(--peso-fuerte)}
.vivo__punto{
  display:inline-block;width:9px;height:9px;border-radius:50%;
  background:var(--c-superficie);margin-right:7px;
  animation:latido 1.6s ease-in-out infinite;
}
@keyframes latido{0%,100%{opacity:1}50%{opacity:.25}}

/* --- Cabecera ------------------------------------------------------------- */
.cab{
  position:sticky;top:0;z-index:var(--z-cabecera);
  background:var(--c-claro-94);backdrop-filter:blur(12px);
  border-bottom:var(--borde);
}
.cab__in{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:12px}
.cab__logo img{height:clamp(34px,4vw,46px);width:auto}

.nav{display:flex;align-items:center;gap:24px}
/* La navegación va en DM Sans: Figtree se reserva a los titulares */
/* Boldonse en el menú: al ser más ancha baja a 12px y gana tracking */
.nav a:not(.btn){font-family:var(--f-titular);font-weight:var(--peso-titular);font-size:12px;
  text-transform:uppercase;letter-spacing:.04em;transition:color var(--t-rapida)}
.nav{gap:20px}
.nav a:not(.btn):hover{color:var(--c-enlace)}
.nav .btn:hover{color:var(--c-superficie);transform:translate(3px,-3px)}

.hamb{
  display:none;width:44px;height:44px;border:var(--borde);
  border-radius:12px;background:var(--c-superficie);
  align-items:center;justify-content:center;
}
.hamb svg{width:20px;height:20px}

/* --- Hero (opción C: titular gigante centrado) ---------------------------- */
.hero{position:relative;padding-block:clamp(44px,6vw,84px);text-align:center;overflow:hidden}
.hero__in{position:relative}
.hero h1{max-width:19ch;margin:20px auto 0}
.hero__sub{margin:20px auto 0;max-width:56ch;font-size:clamp(16px,1.5vw,20px);color:var(--c-tinta-70)}
.hero .datos{margin-top:26px}
.hero__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;justify-content:center}
/* Sin borde. El contorno de 2px en tinta viene del clon y sigue en el resto de
   piezas, pero aquí encerraba una foto que ya tiene sus propios bordes y
   contrastes: la recuadraba dos veces y ensuciaba. Solo el radio se queda.
   Es una desviación consciente del clon, pedida por el usuario. */
.hero__banda{
  position:relative;
  margin-top:clamp(34px,4.4vw,60px);
  border-radius:var(--r-grande);overflow:hidden;aspect-ratio:21/7;
  background:var(--c-cielo-t);display:grid;place-items:center;
}
/* POR QUÉ ABSOLUTA Y NO height:100%.
   Medido el 2026-09-05: con la imagen en flujo, la banda salía de 998x330 y
   la imagen de 998x751. El alto en porcentaje NO se resuelve contra un
   contenedor cuya altura viene de aspect-ratio, así que caía a auto y la
   imagen conservaba su proporción natural. No había recorte que encuadrar:
   sobresalía y overflow:hidden la cortaba por donde caía.
   Con position:absolute e inset:0 la caja es exactamente la del contenedor,
   sin porcentajes de por medio, y object-fit sí tiene algo que recortar.

   Y el object-position no es decorativo. La foto es 4:3 y la banda 3:1: de
   sus 1355px de alto solo caben unos 600. Centrada dejaba fuera la primera
   fila, la de los niños sentados en el suelo. Con el 76% la ventana arranca
   justo encima de las cabezas y baja hasta el suelo, que es donde está la
   gente.

   En móvil la banda pasa a 4/3, la proporción de la foto: allí no sobra
   nada y el valor no llega a notarse. */
.hero__banda img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  /* El 76% es el reposo, y es lo que se ve si el JS no llega a correr o si
     el visitante pide menos movimiento. paralaje.js recorre --panorama entre
     70% y 84% con el scroll: la reserva de foto que no cabe en la banda se
     va enseñando poco a poco, sin que la imagen salga nunca de su caja. */
  object-position:center var(--panorama, 76%);
}
@media (max-width:760px){ .hero__banda{aspect-ratio:4/3} }

/* --- Frase con revelado palabra a palabra --------------------------------
   El recurso más característico de la referencia: cada palabra se oscurece
   según avanza el scroll. La curva y la duración van aquí; el JS solo
   añade y quita la clase.
   ------------------------------------------------------------------------- */
/* A pantalla completa: cinta de fotos, frase centrada, cinta de fotos */
.frase{
  min-height:100vh;display:grid;align-content:center;
  /* El hueco se midió cuando las cintas eran apaisadas y median unos 200px.
     Al pasar las fotos a vertical subieron a 308px y 28px de aire entre una
     banda de 308 y dos líneas de texto se quedaba corto: la frase parecía
     pegada. Sube a 44-96px, proporcionado a la altura nueva. */
  gap:clamp(44px,7vh,96px);padding-block:var(--e-4);
}
.frase__t{
  font-family:var(--f-titular);font-weight:var(--peso-titular);letter-spacing:var(--ls-titular);
  font-size:var(--fs-lead);line-height:1.45;
  max-width:24ch;margin-inline:auto;text-align:center;
}
.frase__t .w{color:var(--c-tinta-24);transition:color var(--t-rapida) var(--curva)}
.frase__t .w.on{color:var(--c-tinta)}
.frase__pie{margin-top:26px;text-align:center}

/* --- Quiénes somos -------------------------------------------------------- */
/* --- Ubicación: panel lima y mapa a la misma altura -------------------- */
.ubi{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--e-3);min-height:540px}
.ubi__panel{
  background:var(--c-cielo-t);border-radius:var(--r-medio);padding:var(--e-4);
  display:grid;gap:22px;align-content:center;justify-items:start;
}
.ubi__panel h2{max-width:14ch}
.ubi__dir{font-size:var(--fs-medio);line-height:1.6}
.ubi__dir b{
  display:block;margin-bottom:8px;
  font-family:var(--f-titular);font-weight:var(--peso-titular);font-size:var(--fs-h4);
  line-height:var(--lh-h4);letter-spacing:var(--ls-titular);text-transform:uppercase;
}
.ubi__lista{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.ubi__lista li{display:flex;align-items:center;gap:12px;font-size:var(--fs-medio)}
.ubi__lista .ico{width:20px;height:20px;color:var(--c-accion)}
/* --- Sede / Mapa ----------------------------------------------------------
   Dos vistas superpuestas en la misma caja y dos pestañas flotando en la
   esquina. Los paneles van absolutos y a inset:0 para que la caja no cambie
   de alto al alternar: si estuvieran en flujo, pasar de la foto al mapa daría
   un salto de página. */
.ubi__vista{
  position:relative;border-radius:var(--r-medio);overflow:hidden;
  background:var(--c-amarillo-t);min-height:420px;
}
.ubi__lienzo{position:absolute;inset:0}
.ubi__lienzo img,.ubi__lienzo iframe{width:100%;height:100%;display:block;border:0}
/* La fachada es muy vertical (0.56:1) y la caja apaisada: solo cabe un tercio
   del alto. El 48% deja dentro el rótulo, que es lo que identifica el sitio,
   y la entrada con los globos. */
.ubi__lienzo img{object-fit:cover;object-position:center 48%}

.ubi__tabs{
  position:absolute;left:16px;bottom:16px;z-index:var(--z-flotante);
  display:inline-flex;gap:4px;padding:4px;
  background:var(--c-superficie);border-radius:var(--r-pildora);
  box-shadow:0 4px 16px var(--c-tinta-24);
}
.ubi__tab{
  padding:11px 22px;border-radius:var(--r-pildora);
  font-family:var(--f-titular);font-weight:var(--peso-titular);
  font-size:13px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--c-tinta);white-space:nowrap;
}
.ubi__tab:hover{color:var(--c-accion)}
.ubi__tab[aria-selected="true"]{background:var(--c-accion);color:var(--c-superficie)}
.ubi__tab[aria-selected="true"]:hover{color:var(--c-superficie)}
.ubi__tab:focus-visible{outline:3px solid var(--c-enlace);outline-offset:2px}
.ubi__mapa iframe{border:0;width:100%;height:100%;display:block}
@media (max-width:900px){ .ubi{grid-template-columns:1fr} .ubi__mapa{min-height:340px} }

/* --- Pastores ------------------------------------------------------------- */
.past{background:var(--c-oscuro);color:var(--c-fondo)}
.past h2,.past h3{color:var(--c-fondo)}
.past__rej{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,4vw,64px);align-items:center}
.past__foto{
  border:2px solid var(--c-fondo);border-radius:var(--r-grande);overflow:hidden;
  aspect-ratio:4/4.6;background:var(--c-cielo-t);
  display:grid;place-items:center;position:relative;
}
.past__cita{
  font-family:var(--f-acento);font-style:normal;letter-spacing:0;
  font-size:var(--fs-lead);line-height:1.5;color:var(--c-lima);
}
.past__texto{color:var(--c-claro-75);font-size:var(--fs-medio)}
.past__firma{
  display:flex;align-items:center;gap:14px;margin-top:28px;
  padding-top:24px;border-top:1px solid var(--c-claro-24);
}
.past__firma b{
  font-family:var(--f-titular);font-weight:var(--peso-titular);
  font-size:clamp(16px,1.6vw,20px);letter-spacing:var(--ls-titular);display:block;
}
.past__firma span{
  font-family:var(--f-texto);font-weight:var(--peso-fuerte);font-size:var(--fs-micro);
  text-transform:uppercase;letter-spacing:var(--ls-etiqueta);color:var(--c-claro-75);
}
.past__sello{
  position:absolute;right:-14px;bottom:22px;z-index:var(--z-flotante);
  display:grid;place-items:center;width:clamp(76px,8vw,108px);aspect-ratio:1;
  border-radius:50%;background:var(--c-accion);border:2px solid var(--c-fondo);
  color:var(--c-superficie);font-family:var(--f-texto);font-weight:var(--peso-fuerte);
  font-size:clamp(9px,.95vw,11px);text-transform:uppercase;text-align:center;
  letter-spacing:.04em;line-height:1.3;padding:8px;transform:rotate(-9deg);
}
@media (max-width:900px){ .past__rej{grid-template-columns:1fr} }

/* --- Ministerios · bandas alternadas a ancho completo --------------------- */
.banda{padding-block:clamp(34px,4.4vw,64px)}
.banda--cielo{background:var(--c-cielo-t)}
.banda--amarilla{background:var(--c-amarillo-t)}
.banda--fucsia{background:var(--c-fucsia-t)}
.banda--oscura{background:var(--c-oscuro);color:var(--c-fondo)}
.banda--oscura h3{color:var(--c-fondo)}
.banda--oscura .banda__num{opacity:.24}
.banda--oscura .banda__meta{color:var(--c-lima)}
.banda--oscura .banda__texto{color:var(--c-claro-75)}
.banda__rej{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,60px);align-items:center}
.banda--der .banda__foto{order:2}
.banda__foto{
  border:var(--borde);border-radius:var(--r-grande);overflow:hidden;
  aspect-ratio:16/10;display:grid;place-items:center;position:relative;
  background:var(--c-superficie);
}
.banda--oscura .banda__foto{background:var(--c-claro-24);border-color:var(--c-fondo)}
.banda__num{
  font-family:var(--f-titular);font-weight:var(--peso-titular);
  font-size:clamp(30px,3.37vw,49px);line-height:.9;letter-spacing:var(--ls-titular);
  opacity:.16;display:block;
}
.banda__logo{height:60px;display:grid;place-items:center;justify-content:start;margin-bottom:14px}
.banda__logo img{max-height:60px;width:auto}
/* Peso 700 en tinta plena: el naranja como texto solo daría 2.9:1 */
.banda__meta{font-weight:var(--peso-fuerte);font-size:var(--fs-medio);color:var(--c-tinta)}
.banda__texto{color:var(--c-tinta-70);max-width:50ch}
@media (max-width:900px){
  .banda__rej{grid-template-columns:1fr}
  .banda--der .banda__foto{order:0}
}

/* --- Horarios y ubicación ------------------------------------------------- */
/* Horarios sobre tinte lima: la sección anterior (ministerios) ya es oscura
   y dos bandas oscuras seguidas se funden. El lima es el color de la paleta
   que mejor deja saltar los bloques de colores del calendario. */
.horarios{background:var(--c-lima-t);color:var(--c-tinta)}
.horarios h2,.horarios h3{color:var(--c-tinta)}
.horarios__texto{color:var(--c-tinta-70);font-size:var(--fs-medio)}
.horarios__cierre{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:clamp(24px,3vw,36px);padding-top:20px;
  border-top:1px solid var(--c-claro-24);
}

/* --- Calendario semanal: acordeón horizontal ------------------------------
   Con seis días ocupados, siete columnas fijas dejaban cada tarjeta sin ancho
   y los nombres empezaban a partirse. Ahora la semana se lee como un acordeón:
   los días esperan cerrados, con el nombre en vertical sobre su color, y el
   que recibe el ratón (o el foco del teclado) se abre y enseña sus reuniones.
   Al cargar, el abierto es el domingo, que es por donde se empieza.

   TRES DECISIONES QUE SOSTIENEN ESTO

   1. El contenido está SIEMPRE en el HTML. Cerrar es solo recortarlo y
      bajarle la opacidad, así que un lector de pantalla lo lee entero aunque
      no se abra ninguno, y el buscador también.

   2. El día abierto tiene ancho FIJO y los cerrados se reparten lo que queda,
      no al revés. Así el cuerpo de cada día mide siempre lo mismo: al abrirse
      no se recompone el texto, solo se descubre. Si el ancho lo pusiera el
      reparto, cada apertura recalcularía saltos de línea y se vería temblar.

   3. El estado vive en una sola variable, --abierto, que vale 0 o 1. De ella
      cuelgan las opacidades y también el giro y la posición del rótulo, con
      aritmética: rotate(calc((var(--abierto) - 1) * 90deg)) da -90° cerrado y
      0° abierto. Así la lista de :hover y :focus-within se escribe una sola
      vez, en las tres reglas de estado, y ningún hijo la repite.

   EL RÓTULO NO SON DOS CAPAS QUE SE CRUZAN, ES UNA QUE GIRA
   El nombre del día y su reunión viven en un único elemento. Cerrado está
   girado -90° y centrado en la tarjeta; abierto está a 0° en la esquina
   superior izquierda. Entre un estado y otro solo se interpolan `transform`,
   `top` y `left`, que son propiedades animables, así que el rótulo viaja y
   gira de verdad en vez de desvanecerse y aparecer en otro sitio.

   Para que el giro sea exacto hacen falta dos cosas: que el rótulo NO cambie
   de tamaño entre estados (de ahí `width:max-content` y `white-space:nowrap`,
   que dan la misma caja siempre) y que se centre por su propio centro
   (`translate(-50%,-50%)` sobre `top/left:50%`), que es lo único que funciona
   sin saber cuánto mide la tarjeta cerrada, que la reparte el flex.
   ------------------------------------------------------------------------- */
.cal{
  display:flex;align-items:stretch;
  gap:12px;margin-top:clamp(24px,3vw,38px);
  --dia-abierto:clamp(300px,34vw,520px);
  --dia-borde:2px;
  /* Alto de la línea del rótulo. Es un número fijo porque de él sale el hueco
     que el cuerpo le reserva arriba, y porque girado marca su grosor. */
  --cab-alto:30px;
}
.dia{
  --abierto:0;
  position:relative;overflow:hidden;display:grid;
  flex:1 1 0;min-width:0;
  border:var(--borde);border-radius:14px;
  background-color:var(--dia-tinte,var(--c-superficie));
  transition:flex-grow var(--t-rapida) var(--curva),
             flex-basis var(--t-rapida) var(--curva),
             background-color var(--t-rapida) var(--curva);
}
/* Abierto: al cargar el domingo; con el ratón dentro, el que se señale. La
   segunda regla gana a la primera por especificidad, que es justo lo que
   hace que el domingo se cierre en cuanto se mira otro día. */
.dia--abre{--abierto:1;flex:0 0 var(--dia-abierto);background-color:var(--c-superficie)}
.cal:hover .dia--abre,
.cal:focus-within .dia--abre{--abierto:0;flex:1 1 0;background-color:var(--dia-tinte,var(--c-superficie))}
.cal:hover .dia:hover,
.cal:focus-within .dia:focus-within{--abierto:1;flex:0 0 var(--dia-abierto);background-color:var(--c-superficie)}
/* Se puede tabular por los días: sin esto, quien no usa ratón no abriría
   ninguno. El anillo va por fuera porque la tarjeta recorta lo de dentro. */
.dia:focus-visible{outline:3px solid var(--c-accion);outline-offset:3px}
.dia--dom{border-color:var(--c-accion);border-width:3px}

/* Cerrado, cada día lleva el color pleno de su reunión: se reconoce de lejos
   sin leer, igual que en la tarjeta de su ministerio. Van a saturación
   completa y no en tinte porque el fondo de esta sección YA es --c-lima-t: en
   tinte, el martes desaparecía contra la sección. Los cinco dan 6.8:1 o más
   con la tinta encima, así que el nombre en vertical se lee sobrado. */
.dia--lima{--dia-tinte:var(--c-lima)}
.dia--violeta{--dia-tinte:var(--c-violeta)}
.dia--fucsia{--dia-tinte:var(--c-fucsia)}
.dia--amarillo{--dia-tinte:var(--c-amarillo)}
/* El domingo cerrado se va al azul profundo de la marca, el mismo de la
   Reunión Central: aunque estés mirando otro día, se sigue viendo cuál es el
   principal. Es el único con el fondo oscuro, así que el nombre va en claro. */
.dia--dom{--dia-tinte:var(--c-tinta);--dia-texto:var(--c-fondo)}

/* La caja del rótulo: viaja del centro de la tarjeta (cerrada) a la esquina
   superior izquierda (abierta). No recibe eventos, para no robarle el hover
   a la tarjeta. */
.dia__cab{
  position:absolute;z-index:var(--z-flotante);
  width:max-content;height:var(--cab-alto);
  top:calc(16px + (1 - var(--abierto)) * (50% - 16px));
  left:calc(16px + (1 - var(--abierto)) * (50% - 16px));
  transform:translate(calc((var(--abierto) - 1) * 50%),calc((var(--abierto) - 1) * 50%));
  transition:top var(--t-rapida) var(--curva),
             left var(--t-rapida) var(--curva),
             transform var(--t-rapida) var(--curva);
  pointer-events:none;
}
/* Y aquí el giro, sobre el centro de la propia caja: -90° cerrado (se lee de
   abajo arriba, como en la referencia) y 0° abierto. El color se mezcla con
   la misma variable, porque el domingo cerrado va sobre azul oscuro y abierto
   sobre blanco: sin esto habría que escribir cuatro selectores solo para él. */
.dia__cab-in{
  display:flex;align-items:baseline;gap:10px;
  height:100%;white-space:nowrap;
  transform:rotate(calc((var(--abierto) - 1) * 90deg));
  transform-origin:center;
  color:color-mix(in srgb, var(--c-tinta) calc(var(--abierto) * 100%), var(--dia-texto,var(--c-tinta)));
  transition:transform var(--t-rapida) var(--curva),color var(--t-rapida) var(--curva);
}
.dia__nom{
  font-family:var(--f-titular);font-weight:var(--peso-titular);
  font-size:var(--fs-h4);letter-spacing:var(--ls-titular);line-height:1;
}
/* La reunión, al costado del día: así se sabe qué pasa ese día sin abrir nada.
   El punto va en ::before para no meterlo en el HTML, donde un lector de
   pantalla lo leería en voz alta. */
.dia__sub{
  font-family:var(--f-texto);font-weight:var(--peso-fuerte);
  font-size:var(--fs-chico);line-height:1;opacity:.72;
}
.dia__sub::before{content:"·";margin-inline-end:10px}
/* El cuerpo mide lo que medirá abierto, pase lo que pase: por eso el ancho
   es la variable y no el 100%. Se descubre con un pelín de retraso, cuando
   la tarjeta ya ha empezado a crecer. Arriba deja sitio al rótulo, que va
   fuera del flujo. */
.dia__cuerpo{
  position:relative;z-index:var(--z-base);
  width:calc(var(--dia-abierto) - 2 * var(--dia-borde));
  padding:calc(16px + var(--cab-alto) + 14px) 16px 16px;
  display:grid;gap:12px;
  /* Las reuniones se reparten el alto sobrante en vez de amontonarse arriba:
     un día con una sola reunión llena su tarjeta y no deja medio hueco
     blanco, y uno con dos las parte por la mitad. El alto de la fila lo marca
     el día más cargado, así que sin esto los demás quedaban a medias. */
  height:100%;align-content:stretch;grid-auto-rows:1fr;
  opacity:var(--abierto);
  transition:opacity .3s .1s var(--curva);
}
/* Un color por reunión, y ninguno repetido. Los ministerios llevan AQUÍ el
   mismo color que su tarjeta en la portada, para que quien baje por la página
   los reconozca sin leer:
     LVD Kids  cielo · Let's Go  amarillo · Explo  acción
     Virtuosas fucsia · Oración  lima
   La Reunión Central, que es la principal, va en el azul profundo de la marca.
   Varones no tiene tarjeta y estrena el violeta: era eso o repetir color. */
/* --- Versículo de cierre --------------------------------------------------
   Cierra la portada justo antes del pie. Se queda sobre el fondo claro, no
   sobre tinta: el pie ya es oscuro y dos bandas oscuras seguidas se leen como
   una sola mancha. Aquí lo que lo hace notorio es el tamaño y el aire, no el
   color. */
.cierre{
  /* Más alto y con la frase centrada en el hueco: la sección deja de ser una
     franja y pasa a ser un descanso antes del pie. */
  min-height:58vh;
  display:grid; align-content:center;
  padding-block:var(--e-6); text-align:center;
  /* La foto del retiro, con un velo de tinta al 88% encima. El velo no es
     decoración: sobre la foto desnuda el texto claro se pierde en el cielo y
     en la grava. Con el velo el contraste queda muy por encima del mínimo.
     El degradado va ANTES que la url para quedar por delante. */
  background-image:
    linear-gradient(var(--c-tinta-88), var(--c-tinta-88)),
    url("../fotos/cierre.jpg");
  background-size:cover;
  background-position:center 58%;   /* la fila de gente, no el cerro */
  color:var(--c-fondo);
}
/* En DM Sans y a tamaño de h2 la frase pasaba desapercibida: cerraba la
   portada con la misma voz con la que está escrito el resto del texto y, sobre
   una foto velada, eso se lee como un pie de página y no como el remate. Va en
   Boldonse, la de los titulares, en su forma natural: versales, peso 400 y
   tracking neutro. Al ser mucho más ancha, la medida baja de 19 a 15
   caracteres para que siga rompiendo en tres líneas. */
.cierre .versiculo{
  margin-inline:auto;
  font-family:var(--f-titular);
  font-weight:var(--peso-titular);
  text-transform:uppercase;
  letter-spacing:var(--ls-titular);
  font-size:var(--fs-h1);
  line-height:var(--lh-h1);
  max-width:15ch;
  color:var(--c-fondo);
}
/* La referencia en lima: es el color con el que el sitio destaca sobre fondo
   oscuro, y separa la cita de la frase sin añadir otra línea. Da 11.9:1. */
.cierre .versiculo cite{
  margin-top:22px; font-size:var(--fs-mini);
  color:var(--c-lima);
}

/* --- Foto de la congregación en «Quiénes somos» --------------------------
   El contenedor no tenía ni una regla: solo existía el hueco de maqueta, así
   que la foto habría caído suelta a su tamaño natural. Se le da la forma del
   resto de fotos del sitio y la proporción de la propia foto, para que entre
   entera sin recortar. Sin borde, como la banda del hero. */
.mapa{
  position:relative;
  border-radius:var(--r-grande);overflow:hidden;
  aspect-ratio:3/2;background:var(--c-cielo-t);
}
.mapa img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.ev{border-radius:11px;padding:14px;color:var(--c-tinta);display:grid;gap:5px;align-content:center}
.ev--cielo{background:var(--c-cielo)}
.ev--lima{background:var(--c-lima)}
.ev--amarillo{background:var(--c-amarillo)}
.ev--fucsia{background:var(--c-fucsia)}
.ev--violeta{background:var(--c-violeta)}
.ev--accion{background:var(--c-accion);color:var(--c-superficie)}
.ev--tinta{background:var(--c-tinta);color:var(--c-superficie)}
/* La hora va en DM Sans: la cursiva de Playfair aquí se leía mal */
.ev__h{
  font-family:var(--f-texto);font-weight:var(--peso-fuerte);
  font-size:clamp(17px,1.7vw,21px);line-height:1.1;letter-spacing:-.01em;
}
.ev__t{
  font-family:var(--f-titular);font-weight:var(--peso-titular);
  font-size:clamp(15px,1.4vw,18px);line-height:1.45;letter-spacing:var(--ls-titular);
}
.ev__d{font-size:14px;line-height:1.45;opacity:.78}
/* Sobre fondo oscuro el 78% de opacidad se hunde: la línea de detalle sube. */
.ev--accion .ev__d,.ev--tinta .ev__d{opacity:.92}
/* Lunes y miércoles no tienen reunión: franja estrecha, sin borde sólido y
   sin responder al ratón. Están para que la semana se lea completa. */
.vacio{
  flex:0 0 clamp(34px,3vw,52px);
  border:2px dashed var(--c-tinta-24);border-radius:14px;
  display:grid;place-items:center;padding:14px 4px;
}
.vacio span{
  font-family:var(--f-texto);font-weight:var(--peso-fuerte);font-size:12px;
  text-transform:uppercase;letter-spacing:.12em;color:var(--c-tinta-70);
  writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;
}

/* En pantalla estrecha, y en cualquier pantalla que se toque en vez de
   señalarse, el acordeón no tiene sentido: sin ratón no hay forma de abrir.
   Ahí la semana vuelve a ser una lista de tarjetas, todas abiertas.
   El !important es a propósito: tiene que ganarle a las reglas de :hover de
   arriba, que en un móvil se disparan igual al tocar y dejarían medio
   calendario cerrado. */
@media (max-width:1100px),(hover:none){
  .cal{display:grid;grid-template-columns:1fr 1fr}
  .vacio{display:none}
  .dia{--abierto:1 !important;overflow:visible;background-color:var(--c-superficie) !important}
  /* El rótulo vuelve al flujo, sin giro ni viaje: es la primera fila de la
     tarjeta y el cuerpo la segunda. */
  .dia__cab{position:static;width:auto;height:auto;transform:none;padding:16px 16px 0}
  .dia__cab-in{transform:none;white-space:normal;flex-wrap:wrap;color:var(--c-tinta)}
  .dia__cuerpo{width:auto;opacity:1 !important;padding-top:14px}
}
@media (max-width:640px){ .cal{grid-template-columns:1fr} }
/* Sin animación, el acordeón sigue funcionando: cambia de golpe. */
@media (prefers-reduced-motion:reduce){
  .dia,.dia__cab,.dia__cab-in,.dia__cuerpo{transition:none}
}

/* --- Soy nuevo (opción A1: pasos + formulario en dos columnas) ------------ */
.visita{background:var(--c-amarillo-t)}
.visita__rej{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--e-4);align-items:start}
@media (max-width:900px){ .visita__rej{grid-template-columns:1fr} }

/* --- Pie (opción E: nombre a sangre, recortado por abajo) ----------------- */
.pie{background:var(--c-oscuro);color:var(--c-fondo);overflow:hidden}
.pie a:not(.btn):hover{color:var(--c-lima)}
.pie__logo img{height:52px;width:auto;filter:brightness(0) invert(1)}
.pie__top{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--e-4);flex-wrap:wrap;padding-block:var(--e-4);
}
.pie__nav{display:flex;gap:var(--e-4);flex-wrap:wrap}
.pie h4{
  font-family:var(--f-texto);font-weight:var(--peso-fuerte);font-size:var(--fs-micro);
  text-transform:uppercase;letter-spacing:var(--ls-etiqueta);
  color:var(--c-claro-50);margin-bottom:14px;
}
.pie__ls{display:grid;gap:9px}
.pie__ls a{font-family:var(--f-titular);font-weight:var(--peso-titular);font-size:12px;
  text-transform:uppercase;letter-spacing:.04em;opacity:.88}
.pie__nap{margin-top:14px;font-size:var(--fs-chico);color:var(--c-claro-75);max-width:34ch}
.pie__abajo{
  border-top:1px solid var(--c-claro-24);padding-block:20px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:var(--fs-mini);color:var(--c-claro-62);
}
/* --- Marca de agua que cierra el pie --------------------------------------
   El nombre de la iglesia, enorme, cerrando la página como un sello impreso
   que no cabe en la hoja: ocupa EXACTAMENTE el ancho del contenido del pie
   (no el de la ventana, por eso vive dentro de .env) y se corta por abajo.

   El cuerpo no se elige a ojo ni en vw: en Boldonse versales «La Voz de Dios»
   mide --marca-em veces su propio cuerpo, así que dividiendo el ancho
   disponible entre esa cifra sale el tamaño que lo llena justo. Si algún día
   cambia el texto o la tipografía, se vuelve a medir esa cifra y ya está.

   --marca-ancho repite la cuenta de .env (ancho máximo menos los dos
   laterales) porque --ancho-max vale 100% en móvil y un porcentaje dentro de
   un font-size se leería contra el cuerpo del padre, no contra el ancho. */
.pie__marca{
  --marca-em:9.17;
  --marca-ancho:calc(min(1680px,92vw) - 2 * var(--padding-lat));
  font-family:var(--f-titular);font-weight:var(--peso-titular);
  font-size:calc(var(--marca-ancho) / var(--marca-em));
  letter-spacing:var(--ls-titular);
  text-transform:uppercase;
  color:var(--c-claro-09);white-space:nowrap;
  margin-block-start:var(--e-3);
  /* EL CORTE VA POR ABAJO, Y ESO HAY QUE FORZARLO.
     Boldonse dibuja muy alto dentro de su caja. Medido en el navegador con
     canvas, para «La Voz de Dios» y en em de su propio cuerpo:
         tinta sobre la base 1.19 · bajo la base 0.01 · alto de tinta 1.20
         métrica de la fuente: ascenso 1.52 · descenso 0.40 · suma 1.92
     Con line-height:1 la caja mide 1 em pero la fuente pide 1.92, así que el
     medio interlineado sale negativo y las letras asomaban 0.33 em POR ENCIMA
     del borde: recortar por altura les cortaba la cabeza, no los pies.
     El line-height que deja la tinta justo al ras de arriba es
         1.92 - 2 * (1.52 - 1.19) = 1.26
     y a partir de ahí la altura visible ya se cuenta sobre la tinta: 0.94 em
     de los 1.20 que mide, o sea que se recorta el 22% de abajo. */
  line-height:1.26;
  height:.94em;overflow:hidden;
  user-select:none;
}
@media (max-width:560px){
  /* Ahí --ancho-max es 100% y los laterales son fijos de 16px. */
  .pie__marca{--marca-ancho:calc(100vw - 32px)}
}

@media (max-width:760px){
  .nav{display:none}
  .hamb{display:flex}
}

/* La página actual se marca en el menú */
.nav a[aria-current]{color:var(--c-enlace);text-decoration:underline;text-underline-offset:6px}
.panel a[aria-current]{color:var(--c-enlace)}

/* --- Preguntas en bocadillos --------------------------------------------
   Cada pregunta es un bocadillo (.globo) que alterna lado, con una
   anotación a mano enfrente. Sustituye al acordeón: la FAQ deja de ser
   una lista y pasa a leerse como conversación.
   ------------------------------------------------------------------------- */
.faqs__lista{display:grid;gap:clamp(48px,6vw,88px);max-width:1180px;margin-inline:auto}
.faqs__f{display:grid;grid-template-columns:1fr 1fr;gap:var(--e-3);align-items:center}
.faqs__f--der .globo{justify-self:end}
.faqs__f--der .faqs__nota{order:-1}
.faqs__nota{display:grid;place-items:center;padding-inline:var(--e-2)}
@media (max-width:900px){
  .faqs__f{grid-template-columns:1fr}
  .faqs__f--der .faqs__nota{order:0}
  .faqs__f--der .globo{justify-self:start}
  .faqs__nota{display:none}
}

/* --- Equipo en carrusel --------------------------------------------------- */
.equipo{background:var(--c-oscuro);color:var(--c-fondo)}
.equipo h2{color:var(--c-fondo)}
.equipo__texto{color:var(--c-claro-75);font-size:var(--fs-medio);max-width:52ch}
.equipo .carr{margin-top:var(--e-4)}

/* En la barra superior el botón va compacto: a tamaño completo desbordaría */
.cab .btn{padding:14px 22px}
.redes .btn{padding:13px 20px}

/* Nota de cierre de horarios, ahora que la sección solo habla de horarios */
.horarios__nota{
  margin-top:clamp(24px,3vw,36px);padding-top:20px;
  border-top:1px solid var(--c-tinta-14);
  color:var(--c-tinta-70);font-size:var(--fs-medio);max-width:60ch;
}
/* Enlace dentro de un párrafo: subrayado desde el principio, que aquí sí
   hace falta para distinguirlo del texto que lo rodea */
.enlace-t{color:var(--c-enlace);text-decoration:underline;text-underline-offset:3px}
.enlace-t:hover{color:var(--c-tinta)}

/* Ministerios sobre fondo oscuro, como la sección "Our Work" de la referencia */
.ministerios{background:var(--c-oscuro);color:var(--c-fondo)}
.ministerios h2{color:var(--c-fondo)}
.ministerios .apagado{color:var(--c-claro-75)}
.ministerios .enc__anota{color:var(--c-claro-75)}
/* Solo el enlace suelto sobre el fondo oscuro; dentro de una tarjeta el
   enlace hereda el color de esa tarjeta. */
.ministerios > .env > .centro .enlace-f{color:var(--c-lima)}
.pie__ls a{display:inline-block}
.pie__ls a:hover{transform:translateX(4px)}
.redes .btn:hover{transform:translateY(-3px)}

/* --- Interacciones del pie ------------------------------------------------
   Sin regla propia de transición: heredan la base de a,button (color,
   fondo, borde, movimiento). Cada tipo de enlace responde a su manera. */
.pie__ls a:hover{color:var(--c-lima);transform:translateX(6px)}
.pie__nap a{border-bottom:1px solid transparent}
.pie__nap a:hover{color:var(--c-lima);border-bottom-color:var(--c-lima)}
/* Solo color: la raya que aparecía al pasar era el mismo tic que en el resto
   de la web, y aquí abajo además daba saltitos de línea. */
.pie__abajo a:hover{color:var(--c-lima)}
.pie .btn--vivo:hover{transform:translate(4px,-4px)}

/* --- Hero en móvil: todo el primer bloque en la primera pantalla ---------- */
@media (max-width:560px){
  .hero{padding-block:24px 40px}
  .hero h1{margin-top:12px;max-width:none}
  .hero__sub{margin-top:14px;font-size:16px}
  .hero .datos{margin-top:18px;gap:8px 18px}
  .hero__ctas{margin-top:20px}
  .hero__ctas>.btn{flex:1 0 auto}
  .hero__banda{margin-top:28px}
}

/* --- Menú móvil off-canvas ------------------------------------------------
   El panel se superpone a la página desde la derecha; el telón oscurece el
   resto y cierra al tocarlo. La hamburguesa se convierte en una X. */
.telon{
  position:fixed;inset:0;z-index:calc(var(--z-cabecera) - 1);
  background:var(--c-oscuro-55);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;
  transition:opacity var(--t-normal) var(--curva),visibility 0s linear var(--t-normal);
}
.telon.abierto{opacity:1;visibility:visible;transition-delay:0s}
.panel{
  position:fixed;top:0;right:0;bottom:0;z-index:var(--z-cabecera);
  width:min(84vw,360px);background:var(--c-fondo);
  border-left:var(--borde);box-shadow:-12px 0 0 var(--c-tinta-08);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:calc(var(--alto-cab,70px) + 18px) var(--padding-lat) 28px;
  translate:100% 0;visibility:hidden;
  transition:translate var(--t-normal) var(--curva),visibility 0s linear var(--t-normal);
}
.panel.abierto{translate:0 0;visibility:visible;transition-delay:0s}
.panel__ls{display:grid}
.panel__ls a{
  display:block;font-family:var(--f-titular);font-weight:var(--peso-titular);font-size:17px;
  text-transform:uppercase;letter-spacing:.04em;
  padding:15px 2px;border-bottom:1px solid var(--c-tinta-14);
  opacity:0;translate:24px 0;
  transition:opacity .45s var(--curva),translate .45s var(--curva),color var(--t-rapida),padding-left var(--t-rapida) var(--curva);
}
.panel__ls a:hover,.panel__ls a:focus-visible{color:var(--c-enlace);padding-left:10px}
/* Entrada escalonada de los enlaces */
.panel.abierto .panel__ls a{opacity:1;translate:0 0}
.panel.abierto .panel__ls a:nth-child(1){transition-delay:.08s}
.panel.abierto .panel__ls a:nth-child(2){transition-delay:.13s}
.panel.abierto .panel__ls a:nth-child(3){transition-delay:.18s}
.panel.abierto .panel__ls a:nth-child(4){transition-delay:.23s}
.panel.abierto .panel__ls a:nth-child(5){transition-delay:.28s}
.panel.abierto .panel__ls a:nth-child(6){transition-delay:.33s}
.panel__pie{display:grid;gap:14px}
.panel__pie .btn{width:100%}
.panel__nap{font-size:var(--fs-mini);color:var(--c-tinta-70);text-align:center}
/* Con el menú abierto la página no se desplaza detrás */
.menu-abierto{overflow:hidden}
/* La cabecera queda por encima del panel para que la X siga a mano */
.cab{z-index:calc(var(--z-cabecera) + 1)}
.menu-abierto .cab{background:var(--c-fondo)}

/* Hamburguesa → X */
.hamb{transition:background var(--t-rapida),transform var(--t-rapida) var(--curva)}
.hamb:hover{transform:translate(2px,-2px)}
.hamb path{transform-origin:12px 12px;transition:transform var(--t-normal) var(--curva),opacity var(--t-rapida)}
.hamb[aria-expanded="true"] .hamb__l1{transform:translateY(5px) rotate(45deg)}
.hamb[aria-expanded="true"] .hamb__l2{opacity:0;transform:scaleX(0)}
.hamb[aria-expanded="true"] .hamb__l3{transform:translateY(-5px) rotate(-45deg)}

@media (min-width:761px){ .panel,.telon{display:none} }

/* Título y descripción pegados también donde la descripción tiene clase propia */
.hero__sub{margin-top:10px}
.ubi__panel{gap:16px}
.ubi__panel h2+.ubi__dir{margin-top:0}

/* --- Ubicación en móvil: textos más chicos y los dos botones en fila ------ */
@media (max-width:560px){
  .ubi__panel{padding:24px 18px;gap:12px}
  .ubi__dir{font-size:14px}
  .ubi__dir b{font-size:16px;line-height:1.6;margin-bottom:4px}
  .ubi__lista{gap:8px}
  .ubi__lista li{font-size:14px;gap:10px}
  .ubi__lista .ico{width:18px;height:18px}
  .ubi__panel .acciones{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
  .ubi__panel .btn{font-size:12px;padding:15px 10px}
}

/* --- Pie en móvil: logo más chico, centrado y con aire ------------------- */
@media (max-width:560px){
  .pie__top{padding-block:36px 28px;gap:28px}
  .pie__top>div:first-child{width:100%;text-align:center}
  .pie__logo{display:flex;justify-content:center;margin:0 auto 22px}
  .pie__logo img{height:38px}
  .pie__nap{margin:0 auto;max-width:30ch}
  .redes{justify-content:center}
}
/* Botones de Ubicación en móvil: al ser anchos, con 10px se leen bien */
@media (max-width:560px){ .ubi__panel .btn{font-size:10px;padding:14px 8px} }