.animated-text {
    display: inline-block;
    transition: all 0.3s ease;
    font-family: 'Orbitron', monospace;
    font-weight: 400;
}

.animated-text.fade {
    animation: fadeInOut infinite;
}

.animated-text.slide {
    animation: slideInOut infinite;
}

.animated-text.bounce {
    animation: bounceAnimation infinite;
}

.animated-text.pulse {
    animation: pulseAnimation infinite;
}

.animated-text.typing {
    overflow: hidden;
    border-right: 2px solid;
    white-space: nowrap;
    animation: typing infinite;
}

.animated-text.shake {
    animation: shakeAnimation infinite;
}

.animated-text.rotate {
    animation: rotateAnimation infinite;
}

.animated-text.flip {
    animation: flipAnimation infinite;
}

.animated-text.blink {
    animation: blinkAnimation 1s infinite;
}

.animated-text.fade.blink {
    animation: fadeInOut infinite, blinkAnimation 1s infinite;
}

.animated-text.slide.blink {
    animation: slideInOut infinite, blinkAnimation 1s infinite;
}

.animated-text.bounce.blink {
    animation: bounceAnimation infinite, blinkAnimation 1s infinite;
}

.animated-text.pulse.blink {
    animation: pulseAnimation infinite, blinkAnimation 1s infinite;
}

.animated-text.typing.blink {
    animation: typing infinite, blinkAnimation 1s infinite;
}

@keyframes fadeInOut {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

@keyframes slideInOut {
    0% { transform: translateX(-100px); opacity: 0; }
    50% { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(100px); opacity: 0; }
}

@keyframes bounceAnimation {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-20px); }
    60% { transform: translateY(-10px); }
}

@keyframes pulseAnimation {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

@keyframes typing {
    0%, 90%, 100% { width: 0; }
    30%, 60% { width: 100%; }
}

@keyframes blinkAnimation {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.animated-text-container {
    padding: 10px;
    margin: 10px 0;
}

.animated-text-glow {
    text-shadow: 0 0 10px currentColor;
}

.animated-text-shadow {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.animated-text-gradient {
    background: linear-gradient(45deg, #ff0000, #00ff00, #0000ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.animated-text-rainbow {
    animation: rainbowText 3s linear infinite;
}

@keyframes rainbowText {
    0% { color: #ff0000; }
    16.66% { color: #ff8000; }
    33.33% { color: #ffff00; }
    50% { color: #00ff00; }
    66.66% { color: #0080ff; }
    83.33% { color: #8000ff; }
    100% { color: #ff0000; }
}

.animated-text-neon {
    text-shadow: 
        0 0 5px currentColor,
        0 0 10px currentColor,
        0 0 20px currentColor,
        0 0 40px currentColor;
    animation: neonGlow 2s ease-in-out infinite alternate;
}

@keyframes neonGlow {
    from {
        text-shadow: 
            0 0 5px currentColor,
            0 0 10px currentColor,
            0 0 20px currentColor,
            0 0 40px currentColor;
    }
    to {
        text-shadow: 
            0 0 2px currentColor,
            0 0 5px currentColor,
            0 0 10px currentColor,
            0 0 20px currentColor;
    }
}

.animated-text-matrix {
    font-family: 'Courier New', monospace;
    color: #00ff00;
    text-shadow: 0 0 10px #00ff00;
    animation: matrixEffect 1s infinite;
}

@keyframes matrixEffect {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.animated-text-shake {
    animation: shakeAnimation 0.5s infinite;
}

@keyframes shakeAnimation {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.animated-text-rotate {
    animation: rotateAnimation 2s linear infinite;
}

@keyframes rotateAnimation {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.animated-text-flip {
    animation: flipAnimation 1s infinite;
}

@keyframes flipAnimation {
    0% { transform: rotateY(0deg); }
    50% { transform: rotateY(180deg); }
    100% { transform: rotateY(0deg); }
}

.animated-text-outline {
    text-stroke: 1px currentColor;
    -webkit-text-stroke: 1px currentColor;
}

/* Nuevas animaciones para frontend */
.animated-text.tada {
    animation: tadaAnimation 2s infinite;
}

.animated-text.wobble {
    animation: wobbleAnimation 2s infinite;
}

.animated-text.jello {
    animation: jelloAnimation 2s infinite;
}

.animated-text.bounceInDown {
    animation: bounceInDownAnimation 2s infinite;
}

.animated-text.bounceInLeft {
    animation: bounceInLeftAnimation 2s infinite;
}

.animated-text.bounceInRight {
    animation: bounceInRightAnimation 2s infinite;
}

.animated-text.bounceInUp {
    animation: bounceInUpAnimation 2s infinite;
}

.animated-text.fadeInLeft {
    animation: fadeInLeftAnimation 2s infinite;
}

.animated-text.fadeInRight {
    animation: fadeInRightAnimation 2s infinite;
}

.animated-text.fadeInUpBig {
    animation: fadeInUpBigAnimation 2s infinite;
}

.animated-text.fadeInDownBig {
    animation: fadeInDownBigAnimation 2s infinite;
}

.animated-text.slideInLeft {
    animation: slideInLeftAnimation 2s infinite;
}

.animated-text.slideInRight {
    animation: slideInRightAnimation 2s infinite;
}

.animated-text.slideInUp {
    animation: slideInUpAnimation 2s infinite;
}

.animated-text.slideInDown {
    animation: slideInDownAnimation 2s infinite;
}

.animated-text.zoomInLeft {
    animation: zoomInLeftAnimation 2s infinite;
}

.animated-text.zoomInRight {
    animation: zoomInRightAnimation 2s infinite;
}

.animated-text.zoomInUp {
    animation: zoomInUpAnimation 2s infinite;
}

.animated-text.zoomInDown {
    animation: zoomInDownAnimation 2s infinite;
}

.animated-text.rotateInDownLeft {
    animation: rotateInDownLeftAnimation 2s infinite;
}

.animated-text.rotateInDownRight {
    animation: rotateInDownRightAnimation 2s infinite;
}

.animated-text.rotateInUpLeft {
    animation: rotateInUpLeftAnimation 2s infinite;
}

.animated-text.rotateInUpRight {
    animation: rotateInUpRightAnimation 2s infinite;
}

.animated-text.hinge {
    animation: hingeAnimation 4s infinite;
}

.animated-text.rollOut {
    animation: rollOutAnimation 2s infinite;
}

.animated-text.infinite {
    animation: infiniteAnimation 3s infinite;
}

/* Keyframes para nuevas animaciones */
@keyframes tadaAnimation {
    0% { transform: scale(1); }
    10%, 20% { transform: scale(0.9) rotate(-3deg); }
    30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); }
    40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); }
    100% { transform: scale(1) rotate(0); }
}

@keyframes wobbleAnimation {
    0% { transform: translateX(0%); }
    15% { transform: translateX(-25%) rotate(-5deg); }
    30% { transform: translateX(20%) rotate(3deg); }
    45% { transform: translateX(-15%) rotate(-3deg); }
    60% { transform: translateX(10%) rotate(2deg); }
    75% { transform: translateX(-5%) rotate(-1deg); }
    100% { transform: translateX(0%); }
}

@keyframes jelloAnimation {
    11.1% { transform: none; }
    22.2% { transform: skewX(-12.5deg) skewY(-12.5deg); }
    33.3% { transform: skewX(6.25deg) skewY(6.25deg); }
    44.4% { transform: skewX(-3.125deg) skewY(-3.125deg); }
    55.5% { transform: skewX(1.5625deg) skewY(1.5625deg); }
    66.6% { transform: skewX(-0.78125deg) skewY(-0.78125deg); }
    77.7% { transform: skewX(0.390625deg) skewY(0.390625deg); }
    88.8% { transform: skewX(-0.1953125deg) skewY(-0.1953125deg); }
    100% { transform: none; }
}

@keyframes bounceInDownAnimation {
    0%, 60%, 75%, 90%, 100% { transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); }
    0% { opacity: 0; transform: translate3d(0, -3000px, 0); }
    60% { opacity: 1; transform: translate3d(0, 25px, 0); }
    75% { transform: translate3d(0, -10px, 0); }
    90% { transform: translate3d(0, 5px, 0); }
    100% { transform: none; }
}

@keyframes bounceInLeftAnimation {
    0%, 60%, 75%, 90%, 100% { transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); }
    0% { opacity: 0; transform: translate3d(-3000px, 0, 0); }
    60% { opacity: 1; transform: translate3d(25px, 0, 0); }
    75% { transform: translate3d(-10px, 0, 0); }
    90% { transform: translate3d(5px, 0, 0); }
    100% { transform: none; }
}

@keyframes bounceInRightAnimation {
    0%, 60%, 75%, 90%, 100% { transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); }
    0% { opacity: 0; transform: translate3d(3000px, 0, 0); }
    60% { opacity: 1; transform: translate3d(-25px, 0, 0); }
    75% { transform: translate3d(10px, 0, 0); }
    90% { transform: translate3d(-5px, 0, 0); }
    100% { transform: none; }
}

@keyframes bounceInUpAnimation {
    0%, 60%, 75%, 90%, 100% { transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); }
    0% { opacity: 0; transform: translate3d(0, 3000px, 0); }
    60% { opacity: 1; transform: translate3d(0, -20px, 0); }
    75% { transform: translate3d(0, 10px, 0); }
    90% { transform: translate3d(0, -5px, 0); }
    100% { transform: translate3d(0, 0px, 0); }
}

@keyframes fadeInLeftAnimation {
    0% { opacity: 0; transform: translate3d(-100%, 0, 0); }
    100% { opacity: 1; transform: none; }
}

@keyframes fadeInRightAnimation {
    0% { opacity: 0; transform: translate3d(100%, 0, 0); }
    100% { opacity: 1; transform: none; }
}

@keyframes fadeInUpBigAnimation {
    0% { opacity: 0; transform: translate3d(0, 2000px, 0); }
    100% { opacity: 1; transform: none; }
}

@keyframes fadeInDownBigAnimation {
    0% { opacity: 0; transform: translate3d(0, -2000px, 0); }
    100% { opacity: 1; transform: none; }
}

@keyframes slideInLeftAnimation {
    0% { transform: translate3d(-100%, 0, 0); visibility: visible; }
    100% { transform: translate3d(0, 0, 0); }
}

@keyframes slideInRightAnimation {
    0% { transform: translate3d(100%, 0, 0); visibility: visible; }
    100% { transform: translate3d(0, 0, 0); }
}

@keyframes slideInUpAnimation {
    0% { transform: translate3d(0, 100%, 0); visibility: visible; }
    100% { transform: translate3d(0, 0, 0); }
}

@keyframes slideInDownAnimation {
    0% { transform: translate3d(0, -100%, 0); visibility: visible; }
    100% { transform: translate3d(0, 0, 0); }
}

@keyframes zoomInLeftAnimation {
    0% { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); }
    60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); }
    100% { transform: scale3d(1, 1, 1) translate3d(0, 0, 0); }
}

@keyframes zoomInRightAnimation {
    0% { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); }
    60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); }
    100% { transform: scale3d(1, 1, 1) translate3d(0, 0, 0); }
}

@keyframes zoomInUpAnimation {
    0% { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); }
    60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); }
    100% { transform: scale3d(1, 1, 1) translate3d(0, 0, 0); }
}

@keyframes zoomInDownAnimation {
    0% { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); }
    60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); }
    100% { transform: scale3d(1, 1, 1) translate3d(0, 0, 0); }
}

@keyframes rotateInDownLeftAnimation {
    0% { transform-origin: left bottom; transform: rotate3d(0, 0, 1, -45deg); opacity: 0; }
    100% { transform-origin: left bottom; transform: none; opacity: 1; }
}

@keyframes rotateInDownRightAnimation {
    0% { transform-origin: right bottom; transform: rotate3d(0, 0, 1, 45deg); opacity: 0; }
    100% { transform-origin: right bottom; transform: none; opacity: 1; }
}

@keyframes rotateInUpLeftAnimation {
    0% { transform-origin: left bottom; transform: rotate3d(0, 0, 1, 45deg); opacity: 0; }
    100% { transform-origin: left bottom; transform: none; opacity: 1; }
}

@keyframes rotateInUpRightAnimation {
    0% { transform-origin: right bottom; transform: rotate3d(0, 0, 1, -90deg); opacity: 0; }
    100% { transform-origin: right bottom; transform: none; opacity: 1; }
}

@keyframes hingeAnimation {
    0% { transform-origin: top left; }
    20%, 60% { transform: rotate3d(0, 0, 1, 80deg); transform-origin: top left; }
    40%, 80% { transform: rotate3d(0, 0, 1, 60deg); transform-origin: top left; opacity: 1; }
    100% { transform: translate3d(0, 700px, 0); opacity: 0; }
}

@keyframes rollOutAnimation {
    0% { opacity: 1; }
    100% { opacity: 0; transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); }
}

@keyframes infiniteAnimation {
    0% { transform: translateX(-100%) rotate(0deg); }
    50% { transform: translateX(100%) rotate(180deg); }
    100% { transform: translateX(-100%) rotate(360deg); }
}

/* ================================
   RESPONSIVE DESIGN
   ================================ */

/* Tablets - iPad y similares */
@media (max-width: 1024px) {
    .animated-text {
        font-size: 0.95em;
        line-height: 1.4;
    }
    
    .animated-text-container {
        padding: 8px;
        margin: 8px 0;
    }
}

/* Mobile Landscape - Teléfonos horizontales */
@media (max-width: 768px) {
    .animated-text {
        font-size: 0.9em;
        line-height: 1.3;
        max-width: 100%;
        word-wrap: break-word;
    }
    
    .animated-text-container {
        padding: 6px;
        margin: 6px 0;
        text-align: center;
    }
    
    /* Reducir intensidad de efectos en mobile */
    .animated-text-glow {
        text-shadow: 0 0 5px currentColor;
    }
    
    .animated-text-neon {
        text-shadow: 
            0 0 3px currentColor,
            0 0 6px currentColor,
            0 0 12px currentColor;
    }
    
    /* Animaciones menos agresivas en mobile */
    .animated-text.bounce {
        animation-duration: 2s;
    }
    
    .animated-text.shake {
        animation-duration: 0.8s;
    }
}

/* Mobile Portrait - Teléfonos verticales */
@media (max-width: 480px) {
    .animated-text {
        font-size: 0.85em;
        line-height: 1.2;
        padding: 2px 4px;
    }
    
    .animated-text-container {
        padding: 4px;
        margin: 4px 0;
    }
    
    /* Efectos más sutiles en pantallas pequeñas */
    .animated-text-glow {
        text-shadow: 0 0 3px currentColor;
    }
    
    .animated-text-neon {
        text-shadow: 
            0 0 2px currentColor,
            0 0 4px currentColor,
            0 0 8px currentColor;
        animation-duration: 3s;
    }
    
    .animated-text-shadow {
        text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    }
    
    /* Animaciones más lentas para mejor legibilidad */
    .animated-text.fade,
    .animated-text.slide,
    .animated-text.bounce,
    .animated-text.pulse {
        animation-duration: 3s;
    }
    
    .animated-text.typing {
        font-size: 0.8em;
    }
}

/* Mobile muy pequeño - 320px y menor */
@media (max-width: 320px) {
    .animated-text {
        font-size: 0.8em;
        line-height: 1.1;
        padding: 1px 2px;
    }
    
    .animated-text-container {
        padding: 2px;
        margin: 2px 0;
    }
    
    /* Efectos mínimos para pantallas muy pequeñas */
    .animated-text-glow {
        text-shadow: 0 0 2px currentColor;
    }
    
    .animated-text-neon {
        text-shadow: 0 0 1px currentColor, 0 0 3px currentColor;
        animation-duration: 4s;
    }
    
    /* Animaciones muy lentas */
    .animated-text.fade,
    .animated-text.slide,
    .animated-text.bounce,
    .animated-text.pulse {
        animation-duration: 4s;
    }
    
    .animated-text.typing {
        font-size: 0.75em;
        border-right-width: 1px;
    }
}

/* Touch devices - mejor experiencia táctil */
@media (hover: none) and (pointer: coarse) {
    .animated-text {
        -webkit-tap-highlight-color: transparent;
        user-select: none;
    }
    
    /* Desactivar hover effects en touch */
    .animated-text:hover {
        transform: none !important;
    }
}

/* High DPI displays - pantallas retina */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .animated-text {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    .animated-text-neon {
        text-shadow: 
            0 0 1px currentColor,
            0 0 2px currentColor,
            0 0 4px currentColor,
            0 0 8px currentColor;
    }
}

/* Landscape orientation específica */
@media (orientation: landscape) and (max-height: 500px) {
    .animated-text {
        font-size: 0.9em;
    }
    
    .animated-text-container {
        margin: 2px 0;
    }
}

/* Print styles - para impresión */
@media print {
    .animated-text {
        animation: none !important;
        text-shadow: none !important;
        color: #000 !important;
        font-size: 12pt !important;
    }
    
    .animated-text-container {
        break-inside: avoid;
    }
}