.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 3s forwards;
        opacity: 0;
    }

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

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

    @keyframes slideInRight {
        0% {
            transform: translateX(100%);
            opacity: 0;
        }
        
        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 */
    }
}


    /* Animación de rotación 3D */
    .animated.rotate-3d {
        animation: rotate3D 2s infinite linear;
    }

    @keyframes rotate3D {
        0% {
            transform: rotateY(0);
        }

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

    /* 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 {
        opacity: 0;
        transform: translateY(100%);
        animation: slideUp 3s forwards;
    }

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

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

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

    /* Animación de deslizar desde arriba */
    .animated.appear {
        scale:0;
        opacity: 0;
        animation: appear 3s forwards;
    }

    @keyframes appear {
        to {
            opacity: 1;
            scale: 1;
        }
    }


    /* 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 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 */
    }
    

    
    /* Aleteo constante */
    @keyframes flap {
        0%, 100% {
            opacity: 1;
        }
        50% {
            opacity: 0.8;
        }
    }