/*====================================================

            BENEFÍCIOS MOBILE

====================================================*/

@media (max-width:768px){

/*==================================
SECTION
==================================*/

.benefits{

    padding:25px 0;

    overflow:hidden;

}

.benefits .container{

    width:100%;

    max-width:360px;

    margin:0 auto;

    padding:0 18px;
    
}

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

.benefits .section-title{

    margin-bottom:38px;

}

.benefits .section-title h2{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:4px;

    text-align:center;

}

.benefits .section-title .white{

    font-size:46px;

    line-height:.90;

}

.benefits .section-title .green{

    font-size:44px;

    line-height:.90;

}

.benefits .section-title p{

    max-width:300px;

    margin:28px auto 0;

    font-size:17px;

    line-height:1.8;

    text-align:center;

    color:#cfcfcf;

}

/*==================================
SHOWCASE
==================================*/

.benefits-showcase{

    display:flex;

    gap:18px;

    overflow-x:auto;

    scroll-snap-type:x mandatory;

    scroll-behavior:smooth;

    -webkit-overflow-scrolling:touch;

    scrollbar-width:none;

    padding:0 0 10px;

}

.benefits-showcase::-webkit-scrollbar{

    display:none;

}

/*==================================
CARD
==================================*/

.benefit-card{

    flex:0 0 320px;

    width:320px;

    min-width:320px;

    max-width:320px;

    min-height:470px;

    padding:34px 24px;

    border-radius:28px;

    scroll-snap-align:center;

    min-height:380px !important;
}

/*==================================
ICON
==================================*/

.benefit-icon{

    width:90px;

    height:90px;

    margin:0 auto 28px;

}

.benefit-icon img{

    width:86px;

    height:auto;

    display:block;

    object-fit:contain;

}

.benefit-icon .icon-glow{

    width:110px;

    height:110px;

    filter:blur(24px);

    opacity:.28;

}

.benefit-card h3{

    font-size:32px;

    line-height:1;

    margin-bottom:28px;

}

.benefit-card p{

    font-size:18px;

    line-height:1.75;

    max-width:250px;

    margin:0 auto;

}

.benefit-footer{

    margin-top:auto;

}

.benefit-footer span{

    font-size:16px;

}

/*==================================
PORTAL CARD
==================================*/

.benefit-card-portal{

    min-height:450px;

    padding:34px 24px;

}

/* Título superior */

.portal-heading{

    font-size:24px;

    letter-spacing:1px;

    margin-bottom:20px;

}

/* Texto principal */

.portal-text{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:4px;

    margin-bottom:32px;

    margin:0 0 18px 0;
}

.portal-text .white{

    font-size:30px;

    line-height:1.02;

}

.portal-text .green{

    font-size:34px;

    line-height:1.02;

}

/* Ícone */

.portal-icon{

    margin:30px 0 30px;

}

.portal-icon img{

    width:112px;

}

.portal-icon .icon-glow{

    width:150px;

    height:150px;

    opacity:.40;

    filter:blur(34px);

}

/* Botão */

.portal-btn{

    width:100%;

    max-width:270px;

    height:70px;

    font-size:20px;

    font-weight:700;

    margin-top:20;
}

.benefits-hint{

    margin-top:5px;

}

/* ==========================================
   BENEFÍCIOS — MOBILE
   Remove apenas a elevação dos cards
========================================== */

    .benefit-card{
        transform: none !important;
    }

    .benefit-card:hover{
        transform: none !important;
    }

    
        .benefits-showcase{
        scroll-padding-inline: 0;
    }

    .benefit-card{
        scroll-snap-align: center;
    }

}