:root {
            --primary-bg: #020617; 
            --accent-cyan: #06b6d4; 
            --accent-purple: #8b5cf6; 
            --accent-green: #4ade80; 
            --accent-orange: #ff8c42; 
        }

        /* Scrollbar */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: #020617; }
        ::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--accent-green); }

        ::selection { background-color: var(--accent-cyan); color: #020617; }

        body {
            background-color: #020617;
            color: #ffffff;
            overflow-x: hidden;
            font-family: 'Outfit', sans-serif;
            -webkit-font-smoothing: antialiased;
        }

        /* Aurora FX Dinámico */
        .aurora-background {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100vh;
            overflow: hidden; z-index: -1;
            filter: blur(140px) saturate(180%);
            opacity: 0.35;
            pointer-events: none;
        }
        .aurora-dot { position: absolute; border-radius: 50%; mix-blend-mode: screen; }
        .aurora-dot-1 { width: 650px; height: 650px; background-color: rgba(59, 130, 246, 0.4); top: -150px; left: -200px; animation: aurora-float 18s ease-in-out infinite alternate; }
        .aurora-dot-2 { width: 550px; height: 550px; background-color: rgba(6, 182, 212, 0.4); top: 35%; left: 65%; animation: aurora-float 22s ease-in-out infinite alternate-reverse; }
        .aurora-dot-3 { width: 500px; height: 500px; background-color: rgba(74, 222, 128, 0.3); top: 75%; left: 15%; animation: aurora-float 20s ease-in-out infinite alternate; }
        @keyframes aurora-float {
            from { transform: translateY(0px) translateX(0px) scale(1) rotate(0deg); }
            to { transform: translateY(80px) translateX(60px) scale(1.1) rotate(20deg); }
        }

        /* Escena 3D (Three.js) de fondo del hero */
        #hero-three-container {
            pointer-events: none;
            -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
            mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
        }
        #hero-three-canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1.6s ease; }
        #hero-three-canvas.is-ready { opacity: 1; }
        @media (prefers-reduced-motion: reduce), (max-width: 640px) {
            #hero-three-container { display: none; }
        }

        /* Utilidades Glassmorphism */
        .glass-panel {
            background: linear-gradient(135deg, rgba(30, 41, 59, 0.6) 0%, rgba(15, 23, 42, 0.8) 100%);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: 0 20px 40px -10px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1);
            transform-style: preserve-3d;
            will-change: transform;
        }

        .glass-card {
            background: linear-gradient(135deg, rgba(30, 41, 59, 0.5) 0%, rgba(15, 23, 42, 0.7) 100%);
            backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 1.5rem;
            transition: transform 0.3s cubic-bezier(0.1, 0, 0.2, 1), border-color 0.4s ease, box-shadow 0.4s ease;
            position: relative;
            overflow: hidden;
        }

        .glass-card:hover {
            border-color: rgba(6, 182, 212, 0.6);
            box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.85), 0 0 40px -5px rgba(6, 182, 212, 0.35);
        }

        /* Gradient Text Animado */
        @keyframes text-shine {
            0% { background-position: 0% center; }
            100% { background-position: -200% center; }
        }
        .animate-text-shine {
            background: linear-gradient(to right, #f8fafc 15%, #06b6d4 35%, #4ade80 65%, #ff8c42 85%, #f8fafc 100%);
            background-size: 200% auto;
            color: transparent;
            background-clip: text;
            -webkit-background-clip: text;
            animation: text-shine 5s linear infinite;
        }

        /* Letras del título "DevGMXA" (junto al avatar), animables una
           por una cuando el personaje 3D la "empuja". */
        .title-letter {
            display: inline-block;
            transition: transform 0.32s cubic-bezier(.34, 1.7, .64, 1), text-shadow 0.32s ease;
            will-change: transform;
        }
        .title-letter.letter-pushed {
            transform: translateY(9px) rotate(-9deg) scale(0.94);
            text-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
        }

        @keyframes icon-pulse-glow {
            0%, 100% { transform: scale(1); filter: drop-shadow(0 0 6px rgba(6, 182, 212, 0.6)); }
            50% { transform: scale(1.1); filter: drop-shadow(0 0 16px rgba(59, 130, 246, 0.9)); }
        }
        .animate-icon-pulse { animation: icon-pulse-glow 3s ease-in-out infinite; }

        /* Timeline Styles para "Sobre Mí" */
        .timeline-line {
            width: 3px;
            background: linear-gradient(to bottom, #FF8C42, #EF4444, #3B82F6, #4ADE80);
            position: absolute;
            top: 0; bottom: 0; left: 24px; border-radius: 2px;
        }
        @media (min-width: 768px) {
            .timeline-line { left: 50%; transform: translateX(-50%); }
        }
        .timeline-dot { box-shadow: 0 0 15px currentColor; }

        /* Revelado de "Mi Historia" */
        .timeline-item .glass-panel,
        .timeline-item .timeline-dot {
            opacity: 0.001;
            transform: translateY(24px) scale(0.98);
            transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .timeline-item.in-view .glass-panel,
        .timeline-item.in-view .timeline-dot {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
        .no-js .timeline-item .glass-panel,
        .no-js .timeline-item .timeline-dot {
            opacity: 1;
            transform: none;
        }

        /* Tarjetas Flip 3D Architecture */
        .perspective-1000 { perspective: 1500px; }
        .flip-card-inner {
            position: relative;
            width: 100%; height: 100%;
            text-align: center;
            transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transform-style: preserve-3d;
        }
        .flip-card:hover .flip-card-inner { transform: rotateY(180deg); }
        .flip-card-front, .flip-card-back {
            position: absolute;
            width: 100%; height: 100%;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            border-radius: 1.5rem;
            overflow: hidden;
        }
        .flip-card-back { transform: rotateY(180deg); background: #0f172a; }

        /* Terminal Scrollbar invisible */
        .terminal-content::-webkit-scrollbar { display: none; }
        .terminal-content { -ms-overflow-style: none; scrollbar-width: none; }

        /* Modales */
        .modal-overlay {
            opacity: 0; visibility: hidden;
            transition: opacity 0.35s ease, visibility 0.35s;
        }
        .modal-overlay.active { opacity: 1; visibility: visible; }
        .form-step { display: none; opacity: 0; transform: translateY(10px); }
        .form-step.active { display: block; opacity: 1; transform: translateY(0); transition: all 0.4s ease; }

        .modal-blur {
            backdrop-filter: blur(20px);
            background-color: rgba(2, 6, 23, 0.85);
        }

        /* Ticker Scroll */
        .ticker-wrap { width: 100%; overflow: hidden; position: relative; }
        .ticker-wrap::before, .ticker-wrap::after {
            content: ''; position: absolute; top: 0; width: 120px; height: 100%; z-index: 2;
        }
        .ticker-wrap::before { left: 0; background: linear-gradient(to right, #020617, transparent); }
        .ticker-wrap::after { right: 0; background: linear-gradient(to left, #020617, transparent); }
        .ticker { display: flex; width: max-content; animation: ticker 28s linear infinite; }
        .ticker:hover { animation-play-state: paused; }
        @keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
        .ticker-item { flex-shrink: 0; padding: 0 2.5rem; display: flex; align-items: center; justify-content: center; }

        /* Botón volver arriba */
        #back-to-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }

        /* Preloader de entrada */
        #preloader {
            position: fixed; inset: 0; z-index: 200;
            background: #020617;
            display: flex; align-items: center; justify-content: center;
            transition: opacity 0.6s ease, visibility 0.6s ease;
        }
        #preloader.loaded { opacity: 0; visibility: hidden; }
        #preloader .loader-text {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.85rem;
            color: #06b6d4;
            letter-spacing: 0.2em;
        }

        /* Halo que sigue al cursor (desktop) */
        #cursor-glow {
            position: fixed; top: 0; left: 0; width: 500px; height: 500px;
            border-radius: 50%; pointer-events: none; z-index: 0;
            background: radial-gradient(circle, rgba(6,182,212,0.08) 0%, transparent 70%);
            transform: translate(-50%, -50%);
            will-change: transform;
        }

        /* Reveal genérico para animaciones de scroll */
        .reveal-up { opacity: 0; transform: translateY(40px); }

        @media (prefers-reduced-motion: reduce) {
            * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
        }

        /* Foco visible para accesibilidad de teclado */
        a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
            outline: 2px solid var(--accent-cyan); outline-offset: 3px; border-radius: 4px;
        }

        /* Enlace "saltar al contenido" — visible solo con teclado */
        .skip-link {
            position: absolute; left: 1rem; top: -3rem;
            background: var(--accent-cyan); color: #020617;
            padding: 0.6rem 1.2rem; border-radius: 0.5rem;
            font-weight: 700; font-size: 0.85rem; z-index: 200;
            transition: top 0.2s ease;
        }
        .skip-link:focus { top: 1rem; }

        /* Menú principal (nav) */
        #main-nav { transition: background-color 0.3s ease, border-color 0.3s ease, padding 0.3s ease; }
        #main-nav .nav-link { position: relative; }
        #main-nav .nav-link.active { color: #fff; }
        #main-nav .nav-link.active::after {
            content: ''; position: absolute; left: 0; right: 0; bottom: -6px;
            height: 2px; background: var(--accent-cyan); border-radius: 2px;
        }
        #mobile-menu { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
        #mobile-menu.open { max-height: 480px; }