/* =========================================================
   FOOTER — invólucro
========================================================= */

.site-footer{

    max-width:1200px;

    margin:0 auto;

    padding:0 5vw 60px;

}

.footer-panel{

    position:relative;

    overflow:hidden;

    padding:40px;

    border-radius:var(--radius);

    background:var(--panel);

    border:1px solid var(--border);

    box-shadow:var(--shadow);

}

/* Linha de destaque no topo do painel */
.footer-panel::before{

    content:"";

    position:absolute;

    top:0;
    left:0;
    right:0;

    height:2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--cyan),
            #6e82ff,
            transparent
        );

    opacity:.55;

}


/* =========================================================
   FAIXA DE CONVERSÃO (CTA)
========================================================= */

.footer-cta{

    display:flex;

    align-items:center;

    justify-content:space-between;

    flex-wrap:wrap;

    gap:24px;

    padding:28px 30px;

    margin-bottom:32px;

    border-radius:var(--radius-md);

    background:
        linear-gradient(
            135deg,
            rgba(69,172,171,.14),
            rgba(40,74,111,.14)
        );

    border:1px solid rgba(69,172,171,.24);

}

.footer-cta__text h3{

    margin-bottom:6px;

    font-size:1.35rem;

    color:#fff;

}

.footer-cta__text p{

    max-width:460px;

    color:var(--muted);

    line-height:1.6;

}

.footer-cta__actions{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}


/* =========================================================
   SELOS DE CONFIANÇA
========================================================= */

.footer-trust{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:14px;

    margin-bottom:36px;

    padding:0;

    list-style:none;

}

.footer-trust__item{

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px 16px;

    border-radius:var(--radius-sm);

    font-size:.9rem;

    color:var(--text);

    background:rgba(255,255,255,.03);

    border:1px solid rgba(69,172,171,.14);

    transition:
        transform .3s ease,
        border-color .3s ease,
        background .3s ease;

}

.footer-trust__item:hover{

    transform:translateY(-3px);

    background:rgba(69,172,171,.08);

    border-color:rgba(69,172,171,.30);

}

.footer-trust__icon{

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    width:38px;

    height:38px;

    border-radius:11px;

    /* cor do ícone Lucide (stroke = currentColor) */
    color:var(--cyan);

    background:rgba(69,172,171,.12);

    border:1px solid rgba(69,172,171,.22);

}


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

.footer-grid{

    display:grid;

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

    gap:32px;

}


/* -------- Marca -------- */

.footer-brand__name{

    position:relative;

    display:inline-block;

    margin-bottom:16px;

    padding-bottom:10px;

    font-size:1.4rem;

    color:#fff;

}

/* Detalhe em gradiente sob o nome da marca */
.footer-brand__name::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:46px;

    height:3px;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            var(--cyan),
            #6e82ff
        );

}

.footer-brand p{

    max-width:380px;

    color:var(--muted);

    line-height:1.7;

}

/* Redes sociais (ícones circulares) */
.footer-socials{

    display:flex;

    gap:12px;

    margin-top:20px;

}

.footer-socials a{

    display:flex;

    align-items:center;

    justify-content:center;

    width:42px;

    height:42px;

    border-radius:50%;

    color:var(--cyan);

    background:rgba(255,255,255,.03);

    border:1px solid rgba(69,172,171,.22);

    transition:
        transform .3s ease,
        color .3s ease,
        background .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;

}

.footer-socials a svg{

    width:19px;

    height:19px;

}

.footer-socials a:hover{

    transform:translateY(-3px);

    color:#fff;

    background:rgba(69,172,171,.16);

    border-color:rgba(69,172,171,.45);

    box-shadow:0 8px 20px rgba(69,172,171,.22);

}


/* -------- Colunas de links -------- */

.footer-column h4{

    margin-bottom:16px;

    font-size:1rem;

    color:#fff;

}

.footer-links{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.footer-links a{

    width:fit-content;

    text-decoration:none;

    color:var(--muted);

    font-size:.95rem;

    transition:
        color .3s ease,
        transform .3s ease;

}

/* Realce com leve deslocamento no hover */
.footer-links a:hover{

    color:var(--text);

    transform:translateX(4px);

}


/* =========================================================
   RODAPÉ INFERIOR
========================================================= */

.footer-divider{

    margin:32px 0 22px;

    height:1px;

    background:rgba(255,255,255,.08);

}

.footer-bottom{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    color:var(--muted);

    font-size:.88rem;

}

.footer-made strong{

    color:var(--text);

}

.footer-privacy-link{

    color:var(--muted);

    text-decoration:none;

    transition:color var(--transition);

}

.footer-privacy-link:hover{

    color:var(--cyan);

}


/* =========================================================
   RESPONSIVO (específico do footer)
   As regras globais em responsive.css continuam válidas.
========================================================= */

@media(max-width:900px){

    .footer-panel{

        padding:32px;

    }

    /* Selos passam a 2 colunas */
    .footer-trust{

        grid-template-columns:repeat(2,1fr);

    }

    /* -------- Centralização em tablet e mobile -------- */

    .footer-grid{

        text-align:center;

    }

    /* Parágrafo da marca centralizado */
    .footer-brand p{

        margin-left:auto;

        margin-right:auto;

    }

    /* Detalhe em gradiente centralizado sob o nome */
    .footer-brand__name::after{

        left:50%;

        transform:translateX(-50%);

    }

    /* Redes sociais centralizadas */
    .footer-socials{

        justify-content:center;

    }

    /* Links centralizados (mantém largura mínima p/ clique) */
    .footer-links{

        align-items:center;

    }

    .footer-links a:hover{

        transform:none;

    }

    /* Rodapé inferior centralizado
       (seletor mais específico p/ vencer o responsive.css) */
    .footer-panel .footer-bottom{

        justify-content:center;

        align-items:center;

        text-align:center;

    }

}

@media(max-width:600px){

    .footer-cta{

        padding:24px;

        text-align:center;

    }

    .footer-cta__text p{

        margin:0 auto;

    }

    .footer-cta__actions{

        width:100%;

        justify-content:center;

    }

    /* Selos empilhados em 1 coluna */
    .footer-trust{

        grid-template-columns:1fr;

    }

    .footer-socials{

        justify-content:center;

    }

}