.test-block {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 10rem;
        margin-right: auto;
        margin-left: auto;
        background-color: red;
        width: 50%;
        margin-top: 40rem;
        color: white;
        text-align: center;
    }
/* Animación de rotación */
    .animated.rotate {
        animation: rotate 2s infinite linear;
    }

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

        100% {
            transform: rotate(360deg);
        }
    }

    /* Animación de aumento y reducción de escala */
    .animated.scale {
        animation: scaleAnimation 7s infinite ease-in-out;
    }

    @keyframes scaleAnimation {
        0% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.1);
        }

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

    /* Animación de rebote */
    .animated.bounce {
        animation: bounce 2s infinite ease-in-out;
    }

    @keyframes bounce {

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

        40% {
            transform: translateY(-30px);
        }

        60% {
            transform: translateY(-15px);
        }
    }

    /* Animación de movimiento desde fuera de la pantalla (desplazamiento a la izquierda) */
    .animated.slide-left {
        animation: slideInLeft 1.5s forwards;
        opacity: 0;
    }

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

        50% {
            transform: translateX(5%);
            opacity: 1;
        }
        
        100% {
            transform: translateX(0%);
            opacity: 1;
        }
    }

    /* Animación de movimiento desde fuera de la pantalla (desplazamiento a la derecha) */
    .animated.slide-right {
        animation: slideInRight 5s forwards;
        opacity: 0;
    }

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

        50% {
            transform: translateX(-5%);
            opacity: 1;
        }
        
        100% {
            transform: translateX(0);
            opacity: 1;
        }
    }

    /* Animación de desvanecimiento y desplazamiento */
    .animated.fade-slide {
        opacity: 0;
        transform: translateY(20px);
        animation: fadeInSlide 0.5s forwards;
    }

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

    /* Animación de sacudida */
    .animated.shake {
        animation: shake 0.5s infinite;
    }

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

        25% {
            transform: translateX(-5px);
        }

        50% {
            transform: translateX(5px);
        }

        75% {
            transform: translateX(-5px);
        }

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

    /* Animación de pulsar */
    .animated.pulser {
        animation: pulser 1.5s infinite !important;
    }

    @keyframes pulser {
        0%,
        100% {
            transform: scale(1) !important;
        }

        50% {
            transform: scale(1.05) !important; /* Ajuste de escala para evitar parpadeo */
        }
    }

    .animated.sweep-right {
        animation: sweepRight 3s forwards !important;
    }

    @keyframes sweepRight {
        0% {
            width: 100%;
        }

        100% {
            width: 0%;
        }
    }

    .animated.translate-right {
        animation: translateRight 1.5s forwards !important;
    }

    @keyframes translateRight {
        to {
            transform: translateX(100%);
        }
    }
    
    .animated.translate-left {
        animation: translateLeft 1.5s forwards !important;
    }

    @keyframes translateLeft {
        to {
            transform: translateX(-100%);
        }
    }   

    .animated.fadeout-down {
        animation: fadeoutDown 3s forwards !important;
    }

    @keyframes fadeoutDown {
        0%{
            transform: translateY(0);
            opacity: 100;
        }
        99%{
            opacity: 100;
        }
        100%{
            transform: translateY(5vw);
            opacity: 0;
        }
    }

    .animated.appear {
        animation: appear 10s forwards !important;
    }

    @keyframes appear {
        0% {
            opacity: 0%;
        }

        100% {
            opacity: 100%;
        }
    }

    /* Animación de rotación 3D */
    .animated.rotate-3d {
        animation: rotate3D 1s forwards ease-in-out;
    }

    @keyframes rotate3D {
        from {
            transform: rotateY(180deg);
        }
        to {
            transform: rotateY(0deg);
        }
    }

    /* Animación de rotación 3D */
    .animated.rotate-3d-reverse {
        animation: rotate3D 1.5s forwards ease-in-out;
    }

    @keyframes rotate3D {
        from {
            transform: rotateY(-180deg);
        }
        to {
            transform: rotateY(0deg);
        }
    }


    /* Animación de 'pop' */
    .animated.pop {
        animation: pop 0.5s forwards;
    }

    @keyframes pop {
        0% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.2);
        }

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

    /* Animación de deslizar desde abajo */
    .animated.slide-up {
        transform: translateY(100%);
        animation: slideUp 3s forwards;
    }

    @keyframes slideUp {
        to {
            transform: translateY(0);
        }
    }

    /* Animación de deslizar desde arriba */
    .animated.slide-down {
        transform: translateY(-100%);
        animation: slideDown 2s forwards;
    }

    @keyframes slideDown {
        to {
            transform: translateY(0);
        }
    }

    /* Animación de cambio de color en gradiente */
    .animated.gradient {
        background: linear-gradient(90deg, #5B21B6, #F14ECB);
        background-size: 200% 200%;
        animation: gradient-animation 2s ease infinite;
    }

    @keyframes gradient-animation {
        0% {
            background-position: 0% 50%;
        }

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

        100% {
            background-position: 0% 50%;
        }
    }
    
        /* Animación de flotación suave */
    .animated.float {
        animation: float 5s infinite ease-in-out;
    }
    
    @keyframes float {
        0% {
            transform: translate(0, 0);
        }
        25% {
            transform: translate(-5px, 3px);
        }
        50% {
            transform: translate(5px, -3px);
        }
        75% {
            transform: translate(-3px, -5px);
        }
        100% {
            transform: translate(0, 0);
        }
    }

        /* Animación de flotación suave */
    .animated.float {
        animation: float 5s infinite ease-in-out;
    }
    
    @keyframes float {
        0% {
            transform: translate(0, 0);
        }
        25% {
            transform: translate(-5px, 3px);
        }
        50% {
            transform: translate(5px, -3px);
        }
        75% {
            transform: translate(-3px, -5px);
        }
        100% {
            transform: translate(0, 0);
        }
    }
        /* Animación de aumento de escala y desenfoque */
    .animated.pop-fadein {
        opacity: 1;
        animation: popFadeIn 1.5s forwards ease-in-out;
    }
    
    @keyframes popFadeIn {
        0% {
            transform: scale(0);
            filter: blur(1.5rem);
        }
        100% {
            transform: scale(1);
            filter: blur(0rem);
        }
    }

    /* Animación activada al hacer scroll */
    .animated.scroll {
        opacity: 0;
        transform: translateY(50px);
        transition: opacity 0.5s ease, transform 0.5s ease;
    }

    .animated.scroll.visible {
        opacity: 1;
        transform: translateY(0);
    }

    @media (prefers-reduced-motion: reduce) {
        .animated.scroll {
            transition: none;
        }
    }

    .butterfly {
        width: 5%; /* Tamaño de la mariposa */
        height: auto;
        position: absolute;
        transition: transform 0.2s ease-in-out, translate 6s linear; /* Rotación rápida y movimiento lento */
    }