/* ===================================================================
   PROGRAMA AULAS SAN LUIS — sistema de diseño
   Paleta: crema, arena, dorado suave, tinta cálida
   Tipografía: Fraunces (display) + Work Sans (texto) + IBM Plex Mono (utilidad)
   Motivo de firma: el arco de medio punto de la galería real del proyecto
=================================================================== */

:root{
  --cream:#FBF7F0;
  --sand:#F1E6D3;
  --arena:#E6D3AF;
  --gold:#B08A46;
  --gold-deep:#8C6C33;
  --gold-soft:#D9BD8B;
  --ink:#2B2620;
  --ink-soft:#5C5344;
  --ink-faint:#8C8272;
  --white:#FFFFFF;
  --line: rgba(43,38,32,.13);
  --dark-bg:#241F19;
  --dark-bg2:#2E271E;
  --shadow-soft: 0 20px 50px -20px rgba(43,38,32,.18);
  --shadow-card: 0 10px 30px -12px rgba(43,38,32,.15);
  --radius-lg: 28px;
  --radius-md: 18px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* Sistema de íconos: outline uniforme, sin relleno.
   (El fill:none Y el stroke deben declararse en cada <svg> real del documento:
   los <use> heredan de sus propios ancestros, no de la definición del símbolo,
   por eso stroke:currentColor tiene que estar acá para que los íconos se vean). */
svg{ fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
#i-whatsapp path{ fill:currentColor; stroke:none; }
/* Los arcos decorativos ya definían su propio stroke-width por atributo; se preserva su grosor original */
.hero__arches svg, .closing__arches svg{ stroke-width:1.5; stroke-linecap:butt; stroke-linejoin:miter; }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Work Sans', sans-serif;
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:'Fraunces', serif;
  font-weight:500;
  margin:0 0 .5em;
  letter-spacing:-.01em;
  color:var(--ink);
}
h2{ font-size:clamp(2rem, 4vw, 2.9rem); line-height:1.15; }
h3{ font-size:1.2rem; font-weight:600; }
p{ margin:0 0 1em; color:var(--ink-soft); }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }

.container{ max-width:1180px; margin:0 auto; padding:0 24px; }

.tag{
  font-family:'IBM Plex Mono', monospace;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold-deep);
  margin-bottom:1.1em;
  display:block;
}
.tag--center{ text-align:center; }
.tag--light{ color:var(--gold-soft); }
.center{ text-align:center; max-width:760px; margin-left:auto; margin-right:auto; }
.light{ color:var(--cream) !important; }
.light p, p.light{ color:rgba(251,247,240,.78) !important; }
.lead{ font-size:1.12rem; color:var(--ink-soft); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:.95em 1.9em;
  border-radius:999px;
  font-weight:600;
  font-size:.98rem;
  border:1.5px solid transparent;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  white-space:nowrap;
}
.btn--primary{
  background:linear-gradient(135deg, var(--gold), var(--gold-deep));
  color:var(--cream);
  box-shadow:0 12px 24px -10px rgba(140,108,51,.55);
}
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 16px 30px -10px rgba(140,108,51,.65); }
.btn--ghost{
  border-color: rgba(43,38,32,.28);
  color:var(--ink);
  background:transparent;
}
.hero .btn--ghost{ border-color:rgba(251,247,240,.5); color:var(--cream); }
.btn--ghost:hover{ background:rgba(43,38,32,.06); transform:translateY(-2px); }
.hero .btn--ghost:hover{ background:rgba(251,247,240,.12); }

/* ---------- Nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:200;
  transition:background .4s var(--ease), box-shadow .4s var(--ease), padding .3s var(--ease);
  padding:20px 0;
}
.nav.is-scrolled{
  background:rgba(251,247,240,.86);
  backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line);
  padding:12px 0;
}
.nav__inner{
  max-width:1180px; margin:0 auto; padding:0 24px;
  display:flex; align-items:center; justify-content:space-between;
}
.nav__brand{
  font-family:'Fraunces', serif; font-weight:600; font-size:1.15rem;
  display:flex; align-items:center; gap:.5em;
  color:var(--cream);
  transition:color .4s var(--ease);
}
.nav.is-scrolled .nav__brand{ color:var(--ink); }
.nav__mark{ color:var(--gold-soft); }
.nav.is-scrolled .nav__mark{ color:var(--gold); }
.nav__links{ display:flex; align-items:center; gap:2.1rem; font-size:.95rem; font-weight:500; }
.nav__links a{ color:rgba(251,247,240,.88); transition:color .3s; position:relative; }
.nav.is-scrolled .nav__links a{ color:var(--ink-soft); }
.nav__links a:not(.nav__cta):hover{ color:var(--gold-soft); }
.nav.is-scrolled .nav__links a:not(.nav__cta):hover{ color:var(--gold-deep); }
.nav__cta{
  background:var(--gold); color:var(--cream) !important;
  padding:.6em 1.4em; border-radius:999px; font-weight:600;
  transition:transform .3s, box-shadow .3s;
}
.nav__cta:hover{ transform:translateY(-2px); box-shadow:0 10px 20px -8px rgba(140,108,51,.5); }
.nav__burger{
  display:none; flex-direction:column; gap:5px; background:none; border:none; padding:8px; z-index:210;
  position:relative;
}
.nav__burger span{ width:22px; height:2px; background:var(--cream); transition:.3s; }
.nav.is-scrolled .nav__burger span{ background:var(--ink); }
/* Mientras el menú está abierto, el header sube por encima del overlay
   (que tiene z-index:300) para que el botón hamburguesa/X siga visible
   y clickeable arriba de todo. El header sigue quedando por debajo de
   modales/lightbox (z-index 400/500), que son overlays independientes. */
.nav.nav--menu-open{ z-index:350; }
.nav.nav--menu-open .nav__burger span{ background:var(--ink); }

.nav__mobile{
  display:none;
  flex-direction:column; gap:0;
  background:var(--cream);
  position:fixed;
  top:0; left:0;
  width:100%;
  height:100vh;
  height:100dvh; /* alto real de viewport en móviles (evita saltos por la barra de Safari/Chrome) */
  z-index:300; /* por encima del header (200), por debajo de modal (400) y lightbox (500) */
  padding:120px 32px 40px;
  transform:translateY(-100%);
  transition:transform .4s var(--ease), opacity .4s var(--ease);
  opacity:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.nav__mobile.is-open{ transform:translateY(0); opacity:1; display:flex; }
.nav__mobile a{ padding:18px 0; border-bottom:1px solid var(--line); font-size:1.2rem; font-family:'Fraunces',serif; }
.nav__mobile .nav__cta{ text-align:center; margin-top:20px; border-bottom:none; }

/* Bloqueo de scroll del body mientras el menú está abierto.
   Se usa position:fixed (en vez de solo overflow:hidden) porque es
   la única técnica que también frena el "rubber-banding" de iOS Safari. */
body.nav-lock{
  position:fixed;
  left:0;
  right:0;
  width:100%;
  overflow:hidden;
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
   background:
    linear-gradient(
      rgba(0,0,0,.70),
      rgba(0,0,0,.70)
    ),
    url("fotospquia/IMG_3385.JPG");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow:hidden;
  padding:140px 24px 100px;
}
/* hero? */
.hero__arches{
  position:absolute; left:0; right:0; bottom:0; height:22vh; min-height:140px;
  color:rgba(251,247,240,.06);
  pointer-events:none;
}
.hero__arches svg{ width:100%; height:100%; }
.hero__content{ position:relative; z-index:2; max-width:820px; text-align:center; }
.eyebrow{
  font-family:'IBM Plex Mono', monospace; letter-spacing:.16em; text-transform:uppercase;
  font-size:.8rem; color:var(--gold-soft); margin-bottom:1.6em;
}
.hero__title{
  color:var(--cream);
  font-size:clamp(2.6rem, 7vw, 5.4rem);
  line-height:1.04;
  font-weight:500;
  margin-bottom:.5em;
}
.hero__subtitle{
  color:rgba(251,247,240,.82);
  font-size:clamp(1.05rem, 1.6vw, 1.25rem);
  max-width:640px; margin:0 auto 2.2em;
}
.hero__ctas{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.hero__scroll{
  position:absolute; bottom:36px; left:50%; transform:translateX(-50%);
  width:26px; height:42px; border:1.5px solid rgba(251,247,240,.45); border-radius:20px;
  z-index:2;
}
.hero__scroll span{
  position:absolute; top:8px; left:50%; transform:translateX(-50%);
  width:4px; height:8px; border-radius:2px; background:var(--gold-soft);
  animation:scrollDot 1.8s infinite;
}
@keyframes scrollDot{ 0%{ opacity:1; top:8px; } 70%{ opacity:0; top:22px; } 100%{ opacity:0; top:8px; } }

/* ---------- Sections ---------- */
.section{ padding:min(11vw,120px) 0; }
.section--sand{ background:var(--sand); }
.section--dark{
  background:linear-gradient(180deg, #241F19, #2E271E);
  color:var(--cream);
  padding:min(11vw,120px) 0;
}
.section--help{ background:var(--cream); }

/* ---------- Split (sobre el proyecto) ---------- */
.split{
  display:grid; grid-template-columns:1.15fr .85fr; gap:5vw; align-items:center;
}
.split__text h2{ font-size:clamp(1.9rem,3.4vw,2.6rem); }
.split__visual{ display:flex; flex-direction:column; gap:1.4rem; }
.stat-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:2rem 2.1rem;
  box-shadow:var(--shadow-card);
  position:relative;
  overflow:hidden;
}
.stat-card::before{
  content:''; position:absolute; top:-30%; right:-20%; width:160px; height:160px;
  background:radial-gradient(circle, rgba(176,138,70,.16), transparent 70%);
}
.stat-card--alt{ background:var(--sand); }
.stat-card__number{
  display:block; font-family:'Fraunces', serif; font-weight:600;
  font-size:clamp(2.4rem,4vw,3.2rem); color:var(--gold-deep); line-height:1;
  margin-bottom:.35em;
}
.stat-card__label{ font-size:.98rem; color:var(--ink-soft); }

/* ---------- Why grid ---------- */
.why-grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:1.2rem; margin-top:3rem;
}
.why-card{
  background:var(--white);
  border-radius:var(--radius-md);
  padding:2.1rem 1.2rem 1.6rem;
  text-align:center;
  box-shadow:var(--shadow-card);
  border:1px solid var(--line);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.why-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-soft); }
.why-card__icon{ width:34px; height:34px; color:var(--gold); margin-bottom:1rem; }
.why-card span{ font-family:'Fraunces', serif; font-size:1.05rem; font-weight:500; color:var(--ink); }

/* ---------- Activity grid ---------- */
.activity-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; margin-top:3rem;
}
.activity-card{
  background:var(--sand);
  border-radius:var(--radius-md) var(--radius-md) 8px 8px;
  padding:1.8rem 1.4rem;
  display:flex; align-items:center; gap:1rem;
  border:1px solid rgba(43,38,32,.06);
  transition:transform .35s var(--ease), background .35s var(--ease);
}
.activity-card:hover{ transform:translateY(-4px); background:var(--arena); }
.activity-card svg{ width:26px; height:26px; color:var(--gold-deep); flex-shrink:0; }
.activity-card h3{ font-size:.98rem; margin:0; line-height:1.3; overflow-wrap:anywhere; }

/* ---------- Timeline ---------- */
.timeline{ position:relative; max-width:760px; margin:4rem auto 0; padding-left:2.4rem; }
.timeline__track{
  position:absolute; left:11px; top:6px; bottom:6px; width:2px;
  background:linear-gradient(180deg, var(--gold-soft), rgba(217,189,139,.15));
}
.timeline__item{ position:relative; padding-bottom:3rem; padding-left:1.6rem; }
.timeline__item:last-child{ padding-bottom:0; }
.timeline__node{
  position:absolute; left:-2.4rem; top:0; width:24px; height:24px; border-radius:50%;
  background:var(--gold); display:flex; align-items:center; justify-content:center;
  border:3px solid #241F19; z-index:1;
}
.timeline__node svg{ width:13px; height:13px; color:#241F19; }
.timeline__item:not(.is-done):not(.is-current) .timeline__node{
  background:transparent; border:2px solid rgba(251,247,240,.3);
}
.timeline__item.is-current .timeline__node{ background:transparent; border:none; }
.pulse{
  width:24px; height:24px; border-radius:50%; background:var(--gold); position:relative; display:block;
}
.pulse::after{
  content:''; position:absolute; inset:-6px; border-radius:50%; border:2px solid var(--gold);
  animation:pulseRing 2s infinite;
}
@keyframes pulseRing{ 0%{ transform:scale(.7); opacity:1; } 100%{ transform:scale(1.5); opacity:0; } }
.timeline__phase{
  font-family:'IBM Plex Mono', monospace; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold-soft); display:block; margin-bottom:.4em;
}
.timeline__body h3{ color:var(--cream); margin-bottom:.3em; }
.timeline__body p{ margin:0; max-width:480px; }
.timeline__item:not(.is-done):not(.is-current) .timeline__body h3,
.timeline__item:not(.is-done):not(.is-current) .timeline__body p{ opacity:.55; }

/* ---------- Building grid ---------- */
.building-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; margin-top:3rem;
}
.building-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:50% 50% var(--radius-md) var(--radius-md) / 40px 40px var(--radius-md) var(--radius-md);
  padding:2.4rem 1.5rem 1.7rem;
  text-align:center;
  box-shadow:var(--shadow-card);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.building-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-soft); }
.building-card svg{ width:30px; height:30px; color:var(--gold-deep); margin-bottom:1rem; }
.building-card h3{ margin-bottom:.4em; }
.building-card p{ font-size:.92rem; margin:0; }

/* ---------- Gallery / Lightbox ---------- */
.gallery{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:3rem;
}
.gallery__item{
  position:relative; border:none; padding:0; border-radius:var(--radius-md); overflow:hidden;
  aspect-ratio:4/5; background:var(--white); box-shadow:var(--shadow-card);
  transition:transform .4s var(--ease);
}
.gallery__item--wide{ grid-column:span 2; aspect-ratio:8/5; }
.gallery__item:hover{ transform:translateY(-5px); }
.gallery__item img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.gallery__item:hover img{ transform:scale(1.06); }
.gallery__item span{
  position:absolute; left:0; right:0; bottom:0; padding:1rem 1.1rem .9rem;
  background:linear-gradient(180deg, transparent, rgba(36,31,25,.82));
  color:var(--cream); font-family:'IBM Plex Mono', monospace; font-size:.78rem; text-align:left;
  letter-spacing:.02em;
}

.lightbox{
  position:fixed; inset:0; background:rgba(20,17,13,.94); z-index:500;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .35s var(--ease);
}
.lightbox.is-open{ opacity:1; pointer-events:all; }
.lightbox__figure{ max-width:min(90vw, 1000px); max-height:82vh; margin:0; text-align:center; }
.lightbox__figure img{ max-height:70vh; margin:0 auto; border-radius:8px; }
.lightbox__figure figcaption{
  color:var(--gold-soft); font-family:'IBM Plex Mono', monospace; font-size:.85rem; margin-top:1.2rem; letter-spacing:.04em;
}
.lightbox__close, .lightbox__nav{
  position:absolute; background:rgba(251,247,240,.08); border:1px solid rgba(251,247,240,.2);
  color:var(--cream); border-radius:50%; width:48px; height:48px;
  display:flex; align-items:center; justify-content:center; transition:background .3s;
}
.lightbox__close svg, .lightbox__nav svg{ width:20px; height:20px; }
.lightbox__close:hover, .lightbox__nav:hover{ background:rgba(251,247,240,.18); }
.lightbox__close{ top:28px; right:28px; }
.lightbox__nav--prev{ left:28px; top:50%; transform:translateY(-50%); }
.lightbox__nav--next{ right:28px; top:50%; transform:translateY(-50%); }

/* ---------- Ayudar / Help ---------- */
/* ---------- Ayudar / Help ---------- */
.help-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:1.6rem;
  margin-top:3rem;
}

.help-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:2.6rem;
  text-align:center;
  box-shadow:var(--shadow-card);

  display:flex;
  flex-direction:column;
  align-items:center;

  height:100%;
}

.help-card__icon{
  width:44px;
  height:44px;
  color:var(--gold-deep);
  margin-bottom:1.2rem;
}

.help-card p{
  max-width:340px;
}

.help-card .btn{
  margin-top:auto;
}

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

/* ---------- Modal Donar ---------- */
.modal{ position:fixed; inset:0; z-index:400; display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .35s var(--ease); padding:24px; }
.modal.is-open{ opacity:1; pointer-events:all; }
.modal__backdrop{ position:absolute; inset:0; background:rgba(36,31,25,.6); backdrop-filter:blur(3px); }
.modal__card{
  position:relative; background:var(--cream); border-radius:var(--radius-lg);
  max-width:460px; width:100%; max-height:85vh; box-shadow:0 40px 80px -20px rgba(0,0,0,.35);
  transform:translateY(16px) scale(.98); transition:transform .4s var(--ease);
  display:flex; flex-direction:column; overflow:hidden;
}
.modal.is-open .modal__card{ transform:translateY(0) scale(1); }
.modal__close{
  position:absolute; top:20px; right:20px; z-index:2;
  background:var(--cream); border:none; color:var(--ink-soft);
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px -4px rgba(43,38,32,.25);
  transition:background .25s;
}
.modal__close:hover{ background:var(--sand); }
.modal__close svg{ width:20px; height:20px; }
.modal__scroll{ overflow-y:auto; padding:2.6rem; }
.modal__scroll::-webkit-scrollbar{ width:8px; }
.modal__scroll::-webkit-scrollbar-track{ background:transparent; }
.modal__scroll::-webkit-scrollbar-thumb{ background:var(--gold-soft); border-radius:8px; }
.modal__intro{ font-size:.95rem; }
.modal__field{ margin-bottom:1.3rem; }
.modal__label{ display:block; font-family:'IBM Plex Mono', monospace; font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-faint); margin-bottom:.4em; }
.modal__value-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
  background:var(--white); border:1px solid var(--line); border-radius:12px; padding:.8em 1em; }
.modal__value{ font-family:'IBM Plex Mono', monospace; font-size:.92rem; word-break:break-all; }
.copy-btn{
  display:flex; align-items:center; gap:.35em; background:var(--sand); border:none; border-radius:8px;
  padding:.5em .8em; font-size:.8rem; font-weight:600; color:var(--gold-deep); flex-shrink:0;
  transition:background .25s;
}
.copy-btn svg{ width:14px; height:14px; }
.copy-btn:hover{ background:var(--arena); }
.copy-btn.is-copied{ background:var(--gold); color:var(--cream); }
.modal__note{ font-size:.8rem; color:var(--ink-faint); margin-top:1rem; margin-bottom:0; }

.modal__divider{ height:1px; background:var(--line); margin:1.8rem 0 1.4rem; }
.modal__subtitle{
  display:flex; align-items:center; gap:.6em;
  font-family:'IBM Plex Mono', monospace; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold-deep); font-weight:600; margin:0 0 1.2em;
}
.modal__subtitle svg{ width:16px; height:16px; flex-shrink:0; }

.modal__card--wide{ max-width:600px; }
.modal__image{
  width:100%; display:block; margin-top:1.4rem;
  border-radius:var(--radius-md); border:1px solid var(--line);
}

/* ---------- Recibos oficiales ---------- */
.receipt-card{
  display:flex; align-items:flex-start; gap:1.8rem;
  max-width:820px; margin:2.5rem auto 0;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:2.4rem 2.6rem; box-shadow:var(--shadow-card);
}
.receipt-card__icon{
  flex-shrink:0; width:64px; height:64px; border-radius:50%;
  background:var(--sand); display:flex; align-items:center; justify-content:center;
}
.receipt-card__icon svg{ width:30px; height:30px; color:var(--gold-deep); stroke-width:1.6; }
.receipt-card__text p{ margin-bottom:1rem; }
.receipt-card__badge{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:'IBM Plex Mono', monospace; font-size:.76rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gold-deep); background:var(--sand); border-radius:999px; padding:.5em 1em; font-weight:600;
}
.receipt-card__badge svg{ width:14px; height:14px; color:var(--gold-deep); stroke-width:2; }

@media (max-width:640px){
  .receipt-card{ flex-direction:column; align-items:flex-start; padding:2rem 1.6rem; }
}

/* ---------- Closing ---------- */
.closing{
  position:relative;
  background:linear-gradient(160deg, #1D1811, #241F19 60%, #2E271E);
  padding:min(14vw,150px) 24px;
  text-align:center; overflow:hidden;
}
.closing__arches{ position:absolute; left:0; right:0; top:0; height:20vh; min-height:120px; color:rgba(251,247,240,.05); transform:scaleY(-1); }
.closing__arches svg{ width:100%; height:100%; }
.closing__content{ position:relative; max-width:760px; margin:0 auto; }
.closing__content h2{ font-size:clamp(1.7rem,3.4vw,2.4rem); margin-bottom:1.3em; }

/* ---------- Footer ---------- */
.footer{ background:#1D1811; padding:2.6rem 0; }
.footer__inner{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem; }
.footer p{ color:rgba(251,247,240,.7); font-size:.88rem; margin:0; }
.footer__muted{ color:rgba(251,247,240,.4) !important; }

/* ---------- Floating WhatsApp ---------- */
.float-whatsapp{
  position:fixed; bottom:26px; right:26px; z-index:150;
  width:60px; height:60px; border-radius:50%;
  background:#3EA050;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 30px -8px rgba(0,0,0,.4);
  transition:transform .3s var(--ease);
}
.float-whatsapp:hover{ transform:scale(1.08); }
.float-whatsapp svg{ width:30px; height:30px; color:#fff; }

/* ---------- Scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ================= RESPONSIVE ================= */
@media (max-width:1000px){
  .nav__links{ display:none; }
  .nav__burger{ display:flex; }
  .split{ grid-template-columns:1fr; gap:2.6rem; }
  .why-grid{ grid-template-columns:repeat(3,1fr); }
  .activity-grid{ grid-template-columns:repeat(3,1fr); }
  .building-grid{ grid-template-columns:repeat(2,1fr); }
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .gallery__item--wide{ grid-column:span 2; }
  .help-grid{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .activity-grid{ grid-template-columns:1fr; gap:.9rem; }
  .activity-card{ align-items:flex-start; padding:1.3rem 1.1rem; }
}
@media (max-width:640px){
  .container{ padding:0 20px; }
  .why-grid{ grid-template-columns:repeat(2,1fr); }
  .building-grid{ grid-template-columns:1fr 1fr; }
  .gallery{ grid-template-columns:1fr 1fr; }
  .gallery__item--wide{ grid-column:span 2; aspect-ratio:16/10; }
  .hero{ padding:120px 20px 90px; }
  .hero__ctas{ flex-direction:column; width:100%; }
  .hero__ctas .btn{ width:100%; }
  .lightbox__nav{ width:40px; height:40px; }
  .lightbox__nav--prev{ left:10px; }
  .lightbox__nav--next{ right:10px; }
  .lightbox__close{ top:16px; right:16px; }
  .float-whatsapp{ width:54px; height:54px; bottom:18px; right:18px; }
  .modal__scroll{ padding:2rem 1.5rem; }
  .modal__card{ max-height:88vh; }
  .footer__inner{ flex-direction:column; text-align:center; }
}

.caritas-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:24px;
  margin-top:48px;
}

.caritas-card{
  background:#fff;
  padding:32px;
  border-radius:20px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  transition:.3s ease;
}

.caritas-card:hover{
  transform:translateY(-8px);
}

.caritas-icon{
  font-size:3rem;
  margin-bottom:16px;
}

.caritas-card h3{
  margin-bottom:12px;
}

.caritas-card p{
  color:#666;
  line-height:1.7;
}

.caritas-list{
  margin-top:16px;
  padding-left:18px;
  color:#666;
}

.caritas-list li{
  margin-bottom:8px;
}

.caritas-icon{
  width:70px;
  height:70px;
  border-radius:50%;
  background:var(--sand);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 20px;
}

.caritas-icon svg{
  width:34px;
  height:34px;
  color:var(--gold-deep);
  stroke-width:1.6;
}

.caritas-card{
  text-align:center;
}

.caritas-card h3{
  margin-bottom:12px;
}

.caritas-card p{
  color:#666;
  line-height:1.7;
}

.footer__social{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:.6rem;
    margin:.8rem 0;
    font-size:.95rem;
}

.footer__icon{
    width:20px;
    height:20px;
    color:var(--accent);
    flex-shrink:0;
}

.footer__social a{
    color:var(--accent);
    text-decoration:none;
    font-weight:600;
    transition:opacity .25s ease;
}

.footer__social a:hover{
    opacity:.75;
}