:root {
            --primary: #6366f1;
            --secondary: #8b5cf6;
            --accent: #06b6d4;
            --dark: #0a0a0f;
            --darker: #050508;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Century Gothic', 'CenturyGothic', 'AppleGothic', sans-serif;
            /* Fallback stack por si no carga */
            font-family: 'Century Gothic', 'Didact Gothic', 'Montserrat', 'Apple Gothic', 'URW Gothic L', 'Avant Garde', Futura, sans-serif;
            background-color: var(--darker);
            color: white;
            overflow-x: hidden;
            cursor: none;
            font-weight: 400;
            letter-spacing: 0.02em; /* Century Gothic se ve mejor con un poco de espaciado */
        }
        
        /* Para títulos grandes - Century Gothic se ve espectacular */
        .font-display {
            font-family: 'Century Gothic', 'CenturyGothic', 'AppleGothic', sans-serif;
            font-weight: 700;
            letter-spacing: -0.02em; /* Títulos más compactos */
        }
        
        /* Para textos especiales que necesiten más peso */
        .font-bold-gothic {
            font-family: 'Century Gothic', sans-serif;
            font-weight: 700;
        }
        /* Custom Cursor */
        .cursor {
            width: 20px;
            height: 20px;
            border: 2px solid var(--accent);
            border-radius: 50%;
            position: fixed;
            pointer-events: none;
            z-index: 9999;
            transition: transform 0.1s;
            mix-blend-mode: difference;
        }
        
        .cursor-follower {
            width: 40px;
            height: 40px;
            background: radial-gradient(circle, rgba(6,182,212,0.3) 0%, transparent 70%);
            border-radius: 50%;
            position: fixed;
            pointer-events: none;
            z-index: 9998;
            transition: transform 0.3s ease-out;
        }
        
        .cursor.hover {
            transform: scale(2);
            background: rgba(6,182,212,0.1);
        }

        /* Scroll Progress */
        .scroll-progress {
            position: fixed;
            top: 0;
            left: 0;
            width: 0%;
            height: 2px;
            background: linear-gradient(90deg, var(--accent), var(--secondary));
            z-index: 10000;
            transition: width 0.1s;
        }
        
        /* Navigation */
        .nav-hidden {
            transform: translateY(-100%);
            opacity: 0;
        }
        
        .nav-visible {
            transform: translateY(0);
            opacity: 1;
        }