/* ================================================================
   styles.css — Piedras Firmes
   CSS puro, sin frameworks ni dependencias externas.

   PALETA: Piedra cálida + Índigo espiritual + Dorado suave
   ESTÉTICA: Moderna, juvenil, con dignidad cristiana.

   ÍNDICE
   ──────
   1.  Variables (tokens de diseño)
   2.  Reset y base global
   3.  Tipografía — clases de escala
   4.  Layout — container y utilidades
   5.  Componente: Navbar
   6.  Componente: Menú móvil
   7.  Componente: Botones
   8.  Sección: Hero
   9.  Secciones — espaciado y variantes de fondo
   10. Sección: Nosotros
   11. Sección: Servicios — Cards
   12. Sección: Eventos
   13. Sección: Mensajes anteriores (Sermones)
   14. Sección: Donaciones
   15. Sección: Ubicación
   16. Sección: Contacto + Formulario
   17. Componente: Footer
   18. Animaciones de entrada (reveal on scroll)
   19. Modo oscuro
   20. Media queries — responsive
   21. Accesibilidad
================================================================ */


/* ================================================================
   1. VARIABLES — TOKENS DE DISEÑO
   Paleta unificada: piedra caliente + índigo + dorado.
   Sin colores neón. Consistente en modo claro y oscuro.
================================================================ */
:root {

  /* ── Fondos ─────────────────────────────────────────────── */
  --clr-bg:           #f5f2ed;   /* Blanco cálido — fondo principal */
  --clr-bg-alt:       #ece8e1;   /* Crema — fondo secciones alternadas */
  --clr-surface:      #ffffff;   /* Blanco puro — tarjetas */
  --clr-dark:         #0f1117;   /* Casi negro — sección donaciones/footer */
  --clr-dark-surface: #191d26;   /* Superficie dentro de sección oscura */

  /* ── Textos ─────────────────────────────────────────────── */
  --clr-ink:           #1a1b1e;  /* Negro cálido — texto principal */
  --clr-ink-muted:     #6b6860;  /* Gris arena — texto secundario */
  --clr-ink-on-dark:   #f0ece5;  /* Crema — texto sobre fondo oscuro */
  --clr-ink-muted-dark:#9a9590;  /* Gris suave — secundario sobre oscuro */

  /* ── Acento principal — Índigo espiritual ───────────────── */
  /* Se usa en: botones primarios, foco, eventos, highlights   */
  --clr-accent:        #4f46e5;  /* Índigo vibrante */
  --clr-accent-dark:   #3730a3;  /* Índigo profundo (hover) */
  --clr-accent-light:  rgba(79, 70, 229, 0.10); /* Tinte suave */
  --clr-accent-glow:   rgba(79, 70, 229, 0.20); /* Para sombras con color */

  /* ── Acento secundario — Dorado cálido ─────────────────── */
  /* Se usa en: versículos, detalles, eyebrows del hero        */
  --clr-gold:          #c9a227;  /* Dorado cálido */
  --clr-gold-light:    rgba(201, 162, 39, 0.15);

  /* ── Bordes ─────────────────────────────────────────────── */
  --clr-border:        #ddd8d0;  /* Borde suave en modo claro */
  --clr-border-focus:  #4f46e5;  /* Borde de foco = acento índigo */

  /* ── Estados ────────────────────────────────────────────── */
  --clr-error:         #c0392b;
  --clr-success:       #27ae60;

  /* ── Referencias semánticas (usadas en componentes) ────── */
  --clr-text:          var(--clr-ink);
  --clr-muted:         var(--clr-ink-muted);

  /* ── Tipografía ─────────────────────────────────────────── */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Jost', system-ui, sans-serif;

  /* ── Escala tipográfica ─────────────────────────────────── */
  --fs-xs:   0.75rem;    /* 12px */
  --fs-sm:   0.875rem;   /* 14px */
  --fs-base: 1rem;       /* 16px */
  --fs-lg:   1.125rem;   /* 18px */
  --fs-xl:   1.5rem;     /* 24px */
  --fs-2xl:  2rem;       /* 32px */
  --fs-3xl:  2.75rem;    /* 44px */
  --fs-4xl:  3.75rem;    /* 60px */

  /* ── Line height ────────────────────────────────────────── */
  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-normal: 1.6;

  /* ── Espaciado ──────────────────────────────────────────── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-14: 3.5rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* ── Layout ─────────────────────────────────────────────── */
  --max-width:     1240px;
  --navbar-height: 72px;
  --padding-x:     clamp(var(--sp-5), 5vw, var(--sp-16));

  /* ── Radios ─────────────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   14px;
  --radius-lg:   22px;
  --radius-full: 9999px;

  /* ── Sombras ────────────────────────────────────────────── */
  --shadow-card: 0 4px 20px rgba(26, 27, 30, 0.06);
  --shadow-nav:  0 2px 16px rgba(26, 27, 30, 0.07);
  --shadow-accent: 0 8px 28px var(--clr-accent-glow);

  /* ── Transiciones ───────────────────────────────────────── */
  --transition:      220ms ease;
  --transition-slow: 700ms ease;
}


/* ================================================================
   2. RESET Y BASE GLOBAL
================================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

body {
  font-family:             var(--font-body);
  font-size:               var(--fs-base);
  line-height:             var(--lh-normal);
  color:                   var(--clr-ink);
  background-color:        var(--clr-bg);
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x:              hidden;
}

img {
  display:   block;
  max-width: 100%;
  height:    auto;
}

a {
  color:           inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor:      pointer;
  border:      none;
  background:  none;
}

input, textarea {
  font-family: inherit;
  font-size:   var(--fs-base);
}

ul, ol { list-style: none; }

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  user-select:   none;
  vertical-align: middle;
  line-height:   1;
  display:       inline-flex;
  align-items:   center;
}


/* ================================================================
   3. TIPOGRAFÍA
================================================================ */

/* Títulos grandes — Cormorant Garamond */
.heading-lg {
  font-family:    var(--font-display);
  font-size:      clamp(var(--fs-2xl), 4vw, var(--fs-3xl));
  font-weight:    400;
  line-height:    var(--lh-tight);
  color:          var(--clr-ink);
  letter-spacing: -0.01em;
}

/* Títulos medianos */
.heading-md {
  font-family:  var(--font-display);
  font-size:    clamp(var(--fs-xl), 2.5vw, var(--fs-2xl));
  font-weight:  400;
  line-height:  var(--lh-snug);
  color:        var(--clr-ink);
}

/* Cuerpo grande */
.body-lg {
  font-size:   var(--fs-lg);
  line-height: var(--lh-normal);
  font-weight: 300;
}

/* Cuerpo estándar */
.body-md {
  font-size:   var(--fs-base);
  line-height: var(--lh-normal);
  font-weight: 400;
}

/* Eyebrow — etiqueta pequeña en mayúsculas */
.eyebrow {
  display:        block;
  font-family:    var(--font-body);
  font-size:      var(--fs-xs);
  font-weight:    600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--clr-ink-muted);
}

.muted       { color: var(--clr-ink-muted); }
.text-center { text-align: center; }


/* ================================================================
   4. LAYOUT
================================================================ */
.container {
  width:     100%;
  max-width: var(--max-width);
  margin:    0 auto;
  padding:   0 var(--padding-x);
}

.section__header {
  display:         flex;
  justify-content: space-between;
  align-items:     flex-end;
  flex-wrap:       wrap;
  gap:             var(--sp-4);
  margin-bottom:   var(--sp-12);
}


/* ================================================================
   5. COMPONENTE: NAVBAR
   Fondo semi-transparente con blur. `.scrolled` añade sombra.
   El navbar está sobre el hero (z-index 100), cuyo fondo es oscuro,
   por eso los textos del nav deben ser blancos cuando el hero es visible.
================================================================ */
.navbar {
  position:         fixed;
  top:              0;
  left:             0;
  width:            100%;
  z-index:          100;
  /* Comienza transparente — JS le quita la clase cuando no hay hero visible */
  background-color: transparent;
  transition:       background-color 400ms ease,
                    box-shadow       400ms ease,
                    border-color     400ms ease;
}

/* Estado: el usuario ha hecho scroll — fondo sólido */
.navbar.scrolled {
  background-color: rgba(245, 242, 237, 0.92);
  backdrop-filter:  blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom:    1px solid var(--clr-border);
  box-shadow:       var(--shadow-nav);
}

/* En modo oscuro scrolled */
[data-theme="dark"] .navbar.scrolled {
  background-color: rgba(15, 17, 23, 0.92);
  border-bottom-color: rgba(255,255,255,0.07);
}

/* Contenedor interno */
.navbar__inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  height:          var(--navbar-height);
  max-width:       var(--max-width);
  margin:          0 auto;
  padding:         0 var(--padding-x);
  gap:             var(--sp-6);
}

/* Logo — blanco sobre hero, oscuro cuando scrolled */
.navbar__logo {
  font-family:    var(--font-display);
  font-size:      var(--fs-2xl);
  font-weight:    400;
  color:          #ffffff;
  letter-spacing: -0.01em;
  flex-shrink:    0;
  transition:     color var(--transition);
}

.navbar.scrolled .navbar__logo {
  color: var(--clr-ink);
}

[data-theme="dark"] .navbar.scrolled .navbar__logo {
  color: var(--clr-ink-on-dark);
}

/* Links de navegación desktop */
.navbar__links {
  display:     flex;
  align-items: center;
  gap:         var(--sp-8);
}

.navbar__links a {
  font-size:      var(--fs-xs);
  font-weight:    600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* Blanco sobre hero */
  color:          rgba(255, 255, 255, 0.80);
  transition:     color var(--transition);
}

.navbar__links a:hover {
  color: #ffffff;
}

/* Cuando scrolled: texto oscuro */
.navbar.scrolled .navbar__links a {
  color: var(--clr-ink-muted);
}

.navbar.scrolled .navbar__links a:hover {
  color: var(--clr-ink);
}

[data-theme="dark"] .navbar.scrolled .navbar__links a {
  color: var(--clr-ink-muted-dark);
}

[data-theme="dark"] .navbar.scrolled .navbar__links a:hover {
  color: var(--clr-ink-on-dark);
}

/* Controles del lado derecho */
.navbar__controls {
  display:     flex;
  align-items: center;
  gap:         var(--sp-3);
  flex-shrink: 0;
}

/* Ícono blanco sobre hero */
.btn-icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           40px;
  height:          40px;
  color:           rgba(255,255,255,0.80);
  border-radius:   var(--radius-full);
  transition:      color var(--transition), background-color var(--transition);
}

.btn-icon:hover {
  color:            #ffffff;
  background-color: rgba(255,255,255,0.12);
}

/* Scrolled: ícono oscuro */
.navbar.scrolled .btn-icon {
  color: var(--clr-ink-muted);
}

.navbar.scrolled .btn-icon:hover {
  color:            var(--clr-ink);
  background-color: var(--clr-accent-light);
}

/* Hamburguesa oculta en desktop */
.btn-icon--hamburger { display: none; }


/* ================================================================
   6. COMPONENTE: MENÚ MÓVIL
================================================================ */
.mobile-nav {
  display:          flex;
  flex-direction:   column;
  gap:              var(--sp-1);
  padding:          var(--sp-6) var(--padding-x);
  background-color: rgba(245, 242, 237, 0.97);
  backdrop-filter:  blur(16px);
  border-top:       1px solid var(--clr-border);
  max-height:       0;
  overflow:         hidden;
  opacity:          0;
  transition:       max-height 320ms ease, opacity 280ms ease;
}

[data-theme="dark"] .mobile-nav {
  background-color: rgba(15, 17, 23, 0.97);
  border-top-color: rgba(255,255,255,0.07);
}

.mobile-nav.is-open {
  max-height: 520px;
  opacity:    1;
}

.mobile-nav a {
  font-size:      var(--fs-xs);
  font-weight:    600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--clr-ink-muted);
  padding:        var(--sp-3) 0;
  border-bottom:  1px solid var(--clr-border);
  transition:     color var(--transition);
}

.mobile-nav a:last-of-type { border-bottom: none; }
.mobile-nav a:hover         { color: var(--clr-ink); }
.mobile-nav .btn--primary   { margin-top: var(--sp-4); }


/* ================================================================
   7. COMPONENTE: BOTONES
================================================================ */
.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--sp-2);
  font-family:     var(--font-body);
  font-size:       var(--fs-xs);
  font-weight:     600;
  letter-spacing:  0.1em;
  text-transform:  uppercase;
  padding:         0.7rem 1.6rem;
  cursor:          pointer;
  transition:      background-color var(--transition),
                   color            var(--transition),
                   border-color     var(--transition),
                   box-shadow       var(--transition),
                   transform        var(--transition);
  white-space:     nowrap;
  border:          1.5px solid transparent;
  line-height:     1;
  border-radius:   var(--radius-sm);
}

/* Primario: acento índigo */
.btn--primary {
  background-color: var(--clr-accent);
  color:            #ffffff;
  border-color:     var(--clr-accent);
}

.btn--primary:hover {
  background-color: var(--clr-accent-dark);
  border-color:     var(--clr-accent-dark);
  box-shadow:       var(--shadow-accent);
  transform:        translateY(-1px);
}

/* Outline */
.btn--outline {
  background-color: transparent;
  color:            var(--clr-ink);
  border-color:     var(--clr-border);
}

.btn--outline:hover {
  border-color:     var(--clr-accent);
  color:            var(--clr-accent);
}

/* Invertido — sobre fondos oscuros */
.btn--inverted {
  background-color: #ffffff;
  color:            var(--clr-dark);
  border-color:     #ffffff;
}

.btn--inverted:hover {
  background-color: transparent;
  color:            #ffffff;
  box-shadow:       0 0 0 1px #ffffff;
}

/* Ancho completo */
.btn--full { width: 100%; }

/* Botón de texto con flecha */
.btn--text {
  background:     none;
  border:         none;
  padding:        0;
  font-family:    var(--font-body);
  font-size:      var(--fs-xs);
  font-weight:    600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--clr-accent);
  display:        inline-flex;
  align-items:    center;
  gap:            var(--sp-2);
  cursor:         pointer;
  transition:     gap var(--transition);
}

.btn--text .material-symbols-outlined {
  font-size:  18px;
  transition: transform var(--transition);
}

.btn--text:hover .material-symbols-outlined {
  transform: translateX(5px);
}

/* ── Hero CTAs ─────────────────────────────────────────── */
/* Botón primario del hero: relleno blanco con texto índigo */
.btn--hero-primary {
  background-color: #ffffff;
  color:            var(--clr-accent);
  border-color:     #ffffff;
  padding:          0.85rem 2rem;
  border-radius:    var(--radius-sm);
  font-size:        var(--fs-sm);
}

.btn--hero-primary:hover {
  background-color: var(--clr-accent);
  color:            #ffffff;
  border-color:     var(--clr-accent);
  box-shadow:       var(--shadow-accent);
  transform:        translateY(-2px);
}

/* Botón outline del hero: borde blanco translúcido */
.btn--hero-outline {
  background-color: transparent;
  color:            #ffffff;
  border-color:     rgba(255,255,255,0.55);
  padding:          0.85rem 2rem;
  border-radius:    var(--radius-sm);
  font-size:        var(--fs-sm);
}

.btn--hero-outline:hover {
  background-color: rgba(255,255,255,0.12);
  border-color:     rgba(255,255,255,0.90);
  transform:        translateY(-2px);
}


/* ================================================================
   8. SECCIÓN: HERO
   Ocupa el 100vh. Imagen de fondo + overlay + canvas partículas.
   Animaciones de entrada escalonadas vía CSS (hero-anim).
================================================================ */
.hero {
  position:   relative;
  width:      100%;
  min-height: 100vh;
  display:    flex;
  align-items: center;
  overflow:   hidden;
  /* El hero NO tiene padding-top ya que el navbar es transparente */
}

/* ── Imagen de fondo ──────────────────────────────────── */
.hero__bg {
  position: absolute;
  inset:    0;
  z-index:  0;
}

.hero__bg img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  object-position: center;
  /* Escala suave de entrada */
  animation: heroImgScale 8s ease forwards;
}

@keyframes heroImgScale {
  from { transform: scale(1.06); }
  to   { transform: scale(1.00); }
}

/* ── Overlay ──────────────────────────────────────────── */
.hero__overlay {
  position:   absolute;
  inset:      0;
  z-index:    1;
  background: linear-gradient(
    135deg,
    rgba(10, 10, 20, 0.78) 0%,
    rgba(15, 17, 40, 0.65) 50%,
    rgba(10, 10, 20, 0.72) 100%
  );
}

/* ── Canvas de partículas ─────────────────────────────── */
.hero__canvas {
  position: absolute;
  inset:    0;
  z-index:  2;
  pointer-events: none;
}

/* ── Contenido ────────────────────────────────────────── */
.hero__content {
  position:       relative;
  z-index:        3;
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-6);
  padding-top:    calc(var(--navbar-height) + var(--sp-16));
  padding-bottom: var(--sp-20);
  max-width:      760px; /* Limita el ancho del texto */
}

/* ── Versículo eyebrow ────────────────────────────────── */
.hero__verse {
  display:     flex;
  align-items: center;
  gap:         var(--sp-3);
  font-size:   var(--fs-sm);
  font-weight: 400;
  font-style:  italic;
  color:       rgba(255, 255, 255, 0.75);
  letter-spacing: 0.02em;
}

.hero__verse-bar {
  display:          block;
  width:            28px;
  height:           1.5px;
  background-color: var(--clr-gold);
  flex-shrink:      0;
}

/* ── Título ───────────────────────────────────────────── */
.hero__title {
  font-family:    var(--font-display);
  font-size:      clamp(2.6rem, 6vw, 4.5rem);
  font-weight:    400;
  line-height:    1.1;
  color:          #ffffff;
  letter-spacing: -0.02em;
}

/* La parte en cursiva usa el dorado */
.hero__title em {
  font-style: italic;
  color:      var(--clr-gold);
}

/* ── Subtítulo ────────────────────────────────────────── */
.hero__subtitle {
  font-size:   var(--fs-lg);
  font-weight: 300;
  line-height: var(--lh-normal);
  color:       rgba(255, 255, 255, 0.75);
  max-width:   520px;
}

/* ── Botones ──────────────────────────────────────────── */
.hero__actions {
  display:     flex;
  flex-wrap:   wrap;
  gap:         var(--sp-4);
  margin-top:  var(--sp-2);
}

/* ── Indicador scroll ─────────────────────────────────── */
.hero__scroll-hint {
  position:  absolute;
  bottom:    var(--sp-8);
  left:      50%;
  transform: translateX(-50%);
  z-index:   3;
  display:   flex;
  flex-direction: column;
  align-items:    center;
  gap:        6px;
}

/* Punto que rebota */
.hero__scroll-dot {
  display:          block;
  width:            6px;
  height:           6px;
  border-radius:    var(--radius-full);
  background-color: rgba(255,255,255,0.60);
  animation:        scrollBounce 1.8s ease-in-out infinite;
}

@keyframes scrollBounce {
  0%, 100% { transform: translateY(0);   opacity: 0.6; }
  50%       { transform: translateY(8px); opacity: 1.0; }
}

/* ── Animaciones de entrada escalonadas del hero ────────── */
/* Cada elemento tiene un retraso diferente */
.hero-anim {
  opacity:   0;
  transform: translateY(22px);
  animation: heroFadeUp 0.75s ease forwards;
}

.hero-anim--1 { animation-delay: 0.25s; }
.hero-anim--2 { animation-delay: 0.45s; }
.hero-anim--3 { animation-delay: 0.60s; }
.hero-anim--4 { animation-delay: 0.75s; }
.hero-anim--5 { animation-delay: 1.00s; }

@keyframes heroFadeUp {
  to {
    opacity:   1;
    transform: translateY(0);
  }
}


/* ================================================================
   9. SECCIONES — ESPACIADO Y VARIANTES DE FONDO
================================================================ */
.section {
  padding-top:    var(--sp-20);
  padding-bottom: var(--sp-20);
}

.section--alt {
  background-color: var(--clr-bg-alt);
}

/* Sección oscura — donaciones */
.section--dark {
  background-color: var(--clr-dark);
  color:            var(--clr-ink-on-dark);
}

.section--dark .heading-lg,
.section--dark .heading-md {
  color: var(--clr-ink-on-dark);
}

.section--dark .muted  { color: var(--clr-ink-muted-dark); }
.section--dark .eyebrow{ color: var(--clr-ink-muted-dark); }

/* El hero ocupa toda la pantalla, main no necesita padding-top */
main { padding-top: 0; }


/* ================================================================
   10. SECCIÓN: NOSOTROS
================================================================ */
.section--about {
  padding-top: var(--sp-24);
}

.about__grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--sp-16);
  align-items:           center;
}

.about__text {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-6);
}

.about__image {
  aspect-ratio: 1 / 1;
  overflow:     hidden;
  border-radius: var(--radius-lg);
}

.about__image img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.about__image:hover img {
  transform: scale(1.04);
}


/* ================================================================
   11. SECCIÓN: SERVICIOS — CARDS
================================================================ */
.services__grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--sp-6);
  margin-top:            var(--sp-12);
}

/* Tarjeta */
.card {
  background-color: var(--clr-surface);
  border:           1px solid var(--clr-border);
  border-radius:    var(--radius-lg);
  padding:          var(--sp-8);
  display:          flex;
  flex-direction:   column;
  gap:              var(--sp-5);
  box-shadow:       var(--shadow-card);
  transition:       transform var(--transition),
                    box-shadow var(--transition),
                    border-color var(--transition);
}

.card:hover {
  transform:    translateY(-4px);
  box-shadow:   0 12px 32px rgba(79, 70, 229, 0.10);
  border-color: rgba(79, 70, 229, 0.20);
}

/* Línea de horario al fondo */
.card__meta {
  display:     flex;
  align-items: center;
  gap:         var(--sp-3);
  font-size:   var(--fs-sm);
  font-weight: 600;
  color:       var(--clr-accent);
  margin-top:  auto;
  padding-top: var(--sp-4);
  border-top:  1px solid var(--clr-border);
}

.card__meta .material-symbols-outlined {
  font-size: 18px;
}


/* ================================================================
   12. SECCIÓN: EVENTOS
================================================================ */
.events__list {
  display:        flex;
  flex-direction: column;
  margin-top:     var(--sp-10);
}

.event {
  display:       flex;
  gap:           var(--sp-8);
  align-items:   flex-start;
  padding:       var(--sp-8) 0;
  border-bottom: 1px solid var(--clr-border);
  transition:    transform var(--transition);
}

.event:hover {
  transform: translateX(4px);
}

.event:last-child { border-bottom: none; }

/* Bloque de fecha */
.event__date {
  width:           88px;
  min-width:       88px;
  height:          88px;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  border-radius:   var(--radius-md);
  transition:      background-color var(--transition);
}

/* Fecha primaria: índigo */
.event__date--primary {
  background-color: var(--clr-accent-light);
  border:           1px solid rgba(79, 70, 229, 0.20);
  color:            var(--clr-accent);
}

/* Fecha secundaria: neutro */
.event__date--secondary {
  background-color: var(--clr-bg-alt);
  border:           1px solid var(--clr-border);
  color:            var(--clr-ink-muted);
}

.event__month {
  font-size:      var(--fs-xs);
  font-weight:    600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity:        0.85;
}

.event__day {
  font-family: var(--font-display);
  font-size:   var(--fs-3xl);
  font-weight: 500;
  line-height: 1;
}

.event__content {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-3);
  padding-top:    var(--sp-2);
}

/* Responsive de eventos */
@media (max-width: 768px) {
  .event__date {
    width:        72px;
    min-width:    72px;
    height:       72px;
    border-radius: var(--radius-sm);
  }
  .event__day { font-size: 2rem; }
}


/* ================================================================
   13. SECCIÓN: MENSAJES ANTERIORES (SERMONES)
================================================================ */
.sermons__grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   clamp(1.2rem, 2vw, 1.8rem);
  margin-top:            var(--sp-10);
}

.sermon {
  position:         relative;
  display:          flex;
  flex-direction:   column;
  background:       var(--clr-surface);
  border:           1px solid var(--clr-border);
  border-radius:    var(--radius-lg);
  overflow:         hidden;
  cursor:           pointer;
  box-shadow:       var(--shadow-card);
  transition:       transform        var(--transition),
                    border-color     var(--transition),
                    box-shadow       var(--transition);
}

.sermon:hover {
  transform:    translateY(-6px);
  border-color: rgba(79, 70, 229, 0.20);
  box-shadow:   0 16px 40px rgba(79, 70, 229, 0.10);
}

/* Imagen */
.sermon__image {
  position:     relative;
  aspect-ratio: 16 / 9;
  overflow:     hidden;
  background:   var(--clr-bg-alt);
}

/* Overlay en hover */
.sermon__image::after {
  content:    "";
  position:   absolute;
  inset:      0;
  background: linear-gradient(to top, rgba(0,0,0,0.45), transparent);
  opacity:    0;
  transition: opacity var(--transition);
}

.sermon:hover .sermon__image::after { opacity: 1; }

.sermon__image img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform var(--transition-slow), filter var(--transition);
}

.sermon:hover .sermon__image img {
  transform: scale(1.05);
}

/* Cuerpo */
.sermon__body {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-3);
  padding:        var(--sp-5) var(--sp-6) var(--sp-6);
}

/* Tag de categoría */
.sermon__tag {
  width:          fit-content;
  padding:        0.3rem 0.65rem;
  border-radius:  var(--radius-full);
  background:     var(--clr-accent-light);
  border:         1px solid rgba(79, 70, 229, 0.15);
  color:          var(--clr-accent);
  font-size:      0.72rem;
  font-weight:    600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Línea animada en título */
.sermon .heading-md {
  position:    relative;
  font-weight: 500;
  line-height: 1.3;
  padding-bottom: var(--sp-2);
}

.sermon .heading-md::after {
  content:    "";
  position:   absolute;
  left:       0;
  bottom:     0;
  width:      0%;
  height:     1px;
  background: var(--clr-accent);
  transition: width var(--transition);
}

.sermon:hover .heading-md::after { width: 100%; }

/* Meta del sermón (autor + duración) */
.sermon__meta {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-top:      var(--sp-3);
  padding-top:     var(--sp-3);
  border-top:      1px solid var(--clr-border);
  font-size:       0.8rem;
  color:           var(--clr-ink-muted);
}

/* Responsive */
@media (max-width: 1024px) {
  .sermons__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .sermons__grid { grid-template-columns: 1fr; }
}


/* ================================================================
   14. SECCIÓN: DONACIONES
================================================================ */
.donations__intro {
  text-align:     center;
  max-width:      600px;
  margin:         0 auto var(--sp-12);
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-5);
}

.donations__grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   1.4rem;
  max-width:             860px;
  margin:                0 auto;
}

/* Tarjeta de donación */
.donation-card {
  position:         relative;
  display:          flex;
  flex-direction:   column;
  gap:              var(--sp-4);
  padding:          var(--sp-8);
  border-radius:    var(--radius-lg);
  background:       var(--clr-dark-surface);
  border:           1px solid rgba(255,255,255,0.08);
  transition:       transform var(--transition),
                    border-color var(--transition),
                    box-shadow var(--transition);
}

.donation-card:hover {
  transform:    translateY(-4px);
  border-color: rgba(79, 70, 229, 0.30);
  box-shadow:   0 12px 32px rgba(79, 70, 229, 0.15);
}

/* Ícono de la tarjeta */
.donation-card__icon {
  width:            52px;
  height:           52px;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  border-radius:    var(--radius-md);
  background:       var(--clr-accent-light);
  border:           1px solid rgba(79, 70, 229, 0.20);
  color:            #a5b4fc;
  font-size:        26px !important;
}

/* Texto dentro de tarjeta de donación */
.donation-card .heading-md {
  color:       var(--clr-ink-on-dark);
  font-size:   1.25rem;
  font-weight: 500;
}

.donation-card .body-md {
  color:       var(--clr-ink-muted-dark);
  line-height: 1.7;
}

/* Caja del CBU */
.donation-card__cbu {
  padding:       0.75rem 1rem;
  border-radius: var(--radius-sm);
  background:    rgba(0,0,0,0.25);
  border:        1px solid rgba(255,255,255,0.06);
  font-weight:   600;
  color:         #e0d8f0;
  word-break:    break-all;
  font-size:     var(--fs-sm);
}

.donation-card .eyebrow {
  color:   #a5b4fc;
  opacity: 0.9;
}

/* Modo claro para las tarjetas de donación */
html[data-theme="light"] .donation-card {
  background:   #ffffff;
  border-color: var(--clr-border);
  box-shadow:   var(--shadow-card);
}

html[data-theme="light"] .donation-card:hover {
  border-color: rgba(79, 70, 229, 0.25);
  box-shadow:   0 12px 28px rgba(79, 70, 229, 0.10);
}

html[data-theme="light"] .donation-card .heading-md {
  color: var(--clr-ink);
}

html[data-theme="light"] .donation-card .body-md {
  color: var(--clr-ink-muted);
}

html[data-theme="light"] .donation-card__cbu {
  background: var(--clr-bg-alt);
  color:      var(--clr-ink);
  border-color: var(--clr-border);
}

html[data-theme="light"] .donation-card .eyebrow {
  color: var(--clr-accent);
}


/* ================================================================
   15. SECCIÓN: UBICACIÓN
================================================================ */
.location__grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--sp-16);
  align-items:           center;
}

.location__map-placeholder {
  aspect-ratio:     4 / 3;
  background:       var(--clr-bg-alt);
  border:           1px solid var(--clr-border);
  border-radius:    var(--radius-lg);
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  justify-content:  center;
  gap:              var(--sp-3);
  text-align:       center;
  padding:          var(--sp-8);
}

.location__map-placeholder .material-symbols-outlined {
  font-size: 56px !important;
  color:     var(--clr-ink-muted);
  opacity:   0.4;
}

.location__info {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-8);
}

.location__details {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-5);
}

.location__item {
  display:          flex;
  align-items:      flex-start;
  gap:              var(--sp-4);
  padding:          var(--sp-4);
  border-radius:    var(--radius-md);
  border:           1px solid var(--clr-border);
  background:       var(--clr-surface);
  transition:       transform var(--transition), border-color var(--transition);
}

.location__item:hover {
  transform:    translateX(4px);
  border-color: rgba(79, 70, 229, 0.20);
}

.location__item .material-symbols-outlined {
  font-size:        22px !important;
  color:            var(--clr-accent);
  width:            42px;
  height:           42px;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  border-radius:    var(--radius-sm);
  background:       var(--clr-accent-light);
  flex-shrink:      0;
}

.location__item strong {
  display:       block;
  margin-bottom: var(--sp-1);
  font-size:     var(--fs-sm);
  font-weight:   600;
}

.location__item p {
  color:       var(--clr-ink-muted);
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 980px) {
  .location__grid { grid-template-columns: 1fr; }
}


/* ================================================================
   16. SECCIÓN: CONTACTO + FORMULARIO
================================================================ */
.contact__intro {
  text-align:     center;
  max-width:      520px;
  margin:         0 auto var(--sp-12);
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-4);
}

.contact__info {
  display:         flex;
  justify-content: center;
  flex-wrap:       wrap;
  gap:             var(--sp-10);
  margin-bottom:   var(--sp-14);
}

.contact__channel {
  display:     flex;
  align-items: flex-start;
  gap:         var(--sp-4);
}

.contact__channel .material-symbols-outlined {
  font-size:  24px !important;
  color:      var(--clr-accent);
  margin-top: 3px;
}

.contact__link {
  font-weight:     600;
  color:           var(--clr-ink);
  transition:      color var(--transition);
}

.contact__link:hover { color: var(--clr-accent); }

/* Contenedor del formulario */
.contact__form {
  max-width:      540px;
  margin:         0 auto var(--sp-14);
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-6);
}

.form {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-5);
}

.form__group {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-2);
}

.form__label {
  font-size:      var(--fs-xs);
  font-weight:    600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--clr-ink-muted);
}

.form__input {
  width:            100%;
  padding:          0.75rem 1rem;
  border:           1.5px solid var(--clr-border);
  background-color: var(--clr-surface);
  color:            var(--clr-ink);
  font-size:        var(--fs-base);
  font-family:      var(--font-body);
  border-radius:    var(--radius-sm);
  transition:       border-color var(--transition), box-shadow var(--transition);
  outline:          none;
}

.form__input:focus {
  border-color: var(--clr-border-focus);
  box-shadow:   0 0 0 3px var(--clr-accent-light);
}

.form__input.is-error {
  border-color: var(--clr-error);
  box-shadow:   0 0 0 3px rgba(192, 57, 43, 0.10);
}

.form__textarea {
  resize:     vertical;
  min-height: 130px;
}

.form__error {
  font-size:   var(--fs-xs);
  font-weight: 500;
  color:       var(--clr-error);
  margin-top:  var(--sp-1);
}

.form__success {
  display:     flex;
  align-items: center;
  gap:         var(--sp-3);
  font-size:   var(--fs-sm);
  font-weight: 500;
  color:       var(--clr-success);
  padding:     var(--sp-4);
  border:      1px solid rgba(39, 174, 96, 0.25);
  background:  rgba(39, 174, 96, 0.06);
  border-radius: var(--radius-sm);
}

.form__success[hidden] { display: none; }


/* ================================================================
   SECCIÓN: REDES SOCIALES
   Tarjetas grandes con color por red, ícono SVG, handle y CTA.
   Cada tarjeta tiene un color de acento único según la red.
================================================================ */
 
/* Intro de la sección */
.socials-hero {
  text-align:     center;
  max-width:      600px;
  margin:         0 auto var(--sp-14);
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-4);
}
 
/* Título con cursiva en color dorado */
.socials-hero__em {
  font-style: italic;
  color:      var(--clr-gold);
}
 
.socials-hero .heading-lg {
  color: var(--clr-ink-on-dark);
}
 
.socials-hero__sub {
  color: var(--clr-ink-muted-dark);
}
 
/* ── Grid de tarjetas ──────────────────────────────────────── */
.socials__grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   1.2rem;
}
 
/* ── Tarjeta individual ────────────────────────────────────── */
.social-card {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-5);
  padding:        var(--sp-6);
  border-radius:  var(--radius-lg);
  border:         1px solid rgba(255,255,255,0.07);
  background:     var(--clr-dark-surface);
  cursor:         pointer;
  text-decoration: none;
  color:           inherit;
 
  /* Transición completa */
  transition: transform        var(--transition),
              border-color     var(--transition),
              box-shadow       var(--transition),
              background-color var(--transition);
}
 
.social-card:hover {
  transform: translateY(-6px);
}
 
/* ── Parte superior: ícono + flecha ────────────────────────── */
.social-card__top {
  display:         flex;
  justify-content: space-between;
  align-items:     flex-start;
}
 
/* Círculo que envuelve el ícono SVG */
.social-card__icon-wrap {
  width:            52px;
  height:           52px;
  border-radius:    var(--radius-md);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  /* El color de fondo lo pone el modificador data-network */
  background:       rgba(255,255,255,0.06);
  border:           1px solid rgba(255,255,255,0.08);
  transition:       background-color var(--transition);
  flex-shrink:      0;
}
 
.social-card__svg {
  width:  22px;
  height: 22px;
  color:  rgba(255,255,255,0.85);
  transition: color var(--transition);
}
 
/* Flecha — aparece en hover */
.social-card__arrow {
  font-size:   20px !important;
  color:       rgba(255,255,255,0.25);
  transition:  color var(--transition), transform var(--transition);
}
 
.social-card:hover .social-card__arrow {
  color:     rgba(255,255,255,0.90);
  transform: translate(3px, -3px);
}
 
/* ── Cuerpo: nombre + handle + descripción ─────────────────── */
.social-card__body {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-2);
  flex-grow:      1;
}
 
/* Nombre de la red (Instagram, Facebook…) */
.social-card__network {
  font-size:      var(--fs-xs);
  font-weight:    600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          rgba(255,255,255,0.45);
}
 
/* Handle (@piedrasfirmes) */
.social-card__handle {
  font-family:    var(--font-display);
  font-size:      var(--fs-xl);
  font-weight:    400;
  color:          #ffffff;
  line-height:    1.2;
}
 
/* Descripción breve */
.social-card__desc {
  font-size:   var(--fs-sm);
  font-weight: 300;
  color:       rgba(255,255,255,0.50);
  line-height: 1.6;
}
 
/* ── Footer: CTA ────────────────────────────────────────────── */
.social-card__footer {
  border-top:  1px solid rgba(255,255,255,0.07);
  padding-top: var(--sp-4);
  margin-top:  auto;
}
 
.social-card__cta {
  font-size:      var(--fs-xs);
  font-weight:    600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          rgba(255,255,255,0.40);
  transition:     color var(--transition);
}
 
.social-card:hover .social-card__cta {
  color: rgba(255,255,255,0.90);
}
 
/* ── Colores por red (data-network) ─────────────────────────── */
 
/* Instagram — gradiente magenta/naranja */
.social-card[data-network="instagram"]:hover {
  border-color: rgba(225, 48, 108, 0.40);
  box-shadow:   0 16px 40px rgba(225, 48, 108, 0.15);
}
 
.social-card[data-network="instagram"]:hover .social-card__icon-wrap {
  background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  border-color: transparent;
}
 
/* Facebook — azul */
.social-card[data-network="facebook"]:hover {
  border-color: rgba(24, 119, 242, 0.40);
  box-shadow:   0 16px 40px rgba(24, 119, 242, 0.15);
}
 
.social-card[data-network="facebook"]:hover .social-card__icon-wrap {
  background:   rgba(24, 119, 242, 0.25);
  border-color: rgba(24, 119, 242, 0.35);
}
 
/* YouTube — rojo */
.social-card[data-network="youtube"]:hover {
  border-color: rgba(255, 0, 0, 0.35);
  box-shadow:   0 16px 40px rgba(255, 0, 0, 0.12);
}
 
.social-card[data-network="youtube"]:hover .social-card__icon-wrap {
  background:   rgba(255, 0, 0, 0.20);
  border-color: rgba(255, 0, 0, 0.30);
}
 
/* TikTok — turquesa/blanco */
.social-card[data-network="tiktok"]:hover {
  border-color: rgba(105, 201, 208, 0.40);
  box-shadow:   0 16px 40px rgba(105, 201, 208, 0.12);
}
 
.social-card[data-network="tiktok"]:hover .social-card__icon-wrap {
  background:   rgba(105, 201, 208, 0.18);
  border-color: rgba(105, 201, 208, 0.30);
}
 
/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .socials__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
 
@media (max-width: 560px) {
  .socials__grid {
    grid-template-columns: 1fr;
  }
 
  .social-card {
    flex-direction: row;
    align-items:    center;
    gap:            var(--sp-4);
    padding:        var(--sp-5);
  }
 
  .social-card__icon-wrap {
    width:     44px;
    height:    44px;
    flex-shrink: 0;
  }
 
  .social-card__body {
    gap: var(--sp-1);
  }
 
  .social-card__handle {
    font-size: var(--fs-lg);
  }
 
  .social-card__footer {
    display: none; /* En móvil pequeño se simplifica */
  }
}
 

/* ================================================================
    Estilos de la sección de testimonios
================================================================ */

#testimonios .sermon__image {
    aspect-ratio: 1 / 1; /* Fotos cuadradas o circulares */
    border-radius: 50%;  /* Esto hace que la foto sea circular */
    overflow: hidden;
    margin: 0 auto 1.5rem; /* Centra la foto */
    width: 120px;
    height: 120px;
}

#testimonios .sermon__image img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

#testimonios .sermon__body {
    text-align: center; /* Centramos el texto para que se vea más personal */
}

#testimonios .eyebrow {
    color: var(--primary-color); /* Asegúrate de tener esta variable definida */
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem;
}

#testimonios blockquote {
    font-style: italic;
    color: #555;
    margin-top: 10px;
}

 
/* ================================================================
================================================================ */
.sr-only {
  position:    absolute;
  width:       1px;
  height:      1px;
  padding:     0;
  margin:      -1px;
  overflow:    hidden;
  clip:        rect(0, 0, 0, 0);
  white-space: nowrap;
  border:      0;
}
 
:focus-visible {
  outline:        2px solid var(--clr-accent);
  outline-offset: 3px;
}
 
:focus:not(:focus-visible) { outline: none; }
 
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
 
  *, *::before, *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:       0.01ms !important;
  }
 
  .reveal, .hero-anim {
    opacity:   1;
    transform: none;
  }
}

/* ================================================================
   17. COMPONENTE: FOOTER
   Fondo oscuro consistente, sin colores neón.
   Cuatro columnas: brand | navegación | contacto | redes
================================================================ */
.footer {
  background: linear-gradient(180deg, #0f1117 0%, #0a0c10 100%);
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-top: var(--sp-16);
}

/* Grid de 4 columnas */
.footer__container {
  display:               grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap:                   var(--sp-12);
  max-width:             var(--max-width);
  margin:                0 auto;
  padding:               0 var(--padding-x) var(--sp-12);
}

/* Logo */
.footer__logo {
  font-family:   var(--font-display);
  font-size:     var(--fs-2xl);
  font-weight:   400;
  color:         #ffffff;
  margin-bottom: var(--sp-4);
  letter-spacing: -0.01em;
}

/* Descripción */
.footer__description {
  color:         var(--clr-ink-muted-dark);
  line-height:   1.75;
  max-width:     320px;
  margin-bottom: var(--sp-5);
  font-size:     var(--fs-sm);
}

/* Versículo */
.footer__verse {
  color:      rgba(165, 180, 252, 0.85);  /* Lavanda suave — alusión al índigo */
  font-style: italic;
  font-size:  var(--fs-sm);
  line-height: 1.6;
}

.footer__verse span {
  display:    block;
  margin-top: var(--sp-1);
  color:      rgba(165, 180, 252, 0.55);
  font-style: normal;
  font-size:  var(--fs-xs);
  letter-spacing: 0.05em;
}

/* Títulos de columna */
.footer__column h3 {
  font-size:      var(--fs-xs);
  font-weight:    600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          rgba(255,255,255,0.90);
  margin-bottom:  var(--sp-5);
}

/* Links de columna */
.footer__column a {
  display:        block;
  margin-bottom:  var(--sp-3);
  color:          var(--clr-ink-muted-dark);
  font-size:      var(--fs-sm);
  transition:     color var(--transition), transform var(--transition);
}

.footer__column a:hover {
  color:     rgba(165, 180, 252, 0.90);
  transform: translateX(3px);
}

/* Columna de redes sociales */
.footer__socials {
  display:        flex;
  flex-direction: column;
}

/* Barra inferior */
.footer__bottom {
  max-width:   var(--max-width);
  margin:      0 auto;
  padding:     var(--sp-6) var(--padding-x);
  border-top:  1px solid rgba(255,255,255,0.06);
  display:     flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap:   wrap;
  gap:         var(--sp-4);
  color:       var(--clr-ink-muted-dark);
  font-size:   var(--fs-xs);
}

/* Botón volver arriba — coherente con el resto del sistema */
#scrollTopBtn {
  background:     transparent;
  color:          var(--clr-ink-muted-dark);
  border:         1px solid rgba(255,255,255,0.12);
  padding:        0.5rem 1rem;
  border-radius:  var(--radius-full);
  font-size:      var(--fs-xs);
  font-weight:    500;
  letter-spacing: 0.05em;
  cursor:         pointer;
  transition:     color var(--transition),
                  border-color var(--transition),
                  transform var(--transition);
}

#scrollTopBtn:hover {
  color:        rgba(165, 180, 252, 0.90);
  border-color: rgba(165, 180, 252, 0.35);
  transform:    translateY(-2px);
}

/* Firma del desarrollador */
.footer__signature {
  display:     flex;
  gap:         var(--sp-2);
  align-items: center;
  font-size:   var(--fs-xs);
  color:       var(--clr-ink-muted-dark);
}

.footer__signature a {
  color:       rgba(165, 180, 252, 0.80);
  font-weight: 600;
  transition:  color var(--transition);
}

.footer__signature a:hover {
  color: rgba(165, 180, 252, 1);
}

/* Responsive del footer */
@media (max-width: 900px) {
  .footer__container {
    grid-template-columns: 1fr 1fr;
  }
  .footer__bottom {
    flex-direction: column;
    text-align:     center;
    gap:            var(--sp-3);
  }
}

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


/* ================================================================
   18. ANIMACIONES DE ENTRADA (REVEAL ON SCROLL)
   JS añade `.is-visible` cuando el elemento entra en el viewport.
================================================================ */
.reveal {
  opacity:    0;
  transform:  translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-visible {
  opacity:   1;
  transform: translateY(0);
}

.reveal--delay-1 { transition-delay: 120ms; }
.reveal--delay-2 { transition-delay: 240ms; }
.reveal--delay-3 { transition-delay: 360ms; }


/* ================================================================
   19. MODO OSCURO
   Paleta oscura coherente con la clara (mismos valores semánticos).
================================================================ */
[data-theme="dark"] {
  --clr-bg:           #111318;
  --clr-bg-alt:       #191d24;
  --clr-surface:      #1e2229;
  --clr-dark:         #080a0e;
  --clr-dark-surface: #13161c;

  --clr-ink:          #f0ece5;
  --clr-ink-muted:    #9a9590;
  --clr-ink-on-dark:  #f0ece5;
  --clr-ink-muted-dark: #8a8880;

  --clr-accent:       #818cf8;   /* Índigo más claro — mejor contraste en oscuro */
  --clr-accent-dark:  #6366f1;
  --clr-accent-light: rgba(129, 140, 248, 0.12);
  --clr-accent-glow:  rgba(129, 140, 248, 0.22);

  --clr-gold:         #d4ac3a;
  --clr-gold-light:   rgba(212, 172, 58, 0.12);

  --clr-border:       rgba(255, 255, 255, 0.09);
  --clr-border-focus: #818cf8;

  --clr-text:         var(--clr-ink);
  --clr-muted:        var(--clr-ink-muted);
}

/* Hero: el canvas no necesita cambio */

/* Navbar scrolled en oscuro */
[data-theme="dark"] .navbar.scrolled {
  background-color: rgba(17, 19, 24, 0.92);
}

/* Menú móvil en oscuro */
[data-theme="dark"] .mobile-nav {
  background-color: rgba(17, 19, 24, 0.97);
  border-top-color: rgba(255,255,255,0.07);
}

/* Botón outline en oscuro */
[data-theme="dark"] .btn--outline {
  border-color: var(--clr-border);
  color:        var(--clr-ink);
}

[data-theme="dark"] .btn--outline:hover {
  border-color: var(--clr-accent);
  color:        var(--clr-accent);
}

/* Form input en oscuro */
[data-theme="dark"] .form__input {
  background-color: var(--clr-surface);
  color:            var(--clr-ink);
  border-color:     var(--clr-border);
}

[data-theme="dark"] .form__input::placeholder {
  color: var(--clr-ink-muted);
}


/* ================================================================
   20. MEDIA QUERIES — RESPONSIVE
================================================================ */

/* --- Tablet: hasta 1024px --- */
@media (max-width: 1024px) {

  .navbar__links               { display: none; }
  .btn-icon--hamburger         { display: flex; }
  .navbar__controls .btn--outline { display: none; }

  .about__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-10);
  }

  .about__image {
    max-width: 70%;
    margin:    0 auto;
  }

  .services__grid {
    grid-template-columns: repeat(2, 1fr);
  }

}

/* --- Móvil: hasta 640px --- */
@media (max-width: 640px) {

  .section {
    padding-top:    var(--sp-16);
    padding-bottom: var(--sp-16);
  }

  .about__image { max-width: 100%; }

  .services__grid,
  .donations__grid {
    grid-template-columns: 1fr;
  }

  .location__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-10);
  }

  .event {
    flex-direction: column;
    gap:            var(--sp-5);
  }

  .section__header {
    flex-direction: column;
    align-items:    flex-start;
  }

  .contact__info {
    flex-direction: column;
    align-items:    center;
    gap:            var(--sp-8);
  }

  /* Hero en móvil */
  .hero__title {
    font-size: clamp(2rem, 8vw, 2.8rem);
  }

  .hero__actions {
    flex-direction: column;
  }

  .hero__actions .btn {
    width:           100%;
    justify-content: center;
  }

}


/* ================================================================
   21. ACCESIBILIDAD Y PREFERENCIAS DEL USUARIO
================================================================ */
.sr-only {
  position:    absolute;
  width:       1px;
  height:      1px;
  padding:     0;
  margin:      -1px;
  overflow:    hidden;
  clip:        rect(0, 0, 0, 0);
  white-space: nowrap;
  border:      0;
}

:focus-visible {
  outline:        2px solid var(--clr-accent);
  outline-offset: 3px;
}

:focus:not(:focus-visible) { outline: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:       0.01ms !important;
  }

  .reveal, .hero-anim {
    opacity:   1;
    transform: none;
  }
}