/* PROPAGADORES — Propaga × Cause Impacto
   Paleta: tinta (ink) · papel · areia · laranja (Propaga) · vinho (Propaga) · verde (Cause Impacto)
   Tipo: Archivo variable (display expandido + corpo) · Spline Sans Mono (dados) */

:root {
  --tinta: #221713;
  --tinta-2: #2f211a;
  --papel: #fbf8f3;
  --areia: #f1e9dd;
  --linha: #e4d9c9;
  --branco: #fffdf9;
  --laranja: #fe6b2c;
  --laranja-escuro: #d94f14;
  --vinho: #63002f;
  --verde: #10b981;
  --verde-escuro: #047857;
  --texto-2: #6f5f53;
  --mono: "Spline Sans Mono", ui-monospace, "Courier New", monospace;
  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  font-family: var(--sans);
  background: var(--papel);
  color: var(--tinta);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 { line-height: 1.08; }

a { color: inherit; }

::selection { background: var(--laranja); color: var(--tinta); }

:focus-visible { outline: 3px solid var(--laranja); outline-offset: 2px; border-radius: 2px; }

/* ── Mono util ─────────────────────────────────── */
.mono { font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.11em; text-transform: uppercase; }

/* ── Nav ───────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(34, 23, 19, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(254, 107, 44, 0.25);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 58px; gap: 16px;
}
.nav-marca {
  display: flex; align-items: center; gap: 10px;
  color: var(--papel); text-decoration: none;
  font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.16em; font-weight: 600;
}
.nav-marca svg { width: 18px; height: 18px; color: var(--laranja); flex-shrink: 0; }
.nav-links { display: flex; gap: 26px; align-items: center; }
.nav-links a {
  color: rgba(251, 248, 243, 0.75); text-decoration: none;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  transition: color 0.15s;
}
.nav-links a:hover { color: var(--laranja); }
.nav-links a.ci { color: var(--verde); }
@media (max-width: 640px) { .nav-links a.esconde-mobile { display: none; } }

/* ── Hero ──────────────────────────────────────── */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(99, 0, 47, 0.55), transparent 60%),
    radial-gradient(900px 420px at -10% 110%, rgba(254, 107, 44, 0.16), transparent 55%),
    var(--tinta);
  color: var(--papel);
  padding: 84px 0 72px;
}
.hero-grid {
  display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 40px; align-items: center;
}
.hero-eyebrow { color: var(--verde); margin-bottom: 18px; display: flex; align-items: center; gap: 10px; }
.hero-eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--verde); }
.hero h1 {
  font-weight: 900;
  font-stretch: 125%;
  font-size: clamp(2.9rem, 7.4vw, 5.9rem);
  letter-spacing: -0.015em;
  text-transform: uppercase;
  margin-right: 0.5em;
}
.hero-sub {
  margin-top: 18px; max-width: 34em;
  font-size: 1.08rem; color: rgba(251, 248, 243, 0.85);
}
.hero-sub strong { color: var(--papel); font-weight: 600; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; border-radius: 4px;
  font-family: var(--mono); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 13px 22px;
  transition: transform 0.15s, background 0.15s, border-color 0.15s;
}
.btn:hover { transform: translateY(-2px); }
.btn-verde { background: var(--verde); color: var(--tinta); }
.btn-verde:hover { background: #34d399; }
.btn-fantasma { border: 1px solid rgba(251,248,243,0.4); color: var(--papel); }
.btn-fantasma:hover { border-color: var(--laranja); color: var(--laranja); }
.hero-valor { margin-top: 40px; }
.hero-valor .rotulo { color: rgba(251, 248, 243, 0.6); margin-bottom: 6px; }
.hero-valor .numero {
  font-family: var(--mono); font-weight: 600;
  font-size: clamp(2rem, 4.6vw, 3.3rem);
  color: var(--verde); letter-spacing: -0.01em;
}
.hero-valor .nota { color: rgba(251, 248, 243, 0.6); margin-top: 6px; letter-spacing: 0.1em; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.hero-chips span {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  border: 1px solid rgba(251, 248, 243, 0.28); border-radius: 999px;
  padding: 7px 14px; color: rgba(251, 248, 243, 0.8);
}
.hero-chips span b { color: var(--laranja); font-weight: 600; }

/* selo grande girando */
.hero-selo { position: relative; display: flex; justify-content: center; }
.hero-selo svg { width: 300px; max-width: 100%; height: auto; color: var(--laranja); filter: drop-shadow(0 12px 40px rgba(0,0,0,0.35)); }
.hero-grid > div:first-child { min-width: 0; }
@media (prefers-reduced-motion: no-preference) {
  .selo-gira { animation: gira 70s linear infinite; transform-origin: 50% 50%; }
  @keyframes gira { to { transform: rotate(360deg); } }
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-selo { order: -1; }
  .hero-selo svg { width: 170px; }}

/* ── Faixa do selo ─────────────────────────────── */
.selofaixa { background: var(--areia); border-bottom: 1px solid var(--linha); }
.selofaixa-inner {
  display: grid; grid-template-columns: 130px 1fr; gap: 30px; align-items: center;
  padding-block: 36px;
}
.selofaixa .selo-mini svg { width: 130px; height: 130px; color: var(--vinho); }
.selofaixa h2 {
  font-size: 1.15rem; font-weight: 800; font-stretch: 118%; text-transform: uppercase;
  letter-spacing: 0.02em; margin-bottom: 8px;
}
.selofaixa p { max-width: 62em; color: var(--texto-2); font-size: 0.98rem; }
.selofaixa p strong { color: var(--tinta); }
@media (max-width: 640px) {
  .selofaixa-inner { grid-template-columns: 1fr; gap: 16px; padding-block: 26px; }
  .hero h1 { font-size: clamp(1.75rem, 8.4vw, 2.2rem); font-stretch: 112%; }
}

/* ── Seções ────────────────────────────────────── */
section.bloco { padding: 72px 0; }
.bloco-cab { margin-bottom: 38px; }
.bloco-cab .kicker { color: var(--laranja-escuro); display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.bloco-cab .kicker::before { content: ""; width: 26px; height: 1px; background: var(--laranja); }
.bloco-cab h2 {
  font-weight: 900; font-stretch: 122%; text-transform: uppercase;
  font-size: clamp(1.9rem, 4.4vw, 3rem); letter-spacing: -0.01em;
}
.bloco-cab .ajuda { margin-top: 10px; color: var(--texto-2); font-size: 0.95rem; }

/* ── Mapa ──────────────────────────────────────── */
#mapa-sec { background: var(--papel); }
.mapa-grid {
  display: grid; grid-template-columns: 1.6fr 1fr; gap: 34px; align-items: start;
  position: relative;
}
.mapa-caixa { position: relative; background: var(--areia); border: 1px solid var(--linha); border-radius: 6px; padding: 10px; }
.mapa-caixa svg#mapa { display: block; width: 100%; height: auto; }

#mapa .esfera { fill: var(--branco); }
#mapa .graticule { fill: none; stroke: #e7dccb; stroke-width: 0.4; }
#mapa .pais { fill: #ece2d2; stroke: #d9cab3; stroke-width: 0.5; vector-effect: non-scaling-stroke; }
#mapa .pais.rede { fill: url(#hachura); stroke: #c9a98e; }
#mapa .pais.projeto { fill: var(--laranja); stroke: var(--tinta); stroke-width: 0.7; }
#mapa .pais.projeto:hover, #mapa .pais.projeto.ativo { fill: var(--vinho); }
#mapa .pais.rede:hover, #mapa .pais.rede.ativo { fill: url(#hachura-vinho); }
#mapa .pais.projeto:hover ~ .marca, #mapa circle.marca { fill-opacity: 1; }
#mapa .pais.projeto:focus-visible { outline: none; fill: var(--vinho); }
#mapa .pais.rede { cursor: pointer; }
#mapa .pais.projeto { cursor: pointer; }
#mapa .pais.mudo { pointer-events: none; }
#mapa .marca { fill: var(--laranja); stroke: var(--tinta); stroke-width: 0.9; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  #mapa .marca { animation: pulsa 2.6s ease-in-out infinite; }
  @keyframes pulsa { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
}

.tooltip {
  position: absolute; z-index: 20; pointer-events: none;
  background: var(--tinta); color: var(--papel);
  border: 1px solid var(--laranja); border-radius: 6px;
  padding: 12px 14px; min-width: 190px; max-width: 260px;
  box-shadow: 0 14px 34px rgba(34, 23, 19, 0.3);
  opacity: 0; transform: translateY(4px);
  transition: opacity 0.14s, transform 0.14s;
}
.tooltip.aberto { opacity: 1; transform: translateY(0); }
.tooltip .tt-pais { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--laranja); margin-bottom: 6px; }
.tooltip .tt-item { font-size: 0.85rem; padding: 2px 0; }
.tooltip .tt-item small { display: block; color: rgba(251,248,243,0.55); font-size: 0.72rem; }
.tooltip .tt-rede { font-size: 0.8rem; color: rgba(251,248,243,0.8); }

/* painel lateral do mapa */
.mapa-painel { display: flex; flex-direction: column; gap: 12px; }
.painel-pais {
  text-align: left; cursor: pointer;
  background: var(--branco); border: 1px solid var(--linha); border-radius: 6px;
  padding: 16px 18px; font-family: inherit; color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.painel-pais:hover, .painel-pais.ativo { border-color: var(--laranja); box-shadow: 0 6px 20px rgba(217, 79, 20, 0.12); }
.painel-pais .pp-nome {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-weight: 800; font-stretch: 115%; text-transform: uppercase; font-size: 1rem; letter-spacing: 0.02em;
}
.painel-pais .pp-nome .mono { color: var(--laranja-escuro); }
.painel-pais ul { list-style: none; margin-top: 8px; }
.painel-pais li { font-size: 0.9rem; padding: 3px 0; color: var(--texto-2); display: flex; gap: 8px; align-items: baseline; }
.painel-pais li b { color: var(--tinta); font-weight: 600; }
.painel-pais li .loc { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: #a08a76; }
.painel-pais.rede-card { border-style: dashed; }
.painel-pais.rede-card .pp-nome .mono { color: #8a6a52; }
@media (max-width: 900px) { .mapa-grid { grid-template-columns: 1fr; } }

/* ── Cards de projetos ─────────────────────────── */
#projetos { background: var(--papel); }
.cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
@media (max-width: 1080px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .cards { grid-template-columns: 1fr; } }

.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--branco); border: 1px solid var(--linha); border-radius: 6px;
  overflow: hidden; transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(34, 23, 19, 0.14); border-color: #d5c4ab; }
.card-banda { height: 148px; display: flex; align-items: center; justify-content: center; padding: 18px; position: relative; }
.card-banda.escura { background: var(--tinta); }
.card-banda.clara { background: var(--areia); border-bottom: 1px solid var(--linha); }
.card-banda.vinho { background: linear-gradient(135deg, var(--vinho), #4a0023); }
.card-banda.foto { padding: 0; }
.card-banda.foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-banda img.logo { max-width: 82%; max-height: 82%; object-fit: contain; }
.card-banda .wordmark {
  color: var(--papel); text-align: center;
  font-weight: 900; font-stretch: 122%; text-transform: uppercase;
  font-size: 1.5rem; line-height: 1.1; letter-spacing: 0.01em;
}
.card-banda .wordmark small { display: block; font-family: var(--mono); font-weight: 400; font-stretch: 100%; font-size: 0.62rem; letter-spacing: 0.22em; margin-top: 8px; color: rgba(251,248,243,0.75); }

.card .selo-carimbo {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 46px; height: 46px; color: var(--laranja);
  transform: rotate(-12deg); opacity: 0.92;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3));
}
.card-corpo { padding: 18px 18px 16px; display: flex; flex-direction: column; flex: 1; }
.card-tag { color: var(--laranja-escuro); display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.card-tag svg { width: 12px; height: 12px; flex-shrink: 0; }
.card h3 { font-size: 1.12rem; font-weight: 800; font-stretch: 112%; letter-spacing: 0.01em; margin-bottom: 7px; }
.card-desc { font-size: 0.88rem; color: var(--texto-2); flex: 1; }
.card-rodape { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 16px; }
.card-valor .cv-rotulo { color: #a08a76; letter-spacing: 0.12em; font-size: 0.6rem; }
.card-valor .cv-num { font-family: var(--mono); font-weight: 600; color: var(--verde-escuro); font-size: 1.02rem; }
.card-cta {
  display: inline-block; text-decoration: none;
  background: var(--vinho); color: var(--papel);
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 10px 16px; border-radius: 4px;
  transition: background 0.15s, transform 0.15s;
}
.card-cta:hover { background: var(--laranja-escuro); transform: translateY(-1px); }

/* ── Vídeo (slot) ──────────────────────────────── */
#video { background: var(--tinta); color: var(--papel); display: none; }
#video.visivel { display: block; }
#video .bloco-cab .kicker { color: var(--verde); }
#video .bloco-cab .kicker::before { background: var(--verde); }
.video-moldura { border: 1px solid rgba(254,107,44,0.35); border-radius: 6px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--tinta-2); }
.video-moldura iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ── Footer ────────────────────────────────────── */
.footer { background: var(--tinta); color: rgba(251,248,243,0.7); border-top: 1px solid rgba(254,107,44,0.3); }
.footer-inner {
  display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center;
  padding-block: 40px 34px;
}
.footer .f-selo svg { width: 74px; height: 74px; color: var(--laranja); }
.footer p { max-width: 44em; font-size: 0.9rem; }
.footer p strong { color: var(--papel); }
.footer-links { display: flex; flex-direction: column; gap: 8px; text-align: right; }
.footer-links a {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; color: rgba(251,248,243,0.7); transition: color 0.15s;
}
.footer-links a:hover { color: var(--laranja); }
.footer-links a.verde:hover { color: var(--verde); }
.footer-base {
  border-top: 1px solid rgba(251,248,243,0.12);
  padding-block: 14px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(251,248,243,0.4);
}
@media (max-width: 720px) {
  .footer-inner { grid-template-columns: 1fr; }
  .footer-links { text-align: left; }
}

/* halos dos pontos ativos */
#mapa .marca-halo { fill: none; stroke: var(--laranja); stroke-width: 1.1; opacity: 0.55; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  #mapa .marca-halo { animation: halo 2.6s ease-in-out infinite; }
  @keyframes halo { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.12; } }
}

/* carimbo do selo nos cards: contraste sobre foto e banda clara */
.card .selo-carimbo {
  background: radial-gradient(circle at center, rgba(34, 23, 19, 0.45), rgba(34, 23, 19, 0) 72%);
}
.card:has(.card-banda.clara) .selo-carimbo { color: var(--vinho); }

/* hit-areas de países pequenos (Haiti, Senegal, Cabo Verde) */
#mapa .alvo { fill: transparent; cursor: pointer; }
#mapa .alvo:hover ~ .marca, #mapa .alvo.ativo ~ .marca { fill: var(--vinho); }
#mapa .marca { transition: fill 0.15s; }
#mapa .marca.destaque { fill: var(--vinho); }