/* ===================================================================
   Iglesia de Cristo Ebenezer Tampa
   Design tokens
=================================================================== */
:root{
  --night:      #051025;
  --paper:      #EEF0F1;
  --deep:       #25466D;
  --glow:       #4B9AE6;
  --marine:     #122B4D;
  --slate:      #9DA2A9;

  --display:    'Spectral', Georgia, serif;
  --body:       'Work Sans', -apple-system, sans-serif;
  --mono:       'Space Mono', monospace;

  --container:  1180px;
  --radius:     2px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--body);
  color:var(--marine);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--display); font-weight:600; line-height:1.1; }
em{ font-style:italic; font-weight:400; }
.eyebrow{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.22em;
  color:var(--glow);
  margin-bottom:14px;
  display:block;
}
.eyebrow--light{ color:#7FB3E8; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ===================================================================
   Buttons
=================================================================== */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:15px 30px;
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  border-radius:var(--radius);
  border:1px solid transparent;
  transition:all .25s ease;
  cursor:pointer;
}
.btn--glow{
  background:var(--glow);
  color:var(--night);
  box-shadow:0 0 0 rgba(75,154,230,.6);
}
.btn--glow:hover{
  box-shadow:0 0 28px rgba(75,154,230,.55);
  transform:translateY(-1px);
}
.btn--ghost{
  border-color:rgba(238,240,241,.35);
  color:var(--paper);
}
.btn--ghost:hover{ border-color:var(--glow); color:var(--glow); }
.btn--outline{
  border-color:var(--marine);
  color:var(--marine);
}
.btn--outline:hover{ background:var(--marine); color:var(--paper); }
.btn--ghost-dark{
  border-color:rgba(238,240,241,.35);
  color:var(--paper);
}
.btn--ghost-dark:hover{ border-color:var(--glow); color:var(--glow); }

/* ===================================================================
   Iglesia landing (Conoce Nuestra Iglesia)
=================================================================== */
.iglesia-hero{ background:var(--paper); padding:160px 24px 100px; }
.iglesia-hero__inner{
  max-width:var(--container); margin:0 auto;
  display:flex; align-items:center; gap:64px;
  flex-wrap:wrap;
}
.iglesia-hero__text{ flex:1 1 420px; min-width:300px; }
.iglesia-hero__text h1{
  font-family:var(--display); font-weight:600;
  font-size:clamp(2rem,4.5vw,3rem);
  color:var(--marine); margin-bottom:22px; line-height:1.15;
}
.iglesia-hero__intro{
  font-size:1.05rem; line-height:1.8; color:var(--deep); margin-bottom:34px;
  max-width:520px;
}
.iglesia-hero__photo{ flex:1 1 380px; min-width:300px; }
.iglesia-hero__photo img{ width:100%; height:auto; display:block; }

/* ===================================================================
   Areas de la Iglesia
=================================================================== */
.areas-header{
  background:var(--paper); padding:160px 24px 60px;
  text-align:center;
}
.areas-header .eyebrow{ display:flex; justify-content:center; }
.areas-header h1{
  font-family:var(--display); font-weight:600;
  font-size:clamp(2rem,4.5vw,3rem); color:var(--marine); margin-bottom:18px;
}
.areas-header__intro{
  font-size:1.05rem; color:var(--deep); max-width:600px; margin:0 auto; line-height:1.7;
}

.areas-wrap{ background:var(--paper); padding:0 24px 60px; }

.area-block{
  max-width:var(--container); margin:0 auto 110px;
  display:flex; align-items:center; gap:56px;
  flex-wrap:wrap;
}
.area-block--reverse{ flex-direction:row-reverse; }
.area-text{ flex:1 1 420px; min-width:300px; }
.area-text h2{ font-size:1.9rem; color:var(--marine); margin-bottom:18px; }
.area-text p{ font-size:1rem; line-height:1.8; color:var(--deep); margin-bottom:16px; }

/* photo collage placeholder (3 photos) */
.area-collage{
  flex:1 1 420px; min-width:300px;
  display:grid;
  grid-template-columns:1.2fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:10px;
  height:360px;
}
.area-collage__big{ grid-row:1 / 3; }
.ph{
  border:1px dashed var(--slate);
  border-radius:16px;
  background:linear-gradient(160deg, var(--marine), var(--night));
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px;
  color:rgba(238,240,241,.4);
}
.ph svg{ width:32px; height:32px; opacity:.5; }
.ph span{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(238,240,241,.45);
}

.area-socials{
  display:flex; flex-wrap:wrap; gap:20px;
  margin:20px 0;
}
.area-socials a{
  font-family:var(--mono); font-size:.8rem; letter-spacing:.05em;
  color:var(--deep); border-bottom:1px solid var(--glow); padding-bottom:2px;
}
.area-socials a:hover{ color:var(--glow); }

.area-embed{ margin-top:24px; border-radius:12px; overflow:hidden; }
.area-embed + .area-embed{ margin-top:16px; }

.area-subgallery{
  max-width:var(--container); margin:-60px auto 110px;
  text-align:center;
}
.area-subgallery__label{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.15em;
  color:var(--glow); margin-bottom:20px;
}
.area-subgallery__grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
}
.area-subgallery__grid img,
.area-subgallery__grid .ph{ aspect-ratio:1/1; height:auto; border-radius:12px; object-fit:cover; width:100%; }

.area-levels{
  display:flex; gap:20px; flex-wrap:wrap;
  margin:24px 0;
}
.area-level{
  flex:1 1 140px;
  border:1px solid var(--slate);
  border-radius:8px;
  padding:20px;
}
.area-level span{
  font-family:var(--mono); font-size:.75rem; color:var(--glow); display:block; margin-bottom:8px;
}
.area-level p{ font-weight:600; color:var(--marine); margin:0; }

.area-note{
  font-size:.92rem; color:var(--slate); font-style:italic; margin-bottom:24px;
}

.area-closing{
  max-width:640px; margin:0 auto; text-align:center; padding:80px 24px 40px;
}
.area-closing .eyebrow{ display:flex; justify-content:center; }
.area-closing h2{ font-size:clamp(1.7rem,3.5vw,2.3rem); color:var(--marine); margin-bottom:18px; }
.area-closing p{ font-size:1rem; color:var(--deep); line-height:1.7; margin-bottom:30px; }

@media (max-width:900px){
  .area-block, .area-block--reverse{ flex-direction:column; }
  .area-subgallery{ margin-top:-20px; }
  .area-subgallery__grid{ grid-template-columns:repeat(2,1fr); }
}

/* ===================================================================
   Volunteer modal (registration / contact forms)
=================================================================== */
.modal{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.modal[hidden]{ display:none; }
.modal__backdrop{ position:absolute; inset:0; background:rgba(5,16,37,.7); }
.modal__box{
  position:relative; z-index:1;
  width:100%; max-width:480px;
  background:var(--paper);
  border-radius:10px;
  padding:40px;
  max-height:90vh; overflow-y:auto;
}
.modal__box h3{ font-size:1.4rem; color:var(--marine); margin-bottom:24px; }
.modal__close{
  position:absolute; top:14px; right:18px;
  background:none; border:0; font-size:1.6rem; color:var(--deep); cursor:pointer;
}
.modal__close:hover{ color:var(--glow); }
.modal__box form label{
  display:block; font-family:var(--mono); font-size:.72rem; letter-spacing:.05em;
  color:var(--deep); margin-bottom:16px; text-transform:uppercase;
}
.modal__box form input, .modal__box form textarea{
  display:block; width:100%; margin-top:6px;
  font-family:var(--body); font-size:.95rem; text-transform:none;
  padding:10px 12px; border:1px solid var(--slate); border-radius:6px;
  color:var(--marine); background:#fff;
}
.modal__box form textarea{ resize:vertical; }
.modal__box form button{ width:100%; margin-top:8px; justify-content:center; }
.modal__success{ color:#1a7a3c; margin-top:16px; }
.modal__error{ color:#a5303a; margin-top:16px; }

.volunteer-form__radios{
  display:flex; gap:20px; margin-top:8px;
}
.volunteer-form__radio{
  display:flex !important; align-items:center; gap:6px;
  font-family:var(--body) !important; text-transform:none !important;
  font-size:.95rem !important; color:var(--marine) !important;
  margin-bottom:0 !important;
}
.volunteer-form__radio input{ width:auto !important; margin-top:0 !important; }
.volunteer-form__disclosure{
  font-size:.8rem; color:var(--slate); text-align:center;
  margin-top:14px; line-height:1.5;
}

/* ===================================================================
   Historia teaser (compact card on homepage, links to historia.html)
=================================================================== */
.historia-teaser{
  position:relative;
  min-height:56vh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  background:var(--night);
}
.historia-teaser__media{ position:absolute; inset:0; }
.historia-teaser__media video{
  width:100%; height:100%; object-fit:cover;
  background:var(--night);
}
.historia-teaser__overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(5,16,37,.6), rgba(5,16,37,.85));
}
.historia-teaser__content{
  position:relative; z-index:1;
  max-width:640px;
  text-align:center;
  padding:70px 24px;
}
.historia-teaser__content h2{
  font-size:clamp(1.9rem,4.5vw,2.8rem); color:var(--paper); margin-bottom:18px;
}
.historia-teaser__text{
  font-size:1.02rem; color:var(--slate); line-height:1.7; margin-bottom:34px;
}

/* ===================================================================
   Nav
=================================================================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(5,16,37,.7);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(75,154,230,.12);
  transition:background .3s ease;
}
.nav__inner{
  max-width:var(--container);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 24px;
}
.nav__brand{ display:flex; align-items:center; gap:12px; }
.nav__logo{ width:42px; height:42px; object-fit:cover; border-radius:50%; }
.nav__word{ display:flex; flex-direction:column; line-height:1.15; color:var(--paper); }
.nav__word strong{ font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; color:var(--slate); font-weight:400; }
.nav__word em{ font-family:var(--display); font-size:1.05rem; font-style:normal; font-weight:600; }
.nav__links{ display:flex; align-items:center; gap:20px; flex-wrap:nowrap; white-space:nowrap; }
.nav__links a{
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--paper);
  opacity:.8;
  transition:opacity .2s, color .2s;
}
.nav__links a:hover{ opacity:1; color:var(--glow); }
.nav__cta{
  border:1px solid var(--glow) !important;
  padding:9px 18px;
  border-radius:var(--radius);
  opacity:1 !important;
}
.nav__lang{
  font-family:var(--mono);
  background:transparent;
  border:1px solid rgba(238,240,241,.3);
  color:var(--paper);
  font-size:.7rem;
  letter-spacing:.06em;
  padding:6px 11px;
  border-radius:var(--radius);
  cursor:pointer;
  margin-left:18px;
}
.nav__lang:hover{ border-color:var(--glow); color:var(--glow); }
.nav__burger{ display:none; background:none; border:0; cursor:pointer; flex-direction:column; gap:5px; }
.nav__burger span{ width:22px; height:2px; background:var(--paper); display:block; }

/* "Admin" link — visible on desktop nav and inside the mobile menu */
.nav__admin{ display:block; }

/* ===================================================================
   "Más" dropdown (desktop) — collapses the less-used nav links
=================================================================== */
.nav__dropdown{ position:relative; }
.nav__dropdown-toggle{
  background:none; border:0; cursor:pointer;
  color:inherit; font-family:inherit; font-size:.85rem; letter-spacing:.02em;
  padding:0;
}
.nav__dropdown-menu{
  position:absolute; top:calc(100% + 18px); left:50%; transform:translateX(-50%);
  display:none; flex-direction:column; gap:2px;
  background:var(--night); border:1px solid rgba(75,154,230,.2); border-radius:8px;
  padding:10px 0; min-width:190px;
  box-shadow:0 12px 28px rgba(0,0,0,.35);
  z-index:200;
}
.nav__dropdown.is-open .nav__dropdown-menu{ display:flex; }
.nav__dropdown-menu a{
  padding:10px 20px; white-space:nowrap; font-size:.85rem;
}
.nav__dropdown-menu a:hover{ background:rgba(75,154,230,.12); }

@media (max-width:900px){
  .nav__links{
    position:fixed; top:0; right:-100%; height:100vh; width:78%; max-width:340px;
    background:var(--night);
    flex-direction:column; justify-content:center; align-items:flex-start;
    padding:40px; gap:26px;
    transition:right .35s ease;
    border-left:1px solid rgba(75,154,230,.2);
  }
  .nav__links.open{ right:0; }
  .nav__burger{ display:flex; }
  .nav__lang{ margin-left:12px; }

  /* On mobile the burger menu already shows everything — the "Más"
     dropdown mechanism is a desktop-only convenience, so on mobile we
     just show the button's own links inline like a normal list. */
  .nav__dropdown-toggle{ display:none; }
  .nav__dropdown{ position:static; }
  .nav__dropdown-menu{
    position:static !important; display:flex !important; flex-direction:column;
    gap:26px !important; background:none !important; border:0 !important; box-shadow:none !important;
    padding:0 !important; min-width:0 !important; transform:none !important;
  }
}

/* ===================================================================
   Hero
=================================================================== */
.hero{
  position:relative;
  min-height:100vh;
  background:var(--night);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:120px 24px 100px;
}
#stars{ display:none; }
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero__bg-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(5,16,37,.72), rgba(5,16,37,.6) 45%, var(--night) 96%);
}
.hero__content{
  position:relative; z-index:2;
  max-width:760px;
  text-align:center;
  color:var(--paper);
}
.hero__logo{
  width:96px; height:96px; object-fit:cover; border-radius:50%;
  margin:0 auto 28px;
  box-shadow:0 0 40px rgba(75,154,230,.45);
}
.hero__eyebrow{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.3em;
  color:var(--glow); margin-bottom:20px;
}
.hero__title{
  font-size:clamp(2.4rem, 6vw, 4.4rem);
  color:var(--paper);
  margin-bottom:26px;
}
.hero__title em{ color:#BFDCFA; }
.hero__sub{
  font-size:1.05rem; line-height:1.7; color:var(--slate);
  max-width:560px; margin:0 auto 40px;
}
.hero__actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.hero__scroll{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  z-index:2;
}
.hero__scroll span{
  display:block; width:1px; height:50px;
  background:linear-gradient(var(--glow), transparent);
  animation:scrolldown 2s ease-in-out infinite;
}
@keyframes scrolldown{
  0%{ transform:scaleY(0); transform-origin:top; opacity:0; }
  40%{ transform:scaleY(1); transform-origin:top; opacity:1; }
  60%{ transform:scaleY(1); transform-origin:bottom; opacity:1; }
  100%{ transform:scaleY(0); transform-origin:bottom; opacity:0; }
}

@media (max-width:600px){
  .hero__actions{ flex-direction:column; width:100%; }
  .hero__actions .btn{ justify-content:center; width:100%; }
}

/* ===================================================================
   Meaning / Vision (light section, stone cards)
=================================================================== */
.meaning{ background:var(--paper); padding:120px 24px; }
.meaning__inner{ max-width:var(--container); margin:0 auto; text-align:center; }
.meaning h2{ font-size:clamp(1.9rem,4vw,2.8rem); color:var(--marine); max-width:680px; margin:0 auto 28px; }
.meaning h2 em{ color:var(--glow); font-style:italic; }
.meaning__text{
  max-width:640px; margin:0 auto 70px;
  font-size:1.05rem; line-height:1.85; color:var(--deep);
}
.meaning__grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:2px;
  background:var(--slate);
}
.stone{
  background:var(--paper);
  padding:44px 28px;
  text-align:left;
  position:relative;
  transition:background .3s ease;
}
.stone:hover{ background:#fff; }
.stone__mark{
  font-family:var(--mono); font-size:.75rem; color:var(--glow);
  display:block; margin-bottom:18px;
}
.stone h3{ font-size:1.2rem; color:var(--marine); margin-bottom:10px; }
.stone p{ font-size:.92rem; line-height:1.6; color:var(--deep); }

@media (max-width:900px){
  .meaning__grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:520px){
  .meaning__grid{ grid-template-columns:1fr; }
}

/* ===================================================================
   Schedule (dark section)
=================================================================== */
.schedule{ background:var(--marine); padding:120px 24px; position:relative; overflow:hidden; }
.schedule::before{
  content:''; position:absolute; top:-200px; right:-200px; width:500px; height:500px;
  background:radial-gradient(circle, rgba(75,154,230,.18), transparent 70%);
}
.schedule__inner{ max-width:var(--container); margin:0 auto; position:relative; z-index:1; }
.schedule h2{ font-size:clamp(1.9rem,4vw,2.8rem); color:var(--paper); margin-bottom:56px; max-width:520px; }
.schedule__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.sched-card{
  border:1px solid rgba(238,240,241,.16);
  padding:44px 36px;
  border-radius:var(--radius);
  background:rgba(238,240,241,.03);
}
.sched-card--accent{
  border-color:var(--glow);
  background:rgba(75,154,230,.08);
}
.sched-card__day{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.2em; color:var(--slate); margin-bottom:18px;
}
.sched-card--accent .sched-card__day{ color:var(--glow); }
.sched-card__time{
  font-family:var(--display); font-size:3rem; color:var(--paper); margin-bottom:10px;
}
.sched-card__time span{ font-size:1.4rem; color:var(--slate); }
.sched-card__label{ font-size:1.05rem; color:#C7D3E0; }

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

/* ===================================================================
   Pastors (light section)
=================================================================== */
.pastors{ background:var(--paper); padding:120px 24px; }
.pastors__inner{ max-width:var(--container); margin:0 auto; }
.pastors h2{ font-size:clamp(1.9rem,4vw,2.8rem); color:var(--marine); margin-bottom:56px; }
.pastors__card{
  display:grid; grid-template-columns:420px 1fr; gap:48px; align-items:center;
  border:1px solid var(--slate); padding:48px;
}
.pastors__photo{
  width:100%; border-radius:8px; overflow:hidden;
  box-shadow:0 12px 40px rgba(18,43,77,.18);
}
.pastors__photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.pastors__text h3{ font-size:1.6rem; color:var(--marine); margin-bottom:16px; }
.pastors__text p{ font-size:1rem; line-height:1.75; color:var(--deep); margin-bottom:24px; }

@media (max-width:800px){
  .pastors__card{ grid-template-columns:1fr; text-align:center; padding:40px 28px; }
  .pastors__photo{ max-width:440px; margin:0 auto; }
}

/* ===================================================================
   Nuestra Historia (alternating photo/text story blocks)
=================================================================== */
.historia{ background:var(--paper); padding:0 0 120px; }
.historia__inner{ max-width:var(--container); margin:0 auto; padding:0 24px; }

/* --- Video hero at top of section --- */
.historia-hero{
  position:relative;
  min-height:64vh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  margin-bottom:100px;
  background:var(--night);
}
.historia-hero__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.historia-hero__overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(5,16,37,.55), rgba(5,16,37,.75) 60%, var(--night) 100%);
}
.historia-hero__content{
  position:relative; z-index:1;
  max-width:720px;
  text-align:center;
  padding:80px 24px;
}
.historia-hero__content h2{
  font-size:clamp(2rem,5vw,3.2rem); color:var(--paper); margin-bottom:20px;
}
.historia-hero__intro{
  font-size:1.05rem; color:var(--slate); line-height:1.7;
}

.story-block{
  display:flex; align-items:center; gap:56px;
  margin-bottom:88px;
  flex-wrap:wrap;
}
.story-block:last-of-type{ margin-bottom:0; }
.story-block--reverse{ flex-direction:row-reverse; }

/* --- Photo galleries (multiple real photos per block) --- */
.story-gallery{
  flex:1 1 380px; min-width:280px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.story-gallery img{
  width:100%; height:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:4px;
  display:block;
}
.story-gallery--three{
  grid-template-columns:1fr 1fr;
}
.story-gallery--three img:first-child{
  grid-column:1 / -1;
  aspect-ratio:16/9;
}

/* fallback placeholder style (kept for any future empty slots) */
.story-photo{ flex:1 1 380px; min-width:280px; }
.story-photo__placeholder{
  aspect-ratio:4/3;
  border:1px dashed var(--slate);
  border-radius:8px;
  background:linear-gradient(160deg, var(--marine), var(--night));
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px;
  color:rgba(238,240,241,.4);
}
.story-photo__placeholder svg{ width:40px; height:40px; opacity:.5; }
.story-photo__placeholder span{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(238,240,241,.45);
}

.story-text{ flex:1 1 380px; min-width:280px; }
.story-text__label{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.15em;
  color:var(--glow); margin-bottom:10px;
}
.story-text h3{
  font-size:1.5rem; color:var(--marine); margin-bottom:18px; line-height:1.25;
}
.story-text p{ font-size:1rem; line-height:1.8; color:var(--deep); }
.story-text p + p{ margin-top:16px; }
.story-text p + ul{ margin-top:20px; }

.story-list{ list-style:none; }
.story-list li{
  position:relative;
  padding-left:24px;
  margin-bottom:16px;
  font-size:.98rem; line-height:1.75; color:var(--deep);
}
.story-list li:last-child{ margin-bottom:0; }
.story-list li::before{
  content:'';
  position:absolute; left:0; top:9px;
  width:7px; height:7px;
  border-radius:50%;
  background:var(--glow);
}
.story-list li strong{ color:var(--marine); }

/* --- Closing full video player --- */
.historia-outro{
  margin-top:100px;
  text-align:center;
}
.historia-outro .eyebrow{ display:flex; justify-content:center; }
.historia-outro h3{
  font-size:clamp(1.6rem,3.5vw,2.2rem); color:var(--marine); margin-bottom:36px;
}
.historia-outro__video{
  width:100%; max-width:820px;
  border-radius:8px;
  box-shadow:0 20px 60px rgba(18,43,77,.25);
  background:var(--night);
}

@media (max-width:800px){
  .story-block, .story-block--reverse{ flex-direction:column; }
  .story-block{ gap:28px; margin-bottom:64px; }
  .historia-hero{ min-height:52vh; }
}

/* ===================================================================
   Sermons / Predicas (light section, video grid)
=================================================================== */
.sermons{ background:var(--paper); padding:120px 24px; }
.sermons__inner{ max-width:var(--container); margin:0 auto; }
.sermons__head{
  display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:16px;
  margin-bottom:52px;
}
.sermons__head h2{ font-size:clamp(1.9rem,4vw,2.8rem); color:var(--marine); }
.sermons__channel{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.06em;
  color:var(--deep); border-bottom:1px solid var(--glow); padding-bottom:2px;
  white-space:nowrap;
}
.sermons__channel:hover{ color:var(--glow); }

.sermons__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:28px 28px;
  margin-bottom:20px;
  align-items:start;
}
.sermon-card{
  cursor:pointer;
  background:none;
  border:0;
  text-align:left;
  display:flex;
  flex-direction:column;
  width:100%;
  padding:0;
  font-family:inherit;
  color:inherit;
  height:100%;
}
.sermon-card__thumb{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--marine);
  margin-bottom:16px;
}
.sermon-card__thumb img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s ease;
}
.sermon-card:hover .sermon-card__thumb img{ transform:scale(1.06); }
.sermon-card__play{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(rgba(5,16,37,0), rgba(5,16,37,.55));
}
.sermon-card__play::before{
  content:'';
  width:56px; height:56px;
  border-radius:50%;
  background:rgba(75,154,230,.85);
  box-shadow:0 0 24px rgba(75,154,230,.5);
  transition:transform .25s ease, background .25s ease;
}
.sermon-card__play::after{
  content:'';
  position:absolute;
  border-style:solid;
  border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent var(--night);
  transform:translateX(2px);
}
.sermon-card:hover .sermon-card__play::before{ transform:scale(1.1); background:var(--glow); }
.sermon-card__title{
  font-size:1rem; font-weight:600; color:var(--marine); line-height:1.4; margin-bottom:8px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:2.8em;
}
.sermon-card__date{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; color:var(--slate); text-transform:uppercase;
  margin-top:auto;
  display:block;
  padding-top:4px;
}

.sermons__state{
  text-align:center; padding:40px 0; color:var(--slate); font-size:.95rem;
  font-family:var(--mono); letter-spacing:.04em;
}

.sermons__pagination{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:36px;
}
.page-btn{
  min-width:42px; height:42px;
  padding:0 6px;
  border:1px solid transparent;
  background:rgba(37,70,109,.06);
  color:var(--deep);
  font-family:var(--mono);
  font-size:.82rem;
  border-radius:50%;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all .2s ease;
}
.page-btn:hover:not(:disabled):not(.page-btn--active){
  background:rgba(75,154,230,.12);
  color:var(--glow);
  transform:translateY(-1px);
}
.page-btn--active{
  background:var(--marine);
  color:var(--paper);
  box-shadow:0 4px 16px rgba(18,43,77,.28);
  cursor:default;
}
.page-btn:disabled{
  opacity:.25; cursor:default;
}
.page-btn:disabled:hover{ transform:none; }

@media (max-width:700px){
  .sermons__grid{ gap:10px 8px; }
  .sermon-card__thumb{ margin-bottom:6px; }
  .sermon-card__title{
    font-size:.7rem; line-height:1.25; min-height:2.1em;
    -webkit-line-clamp:2;
    margin-bottom:3px;
  }
  .sermon-card__date{ font-size:.55rem; }
  .sermon-card__play::before{ width:32px; height:32px; }
  .sermon-card__play::after{ border-width:6px 0 6px 10px; }
}
@media (max-width:420px){
  .sermons__grid{ gap:8px 6px; }
  .sermon-card__title{ font-size:.64rem; }
  .page-btn{ min-width:32px; height:32px; font-size:.7rem; }
  .sermons__pagination{ gap:5px; }
}

/* ===================================================================
   Video modal
=================================================================== */
.video-modal{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.video-modal[hidden]{ display:none; }
.video-modal__backdrop{
  position:absolute; inset:0;
  background:rgba(5,16,37,.92);
}
.video-modal__box{
  position:relative; z-index:1;
  width:100%; max-width:960px;
}
.video-modal__frame{
  position:relative; width:100%; aspect-ratio:16/9;
  box-shadow:0 0 60px rgba(75,154,230,.25);
}
.video-modal__frame iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}
.video-modal__close{
  position:absolute; top:-46px; right:0;
  background:none; border:0; color:var(--paper);
  font-size:2rem; line-height:1; cursor:pointer;
}
.video-modal__close:hover{ color:var(--glow); }

/* ===================================================================
   Events (dark section, empty state)
=================================================================== */
.events{ background:var(--night); padding:120px 24px; text-align:center; }
.events__inner{ max-width:640px; margin:0 auto; }
.events h2{ font-size:clamp(1.9rem,4vw,2.8rem); color:var(--paper); margin-bottom:44px; }
.events__empty{
  border:1px dashed rgba(238,240,241,.3);
  padding:56px 36px;
  border-radius:var(--radius);
}
.events__empty p{ color:var(--slate); font-size:1.02rem; line-height:1.7; margin-bottom:28px; }

/* ===================================================================
   Location
=================================================================== */
.location{
  display:grid; grid-template-columns:1.1fr .9fr;
  min-height:560px;
}
.location__map{ background:var(--deep); }
.location__map iframe{ width:100%; height:100%; min-height:400px; filter:grayscale(.15) contrast(1.05); }
.location__info{
  background:var(--marine);
  color:var(--paper);
  padding:80px 56px;
  display:flex; flex-direction:column; justify-content:center;
}
.location__info h2{ font-size:clamp(1.9rem,4vw,2.6rem); margin-bottom:36px; }
.location__list{ list-style:none; margin-bottom:40px; }
.location__list li{
  padding:16px 0; border-bottom:1px solid rgba(238,240,241,.14);
  font-size:1.02rem;
}
.location__label{
  display:block; font-family:var(--mono); font-size:.68rem; letter-spacing:.15em;
  color:var(--glow); margin-bottom:6px;
}
.location__list a:hover{ color:var(--glow); }

.location__maps{ display:flex; gap:16px; flex-wrap:wrap; }

@media (max-width:900px){
  .location{ grid-template-columns:1fr; }
  .location__map{ min-height:340px; }
  .location__info{ padding:60px 28px; }
}

/* ===================================================================
   Footer
=================================================================== */
.footer{ background:var(--night); color:var(--paper); padding:90px 24px 0; }
.footer__inner{
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:48px;
  padding-bottom:64px;
  border-bottom:1px solid rgba(238,240,241,.1);
}
.footer__logo{ width:56px; height:56px; border-radius:50%; object-fit:cover; margin-bottom:18px; }
.footer__brand p{ color:var(--slate); font-family:var(--display); font-style:italic; font-size:1.05rem; }
.footer__col h4{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.15em; color:var(--glow);
  margin-bottom:18px; text-transform:uppercase; font-weight:400;
}
.footer__col p{ margin-bottom:10px; color:var(--slate); font-size:.95rem; }
.footer__col a:hover{ color:var(--glow); }
.footer__bottom{
  max-width:var(--container); margin:0 auto;
  padding:26px 0; text-align:center;
  font-size:.8rem; color:var(--slate);
}

@media (max-width:700px){
  .footer__inner{ grid-template-columns:1fr; text-align:left; }
}

/* ===================================================================
   Donaciones (compact strip after hero)
=================================================================== */
.donaciones{
  background:var(--marine);
  padding:64px 24px;
  text-align:center;
}
.donaciones__inner{ max-width:640px; margin:0 auto; }
.donaciones .eyebrow{ display:flex; justify-content:center; }
.donaciones h2{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.4rem,3vw,1.9rem);
  color:var(--paper); line-height:1.4; margin-bottom:28px;
}

/* ===================================================================
   Help banner (Necesitamos tu ayuda) — edge-to-edge red strip
=================================================================== */
.help-banner{
  background:#B3261E;
  padding:36px 24px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px;
  text-align:center;
}
.help-banner p{
  font-family:var(--display); font-weight:600;
  font-size:1.4rem; color:var(--paper);
}
.btn--outline-light{
  border:1px solid var(--paper);
  color:var(--paper);
  background:transparent;
}
.btn--outline-light:hover{ background:var(--paper); color:#B3261E; }

/* ===================================================================
   Colaboradores (contained card, like the Pastors card)
=================================================================== */
.colaboradores{ background:var(--paper); padding:90px 24px; }
.colaboradores__card{
  max-width:var(--container); margin:0 auto;
  display:flex; flex-wrap:wrap; align-items:center; gap:48px;
  border:1px solid var(--slate);
  border-radius:10px;
  padding:44px;
}
.colaboradores__photo{ flex:1 1 340px; min-width:260px; }
.colaboradores__photo img{
  width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
  border-radius:8px;
}
.colaboradores__content{ flex:1 1 340px; min-width:260px; }
.colaboradores__content h2{ font-size:clamp(1.5rem,3vw,1.9rem); color:var(--marine); margin-bottom:16px; }
.colaboradores__content p{ font-size:1rem; color:var(--deep); line-height:1.7; margin-bottom:26px; max-width:440px; }

@media (max-width:700px){
  .colaboradores{ padding:60px 20px; }
  .colaboradores__card{ padding:28px; text-align:center; }
  .colaboradores__content p{ margin-left:auto; margin-right:auto; }
}

/* ===================================================================
   Construccion del futuro templo
=================================================================== */
.templo{ background:var(--marine); padding:100px 24px; text-align:center; }
.templo__inner{ max-width:760px; margin:0 auto; }
.templo .eyebrow{ display:flex; justify-content:center; }
.templo h2{ font-size:clamp(1.7rem,3.5vw,2.4rem); color:var(--paper); margin-bottom:26px; }
.templo p{ font-size:1rem; color:var(--slate); line-height:1.8; margin-bottom:20px; text-align:left; }
.templo .btn{ margin-top:10px; }
.templo__gallery{
  margin-top:56px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.templo__gallery img{
  width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:6px;
}
.templo__gallery img:first-child{ grid-column:1 / 3; grid-row:1 / 3; aspect-ratio:auto; height:100%; }

.templo-page{ background:var(--paper); padding:0 24px 100px; }
.templo-page__inner{ max-width:760px; margin:0 auto; text-align:center; }
.templo-page__inner p{ font-size:1.05rem; color:var(--deep); line-height:1.8; margin-bottom:20px; text-align:left; }
.templo-page__inner .btn{ margin-top:10px; margin-bottom:56px; }
.templo-page__inner .templo__gallery{ margin-top:0; }

@media (max-width:700px){
  .templo__gallery{ grid-template-columns:repeat(2,1fr); }
  .templo__gallery img:first-child{ grid-column:1 / 3; aspect-ratio:16/10; height:auto; }
}

/* ===================================================================
   Nav donate link accent
=================================================================== */
.nav__donate{
  color:var(--glow) !important;
  opacity:1 !important;
}

/* ===================================================================
   Help modal (wide, with tabs)
=================================================================== */
.modal__box--wide{ max-width:620px; }
.help-modal__intro{ color:var(--slate); font-size:.95rem; margin-bottom:24px; }

.help-tabs{
  display:flex; gap:8px; margin-bottom:24px;
  border-bottom:1px solid var(--slate);
}
.help-tab{
  flex:1;
  background:none; border:0;
  padding:12px 8px;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.03em;
  color:var(--slate); cursor:pointer;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
}
.help-tab--active{ color:var(--marine); border-bottom-color:var(--glow); }

.help-form label{
  display:block; font-family:var(--mono); font-size:.7rem; letter-spacing:.04em;
  color:var(--deep); margin-bottom:16px; text-transform:uppercase;
}
.help-form input, .help-form textarea{
  display:block; width:100%; margin-top:6px;
  font-family:var(--body); font-size:.95rem; text-transform:none;
  padding:10px 12px; border:1px solid var(--slate); border-radius:6px;
  color:var(--marine); background:#fff;
}
.help-form textarea{ resize:vertical; }
.help-form__radios{ display:flex; flex-wrap:wrap; gap:16px; margin-top:8px; }
.help-form__radio{
  display:flex !important; align-items:center; gap:6px;
  font-family:var(--body) !important; text-transform:none !important;
  font-size:.9rem !important; color:var(--marine) !important;
  margin-bottom:0 !important;
}
.help-form__radio input{ width:auto !important; margin-top:0 !important; }
.help-form__legal{
  font-size:.78rem; color:var(--slate); margin:4px 0 16px; line-height:1.5;
}
.help-form button{ width:100%; justify-content:center; }

.help-modal__alt{
  margin-top:28px; padding-top:24px;
  border-top:1px solid var(--slate);
  text-align:center;
}
.help-modal__alt p{ font-size:.9rem; color:var(--deep); margin-bottom:14px; }

/* ===================================================================
   Help page (necesitamos-tu-ayuda.html) — standalone page version
=================================================================== */
.help-page{ background:var(--paper); padding:0 24px 100px; }
.help-page__inner{ max-width:620px; margin:0 auto; }
.help-page__gallery{
  display:grid; grid-template-columns:1.2fr 1fr; grid-template-rows:1fr 1fr;
  gap:10px; height:320px; margin-bottom:56px;
}
.help-page__gallery .area-collage__big{ grid-row:1 / 3; }

@media (max-width:600px){
  .help-page__gallery{ height:auto; grid-template-columns:1fr 1fr; grid-template-rows:auto; }
  .help-page__gallery .area-collage__big{ grid-column:1 / 3; grid-row:auto; aspect-ratio:16/10; }
}

/* ===================================================================
   Pastors page (standalone, pastores.html)
=================================================================== */
.pastors-page{ background:var(--paper); padding:0 24px 100px; }
.pastors-page__inner{ max-width:560px; margin:0 auto; text-align:center; }
.pastors-page__photo{
  width:220px; height:220px; margin:0 auto 32px;
  border-radius:50%; overflow:hidden;
  box-shadow:0 0 0 8px var(--paper), 0 0 0 9px var(--slate);
}
.pastors-page__photo img{ width:100%; height:100%; object-fit:cover; }
.pastors-page__inner h2{ font-size:1.7rem; color:var(--marine); margin-bottom:20px; }
.pastors-page__inner p{ font-size:1.02rem; color:var(--deep); line-height:1.8; margin-bottom:20px; }
.pastors-page__inner .btn{ margin-top:12px; }

/* ===================================================================
   Colaboradores page (standalone, colaboradores.html)
=================================================================== */
.colab-page__cta{ text-align:center; padding:40px 0 20px; }

/* ===================================================================
   Help page intro message (necesitamos-tu-ayuda.html)
=================================================================== */
.help-intro{ background:var(--paper); padding:0 24px 40px; }
.help-intro__inner{ max-width:620px; margin:0 auto; text-align:center; }
.help-intro__inner p{
  font-size:1.02rem; color:var(--deep); line-height:1.8; margin-bottom:20px;
}
.help-intro__contrast{
  font-family:var(--display); font-style:italic; font-weight:600;
  font-size:1.15rem; color:var(--marine);
  line-height:1.6;
  margin:32px 0;
}

/* ===================================================================
   Discipulado en Casa (nearest home group finder)
=================================================================== */
.discipulado{ background:var(--marine); padding:100px 24px; text-align:center; }
.discipulado__inner{ max-width:600px; margin:0 auto; }
.discipulado .eyebrow{ display:flex; justify-content:center; }
.discipulado h2{ font-size:clamp(1.7rem,3.5vw,2.3rem); color:var(--paper); margin-bottom:16px; }
.discipulado__intro{ font-size:1rem; color:var(--slate); line-height:1.7; margin-bottom:36px; }

.discipulado__form{
  display:flex; gap:12px; flex-wrap:wrap;
  justify-content:center;
}
.discipulado__form input{
  flex:1 1 320px;
  padding:14px 16px;
  font-family:var(--body); font-size:.95rem;
  border:1px solid rgba(238,240,241,.25);
  border-radius:6px;
  background:rgba(238,240,241,.06);
  color:var(--paper);
}
.discipulado__form input::placeholder{ color:var(--slate); }
.discipulado__form input:focus{ outline:1px solid var(--glow); background:rgba(238,240,241,.1); }
.discipulado__form button{ flex:0 0 auto; }

.discipulado__status{
  margin-top:24px; font-family:var(--mono); font-size:.85rem; color:var(--slate);
}
.discipulado__status--error{ color:#F3A6A6; }

.discipulado__result{
  margin-top:36px;
  background:rgba(238,240,241,.06);
  border:1px solid rgba(238,240,241,.15);
  border-radius:8px;
  padding:32px;
  text-align:left;
}
.discipulado__result-label{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.12em;
  color:var(--glow); margin-bottom:12px;
}
.discipulado__result h3{ font-size:1.3rem; color:var(--paper); margin-bottom:10px; }
.discipulado__result p{ font-size:.95rem; color:var(--slate); margin-bottom:8px; line-height:1.6; }
.discipulado__result .btn{ margin-top:16px; }

@media (max-width:600px){
  .discipulado__form{ flex-direction:column; }
  .discipulado__form input, .discipulado__form button{ width:100%; }
}

/* ===================================================================
   Discipulado en Casa — standalone page (discipulado.html)
=================================================================== */
.disc-page{ background:var(--paper); padding:0 24px 100px; }
.disc-page__inner{ max-width:620px; margin:0 auto; }

.disc-form{
  background:var(--marine);
  border-radius:10px;
  padding:40px;
  margin-bottom:32px;
}
.disc-form__row{
  display:grid; grid-template-columns:2fr 1fr; gap:16px;
  margin-bottom:20px;
}
.disc-form__row--three{ grid-template-columns:1fr 1fr 1fr; }
.disc-form label{
  display:block;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.05em;
  color:var(--slate); text-transform:uppercase;
}
.disc-form input{
  display:block; width:100%; margin-top:8px;
  padding:12px 14px;
  font-family:var(--body); font-size:.95rem; text-transform:none;
  border:1px solid rgba(238,240,241,.25);
  border-radius:6px;
  background:rgba(238,240,241,.06);
  color:var(--paper);
}
.disc-form input::placeholder{ color:var(--slate); }
.disc-form input:focus{ outline:1px solid var(--glow); background:rgba(238,240,241,.1); }
.disc-form .btn{ width:100%; justify-content:center; }

.discipulado__status{
  text-align:center;
  margin-bottom:24px; font-family:var(--mono); font-size:.85rem; color:var(--slate);
}
.discipulado__status--error{ color:#a5303a; }

.disc-page .discipulado__result{
  background:var(--marine);
  border:1px solid rgba(238,240,241,.15);
  border-radius:8px;
  padding:32px;
}
.disc-page .discipulado__result-label{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.12em;
  color:var(--glow); margin-bottom:12px;
}
.disc-page .discipulado__result h3{ font-size:1.3rem; color:var(--paper); margin-bottom:10px; }
.disc-page .discipulado__result p{ font-size:.95rem; color:var(--slate); margin-bottom:8px; line-height:1.6; }
.disc-page .discipulado__result .btn{ margin-top:16px; }

@media (max-width:600px){
  .disc-form{ padding:28px; }
  .disc-form__row, .disc-form__row--three{ grid-template-columns:1fr; }
}

/* ===================================================================
   Discipulado result — photo, address, and action buttons
=================================================================== */
.discipulado__result-photo{
  width:100%; max-width:280px; aspect-ratio:4/3; object-fit:cover;
  border-radius:8px; margin-bottom:20px; display:block;
}
.discipulado__result-address{ font-size:.92rem; color:var(--glow) !important; }

.discipulado__result-actions{
  display:flex; flex-wrap:wrap; gap:14px; margin-top:20px;
}
.disc-directions-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 22px;
  background:var(--glow); color:var(--night);
  border-radius:6px;
  font-family:var(--mono); font-size:.78rem; letter-spacing:.04em; text-transform:uppercase;
  transition:transform .15s ease, box-shadow .15s ease;
}
.disc-directions-btn svg{ width:18px; height:18px; }
.disc-directions-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(75,154,230,.35);
}

@media (max-width:600px){
  .discipulado__result-actions{ flex-direction:column; }
  .disc-directions-btn, .discipulado__result-actions .btn{ width:100%; justify-content:center; }
}

/* ===================================================================
   Necesitamos tu ayuda — single featured photo
=================================================================== */
.help-page__photo{
  margin-bottom:56px; border-radius:10px; overflow:hidden;
}
.help-page__photo img{
  width:100%; max-height:460px; object-fit:cover; display:block;
}

/* ===================================================================
   Area photos — masonry layout (each photo keeps its natural shape:
   tall photos stay tall, wide photos stay wide — nothing is cropped
   or forced into a fixed box)
=================================================================== */
.area-photos{
  flex:1 1 420px; min-width:300px;
  column-count:2; column-gap:10px;
}
.area-photos img{
  display:block; width:100%; height:auto;
  margin:0 0 10px; border-radius:12px;
  break-inside:avoid; -webkit-column-break-inside:avoid;
}

.area-photos--single, .area-photos--full{ column-count:1; }

@media (max-width:600px){
  .area-photos{ column-count:2; }
  .area-photos--single, .area-photos--full{ column-count:1; }
}

/* ===================================================================
   Pastors page — closing CTA below individual profiles
=================================================================== */
.pastors-page__cta{
  max-width:560px; margin:20px auto 0; text-align:center;
}
.pastors-page__cta p{ font-size:1rem; color:var(--deep); line-height:1.8; margin-bottom:20px; }

/* Space out multiple CTA buttons stacked in the same area-text block */
.area-text .btn + .btn{ margin-top:12px; }
.area-text .btn{ display:inline-flex; }

/* Colaboradores — italic tagline under each story block paragraph */
.story-text__tagline{
  font-family:var(--display); font-style:italic; font-weight:600;
  color:var(--marine) !important; font-size:1.1rem;
}

/* ===================================================================
   Social chips — fancier pill-style social links (pastores.html)
=================================================================== */
.social-chips{
  display:flex; flex-wrap:wrap; gap:12px;
  margin:22px 0;
}
.social-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px 10px 14px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--slate);
  font-family:var(--mono); font-size:.76rem; letter-spacing:.03em;
  color:var(--marine);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.social-chip svg{ width:18px; height:18px; flex-shrink:0; }
.social-chip:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(18,43,77,.14);
}
.social-chip--facebook:hover{ background:#1877F2; border-color:#1877F2; color:#fff; }
.social-chip--instagram:hover{
  border-color:transparent; color:#fff;
  background:linear-gradient(135deg,#f58529,#dd2a7b,#8134af,#515bd4);
}
.social-chip--youtube:hover{ background:#FF0000; border-color:#FF0000; color:#fff; }

/* ===================================================================
   Events slider (auto-advancing carousel, real events from the DB)
=================================================================== */
.events-slider{
  position:relative; max-width:640px; margin:30px auto 0;
  overflow:hidden; border-radius:12px;
}
.events-slider__track{
  display:flex; transition:transform .5s ease;
}
.events-slider__slide{
  flex:0 0 100%; width:100%;
  background:rgba(238,240,241,.06);
  border:1px solid rgba(238,240,241,.15);
  text-align:left;
}
.event-card__photo{ aspect-ratio:16/9; overflow:hidden; }
.event-card__photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.event-card__body{ padding:26px; }
.event-card__date{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--glow); margin-bottom:10px;
}
.event-card__title{ font-size:1.2rem; color:var(--paper); margin-bottom:16px; }
.event-card__more{ width:auto; }

.events-slider__dots{
  display:flex; justify-content:center; gap:8px; margin-top:18px;
}
.events-slider__dot{
  width:8px; height:8px; border-radius:50%; border:0; padding:0;
  background:rgba(238,240,241,.3); cursor:pointer; transition:background .15s ease;
}
.events-slider__dot.is-active{ background:var(--glow); }

/* Event details modal */
.event-modal__photo{ width:100%; border-radius:10px; margin-bottom:18px; display:block; }
.event-modal__date{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--glow); margin-bottom:8px;
}
.event-modal__desc{ font-size:.92rem; color:var(--deep); line-height:1.7; margin-bottom:22px; }

/* ===================================================================
   Newsletter signup (footer, all pages)
=================================================================== */
.newsletter{ background:var(--marine); padding:70px 24px; text-align:center; }
.newsletter__inner{ max-width:560px; margin:0 auto; }
.newsletter .eyebrow{ display:flex; justify-content:center; }
.newsletter h2{ font-size:clamp(1.5rem,3vw,1.9rem); color:var(--paper); margin-bottom:14px; }
.newsletter__text, .newsletter p:not(.eyebrow):not(.newsletter__status){ color:var(--slate); font-size:.95rem; line-height:1.7; margin-bottom:30px; }
.newsletter__form{
  display:flex; gap:12px; flex-wrap:wrap; justify-content:center;
}
.newsletter__form input{
  flex:1 1 200px;
  padding:12px 16px;
  font-family:var(--body); font-size:.95rem;
  border:1px solid rgba(238,240,241,.25);
  border-radius:6px;
  background:rgba(238,240,241,.06);
  color:var(--paper);
}
.newsletter__form input::placeholder{ color:var(--slate); }
.newsletter__form input:focus{ outline:1px solid var(--glow); background:rgba(238,240,241,.1); }
.newsletter__form button{ flex:0 0 auto; }
.newsletter__status{ margin-top:20px; font-family:var(--mono); font-size:.85rem; color:var(--glow); }
.newsletter__status--error{ color:#F3A6A6; }

@media (max-width:600px){
  .newsletter__form{ flex-direction:column; }
  .newsletter__form input, .newsletter__form button{ width:100%; }
}

/* ===================================================================
   Legal pages (privacy policy, etc.)
=================================================================== */
.legal-page{ background:var(--paper); padding:0 24px 100px; }
.legal-page__inner{ max-width:760px; margin:0 auto; }
.legal-page__inner p{ font-size:.98rem; color:var(--deep); line-height:1.8; margin-bottom:18px; }
.legal-page__inner h2{
  font-size:1.3rem; color:var(--marine); margin:44px 0 16px;
  padding-top:8px; border-top:1px solid var(--slate);
}
.legal-page__inner h2:first-of-type{ border-top:0; margin-top:20px; }
.legal-page__inner ul{ margin:0 0 20px 20px; }
.legal-page__inner li{ font-size:.98rem; color:var(--deep); line-height:1.8; margin-bottom:6px; }

/* ===================================================================
   Contáctanos modal — form + church info side note
=================================================================== */
.modal__box--contact{ max-width:480px; }
.contact-modal__info{
  margin-top:26px; padding-top:20px; border-top:1px solid var(--paper);
  text-align:center;
}
.contact-modal__info-title{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--slate); margin-bottom:10px;
}
.contact-modal__info p{ font-size:.92rem; color:var(--marine); margin-bottom:4px; }
.contact-modal__info a{ color:var(--glow); }