/* Identidade nova (11/10): a base limpa da proposta C, só em tema claro. Duas famílias: Space Grotesk (números e títulos) e Inter (texto).
   Duas cores de dado, cada uma com um papel fixo: verde-água = este lugar, agora; violeta = a referência (inflação, o Brasil, o mês anterior);
   magenta só para "subiu". Verde, amarelo e vermelho só nas bandeiras. Os nomes antigos (--bg, --paper, --ink, --accent...) seguem valendo para
   /explorar/ e /comparar/, com os valores novos. Este primeiro bloco :root não pode ter chaves dentro: site/cartoes/gerar.mjs o copia inteiro. */
:root{
  color-scheme:light;
  --fundo:#eef1f7; --superficie:#ffffff; --superficie-2:#f2f4fa; --superficie-3:#e2e7f0; --linha:#e1e5ee; --linha-forte:#c9d0de;
  --tinta:#0c111b; --tinta-2:#465267; --tinta-3:#5a667c;
  --aqua:#006f69; --aqua-forte:#058d83; --aqua-suave:rgba(0,111,105,.10);
  --violeta:#5b35d5; --violeta-forte:#7c5cf3; --violeta-suave:rgba(91,53,213,.10);
  --alta:#b3207f; --alta-suave:rgba(179,32,127,.10);
  --botao:#2ee6d6; --sobre-botao:#04211f; --grafite:#0f1420;
  --sombra:0 12px 30px rgba(24,34,60,.12); --vidro:rgba(255,255,255,.88);
  --bandeira-verde:#2fbf4a; --bandeira-amarela:#f2b705; --bandeira-vermelha:#e5484d; --bandeira-vermelha2:#b8242b;
  --bg:var(--fundo); --paper:var(--superficie); --ink:var(--tinta); --ink-2:var(--tinta-2); --ink-3:var(--tinta-3);
  --line:var(--linha); --line-2:#edf0f6; --accent:var(--aqua); --accent-soft:var(--aqua-suave);
  --hi:var(--violeta); --hi-soft:#eeeafb; --hi-ink:#3e2294;
  --st-bom:var(--aqua); --st-ruim:var(--alta);
  --s-city:var(--aqua-forte); --s-br:var(--violeta-forte); --dot:#9aa7b8;
  --good:#006f69; --warn:#5b35d5; --bad:#b3207f;
  --div-n2:#1c5cab; --div-n1:#6da7ec; --div-0:#c9cfd8; --div-p1:#ec8a7e; --div-p2:#c23b3b;
  --c1:#2a78d6; --c2:#eb6834; --c3:#1baf7a; --c4:#eda100; --c5:#e87ba4;
  --q1:#dbe9fb; --q2:#9ec5f4; --q3:#5598e7; --q4:#256abf; --q5:#0d366b;
  --display:"Space Grotesk", Inter, system-ui, sans-serif;
  --body:Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"Space Grotesk", Inter, system-ui, sans-serif;
}
*{box-sizing:border-box}
a:focus-visible,button:focus-visible,summary:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 var(--body);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;padding-inline:16px;padding-block:20px 56px}
.wrap{max-width:1080px;margin:0 auto;display:grid;gap:40px}
h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0;letter-spacing:-.01em}
h1{font-size:clamp(32px,6vw,52px);line-height:1.04;font-weight:700;letter-spacing:-.03em}
h2{font-size:24px;font-weight:600;letter-spacing:-.02em}
h3{font-size:15px;font-weight:600;font-family:var(--body)}
p{margin:0}
a{color:var(--aqua);text-underline-offset:3px}
.num,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{color:var(--ink-2)}
.small{font-size:13px}
header{display:grid;gap:14px}
header .lede{max-width:62ch;color:var(--ink-2);font-size:17px}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--paper);border-radius:99px;padding:3px 10px;font-size:12.5px;color:var(--ink-2)}
.chip b{color:var(--ink);font-weight:600}
/* busca */
.search{position:relative;max-width:460px}
.search label{display:block;margin-bottom:6px}
.search input{width:100%;font:inherit;font-size:17px;padding:12px 14px;border-radius:14px;border:1.5px solid var(--linha-forte);background:var(--paper);color:var(--ink)}
.search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.sugs{position:absolute;z-index:5;left:0;right:0;top:calc(100% + 6px);background:var(--paper);border:1px solid var(--linha-forte);border-radius:18px;padding:6px;margin:0;list-style:none;box-shadow:var(--sombra)}
.sugs li{padding:10px 12px;border-radius:12px;cursor:pointer;display:flex;justify-content:space-between;gap:12px}
.sugs li[aria-selected="true"],.sugs li:hover{background:var(--accent-soft)}
.sugs .uf{color:var(--ink-3);font-family:var(--mono);font-size:13px}
.fatura{background:var(--paper);border:1px solid var(--line);border-radius:22px;overflow:hidden}
.item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;padding:14px 22px;border-bottom:1px solid var(--line-2)}
.item .qtd{font-size:13px;color:var(--ink-3)}
.item .val{font-family:var(--mono);font-size:17px;text-align:right;font-variant-numeric:tabular-nums}
.item .cmp{grid-column:1 / -1;display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12.5px;color:var(--ink-2)}
.tag{font-size:11.5px;padding:1px 7px;border-radius:5px;background:var(--line-2);color:var(--ink-2)}
.total{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:2px 12px;padding:18px 22px;background:var(--accent-soft)}
.total .val{grid-column:2;grid-row:1 / span 2}
.total .sub{grid-column:1;grid-row:2}
.total .val{font-family:var(--mono);font-size:28px;font-weight:500;white-space:nowrap}
.nota{padding:12px 22px 16px;font-size:12.5px;color:var(--ink-3)}
.side{display:grid;gap:20px}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:18px 20px;display:grid;gap:12px}
.q{display:grid;gap:2px}
.status{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600}
.status i{width:9px;height:9px;border-radius:50%;background:currentColor;display:inline-block}
.status.bad{color:var(--bad)}
/* controles */
.seg{display:inline-flex;flex-wrap:wrap;gap:4px;background:var(--line-2);padding:3px;border-radius:9px}
.seg button{font:inherit;font-size:13px;border:0;background:transparent;color:var(--ink-2);padding:5px 11px;border-radius:7px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--paper);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.12);font-weight:600}
.seg button:focus-visible,.sugs li:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
svg text{fill:var(--ink-3);font:11px var(--mono)}
svg text.lbl{fill:var(--ink);font:600 12px var(--body);paint-order:stroke;stroke:var(--paper);stroke-width:3px;stroke-linejoin:round}
.tip{position:fixed;pointer-events:none;background:var(--grafite);color:#fff;padding:6px 9px;border-radius:9px;font-size:12px;line-height:1.35;white-space:nowrap;transform:translateX(-50%);z-index:50;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.tip .mono{font-size:12px}
/* rankings */
section{display:grid;gap:16px}
.dados{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.file{border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--paper);display:grid;gap:4px}
.file.fonte{text-decoration:none;color:inherit;align-content:start}
.file.fonte:hover{border-color:var(--accent)}
.file.fonte b{font-size:14px;color:var(--ink)}
.file.fonte .link{font-size:12.5px;color:var(--accent);font-weight:600;margin-top:2px}
.file code{font-family:var(--mono);font-size:13px;color:var(--ink);overflow-wrap:anywhere}
.dica{grid-column:1 / -1;font-size:12.5px;padding:8px 10px;border-radius:8px;background:var(--accent-soft);color:var(--ink)}
.combo{position:relative;min-width:min(320px,100%);flex:0 1 360px}
.combo input{width:100%;font:inherit;font-size:15px;color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:8px;padding:8px 34px 8px 10px}
.combo input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.combo .sugs{max-height:300px;overflow-y:auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-size:14.5px;font-weight:600;border:1px solid transparent;border-radius:99px;padding:10px 20px;background:var(--botao);color:var(--sobre-botao);cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:focus-visible{outline:2px solid var(--aqua);outline-offset:2px}
#share-txt{width:100%;min-height:180px;font:13px var(--mono);border:1px solid var(--line);border-radius:10px;padding:10px;background:var(--paper);color:var(--ink)}
.trend-panel{margin-top:20px}
.dica-busca{font-size:12px;color:var(--ink-3);cursor:default!important;background:none!important}
.reg-bar select,.kwh-in input{font:inherit;color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:8px;padding:7px 10px}
.reg-bar select:focus,.kwh-in input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.kwh-ctrl{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.kwh-in{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-2)}
.kwh-in input{width:84px;font-family:var(--mono);font-size:14px;padding:5px 8px}
.link-btn{justify-self:start;font:inherit;font-size:13px;color:var(--ink-2);background:none;border:0;padding:0;text-decoration:underline;cursor:pointer}
#mapa .reg,.mun{cursor:pointer}
.mun:hover{filter:brightness(.9)}
#mapa .reg:hover{filter:brightness(.92)}
.rodape{font-size:13.5px;line-height:1.5;color:var(--ink-2);border-top:1px solid var(--line);padding-top:20px;display:grid;gap:8px;max-width:78ch}
.rodape p{margin:0}
.rodape strong{color:var(--ink)}
.rodape a{color:var(--accent)}
.rodape__autoria{color:var(--ink);font-size:15px}
.rodape__autoria a{font-weight:600}
#gerado{color:var(--ink-3);font-size:12.5px}
@media (prefers-reduced-motion:no-preference){
.rank li,.seg button{transition:background .15s}
}
/* marca */
.marca{display:flex;align-items:center;gap:10px}
.marca .logo{width:40px;height:40px;flex:none}
.marca-nome{font-family:var(--display);font-weight:500;font-size:19px;letter-spacing:-.015em}
.marca-nome b{font-weight:700}
.btn-grande{font-size:16px;padding:12px 24px;min-height:50px}
.btn-sec{background:transparent;color:var(--ink);border:1px solid var(--linha-forte)}
.btn-sec:hover{border-color:var(--aqua)}
.btn-wa{display:inline-flex;align-items:center;gap:8px}
.btn-wa::before{content:"";width:18px;height:18px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm0 18.2a8.2 8.2 0 0 1-4.2-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8-.2-.1-.4-.1-.6.1l-.8 1c-.1.2-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.3-.4.2-.4.7-1.3.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5c-.2 0-.4.1-.7.3-.2.3-.9.9-.9 2.2s.9 2.5 1 2.7c.1.2 1.8 2.8 4.4 3.9 1.6.7 2.3.8 3.1.6.5-.1 1.5-.6 1.7-1.2.2-.6.2-1.1.1-1.2l-.4-.3z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm0 18.2a8.2 8.2 0 0 1-4.2-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8-.2-.1-.4-.1-.6.1l-.8 1c-.1.2-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.3-.4.2-.4.7-1.3.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5c-.2 0-.4.1-.7.3-.2.3-.9.9-.9 2.2s.9 2.5 1 2.7c.1.2 1.8 2.8 4.4 3.9 1.6.7 2.3.8 3.1.6.5-.1 1.5-.6 1.7-1.2.2-.6.2-1.1.1-1.2l-.4-.3z'/%3E%3C/svg%3E") center/contain no-repeat}
.posicao{margin:16px 22px 0;padding:10px 14px;line-height:1.45;border-radius:14px;background:var(--hi-soft);color:var(--hi-ink);font-size:14px;font-weight:600}
.share-acoes{display:flex;gap:10px;flex-wrap:wrap}
.recebido{border-color:var(--hi);background:var(--hi-soft);margin-bottom:20px}
.recebido p{color:var(--ink)}
@media (max-width:560px){
.posicao{margin-inline:16px}
.share-acoes .btn{flex:1 1 calc(50% - 10px);justify-content:center;text-align:center}
}
/* atalhos */
.atalhos{display:flex;gap:6px;flex-wrap:wrap;margin-block:14px 18px}
.atalhos a{flex:none;font-size:13px;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:99px;padding:5px 12px;text-decoration:none}
.atalhos a:hover{border-color:var(--accent)}
#cesta,#q-panel,#cmp-panel,#trend-panel,#cidade,#ranking,#resumo,#se-morasse-sec{scroll-margin-top:12px}
@media (max-width:560px){
.atalhos{flex-wrap:nowrap;overflow-x:auto;margin-inline:-16px;padding-inline:16px;scrollbar-width:none}
.atalhos::-webkit-scrollbar{display:none}
}
@media (pointer:coarse){
input,select{font-size:16px!important}
}
.ci-quadro{width:100%;max-width:340px;aspect-ratio:4/5;border-radius:20px;overflow:hidden;box-shadow:var(--sombra)}
.ci-quadro.carregando{animation:piscar 1.1s ease-in-out infinite alternate}
@keyframes piscar{from{opacity:.55}to{opacity:1}}
.ci-retorno{min-height:1.3em;margin:0;font-size:13px;color:var(--ink-2)}
.ci-retorno textarea{display:block;width:100%;margin-top:6px;font:13px var(--mono)}
.btn:disabled{opacity:.5;cursor:default}
@media (max-width:720px){
.ci-quadro{justify-self:center}
}
@media (prefers-reduced-motion:reduce){
.ci-quadro.carregando{animation:none}
}
/* nova primeira tela */
.hero{display:grid;gap:14px;max-width:640px}
.hero h1{font-size:clamp(34px,7vw,56px);line-height:1.02;font-weight:800}
.hero .lede{font-size:18px;color:var(--ink-2);max-width:52ch}
.confianca{max-width:52ch}
body:not(.sem-lugar) .descobre,body:not(.sem-lugar) .confianca{display:none}
body:not(.sem-lugar) .hero h1{font-size:clamp(28px,5vw,40px)}
body.sem-lugar .res{display:none!important}
.veredito{gap:10px;padding:22px;border-radius:26px}
.aj-mais summary{cursor:pointer;font-size:13px;color:var(--accent);font-weight:600}
.aj-mais[open] summary{margin-bottom:8px}
.como > summary{cursor:pointer;font-family:var(--display);font-weight:700;font-size:18px}
.como[open] > summary{margin-bottom:12px}
@media (max-width:720px){
.veredito{padding:18px}
}
.cmp-tab{display:grid}
.cmp-row{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:2px 12px;align-items:baseline;padding:8px 4px;border-bottom:1px solid var(--line-2);font-size:14px}
.cmp-row > span:not(.cmp-it){text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.cmp-h{font-size:12px;color:var(--ink-3);font-weight:600;border-bottom:1px solid var(--line)}
.cmp-h > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--body)!important}
.cmp-h .cmp-b{color:var(--s-city)}
.cmp-tot{font-weight:600;background:var(--accent-soft);border-radius:8px;border-bottom:0;margin-top:4px}
.cmp-dif{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:2px 6px;align-items:baseline}
.dif-up{color:var(--bad)}
.dif-down{color:var(--good)}
.dif-eq{color:var(--ink-3)}
@media (max-width:560px){
.cmp-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 8px;padding-inline:0}
.cmp-row .cmp-it{grid-column:1 / -1;font-size:13px;color:var(--ink-2)}
.cmp-h .cmp-it{display:none}
.cmp-tot{padding-inline:8px}
.cmp-tot .cmp-it{color:var(--ink)}
}
@media (pointer:coarse){
.seg button{padding:8px 12px}
}
@media (max-width:560px){
body{padding-block:20px 40px}
.wrap{gap:32px}
.chip{display:inline-block;border-radius:12px;padding:4px 10px;line-height:1.45}
.fatura-head,.item,.cesta-cfg,.total,.nota,.kwh-row{padding-inline:16px}
.total{grid-template-columns:1fr}
.total .val{grid-column:1;grid-row:2;font-size:30px}
.total .sub{grid-row:3}
.panel{padding:16px}
.dados{grid-template-columns:1fr;gap:8px}
.file.fonte{padding:10px 12px;gap:2px}
.file.fonte .link{display:none}
.file.fonte b::after{content:" ↗";color:var(--accent)}
h2{font-size:22px}
}