@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700;900&display=swap');
        
        body { 
            font-family: 'Inter', sans-serif; 
            background-color: #0f172a; 
            scroll-behavior: smooth;
        }

        .glass {
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .gradient-text {
            background: linear-gradient(90deg, #3b82f6, #2dd4bf);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .hero-glow {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 600px;
            height: 600px;
            background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, rgba(15, 23, 42, 0) 70%);
            z-index: -1;
        }

        .reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; }
        .reveal.active { opacity: 1; transform: translateY(0); }
        
        .text-glow {
            text-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
        }


        /* Definición de la rotación para el efecto de borde */
    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }


        @keyframes bounce-slow {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
    }
    .animate-bounce-slow {
        animation: bounce-slow 4s infinite ease-in-out;
    }


        @keyframes marquee {
        0% { transform: translateX(0%); }
        100% { transform: translateX(-100%); }
    }

    @keyframes marquee2 {
        0% { transform: translateX(100%); }
        100% { transform: translateX(0%); }
    }

    .animate-marquee {
        animation: marquee 30s linear infinite;
    }

    .animate-marquee2 {
        animation: marquee2 30s linear infinite;
    }

    /* Pausar al pasar el mouse para que el usuario pueda leer */
    .group:hover .animate-marquee,
    .group:hover .animate-marquee2 {
        animation-play-state: paused;
    }