.map-section {
  background-color: var(--secondary-bg-color); /* Cor de fundo da seção */
  padding: 60px 0;
  /* Padding top/bottom definido em base.css */
}

/* O título h2 e o subtítulo section-subtitle herdam estilos de base.css */

.map-container {
  width: 100%;
  max-width: 800px; /* Largura máxima do mapa para telas grandes */
  height: auto; /* Altura automática para manter a proporção do SVG */
  margin: 0 auto; /* Centraliza o container do mapa */
  padding: 20px; /* Espaçamento interno opcional */
  /* background-color: #e9e9e9; Cor de fundo opcional */

  position: relative;
  overflow: visible; /* Permite que outlines ou tooltips fiquem visíveis */
}

/* Estilo base para o SVG do mapa */
.map-container svg {
  width: 100%; /* Garante que o SVG ocupe a largura do container */
  height: auto; /* Mantém a proporção */
  display: block;
  overflow: visible;
  /* Remova preenchimentos (fill) e bordas (stroke) inline do SVG original se quiser que o CSS abaixo controle TUDO */
}

/* Estilo base para o link que envolve cada estado */
.map-container svg a {
  text-decoration: none; /* Remove sublinhado padrão do link */
  cursor: pointer; /* Indica que é clicável */
  /* A cor padrão do estado e borda serão definidas no PATH abaixo */
}

/* Estilo base para a forma (path) de cada estado */
.map-container svg a path {
  fill: #ccc; /* Cor padrão para estados inativos (adaptado do seu snippet, era #0094d9) */
  stroke: #FFFFFF; /* Cor da borda (do seu snippet) */
  stroke-width: 1.0404; /* Espessura da borda (do seu snippet) */
  transition: fill 0.3s ease, opacity 0.3s ease, stroke-width 0.3s ease; /* Transição suave */
}

/* Estilo para o texto (sigla) de cada estado */
.map-container svg a text {
  fill: #fff; /* Cor do texto (do seu snippet) */
  font: 12px Arial-BoldMT, sans-serif; /* Estilo da fonte (do seu snippet) */
  /* O posicionamento do texto é definido no atributo 'transform' no próprio SVG */
}

/* Estilo para estados onde o grupo é ATIVO */
/* Adicione a classe 'active-state' ao link <a> via JavaScript */
.map-container svg a.active-state path {
  fill: var(--primary-color); /* Cor primária para estados ativos */
  /* Opcional: stroke: var(--primary-color); */
}
/* Estilo para o texto do estado ativo */
.map-container svg a.active-state text {
  fill: var(--white); /* Texto branco em estado ativo */
}


/* Estilo ao passar o mouse sobre QUALQUER estado (no link <a>) */
.map-container svg a:hover path {
  fill: var(--gold-accent) !important; /* Cor dourada no hover, use !important para garantir */
  opacity: 0.8; /* Leve transparência no hover */
  stroke-width: 1.5; /* Borda um pouco mais grossa no hover */
}
/* Estilo do texto ao passar o mouse */
/* .map-container svg a:hover text { fill: darken(#fff, 20%); } */

/* Estilo ao passar o mouse sobre um estado ATIVO */
.map-container svg a.active-state:hover path {
  fill: var(--gold-accent) !important; /* Garante cor dourada no hover mesmo se for ativo */
}

/* Estilos para elementos com classe .circle dentro do SVG (se existirem - no seu snippet Bahia e Tocantins não tinham) */
.map-container svg .circle {
   fill:#66ccff; /* Cor (do seu snippet) */
}
/* Estilo ao passar o mouse sobre elementos .circle */
.map-container svg a:hover .circle {
  fill:#003399 !important; /* Cor no hover (do seu snippet) */
  cursor:pointer;
}

/* Opcional: Estilo para uma bolha/tooltip customizada (se implementada com JS) */
/* .map-tooltip { ... } */
/* .map-tooltip.visible { ... } */


/* Media Queries específicas para a seção Mapa */
@media (max-width: 768px) {
  .map-container {
      max-width: 100%;
      padding: 10px;
  }

  .map-container svg path {
      stroke-width: 0.5;
  }
   .map-container svg a text {
       font-size: 10px; /* Texto menor em telas pequenas */
   }
}