/* =========================================================
   IPURD — Prototipo de reforma visual
   Sistema de diseño: paleta, tipografía, componentes
   ========================================================= */

/* ============== TRANSICIONES ENTRE PÁGINAS ==============
   View Transitions API nativa (sin JS) para navegación entre documentos.
   Solo se activa si el usuario no pidió "reducir movimiento" -- patrón
   recomendado por la propia spec, no una capa extra que hay que mantener. */
@media (prefers-reduced-motion: no-preference){
  @view-transition{
    navigation: auto;
  }
}

/* El header y el footer son idénticos entre páginas -- con un nombre
   compartido, el navegador los mantiene "en su lugar" en vez de
   desvanecerlos junto con el resto del contenido. */
.site-header{ view-transition-name: site-header; }
.site-footer{ view-transition-name: site-footer; }

::view-transition-old(root),
::view-transition-new(root){
  animation-duration:.32s;
  animation-timing-function: cubic-bezier(.22,.61,.36,1);
}
::view-transition-old(root){ animation-name: ipurd-salida; }
::view-transition-new(root){ animation-name: ipurd-entrada; }

@keyframes ipurd-salida{
  from{ opacity:1; transform:translateY(0); }
  to{ opacity:0; transform:translateY(-6px); }
}
@keyframes ipurd-entrada{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}

:root{
  /* Paleta */
  --navy-950:#0a1330;
  --navy-900:#101c42;
  --navy-800:#182a5c;
  --navy-700:#233a78;
  --gold-600:#a9812f;
  --gold-500:#c9a24b;
  --gold-300:#e6cd94;
  --cream-50:#faf7f0;
  --cream-100:#f3ede0;
  --ink-900:#181c2a;
  --ink-700:#3d4256;
  --ink-500:#666c82;
  --line:#e5ddc9;
  --white:#ffffff;

  --font-display:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:'Inter', -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:24px;
  --shadow-sm:0 1px 2px rgba(10,19,48,.06), 0 1px 1px rgba(10,19,48,.04);
  --shadow-md:0 12px 32px -12px rgba(10,19,48,.28);
  --shadow-gold:0 10px 24px -10px rgba(169,129,47,.55);
  --container:1180px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;max-width:100%;overflow-x:clip;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink-900);
  background:var(--cream-50);
  -webkit-font-smoothing:antialiased;
  max-width:100%;overflow-x:clip;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;line-height:1.15;font-weight:600;}
p{margin:0;line-height:1.65;color:var(--ink-700);}
.wrap{max-width:var(--container);margin:0 auto;padding:0 24px;}
.skip-link{position:absolute;left:-999px;top:0;background:var(--navy-900);color:#fff;padding:10px 16px;z-index:999;}
.skip-link:focus{left:16px;top:16px;}

/* -------- eyebrow / kicker -------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-600);font-weight:700;margin-bottom:14px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--gold-500);display:inline-block;}
.hero .eyebrow, .bg-navy .eyebrow{color:var(--gold-300);}
.hero .eyebrow::before, .bg-navy .eyebrow::before{background:var(--gold-300);}

/* ============== HEADER ============== */
.site-header{
  position:sticky;top:0;z-index:200;
  background:rgba(250,247,240,.9);
  border-bottom:1px solid var(--line);
  box-shadow:0 0 0 rgba(10,19,48,0);
  transition:box-shadow .3s ease, background .3s ease;
}
/* El blur va en un pseudo-elemento y no en .site-header directamente: si
   .site-header tuviera backdrop-filter, se convertiría en el "containing
   block" de sus descendientes position:fixed (como el panel .main-nav en
   móvil), y ese panel quedaría encajado dentro de la cajita del header en
   vez de cubrir toda la pantalla. */
.site-header::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.site-header.is-scrolled{
  background:rgba(250,247,240,.97);
  box-shadow:0 8px 24px -12px rgba(10,19,48,.18);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px;gap:24px;
  transition:padding .3s ease;
}
.site-header.is-scrolled .header-inner{padding:9px 24px;}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--font-display);font-weight:700;font-size:1.15rem;color:var(--navy-900);}
.brand small{display:block;font-family:var(--font-body);font-weight:500;font-size:.68rem;color:var(--ink-500);letter-spacing:.04em;}

/* Logo oficial: el archivo fuente trae 2 marcas unidas (emblema IPURD + "Sobre Todo Nombre").
   Este recorte muestra solo el emblema izquierdo (globo + nombre) para el header/footer. */
.brand-logo{
  width:108px;height:48px;overflow:hidden;position:relative;display:block;flex:none;
}
.brand-logo img{
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  height:100px;width:auto;max-width:none;
}
.footer-brand .brand-logo{width:118px;height:52px;}
.footer-brand .brand-logo img{height:108px;}

.main-nav{display:flex;align-items:center;gap:2px;}
.main-nav > ul{display:flex;align-items:center;gap:4px;}
.main-nav a.nav-link{
  padding:10px 14px;border-radius:999px;font-weight:600;font-size:.92rem;color:var(--ink-700);
  transition:background .15s,color .15s;white-space:nowrap;
}
.main-nav a.nav-link.active{background:rgba(16,28,66,.08);color:var(--navy-900);}
.has-dropdown{position:relative;}
.dropdown{
  position:absolute;top:calc(100% + 8px);left:0;min-width:210px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);
  box-shadow:var(--shadow-md);padding:8px;opacity:0;visibility:hidden;transform:translateY(6px);
  transition:.15s ease;
}
.has-dropdown:focus-within .dropdown{opacity:1;visibility:visible;transform:translateY(0);}
.dropdown a{display:block;padding:9px 12px;border-radius:var(--radius-sm);font-size:.9rem;font-weight:500;color:var(--ink-700);}

/* Estilos :hover solo para dispositivos que de verdad tienen mouse -- en
   touch (movil/tablet) un elemento con :hover puede necesitar DOS toques
   en iOS Safari (el primero solo "activa" el hover, el segundo hace el
   clic real), lo que hacia parecer que el menu "Ministerios" no
   respondia al primer toque. */
@media (hover:hover) and (pointer:fine){
  .main-nav a.nav-link:hover{background:var(--navy-900);color:#fff;}
  .has-dropdown:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0);}
  .dropdown a:hover{background:var(--cream-100);color:var(--navy-900);}
}

.header-actions{display:flex;align-items:center;gap:10px;}
.staff-link{
  font-size:.78rem;font-weight:600;color:var(--ink-500);
  border:1px solid var(--line);border-radius:999px;padding:8px 14px;
  display:flex;align-items:center;gap:6px;
}
.staff-link:hover{color:var(--navy-900);border-color:var(--navy-800);}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:700;font-size:.92rem;padding:12px 22px;border-radius:999px;
  cursor:pointer;border:1px solid transparent;transition:.15s ease;
}
.btn-gold{background:linear-gradient(155deg,var(--gold-500),var(--gold-600));color:var(--navy-950);box-shadow:var(--shadow-gold);}
.btn-gold:hover{filter:brightness(1.06);transform:translateY(-1px);}
.btn-outline{border-color:rgba(255,255,255,.5);color:#fff;}
.btn-outline:hover{background:rgba(255,255,255,.12);}
.btn-outline-dark{border-color:var(--navy-800);color:var(--navy-900);}
.btn-outline-dark:hover{background:var(--navy-900);color:#fff;}
.btn-navy{background:var(--navy-900);color:#fff;}
.btn-navy:hover{background:var(--navy-950);}

.nav-toggle{display:none;background:none;border:none;padding:8px;cursor:pointer;}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--navy-900);margin:5px 0;border-radius:2px;}

/* ============== HERO ============== */
.hero{
  position:relative;overflow:hidden;
  background:radial-gradient(1200px 600px at 15% -10%, var(--navy-700), var(--navy-900) 55%, var(--navy-950));
  color:#fff;padding:96px 0 120px;
}
/* background-attachment:fixed ancla la foto al viewport, no a la caja de
   cada sección -- así, cuando el banner principal y "Nuestros Pilares"
   comparten la misma foto (vinculadas desde el panel), se ve como un único
   lienzo continuo detrás de los dos en vez de dos recortes independientes
   con una costura visible entre ellos. */
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--hero-fondo, url('../img/hero-bg.jpg'));
  background-size:cover;background-position:center;background-attachment:fixed;
}
/* Viñeta neutra (negro/carbón, sin tinte de color). El texto vive en la
   columna izquierda de arriba a abajo (.hero-inner es de 2 columnas), así
   que se oscurece de izquierda a derecha -- no de abajo hacia arriba -- y se
   refuerza un poco el pie para las cifras. La tarjeta de la derecha
   (.hero-verse) ya trae su propio fondo semitransparente, por eso ahí se
   deja ver más la foto.
   --hero-overlay-opacity queda como variable para que más adelante el panel
   pueda controlar la intensidad (0 a ~0.95) sin tocar este CSS. */
.hero{ --hero-overlay-opacity: .9; }
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(100deg,
      rgba(6,7,9,var(--hero-overlay-opacity)) 0%,
      rgba(6,7,9,calc(var(--hero-overlay-opacity) * .82)) 34%,
      rgba(6,7,9,calc(var(--hero-overlay-opacity) * .35)) 58%,
      rgba(6,7,9,0) 76%),
    linear-gradient(180deg,
      rgba(6,7,9,0) 0%,
      rgba(6,7,9,calc(var(--hero-overlay-opacity) * .35)) 72%,
      rgba(6,7,9,calc(var(--hero-overlay-opacity) * .65)) 100%);
  pointer-events:none;
}
/* Rayos finos desde el punto de luz dorada -- evocan las lenguas de fuego de
   Pentecostés (Bautismo del Espíritu Santo, ver "¿En qué creemos?" abajo)
   en vez de una textura decorativa sin relación con el contenido. */
.hero-rays{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:repeating-conic-gradient(from 0deg at 86% 18%,
    transparent 0deg 3.4deg, rgba(230,205,148,.55) 3.4deg 3.7deg, transparent 3.7deg 14deg);
  mask-image:radial-gradient(560px 560px at 86% 18%, #000 0%, #000 35%, transparent 78%);
  -webkit-mask-image:radial-gradient(560px 560px at 86% 18%, #000 0%, #000 35%, transparent 78%);
  opacity:.55;
}
.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;}
.hero h1{font-size:clamp(2.3rem,4vw,3.4rem);color:#fff;letter-spacing:-.01em;}
.hero h1 em{font-style:normal;color:var(--gold-300);}
.hero p.lead{color:rgba(255,255,255,.78);font-size:1.08rem;margin-top:18px;max-width:46ch;}
.hero-cta{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap;}
.hero-stats{display:flex;gap:28px;margin-top:44px;flex-wrap:wrap;}
.hero-stats div strong{display:block;font-family:var(--font-display);font-size:1.6rem;color:#fff;font-variant-numeric:tabular-nums;}
.hero-stats div span{font-size:.78rem;color:rgba(255,255,255,.65);letter-spacing:.04em;text-transform:uppercase;}

.hero-verse{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-lg);padding:32px;backdrop-filter:blur(6px);
}
.hero-verse .mark{width:38px;height:38px;color:var(--gold-300);margin-bottom:16px;}
.hero-verse p{color:#fff;font-family:var(--font-display);font-size:1.25rem;line-height:1.5;}
.hero-verse span{display:block;margin-top:14px;color:var(--gold-300);font-weight:700;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;}

/* ============== SECTIONS ============== */
section{padding:88px 0;}
.section-head{max-width:640px;margin-bottom:48px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-head h2{font-size:clamp(1.7rem,2.6vw,2.3rem);color:var(--navy-900);}
.section-head p{margin-top:14px;font-size:1.02rem;}

.bg-alt{background:var(--cream-100);}
.bg-navy{background:linear-gradient(160deg,var(--navy-900),var(--navy-950));color:#fff;}
.bg-navy p{color:rgba(255,255,255,.72);}
.bg-navy .section-head h2{color:#fff;}

/* Foto de fondo opcional para la sección "Nuestros Pilares" (portada) --
   .bg-navy se queda tal cual para las demás secciones que la usan en todo
   el sitio; esto solo añade una capa encima, con el mismo degradado navy
   como respaldo cuando no hay foto subida (--pilares-fondo sin definir). */
#pilares-portada-section{position:relative;overflow:hidden;--pilares-overlay-opacity:.78;}
#pilares-portada-section::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--pilares-fondo, none);
  background-size:cover;background-position:center;background-attachment:fixed;
}
/* Empieza en un tono parecido al que deja el banner justo antes de la
   costura (no en 0 ni de golpe en el máximo), para que la transición entre
   ambos bloques se sienta continua en vez de un salto de oscuridad. */
#pilares-portada-section::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,
    rgba(6,7,9,calc(var(--pilares-overlay-opacity) * .6)) 0%,
    rgba(6,7,9,var(--pilares-overlay-opacity)) 30%);
  opacity:var(--pilares-fondo-activo, 0);
  pointer-events:none;
}
#pilares-portada-section > .wrap{position:relative;z-index:1;}

/* Doctrine cards */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.doctrine-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:30px;box-shadow:var(--shadow-sm);transition:.2s ease;
}
.doctrine-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.icon-badge{
  width:52px;height:52px;border-radius:14px;
  background:linear-gradient(155deg,var(--navy-800),var(--navy-950));
  border:1px solid rgba(201,162,75,.35);
  box-shadow:0 10px 18px -10px rgba(10,19,48,.45), inset 0 1px 0 rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;margin-bottom:20px;
  transition:transform .25s ease, box-shadow .25s ease;
}
.icon-badge svg{width:26px;height:26px;color:var(--gold-300);}
.doctrine-card:hover .icon-badge,
.dept-card:hover .icon-badge,
.partner-card:hover .icon-badge{
  transform:translateY(-2px) scale(1.05);
  box-shadow:0 14px 22px -10px rgba(10,19,48,.5), inset 0 1px 0 rgba(255,255,255,.14);
}
.doctrine-card h3{font-size:1.15rem;color:var(--navy-900);margin-bottom:10px;}
.doctrine-card .more{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-weight:700;font-size:.85rem;color:var(--gold-600);}

/* Departments -- 6 tarjetas fijas, 3 columnas x 2 filas en desktop (grupo
   Damas/Caballeros/Jóvenes arriba, Escuela Bíblica/Evangelismo/Misiones
   abajo, por orden, sin separador visual) */
.grid-6{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.dept-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);
  padding:22px 16px;text-align:center;transition:.2s ease;
}
.dept-card:hover{border-color:var(--gold-500);transform:translateY(-3px);box-shadow:var(--shadow-sm);}
.dept-card .icon-badge{margin:0 auto 14px;width:46px;height:46px;border-radius:12px;}
.dept-card .icon-badge svg{width:22px;height:22px;}
/* Cuando el ministerio tiene logo subido desde el panel, se cambia el marco
   navy (pensado para trazos dorados) por una tarjeta blanca neutra -- un
   logo real trae sus propios colores y no siempre combina con el navy. */
.dept-card .icon-badge.tiene-logo{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);padding:6px;}
.dept-card .icon-badge img{width:100%;height:100%;object-fit:contain;border-radius:6px;}
.dept-card h4{font-size:.92rem;color:var(--navy-900);margin-bottom:4px;}
.dept-card p{font-size:.8rem;}

/* Stats bar */
.stats-bar{
  display:grid;grid-template-columns:repeat(3,1fr);
  border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-lg);
  overflow:hidden;margin-top:8px;
}
.stat-box{padding:34px 24px;text-align:center;border-left:1px solid rgba(255,255,255,.14);}
.stat-box:first-child{border-left:none;}
.stat-box strong{display:block;font-family:var(--font-display);font-size:2.2rem;color:var(--gold-300);}
.stat-box span{font-size:.82rem;color:rgba(255,255,255,.7);letter-spacing:.04em;text-transform:uppercase;}

/* Event banner */
.event-banner{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  background:linear-gradient(120deg,var(--navy-900),var(--navy-800));
  color:#fff;border-radius:var(--radius-lg);padding:36px 40px;
  border:1px solid rgba(201,162,75,.35);
}
.event-banner .date-pill{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);
  border-radius:12px;padding:10px 16px;font-size:.78rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gold-300);font-weight:700;display:inline-block;margin-bottom:10px;
}
.event-banner h3{font-size:1.5rem;color:#fff;}
.event-banner p{color:rgba(255,255,255,.72);margin-top:6px;max-width:52ch;}

/* Connection grid */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.partner-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);
  padding:26px 22px;text-align:center;
}
.partner-mark{
  width:56px;height:56px;border-radius:50%;margin:0 auto 16px;
  background:var(--cream-100);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);
  font-weight:700;color:var(--navy-800);
}
.partner-card h4{font-size:.98rem;color:var(--navy-900);margin-bottom:8px;}
.partner-card p{font-size:.82rem;margin-bottom:16px;}
.partner-card a{font-size:.82rem;font-weight:700;color:var(--gold-600);}

/* ============== FOOTER ============== */
.site-footer{background:var(--navy-950);color:rgba(255,255,255,.72);padding:64px 0 28px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;}
.footer-brand .brand{color:#fff;}
.footer-brand p{margin-top:16px;color:rgba(255,255,255,.6);max-width:34ch;font-size:.92rem;}
.footer-col h5{color:#fff;font-family:var(--font-body);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px;font-weight:700;}
.footer-col li{margin-bottom:10px;font-size:.9rem;}
.footer-col a:hover{color:var(--gold-300);}
.social-row{display:flex;gap:10px;margin-top:20px;}
.social-row a{
  width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;
}
.social-row a:hover{border-color:var(--gold-500);background:rgba(201,162,75,.12);}
.social-row svg{width:16px;height:16px;}
.footer-bottom{
  margin-top:48px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.82rem;color:rgba(255,255,255,.5);
}

/* ============== PAGE HEADER (subpages) ============== */
.page-hero{
  background:linear-gradient(160deg,var(--navy-900),var(--navy-950));
  color:#fff;padding:64px 0 56px;position:relative;overflow:hidden;
}
.page-hero::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(500px 260px at 90% 0%, rgba(201,162,75,.16), transparent 60%);
}
.breadcrumb{position:relative;font-size:.82rem;color:rgba(255,255,255,.55);margin-bottom:14px;}
.breadcrumb a:hover{color:var(--gold-300);}
.page-hero h1{position:relative;font-size:clamp(2rem,3.4vw,2.7rem);color:#fff;}
.page-hero p{position:relative;color:rgba(255,255,255,.7);margin-top:12px;max-width:60ch;}

/* Foto de fondo opcional para el banner de "Quiénes somos" (#qs-hero) y su
   sección "Nuestros Pilares" (#qs-pilares) -- .page-hero/.bg-navy se dejan
   intactos porque se usan en muchas otras páginas. Mismo mecanismo que el
   banner de Inicio (--hero-fondo/--pilares-fondo): background-attachment:fixed
   para que se vea como un solo lienzo continuo entre las dos secciones
   cuando comparten foto, con las opacidades del overlay en 0 por defecto
   (sin fondo propio no hay nada que oscurecer) y solo el panel las sube. */
#qs-hero{ --qs-hero-overlay-opacity:0; }
#qs-hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--qs-hero-fondo, none);
  background-size:cover;background-position:center;background-attachment:fixed;
}
#qs-hero::after{
  background:
    radial-gradient(500px 260px at 90% 0%, rgba(201,162,75,.16), transparent 60%),
    linear-gradient(180deg, rgba(6,7,9,0) 0%, rgba(6,7,9,calc(var(--qs-hero-overlay-opacity) * .65)) 100%);
}
#qs-hero .breadcrumb, #qs-hero h1, #qs-hero p{position:relative;z-index:1;}

#qs-pilares{position:relative;overflow:hidden;--qs-pilares-overlay-opacity:0;}
#qs-pilares::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--qs-pilares-fondo, none);
  background-size:cover;background-position:center;background-attachment:fixed;
}
#qs-pilares::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,
    rgba(6,7,9,calc(var(--qs-pilares-overlay-opacity) * .6)) 0%,
    rgba(6,7,9,var(--qs-pilares-overlay-opacity)) 30%);
  pointer-events:none;
}
#qs-pilares > .wrap{position:relative;z-index:1;}

/* Fondo opcional con foto para el banner superior (#ministerio-hero) y el
   banner de donación/CTA (#ministerio-cta) de cada página de ministerio --
   .page-hero/.bg-navy quedan intactos porque las usan muchas otras páginas.
   Mismo mecanismo que Inicio/Quiénes somos, pero fijado del lado del
   servidor (plantilla.php ya es PHP, no hace falta hidratar con JS). */
#ministerio-hero{ --ministerio-hero-overlay-opacity:0; }
#ministerio-hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--ministerio-hero-fondo, none);
  background-size:cover;background-position:center;background-attachment:fixed;
}
#ministerio-hero::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(500px 260px at 90% 0%, rgba(201,162,75,.16), transparent 60%),
    linear-gradient(180deg, rgba(6,7,9,0) 0%, rgba(6,7,9,calc(var(--ministerio-hero-overlay-opacity) * .65)) 100%);
}
#ministerio-hero .breadcrumb, #ministerio-hero h1, #ministerio-hero p{position:relative;z-index:1;}

#ministerio-cta{position:relative;overflow:hidden;--ministerio-cta-overlay-opacity:0;}
#ministerio-cta::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--ministerio-cta-fondo, none);
  background-size:cover;background-position:center;background-attachment:fixed;
}
#ministerio-cta::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:rgba(6,7,9,var(--ministerio-cta-overlay-opacity));
  pointer-events:none;
}
#ministerio-cta > .wrap{position:relative;z-index:1;}

/* ============== MISSION/VISION ============== */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.mv-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:34px;
  border-top:3px solid var(--gold-500);
}
.mv-card h3{color:var(--navy-900);margin-bottom:12px;font-size:1.3rem;}

/* Timeline */
.timeline{position:relative;margin-top:24px;padding-left:32px;}
.timeline::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--line);}
.timeline-item{position:relative;padding-bottom:32px;}
.timeline-item:last-child{padding-bottom:0;}
.timeline-item::before{
  content:"";position:absolute;left:-32px;top:4px;width:16px;height:16px;border-radius:50%;
  background:var(--gold-500);border:3px solid var(--cream-50);box-shadow:0 0 0 2px var(--gold-500);
}
.timeline-item .yr{font-family:var(--font-display);font-weight:700;color:var(--navy-900);font-size:1.1rem;}
.timeline-item .placeholder-tag{
  display:inline-block;margin-left:10px;font-size:.68rem;background:var(--cream-100);
  color:var(--ink-500);border:1px dashed var(--line);border-radius:999px;padding:2px 10px;
  text-transform:uppercase;letter-spacing:.04em;font-weight:700;
}
/* Hito con datos ya confirmados: mismo tag, borde sólido dorado en vez de
   punteado gris, para que no se lea como "pendiente" junto a los que sí lo están. */
.timeline-item .placeholder-tag.tag-confirmado{
  background:rgba(201,162,75,.12);color:var(--gold-600);border-style:solid;border-color:var(--gold-500);
}
.timeline-item p{margin-top:6px;}

/* ============== HISTORIA (página completa, /quienes-somos/historia/) ============== */
.historia-block{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:center;
  padding:52px 0;border-bottom:1px solid var(--line);
}
.historia-block:last-of-type{border-bottom:none;}
.historia-block-reverso{grid-template-columns:1.15fr .85fr;}
.historia-block-reverso .historia-media{order:2;}
.historia-media img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);display:block;
}
.historia-anio{
  font-family:var(--font-display);font-weight:700;color:var(--gold-600);
  font-size:.95rem;letter-spacing:.02em;margin-bottom:8px;display:block;
}
.historia-block h3{font-size:1.5rem;color:var(--navy-900);margin-bottom:14px;}
.historia-block p{margin-bottom:1em;}
.historia-block p:last-child{margin-bottom:0;}

/* Foto todavía no disponible -- mismo lenguaje visual que .notice / .empty-state
   (borde punteado, fondo crema) para que se lea como "falta" y no como error. */
.historia-foto-pendiente{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  aspect-ratio:4/3;border:1px dashed var(--line);border-radius:var(--radius-lg);
  background:var(--cream-100);color:var(--ink-500);text-align:center;padding:24px;
}
.historia-foto-pendiente svg{width:30px;height:30px;color:var(--gold-500);}
.historia-foto-pendiente span{font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;}

/* Secuencia de fotos (slide) cuando una sección tiene más de una imagen */
.historia-slider{position:relative;aspect-ratio:4/3;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);background:var(--navy-950);}
.historia-slider-viewport{width:100%;height:100%;overflow:hidden;}
.historia-slider-track{display:flex;height:100%;transition:transform .45s cubic-bezier(.22,.61,.36,1);}
.historia-slider-track img{width:100%;height:100%;object-fit:cover;flex:none;display:block;}
.historia-slider-arrow{
  position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;
  border:none;background:rgba(10,19,48,.55);color:#fff;display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:1.15rem;line-height:1;
}
.historia-slider-arrow:hover{background:rgba(10,19,48,.8);}
.historia-slider-arrow.historia-slider-prev{left:10px;}
.historia-slider-arrow.historia-slider-next{right:10px;}
.historia-slider-dots{position:absolute;bottom:12px;left:0;right:0;display:flex;justify-content:center;gap:6px;}
.historia-slider-dots button{width:7px;height:7px;border-radius:50%;border:none;background:rgba(255,255,255,.55);padding:0;cursor:pointer;transition:.2s ease;}
.historia-slider-dots button.is-active{background:#fff;width:18px;border-radius:4px;}

@media (max-width:820px){
  .historia-block, .historia-block-reverso{grid-template-columns:1fr;gap:22px;padding:36px 0;}
  .historia-block-reverso .historia-media{order:0;}
}

/* Leadership */
.grid-leaders{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.leader-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);
  padding:24px 18px;text-align:center;
}
.leader-avatar{
  width:74px;height:74px;border-radius:50%;margin:0 auto 16px;
  background:linear-gradient(155deg,var(--navy-800),var(--navy-950));
  display:flex;align-items:center;justify-content:center;
  color:var(--gold-300);font-family:var(--font-display);font-weight:700;font-size:1.3rem;
}
.leader-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;}
.leader-card h4{font-size:.95rem;color:var(--navy-900);margin-bottom:4px;}
.leader-card span{font-size:.78rem;color:var(--gold-600);font-weight:700;letter-spacing:.02em;}

/* Pillars */
.grid-4-pill{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.pillar{
  display:block;background:var(--navy-900);color:#fff;border-radius:var(--radius-md);
  padding:26px 20px;text-align:center;border:1px solid transparent;transition:.2s ease;
}
.pillar:hover{border-color:var(--gold-500);transform:translateY(-3px);}
.pillar .icon-badge{margin:0 auto 14px;background:rgba(255,255,255,.08);}
.pillar h4{font-size:.95rem;color:#fff;}
.pillar-image{
  position:relative;isolation:isolate;min-height:178px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;overflow:hidden;background:var(--navy-900);
  background-size:cover;background-position:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}
.pillar-image::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(8,17,42,.25) 0%,rgba(8,17,42,.88) 100%);
  transition:background .25s ease;
}
.pillar-image:hover::before{background:linear-gradient(180deg,rgba(8,17,42,.1) 0%,rgba(8,17,42,.78) 100%);}
.pillar-image .icon-badge{background:rgba(10,19,48,.55);backdrop-filter:blur(4px);}
.pillar-image h4{position:relative;text-shadow:0 2px 12px rgba(0,0,0,.55);}
.pillar-un-solo-dios{background-image:url('../img/doctrina/Jesus.jpg');}
.pillar-bautismo-agua{background-image:url('../img/doctrina/Bautismo.jpg');}
.pillar-espiritu-santo{background-image:url('../img/doctrina/EspirituSanto.jpg');}
.pillar-santidad{background-image:url('../img/doctrina/Santidad.jpg');}

/* Catálogo doctrinal: la selección del día encabeza la biblioteca completa. */
.doctrina-subhead{margin:0 0 24px;max-width:680px;}
.doctrina-subhead h2{font-size:clamp(1.6rem,2.8vw,2.2rem);margin:8px 0 6px;color:var(--navy-900);}
.doctrina-subhead p{margin:0;color:var(--ink-500);}
.doctrina-separador{height:1px;background:var(--line);margin:58px 0 42px;}

/* ============== DIRECTORIO DE IGLESIAS ============== */
.search-bar{
  display:flex;align-items:center;gap:12px;
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:14px 22px;box-shadow:var(--shadow-sm);margin-bottom:36px;
}
.search-bar svg{width:20px;height:20px;color:var(--ink-500);flex:none;}
.search-bar input{
  flex:1;border:none;outline:none;background:transparent;
  font-family:var(--font-body);font-size:1rem;color:var(--ink-900);
}
.search-bar input::placeholder{color:var(--ink-500);}
.results-count{font-size:.85rem;color:var(--ink-500);margin-bottom:20px;}
.results-count strong{color:var(--navy-900);}

.church-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.church-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:26px;box-shadow:var(--shadow-sm);transition:.2s ease;
}
.church-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--gold-500);}
.church-card h4{font-size:1.05rem;color:var(--navy-900);margin-bottom:14px;line-height:1.3;}
.church-meta{display:flex;gap:10px;margin-bottom:10px;align-items:flex-start;font-size:.85rem;color:var(--ink-700);}
.church-meta svg{width:16px;height:16px;color:var(--gold-600);flex:none;margin-top:2px;}
button.church-meta{
  background:none;border:none;padding:0;width:100%;font-family:inherit;cursor:pointer;
}
button.church-meta span{
  text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px;
  color:var(--gold-600);font-weight:600;
}
button.church-meta:hover span{color:var(--gold-500);}
button.church-meta.revelado{cursor:default;}
button.church-meta.revelado span{
  text-decoration:none;color:var(--ink-700);font-weight:400;font-variant-numeric:tabular-nums;
}
.church-card .como-llegar{
  display:inline-flex;align-items:center;gap:6px;margin-top:14px;
  font-size:.8rem;font-weight:700;color:var(--gold-600);
}
.empty-state{
  text-align:center;padding:60px 20px;color:var(--ink-500);
  background:#fff;border:1px dashed var(--line);border-radius:var(--radius-lg);
}

/* ============== PÁGINA DE MINISTERIO (declaración única) ============== */
.ministry-statement{
  max-width:760px;margin:0 auto;text-align:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:56px 48px;box-shadow:var(--shadow-sm);
}
.ministry-statement .icon-badge{margin:0 auto 26px;width:64px;height:64px;border-radius:18px;}
.ministry-statement .icon-badge svg{width:30px;height:30px;}
.ministry-statement p{
  font-family:var(--font-display);font-size:1.35rem;line-height:1.55;
  color:var(--navy-900);font-weight:500;
}
@media (max-width:600px){
  .ministry-statement{padding:36px 24px;}
  .ministry-statement p{font-size:1.15rem;}
}

/* ============== CONTACT PAGE ============== */
.contact-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:start;}
.contact-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:30px;box-shadow:var(--shadow-sm);
}
.contact-list{margin-top:8px;}
.contact-list li{
  display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);align-items:flex-start;
}
.contact-list li:last-child{border-bottom:none;}
.contact-list .icon-badge{width:40px;height:40px;border-radius:10px;flex:none;}
.contact-list .icon-badge svg{width:19px;height:19px;}
.contact-list h5{font-size:.92rem;color:var(--navy-900);margin-bottom:2px;}
.contact-list p{font-size:.9rem;}
.map-frame{
  border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--line);margin-top:20px;
  aspect-ratio:16/10;
}
.map-frame iframe{width:100%;height:100%;border:0;}

.form-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:36px;box-shadow:var(--shadow-sm);
}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.field{margin-bottom:18px;}
.field.full{grid-column:1/-1;}
.field label{display:block;font-size:.82rem;font-weight:700;color:var(--navy-900);margin-bottom:7px;}
.field input, .field select, .field textarea{
  width:100%;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:12px 14px;font-family:var(--font-body);font-size:.94rem;background:var(--cream-50);
  color:var(--ink-900);
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none;border-color:var(--gold-500);box-shadow:0 0 0 3px rgba(201,162,75,.18);
}
.field textarea{resize:vertical;min-height:120px;}

.form-msg{display:none;margin-bottom:18px;padding:12px 14px;border-radius:var(--radius-sm);font-size:.88rem;font-weight:600;}
.form-msg.form-msg-ok{display:block;background:#e3f5e8;color:#1a7a3d;}
.form-msg.form-msg-error{display:block;background:#fde2e2;color:#a33;}

/* Notice / helper banner */
.notice{
  display:flex;gap:12px;align-items:flex-start;background:var(--cream-100);
  border:1px dashed var(--line);border-radius:var(--radius-md);padding:16px 18px;font-size:.85rem;color:var(--ink-500);
  margin-bottom:28px;
}
.notice strong{color:var(--navy-900);}

/* ============== BIENVENIDA PASTORAL ============== */
.welcome-block{
  display:grid;grid-template-columns:.55fr 1fr;gap:48px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:44px;box-shadow:var(--shadow-sm);
}
.welcome-avatar{
  width:100%;aspect-ratio:1/1;border-radius:var(--radius-lg);
  background:linear-gradient(155deg,var(--navy-800),var(--navy-950));
  display:flex;align-items:center;justify-content:center;
  color:var(--gold-300);font-family:var(--font-display);font-weight:700;font-size:3.4rem;
}
.welcome-block blockquote{
  font-family:var(--font-display);font-size:1.3rem;line-height:1.5;color:var(--navy-900);
  margin:0 0 18px;font-weight:500;
}
.welcome-signature{display:flex;align-items:center;gap:12px;margin-top:20px;}
.welcome-signature .line{width:34px;height:2px;background:var(--gold-500);}
.welcome-signature strong{display:block;color:var(--navy-900);font-size:.95rem;}
.welcome-signature span{font-size:.8rem;color:var(--gold-600);font-weight:700;}

/* ============== NOTICIAS / BLOG ============== */
.grid-news{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.news-card{
  display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;transition:.2s ease;
}
.news-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.news-thumb{
  aspect-ratio:16/10;background:linear-gradient(150deg,var(--navy-800),var(--navy-950));
  background-size:cover;background-position:center;
  display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.5);
  font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;text-align:center;padding:16px;
}
.news-body{padding:22px;}
.news-date{font-size:.75rem;color:var(--gold-600);font-weight:700;letter-spacing:.03em;text-transform:uppercase;margin-bottom:8px;display:block;}
.news-body h4{font-size:1.02rem;color:var(--navy-900);margin-bottom:8px;line-height:1.35;}
.news-body p{font-size:.88rem;}

.grid-news-4{grid-template-columns:repeat(4,1fr);}
.archivo-eventos{padding-top:52px;padding-bottom:52px;}
.archivo-eventos-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.archivo-eventos .news-card{display:flex;align-items:center;border-radius:12px;min-height:92px;}
.archivo-eventos .news-thumb{flex:0 0 88px;width:88px;aspect-ratio:1;border-radius:11px 0 0 11px;padding:0;}
.archivo-eventos .news-body{padding:13px 14px;}
.archivo-eventos .news-date{font-size:.68rem;margin-bottom:4px;}
.archivo-eventos .news-body h4{font-size:.9rem;margin:0;}
.doctrina-thumb svg{width:42px;height:42px;color:var(--gold-300);}

/* ============== FEED DE COMUNICACIONES (estilo periodico digital) ============== */
.masthead{text-align:center;padding-bottom:22px;}
.masthead-eyebrow{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-600);font-weight:700;}
.masthead-titulo{
  font-family:var(--font-display);font-weight:700;letter-spacing:-.01em;
  font-size:clamp(2.1rem,4.2vw,3.1rem);color:var(--navy-900);margin:8px 0 6px;
}
.masthead-tagline{font-family:var(--font-body);font-style:italic;color:var(--ink-700);font-size:.95rem;}
.masthead-rule{margin-top:22px;border-top:3px solid var(--navy-900);}
.masthead-rule::after{content:"";display:block;border-top:1px solid var(--navy-900);margin-top:4px;}

.badge-tipo{
  display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;padding:4px 10px;border-radius:20px;margin-bottom:10px;
}
.badge-tipo.articulo{background:var(--cream-100);color:var(--navy-800);}
.badge-tipo.video{background:#fde2e2;color:#a33;}
.badge-tipo.instagram{background:#fbe3ef;color:#a3266b;}
.badge-mini{font-size:.62rem;padding:2px 8px;margin-bottom:6px;}
.post-meta{font-size:.78rem;color:var(--ink-700);opacity:.75;margin-top:10px;}
.post-vacio{text-align:center;color:var(--ink-700);padding:40px 0;}

.post-media{aspect-ratio:4/3;background:var(--navy-950);overflow:hidden;border-radius:var(--radius-md);}
.post-media img{width:100%;height:100%;object-fit:cover;display:block;}
.post-media-video{aspect-ratio:16/9;}
.post-media-video iframe{width:100%;height:100%;border:0;display:block;}
.post-media-instagram{aspect-ratio:auto;min-height:340px;background:#fff;padding:8px;}

.periodico{display:block;}
.nota-principal{
  display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;
  padding-bottom:36px;margin-bottom:36px;border-bottom:1px solid var(--line);
}
.nota-principal h3{
  font-family:var(--font-display);font-weight:700;line-height:1.14;
  font-size:clamp(1.55rem,2.8vw,2.15rem);color:var(--navy-900);margin:8px 0 14px;
}
.nota-principal .deck{font-size:1.05rem;line-height:1.55;color:var(--ink-700);}

.columna-notas{display:grid;grid-template-columns:1fr 1fr;gap:0 44px;}
.nota-lista{display:flex;gap:16px;padding:20px 0;border-bottom:1px solid var(--line);}
.nota-thumb{width:88px;height:88px;flex:none;border-radius:8px;overflow:hidden;background:var(--cream-100);}
.nota-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.nota-thumb-icono{
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:.78rem;letter-spacing:.03em;
  color:var(--navy-800);text-transform:uppercase;text-align:center;
}
.nota-thumb-icono.video{background:#fde2e2;color:#a33;font-size:1.3rem;}
.nota-thumb-icono.instagram{background:#fbe3ef;color:#a3266b;}
.nota-lista h4{
  font-family:var(--font-display);font-weight:600;font-size:1.02rem;line-height:1.28;
  color:var(--navy-900);margin:0 0 6px;
}
.nota-lista p{font-size:.82rem;line-height:1.45;color:var(--ink-700);margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.nota-lista .post-meta{margin-top:7px;}

@media (max-width:820px){
  .nota-principal{grid-template-columns:1fr;gap:20px;}
  .columna-notas{grid-template-columns:1fr;}
}

/* ===== ULTIMA HORA ===== */
.ultima-hora{
  background:var(--navy-950);color:#fff;padding:11px 0;
}
.ultima-hora .wrap{display:flex;align-items:center;gap:10px;font-size:.85rem;}
.ultima-hora .punto{color:#e14747;font-size:.7rem;}
.ultima-hora b{
  font-family:var(--font-mono, inherit);letter-spacing:.06em;text-transform:uppercase;
  font-size:.72rem;color:var(--gold-300);flex:none;
}
.ultima-hora a{color:#fff;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ultima-hora a:hover{color:var(--gold-300);}

/* ===== BUSCADOR DEL PORTAL ===== */
.buscador-portal{display:flex;gap:10px;max-width:420px;margin:22px auto 0;}
.buscador-portal input{
  flex:1;padding:10px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);
  font-family:var(--font-body);font-size:.9rem;background:#fff;color:var(--ink-900);
}
.buscador-portal input:focus{outline:none;border-color:var(--gold-500);}

/* ===== NAV DE CATEGORIAS ===== */
.cat-nav{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:18px;}
.cat-nav a{
  font-size:.78rem;font-weight:600;letter-spacing:.02em;color:var(--ink-700);
  padding:6px 13px;border:1px solid var(--line);border-radius:20px;text-decoration:none;
}
.cat-nav a:hover, .cat-nav a.activa{background:var(--navy-900);color:#fff;border-color:var(--navy-900);}

.categoria-tag{
  font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--gold-600);text-decoration:none;
}
.categoria-tag:hover{text-decoration:underline;}
.nota-lista-link{text-decoration:none;color:inherit;display:flex;}

/* ===== PAGINA INDIVIDUAL DE NOTICIA ===== */
.wrap-lectura{max-width:700px;padding-top:44px;padding-bottom:60px;}
.noticia-breadcrumb{font-size:.8rem;color:var(--ink-700);margin-bottom:18px;}
.noticia-breadcrumb a{color:var(--ink-700);}
.noticia-titulo{
  font-family:var(--font-display);font-weight:700;line-height:1.14;
  font-size:clamp(1.7rem,4vw,2.5rem);color:var(--navy-900);margin:12px 0 14px;text-wrap:balance;
}
.noticia-deck{font-size:1.15rem;color:var(--ink-700);line-height:1.5;margin-bottom:18px;}
.noticia-byline{
  font-size:.85rem;color:var(--ink-700);padding-bottom:22px;margin-bottom:26px;
  border-bottom:1px solid var(--line);
}
.noticia-media{margin-bottom:28px;}
.noticia-cuerpo{font-size:1.06rem;line-height:1.8;color:var(--ink-900);}
.noticia-cuerpo p{margin-bottom:1.2em;}
.noticia-compartir{
  display:flex;align-items:center;gap:14px;margin-top:36px;padding-top:22px;
  border-top:1px solid var(--line);font-size:.85rem;color:var(--ink-700);
}
.noticia-compartir a{color:var(--navy-900);font-weight:600;text-decoration:none;}
.noticia-compartir a:hover{color:var(--gold-600);}
.noticia-relacionadas{margin-top:48px;padding-top:32px;border-top:1px solid var(--line);}
.noticia-relacionadas h2{font-family:var(--font-display);font-size:1.3rem;color:var(--navy-900);margin-bottom:18px;}
.noticia-volver{margin-top:40px;}
.noticia-volver a{color:var(--ink-700);font-size:.9rem;text-decoration:none;}
.noticia-volver a:hover{color:var(--navy-900);}

/* Opinion: tratamiento tipo editorial, deck como cita destacada */
.noticia-pullquote{
  font-family:var(--font-display);font-style:italic;font-weight:500;
  font-size:1.3rem;line-height:1.5;color:var(--navy-900);
  border-left:3px solid var(--gold-500);padding-left:20px;margin:18px 0;
}
.noticia-opinion .noticia-cuerpo{font-family:var(--font-display);font-size:1.12rem;}

/* Entrevistas: identificacion del entrevistado */
.noticia-entrevistado{
  display:flex;align-items:center;gap:14px;background:var(--cream-100);
  border-radius:var(--radius-sm);padding:14px 18px;margin-bottom:24px;
}
.entrevista-icono{
  font-family:var(--font-display);font-size:2.2rem;line-height:1;color:var(--gold-500);flex:none;
}
.noticia-entrevistado strong{display:block;color:var(--navy-900);font-size:.98rem;}
.noticia-entrevistado span{display:block;font-size:.82rem;color:var(--ink-700);margin-top:2px;}

/* Galeria de fotos */
.noticia-galeria{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin-bottom:28px;
}
.noticia-galeria img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:6px;display:block;}

/* Mas leidas */
.mas-leidas{list-style:none;margin:0;padding:0;}
.mas-leidas li{display:flex;gap:16px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line);}
.mas-leidas li:first-child{padding-top:0;}
.mas-leidas .num{
  font-family:var(--font-display);font-weight:700;font-size:1.6rem;color:var(--gold-500);
  flex:none;width:32px;line-height:1;
}
.mas-leidas a{color:var(--navy-900);text-decoration:none;font-size:.94rem;font-weight:600;line-height:1.35;}
.mas-leidas a:hover{color:var(--gold-600);}
.mas-leidas .categoria-tag{display:block;margin-bottom:4px;}
.mas-leidas-angosta{max-width:640px;margin:0 auto;}
.oculto{display:none;}

/* ============== WHATSAPP QUICK LINK ============== */
.whatsapp-link{
  width:38px;height:38px;border-radius:50%;background:#25D366;color:#fff;
  display:flex;align-items:center;justify-content:center;flex:none;
}
.whatsapp-link svg{width:19px;height:19px;}

/* ============== SCROLL REVEAL ============== */
/* Basado en IntersectionObserver (main.js) -- funciona igual en touch/mobile
   que en desktop porque depende de la posicion de scroll, no del mouse. */
.reveal{
  opacity:0;transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
}
.reveal.is-visible{opacity:1;transform:none;}

.stagger > *{
  opacity:0;transform:translateY(22px);
  transition:opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1);
}
.stagger.is-visible > *{opacity:1;transform:none;}
.stagger.is-visible > *:nth-child(1){transition-delay:.03s;}
.stagger.is-visible > *:nth-child(2){transition-delay:.09s;}
.stagger.is-visible > *:nth-child(3){transition-delay:.15s;}
.stagger.is-visible > *:nth-child(4){transition-delay:.21s;}
.stagger.is-visible > *:nth-child(5){transition-delay:.27s;}
.stagger.is-visible > *:nth-child(6){transition-delay:.33s;}
.stagger.is-visible > *:nth-child(7){transition-delay:.39s;}
.stagger.is-visible > *:nth-child(8){transition-delay:.45s;}
.stagger.is-visible > *:nth-child(n+9){transition-delay:.5s;}

@media (prefers-reduced-motion: reduce){
  .reveal, .stagger > *{opacity:1;transform:none;transition:none;}
  .site-header{transition:none;}
  html{scroll-behavior:auto;}
}

/* ============== EVENTOS ============== */
.chip-cat{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:4px 11px;border-radius:20px;color:#fff;margin-right:8px;margin-bottom:10px}
.badge-estado{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:4px 11px;border-radius:20px;margin-bottom:10px;background:#eef0f5;color:#374151}
.badge-estado.estado-abierto{background:#dff5e6;color:#1a7a3d}
.badge-estado.estado-limitado{background:#fdf0d5;color:#93650f}
.badge-estado.estado-cerrado{background:#eef0f5;color:#5a5f6b}
.badge-estado.estado-encurso{background:#dde8fb;color:#1d4ed8}
.badge-estado.estado-finalizado{background:#eef0f5;color:#6B7280}
.badge-estado.estado-cancelado{background:#fde2e2;color:#a33}
.badge-estado.estado-proximamente{background:rgba(201,162,75,.16);color:var(--gold-600)}
.bg-navy .badge-estado.estado-proximamente{background:rgba(230,205,148,.18);color:var(--gold-300)}

/* Hero de portada (evento destacado) */
.evento-hero{position:relative;overflow:hidden;background:var(--navy-950) center/cover no-repeat;color:#fff;padding:100px 0 90px}
.evento-hero-overlay{position:absolute;inset:0;background:linear-gradient(160deg,rgba(10,19,48,.94) 0%,rgba(16,28,66,.8) 45%,rgba(10,19,48,.96) 100%)}
.evento-hero-inner{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:center}
.evento-hero-texto h1{color:#fff;font-size:clamp(2rem,3.6vw,3rem);margin:10px 0 14px}
.evento-hero-meta{display:flex;gap:20px;flex-wrap:wrap;margin-top:18px;font-size:.92rem;color:rgba(255,255,255,.82)}
.evento-hero-video{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:16/10;box-shadow:var(--shadow-md)}
.evento-hero-video img{width:100%;height:100%;object-fit:cover}
.evento-play{position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.92);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s ease}
.evento-play:hover{transform:scale(1.08)}
.evento-play svg{width:26px;height:26px;color:var(--navy-900);margin-left:3px}

/* Hero de pagina individual */
.evento-detalle-hero{position:relative;overflow:hidden;background:var(--navy-950) center/cover no-repeat;color:#fff;padding:56px 0 64px}
.evento-detalle-hero .wrap{position:relative}

/* Grid asimetrico de "Proximos eventos" */
.eventos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.evento-card{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;transition:.2s ease}
.evento-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.evento-card-grande{grid-column:span 2;display:grid;grid-template-columns:1.1fr .9fr}
.evento-card-grande .evento-card-img{aspect-ratio:auto;height:100%;min-height:260px}
.evento-card-img{position:relative;aspect-ratio:4/3;background:linear-gradient(150deg,var(--navy-800),var(--navy-950)) center/cover}
.evento-fecha-pill{position:absolute;top:14px;left:14px;background:#fff;border-radius:10px;padding:6px 12px;text-align:center;box-shadow:var(--shadow-sm)}
.evento-fecha-pill strong{display:block;font-family:var(--font-display);font-size:1.15rem;color:var(--navy-900);line-height:1}
.evento-fecha-pill span{font-size:.62rem;text-transform:uppercase;letter-spacing:.04em;color:var(--gold-600);font-weight:700}
.evento-card-img .badge-estado{position:absolute;top:14px;right:14px;margin:0}
.evento-card-body{padding:22px}
.evento-card-body h3{font-size:1.1rem;color:var(--navy-900);margin:2px 0 8px}
.evento-card-body p{font-size:.9rem}
.evento-card-lugar{margin-top:12px;font-size:.82rem;color:var(--ink-500)}

/* Cuenta regresiva */
.evento-countdown{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap}
.cd-bloque{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:12px 18px;text-align:center;min-width:70px}
.cd-bloque strong{display:block;font-family:var(--font-display);font-size:1.5rem;color:var(--gold-300);font-variant-numeric:tabular-nums}
.cd-bloque span{font-size:.65rem;text-transform:uppercase;letter-spacing:.05em;color:rgba(255,255,255,.65)}

/* Video promocional (seccion, no hero) */
.evento-video-wrap{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:16/9;box-shadow:var(--shadow-md)}
.evento-video-wrap img{width:100%;height:100%;object-fit:cover}

/* Galeria con lightbox */
.evento-galeria-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.evento-galeria-item{padding:0;border:none;background:none;cursor:pointer;border-radius:10px;overflow:hidden;aspect-ratio:1/1}
.evento-galeria-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.evento-galeria-item:hover img{transform:scale(1.06)}
.evento-lightbox{position:fixed;inset:0;background:rgba(10,19,48,.95);display:flex;align-items:center;justify-content:center;z-index:200;padding:24px}
.evento-lightbox img{max-width:92vw;max-height:82vh;border-radius:8px}
.evento-lightbox figcaption{color:#fff;text-align:center;margin-top:12px;font-size:.9rem}
.evento-lightbox-cerrar{position:absolute;top:20px;right:24px;background:none;border:none;color:#fff;font-size:2rem;line-height:1;cursor:pointer}

/* Compartir */
.evento-compartir-botones{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.evento-compartir-botones a, .evento-compartir-botones button{font-family:var(--font-body);font-size:.85rem;font-weight:600;padding:10px 18px;border-radius:999px;border:1px solid var(--line);cursor:pointer;background:#fff;color:var(--ink-700)}
.compartir-whatsapp{border-color:#25D366!important;color:#128c46!important}
.compartir-facebook{border-color:#1877F2!important;color:#1456b8!important}

@media (max-width:1024px){
  .eventos-grid{grid-template-columns:repeat(2,1fr)}
  .evento-card-grande{grid-column:span 2}
  .evento-galeria-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:820px){
  .evento-hero-inner{grid-template-columns:1fr}
  .eventos-grid{grid-template-columns:1fr}
  .evento-card-grande{grid-column:span 1;grid-template-columns:1fr}
  .evento-card-grande .evento-card-img{min-height:200px}
  .evento-galeria-grid{grid-template-columns:repeat(2,1fr)}
}

/* ============== RESPONSIVE ============== */
@media (max-width:1024px){
  .grid-6{grid-template-columns:repeat(3,1fr);}
  .grid-4, .grid-4-pill, .grid-leaders, .grid-news-4, .archivo-eventos-grid{grid-template-columns:repeat(2,1fr);}
  .hero-inner{grid-template-columns:1fr;}
  .contact-layout{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .church-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:820px){
  /* El panel se abre como una capa de aplicación, no como parte del flujo
     del encabezado. Esto evita que hero, carruseles o animaciones lo tapen. */
  .site-header{isolation:isolate;z-index:2147483646;}
  main,.site-footer{position:relative;z-index:0;}
  .nav-toggle{display:block;}
  .main-nav{
    position:fixed;top:64px;right:14px;left:auto;background:var(--cream-50);
    z-index:2147483647;flex-direction:column;align-items:stretch;padding:10px;
    border-radius:16px;min-width:220px;width:max-content;max-width:calc(100vw - 28px);
    max-height:calc(100vh - 78px);overflow-y:auto;overflow-x:hidden;
    box-shadow:0 20px 45px -18px rgba(10,19,48,.4),0 2px 8px rgba(10,19,48,.08);
    transform-origin:top right;transform:translateY(-8px) scale(.98);opacity:0;transition:.18s ease;
    visibility:hidden;pointer-events:none;
  }
  .main-nav.open{transform:translateY(0) scale(1);opacity:1;visibility:visible;pointer-events:auto;}
  .main-nav > ul{flex-direction:column;align-items:stretch;gap:10px;}
  .dropdown{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;display:none;margin-top:4px;}
  .has-dropdown.open .dropdown{display:block;}
  .header-actions .btn-gold{display:none;}
  .grid-3, .grid-2, .grid-6, .grid-news, .archivo-eventos-grid, .church-grid{grid-template-columns:1fr;}
  .search-bar{border-radius:var(--radius-md);}
  .grid-4, .grid-4-pill, .grid-leaders{grid-template-columns:1fr 1fr;}
  .form-grid{grid-template-columns:1fr;}
  .stats-bar{grid-template-columns:1fr;}
  .stat-box{border-left:none;border-top:1px solid rgba(255,255,255,.14);}
  .stat-box:first-child{border-top:none;}
  .event-banner{flex-direction:column;align-items:flex-start;}
  .welcome-block{grid-template-columns:1fr;padding:28px;}
  .welcome-avatar{max-width:180px;margin:0 auto;}

  /* Lectura móvil: tarjetas más ligeras, sin perder el acceso al detalle. */
  section{padding:58px 0;}
  .wrap{padding-left:18px;padding-right:18px;}
  .section-head{margin-bottom:30px;}
  .section-head p{font-size:.94rem;}
  .doctrine-card{padding:20px 18px;}
  .doctrine-card .icon-badge{width:42px;height:42px;margin-bottom:13px;}
  .doctrine-card .icon-badge svg{width:21px;height:21px;}
  .doctrine-card h3{font-size:1rem;margin-bottom:7px;}
  .doctrine-card p,
  .news-card .news-body p,
  .partner-card p{
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
  }
  .doctrine-card .more{margin-top:11px;font-size:.8rem;}
  .news-body{padding:17px;}
  .evento-card-body{padding:17px;}
  .evento-card-body h3{font-size:1.02rem;}
  .evento-card-body p{
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
  }
  .evento-card-lugar{margin-top:8px;font-size:.78rem;}
  .hero{padding:62px 0 72px;}
  .hero-stats{gap:18px;margin-top:30px;}
  .hero-verse{padding:24px;}
  .site-footer{padding:38px 0 18px;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px 20px;}
  .footer-brand{grid-column:1 / -1;}
  .footer-brand p{font-size:.84rem;line-height:1.5;margin-top:12px;max-width:38ch;}
  .footer-col h5{margin-bottom:10px;font-size:.75rem;}
  .footer-col li{font-size:.82rem;margin-bottom:7px;}
  .footer-grid .footer-col:last-child{display:none;}
  .footer-bottom{margin-top:28px;padding-top:16px;font-size:.74rem;}
}

@media (max-width:420px){
  .header-inner{padding-left:16px;padding-right:16px;gap:10px;}
  .staff-link{padding:7px 10px;font-size:.7rem;}
  .grid-4, .grid-4-pill, .grid-leaders{gap:12px;}
  .doctrine-card{padding:17px 14px;}
  .doctrine-card p{-webkit-line-clamp:2;font-size:.84rem;line-height:1.45;}
  .doctrine-card .more{font-size:.76rem;}
  .footer-grid{gap:24px 16px;}
}