/* ============================================================
   COMPONENT: WhatsApp Floating Button
   Visível em todas as seções (fixo)
   Respects iOS safe area bottom inset
   ============================================================ */

#wfloat {
  position: fixed;
  bottom: calc(28px + var(--safe-bottom));
  right: clamp(16px, 3vw, 28px);
  z-index: 9999;
  animation: whin .5s ease 2s both;
}

@keyframes whin {
  from { opacity: 0; transform: translateY(20px) scale(0.8); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.wbtn {
  width: 58px; height: 58px; background: var(--whatsapp); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; box-shadow: 0 6px 24px rgba(37,211,102,0.38);
  animation: wpulse 2.5s ease-in-out 2.5s infinite; transition: transform .2s;
  /* Exceeds 44px minimum — ideal for primary CTA */
}
.wbtn:hover { transform: scale(1.1); }

@media (hover: none) {
  .wbtn:hover { transform: none; }
  .wbtn:active { transform: scale(0.95); }
}

@keyframes wpulse {
  0%, 100% { box-shadow: 0 6px 24px rgba(37,211,102,0.38); }
  50%      { box-shadow: 0 6px 40px rgba(37,211,102,0.65); }
}

.wbtn svg { width: 30px; height: 30px; fill: #fff; }

.wtooltip {
  position: absolute; right: 68px; background: #111;
  border: 1px solid rgba(255,255,255,0.1); border-radius: 10px;
  padding: 8px 13px; font-size: 12px; font-weight: 500; color: #fff;
  white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translateX(8px);
  transition: opacity .2s, transform .2s; top: 50%; margin-top: -18px;
}

#wfloat:hover .wtooltip { opacity: 1; transform: translateX(0); }

/* ── Mobile: hide tooltip, keep button accessible ────────── */
@media (max-width: 768px) {
  .wtooltip { display: none; }
  #wfloat {
    bottom: calc(20px + var(--safe-bottom));
    right: 16px;
  }
  .wbtn {
    width: 54px;
    height: 54px;
  }
  .wbtn svg {
    width: 28px;
    height: 28px;
  }
}