/* Paleta tirada da urna eletrônica: chassi cinza, teclado grafite,
   CONFIRMA verde e CORRIGE laranja. As cores dos candidatos vêm dos partidos. */
:root {
  --chassi: #E7E8E3;
  --painel: #F7F7F4;
  --linha: #D3D5CE;
  --grafite: #1D2126;
  --texto2: #585E66;
  --texto3: #858A90;
  --confirma: #12A150;
  --corrige: #E8761A;
  --vazio: #CFD1CB;
  --mapa-borda: #F7F7F4;
  --sombra: 0 1px 0 rgba(29, 33, 38, .06);
  --raio: 14px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --chassi: #16181B; --painel: #1F2226; --linha: #30343A; --grafite: #ECEDEA;
    --texto2: #A9AEB4; --texto3: #7B8188; --vazio: #33373D; --mapa-borda: #1F2226;
    --sombra: none; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --chassi: #16181B; --painel: #1F2226; --linha: #30343A; --grafite: #ECEDEA;
  --texto2: #A9AEB4; --texto3: #7B8188; --vazio: #33373D; --mapa-borda: #1F2226;
  --sombra: none; color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0; background: var(--chassi); color: var(--grafite);
  font-family: 'Archivo', system-ui, sans-serif; font-size: 16px; line-height: 1.5;
  font-variation-settings: 'wdth' 100;
  font-feature-settings: 'tnum' 1;
}
a { color: inherit; }
button, select, input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--confirma); outline-offset: 2px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: absolute; left: -999px; }
.pular:focus { left: 16px; top: 8px; background: var(--painel); padding: 8px 12px; z-index: 10; }

/* ---------- topo ---------- */
.topo {
  display: flex; align-items: center; gap: 16px; padding: 14px clamp(16px, 4vw, 40px);
  max-width: 1320px; margin: 0 auto;
}
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; font-size: 18px; font-variation-settings: 'wdth' 112; letter-spacing: -.01em; }
.tecla { width: 30px; height: 18px; border-radius: 5px; background: var(--confirma); box-shadow: inset 0 -3px 0 rgba(0,0,0,.18); }
.status { display: flex; align-items: center; gap: 14px; margin-left: auto; font-size: 14px; color: var(--texto2); }
.aovivo { display: inline-flex; align-items: center; gap: 7px; }
.aovivo::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--texto3); }
.aovivo.on::before { background: var(--confirma); animation: pulso 2s ease-in-out infinite; }
.aovivo.velho::before { background: var(--corrige); }
@keyframes pulso { 50% { box-shadow: 0 0 0 5px rgba(18,161,80,.18); } }
.pessoas { font-weight: 600; color: var(--grafite); }
.anuncie { font-size: 14px; font-weight: 600; text-decoration: none; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--linha); background: var(--painel); white-space: nowrap; }
.anuncie:hover { border-color: var(--grafite); }

.patrocinio { max-width: 1320px; margin: 0 auto 10px; padding: 0 clamp(16px, 4vw, 40px); }

main { max-width: 1320px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }

/* ---------- placar ---------- */
.painel { background: var(--painel); border-radius: 22px; padding: clamp(18px, 3.5vw, 40px); box-shadow: var(--sombra); border: 1px solid var(--linha); }
.filtros { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: clamp(18px, 3vw, 30px); }
.cargos { display: inline-flex; background: var(--chassi); border-radius: 999px; padding: 4px; }
.cargos button { border: 0; background: none; padding: 7px 16px; border-radius: 999px; font-weight: 600; font-size: 15px; cursor: pointer; color: var(--texto2); }
.cargos button[aria-selected="true"] { background: var(--grafite); color: var(--painel); }
.cargos button:disabled { opacity: .45; cursor: not-allowed; }
.onde { display: flex; gap: 8px; flex-wrap: wrap; }
select, input[type="search"] {
  height: 40px; border-radius: 10px; border: 1px solid var(--linha); background: var(--chassi); padding: 0 12px; font-size: 15px;
}
select { padding-right: 30px; max-width: 220px; }
.busca { position: relative; }
input[type="search"] { width: min(260px, 70vw); }
#sugestoes { position: absolute; z-index: 20; top: 44px; left: 0; right: 0; min-width: 260px; margin: 0; padding: 6px; list-style: none; background: var(--painel); border: 1px solid var(--linha); border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.14); max-height: 320px; overflow: auto; }
#sugestoes li { padding: 8px 10px; border-radius: 8px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; }
#sugestoes li small { color: var(--texto3); }
#sugestoes li[aria-selected="true"], #sugestoes li:hover { background: var(--chassi); }

h1 { font-size: clamp(22px, 3vw, 30px); line-height: 1.15; margin: 0; font-weight: 700; font-variation-settings: 'wdth' 100; letter-spacing: -.01em; }
.sub { margin: 4px 0 0; color: var(--texto2); font-size: 15px; max-width: 70ch; }

/* a disputa: o elemento principal da página */
.disputa { margin-top: clamp(18px, 3vw, 30px); }
.lados { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: end; }
.lado { min-width: 0; display: grid; grid-template-columns: auto 1fr; gap: clamp(10px, 2vw, 20px); align-items: end; }
.lado.dir { grid-template-columns: 1fr auto; text-align: right; }
.lado.dir .foto { order: 2; }
.foto { width: clamp(48px, 9vw, 104px); height: auto; aspect-ratio: 161 / 225; border-radius: 12px; object-fit: cover; background: var(--chassi); border-bottom: 5px solid var(--cor); }
.nome { font-weight: 700; font-size: clamp(15px, 1.8vw, 20px); line-height: 1.2; }
.nome small { display: block; font-weight: 400; color: var(--texto2); font-size: 13px; }
.pct {
  font-weight: 800; font-variation-settings: 'wdth' 125; letter-spacing: -.035em; line-height: .9;
  font-size: clamp(44px, 7vw, 104px); color: var(--cor); margin: 6px 0 4px;
}
.pct span { font-size: .42em; letter-spacing: 0; margin-left: .04em; }
.votos { color: var(--texto2); font-size: clamp(13px, 1.4vw, 16px); }
.eleito { display: inline-block; margin-top: 6px; font-weight: 700; font-size: 13px; padding: 3px 10px; border-radius: 999px; background: var(--confirma); color: #fff; }

.cabo { position: relative; height: clamp(22px, 3vw, 34px); margin-top: clamp(14px, 2vw, 22px); border-radius: 8px; overflow: hidden; display: flex; background: var(--vazio); }
.cabo i { display: block; height: 100%; transition: width .9s cubic-bezier(.2,.8,.2,1); }
.cabo .meio { position: absolute; left: 50%; top: -6px; bottom: -6px; width: 2px; margin-left: -1px; background: var(--grafite); opacity: .8; }
.cabo-legenda { display: flex; justify-content: space-between; font-size: 13px; color: var(--texto2); margin-top: 6px; }
.cabo-legenda b { color: var(--grafite); }

.andamento { margin-top: clamp(18px, 3vw, 28px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--linha); border-radius: 12px; overflow: hidden; border: 1px solid var(--linha); }
.andamento div { background: var(--painel); padding: 12px 14px; }
.andamento dt { font-size: 13px; color: var(--texto2); }
.andamento dd { margin: 2px 0 0; font-size: clamp(17px, 2vw, 22px); font-weight: 700; font-variation-settings: 'wdth' 110; }
.barra-apur { display: block; height: 6px; border-radius: 3px; background: var(--chassi); margin-top: 8px; overflow: hidden; }
.barra-apur i { display: block; height: 100%; background: var(--confirma); transition: width .9s; }
.fonte-chip { font-size: 13px; color: var(--texto2); margin-top: 12px; }
.fonte-chip b { color: var(--grafite); }
.aviso { margin-top: 14px; padding: 10px 14px; border-radius: 10px; background: color-mix(in srgb, var(--corrige) 14%, var(--painel)); font-size: 14px; }
.espera { text-align: center; padding: 10px 0 4px; }
.espera .relogio { font-weight: 800; font-variation-settings: 'wdth' 125; font-size: clamp(40px, 8vw, 90px); letter-spacing: -.03em; line-height: 1; }

/* ---------- mapa e lista ---------- */
.mapa-lista { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 18px; margin-top: 18px; }
.mapa-caixa, .lista-caixa, .governos { background: var(--painel); border-radius: 22px; padding: clamp(16px, 2.6vw, 28px); border: 1px solid var(--linha); box-shadow: var(--sombra); }
h2 { font-size: 19px; margin: 0 0 10px; line-height: 1.2; }
.mapa-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.legenda { display: flex; gap: 14px; font-size: 13px; color: var(--texto2); flex-wrap: wrap; }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i { width: 30px; height: 10px; border-radius: 3px; background: linear-gradient(90deg, var(--a), var(--b), var(--c)); }
.mapa { position: relative; margin-top: 8px; }
.mapa svg { width: 100%; height: auto; display: block; max-height: 72vh; }
.mapa path.m { stroke: var(--mapa-borda); stroke-width: .35; vector-effect: non-scaling-stroke; cursor: pointer; transition: fill .6s; }
.mapa path.u { fill: none; stroke: var(--grafite); stroke-width: .9; vector-effect: non-scaling-stroke; pointer-events: none; opacity: .55; }
.mapa path.m.fora { opacity: .18; }
.mapa path.m.sel { stroke: var(--grafite); stroke-width: 2.2; }
.nota { font-size: 13px; color: var(--texto3); margin: 8px 0 0; }
.dica { position: fixed; z-index: 30; pointer-events: none; background: var(--grafite); color: var(--painel); padding: 8px 11px; border-radius: 10px; font-size: 13px; line-height: 1.35; max-width: 240px; }
.dica b { display: block; }

.lista-caixa { display: flex; flex-direction: column; min-height: 0; }
#lista { overflow: auto; max-height: 72vh; margin: 0 -6px; padding: 0 6px; }
.linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 9px 6px; border-bottom: 1px solid var(--linha); width: 100%; text-align: left; background: none; border-left: 0; border-right: 0; border-top: 0; cursor: pointer; border-radius: 0; }
.linha:hover { background: var(--chassi); }
.linha .n { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha .n small { font-weight: 400; color: var(--texto3); margin-left: 6px; }
.linha .p { font-size: 14px; color: var(--texto2); white-space: nowrap; }
.mini { grid-column: 1 / -1; height: 8px; border-radius: 4px; overflow: hidden; display: flex; background: var(--vazio); position: relative; }
.mini i { height: 100%; }
.mini::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--painel); }
.virou { font-size: 11px; font-weight: 700; color: var(--corrige); margin-left: 6px; }
.mais { margin-top: 10px; border: 1px solid var(--linha); background: var(--chassi); border-radius: 10px; padding: 9px; cursor: pointer; width: 100%; font-weight: 600; }
.ordem { display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.ordem button { border: 1px solid var(--linha); background: none; border-radius: 999px; padding: 4px 11px; font-size: 13px; cursor: pointer; color: var(--texto2); }
.ordem button[aria-pressed="true"] { border-color: var(--grafite); color: var(--grafite); font-weight: 600; }
.detalhe dl { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 10px 0 0; font-size: 15px; }
.detalhe dt { color: var(--texto2); }
.detalhe dd { margin: 0; font-weight: 600; text-align: right; }
.voltar { border: 0; background: none; padding: 0; color: var(--texto2); cursor: pointer; text-decoration: underline; font-size: 14px; margin-bottom: 8px; }

/* ---------- governadores ---------- */
.governos { margin-top: 18px; }
.gov-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.gov { text-align: left; border: 1px solid var(--linha); background: var(--chassi); border-radius: 16px; padding: 14px; cursor: pointer; }
.gov:hover, .gov[aria-current="true"] { border-color: var(--grafite); }
.gov h3 { margin: 0 0 8px; font-size: 15px; font-weight: 700; display: flex; justify-content: space-between; }
.gov h3 small { font-weight: 400; color: var(--texto2); }
.gov .par { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.gov .par b { font-variation-settings: 'wdth' 120; font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--cor); }
.gov .mini { margin-top: 8px; height: 10px; }

.rodape { max-width: 1320px; margin: 24px auto 0; padding: 10px clamp(16px, 4vw, 40px) 40px; color: var(--texto2); font-size: 14px; }
.rodape p { margin: 4px 0; max-width: 90ch; }

/* modo telão: ?palco=1 esconde o que não é placar */
body.palco .topo .anuncie, body.palco .rodape, body.palco .filtros, body.palco .patrocinio .convite { display: none; }

@media (max-width: 900px) {
  .mapa-lista { grid-template-columns: 1fr; }
  #lista { max-height: none; }
  .andamento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .topo { flex-wrap: wrap; gap: 8px 12px; }
  .status { order: 3; width: 100%; margin-left: 0; }
  .anuncie { margin-left: auto; }
  .lado, .lado.dir { grid-template-columns: 1fr; }
  .lado.dir .foto { order: 0; justify-self: end; }
  .pct { font-size: clamp(30px, 10vw, 52px); }
  .nome small { font-size: 12px; }
  .nome small .vice { display: none; }
  .lados { gap: 14px; }
  .andamento dd { font-size: 17px; }
  .cabo-legenda span:nth-child(2) { display: none; }
  .onde { width: 100%; }
  .onde select, .busca { flex: 1 1 100%; max-width: none; }
  input[type="search"] { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

.andamento:empty { display: none; }

/* ---------- comparação com o 1º turno ---------- */
.comparar { margin-top: 18px; }
.comparar h2 { margin-bottom: 4px; }
.comp-nota { color: var(--texto2); font-size: 14px; margin: 0 0 16px; }
.comp-cand { display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr) auto; gap: 6px 18px; align-items: center; padding: 12px 0; border-top: 1px solid var(--linha); }
.comp-cand .quem { font-weight: 700; line-height: 1.25; }
.comp-cand .quem small { display: block; font-weight: 400; color: var(--texto2); font-size: 13px; }
.barras { display: grid; gap: 5px; }
.barras div { display: grid; grid-template-columns: 58px minmax(0, 1fr) 62px; gap: 8px; align-items: center; font-size: 13px; color: var(--texto2); }
.barras span.trilho { height: 12px; border-radius: 3px; background: var(--chassi); overflow: hidden; }
.barras span.trilho i { display: block; height: 100%; border-radius: 3px; transition: width .9s; }
.barras b { color: var(--grafite); text-align: right; font-weight: 600; }
.delta { font-weight: 800; font-variation-settings: 'wdth' 118; font-size: clamp(18px, 2.4vw, 26px); text-align: right; white-space: nowrap; }
.delta small { display: block; font-weight: 400; font-size: 12px; color: var(--texto2); font-variation-settings: 'wdth' 100; }
.comp-ind { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--linha); border: 1px solid var(--linha); border-radius: 12px; overflow: hidden; margin-top: 14px; }
.comp-ind div { background: var(--painel); padding: 12px 14px; }
.comp-ind dt { font-size: 13px; color: var(--texto2); }
.comp-ind dd { margin: 4px 0 0; font-size: 15px; }
.comp-ind dd b { font-size: 20px; font-variation-settings: 'wdth' 110; }
.comp-ind dd span { color: var(--texto2); }
details.outros { margin-top: 12px; font-size: 14px; }
details.outros summary { cursor: pointer; color: var(--texto2); }
details.outros ol { columns: 2 220px; margin: 8px 0 0; padding-left: 22px; }
details.outros li { margin: 3px 0; break-inside: avoid; }

.modos { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.modos button { border: 1px solid var(--linha); background: none; border-radius: 999px; padding: 4px 11px; font-size: 13px; cursor: pointer; color: var(--texto2); }
.modos button[aria-pressed="true"] { border-color: var(--grafite); color: var(--grafite); font-weight: 600; }
.mapa-caixa .legenda { margin-top: 10px; }

/* ---------- patrocínio: faixa principal e cotas ---------- */
.patrocinio .entra { animation: entra .5s ease-out; }
@keyframes entra { from { opacity: 0; } }

/* ---------- aviso para lives e marca d'água do telão ---------- */
.lives { max-width: 1320px; margin: 18px auto 0; padding: 0 clamp(16px, 4vw, 40px); }
.lives > * { max-width: 75ch; }
.lives h2 { font-size: 17px; }
.lives p { margin: 0; color: var(--texto2); }
.lives code { white-space: nowrap; font-size: 14px; background: var(--painel); padding: 1px 6px; border-radius: 5px; border: 1px solid var(--linha); }
.marca-dagua { position: fixed; right: 16px; bottom: 14px; z-index: 40; background: var(--grafite); color: var(--painel); padding: 8px 14px; border-radius: 10px; font-size: 15px; font-weight: 600; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.marca-dagua span { font-weight: 400; opacity: .8; }
body.palco .lives { display: none; }

@media (max-width: 700px) {
  .comp-cand { grid-template-columns: minmax(0, 1fr) auto; }
  .comp-cand .barras { grid-column: 1 / -1; grid-row: 2; }
  .comp-ind { grid-template-columns: 1fr; }
}

/* transferência de votos */
.transf { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linha); }
.transf h3 { margin: 0 0 6px; font-size: 16px; }
.transf p { margin: 0 0 10px; max-width: 75ch; }
.transf .comp-nota { margin: 8px 0 0; }
.divisao { display: flex; height: 30px; border-radius: 8px; overflow: hidden; }
.divisao i { display: flex; align-items: center; padding: 0 10px; min-width: 0; transition: width .9s; }
.divisao span { font-style: normal; font-weight: 700; color: #fff; font-size: 14px; white-space: nowrap; }

/* ---------- patrocínio em tamanho padrão ----------
   Faixa principal: caixa 6:1 na largura do conteúdo (até 1240 x 207 px; cerca de 358 x 60 px no celular).
   Cota de apoio: caixa 5:2, até 4 por linha (cerca de 230 x 92 px no computador; 2 por linha no celular). */
.patrocinio { display: grid; gap: 4px; }
.rotulo { font-size: 12px; color: var(--texto2); letter-spacing: .02em; }
.peca { display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 12px; background: var(--painel); border: 1px solid var(--linha); text-decoration: none; color: var(--grafite); }
.peca img { width: 100%; height: 100%; object-fit: contain; display: block; }
.patrocinio .peca { aspect-ratio: 6 / 1; width: 100%; max-height: 210px; }
.patrocinio a.peca:hover, .cotas a.peca:hover { border-color: var(--grafite); }
.patrocinio .convite { border-style: dashed; flex-direction: column; gap: 4px; text-align: center; padding: 8px 16px; color: var(--texto2); }
.patrocinio .convite span { font-weight: 700; font-size: clamp(14px, 2vw, 22px); color: var(--grafite); }
.patrocinio .convite small { font-size: clamp(11px, 1.3vw, 14px); }
.cotas { display: grid; gap: 6px; margin-top: 18px; padding: 14px 16px; border-radius: var(--raio); border: 1px solid var(--linha); background: var(--painel); }
.cotas-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 240px)); justify-content: center; gap: 12px; }
.cotas .peca { aspect-ratio: 5 / 2; }
@media (max-width: 560px) { .cotas-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }

/* ---------- ao longo da apuração e projeções ---------- */
.tend-grade { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; margin-top: 18px; }
.caixa { background: var(--painel); border-radius: 22px; padding: clamp(16px, 2.6vw, 28px); border: 1px solid var(--linha); box-shadow: var(--sombra); min-width: 0; }
.grafico-caixa { position: relative; }
.grafico { margin-top: 8px; position: relative; touch-action: pan-y; }
.grafico svg { display: block; width: 100%; height: auto; overflow: visible; }
.grafico .grade line { stroke: var(--linha); stroke-width: 1; }
.grafico .grade text, .grafico .eixo text { fill: var(--texto3); font-size: 12px; font-variant-numeric: tabular-nums; }
.grafico .metade { stroke: var(--texto3); stroke-dasharray: 4 4; stroke-width: 1; }
.grafico .linha { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.grafico .linha.t1 { stroke-width: 1.6; stroke-dasharray: 6 5; stroke-linecap: butt; opacity: .75; }
.legenda .leg-t1 { color: var(--texto3); }
.legenda .leg-t1 svg { flex: none; }
.g-dica .t1d { opacity: .7; }
.grafico .ponta { stroke: var(--painel); stroke-width: 2; }
.grafico .rotulo { fill: var(--grafite); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.grafico .mira { stroke: var(--texto3); stroke-width: 1; }
.g-dica { position: absolute; z-index: 5; pointer-events: none; background: var(--grafite); color: var(--painel); padding: 8px 11px; border-radius: 10px; font-size: 13px; line-height: 1.4; white-space: nowrap; }
.g-dica i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.vazio-g { min-height: 180px; display: grid; place-items: center; color: var(--texto2); text-align: center; padding: 20px; border: 1px dashed var(--linha); border-radius: 12px; }

.proj-caixa { display: grid; gap: 14px; align-content: start; }
.proj-caixa h2 { margin: 0; }
.proj-aviso { margin: 0; }
.proj { border: 1px solid var(--linha); border-radius: 16px; padding: 14px 16px; background: var(--chassi); position: relative; display: grid; gap: 8px; }
.proj-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.proj h3 { margin: 0; font-size: 15px; line-height: 1.3; }
.ajuda { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--linha); background: var(--painel); color: var(--grafite); font-weight: 800; font-size: 15px; cursor: pointer; display: grid; place-items: center; padding: 0; }
.ajuda:hover, .ajuda[aria-expanded="true"] { border-color: var(--grafite); }
.chances { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.chances div { min-width: 0; }
.chances div:last-child { text-align: right; }
.chances b { display: block; font-size: clamp(28px, 4vw, 40px); font-weight: 800; font-variation-settings: 'wdth' 120; letter-spacing: -.02em; line-height: 1; color: var(--cor); }
.chances span { font-size: 13px; color: var(--texto2); }
.barra-chance { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--vazio); gap: 2px; }
.barra-chance i { display: block; height: 100%; transition: width .9s; }
.proj p { margin: 0; font-size: 14px; color: var(--texto2); }
.proj p b { color: var(--grafite); }
.explica { position: absolute; z-index: 15; top: 52px; right: 10px; left: 10px; background: var(--painel); color: var(--grafite); border: 1px solid var(--grafite); border-radius: 14px; padding: 14px 16px; font-size: 14px; line-height: 1.5; box-shadow: 0 14px 34px rgba(0,0,0,.18); }
.explica p { margin: 0 0 8px; color: var(--grafite); font-size: 14px; }
.explica p:last-child { margin-bottom: 0; }
.explica .nota { color: var(--texto2); font-size: 13px; }
@media (max-width: 900px) { .tend-grade { grid-template-columns: minmax(0, 1fr); } }
.linha .p small { display: block; text-align: right; font-size: 12px; color: var(--texto3); }

/* ---------- por que essas chances ---------- */
.analise { margin-top: 18px; }
.analise h2 { margin: 0; }
.an-sub { margin: 4px 0 16px; }
.an-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.achado { background: var(--chassi); border: 1px solid var(--linha); border-radius: 16px; padding: 14px 16px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.achado.destaque { grid-column: 1 / -1; }
.achado h3 { margin: 0; font-size: 13px; font-weight: 600; color: var(--texto2); }
.achado .grande { font-size: clamp(22px, 2.6vw, 28px); font-weight: 800; font-variation-settings: 'wdth' 115; letter-spacing: -.015em; line-height: 1.1; }
.achado p { margin: 0; font-size: 15px; line-height: 1.5; }
.achado p.nota { font-size: 13px; }
.achado b.a { color: var(--ca); } .achado b.b { color: var(--cb); }
.trilhos { display: grid; gap: 6px; }
.trilho2 { display: grid; grid-template-columns: minmax(84px, auto) minmax(0, 1fr) 52px; gap: 8px; align-items: center; font-size: 13px; color: var(--texto2); }
.trilho2 .t { position: relative; height: 12px; background: var(--painel); border-radius: 3px; border: 1px solid var(--linha); }
.trilho2 .t i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; }
.trilho2 .t .alvo { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--grafite); margin-left: -1px; }
.trilho2 b { color: var(--grafite); text-align: right; font-variant-numeric: tabular-nums; }
.an-legenda { font-size: 12px; color: var(--texto3); display: flex; gap: 6px; align-items: center; }
.an-legenda .alvo-mini { width: 2px; height: 12px; background: var(--grafite); display: inline-block; }

.proj-teste { margin-top: 6px; padding: 8px 10px; border-radius: 10px; background: var(--chassi); }