/* ============================================================================
   Dr. Marquinho Barreto · 13433 · PT — folha de estilo do site
   ----------------------------------------------------------------------------
   Sem framework, sem CDN, sem build: um arquivo CSS que funciona em qualquer
   hospedagem compartilhada e abre com duplo clique antes de subir.

   PALETA (CLAUDE.md §3.6): vermelho institucional do PT como cor dominante,
   branco, e o amarelo da bandeira da Equipe Luz como destaque — herança real
   do candidato, que nenhum adversário tem.
   ========================================================================== */

:root {
  --vermelho: #c4122e;
  --vermelho-escuro: #8e0d21;
  --vermelho-claro: #fdf0f2;
  --amarelo: #f2c230;
  --amarelo-escuro: #8a6a10;
  --branco: #ffffff;
  --tinta: #1a1614;
  --tinta-suave: #4a423d;
  --cinza: #6e6560;
  --cinza-linha: #e4dedb;
  --fundo-suave: #faf8f7;

  /* Cores que viviam soltas em hex, repetidas em dois arquivos e em style
     inline. O verde de sucesso estava escrito duas vezes (aqui e no apoio.css);
     o #f3c0c9 três vezes; o #3a2c05 quatro. Nomear é o que impede a quinta. */
  --ok-fundo: #eaf6ef;      /* verde de confirmação */
  --ok-borda: #bfe3cc;
  --ok-texto: #1e5c39;
  --rosa-borda: #f3c0c9;    /* borda dos avisos claros */
  --vinho-texto: #5c2a30;   /* texto dentro de aviso claro */
  --sepia: #2a1410;         /* fundo da faixa da frase histórica */
  --amarelo-claro: #ffe9a8; /* o chapéu sobre vermelho — ver .chapeu-claro */
  --ocre-texto: #3a2c05;    /* texto sobre o amarelo */
  --ocre-suave: #4a3808;

  --largura: 1120px;

  /* TRÊS raios, não onze. O site tinha 4, 5, 6, 8, 9, 10, 12, 14, 16 e 18px
     espalhados, todos escolhidos no olho e nenhum derivado do outro. */
  --raio-mini: 6px;   /* selo, pílula do número, anel de foco */
  --raio-p: 10px;     /* aviso, item de menu, campo de formulário */
  --raio: 14px;       /* todo card */
  --raio-g: 20px;     /* peças grandes: urna, pílula do cargo no celular */

  /* Escala de espaço. Antes: 68, 56, 48, 44, 40, 34, 30, 26, 22, 18, 14…
     cada um digitado onde fez falta. */
  --e1: 8px; --e2: 14px; --e3: 22px; --e4: 34px; --e5: 56px; --e6: 88px;

  /* Movimento. O site inteiro tinha UMA transição de .12s, no botão.
     Nada mais no site respondia ao dedo. */
  --rapido: .16s;
  --medio: .28s;
  --curva: cubic-bezier(.2, .7, .3, 1);

  --sombra: 0 2px 4px rgba(26, 22, 20, .06), 0 12px 32px rgba(26, 22, 20, .08);
  --sombra-forte: 0 4px 12px rgba(26, 22, 20, .12), 0 24px 48px rgba(26, 22, 20, .14);

  /* Declarado de propósito. Sem isto, navegador com modo escuro agressivo
     (e o navegador de dentro do WhatsApp é um deles) inverte as cores por
     conta própria — e o vermelho institucional da campanha vira outra coisa.
     O site não tem tema escuro: tem uma identidade, e ela é clara. */
  color-scheme: light;
}

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

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

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--tinta);
  background: var(--branco);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--vermelho); }
/* Anel de foco DUPLO, e não só amarelo.
   O amarelo sozinho rende 1,68:1 sobre branco — praticamente invisível no corpo
   claro do site, que é onde está a maioria dos links. Quem navega por teclado
   ficava sem saber onde estava. O anel escuro garante o contraste sobre claro;
   o halo amarelo garante sobre o vermelho e sobre o rodapé escuro. */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--tinta);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--amarelo);
  border-radius: var(--raio-mini);
}

/* ⚠️ Âncora não pode parar debaixo do cabeçalho fixo.
   Sem isto, clicar em "Minha História" rola a seção para trás do topo grudado
   e o título some. Vale para toda navegação interna e para o link de pular. */
[id] { scroll-margin-top: 84px; }

.wrap { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 20px; }

/* pular para o conteúdo — para quem navega por teclado ou leitor de tela */
.pular {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--tinta); color: #fff; padding: 12px 20px; border-radius: 0 0 8px 0;
}
.pular:focus { left: 0; }

/* ---------- Tipografia ---------- */
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; font-weight: 800; letter-spacing: -.02em; }
h1 { font-size: clamp(2.1rem, 7vw, 3.9rem); }
h2 { font-size: clamp(1.6rem, 4.4vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 2.6vw, 1.4rem); }
p { margin: 0 0 1.1em; }
.chapeu {
  font-size: .82rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--vermelho); margin: 0 0 .7em;
}
/* O mesmo chapéu sobre fundo vermelho ou escuro.
   ⚠️ NÃO usar var(--amarelo) aqui: #f2c230 sobre o vermelho da campanha dá
   ≈3,6:1, e este texto tem 0.82rem — reprova o mínimo AA de 4,5:1. O #ffe9a8
   é o mesmo amarelo clareado, em ≈5:1. Antes isto era um style inline repetido
   em quatro lugares, cada um com um valor diferente. */
.chapeu-claro { color: var(--amarelo-claro); }
.lead { font-size: clamp(1.05rem, 2.4vw, 1.25rem); color: var(--tinta-suave); }

/* ---------- Cabeçalho ---------- */
.topo {
  position: sticky; top: 0; z-index: 50;
  background: var(--branco); border-bottom: 1px solid var(--cinza-linha);
}
.topo .wrap { display: flex; align-items: center; gap: 16px; min-height: 62px; }
/* ⚠️ `center`, não `baseline`.
   Com baseline o navegador encosta a BORDA DE BAIXO do SVG na linha de base da
   letra — e como um SVG não tem linha de base de texto, a estrela subia acima
   do nome. Só aparece quando há imagem e texto na mesma linha. */
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tinta); font-weight: 800; }
.marca .nome { font-size: .98rem; letter-spacing: -.01em; white-space: nowrap; }
.marca .num {
  background: var(--vermelho); color: #fff; font-size: .95rem;
  padding: 2px 9px; border-radius: var(--raio-mini); letter-spacing: .02em;
}
.menu { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; }
.menu a {
  text-decoration: none; color: var(--tinta-suave); font-weight: 600; font-size: .88rem;
  padding: 7px 9px; border-radius: var(--raio-p); white-space: nowrap;
  transition: background var(--rapido) var(--curva), color var(--rapido) var(--curva);
}
.menu a:hover { background: var(--vermelho-claro); color: var(--vermelho); }
.menu a[aria-current="page"] { color: var(--vermelho); background: var(--vermelho-claro); }
/* ⚠️ A HISTÓRIA DO MENU NO CELULAR, em três atos — leia antes de mexer.
   1º) Cabeçalho grudado + `overflow-x: auto`. Não funcionava: o Android não
       desenha barra de rolagem, então em 360px apareciam três itens e os
       outros cinco simplesmente sumiam, sem pista nenhuma de que existiam.
   2º) Menu quebrando em linhas + cabeçalho SOLTO. Mostrava os oito, mas oito
       itens em duas ou três linhas comiam ~150px dos ~640px de tela — o lugar
       mais valioso da página. Por isso o cabeçalho teve de deixar de ser
       grudado: grudado, esse bloco ficaria na frente o tempo todo.
   3º) (agora) Menu-sanduíche. Recolhido, o cabeçalho ocupa uma linha, então
       ele volta a ser grudado — ver o bloco `.abre-menu` mais abaixo, que é
       quem manda no celular hoje. O rodapé continua repetindo a navegação
       inteira, e sem JavaScript o menu simplesmente não recolhe: volta a ser
       o ato 2, que funcionava. */
@media (max-width: 800px) {
  .menu { margin-left: 0; width: 100%; flex-wrap: wrap; gap: 2px 4px; }
  .menu a { white-space: nowrap; }
}

/* ---------- Herói ---------- */
.heroi { background: var(--vermelho); color: #fff; overflow: hidden; }
.heroi .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; padding-top: 56px; padding-bottom: 56px; }
.heroi h1 { color: #fff; margin-bottom: .3em; }
.heroi h1 em { font-style: normal; color: var(--amarelo); display: block; }
.heroi .sub { font-size: clamp(1.05rem, 2.6vw, 1.3rem); color: rgba(255,255,255,.94); margin-bottom: 1.6em; max-width: 34ch; }
.heroi-foto { position: relative; }
.heroi-foto img { border-radius: var(--raio); box-shadow: var(--sombra-forte); width: 100%; }
.cargo-num {
  display: inline-flex; align-items: center; gap: 14px;
  background: rgba(0,0,0,.16); border: 1px solid rgba(255,255,255,.3);
  padding: 12px 20px; border-radius: 999px; margin-bottom: 1.5em;
}
.cargo-num .cargo { font-size: .84rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.cargo-num .digitos { font-size: 1.8rem; font-weight: 900; letter-spacing: .01em; color: var(--amarelo); line-height: 1; }
@media (max-width: 860px) {
  .heroi .wrap { grid-template-columns: 1fr; gap: 28px; padding-top: 36px; padding-bottom: 40px; }
  .heroi-foto { order: -1; max-width: 340px; margin: 0 auto; }
}
/* "CANDIDATO A DEPUTADO ESTADUAL" em caixa-alta com espacejamento de .12em, mais
   o número a 1.8rem, não cabe nos ~320px úteis de um celular pequeno: a pílula
   quebrava em três linhas. Aqui ela vira duas linhas de propósito, alinhadas. */
@media (max-width: 420px) {
  .cargo-num { flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 18px; border-radius: var(--raio-g); }
  .cargo-num .cargo { font-size: .74rem; letter-spacing: .08em; }
  .cargo-num .digitos { font-size: 2.1rem; }
}

/* ---------- Botões ---------- */
.botoes { display: flex; flex-wrap: wrap; gap: 12px; }
/* ⚠️ `background: transparent`, `font-family` e `cursor` NÃO são excesso.
   Esta classe é usada em <a> e em <button>, e as duas tags chegam com
   padrões de navegador completamente diferentes. Faltando estas três
   declarações, todo <button class="btn"> herdava:
     · o fundo cinza #f0f0f0 do navegador — que ninguém tinha declarado e que
       deixou "Trocar foto" (texto branco, variante contorno) ILEGÍVEL sobre
       o palco escuro;
     · a fonte de sistema do <button>, e não a do site — dois botões lado a
       lado com tipografia diferente, um <a> e um <button>;
     · a setinha de texto no lugar da mãozinha.
   Em <a> nada disso aparecia, porque link não tem estilo de botão. Por isso
   o defeito sobreviveu tanto tempo: só aparecia em metade dos botões. */
.btn {
  display: inline-block; text-decoration: none;
  font-family: inherit; font-weight: 800; font-size: 1rem; line-height: 1.25;
  padding: 14px 26px; border-radius: 999px; border: 2px solid transparent;
  background: transparent; cursor: pointer;
  transition: transform var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva),
              background var(--rapido) var(--curva), border-color var(--rapido) var(--curva);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--sombra); }
/* resposta no dedo: no celular não existe hover, e sem :active o botão
   simplesmente não reage ao toque — a pessoa não sabe se pegou */
.btn:active { transform: translateY(0) scale(.97); }
.btn-amarelo { background: var(--amarelo); color: var(--ocre-texto); }
.btn-branco { background: #fff; color: var(--vermelho); }
.btn-contorno { border-color: rgba(255,255,255,.6); color: #fff; }
.btn-contorno:hover { border-color: #fff; background: rgba(255,255,255,.12); }
.btn-vermelho { background: var(--vermelho); color: #fff; }
/* estava escrito em style inline cinco vezes, em quatro arquivos */
.btn-neutro { border-color: var(--cinza-linha); color: var(--tinta); background: #fff; }
.btn-neutro:hover { border-color: var(--vermelho); color: var(--vermelho); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }

/* ---------- Seções ---------- */
section { padding: 68px 0; }
section.suave { background: var(--fundo-suave); }
.cabeca-secao { max-width: 62ch; margin-bottom: 40px; }

/* ---------- Números ---------- */
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 18px; }
.numero {
  background: #fff; border: 1px solid var(--cinza-linha); border-radius: var(--raio);
  padding: 26px 20px; text-align: center; box-shadow: var(--sombra);
  transition: transform var(--medio) var(--curva), box-shadow var(--medio) var(--curva);
}
.numero:hover { transform: translateY(-3px); box-shadow: var(--sombra-forte); }
/* O número conta sozinho ao entrar na tela (site.js). Enquanto conta, os
   dígitos trocam de largura e a caixa dança — `tabular-nums` trava a largura
   de cada algarismo e a contagem fica parada no lugar. */
.numero .n { font-variant-numeric: tabular-nums; }
.numero .n { font-size: clamp(1.9rem, 5vw, 2.6rem); font-weight: 900; color: var(--vermelho); line-height: 1; letter-spacing: -.03em; }
.numero .rot { font-size: .92rem; color: var(--cinza); margin-top: 10px; line-height: 1.4; }

/* ---------- Linha do tempo ---------- */
.linha { position: relative; padding-left: 34px; }
.linha::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 3px; background: linear-gradient(180deg, var(--vermelho), var(--amarelo)); border-radius: 2px; }
.marco { position: relative; padding-bottom: 34px; }
.marco::before {
  content: ""; position: absolute; left: -30px; top: 7px; width: 15px; height: 15px;
  border-radius: 50%; background: #fff; border: 3px solid var(--vermelho);
}
.marco .ano { font-weight: 900; color: var(--vermelho); font-size: 1.05rem; letter-spacing: .01em; }
.marco h3 { margin: 2px 0 6px; }
.marco p { color: var(--tinta-suave); margin: 0; }

/* ---------- Cards (bandeiras) ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 22px; }
.card {
  background: #fff; border: 1px solid var(--cinza-linha); border-radius: var(--raio);
  padding: 30px 26px; box-shadow: var(--sombra); border-top: 5px solid var(--vermelho);
  transition: transform var(--medio) var(--curva), box-shadow var(--medio) var(--curva);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sombra-forte); }
.card h3 { color: var(--vermelho-escuro); }
.card p { color: var(--tinta-suave); margin-bottom: .8em; }
.card .feito { font-size: .93rem; color: var(--cinza); border-top: 1px dashed var(--cinza-linha); padding-top: 14px; margin: 0; }
.card .feito strong { color: var(--tinta); }

/* ---------- Leis ---------- */
.leis { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.lei {
  display: flex; gap: 16px; background: #fff; border: 1px solid var(--cinza-linha);
  border-radius: var(--raio); padding: 18px 20px;
  transition: border-color var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva);
}
.lei:hover { border-color: var(--vermelho); box-shadow: var(--sombra); }
.lei .cod { font-weight: 900; color: var(--vermelho); font-size: 1.02rem; white-space: nowrap; }
.lei .txt { font-size: .96rem; color: var(--tinta-suave); line-height: 1.5; }
.lei .txt .ano { display: block; font-size: .82rem; color: var(--cinza); margin-top: 3px; }

/* ---------- Faixa de destaque ---------- */
.faixa { background: var(--tinta); color: #fff; }
.faixa .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.faixa h2 { color: #fff; }
.faixa p { color: rgba(255,255,255,.86); }
.faixa img { border-radius: var(--raio); }
@media (max-width: 860px) { .faixa .wrap { grid-template-columns: 1fr; } }

/* ---------- Caixa do CVV ---------- */
.ajuda {
  background: var(--amarelo); border-radius: var(--raio); padding: 34px 30px;
  border-left: 8px solid var(--amarelo-escuro);
}
.ajuda h2 { color: var(--ocre-texto); margin-bottom: .4em; }
.ajuda p { color: var(--ocre-suave); margin-bottom: .8em; }
.ajuda .telefone { font-size: clamp(2rem, 6vw, 2.8rem); font-weight: 900; color: var(--ocre-texto); line-height: 1.1; letter-spacing: -.02em; }
.ajuda .telefone span { font-size: 1rem; font-weight: 700; display: block; letter-spacing: .04em; }

/* ---------- Como votar ---------- */
.votar { background: var(--vermelho); color: #fff; text-align: center; }
.votar h2 { color: #fff; }
.votar .urna {
  display: inline-block; background: #fff; color: var(--vermelho);
  font-size: clamp(3.2rem, 15vw, 6rem); font-weight: 900; letter-spacing: .04em;
  padding: 16px 40px; border-radius: var(--raio-g); line-height: 1; margin: 14px 0 22px;
  box-shadow: var(--sombra-forte);
}
.votar p { color: rgba(255,255,255,.92); max-width: 46ch; margin-left: auto; margin-right: auto; }

/* ---------- Aviso (Equipe Luz) ---------- */
.aviso {
  background: var(--vermelho-claro); border: 1px solid var(--rosa-borda); border-left: 5px solid var(--vermelho);
  border-radius: var(--raio-p); padding: 18px 22px; font-size: .95rem; color: var(--vinho-texto);
}
.aviso strong { color: var(--vermelho-escuro); }
/* O MESMO aviso sobre fundo escuro (faixa da Equipe Luz, materiais).
   Antes ele era repintado inteiro por style inline, em dois lugares e com
   valores diferentes em cada um — o mesmo componente com três aparências
   decididas no HTML. */
.aviso-escuro {
  background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16);
  border-left-color: var(--amarelo); color: rgba(255,255,255,.88);
}
.aviso-escuro strong { color: var(--amarelo-claro); }
.aviso-escuro a { color: var(--amarelo); }
/* variante branca: quando o "aviso" não avisa nada, é um texto para copiar
   (o recado pronto de WhatsApp na página de materiais) */
.aviso-claro { background: #fff; border-color: var(--cinza-linha); color: var(--tinta); }

/* ---------- Contato ---------- */
.contato-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.contato-lista li { display: flex; gap: 14px; align-items: baseline; }
.contato-lista .rot { font-weight: 800; min-width: 92px; color: var(--tinta); }
/* O e-mail tem 26 caracteres sem nenhum espaço. Numa tela de 360px sobram ~214px
   ao lado do rótulo de 92px, e ele não cabe: empurrava a página inteira para o
   lado. `anywhere` deixa quebrar em qualquer ponto — feio num endereço, mas
   muito melhor do que a página rolar na horizontal. */
.contato-lista a { overflow-wrap: anywhere; }
@media (max-width: 460px) {
  .contato-lista li { flex-direction: column; gap: 2px; }
  .contato-lista .rot { min-width: 0; font-size: .84rem; color: var(--cinza); }
}

/* ---------- Galeria ---------- */
/* Os filtros da galeria são <button>, não <a>.
   A versão anterior estilizava só `.filtros a`, e como nenhuma regra casava,
   saíam oito botões cinza de sistema — sem pílula, sem borda, e SEM NENHUMA
   marca visual de qual estava ativo (só aria-pressed, que é invisível).
   Os dois seletores ficam, para o caso de a galeria voltar a usar links.
   min-height de 44px é o alvo de toque recomendado; os botões sem estilo
   ficavam em ~22px, abaixo até do mínimo da WCAG 2.2. */
.filtros { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 28px; }
.filtros a, .filtros button {
  font: inherit; text-decoration: none; font-weight: 700; font-size: .92rem;
  padding: 10px 18px; min-height: 44px; cursor: pointer;
  /* var(--cinza) e não var(--cinza-linha): a borda é o que separa um botão do
     outro, e a 1,33:1 ela simplesmente não existe para muita gente. */
  border-radius: 999px; border: 1px solid var(--cinza);
  color: var(--tinta-suave); background: #fff;
  transition: background var(--rapido) var(--curva), color var(--rapido) var(--curva),
              border-color var(--rapido) var(--curva), transform var(--rapido) var(--curva);
}
.filtros a:hover, .filtros button:hover { border-color: var(--vermelho); color: var(--vermelho); }
.filtros a:active, .filtros button:active { transform: scale(.96); }
.filtros .ativo { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }

/* Mosaico em COLUNAS, não em grade.
   A grade obriga toda foto a caber numa proporção fixa, e o acervo é quase todo
   vertical: com 4/3 as cabeças saíam cortadas. Em colunas cada foto mantém a
   proporção original — que é como uma galeria de fotos deve se comportar. */
.mosaico { columns: 4 250px; column-gap: 18px; }
.mosaico figure {
  margin: 0 0 18px; background: #fff; border: 1px solid var(--cinza-linha); border-radius: var(--raio);
  overflow: hidden; box-shadow: var(--sombra);
  break-inside: avoid; -webkit-column-break-inside: avoid; display: inline-block; width: 100%;
  transition: transform var(--medio) var(--curva), box-shadow var(--medio) var(--curva), border-color var(--medio) var(--curva);
}
.mosaico figure:hover { transform: translateY(-3px); box-shadow: var(--sombra-forte); border-color: var(--vermelho); }
.mosaico img { width: 100%; height: auto; background: var(--fundo-suave); }
/* <picture> é inline por padrão, e inline dentro do link deixa um vão de
   3-4px embaixo da foto (o espaço da linha de base do texto). */
.mosaico picture { display: block; }
/* 65 fotos, e o alvo de toque delas não tinha estado nenhum: no celular a
   galeria inteira parecia uma folha impressa. O link precisa ser bloco para
   poder recortar a aproximação da foto. */
.mosaico a.abrir { display: block; overflow: hidden; position: relative; }
.mosaico a.abrir img { transition: transform var(--medio) var(--curva); }
.mosaico a.abrir:hover img { transform: scale(1.05); }
.mosaico a.abrir:active img { transform: scale(1.02); }
.mosaico a.abrir::after {
  content: "⤢"; position: absolute; right: 10px; bottom: 10px;
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  background: rgba(26,22,20,.62); color: #fff; border-radius: 999px;
  font-size: 1rem; opacity: 0; transition: opacity var(--medio) var(--curva);
}
.mosaico a.abrir:hover::after, .mosaico a.abrir:focus-visible::after { opacity: 1; }
/* 🔑 SEM ISTO O FILTRO NÃO FILTRA NADA.
   O atributo `hidden` funciona por uma regra de origem user-agent
   (`[hidden]{display:none}`), e QUALQUER declaração de autor vence a origem
   user-agent — independente de especificidade. Como `.mosaico figure` declara
   `display:inline-block`, o `figure[hidden]` continuava visível: clicar num
   tema mudava só a cor da pílula e as 28 fotos ficavam na tela.
   O bug era silencioso porque a contagem de visíveis continuava certa. */
.mosaico figure[hidden] { display: none !important; }
.mosaico figcaption { padding: 14px 16px; font-size: .92rem; color: var(--tinta-suave); line-height: 1.45; }
.mosaico .tema { display: block; font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--vermelho); margin-bottom: 5px; }

/* ---------- Artigos do mandato ---------- */
.ano-bloco { margin-bottom: 44px; }
.ano-bloco > h2 { display: flex; align-items: center; gap: 14px; }
.ano-bloco > h2::after { content: ""; flex: 1; height: 2px; background: var(--cinza-linha); }
.artigos { display: grid; gap: 14px; }
.artigo {
  background: #fff; border: 1px solid var(--cinza-linha); border-radius: var(--raio); padding: 20px 22px;
  transition: border-color var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva), transform var(--rapido) var(--curva);
}
.artigo:hover { border-color: var(--vermelho); box-shadow: var(--sombra); transform: translateY(-2px); }
.artigo h3 { margin-bottom: .3em; font-size: 1.08rem; }
.artigo .meta { font-size: .84rem; color: var(--cinza); font-weight: 700; letter-spacing: .04em; margin-bottom: .6em; }
.artigo .meta .selo-lei { background: var(--vermelho-claro); color: var(--vermelho); padding: 3px 9px; border-radius: var(--raio-mini); margin-right: 8px; }
.artigo p { margin: 0; color: var(--tinta-suave); font-size: .97rem; }

/* Card de lei COM FOTO. Só 6 dos 42 cards têm — as seis fotos que existem.
   Foto em alguns cards quebra a parede de texto de uma página de arquivo;
   foto em todos exigiria inventar imagem para 36 leis, e imagem inventada
   conta história que a lei não tem. A foto sangra até a borda do card: o
   `overflow: hidden` do card é quem arredonda o canto de cima dela. */
.artigo.com-foto { padding-top: 0; overflow: hidden; }
.artigo-foto {
  width: calc(100% + 44px); margin: 0 -22px 18px; display: block;
  aspect-ratio: 3 / 2; object-fit: cover;
  /* ⚠️ `max-width: none` é obrigatório aqui, não é excesso de zelo.
     Lá em cima existe `img { max-width: 100% }`, que é o que impede qualquer
     imagem de estourar o container. Ela também limita ESTA a 100%, e o
     `calc(100% + 44px)` — que é o que faz a foto sangrar por cima do padding
     do card — simplesmente não acontecia: a foto ficava 46px mais estreita
     que o card, com uma faixa branca de cada lado. */
  max-width: none;
}
/* Aviso de imagem ilustrativa, junto da foto e não escondido no rodapé.
   Estas seis são de banco: quem aparece nelas é modelo, não é a pessoa de quem
   a lei fala. Dizer isso ao lado da imagem é o que a licença de banco costuma
   exigir quando o assunto é sensível — e é honesto de qualquer forma. */
.artigo .ilustrativa {
  font-size: .78rem; color: var(--cinza); margin: -8px 0 14px;
  text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
}

/* Foto larga com legenda, para respirar entre blocos de texto denso.
   A página do mandato era a única página de conteúdo do site sem nenhuma
   fotografia — só texto de lei, do começo ao fim. */
.foto-larga { margin: 0 0 40px; }
.foto-larga img {
  width: 100%; height: auto; display: block; border-radius: var(--raio);
  border: 1px solid var(--cinza-linha);
}
.foto-larga figcaption {
  font-size: .88rem; color: var(--cinza); line-height: 1.55;
  padding: 12px 4px 0; max-width: 70ch;
}
.ano-bloco .foto-larga { margin: 22px 0 18px; }

/* ---------- Rodapé ---------- */
.rodape { background: var(--tinta); color: rgba(255,255,255,.78); padding: 48px 0 34px; font-size: .9rem; }
.rodape a { color: var(--amarelo); }
.rodape .identificacao {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--raio-p); padding: 18px 22px; margin-bottom: 22px;
  font-weight: 700; color: #fff; font-size: .97rem; line-height: 1.6;
}
.rodape .identificacao .estrela { color: var(--amarelo); }
.rodape .selo-ia { font-size: .82rem; color: rgba(255,255,255,.6); line-height: 1.55; margin-bottom: 18px; }
.rodape .fim { border-top: 1px solid rgba(255,255,255,.14); padding-top: 18px; font-size: .84rem; color: rgba(255,255,255,.55); }

/* ---------- Recortes sem fundo ----------
   Fotos com fundo transparente, feitas fora. É a diferença entre uma foto
   DENTRO de um retângulo e a pessoa em pé NA página: sem moldura, sem sombra
   de caixa, sem emenda para disfarçar. Por isso não levam border-radius nem
   box-shadow — qualquer um dos dois devolve o retângulo que o recorte tirou.

   ⚠️ Recorte grande aparece UMA vez por página. Dois na mesma tela viram colagem. */
.recorte { display: block; height: auto; filter: drop-shadow(0 18px 28px rgba(0,0,0,.28)); }

/* 🔑 A REGRA ACIMA ESTAVA PERDENDO, E O DEFEITO ESTAVA NO AR.
   `.recorte` pesa 0-1-0. `.duo .foto-lado img` (logo abaixo, na seção do duo)
   pesa 0-2-1 e declara `border-radius` e `box-shadow` — ou seja, devolvia
   exatamente o retângulo e a sombra de caixa que o comentário acima proíbe.
   Como o recorte da seção "Quem é" é um homem de roupa BRANCA sobre fundo
   BRANCO, o que se via na página era uma caixa vazia com sombra: a moldura
   aparecia e a pessoa não.
   O `:where()` não serve aqui (pesa zero e continuaria perdendo); é preciso
   uma regra pelo menos tão específica quanto a que causa o problema. */
.duo .foto-lado img.recorte,
.heroi-foto img.recorte {
  border-radius: 0;
  box-shadow: none;
}

/* o herói: ele "pisa" na borda de baixo da faixa vermelha, o que dá profundidade */
.heroi.com-recorte { padding-bottom: 0; }
.heroi.com-recorte .wrap { padding-bottom: 0; align-items: end; }
.heroi.com-recorte .heroi-foto { align-self: end; margin-bottom: -1px; }
.heroi.com-recorte .heroi-foto img { border-radius: 0; box-shadow: none; width: 100%; max-width: 460px; margin: 0 auto; }
@media (max-width: 860px) {
  .heroi.com-recorte .heroi-foto { max-width: 300px; margin: 0 auto; }
  .heroi.com-recorte .wrap { padding-bottom: 0; }
}

/* recorte ao lado de um bloco de texto, sangrando para fora da seção */
.duo .recorte-lado { position: relative; }
.duo .recorte-lado img { width: 100%; max-width: 420px; margin: 0 auto; display: block; }

/* ---------- Logo oficial do PT ---------- */
/* Veio do kit oficial enviado pelo diretório. Substituiu a estrela que eu tinha
   desenhado à mão enquanto o kit não chegava. */
.logo-pt { height: 30px; width: auto; flex: none; }
.rodape .logo-pt { height: 42px; }
.marca .logo-pt { height: 26px; }
/* estava em style inline uma vez por página, nas sete */
.logo-rodape { vertical-align: middle; margin-right: 10px; }

/* ---------- Faixa da frase histórica ---------- */
/* A foto da parede da Crisma, dos anos 1980, recortada só no texto. É o lema da
   campanha com procedência real — por isso ela abre o site logo abaixo do topo,
   em vez de ficar escondida na galeria. */
/* A faixa precisa de ar dos dois lados: o valor dela está em ser lida com
   calma, e colada no herói ela vira só uma textura de passagem. */
.faixa-frase { background: var(--sepia); padding: 34px 0 4px; overflow: hidden; }
.faixa-frase img {
  width: 100%; max-width: 1000px; height: auto; display: block;
  margin: 0 auto; opacity: .96;
}
.faixa-frase .creditinho {
  color: rgba(255,255,255,.66); font-size: .88rem; line-height: 1.6;
  text-align: center; padding: 26px 24px 34px; margin: 0 auto; max-width: 62ch;
}
@media (max-width: 700px) {
  .faixa-frase { padding-top: 22px; }
  .faixa-frase .creditinho { padding: 20px 20px 26px; font-size: .84rem; }
}

/* ---------- Seção com foto ao lado ---------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.duo.foto-esq > .foto-lado { order: -1; }
.duo .foto-lado img { border-radius: var(--raio); box-shadow: var(--sombra); width: 100%; }
.duo .legenda-foto { font-size: .86rem; color: var(--cinza); margin: 12px 0 0; }
@media (max-width: 860px) { .duo { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- Números sobre foto ---------- */
.numeros-fundo { position: relative; background: var(--tinta); overflow: hidden; }
.numeros-fundo > img.bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: .18; filter: grayscale(.3);
}
.numeros-fundo .wrap { position: relative; z-index: 2; }
.numeros-fundo h2, .numeros-fundo .lead { color: #fff; }
.numeros-fundo .lead { color: rgba(255,255,255,.82); }
.numeros-fundo .numero { background: rgba(255,255,255,.96); border-color: transparent; }

/* A conta por trás dos números grandes. Um número redondo numa peça de campanha
   parece inventado justamente por ser redondo; abrir a soma é o que o torna
   verificável. */
.destrinchado {
  margin-top: 28px; padding: 22px 24px; border-radius: var(--raio);
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.86); font-size: .95rem; line-height: 1.7; max-width: 78ch;
}
.destrinchado p { margin: 0 0 .5em; }
.destrinchado strong { color: #fff; }
.destrinchado .nota { margin: .9em 0 0; font-size: .88rem; color: rgba(255,255,255,.6); }

/* ---------- Card com foto ---------- */
.card-foto { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
/* ⚠️ `object-position: center 25%`, não o centro.
   As fotos destes cards são retratos verticais (675×1200, 583×1200). Cortadas em
   3/2 pelo centro, a faixa que sobra é o MEIO da foto — ou seja, o tronco. O
   rosto ficava fora. Puxar para 25% da altura traz a cabeça de volta. É o mesmo
   problema que na galeria foi resolvido abandonando a grade fixa. */
.card-foto > img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: center 25%; }
.card-foto .corpo { padding: 26px 24px 28px; flex: 1; display: flex; flex-direction: column; }
.card-foto .feito { margin-top: auto; }

/* ---------- Marco da linha do tempo com foto ---------- */
.marco .foto-marco {
  margin: 14px 0 0; border-radius: var(--raio-p); overflow: hidden;
  border: 1px solid var(--cinza-linha); max-width: 340px;
}
.marco .foto-marco img { width: 100%; height: auto; display: block; }
.marco .foto-marco figcaption { padding: 9px 12px; font-size: .8rem; color: var(--cinza); background: var(--fundo-suave); }

/* ---------- Propostas ---------- */
.propostas { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; }
.proposta {
  background: #fff; border: 1px solid var(--cinza-linha); border-left: 5px solid var(--amarelo);
  border-radius: var(--raio); box-shadow: var(--sombra);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform var(--medio) var(--curva), box-shadow var(--medio) var(--curva);
}
.proposta:hover { transform: translateY(-4px); box-shadow: var(--sombra-forte); }
.proposta > img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  background: var(--fundo-suave);
  transition: transform var(--medio) var(--curva);
}
.proposta:hover > img { transform: scale(1.03); }
.proposta .corpo { padding: 24px 24px 26px; flex: 1; display: flex; flex-direction: column; }
.proposta .ancora { margin-top: auto; }
.proposta h3 { font-size: 1.1rem; color: var(--tinta); }
.proposta p { color: var(--tinta-suave); font-size: .96rem; margin-bottom: .7em; }
.proposta .ancora {
  font-size: .85rem; color: var(--cinza); border-top: 1px dashed var(--cinza-linha);
  padding-top: 12px; margin: 0;
}
.proposta .ancora strong { color: var(--vermelho); }

/* ---------- Faixa larga de foto entre seções ---------- */
.faixa-foto { position: relative; height: clamp(220px, 34vw, 400px); overflow: hidden; }
.faixa-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; }
/* ⚠️ O véu precisa ser escuro o bastante no TOPO, não só embaixo.
   Começava em 28% de opacidade, e onde a fotografia tem céu claro o texto
   branco caía para 2,80:1 — reprovado até para texto grande, que pede 3:1.
   Texto sobre foto é sempre o caso mais traiçoeiro de contraste, porque o
   fundo muda de pixel para pixel: não dá para medir num ponto só. Com 62% no
   topo, o pior caso (foto totalmente branca ali) fica em 4,0:1. */
.faixa-foto .selo-frase {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(26,22,20,.62), rgba(26,22,20,.78));
  color: #fff; text-align: center; padding: 24px;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
  font-size: clamp(1.2rem, 3.4vw, 2rem); font-weight: 800; letter-spacing: -.01em; line-height: 1.25;
}

/* ---------- Formulário ----------
   ⚠️ NÃO APAGUE ESTE BLOCO PORQUE "não tem <form> no site".
   Não tem mesmo: a página de contato foi desligada (dava erro) e o
   `contato.php` está esperando em `_DESLIGADO/`. O script de religamento
   devolve o PHP e o HTML, mas NÃO recolocaria o CSS — apagar aqui hoje
   significa o formulário voltar sem estilo nenhum no dia em que religar.
   O mesmo vale para .honeypot e .recado logo abaixo. */
.form-campo { display: grid; gap: 7px; margin-bottom: 18px; }
.form-campo label { font-weight: 700; font-size: .95rem; }
/* ⚠️ A borda do campo é var(--cinza), não var(--cinza-linha).
   O cinza-linha rende 1,33:1 contra o branco, e a norma pede 3:1 para a borda
   de um componente (WCAG 2.2, SC 1.4.11). Borda de campo não é decoração: é ela
   que diz onde o campo começa e termina para quem enxerga pouco. */
.form-campo input, .form-campo textarea, .form-campo select {
  font: inherit; padding: 12px 14px; border: 1px solid var(--cinza);
  border-radius: var(--raio-p); background: #fff; color: var(--tinta); width: 100%;
}
/* ⚠️ ESTE FOCO PRECISA SER IGUAL AO GLOBAL, e não amarelo sozinho.
   A regra antiga era `outline: 3px solid var(--amarelo)`, e ela GANHAVA da
   regra global lá de cima por especificidade (.form-campo input:focus tem peso
   maior que input:focus-visible). Resultado: no formulário — o único lugar do
   site onde a pessoa REALMENTE precisa saber onde está — sobrava um anel
   amarelo a 1,68:1 sobre branco, que é quase invisível. */
.form-campo input:focus-visible, .form-campo textarea:focus-visible, .form-campo select:focus-visible {
  outline: 3px solid var(--tinta); outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--amarelo);
  border-color: var(--vermelho);
}
.form-campo input[aria-invalid="true"], .form-campo textarea[aria-invalid="true"] {
  border-color: var(--vermelho); border-width: 2px;
}
.form-campo .dica { font-size: .84rem; color: var(--cinza); }
.honeypot { position: absolute; left: -9999px; }
.recado { padding: 16px 20px; border-radius: var(--raio-p); margin-bottom: 22px; font-weight: 600; }
.recado.ok { background: var(--ok-fundo); border: 1px solid var(--ok-borda); color: var(--ok-texto); }
.recado.erro { background: var(--vermelho-claro); border: 1px solid var(--rosa-borda); color: var(--vermelho-escuro); }

/* ============================================================================
   UTILITÁRIOS QUE ESTAVAM ESCRITOS EM `style=` NO HTML
   ----------------------------------------------------------------------------
   Eram 99 atributos `style` espalhados nas sete páginas. Estes seis se
   repetiam de quatro a nove vezes cada — ou seja, não eram exceção: eram
   componente. Enquanto moravam no HTML, mudar qualquer um deles significava
   caçar ocorrência por ocorrência, e cada cópia ia envelhecendo diferente.
   ========================================================================== */

/* título de página interna — 4×, e em `ajude.html` com um clamp diferente */
.h1-interno { font-size: clamp(1.9rem, 5.5vw, 3rem); }

/* a contagem cinza ao lado do título de cada tema da galeria — 7× */
.contagem { font-weight: 400; font-size: 1rem; color: var(--cinza); }

/* todo `ul` de mosaico, que não é lista visual — 9× */
.lista-limpa { list-style: none; padding: 0; margin: 0; }

/* A citação do candidato na home — 4 propriedades, 100% inline.
   ⚠️ O visual aqui é o MESMO de antes, de propósito. Ao extrair o `style` para
   uma classe eu havia trocado a caixa vermelha por um filete amarelo, mais
   leve e mais bonito — e errado: este é o texto de contraste da campanha
   (CLAUDE.md §3.3), a peça que separa "política da dominação" de "política do
   cuidado". Ele foi desenhado com peso por decisão anterior. Tirar peso dele
   não era a tarefa; a tarefa era tirar o estilo de dentro do HTML. */
.citacao {
  margin: 26px 0 0; padding: 24px 26px;
  background: var(--vermelho-claro); border-left: 6px solid var(--vermelho);
  border-radius: var(--raio);
}
.citacao-forte { font-size: 1.1rem; font-weight: 600; color: var(--vermelho-escuro); margin-bottom: .6em; }
.citacao p:last-child { margin-bottom: 0; color: var(--tinta-suave); }
.citacao cite { display: block; margin-top: 10px; font-style: normal; font-size: .9rem; font-weight: 700; color: var(--cinza); }

/* ============================================================================
   CHAMARIZ DO "EU APOIO" NA HOME
   ----------------------------------------------------------------------------
   Mesma cara do palco escuro da seção de verdade (assets/apoio/apoio.css):
   quem clica aqui chega num lugar reconhecível. Era uma `section.suave` igual
   às vizinhas, e a segunda peça da home passava despercebida.

   ⚠️ EM ESPERA — NÃO APAGUE ESTE BLOCO "porque não tem `.chamariz-apoio` no
   HTML". Não tem mesmo: o bloco saiu da home em 18/08/2026, a pedido do
   Ricardo, e está guardado em `_DESLIGADO/chamariz-apoio-home.html`. Quem
   devolver o HTML não vai pensar em recolocar o CSS junto, e a seção voltaria
   sem estilo nenhum. Mesma situação do `.form-campo` lá embaixo.
   ========================================================================== */
.chamariz-apoio {
  background: var(--tinta); color: rgba(255,255,255,.86);
  background-image: radial-gradient(110% 90% at 22% 0%, rgba(196,18,46,.6), transparent 60%);
}
.chamariz-apoio h2 { color: #fff; }
.chamariz-apoio .lead { color: rgba(255,255,255,.8); }
.chamariz-img { border-radius: var(--raio); border: 1px solid rgba(255,255,255,.2); box-shadow: var(--sombra-forte); }
.chamariz-passos {
  display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 22px 0 0;
  font-size: .88rem; font-weight: 700; color: rgba(255,255,255,.62);
}
.chamariz-passos li { display: flex; align-items: center; gap: 9px; }
.chamariz-passos span {
  width: 24px; height: 24px; flex: none; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(242,194,48,.2); color: var(--amarelo); font-size: .8rem;
}
.chamariz-selo { font-size: .84rem; color: rgba(255,255,255,.55); margin: 0; }

/* ============================================================================
   MOVIMENTO — entrada dos blocos ao rolar
   ----------------------------------------------------------------------------
   ⚠️ O estado inicial (invisível, deslocado) só vale se a classe `js` estiver
   no <html>. Quem põe essa classe é o próprio site.js, na primeira linha que
   ele executa. Sem JavaScript — script bloqueado, erro de rede, navegador
   antigo — a classe nunca aparece, estas regras nunca casam, e a página fica
   exatamente como sempre foi: tudo visível.
   Escondido por padrão e revelado por script é como se apaga um site inteiro
   com um arquivo .js que não carregou.
   ========================================================================== */
.js .revelar { opacity: 0; transform: translateY(18px); }
.js .revelar.dentro {
  opacity: 1; transform: none;
  transition: opacity .55s var(--curva), transform .55s var(--curva);
  transition-delay: var(--atraso, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  .js .revelar { opacity: 1; transform: none; }
}

/* ---------- Menu-sanduíche (só no celular) ---------- */
.abre-menu { display: none; }
@media (max-width: 800px) {
  /* Com o menu recolhido, o cabeçalho volta a caber — e volta a ser grudado.
     Ele era `static` no celular porque oito itens quebravam em duas ou três
     linhas e comiam ~150px da primeira tela. Recolhido, ele ocupa uma linha,
     então o número e o caminho ficam sempre à mão. */
  .topo { position: sticky; }
  .topo .wrap { flex-wrap: wrap; padding-bottom: 0; row-gap: 0; }
  .abre-menu {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    margin-left: auto; min-height: 44px; min-width: 44px; padding: 8px 14px;
    font: inherit; font-weight: 700; font-size: .9rem;
    background: #fff; color: var(--tinta); cursor: pointer;
    border: 1px solid var(--cinza); border-radius: 999px;
  }
  .abre-menu .barras { display: block; width: 18px; height: 2px; background: currentColor; position: relative; }
  .abre-menu .barras::before, .abre-menu .barras::after {
    content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor;
    transition: transform var(--rapido) var(--curva), opacity var(--rapido) var(--curva);
  }
  .abre-menu .barras::before { top: -6px; }
  .abre-menu .barras::after { top: 6px; }
  .abre-menu[aria-expanded="true"] .barras { background: transparent; }
  .abre-menu[aria-expanded="true"] .barras::before { transform: translateY(6px) rotate(45deg); }
  .abre-menu[aria-expanded="true"] .barras::after { transform: translateY(-6px) rotate(-45deg); }

  /* Só o script esconde o menu. Sem JavaScript o botão nunca aparece e o menu
     continua aberto em linhas, exatamente como era antes desta rodada. */
  .js .menu[data-recolhido="sim"] { display: none; }
  .menu { width: 100%; flex-wrap: wrap; gap: 2px 4px; padding: 6px 0 10px; }
  .menu a { font-size: .95rem; padding: 11px 10px; }
  [id] { scroll-margin-top: 68px; }
}

/* ============================================================================
   BARRA FIXA DE CAMPANHA — só no celular
   ----------------------------------------------------------------------------
   O número aparecia no herói, no rodapé e na seção "Como votar" — que está a
   85% da rolagem da home. Quem chega pelo link do WhatsApp, lê a primeira tela
   e sai, nunca mais via o 13433. Esta faixa resolve isso sem cobrir conteúdo:
   o `body` ganha folga do tamanho dela, e ela some na impressão.
   ========================================================================== */
.barra-fixa { display: none; }
@media (max-width: 800px) {
  .barra-fixa {
    display: flex; align-items: center; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--vermelho); color: #fff;
    padding: 9px 14px calc(9px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -6px 20px rgba(26,22,20,.22);
  }
  .barra-fixa .quem { font-size: .74rem; line-height: 1.25; font-weight: 700; min-width: 0; margin: 0; }
  .barra-fixa .quem .nome { display: block; opacity: .9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .barra-fixa .quem .n { font-size: 1.18rem; font-weight: 900; letter-spacing: .02em; color: var(--amarelo); }
  .barra-fixa .acoes { margin-left: auto; display: flex; gap: 8px; flex: none; }
  .barra-fixa a.btn {
    padding: 10px 15px; font-size: .86rem; min-height: 44px;
    display: inline-flex; align-items: center; border-radius: 999px;
  }
  .barra-fixa a.btn-amarelo { background: var(--amarelo); color: var(--ocre-texto); }
  .barra-fixa a.btn-contorno { border-color: rgba(255,255,255,.7); color: #fff; }
  body { padding-bottom: 74px; }
}

/* ---------- Voltar ao topo ---------- */
.ao-topo {
  position: fixed; right: 16px; bottom: 16px; z-index: 55;
  width: 46px; height: 46px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.25); background: var(--tinta); color: #fff;
  font-size: 1.1rem; line-height: 1; display: none;
  align-items: center; justify-content: center; box-shadow: var(--sombra-forte);
  opacity: 0; transform: translateY(10px);
  transition: opacity var(--medio) var(--curva), transform var(--medio) var(--curva);
}
.js .ao-topo { display: flex; }
.ao-topo.aparece { opacity: 1; transform: none; }
@media (max-width: 800px) { .ao-topo { bottom: 84px; } }

/* ============================================================================
   BARRA DE ANOS — página do mandato
   ----------------------------------------------------------------------------
   São 42 leis numa página só, e nenhum ano era ancorável: para chegar em 2016
   a pessoa rolava a página inteira.
   ========================================================================== */
.barra-anos {
  position: sticky; top: 62px; z-index: 40;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  background: rgba(255,255,255,.94); backdrop-filter: blur(6px);
  border: 1px solid var(--cinza-linha); border-radius: 999px;
  padding: 8px 12px; margin: 0 0 var(--e4);
}
.barra-anos .rot { font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--cinza); padding-left: 6px; }
.barra-anos a {
  text-decoration: none; font-weight: 800; font-size: .92rem; color: var(--tinta-suave);
  padding: 9px 14px; min-height: 44px; display: inline-flex; align-items: center;
  border-radius: 999px; border: 1px solid transparent;
  transition: background var(--rapido) var(--curva), color var(--rapido) var(--curva);
}
.barra-anos a:hover, .barra-anos a.ativo { background: var(--vermelho); color: #fff; }
@media (max-width: 800px) {
  .barra-anos { top: 0; }
  .barra-anos .rot { display: none; }
  .barra-anos a { font-size: .88rem; padding: 9px 12px; }
}
.ano-bloco { scroll-margin-top: 130px; }

/* ---------- Impressão ---------- */
@media print {
  .topo, .menu, .botoes, .filtros, .barra-fixa, .ao-topo, .abre-menu, .barra-anos { display: none !important; }
  body { font-size: 12px; padding-bottom: 0; }
  .heroi, .votar, .faixa { background: #fff !important; color: #000 !important; }
  .heroi h1, .faixa h2, .votar h2 { color: #000 !important; }
  .revelar { opacity: 1 !important; transform: none !important; }
}