/* assets/css/whatsapp.css - BOTÓN FLOTANTE CORREGIDO */

.whatsapp-float {
  position: fixed;
  bottom: 30px; /* Separación del borde inferior */
  left: 30px;   /* Separación del borde izquierdo */
  z-index: 10000; /* ¡MUY IMPORTANTE! Encima de todo (header, footer, slider) */
  
  width: 60px;  /* Ancho fijo para que no se explote */
  height: 60px; /* Alto fijo */
  
  background-color: #25d366; /* Color verde WhatsApp */
  border-radius: 50%;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Sombra para que flote */
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  cursor: pointer;
  transition: all 0.3s ease;
  animation: bounceIn 1s ease; /* Pequeña entrada animada */
}

/* El icono SVG dentro del botón */
.whatsapp-float img {
  width: 35px !important; /* Tamaño del icono dentro del círculo */
  height: 35px !important;
  object-fit: contain;
  display: block;
}

/* Efecto Hover */
.whatsapp-float:hover {
  transform: scale(1.1) translateY(-5px); /* Crece y sube un poco */
  box-shadow: 0 8px 25px rgba(37, 211, 102, 0.6); /* Resplandor verde */
}

/* Opcional: Un punto rojo de notificación */
.whatsapp-float::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 15px;
  height: 15px;
  background-color: red;
  border-radius: 50%;
  border: 2px solid white;
}

/* Animación de entrada */
@keyframes bounceIn {
  0% { opacity: 0; transform: scale(0.3) translateY(100px); }
  50% { opacity: 1; transform: scale(1.05); }
  70% { transform: scale(0.9); }
  100% { transform: scale(1); }
}

/* Ajuste para Móviles */
@media (max-width: 768px) {
  .whatsapp-float {
    width: 55px;
    height: 55px;
    bottom: 20px;
    left: 20px;
  }
  .whatsapp-float img {
    width: 30px !important;
    height: 30px !important;
  }
}