/*====================================================
COMO FUNCIONA
====================================================*/

.funciona{

    background:var(--bg2);

}

.fluxo{

    margin-top:70px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

}

.etapa{

    flex:1;

    background:#fff;

    border-radius:24px;

    padding:45px 30px;

    text-align:center;

    box-shadow:var(--shadow);

    position:relative;

}

.numero{

    position:absolute;

    top:-18px;

    left:50%;

    transform:translateX(-50%);

    width:42px;

    height:42px;

    border-radius:50%;

    background:var(--verde);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

}

.etapa i{

    font-size:54px;

    color:var(--verde);

    margin:20px 0 25px;

}

.etapa h3{

    margin-bottom:15px;

    font-size:1.35rem;

}

.etapa p{

    color:#666;

    line-height:1.8;

}

.seta{

    font-size:34px;

    color:var(--laranja);

}

@media(max-width:1100px){

.fluxo{

flex-direction:column;

}

.seta{

transform:rotate(90deg);

}

.etapa{

width:100%;

}

}