/* Compare e vote — estilos
 *
 * Mesma arquitetura de tokens do skincompare (primitivos -> semanticos ->
 * componentes; componente nao escreve hex).
 *
 * Paleta "Brasil": fundo off-white, texto quase preto e quatro cores de
 * detalhe. A regra que mantem a neutralidade:
 *   - vermelho brasa e azul identificam os candidatos (cores dos partidos:
 *     PT vermelho, PL azul) e so aparecem ligados ao nome de cada um;
 *   - verde e amarelo sao do site: verde para acao e "pode ajudar", amarelo
 *     para atencao e "pode prejudicar", igual para os dois lados.
 * A cor de cada candidato fica em [data-candidato] (secao 16).
 *
 * Contraste conferido (WCAG AA): textos >= 4,5:1 em todas as superficies.
 */

:root {
  color-scheme: light;

  /* === 1. PRIMITIVOS ====================================================== */
  --papel-0: #ffffff;
  --papel-50: #fbf8f2;   /* off-white do fundo */
  --papel-100: #f3eee4;
  --papel-200: #e3dccf;
  --tinta-500: #4f545c; /* 7,4:1 no fundo */
  --tinta-600: #31353c; /* 11,6:1 */
  --tinta-900: #14161b; /* 17,4:1 */

  --verde-50: #e6f3ea;
  --verde-500: #1d8a52;
  --verde-700: #0f6b3e; /* 6,5:1 no fundo */
  --amarelo-50: #fff5d1;
  --amarelo-400: #f5c518; /* so fundo e borda, nunca texto */
  --amarelo-800: #6b4f00; /* 7,0:1 */
  --azul-50: #e8eefa;
  --azul-700: #1a4b9c;  /* 8,0:1 */
  --vermelho-50: #fbe9e6;
  --vermelho-700: #b3261e; /* 6,2:1 — vermelho brasa */

  --tinta-900-rgb: 20 22 27;
  --verde-500-rgb: 29 138 82;
  --amarelo-800-rgb: 107 79 0;
  --papel-50-rgb: 251 248 242;

  /* === 2. SEMANTICOS ====================================================== */
  --ink: var(--tinta-900);
  --ink-soft: var(--tinta-600);
  --muted: var(--tinta-500);

  --background: var(--papel-50);
  --surface: var(--papel-100);
  --panel: var(--papel-0);
  --line: var(--papel-200);

  /* --accent: superficie, borda, icone. --accent-dark: todo texto colorido. */
  --accent: var(--verde-500);
  --accent-dark: var(--verde-700);
  --accent-surface: var(--verde-50);
  --accent-tint: rgb(var(--verde-500-rgb) / 0.16);
  --accent-border: rgb(var(--verde-500-rgb) / 0.32);
  --on-ink: var(--papel-50);

  --warning: var(--amarelo-800);
  --warning-surface: var(--amarelo-50);
  --warning-border: var(--amarelo-400);

  --ink-border: rgb(var(--tinta-900-rgb) / 0.28);
  --header-veil: rgb(var(--papel-50-rgb) / 0.94);

  /* Cor do candidato: definida em [data-candidato]; fora dele, tinta. */
  --lado: var(--ink);
  --lado-suave: var(--surface);

  /* -- Tipografia -- */
  --font-display: Fraunces, Georgia, "Times New Roman", serif;
  --font-sans: Figtree, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --text-2xs: 0.75rem;
  --text-xs: 0.82rem;
  --text-sm: 0.88rem;
  --text-md: 0.94rem;
  --text-base: 1rem;
  --text-lg: 1.12rem;
  --text-xl: 1.4rem;
  --text-2xl: 1.6rem;
  --text-display-sm: clamp(1.5rem, 2.6vw, 2rem);
  --text-display-md: clamp(2rem, 3.6vw, 3rem);
  --text-display-lg: clamp(2.5rem, 5.4vw, 4.4rem);

  --leading-tight: 1.12;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;

  --tracking-tight: 0.005em;
  --tracking-wide: 0.05em;
  --tracking-wider: 0.1em;

  /* -- Espaco (grade de 4px) -- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 84px;
  --space-12: 112px;

  /* -- Raio, elevacao, movimento -- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-field: 14px;
  --radius-card: 20px;
  --radius-pill: 999px;

  --shadow-sm: 0 4px 14px rgb(var(--tinta-900-rgb) / 0.06);
  --shadow-md: 0 16px 36px rgb(var(--tinta-900-rgb) / 0.12);
  --focus-ring: 0 0 0 4px var(--accent-tint);

  --duration-fast: 0.2s;
  --duration-base: 0.25s;
  --ease-standard: ease;
  --press-scale: 0.98;

  /* -- Controles e layout --
     Breakpoints (media query nao aceita var): 1020px nav colapsa; 720px coluna unica. */
  --control-sm: 40px;
  --control-md: 46px;
  --tap-min: 44px;
  --header-h: 64px;
  --container-max: 1200px;
  --container-narrow: 820px;
  --gutter: 24px;
}

/* === 3. BASE ============================================================= */

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

[hidden] {
  display: none !important;
}

html {
  font-size: 106.25%; /* 17px: leitura mais confortavel no celular */
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--space-6));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5 {
  margin: 0;
  font-weight: 400;
}

p,
ul,
ol,
dl,
dd {
  margin: 0;
}

a {
  color: var(--accent-dark);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

a:hover {
  text-decoration-thickness: 2px;
}

em {
  font-style: italic;
  color: var(--accent-dark);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

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

.pular {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 50;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--on-ink);
}

.pular:focus {
  top: var(--space-3);
}

.kicker {
  color: var(--accent-dark);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
}

.lead {
  max-width: 62ch;
  color: var(--ink-soft);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}

.link-botao {
  min-height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-dark);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.link-botao:hover {
  text-decoration-thickness: 2px;
}

/* === 4. O PAR: a regra que mantem os dois lados justos ===================
   Todo lugar onde os dois candidatos aparecem juntos e um .par com dois
   filhos. O sorteio do <head> grava data-ordem="a" ou "b" no <html>; em "b",
   o primeiro filho vai para o fim. Funciona em grid e em flex. */

.par {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

[data-ordem="b"] .par > :first-child {
  order: 2;
}

/* === 5. HEADER =========================================================== */

.topo {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  min-height: var(--header-h);
  padding: var(--space-2) var(--gutter);
  border-bottom: 1px solid var(--line);
  background: var(--header-veil);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  text-decoration: none;
  white-space: nowrap;
}

.marca-icone {
  width: 28px;
  height: 28px;
  color: var(--accent);
}

.menu {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-5);
}

.menu a {
  padding: var(--space-2) 0;
  color: var(--ink-soft);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
}

.menu a:hover,
.menu a[aria-current="page"] {
  color: var(--accent-dark);
  text-decoration: underline;
}

.menu-botao {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: var(--tap-min);
  height: var(--tap-min);
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--panel);
  cursor: pointer;
}

.menu-barra {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform var(--duration-base) var(--ease-standard), opacity var(--duration-fast);
}

.menu-botao[aria-expanded="true"] .menu-barra:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-botao[aria-expanded="true"] .menu-barra:nth-child(2) {
  opacity: 0;
}

.menu-botao[aria-expanded="true"] .menu-barra:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* === 6. HERO E CANDIDATOS ================================================ */

.hero {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-11) var(--gutter) var(--space-9);
}

.hero h1 {
  max-width: 17ch;
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-display-lg);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.hero-texto {
  max-width: 58ch;
  margin-top: var(--space-6);
  color: var(--ink-soft);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}

.hero-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-7);
}

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-md);
  padding: 0 var(--space-6);
  border-radius: var(--radius-pill);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-decoration: none;
  transition: background-color var(--duration-base) var(--ease-standard), color var(--duration-base);
}

.botao:active {
  transform: scale(var(--press-scale));
}

.botao-primario {
  background: var(--ink);
  color: var(--on-ink);
}

.botao-primario:hover {
  background: var(--accent-dark);
  text-decoration: none;
}

.botao-secundario {
  border: 1px solid var(--ink-border);
  color: var(--ink);
}

.botao-secundario:hover {
  border-color: var(--accent-dark);
  color: var(--accent-dark);
  text-decoration: none;
}

.candidatos-faixa {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter) var(--space-10);
}

.candidatos {
  position: relative;
  gap: var(--space-5);
}

/* O "x" fica no meio do grid, fora dos dois filhos, para nao entrar na troca de ordem. */
.candidatos::after {
  content: "×";
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--background);
  color: var(--muted);
  font-family: var(--font-display);
  transform: translate(-50%, -50%);
}

.candidato {
  display: flex;
  gap: var(--space-5);
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--panel);
}

.candidato-nome {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
}

.candidato-partido {
  margin-top: var(--space-1);
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 600;
}

.candidato-dados {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-4);
  font-size: var(--text-sm);
}

.candidato-dados div {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--space-2);
}

.candidato-dados dt {
  color: var(--muted);
}

.ordem-nota {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  margin-top: var(--space-4);
  color: var(--muted);
  font-size: var(--text-sm);
}

.avatar {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--on-ink);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-variant-numeric: tabular-nums;
}

.avatar-p {
  width: 24px;
  height: 24px;
  font-size: var(--text-2xs);
}

.avatar-g {
  width: 60px;
  height: 60px;
  font-size: var(--text-xl);
}

/* === 7. SECOES =========================================================== */

.secao {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-11) var(--gutter);
}

.secao-larga {
  max-width: calc(var(--container-max) + 2 * var(--gutter));
}

.secao-estreita {
  max-width: calc(var(--container-narrow) + 2 * var(--gutter));
}

.secao-suave {
  max-width: none;
  background: var(--surface);
}

.secao-suave > * {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
}

.secao-cab {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-7);
}

/* A largura de leitura fica no texto, nao no bloco: assim o cabecalho alinha
   com a grade de cartoes logo abaixo. */
.secao-cab > p:not(.kicker),
.secao-cab > h2 {
  max-width: 68ch;
}

.secao-cab h2 {
  font-family: var(--font-display);
  font-size: var(--text-display-md);
  line-height: var(--leading-tight);
}

.secao-cab > p:not(.kicker) {
  color: var(--ink-soft);
  line-height: var(--leading-relaxed);
}

.pagina-cab {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-10) var(--gutter) var(--space-4);
}

.pagina-cab h1 {
  max-width: 22ch;
  margin: var(--space-3) 0 var(--space-5);
  font-family: var(--font-display);
  font-size: var(--text-display-md);
  line-height: var(--leading-tight);
}

.verificado {
  margin-top: var(--space-4);
  color: var(--muted);
  font-size: var(--text-sm);
}

.passos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  padding: 0;
  list-style: none;
}

.passos li {
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--panel);
}

.passo-num {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent-surface);
  color: var(--accent-dark);
  font-family: var(--font-display);
  font-size: var(--text-lg);
}

.passos h3 {
  margin: var(--space-3) 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-xl);
}

.passos p {
  color: var(--ink-soft);
}

.aviso-suave {
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-field) var(--radius-field) 0;
  background: var(--accent-surface);
  color: var(--ink-soft);
  line-height: var(--leading-relaxed);
}

/* === 8. COMPARADOR POR TEMA ============================================== */

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

.prioridades {
  margin-bottom: var(--space-7);
  padding: var(--space-6);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-card);
  background: var(--accent-surface);
}

.prioridades-titulo {
  font-family: var(--font-display);
  font-size: var(--text-xl);
}

.prioridades-texto {
  margin-top: var(--space-1);
  color: var(--ink-soft);
  font-size: var(--text-sm);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-5) 0 var(--space-2);
}

.chip {
  min-height: var(--control-sm);
  padding: 0 var(--space-4);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-pill);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
}

.chip:hover {
  border-color: var(--accent);
}

.chip[aria-pressed="true"] {
  border-color: var(--accent-dark);
  background: var(--accent-dark);
  color: var(--papel-0);
}

.chip[aria-pressed="true"]::before {
  content: "✓ ";
}

.barra-lados {
  position: sticky;
  top: var(--header-h);
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--header-veil);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.barra-lados .par {
  gap: var(--space-6);
}

.barra-lado {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
}

.temas {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.tema {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--panel);
  transition: box-shadow var(--duration-base);
}

.tema[open] {
  box-shadow: var(--shadow-sm);
}

.tema[data-prioridade="true"] {
  border-color: var(--accent-border);
}

.tema-resumo {
  display: grid;
  grid-template-columns: 1fr auto 28px;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  list-style: none;
  cursor: pointer;
}

.tema-resumo::-webkit-details-marker {
  display: none;
}

.tema-titulos {
  display: grid;
  gap: var(--space-1);
}

.tema-nome {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
}

.tema[data-prioridade="true"] .tema-nome::after {
  content: "prioridade";
  margin-left: var(--space-3);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--accent-surface);
  color: var(--accent-dark);
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: 600;
  vertical-align: middle;
}

.tema-desc {
  color: var(--muted);
  font-size: var(--text-sm);
}

.tema-cobertura {
  color: var(--muted);
  font-size: var(--text-xs);
  text-align: right;
}

.tema-marcador {
  position: relative;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 50%;
}

.tema-marcador::before,
.tema-marcador::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 1.5px;
  background: var(--ink);
  transform: translate(-50%, -50%);
  transition: transform var(--duration-fast) var(--ease-standard);
}

.tema-marcador::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.tema[open] .tema-marcador::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.tema-corpo {
  padding: 0 var(--space-6) var(--space-6);
}

.tema-rodape {
  margin-top: var(--space-5);
  text-align: right;
}

.convergencias {
  margin-bottom: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-field);
  background: var(--accent-surface);
}

.convergencias-titulo {
  color: var(--accent-dark);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
}

.convergencias ul {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-2) 0;
  padding: 0;
  list-style: none;
}

.convergencias li > p {
  line-height: var(--leading-relaxed);
}

.convergencia-refs {
  justify-content: start;
  gap: var(--space-4);
  margin-top: var(--space-1);
  font-size: var(--text-xs);
}

.convergencia-ref {
  color: var(--muted);
}

.convergencias-nota {
  color: var(--muted);
  font-size: var(--text-xs);
}

/* === 9. DUELO: as duas colunas =========================================== */

.duelo {
  position: relative;
  gap: var(--space-8);
  align-items: start;
}

.duelo::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  border-left: 1px solid var(--line);
}

.lado {
  display: grid;
  gap: var(--space-5);
  min-width: 0;
}

.lado-cab {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line);
}

.lado-titulos {
  display: grid;
}

.lado-nome {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}

.lado-meta {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 600;
}

/* Linhas alinhadas: cada secao do tema (plano, posicao, historico) e uma
   linha com as duas celulas lado a lado. */
.duelo-cab {
  margin-bottom: var(--space-2);
}

.linha {
  padding: var(--space-5) 0;
  border-top: 1px solid var(--line);
}

.duelo-cab + .linha {
  border-top: 0;
  padding-top: var(--space-3);
}

.linha-titulo {
  margin-bottom: var(--space-4);
  color: var(--muted);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
}

.celula {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  min-width: 0;
}

/* No desktop o nome do candidato ja esta no cabecalho da coluna; o rotulo da
   celula fica so para leitor de tela. No celular ele aparece (ver 720px). */
.celula-rotulo {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Cartoes sem cabecalho de coluna (paises, imprensa): o nome aparece sempre. */
.linha.com-rotulo .celula-rotulo {
  position: static;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  font-size: var(--text-sm);
  font-weight: 600;
}

.painel-linhas {
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--panel);
}

.bloco {
  display: grid;
  gap: var(--space-3);
}

.bloco-titulo {
  color: var(--muted);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
}

.itens {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.item {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-h) + var(--space-10));
}

.item:first-child {
  padding-top: 0;
}

.item:last-child {
  border-bottom: 0;
}

.item:target {
  margin: 0 calc(-1 * var(--space-3));
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--accent-surface);
}

.item-texto {
  line-height: var(--leading-relaxed);
}

.itens-compactos .item-texto {
  font-size: var(--text-md);
}

.item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.selo,
.situacao {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.3;
}

.item-ano,
.item-id,
.item-contexto {
  color: var(--muted);
  font-size: var(--text-xs);
}

.item-id::before,
.item-contexto::before {
  content: "· ";
}

.fonte {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}

.fonte-rotulo {
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
}

.fonte-links {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
}

.fonte a {
  overflow-wrap: anywhere;
}

.fonte a::after {
  content: " ↗";
  font-size: 0.9em;
}

.lacuna {
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--ink-border);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: var(--text-sm);
  font-style: italic;
}

.posicao {
  display: grid;
  gap: var(--space-2);
}

.posicao + .posicao {
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

.posicao-tema {
  font-size: var(--text-sm);
  font-weight: 600;
}

.posicao-texto {
  line-height: var(--leading-relaxed);
}

details.mais > summary,
details.grupo > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 32px;
  color: var(--accent-dark);
  font-size: var(--text-sm);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

details.mais > summary::-webkit-details-marker,
details.grupo > summary::-webkit-details-marker {
  display: none;
}

details.mais > summary::after,
details.grupo > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--duration-fast);
}

details.mais[open] > summary::after,
details.grupo[open] > summary::after {
  transform: translateY(1px) rotate(225deg);
}

details.mais[open] > summary {
  margin-bottom: var(--space-3);
}

details.grupo {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
}

details.grupo > summary {
  color: var(--ink);
  font-size: var(--text-md);
}

details.grupo[open] > summary {
  margin-bottom: var(--space-3);
}

.contagem {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: var(--text-xs);
  font-weight: 600;
}

/* Paginas internas: tema como secao aberta, nao acordeao. */
.tema-secao {
  padding: var(--space-7) 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-h) + var(--space-9));
}

.tema-secao-titulo {
  margin-bottom: var(--space-5);
  font-family: var(--font-display);
  font-size: var(--text-display-sm);
  line-height: var(--leading-snug);
}

.planos-nomes {
  gap: var(--space-6);
  margin-top: var(--space-3);
  color: var(--ink-soft);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.numeros {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-field);
  background: var(--panel);
}

.sumario {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.sumario a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--panel);
  color: var(--ink-soft);
  font-size: var(--text-sm);
  text-decoration: none;
}

.sumario a:hover {
  border-color: var(--accent);
  color: var(--accent-dark);
}

.notas-metodo dl {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--panel);
}

.notas-metodo dt {
  font-weight: 600;
}

.notas-metodo dd {
  color: var(--ink-soft);
  line-height: var(--leading-relaxed);
}

/* === 10. CORRUPCAO ======================================================= */

.presuncao {
  margin-bottom: var(--space-10);
  padding: var(--space-7);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--panel);
}

.presuncao-titulo {
  color: var(--accent-dark);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
}

.presuncao > p:not(.presuncao-titulo):not(.presuncao-nota) {
  max-width: 70ch;
  margin-top: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
}

.presuncao-par {
  gap: var(--space-6);
  margin-top: var(--space-6);
}

.presuncao-numero {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-field);
  background: var(--surface);
  font-size: var(--text-sm);
}

.presuncao-valor {
  font-family: var(--font-display);
  font-size: var(--text-display-sm);
  line-height: 1;
}

.presuncao-nota {
  margin-top: var(--space-4);
  color: var(--muted);
  font-size: var(--text-xs);
}

.contagens {
  display: grid;
  gap: var(--space-2);
  padding: 0;
  list-style: none;
}

.contagens li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* Situacao: todas neutras, menos o que esta em aberto (ambar) e o que ainda
   precisa de confirmacao (tracejado). Absolvicao nao ganha cor de "bom" nem
   investigacao cor de "ruim": o texto carrega o significado. */
.situacao[data-situacao="em-investigacao"] {
  border-color: var(--warning-border);
  background: var(--warning-surface);
  color: var(--warning);
}

.situacao[data-situacao="a-confirmar"] {
  border-style: dashed;
  border-color: var(--ink-border);
  background: transparent;
}

.legenda {
  margin-top: var(--space-7);
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
  background: var(--panel);
}

.legenda > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  color: var(--accent-dark);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.legenda > summary::-webkit-details-marker {
  display: none;
}

.legenda > summary::after {
  content: "+";
  font-size: var(--text-lg);
  transition: transform var(--duration-fast);
}

.legenda[open] > summary::after {
  transform: rotate(45deg);
}

.legenda-corpo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  padding: 0 var(--space-5) var(--space-5);
}

.legenda dl,
.definicoes {
  display: grid;
  gap: var(--space-3);
}

.legenda dt,
.definicoes dt {
  font-weight: 600;
}

.legenda dd,
.definicoes dd {
  color: var(--ink-soft);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.categoria {
  border-top: 1px solid var(--line);
}

.caso {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
  background: var(--panel);
  scroll-margin-top: calc(var(--header-h) + var(--space-10));
}

.caso + .caso {
  margin-top: var(--space-4);
}

.caso-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.caso-periodo,
.caso-marco {
  color: var(--muted);
  font-size: var(--text-xs);
}

.caso-titulo {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}

.caso-linha {
  color: var(--ink-soft);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
}

.caso-linha strong {
  color: var(--ink);
}

.caso-dados {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.caso-dados dt {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
}

.caso-dados dd {
  color: var(--ink-soft);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
}

/* === 11. CARTOES, CONTEXTO, FAQ ========================================== */

.cartoes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

.cartao {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--panel);
  color: var(--ink);
  text-decoration: none;
  transition: border-color var(--duration-fast), box-shadow var(--duration-base);
}

.cartao:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.cartao-num {
  color: var(--accent-dark);
  font-family: var(--font-display);
  font-style: italic;
}

.cartao h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
}

.cartao p {
  color: var(--ink-soft);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
}

.cartao-acao {
  margin-top: auto;
  color: var(--accent-dark);
  font-size: var(--text-sm);
  font-weight: 600;
}

.contexto {
  display: grid;
  gap: var(--space-4);
}

.contexto-destaque {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
}

.contexto-planos {
  gap: var(--space-6);
  margin-top: var(--space-4);
}

.contexto-plano {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
  background: var(--panel);
  line-height: var(--leading-relaxed);
}

.contexto-plano-nome {
  font-weight: 600;
}

.faq {
  display: grid;
  gap: var(--space-2);
}

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  list-style: none;
  cursor: pointer;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  color: var(--accent-dark);
  transition: transform var(--duration-fast);
}

.faq details[open] summary::after {
  transform: rotate(45deg);
}

.faq details p {
  padding-bottom: var(--space-5);
  color: var(--ink-soft);
  line-height: var(--leading-relaxed);
}

.em-preparacao {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-6);
  border: 1px dashed var(--ink-border);
  border-radius: var(--radius-card);
  color: var(--ink-soft);
  line-height: var(--leading-relaxed);
}

.status-ponto {
  flex: none;
  width: 10px;
  height: 10px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 6px var(--accent-tint);
}

/* === 12. PROSA (como avaliamos) ========================================== */

.prosa h2 {
  margin: var(--space-9) 0 var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-display-sm);
  scroll-margin-top: calc(var(--header-h) + var(--space-6));
}

.prosa h2:first-child {
  margin-top: 0;
}

.prosa p,
.prosa li {
  color: var(--ink-soft);
  line-height: 1.7;
}

.prosa ul,
.prosa ol {
  display: grid;
  gap: var(--space-3);
  padding-left: var(--space-5);
}

.prosa p + p {
  margin-top: var(--space-3);
}

.regras strong,
.prosa li strong {
  color: var(--ink);
}

.tabela-rolagem {
  margin-top: var(--space-5);
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
  background: var(--panel);
}

.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.tabela th,
.tabela td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.tabela thead th {
  color: var(--muted);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wider);
}

.tabela tbody tr:last-child > * {
  border-bottom: 0;
}

.definicoes {
  margin-top: var(--space-5);
}

/* === 13. RODAPE ========================================================== */

.rodape {
  margin-top: var(--space-10);
  padding: var(--space-10) var(--gutter) var(--space-7);
  background: var(--ink);
  color: var(--on-ink);
}

.rodape-painel {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-8);
  max-width: var(--container-max);
  margin: 0 auto;
}

.rodape-nome {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
}

.rodape-marca p + p {
  margin-top: var(--space-2);
  opacity: 0.85;
}

.rodape-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

.rodape-links div {
  display: grid;
  align-content: start;
  gap: var(--space-2);
}

.rodape-links h2 {
  margin-bottom: var(--space-1);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  opacity: 0.75;
}

.rodape a {
  color: var(--on-ink);
}

.rodape-legal {
  max-width: var(--container-max);
  margin: var(--space-8) auto 0;
  padding-top: var(--space-5);
  border-top: 1px solid rgb(var(--papel-50-rgb) / 0.2);
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
  opacity: 0.85;
}


/* === 13b. LINGUAGEM SIMPLES: icones, resumos, propostas, pontos ========== */

.icone {
  flex: none;
  width: 22px;
  height: 22px;
  vertical-align: -5px;
}

.icone-p {
  width: 16px;
  height: 16px;
  vertical-align: -3px;
}

.linha-titulo,
.convergencias-titulo,
.chamada-titulo,
.tema-secao-titulo,
.pais-nome {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.chip[aria-pressed="true"]::before {
  content: none;
}

/* Tema: cabecalho com icone + resumo de uma frase de cada candidato,
   visivel mesmo com o tema fechado. */
.tema-resumo {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.tema-topo {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-4);
}

.tema-icone {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent-surface);
  color: var(--accent-dark);
}

.tema-cobertura {
  display: inline;
  color: var(--muted);
  font-size: inherit;
  text-align: left;
}

.tema-abrir {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--accent-dark);
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
}

.tema-abrir-texto::before {
  content: "Ver tudo";
}

.tema[open] .tema-abrir-texto::before {
  content: "Fechar";
}

.tema-em-resumo {
  gap: var(--space-4);
}

.resumo-lado {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-field);
  background: var(--background);
}

.resumo-nome {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
}

.resumo-texto {
  color: var(--ink-soft);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
}

.tema-secao .tema-em-resumo {
  margin-bottom: var(--space-5);
}

.tema-secao .resumo-lado {
  background: var(--panel);
  border: 1px solid var(--line);
}

/* Cartao de proposta */
.propostas {
  display: grid;
  gap: var(--space-4);
}

.proposta {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
  background: var(--panel);
  scroll-margin-top: calc(var(--header-h) + var(--space-10));
}

.proposta:target {
  box-shadow: 0 0 0 3px var(--accent-tint);
  border-color: var(--accent);
}

.proposta-topo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 26px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: var(--text-xs);
  font-weight: 600;
}

.etiqueta[data-requisito="constituicao"] {
  background: var(--warning-surface);
  color: var(--warning);
}

.proposta-titulo {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: var(--leading-snug);
}

.proposta-simples {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

.efeitos {
  display: grid;
  gap: var(--space-3);
}

.efeito {
  display: grid;
  gap: var(--space-1);
}

.efeito dt {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--accent-dark);
  font-size: var(--text-sm);
  font-weight: 600;
}

.efeito dd {
  color: var(--ink-soft);
  line-height: var(--leading-relaxed);
}

.balanca {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.balanca-lado {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
}

.balanca-ajuda {
  border: 1px solid var(--accent-border);
  background: var(--accent-surface);
}

.balanca-prejudica {
  border: 1px solid var(--warning-border);
  background: var(--warning-surface);
}

.balanca-titulo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
}

.balanca-ajuda .balanca-titulo {
  color: var(--accent-dark);
}

.balanca-prejudica .balanca-titulo {
  color: var(--warning);
}

.balanca ul {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-left: var(--space-5);
  color: var(--ink);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}

.proposta-depende {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  color: var(--ink-soft);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.proposta-depende .icone {
  color: var(--muted);
}

.original {
  color: var(--ink-soft);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
}

details.mais .original + .item-meta,
details.mais .original + .fonte,
details.mais .original + .itens {
  margin-top: var(--space-3);
}

.posicao-frase {
  font-size: var(--text-base);
  font-weight: 500;
  line-height: var(--leading-relaxed);
}

/* Pontos de atencao */
.atencao .linha-titulo {
  color: var(--warning);
}

.ponto {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--warning-border);
  border-radius: var(--radius-field);
  background: var(--panel);
}

.pontos {
  display: grid;
  gap: var(--space-4);
}

.ponto-titulo {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: var(--leading-snug);
}

.ponto-texto {
  line-height: var(--leading-relaxed);
}

.ponto-impacto {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--warning-surface);
  color: var(--ink);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
}

.ponto-impacto .icone {
  margin-top: 3px;
  color: var(--warning);
}

.ponto-situacao {
  color: var(--ink-soft);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
}

/* Contexto que evita conclusao errada (ex.: quem aprova ministro do STF). */
.ponto-aviso {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  padding: var(--space-3);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-sm);
  background: var(--accent-surface);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
}

.ponto-aviso .icone {
  flex: none;
  margin-top: 3px;
  color: var(--accent-dark);
}

.ponto-aviso-textos p {
  margin: 0;
}

.ponto-aviso-textos p + p {
  margin-top: var(--space-2);
}

/* "Entenda": um debate explicado em palavras simples, dentro de "O que pensa" */
.entenda {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-field);
  background: var(--accent-surface);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
}

.entenda-titulo {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  margin: 0 0 var(--space-3);
  color: var(--accent-dark);
  font-weight: 600;
}

.entenda-titulo .icone {
  flex: none;
  margin-top: 3px;
}

.entenda-itens {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  padding-left: var(--space-5);
  list-style: disc;
}

@media (max-width: 640px) {
  .entenda {
    padding: var(--space-4);
  }
}

.ponto-refs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  color: var(--muted);
  font-size: var(--text-xs);
}

/* Chamadas ("por que importa", "ser investigado nao e ser culpado") */
.chamadas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-7);
}

.chamada {
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
  background: var(--panel);
  line-height: var(--leading-relaxed);
}

.chamada-titulo {
  margin-bottom: var(--space-2);
  color: var(--accent-dark);
  font-weight: 600;
}

.caso-simples {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

/* Paises e imprensa */
.paises,
.imprensas {
  display: grid;
  gap: var(--space-5);
}

.pais,
.imprensa {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--panel);
  scroll-margin-top: calc(var(--header-h) + var(--space-10));
}

.pais-nome {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
}

.pais-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-5);
  margin-top: var(--space-2);
  color: var(--ink-soft);
  font-size: var(--text-sm);
}

.pais-importa {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  padding: var(--space-4);
  border-radius: var(--radius-field);
  background: var(--accent-surface);
  line-height: var(--leading-relaxed);
}

.pais-importa .icone {
  margin-top: 4px;
  color: var(--accent-dark);
}

.pais .linha,
.imprensa .linha {
  padding: 0;
  border-top: 0;
}

.pais-dados {
  display: grid;
  gap: var(--space-3);
}

.pais-dados dt {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
}

.pais-dados dd {
  color: var(--ink-soft);
  line-height: var(--leading-relaxed);
}

.imprensa-cab {
  font-size: var(--text-lg);
}

.imprensa-cab span {
  color: var(--muted);
  font-size: var(--text-sm);
}

/* Palavras do dicionario: sublinhado pontilhado, toque abre a explicacao */
a.termo {
  color: inherit;
  text-decoration: underline dotted var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  cursor: help;
}

a.termo:hover {
  color: var(--accent-dark);
}

.popover-termo {
  position: absolute;
  z-index: 40;
  max-width: min(340px, calc(100vw - 32px));
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
  background: var(--panel);
  box-shadow: var(--shadow-md);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
}

.popover-termo strong {
  display: block;
  margin-bottom: var(--space-1);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 500;
}

.popover-termo a {
  display: inline-block;
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
}

.popover-fechar {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: var(--text-xl);
  line-height: 1;
  cursor: pointer;
}

.dicionario-letra h2 {
  margin: var(--space-8) 0 var(--space-3);
  color: var(--accent-dark);
  font-family: var(--font-display);
  font-size: var(--text-display-sm);
}

.dicionario {
  display: grid;
  gap: var(--space-2);
}

.dicionario > div {
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
  background: var(--panel);
  scroll-margin-top: calc(var(--header-h) + var(--space-6));
}

.dicionario > div:target {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

.dicionario dt {
  font-family: var(--font-display);
  font-size: var(--text-lg);
}

.dicionario dd {
  margin-top: var(--space-1);
  color: var(--ink-soft);
  line-height: var(--leading-relaxed);
}

.sumario-letras a {
  min-width: 40px;
  justify-content: center;
}

.cartoes-nota {
  margin-top: var(--space-5);
  color: var(--ink-soft);
}


/* === 13c. HIERARQUIA DENTRO DE CADA ASSUNTO ===============================
   1 o que promete > 2 o que ja fez > 3 o que pensa. Numero escuro e titulo
   grande nas duas primeiras; a terceira e visualmente mais leve. */

.secao-tema {
  padding: var(--space-7) 0 var(--space-5);
  border-top: 2px solid var(--line);
}

.secao-tema:first-child {
  padding-top: var(--space-2);
  border-top: 0;
}

.secao-tema-cab {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.secao-tema-num {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--on-ink);
  font-family: var(--font-display);
  font-size: var(--text-xl);
}

.secao-tema-titulos {
  display: grid;
  gap: 2px;
}

.secao-tema-titulo {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  line-height: var(--leading-snug);
}

.secao-tema-sub {
  color: var(--muted);
  font-size: var(--text-sm);
}

.secao-tema[data-nivel="3"] .secao-tema-num {
  width: 34px;
  height: 34px;
  background: var(--surface);
  color: var(--ink);
  font-size: var(--text-md);
}

.secao-tema[data-nivel="3"] .secao-tema-titulo {
  font-size: var(--text-xl);
}

.secao-tema .linha:first-of-type {
  border-top: 0;
}

/* O que ja fez: fases da carreira e cartoes compactos */
.fase {
  display: grid;
  gap: var(--space-3);
}

.fase + .fase {
  margin-top: var(--space-5);
}

.fase-titulo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink-soft);
  font-size: var(--text-sm);
  font-weight: 600;
}

/* Aviso de uma fase que nao e do candidato (ex.: governo do pai de Flavio) */
.fase-nota {
  margin: calc(var(--space-1) * -1) 0 var(--space-2);
  color: var(--muted);
  font-size: var(--text-xs);
  font-style: italic;
}

.feitos {
  display: grid;
  gap: var(--space-3);
}

details.mais > .feitos {
  margin-top: var(--space-1);
}

.feito {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-left: 4px solid var(--papel-200);
  border-radius: var(--radius-sm);
  background: var(--panel);
  scroll-margin-top: calc(var(--header-h) + var(--space-10));
}

.feito[data-tom="feito"] {
  border-left-color: var(--accent);
}

.feito[data-tom="nao"],
.feito[data-tom="parcial"] {
  border-left-color: var(--warning);
}

.feito:target {
  box-shadow: 0 0 0 3px var(--accent-tint);
}

.feito-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.feito-situacao {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: var(--text-xs);
  font-weight: 600;
}

.feito-situacao[data-tom="feito"] {
  background: var(--accent-surface);
  color: var(--accent-dark);
}

.feito-situacao[data-tom="nao"],
.feito-situacao[data-tom="parcial"] {
  background: var(--warning-surface);
  color: var(--warning);
}

.feito-situacao[data-tom="confirmar"] {
  border: 1px dashed var(--ink-border);
  background: transparent;
}

.feito-ano {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 600;
}

.feito-texto {
  line-height: var(--leading-relaxed);
}

.feito-meta {
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}

/* === 14. RESPONSIVO ====================================================== */

@media (max-width: 1020px) {
  .menu-botao {
    display: inline-flex;
  }

  .js .menu {
    position: absolute;
    top: 100%;
    right: var(--gutter);
    left: var(--gutter);
    display: none;
    flex-direction: column;
    gap: 0;
    padding: var(--space-3) var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--radius-field);
    background: var(--panel);
    box-shadow: var(--shadow-md);
  }

  .js .menu[data-aberto="true"] {
    display: flex;
  }

  .js .menu a {
    min-height: var(--tap-min);
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--line);
  }

  .js .menu a:last-child {
    border-bottom: 0;
  }

  .cartoes {
    grid-template-columns: 1fr 1fr;
  }

  .rodape-painel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  :root {
    --gutter: 16px;
    --header-h: 58px;
  }

  .hero {
    padding-top: var(--space-9);
  }

  .hero-acoes .botao {
    flex: 1 1 100%;
  }

  /* Em coluna unica a ordem sorteada continua valendo: so o empilhamento muda. */
  .par {
    grid-template-columns: 1fr;
  }

  .candidatos {
    gap: var(--space-3);
  }

  .candidatos::after {
    display: none;
  }

  .candidato {
    padding: var(--space-5);
  }

  .passos,
  .cartoes {
    grid-template-columns: 1fr;
  }

  .secao {
    padding-top: var(--space-10);
    padding-bottom: var(--space-10);
  }

  .barra-lados {
    display: none;
  }

  .tema-resumo {
    padding: var(--space-4);
  }

  .tema-corpo {
    padding: 0 var(--space-4) var(--space-4);
  }

  .duelo {
    gap: var(--space-8);
  }

  .duelo::before {
    display: none;
  }

  /* Empilhado, cada lado ganha um respiro e um fundo para nao se misturar. */
  .duelo > .lado,
  .duelo > .celula {
    padding: var(--space-4);
    border-radius: var(--radius-field);
    background: var(--background);
  }

  .duelo-cab {
    display: none;
  }

  .duelo-cab + .linha {
    padding-top: 0;
  }

  .linha .duelo {
    gap: var(--space-3);
  }

  .celula-rotulo {
    position: static;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    font-size: var(--text-sm);
    font-weight: 600;
  }

  .painel-linhas {
    padding: var(--space-4);
  }

  .tema-topo {
    grid-template-columns: auto 1fr;
  }

  .secao-tema-num {
    width: 38px;
    height: 38px;
    font-size: var(--text-lg);
  }

  .secao-tema-titulo {
    font-size: var(--text-xl);
  }

  .duelo > .celula .feito {
    background: var(--panel);
  }

  .tema-abrir {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .tema-icone {
    width: 38px;
    height: 38px;
  }

  .balanca,
  .chamadas {
    grid-template-columns: 1fr;
  }

  .proposta,
  .ponto,
  .pais,
  .imprensa {
    padding: var(--space-4);
  }

  .duelo > .celula .proposta,
  .duelo > .celula .ponto {
    background: var(--panel);
  }

  .tema-secao .duelo > .lado,
  .categoria .duelo > .lado,
  .secao-suave .duelo > .lado {
    background: var(--panel);
  }

  .presuncao {
    padding: var(--space-5);
  }

  .legenda-corpo {
    grid-template-columns: 1fr;
  }

  .tema-rodape {
    text-align: left;
  }

  .rodape-links {
    grid-template-columns: 1fr 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .topo,
  .barra-lados,
  .prioridades,
  .tema-rodape,
  .ordem-nota {
    display: none;
  }

  .tema-corpo {
    display: block;
  }
}

/* === 16. IDENTIDADE BRASIL E HIERARQUIA DA COMPARACAO ===================== */

/* Cada candidato tem a sua cor (a do partido). Ela so pinta o que leva o nome
   dele: avatar, cabecalho da coluna, resumo e a borda da coluna. */
[data-candidato="lula"] {
  --lado: var(--vermelho-700);
  --lado-suave: var(--vermelho-50);
}

[data-candidato="flavio"] {
  --lado: var(--azul-700);
  --lado-suave: var(--azul-50);
}

/* Faixa com as quatro cores no topo de todas as paginas. */
.topo {
  border-bottom: 0;
}

.topo::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--verde-500) 0 25%,
    var(--amarelo-400) 25% 50%,
    var(--azul-700) 50% 75%,
    var(--vermelho-700) 75% 100%
  );
}

.avatar {
  background: var(--lado);
  color: var(--papel-0);
  font-family: var(--font-sans);
  font-weight: 700;
}

/* Cartao de cada candidato no topo da pagina. */
.candidato {
  border-top: 6px solid var(--lado);
}

.candidato-nome {
  color: var(--lado);
}

/* Cabecalho de coluna: faixa cheia na cor do candidato, com "VS" no meio. */
.duelo-cab {
  position: relative;
  margin-bottom: var(--space-4);
}

.duelo-cab::before {
  content: none;
}

.duelo-cab::after {
  content: "VS";
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 3px solid var(--background);
  border-radius: 50%;
  background: var(--amarelo-400);
  color: var(--ink);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: var(--tracking-wide);
  transform: translate(-50%, -50%);
}

.coluna-cab .lado-cab {
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-radius: var(--radius-field);
  background: var(--lado);
  color: var(--papel-0);
}

.coluna-cab .lado-meta {
  color: rgb(255 255 255 / 0.88);
}

.coluna-cab .avatar {
  background: var(--papel-0);
  color: var(--lado);
}

/* Celulas da comparacao: cada coluna levemente tingida com a cor do lado, para
   o olho seguir a coluna de cima a baixo. */
.linha .celula[data-candidato] {
  padding: var(--space-4);
  border-top: 4px solid var(--lado);
  border-radius: var(--radius-field);
  background: var(--lado-suave);
}

.linha-titulo {
  color: var(--ink);
  font-size: var(--text-xs);
}

/* Resumo de uma frase de cada candidato no cabecalho do assunto. */
.resumo-lado {
  border-left: 5px solid var(--lado);
  background: var(--lado-suave);
}

.resumo-nome {
  color: var(--lado);
}

.resumo-texto {
  color: var(--ink);
}

.barra-lado {
  color: var(--lado);
  font-weight: 700;
}

.contexto-plano {
  border-left: 4px solid var(--lado);
  padding-left: var(--space-4);
}

/* Hierarquia das secoes de cada assunto: 1 verde, 2 amarelo, 3 discreto. */
.secao-tema[data-nivel="1"] .secao-tema-num {
  background: var(--verde-700);
  color: var(--papel-0);
}

.secao-tema[data-nivel="2"] .secao-tema-num {
  background: var(--amarelo-400);
  color: var(--ink);
}

.secao-tema[data-nivel="1"] .secao-tema-titulo,
.secao-tema[data-nivel="2"] .secao-tema-titulo {
  font-weight: 600;
}

/* Pode ajudar / pode prejudicar: verde e amarelo, iguais para os dois. */
.balanca-ajuda {
  border-color: var(--accent-border);
  background: var(--verde-50);
}

.balanca-prejudica {
  border-color: var(--amarelo-400);
  background: var(--amarelo-50);
}

.ponto-impacto {
  border-left: 4px solid var(--amarelo-400);
}

/* Botao principal: verde cheio, texto branco (contraste 6,5:1). */
.botao-primario {
  background: var(--verde-700);
  border-color: var(--verde-700);
  color: var(--papel-0);
}

.botao-primario:hover {
  background: var(--tinta-900);
  border-color: var(--tinta-900);
}

/* Texto corrido mais escuro: leitura mais facil para quem le pouco na tela. */
.proposta-simples,
.feito-texto,
.posicao-frase,
.ponto-texto {
  color: var(--ink);
}

@media (max-width: 720px) {
  .duelo-cab::after {
    content: none;
  }

  .linha .celula[data-candidato] {
    padding: var(--space-3);
  }
}

/* Marca com imagem (public/marca.png, quando existir). */
.marca-imagem {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

/* Aviso do 2o turno (abre uma vez por visitante). */
.aviso-turno {
  width: min(560px, calc(100% - 2 * var(--space-4)));
  max-height: calc(100% - 2 * var(--space-4));
  padding: 0;
  border: 0;
  border-top: 8px solid var(--verde-700);
  border-radius: var(--radius-card);
  background: var(--panel);
  color: var(--ink);
  box-shadow: var(--shadow-md);
}

.aviso-turno::backdrop {
  background: rgb(var(--tinta-900-rgb) / 0.55);
}

.aviso-turno-corpo {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-7);
  line-height: var(--leading-relaxed);
}

.aviso-turno-data {
  justify-self: start;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--amarelo-400);
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 700;
}

.aviso-turno h2 {
  font-family: var(--font-display);
  font-size: var(--text-display-sm);
  font-weight: 500;
  line-height: var(--leading-tight);
}

.aviso-turno ul {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-left: var(--space-5);
  color: var(--ink-soft);
}

.aviso-turno a {
  color: var(--accent-dark);
}

.aviso-turno-convite {
  font-weight: 600;
}

.aviso-turno .botao {
  justify-self: start;
}

@media (max-width: 720px) {
  .aviso-turno-corpo {
    padding: var(--space-5);
  }

  .aviso-turno .botao {
    justify-self: stretch;
  }
}

/* Tabela "ponto a ponto" de um assunto (ex.: trabalhadores e leis trabalhistas). */
.ponto-a-ponto {
  margin-bottom: var(--space-8);
  padding: var(--space-5);
  border: 2px solid var(--amarelo-400);
  border-radius: var(--radius-card);
  background: var(--panel);
}

.ponto-a-ponto-cab {
  margin-bottom: var(--space-5);
}

.ponto-a-ponto-titulo {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: var(--leading-snug);
}

.ponto-a-ponto-sub {
  margin-top: var(--space-1);
  color: var(--muted);
  font-size: var(--text-sm);
}

@media (max-width: 720px) {
  .ponto-a-ponto {
    padding: var(--space-4);
  }
}