/* Roberti — capítulo Área de atuação.
   Mapa da região desenhado em SVG a partir da malha oficial, sem Leaflet nem
   Mapbox: são caminhos vetoriais e um pouco de JS. A silhueta é uma faixa
   norte-sul, então o mapa é alto e a lista de cidades vive ao lado dele.

   Capítulo claro. TODA a área de atuação recebe índigo, sem distinguir onde já há
   obra -- a seção fala de onde a Roberti atende, não de onde já entregou. Os
   municípios vizinhos entram apagados, como contexto: sem eles o mapa terminava
   num limite reto que lia como corte de imagem. */
@import url("marca.css");

.regiao {
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fonte-texto);
  padding: var(--gap-secao) clamp(16px, 4vw, 56px);
}
.regiao-interno {
  max-width: var(--largura-max); margin: 0 auto;
  position: relative;   /* o conteúdo fica acima do padrão de fundo */
}

.regiao-topo {
  padding-bottom: clamp(18px, 2.4vw, 30px);
  margin-bottom: clamp(24px, 3vw, 44px);
  border-bottom: 1px solid var(--tinta-13);
}
.regiao-etiqueta {
  font-family: var(--fonte-titulo);
  font-size: var(--t-etiqueta);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--indigo);
  margin: 0 0 14px;
}
.regiao-titulo {
  font-family: var(--fonte-titulo);
  font-weight: 300;
  font-size: clamp(26px, 4.2vw, 54px);
  line-height: 1.04;
  letter-spacing: var(--tracking-titulo);
  margin: 0 0 12px;
  max-width: 24ch;
}
.regiao-titulo b { font-weight: 400; }
.regiao-linha {
  margin: 0;
  font-size: var(--t-corpo);
  color: var(--tinta-65);
  max-width: 64ch;
  line-height: 1.6;
}

.regiao-visor {
  display: grid;
  grid-template-columns: minmax(0, 0.54fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}

/* ---------- o mapa ---------- */
.mapa {
  position: relative;
  margin-inline: auto;
}
/* medido por ALTURA: a região é uma faixa norte-sul e medir por largura
   fazia a seção pedir duas telas de rolagem */
.mapa svg { width: auto; height: 66vh; max-height: 660px; display: block;
  margin-inline: auto; overflow: visible; }
.mapa .viz {                      /* vizinho: só contexto, não interage */
  fill: #1b1b370d;
  stroke: var(--papel);
  stroke-width: 1.2;
}
.mapa .mun {                      /* área de atuação */
  fill: var(--indigo);
  stroke: var(--papel);
  stroke-width: 1.4;
  transition: fill .22s;
  cursor: pointer;
}
.mapa .mun:hover, .mapa .mun.foco { fill: var(--tinta); }

/* alfinete da sede, o único ponto no mapa */
.mapa-sede {
  position: absolute;
  /* só o PONTO fica sobre a coordenada; o rótulo corre para a direita.
     Centralizar o conjunto empurrava o ponto para fora do município. */
  transform: translateY(-50%);
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 7px;
}
.mapa-sede.esq { flex-direction: row-reverse; transform: translate(-100%, -50%); }
.mapa-sede.esq i { margin-left: 0; margin-right: -4.5px; }
.mapa-sede i {
  width: 9px; height: 9px; border-radius: 50%;
  margin-left: -4.5px;
  background: var(--claro);
  box-shadow: 0 0 0 3px #60b5d759;
  flex: 0 0 auto;
}
.mapa-sede span {
  font-family: var(--fonte-titulo);
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta); background: #eff0f2e0; padding: 2px 6px; border-radius: 2px;
  white-space: nowrap;
}

.mapa-legenda {
  display: flex; gap: 18px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--tinta-13);
  font-size: 12.5px; color: var(--tinta-65);
}
.mapa-legenda span { display: flex; align-items: center; gap: 7px; }
.mapa-legenda i {
  width: 13px; height: 13px; flex: 0 0 auto;
  background: #1b1b370d;
}
.mapa-legenda i.area { background: var(--indigo); }
.mapa-legenda i.sede { background: var(--claro); border-radius: 50%; width: 9px; height: 9px; }

/* ---------- a lista, por região ---------- */
.regioes { display: flex; flex-direction: column; gap: clamp(14px, 1.8vw, 22px); }
.grupo-nome {
  font-family: var(--fonte-titulo);
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--indigo); margin: 0 0 8px;
}
.grupo-nome b { color: var(--tinta-65); font-weight: 400; margin-left: 6px; }
.cidades-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 0;
  border-top: 1px solid var(--tinta-13);
}
.cidade {
  appearance: none; background: none; border: 0;
  border-bottom: 1px solid var(--tinta-13);
  text-align: left; font: inherit; color: var(--tinta-65);
  padding: 6px 4px 6px 10px; cursor: pointer; position: relative;
  transition: color .18s;
  display: block; width: 100%;
}
.cidade:hover, .cidade.foco { color: var(--tinta); }
.cidade::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--degrade); transform: scaleY(0); transition: transform .2s;
}
.cidade:hover::before, .cidade.foco::before { transform: scaleY(1); }
.cidade-nome { font-family: var(--fonte-titulo); font-size: 13px; display: block;
  line-height: 1.3; }
.cidade:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }

@media (max-width: 920px) {
  .regiao-visor { grid-template-columns: 1fr; }
  .mapa svg { height: auto; width: min(100%, 320px); }
}
@media (prefers-reduced-motion: reduce) {
  .mapa .mun, .cidade, .cidade::before { transition: none; }
}