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


.footer{

    width:100%;

    background:var(--color-dark);

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

    padding: 0 var(--container-padding) 0 var(--container-padding);

}



/* CONTAINER */

.footer__container{

    width:100%;

    max-width:var(--container-width);

    margin:0 auto;

    padding:var(--space-16) var(--container-padding);

    display:grid;

    gap:var(--space-12);

}




/* BRAND */

.footer__brand{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:var(--space-10);

    padding-top: var(--navbar-padding);

}



.footer__brand-content{

    max-width:600px;

    display:flex;

    flex-direction:column;

    align-items: center;

    gap:var(--space-5);

    text-align:center;

}

.footer__brand-content h2{

    margin:0;

    font-family:var(--font-body);

    font-size:var(--heading-md);

    font-weight:800;

    color:var(--color-white);

}

.footer__logo{

    width:220px;

    flex-shrink:0;

}


.footer__description{

    margin:0;

    color:rgba(255,255,255,.82);

    line-height:1.8;

    text-align: center;

}

.footer__values{

    display:flex;

    justify-content:flex-end;

    gap:12px;

    color:var(--color-primary);

    font-weight:700;

}


/* LINKS */

.footer__links{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:var(--space-10);

    padding:var(--navbar-padding) 0 var(--container-padding) 0;

}




.footer__column{

    display:flex;

    flex-direction:column;

    gap:var(--space-4);

}




.footer__column h3{

    color:var(--color-white);

    font-size:var(--text-lg);

    margin-bottom:var(--space-2);

}




.footer__column a{

    color:var(--color-muted);

    text-decoration:none;

    transition:var(--transition-normal);

}




.footer__column span{

    color:var(--color-muted);

}




.footer__column a:hover{

    color:var(--color-primary);

    transform:translateX(4px);

}




/* BOTTOM */

.footer__bottom{

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

}




.footer__bottom-container{

    width:100%;

    max-width:var(--container-width);

    margin:0 auto;

    padding:28px var(--container-padding);

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

}




.footer__bottom p{

    color:var(--color-muted);

    font-size:var(--text-sm);

}




.footer__bottom a{

    color:var(--color-white);

    text-decoration:none;

    font-weight: 500;

    transition:var(--transition-normal);

}




.footer__bottom a:hover{

    color:var(--color-white);

}

.footer::after{

    content:"";

    display:block;

    width:100%;

    height:4px;

    background:var(--color-primary);

}

.footer h2,
.footer span,
.footer a {

    display:inline-flex;

    width:max-content;

}


/* RESPONSIVO */

@media(max-width:900px){

    .footer__container{

        flex-direction:column;

    }

    .footer__links{

        width:100%;

        justify-content:space-between;

        flex-wrap:wrap;

        gap:var(--space-10);

    }

}

@media(max-width:600px){


    .footer__container{

        grid-template-columns:1fr;

    }



    .footer__brand{

        flex-direction:column;

        align-items:flex-start;

        gap:var(--space-8);

    }



    .footer__brand-content{

        text-align:left;

        max-width:100%;

    }



    .footer__values{

        justify-content:flex-start;

    }



    .footer__links{

        grid-template-columns:1fr;

        gap:var(--space-8);

    }



    .footer__bottom-container{

        flex-direction:column;

        align-items:flex-start;

        text-align:left;

    }


}

@media(max-width:600px){

    .footer__links{

        flex-direction:column;

    }

    .footer__bottom-container{

        flex-direction:column;

        text-align:center;

    }

    .footer__logo{

        width:180px;

    }

}

@media(max-width:700px){

    .footer__brand{

        flex-direction:column;

        align-items:flex-start;

    }


    .footer__brand-content{

        text-align:left;

    }


    .footer__values{

        justify-content:flex-start;

    }

}

@media(max-width:600px){


    .footer__brand{

        align-items:center;

        text-align:center;

    }



    .footer__brand-content{

        text-align:center;

        align-items:center;

    }



    .footer__values{

        justify-content:center;

    }



    .footer__links{

        text-align:center;

    }



    .footer__column{

        align-items:center;

        text-align:center;

    }



    .footer__bottom-container{

        align-items:center;

        text-align:center;

        justify-content:center;

    }


}