.home-page {
    
    width: 100%;
    
}



.home-section {
    
    margin-top: 40px;
    
}



.section-title {
    
    display: flex;
    
    align-items: center;
    
    gap: 12px;
    
    margin-bottom: 20px;
    
}



.section-title i {
    
    color: #60a5fa;
    
}



.section-title h2 {
    
    color: white;
    
}





/* TELÃO */


.featured-live {
    
    width: 100%;
    
    min-height: 420px;
    
    border-radius: 28px;
    
    overflow: hidden;
    
    background: #020617;
    
}





/* CARROSSEL */


.live-carousel {
    
    display: flex;
    
    gap: 20px;
    
    overflow-x: auto;
    
    scrollbar-width: none;
    
}



.live-carousel::-webkit-scrollbar {
    
    display: none;
    
}



.see-more {
    
    margin-top: 20px;
    
    padding: 12px 25px;
    
    border: none;
    
    border-radius: 999px;
    
    background: #2563eb;
    
    color: white;
    
}

/* ==========================================
   TELÃO LIVE DESTAQUE
========================================== */


.featured-live{

    width:100%;

    height:520px;

    border-radius:28px;

    overflow:hidden;

    position:relative;

    background:#020617;

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

    box-shadow:
    0 30px 80px rgba(0,0,0,.45);

}



.featured-live-content{

    width:100%;

    height:100%;

    position:relative;

}



/* FUNDO */

.featured-background{

    position:absolute;

    inset:0;

    background-size:cover;

    background-position:center;

}



.featured-background::after{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        to top,
        rgba(2,6,23,.95),
        transparent 60%
    );

}



/* PLAYER */

.featured-player{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);


    width:220px;

    height:120px;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:20px;


    background:
    rgba(0,0,0,.55);


    backdrop-filter:blur(10px);


    color:white;

    font-size:45px;


}




/* INFO */

.featured-info{

    position:absolute;

    left:35px;

    bottom:30px;

    z-index:2;

    color:white;

}



.featured-info h3{

    font-size:30px;

    margin:15px 0 5px;

}



.featured-info p{

    color:#cbd5e1;

    font-size:16px;

}



/* BADGE */

.featured-info .live-badge{

    display:inline-block;

    background:#dc2626;

    padding:6px 14px;

    border-radius:20px;

    font-size:13px;

    font-weight:700;

}