#cabecera {
    display: grid;
    place-content: center;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    min-width: 100vw;
    aspect-ratio: 4/1;
    opacity: 1;
    transition: background-image 0.2s ease, opacity 0.3s ease;
}

#cabecera h1 {
    opacity: 1;
    transition: opacity 0.3s ease;
}

.onPrograma {
    cursor: none;
    pointer-events: none;
    transform: scale(1.05);
    filter:brightness(1.5)
}

.offPrograma {
    cursor: pointer;
    pointer-events: all;
    transform: scale(1);
    filter:brightness(0.5);
    box-shadow: inset 0 0 20px 50px rgba(90, 62, 189, 1);
}


.swiperPrograma {
    overflow: hidden;
    width: 100%;
    height: 175px;
    z-index: 2;
}

.card-video-programa
{
    cursor: pointer;
    width: 310px !important;
    height: 175px !important;
    aspect-ratio: 16/9 !important;
    z-index: 1;
}

.card-video-programa div.video-info {
    min-width: 200px;
    aspect-ratio: 16/9;
    height: auto;
    display: grid;
    place-content: center;
    box-shadow: inset 0 0 40px 20px rgba(0, 0, 0, .8);
    transition: box-shadow 0.3s ease;
}

.card-video-programa:hover div {
    z-index: 5;
    box-shadow: none;
}


.card-video-programa .video-info footer {
    transition: height 0.3s ease;
}

.card-video-programa .video-info footer span {
    transition: opacity 0.3s ease;
}

.card-video-programa:hover .video-info footer {
    height: 100%;
}

.card-video-programa:hover .video-info footer span {
    opacity: 0;
}

.card-video-programa:hover div.video-info div.btnPlay {
    opacity: 0;
    transform: scale(.25);
    transition: opacity 0.5s ease, scale 0.3s ease;
}

.card-video-programa:hover div.video-info div.btnPlay {
    transform: scale(.5);
    opacity: 1;
}

.seccionActiva,
.temporadaActiva {
    background-color: var(--color-azul-oscuro);
    color:white;
}