/* Estilo para el contenedor de botones flotantes */
.floating-buttons {
  position: fixed; /* Posiciona el contenedor de manera fija en la pantalla */
  bottom: 20px; /* Distancia desde el fondo de la ventana */
  right: 20px; /* Distancia desde el lado derecho de la ventana */
  display: flex; /* Utiliza flexbox para alinear los botones */
  flex-direction: column; /* Alinea los botones en una columna */
  align-items: flex-end; /* Alinea los botones al final del contenedor */
  z-index: 3; /* Asegura que el contenedor esté por encima de otros elementos */
}

/* Estilo común para los botones de WhatsApp y de volver arriba */
.whatsapp-button,
.scroll-top-button {
  display: flex; /* Utiliza flexbox para centrar el contenido */
  justify-content: center; /* Centra horizontalmente el contenido */
  align-items: center; /* Centra verticalmente el contenido */
  width: 50px; /* Ancho del botón */
  height: 50px; /* Altura del botón */
  border-radius: 50%; /* Hace que el botón sea circular */
  margin-top: 10px; /* Espacio entre los botones */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* Sombra del botón */
  transition: transform 0.3s ease; /* Transición suave para el efecto de escala */
}

/* Estilo específico para el botón de WhatsApp */
.whatsapp-button {
  background-color: #25d366; /* Color de fondo de WhatsApp */
  color: white; /* Color del texto */
}

/* Estilo específico para el botón de volver arriba */
.scroll-top-button {
  background-color: var(--cafe-principal); /* Color de fondo definido por una variable CSS */
  color: white; /* Color del texto */
  opacity: 0; /* Inicialmente invisible */
  visibility: hidden; /* Inicialmente no visible */
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease; /* Transiciones para la visibilidad y la opacidad */
}

/* Clase para mostrar el botón de volver arriba */
.scroll-top-button.show {
  opacity: 1; /* Hace el botón visible */
  visibility: visible; /* Cambia la visibilidad a visible */
}

/* Efecto de hover para ambos botones */
.whatsapp-button:hover,
.scroll-top-button:hover {
  transform: scale(1.1); /* Aumenta el tamaño del botón al pasar el ratón */
}

/* Estilo para los iconos dentro de los botones */
.whatsapp-button svg,
.scroll-top-button svg {
  width: 24px; /* Ancho del icono */
  height: 24px; /* Altura del icono */
}