/**
 * Mappa Imobiliário — Animações Sutis e Atraentes para Botões e Logomarca
 * Desenvolvido para máxima legibilidade e engajamento (inclusive clientes idosos).
 * 
 * Regras:
 * - Ciclos suaves (3.5s a 6s).
 * - Desempenho GPU (transform, opacity, box-shadow, background-position).
 * - Pulso externo via box-shadow (não cortado por overflow: hidden).
 * - Brilho interno ::before 100% contido via overflow: hidden e contain: paint.
 * - Suporte integral a prefers-reduced-motion.
 */

/* ==========================================================================
   1) KEYFRAMES CENTRAIS: PULSO VIA BOX-SHADOW & BRILHO CONTIDO LENTO
   ========================================================================== */

/* Pulso externo via box-shadow: expande para fora do botão sem ser cortado pelo overflow:hidden */
@keyframes mpaPulseBoxShadow {
  0% {
    box-shadow: 0 0 0 0 var(--mpa-cor, rgba(229, 46, 46, 0.85));
  }
  38% {
    box-shadow: 0 0 0 10px var(--mpa-cor-fade, rgba(229, 46, 46, 0));
  }
  100% {
    box-shadow: 0 0 0 10px var(--mpa-cor-fade, rgba(229, 46, 46, 0));
  }
}

/* Brilho diagonal interno lento: largura 55%, translateX em %, 100% contido no botão, ciclo de ~6.5s (passada lenta de ~2.7s) */
@keyframes mpaShineLento {
  0% {
    transform: translateX(-160%) skewX(-20deg);
    opacity: 0;
  }
  3% {
    opacity: 1;
  }
  42% {
    transform: translateX(280%) skewX(-20deg);
    opacity: 1;
  }
  43%, 100% {
    transform: translateX(280%) skewX(-20deg);
    opacity: 0;
  }
}

/* ==========================================================================
   2) BOTÕES ANIMADOS GERAIS (ESTRUTURA DE CONTENÇÃO E PULSO)
   ========================================================================== */
.mpa-btn-animado,
.mpa-pulso-vermelho,
.mpa-whats-btn,
.fab.fab-busca,
#abrir-busca,
.fab.fab-lista,
#abrir-lista,
#ver-resultados,
#limpar,
.popup-btn-ver,
.popup-btn-whats,
.btn-anuncie,
.caixa-preco .btn-whats,
.bwm-btn,
.card-btn-whats,
.btn-agendar-visita,
.btn-simular-cta,
.btn-fazer-proposta,
.btn-compartilhar-familia,
#compartilhar,
#btn-enviar-anuncio,
.seg-anuncie button.ativo,
.card-acoes a,
.card-acoes button {
  position: relative !important;
  overflow: hidden !important;
  contain: paint !important;
  isolation: isolate !important;
  will-change: transform, box-shadow;
  animation: mpaPulseBoxShadow 4s cubic-bezier(0.25, 1, 0.5, 1) infinite !important;
  animation-delay: var(--mpa-delay, 0s) !important;
}

/* Desativa pseudo-elementos ::after antigos que vazavam para fora */
.mpa-btn-animado::after,
.fab.fab-busca::after,
#abrir-busca::after,
.fab.fab-lista::after,
#abrir-lista::after,
#ver-resultados::after,
#limpar::after,
.popup-btn-ver::after,
.popup-btn-whats::after,
.btn-anuncie::after,
.mpa-whats-btn::after,
.caixa-preco .btn-whats::after,
.bwm-btn::after,
.card-btn-whats::after,
.btn-agendar-visita::after,
.btn-simular-cta::after,
.btn-fazer-proposta::after,
.btn-compartilhar-familia::after,
#compartilhar::after,
#btn-enviar-anuncio::after,
.seg-anuncie button::after {
  display: none !important;
  content: none !important;
}

/* Brilho diagonal lento: presente em TODOS os botões, 100% contido via overflow:hidden e contain:paint */
.mpa-btn-animado::before,
.mpa-pulso-vermelho::before,
.mpa-whats-btn::before,
.fab.fab-busca::before,
#abrir-busca::before,
.fab.fab-lista::before,
#abrir-lista::before,
#ver-resultados::before,
#limpar::before,
.popup-btn-ver::before,
.popup-btn-whats::before,
.btn-anuncie::before,
.caixa-preco .btn-whats::before,
.bwm-btn::before,
.card-btn-whats::before,
.btn-agendar-visita::before,
.btn-simular-cta::before,
.btn-fazer-proposta::before,
.btn-compartilhar-familia::before,
#compartilhar::before,
#btn-enviar-anuncio::before,
.seg-anuncie button.ativo::before,
.card-acoes a::before,
.card-acoes button::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 55% !important;
  height: 100% !important;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.15) 20%,
    rgba(255, 255, 255, 0.70) 50%,
    rgba(255, 255, 255, 0.15) 80%,
    rgba(255, 255, 255, 0) 100%
  ) !important;
  pointer-events: none !important;
  z-index: 1 !important;
  will-change: transform !important;
  transform: translateX(-160%) skewX(-20deg);
  animation: mpaShineLento 6.5s cubic-bezier(0.35, 0, 0.25, 1) infinite !important;
  animation-delay: var(--mpa-delay, 0s) !important;
}

/* Brilho com contraste aperfeiçoado para botões claros/brancos */
.fab.fab-lista::before,
#abrir-lista::before,
#limpar::before {
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(203, 213, 225, 0.25) 20%,
    rgba(255, 255, 255, 0.95) 50%,
    rgba(203, 213, 225, 0.25) 80%,
    rgba(255, 255, 255, 0) 100%
  ) !important;
}

/* Garante texto e ícones SVG acima do brilho */
.mpa-btn-animado > *,
.mpa-whats-btn > *,
.btn-anuncie > *,
.fab.fab-busca > *,
.fab.fab-lista > *,
#abrir-busca > *,
#abrir-lista > *,
#ver-resultados > *,
#limpar > *,
.bwm-btn > *,
.caixa-preco .btn-whats > *,
.seg-anuncie button > *,
.btn-agendar-visita > *,
.btn-simular-cta > *,
.btn-fazer-proposta > *,
.btn-compartilhar-familia > *,
#compartilhar > * {
  position: relative !important;
  z-index: 2 !important;
}

/* Cores locais de fallback antes da leitura do JS */
.fab.fab-busca,
#abrir-busca,
#ver-resultados,
.popup-btn-ver,
.btn-anuncie,
.btn-primario {
  --mpa-cor: rgba(229, 46, 46, 0.85);
  --mpa-cor-fade: rgba(229, 46, 46, 0);
  --mpa-delay: 0s;
}

.btn-anuncie {
  --mpa-cor: rgba(229, 46, 46, 0.65);
  --mpa-cor-fade: rgba(229, 46, 46, 0);
  --mpa-delay: 1.5s;
}

.mpa-whats-btn,
.caixa-preco .btn-whats,
.bwm-btn,
.card-btn-whats,
.popup-btn-whats,
#btn-enviar-anuncio {
  --mpa-cor: rgba(37, 211, 102, 0.85);
  --mpa-cor-fade: rgba(37, 211, 102, 0);
  --mpa-delay: 0s;
}

.fab.fab-lista,
#abrir-lista {
  --mpa-cor: rgba(148, 163, 184, 0.75);
  --mpa-cor-fade: rgba(148, 163, 184, 0);
  --mpa-delay: 2s; /* Alternado com Pesquisar: nunca juntos */
}

#limpar {
  --mpa-cor: rgba(148, 163, 184, 0.65);
  --mpa-cor-fade: rgba(148, 163, 184, 0);
  --mpa-delay: 1.2s;
}

/* ==========================================================================
   PADRONIZAÇÃO DOS BOTÕES DO RODAPÉ (MESMA ALTURA, ALINHAMENTO E TAMANHO ORIGINAL)
   ========================================================================== */
.fab.fab-busca,
.fab.fab-lista,
.fab-gps,
#abrir-busca,
#abrir-lista,
#centralizar-localizacao {
  height: 48px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.fab.fab-busca,
#abrir-busca {
  overflow: visible !important; /* Garante que o badge no canto superior direito não seja cortado */
}

.fab-gps,
#centralizar-localizacao {
  width: 48px;
  min-width: 48px;
  height: 48px;
  border-radius: 50%;
  padding: 0;
}

@media (max-width: 900px) {
  .fab-grupo .fab.fab-busca,
  .fab-grupo .fab.fab-lista,
  .fab-grupo .fab-gps,
  .fab-grupo #abrir-busca,
  .fab-grupo #abrir-lista,
  .fab-grupo #centralizar-localizacao {
    height: 44px;
    min-height: 44px;
  }
  .fab-grupo .fab-gps,
  .fab-grupo #centralizar-localizacao {
    width: 44px;
    min-width: 44px;
    height: 44px;
    border-radius: 50%;
  }
}

/* ==========================================================================
   3) ÍCONES ESPECÍFICOS: BALANÇO SUAVE E BATIMENTO DO CONTADOR
   ========================================================================== */

/* Ícone de lupa do Pesquisar */
.fab.fab-busca svg,
#abrir-busca svg {
  display: inline-block;
  animation: mpaIconWobble 4s ease-in-out infinite;
  will-change: transform;
  transform-origin: center center;
}

/* Ícone da lista */
.fab.fab-lista svg,
#abrir-lista svg {
  display: inline-block;
  animation: mpaIconWobble 4s ease-in-out infinite;
  animation-delay: 2s;
  will-change: transform;
  transform-origin: center center;
}

/* Batimento cardíaco no contador da lista (#qtd-lista) */
#qtd-lista {
  display: inline-block;
  animation: mpaHeartbeat 4s ease-in-out infinite;
  animation-delay: 2s;
  will-change: transform;
}

@keyframes mpaHeartbeat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.18); }
  22% { transform: scale(1.14); }
  30%, 100% { transform: scale(1); }
}

/* Contador do botão Pesquisar (#badge-filtros): pulso proporcional e uniforme de todo o conjunto (número + contorno) */
#badge-filtros,
#badge-lista,
.fab-badge,
.fab-busca .fab-badge,
.fab-badge#badge-filtros {
  display: inline-grid !important;
  place-items: center !important;
  transform-origin: center center !important;
  will-change: transform !important;
  animation: mpaBadgePesquisaPulso 3.2s cubic-bezier(0.25, 1, 0.5, 1) infinite !important;
  animation-delay: 0.6s !important;
  pointer-events: none !important;
}

@keyframes mpaBadgePesquisaPulso {
  0%, 100% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.26);
  }
  22% {
    transform: scale(1.10);
  }
  30% {
    transform: scale(1.20);
  }
  42%, 100% {
    transform: scale(1);
  }
}

@keyframes mpaIconWobble {
  0%, 75%, 100% { transform: rotate(0deg); }
  80% { transform: rotate(-8deg); }
  85% { transform: rotate(8deg); }
  90% { transform: rotate(-4deg); }
  95% { transform: rotate(0deg); }
}

/* Balanço do ícone do WhatsApp */
.mpa-whats-btn .mpa-whats-icon,
.mpa-whats-btn svg,
.caixa-preco .btn-whats svg,
.bwm-btn svg,
.card-btn-whats svg,
.popup-btn-whats svg,
#btn-enviar-anuncio svg {
  display: inline-block;
  animation: mpaWhatsWobble 5s ease-in-out infinite !important;
  animation-delay: 0s !important;
  will-change: transform;
  transform-origin: center center;
}

@keyframes mpaWhatsWobble {
  0%, 80%, 100% { transform: rotate(0deg); }
  83% { transform: rotate(-13deg); }
  86% { transform: rotate(11deg); }
  90% { transform: rotate(-6deg); }
  94% { transform: rotate(0deg); }
}

/* Botão de localização: estritamente SEM animação */
#btn-minha-localizacao,
.leaflet-control-locate,
.leaflet-control-locate a,
.leaflet-control-locate a::before,
.leaflet-control-locate a::after {
  animation: none !important;
  box-shadow: none !important;
}

/* ==========================================================================
   4) ABAS DO TOPO (Todos / Comprar / Alugar / Lotes): UM ÚNICO FUNDO VERMELHO
   Neutralização total de fundos sobrepostos em abas inativas
   ========================================================================== */
.topo-home .seg {
  position: relative !important;
  box-sizing: border-box !important;
}

/* TODAS as abas têm fundo transparente em todos os estados (:hover, :focus, etc.) */
.topo-home .seg button,
.topo-home .seg button:not(.ativo),
.topo-home .seg button.ativo,
.topo-home .seg button:hover,
.topo-home .seg button:not(.ativo):hover,
.topo-home .seg button:focus,
.topo-home .seg button:focus-visible,
.topo-home .seg button:active {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: none !important;
  animation: none !important;
}

/* O ÚNICO fundo visível em toda a barra é o indicador deslizante (glider vermelho) */
.mpa-seg-glider {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: #E52E2E !important;
  border-radius: 9999px;
  box-shadow: 0 3px 10px rgba(229, 46, 46, 0.35) !important;
  pointer-events: none;
  z-index: 1;
  transition: transform 300ms ease-out, width 300ms ease-out, height 300ms ease-out;
  will-change: transform, width;
}

/* Botões ficam acima do glider; cor do texto transiciona suavemente */
.topo-home .seg button {
  position: relative !important;
  z-index: 2 !important;
  transition: color 300ms ease-out !important;
}

.topo-home .seg button.ativo {
  color: #ffffff !important;
}

.topo-home .seg button:not(.ativo) {
  color: #475569 !important;
}

@media (hover: hover) and (pointer: fine) {
  .topo-home .seg button:not(.ativo):hover {
    color: #0F172A !important;
  }
}

/* Ocultar SOMENTE o primeiro separador antes de "Todos", mantendo os demais */
.topo-home .seg button:first-of-type::before,
.topo-home .seg > button:nth-of-type(1)::before {
  display: none !important;
  content: none !important;
}

/* ==========================================================================
   5) MODAL "ANUNCIE SEU IMÓVEL, LOTE OU TERRENO"
   Botões Quero Vender / Quero Alugar e Envio
   ========================================================================== */
.seg-anuncie {
  overflow: hidden !important;
  border-radius: 10px !important;
  border: 1px solid #CBD5E1 !important;
}

.seg-anuncie button {
  position: relative !important;
  overflow: hidden !important;
  contain: paint !important;
  isolation: isolate !important;
  transition: background-color 300ms ease-out, color 300ms ease-out, box-shadow 300ms ease-out !important;
  animation: mpaPulseBoxShadow 4s cubic-bezier(0.25, 1, 0.5, 1) infinite !important;
}

/* Botão ativo: vermelho com pulso vermelho e brilho lento */
.seg-anuncie button.ativo {
  background: #E52E2E !important;
  color: #ffffff !important;
  --mpa-cor: rgba(229, 46, 46, 0.85);
  --mpa-cor-fade: rgba(229, 46, 46, 0);
  --mpa-delay: 0s;
  z-index: 2;
}

/* Botão inativo: branco com pulso cinza suave alternado (delay 2s) */
.seg-anuncie button:not(.ativo) {
  background: #ffffff !important;
  color: #475569 !important;
  --mpa-cor: rgba(148, 163, 184, 0.65);
  --mpa-cor-fade: rgba(148, 163, 184, 0);
  --mpa-delay: 2s;
  z-index: 1;
}

/* Brilho lento exclusivo no botão ativo do anuncie */
.seg-anuncie button.ativo::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 55% !important;
  height: 100% !important;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.15) 20%,
    rgba(255, 255, 255, 0.70) 50%,
    rgba(255, 255, 255, 0.15) 80%,
    rgba(255, 255, 255, 0) 100%
  ) !important;
  pointer-events: none !important;
  transform: translateX(-160%) skewX(-20deg);
  animation: mpaShineLento 6.5s cubic-bezier(0.35, 0, 0.25, 1) infinite !important;
  z-index: 1 !important;
}

/* Botão de fechar (X) do modal anuncie: estritamente SEM animação */
#modal-anuncie-fechar,
.modal-anuncie-fechar,
#fechar-busca,
.modal-fechar {
  animation: none !important;
  box-shadow: none !important;
}
#modal-anuncie-fechar::before,
#modal-anuncie-fechar::after,
.modal-anuncie-fechar::before,
.modal-anuncie-fechar::after {
  display: none !important;
}

/* ==========================================================================
   6) ÍCONE DE MAPA NO TOPO DA PÁGINA DO IMÓVEL (.btn-mapa-topo) — MAIS VIVO
   ========================================================================== */
.btn-mapa-topo {
  position: relative !important;
  overflow: visible !important;
  --mpa-cor: rgba(148, 163, 184, 0.7);
  --mpa-cor-fade: rgba(148, 163, 184, 0);
  animation: mpaPulseBoxShadow 3.5s cubic-bezier(0.25, 1, 0.5, 1) infinite !important;
  animation-delay: 0.5s !important;
}

.btn-mapa-topo svg {
  display: inline-block;
  will-change: transform, color, stroke;
  transform-origin: bottom center;
  animation: mpaMapaIconePulos 3.5s cubic-bezier(0.25, 1, 0.5, 1) infinite !important;
  position: relative;
  z-index: 2;
}

@keyframes mpaMapaIconePulos {
  0%, 65%, 100% {
    transform: translateY(0) rotate(0deg);
    stroke: currentColor;
    color: inherit;
  }
  70% {
    transform: translateY(-4px) rotate(-6deg);
    stroke: #E52E2E;
    color: #E52E2E;
  }
  75% {
    transform: translateY(0) rotate(0deg);
    stroke: #E52E2E;
    color: #E52E2E;
  }
  80% {
    transform: translateY(-4px) rotate(6deg);
    stroke: #E52E2E;
    color: #E52E2E;
  }
  85% {
    transform: translateY(0) rotate(0deg);
    stroke: #E52E2E;
    color: #E52E2E;
  }
  92% {
    transform: translateY(0) rotate(0deg);
    stroke: currentColor;
    color: inherit;
  }
}

/* ==========================================================================
   7) LOGOMARCA MAPPA: QUEDA DO PIN, ONDA DE CHOQUE VERMELHA E BRILHO SUAVE
   - Zero sombra atrás de MAPPA (sem box-shadow, sem drop-shadow, sem blur)
   - Brilho suave contido 100% no container da logo (overflow: hidden no container)
   - Onda de choque vetorial vermelha (#F0442E) em elipse achatada no ponto de impacto
   ========================================================================== */
.topo a.logo,
header.topo .logo,
.topo-home .logo,
a.logo {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  overflow: visible !important;
  border-radius: 8px !important;
  padding: 2px 4px !important;
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  filter: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.topo a.logo:focus,
.topo a.logo:active,
.topo a.logo:focus-visible,
header.topo .logo:focus,
header.topo .logo:active,
header.topo .logo:focus-visible,
a.logo:focus,
a.logo:active,
a.logo:focus-visible {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Desativa pseudo-elementos legados na logo */
.topo a.logo::before,
.topo a.logo::after,
header.topo .logo::before,
header.topo .logo::after,
.topo-home .logo::before,
.topo-home .logo::after,
a.logo::before,
a.logo::after {
  display: none !important;
  content: none !important;
}

/* Queda e impacto do pin da logo em loop de 4.2s */
.topo a.logo .logo-icone,
header.topo .logo img,
a.logo img {
  display: block !important;
  animation: mpaLogoPinQueda 4.2s cubic-bezier(0.25, 1, 0.5, 1) infinite !important;
  will-change: transform;
  transform-origin: bottom center;
  position: relative !important;
  z-index: 1 !important;
  filter: none !important;
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

@keyframes mpaLogoPinQueda {
  0% { transform: translateY(-13px) scale(0.96, 1.04); }
  10% { transform: translateY(0) scale(1.08, 0.92); }
  16% { transform: translateY(-4px) scale(0.98, 1.02); }
  22% { transform: translateY(0) scale(1.02, 0.98); }
  28%, 100% { transform: translateY(0) scale(1, 1); }
}

/* 1. BRILHO SUAVE CONTIDO DENTRO DA ÁREA DA LOGO (overflow: hidden no container) */
.mpa-logo-brilho-container {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  border-radius: 8px !important;
  pointer-events: none !important;
  z-index: 3 !important;
}

.mpa-logo-brilho-faixa {
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 45% !important;
  height: 100% !important;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.22) 25%,
    rgba(255, 255, 255, 0.70) 50%,
    rgba(255, 255, 255, 0.22) 75%,
    rgba(255, 255, 255, 0) 100%
  ) !important;
  transform: translateX(-160%) skewX(-20deg) !important;
  animation: mpaLogoShinePassada 4.2s cubic-bezier(0.35, 0, 0.25, 1) infinite !important;
  pointer-events: none !important;
}

@keyframes mpaLogoShinePassada {
  0% { transform: translateX(-160%) skewX(-20deg); }
  28% { transform: translateX(330%) skewX(-20deg); }
  100% { transform: translateX(330%) skewX(-20deg); }
}

/* 2. ONDA DE CHOQUE VERMELHA VETORIAL LENTA (SVG, perspectiva de chão, 2 anéis) */
.mpa-pin-container {
  position: absolute !important;
  top: 0;
  left: 4px;
  width: 26px;
  height: 100%;
  pointer-events: none !important;
  z-index: 0 !important;
}

@media (min-width: 768px) {
  .mpa-pin-container {
    left: 5px;
    width: 30px;
  }
}

.mpa-onda-svg {
  position: absolute !important;
  left: 50% !important; /* Centralizado exclusivamente e com precisão absoluta na ponta inferior do pino */
  bottom: -2px !important;
  transform: translateX(-50%) translateY(50%) !important;
  width: 44px !important;
  height: 18px !important;
  overflow: visible !important;
  pointer-events: none !important;
  z-index: 0 !important;
  filter: none !important;
}

@media (min-width: 768px) {
  .mpa-onda-svg {
    width: 52px !important;
    height: 20px !important;
    bottom: -1px !important;
  }
}

.mpa-anel {
  transform-origin: 30px 12px !important;
  vector-effect: non-scaling-stroke !important;
  fill: none !important;
  stroke: #F0442E !important;
  filter: none !important;
}

.mpa-anel-1 {
  stroke-width: 2.2 !important;
  animation: mpaOndaExpande1 4.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite !important;
}

.mpa-anel-2 {
  stroke-width: 1.8 !important;
  animation: mpaOndaExpande2 4.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite !important;
}

@keyframes mpaOndaExpande1 {
  0%, 9.9% {
    opacity: 0;
    transform: scale(0.25);
  }
  10% {
    opacity: 0.90;
    transform: scale(0.3);
  }
  22% {
    opacity: 0.75;
    transform: scale(1.0);
  }
  36% {
    opacity: 0.45;
    transform: scale(1.7);
  }
  52% {
    opacity: 0;
    transform: scale(2.6);
  }
  52.1%, 100% {
    opacity: 0;
    transform: scale(0.25);
  }
}

@keyframes mpaOndaExpande2 {
  0%, 15.9% {
    opacity: 0;
    transform: scale(0.25);
  }
  16% {
    opacity: 0.80;
    transform: scale(0.3);
  }
  28% {
    opacity: 0.60;
    transform: scale(0.95);
  }
  42% {
    opacity: 0.35;
    transform: scale(1.6);
  }
  58% {
    opacity: 0;
    transform: scale(2.4);
  }
  58.1%, 100% {
    opacity: 0;
    transform: scale(0.25);
  }
}

/* ==========================================================================
   8) ATALHOS DE REGIÕES: BOTÕES E PULSO DA SETA ">"
   ========================================================================== */
.chip-zona {
  position: relative !important;
  overflow: hidden !important;
  contain: paint !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
  will-change: transform, box-shadow !important;
}

/* Botão ativo de região ("Toda Teresina"): pulso vermelho contínuo + brilho */
.chip-zona.ativo {
  --mpa-pulso-cor: rgba(229, 46, 46, 0.45);
  animation: mpaPulseBoxShadow 3.5s cubic-bezier(0.25, 1, 0.5, 1) infinite !important;
}

.chip-zona.ativo::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 55% !important;
  height: 100% !important;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.20) 25%,
    rgba(255, 255, 255, 0.70) 50%,
    rgba(255, 255, 255, 0.20) 75%,
    rgba(255, 255, 255, 0) 100%
  ) !important;
  transform: translateX(-160%) skewX(-20deg) !important;
  animation: mpaShineLento 6s cubic-bezier(0.35, 0, 0.25, 1) infinite !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Botões inativos de região ("Zona Leste", "Condomínios", etc.): brilho suave periódico */
.chip-zona:not(.ativo)::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 50% !important;
  height: 100% !important;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0) 100%
  ) !important;
  transform: translateX(-160%) skewX(-20deg) !important;
  animation: mpaShineLento 7.5s cubic-bezier(0.35, 0, 0.25, 1) infinite !important;
  animation-delay: 2s !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
   ========================================================================== */
.seta-scroll-chips.seta-dir:not(.mpa-parar-pulso),
#seta-chips-dir:not(.mpa-parar-pulso) {
  animation: mpaSetaPulse 3s ease-in-out infinite;
  will-change: transform, box-shadow;
}

@keyframes mpaSetaPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12); }
  50% { transform: scale(1.14); box-shadow: 0 4px 14px rgba(229, 46, 46, 0.35); }
}

.seta-scroll-chips.seta-dir.mpa-parar-pulso,
#seta-chips-dir.mpa-parar-pulso {
  animation: none !important;
}

/* ==========================================================================
   9) REMOÇÃO DO BOTÃO FLUTUANTE NA TELA PRINCIPAL DO MAPA
   ========================================================================== */
body.home #whats-flutuante,
body.home .whats-flutuante {
  display: none !important;
}

/* ==========================================================================
   10) PREÇO NA BARRA INFERIOR DA PÁGINA DO IMÓVEL (TEXTO E RITMO LENTO 6s)
   ========================================================================== */
.bwm-preco,
.mpa-preco-barra {
  position: relative;
  display: inline-block;
  transform-origin: left center;
  will-change: transform;
  animation: mpaPrecoEscala 6s ease-in-out infinite;
}

@keyframes mpaPrecoEscala {
  0% { transform: scale(1); }
  18% { transform: scale(1.05); }
  36%, 100% { transform: scale(1); }
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .bwm-preco,
  .mpa-preco-barra {
    background: linear-gradient(
      90deg,
      #0F172A 0%,
      #0F172A 28%,
      #E52E2E 42%,
      #FFFFFF 50%,
      #E52E2E 58%,
      #0F172A 72%,
      #0F172A 100%
    );
    background-size: 260% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: mpaPrecoEscala 6s ease-in-out infinite,
               mpaPrecoShineTexto 6s ease-in-out infinite;
  }

  @keyframes mpaPrecoShineTexto {
    0% { background-position: 100% 0; }
    36% { background-position: 0% 0; }
    100% { background-position: 0% 0; }
  }
}

.bwm-rotulo {
  display: inline-block;
  animation: mpaRotuloFade 6s ease-in-out infinite;
  will-change: opacity;
}

@keyframes mpaRotuloFade {
  0%, 100% { opacity: 0.65; }
  18% { opacity: 1; }
  36% { opacity: 0.65; }
}

/* ==========================================================================
   PADRONIZAÇÃO DOS BOTÕES DO RODAPÉ (Contato, Política de Privacidade, Preferências de Cookies)
   ========================================================================== */
.mappa-cookies-rodape-links a,
.mappa-cookies-rodape-links button,
.mappa-cookies-link-rodape {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #475569 !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  background: transparent !important;
  border: none !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  font-family: inherit !important;
  transition: color 200ms ease, background-color 200ms ease, box-shadow 300ms ease, transform 200ms ease !important;
  animation: mpaPulseBoxShadow 4s cubic-bezier(0.25, 1, 0.5, 1) infinite !important;
  animation-delay: 0s !important;
  will-change: box-shadow, transform !important;
  --mpa-cor: rgba(71, 85, 105, 0.85);
  --mpa-cor-fade: rgba(71, 85, 105, 0);
  --mpa-delay: 0s;
}

.mappa-cookies-rodape-links a:hover,
.mappa-cookies-rodape-links button:hover,
.mappa-cookies-link-rodape:hover {
  color: #0F172A !important;
  background-color: rgba(241, 245, 249, 0.8) !important;
  text-decoration: none !important;
  transform: translateY(-1px) !important;
}

/* ==========================================================================
   DESBLOQUEIO DE CAMADAS E CONTEXTOS DE EMPILHAMENTO
   ========================================================================== */
.mpa-btn-animado::before,
.mpa-btn-animado::after,
.mpa-pulso-vermelho::before,
.mpa-pulso-vermelho::after,
.mpa-whats-btn::before,
.mpa-whats-btn::after,
.mpa-logo-brilho-container,
.mpa-logo-brilho-faixa,
.mpa-pin-container,
.mpa-onda-svg,
.chip-zona::before,
.chip-zona::after,
.seg-anuncie button::before,
.seg-anuncie button::after {
  pointer-events: none !important;
}

.painel-busca.aberto,
.painel-lista.aberto {
  pointer-events: auto !important;
}

/* ==========================================================================
   ACESSIBILIDADE: PREFERS-REDUCED-MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .mpa-btn-animado,
  .mpa-btn-animado::before,
  #badge-filtros,
  .btn-mapa-topo,
  .btn-mapa-topo svg,
  .topo a.logo::before,
  .topo a.logo::after,
  .topo a.logo .logo-icone {
    animation: none !important;
    box-shadow: none !important;
  }
}

/* Mantém o contador de Pesquisar alinhado ao texto sem interromper o pulso. */
#abrir-busca #badge-filtros {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  flex: 0 0 auto !important;
  align-self: center !important;
}