/* EDF Ambiental - o bloco de numeros da pagina inicial (o que /edf/numeros.js desenha).
   So a pagina inicial liga este arquivo. Ao muda-lo, troque o ?v= do <link>.

   Uma serie so, uma cor so: o laranja da casa (#D56B1D) sobre o creme da pagina (#FFF9EB),
   conferido com o validador de paleta (contraste >= 3:1). O texto usa as tintas, nunca a cor
   da serie. */
.edf-numeros {
  --edf-tinta: #212121;
  --edf-tinta-2: #55504a;
  --edf-tinta-3: #6f685d;
  --edf-cartao: #fffdf6;
  --edf-grade: #eadfc6;
  --edf-eixo: #cfc2a4;
  --edf-serie: #d56b1d;
  --edf-serie-forte: #b4570f;
  box-sizing: border-box;
  width: 100%;
  max-width: 1100px;
  margin: 56px auto 32px;
  color: var(--edf-tinta);
  font-family: Montserrat, sans-serif;
}
.edf-numeros *,
.edf-numeros *::before,
.edf-numeros *::after { box-sizing: border-box; }
.edf-numeros[hidden],
.edf-numeros [hidden] { display: none !important; }

.edf-numeros__titulo {
  margin: 0 0 10px;
  color: var(--edf-serie);
  font: 700 28px/1.2 Montserrat, sans-serif;
  text-align: center;
  text-wrap: balance;
}
.edf-numeros__texto {
  max-width: 680px;
  margin: 0 auto 24px;
  font: 500 16px/24px Montserrat, sans-serif;
  text-align: center;
}

/* as fichas: o numero e a figura */
.edf-numeros__fichas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
}
.edf-ficha {
  padding: 20px 16px 18px;
  border: 1px solid var(--edf-grade);
  border-radius: 10px;
  background: var(--edf-cartao);
  text-align: center;
}
.edf-ficha__valor { font: 700 36px/1.1 Montserrat, sans-serif; }
.edf-ficha__rotulo { margin-top: 6px; color: var(--edf-tinta-2); font: 500 14px/1.35 Montserrat, sans-serif; }

/* os graficos */
.edf-numeros__graficos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.edf-grafico {
  min-width: 0;
  margin: 0;
  padding: 20px;
  border: 1px solid var(--edf-grade);
  border-radius: 10px;
  background: var(--edf-cartao);
}
.edf-grafico__titulo { font: 700 16px/1.3 Montserrat, sans-serif; }
.edf-grafico__nota { margin: 2px 0 0; color: var(--edf-tinta-3); font: 500 13px/1.4 Montserrat, sans-serif; }
.edf-grafico__svg { display: block; width: 100%; max-width: 520px; height: auto; margin: 10px auto 0; overflow: visible; }
.edf-grade { stroke: var(--edf-grade); stroke-width: 1; }
.edf-eixo { stroke: var(--edf-eixo); stroke-width: 1; }
.edf-escala { fill: var(--edf-tinta-3); font: 500 12px Montserrat, sans-serif; font-variant-numeric: tabular-nums; }
.edf-valor { fill: var(--edf-tinta); font: 700 12px Montserrat, sans-serif; }
.edf-barra { fill: var(--edf-serie); }
.edf-toque { fill: transparent; }
.edf-marca { outline: none; }
.edf-marca:hover .edf-barra,
.edf-marca:focus .edf-barra { fill: var(--edf-serie-forte); }
.edf-marca:focus-visible .edf-toque { fill: rgba(33, 33, 33, .05); stroke: var(--edf-tinta); stroke-width: 1.5; }

.edf-barras { display: grid; gap: 10px; margin-top: 14px; }
.edf-barras__linha {
  display: grid;
  grid-template-columns: minmax(96px, 36%) 1fr;
  gap: 12px;
  align-items: center;
  border-radius: 4px;
  outline: none;
}
.edf-barras__linha:focus-visible { outline: 2px solid var(--edf-tinta); outline-offset: 3px; }
.edf-barras__rotulo { font: 500 14px/1.25 Montserrat, sans-serif; text-align: right; }
.edf-barras__trilho { display: flex; gap: 8px; align-items: center; min-width: 0; }
.edf-barras__barra {
  flex: 0 0 auto;
  width: calc((100% - 56px) * var(--r, 0));
  min-width: 2px;
  height: 16px;
  border-radius: 0 4px 4px 0;
  background: var(--edf-serie);
}
.edf-barras__linha:hover .edf-barras__barra,
.edf-barras__linha:focus .edf-barras__barra { background: var(--edf-serie-forte); }
.edf-barras__valor { font: 700 13px/1 Montserrat, sans-serif; font-variant-numeric: tabular-nums; }

.edf-numeros__rodape { margin: 16px 0 0; color: var(--edf-tinta-3); font: 500 13px/1.4 Montserrat, sans-serif; text-align: center; }

/* o mapa por municipio (fica na secao «Nossos Clientes», fora do bloco: cores escritas aqui) */
[data-edf="mapa"] img[hidden] { display: none; }
.edf-mapa { display: block; width: 100%; max-width: 502px; height: auto; margin: 0 auto; overflow: visible; }
.edf-mapa__estado {
  fill: #fffdf6;
  stroke: #b9aa86;
  stroke-width: 1;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
/* o anel na cor da pagina separa um ponto do vizinho quando eles se encostam */
.edf-mapa__ponto {
  fill: #d56b1d;
  fill-opacity: .82;
  stroke: #fff9eb;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.edf-mapa__ponto:hover { fill: #b4570f; fill-opacity: 1; }
.edf-mapa__legenda { margin: 8px 0 0; color: #6f685d; font: 500 13px/1.4 Montserrat, sans-serif; text-align: center; }

/* a dica do mouse e do foco */
.edf-dica {
  position: absolute;
  z-index: 1000;
  max-width: 260px;
  padding: 6px 10px;
  border-radius: 6px;
  background: #212121;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
  color: #fff9eb;
  font: 500 13px/1.3 Montserrat, sans-serif;
  pointer-events: none;
}
.edf-dica[hidden] { display: none; }

@media (max-width: 767px) {
  .edf-numeros { margin-top: 40px; }
  .edf-numeros__titulo { font-size: 24px; }
  .edf-ficha__valor { font-size: 30px; }
  .edf-grafico { padding: 16px; }
}