/* Custom styles for specific requested fonts behavior */
        .glass-nav {
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.3);
        }
        
        /* Smooth accordion transition */
        details > summary {
            list-style: none;
        }
        details > summary::-webkit-details-marker {
            display: none;
        }
        details[open] summary ~ * {
            animation: sweep .3s ease-in-out;
        }
        @keyframes sweep {
            0%    {opacity: 0; transform: translateY(-10px)}
            100%  {opacity: 1; transform: translateY(0)}
        }

        /* --- EFECTO DORADO PARA EL MENÚ FULLSCREEN --- */

/* Estilo base para los círculos del menú (opcional si ya los tienes, para asegurar la transición) */
#fullscreen-menu .flex-shrink-0 {
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Efecto HOVER: Cambia el fondo del círculo a dorado y el texto a dorado */
#fullscreen-menu a:hover .flex-shrink-0 {
    background-color: #d4af37 !important; /* Dorado */
    border-color: #d4af37 !important;
    transform: scale(1.05); /* Un pequeño aumento visual */
}

#fullscreen-menu a:hover span {
    color: #d4af37 !important; /* Texto dorado */
}

/* Si usas iconos de Material Symbols, forzar el color dentro del círculo */
#fullscreen-menu a:hover .material-symbols-outlined {
    color: #d4af37 !important; /* El icono se mantiene blanco sobre el fondo dorado */
}

/* Ajuste para Modo Oscuro en el menú de Apps */
html.dark #fullscreen-menu a:hover .flex-shrink-0 {
    background-color: #8f6d32 !important; /* Dorado más oscuro para modo dark */
}