/* Portal de Transparência Eleitoral — folha única.
   Sem framework: o site é estático e precisa carregar rápido em 3G no dia da
   eleição. Tudo cabe num arquivo de poucos KB.

   Contraste: todos os pares de texto/fundo daqui foram medidos e passam em
   WCAG AA (4,5:1 para texto normal). A cor --tinta-fraca em especial carrega
   título de seção, rótulo de número e cabeçalho de tabela — texto pequeno que
   não pode ficar no limite. */

:root {
  --papel:        #ffffff;
  --papel-alto:   #FAF8FF;   /* faixa alternada e zebra de tabela */
  --papel-fundo:  #ffffff;   /* fundo da página: branco, como no aprovado */
  --papel-zebra:  #F6F3FE;
  --tinta:        #1A1633;   /* 15,4:1 */
  --tinta-media:  #4C4767;   /*  8,4:1 */
  --tinta-fraca:  #5F5A7D;   /*  6,2:1 — carrega rótulo e cabeçalho de tabela */
  /* Cartão branco sobre fundo branco só se separa pela borda e pela sombra;
     por isso a linha aqui é mais presente do que era sobre o lilás. */
  --linha:        #E4DEF6;
  --linha-forte:  #CFC5EC;
  --acento:       #6D28D9;   /*  7,1:1 sobre papel */
  --acento-claro: #8B5CF6;
  --acento-tenue: #EDE9FE;
  --alerta:       #A3341A;   /*  6,4:1 */
  --positivo:     #15803d;   /*  4,8:1 */
  --foco:         #6D28D9;
  /* Sombra difusa e tingida de violeta, não cinza: é o que faz o cartão
     parecer flutuar sobre o lilás em vez de estar recortado nele. */
  --sombra:       0 2px 8px rgba(76,45,150,.05), 0 12px 32px -8px rgba(76,45,150,.10);
  --sombra-alta:  0 4px 12px rgba(76,45,150,.07), 0 24px 56px -12px rgba(76,45,150,.18);
  /* O violeta aprovado, #6D28D9 -> #8B5CF6, sem alterar nenhuma das duas cores.
     O que muda é ONDE a transição acontece: a ponta clara só entra depois dos
     55%, no canto oposto ao texto. Assim o branco assenta sobre #6D28D9
     (7,1:1) e o degradê continua exatamente o que foi aprovado — antes eu
     havia escurecido a cor para resolver contraste, o que era resolver o
     numero estragando o design. */
  --degrade:      linear-gradient(135deg, #6D28D9 0%, #6D28D9 55%, #8B5CF6 100%);
  --degrade-luz:  linear-gradient(150deg, #6D28D9 0%, #8B5CF6 60%, #A78BFA 100%);
  --raio:         20px;   /* generoso: é a assinatura desta direção */
  --raio-g:       28px;
  --largura:      76rem;
  --serifa:       'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sans:         'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:         ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  --alvo:         2.75rem;   /* alvo mínimo de toque */
}

/* O tema escuro NÃO segue mais a preferência do sistema.

   Motivo: a direção aprovada é clara, de fundo branco, e quem abria o portal
   com o celular no modo escuro via uma página quase preta que não parecia o
   mesmo produto. Entre respeitar a preferência do sistema e entregar o design
   aprovado, a escolha foi o segundo — e é reversível: para voltar a seguir o
   sistema, basta envolver o bloco abaixo numa consulta de mídia
   prefers-color-scheme: dark.

   O escuro continua existindo, mas só para quem pedir: data-tema="escuro". */
:root[data-tema="escuro"] {
  --papel: #1C1738; --papel-alto: #241D45; --papel-fundo: #14102A;
  --papel-zebra: #201A3D;
  --tinta: #F3F1FB; --tinta-media: #C9C4E0; --tinta-fraca: #9C96BC;
  --linha: #322A5C; --linha-forte: #453B7A;
  --acento: #C4B5FD; --acento-claro: #DDD6FE; --acento-tenue: #2E2559;
  --alerta: #FCA37B; --positivo: #86efac; --foco: #C4B5FD;
  --sombra: 0 2px 8px rgba(0,0,0,.4), 0 14px 34px -10px rgba(0,0,0,.6);
  --sombra-alta: 0 4px 12px rgba(0,0,0,.45), 0 26px 60px -14px rgba(0,0,0,.75);
}

* { box-sizing: border-box; }
/* O atributo hidden é só display:none na folha do navegador — qualquer regra
   nossa com display o anula em silêncio. Já aconteceu duas vezes: o select de
   cargo e o botão de limpar continuavam visíveis depois de escondidos. */
[hidden] { display: none !important; }
html {
  -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
  /* Sem isto, o que o CSS nao pinta -- barra de rolagem, menu do <select> --
     continua claro no modo escuro. */
  color-scheme: light;   /* o portal serve só o tema claro aprovado */
}
/* `manipulation` desliga a espera de ~300ms pelo duplo-toque; o realce padrao
   do WebKit vira violeta em vez do cinza do sistema. */
a, button, summary, label, input, select, [role="button"], [role="option"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(109, 40, 217, .16);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}
body {
  margin: 0;
  background: var(--papel-fundo);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
}
a { color: var(--acento); text-decoration: none; cursor: pointer; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

:is(a, button, input, select, summary):focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
  border-radius: 3px;
}

.pular {
  position: absolute; left: -9999px; top: 0;
  background: var(--papel); color: var(--tinta);
  padding: .75rem 1rem; z-index: 100; border-radius: 0 0 var(--raio) 0;
  border: 1px solid var(--linha-forte);
}
.pular:focus { left: 0; }

.oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------ estrutura */
/* O recuo lateral respeita a area segura: em iPhone com entalhe, na
   horizontal, o texto encostava no recorte da tela. */
.envelope {
  max-width: var(--largura); margin: 0 auto;
  padding-left: max(1.25rem, env(safe-area-inset-left));
  padding-right: max(1.25rem, env(safe-area-inset-right));
}

.topo {
  background: var(--papel);
  border-bottom: 1px solid var(--linha);
  position: sticky; top: 0; z-index: 20;
}
.topo .envelope {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 3.75rem; flex-wrap: wrap;
}
.topo nav { display: flex; gap: .35rem; margin-left: auto; font-size: .9rem; }
.topo nav a {
  color: var(--tinta-media); padding: .55rem .6rem; border-radius: var(--raio);
  display: inline-flex; align-items: center; min-height: var(--alvo);
}
.topo nav a { transition: background-color 180ms ease, color 180ms ease; }
.topo nav a:hover { background: var(--papel-alto); text-decoration: none; }
.topo nav a[aria-current] {
  color: var(--tinta); font-weight: 600; background: var(--acento-tenue);
}

main { padding: 3rem 0 5rem; }

.rodape {
  border-top: 1px solid var(--linha);
  background: var(--papel);
  padding: 2rem 0 3rem;
  font-size: .875rem; color: var(--tinta-media);
}
.rodape p { margin: .5rem 0; max-width: 62ch; }

/* ------------------------------------------------------------ tipografia */
h1 {
  font-family: var(--serifa); font-size: clamp(1.7rem, 1.2rem + 2vw, 2.5rem);
  line-height: 1.15; letter-spacing: -.02em; margin: 0 0 .5rem;
}
/* Título de seção: numa página com dez seções ele é a única âncora visual.
   Precisa ser inconfundível sem virar outro H1 — daí caixa alta curta,
   contraste de peso e um filete que corta a largura toda. */
h2 {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--tinta-media); font-weight: 700;
  margin: 3.75rem 0 1.15rem; padding-bottom: .6rem;
  border-bottom: 2px solid var(--linha-forte);
  scroll-margin-top: 8rem;
}
h3 {
  font-size: 1.05rem; font-weight: 600; color: var(--tinta);
  margin: 1.75rem 0 .6rem; letter-spacing: -.005em;
}
.linha-fina {
  color: var(--tinta-media); font-size: 1.05rem; max-width: 62ch;
  margin: 0 0 1.5rem;
}

/* ---------------------------------------------------------------- cartões */
.cartao {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 1.35rem 1.4rem;
  box-shadow: var(--sombra);
}
.grade { display: grid; gap: 1.1rem; }
.grade-3 { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.grade-4 { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
/* Sem auto-fit: com dois cartões numa faixa de quatro, o auto-fit os estica
   até a largura toda e eles deixam de parecer da mesma família dos outros. */
.grade-fixa { grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); }

.numero {
  font-family: var(--serifa); font-size: 1.85rem; line-height: 1.1;
  letter-spacing: -.02em; display: block;
  white-space: nowrap;
}
.numero-curto { font-size: 1.05rem; font-family: var(--mono); }
.numero-rotulo {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--tinta-fraca); margin-top: .35rem; display: block;
}

/* ------------------------------------------------------------- candidato */
.ficha {
  display: grid; grid-template-columns: 7.5rem 1fr; gap: 1.5rem;
  align-items: start; margin-bottom: 1rem;
}
.ficha img {
  width: 7.5rem; height: 10rem; object-fit: cover;
  border-radius: var(--raio); border: 1px solid var(--linha);
  background: var(--papel-fundo);
}
.ficha .sem-foto {
  width: 7.5rem; height: 10rem; border-radius: var(--raio);
  border: 1px dashed var(--linha-forte); display: grid; place-items: center;
  color: var(--tinta-fraca); font-size: .75rem; text-align: center; padding: .5rem;
}
.identidade { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: baseline; }
.urna {
  font-family: var(--mono); font-size: 1.1rem; font-weight: 600;
  background: var(--papel-fundo); border: 1px solid var(--linha-forte);
  border-radius: 4px; padding: .1rem .5rem;
}

/* Índice da página: o perfil tem oito seções e rola muito. Sem um sumário
   fixo, achar "como votou" exige varrer a página inteira. */
.indice {
  position: sticky; top: 3.75rem; z-index: 10;
  background: var(--papel);
  border: 1px solid var(--linha); border-radius: var(--raio);
  margin: 1.5rem 0 0; padding: .4rem .5rem;
  display: flex; flex-wrap: wrap; gap: .15rem;
}
.indice a {
  font-size: .82rem; color: var(--tinta-media);
  padding: .45rem .65rem; border-radius: 4px; white-space: nowrap;
}
.indice a { transition: background-color 180ms ease, color 180ms ease; }
.indice a:hover { background: var(--acento-tenue); color: var(--tinta); text-decoration: none; }

.etiquetas { display: flex; flex-wrap: wrap; gap: .4rem; margin: .75rem 0; }
.etiqueta {
  font-size: .78rem; padding: .22rem .65rem; border-radius: 100px;
  border: 1px solid var(--linha-forte); color: var(--tinta-media);
  background: var(--papel);
}
/* Etiqueta que leva a uma seção da página: mantém a aparência de etiqueta,
   mas com alvo de toque inteiro e sublinhado só no hover. */
.etiqueta:has(a) { padding: 0; border-color: var(--acento); }
.etiqueta a {
  display: inline-block; padding: .22rem .65rem;
  color: var(--acento); text-decoration: none; font-weight: 600;
}
.etiqueta a:hover { text-decoration: underline; }
.etiqueta-atencao { border-color: var(--alerta); color: var(--alerta); }
.etiqueta-ok { border-color: var(--positivo); color: var(--positivo); }

/* ------------------------------------------------------------- definições */
/* ver bloco FICHAS DE DADO */

/* ---------------------------------------------------------------- tabelas */
.rolagem {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  /* Sombra só na borda que ainda tem conteúdo escondido — avisa que a tabela
     rola sem poluir quando ela cabe inteira. */
  background:
    linear-gradient(to right, var(--papel-fundo) 30%, transparent) left / 2rem 100% no-repeat,
    linear-gradient(to left,  var(--papel-fundo) 30%, transparent) right / 2rem 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.14), transparent) left / .6rem 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.14), transparent) right / .6rem 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
caption { text-align: left; }
th {
  text-align: left; font-size: .73rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--tinta-fraca); font-weight: 700;
  padding: .6rem .75rem; border-bottom: 2px solid var(--linha-forte);
  white-space: nowrap;
  background: var(--papel-fundo);
}
td { padding: .55rem .75rem; border-bottom: 1px solid var(--linha); vertical-align: top; }
tbody tr:nth-child(even) { background: var(--papel-zebra); }
tbody tr { transition: background-color 180ms ease; }
tbody tr:hover { background: var(--acento-tenue); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ------------------------------------------------------------- medidores */
.medidor {
  height: .55rem; background: var(--papel-fundo); border-radius: 100px;
  overflow: hidden; border: 1px solid var(--linha-forte); margin: .5rem 0 .3rem;
}
.medidor i { display: block; height: 100%; background: var(--acento); }
.medidor-legenda { font-size: .85rem; color: var(--tinta-media); }

/* ---------------------------------------------------------------- votos */
.voto {
  font-size: .75rem; font-weight: 700; padding: .12rem .5rem;
  border-radius: 4px; border: 1px solid var(--linha-forte);
  display: inline-block; white-space: nowrap;
}
.voto-sim { color: var(--positivo); border-color: var(--positivo); }
.voto-nao { color: var(--alerta); border-color: var(--alerta); }

/* ---------------------------------------------------------------- busca */
.busca { position: relative; margin: 1.25rem 0; }
.busca input {
  width: 100%; font: inherit; font-size: 1.05rem;
  padding: .8rem 1rem; min-height: var(--alvo); border-radius: var(--raio);
  border: 1px solid var(--linha-forte); background: var(--papel);
  color: var(--tinta);
}
.filtros { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.25rem; }
.filtros select {
  cursor: pointer;
  font: inherit; font-size: .9rem; padding: .45rem .6rem;
  min-height: var(--alvo);
  border: 1px solid var(--linha-forte); border-radius: var(--raio);
  background: var(--papel); color: var(--tinta);
}

/* Resultado da busca: cada linha é um cartão, como o resto do portal. Era a
   única parte que continuava lista crua com fio embaixo.

   O número de urna sai do meio — onde parecia uma coluna perdida entre o
   retrato e o nome — e vai para a direita, como pastilha. É o dado que a
   pessoa digita na urna, então merece a mesma pastilha da ficha. */
.resultados {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .6rem;
}
.resultados li { border: 0; }
.resultados a {
  display: grid;
  grid-template-columns: 3rem 1fr auto auto;
  gap: .2rem .85rem; align-items: center;
  padding: .7rem .9rem; min-height: 4.25rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--papel);
  color: var(--tinta);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.resultados a:hover {
  text-decoration: none;
  border-color: var(--acento);
  box-shadow: var(--sombra);
  transform: translateY(-2px);
}
.resultados a:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
/* Retrato em 3x4 arredondado, como as fichas do herói — foto de documento
   não é avatar de rede social. */
.resultados .retrato {
  width: 3rem; height: 3rem; border-radius: 14px; object-fit: cover;
  object-position: top center; background: var(--papel-zebra);
  border: 1px solid var(--linha);
}
.resultados .n {
  /* Sem grid-column fixo: a coluna numerada quebrava no celular, onde a seta
     some e o total de itens muda. A ordem no HTML já é a ordem visual. */
  align-self: center;
  font-family: var(--mono); font-weight: 700; font-size: .9rem;
  font-variant-numeric: tabular-nums; letter-spacing: .03em;
  background: var(--acento-tenue); color: var(--acento);
  border-radius: 10px; padding: .2rem .55rem; text-align: center;
}
/* Seta de entrada: diz que a linha inteira é clicável. */
.resultados a::after {
  content: ""; align-self: center;
  width: .5rem; height: .5rem; margin-right: .15rem;
  border-right: 2.5px solid var(--linha-forte);
  border-top: 2.5px solid var(--linha-forte);
  transform: rotate(45deg);
  transition: border-color 160ms ease;
}
.resultados a:hover::after { border-color: var(--acento); }
/* Nome e contexto empilhados: o par vira um bloco só, em vez de duas pontas
   separadas por um vão que cresce com a largura da tela. */
.resultados .corpo { display: flex; flex-direction: column; min-width: 0; gap: .2rem; }
.resultados .nome {
  font-family: var(--serifa); font-weight: 700; font-size: 1.02rem;
  letter-spacing: -.015em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Cargo, estado e partido viravam uma frase cinza separada por pontinhos.
   Como são três dados independentes — e são justamente por onde se filtra —
   agora cada um é uma pastilha própria. */
.resultados .meta {
  font-size: .76rem; color: var(--tinta-media); font-weight: 600;
  display: flex; flex-wrap: wrap; gap: .3rem; align-items: center;
}
.resultados .meta .lasca {
  background: var(--papel-alto); border: 1px solid var(--linha);
  border-radius: 100px; padding: .1rem .5rem; white-space: nowrap;
}
.resultados .meta .lasca-uf { font-variant-numeric: tabular-nums; }
.resultados .meta .lasca-partido { color: var(--acento); border-color: var(--acento-tenue);
  background: var(--acento-tenue); }

@media (max-width: 560px) {
  .resultados a { grid-template-columns: 2.6rem 1fr auto; padding: .6rem .7rem;
    min-height: 0; }
  .resultados .retrato { width: 2.6rem; height: 2.6rem; }
  /* Sem a seta no celular: a linha inteira já é o alvo, e ela roubava largura
     de um nome que muitas vezes já não cabe. */
  .resultados a::after { display: none; }
  .resultados .nome { font-size: .96rem; }
  /* As três pastilhas têm de caber numa fileira só: quebrando em duas, cada
     resultado passava de 100px e vinte e cinco deles viravam três telas. */
  .resultados .meta { font-size: .68rem; gap: .22rem; flex-wrap: nowrap;
    overflow: hidden; }
  .resultados .meta .lasca { padding: .05rem .4rem; }
  .resultados .meta .lasca:first-child { overflow: hidden; text-overflow: ellipsis; }
}

/* ----------------------------------------------------------- procedência */
.procedencia {
  font-size: .84rem; color: var(--tinta-fraca);
  border-left: 2px solid var(--linha-forte); padding: .1rem 0 .1rem .75rem;
  margin: .8rem 0 0; max-width: 78ch;
}
.aviso {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--acento);
  border-radius: var(--raio);
  padding: 1rem 1.25rem; font-size: .92rem; color: var(--tinta-media);
  margin: 1.5rem 0;
}
.aviso strong { color: var(--tinta); }
.aviso p { margin: 0; }
.aviso p + p { margin-top: .6rem; }

.vazio { color: var(--tinta-fraca); font-size: .92rem; font-style: italic; padding: .5rem 0; }

/* --------------------------------------------------- plano de governo */
/* O trecho é citação literal do PDF: a barra à esquerda diz isso sem
   precisar de aspas, que atrapalhariam a leitura de uma lista longa. */
.propostas { list-style: none; padding: 0; margin: .9rem 0 1.6rem; display: grid; gap: .7rem; }
.propostas li {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--acento-claro);
  border-radius: var(--raio);
  padding: .9rem 1.1rem;
}
.propostas li p { margin: 0; color: var(--tinta); font-size: .95rem; line-height: 1.6; }
.proposta-pagina {
  margin-top: .45rem !important;
  font-size: .78rem; color: var(--tinta-fraca) !important;
  font-variant-numeric: tabular-nums;
}
.acoes-plano { margin: 1.1rem 0 1.4rem; }
.botao {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: var(--alvo); padding: .6rem 1.15rem;
  background: var(--acento); color: #fff; text-decoration: none;
  border-radius: var(--raio); font-weight: 600; font-size: .92rem;
  box-shadow: var(--sombra);
  transition: background .15s ease, transform .15s ease;
}
.botao:hover { background: var(--acento-claro); color: #fff; }
.botao:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) { .botao { transition: none; } }

/* ------------------------------------------------------------- impressão */
/* Jornalista e pesquisador imprimem página de candidato. Sem isto sai fundo
   escuro, navegação e sombra de rolagem no papel. */
@media print {
  :root { --papel: #fff; --papel-fundo: #fff; --papel-zebra: #fff;
          --tinta: #000; --tinta-media: #333; --tinta-fraca: #555;
          --linha: #ccc; --linha-forte: #999; --acento: #000; }
  .topo, .indice, .pular, .filtros, .busca { display: none; }
  body { font-size: 11pt; }
  main { padding: 0; }
  .rolagem { overflow: visible; background: none; }
  .cartao, .aviso { break-inside: avoid; }
  h2 { break-after: avoid; margin-top: 1.5rem; }
  table { break-inside: auto; }
  tr { break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

@media (max-width: 46rem) {
  .indice { position: static; }
}
@media (max-width: 40rem) {
  .ficha { grid-template-columns: 5rem 1fr; gap: 1rem; }
  .ficha img, .ficha .sem-foto { width: 5rem; height: 6.7rem; }
  .topo nav { gap: 0; font-size: .85rem; }
  .topo nav a { padding: .5rem .45rem; }
}

/* -------------------------------------------------------- rótulos de campo */
.rotulo-campo {
  display: block; font-size: .74rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--tinta-fraca); font-weight: 600;
  margin-bottom: .3rem;
}
.busca .rotulo-campo { margin-bottom: .4rem; }
.campo { display: flex; flex-direction: column; }
.filtros { align-items: end; }

/* Também na página de pesquisas, que tem um filtro solto. */
.filtros > select { align-self: end; }

/* ============================================================== GRÁFICOS ==
   Barras, composição e anel — tudo em HTML/CSS. Ver modelos/graficos.html
   para o porquê de não usar biblioteca. */

.barras { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .55rem; }
.barras li {
  display: grid; grid-template-columns: minmax(6rem, 14rem) 1fr auto;
  gap: .85rem; align-items: center; font-size: .88rem;
}
.barras-nome {
  color: var(--tinta-media); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.barras-trilho {
  background: var(--papel-zebra); border-radius: 100px; height: .95rem;
  overflow: hidden; border: 1px solid var(--linha);
}
.barras-preenchimento {
  display: block; height: 100%; border-radius: 100px;
  background: linear-gradient(90deg, var(--acento), var(--acento-claro));
  min-width: 2px;
}
.barras-valor {
  font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap;
  color: var(--tinta);
}

/* --- composição (parte do todo): a base de design desaconselha pizza --- */
.empilhada {
  display: flex; height: 1.5rem; border-radius: 100px; overflow: hidden;
  border: 1px solid var(--linha); margin: .75rem 0 .85rem;
}
.empilhada-parte { display: block; height: 100%; }
.legenda {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: .4rem 1.25rem; font-size: .86rem;
}
.legenda li { display: flex; align-items: center; gap: .5rem; }
.legenda-cor {
  width: .7rem; height: .7rem; border-radius: 3px; flex: none;
  border: 1px solid rgba(0,0,0,.15);
}
.legenda-nome {
  color: var(--tinta-media); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.legenda-valor {
  margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600;
}

/* Seis tons derivados do azul da marca — mesma família, luminância distinta,
   para as fatias se distinguirem também em tela monocromática. */
/* Escala categórica da direção violeta. Estava no azul da paleta anterior —
   o gráfico de origem dos recursos continuava azul numa página inteira roxa.

   Não é um degradê de um tom só: fatias vizinhas precisam se distinguir
   também para quem não separa bem as cores, então a escala varia LUMINOSIDADE
   em passos largos, e o cinza fecha a série como "outros". */
.parte-0 { background: #4C1D95; }   /* violeta profundo */
.parte-1 { background: #6D28D9; }   /* o acento da marca */
.parte-2 { background: #8B5CF6; }
.parte-3 { background: #A78BFA; }
.parte-4 { background: #2E1065; }   /* o mais escuro, para separar do 0 */
.parte-5 { background: #9691AE; }   /* neutro: sobras e "outros" */

/* --------------------------------------------------------------- anel --- */
.anel { display: flex; align-items: center; gap: 1.1rem; margin: .5rem 0 0; }
.anel-disco {
  --pct: 0;
  width: 7.5rem; height: 7.5rem; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background:
    conic-gradient(var(--acento) calc(var(--pct) * 1%), var(--papel-zebra) 0);
  position: relative;
}
.anel-disco::after {
  content: ''; position: absolute; inset: .85rem; border-radius: 50%;
  background: var(--papel); border: 1px solid var(--linha);
}
.anel-num {
  position: relative; z-index: 1; font-family: var(--serifa);
  font-size: 1.9rem; font-weight: 600; letter-spacing: -.02em;
}
.anel-num small { font-size: .95rem; font-weight: 400; margin-left: .05em; }
.anel-texto { display: flex; flex-direction: column; gap: .15rem; }
.anel-texto strong { font-size: .95rem; }
.anel-texto span { color: var(--tinta-media); font-size: .86rem; }

@media print {
  .barras-preenchimento { background: #444 !important; }
  .empilhada-parte, .legenda-cor { background: #666 !important; }
  .anel-disco { background: none !important; border: 2px solid #444; }
}

/* ================================================================= HERO ==
   A home abria com um h1 pequeno e quatro caixas — parecia um relatório
   interno. O hero dá o tom editorial e diz em duas linhas o que o portal é. */

.hero {
  position: relative;
  border: 1px solid var(--linha);
  border-radius: calc(var(--raio) * 1.6);
  background:
    radial-gradient(120% 140% at 100% 0%, var(--acento-tenue) 0%, transparent 55%),
    var(--papel);
  box-shadow: var(--sombra-alta);
  padding: clamp(1.75rem, 1rem + 3vw, 3.25rem);
  margin-bottom: 1.75rem;
  overflow: hidden;
}
.hero { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 62rem) {
  .hero { grid-template-columns: 1.1fr .9fr; gap: 3rem; }
}
.hero-texto { min-width: 0; }
.hero h1 {
  font-size: clamp(1.9rem, 1.1rem + 3.2vw, 3.15rem);
  max-width: 20ch; margin-bottom: .75rem;
}
.hero .linha-fina { font-size: clamp(1rem, .95rem + .3vw, 1.15rem); max-width: 58ch; margin-bottom: 0; }
.hero-selo {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .74rem; text-transform: uppercase; letter-spacing: .11em;
  font-weight: 700; color: var(--acento);
  background: var(--acento-tenue); border: 1px solid var(--linha);
  padding: .35rem .75rem; border-radius: 100px; margin-bottom: 1.1rem;
}
.hero-selo::before {
  content: ''; width: .45rem; height: .45rem; border-radius: 50%;
  background: var(--acento); flex: none;
}

/* Números do panorama: são a primeira prova de que o portal tem substância,
   então merecem escala tipográfica de destaque, não de rodapé. */


/* ------------------------------------------------- resultados com foto ---
   A lista era texto puro. Com o retrato oficial ela vira reconhecível de
   relance — e a foto já existia no banco, só não estava sendo usada. */
/* Abaixo de 30rem o número já foi para uma terceira fileira, quando ele era
   texto solto e roubava largura do nome. Virou pastilha estreita na direita e
   não rouba mais — a regra saiu, e com ela os 101px de altura por resultado
   que ela causava no celular. */
@media (max-width: 30rem) {
  .resultados a { column-gap: .6rem; }
  .resultados .n { font-size: .8rem; padding: .15rem .4rem; }
}

/* --------------------------------------------------- ficha do candidato ---
   O retrato ganhou moldura e o bloco superior, fundo próprio: separa a
   identificação do resto sem precisar de mais um traço horizontal. */
.ficha {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: calc(var(--raio) * 1.4);
  box-shadow: var(--sombra);
  padding: clamp(1.25rem, .8rem + 1.5vw, 1.85rem);
  gap: 1.75rem;
}
.ficha img, .ficha .sem-foto { border-radius: var(--raio); }
.etiqueta { background: var(--papel-zebra); }

/* Painel de números dentro do hero: cartões translúcidos sobre o próprio
   fundo do hero, para lerem como um bloco só e não como quatro caixas soltas. */
.painel {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem; margin: 0;
}
.painel > div {
  background: var(--papel-alto);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 1rem 1.1rem;
  min-width: 0;
}
.painel dt {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--tinta-fraca); font-weight: 600; margin-bottom: .3rem;
}
.painel dd {
  margin: 0; font-family: var(--serifa);
  font-size: clamp(1.4rem, 1.05rem + .9vw, 1.95rem); line-height: 1.05;
  letter-spacing: -.02em; white-space: nowrap;
}

/* ------------------------------------------------------------- dobrável */
.dobravel {
  border: 1px solid var(--linha); border-radius: var(--raio);
  background: var(--papel); margin-top: .75rem;
}
.dobravel > summary {
  cursor: pointer; padding: .85rem 1.1rem; font-weight: 600; font-size: .92rem;
  display: flex; align-items: center; gap: .6rem; min-height: var(--alvo);
  list-style: none; border-radius: var(--raio);
  transition: background-color 180ms ease;
}
.dobravel > summary:hover { background: var(--papel-alto); }
.dobravel > summary::-webkit-details-marker { display: none; }
.dobravel > summary::before {
  content: '▸'; color: var(--acento); font-size: .85rem;
  transition: transform 180ms ease; display: inline-block;
}
.dobravel[open] > summary::before { transform: rotate(90deg); }
.dobravel[open] > summary { border-bottom: 1px solid var(--linha); border-radius: var(--raio) var(--raio) 0 0; }
.dobravel-conta {
  margin-left: auto; font-weight: 400; font-size: .82rem; color: var(--tinta-fraca);
}
.dobravel .rolagem { padding: .25rem .35rem .5rem; }
.dobravel table { font-size: .87rem; }

/* Na impressão o conteúdo recolhido tem de sair no papel: a folha de estilo do
   navegador esconde os filhos de um <details> fechado, então forçamos aqui. */
@media print {
  .dobravel { border: 0; }
  .dobravel > summary { display: none; }
  .dobravel > *:not(summary) { display: block !important; }
}

/* ================================================== CHAPAS PRESIDENCIAIS ==
   Treze nomes cabem inteiros na home. Com retrato, vira reconhecimento
   imediato; sem ele seria mais uma lista. */

.chapas {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
  gap: .8rem;
}
.chapas a {
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  text-align: center; padding: 1.15rem .9rem;
  background: var(--papel); border: 1px solid var(--linha);
  border-radius: var(--raio); color: var(--tinta);
  box-shadow: var(--sombra);
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}
.chapas a:hover {
  text-decoration: none; border-color: var(--acento);
  box-shadow: var(--sombra-alta); background: var(--papel-alto);
}
.chapas img, .chapa-sem-foto {
  width: 4.5rem; height: 4.5rem; border-radius: 50%; object-fit: cover;
  object-position: top center; border: 2px solid var(--linha);
  background: var(--papel-zebra);
}
.chapa-nome {
  font-weight: 600; font-size: .95rem; line-height: 1.25;
  /* Reserva duas linhas: nome comprido não pode desalinhar a fileira. */
  min-height: 2.5em; display: flex; align-items: center;
}
.chapa-meta {
  display: flex; align-items: center; gap: .4rem;
  font-size: .78rem; color: var(--tinta-fraca);
}
.chapa-num {
  font-family: var(--mono); font-weight: 600; color: var(--tinta-media);
  background: var(--papel-zebra); border: 1px solid var(--linha);
  border-radius: 4px; padding: 0 .35rem;
}

/* ============================================================== MAPA ==
   Cartograma em blocos: cada estado ocupa a mesma área, então Sergipe não
   some e o Amazonas não domina. O objetivo é achar o seu estado rápido,
   não representar território. */

.mapa {
  display: grid;
  /* Seis colunas: as duas mais a oeste da versão anterior nunca eram usadas
     e deixavam um vão morto ao lado do mapa. */
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .35rem;
  max-width: 34rem;
  margin: .5rem 0 0;
  grid-template-areas:
    ".  .  RR AP .  ."
    ".  AM PA MA CE RN"
    "AC RO TO PI PB PE"
    ".  MT GO BA AL SE"
    ".  MS DF MG ES ."
    ".  PR SP RJ .  ."
    ".  SC .  .  .  ."
    ".  RS .  .  .  .";
}
.mapa-uf {
  grid-area: var(--area);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .1rem; aspect-ratio: 1; min-width: 0; padding: .2rem;
  font: inherit; cursor: pointer;
  border: 1px solid var(--linha); border-radius: 6px;
  background: var(--papel-zebra); color: var(--tinta);
  transition: transform 160ms ease, border-color 160ms ease, filter 160ms ease;
}
.mapa-uf:hover { border-color: var(--acento); filter: brightness(1.18); transform: translateY(-2px); }
.mapa-sigla { font-weight: 700; font-size: .82rem; letter-spacing: .02em; }
.mapa-n { font-size: .68rem; color: var(--tinta-media); font-variant-numeric: tabular-nums; }

.area-AC { --area: AC; } .area-AL { --area: AL; } .area-AP { --area: AP; }
.area-AM { --area: AM; } .area-BA { --area: BA; } .area-CE { --area: CE; }
.area-DF { --area: DF; } .area-ES { --area: ES; } .area-GO { --area: GO; }
.area-MA { --area: MA; } .area-MT { --area: MT; } .area-MS { --area: MS; }
.area-MG { --area: MG; } .area-PA { --area: PA; } .area-PB { --area: PB; }
.area-PR { --area: PR; } .area-PE { --area: PE; } .area-PI { --area: PI; }
.area-RJ { --area: RJ; } .area-RN { --area: RN; } .area-RS { --area: RS; }
.area-RO { --area: RO; } .area-RR { --area: RR; } .area-SC { --area: SC; }
.area-SP { --area: SP; } .area-SE { --area: SE; } .area-TO { --area: TO; }

/* Cinco degraus de contagem. Mesmo matiz, só luminância: quem enxerga em
   escala de cinza continua distinguindo os degraus. */
.nivel-0 { background: color-mix(in srgb, var(--acento) 10%, var(--papel-zebra)); }
.nivel-1 { background: color-mix(in srgb, var(--acento) 26%, var(--papel-zebra)); }
.nivel-2 { background: color-mix(in srgb, var(--acento) 44%, var(--papel-zebra)); }
.nivel-3 { background: color-mix(in srgb, var(--acento) 64%, var(--papel-zebra)); }
.nivel-4 { background: color-mix(in srgb, var(--acento) 86%, var(--papel-zebra)); }
:root:not([data-tema="escuro"]) .nivel-3 .mapa-n,
:root:not([data-tema="escuro"]) .nivel-4 .mapa-n { color: var(--papel); }
:root:not([data-tema="escuro"]) .nivel-4 .mapa-sigla { color: var(--papel); }

@media (max-width: 34rem) {
  .mapa { gap: .25rem; }
  .mapa-n { display: none; }
  .mapa-sigla { font-size: .72rem; }
}

/* Os cartões do panorama recebem gráfico dentro: o título interno precisa
   respirar menos que um h3 solto no corpo da página. */
.grade-3 .cartao h3 { margin-top: 0; margin-bottom: .9rem; font-size: .95rem; }
/* Em cartão estreito o trilho ficava com uns 40px e a barra virava um ponto.
   Aqui o rótulo e o valor dividem a primeira linha e a barra ocupa a segunda
   inteira — mesma informação, comparação legível. */
.grade-3 .cartao .barras { gap: .8rem; }
.grade-3 .cartao .barras li {
  grid-template-columns: 1fr auto;
  gap: .25rem .6rem;
}
.grade-3 .cartao .barras-nome { grid-column: 1; white-space: normal; }
.grade-3 .cartao .barras-valor { grid-column: 2; }
.grade-3 .cartao .barras-trilho { grid-column: 1 / -1; height: .7rem; }

/* Mesma troca em telas estreitas, onde qualquer barra lado a lado sofre. */
@media (max-width: 34rem) {
  .barras li { grid-template-columns: 1fr auto; gap: .25rem .6rem; }
  .barras-nome { grid-column: 1; white-space: normal; }
  .barras-valor { grid-column: 2; }
  .barras-trilho { grid-column: 1 / -1; height: .7rem; }
}

@media print { .mapa, .chapas a { box-shadow: none; } }

/* Valor cheio embaixo do abreviado. Num portal de transparência, "R$ 150,0 mi"
   sem o número exato à vista é o tipo de arredondamento que faz o leitor
   duvidar do dado — e duvidar do portal junto. */
.numero-exato {
  display: block; margin-top: .3rem;
  font-size: .78rem; color: var(--tinta-fraca);
  font-variant-numeric: tabular-nums;
}

/* ====================================================== HERO CINEMÁTICO ==
   Fundo full-bleed com o campo de candidaturas desenhado em canvas, texto
   display grande por cima e uma linha de anotação técnica em monoespaçada.
   Referência: páginas de produto cinematográficas — só que aqui a imagem de
   fundo é o próprio conjunto de dados, não fotografia nem arte gerada, porque
   um portal de transparência não pode ilustrar com coisa inventada. */

/* O ponto agora vive DENTRO do painel violeta do herói, então é branco. Ficou
   azul por um tempo: era a cor da paleta anterior, e sobre o violeta dava um
   roxo sujo. */
:root { --campo-ponto: rgba(255, 255, 255, .92); }
:root[data-tema="escuro"] { --campo-ponto: rgba(255, 255, 255, .92); }

.hero {
  position: relative;
  isolation: isolate;
  display: block;
  padding: clamp(2.75rem, 1.5rem + 5vw, 5.5rem) clamp(1.5rem, 1rem + 3vw, 3.5rem);
  min-height: clamp(24rem, 20rem + 18vw, 34rem);
  overflow: hidden;
}
.hero-campo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: -2; display: block;
}
/* Véu entre o campo e o texto: garante o contraste do título sem escurecer
   tanto a ponto de matar os pontos. */
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(90% 75% at 12% 18%,
      color-mix(in srgb, var(--papel) 88%, transparent) 0%,
      color-mix(in srgb, var(--papel) 55%, transparent) 45%,
      transparent 78%);
}
.hero-conteudo {
  position: relative; display: grid; gap: 2.25rem; align-items: center;
}
@media (min-width: 62rem) {
  .hero-conteudo { grid-template-columns: 1.15fr .85fr; gap: 3.5rem; }
}

.hero h1 {
  font-size: clamp(2.4rem, 1.2rem + 5.2vw, 4.6rem);
  line-height: .98;
  letter-spacing: -.035em;
  max-width: none;
  margin-bottom: 1.1rem;
  text-wrap: balance;
}
.hero h1 em {
  font-style: italic;
  color: var(--acento);
  /* O itálico da Libre Bodoni é o contraponto que o vídeo usa: uma palavra
     em voz diferente no meio do bloco display. */
}
.hero .linha-fina { max-width: 46ch; margin-bottom: 1.4rem; }

.hero-nota {
  display: flex; flex-wrap: wrap; gap: .5rem .7rem; margin: 0;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--tinta-fraca);
}
.hero-nota span[aria-hidden] { opacity: .5; }

.hero .painel > div {
  background: color-mix(in srgb, var(--papel) 78%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

@media print {
  .hero { min-height: 0; padding: 0 0 1rem; }
  .hero-campo, .hero::after { display: none; }
}

/* ===================================================== MAPA GEOGRÁFICO ==
   Malha do IBGE convertida em SVG por site/baixar_mapa.py. Cada estado é um
   <path> clicável e focalizável; a ficha ao lado é preenchida em JavaScript a
   partir de um dicionário embutido na página — sem requisição por clique. */

.mapa-painel {
  display: grid; gap: 1.5rem; align-items: start; margin-top: .5rem;
}
@media (min-width: 56rem) {
  .mapa-painel { grid-template-columns: minmax(0, 1.3fr) minmax(19rem, .7fr); gap: 2.25rem; }
}
.mapa-palco { position: relative; min-width: 0; }

.mapa-br { width: 100%; height: auto; display: block; overflow: visible; }
.mapa-br path {
  fill: var(--papel-zebra);
  stroke: var(--papel-fundo);
  stroke-width: 1.6;
  stroke-linejoin: round;
  cursor: pointer;
  transition: fill 160ms ease, filter 160ms ease;
}
.mapa-br path:hover { filter: brightness(1.25); }
.mapa-br path:focus-visible {
  outline: none;
  stroke: var(--foco); stroke-width: 3.5;
}
.mapa-br path.ativo {
  stroke: var(--tinta); stroke-width: 3;
  filter: brightness(1.3);
}
/* Mesma escala de intensidade dos blocos: só luminância, um matiz só. */
.mapa-br path.nivel-0 { fill: color-mix(in srgb, var(--acento) 12%, var(--papel-zebra)); }
.mapa-br path.nivel-1 { fill: color-mix(in srgb, var(--acento) 28%, var(--papel-zebra)); }
.mapa-br path.nivel-2 { fill: color-mix(in srgb, var(--acento) 46%, var(--papel-zebra)); }
.mapa-br path.nivel-3 { fill: color-mix(in srgb, var(--acento) 66%, var(--papel-zebra)); }
.mapa-br path.nivel-4 { fill: color-mix(in srgb, var(--acento) 88%, var(--papel-zebra)); }

.mapa-dica {
  position: absolute; left: 0; bottom: 0; margin: 0;
  font-size: .82rem; color: var(--tinta-fraca);
}

.mapa-escala {
  display: flex; align-items: center; gap: .35rem; margin-top: .9rem;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--tinta-fraca);
}
.mapa-escala i {
  width: 1.6rem; height: .55rem; border-radius: 2px; display: inline-block;
  border: 1px solid var(--linha);
}
.mapa-escala span:last-child { margin-left: .15rem; }

/* ------------------------------------------------------------- a ficha --- */
.mapa-ficha {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: calc(var(--raio) * 1.3);
  box-shadow: var(--sombra);
  padding: 1.4rem 1.5rem;
  position: sticky; top: 5rem;
}
.mapa-ficha h3 {
  margin: 0 0 1rem; font-family: var(--serifa); font-weight: 600;
  font-size: 1.5rem; letter-spacing: -.02em;
  display: flex; align-items: baseline; gap: .6rem;
}
.mapa-sigla-ficha {
  font-family: var(--mono); font-size: .75rem; font-weight: 600;
  color: var(--tinta-fraca); background: var(--papel-zebra);
  border: 1px solid var(--linha); border-radius: 4px; padding: .1rem .4rem;
}
.mapa-ficha h4 {
  margin: 1.35rem 0 .55rem; font-size: .74rem; text-transform: uppercase;
  letter-spacing: .07em; color: var(--tinta-fraca); font-weight: 700;
}
.mapa-numeros {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem 1rem; margin: 0;
}
.mapa-numeros dt {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tinta-fraca); font-weight: 600;
}
.mapa-numeros dd {
  margin: .15rem 0 0; font-family: var(--serifa); font-size: 1.35rem;
  line-height: 1.1; letter-spacing: -.02em; white-space: nowrap;
}
.mapa-cargos { list-style: none; margin: 0; padding: 0; }
.mapa-cargos li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .4rem 0; border-bottom: 1px solid var(--linha);
  font-size: .9rem;
}
.mapa-cargos li:last-child { border-bottom: 0; }
.mapa-cargos b { font-variant-numeric: tabular-nums; }
.mapa-acao {
  margin-top: 1.2rem; width: 100%; min-height: var(--alvo);
  font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
  color: var(--papel); background: var(--acento);
  border: 1px solid var(--acento); border-radius: var(--raio);
  padding: .7rem 1rem;
  transition: filter 180ms ease;
}
.mapa-acao:hover { filter: brightness(1.12); }
.mapa-vazio { margin: 0; color: var(--tinta-fraca); font-style: italic; font-size: .92rem; }

@media print {
  .mapa-painel { grid-template-columns: 1fr; }
  .mapa-ficha, .mapa-acao, .mapa-dica { display: none; }
}

/* ================================================== AJUSTES DE TELA MÉDIA ==
   A faixa entre 46rem e 62rem — tablet deitado, celular em modo "site para
   computador", janela de navegador reduzida — era a que estava pior. Testar
   só 375, 768 e 1440 deixou justamente ela de fora. */

/* Cartões de número: em faixa estreita o CNPJ em monoespaçada estourava o
   cartão. Quebra e encolhe em vez de vazar. */
.numero-curto { font-size: .95rem; overflow-wrap: anywhere; white-space: normal; }
.cartao .numero { overflow-wrap: anywhere; }

/* Cartões do panorama não esticam mais para a altura do mais alto: um cartão
   com duas barras parecia quebrado ao lado de um com dez. */
.grade-3, .grade-fixa, .grade-4 { align-items: start; }

/* Índice do candidato: quando cola no topo, ganha sombra para o conteúdo que
   passa por baixo parecer camada, e não recorte. */
.indice {
  box-shadow: var(--sombra);
  padding: .45rem .55rem;
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: thin;
}
.indice a { flex: none; }

/* Navegação: em vez de quebrar em duas linhas por cima da marca, vira uma
   faixa que rola na horizontal — o padrão que a base de UX recomenda para
   navegação que não cabe. */
@media (max-width: 52rem) {
  .topo .envelope {
    flex-wrap: nowrap; gap: .75rem;
    align-items: center; min-height: 3.25rem;
  }
  .marca { font-size: 1rem; flex: none; }
  .topo nav {
    overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
    margin-left: auto; gap: .1rem;
  }
  .topo nav::-webkit-scrollbar { display: none; }
  .topo nav a { flex: none; padding: .5rem .5rem; font-size: .82rem; }
}
@media (max-width: 30rem) {
  .marca span { display: none; }   /* o ano cabe no título da página */
}

/* Mapa: abaixo de 56rem a ficha vem depois do mapa. Sem altura mínima ela
   ficava como uma caixa vazia e alta esperando clique. */
@media (max-width: 56rem) {
  .mapa-ficha { position: static; }
  .mapa-dica { position: static; margin-top: .6rem; }
}

/* Estado inicial da ficha: em vez de "nenhum estado selecionado", mostra o
   país. A caixa nasce útil e o clique só troca o recorte. */
.mapa-vazio { font-style: normal; color: inherit; }
.mapa-vazio h3 {
  margin: 0 0 1rem; font-family: var(--serifa); font-weight: 600;
  font-size: 1.5rem; letter-spacing: -.02em;
}
.mapa-vazio p {
  margin: 1.1rem 0 0; font-size: .88rem; color: var(--tinta-fraca);
}

/* ================================================ CABEÇALHO DE PERFIL ==
   A página de candidato é 99,98% do portal e era a menos desenhada: uma ficha
   discreta e, logo abaixo, dez listas de definição. Agora o topo responde de
   cara as três perguntas que levam alguém até ali — quanto tem, quanto
   arrecadou, quanto do teto comprometeu — e o resto vira aprofundamento. */

.perfil {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: auto 1fr;
  align-items: start;
  background:
    radial-gradient(120% 150% at 100% 0%, var(--acento-tenue) 0%, transparent 60%),
    var(--papel);
  border: 1px solid var(--linha);
  border-radius: calc(var(--raio) * 1.5);
  box-shadow: var(--sombra-alta);
  padding: clamp(1.25rem, .9rem + 1.6vw, 2.25rem);
}
@media (min-width: 62rem) {
  .perfil { grid-template-columns: auto minmax(0, 1fr) auto; gap: 2.25rem; }
}

.perfil-retrato img, .perfil-retrato .sem-foto {
  width: clamp(5.5rem, 4rem + 6vw, 9.5rem);
  aspect-ratio: 3 / 4; height: auto; object-fit: cover; object-position: top center;
  border-radius: var(--raio); border: 1px solid var(--linha);
  background: var(--papel-zebra); display: block;
}
.perfil-retrato .sem-foto {
  display: grid; place-items: center; text-align: center; padding: .5rem;
  border-style: dashed; color: var(--tinta-fraca); font-size: .74rem;
}

.perfil-identidade { min-width: 0; }
.perfil-cargo {
  margin: 0 0 .35rem; font-family: var(--mono); font-size: .72rem;
  text-transform: uppercase; letter-spacing: .1em; color: var(--acento);
  font-weight: 600;
}
.perfil h1 {
  font-size: clamp(1.9rem, 1.2rem + 3vw, 3.1rem);
  line-height: 1; letter-spacing: -.03em; margin: 0 0 .35rem;
  overflow-wrap: anywhere;
}
.perfil-nome {
  margin: 0 0 .75rem; color: var(--tinta-media); font-size: 1rem;
}
.perfil-legenda {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  margin: 0 0 .9rem; font-size: .92rem; color: var(--tinta-media);
}
.perfil .etiquetas { margin: 0; }

/* Os três números ficam numa coluna própria em tela larga e viram faixa
   embaixo em tela estreita — nunca espremidos ao lado do nome. */
.perfil-numeros {
  grid-column: 1 / -1; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1rem; padding-top: 1.25rem; border-top: 1px solid var(--linha);
}
@media (min-width: 62rem) {
  .perfil-numeros {
    grid-column: 3; grid-row: 1; grid-template-columns: 1fr;
    gap: 1.1rem; padding-top: 0; border-top: 0;
    border-left: 1px solid var(--linha); padding-left: 2.25rem;
    min-width: 13rem;
  }
}
.perfil-numeros dt {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--tinta-fraca); font-weight: 700; margin-bottom: .2rem;
}
.perfil-numeros dd {
  margin: 0; font-family: var(--serifa);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1;
  letter-spacing: -.025em; white-space: nowrap;
}
.perfil-numeros .perfil-exato {
  font-family: var(--sans); font-size: .74rem; color: var(--tinta-fraca);
  margin-top: .3rem; letter-spacing: 0; white-space: normal;
}

/* ------------------------------------------------- seções numeradas ---
   Dez rótulos cinzentos idênticos descendo a página não dão orientação
   nenhuma. Numerados, viram sumário de dossiê: dá para saber onde se está. */
article { counter-reset: secao; }
article h2 {
  display: flex; align-items: baseline; gap: .7rem;
}
article h2::before {
  counter-increment: secao;
  content: counter(secao, decimal-leading-zero);
  font-family: var(--mono); font-size: .78rem; font-weight: 700;
  color: var(--acento); letter-spacing: 0;
  border: 1px solid var(--linha-forte); border-radius: 4px;
  padding: .05rem .35rem; flex: none;
}

@media print {
  .perfil { box-shadow: none; background: none; }
  article h2::before { border: 0; padding: 0; }
}

/* ================================================================ MARCA ==
   Símbolo e assinatura. O símbolo repete a malha de pontos do fundo do hero,
   com a diagonal acesa: o dado disperso que passa a deixar ver. É a única
   peça gráfica do portal que não vem de fonte oficial, então não representa
   nem urna nem instituição — é sinal de sistema, não brasão. */

.marca {
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: var(--alvo); color: var(--tinta); flex: none;
}
.marca:hover { text-decoration: none; }
.marca:hover .marca-nome { text-decoration: underline; text-underline-offset: 3px; }

.marca-simbolo { width: 1.85rem; height: 1.85rem; flex: none; display: block; }
.marca-caixa { fill: var(--acento); }
.marca-viva  { fill: var(--papel); }
.marca-fraca { fill: var(--papel); opacity: .3; }
/* No claro o azul é escuro e os pontos saem brancos; no escuro o azul é claro
   e os pontos precisam ser escuros para não sumirem. --papel já vira o oposto
   em cada tema, então a mesma regra serve para os dois. */

.marca-texto { display: flex; align-items: baseline; gap: .4rem; min-width: 0; }
.marca-nome {
  font-family: var(--serifa); font-size: 1.08rem; font-weight: 600;
  letter-spacing: -.015em; line-height: 1.1;
}
.marca-ano {
  font-family: var(--mono); font-size: .68rem; font-weight: 600;
  letter-spacing: .06em; color: var(--tinta-fraca);
  border-left: 1px solid var(--linha-forte); padding-left: .4rem;
  align-self: center;
}

@media (max-width: 52rem) {
  .marca-simbolo { width: 1.6rem; height: 1.6rem; }
  .marca-nome { font-size: .95rem; }
}
@media (max-width: 30rem) {
  /* Em tela muito estreita fica só o símbolo: o nome está no título da aba. */
  .marca-texto { display: none; }
}

/* ============================================== MOVIMENTO DE ENTRADA ==
   Regra da base de UI: um ou dois elementos por tela, nunca tudo, e só
   transform/opacity. Aqui são a barra que cresce e o número que conta.

   Tudo abaixo depende da classe .animar, que só entra no <html> via
   JavaScript quando o movimento é permitido. Sem JS, sem o arquivo, ou com
   prefers-reduced-motion: nada disso existe e o conteúdo aparece pronto. */

.animar .barras-preenchimento {
  transform: scaleX(0); transform-origin: left center;
  transition: transform 720ms cubic-bezier(.2, .7, .2, 1);
}
.animar .barras.visivel .barras-preenchimento { transform: scaleX(1); }
/* Escalona a partida: as barras entram em cascata curta em vez de todas de
   uma vez, o que lê como uma lista sendo preenchida, não como um piscar. */
.animar .barras li:nth-child(1) .barras-preenchimento { transition-delay: 0ms; }
.animar .barras li:nth-child(2) .barras-preenchimento { transition-delay: 45ms; }
.animar .barras li:nth-child(3) .barras-preenchimento { transition-delay: 90ms; }
.animar .barras li:nth-child(4) .barras-preenchimento { transition-delay: 135ms; }
.animar .barras li:nth-child(5) .barras-preenchimento { transition-delay: 180ms; }
.animar .barras li:nth-child(n+6) .barras-preenchimento { transition-delay: 215ms; }

.animar .empilhada-parte {
  transform: scaleX(0); transform-origin: left center;
  transition: transform 640ms cubic-bezier(.2, .7, .2, 1);
}
.animar .empilhada.visivel .empilhada-parte { transform: scaleX(1); }

/* ------------------------------------------------ transição de página ---
   Uma regra só: remove o pisco branco entre páginas nos navegadores que
   suportam, e é ignorada silenciosamente nos que não. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ------------------------------------------------------- esqueleto ---
   O índice de busca tem 690 KB comprimidos. Em rede ruim havia uma linha de
   texto e nada mais; agora o formato da lista aparece antes do conteúdo. */
/* O esqueleto de carregamento imita a lista pronta; se ele continuar em linha
   crua enquanto o resultado vira cartão, a página dá um solavanco na troca. */
.esqueleto { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.esqueleto li {
  display: grid; grid-template-columns: 3rem 1fr auto;
  gap: .2rem .85rem; align-items: center;
  padding: .7rem .9rem; min-height: 4.25rem;
  border: 1px solid var(--linha); border-radius: var(--raio);
  background: var(--papel);
}
.esqueleto span {
  display: block; border-radius: 100px; background: var(--papel-zebra);
  height: .7rem;
}
.esqueleto .e-foto { width: 3rem; height: 3rem; border-radius: 14px; }
.esqueleto .e-num { width: 2.5rem; }
.esqueleto .e-corpo { display: grid; gap: .4rem; }
.esqueleto .e-nome { width: 42%; }
.esqueleto .e-meta { width: 62%; height: .6rem; }
.animar .esqueleto span { animation: pulsar 1.4s ease-in-out infinite; }
@keyframes pulsar { 0%, 100% { opacity: 1 } 50% { opacity: .45 } }

/* ================================================== FICHAS DE DADO ==
   Era uma grade corrida de rótulo/valor — a última coisa com cara de planilha
   na página. Vira ficha: etiqueta miúda em monoespaçada, valor com peso, fundo
   próprio e ar em volta. Mesma informação, densidade parecida, leitura outra.
   Sem borda, só um fundo levíssimo: doze caixas contornadas viraria xadrez. */

dl.dados {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
  gap: .6rem; margin: 0;
}
dl.dados > div {
  background: var(--papel);
  border-radius: var(--raio);
  padding: .85rem 1rem;
  min-width: 0;
  border: 1px solid transparent;
  transition: border-color 180ms ease, background-color 180ms ease;
}
dl.dados > div:hover { border-color: var(--linha); background: var(--papel-alto); }
dl.dados dt {
  font-family: var(--mono); font-size: .66rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .09em;
  color: var(--tinta-fraca); margin-bottom: .3rem;
}
dl.dados dd {
  margin: 0; font-size: 1rem; font-weight: 500; line-height: 1.35;
  overflow-wrap: anywhere;
}
dl.dados .largo { grid-column: 1 / -1; }
dl.dados .largo dd { font-weight: 400; font-size: .94rem; color: var(--tinta-media); }

/* Botão-pílula com seta, como nas páginas de produto que servem de referência:
   a seta diz que leva a algum lugar, o formato diz que é a ação principal. */
.mapa-acao {
  border-radius: 100px;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
}
.mapa-acao::after {
  content: '→'; font-size: 1.05em; line-height: 1;
  transition: transform 180ms ease;
}
.mapa-acao:hover::after { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .mapa-acao:hover::after { transform: none; }
}

/* Número de processo tem 20 dígitos e a classe .num impede quebra — dentro da
   ficha ele vazava. Aqui a quebra é permitida e o tamanho cede um pouco. */
dl.dados dd.num {
  white-space: normal; overflow-wrap: anywhere; text-align: left;
  font-family: var(--mono); font-size: .88rem; font-weight: 400;
}

/* ==================================================== BUSCA E FILTROS ==
   O <select> nativo era o que mais denunciava improviso: cada sistema desenha
   o seu e nenhum combina com a página. A base de UI diz para não usar. Aqui
   ele continua no HTML — sem JavaScript a busca funciona — mas fica escondido
   assim que busca.js monta a interface própria por cima. */

.seletor-oculto { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ------------------------------------------------------- campo de busca */
.busca-rica { position: relative; }
.busca-rica input {
  padding-left: 3rem; padding-right: 3rem;
  border-radius: 100px;
  background: var(--papel);
  border: 1px solid var(--linha-forte);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.busca-rica input:hover { border-color: var(--acento); }
.busca-rica input:focus {
  border-color: var(--acento);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 18%, transparent);
}
.busca-icone {
  position: absolute; left: 1.1rem; bottom: .92rem;
  width: 1.15rem; height: 1.15rem; color: var(--tinta-fraca);
  pointer-events: none;
}
.busca-limpar {
  position: absolute; right: .55rem; bottom: .5rem;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  border: 0; background: transparent; color: var(--tinta-fraca);
  transition: background-color 160ms ease, color 160ms ease;
}
.busca-limpar:hover { background: var(--papel-zebra); color: var(--tinta); }
.busca-limpar svg { width: 1rem; height: 1rem; }

/* ------------------------------------------------- cargo em pastilhas --- */
.pastilhas { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1rem; }
.pastilha {
  font: inherit; font-size: .85rem; font-weight: 500; cursor: pointer;
  padding: .5rem .9rem; min-height: var(--alvo);
  border-radius: 100px; border: 1px solid var(--linha-forte);
  background: var(--papel); color: var(--tinta-media);
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.pastilha:hover { border-color: var(--acento); color: var(--tinta); }
.pastilha[aria-pressed="true"] {
  background: var(--acento); border-color: var(--acento);
  color: var(--papel); font-weight: 600;
}

/* ---------------------------------------------------- seletor próprio --- */
.seletor { position: relative; }
.seletor-gatilho {
  font: inherit; font-size: .92rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: .6rem; width: 100%; min-width: 9rem; min-height: var(--alvo);
  padding: .5rem .75rem .5rem .95rem;
  border-radius: 100px; border: 1px solid var(--linha-forte);
  background: var(--papel); color: var(--tinta-media);
  transition: border-color 160ms ease, color 160ms ease;
}
.seletor-gatilho:hover { border-color: var(--acento); color: var(--tinta); }
.seletor-gatilho.tem-valor {
  border-color: var(--acento); color: var(--tinta); font-weight: 600;
  background: var(--acento-tenue);
}
.seletor-seta { width: 1rem; height: 1rem; flex: none; transition: transform 180ms ease; }
.seletor-gatilho[aria-expanded="true"] .seletor-seta { transform: rotate(180deg); }

.seletor-menu {
  position: absolute; z-index: 30; top: calc(100% + .35rem); left: 0;
  min-width: 100%; width: max-content; max-width: min(20rem, 78vw);
  background: var(--papel); border: 1px solid var(--linha-forte);
  border-radius: var(--raio); box-shadow: var(--sombra-alta);
  padding: .35rem; overflow: hidden;
}
.seletor-filtro {
  font: inherit; font-size: .88rem; width: 100%;
  padding: .5rem .65rem; margin-bottom: .3rem;
  border: 1px solid var(--linha); border-radius: 6px;
  background: var(--papel-zebra); color: var(--tinta);
}
.seletor-lista {
  list-style: none; margin: 0; padding: 0;
  max-height: 16rem; overflow-y: auto; scrollbar-width: thin;
}
.seletor-lista li {
  padding: .5rem .7rem; border-radius: 6px; cursor: pointer;
  font-size: .9rem; white-space: nowrap;
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
}
.seletor-lista li:hover, .seletor-lista li:focus {
  background: var(--acento-tenue); outline: none;
}
.seletor-lista li:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; }
.seletor-lista li[aria-selected="true"] { font-weight: 600; color: var(--acento); }
.seletor-lista li[aria-selected="true"]::after { content: '✓'; font-size: .85em; }

/* Numa linha só no desktop: a busca era uma coluna alta de campo, três
   seletores e rótulos, ocupando meia tela antes do primeiro resultado. */
@media (min-width: 48rem) {
  .filtros { gap: .6rem; }
  .filtros .campo { min-width: 0; }
}

/* ============================================ PÁGINAS DE TEXTO ==
   Coluna estreita: texto corrido em 76rem de largura é ilegível. A base de
   tipografia recomenda 65 a 75 caracteres por linha. */

.texto { max-width: 46rem; }
.texto-topo { margin-bottom: 2.5rem; }
.texto-sobrancelha {
  margin: 0 0 .5rem; font-family: var(--mono); font-size: .72rem;
  text-transform: uppercase; letter-spacing: .11em; color: var(--acento);
  font-weight: 600;
}
.texto h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); letter-spacing: -.03em; }
.texto h2 {
  display: block; font-family: var(--serifa); font-size: 1.45rem;
  text-transform: none; letter-spacing: -.015em; font-weight: 600;
  color: var(--tinta); border-bottom: 0; padding-bottom: 0;
  margin: 2.75rem 0 .75rem;
}
.texto h2::before { content: none; }
.texto h3 { font-size: 1.02rem; margin-top: 0; }
.texto p { max-width: 68ch; line-height: 1.65; }
.texto ul { max-width: 68ch; line-height: 1.65; padding-left: 1.15rem; }
.texto li { margin-bottom: .5rem; }
.texto .grade { margin: 1.25rem 0; }
.texto .cartao p { margin: 0; font-size: .93rem; color: var(--tinta-media); }
.texto code {
  font-family: var(--mono); font-size: .88em;
  background: var(--papel-zebra); border: 1px solid var(--linha);
  border-radius: 4px; padding: .05rem .3rem;
}

/* Botão de apoio no cabeçalho: é ação, não navegação, então se destaca dos
   demais itens sem virar anúncio. */
.topo-apoie {
  background: var(--acento); color: var(--papel) !important;
  font-weight: 600; padding: .5rem 1rem !important; border-radius: 100px;
  margin-left: .35rem;
}
.topo-apoie:hover { filter: brightness(1.12); background: var(--acento); }
/* A regra genérica .topo nav a[aria-current] é mais específica e apagava o
   destaque do botão na própria página de doações. */
.topo nav a.topo-apoie[aria-current] {
  background: var(--acento-claro); color: var(--papel);
}

.rodape-links {
  display: flex; flex-wrap: wrap; gap: .35rem 1.25rem;
  margin-top: 1.5rem; padding-top: 1.25rem;
  border-top: 1px solid var(--linha); font-size: .85rem;
}
.rodape-links a { color: var(--tinta-media); }
.rodape-links a:hover { color: var(--acento); }

/* ==================================================================
   CAMADA FINTECH
   A direção escolhida (E), aplicada por cima da estrutura existente.
   Fica no fim da folha de propósito: acima decide-se layout, aqui só
   aparência.

   O vocabulário, em três regras:
   1. TUDO FLUTUA. Cartão branco sobre fundo lilás, canto muito
      arredondado, sombra difusa tingida de violeta. Nada é recortado
      no fundo — cada bloco paira sobre ele.
   2. VIOLETA EM DEGRADÊ marca a ação e o destaque, nunca o texto
      corrido. Sobre violeta o texto é branco em peso 600+, que é onde
      esse estilo costuma falhar em contraste.
   3. PÍLULA para navegação e botão; retângulo arredondado para
      conteúdo. A forma diz se é para clicar ou para ler.
   ================================================================== */

/* ------------------------------------------------------- barra de topo
   Pílula branca flutuando sobre o lilás, como na referência. */
.topo {
  background: transparent;
  border-bottom: 0;
  position: sticky; top: 0; z-index: 60;
  padding: .85rem 0 .35rem;
}
.topo::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(var(--papel-fundo) 62%, transparent);
}
.topo .envelope {
  background: var(--papel);
  border-radius: 100px;
  box-shadow: var(--sombra);
  padding: .5rem .5rem .5rem 1.25rem;
}
.topo nav a {
  border-radius: 100px; font-weight: 600;
  min-height: var(--alvo); display: inline-flex; align-items: center;
}
.topo nav a:hover, .topo nav a:focus-visible {
  background: var(--acento-tenue); color: var(--acento);
}
.topo nav a[aria-current] { color: var(--acento); }
.topo-apoie {
  background: var(--degrade) !important; color: #fff !important;
  border-radius: 100px !important; font-weight: 700 !important;
  padding: 0 1.35rem !important;
  box-shadow: 0 8px 20px -6px rgba(109,40,217,.55);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.topo-apoie:hover { transform: translateY(-2px); color: #fff !important; }

/* ------------------------------------------------------- tipografia */
h1, h2, h3, .marca-nome, .hero-texto h1, .perfil-identidade h1 {
  font-family: var(--serifa);   /* Outfit */
  font-weight: 700;
  letter-spacing: -.028em;
  text-wrap: balance;
}
h1 { font-weight: 800; letter-spacing: -.034em; }
/* Sobrancelha de seção: violeta, caixa alta, com o pontinho da referência. */
.texto-sobrancelha, .hero-selo {
  color: var(--acento); font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; display: inline-flex; align-items: center; gap: .55rem;
}
.texto-sobrancelha::before, .hero-selo::before {
  content: ''; width: .55rem; height: .55rem; border-radius: 50%;
  border: 2.5px solid var(--acento); flex: none;
}

/* ------------------------------------------------------- peças que flutuam */
.cartao, .painel, .mapa-painel, .aviso, .propostas li, .dobravel,
.hero-campo, .mapa-ficha, .filtros, .rolagem {
  border-radius: var(--raio-g);
  border: 1px solid var(--linha);
  box-shadow: var(--sombra);
  background: var(--papel);
}
.cartao, .mapa-ficha {
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.cartao:hover, .mapa-ficha:hover {
  transform: translateY(-5px); box-shadow: var(--sombra-alta);
}
.propostas li { border-left: 4px solid var(--acento-claro); }
.propostas-antigas li { border-left-color: var(--linha-forte); background: var(--papel-alto); }
.aviso { border-left: 5px solid var(--acento); }

/* ------------------------------------------------------- ícone em círculo
   O elemento mais característico da referência: quadrado arredondado com
   degradê violeta e ícone branco. */
.ico-circulo {
  width: 3.25rem; height: 3.25rem; border-radius: 18px;
  display: grid; place-items: center; flex: none;
  background: var(--degrade); color: #fff;
  box-shadow: 0 8px 18px -6px rgba(109,40,217,.5);
}

/* ------------------------------------------------------- botões */
.botao, .topo-apoie {
  border-radius: 100px;
}
.botao {
  background: var(--degrade); color: #fff;
  border: 0; font-weight: 700;
  box-shadow: 0 8px 20px -6px rgba(109,40,217,.55);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.botao:hover {
  color: #fff; transform: translateY(-2px);
  box-shadow: 0 12px 26px -6px rgba(109,40,217,.6);
}
.botao:active { transform: translateY(0); }

/* ------------------------------------------------------- campos */
input[type="search"], input[type="text"], input[type="email"], select {
  border-radius: 100px;
  border: 1px solid var(--linha-forte);
  background: var(--papel);
  min-height: var(--alvo);
}
input:focus-visible, select:focus-visible {
  outline: 3px solid var(--foco); outline-offset: 2px;
}

/* ------------------------------------------------------- etiquetas */
.etiqueta {
  border-radius: 100px; border: 1px solid var(--linha-forte);
  background: var(--papel); font-weight: 600;
  min-height: var(--alvo); display: inline-flex; align-items: center;
}
.etiqueta-ok { background: var(--acento-tenue); color: var(--acento);
  border-color: transparent; }
.etiqueta-atencao { background: #FEF0E8; color: var(--alerta);
  border-color: transparent; }
.etiqueta:has(a) { padding: 0; border-color: var(--acento); }
.etiqueta a {
  color: var(--acento); font-weight: 700; text-decoration: none;
  min-height: var(--alvo); display: inline-flex; align-items: center;
  padding: 0 .8rem;
}

/* ------------------------------------------------------- tabelas
   Conteúdo denso continua sóbrio: o violeta entra só no cabeçalho. */
.rolagem { overflow: hidden; }
.rolagem table { border-radius: 0; }
th {
  background: var(--acento-tenue); color: var(--acento);
  text-transform: uppercase; letter-spacing: .06em;
  font-size: .74rem; font-weight: 700;
  border-bottom: 1px solid var(--linha);
}
tbody tr:nth-child(even) { background: var(--papel-alto); }

/* ------------------------------------------------------- alvo de toque
   Vale para navegação; não para link dentro de frase, onde forçar altura
   arrebentaria a entrelinha do parágrafo. */
.indice a, .rodape-links a {
  display: inline-flex; align-items: center; min-height: var(--alvo);
}
.indice a {
  border-radius: 100px; border: 1px solid var(--linha);
  background: var(--papel); padding: 0 .9rem; font-weight: 600;
}
.indice a:hover { background: var(--acento-tenue); color: var(--acento); }
.rodape-links a { padding: 0 .35rem; }

/* ------------------------------------------------------- entrada encenada */
@keyframes sobe { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.hero-texto > *, .painel, .mapa-palco {
  animation: sobe .55s cubic-bezier(.2,.75,.3,1) backwards;
}
.hero-texto > *:nth-child(1) { animation-delay: .02s; }
.hero-texto > *:nth-child(2) { animation-delay: .1s; }
.hero-texto > *:nth-child(3) { animation-delay: .18s; }
.hero-texto > *:nth-child(4) { animation-delay: .26s; }
.painel { animation-delay: .3s; }
.mapa-palco { animation-delay: .36s; }

@media (prefers-reduced-motion: reduce) {
  .hero-texto > *, .painel, .mapa-palco { animation: none; }
  .cartao, .mapa-ficha, .botao, .topo-apoie { transition: none; }
  .cartao:hover, .mapa-ficha:hover, .botao:hover, .topo-apoie:hover { transform: none; }
}

/* ------------------------------------------------------- número de urna
   Continua sendo o dado que identifica a candidatura na hora de votar, então
   mantém tratamento próprio: monoespaçado, tinta escura, pastilha. Aqui ela é
   arredondada e sem contorno, para pertencer a esta direção. */
.urna {
  font-family: var(--mono); font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: .04em;
  background: var(--tinta); color: var(--papel);
  border: 0; border-radius: 10px;
  padding: .12rem .5rem;
}
.perfil-legenda .urna { font-size: 1.25rem; padding: .22rem .7rem; border-radius: 12px; }
td .urna { font-size: .8rem; padding: .05rem .4rem; border-radius: 8px; }
td .meta {
  display: block; font-size: .78rem; color: var(--tinta-fraca); margin-top: .15rem;
}

/* Coluna "No TSE" do histórico: é ação, não texto — ganha alvo de toque
   inteiro e forma de pastilha, como os demais controles desta direção. */
.link-ficha {
  display: inline-flex; align-items: center; min-height: var(--alvo);
  padding: 0 .75rem; border-radius: 100px;
  background: var(--acento-tenue); color: var(--acento);
  font-weight: 600; text-decoration: none; white-space: nowrap;
}
.link-ficha:hover { background: var(--acento); color: #fff; }

/* ==================================================================
   SANFONA POR SEÇÃO (montada por secoes.js)
   Sem JavaScript nada disto existe e a página segue como sempre foi:
   tudo aberto, em ordem. Por isso as regras vivem em .secao, que só
   aparece depois do agrupamento.
   ================================================================== */
details.secao {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra);
  margin: 0 0 .9rem;
  overflow: hidden;
  scroll-margin-top: 5.5rem;
}
details.secao > summary {
  display: flex; align-items: center; gap: .75rem;
  padding: 1rem 1.15rem;
  min-height: var(--alvo);
  cursor: pointer;
  list-style: none;               /* tira o triângulo padrão… */
  -webkit-tap-highlight-color: transparent;
}
details.secao > summary::-webkit-details-marker { display: none; }  /* …no Safari também */
details.secao > summary h2 {
  margin: 0; font-size: 1.15rem; border: 0; padding: 0; flex: 1;
  scroll-margin-top: 5.5rem;
}
details.secao > summary:hover { background: var(--papel-alto); }
details.secao > summary:focus-visible { outline: 3px solid var(--foco); outline-offset: -3px; }
/* Seta própria, que gira ao abrir. */
details.secao > summary::after {
  content: ''; flex: none; width: .6rem; height: .6rem;
  border-right: 2.5px solid var(--acento);
  border-bottom: 2.5px solid var(--acento);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 180ms ease;
}
details.secao[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.secao-conta {
  font-family: var(--mono); font-size: .75rem; font-weight: 700;
  background: var(--acento-tenue); color: var(--acento);
  border-radius: 100px; padding: .15rem .6rem;
  font-variant-numeric: tabular-nums;
}
/* O conteúdo respira dentro da caixa; o título já tem o recuo do summary. */
details.secao > *:not(summary) { margin-left: 1.15rem; margin-right: 1.15rem; }
details.secao > *:last-child { margin-bottom: 1.15rem; }
details.secao > h3:first-of-type { margin-top: .25rem; }

/* Índice do topo: uma linha só que rola na horizontal, em vez de uma parede
   de pílulas ocupando meia tela no celular. */
@media (max-width: 860px) {
  .indice {
    display: flex; flex-wrap: nowrap; overflow-x: auto;
    gap: .4rem; padding-bottom: .4rem;
    scrollbar-width: none; -ms-overflow-style: none;
    scroll-snap-type: x proximity;
    /* sangra até a borda para o último item não parecer cortado por engano */
    margin-left: calc(max(1.25rem, env(safe-area-inset-left)) * -1);
    margin-right: calc(max(1.25rem, env(safe-area-inset-right)) * -1);
    padding-left: max(1.25rem, env(safe-area-inset-left));
    padding-right: max(1.25rem, env(safe-area-inset-right));
  }
  .indice::-webkit-scrollbar { display: none; }
  .indice a { flex: none; scroll-snap-align: start; white-space: nowrap; }
  details.secao > summary { padding: .85rem 1rem; }
  details.secao > summary h2 { font-size: 1.05rem; }
  details.secao > *:not(summary) { margin-left: 1rem; margin-right: 1rem; }
  details.secao > *:last-child { margin-bottom: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  details.secao > summary::after { transition: none; }
}

/* ==================================================================
   HOME — composição Fintech
   Não é só repintura: o herói passa a ser duas colunas com painel em
   degradê, os números saem dele para uma banda própria, e entra o par
   de cartões sobrepostos. É a composição do protótipo escolhido.
   ================================================================== */
.heroi {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.75rem); align-items: center;
  padding: clamp(1.5rem, 3vw, 3.25rem) 0 clamp(1.5rem, 3vw, 2.5rem);
}
.heroi h1 {
  font-size: clamp(2.1rem, 5vw, 3.6rem); font-weight: 800;
  line-height: 1.06; margin-bottom: 1rem;
}
.heroi h1 em {
  font-style: normal;
  background: var(--degrade);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.heroi .linha-fina { margin-bottom: 1.5rem; max-width: 46ch; }
.heroi-acoes { display: flex; gap: .7rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.botao-sec {
  display: inline-flex; align-items: center; min-height: var(--alvo);
  padding: 0 1.4rem; border-radius: 100px;
  background: var(--papel); color: var(--tinta); text-decoration: none;
  font-weight: 700; font-size: .92rem; box-shadow: var(--sombra);
  transition: transform 180ms ease;
}
.botao-sec:hover { transform: translateY(-2px); color: var(--tinta); }

/* Painel em degradê com as fichas flutuando. */
.palco {
  position: relative; border-radius: var(--raio-g); overflow: hidden;
  min-height: clamp(300px, 34vw, 400px);
  background: var(--degrade-luz);
  box-shadow: var(--sombra-alta);
  display: grid; place-items: center; padding: 1.6rem;
}
/* O campo de pontos vira a textura do painel: um ponto por candidatura. */
.palco-campo { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; }
.fichas { position: relative; width: 100%; max-width: 21rem; display: grid; gap: .7rem; }
.ficha {
  background: rgba(255,255,255,.97); border-radius: 16px; padding: .8rem .95rem;
  display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: center;
  box-shadow: 0 10px 30px -8px rgba(40,15,90,.4);
}
.ficha:nth-child(1) { transform: translateX(-.85rem) rotate(-1.5deg); }
.ficha:nth-child(2) { transform: translateX(.6rem) rotate(1deg); z-index: 2; }
.ficha:nth-child(3) { transform: translateX(-.35rem) rotate(-.5deg); }
.ficha-av {
  width: 2.35rem; height: 2.35rem; border-radius: 12px; flex: none;
  background: linear-gradient(140deg, #EDE9FE, #DDD6FE);
}
.ficha-n { font-weight: 700; font-size: .9rem; line-height: 1.3; color: #1A1633; display: block; }
.ficha-m { font-size: .76rem; color: #6B6688; display: block; }
.bolha {
  position: absolute; right: .5rem; bottom: .5rem;
  width: 7rem; height: 7rem; border-radius: 50%;
  background: rgba(255,255,255,.97); display: grid; place-content: center;
  text-align: center; margin: 0;
  box-shadow: 0 14px 34px -10px rgba(40,15,90,.45);
}
.bolha b {
  display: block; font-family: var(--serifa); font-size: 1.35rem; font-weight: 800;
  color: #6D28D9; line-height: 1; font-variant-numeric: tabular-nums;
}
.bolha span { font-size: .68rem; color: #6B6688; font-weight: 600; }

/* ------------------------------------------------------- par de cartões */
.dupla {
  display: grid; grid-template-columns: .85fr 1.15fr; gap: 1.2rem;
  margin-bottom: 1.5rem;
}
.cartao-acento {
  background: var(--degrade); color: #fff;
  border-radius: var(--raio-g); padding: 1.75rem;
  box-shadow: var(--sombra-alta);
}
.cartao-acento h2 { color: #fff; font-size: 1.3rem; margin: 0 0 .9rem; border: 0; padding: 0; }
.promessas { list-style: none; padding: 0; margin: 0 0 1.1rem; display: grid; gap: .6rem; }
.promessas li {
  display: flex; gap: .6rem; align-items: flex-start;
  font-size: .93rem; font-weight: 600; line-height: 1.45;
}
.promessas li::before {
  content: ''; flex: none; width: 1.1rem; height: 1.1rem; margin-top: .15rem;
  border-radius: 50%; background: rgba(255,255,255,.25);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.75);
}
.cartao-acento .seta { color: #fff; }
.cartao-lista {
  background: var(--papel); border: 1px solid var(--linha);
  border-radius: var(--raio-g); padding: 1.75rem;
  box-shadow: var(--sombra);
  display: grid; grid-template-columns: auto 1fr; gap: 1.75rem; align-items: start;
}
.cartao-lista h2 { font-size: 1.25rem; margin: 0 0 .5rem; border: 0; padding: 0; }
.cartao-lista p { font-size: .92rem; color: var(--tinta-media); margin-bottom: .8rem; }
.marcada { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; align-content: start; }
.marcada li {
  display: flex; gap: .55rem; align-items: center;
  font-size: .88rem; font-weight: 600; color: var(--tinta-media); white-space: nowrap;
}
.marcada li::before {
  content: '✓'; color: var(--acento); font-weight: 800; flex: none;
}
.seta {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: var(--alvo); font-weight: 700; font-size: .9rem;
  color: var(--acento); text-decoration: none;
  transition: gap 180ms ease;
}
.seta::after { content: '→'; }
.seta:hover { gap: .8rem; }

/* ------------------------------------------------------- banda de números */
.painel-banda {
  background: var(--papel); border: 1px solid var(--linha);
  border-radius: var(--raio-g); box-shadow: var(--sombra);
  padding: clamp(1.5rem, 3vw, 2rem) clamp(1rem, 2vw, 1.5rem);
  margin-bottom: 2.5rem;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.25rem;
  text-align: center;
}
.painel-banda dt { font-size: .76rem; color: var(--tinta-fraca); font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; order: 2; margin-top: .3rem; }
.painel-banda dd {
  font-family: var(--serifa); font-size: clamp(1.3rem, 2.6vw, 2rem); font-weight: 800;
  letter-spacing: -.035em; margin: 0; order: 1; font-variant-numeric: tabular-nums;
}
.painel-banda > div { display: flex; flex-direction: column; }

@media (max-width: 900px) {
  .heroi { grid-template-columns: 1fr; gap: 1.5rem; }
  .palco { min-height: 19rem; order: 2; }
  .dupla { grid-template-columns: 1fr; }
  .cartao-lista { grid-template-columns: 1fr; gap: 1.1rem; }
  .marcada { grid-template-columns: 1fr 1fr; }
  .marcada li { white-space: normal; }
  .painel-banda { grid-template-columns: repeat(3, 1fr); gap: 1.1rem .6rem; }
}
@media (max-width: 520px) {
  .painel-banda { grid-template-columns: repeat(2, 1fr); }
  .bolha { width: 5.5rem; height: 5.5rem; }
  .bolha b { font-size: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .botao-sec, .seta { transition: none; }
  .botao-sec:hover { transform: none; }
}

/* ------------------------------------------------------- capa de página
   As páginas internas abriam com um <h1> solto sobre o lilás, sem a mesma
   presença do herói da home. A capa é o mesmo bloco flutuante: cartão branco,
   canto grande, sobrancelha violeta com o pontinho. */
.capa, .texto-topo {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra);
  padding: clamp(1.6rem, 3.5vw, 2.75rem);
  margin: .5rem 0 1.5rem;
}
.capa h1, .texto-topo h1 {
  font-size: clamp(1.9rem, 4.4vw, 3rem); font-weight: 800;
  margin: .6rem 0 .8rem; border: 0; padding: 0;
}
.capa .linha-fina, .texto-topo .linha-fina { margin: 0; max-width: 62ch; }
/* A sobrancelha da capa institucional já existia com outro nome. */
.texto-sobrancelha { margin: 0; }

/* ------------------------------------------------------- chamada de apoio
   Cartão em degradê no fim da página, com um alvo grande. Fica depois do
   conteúdo de propósito: pedir apoio antes de mostrar o que o portal entrega
   é o que faz banner de doação ser ignorado. */
.chamada-apoio {
  display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: center;
  background: var(--degrade); color: #fff;
  border-radius: var(--raio-g);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: var(--sombra-alta);
  margin: 2.5rem 0 1rem;
}
.chamada-apoio h2 {
  color: #fff; font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  margin: 0 0 .6rem; border: 0; padding: 0;
}
.chamada-apoio p { font-size: .96rem; margin: 0; max-width: 58ch; }
.chamada-apoio p + p { margin-top: .6rem; }
.chamada-apoio-extra { opacity: .92; font-size: .9rem !important; }
.chamada-apoio a:not(.botao) { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.botao-grande {
  background: var(--papel) !important; color: var(--acento) !important;
  font-size: 1rem; padding: 0 1.9rem; min-height: 3.25rem;
  white-space: nowrap;
  box-shadow: 0 10px 26px -8px rgba(20,8,60,.5);
}
.botao-grande:hover { background: var(--papel) !important; color: var(--acento) !important; }
@media (max-width: 720px) {
  .chamada-apoio { grid-template-columns: 1fr; gap: 1.1rem; }
  .botao-grande { width: 100%; justify-content: center; }
}

/* ------------------------------------------------------- checkout do PIX
   Valores prontos, QR e "copia e cola" — o padrão de vaquinha, e não uma
   chave solta para a pessoa digitar. Digitar é onde o erro acontece.

   Todos os painéis vêm no HTML já renderizados; o script apenas troca qual
   está visível. Sem JavaScript a pessoa continua vendo o valor sugerido, com
   QR e código funcionando. */
.checkout {
  background: var(--papel);
  border: 1px solid var(--acento);
  border-radius: var(--raio-g);
  padding: clamp(1.25rem, 3vw, 2rem);
  margin: 1.25rem 0 1.5rem;
  box-shadow: var(--sombra);
}

.pix-painel {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, 3vw, 2rem);
  align-items: center;
}
/* O QR precisa de fundo branco e margem clara para a câmera separar os
   módulos — por isso ele nunca herda o fundo do cartão. */
.pix-qr {
  width: clamp(9.5rem, 34vw, 12.5rem); flex: none;
  background: #fff; border-radius: 14px; padding: .5rem;
  border: 1px solid var(--linha);
}
.pix-qr svg { display: block; width: 100%; height: auto; }
.pix-qr path { fill: #0B0A14; }
.pix-titulo {
  font-family: var(--serifa); font-weight: 800;
  font-size: clamp(1.15rem, 3vw, 1.5rem); margin: 0 0 .35rem;
}
.pix-ajuda { font-size: .9rem; color: var(--tinta-media); margin: 0 0 .9rem; }
/* O "copia e cola" é longo de propósito: mostrar só um pedaço esconderia que
   ele é um código, e a pessoa tentaria digitá-lo. */
.pix-codigo {
  font-family: var(--mono); font-size: .68rem; line-height: 1.5;
  color: var(--tinta-fraca); background: var(--papel-alto);
  border: 1px solid var(--linha); border-radius: 12px;
  padding: .6rem .7rem; margin: 0 0 .8rem;
  max-height: 5.5rem; overflow: auto; word-break: break-all;
  user-select: all; -webkit-user-select: all;
}
.checkout .botao { min-height: 3rem; }
.checkout .botao.copiado { background: var(--positivo); }
.pix-alternativa { font-size: .84rem; color: var(--tinta-fraca); margin: .7rem 0 0; }
.pix-dados {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem;
  margin: 1.5rem 0 0; padding-top: 1.1rem;
  border-top: 1px solid var(--linha);
}
.pix-dados dt {
  font-size: .7rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tinta-fraca); margin-bottom: .15rem;
}
.pix-dados dd { margin: 0; font-size: .9rem; font-weight: 600; }

@media (max-width: 620px) {
  .pix-painel { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .pix-lado { width: 100%; }
  .pix-dados { grid-template-columns: 1fr; gap: .7rem; text-align: left; }
  .checkout .botao { width: 100%; justify-content: center; }
}

/* ------------------------------------------------------- apoio flutuante
   Fica na tela o tempo todo, mas com três cuidados que um botão flutuante
   costuma ignorar:

   1. respeita a área segura embaixo — em iPhone com barra de gestos ele
      ficaria por baixo dela;
   2. o rodapé ganha espaço extra, para o botão nunca cobrir a última linha
      de forma permanente;
   3. some quando a chamada de apoio do rodapé entra na tela (apoio.js), para
      não haver dois botões iguais visíveis ao mesmo tempo.

   Fica abaixo do cabeçalho na pilha (z-index 45 contra 60): se os dois se
   encontrarem, quem manda é a navegação. */
.apoio-flutuante {
  position: fixed; z-index: 45;
  right: max(1rem, env(safe-area-inset-right));
  bottom: calc(1rem + env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 3.25rem; padding: 0 1.35rem;
  background: var(--degrade); color: #fff;
  font-family: var(--sans); font-weight: 700; font-size: .95rem;
  text-decoration: none; border-radius: 100px;
  box-shadow: 0 10px 30px -8px rgba(76,45,150,.65), 0 2px 8px rgba(76,45,150,.3);
  transition: transform 200ms ease, box-shadow 200ms ease, opacity 200ms ease;
}
.apoio-flutuante svg { width: 1.15rem; height: 1.15rem; flex: none; }
.apoio-flutuante:hover {
  color: #fff; transform: translateY(-3px);
  box-shadow: 0 16px 38px -8px rgba(76,45,150,.7);
}
.apoio-flutuante:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }
/* Recolhido: sai de cena sem deixar alvo invisível para trás. */
.apoio-flutuante.recolhido {
  opacity: 0; transform: translateY(1.5rem) scale(.94);
  pointer-events: none;
}
/* O rodapé abre espaço para o botão: sem isto ele cobriria os links
   institucionais em telas curtas, e cobriria sempre — não só ao rolar. */
.rodape { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }

@media (max-width: 560px) {
  .apoio-flutuante {
    right: max(.75rem, env(safe-area-inset-right));
    bottom: calc(.75rem + env(safe-area-inset-bottom));
    min-height: 3rem; padding: 0 1.1rem; font-size: .88rem;
  }
  /* Em tela estreita a frase inteira empurraria o botão de ponta a ponta. */
  .apoio-flutuante span { font-size: .86rem; }
}
@media (max-width: 380px) {
  .apoio-flutuante span { display: none; }
  .apoio-flutuante { padding: 0; width: 3.25rem; justify-content: center; }
  .apoio-flutuante svg { width: 1.4rem; height: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .apoio-flutuante { transition: opacity 120ms linear; }
  .apoio-flutuante:hover { transform: none; }
  .apoio-flutuante.recolhido { transform: none; }
}
@media print { .apoio-flutuante { display: none; } }

/* Botões do Asaas: cartão, parcelamento e recorrência. Vêm depois do PIX
   porque o PIX é o caminho sem taxa e sem terceiro — a ordem na página é a
   ordem da recomendação. */
.asaas-links { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0 1.25rem; }
.asaas-links .botao { flex: 1 1 12rem; justify-content: center; }
@media (max-width: 560px) { .asaas-links .botao { flex: 1 1 100%; } }

/* Lista de municípios da página de estado: colunas em vez de uma coluna
   quilométrica — são até 850 nomes em Minas. */
.lista-municipios {
  list-style: none; padding: 0; margin: 1rem 0 0;
  columns: 4 12rem; column-gap: 1.5rem;
}
.lista-municipios li { break-inside: avoid; margin-bottom: .15rem; }
.lista-municipios a {
  display: block; padding: .45rem .6rem; border-radius: 10px;
  min-height: var(--alvo); display: flex; align-items: center;
  font-size: .92rem; text-decoration: none;
}
.lista-municipios a:hover { background: var(--acento-tenue); color: var(--acento); }
@media (max-width: 560px) { .lista-municipios { columns: 2 8rem; } }