/* Mundo em Paralaxe
   Duas chapas de impressão, ciano (corner A) e magenta (corner B), sobre papel frio.
   Onde as duas se sobrepõem aparece o azul-tinta da marca. */

/* 1. Tokens ------------------------------------------------------------ */
:root {
  --papel: #F4F6F9;
  --superficie: #FFFFFF;
  --superficie-2: #EDF0F5;
  --tinta: #10131C;
  --tinta-2: #4A5163;
  --tinta-3: #7E8698;
  --linha: #E1E5EC;
  --linha-forte: #C9CFDA;
  --ciano: #00A0D2;
  --magenta: #D1007A;
  --a-texto: #007BA3;
  --b-texto: #B0006A;
  --a-suave: #E3F4FA;
  --b-suave: #FBE6F1;
  --registro: #2B2F8F;
  --registro-suave: #E7E8F6;
  --alerta: #F2B400;
  --alerta-suave: #FFF4D1;
  --alerta-texto: #6B4A00;
  --ok: #1D7A52;
  --erro: #B42318;
  --capa-fundo: #E9EDF3;
  --mistura: multiply;
  --sombra: 0 1px 2px rgba(16, 19, 28, .06), 0 8px 24px rgba(16, 19, 28, .06);
  --f-display: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-texto: "Newsreader", Georgia, "Times New Roman", serif;
  --f-mono: "Martian Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --raio: 10px;
  --largura: 1280px;
  --topo-altura: 0px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel: #0B0E14; --superficie: #131822; --superficie-2: #1A202C; --tinta: #E9ECF2; --tinta-2: #B3B9C6;
    --tinta-3: #7E8597; --linha: #232A37; --linha-forte: #333B4B; --ciano: #34C6F2; --magenta: #FF55B0;
    --a-texto: #5AD2F7; --b-texto: #FF7DC2; --a-suave: #0E2A36; --b-suave: #36122A; --registro: #A1A6FF;
    --registro-suave: #22254A; --alerta: #FFC933; --alerta-suave: #33280A; --alerta-texto: #FFD866;
    --ok: #4FC98F; --erro: #FF8A80; --capa-fundo: #161C27; --mistura: screen;
    --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papel: #0B0E14; --superficie: #131822; --superficie-2: #1A202C; --tinta: #E9ECF2; --tinta-2: #B3B9C6;
  --tinta-3: #7E8597; --linha: #232A37; --linha-forte: #333B4B; --ciano: #34C6F2; --magenta: #FF55B0;
  --a-texto: #5AD2F7; --b-texto: #FF7DC2; --a-suave: #0E2A36; --b-suave: #36122A; --registro: #A1A6FF;
  --registro-suave: #22254A; --alerta: #FFC933; --alerta-suave: #33280A; --alerta-texto: #FFD866;
  --ok: #4FC98F; --erro: #FF8A80; --capa-fundo: #161C27; --mistura: screen;
  --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35); color-scheme: dark;
}

/* 2. Base -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body {
  margin: 0; background: var(--papel); color: var(--tinta); font-family: var(--f-display);
  font-size: 16px; line-height: 1.5; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: .18em; }
a:hover { text-decoration-color: currentColor; }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--registro); outline-offset: 2px; border-radius: 4px; }
.pular { position: absolute; left: -999px; top: 8px; background: var(--tinta); color: var(--superficie); padding: 8px 12px; border-radius: 6px; z-index: 100; }
.pular:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icone { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; display: inline-block; vertical-align: -.125em; }
.container { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 24px; }
.rotulo { font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); font-stretch: 90%; }
.rotulo a { text-decoration: none; }
.rotulo a:hover { color: var(--tinta); }
.num { font-variant-numeric: tabular-nums; }
.a-cor { color: var(--a-texto); }
.b-cor { color: var(--b-texto); }

/* 3. Faixa de demonstração e topo --------------------------------------- */
.faixa-demo { background: var(--registro); color: var(--superficie); font-size: 13px; text-align: center; padding: 6px 16px; }
.faixa-demo strong { font-weight: 700; }
.topo { background: var(--papel); border-bottom: 1px solid var(--linha); position: sticky; top: 0; z-index: 40; }
.topo-linha { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.topo-data { flex: 1; min-width: 0; }
.topo-acoes { flex: 1; display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
.marca { display: flex; flex-direction: column; align-items: center; text-decoration: none; gap: 0; }
.marca-palavra { position: relative; font-weight: 900; font-size: 34px; line-height: 1; letter-spacing: -.045em; }
.marca-palavra span { display: block; mix-blend-mode: var(--mistura); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.marca-palavra .c { color: var(--ciano); transform: translate(-2.5px, -1px); }
.marca-palavra .m { color: var(--magenta); position: absolute; inset: 0; transform: translate(2.5px, 1px); }
.marca:hover .marca-palavra span, .marca:focus-visible .marca-palavra span { transform: none; }
.marca-sub { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .32em; text-transform: uppercase; color: var(--tinta-3); margin-top: 3px; padding-left: .32em; }
.botao-icone { width: 40px; height: 40px; display: inline-grid; place-items: center; border-radius: 50%; border: 0; background: transparent; cursor: pointer; color: var(--tinta-2); text-decoration: none; font-size: 19px; }
.botao-icone:hover { background: var(--superficie-2); color: var(--tinta); }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; font-weight: 700; font-size: 13px; color: #fff; background: var(--registro); text-decoration: none; }
.nav { border-top: 1px solid var(--linha); }
.nav ul { list-style: none; margin: 0 auto; padding: 0 16px; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; max-width: var(--largura); }
.nav ul::-webkit-scrollbar { display: none; }
.nav a { display: block; padding: 11px 10px; font-size: 14px; font-weight: 600; text-decoration: none; color: var(--tinta-2); white-space: nowrap; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--tinta); }
.nav a[aria-current="page"] { color: var(--tinta); border-bottom-color: var(--tinta); }
.nav .especial a { color: var(--registro); }
.nav .especial a::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ciano); box-shadow: 3px 0 0 var(--magenta); margin-right: 9px; vertical-align: 1px; }
.busca-topo { display: none; }
.busca-topo.aberta { display: block; border-top: 1px solid var(--linha); padding: 12px 0; }
.busca-topo form { display: flex; gap: 8px; }
.busca-topo input { flex: 1; }

.agora { border-bottom: 1px solid var(--linha); background: var(--superficie); }
.agora .container { display: flex; align-items: center; gap: 16px; min-height: 42px; }
.agora-rotulo { font-family: var(--f-mono); font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--registro); display: flex; align-items: center; gap: 7px; flex: none; }
.pulso { width: 7px; height: 7px; border-radius: 50%; background: var(--magenta); box-shadow: 0 0 0 0 color-mix(in srgb, var(--magenta) 60%, transparent); animation: pulso 2s infinite; }
@keyframes pulso { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.agora ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 28px; overflow-x: auto; scrollbar-width: none; mask-image: linear-gradient(90deg, #000 85%, transparent); }
.agora ol::-webkit-scrollbar { display: none; }
.agora li { white-space: nowrap; font-size: 14px; }
.agora time { font-family: var(--f-mono); font-size: 11px; color: var(--tinta-3); margin-right: 8px; }
.agora a { text-decoration: none; }
.agora a:hover { text-decoration: underline; }

/* 4. Capas: duas chapas fora de registro -------------------------------- */
.capa-moldura { position: relative; overflow: hidden; border-radius: var(--raio); background: var(--capa-fundo); aspect-ratio: 16 / 9; }
.capa-moldura.quadrada { aspect-ratio: 4 / 3; }
.capa { width: 100%; height: 100%; }
.capa-fundo { fill: var(--capa-fundo); }
.capa .chapa { mix-blend-mode: var(--mistura); transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.capa .chapa-c { fill: var(--ciano); stroke: var(--ciano); transform: translate(calc(var(--dx) * var(--k, 1) * -.5), calc(var(--dy) * var(--k, 1) * -.5)); }
.capa .chapa-m { fill: var(--magenta); stroke: var(--magenta); transform: translate(calc(var(--dx) * var(--k, 1) * .5), calc(var(--dy) * var(--k, 1) * .5)); }
.capa-registro circle, .capa-registro path { fill: none; stroke: var(--tinta-3); stroke-width: 2.5; opacity: .55; }
a:hover .capa .chapa, a:focus-visible .capa .chapa, .capa-moldura:hover .capa .chapa { transform: translate(0, 0); }
.selo-capa { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 6px; }

/* 5. Rótulos de notícia ------------------------------------------------ */
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-family: var(--f-mono); font-size: 11px; color: var(--tinta-3); font-stretch: 92%; }
.meta .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--linha-forte); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 999px; font-family: var(--f-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .03em; background: var(--superficie-2); color: var(--tinta-2); text-decoration: none; white-space: nowrap; }
.chip-ia { background: var(--registro-suave); color: var(--registro); }
.chip-contestada { background: var(--alerta-suave); color: var(--alerta-texto); }
.chip-demo { background: var(--tinta); color: var(--superficie); }
.chip-revisao { background: var(--alerta); color: #1a1300; }
.editoria-link { font-family: var(--f-mono); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--registro); font-stretch: 90%; }
.split { display: flex; height: 6px; border-radius: 999px; overflow: hidden; background: var(--superficie-2); gap: 2px; }
.split span { display: block; height: 100%; }
.split .s-a { background: var(--ciano); }
.split .s-b { background: var(--magenta); flex: 1; }
.split.vazio .s-a { background: var(--linha-forte); }
.split.vazio .s-b { background: var(--linha); }
.split-legenda { display: flex; justify-content: space-between; gap: 8px; font-family: var(--f-mono); font-size: 11px; font-stretch: 92%; }
.split-legenda .a { color: var(--a-texto); }
.split-legenda .b { color: var(--b-texto); text-align: right; }

/* 6. Home ---------------------------------------------------------------- */
.home { display: grid; gap: 48px; padding: 32px 0 72px; }
.abertura { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 40px; align-items: start; }
.manchete { display: grid; gap: 18px; text-decoration: none; }
.manchete h1 { font-size: clamp(30px, 3.6vw, 48px); font-weight: 800; letter-spacing: -.03em; line-height: 1.04; }
.manchete:hover h1 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; }
.manchete .linha-fina { font-family: var(--f-texto); font-size: 21px; line-height: 1.45; color: var(--tinta-2); max-width: 62ch; }
.manchete-ring { display: grid; gap: 6px; max-width: 520px; padding-top: 4px; }
.manchete-ring p { font-weight: 600; font-size: 15px; }
.lateral-titulo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 10px; border-bottom: 2px solid var(--tinta); margin-bottom: 4px; }
.lateral-titulo h2 { font-size: 18px; font-weight: 800; }
.lateral-titulo a { font-size: 13px; color: var(--tinta-3); text-decoration: none; }
.rings-quentes { list-style: none; margin: 0; padding: 0; }
.ring-mini { display: grid; gap: 8px; padding: 16px 0; border-bottom: 1px solid var(--linha); text-decoration: none; }
.ring-mini strong { font-size: 17px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; text-wrap: balance; }
.ring-mini:hover strong { text-decoration: underline; }
.secundarias { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.cartao { display: grid; gap: 12px; align-content: start; text-decoration: none; }
.cartao h3 { font-size: 19px; font-weight: 750; line-height: 1.18; }
.cartao:hover h3 { text-decoration: underline; }
.cartao .linha-fina { font-family: var(--f-texto); font-size: 16px; line-height: 1.4; color: var(--tinta-2); }

.dividida { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: center; padding: 36px 40px; background: var(--superficie); border-radius: 16px; box-shadow: var(--sombra); overflow: hidden; }
.dividida-medidor { display: grid; gap: 10px; justify-items: start; }
.dividida-medidor .paralaxometro { width: 100%; max-width: 360px; }
.theta { font-family: var(--f-mono); font-size: 44px; font-weight: 600; letter-spacing: -.04em; line-height: 1; font-stretch: 85%; }
.theta small { font-size: 14px; letter-spacing: .02em; color: var(--tinta-3); font-weight: 400; margin-left: 8px; }
.dividida h2 { font-size: clamp(24px, 2.6vw, 34px); font-weight: 800; letter-spacing: -.025em; }
.dividida-corpo { display: grid; gap: 18px; }
.teses { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tese { display: grid; gap: 6px; align-content: start; padding: 14px 16px; border-radius: var(--raio); }
.tese-a { background: var(--a-suave); }
.tese-b { background: var(--b-suave); }
.tese b { font-size: 15px; }
.tese-a b { color: var(--a-texto); }
.tese-b b { color: var(--b-texto); }
.tese p { font-family: var(--f-texto); font-size: 16px; line-height: 1.4; color: var(--tinta-2); }
.tese .pct { font-family: var(--f-mono); font-size: 22px; font-weight: 600; font-stretch: 85%; }

.miolo { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 40px; align-items: start; }
.blocos { display: grid; gap: 44px; }
.bloco-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 2px solid var(--tinta); padding-bottom: 10px; margin-bottom: 20px; }
.bloco-cab h2 { font-size: 24px; font-weight: 800; }
.bloco-cab h2 a { text-decoration: none; }
.bloco-cab > a { font-size: 13px; color: var(--tinta-3); text-decoration: none; }
.bloco-grade { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; }
.lista-simples { list-style: none; margin: 0; padding: 0; display: grid; }
.lista-simples li { padding: 14px 0; border-bottom: 1px solid var(--linha); }
.lista-simples li:first-child { padding-top: 0; }
.lista-simples li:last-child { border-bottom: 0; }
.item-lista { display: grid; gap: 6px; text-decoration: none; }
.item-lista h3 { font-size: 17px; font-weight: 700; line-height: 1.22; }
.item-lista:hover h3 { text-decoration: underline; }
.aside-home { display: grid; gap: 36px; position: sticky; top: 130px; }
.ultimas { list-style: none; margin: 0; padding: 0; }
.ultimas li { display: grid; grid-template-columns: 52px 1fr; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--linha); }
.ultimas time { font-family: var(--f-mono); font-size: 11px; color: var(--tinta-3); padding-top: 3px; }
.ultimas a { font-size: 15px; font-weight: 600; line-height: 1.3; text-decoration: none; }
.ultimas a:hover { text-decoration: underline; }
.ranking { list-style: none; margin: 0; padding: 0; counter-reset: rk; }
.ranking li { counter-increment: rk; display: grid; grid-template-columns: 34px 1fr; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--linha); }
.ranking li::before { content: counter(rk); font-family: var(--f-mono); font-size: 22px; font-weight: 600; color: var(--registro); line-height: 1; font-stretch: 85%; }
.ranking a { font-weight: 650; font-size: 15px; line-height: 1.3; text-decoration: none; }
.ranking a:hover { text-decoration: underline; }
.contestadas li a { display: grid; gap: 4px; }
.vazio-home { padding: 64px 24px; text-align: center; display: grid; gap: 14px; justify-items: center; background: var(--superficie); border-radius: 16px; }
.vazio-home h1 { font-size: 30px; }
.vazio-home p { color: var(--tinta-2); max-width: 56ch; }
.vazio-home code { font-family: var(--f-mono); font-size: 13px; background: var(--superficie-2); padding: 3px 8px; border-radius: 6px; }

/* 7. Notícia ------------------------------------------------------------ */
.pagina-noticia { padding: 28px 0 80px; }
.noticia-grade { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 48px; align-items: start; }
.noticia-cab { display: grid; gap: 14px; max-width: 820px; }
.noticia-cab h1 { font-size: clamp(30px, 4vw, 50px); font-weight: 800; letter-spacing: -.032em; line-height: 1.04; }
.noticia-cab .linha-fina { font-family: var(--f-texto); font-size: 22px; line-height: 1.42; color: var(--tinta-2); max-width: 60ch; }
.transparencia { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.aviso { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--raio); background: var(--registro-suave); color: var(--tinta); font-size: 15px; }
.aviso .icone { margin-top: 3px; color: var(--registro); }
.aviso-contestada { background: var(--alerta-suave); }
.aviso-contestada .icone { color: var(--alerta-texto); }
.aviso-contestada ul { margin: 6px 0 0; padding-left: 18px; font-size: 14px; color: var(--tinta-2); }
.noticia-capa { margin: 26px 0 30px; }
.corpo { max-width: 68ch; display: grid; gap: 26px; }
.resumo-30 { border-left: 3px solid; border-image: linear-gradient(var(--ciano), var(--magenta)) 1; padding: 4px 0 4px 18px; display: grid; gap: 8px; }
.resumo-30 ul { margin: 0; padding-left: 18px; font-family: var(--f-texto); font-size: 18px; line-height: 1.45; display: grid; gap: 6px; }
.texto { font-family: var(--f-texto); font-size: 20px; line-height: 1.66; font-optical-sizing: auto; }
.texto p + p { margin-top: 1.05em; }
.texto a { color: var(--registro); }
.texto strong { font-family: var(--f-display); font-size: .88em; font-weight: 700; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.secao-titulo { font-size: 20px; font-weight: 800; letter-spacing: -.015em; }
.fontes { display: grid; gap: 14px; }
.fontes-intro { color: var(--tinta-2); font-size: 15px; }
.fontes ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linha); }
.fontes li { border-bottom: 1px solid var(--linha); }
.fonte { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 14px; align-items: baseline; padding: 14px 0; text-decoration: none; }
.fonte-veiculo { font-family: var(--f-mono); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2); font-stretch: 90%; }
.fonte-titulo { font-family: var(--f-texto); font-size: 18px; line-height: 1.35; }
.fonte:hover .fonte-titulo { text-decoration: underline; }
.fonte time { font-family: var(--f-mono); font-size: 11px; color: var(--tinta-3); white-space: nowrap; }
.rodape-noticia { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: var(--tinta-3); }
.link-discreto { background: none; border: 0; padding: 0; color: var(--tinta-3); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; font-size: 14px; }
.link-discreto:hover { color: var(--tinta); }
.relacionadas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }

/* 8. Reações ------------------------------------------------------------ */
.reacoes { display: grid; gap: 14px; padding: 22px; background: var(--superficie); border-radius: 14px; box-shadow: var(--sombra); }
.reacoes-cab { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.reacoes-cab h2 { font-size: 18px; font-weight: 800; }
.reacoes-botoes { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.reagir { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--linha-forte); background: var(--superficie); font-weight: 700; font-size: 15px; cursor: pointer; transition: background .15s, border-color .15s, transform .1s; }
.reagir:hover { border-color: var(--tinta); }
.reagir:active { transform: scale(.98); }
.reagir b { font-family: var(--f-mono); font-weight: 500; font-size: 12px; color: var(--tinta-3); font-stretch: 90%; }
.reagir[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--superficie); }
.reagir[aria-pressed="true"] b { color: color-mix(in srgb, var(--superficie) 70%, transparent); }
.reagir-fake { font-family: var(--f-mono); font-weight: 700; letter-spacing: -.01em; }
.reagir-fake[aria-pressed="true"] { background: var(--alerta); border-color: var(--alerta); color: #1a1300; }
.reagir-fake[aria-pressed="true"] b { color: #4d3a00; }
.reacoes-total { display: grid; gap: 6px; }
.barra-postura { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--superficie-2); }
.barra-postura span { background: var(--tinta); transition: width .4s ease; }
.reacoes-legenda { display: flex; justify-content: space-between; gap: 8px; font-family: var(--f-mono); font-size: 11px; color: var(--tinta-3); }
.nota-privacidade { font-size: 13px; color: var(--tinta-3); display: flex; gap: 6px; align-items: center; }

/* 9. Ring ---------------------------------------------------------------- */
.ring { position: sticky; top: 120px; display: flex; flex-direction: column; max-height: calc(100vh - 136px); background: var(--superficie); border-radius: 16px; box-shadow: var(--sombra); overflow: hidden; }
.ring-alca { display: none; }
.ring-cab { display: grid; gap: 12px; padding: 18px 20px 16px; border-bottom: 1px solid var(--linha); }
.ring-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ring-nome { font-family: var(--f-mono); font-weight: 700; font-size: 12px; letter-spacing: .22em; display: flex; align-items: center; gap: 8px; }
.ring-nome .pulso { background: var(--ciano); box-shadow: 3px 0 0 var(--magenta); animation: none; }
.ring-numeros { font-family: var(--f-mono); font-size: 11px; color: var(--tinta-3); }
.ring-pergunta { font-size: 21px; font-weight: 800; letter-spacing: -.02em; line-height: 1.18; }
.ring-medidor { display: grid; grid-template-columns: 112px 1fr; gap: 14px; align-items: center; }
.ring-medidor .paralaxometro { width: 112px; }
.ring-medidor .theta { font-size: 28px; }
.ring-medidor .theta small { display: block; margin: 4px 0 0; font-size: 11px; }
.paralaxometro .pm-base { stroke: var(--linha-forte); stroke-width: 2; stroke-dasharray: 4 4; fill: none; }
.paralaxometro .pm-a { stroke: var(--ciano); stroke-width: 2.5; fill: none; }
.paralaxometro .pm-b { stroke: var(--magenta); stroke-width: 2.5; fill: none; }
.paralaxometro .pm-arco { stroke: var(--tinta-3); stroke-width: 1.5; fill: none; }
.paralaxometro .pm-ponto-a { fill: var(--ciano); }
.paralaxometro .pm-ponto-b { fill: var(--magenta); }
.paralaxometro .pm-estrela { fill: var(--tinta); }
.ring-corners { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.corner { display: grid; gap: 6px; align-content: start; padding: 12px; border-radius: 12px; border: 1.5px solid transparent; }
.corner-a { background: var(--a-suave); }
.corner-b { background: var(--b-suave); }
.corner[data-meu="true"].corner-a { border-color: var(--ciano); }
.corner[data-meu="true"].corner-b { border-color: var(--magenta); }
.corner-nome { font-weight: 800; font-size: 14px; line-height: 1.2; }
.corner-a .corner-nome { color: var(--a-texto); }
.corner-b .corner-nome { color: var(--b-texto); }
.corner-tese { font-family: var(--f-texto); font-size: 14.5px; line-height: 1.35; color: var(--tinta-2); }
.corner-rodape { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 2px; }
.corner-pct { font-family: var(--f-mono); font-weight: 600; font-size: 18px; font-stretch: 85%; }
.corner-a .corner-pct { color: var(--a-texto); }
.corner-b .corner-pct { color: var(--b-texto); }
.botao-lado { border: 0; border-radius: 999px; padding: 6px 11px; font-weight: 700; font-size: 12.5px; cursor: pointer; color: var(--papel); }
.corner-a .botao-lado { background: var(--a-texto); }
.corner-b .botao-lado { background: var(--b-texto); }
.corner[data-meu="true"] .botao-lado { background: transparent; color: var(--tinta-2); cursor: default; border: 1px solid var(--linha-forte); }
.placar-linhas { display: grid; gap: 8px; }
.placar-linha { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: center; font-family: var(--f-mono); font-size: 10.5px; color: var(--tinta-3); }
.placar-viradas { font-family: var(--f-mono); font-size: 11px; color: var(--tinta-3); }
.ring-corpo { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px 20px 20px; }
.compositor { position: sticky; top: 0; z-index: 2; background: var(--superficie); padding: 14px 0; border-bottom: 1px solid var(--linha); display: grid; gap: 8px; }
.compositor[hidden] { display: none; }
.compositor textarea { width: 100%; min-height: 76px; resize: vertical; padding: 10px 12px; border-radius: 10px; border: 1.5px solid var(--linha-forte); background: var(--papel); font-size: 15px; line-height: 1.4; }
.compositor textarea:focus { border-color: var(--tinta); outline: none; }
.compositor-linha { display: flex; align-items: center; gap: 8px; }
.compositor-linha input { flex: 1; min-width: 0; }
.contador { font-family: var(--f-mono); font-size: 11px; color: var(--tinta-3); }
.contador.estourou { color: var(--erro); }
.respondendo { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--tinta-2); background: var(--superficie-2); border-radius: 8px; padding: 6px 10px; }
.convite { padding: 16px 0; font-size: 14.5px; color: var(--tinta-2); display: grid; gap: 10px; border-bottom: 1px solid var(--linha); }
.filtros-ring { display: flex; gap: 4px; padding: 12px 0 4px; }
.filtro { border: 0; background: transparent; padding: 6px 10px; border-radius: 999px; font-size: 13px; font-weight: 650; cursor: pointer; color: var(--tinta-3); }
.filtro[aria-pressed="true"] { background: var(--tinta); color: var(--superficie); }
.argumentos { display: grid; }
.argumentos-vazio { padding: 22px 4px; color: var(--tinta-3); font-family: var(--f-texto); font-style: italic; font-size: 16px; }
.ring[data-filtro="a"] .arg-principal[data-lado="b"], .ring[data-filtro="b"] .arg-principal[data-lado="a"] { display: none; }

/* 10. Argumentos --------------------------------------------------------- */
.arg { display: grid; gap: 8px; padding: 16px 0; border-bottom: 1px solid var(--linha); }
.arg-cab { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; }
.arg-lado { flex: none; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-family: var(--f-mono); font-size: 11px; font-weight: 700; color: var(--papel); }
.arg[data-lado="a"] > .arg-cab .arg-lado { background: var(--a-texto); }
.arg[data-lado="b"] > .arg-cab .arg-lado { background: var(--b-texto); }
.arg-autor { font-weight: 700; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arg-cab time { font-family: var(--f-mono); font-size: 10.5px; color: var(--tinta-3); white-space: nowrap; }
.arg-texto { font-family: var(--f-texto); font-size: 17px; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-line; }
.arg-fonte { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: 11px; color: var(--registro); text-decoration: none; }
.arg-acoes { display: flex; flex-wrap: wrap; gap: 4px; margin-left: -8px; }
.acao { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; padding: 5px 8px; border-radius: 8px; font-size: 12.5px; font-weight: 650; color: var(--tinta-3); cursor: pointer; }
.acao:hover { background: var(--superficie-2); color: var(--tinta); }
.acao b { font-family: var(--f-mono); font-weight: 500; font-size: 11px; }
.acao[aria-pressed="true"] { color: var(--registro); }
.acao-convenceu { color: var(--tinta-2); }
.selo-ponte { font-family: var(--f-mono); font-size: 10px; color: var(--registro); background: var(--registro-suave); border-radius: 999px; padding: 1px 7px; }
.selo-virada { font-family: var(--f-mono); font-size: 10px; color: var(--ok); }

/* 11. Formulários, botões, diálogos, toast -------------------------------- */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 9px 18px; border-radius: 999px; border: 1.5px solid var(--tinta); background: var(--tinta); color: var(--superficie); font-weight: 700; font-size: 15px; text-decoration: none; cursor: pointer; white-space: nowrap; }
.botao:hover { background: color-mix(in srgb, var(--tinta) 86%, var(--registro)); }
.botao:disabled { opacity: .55; cursor: not-allowed; }
.botao-sec { background: transparent; color: var(--tinta); border-color: var(--linha-forte); }
.botao-sec:hover { background: var(--superficie-2); border-color: var(--tinta); }
.botao-pequeno { min-height: 34px; padding: 6px 13px; font-size: 13.5px; }
.botao-a { background: var(--a-texto); border-color: var(--a-texto); color: var(--papel); }
.botao-b { background: var(--b-texto); border-color: var(--b-texto); color: var(--papel); }
.campo { display: grid; gap: 6px; }
.campo label, .campo .campo-rotulo { font-weight: 650; font-size: 14px; }
.campo small { color: var(--tinta-3); font-size: 13px; }
.entrada, input[type="text"].entrada, input[type="email"].entrada, input[type="password"].entrada, input[type="url"].entrada, input[type="search"].entrada, textarea.entrada, select.entrada {
  width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 10px; border: 1.5px solid var(--linha-forte); background: var(--superficie); font-size: 16px;
}
.entrada:focus { border-color: var(--tinta); outline: none; box-shadow: 0 0 0 3px var(--registro-suave); }
.entrada-pequena { min-height: 36px; padding: 6px 10px; font-size: 14px; border-radius: 8px; border: 1.5px solid var(--linha-forte); background: var(--papel); }
.erro-campo { color: var(--erro); font-size: 13px; font-weight: 600; }
.erro-geral { background: color-mix(in srgb, var(--erro) 12%, var(--superficie)); color: var(--erro); padding: 10px 12px; border-radius: 10px; font-weight: 600; font-size: 14px; }
.caixa-marcar { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-size: 14.5px; color: var(--tinta-2); }
.caixa-marcar input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--registro); }
dialog { border: 0; border-radius: 16px; padding: 0; width: min(520px, calc(100vw - 32px)); background: var(--superficie); color: var(--tinta); box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
dialog::backdrop { background: rgba(8, 10, 16, .55); }
.dialogo { display: grid; gap: 16px; padding: 24px; }
.dialogo h2 { font-size: 22px; font-weight: 800; }
.dialogo p { color: var(--tinta-2); }
.dialogo-acoes { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.opcoes { display: grid; gap: 6px; }
.opcao { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; border: 1.5px solid var(--linha); cursor: pointer; font-size: 15px; }
.opcao:has(input:checked) { border-color: var(--tinta); background: var(--superficie-2); }
.opcao input { accent-color: var(--registro); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 90; background: var(--tinta); color: var(--superficie); padding: 11px 18px; border-radius: 12px; font-size: 14.5px; font-weight: 600; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); max-width: calc(100vw - 32px); }
.toast.erro { background: var(--erro); color: #fff; }

/* 12. Páginas internas ---------------------------------------------------- */
.pagina { padding: 36px 0 80px; }
.pagina-cab { display: grid; gap: 10px; padding-bottom: 24px; margin-bottom: 32px; border-bottom: 2px solid var(--tinta); }
.pagina-cab h1 { font-size: clamp(32px, 4.4vw, 56px); font-weight: 850; letter-spacing: -.035em; }
.pagina-cab p { font-family: var(--f-texto); font-size: 20px; color: var(--tinta-2); max-width: 60ch; }
.subeditorias { display: flex; flex-wrap: wrap; gap: 6px; }
.grade-cartoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 28px; }
.paginacao { display: flex; justify-content: center; gap: 10px; margin-top: 48px; }
.estreito { max-width: 460px; margin: 0 auto; }
.form-cartao { display: grid; gap: 18px; padding: 32px; background: var(--superficie); border-radius: 16px; box-shadow: var(--sombra); }
.form-cartao h1 { font-size: 30px; font-weight: 850; }
.form-cartao .intro { color: var(--tinta-2); font-size: 15px; }
.form-rodape { text-align: center; font-size: 14.5px; color: var(--tinta-2); }
.texto-longo { max-width: 70ch; font-family: var(--f-texto); font-size: 19px; line-height: 1.65; display: grid; gap: 1em; }
.texto-longo h2 { font-family: var(--f-display); font-size: 24px; font-weight: 800; margin-top: .8em; }
.texto-longo ul { margin: 0; padding-left: 22px; display: grid; gap: .4em; }
.texto-longo strong { font-weight: 650; }
.perfil-cab { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; }
.perfil-cab .avatar { width: 84px; height: 84px; font-size: 32px; }
.perfil-numeros { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 24px; }
.perfil-numeros div { display: grid; }
.perfil-numeros b { font-family: var(--f-mono); font-size: 28px; font-weight: 600; font-stretch: 85%; }
.perfil-numeros span { font-size: 13px; color: var(--tinta-3); }
.perfil-args { list-style: none; margin: 0; padding: 0; display: grid; }
.perfil-args li { padding: 18px 0; border-bottom: 1px solid var(--linha); display: grid; gap: 8px; }
.busca-form { display: flex; gap: 8px; max-width: 640px; }
.admin-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 36px; }
.admin-num { background: var(--superficie); border-radius: 12px; padding: 16px; box-shadow: var(--sombra); display: grid; gap: 4px; }
.admin-num b { font-family: var(--f-mono); font-size: 26px; font-weight: 600; font-stretch: 85%; }
.admin-secao { display: grid; gap: 14px; margin-bottom: 44px; }
.tabela-rolagem { overflow-x: auto; background: var(--superficie); border-radius: 12px; box-shadow: var(--sombra); }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linha); vertical-align: top; }
th { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); font-weight: 500; }
td.num { font-family: var(--f-mono); font-size: 12px; white-space: nowrap; }
details.log summary { cursor: pointer; color: var(--registro); font-size: 13px; }
details.log pre { white-space: pre-wrap; font-family: var(--f-mono); font-size: 11px; line-height: 1.5; max-height: 280px; overflow: auto; background: var(--papel); padding: 10px; border-radius: 8px; }
.linha-acoes { display: flex; gap: 6px; flex-wrap: wrap; }
.linha-acoes form { margin: 0; }

/* 13. Rodapé ------------------------------------------------------------- */
.rodape { border-top: 1px solid var(--linha); background: var(--superficie); padding: 44px 0 36px; margin-top: 24px; }
.rodape-grade { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.rodape h2 { font-size: 13px; font-family: var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); font-weight: 500; margin-bottom: 12px; }
.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14.5px; }
.rodape ul a { text-decoration: none; color: var(--tinta-2); }
.rodape ul a:hover { color: var(--tinta); text-decoration: underline; }
.rodape-manifesto { font-family: var(--f-texto); font-size: 17px; line-height: 1.5; color: var(--tinta-2); max-width: 42ch; margin-top: 12px; }
.rodape-fim { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--linha); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--tinta-3); }

/* 16. Gráficos: cores validadas (dataviz) ---------------------------------
   Série única e grupos do mapa: azul, laranja, verde-água. Origem das fontes: + amarelo e violeta.
   Faixas do mosaico regional: rampa sequencial azul, clara para o zero no tema claro e escura no escuro. */
:root {
  --serie-1: #2a78d6; --serie-2: #eb6834; --serie-3: #1baf7a; --serie-4: #eda100; --serie-5: #4a3aa7;
  --serie-neutra: #aeaca6; --serie-traco: #3f3e3a; --grade-grafico: #e6e8ee;
  --faixa-1: #9ec5f4; --faixa-2: #5598e7; --faixa-3: #256abf; --faixa-4: #104281;
  --faixa-1-texto: #10131C; --faixa-2-texto: #10131C; --faixa-3-texto: #FFFFFF; --faixa-4-texto: #FFFFFF;
  --ok-suave: #E4F3EC; --erro-suave: #FBE9E7;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --serie-1: #3987e5; --serie-2: #d95926; --serie-3: #199e70; --serie-4: #c98500; --serie-5: #9085e9;
    --serie-neutra: #6a6964; --serie-traco: #e9e7df; --grade-grafico: #232a37;
    --faixa-1: #184f95; --faixa-2: #256abf; --faixa-3: #3987e5; --faixa-4: #86b6ef;
    --faixa-1-texto: #FFFFFF; --faixa-2-texto: #FFFFFF; --faixa-3-texto: #0B0E14; --faixa-4-texto: #0B0E14;
    --ok-suave: #0F2A1E; --erro-suave: #3A1411;
  }
}
:root[data-theme="dark"] {
  --serie-1: #3987e5; --serie-2: #d95926; --serie-3: #199e70; --serie-4: #c98500; --serie-5: #9085e9;
  --serie-neutra: #6a6964; --serie-traco: #e9e7df; --grade-grafico: #232a37;
  --faixa-1: #184f95; --faixa-2: #256abf; --faixa-3: #3987e5; --faixa-4: #86b6ef;
  --faixa-1-texto: #FFFFFF; --faixa-2-texto: #FFFFFF; --faixa-3-texto: #0B0E14; --faixa-4-texto: #0B0E14;
  --ok-suave: #0F2A1E; --erro-suave: #3A1411;
}
[data-dica] { position: relative; }
[data-dica]:hover::after, [data-dica]:focus-visible::after {
  content: attr(data-dica); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); z-index: 30;
  width: max-content; max-width: 260px; padding: 6px 10px; border-radius: 8px; background: var(--tinta); color: var(--superficie);
  font: 600 12.5px/1.35 var(--f-display); letter-spacing: 0; text-transform: none; text-align: left; pointer-events: none; box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
}
.legenda { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--tinta-2); }
.legenda li { display: inline-flex; align-items: center; gap: 6px; }
.legenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
.legenda b { font-family: var(--f-mono); font-weight: 500; font-size: 11.5px; color: var(--tinta-3); }
.origem-tradicional { background: var(--serie-1); }
.origem-nativo-digital { background: var(--serie-2); }
.origem-publico { background: var(--serie-3); }
.origem-internacional { background: var(--serie-4); }
.origem-rede-social { background: var(--serie-5); }
.origem-nao-classificado { background: var(--serie-neutra); }
.tabela-dados { margin-top: 8px; font-size: 14px; }
.tabela-dados summary { cursor: pointer; color: var(--tinta-3); font-size: 13px; width: fit-content; }
.tabela-dados .tabela-rolagem { margin-top: 10px; }

/* 17. Avisos, selos e chips ------------------------------------------------ */
.aviso-sessao { margin: 18px 0 0; padding: 12px 16px; border-radius: var(--raio); background: var(--ok-suave); color: var(--tinta); font-weight: 600; font-size: 15px; border-left: 4px solid var(--ok); }
.aviso-sessao-erro { background: var(--erro-suave); border-left-color: var(--erro); }
.chip-ativo { background: var(--tinta); color: var(--superficie); }
.chip-selo { font-weight: 700; }
.chip-selo-ok { background: var(--ok-suave); color: var(--ok); }
.chip-selo-atencao { background: var(--alerta-suave); color: var(--alerta-texto); }
.chip-selo-grave { background: var(--erro); color: #fff; }
.chip-selo-neutro { background: var(--registro-suave); color: var(--registro); }
.selo-caixa { display: grid; gap: 6px; padding: 14px 16px; border-radius: var(--raio); border-left: 4px solid; background: var(--superficie); box-shadow: var(--sombra); }
.selo-caixa > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.selo-caixa strong { font-size: 18px; font-weight: 800; }
.selo-caixa p { font-family: var(--f-texto); font-size: 17px; line-height: 1.45; color: var(--tinta-2); }
.selo-caixa a { font-size: 14px; color: var(--registro); }
.selo-ok { border-color: var(--ok); }
.selo-ok strong { color: var(--ok); }
.selo-atencao { border-color: var(--alerta); }
.selo-atencao strong { color: var(--alerta-texto); }
.selo-grave { border-color: var(--erro); }
.selo-grave strong { color: var(--erro); }
.selo-neutro { border-color: var(--registro); }
.selo-neutro strong { color: var(--registro); }
.selo-convidado { display: inline-flex; align-items: center; gap: 4px; font-family: var(--f-mono); font-size: 10px; font-weight: 600; color: var(--registro); background: var(--registro-suave); border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
.arg-cab { flex-wrap: wrap; row-gap: 3px; }
.arg-cab .arg-autor { flex: 0 1 auto; }
.selo-perfil { font-size: 11.5px; padding: 3px 10px; margin-top: 6px; width: fit-content; }
.sino { position: relative; }
.sino-contagem { position: absolute; top: 4px; right: 3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--magenta); color: #fff; font: 700 10px/17px var(--f-mono); text-align: center; }

/* 18. Notícia: leitura, áudio, espectro, redação ------------------------- */
.resumo-30-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.botao-audio { display: inline-flex; align-items: center; gap: 7px; border: 1.5px solid var(--linha-forte); background: var(--superficie); border-radius: 999px; padding: 5px 12px 5px 10px; font-size: 13px; font-weight: 700; cursor: pointer; color: var(--tinta); }
.botao-audio:hover { border-color: var(--tinta); }
.botao-audio[aria-pressed="true"] { background: var(--tinta); color: var(--superficie); border-color: var(--tinta); }
.resumo-30 li { transition: background .2s; border-radius: 6px; }
.resumo-30 li.falando { background: var(--registro-suave); box-shadow: -6px 0 0 var(--registro-suave), 6px 0 0 var(--registro-suave); }
.espectro { display: grid; gap: 14px; padding: 16px; border-radius: var(--raio); background: var(--superficie); box-shadow: var(--sombra); }
.espectro-linha { display: grid; gap: 8px; }
.barra-empilhada { display: flex; gap: 2px; height: 14px; }
.barra-empilhada .seg { min-width: 6px; height: 100%; }
.barra-empilhada .seg:first-child { border-radius: 4px 0 0 4px; }
.barra-empilhada .seg:last-child { border-radius: 0 4px 4px 0; }
.barra-empilhada .seg:only-child { border-radius: 4px; }
.espectro-nota { font-size: 14px; color: var(--tinta-3); }
.fonte-veiculo { display: grid; align-content: start; }
.fonte-origem { display: flex; align-items: center; gap: 5px; margin-top: 4px; font-style: normal; font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--tinta-3); }
.fonte-origem i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.ferramentas-redacao { display: grid; gap: 16px; padding: 20px; border: 1.5px dashed var(--linha-forte); border-radius: 14px; }
.form-linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; align-items: end; }
.form-linha .campo-rotulo { font-size: 13px; }
.form-linha textarea.entrada { min-height: 44px; }

/* 19. Ring: rounds, abas, árvore, súmula, mapa ---------------------------- */
.ring-fase { display: grid; gap: 8px; }
.rounds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; counter-reset: round; }
.rounds li { counter-increment: round; position: relative; padding: 5px 6px 5px 26px; border-radius: 8px; background: var(--superficie-2); font-size: 12px; font-weight: 700; color: var(--tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rounds li::before { content: counter(round); position: absolute; left: 6px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center; font: 700 9.5px/1 var(--f-mono); background: var(--linha-forte); color: var(--superficie); }
.rounds li.feito { color: var(--tinta-2); }
.rounds li.feito::before { content: "✓"; background: var(--tinta-2); }
.rounds li.atual { background: var(--tinta); color: var(--superficie); }
.rounds li.atual::before { background: var(--magenta); box-shadow: -2px 0 0 var(--ciano); color: #fff; }
.ring-fase-texto { font-size: 13px; color: var(--tinta-2); line-height: 1.4; }
.ring-fase-texto b { color: var(--tinta); }
.corner-convidado { font-size: 12px; line-height: 1.35; color: var(--tinta-2); }
.corner-convidado .icone { color: var(--registro); margin-right: 3px; vertical-align: -2px; }
.ring-abas { display: flex; gap: 2px; padding: 0 16px; border-bottom: 1px solid var(--linha); flex: none; overflow-x: auto; scrollbar-width: none; }
.aba { border: 0; background: transparent; padding: 10px 10px 9px; font-size: 13.5px; font-weight: 700; color: var(--tinta-3); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.aba:hover { color: var(--tinta); }
.aba[aria-selected="true"] { color: var(--tinta); border-bottom-color: var(--tinta); }
.dica-round { font-size: 13.5px; color: var(--tinta-2); padding: 12px 0; border-bottom: 1px solid var(--linha); }
.nota-ranking { font-size: 12px; color: var(--tinta-3); padding-top: 14px; }
.respondendo b { color: var(--tinta); }
.arg-convidado { background: linear-gradient(90deg, var(--registro-suave), transparent 70%); margin: 0 -20px; padding-left: 17px; padding-right: 20px; border-left: 3px solid var(--registro); }
.arg-relacao { font-family: var(--f-mono); font-size: 10px; font-weight: 600; padding: 0 6px; border-radius: 999px; border: 1px solid var(--linha-forte); color: var(--tinta-2); white-space: nowrap; }
.arg-relacao-apoio { border-color: color-mix(in srgb, var(--ok) 50%, transparent); color: var(--ok); }
.arg-selos { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.selo-tipo { font-family: var(--f-mono); font-size: 10px; font-weight: 600; color: var(--tinta-2); background: var(--superficie-2); border-radius: 999px; padding: 1px 7px; }
.acao:disabled { opacity: .45; cursor: default; background: transparent; }
.acao[data-avaliar="fraco"][aria-pressed="true"] { color: var(--tinta); background: var(--superficie-2); }
.filhos { display: grid; gap: 2px; margin: 2px 0 0 10px; padding-left: 12px; border-left: 2px solid var(--linha); }
.alternar-filhos { justify-self: start; border: 0; background: none; padding: 2px 0; font-family: var(--f-mono); font-size: 11px; color: var(--tinta-3); cursor: pointer; }
.alternar-filhos::before { content: "▾ "; }
.alternar-filhos[aria-expanded="false"]::before { content: "▸ "; }
.alternar-filhos:hover { color: var(--tinta); }
.filhos-lista { display: grid; }
.filhos-lista .arg { padding: 10px 0; border-bottom: 0; }
.filhos-lista .arg-texto { font-size: 16px; }
.arg.chegou { animation: chegou 1.4s ease-out; }
@keyframes chegou { from { background: var(--registro-suave); } to { background: transparent; } }
.sumula { display: grid; gap: 16px; padding: 16px 0; }
.sumula-resumo { font-family: var(--f-texto); font-size: 18px; line-height: 1.5; }
.sumula-lado { display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; }
.sumula-a { background: var(--a-suave); }
.sumula-b { background: var(--b-suave); }
.sumula-lado h3 { display: flex; justify-content: space-between; gap: 8px; font-size: 15px; }
.sumula-a h3 { color: var(--a-texto); }
.sumula-b h3 { color: var(--b-texto); }
.sumula-lado p { font-family: var(--f-texto); font-size: 15.5px; line-height: 1.45; color: var(--tinta-2); }
.sumula-lado ul, .sumula-bloco ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; }
.sumula-bloco { display: grid; gap: 6px; }
.sumula-bloco h3 { font-size: 14px; }
.sumula-rodape { font-size: 12px; color: var(--tinta-3); }
.mapa { display: grid; gap: 14px; padding: 16px 0; }
.mapa-intro { font-size: 13.5px; color: var(--tinta-2); }
.mapa-caixa { position: relative; }
.mapa-grafico { width: 100%; height: auto; background: var(--papel); border-radius: 12px; }
.mapa-grafico .ponto { stroke: var(--papel); stroke-width: 2; }
.mapa-grafico .ponto.g0 { fill: var(--serie-1); }
.mapa-grafico .ponto.g1 { fill: var(--serie-2); }
.mapa-grafico .ponto.g2 { fill: var(--serie-3); }
.mapa-grafico .voce { fill: none; stroke: var(--tinta); stroke-width: 2.5; }
.mapa-grafico .voce-rotulo { font: 700 12px var(--f-display); fill: var(--tinta); }
.mapa-grafico .eixo { stroke: var(--grade-grafico); stroke-width: 1; }
.mapa-legenda i.g0 { background: var(--serie-1); border-radius: 50%; }
.mapa-legenda i.g1 { background: var(--serie-2); border-radius: 50%; }
.mapa-legenda i.g2 { background: var(--serie-3); border-radius: 50%; }
.mapa-grupos { display: grid; gap: 10px; }
.mapa-grupo { display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; background: var(--superficie-2); }
.mapa-grupo h3 { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.mapa-grupo h3 i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.mapa-grupo p { font-size: 12.5px; color: var(--tinta-3); }
.mapa-grupo ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-family: var(--f-texto); font-size: 15px; line-height: 1.4; }
.mapa-grupo li small { display: block; font-family: var(--f-mono); font-size: 10.5px; color: var(--tinta-3); }
.mapa-consensos { display: grid; gap: 6px; }
.mapa-consensos h3 { font-size: 14px; }
.mapa-consensos ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-family: var(--f-texto); font-size: 15px; }
.mapa-tooltip { position: absolute; z-index: 5; max-width: 220px; padding: 6px 10px; border-radius: 8px; background: var(--tinta); color: var(--superficie); font-size: 12.5px; font-weight: 600; pointer-events: none; transform: translate(-50%, calc(-100% - 10px)); white-space: nowrap; }

/* 20. Home, regional, eleições -------------------------------------------- */
.faixa-eleicoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; padding: 14px 18px; border-radius: 14px; background: var(--superficie); box-shadow: var(--sombra); text-decoration: none; }
.faixa-eleicoes .rotulo { color: var(--registro); font-weight: 700; }
.faixa-eleicoes-dia { font-size: 15px; font-weight: 600; }
.faixa-eleicoes-dia b { font-family: var(--f-mono); font-size: 20px; font-stretch: 85%; }
.faixa-eleicoes-dia small { font-family: var(--f-mono); font-size: 11px; color: var(--tinta-3); }
.faixa-eleicoes-link { margin-left: auto; font-size: 14px; color: var(--tinta-2); text-decoration: underline; text-underline-offset: .2em; }
.regional-grade { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.mosaico-figura { margin: 0; display: grid; gap: 14px; }
.mosaico-titulo { display: grid; gap: 8px; }
.legenda-sequencial i.faixa-0 { background: var(--superficie); border: 1.5px dashed var(--linha-forte); }
.mosaico { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; max-width: 520px; }
.ladrilho { aspect-ratio: 1; border-radius: 8px; display: grid; place-content: center; text-align: center; text-decoration: none; line-height: 1.1; transition: transform .12s; }
.ladrilho b { font-size: 14px; font-weight: 800; }
.ladrilho span { font-family: var(--f-mono); font-size: 11px; }
.ladrilho:hover { transform: scale(1.06); z-index: 2; }
.ladrilho.preferido { outline: 2.5px solid var(--magenta); outline-offset: 1px; }
.faixa-0 { background: var(--superficie); border: 1.5px dashed var(--linha-forte); color: var(--tinta-3); }
.faixa-1 { background: var(--faixa-1); color: var(--faixa-1-texto); }
.faixa-2 { background: var(--faixa-2); color: var(--faixa-2-texto); }
.faixa-3 { background: var(--faixa-3); color: var(--faixa-3-texto); }
.faixa-4 { background: var(--faixa-4); color: var(--faixa-4-texto); }
.regional-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 28px; }
.lista-estados { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-size: 15px; }
.lista-estados li { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--linha); padding: 3px 0; }
.lista-estados span { font-family: var(--f-mono); font-size: 12px; color: var(--tinta-3); }
.hub-eleicoes .contagem { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 36px; }
.contagem-item { display: grid; gap: 2px; padding: 16px 18px; border-radius: 14px; background: var(--superficie); box-shadow: var(--sombra); text-decoration: none; }
.contagem-item b { font-family: var(--f-mono); font-size: 40px; font-weight: 600; font-stretch: 85%; line-height: 1.1; }
.contagem-item span:last-child { font-size: 14px; color: var(--tinta-2); }
.contagem-link:hover b { color: var(--registro); }
.hub-grade { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: start; }
.hub-principal { display: grid; gap: 44px; }
.pesquisa-cenario { display: grid; gap: 10px; padding: 20px 0 24px; border-top: 1px solid var(--linha); }
.pesquisa-cenario h3 { font-size: 18px; font-weight: 800; }
.pesquisa-sub { font-size: 14px; color: var(--tinta-2); }
.pesquisa-grafico { margin: 0; display: grid; gap: 4px; }
.pesquisa-eixo, .pesquisa-linha { display: grid; grid-template-columns: minmax(110px, 30%) minmax(0, 1fr) 52px; gap: 10px; align-items: center; }
.pesquisa-eixo-marcas { position: relative; height: 16px; }
.pesquisa-eixo-marcas i { position: absolute; transform: translateX(-50%); font: 500 10px var(--f-mono); color: var(--tinta-3); }
.pesquisa-eixo-marcas i:first-child { transform: none; }
.pesquisa-eixo-marcas i:last-child { transform: translateX(-100%); }
.pesquisa-barras { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pesquisa-linha { min-height: 30px; border-radius: 6px; }
.pesquisa-linha:hover { background: var(--superficie-2); }
.pesquisa-linha[data-dica]:hover::after, .pesquisa-linha[data-dica]:focus-visible::after { left: 45%; }
.pesquisa-rotulo { font-size: 14px; font-weight: 600; text-align: right; line-height: 1.2; }
.pesquisa-linha.neutra .pesquisa-rotulo { color: var(--tinta-2); font-weight: 500; }
.pesquisa-trilho { position: relative; height: 18px; background-image: linear-gradient(90deg, var(--grade-grafico) 1px, transparent 1px); background-size: calc(100% / var(--divisoes)) 100%; box-shadow: inset -1px 0 0 var(--grade-grafico); }
.pesquisa-barra { position: absolute; left: 0; top: 0; bottom: 0; background: var(--serie-1); border-radius: 0 4px 4px 0; }
.pesquisa-linha.neutra .pesquisa-barra { background: var(--serie-neutra); }
.pesquisa-margem { position: absolute; top: 50%; height: 2px; margin-top: -1px; background: var(--serie-traco); opacity: .8; }
.pesquisa-margem::before, .pesquisa-margem::after { content: ""; position: absolute; top: -4px; width: 2px; height: 10px; background: var(--serie-traco); }
.pesquisa-margem::before { left: 0; }
.pesquisa-margem::after { right: 0; }
.pesquisa-valor { font-family: var(--f-mono); font-size: 13px; font-weight: 600; color: var(--tinta); }
.ficha-pesquisa { font-size: 13px; line-height: 1.5; color: var(--tinta-3); }
.ficha-pesquisa b { color: var(--tinta-2); }
.ficha-pesquisa a { color: var(--registro); }
.pesquisa-fichas summary { cursor: pointer; font-size: 13px; color: var(--tinta-3); }
.empate { padding: 8px 12px; border-radius: 10px; background: var(--registro-suave); font-size: 14px; width: fit-content; }
.nota-neutralidade { font-size: 13px; color: var(--tinta-3); line-height: 1.5; }
.nota-neutralidade a { color: var(--registro); }
.temas-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px 24px; }
.tema h3 { font-size: 15px; font-weight: 800; padding-bottom: 6px; border-bottom: 2px solid var(--tinta); }
.tema .argumentos-vazio { font-size: 14px; padding: 10px 0; }
.candidatos { list-style: none; margin: 0 0 8px; padding: 0; display: grid; }
.candidatos li { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--linha); font-size: 15px; }
.candidatos span { font-family: var(--f-mono); font-size: 11.5px; color: var(--tinta-3); }
.agenda { list-style: none; margin: 0; padding: 0; display: grid; }
.agenda li { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--linha); font-size: 14px; }
.agenda time { font-family: var(--f-mono); font-size: 11px; color: var(--registro); }
.agenda span, .agenda a { font-size: 13px; color: var(--tinta-3); }
.regras-eleitorais { font-size: 15px; gap: .6em; }
.regras-eleitorais h2 { font-size: 17px; margin-top: 0; }
.como-funciona { font-size: 16px; gap: .7em; }
.como-funciona h2 { margin-top: 0; font-size: 20px; }
.como-funciona ol { margin: 0; padding-left: 22px; display: grid; gap: .5em; }

/* 21. Conta, notificações, redação ---------------------------------------- */
.medio { max-width: 760px; margin: 0 auto; }
.medio .form-cartao { margin-bottom: 24px; }
.medio fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; }
.medio legend { margin-bottom: 8px; }
.como-tratamos { font-size: 16px; }
.como-tratamos h2 { font-size: 17px; margin-top: 0; }
.notificacoes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.notificacao a { display: grid; gap: 3px; padding: 14px 16px; border-radius: 12px; background: var(--superficie); text-decoration: none; box-shadow: var(--sombra); }
.notificacao.nova a { border-left: 4px solid var(--magenta); }
.notificacao strong { font-size: 16px; }
.notificacao-texto { font-family: var(--f-texto); font-size: 15.5px; color: var(--tinta-2); }
.push-estado { font-size: 14.5px; color: var(--tinta-2); }
.admin-atalhos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.admin-atalhos a { display: inline-flex; gap: 8px; align-items: center; padding: 8px 14px; border-radius: 999px; background: var(--superficie); box-shadow: var(--sombra); font-weight: 650; font-size: 14px; text-decoration: none; }
.admin-atalhos b { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--magenta); color: #fff; font: 700 11px/20px var(--f-mono); text-align: center; }
.form-grade-admin { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; align-items: end; }
.form-grade-admin .campo-rotulo { font-size: 12.5px; }
.form-grade-admin .entrada { min-height: 38px; padding: 7px 10px; font-size: 14px; }
.campo-largo { grid-column: span 2; }
.form-largo { max-width: none; }
.cartao-admin { display: grid; gap: 8px; padding: 16px; margin-bottom: 12px; border-radius: 12px; background: var(--superficie); box-shadow: var(--sombra); }
.resultados-pendentes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; }
.linha-revisao { justify-content: space-between; align-items: center; }
.origem-marca { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; vertical-align: 1px; }

@media (max-width: 980px) {
  .regional-grade, .hub-grade { grid-template-columns: minmax(0, 1fr); }
  .arg-convidado { margin: 0 -18px; padding-left: 15px; padding-right: 18px; }
}
@media (max-width: 680px) {
  .botao-redacao { display: none; }
  .topo-acoes { gap: 2px; }
  .topo-acoes .botao-icone { width: 36px; height: 36px; }
  .regional-lista { grid-template-columns: minmax(0, 1fr); }
  .ladrilho b { font-size: 12px; }
  .ladrilho span { font-size: 10px; }
  .pesquisa-eixo, .pesquisa-linha { grid-template-columns: minmax(0, 1fr) 46px; gap: 2px 8px; }
  .pesquisa-eixo > span:first-child { display: none; }
  .pesquisa-rotulo { grid-column: 1 / -1; text-align: left; font-size: 13px; }
  .pesquisa-linha { padding-top: 4px; }
  .campo-largo { grid-column: auto; }
  .faixa-eleicoes-link { margin-left: 0; }
  .rounds li { font-size: 11px; padding-left: 24px; }
}

/* O Ring rola inteiro: o cabeçalho sobe e as abas (e, no celular, a alça) ficam presas no topo. */
.ring { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.ring-corpo { flex: none; overflow: visible; }
.ring-abas { position: sticky; top: 0; z-index: 3; background: var(--superficie); }
.ring .compositor { top: 41px; }
@media (max-width: 980px) {
  .ring .ring-alca { position: sticky; top: 0; z-index: 4; background: var(--superficie); }
  .ring-abas { top: var(--alca-altura, 76px); }
  .ring .compositor { top: calc(var(--alca-altura, 76px) + 41px); }
}

/* 14. Responsivo --------------------------------------------------------- */
@media (max-width: 1180px) {
  .noticia-grade { grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; }
  .secundarias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .abertura, .miolo, .dividida { grid-template-columns: minmax(0, 1fr); }
  .dividida { padding: 26px; gap: 22px; }
  .aside-home { position: static; }
  .grade-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rodape-grade { grid-template-columns: 1fr 1fr; }
  .noticia-grade { grid-template-columns: minmax(0, 1fr); }
  body.tem-ring { padding-bottom: 76px; }
  /* O Ring vira uma folha que sobe da base da tela */
  .ring { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 60; max-height: 88vh; border-radius: 18px 18px 0 0; box-shadow: 0 -12px 40px rgba(0, 0, 0, .22); transform: translateY(calc(100% - 76px)); transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
  .ring[data-estado="aberto"] { transform: translateY(0); }
  .ring.chegando { animation: sobe .7s cubic-bezier(.2, .8, .2, 1) backwards; }
  @keyframes sobe { from { transform: translateY(100%); } to { transform: translateY(calc(100% - 76px)); } }
  .ring-alca { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 76px; padding: 12px 18px; border: 0; background: transparent; cursor: pointer; text-align: left; border-bottom: 1px solid var(--linha); flex: none; }
  .ring-alca-texto { flex: 1; min-width: 0; display: grid; gap: 5px; }
  .ring-alca-texto strong { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ring-alca .seta { transition: transform .3s; font-size: 20px; color: var(--tinta-3); }
  .ring[data-estado="aberto"] .ring-alca .seta { transform: rotate(180deg); }
}
@media (max-width: 680px) {
  .container { padding: 0 16px; }
  .topo-data { display: none; }
  .topo-linha { min-height: 56px; }
  .marca { align-items: flex-start; }
  .marca-palavra { font-size: 28px; }
  .secundarias, .grade-cartoes, .bloco-grade, .relacionadas, .teses { grid-template-columns: minmax(0, 1fr); }
  .home { gap: 36px; padding-top: 20px; }
  .reacoes-botoes { grid-template-columns: 1fr 1fr; }
  .reagir-fake { grid-column: 1 / -1; }
  .fonte { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .texto { font-size: 19px; }
  .rodape-grade { grid-template-columns: minmax(0, 1fr); }
  .form-cartao { padding: 22px; }
}

/* 15. Movimento reduzido -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}