:root {
            --neon-pink: #ff007f;
            --neon-purple: #9c27b0;
            --neon-blue: #00e5ff;
            --dark-bg: #050507;
            --glass: rgba(255, 255, 255, 0.03);
            --glass-border: rgba(255, 255, 255, 0.1);
            --accent: var(--neon-blue);
            --glow-strength: 15px;
        }

        body.overdrive {
            --neon-blue: #00ff41; 
            --neon-pink: #ccff00;
            --neon-purple: #003b00;
            --dark-bg: #000500;
            --glow-strength: 30px;
        }

        * { box-sizing: border-box; cursor: none !important; -webkit-tap-highlight-color: transparent; }

        html { 
            scroll-behavior: smooth; 
        }

        body { 
            background: var(--dark-bg);
            background-image: 
                radial-gradient(at 0% 0%, rgba(156, 39, 176, 0.15) 0px, transparent 50%),
                radial-gradient(at 100% 0%, rgba(0, 229, 255, 0.15) 0px, transparent 50%),
                radial-gradient(at 50% 100%, rgba(255, 0, 127, 0.1) 0px, transparent 50%);
            background-attachment: fixed;
            color: white; 
            font-family: 'Inter', sans-serif; 
            margin: 0; 
            display: flex; 
            flex-direction: column;
            align-items: center;
            min-height: 100vh;
            overflow-x: hidden;
            transition: background 1s, color 1s;
        }

        body.xr-mode {
            --neon-blue: #7dff65;
            --neon-pink: #3df3ff;
            --neon-purple: #17311e;
            --glow-strength: 22px;
        }

        body.xr-mode::before {
            content: "";
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: -1;
            background:
                repeating-linear-gradient(
                    180deg,
                    rgba(125, 255, 101, 0.03) 0 2px,
                    rgba(61, 243, 255, 0.015) 2px 4px,
                    transparent 4px 10px
                );
            opacity: 0.7;
        }

        @keyframes xr-glitch {
            0%, 100% { transform: translate3d(0, 0, 0); }
            25% { transform: translate3d(1px, -1px, 0); }
            50% { transform: translate3d(-1px, 0, 0); }
            75% { transform: translate3d(1px, 1px, 0); }
        }

        body.xr-mode .nav-bar,
        body.xr-mode .signal-shell,
        body.xr-mode .lab-shell,
        body.xr-mode .about-shell,
        body.xr-mode .contact-shell,
        body.xr-mode .footer-inner,
        body.xr-mode .project-card {
            border-color: rgba(125, 255, 101, 0.22);
            box-shadow:
                0 0 0 1px rgba(61, 243, 255, 0.08) inset,
                0 0 28px rgba(125, 255, 101, 0.08);
        }

        body.xr-mode .section-title,
        body.xr-mode .signal-main-title,
        body.xr-mode .project-title,
        body.xr-mode .lab-console-title,
        body.xr-mode .about-title,
        body.xr-mode .contact-copy h3,
        body.xr-mode .footer-brand {
            text-shadow:
                -1px 0 rgba(61, 243, 255, 0.45),
                1px 0 rgba(125, 255, 101, 0.45),
                0 0 14px rgba(125, 255, 101, 0.18);
            animation: xr-glitch 2.8s steps(2, end) infinite;
        }

        body.xr-mode .lang-btn,
        body.xr-mode .lab-console-tab,
        body.xr-mode .footer-stamp,
        body.xr-mode .dock-link,
        body.xr-mode .project-meta-item {
            border-color: rgba(125, 255, 101, 0.28);
            box-shadow: 0 0 12px rgba(125, 255, 101, 0.08);
        }

        body.xr-mode .lang-btn.active,
        body.xr-mode .lab-console-tab.is-active,
        body.xr-mode .dock-link.active,
        body.xr-mode .footer-stamp:hover {
            background: rgba(125, 255, 101, 0.12);
            border-color: rgba(61, 243, 255, 0.55);
            box-shadow:
                0 0 18px rgba(61, 243, 255, 0.18),
                0 0 28px rgba(125, 255, 101, 0.1);
        }

        body.xr-mode .signal-label,
        body.xr-mode .project-tag,
        body.xr-mode .about-kicker,
        body.xr-mode .signal-kicker,
        body.xr-mode .lab-console-kicker {
            letter-spacing: 0.36em;
            color: #7dff65;
        }

        body.xr-mode .project-card {
            box-shadow:
                0 0 0 1px rgba(255,255,255,0.05) inset,
                0 0 20px rgba(255,255,255,0.03);
        }

        body.xr-mode .project-card .project-title,
        body.xr-mode .project-card .card-meta-label,
        body.xr-mode .project-card .card-meta-label::before,
        body.xr-mode .project-card .project-tag {
            text-shadow: none;
            animation: none;
        }

        body.xr-mode .project-card .project-tag {
            color: rgba(255,255,255,0.72);
        }

        body.shake { animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both; }
        @keyframes shake {
            10%, 90% { transform: translate3d(-1px, 0, 0); }
            20%, 80% { transform: translate3d(2px, 0, 0); }
            30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
            40%, 60% { transform: translate3d(4px, 0, 0); }
        }

        /* --- NAVIGÁCIÓ --- */
        .nav-bar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            padding: 15px 30px;
            display: grid;
            grid-template-columns: 1fr auto 1fr; 
            align-items: center;
            z-index: 1000;
            background: rgba(5, 5, 7, 0.6);
            backdrop-filter: blur(15px);
            border-bottom: 1px solid var(--glass-border);
        }

        .nav-spacer { display: block; }
        .nav-status {
            justify-self: start;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            min-height: 38px;
            padding: 0 14px;
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 999px;
            background: rgba(255,255,255,0.03);
            color: #aeb2c2;
            font-size: 0.64rem;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            font-weight: 700;
            white-space: nowrap;
        }
        .nav-status::before {
            content: "";
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--neon-blue);
            box-shadow: 0 0 14px var(--neon-blue);
            animation: pulse-dot 2.2s ease-in-out infinite;
        }
        .nav-status strong {
            color: #fff;
            font-weight: 800;
            letter-spacing: 0.22em;
        }

        .nav-links { 
            display: flex; 
            gap: 22px; 
            justify-content: center;
            flex-wrap: wrap;
        }

        .nav-links a { 
            text-decoration: none; 
            color: #888; 
            font-size: 0.7rem; 
            letter-spacing: 2px; 
            text-transform: uppercase; 
            transition: 0.3s;
            font-weight: 700;
        }
.nav-links a:hover { color: var(--neon-blue); text-shadow: 0 0 10px var(--neon-blue); }

.nav-toggle {
    display: none;
    appearance: none;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-direction: column;
    padding: 0;
    color: white;
}

.nav-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transition: transform 0.22s ease, opacity 0.22s ease;
}

.nav-bar.is-open .nav-toggle span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.nav-bar.is-open .nav-toggle span:nth-child(2) {
    opacity: 0;
}

.nav-bar.is-open .nav-toggle span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

.lang-switcher { 
    display: flex; 
    justify-content: flex-end; 
}

        /* --- CURSOR --- */
        #cursor {
            width: 22px; height: 22px;
            border: 2px solid var(--neon-blue);
            border-radius: 50%;
            position: fixed;
            pointer-events: none;
            z-index: 9999;
            top: 0; left: 0;
            will-change: transform;
            transform: translate3d(-50%, -50%, 0); 
            transition: width 0.2s, height 0.2s, border-color 0.2s, box-shadow 0.2s, opacity 0.3s;
            box-shadow: 0 0 var(--glow-strength) var(--neon-blue);
            opacity: 0;
        }

        .click-effect {
            position: fixed;
            border: 2px solid var(--neon-blue);
            border-radius: 50%;
            pointer-events: none;
            transform: translate(-50%, -50%);
            animation: click-ripple 0.6s ease-out forwards;
            z-index: 9998;
        }

        @keyframes click-ripple {
            0% { width: 0; height: 0; opacity: 1; border-width: 4px; }
            100% { width: 150px; height: 150px; opacity: 0; border-width: 1px; }
        }

        #particles { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

        .lang-btn { background: var(--glass); border: 1px solid var(--glass-border); color: #666; padding: 6px 12px; border-radius: 10px; font-size: 0.65rem; margin-left: 8px; transition: 0.4s; backdrop-filter: blur(10px); letter-spacing: 1px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
        .lang-btn.active { border-color: var(--neon-blue); color: white; background: rgba(0, 229, 255, 0.1); box-shadow: 0 0 10px rgba(0, 229, 255, 0.2); }
        .lang-flag { font-size: 0.9rem; line-height: 1; display: inline-flex; border-radius: 4px; overflow: hidden; }
        .lang-code { line-height: 1; }

        /* --- HERO --- */
        .hero { text-align: center; margin: 110px 0 122px 0; width: 100%; max-width: 800px; padding: 22px 20px 0; }
        .logo-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 0 20px 20px;
            margin-bottom: 20px;
            position: relative;
        }
        .main-logo { width: 100%; max-width: 560px; height: auto; animation: logo-glow 4s infinite alternate ease-in-out; transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); user-select: none; }
        .logo-hover-hint {
            opacity: 0;
            transform: translateY(4px);
            transition: opacity 0.25s ease, transform 0.25s ease;
            font-size: 0.58rem;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.32);
            text-shadow: 0 0 10px rgba(0, 229, 255, 0.16);
            pointer-events: none;
        }
        .logo-container:hover .logo-hover-hint {
            opacity: 1;
            transform: translateY(0);
        }
        .logo-mobile-pulse {
            display: none;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: rgba(0, 229, 255, 0.42);
            box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.32);
            animation: logo-mobile-pulse 2.6s ease-in-out infinite;
            pointer-events: none;
        }

        @keyframes logo-mobile-pulse {
            0%, 100% {
                transform: scale(0.88);
                opacity: 0.18;
                box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.18);
            }
            50% {
                transform: scale(1);
                opacity: 0.46;
                box-shadow: 0 0 0 10px rgba(0, 229, 255, 0);
            }
        }
        
        body.overdrive .main-logo { filter: drop-shadow(0 0 30px var(--neon-blue)) !important; transform: scale(1.1) rotate(2deg); }

        .logo-glitch { will-change: transform, filter; }
        
        @keyframes logo-glow {
            from { filter: drop-shadow(0 0 15px rgba(0, 229, 255, 0.15)); transform: scale(1); }
            to { filter: drop-shadow(0 0 30px rgba(156, 39, 176, 0.4)); transform: scale(1.02); }
        }

        @keyframes glitch {
            0% { transform: translate(0); }
            20% { transform: translate(-5px, 5px) skew(5deg); }
            40% { transform: translate(-5px, -5px) scale(1.1); }
            60% { transform: translate(5px, 5px) skew(-5deg); }
            80% { transform: translate(5px, -5px); }
            100% { transform: translate(0); }
        }

        #hero-text { color: #fff; max-width: 700px; margin: 12px auto 0; line-height: 1.6; font-weight: 300; letter-spacing: 1.5px; font-size: 1.1rem; text-shadow: 0 0 20px rgba(255, 255, 255, 0.1); transition: 0.5s; opacity: 0.9; text-transform: uppercase; }
        .hero-highlight { font-weight: 700; background: linear-gradient(90deg, var(--neon-blue), var(--neon-pink)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; }
        .i18n-fade { transition: opacity 0.24s ease, transform 0.24s ease; }
        .i18n-fade.switching { opacity: 0.35; transform: translateY(6px); }

        .scroll-indicator {
            margin-top: 60px;
            margin-bottom: 34px;
            font-size: 0.6rem;
            letter-spacing: 4px;
            color: #444;
            text-transform: uppercase;
            animation: pulse 2s infinite;
            transition: opacity 0.35s ease, transform 0.35s ease;
        }

        .scroll-indicator.is-hidden {
            opacity: 0;
            transform: translateY(-10px);
            pointer-events: none;
        }

        @keyframes pulse {
            0% { opacity: 0.3; transform: translateY(0); }
            50% { opacity: 1; transform: translateY(10px); }
            100% { opacity: 0.3; transform: translateY(0); }
        }

        /* --- GAME --- */
        #game-container {
            width: 100%;
            max-width: 700px;
            height: 0;
            overflow: hidden;
            transition: height 0.8s ease, margin 0.5s ease, opacity 0.5s ease;
            opacity: 0;
            margin: 0 auto;
        }

        body.overdrive #game-container {
            height: 350px;
            margin: 40px auto;
            opacity: 1;
        }

        #game-frame {
            width: 100%;
            height: 100%;
            border: 1px solid var(--neon-blue);
            border-radius: 15px;
            background: rgba(0, 255, 65, 0.02);
            box-shadow: 0 0 20px rgba(0, 255, 65, 0.1);
        }

        @keyframes pulse-dot {
            0%, 100% { opacity: 0.6; transform: scale(0.9); }
            50% { opacity: 1; transform: scale(1); }
        }