/* Brasil em Gráfico — base, componentes e telas */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 6rem;
}

html[data-texto="maior"] {
  font-size: 118.75%;
}

body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-texto);
  font-size: var(--texto-md);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-style: normal;
  font-variant-numeric: lining-nums;
  line-height: 1.2;
  text-wrap: balance;
}

p {
  margin: 0;
  max-width: 68ch;
}

a {
  color: var(--cor-primaria);
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--cor-primaria-hover);
}

button,
input,
select {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--cor-primaria);
  outline-offset: 2px;
  border-radius: var(--raio-sm);
}

[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.pular {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  border-radius: var(--raio-md);
  background: var(--cor-primaria);
  color: var(--cor-sobre-primaria);
  font-weight: 600;
}

.pular:focus {
  top: 1rem;
  color: var(--cor-sobre-primaria);
}

.container {
  width: 100%;
  max-width: calc(var(--largura-max) + 2 * var(--margem));
  margin-inline: auto;
  padding-inline: var(--margem);
}

.icone {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icone--sm {
  width: 1.25rem;
  height: 1.25rem;
}

.texto-suave {
  color: var(--cor-texto-suave);
}

.destaque-texto {
  color: var(--cor-destaque-texto);
  font-weight: 600;
}

.nowrap {
  white-space: nowrap;
}

/* ---------- Cabeçalho e navegação ---------- */

.topo {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--cor-fundo);
  border-bottom: 1px solid var(--cor-borda);
}

.topo__linha {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.5rem;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin-right: auto;
  min-height: var(--alvo-toque);
  color: var(--cor-texto);
  font-family: var(--fonte-titulo);
  font-size: 1.375rem;
  font-weight: 600;
  text-decoration: none;
}

.marca:hover {
  color: var(--cor-texto);
}

.marca__logo {
  display: block;
  width: auto;
  height: 2.75rem;
}

:root[data-tema="escuro"] .marca__logo--claro,
:root:not([data-tema="escuro"]) .marca__logo--escuro {
  display: none;
}

.nav-principal ul {
  display: flex;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-principal a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--alvo-toque);
  padding: 0 1rem;
  border-radius: var(--raio-md);
  color: var(--cor-texto);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--duracao) var(--curva);
}

.nav-principal a:hover {
  background: var(--cor-superficie);
  color: var(--cor-texto);
}

.nav-principal a[aria-current="page"] {
  background: var(--cor-primaria);
  color: var(--cor-sobre-primaria);
}

.topo__acoes {
  display: flex;
  gap: 0.5rem;
}

.btn-ferramenta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-width: var(--alvo-toque);
  min-height: var(--alvo-toque);
  padding: 0 1rem;
  border: 1.5px solid var(--cor-borda-forte);
  border-radius: var(--raio-pilula);
  background: transparent;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--duracao) var(--curva), color var(--duracao) var(--curva);
}

.btn-ferramenta:hover {
  background: var(--cor-superficie);
}

.btn-ferramenta[aria-pressed="true"] {
  border-color: transparent;
  background: var(--cor-primaria);
  color: var(--cor-sobre-primaria);
}

.btn-ferramenta--icone {
  padding: 0;
}

.btn-ferramenta__aa {
  font-family: var(--fonte-titulo);
  font-size: 1.125rem;
}

@media (max-width: 767px) {
  body {
    padding-bottom: 5.5rem;
  }

  .nav-principal {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 30;
    padding: 0.25rem 0.5rem calc(0.25rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--cor-borda);
    background: var(--cor-fundo);
  }

  .nav-principal ul {
    justify-content: space-around;
  }

  .nav-principal li {
    flex: 1;
  }

  .nav-principal a {
    flex-direction: column;
    justify-content: center;
    gap: 0.125rem;
    min-height: 3.75rem;
    padding: 0.25rem;
    font-size: 1rem;
    line-height: 1.2;
    text-align: center;
  }

  .topo__linha {
    min-height: 4rem;
  }
}

@media (max-width: 479px) {
  .btn-ferramenta__rotulo {
    display: none;
  }

  .marca__logo {
    height: 2.125rem;
  }

  .btn-ferramenta {
    padding: 0 0.75rem;
  }

  .btn-ferramenta--icone {
    padding: 0;
  }
}

/* ---------- Botões ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--alvo-toque);
  padding: 0 1.5rem;
  border: 1.5px solid transparent;
  border-radius: var(--raio-md);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duracao) var(--curva), color var(--duracao) var(--curva),
    transform var(--duracao) var(--curva);
}

.btn--primario {
  background: var(--cor-primaria);
  color: var(--cor-sobre-primaria);
}

.btn--primario:hover {
  background: var(--cor-primaria-hover);
  color: var(--cor-sobre-primaria);
}

.btn--secundario {
  border-color: var(--cor-borda-forte);
  background: transparent;
  color: var(--cor-texto);
}

.btn--secundario:hover {
  background: var(--cor-fundo);
  color: var(--cor-texto);
}

.btn--compacto {
  padding: 0 1rem;
}

.btn[aria-pressed="true"],
.btn[aria-expanded="true"] {
  border-color: var(--cor-primaria);
  color: var(--cor-primaria);
}

.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: var(--alvo-toque);
  font-weight: 600;
}

/* ---------- Estrutura de seções ---------- */

.secao {
  padding-block: var(--espaco-secao);
}

.secao--superficie {
  background: var(--cor-superficie);
}

.secao__cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: var(--espaco-lg);
}

.secao__cabecalho p {
  max-width: 40ch;
}

.sobretitulo {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--cor-primaria);
  font-family: var(--fonte-texto);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.titulo-secao {
  font-size: var(--titulo-lg);
}

.onda {
  height: 16px;
  margin: 0;
  border: 0;
  background: var(--cor-ipe);
  opacity: 0.55;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 16'%3E%3Cpath d='M0 8 C 10 1, 30 1, 40 8 S 70 15, 80 8' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") repeat-x center / 80px 16px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 16'%3E%3Cpath d='M0 8 C 10 1, 30 1, 40 8 S 70 15, 80 8' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") repeat-x center / 80px 16px;
}

/* ---------- Faixa de contexto ---------- */

.faixa {
  border-bottom: 1px solid var(--cor-borda);
  background: var(--cor-superficie);
  font-size: 1rem;
}

.faixa__linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 1.5rem;
  padding-block: 0.625rem;
}

.faixa__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* ---------- Início: hero e busca ---------- */

.hero {
  padding-block: clamp(3rem, 2rem + 5vw, 6rem) clamp(3rem, 2rem + 4vw, 5rem);
  text-align: center;
}

.selo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 1rem;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pilula);
  background: var(--cor-superficie);
  font-size: 1rem;
  font-weight: 600;
}

.selo__ponto {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--cor-destaque);
}

.hero h1 {
  max-width: 24ch;
  margin: 1.5rem auto 1rem;
  font-size: var(--titulo-display);
}

.hero__apoio {
  max-width: 52ch;
  margin-inline: auto;
  color: var(--cor-texto-suave);
  font-size: var(--texto-lg);
}

.busca {
  max-width: 46rem;
  margin: 2.5rem auto 0;
  text-align: left;
}

.busca__rotulo {
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--fonte-titulo);
  font-size: var(--titulo-sm);
  font-weight: 600;
  text-align: center;
}

.busca__campo {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  background: var(--cor-superficie);
  box-shadow: var(--sombra-suave);
}

.busca__entrada {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  padding: 0 0.875rem;
  border: 1.5px solid var(--cor-borda-forte);
  border-radius: var(--raio-md);
  background: var(--cor-fundo);
  color: var(--cor-texto-suave);
}

.busca__entrada:focus-within {
  border: 2px solid var(--cor-primaria);
}

.busca__entrada input {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  border: 0;
  background: transparent;
  color: var(--cor-texto);
  font-size: var(--texto-md);
}

.busca__entrada input:focus {
  outline: none;
}

.busca__entrada input::placeholder {
  color: var(--cor-texto-suave);
  opacity: 1;
}

.sugestoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

.sugestoes__rotulo {
  margin-right: 0.25rem;
  color: var(--cor-texto-suave);
  font-size: 1rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--alvo-toque);
  padding: 0 1rem;
  border: 1.5px solid var(--cor-borda-forte);
  border-radius: var(--raio-pilula);
  background: transparent;
  color: var(--cor-texto);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.chip:hover {
  border-color: var(--cor-primaria);
  color: var(--cor-primaria);
}

.chip .icone {
  color: var(--cor-primaria);
}

.resultados {
  margin-top: 1rem;
  padding: 0;
  list-style: none;
}

.resultados:empty {
  display: none;
}

.resultados li + li {
  margin-top: 0.5rem;
}

.resultado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 56px;
  padding: 0.75rem 1rem;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  text-decoration: none;
}

.resultado:hover {
  border-color: var(--cor-primaria);
  color: var(--cor-texto);
}

.resultado strong {
  display: block;
}

.resultado span {
  color: var(--cor-texto-suave);
  font-size: 1rem;
}

.resultado .icone {
  color: var(--cor-primaria);
}

.resultados__vazio {
  padding: 1rem;
  border: 1px dashed var(--cor-borda-forte);
  border-radius: var(--raio-md);
}

/* ---------- Seletor de estado ---------- */

.escolha-estado {
  display: grid;
  grid-template-columns: auto 1fr minmax(14rem, 18rem);
  align-items: center;
  gap: 1rem 1.25rem;
  max-width: 46rem;
  margin: 2rem auto 0;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  background: var(--cor-superficie);
  text-align: left;
}

.escolha-estado__icone {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--cor-destaque-fundo);
  color: var(--cor-destaque-texto);
}

.escolha-estado h2 {
  font-size: var(--titulo-sm);
}

.escolha-estado p {
  color: var(--cor-texto-suave);
  font-size: 1rem;
}

.escolha-estado__confirmacao {
  grid-column: 1 / -1;
  font-size: 1rem;
}

.escolha-estado__confirmacao:empty {
  display: none;
}

@media (max-width: 640px) {
  .escolha-estado {
    grid-template-columns: auto 1fr;
  }

  .escolha-estado .seletor {
    grid-column: 1 / -1;
  }
}

.seletor {
  position: relative;
  display: block;
}

.seletor select {
  width: 100%;
  min-height: 52px;
  padding: 0 2.75rem 0 1rem;
  border: 1.5px solid var(--cor-borda-forte);
  border-radius: var(--raio-md);
  background: var(--cor-fundo);
  font-weight: 600;
  cursor: pointer;
  appearance: none;
}

.seletor select:focus-visible {
  border-color: var(--cor-primaria);
}

.seletor::after {
  content: "";
  position: absolute;
  right: 1rem;
  bottom: 23px;
  width: 0.625rem;
  height: 0.625rem;
  border-right: 2px solid var(--cor-texto);
  border-bottom: 2px solid var(--cor-texto);
  transform: rotate(45deg);
  pointer-events: none;
}

.seletor__rotulo {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 1rem;
  font-weight: 600;
}

/* ---------- Cards ---------- */

.card {
  padding: clamp(1.25rem, 0.9rem + 1.5vw, 2rem);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-xl);
  background: var(--cor-superficie);
}

.secao--superficie .card {
  background: var(--cor-fundo);
}

.grade {
  display: grid;
  gap: 1.25rem;
}

.grade--4 {
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.grade--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
}

.indicador {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.indicador__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  color: var(--cor-texto-suave);
  font-size: 1rem;
  font-weight: 600;
}

.indicador__topo .icone {
  color: var(--cor-azulejo);
}

.indicador h3 {
  font-size: var(--titulo-sm);
}

.indicador__frase {
  display: flex;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--cor-borda);
  font-size: 1rem;
}

.indicador__frase .icone {
  margin-top: 0.125rem;
  color: var(--cor-texto-suave);
}

.indicador__fonte {
  color: var(--cor-texto-suave);
  font-size: 1rem;
}

.numero {
  display: block;
  font-family: var(--fonte-texto);
  font-size: var(--numero-grande);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.numero--medio {
  font-size: var(--numero-medio);
}

.numero--destaque {
  color: var(--cor-destaque-texto);
}

.numero__unidade {
  display: block;
  margin-top: 0.25rem;
  color: var(--cor-texto-suave);
  font-size: 1rem;
  font-weight: 400;
}

.seta-subiu::before {
  content: "▲ ";
}

.seta-caiu::before {
  content: "▼ ";
}

/* ---------- Card de gráfico: Pergunta → Resposta → Gráfico → Detalhes ---------- */

.grafico-card {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.grafico-card + .grafico-card {
  margin-top: var(--espaco-xl);
}

.grafico-card__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.grafico-card__etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  color: var(--cor-destaque-texto);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.grafico-card__etiqueta--neutra {
  color: var(--cor-azulejo);
}

.grafico-card h2,
.grafico-card h3 {
  font-size: var(--titulo-md);
}

.grafico-card__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.resposta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2.5rem;
}

.resposta__numero {
  flex: none;
}

.resposta__frase {
  flex: 1 1 20rem;
  font-size: var(--texto-lg);
}

.comparacao-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: var(--raio-md);
  background: var(--cor-destaque-fundo);
  color: var(--cor-destaque-texto);
  font-weight: 600;
}

.comparacao-pill--neutra {
  background: var(--cor-azulejo-fundo);
  color: var(--cor-texto);
}

.painel-grafico {
  padding: clamp(1rem, 0.8rem + 1vw, 1.5rem);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  background: var(--cor-fundo);
}

.secao--superficie .painel-grafico {
  background: var(--cor-superficie);
}

.painel-grafico__titulo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  margin-bottom: 1.25rem;
}

.painel-grafico__titulo h3,
.painel-grafico__titulo h4 {
  font-family: var(--fonte-texto);
  font-size: 1.125rem;
  font-weight: 700;
}

.painel-grafico__titulo p {
  color: var(--cor-texto-suave);
  font-size: 1rem;
}

.legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  font-size: 1rem;
}

.legenda li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.legenda__amostra {
  display: inline-block;
  width: 1.5rem;
  height: 0.75rem;
  border-radius: 2px;
  background: var(--cor-azulejo);
}

.legenda__amostra--destaque {
  background: var(--cor-destaque);
}

.legenda__amostra--brasil {
  height: 0;
  border-top: 3px dashed var(--cor-texto);
  background: none;
}

.legenda__amostra--contexto {
  background: var(--cor-contexto);
}

.legenda__amostra--sem-dado {
  border: 1px solid var(--cor-hachura);
  background: repeating-linear-gradient(45deg, transparent 0 4px, var(--cor-hachura) 4px 6px);
}

.fonte {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--cor-borda);
  color: var(--cor-texto-suave);
  font-size: 1rem;
}

.fonte__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.detalhes {
  border-top: 1px solid var(--cor-borda);
}

.detalhes summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 56px;
  color: var(--cor-primaria);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.detalhes summary::-webkit-details-marker {
  display: none;
}

.detalhes summary::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--duracao) var(--curva);
}

.detalhes[open] summary::before {
  transform: rotate(45deg);
}

.detalhes summary span:first-of-type {
  flex: 1;
}

.detalhes__dica {
  color: var(--cor-texto-suave);
  font-size: 1rem;
  font-weight: 400;
}

.detalhes__conteudo {
  display: grid;
  gap: 1rem;
  padding-bottom: 1rem;
}

.detalhes__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.nota-ilustrativa {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--cor-texto-suave);
  font-size: 1rem;
  font-style: normal;
}

/* ---------- Barras horizontais ---------- */

.barras {
  display: grid;
  gap: 0.875rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.barras__grupo {
  margin: 1.5rem 0 0.75rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.barras__grupo:first-child {
  margin-top: 0;
}

.barra__topo {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.25rem;
  font-size: 1rem;
}

.barra__valor {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.barra__trilho {
  height: 14px;
  overflow: hidden;
  border-radius: var(--raio-pilula);
  background: var(--cor-trilho);
}

.barra__preenchimento {
  width: var(--largura, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--cor-azulejo);
  transition: width 400ms var(--curva);
}

.barra--destaque .barra__topo {
  color: var(--cor-destaque-texto);
  font-weight: 700;
}

.barra--destaque .barra__preenchimento {
  background: var(--cor-destaque);
}

.barra--destaque .barra__trilho {
  height: 18px;
}

.barra--brasil .barra__preenchimento {
  background: repeating-linear-gradient(90deg, var(--cor-texto) 0 10px, transparent 10px 15px);
}

.barra--brasil .barra__topo {
  font-weight: 700;
}

.barra--contexto .barra__preenchimento {
  background: var(--cor-contexto);
}

.barra--sem-dado .barra__trilho {
  border: 1px solid var(--cor-hachura);
  background: repeating-linear-gradient(45deg, transparent 0 6px, var(--cor-hachura) 6px 8px);
}

.barra.barra--sem-dado .barra__preenchimento {
  background: transparent;
}

.barra--sem-dado.barra--destaque .barra__trilho {
  border: 2px solid var(--cor-destaque);
}

.barra--sem-dado .barra__valor {
  color: var(--cor-texto-suave);
  font-weight: 400;
}

.barra__nomes {
  margin-top: 0.375rem;
  color: var(--cor-texto-suave);
  font-size: 1rem;
}

/* ---------- Carregando (onda do calçadão) ---------- */

@keyframes onda-andando {
  to {
    -webkit-mask-position: 80px center;
    mask-position: 80px center;
  }
}

.carregando {
  height: 16px;
  margin: 2rem 0;
  background: var(--cor-azulejo);
  opacity: 0.5;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 16'%3E%3Cpath d='M0 8 C 10 1, 30 1, 40 8 S 70 15, 80 8' fill='none' stroke='black' stroke-width='3'/%3E%3C/svg%3E") repeat-x 0 center / 80px 16px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 16'%3E%3Cpath d='M0 8 C 10 1, 30 1, 40 8 S 70 15, 80 8' fill='none' stroke='black' stroke-width='3'/%3E%3C/svg%3E") repeat-x 0 center / 80px 16px;
  animation: onda-andando 1.2s linear infinite;
}

#cartoes > .grafico-card + .grafico-card,
#foco > .grafico-card {
  margin-top: 0;
}

#cartoes {
  display: grid;
  gap: var(--espaco-xl);
}

/* ---------- Comparativo ano a ano ---------- */

.aa__controles {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1rem;
}

.aa__controles .seletor {
  min-width: 15rem;
}

.aa__grade {
  display: grid;
}

.aa__linha {
  display: grid;
  grid-template-columns: minmax(9rem, 1.4fr) repeat(var(--anos, 5), minmax(0, 1fr));
  align-items: center;
  gap: 0.5rem 1rem;
  padding-block: 0.625rem;
  border-top: 1px solid var(--cor-borda);
}

.aa__linha--cabecalho {
  border-top: 0;
  font-size: 1rem;
  font-weight: 700;
}

.aa__nome {
  font-weight: 600;
}

.aa__celula {
  display: grid;
  gap: 0.25rem;
}

.aa__ano {
  display: none;
  color: var(--cor-texto-suave);
  font-size: 1rem;
}

.aa__barra {
  position: relative;
  height: 12px;
  border-radius: var(--raio-pilula);
  background: var(--cor-trilho);
}

.aa__barra::after {
  content: "";
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: 50%;
  border-left: 1.5px solid var(--cor-borda-forte);
}

.aa__preenchimento {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--tamanho);
  border-radius: 0 var(--raio-pilula) var(--raio-pilula) 0;
  background: var(--cor-azulejo);
}

.aa__preenchimento--negativo {
  right: 50%;
  left: auto;
  border-radius: var(--raio-pilula) 0 0 var(--raio-pilula);
}

.aa__celula--atual .aa__preenchimento {
  background: var(--cor-destaque);
}

.aa__celula--atual .aa__valor {
  color: var(--cor-destaque-texto);
}

.aa__valor {
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .aa__linha {
    grid-template-columns: 1fr;
  }

  .aa__linha--cabecalho {
    display: none;
  }

  .aa__celula {
    grid-template-columns: 3.5rem 1fr 5.5rem;
    align-items: center;
    gap: 0.75rem;
  }

  .aa__ano {
    display: block;
  }

  .aa__valor {
    text-align: right;
  }

  .aa__controles {
    justify-content: stretch;
  }

  .aa__controles .seletor {
    width: 100%;
  }
}

/* ---------- Gráfico de linha (SVG) ---------- */

.grafico-linha {
  width: 100%;
  min-height: 220px;
}

.grafico-linha svg {
  display: block;
  width: 100%;
  overflow: visible;
}

.grafico-linha .eixo-texto {
  fill: var(--cor-texto-suave);
  font-family: var(--fonte-texto);
  font-size: 14px;
}

.grafico-linha .grade-linha {
  stroke: var(--cor-borda);
  stroke-width: 1;
}

.grafico-linha .rotulo-final {
  fill: var(--cor-texto);
  font-family: var(--fonte-texto);
  font-size: 16px;
  font-weight: 700;
}

/* ---------- Pictograma de 100 pessoas ---------- */

.pontos {
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  gap: 5px;
  max-width: 30rem;
}

.ponto {
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--cor-azulejo);
}

.ponto--destaque {
  background: var(--cor-destaque);
}

/* ---------- Bandeiras tarifárias ---------- */

.bandeiras {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bandeira {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  font-size: 1rem;
}

.bandeira__nome {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-weight: 700;
}

.bandeira__amostra {
  width: 0.75rem;
  height: 0.75rem;
  flex: none;
  border-radius: 2px;
  background: var(--amostra);
}

.bandeira--ativa {
  border: 2px solid var(--cor-texto);
  background: var(--cor-superficie);
}

.bandeira__selo {
  font-weight: 700;
}

@media (max-width: 479px) {
  .bandeiras {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- Tabelas ---------- */

.tabela-envoltorio {
  overflow-x: auto;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
}

.tabela-envoltorio[hidden] {
  display: none;
}

.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.tabela caption {
  padding: 0.75rem 1rem;
  font-weight: 700;
  text-align: left;
}

.tabela th,
.tabela td {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--cor-borda);
  text-align: left;
  vertical-align: top;
}

.tabela thead th {
  background: var(--cor-superficie);
  font-weight: 700;
}

.tabela td.num,
.tabela th.num {
  text-align: right;
  white-space: nowrap;
}

.tabela tr.linha-destaque {
  background: var(--cor-destaque-fundo);
  font-weight: 700;
}

.tabela tr.linha-brasil {
  font-weight: 700;
}

/* ---------- Temas (azulejos) ---------- */

.temas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: 1.25rem;
}

.tema {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  height: 100%;
  transition: transform var(--duracao) var(--curva), box-shadow var(--duracao) var(--curva);
}

.tema:has(a:hover) {
  transform: translateY(-2px);
  box-shadow: var(--sombra-suave);
}

.tema h3 {
  font-size: var(--titulo-sm);
}

.tema h3 a {
  color: var(--cor-texto);
  text-decoration: none;
}

.tema h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--raio-xl);
}

.tema h3 a:focus-visible {
  outline: none;
}

.tema h3 a:focus-visible::after {
  outline: 3px solid var(--cor-primaria);
  outline-offset: 2px;
}

.tema__numero {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.tema__rodape {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: auto;
  color: var(--cor-primaria);
  font-weight: 600;
}

.tema__rodape--em-breve {
  color: var(--cor-texto-suave);
  font-weight: 400;
}

.azulejo {
  --tom: var(--cor-azulejo);
  position: relative;
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  overflow: hidden;
  border-radius: var(--raio-md);
  background:
    radial-gradient(circle at 0 0, var(--tom) 0 32%, transparent 33%),
    radial-gradient(circle at 100% 100%, var(--tom) 0 32%, transparent 33%),
    linear-gradient(135deg, transparent 0 49%, color-mix(in srgb, var(--tom) 18%, transparent) 50% 100%),
    var(--cor-fundo);
  border: 1px solid var(--cor-borda);
}

.azulejo .icone {
  position: relative;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0.25rem;
  border-radius: 50%;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  box-sizing: content-box;
}

.azulejo--urucum {
  --tom: var(--cor-destaque);
}

.azulejo--ipe {
  --tom: var(--cor-ipe);
}

.azulejo--contexto {
  --tom: var(--cor-contexto);
}

/* ---------- Faixa de compromisso ---------- */

.compromisso {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1.5rem 3rem;
}

.compromisso h2 {
  margin-bottom: 0.75rem;
  font-size: var(--titulo-md);
}

.compromisso__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

@media (max-width: 860px) {
  .compromisso {
    grid-template-columns: 1fr;
  }
}

/* ---------- Página de tema ---------- */

.cabecalho-pagina {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 1.5rem 3rem;
  padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) clamp(2rem, 1.5rem + 2vw, 3rem);
}

.cabecalho-pagina h1 {
  margin-bottom: 1rem;
  font-size: var(--titulo-display);
}

.cabecalho-pagina p {
  font-size: var(--texto-lg);
}

.localizacao {
  min-width: 16rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  background: var(--cor-superficie);
}

@media (max-width: 860px) {
  .cabecalho-pagina {
    grid-template-columns: 1fr;
  }
}

.migalhas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  color: var(--cor-texto-suave);
  font-size: 1rem;
}

.migalhas li + li::before {
  content: "/";
  margin-right: 0.5rem;
}

.aviso-cobertura {
  display: flex;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--cor-ipe);
  border-radius: var(--raio-md);
  background: var(--cor-superficie);
  font-size: 1rem;
}

.aviso-cobertura strong {
  display: block;
  margin-bottom: 0.25rem;
}

.feedback {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
}

.feedback h2 {
  font-size: var(--titulo-sm);
}

.feedback__botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ---------- Meu estado ---------- */

.estado-cabecalho {
  display: grid;
  grid-template-columns: 1fr minmax(16rem, 22rem);
  align-items: end;
  gap: 1.5rem 3rem;
  padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) 2rem;
}

.estado-cabecalho h1 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1rem;
  margin-bottom: 1rem;
  font-size: clamp(2.5rem, 1.8rem + 3vw, 3.75rem);
}

.estado-cabecalho__sigla {
  padding: 0.125rem 0.75rem;
  border: 1.5px solid var(--cor-borda-forte);
  border-radius: var(--raio-md);
  color: var(--cor-texto-suave);
  font-family: var(--fonte-texto);
  font-size: 1.25rem;
  font-weight: 700;
}

.estado-cabecalho__acoes {
  display: grid;
  gap: 0.75rem;
}

@media (max-width: 860px) {
  .estado-cabecalho {
    grid-template-columns: 1fr;
  }
}

.faixa-ouvir {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  background: var(--cor-superficie);
  font-size: 1rem;
}

.faixa-ouvir p {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mini-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mini-card .grafico-card__topo {
  flex-wrap: nowrap;
}

.mini-card h3 {
  font-size: var(--titulo-sm);
}

.mini-card__periodo {
  flex: none;
  color: var(--cor-texto-suave);
  font-size: 1rem;
  font-weight: 600;
}

.mini-card__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--cor-borda);
}

.comparar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

@media (max-width: 720px) {
  .comparar {
    grid-template-columns: 1fr;
  }
}

.comparar__coluna h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  font-size: var(--titulo-sm);
}

.comparar__coluna--base {
  border-color: var(--cor-destaque);
}

.comparar__papel {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--cor-texto-suave);
  font-size: 1rem;
  font-weight: 600;
}

.comparar__lista {
  display: grid;
  gap: 0;
  margin: 0;
}

.comparar__lista div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.75rem;
  border-top: 1px solid var(--cor-borda);
}

.comparar__lista dt {
  color: var(--cor-texto-suave);
}

.comparar__lista dd {
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.comparar__lista dd small {
  display: block;
  color: var(--cor-texto-suave);
  font-size: 1rem;
  font-weight: 400;
}

.resumo-comparacao {
  margin-top: 1.25rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--raio-lg);
  background: var(--cor-azulejo-fundo);
}

.baixar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
}

.baixar__texto {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.baixar__icone {
  display: grid;
  flex: none;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--cor-primaria);
  color: var(--cor-sobre-primaria);
}

.baixar h2 {
  font-size: var(--titulo-sm);
}

/* ---------- Sobre os dados ---------- */

.fontes-lista {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
}

.fonte-card h2 {
  margin-bottom: 0.5rem;
  font-size: var(--titulo-sm);
}

.fonte-card dl {
  display: grid;
  gap: 0.5rem;
  margin: 1rem 0;
  font-size: 1rem;
}

.fonte-card dt {
  color: var(--cor-texto-suave);
  font-weight: 600;
}

.fonte-card dd {
  margin: 0 0 0.5rem;
}

/* ---------- Rodapé com cobogó ---------- */

.rodape {
  position: relative;
  margin-top: var(--espaco-secao);
  overflow: hidden;
  border-top: 1px solid var(--cor-borda);
  background: var(--cor-superficie);
}

.rodape::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cor-texto);
  opacity: 0.05;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M24 4 L44 24 L24 44 L4 24 Z M24 14 L34 24 L24 34 L14 24 Z' fill='black' fill-rule='evenodd'/%3E%3C/svg%3E") repeat / 48px 48px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M24 4 L44 24 L24 44 L4 24 Z M24 14 L34 24 L24 34 L14 24 Z' fill='black' fill-rule='evenodd'/%3E%3C/svg%3E") repeat / 48px 48px;
  pointer-events: none;
}

.rodape__conteudo {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem 4rem;
  padding-block: 3.5rem 2rem;
}

.rodape h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  font-size: var(--titulo-sm);
}

.rodape h3 {
  margin-bottom: 0.5rem;
  font-family: var(--fonte-texto);
  font-size: 1rem;
  font-weight: 700;
}

.rodape p,
.rodape li {
  color: var(--cor-texto-suave);
  font-size: 1rem;
}

.rodape__fontes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rodape__base {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-block: 1.25rem 2rem;
  border-top: 1px solid var(--cor-borda);
  color: var(--cor-texto-suave);
  font-size: 1rem;
}

.rodape__base a {
  display: inline-flex;
  align-items: center;
  min-height: var(--alvo-toque);
}

.vlibras-reserva {
  min-height: 0;
}

@media (max-width: 720px) {
  .rodape__conteudo {
    grid-template-columns: 1fr;
  }
}

/* ---------- Aviso temporário ---------- */

.aviso-flutuante {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  z-index: 50;
  max-width: calc(100% - 2rem);
  padding: 0.875rem 1.25rem;
  border-radius: var(--raio-md);
  background: var(--cor-texto);
  color: var(--cor-fundo);
  font-weight: 600;
  box-shadow: var(--sombra-flutuante);
  transform: translateX(-50%);
}

.aviso-flutuante[hidden] {
  display: none;
}

@media (max-width: 767px) {
  .aviso-flutuante {
    bottom: 6rem;
  }
}

/* ---------- Estados da tela ---------- */

.estado-vazio {
  display: flex;
  gap: 0.75rem;
  padding: 1.25rem;
  border: 1px dashed var(--cor-borda-forte);
  border-radius: var(--raio-md);
}

/* ---------- Movimento ---------- */

@keyframes surgir {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.surgir {
  animation: surgir 350ms var(--curva) both;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}