/* ============================================
   PROVITA ANESTESIA — HOME FINAL
   Estilos das seções finais da Home:
   Onde Atuamos.
   CTA Faixa foi movido para pages.css para
   ficar disponível globalmente em todas as páginas.
   Mobile-first. Só variáveis de tokens.css.
   ============================================ */

/* ════════════════════════════════════════════
   HOME — ONDE ATUAMOS
   ════════════════════════════════════════════ */

.locais__grade {
  display: grid;
  gap: var(--esp-md);
  grid-template-columns: 1fr;
  list-style: none;
}

.local {
  background: var(--cor-branco);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  padding: var(--esp-md);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-xs);
  transition: var(--transicao);
}
.local:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-suave);
  border-color: transparent;
}

.local__icone {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--raio-sm);
  background: var(--cor-fundo-alt); color: var(--cor-verde-agua); flex-shrink: 0;
}

.local__nome { color: var(--cor-azul-profundo); font-size: 1.15rem; }

.local__cidade {
  color: var(--cor-texto-suave); font-size: var(--fs-caption);
  text-transform: uppercase; letter-spacing: 0.06em;
}

.atuacao-home__nota { margin-top: var(--esp-lg); text-align: center; }

@media (min-width: 640px) { .locais__grade { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px) { .locais__grade { grid-template-columns: repeat(4, 1fr); } }