/* =========================================================
   Apoie a PEC da Soberania Digital — estilos
   Identidade extraída da arte "eu apoio a PEC da Soberania Digital".
   ========================================================= */

/* ---------- 1. Tokens ---------- */
/* Fallback com as medidas da Archivo (texto corrido, peso 400): enquanto a fonte
   carrega, o texto ocupa o mesmo espaço e a página não "pula" na troca (CLS). */
@font-face {
  font-family: 'Archivo Fallback';
  src: local('Arial'), local('ArialMT'), local('Liberation Sans');
  size-adjust: 98.74%;
  ascent-override: 88.92%;
  descent-override: 21.27%;
  line-gap-override: 0%;
}

/* Idem para títulos condensados e pesados (wdth 75, peso 900), sobre Arial Bold */
@font-face {
  font-family: 'Archivo Condensado Fallback';
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold');
  font-weight: 900;
  size-adjust: 83.11%;
}

:root {
  /* Paleta (amostrada da arte) */
  --preto: #0c0c0c;
  --mancha: #1a160f;
  --creme: #efead5;
  --creme-escuro: #e2dbc0;
  --ambar: #f7a800;
  --verde: #52ba3f;
  /* Variantes para uso SOBRE CREME (contraste >= 4,5:1) */
  --ambar-escuro: #7a5300;
  --verde-escuro: #2b6a2d;
  --cinza-texto: #c9c3ad; /* texto secundário sobre preto */
  /* Erro: claro sobre fundos escuros (7:1), escuro sobre creme (5,4:1) */
  --erro: #ff6b5e;
  --erro-escuro: #b3261e;

  /* Tipografia */
  --fonte: 'Archivo', 'Archivo Fallback', Arial, sans-serif;
  /* corpo cresce em telas grandes, junto com a coluna, mantendo ~75-80 caracteres por linha */
  --corpo: clamp(1.0625rem, 0.9rem + 0.45vw, 1.3125rem);
  --h1: clamp(2.25rem, 0.9rem + 6.4vw, 5.5rem);
  /* h2 encolhe rápido no celular: "INFRAESTRUTURAS" cabe inteira em 320px */
  --h2: clamp(1.375rem, -0.0625rem + 7.5vw, 3.75rem);
  --h3: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);

  /* Espaços e medidas */
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --secao: clamp(3.5rem, 2rem + 6vw, 7.5rem);
  --largura: 72rem;
  /* coluna de leitura: 40rem no celular/tablet, até ~51rem em telas grandes */
  --texto: clamp(40rem, 30rem + 18vw, 52rem);
  /* Cantos vivos, como tarjas e recortes da arte */
  --raio: 0;

  /* Volume: tudo que tem relevo é um bloco extrudado para baixo/esquerda em PRETO,
     a única tinta de volume da arte. Nada de sombra colorida nem contorno fino. */
  --bloco-botao: -1px 1px 0 #000, -2px 2px 0 #000, -3px 3px 0 #000, -4px 4px 0 #000, -5px 5px 0 #000, -6px 6px 0 #000;
  --bloco-botao-alto: -1px 1px 0 #000, -2px 2px 0 #000, -3px 3px 0 #000, -4px 4px 0 #000, -5px 5px 0 #000, -6px 6px 0 #000, -7px 7px 0 #000, -8px 8px 0 #000;
  --bloco-botao-baixo: -1px 1px 0 #000, -2px 2px 0 #000;

  /* Extrusão 3D dos títulos: preta, como na arte (lógica de quadrinhos).
     Por isso o fundo base é o marrom das manchas, onde o preto aparece. */
  --extrusao-cor: #000;

  /* Granulação (filtro SVG de ruído, tile 160px) */
  --grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ---------- 2. Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  background: var(--mancha);
  color: var(--creme);
  font-family: var(--fonte);
  font-size: var(--corpo);
  line-height: 1.6;
  font-variation-settings: 'wdth' 100;
  -webkit-font-smoothing: antialiased;
}

/* Granulação sobre a página inteira, como impressão em risografia */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1000;
  background-image: var(--grao);
  opacity: 0.08;
  pointer-events: none;
}

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

h1,
h2,
h3,
h4 {
  margin: 0 0 0.5em;
  line-height: 1.05;
  font-weight: 900;
  text-wrap: balance;
}

p {
  margin: 0 0 1em;
  text-wrap: pretty;
}

a {
  color: var(--ambar);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 0.16em;
}

strong {
  font-weight: 800;
}

/* Foco sempre visível: anel âmbar de 3px sobre fundo escuro; preto sobre creme e
   âmbar (onde o âmbar não teria contraste). Só outline, para não apagar a extrusão. */
:focus-visible,
.mostrar-foco {
  outline: 3px solid var(--ambar);
  outline-offset: 4px;
}

.fundo-creme :focus-visible,
.fundo-creme .mostrar-foco,
.fundo-ambar :focus-visible,
.fundo-ambar .mostrar-foco,
.card :focus-visible,
.card .mostrar-foco {
  outline-color: var(--preto);
}

.card--escuro :focus-visible,
.card--escuro .mostrar-foco {
  outline-color: var(--ambar);
}

/* Botão com extrusão: o anel envolve o bloco inteiro (a extrusão de 6px fica
   dentro dele), em vez de cortá-la e parecer uma borda a mais */
.botao:not(.botao--secundario):focus-visible,
.botao.mostrar-foco:not(.botao--secundario) {
  outline-offset: 10px;
}

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

.pular {
  position: absolute;
  left: 1rem;
  top: -10rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--ambar);
  color: var(--preto);
  font-weight: 800;
}

.pular:focus {
  top: 1rem;
}

.container {
  width: 100%;
  max-width: calc(var(--largura) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Regras do evag (client.evag.io/main.css) necessárias já na primeira pintura,
   porque o CSS do evag é carregado sem bloquear a renderização */
[data-evag='multiforms'] [data-evag='form'] {
  display: none;
}

[data-evag='multiforms'] [data-evag='form']:first-of-type {
  display: block;
}

.hidden {
  display: none;
}

/* o atributo hidden sempre vence o display dos componentes (ex.: .botao é inline-flex) */
[hidden] {
  display: none !important;
}

/* ---------- 3. Superfícies ---------- */
.secao {
  position: relative;
  padding-block: var(--secao);
  isolation: isolate;
}

/* Fundo de seção com as manchas da arte.
   - O marrom é o fundo contínuo da página (body), e as seções são transparentes:
     o título, no canto superior esquerdo, fica sempre sobre marrom, onde a extrusão
     preta aparece.
   - A mancha é a gota PRETA da arte, inteira, desenhada num pseudo-elemento com
     altura proporcional à seção: nunca cruza o topo nem a base (não há corte reto
     na troca de seção). Ela só sangra pela borda lateral da tela, e a ponta da haste
     (corte reto herdado da arte) fica sempre fora da tela.
   - Por padrão a gota fica à direita; com --esq, na metade de baixo, à esquerda.
   - Use só em seções de largura total (a borda da seção é a borda da tela). */
.fundo-manchas {
  position: relative;
  isolation: isolate;
  overflow-x: clip; /* a gota sangra pela lateral sem criar rolagem horizontal */
}

.fundo-manchas::after {
  content: '';
  position: absolute;
  z-index: -2;
  top: 8%;
  bottom: 8%;
  right: -7rem;
  aspect-ratio: 708 / 406;
  /* fica no lado direito: não invade a coluna dos títulos */
  max-width: min(55vw, 46rem);
  background: url('../img/gota-preta-dir.svg') no-repeat right center / contain;
  pointer-events: none;
}

/* --margens: seção de leitura centralizada. As gotas ficam nas duas margens,
   sangrando pelas bordas, sem invadir a coluna central (largura --texto). */
.fundo-manchas--margens::after,
.fundo-manchas--margens::before {
  max-width: calc((100vw - var(--texto)) / 2 + 6rem);
}

.fundo-manchas--margens::before {
  content: '';
  position: absolute;
  z-index: -2;
  top: 45%;
  bottom: 6%;
  left: -5rem;
  aspect-ratio: 708 / 406;
  background: url('../img/gota-preta-esq.svg') no-repeat left center / contain;
  pointer-events: none;
}

.fundo-manchas--margens::after {
  top: 4%;
  bottom: 50%;
}

.fundo-manchas--esq::after {
  top: 45%;
  bottom: 6%;
  right: auto;
  left: -5rem;
  max-width: 60vw;
  background-image: url('../img/gota-preta-esq.svg');
  background-position: left center;
}

/* CAPA: o fundo exatamente como o designer pensou: base preta coberta pelas manchas
   marrons da arte, no formato original, cobrindo a seção inteira e centralizado,
   com granulação mais marcada, como no arquivo. */
.fundo-manchas-arte {
  position: relative;
  isolation: isolate;
  background-color: var(--preto);
  background-image: url('../img/manchas.svg');
  background-size: cover;
  background-position: center;
}

.fundo-manchas-arte::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--grao);
  opacity: 0.1;
  pointer-events: none;
}

/* Retícula de meio-tom como SOMBREADO: pontos que diminuem a partir de um canto.
   Herda a cor do texto (creme no escuro, preto no creme). Use em .com-reticula,
   sempre num canto vazio: nunca por baixo de texto corrido. */
.com-reticula::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
  width: min(26rem, 70vw);
  aspect-ratio: 1;
  background-color: currentColor;
  -webkit-mask: url('../img/reticula-canto.svg') no-repeat left bottom / contain;
  mask: url('../img/reticula-canto.svg') no-repeat left bottom / contain;
  opacity: 0.22;
  pointer-events: none;
}

.com-reticula--direita::before {
  left: auto;
  right: 0;
  transform: scaleX(-1);
}

/* Em telas estreitas (e com zoom) o texto ocupa a largura toda: sem retícula */
@media (max-width: 48rem) {
  .com-reticula::before {
    display: none;
  }
}

.fundo-creme {
  background: var(--creme);
  color: var(--preto);
}

.fundo-creme a:not(.botao),
.card:not(.card--escuro) a:not(.botao) {
  color: var(--ambar-escuro);
}

.fundo-ambar {
  background: var(--ambar);
  color: var(--preto);
}

.fundo-ambar a:not(.botao) {
  color: var(--preto);
}

/* Padrão de "+" verdes (como na tela do celular) */
.padrao-mais {
  background-color: var(--preto);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M14 10v8M10 14h8' stroke='%2352ba3f' stroke-width='1.6' opacity='.55'/%3E%3C/svg%3E");
}

/* ---------- 4. Tipografia de marca ---------- */

/* Título extrudado: texto creme com contorno e extrusão preta */
.titulo-extrudado {
  color: var(--creme);
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: -0.01em;
  /* a extrusão preenche o vão entre palavras: mais espaço para não "colar" */
  word-spacing: 0.18em;
  /* extrusão rasa (títulos menores) */
  text-shadow:
    -0.01em 0.01em 0 var(--extrusao-cor),
    -0.02em 0.02em 0 var(--extrusao-cor),
    -0.03em 0.03em 0 var(--extrusao-cor),
    -0.04em 0.04em 0 var(--extrusao-cor),
    -0.05em 0.05em 0 var(--extrusao-cor),
    -0.06em 0.06em 0 var(--extrusao-cor),
    -0.07em 0.07em 0 var(--preto);
  /* contorno preto (metade visível por fora): garante contraste até sobre creme */
  -webkit-text-stroke: 0.04em var(--preto);
  paint-order: stroke fill;
  /* espaço para a extrusão não encostar no conteúdo abaixo */
  padding-bottom: 0.08em;
  /* palavra nunca é partida: o tamanho do título é que se ajusta à tela */
  overflow-wrap: normal;
  hyphens: manual;
}

/* Extrusão profunda (~14% da altura da letra), como o bloco 3D da arte */
.titulo-extrudado.titulo-1,
.titulo-extrudado.titulo-2 {
  text-shadow:
    -0.01em 0.01em 0 var(--extrusao-cor),
    -0.02em 0.02em 0 var(--extrusao-cor),
    -0.03em 0.03em 0 var(--extrusao-cor),
    -0.04em 0.04em 0 var(--extrusao-cor),
    -0.05em 0.05em 0 var(--extrusao-cor),
    -0.06em 0.06em 0 var(--extrusao-cor),
    -0.07em 0.07em 0 var(--extrusao-cor),
    -0.08em 0.08em 0 var(--extrusao-cor),
    -0.09em 0.09em 0 var(--extrusao-cor),
    -0.10em 0.10em 0 var(--extrusao-cor),
    -0.11em 0.11em 0 var(--extrusao-cor),
    -0.12em 0.12em 0 var(--extrusao-cor),
    -0.13em 0.13em 0 var(--extrusao-cor),
    -0.14em 0.14em 0 var(--extrusao-cor),
    -0.15em 0.15em 0 var(--preto);
  padding-bottom: 0.16em;
}

/* Em fundo claro, a letra creme com contorno só funciona em tamanho de cartaz.
   Títulos de seção (h2 e menores) sobre creme/âmbar viram letra preta chapada. */
.fundo-creme .titulo-extrudado:not(.titulo-1),
.fundo-ambar .titulo-extrudado:not(.titulo-1) {
  color: var(--preto);
  text-shadow: none;
  -webkit-text-stroke: 0;
  word-spacing: normal;
}

/* Largura dos títulos "SOBERANIA DIGITAL": semi-expandida, como na arte */
.largo {
  font-variation-settings: 'wdth' 106;
}

.estreito {
  font-variation-settings: 'wdth' 75;
}

.titulo-1 {
  font-size: var(--h1);
  line-height: 0.92;
}

.titulo-2 {
  font-size: var(--h2);
  line-height: 0.95;
}

.titulo-3 {
  font-size: var(--h3);
  font-weight: 800;
  line-height: 1.15;
}

/* Tarja-rótulo: caixa âmbar inclinada com texto itálico preto ("eu apoio") */
.tarja {
  display: inline-block;
  padding: 0.12em 0.45em 0.18em;
  background: var(--ambar);
  color: var(--preto);
  font-style: italic;
  font-weight: 900;
  font-variation-settings: 'wdth' 70;
  line-height: 1;
  letter-spacing: -0.01em;
  transform: rotate(-3deg);
}

.tarja--verde {
  background: var(--verde);
}

.tarja--creme {
  background: var(--creme);
}

/* Rótulo de seção (tarja menor sobre o título) */
.rotulo {
  font-size: clamp(1rem, 0.9rem + 0.6vw, 1.375rem);
  margin-bottom: 1rem;
}

/* Losango âmbar (ornamento e marcador) */
.losango {
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  background: var(--ambar);
  transform: rotate(45deg) skew(8deg, 8deg);
  flex: none;
}

.lista-losango {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5em;
}

.lista-losango li {
  position: relative;
  padding-left: 1.75em;
  margin-bottom: 0.75em;
}

.lista-losango li::before {
  content: '';
  position: absolute;
  left: 0.2em;
  top: 0.45em;
  width: 0.6em;
  height: 0.6em;
  background: var(--ambar);
  transform: rotate(45deg) skew(8deg, 8deg);
}

.fundo-creme .lista-losango li::before,
.lista-pec li::before {
  background: var(--preto);
}

.texto-corrido {
  max-width: var(--texto);
}

.texto-corrido p,
.texto-corrido li {
  font-size: var(--corpo);
}

.destaque {
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  font-weight: 700;
  line-height: 1.35;
}

/* ---------- 5. Botões ---------- */
/* Principal: bloco âmbar extrudado. Só para a ação principal (assinar). */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 3rem;
  margin-left: 6px; /* espaço para a extrusão à esquerda */
  margin-bottom: 6px;
  padding: 0.8rem 1.6rem;
  border: 0;
  border-radius: 0;
  background: var(--ambar);
  color: var(--preto);
  font: inherit;
  font-weight: 900;
  font-variation-settings: 'wdth' 112;
  font-size: 1.0625rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.1;
  /* o botão de assinar nunca quebra linha */
  white-space: nowrap;
  max-width: calc(100% - 6px);
  box-shadow: var(--bloco-botao);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.botao:hover {
  transform: translate(2px, -2px);
  box-shadow: var(--bloco-botao-alto);
}

/* Ao clicar, o bloco "afunda" na própria extrusão */
.botao:active {
  transform: translate(-4px, 4px);
  box-shadow: var(--bloco-botao-baixo);
}

/* Secundário: tarja chapada inclinada (mesma família da "eu apoio"), sem contorno
   e sem volume. Creme no escuro; preta sobre creme e âmbar. Menor que o "Assine". */
.botao--secundario {
  min-height: 2.75rem;
  margin: 0;
  padding: 0.55rem 1.1rem 0.6rem;
  background: var(--creme);
  color: var(--preto);
  font-style: italic;
  font-variation-settings: 'wdth' 75;
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  transform: rotate(-2deg);
  box-shadow: none;
}

.botao--secundario:hover {
  transform: rotate(-2deg) translateY(-2px);
  box-shadow: none;
}

.botao--secundario:active {
  transform: rotate(-2deg) translateY(1px);
  box-shadow: none;
}

.fundo-creme .botao--secundario,
.fundo-ambar .botao--secundario,
.card .botao--secundario {
  background: var(--preto);
  color: var(--creme);
}

.botao--grande {
  min-height: 3.75rem;
  padding: 1rem 2.25rem;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
}

/* Celular estreito: o botão principal ocupa a largura e reduz o respiro interno */
@media (max-width: 26rem) {
  .botao--grande {
    width: calc(100% - 6px);
    padding-inline: 0.75rem;
    letter-spacing: 0;
    font-size: 1.0625rem;
  }
}

@media (max-width: 22.5rem) {
  .botao--grande {
    font-size: 0.9375rem;
  }
}

/* ---------- 6. Cards ---------- */
/* Recortes chapados, como a tarja e o celular da arte: peças planas, levemente
   giradas, sem contorno e sem sombra. A rotação alterna para dar ar de colagem. */
.card {
  position: relative;
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
  background: var(--creme);
  color: var(--preto);
  transform: rotate(-0.8deg);
}

.card:nth-child(even) {
  transform: rotate(0.7deg);
}

/* Escuro: recorte chapado em preto (a tinta do bloco de extrusão), visível sobre o marrom */
.card--escuro {
  background: var(--preto);
  color: var(--creme);
}

/* Cards com formulário ou dados não giram (leitura e alinhamento dos campos) */
.card--reto,
.card--reto:nth-child(even) {
  transform: none;
}

/* ---------- 7. Campos de formulário ---------- */
/* Pensados para o card creme do abaixo-assinado */
.campo {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

.campo label {
  font-weight: 800;
  font-size: 1rem;
}

/* Campo: faixa branca chapada com base preta grossa (contraste da base 16:1 sobre creme) */
.campo input,
.campo select {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.85rem;
  border: 0;
  border-bottom: 3px solid var(--preto);
  border-radius: 0;
  background: #fffdf6;
  color: var(--preto);
  font: inherit;
  font-size: 1.0625rem;
}

.campo input::placeholder {
  color: #5e5a4c;
}

.campo input:focus-visible,
.campo select:focus-visible,
.campo .mostrar-foco {
  outline: 3px solid var(--preto);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--ambar);
}

.campo [aria-invalid='true'] {
  border-bottom-color: var(--erro-escuro);
  border-bottom-width: 4px;
  background: #fff1ee;
}

.campo-erro {
  display: flex;
  gap: 0.4rem;
  align-items: flex-start;
  min-height: 0;
  margin: 0;
  color: var(--erro-escuro);
  font-size: 0.9375rem;
  font-weight: 700;
}

.campo-erro:empty {
  display: none;
}

/* Ícone "!" para o erro nunca depender só da cor */
.campo-erro::before {
  content: '!';
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.1rem;
  border-radius: 50%;
  background: var(--erro-escuro);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 900;
}

.campo-ok {
  display: flex;
  gap: 0.4rem;
  margin: 0;
  color: var(--verde-escuro);
  font-size: 0.9375rem;
  font-weight: 700;
}

.campo-ok::before {
  content: '✓';
  font-weight: 900;
}

.fundo-escuro .campo-erro,
.fundo-manchas .campo-erro {
  color: var(--erro);
}

/* Status: mini tarjas chapadas (mesma família da "eu apoio"), com ícone + texto,
   nunca só cor. */
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.3em 0.65em 0.35em;
  font-size: 1rem;
  font-style: italic;
  font-weight: 900;
  font-variation-settings: 'wdth' 92;
  line-height: 1.1;
}

.status::before {
  font-style: normal;
  font-weight: 900;
}

.status--sim {
  background: var(--verde);
  color: var(--preto);
}

.status--sim::before {
  content: '✓';
}

/* "ainda não": tarja creme com círculo vazado (ainda falta marcar) */
.status--nao {
  background: var(--creme);
  color: var(--preto);
}

.status--nao::before {
  content: '';
  width: 0.7em;
  height: 0.7em;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.fundo-creme .status--nao,
.card .status--nao {
  background: var(--preto);
  color: var(--creme);
}

/* ---------- 8. Tabelas que viram blocos no celular ---------- */
.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.tabela th,
.tabela td {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid #3a352a;
}

@media (max-width: 40rem) {
  .tabela thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .tabela tr {
    display: block;
    padding: 0.5rem 0;
    border-bottom: 1px solid #3a352a;
  }

  .tabela td {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.2rem 0;
    border: 0;
  }

  .tabela td::before {
    content: attr(data-rotulo);
    color: var(--cinza-texto);
    font-weight: 700;
  }
}

/* ---------- 9. Selo de conteúdo de exemplo ---------- */
[data-exemplo] {
  position: relative;
}

/* Aviso de exemplo: tarja creme inclinada, da mesma família da "eu apoio",
   colada logo acima do título da seção fictícia. É texto comum (lido pelo leitor
   de tela) e some junto com a seção. CHECKLIST: nenhum aviso destes na versão pública. */
.selo-exemplo {
  display: inline-block;
  margin: 0 0 0.75rem;
  padding: 0.3em 0.7em 0.35em;
  background: var(--creme);
  color: var(--preto);
  font-size: 1rem;
  font-style: italic;
  font-weight: 900;
  font-variation-settings: 'wdth' 75;
  line-height: 1;
  transform: rotate(2deg);
}

.selo-exemplo::before {
  content: '';
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  margin-right: 0.45em;
  background: var(--ambar);
  transform: rotate(45deg);
}

/* ---------- 12. Página: cabeçalho ---------- */
.topo {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--preto);
}

.topo-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 3.75rem;
}

.topo-marca {
  display: block;
  width: clamp(8rem, 6rem + 6vw, 10rem);
  margin-right: auto;
}

.topo-nav ul {
  display: flex;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.topo-menu-botao {
  display: none;
  border: 0;
  font: inherit;
  font-weight: 900;
  font-style: italic;
  font-size: 1.0625rem;
  cursor: pointer;
}

/* celular: "Menu" em tarja abre a lista num painel abaixo do cabeçalho */
@media (max-width: 47.99rem) {
  .topo-menu-botao {
    display: inline-block;
    padding: 0.4rem 0.8rem 0.45rem;
  }

  .topo-nav ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 0.5rem var(--gutter) 1rem;
    background: var(--preto);
  }

  .topo-nav ul.aberto {
    display: flex;
  }

  .topo-nav ul a {
    display: block;
    padding: 0.75rem 0;
    font-size: 1.125rem;
  }

  .topo-inner {
    gap: 0.75rem;
  }
}

.topo-nav a {
  color: var(--creme);
  font-weight: 700;
  text-decoration: none;
}

.topo-nav a:hover {
  text-decoration: underline;
}

a.tarja {
  color: var(--preto);
  text-decoration: none;
}

.topo-assine {
  padding: 0.45rem 0.9rem 0.5rem;
  font-size: 1.125rem;
}

/* ---------- 13. Página: capa ---------- */
/* Ordem da página de referência: capa (fundo + selo centralizado + contador),
   conteúdo do abaixo-assinado, formulário. A capa usa a textura da arte sem
   adaptação: cobrindo a seção inteira, centralizada, no formato original. */
.capa {
  padding-block: clamp(2rem, 1rem + 4vw, 5rem);
  text-align: center;
}

.capa-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.capa-h1 {
  margin: 0;
}

.capa-selo {
  width: clamp(18rem, 10rem + 30vw, 30rem);
  margin-inline: auto;
}

/* Contador (widget nativo do evag), no visual da arte */
.contador {
  width: 100%;
  max-width: 28rem;
  margin-top: 0.5rem;
}

.contador .evag-signatures-bar {
  height: 0.9rem;
  border: 2px solid var(--ambar);
  border-radius: 0;
  background: var(--preto);
}

.contador .evag-signatures-text {
  margin-top: 0.4rem;
  color: var(--creme) !important;
  font-size: 1rem;
  font-weight: 700;
}

/* Texto do abaixo-assinado: coluna de leitura centralizada; termina na chamada e
   emenda direto no formulário, na mesma coluna */
.abaixo-assinado {
  padding-bottom: 1.5rem;
}

/* Parágrafos que abrem com negrito ("A tecnologia não é neutra:" etc.): o negrito vira
   uma mini tarja âmbar, como a "eu apoio". Texto inalterado. */
.abaixo-assinado p:not(.chamada-assinar) > strong:first-child {
  padding: 0.05em 0.35em 0.1em;
  background: var(--ambar);
  color: var(--preto);
  font-style: italic;
  font-weight: 900;
  font-variation-settings: 'wdth' 85;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* frase de fecho antes da chamada: um pouco maior (texto inalterado) */
.texto-corrido .fecho {
  font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem);
  font-weight: 700;
  line-height: 1.35;
}

/* Os 8 pontos da PEC: a mesma lista, apresentada como recortes creme girados */
.lista-pec {
  display: grid;
  gap: 1.25rem;
  margin: 1.75rem 0 2.25rem;
}

.lista-pec li {
  margin: 0;
  padding: 1.25rem 1.25rem 1.25rem 3rem;
  background: var(--creme);
  color: var(--preto);
  transform: rotate(-0.6deg);
}

.lista-pec li:nth-child(even) {
  transform: rotate(0.5deg);
}

.lista-pec li::before {
  left: 1.2rem;
  top: 1.55rem;
}

.lista-pec li strong {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 1.125em;
  line-height: 1.2;
}

@media (min-width: 48rem) {
  .lista-pec {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* respiro antes de cada título de seção do documento */
.abaixo-assinado h2:not(:first-child) {
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.abaixo-assinado .texto-corrido,
.assinar .form-card {
  margin-inline: auto;
  max-width: var(--texto);
}

/* o formulário acompanha a coluna até um limite confortável para os campos */
.assinar .form-card {
  max-width: min(var(--texto), 44rem);
}

/* "Assine e compartilhe." (frase final do documento, texto inalterado) vira a tarja
   de chamada, no estilo "eu apoio" da arte, com uma seta para o formulário logo abaixo.
   (seletor composto para vencer o tamanho de .texto-corrido p) */
.texto-corrido .chamada-assinar {
  display: inline-block;
  position: relative;
  margin: 1.5rem 0 3.5rem;
  padding: 0.2em 0.6em 0.3em;
  background: var(--ambar);
  color: var(--preto);
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.5rem);
  font-style: italic;
  font-variation-settings: 'wdth' 70;
  line-height: 1;
  transform: rotate(-2deg);
}

.chamada-assinar strong {
  font-weight: 900;
}

/* seta decorativa (triângulo âmbar) apontando para o formulário */
.chamada-assinar::after {
  content: '';
  position: absolute;
  left: 1.2em;
  top: 100%;
  border-left: 0.45em solid transparent;
  border-right: 0.45em solid transparent;
  border-top: 0.55em solid var(--ambar);
}

.assinar {
  padding-top: 0;
}

/* ---------- 14. Página: formulário ---------- */
#assinar {
  scroll-margin-top: 3.75rem;
}

.form-card {
  max-width: 34rem;
}

.form-titulo {
  margin: 0 0 0.25rem;
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
  font-variation-settings: 'wdth' 106;
  text-transform: uppercase;
  line-height: 1.1;
}

.form-nota {
  margin-bottom: 1.25rem;
  font-size: 0.9375rem;
}

.obrig {
  color: var(--erro-escuro);
}

.campo-linha {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 0.75rem;
}

/* celular estreito: município em linha própria, para nomes longos não cortarem */
@media (max-width: 25rem) {
  .campo-linha {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .campo-uf select {
    max-width: 8rem;
  }
}

/* bairro: o evagJS põe .hidden no select quando o município não tem bairros */
.campo-bairro:has(select.hidden) {
  display: none;
}

.check {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin: 0.25rem 0 1rem;
  font-size: 1rem;
  cursor: pointer;
}

.check input {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  margin: 0.1rem 0 0;
  accent-color: var(--preto);
}

.consentimento {
  font-size: 0.9375rem;
}

.botao--bloco {
  width: calc(100% - 6px);
}

/* Agradecimento */
.obrigado p {
  font-size: 1.0625rem;
}

/* ao rolar até o agradecimento, o cabeçalho fixo não cobre o título */
#titulo-obrigado {
  scroll-margin-top: 5rem;
}

/* "Compartilhar no WhatsApp" é longo: pode quebrar linha no celular */
.compartilhar .botao--grande {
  white-space: normal;
  text-align: left;
  line-height: 1.15;
}

.compartilhar-outros {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.icone {
  display: inline-block;
  flex: none;
  width: 1.4em;
  height: 1.4em;
  background-color: currentColor;
  -webkit-mask: var(--icone) center / contain no-repeat;
  mask: var(--icone) center / contain no-repeat;
}

/* ---------- 16. Página: infográficos ---------- */
/* emenda no formulário sem um vão duplo entre as seções */
.infograficos {
  padding-top: clamp(1rem, 0.5rem + 2vw, 2.5rem);
}

.assinar {
  padding-bottom: clamp(2rem, 1rem + 3vw, 4rem);
}

/* mesma coluna do texto do abaixo-assinado: a margem não "pula" ao rolar */
.infograficos > .container {
  max-width: calc(var(--texto) + 2 * var(--gutter));
}

.infograficos .container > .titulo-extrudado {
  margin-bottom: 0;
}

.info {
  margin-top: clamp(3rem, 2rem + 3vw, 5rem);
}

.info-titulo {
  font-size: clamp(1.5rem, 1rem + 2.2vw, 2.5rem);
  line-height: 1;
}

/* --- O caminho de uma PEC --- */
.info-votos {
  display: grid;
  gap: 2rem;
  margin: 1.5rem 0 2.5rem;
}

.info-numero {
  margin: 0;
  color: var(--creme);
  font-size: clamp(5rem, 3rem + 9vw, 9rem);
  font-weight: 900;
  font-variation-settings: 'wdth' 106;
  line-height: 0.9;
  -webkit-text-stroke: 0.03em var(--preto);
  paint-order: stroke fill;
  text-shadow:
    -0.01em 0.01em 0 #000, -0.02em 0.02em 0 #000, -0.03em 0.03em 0 #000,
    -0.04em 0.04em 0 #000, -0.05em 0.05em 0 #000, -0.06em 0.06em 0 #000,
    -0.07em 0.07em 0 #000, -0.08em 0.08em 0 #000;
}

.info-legenda {
  margin: 0.5rem 0 0.75rem;
  font-size: 1.0625rem;
}

/* 3/5 visível sem ler: 5 blocos chapados, 3 cheios de retícula âmbar */
.info-quintos {
  display: flex;
  gap: 0.35rem;
  max-width: 20rem;
}

.info-quintos span {
  flex: 1;
  height: 1.6rem;
  background: var(--preto);
  transform: skewX(-12deg);
}

.info-quintos .cheio {
  background-color: var(--ambar);
  background-image: radial-gradient(var(--preto) 1px, transparent 1.5px);
  background-size: 6px 6px;
}

@media (min-width: 48rem) {
  .info-votos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Trilha: um percurso só, agrupado por Casa, com setas âmbar no sentido da leitura */
.trilha,
.trilha-paradas {
  margin: 0;
  padding: 0;
  list-style: none;
}

.trilha {
  display: grid;
  gap: 2rem;
  counter-reset: parada;
}

/* rótulo da Casa: tarja preta inclinada sobre o grupo */
.trilha-casa {
  display: inline-block;
  margin: 0 0 0.75rem;
  padding: 0.2em 0.6em 0.25em;
  background: var(--preto);
  color: var(--creme);
  font-size: 0.9375rem;
  font-weight: 900;
  font-style: italic;
  font-variation-settings: 'wdth' 85;
  transform: rotate(-2deg);
}

.trilha-paradas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.9rem;
}

/* cada parada: tarja creme chapada, com o número no losango */
.trilha-paradas li {
  position: relative;
  padding: 0.55rem 0.9rem 0.6rem 2.6rem;
  background: var(--creme);
  color: var(--preto);
  font-weight: 800;
  line-height: 1.25;
  counter-increment: parada;
  transform: rotate(-1deg);
}

.trilha-paradas li:nth-child(even) {
  transform: rotate(0.8deg);
}

.trilha-paradas li::before {
  content: counter(parada);
  position: absolute;
  left: 0.6rem;
  top: 50%;
  display: grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  margin-top: -0.725rem;
  background: var(--ambar);
  font-size: 0.8125rem;
  font-weight: 900;
}

/* seta âmbar entre as paradas do mesmo grupo (a última de cada grupo não tem seta:
   o rótulo da Casa seguinte já marca a passagem) */
.trilha-paradas li:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -1.45rem;
  margin-top: -0.55rem;
  border-top: 0.55rem solid transparent;
  border-bottom: 0.55rem solid transparent;
  border-left: 0.75rem solid var(--ambar);
}

.trilha-grupo--fim .trilha-paradas li {
  background: var(--ambar);
  font-size: 1.0625rem;
}

.trilha-grupo--fim .trilha-paradas li::before {
  background: var(--preto);
  color: var(--ambar);
}

/* desktop: as três Casas lado a lado, cada uma descendo em coluna */
@media (min-width: 48rem) {
  .trilha {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 1.5rem;
  }
}

/* o percurso desce em todas as larguras: as setas apontam para baixo */
.trilha-paradas {
  flex-direction: column;
  align-items: stretch;
  gap: 1.4rem;
}

.trilha-paradas li:not(:last-child)::after {
  top: auto;
  right: auto;
  bottom: -1.1rem;
  left: 50%;
  margin: 0 0 0 -0.55rem;
  border-left: 0.55rem solid transparent;
  border-right: 0.55rem solid transparent;
  border-top: 0.75rem solid var(--ambar);
  border-bottom: 0;
}

/* --- O que muda na Constituição --- */
.info-artigos {
  display: grid;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

/* recortes com leve rotação alternada; o 219-C (artigo novo) é o maior e é âmbar */
.artigo {
  padding: 1.25rem 1.25rem 1rem;
  background: var(--creme);
  color: var(--preto);
  transform: rotate(-0.6deg);
}

.artigo:nth-child(even) {
  transform: rotate(0.5deg);
}

.artigo--largo {
  background: var(--ambar);
  transform: rotate(-0.4deg);
}

/* celular: sem rotação no card largo, para respeitar a margem lateral */
@media (max-width: 47.99rem) {
  .artigo--largo {
    transform: none;
  }
}

.sem-quebra {
  white-space: nowrap;
}

.artigo-num {
  margin: 0;
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
  font-weight: 900;
  font-variation-settings: 'wdth' 106;
  line-height: 1;
}

.artigo-novo {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.15em 0.45em 0.2em;
  background: var(--preto);
  color: var(--ambar);
  font-size: 0.875rem;
  font-style: italic;
  vertical-align: middle;
  transform: rotate(-3deg);
}

.artigo-resumo {
  margin: 0.5rem 0 0.5rem;
}

.artigo summary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  font-size: 1rem;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.artigo summary::marker,
.artigo summary::-webkit-details-marker {
  content: '';
  display: none;
}

.artigo summary::before {
  content: '';
  border-left: 0.45em solid currentColor;
  border-top: 0.32em solid transparent;
  border-bottom: 0.32em solid transparent;
  transition: transform 0.15s ease;
}

.artigo details[open] summary::before {
  transform: rotate(90deg);
}

.artigo summary .fechar,
.artigo details[open] summary .abrir {
  display: none;
}

.artigo details[open] summary .fechar {
  display: inline;
}

/* 219-C aberto: o âmbar fica no cabeçalho; o texto legal aparece sobre creme */
.artigo--largo .texto-legal {
  max-width: none;
  margin-inline: -1.25rem;
  padding: 1.25rem 1.25rem 0.5rem 1.5rem;
  border-left-width: 6px;
  background: var(--creme);
}

.artigo--largo .texto-legal > * {
  max-width: 68ch;
}

/* texto legal: filete preto lateral (todo o texto é acrescentado), mesmo tamanho do
   corpo e linhas de leitura confortáveis (~70 caracteres) */
.texto-legal {
  max-width: 68ch;
  margin: 0.5rem 0 0.5rem;
  padding-left: 1rem;
  border-left: 4px solid var(--preto);
  font-size: var(--corpo);
  line-height: 1.55;
}

.texto-legal p {
  margin: 0 0 0.85em;
}

.artigo-incisos {
  margin: 0 0 0.85em;
  padding-left: 0;
  list-style: none;
}

.artigo-incisos li {
  margin-bottom: 0.6em;
}

.info-nota {
  margin-top: 1.25rem;
  color: var(--cinza-texto);
  font-size: 0.9375rem;
}

@media (min-width: 48rem) {
  .info-artigos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .artigo--largo {
    grid-column: 1 / -1;
  }
}

/* --- A PEC na prática: pares caso -> dispositivo --- */
.pratica-lista {
  display: grid;
  gap: 2rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.pratica-par {
  display: grid;
  gap: 0.75rem;
  align-items: center;
}

.pratica-caso,
.pratica-pec {
  padding: 1.25rem;
}

/* o caso: recorte preto girado; o dispositivo: recorte creme girado para o outro lado */
.pratica-caso {
  background: var(--preto);
  color: var(--creme);
  transform: rotate(-0.8deg);
}

.pratica-pec {
  background: var(--creme);
  color: var(--preto);
  transform: rotate(0.5deg);
}

.pratica-caso p,
.pratica-pec p {
  margin: 0;
}

.pratica-caso p:not(.pratica-rotulo) {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
}

.pratica-rotulo {
  margin-bottom: 0.5rem !important;
  font-size: 0.8125rem;
  font-weight: 900;
  font-style: italic;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pratica-disp + .pratica-disp {
  margin-top: 0.75rem !important;
}

.pratica-ref {
  display: inline-block;
  margin-right: 0.3rem;
  padding: 0.05em 0.4em 0.1em;
  background: var(--ambar);
  font-weight: 900;
  font-style: italic;
  font-size: 0.875rem;
}

/* seta âmbar: para baixo no celular, para a direita no desktop */
.pratica-seta {
  justify-self: center;
  width: 0;
  height: 0;
  border-left: 0.8rem solid transparent;
  border-right: 0.8rem solid transparent;
  border-top: 1rem solid var(--ambar);
}

@media (min-width: 48rem) {
  .pratica-par {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.4fr);
  }

  .pratica-seta {
    border-top: 0.8rem solid transparent;
    border-bottom: 0.8rem solid transparent;
    border-left: 1rem solid var(--ambar);
    border-right: 0;
  }
}

.info-cta {
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  text-align: center;
}

/* ---------- 15. Página: rodapé ---------- */
.rodape {
  background: var(--preto);
  padding-block: 2.5rem;
}

.rodape-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 2.5rem;
}

.rodape-marca {
  display: block;
  width: clamp(13rem, 50vw, 15rem);
  margin-right: auto;
}

.rodape-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rodape-links a {
  color: var(--creme);
}

.feito-por img {
  height: 14px;
  width: auto;
  /* creme, em harmonia com o resto do rodapé */
  filter: brightness(0) invert(92%) sepia(9%) saturate(400%) hue-rotate(10deg);
}

/* ---------- 17. Bloco "Leia a PEC" (página principal) ---------- */
.leia-pec {
  padding-top: 0;
}

.leia-pec > .container {
  max-width: calc(var(--texto) + 2 * var(--gutter));
}

.leia-pec-card {
  max-width: 46rem;
  margin-top: 1.5rem;
}

.leia-pec-ementa {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  font-weight: 700;
  line-height: 1.4;
}

.leia-pec-autoria {
  font-style: italic;
}

.leia-pec .pec-acoes {
  margin-top: 1.5rem;
}

.info-integra {
  margin-top: 1rem;
  font-weight: 700;
}

/* menu: página atual */
.topo-nav a[aria-current='page'] {
  color: var(--ambar);
  text-decoration: underline;
  text-decoration-thickness: 0.12em;
}

/* ---------- 18. Página "Leia a PEC" (íntegra) ---------- */
/* Página documental, para quem quer ler a proposta: sem manchas nem selo. A
   identidade fica na letra, no âmbar (filete do texto novo, "Art.") e no botão
   de assinar. Coluna de leitura de ~70 caracteres; índice ao lado no desktop. */
.pec-capa {
  background: var(--preto);
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  border-bottom: 6px solid var(--ambar);
}

.pec-casa {
  margin-bottom: 1.5rem;
  color: var(--cinza-texto);
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.pec-h1 {
  margin-bottom: 0.75rem;
  font-family: 'Archivo', 'Archivo Condensado Fallback', Arial, sans-serif;
  font-size: clamp(1.5rem, 1rem + 2.4vw, 2.75rem);
  font-variation-settings: 'wdth' 75;
  line-height: 1.08;
}

.pec-autoria {
  color: var(--cinza-texto);
}

.pec-ementa {
  max-width: 40rem;
  margin-block: 1.5rem 0;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  font-weight: 600;
  line-height: 1.45;
}

.pec-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

/* link de download: discreto ao lado do "Assine" (seta âmbar + tamanho do arquivo) */
.pec-baixar {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 2.75rem;
  color: var(--creme);
  font-weight: 800;
}

.pec-baixar::before {
  content: '';
  flex: none;
  width: 0;
  height: 0;
  border-left: 0.45em solid transparent;
  border-right: 0.45em solid transparent;
  border-top: 0.6em solid var(--ambar);
}

.pec-baixar-info {
  color: var(--cinza-texto);
  font-weight: 400;
  font-size: 0.875em;
}

/* no card creme o link segue a cor de link do card (âmbar-escuro) */
.card .pec-baixar::before {
  border-top-color: var(--ambar-escuro);
}

/* "Ler a íntegra" é a ação principal do bloco: tarja um pouco maior */
.leia-pec .botao--secundario {
  font-size: 1.125rem;
  padding: 0.65rem 1.3rem 0.7rem;
}

.card .pec-baixar-info {
  color: #4a4535;
}

.pec-layout {
  display: grid;
  gap: 2.5rem;
  padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem) clamp(2rem, 1.5rem + 2vw, 3rem);
}

/* índice: no celular, um bloco compacto antes do texto */
.pec-indice {
  font-size: 1rem;
}

.pec-indice-titulo {
  margin-bottom: 0.75rem;
  color: var(--ambar);
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pec-indice ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pec-indice ol ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
  margin: 0.25rem 0 0.5rem;
}

.pec-indice a {
  display: inline-block;
  padding-block: 0.4rem;
  color: var(--creme);
  font-weight: 700;
}

.pec-indice ol ol a {
  font-weight: 400;
}

/* celular: alvos de toque de 44px nos artigos em linha */
@media (max-width: 63.99rem) {
  .pec-indice ol ol a {
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding-block: 0.6rem;
  }
}

.pec-legenda {
  display: flex;
  gap: 0.6rem;
  margin: 1rem 0 0;
  color: var(--cinza-texto);
  font-size: 0.875rem;
  line-height: 1.4;
}

.pec-legenda-filete {
  flex: none;
  width: 4px;
  background: var(--ambar);
}

.pec-doc {
  min-width: 0;
  line-height: 1.65;
}

.pec-doc p {
  max-width: 68ch;
}

.pec-parte + .pec-parte {
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.pec-h2 {
  margin-bottom: 1.5rem;
  font-size: var(--h3);
  font-variation-settings: 'wdth' 106;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* traço âmbar inclinado sob o título, como a tarja */
.pec-h2::after {
  content: '';
  display: block;
  width: 3rem;
  height: 6px;
  margin-top: 0.5rem;
  background: var(--ambar);
  transform: skewX(-20deg);
}

.pec-artigo strong {
  color: var(--ambar);
}

/* texto acrescentado à Constituição: filete âmbar (mesma lógica do infográfico) */
.pec-novo {
  margin: 0 0 1.5em;
  padding-left: clamp(1rem, 0.75rem + 1vw, 1.5rem);
  border-left: 4px solid var(--ambar);
}

/* "Art. 21. ......": a linha pontilhada quebra em vez de vazar no celular */
.pec-novo p {
  overflow-wrap: anywhere;
}

.pec-local {
  margin-top: 2.5rem;
}

.pec-assinatura {
  font-weight: 800;
}

.pec-fim {
  padding-block: 0 var(--secao);
}

.pec-fim-inner > * {
  border-top: 2px solid rgb(239 234 213 / 0.25);
  padding-top: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.pec-fim-inner > * > .titulo-extrudado {
  margin-bottom: 0.5rem;
}

@media (min-width: 64rem) {
  .pec-capa-inner,
  .pec-layout,
  .pec-fim-inner {
    display: grid;
    grid-template-columns: 13rem minmax(0, 46rem);
    column-gap: clamp(2.5rem, 1rem + 3vw, 4.5rem);
    justify-content: center;
  }

  .pec-capa-inner > *,
  .pec-fim-inner > * {
    grid-column: 2;
  }

  /* índice fixo ao lado do texto */
  .pec-indice {
    position: sticky;
    top: 5.5rem;
    align-self: start;
  }

  .pec-indice ol ol {
    display: block;
    margin-left: 1rem;
  }

  .pec-indice ol ol a {
    padding-block: 0.2rem;
  }
}

/* ---------- 19. Painel de deputados ---------- */
.deputados {
  padding-top: 0;
}

.deputados > .container {
  max-width: calc(var(--texto) + 2 * var(--gutter));
}

/* placar: título, plenário com o número no centro do arco, texto e data */
.placar {
  display: grid;
  grid-template-areas:
    'titulo'
    'plenario'
    'legenda'
    'texto'
    'data';
  justify-items: center;
  text-align: center;
}

.placar .titulo-extrudado {
  grid-area: titulo;
  justify-self: start;
  text-align: left;
}

.placar-plenario,
.placar-numero,
.placar-barra {
  grid-area: plenario;
}

.placar-plenario {
  width: 100%;
  max-width: 46rem;
  margin-top: 1rem;
}

.placar-plenario svg {
  overflow: visible;
}

/* número no "buraco" do arco */
.placar-numero {
  align-self: end;
  margin: 0;
  line-height: 0.9;
}

.placar-total {
  display: block;
  color: var(--creme);
  font-size: clamp(2.5rem, 0.5rem + 9vw, 7rem);
  font-weight: 900;
  font-variation-settings: 'wdth' 106;
  -webkit-text-stroke: 0.03em var(--preto);
  paint-order: stroke fill;
  text-shadow:
    -0.01em 0.01em 0 #000, -0.02em 0.02em 0 #000, -0.03em 0.03em 0 #000,
    -0.04em 0.04em 0 #000, -0.05em 0.05em 0 #000, -0.06em 0.06em 0 #000;
}

.placar-de {
  display: block;
  margin-top: 0.3rem;
  color: var(--cinza-texto);
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.375rem);
  font-weight: 800;
}

/* sem JavaScript (ou antes do desenho): barra simples no lugar do plenário */
.placar-barra {
  align-self: center;
  width: 100%;
  max-width: 30rem;
  height: 1.6rem;
  margin-top: 1rem;
  background: var(--preto);
  transform: skewX(-12deg);
}

.placar-barra span {
  display: block;
  height: 100%;
  background-color: var(--ambar);
  background-image: radial-gradient(var(--preto) 1px, transparent 1.5px);
  background-size: 6px 6px;
}

.placar:not(.com-plenario) .placar-numero {
  align-self: start;
  margin-top: 3.5rem;
}

.com-plenario .placar-barra {
  display: none;
}

.placar-legenda {
  grid-area: legenda;
  display: none;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
  font-size: 0.9375rem;
  font-weight: 800;
}

/* traço tracejado igual à linha da meta no plenário */
.placar-legenda::before {
  content: '';
  width: 1.75rem;
  border-top: 3px dashed var(--creme);
}

/* até o desktop (inclui tablet em pé e zoom de 200%): legenda abaixo do arco, para o
   rótulo da meta nunca sair da tela */
@media (max-width: 63.99rem) {
  .placar-legenda {
    display: flex;
  }

  .plenario-meta-texto {
    display: none;
  }
}

.placar-texto {
  grid-area: texto;
  max-width: 34rem;
  margin: 1.5rem 0 0.25rem;
}

.placar-atualizado {
  grid-area: data;
  color: var(--cinza-texto);
  font-size: 0.9375rem;
}

/* cadeiras: vazias em pardo (3,3:1 sobre o marrom, o arco inteiro fica legível) e
   preenchidas em âmbar, como pontos de retícula */
.cadeira {
  fill: #706856;
}

.cadeira--acesa {
  transition: fill 0.25s ease;
  transition-delay: calc(var(--i) * 4ms);
}

.aceso .cadeira--acesa {
  fill: var(--ambar);
}

.plenario-meta {
  stroke: var(--creme);
  stroke-width: 4;
  stroke-dasharray: 10 6;
}

.plenario-meta-texto {
  fill: var(--creme);
  font-size: 34px;
  font-weight: 800;
}

.deputados-nota-exemplo {
  max-width: 40rem;
  margin-inline: auto;
  color: var(--cinza-texto);
  font-size: 0.9375rem;
  text-align: center;
}

/* gráfico por partido: barra pardo = bancada (na escala do maior partido),
   barra âmbar com retícula dentro = confirmados. Mesmas cores do plenário. */
.partidos {
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}

.partidos-intro {
  max-width: 40rem;
  color: var(--cinza-texto);
  font-size: 0.9375rem;
}

.partidos-lista {
  display: grid;
  gap: 0.6rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.partido {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
}

/* barra na escala do maior partido (--proporcao) e a contagem logo em seguida */
.partido-medida {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.partido p {
  margin: 0;
}

.partido-nome {
  font-weight: 800;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.partido-conta {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.partido-conta strong {
  color: var(--ambar);
  font-size: 1.25em;
}

.partido-barra {
  flex: none;
  width: calc((100% - 7rem) * var(--proporcao));
  min-width: 0.75rem;
  height: 1.5rem;
  background: #706856;
  transform: skewX(-12deg);
}

.partido-barra span {
  display: block;
  height: 100%;
  min-width: 4px;
  background-color: var(--ambar);
  background-image: radial-gradient(var(--preto) 1px, transparent 1.5px);
  background-size: 6px 6px;
}

/* partidos sem nenhum confirmado: agrupados numa faixa só, com o tamanho de cada bancada */
.partidos-zero {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--preto);
  transform: rotate(-0.4deg);
}

.partidos-zero-titulo {
  margin-bottom: 0.75rem;
}

.partidos-zero-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* mini tarjas chapadas em pardo (a cor de "bancada"), como os status dos cartões;
   creme sobre pardo: 4,6:1 */
.partidos-zero-lista li {
  padding: 0.2em 0.55em 0.25em;
  background: #706856;
  color: var(--creme);
  font-style: italic;
  font-weight: 900;
  font-variation-settings: 'wdth' 85;
  font-size: 0.9375rem;
  transform: rotate(-1.5deg);
}

.partidos-zero-lista li:nth-child(even) {
  transform: rotate(1deg);
}

.partidos-zero-lista li > span {
  margin-left: 0.2em;
  font-style: normal;
  font-weight: 400;
}

/* celular: nome em cima; barra e contagem na largura toda logo abaixo */
@media (max-width: 30rem) {
  .partido {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.25rem;
  }

  .partido-medida {
    padding-left: 0.4rem;
  }
}

/* filtros sobre o fundo escuro */
.filtros {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1rem;
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.filtros .campo:last-child {
  grid-column: 1 / -1;
}

@media (min-width: 48rem) {
  .filtros {
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.4fr);
  }

  .filtros .campo:last-child {
    grid-column: auto;
  }
}

.deputados-resultado {
  margin: 0.5rem 0 1.25rem;
  font-weight: 700;
}

/* lista: recortes chapados; confirmados em creme, os demais em preto */
.deputados-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dep {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  column-gap: 0.9rem;
  align-items: start;
  padding: 0.75rem;
  background: var(--preto);
  color: var(--creme);
  transform: rotate(-0.6deg);
}

.dep:nth-child(even) {
  transform: rotate(0.5deg);
}

.dep:focus-visible {
  outline-offset: 4px;
}

.dep--sim {
  background: var(--creme);
  color: var(--preto);
}

.dep img {
  grid-row: 1 / -1;
  width: 4.5rem;
  height: 6rem;
  object-fit: cover;
  background: #2a251b;
}

.dep p {
  margin: 0;
}

.dep-nome {
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.dep-partido {
  margin-top: 0.15rem !important;
  font-size: 0.9375rem;
}

.dep .status {
  align-self: end;
  justify-self: start;
  margin-top: 0.5rem !important;
  font-size: 0.875rem;
}

.dep--sim .status--sim {
  background: var(--verde-escuro);
  color: var(--creme);
}

.deputados-mais {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.5rem;
  margin-top: 1.5rem;
}

.deputados-mais a {
  color: var(--creme);
  font-weight: 700;
}

.deputados-fonte {
  margin-top: 2rem;
  color: var(--cinza-texto);
  font-size: 0.9375rem;
}

.deputados-fonte a {
  color: var(--creme);
}

/* ---------- 20. Quem apoia ---------- */
.quem-apoia {
  padding-top: clamp(2rem, 1rem + 3vw, 4rem);
  padding-bottom: clamp(2rem, 1rem + 3vw, 4rem);
}

.quem-apoia > .container {
  max-width: calc(var(--texto) + 2 * var(--gutter));
}

.apoiadores-nota-exemplo {
  color: var(--cinza-texto);
  font-size: 0.9375rem;
}

.apoiadores-intro {
  max-width: 40rem;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  font-weight: 600;
}

/* recortes creme chapados, girados em alternância, com a foto em P&B */
.apoiadores-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
  gap: clamp(1rem, 0.75rem + 1vw, 1.75rem);
  margin: clamp(1.5rem, 1rem + 2vw, 2.5rem) 0 0;
  padding: 0;
  list-style: none;
}

.apoiador {
  padding: 0.6rem 0.6rem 0.9rem;
  background: var(--creme);
  color: var(--preto);
  transform: rotate(-1deg);
}

.apoiador:nth-child(even) {
  transform: rotate(0.9deg);
}

.apoiador:nth-child(3n) {
  transform: rotate(-0.4deg);
}

.apoiador:focus-visible {
  outline-color: var(--ambar);
  outline-offset: 4px;
}

.apoiador img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: #706856;
}

.apoiador p {
  margin: 0;
}

.apoiador-nome {
  margin-top: 0.6rem !important;
  font-weight: 900;
  font-variation-settings: 'wdth' 85;
  font-size: 1.0625rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.apoiador-cargo {
  margin-top: 0.2rem !important;
  font-size: 0.9375rem;
  line-height: 1.3;
}

.apoiadores-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 2rem;
  margin-top: clamp(1.75rem, 1.25rem + 2vw, 3rem);
}

.apoiadores-acoes a {
  color: var(--creme);
  font-weight: 800;
}

/* ---------- 10. Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ---------- 11. Alto contraste do sistema ---------- */
@media (forced-colors: active) {
  .tarja,
  .botao,
  .card {
    border: 2px solid CanvasText;
    box-shadow: none;
  }

  .titulo-extrudado {
    text-shadow: none;
    -webkit-text-stroke: 0;
  }
}