/* =============================================
   FUNDACIÓN VÉLEZ - ANIMACIONES Y EFECTOS
   Versión: 1.0
   Autor: Webzi
   Fecha: 2025
   
   TABLA DE CONTENIDOS:
   1. Configuración y Variables de Animación
   2. Animaciones de Entrada (Fade)
   3. Animaciones de Deslizamiento (Slide)
   4. Animaciones de Escala (Scale/Zoom)
   5. Animaciones de Rotación
   6. Animaciones de Rebote (Bounce)
   7. Animaciones de Sacudida (Shake/Pulse)
   8. Animaciones de Texto
   9. Animaciones de Carga (Loaders)
   10. Animaciones de Hover
   11. Animaciones de Scroll
   12. Animaciones de Formularios
   13. Animaciones de Botones
   14. Animaciones SVG
   15. Efectos Especiales y Utilidades
   ============================================= */

/* =============================================
   1. CONFIGURACIÓN Y VARIABLES DE ANIMACIÓN
   ============================================= */
:root {
    /* Duraciones */
    --anim-duration-instant: 100ms;
    --anim-duration-fast: 200ms;
    --anim-duration-normal: 300ms;
    --anim-duration-slow: 500ms;
    --anim-duration-slower: 800ms;
    --anim-duration-slowest: 1200ms;

    /* Timing Functions */
    --anim-ease-linear: linear;
    --anim-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --anim-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --anim-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --anim-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --anim-ease-elastic: cubic-bezier(0.895, 0.03, 0.685, 0.22);
    --anim-ease-back: cubic-bezier(0.68, -0.6, 0.32, 1.6);
    --anim-ease-smooth: cubic-bezier(0.37, 0, 0.63, 1);

    /* Delays */
    --anim-delay-1: 100ms;
    --anim-delay-2: 200ms;
    --anim-delay-3: 300ms;
    --anim-delay-4: 400ms;
    --anim-delay-5: 500ms;
    --anim-delay-6: 600ms;
    --anim-delay-7: 700ms;
    --anim-delay-8: 800ms;
}

/* Performance Optimization */
.will-animate {
    will-change: transform, opacity;
}

.hardware-accelerated {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Animation Base Classes */
.animated {
    animation-duration: var(--anim-duration-normal);
    animation-fill-mode: both;
}

.animated.faster {
    animation-duration: var(--anim-duration-fast);
}

.animated.fast {
    animation-duration: var(--anim-duration-normal);
}

.animated.slow {
    animation-duration: var(--anim-duration-slow);
}

.animated.slower {
    animation-duration: var(--anim-duration-slower);
}

.animated.delay-1 {
    animation-delay: var(--anim-delay-1);
}

.animated.delay-2 {
    animation-delay: var(--anim-delay-2);
}

.animated.delay-3 {
    animation-delay: var(--anim-delay-3);
}

.animated.delay-4 {
    animation-delay: var(--anim-delay-4);
}

.animated.delay-5 {
    animation-delay: var(--anim-delay-5);
}

.animated.infinite {
    animation-iteration-count: infinite;
}

.animated.repeat-2 {
    animation-iteration-count: 2;
}

.animated.repeat-3 {
    animation-iteration-count: 3;
}

/* =============================================
   2. ANIMACIONES DE ENTRADA (FADE)
   ============================================= */

/* Fade In */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fadeIn {
    animation-name: fadeIn;
}

/* Fade In Up */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 30px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.fadeInUp {
    animation-name: fadeInUp;
}

/* Fade In Down */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -30px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.fadeInDown {
    animation-name: fadeInDown;
}

/* Fade In Left */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-30px, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.fadeInLeft {
    animation-name: fadeInLeft;
}

/* Fade In Right */
@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translate3d(30px, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.fadeInRight {
    animation-name: fadeInRight;
}

/* Fade In Top Left */
@keyframes fadeInTopLeft {
    from {
        opacity: 0;
        transform: translate3d(-30px, -30px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.fadeInTopLeft {
    animation-name: fadeInTopLeft;
}

/* Fade In Top Right */
@keyframes fadeInTopRight {
    from {
        opacity: 0;
        transform: translate3d(30px, -30px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.fadeInTopRight {
    animation-name: fadeInTopRight;
}

/* Fade In Bottom Left */
@keyframes fadeInBottomLeft {
    from {
        opacity: 0;
        transform: translate3d(-30px, 30px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.fadeInBottomLeft {
    animation-name: fadeInBottomLeft;
}

/* Fade In Bottom Right */
@keyframes fadeInBottomRight {
    from {
        opacity: 0;
        transform: translate3d(30px, 30px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.fadeInBottomRight {
    animation-name: fadeInBottomRight;
}

/* Fade Out Variations */
@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.fadeOut {
    animation-name: fadeOut;
}

@keyframes fadeOutUp {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    to {
        opacity: 0;
        transform: translate3d(0, -30px, 0);
    }
}

.fadeOutUp {
    animation-name: fadeOutUp;
}

@keyframes fadeOutDown {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    to {
        opacity: 0;
        transform: translate3d(0, 30px, 0);
    }
}

.fadeOutDown {
    animation-name: fadeOutDown;
}

/* =============================================
   3. ANIMACIONES DE DESLIZAMIENTO (SLIDE)
   ============================================= */

/* Slide In Up */
@keyframes slideInUp {
    from {
        transform: translate3d(0, 100%, 0);
        visibility: visible;
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

.slideInUp {
    animation-name: slideInUp;
}

/* Slide In Down */
@keyframes slideInDown {
    from {
        transform: translate3d(0, -100%, 0);
        visibility: visible;
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

.slideInDown {
    animation-name: slideInDown;
}

/* Slide In Left */
@keyframes slideInLeft {
    from {
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

.slideInLeft {
    animation-name: slideInLeft;
}

/* Slide In Right */
@keyframes slideInRight {
    from {
        transform: translate3d(100%, 0, 0);
        visibility: visible;
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

.slideInRight {
    animation-name: slideInRight;
}

/* Slide Out Variations */
@keyframes slideOutUp {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        visibility: hidden;
        transform: translate3d(0, -100%, 0);
    }
}

.slideOutUp {
    animation-name: slideOutUp;
}

@keyframes slideOutDown {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        visibility: hidden;
        transform: translate3d(0, 100%, 0);
    }
}

.slideOutDown {
    animation-name: slideOutDown;
}

@keyframes slideOutLeft {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        visibility: hidden;
        transform: translate3d(-100%, 0, 0);
    }
}

.slideOutLeft {
    animation-name: slideOutLeft;
}

@keyframes slideOutRight {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        visibility: hidden;
        transform: translate3d(100%, 0, 0);
    }
}

.slideOutRight {
    animation-name: slideOutRight;
}

/* =============================================
   4. ANIMACIONES DE ESCALA (SCALE/ZOOM)
   ============================================= */

/* Zoom In */
@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }

    50% {
        opacity: 1;
    }
}

.zoomIn {
    animation-name: zoomIn;
}

/* Zoom In Up */
@keyframes zoomInUp {
    from {
        opacity: 0;
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    60% {
        opacity: 1;
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

.zoomInUp {
    animation-name: zoomInUp;
}

/* Zoom In Down */
@keyframes zoomInDown {
    from {
        opacity: 0;
        transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    60% {
        opacity: 1;
        transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

.zoomInDown {
    animation-name: zoomInDown;
}

/* Zoom In Left */
@keyframes zoomInLeft {
    from {
        opacity: 0;
        transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    60% {
        opacity: 1;
        transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

.zoomInLeft {
    animation-name: zoomInLeft;
}

/* Zoom In Right */
@keyframes zoomInRight {
    from {
        opacity: 0;
        transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    60% {
        opacity: 1;
        transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    }
}

.zoomInRight {
    animation-name: zoomInRight;
}

/* Zoom Out */
@keyframes zoomOut {
    from {
        opacity: 1;
    }

    50% {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }

    to {
        opacity: 0;
    }
}

.zoomOut {
    animation-name: zoomOut;
}

/* Scale Up */
@keyframes scaleUp {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(1);
    }
}

.scaleUp {
    animation-name: scaleUp;
}

/* Scale Down */
@keyframes scaleDown {
    from {
        transform: scale(1.5);
    }

    to {
        transform: scale(1);
    }
}

.scaleDown {
    animation-name: scaleDown;
}

/* =============================================
   5. ANIMACIONES DE ROTACIÓN
   ============================================= */

/* Rotate */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.rotate {
    animation-name: rotate;
    animation-timing-function: linear;
}

/* Rotate In */
@keyframes rotateIn {
    from {
        transform: rotate(-200deg) scale(0);
        opacity: 0;
    }

    to {
        transform: rotate(0) scale(1);
        opacity: 1;
    }
}

.rotateIn {
    animation-name: rotateIn;
}

/* Rotate In Down Left */
@keyframes rotateInDownLeft {
    from {
        transform: rotate(-45deg);
        opacity: 0;
        transform-origin: left bottom;
    }

    to {
        transform: rotate(0);
        opacity: 1;
        transform-origin: left bottom;
    }
}

.rotateInDownLeft {
    animation-name: rotateInDownLeft;
}

/* Rotate In Down Right */
@keyframes rotateInDownRight {
    from {
        transform: rotate(45deg);
        opacity: 0;
        transform-origin: right bottom;
    }

    to {
        transform: rotate(0);
        opacity: 1;
        transform-origin: right bottom;
    }
}

.rotateInDownRight {
    animation-name: rotateInDownRight;
}

/* Rotate In Up Left */
@keyframes rotateInUpLeft {
    from {
        transform: rotate(45deg);
        opacity: 0;
        transform-origin: left top;
    }

    to {
        transform: rotate(0);
        opacity: 1;
        transform-origin: left top;
    }
}

.rotateInUpLeft {
    animation-name: rotateInUpLeft;
}

/* Rotate In Up Right */
@keyframes rotateInUpRight {
    from {
        transform: rotate(-45deg);
        opacity: 0;
        transform-origin: right top;
    }

    to {
        transform: rotate(0);
        opacity: 1;
        transform-origin: right top;
    }
}

.rotateInUpRight {
    animation-name: rotateInUpRight;
}

/* Rotate Out */
@keyframes rotateOut {
    from {
        opacity: 1;
    }

    to {
        transform: rotate(200deg);
        opacity: 0;
    }
}

.rotateOut {
    animation-name: rotateOut;
}

/* Flip */
@keyframes flip {
    from {
        transform: perspective(400px) rotateY(0);
        animation-timing-function: ease-out;
    }

    40% {
        transform: perspective(400px) translateZ(150px) rotateY(170deg);
        animation-timing-function: ease-out;
    }

    50% {
        transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
        animation-timing-function: ease-in;
    }

    80% {
        transform: perspective(400px) rotateY(360deg) scale(0.95);
        animation-timing-function: ease-in;
    }

    to {
        transform: perspective(400px) scale(1);
        animation-timing-function: ease-in;
    }
}

.flip {
    animation-name: flip;
    backface-visibility: visible;
}

/* Flip In X */
@keyframes flipInX {
    from {
        transform: perspective(400px) rotateX(90deg);
        animation-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        transform: perspective(400px) rotateX(-20deg);
        animation-timing-function: ease-in;
    }

    60% {
        transform: perspective(400px) rotateX(10deg);
        opacity: 1;
    }

    80% {
        transform: perspective(400px) rotateX(-5deg);
    }

    to {
        transform: perspective(400px);
    }
}

.flipInX {
    animation-name: flipInX;
    backface-visibility: visible;
}

/* Flip In Y */
@keyframes flipInY {
    from {
        transform: perspective(400px) rotateY(90deg);
        animation-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        transform: perspective(400px) rotateY(-20deg);
        animation-timing-function: ease-in;
    }

    60% {
        transform: perspective(400px) rotateY(10deg);
        opacity: 1;
    }

    80% {
        transform: perspective(400px) rotateY(-5deg);
    }

    to {
        transform: perspective(400px);
    }
}

.flipInY {
    animation-name: flipInY;
    backface-visibility: visible;
}

/* =============================================
   6. ANIMACIONES DE REBOTE (BOUNCE)
   ============================================= */

/* Bounce */
@keyframes bounce {

    from,
    20%,
    53%,
    80%,
    to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transform: translate3d(0, 0, 0);
    }

    40%,
    43% {
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transform: translate3d(0, -30px, 0);
    }

    70% {
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transform: translate3d(0, -15px, 0);
    }

    90% {
        transform: translate3d(0, -4px, 0);
    }
}

.bounce {
    animation-name: bounce;
    transform-origin: center bottom;
}

/* Bounce In */
@keyframes bounceIn {

    from,
    20%,
    40%,
    60%,
    80%,
    to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }

    20% {
        transform: scale3d(1.1, 1.1, 1.1);
    }

    40% {
        transform: scale3d(0.9, 0.9, 0.9);
    }

    60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03);
    }

    80% {
        transform: scale3d(0.97, 0.97, 0.97);
    }

    to {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

.bounceIn {
    animation-name: bounceIn;
}

/* Bounce In Down */
@keyframes bounceInDown {

    from,
    60%,
    75%,
    90%,
    to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    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);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

.bounceInDown {
    animation-name: bounceInDown;
}

/* Bounce In Up */
@keyframes bounceInUp {

    from,
    60%,
    75%,
    90%,
    to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    from {
        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);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

.bounceInUp {
    animation-name: bounceInUp;
}

/* Bounce In Left */
@keyframes bounceInLeft {

    from,
    60%,
    75%,
    90%,
    to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    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);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

.bounceInLeft {
    animation-name: bounceInLeft;
}

/* Bounce In Right */
@keyframes bounceInRight {

    from,
    60%,
    75%,
    90%,
    to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    from {
        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);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

.bounceInRight {
    animation-name: bounceInRight;
}

/* Rubber Band */
@keyframes rubberBand {
    from {
        transform: scale3d(1, 1, 1);
    }

    30% {
        transform: scale3d(1.25, 0.75, 1);
    }

    40% {
        transform: scale3d(0.75, 1.25, 1);
    }

    50% {
        transform: scale3d(1.15, 0.85, 1);
    }

    65% {
        transform: scale3d(0.95, 1.05, 1);
    }

    75% {
        transform: scale3d(1.05, 0.95, 1);
    }

    to {
        transform: scale3d(1, 1, 1);
    }
}

.rubberBand {
    animation-name: rubberBand;
}

/* =============================================
   7. ANIMACIONES DE SACUDIDA (SHAKE/PULSE)
   ============================================= */

/* Shake */
@keyframes shake {

    from,
    to {
        transform: translate3d(0, 0, 0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translate3d(-10px, 0, 0);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translate3d(10px, 0, 0);
    }
}

.shake {
    animation-name: shake;
}

/* Shake X */
@keyframes shakeX {

    from,
    to {
        transform: translate3d(0, 0, 0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translate3d(-10px, 0, 0);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translate3d(10px, 0, 0);
    }
}

.shakeX {
    animation-name: shakeX;
}

/* Shake Y */
@keyframes shakeY {

    from,
    to {
        transform: translate3d(0, 0, 0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translate3d(0, -10px, 0);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translate3d(0, 10px, 0);
    }
}

.shakeY {
    animation-name: shakeY;
}

/* Head Shake */
@keyframes headShake {
    0% {
        transform: translateX(0);
    }

    6.5% {
        transform: translateX(-6px) rotateY(-9deg);
    }

    18.5% {
        transform: translateX(5px) rotateY(7deg);
    }

    31.5% {
        transform: translateX(-3px) rotateY(-5deg);
    }

    43.5% {
        transform: translateX(2px) rotateY(3deg);
    }

    50% {
        transform: translateX(0);
    }
}

.headShake {
    animation-timing-function: ease-in-out;
    animation-name: headShake;
}

/* Swing */
@keyframes swing {
    20% {
        transform: rotate3d(0, 0, 1, 15deg);
    }

    40% {
        transform: rotate3d(0, 0, 1, -10deg);
    }

    60% {
        transform: rotate3d(0, 0, 1, 5deg);
    }

    80% {
        transform: rotate3d(0, 0, 1, -5deg);
    }

    to {
        transform: rotate3d(0, 0, 1, 0deg);
    }
}

.swing {
    transform-origin: top center;
    animation-name: swing;
}

/* Tada */
@keyframes tada {
    from {
        transform: scale3d(1, 1, 1);
    }

    10%,
    20% {
        transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    }

    30%,
    50%,
    70%,
    90% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }

    40%,
    60%,
    80% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }

    to {
        transform: scale3d(1, 1, 1);
    }
}

.tada {
    animation-name: tada;
}

/* Wobble */
@keyframes wobble {
    from {
        transform: translate3d(0, 0, 0);
    }

    15% {
        transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    }

    30% {
        transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    }

    45% {
        transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    }

    60% {
        transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    }

    75% {
        transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

.wobble {
    animation-name: wobble;
}

/* Jello */
@keyframes jello {

    from,
    11.1%,
    to {
        transform: translate3d(0, 0, 0);
    }

    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);
    }
}

.jello {
    animation-name: jello;
    transform-origin: center;
}

/* Pulse */
@keyframes pulse {
    from {
        transform: scale3d(1, 1, 1);
    }

    50% {
        transform: scale3d(1.05, 1.05, 1.05);
    }

    to {
        transform: scale3d(1, 1, 1);
    }
}

.pulse {
    animation-name: pulse;
}

/* Pulse Grow */
@keyframes pulseGrow {
    to {
        transform: scale(1.1);
    }
}

.pulseGrow:hover {
    animation-name: pulseGrow;
    animation-duration: 0.3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

/* Pulse Shrink */
@keyframes pulseShrink {
    to {
        transform: scale(0.9);
    }
}

.pulseShrink:hover {
    animation-name: pulseShrink;
    animation-duration: 0.3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

/* Heartbeat */
@keyframes heartBeat {
    0% {
        transform: scale(1);
    }

    14% {
        transform: scale(1.3);
    }

    28% {
        transform: scale(1);
    }

    42% {
        transform: scale(1.3);
    }

    70% {
        transform: scale(1);
    }
}

.heartBeat {
    animation-name: heartBeat;
    animation-duration: 1.3s;
    animation-timing-function: ease-in-out;
}

/* =============================================
   8. ANIMACIONES DE TEXTO
   ============================================= */

/* Text Glow */
@keyframes textGlow {
    from {
        text-shadow: 0 0 10px rgba(130, 195, 65, 0);
    }

    to {
        text-shadow: 0 0 20px rgba(130, 195, 65, 0.8),
            0 0 30px rgba(130, 195, 65, 0.6);
    }
}

.textGlow {
    animation: textGlow 2s ease-in-out infinite alternate;
}

/* Text Shadow Pop */
@keyframes textShadowPop {
    0% {
        text-shadow: 0 0 0 transparent;
    }

    100% {
        text-shadow: 2px 2px 8px rgba(0, 59, 92, 0.4);
    }
}

.textShadowPop {
    animation: textShadowPop 0.6s both;
}

/* Text Blur Out */
@keyframes textBlurOut {
    0% {
        filter: blur(0.01px);
    }

    100% {
        filter: blur(12px);
        opacity: 0;
    }
}

.textBlurOut {
    animation: textBlurOut 1.2s ease-out both;
}

/* Text Focus In */
@keyframes textFocusIn {
    0% {
        filter: blur(12px);
        opacity: 0;
    }

    100% {
        filter: blur(0);
        opacity: 1;
    }
}

.textFocusIn {
    animation: textFocusIn 1s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}

/* Tracking In */
@keyframes trackingIn {
    0% {
        letter-spacing: -0.5em;
        opacity: 0;
    }

    40% {
        opacity: 0.6;
    }

    100% {
        opacity: 1;
        letter-spacing: normal;
    }
}

.trackingIn {
    animation: trackingIn 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}

/* Tracking Out */
@keyframes trackingOut {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    100% {
        letter-spacing: 1em;
        opacity: 0;
    }
}

.trackingOut {
    animation: trackingOut 1s cubic-bezier(0.55, 0.055, 0.675, 0.19) both;
}

/* Text Flicker */
@keyframes textFlicker {

    0%,
    18%,
    22%,
    25%,
    53%,
    57%,
    100% {
        opacity: 1;
    }

    20%,
    24%,
    55% {
        opacity: 0.4;
    }
}

.textFlicker {
    animation: textFlicker 2.5s linear infinite;
}

/* Typewriter */
@keyframes typewriter {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

@keyframes blinkCursor {

    from,
    to {
        border-color: transparent;
    }

    50% {
        border-color: var(--color-verde-primario);
    }
}

.typewriter {
    overflow: hidden;
    border-right: 3px solid var(--color-verde-primario);
    white-space: nowrap;
    animation: typewriter 3s steps(40, end),
        blinkCursor 0.75s step-end infinite;
}

/* =============================================
   9. ANIMACIONES DE CARGA (LOADERS)
   ============================================= */

/* Spin */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.spin {
    animation: spin 1s linear infinite;
}

/* Spinner Grow */
@keyframes spinnerGrow {
    0% {
        transform: scale(0);
    }

    50% {
        opacity: 1;
        transform: none;
    }
}

.spinnerGrow {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: text-bottom;
    background-color: currentColor;
    border-radius: 50%;
    opacity: 0;
    animation: spinnerGrow 0.75s linear infinite;
}

/* Dots Loader */
@keyframes dotsLoader {

    0%,
    80%,
    100% {
        transform: scale(0);
    }

    40% {
        transform: scale(1);
    }
}

.dotsLoader {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 20px;
}

.dotsLoader div {
    position: absolute;
    top: 0;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--color-verde-primario);
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.dotsLoader div:nth-child(1) {
    left: 8px;
    animation: dotsLoader 0.6s infinite;
}

.dotsLoader div:nth-child(2) {
    left: 32px;
    animation: dotsLoader 0.6s infinite;
    animation-delay: 0.2s;
}

.dotsLoader div:nth-child(3) {
    left: 56px;
    animation: dotsLoader 0.6s infinite;
    animation-delay: 0.4s;
}

/* Ripple Loader */
@keyframes rippleLoader {
    0% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0;
        left: 0;
        width: 72px;
        height: 72px;
        opacity: 0;
    }
}

.rippleLoader {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

.rippleLoader div {
    position: absolute;
    border: 4px solid var(--color-verde-primario);
    opacity: 1;
    border-radius: 50%;
    animation: rippleLoader 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.rippleLoader div:nth-child(2) {
    animation-delay: -0.5s;
}

/* Square Loader */
@keyframes squareLoader {
    0% {
        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    }

    50% {
        transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    }

    100% {
        transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    }
}

.squareLoader {
    width: 40px;
    height: 40px;
    background-color: var(--color-verde-primario);
    animation: squareLoader 1.2s infinite ease-in-out;
}

/* Progress Bar Animation */
@keyframes progressBar {
    0% {
        width: 0;
        background-position: 0 0;
    }

    100% {
        width: 100%;
        background-position: 40px 0;
    }
}

.progressBar {
    height: 20px;
    background: linear-gradient(45deg,
            rgba(255, 255, 255, 0.15) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.15) 50%,
            rgba(255, 255, 255, 0.15) 75%,
            transparent 75%,
            transparent);
    background-size: 40px 40px;
    animation: progressBar 2s linear;
}

/* =============================================
   10. ANIMACIONES DE HOVER
   ============================================= */

/* Hover Float */
@keyframes hoverFloat {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0px);
    }
}

.hoverFloat:hover {
    animation: hoverFloat 1s ease-in-out infinite;
}

/* Hover Bounce */
@keyframes hoverBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

.hoverBounce:hover {
    animation: hoverBounce 0.5s ease-in-out;
}

/* Hover Rotate */
.hoverRotate {
    transition: transform 0.3s ease;
}

.hoverRotate:hover {
    transform: rotate(5deg);
}

/* Hover Grow */
.hoverGrow {
    transition: transform 0.3s ease;
}

.hoverGrow:hover {
    transform: scale(1.1);
}

/* Hover Shrink */
.hoverShrink {
    transition: transform 0.3s ease;
}

.hoverShrink:hover {
    transform: scale(0.9);
}

/* Hover Shadow */
.hoverShadow {
    transition: box-shadow 0.3s ease;
}

.hoverShadow:hover {
    box-shadow: 0 10px 30px rgba(0, 59, 92, 0.3);
}

/* Hover Glow */
.hoverGlow {
    transition: box-shadow 0.3s ease;
}

.hoverGlow:hover {
    box-shadow: 0 0 20px rgba(130, 195, 65, 0.6);
}

/* Hover Underline From Left */
.hoverUnderlineFromLeft {
    position: relative;
}

.hoverUnderlineFromLeft::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-verde-primario);
    transition: width 0.3s ease;
}

.hoverUnderlineFromLeft:hover::after {
    width: 100%;
}

/* Hover Underline From Center */
.hoverUnderlineFromCenter {
    position: relative;
}

.hoverUnderlineFromCenter::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--color-verde-primario);
    transform: translateX(-50%);
    transition: width 0.3s ease;
}

.hoverUnderlineFromCenter:hover::after {
    width: 100%;
}

/* Hover Background Slide */
.hoverBgSlide {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.hoverBgSlide::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--color-verde-primario);
    transition: left 0.3s ease;
    z-index: -1;
}

.hoverBgSlide:hover::before {
    left: 0;
}

/* Hover Icon Rotate */
.hoverIconRotate i {
    transition: transform 0.3s ease;
}

.hoverIconRotate:hover i {
    transform: rotate(90deg);
}

/* Hover Icon Bounce */
@keyframes iconBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

.hoverIconBounce:hover i {
    animation: iconBounce 0.5s ease;
}

/* =============================================
   11. ANIMACIONES DE SCROLL
   ============================================= */

/* Parallax */
.parallax {
    position: relative;
    overflow: hidden;
}

.parallax-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
    background-size: cover;
    background-position: center;
    will-change: transform;
}

/* Reveal On Scroll */
.revealOnScroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.revealOnScroll.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Scroll Triggered Animations */
.scrollFadeIn {
    opacity: 0;
    transition: opacity 1s ease;
}

.scrollFadeIn.inView {
    opacity: 1;
}

.scrollSlideUp {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease;
}

.scrollSlideUp.inView {
    opacity: 1;
    transform: translateY(0);
}

.scrollSlideLeft {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.8s ease;
}

.scrollSlideLeft.inView {
    opacity: 1;
    transform: translateX(0);
}

.scrollSlideRight {
    opacity: 0;
    transform: translateX(50px);
    transition: all 0.8s ease;
}

.scrollSlideRight.inView {
    opacity: 1;
    transform: translateX(0);
}

.scrollZoomIn {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.8s ease;
}

.scrollZoomIn.inView {
    opacity: 1;
    transform: scale(1);
}

/* Counter Animation */
@keyframes countUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.counter {
    animation: countUp 1s ease-out;
}

/* =============================================
   12. ANIMACIONES DE FORMULARIOS
   ============================================= */

/* Input Focus */
.inputFocus {
    transition: all 0.3s ease;
}

.inputFocus:focus {
    transform: scale(1.02);
    box-shadow: 0 0 0 3px rgba(130, 195, 65, 0.2);
}

/* Input Error Shake */
@keyframes inputError {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-5px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(5px);
    }
}

.inputError {
    animation: inputError 0.5s ease;
    border-color: var(--color-error) !important;
}

/* Input Success */
@keyframes inputSuccess {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

.inputSuccess {
    animation: inputSuccess 0.3s ease;
    border-color: var(--color-exito) !important;
}

/* Label Float */
.labelFloat {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    transition: all 0.3s ease;
    pointer-events: none;
}

.inputFilled+.labelFloat,
.inputFocus:focus+.labelFloat {
    top: -10px;
    font-size: 12px;
    color: var(--color-verde-primario);
    background: white;
    padding: 0 5px;
}

/* Checkbox Animation */
@keyframes checkmark {
    0% {
        stroke-dashoffset: 100;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

.checkbox-animated input:checked+.checkmark {
    animation: checkmark 0.3s ease-in-out;
}

/* Radio Button Animation */
@keyframes radioSelect {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

.radio-animated input:checked+.radio-dot {
    animation: radioSelect 0.3s ease;
}

/* =============================================
   13. ANIMACIONES DE BOTONES
   ============================================= */

/* Button Ripple */
@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

.btnRipple {
    position: relative;
    overflow: hidden;
}

.btnRipple .ripple {
    position: absolute;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.5);
    animation: ripple 0.6s linear;
}

/* Button Sweep To Right */
.btnSweepToRight {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btnSweepToRight::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--color-verde-primario);
    transition: left 0.3s ease;
    z-index: -1;
}

.btnSweepToRight:hover::before {
    left: 0;
}

/* Button Sweep To Top */
.btnSweepToTop {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btnSweepToTop::before {
    content: '';
    position: absolute;
    bottom: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-verde-primario);
    transition: bottom 0.3s ease;
    z-index: -1;
}

.btnSweepToTop:hover::before {
    bottom: 0;
}

/* Button Diagonal Sweep */
.btnDiagonalSweep {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btnDiagonalSweep::before {
    content: '';
    position: absolute;
    top: -100%;
    left: -100%;
    width: 200%;
    height: 200%;
    background: var(--color-verde-primario);
    transform: rotate(45deg);
    transition: all 0.3s ease;
    z-index: -1;
}

.btnDiagonalSweep:hover::before {
    top: -50%;
    left: -50%;
}

/* Button Shutter Out */
.btnShutterOut {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btnShutterOut::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: var(--color-verde-primario);
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
    z-index: -1;
}

.btnShutterOut:hover::before {
    width: 100%;
    height: 100%;
}

/* Button Border Animation */
.btnBorderAnimation {
    position: relative;
    overflow: hidden;
}

.btnBorderAnimation::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: var(--color-verde-primario);
    animation: borderTop 1s linear infinite;
}

.btnBorderAnimation::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: -100%;
    width: 100%;
    height: 2px;
    background: var(--color-verde-primario);
    animation: borderBottom 1s linear infinite;
}

@keyframes borderTop {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

@keyframes borderBottom {
    0% {
        right: -100%;
    }

    100% {
        right: 100%;
    }
}

/* Button Push */
.btnPush {
    transition: all 0.1s ease;
}

.btnPush:active {
    transform: scale(0.95);
}

/* Button Pop */
@keyframes btnPop {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

.btnPop:hover {
    animation: btnPop 0.3s ease;
}

/* =============================================
   14. ANIMACIONES SVG
   ============================================= */

/* SVG Draw */
@keyframes svgDraw {
    to {
        stroke-dashoffset: 0;
    }
}

.svgDraw path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: svgDraw 3s ease forwards;
}

/* SVG Fill */
@keyframes svgFill {
    from {
        fill: transparent;
    }

    to {
        fill: var(--color-verde-primario);
    }
}

.svgFill {
    animation: svgFill 1s ease forwards;
}

/* SVG Morph */
@keyframes svgMorph {

    0%,
    100% {
        d: path("M0,0 L100,0 L100,100 L0,100 Z");
    }

    50% {
        d: path("M25,0 L75,0 L100,100 L0,100 Z");
    }
}

.svgMorph {
    animation: svgMorph 2s ease infinite;
}

/* SVG Rotate */
@keyframes svgRotate {
    from {
        transform: rotate(0deg);
        transform-origin: center;
    }

    to {
        transform: rotate(360deg);
        transform-origin: center;
    }
}

.svgRotate {
    animation: svgRotate 2s linear infinite;
}

/* SVG Scale Pulse */
@keyframes svgScalePulse {

    0%,
    100% {
        transform: scale(1);
        transform-origin: center;
    }

    50% {
        transform: scale(1.1);
        transform-origin: center;
    }
}

.svgScalePulse {
    animation: svgScalePulse 2s ease infinite;
}

/* =============================================
   15. EFECTOS ESPECIALES Y UTILIDADES
   ============================================= */

/* Gradient Animation */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.gradientAnimation {
    background: linear-gradient(270deg,
            var(--color-verde-primario),
            var(--color-azul-claro),
            var(--color-amarillo),
            var(--color-verde-primario));
    background-size: 400% 400%;
    animation: gradientShift 10s ease infinite;
}

/* Color Change */
@keyframes colorChange {
    0% {
        color: var(--color-azul-primario);
    }

    33% {
        color: var(--color-verde-primario);
    }

    66% {
        color: var(--color-amarillo);
    }

    100% {
        color: var(--color-azul-primario);
    }
}

.colorChange {
    animation: colorChange 3s ease infinite;
}

/* Background Pulse */
@keyframes bgPulse {

    0%,
    100% {
        background-color: var(--color-azul-primario);
    }

    50% {
        background-color: var(--color-verde-primario);
    }
}

.bgPulse {
    animation: bgPulse 2s ease infinite;
}

/* Glitch Effect */
@keyframes glitch {

    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);
    }
}

.glitch {
    position: relative;
    animation: glitch 0.3s ease infinite;
}

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

.glitch::before {
    animation: glitch 0.3s ease infinite;
    color: #ff00ff;
    z-index: -1;
    animation-delay: 0.1s;
}

.glitch::after {
    animation: glitch 0.3s ease infinite;
    color: #00ffff;
    z-index: -2;
    animation-delay: 0.2s;
}

/* Neon Glow */
@keyframes neonGlow {
    from {
        text-shadow:
            0 0 10px #82C341,
            0 0 20px #82C341,
            0 0 30px #82C341,
            0 0 40px #82C341;
    }

    to {
        text-shadow:
            0 0 5px #82C341,
            0 0 10px #82C341,
            0 0 15px #82C341,
            0 0 20px #82C341;
    }
}

.neonGlow {
    animation: neonGlow 1.5s ease-in-out infinite alternate;
}

/* Blur In/Out */
@keyframes blurIn {
    from {
        filter: blur(20px);
        opacity: 0;
    }

    to {
        filter: blur(0);
        opacity: 1;
    }
}

.blurIn {
    animation: blurIn 1s ease;
}

@keyframes blurOut {
    from {
        filter: blur(0);
        opacity: 1;
    }

    to {
        filter: blur(20px);
        opacity: 0;
    }
}

.blurOut {
    animation: blurOut 1s ease;
}

/* Ken Burns Effect */
@keyframes kenBurns {
    0% {
        transform: scale(1) translateX(0);
    }

    100% {
        transform: scale(1.2) translateX(-10px);
    }
}

.kenBurns {
    animation: kenBurns 20s ease infinite alternate;
}

/* Float Up Continuously */
@keyframes floatUp {
    from {
        transform: translateY(100vh) rotate(0deg);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    to {
        transform: translateY(-100vh) rotate(360deg);
        opacity: 0;
    }
}

.floatUp {
    animation: floatUp 15s linear infinite;
}

/* Morphing Background */
@keyframes morphing {
    0% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }

    50% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    }

    100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }
}

.morphing {
    animation: morphing 8s ease-in-out infinite;
}

/* Reveal Text */
@keyframes revealText {
    from {
        clip-path: inset(0 100% 0 0);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}

.revealText {
    animation: revealText 1s ease forwards;
}

/* Utility Classes for Animation Control */
.animation-paused {
    animation-play-state: paused !important;
}

.animation-running {
    animation-play-state: running !important;
}

.animation-reverse {
    animation-direction: reverse !important;
}

.animation-alternate {
    animation-direction: alternate !important;
}

.animation-alternate-reverse {
    animation-direction: alternate-reverse !important;
}

/* Reduce Motion for Accessibility */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =============================================
   FIN DEL ARCHIVO ANIMATIONS.CSS
   ============================================= */