/* =============================
   LOGO CENTRAL FOOTER
============================= */

.site-footer__top-logo {
    padding-top: clamp(20px, 4vw, 40px);
    padding-bottom: clamp(10px, 2vw, 20px);
}

.site-footer__logo-central {
    width: clamp(180px, 40vw, 480px);
    height: auto;
}

/* linha amarela */
.site-footer__top-logo::after {
    content: "";
    display: block;
    width: clamp(200px, 60vw, 640px);
    height: 3px;
    background: #ffcc00;
    margin: 20px auto 0;
    border-radius: 3px;
}

/* =============================
   MOBILE — 2 colunas (< 768px)
============================= */

@media (max-width: 767.98px) {
    .site-footer__grid {
        row-gap: 24px !important;
    }

    /* Alinha o conteúdo à esquerda dentro de cada coluna */
    .site-footer__col,
    .site-footer__title {
        text-align: left !important;
    }

    .site-footer__title {
        font-size: 12px;
        padding-bottom: 8px;
        border-bottom: 1px solid rgba(255, 255, 255, .18);
        margin-bottom: 10px;
    }

    .site-footer__list {
        font-size: 12px;
        gap: 7px;
    }

    /* Redes sociais: centraliza e reduz ícones */
    .site-footer__social-col {
        justify-content: center;
        padding-top: 4px;
    }

    .site-footer__social-grid {
        grid-template-columns: repeat(4, 44px);
        gap: 12px;
    }

    .site-footer__social-link {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }
}

/* =============================
   TABLET — 4 colunas (768–991px)
============================= */

@media (min-width: 768px) and (max-width: 991.98px) {
    .site-footer__social-col {
        justify-content: center;
        margin-top: 8px;
    }

    .site-footer__social-grid {
        grid-template-columns: repeat(4, 46px);
    }
}