/* =========================================================================
   Educar Para Liderar — Design System
   Static HTML/CSS/vanilla JS. No build step, no framework.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------------------- */
:root {
  /* Color system */
  --ink: #182338;
  --ink-soft: #4b5670;
  --ink-faint: #7c869c;
  --cream: #fffaf1;
  --paper: #fdf1de;
  --paper-deep: #f7e6c6;
  --white: #ffffff;

  --gold: #c9962b;
  --gold-deep: #916c1f;
  --gold-tint: #f4e2b8;

  --coral: #dd5b3a;
  --coral-deep: #b74323;
  --coral-deeper: #96371d;
  --teal: #157f77;
  --teal-deep: #0e5b55;
  --sky: #2f5fa8;
  --sky-deep: #1f3f75;

  --focus-ring: #1f3f75;

  /* Typography */
  --font-display: "Fraunces", "Iowan Old Style", "Georgia", serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;

  --fs-eyebrow: 0.78rem;
  --fs-small: 0.9rem;
  --fs-body: clamp(1rem, 0.94rem + 0.25vw, 1.125rem);
  --fs-lede: clamp(1.1rem, 1rem + 0.5vw, 1.4rem);
  --fs-h3: clamp(1.2rem, 1.1rem + 0.4vw, 1.45rem);
  --fs-h2: clamp(1.9rem, 1.5rem + 1.8vw, 2.85rem);
  --fs-h1: clamp(2.5rem, 1.7rem + 3.6vw, 4.5rem);
  --fs-stat: clamp(2.6rem, 1.9rem + 3vw, 4rem);

  --lh-tight: 1.08;
  --lh-snug: 1.3;
  --lh-body: 1.65;

  /* Layout */
  --radius-sm: 10px;
  --radius-md: 20px;
  --radius-lg: 32px;
  --radius-pill: 999px;
  --container-w: 1180px;
  --gutter: clamp(20px, 4vw, 48px);
  --section-pad: clamp(56px, 9vw, 112px);

  --shadow-sm: 0 2px 10px rgba(24, 35, 56, 0.06);
  --shadow-md: 0 12px 32px rgba(24, 35, 56, 0.12);
  --shadow-lg: 0 24px 64px rgba(24, 35, 56, 0.18);

  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* -------------------------------------------------------------------------
   2. RESET & BASE
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--ink);
  background: var(--cream);
  line-height: var(--lh-body);
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  color: var(--ink);
}

h1 { font-size: var(--fs-h1); font-weight: 600; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 600; }

p { margin: 0 0 1.1em; max-width: 62ch; }
p.lede { max-width: 48ch; }

a { color: var(--sky-deep); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--coral-deep); }

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

ul { padding: 0; margin: 0; }

blockquote { margin: 0; }

/* Focus visibility everywhere */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  background: var(--ink);
  color: var(--white);
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  z-index: 1000;
  font-family: var(--font-body);
  font-weight: 700;
  transition: top 0.15s var(--ease);
}
.skip-link:focus { top: 12px; }

.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;
}

/* -------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   ------------------------------------------------------------------------- */
.container {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

section { position: relative; padding: var(--section-pad) 0; }
.section-alt { background: var(--paper); }
.section-tight { padding: clamp(40px, 6vw, 72px) 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: var(--fs-eyebrow);
  color: var(--coral-deep);
  font-weight: 700;
  margin-bottom: 14px;
}
.eyebrow::before {
  content: "";
  width: 22px; height: 2px;
  background: var(--coral);
  border-radius: 2px;
}

/* Section divider (organic wave) */
.divider {
  display: block;
  width: 100%;
  height: clamp(28px, 6vw, 64px);
  margin-bottom: -1px;
}
.divider-cream-to-paper path { fill: var(--paper); }
.divider-paper-to-cream path { fill: var(--cream); }
.divider-cream-to-ink path { fill: var(--ink); }
.divider-flip { transform: scaleY(-1); }

/* Two-column asymmetric layouts */
.two-col {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.two-col.reverse { grid-template-columns: 0.95fr 1.05fr; }
.two-col.reverse > *:first-child { order: 2; }
.two-col.reverse > *:last-child { order: 1; }

/* Grid/flex items default to min-width:auto, which lets long unbroken
   content (a long word, a wide inline image) push a track wider than its
   share and force horizontal scroll. min-width:0 lets each item shrink to
   fit its track instead. */
.card-grid > *,
.team-grid > *,
.stats .container > *,
.donate-options > *,
.footer-grid > *,
.gallery-grid > * {
  min-width: 0;
}

/* -------------------------------------------------------------------------
   4. BUTTONS
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.98rem;
  padding: 13px 26px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), background 0.15s var(--ease), color 0.15s var(--ease);
  min-height: 44px;
  line-height: 1.1;
}
.btn:hover { transform: translateY(-2px); text-decoration: none; }
.btn:active { transform: translateY(0); }

/* Gold buttons use dark ink text on the bright gold background — white text on
   this gold only reaches a ~2.7:1 contrast ratio, which fails WCAG AA (needs
   4.5:1 for normal-size button text). Ink on gold reaches ~5.9:1. */
.btn-gold { background: var(--gold); color: var(--ink); box-shadow: var(--shadow-sm); }
.btn-gold:hover { background: var(--gold-deep); color: var(--white); box-shadow: var(--shadow-md); }

/* Donate buttons use the deeper coral as their default background — the
   brighter --coral only reaches ~3.7:1 with white text (fails AA); coral-deep
   reaches ~5.5:1. */
.btn-donate { background: var(--coral-deep); color: var(--white); box-shadow: var(--shadow-sm); }
.btn-donate:hover { background: var(--coral-deeper); color: var(--white); box-shadow: var(--shadow-md); }

.btn-outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-outline:hover { background: var(--ink); color: var(--white); }

.btn-ghost-light { border-color: rgba(255,255,255,0.6); color: var(--white); background: transparent; }
.btn-ghost-light:hover { background: var(--white); color: var(--ink); }

/* -------------------------------------------------------------------------
   5. HEADER / NAVIGATION
   ------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(255, 250, 241, 0.88);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.site-header.is-scrolled {
  background: rgba(255, 250, 241, 0.98);
  border-bottom-color: var(--paper-deep);
  box-shadow: var(--shadow-sm);
}

.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px var(--gutter);
  max-width: var(--container-w);
  margin: 0 auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--ink);
  text-decoration: none;
  flex-shrink: 0;
}
.brand:hover { color: var(--ink); }
.brand img { width: 44px; height: 44px; }

.main-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 26px);
  font-family: var(--font-body);
  font-size: 0.94rem;
  font-weight: 600;
}
.main-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.main-nav a:hover { color: var(--ink); border-bottom-color: var(--gold-tint); }
.main-nav a.active {
  color: var(--coral-deep);
  border-bottom-color: var(--coral);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.lang-toggle {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--paper-deep);
  background: var(--white);
  border-radius: var(--radius-pill);
  overflow: hidden;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
}
.lang-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px 14px;
  color: var(--ink-soft);
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  min-height: 44px;
  min-width: 44px;
}
.lang-btn.active { background: var(--ink); color: var(--white); }
.lang-btn:hover:not(.active) { background: var(--paper); }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--paper-deep);
  background: var(--white);
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* Donate is duplicated as the last item inside the collapsible menu so it
   stays reachable once the header's own inline Donate button is hidden on
   narrow phones (see the 640px query below) — same link, same data-i18n
   key, just relocated so nothing overflows a 320–390px header row. */
.main-nav .nav-donate-mobile { display: none; }
.main-nav.is-open .nav-donate-mobile {
  margin-top: 12px;
  padding: 13px 22px;
  text-align: center;
  background: var(--gold);
  color: var(--ink);
  border: none;
  border-radius: var(--radius-pill);
  font-weight: 700;
  min-height: 44px;
  box-shadow: var(--shadow-sm);
}
.main-nav.is-open .nav-donate-mobile:hover { background: var(--gold-deep); color: var(--white); }

/* -------------------------------------------------------------------------
   6. HERO
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: linear-gradient(175deg, var(--sky-deep) 0%, var(--ink) 100%);
  color: var(--white);
  padding: clamp(56px, 8vw, 100px) 0 clamp(90px, 10vw, 130px);
  overflow: hidden;
}
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.5;
  pointer-events: none;
}
.hero::before {
  width: 360px; height: 360px;
  background: radial-gradient(circle at 30% 30%, var(--gold) 0%, transparent 70%);
  top: -140px; right: -80px;
  opacity: 0.35;
}
.hero::after {
  width: 260px; height: 260px;
  background: radial-gradient(circle at 60% 40%, var(--coral) 0%, transparent 72%);
  bottom: -120px; left: -60px;
  opacity: 0.3;
}
.hero .container {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  position: relative;
  z-index: 1;
}
.hero .eyebrow { color: var(--gold-tint); }
.hero .eyebrow::before { background: var(--gold-tint); }
.hero h1 { color: var(--white); font-size: var(--fs-h1); max-width: 16ch; }
.hero p.lede { color: rgba(255,255,255,0.86); }
.hero .cta-row { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }

/* .hero-media is intentionally NOT overflow:hidden — the gold ring below
   sits partly outside the frame, and clipping it here (as the previous,
   single-element version did) hid the decoration entirely. The rounded
   corners + shadow move to the inner .hero-media-frame, which is the only
   thing that actually needs to clip the video. */
.hero-media {
  position: relative;
  transform: rotate(1.2deg);
}
.hero-media-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 6px solid rgba(255,255,255,0.12);
}
.hero-media::before {
  content: "";
  position: absolute;
  inset: -18px auto auto -18px;
  width: 90px; height: 90px;
  border: 5px solid var(--gold);
  border-radius: 50%;
  z-index: -1;
}
.hero-media video {
  width: 100%;
  max-height: 520px;
  display: block;
  background: var(--ink);
  margin: 0 auto;
}

/* -------------------------------------------------------------------------
   7. STATS
   ------------------------------------------------------------------------- */
.stats {
  background: var(--gold);
  background-image:
    radial-gradient(circle at 8% 20%, rgba(255,255,255,0.18) 0, transparent 40%),
    radial-gradient(circle at 92% 80%, rgba(255,255,255,0.14) 0, transparent 42%);
  color: var(--ink);
  padding: clamp(40px, 6vw, 64px) 0;
}
.stats .container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 3vw, 32px);
}
.stat-card {
  text-align: center;
  padding: 8px 10px;
  border-right: 1px solid rgba(24,35,56,0.14);
}
.stat-card:last-child { border-right: none; }
.stat-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-stat);
  display: block;
  line-height: 1;
  margin-bottom: 8px;
}
.stat-label {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  display: block;
  max-width: 22ch;
  margin: 0 auto;
}

/* -------------------------------------------------------------------------
   8. MEDIA FRAMES / PLACEHOLDER-MEDIA
   ------------------------------------------------------------------------- */
.placeholder-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: repeating-linear-gradient(45deg, #24447a, #24447a 12px, #1b3b6f 12px, #1b3b6f 24px);
}
.placeholder-media.light {
  background: repeating-linear-gradient(45deg, var(--paper-deep), var(--paper-deep) 12px, var(--paper) 12px, var(--paper) 24px);
}
.placeholder-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.placeholder-media.frame-round { border-radius: 50% / 38%; }
.placeholder-media.frame-organic { border-radius: 58% 42% 51% 49% / 44% 48% 52% 56%; }

.two-col .placeholder-media { align-self: stretch; }

/* -------------------------------------------------------------------------
   9. CARDS
   ------------------------------------------------------------------------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 30px);
  margin-top: clamp(28px, 4vw, 40px);
}
.card {
  background: var(--white);
  border: 1px solid var(--paper-deep);
  border-radius: var(--radius-md);
  padding: clamp(24px, 3vw, 32px);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
  position: relative;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--gold-tint); }
.card h3 { font-size: 1.15rem; margin-bottom: 10px; }
.card p { margin-bottom: 0; }
.card .card-mark {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
  color: var(--coral-deep);
  font-family: var(--font-display);
  font-weight: 700;
}

/* -------------------------------------------------------------------------
   10. QUOTE
   ------------------------------------------------------------------------- */
blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.9rem);
  line-height: 1.4;
  border-left: 4px solid var(--gold);
  padding-left: clamp(20px, 3vw, 32px);
  color: var(--ink);
  max-width: 46ch;
  margin: 0 auto;
}
blockquote cite,
blockquote span.attribution {
  display: block;
  font-style: normal;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink-soft);
  margin-top: 16px;
}
section:has(blockquote) .container { text-align: center; }
section:has(blockquote) blockquote { text-align: left; display: inline-block; }

/* -------------------------------------------------------------------------
   11. DONATE CTA (band)
   ------------------------------------------------------------------------- */
.donate-cta {
  background: var(--ink);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: clamp(32px, 5vw, 56px);
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(24px, 4vw, 40px);
  align-items: center;
  position: relative;
  overflow: hidden;
}
.donate-cta::before {
  content: "";
  position: absolute;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--teal) 0%, transparent 70%);
  opacity: 0.35;
  top: -100px; right: -60px;
}
.donate-cta h2, .donate-cta p { color: var(--white); position: relative; z-index: 1; }
.donate-cta .placeholder-media { position: relative; z-index: 1; }

/* -------------------------------------------------------------------------
   12. TEAM
   ------------------------------------------------------------------------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 3vw, 36px);
  margin-top: clamp(28px, 4vw, 40px);
}
.team-card {
  background: var(--white);
  border: 1px solid var(--paper-deep);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.team-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.team-photo {
  aspect-ratio: 1/1;
  background: repeating-linear-gradient(45deg, var(--paper-deep), var(--paper-deep) 12px, var(--paper) 12px, var(--paper) 24px);
  overflow: hidden;
}
.team-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
/* Team members without a photo on file yet fall back to plain text (see
   team.html) — style it as an intentional "photo coming soon" placeholder
   instead of a raw file-path dump. */
.team-photo:not(:has(img)) {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 28px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.6;
  color: var(--ink-faint);
}
.team-photo:not(:has(img)) em {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-weight: 400;
  font-size: 0.78rem;
  opacity: 0.75;
}
.team-body { padding: clamp(20px, 3vw, 26px) clamp(20px, 3vw, 28px) 28px; }
.team-role {
  font-family: var(--font-body);
  color: var(--coral-deep);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.team-body h3 { font-size: 1.2rem; margin-bottom: 10px; }

/* -------------------------------------------------------------------------
   13. GALLERY
   ------------------------------------------------------------------------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.5vw, 22px);
  margin-top: clamp(24px, 3vw, 34px);
}
.gallery-tile {
  aspect-ratio: 4/3;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: repeating-linear-gradient(45deg, #e7effe, #e7effe 12px, #dbe7fc 12px, #dbe7fc 24px);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.gallery-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.gallery-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* -------------------------------------------------------------------------
   14. DONATE PAGE
   ------------------------------------------------------------------------- */
.donate-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.donate-tier {
  border: 1px solid var(--paper-deep);
  border-radius: var(--radius-md);
  padding: clamp(20px, 2.5vw, 26px);
  background: var(--white);
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.donate-tier:hover { border-color: var(--gold); box-shadow: var(--shadow-md); }
.donate-tier .amount {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.7rem;
  color: var(--sky-deep);
  display: block;
  margin-bottom: 8px;
}
.donate-tier p { font-size: 0.92rem; color: var(--ink-soft); }

#donate-button-container {
  padding: clamp(28px, 4vw, 40px);
  background: var(--paper);
  border-radius: var(--radius-lg);
  border: 1px dashed var(--gold);
}

/* -------------------------------------------------------------------------
   15. CONTACT FORM
   ------------------------------------------------------------------------- */
form.contact-form {
  display: grid;
  gap: 18px;
  max-width: 560px;
  background: var(--white);
  padding: clamp(24px, 3vw, 32px);
  border-radius: var(--radius-md);
  border: 1px solid var(--paper-deep);
  box-shadow: var(--shadow-sm);
}
form.contact-form label {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  display: block;
  margin-bottom: 6px;
  color: var(--ink-soft);
}
form.contact-form input,
form.contact-form textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--paper-deep);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 1rem;
  background: var(--cream);
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
form.contact-form input:focus,
form.contact-form textarea:focus {
  border-color: var(--sky);
  background: var(--white);
  outline: none;
}

/* -------------------------------------------------------------------------
   16. PAGE HERO (inner pages)
   ------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  background: linear-gradient(160deg, var(--sky-deep) 0%, var(--ink) 100%);
  color: var(--white);
  padding: clamp(56px, 8vw, 88px) 0 clamp(64px, 9vw, 96px);
  overflow: hidden;
}
.page-hero::after {
  content: "";
  position: absolute;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--coral) 0%, transparent 70%);
  opacity: 0.28;
  top: -140px; right: -80px;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { color: var(--white); max-width: 20ch; }
.page-hero p { color: rgba(255,255,255,0.86); max-width: 60ch; }
.page-hero .eyebrow { color: var(--gold-tint) !important; }
.page-hero .eyebrow::before { background: var(--gold-tint); }

/* -------------------------------------------------------------------------
   17. FOOTER
   ------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: #c9cede;
  padding: clamp(48px, 6vw, 72px) 0 28px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  position: relative;
}
.site-footer a { color: var(--gold-tint); }
.site-footer a:hover { color: var(--white); }
.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: clamp(28px, 4vw, 40px);
  margin-bottom: clamp(28px, 4vw, 40px);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer-top h3 { color: var(--white); font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem); margin: 0; max-width: 20ch; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(24px, 4vw, 40px);
  margin-bottom: clamp(28px, 4vw, 36px);
}
.footer-grid h4 {
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}
.footer-grid ul { list-style: none; }
.footer-grid li { margin-bottom: 10px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 20px;
  font-size: 0.78rem;
  color: #8d96ad;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

/* -------------------------------------------------------------------------
   18. DECORATIVE ALPHABET MOTIF (small, reused)
   ------------------------------------------------------------------------- */
.motif-dots {
  display: flex;
  gap: 8px;
  margin: 0 0 20px;
}
.motif-dots span {
  width: 9px; height: 9px;
  border-radius: 50%;
}
.motif-dots span:nth-child(1) { background: var(--coral); }
.motif-dots span:nth-child(2) { background: var(--gold); }
.motif-dots span:nth-child(3) { background: var(--teal); }

/* -------------------------------------------------------------------------
   19. RESPONSIVE
   ------------------------------------------------------------------------- */

/* Compact laptop header: the wordmark text drops (logo mark alone still
   reads as the brand — the full name stays in the hero/footer/<title>) and
   gaps/font-size tighten, buying enough room for the full nav — including
   the longer Spanish labels — to stay visible instead of collapsing.
   Breakpoint chosen from actual rendered header width, not assumptions. */
@media (max-width: 1440px) {
  .brand span { display: none; }
  .main-nav { gap: clamp(8px, 1vw, 16px); font-size: 0.88rem; }
  .header-actions { gap: 8px; }
  .nav-wrap { padding-left: 16px; padding-right: 16px; }
}

/* Hamburger menu: only once the nav genuinely no longer fits, even in its
   compact form. Measured with real rendering (Playwright, both languages):
   the full 6-item nav + logo + language toggle + Donate button first
   overflows at 900–920px in Spanish (longer labels) and 768px in English.
   1000px keeps a real margin above the worst case in either language while
   staying inside the 900–1100px range this kind of header typically needs —
   1024px (a required test width) stays a comfortable ~67px clear in
   Spanish, so it shows the compact nav rather than a hamburger. */
@media (max-width: 1000px) {
  .main-nav { display: none; }
  .nav-toggle { display: inline-flex; }

  .main-nav.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--white);
    padding: 12px var(--gutter) 20px;
    border-bottom: 1px solid var(--paper-deep);
    box-shadow: var(--shadow-md);
    max-height: 80vh;
    overflow-y: auto;
  }
  .main-nav.is-open a {
    padding: 12px 4px;
    border-bottom: 1px solid var(--paper);
    font-size: 1.05rem;
    white-space: normal;
  }
  /* Restore the full wordmark once the header is a dropdown-button away
     from the nav — there's room again, and open state has its own sizing. */
  .brand span { display: inline; }
}

/* Laptop / tablet landscape */
@media (max-width: 1024px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .donate-options { grid-template-columns: repeat(2, 1fr); }
}

/* Tablet */
@media (max-width: 860px) {
  .hero .container,
  .two-col,
  .two-col.reverse,
  .donate-cta {
    grid-template-columns: 1fr;
  }
  .two-col.reverse > *:first-child,
  .two-col.reverse > *:last-child { order: 0; }

  .hero h1 { max-width: none; }
  .hero-media { transform: none; }

  .stats .container { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
  .stat-card { border-right: none; border-bottom: 1px solid rgba(24,35,56,0.14); padding-bottom: 20px; }

  .card-grid,
  .team-grid,
  .gallery-grid { grid-template-columns: 1fr 1fr; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* Mobile */
@media (max-width: 640px) {
  :root { --section-pad: 48px; }

  .nav-wrap { padding: 12px var(--gutter); }
  .header-actions { gap: 8px; }
  .lang-btn { padding: 8px 10px; }

  /* Below 640px there isn't room for the wordmark + language toggle + a
     full Donate button + the menu icon in one row. Show the logo mark only
     (the full name is still in the hero, footer, and <title>), and move the
     header's inline Donate button into the collapsible menu (see
     .nav-donate-mobile above) so it stays one tap away instead of
     overflowing the header. */
  .brand span { display: none; }
  .header-actions .btn-donate { display: none; }
  .main-nav .nav-donate-mobile { display: block; }

  .hero { padding-top: 40px; }
  .hero .cta-row { flex-direction: column; align-items: stretch; }
  .hero .cta-row .btn { justify-content: center; }

  .card-grid,
  .team-grid,
  .gallery-grid,
  .donate-options { grid-template-columns: 1fr; }

  .donate-cta { padding: 28px 20px; text-align: left; }

  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-top { flex-direction: column; align-items: flex-start; }
  .footer-bottom { flex-direction: column; }

  blockquote { padding-left: 16px; }
}

/* Narrow mobile */
@media (max-width: 360px) {
  .btn { padding: 12px 18px; font-size: 0.92rem; }
}