/* ============================================================================
   APP.CSS — Piezas conectadas a datos reales
   ============================================================================
   Las otras cinco hojas son el sistema de diseño (tokens, base, componentes,
   secciones, animaciones). Esta viste lo que llega del servidor y lo que pinta
   el JavaScript, usando esos mismos tokens — aquí no hay ningún color suelto.

   Índice:
     1.  Hero (rotación por JS)
     2.  Tarjetas-cartel de evento
     3.  Estado vacío de eventos
     4.  Último mensaje
     5.  Formularios (campos y avisos)
     6.  Petición de oración
     7.  Modales — armazón común
     8.  Detalle de evento
     9.  Registro
     10. Calendario público (marcado de v2_calendar.js)
     11. Utilidades
   ========================================================================== */


/* ============================================================================
   1. HERO
   ----------------------------------------------------------------------------
   Las fotos vienen de la base de datos, así que pueden ser una o nueve. La
   versión del maquetado cruzaba exactamente cuatro con @keyframes y retrasos
   fijos; eso no escala. Aquí la rotación la lleva app.js y el CSS solo hace
   el fundido.
   ========================================================================== */

.hero__slides { position: absolute; inset: 0; }

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: none;                       /* anula el cruce fijo de 4 fotos */
  transition: opacity 1.6s var(--ease-in-out);
}
.hero__slide:first-child { opacity: 0; } /* la visibilidad la decide .is-visible */
.hero__slide.is-visible  { opacity: 1; }

.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
  animation: none;
  transform: scale(1.04);
  transition: transform 8s linear;
}
.hero__slide.is-visible img { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: none; }
  .hero__slide img { transform: none; transition: none; }
}


/* ============================================================================
   2. TARJETAS-CARTEL DE EVENTO
   ----------------------------------------------------------------------------
   El componente .poster-card vive en components.css. Aquí van solo los
   añadidos que necesita la versión con datos reales: el cartel es un <button>
   (abre el detalle), puede no haber imagen, y hay un esqueleto de carga.
   ========================================================================== */

/* Con uno o dos eventos, la parrilla de 3 columnas deja la tarjeta arrinconada
   a la izquierda y media sección vacía. Se centran y se les pone un ancho
   propio para que la fila se lea como una decisión, no como un hueco. */
.poster-grid--few {
  grid-template-columns: repeat(auto-fit, minmax(0, 22rem));
  justify-content: center;
}

/* El cartel y el título son botones: hay que quitarles la piel de botón. */
.poster-card__media,
.poster-card__title button {
  appearance: none;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  padding: 0;
  text-align: left;
  cursor: pointer;
  width: 100%;
}
.poster-card__title button { display: block; }
.poster-card__media { display: block; }

.poster-card__media:focus-visible,
.poster-card__title button:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-md);
}

/* --- Sin cartel ----------------------------------------------------------
   Un degradado con el color del tipo de evento y su inicial. Es mucho mejor
   que una caja gris, y evita tener que subir imágenes de relleno. */
.poster-card__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 90% at 80% 10%, rgba(255, 255, 255, 0.28), transparent 60%),
    linear-gradient(150deg, var(--event-color), color-mix(in srgb, var(--event-color) 55%, var(--oat-500)));
}
.poster-card__fallback-mark {
  width: clamp(3rem, 18%, 4.5rem);
  height: auto;
  color: #fff;
  opacity: 0.42;
}

/* --- Agotado ------------------------------------------------------------- */
.poster-card--full .poster-card__media > img { filter: grayscale(0.55); }

/* --- Esqueleto de carga --------------------------------------------------- */
.poster-card--skeleton { pointer-events: none; }
.poster-card--skeleton .poster-card__media { background: var(--color-bg-subtle); }
.poster-card--skeleton .poster-card__body { gap: 0.6rem; }

.sk {
  display: block;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--color-bg-subtle) 25%, rgba(255, 255, 255, 0.7) 50%, var(--color-bg-subtle) 75%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.4s var(--ease-in-out) infinite;
}
.sk--title { height: 1.35rem; width: 72%; }
.sk--line  { height: 0.8rem;  width: 100%; }
.sk--short { width: 55%; }

@keyframes sk-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sk { animation: none; }
}


/* ============================================================================
   3. ESTADO VACÍO DE EVENTOS
   ========================================================================== */

.events-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
  padding: var(--space-8) var(--space-4);
  border: 1px dashed var(--color-border);
  border-radius: var(--card-radius);
  background: var(--color-surface);
  color: var(--color-text-muted);
}
.events-empty svg { color: var(--color-border); }
.events-empty p { margin: 0; }
.events-empty__hint { font-size: var(--text-sm); }

.events__more { margin-top: var(--space-6); }
.events__more .link-arrow {
  appearance: none;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
  padding: 0;
}


/* ============================================================================
   4. ÚLTIMO MENSAJE
   ========================================================================== */

/* Una sola tarjeta desde que los pastores se fueron a «Quiénes somos». El
   vídeo conserva el ancho que tenía (1.35fr de la fila) y el texto pasa a su
   derecha en vez de debajo, así la sección no queda coja. */
.sermon__layout { display: grid; grid-template-columns: minmax(0, 1fr); }

.sermon-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-radius: var(--card-radius);
  border-top: 1px solid var(--card-edge-top);
  border-bottom: 1px solid var(--card-edge-bottom);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.sermon-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--oat-500);
}
.sermon-card__media iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.sermon-card__loading,
.sermon-card__empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--text-sm);
}
.sermon-card__loading p,
.sermon-card__empty p { margin: 0; }

.spinner {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 2.4s; }
}

.sermon-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--card-pad);
  flex: 1;                 /* reparte el alto sobrante al igualar con la otra */
}
.sermon-card__title {
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.sermon-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.sermon-card__meta span:empty { display: none; }
/* El enlace se ancla abajo del todo, no pegado al texto. */
.sermon-card__body .link-arrow { margin-top: auto; padding-top: var(--space-2); }

/* A partir de tableta grande, vídeo y texto uno al lado del otro. */
@media (min-width: 60.001rem) {
  .sermon-card {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    align-items: stretch;
  }
  .sermon-card__body {
    justify-content: center;
    padding: var(--space-6);
  }
  /* Centrado el bloque, el enlace ya no se empuja al fondo: colgaría solo en
     una esquina lejos del título. */
  .sermon-card__body .link-arrow { margin-top: var(--space-2); padding-top: 0; }
}


/* ============================================================================
   5. FORMULARIOS
   ========================================================================== */

.field { display: flex; flex-direction: column; gap: 0.35rem; }

.field__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
}
.field__optional {
  font-weight: var(--weight-regular);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}
.field__req { color: var(--color-accent); }
.field__hint {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.field__input {
  width: 100%;
  font: inherit;
  font-size: var(--text-md);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.65rem 0.85rem;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.field__input::placeholder { color: var(--color-text-muted); opacity: 0.75; }
.field__input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.field__check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: var(--text-sm);
  color: var(--color-text);
  cursor: pointer;
}
.field__check input {
  margin-top: 0.15rem;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--color-accent);
  flex: none;
}

/* --- Avisos de formulario ------------------------------------------------- */
.form-feedback {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.45;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
}
.form-feedback.is-error {
  color: var(--blueberry-400);
  background: var(--blueberry-100);
  border-color: var(--blueberry-200);
}
.form-feedback.is-success {
  color: var(--lime-400);
  background: var(--lime-100);
  border-color: var(--lime-200);
}


/* ============================================================================
   6. PETICIÓN DE ORACIÓN
   ----------------------------------------------------------------------------
   Los datos de contacto están ocultos hasta que se escribe algo. Pedir nombre,
   teléfono y correo de entrada convierte una caja acogedora en un trámite.
   ========================================================================== */

/* Ojo: `display: grid` en una clase gana al `[hidden] { display: none }` del
   navegador. Sin esta primera regla, los campos salen desde el principio. */
/* Campo trampa. No se usa `display:none` ni `hidden`: los robots que valen algo
   los detectan y saltan el campo. Se saca de la pantalla, que cuesta más notar. */
.prompt__trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.prompt__details[hidden] { display: none; }

.prompt__details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  padding: var(--space-4) 0 0;
  margin-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  animation: prompt-reveal var(--dur-base) var(--ease-out) both;
}
@media (max-width: 44rem) {
  .prompt__details { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
}
@keyframes prompt-reveal {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .prompt__details { animation: none; }
}

#prayerForm .form-feedback { margin-top: var(--space-4); }

/* Enviada: la caja se atenúa un punto para que el aviso sea el protagonista. */
#prayerForm.is-sent .prompt__field,
#prayerForm.is-sent .prompt__chips { opacity: 0.55; }


/* ============================================================================
   7. MODALES — armazón común
   ----------------------------------------------------------------------------
   .is-open es lo que usa app.js. .active se acepta también porque
   v2_calendar.js (compartido con el resto del sitio) abre y cierra con esa
   clase; cambiarlo allí rompería las otras pantallas que lo usan.
   ========================================================================== */

.pmodal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: var(--color-overlay);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out),
              visibility var(--dur-base) var(--ease-out);
}
.pmodal.is-open,
.pmodal.active { opacity: 1; visibility: visible; }

.pmodal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(46rem, 100%);
  /* height:auto — el panel mide lo que necesita. Un alto fijo deja un hueco
     enorme bajo el contenido cuando el evento tiene poca información. */
  max-height: min(88vh, 52rem);
  background: var(--color-surface);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  transform: translateY(14px) scale(0.985);
  transition: transform var(--dur-base) var(--ease-out);
}
.pmodal.is-open .pmodal__panel,
.pmodal.active .pmodal__panel { transform: none; }

.pmodal--tiny    .pmodal__panel { width: min(26rem, 100%); }

/* El calendario NO se ajusta al contenido: ocupa siempre el 80 % de la
   pantalla. Con un solo evento quedaba una tarjetita perdida en medio que no
   parecía un calendario, y al cambiar de mes el panel daba saltos de alto.
   Un alto fijo lo convierte en un sitio estable donde navegar los meses. */
.pmodal--calendar .pmodal__panel {
  width: min(38rem, 100%);
  height: 80vh;
  max-height: 80vh;
}
.pmodal--calendar .pmodal__body { flex: 1 1 auto; }

.pmodal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  flex: none;
}
.pmodal__title {
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.pmodal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-5);
  /* Sin barra de scroll a la vista. Sigue desplazándose igual —rueda, dedo,
     teclado y barra espaciadora—, solo deja de dibujarse: dentro de un panel
     con esquinas redondeadas la barra del sistema cae encima del contenido y
     de la propia curva, y se ve como un pegote gris.
     No reserva ni libera espacio: estas barras van superpuestas, así que el
     texto no se recoloca al ocultarlas. */
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* Edge y IE antiguos */
}
.pmodal__body::-webkit-scrollbar { width: 0; height: 0; }

/* Degradado al pie: la pista de que abajo sigue habiendo texto, ahora que no
   hay barra que lo diga. La clase .has-more la pone y la quita
   initModalFade() de ui.js; al llegar al final desaparece.

   position: sticky y no absolute: el pseudoelemento es el último hijo del
   contenedor que hace scroll, así que con absolute se iría con el contenido.
   Pegado abajo se queda donde tiene que estar sin calcular nada.

   El margin-top negativo cancela su propio alto: si sumara, el modal creería
   que hay 2.5rem más de contenido y el degradado se mantendría encendido
   para siempre. */
.pmodal__body::after {
  content: "";
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: block;
  height: 2.5rem;
  margin-top: -2.5rem;
  margin-inline: calc(var(--fade-bleed, 0px) * -1);
  background: linear-gradient(to bottom, transparent, var(--color-surface));
  pointer-events: none;   /* no se puede quedar con los clics del contenido */
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.pmodal__body.has-more::after { opacity: 1; }

/* Cuánto tiene que salirse el degradado para tocar los bordes del panel.
   Cada modal tiene su propio padding lateral, y sin esto quedan dos franjas
   sin cubrir a izquierda y derecha. El detalle vale 0: su cuerpo va sin
   padding. */
.pmodal--form .pmodal__body     { --fade-bleed: var(--space-5); }
.pmodal--calendar .pmodal__body { --fade-bleed: var(--space-4); }
.pmodal__body--center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
  padding: var(--space-7) var(--space-5);
}
.pmodal__body--center h2 { font-size: var(--text-h4); font-weight: var(--weight-semibold); }
.pmodal__body--center p  { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0; }
.pmodal__body--center .btn { margin-top: var(--space-3); }

.pmodal__foot {
  flex: none;
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}
.pmodal__foot:empty { display: none; }

/* --- Botón de cerrar ------------------------------------------------------ */
.pmodal__close {
  appearance: none;
  flex: none;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.pmodal__close:hover { background: var(--color-bg-subtle); transform: scale(1.05); }
.pmodal__close:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* Flotante: en el detalle no hay cabecera, el botón va sobre la foto. */
.pmodal__close--float {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 3;
  background: rgba(255, 255, 255, 0.92);
  border-color: transparent;
  box-shadow: var(--shadow-md);
}

/* El scroll del fondo se bloquea mientras haya cualquier modal abierto. */
body.has-modal { overflow: hidden; }

/* En móvil los modales ocupan la pantalla desde abajo: es el patrón que la
   gente espera en el teléfono, y da más sitio al contenido. */
@media (max-width: 40rem) {
  .pmodal { padding: 0; align-items: flex-end; }
  .pmodal__panel {
    width: 100%;
    max-height: 92vh;
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    transform: translateY(100%);
  }
  .pmodal__foot { padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); }
  .pmodal--tiny { align-items: center; padding: var(--space-4); }
  .pmodal--tiny .pmodal__panel { border-radius: var(--radius-2xl); transform: translateY(14px) scale(0.985); }
}


/* ============================================================================
   8. DETALLE DE UN EVENTO
   ========================================================================== */

.pmodal--detail .pmodal__body { padding: 0; }

/* --- Cabecera con el cartel ----------------------------------------------
   La imagen y el color llegan por custom properties, nunca como
   background-image en el style: así el valor puede sanearse en JS y el CSS
   decide cómo componerlos. */
.edetail__hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 12rem;
  padding: var(--space-6) var(--space-5) var(--space-5);
  background: linear-gradient(150deg, var(--evt-color, var(--blueberry-400)), color-mix(in srgb, var(--evt-color, var(--blueberry-400)) 55%, var(--oat-500)));
}
/* Con foto, la cabecera manda: es el cartel del evento y suele llevar la
   información en la propia imagen. Una franja recortada de 15rem no dejaba
   verla. Con aspect-ratio ocupa una proporción real y se lee completa. */
.edetail__hero.has-image {
  background-image: var(--evt-image);
  background-size: cover;
  background-position: center;
  aspect-ratio: 4 / 3;
  min-height: 18rem;
  max-height: 55vh;
}
.edetail__hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 12, 10, 0.86) 0%, rgba(20, 12, 10, 0.45) 45%, rgba(20, 12, 10, 0.08) 100%);
}
.edetail__hero.no-image .edetail__hero-overlay {
  background: linear-gradient(to top, rgba(20, 12, 10, 0.45), transparent 70%);
}
.edetail__hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
}

.edetail__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-pill);
  padding: 0.3rem 0.7rem;
  backdrop-filter: blur(6px);
}
.edetail__chip-dot {
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--evt-color, #fff);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
}

.edetail__title {
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  line-height: 1.05;
  letter-spacing: var(--tracking-display);
  color: #fff;
  text-wrap: balance;
}

/* --- Cuerpo --------------------------------------------------------------- */
.edetail__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-5);
}

/* align-items: stretch — el bloque de fecha debe medir lo mismo que la
   columna de la derecha, no encogerse a su contenido. */
.edetail__when {
  display: flex;
  align-items: stretch;
  gap: var(--space-5);
}

.edetail__date {
  flex: none;
  display: flex;
  flex-direction: column;
  width: 4.5rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}
.edetail__date-month {
  flex: none;
  padding: 0.3rem 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  color: #fff;
  background: var(--evt-color, var(--blueberry-400));
}
.edetail__date-day {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.04em;
  line-height: 1;
  padding: 0.5rem 0;
}

.edetail__meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.6rem;
  min-width: 0;
}
.edetail__meta-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.4;
}
.edetail__meta-item svg { flex: none; margin-top: 0.15em; opacity: 0.7; }
.edetail__meta-item > span { min-width: 0; }
.edetail__location {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- Acciones ------------------------------------------------------------- */
.edetail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.edetail__cal { position: relative; display: inline-flex; }

.edetail__cal-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  min-width: 12rem;
  padding: 0.35rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              visibility var(--dur-fast) var(--ease-out);
}
.edetail__cal-menu.is-open { opacity: 1; visibility: visible; transform: none; }
.edetail__cal-menu a {
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text);
  transition: background var(--dur-fast) var(--ease-out);
}
.edetail__cal-menu a:hover { background: var(--color-bg-subtle); }

/* --- Zoom ----------------------------------------------------------------- */
.edetail__zoom {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--card-pad);
  border-radius: var(--radius-xl);
  background: var(--slushie-100);
  border: 1px solid var(--slushie-200);
}
.edetail__zoom-head { display: flex; align-items: center; gap: var(--space-3); }
.edetail__zoom-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-md);
  background: var(--slushie-400);
  color: #fff;
}
.edetail__zoom-title { font-weight: var(--weight-medium); font-size: var(--text-md); }
.edetail__zoom-sub   { font-size: var(--text-sm); color: var(--color-text-muted); }
.edetail__zoom-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.edetail__zoom-actions .btn.is-copied { color: var(--color-success); border-color: var(--lime-200); }

/* --- Descripción ---------------------------------------------------------- */
.edetail__about { display: flex; flex-direction: column; gap: var(--space-2); }
.edetail__label {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.edetail__desc {
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--color-text);
  /* La descripción la escribe el equipo en el hub: conserva sus saltos. */
  white-space: pre-wrap;
}

/* --- Cupos ---------------------------------------------------------------- */
.edetail__spots { display: flex; flex-direction: column; gap: 0.45rem; }
.edetail__spots-text { font-size: var(--text-sm); color: var(--color-text-muted); }
.edetail__spots-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--color-bg-subtle);
  overflow: hidden;
}
.edetail__spots-fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--evt-color, var(--blueberry-400));
}
.edetail__spots.is-full .edetail__spots-fill { background: var(--color-text-muted); }

@media (max-width: 40rem) {
  .edetail__hero { min-height: 10rem; padding: var(--space-5) var(--space-4) var(--space-4); }
  .edetail__hero.has-image { min-height: 15rem; max-height: 50vh; }
  /* El panel arranca más arriba para que quepa el cartel entero. */
  .pmodal--detail .pmodal__panel { min-height: 70vh; }
  .pmodal--calendar .pmodal__panel { height: 85vh; max-height: 85vh; }
  .edetail__main { padding: var(--space-4); gap: var(--space-4); }
  .edetail__when { gap: var(--space-4); }
  .edetail__actions .btn { flex: 1 1 auto; justify-content: center; }
}


/* ============================================================================
   9. REGISTRO
   ========================================================================== */

.reg__summary {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--card-pad);
  margin-bottom: var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--color-bg-subtle);
}
.reg__summary-date {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 4rem;
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-align: center;
  line-height: 1.3;
}
.reg__summary-title { font-weight: var(--weight-medium); line-height: 1.3; }
.reg__summary-meta  { font-size: var(--text-sm); color: var(--color-text-muted); }

.reg__form { display: flex; flex-direction: column; gap: var(--space-4); }

/* Aviso para cuando el evento tiene cupo: explica por qué no se puede indicar
   acompañantes, en vez de dejar el hueco sin más. */
.reg__note {
  margin: 0;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface-muted, #f6f5f2);
  border-left: 3px solid var(--slushie-400, #6aa5d8);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}


/* ============================================================================
   10. CALENDARIO PÚBLICO
   ----------------------------------------------------------------------------
   El marcado lo genera assets/js/v2_calendar.js, que es compartido: sus clases
   (.v2-evrow, .v2-calendar-*) no se pueden renombrar sin tocar las otras
   pantallas que lo usan. Se re-viste desde aquí.
   ========================================================================== */

.pmodal--calendar .pmodal__body { padding: var(--space-3) var(--space-4) var(--space-5); }

.v2-calendar-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.v2-calendar-nav-btn {
  appearance: none;
  display: grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.v2-calendar-nav-btn:hover { background: var(--color-bg-subtle); }
.v2-calendar-nav-btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.v2-calendar-month-wrap { text-align: center; }
.v2-calendar-month-label {
  font-size: var(--text-h5);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
  text-transform: capitalize;
}
.v2-calendar-month-count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.v2-events-list-container { display: flex; flex-direction: column; gap: var(--space-2); }

/* --- Fila de evento ------------------------------------------------------- */
.v2-evrow {
  appearance: none;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  text-align: left;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.v2-evrow:hover {
  border-color: var(--evt-color, var(--color-border-strong));
  box-shadow: var(--shadow-sm);
  transform: translateX(2px);
}
.v2-evrow:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.v2-evrow-date {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  padding: 0.4rem 0;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--evt-color, var(--blueberry-400)) 12%, transparent);
  color: var(--evt-color, var(--blueberry-400));
}
.v2-evrow-date-month {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: var(--tracking-eyebrow);
}
.v2-evrow-date-day {
  font-size: 1.3rem;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.v2-evrow-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.v2-evrow-title {
  font-weight: var(--weight-medium);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v2-evrow-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.v2-evrow-meta i { opacity: 0.65; }

.v2-evrow-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.15rem; }
.v2-evrow-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-pill);
  padding: 0.15rem 0.55rem;
}
.v2-evrow-chip-dot {
  width: 0.45em;
  height: 0.45em;
  border-radius: 50%;
  background: var(--evt-color, var(--color-text-muted));
}
.v2-evrow-chip--full { color: var(--blueberry-400); background: var(--blueberry-100); }

.v2-evrow-chevron { flex: none; color: var(--color-border); }
.v2-evrow:hover .v2-evrow-chevron { color: var(--evt-color, var(--color-text-muted)); }

/* --- Vacío y error -------------------------------------------------------- */
.v2-calendar-no-events,
.v2-calendar-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--color-text-muted);
}
.v2-calendar-no-events i,
.v2-calendar-error i { font-size: 1.75rem; color: var(--color-border); }
.v2-calendar-no-events p,
.v2-calendar-error p { margin: 0; font-size: var(--text-sm); }

.v2-calendar-next-month-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  margin-top: var(--space-2);
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.v2-calendar-next-month-btn:hover { background: var(--color-bg-subtle); }

@media (max-width: 40rem) {
  .v2-calendar-nav-row { padding: var(--space-3) var(--space-4); }
  .v2-evrow { gap: var(--space-3); }
}


/* ============================================================================
   11. UTILIDADES
   ========================================================================== */

/* --- Visor del cartel a tamaño completo -----------------------------------
   El hero del detalle recorta la imagen, y los flyers suelen llevar texto
   (horarios, teléfonos) que en el recorte no se lee. */
.poster-viewer {
  position: fixed;
  inset: 0;
  z-index: 1400;                    /* por encima de los .pmodal (1200) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  background: rgba(15, 10, 9, 0.92);
  animation: poster-in var(--dur-fast) var(--ease-out);
}
.poster-viewer img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
}
.poster-viewer__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.92);
  color: var(--oat-500);
  cursor: pointer;
}
.poster-viewer__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@keyframes poster-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .poster-viewer { animation: none; } }

/* Lupa sobre el cartel del detalle: sin ella no se adivina que se puede abrir. */
.edetail__hero[data-poster] { cursor: zoom-in; }
.edetail__hero-zoom {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.9);
  color: var(--oat-500);
  cursor: zoom-in;
  opacity: 0.85;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.edetail__hero:hover .edetail__hero-zoom { opacity: 1; transform: scale(1.06); }

.success-mark {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--lime-100);
  color: var(--color-success);
  margin-bottom: var(--space-2);
}


/* ============================================================================
   12. QUIÉNES SOMOS
   ----------------------------------------------------------------------------
   Sección corta y centrada. Además de contar quiénes son, sostiene el ancla
   #sobre-nosotros que enlaza el mega-menú («Conócenos → Quiénes somos»).
   ========================================================================== */

.statement__inner {
  max-width: 52rem;
  margin-inline: auto;
  text-align: center;
}
.statement .section-head { margin-bottom: var(--space-5); }
.statement__text {
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--color-text);
}
.statement__motto {
  margin-top: var(--space-5);
  font-size: var(--text-h5);
  line-height: 1.4;
  color: var(--color-text-muted);
  font-style: italic;
  text-wrap: balance;
}

/* --- Nuestros pastores ---------------------------------------------------- */
/* Cierra la sección: primero quiénes somos, luego quién la dirige. Va en
   apaisado (foto a la izquierda, texto a la derecha) para no repetir la
   tarjeta vertical que se usa en toda la portada. */
.pastors {
  margin: var(--space-8) auto 0;
  max-width: 58rem;
  min-height: 16rem;
  display: grid;
  grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  align-items: stretch;
  text-align: left;
  overflow: hidden;
  background: var(--color-surface);
  border-radius: var(--card-radius);
  border-top: 1px solid var(--card-edge-top);
  border-bottom: 1px solid var(--card-edge-bottom);
  box-shadow: var(--shadow-sm);
}
.pastors__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Un poco por encima del centro: en el encuadre original las caras quedan
     en el tercio de arriba y al recortar se perdían. */
  object-position: center 25%;
}
.pastors__body {
  padding: var(--card-pad);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
}
/* El .eyebrow trae 1.5em de margen pensado para una cabecera de sección; aquí
   la separación la da el `gap`. */
.pastors__body .eyebrow { margin-bottom: 0; }
.pastors__names {
  font-size: var(--text-h5);
  font-weight: var(--weight-semibold);
  line-height: 1.25;
}
.pastors__desc {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* Por debajo de esto la columna de texto se queda en un canal demasiado
   estrecho y se parte en cuatro palabras por línea: mejor apilar. */
@media (max-width: 44rem) {
  .pastors { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  /* El tope evita que en una tableta estrecha la foto se coma media pantalla
     antes de que aparezca el nombre. */
  .pastors__media { aspect-ratio: 4 / 3; max-height: 20rem; }
}


/* ============================================================================
   13. RETOQUES DE ACCESIBILIDAD
   ========================================================================== */

/* La × del anuncio medía 26×16: por debajo del mínimo de 24×24 de WCAG 2.2, y
   es la única forma de quitar una barra que tapa lo alto de cada pantalla. */
.announce__close {
  min-width: 28px;
  min-height: 28px;
  display: inline-grid;
  place-items: center;
}

/* Última línea de defensa de la legibilidad del hero.
   El degradado (.hero__scrim, en sections.css) resuelve el promedio, pero una
   foto puede tener un reflejo blanco justo detrás de una letra. La sombra es
   local: cubre esos puntos sin tener que oscurecer la foto entera. */
.hero__eyebrow-link {
  text-shadow: 0 1px 3px rgba(20, 12, 10, 0.85), 0 0 14px rgba(20, 12, 10, 0.6);
}
/* Ojo con el desenfoque: en el titular, que es enorme y muy pesado, un blur
   grande solapa el halo de todas las letras y se ve un RECTÁNGULO oscuro
   detrás del texto en vez de una sombra. Sombras cortas y suaves; el trabajo
   de contraste lo hace el degradado, no esto. */
.hero__title {
  text-shadow: 0 1px 3px rgba(20, 12, 10, 0.45);
}
.hero__sub,
.hero__times {
  text-shadow: 0 1px 3px rgba(20, 12, 10, 0.55);
}

/* En móvil el botón flotante de WhatsApp se sentaba justo encima del chip de
   «Mié 7:30 PM». Se le reserva sitio al final del hero en vez de mover el
   botón: el botón tiene que quedarse donde la gente lo busca. */
/* El botón flotante de WhatsApp se sienta encima de lo último de cada pantalla
   en móvil. Se le reserva sitio al final del hero y del pie en vez de mover el
   botón: tiene que quedarse donde la gente lo busca. */
@media (max-width: 48rem) {
  .hero__intro { padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); }
  .footer      { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); }
}

/* Un panel plegado seguía en el árbol de accesibilidad: el lector de pantalla
   leía las cuatro respuestas del FAQ estuvieran abiertas o no. `visibility`
   sí lo saca, y sigue siendo animable. */
.accordion__panel {
  visibility: hidden;
  transition: grid-template-rows var(--dur-base) var(--ease-out),
              visibility var(--dur-base) var(--ease-out);
}
.accordion__item.is-open .accordion__panel,
.accordion__trigger[aria-expanded="true"] + .accordion__panel {
  visibility: visible;
}

/* Icono de la caja de petición de oración. Es un glifo de Font Awesome, no un
   SVG: hay que darle tamaño y color a mano y alinearlo con la primera línea
   del textarea. */
.prompt__icon {
  flex: none;
  font-size: 1.25rem;
  line-height: 1;
  margin-top: 0.5rem;
  color: var(--color-accent);
}


/* ============================================================================
   14. MENÚ MÓVIL ABIERTO — relleno de los laterales
   ----------------------------------------------------------------------------
   La barra de navegación flota: 95 % de ancho y esquinas inferiores
   redondeadas. Sobre la foto del hero eso es justo lo que se busca, pero al
   desplegar el menú —que ocupa todo el ancho— la página asomaba por las dos
   franjas que quedan a los lados y por el hueco de las curvas.

   Se tapan con una capa blanca DETRÁS de la barra, que se despliega desde el
   centro hacia los lados. No se toca ni el ancho del contenedor ni las
   esquinas ni el logo: la barra sigue siendo exactamente la misma, solo deja
   de tener la página detrás.
   ========================================================================== */

.nav-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;                       /* .nav__layout va en z-index 2 */
  background: var(--color-surface);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur-base) var(--ease-out);
  pointer-events: none;
}

body.nav-open .nav-wrap::before { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .nav-wrap::before { transition: none; }
}

/* El mega-menú de escritorio vive detrás de la barra; con el menú móvil
   abierto no pinta nada y podría asomar al cambiar de tamaño. */
body.nav-open .nav__dropdown { display: none; }


/* ============================================================================
   15. SEPARACIÓN DE LAS TARJETAS DEL FONDO
   ----------------------------------------------------------------------------
   El sistema pinta las tarjetas en --color-surface (#ffffff) sobre un lienzo
   --color-bg (#fefdfb). Son prácticamente el mismo color: la separación la
   daba un borde de dos tonos (luz arriba, sombra abajo) pensado para un fondo
   más marcado, y aquí el cuerpo de la tarjeta se fundía con la página — se veía
   la foto flotando y el texto suelto debajo, sin tarjeta.

   Se añade un borde completo suave y una sombra corta. Sigue siendo un diseño
   plano: lo justo para que el borde de la tarjeta se lea.
   ========================================================================== */

.poster-card,
.media-card {
  border: 1px solid color-mix(in srgb, var(--oat-300) 60%, transparent);
  box-shadow: 0 1px 2px rgba(27, 26, 24, 0.04);
}

/* Al pasar por encima, la tarjeta se despega un poco más. */
.poster-card:hover,
.media-card.card--hover:hover {
  border-color: color-mix(in srgb, var(--oat-300) 90%, transparent);
  box-shadow: var(--shadow-md);
}

/* Los esqueletos de carga no son tarjetas de verdad: sin sombra. */
.poster-card--skeleton { box-shadow: none; }

/* Glifo grande dentro de la ilustración de una tarjeta de recurso. Las otras
   tarjetas llevan un SVG dibujado; aquí importa más que el icono se reconozca
   al instante que la coherencia de estilo del dibujo.

   El selector lleva el padre a propósito: components.css tiene
   `.media-card__media > * { width:100%; height:100% }` para que las fotos
   llenen el hueco, y ese universal también estiraba el glifo hasta ocupar la
   caja entera y encajarlo en la esquina. Hay que ganarle en especificidad. */
.media-card__media > .resource-card__glyph {
  width: auto;
  height: auto;
  font-size: clamp(4rem, 12vw, 5.5rem);
  line-height: 1;
  color: var(--blueberry-300);
  object-fit: initial;
}


/* ============================================================================
   16. DESTINOS DE ANCLA BAJO LA BARRA FLOTANTE
   ----------------------------------------------------------------------------
   La barra es sticky, así que al saltar a un #ancla el navegador deja el
   elemento pegado al borde superior… y la barra se lo come. Se comprobó con
   #sobre-nosotros: su antetítulo caía a 52px con la barra ocupando hasta 64px.

   scroll-margin-top le dice al navegador dónde parar de verdad. Va en los
   destinos reales de ancla, no en todo lo que tenga id.
   ========================================================================== */

main section[id],
#pastores,
#ubicacion,
.footer[id] {
  scroll-margin-top: calc(var(--header-height) + var(--space-4));
}


/* ==========================================================================
   PÁGINAS INTERIORES (next_steps.php)
   --------------------------------------------------------------------------
   La portada tiene un hero a pantalla completa que empuja el contenido hacia
   abajo. Una página interior no lo tiene, así que su primer bloque quedaría
   pegado al navbar flotante: hay que dejarle ese hueco a mano.
   ====================================================================== */

.subpage-head { padding-top: calc(var(--header-height) + var(--space-6)); }

/* Migas de pan. Solo hay un nivel —Inicio / esta página— pero sin ellas no
   queda claro que se salió de la portada: el navbar es el mismo. */
.crumbs {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  margin-bottom: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-text-muted);
}
.crumbs a { border-bottom: 1px solid transparent; }
.crumbs a:hover { border-bottom-color: currentColor; color: var(--color-text); }
.crumbs [aria-current] { color: var(--color-text); }

.subpage-head h1 {
  font-size: var(--text-h2);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-h2);
}

/* --- Tarjetas de «Próximos pasos» ---------------------------------------
   No usan .media-card. Esa tarjeta reserva un bloque de color de 4/3 para la
   imagen y aquí no hay imagen, solo un icono: a cuatro columnas la tarjeta
   salía siendo casi toda color plano con un dibujito en medio.

   Cuatro en fila desde 64rem, dos entre 38 y 64rem y una debajo. Cuatro es
   exactamente el número de tarjetas, así que ninguna cuadrícula deja una
   suelta en su propia fila. */
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: stretch;
}
@media (max-width: 64rem) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 38rem) { .steps { grid-template-columns: minmax(0, 1fr); } }

.step-card {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-5);
}
.step-card__icon {
  width: 3rem; height: 3rem;
  display: grid; place-items: center;
  border-radius: var(--radius-lg);
  background: var(--color-accent-soft);
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}
.step-card__icon svg { width: auto; height: auto; }
.step-card__kicker {
  font-family: var(--font-mono); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
  color: var(--color-text-muted);
}
.step-card__title { font-size: var(--text-h5); font-weight: var(--weight-semibold); line-height: 1.25; }
.step-card__desc  { font-size: var(--text-sm); color: var(--color-text-muted); }
/* margin-top:auto pega el enlace al fondo: así las cuatro tarjetas lo tienen
   a la misma altura aunque los textos midan distinto. */
.step-card__foot  { margin-top: auto; padding-top: var(--space-4); font-size: var(--text-sm); }
.step-card:hover .step-card__foot svg { transform: translateX(4px); }

/* Cada tarjeta con su color, en el mismo orden que la sección de Recursos de
   la portada. */
.step-card:nth-child(2) .step-card__icon { background: var(--lime-100); color: var(--lime-400); }
.step-card:nth-child(4) .step-card__icon { background: var(--slushie-100); color: var(--slushie-400); }


/* ==========================================================================
   EVENTO COMPARTIDO (evento.php)
   --------------------------------------------------------------------------
   La pantalla a la que llega quien abre por WhatsApp un evento compartido.
   Es una tarjeta suelta, sin navbar ni pie: quien entra viene a ver un
   evento, no a navegar. Antes iba con fondo negro, tipografía Inter y un
   acento dorado que no existe en la paleta de la iglesia.
   ====================================================================== */

.evento-page {
  min-height: 100vh;
  display: grid; place-items: center;
  padding: var(--space-5);
  background: var(--color-bg-subtle);
}

.evento-card {
  width: 100%; max-width: 30rem;
  padding: 0; overflow: hidden;
}

.evento-card__media {
  aspect-ratio: 16 / 10;
  position: relative;
  background: var(--blueberry-100) center / cover no-repeat;
  display: grid; place-items: center;
  color: var(--blueberry-200);
}

/* Mismo bloque de fecha que las tarjetas-cartel de la portada, para que quien
   llegue aquí desde un enlace reconozca la pieza al volver a la web. */
.evento-card__date {
  position: absolute; top: var(--space-4); left: var(--space-4);
  background: var(--color-surface);
  /* El contenedor tiñe de rosa el icono de «sin foto»; la pastilla de la
     fecha no puede heredar ese color o el día sale casi ilegible. */
  color: var(--color-text);
  border-radius: var(--radius-lg);
  padding: 0.45rem 0.7rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.evento-card__day { display: block; font-size: 1.45rem; font-weight: var(--weight-semibold); line-height: 1; letter-spacing: -0.03em; }
.evento-card__month {
  display: block; margin-top: 0.15rem;
  font-family: var(--font-mono); font-size: 0.6rem;
  text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
  color: var(--color-text-muted);
}

.evento-card__body { padding: var(--card-pad); display: flex; flex-direction: column; gap: var(--space-4); }
.evento-card__title {
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
/* El .eyebrow trae 1.5em de margen inferior pensado para una cabecera de
   sección; aquí el hueco lo pone el gap de la columna. */
.evento-card__body .eyebrow { margin-bottom: 0; }

.evento-card__meta { display: grid; gap: var(--space-2); font-size: var(--text-sm); }
.evento-card__meta li { display: flex; align-items: flex-start; gap: 0.55rem; }
.evento-card__meta svg { flex: none; margin-top: 0.15em; color: var(--color-accent); }

.evento-card__desc {
  font-size: var(--text-sm); color: var(--color-text-muted);
  white-space: pre-line;
}

.evento-card__actions { display: grid; gap: var(--space-2); margin-top: var(--space-2); }

.evento-card__foot {
  padding: 0 var(--card-pad) var(--card-pad);
  font-size: var(--text-xs); color: var(--color-text-muted); text-align: center;
}