/**
 * fachadas.css — a fachada do mapa (home e contato), par de shared/fachadas.js.
 *
 * Um desenho leve de ruas com o endereço e o botão "Ver mapa": nenhum recurso
 * do Google é baixado até o clique (o iframe nasce no JS). O botão nasce
 * `hidden` no HTML e o `[hidden]` abaixo vence o `display` do .btn — sem isso,
 * sem JS, ele apareceria prometendo um mapa que não viria.
 */
.mapa-fachada {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.65) 3px, transparent 3px) 0 0 / 96px 96px,
    linear-gradient(rgba(255,255,255,0.65) 3px, transparent 3px) 0 0 / 96px 96px,
    #e3e7df;
}
.mapa-fachada__capa {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 24px; text-align: center;
}
.mapa-fachada__pino {
  width: 56px; height: 56px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--verde-dark); color: var(--branco);
  box-shadow: 0 8px 24px rgba(54,61,78,0.25);
}
.mapa-fachada__pino svg { width: 28px; height: 28px; }
.mapa-fachada .mapa-fachada__endereco {
  margin: 0; padding: 6px 12px; border-radius: 8px;
  background: rgba(255,255,255,0.92); color: var(--azul);
  font-size: 0.9rem; font-weight: 600; line-height: 1.4; text-align: center !important;
}
.mapa-fachada__acoes { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.mapa-fachada .mapa-fachada__botao { background: var(--branco); min-height: 44px; }
.mapa-fachada .mapa-fachada__botao:hover { background: var(--azul); color: var(--branco); }
.mapa-fachada[data-mapa-ativo] .mapa-fachada__capa,
.mapa-fachada .mapa-fachada__botao[hidden] { display: none; }
.mapa-fachada__iframe {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%; border: 0; display: block;
}