/* =====================================
   FINANCEHUB - DESIGN SYSTEM v2.0
===================================== */


/* ==========================
   VARIÁVEIS DO TEMA
========================== */

:root {

    --primary-color: #1565c0;
    --primary-dark: #0d47a1;

    --secondary-color: #2e7d32;

    --background-color: #f4f6f9;
    --card-color: #ffffff;

    --text-color: #333333;
    --text-light: #666666;

    --border-color: #dddddd;

    --shadow:
        0 4px 15px rgba(0,0,0,0.08);

    --radius:
        12px;

    --transition:
        .3s ease;

    --max-width:
        900px;

}





/* ==========================
   RESET
========================== */


* {

    margin:0;

    padding:0;

    box-sizing:border-box;

}



html {

    scroll-behavior:smooth;

}



body {


    font-family:
    Arial,
    Helvetica,
    sans-serif;


    background:
    var(--background-color);


    color:
    var(--text-color);


    line-height:
    1.6;

}





/* ==========================
   CONTAINER
========================== */


.container {


    width:
    90%;


    max-width:
    var(--max-width);


    margin:
    auto;

}





/* ==========================
   HEADER
========================== */


.header {


    background:
    var(--card-color);


    padding:
    20px 0;


    box-shadow:
    var(--shadow);


    margin-bottom:
    30px;

}



.header h2 {


    color:
    var(--primary-color);


    font-size:
    28px;

}





/* ==========================
   FOOTER
========================== */


.footer {


    margin-top:
    50px;


    padding:
    25px 0;


    background:
    var(--card-color);


    text-align:
    center;


    color:
    var(--text-light);


    box-shadow:
    0 -3px 10px rgba(0,0,0,.05);

}






/* ==========================
   BREADCRUMB
========================== */


.breadcrumb {


    font-size:
    14px;


    color:
    var(--text-light);


    margin-bottom:
    20px;

}







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


h1 {


    color:
    var(--primary-color);


    margin-bottom:
    15px;


    font-size:
    32px;

}



h2 {


    margin-bottom:
    20px;

}



p {


    margin-bottom:
    25px;


    color:
    var(--text-color);

}







/* ==========================
   CARD PRINCIPAL
========================== */


.card {


    background:
    var(--card-color);


    padding:
    30px;


    border-radius:
    var(--radius);


    box-shadow:
    var(--shadow);


    margin-bottom:
    30px;

}







/* ==========================
   FORMULÁRIOS
========================== */


label {


    display:
    block;


    margin-top:
    18px;


    margin-bottom:
    8px;


    font-weight:
    bold;

}



input {


    width:
    100%;


    padding:
    14px;


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


    border-radius:
    8px;


    font-size:
    16px;


    transition:
    var(--transition);

}



input:focus {


    outline:none;


    border-color:
    var(--primary-color);


    box-shadow:
    0 0 5px rgba(21,101,192,.25);

}

select{

    width:100%;

    padding:14px;

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

    border-radius:8px;

    font-size:16px;

    background:#ffffff;

    transition:var(--transition);

}

select:focus{

    outline:none;

    border-color:var(--primary-color);

    box-shadow:0 0 5px rgba(21,101,192,.25);

}



/* ==========================
   BOTÕES
========================== */


button {


    width:
    100%;


    margin-top:
    25px;


    padding:
    15px;


    border:
    none;


    border-radius:
    8px;


    background:
    var(--primary-color);


    color:
    white;


    font-size:
    18px;


    cursor:
    pointer;


    transition:
    var(--transition);

}



button:hover {


    background:
    var(--primary-dark);


    transform:
    translateY(-2px);

}







/* ==========================
   RESULTADOS
========================== */


.resultado {


    margin-top:
    35px;

}



.resultado-card {


    display:
    flex;


    justify-content:
    space-between;


    align-items:
    center;


    gap:
    20px;


    padding:
    20px;


    margin-bottom:
    15px;


    background:
    #f8fbff;


    border-left:
    5px solid var(--primary-color);


    border-radius:
    8px;

}



.resultado-card strong {


    color:
    var(--secondary-color);


    font-size:
    20px;

}







/* ==========================
   GRÁFICOS
========================== */


.grafico {


    background:
    var(--card-color);


    padding:
    25px;


    border-radius:
    var(--radius);


    box-shadow:
    var(--shadow);


    margin-bottom:
    30px;

}

.grafico canvas{

    width:100% !important;

    height:350px !important;

}



/* ==========================
   EXPLICAÇÃO SEO
========================== */


.explicacao {


    background:
    var(--card-color);


    padding:
    30px;


    border-radius:
    var(--radius);


    box-shadow:
    var(--shadow);


    margin-top:
    30px;

}







/* ==========================
   FAQ
========================== */


.faq {


    background:
    var(--card-color);


    padding:
    30px;


    border-radius:
    var(--radius);


    box-shadow:
    var(--shadow);


    margin-top:
    30px;

}







/* ==========================
   PUBLICIDADE
========================== */


.ad-container {


    min-height:
    120px;


    display:
    flex;


    align-items:
    center;


    justify-content:
    center;


    background:
    #eeeeee;


    color:
    #777;


    margin:
    30px 0;


    border-radius:
    var(--radius);

}







/* ==========================
   RESPONSIVIDADE
========================== */


@media(max-width:700px){



    h1 {

        font-size:
        26px;

    }



    .card,
    .grafico,
    .faq,
    .explicacao {


        padding:
        20px;

    }



    .resultado-card {


        flex-direction:
        column;


        align-items:
        flex-start;

    }



}

/* ==========================
   LINKS
========================== */


a {

    color:
    var(--primary-color);

    text-decoration:
    none;

}



a:hover {

    text-decoration:
    underline;

}
/* ==========================
   CARDS INVESTIMENTOS
========================== */


.cards-investimentos {


    display:grid;


    grid-template-columns:
    repeat(auto-fit,minmax(260px,1fr));


    gap:25px;


    margin-top:30px;


}



.cards-investimentos .card {


    transition:.3s ease;


}



.cards-investimentos .card:hover {


    transform:translateY(-5px);


}



.cards-investimentos a {


    display:inline-block;


    margin-top:15px;


    font-weight:bold;


}

/*
=================================================
SIMULADOR DE FINANCIAMENTO IMOBILIÁRIO
=================================================
*/


/*
=================================================
CARDS DE RESUMO
=================================================
*/

.cards-resumo {

    display: grid;

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

    gap: 18px;

    margin-top: 20px;

}


/*
=================================================
COMPARAÇÃO SAC E PRICE
=================================================
*/

.comparacao-financiamento {

    display: grid;

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

    gap: 24px;

    margin-top: 20px;

}


.comparacao-card {

    margin: 0;

    width: auto;

}


.comparacao-card h3 {

    margin-top: 0;

    margin-bottom: 18px;

    font-size: 26px;

}


.comparacao-card .resultado-card {

    margin-bottom: 14px;

}


.comparacao-card .resultado-card:last-child {

    margin-bottom: 0;

}


/*
=================================================
BLOCOS DE RESULTADO
=================================================
*/

.resultado {

    margin-top: 32px;

}


.resultado > h2 {

    margin-top: 0;

    margin-bottom: 20px;

}


.resultado > p {

    line-height: 1.7;

}


/*
=================================================
DIAGNÓSTICO
=================================================
*/

#diagnostico,
#textoComparacao {

    line-height: 1.7;

    margin-top: 20px;

}


#melhorSistema {

    display: block;

    font-size: 24px;

    line-height: 1.4;

}


/*
=================================================
GRÁFICOS
=================================================
*/

.grafico-container {

    background: var(--card-color);

    padding: 24px;

    border-radius: 16px;

    margin-bottom: 28px;

    overflow: hidden;

}


.grafico-container:last-child {

    margin-bottom: 0;

}


.grafico-container h3 {

    margin-top: 0;

    margin-bottom: 20px;

}


.grafico-container canvas {

    width: 100% !important;

    max-width: 100%;

}


/*
=================================================
TABELAS
=================================================
*/

.resultado table {

    width: 100%;

    border-collapse: collapse;

    margin-top: 22px;

    background: var(--card-color);

    border-radius: 14px;

    overflow: hidden;

}


.resultado thead {

    background: rgba(
        0,
        102,
        204,
        0.08
    );

}


.resultado th,
.resultado td {

    padding: 16px 18px;

    text-align: left;

    vertical-align: middle;

    border-bottom: 1px solid rgba(
        0,
        0,
        0,
        0.08
    );

    white-space: nowrap;

}


.resultado th {

    font-weight: 700;

}


.resultado tbody tr:last-child td {

    border-bottom: none;

}


.resultado tbody tr:hover {

    background: rgba(
        0,
        102,
        204,
        0.04
    );

}


/*
=================================================
PUBLICIDADE
=================================================
*/

.ad-container {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 8px;

    min-height: 140px;

    padding: 24px;

    text-align: center;

}


.ad-container h3,
.ad-container p {

    margin: 0;

}


/*
=================================================
CALCULADORAS RELACIONADAS
=================================================
*/

.calculadoras-relacionadas {

    margin-top: 40px;

}


.calculadoras-relacionadas .cards-investimentos {

    display: grid;

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

    gap: 22px;

}


.calculadoras-relacionadas .card {

    display: flex;

    flex-direction: column;

    margin: 0;

}


.calculadoras-relacionadas .card p {

    flex-grow: 1;

}


.calculadoras-relacionadas .card a {

    display: inline-block;

    margin-top: 18px;

    font-weight: 700;

    text-decoration: none;

}


/*
=================================================
RESPONSIVIDADE
=================================================
*/

@media (max-width: 800px) {

    .cards-resumo,
    .comparacao-financiamento,
    .calculadoras-relacionadas .cards-investimentos {

        grid-template-columns: 1fr;

    }


    .resultado {

        overflow-x: auto;

    }


    .resultado table {

        min-width: 680px;

    }


    .grafico-container {

        padding: 18px;

    }


    .comparacao-card h3 {

        font-size: 23px;

    }


    #melhorSistema {

        font-size: 21px;

    }

}


@media (max-width: 520px) {

    .resultado th,
    .resultado td {

        padding: 13px 14px;

        font-size: 15px;

    }


    .grafico-container {

        padding: 14px;

    }


    .grafico-container h3 {

        font-size: 20px;

    }

}

/* =========================================================
   FINANCEHUB — GLOBAL CORE OFICIAL
   Header, footer, navegação, acessibilidade e compatibilidade
   com os Componentes Oficiais V3.1.
   ========================================================= */


/* ==========================
   TOKENS GLOBAIS OFICIAIS
========================== */

:root {

    --fh-primary:
        #1d4ed8;

    --fh-primary-hover:
        #1e40af;

    --fh-primary-soft:
        #eef4ff;

    --fh-navy:
        #0b1733;

    --fh-text:
        #18243a;

    --fh-text-muted:
        #617086;

    --fh-background:
        #f4f7fb;

    --fh-surface:
        #ffffff;

    --fh-border:
        #dce4ef;

    --fh-footer:
        #07142d;

    --fh-radius-sm:
        10px;

    --fh-radius-md:
        16px;

    --fh-radius-lg:
        24px;

    --fh-shadow-sm:
        0 8px 24px rgba(15, 35, 70, 0.06);

    --fh-shadow-md:
        0 18px 48px rgba(15, 35, 70, 0.09);

    --fh-container:
        1360px;

}


/* ==========================
   BASE E ACESSIBILIDADE
========================== */

html {

    scroll-behavior:
        smooth;

}


body {

    margin:
        0;

    color:
        var(--fh-text);

    background:
        var(--fh-background);

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    -webkit-font-smoothing:
        antialiased;

    text-rendering:
        optimizeLegibility;

}


img {

    max-width:
        100%;

    height:
        auto;

}


button,
input,
select,
textarea {

    font:
        inherit;

}


a {

    text-underline-offset:
        3px;

}


.container {

    width:
        min(92%, var(--fh-container));

    margin-inline:
        auto;

}


.skip-link {

    position:
        fixed;

    top:
        12px;

    left:
        12px;

    z-index:
        9999;

    padding:
        12px 16px;

    color:
        #ffffff;

    background:
        var(--fh-navy);

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

    transform:
        translateY(-160%);

    transition:
        transform 0.2s ease;

}


.skip-link:focus {

    transform:
        translateY(0);

}


.sr-only {

    position:
        absolute !important;

    width:
        1px !important;

    height:
        1px !important;

    padding:
        0 !important;

    margin:
        -1px !important;

    overflow:
        hidden !important;

    clip:
        rect(0, 0, 0, 0) !important;

    white-space:
        nowrap !important;

    border:
        0 !important;

}


/* ==========================
   HEADER OFICIAL
========================== */

.site-header,
.header {

    position:
        relative;

    z-index:
        1000;

    color:
        var(--fh-text);

    background:
        rgba(255, 255, 255, 0.97);

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

    box-shadow:
        0 8px 28px rgba(15, 35, 70, 0.04);

}


.site-header {

    position:
        sticky;

    top:
        0;

    backdrop-filter:
        blur(14px);

}


.header-inner {

    display:
        grid;

    grid-template-columns:
        180px minmax(0, 1fr);

    align-items:
        center;

    gap:
        28px;

    min-height:
        78px;

}


.header-brand {

    display:
        inline-flex;

    align-items:
        center;

    width:
        fit-content;

    text-decoration:
        none;

}


.header-logo {

    display:
        block;

    width:
        158px;

    height:
        auto;

}


.main-navigation {

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    flex-wrap:
        wrap;

    gap:
        2px;

    min-width:
        0;

}


.main-navigation a {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        42px;

    padding:
        0 12px;

    color:
        #253149;

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

    font-size:
        14px;

    font-weight:
        700;

    text-decoration:
        none;

    white-space:
        nowrap;

    transition:
        color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;

}


.main-navigation a:hover,
.main-navigation a:focus-visible {

    color:
        var(--fh-primary);

    background:
        var(--fh-primary-soft);

    transform:
        translateY(-1px);

}


.main-navigation a[aria-current="page"],
.main-navigation a.active {

    color:
        var(--fh-primary);

    background:
        var(--fh-primary-soft);

}


/* Compatibilidade com headers antigos */

.header .container {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    min-height:
        72px;

}


.header h2 {

    margin:
        0;

    color:
        var(--fh-navy);

    font-size:
        24px;

}


/* ==========================
   FOOTER OFICIAL
========================== */

.site-footer,
.footer {

    margin-top:
        72px;

    color:
        rgba(255, 255, 255, 0.74);

    background:
        var(--fh-footer);

}


.footer-grid {

    display:
        grid;

    grid-template-columns:
        minmax(300px, 1.45fr)
        repeat(3, minmax(150px, 0.6fr));

    gap:
        44px;

    padding-top:
        56px;

    padding-bottom:
        48px;

}


.footer-brand {

    min-width:
        0;

}


.footer-logo-link {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        fit-content;

    padding:
        8px 12px;

    background:
        #ffffff;

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

    box-shadow:
        var(--fh-shadow-sm);

    text-decoration:
        none;

}


.footer-logo {

    display:
        block;

    width:
        160px;

    height:
        auto;

}


.footer-brand h2,
.footer-column h2 {

    margin:
        0 0 16px;

    color:
        #ffffff;

}


.footer-brand h2 {

    margin-top:
        20px;

    font-size:
        20px;

    line-height:
        1.3;

}


.footer-brand p {

    max-width:
        500px;

    margin:
        0;

    color:
        rgba(255, 255, 255, 0.58);

    font-size:
        14px;

    line-height:
        1.7;

}


.footer-column h2 {

    font-size:
        15px;

}


.footer-column nav {

    display:
        grid;

    gap:
        10px;

}


.footer-column a {

    width:
        fit-content;

    color:
        rgba(255, 255, 255, 0.66);

    font-size:
        13px;

    line-height:
        1.45;

    text-decoration:
        none;

    transition:
        color 0.2s ease,
        transform 0.2s ease;

}


.footer-column a:hover,
.footer-column a:focus-visible {

    color:
        #ffffff;

    transform:
        translateX(2px);

}


.footer-disclaimer {

    padding:
        20px 0;

    border-top:
        1px solid rgba(255, 255, 255, 0.09);

    border-bottom:
        1px solid rgba(255, 255, 255, 0.09);

}


.footer-disclaimer p {

    max-width:
        1060px;

    margin:
        0;

    color:
        rgba(255, 255, 255, 0.48);

    font-size:
        12px;

    line-height:
        1.65;

}


.footer-bottom-content {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        24px;

    min-height:
        66px;

}


.footer-bottom p {

    margin:
        0;

    color:
        rgba(255, 255, 255, 0.48);

    font-size:
        12px;

}


/*
   Identificação interna de desenvolvimento.
   Mantida no HTML por compatibilidade, mas oculta na produção.
*/

.footer-version {

    display:
        none !important;

}


/* Compatibilidade com footers antigos */

.footer {

    padding:
        34px 0;

}


.footer .container {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


.footer p {

    margin:
        0;

    color:
        rgba(255, 255, 255, 0.58);

    text-align:
        center;

}


/* Quando o footer antigo estiver dentro do novo componente */

.site-footer .footer-bottom,
.site-footer .footer-disclaimer {

    width:
        100%;

}


/* ==========================
   FOCO E INTERAÇÃO
========================== */

.site-header a:focus-visible,
.site-footer a:focus-visible,
.skip-link:focus-visible {

    outline:
        3px solid rgba(37, 99, 235, 0.35);

    outline-offset:
        3px;

}


/* ==========================
   PÁGINAS INSTITUCIONAIS
========================== */

.institutional-page main {

    min-height:
        60vh;

}


.institutional-content {

    max-width:
        920px;

    margin:
        48px auto 80px;

    padding:
        40px;

    background:
        var(--fh-surface);

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

    border-radius:
        var(--fh-radius-lg);

    box-shadow:
        var(--fh-shadow-sm);

}


.institutional-content h1,
.institutional-content h2,
.institutional-content h3 {

    color:
        var(--fh-navy);

}


.institutional-content p,
.institutional-content li {

    color:
        var(--fh-text-muted);

    line-height:
        1.75;

}


/* ==========================
   RESPONSIVIDADE GLOBAL
========================== */

@media (max-width: 1180px) {

    .header-inner {

        grid-template-columns:
            155px minmax(0, 1fr);

        gap:
            18px;

    }


    .main-navigation a {

        padding-inline:
            9px;

        font-size:
            13px;

    }


    .footer-grid {

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

    }

}


@media (max-width: 900px) {

    .site-header {

        position:
            relative;

    }


    .header-inner {

        grid-template-columns:
            1fr;

        align-items:
            start;

        padding-top:
            14px;

        padding-bottom:
            14px;

    }


    .main-navigation {

        justify-content:
            flex-start;

        flex-wrap:
            nowrap;

        width:
            100%;

        padding-bottom:
            4px;

        overflow-x:
            auto;

        scrollbar-width:
            thin;

    }


    .main-navigation a {

        flex:
            0 0 auto;

    }

}


@media (max-width: 680px) {

    .container {

        width:
            min(92%, 100%);

    }


    .header-logo {

        width:
            145px;

    }


    .footer-grid {

        grid-template-columns:
            1fr;

        gap:
            34px;

        padding-top:
            44px;

        padding-bottom:
            38px;

    }


    .footer-bottom-content {

        align-items:
            flex-start;

        flex-direction:
            column;

        justify-content:
            center;

        gap:
            6px;

        padding:
            16px 0;

    }


    .institutional-content {

        margin-top:
            28px;

        margin-bottom:
            52px;

        padding:
            24px;

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

    }

}


/* ==========================
   MOVIMENTO REDUZIDO
========================== */

@media (prefers-reduced-motion: reduce) {

    html {

        scroll-behavior:
            auto;

    }


    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

        scroll-behavior:
            auto !important;

    }

}


/* ==========================
   IMPRESSÃO
========================== */

@media print {

    .site-header,
    .header,
    .site-footer,
    .footer,
    .skip-link,
    .calculator-v3-ad,
    .ads-slot,
    .anuncio,
    .publicidade {

        display:
            none !important;

    }


    body {

        color:
            #000000;

        background:
            #ffffff;

    }


    .container {

        width:
            100%;

        max-width:
            none;

    }


    a {

        color:
            #000000;

        text-decoration:
            none;

    }

}