/* Estilo general para los botones flotantes */
.fixed-bubble {
    position: fixed;
    left: 20px; /* Separación horizontal desde el borde izquierdo */
    z-index: 9999; /* Asegura que esté por encima de otros elementos */
    background-color: #ffffff;
    border-radius: 50%; /* Mantiene la forma redonda */
    width: 45px; /* Tamaño ajustado */
    height: 45px; /* Tamaño ajustado */
    padding: 6px; /* Tamaño del padding ajustado */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(8px); /* Fondo borroso para un toque moderno */
    cursor: pointer; /* Indica que es interactivo */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px; /* Espacio reducido entre los botones */
    transition: box-shadow 0.3s, transform 0.3s; /* Suavizar las transiciones */
}

/* Tamaño del icono dentro de los botones flotantes */
.fixed-bubble img {
    width: 28px; /* Tamaño ajustado para los íconos */
    height: 28px; /* Tamaño ajustado para los íconos */
}

/* Efecto de zoom al pasar el ratón */
.fixed-bubble:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* Sombras más pronunciadas */
    transform: scale(1.1); /* Efecto de zoom al pasar el mouse */
}

/* Estilo específico para el botón de Instagram */
#instagram-bubble {
    background-color: #9D4B96; /* Color para Instagram */
    top: 50%; /* Centramos en el eje vertical */
    transform: translateY(-50%); /* Centrado vertical */
}

/* Estilo específico para el botón de WhatsApp */
#whatsapp-bubble {
    background-color: #038A4F; /* Color para WhatsApp */
    top: 50%; /* Centramos en el eje vertical */
    transform: translateY(calc(-50% + 65px)); /* Separación más reducida */
}

/* Estilos para los enlaces dentro de los botones */
.fixed-bubble a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: white;
}

/* Ajustes para dispositivos móviles */
@media (max-width: 600px) {
    .fixed-bubble {
        width: 42px;
        height: 42px;
        padding: 5px;
    }

    .fixed-bubble img {
        width: 24px;
        height: 24px;
    }

    #instagram-bubble {
        top: 50%; /* Centra el botón de Instagram */
    }

    #whatsapp-bubble {
        top: 50%; /* Centra el botón de WhatsApp */
        transform: translateY(calc(-50% + 60px)); /* Ajuste de la separación para dispositivos móviles */
    }
}