/* Custom scrollbar for webkit */
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: transparent;
        }
        ::-webkit-scrollbar-thumb {
            background-color: rgba(255, 255, 255, 0.3);
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background-color: rgba(255, 255, 255, 0.5);
        }
        
        /* Smooth scrolling for anchor links */
        html {
            scroll-behavior: smooth;
        }
        
        .glass-header {
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        }

        /* --- 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 */
}