/* Tokens extraídos do tema do Saiba Mais (saibamais.jor.br). Só tema claro, fontes do sistema. */
:root {
  color-scheme: light;
  --amarelo: #f9bc00;
  --amarelo-etiqueta: #ffcc00;
  --amarelo-claro: #fddf65;
  --amarelo-tinta: #fffbe6;
  --tinta: #131415;
  --tinta-2: #27272b;
  --cinza-1: #55555e;
  --cinza-2: #696974;
  --linha: #e5e5e7;
  --trilho: #e5e5e6;
  --fundo: #ffffff;
  --fundo-suave: #f7f7f7;
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-titulo: "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font: 16px/1.5 var(--fonte);
  padding: 0 16px 0;
}
.topo, .abas, main, .metodologia, .rodape { max-width: 780px; margin-inline: auto; }

.topo { padding: 40px 0 20px; }
.selo {
  display: inline-block; margin: 0 0 14px; padding: 4px 10px; border-radius: 30px;
  background: var(--amarelo-etiqueta); color: #000; font-size: 12px; letter-spacing: 1.5px;
}
h1 {
  margin: 0; font: 700 clamp(30px, 6.5vw, 44px)/1.05 var(--fonte-titulo);
  letter-spacing: -0.03em; text-wrap: balance;
}
.sub { margin: 12px 0 0; color: var(--cinza-1); font-size: 17px; }
.atualizado { margin: 4px 0 0; color: var(--cinza-2); font-size: 14px; }

.abas {
  display: flex; gap: 8px; overflow-x: auto; padding: 8px 0 14px;
  border-bottom: 1px solid var(--linha); scrollbar-width: thin;
}
.aba, .aba { appearance: none; -webkit-appearance: none; box-shadow: none; padding: 11px 16px; font-weight: 700; letter-spacing: -0.01em; border-radius: 4px; }
.aba.ativa { background: var(--amarelo); border-color: var(--amarelo); color: #000; }
.aba:focus-visible, .rodape a:focus-visible { outline: 3px solid #000; outline-offset: 2px; }

main { padding-top: 24px; outline: none; }
.destaque { padding: 4px 0 20px; }
.rotulo { margin: 0; font-size: 14px; color: var(--cinza-2); }
.valor { margin: 4px 0 0; font: 700 clamp(40px, 10vw, 64px)/1.1 var(--fonte-titulo); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.marca { box-shadow: inset 0 -0.3em 0 var(--amarelo); }
.faixa { margin: 8px 0 0; color: var(--cinza-1); font-variant-numeric: tabular-nums; }

.controles { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 12px; }
.chave { margin: 0 0 0 auto; font-size: 13px; color: var(--cinza-1); display: flex; align-items: center; gap: 4px; }
.amostra-faixa { width: 22px; height: 10px; border-radius: 5px; background: var(--amarelo); border: 1px solid var(--tinta); }
.amostra-ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--tinta); box-shadow: 0 0 0 2px var(--fundo), 0 0 0 3px var(--trilho); margin-left: 8px; }

.lista { list-style: none; margin: 0; padding: 0; }
.linha { display: grid; grid-template-columns: 48px 1fr; gap: 0 14px; align-items: start; padding: 16px 0 20px; border-top: 1px solid var(--linha); }
.foto { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--trilho); border: 1px solid var(--linha); }
.foto.ini { display: flex; align-items: center; justify-content: center; background: var(--amarelo-tinta); border-color: var(--amarelo-claro); font: 700 17px/1 var(--fonte-titulo); letter-spacing: 0.02em; color: var(--tinta); }
.conteudo { min-width: 0; }
.cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.nome { font-weight: 700; font-size: 19px; letter-spacing: -0.01em; }
.partido {
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em; padding: 1px 7px; border-radius: 4px;
  background: var(--fundo-suave); border: 1px solid var(--linha); color: var(--tinta-2);
}
.trilho { position: relative; height: 14px; margin: 12px 0 10px; background: var(--trilho); border-radius: 7px; }
.intervalo { position: absolute; top: 0; bottom: 0; background: var(--amarelo); border: 1px solid var(--tinta); border-radius: 7px; }
.ponto {
  position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: var(--tinta); box-shadow: 0 0 0 2px var(--fundo);
}
.meta { margin: 0; font-size: 14px; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.meta strong { color: var(--tinta); }
.nota { margin: 4px 0 0; font-size: 13px; color: var(--cinza-2); }
.sem { margin: 6px 0 0; color: var(--cinza-2); font-size: 15px; }
.linha.vazio .nome { color: var(--cinza-1); }

.metodologia { margin-top: 40px; padding: 20px; background: var(--amarelo-tinta); border: 1px solid var(--amarelo-claro); border-radius: 8px; }
.metodologia h2 { margin: 0 0 8px; font: 700 24px/1.1 var(--fonte-titulo); letter-spacing: -0.03em; }
.metodologia ul { margin: 0; padding-left: 20px; color: var(--tinta-2); font-size: 15px; }
.metodologia li { margin: 8px 0; }

.rodape { margin-top: 48px; padding: 28px 0 40px; border-top: 1px solid var(--linha); }
.logos { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; }
.colab { font: 300 26px/1 var(--fonte); color: var(--cinza-2); }
.logos a { display: inline-flex; }
.logo-saibamais { height: 38px; width: auto; }
.logo-ffmedia { height: 34px; width: auto; }
.credito { margin: 18px 0 0; font-size: 14px; color: var(--cinza-1); }
.credito a { color: var(--tinta); font-weight: 700; text-underline-offset: 3px; }

@media (max-width: 520px) {
    .chave { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: no-preference) {
  .intervalo, .ponto { transition: left 0.25s ease, width 0.25s ease; }
}