.localizacao-page, .localizacao-wrapper { /* garantir que a página ocupe toda a altura da viewport */
  min-height: 100vh;
  height: 100vh;
}

.localizacao-wrapper { /* conter todos os elementos da página */
  position: fixed;
  z-index: 2;
  display: block;
}

.localizacao-container { /* centralizar o conteúdo da página */
  max-width: 300px;
  margin: auto;
  height: 100vh;
  position: relative;
}

.info-sections { /* contêiner para as caixas de informação */
  position: center;
  z-index: 3; /* acima do mapa */
  margin-left: 1.6rem; /* afastado da borda esquerda */
  bottom: -16rem; /* fica próximo ao rodapé */
  display: flex;
  margin-top: 25rem;
  gap: 0.5rem;
  align-items: center;
}

.info-box {/* caixas de informação individuais */
  background: rgba(255,255,255,0.9); /* fundo branco semi-transparente */
  color: #1a1a1a; /* texto escuro para contraste */
  font-size: 0.8rem;
  padding: 0.5rem 0.5rem; /* espaçamento interno */
  text-align: left;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.1); /* sombra sutil */
  min-width: 280px; /* largura mínima para legibilidade */
  max-width: 420px; /* largura máxima para evitar exagero */
  height: 15vh; /* altura fixa para consistência */
  display: flex;
  flex-direction: column;
  justify-content: center; /* centralizar verticalmente o conteúdo */
}

.info-box h3 {/* títulos das caixas de informação */
  font-family: serif;
  margin: 0 0 0rem 0; /* espaço abaixo do título */
  font-size: 0.9rem;
  font-weight: 800; /* mais negrito para melhor legibilidade */
  color: #1a1a1a;
}

.map-container {/* contêiner do mapa */
  position: fixed; /* fixo para permanecer visível ao rolar */
  top: 0;
  right: 0;
  width: 55%; /* inicia a partir da metade até a borda direita */
  height: 100vh; /* ocupar toda a altura da viewport */
  z-index: 2;
  overflow: hidden;
}

.map-container iframe {/* estilo do iframe do mapa */
  width: 100%; /* ocupar toda a largura do contêiner */
  height: 95.5%; /* ocupar toda a altura do contêiner */
  border: 0; /* remover borda padrão */
  display: block; /* remover espaços em branco indesejados */
}

@media (max-width: 519px) {/* estilos para dispositivos móveis */
  :root { --loc-footer-height: 2.5rem; }

  .localizacao-page { overflow: hidden; } /* evitar rolagem desnecessária */

  /* layout centralizado: container vertical que centra as informações e o mapa */
  .localizacao-container {
    display: flex;
    flex-direction: column;
    justify-content: center; /* centra verticalmente */
    align-items: center; /* centra horizontalmente */
    gap: 1.5rem; /* espaço entre as seções */
    padding: 0; /* remover padding lateral para permitir mapa full-width */
    height: 100vh; /* ocupar a altura da viewport */
  }

  /* informações ficam acima do mapa em fluxo normal (não absolutas) */
  .info-sections {
    position: static; /* volta ao fluxo para ficar acima do mapa */
    width: 100%;
    max-width: 500px; /* limitar a largura máxima */
    height: 200px; /* altura automática para acomodar o conteúdo */
    display: flex;
    flex-direction: column;
    gap: 0.4rem; /* espaço reduzido entre as caixas */
    margin-top: -9rem; /* ajustar posição para cima */
    margin-left: auto; /* centralizar horizontalmente */
    margin-right: auto; /* centralizar horizontalmente */
    align-items: center; /* ocupar toda a largura disponível */
    z-index: 2; /* acima do mapa */
    padding: 0 1rem; /* manter espaçamento interno */
  }

  .info-box {
    width: 100%; /* ocupar toda a largura do contêiner pai */
    max-width: 320px; /* limitar largura máxima */
    height: 40%; /* altura automática para melhor legibilidade */
    padding: 0.75rem; /* aumentar padding para melhor toque */
    margin: 0 auto; /* centralizar horizontalmente */
    justify-content: flex-start; /* alinhar conteúdo ao topo */
  }

  .info-box h3 {
    margin-bottom: 0.1rem; /* reduzir espaço abaixo do título */
  }

  .info-box p {
    margin-top: 0.5; /* remover espaço acima do parágrafo */
    margin-bottom: 1.2rem; /* reduzir espaço abaixo do parágrafo */
    line-height: 1; /* melhorar legibilidade */
  }

  /* mapa ocupa toda a largura da viewport e fica ancorado acima do footer */
  .map-container {
    position: fixed; /* fixar para alinhar com o footer */
    top: auto; /* garantir que não fique ancorado ao topo */
    left: 0;
    right: 0;
    bottom: var(--loc-footer-height); /* toca a borda superior do footer */
    width: 100%;
    height: 38vh; /* ocupar 1/3 da altura da tela no mobile */
    max-height: 320px; /* limite máximo da altura no mobile */
    z-index: 3;
  }

  .map-container iframe { height: 100%; width: 100%; display: block; } /* ocupar todo o contêiner */

  /* ajustar altura do footer no mobile para garantir alinhamento exato */
  .footer { height: var(--loc-footer-height); z-index: 5; }
}