/* =============================================================
   MAPA — seção "Onde estamos" (página Contato)
   Embed do Google Maps sem chave de API: basta `output=embed` na URL.
   O minimapa do rodapé usa a mesma técnica (ver 11-rodape.css).
   ============================================================= */

.map-wrap { display: grid; grid-template-columns: 1fr 1.35fr; gap: clamp(1.4rem, 3vw, 2.2rem); align-items: stretch; }

.map-info {
  display: flex; flex-direction: column; gap: 1.15rem;
  background: rgba(224,242,253,.6);
  backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: var(--r-lg);
  padding: clamp(1.4rem, 3vw, 2rem);
  box-shadow: 0 14px 36px rgba(6,40,74,.18);
}
.map-info h3 { color: var(--c-navy); margin-bottom: .1rem; }
.map-info__row { display: flex; gap: .8rem; align-items: flex-start; }
.map-info__row svg { width: 22px; height: 22px; color: var(--c-blue-600); flex: 0 0 auto; margin-top: 2px; }
.map-info__row b { font-family: 'Outfit', sans-serif; color: var(--ink); display: block; line-height: 1.25; }
.map-info__row span { color: var(--muted); font-size: .93rem; }
.map-info__row a { color: var(--c-blue-700); font-weight: 600; }
.map-info .btn { margin-top: .4rem; }

.map-embed {
  position: relative; min-height: 340px;
  border-radius: var(--r-lg); overflow: hidden;
  border: 3px solid rgba(255,255,255,.65);
  box-shadow: var(--shadow-lg);
  background: #cfe6f5;            /* cor de espera enquanto o mapa carrega */
}
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 820px) {
  .map-wrap { grid-template-columns: 1fr; }
  .map-embed { min-height: 0; aspect-ratio: 4 / 3; }
}