/* Estilos para el Botón Flotante de WhatsApp */
.whatsapp-float {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 1000;

  /* Diseño del botón */
  display: flex;
  align-items: center;
  background-color: #25D366; /* Color oficial de WhatsApp */
  color: #fff;
  padding: 10px 15px;
  border-radius: 50px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  
  /* Animación y texto */
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  transition: all 0.3s ease-in-out;
}

.whatsapp-float:hover {
  transform: scale(1.05); /* Agranda el botón al pasar el cursor */
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

.whatsapp-icon {
  font-size: 3rem; /* Tamaño del ícono */
  margin-right: 10px;
}

.whatsapp-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.whatsapp-text strong {
  font-weight: 700;
  font-size: 0.9rem;
}

.whatsapp-text small {
  font-size: 0.75rem;
  opacity: 0.9;
}

/* Ocultar el texto en pantallas muy pequeñas (móviles) para que solo se vea el ícono */
@media (max-width: 576px) {
  .whatsapp-text {
    display: none;
  }
  .whatsapp-float {
    padding: 12px; /* Ajuste de padding para el ícono solo */
  }
  .whatsapp-icon {
    margin-right: 0;
    font-size: 1.8rem;
  }
}