/* ══════════════════════════════════════════════════════════════════════════
   QUEM FAZ, sistema das páginas de resposta rápida
   Identidade 11223. Todas as cores vêm de assets/brand/css/tokens.css;
   nenhum hex novo mora aqui. Regras em _IDENTIDADE/CLAUDE.md.

   Estas páginas são feitas para serem abertas num celular, vindas de um link
   de WhatsApp ou de uma resposta de comentário. Um scroll curto, números
   grandes, e nada que exija paciência.
   ══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  /* o degradê vive por seção (.fundo-campanha); o body é só o chão */
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte);
  font-weight: var(--peso-normal);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* height:auto é obrigatório: com os atributos width/height no HTML (que
   evitam salto de layout), sem isto o navegador trata a altura como fixa e
   a foto estica. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--cor-acento); color: var(--cor-sobre-acento); }

.wrap { width: min(1120px, 100% - 40px); margin-inline: auto; }
@media (max-width: 640px) { .wrap { width: calc(100% - 32px); } }

/* ── O fundo da identidade ────────────────────────────────────────────────
   Mesmo padrão do index.html do site: o degradê é aplicado POR SEÇÃO, não no
   body. Um radial esticado por uma página de 8 mil pixels vira uma mancha; por
   seção, ele reaparece inteiro em cada bloco e é isso que assina a identidade.

   A textura vem por cima como MÁSCARA. Não trocar por background-image: um SVG
   carregado por url() renderiza isolado, o currentColor dele cai para preto, e
   uma textura preta a 7% sobre o azul escuro simplesmente some. */
.fundo-campanha { position: relative; background: var(--grad-fundo); }
.fundo-campanha::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-color: #fff;
  -webkit-mask-image: url("../assets/brand/textura/setas-tile.svg");
          mask-image: url("../assets/brand/textura/setas-tile.svg");
  -webkit-mask-size: var(--textura-tamanho);
          mask-size: var(--textura-tamanho);
  opacity: var(--textura-opacidade);
}
/* Véu: sem ele o texto pequeno cai sobre o claro do degradê (#0082BF) e
   reprova contraste. Entra ABAIXO da textura, invertido, apagaria os 7%. */
.veu::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--veu-conteudo);
}
.veu::before { z-index: 1; }
.fundo-campanha > .wrap { position: relative; z-index: 2; }

/* ── Tipografia do sistema ────────────────────────────────────────────────
   Duas famílias com papéis separados, como manda _IDENTIDADE/CLAUDE.md:

     --fonte          Acumin Pro, 400/700. O que se lê sentado: parágrafo,
                      rótulo, botão, texto de card.
     --fonte-display  Acumin Pro Wide, 275/400/900. O que se lê de relance:
                      olho, manchete, número grande, lema, alvo de link.

   A Wide é a largura do lockup da agência, então manchete em Wide Black
   encosta na marca impressa. Na 700 da Pro normal, que era o que estas
   páginas usavam, o título saía mais estreito e mais leve do que o material
   que já está na rua.

   Nenhum peso é sintetizado. Na Wide não existe nada entre 400 e 900: pedir
   700 devolve a Black. Escreva 275, 400 ou 900 e não há surpresa.

   Os corpos aqui são menores do que na versão anterior porque a Wide ocupa
   cerca de um quinto a mais de largura no mesmo font-size. */
.olho {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--fonte-display);
  font-weight: 400;
  font-size: clamp(12px, 2.6vw, 14px);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
}
.olho::before {
  content: ""; width: 26px; height: 3px;
  background: var(--cor-acento);
}

/* Manchete na Wide Black. O h3 fica de fora de propósito: é título de item
   de lista, lido sentado ao lado do parágrafo, e em corpo pequeno a
   expandida cansa. */
h1, h2 {
  margin: 0;
  font-family: var(--fonte-display);
  font-weight: var(--peso-display-forte);
  text-transform: uppercase;
  letter-spacing: -.015em;
}

/* O h1 é o lockup da assinatura em três degraus, igual a QUEM FAZ
   REPRESENTA: "quem" e a preposição na Extra Light, "FAZ" na Black, e o
   assunto embaixo, em pincel amarelo, sozinho na linha.

   A caixa vem do HTML e não do CSS: cada degrau tem a sua, e é a diferença
   de caixa junto com a de peso que constrói a hierarquia. Só o pincel é
   forçado para caixa alta, porque o recorte publicado da Granesta não tem
   caixa baixa. */
h1 { text-transform: none; }
h1 .leve  { font-weight: var(--peso-display-leve); color: var(--cor-texto-suave); }
h1 .forte { font-weight: var(--peso-display-forte); }
/* O h1 diz a frase inteira: "Quem faz" na Extra Light, o assunto na Black.
   O corpo desceu de 78 para 62px porque agora são duas linhas de display,
   e nesse tamanho o assunto mais comprido ("Pelas cidades") ainda cabe em
   uma linha só, tanto no computador quanto no celular. */
h1 { font-size: clamp(30px, 6.6vw, 56px); line-height: 1; }

/* O assunto, o degrau que grita. Corpo maior que a linha de cima porque é
   ele que a pessoa lê de relance no meio do feed, e amarelo porque é a cor
   que a assinatura reserva para a palavra à mão. */
h1 .pincel {
  display: block;
  /* o til de TUBARÃO e o de EDUCAÇÃO sobem acima da altura de letra e
     chegavam a encostar na linha de cima; o respiro é dado aqui */
  margin-top: .12em;
  font-family: var(--fonte-brush);
  font-weight: 400;
  /* Medido na janela, e não em em do h1: preso ao h1 o assunto estourava a
     coluna nas telas de 320 px, onde "EDUCAÇÃO" é a palavra mais comprida
     do sistema. O teto de 108 px é o maior corpo em que ela ainda cabe na
     coluna do hero em 1280. */
  font-size: clamp(44px, 11.5vw, 108px);
  line-height: .94;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--cor-acento);
}
h2 { font-size: clamp(24px, 5.2vw, 38px); line-height: 1; }
h3 {
  margin: 0;
  font-weight: var(--peso-forte);
  text-transform: uppercase;
  font-size: clamp(17px, 3.6vw, 21px); line-height: 1.15; letter-spacing: .01em;
}

.amarelo { color: var(--cor-acento); }
.suave { color: var(--cor-texto-suave); }

/* ── Hero ─────────────────────────────────────────────────────────────────*/
.hero { overflow: hidden; padding-block: clamp(38px, 5.5vw, 54px) 0; }

/* O texto centra na altura e o retrato encosta no chão da seção. Alinhar os
   dois pelo rodapé abriria um vão morto acima do título, do tamanho da
   diferença entre a coluna curta e a foto comprida. */
.hero-grade {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(20px, 4vw, 40px);
  align-items: center;
}
.hero-grade > :first-child { padding-bottom: clamp(36px, 5vw, 56px); }
@media (max-width: 860px) {
  .hero-grade { grid-template-columns: 1fr; }
  .hero-grade > :first-child { padding-bottom: clamp(48px, 12vw, 72px); }
}

.hero h1 { margin-top: 18px; }
.hero-frase {
  margin: 22px 0 0;
  font-size: clamp(16px, 3.4vw, 19px);
  line-height: 1.55;
  max-width: 30em;
  color: var(--cor-texto-suave);
}
.hero-frase b { color: var(--cor-texto); font-weight: var(--peso-forte); }

/* o número-manchete */
.manchete { margin: clamp(26px, 5vw, 38px) 0 0; }
.manchete .cifra {
  display: block;
  font-family: var(--fonte-display);
  font-weight: var(--peso-display-forte);
  font-size: clamp(44px, 11vw, 88px);
  line-height: .88;
  letter-spacing: -.03em;
  color: var(--cor-acento);
}
.manchete .cifra small { font-size: .4em; letter-spacing: .02em; }

/* O sinal de mais é o único que fica na Extra Light: um traço fino antes da
   massa do número. Vale para o hero, para o placar e para o card de obra. */
.cifra .mais,
.placar b .mais,
.obra .valor .mais {
  display: inline;
  font-weight: var(--peso-display-leve);
}
.manchete .legenda {
  display: block; margin-top: 10px;
  font-size: clamp(13px, 2.9vw, 15px);
  letter-spacing: .14em; text-transform: uppercase;
  font-weight: var(--peso-forte);
  color: var(--cor-texto);
}

.hero-retrato { position: relative; align-self: end; }

/* O recorte tem cerca de 20% de largura vazia à esquerda na faixa da cabeça:
   medindo o canal alfa do arquivo, o conteúdo só começa em x=150 de 677 nos
   40% de cima, e só o cotovelo chega a x=0, no meio da altura. Centrar a
   imagem na coluna, como estava, somava essa sobra aos 26 px da centragem e
   abria 228 px de azul entre o fim do parágrafo e o rosto.

   Então a imagem encosta à esquerda da coluna e ainda é puxada por cima do
   vão. Quem manda no valor é o cotovelo, não a borda do arquivo: passar
   disso e ele começa a esbarrar no parágrafo. */
.hero-retrato img {
  width: min(480px, 126%);
  margin-inline: 0 auto;
  margin-bottom: -2px;
  transform: translateX(-20%);
  filter: drop-shadow(-14px 10px 44px rgba(6, 26, 58, .55));
}
@media (max-width: 860px) {
  .hero-retrato { display: none; }
}

/* ── Botões ───────────────────────────────────────────────────────────────
   O par canônico é amarelo #FFC400 com texto #061A3A, 10,8:1. Não invente
   outro CTA primário. */
.botoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(26px, 5vw, 34px); }
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 24px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-weight: var(--peso-forte);
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-acento { background: var(--cor-acento); color: var(--cor-sobre-acento); }
.btn-acento:hover { background: var(--cor-acento-hover); }
.btn-vazado { border-color: var(--cor-borda); color: var(--cor-texto); }
.btn-vazado:hover { border-color: var(--cor-acento); color: var(--cor-acento); }
/* No celular dois botões de larguras diferentes ficam tortos. Empilhados e
   cheios, viram alvo grande de polegar, que é o que a página precisa. */
@media (max-width: 520px) {
  .botoes { flex-direction: column; align-items: stretch; }
  .btn { justify-content: center; }
}

/* ── Seções ───────────────────────────────────────────────────────────────*/
section { padding-block: clamp(52px, 9vw, 88px); }
.sec-cabeca { margin-bottom: clamp(28px, 5vw, 44px); }
.sec-cabeca h2 { margin-top: 14px; }
.sec-cabeca p {
  margin: 16px 0 0; max-width: 46em;
  color: var(--cor-texto-suave);
  font-size: clamp(15px, 3.2vw, 17px);
}

.faixa-clara { background: var(--cor-fundo-elevado); }

/* ── Placar de números ────────────────────────────────────────────────────*/
.placar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(146px, 1fr));
  gap: 1px;
  background: var(--cor-borda);
  border: 1px solid var(--cor-borda);
  border-radius: 16px;
  overflow: hidden;
}
.placar div { background: var(--cor-fundo-campo); padding: clamp(22px, 4vw, 30px); }
@media (max-width: 520px) { .placar div { padding: 18px 16px; } }

/* O número precisa caber na célula, e a largura da célula muda sozinha: a
   grade é auto-fit, então ela troca de número de colunas conforme a tela.
   Amarrar o corpo à viewport erra feio no meio do caminho: por volta de 900 px
   a grade já está em quatro colunas estreitas e o corpo ainda está em 40 px, e
   "+R$ 105 MI" quebra com a unidade sozinha na linha de baixo, parecendo
   rótulo.

   Aqui o corpo é medido em cqi, isto é, em porcentagem da própria célula, e
   não da janela. 18cqi é o limite em que o valor mais comprido do sistema
   ainda cabe em uma linha. Onde não houver container query, vale o clamp()
   da regra acima, que acerta nas telas grandes e erra só nessa faixa. */
.placar div { container-type: inline-size; }
@supports (container-type: inline-size) {
  .placar b { font-size: min(40px, max(21px, 18cqi)); white-space: nowrap; }
}
.placar b {
  display: block;
  font-family: var(--fonte-display);
  font-weight: var(--peso-display-forte);
  font-size: clamp(28px, 6vw, 40px);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--cor-acento);
}
.placar b small { font-size: .46em; letter-spacing: .02em; }
/* Filho direto da célula, e só ele: o rótulo. Escrito como ".placar span"
   esta regra também pegava os spans que vivem dentro do <b> (o sinal de mais
   e o da contagem) e empilhava "+", "R$", "20" e "MI" em quatro linhas. */
.placar div > span {
  display: block; margin-top: 10px;
  font-size: 13.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cor-texto-suave);
}

/* ── Cards de obra ────────────────────────────────────────────────────────*/
.obras { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.obra {
  position: relative;
  padding: clamp(24px, 4vw, 30px);
  background: var(--cor-fundo-campo);
  border: 1px solid var(--cor-borda);
  border-radius: 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.obra .valor {
  font-family: var(--fonte-display);
  font-weight: var(--peso-display-forte);
  font-size: clamp(23px, 4.4vw, 30px);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--cor-acento);
}
.obra .valor small { font-size: .48em; letter-spacing: .02em; }
.obra p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--cor-texto-suave); }
.obra.destaque { border-color: var(--cor-acento); background: rgba(255, 196, 0, .06); }
/* Nota de procedência do valor: de onde saiu, em que status está, se é soma de
   mais de uma emenda. É rodapé do card, não link — por isso sem sublinhado. */
.obra-fonte {
  margin: 2px 0 0; padding-top: 12px;
  border-top: 1px solid var(--cor-borda);
  font-size: 12.5px; line-height: 1.45; color: var(--cor-texto-suave);
}
.obra .selo {
  align-self: flex-start;
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: var(--peso-forte);
  color: var(--cor-sobre-acento);
  background: var(--cor-acento);
  padding: 5px 11px; border-radius: 999px;
}

/* ── Chips (a lista de ruas) ──────────────────────────────────────────────*/
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.chips li {
  list-style: none;
  padding: 9px 15px;
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
  font-size: 14.5px;
  color: var(--cor-texto);
  background: var(--cor-fundo-campo);
}
.chips-nota {
  margin: 22px 0 0;
  font-size: 14.5px;
  color: var(--cor-texto-suave);
}
/* quando o chip carrega valor, o valor é que precisa saltar */
.chips li b { color: var(--cor-acento); font-weight: var(--peso-forte); margin-left: 6px; }
@media (max-width: 640px) {
  .chips { gap: 6px; }
  .chips li { font-size: 12.5px; padding: 7px 11px; }
}

/* ── Lista de pautas ──────────────────────────────────────────────────────*/
.pautas { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--cor-borda); }
.pautas li {
  padding: clamp(18px, 3.4vw, 24px) 0;
  border-bottom: 1px solid var(--cor-borda);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: clamp(8px, 3vw, 32px);
  align-items: baseline;
}
@media (max-width: 720px) { .pautas li { grid-template-columns: 1fr; gap: 8px; } }
.pautas h3 { color: var(--cor-texto); }
.pautas p { margin: 0; color: var(--cor-texto-suave); font-size: 15.5px; line-height: 1.55; }

/* ── Projetos de lei ──────────────────────────────────────────────────────
   Vieram da seção #leis da home. Aqui ganham o número da lei, que é o que
   realmente prova a coisa: "LEI Nº 19.011/2024" vale mais que "aprovado". */
.leis { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 16px; }
.lei {
  background: var(--cor-fundo-campo);
  border: 1px solid var(--cor-borda);
  border-radius: 16px;
  padding: clamp(22px, 4vw, 26px);
  display: flex; flex-direction: column; gap: 12px;
}
.lei-t {
  font-size: 17px; font-weight: var(--peso-forte);
  text-transform: uppercase; line-height: 1.18; margin: 0;
  color: var(--cor-texto);
}
.lei-d { margin: 0; flex: 1; font-size: 14.5px; line-height: 1.55; color: var(--cor-texto-suave); }
.lei-fonte {
  font-size: 12.5px; color: var(--cor-texto-suave);
  text-decoration: underline; text-underline-offset: 3px;
}
.lei-fonte:hover { color: var(--cor-acento); }

/* O selo sempre diz por escrito o que aconteceu. Cor sozinha não comunica
   estado, e o verde reprova contraste como texto (IDENTIDADE.md, regra 3):
   por isso ele é fundo, com a tinta escura por cima. */
.selo {
  align-self: flex-start;
  font-size: 11px; font-weight: var(--peso-forte);
  letter-spacing: .14em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px; border: 1px solid transparent;
}
.selo-lei { background: var(--cor-positivo); color: var(--pp-tinta); }
.selo-comissao { border-color: rgba(255, 255, 255, .34); color: var(--cor-texto-suave); }
.selo-encerrado { border-color: rgba(255, 255, 255, .2); color: var(--cor-texto-suave); opacity: .8; }

.leis-grupo {
  display: flex; align-items: center; gap: 12px;
  margin: clamp(30px, 5vw, 44px) 0 18px;
  font-size: 12px; font-weight: var(--peso-forte);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--cor-texto-suave);
}
.leis-grupo::after { content: ""; flex: 1; height: 1px; background: var(--cor-borda); }

/* ── Na imprensa ──────────────────────────────────────────────────────────
   Bloco deliberadamente distinto do card de obra: o que a imprensa publicou
   não é a mesma categoria de prova que a linha de uma emenda. */
.imprensa { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.materia {
  display: block;
  padding: clamp(18px, 3.4vw, 22px);
  background: var(--cor-fundo-campo);
  border: 1px solid var(--cor-borda);
  border-left: 3px solid var(--cor-acento);
  border-radius: 12px;
}
.materia:hover { border-color: var(--cor-acento); }
.materia-topo {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cor-texto-suave);
}
.materia-veiculo { color: var(--cor-acento); font-weight: var(--peso-forte); }
.materia h3 {
  margin: 8px 0 0; font-size: 16.5px; line-height: 1.3;
  font-weight: var(--peso-forte); color: var(--cor-texto);
}
.materia p { margin: 7px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--cor-texto-suave); }
.materia-ler {
  display: inline-block; margin-top: 12px;
  font-size: 13px; font-weight: var(--peso-forte);
  letter-spacing: .06em; text-transform: uppercase; color: var(--cor-acento);
}

/* ── Nas redes ────────────────────────────────────────────────────────────
   Carrossel de texto. Sem embed e sem thumbnail: o site não pode depender de
   script de terceiro nem quebrar quando um post sai do ar. O engajamento real
   é que faz o trabalho de prova social. */
.redes {
  margin: 0; padding: 4px 0 12px; list-style: none;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(258px, 300px);
  gap: 14px;
  overflow-x: auto; overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.redes > li { scroll-snap-align: start; }
.post {
  height: 100%;
  display: flex; flex-direction: column; gap: 10px;
  padding: clamp(18px, 3.4vw, 22px);
  background: var(--cor-fundo-campo);
  border: 1px solid var(--cor-borda);
  border-radius: 14px;
}
.post:hover { border-color: var(--cor-acento); }
.post-topo {
  display: flex; gap: 8px; align-items: baseline;
  font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--cor-texto-suave);
}
.post-rede { color: var(--cor-acento); font-weight: var(--peso-forte); }
.post p { margin: 0; flex: 1; font-size: 14.5px; line-height: 1.5; color: var(--cor-texto); }
.post-numeros {
  display: flex; gap: 14px;
  font-size: 13px; font-weight: var(--peso-forte); color: var(--cor-texto-suave);
}
.post-ver {
  font-size: 12.5px; font-weight: var(--peso-forte);
  letter-spacing: .06em; text-transform: uppercase; color: var(--cor-acento);
}
.redes-nota { margin: 14px 0 0; font-size: 13.5px; color: var(--cor-texto-suave); }

/* ── Fecho ────────────────────────────────────────────────────────────────*/
.fecho { text-align: center; }
.fecho .marca-vote { width: min(230px, 62vw); margin: 0 auto clamp(26px, 5vw, 34px); }
/* ── A assinatura QUEM FAZ REPRESENTA ────────────────────────────────────
   Quando a frase aparece inteira, ela vem empilhada na sequência da arte da
   Federação: QUEM em cima, menor; FAZ no meio, dominante, na Black; e
   REPRESENTA embaixo, em pincel. Não é uma linha só com uma palavra
   trocada de fonte: é o lockup, e o lockup tem ordem e tem degrau.

   Os outros lemas, que não são a assinatura, seguem em linha corrida com a
   palavra final em pincel. */
.fecho .assinatura {
  display: grid;
  justify-items: center;
  gap: 0;
  margin: 0 auto;
  max-width: none;
  line-height: .88;
}
.fecho .assinatura .q {
  font-family: var(--fonte-display);
  font-weight: var(--peso-display-leve);
  font-size: clamp(21px, 4.4vw, 34px);
  letter-spacing: .04em;
  color: var(--cor-texto-suave);
}
.fecho .assinatura .f {
  font-family: var(--fonte-display);
  font-weight: var(--peso-display-forte);
  font-size: clamp(38px, 8vw, 62px);
  letter-spacing: -.02em;
}
.fecho .assinatura .pincel {
  display: block;
  /* na arte REPRESENTA é a palavra mais larga do lockup, e vem colada no FAZ */
  margin-top: -.04em;
  font-size: clamp(44px, 9.6vw, 78px);
  padding-inline: 0;
}

.fecho .lema {
  font-family: var(--fonte-display);
  font-size: clamp(21px, 4.6vw, 32px);
  font-weight: var(--peso-display-forte);
  text-transform: uppercase;
  line-height: 1.04;
  letter-spacing: -.02em;
  margin: 0 auto;
  max-width: 14em;
}

/* A palavra de ênfase do lema, em pincel, e em LINHA PRÓPRIA.

   O `display: block` é a regra, não o layout: duas fontes na mesma linha
   fazem a frase parecer remendo. Quando a frase quebra, a linha de baixo é
   inteira do pincel — é o que a assinatura QUEM FAZ REPRESENTA faz, com
   "QUEM FAZ" em letra de forma numa linha e "REPRESENTA" à mão na outra.

   text-transform é obrigatório: o recorte publicado da Granesta só tem caixa
   alta, então sem isto a palavra pediria glifo que não veio e sumiria.

   O corpo sobe 12% porque o pincel tem altura de letra menor que a Wide no
   mesmo font-size, e line-height volta a 1 porque a fonte declara uma caixa
   vertical alta (para caber o til) que senão abriria a linha do lema. */
.fecho .lema .pincel {
  display: block;
  margin-top: .06em;
  font-family: var(--fonte-brush);
  font-weight: 400;
  font-size: 1.12em;
  line-height: 1;
  letter-spacing: 0;
  color: var(--cor-acento);
  /* O pincel tem sobra lateral negativa dos dois lados: a primeira letra
     avança para trás e come o espaço da palavra anterior, e a última é
     inclinada e encosta no que vier depois. O respiro é dado aqui. */
  padding-inline: .16em .14em;
}

.fecho .botoes { justify-content: center; }

/* ── As outras portas ─────────────────────────────────────────────────────
   `.porta-vazia` é a página que ainda não foi publicada: aparece apagada e
   sem href, para a peça nunca entregar um link morto ao eleitor. Ao publicar,
   troque o <span class="porta-vazia"> por <a href="../slug/">. */
.portas { display: grid; grid-template-columns: repeat(auto-fit, minmax(154px, 1fr)); gap: 12px; }
.portas a, .portas .porta-vazia {
  display: block;
  padding: 20px 22px;
  border: 1px solid var(--cor-borda);
  border-radius: 14px;
  transition: border-color .18s ease, background .18s ease;
}
.portas a:hover { border-color: var(--cor-acento); background: var(--cor-fundo-campo); }
.portas .porta-vazia { opacity: .5; }
.portas .porta-vazia .alvo::after {
  content: "em breve";
  display: block; margin-top: 6px;
  font-size: 11.5px; letter-spacing: .18em;
  font-weight: 400;
  color: var(--cor-texto-suave);
}
.portas .rot {
  display: block;
  font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--cor-texto-suave);
}
.portas .alvo {
  display: block; margin-top: 6px;
  font-family: var(--fonte-display);
  font-weight: var(--peso-display-forte);
  font-size: 16.5px; text-transform: uppercase; letter-spacing: -.01em;
}

/* ── Rodapé ───────────────────────────────────────────────────────────────*/
footer {
  padding-block: clamp(34px, 6vw, 48px);
  border-top: 1px solid var(--cor-borda);
  font-size: 13.5px;
  color: var(--cor-texto-suave);
}
footer .wrap { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between; }
footer img { width: 128px; }
footer a { text-decoration: underline; text-underline-offset: 3px; }

/* ══ ANIMAÇÃO ═════════════════════════════════════════════════════════════
   Quatro movimentos, e só quatro, porque a página é lida com o polegar em
   movimento: a entrada do hero, a revelação por seção, a cascata dentro das
   grades e a contagem dos números.

   Tudo depende da classe .js, que entra por script inline no topo do
   documento. Sem essa trava, um erro de JavaScript deixaria a página inteira
   invisível, e o único trabalho dela é ser lida.

   O tempo é sempre curto. Nada acima de .8s: quem abre um link de WhatsApp
   não veio assistir a uma animação, veio ver a conta. */

/* forwards é obrigatório: sem ele o elemento roda a animação e volta para o
   opacity: 0 do estado inicial, ou seja, some depois de aparecer. */
.js .entra, .js .hero-retrato {
  animation-duration: .7s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.22, .68, .35, 1);
}

@keyframes sobe   { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes entra-lado { from { opacity: 0; transform: translate(28px, 16px); } to { opacity: 1; transform: none; } }

/* ── 1. Entrada do hero ───────────────────────────────────────────────────
   Não espera scroll: acontece no carregamento, escalonada pela variável
   --atraso que o JS escreve em cada elemento. */
.js .entra { opacity: 0; animation-name: sobe; animation-delay: var(--atraso, 0s); }
.js .hero-retrato { opacity: 0; animation-name: entra-lado; animation-delay: .12s; animation-duration: .9s; }
@media (max-width: 860px) { .js .hero-retrato { animation: none; } }

/* ── 2. Revelação por seção ───────────────────────────────────────────────*/
.js .rv { opacity: 0; transform: translateY(20px); transition: opacity .6s cubic-bezier(.22, .68, .35, 1), transform .6s cubic-bezier(.22, .68, .35, 1); }
.js .rv.dentro { opacity: 1; transform: none; }

/* a régua amarela do olho se desenha da esquerda para a direita */
.js .rv .olho::before { transform: scaleX(0); transform-origin: left center; transition: transform .5s cubic-bezier(.22, .68, .35, 1) .18s; }
.js .rv.dentro .olho::before { transform: scaleX(1); }

/* ── 3. Cascata dentro das grades ─────────────────────────────────────────
   Card a card, com 60 ms entre eles. É o que transforma "apareceu tudo de
   uma vez" em "a conta vai sendo apresentada". */
.js .cascata > * { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s cubic-bezier(.22, .68, .35, 1); transition-delay: var(--atraso, 0s); }
.js .cascata.dentro > * { opacity: 1; transform: none; }

/* ── 4. Contagem dos números ──────────────────────────────────────────────
   Enquanto conta, o número roda em algarismo de largura fixa. Sem isto o
   bloco inteiro treme, porque o 1 é mais estreito que o 8 na Acumin. */
.contando { display: inline; font-variant-numeric: tabular-nums; }

/* ── Estados de toque e mouse ─────────────────────────────────────────────*/
.obra, .placar div { transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.obra:hover { transform: translateY(-3px); border-color: var(--cor-acento); }
.lei, .materia, .post { transition: transform .2s ease, border-color .2s ease; }
.lei:hover, .materia:hover, .post:hover { transform: translateY(-3px); }
.chips li { transition: transform .16s ease, border-color .16s ease; }
.chips li:hover { transform: translateY(-2px); border-color: var(--cor-acento); }
.portas a { transition: transform .2s ease, border-color .18s ease, background .18s ease; }
.portas a:hover { transform: translateY(-3px); }

/* ── Quem pediu para não se mexer ─────────────────────────────────────────
   Uma regra só, no fim, desligando tudo. A página continua inteira: só para
   de se mover. */
@media (prefers-reduced-motion: reduce) {
  .js .rv, .js .entra, .js .cascata > *, .js .hero-retrato {
    opacity: 1; transform: none; transition: none; animation: none;
  }
  .js .rv .olho::before { transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .btn:hover, .obra:hover, .chips li:hover, .portas a:hover,
  .lei:hover, .materia:hover, .post:hover { transform: none; }
  .redes { scroll-snap-type: none; }
}