/* Animación Tecnológica para el Título - Versión Limpia */

.tech-animated-title {
    position: relative;
    opacity: 0;
    animation: titleFadeIn 1s ease-out 0.3s forwards;
    word-spacing: normal;
    letter-spacing: normal;
}

@keyframes titleFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Palabras destacadas con efecto tecnológico */
.tech-word {
    color: #00fff2 !important;
    font-weight: 700 !important;
    display: inline !important;
    position: static !important;
    text-shadow: 
        0 0 10px rgba(0, 255, 242, 0.6),
        0 0 20px rgba(0, 255, 242, 0.4),
        0 0 30px rgba(0, 255, 242, 0.2);
    animation: glowPulse 3s ease-in-out infinite;
    white-space: normal !important;
}

/* Efecto de brillo pulsante suave */
@keyframes glowPulse {
    0%, 100% {
        text-shadow: 
            0 0 10px rgba(0, 255, 242, 0.6),
            0 0 20px rgba(0, 255, 242, 0.4),
            0 0 30px rgba(0, 255, 242, 0.2);
    }
    50% {
        text-shadow: 
            0 0 15px rgba(0, 255, 242, 0.9),
            0 0 30px rgba(0, 255, 242, 0.6),
            0 0 45px rgba(0, 255, 242, 0.4),
            0 0 60px rgba(0, 255, 242, 0.2);
    }
}

/* Efecto de glitch sutil */
.tech-word.glitch {
    animation: glitchEffect 0.3s ease-in-out;
}

@keyframes glitchEffect {
    0%, 100% {
        transform: translate(0);
    }
    25% {
        transform: translate(-1px, 1px);
        text-shadow: 
            1px 0 #ff00ff, 
            -1px 0 #00fff2,
            0 0 10px rgba(0, 255, 242, 0.8);
    }
    75% {
        transform: translate(1px, -1px);
        text-shadow: 
            -1px 0 #ff00ff, 
            1px 0 #00fff2,
            0 0 10px rgba(0, 255, 242, 0.8);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .tech-word {
        text-shadow: 
            0 0 8px rgba(0, 255, 242, 0.6),
            0 0 15px rgba(0, 255, 242, 0.4);
    }
    
    @keyframes glowPulse {
        0%, 100% {
            text-shadow: 
                0 0 8px rgba(0, 255, 242, 0.6),
                0 0 15px rgba(0, 255, 242, 0.4);
        }
        50% {
            text-shadow: 
                0 0 12px rgba(0, 255, 242, 0.9),
                0 0 25px rgba(0, 255, 242, 0.6);
        }
    }
}