/* Municípios RS — camada pública.
   Uma coluna no celular; no computador, cartões em duas colunas.
   Marca-texto amarelo é o único gesto forte; azul só em ação; a cidade é sempre a cor escura, a comparação sempre a clara. */
/* Paleta "Serra": cores da bandeira do RS com o tom rebaixado. Verde-azulado é a cor da casa (texto petróleo, ações em verde),
   o amarelo vira ouro-velho no marca-texto, e o vermelho queimado fica só em detalhes (ponto da marca, faixa da pandemia),
   porque aqui vermelho não pode significar "ruim". */
/* Paletas da terra: cores com nome de coisa gaúcha. Charqueada é a padrão; as outras entram por data-paleta no <html>.
   Em todas: verde é a casa (ações), amarelo é marca-texto, vermelho é só detalhe e nunca significa "ruim". */
/* Charqueada é a paleta padrão (raiz); as outras entram por data-paleta no <html> */
:root{
  --bg:#F5F2EA; --surface:#FFFDF8; --ink:#27312A; --ink-soft:#5F685F; --line:#DCD9CF; --track:#ECE8DD; --mark:#E9C75C; --mark-ink:#27312A; --action:#4E7A4A; --action-ink:#FFFFFF; --me:#27312A; --ref:#7E8A72; --off:#D3D6C8; --dot-off:#B8BDAC; --band:rgba(178,78,60,.2); --detail:#B24E3C; --sheet:#141813; --sheet-ink:#EEEDE4; color-scheme:light; --rodape:#27312A;
  --display:"Young Serif",Georgia,serif; --display-peso:400; --display-largura:100%; --body:"Literata",Georgia,serif;
}
/* Tipografia por paleta: cada uma tem a sua dupla (título + texto). Os arquivos de fonte só baixam para a paleta em uso
   (o <head> monta o link do Google Fonts conforme a paleta; app.js carrega a nova ao trocar). Mesma lista em base.html (window.__fontes). */
:root[data-paleta="macela"]{ --display:"Bitter",Georgia,serif; --display-peso:700; --display-largura:100%; --body:"Figtree",Verdana,system-ui,sans-serif; }
:root[data-paleta="mate"]{ --display:"DM Serif Display",Georgia,serif; --display-peso:400; --display-largura:100%; --body:"DM Sans",Verdana,system-ui,sans-serif; }
:root[data-paleta="pampa"]{ --display:"Archivo","Trebuchet MS",system-ui,sans-serif; --display-peso:700; --display-largura:125%; --body:"Archivo",Verdana,system-ui,sans-serif; }
:root[data-paleta="pinhao"]{ --display:"Fraunces",Georgia,"Times New Roman",serif; --display-peso:700; --display-largura:100%; --body:"Atkinson Hyperlegible",Verdana,system-ui,sans-serif; }
:root[data-paleta="serra"]{ --display:"Jost","Trebuchet MS",system-ui,sans-serif; --display-peso:700; --display-largura:100%; --body:"Lora",Georgia,serif; }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#141813; --surface:#1E241C; --ink:#EEEDE4; --ink-soft:#B3B5A6; --line:#353C31; --track:#283026; --mark:#E9C75C; --mark-ink:#27312A; --action:#93C48A; --action-ink:#141813; --me:#EEEDE4; --ref:#99A58E; --off:#3E4839; --dot-off:#525E4C; --band:rgba(220,120,110,.2); --detail:#D98E7E; --sheet:#0B0F0A; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#141813; --surface:#1E241C; --ink:#EEEDE4; --ink-soft:#B3B5A6; --line:#353C31; --track:#283026; --mark:#E9C75C; --mark-ink:#27312A; --action:#93C48A; --action-ink:#141813; --me:#EEEDE4; --ref:#99A58E; --off:#3E4839; --dot-off:#525E4C; --band:rgba(220,120,110,.2); --detail:#D98E7E; --sheet:#0B0F0A; color-scheme:dark;
}
/* Macela (solar): lã crua, verde-mate escuro, ação verde-campo, marca-texto macela viva, detalhe tijolo */
:root[data-paleta="macela"]{ --bg:#F4EFDF; --surface:#FCFAF2; --ink:#2B3326; --ink-soft:#5E6655; --line:#DCD6C2; --track:#EAE5D1; --mark:#F2C94C; --mark-ink:#2B3326; --action:#2E7D4F; --action-ink:#FFFFFF; --me:#2B3326; --ref:#8C8760; --off:#D6D2B8; --dot-off:#BDB89C; --band:rgba(194,87,74,.18); --detail:#C2574A; --sheet:#171B14; --sheet-ink:#EFEAD9; color-scheme:light; --rodape:#2B3326; }
@media (prefers-color-scheme:dark){ :root[data-paleta="macela"]:not([data-theme="light"]){ --bg:#171B14; --surface:#22281D; --ink:#EFEAD9; --ink-soft:#B5B39E; --line:#343B2C; --track:#2B3326; --mark:#F2C94C; --mark-ink:#171B14; --action:#7FD19B; --action-ink:#171B14; --me:#EFEAD9; --ref:#A3A080; --off:#3B4232; --dot-off:#4C5542; --band:rgba(232,146,127,.22); --detail:#E8927F; --sheet:#0C0F0A; color-scheme:dark; } }
:root[data-paleta="macela"][data-theme="dark"]{ --bg:#171B14; --surface:#22281D; --ink:#EFEAD9; --ink-soft:#B5B39E; --line:#343B2C; --track:#2B3326; --mark:#F2C94C; --mark-ink:#171B14; --action:#7FD19B; --action-ink:#171B14; --me:#EFEAD9; --ref:#A3A080; --off:#3B4232; --dot-off:#4C5542; --band:rgba(232,146,127,.22); --detail:#E8927F; --sheet:#0C0F0A; color-scheme:dark; }
/* Erva-mate (mata fechada): fundo campo, texto araucária, ação verde-araucária, marca-texto palha, detalhe vinho */
:root[data-paleta="mate"]{ --bg:#E6EBE4; --surface:#FBFCFA; --ink:#15261F; --ink-soft:#4E6158; --line:#C8D2CA; --track:#DAE3DC; --mark:#DCD36A; --mark-ink:#15261F; --action:#1F4D3A; --action-ink:#FFFFFF; --me:#15261F; --ref:#6F8F7E; --off:#C3D0C7; --dot-off:#A7B8AE; --band:rgba(122,46,59,.18); --detail:#7A2E3B; --sheet:#0E1511; --sheet-ink:#E6EEE8; color-scheme:light; --rodape:#15261F; }
@media (prefers-color-scheme:dark){ :root[data-paleta="mate"]:not([data-theme="light"]){ --bg:#0E1511; --surface:#19231D; --ink:#E6EEE8; --ink-soft:#A4B6AA; --line:#2A3830; --track:#213029; --mark:#DCD36A; --mark-ink:#0E1511; --action:#8FC7AC; --action-ink:#0E1511; --me:#E6EEE8; --ref:#7FA08E; --off:#30413A; --dot-off:#425449; --band:rgba(216,139,160,.22); --detail:#D88BA0; --sheet:#070B08; color-scheme:dark; } }
:root[data-paleta="mate"][data-theme="dark"]{ --bg:#0E1511; --surface:#19231D; --ink:#E6EEE8; --ink-soft:#A4B6AA; --line:#2A3830; --track:#213029; --mark:#DCD36A; --mark-ink:#0E1511; --action:#8FC7AC; --action-ink:#0E1511; --me:#E6EEE8; --ref:#7FA08E; --off:#30413A; --dot-off:#425449; --band:rgba(216,139,160,.22); --detail:#D88BA0; --sheet:#070B08; color-scheme:dark; }
/* Pampa: verde-pinheiro, dourado de trigo, tijolo */
:root[data-paleta="pampa"]{ --bg:#F4F4EF; --surface:#FFFFFF; --ink:#1B2A26; --ink-soft:#566762; --line:#D6DBD6; --track:#E7ECE7; --mark:#F4D778; --mark-ink:#1B2A26; --action:#2F6D52; --action-ink:#FFFFFF; --me:#1B2A26; --ref:#728A7F; --off:#CFD8D2; --dot-off:#B3C0B8; --band:rgba(176,70,60,.22); --detail:#B0463C; --sheet:#0F1715; --sheet-ink:#ECEFEA; color-scheme:light; --rodape:#1B2A26; }
@media (prefers-color-scheme:dark){ :root[data-paleta="pampa"]:not([data-theme="light"]){ --bg:#0F1715; --surface:#19241F; --ink:#ECEFEA; --ink-soft:#A9B7AF; --line:#2E3C36; --track:#243029; --mark:#F4D778; --mark-ink:#1B2A26; --action:#7FC3A0; --action-ink:#0F1715; --me:#ECEFEA; --ref:#8FA89C; --off:#3B4A43; --dot-off:#4C5E55; --band:rgba(220,120,110,.22); --detail:#D98A80; --sheet:#05100C; color-scheme:dark; } }
:root[data-paleta="pampa"][data-theme="dark"]{ --bg:#0F1715; --surface:#19241F; --ink:#ECEFEA; --ink-soft:#A9B7AF; --line:#2E3C36; --track:#243029; --mark:#F4D778; --mark-ink:#1B2A26; --action:#7FC3A0; --action-ink:#0F1715; --me:#ECEFEA; --ref:#8FA89C; --off:#3B4A43; --dot-off:#4C5E55; --band:rgba(220,120,110,.22); --detail:#D98A80; --sheet:#05100C; color-scheme:dark; }
/* Charqueada: papel cru, verde-oliva, mostarda, tijolo */
:root[data-paleta="pinhao"]{ --bg:#F2E9DF; --surface:#FCF7F1; --ink:#3A2A24; --ink-soft:#6F5B52; --line:#DDD0C4; --track:#EBDFD3; --mark:#D9A62B; --mark-ink:#3A2A24; --action:#6B6F2C; --action-ink:#FFFFFF; --me:#3A2A24; --ref:#A0877B; --off:#DACBBF; --dot-off:#C2B0A3; --band:rgba(194,65,43,.18); --detail:#C2412B; --sheet:#1A1310; --sheet-ink:#F0E6DE;   color-scheme:light; --rodape:#3A2A24; }
@media (prefers-color-scheme:dark){ :root[data-paleta="pinhao"]:not([data-theme="light"]){ --bg:#1A1310; --surface:#27201B; --ink:#F0E6DE; --ink-soft:#BFAFA3; --line:#3B302A; --track:#33281F; --mark:#E0AE3A; --mark-ink:#1A1310; --action:#C1C46A; --action-ink:#1A1310; --me:#F0E6DE; --ref:#A89385; --off:#4A3B33; --dot-off:#5E4C42; --band:rgba(240,134,110,.22); --detail:#F0866E; --sheet:#0E0906; color-scheme:dark; } }
:root[data-paleta="pinhao"][data-theme="dark"]{ --bg:#1A1310; --surface:#27201B; --ink:#F0E6DE; --ink-soft:#BFAFA3; --line:#3B302A; --track:#33281F; --mark:#E0AE3A; --mark-ink:#1A1310; --action:#C1C46A; --action-ink:#1A1310; --me:#F0E6DE; --ref:#A89385; --off:#4A3B33; --dot-off:#5E4C42; --band:rgba(240,134,110,.22); --detail:#F0866E; --sheet:#0E0906; color-scheme:dark; }
/* Serra: petróleo, verde-azulado, ouro-velho (a paleta anterior) */
:root[data-paleta="serra"]{ --bg:#EFF2F1; --surface:#FFFFFF; --ink:#16262E; --ink-soft:#52646C; --line:#D3DBDB; --track:#E4EAEA; --mark:#E6CF7A; --mark-ink:#16262E; --action:#1F6F5F; --action-ink:#FFFFFF; --me:#16262E; --ref:#6E8886; --off:#CBD6D5; --dot-off:#AEBDBC; --band:rgba(185,74,59,.2); --detail:#B94A3B; --sheet:#0E1719; --sheet-ink:#EAF0EF; color-scheme:light; --rodape:#16262E; }
@media (prefers-color-scheme:dark){ :root[data-paleta="serra"]:not([data-theme="light"]){ --bg:#0E1719; --surface:#172326; --ink:#EAF0EF; --ink-soft:#A6B7B6; --line:#2A3A3D; --track:#1F2E31; --mark:#E6CF7A; --mark-ink:#16262E; --action:#6FC1AF; --action-ink:#0E1719; --me:#EAF0EF; --ref:#86A3A0; --off:#35474A; --dot-off:#47595C; --band:rgba(220,120,110,.2); --detail:#D9867A; --sheet:#06100F; color-scheme:dark; } }
:root[data-paleta="serra"][data-theme="dark"]{ --bg:#0E1719; --surface:#172326; --ink:#EAF0EF; --ink-soft:#A6B7B6; --line:#2A3A3D; --track:#1F2E31; --mark:#E6CF7A; --mark-ink:#16262E; --action:#6FC1AF; --action-ink:#0E1719; --me:#EAF0EF; --ref:#86A3A0; --off:#35474A; --dot-off:#47595C; --band:rgba(220,120,110,.2); --detail:#D9867A; --sheet:#06100F; color-scheme:dark; }
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:1.0625rem;line-height:1.5;min-height:100dvh;display:flex;flex-direction:column} /* o rodapé cola na base da tela em página curta (ex.: jogo no desktop) */
body>main{flex:0 0 auto}
body>main{margin-bottom:2.5rem;min-width:0;width:100%} /* min-width:0: filho de flex não pode alargar além da tela */
h1,h2,h3{font-family:var(--display);font-weight:var(--display-peso);font-stretch:var(--display-largura);line-height:1.12;text-wrap:balance;margin:0}
p{margin:0}
button{font:inherit;cursor:pointer}
a{color:var(--action)}
:focus-visible{outline:3px solid var(--action);outline-offset:2px}
.wrap{max-width:72rem;margin-inline:auto;padding-inline:1rem}
.mark{background:var(--mark);color:var(--mark-ink);padding:.02em .22em;border-radius:.18em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.soft{color:var(--ink-soft)}
.small{font-size:.88rem}
.eyebrow{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);font-weight:700}
.vh{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.stack{display:flex;flex-direction:column;gap:1rem}

/* topo */
.top{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.top .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem;padding-block:.6rem}
.sobre-link{color:var(--ink);text-decoration:none;font-weight:700;font-size:.93rem;min-height:44px;display:inline-flex;align-items:center;padding:0 .7rem;border-radius:var(--raio-ctl);border:1.5px solid var(--line);background:var(--bg);flex:none;order:2}
.sobre-link:hover,.sobre-link:focus-visible{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.logo small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60vw}
.tema{width:44px;height:44px;border-radius:var(--raio-ctl);border:1.5px solid var(--line);background:var(--bg);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none;order:3;padding:0}
.tema:hover,.tema:focus-visible{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.tema .lua{display:none}
.paleta-sel{position:relative;order:3}
.paleta-sel>button{width:44px;height:44px;border-radius:var(--raio-ctl);border:1.5px solid var(--line);background:var(--bg);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.paleta-sel>button:hover,.paleta-sel>button[aria-expanded="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.paleta-menu{position:absolute;right:0;top:50px;z-index:8;background:var(--surface);border:1px solid var(--line);border-radius:var(--raio-bloco);box-shadow:0 14px 30px rgba(0,0,0,.18);padding:.4rem;display:flex;flex-direction:column;gap:.1rem;min-width:13rem}
.paleta-menu button{display:flex;align-items:center;gap:.6rem;min-height:44px;padding:0 .7rem;border:0;border-radius:var(--raio-ctl);background:transparent;color:var(--ink);font:inherit;font-weight:700;cursor:pointer;text-align:left}
.paleta-menu button:hover{background:var(--bg)}
.paleta-menu button[aria-checked="true"]::after{content:"\2714";margin-left:auto;color:var(--action)}
.paleta-menu .am{display:inline-flex;gap:2px}
.paleta-menu .am i{width:.6rem;height:1rem;border-radius:2px;display:block}
.paleta-menu small{display:block;font-weight:400;color:var(--ink-soft);font-size:.78rem;font-family:var(--body);font-stretch:100%}
.paleta-menu [data-paleta="pinhao"]>span:last-child{font-family:"Fraunces",Georgia,serif}
.paleta-menu [data-paleta="macela"]>span:last-child{font-family:"Bitter",Georgia,serif}
.paleta-menu [data-paleta="mate"]>span:last-child{font-family:"DM Serif Display",Georgia,serif;font-weight:400}
.paleta-menu [data-paleta="pampa"]>span:last-child{font-family:"Archivo",sans-serif;font-stretch:125%}
.paleta-menu [data-paleta="charqueada"]>span:last-child{font-family:"Young Serif",Georgia,serif;font-weight:400}
.paleta-menu [data-paleta="serra"]>span:last-child{font-family:"Jost",sans-serif}
:root[data-theme="dark"] .tema .sol{display:none}
:root[data-theme="dark"] .tema .lua{display:inline}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tema .sol{display:none}:root:not([data-theme="light"]) .tema .lua{display:inline}}
.icone-busca{display:none;order:3;width:44px;height:44px;border-radius:var(--raio-ctl);align-items:center;justify-content:center;color:var(--ink);border:1.5px solid var(--line);background:var(--bg);flex:none}
.icone-busca[aria-expanded="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
/* na página da cidade, em tela estreita: nome da cidade no topo, busca atrás do ícone */
@media (max-width:48rem){
  .top.com-cidade .icone-busca{display:inline-flex}
  .top.com-cidade .cityfield{display:none;flex:1 1 100%;order:4}
  .top .cityfield{order:4}
  .top .wrap{gap:.5rem .55rem}
  .top .logo{flex:1 1 0;gap:.45rem;min-width:0}
  .top .logo b{font-size:.85rem;white-space:nowrap;line-height:1.05}
  .sobre-link{padding:0 .55rem;font-size:.88rem}
  .top.com-cidade .cityfield.aberta{display:flex}
}
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);min-width:0;flex:1 1 14rem}
.logo .q{position:relative;width:36px;height:36px;border-radius:var(--raio-ctl);background:var(--mark);color:var(--mark-ink);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:var(--display-peso);font-stretch:100%;font-size:1.4rem;flex:none}
.logo .q::after{content:"";position:absolute;right:-4px;top:-4px;width:10px;height:10px;border-radius:5px;background:var(--detail);border:2px solid var(--surface)}
.logo b{font-family:var(--display);font-weight:var(--display-peso);font-stretch:100%;font-size:1rem;line-height:1.1;white-space:nowrap}
.logo small{display:block;font-size:.75rem;color:var(--ink-soft);font-weight:400}
.cityfield{position:relative;flex:1 1 16rem;max-width:26rem;min-width:0;display:flex;gap:.4rem}
.cityfield .campo{position:relative;flex:1;min-width:0}
.cityfield input{width:100%;height:46px;padding:0 .8rem 0 2.4rem;font:inherit;font-size:1rem;color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:var(--raio-ctl)}
.cityfield .campo>svg{position:absolute;left:.75rem;top:13px;pointer-events:none}
.sug{position:absolute;left:0;right:0;top:50px;background:var(--surface);border:1px solid var(--line);border-radius:var(--raio-ctl);box-shadow:0 14px 30px rgba(16,21,38,.18);overflow:hidden;z-index:6;margin:0;padding:0;list-style:none}
.sug li a{display:flex;flex-direction:column;align-items:flex-start;min-height:48px;color:var(--ink);padding:.5rem .9rem;text-decoration:none;border-bottom:1px solid var(--line)}
.sug li:last-child a{border-bottom:0}
.sug li a:hover,.sug li a:focus-visible{background:var(--bg)}
.sug .s{font-size:.8rem;color:var(--ink-soft)}
.sug .none{padding:.7rem .9rem;color:var(--ink-soft);font-size:.9rem}

/* cabeçalho da cidade e início */
.head{background:var(--surface);border-bottom:1px solid var(--line)}
.head .wrap{padding-block:1.1rem 1.3rem;display:flex;flex-wrap:wrap;gap:1rem 2.5rem;align-items:flex-end;justify-content:space-between}
.head h1{font-size:clamp(2.4rem,7vw,4rem);letter-spacing:-.02em;line-height:1}
.facts a.assoc{color:inherit;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.facts{display:flex;flex-wrap:wrap;gap:.2rem 1.4rem;font-size:.97rem}
.facts.linha{margin:0;gap:.2rem .9rem;color:var(--ink-soft);font-size:.95rem}
.facts.linha b{color:var(--ink)}
.nota-enchente{margin:.3rem 0 0;font-size:.85rem;color:var(--ink-soft)}
.nota-enchente::before{content:"";display:inline-block;width:.55rem;height:.55rem;border-radius:50%;background:var(--detail);margin-right:.4rem;vertical-align:1px}
.mapa figcaption a.assoc{color:var(--ink);text-decoration-color:var(--action)}
.head-texto{display:flex;flex-direction:column;gap:.45rem;min-width:0}
.head-texto .resumo{margin-top:.2rem}
.head-acts{margin-top:.5rem}
.btn.leve{border-color:transparent;color:var(--ink-soft)}
.convite-jogo{margin:0;font-size:.97rem;display:flex;flex-wrap:wrap;gap:0 1.4rem}
.convite-jogo a{color:var(--ink);text-decoration:none;display:inline-block;padding:.6rem 0;line-height:1.4}
.convite-jogo a .u{text-decoration:underline;text-decoration-color:var(--action);text-decoration-thickness:2px;text-underline-offset:4px} /* sublinha só a palavra de ação: "Jogue", "em uma página" */
.convite-jogo a:hover .u{text-decoration-thickness:3px}
.convite-jogo svg{width:1.2rem;height:1.2rem;color:var(--action);vertical-align:-.25em;margin-right:.4rem}
.mapa-confirma{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.5rem;padding:.6rem .8rem;border:1.5px solid var(--line);border-radius:var(--raio-ctl);background:var(--bg);font-size:.95rem}
.mapa-confirma span{flex:1 1 10rem}
.rotulo-cmp{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);font-weight:700;margin-right:.2rem}
body:not(.sem-js) .btn.aplicar{display:none}
#corpo.trocando .conteudo{opacity:.45;transition:opacity .2s}
.mapa-dobra{flex:1 1 20rem;max-width:32rem;min-width:0}
.mapa-dobra summary{cursor:pointer;font-weight:700;min-height:44px;display:flex;align-items:center;gap:.4rem;color:var(--ink)}
.mapa-dobra summary::before{content:"";width:.5rem;height:.5rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s;margin-right:.2rem}
.mapa-dobra[open] summary::before{transform:rotate(45deg)}
.mapa-dobra .mapa{margin-top:.3rem}
.mapa{margin:.9rem 0 0;display:flex;flex-direction:column;gap:.4rem;max-width:32rem}
.mapa-svg{width:100%;height:auto;display:block;background:var(--bg);border:1px solid var(--line);border-radius:var(--raio-bloco)}
.mapa figcaption{font-size:.85rem;color:var(--ink-soft)}
.mapa-svg a path{cursor:pointer;transition:fill .15s}
.mapa-svg a:hover path,.mapa-svg a:focus-visible path{fill:var(--ref);fill-opacity:.55}
.mapa-svg a:focus-visible{outline:none}
.pilulas{list-style:none;margin:.4rem 0 1.2rem;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.pilulas a{display:inline-flex;align-items:center;gap:.35rem;min-height:40px;padding:0 .85rem;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);text-decoration:none;font-size:.93rem}
.pilulas small{color:var(--ink-soft)}
.lista-cidades h2{font-size:1.1rem;margin:.2rem 0 0}
.card.regiao details.lista summary{cursor:pointer;font-weight:700;padding:.4rem 0;color:var(--ink)}
.card.regiao .cmp{margin-top:.6rem}
.card.regiao .lab a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.selo{display:inline-flex;align-items:center;gap:.4rem;font-size:.85rem;font-weight:700;color:var(--detail);border:1.5px solid var(--detail);border-radius:999px;padding:.1rem .7rem}
.resumo{font-size:1.05rem;max-width:44rem;margin-top:.4rem}
.btn.ouvir{min-height:40px;font-size:.88rem;padding:0 .9rem;border-color:var(--line);color:var(--ink-soft)}
.btn.ouvir[aria-pressed="true"]{border-color:var(--ink);color:var(--ink)}
.hero{padding-block:2rem 2rem;display:flex;flex-wrap:wrap;gap:2rem 3rem;align-items:center}
.hero-texto{flex:1 1 24rem;min-width:0}
.mapa-estado{flex:1 1 20rem;max-width:36rem;min-width:0;margin:0}
.mapa-estado figcaption{font-size:.9rem;color:var(--ink-soft);margin-top:.5rem;line-height:1.4;min-height:2.8em} /* duas linhas reservadas: o nome no hover não empurra a página */
.mapa-rs{border:0;background:transparent;overflow:visible}
.mapa-rs>path:first-child{pointer-events:none}
.mapa-rs a path{fill:var(--surface);stroke:var(--surface);stroke-opacity:.9;stroke-width:.5;stroke-linejoin:round;transition:fill .12s}
.legenda-porte{list-style:none;margin:.6rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem .8rem;font-size:.8rem;color:var(--ink-soft)}
.legenda-porte li{display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap}
.legenda-porte i{width:.9rem;height:.9rem;border-radius:3px;display:inline-block;border:1px solid var(--line)}
.legenda-porte i.pt-ate_3k{background:color-mix(in srgb,var(--action) 14%,var(--surface))} .legenda-porte i.pt-3k_5k{background:color-mix(in srgb,var(--action) 28%,var(--surface))}
.legenda-porte i.pt-5k_10k{background:color-mix(in srgb,var(--action) 44%,var(--surface))} .legenda-porte i.pt-10k_20k{background:color-mix(in srgb,var(--action) 62%,var(--surface))}
.legenda-porte i.pt-20k_50k{background:color-mix(in srgb,var(--action) 82%,var(--surface))} .legenda-porte i.pt-50k_100k{background:var(--action)} .legenda-porte i.pt-acima_100k{background:color-mix(in srgb,var(--action) 45%,var(--ink))}
.mapa-rs a:hover path,.mapa-rs a:focus-visible path{fill:var(--mark);fill-opacity:1;stroke:var(--ink)}
.mapa-rs text{pointer-events:none}
.mapa-assoc a path{stroke-width:.7;stroke-opacity:1;fill-opacity:1;stroke:currentColor}
/* regiões chapadas: traço da mesma cor esconde as emendas entre municípios; vizinhas nunca repetem cor */
.mapa-assoc .c0{fill:var(--action);color:var(--action)} .mapa-assoc .c1{fill:var(--mark);color:var(--mark)} .mapa-assoc .c2{fill:var(--detail);color:var(--detail)} .mapa-assoc .c3{fill:var(--ref);color:var(--ref)}
.mapa-assoc .c4{fill:color-mix(in srgb,var(--action) 50%,var(--surface));color:color-mix(in srgb,var(--action) 50%,var(--surface))}
.mapa-assoc .c5{fill:color-mix(in srgb,var(--detail) 45%,var(--surface));color:color-mix(in srgb,var(--detail) 45%,var(--surface))}
.mapa-assoc a:hover path,.mapa-assoc a:focus-visible path,.mapa-assoc a.on path{fill:var(--mark);color:var(--mark)}
.card.chamada-assoc{display:flex;flex-direction:row;flex-wrap:wrap;gap:1.2rem 2rem;align-items:center;margin:1rem 0 .5rem}
.chamada-assoc>.stack{flex:1 1 20rem;min-width:0}
.chamada-assoc h2{font-size:1.6rem}
.chamada-assoc .mapa-mini{flex:1 1 14rem;max-width:22rem;min-width:0;display:block;text-decoration:none}
.chamada-assoc .mapa-mini .mapa-svg{border:0;background:transparent}
.chamada-assoc .mapa-mini a{pointer-events:none}
.chamada-assoc .mapa-mini a path{stroke-width:1.8} /* traço mais grosso cobre as emendas da simplificação forte */
.nome-assoc{margin:0;font-size:1.15rem}
.site-assoc{margin:0;font-size:.95rem}
.site-assoc a{color:var(--ink);font-weight:700;text-decoration-color:var(--action);text-underline-offset:3px;display:inline-flex;align-items:center;gap:.3rem}
.site-assoc .sai{width:.95em;height:.95em;color:var(--action);flex:none}
.tile.assoc .site-assoc{color:var(--action);font-weight:700}
.assoc-cartoes{grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr))}
.tile.assoc{gap:.1rem}
.tile.assoc>span:first-of-type{font-size:.93rem}
.tile.assoc.on,.tile.assoc:hover{border-color:var(--ink)}
@media (min-width:64rem){.hero{flex-wrap:nowrap;align-items:center}.hero-texto{flex:1 1 50%}.mapa-estado{flex:0 1 44%}}
.hero h1{font-size:clamp(2.4rem,7vw,3.6rem);letter-spacing:-.02em;line-height:1.05}
.hero h1 .mark{white-space:nowrap}
/* "Qual é a sua cidade?" numa linha também no celular: o tamanho vem da largura da tela dividida pela largura
   que a frase tem em cada fonte (medida a 100px, com a folga do marca-texto) */
:root{--h1-capa-fator:1012} :root[data-paleta="mate"]{--h1-capa-fator:900} :root[data-paleta="macela"]{--h1-capa-fator:945}
:root[data-paleta="pampa"]{--h1-capa-fator:1015} :root[data-paleta="pinhao"]{--h1-capa-fator:910} :root[data-paleta="serra"]{--h1-capa-fator:1000}
@media (max-width:63.99rem){
  .hero h1.uma-linha{white-space:nowrap;font-size:min(3.4rem, calc((100vw - 2.4rem) * 100 / var(--h1-capa-fator)))}
  :root[data-paleta="pampa"] .hero h1.uma-linha{font-stretch:100%} /* a Archivo expandida não cabe; no celular o título fica na largura normal */
}
body:not(.sem-js) .hero form .btn,body:not(.sem-js) .hero form .button[type="submit"]{display:none} /* a lista de sugestões já leva à cidade; o Enter continua enviando o formulário */
@media (min-width:64rem){.hero h1.uma-linha{font-size:clamp(2.6rem,3.6vw,3.6rem);white-space:nowrap}} /* só a capa: "Qual é a sua cidade?" numa linha */
.hero .lede{font-size:1.2rem;max-width:34rem}
.hero form{display:flex;flex-wrap:wrap;gap:.6rem;max-width:36rem}
.hero #onde-estou{max-width:36rem;width:100%} /* mesma largura do campo de busca */
.hero #onde-estou-msg{max-width:36rem}
.hero .campo-grande,.busca-inline .campo-grande{position:relative;flex:1 1 14rem;min-width:0}
.hero input,.busca-inline input{width:100%;height:56px;padding:0 1rem;font:inherit;font-size:1.1rem;color:var(--ink);background:var(--surface);border:2px solid var(--ink);border-radius:var(--raio-bloco)}
.hero .sug,.busca-inline .sug{top:60px}
.btn{min-height:44px;padding:0 1.05rem;border-radius:999px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);font-weight:700;font-size:.95rem;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;text-decoration:none}
.btn.go{background:var(--action);border-color:var(--action);color:var(--action-ink)}
.btn.big{min-height:56px;padding:0 1.6rem;font-size:1.05rem;border-radius:var(--raio-bloco)}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:.8rem}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--raio-bloco);padding:1rem 1.1rem;color:var(--ink);text-decoration:none;display:flex;flex-direction:column;gap:.2rem}
.tile b{font-family:var(--display);font-weight:var(--display-peso);font-stretch:var(--display-largura);font-size:1.15rem}

/* controles */
.ctl{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .6rem;padding-block:.9rem 0} /* celular: rótulo e as três opções numa linha que quebra */
.row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.seg{display:flex;flex-wrap:wrap;gap:.4rem;border:0;margin:0;padding:0;min-inline-size:0;max-width:100%}
.seg label{position:relative;display:inline-flex}
.seg input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.seg span{border:1.5px solid var(--line);border-radius:999px;padding:0 .8rem;min-height:40px;display:inline-flex;align-items:center;font-size:.88rem;line-height:1.1;background:var(--surface)}
.seg input:checked+span{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.seg input:focus-visible+span{outline:3px solid var(--action);outline-offset:2px}
.seg input[disabled]+span{opacity:.45}
select{font:inherit;font-size:.95rem;color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:var(--raio-ctl);padding:0 .7rem;min-height:44px;max-width:100%}
.campo-com{position:relative;flex:1 1 14rem;max-width:22rem;min-width:0}
.campo-com input{width:100%;min-height:44px;padding:0 .8rem;font:inherit;font-size:.95rem;color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:var(--raio-ctl)}
.campo-com .sug{top:48px}
.legend{display:flex;flex-wrap:wrap;gap:.3rem 1rem;font-size:.88rem;color:var(--ink-soft)}
.legend i{display:inline-block;width:12px;height:12px;border-radius:var(--raio-mini);vertical-align:-1px;margin-right:.35rem}
.chips{display:flex;gap:.4rem;overflow-x:auto;padding-block:.5rem .9rem;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips a{flex:none;min-height:44px;padding:0 .95rem;border-radius:var(--raio-ctl);border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:.93rem;text-decoration:none;display:inline-flex;align-items:center}
.chips a[aria-current="true"]{background:var(--mark);color:var(--mark-ink);border-color:var(--mark);font-weight:700}
.aviso-topo{background:var(--surface);border:1px solid var(--line);border-radius:var(--raio-bloco);padding:.7rem .9rem;font-size:.92rem}
.aplicar{display:none}
.sem-js .aplicar{display:inline-flex}

/* cartões */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:1rem;padding-block:.4rem 2.5rem;align-items:start}
.card{background:var(--surface);border-radius:var(--raio-card);padding:1.25rem;display:flex;flex-direction:column;gap:.8rem;min-width:0;scroll-margin-top:5rem}
.card.wide{grid-column:auto} /* todos os cartões na mesma grade; o gráfico ocupa a largura do cartão */
/* o primeiro cartão do assunto ocupa a largura toda com destaque maior; os seguintes ficam compactos (meia largura) */
.grid>.card:not(:first-child).wide{grid-column:auto}
.grid>.card:not(:first-child) .duas{flex-direction:column;gap:1rem}
.grid>.card:not(:first-child) .duas>div{flex:1 1 auto}
.card h2{font-size:1.35rem}
.big{font-family:var(--display);font-weight:var(--display-peso);font-stretch:var(--display-largura);font-size:1.8rem;line-height:1.25}
.cena{font-size:1rem}
.figs{display:flex;flex-wrap:wrap;gap:.9rem 1.5rem;align-items:flex-start}
figure{margin:0;display:flex;flex-direction:column;gap:.3rem;min-width:0}
figcaption{font-size:.88rem}
figcaption b{display:block}
.cmp{display:flex;flex-direction:column;gap:.5rem;font-size:.92rem}
.cmp .r{display:flex;flex-direction:column;gap:.2rem}
.cmp .lab{display:flex;justify-content:space-between;gap:.75rem;align-items:baseline}
.cmp .lab b{white-space:nowrap;font-variant-numeric:tabular-nums}
.cmp .tr{height:.6rem;border-radius:var(--raio-barra);background:transparent}
.cmp .tr.pct{background:var(--track)}
.cmp .fi{height:100%;border-radius:var(--raio-barra);min-width:.25rem}
/* Animações: com JS (html.js-anim) os gráficos nascem vazios e enchem quando o cartão entra na tela; ao sair, esvaziam
   (transições, não keyframes, para andar nos dois sentidos). Sem JS ou com "reduzir movimento", tudo já está desenhado. */
@media (prefers-reduced-motion:no-preference){
  .js-anim .cmp .fi{transform:scaleX(0);transform-origin:left;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
  .js-anim .anim .cmp .fi{transform:scaleX(1)}
  .js-anim .pinta{clip-path:inset(0 0 100% 0);transition:clip-path 1.7s cubic-bezier(.2,.7,.2,1)}
  .js-anim .anim .pinta{clip-path:inset(0 0 0 0)}
  .js-anim .ln-me{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2s ease-in-out}
  .js-anim .anim .ln-me{stroke-dashoffset:0}
  .js-anim .ln-ref{opacity:0;transition:opacity .9s ease-out}
  .js-anim .anim .ln-ref{opacity:1;transition-delay:1.2s}
  .js-anim .pt{opacity:0;transition:opacity .35s ease-out}
  .js-anim .anim .pt{opacity:1;transition-delay:calc(.4s + var(--i,0) * .14s)}
}
.cmp .fi.me{background:var(--me)} .cmp .fi.ref{background:var(--ref)}
.duas{display:flex;flex-direction:column;gap:1rem}
.duas>div{flex:0 0 auto;min-width:0;display:flex;flex-direction:column;gap:.8rem}
.serie h3{font-size:1.05rem}
.serie.mensal{margin-top:1rem;padding-top:.8rem;border-top:1px solid var(--line)}
.serie svg{width:100%;max-width:none;height:auto;display:block}
.fonte{font-size:.82rem;color:var(--ink-soft);border-top:1px solid var(--line);padding-top:.6rem}
.acts2{display:flex;flex-wrap:wrap;gap:.5rem}
details.exp{background:var(--bg);border-radius:var(--raio-bloco);padding:.6rem .95rem;font-size:.93rem}
details.exp summary{cursor:pointer;font-weight:700;min-height:32px;display:flex;align-items:center;gap:.45rem}
details.exp summary::before{content:"?";flex:none;width:1.25rem;height:1.25rem;border-radius:50%;background:var(--mark);color:var(--mark-ink);font-size:.85rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;font-family:var(--display)}
details.exp[open] summary::before{background:var(--ink);color:var(--surface)}
details.exp .corpo{display:flex;flex-direction:column;gap:.45rem;padding-top:.5rem}
.exp .k{font-size:.8rem;color:var(--ink-soft)}
.warn{background:var(--bg);border-radius:var(--raio-bloco);padding:.5rem .75rem;font-size:.88rem}
.empty{padding:2rem 0;color:var(--ink-soft)}

/* folha de envio */
.sheet{position:fixed;left:0;right:0;bottom:0;background:var(--sheet);color:var(--sheet-ink);padding:1rem 1rem calc(1rem + env(safe-area-inset-bottom,0px));border-radius:1.2rem 1.2rem 0 0;box-shadow:0 -12px 40px rgba(0,0,0,.35);z-index:20;max-height:85vh;overflow:auto}
.sheet .in{max-width:40rem;margin-inline:auto;display:flex;flex-direction:column;gap:.8rem}
.sheet h2{font-size:1.1rem;color:var(--sheet-ink)}
.sheet pre{margin:0;white-space:pre-wrap;font:inherit;font-size:.93rem;background:rgba(255,255,255,.08);border-radius:var(--raio-bloco);padding:.8rem;line-height:1.45}
.sheet .btn{border-color:var(--sheet-ink);color:var(--sheet-ink)}
.sheet .btn.go{background:#25D366;border-color:#25D366;color:#06240F} /* verde do WhatsApp, reconhecível */
.sheet .x{position:absolute;right:.6rem;top:.6rem;width:44px;height:44px;border-radius:var(--raio-ctl);border:0;background:transparent;color:var(--sheet-ink);font-size:1.4rem}
.veu{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:19}
[hidden]{display:none!important}
body.travado{overflow:hidden}
footer{border-top:1px solid var(--line);padding-block:1.4rem 2.5rem;font-size:.85rem;color:var(--ink-soft);display:flex;flex-direction:column;gap:.3rem}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

.convite{margin:.2rem 0 0}
.convite a{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--action);text-underline-offset:3px}
.btn.palpite-link{border-color:var(--action);font-size:.9rem}
.btn.jogar{border-color:var(--action);color:var(--ink)}
/* Splash de carregamento, minimalista: traço fino, um fio de água, a cuia enchendo. Aparece ao navegar; some quando a próxima página chega. */
.splash{position:fixed;inset:0;z-index:60;background:var(--bg);display:none;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;padding:1rem;opacity:0;transition:opacity .22s ease-out}
.splash.visivel{display:flex;opacity:1}
html.carregando .splash{display:flex;opacity:1;transition:none}  /* a página nova já nasce coberta, até o load */
.splash .mate,.splash-txt{animation:chega .5s cubic-bezier(.2,.7,.2,1) both}
.splash-txt{animation:chega .5s cubic-bezier(.2,.7,.2,1) both,respira 2.4s ease-in-out .5s infinite}
@keyframes chega{from{opacity:0;transform:translateY(10px) scale(.94)}to{opacity:1;transform:none}}
@keyframes respira{0%,100%{opacity:1}50%{opacity:.55}}
.splash.saindo{opacity:0;transition:opacity .38s ease-in}
.splash.saindo .mate{transition:transform .38s ease-in;transform:scale(1.08)}
.splash.saindo .splash-txt{transition:opacity .25s;opacity:0}
.splash .mate{width:112px;height:auto}
.splash-txt{margin:0;font-size:.92rem;color:var(--ink-soft);text-align:center;letter-spacing:.02em}
.splash-txt::after{content:"";display:inline-block;width:1.1em;text-align:left;animation:pontos 1.2s steps(4) infinite}
@keyframes pontos{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.splash .agua{animation:escorre .45s linear infinite}
@keyframes escorre{to{stroke-dashoffset:-13}}
.splash .nivel{animation:enche 3s ease-in-out infinite}
@keyframes enche{0%{transform:translateY(0)}75%,100%{transform:translateY(-74px)}}
@media (prefers-reduced-motion:reduce){.splash *{animation:none !important}.splash .nivel{transform:translateY(-50px)}}
/* Que cidade é essa? */
.diario{padding-block:1rem 3rem}
.diario .card{max-width:40rem}
.diario h1{font-size:clamp(1.9rem,6vw,2.8rem);line-height:1.05;letter-spacing:-.02em}
.pistas{list-style:none;margin:.4rem 0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.pista{display:flex;gap:.7rem;align-items:flex-start;padding:.6rem .8rem;border-radius:var(--raio-ctl);background:var(--bg)}
.pista .num{flex:none;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--mark);color:var(--mark-ink);font-weight:700;display:inline-flex;align-items:center;justify-content:center;font-size:.9rem}
.pista .sil{margin-top:.4rem}
.silhueta{width:150px;height:auto;display:block}
.pista .mapa-reg .mapa-svg{max-width:16rem;border:0;background:transparent}
.lista-regiao{margin-top:.5rem}
.chips-regiao{display:flex;flex-wrap:wrap;gap:.35rem;padding-top:.4rem}
.chip-cid{font:inherit;font-size:.88rem;min-height:36px;padding:0 .7rem;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.chip-cid:disabled{opacity:.45;cursor:default;text-decoration:line-through}
.chip-cid.ok{background:var(--action);color:var(--action-ink);border-color:var(--action);opacity:1;text-decoration:none}
.palpite-form{display:flex;gap:.6rem;flex-wrap:wrap;align-items:flex-start;margin-top:.6rem}
.palpite-form .campo-grande{position:relative;flex:1 1 14rem;min-width:0}
.palpite-form input{width:100%;height:56px;padding:0 1rem;font:inherit;font-size:1.1rem;color:var(--ink);background:var(--surface);border:2px solid var(--ink);border-radius:var(--raio-bloco)}
.palpite-form .sug{top:60px}
.tentativas{list-style:none;margin:.6rem 0 0;padding:0;display:flex;flex-direction:column;gap:.35rem}
.tentativas li{display:flex;justify-content:space-between;gap:.8rem;padding:.5rem .8rem;border-radius:var(--raio-ctl);background:var(--bg);border-left:4px solid var(--detail)}
.tentativas li.ok{border-left-color:var(--action)}
.tentativas li span{color:var(--ink-soft)}
.diario .fim{margin-top:.8rem;display:flex;flex-direction:column;gap:.6rem}
.diario .veredito{font-weight:700;font-size:1.15rem;margin:0}
/* Retrato de uma página */
.retrato{padding-block:1rem 2rem;display:flex;flex-direction:column;gap:1rem}
.folha{background:var(--surface);border-radius:var(--raio-card);padding:1.5rem;display:flex;flex-direction:column;gap:1.1rem;max-width:52rem}
.folha-cabeca{display:grid;grid-template-columns:minmax(0,1fr) 13rem;gap:1.2rem;align-items:start}
.folha-cabeca h1{font-size:2.4rem;line-height:1;letter-spacing:-.02em;margin:.2rem 0 .5rem}
.folha-cabeca .facts{margin:0 0 .6rem}
.folha-cabeca .mapa{margin:0}
.folha-cabeca .mapa-svg{border:0;background:transparent}
.folha-cartoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:.8rem 1.2rem}
.mini{display:flex;flex-direction:column;gap:.2rem;border-top:1px solid var(--line);padding-top:.6rem}
.mini h2{font-size:1.02rem;margin:0}
.mini .big{font-size:1.35rem;margin:.1rem 0}
.mini p{margin:0}
.folha-pe{display:flex;flex-direction:column;gap:.2rem;font-size:.78rem;color:var(--ink-soft);border-top:1px solid var(--line);padding-top:.6rem}
@media (max-width:40rem){.folha-cabeca{grid-template-columns:1fr}.folha-cabeca .mapa{max-width:16rem}}
@media print{
  :root{--bg:#fff;--surface:#fff;--ink:#111;--ink-soft:#555;--line:#ccc;--track:#eee;--mark:#e6cf7a;--mark-ink:#111;--me:#111;--ref:#888}
  .top,.nao-imprime,footer:not(.folha-pe){display:none !important}
  body{background:#fff;font-size:9.5pt;line-height:1.35}
  .wrap{max-width:none;padding:0}
  .folha{padding:0;border-radius:0;max-width:none;gap:.6rem}
  .folha-cabeca{grid-template-columns:minmax(0,1fr) 11rem;gap:.8rem}
  .folha-cabeca h1{font-size:1.9rem;margin:.1rem 0 .3rem}
  .folha-cabeca .resumo{font-size:.95rem;line-height:1.35}
  .folha-cartoes{grid-template-columns:repeat(3,1fr);gap:.4rem .8rem}
  .mini{break-inside:avoid;gap:.1rem;padding-top:.4rem}
  .mini h2{font-size:.95rem}
  .mini .big{font-size:1.15rem}
  .mini .eyebrow{font-size:.62rem}
  .folha-pe{font-size:.7rem}
  @page{size:A4;margin:11mm}
}
/* Jogo “Quanto você conhece a sua cidade?” */
.jogo{padding-block:1rem 3rem;display:flex;flex-direction:column;gap:1rem}
.jogo [tabindex="-1"]:focus{outline:none}
.jogo .tela h1{font-size:clamp(1.9rem,6vw,3rem);line-height:1.05;letter-spacing:-.02em}
.jogo .palpite{display:flex;gap:1.2rem;align-items:flex-start;flex-wrap:wrap;margin-top:.6rem}
.jogo .grade{width:120px;flex:none;height:auto}
.jogo .controle{flex:1 1 14rem;min-width:0;display:flex;flex-direction:column;gap:.5rem}
.jogo .controle .big{margin:0}
.jogo .btn:disabled{opacity:.45;cursor:default}
.jogo .faixa{width:100%;accent-color:var(--action);height:44px;margin:0}
.jogo .revela{margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:.6rem}
.jogo .serie-jogo .corpo{padding-top:.4rem}
.jogo .serie-jogo h3{font-size:1rem;margin:0 0 .3rem}
@media (max-width:48rem){
  .jogo .acts2.fixo{position:sticky;bottom:0;z-index:3;margin:.4rem -1.25rem -1.25rem;padding:.7rem 1.25rem calc(.7rem + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line);border-radius:0 0 18px 18px}
  .jogo .acts2.fixo .btn{width:100%;justify-content:center}
}
.jogo .veredito{font-weight:700;font-size:1.05rem}
.jogo .ref-linha{margin:0}
.jogo .sw{display:inline-block;width:1.1rem;height:0;border-top:3px dashed var(--ref);vertical-align:middle;margin-right:.45rem}
.recap{list-style:none;margin:.4rem 0 .8rem;padding:0;display:flex;flex-direction:column;gap:.4rem}
.recap li{display:flex;flex-direction:column;gap:.1rem;padding:.45rem .7rem;border-radius:var(--raio-ctl);background:var(--bg);font-size:.93rem}
.recap li b{color:var(--ink-soft);font-weight:600}
.recap li.ok{border-left:4px solid var(--action)}
.recap li.nao{border-left:4px solid var(--detail)}
@media (prefers-reduced-motion:no-preference){.jogo .tela.anim{animation:surge .35s ease-out both}}
.jogo .opcoes{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.4rem}
.jogo .opcoes.coluna{flex-direction:column}
.jogo .opc{flex:1 1 8rem;min-height:52px;font-size:1.05rem;justify-content:center}
.jogo .opc{position:relative}
.jogo .opc.escolhida{border-color:var(--detail);box-shadow:inset 0 0 0 1.5px var(--detail);opacity:1}
.jogo .opc.escolhida::after{content:"sua resposta";position:absolute;right:.6rem;top:-.55rem;font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:var(--detail);color:#fff;padding:.05rem .4rem;border-radius:999px}
.jogo .opc.certa{background:var(--mark);color:var(--mark-ink);border-color:var(--mark);opacity:1}
.jogo .opc.certa::before{content:"\2714  ";font-weight:700}
.jogo .opc{white-space:normal;line-height:1.15}
.jogo .opc.certa.escolhida{background:var(--action);color:var(--action-ink);border-color:var(--action);box-shadow:none}
.jogo .opc.certa.escolhida::after{background:var(--action);color:var(--action-ink);border:1.5px solid var(--surface)}
.jogo .veredito{margin:.7rem 0 0;padding:.6rem .8rem;border-radius:var(--raio-ctl);border-left:4px solid var(--action);background:var(--bg)}
.jogo .veredito.ok{background:color-mix(in srgb,var(--action) 22%,var(--bg))}
.jogo .veredito.nao{border-left-color:var(--detail);background:color-mix(in srgb,var(--detail) 14%,var(--bg))}
.jogo .so-revela{margin-top:.8rem}
.jogo .so-revela .mapa{max-width:22rem;margin-top:.6rem}
.jogo .desafio-caixa{display:flex;flex-direction:column;gap:.5rem;padding:.9rem 1rem;border-radius:var(--raio-ctl);background:var(--bg)}
.jogo .linha-nome{display:flex;flex-direction:column;gap:.25rem}
.jogo .linha-nome label{font-weight:700;font-size:.93rem}
.jogo .desafio-caixa p{margin:0}
.jogo .linha-nome input{width:100%;min-height:44px;border:1px solid var(--line);border-radius:var(--raio-ctl);padding:0 .8rem;font:inherit;background:var(--surface);color:var(--ink)}
.jogo .desafio-linha{margin:0;font-style:italic}
.sobre{padding-block:1.2rem 3rem}
.sobre .card{max-width:46rem;gap:.6rem}
.sobre .card a:not(.btn){color:var(--ink);text-decoration-color:var(--action);text-underline-offset:3px}
.sobre-grade{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:flex-start}
.sobre-grade>.card{flex:1 1 30rem;min-width:0}
.sobre-marcas{flex:1 1 16rem;max-width:22rem;background:var(--rodape,var(--sheet));color:var(--sheet-ink);border-radius:var(--raio-card);padding:1.3rem 1.4rem;display:flex;flex-direction:column;gap:1.4rem}
.sobre-marcas .bloco{display:flex;flex-direction:column;gap:1rem}
.sobre-marcas .rot{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;opacity:.65;font-weight:700;line-height:1}
.sobre-marcas a{color:inherit;text-decoration:none;display:flex;flex-direction:column;align-items:flex-start;gap:.4rem;border-radius:var(--raio-mini)}
.sobre-marcas a span{font-size:.82rem;opacity:.78;line-height:1.35}
.sobre-marcas a:hover span,.sobre-marcas a:focus-visible span{opacity:1;text-decoration:underline}
.sobre-marcas img{display:block;width:auto;max-width:100%;align-self:flex-start}
.sobre-marcas .m-famurs{height:34px} .sobre-marcas .m-ulbra{height:28px} .sobre-marcas .m-nexos{height:24px} .sobre-marcas .m-alright{height:22px}
@media (min-width:64rem){
  .sobre-grade{flex-wrap:nowrap;align-items:stretch}
  /* lateral de marcas ocupando a altura toda da tela, com as marcas maiores e bem espaçadas */
  .sobre-marcas{position:sticky;top:4.6rem;align-self:flex-start;min-height:calc(100vh - 5.6rem);max-width:26rem;padding:2.6rem 2.2rem;justify-content:space-evenly;gap:2.5rem}
  .sobre-marcas .bloco{gap:1.8rem}
  .sobre-marcas .rot{font-size:.78rem}
  .sobre-marcas a{gap:.55rem}
  .sobre-marcas a span{font-size:.95rem;opacity:.82}
  .sobre-marcas .m-famurs{height:58px} .sobre-marcas .m-ulbra{height:48px} .sobre-marcas .m-nexos{height:42px} .sobre-marcas .m-alright{height:40px}
}
.sobre h1{font-size:clamp(1.9rem,6vw,2.8rem);line-height:1.05;letter-spacing:-.02em}
.sobre h2{font-size:1.15rem;margin-top:.8rem}
.sobre ul{margin:0;padding-left:1.2rem;display:flex;flex-direction:column;gap:.35rem}

/* ---- desktop: menu, breadcrumb, cabeçalho em duas colunas, assuntos na lateral ---- */
.menu{display:none}
.trilha{display:none}
.secao{font-size:1.3rem;margin:.2rem 0 .6rem}
.mais{margin:-1.2rem 0 2.5rem;display:flex;flex-direction:column;gap:.6rem}
.mais h3{font-size:1.05rem;margin:0}
.mais-botoes{display:flex;flex-wrap:wrap;gap:.5rem}
.mais-botoes .btn small{font-weight:700;color:var(--ink-soft);margin-left:.1rem}
.mais-botoes .btn.go small{color:var(--action-ink);opacity:.85}
#cards{scroll-margin-top:4.5rem}
.chips a small{display:none}
@media (min-width:64rem){
  .menu{display:flex;gap:.2rem;order:1;margin-left:.6rem}
  .menu a{color:var(--ink);text-decoration:none;font-weight:700;font-size:.93rem;padding:.55rem .6rem;border-radius:var(--raio-ctl);border-bottom:3px solid transparent}
  .menu a:hover{background:var(--bg)}
  .menu a[aria-current="page"]{border-bottom-color:var(--mark)}
  .top .cityfield{order:2;margin-left:auto;flex:1 1 9rem;max-width:16rem;min-width:0}
  .menu{flex:none}
  .top .logo{flex:0 1 auto}
  .tema{order:3}
  .sobre-link{display:none}
  .trilha{display:flex;gap:.4rem;width:100%;font-size:.9rem;color:var(--ink-soft);margin-bottom:-.2rem}
  .trilha a{color:var(--ink-soft)}
  .head .wrap.head-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(20rem,30rem);gap:.6rem 3rem;align-items:start}
  .head-grid .trilha{grid-column:1 / -1}
  .head-grid .head-texto{grid-column:1}
  .head-grid .mapa-dobra{grid-column:2;grid-row:1 / span 2;max-width:none}
  .head-grid .head-acts{grid-column:1}
  .corpo{display:grid;grid-template-columns:14rem minmax(0,1fr);gap:1.5rem;align-items:start}
  .lateral{position:sticky;top:4.6rem;display:flex;flex-direction:column;gap:1.1rem;padding-top:.4rem}
  /* "Comparar com" vira um bloco da lateral: rótulo e três opções empilhadas, sempre à vista */
  .lateral .ctl{flex-direction:column;align-items:stretch;gap:.35rem;padding:0 0 .9rem;border-bottom:1px solid var(--line)}
  .lateral .rotulo-cmp{padding:0 .8rem .2rem}
  .lateral .seg{flex-direction:column;gap:.1rem}
  .lateral .seg label{display:flex}
  .lateral .seg span{width:100%;border:0;background:transparent;border-radius:var(--raio-ctl);padding:0 .8rem;min-height:40px;font-size:.93rem}
  .lateral .seg input:checked+span{background:var(--ink);color:var(--surface)}
  .lateral .seg span:hover{background:var(--surface)}
  .lateral .campo-com{flex:0 0 auto;max-width:none;margin:.3rem .3rem 0} /* flex-basis 14rem virava altura na coluna */
  .lateral .aviso-topo{margin:.4rem .3rem 0;font-size:.85rem;padding:.5rem .7rem}
  .corpo .chips{flex-direction:column;overflow:visible;gap:.15rem;padding-block:0}
  .corpo .chips a{display:flex;justify-content:space-between;align-items:center;min-height:44px;border:0;background:transparent;border-radius:var(--raio-ctl);padding:0 .8rem}
  .corpo .chips a small{display:inline;color:var(--ink-soft);font-size:.85rem}
  .corpo .chips a[aria-current="true"]{background:var(--mark);color:var(--mark-ink)}
  .corpo .chips a[aria-current="true"] small{color:var(--mark-ink)}
  .corpo .chips a:hover:not([aria-current="true"]){background:var(--surface)}
  .corpo .conteudo{min-width:0}
}
/* páginas Perguntas e Comparar */
.cabeca{display:flex;flex-direction:column;gap:.6rem;padding-block:1.6rem .4rem;max-width:48rem}
.cabeca h1{font-size:clamp(1.9rem,5vw,2.8rem);line-height:1.05;letter-spacing:-.02em}
.busca-inline{display:flex;gap:.6rem;flex-wrap:wrap;align-items:flex-start}
.busca-inline .campo-grande{flex:1 1 18rem}
.lista-perguntas,.comparar{padding-bottom:3rem;display:flex;flex-direction:column;gap:1rem}
.bloco-perguntas ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.bloco-perguntas li{border-top:1px solid var(--line)}
.bloco-perguntas summary{cursor:pointer;font-weight:700;padding:.7rem 0;min-height:44px;display:flex;align-items:center}
.bloco-perguntas .corpo{padding:0 0 .9rem;display:flex;flex-direction:column;gap:.4rem;grid-template-columns:none}
.form-comparar{max-width:48rem}
.form-comparar .par{display:flex;gap:1rem;align-items:flex-end;flex-wrap:wrap}
.form-comparar label{display:block;font-weight:700;margin-bottom:.3rem}
.form-comparar .campo-com{flex:1 1 14rem;max-width:none}
.form-comparar .campo-com .sug{top:calc(100% + 4px)}
.form-comparar .campo-com input[type="search"]{min-height:48px;border-radius:var(--raio-ctl)}
.form-comparar select{min-height:48px;border:1px solid var(--line);border-radius:var(--raio-ctl);padding:0 .8rem;font:inherit;background:var(--surface);color:var(--ink)}
.form-comparar .x{display:none;font-size:1.6rem;color:var(--ink-soft);padding-bottom:.5rem;align-self:flex-end}
@media (min-width:40rem){.form-comparar .x{display:block}}

/* capa: cada município pintado pela faixa de porte, do mais claro (até 3 mil) ao mais escuro (mais de 100 mil); fica no fim para vencer a regra base do mapa */
.mapa-svg a path.pt-ate_3k{fill:color-mix(in srgb,var(--action) 14%,var(--surface))} .mapa-svg a path.pt-3k_5k{fill:color-mix(in srgb,var(--action) 28%,var(--surface))}
.mapa-svg a path.pt-5k_10k{fill:color-mix(in srgb,var(--action) 44%,var(--surface))} .mapa-svg a path.pt-10k_20k{fill:color-mix(in srgb,var(--action) 62%,var(--surface))}
.mapa-svg a path.pt-20k_50k{fill:color-mix(in srgb,var(--action) 82%,var(--surface))} .mapa-svg a path.pt-50k_100k{fill:var(--action)} .mapa-svg a path.pt-acima_100k{fill:color-mix(in srgb,var(--action) 45%,var(--ink))}
.mapa-svg a:hover path,.mapa-svg a:focus-visible path{fill:var(--mark);fill-opacity:1;stroke:var(--ink)}
.mapa figcaption+.legenda-porte{margin-top:.4rem}

/* rodapé de marcas: faixa escura nos dois temas (--sheet), logos em branco */
.marcas{display:block;border-top:0;background:var(--rodape,var(--sheet));color:var(--sheet-ink);margin-top:2.5rem;padding:2.2rem 0 3.1rem} /* display:block: a regra genérica de footer é flex e encolhia o .wrap no celular */
.marcas .wrap{width:100%} /* centro óptico: as marcas ficam um pouco acima do meio geométrico da faixa */
.marcas-linha{display:flex;flex-wrap:wrap;gap:1.4rem 3rem;align-items:center} /* tudo numa mesma linha média: rótulos e marcas */
.marca-grupo{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem}
.marca-grupo .rot{flex-basis:100%;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;opacity:.65;font-weight:700;line-height:1}
.marca-grupo a{display:inline-flex;align-items:center;opacity:.95;border-radius:var(--raio-mini)}
.marca-grupo a:focus-visible,.sobre-marcas a:focus-visible{outline:2px solid var(--sheet-ink);outline-offset:4px} /* só no teclado */
/* hover discreto: marca colorida vira preto e branco; marca branca só baixa um pouco */
.marca-grupo a img,.sobre-marcas a img{transition:filter .15s,opacity .15s}
.marca-grupo a:hover .m-famurs,.marca-grupo a:hover .m-ulbra,.sobre-marcas a:hover .m-famurs,.sobre-marcas a:hover .m-ulbra{filter:grayscale(1) brightness(1.6)}
.marca-grupo a:hover .m-nexos,.marca-grupo a:hover .m-alright,.sobre-marcas a:hover .m-nexos,.sobre-marcas a:hover .m-alright,.marcas.compacto .marca-grupo a:hover img{filter:none;opacity:.7}
.marca-grupo img{display:block;width:auto}
.m-famurs{height:44px;transform:translateY(4px)} /* a palavra FAMURS fica acima do centro da imagem (há um slogan embaixo): desce 3px para alinhar pelo meio da palavra */
.m-ulbra{height:36px} .m-nexos{height:32px} .m-alright{height:30px}
.marcas-texto{margin:1.4rem 0 0;font-size:.82rem;opacity:.75;max-width:60rem;line-height:1.5}
@media (min-width:64rem){.marca-grupo .rot{flex-basis:auto;margin-right:.4rem}.marcas-linha{justify-content:space-between}}
/* celular: pilha simples, tudo encostado à esquerda; rótulo em cima, marcas numa linha só embaixo, menores para caber em 360 px */
@media (max-width:63.99rem){
  .marcas{padding:1.6rem 0 2rem}
  .marcas-linha{flex-direction:column;align-items:flex-start;gap:1.3rem}
  .marca-grupo{display:grid;grid-template-columns:auto auto;justify-content:start;align-items:center;gap:.55rem 1.4rem}
  .marca-grupo .rot{grid-column:1 / -1}
  .marca-grupo a{justify-self:start}
  .m-famurs{height:34px;transform:translateY(3px)} .m-ulbra{height:28px} .m-nexos{height:26px} .m-alright{height:24px}
}
@media print{.marcas{display:none}}

/* capa: o aviso "sem nota nem ranking" é um cartão comum, para não competir com as marcas do rodapé */
.sem-ranking{margin-bottom:1rem}
.sem-ranking h2{font-size:1.3rem}
.sem-ranking p{color:var(--ink-soft);margin:0}

/* rodapé compacto (páginas internas: cidade, jogo, comparar…): faixa estreita, marcas pequenas numa linha */
.marcas.compacto{padding:.9rem 0 1.1rem;margin-top:2rem}
.marcas.compacto .marcas-linha{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:.5rem 1.6rem}
.marcas.compacto .marca-grupo{display:flex;flex-wrap:nowrap;align-items:center;gap:.7rem}
.marcas.compacto .marca-grupo .rot{flex-basis:auto;font-size:.62rem;margin-right:.1rem}
.marcas.compacto .m-famurs{height:22px;transform:translateY(2px)} .marcas.compacto .m-ulbra{height:18px} .marcas.compacto .m-nexos{height:17px} .marcas.compacto .m-alright{height:16px}

/* rodapé colado na base em página curta: vence as margens das variantes (compacto inclusive) */
footer.marcas,footer.marcas.compacto{margin-top:auto}

/* ---- cartão: hierarquia (refactoring-ui). O número manda; pergunta e frase dão contexto; o resto é apoio e fica leve.
   Espaçamento em escala: 0,4 rem dentro de um grupo, 1 rem entre grupos. ---- */
.card{gap:1.4rem;padding:1.4rem 1.3rem 1.2rem} /* blocos separados por 1,4 rem; dentro do bloco, tudo junto */
.card-topo{margin-bottom:-.7rem}
.card h2{font-size:1.12rem;line-height:1.3;font-weight:var(--display-peso)}
.card .big{font-size:2.3rem;line-height:1.12}
.card .big.longo{font-size:1.6rem;line-height:1.2} /* "15 pessoas por quarteirão": menor para não virar três linhas */
.card .cena{font-size:.98rem;line-height:1.45;margin-top:-.9rem} /* a frase pertence ao número */
.figs{gap:.8rem 1.2rem;align-items:flex-start}
.figs figure{margin:0;flex:0 1 auto;max-width:calc(50% - .6rem);min-width:7.5rem}
.figs figcaption{font-size:.82rem;color:var(--ink-soft);line-height:1.3;margin-top:.35rem}
.figs figcaption b{display:block;color:var(--ink);font-weight:600;font-size:.85rem}
.cmp{font-size:.85rem;gap:.45rem}
.cmp .lab span{color:var(--ink-soft)} .cmp .lab b{font-weight:600;color:var(--ink)}
.cmp .tr{height:.42rem}
.duas{gap:1.4rem}
.serie{display:flex;flex-direction:column;gap:.5rem;margin-top:.2rem}
.serie h3{font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);font-weight:700;margin:0}
.serie .small{font-size:.9rem;color:var(--ink);margin:0}
.card .acts2{gap:.35rem;align-items:center}
.card .btn.go{min-height:38px;font-size:.88rem;padding:0 .95rem}
.card .btn.palpite-link{border-color:transparent;color:var(--action);font-size:.88rem;min-height:38px;padding:0 .55rem;text-decoration:underline;text-decoration-color:var(--action);text-underline-offset:3px}
details.exp{background:transparent;padding:0;font-size:.9rem;border-top:1px solid var(--line);border-radius:0;margin-top:-.2rem}
details.exp summary{color:var(--ink-soft);font-weight:700;min-height:42px;font-size:.88rem;flex-wrap:wrap}
details.exp summary::before{width:1.15rem;height:1.15rem;font-size:.78rem}
details.exp .corpo{padding:.1rem 0 .7rem;gap:.55rem}
details.exp .corpo p{margin:0}
details.exp .corpo .warn{background:var(--bg);border-left:3px solid var(--mark);border-radius:0 .5rem .5rem 0;padding:.4rem .7rem;font-size:.88rem}
details.exp .corpo .small{color:var(--ink-soft);font-size:.85rem}
.selo-ressalva{font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--detail);border:1px solid var(--detail);border-radius:999px;padding:.05rem .45rem;margin-left:.35rem}
/* selo da área no canto do cartão, no lugar da linha "Gestão Pública · 2025" */
.card{position:relative}
.card-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:.7rem} /* pergunta e selo lado a lado: nunca se sobrepõem */
.card-topo h2{flex:1 1 auto;min-width:0}
.selo-area{flex:none;display:inline-flex;flex-direction:column;align-items:center;gap:.1rem;line-height:1;margin-top:.1rem}
.selo-area b{width:2rem;height:2rem;border-radius:50%;background:var(--track);color:var(--ink-soft);display:inline-flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;letter-spacing:.04em;font-family:var(--body)}
.selo-area small{font-size:.62rem;color:var(--ink-soft);letter-spacing:.03em}

/* ---- auditoria de acessibilidade (15/10): alvos de toque e contraste ---- */
.marca-grupo a,.sobre-marcas a{padding:.35rem .25rem;margin:-.35rem -.25rem} /* área de toque maior sem mudar o visual */
.lista-cidades li a{display:inline-flex;align-items:center;min-height:36px;padding:.15rem .1rem}
.card.regiao .lab a{display:inline-flex;align-items:center;min-height:32px}
.small.soft a,.convite a{display:inline-block;padding:.15rem 0} /* links curtos ("Ou comece por uma destas") com altura de toque */
.small.soft a{color:var(--ink);text-decoration-color:var(--action)} /* 4,46:1 no verde ficava abaixo do mínimo; no texto passa de 10:1 */
.marcas.compacto .m-famurs{height:24px} .marcas.compacto .m-ulbra{height:20px} .marcas.compacto .m-nexos{height:19px} .marcas.compacto .m-alright{height:18px}

/* rodapé do cartão: "Entenda melhor" à esquerda, "Compartilhar" à direita; simples e limpo */
.card-rodape{display:flex;align-items:flex-start;justify-content:space-between;gap:.8rem;border-top:1px solid var(--line);padding-top:.25rem}
.card-rodape details.exp{flex:1 1 auto;min-width:0;border-top:0;margin-top:0}
.card-rodape .btn.compartilhar{flex:none;min-height:36px;font-size:.84rem;padding:0 .8rem;margin-top:.25rem;gap:.35rem}
@media (max-width:26rem){.card-rodape .btn.compartilhar span{display:none}}
details.exp summary .txt{flex:1 1 8rem;min-width:0} /* o texto quebra dentro de si; o "?" fica sempre na mesma linha */
details.exp summary .selo-ressalva{flex:none;margin-left:0}

/* ---- página da cidade no desktop: cabeçalho compacto, mapa menor e colunas da mesma altura; os cartões já aparecem na primeira tela ---- */
@media (min-width:64rem){
  /* a coluna do mapa tem a largura exata da segunda coluna de cartões: (largura − lateral 14rem − vão 1,5rem − vão dos cartões 1rem) / 2 */
  .head .wrap.head-grid{padding-block:1.6rem 1.8rem;grid-template-columns:minmax(0,1fr) calc((100% - 16.5rem) / 2);gap:.3rem 1rem;align-items:center}
  .head-grid .trilha{margin-bottom:0}
  .head h1{font-size:clamp(2.2rem,3.4vw,3rem)}
  .head-texto{gap:.6rem}
  .head-texto .resumo{font-size:1rem;line-height:1.5;max-width:40rem;margin-top:.1rem}
  .head-acts{margin-top:.5rem}
  .head-acts .btn{min-height:40px;font-size:.9rem}
  .convite-jogo{font-size:.92rem}
  .convite-jogo a{padding:.35rem 0}
  .head-grid .mapa-dobra{grid-row:1 / span 2;justify-self:stretch;width:100%;max-width:none}
  .head-grid .mapa-dobra summary{display:none} /* no desktop o mapa fica à vista, sem o "No mapa da região" */
  .head-grid .mapa-dobra .mapa{margin-top:0}
  .head-grid .mapa .mapa-svg{max-height:16.5rem;width:100%}
  .head-grid .mapa figcaption{font-size:.78rem;margin-top:.3rem;line-height:1.35}
  .head-grid .nota-enchente{font-size:.76rem;margin-top:.2rem}
  .head-grid .mapa-confirma{font-size:.85rem;padding:.45rem .6rem}
}

/* ---- capa: uma grade só. Coluna da esquerda com largura única (36 rem) para título, texto, busca, botão e convites;
   coluna da direita com mapa, nome e legenda alinhados pela mesma borda ---- */
.hero{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem;align-items:center;padding-block:1.6rem 1.6rem}
.hero-texto{max-width:36rem;width:100%;gap:.9rem}
.hero .lede{max-width:none;margin:0}
.hero form{max-width:none;margin:.2rem 0 0}
.hero #onde-estou{max-width:none}
.hero .campo-grande{flex:1 1 100%}
.convites{list-style:none;margin:.3rem 0 0;padding:0;display:flex;flex-direction:column;gap:.1rem}
.convites li{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .6rem}
.convites a{color:var(--ink);text-decoration:none;font-weight:700;display:inline;padding:.35rem 0;line-height:1.5} /* inline: a frase quebra como texto e o "Jogue" fica colado nela */
.convites a svg{width:1.1rem;height:1.1rem;color:var(--action);vertical-align:-.2em;margin-right:.4rem}
.convites a .u{text-decoration:underline;text-decoration-color:var(--action);text-decoration-thickness:2px;text-underline-offset:4px}
.convites small{color:var(--ink-soft);font-size:.85rem}
.hero .comece{margin:.2rem 0 0}
.mapa-estado{max-width:none;width:100%;margin:0}
.mapa-estado .mapa-svg{width:100%}
.mapa-estado figcaption{margin-top:.5rem;min-height:1.4em}
.associacoes .mapa-estado figcaption{min-height:2.8em}
.legenda-porte{display:grid;grid-template-columns:repeat(auto-fill,minmax(8.6rem,1fr));gap:.35rem .5rem;margin-top:.5rem}
.legenda-porte li{white-space:normal}
@media (min-width:64rem){
  .hero{grid-template-columns:minmax(0,36rem) minmax(0,1fr);gap:1rem 4.5rem;padding-block:2rem 2.2rem}
  .mapa-estado{justify-self:stretch}
}

/* tooltip dos pontos do gráfico */
.dica-pt{position:absolute;z-index:20;background:var(--ink);color:var(--surface);font-size:.82rem;line-height:1.2;padding:.35rem .55rem;border-radius:.5rem;pointer-events:none;white-space:nowrap;box-shadow:0 6px 16px rgba(0,0,0,.18)}
.dica-pt b{font-weight:700;margin-right:.25rem}
.dica-pt small{display:block;opacity:.75;font-size:.74rem;margin-top:.1rem}
circle.pt{cursor:pointer;outline:none}
circle.pt:focus-visible{stroke:var(--mark);stroke-width:3}
.serie svg circle.pt:hover{r:4.5}

/* lateral acompanhando a rolagem (desktop): o assunto em vista acende; o assunto escolhido fica só com o contorno enquanto isso */
@media (min-width:64rem){
  .corpo .chips.spy a[aria-current="true"]:not(.em-vista){background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--mark)}
  .corpo .chips.spy a[aria-current="true"]:not(.em-vista) small{color:var(--ink-soft)}
  .corpo .chips a.em-vista{background:var(--mark);color:var(--mark-ink)}
  .corpo .chips a.em-vista small{color:var(--mark-ink)}
  .corpo .chips a{transition:background .25s,color .25s,box-shadow .25s}
}

/* desktop: cabeçalho com respiro; a área dos indicadores começa logo abaixo, sem vão extra */
@media (min-width:64rem){
  .corpo{margin-top:.2rem}
  .lateral{padding-top:.2rem}
  .grid{padding-block:0 2.5rem}
}

/* capa (desktop): título termina antes do campo de busca do topo; frase de apoio mais leve; busca e botão mais estreitos; legenda em duas linhas */
.hero .lede .resto{color:var(--ink-soft);font-weight:400}
@media (min-width:64rem){
  .hero-texto{max-width:34rem}
  .hero h1.uma-linha{font-size:clamp(2.4rem,3.2vw,3.2rem)}
  .hero form,.hero #onde-estou,.hero #onde-estou-msg{max-width:22rem}
  .legenda-porte{display:flex;flex-wrap:wrap;gap:.3rem 1rem;font-size:.76rem;max-width:34rem}
  .legenda-porte i{width:.75rem;height:.75rem}
}

/* capa: a linha "Observatório dos Municípios Gaúchos · 497 cidades" fecha o quadro embaixo, alinhada com a legenda do mapa */
.fecho-capa{margin-top:.6rem}
@media (min-width:64rem){
  .hero{align-items:stretch}
  .hero-texto{display:flex;flex-direction:column}
  .fecho-capa{margin-top:auto;padding-top:1.2rem}
  .mapa-estado{display:flex;flex-direction:column}
  .mapa-estado .mapa-svg{flex:0 0 auto}
  .mapa-estado figcaption{margin-top:auto;padding-top:.6rem}
}

/* página da associação: texto à esquerda, mapa à direita (mesma lógica da página da cidade) */
.head-regiao{display:flex;flex-wrap:wrap;gap:1rem 2.5rem;align-items:flex-start}
.head-regiao>.head-texto{flex:1 1 20rem;min-width:0}
.head-regiao>.mapa{flex:1 1 20rem;max-width:30rem;margin:0}
.head-regiao>div:last-child{flex-basis:100%}
@media (min-width:64rem){
  .head .wrap.head-regiao{display:grid;grid-template-columns:minmax(0,1fr) 26rem;grid-template-rows:auto 1fr;gap:.6rem 3rem;align-items:start;padding-block:1.6rem 1.8rem} /* linha 1 só com o texto: o botão vem logo abaixo */
  .head-regiao>.head-texto{grid-column:1}
  .head-regiao>.mapa{grid-column:2;grid-row:1 / span 2;max-width:none;width:100%}
  .head-regiao>.mapa .mapa-svg{max-height:22rem;width:100%}
  .head-regiao>div:last-child{grid-column:1;flex-basis:auto}
}

/* ==========================================================================
   Estilo visual do cartaz "Municípios RS · Um almanaque popular gaúcho" (Prancheta 2, 16/10/2026)
   Só aparência: textos, funções e o menu de paletas são os do original. O estilo veste a paleta
   padrão do site (Charqueada, sem data-paleta); as outras 5 paletas continuam como no original.
   Cores do PDF: papel #F0E3DA, marrom #3A2A24, brasa #C2412B, oliva #6B6F2C, ocre #D9A62B.
   Fontes: Inter no texto corrido e Aleo nos títulos, subtítulos, números, menu, botões e abas (a Condor Compressed do PDF
   saiu, depois o Anton e a Bree Serif; a Aleo veio do esboço da capa do Kaleb, Figma 458:20262, 18/10/2026).
   PADRÃO NOVO (19/10/2026, "siga esse novo padrão de design que definimos"): as cores da capa (esboços 469:25362 e
   469:25460) valem para o site inteiro. Claro: branco, texto #542522, ocre #E2A91E, trilho #F5F4F4. Escuro: fundo #542522,
   superfícies #362022, texto creme #FFDCCE. As cores de apoio saem do desenho: vermelho da camisa #A02836, oliva da
   bombacha #544322, marrom do chapéu #955C39, creme #FFDCCE.
   ========================================================================== */
:root{--cartaz:"Aleo",Georgia,"Times New Roman",serif}

:root:not([data-paleta]){
  --display:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; --display-peso:700; --display-largura:100%;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --bg:#FFFFFF; --surface:#FFFFFF; --ink:#542522; --ink-soft:#8A6B64; --line:#ECE5E3; --track:#F5F4F4;
  --mark:#E2A91E; --mark-ink:#2F1C1C; --action:#E2A91E; --action-ink:#2F1C1C;
  --me:#542522; --ref:#A8918A; --off:#E8DFDC; --dot-off:#D6CAC6;
  --band:rgba(160,40,54,.12); --detail:#A02836; --brasa:#EB7986; --oliva:#EB7986;   /* destaques e etiquetas: no escuro o ocre #F2B65A, no claro o rosa #EB7986 (pedidos do Kaleb, 19/10) */
  --sheet:#362022; --sheet-ink:#FFDCCE; --rodape:#FFFFFF; --filete:#D6CAC6; color-scheme:light;
}
/* no escuro o fundo do site é o marrom mais escuro da paleta (#2F1C1C), e a capa (#542522) vira um cartão sobre ele quando a
   pessoa rola (pedido do Kaleb, 19/10/2026; antes o fundo era o mesmo #542522 da capa) */
@media (prefers-color-scheme:dark){ :root:not([data-paleta]):not([data-theme="light"]){
  --bg:#2F1C1C; --surface:#362022; --ink:#FFDCCE; --ink-soft:#C9AAA0; --line:#6B3D39; --track:#47292B;
  --mark:#E2A91E; --mark-ink:#2F1C1C; --action:#E2A91E; --action-ink:#2F1C1C;
  --me:#FFDCCE; --ref:#C9AAA0; --off:#6E4440; --dot-off:#7E524C;
  --band:rgba(255,220,206,.12); --detail:#F29A8B; --brasa:#F2B65A; --oliva:#F2B65A;
  --sheet:#2A1718; --sheet-ink:#FFDCCE; --rodape:#2F1C1C; --filete:#7E524C; color-scheme:dark; } }
:root:not([data-paleta])[data-theme="dark"]{
  --bg:#2F1C1C; --surface:#362022; --ink:#FFDCCE; --ink-soft:#C9AAA0; --line:#6B3D39; --track:#47292B;
  --mark:#E2A91E; --mark-ink:#2F1C1C; --action:#E2A91E; --action-ink:#2F1C1C;
  --me:#FFDCCE; --ref:#C9AAA0; --off:#6E4440; --dot-off:#7E524C;
  --band:rgba(255,220,206,.12); --detail:#F29A8B; --brasa:#F2B65A; --oliva:#F2B65A;
  --sheet:#2A1718; --sheet-ink:#FFDCCE; --rodape:#2F1C1C; --filete:#7E524C; color-scheme:dark; }

/* ---------- letra de títulos (Aleo SemiBold, maiúsculas e minúsculas como no esboço): títulos, subtítulos e números.
   A Inter fica no texto corrido, nas notas e nos dados miúdos. */
:root:not([data-paleta]) h1,
:root:not([data-paleta]) .big:not(.btn){font-family:var(--cartaz);font-weight:600;font-stretch:100%;text-transform:none;letter-spacing:0}
:root:not([data-paleta]) h1{line-height:1.05}
:root:not([data-paleta]) .head h1{font-size:clamp(2.6rem,6vw,4.4rem);letter-spacing:0;line-height:1.05}
:root:not([data-paleta]) .big:not(.btn){font-size:2.4rem;line-height:1.2}  /* 1,2: quando o número quebra em duas linhas, a faixa ocre de uma não cobre a outra */
/* o número grande de todo cartão no mesmo tamanho (pedido do Kaleb, 19/10/2026): 32 px, o que o original dava só aos longos
   ("17 pessoas por quarteirão"), para esses continuarem numa linha */
:root:not([data-paleta]) .card .big,:root:not([data-paleta]) .card .big.longo{font-size:2rem;line-height:1.15}
/* o número grande dos cartões (e do Jogo e do Retrato): sem a faixa ocre atrás, só a letra, na Aleo e na cor dos destaques de
   texto (#F2B65A no escuro, #EB7986 no claro), pedido do Kaleb, 19/10/2026 */
:root:not([data-paleta]) .big .mark{background:none;padding:0;border-radius:0;font-family:var(--cartaz);font-weight:700;letter-spacing:0;color:var(--brasa)}
:root:not([data-paleta]) .folha .big:not(.btn){font-size:1.7rem;margin:.35rem 0 .2rem}
:root:not([data-paleta]) .folha .mini h2{line-height:1.25}
:root:not([data-paleta]) h1 .mark{background:none;color:var(--brasa);padding:0}  /* no cartaz o destaque é a cor brasa, não a faixa */
:root:not([data-paleta]) .eyebrow{font-family:var(--body);font-weight:600;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--oliva);line-height:1.3}
:root:not([data-paleta]) .card h2,
:root:not([data-paleta]) .tile b,
:root:not([data-paleta]) .secao:not(.vh),
:root:not([data-paleta]) main > section:not(.card) > h2,
:root:not([data-paleta]) .lista-cidades h2,
:root:not([data-paleta]) .mais h3{font-family:var(--cartaz);font-weight:600;letter-spacing:0;text-transform:none}
/* perguntas são títulos (como nos cartões): na Aleo também na lista de Perguntas e na legenda do mapa da capa */
:root:not([data-paleta]) .bloco-perguntas details>summary,:root:not([data-paleta]) .mapa-estado figcaption{font-family:var(--cartaz);font-weight:600;letter-spacing:0}
/* controles na Aleo e em pílula, como a busca e o menu da capa */
:root:not([data-paleta]) .button,:root:not([data-paleta]) .tabs__tab,:root:not([data-paleta]) .tag,:root:not([data-paleta]) .chip-cid{font-family:var(--cartaz);font-weight:600;letter-spacing:0}
:root:not([data-paleta]) .button,:root:not([data-paleta]) .tag,:root:not([data-paleta]) .chip-cid,
:root:not([data-paleta]) .search-field__group,:root:not([data-paleta]) .cityfield input,:root:not([data-paleta]) .text-field .input{border-radius:999px}
:root:not([data-paleta]) .card.sem-ranking h2{font-size:1.5rem;line-height:1.2}
/* chamada das associações, no pé da Início (Kaleb, 19/10/2026: "arruma isso aqui, ta horrível"; o mapa vazava pelo pé do
   cartão e o texto ficava miúdo num cartão enorme). Agora no padrão dos convites da capa e da janela de mapa: cartão de
   cantos 24 e respiro 40, título na Aleo 40, texto no tom suave, botão ocre com o ícone de Associações, e o mapa num painel
   próprio com o fundo dos mapas, inteiro dentro do cartão. O painel todo é o link (no hover o mapa cresce um pouco) */
:root:not([data-paleta]) .card.chamada-assoc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,22rem);align-items:center;gap:48px;
  margin:64px 0 24px;padding:40px;border-radius:24px}
:root:not([data-paleta]) .chamada-assoc > .stack{display:flex;flex-direction:column;align-items:flex-start;gap:16px;max-width:34rem;margin:0}
:root:not([data-paleta]) .chamada-assoc .eyebrow{margin:0}
:root:not([data-paleta]) .card.chamada-assoc h2{margin:0;font-family:var(--cartaz);font-weight:600;font-size:2.5rem;line-height:1.15;letter-spacing:0;text-transform:none;color:var(--ink)}
:root:not([data-paleta]) .chamada-assoc > .stack p{margin:0;font-size:1.0625rem;line-height:1.6;color:var(--ink-soft)}
:root:not([data-paleta]) .chamada-assoc .acts2{margin:8px 0 0}
:root:not([data-paleta]) .chamada-assoc .acts2 .button{height:48px;min-height:48px;padding:0 24px;gap:8px;border:0;border-radius:999px;justify-content:center;
  background-color:var(--capa-acao);color:var(--capa-acao-ink);font-size:1rem;text-decoration:none}
:root:not([data-paleta]) .chamada-assoc .acts2 .button:hover{background-color:var(--capa-acao-hover);color:var(--capa-acao-ink)}
:root:not([data-paleta]) .chamada-assoc .acts2 .button svg.hi{width:20px;height:20px;flex:none}
/* o painel do mapa tem a altura do texto (o texto manda na altura do cartão; antes o painel de 391 px deixava sobra em cima e
   embaixo do texto, Kaleb, 19/10) e o mapa cabe dentro dele, centrado */
:root:not([data-paleta]) .chamada-assoc .mapa-mini{position:relative;display:block;align-self:stretch;width:100%;min-height:280px;max-width:none;margin:0;padding:0;border-radius:16px;
  background:var(--mapa-fundo);overflow:hidden}
:root:not([data-paleta]) .chamada-assoc .mapa-mini svg{position:absolute;inset:8px;display:block;width:calc(100% - 16px);height:calc(100% - 16px);max-width:none;max-height:none;margin:0;
  transition:transform .4s cubic-bezier(.2,.7,.2,1)}
:root:not([data-paleta]) .chamada-assoc .mapa-mini:hover svg{transform:scale(1.03)}
:root:not([data-paleta]) .chamada-assoc .mapa-mini:focus-visible{outline:2px solid var(--action);outline-offset:2px}
@media (prefers-reduced-motion:reduce){ :root:not([data-paleta]) .chamada-assoc .mapa-mini svg{transition:none} }
@media (max-width:63.99rem){   /* tablet: as duas colunas continuam, mais justas */
  :root:not([data-paleta]) .card.chamada-assoc{grid-template-columns:minmax(0,1fr) minmax(0,20rem);gap:32px;padding:32px}
  :root:not([data-paleta]) .card.chamada-assoc h2{font-size:2rem}
}
@media (max-width:47.99rem){   /* celular: o texto e, embaixo, o mapa */
  :root:not([data-paleta]) .card.chamada-assoc{grid-template-columns:minmax(0,1fr);gap:28px;margin-top:48px;padding:24px}
  :root:not([data-paleta]) .card.chamada-assoc h2{font-size:1.75rem}
  :root:not([data-paleta]) .chamada-assoc .acts2{align-self:stretch}
  :root:not([data-paleta]) .chamada-assoc .acts2 .button{width:100%}   /* largura toda, como nos convites */
  :root:not([data-paleta]) .chamada-assoc .mapa-mini{min-height:0;aspect-ratio:1.075}   /* no celular o painel vem embaixo do texto: altura pela largura */
}

/* ---------- carregamento: o mate da cuia (e o fio de água) em verde de erva, não no ocre do destaque. Vale para todas as paletas */
:root{--erva:#5E8C31}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){--erva:#7FAE45} }
:root[data-theme="dark"]{--erva:#7FAE45}
.splash .agua{stroke:var(--erva)}
/* o "Preparando o mate" na letra da identidade (Aleo 600, como os títulos e o menu), não no Inter miúdo do original (Kaleb, 19/10) */
:root:not([data-paleta]) .splash-txt{font-family:var(--cartaz);font-weight:600;font-size:1.125rem;line-height:1.3;letter-spacing:0;color:var(--capa-ink)}
.splash .nivel{fill:var(--erva)}
/* a casca da cuia: no escuro, sobre o fundo do site (o marrom mais escuro desde 19/10/2026), o #362022 sumia; vai o marrom da cuia
   da capa no computador (#955C39). No claro continua a do desenho */
:root{--cuia-casca:#362022}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){--cuia-casca:#955C39} }
:root[data-theme="dark"]{--cuia-casca:#955C39}
.splash .cuia-casca{fill:var(--cuia-casca)}
/* a cuia do Kaleb (Cuia.svg, 19/10/2026; prévia aprovada em previa-carregamento.html): 184 px de altura com o fio; o mate
   sobe do pé do miolo (y 285 do desenho) até perto da boca (y 158) e o fio é um pouco mais largo.
   O mate enche UMA vez, no tempo em que o carregamento fica na tela (--enche, posto pelo app: 1 s ao abrir o site, um pouco
   menos que os 0,65 s de uma troca de página), e fica cheio enquanto a tela some. Antes ele levava 2,25 s e quase nunca
   aparecia cheio (o Kaleb, 19/10/2026). Sobe rápido no começo e assenta no fim */
/* o CSS crítico do original tem html.carregando .splash .mate{width:112px}, mais forte: sem repetir o estado aqui, a cuia
   abria esticada (112 x 256) e encolhia de uma vez quando a primeira página tirava o "carregando" (o Kaleb viu, 19/10/2026) */
.splash .mate.cuia-nova,html.carregando .splash .mate.cuia-nova{width:auto;height:184px}
.splash .cuia-nova .agua{animation:escorre-cuia .45s linear infinite}
.splash .cuia-nova .nivel{animation:enche-cuia var(--enche,1000ms) cubic-bezier(.3,.7,.4,1) both}
@keyframes escorre-cuia{to{stroke-dashoffset:-19}}
@keyframes enche-cuia{from{transform:translateY(0)}to{transform:translateY(-120px)}}   /* para um pouco abaixo da boca: a onda segue à vista com a cuia cheia */
/* o líquido mexendo devagar (19/10/2026): a onda da frente corre um comprimento de onda (54) em 2,6 s; a de trás, mais
   clara, corre ao contrário em 3,8 s. Em laço, sem emenda */
.splash .cuia-nova .onda{animation:onda-vai 2.6s linear infinite}
.splash .cuia-nova .onda-tras{opacity:.45;animation:onda-volta 3.8s linear infinite}
@keyframes onda-vai{to{transform:translateX(54px)}}
@keyframes onda-volta{to{transform:translateX(-54px)}}
@media (prefers-reduced-motion:reduce){ .splash .cuia-nova .nivel{transform:translateY(-85px)} }   /* parada, meio cheia */

/* ---------- número e unidade: o número na letra de títulos; "em cada 100", "por mil", "moradores" menores, na Inter */
.big .mk-uni{font-size:.55em;font-weight:600;margin-left:.25em}
:root:not([data-paleta]) .big .mk-uni{font-family:var(--cartaz);font-size:1em;margin-left:0;text-transform:none;letter-spacing:0;font-weight:700}   /* a unidade na Aleo e do tamanho do número (pedidos do Kaleb, 19/10) */
:root:not([data-paleta]) .palpite .big .unid{font-family:var(--cartaz);font-size:1em;text-transform:none;letter-spacing:0;font-weight:600}

/* ---------- mapa por tamanho: 7 tons em escada de claridade com as cores do desenho (creme, ocre, marrom, vermelho da
   camisa, marrom-escuro da capa), um degrau visível por faixa. No escuro a escada sobe do escuro para o creme */
:root:not([data-paleta]){--pt1:#FCEBDD;--pt2:#F6D1A6;--pt3:#EEB760;--pt4:#DB9A2A;--pt5:#C2692F;--pt6:#A02836;--pt7:#542522}
@media (prefers-color-scheme:dark){ :root:not([data-paleta]):not([data-theme="light"]){--pt1:#6E3C35;--pt2:#8E4C33;--pt3:#B3652F;--pt4:#D58E27;--pt5:#E9B54A;--pt6:#F4D396;--pt7:#FFEFE2} }
:root:not([data-paleta])[data-theme="dark"]{--pt1:#6E3C35;--pt2:#8E4C33;--pt3:#B3652F;--pt4:#D58E27;--pt5:#E9B54A;--pt6:#F4D396;--pt7:#FFEFE2}
:root:not([data-paleta]) .mapa-svg a path.pt-ate_3k{fill:var(--pt1)} :root:not([data-paleta]) .legenda-porte i.pt-ate_3k{background:var(--pt1)}
:root:not([data-paleta]) .mapa-svg a path.pt-3k_5k{fill:var(--pt2)} :root:not([data-paleta]) .legenda-porte i.pt-3k_5k{background:var(--pt2)}
:root:not([data-paleta]) .mapa-svg a path.pt-5k_10k{fill:var(--pt3)} :root:not([data-paleta]) .legenda-porte i.pt-5k_10k{background:var(--pt3)}
:root:not([data-paleta]) .mapa-svg a path.pt-10k_20k{fill:var(--pt4)} :root:not([data-paleta]) .legenda-porte i.pt-10k_20k{background:var(--pt4)}
:root:not([data-paleta]) .mapa-svg a path.pt-20k_50k{fill:var(--pt5)} :root:not([data-paleta]) .legenda-porte i.pt-20k_50k{background:var(--pt5)}
:root:not([data-paleta]) .mapa-svg a path.pt-50k_100k{fill:var(--pt6)} :root:not([data-paleta]) .legenda-porte i.pt-50k_100k{background:var(--pt6)}
:root:not([data-paleta]) .mapa-svg a path.pt-acima_100k{fill:var(--pt7)} :root:not([data-paleta]) .legenda-porte i.pt-acima_100k{background:var(--pt7)}

/* ---------- mapa das associações (Início e Associações; desenho do gen-associacoes.js): 6 cores tiradas da ilustração da capa,
   o ocre do moletom, a terracota, o vermelho da camisa, o verde-oliva da bombacha, o rosado da pele e o marrom da calça.
   Nenhuma associação tem a cor de uma vizinha, então as formas se encostam sem contorno (pedido do Kaleb, 19/10/2026:
   "o desenho e a paleta do mapa estão feios" e, logo depois, nada de bordas). No escuro o vermelho e o oliva clareiam um degrau */
:root:not([data-paleta]){--as0:#E2A91E;--as1:#C2692F;--as2:#A02836;--as3:#7C8235;--as4:#E8B49B;--as5:#8D5737}
@media (prefers-color-scheme:dark){ :root:not([data-paleta]):not([data-theme="light"]){--as2:#C24A55;--as3:#939A47} }
:root:not([data-paleta])[data-theme="dark"]{--as2:#C24A55;--as3:#939A47}
:root:not([data-paleta]) .mapa-assoc > path{stroke:none}
:root:not([data-paleta]) .mapa-assoc a path{stroke:none;transition:fill .15s}
:root:not([data-paleta]) .mapa-assoc .c0{fill:var(--as0)} :root:not([data-paleta]) .mapa-assoc .c1{fill:var(--as1)} :root:not([data-paleta]) .mapa-assoc .c2{fill:var(--as2)}
:root:not([data-paleta]) .mapa-assoc .c3{fill:var(--as3)} :root:not([data-paleta]) .mapa-assoc .c4{fill:var(--as4)} :root:not([data-paleta]) .mapa-assoc .c5{fill:var(--as5)}
:root:not([data-paleta]) .mapa-assoc a:hover path,:root:not([data-paleta]) .mapa-assoc a:focus-visible path,:root:not([data-paleta]) .mapa-assoc a.on path{fill:var(--ink)}

/* ---------- capas centralizadas (início, associações, jogo): texto, busca e convites no meio; o mapa logo abaixo.
   Só na paleta padrão; as outras paletas continuam com a capa do original (texto à esquerda e mapa à direita). */
:root:not([data-paleta]) .hero{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:0;padding-block:2.4rem 0;text-align:center;align-items:start}
:root:not([data-paleta]) .hero-texto{max-width:44rem;width:100%;display:flex;flex-direction:column;align-items:center;gap:1rem}
:root:not([data-paleta]) .hero .lede{max-width:38rem;margin:0}
:root:not([data-paleta]) .hero form{width:100%;max-width:36rem;flex-wrap:wrap;justify-content:center;margin:.3rem 0 0}
:root:not([data-paleta]) .hero .campo-grande{flex:1 1 14rem}
:root:not([data-paleta]) .hero form .button[type="submit"]{flex:none}
:root:not([data-paleta]) .hero #onde-estou.button{width:auto}
:root:not([data-paleta]) .hero #onde-estou-msg,:root:not([data-paleta]) .aviso-assunto{max-width:36rem}
:root:not([data-paleta]) .convites{align-items:center;margin:0}
:root:not([data-paleta]) .convites li{justify-content:center}
:root:not([data-paleta]) .mapa-estado{display:flex;flex-direction:column;align-items:center;width:100%;max-width:36rem;justify-self:center;margin-top:2.4rem;padding-block:2.4rem 1rem;border-top:1px solid var(--line)}
:root:not([data-paleta]) .mapa-estado figcaption{order:-1;margin:0 0 1rem;padding:0;min-height:0;font-size:1.25rem;font-weight:700;color:var(--ink)}
:root:not([data-paleta]) .mapa-estado .legenda-porte{align-self:stretch;justify-content:center}

/* ---------- topo (todas as páginas): logotipo, menu em pílulas e o botão redondo do tema, como no esboço.
   A partir de 1280 px o menu fica no meio da tela; abaixo disso ele vem logo depois do logotipo, para caber a busca do topo. */
:root:not([data-paleta]) .top .wrap{max-width:none;padding-inline:clamp(1rem,2.8vw,2.5rem)}
:root:not([data-paleta]) .top .tema.button{width:40px;height:40px;min-width:40px;min-height:40px;padding:0;border:0;border-radius:999px;background-color:var(--track);color:var(--ink)}
:root:not([data-paleta]) .top .tema.button:hover,:root:not([data-paleta]) .top .tema.button:focus-visible{background-color:var(--line);color:var(--ink)}
/* no celular a busca do topo (só a página Sobre tem) desce para uma linha dela: na mesma linha espremia o logotipo a 22 px */
@media (max-width:48rem){ :root:not([data-paleta]) .top:not(.com-cidade) .cityfield{flex-basis:100%} }
@media (min-width:64rem){
  :root:not([data-paleta]) .top .wrap{padding-block:20px;padding-inline:1rem;column-gap:14px}
  :root:not([data-paleta]) .top .logo .marca-mrs{height:60px;margin-block:-10px}   /* 151 px de largura (era 52, "aumente um pouco", 19/10) */
  :root:not([data-paleta]) .top .wrap:not(:has(.cityfield)) .tema{margin-left:auto}   /* sem a busca do topo, o tema vai para o canto */
  :root:not([data-paleta]) .top nav.menu{gap:4px;margin-left:0}
  :root:not([data-paleta]) .top nav.menu a.link{display:inline-flex;align-items:center;height:40px;padding:0 10px;border:0;border-radius:999px;
    font-family:var(--cartaz);font-weight:600;font-size:.9375rem;line-height:1;color:var(--ink);text-decoration:none;white-space:nowrap;transition:background-color .15s,color .15s}
  :root:not([data-paleta]) .top nav.menu a.link:hover{background-color:var(--track);text-decoration:none}
  :root:not([data-paleta]) .top nav.menu a.link[aria-current="page"]{background-color:var(--action);color:var(--action-ink);text-decoration:none}
  :root:not([data-paleta]) .top nav.menu a.link:focus-visible{outline:2px solid var(--action);outline-offset:2px}
}
@media (min-width:80rem){
  :root:not([data-paleta]) .top .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:16px;padding-inline:clamp(1rem,2.8vw,2.5rem)}
  :root:not([data-paleta]) .top .logo{grid-column:1;grid-row:1;justify-self:start}
  :root:not([data-paleta]) .top nav.menu{grid-column:2;grid-row:1;gap:8px}
  :root:not([data-paleta]) .top nav.menu a.link{padding:0 16px;font-size:1rem}
  :root:not([data-paleta]) .top .tema{grid-column:3;grid-row:1;justify-self:end}
  :root:not([data-paleta]) .top .cityfield{grid-column:3;grid-row:1;justify-self:end;width:min(16rem,calc(100% - 56px));max-width:none;margin:0 56px 0 0}
}
/* ---------- capa do início (esboços do Kaleb no Figma: 469:25362 escuro e 469:25460 claro, 19/10/2026; o celular saiu deles).
   O gaúcho passa o chimarrão para um jovem de moletom, e a busca fica na frente da cuia, SEMPRE no centro da tela (pedido
   do Kaleb; no esboço ela está em y 450 de 900). O desenho é um palco de 1376 x 900 posicionado para a cuia (y 450 do
   esboço) cair atrás da busca: topo de cada camada = --meio + (y no esboço - 450) * --u, e --u é quanto vale 1 px do esboço.
   Duas composições:
   - larga (768 px ou mais): os dois inteiros, um em cada borda;
   - estreita (celular): só cabem o gaúcho e as mãos do jovem. O palco mostra do rosto do gaúcho (x 60 do esboço) até a ponta
     dos dedos do jovem (x 880); o título sobe para o alto da faixa e o chapéu fica logo abaixo dele.
   Título e busca não esticam com o desenho. Só na paleta padrão: nas outras os desenhos somem, .capa-miolo não existe para o
   layout (display:contents) e a capa é a do original.
   Pontos que os esboços não resolviam: "Associações" com til; um botão por vez na pílula ("Ver cidade" aparece ao digitar);
   um ocre só no menu e no botão (#E2A91E, como no esboço claro); o texto de apoio e a etiqueta vão para logo abaixo da
   faixa; "Voltar para" fica entre o título e a busca; os recados da localização viram um cartão embaixo da busca, por cima
   do desenho; no claro, filete de 1 px na pílula e no pé da faixa.
   Os convites (jogo e desafio do dia) entraram na faixa em 19/10/2026 (Figma 484:20394): dois cartões embaixo da busca. */
.capa-fundo{display:none}
.capa-miolo{display:contents}
.capa-dupla{display:none}
/* claro e escuro: o desenho é o mesmo; muda o fundo, o texto, a pílula e o halo dela. --barra-ativa é o bloco da aba
   ativa na barra do celular (esboço 497:16585): no escuro a cor da faixa sobre a barra #362022; no claro o trilho sobre a barra
   branca. Sem contornos desde 19/10/2026: no claro a pílula e os convites passam do branco com filete ao trilho #F5F4F4, e o
   cartão branco ganha só a sombra macia --cartao-sombra (no escuro a cor já separa, e não há sombra) */
:root{--capa:#FFFFFF;--capa-ink:#542522;--capa-ink-soft:#8A6B64;--capa-chip:#F5F4F4;--capa-chip-hover:#ECE8E6;--capa-pilula:#F5F4F4;--capa-dica:#9B7E78;
  --capa-halo:rgba(54,32,34,.05);--capa-sombra:0 8px 24px rgba(54,32,34,.12);--cartao-sombra:0 1px 2px rgba(54,32,34,.05),0 6px 20px rgba(54,32,34,.07);
  --capa-acao:#E2A91E;--capa-acao-hover:#EDB93A;--capa-acao-ink:#2F1C1C;--barra-fundo:#FFFFFF;--barra-ativa:#F5F4F4;--barra-sombra:0 8px 24px rgba(54,32,34,.12);
  --mapa-fundo:#F5F4F4;   /* fundo dos mapas: no escuro, o da capa (#542522), que contrasta com o fundo do site (#2F1C1C desde 19/10/2026) como o cartão da capa */
  --logo-mapa:#955C39}    /* o mapa do logotipo: o marrom do arquivo, no mesmo tom nos dois temas (pedido do Kaleb, 19/10; o ocre do claro saiu) */
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){--capa:#542522;--capa-ink:#FFDCCE;--capa-ink-soft:#C9AAA0;--capa-chip:#362022;--capa-chip-hover:#47292B;
  --capa-pilula:#362022;--capa-halo:rgba(54,32,34,.25);--capa-sombra:0 8px 24px rgba(54,32,34,.4);--cartao-sombra:none;--barra-fundo:#362022;--barra-ativa:#542522;--barra-sombra:0 0 0 transparent;--mapa-fundo:#542522} }
:root[data-theme="dark"]{--capa:#542522;--capa-ink:#FFDCCE;--capa-ink-soft:#C9AAA0;--capa-chip:#362022;--capa-chip-hover:#47292B;
  --capa-pilula:#362022;--capa-halo:rgba(54,32,34,.25);--capa-sombra:0 8px 24px rgba(54,32,34,.4);--cartao-sombra:none;--barra-fundo:#362022;--barra-ativa:#542522;--barra-sombra:0 0 0 transparent;--mapa-fundo:#542522}   /* no escuro a barra não tem sombra, como no esboço */

/* topo da capa: da cor da faixa. No celular tem 60 px cravados (o centro da tela é medido a partir dele) */
:root:not([data-paleta]) .top.top-capa{background:var(--capa);border-bottom:0;color:var(--capa-ink)}
:root:not([data-paleta]) .top.top-capa .wrap{min-height:60px;padding-block:10px}
:root:not([data-paleta]) .top-capa .logo,:root:not([data-paleta]) .top-capa .logo .marca-mrs{color:var(--capa-ink)}
:root:not([data-paleta]) .top-capa .tema.button{background-color:var(--capa-chip);color:var(--capa-ink)}
:root:not([data-paleta]) .top-capa .tema.button:hover,:root:not([data-paleta]) .top-capa .tema.button:focus-visible{background-color:var(--capa-chip-hover);color:var(--capa-ink)}
:root:not([data-paleta]) .top-capa .tema.button:focus-visible{outline:2px solid var(--capa-acao);outline-offset:2px}
:root:not([data-paleta]) .top-capa .sobre-link.button{background-color:var(--capa-chip);color:var(--capa-ink);border-color:transparent}
@media (min-width:64rem){
  /* computador: uma caixa de 1056 px, 30 px abaixo da borda, com o logotipo, o menu e o tema (o topo inteiro tem 102 px) */
  :root:not([data-paleta]) .top.top-capa{padding-top:30px}
  :root:not([data-paleta]) .top.top-capa .wrap{max-width:1056px;min-height:72px;padding:16px 16px 16px 32px;column-gap:16px}
  :root:not([data-paleta]) .top-capa nav.menu{gap:8px}
  :root:not([data-paleta]) .top-capa nav.menu a.link{padding:0 16px;font-size:1rem;color:var(--capa-ink)}
  :root:not([data-paleta]) .top-capa nav.menu a.link:hover{background-color:color-mix(in srgb,var(--capa-ink) 9%,transparent)}
  :root:not([data-paleta]) .top-capa nav.menu a.link[aria-current="page"]{background-color:var(--capa-acao);color:var(--capa-acao-ink)}
  :root:not([data-paleta]) .top-capa nav.menu a.link:focus-visible{outline-color:var(--capa-acao)}
}

/* rolagem da capa (app-clone.js, palcoDaCapa e rolaCapa; pedido do Kaleb, 19/10/2026): o palco segura o topo e a faixa na tela
   por um trecho da rolagem (a pista) enquanto eles encolhem até um cartão com 32 px de margem em todos os lados, de cantos
   redondos, sobre o fundo do site; depois o cartão sobe com a rolagem. O app escreve a escala, o deslocamento e o recorte */
:root:not([data-paleta]) .capa-palco{position:relative}
:root:not([data-paleta]) .capa-cartao{position:sticky;top:0;z-index:1;background:var(--capa);transform-origin:50% 0}
:root:not([data-paleta]) .capa-cartao.cartao-ativo{will-change:transform,clip-path;box-shadow:var(--cartao-sombra)}
:root:not([data-paleta]) .capa-cartao > .top{position:relative}
:root:not([data-paleta]) .capa-quadro > .hero.capa{margin:0}
/* na composição estreita os convites ficam fora do cartão, logo depois dele */
:root:not([data-paleta]) .convites-capa.fora-da-faixa{margin:0 auto;width:100%;max-width:700px}
/* o primeiro bloco depois do cartão fica a 32 dele, 16 no celular (o app já desconta essa distância no pé do palco) */
:root:not([data-paleta]) .capa-palco ~ main > :first-child,:root:not([data-paleta]) .capa-palco ~ main > .mapa-estado.mapa-google:first-child{margin-top:0}
:root:not([data-paleta]) .capa-palco ~ main > .convites-capa.fora-da-faixa + .mapa-estado.mapa-google{margin-top:48px}
/* a faixa: do topo até o fim da tela. Linha 1 = o título, linha 2 = o vão entre título e busca ("Voltar para"),
   linha 3 = a busca, centrada no meio da tela; linhas 4 e 5 = os recados */
:root:not([data-paleta]) #app{overflow-x:clip}   /* a faixa tem 100vw: sem isso a barra de rolagem empurraria a página para o lado */
:root:not([data-paleta]) .hero.capa{padding-block:0}
:root:not([data-paleta]) .capa .hero-texto{max-width:none;gap:0}
:root:not([data-paleta]) .capa-miolo{--topo:60px;--meio:calc(50svh - var(--topo));--ancora:var(--meio);
  position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;align-content:start;
  grid-template-rows:calc(var(--meio) - 28px - var(--vao)) var(--vao) auto auto auto;
  width:100%;min-height:calc(100svh - var(--topo));padding:0 0 48px;color:var(--capa-ink);font-family:var(--cartaz)}
:root:not([data-paleta]) .capa-fundo{display:block;position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;margin-left:-50vw;
  background:var(--capa);overflow:hidden;pointer-events:none}
:root:not([data-paleta]) .capa-dupla{display:block;position:absolute;inset:0}
:root:not([data-paleta]) .capa-dupla > img,:root:not([data-paleta]) .capa-dupla > svg{position:absolute;display:block;max-width:none;height:auto}
/* calça do jovem e cuia: no claro as cores do desenho; no escuro as dos quadros do Kaleb (computador 484:20394: calça
   #8D5737 e cuia #955C39, porque ela fica atrás da busca #362022; celular 497:16585: calça #955C39 e a cuia escura, que ali
   está sobre a faixa) */
:root:not([data-paleta]) .capa-dupla .calca{fill:var(--calca)}
:root:not([data-paleta]) .capa-dupla .cuia{fill:var(--cuia)}
:root:not([data-paleta]) .capa-miolo{--calca:#542522;--cuia:#362022}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .capa-miolo{--calca:var(--calca-escuro);--cuia:var(--cuia-escuro)} }
:root[data-theme="dark"] .capa-miolo{--calca:var(--calca-escuro);--cuia:var(--cuia-escuro)}
/* cada camada: topo = centro da tela + (y no esboço - 450) * u; a borda esquerda vem de --p1 (gaúcho) e --p2 (jovem) */
:root:not([data-paleta]) .capa-dupla .gaucho-cores{left:var(--p1);top:calc(var(--ancora) - 339.8807 * var(--u));width:calc(754.042 * var(--u))}
:root:not([data-paleta]) .capa-dupla .gaucho-tracos{left:calc(var(--p1) - 1.586 * var(--u));top:calc(var(--ancora) - 342 * var(--u));width:calc(758.01 * var(--u))}   /* o traço de 4 px passa 2 px de cada lado */
:root:not([data-paleta]) .capa-dupla .jovem-cores{left:var(--p2);top:calc(var(--ancora) - 292.0176 * var(--u) + var(--dj,0px));width:calc(730.892 * var(--u))}
:root:not([data-paleta]) .capa-dupla .jovem-tracos{left:calc(var(--p2) - 1.8044 * var(--u));top:calc(var(--ancora) - 294.327 * var(--u) + var(--dj,0px));width:calc(734.85 * var(--u))}   /* --dj: no celular o jovem sobe (esboço 497:16585) */

/* bando de quero-queros (desenho do Kaleb, 19/10/2026): um sozinho e um par atravessam o céu da esquerda para a direita,
   atrás dos personagens e do título; só na composição larga (no celular não sobra céu). Tamanho e altura no palco
   (--t = largura em px do esboço; --y0/--y1/--y2 =
   topo do pássaro no começo, no meio e no fim, em y do esboço). Cada um cruza em 60% do --dur e espera fora da tela o resto;
   bate as asas no seu --bate, e o corpo sobe na descida da asa.
   Contorno com ajuste óptico pela largura real do pássaro na tela (--L): no arquivo o traço é 4 em 280; o ideal seria
   4 x raiz(L / 280) px, que afina com o pássaro mas menos do que a conta direta. Como o CSS não tira raiz de medida, vai a
   reta que encosta nessa curva entre 25 e 100 px (0,8 px + 1,59% de L; erra até 6%): 1,5 px num pássaro de 42, 1,9 num
   de 70, 2,4 num de 100. Vale em qualquer tela, sem tabela por tamanho. */
:root:not([data-paleta]) .qq-bando{position:absolute;inset:0;pointer-events:none}
:root:not([data-paleta]) .passaro{--L:calc(var(--t) * var(--u));position:absolute;left:0;top:var(--ancora);width:var(--L);animation:qq-x var(--dur) linear var(--atraso) infinite}
:root:not([data-paleta]) .passaro .qq-rota{animation:qq-y var(--dur) ease-in-out var(--atraso) infinite}
:root:not([data-paleta]) .passaro .qq-corpo{animation:qq-bob var(--bate) ease-in-out var(--fase) infinite}
:root:not([data-paleta]) .passaro .qq{display:block;width:100%;height:auto;overflow:visible}
/* p1 sozinho, já no meio do céu quando a página abre; o par (p2 e p3, 1,1 s atrás) entra 6 s depois */
:root:not([data-paleta]) .passaro.p1{--t:70;--y0:300;--y1:118;--y2:230;--dur:22s;--atraso:-5s;--bate:.62s;--fase:0s;--parado:30vw}
:root:not([data-paleta]) .passaro.p2{--t:48;--y0:250;--y1:128;--y2:180;--dur:28s;--atraso:-22s;--bate:.56s;--fase:-.2s;--parado:58vw}
:root:not([data-paleta]) .passaro.p3{--t:42;--y0:268;--y1:150;--y2:200;--dur:28s;--atraso:-20.9s;--bate:.6s;--fase:-.35s;--parado:54vw}
:root:not([data-paleta]) .passaro .qq-1{fill:#955C39}
:root:not([data-paleta]) .passaro .qq-2{fill:#E2A91E}
:root:not([data-paleta]) .passaro .qq-3{fill:#FFDCCE}
:root:not([data-paleta]) .passaro .qq-4{fill:#362022}
:root:not([data-paleta]) .passaro .qq-5{fill:none;stroke:#362022;stroke-linecap:round;stroke-linejoin:round;stroke-width:calc(.8px + .0159 * var(--L));vector-effect:non-scaling-stroke}
/* as 4 posições de asa (1 no alto, 2 reta, 3 descendo, 4 embaixo), no ciclo 1-2-3-4-3-2 do arquivo */
:root:not([data-paleta]) .passaro .qq-f{visibility:hidden;animation:var(--bate) step-end var(--fase) infinite}
:root:not([data-paleta]) .passaro .qq-f1{animation-name:qq-f1}
:root:not([data-paleta]) .passaro .qq-f2{animation-name:qq-f2}
:root:not([data-paleta]) .passaro .qq-f3{animation-name:qq-f3}
:root:not([data-paleta]) .passaro .qq-f4{animation-name:qq-f4}
@media (max-height:500px){ :root:not([data-paleta]) .qq-bando{display:none} }   /* celular deitado: não sobra céu, eles só passariam atrás do título */
@media (prefers-reduced-motion:reduce){
  :root:not([data-paleta]) .passaro,:root:not([data-paleta]) .passaro .qq-rota,:root:not([data-paleta]) .passaro .qq-corpo,:root:not([data-paleta]) .passaro .qq-f{animation:none}
  :root:not([data-paleta]) .passaro{transform:translateX(var(--parado))}
  :root:not([data-paleta]) .passaro .qq-rota{transform:translateY(calc((var(--y1) - 450) * var(--u)))}
  :root:not([data-paleta]) .passaro .qq-f2{visibility:visible}
}
/* voo: atravessa em 60% do tempo, de fora a fora; a altura faz um arco suave (sobe até o meio, desce no fim) */
@keyframes qq-x{0%{transform:translateX(calc(-1 * var(--t) * var(--u) - 10px))}60%,100%{transform:translateX(calc(100vw + 10px))}}
@keyframes qq-y{0%{transform:translateY(calc((var(--y0) - 450) * var(--u)))}30%{transform:translateY(calc((var(--y1) - 450) * var(--u)))}60%,100%{transform:translateY(calc((var(--y2) - 450) * var(--u)))}}
@keyframes qq-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5%)}}
@keyframes qq-f1{0%{visibility:visible}16.666%{visibility:hidden}}
@keyframes qq-f2{0%{visibility:hidden}16.666%{visibility:visible}33.333%{visibility:hidden}83.333%{visibility:visible}}
@keyframes qq-f3{0%{visibility:hidden}33.333%{visibility:visible}50%{visibility:hidden}66.666%{visibility:visible}83.333%{visibility:hidden}}
@keyframes qq-f4{0%{visibility:hidden}50%{visibility:visible}66.666%{visibility:hidden}}

/* título, como no esboço: "Qual é a sua" / "cidade?" */
:root:not([data-paleta]) .capa h1,:root:not([data-paleta]) .capa h1.uma-linha{grid-row:1;margin:0;max-width:6.58em;white-space:normal;text-wrap:wrap;
  color:var(--capa-ink);font-family:var(--cartaz);font-weight:600;line-height:.9;letter-spacing:0}
:root:not([data-paleta]) .capa h1 .mark{color:var(--brasa);white-space:normal}   /* "sua cidade" no ocre #F2B65A (no claro, o ocre escurecido), pedido do Kaleb, 19/10 */
:root:not([data-paleta]) .capa .volta-cidade{grid-row:2;align-self:center;margin:0;font-family:var(--cartaz);font-weight:600}
:root:not([data-paleta]) .capa .volta-cidade a.link{color:var(--capa-ink);text-decoration-color:var(--capa-acao)}

/* a pílula do esboço: sem contorno, com um halo que a separa do desenho (lupa só no computador). Campo vazio: o alfinete
   ("Usar minha localização"); ao digitar: "Ver cidade" (o app marca .digitando). No claro (branca sobre branco) ganha um
   filete interno de 1 px, senão a borda do campo só existiria no halo de 5% */
:root:not([data-paleta]) .capa form{grid-row:3;position:relative;display:flex;flex-wrap:nowrap;align-items:center;gap:8px;width:100%;max-width:700px;margin:0;
  padding:8px 8px 8px 16px;border:0;border-radius:999px;background:var(--capa-pilula);text-align:left;
  box-shadow:0 0 75px 60px var(--capa-halo);transition:box-shadow .15s}
:root:not([data-paleta]) .capa form:focus-within{box-shadow:0 0 75px 60px var(--capa-halo),0 0 0 3px rgba(226,169,30,.6)}
:root:not([data-paleta]) .capa .campo-grande,:root:not([data-paleta]) .capa .campo-grande.search-field{position:static;flex:1 1 auto;min-width:0}
:root:not([data-paleta]) .capa .search-field .search-field__group,
:root:not([data-paleta]) .capa .search-field .search-field__group:hover,
:root:not([data-paleta]) .capa .search-field .search-field__group:focus-within{position:static;height:40px;gap:0;padding:0;border:0;background:transparent;box-shadow:none;outline:0}
:root:not([data-paleta]) .capa .search-field .search-field__search-icon{display:none}
/* no computador a lupa ocre de 20 px volta, 10 px antes do texto (o Kaleb ligou a camada no Figma 484:20394, 19/10/2026).
   No celular ela fica de fora: em 360 px o exemplo "por exemplo Canoas" já não caberia */
@media (min-width:48rem) and (orientation:landscape){
  :root:not([data-paleta]) .capa .search-field .search-field__group,
  :root:not([data-paleta]) .capa .search-field .search-field__group:hover,
  :root:not([data-paleta]) .capa .search-field .search-field__group:focus-within{gap:10px}
  :root:not([data-paleta]) .capa .search-field .search-field__search-icon{display:block;position:static;flex:none;width:20px;height:20px;margin:0;color:var(--capa-acao);transform:none}
}
:root:not([data-paleta]) .capa .search-field .search-field__input{height:40px;min-width:0;padding:0;border:0;background:transparent;color:var(--capa-ink);caret-color:var(--capa-acao);
  font-family:var(--cartaz);font-weight:600;font-size:1rem;line-height:40px;text-overflow:ellipsis}
:root:not([data-paleta]) .capa .search-field .search-field__input::placeholder{color:var(--capa-dica);font-weight:600;opacity:1}
:root:not([data-paleta]) .capa .sug{left:0;right:0;top:calc(100% + 8px);font-family:var(--body)}   /* a lista é a mesma das outras buscas */
:root:not([data-paleta]) .capa form .button{flex:none;width:auto;height:40px;min-height:40px;padding:0 16px;gap:8px;border:0;border-radius:999px;
  background-color:var(--capa-acao);color:var(--capa-acao-ink);font-family:var(--cartaz);font-weight:600;font-size:1rem;justify-content:center}
:root:not([data-paleta]) .capa form .button:hover{background-color:var(--capa-acao-hover);color:var(--capa-acao-ink)}
:root:not([data-paleta]) .capa form .button:focus-visible{outline:2px solid var(--capa-ink);outline-offset:2px}
:root:not([data-paleta]) .capa form .button[type="submit"] svg.hi{display:none}
:root:not([data-paleta]) .capa form:has(#onde-estou:not([hidden])):not(.digitando) .button[type="submit"]{display:none}
:root:not([data-paleta]) .capa form.digitando #onde-estou{display:none}
/* o alfinete: botão redondo de 40; no hover (e no foco do teclado) ele abre para a direita e mostra "Usar minha localização"
   (pedido do Kaleb, 19/10/2026). No toque fica só o ícone. O texto está sempre lá para leitor de tela */
:root:not([data-paleta]) .capa #onde-estou.button{width:auto;max-width:40px;padding:0 10px;gap:8px;justify-content:flex-start;overflow:hidden;
  transition:max-width .3s cubic-bezier(.2,.7,.2,1),padding .3s cubic-bezier(.2,.7,.2,1),background-color .15s}
/* o pin-location-03 do esboço em 20 px, como os outros ícones de botão, e no centro exato do círculo de 40 (respiro de 10).
   Antes era 24 px e o HeroUI puxava o ícone 2 px para a esquerda (Kaleb, 19/10: "arruma isso aqui") */
:root:not([data-paleta]) .capa #onde-estou svg.hi{width:20px;height:20px;margin:0;flex:none}
:root:not([data-paleta]) .capa #onde-estou .rot{white-space:nowrap;opacity:0;transition:opacity .2s}
@media (hover:hover){
  :root:not([data-paleta]) .capa #onde-estou.button:hover{max-width:260px;padding-right:16px}
  :root:not([data-paleta]) .capa #onde-estou.button:hover .rot{opacity:1;transition-delay:.06s}
}
:root:not([data-paleta]) .capa #onde-estou.button:focus-visible{max-width:260px;padding-right:16px}
:root:not([data-paleta]) .capa #onde-estou.button:focus-visible .rot{opacity:1}
@media (prefers-reduced-motion:reduce){ :root:not([data-paleta]) .capa #onde-estou.button,:root:not([data-paleta]) .capa #onde-estou .rot{transition:none} }
/* recados da busca: cartão da cor da pílula embaixo dela, por cima do desenho */
:root:not([data-paleta]) .capa .aviso-assunto,:root:not([data-paleta]) .capa #onde-estou-msg{margin:14px 0 0;max-width:700px;padding:10px 16px;border-radius:16px;
  background:var(--capa-pilula);color:var(--capa-ink);font-family:var(--cartaz);font-weight:600;box-shadow:var(--capa-sombra)}
:root:not([data-paleta]) .capa .aviso-assunto{grid-row:4}
:root:not([data-paleta]) .capa #onde-estou-msg{grid-row:5}
/* convites (Figma 484:20394): dois cartões da cor da pílula, 30 px abaixo dela e da mesma largura, com a pergunta na
   Aleo 32 e o botão ocre de largura toda, sempre no pé do cartão (os dois botões ficam na mesma altura) */
:root:not([data-paleta]) .convites-capa{grid-row:6;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px;width:100%;max-width:700px;
  margin:30px 0 0;padding:0;list-style:none}
:root:not([data-paleta]) .convites-capa li{display:flex;flex-direction:column;gap:16px;min-width:0;padding:32px;border-radius:24px;
  background:var(--capa-pilula);text-align:left}
:root:not([data-paleta]) .convites-capa h2{margin:0 0 auto;color:var(--capa-ink);font-family:var(--cartaz);font-weight:600;font-size:2rem;line-height:1.1875;letter-spacing:0;text-transform:none}   /* 38 px por linha, como o Figma arredonda os 120% */
:root:not([data-paleta]) .convites-capa .button{width:100%;height:40px;min-height:40px;padding:0 16px;gap:8px;border:0;border-radius:999px;justify-content:center;
  background-color:var(--capa-acao);color:var(--capa-acao-ink);font-family:var(--cartaz);font-weight:600;font-size:1rem;text-decoration:none}
:root:not([data-paleta]) .convites-capa .button:hover{background-color:var(--capa-acao-hover);color:var(--capa-acao-ink)}
:root:not([data-paleta]) .convites-capa .button:focus-visible{outline:2px solid var(--capa-ink);outline-offset:2px}
:root:not([data-paleta]) .convites-capa .button svg.hi{width:20px;height:20px;flex:none}

/* ---------- janela de mapa (pedido do Kaleb, 19/10/2026; no pente fino do mesmo dia passou a valer para todo mapa de cidades:
   Início, Associações, topo da cidade e da associação). Um mapa embutido num site, como o do Google: cantos dos cartões, fundo
   próprio (--mapa-fundo; no escuro, o escuro mais forte da paleta) e o zoom no canto de baixo à direita. Modos (o app-clone.js
   põe, em janelaDeMapa): .cartao = o texto do mapa vira o cartão do canto de cima ("Toque na sua cidade no mapa.", que vira o
   nome da cidade no hover); .legenda = a legenda num painel sobre o mapa, no computador; .compacta = janela baixa, com o texto e a
   legenda embaixo. O localizador do estado dos mapas de região vira um painel no canto de baixo à esquerda. O zoom muda o
   viewBox: as divisas não engrossam e cada nome fica do mesmo tamanho na tela (o app ajusta). Ampliado, arrasta-se para passear */
:root:not([data-paleta]) .mapa-google{position:relative}
:root:not([data-paleta]) .mapa-estado.mapa-google{display:block;width:100%;max-width:1120px;margin:48px auto 64px;padding:0;border:0;justify-self:stretch}
:root:not([data-paleta]) .mapa-janela{--rotulo-min:9;position:relative;height:600px;border-radius:24px;overflow:hidden;background:var(--mapa-fundo);touch-action:pan-y;user-select:none;-webkit-user-select:none}
:root:not([data-paleta]) .mapa-google.compacta .mapa-janela{height:320px}
:root:not([data-paleta]) .mapa-janela.ampliado{touch-action:none;cursor:grab}
:root:not([data-paleta]) .mapa-janela.arrastando{cursor:grabbing}
:root:not([data-paleta]) .mapa-janela > svg.mapa-svg{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;border:0;border-radius:0;background:transparent;overflow:hidden}
:root:not([data-paleta]) .mapa-janela > svg.mapa-svg path{vector-effect:non-scaling-stroke}
/* cartão do canto, legenda por cima, localizador e zoom: superfície com a sombra da pílula, como os controles de um mapa */
:root:not([data-paleta]) .mapa-google.cartao > figcaption,:root:not([data-paleta]) .mapa-google.legenda .mapa-regua,:root:not([data-paleta]) .mapa-zoom,:root:not([data-paleta]) .mapa-inset{
  background:var(--surface);box-shadow:var(--capa-sombra);border-radius:12px}
:root:not([data-paleta]) .mapa-google.cartao > figcaption{position:absolute;top:16px;left:16px;z-index:2;order:0;margin:0;padding:10px 14px;min-height:0;max-width:calc(100% - 32px);
  font-family:var(--cartaz);font-weight:600;font-size:1rem;line-height:1.3;color:var(--ink);pointer-events:none}
/* legenda: a régua de um mapa de verdade, as 7 cores numa barra e os limites embaixo (era um painel de 7 linhas; a régua
   nasceu no celular e passou ao computador a pedido do Kaleb, 19/10). No Início ela fica no canto de baixo à esquerda, como
   um controle do mapa; na janela baixa (região), no lugar da lista, embaixo do texto. A lista fica só para o leitor de tela */
:root:not([data-paleta]) .mapa-google > .legenda-porte{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;box-shadow:none}
:root:not([data-paleta]) .mapa-google .mapa-regua{display:grid;gap:7px;width:304px;max-width:100%}
:root:not([data-paleta]) .mapa-google.legenda .mapa-regua{position:absolute;left:16px;bottom:16px;z-index:2;padding:12px 16px 10px;pointer-events:none}
:root:not([data-paleta]) .mapa-google:not(.legenda) > .mapa-regua{margin-top:14px}
@media (min-width:48rem){   /* no computador, um degrau maior */
  :root:not([data-paleta]) .mapa-regua b{font-size:.75rem}
  :root:not([data-paleta]) .mapa-regua .faixas i{height:10px}
  :root:not([data-paleta]) .mapa-regua .limites span{font-size:.6875rem}
}
:root:not([data-paleta]) .mapa-google:not(.cartao) > figcaption{margin-top:10px}
:root:not([data-paleta]) .mapa-inset{position:absolute;left:12px;bottom:12px;z-index:2;display:block;width:76px;height:auto;padding:4px;pointer-events:none}
:root:not([data-paleta]) .mapa-zoom{position:absolute;right:16px;bottom:16px;z-index:2;display:flex;flex-direction:column;overflow:hidden}
:root:not([data-paleta]) .mapa-google.compacta .mapa-zoom{right:12px;bottom:12px}
:root:not([data-paleta]) .mapa-zoom button{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:40px;height:40px;color:var(--ink);cursor:pointer;transition:background-color .15s}
:root:not([data-paleta]) .mapa-zoom button:hover:not(:disabled){background:var(--track)}
:root:not([data-paleta]) .mapa-zoom button:focus-visible{outline:2px solid var(--action);outline-offset:-2px;border-radius:12px}
:root:not([data-paleta]) .mapa-zoom button:disabled{color:var(--ink-soft);opacity:.45;cursor:default}
:root:not([data-paleta]) .mapa-zoom svg.hi{width:20px;height:20px}
/* aviso de quem rola sem o Ctrl, como no mapa do Google */
:root:not([data-paleta]) .mapa-aviso{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;margin:0;padding:24px;text-align:center;
  background:rgba(54,32,34,.55);color:#FFFFFF;font-family:var(--cartaz);font-weight:600;font-size:1.125rem;opacity:0;transition:opacity .3s;pointer-events:none}
:root:not([data-paleta]) .mapa-aviso.ver{opacity:1}
@media (max-width:47.99rem){
  :root:not([data-paleta]) .mapa-janela{--rotulo-min:9.5;height:440px}
  :root:not([data-paleta]) .mapa-google.compacta .mapa-janela{height:300px}
  :root:not([data-paleta]) .mapa-google.cartao > figcaption{top:12px;left:12px;font-size:.9375rem}
  :root:not([data-paleta]) .mapa-zoom{right:12px;bottom:12px}
  /* no celular a régua vai até o zoom, sem passar dele */
  :root:not([data-paleta]) .mapa-google .mapa-regua{gap:6px;width:auto;max-width:264px}
  :root:not([data-paleta]) .mapa-google.legenda .mapa-regua{left:12px;right:64px;bottom:12px;padding:9px 12px 8px}
}
/* nome encostado em outro (o app-clone.js decide em desencosta) */
:root:not([data-paleta]) .mapa-janela text{transition:opacity .2s}
:root:not([data-paleta]) .mapa-janela text.encoberto{opacity:0}
:root:not([data-paleta]) .mapa-regua b{font-size:.6875rem;font-weight:600;line-height:1.2;color:var(--ink);text-align:left}
:root:not([data-paleta]) .mapa-regua .faixas,:root:not([data-paleta]) .mapa-regua .limites{display:grid;grid-template-columns:repeat(7,1fr);column-gap:2px}
:root:not([data-paleta]) .mapa-regua .faixas i{height:8px;border-radius:2px}
:root:not([data-paleta]) .mapa-regua .faixas i:first-child{border-radius:4px 2px 2px 4px} :root:not([data-paleta]) .mapa-regua .faixas i:last-child{border-radius:2px 4px 4px 2px}
:root:not([data-paleta]) .mapa-regua .faixas i:nth-child(1){background:var(--pt1)} :root:not([data-paleta]) .mapa-regua .faixas i:nth-child(2){background:var(--pt2)} :root:not([data-paleta]) .mapa-regua .faixas i:nth-child(3){background:var(--pt3)}
:root:not([data-paleta]) .mapa-regua .faixas i:nth-child(4){background:var(--pt4)} :root:not([data-paleta]) .mapa-regua .faixas i:nth-child(5){background:var(--pt5)} :root:not([data-paleta]) .mapa-regua .faixas i:nth-child(6){background:var(--pt6)}
:root:not([data-paleta]) .mapa-regua .faixas i:nth-child(7){background:var(--pt7)}
:root:not([data-paleta]) .mapa-regua .limites span{justify-self:end;transform:translateX(calc(50% + 1px));font-size:.625rem;line-height:1;color:var(--ink-soft);font-variant-numeric:tabular-nums}

/* composição larga (768 px ou mais): os dois inteiros. --u = largura da tela / 1376, mas nunca tanto que o chapéu (340 px
   acima da cuia) entre embaixo do topo. Quando o palco fica mais estreito que a tela, cada personagem desliza até a sua
   borda, para o corte do desenho não aparecer, e a pílula alarga (até 900 px) para continuar na frente da cuia. Em tela
   muito larga e baixa (mais de 2,3 por 1) a cuia sai pela ponta esquerda da busca, na mão do gaúcho, e a pílula volta aos 700. */
@media (min-width:48rem) and (orientation:landscape){
  /* desde 19/10/2026 (Figma 484:20394, com os convites) os dois ficam mais afastados: o gaúcho 44 px para a esquerda e o
     jovem 85 px para a direita (em 1440 x 900, gaúcho em x -117 e jovem em x 808). A cuia continua atrás da busca */
  :root:not([data-paleta]) .capa-miolo{--u:min(calc(100vw / 1376),calc((50svh - var(--topo) - 8px) / 340));
    --p1:min(calc(50vw - 837 * var(--u)),0px);
    --p2:max(calc(50vw + 88 * var(--u)),calc(100vw - 730.892 * var(--u)));
    --vao:max(40px,calc(102 * var(--u)));
    --precisa:calc(100vw - 2 * var(--p1) - 1265.6 * var(--u) + 48px);
    --pilula:max(700px,min(var(--precisa),calc(1800px - var(--precisa))));   /* a largura da busca, que os convites repetem */
    --calca-escuro:#8D5737;--cuia-escuro:#955C39}
  :root:not([data-paleta]) .capa h1,:root:not([data-paleta]) .capa h1.uma-linha{align-self:end;font-size:max(28px,min(clamp(48px,calc(64 * var(--u)),64px),calc((var(--meio) - 44px - var(--vao)) / 1.8)))}
  :root:not([data-paleta]) .capa form,:root:not([data-paleta]) .convites-capa{width:var(--pilula);max-width:100%}
}
@media (min-width:64rem){ :root:not([data-paleta]) .capa-miolo{--topo:102px} }

/* composição estreita (tela em pé: celular e tablet), do esboço do Kaleb no Figma 497:16585 (19/10/2026), refinado:
   - de cima para baixo: o título, a busca logo abaixo dele (no celular ela não fica mais no centro da tela), "Voltar para
     (cidade)" numa etiqueta embaixo da busca e a cena. Os vãos do esboço (23, 17 e 17 px) foram para a régua de 8:
     24 px do título à busca, 16 px até a etiqueta e 16 px até o chapéu. Sem cidade guardada, a etiqueta e o vão dela
     somem e a cena sobe junto (--volta);
   - a cena é a do esboço: personagens maiores (em 390 px, u = 390/923), as mãos se encontrando na cuia e o jovem saindo
     pela borda direita. Ela cresce com a largura até u = 0,6 (tablet em pé); daí em diante cada um desliza para a sua
     borda, como no computador. O jovem fica 41 u mais alto que no desenho do computador (--dj);
   - em tela alta a cena desce até o pé do jovem encostar no pé da faixa (--cena), para o corte reto do desenho não
     aparecer; em tela baixa a faixa corta a cena, como no esboço;
   - sem pássaros: não sobra céu entre a busca e os chapéus. */
@media not all and (min-width:48rem) and (orientation:landscape){
  :root:not([data-paleta]) .capa-miolo{--u:min(calc(100vw / 923),.6px);
    --titulo:clamp(36px,12.3vw,48px);
    --volta:0px;
    --linhas:calc(20px + 1.8 * var(--titulo) + 24px + 56px + var(--volta));   /* do alto da faixa ao pé da busca ou da etiqueta */
    --cena:max(calc(var(--linhas) + 16px),calc(100svh - var(--topo) - 1177.6 * var(--u)));   /* topo do gaúcho */
    --ancora:calc(var(--cena) + 339.8807 * var(--u));
    --p1:min(calc(50vw - 672.1 * var(--u)),0px);
    --p2:max(calc(50vw + 7.1 * var(--u)),calc(100vw - 730.892 * var(--u)));
    --dj:calc(-41.2 * var(--u));
    --calca-escuro:#955C39;--cuia-escuro:#362022;
    grid-template-rows:calc(20px + 1.8 * var(--titulo) + 24px) 56px var(--volta) auto auto auto}
  :root:not([data-paleta]) .capa-miolo:has(.volta-cidade){--volta:48px}
  :root:not([data-paleta]) .qq-bando{display:none}
  :root:not([data-paleta]) .capa h1,:root:not([data-paleta]) .capa h1.uma-linha{align-self:start;margin-top:20px;font-size:var(--titulo)}
  :root:not([data-paleta]) .capa form{grid-row:2;padding-left:14px}
  :root:not([data-paleta]) .capa .search-field .search-field__input::placeholder{font-size:15px}   /* o exemplo inteiro cabe; o campo fica em 16 px para o iPhone não dar zoom */
  /* a etiqueta do esboço: 32 px de altura, casa de 18 px e Aleo 15 */
  :root:not([data-paleta]) .capa .volta-cidade{grid-row:3;align-self:end;font-size:.9375rem}
  :root:not([data-paleta]) .capa .volta-cidade a.link{display:inline-flex;align-items:center;gap:6px;height:32px;box-sizing:border-box;padding:0 14px;border-radius:999px;
    background:var(--capa-pilula);box-shadow:var(--capa-sombra);text-decoration:none}
  :root:not([data-paleta]) .capa .volta-cidade svg.hi{width:18px;height:18px;margin:0}
  /* os convites descem para logo depois da faixa, que fica do tamanho da tela */
  :root:not([data-paleta]) .capa-fundo{bottom:auto;height:calc(100svh - var(--topo))}
  :root:not([data-paleta]) .capa-miolo{padding-bottom:0}   /* o respiro até o mapa fica só no dele (48 px) */
  :root:not([data-paleta]) .convites-capa{margin-top:calc(100svh - var(--topo) - var(--linhas) + 24px)}
  @media (max-width:35.99rem){
    :root:not([data-paleta]) .convites-capa{grid-template-columns:minmax(0,1fr);gap:16px}
    :root:not([data-paleta]) .convites-capa li{padding:24px}
    :root:not([data-paleta]) .convites-capa h2{font-size:1.75rem}
    :root:not([data-paleta]) .convites-capa br{display:none}   /* um cartão por linha: a pergunta quebra sozinha */
  }
}

/* ---------- seções depois da capa, no padrão do esboço "O que dá pra saber" (Figma 459:20448): título de seção grande na
   Aleo, alinhado à esquerda, e os assuntos como lista em 3 colunas, sem cartão: nome na Aleo, contagem mais apagada embaixo,
   seta ocre na direita e um filete separando as linhas */
.titulo-secao{font-size:1.6rem}
.tile .seta{display:none}
:root:not([data-paleta]) .titulo-secao{font-size:clamp(2.25rem,1.2rem + 3vw,3.75rem);line-height:.95;margin:0 0 .4rem}
/* texto nunca em ocre no claro (o #E2A91E sobre branco dá 2,1:1): links na cor do texto, com sublinhado ocre.
   :where() deixa a regra com o peso do "a" do original, então qualquer componente com classe continua mandando */
:where(:root:not([data-paleta])) a{color:var(--ink);text-decoration-color:var(--action)}
:root:not([data-paleta]) .tile.assoc .site-assoc{color:var(--ink);text-decoration:underline;text-decoration-color:var(--action);text-underline-offset:3px}

/* a lista vale para os assuntos do Início e para as associações; cada uma com o seu miolo. A seta é a Hugeicons
   arrow-up-right-03 (a do esboço): 24 px no meio de uma caixa de 40 */
:root:not([data-paleta]){--seta:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-8 -8 40 40'%3E%3Cpath d='M16.5 7.5L6 18M8 6.18791C8 6.18791 16.0479 5.50949 17.2692 6.73079C18.4906 7.95209 17.812 16 17.812 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
:root:not([data-paleta]) .titulo-secao ~ .tiles,:root:not([data-paleta]) .tiles.assoc-cartoes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 32px;margin-top:1.4rem}
:root:not([data-paleta]) .titulo-secao ~ .tiles .tile.card,:root:not([data-paleta]) .assoc-cartoes .tile.card{border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;box-shadow:none;color:var(--ink);text-decoration:none}
:root:not([data-paleta]) .titulo-secao ~ .tiles .tile.card:hover,:root:not([data-paleta]) .assoc-cartoes .tile.card:hover,:root:not([data-paleta]) .assoc-cartoes .tile.card.on{box-shadow:none}
:root:not([data-paleta]) .titulo-secao ~ .tiles .tile:focus-visible,:root:not([data-paleta]) .assoc-cartoes .tile:focus-visible{outline:2px solid var(--action);outline-offset:4px;border-radius:4px}
/* assuntos do Início: nome e seta numa linha, contagem embaixo */
:root:not([data-paleta]) .titulo-secao ~ .tiles .tile.card{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"nome seta" "conta conta";align-items:center;row-gap:12px;padding:8px 0}
:root:not([data-paleta]) .titulo-secao ~ .tiles .tile b{grid-area:nome;font-size:1.875rem;line-height:.9}
:root:not([data-paleta]) .titulo-secao ~ .tiles .tile .seta{display:block;grid-area:seta;width:24px;height:24px;margin:8px;color:var(--action);transition:transform .15s}   /* ocupa os 40 px do esboço */
:root:not([data-paleta]) .titulo-secao ~ .tiles .tile span.small{grid-area:conta;font-family:var(--cartaz);font-weight:400;font-size:1.5rem;line-height:1.2;color:var(--ink-soft)}
/* hover dos itens: o ocre #F2B65A no lugar do vermelho (pedido do Kaleb, 19/10/2026) */
:root:not([data-paleta]){--item-hover:var(--brasa)}
:root:not([data-paleta]) .titulo-secao ~ .tiles .tile:hover b{color:var(--item-hover)}
:root:not([data-paleta]) .titulo-secao ~ .tiles .tile:hover .seta{transform:translate(3px,-3px)}
/* associações: sigla grande, nome, site e números embaixo; a seta vem do CSS. ".on" acende junto com o mapa */
:root:not([data-paleta]) .assoc-cartoes .tile.assoc.card{position:relative;display:flex;flex-direction:column;gap:4px;padding:8px 48px 14px 0}
:root:not([data-paleta]) .assoc-cartoes .tile.assoc b{font-size:1.5rem;line-height:1.05}
:root:not([data-paleta]) .assoc-cartoes .tile.assoc>span:first-of-type{font-size:.93rem;color:var(--ink)}
:root:not([data-paleta]) .assoc-cartoes .tile.assoc .small.soft{color:var(--ink-soft)}
:root:not([data-paleta]) .assoc-cartoes .tile.assoc::after{content:"";position:absolute;right:0;top:2px;width:36px;height:36px;background:var(--action);
  -webkit-mask:var(--seta) center/contain no-repeat;mask:var(--seta) center/contain no-repeat;transition:transform .15s}
:root:not([data-paleta]) .assoc-cartoes .tile.assoc.on b,:root:not([data-paleta]) .assoc-cartoes .tile.assoc:hover b{color:var(--item-hover)}
:root:not([data-paleta]) .assoc-cartoes .tile.assoc.on::after,:root:not([data-paleta]) .assoc-cartoes .tile.assoc:hover::after{transform:translate(3px,-3px)}
@media (max-width:63.99rem){ :root:not([data-paleta]) .titulo-secao ~ .tiles,:root:not([data-paleta]) .tiles.assoc-cartoes{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:36rem){
  :root:not([data-paleta]) .titulo-secao ~ .tiles,:root:not([data-paleta]) .tiles.assoc-cartoes{grid-template-columns:minmax(0,1fr);gap:10px}
  :root:not([data-paleta]) .titulo-secao ~ .tiles .tile b{font-size:1.375rem}
  :root:not([data-paleta]) .titulo-secao ~ .tiles .tile span.small{font-size:1.125rem}
  :root:not([data-paleta]) .titulo-secao ~ .tiles .tile .seta{width:20px;height:20px;margin:6px}
}

/* ---------- sem bordas (pedido do Kaleb, 19/10/2026: "tira todas essas bordas que você fica colocando nos shapes"). Nenhuma
   forma tem contorno: no escuro o cartão se separa da página pela cor (#362022 sobre #542522); no claro, o cartão branco
   sobre a página branca ganha só uma sombra macia (--cartao-sombra). Botões de contorno viram botões cheios no tom do trilho,
   e as linhas que dividiam pedaços de um cartão (rodapé, fonte, detalhes, lista) viram respiro. Ficam: o anel do foco do
   teclado, a bolinha do botão de opção e o sublinhado da lista "O que dá para saber" (é do esboço). O que usava o papel
   como fundo usa o trilho */
:root:not([data-paleta]) .card{box-shadow:var(--cartao-sombra)}
:root:not([data-paleta]) .pista,
:root:not([data-paleta]) details.exp .corpo .warn{background:var(--track)}
:root:not([data-paleta]) .top,:root:not([data-paleta]) .head{border-bottom:0}
:root:not([data-paleta]) .button--outline,:root:not([data-paleta]) .button--outline:hover{border-color:transparent}
:root:not([data-paleta]) .button--outline{background-color:var(--track)}
:root:not([data-paleta]) .button--outline:hover{background-color:var(--capa-chip-hover)}
:root:not([data-paleta]) .card .card__footer,:root:not([data-paleta]) .card .card-rodape,:root:not([data-paleta]) .card p.fonte,:root:not([data-paleta]) .folha-pe,
:root:not([data-paleta]) details.exp,:root:not([data-paleta]) details.exp-tec,:root:not([data-paleta]) form.ctl,:root:not([data-paleta]) .folha-cartoes .mini,
:root:not([data-paleta]) .bloco-perguntas li{border-top:0;border-bottom:0}
:root:not([data-paleta]) .warn,:root:not([data-paleta]) details.exp .corpo .warn{border-left:0;border-radius:12px}
:root:not([data-paleta]) .legenda-porte i{border:0}
/* as barras coloridas à esquerda (palpites do Desafio, resumo e veredito do Jogo) saem; no resumo, acerto e erro passam a
   ser o tom do fundo da linha */
:root:not([data-paleta]) .tentativas li,:root:not([data-paleta]) .recap li,:root:not([data-paleta]) .jogo .veredito{border-left:0}
:root:not([data-paleta]) .tentativas li{background:var(--track)}
/* campos de texto: sem o filete (o fundo já marca o campo); o anel do foco continua */
:root:not([data-paleta]) .input,:root:not([data-paleta]) .text-field .input,:root:not([data-paleta]) .search-field__group,:root:not([data-paleta]) .cityfield input{border-color:transparent}
:root:not([data-paleta]) .input:not(:focus):not(:focus-visible),:root:not([data-paleta]) .search-field__group:not(:focus-within){box-shadow:none}
:root:not([data-paleta]) .recap li.ok{background:color-mix(in srgb,var(--action) 16%,transparent)}
:root:not([data-paleta]) .recap li.nao{background:color-mix(in srgb,var(--detail) 14%,transparent)}
/* pictogramas (Hugeicons desde 19/10/2026, ladrilhos no monta.js): um pouco maiores que no original, para o traço do ícone
   ler (a largura vinha no estilo de cada gráfico; o !important passa por cima dele). Contagens 144 px; nunca mais largas que a coluna */
:root:not([data-paleta]) .card figure > svg[viewBox^="0 0 100 "]{width:min(100%,144px)!important}
/* bolinhas (quantidades: pessoas por quarteirão, dinheiro por morador), na largura do anel; a chave diz quanto vale cada uma */
:root:not([data-paleta]) .card figure > svg.pontos,:root:not([data-paleta]) .so-revela figure > svg.pontos{width:min(100%,128px)!important;height:auto}
:root:not([data-paleta]) .figs-chave{margin:12px 0 0;font-size:.8125rem;line-height:1.35;color:var(--ink-soft)}
/* anel das porcentagens (app-clone.js, figura 'g'), como a referência do Kaleb: a cidade no destaque (#F2B65A no escuro,
   #EB7986 no claro), a comparação no tom de referência, e o trilho no fundo da página (no claro, que é branco, o trilho) */
:root:not([data-paleta]){--anel-me:var(--brasa);--anel-ref:var(--ref);--anel-off:var(--off);--anel-trilho:var(--track)}
@media (prefers-color-scheme:dark){ :root:not([data-paleta]):not([data-theme="light"]){--anel-trilho:var(--bg)} }
:root:not([data-paleta])[data-theme="dark"]{--anel-trilho:var(--bg)}
:root:not([data-paleta]) .card figure > svg.anel{width:min(100%,128px)!important}
:root:not([data-paleta]) .jogo .grade.anel{width:140px}   /* o anel do palpite do Jogo (a faixa enche o anel) */
/* lista de assuntos (Resumo, Todas, População...): no escuro o fundo é o escuro dos cartões e o item escolhido fica no tom
   claro do trilho (pedido do Kaleb, 19/10/2026: "fundo escuro"); no claro continua o trilho com o escolhido em branco */
:root:not([data-paleta]){--abas-fundo:var(--track);--abas-escolhida:var(--surface)}
@media (prefers-color-scheme:dark){ :root:not([data-paleta]):not([data-theme="light"]){--abas-fundo:var(--surface);--abas-escolhida:var(--track)} }
:root:not([data-paleta])[data-theme="dark"]{--abas-fundo:var(--surface);--abas-escolhida:var(--track)}
:root:not([data-paleta]) nav.chips .tabs__list-container{background-color:var(--abas-fundo)}
:root:not([data-paleta]) nav.chips .tabs__indicator{background-color:var(--abas-escolhida)}
/* gráfico de anos: a área colorida aparece junto com a linha (que se desenha da esquerda para a direita) */
@media (prefers-reduced-motion:no-preference){
  :root:not([data-paleta]) .js-anim .area-me{opacity:0;transition:opacity 1.2s ease-out .6s}
  :root:not([data-paleta]) .js-anim .anim .area-me{opacity:1}
}
:root:not([data-paleta]) circle.pt:focus-visible{stroke:var(--anel-me);stroke-width:3}
/* cartões da mesma fileira com a mesma altura, e o "Entenda melhor este indicador" no pé de todos (Kaleb, 19/10: "tem erro
   aqui"; cada cartão tinha a altura do seu conteúdo e o pé ficava em alturas diferentes lado a lado) */
:root:not([data-paleta]) .grid{align-items:stretch}
:root:not([data-paleta]) .grid > .card{display:flex;flex-direction:column}
:root:not([data-paleta]) .grid > .card > .card-rodape,:root:not([data-paleta]) .grid > .card > .card__footer{margin-top:auto}
:root:not([data-paleta]) .anel-valor{animation:anel-enche 1s cubic-bezier(.2,.7,.2,1) both}
@keyframes anel-enche{from{stroke-dasharray:0 289.03}}
@media (prefers-reduced-motion:reduce){ :root:not([data-paleta]) .anel-valor{animation:none} }
/* o anel branco do navegador (outline auto 5 px #EEEEEE) que aparecia ao clicar no mapa (Kaleb, 19/10): clique de mouse não
   desenha anel em nada do site. No mapa o foco do teclado já acende a forma (preenchimento), então ali o anel sai sempre */
:root:not([data-paleta]) :focus:not(:focus-visible){outline:none}
:root:not([data-paleta]) .mapa-svg a:focus,:root:not([data-paleta]) .mapa-svg a:focus-visible{outline:none}
:root:not([data-paleta]) .tile.card:hover,:root:not([data-paleta]) .tile.card.on{box-shadow:var(--cartao-sombra);background-color:var(--track)}   /* o anel de 1,5 px do hover virou tom */
:root:not([data-paleta]) .selo{border:0;padding:.2rem .75rem;background:color-mix(in srgb,var(--detail) 16%,transparent)}   /* o selo do Retrato: o contorno virou fundo */

/* ---------- logotipo no lugar do quadradinho com "?" (o nome continua lá para leitores de tela). Desde 19/10/2026 é o novo do
   Kaleb, em duas linhas com o mapa do estado: as letras pegam a cor do texto do topo, o mapa vem de --logo-mapa (o marrom
   do arquivo nos dois temas). Ele é mais alto que os botões do topo (40 px): a sobra entra no respiro, com margem
   negativa, para o topo não crescer (no celular a capa mede o meio da tela a partir dos 60 px do topo). No celular ele
   fica no meio do topo (pedido do Kaleb, 19/10), e os botões continuam no canto direito */
.logo .marca-mrs{display:none}
:root:not([data-paleta]) .logo .q{display:none}
:root:not([data-paleta]) .logo .marca-mrs{display:block;height:52px;width:auto;margin-block:-6px;color:var(--ink);flex:none}
:root:not([data-paleta]) .logo .marca-mrs .mapa{fill:var(--logo-mapa)}
@media (max-width:47.99rem){
  :root:not([data-paleta]) .top .wrap{position:relative;justify-content:flex-end}
  :root:not([data-paleta]) .top .logo{position:absolute;left:50%;top:10px;transform:translateX(-50%);flex:none;width:auto}   /* na linha dos botões, que começa 10 abaixo */
}
:root:not([data-paleta]) .logo b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:root:not([data-paleta]) .logo small{display:none}  /* pedido do Kaleb: só o logotipo, sem o texto embaixo */

/* botões, campos, cartões, abas e cantos: são os componentes do HeroUI (ver heroui-ponte.css), no formato da biblioteca */
:root:not([data-paleta]) .top,
:root:not([data-paleta]) .head{background:var(--bg)}

/* ---------- rodapé e página Sobre: papel com filete e as marcas do PDF em marrom (mesmos rótulos e ordem do original) */
.marcas .mv,.sobre-marcas .mv{display:none}
:root:not([data-paleta]) .marcas{background:var(--bg);color:var(--ink);padding-top:0}
:root:not([data-paleta]) .marcas .marcas-linha{border-top:0;padding-top:1.5rem}   /* sem o filete (sem bordas, 19/10) */
:root:not([data-paleta]) .marcas.compacto .marcas-linha{padding-top:1rem}
:root:not([data-paleta]) .sobre-marcas{color:var(--ink)}  /* no papel claro, o texto claro do cartão escuro original sumia */
:root:not([data-paleta]) .marca-grupo .rot,
:root:not([data-paleta]) .sobre-marcas .rot{opacity:1;color:var(--ink);letter-spacing:.04em}
:root:not([data-paleta]) .marcas img,
:root:not([data-paleta]) .sobre-marcas img{display:none}
:root:not([data-paleta]) .marcas .mv,
:root:not([data-paleta]) .sobre-marcas .mv{display:block;width:auto;color:var(--ink)}
:root:not([data-paleta]) .marca-grupo a:focus-visible,
:root:not([data-paleta]) .sobre-marcas a:focus-visible{outline-color:var(--ink)}
:root:not([data-paleta]) .marca-grupo a:hover .mv,
:root:not([data-paleta]) .sobre-marcas a:hover .mv{opacity:.7}
:root:not([data-paleta]) .nota-clone{color:var(--ink)}

/* ---------- pente fino de 19/10/2026: o padrão da capa nas outras páginas */
/* pílula de busca (jogo, perguntas e desafio do dia): a forma da busca da capa sem o halo, que é só dela. Lupa ocre no campo
   e o botão dentro; no claro, branca com filete; no escuro, na cor das superfícies. No jogo o alfinete também entra, abre no
   hover como na capa e, quando a pessoa digita, dá lugar ao "Jogar" */
:root:not([data-paleta]) form.pilula{position:relative;display:flex;flex-wrap:nowrap;align-items:center;gap:8px;width:100%;max-width:560px;margin:0;padding:8px 8px 8px 16px;
  border:0;border-radius:999px;background:var(--track);box-shadow:none;text-align:left;transition:box-shadow .15s}
:root:not([data-paleta]) form.pilula:focus-within{box-shadow:0 0 0 3px rgba(226,169,30,.6)}
:root:not([data-paleta]) .pilula .campo-grande,:root:not([data-paleta]) .pilula .campo-grande.search-field{position:static;flex:1 1 auto;min-width:0}
:root:not([data-paleta]) .pilula .search-field .search-field__group,
:root:not([data-paleta]) .pilula .search-field .search-field__group:hover,
:root:not([data-paleta]) .pilula .search-field .search-field__group:focus-within{position:static;height:40px;gap:10px;padding:0;border:0;background:transparent;box-shadow:none;outline:0}
:root:not([data-paleta]) .pilula .search-field .search-field__search-icon{display:block;position:static;flex:none;width:20px;height:20px;margin:0;color:var(--action);transform:none}
:root:not([data-paleta]) .pilula .search-field .search-field__input{height:40px;min-width:0;padding:0;border:0;background:transparent;color:var(--ink);caret-color:var(--action);
  font-family:var(--cartaz);font-weight:600;font-size:1rem;line-height:40px;text-overflow:ellipsis}
:root:not([data-paleta]) .pilula .search-field .search-field__input::placeholder{color:var(--capa-dica);font-weight:600;opacity:1}
:root:not([data-paleta]) .pilula .sug{left:0;right:0;top:calc(100% + 8px);font-family:var(--body)}
/* lista de sugestões de toda busca (Kaleb, 19/10: "itens esmagados, barra de rolagem fora do padrão"): cartão de cantos 24 com
   respiro de 8, itens de 60 px com 12 x 16 de respiro e cantos 16, o nome na Aleo (como os títulos) e a linha de baixo no
   tom suave. A rolagem é a fina, na cor do texto a 28%, como a da página */
:root:not([data-paleta]) .sug.popover{padding:8px;border:0;border-radius:24px;background:var(--surface);box-shadow:var(--capa-sombra);max-height:23rem;
  scrollbar-width:thin;scrollbar-color:var(--rolagem) transparent}
:root:not([data-paleta]) .sug .list-box-item{min-height:60px;padding:12px 16px;gap:2px;border-radius:16px;justify-content:center}
:root:not([data-paleta]) .sug .list-box-item + .list-box-item{margin-top:2px}
:root:not([data-paleta]) .sug .list-box-item .label{font-family:var(--cartaz);font-weight:600;font-size:1rem;line-height:1.25;letter-spacing:0;color:var(--ink)}
:root:not([data-paleta]) .sug .list-box-item .description{font-size:.8125rem;line-height:1.35;color:var(--ink-soft)}
:root:not([data-paleta]) .sug .list-box-item:hover,:root:not([data-paleta]) .sug .list-box-item:focus-visible,:root:not([data-paleta]) .sug .list-box-item[aria-selected="true"]{background-color:var(--track)}
:root:not([data-paleta]) .sug .list-box-item.none{min-height:0;color:var(--ink-soft)}
:root:not([data-paleta]){--rolagem:color-mix(in srgb,var(--ink) 28%,transparent);scrollbar-color:var(--rolagem) transparent}
:root:not([data-paleta]) .pilula .button{flex:none;width:auto;height:40px;min-height:40px;padding:0 16px;gap:8px;border:0;border-radius:999px;justify-content:center;font-family:var(--cartaz);font-weight:600;font-size:1rem}
:root:not([data-paleta]) .pilula .button[type="submit"] svg.hi{display:none}
:root:not([data-paleta]) form.pilula:has(#onde-estou:not([hidden])):not(.digitando) .button[type="submit"]{display:none}
:root:not([data-paleta]) form.pilula.digitando #onde-estou{display:none}
:root:not([data-paleta]) .pilula #onde-estou.button{max-width:40px;padding:0 10px;gap:8px;justify-content:flex-start;overflow:hidden;
  transition:max-width .3s cubic-bezier(.2,.7,.2,1),padding .3s cubic-bezier(.2,.7,.2,1),background-color .15s}
:root:not([data-paleta]) .pilula #onde-estou svg.hi{width:20px;height:20px;margin:0;flex:none}
:root:not([data-paleta]) .pilula #onde-estou.button:hover{background-color:var(--capa-acao-hover);color:var(--capa-acao-ink)}   /* o ocre do hover da capa */
:root:not([data-paleta]) .pilula #onde-estou .rot{white-space:nowrap;opacity:0;transition:opacity .2s}
@media (hover:hover){
  :root:not([data-paleta]) .pilula #onde-estou.button:hover{max-width:260px;padding-right:16px}
  :root:not([data-paleta]) .pilula #onde-estou.button:hover .rot{opacity:1;transition-delay:.06s}
}
:root:not([data-paleta]) .pilula #onde-estou.button:focus-visible{max-width:260px;padding-right:16px}
:root:not([data-paleta]) .pilula #onde-estou.button:focus-visible .rot{opacity:1}
@media (max-width:47.99rem){ :root:not([data-paleta]) .pilula .search-field .search-field__input::placeholder{font-size:15px} }
/* comparar: o ícone de comparar no lugar do "×" entre os dois campos */
:root:not([data-paleta]) .x svg.hi{width:20px;height:20px;color:var(--ink-soft);vertical-align:middle}
/* retrato: as perguntas dos cartões na letra das perguntas do site */
:root:not([data-paleta]) .folha .mini h2{font-family:var(--cartaz);font-weight:600;letter-spacing:0}

.nota-clone{margin:.9rem auto 0;max-width:72rem;padding:0 1rem;font-size:.75rem;opacity:.6;text-align:center}
/* ==========================================================================
   Ponte entre o HeroUI v3 e o clone.
   1) Os tokens do HeroUI saem das cores do site (as do cartaz). Assim o tema claro/escuro veste também os componentes.
      Desde 19/10/2026 o visitante não escolhe paleta: o site fica sempre na padrão.
   2) O HeroUI vem todo em @layer; o CSS original não. Onde o original estilizava a mesma peça, devolvemos a palavra
      ao HeroUI com "revert-layer" (volta ao valor da camada do HeroUI).
   ========================================================================== */
:root{
  --background:var(--bg); --foreground:var(--ink);
  --surface-foreground:var(--ink);
  --surface-secondary:var(--track); --surface-secondary-foreground:var(--ink);
  --surface-tertiary:var(--track); --surface-tertiary-foreground:var(--ink);
  --overlay:var(--surface); --overlay-foreground:var(--ink);
  --muted:var(--ink-soft);
  --default:var(--track); --default-foreground:var(--ink);
  --accent:var(--action); --accent-foreground:var(--action-ink);
  --field-background:var(--surface); --field-foreground:var(--ink); --field-placeholder:var(--ink-soft);
  --segment:var(--surface); --segment-foreground:var(--ink);
  --border:var(--line); --separator:var(--line);
  --focus:var(--action); --link:var(--ink);
  --backdrop:rgba(26,19,16,.55);
  /* cantos do CSS original na escala do HeroUI (o monta.js troca os px do estilo.css por estes) */
  --raio-ctl:calc(var(--radius) * 1.5); --raio-bloco:var(--radius-xl); --raio-card:min(32px, var(--radius-3xl));
  --raio-mini:var(--radius); --raio-barra:calc(var(--radius) * .5);
}
/* ícones Hugeicons (desde 19/10/2026): tamanho pela letra em volta. O desenho ocupa 18 dos 24 px da caixa (o do Gravity
   ocupava 14 de 16), por isso as caixas são um pouco maiores que antes. O traço fica em 1,5 px em qualquer tamanho, como
   no Figma quando o ícone é redimensionado */
svg.hi{width:1.3em;height:1.3em;flex:none;display:inline-block;vertical-align:-.28em}
svg.hi *{vector-effect:non-scaling-stroke}
.button svg.hi{width:1.25rem;height:1.25rem;vertical-align:0}
.convites a svg.hi{width:1.25rem;height:1.25rem;color:var(--action);vertical-align:-.28em;margin-right:.4rem}
.site-assoc svg.hi.sai{width:1.15em;height:1.15em}
svg.hi.rumo{width:1.15em;height:1.15em;vertical-align:-.22em}
.jogo .veredito svg.marca{margin-right:.35em}
.jogo .opc.certa::before{content:none}   /* o ✔ de texto do original virou o ícone tick-02 */

/* ---------- O reset do HeroUI (preflight do Tailwind) apaga padrões do navegador em que o site original se apoia.
   Fora dos componentes da biblioteca (tudo o que é dela tem data-slot), voltam os padrões. Especificidade zero:
   qualquer regra do site continua valendo por cima. */
:where(h1,h2,h3,h4,h5,h6):where(:not([data-slot])){font-size:revert}
:where(ul,ol):where(:not([data-slot])){list-style:revert;margin:revert;padding:revert}
:where(dl,dd,blockquote,hr,legend):where(:not([data-slot])){margin:revert;padding:revert}
:where(a):where(:not([data-slot])){text-decoration:revert}
:where(svg,img,video,canvas,iframe):where(:not([data-slot])){display:revert;vertical-align:revert}
.top nav.menu{flex-direction:row;width:auto;padding:0}     /* "menu" também é nome de componente do HeroUI: a navegação do topo continua em linha */

/* ---------- Button */
.button.button{color:var(--button-fg);text-decoration:none}  /* o site pinta todo link com a cor de ação; no botão quem manda é o HeroUI */
body:not(.sem-js) .aplicar{display:none}                 /* o original esconde o "Aplicar" quando há JavaScript */
/* o botão "Ver cidade" da capa volta a aparecer: sem ele, quem não vê a lista de sugestões não sabe como seguir */
.tema.button,.icone-busca.button,.sobre-link.button{
  background-color:var(--button-bg);color:var(--button-fg);border-radius:revert-layer;border:revert-layer;
  width:revert-layer;height:revert-layer;padding:revert-layer;min-height:revert-layer;font-size:revert-layer;font-weight:revert-layer}
.tema.button:hover,.tema.button:focus-visible,.icone-busca.button[aria-expanded="true"],.sobre-link.button:hover,.sobre-link.button:focus-visible{
  background-color:var(--button-bg-hover);color:var(--button-fg);border-color:revert-layer}
.button.button{font:revert-layer}                         /* o site tem button{font:inherit}: tamanho e peso voltam a ser os do Button */
.jogo .opc.button{height:auto}                            /* as opções do jogo quebram linha: altura pelo conteúdo */

/* ---------- Card */
.card,.tile{background-color:revert-layer;border-radius:revert-layer;box-shadow:revert-layer;border:revert-layer}
.tile.card{gap:.2rem;padding:1rem 1.1rem}                /* o ladrilho é Card, mas mantém o respiro dele (o .card do site é o cartão de pergunta) */
.card-topo.card__header{flex-direction:row}             /* pergunta à esquerda e sigla à direita, como no original */
.tile.card.on,.tile.card:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}   /* o destaque do cartão da associação (o mapa acende junto) */

/* ---------- SearchField + Popover/ListBox das sugestões */
.search-field .search-field__input{all:revert-layer}
.search-field .search-field__group{width:100%}
.hero .search-field .search-field__group,.palpite-form .search-field .search-field__group{height:calc(var(--spacing) * 11)}
.search-field>.sug{top:calc(100% + 6px)}
.sug.popover{background:revert-layer;border:revert-layer;border-radius:revert-layer;box-shadow:revert-layer;padding:revert-layer;margin:0;max-height:22rem;overflow-y:auto}
.sug .list-box-item{flex-direction:column;align-items:flex-start;justify-content:center;gap:0;color:var(--ink);text-decoration:none}
.sug .list-box-item .description{color:var(--muted)}
.sug .list-box-item:focus-visible,.sug .list-box-item:hover{background-color:var(--default)}
.sug .list-box-item[aria-disabled="true"]{cursor:default;color:var(--muted)}

/* ---------- TextField */
.text-field{display:flex;flex-direction:column;gap:calc(var(--spacing) * 1)}
.text-field .input{all:revert-layer;width:100%}

/* ---------- RadioGroup */
.radio-group{border:0;margin:0;padding:0;min-inline-size:0}
.radio-group[data-orientation="horizontal"]{gap:calc(var(--spacing) * 2) calc(var(--spacing) * 4)}
.radio-group[data-orientation="horizontal"] [data-slot="radio"]{margin-top:0}
.radio-group[data-orientation="vertical"] [data-slot="radio"]:first-of-type{margin-top:calc(var(--spacing) * 2)}
.radio .radio__content{display:flex}
.radio__control{position:relative;flex:none}
.radio:has(input:focus-visible) .radio__control{outline:2px solid var(--focus);outline-offset:2px}

/* ---------- Tabs (assuntos) */
.chips.tabs{display:block;padding:0;overflow-x:auto;scrollbar-width:none}
.chips.tabs .tabs__list-container{display:inline-block;min-width:100%}
.chips.tabs[data-orientation="vertical"] .tabs__list-container{display:block}
nav.chips.tabs .tabs__tab{background:revert-layer;border:revert-layer;border-radius:revert-layer;color:revert-layer;min-height:revert-layer;padding:revert-layer;font-weight:revert-layer;font-size:revert-layer;flex:revert-layer;display:revert-layer;text-decoration:none;white-space:nowrap}
nav.chips.tabs[data-orientation="vertical"] .tabs__list{display:flex;width:100%}
nav.chips.tabs[data-orientation="vertical"] .tabs__tab{justify-content:space-between}
nav.chips.tabs .tabs__tab small{display:revert-layer;margin-left:auto;padding-left:calc(var(--spacing) * 3);color:var(--muted);font-size:var(--text-xs)}
nav.chips.tabs[data-orientation="horizontal"] .tabs__tab small{display:none}   /* no celular o original esconde a contagem */
nav.chips.tabs .tabs__tab[data-selected="true"] small{color:var(--segment-foreground)}
.corpo nav.chips.tabs .tabs__tab:hover:not([aria-current="true"]),.corpo nav.chips.tabs .tabs__tab[aria-current="true"]{background:revert-layer;color:revert-layer}
.corpo nav.chips.tabs .tabs__tab.em-vista{background:transparent;color:var(--foreground)}

/* ---------- Disclosure */
details.disclosure>summary{list-style:none}
details.disclosure>summary::-webkit-details-marker{display:none}
details.disclosure>summary.disclosure__trigger::before{content:none;display:none}
details.disclosure>summary.disclosure__trigger{display:flex;align-items:center;gap:calc(var(--spacing) * 2)}
.disclosure__indicator,svg.hi.disclosure__indicator{width:1.25rem;height:1.25rem}   /* fixa, não pela letra em volta */
.head-grid .mapa-dobra summary.disclosure__trigger{display:none}
@media (max-width:63.99rem){ .head-grid .mapa-dobra summary.disclosure__trigger{display:flex} }

/* ---------- Avatar (sigla do assunto) */
.selo-area .avatar{width:calc(var(--spacing) * 8);height:calc(var(--spacing) * 8)}
.selo-area .avatar__fallback{display:flex;font-size:.7rem;letter-spacing:.04em;color:var(--muted)}

/* ---------- Tag */
.pilulas.tag-group__list{gap:calc(var(--spacing) * 1.5)}
.pilulas a.tag,.chip-cid.tag{display:inline-flex;background:revert-layer;border:revert-layer;border-radius:revert-layer;min-height:revert-layer;padding:revert-layer;font-size:revert-layer;color:revert-layer;text-decoration:none;font-family:var(--body)}
.tag--default{background-color:var(--default);color:var(--default-foreground)}
.tag--default:hover{background-color:var(--default-hover)}
.pilulas a.tag small{font-weight:400}
.chip-cid.tag.ok{background-color:var(--success);color:var(--success-foreground)}
.chip-cid.tag:disabled{opacity:var(--disabled-opacity)}

/* ---------- Link */
.menu a.link{border-bottom:0;background:none;font-weight:revert-layer}
.menu a.link:hover{background:none}
.menu a.link[aria-current="page"]{text-decoration-line:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:7px}

/* ---------- Slider (palpite do jogo) */
.palpite .slider{margin-block:calc(var(--spacing) * 2)}
.slider .slider__track{height:calc(var(--spacing) * 5)}
.slider .slider__fill{left:0;top:0;height:100%}
.slider .slider__thumb{top:50%;height:100%;transform:translate(-50%,-50%);pointer-events:none}
.slider .slider__input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:grab;z-index:2}
.slider[data-disabled="true"]{opacity:var(--disabled-opacity)}

/* ---------- Tooltip (valor de cada ano nas séries) */
.dica-pt.tooltip{background:revert-layer;color:var(--overlay-foreground);border-radius:revert-layer;box-shadow:var(--overlay-shadow);padding:revert-layer;font-size:var(--text-xs);word-break:normal}

/* ---------- Modal (folha do WhatsApp) */
#veu.modal__backdrop{background:var(--backdrop)}
#sheet.modal__dialog{max-width:30rem;gap:calc(var(--spacing) * 4);color:var(--overlay-foreground)}
#sheet .modal__heading{font-family:var(--body);font-size:var(--text-base)}
#sheet-txt{margin:0;white-space:pre-wrap;font:inherit;font-size:var(--text-sm);line-height:1.45;color:var(--foreground);background:var(--surface-secondary);border-radius:var(--radius-xl,.75rem);padding:calc(var(--spacing) * 3)}
#sheet .modal__footer{flex-wrap:wrap;justify-content:flex-start}
#sheet .description{margin:0}

/* ---------- Popover (confirmação do mapa da região) */
.mapa-confirma.popover{border:0;background:var(--overlay);box-shadow:var(--overlay-shadow);border-radius:var(--radius-2xl,1rem);padding:calc(var(--spacing) * 3)}

/* ==========================================================================
   Melhorias de interface (16/10/2026)
   ========================================================================== */

/* ---------- cartão: barras dentro do "Entenda melhor", régua das barras, nota da comparação */
details.exp .corpo > .cmp{margin:0 0 .3rem;padding:.7rem .8rem;background:var(--surface-secondary);border-radius:var(--raio-bloco)}
.cmp .escala{display:block;margin-top:.15rem}
.nota-cmp{margin:.2rem 0 0}
/* "Para especialistas": Disclosure dentro do Disclosure, com o nome técnico, a nota da base e a mediana */
details.exp-tec{margin-top:.2rem;border-top:1px dashed var(--line);padding-top:.2rem}
details.exp-tec>summary.disclosure__trigger{font-size:.8rem;font-weight:600;color:var(--muted);min-height:32px;cursor:pointer}
details.exp-tec>summary::before{content:none;display:none}
details.exp-tec .corpo{display:flex;flex-direction:column;gap:.4rem;padding-top:.3rem}
/* Compartilhar: Button ghost só com o ícone, no canto do rodapé */
.card-rodape .button.compartilhar{margin-top:.15rem;color:var(--muted)}
.card-rodape .button.compartilhar:hover{color:var(--foreground)}
/* ano do dado: Chip debaixo da sigla; o dado antigo fica em tom de aviso */
.selo-area .chip.ano-chip{font-size:.66rem;line-height:1.1rem;padding-inline:.35rem;letter-spacing:.02em;font-weight:600;color:var(--chip-fg)}
.selo-area .chip.ano-chip.chip--default{--chip-bg:transparent;--chip-fg:var(--muted)}
.selo-area .chip.ano-chip.chip--warning{cursor:help}

/* ---------- capa: "Ver cidade" com lupa, "Voltar para" e o aviso de assunto escolhido antes da cidade */
.hero form .button[type="submit"]{flex:1 1 100%;justify-content:center}   /* largura toda, como o "Usar onde estou" logo abaixo */
.busca-inline .button[type="submit"]{flex:none}
.hero #onde-estou.button{width:100%;justify-content:center}
/* RadioGroup: o círculo vazio aparece também no escuro (a borda do kit some sobre o cartão) */
.radio:not([data-selected]):not(:has(input:checked)) .radio__control{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ink) 40%,transparent)}
.volta-cidade{margin:.1rem 0 0;font-weight:600}
.volta-cidade a.link{display:inline-flex;align-items:center;gap:.4rem;color:var(--ink);text-decoration:underline;text-decoration-color:var(--action);text-decoration-thickness:2px;text-underline-offset:4px}
.aviso-assunto{margin:0;padding:.5rem .75rem;border-radius:var(--raio-ctl);background:color-mix(in srgb,var(--action) 20%,transparent);color:var(--ink);font-weight:600}

/* ---------- mapa da capa: Tooltip junto do cursor e confirmação no toque */
.dica-mapa.tooltip{position:absolute;z-index:20;pointer-events:none;white-space:nowrap;background:var(--overlay);color:var(--overlay-foreground);box-shadow:var(--overlay-shadow);border-radius:var(--radius-xl);padding:.3rem .6rem;font-size:var(--text-xs);font-weight:600}
.mapa-estado,.mapa-mini{position:relative}
.mapa-toque.popover{position:absolute;z-index:7;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;width:max-content;max-width:min(18rem,calc(100% - 8px))}
.mapa-toque[hidden]{display:none}
.mapa-toque>span{flex:1 1 100%;font-size:var(--text-sm)}
.mapa-svg a.tocada path{stroke:var(--ink);stroke-width:2.2}

/* ---------- busca: associação na lista de sugestões */
.sug .item-assoc .label{font-weight:700;letter-spacing:.02em}

/* ---------- jogo: ProgressBar da rodada e marcas do Slider */
.progresso-jogo{margin-bottom:.2rem}
.progresso-jogo .label{font-size:var(--text-xs);color:var(--muted);font-weight:600}
.progresso-jogo .progress-bar__output{font-size:var(--text-xs);color:var(--muted)}
.slider{position:relative;padding-bottom:1.3rem}
.slider__marcas{position:absolute;left:0;right:0;bottom:0;height:1.1rem;pointer-events:none}
.slider__marcas span{position:absolute;top:0;transform:translateX(-50%);font-size:.7rem;color:var(--muted);font-variant-numeric:tabular-nums}
.slider__marcas span::before{content:"";position:absolute;left:50%;top:-.3rem;width:1px;height:.25rem;background:var(--line)}
.slider__marcas span:first-child{transform:none}
.slider__marcas span:first-child::before{left:0}
.slider__marcas span:last-child{transform:translateX(-100%)}
.slider__marcas span:last-child::before{left:auto;right:0}

/* ---------- celular: barra de baixo (Tabs do HeroUI) com Cidade, Comparar, Jogo e Mais. Desde 19/10/2026 é a do esboço
   497:16585: um bloco de cantos 16 solto 8 px das bordas, e a aba ativa num bloco de cantos 12 (5 px para dentro), com o
   ícone em ocre e o rótulo na cor do texto; as outras no texto suave. No escuro o bloco é #362022 e a aba ativa tem a cor
   da faixa; no claro (o esboço é só escuro) o bloco é branco, com filete e sombra, e a aba ativa fica no trilho */
.barra-cel{display:none}
@media (max-width:63.99rem){
  :root{--altura-barra:calc(76px + max(8px, env(safe-area-inset-bottom, 0px)))}
  body.com-barra{padding-bottom:var(--altura-barra)}
  .com-barra .sobre-link{display:none}                  /* "Sobre" está no "Mais" */
  .com-barra .jogo .acts2.fixo{bottom:var(--altura-barra)}
  .barra-cel{display:block;position:fixed;left:0;right:0;bottom:0;z-index:15;padding:8px 8px max(8px, env(safe-area-inset-bottom, 0px));pointer-events:none}   /* a margem em volta do bloco não rouba o toque */
  .barra-cel .tabs__list-container,.barra-cel .barra-mais{pointer-events:auto}
  .barra-cel .tabs__list-container{display:block}
  .barra-cel .tabs__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;width:100%;box-sizing:border-box;padding:5px;border-radius:16px;
    background:var(--barra-fundo);box-shadow:var(--barra-sombra)}
  /* rótulo em Inter SemiBold 11,2, como no esboço (texto miúdo fica na Inter, mesmo nas abas) */
  .barra-cel .tabs__tab.tabs__tab{all:unset;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:58px;padding:0 4px;border-radius:12px;
    color:var(--ink-soft);font-family:var(--body);font-size:.7rem;font-weight:600;line-height:1.5;cursor:pointer;-webkit-tap-highlight-color:transparent;min-width:0}
  .barra-cel .tabs__tab svg.hi{width:22px;height:22px}
  .barra-cel .tabs__tab .rot{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .barra-cel .tabs__tab[data-selected]{background:var(--barra-ativa);color:var(--ink)}
  .barra-cel .tabs__tab[data-selected] svg.hi{color:var(--action)}
  .barra-cel .tabs__tab:focus-visible{outline:2px solid var(--action);outline-offset:-2px}
  .barra-cel .barra-mais{position:absolute;right:8px;bottom:100%;min-width:13rem;background:var(--overlay);border:0;box-shadow:var(--overlay-shadow);border-radius:var(--radius-2xl,1rem);padding:.35rem}
  .barra-cel .barra-mais[hidden]{display:none}
  .barra-cel .barra-mais .menu{display:flex;flex-direction:column;gap:.1rem;width:auto;padding:0}
  .barra-cel .barra-mais .menu-item{display:flex;align-items:center;gap:.6rem;min-height:44px;padding:0 .75rem;color:var(--ink);text-decoration:none;font-weight:600}
  .barra-cel .barra-mais .menu-item:hover,.barra-cel .barra-mais .menu-item:focus-visible{background:var(--default);outline:none}
}
@media print{ .barra-cel{display:none!important} body.com-barra{padding-bottom:0} }

/* ---------- página Comparar (modelo da página da cidade, 19/10/2026): campo, "Comparar com" e botão em coluna ---------- */
.form-comparar{max-width:48rem;display:flex;flex-direction:column;gap:1rem}
.form-comparar .campo-com{flex:0 0 auto;max-width:none}   /* na coluna, flex-basis 14rem virava altura */
.form-comparar .campo-com .label,.form-comparar legend.rotulo-cmp{display:block;font-weight:700;margin-bottom:.3rem}
.form-comparar legend.rotulo-cmp{font-size:.72rem;padding:0;margin-bottom:.5rem}
.form-comparar .radio-group{gap:.5rem 1rem}
.form-comparar .acts2{margin-top:.2rem}