/* GENERAL */
.floating-buttons {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  pointer-events: none; /* Evita que el contenedor reciba clics */
}

.fab-container {
  position: relative;
  display: inline-block;
  pointer-events: auto; /* Permite que los botones reciban clics */
}

/* BOTÓN BASE */
.fab-button {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
}

.fab-button:hover {
  transform: scale(1.1); /* Aumenta el tamaño del botón al pasar el ratón */
}

/* ESTILOS INDIVIDUALES */
.main-fab {
  background-color: #0088cc; /* Azul original de Telegram */
  color: #ffffff; /* Icono blanco */
}

.main-fab:hover {
  background-color: #006a8c; /* Azul más oscuro para el hover */
}

.scroll-top-btn {
  margin-top: 15px;
  background-color: #eb593d; /* Rojo para el botón de "Scroll to top" */
  color: #ffffff;
  pointer-events: auto;
}

.fab-option {
  background-color: #ffffff;
  color: #3270aa;
  border: 2px solid #3270aa;
  font-size: 18px;
}

/* MENÚ DE REDES - OCULTO POR DEFECTO */
.fab-options {
  position: absolute;
  bottom: 70px;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
  transition: all 0.3s ease;
}

/* MENÚ VISIBLE */
.fab-options.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* OPACIDAD PARA EL BOTÓN DE TELEGRAM */
.fab-button .fa-telegram {
  font-size: 28px; /* Tamaño del ícono de Telegram */
}

.fab-button .fa-telegram:hover {
  color: #ffffff; /* Cambia el color del ícono cuando se pasa el ratón */
}