/* Estilos para el botón flotante de descarga de menú */
.bubble-download-menu {
    position: fixed;
    z-index: 9991; /* Encima de otros elementos */
    right: 20px;
    bottom: 39%; /* Ajuste de posición vertical */
    
    /* Forma y color */
    background: #f50000;
    color: #fff !important;
    border-radius: 50px; /* Bordes totalmente redondos */
    border: 2px solid #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
    
    /* Dimensiones iniciales (Círculo) */
    width: 60px;
    height: 60px;
    padding: 0; /* Sin padding extra para centrar bien */
    
    /* Tipografía */
    font-family: 'glaciallndifference', sans-serif;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    text-decoration: none;
    
    /* Flexbox para centrado */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Transiciones suaves */
    transition: width 0.4s ease, background-color 0.3s ease, transform 0.3s ease;
    overflow: hidden; /* Ocultar contenido desbordado al contraer */
    white-space: nowrap; /* Evitar saltos de línea */
}

/* Contenedor del texto para manejar la animación */
.bubble-download-menu .menu-content {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Texto "Descargar" (Oculto inicialmente) */
.bubble-download-menu .expand-text {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    margin-right: 0;
    transition: all 0.4s ease;
    font-size: 14px;
}

/* Texto "Menú" (Visible siempre) */
.bubble-download-menu .static-text {
    font-size: 14px; /* Tamaño legible */
}

/* Estados Interactivos (Hover, Active, Focus) */
.bubble-download-menu:hover,
.bubble-download-menu:active,
.bubble-download-menu:focus {
    width: 180px; /* Ancho expandido suficiente para todo el texto */
    background: #cc0000; /* Color ligeramente más oscuro */
    transform: scale(1.05); /* Pequeño efecto de zoom */
    justify-content: center;
}

.bubble-download-menu:hover .expand-text,
.bubble-download-menu:active .expand-text,
.bubble-download-menu:focus .expand-text {
    max-width: 100px; /* Ancho suficiente para "Descargar" */
    opacity: 1;
    margin-right: 5px; /* Espacio entre "Descargar" y "Menú" */
}

/* Estilos para el botón flotante de menú en inglés */
.bubble-download-menu-english {
    position: fixed;
    z-index: 9991;
    right: 20px;
    bottom: 30%; /* Debajo del menú principal */
    
    background: #f50000;
    color: #fff !important;
    border-radius: 50px;
    border: 2px solid #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
    
    width: 60px;
    height: 60px;
    padding: 0;
    
    font-family: 'glaciallndifference', sans-serif;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    text-decoration: none;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    transition: width 0.4s ease, background-color 0.3s ease, transform 0.3s ease;
    overflow: hidden;
    white-space: nowrap;
}

.bubble-download-menu-english .menu-content {
    display: flex;
    align-items: center;
    justify-content: center;
}

.bubble-download-menu-english .expand-text {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    margin-right: 0;
    transition: all 0.4s ease;
    font-size: 14px;
}

.bubble-download-menu-english .static-text {
    font-size: 14px;
}

.bubble-download-menu-english:hover,
.bubble-download-menu-english:active,
.bubble-download-menu-english:focus {
    width: 200px;
    background: #cc0000;
    transform: scale(1.05);
    justify-content: center;
}

.bubble-download-menu-english:hover .expand-text,
.bubble-download-menu-english:active .expand-text,
.bubble-download-menu-english:focus .expand-text {
    max-width: 120px;
    opacity: 1;
    margin-right: 5px;
}

/* Ajustes Responsive */
@media (max-width: 768px) {
    .bubble-download-menu {
        bottom: 42%; /* Ajuste fino para móviles */
        width: 55px; /* Ligeramente más pequeño en móvil */
        height: 55px;
        right: 22px;
        font-size: 13px;
    }

    .bubble-download-menu-english {
        bottom: 32%; /* Ajuste fino para móviles */
        width: 55px;
        height: 55px;
        right: 22px;
        font-size: 13px;
    }
    
    .bubble-download-menu:hover,
    .bubble-download-menu:active,
    .bubble-download-menu:focus {
        width: 170px;
    }

    .bubble-download-menu-english:hover,
    .bubble-download-menu-english:active,
    .bubble-download-menu-english:focus {
        width: 190px;
    }
}

@media (max-width: 425px) {
    .bubble-download-menu {
        bottom: 330px;
    }
    .bubble-download-menu-english {
        bottom: 260px;
    }
}