/* ======================================================
   HOMEPAGE v3 | FOOTER v0.3
   /includes/footer.php
   ====================================================== */

.footer{
    /* background:var(--color-dark-bg); */
    background:#010b21;
    color:#edf5fa;
    padding:32px 0 20px;
    margin:0;
}

.footer-container{
    max-width:1200px;
    margin:0 auto;
    padding:0 24px;
}

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

.footer-row{
    display:flex;
    gap:40px;
    align-items:flex-start;
}

.footer-col{
    flex:1;
    position:relative;
}

.footer-col:not(:last-child)::after{
    content:"";
    position:absolute;
    top:0;
    right:-20px;
    width:1px;
    height:100%;
    background:rgba(255,255,255,.12);
}

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

.footer-brand img{
    height:90px;
    width:auto;
    display:block;
    margin-bottom:12px;
}

.footer-brand p{
    max-width:260px;
    line-height:1.6;
    font-size:.95rem;
}

/* =====================================
   TITULOS
===================================== */

.footer h4{
    color:#9fd2ee;
    font-size:.80rem;
    text-transform:uppercase;
    letter-spacing:.08em;
    margin-bottom:14px;
}

/* =====================================
   CONTATO
===================================== */

.footer-contact p{
    margin:8px 0;
    line-height:1.5;
}

.contact-icon{
    display:inline-block;
    width:20px;
}

@media (max-width:991px){

    /* Ícone + texto de cada linha de contato centralizados como uma
       unidade só (2026-07-28, prints 86/87 — pedido do Luciano). Antes,
       ".contact-icon" inline-block + texto solto dependiam só do
       "text-align:center" do ".footer-contact" (regra mais abaixo) pra
       centralizar — funcionava no celular por coincidência de largura,
       mas não no tablet. "inline-flex" com "justify-content:center"
       centraliza o par ícone+texto de verdade, em qualquer largura
       dentro deste breakpoint. */
    .footer-contact p{
        display:flex;
        align-items:center;
        justify-content:center;
        gap:6px;
        text-align:center;
    }
}

.contact-icon.whatsapp{
    color:#25d366;
}

.contact-icon.location{
    color:#ff5c93;
}

/* =====================================
   SOCIAL
===================================== */

.social-icons{
    display:flex;
    gap:12px;
    margin-bottom:28px;
}

.social-icons img{
    width:30px;
    height:auto;
}

/* =====================================
   RECONHECIMENTO (2026-08-05, Selo Sintonia A+)
===================================== */

/* 2026-09-08 (pedido do Luciano, print temp/232.jpg): só o selo +
   legenda ficam centralizados dentro da coluna — o título
   "RECONHECIMENTO" continua alinhado à esquerda, igual aos outros
   títulos de coluna do footer. Antes o text-align:center estava no
   ".footer-reconhecimento" (a coluna inteira), o que também
   centralizava o <h4> sem querer — motivo original (print temp/52.jpg,
   "selo preso na esquerda") continua válido, só que agora escopado
   só no <a> que envolve selo+legenda. */
.footer-reconhecimento a{
    display:block;
    text-align:center;
}

/* Voltou pra 90px (2026-08-05, print 53 — pedido do Luciano: "eu disse
   aumentar um pouco OU adicionar legenda, você fez os dois, estourou").
   A legenda abaixo já ocupa o espaço que faltava — não empilhar as duas
   correções juntas. */
.footer-reconhecimento img{
    width:90px;
    height:auto;
    display:block;
    margin:0 auto;
    transition:var(--transition-fast);
}

/* TREMER AO PASSAR O MOUSE (2026-08-05, pedido do Luciano: "efeito de
   tremer, tipo smartphone vibrando"). Troca o hover anterior (só zoom,
   ".footer-reconhecimento img:hover{transform:scale(1.05)}") — o
   Luciano já pediu antes pra não empilhar efeito em cima de efeito no
   mesmo elemento ("não quero poluir o site com muitos efeitos"), então
   este substitui o zoom em vez de somar. Pequenos deslocamentos +
   rotações alternadas, bem rápido (.35s) e em loop enquanto o mouse
   fica em cima — pausa/some assim que o mouse sai, igual vibração de
   celular de verdade. Respeita "reduzir movimento" do sistema, mesmo
   padrão já usado no chacoalho do banner do Header (ver header.css). */
.footer-reconhecimento img:hover{
    animation:footer-selo-vibrar .35s linear infinite;
}

@keyframes footer-selo-vibrar{
    0%, 100%{ transform:translate(0,0) rotate(0deg); }
    20%{ transform:translate(-1px,1px) rotate(-2deg); }
    40%{ transform:translate(1px,-1px) rotate(2deg); }
    60%{ transform:translate(-1px,-1px) rotate(-1.5deg); }
    80%{ transform:translate(1px,1px) rotate(1.5deg); }
}

@media(prefers-reduced-motion:reduce){
    .footer-reconhecimento img:hover{
        animation:none;
    }
}

.footer-reconhecimento a{
    display:inline-block;
    text-decoration:none;
}

/* Legenda "Selo Sintonia A+ da RFB." (2026-08-05, pedido do Luciano) —
   mesmo tamanho/cor do texto de Contato ao lado (.footer-contact p),
   pra não destoar do resto do footer. */
.footer-reconhecimento-legenda{
    display:block;
    margin-top:10px;
    color:#edf5fa;
    font-size:.85rem;
    line-height:1.5;
}

.footer-affiliation-logos{
    display:flex;
    gap:16px;
    align-items:center;
}

.footer-affiliation-logos img{
    width:auto;
    margin-top:-18px;
}

.logo-cnu{
    width:auto; /* o <img> leva width/height reais; a largura segue a altura */
    height:34px;
}

.logo-cut{
    width:auto; /* o <img> leva width/height reais; a largura segue a altura */
    height:34px;
}

.logo-fruse{
    width:auto; /* o <img> leva width/height reais; a largura segue a altura */
    height:62px;
}

/* =====================================
   DIVISOR
===================================== */

.footer-divider{
    height:1px;
    margin:24px 0 18px;
    background:rgba(255,255,255,.10);
}

/* =====================================
   COPY
===================================== */

.footer-bottom{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:10px 20px;
}

.footer-copy{
    text-align:left;
}

.footer-copy p{
    margin:4px 0;
    font-size:.82rem;
    line-height:1.6;
}

/* .footer-copy é item flex (estabelece BFC próprio), então a margem
   do último <p> não colapsa pra fora — fica "presa" dentro da caixa e
   desalinha o align-items:flex-end do .footer-bottom com os links
   legais ao lado (2026-07-11, achado pelo Luciano visualmente). */
.footer-copy p:last-child{
    margin-bottom:0;
}

.footer-copy a{
    color:#01BAFA; /* 2026-09-11 (pedido do Luciano): link já nasce no
       azul-claro exato da logo nova — antes só o hover usava esse tom. */
    font-weight:700;
    text-decoration:none; /* estava sublinhado por padrão (nenhuma regra
       tirava o underline nativo do <a>) — errado, fora do padrão do site
       (sublinhado só deve aparecer no hover). */
    transition:var(--transition-fast);
}

.footer-copy a:hover{
    color:#ffffff; /* 2026-09-11 (pedido do Luciano): no hover clareia pra
       branco — fundo do rodapé é escuro, branco garante contraste alto e
       deixa nítido que é um estado diferente do azul-claro padrão. */
    text-decoration:underline; /* sublinhado agora só aparece no hover, invertido do que estava */
}

/* Links "Termos de Uso" / "Política de Privacidade e Cookies"
   (2026-07-11) — mesma fonte, tamanho e cor do texto de copyright ao
   lado (pedido explícito do Luciano: não deve parecer um link "azul"
   comum, só ganha sublinhado no hover pra continuar identificável
   como clicável). */
.footer-legal-links{
    display:flex;
    align-items:center;
    gap:10px;
    flex-shrink:0;
}

.footer-legal-link{
    color:#01BAFA; /* 2026-09-11 (pedido do Luciano): azul-claro exato da
       logo nova, igual ao link de créditos ao lado */
    font-size:.82rem;
    line-height:1.6;
    text-decoration:none;
}

.footer-legal-link:hover{
    color:#ffffff; /* 2026-09-11: mesmo motivo do link de créditos — clareia
       pra branco no hover, contraste alto no fundo escuro do rodapé */
    text-decoration:underline;
}

.footer-legal-sep{
    color:rgba(237,245,250,.4);
    font-size:.82rem;
    line-height:1.6;
}

/* =====================================
   FAIXA AZUL-CLARA (era verde — 2026-09-11, pedido do Luciano)
===================================== */

.footer-accent{
    width:100%;
    height:15px;
    background:#01BAFA; /* era #88a33f (verde) — 2026-09-11, azul-claro da logo nova */
    margin:0;
}

/* =====================================
   RESPONSIVO
===================================== */

/* 900px → 991px (2026-07-28, prints 86/87 — pedido do Luciano: no
   tablet a centralização não estava entrando). 900px deixava de fora
   uma faixa comum de tablet (901-991px, mesmo corte usado no resto do
   site pra tablet — ver header.css/main.css), onde o footer ainda
   renderizava com o layout de desktop (colunas lado a lado, texto à
   esquerda). */
@media (max-width:991px){

    /* A causa raiz de verdade do desalinhamento (2026-07-28, prints
       88/89 — "não mudou muita coisa"): ".footer-row" herda
       "align-items:flex-start" da regra de base (pensada pro layout
       lado a lado do desktop). Sem resetar isso aqui, cada coluna vira
       uma caixa ENCOLHIDA no tamanho do próprio conteúdo, grudada na
       esquerda — e "text-align:center" (mais abaixo) só centraliza o
       texto DENTRO dessa caixa estreita, que continua presa à
       esquerda. No mobile isso quase não aparecia (a caixa acabava
       quase do tamanho da tela de tão estreita); no tablet, com mais
       espaço sobrando, o desalinhamento ficava óbvio. "align-items:
       center" centraliza a caixa de cada coluna inteira no eixo
       horizontal — SÓ AGORA o texto centralizado dentro dela fica
       centralizado de verdade na tela. */
    .footer-row{
        flex-direction:column;
        align-items:center;
        gap:32px;
    }

    .footer-col:not(:last-child)::after{
        display:none;
    }

    .footer-brand,
    .footer-contact,
    .footer-social,
    .footer-reconhecimento{
        text-align:center;
    }

    /* 2026-09-08 (pedido do Luciano, print temp/232.jpg) — ver
       ".contact-icon" vazio adicionado no HTML (includes/footer.php)
       pra alinhar o texto do endereço com as linhas de telefone/
       whatsapp no desktop. No mobile o layout já centraliza
       ícone+texto juntos (regra ".footer-contact p" logo abaixo),
       então esse span vazio só atrapalharia — escondido aqui. */
    .contact-icon:empty{
        display:none;
    }

    .footer-brand img{
        margin:0 auto 12px;
    }

    /* .footer-reconhecimento img é display:block (regra de base) —
       text-align:center sozinho não centraliza bloco, precisa do
       margin:auto (mesma lógica já documentada em ".footer-brand img"
       acima). */
    .footer-reconhecimento img{
        margin:0 auto;
    }

    .footer-brand p{
        max-width:none;
    }

    .social-icons{
        justify-content:center;
    }

    .footer-affiliation-logos{
        justify-content:center;
    }

    /* Mesmo bug do ".footer-row" corrigido acima (prints 88/89) — aqui
       em ".footer-bottom": "align-items:flex-end" (regra de base, pro
       layout lado a lado do desktop) nunca tinha sido resetado, então
       ".footer-legal-links" (Termos de Uso / Política...) encolhia e
       grudava na direita mesmo com "text-align:center" (prints 90/91).
       "align-items:center" centraliza a caixa inteira. */
    .footer-bottom{
        flex-direction:column;
        align-items:center;
        text-align:center;
    }

    .footer-legal-links{
        justify-content:center;
    }

    .footer-copy{
        text-align:center;
    }
}
/* 2026-10-20 PageSpeed: pula renderização do que está fora da tela */
.homepage2-servicos,.homepage2-informe-sindical,.homepage2-faq,.homepage2-parceiros,.footer{content-visibility:auto;contain-intrinsic-size:auto 700px}
/* 2026-10-26: no celular a cabeça dos mascotes passa do topo da faixa; content-visibility cortava essa parte. Nessas 3 seções fica desligado no celular. */
@media(max-width:991px){
.homepage2-servicos,.homepage2-informe-sindical,.homepage2-faq{content-visibility:visible}
}