/* ========================================
   WhatsApp Floating Button — Professional design
   ======================================== */

.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
   z-index: 1100;
  padding-inline-start: env(safe-area-inset-left);
  padding-inline-end: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

/* Hidden while the mobile nav drawer is open — it sits above the navbar and
   would otherwise float over the menu and swallow taps */
body.nav-open .whatsapp-float {
  opacity: 0;
  visibility: hidden;
}

@keyframes wa-bounce-in {
  0% { transform: scale(0.2); opacity: 0; }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes wa-pulse {
  0%, 100% { box-shadow: 0 4px 24px 0 rgba(7, 94, 84, 0.24); }
  50% { box-shadow: 0 8px 32px 0 rgba(7, 94, 84, 0.40); }
}

.whatsapp-float__link {
  --s: 60px;
  --icon-size: 32px;
  position: absolute;
  z-index: 2;
  bottom: 8px;
  right: 8px;
  height: var(--s);
  width: var(--s);
  background: linear-gradient(135deg, var(--color-whatsapp), var(--color-whatsapp-dark));
  border-radius: 50%;
  box-shadow: 0 6px 28px 0 rgba(37, 211, 102, 0.32);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  outline: none;
  animation: wa-bounce-in 0.5s ease-out 0.3s both;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.whatsapp-float__link:hover {
  transform: scale(1.08);
  box-shadow: 0 12px 36px 0 rgba(37, 211, 102, 0.40);
  animation-play-state: paused;
}

.whatsapp-float__link:active {
  transform: scale(0.92);
  transition: transform 0.1s ease;
}

.whatsapp-float__icon {
  width: var(--icon-size);
  height: var(--icon-size);
  color: var(--color-text-light);
  flex-shrink: 0;
  pointer-events: none;
}

/* Tooltip — only on devices that support hover with mouse */
@media (hover: hover) and (pointer: fine) {
  .whatsapp-float__link::after {
    content: '¡Hablemos por WhatsApp!';
    position: absolute;
    right: 76px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--color-dark);
    color: var(--color-text-light);
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, right 0.3s ease;
    z-index: -1;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  }

  .whatsapp-float__link::before {
    content: '';
    position: absolute;
    right: 64px;
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-right-color: var(--color-dark);
    opacity: 0;
    transition: opacity 0.3s ease, right 0.3s ease;
  }

  .whatsapp-float__link:hover::after,
  .whatsapp-float__link:hover::before {
    opacity: 1;
    right: 74px;
  }
}

/* Mobile phones (≤ 480px) */
@media (max-width: 480px) {
  .whatsapp-float {
    bottom: env(safe-area-inset-bottom, 16px);
    right: env(safe-area-inset-right, 16px);
  }

  .whatsapp-float__link {
    --s: 56px;
    --icon-size: 28px;
    bottom: 4px;
    right: 4px;
  }
}

/* Ultra small phones (≤ 360px) */
@media (max-width: 360px) {
  .whatsapp-float__link {
    --s: 52px;
    --icon-size: 26px;
    bottom: 3px;
    right: 3px;
  }
}

/* Tablets (768px - 1024px): slightly larger for touch */
@media (min-width: 768px) and (max-width: 1024px) {
  .whatsapp-float__link {
    --s: 64px;
    --icon-size: 34px;
  }
}

/* Accessibility: reduced motion */
@media (prefers-reduced-motion: reduce) {
  .whatsapp-float__link {
    animation: none;
    transition: none;
    transform: none;
  }

  .whatsapp-float__link:hover {
    transform: none;
    box-shadow: 0 4px 24px 0 rgba(7, 94, 84, 0.24);
  }
}