/* Hierarquia de ação, ritmo vertical e unidade dos números-âncora.

   Duas correções apontadas na auditoria de 05/09, aplicadas por folha própria
   para não mexer nas seis camadas que já disputam os mesmos seletores.
   Carrega sempre ANTES da campanha-contraste, que precisa continuar sendo a
   última folha da página (scripts/check-cores-publicas.sh garante isso).

   1. BOTÃO PREENCHIDO NÃO LEVA SUBLINHADO. Os dois CTAs verdes da home vinham
      com text-decoration: underline herdado da regra global de links, e botão
      cheio com texto sublinhado lê como link quebrado. Medido em produção:
      ambos com "underline" sobre fundo #25d366. O sublinhado continua onde ele
      serve, que é em link de texto.

   2. RITMO VERTICAL. A home tinha 795px sem nenhum conteúdo, 13% da altura, com
      uma faixa de 314px entre o fim da seção de obras e o começo da Tropa 300,
      e outra de 166px depois dela. Respiro é virtude e o piso do estúdio é
      80 a 120px; 314px é o leitor rolando no escuro. Estas regras cortam o
      excesso acumulado sem encostar no piso. */

/* ── 1. botões preenchidos ── */

.fpt-cta,
.btn-hope,
.gp-cta,
a.btn:not(.btn-texto) {
  text-decoration: none;
}

/* ── 2. ritmo vertical da home ── */

/* A .mapa300 abria com 314px de nada antes do primeiro elemento. O padding
   vinha somado de duas folhas diferentes e ninguém tinha percebido a soma. */
.home-campanha .mapa300 {
  padding-top: clamp(56px, 6vw, 96px);
  padding-bottom: clamp(56px, 6vw, 96px);
}

/* A faixa do jingle vinha logo em seguida com outros 166px vazios no topo. */
.home-campanha .jingle {
  padding-top: clamp(48px, 5vw, 80px);
  padding-bottom: clamp(48px, 5vw, 80px);
}

/* As duas seções do meio (quem é / o que voltou) tinham 119px e 114px de
   sobra no encontro entre elas. */
.home-campanha .quem { padding-bottom: clamp(48px, 5vw, 80px); }
.home-campanha .voltou { padding-top: clamp(48px, 5vw, 80px); }


/* ── 3. os três números-âncora falam com uma voz só ──

   R$ 1,53 bi, 30% e quase 345 mil são os números mais repetidos da campanha
   e apareciam em três tratamentos: verde --book de 42px na home, azul --nuit
   de 46px em /o-que-voltou/ e azul --nuit de 40px em /doe/. O azul já era a
   decisão tomada: a doe-clara-v1.css de 02/09 força --nuit ali com
   !important, e o preflight guarda essa folha. A home é que ficou fora.

   O verde ainda por cima disputava com dois outros verdes vizinhos, o do
   botão do WhatsApp (#25d366) e o do capacete no 300.

   Unifico a cor, que é o que o leitor reconhece de uma página para a outra,
   e deixo o tamanho seguir o contexto de cada página: 40 a 46px não se nota
   entre telas diferentes, verde contra azul se nota. */

/* A regra do verde é `.h2v .nums b`, e ela mora no <style> inline da página,
   que carrega depois destas folhas. Mesma especificidade empata e a última
   ganha, então aqui a especificidade sobe com o body na frente. */
body.home-campanha .h2v .nums b,
body .lj-num > div > b {
  color: var(--nuit, #1e4890);
}


/* ── 4. os botões dos cards de material param na mesma linha ──

   Em /materiais/ os cards já têm a mesma altura, mas os botões Feed e Story
   flutuavam 17px de diferença entre um card e outro, porque o título de
   alguns ocupa uma linha a mais e o conteúdo empurra o resto para baixo.
   O card vira coluna e o miolo cresce, o que prende os botões ao pé. */

.grade-cards > .pc {
  display: flex;
  flex-direction: column;
}

.grade-cards > .pc > .pc-in {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* o último filho do miolo é a linha de botões */
.grade-cards > .pc > .pc-in > :last-child {
  margin-top: auto;
}


/* ── 5. o estado mudo do placar precisa ser legível ──

   Quando a API do placar não responde, o widget ganha a classe .placar-mudo e
   troca os números por uma mensagem de prova social. Só que o cartão tem fundo
   navy e essa mensagem herdava a cor de texto das páginas claras: o rótulo
   saía navy sobre navy (contraste medido: 1:1, invisível) e a linha de apoio
   em 2,19:1, ambos abaixo do mínimo WCAG.

   Em produção não aparece porque a API responde, então o defeito é latente e
   só se mostra no dia em que o placar cair, que é justamente o dia em que
   ninguém está olhando para isso. Encontrado ao testar em local, sem Worker. */

/* O !important aqui não é preguiça. A doe-clara-v1.css, criada em 02/09 para
   arrumar a distribuição de cores da página, pinta de navy TODO .rotulo, h1 e
   .lead dentro de .hero com !important, e não abriu exceção para o cartão
   escuro do placar, que também vive dentro do hero. Foi essa correção que
   criou o navy sobre navy. Sem !important, a regra abaixo perde. */
.placar.placar-mudo .rotulo {
  color: var(--hope, #dbe64c) !important;
}

.placar.placar-mudo .lead,
.placar.placar-mudo p {
  color: rgba(255, 255, 255, .88) !important;
}


/* ── 6. o texto sobre o verde da sala de imprensa ──

   Na /imprensa/, os dois parágrafos do bloco de fotos oficiais são brancos a
   85% de opacidade sobre o verde --book (#00804d). Isso dá 4,07:1, e o
   mínimo WCAG AA para texto de 14px é 4,5:1. Levar a opacidade a 1 leva a
   razão para 4,58:1, que passa, sem mudar cor nem tamanho.

   Achado ao corrigir o próprio medidor de contraste, que antes ignorava
   background-image e por isso não avaliava blocos com fundo em gradiente. */

.press-item p,
.press-item .press-termos {
  color: #fff;
}


/* ── 7. três contrastes reais, achados na varredura das 34 páginas ──

   Só apareceram depois que o medidor passou a entender fundo em gradiente.
   Todos são texto claro sobre fundo colorido, e nenhum muda de cor: o que
   muda é a opacidade, que estava comendo o contraste.

   /obrigado/  o botão "Enviar no WhatsApp" tinha branco sobre o verde
               #25d366: 1,98:1, praticamente ilegível, e é o botão principal
               da página que a pessoa vê depois de doar. Texto em navy sobre
               o mesmo verde dá 8,6:1, e é o mesmo par que a /grupos/ usa.
   /mandato/   branco a 80% sobre o verde --book: 3,78:1. A 100%, 4,58:1.
   /lava-jato/ branco a 50% sobre o azul: 4,47:1, a três centésimos do
               mínimo. A 62%, passa com folga. */

/* As duas regras alvo moram no <style> inline da página, com especificidade
   maior que um seletor de classe simples, então aqui os seletores acompanham. */
a.obg-btn.principal {
  color: var(--navy, #001f3e);
}

.placar .placar-head p {
  color: #fff;
}

.custo-fonte {
  color: rgba(255, 255, 255, .62);
}