.conte-hed{
    padding: 0 20px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
/* Alineación del título y los botones en la misma línea */
.encabezado-reels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap; /* Por si en pantallas pequeñas se necesita bajar */
    gap: 15px;
}

/* Contenedor de botones */
.filtros-botones {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
}

/* Ocultar barra de scroll */
.filtros-botones::-webkit-scrollbar {
    display: none;
}

/* Botones estilo Dark Mode */
.filtros-botones button {
    background-color: #121214; /* Fondo oscuro integrado */
    color: #a0a0a5; /* Texto gris suave */
    border: 1px solid #27272a; /* Borde sutil */
    padding: 6px 16px;
    font-size: 13px;
    font-family: sans-serif;
    font-weight: 500;
    border-radius: 8px; /* Bordes semi-cuadrados parecidos a tus menús superiores */
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

/* Efecto Hover (Pasar el mouse) */
.filtros-botones button:hover {
    background-color: #1a1a1e;
    color: #ffffff;
    border-color: #3f3f46;
}

/* Botón Activo (Estilo Neón como el botón "Inicio") */
.filtros-botones button.activew {
    background-color: #0b0b0c;
    color: #ffffff;
    border-color: #ff00ff; /* Color magenta/morado neón de tu marca */
    box-shadow: 0 0 10px rgba(255, 0, 255, 0.3); /* Destello neón */
}












/* ================= CONTENEDOR1,2,4 ================= */

.videos-container{
    width:100%;
    padding:25px;

    display:grid;

    /* 4 columnas */
    grid-template-columns:repeat(3,1fr);

    gap:25px;
}

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

.video-card{
    cursor:pointer;
    transition:0.3s;
    padding: 10px;
    border-radius: 20px;
    border: 1px solid rgba(55, 55, 55, 0);
}

.video-card:hover{
    transform:translateY(-5px);
    background-color: #f8ce5a20;
}

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

.video-img{
    position:relative;
    width:100%;
    height:250px;
    border-radius:16px;
    overflow:hidden;
}

.video-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:0.3s;
}

.video-card:hover .video-img img{
    transform:scale(1.05);
}

/* DURACION */

.video-img span{
    position:absolute;
    bottom:10px;
    right:10px;
    background:rgba(0,0,0,0.85);
    color:white;
    padding:4px 8px;
    border-radius:8px;
    font-size:13px;
    font-weight:bold;
}

/* ================= INFO ================= */

.video-info{
    display:flex;
    gap:12px;
    margin-top:12px;
}

.perfil{
    width:42px;
    height:42px;

    min-width:42px;
    min-height:42px;

    flex-shrink:0;

    border-radius:50%;
    object-fit:cover;
}

.texto{
    flex:1;
    min-width:0;
}

.texto h3{
    background-color:#00d9ff00;
    color:#fff;
    font-size:clamp(0.95rem, 2.8vw, 1.1rem);
    line-height:1.4;
    margin-bottom:0.5rem;
    font-weight:500;

    display:-webkit-box;
    -webkit-box-orient:vertical;

    /* Compatibilidad */
    -webkit-line-clamp:2;
    line-clamp:2;

    overflow:hidden;
    text-overflow:ellipsis;
}

.canal{
    color:#aaaaaa;
    font-size:14px;
    margin-bottom:3px;
}

.datos{
    color:#777;
    font-size:13px;
}

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

/* TABLET */
@media(max-width:1200px){

    .videos-container{
        grid-template-columns:repeat(3,1fr);
    }

}

/* CELULAR GRANDE */
@media(max-width:850px){

    .videos-container{
        grid-template-columns:repeat(2,1fr);
    }

}

/* CELULAR */
@media(max-width:500px){

    .videos-container{
        grid-template-columns:1fr;
    }

}





/* ================= CONTENEDOR3 ================= */

.reels-container{
    width:100%;
    padding:25px;
    display:flex;
    gap: 30px;
    overflow-x:auto;
    scroll-behavior:smooth;
}


/* TITULO DE LA SECCION */

.titulo-reels{
    color:white;
    font-size:25px;
    font-weight:700;
    margin:20px 25px;
    position:relative;
    display:inline-block;
    letter-spacing:1px;
}

/* LINEA DEBAJO */

.titulo-reels::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-8px;
    width:100%;
    height:4px;
    border-radius:20px;
    background:linear-gradient(90deg,#ff00ff,#00d9ff);
}


/* SCROLL */

.reels-container::-webkit-scrollbar{
    height:8px;
}

.reels-container::-webkit-scrollbar-thumb{
    background:#ff00ff;
    border-radius:20px;
}

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

.reel-card{
    min-width:200px;
    height:450px;
    border-radius:20px;
    overflow:hidden;
    position:relative;
    cursor:pointer;
    transition:0.3s;
    flex-shrink:0;
}

.reel-card:hover{
    transform:scale(1.03);
}

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

.reel-card img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* ================= OSCURECER ================= */

.reel-card::before{
    content:"";

    position:absolute;
    inset:0;

    background:linear-gradient(
        to top,
        rgba(0,0,0,0.95),
        rgba(0,0,0,0.1),
        rgba(0,0,0,0.2)
    );
}

/* ================= INFO ================= */

.reel-info{
    position:absolute;

    bottom:0;

    left:0;

    width:100%;

    padding:18px;

    z-index:2;
}

.reel-info h3{
    color:white;
    font-size:18px;
    margin-bottom:8px;
    line-height:1.3;
}

.reel-info p{
    color:#d0d0d0;
    font-size:14px;
}

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

@media(max-width:600px){

    .reel-card{
        min-width:180px;
        height:320px;
    }

    .reel-info h3{
        font-size:16px;
    }

}