/* =========================================================
   AJUSTES FINAIS - BRF PREVIDÊNCIA
   ========================================================= */


/* =========================================================
   PASSO A PASSO
   ========================================================= */

.tutorial{
    background:#f7f5f2 !important;
}

.tutorial-panel{
    position:relative !important;
}

.tutorial .step{
    position:relative !important;

    display:grid !important;
    grid-template-columns:70px minmax(0,1fr) 330px !important;

    align-items:center !important;

    gap:28px !important;

    padding:30px 0 !important;

    border-bottom:1px solid #ded9d3 !important;
}

.tutorial .step:last-of-type{
    border-bottom:0 !important;
}


/* NÚMEROS */

.tutorial .step-no{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

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

    border-radius:18px !important;

    background:#edf0ff !important;

    color:#264bbb !important;

    font-size:1.45rem !important;
    font-weight:900 !important;
}

.tutorial .step:nth-of-type(2) .step-no{
    background:#ffe9eb !important;
    color:#f16c76 !important;
}

.tutorial .step:nth-of-type(3) .step-no{
    background:#eceeff !important;
    color:#7d8ff2 !important;
}

.tutorial .step:nth-of-type(4) .step-no{
    background:#edf0f4 !important;
    color:#6f778d !important;
}


/* TEXTO */

.tutorial .step-kicker{
    display:block !important;

    margin-bottom:5px !important;

    color:#f16c76 !important;

    font-size:.69rem !important;
    font-weight:800 !important;

    letter-spacing:.12em !important;
}

.tutorial .step h3{
    margin:0 0 7px !important;

    color:#081d4b !important;

    font-size:1.3rem !important;
}

.tutorial .step p{
    margin:0 !important;

    color:#646b7c !important;

    line-height:1.6 !important;
}


/* =========================================================
   MOCKUPS DOS PASSOS
   ========================================================= */

.tutorial .step-mock{
    position:relative !important;

    width:100% !important;
    min-height:170px !important;

    padding:47px 24px 22px !important;

    background:#ffffff !important;

    border:1px solid #ded8d2 !important;
    border-radius:18px !important;

    box-shadow:none !important;

    overflow:hidden !important;
}


/* linha superior estilo Jornal */

.tutorial .step-mock::after{
    content:"";

    position:absolute;

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

    height:5px;

    background:#264bbb;
}

.tutorial .step:nth-of-type(2) .step-mock::after{
    background:#f16c76;
}

.tutorial .step:nth-of-type(3) .step-mock::after{
    background:#7d8ff2;
}

.tutorial .step:nth-of-type(4) .step-mock::after{
    background:#6f778d;
}


/* etiquetas */

.tutorial .step-mock::before{
    position:absolute;

    top:18px;
    left:22px;

    font-size:.66rem;
    font-weight:900;

    letter-spacing:.11em;

    color:#7a8190;
}

.tutorial .step-mock.login::before{
    content:"MINHA CONTA";
}

.tutorial .step-mock.account::before{
    content:"ACESSO DO PARTICIPANTE";
}

.tutorial .step-mock.fields::before{
    content:"DADOS CADASTRAIS";
}

.tutorial .step-mock.success::before{
    content:"FINALIZAÇÃO";
}

.tutorial .step-mock.phone::before{
    content:"APP BRF PREVIDÊNCIA";
}


/* LOGIN */

.tutorial .step-mock.login strong{
    display:block !important;

    margin:0 0 14px !important;

    color:#082a63 !important;

    font-size:1rem !important;
}

.tutorial .step-mock.login i{
    display:block !important;

    width:100% !important;
    height:11px !important;

    margin:9px 0 !important;

    background:#e6eef6 !important;

    border-radius:999px !important;
}

.tutorial .step-mock.login button{
    margin-top:11px !important;

    padding:9px 18px !important;

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

    border:0 !important;
    border-radius:999px !important;

    font-weight:800 !important;
}


/* CONTA */

.tutorial .step-mock.account{
    display:grid !important;

    grid-template-columns:64px 1fr !important;
    grid-template-rows:repeat(3,16px) !important;

    gap:10px 18px !important;

    align-content:center !important;
}

.tutorial .step-mock.account > i{
    grid-row:1 / 4 !important;

    width:64px !important;
    height:92px !important;

    background:#264bbb !important;

    border-radius:13px !important;
}

.tutorial .step-mock.account > span{
    display:block !important;

    height:13px !important;

    background:#e4edf5 !important;

    border-radius:999px !important;
}


/* CAMPOS */

.tutorial .step-mock.fields{
    display:flex !important;

    flex-direction:column !important;

    justify-content:center !important;

    gap:11px !important;
}

.tutorial .step-mock.fields i{
    display:block !important;

    height:13px !important;

    background:#e5edf5 !important;

    border-radius:999px !important;
}

.tutorial .step-mock.fields i:nth-child(1){
    width:75% !important;
}

.tutorial .step-mock.fields i:nth-child(2){
    width:92% !important;
}

.tutorial .step-mock.fields i:nth-child(3){
    width:60% !important;
}

.tutorial .step-mock.fields i:nth-child(4){
    width:82% !important;
}


/* SUCESSO */

.tutorial .step-mock.success{
    display:flex !important;

    flex-direction:column !important;

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

    text-align:center !important;
}

.tutorial .step-mock.success > div{
    display:flex !important;

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

    width:54px !important;
    height:54px !important;

    margin-bottom:16px !important;

    background:#dff8ed !important;

    color:#00a874 !important;

    border-radius:50% !important;

    font-size:1.6rem !important;
}

.tutorial .step-mock.success strong{
    color:#082a63 !important;

    font-size:.9rem !important;
}


/* APP */

.tutorial .step-mock.phone{
    display:flex !important;

    flex-direction:column !important;

    align-items:center !important;
    justify-content:center !important;
}

.tutorial .step-mock.phone strong{
    margin-bottom:14px !important;

    color:#082a63 !important;
}

.tutorial .step-mock.phone > div{
    display:flex !important;

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

    width:52px !important;
    height:52px !important;

    background:#edf0ff !important;

    color:#264bbb !important;

    border-radius:16px !important;
}


/* TABS */

.tutorial-tabs{
    display:inline-flex !important;

    padding:5px !important;

    background:#ece8e3 !important;

    border-radius:999px !important;
}

.tutorial-tabs .tab{
    border:0 !important;

    border-radius:999px !important;

    padding:11px 22px !important;

    background:transparent !important;

    color:#677080 !important;

    font-weight:800 !important;
}

.tutorial-tabs .tab.active{
    background:#264bbb !important;
    color:#ffffff !important;
}


/* CTA DO PASSO */

.tutorial-cta{
    padding-top:28px !important;

    text-align:center !important;
}


/* =========================================================
   LOGO CORRETO NO RODAPÉ
   ========================================================= */

.footer-brand img,
.footer-final-brand img,
#footer-brf-final .footer-final-brand img{
    display:block !important;

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

    max-width:165px !important;
    max-height:none !important;

    object-fit:contain !important;

    background:#ffffff !important;

    padding:12px 15px !important;

    border-radius:14px !important;

    box-sizing:content-box !important;

    box-shadow:none !important;

    margin:0 0 18px 0 !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:850px){

    .tutorial .step{
        grid-template-columns:58px 1fr !important;

        gap:18px !important;
    }

    .tutorial .step-mock{
        grid-column:1 / -1 !important;

        margin-top:4px !important;

        min-height:165px !important;
    }

}


@media(max-width:550px){

    .tutorial .step{
        grid-template-columns:1fr !important;

        padding:25px 0 !important;
    }

    .tutorial .step-no{
        width:50px !important;
        height:50px !important;
    }

    .tutorial .step-mock{
        grid-column:auto !important;

        width:100% !important;

        padding-left:20px !important;
        padding-right:20px !important;
    }

}