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

.como-funciona{

    position:relative;

    margin-top:-50px;

    scroll-margin-top:60px;
    
    z-index:10;
    
    background:#050505;

    overflow:hidden;

}

.como-funciona::before{

    content:"";

    position:absolute;

    top:-120px;

    left:0;

    width:100%;

    height:120px;

    pointer-events:none;

    background:
        linear-gradient(
            to bottom,
            rgba(5,5,5,0),
            #050505
        );

}

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

.como-funciona .container{

    max-width:1280px;

    margin:0 auto;

    padding:0 60px;

}

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

.como-header{

    text-align:center;

    max-width:860px;

    margin:0 auto 70px;

}

.section-tag{

    display:inline-block;

    color:#00DA00;

    font-size:18px;

    font-weight:600;

    letter-spacing:6px;

    margin-bottom:18px;

}


/*==========================================
    IMAGEM
==========================================*/

.como-imagem{

    display:flex;

    justify-content:center;

    margin-top:25px;

    margin-bottom:50px;

}

.como-imagem img{

    width:92%;

    max-width:1180px;

    height:auto;

    animation:floatComo 7s ease-in-out infinite;

    filter:
    drop-shadow(0 30px 60px rgba(0,0,0,.45));

}

/*==========================================
    FLOAT IMAGE
==========================================*/

@keyframes floatComo{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0px);

    }

}

/*==========================================
    CARDS
==========================================*/

.como-cards{

    display:flex;

    justify-content:center;

    align-items:stretch;

    gap:35px;

    margin-bottom:70px;

}

.como-card{

    flex:1;

    max-width:370px;

    min-height:365px;

    background:#090909;

    border:1px solid rgba(255,255,255,.06);

    border-radius:24px;

    padding:32px 38px 38px;

    position:relative;

    transition:.35s ease;

}

.como-card:hover{

    transform:translateY(-8px);

    border-color:rgba(0,218,0,.45);

    box-shadow:

    0 20px 40px rgba(0,0,0,.45),

    0 0 25px rgba(0,218,0,.12);

}

/*==========================================
    ÍCONE
==========================================*/

.card-icon{

    width:100%;

    position:relative;

    margin-bottom:14px;

    display:flex;

    align-items:center;

    justify-content:center;

}

.card-icon::before{

    content:"";

    position:absolute;

    width:52px;

    height:52px;

    border-radius:50%;

    background:rgba(0,218,0,.15);

    filter:blur(20px);

    opacity:0;

    transition:.35s;

}

.como-card:hover .card-icon::before{

    opacity:1;

}

.card-icon img{

    width:76px;

    height:76px;

    transition:transform .35s ease;

    object-fit:contain;

    display:block;

}

.como-card h3{

    font-size:30px;

    text-align:center;

    line-height:1.2;

    min-height:78px;

    margin-bottom:26px;

    max-width:280px;

    color:#ffffff;

}

.como-card p{

    color:#bdbdbd;

    text-align:center;
    
    line-height:1.9;

    font-size:18px;

    margin-bottom:32px;

}

.como-card::after{

    content:"";

    position:absolute;

    left:46px;

    bottom:34px;

    width:55px;

    transition:.35s ease;

    height:2px;

    border-radius:10px;

    background:#00DA00;

    opacity:.55;

}

.como-card:hover::after{

    width:95px;

    opacity:1;

}

.card-rse{

    border-color:rgba(0,218,0,.20);

}

.card-rse:hover{

    border-color:#00DA00;


}

/* ÍCONE ANIMADO */

.como-card:hover .card-icon img{

    transform:scale(1.08);

}


/*==========================================
    SETAS
==========================================*/

.card-arrow{

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    color:#00DA00;

    opacity:.65;

    user-select:none;

    transition:.35s;
}

.como-card:hover + .card-arrow{

    transform:translateX(8px);

    opacity:1;

}

/*==========================================
    alerta
==========================================*/

.como-alerta{

    display:grid;

    grid-template-columns:90px 1fr;

    align-items:center;

    max-width:1000px;

    margin:90px auto 0;

    padding:30px 55px;

    gap:28px;

    background:#090909;

    border:1px solid rgba(0,218,0,.12);

    border-radius:24px;

    transition:.35s ease;

}

.alerta-icon{

    grid-column:1;

    display:flex;

    justify-content:center;

    align-items:center;

}


.alerta-icon::before{

    content:"";

    position:absolute;

    width:70px;

    height:70px;

    border-radius:50%;

    background:rgba(0,218,0,.18);

    filter:blur(18px);

    opacity:0;

    transition:.35s ease;

}

.alerta-icon img{

    width:64px;

    transition:

    transform .35s ease;

    position:relative;

    z-index:2;

}

.como-alerta:hover .alerta-icon img{

    transform:scale(1.12);

}

.como-alerta:hover .alerta-icon::before{

    opacity:1;

}

.alerta-texto h3{

    font-size:22px;

    font-weight:700;

    line-height:1.25;

    color:#FFFFFF;

    margin-bottom:6px;

}

.alerta-texto p{

    font-size:17px;

    line-height:1.45;

    color:#00DA00;

    font-weight:600;

    margin:0;

}

.alerta-texto{

    display:flex;

    margin-left:20px;
    
    max-width:760px;
    
    flex-direction:column;

    grid-column:2;

    justify-content:center;

}

.como-alerta:hover{

    transform:translateY(-5px);

    border-color:rgba(0,218,0,.45);

    box-shadow:

    0 20px 40px rgba(0,0,0,.45),

    0 0 25px rgba(0,218,0,.12);

}

.alerta-mobile{

    display:none;

}

/* ==========================================
   SEÇÃO COMO FUNCIONA - FINAL
   Revisão concluída
========================================== */

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

@media (max-width:768px){

.alerta-desktop{

    display:none;

}

.alerta-mobile{

    display:block;

}

.como-funciona{

    margin-top:-30px;

    padding:0 0 30px;

}


.como-funciona::before{

    display:none;

}

.como-funciona .container{

    padding:0 10px;

}

/* titulo */

.section-title h2{

    font-size:58px;

    line-height:.9;

    margin-bottom:14px;

}


/* descrição */

.section-title p{

    font-size:17px;

    line-height:1.7;

    max-width:320px;

    margin:0 auto;

}

/* IMAGEM */

.como-imagem{

    margin:30px 0 40px;

}

.como-imagem img{

    width:100%;

    max-width:380px;

    animation:none;

    filter:none;

}

/* CARDS */

.como-cards{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:14px;

    margin-bottom:40px;

}

.como-card{

    width:100%;

    padding:22px 22px 24px;

    min-height:auto;

}

.card-icon img{

    width:56px;

    height:56px;

}

.como-card h3{

    font-size:22px;

    min-height:auto;

    margin-bottom:16px;

}

.como-card p{

    font-size:16px;

    line-height:1.6;

    margin-bottom:0;

}

.como-card::after{
    
    display:none;

}

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

.card-arrow{

    transform:rotate(90deg);

    font-size:28px;

    margin:-4px 0;

    transition:none;

}

.como-card:hover + .card-arrow{

    transform:rotate(90deg);

    opacity:.65;

}
  

/* ALERTA */

.como-alerta{

    display:block;

    width:100%;

    max-width:360px;

    padding:10px;

    border-radius:18px;

    text-align:left;

    margin:0 auto !important;

}

.alerta-icon{

    display:none;

}

.alerta-icon img{

    width:42px;

}

.alerta-texto{

    margin:0;

    width:100%;

    max-width:none;

    grid-column:auto;

}

.alerta-texto h3{

    font-size:15px;

    line-height:1.35;

    font-weight:700;

}

.alerta-texto p{

    font-size:13px;

    line-height:1.45;

}

}