/* Contenedor principal pegado al lateral izquierdo*/ 
.menu-social-flotante {
  position: fixed;
 
right: 0;
 top: 50%;
  transform: translateY(-50%); /* Centra el menú verticalmente */
  z-index: 9999; /* Asegura que se muestre por encima de todo */
  display: flex;
  flex-direction: column;
}

/* Estilo base para cada botón */
.btn-social {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  width: 45px;
  height: 45px;
  color: #ffffff;
  transition: transform 0.3s ease, background-color 0.3s ease;
  border-radius: 8px 0 0 8px; /* Bordes redondeados ahora en el lado izquierdo */
  margin-bottom: 5px;
}


/* Efecto Hover: El icono se desliza hacia la izquierda */
.btn-social:hover {
  transform: translateX(-8px); /* Movimiento invertido hacia adentro de la pantalla */
}

/* Tamaño de los iconos */
.btn-social .icon {
  font-size: 22px;
}

/* Colores oficiales de cada red social */
.facebook { background-color: #1877F2; }
.instagram { background-color: #E1306C; }
.twitter { background-color: #0e76a8; }
.whatsapp { background-color: #25D366; }

/* Cambios de tono opcionales al hacer hover */
.facebook:hover { background-color: #145dbf; }
.instagram:hover { background-color: #b82354; }
.twitter:hover { background-color: #0e76a8; }
.whatsapp:hover { background-color: #1ebd58; }