/*
Theme Name: Memória Ambiental
Theme URI: https://memoriaambiental.org/
Author: UXP
Author URI: https://uxpweb.com.br/
Description: Tema personalizado do Memória Ambiental — arquitetura, linha do tempo interativa, acervo por ciclos laboratoriais e rede latino-americana. Paleta e tipografia do manual de identidade.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: memoria-ambiental
Tags: custom-menu, featured-images, translation-ready, two-columns
*/

/* ============================================================
   MEMÓRIA AMBIENTAL · TOKENS
   Paleta do manual de identidade + tons das telas aprovadas
   ============================================================ */
:root{
  /* identidade */
  --verde:#1D2E1C;          /* Verde Escuro (manual) */
  --terra:#9D230B;          /* Terracota (manual) */
  --areia:#D8C9B6;          /* Areia (manual) */
  /* derivados aprovados nos protótipos */
  --verde-2:#2D4128;
  --verde-3:#435B3B;
  --laranja:#FB9A31;
  --papel:#EFEBE0;
  --papel-2:#E5DECF;
  --branco:#FBF9F4;

  --tinta:#1D2E1C;
  --tinta-60:rgba(29,46,28,.68);
  --tinta-40:rgba(29,46,28,.42);
  --linha:rgba(29,46,28,.16);

  --fonte:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fonte-maquina:'TT2020','Courier Prime','Courier New',monospace;

  --max:1180px;
  --gut:clamp(20px,5vw,56px);
  --r:14px;
  --r-sm:8px;

  --t:.28s cubic-bezier(.2,.7,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--papel); color:var(--tinta);
  font-family:var(--fonte); font-size:16px; line-height:1.65;
  font-weight:400; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--terra); text-decoration-thickness:1px; text-underline-offset:3px}
a:hover{color:var(--verde)}
button{font:inherit; color:inherit}
:focus-visible{outline:3px solid var(--terra); outline-offset:3px; border-radius:3px}

/* ---------- texto ---------- */
h1,h2,h3,h4{font-family:var(--fonte); font-weight:800; line-height:1.08; margin:0; letter-spacing:-.02em; color:var(--verde)}
h1{font-size:clamp(2.1rem,5.2vw,3.5rem)}
h2{font-size:clamp(1.7rem,3.6vw,2.6rem)}
h3{font-size:clamp(1.05rem,1.7vw,1.3rem); letter-spacing:-.01em}
p{margin:0 0 1em}
em.destaque{font-style:normal; color:var(--terra)}

.olho{
  font-family:var(--fonte-maquina); font-size:.76rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--terra);
  margin:0 0 .9rem; display:block;
}
.olho--claro{color:var(--laranja)}
.lead{font-size:clamp(1.02rem,1.5vw,1.16rem); color:var(--tinta-60); max-width:62ch}
.mono{font-family:var(--fonte-maquina)}

/* ---------- utilitários de layout ---------- */
.env{max-width:var(--max); margin-inline:auto; padding-inline:var(--gut)}
.secao{padding-block:clamp(56px,8vw,104px)}
.secao--papel2{background:var(--papel-2)}
.secao--verde{background:var(--verde); color:var(--papel)}
.secao--verde h2,.secao--verde h3{color:var(--branco)}
.secao--verde .lead{color:rgba(239,235,224,.75)}
.cab-secao{max-width:70ch; margin-bottom:clamp(32px,4vw,52px)}

/* ---------- botões ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.55em;
  padding:.82em 1.5em; border-radius:999px; border:2px solid transparent;
  font-weight:700; font-size:.94rem; text-decoration:none; cursor:pointer;
  transition:transform var(--t), background var(--t), color var(--t), border-color var(--t);
}
.btn:hover{transform:translateY(-2px)}
.btn--principal{background:var(--terra); color:var(--branco)}
.btn--principal:hover{background:var(--verde); color:var(--branco)}
.btn--laranja{background:var(--laranja); color:var(--verde)}
.btn--laranja:hover{background:var(--branco); color:var(--verde)}
.btn--linha{border-color:var(--verde); color:var(--verde)}
.btn--linha:hover{background:var(--verde); color:var(--papel)}
.btn--claro{border-color:rgba(239,235,224,.5); color:var(--papel)}
.btn--claro:hover{background:var(--papel); color:var(--verde)}

/* ============================================================
   ASSINATURA: crista digital (motivo da impressão digital)
   usada como régua, espinha da linha do tempo e marca d'água
   ============================================================ */
.crista{
  height:9px; width:100%;
  background:
    repeating-linear-gradient(90deg, var(--linha) 0 26px, transparent 26px 32px) 0 0/100% 2px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 12px, var(--linha) 12px 52px, transparent 52px 60px) 0 4px/100% 2px no-repeat,
    repeating-linear-gradient(90deg, var(--linha) 0 40px, transparent 40px 47px) 0 8px/100% 2px no-repeat;
}
.marca-dagua{position:absolute; inset:auto; color:var(--verde); opacity:.06; pointer-events:none}

/* ============================================================
   CABEÇALHO
   ============================================================ */
.pular{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--verde); color:var(--papel); padding:.8em 1.2em; border-radius:0 0 var(--r-sm) 0;
}
.pular:focus{left:0}

.topo{
  position:sticky; top:0; z-index:50;
  background:rgba(239,235,224,.94); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--linha);
}
.topo__int{display:flex; align-items:center; gap:24px; min-height:74px}
.marca{display:flex; align-items:center; gap:10px; text-decoration:none; flex:0 0 auto}
.marca svg{width:26px; height:34px; color:var(--verde); flex:0 0 auto}
.marca__txt{
  font-family:var(--fonte-maquina); font-weight:700; font-size:1.02rem;
  line-height:1.05; color:var(--verde); letter-spacing:-.01em;
}
.marca__txt span{color:var(--terra); display:block}

.menu{margin-left:auto; display:flex; align-items:center; gap:clamp(12px,1.8vw,26px)}
.menu a{
  font-size:.9rem; font-weight:600; color:var(--verde); text-decoration:none;
  padding:.35em 0; border-bottom:2px solid transparent; transition:color var(--t), border-color var(--t);
}
.menu a:hover{color:var(--terra)}
.menu a[aria-current="page"]{color:var(--terra); border-bottom-color:var(--terra)}

.idioma{display:flex; gap:2px; align-items:center; font-family:var(--fonte-maquina); font-size:.8rem}
.idioma a{
  text-decoration:none; padding:.3em .45em; border-radius:4px;
  color:var(--tinta-40); font-weight:700; letter-spacing:.05em;
}
.idioma a[aria-current="true"]{color:var(--verde); background:var(--areia)}

.abre-menu{display:none; background:none; border:1px solid var(--linha); border-radius:var(--r-sm); padding:.5em .7em; cursor:pointer}

@media (max-width:900px){
  .abre-menu{display:block; margin-left:auto}
  .menu{
    order:3; width:100%; margin-left:0; display:none; flex-direction:column; align-items:flex-start;
    gap:2px; padding:8px 0 20px; border-top:1px solid var(--linha);
  }
  .topo__int{flex-wrap:wrap}
  .topo.aberto .menu{display:flex}
  .menu a{width:100%; padding:.6em 0; border-bottom:1px solid var(--linha)}
  .menu a[aria-current="page"]{border-bottom-color:var(--terra)}
  .idioma{padding-top:10px}
}

/* ============================================================
   PÁGINAS (roteamento por hash)
   ============================================================ */
.pagina{display:block}

/* ============================================================
   INÍCIO · abertura
   ============================================================ */
.abertura{position:relative; overflow:hidden; padding-block:clamp(48px,7vw,84px)}
.abertura__grade{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,64px); align-items:center}
.abertura h1{font-size:clamp(2.6rem,7vw,4.6rem); line-height:.95}
.abertura h1 span{display:block; color:var(--terra)}
.abertura .lead{margin:1.2rem 0 1.8rem}
.acoes{display:flex; flex-wrap:wrap; gap:12px}

.indicadores{display:flex; flex-wrap:wrap; gap:clamp(20px,4vw,46px); margin-top:clamp(28px,4vw,44px)}
.indicador strong{
  display:block; font-family:var(--fonte-maquina); font-weight:700;
  font-size:clamp(1.5rem,3vw,2rem); color:var(--verde); line-height:1;
}
.indicador span{font-size:.78rem; color:var(--tinta-40); letter-spacing:.04em}

@media (max-width:860px){ .abertura__grade{grid-template-columns:1fr} }

/* placeholder de imagem — reserva de espaço (evita o "salto" de layout) */
.ph{
  position:relative; overflow:hidden; border-radius:var(--r);
  background:var(--papel-2); border:1px solid var(--linha);
  display:grid; place-items:center; aspect-ratio:4/3;
}
.ph--retrato{aspect-ratio:3/4}
.ph--largo{aspect-ratio:16/9}
.ph--quadrado{aspect-ratio:1/1}
.ph__marca{position:absolute; width:58%; height:auto; max-width:230px; color:var(--verde); opacity:.13}
.ph__txt{
  position:relative; font-family:var(--fonte-maquina); font-size:.74rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--tinta-40); text-align:center; padding:0 1em;
}
.ph--verde{background:var(--verde-2); border-color:transparent}
.ph--verde .ph__marca{color:var(--papel); opacity:.16}
.ph--verde .ph__txt{color:rgba(239,235,224,.6)}

/* faixa "contar histórias tem poder" */
.faixa{background:var(--verde); color:var(--papel); text-align:center; padding:1.5em 0}
.faixa p{
  margin:0; font-family:var(--fonte-maquina); font-size:clamp(1rem,2.2vw,1.35rem);
  letter-spacing:.02em;
}
.faixa i{font-style:normal; color:var(--laranja); letter-spacing:.4em; margin-inline:.6em}

/* pilares */
.pilares{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,22px)}
.pilar{
  background:var(--branco); border:1px solid var(--linha); border-radius:var(--r);
  padding:clamp(20px,2.4vw,28px); transition:transform var(--t), box-shadow var(--t);
}
.pilar:hover{transform:translateY(-4px); box-shadow:0 10px 30px rgba(29,46,28,.09)}
.pilar__n{
  display:inline-grid; place-items:center; width:30px; height:30px; border-radius:8px;
  background:var(--verde); color:var(--papel); font-family:var(--fonte-maquina);
  font-size:.82rem; font-weight:700; margin-bottom:14px;
}
.pilar h3{margin-bottom:.5rem}
.pilar p{margin:0; font-size:.92rem; color:var(--tinta-60)}
@media (max-width:760px){ .pilares{grid-template-columns:1fr} }

/* prévia da linha do tempo */
.previa{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:2px solid var(--linha); margin-top:8px}
.previa__item{padding:22px 20px 24px 0; border-right:1px solid var(--linha); position:relative}
.previa__item:last-child{border-right:0}
.previa__item::before{
  content:""; position:absolute; top:-9px; left:0; width:16px; height:16px; border-radius:50%;
  background:var(--papel); border:3px solid var(--laranja);
}
.previa__ano{font-family:var(--fonte-maquina); font-weight:700; font-size:1.35rem; color:var(--verde); display:block; margin-bottom:.2em}
.previa__item p{margin:0; font-size:.88rem; color:var(--tinta-60); padding-right:14px}
@media (max-width:760px){
  .previa{grid-template-columns:1fr 1fr}
  .previa__item:nth-child(2){border-right:0}
}

/* dois blocos (memórias / rede) */
.duplo{display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.4vw,26px)}
.cartao-link{
  display:block; text-decoration:none; color:inherit; background:var(--branco);
  border:1px solid var(--linha); border-radius:var(--r); overflow:hidden;
  transition:transform var(--t), box-shadow var(--t);
}
.cartao-link:hover{transform:translateY(-4px); box-shadow:0 12px 34px rgba(29,46,28,.1)}
.cartao-link .ph{border:0; border-radius:0}
.cartao-link__corpo{padding:clamp(18px,2.2vw,26px)}
.cartao-link h3{margin-bottom:.4rem}
.cartao-link p{margin:0 0 .8rem; font-size:.92rem; color:var(--tinta-60)}
.seta{font-family:var(--fonte-maquina); font-weight:700; color:var(--terra); font-size:.88rem}
@media (max-width:760px){ .duplo{grid-template-columns:1fr} }

/* ============================================================
   TRAJETÓRIA · linha do tempo horizontal
   Linha desenha da esquerda para a direita, pontos surgem em cascata,
   card flutua no hover/foco (acima ou abaixo, alternando).
   ============================================================ */
.marco__tag{
  display:inline-block; background:var(--laranja); color:var(--verde); border-radius:999px;
  font-family:var(--fonte-maquina); font-size:.68rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; padding:.25em .8em; margin-bottom:.5rem;
}

.linha-tempo{
  position:relative;
  width:100%;
  margin:64px 0 60px;
  padding:20px clamp(24px, 5vw, 80px);
  overflow-y:visible;
  overflow-x:clip;
}
.linha-tempo__trilho{
  position:absolute; left:clamp(24px,5vw,80px); right:clamp(24px,5vw,80px); top:50%;
  transform:translateY(-50%);
  pointer-events:none;
}
.linha-tempo__eixo{
  display:block; height:3px; border-radius:3px;
  background:linear-gradient(90deg, var(--terra), var(--laranja));
  transform:scaleX(0); transform-origin:left center;
  animation:ma-desenhar-linha 1.6s cubic-bezier(.7,0,.2,1) .2s forwards;
}
@keyframes ma-desenhar-linha{ to { transform:scaleX(1); } }

.linha-tempo__pontos{
  position:relative; z-index:2;
  list-style:none; margin:0; padding:0;
  display:flex; justify-content:space-between; align-items:center; gap:20px;
}

.ponto{
  position:relative; flex:1 1 0;
  text-align:center;
  opacity:0; transform:translateY(6px);
  animation:ma-ponto-entrar .55s ease-out var(--ma-delay, 1s) forwards;
}
@keyframes ma-ponto-entrar{ to { opacity:1; transform:translateY(0); } }

.ponto__gatilho{
  display:inline-flex; flex-direction:column; align-items:center; gap:10px;
  background:transparent; border:none; padding:8px 6px; cursor:pointer;
  font:inherit; color:inherit;
}
.ponto__ano{
  font-family:var(--fonte-maquina); font-weight:700; font-size:clamp(.95rem,1.6vw,1.15rem);
  color:var(--terra); letter-spacing:.06em;
}
.ponto__bola{
  width:22px; height:22px; border-radius:50%;
  background:var(--branco); border:3px solid var(--terra);
  box-shadow:0 0 0 5px rgba(251,154,49,.18);
  transition:transform var(--t), background var(--t), box-shadow var(--t), border-color var(--t);
}
.ponto__nome{
  font-family:var(--fonte); font-weight:800; font-size:clamp(.92rem,1.2vw,1.02rem);
  color:var(--verde); letter-spacing:-.01em; max-width:14ch; line-height:1.2;
}
.ponto__gatilho:hover .ponto__bola,
.ponto__gatilho:focus-visible .ponto__bola{
  background:var(--terra); transform:scale(1.35);
  box-shadow:0 0 0 8px rgba(251,154,49,.28);
}

/* Card flutuante */
.ponto__card{
  position:absolute; left:50%;
  width:min(340px, 82vw);
  background:var(--branco); border:1px solid var(--linha); border-radius:var(--r);
  box-shadow:0 18px 40px rgba(29,46,28,.18);
  padding:0; overflow:hidden;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .28s ease, transform .35s cubic-bezier(.2,.7,.3,1), visibility .28s;
  z-index:5;
}
.ponto--topo .ponto__card{
  bottom:calc(50% + 38px);
  transform:translateX(-50%) translateY(10px);
}
.ponto--base .ponto__card{
  top:calc(50% + 38px);
  transform:translateX(-50%) translateY(-10px);
}
.ponto__gatilho:hover ~ .ponto__card,
.ponto__gatilho:focus-visible ~ .ponto__card,
.ponto__card:hover{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}

/* Encostado nas bordas: puxa o card pro lado da tela pra não vazar */
.ponto:first-child .ponto__card{ left:0; transform:translateX(0) translateY(10px); }
.ponto:first-child.ponto--base .ponto__card{ transform:translateX(0) translateY(-10px); }
.ponto:first-child .ponto__gatilho:hover ~ .ponto__card,
.ponto:first-child .ponto__gatilho:focus-visible ~ .ponto__card{
  transform:translateX(0) translateY(0);
}
.ponto:last-child .ponto__card{ left:auto; right:0; transform:translateX(0) translateY(10px); }
.ponto:last-child.ponto--base .ponto__card{ transform:translateX(0) translateY(-10px); }
.ponto:last-child .ponto__gatilho:hover ~ .ponto__card,
.ponto:last-child .ponto__gatilho:focus-visible ~ .ponto__card{
  transform:translateX(0) translateY(0);
}

.ponto__card__midia{
  height:160px; overflow:hidden; background:var(--verde-3);
}
.ponto__card__midia img{width:100%; height:100%; object-fit:cover; display:block}
.ponto__card__midia iframe, .ponto__card__midia .video-caixa{width:100%; height:100%}

.ponto__card__corpo{padding:16px 18px 18px}
.ponto__card__ano{
  display:inline-block; font-family:var(--fonte-maquina); font-weight:700; font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--laranja); margin-bottom:6px;
}
.ponto__card__titulo{
  margin:0 0 6px; font-size:1.05rem; color:var(--verde); letter-spacing:-.01em;
}
.ponto__card__resumo{margin:0 0 12px; font-size:.9rem; color:var(--tinta-60); line-height:1.5}
.ponto__card__destaques h4{font-size:.95rem; margin-bottom:.35rem; color:var(--verde)}
.ponto__card__destaques p{font-size:.86rem; color:var(--tinta-60); margin:0 0 .5em; line-height:1.55}

/* Respeita quem reduz movimento */
@media (prefers-reduced-motion: reduce){
  .linha-tempo__eixo{animation:none; transform:scaleX(1)}
  .ponto{animation:none; opacity:1; transform:none}
}

/* Mobile: vira uma tira horizontal com rolagem — mantém a leitura */
@media (max-width:800px){
  .linha-tempo{
    padding:16px 24px 40px;
    overflow-x:auto;
    scrollbar-width:thin;
    scroll-snap-type:x proximity;
  }
  .linha-tempo__trilho{left:24px; right:24px}
  .linha-tempo__pontos{gap:56px; justify-content:flex-start; min-width:min-content}
  .ponto{flex:0 0 auto; min-width:120px; scroll-snap-align:center}
  .ponto__card{
    position:absolute; left:50%;
    transform:translateX(-50%) translateY(10px);
    max-width:280px; width:80vw;
  }
  .ponto:first-child .ponto__card,
  .ponto:last-child .ponto__card{left:50%; right:auto; transform:translateX(-50%) translateY(10px)}
  .ponto:first-child .ponto__gatilho:hover ~ .ponto__card,
  .ponto:last-child .ponto__gatilho:hover ~ .ponto__card,
  .ponto:first-child .ponto__gatilho:focus-visible ~ .ponto__card,
  .ponto:last-child .ponto__gatilho:focus-visible ~ .ponto__card{
    transform:translateX(-50%) translateY(0);
  }
}

/* ============================================================
   METODOLOGIA
   ============================================================ */
.metodo{display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2vw,22px)}
.metodo__cartao{border-radius:var(--r); overflow:hidden; border:1px solid var(--linha); background:var(--branco)}
.metodo__topo{height:76px; position:relative; display:flex; align-items:flex-end; padding:12px}
.metodo__cartao:nth-child(odd) .metodo__topo{background:linear-gradient(120deg,var(--laranja),#E88A2C)}
.metodo__cartao:nth-child(even) .metodo__topo{background:linear-gradient(120deg,var(--verde-2),var(--verde-3))}
.metodo__n{
  font-family:var(--fonte-maquina); font-weight:700; font-size:.72rem; letter-spacing:.1em;
  background:var(--branco); color:var(--verde); border-radius:6px; padding:.2em .55em;
}
.metodo__corpo{padding:clamp(18px,2.2vw,24px)}
.metodo__corpo h3{margin-bottom:.45rem}
.metodo__corpo p{margin:0; font-size:.92rem; color:var(--tinta-60)}
@media (max-width:700px){ .metodo{grid-template-columns:1fr} }

/* ============================================================
   MEMÓRIAS · acervo por ciclos
   ============================================================ */
.filtros{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px}
.filtro{
  display:inline-flex; align-items:center; text-decoration:none;
  background:transparent; border:1px solid var(--linha); border-radius:999px;
  padding:.55em 1.1em; font-size:.85rem; font-weight:600; cursor:pointer; color:var(--verde);
  transition:background var(--t), border-color var(--t), color var(--t);
}
.filtro:hover{border-color:var(--verde-3); color:var(--verde)}
.filtro[aria-current="page"]{background:var(--verde); border-color:var(--verde); color:var(--papel)}
.acervo{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,24px)}
.memoria{background:var(--branco); border:1px solid var(--linha); border-radius:var(--r); overflow:hidden}
.memoria .ph{border:0; border-radius:0}
.memoria__corpo{padding:18px 20px 22px}
.memoria__meta{
  font-family:var(--fonte-maquina); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--terra); display:block; margin-bottom:.5rem;
}
.memoria h3{font-size:1.02rem; margin-bottom:.35rem}
.memoria p{margin:0; font-size:.88rem; color:var(--tinta-60)}
.memoria[hidden]{display:none}
@media (max-width:940px){ .acervo{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ .acervo{grid-template-columns:1fr} }

/* ============================================================
   REDE · mapa + organograma
   ============================================================ */
.rede{display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,40px); align-items:start}
.mapa-caixa{background:var(--branco); border:1px solid var(--linha); border-radius:var(--r); padding:clamp(14px,2vw,22px)}
.mapa{width:100%; height:auto; display:block}
.mapa__terra{fill:var(--verde-2)}
.mapa__ponto{fill:var(--laranja); stroke:var(--branco); stroke-width:6}
.mapa__halo{fill:var(--laranja); opacity:.25}
.mapa__rotulo{font-family:var(--fonte-maquina); font-size:20px; font-weight:700; fill:var(--verde)}
.mapa__rotulo tspan{font-size:16px; font-weight:400; fill:rgba(29,46,28,.6)}
.mapa__legenda{
  font-family:var(--fonte-maquina); font-size:.72rem; letter-spacing:.08em; color:var(--tinta-40);
  text-align:center; margin:.8rem 0 0;
}
.organo{display:grid; gap:10px}
.organo__nivel{display:grid; gap:10px}
.organo__nivel--3{grid-template-columns:repeat(3,1fr)}
.organo__nivel--4{grid-template-columns:repeat(4,1fr)}
.no{
  border-radius:var(--r-sm); padding:.85em 1em; text-align:center; font-size:.86rem; font-weight:600;
  border:1px solid transparent;
}
.no--nucleo{background:var(--verde); color:var(--papel); font-size:.95rem}
.no--lab{background:var(--areia); color:var(--verde)}
.no--com{background:var(--branco); border-color:var(--linha); color:var(--tinta-60); font-size:.78rem; font-weight:500}
.organo__cabecalho h3{margin-bottom:.3rem}
.organo__cabecalho p{font-size:.88rem; color:var(--tinta-60)}
@media (max-width:860px){ .rede{grid-template-columns:1fr} }
@media (max-width:520px){ .organo__nivel--4{grid-template-columns:1fr 1fr} }

.pessoas{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,24px)}
.pessoa .ph{margin-bottom:14px}
.pessoa h3{font-size:1rem; margin-bottom:.15rem}
.pessoa span{font-family:var(--fonte-maquina); font-size:.78rem; color:var(--terra)}
@media (max-width:700px){ .pessoas{grid-template-columns:1fr 1fr} }

/* ============================================================
   PARTICIPE / APOIE
   ============================================================ */
.passos{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,24px); counter-reset:p}
.passo{border-top:2px solid var(--terra); padding-top:18px}
.passo::before{
  counter-increment:p; content:"0" counter(p);
  font-family:var(--fonte-maquina); font-weight:700; color:var(--terra); font-size:.85rem;
  display:block; margin-bottom:.6rem; letter-spacing:.1em;
}
.passo h3{margin-bottom:.4rem}
.passo p{margin:0; font-size:.92rem; color:var(--tinta-60)}
@media (max-width:700px){ .passos{grid-template-columns:1fr} }

.form{display:grid; gap:16px; max-width:640px; background:var(--branco); border:1px solid var(--linha); border-radius:var(--r); padding:clamp(20px,3vw,32px)}
.campo{display:grid; gap:6px}
.campo label{font-size:.85rem; font-weight:600}
.campo input,.campo textarea,.campo select{
  font:inherit; font-size:.94rem; padding:.75em .9em; border:1px solid var(--linha);
  border-radius:var(--r-sm); background:var(--papel); color:var(--tinta);
}
.campo textarea{min-height:130px; resize:vertical}
.form__nota{font-size:.8rem; color:var(--tinta-40); margin:0}

.apoios{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,24px)}
.apoio{background:var(--branco); border:1px solid var(--linha); border-radius:var(--r); padding:clamp(20px,2.4vw,28px); display:flex; flex-direction:column}
.apoio h3{margin-bottom:.5rem}
.apoio p{font-size:.92rem; color:var(--tinta-60); flex:1}
@media (max-width:820px){ .apoios{grid-template-columns:1fr} }

/* ============================================================
   CHAMADA FINAL + RODAPÉ
   ============================================================ */
.chamada{background:var(--verde); color:var(--papel); text-align:center; padding-block:clamp(52px,7vw,86px); position:relative; overflow:hidden}
.chamada h2{color:var(--branco); max-width:18ch; margin-inline:auto}
.chamada p{color:rgba(239,235,224,.75); max-width:52ch; margin:1rem auto 1.8rem}
.chamada .acoes{justify-content:center}
.chamada__marca{position:absolute; right:-40px; bottom:-60px; width:280px; height:auto; color:var(--papel); opacity:.07}

.rodape{background:var(--verde-2); color:rgba(239,235,224,.8); padding-block:clamp(40px,5vw,64px) 28px}
.rodape a{color:rgba(239,235,224,.8); text-decoration:none}
.rodape a:hover{color:var(--laranja)}
.rodape__grade{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(24px,4vw,48px)}
.rodape .marca__txt{color:var(--branco)}
.rodape .marca__txt span{color:var(--laranja)}
.rodape .marca svg{color:var(--papel)}
.rodape h4{color:var(--branco); font-size:.8rem; font-family:var(--fonte-maquina); letter-spacing:.16em; text-transform:uppercase; margin-bottom:1rem}
.rodape ul{list-style:none; margin:0; padding:0; display:grid; gap:.55em; font-size:.9rem}
.rodape__frase{font-size:.92rem; margin:1.2rem 0 1.4rem; max-width:34ch}
.rodape__base{
  margin-top:36px; padding-top:20px; border-top:1px solid rgba(239,235,224,.16);
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between;
  font-family:var(--fonte-maquina); font-size:.76rem; color:rgba(239,235,224,.55);
}
@media (max-width:760px){ .rodape__grade{grid-template-columns:1fr} }

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


/* ============================================================
   AJUSTES DO TEMA (conteúdo vindo do WordPress)
   ============================================================ */
.so-leitor{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.conteudo-estreito{max-width:760px}

.texto{font-size:1.02rem}
.texto h2{margin:2em 0 .6em; font-size:clamp(1.4rem,2.6vw,1.9rem)}
.texto h3{margin:1.8em 0 .5em}
.texto ul,.texto ol{padding-left:1.2em; margin:0 0 1.2em}
.texto li{margin-bottom:.4em}
.texto img{border-radius:var(--r); margin-block:1.4em}
.texto blockquote{
  margin:1.6em 0; padding:.2em 0 .2em 1.4em; border-left:3px solid var(--terra);
  font-family:var(--fonte-maquina); font-size:1.02rem; color:var(--verde);
}
.texto figcaption{font-family:var(--fonte-maquina); font-size:.78rem; color:var(--tinta-40); margin-top:.5em}

.memoria__capa{display:block; text-decoration:none}
.memoria__capa img{width:100%; height:100%; object-fit:cover; display:block}
.memoria__titulo{font-size:1.02rem; margin-bottom:.35rem; font-weight:800}
.memoria__titulo a{color:var(--verde); text-decoration:none}
.memoria__titulo a:hover{color:var(--terra)}
.memoria__destaque{margin:0 0 2em}
.memoria__destaque img{border-radius:var(--r); width:100%; height:auto}
.memoria__destaque figcaption{font-family:var(--fonte-maquina); font-size:.78rem; color:var(--tinta-40); margin-top:.6em}
.voltar{margin-top:2.5em; font-family:var(--fonte-maquina); font-size:.88rem}

/* imagens reais dentro dos blocos de proporção reservada */
.ph img{width:100%; height:100%; object-fit:cover; display:block}

/* paginação */
.navigation.pagination{margin-top:44px}
.pagination .nav-links{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:42px;
  padding:0 .8em; border:1px solid var(--linha); border-radius:999px; text-decoration:none;
  font-family:var(--fonte-maquina); font-size:.85rem; color:var(--verde);
}
.pagination .page-numbers:hover{border-color:var(--verde-3)}
.pagination .page-numbers.current{background:var(--verde); border-color:var(--verde); color:var(--papel)}
.pagination .screen-reader-text{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}

/* menu montado no painel (wp_nav_menu com items_wrap vazio) */
.menu li{list-style:none; display:inline-block}
.menu ul{display:contents; margin:0; padding:0}

/* grid de parceiros (Como Atuamos) */
.parceiros{
  list-style:none; margin:24px 0 0; padding:0;
  display:grid; gap:24px;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  align-items:center;
}
.parceiro{
  display:flex; align-items:center; justify-content:center;
  min-height:96px; padding:16px;
  background:var(--branco); border:1px solid var(--linha); border-radius:var(--r-sm);
  transition:border-color var(--t), transform var(--t);
}
.parceiro:hover{border-color:var(--verde-3); transform:translateY(-2px)}
.parceiro a{display:flex; align-items:center; justify-content:center; text-decoration:none; color:inherit; width:100%; height:100%}
.parceiro img{max-width:140px; max-height:64px; width:auto; height:auto; object-fit:contain; filter:grayscale(1); opacity:.85; transition:filter var(--t), opacity var(--t)}
.parceiro:hover img{filter:none; opacity:1}
.parceiro__nome{
  font-family:var(--fonte-maquina); font-size:.86rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--verde); text-align:center;
}

/* ============================================================
   MEMÓRIAS · Silhueta da América Latina + lista de cidades
   O mapa é uma imagem estática do tema; pinos são <button> absolutos
   posicionados via CSS custom properties --x / --y (em %).
   ============================================================ */
.mapa-caixa{
  display:grid; gap:32px;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  align-items:center;
  margin:40px 0 24px;
}

.mapa-svg{
  position:relative;
  margin:0 auto; padding:0;
  max-width:520px;
  width:100%;
}
.mapa-svg__silhueta{
  display:block; width:100%; height:auto;
  /* multiply faz o branco do JPG virar transparente sobre qualquer fundo */
  mix-blend-mode:multiply;
}

/* Pino */
.mapa-pin{
  position:absolute; left:var(--x); top:var(--y);
  transform:translate(-50%,-50%);
  width:22px; height:22px;
  background:transparent; border:none; padding:0; cursor:pointer;
  z-index:2;
}
.mapa-pin__anel{
  position:absolute; inset:-8px; border-radius:50%;
  background:radial-gradient(circle at center, rgba(251,154,49,.55) 0%, rgba(251,154,49,0) 70%);
  animation:mapa-pin-pulso 2.4s ease-out infinite;
  pointer-events:none;
}
.mapa-pin__ponto{
  position:absolute; inset:0; margin:auto;
  width:14px; height:14px; border-radius:50%;
  background:var(--terra);
  box-shadow:0 0 0 3px var(--branco), 0 6px 14px rgba(0,0,0,.28);
  transition:transform var(--t);
}
.mapa-pin:hover .mapa-pin__ponto,
.mapa-pin:focus-visible .mapa-pin__ponto,
.mapa-pin--ativo .mapa-pin__ponto{transform:scale(1.35)}
@keyframes mapa-pin-pulso{
  0%   {transform:scale(.55); opacity:1}
  100% {transform:scale(1.6); opacity:0}
}
@media (prefers-reduced-motion: reduce){ .mapa-pin__anel{animation:none} }

/* Popup ancorado no pino */
.mapa-pin__popup{
  position:absolute; bottom:calc(100% + 14px); left:50%;
  transform:translateX(-50%) translateY(6px);
  width:260px; max-width:82vw; text-align:left;
  background:var(--branco); border:1px solid var(--linha); border-radius:var(--r-sm);
  box-shadow:0 18px 40px rgba(29,46,28,.20);
  padding:14px 16px 12px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .22s ease, transform .3s cubic-bezier(.2,.7,.3,1), visibility .22s;
  z-index:5;
}
.mapa-pin:hover .mapa-pin__popup,
.mapa-pin:focus-visible .mapa-pin__popup,
.mapa-pin--ativo .mapa-pin__popup{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.mapa-pin__cidade{margin:0; font-weight:800; font-size:1.02rem; color:var(--verde); letter-spacing:-.01em}
.mapa-pin__regiao{
  margin:0 0 10px; font-family:var(--fonte-maquina); font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--terra);
}
.mapa-pin__labs{list-style:none; padding:0; margin:0}
.mapa-pin__labs > li{padding:8px 0; border-top:1px solid var(--linha)}
.mapa-pin__labs > li:first-child{border-top:none; padding-top:2px}
.mapa-pin__ano{
  display:inline-block; margin-right:6px;
  font-family:var(--fonte-maquina); font-weight:700; font-size:.72rem;
  color:var(--laranja); letter-spacing:.08em;
}
.mapa-pin__lab{color:var(--verde); font-weight:700; text-decoration:none}
.mapa-pin__lab:hover{color:var(--terra); text-decoration:underline}
.mapa-pin__resumo{margin:4px 0 0; font-size:.84rem; color:var(--tinta-60); line-height:1.5}

/* Lista lateral */
.mapa-lista{
  background:transparent; padding:0;
}
.mapa-lista__tit{
  font-family:var(--fonte-maquina); text-transform:uppercase; letter-spacing:.18em;
  font-size:.78rem; color:var(--terra); margin:0 0 12px;
}
.mapa-lista__itens{list-style:none; padding:0; margin:0}
.mapa-lista__itens > li{margin:0 0 8px}
.mapa-item{
  width:100%; text-align:left; cursor:pointer;
  background:transparent; border:1px solid transparent; border-radius:var(--r-sm);
  padding:12px 14px;
  display:grid; grid-template-columns:1fr auto; column-gap:12px; row-gap:2px;
  font:inherit; color:var(--tinta);
  transition:background var(--t), border-color var(--t), transform var(--t);
}
.mapa-item:hover, .mapa-item:focus-visible{background:var(--branco); border-color:var(--verde-3); transform:translateX(2px)}
.mapa-item--ativo{background:var(--verde); color:var(--branco); border-color:var(--verde)}
.mapa-item--ativo .mapa-item__regiao{color:rgba(255,255,255,.75)}
.mapa-item--ativo .mapa-item__anos{color:var(--laranja)}
.mapa-item__cidade{font-weight:700; font-size:1rem; letter-spacing:-.01em}
.mapa-item__regiao{grid-column:1/2; font-size:.86rem; color:var(--tinta-60)}
.mapa-item__anos{
  grid-column:2/3; grid-row:1/3; align-self:center;
  font-family:var(--fonte-maquina); font-size:.78rem; letter-spacing:.06em;
  color:var(--terra); white-space:nowrap;
}

/* Responsivo */
@media (max-width:900px){
  .mapa-caixa{grid-template-columns:1fr}
  .mapa-svg{max-width:360px}
  .mapa-lista__itens{display:grid; gap:8px}
}

/* ============================================================
   ABERTURA "O VENTO"
   A foto de folhas é fatiada numa malha irregular; ao interagir,
   os cacos saem em rajada do centro para as bordas. Em <720px,
   fatiamento é caro: vira fade simples. Sai com scroll/clique/toque/tecla.
   ============================================================ */
html.ma-loading,
html.ma-loading body{overflow:hidden; height:100%}

.ma-pre{
  position:fixed; inset:0; z-index:99999; overflow:hidden;
  background:transparent;
  cursor:pointer;
}
.ma-pre.is-done{visibility:hidden; pointer-events:none}

/* Véu escuro: profundidade enquanto as folhas ainda cobrem a tela. */
.ma-pre__veu{
  position:absolute; inset:0; background:#040805;
  transition:opacity 1.1s ease .25s;
}
.ma-pre.is-vento .ma-pre__veu{opacity:0}
.ma-pre.is-fade  .ma-pre__veu{transition:opacity .55s ease; opacity:0}

/* Só serve para o navegador priorizar o download da foto. */
.ma-pre__semente{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}

/* A mata inteira respira antes da rajada. */
.ma-pre__mata{
  position:absolute; inset:0;
  transition:transform .9s cubic-bezier(.4,0,.2,1);
}
.ma-pre.is-brisa .ma-pre__mata{transform:scale(1.02) rotate(.3deg)}
.ma-pre.is-fade  .ma-pre__mata{transition:opacity .6s ease; opacity:0}

/* Cada caco da malha. Posição, recorte e vetor vêm do JS. */
.ma-folha{
  position:absolute;
  background-repeat:no-repeat;
  will-change:transform, opacity, filter;
  backface-visibility:hidden;
}
.ma-pre.is-vento .ma-folha{
  transform:translate3d(var(--tx), var(--ty), 0) rotate(var(--rot)) scale(var(--sc));
  opacity:0;
  filter:blur(var(--bl));
  transition:
    transform var(--dur) cubic-bezier(.34,.03,.24,1) var(--del),
    filter    var(--dur) ease-in var(--del),
    opacity   calc(var(--dur) * .55) ease-in calc(var(--del) + var(--dur) * .42);
}

/* A marca não é fatiada: sobe e dissolve junto com as últimas folhas. */
.ma-pre__marca{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%, -50%);
  width:min(420px, 58vw); height:auto;
  transition:transform 1.2s cubic-bezier(.34,.03,.24,1) .32s, opacity .8s ease .38s;
}
.ma-pre.is-vento .ma-pre__marca,
.ma-pre.is-fade  .ma-pre__marca{transform:translate(-50%, -58%) scale(1.06); opacity:0}

/* Fallback quando não há SVG da marca. */
.ma-pre__marca--texto{
  display:flex; align-items:center; justify-content:center;
  width:min(420px, 58vw); height:auto;
  font-family:var(--fonte-maquina); color:var(--branco);
  font-size:clamp(20px, 3.6vw, 30px); letter-spacing:.06em; text-align:center;
}

.ma-pre__dica{
  position:absolute; left:50%; bottom:clamp(26px, 5vh, 52px);
  transform:translateX(-50%); margin:0; pointer-events:none;
  font-family:var(--fonte-maquina); font-size:.74rem;
  letter-spacing:.2em; text-transform:uppercase;
  color:rgba(251,249,244,.6);
  animation:ma-pulsa 2.6s ease-in-out infinite;
  transition:opacity .3s ease;
}
.ma-pre.is-brisa .ma-pre__dica,
.ma-pre.is-fade  .ma-pre__dica{opacity:0; animation:none}
@keyframes ma-pulsa{0%,100%{opacity:.4} 50%{opacity:.95}}

/* Recuo de câmera: só afeta a home (que tem .ma-com-abertura no body).
   Sem essa restrição, TODA página do site abriria com scale(1.05). */
body.ma-com-abertura > .ma-tela{
  transform:scale(1.05); opacity:.9;
  transition:transform 1.9s cubic-bezier(.2,.7,.25,1), opacity 1.1s ease;
}
body.ma-com-abertura.ma-aberto > .ma-tela{transform:none; opacity:1}

@media (prefers-reduced-motion:reduce){
  .ma-pre{display:none}
  body.ma-com-abertura > .ma-tela{transform:none; opacity:1; transition:none}
}