/* ==========================================================================
   components.css — nav, botões, CTA final, estatísticas, marquee, barra fixa
   ========================================================================== */

/* --- Barra de progresso ----------------------------------------------------
   Fio laranja de 3px no topo, amarrado ao scroll. Custo perto de zero e dá a
   sensação de documento sendo percorrido.
   -------------------------------------------------------------------------- */

.progresso {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: var(--fio);
  background: var(--laranja);
  transform: scaleX(0);
  transform-origin: left center;
  z-index: var(--z-progresso);
  pointer-events: none;
}

/* --- Cabeçalho -------------------------------------------------------------
   Fica no fluxo, não fixo: barra fixa em tela de 360px come altura preciosa,
   e a navegação por menu é secundária num site onde todo mundo chega de
   anúncio. Quem quiser o menu rola de volta ao topo.
   -------------------------------------------------------------------------- */

.cabecalho {
  position: relative;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.125rem var(--pad-pagina);
  border-block-end: var(--hairline) solid var(--tinta-22);
  background: var(--papel);
}

.marca {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  min-height: 48px;
  align-content: center;
  flex-wrap: wrap;
}

.marca__nome {
  font-family: var(--ff-marca);
  font-weight: 700;
  font-size: clamp(1rem, 4.4vw, 1.25rem);
  letter-spacing: 0.005em;
  line-height: 1.5;
  text-transform: uppercase;
}

.marca__numero {
  font-family: var(--ff-numero);
  font-weight: 700;
  font-size: clamp(1rem, 4.4vw, 1.25rem);
  line-height: 1.5;
  /* Fio laranja embaixo do número: o par nome + número é a assinatura da
     campanha e o fio é o que o segura junto. */
  border-block-end: var(--fio) solid var(--laranja);
  padding-block-end: 1px;
}

/* Botão do menu: três fios de tinta, não um ícone de hambúrguer arredondado. */
.menu-botao {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  min-width: 48px;
  min-height: 48px;
  padding: 0 0.25rem;
  background: none;
  border: 0;
  cursor: pointer;
  align-items: flex-end;
}

.menu-botao__fio {
  display: block;
  width: 28px;
  height: 2px;
  background: var(--tinta);
  transition: transform var(--dur-curta) var(--ease-tinta),
    opacity var(--dur-curta) var(--ease-tinta), width var(--dur-curta) var(--ease-tinta);
}

.menu-botao__fio:nth-child(2) {
  width: 20px;
  background: var(--laranja);
}

.menu-botao:hover .menu-botao__fio:nth-child(2) {
  width: 28px;
}

/* --- Overlay do menu ------------------------------------------------------- */

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: var(--tinta);
  color: var(--papel);
  display: flex;
  flex-direction: column;
  padding: 1.125rem var(--pad-pagina) var(--pad-pagina);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 0.5s var(--ease-tinta), visibility 0s linear 0.5s;
  overflow-y: auto;
}

.menu-overlay[data-aberto='true'] {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition: clip-path 0.5s var(--ease-tinta), visibility 0s;
}

.menu-overlay__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-block-end: var(--hairline) solid var(--papel-45);
  padding-block-end: 1.125rem;
  margin-block-end: auto;
}

.menu-overlay .menu-botao__fio {
  background: var(--papel);
}

.menu-fechar {
  min-width: 48px;
  min-height: 48px;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font-size: var(--fs-eyebrow);
  font-variation-settings: 'wght' 500, 'wdth' 100;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.menu-lista {
  display: flex;
  flex-direction: column;
  padding-block: clamp(2rem, 8vw, 4rem);
}

.menu-lista li {
  overflow: hidden;
  border-block-end: var(--hairline) solid var(--papel-45);
}

.menu-lista li:first-child {
  border-block-start: var(--hairline) solid var(--papel-45);
}

.menu-link {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-height: 56px;
  padding-block: 0.875rem;
  font-family: var(--ff-marca);
  font-weight: 700;
  font-size: clamp(1.375rem, 7.5vw, 2.75rem);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -0.005em;
}

.menu-link__indice {
  font-family: var(--ff-numero);
  font-size: 0.75rem;
  color: var(--laranja);
  line-height: 1;
  flex: none;
  align-self: flex-start;
  padding-block-start: 0.5rem;
}

/* A página atual é marcada com o fio laranja sob o rótulo, o mesmo gesto que
   marca o 70333 no cabeçalho. Laranja como cor de texto seria 4,6:1 sobre a
   tinta: passa raspando e não vale gastar a única regra frágil da paleta num
   indicador de navegação. */
.menu-link[aria-current='page'] .menu-link__rotulo {
  box-decoration-break: clone;
  background-image: linear-gradient(var(--laranja), var(--laranja));
  background-repeat: no-repeat;
  background-size: 100% var(--fio);
  background-position: 0 100%;
  padding-block-end: 0.1em;
}

.menu-rodape {
  font-size: var(--fs-meta);
  color: var(--papel-75);
  border-block-start: var(--hairline) solid var(--papel-45);
  padding-block-start: 1.125rem;
}

body[data-menu-aberto='true'] {
  overflow: hidden;
}

/* --- Botões ---------------------------------------------------------------
   Primário: bloco de tinta cheio com barra laranja de 4px na base. A barra é
   o que diferencia de um botão retangular qualquer.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 52px;
  padding: 0.875rem 1.5rem;
  font-size: 1.0625rem;
  font-variation-settings: 'wght' 700, 'wdth' 100;
  letter-spacing: 0.01em;
  text-align: center;
  cursor: pointer;
  border: 0;
  transition: background-color var(--dur-curta) var(--ease-tinta),
    color var(--dur-curta) var(--ease-tinta);
}

.btn__icone {
  width: 22px;
  height: 22px;
  flex: none;
  fill: currentColor;
}

.btn--primario {
  background: var(--tinta);
  color: var(--papel);
  border-block-end: var(--barra-btn) solid var(--laranja);
}

.btn--primario:hover {
  background: var(--tinta-80);
}

/* Sobre bloco navy o primário inverte: papel cheio, tinta no texto. */
.tinta-cheia .btn--primario {
  background: var(--papel);
  color: var(--tinta);
}

.tinta-cheia .btn--primario:hover {
  background: var(--papel-75);
}

.btn--secundario {
  background: transparent;
  color: var(--tinta);
  border: var(--hairline) solid var(--tinta);
}

.btn--secundario:hover {
  background: var(--tinta);
  color: var(--papel);
}

.tinta-cheia .btn--secundario {
  color: var(--papel);
  border-color: var(--papel-45);
}

.tinta-cheia .btn--secundario:hover {
  background: var(--papel);
  color: var(--tinta);
}

.btn-grupo {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
}

/* Abaixo de 30rem os botões ocupam a largura toda: alvo de toque maior é o
   que importa em tela de 360px. O corpo cede 1px para o rótulo mais longo
   ("Entrar no grupo do WhatsApp") caber numa linha só a 360. */
@media (max-width: 30rem) {
  .btn-grupo .btn {
    width: 100%;
  }

  .btn {
    font-size: 1rem;
    padding-inline: 1.125rem;
  }
}

/* Link de texto com seta. Nunca laranja — o laranja fica só na seta. */
.link-seta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 48px;
  font-variation-settings: 'wght' 600, 'wdth' 100;
  border-block-end: var(--hairline) solid currentColor;
  align-self: flex-start;
}

.link-seta svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--laranja);
  transition: transform var(--dur-curta) var(--ease-tinta);
}

.link-seta:hover svg {
  transform: translateX(4px);
}

/* --- Estatísticas ----------------------------------------------------------
   Não é o template de hero-metric: os números não estão em cards, estão
   empilhados com hairline entre eles e o fio laranja desenhando embaixo.
   -------------------------------------------------------------------------- */

.stats {
  display: grid;
  gap: 0;
}

@media (min-width: 48rem) {
  .stats {
    grid-template-columns: repeat(3, 1fr);
    column-gap: clamp(1.5rem, 3vw, 3rem);
  }
}

.stat {
  padding-block: clamp(1.75rem, 5vw, 2.5rem);
  border-block-start: var(--hairline) solid var(--tinta-22);
}

.stat:last-child {
  border-block-end: var(--hairline) solid var(--tinta-22);
}

@media (min-width: 48rem) {
  .stat:last-child {
    border-block-end: 0;
  }
}

.secao--tinta .stat,
.tinta-cheia .stat {
  border-block-color: var(--papel-45);
}

.stat__numero {
  font-family: var(--ff-numero);
  font-weight: 700;
  font-size: clamp(3.5rem, 16vw, 6rem);
  line-height: 0.86;
  letter-spacing: -0.02em;
  display: flex;
  align-items: baseline;
  gap: 0.06em;
}

/* Prefixos e sufixos ("R$", "MI", "%") saem em Archivo: a Benzin só tem
   dígitos no arquivo e a mistura é intencional, não acidente. */
.stat__unidade {
  font-family: var(--ff-texto);
  font-size: 0.34em;
  font-variation-settings: 'wght' 700, 'wdth' 92;
  letter-spacing: 0.02em;
  line-height: 1;
  align-self: center;
}

.stat__fio {
  display: block;
  width: 100%;
  height: var(--fio);
  background: var(--laranja);
  margin-block: 1.125rem 1rem;
  transform-origin: left center;
}

.stat__rotulo {
  font-size: 1.0625rem;
  line-height: 1.45;
  max-width: 30ch;
}

.stat__fonte {
  display: block;
  font-size: 0.8125rem;
  color: var(--tinta-80);
  padding-block-start: 0.625rem;
  max-width: 30ch;
}

/* --- Linha do tempo --------------------------------------------------------
   Sem cards. Um fio vertical, marcadores laranja e hairlines separando os anos.
   O trilho claro mostra o caminho inteiro; o fio de tinta por cima é o que
   cresce com o scroll, e cada marcador acende quando o fio o alcança.
   -------------------------------------------------------------------------- */

.linha {
  --calha: clamp(2.25rem, 9vw, 5rem);
  position: relative;
  list-style: none;
}

.linha__trilho,
.linha__fio {
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc(var(--calha) / 2);
  width: 2px;
  margin-inline-start: -1px;
  pointer-events: none;
}

.linha__trilho {
  background: var(--tinta-22);
}

.linha__fio {
  background: var(--tinta);
  transform-origin: top center;
}

.linha__item {
  display: grid;
  grid-template-columns: var(--calha) minmax(0, 1fr);
  align-items: start;
  padding-block: clamp(1.75rem, 5.5vw, 2.75rem);
  border-block-start: var(--hairline) solid var(--tinta-22);
}

.linha__item:first-child {
  border-block-start: 0;
  padding-block-start: 0;
}

/* Quadrado laranja assentado exatamente sobre o fio. Alinhado à altura de
   caixa alta do ano, não ao topo da caixa de texto. */
.linha__marcador {
  grid-column: 1;
  justify-self: center;
  width: 14px;
  height: 14px;
  background: var(--laranja);
  margin-block-start: 0.42em;
  flex: none;
}

.linha__corpo {
  grid-column: 2;
  display: grid;
  gap: 0.5rem;
}

.linha__ano {
  display: block;
  font-family: var(--ff-numero);
  font-weight: 700;
  font-size: clamp(2.25rem, 9vw, 4rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
}

/* O mês vem em Archivo, acima do ano, e nunca dentro dele: o arquivo da
   Benzin é só dígitos (mais vírgula, ponto, barra e porcento), então
   "Dez/2021" cairia no fallback no meio da palavra e a linha do tempo
   inteira ficaria com duas fontes brigando. */
.linha__mes {
  display: block;
  font-size: var(--fs-eyebrow);
  font-variation-settings: 'wght' 700, 'wdth' 96;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tinta-80);
  padding-block-end: 0.5rem;
}

.tinta-cheia .linha__mes {
  color: var(--papel-75);
}

.linha__texto {
  max-width: 42ch;
  text-wrap: pretty;
}

.linha__texto > h3 + p {
  padding-block-start: 0.625rem;
}

@media (min-width: 48rem) {
  .linha__corpo {
    grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
    column-gap: clamp(1.5rem, 4vw, 3.5rem);
    /* `baseline` deixou de servir quando a coluna do ano passou a poder ter
       duas linhas (mês em cima do ano): o alinhamento por baseline puxava a
       primeira linha do texto para a altura do ANO, e não do bloco. */
    align-items: start;
  }

  .linha__texto {
    padding-block-start: 0.35em;
  }
}

/* --- Cabeçalho de seção -----------------------------------------------------
   ⚠️ FORA DE USO desde 13/08/2026. Nenhuma página chama estas classes.

   Fazia parte da repaginada "mais tinta + retícula", que o Pedro viu rodando e
   não aprovou. A Home voltou ao eyebrow com fio, e as cinco páginas seguem essa
   linguagem. O código fica de pé, e não apagado, porque a decisão que ele
   resolve continua valendo: a razão da repaginada era o excesso de papel, e se
   isso voltar a incomodar este é o caminho já construído. Ver ESTADO-ATUAL.md.

   Substitui o eyebrow solto com um fiozinho de 3px. Um bloco de tinta cheia
   com o índice da seção em Benzin, encostado numa faixa de retícula que
   carrega o rótulo. O índice não é decoração: numera os passos do argumento
   da página, e é o que faz a leitura virar dossiê em vez de post.
   -------------------------------------------------------------------------- */

.cabeca-secao {
  display: flex;
  align-items: stretch;
  margin-block-end: clamp(1.5rem, 4.5vw, 2.5rem);
}

.cabeca-secao__indice {
  display: flex;
  align-items: center;
  flex: none;
  background: var(--tinta);
  color: var(--papel);
  font-family: var(--ff-numero);
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1;
  padding-inline: 0.875rem;
  border-block-end: var(--barra-btn) solid var(--laranja);
}

.cabeca-secao__rotulo {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  padding-block: 0.75rem;
  border-block-end: var(--barra-btn) solid var(--tinta);
  background-image: radial-gradient(var(--tinta) 1.15px, transparent 1.25px);
  background-size: 6px 6px;
}

/* Chapa sólida atrás do rótulo: texto por cima da malha de pontos fica
   ilegível, e legibilidade sob sol forte é a restrição central do projeto.
   A retícula preenche só o que sobra da faixa. */
.cabeca-secao__rotulo > span {
  background: var(--fundo-secao);
  padding-inline: 1rem;
}

/* Sobre bloco navy tudo inverte: o índice fica em papel cheio e a retícula
   passa a ser de pontos de papel. */
.tinta-cheia,
.secao--tinta,
.cta {
  --fundo-secao: var(--tinta);
}

.tinta-cheia .cabeca-secao__indice,
.secao--tinta .cabeca-secao__indice {
  background: var(--papel);
  color: var(--tinta);
}

.tinta-cheia .cabeca-secao__rotulo,
.secao--tinta .cabeca-secao__rotulo {
  border-block-end-color: var(--papel);
  background-image: radial-gradient(var(--papel) 1.15px, transparent 1.25px);
}

/* --- Lista numerada --------------------------------------------------------
   Índices grandes em Benzin na margem. O número é impresso duas vezes: a
   camada de baixo em tinta fraca, a de cima em tinta cheia, revelada de baixo
   para cima com o scroll. É uma segunda passagem de impressão, e resolve o
   efeito pedido sem animar `color` (que repinta a cada quadro).
   -------------------------------------------------------------------------- */

.lista-num {
  --calha: clamp(3.25rem, 13vw, 7rem);
  /* Precisa ser variável, e não valor solto no `.lista-num__indice`: o texto ao
     lado se alinha por ela (ver `.lista-num__texto`). */
  --fs-indice: clamp(1.75rem, 7vw, 3.25rem);
  list-style: none;
}

.lista-num__item {
  display: grid;
  grid-template-columns: var(--calha) minmax(0, 1fr);
  column-gap: clamp(1rem, 3.5vw, 2.5rem);
  align-items: start;
  padding-block: clamp(1.5rem, 4.5vw, 2.25rem);
  border-block-start: var(--hairline) solid var(--tinta-22);
}

.lista-num__item:last-child {
  border-block-end: var(--hairline) solid var(--tinta-22);
}

.lista-num__indice {
  grid-column: 1;
  font-family: var(--ff-numero);
  font-weight: 700;
  font-size: var(--fs-indice);
  line-height: 0.9;
  letter-spacing: -0.02em;
}

.lista-num__numero {
  position: relative;
  display: block;
  color: var(--tinta-55);
}

.lista-num__numero-tinta {
  position: absolute;
  inset: 0;
  color: var(--tinta);
}

.lista-num__fio {
  display: block;
  width: 100%;
  height: var(--fio);
  background: var(--laranja);
  margin-block-start: 0.7rem;
  transform-origin: left center;
}

/* Alinhado pelo topo das maiúsculas, não pelo topo da caixa.
   `align-items: start` encosta as duas caixas na mesma linha, mas caixa não é
   letra: o índice em Benzin é composto com entrelinha 0,9 e sobra quase nada
   acima do dígito, enquanto o corpo em Archivo tem entrelinha 1,6 e carrega
   quase meia entrelinha de ar antes da primeira letra. O resultado era o
   número flutuando acima do texto — foi o que o Pedro marcou com a linha
   vermelha.
   As duas parcelas abaixo são a distância medida entre o topo da caixa e o
   topo da maiúscula em cada fonte, com as métricas dos próprios arquivos
   subsetados (Benzin: asc 0,77 / desc 0,23 / altura do dígito 0,74 —
   Archivo: asc 0,88 / desc 0,21 / altura de maiúscula 0,686):
     texto   = (1,6 − 1,09)/2 + 0,88 − 0,686 = 0,449em
     índice  = (0,9 − 1,00)/2 + 0,77 − 0,740 = −0,02 do corpo do índice
   O `em` do primeiro termo é o corpo do texto; o segundo precisa do corpo do
   índice, que vem de `--fs-indice`. Se qualquer uma das entrelinhas mudar,
   refazer a conta — não empurrar no olho. */
.lista-num__texto {
  grid-column: 2;
  margin-block-start: calc(-0.449em - 0.02 * var(--fs-indice));
  max-width: 52ch;
  text-wrap: pretty;
}

/* Variante da lista longa (as 20 propostas). Duas diferenças, as duas por
   causa do tamanho da lista:

   1. Sem a segunda passagem de tinta. Aquele efeito custa um ScrollTrigger com
      scrub por item; com 20 itens seriam 20 gatilhos amarrados ao scroll numa
      página só, muito acima do teto que o projeto se deu. Aqui o número já
      nasce em tinta cheia e a linha inteira entra com o wipe padrão, que roda
      por IntersectionObserver e não custa nada por quadro.
   2. O fio laranja vem de pseudo-elemento. O bloco das 20 é feito para a
      campanha reescrever no HTML, e quanto menos marcação houver dentro de
      cada item, menor a chance de alguém quebrar o layout mexendo no texto. */
.lista-num--simples .lista-num__numero {
  color: var(--tinta);
}

.lista-num--simples .lista-num__indice::after {
  content: '';
  display: block;
  width: 100%;
  height: var(--fio);
  background: var(--laranja);
  margin-block-start: 0.7rem;
}

/* --- Selos de tipo ---------------------------------------------------------
   Existem para cumprir a regra de conteúdo: lei aprovada é lei, pedido formal
   é cobrança registrada. Cheio para o que virou lei, contorno para o que foi
   pedido. A diferença tem que ser visível antes de ler o rótulo.
   -------------------------------------------------------------------------- */

.selo {
  display: inline-flex;
  align-items: center;
  margin-block-start: 0.875rem;
  padding: 0.4rem 0.7rem;
  font-size: 0.75rem;
  font-variation-settings: 'wght' 700, 'wdth' 94;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
  transform-origin: left center;
}

.selo--lei {
  background: var(--tinta);
  color: var(--papel);
}

.selo--pedido {
  border: var(--hairline) solid var(--tinta);
  color: var(--tinta);
}

/* --- Faixa marquee --------------------------------------------------------- */

.marquee {
  overflow: hidden;
  background: var(--tinta);
  color: var(--papel);
  padding-block: clamp(0.875rem, 2.5vw, 1.25rem);
  border-block: var(--fio) solid var(--laranja);
  user-select: none;
}

.marquee__trilha {
  display: flex;
  width: max-content;
  will-change: transform;
}

.marquee__item {
  font-family: var(--ff-marca);
  font-size: clamp(1.125rem, 4.5vw, 2rem);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  /* Só o suficiente para o espaço entre repetições bater com o espaço interno
     dos separadores. Mais que isso e a faixa vira uma sequência de buracos. */
  padding-inline-end: 0.6rem;
  white-space: nowrap;
}

/* --- CTA final -------------------------------------------------------------
   Repetido nas 5 páginas. É o momento em que a tinta cobre o papel.
   -------------------------------------------------------------------------- */

.cta {
  position: relative;
  background: var(--tinta);
  color: var(--papel);
  padding-inline: var(--pad-pagina);
  padding-block: clamp(3rem, 11vw, 7rem);
  overflow: hidden;
}

.cta__numero {
  font-family: var(--ff-numero);
  font-weight: 700;
  font-size: var(--fs-numero);
  line-height: 0.8;
  letter-spacing: -0.025em;
  display: block;
}

/* O 70333 em Benzin tem 4,71em de largura: a 360px o clamp de --fs-numero o
   jogaria 50px para fora da tela. Aqui ele é composto na medida da caixa. */
.cta__numero.na-medida {
  font-size: min(var(--fs-numero), calc(var(--medida-caixa) / var(--em-larg, 4.71)));
}

.cta__fio {
  display: block;
  width: min(100%, 34rem);
  height: 6px;
  background: var(--laranja);
  transform-origin: left center;
  margin-block: 1.25rem clamp(2rem, 6vw, 3rem);
}

.cta__titulo {
  font-size: var(--fs-h2);
  font-variation-settings: 'wght' 700, 'wdth' 110;
  letter-spacing: -0.01em;
  max-width: 18ch;
}

.cta__texto {
  max-width: 40ch;
  padding-block-start: 0.875rem;
  color: var(--papel-75);
}

.cta__acoes {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  padding-block-start: clamp(1.75rem, 5vw, 2.5rem);
}

.cta__rodape {
  margin-block-start: clamp(2.5rem, 8vw, 4rem);
  padding-block-start: 1.5rem;
  border-block-start: var(--hairline) solid var(--papel-45);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-meta);
  color: var(--papel-75);
}

.cta__social {
  display: flex;
  gap: 0.5rem;
}

.cta__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  border: var(--hairline) solid var(--papel-45);
}

/* Sem `fill` aqui: os ícones são de traço e trazem os próprios atributos. */
.cta__social svg {
  width: 20px;
  height: 20px;
}

.cta__social a:hover {
  background: var(--papel);
  color: var(--tinta);
}

/* --- Barra fixa de CTA no mobile -------------------------------------------
   Aparece depois do hero e some quando o CTA final entra na viewport, para
   não duplicar a mesma ação na tela.
   -------------------------------------------------------------------------- */

.barra-cta {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: var(--z-barra-cta);
  background: var(--tinta);
  color: var(--papel);
  border-block-start: var(--fio) solid var(--laranja);
  padding: 0.625rem var(--pad-pagina)
    calc(0.625rem + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  display: flex;
  align-items: center;
  gap: 0.875rem;
  justify-content: space-between;
}

/* A assinatura obrigatória (70333 · GIL TORRES · DEPUTADO ESTADUAL) tem duas
   linhas fixas escritas no HTML. Com os 15ch de antes, "Deputado Estadual"
   quebrava de novo e a barra ia para três linhas — a `wdth` mais estreita e o
   corpo menor são o que fazem a segunda linha caber inteira em 360px. */
.barra-cta__texto {
  font-size: 0.875rem;
  line-height: 1.25;
  font-variation-settings: 'wght' 600, 'wdth' 88;
  letter-spacing: 0.01em;
  max-width: 22ch;
}

.barra-cta .btn {
  min-height: 48px;
  padding-inline: 1.125rem;
  font-size: 1rem;
  flex: none;
}

@media (min-width: 48rem) {
  .barra-cta {
    display: none;
  }
}

/* --- Wipe de entrada de página ---------------------------------------------
   Painel navy que sai da tela revelando o conteúdo, 350ms. Só na entrada:
   wipe de saída atrasa a navegação em celular lento sem nenhum ganho real.
   -------------------------------------------------------------------------- */

.cortina {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-overlay) + 5);
  background: var(--tinta);
  pointer-events: none;
  clip-path: inset(0 0 0 0);
}

/* Nasce escondida no HTML e só é armada por um script inline. Sem JS, ou com
   JS quebrado, a cortina nunca chega a cobrir a página. */
.cortina[data-pronto='true'] {
  display: none;
}

/* ==========================================================================
   COMPONENTES DA REV2 (17/08/2026)
   Tudo abaixo entrou com a reestruturação de 5 para 6 páginas. Ver
   CONTEUDO-rev2.md, que é a fonte da verdade de texto do site.
   ========================================================================== */

/* --- Rodapé de texto -------------------------------------------------------
   Obrigatório nas 6 páginas (regra 8 + "Rodapé de texto (todas)"). Fica
   DEPOIS do CTA, no papel: o CTA é o momento de tinta, e o rodapé é a linha
   de registro legal, que não disputa atenção com nada.
   -------------------------------------------------------------------------- */

.rodape {
  padding-inline: var(--pad-pagina);
  padding-block: clamp(2rem, 6vw, 3rem);
  font-size: var(--fs-meta);
  color: var(--tinta-80);
}

.rodape__assinatura {
  font-variation-settings: 'wght' 700, 'wdth' 100;
  color: var(--tinta);
  letter-spacing: 0.02em;
}

.rodape__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  padding-block: 1rem;
}

.rodape__nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.rodape__legal {
  padding-block-start: 0.75rem;
  border-block-start: var(--hairline) solid var(--tinta-22);
}

/* Linha de registro eleitoral: razão social por extenso, CNPJ e endereço da
   Receita. O robô de verificação do Meta lê o HTML e compara caractere por
   caractere — então isto tem que ser texto de verdade, visível e sem abreviar.
   Discreto sim, escondido nunca: nada de display:none, opacity:0 ou 0px. */
.rodape__legal--registro > span {
  display: block;
}

.rodape__razao {
  letter-spacing: 0.01em;
}

.rodape__endereco {
  text-wrap: pretty;
}

/* Na última seção antes do rodapé o `.barra-cta` já saiu de cena (ele some
   quando o CTA final entra na tela), então não há folga extra a reservar.
   O respiro abaixo é só para o dedo não encostar na borda física. */
@media (max-width: 47.99rem) {
  .rodape {
    padding-block-end: calc(2rem + env(safe-area-inset-bottom, 0px));
  }
}

/* --- Citação de morador ----------------------------------------------------
   Sem vídeo: foto do morador + fala em texto. A regra de conteúdo manda o
   bloco INTEIRO sair se não houver autorização por escrito arquivada — por
   isso cada citação é um bloco fechado, fácil de apagar sem sobra.
   -------------------------------------------------------------------------- */

.citacoes {
  display: grid;
  gap: clamp(2rem, 6vw, 3rem);
}

@media (min-width: 48rem) {
  .citacoes--tres {
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  }
}

.citacao {
  display: grid;
  gap: 1.25rem;
  border-block-start: var(--fio) solid var(--laranja);
  padding-block-start: clamp(1.25rem, 4vw, 1.75rem);
}

.citacao__foto {
  aspect-ratio: 1 / 1;
  max-width: 9rem;
}

.citacao__fala {
  font-size: var(--fs-h3);
  font-variation-settings: 'wght' 400, 'wdth' 100;
  font-style: italic;
  line-height: 1.4;
  max-width: 34ch;
  text-wrap: pretty;
}

.citacao__autor {
  font-size: var(--fs-meta);
  font-variation-settings: 'wght' 700, 'wdth' 96;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-80);
}

.tinta-cheia .citacao__autor {
  color: var(--papel-75);
}

/* Marcador de bloco pendente. Existe só enquanto a campanha não trouxer o
   depoimento autorizado — o contorno tracejado é para NINGUÉM publicar sem
   ver que falta coisa ali. Some junto com o placeholder. */
.pendente {
  outline: 2px dashed var(--laranja);
  outline-offset: 0.5rem;
}

.pendente__aviso {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-variation-settings: 'wght' 700, 'wdth' 94;
  color: var(--tinta);
  background: var(--laranja);
  padding: 0.35rem 0.6rem;
  justify-self: start;
}

/* --- Lista de fatos --------------------------------------------------------
   Termo em tinta cheia + a consequência na mesma linha, separados por
   hairline. Serve para os cortes de gasto e para as frentes de trabalho:
   não é card, é entrada de registro.
   -------------------------------------------------------------------------- */

.lista-fatos {
  list-style: none;
  margin-block-start: clamp(1.75rem, 5vw, 2.5rem);
  max-width: var(--medida);
}

.lista-fatos li {
  padding-block: clamp(1rem, 3vw, 1.375rem);
  border-block-start: var(--hairline) solid var(--tinta-22);
  text-wrap: pretty;
}

.lista-fatos li:last-child {
  border-block-end: var(--hairline) solid var(--tinta-22);
}

.tinta-cheia .lista-fatos li {
  border-block-color: var(--papel-45);
}

.lista-fatos strong {
  font-variation-settings: 'wght' 700, 'wdth' 100;
}

/* --- Lista de papelada -----------------------------------------------------
   A página 6 inteira. Cada item é uma matéria protocolada, e o selo vem
   ANTES do texto: o eleitor tem que ver "PEDIDO" antes de ler a promessa
   embutida no assunto. É o que protege a página de contestação.
   -------------------------------------------------------------------------- */

/* A medida não é 60ch: com o selo comendo a primeira coluna, sobrariam ~44ch
   para o texto e cada item quebrava em duas linhas curtas. A largura aqui é a
   da lista inteira, selo incluído. */
.lista-papel {
  list-style: none;
  max-width: 46rem;
}

.lista-papel li {
  display: grid;
  gap: 0.625rem;
  padding-block: clamp(1.125rem, 3.5vw, 1.5rem);
  border-block-start: var(--hairline) solid var(--tinta-22);
}

.lista-papel li:last-child {
  border-block-end: var(--hairline) solid var(--tinta-22);
}

.lista-papel .selo {
  margin-block-start: 0;
  justify-self: start;
}

.lista-papel__texto {
  text-wrap: pretty;
}

.lista-papel__texto strong {
  font-variation-settings: 'wght' 700, 'wdth' 100;
}

@media (min-width: 48rem) {
  /* 8,5rem é a largura do selo mais largo ("LEI APROVADA") com folga. Mais que
     isso e o rótulo fica boiando longe do texto que ele qualifica — e o ponto
     inteiro do selo é ser lido junto com a matéria, não antes dela. */
  .lista-papel li {
    grid-template-columns: 8.5rem minmax(0, 1fr);
    column-gap: clamp(1.25rem, 2.5vw, 2rem);
    align-items: start;
  }

  /* Meia entrelinha de ar antes da primeira letra do corpo em Archivo; o selo
     é caixa alta pequena e não tem esse ar. Sem o empurrão os dois entram
     desencontrados na mesma linha. */
  .lista-papel .selo {
    margin-block-start: 0.2rem;
  }
}

/* --- Numerão de uma tela ---------------------------------------------------
   O dado sozinho, ocupando a tela inteira no celular. É a dobra de abertura
   da página da fila: número primeiro, argumento depois.
   -------------------------------------------------------------------------- */

.numeroes {
  display: grid;
}

.numerao {
  padding-inline: var(--pad-pagina);
  padding-block: clamp(2.5rem, 9vw, 4.5rem);
  border-block-start: var(--hairline) solid var(--papel-45);
}

.numerao__valor {
  font-family: var(--ff-numero);
  font-weight: 700;
  font-size: clamp(5rem, 30vw, 12rem);
  line-height: 0.82;
  letter-spacing: -0.03em;
  display: block;
}

.numerao__escala {
  display: block;
  font-family: var(--ff-texto);
  font-size: var(--fs-lead);
  font-variation-settings: 'wght' 700, 'wdth' 108;
  letter-spacing: 0.02em;
  padding-block-start: 0.5rem;
}

/* Quando o lugar do número é ocupado por uma palavra ("Muitos"). Duas coisas
   mudam: a Benzin é só dígitos e não desenha a palavra, então volta para a
   Archivo; e o corpo de 30vw foi calibrado para dois dígitos — com seis letras
   ele estoura a linha no celular. */
.numerao__valor--palavra {
  font-family: var(--ff-texto);
  font-variation-settings: 'wght' 700, 'wdth' 108;
  font-size: clamp(3rem, 15vw, 6.5rem);
  letter-spacing: -0.01em;
  line-height: 0.95;
}

.numerao__fio {
  display: block;
  width: min(100%, 22rem);
  height: var(--fio);
  background: var(--laranja);
  margin-block: 1.25rem 1.125rem;
  transform-origin: left center;
}

.numerao__texto {
  font-size: var(--fs-h3);
  font-variation-settings: 'wght' 400, 'wdth' 100;
  line-height: 1.35;
  max-width: 26ch;
  text-wrap: pretty;
}

@media (min-width: 48rem) {
  /* `minmax(0, 1fr)` e não `1fr`: com `1fr` a trilha nunca encolhe abaixo do
     min-content, e o min-content aqui é um número de 192px de corpo. Em 768px
     as duas colunas somavam 838px e a página estourava 70px na horizontal. */
  .numeroes {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  /* O corpo de 30vw é a regra do mobile, onde o número tem a tela inteira.
     Lado a lado ele passa a dividir a largura com o irmão, e a conta muda. */
  .numerao__valor {
    font-size: clamp(4.5rem, 13vw, 10rem);
  }

  .numerao__valor--palavra {
    font-size: clamp(3rem, 8vw, 5.5rem);
  }

  .numerao + .numerao {
    border-inline-start: var(--hairline) solid var(--papel-45);
  }
}