/* ==========================================================================
   WHATSAPP-FLOAT.CSS
   Botón flotante de contacto directo, visible en toda la página
   (excepto cuando el usuario ya está viendo el formulario de contacto,
   ver js/main.js).
   ========================================================================== */

.whatsapp-float {
  position: fixed;
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-whatsapp);
  box-shadow: 0 10px 24px -8px rgba(20, 33, 47, 0.45);
  transition: transform var(--transition-fast), opacity var(--transition-base);
}

.whatsapp-float:hover {
  transform: scale(1.06);
}

.whatsapp-float svg {
  width: 28px;
  height: 28px;
  color: #ffffff;
}

/* Estado oculto (aplicado por JS al intersectar con el formulario de
   contacto, para no duplicar el llamado a la acción) */
.whatsapp-float--hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.8);
}