@media (max-width: 767px)  {



    /* tooter  (mobil) *//* tooter  (mobil) *//* tooter  (mobil) *//* tooter  (mobil) *//* tooter  (mobil) *//* tooter  (mobil) */
    /* tooter  (mobil) *//* tooter  (mobil) *//* tooter  (mobil) *//* tooter  (mobil) *//* tooter  (mobil) *//* tooter  (mobil) */

    .footer {
        z-index: 1;
        --footer-background: #ffffff;
        display: grid;
        position: relative;
        grid-area: footer;
        min-height: 12rem;
        max-width:100vw ;
        position: relative;
    }


    .bubbles {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 0rem;
        background: var(--footer-background);
        filter: url("#blob");
        max-width: calc(100vw - 30px);
        
    }

    .bubble {
        position: absolute;
        left: var(--position, 50%);
        background: var(--footer-background);
        border-radius: 100%;
        animation: bubble-size var(--time, 1s) ease-in infinite var(--delay, 0s),
                  bubble-move var(--time, 1s) ease-in infinite var(--delay, 0s);
        transform: translate(-50%, 100%);
        max-width:40px ;
        max-height: 40px;
    }

    .content_fotter {
        z-index: 2;
        display: grid;
        grid-template-columns: 1fr auto;
        grid-gap: 1rem;
        padding: 2rem;
        background: var(--footer-background);
        display: flex;
        align-items: start;
        justify-content: space-between;
        flex-wrap: wrap;
    }


    

    @keyframes bubble-size {
    0%, 40% {
        width: var(--size, 2rem);
        height: var(--size, 2rem);
    }
    60% {
        width: 0rem;
        height: 0rem;
    }
}


    @keyframes bubble-move {
        0% {
            bottom: -1rem;
        }
        100% {
            bottom: var(--distance, 0rem);
        }
    }



    

    .txt_1_universal_fotter{
        color: #4973ff;
        font-size: 1.8rem;
        line-height:1.2;
        font-weight: 500;
        text-align: left;
        margin: 0;
        font-family: "Afacad Flux", sans-serif; 
    }
    .txt_2_universal_fotter{
        color: #2e2e2e;
        font-size: 1.2rem;
        line-height:1.2;
        font-weight: 300;
        text-align: left;
        margin: 0;
       
        font-family: "Afacad Flux", sans-serif; 
    }

    .partes_del_div{
        max-width: 100%;
    }

    .txt_2_universal_fotter span{
        font-weight: 500;
    }
}



@media (min-width: 768px) {


    .footer {
        z-index: 1;
        --footer-background: #ffffff;
        display: grid;
        position: relative;
        grid-area: footer;
        min-height: 12rem;
        max-width:100vw ;
        position: relative;
    }
    .bubbles {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1rem;
        background: var(--footer-background);
        filter: url("#blob");
        max-width: calc(100vw - 0px);
    }
    .bubble {
        position: absolute;
        left: var(--position, 50%);
        background: var(--footer-background);
        border-radius: 100%;
        animation: bubble-size var(--time, 4s) ease-in infinite var(--delay, 0s),
                  bubble-move var(--time, 4s) ease-in infinite var(--delay, 0s);
        transform: translate(-50%, 100%);
    }
    .content_fotter {
        z-index: 2;
        display: grid;
        grid-template-columns: 1fr auto;
        grid-gap: 4rem;
        padding: 2rem;
        background: var(--footer-background);
        display: flex;
        justify-content: center;
        align-items: start;
        padding: 40px 0px;
    }
    @keyframes bubble-size {
        0%, 75% {
            width: var(--size, 4rem);
            height: var(--size, 4rem);
        }
        100% {
            width: 0rem;
            height: 0rem;
        }
    }

    @keyframes bubble-move {
        0% {
            bottom: -4rem;
        }
        100% {
            bottom: var(--distance, 10rem);
        }
    }

    .txt_1_universal_fotter{
        color: #4973ff;
        font-size: 1.8rem;
        line-height:1.2;
        font-weight: 500;
        text-align: left;
        margin: 0;
        font-family: "Afacad Flux", sans-serif; 
    }
    .txt_2_universal_fotter{
        color: #2e2e2e;
        font-size: 1.2rem;
        line-height:1.2;
        font-weight: 300;
        text-align: left;
        margin: 0;
        font-family: "Afacad Flux", sans-serif; 
    }
    .partes_del_div{
        max-width: 30vw;
    }
    .txt_2_universal_fotter span{
        font-weight: 500;
    }


}