/* ======================================
   SECCIÓN
====================================== */

.tt5-featured-events{

    position:relative;

    width:100vw;

    margin:80px calc(50% - 50vw);

    padding:55px 60px;

    background:#0D2356;

    overflow:hidden;

    box-sizing:border-box;

}

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

.tt5-featured-header{

    display:flex;

    align-items:center;

    justify-content:flex-start;

    margin-bottom:28px;

}

.tt5-featured-header h2{

    margin:0;

    color:#FFF;

    font-size:32px;

    font-weight:700;

    line-height:1.2;

}

/* ======================================
   SLIDER
====================================== */

.tt5-featured-slider{

    display:flex;

    gap:24px;

    overflow-x:auto;

    overflow-y:hidden;

    scroll-behavior:smooth;

    scrollbar-width:none;

    -webkit-overflow-scrolling:touch;

    scroll-snap-type:x mandatory;

    scroll-padding-left:0;

    padding-bottom:6px;

}

.tt5-featured-slider::-webkit-scrollbar{

    display:none;

}

/* ======================================
   TARJETAS
====================================== */

.tt5-featured-slide{

    flex:0 0 420px;

    scroll-snap-align:start;

    scroll-snap-stop:always;

}

.tt5-featured-card{

    display:block;

    text-decoration:none;

    color:inherit;

}

/* ======================================
   IMAGEN
====================================== */

.tt5-featured-image{

    position:relative;

    height:220px;

    border-radius:18px;

    overflow:hidden;

    background-size:cover;

    background-position:center;

    transition:.35s;

}

.tt5-featured-card:hover .tt5-featured-image{

    transform:scale(1.02);

}

.tt5-featured-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
            to top,
            rgba(0,0,0,.45),
            rgba(0,0,0,.10) 45%,
            transparent
    );

}

/* ======================================
   BADGE
====================================== */

.tt5-featured-badge{

    position:absolute;

    top:16px;

    left:0;

    z-index:2;

    background:#6EA8FF;

    color:#FFF;

    font-size:13px;

    font-weight:600;

    padding:10px 24px;

    border-radius:0 18px 18px 0;

}

/* ======================================
   PRECIO
====================================== */

.tt5-featured-price{

    position:absolute;

    right:16px;

    bottom:16px;

    z-index:2;

    background:#FFF;

    color:#34A853;

    font-size:13px;

    font-weight:700;

    padding:6px 16px;

    border-radius:999px;

}

/* ======================================
   CONTENIDO
====================================== */

.tt5-featured-content{

    padding-top:14px;

}

.tt5-featured-content h3{

    margin:0 0 8px;

    font-size:18px;

    font-weight:400;

    line-height:1.25;

    color:#FFF;

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    overflow:hidden;

}

.tt5-featured-content p{

    margin:0;

    color:#D8E0EE;

    font-size:15px;

    line-height:1.5;

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    overflow:hidden;

}

/* ======================================
   FLECHAS
====================================== */

.tt5-featured-arrow{

    position:absolute;

    top:170px;

    transform:translateY(-50%);

    width:52px;

    height:52px;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.18);

    backdrop-filter:blur(8px);

    color:#FFF;

    font-size:22px;

    cursor:pointer;

    transition:.25s;

    z-index:100;

}

.tt5-featured-arrow:hover{

    background:rgba(255,255,255,.32);

}

.tt5-featured-prev{

    left:20px;

}

.tt5-featured-next{

    right:20px;

}

/* ======================================
   RESPONSIVE
====================================== */

@media (max-width:1024px){

    .tt5-featured-events{

        padding:45px 30px;

    }

    .tt5-featured-slide{

        flex:0 0 340px;

    }

    .tt5-featured-image{

        height:190px;

    }

}

@media (max-width:768px){

    .tt5-featured-events{

        padding:40px 20px;

    }

    .tt5-featured-header h2{

        font-size:26px;

    }

    .tt5-featured-slide{

        flex:0 0 280px;

    }

    .tt5-featured-image{

        height:170px;

    }

    .tt5-featured-content h3{

        font-size:18px;

    }

    .tt5-featured-content p{

        font-size:14px;

    }

}