/* Botón flotante de WhatsApp */
.boton-whatsapp {
  position: fixed; /* Mantiene el botón en la misma posición al hacer scroll */
  bottom: 120px; /* Distancia desde la parte inferior de la ventana */
  right: 15px; /* Distancia desde la parte derecha de la ventana */
  z-index: 1000; /* Asegura que el botón esté por encima de otros elementos */
  background-color: #25D366; /* Color oficial de WhatsApp */
  width: 55px; /* Ancho del botón */
  height: 55px; /* Altura del botón (para que sea circular junto con border-radius) */
  border-radius: 50%; /* Hace que el botón sea circular */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Sombra para darle profundidad */
  display: flex; /* Para centrar el icono de WhatsApp dentro del botón */
  justify-content: center; /* Centra horizontalmente el icono */
  align-items: center; /* Centra verticalmente el icono */
  cursor: pointer; /* Cambia el cursor a una mano al pasar por encima */
  transition: transform 0.3s ease, background-color 0.3s ease; /* Suaviza las transiciones al interactuar */
}

.boton-whatsapp:hover {
  transform: scale(1.1); /* Agranda ligeramente el botón al pasar el ratón */
  background-color: #1DA851; /* Color un poco más oscuro al pasar el ratón */
}

.boton-whatsapp img {
  width: 30px; /* Tamaño del icono de WhatsApp dentro del botón */
  height: auto; /* Mantiene la proporción del icono */
}

/* Media query para dispositivos móviles: AJUSTE DE POSICIÓN Y TAMAÑO EN MÓVILES */
@media (max-width: 768px) {
  .boton-whatsapp {
    right: 10px; /* Más cerca del borde derecho en móviles */
    width: 50px; /* Ligeramente más pequeño en móviles */
    height: 50px; /* Ligeramente más pequeño en móviles */
    bottom: 115px; /* Ajuste para no chocar con otros botones flotantes si los hay */
  }

  .boton-whatsapp img {
    width: 25px; /* Tamaño del icono de WhatsApp en móvil */
  }
}