/* Prisma Brasil Data - identidade visual v1 (tema claro e escuro, Inter, paleta da marca). */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;

  /* Marca */
  --marca-azul: #3c8fb4;
  --marca-ciano: #00abc0;
  --marca-turquesa: #00c5ba;
  --marca-agua: #5cdca3;
  --marca-verde: #a9ee86;
  --marca-amarelo: #f9f871;

  /* Interface (tema claro) */
  --bg: #f4f8fa;
  --cab: #ffffff;
  --card: #ffffff;
  --texto: #102d3a;
  --suave: #47616e;
  --borda: #d3e1e8;
  --grade: #d3e1e8;
  --tab-cab: #eaf2f6;
  --link: #1b6e92;
  --destaque: #008fa1;
  --botao: #102d3a;
  --botao-texto: #ffffff;
  --foco: #008fa1;
  --tip-bg: #102d3a;
  --tip-texto: #f2f7f8;
  --aviso-bg: #fff6d1;
  --aviso-texto: #5a4300;
  --aviso-borda: #e8d48a;
  --mes-off: #9db0ba;
  --mes-faixa: #e3eef4;

  /* Gráficos (linhas sobre fundo claro) */
  --serie1: #2a7fa5;
  --serie2: #00a89e;
  --serie3: #102d3a;
  --serie4: #5e9e3a;
  --serie5: #1b6e92;
  --serie6: #008fa1;
  --serie7: #6b8594;
  --serie8: #3c8fb4;
  --serie9: #9a7b2f;
  --mini: #008fa1;

  /* Logo */
  --logo-esq: #102d3a;
  --logo-dir: #3c8fb4;
  --logo-base: #00abc0;
  --logo-nome: #102d3a;
  --logo-sub: #1b6e92;
  --logo-borda: #ffffff;

  --fonte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --largura: 1160px;
}

:root[data-tema="light"] { color-scheme: light; }
:root[data-tema="dark"] {
  color-scheme: dark;
  --bg: #0b222c;
  --cab: #0e2833;
  --card: #102d3a;
  --texto: #f2f7f8;
  --suave: #a6bdc7;
  --borda: #25495a;
  --grade: #1f4050;
  --tab-cab: #163846;
  --link: #5cd6e0;
  --destaque: #00c5ba;
  --botao: #00c5ba;
  --botao-texto: #06222b;
  --foco: #5cd6e0;
  --tip-bg: #163846;
  --tip-texto: #f2f7f8;
  --aviso-bg: #3a2f0b;
  --aviso-texto: #f6e3a1;
  --aviso-borda: #5c4b14;
  --mes-off: #587482;
  --mes-faixa: #163846;

  --serie1: #5cd6e0;
  --serie2: #00c5ba;
  --serie3: #f2f7f8;
  --serie4: #a9ee86;
  --serie5: #3c8fb4;
  --serie6: #00abc0;
  --serie7: #a6bdc7;
  --serie8: #7fb8d4;
  --serie9: #d9b95b;
  --mini: #00c5ba;

  --logo-esq: #3c8fb4;
  --logo-dir: #00c5ba;
  --logo-base: #f2f7f8;
  --logo-nome: #f2f7f8;
  --logo-sub: #00c5ba;
  --logo-borda: #0e2833;
}
/* Sem JavaScript: segue o tema do sistema */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema]) {
    --bg: #0b222c;
    --cab: #0e2833;
    --card: #102d3a;
    --texto: #f2f7f8;
    --suave: #a6bdc7;
    --borda: #25495a;
    --grade: #1f4050;
    --tab-cab: #163846;
    --link: #5cd6e0;
    --destaque: #00c5ba;
    --botao: #00c5ba;
    --botao-texto: #06222b;
    --foco: #5cd6e0;
    --tip-bg: #163846;
    --tip-texto: #f2f7f8;
    --aviso-bg: #3a2f0b;
    --aviso-texto: #f6e3a1;
    --aviso-borda: #5c4b14;
  --mes-off: #587482;
  --mes-faixa: #163846;

    --serie1: #5cd6e0;
    --serie2: #00c5ba;
    --serie3: #f2f7f8;
    --serie4: #a9ee86;
    --serie5: #3c8fb4;
    --serie6: #00abc0;
    --serie7: #a6bdc7;
    --serie8: #7fb8d4;
    --serie9: #d9b95b;
    --mini: #00c5ba;

    --logo-esq: #3c8fb4;
    --logo-dir: #00c5ba;
    --logo-base: #f2f7f8;
    --logo-nome: #f2f7f8;
    --logo-sub: #00c5ba;
    --logo-borda: #0e2833;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: 15px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; }

:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 4px; }

.pagina {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------- Cabeçalho ---------- */
.cabecalho {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--cab);
  border-bottom: 1px solid var(--borda);
}
.cabecalho-interno {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 32px;
  min-height: 76px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.marca { display: flex; align-items: center; flex: none; color: inherit; border-radius: 6px; }
.marca:hover { text-decoration: none; }
.logo { display: block; width: 172px; height: 40px; }
.logo .f-esq { fill: var(--logo-esq); }
.logo .f-dir { fill: var(--logo-dir); }
.logo .f-base { fill: var(--logo-base); }
.logo .f-esq, .logo .f-dir, .logo .f-base { stroke: var(--logo-borda); stroke-width: 1.2; stroke-linejoin: round; }
.logo .l-nome { fill: var(--logo-nome); font: 700 23px/1 var(--fonte); }
.logo .l-sub { fill: var(--logo-sub); font: 500 10.5px/1 var(--fonte); }

.menu { align-self: stretch; display: flex; gap: 22px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.menu::-webkit-scrollbar { display: none; }
.menu-direita { align-self: stretch; display: flex; gap: 20px; flex: none; }
.aba, .aba-link {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
}
.aba { color: var(--suave); }
.aba:hover { color: var(--texto); text-decoration: none; }
.aba.ativa { color: var(--texto); }
.aba-link { color: var(--link); }
.aba-link:hover { text-decoration: none; }
.aba.ativa::after, .aba-link.ativa::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--destaque);
}

/* ---------- Aviso de dados desatualizados ---------- */
.aviso-dados {
  margin: 0;
  padding: 10px 32px;
  font-size: 13.5px;
  text-align: center;
  background: var(--aviso-bg);
  color: var(--aviso-texto);
  border-bottom: 1px solid var(--aviso-borda);
}
.aviso-dados[hidden] { display: none; }

/* ---------- Estrutura das páginas ---------- */
main { padding-bottom: 56px; }
.secao[hidden] {
  /* Fica fora da tela, mas com tamanho: os gráficos já nascem do tamanho certo. */
  display: block;
  visibility: hidden;
  position: absolute;
  left: -99999px;
  top: 0;
  width: 1200px;
  height: 0;
  overflow: hidden;
}

.caminho { padding-top: 28px; font-size: 12.5px; color: var(--suave); }
.caminho a { color: var(--suave); }
.caminho span { margin: 0 4px; }
.titulo-pagina {
  margin-top: 8px;
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.intro { margin-top: 12px; max-width: 58ch; color: var(--suave); font-size: 17px; line-height: 1.55; }
.titulo-bloco { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.subtitulo-secao { margin: 40px 0 16px; font-size: 26px; font-weight: 700; letter-spacing: -0.01em; }
.rotulo-sup { font-size: 12.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--link); }

/* ---------- Barra de período (um filtro por página) ---------- */
.barra-periodo {
  position: sticky;
  top: var(--h-cab, 77px);
  z-index: 5;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 16px 32px 0;
}
.barra-periodo[hidden] { display: none; }
.periodo[hidden] { display: none; }
.periodo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 12px 20px;
  box-shadow: 0 6px 14px -10px rgba(16, 45, 58, 0.25);
}
.periodo-titulo { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--suave); margin-right: 4px; }
.periodo-limite { min-width: 62px; font-size: 13.5px; font-weight: 600; color: var(--texto); font-variant-numeric: tabular-nums; }
.periodo-limite.fim { text-align: right; }
.slider { position: relative; flex: 1 1 240px; min-width: 180px; height: 28px; }
.slider-trilho { position: absolute; left: 0; right: 0; top: 12px; height: 4px; border-radius: 2px; background: var(--borda); }
.slider-faixa { position: absolute; top: 0; bottom: 0; border-radius: 2px; background: var(--destaque); }
.slider input[type="range"] {
  position: absolute; left: 0; top: 0; width: 100%; height: 28px; margin: 0;
  background: none; pointer-events: none; -webkit-appearance: none; appearance: none;
}
.slider input[type="range"]::-webkit-slider-runnable-track { background: none; height: 28px; }
.slider input[type="range"]::-moz-range-track { background: none; height: 28px; }
.slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto; cursor: grab;
  width: 20px; height: 20px; margin-top: 4px; border-radius: 50%;
  background: var(--card); border: 2px solid var(--destaque);
}
.slider input[type="range"]::-moz-range-thumb {
  pointer-events: auto; cursor: grab; box-sizing: border-box;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--card); border: 2px solid var(--destaque);
}
.slider input[type="range"]:focus-visible { outline: none; }
.slider input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--foco); outline-offset: 2px; }
.slider input[type="range"]:focus-visible::-moz-range-thumb { outline: 3px solid var(--foco); outline-offset: 2px; }

/* Atalhos em pílula (período, formas de exibição) */
.atalhos { display: flex; flex-wrap: wrap; gap: 8px; }
.atalhos button, .botao-pilula {
  height: 36px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--borda);
  background: var(--card);
  color: var(--texto);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
}
.atalhos button:hover { border-color: var(--destaque); }
.atalhos button.ativo {
  background: var(--botao);
  border-color: var(--botao);
  color: var(--botao-texto);
  font-weight: 600;
}
.atalhos.modos { margin: 14px 0 0; }
.atalhos.modos button { height: 32px; padding: 0 14px; font-size: 13px; }

/* ---------- Cartões e grades ---------- */
.cartao {
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 22px;
  min-width: 0;
  scroll-margin-top: calc(var(--h-cab, 76px) + 96px);
}
.grade-graficos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.grade-graficos .largo { grid-column: 1 / -1; }
.grade-pequenos { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 20px; }
.pagina > .cartao { margin-top: 20px; }

.cartao-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.cartao-titulo { min-width: 0; }
.cartao h3 { font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; }
.fonte { margin-top: 2px; font-size: 13px; color: var(--suave); line-height: 1.45; }
.cartao-valor { flex: none; text-align: right; max-width: 52%; }
.valor { font-size: 32px; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.valor .un { margin-left: 5px; font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--suave); }
.detalhe { margin-top: 4px; font-size: 12.5px; color: var(--suave); line-height: 1.4; }
.detalhe .ref, .detalhe .var { display: block; }
.ver-ficha { display: inline-block; margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--link); }

.pequeno { padding: 18px; }
.pequeno h3 { font-size: 16px; }
.pequeno .valor { font-size: 26px; }
.pequeno .grafico { height: 190px; }

.grafico { position: relative; height: 320px; margin-top: 16px; }
.grafico.alto { height: 400px; }
.grafico.grupos-barras { height: 380px; }
.largo .grafico { height: 340px; }

.nota { margin-top: 10px; font-size: 12.5px; color: var(--suave); }
.erro { margin-top: 10px; color: var(--suave); font-size: 13.5px; border-left: 3px solid var(--marca-ciano); padding-left: 10px; }
.erro[hidden] { display: none; }
.explica { margin-top: 10px; font-size: 13.5px; color: var(--suave); }
.vazio { color: var(--suave); }

/* Ações do gráfico */
.acoes-grafico {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--borda);
}
.acoes-grafico button, .ver-fonte summary {
  height: 38px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 8px;
  border: 1px solid var(--borda);
  background: var(--card);
  color: var(--texto);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.pequeno .acoes-grafico button, .pequeno .ver-fonte summary { height: 34px; padding: 0 10px; font-size: 12.5px; }
.ver-fonte summary::-webkit-details-marker { display: none; }
.acoes-grafico button:hover, .ver-fonte summary:hover { border-color: var(--destaque); }
.ver-fonte[open] { flex-basis: 100%; order: 9; }
.ver-fonte[open] summary { border-color: var(--destaque); }
.ver-fonte ul { margin: 10px 0 0; padding-left: 18px; font-size: 13px; }
.ver-fonte li { margin: 4px 0; overflow-wrap: anywhere; }
.ver-fonte .nota { margin-top: 6px; }

/* ---------- Tabelas ---------- */
.tabela-rolavel { overflow-x: auto; margin-top: 12px; }
.tabela { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tabela th, .tabela td { padding: 11px 12px; text-align: right; border-bottom: 1px solid var(--borda); }
.tabela th:first-child, .tabela td:first-child { text-align: left; }
.tabela thead th {
  background: var(--tab-cab);
  color: var(--suave);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tabela td { font-size: 14px; }
.tabela .tend { margin-left: 8px; font-size: 12px; color: var(--suave); }
.tabela.texto th, .tabela.texto td { text-align: left; vertical-align: top; font-size: 13.5px; }
.tabela.texto td:first-child { font-weight: 600; }
.tabela.texto { min-width: 860px; }

/* ---------- Filtros, chips e seleção ---------- */
.filtros { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; margin-top: 16px; }
.campo { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--suave); }
.campo select, .campo input[type="month"] {
  height: 38px;
  background: var(--card);
  color: var(--texto);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 0 10px;
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  min-width: 170px;
}
.subtitulo { margin: 22px 0 4px; font-size: 15px; font-weight: 600; }
.subtitulo::first-letter { text-transform: uppercase; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 14px;
  background: var(--card);
  color: var(--suave);
  border: 1px solid var(--borda);
  border-radius: 999px;
  font-size: 13.5px;
  cursor: pointer;
}
.chip .bolinha { width: 10px; height: 10px; border-radius: 50%; }
.chip[aria-pressed="true"] { color: var(--texto); border-color: var(--texto); font-weight: 600; }

/* Cartões de seleção dos combustíveis */
.comb-selecao { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin-top: 18px; }
.comb-card {
  position: relative;
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: var(--card);
}
.comb-card.marcado { border-color: var(--texto); }
.comb-card .topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.comb-card label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.comb-card input { width: 16px; height: 16px; accent-color: var(--destaque); margin: 0; cursor: pointer; }
.comb-card .linha { display: flex; align-items: center; gap: 8px; }
.comb-card svg { width: 34px; height: 6px; flex: none; overflow: visible; }
.comb-card .preco { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.comb-card .preco .un { margin-left: 4px; font-size: 12px; font-weight: 500; color: var(--suave); }
.comb-card .ver-ficha { margin: 0; }

.preco-atual { display: grid; margin-top: 10px; }
.preco-atual div { display: flex; justify-content: space-between; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--borda); }
.preco-atual div span:first-child { font-size: 14px; }
.preco-atual div span:last-child { font-size: 16px; font-weight: 700; }
.preco-atual .un { margin-left: 4px; font-size: 12px; font-weight: 500; color: var(--suave); }

/* ---------- Início ---------- */
.heroi { padding: 72px 0 8px; }
.heroi-titulo { margin-top: 14px; font-size: 64px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.04; }
.heroi-texto { margin-top: 16px; font-size: 18px; color: var(--suave); }
.busca {
  display: flex;
  gap: 12px;
  align-items: stretch;
  margin-top: 36px;
  max-width: 680px;
}
.busca-campo {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}
.busca-campo svg { position: absolute; left: 16px; width: 18px; height: 18px; color: var(--suave); pointer-events: none; }
.busca input {
  width: 100%;
  height: 52px;
  padding: 0 16px 0 44px;
  font: inherit;
  font-size: 15px;
  color: var(--texto);
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: 10px;
}
.busca input::placeholder { color: var(--suave); opacity: 0.85; }
.botao-principal {
  height: 52px;
  padding: 0 26px;
  border: 0;
  border-radius: 10px;
  background: var(--botao);
  color: var(--botao-texto);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.botao-principal:hover { filter: brightness(1.12); }
.busca-resultados { list-style: none; margin-top: 12px; max-width: 680px; display: grid; gap: 8px; }
.busca-resultados li {
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 12px 16px;
  display: grid;
  gap: 4px;
}
.busca-resultados .res-titulo { font-weight: 600; color: var(--texto); }
.busca-resultados .res-curta { font-size: 13.5px; color: var(--suave); }
.busca-resultados .res-ficha { font-size: 13px; font-weight: 600; }

.confianca { display: flex; flex-wrap: wrap; gap: 14px 44px; margin-top: 40px; }
.confianca dt { order: 2; font-size: 12.5px; color: var(--suave); }
.confianca dd { order: 1; font-size: 30px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; }
.confianca div { display: flex; flex-direction: column; }

.bloco { margin-top: 64px; }
.bloco-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 18px; }
.bloco-topo h2 { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; }

.grade-principais { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cartao-ind {
  display: flex;
  flex-direction: column;
  padding: 22px;
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: 12px;
  min-width: 0;
}
.cartao-ind .topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cartao-ind .nome { font-size: 14px; font-weight: 500; color: var(--suave); }
.cartao-ind .nome:hover { color: var(--texto); text-decoration: none; }
.cartao-ind .valor { margin-top: 12px; font-size: 36px; }
.cartao-ind .valor .un { font-size: 15px; }
.cartao-ind .variacao { margin-top: 6px; font-size: 12.5px; color: var(--suave); min-height: 19px; }
.cartao-ind .mini { position: relative; height: 62px; margin-top: auto; padding-top: 14px; box-sizing: content-box; }
.cartao-ind .rodape-ind { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--borda); font-size: 11.5px; color: var(--suave); }
.cartao-ind .ver-ficha { align-self: flex-start; margin-top: 10px; }

.temas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tema {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px;
  background: var(--card);
  border: 1px solid var(--borda);
  border-radius: 12px;
  color: var(--texto);
  text-decoration: none;
}
.tema:hover { border-color: var(--destaque); text-decoration: none; }
.tema::before { content: ""; width: 28px; height: 3px; border-radius: 2px; margin-bottom: 10px; background: var(--faixa, var(--marca-azul)); }
.tema strong { font-size: 17px; font-weight: 600; }
.tema span { font-size: 13.5px; color: var(--suave); }
.tema em { margin-top: auto; padding-top: 10px; font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--link); }

.faixa-regras { margin-top: 72px; background: var(--card); border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); padding: 56px 0 60px; }
.faixa-regras h2 { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; }
.regras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 28px; }
.regras .num { font-size: 13px; font-weight: 700; color: var(--link); letter-spacing: 0.06em; }
.regras h3 { margin-top: 6px; font-size: 17px; font-weight: 600; }
.regras p { margin-top: 6px; font-size: 14px; color: var(--suave); }

/* ---------- Botão "?" e balão ---------- */
.ajuda {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 22px;
  height: 22px;
  margin-left: 6px;
  padding: 0;
  border-radius: 50%;
  font: 600 12px/1 var(--fonte);
  cursor: pointer;
  border: 1px solid var(--borda);
  background: var(--card);
  color: var(--suave);
}
.ajuda:hover, .ajuda:focus-visible, .ajuda[aria-describedby] { border-color: var(--destaque); color: var(--texto); }
.ajuda-exemplo { cursor: default; margin: 0 2px; }
#balao-ajuda {
  position: absolute;
  z-index: 50;
  padding: 14px 16px;
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  background: var(--card);
  color: var(--texto);
  border: 1px solid var(--borda);
  box-shadow: 0 12px 30px -8px rgba(16, 45, 58, 0.35);
}
#balao-ajuda[hidden] { display: none; }
#balao-ajuda p { margin: 4px 0 8px; color: var(--suave); }
#balao-ajuda a { font-weight: 600; }
:root { --balao-fundo: var(--card); }
:root[data-tema="dark"] #balao-ajuda { background: var(--tab-cab); }

#aviso-rapido {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 20px);
  opacity: 0;
  pointer-events: none;
  background: var(--tip-bg);
  color: var(--tip-texto);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13.5px;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 60;
}
#aviso-rapido.visivel { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Ficha do indicador ---------- */
.ficha-topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-top: 4px; }
.ficha-topo .titulo-pagina { display: flex; align-items: center; gap: 4px; }
.ficha-topo .ajuda { width: 28px; height: 28px; font-size: 14px; margin-left: 10px; }
.ficha-valor .valor { font-size: 52px; letter-spacing: -0.02em; }
.ficha-valor .valor .un { font-size: 22px; }
.ficha-grade { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; margin-top: 28px; align-items: start; }
.ficha-blocos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.ficha-blocos .cartao { padding: 18px; }
.ficha-blocos h3, .ficha-lateral h3 { font-size: 15px; font-weight: 600; }
.ficha-blocos p, .ficha-blocos li { margin-top: 8px; font-size: 13.5px; color: var(--suave); }
.ficha-blocos ul { padding-left: 18px; }
.ficha-lateral { display: grid; gap: 16px; }
.ficha-lateral .cartao { padding: 18px; }
.ficha-fonte { border-top: 3px solid var(--destaque); }
.rotulo-mini { font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--suave); }
.ficha-fonte .orgao { margin-top: 6px; font-size: 15px; font-weight: 600; line-height: 1.35; }
.ficha-fonte dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--borda); }
.ficha-fonte dt { font-size: 11.5px; color: var(--suave); }
.ficha-fonte dd { font-size: 13px; font-weight: 600; }
.ficha-fonte .botao-principal { display: block; width: 100%; height: 40px; margin-top: 16px; padding: 0; line-height: 40px; text-align: center; font-size: 13.5px; }
.ficha-fonte .botao-principal:hover { text-decoration: none; }
.ficha-fonte ul { margin-top: 12px; padding-left: 18px; font-size: 12.5px; }
.ficha-fonte li { margin: 3px 0; overflow-wrap: anywhere; }
.ultimos { margin-top: 8px; }
.ultimos div { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--borda); font-size: 13.5px; }
.ultimos div:last-child { border-bottom: 0; }
.ultimos div span:last-child { font-weight: 600; }
.relacionados { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.relacionados a { padding: 5px 12px; border: 1px solid var(--borda); border-radius: 999px; font-size: 13px; color: var(--texto); }
.relacionados a:hover { border-color: var(--destaque); text-decoration: none; }
.nota-ficha { margin-top: 20px; max-width: 70ch; }

/* ---------- Texto corrido: Fontes, Transparência, Privacidade ---------- */
.prosa p, .prosa li { max-width: 78ch; margin-top: 8px; color: var(--suave); }
.prosa h3 + p, .prosa h3 + ul { margin-top: 10px; }
.prosa ul { padding-left: 20px; }
.prosa strong { color: var(--texto); }
.prosa a { text-decoration: underline; text-underline-offset: 2px; }
#aviso-oficial, #aviso-investimento { border-left: 4px solid var(--destaque); }
#aviso-investimento { border-left-color: var(--marca-agua); }

/* Transparência */
.transp-grade { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; margin-top: 36px; align-items: start; }
.transp-menu { position: sticky; top: calc(var(--h-cab, 76px) + 20px); display: grid; padding: 8px; background: var(--card); border: 1px solid var(--borda); border-radius: 12px; }
.transp-menu a { padding: 8px 12px; border-radius: 8px; font-size: 13.5px; color: var(--suave); }
.transp-menu a:hover { background: var(--tab-cab); color: var(--texto); text-decoration: none; }
.transp-bloco { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 0; padding-bottom: 44px; scroll-margin-top: calc(var(--h-cab, 76px) + 20px); }
.transp-bloco > .n { padding-top: 6px; font-size: 12px; font-weight: 700; color: var(--link); letter-spacing: 0.04em; }
.transp-bloco h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.transp-bloco p, .transp-bloco li { margin-top: 8px; max-width: 70ch; color: var(--suave); }
.transp-bloco ul { padding-left: 20px; }
.transp-bloco strong { color: var(--texto); }
.transp-bloco a { text-decoration: underline; text-underline-offset: 2px; }
.cartoes-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-top: 14px; }
.cartoes-mini .cartao { padding: 14px 16px; }
.cartoes-mini strong { display: block; font-size: 14px; color: var(--texto); }
.cartoes-mini span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--suave); }
.passos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.passos .cartao { padding: 16px; }
.passos .n { font-size: 12px; font-weight: 700; color: var(--link); }
.passos strong { display: block; margin-top: 2px; font-size: 15px; color: var(--texto); }
.passos p { margin-top: 4px; font-size: 13px; }
.caixa-erro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  padding: 16px 20px;
  background: var(--card);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--destaque);
  border-radius: 10px;
}
.caixa-erro strong { display: block; font-size: 15px; }
.caixa-erro span { font-size: 13.5px; color: var(--suave); }
.caixa-erro .botao-principal { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; font-size: 13.5px; white-space: nowrap; }
.caixa-erro .botao-principal:hover { text-decoration: none; }
.status { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--tab-cab); font-size: 12px; font-weight: 600; }

/* ---------- Rodapé ---------- */
.rodape { max-width: var(--largura); margin: 0 auto; padding: 28px 32px 40px; color: var(--suave); font-size: 12.5px; }
.rodape p { margin: 4px 0; max-width: 90ch; }
.rodape-links { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 14px !important; }
.rodape-links a { color: var(--texto); font-size: 13px; }

.em-breve { border-left: 4px solid var(--marca-agua); }
.em-breve p { margin-top: 8px; color: var(--suave); }

/* ---------- Telas menores ---------- */
@media (max-width: 1100px) {
  .grade-principais, .temas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ficha-grade { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .cabecalho-interno { flex-wrap: wrap; gap: 0 16px; padding: 0 20px; min-height: 0; }
  .marca { height: 64px; }
  .menu-direita { margin-left: auto; align-self: center; gap: 16px; }
  .menu-direita .aba-link { height: 64px; font-size: 13.5px; }
  .menu { order: 3; flex: 1 0 100%; gap: 22px; height: 46px; }
  .pagina, .barra-periodo, .rodape { padding-left: 20px; padding-right: 20px; }
  .barra-periodo { position: static; }
  .titulo-pagina { font-size: 34px; }
  .heroi { padding-top: 40px; }
  .heroi-titulo { font-size: 42px; }
  .grade-graficos { grid-template-columns: minmax(0, 1fr); }
  .ficha-blocos, .passos, .regras { grid-template-columns: minmax(0, 1fr); }
  .transp-grade { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .transp-menu { position: static; display: flex; flex-wrap: wrap; }
  .cartao-topo { flex-wrap: wrap; }
  .cartao-valor { max-width: none; }
}
@media (max-width: 600px) {
  .grade-principais, .temas { grid-template-columns: minmax(0, 1fr); }
  .heroi-titulo { font-size: 36px; }
  .busca { flex-direction: column; }
  .botao-principal { width: 100%; }
  .cartao { padding: 18px; }
  .periodo { padding: 12px 14px; }
  .grafico, .largo .grafico { height: 280px; }
  .grafico.alto { height: 340px; }
  .ficha-valor .valor { font-size: 40px; }
  .ficha-topo { flex-direction: column; align-items: flex-start; }
  .ficha-topo .cartao-valor { text-align: left; }
  .caixa-erro { flex-direction: column; align-items: flex-start; }
  .menu-direita .aba-link:first-child { display: none; }
}

.cartao > .atalhos.modos:first-child { margin-top: 0; }
.transp-bloco a.botao-principal, .caixa-erro a.botao-principal { color: var(--botao-texto); text-decoration: none; }

/* ---------- Botão de tema (sol e lua) ---------- */
.tema-botao { flex: none; display: inline-flex; align-items: center; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 999px; color: var(--suave); }
.tema-trilho { position: relative; display: block; width: 58px; height: 30px; border-radius: 15px; background: var(--tab-cab); border: 1px solid var(--borda); }
.tema-trilho > svg { position: absolute; top: 50%; width: 14px; height: 14px; margin-top: -7px; }
.tema-trilho > .t-sol { left: 8px; }
.tema-trilho > .t-lua { right: 8px; }
.tema-bola { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--botao); color: var(--botao-texto); display: grid; place-items: center; transition: transform 200ms ease; }
.tema-bola svg { width: 13px; height: 13px; grid-area: 1 / 1; }
:root[data-tema="dark"] .tema-bola { transform: translateX(28px); }
.tema-bola .b-lua, :root[data-tema="dark"] .tema-bola .b-sol { display: none; }
:root[data-tema="dark"] .tema-bola .b-lua { display: block; }
.tema-redondo { display: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--borda); background: var(--card); color: var(--texto); place-items: center; }
.tema-redondo svg { width: 19px; height: 19px; grid-area: 1 / 1; }
.tema-redondo .r-sol, :root[data-tema="dark"] .tema-redondo .r-lua { display: none; }
:root[data-tema="dark"] .tema-redondo .r-sol { display: block; }
.tema-botao:hover .tema-trilho { border-color: var(--destaque); }
@media (prefers-reduced-motion: reduce) { .tema-bola { transition: none; } }
@media (max-width: 900px) { .tema-botao { align-self: center; } }
@media (max-width: 600px) {
  .tema-trilho { display: none; }
  .tema-redondo { display: grid; }
  .tema-botao:hover .tema-redondo { border-color: var(--destaque); }
  .cabecalho-interno { gap: 0 10px; }
  .menu-direita { gap: 10px; }
}

/* ---------- Seletor de mês ---------- */
.mes-seletor { position: relative; }
.mes-campo {
  display: inline-flex; align-items: center; gap: 10px; height: 38px; min-width: 170px; padding: 0 12px;
  background: var(--card); color: var(--texto); border: 1px solid var(--borda); border-radius: 8px;
  font: 500 14px var(--fonte); cursor: pointer; text-align: left;
}
.mes-campo:hover { border-color: var(--destaque); }
.mes-campo[aria-expanded="true"] { border-color: var(--link); }
.mes-campo svg { width: 16px; height: 16px; flex: none; color: var(--suave); }
.mes-campo .mes-valor { flex: 1; }
.mes-campo .mes-valor.vazio { color: var(--suave); }
.mes-campo .seta { width: 14px; height: 14px; transition: transform 150ms ease; }
.mes-campo[aria-expanded="true"] .seta { transform: rotate(180deg); }
.mes-popover {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; width: 276px; padding: 14px;
  background: var(--card); color: var(--texto); border: 1px solid var(--borda); border-radius: 14px;
  box-shadow: 0 18px 40px -12px rgba(16, 45, 58, 0.35);
}
.mes-popover[hidden] { display: none; }
.mes-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.mes-ano { font-size: 15px; font-weight: 800; letter-spacing: -0.005em; }
.mes-nav { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 1px solid var(--borda); border-radius: 8px; background: var(--card); color: var(--texto); cursor: pointer; }
.mes-nav svg { width: 14px; height: 14px; }
.mes-nav:hover:not(:disabled) { background: var(--tab-cab); }
.mes-nav:disabled { color: var(--mes-off); cursor: default; }
.mes-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mes-grade button {
  height: 38px; border-radius: 9px; border: 1px solid transparent; background: none; color: var(--texto);
  font: 600 13px var(--fonte); cursor: pointer; text-transform: lowercase;
}
.mes-grade button:hover:not(:disabled):not(.sel) { background: var(--tab-cab); }
.mes-grade button.hoje { border-color: var(--link); color: var(--link); }
.mes-grade button.sel { background: var(--botao); color: var(--botao-texto); border-color: var(--botao); }
.mes-grade button:disabled { color: var(--mes-off); cursor: default; }
.mes-grade button:focus-visible, .mes-nav:focus-visible, .mes-campo:focus-visible, .mes-rodape button:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.mes-rodape { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--borda); }
.mes-rodape button { height: 34px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--borda); background: var(--card); color: var(--texto); font: 600 13px var(--fonte); cursor: pointer; }
.mes-rodape button:hover { border-color: var(--destaque); }
.mes-rodape .aplicar { margin-left: auto; background: var(--botao); color: var(--botao-texto); border-color: var(--botao); }
.mes-fundo { display: none; }
@media (max-width: 600px) {
  .mes-popover { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; top: auto; width: auto; border-radius: 18px 18px 0 0; padding: 18px 18px 22px; box-shadow: 0 -18px 40px -12px rgba(16, 45, 58, 0.4); }
  .mes-popover:not([hidden]) + .mes-fundo { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(6, 34, 43, 0.5); }
  .mes-grade button { height: 44px; }
}

/* ---------- Cartões de seleção dos combustíveis (inteiros clicáveis) ---------- */
label.comb-card { cursor: pointer; align-content: center; min-height: 52px; }
label.comb-card:hover { border-color: var(--destaque); }
label.comb-card.marcado:hover { border-color: var(--texto); }
label.comb-card:has(input:focus-visible) { outline: 3px solid var(--foco); outline-offset: 2px; }
label.comb-card { display: flex; align-items: center; gap: 10px; }
label.comb-card .nome { font-size: 13.5px; font-weight: 600; flex: 1; }
.comb-vazio { margin-top: 14px; padding: 14px 16px; border: 1px dashed var(--borda); border-radius: 10px; color: var(--suave); font-size: 13.5px; }

/* A ficha já é a página de explicação: sem "Ver ficha" repetido dentro dela */
#sec-ficha .ver-ficha { display: none; }
#sec-ficha .cartao-topo .cartao-valor:empty { display: none; }
.ficha-cartao-real > .cartao { margin-top: 0 !important; }

.topo-acoes { display: flex; align-items: flex-end; gap: 16px; }
.topo-acoes .ver-ficha { margin: 0 0 9px; white-space: nowrap; }
@media (max-width: 600px) { .topo-acoes { flex-direction: column; align-items: flex-start; gap: 6px; } .topo-acoes .ver-ficha { margin: 0; } }
#sec-ficha .cartao-valor:has(> .ver-ficha:only-child) { display: none; }
#sec-ficha .ficha-cartao-real .cartao-valor { display: none; }
#sec-ficha .ficha-cartao-real > .cartao { margin-top: 0 !important; }

/* Cabeçalho: espaço para o botão de tema sem cortar o menu */
@media (min-width: 901px) {
  .cabecalho-interno { gap: 18px; }
  .menu { gap: 16px; }
  .menu-direita { gap: 14px; }
  .aba, .aba-link { font-size: 14.5px; }
}