/* Estilos comunes para los botones */
.btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Estilos para la posición fija del botón de volver arriba */
#back-to-top {
    justify-content: center;
    position: fixed;
    bottom: 120px;
    right: 20px;
    display: none; 
}

.btn-whatsapp {
    height: 50px;
    z-index: 10000;
    position: fixed;
    bottom: 60px;
    right: 20px;
    transition: right 0.5s ease, opacity 0.5s ease; /* Suavizamos la transición en la posición y la opacidad */
}

.whatsapp-button {
    display: flex;
    align-items: center;
}

/* Ocultamos el texto y ajustamos la posición */
.whatsapp-text {
    display: none;
    margin-left: 10px;
    opacity: 0; /* Inicia con opacidad cero */
    transition: opacity 0.5s ease; /* Suavizamos la transición de opacidad */
}

/* Al hacer hover, movemos el botón y mostramos el texto */
.whatsapp-button:hover {
    right: 80px; /* Desplazamos el botón a la izquierda */
}

.whatsapp-button:hover .whatsapp-text {
    display: inline-block; /* Mostramos el texto */
    opacity: 1; /* Aparece con opacidad 1 */
}