/* =========================================================
   PASSO A PASSO COM TELAS REAIS
   ========================================================= */

.tutorial .step{
    grid-template-columns:58px minmax(260px,1fr) 430px !important;
    min-height:330px !important;
    gap:30px !important;
}


/* IMAGEM */

.step-shot{
    position:relative !important;

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

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

    overflow:hidden !important;

    background:#ffffff !important;

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

    box-shadow:0 12px 28px rgba(8,42,99,.07) !important;

    padding:14px !important;
}


/* BARRA SUPERIOR NO PADRÃO JORNAL */

.step-shot::before{
    content:"";

    position:absolute;

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

    height:5px;

    background:#264bbb;

    z-index:3;
}

.step:nth-of-type(2) .step-shot::before{
    background:#f16c76;
}

.step:nth-of-type(3) .step-shot::before{
    background:#7d8ff2;
}

.step:nth-of-type(4) .step-shot::before{
    background:#747c8b;
}


/* CAPTURA */

.step-shot img{
    display:block !important;

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

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

    background:#ffffff !important;

    transition:transform .25s ease !important;
}

.step-shot:hover img{
    transform:scale(1.025) !important;
}


/* APP VERTICAL */

.step-shot.app-shot{
    height:330px !important;

    background:#f7f5f2 !important;
}

.step-shot.app-shot img{
    width:auto !important;
    max-width:100% !important;

    height:100% !important;

    object-fit:contain !important;
}


/* ETIQUETA */

.shot-label{
    position:absolute;

    top:15px;
    left:16px;

    z-index:5;

    padding:7px 11px;

    background:#264bbb;
    color:#ffffff;

    border-radius:999px;

    font-size:9px;
    font-weight:900;

    letter-spacing:.08em;

    box-shadow:0 4px 12px rgba(8,42,99,.12);
}

.shot-label.coral{
    background:#f16c76;
}

.shot-label.purple{
    background:#7d8ff2;
}

.shot-label.gray{
    background:#747c8b;
}


/* SELETOR SITE / APP */

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

    gap:7px !important;

    padding:6px !important;

    margin-bottom:38px !important;

    background:#e9e5e0 !important;

    border-radius:999px !important;
}

.tutorial-tabs .tab{
    min-width:180px !important;

    padding:13px 22px !important;

    border:0 !important;

    background:transparent !important;

    box-shadow:none !important;
}

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

    box-shadow:0 6px 16px rgba(38,75,187,.18) !important;
}


/* MOBILE */

@media(max-width:1050px){

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

    .step-shot{
        grid-column:2 !important;

        width:100% !important;

        margin-top:4px !important;
    }

}


@media(max-width:650px){

    .tutorial-tabs{
        display:flex !important;
        width:100% !important;
    }

    .tutorial-tabs .tab{
        min-width:0 !important;
        flex:1 !important;
    }

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

    .step-shot{
        grid-column:auto !important;

        height:240px !important;
    }

    .step-shot.app-shot{
        height:300px !important;
    }

}