.site-footer {
    background: #184a9c;
    color: #fff;
    padding: 60px 0 20px;
}

.site-footer > .container {
    max-width: 1400px !important;
    padding-left: 5% !important;
    padding-right: 5% !important;
}

@media (max-width: 991px) {
    .site-footer > .container { padding-left: 20px !important; padding-right: 20px !important; }
}

@media (max-width: 575px) {
    .site-footer > .container { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ==========================================================================
   MAPA DO SITE (colunas de navegação)

   Com o menu hero ligado o número de colunas vem do cadastro do menu, então
   não dá para dividir 12 vagas de grid do Bootstrap na mão como no rodapé
   antigo (col-md-2, col-md-3...). Grade com auto-fit resolve: cabe quantas
   colunas couberem, e no celular vira duas em vez de seis blocos empilhados.
   ========================================================================== */

.footer-top {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 30px 24px;
    align-items: start;

    /* "dense" preenche vaga que sobrou numa fileira anterior. No celular, com
       duas vagas, a célula larga do "Softwares" não cabe ao lado da primeira
       e desce; sem isso a vaga ao lado da primeira ficava vazia e a fileira
       seguinte também. */
    grid-auto-flow: row dense;
}

/* O rodapé antigo (chave em "menu fixo") continua sendo .row do Bootstrap:
   volta a ser flex e ZERA o gap. As colunas dele são col-md-*, que já somam
   100% da largura com as calhas por padding — somar 24px de gap entre elas
   estouraria a linha. */
.footer-top--fixo {
    display: flex;
    gap: 0;
    align-items: stretch;
}

.footer-cel { min-width: 0; }
.footer-col { min-width: 0; }

/* Célula compartilhada: as colunas de uma ou duas linhas (Blog, Governança
   em IA, os selos) dividem UMA vaga, empilhadas. Antes cada uma ficava numa
   vaga própria e o vazio embaixo delas era do tamanho da coluna mais alta da
   fileira — uns 300px de nada. */
.footer-col + .footer-col { margin-top: 26px; }

/* Célula da coluna comprida: ocupa mais vagas e distribui os links em
   subcolunas, o que a encurta em vez de esticar o rodapé para baixo. As vagas
   são decididas no PHP pela quantidade de links: >8 dupla, >15 tripla. */
.footer-cel--dupla  { grid-column: span 2; }
.footer-cel--tripla { grid-column: span 3; }

.footer-cel--dupla ul  { columns: 2; column-gap: 24px; }
.footer-cel--tripla ul { columns: 3; column-gap: 24px; }

/* Quebra de coluna no meio de um item deixaria o link partido em dois. */
.footer-cel--dupla li,
.footer-cel--tripla li {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
}

/* No celular a grade tem só duas vagas: um "span 3" criaria uma terceira
   coluna implícita e estreitaria todas as outras. */
@media (max-width: 767px) {
    .footer-cel--tripla     { grid-column: span 2; }
    .footer-cel--tripla ul  { columns: 2; }
}

.site-footer h6 {
    color: #7ec8ff;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 15px;

    /* Os títulos do rodapé antigo já vinham em CAIXA ALTA no próprio texto
       ("QUEM SOMOS", "CERTIFICAÇÕES"), mas os que agora vêm do menu estão em
       caixa normal ("Empresa", "Softwares") — o cadastro é o mesmo que
       alimenta a barra do topo, onde caixa alta ficaria estranho. Sem esta
       linha o rodapé mistura os dois estilos na mesma fileira. */
    text-transform: uppercase;
}

/* Título que é o próprio link da seção (itens do menu sem painel, como Blog
   e Governança em IA). Precisa do color:inherit porque a regra geral de <a>
   do rodapé pinta tudo de branco e apagaria o azul do título.

   E precisa listar :visited junto. A regra geral inclui ".site-footer
   a:visited", que tem especificidade (0,2,1) — uma classe MAIS uma
   pseudo-classe. Só ".site-footer h6 a" dá (0,1,2) e perde dela: quem já
   tinha visitado /governanca-ia ou /blog via o título branco, e só no hover
   ele virava azul, porque aí entrava ".site-footer h6 a:hover" (0,2,2), que
   ganha. Com os estados listados, todos ficam em (0,2,2). */
.site-footer h6 a,
.site-footer h6 a:link,
.site-footer h6 a:visited,
.site-footer h6 a:hover,
.site-footer h6 a:focus,
.site-footer h6 a:active { color: inherit; }

.site-footer h6 a:hover,
.site-footer h6 a:focus { text-decoration: underline; }

/* Subtítulo: é o título da coluna do painel do menu ("Categorias",
   "Destaques") quando o item tem mais de um grupo. Fica entre o <h6> e os
   links, mais discreto que o <h6> e mais forte que um link. */
.footer-subtitulo {
    color: rgba(255, 255, 255, .72);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    margin: 0 0 8px;
}

.site-footer ul + .footer-subtitulo { margin-top: 18px; }

.site-footer ul {
    list-style: none;
    padding: 0;
    margin-bottom: 0;
}

.site-footer li {
    font-size: 14px;
    margin-bottom: 8px;
}

.footer-certifications img {
    display: block;
    max-width: 90px;
    margin: 20px auto; /* espaço vertical entre os selos */
    background: none;  /* garante sem fundo branco */
}

.site-footer hr {
    border-color: rgba(255,255,255,.2);
    margin: 30px 0 15px;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size: 13px;
}

.footer-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.footer-social {
    display: flex;
    gap: 14px;
    justify-content: flex-end;
}

.footer-social img {
    width: 22px;
    height: 22px;
    display: block;
}

.footer-right img {
    width: 18px;
    margin-left: 10px;
}

.site-footer a,
.site-footer a:visited,
.site-footer a:hover,
.site-footer a:focus,
.site-footer a:active {
    color: #ffffff;
    text-decoration: none;
}

.site-footer ul li a:hover {
    text-decoration: underline;
}

.site-footer a img {
    text-decoration: none !important;
    border: none !important;
    outline: none !important;
}

.site-footer a:hover img {
    text-decoration: none !important;
}

/* MOBILE */
@media (max-width: 767px) {
    .footer-bottom {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .footer-meta {
        align-items: center;
    }
}