.footer{
    background:#000;
    color:#fff;
    padding:10px 20px;
}


/* CONTENEDOR */
.footer-container{
    max-width:1200px;
    margin:0 auto;

    padding:35px clamp(20px,4vw,35px);

    display:flex;
    justify-content:space-between;
    align-items:flex-start;

    gap:40px;
}


/* COLUMNAS */
.footer-left,
.footer-center{
    flex:1;
}


/* =========================
   IZQUIERDA
========================= */

.footer-logo{
    width:307px;
    max-width:100%;
    margin-bottom:10px;
}

.footer-desc{
    font-size:14px;
    color:#bbb;
    max-width:450px;
    line-height:1.5;
    margin-top:15px;
}


/* =========================
   CENTRO QR
========================= */

.footer-center{
    display:flex;
    justify-content:center;
    align-items:center;
}

.footer-center{
    flex:1.7;

    display:flex;
    justify-content:center;
    align-items:center;

    padding:0;
}


.QR{
    display:flex;
    flex-direction:column;

    align-items:center;
    text-align:center;

    width:100%;
}


.QR h3{
    font-family:'Montserrat',sans-serif;
    font-size:16px;
    font-weight:600;

    margin-bottom:15px;

    color:#fff;
}


.QR img{
    width:300px;
    height:auto;

    max-width:100%;

    object-fit:contain;

    display:block;
}


/* =========================
   DERECHA
========================= */

.footer-right{
    flex:0.3;

    display:flex;
    justify-content:flex-end;
}


.footer-right-content{
    display:flex;
    flex-direction:column;
    align-items:center;

    gap:15px;
}


.footer-img{
    width:50px;
    height:auto;
}


/* REDES */
.social-icons{
    display:flex;
    flex-direction:column;
    align-items:center;

    gap:10px;
}


.social-icons a{
    color:#fff;
    font-size:18px;

    display:flex;
    align-items:center;
    justify-content:center;

    transition:.3s;
}


.social-icons a:hover{
    color:#f2ee00;
    transform:scale(1.1);
}



/* =========================
   COPYRIGHT
========================= */

.footer-bottom{
    width:100%;

    display:flex;
    justify-content:center;
    align-items:center;

    padding:10px 0 0px;

    margin-top:-30px;
}


.footer-bottom .copyright{
    color:#fff;

    margin:0;

    font-size:10px;
    text-align:center;
}

/* =========================
   RESPONSIVE FOOTER
========================= */

@media(max-width:768px){

    .footer{
        padding:30px 15px;
        overflow:hidden;
    }


    .footer-container{

        width:100%;

        flex-direction:column;

        align-items:center;

        justify-content:center;

        text-align:center;

        padding:30px 10px;

        gap:40px;

    }



    /* =========================
       LOGO + DESCRIPCIÓN
    ========================= */

    .footer-left{

        width:100%;

        display:flex;

        flex-direction:column;

        align-items:center;

    }


    .footer-logo{

        width:230px;

        max-width:90%;

    }


    .footer-desc{

        max-width:320px;

        font-size:14px;

        line-height:1.6;

        text-align:center;

        margin:15px auto 0;

    }



    /* =========================
       QR CENTRO
    ========================= */

    .footer-center{

        width:100%;

        padding:0;

        display:flex;

        justify-content:center;

        align-items:center;

    }


    .QR{

        width:100%;

        display:flex;

        flex-direction:column;

        align-items:center;

        text-align:center;

    }


    .QR h3{

        font-size:15px;

        margin-bottom:15px;

    }


    .QR img{

        width:min(300px,85vw);

        height:auto;

    }



    /* =========================
       PARTE DERECHA
    ========================= */

    .footer-right{

        width:100%;

        flex:none;

        display:flex;

        justify-content:center;

        align-items:center;

    }


    .footer-right-content{

        display:flex;

        flex-direction:column;

        align-items:center;

        gap:20px;

    }


    .footer-img{

        width:45px;

    }



    /* =========================
       REDES
    ========================= */

    .social-icons{

        display:flex;

        flex-direction:row;

        justify-content:center;

        align-items:center;

        gap:18px;

    }


    .social-icons a{

        font-size:20px;

    }



    /* =========================
       COPYRIGHT
    ========================= */

    .footer-bottom{

        width:100%;

        display:flex;

        justify-content:center;

        align-items:center;

        margin:0;

        padding:25px 10px 10px;

        border-top:1px solid rgba(255,255,255,.15);

    }


    .footer-bottom .copyright{

        font-size:11px;

        white-space:normal;

        text-align:center;

        margin:0;

    }

}