/* =========================================================
   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;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink-900);
  background:var(--cream-50);
  -webkit-font-smoothing:antialiased;
}
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;}

/* ============== HEADER ============== */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(250,247,240,.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  box-shadow:0 0 0 rgba(10,19,48,0);
  transition:box-shadow .3s ease, background .3s ease;
}
.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:var(--navy-900);color:#fff;}
.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;
}
/* Foto de fondo, desaturada y oscurecida para integrarse a la paleta navy/dorado
   (la foto original trae tonos rosa/azul de neon que chocan crudos con la marca) */
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:url('../img/hero-bg.jpg');
  background-size:cover;background-position:center 35%;
  filter:saturate(.4) brightness(.65) contrast(1.05);
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(160deg, rgba(10,19,48,.93) 0%, rgba(16,28,66,.72) 45%, rgba(10,19,48,.95) 100%),
    radial-gradient(600px 300px at 85% 20%, rgba(201,162,75,.22), transparent 60%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.025) 0 2px, transparent 2px 40px);
  pointer-events:none;
}
.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;}
.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;}
.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;}

/* 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 */
.grid-6{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,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;}
.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;}

/* ============== 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;
}
.timeline-item p{margin-top:6px;}

/* 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-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{
  background:var(--navy-900);color:#fff;border-radius:var(--radius-md);
  padding:26px 20px;text-align:center;
}
.pillar .icon-badge{margin:0 auto 14px;background:rgba(255,255,255,.08);}
.pillar h4{font-size:.95rem;color:#fff;}

/* ============== 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;}

/* 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{
  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;}

/* ============== 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);}

/* ============== 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;}
}

/* ============== RESPONSIVE ============== */
@media (max-width:1024px){
  .grid-6{grid-template-columns:repeat(3,1fr);}
  .grid-4, .grid-4-pill, .grid-leaders{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){
  .nav-toggle{display:block;}
  .main-nav{
    position:fixed;inset:64px 0 0 0;background:var(--cream-50);
    flex-direction:column;align-items:stretch;padding:20px;transform:translateX(100%);
    transition:.25s ease;overflow-y:auto;
  }
  .main-nav.open{transform:translateX(0);}
  .main-nav > ul{flex-direction:column;align-items:stretch;gap:4px;}
  .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, .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;}
}