/* ============================================================
   ONDE ESTAMOS — no original o mapa era um retângulo azul e os
   três telefones vinham num bloco sem rótulo nem link.
   ============================================================ */
.local__grid { display: grid; gap: clamp(28px, 4vw, 48px); align-items: start; }
@media (min-width: 900px) { .local__grid { grid-template-columns: 5fr 7fr; } }

.info { list-style: none; padding: 0; display: grid; gap: var(--sp-xl); }
.info__item { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-md); align-items: start; }
.info__icone {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  background: var(--c-vermelho); display: grid; place-items: center;
}
.info__icone .ico { width: 19px; height: 19px; color: var(--c-mostarda); }
.info__rotulo { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide);
                font-weight: 700; color: var(--c-texto-suave); margin-bottom: 2px; }
.info a { color: var(--c-tijolo); font-weight: 600; text-underline-offset: 3px; }
.info__linha { display: flex; align-items: center; min-height: var(--tap-min); }

.local .btn { margin-top: var(--sp-sm); }

/* Mapa incorporado do Google. loading="lazy" faz o iframe só
   carregar quando a seção se aproxima da viewport, então o peso
   dele não entra no primeiro carregamento da página. */
.mapa {
  position: relative;
  aspect-ratio: 367 / 315;          /* quadro-h.svg */
  clip-path: var(--shape-foto);     /* borda irregular, não retângulo */
  overflow: hidden;
  background: #E5F4FF;
}
.mapa iframe { width: 100%; height: 100%; border: 0; display: block; }