/* Preço da Bomba
   Linguagem: placa de preço de posto e sinalização de rodovia.
   Barlow (desenhada a partir das placas de estrada) para texto, Barlow Condensed para os preços. */
/* Fontes servidas pelo próprio site (Barlow, licença OFL), sem depender do Google Fonts. */
@font-face{font-family:"Barlow";font-style:normal;font-weight:400 500;font-display:swap;src:url(/assets/barlow-400.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/barlow-600.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/barlow-700.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/barlow-condensed-600.woff2) format("woff2")}
:root{
  --asfalto:#23272b;--asfalto-2:#2f3439;--sinal:#ffcc00;
  --papel:#ffffff;--tinta:#1b1f23;--cinza:#5f666d;--cinza-claro:#8a9198;--linha:#e2e3e0;--leve:#f6f6f3;
  --link:#1f5fa8;--subiu:#b3261e;--caiu:#1e7a46;
  --campo:#ffffff;--campo-borda:#c5c8c4;--contorno:#23272b;--realce:#fff6cc;--pontilhado:#c9ccc8;--grade:#ececea;--texto-2:#3b4148;
  --aviso-texto:#5a4a00;--serie-2:#3a6ea5;--ponto-borda:#ffffff;color-scheme:light;
  --texto:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --numero:"Barlow Condensed","Barlow",system-ui,sans-serif;
}
/* Modo escuro: só quando a pessoa escolhe no botão do topo. O padrão é sempre o claro. */
:root[data-tema="escuro"]{
  --papel:#16191c;--tinta:#e6e8ea;--cinza:#a3aab1;--cinza-claro:#7c838a;--linha:#30353a;--leve:#1e2226;
  --link:#86b7ee;--subiu:#ff8a80;--caiu:#6fcf97;
  --campo:#1e2226;--campo-borda:#454b51;--contorno:#5b6268;--realce:#3a3416;--pontilhado:#4a5056;--grade:#2a2f34;--texto-2:#c9cdd1;
  --aviso-texto:#ffe38a;--serie-2:#79aee6;--ponto-borda:#16191c;color-scheme:dark;
}
:root[data-tema="escuro"] .painel,:root[data-tema="escuro"] .resultado,:root[data-tema="escuro"] .grafico-dica{border-color:#3a4046}
:root[data-tema="escuro"] .rodape{background:#0f1113}
:root[data-tema="escuro"] .busca-topo input{box-shadow:inset 0 0 0 1px #4a5056}
:root[data-tema="escuro"] .cookies .primario{background:var(--sinal);color:var(--asfalto);border-color:var(--sinal)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--tinta);font:17px/1.55 var(--texto)}
a{color:var(--link);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--sinal);outline-offset:2px}
img,svg{max-width:100%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.pular{position:absolute;left:-999px;top:8px;background:var(--sinal);color:var(--asfalto);padding:8px 12px;z-index:9}
.pular:focus{left:8px}

/* Topo */
.topo{background:var(--asfalto);color:#fff}
.topo-in{max-width:1080px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.marca{display:block;line-height:0;margin-left:-3px}
.marca img{display:block;height:32px;width:auto}
@media (max-width:420px){.marca img{height:24px}}
.menu{display:flex;gap:16px;flex-wrap:wrap;flex:1}
.menu a{color:#d6d9dc;text-decoration:none;font-size:16px;font-weight:500;padding:4px 0;border-bottom:2px solid transparent}
.menu a:hover{color:#fff;border-bottom-color:var(--sinal)}
.busca-topo input{background:var(--campo);border:0;color:var(--tinta);border-radius:3px;padding:8px 12px;width:172px;font:inherit;font-size:15px}
@media (max-width:860px){.topo-in{gap:10px 12px}.menu{order:3;flex-basis:100%;overflow-x:auto;flex-wrap:nowrap;gap:16px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent);padding-right:24px}.busca-topo{margin-left:auto}.busca-topo input{width:150px}}
@media (max-width:420px){.topo-in{padding:10px 16px}.busca-topo input{width:116px;padding:7px 9px;font-size:14px}.topo-in{gap:10px 8px}}

/* Página */
.pagina{max-width:1080px;margin:0 auto;padding:20px 20px 48px}
.migalhas ol{list-style:none;padding:0;margin:0 0 14px;display:flex;flex-wrap:wrap;gap:6px;font-size:15px;color:var(--cinza)}
.migalhas li+li::before{content:"/";margin-right:6px;color:var(--cinza-claro)}
.migalhas a{color:var(--cinza)}
.cabeca{margin:0 0 22px;max-width:760px}
h1{font-size:clamp(30px,4.6vw,44px);line-height:1.08;letter-spacing:-.015em;margin:0 0 12px;font-weight:700}
h2{font-size:24px;line-height:1.2;margin:0 0 14px;font-weight:700;letter-spacing:-.01em}
.lead{font-size:19px;color:var(--texto-2);margin:0}
.atualizado{font-size:15px;color:var(--cinza);margin:10px 0 0}
.bloco{margin:40px 0}
.texto p{margin:0 0 14px;max-width:720px}
.texto p:last-child{margin-bottom:0}
.texto h2{margin-top:30px}.texto h2:first-child{margin-top:0}
.nota{font-size:15px;color:var(--cinza);margin:8px 0 0}
.mais{margin:14px 0 0}
.duas-colunas{display:grid;grid-template-columns:1fr 1fr;gap:0 48px}
.duas-colunas .bloco{margin-bottom:0}
@media (max-width:760px){.duas-colunas{grid-template-columns:1fr}}

/* Abertura da home */
.heroi{margin:8px 0 26px;max-width:720px}
.busca-grande{position:relative;display:flex;gap:8px;margin-top:22px;max-width:620px}
.busca-grande input{flex:1;font:inherit;font-size:19px;padding:13px 16px;border-radius:4px;border:2px solid var(--contorno);background:var(--campo);color:var(--tinta);min-width:0}
.busca-grande button{font:inherit;font-weight:700;font-size:18px;background:var(--sinal);color:var(--asfalto);border:2px solid var(--asfalto);border-radius:4px;padding:0 22px;cursor:pointer}
.busca-grande button:hover{background:#ffd633}
.sugestoes{position:absolute;top:100%;left:0;right:0;margin-top:4px;background:var(--campo);border:2px solid var(--contorno);border-radius:4px;overflow:hidden;z-index:6}
.sugestoes a{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;color:var(--tinta);text-decoration:none;border-bottom:1px solid var(--linha)}
.sugestoes a:last-child{border-bottom:0}
.sugestoes a:hover,.sugestoes a:focus{background:var(--realce)}
.sugestoes small{color:var(--cinza)}
.sug-nome{display:flex;flex-direction:column;line-height:1.25}
.sug-nome small{font-size:13px;color:var(--cinza);font-weight:400}
.busca-topo{position:relative}
.busca-topo .sugestoes{left:auto;right:0;width:320px;max-width:calc(100vw - 32px);font-size:16px}
.tabela-outros{background:var(--campo);border:2px solid var(--contorno);border-radius:4px;max-width:460px;margin:0 0 16px;overflow:hidden}
.tabela-outros p{margin:0;padding:8px 14px;font-size:15px;color:var(--cinza);background:var(--leve);border-bottom:1px solid var(--linha)}
.tabela-outros a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 14px;color:var(--tinta);text-decoration:none;border-bottom:1px solid var(--linha)}
.tabela-outros a:last-child{border-bottom:0}
.tabela-outros a:hover,.tabela-outros a:focus{background:var(--realce)}
.tabela-outros a>small{color:var(--cinza)}

/* Placa de preço */
.painel{background:var(--asfalto);color:#fff;border-radius:6px;padding:6px 22px;margin:0 0 8px;max-width:620px;border:3px solid var(--asfalto);box-shadow:inset 0 0 0 2px #3a4046}
.placa-linha{display:grid;grid-template-columns:1fr auto;grid-template-areas:"nome preco" "info info";column-gap:16px;padding:14px 0;border-bottom:1px solid #3c4248;color:#fff;text-decoration:none}
.placa-linha:last-child{border-bottom:0}
a.placa-linha:hover .placa-nome{color:var(--sinal)}
.placa-nome{grid-area:nome;font-size:20px;font-weight:600;align-self:center;line-height:1.15}
.placa-nome small{display:block;font-size:14px;font-weight:400;color:#a9afb5}
.placa-preco{grid-area:preco;font-family:var(--numero);font-weight:600;font-size:52px;line-height:.95;color:var(--sinal);font-variant-numeric:tabular-nums;text-align:right;letter-spacing:.01em}
.placa-preco small{font-size:20px;font-weight:500;margin-right:4px;vertical-align:top;position:relative;top:6px;color:#e8eaec}
.placa-preco-longo{font-size:42px}
.placa-info{grid-area:info;font-size:14px;color:#a9afb5;margin-top:4px}
.var{white-space:nowrap}
.placa-info .var-sobe{color:#ff8a80}.placa-info .var-desce{color:#8fd6a6}
.var-sobe{color:var(--subiu)}.var-desce{color:var(--caiu)}
.painel-unico{display:block}
.painel-compacto{max-width:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));column-gap:28px}
.painel-compacto .placa-linha:last-child{border-bottom:1px solid #3c4248}
.painel-compacto .placa-preco{font-size:40px}
.mini-fatos{display:flex;flex-wrap:wrap;gap:8px 32px;margin:14px 0 0;max-width:620px}
.mini-fatos div{display:flex;flex-direction:column}
.mini-fatos span{font-size:14px;color:var(--cinza)}
.mini-fatos strong{font-family:var(--numero);font-size:28px;font-weight:600}
.painel-unico+.mini-fatos,.painel .mini-fatos{color:inherit}
.painel .mini-fatos{border-top:1px solid #3c4248;padding:12px 0 8px;margin:0}
.painel .mini-fatos span{color:#a9afb5}.painel .mini-fatos strong{color:#fff}
@media (max-width:560px){.painel{padding:4px 16px}.placa-preco{font-size:44px}.placa-nome{font-size:18px}}

/* Álcool ou gasolina */
.veredito{border-left:6px solid var(--sinal);padding:4px 0 4px 18px;max-width:760px}
.veredito-resp{font-size:22px;margin:0 0 8px}
.veredito p{margin:0 0 8px}

/* Tabelas */
.tabela-rolagem{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabela{width:100%;border-collapse:collapse;font-size:16px;font-variant-numeric:tabular-nums}
.tabela caption{text-align:left;font-weight:700;font-size:18px;padding:0 0 8px}
.tabela th,.tabela td{padding:9px 12px 9px 0;border-bottom:1px solid var(--linha);text-align:left;white-space:nowrap}
.tabela th{font-size:15px;font-weight:600;color:var(--cinza);border-bottom:2px solid var(--tinta)}
.tabela td:not(:first-child),.tabela th:not(:first-child){text-align:right;padding-left:16px}
.tabela tbody tr:hover{background:var(--leve)}
.ordenavel th{cursor:pointer;user-select:none}
.ordenavel th[aria-sort="ascending"]::after{content:" ↑"}
.ordenavel th[aria-sort="descending"]::after{content:" ↓"}
.mais-barato{color:var(--caiu);font-weight:600}.mais-caro{color:var(--subiu)}
.nd{color:var(--cinza-claro)}
.selo{font-size:14px;color:var(--cinza);margin-left:4px}

/* Listas com pontilhado, como cardápio de preço */
.ranking{list-style:none;padding:0;margin:0;counter-reset:r}
.ranking li{counter-increment:r}
.ranking a,.lista-cidades a,.lista-estados a{display:flex;align-items:baseline;gap:8px;padding:7px 0;color:var(--tinta);text-decoration:none}
.ranking a::before{content:counter(r) ".";font-family:var(--numero);color:var(--cinza);min-width:26px}
.ranking span,.lista-cidades span,.lista-estados span{flex:1;display:flex;align-items:baseline;gap:8px}
.ranking span::after,.lista-cidades span::after,.lista-estados span::after{content:"";flex:1;border-bottom:2px dotted var(--pontilhado);transform:translateY(-4px)}
.ranking small{color:var(--cinza)}
.ranking strong,.lista-cidades strong,.lista-estados strong{font-family:var(--numero);font-size:21px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.ranking a:hover span,.lista-cidades a:hover span,.lista-estados a:hover span{color:var(--link)}
.lista-cidades,.lista-estados{list-style:none;padding:0;margin:0;columns:3 250px;column-gap:40px}
.lista-cidades li,.lista-estados li{break-inside:avoid}
.lista-guias{list-style:none;padding:0;margin:0;max-width:760px}
.lista-guias li{border-bottom:1px solid var(--linha)}
.lista-guias a{display:block;padding:12px 0;text-decoration:none;color:var(--tinta)}
.lista-guias strong{display:block;font-size:19px;color:var(--link)}
.lista-guias span{color:var(--cinza)}
.lista-guias a:hover strong{text-decoration:underline}
.atalhos-grade{display:flex;flex-direction:column;max-width:760px}
.atalhos-grade a{display:block;padding:12px 0;border-bottom:1px solid var(--linha);text-decoration:none;color:var(--tinta)}
.atalhos-grade strong{display:block;font-size:19px;color:var(--link)}
.atalhos-grade span{color:var(--cinza)}
.atalhos-grade a:hover strong{text-decoration:underline}

/* Gráfico */
.grafico{margin:0;max-width:760px}
.grafico figcaption{font-weight:700;font-size:18px;margin-bottom:8px}
.grafico svg{width:100%;height:auto;display:block}
.grade{stroke:var(--grade);stroke-width:1}
.eixo{font:13px var(--texto);fill:var(--cinza)}
.serie{stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.serie-0{stroke:#c98a00;fill:#c98a00;background:#c98a00}
.serie-1{stroke:var(--caiu);fill:var(--caiu);background:var(--caiu)}
.serie-2{stroke:var(--serie-2);fill:var(--serie-2);background:var(--serie-2)}
polyline.serie{fill:none}
.legenda{display:flex;gap:18px;flex-wrap:wrap;font-size:15px;color:var(--cinza);margin-top:6px}
.legenda i{display:inline-block;width:16px;height:3px;margin-right:6px;vertical-align:middle}
.grafico-vazio{padding:16px 0;color:var(--cinza)}

/* Calculadoras */
.calc{max-width:760px}
.calc label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:16px}
.calc small{font-weight:400;color:var(--cinza)}
.calc select,.calc input[type=number]{font:inherit;padding:10px 12px;border:2px solid var(--campo-borda);border-radius:4px;background:var(--campo);color:var(--tinta)}
.calc select:focus,.calc input:focus{outline:none;border-color:var(--asfalto)}
.campos{align-items:end;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin:16px 0}
.calc .check{flex-direction:row;align-items:center;gap:8px;align-self:end;font-weight:500}
.resultado{display:block;background:var(--asfalto);color:#fff;border-radius:6px;padding:18px 20px;font-size:18px}
.resultado strong{color:var(--sinal);font-family:var(--numero);font-size:28px;font-weight:600}
.resultado p{margin:0 0 6px}

/* Perguntas */
.faq{max-width:760px}
.faq details{border-bottom:1px solid var(--linha);padding:12px 0}
.faq summary{cursor:pointer;font-weight:600;font-size:18px}
.faq details div{margin-top:8px;color:var(--texto-2)}

/* Artigo */
.artigo{max-width:760px}
.artigo .bloco{margin-top:0}
.artigo li{margin-bottom:8px}

/* Anúncios */
.ad{margin:32px 0;text-align:center;min-height:100px}
.ad-rotulo{display:block;font-size:12px;color:var(--cinza-claro);margin-bottom:4px}

/* Avisos */
.aviso-exemplo{background:var(--realce);color:var(--aviso-texto);text-align:center;font-size:15px;padding:8px 20px}
.aviso-dado{background:var(--realce);border-left:4px solid var(--sinal);padding:10px 14px;font-size:16px;max-width:720px}

/* Rodapé */
.rodape{background:var(--asfalto);color:#c7cbcf;margin-top:24px}
.rodape-in{max-width:1080px;margin:0 auto;padding:34px 20px 12px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:24px}
.rodape strong{color:#fff;display:block;margin-bottom:8px}
.rodape a{display:block;color:#c7cbcf;text-decoration:none;font-size:16px;padding:2px 0}
.rodape a:hover{color:var(--sinal)}
.rodape p{margin:0;font-size:15px}
.rodape-nota{max-width:1080px;margin:0 auto;padding:12px 20px 30px;font-size:14px;color:#959ba1}
@media (max-width:760px){.rodape-in{grid-template-columns:1fr 1fr}}
.cookies{position:fixed;left:0;right:0;bottom:0;background:var(--campo);color:var(--tinta);border-top:3px solid var(--contorno);padding:12px 20px;display:flex;gap:16px;align-items:center;justify-content:center;z-index:9;font-size:15px}
.cookies[hidden]{display:none}
.cookies p{margin:0;max-width:620px}
.cookies div{display:flex;gap:8px}
.cookies button{font:inherit;font-weight:600;border:2px solid var(--contorno);background:var(--campo);color:var(--tinta);border-radius:4px;padding:6px 14px;cursor:pointer}
.cookies .primario{background:var(--asfalto);color:#fff}
@media (max-width:560px){.cookies{flex-direction:column;align-items:stretch}.cookies button{flex:1}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Filtro das tabelas grandes */
.tabela-filtro{display:flex;align-items:center;gap:14px;margin:0 0 10px;flex-wrap:wrap}
.tabela-filtro label{display:flex;align-items:center;gap:8px;font-weight:600;font-size:16px}
.tabela-filtro input{font:inherit;font-weight:400;padding:8px 12px;border:2px solid var(--campo-borda);background:var(--campo);color:var(--tinta);border-radius:4px;width:240px}
.tabela-filtro input:focus{outline:none;border-color:var(--asfalto)}
.tabela-filtro span{color:var(--cinza);font-size:15px}
.tabela-mais{margin-top:12px;font:inherit;font-weight:600;background:var(--campo);color:var(--tinta);border:2px solid var(--contorno);border-radius:4px;padding:8px 16px;cursor:pointer}
.tabela-mais:hover{background:var(--leve)}
.tabela tr[hidden]{display:none}

/* Gráfico interativo */
.grafico-periodos{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px}
.grafico-periodos button{font:inherit;font-size:15px;background:var(--campo);border:1px solid var(--campo-borda);border-radius:4px;padding:4px 12px;cursor:pointer;color:var(--tinta)}
.grafico-periodos button[aria-pressed="true"]{background:var(--asfalto);border-color:var(--asfalto);color:#fff}
.grafico svg{touch-action:pan-y;cursor:crosshair}
.grafico-guia{stroke:#9aa0a6;stroke-width:1;stroke-dasharray:3 3}
.ponto{stroke:var(--ponto-borda);stroke-width:2}
.grafico-dica{position:absolute;pointer-events:none;background:var(--asfalto);color:#fff;border-radius:4px;padding:8px 10px;font-size:14px;line-height:1.4;white-space:nowrap;z-index:3}
.grafico-dica strong{display:block;font-weight:600;margin-bottom:2px}
.grafico-dica span{display:block}
.grafico-dica i{display:inline-block;width:10px;height:3px;margin-right:6px;vertical-align:middle}
.grafico-dica b{color:var(--sinal);font-weight:600}

.lista-cidades .sug-nome{flex-direction:column;align-items:flex-start;gap:0}
.lista-cidades .sug-nome::after{display:none}
.perto{margin:12px 0 0;font-size:17px}

.tema{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:1px solid #4a5056;border-radius:4px;background:transparent;color:#e6e8ea;cursor:pointer;flex:none}
.tema:hover{border-color:var(--sinal);color:var(--sinal)}
.tema svg{width:18px;height:18px}
.tema .ic-sol{display:none}
:root[data-tema="escuro"] .tema .ic-lua{display:none}
:root[data-tema="escuro"] .tema .ic-sol{display:block}
.navegacao-boletim{display:flex;flex-wrap:wrap;gap:12px 24px;border-top:1px solid var(--linha);padding-top:16px}
.fontes ul{padding-left:20px;font-size:15px}
.analise{border-left:4px solid var(--sinal);padding-left:18px}
.nota+.bloco{margin-top:28px}
.capa{margin:0 0 28px;max-width:760px}
.capa img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:6px;background:var(--leve)}
.capa figcaption{font-size:13px;color:var(--cinza);margin-top:6px}
.capa figcaption a{color:var(--cinza)}