/* ============================================================
   IGLESIA SION · MANANTIAL DE VIDA
   Sistema visual — paleta de marca, tipografía y componentes
   ============================================================ */

/* ---------- Tipografía ---------- */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..600&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

/* ---------- Tokens ---------- */
:root{
  /* Marca */
  --ink:    #0F132E;   /* azul casi negro */
  --navy:   #19274E;   /* primario */
  --slate:  #536D88;   /* secundario */
  --taupe:  #B49B85;   /* arena cálida */
  --sand:   #EAC195;   /* dorado arena — CTA */
  --sand-deep:#dca96b;
  --sand-soft:#f6e6cd;

  /* Tipografía */
  --serif: 'Lora', Georgia, 'Times New Roman', serif;
  --sans:  'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --mono:  ui-monospace, 'SFMono-Regular', 'Menlo', monospace;

  /* Tema CLARO (por defecto) */
  --bg:        #FBF8F3;
  --bg-alt:    #F3EADC;
  --bg-band:   #EFE4D3;
  --surface:   #ffffff;
  --surface-2: #FBF8F3;
  --text:      #222a44;
  --text-soft: #54607a;
  --heading:   #19274E;
  --eyebrow:   #8a7253;
  --border:    color-mix(in srgb, var(--taupe) 42%, transparent);
  --border-strong: color-mix(in srgb, var(--taupe) 70%, transparent);
  --shadow-color: 24 39 78;

  /* Forma */
  --radius: 20px;
  --radius-sm: 12px;
  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 64px);

  --nav-h: 76px;
}

/* Tema OSCURO */
[data-theme="oscuro"]{
  --bg:        #0F132E;
  --bg-alt:    #141B3C;
  --bg-band:   #19274E;
  --surface:   #1a2447;
  --surface-2: #141B3C;
  --text:      #e9e4d8;
  --text-soft: #aab6cd;
  --heading:   #ffffff;
  --eyebrow:   var(--sand);
  --border:    color-mix(in srgb, #ffffff 13%, transparent);
  --border-strong: color-mix(in srgb, #ffffff 22%, transparent);
  --shadow-color: 0 0 0;
}

/* Radio variable */
[data-corners="suaves"]{ --radius:20px; --radius-sm:12px; }
[data-corners="redondas"]{ --radius:34px; --radius-sm:20px; }
[data-corners="rectas"]{ --radius:4px; --radius-sm:3px; }

/* ---------- Reset ---------- */
*{ box-sizing:border-box; margin:0; }
html{ scroll-behavior:smooth; scroll-padding-top: calc(var(--nav-h) + 12px); -webkit-text-size-adjust:100%; }
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--text);
  line-height:1.65;
  font-size: clamp(16px, 1.05rem, 18px);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition: background .5s ease, color .5s ease;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; border:none; background:none; color:inherit; }
::selection{ background:var(--sand); color:var(--navy); }

/* ---------- Tipografía base ---------- */
h1,h2,h3,h4{ font-family:var(--serif); color:var(--heading); line-height:1.12; font-weight:600; letter-spacing:-.01em; }
.eyebrow{
  font-family:var(--sans); font-weight:700; font-size:.78rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--eyebrow);
  display:inline-flex; align-items:center; gap:.6em;
}
.eyebrow::before{
  content:""; width:26px; height:2px; background:currentColor; opacity:.7; border-radius:2px;
}
.eyebrow.center::after{
  content:""; width:26px; height:2px; background:currentColor; opacity:.7; border-radius:2px;
}
.lead{ font-size:clamp(1.08rem, 1.2rem, 1.25rem); color:var(--text-soft); line-height:1.7; }

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block: clamp(64px, 9vw, 120px); position:relative; }
.section--band{ background:var(--bg-alt); }
.section--ink{ background:var(--ink); color:var(--text); }
.section--ink h1,.section--ink h2,.section--ink h3{ color:#fff; }
.section-head{ max-width:680px; margin-bottom: clamp(36px, 5vw, 60px); }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head h2{ font-size:clamp(2rem, 4.4vw, 3.1rem); margin-top:.5rem; text-wrap:balance; }
.section-head p{ margin-top:1.1rem; }

/* utilidades */
.center{ text-align:center; }
.muted{ color:var(--text-soft); }
.stack > * + *{ margin-top:1rem; }

/* ============================================================
   BOTONES
   ============================================================ */
.btn{
  --bg-btn:var(--navy); --fg-btn:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--sans); font-weight:700; font-size:1rem;
  padding:.95em 1.7em; border-radius:999px;
  background:var(--bg-btn); color:var(--fg-btn);
  border:1.5px solid transparent;
  transition: transform .18s ease, box-shadow .25s ease, background .25s ease, color .2s ease;
  white-space:nowrap; line-height:1;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn .ico{ width:1.1em; height:1.1em; }

.btn--cta{ --bg-btn:var(--sand); --fg-btn:var(--navy);
  box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--sand-deep) 90%, transparent); }
.btn--cta:hover{ --bg-btn:var(--sand-deep); box-shadow:0 16px 30px -12px color-mix(in srgb, var(--sand-deep) 95%, transparent); }

.btn--navy{ --bg-btn:var(--navy); --fg-btn:#fff; }
.btn--navy:hover{ --bg-btn:#22326a; }

.btn--ghost{ --bg-btn:transparent; --fg-btn:var(--heading);
  border-color:var(--border-strong); }
.btn--ghost:hover{ --bg-btn:color-mix(in srgb, var(--taupe) 14%, transparent); }

.btn--light{ --bg-btn:#fff; --fg-btn:var(--navy); }
.btn--lg{ padding:1.1em 2em; font-size:1.05rem; }
.btn--block{ width:100%; }

/* ============================================================
   TARJETAS — con variantes (data-cards)
   ============================================================ */
.card{
  background:var(--surface);
  border-radius:var(--radius);
  padding: clamp(22px, 3vw, 34px);
  position:relative;
  transition: transform .22s ease, box-shadow .25s ease, border-color .2s ease;
  height:100%;
}
.card h3{ font-size:1.4rem; }
.card p{ color:var(--text-soft); margin-top:.5rem; }

/* variante: suave (sombra) */
[data-cards="suave"] .card{
  border:1px solid color-mix(in srgb, var(--border) 60%, transparent);
  box-shadow: 0 18px 40px -28px rgb(var(--shadow-color) / .45);
}
[data-cards="suave"] .card:hover{ transform:translateY(-5px); box-shadow:0 26px 50px -26px rgb(var(--shadow-color) / .5); }

/* variante: contorno (plano, borde marcado) */
[data-cards="contorno"] .card{
  border:1.5px solid var(--border-strong);
  box-shadow:none;
}
[data-cards="contorno"] .card:hover{ border-color:var(--slate); transform:translateY(-3px); }

/* variante: elevado (acento superior + sombra fuerte) */
[data-cards="elevado"] .card{
  border:1px solid transparent;
  box-shadow: 0 26px 55px -30px rgb(var(--shadow-color) / .6);
  overflow:hidden;
}
[data-cards="elevado"] .card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:5px;
  background:linear-gradient(90deg, var(--sand), var(--taupe));
}
[data-cards="elevado"] .card:hover{ transform:translateY(-6px); box-shadow:0 36px 70px -30px rgb(var(--shadow-color) / .7); }

.card-ico{
  width:54px; height:54px; border-radius:14px;
  display:grid; place-items:center; margin-bottom:18px;
  background:color-mix(in srgb, var(--sand) 30%, var(--surface));
  color:var(--navy);
  border:1px solid color-mix(in srgb, var(--sand-deep) 35%, transparent);
}
[data-theme="oscuro"] .card-ico{ background:color-mix(in srgb, var(--sand) 22%, transparent); color:var(--sand); }
.card-ico svg{ width:26px; height:26px; }

/* ============================================================
   PLACEHOLDERS de imagen
   ============================================================ */
.ph{
  position:relative; overflow:hidden;
  background:
    repeating-linear-gradient(135deg,
      color-mix(in srgb, var(--taupe) 20%, var(--surface)) 0 16px,
      color-mix(in srgb, var(--taupe) 10%, var(--surface)) 16px 32px);
  border:1px solid var(--border);
  border-radius:var(--radius);
  display:grid; place-items:center;
  min-height:160px;
}
.ph::after{
  content:attr(data-label);
  font-family:var(--mono); font-size:.74rem; letter-spacing:.03em;
  text-transform:uppercase; color:var(--slate);
  background:color-mix(in srgb, var(--surface) 78%, transparent);
  padding:.55em .9em; border-radius:999px;
  border:1px solid var(--border);
  max-width:84%; text-align:center; line-height:1.35;
}
.ph--round{ border-radius:999px; }
.ph--cover{ position:absolute; inset:0; border-radius:0; border:none; }

/* ============================================================
   NAVBAR
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:var(--nav-h);
  display:flex; align-items:center;
  transition: background .35s ease, box-shadow .35s ease, backdrop-filter .35s;
}
.nav .wrap{ display:flex; align-items:center; gap:1.2rem; width:100%; }
.nav-logo{ display:flex; align-items:center; gap:.7rem; margin-right:auto; }
.nav-logo img{ height:42px; width:auto; }
.nav-logo .lname{ font-family:var(--serif); font-weight:600; line-height:1.05; color:#fff; font-size:1.02rem; }
.nav-logo .lname small{ display:block; font-family:var(--sans); font-weight:600; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--sand); opacity:.95; }
.nav-links{ display:flex; align-items:center; gap:.3rem; }
.nav-links a{
  font-weight:600; font-size:.95rem; color:#eef1f7; white-space:nowrap;
  padding:.55em .7em; border-radius:999px; position:relative;
  transition: background .2s, color .2s;
}
.nav-links a:hover{ background:rgba(255,255,255,.12); }
.nav-links a.active{ color:var(--sand); }
.nav-cta{ margin-left:.5rem; }
.nav-burger{ display:none; }

/* nav: solida (siempre navy) */
[data-nav="solida"] .nav{ background:var(--navy); box-shadow:0 1px 0 rgba(255,255,255,.06); }

/* nav: transparente (sobre hero, se llena al hacer scroll) */
[data-nav="transparente"] .nav{ background:transparent; }
/* si el hero NO es oscuro (sereno/dividido), el navbar transparente se vuelve sólido para legibilidad */
[data-nav="transparente"] body:not(.hero-dark) .nav:not(.scrolled){ background:var(--navy); }
[data-theme="oscuro"][data-nav="transparente"] body:not(.hero-dark) .nav:not(.scrolled){ background:#0c1027; }
[data-nav="transparente"] .nav.scrolled{
  background:color-mix(in srgb, var(--navy) 94%, transparent);
  backdrop-filter:blur(10px);
  box-shadow:0 10px 30px -18px rgba(0,0,0,.6);
}
/* en tema oscuro el navbar solido usa ink */
[data-theme="oscuro"][data-nav="solida"] .nav{ background:#0c1027; }

.nav-burger{
  width:46px; height:46px; border-radius:12px; display:none;
  align-items:center; justify-content:center;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
}
.nav-burger span{ position:relative; width:20px; height:2px; background:#fff; border-radius:2px; transition:.25s; }
.nav-burger span::before,.nav-burger span::after{ content:""; position:absolute; left:0; width:20px; height:2px; background:#fff; border-radius:2px; transition:.25s; }
.nav-burger span::before{ top:-6px; }
.nav-burger span::after{ top:6px; }
body.menu-open .nav-burger span{ background:transparent; }
body.menu-open .nav-burger span::before{ top:0; transform:rotate(45deg); }
body.menu-open .nav-burger span::after{ top:0; transform:rotate(-45deg); }

/* ---------- Menú móvil ---------- */
.mobile-menu{
  position:fixed; z-index:99; inset:0 0 0 auto;
  width:min(380px, 86vw);
  background:var(--navy);
  transform:translateX(100%);
  transition: transform .4s cubic-bezier(.4,0,.1,1);
  display:flex; flex-direction:column;
  padding: calc(var(--nav-h) + 24px) 32px 32px;
  box-shadow:-30px 0 60px -30px rgba(0,0,0,.6);
  overflow-y:auto;
}
.mobile-menu a{ color:#eef1f7; font-family:var(--serif); font-size:1.5rem; padding:.6rem 0; border-bottom:1px solid rgba(255,255,255,.1); display:flex; align-items:center; justify-content:space-between; }
.mobile-menu a:hover{ color:var(--sand); }
.mobile-menu .mm-cta{ margin-top:24px; }
.mm-meta{ margin-top:auto; padding-top:28px; color:#b9c2d6; font-size:.9rem; }
.mm-meta strong{ color:#fff; }
.menu-backdrop{ position:fixed; inset:0; z-index:98; background:rgba(8,11,28,.5); opacity:0; visibility:hidden; transition:.35s; backdrop-filter:blur(2px); }
body.menu-open .mobile-menu{ transform:translateX(0); }
body.menu-open .menu-backdrop{ opacity:1; visibility:visible; }

/* menú: pantalla completa */
[data-menu="completa"] .mobile-menu{ width:100%; align-items:center; justify-content:center; text-align:center; padding-top:var(--nav-h); }
[data-menu="completa"] .mobile-menu nav{ display:flex; flex-direction:column; gap:.2rem; width:100%; max-width:340px; }
[data-menu="completa"] .mobile-menu a{ font-size:1.9rem; justify-content:center; border-bottom:none; }
[data-menu="completa"] .mm-meta{ text-align:center; }

/* ============================================================
   HERO — variantes (data-hero)
   ============================================================ */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:center;
  padding-top: calc(var(--nav-h) + 40px); padding-bottom:64px;
  overflow:visible;
}
.hero-media{ position:absolute; inset:0; z-index:0; background:var(--ink); overflow:hidden; }
.hero-media .ph{ width:100%; height:100%; border-radius:0; border:none;
  background:
    repeating-linear-gradient(135deg,
      color-mix(in srgb, #0F132E 86%, #2c3a66) 0 18px,
      color-mix(in srgb, #0F132E 94%, #1d2c57) 18px 36px); }
.hero-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 38%; }
.hero-media .ph::after{
  color:#cdd6e8; background:rgba(15,19,46,.55); border-color:rgba(255,255,255,.18);
}
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(15,19,46,.50) 0%, rgba(15,19,46,.30) 38%, rgba(15,19,46,.88) 100%),
    linear-gradient(90deg, rgba(15,19,46,.78), rgba(15,19,46,.18));
}
.hero-inner{ position:relative; z-index:2; max-width:680px; }
.hero .eyebrow{ color:var(--sand); }
.hero h1{
  color:#fff; font-size:clamp(2.5rem, 6.2vw, 4.6rem); line-height:1.04;
  margin:.6rem 0 0; text-wrap:balance;
}
.hero .sub{
  font-family:var(--serif); font-style:italic; font-weight:500;
  color:var(--sand); font-size:clamp(1.3rem, 2.6vw, 1.9rem);
  margin-top:1rem;
}
.hero .desc{ color:#e7ebf3; font-size:clamp(1.05rem,1.2rem,1.2rem); margin-top:1.2rem; max-width:560px; line-height:1.7; }
.hero-verse{ margin-top:1.3rem; max-width:560px; padding-left:18px; border-left:3px solid var(--sand); font-family:var(--serif); font-style:italic; font-size:clamp(1rem,1.5vw,1.18rem); line-height:1.6; color:#f1ece1; }
.hero-verse cite{ display:block; font-style:normal; font-family:var(--sans); font-weight:700; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--sand); margin-top:.6rem; }
[data-hero="dividido"] .hero-verse, [data-hero="sereno"] .hero-verse{ color:var(--text); }
[data-hero="dividido"] .hero-verse cite, [data-hero="sereno"] .hero-verse cite{ color:var(--eyebrow); }
[data-hero="sereno"] .hero-verse{ margin-inline:auto; text-align:left; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:2rem; }
@keyframes scrolly{ 0%{opacity:0; transform:translate(-50%,0);} 40%{opacity:1;} 80%{opacity:0; transform:translate(-50%,10px);} }

/* hero: split (foto a un lado) */
[data-hero="dividido"] .hero{ min-height:92svh; background:var(--bg); }
[data-hero="dividido"] .hero-media{ left:auto; width:44%; }
[data-hero="dividido"] .hero-media::after{ background:linear-gradient(90deg, var(--bg) 0%, rgba(15,19,46,0) 26%); }
[data-hero="dividido"] .hero-inner{ width:52%; max-width:600px; padding-right:28px; }
[data-hero="dividido"] .hero .eyebrow{ color:var(--eyebrow); }
[data-hero="dividido"] .hero h1{ color:var(--heading); font-size:clamp(2.2rem, 3.8vw, 3.5rem); }
[data-hero="dividido"] .hero .desc{ color:var(--text-soft); }

/* hero: minimal (sin foto, fondo degradado + marca grande) */
[data-hero="sereno"] .hero{
  min-height:94svh;
  background:
    radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--sand) 30%, var(--bg)) 0%, var(--bg) 55%),
    var(--bg);
  text-align:center; justify-content:center;
}
[data-hero="sereno"] .hero-media{ display:none; }
[data-hero="sereno"] .hero-photo{ display:none; }
[data-hero="sereno"] .hero-inner{ max-width:820px; margin-inline:auto; }
[data-hero="sereno"] .hero .eyebrow{ color:var(--eyebrow); }
[data-hero="sereno"] .hero h1{ color:var(--heading); }
[data-hero="sereno"] .hero .desc{ color:var(--text-soft); margin-inline:auto; }
[data-hero="sereno"] .hero-actions{ justify-content:center; }
[data-hero="sereno"] .hero-watermark{ display:block; }
.hero-watermark{ display:none; position:absolute; bottom:-4%; left:50%; transform:translateX(-50%); width:min(900px,120%); opacity:.1; z-index:0; pointer-events:none; }

/* ============================================================
   BANDA "ACOMPÁÑANOS" — horario destacado
   ============================================================ */
.acomp{
  position:relative; z-index:5; margin-top: -70px;
}
.acomp-card{
  background:var(--navy); color:#fff; border-radius:var(--radius);
  box-shadow:0 40px 80px -40px rgba(8,11,28,.8);
  display:grid; grid-template-columns: 1.2fr 1fr auto; gap:0;
  overflow:hidden; border:1px solid rgba(255,255,255,.08);
}
.acomp-card > div{ padding: clamp(24px,3vw,38px); display:flex; flex-direction:column; gap:.35rem; }
.acomp-card > div + div{ border-left:1px solid rgba(255,255,255,.12); }
.acomp-k{ font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--sand); font-weight:700; }
.acomp-v{ font-family:var(--serif); font-size:1.55rem; color:#fff; line-height:1.15; }
.acomp-s{ color:#c3ccde; font-size:.95rem; }
.acomp-cta{ justify-content:center; align-items:flex-start; background:rgba(255,255,255,.04); }

/* ============================================================
   GRIDS reutilizables
   ============================================================ */
.grid{ display:grid; gap: clamp(18px, 2.4vw, 28px); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.split{ display:grid; grid-template-columns: 1fr 1fr; gap:clamp(28px,5vw,72px); align-items:center; }

/* lista con check */
.checklist{ list-style:none; padding:0; display:grid; gap:.9rem; }
.checklist li{ display:flex; gap:.8rem; align-items:flex-start; }
.checklist .ck{ flex:0 0 auto; width:26px; height:26px; border-radius:50%; background:color-mix(in srgb,var(--sand) 35%, var(--surface)); color:var(--navy); display:grid; place-items:center; margin-top:2px; }
[data-theme="oscuro"] .checklist .ck{ background:color-mix(in srgb,var(--sand) 25%, transparent); color:var(--sand); }
.checklist .ck svg{ width:14px; height:14px; }
.checklist strong{ color:var(--heading); display:block; }
.checklist span{ color:var(--text-soft); }

/* ============================================================
   VISITA / MAPA
   ============================================================ */
.map-frame{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); min-height:340px; background:var(--bg-band); position:relative; }
.map-frame iframe{ width:100%; height:100%; min-height:340px; border:0; display:block; filter:saturate(.9); }
.info-pill{ display:inline-flex; align-items:center; gap:.6rem; background:var(--surface); border:1px solid var(--border); padding:.7em 1.1em; border-radius:999px; font-weight:600; color:var(--heading); font-size:.95rem; }
.info-pill svg{ width:18px; height:18px; color:var(--slate); }

/* ============================================================
   TRANSMISIONES
   ============================================================ */
.video-frame{ position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:16/9; border:1px solid var(--border); }
.video-frame .ph{ position:absolute; inset:0; border-radius:0; border:none; }
.play-btn{ position:absolute; inset:0; margin:auto; width:84px; height:84px; border-radius:50%; background:var(--sand); color:var(--navy); display:grid; place-items:center; box-shadow:0 16px 40px -12px rgba(0,0,0,.5); transition:.2s; }
.play-btn:hover{ transform:scale(1.07); background:var(--sand-deep); }
.play-btn svg{ width:30px; height:30px; margin-left:4px; }
.live-tag{ position:absolute; top:16px; left:16px; z-index:3; display:flex; align-items:center; gap:.5em; background:#c0392b; color:#fff; font-weight:700; font-size:.72rem; letter-spacing:.12em; padding:.45em .8em; border-radius:999px; white-space:nowrap; }
.live-tag .dot{ width:8px; height:8px; border-radius:50%; background:#fff; animation:pulse 1.4s infinite; }
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.3;} }
.msg-row{ display:flex; gap:16px; align-items:center; padding:16px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface); transition:.2s; }
.msg-row:hover{ border-color:var(--slate); transform:translateX(4px); }
.msg-thumb{ flex:0 0 auto; width:112px; height:68px; border-radius:10px; }
.msg-row .meta{ font-size:.78rem; color:var(--slate); font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.msg-row h4{ font-family:var(--serif); font-size:1.12rem; margin-top:.15rem; }
.msg-row .pr{ font-size:.9rem; color:var(--text-soft); margin-top:.1rem; }
.chip-row{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{ padding:.5em 1em; border-radius:999px; border:1px solid var(--border-strong); font-weight:600; font-size:.9rem; color:var(--heading); transition:.2s; background:var(--surface); }
.chip[aria-pressed="true"]{ background:var(--navy); color:#fff; border-color:var(--navy); }

/* ============================================================
   QUIÉNES SOMOS
   ============================================================ */
.mv-card{ padding:clamp(26px,3vw,40px); border-radius:var(--radius); }
.mv-card.mision h3{ color:#fff; }
.mv-card.vision{ background:var(--bg-band); border:1px solid var(--border); }
.mv-card .mv-ico{ width:48px; height:48px; margin-bottom:16px; color:var(--sand); }
.mv-card.vision .mv-ico{ color:var(--slate); }
.mv-card p{ font-size:1.08rem; line-height:1.7; }
.mv-card.mision p{ color:#dbe2f0; }

/* Misión / Visión — diseño elegante v2 (sin iconos) */
.mv2-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.4vw,28px); }
.mv2{ position:relative; overflow:hidden; border-radius:var(--radius); padding:clamp(32px,4vw,52px); display:flex; flex-direction:column; transition:transform .22s ease, box-shadow .25s ease; }
.mv2:hover{ transform:translateY(-4px); }
.mv2-mark{ position:absolute; top:-.18em; right:.12em; font-family:var(--serif); font-size:11rem; line-height:1; pointer-events:none; user-select:none; }
.mv2-label{ font-family:var(--sans); font-weight:700; font-size:.82rem; letter-spacing:.22em; text-transform:uppercase; position:relative; z-index:1; }
.mv2-rule{ width:54px; height:3px; border-radius:3px; margin:18px 0 22px; position:relative; z-index:1; }
.mv2-text{ font-family:var(--serif); font-size:clamp(1.25rem,1.9vw,1.6rem); line-height:1.5; font-weight:500; position:relative; z-index:1; text-wrap:pretty; }
/* Misión: panel marino profundo */
.mv2-mision{ background:linear-gradient(155deg, #1d2c57 0%, var(--navy) 55%, var(--ink) 100%); box-shadow:0 30px 70px -40px rgba(8,11,28,.85); }
.mv2-mision .mv2-mark{ color:rgba(234,193,149,.16); }
.mv2-mision .mv2-label{ color:var(--sand); }
.mv2-mision .mv2-rule{ background:var(--sand); }
.mv2-mision .mv2-text{ color:#f1ece1; }
/* Visión: panel claro y refinado */
.mv2-vision{ background:var(--surface); border:1px solid var(--border-strong); box-shadow:0 24px 55px -38px rgb(var(--shadow-color) / .55); }
.mv2-vision .mv2-mark{ color:color-mix(in srgb, var(--taupe) 24%, transparent); }
.mv2-vision .mv2-label{ color:var(--eyebrow); }
.mv2-vision .mv2-rule{ background:linear-gradient(90deg, var(--sand-deep), var(--taupe)); }
.mv2-vision .mv2-text{ color:var(--heading); }
[data-theme="oscuro"] .mv2-vision{ background:var(--surface); }

.team-card{ text-align:center; }
.team-card .ph{ aspect-ratio:1; border-radius:var(--radius); margin-bottom:16px; }
.team-card h4{ font-size:1.2rem; }
.team-card .role{ color:var(--eyebrow); font-weight:700; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; margin:.2rem 0 .5rem; }
.team-card p{ font-size:.92rem; color:var(--text-soft); }

/* Valores fundamentales */
.values-grid{ counter-reset:none; }
.value-card{ display:flex; gap:1rem; align-items:flex-start; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:clamp(20px,2.4vw,26px); transition:transform .2s ease, box-shadow .25s ease, border-color .2s; }
.value-card:hover{ transform:translateY(-4px); box-shadow:0 20px 44px -28px rgb(var(--shadow-color) / .5); border-color:color-mix(in srgb,var(--sand-deep) 40%, transparent); }
.value-n{ font-family:var(--serif); font-size:1.7rem; line-height:1; color:var(--sand-deep); font-weight:600; flex:0 0 auto; }
.value-card h4{ font-size:1.18rem; }
.value-card p{ color:var(--text-soft); font-size:.95rem; margin-top:.3rem; }

/* Tarjeta horizontal de pastores */
.pastor-card{ display:grid; grid-template-columns: var(--pastor-w, 300px) 1fr; gap:0; overflow:hidden; padding:0; max-width:920px; margin-inline:auto; }
.pastor-photo.has-photo{ background-size:cover; background-position:center; }
.pastor-photo{ border-radius:0 !important; border:none !important; border-right:1px solid var(--border) !important; min-height:300px; }
.pastor-body{ padding:clamp(28px,3.5vw,42px); display:flex; flex-direction:column; justify-content:center; }
.pastor-body .role{ color:var(--eyebrow); font-weight:700; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; }
.pastor-body h4{ font-size:1.7rem; margin:.35rem 0 .8rem; }
.pastor-body p{ color:var(--text-soft); font-size:1.02rem; line-height:1.7; }

/* Objetivos ministeriales */
.objetivos{ margin-top: clamp(36px,5vw,56px); background:var(--navy); border-radius:var(--radius); padding:clamp(30px,4vw,52px); color:#fff; display:grid; grid-template-columns: 320px 1fr; gap:clamp(24px,4vw,48px); align-items:center; }
[data-theme="oscuro"] .objetivos{ background:#0c1230; }
.objetivos-head h3{ color:#fff; font-size:clamp(1.6rem,3vw,2.1rem); margin-top:.4rem; }
.objetivos-list{ list-style:none; padding:0; margin:0; display:grid; gap:.4rem; }
.objetivos-list li{ display:flex; gap:1rem; align-items:center; padding:.85rem 0; border-bottom:1px solid rgba(255,255,255,.12); font-size:1.08rem; font-weight:500; color:#eef1f7; }
.objetivos-list li:last-child{ border-bottom:none; }
.obj-ico{ flex:0 0 auto; width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:rgba(234,193,149,.16); color:var(--sand); border:1px solid rgba(234,193,149,.28); }
.obj-ico svg{ width:21px; height:21px; }

/* ============================================================
   AFILIACIÓN — ZION FELLOWSHIP
   ============================================================ */
.afil-card{ display:grid; grid-template-columns:300px 1fr; gap:clamp(28px,5vw,64px); align-items:center; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:clamp(30px,4vw,56px); box-shadow:0 24px 60px -40px rgb(var(--shadow-color) / .6); position:relative; overflow:hidden; }
.afil-card::before{ content:""; position:absolute; inset:0 auto 0 0; width:5px; background:linear-gradient(var(--sand), var(--taupe)); }
.afil-logo{ display:grid; place-items:center; }
.afil-logo img{ width:100%; max-width:240px; height:auto; filter:drop-shadow(0 18px 30px rgba(8,11,28,.18)); }
.afil-body .eyebrow{ color:var(--eyebrow); }
.afil-body h2{ font-size:clamp(1.7rem,3.2vw,2.4rem); margin:.5rem 0 .3rem; text-wrap:balance; }
.afil-org{ color:var(--slate); font-size:1rem; margin-bottom:1rem; }
.afil-org strong{ color:var(--heading); }
.afil-desc{ color:var(--text-soft); font-size:1.05rem; line-height:1.7; }
.afil-desc em{ font-style:italic; color:var(--slate); }
.afil-foot{ display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; margin-top:1.8rem; }
.afil-date{ display:inline-flex; align-items:center; gap:.5em; font-size:.92rem; color:var(--text-soft); font-weight:600; }
.afil-date svg{ width:18px; height:18px; color:var(--slate); }
.afil-date strong{ color:var(--heading); }
[data-theme="oscuro"] .afil-logo img{ background:rgba(255,255,255,.96); border-radius:50%; padding:14px; }

.belief{ display:flex; gap:1rem; align-items:flex-start; padding:1.1rem 0; border-top:1px solid var(--border); }
.belief .n{ font-family:var(--serif); font-size:1.4rem; color:var(--sand-deep); font-weight:600; flex:0 0 auto; width:2ch; }
.belief h4{ font-size:1.1rem; }
.belief p{ color:var(--text-soft); font-size:.96rem; margin-top:.25rem; }

/* acordeón declaración de fe */
.faith-accordion{ max-width:880px; margin-inline:auto; display:flex; flex-direction:column; gap:10px; }
.faith{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; transition:border-color .2s, box-shadow .2s; }
.faith[open]{ border-color:var(--border-strong); box-shadow:0 16px 36px -26px rgb(var(--shadow-color) / .5); }
.faith summary{ display:flex; align-items:center; gap:1rem; padding:18px clamp(18px,2.4vw,24px); cursor:pointer; list-style:none; font-family:var(--serif); font-size:clamp(1.05rem,2vw,1.2rem); color:var(--heading); font-weight:600; }
.faith summary::-webkit-details-marker{ display:none; }
.faith summary:hover{ background:var(--surface-2); }
.faith-n{ font-family:var(--serif); font-size:1rem; color:var(--sand-deep); font-weight:700; flex:0 0 auto; width:2.2ch; }
.faith-chev{ margin-left:auto; flex:0 0 auto; width:14px; height:14px; border-right:2px solid var(--slate); border-bottom:2px solid var(--slate); transform:rotate(45deg); transition:transform .25s; }
.faith[open] .faith-chev{ transform:rotate(-135deg); }
.faith p{ padding:0 clamp(18px,2.4vw,24px) 20px calc(2.2ch + 2rem + clamp(18px,2.4vw,24px)); color:var(--text-soft); font-size:.98rem; line-height:1.7; margin-top:-4px; }
@media (max-width:560px){ .faith p{ padding-left:clamp(18px,2.4vw,24px); } }

/* timeline historia */
.timeline{ position:relative; padding-left:30px; }
.timeline::before{ content:""; position:absolute; left:7px; top:6px; bottom:6px; width:2px; background:linear-gradient(var(--sand), var(--taupe)); }
.tl-item{ position:relative; padding-bottom:28px; }
.tl-item::before{ content:""; position:absolute; left:-30px; top:4px; width:16px; height:16px; border-radius:50%; background:var(--sand); border:3px solid var(--bg); }
.tl-item .yr{ font-family:var(--serif); color:var(--slate); font-weight:600; }
.tl-item h4{ font-size:1.15rem; margin:.1rem 0 .3rem; }
.tl-item p{ color:var(--text-soft); font-size:.96rem; }

/* ============================================================
   ORACIÓN / FORM
   ============================================================ */
.form-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:clamp(24px,3.5vw,40px); }
.field{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:1.1rem; }
.field label{ font-weight:600; font-size:.92rem; color:var(--heading); }
.field input,.field textarea,.field select{
  font:inherit; padding:.85em 1em; border-radius:var(--radius-sm);
  border:1.5px solid var(--border-strong); background:var(--surface-2); color:var(--text);
  transition:.2s; width:100%;
}
.field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:var(--slate); box-shadow:0 0 0 4px color-mix(in srgb, var(--slate) 18%, transparent); }
.field textarea{ resize:vertical; min-height:120px; }
.radio-row{ display:flex; gap:10px; flex-wrap:wrap; }
.radio-pill{ flex:1; min-width:120px; }
.radio-pill input{ position:absolute; opacity:0; }
.radio-pill span{ display:block; text-align:center; padding:.8em; border-radius:var(--radius-sm); border:1.5px solid var(--border-strong); font-weight:600; transition:.2s; }
.radio-pill input:checked + span{ background:var(--navy); color:#fff; border-color:var(--navy); }
.form-success{ display:none; text-align:center; padding:1.5rem; }
.form-success.show{ display:block; }
.form-success .ok{ width:64px; height:64px; border-radius:50%; background:color-mix(in srgb,var(--sand) 40%, var(--surface)); color:var(--navy); display:grid; place-items:center; margin:0 auto 16px; }

.step{ display:flex; gap:1rem; align-items:flex-start; }
.step .num{ flex:0 0 auto; width:40px; height:40px; border-radius:50%; background:var(--navy); color:#fff; font-family:var(--serif); font-weight:600; display:grid; place-items:center; font-size:1.1rem; }
.step h4{ font-size:1.1rem; }
.step p{ color:var(--text-soft); font-size:.96rem; margin-top:.2rem; }

/* ============================================================
   GENEROSIDAD
   ============================================================ */
.give-card{ text-align:left; }
.give-card .card-ico{ background:color-mix(in srgb,var(--sand) 32%, var(--surface)); }
.trust{ display:flex; align-items:center; gap:.6rem; color:var(--text-soft); font-size:.9rem; }
.trust svg{ width:18px; height:18px; color:var(--slate); flex:0 0 auto; }

/* ============================================================
   REDES
   ============================================================ */
.feed-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.feed-grid .ph{ aspect-ratio:1; }
.social-row{ display:flex; gap:14px; flex-wrap:wrap; }
.social-btn{ display:inline-flex; align-items:center; gap:.6rem; padding:.8em 1.3em; border-radius:999px; border:1.5px solid var(--border-strong); font-weight:700; background:var(--surface); color:var(--heading); transition:.2s; }
.social-btn:hover{ transform:translateY(-2px); border-color:var(--slate); }
.social-btn svg{ width:20px; height:20px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--ink); color:#c3cad9; padding-block: clamp(56px,7vw,84px) 32px; }
.footer h4{ color:#fff; font-family:var(--sans); font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; margin-bottom:1rem; font-weight:700; }
.footer a{ color:#c3cad9; transition:.2s; }
.footer a:hover{ color:var(--sand); }
.footer-grid{ display:grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: clamp(28px,4vw,56px); }
.footer-logo{ display:flex; align-items:center; gap:.7rem; margin-bottom:1.2rem; }
.footer-logo img{ height:48px; }
.footer-logo .lname{ font-family:var(--serif); color:#fff; font-size:1.1rem; line-height:1.1; }
.footer-logo .lname small{ display:block; font-family:var(--sans); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--sand); }
.footer ul{ list-style:none; padding:0; display:grid; gap:.7rem; font-size:.95rem; }
.foot-social{ display:flex; gap:10px; margin-top:1rem; }
.foot-social a{ width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.15); display:grid; place-items:center; }
.foot-social a:hover{ background:rgba(255,255,255,.08); }
.foot-social svg{ width:18px; height:18px; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); margin-top: clamp(40px,5vw,60px); padding-top:24px; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.85rem; color:#8b95ab; }

/* ============================================================
   SERVICIOS
   ============================================================ */
/* Tarjetas de servicios */
.services-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,22px); align-items:stretch; }
.service-card{ position:relative; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:clamp(24px,2.6vw,32px); padding-top:clamp(28px,3vw,38px); overflow:hidden; box-shadow:0 18px 44px -28px rgb(var(--shadow-color) / .45); transition:transform .22s ease, box-shadow .25s ease; }
.service-card:hover{ transform:translateY(-5px); box-shadow:0 30px 60px -28px rgb(var(--shadow-color) / .55); }
.service-card::before{ content:""; position:absolute; inset:0 0 auto 0; height:5px; background:linear-gradient(90deg, var(--sand), var(--taupe)); }
.service-badge{ position:absolute; top:16px; right:16px; white-space:nowrap; background:var(--sand); color:var(--navy); font-weight:700; font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; padding:.4em .7em; border-radius:999px; }
.service-day{ font-family:var(--sans); font-weight:700; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--eyebrow); }
.service-ico{ width:50px; height:50px; border-radius:14px; display:grid; place-items:center; background:color-mix(in srgb, var(--sand) 28%, var(--surface)); color:var(--navy); border:1px solid color-mix(in srgb, var(--sand-deep) 32%, transparent); flex:0 0 auto; margin-bottom:16px; }
.service-ico svg{ width:24px; height:24px; }
.service-time{ font-family:var(--serif); font-size:clamp(2.2rem,4vw,2.9rem); line-height:1; color:var(--heading); margin:.5rem 0 .2rem; }
.service-time span{ font-size:.42em; font-weight:600; color:var(--slate); margin-left:.15em; letter-spacing:.04em; }
.service-name{ font-family:var(--serif); font-size:1.2rem; color:var(--slate); margin-bottom:.5rem; min-height:2.4em; display:flex; align-items:flex-end; }
.service-card p{ color:var(--text-soft); font-size:.92rem; }
.service-card p em{ color:var(--slate); font-style:italic; font-size:.85em; }
/* destacada (Domingo) */
.service-card.featured{ background:var(--navy); border-color:transparent; }
.service-card.featured::before{ background:var(--sand); }
.service-card.featured .service-time{ color:#fff; }
.service-card.featured .service-time span{ color:var(--sand); }
.service-card.featured .service-name{ color:var(--sand); }
.service-card.featured .service-day{ color:#cbd5e9; }
.service-card.featured p{ color:#dbe2f0; }
.service-card.featured .service-ico{ background:rgba(255,255,255,.12); color:var(--sand); border-color:rgba(255,255,255,.2); }
.service-card.featured .service-badge{ background:var(--sand); color:var(--navy); }
[data-theme="oscuro"] .service-card.featured{ background:#0c1230; }

.schedule-note{ text-align:center; color:var(--text-soft); font-size:.9rem; margin-top:clamp(28px,3.5vw,42px); display:flex; align-items:center; justify-content:center; gap:.5em; flex-wrap:wrap; }
.schedule-note svg{ width:16px; height:16px; color:var(--slate); }
.schedule-note strong{ color:var(--heading); }
.schedule-note em{ font-style:italic; }

/* ============================================================
   EVENTOS (público)
   ============================================================ */
.events-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,26px); }
.event-card{ display:flex; gap:18px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:clamp(20px,2.4vw,26px); box-shadow:0 18px 44px -30px rgb(var(--shadow-color) / .45); transition:transform .2s ease, box-shadow .25s ease, border-color .2s; }
.event-card:hover{ transform:translateY(-5px); box-shadow:0 28px 56px -28px rgb(var(--shadow-color) / .55); border-color:var(--border-strong); }
.event-date{ flex:0 0 auto; width:64px; height:72px; border-radius:14px; background:var(--navy); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.event-date .ed-day{ font-family:var(--serif); font-size:1.7rem; line-height:1; }
.event-date .ed-mon{ font-size:.68rem; text-transform:uppercase; letter-spacing:.12em; color:var(--sand); margin-top:3px; }
[data-theme="oscuro"] .event-date{ background:#0c1230; }
.event-body{ min-width:0; }
.event-body h3{ font-size:1.2rem; }
.event-meta{ display:flex; flex-wrap:wrap; gap:14px; margin:.5rem 0; }
.event-meta span{ display:inline-flex; align-items:center; gap:.4em; color:var(--text-soft); font-size:.85rem; font-weight:600; }
.event-meta svg{ width:15px; height:15px; color:var(--slate); flex:0 0 auto; }
.event-body p{ color:var(--text-soft); font-size:.92rem; }
.event-tag{ display:inline-block; margin-top:.8rem; background:var(--sand-soft); color:var(--sand-deep); font-weight:700; font-size:.72rem; padding:.35em .8em; border-radius:999px; }

/* ============================================================
   ANUNCIOS (público)
   ============================================================ */
.announce-list{ max-width:820px; margin-inline:auto; display:flex; flex-direction:column; gap:14px; }
.announce-card{ display:flex; gap:18px; align-items:flex-start; background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--sand); border-radius:var(--radius); padding:clamp(20px,2.4vw,26px); box-shadow:0 14px 34px -28px rgb(var(--shadow-color) / .45); transition:transform .18s ease, box-shadow .2s; }
.announce-card:hover{ transform:translateX(4px); box-shadow:0 22px 44px -26px rgb(var(--shadow-color) / .5); }
.announce-ico{ flex:0 0 auto; width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:color-mix(in srgb, var(--sand) 28%, var(--surface)); color:var(--navy); border:1px solid color-mix(in srgb, var(--sand-deep) 32%, transparent); }
[data-theme="oscuro"] .announce-ico{ background:color-mix(in srgb,var(--sand) 20%, transparent); color:var(--sand); }
.announce-ico svg{ width:23px; height:23px; }
.announce-card h3{ font-size:1.2rem; }
.announce-card p{ color:var(--text-soft); font-size:.94rem; margin-top:.3rem; }

/* ============================================================
   APRENDE — blog / devocionales
   ============================================================ */
.blog-card{ transition:transform .2s ease, box-shadow .25s ease; }
.blog-card:hover{ transform:translateY(-5px); box-shadow:0 30px 60px -28px rgb(var(--shadow-color) / .55); }
.blog-img{ aspect-ratio:16/10; background:var(--bg-band) center/cover no-repeat; border-bottom:1px solid var(--border); display:grid; place-items:center; color:var(--slate); }
.blog-img svg{ width:40px; height:40px; opacity:.45; }
.blog-tag{ color:var(--eyebrow); font-weight:700; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; }

.blog-modal{ position:fixed; inset:0; z-index:1200; background:rgba(8,11,28,.62); backdrop-filter:blur(4px); display:none; align-items:center; justify-content:center; padding:20px; }
.blog-modal.show{ display:flex; }
.bm-box{ position:relative; width:100%; max-width:620px; max-height:90vh; overflow-y:auto; background:var(--surface); border-radius:22px; box-shadow:0 40px 90px -30px rgba(8,11,28,.7); animation:fmPop .3s cubic-bezier(.2,.8,.2,1); }
.bm-close{ position:absolute; top:14px; right:14px; z-index:2; width:40px; height:40px; border-radius:12px; display:grid; place-items:center; color:#fff; background:rgba(8,11,28,.45); font-size:18px; transition:.18s; }
.bm-close:hover{ background:rgba(8,11,28,.7); }
.bm-img{ aspect-ratio:16/9; background:var(--bg-band) center/cover no-repeat; }
.bm-body{ padding:clamp(26px,4vw,40px); }
.bm-body h3{ font-size:clamp(1.5rem,3vw,2rem); margin:.4rem 0 .6rem; }
.bm-author{ color:var(--slate); font-weight:600; font-size:.92rem; margin-bottom:1rem; }
.bm-text{ color:var(--text-soft); font-size:1.05rem; line-height:1.75; white-space:pre-wrap; }

/* ============================================================
   FEED SOCIAL
   ============================================================ */
.feed-item{ position:relative; aspect-ratio:1; border-radius:var(--radius); overflow:hidden; background:var(--bg-band) center/cover no-repeat; display:block; border:1px solid var(--border); transition:transform .2s ease, box-shadow .25s ease; }
.feed-item:hover{ transform:translateY(-4px); box-shadow:0 24px 50px -28px rgb(var(--shadow-color) / .55); }
.feed-item::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,19,46,0) 40%, rgba(15,19,46,.78)); opacity:.9; transition:.2s; }
.feed-item.yt::after{ background:linear-gradient(180deg, rgba(15,19,46,0) 35%, rgba(120,20,20,.5) 75%, rgba(15,19,46,.85)); }
.feed-ph{ position:absolute; inset:0; display:grid; place-items:center; color:color-mix(in srgb,var(--slate) 60%, var(--surface)); }
.feed-ph svg{ width:46px; height:46px; opacity:.5; }
.feed-badge{ position:absolute; top:12px; right:12px; z-index:2; width:34px; height:34px; border-radius:9px; display:grid; place-items:center; background:rgba(255,255,255,.92); color:var(--navy); }
.feed-item.yt .feed-badge{ color:#c0211a; }
.feed-item.fb .feed-badge{ color:#1877f2; }
.feed-badge svg{ width:19px; height:19px; }
.feed-title{ position:absolute; left:14px; right:14px; bottom:12px; z-index:2; color:#fff; font-weight:700; font-size:.92rem; line-height:1.25; }

/* ============================================================
   CARRUSEL genérico (servicios / eventos)
   ============================================================ */
.svc-carousel, .evt-carousel{ position:relative; }
.svc-track, .evt-track{ display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px 2px 14px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.svc-track::-webkit-scrollbar, .evt-track::-webkit-scrollbar{ display:none; }
.svc-track > *, .evt-track > *{ scroll-snap-align:start; }
.svc-track > *{ flex:0 0 calc((100% - 36px) / 3); }
.evt-track > *{ flex:0 0 calc((100% - 36px) / 3); }
@media (max-width:900px){ .svc-track > *, .evt-track > *{ flex-basis:calc((100% - 18px) / 2); } }
@media (max-width:600px){ .svc-track > *, .evt-track > *{ flex-basis:86%; } }
.carousel-arrow{ position:absolute; top:42%; transform:translateY(-50%); z-index:5; width:46px; height:46px; border-radius:50%; background:var(--surface); border:1px solid var(--border-strong); color:var(--navy); display:grid; place-items:center; box-shadow:0 12px 30px -14px rgb(var(--shadow-color) / .5); transition:.18s; }
.carousel-arrow:hover{ background:var(--navy); color:#fff; border-color:var(--navy); }
.carousel-arrow svg{ width:20px; height:20px; }
.carousel-arrow.prev{ left:-12px; } .carousel-arrow.next{ right:-12px; }
.carousel-arrow:disabled{ opacity:0; pointer-events:none; }
.no-carousel .svc-track, .no-carousel .evt-track{ justify-content:center; flex-wrap:wrap; }
.no-carousel .carousel-arrow{ display:none; }
@media (max-width:600px){ .carousel-arrow.prev{ left:-6px; } .carousel-arrow.next{ right:-6px; } }

/* ============================================================
   DECLARACIÓN DE FE — lista en columnas + modal
   ============================================================ */
.faith-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:0 clamp(28px,4vw,56px); }
.faith-row{ display:flex; align-items:center; gap:14px; text-align:left; padding:22px 4px; border-bottom:1px solid var(--border); transition:.18s; }
.faith-row:hover{ border-bottom-color:var(--slate); }
.faith-row:hover .fr-title{ color:var(--sand-deep); }
.faith-row:hover .fr-plus{ background:var(--navy); color:#fff; border-color:var(--navy); }
.fr-ico{ flex:0 0 auto; width:42px; height:42px; border-radius:11px; display:grid; place-items:center; background:color-mix(in srgb,var(--sand) 24%, var(--surface)); color:var(--navy); border:1px solid color-mix(in srgb,var(--sand-deep) 28%, transparent); }
[data-theme="oscuro"] .fr-ico{ background:color-mix(in srgb,var(--sand) 16%, transparent); color:var(--sand); }
.fr-ico svg{ width:22px; height:22px; }
.fr-title{ flex:1; font-family:var(--serif); font-size:1.12rem; color:var(--heading); font-weight:600; line-height:1.2; transition:color .18s; }
.fr-plus{ flex:0 0 auto; width:26px; height:26px; border-radius:50%; border:1.5px solid var(--border-strong); color:var(--slate); display:grid; place-items:center; font-size:1.1rem; line-height:1; transition:.18s; }
@media (max-width:860px){ .faith-list{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .faith-list{ grid-template-columns:1fr; } }

.faith-modal{ position:fixed; inset:0; z-index:1200; background:rgba(8,11,28,.62); backdrop-filter:blur(4px); display:none; align-items:center; justify-content:center; padding:20px; }
.faith-modal.show{ display:flex; }
.fm-box{ position:relative; width:100%; max-width:540px; background:var(--surface); border-radius:22px; padding:clamp(30px,4vw,46px); box-shadow:0 40px 90px -30px rgba(8,11,28,.7); animation:fmPop .3s cubic-bezier(.2,.8,.2,1); max-height:90vh; overflow-y:auto; }
@keyframes fmPop{ from{ transform:translateY(16px) scale(.97); } to{ transform:none; } }
.fm-close{ position:absolute; top:16px; right:16px; width:38px; height:38px; border-radius:11px; display:grid; place-items:center; color:var(--text-soft); font-size:18px; transition:.18s; }
.fm-close:hover{ background:var(--bg-alt); color:var(--heading); }
.fm-ico{ width:64px; height:64px; border-radius:16px; display:grid; place-items:center; background:var(--navy); color:var(--sand); margin-bottom:18px; }
.fm-ico svg{ width:32px; height:32px; }
.fm-num{ font-family:var(--sans); font-weight:700; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--eyebrow); }
.fm-box h3{ font-size:clamp(1.5rem,3vw,2rem); margin:.4rem 0 1rem; }
.fm-box p{ color:var(--text-soft); font-size:1.08rem; line-height:1.75; }

/* ============================================================
   PASTOR — Ver más
   ============================================================ */
.pastor-bio{ transition:none; }
.pastor-more{ display:inline-flex; align-items:center; gap:.4em; margin-top:1rem; color:var(--navy); font-weight:700; font-size:.92rem; }
.pastor-more:hover{ color:var(--sand-deep); }
.pastor-more svg{ width:17px; height:17px; transition:transform .2s; }
[data-theme="oscuro"] .pastor-more{ color:var(--sand); }

/* ============================================================
   HERO — dropdown Próximos Eventos
   ============================================================ */
.hero-events-dd{ position:relative; }
.dd-chev{ width:18px; height:18px; transition:transform .25s; }
.hero-events-dd.open .dd-chev{ transform:rotate(180deg); }
.hero-events-pop{ position:absolute; bottom:calc(100% + 14px); left:0; z-index:60; width:340px; max-width:86vw;
  background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:14px;
  box-shadow:0 30px 70px -22px rgba(8,11,28,.7); display:none; }
.hero-events-dd.open .hero-events-pop{ display:block; animation:hepPop .22s ease; }
@keyframes hepPop{ from{ transform:translateY(8px); } to{ transform:none; } }
.hep-title{ font-family:var(--sans); font-weight:700; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--eyebrow); padding:6px 8px 10px; }
.hep-list{ display:flex; flex-direction:column; gap:4px; }
.hep-item{ display:flex; align-items:center; gap:12px; padding:10px; border-radius:12px; transition:.15s; }
.hep-item:hover{ background:var(--bg-alt); }
.hep-d{ flex:0 0 auto; width:46px; height:46px; border-radius:11px; background:var(--navy); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1; }
.hep-d b{ font-family:var(--serif); font-size:1.15rem; }
.hep-d span{ font-size:.6rem; text-transform:uppercase; letter-spacing:.08em; color:var(--sand); margin-top:2px; }
.hep-info{ display:flex; flex-direction:column; }
.hep-info strong{ color:var(--heading); font-size:.98rem; }
.hep-info span{ color:var(--text-soft); font-size:.82rem; }
.hep-none{ color:var(--text-soft); font-size:.9rem; padding:6px 8px 12px; }
.hep-more{ display:flex; align-items:center; justify-content:center; gap:.5em; margin-top:8px; padding:.7em; border-radius:12px; background:var(--sand); color:var(--navy); font-weight:700; font-size:.9rem; transition:.18s; }
.hep-more:hover{ background:var(--sand-deep); }
.hep-more svg{ width:16px; height:16px; }

/* ============================================================
   EVENTOS — pestañas + tarjetas + calendario
   ============================================================ */
.events-tabs{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:clamp(28px,4vw,40px); }
.events-tab{ display:inline-flex; align-items:center; gap:.55em; padding:.65em 1.3em; border-radius:999px; border:1.5px solid var(--border-strong); background:var(--surface); color:var(--heading); font-weight:700; font-size:.92rem; transition:.18s; }
.events-tab svg{ width:18px; height:18px; }
.events-tab:hover{ border-color:var(--slate); }
.events-tab.active{ background:var(--navy); color:#fff; border-color:var(--navy); }

.evt-card{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:0 18px 44px -30px rgb(var(--shadow-color) / .45); height:100%; }
.evt-card .evt-date{ display:flex; gap:8px; align-items:baseline; background:var(--navy); color:#fff; padding:14px 20px; }
.evt-card.is-svc .evt-date{ background:linear-gradient(120deg, var(--sand-deep), var(--taupe)); color:var(--navy); }
.ec-day{ font-family:var(--serif); font-size:1.7rem; line-height:1; }
.ec-mon{ font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; opacity:.9; }
.evt-body{ padding:20px clamp(20px,2.4vw,26px); display:flex; flex-direction:column; gap:.35rem; flex:1; }
.evt-body h3{ font-size:1.2rem; }
.evt-line{ color:var(--slate); font-weight:600; font-size:.85rem; }
.evt-meta{ display:flex; flex-wrap:wrap; gap:14px; margin:.3rem 0; }
.evt-meta span{ display:inline-flex; align-items:center; gap:.4em; color:var(--text-soft); font-size:.85rem; font-weight:600; }
.evt-meta svg{ width:15px; height:15px; color:var(--slate); flex:0 0 auto; }
.evt-body p{ color:var(--text-soft); font-size:.92rem; }
.evt-chip{ align-self:flex-start; margin-top:auto; font-weight:700; font-size:.72rem; padding:.35em .8em; border-radius:999px; }
.evt-chip.reg{ background:var(--sand-soft); color:var(--sand-deep); }
.evt-chip.svc{ background:color-mix(in srgb,var(--slate) 14%, var(--surface)); color:var(--slate); }

/* Calendario */
.cal-layout{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,36px); align-items:start; }
.cal-box{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:clamp(18px,2.4vw,26px); box-shadow:0 18px 44px -32px rgb(var(--shadow-color) / .45); }
.cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.cal-head h3{ font-size:1.3rem; }
.cal-nav{ width:38px; height:38px; border-radius:10px; border:1px solid var(--border); display:grid; place-items:center; color:var(--navy); transition:.15s; }
.cal-nav:hover{ background:var(--navy); color:#fff; }
.cal-nav svg{ width:18px; height:18px; }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.cal-dow{ text-align:center; font-size:.72rem; font-weight:700; color:var(--text-soft); padding:6px 0; text-transform:uppercase; letter-spacing:.04em; }
.cal-cell{ position:relative; aspect-ratio:1; border-radius:10px; display:grid; place-items:center; font-weight:600; color:var(--text); font-size:.95rem; background:transparent; }
.cal-cell.empty{ background:transparent; }
.cal-cell.has{ cursor:pointer; }
.cal-cell.fill-svc{ background:color-mix(in srgb,var(--taupe) 32%, var(--surface)); color:var(--navy); font-weight:700; }
.cal-cell.fill-evt{ background:var(--sand); color:var(--navy); font-weight:700; }
.cal-cell.has:hover{ filter:brightness(.96); }
.cal-cell.today{ outline:2px solid var(--navy); outline-offset:-2px; }
.cal-cell.sel{ background:var(--navy) !important; color:#fff !important; }
.cal-legend{ display:flex; gap:18px; margin-top:14px; padding-top:14px; border-top:1px solid var(--border); }
.cal-legend span{ display:inline-flex; align-items:center; gap:.5em; font-size:.82rem; color:var(--text-soft); font-weight:600; }
.cal-legend .lg{ width:14px; height:14px; border-radius:5px; }
.cal-legend .lg-svc{ background:color-mix(in srgb,var(--taupe) 32%, var(--surface)); } .cal-legend .lg-evt{ background:var(--sand); }
.cal-detail{ min-height:200px; display:flex; flex-direction:column; gap:14px; }
.cal-detail-head{ display:flex; align-items:center; gap:14px; }
.cdh-day{ font-family:var(--serif); font-size:2.4rem; color:var(--navy); line-height:1; }
.cal-detail-head strong{ display:block; color:var(--heading); text-transform:capitalize; }
.cal-detail-head span{ color:var(--text-soft); font-size:.85rem; }
.cal-empty{ text-align:center; color:var(--text-soft); padding:40px 20px; background:var(--surface); border:1px dashed var(--border-strong); border-radius:var(--radius); }
.cal-empty svg{ width:34px; height:34px; opacity:.5; margin:0 auto 10px; }
@media (max-width:820px){ .cal-layout{ grid-template-columns:1fr; } }

/* ============================================================
   ANUNCIOS — tarjetas tipo blog con imagen
   ============================================================ */
.announce-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,26px); max-width:none; }
.ann-card{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:0 18px 44px -30px rgb(var(--shadow-color) / .45); transition:transform .2s ease, box-shadow .25s ease; }
.ann-card:hover{ transform:translateY(-5px); box-shadow:0 30px 60px -28px rgb(var(--shadow-color) / .55); }
.ann-img{ aspect-ratio:16/9; overflow:hidden; background:var(--bg-band); }
.ann-img img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.ann-card:hover .ann-img img{ transform:scale(1.04); }
.ann-noimg{ display:grid; place-items:center; color:var(--slate); }
.ann-noimg svg{ width:40px; height:40px; opacity:.5; }
.ann-content{ padding:clamp(18px,2.2vw,24px); display:flex; flex-direction:column; gap:.4rem; flex:1; }
.ann-date{ font-family:var(--sans); font-weight:700; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--eyebrow); }
.ann-card h3{ font-size:1.25rem; line-height:1.2; }
.ann-content p{ color:var(--text-soft); font-size:.92rem; }
@media (max-width:900px){ .announce-list{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .announce-list{ grid-template-columns:1fr; } }

.expect{ margin-top:clamp(48px,7vw,84px); }
.expect-item{ text-align:center; padding:6px; }
.expect-item .card-ico{ margin:0 auto 16px; }
.expect-item h4{ font-family:var(--serif); font-size:1.18rem; }
.expect-item p{ color:var(--text-soft); font-size:.95rem; margin-top:.45rem; }

/* ============================================================
   ACCESO PASTORAL + LOGIN
   ============================================================ */
.access-fab{
  position:fixed; bottom:18px; left:18px; z-index:120;
  display:inline-flex; align-items:center; gap:.5em; white-space:nowrap;
  font-family:var(--sans); font-weight:600; font-size:.8rem;
  color:#cdd6e8; background:rgba(15,19,46,.55); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.2); border-radius:999px;
  padding:.55em 1em; opacity:.66; transition:.22s; box-shadow:0 10px 26px -14px rgba(8,11,28,.6);
}
.access-fab svg{ width:14px; height:14px; }
.access-fab span{ font-size:.78rem; letter-spacing:.01em; }
.access-fab:hover{ opacity:1; color:var(--navy); background:var(--sand); border-color:var(--sand); transform:translateY(-2px); }
@media (max-width:620px){ .access-fab{ display:none; } }

.foot-access{
  font-family:var(--sans); color:#8b95ab; font-size:.85rem; font-weight:600;
  display:inline-flex; align-items:center; gap:.4em; transition:.2s; letter-spacing:.02em;
}
.foot-access::before{ content:"🔐"; font-size:.85em; }
.foot-access:hover{ color:var(--sand); }

/* enlace en menú móvil */
.mm-access{ margin-top:14px; color:#aeb8cf !important; font-family:var(--sans) !important; font-size:.95rem !important; border-bottom:none !important; justify-content:flex-start !important; gap:.5em; }
.mm-access svg{ width:16px; height:16px; }

.login-overlay{
  position:fixed; inset:0; z-index:1200;
  background:rgba(8,11,28,.62); backdrop-filter:blur(4px);
  display:none; align-items:center; justify-content:center; padding:20px;
}
.login-overlay.show{ display:flex; }
.login-modal{
  position:relative; width:100%; max-width:440px;
  background:var(--surface); border-radius:24px;
  padding:clamp(30px,4vw,44px); text-align:center;
  box-shadow:0 40px 90px -30px rgba(8,11,28,.7);
  max-height:92vh; overflow-y:auto;
}
.login-overlay.show .login-modal{ animation:loginPop .34s cubic-bezier(.2,.8,.2,1); }
@keyframes loginPop{ from{ transform:translateY(18px) scale(.97); } to{ transform:none; } }
.login-close{ position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:10px; color:var(--text-soft); font-size:17px; display:grid; place-items:center; transition:.2s; }
.login-close:hover{ background:var(--bg-alt); color:var(--heading); }
.login-lock{ width:62px; height:62px; border-radius:50%; margin:0 auto 18px; display:grid; place-items:center; background:var(--navy); color:var(--sand); box-shadow:0 14px 30px -12px rgba(25,39,78,.6); }
.login-lock svg{ width:30px; height:30px; }
.login-modal h2{ font-family:var(--serif); font-size:1.7rem; }
.login-sub{ color:var(--text-soft); font-size:.95rem; margin-top:.4rem; margin-bottom:1.4rem; }
.login-modal form{ text-align:left; }
.login-error{
  display:none; align-items:center; gap:.6rem; text-align:left;
  background:color-mix(in srgb, #c0392b 12%, var(--surface));
  border:1px solid color-mix(in srgb, #c0392b 40%, transparent);
  color:#b03224; border-radius:12px; padding:.75em 1em; margin-bottom:1rem; font-size:.9rem; font-weight:600;
}
.login-error.show{ display:flex; }
.login-error svg{ width:20px; height:20px; flex:0 0 auto; }
.pass-wrap{ position:relative; }
.pass-wrap input{ padding-right:3em; }
.pass-toggle{ position:absolute; right:6px; top:50%; transform:translateY(-50%); width:36px; height:36px; border-radius:9px; display:grid; place-items:center; color:var(--slate); }
.pass-toggle:hover{ color:var(--navy); background:var(--bg-alt); }
.pass-toggle svg{ width:20px; height:20px; }
.login-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.2rem; flex-wrap:wrap; }
.remember{ display:inline-flex; align-items:center; gap:.5em; font-size:.9rem; font-weight:600; color:var(--text); cursor:pointer; }
.remember input{ width:17px; height:17px; accent-color:var(--navy); }
.login-link{ font-size:.88rem; font-weight:600; color:var(--slate); }
.login-link:hover{ color:var(--navy); text-decoration:underline; }
.login-submit{ position:relative; }
.login-submit.loading .ls-label{ visibility:hidden; }
.ls-spinner{ display:none; position:absolute; width:20px; height:20px; border:2.5px solid rgba(25,39,78,.3); border-top-color:var(--navy); border-radius:50%; animation:spin .7s linear infinite; }
.login-submit.loading .ls-spinner{ display:block; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.login-help{ text-align:center; font-size:.88rem; color:var(--text-soft); margin-top:1rem; }
.login-secure{ display:flex; align-items:center; justify-content:center; gap:.5em; margin-top:1.2rem; padding-top:1rem; border-top:1px solid var(--border); font-size:.78rem; color:var(--text-soft); text-align:center; }
.login-secure svg{ width:16px; height:16px; color:var(--slate); flex:0 0 auto; }

/* ============================================================
   Divisor de montañas
   ============================================================ */
.mtn-divider{ display:block; width:100%; height:auto; }

/* ============================================================
   Reveal on scroll
   ============================================================ */
.reveal{ will-change: transform; }
.reveal.in{ animation: revealUp .6s cubic-bezier(.2,.7,.2,1) both; }
@keyframes revealUp{ from{ transform: translateY(12px); } to{ transform: none; } }
@media (prefers-reduced-motion: reduce){ .reveal.in{ animation:none; } html{ scroll-behavior:auto; } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1040px){
  .nav-links, .nav-cta{ display:none; }
  .nav-burger{ display:flex; }
  [data-hero="dividido"] .hero{ display:block; min-height:auto; padding-top:0; }
  [data-hero="dividido"] .hero-media{ position:relative; left:auto; width:100%; height:46vh; }
  [data-hero="dividido"] .hero-media::after{ background:linear-gradient(180deg, rgba(15,19,46,.1), var(--bg) 92%); }
  [data-hero="dividido"] .hero-inner{ width:auto; max-width:none; padding: 8px var(--gutter) 56px; }
}
@media (max-width: 1000px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .services-grid{ grid-template-columns:repeat(2,1fr); }
  .acomp-card{ grid-template-columns:1fr 1fr; }
  .acomp-cta{ grid-column:1/-1; border-left:none !important; border-top:1px solid rgba(255,255,255,.12); align-items:stretch; }
  .acomp-cta .btn{ width:100%; }
}
@media (max-width: 860px){
  .nav-links, .nav-cta{ display:none; }
  .nav-burger{ display:flex; }
  .nav-logo .lname{ font-size:.95rem; }
  .grid-3{ grid-template-columns:1fr; }
  .grid-2{ grid-template-columns:1fr; }
  .split{ grid-template-columns:1fr; }
  .values-grid{ grid-template-columns:1fr; }
  .events-grid{ grid-template-columns:1fr 1fr; }
  .mv2-grid{ grid-template-columns:1fr; }
  .pastor-card{ grid-template-columns:1fr; }
  .afil-card{ grid-template-columns:1fr; text-align:center; }
  .afil-logo img{ max-width:180px; }
  .afil-foot{ justify-content:center; }
  .afil-card::before{ inset:0 0 auto 0; width:auto; height:5px; }
  .pastor-photo{ min-height:240px; border-right:none !important; border-bottom:1px solid var(--border) !important; }
  .objetivos{ grid-template-columns:1fr; gap:24px; }
  .feed-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width: 620px){
  :root{ --gutter:20px; --nav-h:68px; }
  .acomp{ margin-top:-44px; }
  .acomp-card{ grid-template-columns:1fr; }
  .acomp-card > div + div{ border-left:none; border-top:1px solid rgba(255,255,255,.12); }
  .grid-4{ grid-template-columns:1fr 1fr; }
  .services-grid{ grid-template-columns:1fr; }
  .events-grid{ grid-template-columns:1fr; }
  .service-name{ min-height:0; }
  .feed-grid{ grid-template-columns:repeat(2,1fr); }
  .msg-thumb{ width:84px; height:54px; }
  .footer-grid{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; }
  .hero h1{ font-size:clamp(2.2rem,9vw,3rem); }
}