/* Hero Section con Efecto Glitch */
        .glitch {
            position: relative;
            width: 100%;
            min-height: 70vh;
            background: url('https://img.freepik.com/fotos-premium/codigo-programacion-desarrollo-web-o-desarrollo-aplicaciones-diseno-web-computadora-fondo-seo-3d_125322-458.jpg');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            overflow: hidden;
        }

        .glitch:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('https://img.freepik.com/fotos-premium/codigo-programacion-desarrollo-web-o-desarrollo-aplicaciones-diseno-web-computadora-fondo-seo-3d_125322-458.jpg');
            background-size: cover;
            background-position: center;
            opacity: 0.5;
            mix-blend-mode: hard-light;
            animation: glitch2 10s linear infinite;
        }

        .glitch:hover:before {
            animation: glitch1 1s linear infinite;
        }

        .hero-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(67, 56, 202, 0.8), rgba(139, 69, 19, 0.7));
            z-index: 1;
        }

        /* Efecto glitch en el texto principal */
        .glitch-text {
            position: relative;
            animation: textGlitch 4s linear infinite;
        }

        .glitch-text:before,
        .glitch-text:after {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .glitch-text:before {
            color: #ff0000;
            animation: glitchTop 1s linear infinite;
            clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
        }

        .glitch-text:after {
            color: #00ff00;
            animation: glitchBottom 1.5s linear infinite;
            clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
        }

        /* Elementos flotantes */
        .floating-elements {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        .float-element {
            position: absolute;
            opacity: 0.7;
            animation: float 6s ease-in-out infinite;
        }

        .float-element-1 {
            top: 20%;
            left: 10%;
            animation-delay: 0s;
        }

        .float-element-2 {
            top: 60%;
            left: 85%;
            animation-delay: 1s;
        }

        .float-element-3 {
            top: 30%;
            left: 80%;
            animation-delay: 2s;
        }

        .float-element-4 {
            top: 70%;
            left: 15%;
            animation-delay: 3s;
        }

        .float-element-5 {
            top: 15%;
            left: 60%;
            animation-delay: 4s;
        }

        .float-element-6 {
            top: 80%;
            left: 50%;
            animation-delay: 5s;
        }

        /* Partículas animadas */
        .particles {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        .particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: #fff;
            border-radius: 50%;
            opacity: 0.6;
        }

        .particle-1 {
            top: 20%;
            left: 20%;
            animation: particleMove 8s linear infinite;
        }

        .particle-2 {
            top: 80%;
            left: 80%;
            animation: particleMove 12s linear infinite reverse;
        }

        .particle-3 {
            top: 40%;
            left: 60%;
            animation: particleMove 10s linear infinite;
            animation-delay: 2s;
        }

        .particle-4 {
            top: 60%;
            left: 30%;
            animation: particleMove 15s linear infinite;
            animation-delay: 4s;
        }

        .particle-5 {
            top: 10%;
            left: 90%;
            animation: particleMove 9s linear infinite reverse;
            animation-delay: 1s;
        }

        .particle-6 {
            top: 90%;
            left: 10%;
            animation: particleMove 11s linear infinite;
            animation-delay: 3s;
        }

        .particle-7 {
            top: 30%;
            left: 40%;
            animation: particleMove 13s linear infinite reverse;
            animation-delay: 5s;
        }

        .particle-8 {
            top: 70%;
            left: 70%;
            animation: particleMove 7s linear infinite;
            animation-delay: 6s;
        }

        /* Animaciones */
        @keyframes glitch1 {
            0% {
                background-position: 0 0;
                filter: hue-rotate(0deg);
            }
            10% {
                background-position: 5px 0;
            }
            20% {
                background-position: -5px 0;
            }
            30% {
                background-position: 15px 0;
            }
            40% {
                background-position: -5px 0;
            }
            50% {
                background-position: -25px 0;
            }
            60% {
                background-position: -50px 0;
            }
            70% {
                background-position: 0 -20px;
            }
            80% {
                background-position: -60px -20px;
            }
            81% {
                background-position: 0 0;
            }
            100% {
                background-position: 0 0;
                filter: hue-rotate(360deg);
            }
        }

        @keyframes glitch2 {
            0% {
                background-position: 0 0;
                filter: hue-rotate(0deg);
            }
            10% {
                background-position: 15px 0;
            }
            15% {
                background-position: -15px 0;
            }
            20% {
                filter: hue-rotate(360deg);
            }
            25% {
                background-position: 0 0;
                filter: hue-rotate(0deg);
            }
            100% {
                background-position: 0 0;
                filter: hue-rotate(0deg);
            }
        }

        @keyframes textGlitch {
            0%, 100% {
                transform: translate(0);
            }
            20% {
                transform: translate(-2px, 2px);
            }
            40% {
                transform: translate(-2px, -2px);
            }
            60% {
                transform: translate(2px, 2px);
            }
            80% {
                transform: translate(2px, -2px);
            }
        }

        @keyframes glitchTop {
            0%, 100% {
                transform: translate(0);
            }
            20% {
                transform: translate(-2px, -2px);
            }
            40% {
                transform: translate(-2px, 2px);
            }
            60% {
                transform: translate(2px, -2px);
            }
            80% {
                transform: translate(2px, 2px);
            }
        }

        @keyframes glitchBottom {
            0%, 100% {
                transform: translate(0);
            }
            20% {
                transform: translate(2px, 2px);
            }
            40% {
                transform: translate(2px, -2px);
            }
            60% {
                transform: translate(-2px, 2px);
            }
            80% {
                transform: translate(-2px, -2px);
            }
        }

        @keyframes float {
            0%, 100% {
                transform: translateY(0px) rotate(0deg);
            }
            50% {
                transform: translateY(-20px) rotate(180deg);
            }
        }

        @keyframes particleMove {
            0% {
                transform: translate(0, 0);
                opacity: 0;
            }
            10% {
                opacity: 0.6;
            }
            90% {
                opacity: 0.6;
            }
            100% {
                transform: translate(100px, -100px);
                opacity: 0;
            }
        }

        /* Responsive */
        @media (max-width: 768px) {
            .glitch {
                background-attachment: scroll;
            }

            .float-element {
                display: none;
            }

            .glitch-text {
                font-size: 2.5rem;
            }
        }