.gradient-animated-bg {
    background: linear-gradient(45deg,
        #ff0080,
        #ff8c00,
        #40e0d0,
        #8a2be2
    );

    /* background-size: 400% 400%; */
    animation: gradientAnimation 8s ease infinite;
    border-radius: 16px; /* opcional */
}

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

.gradient-animated-radial {
    background: radial-gradient(circle,
        /* #ff0080,
        #ff8c00,
        #40e0d0,
        #8a2be2, */

        #c9dbf7, #ff71c5, #fc9dff, #ffe0e0
    );
    background-size: 200% 200%;
    animation: radialGradientAnimation 8s ease-in-out infinite;
    border-radius: 16px; /* opcional */
}

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

.blob-animated-bg {
    width: 100%;
    height: 100%;
     background: /*radial-gradient(circle at 30% 30%, #ff8cd9 0%, transparent 60%),
                radial-gradient(circle at 70% 40%, #8cd4ff 0%, transparent 60%),
                radial-gradient(circle at 40% 70%, #b38cff 0%, transparent 60%),
                radial-gradient(circle at 75% 80%, #8cffc5 0%, transparent 60%); */
                radial-gradient(circle at 80% 50%, #ffb0e6 0%, transparent 20%),
                radial-gradient(circle at 70% 10%, #96b6fa 0%, transparent 32%),
                radial-gradient(circle at 20% 80%, #ffb0e6 0%, transparent 20%),
                radial-gradient(circle at 40% 80%, #ffffff 0%, transparent 70%);
    filter: drop-shadow(0 4px 128px #ffb0e6);
    background-blend-mode: screen;
    animation: blobMovement 128s ease-in-out 128s;
    /* border-radius: 20px; */
    /* Difuminado arriba y abajo */
    -webkit-mask: linear-gradient(
        to bottom,
        transparent 0%,
        black 0%,
        black 80%,
        transparent 100%
    );
    mask: linear-gradient(
        to bottom,
        transparent 0%,
        black 0%,
        black 80%,
        transparent 100%
    );
}

.blob-animated-bg2 {
    width: 100%;
    height: 100%;
     background:
                radial-gradient(circle at 20% 20%, #ffffff 0%, transparent 50%),
                radial-gradient(circle at 50% 40%, #f7a3dc 0%, transparent 30%),
                radial-gradient(circle at 40% 20%, #ffffff  0%, transparent 60%),
                radial-gradient(circle at 20% 44%, #98b6f7 0%, transparent 30%);
    background-blend-mode: screen;
    animation: blobMovement 128s ease-in-out 128s;
    /* filter: drop-shadow(0 4px 4px #ffb5e8); 8fd2ff */
    /* border-radius: 20px; */
    -webkit-mask: linear-gradient(
        to bottom,
        transparent 0%,
        black 2%,
        black 96%,
        transparent 100%
    );
    mask: linear-gradient(
        to bottom,
        transparent 0%,
        black 2%,
        black 96%,
        transparent 100%
    );
}
.blob-animated-bg3 {
    width: 100%;
    height: 100%;
     background:
                radial-gradient(circle at 50% 40%, #f7a3dc 0%, transparent 70%),
                radial-gradient(circle at 70% 20%, #ffffff 0%, transparent 50%),
                radial-gradient(circle at 40% 20%, #ffffff  0%, transparent 60%),
                radial-gradient(circle at 20% 44%, #98b6f7 0%, transparent 30%);
    background-blend-mode: screen;
    animation: blobMovement 128s ease-in-out 128s;
    /* filter: drop-shadow(0 4px 4px #ffb5e8); 8fd2ff */
    /* border-radius: 20px; */
    -webkit-mask: linear-gradient(
        to bottom,
        transparent 0%,
        black 2%,
        black 96%,
        transparent 100%
    );
    mask: linear-gradient(
        to bottom,
        transparent 0%,
        black 2%,
        black 96%,
        transparent 100%
    );
}

.blob-animated-bg4 {
    width: 100%;
    height: 100%;
     background:
                radial-gradient(circle at 100% 50%, #ffffff 0%, transparent 60%),
                radial-gradient(circle at 70% 40%, #ffffff 0%, transparent 60%),
                radial-gradient(circle at 70% 70%, #ffb5e8  0%, transparent 60%),
                radial-gradient(circle at 75% 80%, #ffffff 0%, transparent 60%);
    background-blend-mode: screen;
    /* animation: blobMovement 128s ease-in-out 128s; */
    filter: drop-shadow(0 4px 20px #ffb5e8);
    /* border-radius: 20px; */
}

@keyframes blobMovement {
    0% {
        background-position:
            30% 30%,
            70% 40%,
            40% 70%,
            75% 80%;
    }
    50% {
        background-position:
            20% 40%,
            80% 50%,
            60% 80%,
            65% 70%;
    }
    100% {
        background-position:
            30% 30%,
            70% 40%,
            40% 70%,
            75% 80%;
    }
}

.blob-img {
    position: absolute;
    width: 300px;
    height: 300px;
    background: url('/landing_waok/images/blog/bg-blog.jpg') no-repeat center/cover;
    filter: blur(40px);
    opacity: 0.6;
    animation: blobFloat 12s ease-in-out infinite;
    pointer-events: none; /* opcional */
}

@keyframes blobFloat {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(40px, -20px) scale(1.2); }
    100% { transform: translate(0, 0) scale(1); }
}

.liquid-bar {
    width: 100%;
    /* height: 60px; */
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);

    position: relative;
    z-index: 999999;

    /* Efecto vidrio */
    background: rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.10);
}

.liquid-bar2 {
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 28px;
    position: absolute;
    transform: translate(-50%,-50%) scale(1);
}

.liquid-bar3 {
    position: fixed;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);

    width: 100%;
    max-width: 98%; /* opcional */

    height: 60px; /* ajusta el alto */
    border-radius: 28px;

    background-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);

    z-index: 9999999;
}


 .dd-container {
    width: 100vw;
    height: 88px
}

 .dd-colors {
    opacity: 1;
    transform: translate3d(0,0,0)
}

@media (max-width: 768px) {
     .dd-colors {
        transform:translate3d(0,0,0) translateY(-10px)
    }
}

 .dd-color {
    filter: blur(20px);
    position: absolute;
    border-radius: 50%;
    will-change: transform;
    transform: translate3d(0,0,0)
}

@media (max-width: 768px) {
     .dd-color {
        filter:blur(17px)
    }
}

 .dd-orange {
    width: 50vw;
    height: 50px;
    background: #ea3bfd;
    top: -75px;
    right: 0;
    animation: orange-animation 1.5s ease-out forwards .5s
}

@keyframes orange-animation {
    0% {
        top: -75px;
        right: 10vw
    }

    50% {
        top: -30px
    }

    100% {
        top: -28px;
        right: -1vw
    }
}

 .dd-blue-yellow {
    width: 15vw;
    height: 150px;
    background: linear-gradient(90deg, #00a0ff, #91dafc, #91dafc, #efe2b4, #f1e8c8);
    top: -200px;
    left: 35vw;
    animation: blue-yellow-animation 2s ease-in-out forwards
}

@keyframes blue-yellow-animation {
    0% {
        top: -200px;
        transform: scaleX(100%) translateX(0)
    }

    25% {
        top: -110px;
        transform: scaleX(150%) translateX(0)
    }

    50% {
        top: -120px;
        transform: scaleX(225%) translateX(10%)
    }

    100% {
        top: -105px;
        transform: scaleX(220%) translateX(5%)
    }
}

 .dd-yellow-orange {
    /* width: 25vw;
    height: 150px; */
    background: linear-gradient(90deg,#f1e8c8,#f1e8c8,#f1e8c8,#fdb545,#fdb545,#fa8238);
    top: -200px;
    right: 30%;
    animation: yellow-orange-animation 1.2s ease-in-out forwards
}

@keyframes yellow-orange-animation {
    0% {
        top: -200px;
        transform: scaleX(50%) translateX(0)
    }

    25% {
        top: -110px;
        transform: scaleX(70%) translateX(-10%)
    }

    50% {
        top: -130px;
        transform: scaleX(225%) translateX(-5%)
    }

    100% {
        top: -110px;
        transform: scaleX(225%) translateX(0)
    }
}

 .dd-blue {
    width: 60vw;
    height: 75px;
    top: -100px;
    left: 0;
    background: #00ffde;
    animation: blue-animation 1s ease .2s forwards
}

@keyframes blue-animation {
    0% {
        top: -100px;
        transform: translateX(0)
    }

    50% {
        top: -50px;
        transform: translateX(-15%)
    }

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