/* ============================================================
   ONDE ESTAMOS
   Foto da fachada à esquerda, mapa do perfil no Google à direita.
   Usada na home e, em versão reduzida, na página de contato.
   ============================================================ */
/* As duas metades entram de lados opostos. O deslocamento horizontal da
   animação precisa ser cortado aqui, senão empurra a página para fora da
   tela enquanto o bloco não assentou. */
#onde-estamos { overflow-x: clip; }

.onde {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2.5vw, 1.8rem);
  align-items: stretch;
}

.onde__foto {
  margin: 0; border-radius: 16px; overflow: hidden;
  background: var(--blue-50);
  /* clip no lugar de hidden: hidden cria contexto de rolagem e mataria
     qualquer sticky que venha a existir dentro da seção. */
  overflow: clip;
  min-height: 420px;
}
.onde__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.onde__lado { display: flex; flex-direction: column; gap: 1rem; min-height: 420px; }

.onde__mapa {
  flex: 1; border-radius: 16px; overflow: clip;
  border: 1px solid var(--line, #e3e8f2);
  min-height: 300px;
}
.onde__mapa iframe { width: 100%; height: 100%; min-height: 300px; border: 0; display: block; }

.onde__info {
  background: #fff; border: 1px solid var(--line, #e3e8f2);
  border-radius: 14px; padding: 1.1rem 1.3rem;
}
.onde__end { font-size: var(--step-0); line-height: 1.45; }
.onde__hora {
  margin-top: .5rem; font-family: var(--font-mono);
  font-size: .78rem; letter-spacing: .04em; color: var(--muted);
}

/* Tablet e celular: a foto vira faixa mais baixa e o mapa assume a altura. */
@media (max-width: 860px) {
  .onde { grid-template-columns: 1fr; }
  .onde__foto { min-height: 240px; }
  .onde__lado { min-height: 0; }
  .onde__mapa { min-height: 340px; }
}
@media (max-width: 480px) {
  .onde__foto { min-height: 200px; }
  .onde__mapa, .onde__mapa iframe { min-height: 300px; }
}