*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

.fondobeneficios{
    font-family:Arial,sans-serif;
    background:linear-gradient(135deg,#ff1a00,#f0b35a);
    min-height:100vh;
}

.section{
    padding:60px 20px;
    text-align:center;
}

h1{
    font-size:clamp(3rem,8vw,3rem);
    color:#fff;
    margin-bottom:50px;
    font-weight:800;
}

.slider-wrap{
    max-width:1000px;
    margin:auto;
    overflow:hidden;
    position:relative;
	padding: 4rem;
}

.slider{
    display:flex;
    gap:30px;
    justify-content:center;
}

.card{
    min-width:280px;
    height:400px;
    border-radius:24px;
    position:relative;
    overflow:hidden;
    cursor:pointer;
    background:linear-gradient(180deg,#6ea8ff,#173b6d);
    transition:transform .4s ease, box-shadow .4s ease;
	background-image: url("../images/academias.webp");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center
}
.card2{
    min-width:280px;
    height:400px;
    border-radius:24px;
    position:relative;
    overflow:hidden;
    cursor:pointer;
    background:linear-gradient(180deg,#6ea8ff,#173b6d);
    transition:transform .4s ease, box-shadow .4s ease;
	background-image: url("../images/academias.webp");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center
}
.dos{background-image: url("../images/universidad.webp");}
.tres{background-image: url("../images/lumbreras.webp");}

.intranet{background-image: url("../images/aula-virtual.webp");}
.simulacro2{background-image: url("../images/simulacro-virtual.webp");}

.card:hover,
.card2:hover{
    transform:translateY(-12px) scale(1.04);
    box-shadow:0 20px 40px rgba(0,0,0,.35);
}

.card::before,
.card2::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        45deg,
        transparent,
        rgba(255,255,255,.25),
        transparent
    );
    transform:translateX(-100%);
    transition:.7s;
}

.card:hover::before,
.card2:hover::before{
    transform:translateX(100%);
}

.content{
    position:absolute;
    inset:0;
    padding:20px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    color:white;
	transition:.3s;
}

.percent{
    font-size:4rem;
    font-weight:900;
    line-height:1;
	transition:.3s;
}
.percent2{
    font-size:2.5rem;
    font-weight:900;
    line-height:1;
	transition:.3s;
}

.desc{
    font-size:1.1rem;
    font-weight:bold;
    /*margin:10px 0 16px;*/
	transition:.4s;
}
.beneficios p{
	color: #FFFFFF;
	padding-bottom: 3rem;
	
}
.beneficios h1{margin-bottom: 1rem;}
.btn_beneficio{
    align-self:center;
    border:none;
    border-radius:8px;
    padding:12px 22px;
    background:#fff;
    color:#233;
    font-weight:bold;
    cursor:pointer;
	transition:.5s;
}
.beneficios h2{
	font-size: 2rem;
	color: #FFFFFF;
	padding-bottom:0rem !important;
}


.card:hover .btn_beneficio,
.card2:hover .btn_beneficio{
    transform:scale(1.1);
}
.card:hover .percent,
.card:hover .desc,
.card:hover .btn_beneficio,

.card2:hover .percent,
.card2:hover .percent2,
.card2:hover .desc,
.card2:hover .btn_beneficio
	{
    transform:scale(1.5);
	transform: translate(0, -50px)
}

.nav-btn{
    display:none;
}

/* MOBILE */

@media(max-width:768px){

    .slider{
        gap:10px;
        justify-content:flex-start;
        transition:transform .5s ease;
    }

    .card{
        min-width:100%;
        width:100%;
    }

    .nav-btn{
        display:flex;
        position:absolute;
        top:65%;
        transform:translateY(-50%);
        width:42px;
        height:42px;
        border:none;
        border-radius:50%;
        background:#fff;
        color:#333;
        cursor:pointer;
        z-index:10;
        align-items:center;
        justify-content:center;
        font-size:20px;
        box-shadow:0 4px 12px rgba(0,0,0,.2);
    }

    .prev{
        left:10px;
    }

    .next{
        right:10px;
    }

}
	@media (min-width:769px){

    .slider{
        transform:none !important;
        transition:none !important;
        justify-content:center;
    }

    .card{
        min-width:280px;
        flex:0 0 280px;
    }

    .nav-btn{
        display:none !important;
    }

}



/* ==== FIX CARRUSEL MOVIL ==== */
.slider-wrap{overflow:hidden;position:relative}
.slider{display:flex;gap:10px;transition:transform .4s ease;will-change:transform;touch-action:pan-y}
@media(max-width:768px){
 .slider{justify-content:flex-start}
 .slider .card,.slider .card2{
   min-width:100%;
   flex:0 0 100%;
 }
 .nav-btn{display:flex}
}