/* =============================================================================
   TAKA DESIGN — BOTÃO FLUTUANTE DO WHATSAPP
   -----------------------------------------------------------------------------
   Carregue por último (não pertence a nenhuma dobra). Em index.html o
   elemento fica FORA de <main> e de <footer>, direto em <body>: várias
   seções do site têm `isolation: isolate` (about/services/process/portfolio/
   cta-final/footer), e um `position: fixed` nascido DENTRO de uma delas fica
   preso na pilha de empilhamento daquela seção em vez de flutuar por cima de
   todo o resto da página. Como irmão de <main>/<footer>, ele sempre paint por
   cima.

   Cor do próprio Design System, não o verde oficial do WhatsApp: o MESMO
   degradê de .btn-neon (design-system.css: indigo-deep → violeta → rosa,
   com o mesmo `gradient-pan` e a mesma dupla camada de glow). Este é o botão
   de conversão mais visível do site — precisa ler como "a cor de ação da
   Taka", não como um widget de terceiro colado por cima. O ícone é só a
   forma reconhecível do glifo do WhatsApp, preenchida em branco.
   ============================================================================= */

.whatsapp-fab {
  position: fixed;
  right: clamp(1.125rem, 3vw, 2rem);
  bottom: clamp(1.125rem, 3vw, 2rem);
  z-index: 500;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(3.25rem, 6vw, 3.75rem);
  height: clamp(3.25rem, 6vw, 3.75rem);
  border-radius: 50%;
  isolation: isolate; /* o anel (::before) nasce ATRÁS do ícone, nunca por cima */

  color: #fff;
  background: linear-gradient(135deg, var(--ds-indigo-deep), var(--ds-violet) 55%, var(--ds-pink));
  background-size: 180% 180%;

  animation-name: gradient-pan, fab-rise;
  animation-duration: 7s, .9s;
  animation-timing-function: ease, var(--ds-ease);
  animation-iteration-count: infinite, 1;
  animation-fill-mode: none, both;
  animation-delay: 0s, 1.15s;

  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .16) inset,
    0 10px 30px -10px rgba(99, 102, 241, .85),
    0 0 40px -14px rgba(236, 72, 153, .9);
  transition: transform .35s var(--ds-ease-spring), box-shadow .35s var(--ds-ease);
}

.whatsapp-fab:hover,
.whatsapp-fab:focus-visible {
  transform: translateY(-3px) scale(1.05);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .26) inset,
    0 16px 42px -12px rgba(99, 102, 241, 1),
    0 0 62px -12px rgba(236, 72, 153, 1);
}
.whatsapp-fab:active { transform: translateY(0) scale(.96); }

.whatsapp-fab__icon {
  position: relative;
  z-index: 1;
  width: 54%;
  height: 54%;
  fill: currentColor;
}

/* O pulso — mesma construção do .pulse-dot do DS (crescer + esvanecer em
   loop), só dimensionado para um glow de botão inteiro, não um indicador de
   status de 8px. `pointer-events: none` para nunca roubar o clique do link. */
.whatsapp-fab__ring {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, var(--ds-indigo-deep), var(--ds-violet) 55%, var(--ds-pink));
  animation: fab-ping 2.4s cubic-bezier(0, 0, .2, 1) infinite;
}

@keyframes fab-ping {
  0%          { opacity: .6; transform: scale(1); }
  75%, 100%   { opacity: 0; transform: scale(1.7); }
}

@keyframes fab-rise {
  from { opacity: 0; transform: translateY(22px) scale(.9); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 539px) {
  .whatsapp-fab { right: .875rem; bottom: .875rem; }
}
