/* =========================================================
   Amor & Restauración Morelia — sitio nuevo
   Dirección: neutra, espaciosa, tipografía única (estilo Apple:
   SF Pro / Inter, tracking negativo en títulos grandes, mucho
   aire entre secciones) + degradados suaves como acento en vez
   de bloques de color planos. Video ligado al scroll en el hero.
   ========================================================= */

:root{
  --ink:        #0a0a0a;
  --ink-soft:   #333333;
  --cream:      #f7f7f7;
  --cream-2:    #ececec;
  --paper:      #ffffff;
  --blue: #4f46e5;
  --blue-deep:  #211d63;
  --purple:     #9333ea;
  --blue-soft:  #a5b4fc;
  --sand:       #efefef;
  --muted:      #6e6e73;
  --line:       rgba(0,0,0,0.1);
  --line-light: rgba(255,255,255,0.16);

  /* Degradados azul → morado — la textura/profundidad viene de acá,
     no de bloques de color planos. */
  --grad-accent: linear-gradient(135deg, #6366f1 0%, #7c3aed 55%, #9333ea 100%);
  --grad-accent-soft: linear-gradient(135deg, rgba(79,70,229,.16), rgba(147,51,234,.1));
  --grad-dark:
    radial-gradient(120% 140% at 12% -10%, rgba(79,70,229,.34), transparent 55%),
    radial-gradient(100% 120% at 105% 115%, rgba(147,51,234,.4), transparent 60%),
    #0a0a0a;
  --grad-light:
    radial-gradient(90% 130% at 100% 0%, rgba(124,58,237,.06), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #f2f2f2 100%);

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-huge: var(--font-sans);

  --ease: cubic-bezier(.16,.84,.44,1);
  --ease-soft: cubic-bezier(.22,.61,.36,1);

  /* Ritmo vertical. Una sección respira más de lo que ocupa: el aire es
     parte del diseño, no relleno. Un solo token para no volver a tener
     140/150/170px sueltos repartidos por el archivo. */
  --section-y:       clamp(120px, 14vw, 210px);
  --section-y-tight: clamp(88px, 9vw, 140px);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; overflow-x: hidden; }
body{
  position: relative;
  margin:0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;   /* base cómoda tipo Apple; 16px leía apretado */
  line-height: 1.62;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
}

/* Grano fino sobre todo el sitio — le quita lo plano a los degradados */
body::before{
  content:"";
  position: fixed; inset: 0; z-index: 4000; pointer-events: none;
  opacity: .035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; cursor: pointer; }
::selection{ background: var(--blue); color: var(--paper); }

.container{ max-width: 1300px; margin: 0 auto; padding: 0 clamp(24px, 4vw, 56px); }

.eyebrow{
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 24px;
}
.eyebrow-light{ color: var(--blue-soft); }

.section-title{
  font-family: var(--font-huge);
  font-weight: 700;
  font-style: normal;
  /* Títulos grandes con tracking negativo: cuanto más grande la letra,
     más hay que cerrar el espaciado o se ve suelta. */
  font-size: clamp(2.5rem, 5.6vw, 4.8rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
  margin: 0;
}
.section-title em{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  background: var(--grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.section-lede{
  font-size: 1.2rem;
  line-height: 1.58;
  color: var(--ink-soft);
  max-width: 44ch;
  margin: 26px 0 0;
}

/* =============== REVEAL (scroll) =============== */
[data-reveal]{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: calc(var(--reveal-delay, 0) * 90ms);
}
[data-reveal].is-visible{ opacity: 1; transform: translateY(0); }

.reveal-scale{
  opacity: 0;
  transform: scale(.92) rotate(var(--tilt, 0deg));
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: calc(var(--reveal-delay, 0) * 90ms);
}
.reveal-scale.is-visible{ opacity: 1; transform: scale(1) rotate(var(--tilt, 0deg)); }

/* mask-wipe title reveal */
.mask-title{ overflow: hidden; display: block; }
.mask-title .mask-inner{
  display: block;
  transform: translateY(105%);
  transition: transform 1s var(--ease);
}
.mask-title.is-visible .mask-inner{ transform: translateY(0); }

/* =============== BUTTONS =============== */
.btn{
  display: inline-flex; align-items:center; gap:10px;
  padding: 16px 30px;
  font-weight: 600; font-size: 0.95rem;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  white-space: nowrap;
  border-radius: 999px;
  transition: transform .3s var(--ease), background .25s, color .25s, border-color .25s, box-shadow .25s, opacity .25s;
  will-change: transform;
}
.btn svg{ transition: transform .35s var(--ease); }
.btn:hover svg{ transform: translate(3px,-3px); }
.btn:active{ transform: scale(.96); transition: transform .15s var(--ease); }

.btn-accent{ background: var(--grad-accent); color: var(--paper); }
.btn-accent:hover{ opacity: .88; }

.btn-light{ background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.btn-light:hover{ background: var(--cream-2); }

.btn-outline-light{ border-color: var(--line-light); color: var(--paper); }
.btn-outline-light:hover{ background: rgba(255,255,255,0.12); border-color: transparent; }

.btn-outline-dark{ border-color: var(--line); color: var(--ink); }
.btn-outline-dark:hover{ background: var(--ink); color: var(--cream); border-color: var(--ink); }

.btn-lg{ padding: 19px 36px; font-size: 1.02rem; }
/* A 375px, 36px de padding por lado dejan 230px útiles para el texto. Se
   cierra para dar aire a la etiqueta antes de tener que partirla. */
@media (max-width: 430px){
  .btn-lg{ padding: 18px 22px; }
  .btn{ padding: 15px 22px; }
}

/* Link con flecha — reemplaza el motivo de paréntesis anterior,
   más cerca de un "Más información >" a la Apple. */
.btn-bracket{
  background: none; border: none; padding: 12px 2px;
  font-family: var(--font-sans); font-weight: 600; font-size: .98rem;
  letter-spacing: -0.01em;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--blue);
}
.btn-bracket .br{ display: none; }
.btn-bracket::after{ content: "→"; transition: transform .3s var(--ease); }
.btn-bracket:hover::after{ transform: translateX(4px); }
.btn-bracket svg{ display:none; }

.hero-cta .btn-bracket,
.predicas .btn-bracket{ color: var(--paper); }

/* Badge "en vivo" — vidrio esmerilado + punto morado pulsante */
@keyframes pulse{
  0%, 100%{ opacity: 1; transform: scale(1); }
  50%{ opacity: .45; transform: scale(.78); }
}

/* =============== NAV =============== */
.nav{
  /* z-index más alto que .nav-links (1100): ahora que el menú vive fuera
     del header (ver comentario en index.html), el header tiene que
     ganarle en apilamiento para que el botón "Cerrar" siga encima del
     overlay — si no, el header entero (con todo y burger) queda debajo. */
  position: fixed; top:0; left:0; right:0; z-index: 1300;
  padding: 26px 0;
  transition: padding .45s var(--ease), background .45s var(--ease), box-shadow .45s var(--ease), backdrop-filter .45s var(--ease);
}
/* Al bajar, el vidrio NO se aplica al header completo sino a .nav-inner:
   así queda una cápsula flotante en vez de una franja pegada al borde
   —el gesto de "liquid glass" de Apple—. El header solo aporta el margen.
   Blanco puro con transparencia, no crema: con `--cream` (#f7f7f7) la barra
   leía gris sucio sobre fondos claros. */
.nav.is-scrolled{ padding: 12px 0; }
.nav.is-scrolled .nav-inner{
  background: rgba(255,255,255,0.60);
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  border-radius: 24px;
  padding: 10px 14px 10px 22px;
  /* El inset de arriba es el brillo especular del borde: es lo que hace
     que el material parezca vidrio y no un rectángulo semitransparente. */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    inset 0 0 0 1px rgba(255,255,255,0.35),
    0 10px 30px rgba(0,0,0,0.10),
    0 2px 6px rgba(0,0,0,0.04);
}
/* Con el menú abierto, el header se funde con el overlay oscuro en vez de
   quedar como una barra clara flotando encima — sin fondo, sin blur, y el
   logo/burger fuerzan blanco sin importar si .is-scrolled sigue puesto. */
.nav.menu-open,
.nav.menu-open .nav-inner{
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
/* Con el menú abierto el logo SE VA — encima del overlay tapaba los
   primeros links (pedido del cliente). Se apaga con opacity para que la
   transición de vuelta sea suave. */
.nav.menu-open .nav-logo{
  opacity: 0;
  transition: opacity .3s var(--ease);
}
/* ⚠️ Y el header ENTERO se vuelve transparente a los clics, menos el
   burger. El <header> mide ~96px de alto a lo ancho de la pantalla y está
   POR ENCIMA del overlay (z 1300 vs 1100) — es invisible con el menú
   abierto, pero seguía capturando los clics: "01 Inicio" quedaba debajo de
   esa franja y no se podía pulsar (bug reportado por el cliente; empeoró
   cuando el menú creció con los sub-enlaces y los links subieron). El
   pointer-events del hijo re-habilita al burger, que es lo que cierra. */
.nav.menu-open{ pointer-events: none; }
.nav.menu-open .nav-burger{ pointer-events: auto; }
.nav.menu-open .nav-logo-mark{ filter: none !important; }
.nav.menu-open .nav-actions .btn-accent{ display: none; }
.nav-inner{
  max-width: 1200px; margin:0 auto; padding: 0 40px;
  display:flex; align-items:center; justify-content:space-between; gap: 24px;
  transition: background .45s var(--ease), box-shadow .45s var(--ease),
              padding .45s var(--ease), border-radius .45s var(--ease),
              backdrop-filter .45s var(--ease);
}
/* `flex: none` NO es opcional: el <img> es un flex item y por defecto puede
   encogerse. Como la altura está fija, encogerlo a lo ancho le rompe la
   proporción y el logo sale deformado (se veía aplastado en pantallas
   angostas, donde el botón de Donaciones se comía el espacio). */
.nav-logo{ display:flex; align-items:center; gap: 10px; color: var(--paper); flex: none; transition: opacity .3s var(--ease); }
/* El logo estaba en 34px y quedaba chico contra el peso del botón y del
   texto "Menú". El PNG es de 500x500, así que sube sin perder nitidez. */
/* El PNG original era 500x500 con 91px de margen transparente arriba y
   abajo: el logo real ocupaba solo el 64% del alto, así que `height: 46px`
   se veía como 29px. `logo-mark-white-trim.png` es el mismo trazo recortado
   a su contenido (500x318), así que ahora la altura significa lo que dice.
   OJO: la proporción ya no es 1:1 sino 1.57:1 — si se vuelve a exportar el
   logo, hay que recortarlo igual o volverá a verse chico. */
.nav-logo-mark{ height: 42px; width:auto; flex: none; transition: height .45s var(--ease), filter .4s var(--ease); }
.nav.is-scrolled .nav-logo-mark{ height: 36px; filter: invert(1) brightness(.15); }

.nav-actions{ display:flex; align-items:center; gap: 12px; }

/* El nav en escritorio y móvil solo muestra logo + botón de menú — la
   lista de links vive en un overlay a pantalla completa (mismo patrón en
   todos los tamaños), no una barra horizontal de links. */
.nav-burger{
  display:flex; align-items:center; gap: 10px;
  background:none; border:none; padding: 13px 14px; z-index: 1200; position: relative;
  border-radius: 999px;
  font-family: var(--font-sans); font-weight: 500; font-size: .95rem;
  letter-spacing: -0.014em; color: var(--paper);
  transition: background .3s var(--ease), color .4s var(--ease);
}
.nav.is-scrolled .nav-burger:hover{ background: rgba(10,10,10,0.05); }
.nav.is-scrolled .nav-burger{ color: var(--ink); }
.nav-burger-bars{ display:flex; flex-direction:column; gap:5px; }
.nav-burger-bars span{ width:20px; height:1.5px; background: currentColor; transition: transform .35s var(--ease), opacity .3s; }
.nav-burger.is-open .nav-burger-bars span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
.nav-burger.is-open .nav-burger-bars span:nth-child(2){ opacity: 0; }
.nav-burger.is-open .nav-burger-bars span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }
.nav-burger.is-open{ color: var(--paper) !important; }

.nav-links{
  position: fixed; inset: 0; z-index: 1100;
  background: var(--grad-dark);
  display:flex; flex-direction: column; justify-content: center;
  padding: 110px 9vw 40px;
  overflow-y: auto;
  pointer-events: none;
  opacity: 0; visibility: hidden; transform: translateY(-16px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), visibility 0s linear .5s;
}
/* Si el contenido (6 links + fila de contacto) no cabe en la altura
   disponible, justify-content:center deja de centrar y el menú se
   vuelve scrolleable — nunca se recorta ni se superpone (bug corregido:
   antes .nav-links-foot estaba `position:absolute` y se montaba encima
   de "Red de Iglesias"/"Contacto" en pantallas bajas). */
.nav-links.is-open{
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.nav-link{
  color: var(--cream); font-family: var(--font-huge); font-weight: 600;
  font-size: clamp(2rem, 6vw, 3.8rem); line-height: 1.24;
  letter-spacing: -0.03em;
  opacity: .82; position: relative; padding: 5px 0; transition: opacity .3s, color .3s;
  border: none;
}
.nav-link .num{ font-family: var(--font-sans); font-weight: 500; font-size: .85rem; color: var(--purple); margin-right: 20px; vertical-align: middle; letter-spacing: 0; }
.nav-link:hover, .nav-link.is-active{ opacity: 1; color: var(--purple); }
/* Sub-enlace: "Nuestra Historia" vive DEBAJO de "Nosotros", no como entrada
   propia. Mucho más chico que los links numerados, sangrado a la altura del
   texto (el número de arriba ocupa ~44px con su margen) y con una flecha de
   descendencia. Si algún día hay más subpáginas de Nosotros, van aquí con
   la misma clase. */
.nav-sublink{
  font-size: clamp(1.05rem, 2.6vw, 1.45rem);
  font-weight: 500; letter-spacing: -0.015em;
  /* 12px de padding vertical: con la letra de ~21px da 45px de alto — el
     mínimo táctil de 44 que ya se aplicó en el footer (ver sección Móvil). */
  padding: 12px 0; margin: -6px 0 4px 0;
  padding-left: clamp(34px, 5vw, 52px);
  opacity: .6;
}
.nav-sublink::before{
  content: "↳"; margin-right: 12px; color: var(--purple); font-weight: 400;
}
.nav-sublink:hover, .nav-sublink.is-active{ opacity: 1; }
.nav-link::after{ display:none; }
/* Donaciones ya es una página propia, así que es el link 07 de la lista y
   está SIEMPRE en el menú. La clase solo le cambia el color al número para
   distinguirlo; el botón de la barra es aparte y sale por debajo de 820px. */
.nav-link-donar .num{ color: var(--blue-soft); }

.nav-links-foot{
  position: static; flex-shrink: 0;
  margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line-light);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap: 16px;
  color: var(--cream-2); font-size: .84rem;
}
.nav-links-foot .footer-social a{ color: var(--cream-2); }

/* Punto donde el botón de Donaciones deja de caber en la barra sin aplastar
   el logo. Se esconde y la acción queda sostenida por el link 07 del menú,
   que ahí ya existe siempre. El breakpoint es 820px porque el botón es ancho
   ("Donaciones" + flecha) y compite con el logo de 46px y el texto "Menú". */
@media (max-width: 820px){
  .nav-actions .btn-accent{ display: none; }
}

@media (max-width: 640px){
  .nav-links{ padding: 100px 28px 40px; }
}

/* =============== HERO (video ligado al scroll) =============== */
.hero{
  position: relative;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
  background: var(--ink);
}
.hero-video-wrap{
  position: absolute; inset: 0;
}
.hero-video-wrap video,
.hero-video-wrap img.hero-fallback{
  position: absolute; inset:0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.02);
}
.hero-scrim{
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.15) 42%, rgba(10,10,10,.78) 100%),
    radial-gradient(70% 60% at 100% 0%, rgba(124,58,237,.32), transparent 60%);
}
.hero-content{
  position: relative; z-index: 2;
  height: 100%;
  /* `flex-end` y no `space-between`: al quitarse el bloque superior del hero
     (eyebrow + badge de "En vivo") quedó un solo hijo, y space-between lo
     habría mandado arriba. El título va abajo. */
  display:flex; flex-direction: column; justify-content: flex-end;
  padding: 130px 40px 96px;
  max-width: 1440px; margin: 0 auto;
}
.hero-bottom{ display:flex; justify-content: space-between; align-items: flex-end; gap: 48px; flex-wrap: wrap; }
.hero-title{
  font-family: var(--font-huge);
  font-weight: 700;
  color: var(--paper);
  font-size: clamp(2.6rem, 7.4vw, 6.4rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  max-width: 15ch;
  margin: 0;
}
.hero-title em{
  font-family: var(--font-display);
  font-style: italic; font-weight: 600;
  background: linear-gradient(135deg, #a5b4fc 0%, #818cf8 45%, #9333ea 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- Título de bienvenida: los idiomas rotan y aterrizan en "a casa" --- */
.hero-welcome{ max-width: 18ch; }

/* Las palabras van apiladas en absoluto sobre un bloque de una línea. Es a
   propósito: si fueran inline, cada idioma tiene ancho distinto y el resto
   del título saltaría en cada cambio. Al ser un bloque alineado a la
   izquierda, el ancho deja de importar. */
.welcome-rotator{
  display: block; position: relative;
  height: 1.12em;   /* algo más que el line-height, para no cortar acentos */
  overflow: hidden; /* la máscara: el idioma que sale se va fuera de cuadro */
}
/* Deslizamiento enmascarado, NO fundido cruzado. Con un crossfade las dos
   palabras se superponen medio segundo y a este tamaño de letra se lee
   sucio; con la máscara una sale por arriba mientras la otra entra por
   abajo y nunca coinciden en pantalla. */
.welcome-word{
  position: absolute; left: 0; top: 0;
  white-space: nowrap;
  line-height: 1.04;
  opacity: 0;
  transform: translateY(110%);
  transition: opacity .42s var(--ease), transform .42s var(--ease);
}
.welcome-word.is-in{ opacity: 1; transform: translateY(0); }
.welcome-word.is-out{ opacity: 0; transform: translateY(-110%); }

.welcome-home{
  display: block;
  opacity: 0;
  transform: translateY(0.26em);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.welcome-home.is-in{ opacity: 1; transform: none; }

.hero-headline{ flex: 1 1 420px; min-width: 0; }
/* Sin animación: se muestra la frase completa de una vez. El JS también
   corta por su lado, esto es la red de seguridad por si no corre. */
@media (prefers-reduced-motion: reduce){
  .welcome-word{ transition: none; }
  .welcome-home{ opacity: 1; transform: none; transition: none; }
}

.hero-cta{ display:flex; flex-direction: column; align-items: flex-end; gap: 20px; }
.hero-cta .btn-bracket{ font-size: 1.05rem; }
.hero-scroll-hint{ display:none; }

/* =============== MARQUEE =============== */
.marquee{
  background: var(--grad-dark); color: var(--cream);
  overflow: hidden; white-space: nowrap;
  padding: 20px 0;
  border-top: 1px solid var(--line-light);
  border-bottom: 1px solid var(--line-light);
}
.marquee-track{
  display: inline-flex; align-items: center; gap: 26px;
  /* 60s, no los 32 de antes: desde el 2026-09-09 la cinta lleva anuncios y
     no horarios, y cada uno es casi el doble de largo. Con 32s el track
     —que ahora mide mucho más— pasaba demasiado rápido para leerse. */
  animation: marquee 60s linear infinite;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
/* Los anuncios son ENLACES. Heredan el color de la cinta y el subrayado solo
   aparece al pasar el mouse, que es también cuando la animación se pausa: si
   no se pausara, serían imposibles de pulsar. */
.marquee-track a{ color: inherit; text-decoration: none; }
.marquee-track a b{ font-weight: 700; }
.marquee-track a:hover{ text-decoration: underline; text-underline-offset: 4px; }
.marquee:hover .marquee-track{ animation-play-state: paused; }
@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* =============== MISIÓN / COLLAGE =============== */
/* =============== QUIÉNES SOMOS =============== */
/* Sección de texto protagónico. El peso lo lleva la tipografía grande que se
   enciende con el scroll (`data-lit`), no las fotos: estas quedaron como
   banda de apoyo abajo. */
.somos{
  position: relative;
  /* Más aire que el resto: es la sección de texto protagónico y necesita
     que nada la apriete arriba ni abajo. */
  padding: calc(var(--section-y) * 1.25) 0 var(--section-y);
  overflow: hidden;
}
.somos::before{
  content:""; position:absolute; top: -12%; left: -12%; width: 52%; aspect-ratio: 1/1;
  background: radial-gradient(circle, rgba(79,70,229,.13), transparent 70%);
  filter: blur(50px); pointer-events:none; z-index: 0;
}
.somos .container{ position: relative; z-index: 1; }

.somos-statement{
  margin: 22px 0 0;
  font-size: clamp(2.4rem, 6vw, 5.4rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
  font-weight: 700;
  max-width: 16ch;
  text-wrap: pretty;
}
.somos-statement em{
  font-style: italic;
  background: var(--grad-accent);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.somos-cierre{
  margin: clamp(64px, 8vw, 110px) 0 0;
  font-size: clamp(1.4rem, 2.9vw, 2.3rem);
  line-height: 1.36;
  letter-spacing: -0.02em;
  font-weight: 600;
  max-width: 26ch;
  color: var(--ink);
}
.somos-cierre em{
  font-style: italic;
  background: var(--grad-accent);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Palabras del texto que se enciende. Apagadas quedan muy tenues pero
   legibles — no invisibles: si el JS no corre, el texto se sigue leyendo. */
.lit-word{
  opacity: .17;
  transition: opacity .45s var(--ease);
}
.lit-word.is-lit{ opacity: 1; }
/* Énfasis reutilizable: mismo degradado que los <em> del sitio. Lo usa
   "siervo-líder", que es el concepto central de la sección. */
.accent-grad{
  font-weight: 700;
  background: var(--grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Rasgos del siervo-líder: una fila cada uno, tipografía grande. */
.somos-rasgos{
  list-style: none;
  margin: clamp(64px, 8vw, 112px) 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.somos-rasgos li{
  display: flex;
  align-items: baseline;
  gap: clamp(20px, 3.4vw, 56px);
  padding: clamp(24px, 3vw, 44px) 0;
  border-bottom: 1px solid var(--line);
  /* El desplazamiento se define acá porque `.lit-word` solo maneja opacidad.
     Entran desde la izquierda en vez del translateY genérico: acota el
     movimiento a la fila y se lee como una lista que se va escribiendo. */
  transform: translateX(-30px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.somos-rasgos li.is-lit{ transform: translateX(0); }
.rasgo-num{
  flex: none;
  font-size: .82rem; font-weight: 600; letter-spacing: .14em;
  color: var(--blue);
}
.rasgo-word{
  font-size: clamp(2rem, 5vw, 4.2rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.04em;
}

/* Tres columnas con regla superior (el motivo de .ref-pilar) y números
   en el degradado del sitio. OJO trampa #1: sobre texto con clip va
   `background-image`, NUNCA la abreviada `background`. */
.somos-stats{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 64px);
  margin-top: clamp(64px, 7vw, 100px);
}
.somos-stats > div{ border-top: 2px solid var(--line); padding-top: 22px; }
.stat-num{
  font-family: var(--font-huge); font-weight: 700;
  font-size: clamp(3rem, 6vw, 4.6rem); letter-spacing: -0.04em; line-height: 1;
  background-image: var(--grad-accent);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat-label{
  font-size: .82rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-top: 12px;
}

/* Desde el 2026-09-08 la estadística es UNA sola ("18 años viendo su
   gloria"): al no competir con otras dos, el número puede ser mucho más
   grande. Va DESPUÉS de las reglas base a propósito (trampa #6).
   `max-content` en el hijo es lo que evita que la regla superior cruce la
   pantalla entera: con `1fr` el borde mediría todo el ancho del container y
   leería como un separador de sección, no como el techo de un dato. */
.somos-stats-sola{ grid-template-columns: 1fr; margin-top: clamp(72px, 8vw, 112px); }
.somos-stats-sola > div{ max-width: max-content; padding-top: 26px; }
.somos-stats-sola .stat-num{ font-size: clamp(3.8rem, 11vw, 8.5rem); }
.somos-stats-sola .stat-label{ font-size: .95rem; letter-spacing: .12em; margin-top: 14px; }

/* ---- Tira de fotos de los servicios -------------------------------------
   Mismo mecanismo que el marquee de ciudades: `@keyframes marquee` desplaza
   -50%, así que el track del HTML va DUPLICADO. Dos diferencias que sí
   importan:
   - ALTURA FIJA + `width: auto`: ninguna foto se recorta y por eso pueden
     convivir horizontales y verticales en la misma fila. Un grid de alturas
     fijas obligaría a `cover`, que es justo lo que el cliente pidió que
     nunca pase.
   - Con `prefers-reduced-motion` no se queda quieta y cortada por la
     máscara (que es lo que hace el marquee de texto): pasa a scroll
     horizontal manual, para que las fotos se puedan ver igual. */
.somos-tira{
  margin-top: clamp(64px, 8vw, 110px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.somos-tira-track{
  display: flex; align-items: center; width: max-content;
  gap: clamp(12px, 1.6vw, 22px);
  animation: marquee 78s linear infinite;
}
/* `flex: none` por la misma razón que el logo del nav (trampa #3): un flex
   item se encoge por defecto y con la altura fija eso deforma la foto. */
.somos-tira figure{ margin: 0; flex: none; }
.somos-tira img{
  display: block;
  height: clamp(190px, 24vw, 340px); width: auto;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 18px 44px rgba(0,0,0,.12);
}
.somos-tira:hover .somos-tira-track{ animation-play-state: paused; }

/* Sin JS la tira se queda quieta y recortada por la máscara, así que ahí
   sí conviene el scroll manual. Con JS (`js-cinta`) el arrastre lo cubre. */
@media (prefers-reduced-motion: reduce){
  html:not(.js-cinta) .somos-tira{ overflow-x: auto; }
  html:not(.js-cinta) .somos-tira-track{ animation: none; }
}

/* ---- Cintas arrastrables (initCintas) -----------------------------------
   Cuando el JS corre pone `js-cinta` en <html> y toma el control del
   movimiento con `transform`: hay que apagar la animación de CSS o las dos
   se pelean por la misma propiedad. Sin JS, nada de esto aplica y la
   animación del CSS sigue siendo el comportamiento (mismo criterio que
   `js-foto`). Va DESPUÉS de las reglas base a propósito (trampa #6). */
.js-cinta .red-marquee-track,
.js-cinta .somos-tira-track{
  animation: none;
  will-change: transform;
}
.js-cinta .red-marquee,
.js-cinta .somos-tira{
  cursor: grab;
  /* Sin esto, arrastrar la cinta en un teléfono se lleva también el scroll
     vertical de la página. */
  touch-action: pan-y;
  overflow-x: hidden;
}
.js-cinta .red-marquee.is-arrastrando,
.js-cinta .somos-tira.is-arrastrando{ cursor: grabbing; }
/* Mientras se jala, el navegador intentaría SELECCIONAR el texto de las
   ciudades y el gesto se siente roto. */
.js-cinta .red-marquee.is-arrastrando,
.js-cinta .red-marquee.is-arrastrando *,
.js-cinta .somos-tira.is-arrastrando,
.js-cinta .somos-tira.is-arrastrando *{ user-select: none; -webkit-user-select: none; }
.js-cinta .somos-tira img{ -webkit-user-drag: none; user-select: none; }

@media (max-width: 760px){
  .somos{ padding: 110px 0 96px; }
  .somos-stats{ grid-template-columns: 1fr; gap: 28px; }
  .somos-rasgos{ margin-top: 44px; }
}

/* =============== SCROLL-SCRUB SEQUENCE (historia) =============== */
.scrub-section{
  position: relative;
  height: 260vh;
}
.scrub-sticky{
  position: sticky; top: 0;
  height: 100vh;
  overflow: hidden;
  display:flex; align-items:center;
}
.scrub-sticky video{
  position:absolute; inset:0; width:100%; height:100%; object-fit: cover;
}
.scrub-sticky .hero-scrim{
  background:
    linear-gradient(180deg, rgba(10,10,10,.3), rgba(10,10,10,.75)),
    radial-gradient(60% 60% at 0% 100%, rgba(147,51,234,.24), transparent 60%);
}
.scrub-copy{
  position: relative; z-index: 2; max-width: 640px; margin: 0 auto; padding: 0 40px; text-align:center;
}
/* 🐛 Estas dos reglas decían `.scrub-copy p` a secas, y el eyebrow de la
   sección TAMBIÉN es un <p>. Con (0,1,1) le ganaban a `.eyebrow` (0,1,0)
   **sin importar el orden del archivo** —especificidad pura, no la trampa
   #6— así que "Desde 2007" salía a 18.4px cuando las otras once etiquetas
   del sitio miden 12.8px, y en blanco en vez del `--blue-soft` de
   `.eyebrow-light`. Se cazó el 2026-09-09, al quitar el párrafo de esa
   sección y quedar el eyebrow solo. Arreglado acotando con `:not(.eyebrow)`.
   ⚠️ **El blanco del eyebrow se CONSERVA, pero ahora es deliberado**: sobre
   el metraje de dron —muy movido— el azul suave se pierde. Antes dependía de
   un accidente de especificidad; ahora está declarado.
   La regla de tamaño se queda aunque hoy no haya párrafo: si se repone un
   lede, entra con el cuerpo correcto. */
.scrub-copy .section-title,
.scrub-copy .eyebrow,
.scrub-copy > p:not(.eyebrow){ color: var(--paper); }
.scrub-copy > p:not(.eyebrow){ font-size: 1.15rem; line-height: 1.6; margin-top: 20px; }
/* "Conoce nuestra historia" va PROTAGÓNICO (Eric, 2026-09-09): encima de un
   video a pantalla completa, un título del tamaño estándar se perdía contra
   la imagen. Sube a la escala del hero.
   - La caja pasa de 640 a 980px porque a este cuerpo el título se partía en
     tres renglones dentro de los 640.
   - El tracking se cierra a -0.045em: es la regla del sistema —cuanto más
     grande la letra, más cerrado el tracking—, si no el título se ve suelto.
   Va DESPUÉS de la regla base de `.section-title` (trampa #6). */
.scrub-copy{ max-width: 980px; }
.scrub-copy .section-title{
  font-size: clamp(2.9rem, 8.4vw, 7rem);
  letter-spacing: -0.045em;
  line-height: 1.02;
}

/* Video de "Nuestra historia 2007 - 2024" en historia.html. `aspect-ratio`
   en vez del truco del padding-top: el contenedor no necesita hijo absoluto
   y el iframe no puede deformarse. Tono sobrio, sin animación: regla 3. */
.tribute-video{
  margin: clamp(36px, 5vw, 56px) 0;
}
.tribute-video iframe{
  width: 100%; aspect-ratio: 16 / 9; height: auto;
  display: block; border: 0; border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 24px 60px rgba(0,0,0,.14);
}
.tribute-video figcaption{
  margin-top: 14px; font-size: .92rem; color: var(--muted); text-align: center;
}

/* =============== TESTIMONIOS =============== */
/* =============== MISIÓN (sección propia) =============== */
/* Fondo oscuro y tipografía grande: está sola en su sección justamente para
   que no compita con nada. */
.mision-destacada{
  background: var(--grad-dark);
  color: var(--cream);
  padding: var(--section-y) 0;
}
.mision-statement{
  margin: 26px 0 0;
  /* Tamaño y ancho calibrados para que cada <span> entre en UNA línea en
     escritorio: si se agranda la fuente o se angosta el max-width, las
     frases se parten a la mitad y el escalonado deja de leerse como una
     idea por paso. En móvil sí envuelve, y ahí está bien. */
  font-size: clamp(1.6rem, 3.6vw, 3rem);
  line-height: 1.18;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: var(--paper);
  max-width: 900px;
  text-wrap: pretty;
}
/* Cada línea es un bloque para que el reveal escalonado se lea como una
   frase armándose de a poco. */
.mision-statement span{ display: block; }
.mision-statement em{
  font-style: italic;
  background: linear-gradient(135deg, #a5b4fc 0%, #818cf8 45%, #9333ea 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.mision-vision{
  margin: 54px 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--line-light);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: var(--cream-2);
  max-width: 40ch;
}
.mision-vision-label{
  display: block;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue-soft);
  margin-bottom: 8px;
}

/* El pie de foto sobre el fondo oscuro del llamado: color por contexto,
   igual que .ref-proceso (trampa #2). */
.mision-destacada .foto-banda figcaption{ color: var(--blue-soft); }
.mision-destacada .foto-banda{ max-width: 900px; }

.mision-cta{ margin-top: clamp(34px, 4vw, 48px); }
/* La etiqueta es larga; en móvil se parte en dos líneas en vez de salirse
   (ver la nota de `.btn` y `white-space: nowrap`). */
.mision-cta .btn{ white-space: normal; }

@media (max-width: 900px){
  .mision-destacada{ padding: 96px 0; }
  .mision-vision{ margin-top: 40px; }
}

.testimonios{ background: var(--grad-light); padding: var(--section-y) 0; }
.testimonios-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 60px;
}
/* Las tarjetas entran con más recorrido y algo más lento que el reveal
   genérico: son el remate de la sección y con los 28px por defecto el
   movimiento casi no se notaba. */
.testi-card[data-reveal]{
  transform: translateY(46px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.testi-card[data-reveal].is-visible{ transform: translateY(0); }

.testi-card{
  position: relative; overflow: hidden;
  background: var(--paper); border-radius: 18px; padding: 40px 32px 32px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 20px 40px rgba(0,0,0,.05);
}
.testi-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height: 3px;
  background: var(--grad-accent);
}
.testi-card:nth-child(2){ margin-top: 42px; }
.testi-quote{
  color: var(--purple); font-size: 3rem; font-family: var(--font-huge); font-weight: 700;
  line-height: .6; margin-bottom: 20px; display:block;
}
.testi-text{ font-size: 1.02rem; line-height: 1.6; color: var(--ink-soft); }
.testi-name{ margin-top: 24px; font-weight: 600; font-size: .82rem; letter-spacing: 0; color: var(--muted); }

@media (max-width: 900px){
  .testimonios-grid{ grid-template-columns: 1fr; }
  .testi-card:nth-child(2){ margin-top: 0; }
}

/* =============== HISTORIA (teaser en home) =============== */
.historia-teaser{ padding: var(--section-y) 0; }
.historia-grid{ display:grid; grid-template-columns: .9fr 1.1fr; gap: 80px; align-items:center; }
.historia-copy blockquote{
  font-family: var(--font-display); font-style: italic; font-weight: 500; color: var(--blue-deep);
  font-size: 1.35rem; line-height: 1.55; margin: 0 0 24px; border-left: 2px solid var(--blue);
  padding-left: 24px;
}
.historia-copy p{ color: var(--ink-soft); line-height: 1.65; }
.historia-photo{ position: relative; }
/* 🐛 `width:100%; height:auto` NO son decorativos: son lo que hace que el
   `aspect-ratio` de abajo signifique algo. El <img> lleva width="900"
   height="1125" en el HTML (los atributos que reservan la proporción), y el
   navegador los aplica como estilo. El reset global es `img{max-width:100%}`
   SIN `height:auto`, así que el ancho se recortaba a la columna pero el alto
   se quedaba en los 1125px literales del atributo: con las dos dimensiones
   ya resueltas el `aspect-ratio` se ignora, y `cover` metía una foto 4:5 en
   una caja de 0.29 → 301x1035 en un móvil de 375x812, o sea 127% del alto de
   la pantalla. Es la trampa #8 en espejo (allá el CSS fijaba UNA dimensión;
   acá no fijaba NINGUNA y las dos llegaban del HTML). Ver 2026-09-09. */
.historia-photo img{
  width: 100%; height: auto;
  border-radius: 20px; aspect-ratio: 4/5; object-fit: cover;
}

@media (max-width: 900px){
  .historia-grid{ grid-template-columns: 1fr; }
}

/* =============== PRÉDICAS =============== */
.predicas{ background: var(--grad-dark); color: var(--cream); padding: var(--section-y) 0; }
.predicas .section-title{ color: var(--paper); }
.predicas .eyebrow{ color: var(--purple); }
.predicas .section-lede{ color: var(--cream-2); }
.sermons-player{
  margin-top: 48px; border-radius: 20px; overflow: hidden; aspect-ratio: 16/9;
  box-shadow: 0 30px 70px rgba(0,0,0,.4);
}
.sermons-player iframe{ width:100%; height:100%; border:0; display:block; }

.sermons-carousel-label{
  font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--cream-2); opacity: .7; margin: 44px 0 20px;
}
.sermons-carousel{
  display:flex; gap: 18px; overflow-x: auto; scroll-snap-type: x proximity;
  margin: 0 0 8px; padding: 4px 4px 14px;
  scrollbar-width: thin; scrollbar-color: var(--blue) transparent;
}
.sermons-carousel::-webkit-scrollbar{ height: 6px; }
.sermons-carousel::-webkit-scrollbar-thumb{ background: var(--grad-accent); border-radius: 999px; }
.sermon-card{
  flex: 0 0 260px; scroll-snap-align: start; border-radius: 14px; overflow: hidden;
  background: rgba(255,255,255,.04); border: 1px solid var(--line-light);
  transition: transform .3s var(--ease), border-color .3s;
}
.sermon-card:hover{ transform: translateY(-6px); border-color: var(--blue); }
.sermon-card-media{ position: relative; aspect-ratio: 16/9; overflow: hidden; background: rgba(0,0,0,.3); }
.sermon-card-media img{ width:100%; height:100%; object-fit: cover; transition: transform .45s var(--ease); }
.sermon-card:hover .sermon-card-media img{ transform: scale(1.08); }
.sermon-play{
  position: absolute; inset: 0; margin: auto; width: 42px; height: 42px; border-radius: 50%;
  background: rgba(0,0,0,.55); backdrop-filter: blur(4px); color: var(--paper);
  display:flex; align-items:center; justify-content:center;
}
.sermon-card-title{
  margin: 0; padding: 14px 16px; font-size: .86rem; line-height: 1.4; color: var(--cream);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

@media (max-width: 780px){
  .sermon-card{ flex-basis: 220px; }
}

.predicas-links{ display:flex; gap: 28px; margin-top: 30px; flex-wrap: wrap; }

/* =============== RED DE IGLESIAS (teaser) =============== */
.red-teaser{ padding: var(--section-y) 0 0; overflow: hidden; }

.red-teaser-nums{
  display: flex; flex-wrap: wrap; gap: clamp(40px, 7vw, 96px);
  margin-top: clamp(48px, 6vw, 72px);
}
/* Marquee con las 29 ciudades reales. Reemplazó a un grid de 4 tarjetas de
   muestra: cuatro ejemplos no comunican una red de 29. */
.red-marquee{
  margin-top: clamp(56px, 7vw, 90px);
  overflow: hidden; white-space: nowrap;
  padding: clamp(26px, 3vw, 40px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  /* Difumina los extremos para que las ciudades entren y salgan en vez de
     cortarse de golpe contra el borde. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.red-marquee-track{
  display: inline-flex; align-items: center; gap: 22px;
  animation: marquee 58s linear infinite;
  font-weight: 650;
  font-size: clamp(1.4rem, 2.6vw, 2.4rem);
  letter-spacing: -0.03em;
  color: var(--ink);
}
.red-marquee-track .sep{
  color: var(--blue); font-weight: 400;
  transform: translateY(-.05em);
}
.red-marquee:hover .red-marquee-track{ animation-play-state: paused; }

@media (prefers-reduced-motion: reduce){
  .red-marquee-track{ animation: none; }
  /* Sin animación el track duplicado no aporta; se deja que desborde y se
     recorte con la máscara en vez de moverse. */
}


/* =============== RED DE IGLESIAS (página completa) =============== */
.red-page-hero{ padding: calc(var(--section-y) * 1.1) 0 var(--section-y-tight); background: var(--grad-dark); color: var(--paper); }
.red-page-hero .section-title{ color: var(--paper); }
.red-page-lede{ color: var(--cream-2); }
.red-page-lede strong{ color: var(--paper); font-weight: 650; }

/* Números grandes: la red se entiende antes por su escala que por la lista. */
.red-bignums{
  display: flex; flex-wrap: wrap; gap: clamp(40px, 7vw, 96px);
  margin-top: clamp(48px, 6vw, 76px);
}
.red-bignum{
  display: block;
  font-weight: 700;
  font-size: clamp(3rem, 6vw, 5rem);
  line-height: 1;
  letter-spacing: -0.04em;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.red-bignum-label{
  display: block; margin-top: 10px;
  font-size: .82rem; letter-spacing: .14em; text-transform: uppercase;
}

/* IMPORTANTE: el color de estos números y etiquetas NO se define en la clase
   base, se define por contexto. Los mismos elementos viven en dos fondos
   opuestos — el hero oscuro de la página de la red y el teaser claro del
   home — y una variante suelta tipo `.red-bignum-dark` dependía del orden
   del archivo: al estar definida antes que la base, la base la pisaba y los
   números quedaban casi invisibles sobre el fondo claro. */
/* OJO: acá va `background-image` y NO la abreviada `background`. La
   abreviada resetea `background-clip` a su valor inicial (`border-box`),
   así que pisaba el `background-clip: text` de la clase base y el degradado
   pintaba la caja entera: los números salían como rectángulos morados en
   vez de texto. Mismo cuidado si se agrega otro contexto. */
.red-page-hero .red-bignum{
  background-image: linear-gradient(135deg, #a5b4fc 0%, #818cf8 45%, #9333ea 100%);
}
.red-page-hero .red-bignum-label{ color: var(--cream-2); }

.red-teaser .red-bignum{ background-image: var(--grad-accent); }
.red-teaser .red-bignum-label{ color: var(--muted); }

.red-grid-section{ padding: var(--section-y-tight) 0 var(--section-y); }

/* Buscar la más cercana: geolocalización o código postal. */
.red-nearby{
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin-bottom: 16px;
}
.red-nearby-btn{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px; border: none; border-radius: 999px;
  background: var(--grad-accent); color: var(--paper);
  font-family: var(--font-sans); font-size: .97rem; font-weight: 600;
  letter-spacing: -0.012em;
  box-shadow: 0 8px 22px rgba(79,70,229,.22);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), opacity .25s var(--ease);
}
.red-nearby-btn:hover{ transform: translateY(-2px); box-shadow: 0 12px 30px rgba(79,70,229,.3); }
.red-nearby-btn:disabled{ opacity: .55; transform: none; cursor: progress; }
.red-nearby-or{ color: var(--muted); font-size: .92rem; }
.red-cp input{
  width: 190px; padding: 13px 20px;
  border-radius: 999px; border: 1px solid var(--line);
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  color: var(--ink); font-size: .97rem; font-family: var(--font-sans);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.red-cp input::placeholder{ color: var(--muted); }
.red-cp input:focus{
  outline: none; border-color: transparent;
  box-shadow: 0 0 0 2px var(--blue), 0 8px 24px rgba(79,70,229,.16);
}
.red-nearby-msg{
  margin: 0 0 26px; min-height: 1.4em;
  font-size: .95rem; color: var(--muted);
}
.red-nearby-msg.is-ok{ color: var(--blue); font-weight: 550; }
.red-nearby-msg.is-error{ color: #b4232a; }
.red-nearby-msg.is-info{ color: var(--ink-soft); }

/* Distancia calculada, se inyecta por JS solo cuando hay ubicación. */
.red-row-dist{
  grid-column: 4; justify-self: end;
  font-size: .84rem; font-weight: 600; color: var(--blue);
  font-variant-numeric: tabular-nums;
}
.red-row.is-nearest{ background: var(--grad-accent-soft); padding-left: 18px; }
.red-row.is-nearest::before{ opacity: 1; }
.red-row.is-nearest .red-row-city::after{
  content: "La más cercana a ti";
  display: block;
  margin-top: 6px;
  font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--blue);
}

@media (max-width: 780px){
  .red-row-dist{ grid-column: 2; justify-self: start; }
  .red-cp input{ width: 100%; }
  .red-cp{ flex: 1 1 200px; }
  .red-controls{ gap: 14px; }
}

.red-controls{
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 18px 24px; margin-bottom: 36px;
}
.red-search{ position: relative; flex: 1 1 320px; max-width: 420px; }
/* `z-index: 1` NO es decorativo: el `<input>` de abajo lleva
   `backdrop-filter`, y eso le crea un contexto de apilamiento propio que lo
   pinta ENCIMA de este hermano absoluto aunque venga antes en el DOM. Sin el
   z-index la lupa existe, mide 18x18 y tiene color — simplemente queda
   tapada por el fondo del input y no se ve. Estuvo así en red-iglesias.html
   hasta que se detectó al portar el mismo buscador a beteles.html. */
.red-search-icon{
  position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
  z-index: 1;
  color: var(--muted); pointer-events: none;
}
.red-search input{
  width: 100%; padding: 16px 22px 16px 52px;
  border-radius: 999px; border: 1px solid var(--line);
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  color: var(--ink); font-size: 1rem; font-family: var(--font-sans);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.red-search input::placeholder{ color: var(--muted); }
.red-search input:focus{
  outline: none;
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--blue), 0 8px 24px rgba(79,70,229,.16);
}

/* Chips de estado. Se combinan con el buscador, no lo reemplazan. */
.red-chips{ display: flex; flex-wrap: wrap; gap: 8px; }
.red-chip{
  border: 1px solid var(--line);
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 12px 16px;
  font-family: var(--font-sans); font-size: .9rem; font-weight: 500;
  letter-spacing: -0.01em;
  display: inline-flex; align-items: center; gap: 7px;
  transition: background .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease);
}
.red-chip span{
  font-size: .78rem; font-weight: 600;
  color: var(--muted);
  transition: color .25s var(--ease);
}
.red-chip:hover{ transform: translateY(-1px); border-color: var(--blue-soft); }
.red-chip.is-active{
  background: var(--grad-accent);
  border-color: transparent;
  color: var(--paper);
}
.red-chip.is-active span{ color: rgba(255,255,255,.75); }

/* OJO CON EL ORDEN: este media query tiene que ir DESPUÉS de `.red-chips` y
   `.red-chip`. Los media queries no suman especificidad, así que si va antes,
   la regla base (`flex-wrap: wrap`) lo pisa — pasó exactamente eso: se
   aplicaba el `overflow-x` pero los chips seguían envolviéndose. */
@media (max-width: 780px){
  /* Los 9 chips envueltos ocupaban ~300px de alto: una pared que había que
     scrollear entera antes de llegar a la lista. En móvil pasan a UNA fila
     que se desliza en horizontal. */
  .red-chips{
    flex: 1 1 100%;
    min-width: 0;          /* sin esto un flex item no baja del ancho de su contenido y nunca hay scroll */
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Sangrado a los bordes del contenedor: el primer y último chip no
       quedan pegados y se nota que la fila sigue. */
    margin: 0 calc(-1 * clamp(24px, 4vw, 56px));
    padding: 4px clamp(24px, 4vw, 56px);
  }
  .red-chips::-webkit-scrollbar{ display: none; }
  .red-chip{ flex: none; scroll-snap-align: start; }
}

.red-count{ color: var(--muted); font-size: .92rem; margin: 0 0 20px; }

/* Lista grande numerada en vez de tarjetitas: acompaña la tipografía
   protagónica del resto del sitio y deja leer las 29 de un vistazo. */
.red-list{
  list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--line);
}
.red-row{
  display: grid;
  grid-template-columns: 3rem minmax(0,1fr) minmax(0,1fr) auto;
  align-items: baseline;
  gap: clamp(12px, 2.4vw, 32px);
  padding: clamp(18px, 2.2vw, 28px) 0;
  border-bottom: 1px solid var(--line);
  position: relative;
  transition: background .3s var(--ease), padding-left .3s var(--ease);
}
.red-row[hidden]{ display: none; }
.red-row::before{
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--grad-accent);
  opacity: 0; transition: opacity .3s var(--ease);
}
.red-row:hover{ background: rgba(79,70,229,.04); padding-left: 18px; }
.red-row:hover::before{ opacity: 1; }
.red-row-num{
  font-size: .82rem; font-weight: 600; letter-spacing: .1em;
  color: var(--blue); font-variant-numeric: tabular-nums;
}
.red-row-city{
  font-weight: 700;
  font-size: clamp(1.15rem, 2.2vw, 1.8rem);
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.red-row-name{ color: var(--muted); font-size: .95rem; }
/* Dirección real del templo, cuando la hay. Va como segunda línea dentro de
   la celda del nombre para no agregar una columna al grid. */
.red-row-address{
  display: block; margin-top: 5px;
  font-size: .86rem; line-height: 1.4;
  color: var(--ink-soft);
}
.red-row-state{
  justify-self: end;
  font-size: .78rem; font-weight: 600; letter-spacing: .06em;
  color: var(--ink-soft);
  background: var(--grad-accent-soft);
  border-radius: 999px; padding: 6px 14px;
  white-space: nowrap;
}

@media (max-width: 780px){
  .red-row{
    grid-template-columns: 2.4rem minmax(0,1fr);
    row-gap: 6px;
  }
  .red-row-name{ grid-column: 2; }
  .red-row-state{ grid-column: 2; justify-self: start; }
}

.red-empty{ display:none; text-align:center; padding: 80px 0; color: var(--muted); font-size: 1.05rem; }
.red-empty.is-visible{ display: block; }
.red-empty.is-visible{ display:block; }

@media (max-width: 900px){ .red-full-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .red-full-grid{ grid-template-columns: 1fr; } }

/* =============== HISTORIA (página completa) =============== */
.tribute-hero{
  position: relative; height: 70vh; min-height: 480px; display:flex; align-items:flex-end;
  background: var(--ink);
}
.tribute-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.6; }
.tribute-hero-content{ position:relative; z-index:2; padding: 0 40px 64px; max-width: 900px; margin:0 auto; width:100%; }
.tribute-hero .eyebrow{ color: var(--purple); }
.tribute-h1{ font-family: var(--font-huge); font-weight: 700; color: var(--paper); font-size: clamp(2.4rem,6vw,4.6rem); letter-spacing: -0.03em; line-height: 1.06; margin:0; }

.tribute-body{ max-width: 720px; margin: 0 auto; padding: 100px 40px 140px; }
.tribute-verse{
  font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 1.35rem; line-height: 1.6;
  color: var(--blue-deep); border-left: 2px solid var(--blue); padding-left: 26px; margin: 0 0 54px;
}
.tribute-body p{ font-size: 1.1rem; line-height: 1.7; color: var(--ink-soft); margin: 0 0 26px; }
.tribute-signoff{ font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 1.22rem; margin-top: 44px; }

/* =============== HISTORIA — fotos del tributo =============== */
/* Sobrias, sin desnivel ni juego: regla 3. Solo el data-foto suave. */
.tribute-body .foto{ margin: clamp(40px, 5vw, 60px) 0; }
.tribute-body .foto img{ width: 100%; height: auto; display: block; border-radius: 14px; }
.tribute-body .foto figcaption{
  margin-top: 12px; color: var(--muted); font-size: .88rem; line-height: 1.5;
}
/* El retrato vertical no ocupa las 720px del cuerpo: centrado y más angosto,
   como una lámina. */
.tribute-body .foto-retrato{ max-width: 440px; margin-left: auto; margin-right: auto; }

/* =============== CONTACTO =============== */
.contacto{ padding: var(--section-y) 0 var(--section-y-tight); }
.contacto-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: start; }
.contacto-info p{ color: var(--ink-soft); line-height: 1.6; }
.contacto-schedule{ list-style:none; padding:0; margin: 28px 0; display:flex; flex-direction:column; gap:14px; }
.contacto-schedule li{ display:flex; justify-content:space-between; border-bottom: 1px solid var(--line); padding-bottom: 12px; font-size: .96rem; }
.contacto-map{ border-radius: 20px; overflow:hidden; aspect-ratio: 4/3; }
.contacto-map iframe{ width:100%; height:100%; border:0; }

@media (max-width: 900px){ .contacto-grid{ grid-template-columns: 1fr; } }

/* =============== FOOTER =============== */
.site-footer{ background: var(--grad-dark); color: var(--cream-2); padding: 100px 0 40px; margin-top: 80px; }
.footer-cta{
  font-family: var(--font-huge); font-weight: 700; color: var(--paper);
  font-size: clamp(1.9rem, 5vw, 3.6rem); line-height: 1.08; letter-spacing: -0.03em;
  max-width: 18ch; margin: 0 0 64px;
}
.footer-cta em{
  font-family: var(--font-display); font-style: italic; font-weight: 600;
  background: linear-gradient(135deg, #a5b4fc 0%, #818cf8 45%, #9333ea 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 44px; }
/* ⚠️ `width: auto` NO es decorativo (bug real, cazado el 2026-09-08).
   El <img> lleva `width="260" height="165"` en el HTML —los que se agregaron
   para reservar la proporción y evitar el salto de maquetación— y esta regla
   solo fijaba `height`. Resultado: el ancho lo ponía el atributo (260px) y el
   alto el CSS (34px), o sea el logo se servía APLASTADO a 260x34 en vez de
   54x34: 385% de deformación, en el footer de las 8 páginas.
   `.nav-logo-mark` ya traía `width:auto` por esto mismo; acá faltaba. */
.footer-logo{ height: 34px; width: auto; margin-bottom: 18px; }
.footer-col h4{ font-size: .8rem; font-weight: 600; letter-spacing: 0; color: var(--purple); margin: 0 0 18px; }
/* El padding vertical es lo que le da altura táctil al link: sin él medían
   24px y son casi imposibles de atinar con el pulgar. El margen negativo
   compensa para que el bloque no se vea más suelto de lo que se veía. */
.footer-col a{ display:block; color: var(--cream-2); opacity: .78; font-size: .94rem; padding: 11px 0; margin: -3px 0; transition: opacity .25s; }
.footer-col a:hover{ opacity: 1; }
.footer-social{ display:flex; gap:12px; margin-top: 6px; }
/* 44px es el mínimo táctil recomendado (Apple HIG y Material). Estaban en
   38px y en un teléfono se fallan seguido. */
.footer-social a{ width: 44px; height:44px; border-radius:50%; border:1px solid var(--line-light); display:flex; align-items:center; justify-content:center; font-size:.78rem; }
.footer-bottom{ margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--line-light); font-size: .82rem; opacity: .55; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

@media (max-width: 860px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}

/* =============== WHATSAPP FAB =============== */
.wa-fab{
  position: fixed; right: 28px; bottom: 28px; z-index: 900;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 14px 30px rgba(37,211,102,.4);
  transition: transform .3s var(--ease);
}
.wa-fab:hover{ transform: scale(1.08); }

/* =============== PLACEHOLDER DE FOTO/VIDEO PENDIENTE =============== */
/* Bloque honesto para huecos de contenido real — nunca usamos fotos de
   otra congregación como relleno. Se reemplaza por <img>/<video> reales
   cuando el cliente los envíe (ver checklist en README/CLAUDE.md). */
.ph-photo{
  display:flex; align-items:center; justify-content:center; text-align:center;
  background: repeating-linear-gradient(135deg, var(--sand), var(--sand) 10px, var(--cream-2) 10px, var(--cream-2) 20px);
  border: 1px dashed var(--line);
  color: var(--muted);
  font-size: .78rem; line-height: 1.4;
  padding: 20px;
}
.ph-photo span{ max-width: 22ch; }

/* =============== UTILS =============== */
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap: 40px; flex-wrap: wrap; }
@media (max-width: 700px){
  .mission, .testimonios, .historia-teaser, .predicas, .red-teaser, .contacto{ padding-top: 96px; padding-bottom: 96px; }
  .testimonios-grid, .red-teaser-grid{ grid-template-columns: 1fr; }
}

/* =============== CENTROS DE RESTAURACIÓN (refugios.html) =============== */
/* Tono sobrio, mismo criterio que "Nuestra Historia" (regla 3): el tema
   tiene peso humano y no admite animaciones juguetonas. Se usa el reveal
   estándar y nada más. */
.ref-hero{
  background: var(--grad-dark); color: var(--cream);
  padding: calc(var(--section-y) * 1.15) 0 var(--section-y);
}
.ref-hero-title{
  font-weight: 700; color: var(--paper);
  font-size: clamp(2.3rem, 5.6vw, 4.6rem);
  line-height: 1.06; letter-spacing: -0.038em;
  margin: 0; max-width: 18ch;
}
.ref-hero-title em{
  font-style: italic;
  background-image: linear-gradient(135deg, #a5b4fc 0%, #818cf8 45%, #9333ea 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ref-hero-lede{
  margin: 32px 0 0; max-width: 52ch;
  font-size: clamp(1.05rem, 1.7vw, 1.28rem); line-height: 1.6;
  color: var(--cream-2);
}
.ref-hero-cta{ display:flex; flex-wrap: wrap; align-items:center; gap: 20px 28px; margin-top: 44px; }
.btn-bracket-light{ color: var(--paper); }

.ref-modelo{ padding: var(--section-y) 0; }
.ref-pilares{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 44px); margin-top: clamp(48px, 6vw, 72px);
}
.ref-pilar{ border-top: 2px solid var(--line); padding-top: 24px; }
.ref-pilar-num{
  font-size: .8rem; font-weight: 600; letter-spacing: .14em; color: var(--blue);
}
.ref-pilar h3{
  font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 700;
  letter-spacing: -0.03em; margin: 14px 0 10px;
}
.ref-pilar p{ color: var(--ink-soft); margin: 0; }

/* Los tres pasos de ingreso. Reusa .ref-pilares/.ref-pilar; lo único propio
   es el fondo, que sirve para separarla de .ref-modelo (que va justo arriba
   y tiene el mismo componente de tres columnas). Sin ese cambio de fondo se
   leen como una sola sección larga. Ritmo resultante:
   crema (modelo) → claro (pasos) → oscuro (proceso). */
.ref-pasos{ background: var(--grad-light); padding: var(--section-y) 0; }

.ref-proceso{ background: var(--grad-dark); color: var(--cream); padding: var(--section-y) 0; }
.ref-proceso .section-title{ color: var(--paper); }
.ref-proceso-lede{ color: var(--cream-2); }
.ref-fases{ list-style:none; margin: clamp(56px, 7vw, 88px) 0 0; padding:0; display:grid; gap: clamp(28px, 3vw, 44px); }
.ref-fases > li{
  border: 1px solid var(--line-light); border-radius: 20px;
  padding: clamp(28px, 3.4vw, 44px);
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.ref-fase-rango{
  display:inline-block; font-size: .78rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--blue-soft);
  border: 1px solid var(--line-light); border-radius: 999px; padding: 7px 15px;
}
.ref-fases h3{
  font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 700;
  letter-spacing: -0.03em; color: var(--paper); margin: 20px 0 6px;
}
.ref-fase-sub{ color: var(--blue-soft); margin: 0 0 22px; font-size: 1.02rem; }
.ref-fases ul{ list-style:none; margin:0; padding:0; display:grid; gap: 12px; }
.ref-fases ul li{ color: var(--cream-2); line-height: 1.55; padding-left: 22px; position: relative; }
.ref-fases ul li::before{
  content:""; position:absolute; left:0; top:.65em; width:10px; height:2px;
  border-radius:2px; background: var(--grad-accent);
}
.ref-fases ul strong{ color: var(--paper); font-weight: 650; }

.ref-incluye{ padding: var(--section-y) 0; }
.ref-incluye-grid{
  list-style:none; margin: clamp(40px, 5vw, 64px) 0 0; padding:0;
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 1px solid var(--line);
}
.ref-incluye-grid li{
  padding: clamp(20px, 2.4vw, 30px) 4px;
  border-bottom: 1px solid var(--line);
  font-size: clamp(1.05rem, 1.8vw, 1.35rem); font-weight: 650;
  letter-spacing: -0.02em;
}
.ref-nota{ margin-top: 28px; color: var(--muted); font-size: .95rem; max-width: 60ch; }

.ref-sedes{ background: var(--grad-light); padding: var(--section-y) 0; }
.ref-sedes-grid{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 32px); margin-top: clamp(44px, 5vw, 68px);
}
.ref-sede{
  background: var(--paper); border-radius: 18px;
  padding: clamp(26px, 3vw, 36px);
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 16px 34px rgba(0,0,0,.06);
}
.ref-sede-tipo{
  font-size: .76rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--paper); background-image: var(--grad-accent);
  border-radius: 999px; padding: 6px 14px; display:inline-block;
}
.ref-sede h3{
  font-size: clamp(1.3rem, 2.2vw, 1.85rem); font-weight: 700;
  letter-spacing: -0.03em; margin: 18px 0 0;
}

.ref-faq{ padding: var(--section-y) 0; }
.ref-faq-list{ margin-top: clamp(44px, 5vw, 68px); border-top: 1px solid var(--line); }
.ref-faq-list details{ border-bottom: 1px solid var(--line); }
.ref-faq-list summary{
  list-style: none; cursor: pointer;
  padding: clamp(22px, 2.6vw, 30px) 44px clamp(22px, 2.6vw, 30px) 0;
  font-size: clamp(1.05rem, 1.8vw, 1.32rem); font-weight: 650;
  letter-spacing: -0.02em; position: relative;
}
.ref-faq-list summary::-webkit-details-marker{ display:none; }
/* Signo + que gira a × al abrir: no depende de ninguna fuente de iconos. */
.ref-faq-list summary::after{
  content:"+"; position:absolute; right: 6px; top: 50%;
  transform: translateY(-50%); font-size: 1.6rem; font-weight: 400;
  color: var(--blue); transition: transform .3s var(--ease);
}
.ref-faq-list details[open] summary::after{ transform: translateY(-50%) rotate(45deg); }
.ref-faq-list details p{
  margin: 0 0 clamp(22px, 2.6vw, 30px); max-width: 68ch;
  color: var(--ink-soft); line-height: 1.65;
}

.ref-cierre{
  background: var(--grad-dark); color: var(--cream);
  padding: var(--section-y) 0; text-align: center;
}
.ref-cierre-title{
  font-size: clamp(1.9rem, 4.4vw, 3.4rem); font-weight: 700;
  letter-spacing: -0.035em; line-height: 1.1; color: var(--paper);
  margin: 0 auto; max-width: 20ch;
}
.ref-cierre > .container > p{ color: var(--cream-2); margin: 24px auto 0; max-width: 46ch; font-size: 1.08rem; }
.ref-cierre-cta{ display:flex; flex-wrap:wrap; gap: 16px; justify-content:center; margin-top: 44px; }
.ref-cierre-tel{ margin-top: 32px !important; font-size: .98rem !important; }
/* Es un link para LLAMAR: necesita altura táctil de verdad, no 19px. */
.ref-cierre-tel a{
  display: inline-block; padding: 12px 8px;
  color: var(--blue-soft); text-decoration: underline; text-underline-offset: 4px;
}

@media (max-width: 860px){
  .ref-pilares{ grid-template-columns: 1fr; gap: 32px; }
  .ref-incluye-grid{ grid-template-columns: 1fr 1fr; }
  .ref-sedes-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 520px){
  .ref-incluye-grid{ grid-template-columns: 1fr; }
  .ref-hero-cta{ gap: 16px; }
  .ref-cierre-cta .btn{ width: 100%; justify-content: center; }
}

/* Puente de testimonios → Refugios */
.testi-puente{
  display:flex; align-items:center; justify-content:space-between; gap: 24px;
  margin-top: clamp(40px, 5vw, 64px);
  padding: clamp(24px, 3vw, 34px) clamp(24px, 3vw, 38px);
  border-radius: 18px;
  background-image: var(--grad-accent-soft);
  border: 1px solid var(--line);
  color: var(--ink);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.testi-puente:hover{ transform: translateY(-2px); box-shadow: 0 14px 34px rgba(79,70,229,.14); }
.testi-puente-txt{ font-size: clamp(1rem, 1.7vw, 1.2rem); line-height: 1.5; color: var(--ink-soft); }
.testi-puente-txt strong{ color: var(--ink); font-weight: 700; }
.testi-puente svg{ flex: none; color: var(--blue); }
@media (max-width: 520px){
  .testi-puente{ flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* Testimonio largo: medida de lectura cómoda y tipografía tranquila. Es el
   texto más largo del sitio y tiene que sostenerse solo. */
.ref-historia{ background: var(--grad-light); padding: var(--section-y) 0; }
.ref-historia-entrada{
  margin: 26px 0 0; max-width: 40ch;
  font-size: clamp(1.2rem, 2.2vw, 1.7rem); line-height: 1.45;
  font-weight: 650; letter-spacing: -0.02em; color: var(--ink);
}
.ref-historia-cuerpo{
  margin-top: clamp(40px, 5vw, 64px);
  max-width: 64ch;            /* medida de lectura, no el ancho del contenedor */
  border-left: 2px solid var(--line);
  padding-left: clamp(20px, 3vw, 40px);
}
.ref-historia-cuerpo p{
  margin: 0 0 1.35em;
  font-size: clamp(1.02rem, 1.5vw, 1.14rem);
  line-height: 1.75;
  color: var(--ink-soft);
}
/* El primer párrafo entra con más peso, como una entrada de artículo. */
.ref-historia-cuerpo p:first-child{ color: var(--ink); font-size: clamp(1.08rem, 1.7vw, 1.24rem); }
.ref-historia-firma{
  margin-top: 2em !important;
  font-weight: 700; color: var(--ink) !important;
  font-size: 1.05rem !important;
}

/* =============== EN LÍNEA (radio · podcast · jóvenes) =============== */
.enlinea{ padding: var(--section-y) 0; background: var(--grad-light); }
.enlinea-grid{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 30px); margin-top: clamp(48px, 6vw, 72px);
  align-items: stretch;
}
.enlinea-card{
  display:flex; flex-direction: column; justify-content: space-between; gap: 26px;
  background: var(--paper); border-radius: 20px;
  padding: clamp(26px, 3vw, 36px);
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 16px 34px rgba(0,0,0,.06);
}
.enlinea-tag{
  display:inline-flex; align-items:center; gap: 8px;
  font-size: .76rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--blue);
}
/* Punto pulsante del "en vivo": el mismo keyframe que ya existe en el sitio. */
.enlinea-dot{
  width: 8px; height: 8px; border-radius: 50%;
  background-image: var(--grad-accent);
  animation: pulse 1.8s ease-in-out infinite;
}
.enlinea-card h3{
  font-size: clamp(1.25rem, 2.1vw, 1.7rem); font-weight: 700;
  letter-spacing: -0.03em; margin: 16px 0 10px;
}
.enlinea-card p{ color: var(--ink-soft); margin: 0; line-height: 1.6; }
.enlinea-card p em{ font-style: italic; color: var(--ink); }

/* El reproductor nativo: no se puede estilizar por dentro de forma
   confiable entre navegadores, así que se le da ancho completo y se deja
   que cada uno dibuje sus controles. Es más robusto que un player propio. */
.enlinea-card audio{ width: 100%; }
.enlinea-spotify{ width: 100%; border: 0; border-radius: 12px; }

/* ---- Secciones propias de A&R Radio y del podcast (2026-09-08) ----------
   Dos columnas: el texto a la izquierda y la pieza —la carátula de la
   estación o el reproductor de Spotify— a la derecha. El bloque del podcast
   alterna el fondo (`--alt`) para que las dos secciones seguidas no se lean
   como una sola larga; es el mismo recurso de `.ref-pasos` contra
   `.ref-modelo` en refugios.html. */
.enlinea-bloque{ padding: var(--section-y-tight) 0; }
.enlinea-bloque-alt{ background: var(--grad-light); }
.enlinea-bloque-grid{
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(36px, 6vw, 90px); align-items: center;
}
.enlinea-bloque-copy p{ color: var(--ink-soft); line-height: 1.65; margin: 18px 0 0; }
.enlinea-bloque-cta{ margin-top: 32px; }
/* `.btn` es `nowrap`: estas dos etiquetas son cortas pero el botón es de
   contenido, así que se deja partir (ver "Botones" en CLAUDE.md). */
.enlinea-bloque-cta .btn{ white-space: normal; }
.enlinea-bloque-media img{
  width: 100%; height: auto; display: block;
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 24px 60px rgba(0,0,0,.12);
}
/* El eyebrow de la radio lleva el punto pulsante en línea con el texto. */
.enlinea-bloque .eyebrow .enlinea-dot{ display: inline-block; vertical-align: middle; margin-right: 4px; }

@media (max-width: 900px){
  .enlinea-grid{ grid-template-columns: 1fr; }
  /* Una sola columna y la pieza ARRIBA del texto: en un teléfono, abrir con
     la carátula o el reproductor dice de inmediato de qué va la sección. */
  .enlinea-bloque-grid{ grid-template-columns: 1fr; gap: 32px; }
  .enlinea-bloque-media{ order: -1; }
}

/* Hoy esta rejilla lleva UNA sola tarjeta (Jóvenes de Influencia): la radio
   y el podcast se fueron a sección propia. Sin este tope, la tarjeta sola se
   estiraba a todo el ancho del container y quedaba un rectángulo enorme con
   cuatro líneas de texto adentro. Cuando vuelva a tener hermanas, se quita
   la clase del HTML y nada más. */
.enlinea-grid-sola{ grid-template-columns: 1fr; max-width: 620px; }

@media (prefers-reduced-motion: reduce){
  .enlinea-dot{ animation: none; }
}

/* Datos de contacto (correo y teléfono) bajo la dirección. */
.contacto-datos{
  list-style: none; margin: 26px 0 0; padding: 0;
  display: grid; gap: 14px;
}
.contacto-datos li{ display: flex; flex-direction: column; gap: 3px; }
.contacto-dato-lbl{
  font-size: .74rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.contacto-datos a{
  /* padding para altura táctil: son links para escribir y para llamar */
  display: inline-block; padding: 4px 0;
  font-size: clamp(1rem, 1.5vw, 1.1rem); font-weight: 600;
  letter-spacing: -0.015em; color: var(--blue);
  word-break: break-word;   /* el correo es largo y en móvil desbordaría */
}
.contacto-datos a:hover{ text-decoration: underline; text-underline-offset: 3px; }

/* =============== DONACIONES (donaciones.html) =============== */
/* Tono sobrio, mismo criterio que Refugios e Historia (regla 3): pedir
   dinero exige seriedad, no animaciones. Solo el `data-reveal` estándar.

   El cobro NO se implementa acá: cada botón es un <a> a un Stripe Payment
   Link. No hay script de Stripe, no hay web component, no hay campos de
   tarjeta en este sitio. Ver la sección "Donaciones" de CLAUDE.md. */

.don-hero{
  background: var(--grad-dark); color: var(--cream);
  /* El padding de abajo es grande a propósito: la tarjeta del selector
     sube con margin negativo y tiene que caer sobre fondo oscuro. */
  padding: calc(var(--section-y) * 1.05) 0 calc(var(--section-y) + 90px);
}
.don-hero-title{
  font-weight: 700; color: var(--paper);
  font-size: clamp(2.3rem, 5.6vw, 4.6rem);
  line-height: 1.06; letter-spacing: -0.038em;
  margin: 0; max-width: 17ch;
}
.don-hero-title em{
  font-style: italic;
  background-image: linear-gradient(135deg, #a5b4fc 0%, #818cf8 45%, #9333ea 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.don-hero-lede{
  margin: 32px 0 0; max-width: 54ch;
  font-size: clamp(1.05rem, 1.7vw, 1.28rem); line-height: 1.6;
  color: var(--cream-2);
}

/* --- Panel de gracias (vuelta desde Stripe con ?gracias=1) --- */
/* Oculto por defecto en CSS y no en JS: si el JS no corre, no se muestra
   un agradecimiento a alguien que no donó. */
.don-gracias{ display: none; }
.don-gracias.is-visible{ display: block; }
.don-gracias-inner{
  border: 1px solid rgba(165,180,252,.35); border-radius: 22px;
  background: rgba(255,255,255,.06);
  padding: clamp(24px, 3vw, 36px);
  margin: 0 0 44px; max-width: 62ch;
}
.don-gracias-inner h2{
  margin: 0 0 10px; font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  font-weight: 700; letter-spacing: -0.03em; color: var(--paper);
}
.don-gracias-inner p{ margin: 0; color: var(--cream-2); line-height: 1.6; }

/* --- Selector de donativo --- */
/* Sube sobre el hero oscuro: el gesto de "material que flota" del resto del
   sitio. El z-index es necesario porque el hero pinta después en el flujo. */
.don-widget{ position: relative; z-index: 2; margin-top: -90px; padding-bottom: var(--section-y); }
.don-card{
  max-width: 940px; margin: 0 auto;
  background: var(--paper); border-radius: 28px;
  padding: clamp(28px, 4vw, 56px);
  box-shadow: 0 30px 80px rgba(10,10,10,.16), 0 2px 6px rgba(10,10,10,.05);
  border: 1px solid rgba(255,255,255,.6);
}

.don-step{ border: 0; padding: 0; margin: 0 0 clamp(30px, 3.6vw, 44px); }
.don-step:last-of-type{ margin-bottom: clamp(26px, 3vw, 36px); }
.don-step-label{
  display: flex; align-items: baseline; gap: 12px; padding: 0;
  font-size: .82rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 18px;
}
.don-step-num{ color: var(--blue); letter-spacing: 0; }

/* Los radios reales quedan invisibles pero NO con display:none — así siguen
   siendo enfocables con teclado y el <label> los sigue activando. */
.don-freq input, .don-montos input, .don-destinos input{
  position: absolute; opacity: 0; width: 1px; height: 1px;
  pointer-events: none; margin: 0;
}

/* Frecuencia: dos mitades dentro de una pista */
.don-freq{
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  gap: 6px; background: var(--cream); border-radius: 999px; padding: 6px;
}
.don-freq label{
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; border-radius: 999px; cursor: pointer;
  font-weight: 600; font-size: 1rem; letter-spacing: -0.01em;
  color: var(--ink-soft); transition: background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.don-freq input:checked + label{
  background: var(--paper); color: var(--ink);
  box-shadow: 0 2px 8px rgba(10,10,10,.1);
}
.don-freq input:focus-visible + label{ outline: 2px solid var(--blue); outline-offset: 2px; }

/* Montos */
.don-montos{
  position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.don-montos label{
  display: flex; flex-direction: column; gap: 6px;
  min-height: 104px; padding: 18px 16px; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: 18px;
  transition: border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.don-montos label:hover{ border-color: var(--blue-soft); transform: translateY(-2px); }
.don-montos input:checked + label{
  border-color: var(--blue); background: var(--grad-accent-soft);
}
.don-montos input:focus-visible + label{ outline: 2px solid var(--blue); outline-offset: 2px; }
.don-montos input:disabled + label{
  opacity: .38; cursor: not-allowed; transform: none; border-color: var(--line);
  background: transparent;
}
.don-monto-cifra{
  font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 700;
  letter-spacing: -0.03em; line-height: 1.1;
}
.don-monto-nota{ font-size: .84rem; line-height: 1.4; color: var(--muted); }

/* Destinos */
.don-destinos{ position: relative; display: flex; flex-wrap: wrap; gap: 10px; }
.don-destinos label{
  display: flex; align-items: center; min-height: 46px;
  padding: 10px 20px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--line); font-size: .95rem; font-weight: 550;
  transition: border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.don-destinos label:hover{ border-color: var(--blue-soft); }
.don-destinos input:checked + label{
  border-color: transparent; background: var(--grad-accent); color: var(--paper);
}
.don-destinos input:focus-visible + label{ outline: 2px solid var(--blue); outline-offset: 2px; }

/* Aviso de la restricción real de Stripe: los recurrentes NO admiten
   "el cliente elige el precio", así que "Otro monto" no existe en mensual. */
.don-aviso{
  display: none; margin: 18px 0 0; padding: 14px 18px;
  border-radius: 14px; background: var(--cream);
  font-size: .9rem; line-height: 1.5; color: var(--ink-soft);
}
.don-aviso.is-visible{ display: block; }
.don-aviso a{ color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }

/* El botón NO se estira a todo el ancho de la tarjeta. A 940px la tarjeta
   lo dejaba en 836px con 193px de texto: la etiqueta ocupaba el 23% y
   quedaba un óvalo enorme con el texto flotando en el centro. Se limita y se
   centra. En móvil sigue ocupando todo el ancho, que ahí sí es lo correcto
   para alcanzarlo con el pulgar. */
.don-cta-wrap{
  margin-top: clamp(26px, 3vw, 36px);
  display: flex; flex-direction: column; align-items: center;
}
.don-cta{
  width: 100%; max-width: 440px;
  justify-content: center; text-align: center;
}
.don-seguro-inline{ width: 100%; }

/* ⚠️ `.btn` es `white-space: nowrap` con padding fijo: si la etiqueta no
   cabe NO se parte, se desborda. En el nav eso está bien (tiene que caber en
   una línea junto al logo), pero en los botones de contenido una etiqueta
   larga en un teléfono con la fuente del sistema grande se sale del botón.
   Estos se dejan partir en dos líneas. */
.don-cta,
.ref-hero-cta .btn,
.ref-cierre-cta .btn,
.don-cierre-cta .btn{
  white-space: normal;
}

/* Señales de seguridad pegadas al botón: es donde nace la duda. */
.don-seguro-inline{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px 20px; margin: 20px 0 0;
  font-size: .86rem; color: var(--muted); line-height: 1.4;
}
.don-seguro-inline span{ display: inline-flex; align-items: center; gap: 7px; }
/* El `hidden` nativo pierde contra el display:inline-flex de arriba — misma
   trampa que `.red-row[hidden]`. Hay que declararlo explícitamente. */
.don-seguro-inline span[hidden]{ display: none; }
.don-seguro-inline svg{ flex: none; color: var(--blue); }

/* --- A dónde va el dinero --- */
.don-usos{ padding: var(--section-y-tight) 0 var(--section-y); }
.don-usos-grid{
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 3vw, 44px); margin-top: clamp(48px, 6vw, 72px);
}
.don-uso{ border-top: 2px solid var(--line); padding-top: 26px; }
.don-uso figure{ margin: 0 0 20px; }
.don-uso figure img{ width: 100%; height: auto; display: block; border-radius: 14px; }
.don-uso-num{ font-size: .8rem; font-weight: 600; letter-spacing: .14em; color: var(--blue); }
.don-uso h3{
  font-size: clamp(1.35rem, 2.4vw, 1.95rem); font-weight: 700;
  letter-spacing: -0.03em; margin: 14px 0 12px;
}
.don-uso p{ color: var(--ink-soft); margin: 0 0 14px; }
.don-uso p:last-child{ margin-bottom: 0; }
.don-uso a{ color: var(--blue); text-decoration: underline; text-underline-offset: 4px; }

/* --- Es seguro --- */
.don-seguridad{ background: var(--grad-dark); color: var(--cream); padding: var(--section-y) 0; }
.don-seguridad .section-title{ color: var(--paper); }
.don-seguridad .eyebrow{ color: var(--purple); }
.don-seguridad-grid{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 32px); margin-top: clamp(48px, 6vw, 72px);
}
.don-seguridad-item{
  border: 1px solid var(--line-light); border-radius: 20px;
  background: rgba(255,255,255,.03); padding: clamp(24px, 2.8vw, 34px);
}
.don-seguridad-item h3{
  font-size: 1.12rem; font-weight: 650; letter-spacing: -0.02em;
  color: var(--paper); margin: 16px 0 10px;
}
.don-seguridad-item p{ color: var(--cream-2); margin: 0; font-size: .96rem; line-height: 1.6; }
.don-seguridad-item svg{ color: var(--blue-soft); }

/* --- Transferencia bancaria --- */
.don-transfer{ background: var(--grad-light); padding: var(--section-y) 0; }
.don-transfer-grid{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 80px); align-items: start;
}
.don-transfer-copy p{ color: var(--ink-soft); }
.don-transfer-card{
  background: var(--paper); border-radius: 24px;
  padding: clamp(26px, 3.2vw, 40px);
  box-shadow: 0 18px 50px rgba(10,10,10,.09);
  border: 1px solid var(--line);
}
.don-dato{ padding: 16px 0; border-bottom: 1px solid var(--line); }
.don-dato:last-of-type{ border-bottom: 0; }
.don-dato-label{
  display: block; font-size: .76rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 6px;
}
.don-dato-valor{
  font-size: 1.06rem; font-weight: 600; letter-spacing: -0.01em;
  /* La CLABE mide 22 caracteres con espacios y a 375px desbordaría. */
  word-break: break-word;
}
.don-dato-clabe .don-dato-valor{ font-variant-numeric: tabular-nums; font-size: 1.14rem; }
/* 44px de alto real: es el mínimo táctil (Apple HIG / Material). */
.don-copy{
  margin-top: 14px; min-height: 44px; padding: 11px 22px;
  border: 1.5px solid var(--line); border-radius: 999px; background: transparent;
  font-size: .9rem; font-weight: 600; color: var(--ink);
  transition: border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.don-copy:hover{ border-color: var(--blue); color: var(--blue); }
.don-copy.is-done{ border-color: transparent; background: var(--grad-accent); color: var(--paper); }

/* --- FAQ (comparte la lista con refugios.html: .ref-faq-list) --- */
.don-faq{ padding: var(--section-y) 0; }

/* --- Cierre --- */
.don-cierre{
  background: var(--grad-dark); color: var(--cream);
  padding: var(--section-y) 0; text-align: center;
}
.don-cierre-title{
  font-size: clamp(1.9rem, 4.4vw, 3.4rem); font-weight: 700;
  letter-spacing: -0.035em; line-height: 1.1; color: var(--paper);
  margin: 0 auto; max-width: 20ch;
}
.don-cierre > .container > p{
  color: var(--cream-2); margin: 24px auto 0; max-width: 50ch; font-size: 1.08rem;
}
.don-cierre-cta{ display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 44px; }

/* Estos media queries van DESPUÉS de las reglas base a propósito: un
   @media no suma especificidad (trampa #6). */
@media (max-width: 900px){
  .don-usos-grid{ grid-template-columns: 1fr; }
  .don-seguridad-grid{ grid-template-columns: 1fr; }
  .don-transfer-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  .don-montos{ grid-template-columns: 1fr 1fr; }
  .don-widget{ margin-top: -70px; }
  .don-freq label{ font-size: .95rem; }
}

/* =============== FOTOS + GALERÍA (refugios.html) =============== */
/* Fotos reales de los Centros de Restauración. La selección evita caras
   identificables de personas en tratamiento a propósito — ver la sección
   "Fotos de los refugios" de CLAUDE.md antes de cambiar cualquier imagen.

   ⚠️ REGLA DE ORO ACÁ: **ninguna foto se recorta.** Nada de
   `object-fit: cover` ni de alturas fijas en los contenedores. Cada <img>
   va con `width:100%; height:auto` y con sus atributos `width`/`height`
   reales en el HTML, así el navegador reserva la proporción correcta antes
   de descargarla (sin salto de maquetación) y la foto se ve completa.
   Una versión anterior usaba `cover` y cortaba cabezas y letreros. */

.foto img,
.ref-galeria-item img{
  display: block; width: 100%; height: auto;
  border-radius: 16px; background: var(--cream-2);
}

/* --- Efecto de entrada ligado al scroll --- */
/* Se activa solo si el JS corre (`html.js-foto`): sin JS las fotos se ven
   completas y opacas, no a medio desvanecer. Mismo criterio que .lit-word:
   el estado degradado tiene que seguir siendo legible.
   La escala TERMINA en 1 y nunca la pasa, así que no desborda ni recorta. */
.js-foto [data-foto]{
  --p: 0;
  /* --foto-dist parametriza el recorrido: con distancias DISTINTAS entre
     figuras vecinas, la misma --p produce paralaje — unas llegan antes que
     otras. La banda de .somos lo usa; el resto hereda los 34px. */
  --foto-dist: 34px;
  opacity: calc(.3 + var(--p) * .7);
  transform: translateY(calc((1 - var(--p)) * var(--foto-dist))) scale(calc(.965 + var(--p) * .035));
  will-change: transform, opacity;
}

/* --- Banda ancha: una foto sola que sostiene la sección --- */
.foto-banda{ margin: clamp(48px, 6vw, 84px) 0 0; }
/* La banda que va pegada al hero es su propia sección y no cuelga de nada,
   así que el aire lo pone la sección y no el margen de la figura. */
.foto-intro{ padding: clamp(56px, 7vw, 100px) 0 0; }
.foto-intro .foto-banda{ margin-top: 0; }
.foto-banda figcaption,
.ref-galeria-nota{
  margin-top: 14px; color: var(--muted); font-size: .88rem; line-height: 1.5;
}
/* Sobre fondo oscuro el pie de foto necesita otro color: la clase base no
   lo define, lo pone el contexto (trampa #2). */
.ref-proceso .foto-banda figcaption{ color: var(--blue-soft); }

/* --- Foto dentro de cada pilar del modelo integral --- */
/* Las tres son 3:2 a propósito: con proporciones distintas y sin recorte,
   las tres columnas quedarían de alturas dispares y el bloque se vería
   descuadrado. Si se cambia una, elegir otra 3:2 (1500x1000). */
.ref-pilar figure{ margin: 0 0 20px; }

/* --- Galería en mampostería --- */
/* Columnas CSS y no grid: es la forma de que convivan fotos horizontales y
   verticales SIN recortar ninguna. Un grid con filas fijas obliga a cortar. */
.ref-galeria{ padding: var(--section-y-tight) 0 var(--section-y); }
.ref-galeria-grid{
  columns: 3; column-gap: 14px;
  margin-top: clamp(40px, 5vw, 64px);
}
.ref-galeria-item{
  display: block; width: 100%; padding: 0; border: 0; background: none;
  margin: 0 0 14px; cursor: zoom-in;
  /* Sin esto una foto se parte entre dos columnas. */
  break-inside: avoid; -webkit-column-break-inside: avoid;
  position: relative; overflow: hidden; border-radius: 16px;
}
.ref-galeria-item img{ transition: transform .6s var(--ease); }
.ref-galeria-item:hover img{ transform: scale(1.04); }
.ref-galeria-item::after{
  content: ""; position: absolute; inset: 0; border-radius: 16px;
  background: linear-gradient(180deg, transparent 60%, rgba(10,10,10,.32));
  opacity: 0; transition: opacity .4s var(--ease);
}
.ref-galeria-item:hover::after{ opacity: 1; }
.ref-galeria-item:focus-visible{ outline: 3px solid var(--blue); outline-offset: 3px; }
.ref-sedes .ref-galeria-grid{ margin-top: clamp(32px, 4vw, 48px); }

/* --- Kevin: antes / hoy --- */
/* Dos retratos lado a lado. La de "hoy" viene en 410x512 y **no se amplía**:
   `max-width` a su ancho nativo. Estirarla la dejaría borrosa justo en el
   remate del testimonio, que es lo último que conviene. */
.ref-kevin-fotos{
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 34px);
  margin: clamp(34px, 4vw, 52px) 0 clamp(40px, 5vw, 60px);
  max-width: 760px; align-items: end;
}
.ref-kevin-fotos figure{ margin: 0; }
.ref-kevin-fotos img{ width: 100%; height: auto; border-radius: 14px; }
.ref-kevin-fotos figure:last-child img{ max-width: 410px; }
.ref-kevin-fotos figcaption{
  margin-top: 12px; font-size: .82rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.ref-kevin-fotos figure:last-child figcaption{ color: var(--blue); }

/* --- Foto dentro de una fase del proceso (fondo oscuro) --- */
.ref-fase-foto{ margin: 0 0 24px; }
.ref-fase-foto img{ width: 100%; height: auto; border-radius: 14px; }

/* --- Lightbox --- */
/* Vive en el HTML (no se genera por JS) para que, si el JS no corre, la
   galería siga siendo una galería en vez de una interfaz rota. */
.gal-lightbox{
  position: fixed; inset: 0; z-index: 3000;
  display: none; align-items: center; justify-content: center;
  background: rgba(10,10,10,.94);
  padding: clamp(16px, 4vw, 48px);
}
.gal-lightbox.is-open{ display: flex; }
.gal-lightbox-fig{
  margin: 0; max-width: 100%; max-height: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
/* `contain` y no `cover`: en el visor tampoco se recorta nada. */
.gal-lightbox-fig img{
  max-width: 100%; max-height: 78vh; width: auto; height: auto;
  border-radius: 14px; object-fit: contain;
}
.gal-lightbox-cap{
  color: var(--cream-2); font-size: .95rem; text-align: center;
  max-width: 60ch; line-height: 1.5;
}
.gal-lightbox-count{ color: var(--muted); font-size: .82rem; letter-spacing: .1em; }

/* 44px es el mínimo táctil; acá van a 52 porque son los controles de una
   interfaz a pantalla completa. */
.gal-btn{
  position: absolute; width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--line-light); background: rgba(255,255,255,.08);
  color: var(--paper); font-size: 1.5rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.gal-btn:hover{ background: rgba(255,255,255,.2); }
.gal-btn:active{ transform: scale(.94); }
.gal-btn:focus-visible{ outline: 3px solid var(--blue-soft); outline-offset: 3px; }
.gal-close{ top: clamp(14px, 3vw, 28px); right: clamp(14px, 3vw, 28px); }
.gal-prev{ left: clamp(10px, 2vw, 28px); top: 50%; transform: translateY(-50%); }
.gal-next{ right: clamp(10px, 2vw, 28px); top: 50%; transform: translateY(-50%); }
.gal-prev:active, .gal-next:active{ transform: translateY(-50%) scale(.94); }

@media (prefers-reduced-motion: reduce){
  .js-foto [data-foto]{ opacity: 1; transform: none; }
  .ref-galeria-item img{ transition: none; }
  .ref-galeria-item:hover img{ transform: none; }
}

/* Estos media queries van DESPUÉS de las reglas base (trampa #6). */
@media (max-width: 900px){
  .ref-galeria-grid{ columns: 2; }
}
@media (max-width: 560px){
  .ref-galeria-grid{ columns: 1; }
  .gal-prev{ left: 6px; }
  .gal-next{ right: 6px; }
  .gal-lightbox-fig img{ max-height: 66vh; }
}

/* =============== A&R RADIO (radio.html) =============== */
.radio-hero{
  background: var(--grad-dark); color: var(--cream);
  padding: calc(var(--section-y) * 1.05) 0 var(--section-y);
  /* Centrado a pedido del cliente: el reproductor es EL protagonista de la
     página, así que el hero entero se alinea a su eje. */
  text-align: center;
}
.radio-hero .radio-hero-title{ margin-inline: auto; }
.radio-hero .radio-hero-lede{ margin-inline: auto; }
.radio-envivo{ display: inline-flex; align-items: center; gap: 9px; }
.radio-hero-title{
  font-weight: 700; color: var(--paper);
  font-size: clamp(2.4rem, 6vw, 5rem);
  line-height: 1.05; letter-spacing: -0.04em;
  margin: 0; max-width: 14ch;
}
.radio-hero-title em{
  font-style: italic;
  background-image: linear-gradient(135deg, #a5b4fc 0%, #818cf8 45%, #9333ea 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.radio-hero-lede{
  margin: 32px 0 0; max-width: 52ch;
  font-size: clamp(1.05rem, 1.7vw, 1.28rem); line-height: 1.6;
  color: var(--cream-2);
}

/* El <audio> nativo no se estiliza por dentro (los navegadores no lo
   permiten de forma confiable); lo que se estiliza es su marco. */
.radio-player{
  margin: clamp(44px, 6vw, 72px) auto 0;
  max-width: 560px;
  border: 1px solid var(--line-light); border-radius: 28px;
  background: rgba(255,255,255,.05);
  padding: clamp(28px, 4.5vw, 48px);
}
.radio-player audio{ width: 100%; display: block; }
/* Con el reproductor propio activo, el <audio> es solo el motor: sin el
   atributo `controls` no pinta nada, pero se le quita el alto por si algún
   navegador deja un hueco. */
.radio-player audio:not([controls]){ height: 0; }

/* --- Reproductor propio (initRadioPlayer) --- */
.rp{
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(18px, 3vw, 26px); text-align: center;
}
.rp[hidden]{ display: none; }
.rp-controles{ display: flex; align-items: center; gap: 22px; }

/* Carátula. Debajo vive el mosaico de la estación (degradado + logo): si
   iTunes no encuentra la canción, eso es lo que se ve — nunca un hueco. */
.rp-art{
  flex: none; width: clamp(150px, 24vw, 190px); height: clamp(150px, 24vw, 190px);
  border-radius: 22px;
  position: relative; overflow: hidden;
  background-image: var(--grad-accent);   /* trampa #1 */
  box-shadow: 0 18px 50px rgba(10,10,10,.5);
  transition: box-shadow .5s var(--ease);
}
/* Sonando, la carátula también brilla. */
.rp[data-estado="sonando"] .rp-art{ box-shadow: 0 22px 70px rgba(124,58,237,.45); }
.rp-art-logo{
  position: absolute; inset: 0; margin: auto; width: 56%; height: auto;
}
.rp-art-img{
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  opacity: 0; transition: opacity .5s var(--ease);
}
.rp-art-img.is-lista{ opacity: 1; }

/* Acciones bajo el reproductor */
.rp-acciones{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px;
  margin-top: clamp(20px, 3vw, 28px); padding-top: clamp(18px, 2.6vw, 24px);
  border-top: 1px solid var(--line-light);
}
.rp-acciones[hidden]{ display: none; }
.rp-accion{
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 10px 16px;
  border: 1px solid var(--line-light); border-radius: 999px;
  background: rgba(255,255,255,.05); color: var(--cream-2);
  font-size: .85rem; font-weight: 600; letter-spacing: -0.01em;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.rp-accion:hover{ background: rgba(255,255,255,.14); color: var(--paper); }
.rp-accion:focus-visible{ outline: 2px solid var(--blue-soft); outline-offset: 2px; }
.rp-vol{
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--cream-2);
}
.rp-vol input{ width: 110px; accent-color: var(--blue); }
/* En táctil el volumen se esconde: iOS lo ignora y sería un control muerto. */
@media (hover: none) and (pointer: coarse){
  .rp-vol{ display: none; }
}

.rp-play{
  flex: none; width: 84px; height: 84px; border-radius: 50%;
  border: 0; position: relative;
  background-image: var(--grad-accent);   /* trampa #1: no la abreviada */
  color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px rgba(99,102,241,.45);
  transition: transform .25s var(--ease), box-shadow .3s var(--ease);
}
.rp-play:hover{ transform: scale(1.05); }
.rp-play:active{ transform: scale(.94); }
.rp-play:focus-visible{ outline: 3px solid var(--blue-soft); outline-offset: 4px; }
/* Sonando, el botón "respira" con un glow más ancho */
.rp[data-estado="sonando"] .rp-play{ box-shadow: 0 10px 44px rgba(147,51,234,.65); }

/* Los tres estados del botón: cada ícono existe siempre y el data-estado
   decide cuál se ve — sin swaps de innerHTML. */
.rp-ico-pause, .rp-ico-carga{ display: none; }
.rp[data-estado="sonando"] .rp-ico-play{ display: none; }
.rp[data-estado="sonando"] .rp-ico-pause{ display: block; }
.rp[data-estado="cargando"] .rp-ico-play{ display: none; }
.rp[data-estado="cargando"] .rp-ico-carga{
  display: block; width: 26px; height: 26px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.35); border-top-color: var(--paper);
  animation: rp-gira .8s linear infinite;
}
@keyframes rp-gira{ to{ transform: rotate(360deg); } }

.rp-info{ min-width: 0; max-width: 100%; }
.rp-live{
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .72rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--blue-soft);
}
.rp-title{
  margin: 10px 0 4px; color: var(--paper);
  font-size: clamp(1.3rem, 2.8vw, 1.8rem); font-weight: 700;
  letter-spacing: -0.025em; line-height: 1.25;
  /* Centrado, un título largo se parte en DOS líneas y recién ahí se
     corta — con nowrap centrado se leía mocho enseguida. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.rp-sub{ margin: 0; color: var(--cream-2); font-size: .92rem; opacity: .8;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* Ecualizador decorativo: NO analiza el audio (Web Audio sobre un stream
   ajeno exige CORS en el stream y Zeno no lo manda) — son barras animadas
   que solo corren cuando de verdad está sonando. Decoración honesta. */
.rp-eq{ flex: none; display: flex; align-items: flex-end; gap: 4px; height: 34px; }
.rp-eq span{
  width: 5px; height: 22%; border-radius: 3px;
  background-image: var(--grad-accent);
  transition: height .4s var(--ease);
}
.rp[data-estado="sonando"] .rp-eq span{ animation: rp-eq 1s ease-in-out infinite alternate; }
.rp[data-estado="sonando"] .rp-eq span:nth-child(1){ animation-duration: .9s; }
.rp[data-estado="sonando"] .rp-eq span:nth-child(2){ animation-duration: .7s; animation-delay: .1s; }
.rp[data-estado="sonando"] .rp-eq span:nth-child(3){ animation-duration: 1.1s; animation-delay: .2s; }
.rp[data-estado="sonando"] .rp-eq span:nth-child(4){ animation-duration: .8s; animation-delay: .05s; }
.rp[data-estado="sonando"] .rp-eq span:nth-child(5){ animation-duration: 1s;  animation-delay: .15s; }
@keyframes rp-eq{ from{ height: 18%; } to{ height: 100%; } }

@media (prefers-reduced-motion: reduce){
  .rp-eq span{ animation: none !important; height: 55%; }
  .rp[data-estado="cargando"] .rp-ico-carga{ animation: none; }
}
@media (max-width: 480px){
  .rp-play{ width: 70px; height: 70px; }
  .rp-art{ width: 132px; height: 132px; border-radius: 18px; }
  /* En columna el ecualizador ya no compite con el título: se queda. */
}

/* --- Escritorio (≥980px): hero a dos columnas y widget HORIZONTAL ---
   Pedido del cliente: texto a la izquierda, reproductor a la derecha, y el
   widget en fila (en columna se veía demasiado vertical en pantallas
   anchas). En móvil no se toca nada: estas reglas solo pisan la versión
   en columna de arriba a partir de 980px (trampa #6: van DESPUÉS). */
@media (min-width: 980px){
  .radio-hero{ text-align: left; }
  .radio-hero .container{
    display: grid; grid-template-columns: 1.05fr 1fr;
    column-gap: clamp(40px, 5vw, 80px); align-items: center;
  }
  /* El texto ocupa la columna izquierda; el reproductor abarca las tres
     filas de la derecha. */
  .radio-hero .eyebrow, .radio-hero-title, .radio-hero-lede{ grid-column: 1; }
  .radio-hero-title{ margin-inline: 0; }
  .radio-hero-lede{ margin-inline: 0; }
  .radio-player{
    grid-column: 2; grid-row: 1 / span 3;
    margin: 0; max-width: none; width: 100%;
  }
  /* El widget pasa a fila: carátula | info | controles */
  .rp{ flex-direction: row; text-align: left; gap: clamp(18px, 2vw, 28px); }
  .rp-art{ width: 128px; height: 128px; border-radius: 18px; }
  .rp-info{ flex: 1; }
  .rp-title{ font-size: clamp(1.15rem, 1.6vw, 1.45rem); }
  .rp-controles{ flex: none; gap: 16px; }
  .rp-play{ width: 72px; height: 72px; }
  /* El ecualizador estorba entre el play y el borde: bajo el título hay
     poco ancho — se esconde en la fila y el glow del botón hace su papel. */
  .rp-eq{ display: none; }
  .rp-acciones{ justify-content: flex-start; }
  .radio-player-nota{ text-align: left; }
}
.radio-player-nota{
  margin: 18px 0 0; font-size: .85rem; line-height: 1.5; color: var(--cream-2);
  opacity: .7; text-align: center;
}
.radio-player-nota a{ color: var(--blue-soft); text-decoration: underline; text-underline-offset: 3px; }

.radio-que-es{ padding: var(--section-y) 0; }

/* Programación de la emisora: una fila por bloque. Los servicios
   transmitidos llevan el chip "En vivo" con el punto pulsante. */
.radio-programacion{
  display: flex; flex-direction: column; gap: 10px;
  max-width: 640px; margin-top: clamp(40px, 5vw, 64px);
}
.radio-slot{
  display: flex; flex-direction: column; gap: 5px;
  padding: 16px 20px; border-radius: 14px;
  background: var(--grad-accent-soft);
  border-left: 3px solid var(--blue);
}
.radio-slot-cuando{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: .8rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--blue);
}
.radio-slot-tag{
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .68rem; letter-spacing: .1em; color: var(--purple);
}
.radio-slot-que{ font-size: 1.06rem; font-weight: 650; letter-spacing: -0.015em; }

.radio-podcast{ background: var(--grad-light); padding: var(--section-y) 0; }
.radio-podcast-grid{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
.radio-podcast-copy p{ color: var(--ink-soft); }
.radio-podcast-embed iframe{
  width: 100%; border: 0; border-radius: 16px; display: block;
}

.radio-cierre{
  background: var(--grad-dark); color: var(--cream);
  padding: var(--section-y) 0; text-align: center;
}
.radio-cierre > .container > p{
  color: var(--cream-2); margin: 24px auto 0; max-width: 48ch; font-size: 1.08rem;
}

/* Estos media queries van DESPUÉS de las reglas base (trampa #6). */
@media (max-width: 860px){
  .radio-podcast-grid{ grid-template-columns: 1fr; }
}

/* =============== EVENTOS (anuncio del congreso en el home) =============== */
/* La landing del congreso (congreso.html) tiene identidad propia; esta
   sección habla el idioma del sitio. El banner respeta su proporción
   (width/height reales + height:auto vía `.foto img`) — sin recorte. */
/* ⚠️ Obligatorio, no decorativo: `initEventos` esconde los eventos vencidos
   con la propiedad `hidden`, y el `hidden` nativo PIERDE contra cualquier
   regla de `display` con más peso — es la misma trampa de `.red-row[hidden]`
   y del `<span>` de OXXO en donaciones. Va con selector de atributo para que
   cubra cualquier elemento que se sume al sistema, no solo esta sección. */
[data-evento][hidden],
[data-evento-ref][hidden]{ display: none !important; }

.eventos{ padding: var(--section-y-tight) 0; }
.evento-banner{ display: block; max-width: 900px; margin: 10px auto 0; }
.evento-banner figure{ margin: 0; }
.evento-banner .foto img{ box-shadow: 0 24px 60px rgba(10, 10, 10, .16); }
.evento-meta{
  max-width: 900px; margin: 26px auto 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px 32px; flex-wrap: wrap;
}
/* La etiqueta es larga; se parte en dos líneas en vez de salirse (ver la
   nota de `.btn` y `white-space: nowrap`). */
.evento-meta .btn{ white-space: normal; }
.evento-datos{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 12px;
}
.evento-datos li{
  font-size: .88rem; font-weight: 600; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 16px;
}
.evento-datos .evento-libre{
  color: #fff; border-color: transparent;
  background-image: var(--grad-accent);
}
@media (max-width: 700px){
  .eventos{ padding-top: 96px; padding-bottom: 96px; }
  .evento-meta{ justify-content: flex-start; }
  .evento-meta .btn{ width: 100%; }
}

/* =============== BETELES / REUNIÓN EN CASA (beteles.html) =============== */
/* La página reusa lo que ya existe: `.red-page-hero` para el hero oscuro,
   `.red-controls` / `.red-search` / `.red-chips` / `.red-chip` / `.red-count`
   / `.red-empty` para el buscador, y `.btn` para las acciones. Lo propio de
   acá es la tarjeta de betel. */

.betel-hero-lede{ max-width: 52ch; }
.betel-hero-cta{
  display: flex; align-items: center; gap: 12px 28px; flex-wrap: wrap;
  margin-top: clamp(34px, 4vw, 48px);
}

.betel-que-es{ padding: var(--section-y-tight) 0 0; }
.betel-texto{ max-width: 62ch; margin-top: 34px; }
.betel-texto p{ margin: 0 0 22px; font-size: 1.06rem; line-height: 1.66; color: var(--ink-soft); }
.betel-texto p:last-child{ margin-bottom: 0; }

.betel-lista-section{ padding: var(--section-y-tight) 0 var(--section-y); }
/* El buscador va pegado al lede de la sección, no al borde de la anterior. */
.betel-controls{ margin-top: clamp(38px, 5vw, 56px); }

/* Dos columnas solo cuando de verdad caben: con una columna angosta el
   nombre de los anfitriones se parte en cinco líneas y la tarjeta se
   descuadra. */
.betel-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 980px){
  .betel-grid{ grid-template-columns: 1fr 1fr; gap: 20px; }
}

/* Foto | identidad arriba, y dirección y acciones a todo el ancho de la
   tarjeta: la dirección es lo que se lee de un vistazo y en una columna de
   180px se partía en tres líneas. */
.betel-card{
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "foto ident"
    "dir  dir"
    "mapa mapa"
    "acc  acc"
    "tel2 tel2";
  align-items: start;
  gap: 14px 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--paper);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.betel-card:hover{
  border-color: transparent;
  box-shadow: 0 18px 44px rgba(10,10,10,.09);
  transform: translateY(-2px);
}
/* Misma trampa que `.red-row[hidden]`: el `display:grid` de la regla base le
   gana al `hidden` nativo, así que hay que apagarlo explícitamente. */
.betel-card[hidden]{ display: none; }

/* Caja cuadrada + `object-fit: contain`: NINGUNA foto se recorta (regla del
   proyecto). Una de las 19 viene en 3:2 y queda centrada con aire arriba y
   abajo en vez de perder cabezas. */
.betel-foto{
  grid-area: foto;
  margin: 0;
  width: clamp(96px, 26vw, 124px);
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  background: var(--sand);
}
.betel-foto img{
  width: 100%; height: 100%;
  object-fit: contain;
}

.betel-ident{ grid-area: ident; min-width: 0; }
.betel-num{
  display: block;
  font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  color: var(--blue); font-variant-numeric: tabular-nums;
  margin-bottom: 8px;
}
.betel-anfitriones{
  margin: 0;
  font-size: 1.02rem; font-weight: 650; line-height: 1.28;
  letter-spacing: -0.018em;
  color: var(--ink);
}
.betel-colonia{
  margin: 8px 0 0;
  font-size: .9rem; font-weight: 600; color: var(--blue);
}

.betel-dir{
  grid-area: dir; margin: 0;
  font-size: .95rem; line-height: 1.45; color: var(--muted);
}
.betel-dir-falta{ font-style: italic; }

/* `flex-wrap` a propósito: `.btn` es `nowrap` y a 338px los dos botones no
   caben en una línea — sin el wrap el segundo se saldría de la tarjeta. */
.betel-acciones{
  grid-area: acc;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.betel-acciones .btn{ flex: 1 1 auto; justify-content: center; padding: 14px 20px; }
.betel-acciones .btn svg{ flex: none; }
.betel-acciones .btn:hover svg{ transform: none; }

.betel-tel2{
  grid-area: tel2; margin: -4px 0 0;
  font-size: .86rem; color: var(--muted);
}
/* 44px táctiles con padding vertical, compensado con margen negativo para
   que la línea no se vea suelta (mismo recurso que los links del footer). */
.betel-tel2 a{
  display: inline-block; padding: 12px 0; margin: -12px 0;
  color: var(--blue); font-weight: 600;
}

/* Cierre oscuro: las dos maneras de entrar a un betel. */
.betel-cierre{
  padding: var(--section-y-tight) 0;
  background: var(--grad-dark);
  color: var(--paper);
}
.betel-cierre .section-title{ color: var(--paper); }
.betel-cierre-lede{
  max-width: 56ch; margin: 26px 0 0;
  font-size: 1.12rem; line-height: 1.6; color: var(--cream-2);
}
.betel-cierre-cta{
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: clamp(34px, 4vw, 46px);
}
/* Etiquetas largas: acá sí pueden partirse en dos líneas antes que salirse
   del botón (ver la nota de `.btn` y `white-space: nowrap`). */
.betel-cierre-cta .btn{ white-space: normal; }

@media (max-width: 560px){
  .betel-card{ padding: 16px; gap: 12px 14px; }
  .betel-cierre-cta .btn{ width: 100%; justify-content: center; }
  .betel-hero-cta .btn{ width: 100%; justify-content: center; }
}

/* =============== CURSOS ONLINE (cursos.html) =============== */
/* Página del sitio, no landing: Inter, tokens y `data-reveal` estándar.
   Casi todo se reusa — `.red-page-hero` para el hero, `.ref-pilares` para
   "Cómo funcionan", `.ref-cierre` para el cierre oscuro y `.ref-faq-list`
   para las preguntas. Lo propio es la tarjeta de programa. */
.cur-hero-lede{ max-width: 58ch; }
.cur-hero-cta{ display:flex; flex-wrap: wrap; align-items:center; gap: 20px 28px; margin-top: 44px; }

.cur-como{ padding: var(--section-y) 0; }
.cur-lista{ background: var(--grad-light); padding: var(--section-y) 0; }

/* Tres programas, no diecinueve beteles: la rejilla es de tarjetas anchas
   en una columna y de dos columnas recién a partir de 900px. Con tres
   items no vale la pena forzar tres columnas — el texto quedaría en
   canales angostos y la portada 16:9 en miniatura. */
.cur-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: clamp(44px, 5vw, 64px);
}
@media (min-width: 900px){
  .cur-grid{ grid-template-columns: 1fr 1fr; gap: 24px; }
}

.cur-card{
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--paper);
  overflow: hidden;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.cur-card:hover{
  border-color: transparent;
  box-shadow: 0 18px 44px rgba(10,10,10,.09);
  transform: translateY(-2px);
}

/* La portada es 16:9 y va SIN recortar (regla del proyecto): las dos que
   existen son 1920x1080 de origen, así que `object-fit: cover` sobre una
   caja 16/9 no corta nada. El `aspect-ratio` en el contenedor es lo que
   deja que el hueco `.ph-photo` del programa sin portada mida igual que
   las otras dos y la fila no quede dispareja. */
.cur-card-media{
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
/* ⚠️ El `:not(.ph-photo)` NO es cosmético. `.ph-photo` (línea ~1242) y
   `.cur-card-media` tienen la MISMA especificidad, y este bloque va después
   en el archivo: un `background` plano acá le ganaba a la trama diagonal del
   placeholder y el hueco se veía como un rectángulo gris cualquiera, o sea
   dejaba de leerse como "pendiente". Misma familia que la trampa #6 (el
   orden decide cuando la especificidad empata). */
.cur-card-media:not(.ph-photo){ background: var(--sand); }
.cur-card-media img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* `.ph-photo` viene con borde punteado propio; dentro de la tarjeta el
   borde exterior ya lo enmarca, así que solo queda la trama. */
.cur-card-media.ph-photo{ border: 0; border-bottom: 1px dashed var(--line); }

.cur-card-body{
  display: flex; flex-direction: column;
  flex: 1;
  padding: clamp(20px, 3vw, 28px);
}
.cur-card-num{
  font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  color: var(--blue); font-variant-numeric: tabular-nums;
}
.cur-card-title{
  font-size: clamp(1.35rem, 2.4vw, 1.85rem); font-weight: 700;
  letter-spacing: -0.03em; line-height: 1.15;
  margin: 12px 0 0;
}
.cur-card-imparte{
  margin: 8px 0 0;
  font-size: .9rem; font-weight: 600; color: var(--blue);
}

/* Los tres datos duros del Wix: pasos, ritmo y precio. Se separan con una
   barra dibujada por CSS (no un carácter en el HTML) para que un lector de
   pantalla lea tres items de lista y no "23 pasos barra a tu ritmo". */
.cur-datos{
  list-style: none; margin: 18px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px 14px;
  font-size: .92rem; color: var(--muted);
}
.cur-datos li{ display: flex; align-items: center; gap: 14px; }
.cur-datos li + li::before{
  content: ""; width: 1px; height: 14px; background: var(--line);
}
.cur-datos strong{ color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }

.cur-card-desc{
  margin: 18px 0 0;
  color: var(--ink-soft); line-height: 1.6;
}
/* El hueco declarado: el Wix no publica descripción de dos de los tres
   programas y no se inventó. Mismo recurso visual que `.betel-dir-falta`. */
.cur-card-falta{
  margin: 18px 0 0;
  color: var(--muted); font-style: italic; line-height: 1.6;
  font-size: .95rem;
}

/* `margin-top: auto` empuja el botón al pie de la tarjeta: con textos de
   largo distinto las tres tarjetas alinean su CTA a la misma altura. */
.cur-card-cta{ margin-top: auto; padding-top: clamp(22px, 3vw, 28px); }
/* `.btn` es `nowrap` y la etiqueta se sale del botón si no cabe (ver la
   nota de "Botones"): acá sí puede partirse en dos líneas. */
.cur-card-cta .btn{ white-space: normal; }

@media (max-width: 560px){
  .cur-card-body{ padding: 18px; }
  .cur-hero-cta .btn{ width: 100%; justify-content: center; }
  .cur-card-cta .btn{ width: 100%; justify-content: center; }
}

/* "Ver en el mapa" de cada betel. La dirección publicada se abre en la app de
   mapas del visitante y ES ELLA la que geocodifica y calcula la distancia —
   el sitio no guarda ninguna coordenada. Ver "Beteles → por qué no hay
   ordenar por cercanía" en CLAUDE.md. */
.betel-mapa{ grid-area: mapa; margin: -4px 0 0; font-size: .9rem; }
/* 44px táctiles con padding vertical y margen negativo, igual que
   `.betel-tel2` y los links del footer. */
.betel-mapa a{
  display: inline-flex; align-items: center; gap: 7px;
  padding: 12px 0; margin: -12px 0;
  color: var(--blue); font-weight: 600;
}
.betel-mapa a svg{ flex: none; }

/* Link a la landing del congreso desde la tarjeta de Jóvenes de "En línea".
   ⚠️ Se va junto con la sección #eventos después del 19 de septiembre 2026. */
.enlinea-congreso{ margin: 10px 0 0; font-size: .93rem; color: var(--muted); }
/* 44px táctiles con padding vertical + margen negativo (mismo recurso que
   `.betel-mapa` y los links del footer). */
.enlinea-congreso a{
  display: inline-block; padding: 12px 0; margin: -12px 0;
  color: var(--blue); font-weight: 600;
}

/* Chip "Estamos transmitiendo en vivo" de #predicas. Lo descubre
   initPredicasSync SOLO cuando la sonda confirmó el directo; arranca
   `hidden` desde el HTML para no anunciar un vivo sin confirmar.
   `[hidden]` explícito: el display de la regla base le gana al hidden
   nativo — la misma trampa que `.red-row[hidden]`. */
.predicas-vivo{
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0 0 18px;
  font-size: .82rem; font-weight: 650; letter-spacing: .1em;
  text-transform: uppercase; color: var(--paper);
  background-image: var(--grad-accent);
  border-radius: 999px; padding: 10px 18px;
}
.predicas-vivo[hidden]{ display: none; }
.predicas-vivo-dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--paper); flex: none;
  animation: pulse 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .predicas-vivo-dot{ animation: none; }
}