/* Pátria Amada · Duolingo × Tarsila do Amaral (inspiração, não cópia):
   do Duolingo, o fundo branco, os botões "3D" com sombra sólida, a tipografia arredondada e as animações elásticas;
   da Tarsila, a paleta (verdes profundos, anil, sol, rosa, terracota), as formas redondas e o sombreado
   suave dentro das formas (sol de anéis, morros, cactos). Usabilidade primeiro: as ilustrações ficam só em pontos-chave.
   Tudo respeita prefers-reduced-motion. */
:root {
  /* paleta Tarsila: verde da mata, anil dos morros, sol (do amarelo ao alaranjado), rosa, terracota do telhado, lilás, céu */
  --verde: #3a9a5b;        --verde-sombra: #23703f;   --verde-claro: #eaf6ee;
  --amarelo: #f7c548;      --amarelo-sombra: #d9a21b; --amarelo-texto: #6e4f00;
  --azul: #3b5bb5;         --azul-sombra: #2b4490;    --azul-claro: #eef2fc; --azul-borda: #b3c3ee;
  --marinho: #26386f;      --marinho-sombra: #18254f;
  --sol: #f08c2e;      --sol-sombra: #c86a12;
  --terracota: #d6503c;    --terracota-sombra: #a83a2a;
  --lilas: #9a8fdc;        --lilas-sombra: #7468c0;
  --rosa: #f3b4b1;         --ceu: #a8d2ee;            --ceu-forte: #4a9fd8;  --ceu-sombra: #2f7fb6;
  --texto: #33363a;        --suave: #74777b;          --borda: #e6e6e6;      --trilho: #ececec;
  --alerta: #d6503c;       --alerta-claro: #fdeeeb;
  --ouro: #f7c548;   --ouro-sombra: #d9a21b;
  --prata: #cfd6de;  --prata-sombra: #9eabb8;
  --bronze: #e8955a; --bronze-sombra: #b8682e;
  /* níveis 1 a 5 (uma só cor, intensidade crescente: não é "bom/ruim", é posição) */
  --n1: #c8f0d5; --n2: #8edda9; --n3: #45c177; --n4: #18b04f; --n5: #0b7f37;
  --n1-s: #9fd8b2; --n2-s: #5fbf82; --n3-s: #2f9a5b; --n4-s: #0e8a3b; --n5-s: #075a27;
  --sem: #e5e5e5;
  --raio: 16px;
  --mola: cubic-bezier(.34, 1.56, .64, 1);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: #fff; color: var(--texto);
  font-family: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif; font-weight: 700;
  font-size: 16px; line-height: 1.45;
}
a { color: var(--azul); text-decoration: none; }
button { font: inherit; }
h1, h2, h3 { font-weight: 900; margin: 0; line-height: 1.2; }

/* ---------- Estrutura em 3 colunas (como a referência) ---------- */
.app { display: grid; grid-template-columns: 256px minmax(0, 620px) 360px; gap: 48px; justify-content: center; min-height: 100dvh; }
.lateral {
  position: sticky; top: 0; height: 100dvh; padding: 24px 16px; border-right: 2px solid var(--borda);
  display: flex; flex-direction: column; gap: 8px;
}
.marca { display: flex; align-items: center; gap: 10px; padding: 0 12px 20px; color: var(--verde); font-weight: 900; font-size: 25px; letter-spacing: -.5px; white-space: nowrap; }
.marca-simbolo { width: 38px; height: 38px; flex: none; display: block; }
.nav-item {
  display: flex; align-items: center; gap: 18px; padding: 10px 16px; border-radius: 12px; border: 2px solid transparent;
  color: var(--suave); font-weight: 800; letter-spacing: .8px; text-transform: uppercase; font-size: 15px;
}
.nav-item i { font-size: 30px; }
.nav-item:hover { background: #f7f7f7; }
.nav-item.ativo { background: var(--azul-claro); border-color: var(--azul-borda); color: var(--azul); }
.nav-item .ph-house-line { color: var(--verde); }
/* o mapa tinha cor própria (azul) e o desenho dele é mais vazado: fica na cor dos outros e um pouco maior, sem mexer no texto */
.nav-item .ph-map-trifold { transform: scale(1.12); }
.nav-item .ph-ruler { color: var(--amarelo-sombra); } .nav-item .ph-question { color: var(--suave); }

.centro { padding: 24px 0 120px; min-width: 0; }
.direita { padding: 24px 0; display: flex; flex-direction: column; gap: 20px; }
.direita-fixa { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 20px; }

@media (max-width: 1160px) {
  .app { grid-template-columns: 96px minmax(0, 620px); gap: 32px; }
  .direita { grid-column: 2; padding-top: 0; }
  .direita-fixa { position: static; }
  .marca span:last-child, .nav-item span { display: none; }
  .marca { padding-left: 14px; }
}
@media (max-width: 760px) {
  .app { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 16px; }
  .lateral {
    position: fixed; z-index: 20; inset: auto 0 0 0; height: auto; flex-direction: row; justify-content: space-around;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); border-right: 0; border-top: 2px solid var(--borda); background: #fff;
  }
  .marca { display: none; }
  .nav-item { padding: 8px 14px; } .nav-item i { font-size: 28px; }
  .direita { grid-column: 1; }
  .centro { padding-bottom: 24px; }
  body { padding-bottom: 76px; }
}

/* ---------- Faixa de seção (o banner colorido da referência) ---------- */
.faixa {
  border-radius: var(--raio); padding: 18px 20px; color: #fff; display: flex; align-items: center; gap: 16px;
  background: var(--verde); box-shadow: 0 4px 0 var(--verde-sombra); margin-bottom: 24px;
}
.faixa.azul { background: var(--marinho); box-shadow: 0 4px 0 var(--marinho-sombra); }
.faixa .rotulo-faixa { opacity: .8; text-transform: uppercase; letter-spacing: .8px; font-size: 13px; font-weight: 900; }
.faixa h1 { font-size: 23px; }
.faixa .botao { margin-left: auto; }

/* ---------- Botões 3D com squash & stretch ---------- */
.botao {
  appearance: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 18px; min-height: 46px; border-radius: 14px; white-space: nowrap;
  font-weight: 900; text-transform: uppercase; letter-spacing: .8px; font-size: 14px;
  background: var(--verde); color: #fff; box-shadow: 0 4px 0 var(--verde-sombra);
  transition: transform .12s var(--mola), box-shadow .08s, filter .15s;
}
.botao:hover { filter: brightness(1.06); }
.botao:active { transform: translateY(4px) scale(1.03, .94); box-shadow: 0 0 0 transparent; }
.botao.azul { background: var(--azul); box-shadow: 0 4px 0 var(--azul-sombra); }
.botao.amarelo { background: var(--amarelo); color: var(--amarelo-texto); box-shadow: 0 4px 0 var(--amarelo-sombra); }
.botao.vazado { background: transparent; color: #fff; border: 2px solid rgb(255 255 255 / .55); box-shadow: 0 4px 0 rgb(0 0 0 / .15); }
.botao.branco { background: #fff; color: var(--azul); border: 2px solid var(--borda); box-shadow: 0 4px 0 var(--borda); }
.botao.pequeno { min-height: 38px; padding: 8px 14px; font-size: 13px; border-radius: 12px; }
:focus-visible { outline: 3px solid var(--azul-borda); outline-offset: 3px; }

/* Abas de cargo (com cadeado, como lições bloqueadas) */
.abas-cargo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.aba-cargo {
  border: 2px solid var(--borda); background: #fff; border-radius: 14px; box-shadow: 0 4px 0 var(--borda);
  padding: 10px 6px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--suave); font-weight: 900; font-size: 14px; transition: transform .12s var(--mola);
}
.aba-cargo i { font-size: 26px; }
.aba-cargo:active { transform: translateY(4px) scale(1.03, .94); box-shadow: none; }
.aba-cargo[aria-pressed="true"] { border-color: var(--azul-borda); background: var(--azul-claro); color: var(--azul); box-shadow: 0 4px 0 var(--azul-borda); }
.aba-cargo .cadeado { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: #afafaf; display: flex; align-items: center; gap: 3px; }

.chips { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 10px; scrollbar-width: none; }
.chip {
  flex: none; border: 2px solid var(--borda); background: #fff; color: var(--suave); cursor: pointer;
  font-weight: 900; font-size: 15px; padding: 9px 16px; border-radius: 14px; box-shadow: 0 4px 0 var(--borda);
  transition: transform .12s var(--mola);
}
.chip:active { transform: translateY(4px) scale(1.04, .92); box-shadow: none; }
.chip[aria-pressed="true"] { border-color: var(--azul-borda); background: var(--azul-claro); color: var(--azul); box-shadow: 0 4px 0 var(--azul-borda); }

/* ---------- Cartões (lado direito e conteúdo) ---------- */
.cartao { border: 2px solid var(--borda); border-radius: var(--raio); padding: 20px; background: #fff; }
.cartao h2 { font-size: 20px; margin-bottom: 10px; }
.cartao h3 { font-size: 17px; margin-bottom: 8px; }
.texto-suave { color: var(--suave); font-weight: 700; }
.fonte { font-size: 13px; color: #9a9a9a; margin-top: 12px; font-weight: 700; }
label .rotulo, .rotulo { display: block; font-size: 13px; font-weight: 900; color: var(--suave); text-transform: uppercase; letter-spacing: .6px; margin: 10px 0 6px; }
.busca { position: relative; display: block; margin: 0 0 16px; }
.busca > i { position: absolute; left: 16px; top: calc(50% - 2px); transform: translateY(-50%); font-size: 24px; color: var(--azul); pointer-events: none; }
.busca input {
  width: 100%; font: inherit; font-weight: 800; font-size: 17px; color: var(--texto); background: #fff;
  border: 2px solid var(--borda); border-radius: 16px; padding: 13px 16px 13px 50px; min-height: 56px;
  box-shadow: 0 4px 0 var(--borda); transition: border-color .15s, box-shadow .15s;
}
.busca input::placeholder { color: #afafaf; font-weight: 700; }
.busca input:focus { border-color: var(--azul-borda); box-shadow: 0 4px 0 var(--azul-borda); outline: none; }
select {
  width: 100%; font: inherit; font-weight: 900; font-size: 15px; color: var(--texto); cursor: pointer;
  appearance: none; -webkit-appearance: none; background: #fff no-repeat right 14px center / 18px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80a8 8 0 0 1 11.32-11.32L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32Z' fill='%231c6dd0'/%3E%3C/svg%3E");
  border: 2px solid var(--borda); border-radius: 14px; padding: 11px 40px 11px 14px; min-height: 48px; box-shadow: 0 4px 0 var(--borda);
}
select:focus { border-color: var(--azul-borda); box-shadow: 0 4px 0 var(--azul-borda); outline: none; }
.chips.pequenos { flex-wrap: wrap; overflow: visible; padding-bottom: 4px; }
.chips.pequenos .chip { font-size: 14px; padding: 7px 13px; border-radius: 12px; }
.divisor { display: flex; align-items: center; gap: 16px; color: #afafaf; font-weight: 800; margin: 28px 0 18px; font-size: 18px; }
.divisor::before, .divisor::after { content: ""; flex: 1; height: 2px; background: var(--borda); }

/* ---------- Pódio (top 3) ---------- */
.podio { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 10px; margin: 8px 0 8px; }
.degrau { text-align: center; color: inherit; display: block; }
.degrau .quem { font-weight: 900; font-size: 15px; line-height: 1.2; margin: 8px 0 2px; overflow-wrap: anywhere; }
.degrau .prefeito { color: var(--suave); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; }
.degrau .bloco {
  margin-top: 10px; border-radius: 14px 14px 6px 6px; display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 28px;
  transform-origin: bottom;
}
.degrau.p1 .bloco { height: 132px; background: var(--ouro); box-shadow: inset 0 -8px 0 var(--ouro-sombra); color: #7a5300; }
.degrau.p2 .bloco { height: 100px; background: var(--prata); box-shadow: inset 0 -8px 0 var(--prata-sombra); color: #4d5b68; }
.degrau.p3 .bloco { height: 78px;  background: var(--bronze); box-shadow: inset 0 -8px 0 var(--bronze-sombra); color: #6b3510; }
.medalha { width: 64px; height: 64px; margin: 0 auto; position: relative; display: grid; place-items: center; }
.degrau.p1 .medalha { width: 78px; height: 78px; }
.medalha .fita { position: absolute; top: -6px; width: 34%; height: 46%; border-radius: 3px; }
.medalha .fita.e { left: 18%; transform: skewX(14deg); background: var(--azul); }
.medalha .fita.d { right: 18%; transform: skewX(-14deg); background: var(--verde); }
.medalha .disco {
  position: relative; width: 82%; height: 82%; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  font-weight: 900; font-size: 22px; margin-top: 14%;
}
.medalha.ouro .disco { background: var(--ouro); box-shadow: inset 0 -5px 0 var(--ouro-sombra), 0 0 0 4px #fff3c4; color: #7a5300; }
.medalha.prata .disco { background: var(--prata); box-shadow: inset 0 -5px 0 var(--prata-sombra), 0 0 0 4px #eef2f6; color: #4d5b68; }
.medalha.bronze .disco { background: var(--bronze); box-shadow: inset 0 -5px 0 var(--bronze-sombra), 0 0 0 4px #fde3d0; color: #6b3510; }
.medalha .disco::after { /* brilho que passa uma vez */
  content: ""; position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 40%, rgb(255 255 255 / .75) 50%, transparent 60%);
  transform: translateX(-120%);
}

/* ---------- Top 4-10 e lista ---------- */
.top10 { display: flex; flex-direction: column; gap: 12px; }
.linha-rank {
  display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 14px; padding: 14px 16px;
  border: 2px solid var(--borda); border-radius: var(--raio); box-shadow: 0 4px 0 var(--borda); color: inherit; background: #fff;
  transition: transform .14s var(--mola);
}
.linha-rank:hover { transform: translateY(-2px); }
.linha-rank:active { transform: translateY(4px) scale(1.01, .96); box-shadow: none; }
.linha-rank.destaque { border-color: #ffe27a; box-shadow: 0 4px 0 #ffe27a; background: #fffbea; }
.posicao { font-weight: 900; font-size: 20px; color: var(--suave); text-align: center; }
.linha-rank.destaque .posicao { color: var(--amarelo-texto); }
.linha-rank .nome { font-weight: 900; font-size: 17px; }
.linha-rank .sub { color: var(--suave); font-size: 13px; font-weight: 800; }
.lista-compacta .linha-rank { box-shadow: none; padding: 10px 14px; }
.selo { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 900; padding: 2px 9px; border-radius: 999px; background: #f2f2f2; color: var(--suave); margin: 4px 4px 0 0; }
.selo.alerta { background: var(--alerta-claro); color: var(--alerta); }
.selo.azul { background: var(--azul-claro); color: var(--azul); }

/* ---------- Nível (substitui a nota numérica) ---------- */
.nivel { display: flex; align-items: center; gap: 10px; }
.no {
  width: 56px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 24px; flex: none;
  background: var(--n3); box-shadow: 0 6px 0 var(--n3-s);
}
.no.grande { width: 96px; height: 88px; font-size: 42px; box-shadow: 0 8px 0 var(--n3-s); }
.no.n1 { background: var(--n1); box-shadow: 0 6px 0 var(--n1-s); color: #0b5e2a; }
.no.n2 { background: var(--n2); box-shadow: 0 6px 0 var(--n2-s); color: #0b5e2a; }
.no.n3 { background: var(--n3); box-shadow: 0 6px 0 var(--n3-s); }
.no.n4 { background: var(--n4); box-shadow: 0 6px 0 var(--n4-s); }
.no.n5 { background: var(--n5); box-shadow: 0 6px 0 var(--n5-s); }
.no.grande.n1, .no.grande.n2, .no.grande.n3, .no.grande.n4, .no.grande.n5 { box-shadow: 0 8px 0 var(--sombra-no, rgb(0 0 0 / .18)); }
.no.sem { background: var(--sem); box-shadow: 0 6px 0 #c9c9c9; color: #afafaf; }
.estrelas { display: flex; gap: 2px; color: #e5e5e5; font-size: 16px; }
.estrelas .cheia { color: var(--amarelo); }
.rotulo-nivel { font-weight: 900; font-size: 13px; color: var(--suave); text-transform: uppercase; letter-spacing: .5px; }

/* ---------- Gráficos ---------- */
.barras { display: flex; flex-direction: column; gap: 12px; }
.barra-linha .topo { display: flex; justify-content: space-between; font-weight: 900; font-size: 14px; margin-bottom: 5px; }
.trilho { height: 18px; border-radius: 999px; background: var(--trilho); overflow: hidden; }
.preenche {
  height: 100%; border-radius: 999px; background: var(--amarelo); box-shadow: inset 0 -5px 0 rgb(0 0 0 / .1); transform-origin: left;
}
.preenche.verde { background: var(--verde); } .preenche.azul { background: var(--azul); } .preenche.cinza { background: #c7c7c7; }
.comparacao { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-items: end; height: 170px; margin: 12px 0 4px; }
.coluna { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; }
.coluna .valor { font-weight: 900; font-size: 18px; }
.coluna .haste { width: 70%; max-width: 84px; border-radius: 12px 12px 4px 4px; transform-origin: bottom; }
.coluna .legenda { font-size: 12px; color: var(--suave); font-weight: 900; text-align: center; text-transform: uppercase; letter-spacing: .3px; line-height: 1.2; min-height: 30px; }
.haste.antes { background: #c7d1db; box-shadow: inset 0 -6px 0 #a8b5c2; }
.haste.depois { background: var(--azul); box-shadow: inset 0 -6px 0 var(--azul-sombra); }
.haste.grupo { background: var(--amarelo); box-shadow: inset 0 -6px 0 var(--amarelo-sombra); }
.rosca { width: 132px; height: 132px; flex: none; }
.rosca circle { fill: none; stroke-width: 18; }
.legenda-rosca { display: flex; flex-direction: column; gap: 8px; font-weight: 800; }
.legenda-rosca span::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 8px; background: var(--c); vertical-align: -1px; }

/* ---------- Trilha de mandatos (ficha) ---------- */
.trilha { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 10px 0 8px; }
.trilha .passo { display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; background: none; border: 0; color: inherit; }
.trilha .passo:nth-child(2) { margin-left: 120px; } .trilha .passo:nth-child(3) { margin-left: 0; margin-right: 120px; }
.trilha .passo .no { width: 72px; height: 64px; font-size: 30px; transition: transform .14s var(--mola); }
.trilha .passo:active .no { transform: translateY(6px) scale(1.06, .9); box-shadow: none; }
.trilha .passo .ano { font-weight: 900; color: var(--suave); }
.trilha .passo[aria-pressed="true"] .no { outline: 6px solid var(--azul-claro); outline-offset: 4px; }
.balao {
  position: relative; border: 2px solid var(--borda); border-radius: 12px; padding: 6px 12px; font-weight: 900; color: var(--azul);
  text-transform: uppercase; letter-spacing: .6px; font-size: 13px; background: #fff;
}
.balao::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 12px; height: 12px; background: #fff; border: solid var(--borda); border-width: 0 2px 2px 0; transform: translateX(-50%) rotate(45deg); }

/* ---------- Mapa ---------- */
.mapa-caixa { position: relative; padding: 4px 0; }
.mapa-caixa svg { width: 100%; height: auto; display: block; }
.mapa-caixa path { fill: #e5e5e5; stroke: #fff; stroke-width: .5; stroke-linejoin: round; cursor: pointer; transition: filter .15s, transform .2s var(--mola); transform-box: fill-box; transform-origin: center; }
.mapa-caixa path:hover { filter: brightness(1.08) saturate(1.15); }
.mapa-caixa path.realce { stroke: var(--texto); stroke-width: 2.2; transform: translateY(-3px); filter: drop-shadow(0 3px 0 rgb(0 0 0 / .18)); }
.dica {
  position: absolute; pointer-events: none; background: #fff; border: 2px solid var(--borda); border-radius: 12px; padding: 8px 12px;
  box-shadow: 0 4px 0 var(--borda); font-weight: 900; font-size: 14px; white-space: nowrap; transform: translate(-50%, calc(-100% - 12px)); display: none;
}
.legenda-mapa { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; font-weight: 900; font-size: 13px; color: var(--suave); text-transform: uppercase; letter-spacing: .5px; }
.legenda-mapa .escala { display: flex; gap: 3px; }
.legenda-mapa .escala i { width: 34px; height: 12px; border-radius: 999px; display: block; }
.legenda-mapa .sem-dado { display: flex; align-items: center; gap: 6px; margin-left: 10px; }
.legenda-mapa .sem-dado i { width: 12px; height: 12px; border-radius: 50%; background: var(--sem); display: block; }

/* ---------- Avisos e vazios ---------- */
.nao-informado { border: 2px dashed var(--alerta); background: var(--alerta-claro); color: var(--alerta); border-radius: 12px; padding: 12px 14px; font-weight: 900; }
.vazio { text-align: center; color: var(--suave); padding: 36px 12px; }
.vazio i { font-size: 56px; color: #d0d0d0; display: block; margin-bottom: 8px; }
.esqueleto { background: linear-gradient(90deg, #f2f2f2 25%, #e8e8e8 37%, #f2f2f2 63%); background-size: 400% 100%; border-radius: var(--raio); height: 76px; margin-bottom: 12px; animation: brilho 1.3s ease infinite; }
.rodape-links { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; color: #afafaf; font-size: 13px; text-transform: uppercase; letter-spacing: .6px; font-weight: 900; }
.rodape-links a { color: #afafaf; }

/* Texto longo (metodologia) */
.texto { font-weight: 600; }
.texto h1 { font-size: 26px; margin: 0 0 12px; } .texto h2 { font-size: 20px; margin: 26px 0 8px; }
.texto table { width: 100%; border-collapse: collapse; font-size: 14px; display: block; overflow-x: auto; }
.texto th, .texto td { border-bottom: 2px solid var(--borda); padding: 8px; text-align: left; vertical-align: top; }
.texto blockquote { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--azul-claro); color: var(--azul); font-weight: 800; }

/* ---------- Animação: squash & stretch ---------- */
@keyframes brilho { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: no-preference) {
  /* Entrada: o elemento chega, estica, achata e assenta */
  .anima { opacity: 0; }
  .anima.visivel { animation: pula .62s var(--atraso, 0s) both; }
  @keyframes pula {
    0%   { opacity: 0; transform: translateY(24px) scale(.9, 1.08); }
    55%  { opacity: 1; transform: translateY(-4px) scale(1.03, .96); }
    75%  { transform: translateY(1px) scale(.99, 1.02); }
    100% { opacity: 1; transform: none; }
  }
  /* Barras horizontais crescem e passam um pouco do ponto */
  .visivel .preenche { animation: estica-x .9s calc(var(--atraso, 0s) + .15s) both; }
  @keyframes estica-x {
    0% { transform: scaleX(0); } 65% { transform: scaleX(1.06) scaleY(.82); }
    82% { transform: scaleX(.98) scaleY(1.06); } 100% { transform: none; }
  }
  /* Colunas e degraus do pódio sobem com mola */
  .visivel .haste, .visivel .bloco { animation: estica-y .85s calc(var(--atraso, 0s) + .1s) both; }
  @keyframes estica-y {
    0% { transform: scaleY(0) scaleX(1.1); } 60% { transform: scaleY(1.08) scaleX(.94); }
    80% { transform: scaleY(.97) scaleX(1.03); } 100% { transform: none; }
  }
  /* Nós e medalhas "quicam" */
  .visivel .no, .visivel .medalha { animation: quica .7s calc(var(--atraso, 0s) + .2s) both; }
  @keyframes quica {
    0% { transform: scale(0); } 45% { transform: scale(1.15, .85); } 65% { transform: scale(.92, 1.08); }
    82% { transform: scale(1.03, .97); } 100% { transform: none; }
  }
  .visivel .medalha .disco::after { animation: reluz 1.2s calc(var(--atraso, 0s) + .9s) ease-out both; }
  @keyframes reluz { to { transform: translateX(120%); } }
  .visivel .rosca .arco { animation: desenha 1.1s calc(var(--atraso, 0s) + .2s) cubic-bezier(.22, 1, .36, 1) both; }
  @keyframes desenha { from { stroke-dasharray: 0 999; } }
  .visivel .estrelas .cheia { animation: quica .5s calc(var(--atraso, 0s) + .5s + var(--i, 0) * .08s) both; display: inline-block; }
  .mapa-caixa.visivel path { animation: surge .5s calc(var(--d, 0) * 1ms) both; }
  @keyframes surge { from { opacity: 0; transform: scale(.6); } }
}

/* ---------- Fotos oficiais (TSE) ---------- */
.foto { width: 128px; height: 128px; border-radius: 50%; object-fit: cover; object-position: center 22%; border: 5px solid #fff;
  box-shadow: 0 0 0 4px var(--anel, var(--borda)), 0 7px 0 4px var(--anel-s, #d0d0d0); background: #f2f2f2; }
.foto-vazia { display: grid; place-items: center; color: #cfcfcf; font-size: 40px; }
.avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; object-position: center 22%; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--anel, var(--borda)); background: #f2f2f2; flex: none; }
.avatar.vazio-av { display: grid; place-items: center; color: #cfcfcf; font-size: 22px; }
.degrau .retrato { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; margin: 0 auto -18px; display: block; border: 4px solid #fff; box-shadow: 0 0 0 3px var(--borda); position: relative; z-index: 1; background: #f2f2f2; }
.degrau.p1 .retrato { width: 88px; height: 88px; box-shadow: 0 0 0 3px var(--ouro); }
.degrau.p2 .retrato { box-shadow: 0 0 0 3px var(--prata); }
.degrau.p3 .retrato { box-shadow: 0 0 0 3px var(--bronze); }
.linha-rank.com-foto { grid-template-columns: 44px 44px 1fr auto; }

/* ---------- Pontos (sem teto, podem ser negativos) ---------- */
:root {
  /* faixas de pontos (0.3: negativos em vermelho, pedido do sócio) */
  --f-bem-acima: #1f6b45; --f-bem-acima-s: #134a2f;
  --f-acima: #4caf6e;     --f-acima-s: #348c52;
  --f-parecido: #f7c548;  --f-parecido-s: #d9a21b;
  --f-abaixo: #ec5a4a;    --f-abaixo-s: #c23f31;
  --f-bem-abaixo: #b92a24; --f-bem-abaixo-s: #861b17;
}
.pontos {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 76px; padding: 6px 10px;
  border-radius: 14px; color: #fff; font-weight: 900; font-size: 22px; line-height: 1; background: var(--c); box-shadow: 0 4px 0 var(--s);
}
.pontos small { font-size: 10px; letter-spacing: .6px; text-transform: uppercase; margin-top: 3px; opacity: .9; }
.pontos.parecido { color: #5c4500; }
.pontos.sem { background: #e5e5e5; box-shadow: 0 4px 0 #c9c9c9; color: #9a9a9a; font-size: 13px; }
.pontos.grande { font-size: 44px; min-width: 150px; padding: 12px 18px; border-radius: 20px; box-shadow: 0 6px 0 var(--s); }
.pontos.grande small { font-size: 12px; }

/* termômetro: 0 no meio, esquerda = abaixo das parecidas, direita = acima */
.termometro { position: relative; height: 22px; border-radius: 999px; margin: 14px 4px 6px;
  background: linear-gradient(90deg, var(--f-bem-abaixo) 0 20%, var(--f-abaixo) 20% 40%, var(--f-parecido) 40% 60%, var(--f-acima) 60% 80%, var(--f-bem-acima) 80%); }
.termometro::before { content: ""; position: absolute; left: 50%; top: -5px; bottom: -5px; width: 3px; border-radius: 2px; background: #3c3c3c; opacity: .35; transform: translateX(-50%); }
.termometro .marcador { position: absolute; top: 50%; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 5px solid #3c3c3c;
  transform: translate(-50%, -50%); box-shadow: 0 3px 0 rgb(0 0 0 / .2); }
.termometro-legenda { display: flex; justify-content: space-between; font-size: 12px; font-weight: 900; color: var(--suave); text-transform: uppercase; letter-spacing: .3px; }

/* Coração (saúde da cidade) */
.coracao { position: relative; width: 150px; height: 140px; margin: 0 auto; display: grid; place-items: center; }
.coracao i { font-size: 150px; color: var(--terracota); line-height: 1; }
.coracao .coracao-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.coracao .valor-coracao { position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: 14px; color: #fff; font-weight: 900; font-size: 34px; text-shadow: 0 2px 0 rgb(0 0 0 / .15); }
.coracao.sem i { color: #e5e5e5; }

/* Áreas (5 blocos clicáveis) */
.areas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 18px; }
.area {
  border: 2px solid var(--borda); border-radius: var(--raio); box-shadow: 0 4px 0 var(--borda); background: #fff; padding: 14px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: var(--texto); transition: transform .14s var(--mola);
}
.area:first-child { grid-column: 1 / -1; flex-direction: row; text-align: left; gap: 14px; }
.area:active { transform: translateY(4px) scale(1.02, .95); box-shadow: none; }
.area .icone { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 30px; color: #fff; flex: none; }
.area .nome-area { font-weight: 900; font-size: 16px; }
.area .sub-area { font-size: 12px; color: var(--suave); font-weight: 800; text-transform: uppercase; letter-spacing: .4px; }
.area.bloqueada { background: #fafafa; }
.area.bloqueada .icone { filter: grayscale(1); opacity: .45; }
.area[aria-expanded="true"] { border-color: var(--azul-borda); box-shadow: 0 4px 0 var(--azul-borda); background: var(--azul-claro); }
.detalhe-area { margin-top: 16px; }
.componente { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 14px 0; border-top: 2px solid var(--borda); }
.componente:first-child { border-top: 0; }
.componente .nome { font-weight: 900; }
.componente .explica { color: var(--suave); font-size: 14px; font-weight: 700; }
.componente.bloqueado { opacity: .55; }

@media (prefers-reduced-motion: no-preference) {
  .coracao i, .coracao .coracao-svg { animation: bate 1.6s ease-in-out infinite; transform-origin: center 60%; }
  @keyframes bate { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.1, .94); } 22% { transform: scale(.97, 1.04); } 34% { transform: scale(1.06, .97); } 48% { transform: scale(1); } }
  .coracao.sem i, .coracao.sem .coracao-svg { animation: none; }
  .visivel .termometro .marcador { animation: desliza 1.1s calc(var(--atraso, 0s) + .25s) var(--mola) both; }
  @keyframes desliza { from { left: 50%; transform: translate(-50%, -50%) scale(.4); } }
  .visivel .pontos { animation: quica .7s calc(var(--atraso, 0s) + .15s) both; }
  .detalhe-area { animation: pula .5s both; }
}

/* ---------- Barra de pontos (0 no meio: direita = acima das parecidas, esquerda = abaixo) ---------- */
.barra-pontos { position: relative; height: 14px; border-radius: 999px; background: var(--trilho); margin: 8px 0 2px; }
.barra-pontos::before { content: ""; position: absolute; left: 50%; top: -4px; bottom: -4px; width: 3px; border-radius: 2px; background: #cfcfcf; transform: translateX(-50%); }
.barra-pontos .enche { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: var(--c); transform-origin: left; }
.barra-pontos .enche.neg { transform-origin: right; }
.barra-pontos .enche::after { content: ""; position: absolute; left: 6px; right: 6px; top: 3px; height: 4px; border-radius: 999px; background: rgb(255 255 255 / .35); }
.linha-rank .meio { min-width: 0; }

/* ---------- Cabeçalho de seção com ícone redondo ---------- */
.cabeca { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.cabeca h2 { margin: 0; }
.icone-redondo { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; color: #fff; flex: none; background: var(--c, var(--azul)); box-shadow: 0 4px 0 var(--s, var(--azul-sombra)); }

/* ---------- Câmara de vereadores (sem pontos: só quem foi eleito) ---------- */
.camara { display: block; width: 100%; max-width: 420px; margin: 4px auto 6px; }
.camara circle { fill: var(--azul); }
.camara circle.borda { fill: var(--azul-sombra); }
.vereadores { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-top: 12px; }
.vereador { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 2px solid var(--borda); border-radius: 14px; min-width: 0; }
.vereador .ini { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #fff; font-weight: 900; font-size: 14px; background: var(--c); }
.vereador .nome-v { font-weight: 900; font-size: 14px; line-height: 1.2; overflow-wrap: anywhere; }
.vereador .partido-v { font-size: 12px; color: var(--suave); font-weight: 800; }
.resumo-camara { text-align: center; font-weight: 900; font-size: 18px; }
.resumo-camara .grande { font-size: 40px; color: var(--azul); line-height: 1; display: block; }
summary.abre { font-weight: 900; cursor: pointer; color: var(--azul); list-style: none; display: inline-flex; align-items: center; gap: 6px; text-transform: uppercase; letter-spacing: .6px; font-size: 14px; margin-top: 8px; }
summary.abre::-webkit-details-marker { display: none; }
summary.abre::after { content: "›"; font-size: 20px; transition: transform .2s; }
details[open] > summary.abre::after { transform: rotate(90deg); }

/* Lista de cidades (aba vereadores) */
.cidade-opcao { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: #fff; cursor: pointer; color: inherit;
  border: 2px solid var(--borda); border-radius: var(--raio); box-shadow: 0 4px 0 var(--borda); padding: 12px 16px; font-weight: 900; font-size: 17px; transition: transform .14s var(--mola); }
.cidade-opcao:active { transform: translateY(4px) scale(1.01, .96); box-shadow: none; }
.cidade-opcao i { color: var(--azul); font-size: 22px; }

@media (prefers-reduced-motion: no-preference) {
  .visivel .barra-pontos .enche { animation: estica-x .9s calc(var(--atraso, 0s) + .2s) both; }
  .visivel .camara circle { animation: quica .45s calc(var(--atraso, 0s) + .15s + var(--i, 0) * 18ms) both; transform-box: fill-box; transform-origin: center; }
  .visivel .icone-redondo { animation: quica .6s calc(var(--atraso, 0s) + .1s) both; }
}

/* ---------- Ajustes de celular ---------- */
@media (max-width: 760px) {
  .faixa { padding: 16px; }
  .faixa h1 { font-size: 20px; }
  .faixa .rotulo-faixa { font-size: 11px; }
  .podio .degrau .quem { font-size: 14px; }
  .linha-rank { grid-template-columns: 34px 1fr auto; gap: 10px; padding: 12px; }
  .linha-rank.com-foto { grid-template-columns: 30px 42px 1fr auto; }
  .linha-rank .nome { font-size: 16px; }
  .pontos { min-width: 64px; font-size: 19px; }
  .vereadores { grid-template-columns: 1fr 1fr; }
  .foto { width: 112px; height: 112px; }
}

/* ---------- Ranking: áreas, busca + filtros, avisos, mini mapa ---------- */
.areas-chips { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 10px; margin-bottom: 6px; scrollbar-width: none; }
.areas-chips::-webkit-scrollbar, .chips::-webkit-scrollbar { display: none; }
.area-chip {
  flex: none; display: flex; align-items: center; gap: 8px; padding: 7px 14px 7px 7px; cursor: pointer;
  border: 2px solid var(--borda); border-radius: 16px; background: #fff; box-shadow: 0 4px 0 var(--borda);
  font-weight: 900; font-size: 15px; color: var(--texto); transition: transform .12s var(--mola);
}
.area-chip .ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 19px; background: var(--c); }
.area-chip.bloq { color: #9a9a9a; }
.area-chip.bloq .ic { background: #d8d8d8; }
.area-chip .cadeado-chip { color: #c7c7c7; font-size: 15px; }
.area-chip:active { transform: translateY(4px) scale(1.03, .94); box-shadow: none; }
.area-chip[aria-pressed="true"] { border-color: var(--c); box-shadow: 0 4px 0 var(--c); color: var(--texto); background: #fff; }
.area-chip.bloq[aria-pressed="true"] .ic { background: var(--c); }
#sub-educacao { margin: -2px 0 8px; }

.linha-busca { display: flex; gap: 10px; align-items: stretch; margin-bottom: 12px; }
.linha-busca .busca { flex: 1; margin: 0; }
.botao-filtro { min-height: 56px; border-radius: 16px; position: relative; color: var(--azul); }
.botao-filtro i { font-size: 22px; }
.botao-filtro[aria-expanded="true"] { border-color: var(--azul-borda); box-shadow: 0 4px 0 var(--azul-borda); background: var(--azul-claro); }
.conta-filtros { position: absolute; top: -8px; right: -8px; min-width: 22px; height: 22px; border-radius: 999px; background: var(--alerta); color: #fff; font-size: 12px; display: grid; place-items: center; padding: 0 6px; }
.conta-filtros[hidden] { display: none; }
.painel-filtros { border: 2px solid var(--borda); border-radius: var(--raio); padding: 16px; margin: 0 0 14px; background: #fff; }
.painel-filtros[hidden] { display: none; }
.aviso-area { display: flex; gap: 10px; align-items: flex-start; background: var(--azul-claro); color: var(--azul); border-radius: 14px; padding: 12px 14px; font-weight: 800; font-size: 14px; margin: 4px 0 14px; }
.aviso-area i { font-size: 20px; flex: none; margin-top: 1px; }

.mini-mapa { display: block; color: inherit; transition: transform .14s var(--mola); }
.mini-mapa:hover { transform: translateY(-2px); }
.mini-mapa svg { width: 100%; height: auto; display: block; }
.mini-mapa path { fill: var(--sem); stroke: #fff; stroke-width: .5; transition: fill .4s; }

@media (max-width: 760px) {
  .some-celular { display: none; }
  .botao-filtro { padding: 0 16px; }
  .area-chip { font-size: 14px; }
}

/* ---------- Cargos do estado ---------- */
.abas-cargo { grid-template-columns: repeat(4, 1fr); }
.governadores { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 16px; }
.pessoas .avatar { width: 42px; height: 42px; }
@media (max-width: 760px) {
  .abas-cargo { gap: 6px; }
  .aba-cargo { font-size: 12px; padding: 8px 2px; }
  .aba-cargo i { font-size: 22px; }
  .aba-cargo .cadeado { font-size: 9px; letter-spacing: .3px; }
  .governadores { grid-template-columns: 1fr; }
}


/* ================= Toques da Tarsila (v9) ================= */
/* Faixa: cor chapada do Duolingo + paisagem translúcida (sol de anéis, morros, cacto, casinha) no canto */
.faixa { position: relative; overflow: hidden; min-height: 88px; }
.faixa > div:first-child { position: relative; z-index: 1; max-width: 70%; }
.faixa .botao { position: relative; z-index: 1; }
.faixa-arte { position: absolute; right: 0; bottom: 0; width: 260px; height: 100%; pointer-events: none; }
.faixa-arte svg { width: 100%; height: 100%; display: block; }
.faixa:has(.botao) .faixa-arte { right: 120px; width: 200px; }

/* menu lateral: pequena paisagem no pé (só no computador) */
.lateral { overflow: hidden; }
.lateral-arte { margin-top: auto; padding: 0 4px; opacity: .95; }
.lateral-arte svg { width: 100%; height: auto; display: block; }

/* volume suave nas formas (o sombreado das pinturas) */
.icone-redondo, .area .icone, .area-chip .ic { background-image: radial-gradient(circle at 32% 28%, rgb(255 255 255 / .38), rgb(255 255 255 / 0) 62%); }
.degrau .bloco { background-image: linear-gradient(180deg, rgb(255 255 255 / .35), rgb(255 255 255 / 0) 55%); border-radius: 40px 40px 8px 8px / 26px 26px 8px 8px; }
.medalha .disco { background-image: radial-gradient(circle at 34% 30%, rgb(255 255 255 / .55), rgb(255 255 255 / 0) 60%); }
.pontos { background-image: linear-gradient(180deg, rgb(255 255 255 / .18), rgb(255 255 255 / 0)); }
.barra-pontos .enche { background-image: linear-gradient(180deg, rgb(255 255 255 / .22), rgb(255 255 255 / 0)); }
.medalha .fita.e { background: var(--azul); } .medalha .fita.d { background: var(--verde); }

/* Janela da pessoa (vereador, deputado) */
.janela { border: 0; padding: 0; border-radius: 24px; width: min(440px, calc(100vw - 24px)); max-height: calc(100dvh - 40px); box-shadow: 0 8px 0 rgb(0 0 0 / .08), 0 20px 60px rgb(0 0 0 / .18); }
.janela::backdrop { background: rgb(38 56 111 / .35); }
.janela-corpo { padding: 28px 22px 20px; }
.janela .fechar { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--borda); background: #fff; cursor: pointer; display: grid; place-items: center; font-size: 18px; color: var(--suave); z-index: 2; }
.ini-grande { width: 96px; height: 96px; font-size: 34px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 900; background: var(--c);
  background-image: radial-gradient(circle at 32% 28%, rgb(255 255 255 / .35), rgb(255 255 255 / 0) 62%); box-shadow: 0 6px 0 rgb(0 0 0 / .15); }
.linha-eleicoes { display: flex; justify-content: center; gap: 10px; margin-top: 14px; }
.linha-eleicoes span { display: flex; align-items: center; gap: 4px; font-weight: 900; font-size: 14px; color: #b5b5b5; padding: 6px 10px; border-radius: 999px; background: #f4f4f4; }
.linha-eleicoes span.sim { color: var(--verde-sombra); background: var(--verde-claro); }
.cartao-pontos-breve { border: 2px dashed var(--lilas); border-radius: 18px; padding: 14px; margin-top: 16px; background: #f7f5ff; }
@media (max-width: 760px) {
  .janela { margin: auto auto 0; border-radius: 24px 24px 0 0; width: 100vw; max-width: 100vw; }
}

/* Botões de pessoa (lista de vereadores e deputados) */
button.vereador { width: 100%; text-align: left; background: #fff; cursor: pointer; font: inherit; color: inherit; box-shadow: 0 3px 0 var(--borda); transition: transform .12s var(--mola); }
button.vereador:hover { border-color: var(--azul-borda); }
button.vereador:active { transform: translateY(3px) scale(1.01, .96); box-shadow: none; }
button.vereador .meio { display: flex; flex-direction: column; min-width: 0; flex: 1; }
button.vereador .seta { color: #c4c4c4; }
.vereador .ini { background-image: radial-gradient(circle at 32% 28%, rgb(255 255 255 / .35), rgb(255 255 255 / 0) 62%); }

/* Estados vazios e áreas bloqueadas ganham uma paisagem pequena */
.arte-vazio { width: 200px; max-width: 70%; margin: 0 auto 10px; display: block; }
.arte-vazio svg { width: 100%; height: auto; display: block; }

@media (prefers-reduced-motion: no-preference) {
  .faixa-arte .sol, .lateral-arte .sol { animation: gira-sol 1.2s var(--mola) both; transform-origin: 150px 52px; transform-box: view-box; }
  @keyframes gira-sol { from { transform: scale(.4); opacity: 0; } }
  .cacto { animation: balanca 4s ease-in-out infinite; transform-box: fill-box; }
  @keyframes balanca { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(2.5deg) scaleY(1.02); } }
}
@media (max-width: 1160px) { .lateral-arte { display: none; } }
@media (max-width: 760px) {
  .faixa > div:first-child { max-width: 64%; }
  .faixa-arte { width: 170px; opacity: .9; }
  .faixa:has(.botao) .faixa-arte { right: 96px; width: 120px; }
}

/* Atuação de legisladores (v10) */
.atuacao { border: 2px solid var(--borda); border-radius: 18px; padding: 14px; margin-top: 16px; }
.atuacao-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.preenche.vermelho { background: var(--f-abaixo); }
.lista-leis { margin: 8px 0 0; padding-left: 18px; font-size: 14px; font-weight: 700; display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow: auto; }
.lista-leis.suave { color: var(--suave); }
.alerta-gasto { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 12px; border-radius: 14px; background: var(--alerta-claro); color: #8a2c1f; font-size: 14px; font-weight: 700; }
.alerta-gasto i { font-size: 22px; color: var(--alerta); flex: none; }
.fonte-alerta { margin-top: 8px; font-size: 12px; font-weight: 700; color: #8a5a52; }
.fonte-alerta a { color: var(--azul); text-decoration: underline; }
button.linha-rank { width: 100%; text-align: left; font: inherit; cursor: pointer; }


/* ================= v13 · mais Tarsila, menos Duolingo (pedido do sócio) ================= */
/* Botões: forma de pílula, volume suave dentro da forma (luz no alto à esquerda), sombra curta e macia */
.botao { border-radius: 999px; padding: 12px 22px;
  background-image: radial-gradient(120% 140% at 28% 18%, rgb(255 255 255 / .34), rgb(255 255 255 / 0) 55%);
  box-shadow: 0 3px 0 var(--verde-sombra), 0 8px 16px -6px rgb(35 112 63 / .45); }
.botao.azul { box-shadow: 0 3px 0 var(--azul-sombra), 0 8px 16px -6px rgb(43 68 144 / .45); }
.botao.amarelo { box-shadow: 0 3px 0 var(--amarelo-sombra), 0 8px 16px -6px rgb(217 162 27 / .5); }
.botao.branco { background-image: none; box-shadow: 0 3px 0 var(--borda), 0 8px 16px -8px rgb(0 0 0 / .12); }
.botao.vazado { background-image: none; box-shadow: none; }
.botao:active { transform: translateY(3px) scale(1.03, .95); box-shadow: 0 0 0 transparent; }
.chip, .area-chip, .aba-cargo, .botao-filtro { border-radius: 999px; }
.aba-cargo { border-radius: 22px; }
.chip[aria-pressed="true"], .aba-cargo[aria-pressed="true"] {
  background-image: radial-gradient(120% 140% at 28% 18%, rgb(255 255 255 / .7), rgb(255 255 255 / 0) 60%); }

/* Pódio: três morros de alturas diferentes, sol de anéis no lugar da medalha */
.degrau .bloco { position: relative; background: none !important; box-shadow: none !important; border-radius: 0; overflow: visible; display: block; }
.degrau .bloco .morro { position: absolute; inset: 0; width: 100%; height: 100%; display: block; filter: drop-shadow(0 6px 8px rgb(38 56 111 / .12)); }
.degrau .bloco .lugar { position: absolute; left: 0; right: 0; bottom: 18%; text-align: center; color: #fff; font-weight: 900; font-size: 26px; text-shadow: 0 2px 0 rgb(0 0 0 / .15); }
.degrau.p1 .bloco { height: 140px; } .degrau.p2 .bloco { height: 104px; } .degrau.p3 .bloco { height: 84px; }
.sol-medalha { width: 60px; height: 60px; position: relative; display: grid; place-items: center; margin: 0 auto; }
.degrau.p1 .sol-medalha { width: 74px; height: 74px; }
.sol-medalha svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sol-medalha .num { position: relative; color: #fff; font-weight: 900; font-size: 22px; text-shadow: 0 1px 0 rgb(0 0 0 / .2); }
.degrau .retrato { box-shadow: 0 0 0 3px #fff, 0 6px 14px -4px rgb(38 56 111 / .35) !important; }

/* Cartão "Minha cidade" */
.cartao-minha { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: #fff; border: 2px solid var(--borda); border-radius: 22px; padding: 12px 14px; margin: 0 0 14px; box-shadow: 0 3px 0 var(--borda); }
.cartao-minha .mini-coracao { width: 54px; height: 50px; flex: none; }
.cartao-minha .mini-coracao svg { width: 100%; height: 100%; }
.cartao-minha .nome-minha { display: block; font-size: 18px; }
.vazio-minha { border-style: dashed; border-color: var(--terracota); background: #fff7f5; box-shadow: none; }

/* Legibilidade (revisão de usabilidade): cinzas mais escuros, nada abaixo de 12 px */
:root { --suave: #5f6368; }
.pontos small { font-size: 11px; }
.aba-cargo .cadeado { font-size: 11px; }
.fonte { color: #6b6f73; }

/* Celular: menu de baixo com texto, topo mais compacto */
@media (max-width: 760px) {
  .lateral { padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); gap: 0; }
  .nav-item { flex-direction: column; gap: 2px; padding: 6px 4px; flex: 1; font-size: 11px; letter-spacing: 0; text-transform: none; font-weight: 900; border-radius: 16px; }
  .nav-item span { display: block !important; }
  .nav-item i { font-size: 24px; }
  body { padding-bottom: 72px; }
  .faixa { min-height: 0; padding: 12px 14px; margin-bottom: 12px; }
  .faixa .rotulo-faixa { display: none; }
  .faixa h1 { font-size: 18px; }
  .abas-cargo { margin-bottom: 10px; }
  .aba-cargo { padding: 6px 2px; border-radius: 16px; }
  .aba-cargo .cadeado { display: none; }
  .aviso-area { font-size: 13px; padding: 10px 12px; }
  .degrau.p1 .bloco { height: 112px; } .degrau.p2 .bloco { height: 86px; } .degrau.p3 .bloco { height: 70px; }
}

/* ================= v16 · topo enxuto e alertas de gasto em destaque (pedidos do sócio) ================= */
/* Topo: logo + título + mandato numa linha só; nada de faixa colorida nem caixas */
.topo-rank { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.topo-rank h1 { font-size: 24px; flex: 1; }
.topo-logo svg { width: 34px; height: 34px; display: block; }
.seletor-mandato { width: auto; min-height: 40px; padding: 7px 34px 7px 14px; font-size: 15px; border-radius: 999px;
  box-shadow: none; background-position: right 10px center; background-size: 16px; }
/* Cargos: abas de texto num trilho só (segmentado), sem ícones nem rótulos extras */
.abas-cargo { display: flex; gap: 2px; padding: 4px; margin: 0 0 14px; background: #f2f1ee; border-radius: 999px; }
.aba-cargo { flex: 1; min-width: 0; border: 0; background: transparent; box-shadow: none !important; background-image: none !important;
  padding: 9px 4px; border-radius: 999px; color: var(--suave); font-size: 14px; font-weight: 900; white-space: nowrap; }
.aba-cargo:active { transform: scale(.97); }
.aba-cargo[aria-pressed="true"] { background: #fff; color: var(--texto); border: 0;
  box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 4px 10px -4px rgb(38 56 111 / .28) !important; }
/* Áreas: pílulas leves, sem sombra dura */
.areas-chips { gap: 8px; margin-bottom: 4px; padding-bottom: 6px; }
.area-chip { padding: 5px 12px 5px 5px; font-size: 14px; box-shadow: none; border-width: 1.5px; gap: 6px; }
.area-chip .ic { width: 28px; height: 28px; font-size: 16px; }
.area-chip[aria-pressed="true"] { box-shadow: none; border-color: var(--c); background: color-mix(in srgb, var(--c) 9%, #fff); }
/* Uma frase no lugar dos blocos de aviso; o "i" abre o texto inteiro */
.legenda-area { display: flex; align-items: center; gap: 6px; width: 100%; margin: 2px 0 12px; padding: 4px 2px; border: 0; background: none;
  cursor: pointer; text-align: left; color: var(--suave); font-size: 14px; font-weight: 800; }
.legenda-area i { color: var(--azul); font-size: 18px; flex: none; }
.legenda-pontos { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 0; }
.legenda-pontos > div { display: flex; gap: 12px; align-items: center; }
/* Busca mais baixa e sem sombra */
.busca input { min-height: 48px; padding-top: 10px; padding-bottom: 10px; box-shadow: none; border-width: 1.5px; font-size: 16px; }
.busca input:focus { box-shadow: none; }
.botao-filtro { min-height: 48px; box-shadow: none; border-width: 1.5px; }
.linha-busca { margin-bottom: 16px; }
/* Ícones das áreas que entraram no geral, na linha de cada cidade */
.areas-linha { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: -2px; font-size: 15px; }

/* Gasto fora do padrão: vermelho, no alto, impossível de não ver */
.cartao-gasto { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit; cursor: pointer; color: #7a2418;
  background: var(--alerta-claro); border: 2px solid #f3b8ad; border-radius: 20px; padding: 12px 14px; margin: 0 0 14px; }
.cartao-gasto .ic-alerta { width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-size: 24px;
  background: var(--alerta) radial-gradient(circle at 32% 28%, rgb(255 255 255 / .38), rgb(255 255 255 / 0) 62%); }
.cartao-gasto .meio { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cartao-gasto b { font-size: 16px; line-height: 1.25; }
.cartao-gasto .sub { font-size: 13px; color: #9a4a3e; font-weight: 800; }
.cartao-gasto .seta { color: var(--alerta); font-size: 18px; }
.cartao-gasto[aria-pressed="true"] { background: #fff; }
.selo-gasto { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; padding: 3px 10px; border-radius: 999px;
  background: var(--alerta); color: #fff; font-size: 12px; font-weight: 900; }
.linha-rank.com-alerta { border-color: #f3b8ad; }
.gasto-razao { font-weight: 900; font-size: 20px; color: var(--alerta); white-space: nowrap; }
.alerta-gasto.forte { display: block; margin: 16px 0 0; padding: 14px; border: 2px solid #f3b8ad; color: #6e2117; }
.alerta-titulo { display: flex; align-items: center; gap: 8px; font-weight: 900; font-size: 16px; color: var(--alerta); }
.alerta-titulo i { font-size: 24px; }
.alerta-frase { margin: 6px 0 10px; font-size: 15px; }
.barras-gasto { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.bg-rotulo { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; font-weight: 800; }
.bg-trilho { height: 14px; border-radius: 999px; background: #fff; overflow: hidden; margin-bottom: 6px; }
.bg-enche { display: block; height: 100%; border-radius: 999px; background: var(--alerta); }
.bg-enche.media { background: #b9b4ae; }
.alerta-nota { margin: 10px 0 0; font-size: 13px; color: #8a5a52; }

@media (max-width: 760px) {
  .topo-rank { margin-bottom: 12px; }
  .topo-rank h1 { font-size: 21px; }
  .abas-cargo { gap: 0; padding: 3px; }
  .aba-cargo { font-size: 13px; padding: 8px 2px; }
  .pagina-ranking .direita { display: none; }
}
.botao-info { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 1.5px solid var(--borda); background: #fff; color: var(--azul);
  display: grid; place-items: center; font-size: 20px; cursor: pointer; }
.botao-info:active { transform: scale(.94); }
/* Geral: escolher o grupo de cidades com as mesmas áreas medidas (0.5.2) */
.turmas { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 0 14px; padding: 2px; }
.turmas::-webkit-scrollbar { display: none; }
.turma { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--borda); background: #fff; font: inherit; font-weight: 900; font-size: 14px; color: var(--suave); }
.turma .ics { display: inline-flex; gap: 2px; font-size: 17px; }
.turma[aria-pressed="true"] { border-color: var(--texto); color: var(--texto); }
/* Ficha: gasto fora do limite legal no alto e "fora do padrão" à vista */
.cartao-lei { border: 2px solid #f3b8ad; background: var(--alerta-claro); color: #6e2117; border-radius: var(--raio); padding: 16px; margin: 0 0 16px; }
.cartao-lei ul { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.sinais-fora { text-align: left; margin-top: 16px; padding: 12px 14px; border-radius: 14px; background: #fff6e6; border: 1.5px solid #f3d9a4; color: #6b4a00; }
.sinais-fora .alerta-titulo { color: #b26b00; font-size: 15px; }
.sinais-fora p { margin: 6px 0 0; font-size: 14px; }
@media (max-width: 760px) {
  .linha-rank.com-foto { grid-template-columns: 38px 42px 1fr auto; }
  .linha-rank .posicao { font-size: 15px; }
}
/* margem de 1 ponto (0.5.4): amarelo = no limite da lei */
.selo-gasto.amarelo { background: #f7c548; color: #5c4100; }
.cartao-lei.amarelo { background: #fff6e0; border-color: #f3d9a4; color: #5c4100; }
.cartao-lei.amarelo .alerta-titulo { color: #a36a00; }
.cartao-lei li.no-limite::marker { color: #e0a800; }
.cartao-lei li.no-limite { color: #6b5200; }

/* D38: verba dentro do teto e mérito repartido, explicados */
.dentro-lei { display: flex; gap: 6px; align-items: center; margin: 0 0 10px; font-size: 14px; font-weight: 900; color: var(--verde-sombra); }
.dentro-lei i { font-size: 18px; color: var(--verde); }
.bg-rotulo.teto { color: var(--suave); font-size: 13px; border-top: 1.5px dashed #e3b1a8; padding-top: 6px; }
.gasto-razao small { display: block; font-size: 11px; font-weight: 800; text-align: right; }
.explica .perde { display: block; margin-top: 6px; color: var(--alerta); font-weight: 900; }

/* Sinais para investigar (0.5.6): amarelo, com aviso de que não é prova */
.cartao-sinal { background: #fff6e0; border-color: #f3d9a4; color: #5c4100; }
.cartao-sinal .ic-alerta { background-color: #e0a800; }
.cartao-sinal .sub { color: #7a5c00; }
.cartao-sinal .seta { color: #b88600; }
.cartao-sinais { margin: 16px 0 0; padding: 14px; border-radius: 18px; background: #fff6e0; border: 2px solid #f3d9a4; color: #5c4100; }
.cartao-sinais .alerta-titulo { color: #a36a00; }
.cartao-sinais .sinal { margin-top: 12px; padding-top: 10px; border-top: 1.5px dashed #ecd28f; font-size: 15px; }
.cartao-sinais .sinal p { margin: 4px 0 0; }
.aviso-prova { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 4px; padding: 12px; border-radius: 14px; background: #fff; border: 2px solid #e0a800;
  font-size: 14px; font-weight: 700; color: #4a3500; }
.aviso-prova i { font-size: 24px; color: #b88600; flex: none; }
.aviso-prova b { display: block; font-size: 15px; color: #3d2c00; margin-bottom: 2px; }

/* "Dados incompletos" (pedido do sócio) */
.selo-incompleto { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; padding: 2px 9px; border-radius: 999px;
  background: #eef0f3; color: #4f565e; font-size: 12px; font-weight: 900; border: 1px dashed #b9c0c8; }
.aviso-incompleto { text-align: left; margin: 14px 0 0; padding: 12px 14px; border-radius: 14px; background: #f4f6f8; border: 1.5px dashed #b9c0c8;
  color: #3f454b; font-size: 14px; font-weight: 700; display: flex; flex-direction: column; gap: 4px; }
.aviso-incompleto b { font-size: 15px; }

/* Página da cidade e retrato do estado (pedido do sócio): nível de hoje ao lado da média do estado */
.retrato h2 { margin-bottom: 8px; }
.retrato-grupos { display: flex; flex-direction: column; gap: 16px; margin-top: 10px; }
.r-grupo { display: flex; align-items: center; gap: 8px; font-weight: 900; font-size: 16px; margin-bottom: 4px; }
.r-grupo .ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 16px;
  background-image: radial-gradient(circle at 32% 28%, rgb(255 255 255 / .38), rgb(255 255 255 / 0) 62%); }
.retrato-linha { padding: 10px 0; border-top: 1.5px solid #f0f0f0; }
.r-topo { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.r-nome { font-weight: 800; font-size: 15px; }
.r-periodo { display: block; font-size: 12px; color: var(--suave); font-weight: 700; }
.r-valor { font-weight: 900; font-size: 20px; white-space: nowrap; }
.r-valor small { font-size: 12px; font-weight: 800; color: var(--suave); margin-left: 2px; }
.r-sem { color: var(--suave); font-size: 14px; }
.r-barras { display: flex; flex-direction: column; gap: 3px; margin: 6px 0 4px; }
.r-b { display: block; height: 8px; border-radius: 999px; }
.r-b.cidade { background: var(--marinho); }
.r-b.estado { background: #c9ced6; }
.r-comp { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-size: 13px; flex-wrap: wrap; }
.r-tag { font-weight: 900; padding: 2px 9px; border-radius: 999px; font-size: 12px; }
.r-tag.melhor { background: var(--verde-claro); color: var(--verde-sombra); }
.r-tag.pior { background: var(--alerta-claro); color: var(--alerta); }
.r-tag.igual { background: #f1f1f1; color: var(--suave); }
.contas-linha { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.contas-linha span { flex: 1; min-width: 90px; text-align: center; padding: 10px; border-radius: 14px; background: #f6f6f6; font-size: 13px; font-weight: 800; color: var(--suave); }
.contas-linha b { display: block; font-size: 22px; color: var(--texto); }
.contas-linha .ruim { background: var(--alerta-claro); color: var(--alerta); }
.contas-linha .ruim b { color: var(--alerta); }

.explica-inocente { font-size: 14px; color: #5c4b14; background: #fffdf5; border-radius: 10px; padding: 8px 10px; margin-top: 6px !important; }

/* ================= Lobo-guará que explica (v25, pedido do sócio) ================= */
.tem-lobo { position: relative !important; overflow: visible !important; }
.ajuda { width: 30px; height: 30px; flex: none; border-radius: 50%; border: 0; cursor: pointer; display: inline-grid; place-items: center;
  font: inherit; font-weight: 900; font-size: 17px; color: #fff; vertical-align: middle; margin-left: 6px;
  background: #df7a3e radial-gradient(circle at 32% 28%, rgb(255 255 255 / .45), rgb(255 255 255 / 0) 62%); box-shadow: 0 2px 0 #b5531f; }
.ajuda:active { transform: translateY(2px) scale(1.05, .92); box-shadow: none; }
/* palco: fica em cima da borda e esconde o corpo que ainda está "atrás" da caixa */
.lobo-palco { position: absolute; bottom: calc(100% - 2px); width: 100px; height: 104px; overflow: hidden; z-index: 30; pointer-events: none; }
.lobo-svg { position: absolute; left: 0; bottom: 0; width: 100px; height: 104px; display: block; transform-origin: 50% 100%;
  filter: drop-shadow(0 -2px 6px rgb(38 56 111 / .12)); }
.lobo-patas-caixa { position: absolute; top: -4px; width: 100px; height: 22px; z-index: 31; pointer-events: none; }
.lobo-patas { width: 100%; height: 100%; display: block; }
.lobo-fala { position: absolute; z-index: 32; left: 10px; right: 10px; top: 22px; background: #fff; border: 2.5px solid #f0b48a; border-radius: 20px;
  padding: 14px 40px 14px 16px; font-size: 15px; font-weight: 700; color: var(--texto); line-height: 1.45; text-align: left;
  box-shadow: 0 10px 30px -10px rgb(120 60 20 / .35); max-height: min(60vh, 420px); overflow: auto; }
.lobo-fala::before { content: ""; position: absolute; top: -12px; left: calc(var(--rabo) - 20px); border: 10px solid transparent;
  border-bottom: 12px solid #f0b48a; border-top: 0; }
.lobo-fala::after { content: ""; position: absolute; top: -8px; left: calc(var(--rabo) - 17px); border: 7px solid transparent; border-bottom: 9px solid #fff; border-top: 0; }
.lobo-fala p { margin: 0 0 8px; } .lobo-fala p:last-child { margin: 0; }
.lobo-fala .fonte { margin-top: 8px; }
.lobo-fechar { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--borda); background: #fff;
  color: var(--suave); cursor: pointer; display: grid; place-items: center; font-size: 14px; }
@media (prefers-reduced-motion: no-preference) {
  .lobo-svg { animation: lobo-sobe .62s var(--mola) both; }
  .lobo-patas .pata { animation: lobo-pata .34s .38s var(--mola) both; transform-box: fill-box; transform-origin: 50% 0; }
  .lobo-patas .pata:nth-child(2) { animation-delay: .46s; }
  .lobo-fala { animation: lobo-fala .42s .5s var(--mola) both; transform-origin: var(--rabo) 0; }
  .lobo-svg .orelha { transform-box: fill-box; transform-origin: 50% 100%; animation: lobo-orelha 2.6s 1.1s ease-in-out infinite; }
  .lobo-svg .orelha.d { animation-delay: 1.5s; }
  .lobo-svg .olhos { transform-box: fill-box; transform-origin: 50% 50%; animation: lobo-pisca 3.8s 1.4s infinite; }
  .lobo-svg .lobo-cabeca { transform-box: fill-box; transform-origin: 50% 90%; animation: lobo-inclina 4.2s 1s ease-in-out infinite; }
  .saindo .lobo-svg, .lobo-palco.saindo .lobo-svg { animation: lobo-desce .3s ease-in both; }
  .lobo-patas-caixa.saindo { animation: lobo-some .15s ease-in both; }
  .lobo-fala.saindo { animation: lobo-some .2s ease-in both; }
  @keyframes lobo-sobe { 0% { transform: translateY(100%) scale(.9, 1.1); } 70% { transform: translateY(-4%) scale(1.04, .96); } 100% { transform: none; } }
  @keyframes lobo-desce { to { transform: translateY(100%) scale(.95, 1.05); } }
  @keyframes lobo-pata { 0% { transform: translateY(-120%) scaleY(.6); opacity: 0; } 100% { transform: none; opacity: 1; } }
  @keyframes lobo-fala { 0% { transform: scale(.4); opacity: 0; } 100% { transform: none; opacity: 1; } }
  @keyframes lobo-some { to { opacity: 0; transform: scale(.92); } }
  @keyframes lobo-orelha { 0%, 86%, 100% { transform: rotate(0); } 90% { transform: rotate(-8deg); } 95% { transform: rotate(5deg); } }
  @keyframes lobo-pisca { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
  @keyframes lobo-inclina { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-3deg); } }
}

/* lobo maior, da barriga para cima */
.lobo-palco { width: 116px; height: 134px; }
.lobo-svg { width: 116px; height: 135px; }
.lobo-patas-caixa { width: 116px; height: 24px; top: -5px; }

.ajuda-topo { width: 40px; height: 40px; font-size: 21px; margin-left: 0; }
.alerta-titulo .ajuda, .aviso-incompleto .ajuda, .sinal .ajuda, h2 .ajuda { margin-left: auto; }
.alerta-titulo { flex-wrap: nowrap; }

/* v27: "?" pequeno e discreto no canto de cada caixa (pedido do sócio) */
.cartao, .cartao-lei, .cartao-sinais, .alerta-gasto, .aviso-incompleto, .sinal, .retrato, .caixa-ajuda, .legenda-mapa { position: relative; }
.ajuda { width: 22px; height: 22px; font-size: 13px; color: #d9600c; background: #fff; box-shadow: none; border: 1.5px solid #f6b98a; margin: 0; }
.ajuda:hover { background: #fff3e6; }
.ajuda.canto { position: absolute; top: 8px; right: 8px; z-index: 5; }
.caixa-ajuda > .ajuda.canto { top: -9px; right: 10px; }
.ajuda.linha { display: inline-grid; vertical-align: -4px; margin-left: 4px; }
.linha-contagem { min-height: 14px; margin-bottom: 8px; }
.legenda-mapa > .ajuda.canto { top: 50%; right: -4px; transform: translateY(-50%); }
.ajuda-topo { display: none; }

.botao.pequeno { white-space: normal; text-align: center; }

/* estado no mapa: antes × agora */
.r-par { display: grid; grid-template-columns: 76px 1fr auto; align-items: center; gap: 8px; margin-top: 5px; font-size: 13px; }
.r-par b { font-size: 15px; white-space: nowrap; } .r-par b small { font-size: 11px; color: var(--suave); margin-left: 2px; }
.r-ano { color: var(--suave); font-weight: 800; font-size: 12px; }
.r-par .r-b { height: 12px; }
.r-b.antes { background: #d5d9df; }
.r-b.agora.melhor { background: var(--verde); } .r-b.agora.pior { background: var(--alerta); } .r-b.agora.igual { background: #9aa3ad; }
.r-b.cheio { background: var(--ceu-forte); height: 12px; }

/* mascote um pouco menor (pedido do sócio) */
.lobo-palco { width: 92px; height: 106px; }
.lobo-svg { width: 92px; height: 107px; }
.lobo-patas-caixa { width: 92px; height: 19px; top: -4px; }
.lobo-fala { top: 18px; }

/* mascote menor (pedido do sócio, 2ª vez) */
.lobo-palco { width: 72px; height: 83px; }
.lobo-svg { width: 72px; height: 84px; }
.lobo-patas-caixa { width: 72px; height: 15px; top: -3px; }
.lobo-fala { top: 15px; }

.componente, .atuacao, .retrato-linha { position: relative; }

/* Botão de voltar no topo (só no celular; no computador o menu lateral já leva a todas as páginas) */
.voltar { width: 38px; height: 38px; flex: none; border-radius: 50%; border: 1.5px solid var(--borda); background: #fff; color: var(--texto);
  display: none; place-items: center; font-size: 18px; cursor: pointer; }
.voltar:active { transform: scale(.94); }
.faixa .voltar { border-color: rgb(255 255 255 / .6); background: rgb(255 255 255 / .18); color: #fff; position: relative; z-index: 1; }
@media (max-width: 760px) { .voltar { display: grid; } .topo-rank .topo-logo { display: none; } }
/* sombra chapada no mascote (pedido do sócio) */
.lobo-svg { filter: drop-shadow(4px 3px 0 rgb(120 70 0 / .2)); }
.lobo-patas { filter: drop-shadow(1px 3px 0 rgb(120 70 0 / .22)); }

/* sombra suave (não chapada) e espaço para as orelhas no pulo (pedidos do sócio) */
.lobo-svg { filter: drop-shadow(3px 6px 7px rgb(90 55 0 / .3)); left: 12px; }
.lobo-palco { width: 96px; height: 108px; margin-left: -12px; }
.lobo-patas { filter: drop-shadow(1px 3px 3px rgb(90 55 0 / .3)); }

/* v36 · Mapa mais limpo */
.tem-lobo { z-index: 40; }                 /* o mascote e o balão ficam por cima das caixas seguintes */
.legenda-mapa { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: nowrap; font-size: 12px; margin: 10px 0 14px; }
.legenda-mapa > span { white-space: nowrap; }
.legenda-mapa > .ajuda.canto { position: static; transform: none; margin-left: 4px; }
#aqui-cidade:empty { display: none; }
#aqui-cidade #selecionado { margin: 0 0 16px; }
@media (max-width: 760px) { #aqui-cidade #selecionado .vazio { display: none; } #aqui-cidade #selecionado:has(.vazio) { display: none; } }
.gov-linha { display: flex; align-items: center; gap: 12px; padding: 4px 0 12px; border-bottom: 1.5px solid #f0f0f0; }
.gov-linha .avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.linha-alerta { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; padding: 10px 12px; border-radius: 14px; background: var(--alerta-claro); color: #7a2418; font-size: 14px; }
.linha-alerta i:first-child { color: var(--alerta); font-size: 20px; } .linha-alerta span { flex: 1; } .linha-alerta i:last-child { color: var(--alerta); }
.retrato-linha.est { padding: 10px 0 8px; }
.r-valor.melhor { color: var(--verde-sombra); } .r-valor.pior { color: var(--alerta); } .r-valor.igual { color: var(--texto); }
.r-valor i { font-size: 15px; margin-right: 3px; }
.r-trilho { position: relative; height: 10px; border-radius: 999px; background: #eef0f2; margin: 6px 0 4px; }
.r-trilho .r-b { position: absolute; left: 0; top: 0; bottom: 0; height: auto; border-radius: 999px; }
.r-marca { position: absolute; top: -3px; bottom: -3px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: #5d6670; }
.r-legenda { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--suave); font-weight: 800; }
.retrato .r-grupo { margin-top: 6px; }
.legenda-mapa { flex-wrap: wrap; row-gap: 6px; font-size: 11px; }
.legenda-mapa .escala i { width: 20px; }

/* ================= Página principal (v38, pedido do sócio) ================= */
.topo-inicio { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.topo-inicio .topo-logo svg { width: 32px; height: 32px; display: block; }
.marca-texto { color: var(--verde); font-weight: 900; font-size: 21px; letter-spacing: -.3px; }
.pagina-inicio .topo-inicio .topo-logo { display: block !important; }
.trilha-caixa { margin: 4px 0 18px; }
.trilha-caixa > .ajuda.canto { top: 4px; right: 4px; }
.trilha-titulo { padding: 4px 2px 0; }
.trilha-titulo h1 { font-size: 34px; line-height: 1.1; }
.trilha-titulo h1 small { font-size: 17px; font-weight: 800; color: var(--suave); }
.trilha-palco { position: relative; margin-top: -6px; }
.trilha-svg { width: 100%; height: auto; display: block; }
.trilha-svg .corre-svg { overflow: visible; }
@media (prefers-reduced-motion: no-preference) {
  .trilha-svg .pulo { animation: mascote-pula .3s ease-in-out 9 alternate both; transform-box: fill-box; transform-origin: 50% 100%; }
  @keyframes mascote-pula { from { transform: translateY(0) scale(1.04, .96); } to { transform: translateY(-7px) scale(.97, 1.04); } }
  .trilha-svg .pano { animation: tremula 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: 0 50%; }
  @keyframes tremula { 0%, 100% { transform: skewY(0) scaleX(1); } 50% { transform: skewY(-4deg) scaleX(.94); } }
}
.busca-inicio h2 { font-size: 22px; margin: 0 0 10px; }
.busca-inicio .busca { margin-bottom: 8px; }
.sugestoes { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.sugestoes .cidade-opcao { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--borda); background: #fff;
  color: var(--texto); font-weight: 800; }
.busca-inicio .cartao-minha { margin-bottom: 10px; }
.atalhos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 6px 0 18px; }
.atalhos a { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px; border-radius: 20px; border: 1.5px solid var(--borda);
  color: var(--texto); font-weight: 900; font-size: 13px; text-align: center; line-height: 1.2; background: #fff; }
.atalhos a:active { transform: scale(.97); }
.atalhos .ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 22px; background: var(--c); }
.rodape-inicio { font-size: 13px; color: var(--suave); text-align: center; margin: 4px 0 0; }
.pagina-inicio .direita { display: none; }

/* ================= Página principal simples (v40, pedido do sócio): mascote de corpo inteiro, bandeirinha e mapa ================= */
.estado-inicio { display: flex; align-items: flex-end; gap: 6px; margin: 6px 0 4px; min-height: 150px; }
.estado-inicio > .ajuda.canto { top: 0; right: 0; }
.mascote-inicio { width: 86px; flex: none; }
.cuca-corpo { width: 86px; height: auto; display: block; overflow: visible; filter: drop-shadow(3px 5px 6px rgb(90 55 0 / .25)); }
.bandeira-inicio { display: flex; align-items: flex-start; flex: 1; padding-bottom: 8px; }
.bandeira-inicio .mastro { width: 4px; height: 128px; border-radius: 2px; background: #5d4a3a; flex: none; }
.pano-inicio { background: var(--alerta); color: #fff; padding: 10px 16px 12px 14px; border-radius: 0 16px 16px 0; margin-top: 4px;
  clip-path: polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0 100%); padding-right: 30px; }
.pano-inicio b { display: block; font-size: 30px; line-height: 1; }
.pano-inicio span { font-size: 14px; font-weight: 800; }
.mapa-inicio { margin: 6px 0 12px; }
.mapa-inicio svg { width: 100%; height: auto; display: block; }
.mapa-inicio path { stroke: #fff; stroke-width: .4; cursor: pointer; }
.mapa-inicio path.realce { stroke: var(--texto); stroke-width: 1.6; }
.legenda-inicio { display: flex; justify-content: center; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: var(--suave); margin-top: 4px; }
.legenda-inicio .escala { display: flex; gap: 2px; } .legenda-inicio .escala i { width: 18px; height: 8px; border-radius: 2px; display: block; }
.dica-cidade { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding: 10px 12px; border: 1.5px solid var(--borda); border-radius: 16px; }
.dica-cidade b { font-size: 16px; } .dica-cidade span { color: var(--suave); font-size: 14px; flex: 1; } .dica-cidade .botao { margin-left: auto; }
.busca-inicio .busca input { font-size: 17px; }
@media (prefers-reduced-motion: no-preference) {
  .cuca-corpo .perna { transform-box: fill-box; transform-origin: 50% 0; animation: perna .36s ease-in-out infinite alternate; }
  .cuca-corpo .perna.d { animation-direction: alternate-reverse; }
  .cuca-corpo .braco { transform-box: fill-box; transform-origin: 50% 0; animation: perna .36s ease-in-out infinite alternate-reverse; }
  .cuca-corpo .braco.d { animation-direction: alternate; }
  .cuca-corpo .corre { animation: trota .18s ease-in-out infinite alternate; }
  .cuca-corpo .sombra-chao { transform-box: fill-box; transform-origin: 50% 50%; animation: sombra .18s ease-in-out infinite alternate; }
  .pano-inicio { animation: tremula 1.8s ease-in-out infinite; transform-origin: 0 50%; }
  @keyframes perna { from { transform: rotate(-24deg); } to { transform: rotate(24deg); } }
  @keyframes trota { from { transform: translateY(0); } to { transform: translateY(-4px); } }
  @keyframes sombra { from { transform: scaleX(1); } to { transform: scaleX(.85); } }
}

/* ================= Ficha do mandato (v41, pedido do sócio): prefeito no topo, coração com uma palavra, áreas em lista ================= */
.pagina-ficha .direita { display: none; }
.topo-ficha { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.tf-foto { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 3px #fff, 0 4px 12px -4px rgb(38 56 111 / .35); }
.tf-foto.vazia { display: grid; place-items: center; background: #eef0f3; color: #b9c0c8; font-size: 30px; }
.tf-nome { min-width: 0; display: flex; flex-direction: column; }
.tf-nome h1 { font-size: 22px; }
.tf-cidade { font-size: 13px; font-weight: 900; color: var(--verde-sombra); text-transform: uppercase; letter-spacing: .6px; }
.tf-mandatos { display: flex; gap: 6px; margin: 0 0 14px; }
.tf-mandato { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 4px; border-radius: 999px; border: 1.5px solid var(--borda);
  background: #fff; font: inherit; font-weight: 900; font-size: 13px; color: var(--suave); cursor: pointer; }
.tf-mandato i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.tf-mandato[aria-pressed="true"] { border-color: var(--texto); color: var(--texto); }
.tf-heroi { text-align: center; padding: 6px 0 4px; }
.tf-coracao .coracao { width: 150px; height: 136px; margin: 0 auto; }
.tf-palavra { font-size: 26px; font-weight: 900; margin-top: 4px; text-transform: capitalize; }
.tf-sub { font-size: 14px; }
.tf-acoes { display: flex; justify-content: center; gap: 8px; margin: 14px 0 4px; flex-wrap: wrap; }
.tf-acao { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--borda); background: #fff;
  font: inherit; font-weight: 900; font-size: 13px; color: var(--azul); cursor: pointer; }
.tf-faixa { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 10px 12px; border-radius: 14px; background: #f4f6f8; color: #3f454b; font-size: 14px; font-weight: 800; }
.tf-faixa > i { font-size: 20px; flex: none; } .tf-faixa > span { flex: 1; }
.tf-faixa.ruim { background: var(--alerta-claro); color: #7a2418; } .tf-faixa.ruim > i { color: var(--alerta); }
.tf-areas { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.tf-area { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 18px; border: 1.5px solid var(--borda); background: #fff;
  font: inherit; color: var(--texto); cursor: pointer; text-align: left; }
.tf-area .ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 20px; flex: none;
  background-image: radial-gradient(circle at 32% 28%, rgb(255 255 255 / .35), rgb(255 255 255 / 0) 62%); }
.tf-area-nome { flex: 1; font-weight: 900; font-size: 16px; display: flex; flex-direction: column; }
.tf-area-nome small { font-size: 12px; color: var(--suave); font-weight: 800; }
.tf-area .pontos { min-width: 64px; font-size: 17px; }
.tf-area .seta { color: #b0b4b9; transition: transform .2s; }
.tf-area[aria-expanded="true"] { border-color: var(--texto); }
.tf-area[aria-expanded="true"] .seta { transform: rotate(180deg); }
.tf-detalhe .cartao { border: 0; padding: 4px 2px 8px; }
.tf-mais { border-top: 1.5px solid #f0f0f0; padding: 12px 2px; }
.tf-mais summary { font-weight: 900; cursor: pointer; display: flex; align-items: center; gap: 8px; color: var(--texto); }

.itens-estado { list-style: none; margin: 4px 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.itens-estado li { display: flex; gap: 6px; align-items: flex-start; }
.itens-estado i { font-size: 18px; flex: none; margin-top: 1px; }
.itens-estado .it-melhorou i { color: var(--verde); } .itens-estado .it-piorou i { color: var(--alerta); } .itens-estado .it-igual i { color: #9aa3ad; }
.itens-estado small { color: var(--suave); }

/* Página da cidade: contorno da cidade e áreas recolhidas (pedido do sócio) */
.contorno-cidade { width: 64px; height: 64px; flex: none; order: 3; }
.contorno-cidade path { fill: var(--verde); stroke: var(--verde-sombra); stroke-width: .6; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.topo-rank h1 { order: 2; }
.topo-rank .botao-info#minha { order: 4; }
details.retrato-grupo { border: 1.5px solid var(--borda); border-radius: 18px; padding: 10px 12px; }
details.retrato-grupo > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; margin: 0; }
details.retrato-grupo > summary::-webkit-details-marker { display: none; }
.r-grupo-nome { flex: 1; }
.r-resumo { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
details.retrato-grupo .seta { color: #b0b4b9; transition: transform .2s; }
details.retrato-grupo[open] .seta { transform: rotate(180deg); }
details.retrato-grupo[open] > summary { margin-bottom: 4px; }
.retrato-grupos { gap: 10px; }

.lista-casos { margin: 10px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.lista-casos small { color: #7a5c00; }
.cartao-sinais.caixa-ajuda { margin: 0 0 16px; }

.mais-casos summary { font-weight: 900; cursor: pointer; color: #a36a00; margin-top: 8px; font-size: 14px; }

/* 0.6.5: nível mais forte, "bem fora do padrão" (não é prova) */
.selo-gasto.forte { background: #f08a24; color: #fff; }
.cartao-sinais.forte { background: #fff0e0; border-color: #f5b77a; color: #5c2e00; }
.cartao-sinais.forte .alerta-titulo { color: #c25e00; }
.cartao-sinais.forte .sinal { border-top-color: #f2c79a; }
.cartao-sinais.forte .aviso-prova { border-color: #f08a24; }
.cartao-sinais.forte .aviso-prova i { color: #c25e00; }
.pilula-forte { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: #f08a24; color: #fff; font-size: 12px; font-weight: 900; vertical-align: 2px; }
.cartao-gasto .pilula-forte { display: block; width: fit-content; margin: 6px 0 2px; }
.selos-linha { display: flex; flex-wrap: wrap; gap: 0 6px; }
.lista-casos li.caso-grave::marker { color: #f08a24; }
.lista-casos li.caso-grave b { color: #c25e00; }

/* Logo em maiúsculas (pedido do sócio): PÁTRIA verde e AMADA cor de sol, letra grossa com degrau de sombra, como os botões */
.marca-link { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.marca-link .marca-simbolo { width: 36px; height: 36px; }
.marca-nome { display: inline-flex; gap: .26em; font-weight: 900; font-size: 22px; line-height: 1; letter-spacing: .04em; text-transform: uppercase; transform: rotate(-2deg); }
.marca-nome .m1 { color: var(--verde); text-shadow: 0 2px 0 var(--verde-sombra), 0 3px 4px rgb(35 112 63 / .18); }
.marca-nome .m2 { color: var(--sol); text-shadow: 0 2px 0 var(--sol-sombra), 0 3px 4px rgb(200 106 18 / .18); position: relative; }
.marca-nome .m2::after { content: ""; position: absolute; left: 4%; right: 4%; bottom: -6px; height: 4px; border-radius: 4px; background: var(--amarelo); box-shadow: 0 1.5px 0 var(--amarelo-sombra); }
.marca .marca-nome { font-size: 21px; }
@media (max-width: 1100px) { .marca .marca-nome { display: none; } }
.topo-inicio { justify-content: space-between; }
.criar-conta { min-height: 38px; padding: 8px 10px; font-size: 12px; letter-spacing: .3px; white-space: nowrap; flex: none; }

/* Cadastro (protótipo, sem servidor): a Cuca explica cada passo num balão */
.aviso-prototipo { display: flex; gap: 8px; align-items: center; margin: 8px 0 14px; padding: 10px 12px; border-radius: 14px; background: var(--azul-claro); color: var(--marinho); font-size: 14px; font-weight: 800; }
.aviso-prototipo i { font-size: 20px; flex: none; }
.cadastro-mascote { display: flex; align-items: flex-end; gap: 10px; margin: 4px 0 10px; }
.mascote-cadastro { width: 84px; flex: none; }
.mascote-cadastro .cuca-corpo, .mascote-cadastro .cuca-corpo * { animation: none !important; }
.fala-cuca { position: relative; flex: 1; text-transform: none; color: var(--texto); letter-spacing: 0; background: #fff; border: 2px solid var(--borda); border-radius: 18px; padding: 12px 14px; font-size: 15px; font-weight: 700; margin-bottom: 40px; box-shadow: 0 4px 0 var(--borda); }
.fala-cuca::before { content: ""; position: absolute; left: -11px; bottom: 18px; width: 18px; height: 18px; background: #fff; border-left: 2px solid var(--borda); border-bottom: 2px solid var(--borda); transform: rotate(45deg); border-radius: 0 0 0 4px; }
.fala-cuca.pula { animation: balao-pula .35s var(--mola); }
@keyframes balao-pula { from { transform: scale(.94); opacity: .4; } to { transform: none; opacity: 1; } }
.form-cadastro h1 { margin: 0 0 12px; font-size: 24px; }
.campo { display: block; margin: 12px 0 0; }
.campo > span:first-child { display: block; font-weight: 900; font-size: 14px; margin-bottom: 6px; }
.campo input { width: 100%; box-sizing: border-box; min-height: 50px; padding: 10px 14px; border: 2px solid var(--borda); border-radius: 14px; font: inherit; font-size: 17px; font-weight: 800; color: var(--texto); background: #fff; }
.campo input:focus { outline: none; border-color: var(--azul-borda); box-shadow: 0 3px 0 var(--azul-borda); }
.campo input.invalido { border-color: var(--alerta); }
.com-olho { position: relative; display: block; }
.com-olho input { padding-right: 52px; }
.olho { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; font-size: 22px; color: var(--suave); width: 40px; height: 40px; cursor: pointer; }
.erro { color: var(--alerta); font-weight: 800; font-size: 14px; margin: 6px 0 0; }
.regras-senha { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; font-weight: 800; color: var(--suave); }
.regras-senha li { display: flex; align-items: center; gap: 4px; }
.regras-senha li.ok { color: var(--verde); }
.aceite { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 0; font-weight: 700; font-size: 15px; }
.aceite input { width: 22px; height: 22px; accent-color: var(--verde); flex: none; margin-top: 1px; }
.botao.largo { width: 100%; margin-top: 18px; }
.botao:disabled { background: #d9d9d9; box-shadow: 0 4px 0 #bdbdbd; cursor: not-allowed; filter: none; }
.pequeno-centro { text-align: center; font-size: 14px; margin: 12px 0 0; }
.dados-uso { margin-top: 14px; }
.dados-uso summary { font-weight: 900; cursor: pointer; }
.dados-uso ul { padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
@media (max-width: 420px) { .topo-inicio .marca-nome { font-size: 18px; } .topo-inicio .marca-link .marca-simbolo { width: 30px; height: 30px; } }

/* 0.6.8: cartão de sinal colorido pelo valor (--cf vem do JS: do amarelo ao vermelho) */
.cartao-cor { background: color-mix(in srgb, var(--cf) 12%, #fff); border-color: color-mix(in srgb, var(--cf) 50%, #fff); color: #3d2a12; }
.cartao-cor .alerta-titulo { color: color-mix(in srgb, var(--cf) 70%, #3a1a00); }
.cartao-cor .aviso-prova { border-color: var(--cf); }
.cartao-cor .aviso-prova i { color: color-mix(in srgb, var(--cf) 80%, #3a1a00); }
.valor-cartao { margin: 8px 0 0; font-size: 15px; font-weight: 800; }
.valor-cartao b { font-size: 22px; color: color-mix(in srgb, var(--cf) 75%, #3a1a00); }
.valor-cartao .nivel { display: inline-block; padding: 1px 10px; border-radius: 999px; background: var(--cf); color: #fff; font-weight: 900; font-size: 13px; text-shadow: 0 1px 0 rgb(0 0 0 / .18); }
.escala-sinal { position: relative; height: 10px; border-radius: 999px; margin: 10px 2px 2px; background: linear-gradient(90deg, rgb(247,197,72), rgb(240,138,36), rgb(214,64,48)); }
.escala-sinal i { position: absolute; top: 50%; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 4px solid var(--cf); transform: translate(-50%, -50%); box-shadow: 0 2px 4px rgb(0 0 0 / .2); }
.escala-legenda { display: flex; justify-content: space-between; font-size: 11px; font-weight: 800; color: #8a7a66; margin: 4px 0 0; }
.lista-casos li::marker { color: var(--c, #e0a800); font-size: 1.3em; }
.tce-parecer { margin: 14px 0 0; padding: 12px; border-radius: 14px; background: #fff; border: 1.5px solid color-mix(in srgb, var(--cf) 35%, #fff); }
.rotulo-tce { display: flex; gap: 6px; align-items: center; font-weight: 900; font-size: 14px; color: var(--marinho); }
.tce-parecer ul { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.tce-parecer .fav { color: var(--verde-sombra); }
.tce-parecer .desf { color: var(--alerta); }
.tce-parecer blockquote { margin: 6px 0 0; padding: 8px 10px; border-left: 3px solid var(--cf); background: #fafafa; font-size: 13px; }
.selo-cor { background: var(--cf); color: #fff; text-shadow: 0 1px 0 rgb(0 0 0 / .18); }

/* ===== Página inicial v2 (pedido do sócio): mapa minimalista de 3 cores sem linhas, Cuca longe da bandeira, análise ===== */
.estado-inicio { gap: 30px; padding-left: 4px; }
.mascote-inicio { width: 78px; }
.mascote-inicio .cuca-corpo { width: 78px; }
.m-acima { fill: #3fae6a; stroke: #3fae6a; background: #3fae6a; }
.m-parecido { fill: #e9e4d4; stroke: #e9e4d4; background: #e9e4d4; }
.m-abaixo { fill: #e0705a; stroke: #e0705a; background: #e0705a; }
.m-sem { fill: #f3f3f1; stroke: #f3f3f1; background: #f3f3f1; }
.mapa-inicio path { stroke-width: .6; }
.mapa-inicio path.realce { stroke: var(--texto); stroke-width: 1.6; }
.mapa-inicio svg { filter: drop-shadow(0 6px 10px rgb(60 60 40 / .12)); }
.legenda-inicio { gap: 14px; }
.legenda-inicio .ponto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.titulo-analise { font-size: 22px; margin: 22px 0 10px; }
.bloco-analise { border: 1.5px solid var(--borda); border-radius: 18px; padding: 14px; margin: 0 0 12px; }
.sub-analise { font-weight: 900; font-size: 14px; color: var(--suave); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 10px; }
.barra-tres { display: flex; height: 14px; border-radius: 999px; overflow: hidden; gap: 2px; }
.barra-tres i { display: block; height: 100%; }
.numeros-tres { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 13px; font-weight: 800; color: var(--suave); }
.numeros-tres b { display: block; font-size: 20px; color: var(--texto); }
.numeros-tres span:last-child { text-align: right; }
.numeros-tres span:nth-child(2) { text-align: center; }
.nota-analise { margin: 10px 0 0; font-size: 13px; color: var(--suave); }
.area-estado + .area-estado { margin-top: 12px; padding-top: 12px; border-top: 1.5px dashed var(--borda); }
.area-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.icone-redondo.pequeno { width: 28px; height: 28px; font-size: 16px; }
.item-estado { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 6px 0; font-size: 14px; }
.item-estado .nome { font-weight: 800; }
.item-estado .valores { grid-column: 1; color: var(--suave); font-weight: 700; }
.item-estado .valores i { font-size: 11px; }
.item-estado .veredito { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: inline-flex; align-items: center; gap: 4px; font-weight: 900; font-size: 13px; padding: 3px 10px; border-radius: 999px; }
.it-melhorou .veredito { background: var(--verde-claro); color: var(--verde-sombra); }
.it-piorou .veredito { background: var(--alerta-claro); color: var(--alerta); }
.it-igual .veredito { background: #f2f2f2; color: var(--suave); }
.linha-fora { display: flex; align-items: center; gap: 10px; padding: 10px 0; color: var(--texto); font-size: 15px; }
.linha-fora + .linha-fora { border-top: 1.5px dashed var(--borda); }
.linha-fora > i:first-child { font-size: 24px; flex: none; }
.linha-fora span { flex: 1; }
.linha-fora .ph-caret-right { color: var(--suave); }

/* ===== 0.6.10: placar do estado. A Cuca anda numa estrada até a bandeira do objetivo (+10) ===== */
.estado-inicio { display: block; min-height: 0; margin: 6px 0 4px; padding: 0; position: relative; }
.estrada { position: relative; height: 150px; margin: 4px 0 0; }
.estrada .chao { position: absolute; left: 0; right: 0; bottom: 8px; height: 6px; border-radius: 999px;
  background: repeating-linear-gradient(90deg, #e3dccb 0 14px, transparent 14px 22px); }
.cuca-pista { position: absolute; bottom: 10px; width: 66px; left: calc(var(--pos) * (100% - 66px - 62px)); transition: left 1.9s cubic-bezier(.45, .05, .3, 1); }
.cuca-pista .cuca-corpo { width: 66px; }
.estrada:not(.andando):not(.chegou) .cuca-pista .cuca-corpo, .estrada:not(.andando):not(.chegou) .cuca-pista .cuca-corpo * { animation: none !important; }
.bandeira-fim { position: absolute; right: 0; bottom: 12px; width: 62px; height: 132px; }
.bandeira-fim .mastro { position: absolute; left: 4px; bottom: 0; width: 4px; height: 132px; border-radius: 2px; background: #5d4a3a; }
.pano-fim { position: absolute; left: 8px; top: 2px; background: var(--verde); color: #fff; font-weight: 900; font-size: 22px; line-height: 1; padding: 8px 16px 8px 10px;
  clip-path: polygon(0 0, 100% 0, 84% 50%, 100% 100%, 0 100%); text-align: left; }
.pano-fim small { display: block; font-size: 10px; font-weight: 800; opacity: .9; }
.placar-linha { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 0; flex-wrap: wrap; }
.placar-num { font-size: 40px; line-height: 1; font-weight: 900; }
.placar-num.pos { color: var(--verde); } .placar-num.neg { color: var(--alerta); }
.placar-linha span { color: var(--suave); font-weight: 800; font-size: 14px; }
.placar-mudou { font-size: 13px; font-weight: 800; color: var(--suave); display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.placar-mudou .ph-arrow-circle-up { color: var(--verde); font-size: 18px; } .placar-mudou .ph-arrow-circle-down { color: var(--alerta); font-size: 18px; }
@media (prefers-reduced-motion: reduce) { .cuca-pista { transition: none; } }
/* mapa da inicial só com o contorno: todas as cidades iguais, sem divisões; a minha cidade em destaque */
.mapa-inicio path { fill: #9fd3ae; stroke: #9fd3ae; stroke-width: .7; }
.mapa-inicio path.minha { fill: var(--sol); stroke: var(--sol); }
.mapa-inicio path.realce { fill: var(--verde-sombra); stroke: var(--verde-sombra); stroke-width: 1; }
.analise-mapa { margin-top: 8px; }
.mapa-inicio path { stroke-width: 1.1; }
.placar-linha .ajuda { align-self: center; }

/* ===== Objetivos de SP (pedido do sócio): ficha de objetivos, não de análise ===== */
#estado.cartao { padding: 16px; }
#estado > .ajuda.canto { top: 12px; right: 12px; }
.obj-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.obj-topo h2 { margin: 0; font-size: 22px; }
.obj-placar { text-align: right; line-height: 1; margin-right: 26px; }
.obj-placar b { display: block; font-size: 38px; font-weight: 900; }
.obj-placar span { font-size: 13px; font-weight: 800; color: var(--suave); }
.obj-placar.pos b { color: var(--verde); } .obj-placar.neg b { color: var(--alerta); }
.obj-trilha { position: relative; height: 14px; border-radius: 999px; background: #efeadc; margin: 26px 34px 18px 6px; }
.obj-trilha > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, #ffd34d, var(--verde)); }
.obj-cuca { position: absolute; top: 50%; width: 40px; transform: translate(-50%, -62%); }
.obj-cuca svg { width: 40px; height: auto; display: block; filter: drop-shadow(1px 3px 3px rgb(90 55 0 / .25)); }
.obj-bandeira { position: absolute; right: -30px; top: 50%; transform: translateY(-70%); font-size: 30px; color: var(--verde); }
.obj-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
@media (max-width: 340px) { .obj-grade { grid-template-columns: 1fr; } }
.obj { position: relative; border-radius: 18px; padding: 12px 12px 14px; border: 2px solid #e8e8e8; box-shadow: 0 4px 0 #e8e8e8; background: #fff; display: flex; flex-direction: column; gap: 4px; min-height: 150px; }
.obj-cab { display: flex; justify-content: space-between; align-items: center; }
.obj-ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #fff; font-size: 19px; box-shadow: 0 3px 0 rgb(0 0 0 / .15); }
.obj-selo { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .3px; padding: 3px 8px; border-radius: 999px; }
.obj-meta { font-weight: 900; font-size: 14px; line-height: 1.25; margin-top: 4px; }
.obj-valor { margin-top: auto; } .obj-valor b { font-size: 24px; font-weight: 900; } .obj-valor small { font-size: 12px; font-weight: 800; color: var(--suave); margin-left: 3px; }
.obj-era { font-size: 12px; font-weight: 700; color: var(--suave); }
.obj-pts { position: absolute; right: 10px; bottom: 10px; font-size: 13px; font-weight: 900; }
.obj-ok { border-color: #bfe5c9; box-shadow: 0 4px 0 #bfe5c9; background: linear-gradient(180deg, #f2fbf4, #fff 70%); }
.obj-ok .obj-selo { background: var(--verde); color: #fff; } .obj-ok .obj-pts { color: var(--verde-sombra); }
.obj-longe { border-color: #f4c9c0; box-shadow: 0 4px 0 #f4c9c0; background: linear-gradient(180deg, #fff4f1, #fff 70%); }
.obj-longe .obj-selo { background: var(--alerta); color: #fff; } .obj-longe .obj-pts { color: var(--alerta); }
.obj-parado .obj-selo { background: #eee; color: var(--suave); } .obj-parado .obj-pts { color: var(--suave); }
#estado .gov-linha { margin-top: 16px; }
.obj-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 340px) { .obj-grade { grid-template-columns: minmax(0, 1fr); } }
.obj { min-width: 0; }
.obj-selo { font-size: 10px; padding: 3px 7px; letter-spacing: .2px; white-space: nowrap; }
.obj-meta { overflow-wrap: anywhere; }
.obj-pts { right: 9px; }
.obj-pts { position: static; font-size: 16px; font-weight: 900; padding: 2px 10px; border-radius: 999px; background: #f2f2f2; }
.obj-ok .obj-pts { background: var(--verde-claro); } .obj-longe .obj-pts { background: var(--alerta-claro); }
.obj-selo { align-self: flex-start; margin-top: 6px; }
.obj { min-height: 0; }

/* "Como está SP" no Mapa com tchan: três cartões grandes e os cartões de fora do padrão */
.sub-titulo { margin: -6px 0 10px; font-size: 14px; }
.tres-cartoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cartao-num { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 12px 6px 14px; border-radius: 18px; color: var(--texto);
  border: 2px solid var(--borda); box-shadow: 0 4px 0 var(--borda); transition: transform .12s var(--mola); }
.cartao-num:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--borda); }
.cartao-num b { font-size: 30px; font-weight: 900; line-height: 1.05; }
.cartao-num > span:last-child { font-size: 12px; font-weight: 800; color: var(--suave); }
.cn-ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 20px; box-shadow: 0 3px 0 rgb(0 0 0 / .15); margin-bottom: 4px; }
.c-acima { border-color: #bfe5c9; box-shadow: 0 4px 0 #bfe5c9; background: linear-gradient(180deg, #f0faf3, #fff); } .c-acima .cn-ic { background: #3fae6a; } .c-acima b { color: var(--verde-sombra); }
.c-parecido { background: linear-gradient(180deg, #faf8f1, #fff); } .c-parecido .cn-ic { background: #c9bf9f; }
.c-abaixo { border-color: #f4c9c0; box-shadow: 0 4px 0 #f4c9c0; background: linear-gradient(180deg, #fff3f0, #fff); } .c-abaixo .cn-ic { background: #e0705a; } .c-abaixo b { color: var(--alerta); }
.nota-analise { display: flex; gap: 6px; align-items: flex-start; }
.nota-analise i { font-size: 16px; flex: none; margin-top: 1px; }
.analise-mapa .cartao-gasto { margin-bottom: 10px; text-decoration: none; }
.cartao-sinal-mini { background: color-mix(in srgb, var(--cf) 14%, #fff); border-color: color-mix(in srgb, var(--cf) 45%, #fff); }
.cartao-sinal-mini .ic-alerta { background-color: var(--cf); }

/* 10 objetivos em ícones na inicial */
.obj-mini { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px 4px; margin: 14px 0 6px; }
.om { display: flex; flex-direction: column; align-items: center; gap: 5px; text-decoration: none; color: var(--texto); }
.om-ic { position: relative; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; color: #fff; background: var(--c);
  box-shadow: 0 4px 0 rgb(0 0 0 / .14); transition: transform .15s var(--mola); }
.om:active .om-ic { transform: scale(.92); }
.om-parado .om-ic { filter: saturate(.35) brightness(1.08); }
.om-longe .om-ic { filter: saturate(.5); }
.om-selo { position: absolute; right: -4px; bottom: -4px; width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; color: #fff; border: 2.5px solid #fff; }
.om-ok .om-selo { background: var(--verde); } .om-longe .om-selo { background: var(--alerta); } .om-parado .om-selo { background: #b9b9b9; }
.om-nome { font-size: 11px; font-weight: 800; line-height: 1.15; text-align: center; color: var(--suave); }
.om-ok .om-nome { color: var(--verde-sombra); } .om-longe .om-nome { color: var(--alerta); }
.pl-c { display: inline-flex; align-items: center; gap: 3px; padding: 2px 9px; border-radius: 999px; font-weight: 900; font-size: 14px; align-self: center; }
.pl-c.ok { background: var(--verde-claro); color: var(--verde-sombra); } .pl-c.longe { background: var(--alerta-claro); color: var(--alerta); } .pl-c.parado { background: #f0f0f0; color: var(--suave); }
.placar-linha { align-items: center; gap: 8px; } .placar-linha > span:nth-child(2) { margin-right: 4px; }

/* barras cidade × estado com nome e número; a da cidade na cor do resultado */
.r-barras2 { display: flex; flex-direction: column; gap: 5px; margin: 8px 0 6px; }
.r-bl { display: grid; grid-template-columns: 52px 1fr 40px; align-items: center; gap: 8px; }
.r-quem { font-size: 12px; font-weight: 800; color: var(--suave); }
.r-tr { height: 10px; border-radius: 999px; background: #f1f1f1; overflow: hidden; }
.r-tr .r-b { display: block; height: 100%; border-radius: 999px; margin: 0; }
.r-bl b { font-size: 13px; text-align: right; }
.r-b.cidade.melhor { background: var(--verde); } .r-b.cidade.pior { background: var(--alerta); } .r-b.cidade.igual { background: #9aa3b5; }
.r-b.estado { background: #c9ccd3; }
.r-sentido { font-size: 12px; font-weight: 800; color: var(--suave); display: inline-flex; align-items: center; gap: 3px; }

/* 0.6.13: corrida melhor. A Cuca sai do começo, levanta poeira, dá um pulinho na chegada; a bandeira tremula */
.cuca-pista { transition: left var(--dur, 1.9s) cubic-bezier(.3, .1, .25, 1); }
.estrada.volta .cuca-pista .cuca-corpo { transform: scaleX(-1); }
.estrada .poeira { position: absolute; bottom: 12px; left: calc(var(--pos) * (100% - 66px - 62px) - 6px); width: 30px; height: 20px; pointer-events: none; transition: left var(--dur, 1.9s) cubic-bezier(.3, .1, .25, 1); opacity: 0; }
.estrada.andando .poeira { opacity: 1; }
.estrada .poeira i { position: absolute; bottom: 0; width: 10px; height: 10px; border-radius: 50%; background: #e6dcc4; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .estrada.andando .poeira i { animation: poeira .5s ease-out infinite; }
  .estrada.andando .poeira i:nth-child(2) { animation-delay: .17s; left: 8px; }
  .estrada.andando .poeira i:nth-child(3) { animation-delay: .34s; left: 16px; }
  .estrada.chegou .cuca-pista .cuca-corpo { animation: chegada .55s var(--mola) 1; }
  .estrada.chegou .pano-fim, .estrada.venceu .pano-fim { animation: tremula 1.2s ease-in-out 3; }
  .estrada.venceu .pano-fim { background: var(--amarelo); color: var(--amarelo-texto); }
  @keyframes poeira { 0% { transform: translate(0, 0) scale(.4); opacity: .9; } 100% { transform: translate(-16px, -12px) scale(1.4); opacity: 0; } }
  @keyframes chegada { 0% { transform: translateY(0); } 35% { transform: translateY(-16px) scale(1.04, .96); } 70% { transform: translateY(0) scale(1.06, .92); } 100% { transform: none; } }
}

/* Pílulas de filtro dos alertas (pedido do sócio: minimalista). --ca = cor da gravidade */
.chips-alerta { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 14px; padding-right: 30px; }
.chips-alerta > .ajuda.canto { top: 6px; right: 0; }
.chip-alerta { display: inline-flex; align-items: center; gap: 6px; border: 2px solid color-mix(in srgb, var(--ca) 55%, #fff); background: color-mix(in srgb, var(--ca) 13%, #fff);
  color: color-mix(in srgb, var(--ca) 65%, #2a1400); border-radius: 999px; padding: 7px 14px 7px 8px; font: inherit; font-weight: 800; font-size: 14px; cursor: pointer;
  box-shadow: 0 3px 0 color-mix(in srgb, var(--ca) 40%, #fff); transition: transform .12s var(--mola); }
.chip-alerta > i:first-child { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--ca); color: #fff; font-size: 15px; }
.chip-alerta b { font-size: 17px; font-weight: 900; }
.chip-alerta:active { transform: translateY(2px); box-shadow: none; }
.chip-alerta[aria-pressed="true"] { background: var(--ca); color: #fff; border-color: var(--ca); }
.chip-alerta[aria-pressed="true"] > i:first-child { background: #fff; color: var(--ca); }
.chip-alerta .fecha { font-size: 14px; margin-left: 2px; }
.selo-risco { background: var(--ca) !important; color: #fff !important; text-shadow: 0 1px 0 rgb(0 0 0 / .18); }

/* HUD limpo do ranking: lupa no topo; busca e filtros abrem ao tocar; partes atrás da setinha */
.botao-lupa { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--borda); background: #fff; color: var(--azul); font-size: 20px;
  display: grid; place-items: center; cursor: pointer; box-shadow: 0 3px 0 var(--borda); }
.botao-lupa.ativa { background: var(--azul-claro); border-color: var(--azul-borda); box-shadow: 0 3px 0 var(--azul-borda); }
.topo-rank h1 { flex: 1; }
.area-chip .setinha { font-size: 13px; margin-left: 2px; transition: transform .2s; }
.area-chip[aria-expanded="true"] .setinha { transform: rotate(180deg); }
.area-chip .parte-escolhida { font-weight: 800; opacity: .85; }
/* menu redondo do mandato */
.sel-redondo { position: relative; flex: none; }
.sel-redondo > select { display: none; }
.sel-botao { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 7px 14px; border-radius: 999px; border: 2px solid var(--borda); background: #fff;
  font: inherit; font-weight: 900; font-size: 15px; color: var(--texto); cursor: pointer; box-shadow: 0 3px 0 var(--borda); }
.sel-botao i { color: var(--azul); }
.sel-menu { position: absolute; z-index: 60; top: calc(100% + 8px); left: 0; min-width: 100%; padding: 6px; border-radius: 22px; background: #fff;
  border: 2px solid var(--borda); box-shadow: 0 10px 24px rgb(0 0 0 / .12); display: flex; flex-direction: column; gap: 2px; }
.sel-opcao { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border: 0; background: none; border-radius: 999px; font: inherit; font-weight: 800; font-size: 15px;
  color: var(--texto); cursor: pointer; white-space: nowrap; text-align: left; }
.sel-opcao:hover { background: #f4f4f4; }
.sel-opcao[aria-selected="true"] { background: var(--azul-claro); color: var(--azul); }
.sel-opcao .ph-dot { opacity: 0; }
.topo-rank .botao-lupa { order: 99; margin-left: auto; }
.topo-rank .sel-redondo { order: -1; }
.topo-rank .voltar { order: -2; }

/* Cuca parada na estrada (pedido do sócio: "idle movements, like yawning or stretching"): pisca, mexe as orelhas, se espreguiça e boceja */
.cuca-corpo .bocejo { opacity: 0; transform-box: fill-box; transform-origin: 50% 0; transform: scale(.3); }
@media (prefers-reduced-motion: no-preference) {
  .estrada.chegou:not(.andando) .cuca-corpo .perna, .estrada.chegou:not(.andando) .cuca-corpo .sombra-chao { animation: none; }
  .estrada.chegou:not(.andando) .cuca-corpo .corre { animation: cuca-ocioso 14s ease-in-out 1.2s infinite; transform-box: fill-box; transform-origin: 50% 100%; }
  .estrada.chegou:not(.andando) .cuca-corpo .braco.e { animation: cuca-braco-e 14s ease-in-out 1.2s infinite; transform-box: fill-box; transform-origin: 100% 0; }
  .estrada.chegou:not(.andando) .cuca-corpo .braco.d { animation: cuca-braco-d 14s ease-in-out 1.2s infinite; transform-box: fill-box; transform-origin: 0 0; }
  .estrada.chegou:not(.andando) .cuca-corpo .olhos { animation: cuca-olhos 14s linear 1.2s infinite; transform-box: fill-box; transform-origin: 50% 50%; }
  .estrada.chegou:not(.andando) .cuca-corpo .lobo-cabeca { animation: cuca-cabeca 14s ease-in-out 1.2s infinite; transform-box: fill-box; transform-origin: 50% 90%; }
  .estrada.chegou:not(.andando) .cuca-corpo .bocejo { animation: cuca-bocejo 14s ease-in-out 1.2s infinite; }
  .estrada.chegou:not(.andando) .cuca-corpo .boca { animation: cuca-boca 14s ease-in-out 1.2s infinite; }
  .estrada.chegou:not(.andando) .cuca-corpo .orelha.e { animation: cuca-orelha 6.3s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
  .estrada.chegou:not(.andando) .cuca-corpo .orelha.d { animation: cuca-orelha 6.3s ease-in-out .3s infinite; transform-box: fill-box; transform-origin: 50% 100%; }
  @keyframes cuca-ocioso { 0%, 30%, 52%, 80%, 100% { transform: none; } 12%, 20% { transform: translateY(-1px); } 36%, 46% { transform: translateY(-5px) scaleY(1.04); } 62%, 74% { transform: translateY(-1px); } }
  @keyframes cuca-braco-e { 0%, 30%, 52%, 100% { transform: none; } 36%, 46% { transform: rotate(112deg) scale(1.12); } }
  @keyframes cuca-braco-d { 0%, 30%, 52%, 100% { transform: none; } 36%, 46% { transform: rotate(-112deg) scale(1.12); } }
  @keyframes cuca-olhos { 0%, 9%, 11%, 24%, 26%, 58%, 76%, 86%, 88%, 100% { transform: none; } 10%, 25%, 62%, 72%, 87% { transform: scaleY(.1); } }
  @keyframes cuca-cabeca { 0%, 30%, 52%, 58%, 78%, 100% { transform: none; } 36%, 46% { transform: translateY(-2px); } 63%, 72% { transform: rotate(-7deg) translateY(-2px); } }
  @keyframes cuca-bocejo { 0%, 58%, 78%, 100% { opacity: 0; transform: scale(.3); } 63% { opacity: 1; transform: scale(1); } 70% { opacity: 1; transform: scale(1.25, 1.4); } 75% { opacity: 1; transform: scale(.8); } }
  @keyframes cuca-boca { 0%, 58%, 78%, 100% { opacity: 1; } 62%, 75% { opacity: 0; } }
  @keyframes cuca-orelha { 0%, 82%, 100% { transform: none; } 87% { transform: rotate(-9deg); } 92% { transform: rotate(5deg); } }
}

/* ===== Avisos (protótipo): perfil opcional e página de avisos com a Cuca ===== */
.badge-avisos { position: absolute; top: 2px; right: calc(50% - 22px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--alerta); color: #fff;
  font-size: 11px; font-weight: 900; display: grid; place-items: center; border: 2px solid #fff; }
.nav-item { position: relative; }
.form-perfil h2 { font-size: 20px; margin: 0 0 6px; display: flex; align-items: center; gap: 8px; } .form-perfil h2 small { font-size: 12px; color: var(--suave); font-weight: 800; }
.form-perfil h2 i { color: var(--sol); }
.form-perfil { margin-top: 14px; }
.campo > span small { color: var(--suave); font-weight: 800; }
.chips-perfil { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-perfil { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; border: 2px solid var(--borda); background: #fff; font: inherit; font-weight: 800;
  font-size: 14px; color: var(--texto); cursor: pointer; box-shadow: 0 3px 0 var(--borda); transition: transform .12s var(--mola); }
.chip-perfil i { color: var(--azul); font-size: 17px; }
.chip-perfil[aria-pressed="true"] { background: var(--azul); border-color: var(--azul); color: #fff; box-shadow: 0 3px 0 var(--azul-sombra); }
.chip-perfil[aria-pressed="true"] i { color: #fff; }
.chip-perfil:active { transform: translateY(2px); box-shadow: none; }
.regiao-auto { margin: 8px 0 0; font-size: 14px; color: var(--suave); font-weight: 700; }
.titulo-avisos { display: flex; align-items: center; gap: 8px; font-size: 19px; margin: 20px 0 10px; } .titulo-avisos i { color: var(--sol); }
.titulo-avisos small { background: #f0f0f0; color: var(--suave); border-radius: 999px; padding: 1px 9px; font-size: 13px; }
.aviso-card { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 18px; border: 2px solid var(--borda); box-shadow: 0 4px 0 var(--borda);
  background: #fff; margin: 0 0 10px; color: var(--texto); text-decoration: none; }
.av-ic { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 21px; background: var(--azul); box-shadow: 0 3px 0 rgb(0 0 0 / .14); }
.aviso-fora { background: color-mix(in srgb, var(--ca) 12%, #fff); border-color: color-mix(in srgb, var(--ca) 45%, #fff); box-shadow: 0 4px 0 color-mix(in srgb, var(--ca) 35%, #fff); }
.aviso-fora .av-ic { background: var(--ca); }
.av-meio { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.av-meio b { font-size: 15px; line-height: 1.3; }
.av-meio > span:not(.av-motivos):not(.av-data) { font-size: 14px; color: var(--suave); font-weight: 700; }
.av-data { font-size: 12px; font-weight: 800; color: var(--suave); }
.av-motivos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.av-motivo { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: var(--azul-claro); color: var(--azul); }
.av-novo { position: absolute; top: -8px; right: 12px; background: var(--sol); color: #fff; font-size: 11px; font-weight: 900; text-transform: uppercase; padding: 2px 9px; border-radius: 999px; box-shadow: 0 2px 0 var(--sol-sombra); }
.pagina-avisos .mascote-cadastro .cuca-corpo, .pagina-avisos .mascote-cadastro .cuca-corpo * { animation: none !important; }

.ok-cpf { color: var(--verde-sombra); font-weight: 800; font-size: 14px; margin: 6px 0 0; display: flex; align-items: center; gap: 5px; }
.campo input.valido { border-color: var(--verde); }
.bloqueio-perfil { display: flex; gap: 12px; align-items: center; margin-top: 14px; background: #fafafa; }
.bloqueio-perfil i { font-size: 30px; color: var(--suave); flex: none; }
.teste-notif { margin: 18px 0 0; }

/* convite para instalar o app (de graça, sem loja) */
.convite-instalar { position: relative; display: flex; gap: 12px; align-items: center; margin: 4px 0 14px; padding: 12px 40px 12px 12px; border-radius: 18px;
  background: linear-gradient(135deg, #fff7e0, #fff); border: 2px solid #f6dc93; box-shadow: 0 4px 0 #f6dc93; }
.ci-cuca { width: 52px; flex: none; } .ci-cuca svg { width: 52px; height: auto; display: block; }
.ci-texto { display: flex; flex-direction: column; gap: 4px; font-size: 14px; } .ci-texto b { font-size: 15px; }
.ci-texto span i { font-size: 16px; color: var(--azul); vertical-align: -2px; }
.ci-texto .botao-instalar { align-self: flex-start; margin-top: 4px; }
.ci-fechar { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgb(0 0 0 / .05); color: var(--suave); cursor: pointer; display: grid; place-items: center; }
/* dentro do app instalado, respeita o recorte da tela do iPhone */
@media (display-mode: standalone) { body { padding-top: env(safe-area-inset-top); } }

.nao-e-dado { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 14px; background: var(--verde-claro); color: var(--verde-sombra); font-size: 14px; margin: 4px 0 6px; }
.nao-e-dado i { font-size: 24px; flex: none; }

.lista-detalhe .detalhe-caso { font-size: 13px; color: #6a5a48; font-weight: 700; margin-top: 2px; }
.lista-detalhe .ressalva-caso { font-size: 12.5px; color: var(--suave); margin-top: 3px; display: flex; gap: 4px; } .ressalva-caso i { flex: none; margin-top: 2px; }
.selos-linha { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.selos-linha .selo-gasto { margin-top: 6px; }
.faixa-eleitos { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 18px; margin: 0 0 12px; background: linear-gradient(135deg, #eef2fc, #fff); border: 2px solid var(--azul-borda); box-shadow: 0 4px 0 var(--azul-borda); }
.faixa-eleitos i { font-size: 30px; color: var(--azul); } .faixa-eleitos b { display: block; font-size: 16px; } .faixa-eleitos span { font-size: 13px; color: var(--suave); font-weight: 700; }

/* eleitos 2026: nota da legislatura anterior para quem foi reeleito */
.nota-anterior { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 11px; font-weight: 800; color: var(--suave); }
.pontos.mini { font-size: 13px; padding: 2px 8px; min-width: 0; box-shadow: 0 2px 0 var(--s); } .pontos.mini small { display: none; }
.nota-anterior { white-space: nowrap; } .nota-anterior small { font-size: 11px; font-weight: 800; color: var(--suave); }

/* ===== Ficha do governador (sem pontos): áreas como nas cidades, objetivos com barras ano a ano ===== */
.cartao-gov { background: linear-gradient(135deg, #eef2fc, #fff); border-color: var(--azul-borda); color: var(--marinho); text-decoration: none; margin-bottom: 14px; }
.cartao-gov .ic-alerta { background-color: var(--azul); } .cartao-gov .sub { color: var(--suave); } .cartao-gov .seta { color: var(--azul); }
.gov-topo { margin: 4px 0 8px; }
.gov-pessoa { display: flex; gap: 14px; align-items: center; }
.gov-foto { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 4px 12px rgb(0 0 0 / .15); }
.gov-pessoa h2 { margin: 0; font-size: 24px; }
.selo-reeleito { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; padding: 3px 10px; border-radius: 999px; background: var(--amarelo); color: var(--amarelo-texto); font-size: 12px; font-weight: 900; }
.gov-placar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px 0 6px; }
.gov-legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; font-weight: 800; color: var(--suave); }
.gov-legenda i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 5px; vertical-align: -1px; }
.area-gov { margin: 22px 0 0; } .area-gov .area-cab h2 { margin: 0; font-size: 20px; }
.nota-area { font-size: 13px; margin: 4px 0 10px; }
.gov-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 761px) { .gov-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gov-obj .obj-cab { align-items: flex-start; gap: 8px; } .gov-obj .obj-meta { margin: 0; }
.gov-comp { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--suave); font-weight: 700; margin-top: 6px; }
.gov-comp b { color: var(--texto); font-size: 18px; } .gov-comp i { font-size: 12px; }
.barras-ano { position: relative; display: flex; align-items: flex-end; gap: 6px; height: 120px; margin-top: 12px; padding-top: 16px; }
.barras-ano .ba { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.barras-ano .ba i { display: block; width: 100%; height: var(--h); border-radius: 8px 8px 3px 3px; background: var(--c); }
.barras-ano .ba b { font-size: 10px; font-weight: 900; color: var(--suave); margin-bottom: 3px; white-space: nowrap; }
.barras-ano .ba.atual b { color: var(--texto); }
.barras-ano .ba small { font-size: 11px; font-weight: 800; color: var(--suave); margin-top: 4px; }
.linha-minimo { position: absolute; left: 0; right: 0; border-top: 2px dashed var(--alerta); z-index: 1; margin-bottom: 19px; }
.linha-minimo span { position: absolute; right: 0; top: -16px; font-size: 10px; font-weight: 900; color: var(--alerta); background: #fff; padding: 0 4px; }
.san-gov { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.san-item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px; border-radius: 16px; border: 2px solid var(--borda); box-shadow: 0 3px 0 var(--borda); }
.san-item i { font-size: 24px; color: var(--ceu-forte); } .san-item b { font-size: 20px; } .san-item span { font-size: 12px; font-weight: 800; color: var(--suave); text-align: center; }
.san-gov small { grid-column: 1 / -1; font-size: 12px; color: var(--suave); font-weight: 700; }

/* ---------- 0.6.15-0.6.17: sujeito do sinal, todas as fontes, direito de resposta, filtros (METODOLOGIA 20 e 21) ---------- */
.rotulo-sujeito { font-size: 12px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: color-mix(in srgb, var(--cf, #a36a00) 55%, #4a3a2a); margin: 0 0 4px; padding-right: 34px; }
.acoes-sinal { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.botao-fontes, .botao-resposta { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 8px 14px; border-radius: 999px; font: inherit; font-size: 13.5px; font-weight: 900; cursor: pointer; text-decoration: none; line-height: 1.25; }
.botao-fontes { background: #fff; color: color-mix(in srgb, var(--cf, var(--azul)) 70%, #1e1408); border: 2px solid color-mix(in srgb, var(--cf, var(--azul)) 55%, #fff); box-shadow: 0 3px 0 color-mix(in srgb, var(--cf, var(--azul)) 35%, #fff); }
.botao-fontes:active { transform: translateY(2px); box-shadow: none; }
.botao-resposta { background: transparent; color: var(--suave); border: 1.5px dashed #cfcfcf; font-weight: 800; }
.botao-resposta:hover, .botao-fontes:hover { filter: brightness(.97); }
.alerta-gasto .botao-fontes { margin-top: 12px; --cf: var(--alerta); }
.lista-fontes { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.lista-fontes > li { padding: 10px 12px; border-radius: 12px; background: #fafaf7; border: 1.5px solid #efeee8; overflow-wrap: anywhere; }
.fonte-desc { margin-top: 4px; font-size: 13px; color: var(--texto); }
.fonte-arq { margin-top: 4px; font-size: 12.5px; color: var(--suave); }
.fonte-arq a, .lista-fontes a, .fonte a, .detalhe-caso a { color: var(--azul); font-weight: 800; text-decoration: none; }
.fonte a i, .detalhe-caso a i, .fonte-arq a i { font-size: .9em; vertical-align: -1px; }
.caso-fontes { margin: 10px 0 0; border-radius: 14px; border: 2px solid #efe9da; background: #fff; }
.caso-fontes > summary { list-style: none; cursor: pointer; padding: 12px 40px 12px 14px; position: relative; font-size: 14.5px; line-height: 1.35; }
.caso-fontes > summary::-webkit-details-marker { display: none; }
.caso-fontes > summary::after { content: "+"; position: absolute; right: 14px; top: 10px; width: 22px; height: 22px; border-radius: 50%; background: #f3efe4; display: grid; place-items: center; font-weight: 900; color: #8a6a20; }
.caso-fontes[open] > summary::after { content: "−"; }
.caso-fontes > .lista-fontes, .caso-fontes > .gasto-tipos, .caso-fontes > .fontes-mini { margin: 0 12px 12px; }
.fontes-mini > summary { cursor: pointer; font-weight: 900; font-size: 13.5px; color: var(--azul); margin-top: 8px; }
.gasto-tipos { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.lista-casos { margin-top: 6px; }
.resposta-oficial { margin: 12px 0 0; padding: 12px; border-radius: 14px; background: var(--azul-claro); border: 2px solid var(--azul-borda); font-size: 14px; }
.resposta-oficial b { color: var(--azul-sombra); }
.resposta-oficial p { margin: 4px 0 6px; }
.tce-parecer blockquote cite { display: block; margin-top: 4px; font-style: normal; font-size: 12px; color: var(--suave); }
/* lista filtrada por um sinal: a prefeitura no mandato, sem a foto do prefeito */
.linha-rank.linha-sinal { grid-template-columns: 44px 1fr auto; border-left: 5px solid var(--ca); }
.ic-sinal { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--ca); color: #fff; font-size: 20px; box-shadow: 0 3px 0 color-mix(in srgb, var(--ca) 70%, #000); }
.valor-sinal { font-weight: 900; font-size: 16px; color: color-mix(in srgb, var(--ca) 75%, #2a1400); white-space: nowrap; }
@media (max-width: 760px) { .linha-rank.linha-sinal { grid-template-columns: 38px 1fr auto; } .ic-sinal { width: 34px; height: 34px; font-size: 17px; } .valor-sinal { font-size: 14px; } }
/* página de correções e respostas */
.passos-correcao { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.passos-correcao li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.passos-correcao i { font-size: 26px; color: var(--azul); flex: none; }
.origem-pedido { display: flex; gap: 8px; align-items: center; margin: 4px 0 0; padding: 10px 12px; border-radius: 12px; background: #fff6e0; font-size: 14px; }
.origem-pedido i { color: #b88600; font-size: 20px; }
.cartao-sinais.forte .rotulo-sujeito { color: #8a4a10; }
/* filtro de sinais das prefeituras: um botão "Fora do padrão" que abre o menu (pedido do sócio: topo enxuto) */
.chips-alerta { position: relative; align-items: center; }
.chip-alerta .setinha { font-size: 13px; margin-left: 2px; opacity: .8; }
.chip-sinais { background: #fff; }
.chip-limpar { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--borda); background: #fff; color: var(--suave); display: grid; place-items: center; cursor: pointer; font-size: 15px; box-shadow: 0 3px 0 var(--borda); }
.menu-sinais { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; width: min(360px, calc(100vw - 32px)); padding: 8px; border-radius: 20px; background: #fff;
  box-shadow: 0 6px 0 rgb(0 0 0 / .05), 0 18px 40px rgb(0 0 0 / .16); display: flex; flex-direction: column; gap: 4px; animation: menu-entra .18s var(--mola, ease-out); }
.menu-sinais[hidden] { display: none; }
@keyframes menu-entra { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.op-sinal { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 14px; background: transparent;
  font: inherit; font-weight: 800; font-size: 14.5px; color: var(--texto); text-align: left; cursor: pointer; }
.op-sinal:hover, .op-sinal[aria-checked="true"] { background: color-mix(in srgb, var(--ca) 12%, #fff); }
.op-sinal > i { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--ca); color: #fff; font-size: 17px; }
.op-sinal b { font-size: 16px; font-weight: 900; color: color-mix(in srgb, var(--ca) 75%, #2a1400); }
/* aviso legal curto nas listas filtradas (o texto longo fica no "?") e os outros sinais só em ícones */
.aviso-curto { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; padding: 8px 12px; border-radius: 999px; background: #fff6e0; color: #5c4100; font-size: 13.5px; font-weight: 900; width: fit-content; max-width: 100%; }
.aviso-curto i { font-size: 18px; color: #b88600; flex: none; }
.outros-sinais { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 12px; font-weight: 800; color: var(--suave); }
.outros-sinais i { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--ca); color: #fff; font-size: 12px; }
/* possível duplicidade no arquivo oficial do governo (0.6.18): informada, nunca tirada da conta */
.aviso-repetido { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; padding: 8px 12px; border-radius: 12px; background: #eef2fc; color: #26386f; font-size: 13.5px; }
.aviso-repetido i, .marca-repetido i { color: var(--azul); flex: none; margin-top: 2px; }
.marca-repetido { display: flex; gap: 6px; margin-top: 4px; font-size: 12.5px; font-weight: 800; color: var(--azul-sombra); }
.lista-fontes > li.repetido { border-color: var(--azul-borda); background: var(--azul-claro); }
.nivel-sinal { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: baseline; margin: 10px 0 0; font-size: 13.5px; }
.tag-nivel { display: inline-block; padding: 2px 10px; border-radius: 999px; background: #fff; border: 1.5px solid color-mix(in srgb, var(--cf, #e0a800) 60%, #fff); font-weight: 900; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: color-mix(in srgb, var(--cf, #a36a00) 70%, #2a1400); }
.contribuicao { margin: 14px 0 0; text-align: left; }
.contribuicao > summary { cursor: pointer; font-weight: 900; color: var(--azul); display: inline-flex; gap: 6px; align-items: center; }
.contrib-lista { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.contrib-linha { display: grid; grid-template-columns: minmax(130px, 1.2fr) 1fr 56px; gap: 10px; align-items: center; font-size: 14px; }
.contrib-linha .c-nome { display: flex; align-items: center; gap: 6px; font-weight: 800; }
.contrib-linha .c-nome i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.contrib-linha .c-nome small { color: var(--suave); font-weight: 700; }
.contrib-linha .c-barra { height: 10px; border-radius: 999px; background: var(--trilho); position: relative; overflow: hidden; }
.contrib-linha .c-barra span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--c); }
.contrib-linha .c-barra span.neg { background: var(--alerta); }
.contrib-linha b { text-align: right; font-weight: 900; }
.contrib-linha b.neg { color: var(--alerta); }
.contrib-linha.desc .c-nome { color: var(--suave); }
@media (max-width: 760px) { .contrib-linha { grid-template-columns: 1fr 70px 48px; } }
/* página da cidade: resumo dos sinais em linhas (os cartões completos ficam na ficha do mandato) */
.resumo-sinais { display: flex; flex-direction: column; gap: 8px; margin: 0 0 18px; }
.resumo-sinais .rotulo-sujeito { color: #8a4a10; margin-bottom: 0; }
.resumo-sinais .aviso-curto { margin: 2px 0 0; font-size: 12.5px; font-weight: 800; }
.marca-repetido.forte { color: #8a2a1a; } .marca-repetido.forte i { color: var(--alerta); }

/* ---------- Sudeste (método 0.7.0, seção 22): seletor de estado, mapa da região e "em preparação" ---------- */
.bolinha-uf { width: 14px; height: 14px; border-radius: 50%; flex: none; background: var(--c); box-shadow: inset 0 0 0 2px rgb(0 0 0 / .14); }
.sel-opcao .bolinha-uf { width: 12px; height: 12px; }
.seletor-uf .sel-botao { gap: 6px; padding: 7px 12px; }
.seletor-uf .sel-menu { min-width: 210px; }
/* quadro do mapa: a região e, por cima, o estado escolhido no mesmo enquadramento */
.sudeste { padding: 0; }
.sudeste .palco { position: relative; height: 320px; transition: height .5s cubic-bezier(.3, .7, .2, 1); }
.sudeste .palco.sem-transicao, .sudeste .palco.sem-transicao * { transition: none !important; }
.sudeste .palco > svg.regiao, .sudeste .camada-uf, .sudeste .camada-uf > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sudeste svg.regiao { overflow: visible; filter: none; transition: opacity .3s; }
.sudeste .uf-g { cursor: pointer; outline: none; transition: opacity .4s, transform .25s var(--mola); transform-box: fill-box; transform-origin: 50% 60%; }
.sudeste .uf-forma { fill: var(--c); stroke: #fff; stroke-width: 3; vector-effect: non-scaling-stroke; stroke-linejoin: round; transition: filter .2s; }
.sudeste .uf-g.prep .uf-forma { fill-opacity: .62; stroke-dasharray: none; }
.sudeste .uf-g:hover .uf-forma, .sudeste .uf-g:focus-visible .uf-forma { filter: saturate(1.25) drop-shadow(0 6px 0 rgb(0 0 0 / .14)); }
.sudeste .uf-g:hover, .sudeste .uf-g:focus-visible { transform: translateY(-8px); }
.sudeste .uf-g:focus-visible .uf-forma { stroke: var(--t); stroke-width: 3; }
.sudeste .uf-sigla { font: 900 48px "Nunito", system-ui, sans-serif; fill: var(--t); text-anchor: middle; dominant-baseline: middle; pointer-events: none;
  paint-order: stroke; stroke: rgb(255 255 255 / .7); stroke-width: 8px; stroke-linejoin: round; transition: opacity .25s; }
.sudeste .uf-breve { font: 800 25px "Nunito", system-ui, sans-serif; fill: var(--t); text-anchor: middle; dominant-baseline: middle; pointer-events: none;
  paint-order: stroke; stroke: rgb(255 255 255 / .75); stroke-width: 6px; transition: opacity .25s; }
.sudeste .palco.abrindo .uf-g { transform: none; cursor: default; }
.sudeste .palco.abrindo .uf-g:not(.escolhido) { opacity: 0; pointer-events: none; }
.sudeste .palco.abrindo .uf-sigla, .sudeste .palco.abrindo .uf-breve { opacity: 0; }
.sudeste .palco.abrindo .uf-g .uf-forma { filter: none; }
.sudeste .camada-uf { opacity: 0; pointer-events: none; transition: opacity .35s; }
.sudeste .palco.aberto .camada-uf { opacity: 1; pointer-events: auto; }
.sudeste .palco.aberto svg.regiao { opacity: 0; pointer-events: none; transition: opacity .35s 1.1s; }  /* some depois que as cidades entram */
.sudeste .camada-uf > svg { height: 100%; }
.barra-uf { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; }
.barra-uf .nome-uf { display: inline-flex; align-items: center; gap: 8px; font-weight: 900; font-size: 17px; }
.volta-regiao { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 5px 14px 5px 11px;
  border-radius: 999px; border: 2px solid var(--borda); background: #fff; font: inherit; font-weight: 900; font-size: 14px; color: var(--texto); cursor: pointer; box-shadow: 0 3px 0 var(--borda); }
.volta-regiao i { color: var(--azul); }
.volta-regiao:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--borda); }
@media (prefers-reduced-motion: no-preference) {
  .sudeste.visivel .uf-forma { animation: surge .5s calc(var(--i) * 110ms) both; }
  .sudeste .camada-uf path { animation: surge .45s calc(var(--d, 0) * 1ms) both; }
  .barra-uf:not([hidden]) { animation: menu-entra .3s both; }
}
/* home: as cidades do estado com a cor do estado */
.mapa-inicio .sudeste .camada-uf path { fill: var(--cuf, #9fd3ae); stroke: var(--cuf, #9fd3ae); }
.mapa-inicio .sudeste .camada-uf path.minha { fill: var(--sol); stroke: var(--sol); }
.mapa-inicio .sudeste .camada-uf path.realce { fill: var(--tuf, var(--verde-sombra)); stroke: var(--tuf, var(--verde-sombra)); }
.titulo-uf { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-weight: 900; font-size: 15px; color: var(--suave); }
.titulo-uf b { color: var(--texto); }
/* estado sem dados publicados */
.em-preparacao { text-align: center; }
.em-preparacao h2 { margin-top: 2px; }
.em-preparacao p { max-width: 460px; margin: 8px auto; }
.em-preparacao .ic-prep { --s: rgb(0 0 0 / .25); width: 64px; height: 64px; font-size: 34px; margin: -30px auto 12px; position: relative; }
.em-preparacao .botoes-prep { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
/* no celular, o topo do Ranking leva estado + mandato + lupa; o título fica só para leitor de tela */
@media (max-width: 480px) {
  .topo-rank.com-uf h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .topo-rank.com-uf { gap: 8px; }
}
.sudeste .uf-forma, .sudeste .camada-uf path { transform-box: fill-box; transform-origin: center; }
.sudeste .camada-uf svg.assentado path { animation: none; }
.prep-curto { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 2px solid var(--borda); border-radius: 18px; font-size: 15px; color: var(--suave); }
.prep-curto b { color: var(--texto); }
.titulo-uf .bolinha-uf { width: 12px; height: 12px; }
.cartao.sem-borda { border: 0; padding: 0; box-shadow: none; background: none; }
#ufs-exclusoes { margin: 0 0 12px; }
/* caminhos longos no texto do método quebram a linha no celular, sem empurrar a página para o lado */
.texto code { overflow-wrap: anywhere; }
/* "Minha cidade" sem cidade guardada: escolher ali mesmo (pedido do sócio) */
.cidade-opcao .sigla-uf { margin-left: auto; padding: 2px 9px; border-radius: 999px; background: #f2f2f2; color: var(--suave); font-size: 12px; font-weight: 900; }
.escolher-cidade .busca { margin: 16px 0 6px; }
.escolher-cidade .nota-estados { margin: 12px 0 0; font-size: 14px; }
@media (max-width: 760px) { .nav-item span { text-align: center; line-height: 1.15; } }

/* Pódio (pedido do sócio): a foto não cobre mais o número; com foto, a medalha vira um selo no canto da foto. As três colunas cabem no celular. */
.podio > .degrau { min-width: 0; }
.degrau .retrato { margin: 0 auto; }
.degrau .retrato + .sol-medalha { width: 32px; height: 32px; margin: -30px auto 0; translate: 26px 0; z-index: 2; }
.degrau.p1 .retrato + .sol-medalha { width: 38px; height: 38px; translate: 32px 0; }
.degrau .retrato + .sol-medalha .num { font-size: 15px; }
.degrau.p1 .retrato + .sol-medalha .num { font-size: 18px; }
@media (max-width: 760px) {
  .podio { gap: 6px; }
  .degrau .retrato { width: 60px; height: 60px; }
  .degrau.p1 .retrato { width: 74px; height: 74px; }
  .degrau .retrato + .sol-medalha { translate: 22px 0; }
  .degrau.p1 .retrato + .sol-medalha { translate: 27px 0; }
  .degrau .prefeito { font-size: 11px; overflow-wrap: anywhere; }
}

/* Ficha do prefeito: "Página da cidade" ao lado de "Minha cidade" (pedido do sócio) */
.faixa:has(.botoes-faixa) { flex-wrap: wrap; }
.faixa .botoes-faixa { display: flex; gap: 8px; flex-basis: 100%; position: relative; z-index: 1; }
.faixa .botoes-faixa .botao { justify-content: center; text-decoration: none; font-size: 12px; padding: 7px 12px; gap: 6px; }
.faixa .botoes-faixa > .botao { margin: 0; }

/* Objetivos (pedido do sócio): a Cuca pisa na ponta da barra, centrada no placar; sem a posição e a animação herdadas do lobo da tela inicial */
.obj-cuca { top: auto; bottom: 9px; width: 40px; height: 47px; transform: translateX(-50%); }
.obj-cuca svg.lobo-svg { position: absolute; left: 0; bottom: 0; width: 40px; height: 47px; animation: none; transform: none; }