/* --- CORE CSS --- */
        body {
            background-color: #E3E1DC; /* stone */
            color: #121212; /* dark */
            font-family: 'Manrope', sans-serif;
            overflow-x: hidden;
            margin: 0;
            opacity: 0; /* Fade in via JS */
        }
        
        ::selection {
            background-color: #374336; /* accent */
            color: #fff;
        }

        /* --- UI COMPONENTS --- */
        .btn-magnetic {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            border-radius: 9999px;
            transition: all 0.3s cubic-bezier(0.85, 0, 0.15, 1);
            z-index: 1;
        }
        .btn-magnetic::before {
            content: '';
            position: absolute;
            inset: 0;
            background: #121212; /* dark */
            border-radius: 9999px;
            transform: scale(0);
            transition: transform 0.5s cubic-bezier(0.85, 0, 0.15, 1);
            z-index: -1;
        }
        .btn-magnetic:hover::before {
            transform: scale(1);
        }

        .glass-nav {
            background: rgba(18, 18, 18, 0.05);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            transition: background-color 0.3s ease, border-color 0.3s ease;
        }
        .glass-nav.scrolled {
            background: rgba(18, 18, 18, 0.85);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        /* --- ANIMATION UTILS --- */
        .word-wrap {
            display: inline-block;
            overflow: hidden;
            vertical-align: top;
            padding-bottom: 0.1em;
        }
        .word-inner {
            display: inline-block;
            transform: translateY(110%);
        }
        .hero-fade {
            opacity: 0;
            transform: translateY(20px);
        }
        
        /* Nav Links underline effect */
        .nav-link {
            position: relative;
        }
        .nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 1px;
            bottom: -2px;
            left: 0;
            background-color: currentColor;
            transition: width 0.3s ease;
        }
        .nav-link:hover::after {
            width: 100%;
        }

        @keyframes scrolldown {
            0% { transform: translateY(-100%); }
            100% { transform: translateY(200%); }
        }

        /* Hero Ambient Glow */
        .hero-blob {
            position: absolute;
            border-radius: 50%;
            filter: blur(100px);
            pointer-events: none;
            z-index: 0;
            will-change: transform;
        }
        @keyframes heroFloat1 {
            0%, 100% { transform: translate(0, 0) scale(1); }
            33% { transform: translate(80px, -40px) scale(1.15); }
            66% { transform: translate(-30px, 30px) scale(0.95); }
        }
        @keyframes heroFloat2 {
            0%, 100% { transform: translate(0, 0) scale(1); }
            50% { transform: translate(-60px, 40px) scale(1.1); }
        }
        .hide-scrollbar::-webkit-scrollbar {
            display: none;
        }

        /* Gemini Template Animations: Flashlight & Shimmer */
        .flashlight-card-light {
            position: relative;
        }
        .flashlight-card-light::before {
            content: "";
            position: absolute;
            inset: 0px;
            background: radial-gradient(
                600px circle at var(--mouse-x) var(--mouse-y),
                rgba(0, 0, 0, 0.04),
                transparent 40%
            );
            opacity: 0;
            transition: opacity 0.5s;
            pointer-events: none;
            z-index: 10;
        }
        .flashlight-card-light:hover::before { opacity: 1; }

        @keyframes shimmer-light {
            0% { transform: translateX(-150%) skewX(-15deg); }
            100% { transform: translateX(250%) skewX(-15deg); }
        }
        .btn-shimmer::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
            animation: shimmer-light 2.5s infinite;
            pointer-events: none;
        }

        /* Marquee Animation */
        @keyframes marquee {
            0% { transform: translateX(0); }
            100% { transform: translateX(-100%); }
        }
        .animate-marquee {
            animation: marquee 35s linear infinite;
            will-change: transform;
        }
        .group-marquee:hover .animate-marquee {
            animation-play-state: paused;
        }

        /* Modal Transitions */
        #modalQuemSomos,
        #modalPolitica {
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .modal-content {
            transform: scale(0.95);
            opacity: 0;
            transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.3s ease;
        }