/* =====================================================
   FOOTER
   SIDNEI INFORMÁTICA
===================================================== */


.site-footer {

    width:
        100%;

    color:
        #ffffff;

    background:
        #191d21;

}


/* =====================================================
   CONTAINER
===================================================== */

.footer-container {

    width:
        min(
            calc(100% - 48px),
            var(--largura-site, 1180px)
        );

    margin:
        0 auto;

}


/* =====================================================
   GRID PRINCIPAL
===================================================== */

.footer-grid {

    padding:
        52px 0 44px;

    display:
        grid;

    grid-template-columns:
        1.45fr 0.8fr 0.9fr 1fr;

    align-items:
        start;

    gap:
        55px;

}


/* =====================================================
   TÍTULOS
===================================================== */

.footer-coluna h3 {

    position:
        relative;

    width:
        100%;

    margin:
        4px 0 21px;

    padding-bottom:
        11px;

    color:
        #ffffff;

    font-size:
        14px;

    font-weight:
        800;

    text-align:
        left;

}


/*
 * Pequeno detalhe vermelho abaixo dos títulos.
 */

.footer-coluna h3::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        0;

    width:
        24px;

    height:
        2px;

    border-radius:
        5px;

    background:
        var(--vermelho, #ef2b2d);

}


/* =====================================================
   MARCA
===================================================== */

.footer-marca {

    max-width:
        330px;

}


.footer-logo {

    display:
        inline-block;

    margin-bottom:
        18px;

}


.footer-logo img {

    width:
        205px;

    height:
        auto;

    display:
        block;

}


.footer-descricao {

    max-width:
        310px;

    margin:
        0 0 21px;

    color:
        #a8afb5;

    font-size:
        13px;

    line-height:
        1.7;

}


/* =====================================================
   INSTAGRAM
===================================================== */

.footer-instagram {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    color:
        #b8bec4;

    font-size:
        12.5px;

    font-weight:
        600;

    transition:
        color 0.2s ease;

}


.footer-instagram:hover {

    color:
        #ffffff;

}


.footer-instagram-icone {

    width:
        34px;

    height:
        34px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex-shrink:
        0;

    border:
        1px solid rgba(255, 255, 255, 0.09);

    border-radius:
        8px;

    color:
        var(--vermelho, #ef2b2d);

    background:
        rgba(255, 255, 255, 0.035);

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;

}


.footer-instagram:hover
.footer-instagram-icone {

    border-color:
        rgba(239, 43, 45, 0.35);

    background:
        rgba(239, 43, 45, 0.08);

    transform:
        translateY(-1px);

}


.footer-instagram-icone svg {

    width:
        17px;

    height:
        17px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.7;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

}


.footer-instagram-icone
.instagram-ponto {

    fill:
        currentColor;

    stroke:
        none;

}


/* =====================================================
   LINKS
===================================================== */

.footer-links {

    width:
        100%;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        11px;

}


.footer-links a {

    position:
        relative;

    color:
        #a8afb5;

    font-size:
        12.5px;

    font-weight:
        500;

    line-height:
        1.4;

    text-align:
        left;

    transition:
        color 0.2s ease,
        transform 0.2s ease;

}


.footer-links a:hover {

    color:
        #ffffff;

    transform:
        translateX(3px);

}


/* =====================================================
   ATENDIMENTO
===================================================== */

.footer-atendimento-links a:first-child {

    color:
        #ffffff;

    font-weight:
        700;

}


.footer-atendimento-links a:first-child:hover {

    color:
        var(--vermelho, #ef2b2d);

}


/* =====================================================
   PARTE INFERIOR
===================================================== */

.footer-inferior {

    min-height:
        58px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

}


.footer-inferior p {

    margin:
        0;

    color:
        #777f86;

    font-size:
        11px;

    text-align:
        center;

}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 950px) {

    .footer-grid {

        grid-template-columns:
            1.4fr 1fr 1fr;

        gap:
            42px;

    }


    .footer-marca {

        grid-column:
            1 / -1;

        max-width:
            100%;

    }


    .footer-descricao {

        max-width:
            450px;

    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 650px) {

    .footer-container {

        width:
            calc(100% - 36px);

    }


    .footer-grid {

        padding:
            40px 0 34px;

        grid-template-columns:
            1fr 1fr;

        gap:
            34px 28px;

    }


    .footer-marca {

        grid-column:
            1 / -1;

    }


    .footer-logo img {

        width:
            185px;

    }


    .footer-descricao {

        max-width:
            100%;

    }

}


/* =====================================================
   MOBILE PEQUENO
===================================================== */

@media (max-width: 430px) {

    .footer-grid {

        grid-template-columns:
            1fr;

    }


    .footer-marca {

        grid-column:
            auto;

    }


    .footer-coluna h3 {

        margin-top:
            0;

    }

}