:root{
  /* paleta oficial do manual */
  --terracota:#9a2c12;
  --azul:#1c4f82;
  --ocre:#d6ad44;
  --preto:#2c2b27;
  --nevoa:#9abdcd;
  --rosa:#e4b0b0;
  --cerrado:#6f916e;
  --cerrado-escuro:#435742;
  --fundo:#f2ebd6;
  --fundo2:#f7f2e4;
  --mut:#6b6255;
  --disp:"Bitter",Georgia,serif;      /* substituto livre de Gelica */
  --body:"Hanken Grotesk",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:78px}
body{font:16px/1.62 var(--body);color:var(--preto);background:var(--fundo);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
section{padding:86px 0;position:relative}
h2{font:800 clamp(34px,5.4vw,60px)/1 var(--disp);text-transform:uppercase;letter-spacing:-.01em;margin-bottom:20px}
h3{font:800 clamp(19px,2.3vw,25px)/1.08 var(--disp);text-transform:uppercase;margin-bottom:16px}
.kick{display:inline-flex;align-items:center;gap:10px;font:700 clamp(11px,.95vw,14px)/1 var(--body);letter-spacing:.2em;
  text-transform:uppercase;color:var(--terracota);margin-bottom:16px}
.kick::before{content:"";width:26px;height:3px;background:var(--ocre)}
.lead{max-width:60ch;color:var(--mut);font-size:17px}
.btn{display:inline-flex;align-items:center;gap:9px;font:700 13px/1 var(--body);letter-spacing:.05em;
  text-transform:uppercase;padding:17px 28px;border-radius:6px;text-decoration:none;border:none;cursor:pointer;
  transition:transform .18s,box-shadow .18s,background .18s,color .18s}
.btn-t{background:var(--terracota);color:var(--fundo)}
.btn-t:hover{background:#83240e;transform:translateY(-2px);box-shadow:0 10px 24px rgba(154,44,18,.3)}
.btn-o{background:var(--ocre);color:var(--preto)}
.btn-o:hover{background:#c79c33;transform:translateY(-2px)}
/* secundario: borda fina e aliviada pra nao competir com o CTA principal.
   rgba(44,43,39,.55) mede 3.27:1 sobre o creme, acima do minimo de 3:1 que a
   WCAG pede pra contorno que identifica um controle. Nao dava pra ir mais
   claro que isso sem a borda deixar de ser percebida. */
.btn-g{background:transparent;color:var(--preto);border:1px solid rgba(44,43,39,.55)}
.btn-g:hover{background:var(--preto);color:var(--fundo);border-color:var(--preto);transform:translateY(-2px)}
:focus-visible{outline:3px solid var(--ocre);outline-offset:3px}
#prog{position:fixed;top:0;left:0;height:3px;width:0;background:var(--terracota);z-index:200}

.fig{position:relative;overflow:hidden;border-radius:4px;background:var(--nevoa)}
.fig img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.3,1),opacity .22s}
.fig:hover img{transform:scale(1.04)}

/* ---------- placa 5050 (elemento do manual) ---------- */
.placa{display:inline-block;background:var(--azul);border:2px solid var(--azul);border-radius:5px;
  padding:3px;line-height:0}
.placa i{display:inline-block;border:1.5px solid var(--fundo);border-radius:3px;padding:2px 10px;
  font:800 var(--pz,20px)/1.05 var(--disp);color:var(--fundo);font-style:normal;letter-spacing:.02em}
.placa i::before,.placa i::after{content:"·";margin:0 5px;opacity:.85}

/* ---------- topo ---------- */
.tse{background:var(--preto);color:var(--fundo);font:700 9.5px/1 var(--body);letter-spacing:.2em;
  text-align:center;padding:10px;text-transform:uppercase}
nav{position:sticky;top:0;z-index:80;background:rgba(242,235,214,.95);backdrop-filter:blur(10px);
  border-bottom:2px solid var(--preto)}
/* O conteudo do nav entra no mesmo .wrap do resto da pagina, que e de onde vem o
   padding horizontal de 24px (o burger depende dele pra nao encostar na borda no
   celular).
   Logo, menu e CTA correm juntos e centralizados como um bloco so. */
.nav-in{display:flex;align-items:center;justify-content:center;gap:28px;padding-top:12px;padding-bottom:12px}
.logo{display:inline-flex;align-items:center;text-decoration:none;flex-shrink:0}
.logo img{height:52px;width:auto}
.logo .n{font:900 27px/1 var(--disp);color:var(--terracota);letter-spacing:-.01em}
.nl{display:flex;align-items:center;gap:2px}
.nl a{font:600 15.5px/1 var(--body);color:var(--preto);text-decoration:none;padding:11px 13px;border-radius:5px;white-space:nowrap;transition:.16s}
.nl a:hover{color:var(--terracota);background:rgba(154,44,18,.07)}
/* respiro curto so pro botao nao encostar em "O que ja fiz" */
.nl .cta{margin-left:10px;background:var(--terracota);color:var(--fundo);font-weight:700;padding:12px 20px}
.nl .cta:hover{background:#83240e;color:var(--fundo)}
.burger{display:none;margin-left:auto;background:var(--terracota);color:var(--fundo);border:none;border-radius:5px;
  padding:12px 15px;font:700 12px/1 var(--body);letter-spacing:.12em;cursor:pointer}

/* ---------- hero ---------- */
.hero{background:var(--fundo);padding:64px 0 0;position:relative;overflow:hidden}
/* align-items:start sobe o bloco de texto pro topo da linha, encostado no topo da
   foto. A foto segue ancorada embaixo pelo align-self:end dela, colada na faixa de
   ondas. O padding-bottom de 110px que estava aqui empurrava o texto pra cima a
   partir de baixo, entao a posicao dele dependia da altura da foto. */
.hgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:start;position:relative;z-index:3}
.hlogo{width:min(560px,100%);height:auto;margin-bottom:26px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hero h1{font:900 clamp(56px,10vw,120px)/.86 var(--disp);text-transform:uppercase;color:var(--terracota);
  letter-spacing:-.015em;margin-bottom:6px}
.hero .lead{margin-bottom:30px;font-size:17.5px}
.hero .lead b{color:var(--preto);font-weight:700}
.hcta{display:flex;gap:12px;flex-wrap:wrap}
.hfig{aspect-ratio:3/4;align-self:end;border-radius:4px 4px 0 0}
.hband{position:absolute;left:0;right:0;bottom:0;height:150px;z-index:1}

/* ---------- faixa do Salve Ravena ---------- */
/* Ocre com texto preto minerio: 6.69:1, o mesmo par do card de Seguranca
   Publica. Era azul colonial ate 25/08/2026 e sumia na pagina: a faixa cai
   logo depois da onda azul que fecha o hero, e azul sobre azul nao se le como
   bloco novo.
   O hover e o proprio ocre com luminosidade -8% (#c69a2b, 5.44:1 contra o
   preto), derivado por HSL e nao escolhido a olho, mesmo criterio do #83240e
   que o CTA do nav ja usa sobre a terracota. Nenhuma cor nova na paleta.
   O foco tem regra propria porque nao tinha nenhuma: o anel padrao do
   navegador cai sobre ocre sem contraste garantido. Preto sobre ocre da
   6.69:1, e o offset negativo desenha por dentro pra nao vazar da faixa. */
.ravena{background:var(--ocre);color:var(--preto);position:relative;z-index:4}
.ravena a{display:block;color:var(--preto);text-decoration:none;transition:background .16s}
.ravena a:hover{background:#c69a2b}
.ravena a:focus-visible{outline:3px solid var(--preto);outline-offset:-4px}
/* flex-wrap e o que segura o mobile: em tela estreita a frase quebra em duas
   linhas dentro da propria faixa em vez de esticar a barra ou vazar. */
.rvn-in{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  padding-top:15px;padding-bottom:15px;text-align:center}
.rvn-in strong{font:800 18px/1.3 var(--disp);letter-spacing:.01em}
.rvn-tx{font:600 16px/1.35 var(--body)}
/* inline-block, e dentro do proprio .rvn-tx no HTML: solta, a seta virava a
   quarta linha da faixa no mobile, sozinha e centralizada. Medido em viewport
   real de 360px. O nbsp antes dela impede a quebra entre "Piedade" e a seta. */
.rvn-seta{display:inline-block;font-size:19px;line-height:1;transition:transform .16s}
.ravena a:hover .rvn-seta{transform:translateX(4px)}

/* ---------- marquee ---------- */
.marq{background:var(--terracota);color:var(--fundo);padding:14px 0;overflow:hidden;white-space:nowrap;position:relative;z-index:4}
/* transform, nunca left/margin: fora do caminho de layout, nao gasta bateria.
   O prefers-reduced-motion global (*{animation:none}) ja congela a faixa.

   A pista e flex de proposito: flex descarta o espaco em branco entre os filhos,
   entao a largura dela e a soma exata das copias e o -20% cai no ponto exato de
   uma copia. Com as copias soltas no HTML o espaco entre elas entrava na conta e
   o deslocamento errava por metade de um espaco (1,9px medidos), o que aparecia
   como um tranco na emenda. width:max-content e obrigatorio: sem ele a pista
   mediria a largura da barra e o -20% seria de outra coisa. */
.mtrack{display:flex;width:max-content;animation:run 55s linear infinite}
/* padding-right repoe o espaco que o flex comeu entre uma copia e a seguinte: sem
   ele a emenda fica mais apertada que o ritmo interno da frase. Em em pra
   acompanhar a fonte menor do mobile. */
.marq .t{flex:none;padding-right:.19em;font:800 20px/1 var(--disp);text-transform:uppercase;letter-spacing:.02em}
.marq .t i{font-style:normal;color:var(--ocre);margin:0 12px}
.marq:hover .mtrack{animation-play-state:paused}
@keyframes run{to{transform:translateX(-20%)}}

/* ---------- números ---------- */
.nums{background:var(--azul);color:var(--fundo);padding:56px 0}
.nums .kick{color:var(--nevoa)}
.nums .kick::before{background:var(--ocre)}
.ngrid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.nb{border-top:3px solid rgba(242,235,214,.28);padding-top:18px}
.nb .v{font:800 clamp(32px,4.4vw,52px)/1 var(--disp);color:var(--ocre)}
.nb .d{font-size:13.5px;color:var(--nevoa);margin-top:9px}
.nsrc{margin-top:24px;font:400 10.5px/1.6 var(--body);letter-spacing:.1em;color:#6f96b5;text-transform:uppercase}

/* ---------- entregas em destaque (leis/aprovados/co-autorias, dentro de .nums) ---------- */
.nums .lead{color:var(--fundo)}
.entregas{margin-top:32px;display:grid;gap:32px}
.entregas h3{font:800 20px/1.15 var(--disp);text-transform:uppercase;color:var(--ocre);margin-bottom:14px}
.nums .go{display:inline-block;margin-top:28px;font:700 11px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--fundo);text-decoration:none}

@media(min-width:1001px){
  .nb{padding-right:20px}
  .nb:not(:first-child){border-left:3px solid rgba(242,235,214,.28);padding-left:20px}
}

/* ---------- história ---------- */
/* coluna unica desde que o lead redundante saiu (repetia o proprio h2) */
.htop{margin-bottom:44px}
.years{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:32px}
.yb{font:700 11.5px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;padding:13px 18px;border-radius:5px;
  border:2px solid var(--preto);background:transparent;color:var(--preto);cursor:pointer;transition:.18s}
.yb:hover{background:rgba(44,43,39,.07)}
.yb.on{background:var(--preto);color:var(--fundo)}
/* o reset (*{margin:0}) zera a margem de paragrafo e .lead nao repoe:
   sem isso os 4 paragrafos da trajetoria leem como bloco unico */
.hpanel>p.lead,.maisdet>p.lead{margin-bottom:16px}
.maisdet>p.lead:last-child{margin-bottom:0}
/* "Continuar lendo" da trajetoria: <details> nativo, abre sem JS */
.maisdet summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:9px;
  font:700 11.5px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--terracota);
  padding:12px 0;transition:color .18s}
.maisdet summary::-webkit-details-marker,.maisdet summary::marker{display:none;content:""}
.maisdet .fe{display:none}
.maisdet[open] .ab{display:none}
.maisdet[open] .fe{display:inline}
.maisdet summary::after{content:"↓";font-size:14px;transition:transform .2s}
.maisdet[open] summary::after{transform:rotate(180deg)}
.maisdet[open] summary{color:var(--mut)}
.maisdet summary:hover{color:#83240e}
.maisdet summary:focus-visible{outline:3px solid var(--ocre);outline-offset:3px}
.hstage{display:grid;grid-template-columns:.9fr 1.1fr;gap:52px;align-items:center;min-height:400px}
.hstage .fig{aspect-ratio:1/1}
.hslide{display:none;animation:sl .5s cubic-bezier(.2,.8,.2,1)}
.hslide.on{display:block}
@keyframes sl{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hslide .tag{display:inline-block;font:700 10px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;
  color:var(--fundo);background:var(--terracota);padding:9px 14px;border-radius:4px;margin-bottom:16px}
.hslide h3{font-size:clamp(26px,3.4vw,42px);margin-bottom:13px;color:var(--terracota)}
.hslide p{color:var(--mut);font-size:16.5px;max-width:52ch}
.hslide .q{margin-top:22px;padding-left:20px;border-left:4px solid var(--ocre);font:600 17px/1.5 var(--body);color:var(--preto)}

/* ---------- causas ---------- */
#minhas-lutas{background:var(--preto);color:var(--fundo)}
#minhas-lutas .kick{color:var(--ocre)}
#minhas-lutas .kick::before{background:var(--ocre)}
#minhas-lutas .lead{color:#c9c2b2}
.cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.cz{position:relative;border-radius:6px;overflow:hidden;transition:.26s;border:2px solid rgba(242,235,214,.2);
  background-repeat:no-repeat;background-size:320px 320px;background-position:center 10px}
.cz.aberto{grid-column:1/-1;border-color:var(--ocre)}
.cz-azul{background-color:var(--azul);color:var(--fundo)}
.cz-terracota{background-color:var(--terracota);color:var(--fundo)}
.cz-preto{background-color:var(--preto);color:var(--fundo)}
.cz-cerrado-escuro{background-color:var(--cerrado-escuro);color:var(--fundo)}
.cz-ocre{background-color:var(--ocre);color:var(--preto)}
.cz-nevoa{background-color:var(--nevoa);color:var(--preto)}
.cz-rosa{background-color:var(--rosa);color:var(--preto)}
.cz-toggle{all:unset;position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:330px;width:100%;box-sizing:border-box;cursor:pointer;padding:28px;transition:.26s}
.cz-toggle:hover{transform:translateY(-4px)}
.cz-toggle:focus-visible{outline:3px solid var(--ocre);outline-offset:-3px}
.cz .num{position:absolute;top:22px;right:26px;font:900 46px/1 var(--disp);color:currentColor;opacity:.22}
.cz h3{position:relative;color:currentColor}
.cz-toggle p{position:relative;font-size:14px;line-height:1.4;color:currentColor;margin:0}
.cz .more{position:relative;margin-top:16px;font:700 10px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;
  color:currentColor;opacity:0;max-height:0;overflow:hidden;transition:.28s}
.cz.aberto .more{opacity:1;max-height:40px}
.cz-corpo{position:relative;padding:0 28px 28px}
.cz-corpo p{font-size:15px;line-height:1.4;color:currentColor;max-width:70ch;margin:0 0 18px}
.cz-corpo ul{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin:0 0 18px}
.cz-corpo li{font-size:14px;color:currentColor;padding-left:19px;position:relative}
.cz-corpo li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;background:currentColor;border-radius:2px}
.cz-corpo .go{display:inline-block;font:700 11px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:currentColor;text-decoration:none}

/* ---------- downloads ---------- */
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:42px}
.dl{background:var(--fundo2);border:2px solid var(--preto);border-radius:6px;overflow:hidden;
  text-decoration:none;color:var(--preto);transition:.2s;display:block}
.dl:hover{transform:translateY(-5px);box-shadow:8px 8px 0 var(--preto)}
.dl .th{aspect-ratio:4/3;position:relative;display:flex;align-items:flex-end;padding:15px}
.dl .th span{position:relative;font:700 9px/1.5 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--fundo)}
.dl .bd{padding:18px}
.dl p{font-size:13px;color:var(--mut);margin-top:6px}
.dl .go{display:inline-block;margin-top:14px;font:700 10px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;
  color:var(--terracota);border-bottom:3px solid var(--ocre);padding-bottom:4px}

/* ---------- agenda ---------- */
#agenda{background:var(--cerrado);color:var(--fundo)}
#agenda .kick{color:#dce7db}
#agenda .kick::before{background:var(--ocre)}
#agenda .lead{color:#dce7db}
.ag{margin-top:40px}
.agi{display:grid;grid-template-columns:102px 1fr auto;gap:24px;align-items:center;padding:23px 0;
  border-bottom:2px solid rgba(242,235,214,.24);transition:.2s}
.agi:first-child{border-top:2px solid rgba(242,235,214,.24)}
.agi:hover{padding-left:10px}
.dt{text-align:center;background:var(--fundo);border-radius:5px;padding:12px 8px}
.dt .d{font:800 30px/1 var(--disp);color:var(--terracota)}
.dt .m{font:700 10px/1 var(--body);letter-spacing:.2em;color:var(--mut);margin-top:4px;text-transform:uppercase}
.agi p{font-size:13.5px;color:#dce7db;margin-top:5px}
.agi .go{font:700 11px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--ocre);text-decoration:none;white-space:nowrap}

/* ---------- voluntário ---------- */
#voluntario{background:var(--terracota);color:var(--fundo);overflow:hidden}
#voluntario .kick{color:var(--rosa)}
#voluntario .kick::before{background:var(--ocre)}
#voluntario .lead{color:#f0d3ca}
.volhead{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:start;margin-top:34px}
.voltxt>p.lead{margin-bottom:18px;line-height:1.5}
.volhead .imp{margin-bottom:0}
.vol{margin-top:42px}
.cta-grupo{margin-top:32px}
.cta-grupo .lead{margin:0 0 20px;max-width:none;line-height:1.5}
.cta-grupo .btn{width:100%;justify-content:center;font-size:16px;padding:24px 32px}
.why{background:rgba(242,235,214,.1);border-left:5px solid var(--ocre);border-radius:5px;padding:24px 28px;margin-bottom:26px}
.why p{font-size:16px;color:var(--fundo);font-weight:500}
.why b{color:var(--ocre)}
.imp{display:grid;gap:11px;margin-bottom:26px}
.ic{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;background:rgba(242,235,214,.08);
  border-radius:5px;padding:17px 21px;transition:.2s}
.ic:hover{background:rgba(214,173,68,.16);transform:translateX(5px)}
.ic .big{font:800 30px/1 var(--disp);color:var(--ocre);white-space:nowrap}
.ic .tx{font-size:14px;color:#f0d3ca}
.ic .tx b{color:var(--fundo);display:block;font-size:15px;margin-bottom:2px}
.vfig{aspect-ratio:16/10;margin-top:26px}
.form{background:var(--fundo);color:var(--preto);border-radius:8px;padding:36px;box-shadow:10px 10px 0 rgba(44,43,39,.35)}
.form h3{color:var(--terracota);margin-bottom:5px}
.form>p{font-size:14px;color:var(--mut);margin-bottom:6px}
.form label{display:block;font:700 11.5px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--terracota);margin:19px 0 8px}
.form input,.form select{width:100%;padding:14px 15px;border:2px solid #ddd3b8;border-radius:5px;
  font:400 15px/1.4 var(--body);color:var(--preto);background:var(--fundo2)}
.form input:focus,.form select:focus{border-color:var(--azul);outline:none}
.form .btn{width:100%;justify-content:center;margin-top:26px}
.ok{display:none;margin-top:16px;background:#e7f0e3;border:2px solid var(--cerrado);color:#33532f;border-radius:5px;padding:14px;font-size:14.5px}
.fnote{font-size:12.5px;color:var(--mut);text-align:center;margin-top:13px}

/* ---------- redes / rodapé ---------- */
.redes{background:var(--ocre);padding:60px 0}
.redes .in{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:center}
.redes h2{color:var(--preto)}
.redes p{color:#6a5420;font-size:15px;margin-top:8px;max-width:44ch}
/* linha de identificacao do financiador: ocupa a propria faixa dentro do flex */
.financiador{flex-basis:100%;margin-top:8px;font-size:13px;line-height:1.55;color:var(--preto);max-width:70ch}
.sc{display:flex;gap:11px;flex-wrap:wrap}
.sb{display:inline-flex;align-items:center;gap:9px;background:var(--preto);color:var(--fundo);
  font:700 13px/1 var(--body);padding:16px 24px;border-radius:5px;text-decoration:none;transition:.18s}
.sb:hover{transform:translateY(-3px);background:var(--terracota)}
.flogo{display:block;width:100%;max-width:250px;height:auto}
footer{background:var(--preto);color:#b9b2a4;padding:52px 0 30px;font-size:13.5px}
/* 5 filhos: com 4 colunas o bloco de Contato caia sozinho na segunda linha */
.fc{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:28px;padding-bottom:32px;border-bottom:2px solid rgba(242,235,214,.14)}
footer h4{font:700 10.5px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--fundo);margin-bottom:14px}
footer a{color:#b9b2a4;text-decoration:none;display:block;padding:5px 0}

/* colunas do rodape: <details> no HTML pra virarem accordion no mobile.
   No desktop ficam sempre abertas e o summary nao e clicavel. */
.fcol>summary{list-style:none;cursor:default}
.fcol>summary::-webkit-details-marker,.fcol>summary::marker{display:none;content:""}
.fcol>summary h4{display:inline}

/* redes viram linha de icones: mesmos links e mesmas URLs, so muda a etiqueta visual.
   Coluna centralizada, h4 junto: os 6 icones ocupam 284px numa faixa de ~182px,
   entao ja quebram em duas fileiras e alinhados a esquerda ficam tortos. Ela
   destoa das outras quatro colunas do rodape de proposito, e a unica que nao e
   lista de links. */
.fredes{text-align:center}
.fredes-ic{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;margin-top:2px}
.fredes-ic a{display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:0;border-radius:6px;color:#b9b2a4;transition:.16s}
.fredes-ic svg{width:20px;height:20px;display:block}
.fredes-ic a:hover{color:var(--ocre);background:rgba(242,235,214,.08)}
.fredes-ic a:focus-visible{outline:3px solid var(--ocre);outline-offset:2px}
footer a:hover{color:var(--ocre)}
/* Bloco legal: legibilidade aqui e requisito de aprovacao de anuncio politico,
   nao so acessibilidade. Sem caixa alta, que atrapalha leitura em corpo pequeno. */
.legal{padding-top:24px;font:400 12px/1.75 var(--body);letter-spacing:.02em;color:#a9a294;text-align:center}
.legal b{color:#e6dfd0}
.legal .rsocial{display:block;margin-top:6px;color:#a9a294}

/* Reveal aditivo: o conteudo nasce visivel e a animacao so acontece quando o JS
   marca .in. Se o main.js nao carregar (rede movel ruim), nada some da tela. */
.rv{opacity:1}
.rv.in{animation:revelar .6s ease both}
@keyframes revelar{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  /* A faixa fica parada (o *{animation:none} acima ja congela ela), mas continua
     sendo UMA linha horizontal. A versao anterior soltava o white-space e virava
     bloco de varias linhas: com font-size/line-height 1 as linhas quebradas quase
     encostavam umas nas outras. overflow-x:auto devolve o acesso ao resto das
     frentes sem quebrar linha, arrastando. */
  .marq{overflow-x:auto}
  /* uma copia so: as outras quatro existem pro loop, nao pra leitura */
  .mtrack .t~.t{display:none}
}

@media(max-width:1000px){
  .hgrid,.hstage,.volhead{grid-template-columns:1fr}
  .marq .t{font-size:15px}
  .rvn-in{gap:6px;padding-top:13px;padding-bottom:13px}
  .rvn-in strong{font-size:16px}
  .rvn-tx{font-size:14.5px}
  .logo img{height:38px}
  .volhead{gap:0}
  .volhead .imp{margin-top:28px}
  .hcol{padding-bottom:30px}
  /* 3/4 = proporcao nativa da hero-mobile.webp (1200x1600): foto inteira, zero corte */
  .hfig{aspect-ratio:3/4;border-radius:4px}
  .hstage .fig{aspect-ratio:16/10}
  .ngrid{grid-template-columns:1fr 1fr}
  .cgrid{grid-template-columns:1fr}
  .cz{min-height:auto}
  .cz-corpo ul{grid-template-columns:1fr}
  .g4{grid-template-columns:1fr 1fr}
  .agi{grid-template-columns:86px 1fr}
  .agi .go{grid-column:2}
  .fc{grid-template-columns:1fr 1fr}
  .nl{display:none}
  .nl.open{display:flex;position:absolute;top:100%;left:0;right:0;background:var(--fundo);flex-direction:column;
    align-items:stretch;padding:12px;gap:4px;border-bottom:2px solid var(--preto)}
  /* no dropdown o CTA alinha com os outros itens: sem o reset ele herdaria o
     respiro de 10px do desktop e ficaria indentado sozinho */
  .nl.open .cta{margin-left:0}
  .burger{display:block}
}

/* ==========================================================================
   O que já fiz — home (chips de entrada + reconhecimentos) e páginas de tema
   ========================================================================== */

/* ---------- cabeçalho leve das páginas de tema (o-que-ja-fiz.php) ---------- */
.atheader{padding:18px 0;border-bottom:2px solid rgba(44,43,39,.1)}
.atheader .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.atheader .logo img{height:30px;width:auto}
.voltar{font:700 12px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--terracota);text-decoration:none}
.voltar:hover{color:#83240e}

.tema-page h1{font:800 clamp(34px,5.4vw,60px)/1 var(--disp);text-transform:uppercase;letter-spacing:-.01em;margin-top:14px}

/* ---------- documento de texto corrido (privacidade) ---------- */
.atualizado{margin-top:14px;font:600 12px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.doc{max-width:68ch;margin-top:34px}
.doc h2{font-size:clamp(21px,2.5vw,28px);margin:42px 0 14px}
.doc h3{font-size:clamp(16px,1.8vw,19px);margin:26px 0 10px}
.doc p{color:var(--mut);font-size:17px;line-height:1.6;margin-bottom:14px}
.doc ul{margin:0 0 18px 22px}
.doc li{color:var(--mut);font-size:17px;line-height:1.6;margin-bottom:8px}
.doc a{color:var(--terracota);font-weight:600}
.doc .dado{background:var(--fundo2);border-radius:6px;padding:20px 24px;margin-bottom:14px}
.doc .dado p{margin-bottom:6px}
.doc .dado p:last-child{margin-bottom:0}
.doc .dado b{color:var(--preto)}

/* ---------- chips de causa (home e páginas de tema) ---------- */
.chips-tema{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px;
  position:static;z-index:auto;background:none;backdrop-filter:none;border-bottom:none;padding:0}
.chip-tema{display:inline-flex;align-items:center;gap:8px;font:700 12.5px/1 var(--body);letter-spacing:.03em;
  background:var(--fundo2);color:var(--preto);border:2px solid rgba(44,43,39,.14);border-radius:99px;
  padding:11px 16px;text-decoration:none;transition:.18s}
.chip-tema:hover{border-color:var(--terracota);transform:translateY(-2px)}
.chip-tema.on{background:var(--preto);color:var(--fundo);border-color:var(--preto)}
.chip-tema .n{font-size:11px;color:var(--mut);font-weight:600}
.chip-tema.on .n{color:var(--nevoa)}

/* ---------- seletor de tema: <details>/<summary> nativo, barra sticky em qualquer largura ---------- */
.tema-select{margin-top:32px}
.tema-select summary{list-style:none;cursor:pointer}
.tema-select summary::-webkit-details-marker,.tema-select summary::marker{display:none;content:""}
.tema-atual{position:sticky;top:0;z-index:6;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:14px 0;background:var(--fundo)}
.tema-atual .placa{--pz:16px}
.tema-atual .placa i::before,.tema-atual .placa i::after{content:none}
.seta-tema{width:9px;height:9px;flex-shrink:0;border-right:2px solid var(--mut);
  border-bottom:2px solid var(--mut);transform:rotate(45deg);transition:transform .25s}
.tema-select[open] .seta-tema{transform:rotate(-135deg)}
.serra-div{display:block;width:100%;height:20px;margin-top:10px}

/* ---------- reconhecimentos (home, bloco à parte dos chips de tema) ---------- */
.reconhecimentos{margin-top:38px;padding-top:28px;border-top:2px solid rgba(44,43,39,.12)}
.reconhecimentos h3{margin-bottom:16px}
/* reset zera margem de p e .rlist nao tem margin-top: sem isso o ano do
   primeiro item encosta no paragrafo de abertura */
.reconhecimentos>p.lead{margin-bottom:20px}
.rlist{list-style:none;display:grid;gap:18px}
.rlist .rano{display:block;font:700 10.5px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;
  color:var(--terracota);margin-bottom:6px}
.rlist .rano:empty{display:none}
.rlist .rtxt b{display:block;font-size:15px;color:var(--preto)}
.rlist .rtxt span{display:block;font-size:13px;color:var(--mut);margin-top:2px}

/* ---------- busca secundária dentro do tema ---------- */
.busca-tema{margin-top:28px}
.busca-tema input{width:100%;max-width:440px;padding:14px 16px;border:2px solid rgba(44,43,39,.16);
  border-radius:99px;font:400 15px/1.4 var(--body);color:var(--preto);background:var(--fundo2)}
.busca-tema input:focus{border-color:var(--azul);outline:none}
.busca-tema input::placeholder{color:var(--mut)}

/* ---------- lista de cards ---------- */
.lista-atuacao[hidden]{display:none}
.lista-atuacao{list-style:none;display:grid;gap:0;margin-top:28px;border-radius:10px;overflow:hidden;
  border-top:1px solid rgba(44,43,39,.12)}
.card-atuacao{background:var(--fundo2);transition:background .18s;border-bottom:1px solid rgba(44,43,39,.12)}
.card-atuacao[hidden]{display:none}
.card-toggle{all:unset;display:grid;grid-template-columns:1fr auto;align-items:center;gap:14px;
  width:100%;box-sizing:border-box;cursor:pointer;padding:14px 22px}
.card-toggle:focus-visible{outline:3px solid var(--ocre);outline-offset:-3px}
.card-tipo{grid-column:1;font:700 10.5px/1 var(--body);letter-spacing:.14em;text-transform:uppercase}
.card-titulo{grid-column:1;display:block;font:700 15.5px/1.32 var(--body);color:var(--preto);margin-top:4px}
.card-seta{grid-column:2;grid-row:1 / span 2;justify-self:end;width:9px;height:9px;flex-shrink:0;
  border-right:2px solid var(--mut);border-bottom:2px solid var(--mut);transform:rotate(45deg);transition:transform .25s}
.card-atuacao.aberto .card-seta{transform:rotate(-135deg)}
.card-corpo{padding:0 22px 22px}
.card-corpo[hidden]{display:none}
.card-resumo{margin:0 0 14px;font-size:14px;line-height:1.5;color:var(--mut)}
.card-meta{font:700 13px/1 var(--disp);color:var(--mut);margin-bottom:10px}
.card-fonte{display:inline-block;font:700 11px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;
  color:var(--azul);text-decoration:none;border-bottom:2px solid var(--nevoa);padding-bottom:3px;margin-right:16px}
.card-fonte:hover{color:#123a63}
.btn-copiar{font:700 11px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;background:var(--preto);
  color:var(--fundo);border:none;border-radius:99px;padding:11px 18px;cursor:pointer;transition:.18s}
.btn-copiar:hover{background:var(--terracota)}

/* hierarquia visual por tipo (peso 1 = maior prova, peso 6 = menor) */
.card-atuacao.peso-1{border-left:5px solid var(--terracota);background:rgba(154,44,18,.06)}
.card-atuacao.peso-1 .card-tipo{color:var(--terracota)}
.card-atuacao.peso-2{border-left:5px solid var(--azul);background:rgba(28,79,130,.05)}
.card-atuacao.peso-2 .card-tipo{color:var(--azul)}
.card-atuacao.peso-3{border-left:4px solid var(--ocre);background:rgba(214,173,68,.07)}
.card-atuacao.peso-3 .card-tipo{color:var(--preto)}
.card-atuacao.peso-4{border-left:3px solid var(--mut)}
.card-atuacao.peso-4 .card-tipo{color:var(--mut)}
.card-atuacao.peso-5{border-left:3px solid var(--rosa);background:rgba(228,176,176,.1)}
.card-atuacao.peso-5 .card-tipo{color:var(--preto)}
.card-atuacao.peso-6{border-left:2px solid rgba(44,43,39,.15)}
.card-atuacao.peso-6 .card-tipo{color:var(--mut);font-weight:600}
.card-atuacao.peso-6 .card-titulo{font-weight:600}

/* ---------- "ver os outros N" ---------- */
.ver-outros{display:block;margin:22px auto 0;font:700 12px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;
  background:transparent;color:var(--terracota);border:2px solid var(--terracota);border-radius:99px;
  padding:13px 26px;cursor:pointer;transition:.18s}
.ver-outros:hover{background:var(--terracota);color:var(--fundo)}
.ver-outros[aria-expanded="true"]{display:none}
.sem-resultado{margin-top:28px;color:var(--mut);font-size:14.5px}
.sem-resultado[hidden]{display:none}

/* ---------- confirmação visível ao copiar link ---------- */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,12px);z-index:50;
  background:var(--preto);color:var(--fundo);font:600 13.5px/1.4 var(--body);padding:14px 22px;
  border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.28);opacity:0;pointer-events:none;
  transition:opacity .22s,transform .22s;max-width:min(90vw,360px);text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}

@media(max-width:1000px){
  .rlist li{grid-template-columns:1fr}
  .atheader .wrap{gap:12px}
}
@media(max-width:560px){section{padding:60px 0}.ngrid,.g4{grid-template-columns:1fr}.fc{grid-template-columns:1fr}}

/* accordion do rodape, so no mobile. O JS tira o atributo "open" abaixo de 768px;
   sem JS as colunas ficam abertas, que e o degrade seguro. */
@media(max-width:767px){
  .fc{grid-template-columns:1fr;gap:0}
  .fcol{border-top:1px solid rgba(242,235,214,.14)}
  .fcol>summary{cursor:pointer;display:flex;align-items:center;justify-content:space-between;
    padding:15px 0;min-height:44px;box-sizing:border-box}
  .fcol>summary h4{margin-bottom:0}
  .fcol>summary::after{content:"↓";color:#b9b2a4;font-size:13px;transition:transform .2s}
  .fcol[open]>summary::after{transform:rotate(180deg)}
  .fcol>a{padding:8px 0 8px 2px}
  .fcol[open]{padding-bottom:10px}
  .fredes{border-top:1px solid rgba(242,235,214,.14);padding-top:14px;margin-top:2px}
}