@import url('/default/style.css');

.mapa {
  margin-top: var(--header-height);
  padding: 100px 20px;
  background: linear-gradient(rgba(52,95,121,0.8), rgba(12,66,34,0.7));
  color: var(--text-light);
  text-align: center;
}

.mapa h1 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  color: var(--highlight-color);
}

.mapa p {
  font-size: 1.1rem;
  max-width: 700px;
  margin: 0 auto 40px auto;
}

.mapa-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.mapa-img {
  max-width: 100%;
  border-radius: 12px;
  box-shadow: 0 8px 16px var(--shadow-color);
}

/* Adicione ao mapa.css */

/* Efeito de pulsação no mapa */
.mapa-img {
  animation: map-pulse 8s infinite alternate;
  transition: all 0.5s ease;
}

@keyframes map-pulse {
  0% { box-shadow: 0 0 10px rgba(212, 160, 23, 0.3); }
  100% { box-shadow: 0 0 30px rgba(212, 160, 23, 0.7); }
}

/* Efeito de brilho em pontos específicos (ajuste conforme seu mapa) */
.mapa-img:hover {
  filter: brightness(1.1);
  transform: scale(1.01);
}