/* =========================================================
   BRF PREVIDÊNCIA - VISUAL EDIÇÃO 46
   Referência: Jornal BRF Previdência
   ========================================================= */

:root{
    --j-bg:#f7f5f2;
    --j-white:#ffffff;
    --j-text:#081d4b;
    --j-muted:#686f82;

    --j-blue-dark:#123486;
    --j-blue:#284cba;
    --j-periwinkle:#7d8ff2;
    --j-coral:#f16c76;
    --j-gray:#767d8c;

    --j-border:#ddd8d2;
}

/* GERAL */
html{
    scroll-behavior:smooth;
}

body{
    background:var(--j-bg) !important;
    color:var(--j-text) !important;
}

.container{
    max-width:1120px !important;
}

/* HEADER */
.site-header{
    background:rgba(247,245,242,.96) !important;
    border-bottom:1px solid #e5e0da !important;
    box-shadow:none !important;
}

.header-inner{
    min-height:78px !important;
}

.brand img{
    max-height:42px !important;
    width:auto !important;
}

.main-nav a{
    color:var(--j-text) !important;
    font-weight:600 !important;
}

.main-nav a:hover{
    color:var(--j-blue) !important;
}

/* BOTÕES */
.btn{
    border-radius:999px !important;
    font-weight:700 !important;
    box-shadow:none !important;
}

.btn-orange,
.header-cta,
.final-cta .btn{
    background:var(--j-coral) !important;
    border-color:var(--j-coral) !important;
    color:white !important;
}

.btn-blue{
    background:var(--j-blue) !important;
    border-color:var(--j-blue) !important;
    color:white !important;
}

/* HERO IGUAL À LINGUAGEM DO JORNAL */
.hero{
    background:
        radial-gradient(circle at 80% 30%, rgba(125,143,242,.30), transparent 32%),
        linear-gradient(125deg,#092765 0%,#173d9d 53%,#284cba 100%) !important;

    padding-top:76px !important;
    padding-bottom:50px !important;
}

.hero-shape{
    opacity:.15 !important;
}

.hero-copy .edition-tag{
    background:transparent !important;
    border:0 !important;
    padding:0 !important;
    color:#d9e2ff !important;
    letter-spacing:.12em !important;
    font-weight:700 !important;
}

.hero h1,
.hero-copy h1{
    color:#fff !important;
}

.hero h1 span{
    color:var(--j-coral) !important;
}

.hero-lead,
.hero-footnote{
    color:rgba(255,255,255,.88) !important;
}

.hero-actions .btn-outline{
    color:#fff !important;
    border:1px solid rgba(255,255,255,.75) !important;
    background:transparent !important;
}

/* CARD PRINCIPAL DO HERO */
.editorial-card{
    background:#fff !important;
    border:0 !important;
    border-radius:24px !important;
    box-shadow:0 18px 50px rgba(5,20,70,.18) !important;
}

.editorial-card h2{
    color:var(--j-text) !important;
}

.card-label{
    background:var(--j-coral) !important;
    color:#fff !important;
}

.check-row{
    border-color:#ece8e3 !important;
}

.check-row span{
    color:var(--j-blue) !important;
}

.check-row.accent{
    background:#eef0ff !important;
}

.chip-blue{
    background:var(--j-periwinkle) !important;
    color:#fff !important;
}

.chip-orange{
    background:var(--j-coral) !important;
    color:#fff !important;
}

/* ATALHOS */
.hero-shortcuts a{
    background:#fff !important;
    border:1px solid var(--j-border) !important;
    border-radius:18px !important;
    box-shadow:none !important;
}

.hero-shortcuts a:hover{
    border-color:var(--j-blue) !important;
}

.shortcut-num{
    color:var(--j-blue) !important;
}

/* CABEÇALHOS DAS SEÇÕES */
.section{
    background:transparent !important;
}

.kicker,
.section-heading .kicker{
    color:var(--j-coral) !important;
    font-weight:800 !important;
}

.section h2,
.section h3,
.section-heading h2{
    color:var(--j-text) !important;
}

/* CARDS - MESMA IDEIA DA PÁGINA DO JORNAL */
.topic-card,
.channel-card,
.help-card,
.step-card,
.app-step,
.beneficiary-panel{
    background:#fff !important;
    border:1px solid var(--j-border) !important;
    border-radius:18px !important;
    box-shadow:none !important;
}

.topic-card{
    position:relative;
    overflow:hidden;
}

.topic-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:4px;
}

.topic-blue::before{
    background:var(--j-blue) !important;
}

.topic-peach::before{
    background:var(--j-coral) !important;
}

.topic-orange::before{
    background:var(--j-periwinkle) !important;
}

.topic-blue,
.topic-peach,
.topic-orange{
    background:#fff !important;
}

.topic-icon{
    background:#edf0ff !important;
    color:var(--j-blue) !important;
}

.topic-no{
    color:var(--j-blue) !important;
}

.topic-card a{
    color:var(--j-coral) !important;
}

/* CANAIS */
.channel-top b{
    color:var(--j-blue) !important;
}

.channel-art{
    background:#f5f2ee !important;
    border:1px solid #e4ded8 !important;
}

.browser-page button,
.phone-frame button{
    background:var(--j-coral) !important;
    color:#fff !important;
}

.phone-circle{
    background:var(--j-blue) !important;
}

.channel-link{
    color:var(--j-blue) !important;
}

/* AJUDA */
.help-card{
    background:#f2f3ff !important;
}

.help-label{
    color:var(--j-coral) !important;
}

.contact-list a{
    color:var(--j-text) !important;
    border-color:#dddff0 !important;
}

/* PASSO A PASSO
   Azul / Azul / Lilás / Coral / Cinza
   igual ao ritmo visual da matéria
*/
.steps-section{
    background:#fff !important;
}

.steps-intro .step-badge{
    background:var(--j-coral) !important;
    color:#fff !important;
    border-radius:999px !important;
}

.step-card{
    border-radius:0 !important;
    margin:0 !important;
}

.steps-list .step-card:nth-child(1){
    border-top:4px solid var(--j-blue-dark) !important;
}

.steps-list .step-card:nth-child(2){
    border-top:4px solid var(--j-blue) !important;
}

.steps-list .step-card:nth-child(3){
    border-top:4px solid var(--j-periwinkle) !important;
}

.steps-list .step-card:nth-child(4){
    border-top:4px solid var(--j-coral) !important;
}

.step-card span{
    background:transparent !important;
    border:0 !important;
    font-size:2.15rem !important;
    font-weight:900 !important;
}

.steps-list .step-card:nth-child(1) span{
    color:var(--j-blue-dark) !important;
}

.steps-list .step-card:nth-child(2) span{
    color:var(--j-blue) !important;
}

.steps-list .step-card:nth-child(3) span{
    color:var(--j-periwinkle) !important;
}

.steps-list .step-card:nth-child(4) span{
    color:var(--j-coral) !important;
}

/* APP */
.app-steps{
    background:var(--j-bg) !important;
}

.app-layout{
    background:linear-gradient(
        120deg,
        var(--j-blue-dark),
        var(--j-blue)
    ) !important;

    border-radius:24px !important;
    padding:46px !important;
}

.app-copy h2,
.app-copy p,
.app-copy .kicker{
    color:#fff !important;
}

.app-step{
    background:#fff !important;
}

.app-step b{
    color:var(--j-blue) !important;
}

.app-steps-grid .app-step:nth-child(2) b{
    color:var(--j-coral) !important;
}

.app-steps-grid .app-step:nth-child(3) b{
    color:var(--j-periwinkle) !important;
}

.app-steps-grid .app-step:nth-child(4) b{
    color:var(--j-gray) !important;
}

/* BENEFICIÁRIOS */
.beneficiary-panel{
    background:#fff !important;
}

.beneficiary-checks span{
    background:#f8f6f3 !important;
    border:1px solid var(--j-border) !important;
    color:var(--j-text) !important;
}

.beneficiary-checks i{
    color:var(--j-blue) !important;
}

.orange-disc{
    background:var(--j-coral) !important;
    opacity:.14 !important;
}

.heart{
    color:var(--j-coral) !important;
}

.note-a{
    background:#edf0ff !important;
    color:var(--j-blue) !important;
}

.note-b{
    background:#ffe8ea !important;
    color:var(--j-coral) !important;
}

/* FAQ IGUAL AO JORNAL */
.faq-section{
    background:#fff !important;
}

.accordion details{
    background:#fff !important;
    border:1px solid #ded8d2 !important;
    border-radius:14px !important;
    margin-bottom:10px !important;
    box-shadow:none !important;
}

.accordion details[open]{
    border:1.5px solid var(--j-periwinkle) !important;
}

.accordion summary{
    color:var(--j-text) !important;
    font-weight:800 !important;
}

.accordion summary span{
    width:28px !important;
    height:28px !important;
    border-radius:50% !important;
    background:#edf0ff !important;
    color:var(--j-blue) !important;
}

.accordion details[open] summary span{
    background:var(--j-coral) !important;
    color:#fff !important;
}

/* CTA FINAL */
.final-cta{
    background:var(--j-bg) !important;
}

.final-panel{
    background:linear-gradient(
        120deg,
        var(--j-blue-dark),
        var(--j-blue)
    ) !important;

    border-radius:24px !important;
    border:0 !important;
}

.final-panel h2,
.final-panel > div > span{
    color:#fff !important;
}

/* FOOTER */
.site-footer{
    background:#f3f0ec !important;
    color:var(--j-text) !important;
    border-top:1px solid #ddd8d2 !important;
}

.footer-links strong,
.footer-links a,
.footer-brand p,
.footer-bottom span,
.footer-bottom a{
    color:var(--j-text) !important;
}

/* PROGRESSO */
.scroll-progress span{
    background:linear-gradient(
        90deg,
        var(--j-blue-dark),
        var(--j-blue),
        var(--j-periwinkle),
        var(--j-coral)
    ) !important;
}

/* MOBILE */
@media(max-width:900px){
    .app-layout{
        padding:28px !important;
    }

    .hero{
        padding-top:48px !important;
    }
}

/* ==========================================================
   LOGO OFICIAL BRF PREVIDÊNCIA
   ========================================================== */

.site-header .brand{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    width:210px !important;
    min-width:210px !important;
    height:58px !important;
    overflow:visible !important;
}

.site-header .brand .logo-oficial-header{
    display:block !important;
    width:auto !important;
    height:42px !important;
    max-width:200px !important;
    max-height:42px !important;
    object-fit:contain !important;
    object-position:left center !important;
    margin:0 !important;
    padding:0 !important;
    opacity:1 !important;
    visibility:visible !important;
}

@media(max-width:768px){

    .site-header .brand{
        width:170px !important;
        min-width:170px !important;
    }

    .site-header .brand .logo-oficial-header{
        height:36px !important;
        max-width:165px !important;
    }
}


/* ==================================================
   LOGO OFICIAL BRF PREVIDÊNCIA
   ================================================== */

.site-header .brand{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    width:220px !important;
    min-width:220px !important;
}

.site-header .logo-brf-oficial{
    display:block !important;
    width:auto !important;
    height:48px !important;
    max-width:210px !important;
    max-height:48px !important;
    object-fit:contain !important;
    object-position:left center !important;
    visibility:visible !important;
    opacity:1 !important;
}

@media(max-width:768px){

    .site-header .brand{
        width:175px !important;
        min-width:175px !important;
    }

    .site-header .logo-brf-oficial{
        height:39px !important;
        max-width:170px !important;
    }
}


/* =========================================================
   LOGO - ENCAIXE FINAL NO HEADER
   ========================================================= */

.site-header .header-inner{
    min-height:82px !important;
    align-items:center !important;
}

.site-header .brand{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;

    width:230px !important;
    min-width:230px !important;
    height:82px !important;

    overflow:visible !important;
}

.site-header .brand img,
.site-header .logo-brf-oficial{
    display:block !important;

    width:205px !important;
    height:auto !important;

    max-width:205px !important;
    max-height:68px !important;

    object-fit:contain !important;
    object-position:left center !important;

    margin:0 !important;
    padding:0 !important;

    transform:scale(1.12) !important;
    transform-origin:left center !important;
}

@media(max-width:768px){

    .site-header .brand{
        width:180px !important;
        min-width:180px !important;
        height:72px !important;
    }

    .site-header .brand img,
    .site-header .logo-brf-oficial{
        width:165px !important;
        max-width:165px !important;
        max-height:55px !important;
        transform:scale(1.08) !important;
    }
}


/* =========================================================
   HEADER - BRANCO UNIFORME COM O LOGO OFICIAL
   ========================================================= */

.site-header{
    background:#ffffff !important;
    border-bottom:1px solid #eeeeee !important;
}

.site-header .header-inner{
    background:#ffffff !important;
}

.site-header .container{
    background:#ffffff !important;
}

.site-header .brand{
    background:#ffffff !important;
}

.site-header .brand img,
.site-header .logo-brf-oficial{
    background:#ffffff !important;
    border:none !important;
    box-shadow:none !important;
}


/* =========================================================
   AJUSTE FINAL - CTA + FOOTER
   PADRÃO JORNAL BRF PREVIDÊNCIA
   ========================================================= */

/* ---------- CTA FINAL ---------- */

.final-cta{
    background:#f7f5f2 !important;
    padding:72px 0 !important;
}

.final-cta .final-panel{
    position:relative !important;
    overflow:hidden !important;

    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:40px !important;

    max-width:1120px !important;
    min-height:280px !important;

    margin:0 auto !important;
    padding:56px 64px !important;

    background:
        radial-gradient(circle at 88% 30%, rgba(125,143,242,.32), transparent 28%),
        linear-gradient(125deg,#092765 0%,#173d9d 55%,#284cba 100%) !important;

    border:none !important;
    border-radius:28px !important;

    box-shadow:none !important;
}

/* Remove interferência de elementos decorativos sobre o texto */
.final-cta .final-panel::before,
.final-cta .final-panel::after{
    pointer-events:none !important;
    opacity:.14 !important;
}

.final-panel > div{
    position:relative !important;
    z-index:2 !important;
    max-width:690px !important;
}

.final-panel > div > span{
    display:block !important;

    margin-bottom:12px !important;

    color:#b9c8ff !important;

    font-size:.78rem !important;
    line-height:1.2 !important;
    font-weight:800 !important;

    text-transform:uppercase !important;
    letter-spacing:.12em !important;
}

.final-panel h2{
    margin:0 !important;

    color:#ffffff !important;

    font-size:clamp(2rem,4vw,3.35rem) !important;
    line-height:1.05 !important;
    font-weight:800 !important;

    max-width:700px !important;
}

.final-panel .btn,
.final-cta .btn-orange{
    position:relative !important;
    z-index:3 !important;

    flex:0 0 auto !important;

    background:#f16c76 !important;
    color:#ffffff !important;

    border:1px solid #f16c76 !important;
    border-radius:999px !important;

    padding:17px 28px !important;

    font-size:1rem !important;
    font-weight:800 !important;

    white-space:nowrap !important;

    box-shadow:none !important;
}

.final-panel .btn:hover{
    background:#e85f69 !important;
    border-color:#e85f69 !important;

    transform:translateY(-2px) !important;
}


/* ---------- FOOTER ---------- */

.site-footer{
    background:#082a63 !important;
    color:#ffffff !important;

    border-top:none !important;

    padding-top:34px !important;
}

.footer-main{
    display:grid !important;
    grid-template-columns:1.15fr 1fr 1fr !important;

    align-items:start !important;

    gap:48px !important;

    padding-top:0 !important;
    padding-bottom:34px !important;
}

.footer-brand{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
}

.footer-brand img{
    display:block !important;

    width:auto !important;
    height:58px !important;

    max-width:220px !important;
    max-height:58px !important;

    object-fit:contain !important;
    object-position:left center !important;

    margin:0 0 15px 0 !important;

    background:transparent !important;

    border:none !important;
    box-shadow:none !important;
}

.footer-brand p{
    max-width:310px !important;

    margin:0 !important;

    color:rgba(255,255,255,.72) !important;

    font-size:.92rem !important;
    line-height:1.6 !important;
}

.footer-links strong{
    display:block !important;

    margin-bottom:14px !important;

    color:#ffffff !important;

    font-size:.9rem !important;
    font-weight:800 !important;
}

.footer-links a{
    display:block !important;

    margin:8px 0 !important;

    color:rgba(255,255,255,.76) !important;

    font-size:.88rem !important;
    text-decoration:none !important;
}

.footer-links a:hover{
    color:#ffffff !important;
}

.footer-bottom{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;

    padding-top:19px !important;
    padding-bottom:22px !important;

    border-top:1px solid rgba(255,255,255,.14) !important;
}

.footer-bottom span,
.footer-bottom a{
    color:rgba(255,255,255,.62) !important;

    font-size:.78rem !important;
}


/* ---------- MOBILE ---------- */

@media(max-width:900px){

    .final-cta{
        padding:48px 0 !important;
    }

    .final-cta .final-panel{
        flex-direction:column !important;
        align-items:flex-start !important;

        min-height:auto !important;

        padding:38px 28px !important;
    }

    .footer-main{
        grid-template-columns:1fr !important;
        gap:28px !important;
    }

    .footer-bottom{
        flex-direction:column !important;
        align-items:flex-start !important;

        gap:8px !important;
    }
}


/* =========================================================
   FOOTER JORNAL BRF PREVIDÊNCIA
   ========================================================= */

.footer-jornal{
    background:#082a63 !important;
    color:#ffffff !important;

    padding:0 !important;

    border:0 !important;
}

.footer-jornal-top{
    display:grid !important;

    grid-template-columns:
        1.45fr
        .85fr
        1fr
        1.2fr !important;

    gap:54px !important;

    padding-top:58px !important;
    padding-bottom:46px !important;

    align-items:start !important;
}


/* MARCA */

.footer-jornal-brand img{
    display:block !important;

    width:auto !important;
    height:62px !important;

    max-width:230px !important;

    object-fit:contain !important;
    object-position:left center !important;

    background:transparent !important;

    margin:0 0 22px 0 !important;
}

.footer-jornal-brand h3{
    margin:0 0 12px !important;

    color:#ffffff !important;

    font-size:1.28rem !important;
    line-height:1.2 !important;
}

.footer-jornal-brand p{
    margin:0 !important;

    max-width:340px !important;

    color:rgba(255,255,255,.68) !important;

    font-size:.9rem !important;
    line-height:1.7 !important;
}


/* COLUNAS */

.footer-jornal-col{
    display:flex !important;
    flex-direction:column !important;

    gap:10px !important;
}

.footer-title{
    display:block !important;

    margin-bottom:10px !important;

    color:#9eb4ff !important;

    font-size:.74rem !important;
    line-height:1 !important;

    font-weight:800 !important;

    text-transform:uppercase !important;
    letter-spacing:.11em !important;
}

.footer-jornal-col a{
    display:block !important;

    color:rgba(255,255,255,.78) !important;

    text-decoration:none !important;

    font-size:.88rem !important;
    line-height:1.45 !important;

    transition:.18s ease !important;
}

.footer-jornal-col a:hover{
    color:#ffffff !important;
    transform:translateX(3px) !important;
}

.footer-jornal-col small{
    display:block !important;

    margin-bottom:2px !important;

    color:rgba(255,255,255,.50) !important;

    font-size:.72rem !important;
}

.footer-jornal-col strong{
    color:#ffffff !important;

    font-size:.86rem !important;
    font-weight:700 !important;
}


/* DIVISÓRIA */

.footer-jornal-divider{
    height:1px !important;

    background:rgba(255,255,255,.14) !important;
}


/* PARTE INFERIOR */

.footer-jornal-bottom{
    display:flex !important;

    align-items:center !important;
    justify-content:space-between !important;

    gap:30px !important;

    padding-top:21px !important;
    padding-bottom:23px !important;
}

.footer-jornal-bottom > div:first-child{
    display:flex !important;
    align-items:center !important;

    gap:14px !important;
}

.footer-jornal-bottom strong{
    color:#ffffff !important;

    font-size:.78rem !important;
}

.footer-jornal-bottom span{
    color:rgba(255,255,255,.50) !important;

    font-size:.74rem !important;
}


/* LEGAL */

.footer-legal{
    display:flex !important;

    align-items:center !important;

    gap:12px !important;
}

.footer-legal a{
    color:rgba(255,255,255,.58) !important;

    text-decoration:none !important;

    font-size:.74rem !important;
}

.footer-legal a:hover{
    color:#ffffff !important;
}


/* MOBILE */

@media(max-width:1000px){

    .footer-jornal-top{
        grid-template-columns:1fr 1fr !important;

        gap:38px !important;
    }
}


@media(max-width:650px){

    .footer-jornal-top{
        grid-template-columns:1fr !important;

        gap:32px !important;

        padding-top:44px !important;
    }

    .footer-jornal-bottom{
        flex-direction:column !important;

        align-items:flex-start !important;
    }

    .footer-jornal-bottom > div:first-child{
        flex-direction:column !important;

        align-items:flex-start !important;

        gap:5px !important;
    }

    .footer-legal{
        flex-wrap:wrap !important;
    }
}