#footer {
    &{
        background: #0d0d0d;
        color: #ffffff;
        width: 100%;
        display: flex;
        flex-direction: column;
        padding: 50rem 7%;
        gap: 32rem;
    }

    .desktop &{
        flex-direction: row;
        align-items: flex-start;
        gap: 5%;
        padding: 60rem 7%;
    }
}

#footer .col {
    &{
        display: flex;
        flex-direction: column;
        gap: 12rem;
        flex: 0 0 auto;
    }

    .desktop &{ flex: 1; }
}

#footer .col-logo {
    .desktop &{ flex: 1.4; }
}

/* ── Logo no footer ── */

#footer .footer-logo {
    &{
        display: flex;
        align-items: center;
        gap: 10rem;
        text-decoration: none;
        color: #ffffff;
        margin-bottom: 4rem;
    }

    & img{
        height: 36rem;
        width: auto;
    }

    & span{
        font-family: 'Bebas Neue', sans-serif;
        font-size: 28rem;
        letter-spacing: 2rem;
        line-height: 1;
    }
}

/* ── Colunas ── */

#footer .col-titulo {
    &{
        font-size: 15rem;
        font-weight: 700;
        color: #ffffff;
        text-transform: uppercase;
        letter-spacing: 1rem;
        margin-bottom: 4rem;
    }
}

#footer .col p {
    &{
        font-size: 13rem;
        color: rgba(255,255,255,0.6);
        line-height: 1.6;
        max-width: 280rem;
    }
}

#footer .col ul {
    &{
        display: flex;
        flex-direction: column;
        gap: 8rem;
    }
}

#footer .col ul li {
    &{
        font-size: 13rem;
        color: rgba(255,255,255,0.6);
        line-height: 1.5;
    }
}

#footer .col ul li a {
    &{
        color: rgba(255,255,255,0.6);
        transition: color .2s;
    }
    &:hover{ color: #ffffff; }
}

/* ── Redes Sociais ── */

#footer .social {
    &{
        display: flex;
        gap: 12rem;
        margin-top: 4rem;
    }
}

#footer .social a {
    &{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40rem;
        height: 40rem;
        border-radius: 50%;
        background: rgba(255,255,255,0.08);
        color: rgba(255,255,255,0.7);
        transition: background .2s, color .2s;
    }

    &:hover{
        background: rgba(255,255,255,0.18);
        color: #ffffff;
    }

    & svg{
        width: 18rem;
        height: 18rem;
    }
}

/* ── Copyright ── */

#footer .copyright {
    &{
        width: 100%;
        padding-top: 24rem;
        border-top: 1px solid rgba(255,255,255,0.08);
        font-size: 12rem;
        color: rgba(255,255,255,0.35);
        text-align: center;
    }

    .desktop &{
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex: 0 0 auto;
        width: auto;
        border-top: none;
        padding-top: 0;
        align-self: flex-end;
    }
}