.hero-player {
    position: relative;
    width: 100%;
    height: 60vh;
    background: #000;
    overflow: hidden;
}
@media (min-width: 768px) { .hero-player { height: 75vh; } }

.hero-player__img {
    width: 100%; height: 100%; object-fit: cover;
    opacity: .6; transition: opacity .7s ease;
}
.hero-player:hover .hero-player__img { opacity: .4; }

.hero-player__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, var(--cq-dark), transparent 60%);
}

.live-badge, .viewers-badge {
    position: absolute; top: 1.5rem;
    display: flex; align-items: center; gap: .5rem;
    background: rgba(0,0,0,.6); backdrop-filter: blur(8px);
    padding: .375rem .75rem; border-radius: 4px;
}
.live-badge    { left: 1.5rem; border: 1px solid rgba(225,29,72,.3); }
.viewers-badge { right: 1.5rem; border: 1px solid #3f3f46; }
@media (min-width: 768px) { .live-badge, .viewers-badge { top: 2.5rem; } .live-badge { left: 2.5rem; } .viewers-badge { right: 2.5rem; } }

.play-button {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
}
.play-button__circle {
    width: 5rem; height: 5rem;
    background: rgba(225,29,72,.2); backdrop-filter: blur(12px);
    border-radius: 9999px; border: 1px solid rgba(225,29,72,.5);
    display: flex; align-items: center; justify-content: center;
    transition: all .3s ease; cursor: pointer;
}
.play-button__circle:hover { background: var(--cq-red); transform: scale(1.1); }
@media (min-width: 768px) { .play-button__circle { width: 7rem; height: 7rem; } }

/* Tarjetas "a continuación" */
.upnext-card {
    background: var(--cq-zinc-900); border-radius: .75rem;
    border: 1px solid var(--cq-zinc-800);
    overflow: hidden; cursor: pointer;
    transition: border-color .3s ease;
}
.upnext-card:hover { border-color: rgba(225,29,72,.5); }
.upnext-card__thumb { position: relative; height: 12rem; overflow: hidden; }
.upnext-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.upnext-card:hover .upnext-card__thumb img { transform: scale(1.05); }
.upnext-card__play {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.4);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .3s ease;
}
.upnext-card:hover .upnext-card__play { opacity: 1; }