/* ================== BASE ================== */
:root{
  --mis-azul:#1B4B5F;
  --mis-laranja:#F26729;
  --mis-cinza:#e7eef3;
  --mis-bg:#0f2f3d;
}

/* ================== HERO ================== */
/* Modo claro */
.apoie-hero{
  background: linear-gradient(135deg,#f6f8fb 0%,#e3edf7 60%,#d6e3f0 100%);
  color: var(--mis-azul);
  position: relative;
  overflow: hidden;
  padding: 56px 0 48px;
}

.apoie-hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 14px),
    radial-gradient(circle at 10% 10%, rgba(255,255,255,0.02), transparent 20%);
  mix-blend-mode:overlay;
  opacity:.95;
  z-index:0;
}

.apoie-hero__grid{
  display:grid;
  grid-template-columns: 1.25fr .9fr;
  gap:32px;
  align-items:center;
  position:relative;
  z-index:2;
}

.apoie-hero .tag{
  display:inline-block;
  background:rgba(255,255,255,.9);
  color:var(--mis-azul);
  padding:6px 14px;
  border-radius:999px;
  font-weight:600;
  margin-bottom:14px;
}

.apoie-hero h1{
  margin:0 0 10px;
  font-size:2.4rem;
  line-height:1.1;
  font-weight:800;
}

.apoie-hero p{
  margin:0 0 18px;
  font-size:1.05rem;
  opacity:.9;
  max-width:620px;
}

/* Botões do hero */
.apoie-btns{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:24px 0 26px;
}

.apoie-btn{
  padding:12px 20px;
  border-radius:12px;
  text-decoration:none;
  font-weight:700;
  border:1px solid transparent;
  font-size:.98rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.apoie-btn--primario{
  background:var(--mis-laranja);
  color:#fff;
}

.apoie-btn--ghost{
  background:#ffffff;
  color:var(--mis-azul);
  border:1px solid rgba(0,0,0,.16);
}

/* Métricas */
.apoie-metricas{
  display:flex;
  flex-wrap:wrap;
  gap:28px;
  margin-top:10px;
}

.apoie-metricas__item strong{
  display:block;
  font-size:1.4rem;
  font-weight:800;
}

.apoie-metricas__item span{
  font-size:.95rem;
  opacity:.8;
}

/* Box à direita – “Para onde vai o seu apoio?” */
.apoie-box{
  background:#ffffff;
  color:var(--mis-azul);
  border-radius:18px;
  padding:26px 28px;
  border:1px solid #d7e2eb;
  box-shadow:0 14px 40px rgba(15,47,61,.18);
}

.apoie-box h3{
  margin:0 0 12px;
  font-size:1.4rem;
  font-weight:800;
}

.apoie-box ul{
  list-style:none;
  padding:0;
  margin:0;
}

.apoie-box li{
  margin-bottom:8px;
  font-size:.98rem;
  opacity:.9;
}

/* =========== HERO – MODO ESCURO =========== */
body.dark-mode .apoie-hero{
  background: linear-gradient(135deg,#0f4a50 0%,#083f44 60%,#051e24 100%);
  color:#eaf1f6;
}

body.dark-mode .apoie-hero::before{
  opacity:.35;
}

body.dark-mode .apoie-hero .tag{
  background:rgba(0,0,0,.35);
  color:#eaf1f6;
}

body.dark-mode .apoie-hero h1{
  color:#ffffff;
}

body.dark-mode .apoie-hero p{
  color:#d0e4ed;
}

/* Botões no dark */
body.dark-mode .apoie-btn--primario{
  background:var(--mis-laranja);
  color:#fff;
}

body.dark-mode .apoie-btn--ghost{
  background:transparent;
  color:#ffffff;
  border-color:rgba(255,255,255,.55);
}

/* Box no dark */
body.dark-mode .apoie-box{
  background:#07171f;
  color:#f3fbff;
  border-color:#243945;
  box-shadow:0 16px 50px rgba(0,0,0,.7);
}

body.dark-mode .apoie-box li{
  opacity:.95;
}

/* =========================================
   FORMAS DE APOIO
========================================= */
.apoie-formas{
  background:#f8fafc;
  padding:56px 0;
}

body.dark-mode .apoie-formas{
  background:#101821;
}

.apoie-formas__head{
  margin-bottom:22px;
}

.apoie-formas__head h2{
  margin:0 0 8px;
  font-size:1.8rem;
  font-weight:800;
  color:var(--mis-azul);
}

.apoie-formas__head p{
  margin:0;
  opacity:.8;
  max-width:620px;
}

body.dark-mode .apoie-formas__head h2{
  color:#eaf4ff;
}
body.dark-mode .apoie-formas__head p{
  color:#c9dbe5;
}

.formas-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

.forma-item{
  background:#ffffff;
  border-radius:14px;
  padding:20px 18px;
  border:1px solid #e3ecf2;
}

.forma-item h3{
  margin:0 0 6px;
  font-size:1.05rem;
  font-weight:700;
  color:var(--mis-azul);
}

.forma-item p{
  margin:0;
  font-size:.97rem;
  opacity:.85;
}

body.dark-mode .forma-item{
  background:#15232d;
  border-color:#243543;
}

body.dark-mode .forma-item h3{
  color:#eaf4ff;
}
body.dark-mode .forma-item p{
  color:#c7d7e1;
}

/* =========================================
   POR QUE APOIAR?
========================================= */
.apoie-porque{
  background:#ffffff;
  padding:56px 0 48px;
}

body.dark-mode .apoie-porque{
  background:#0d151a;
}

.apoie-porque__grid{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap:32px;
}

.apoie-porque h2{
  margin:0 0 10px;
  font-size:1.8rem;
  font-weight:800;
  color:var(--mis-azul);
}

.apoie-porque p{
  margin:0 0 10px;
  font-size:1.02rem;
  opacity:.85;
  max-width:680px;
}

.apoie-porque ul{
  list-style:none;
  padding:0;
  margin:0;
}

.apoie-porque li{
  margin-bottom:8px;
  font-size:.98rem;
  opacity:.9;
}

body.dark-mode .apoie-porque h2{
  color:#eaf4ff;
}
body.dark-mode .apoie-porque p{
  color:#c7d9e3;
}
body.dark-mode .apoie-porque li{
  color:#d4e3ee;
}

/* =========================================
   CONTATO / CTA FINAL
========================================= */
.apoie-contato{
  padding:56px 0 70px;
}

.contato-box{
  max-width:720px;
  margin:0 auto;
  background:#ffffff;
  border-radius:18px;
  border:1px solid #e3ecf2;
  padding:30px 28px 28px;
  text-align:center;
}

.contato-box h3{
  margin:0 0 10px;
  font-size:1.7rem;
  font-weight:800;
  color:var(--mis-azul);
}

.contato-box p{
  margin:0 0 20px;
  font-size:1.02rem;
  color:#2b3b44;
  opacity:.9;
}

.apoie-btn-contato{
  display:inline-block;
  padding:13px 22px;
  border-radius:12px;
  background:var(--mis-laranja);
  color:#ffffff;
  text-decoration:none;
  font-weight:700;
  border:1px solid var(--mis-laranja);
}

/* Dark mode */
body.dark-mode .contato-box{
  background:#111c24;
  border-color:#243543;
}
body.dark-mode .contato-box h3{
  color:#eaf4ff;
}
body.dark-mode .contato-box p{
  color:#c7d9e3;
}

/* =========================================
   RESPONSIVO
========================================= */
@media (max-width:1080px){
  .apoie-hero__grid{
    grid-template-columns:1fr;
  }
}

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

@media (max-width:768px){
  .apoie-hero{
    padding-top:40px;
  }

  .apoie-hero h1{
    font-size:2rem;
  }

  .apoie-metricas{
    gap:18px;
  }

  .contato-box{
    padding:24px 18px 26px;
  }
}

@media (max-width:640px){
  .apoie-btns{
    flex-direction:column;
    align-items:flex-start;
  }

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