/* ============================================================
   ACRICA · Site chrome — header, nav, hero, sections, footer
   Used by Home, Doar/IRPF and Projetos mockups.
   Depends on tokens.css + components.css.
   ============================================================ */

/* ---------- HEADER ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--border);
}
.site-header__inner { display: flex; align-items: center; gap: var(--sp-4); height: 76px; }
.site-logo { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; color: var(--text); margin-right: auto; }
.site-logo img { width: 46px; height: 46px; border-radius: var(--r-sm); object-fit: contain; background: #fff; padding: 3px; }
.site-logo b { font-family: var(--font-display); font-size: 1.3rem; letter-spacing: var(--tracking-tight); line-height: 1; }
.site-logo span { font-size: var(--fs-xs); color: var(--text-subtle); text-transform: uppercase; letter-spacing: var(--tracking-caps); }

.site-nav { display: flex; align-items: center; gap: var(--sp-2); }
.site-nav a {
  padding: 0.6em 0.9em; border-radius: var(--r-pill); text-decoration: none;
  color: var(--text-muted); font-weight: 600; font-size: var(--fs-sm);
  transition: all var(--dur-fast) var(--ease);
}
.site-nav a:hover { color: var(--text); background: var(--surface-2); }
.site-nav a.is-active { color: var(--brand); background: var(--brand-soft); }

.site-tools { display: flex; align-items: center; gap: var(--sp-3); }

@media (max-width: 940px) {
  .site-nav { display: none; }
  .site-header__inner { height: 66px; }
  .site-nav.is-open {
    display: flex; position: absolute; top: 66px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--surface); border-bottom: 1px solid var(--border);
    padding: var(--sp-3); box-shadow: var(--shadow-lg);
  }
  .site-nav.is-open a { padding: 0.85em 1em; }
}

/* Mobile menu button */
.nav-toggle { display: none; }
@media (max-width: 940px) {
  .nav-toggle { display: inline-flex; }
}

/* ---------- HERO ---------- */
.hero { position: relative; overflow: hidden; padding: clamp(3rem, 6vw, 6rem) 0 clamp(2.5rem,5vw,5rem); }
.hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem,5vw,4rem); align-items: center; }
@media (max-width: 880px) { .hero__grid { grid-template-columns: 1fr; } }
.hero__eyebrow { margin-bottom: var(--sp-4); }
.hero h1 { font-size: var(--fs-display); margin-bottom: var(--sp-4); }
.hero h1 .hl { color: var(--accent); }
.hero__lead { font-size: var(--fs-lead); color: var(--text-muted); max-width: 52ch; margin-bottom: var(--sp-6); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.hero__trust { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; color: var(--text-subtle); font-size: var(--fs-sm); }
.hero__media { position: relative; }
.hero__media .frame {
  border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4/5;
  box-shadow: var(--shadow-lg); border: 1px solid var(--border);
}
.hero__media .frame.ph svg { width: 30%; height: 30%; }
.hero__float {
  position: absolute; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow-md); padding: var(--sp-4);
  display: flex; align-items: center; gap: var(--sp-3);
}
.hero__float--tl { top: 8%; left: -6%; }
.hero__float--br { bottom: 8%; right: -6%; }
@media (max-width: 1080px) { .hero__float--tl { left: 4%; } .hero__float--br { right: 4%; } }
.hero__blob { position: absolute; border-radius: 50%; pointer-events: none; z-index: -1; filter: blur(8px); }
.hero__blob--1 { top: -10%; right: -5%; width: 400px; height: 400px; background: radial-gradient(circle, var(--sun-soft), transparent 70%); }
.hero__blob--2 { bottom: -15%; left: -10%; width: 360px; height: 360px; background: radial-gradient(circle, var(--brand-soft), transparent 70%); }

/* ---------- SECTION ---------- */
.section { padding: clamp(3rem,6vw,5.5rem) 0; }
.section--tint { background: var(--bg-tint); }
.section--brand { background: var(--brand); color: var(--text-onbrand); }
.section__head { max-width: 60ch; margin: 0 auto clamp(2rem,4vw,3rem); text-align: center; }
.section__head--left { margin-inline: 0; text-align: left; }
.section__head h2 { font-size: var(--fs-h2); margin-bottom: var(--sp-3); }
.section__head p { font-size: var(--fs-lead); color: var(--text-muted); }
.section--brand .section__head p { color: color-mix(in srgb, var(--text-onbrand) 80%, transparent); }

.eyebrow { display: inline-flex; align-items: center; gap: 0.5em; font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--accent); margin-bottom: var(--sp-3); }

/* ---------- IMPACT STRIP ---------- */
.impact-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
@media (max-width: 720px) { .impact-strip { grid-template-columns: repeat(2,1fr); gap: var(--sp-6) var(--sp-4); } }
.section--brand .stat__num { color: var(--text-onbrand); }
.section--brand .stat__label { color: color-mix(in srgb, var(--text-onbrand) 78%, transparent); }

/* ---------- PROGRAMS GRID ---------- */
.prog-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-5); }
@media (max-width: 880px) { .prog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .prog-grid { grid-template-columns: 1fr; } }

/* ---------- STORY (split) ---------- */
.story { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4rem); align-items: center; }
@media (max-width: 820px) { .story { grid-template-columns: 1fr; } }
.story__media { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 5/4; box-shadow: var(--shadow-md); }
.story blockquote { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); line-height: 1.3; margin: var(--sp-4) 0; }
.story cite { font-style: normal; color: var(--text-muted); font-size: var(--fs-sm); display: flex; align-items: center; gap: var(--sp-3); }

/* ---------- CTA BAND ---------- */
.cta-band { border-radius: var(--r-xl); padding: clamp(2.5rem,5vw,4rem); background: linear-gradient(135deg, var(--teal-700), var(--teal-500)); color: #fff; text-align: center; position: relative; overflow: hidden; }
.cta-band h2 { color: #fff; font-size: var(--fs-h2); margin-bottom: var(--sp-3); }
.cta-band p { color: rgba(255,255,255,0.85); font-size: var(--fs-lead); max-width: 50ch; margin: 0 auto var(--sp-6); }
.cta-band .btn--sun { box-shadow: 0 10px 30px rgba(0,0,0,0.2); }

/* ---------- FOOTER ---------- */
.site-footer { background: var(--surface); border-top: 1px solid var(--border); padding: clamp(3rem,5vw,4rem) 0 var(--sp-6); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--sp-6); margin-bottom: var(--sp-7); }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-col h4 { font-family: var(--font-body); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-subtle); margin-bottom: var(--sp-4); }
.footer-col a { display: block; color: var(--text-muted); text-decoration: none; padding: 0.35em 0; font-size: var(--fs-sm); }
.footer-col a:hover { color: var(--brand); }
.footer-about p { color: var(--text-muted); font-size: var(--fs-sm); margin: var(--sp-3) 0; max-width: 34ch; }
.social { display: flex; gap: var(--sp-2); }
.social a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--surface-2); color: var(--text); }
.social a:hover { background: var(--brand); color: var(--text-onbrand); }
.social svg { width: 20px; height: 20px; }
.footer-map { border-radius: var(--r-md); overflow: hidden; aspect-ratio: 16/9; border: 1px solid var(--border); margin-top: var(--sp-3); }
.footer-bottom { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: space-between; align-items: center; padding-top: var(--sp-5); border-top: 1px solid var(--border); color: var(--text-subtle); font-size: var(--fs-xs); }

/* ---------- DONATE PAGE ---------- */
.donate-grid { display: grid; grid-template-columns: 1fr 0.85fr; gap: clamp(2rem,4vw,3.5rem); align-items: start; }
@media (max-width: 900px) { .donate-grid { grid-template-columns: 1fr; } }
.donate-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: clamp(1.5rem,3vw,2.5rem); position: sticky; top: 96px; }
.amount-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-3); }
.amount-btn {
  border: 1.5px solid var(--border-strong); background: var(--surface); color: var(--text);
  border-radius: var(--r-md); padding: var(--sp-4) var(--sp-2); cursor: pointer; text-align: center;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h4);
  transition: all var(--dur-fast) var(--ease);
}
.amount-btn:hover { border-color: var(--brand); }
.amount-btn.is-active { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-ink); box-shadow: 0 0 0 3px var(--brand-soft); }
.amount-btn small { display: block; font-family: var(--font-body); font-weight: 500; font-size: var(--fs-xs); color: var(--text-subtle); margin-top: 2px; }
.freq-toggle { display: inline-flex; padding: 4px; background: var(--surface-2); border-radius: var(--r-pill); border: 1px solid var(--border); width: 100%; }
.freq-toggle button { flex: 1; border: 0; background: transparent; padding: 0.7em; border-radius: var(--r-pill); cursor: pointer; font-weight: 700; font-size: var(--fs-sm); color: var(--text-muted); }
.freq-toggle button.is-active { background: var(--surface); color: var(--brand); box-shadow: var(--shadow-sm); }
.method-row { display: flex; gap: var(--sp-3); }
.method-card { flex: 1; border: 1.5px solid var(--border-strong); border-radius: var(--r-md); padding: var(--sp-4); cursor: pointer; text-align: center; font-weight: 600; font-size: var(--fs-sm); transition: all var(--dur-fast) var(--ease); }
.method-card.is-active { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-ink); }
.method-card svg { width: 26px; height: 26px; margin: 0 auto var(--sp-2); display: block; }

.irpf-steps { counter-reset: step; display: grid; gap: var(--sp-4); }
.irpf-step { display: grid; grid-template-columns: 48px 1fr; gap: var(--sp-4); align-items: start; }
.irpf-step__num { counter-increment: step; width: 48px; height: 48px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; }
.irpf-step__num::before { content: counter(step); }
.irpf-step h4 { font-size: var(--fs-h4); margin-bottom: 0.25em; }
.irpf-step p { color: var(--text-muted); font-size: var(--fs-sm); }

/* PIX panel */
.pix-panel { text-align: center; padding: var(--sp-5); background: var(--surface-2); border-radius: var(--r-md); }
.pix-qr { width: 168px; height: 168px; margin: 0 auto var(--sp-4); border-radius: var(--r-md); background: #fff; padding: 12px; }
.pix-key { display: flex; gap: var(--sp-2); align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 0.6em 0.9em; font-family: monospace; font-size: var(--fs-sm); }
.pix-key code { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- PROJECTS PAGE ---------- */
.filter-bar { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; margin-bottom: clamp(2rem,4vw,3rem); }
.proj-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-5); }
@media (max-width: 880px) { .proj-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .proj-grid { grid-template-columns: 1fr; } }
.proj-card__meta { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); color: var(--text-subtle); font-size: var(--fs-xs); }
.proj-card__progress { margin-top: var(--sp-4); }
.proj-card__progress .row { display: flex; justify-content: space-between; font-size: var(--fs-xs); margin-bottom: var(--sp-2); color: var(--text-muted); }
.proj-card__progress b { color: var(--brand); }

.page-hero { padding: clamp(2.5rem,5vw,4rem) 0 clamp(1.5rem,3vw,2.5rem); text-align: center; }
.page-hero h1 { font-size: var(--fs-h1); margin-bottom: var(--sp-3); }
.page-hero p { font-size: var(--fs-lead); color: var(--text-muted); max-width: 56ch; margin: 0 auto; }

.is-hidden { display: none !important; }