/* ─────────────────────────────────────────────
   whatsapp.css — Balão flutuante do WhatsApp
   O HTML (<a class="wa-float">) fica no fim do <body> de cada página.
───────────────────────────────────────────── */

/* Canto inferior direito, respeitando o recorte de celulares (notch) */
.wa-float {
  position: fixed;
  right: calc(20px + env(safe-area-inset-right));
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 60;
  display: flex; align-items: center; gap: 12px;
  text-decoration: none;
  animation: wa-in .6s .8s both;           /* entra 0,8s após abrir a página */
}

/* Círculo verde (cor oficial do WhatsApp) */
.wa-btn {
  position: relative; width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center;
  background: #25d366; color: #fff;
  box-shadow: 0 12px 30px -10px rgba(37,211,102,.45);
  transition: transform .3s, box-shadow .3s;
}
/* Onda pulsando atrás do botão */
.wa-btn::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: #25d366; opacity: .5; z-index: -1;
  animation: wa-pulse 2.6s ease-out infinite;
}
.wa-btn svg { width: 30px; height: 30px; fill: currentColor; transition: transform .3s; }

/* Balãozinho "Fale com a gente" — no tema escuro da LinckDev */
.wa-tip {
  padding: 9px 14px;
  background: var(--bg-surface, #12121A); color: var(--text-primary, #F0EEF8);
  border: 1px solid var(--border-default, rgba(255,255,255,.10));
  border-radius: var(--radius-sm, 6px);
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.6);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  text-transform: uppercase; letter-spacing: .18em; font-size: .62rem; white-space: nowrap;
  opacity: 0; transform: translateX(8px); pointer-events: none; transition: .3s;
}

/* Hover / foco pelo teclado */
.wa-float:hover .wa-btn,
.wa-float:focus-visible .wa-btn { transform: scale(1.08); box-shadow: 0 16px 36px -10px rgba(37,211,102,.6); }
.wa-float:hover .wa-btn svg { transform: rotate(-10deg); }
.wa-float:hover .wa-tip,
.wa-float:focus-visible .wa-tip { opacity: 1; transform: none; }
.wa-float:focus-visible { outline: 0; }
.wa-float:focus-visible .wa-btn { outline: 2px solid var(--color-orange, #FF6B35); outline-offset: 3px; }

/* Animações */
@keyframes wa-pulse { 0% { transform: scale(1); opacity: .5; } 70%, 100% { transform: scale(1.6); opacity: 0; } }
@keyframes wa-in { from { opacity: 0; transform: translateY(20px) scale(.8); } to { opacity: 1; transform: none; } }

/* Celular: um pouco menor e sem o balãozinho de texto */
@media (max-width: 640px) {
  .wa-float { right: calc(16px + env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); }
  .wa-btn { width: 54px; height: 54px; }
  .wa-btn svg { width: 27px; height: 27px; }
  .wa-tip { display: none; }
}

/* Quem prefere menos movimento não vê animações */
@media (prefers-reduced-motion: reduce) {
  .wa-float, .wa-btn::before { animation: none; }
}