/* ============================================================
   RODAPE PADRAO - identidade 2026-08 (linguagem datasheet do blog)
   Usado por: blog (todas as paginas), /acompanhar-pedido, /custo.
   Origem: footer.site-footer do blog (escolhido pelo dono 06/08).
   Requer os tokens da identidade no :root da pagina:
   --rule, --rule-strong, --acc, --dim, --mut, --ink, --mono.
   Markup de referencia: footer.site-footer em blog/index.html
   (usar .footer-wrap, NAO .container — custo/blog tem .container
   proprio com padding/largura de pagina que quebraria o rodape).
   ============================================================ */

.site-footer {
    border-top: 1px solid var(--rule-strong);
    background: #0F1114;
    margin-top: 24px;
}

.site-footer .footer-wrap { max-width: 1160px; margin: 0 auto; }
.site-footer a { text-decoration: none; }

.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    gap: 36px;
    padding: 52px 24px 34px;
}

.footer-brand .footer-logo {
    display: inline-block;
    border-left: 3px solid var(--acc);
    padding-left: 12px;
    font-weight: 800;
    letter-spacing: -0.01em;
    font-size: 1.3rem;
    color: #fff;
}

.footer-brand .footer-tag {
    color: var(--dim);
    font-size: .88rem;
    margin: 14px 0 20px;
    max-width: 340px;
    line-height: 1.6;
}

.footer-social { display: flex; gap: 10px; }

.footer-social a {
    width: 38px;
    height: 38px;
    border: 1px solid var(--rule-strong);
    border-radius: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--dim);
    transition: color .2s, border-color .2s;
}

.footer-social a:hover { color: var(--acc); border-color: var(--acc); }

.footer-col h4 {
    font-family: var(--mono);
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--dim);
    border-bottom: 1px solid var(--rule);
    padding-bottom: 10px;
    margin-bottom: 12px;
}

.footer-col a,
.footer-col .fitem {
    display: block;
    color: var(--mut);
    font-size: .88rem;
    padding: 5px 0;
    transition: color .2s;
}

.footer-col a:hover { color: var(--ink); }

.footer-legal { border-top: 1px solid var(--rule); padding: 24px 24px 40px; }

.footer-disclaimer {
    color: #6B717B;
    font-size: .76rem;
    line-height: 1.65;
    margin-bottom: 18px;
    max-width: 900px;
}

.footer-disclaimer a { color: var(--dim); border-bottom: 1px solid var(--rule-strong); }
.footer-disclaimer a:hover { color: var(--ink); }

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    color: #6B717B;
    font-size: .74rem;
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
}

.footer-bottom .fb-links { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-bottom a { color: var(--dim); }
.footer-bottom a:hover { color: var(--ink); }

@media (max-width: 720px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; padding: 40px 24px 26px; }
    .footer-brand { grid-column: 1 / -1; }
    .footer-bottom { justify-content: center; text-align: center; }
}

@media (max-width: 420px) {
    .footer-grid { grid-template-columns: 1fr; }
}