/* =========================================================
   REPRODUCTOR DIVIÉRTETE+
   CSS COMBINADO
   - Modo normal: Liquid Glass original
   - Pantalla completa en escritorio: diseño fullscreen
========================================================= */

/* =========================================================
   VARIABLES
========================================================= */

:root {

    --azul: #3C78D8;
    --azul-oscuro: #2459A8;
    --azul-claro: #6EA8FE;

    --blanco: #FFFFFF;
    --negro: #111111;

    --gris: #D9D9D9;

    --cristal:
        rgba(255,255,255,.28);

    --cristal-fuerte:
        rgba(255,255,255,.48);

    --borde:
        rgba(255,255,255,.55);

    --sombra:
        0 25px 70px rgba(0,0,0,.20);

    --radio:
        32px;
}


/* =========================================================
   RESET
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;

    font-family: Arial, Helvetica, sans-serif;

    color: var(--negro);

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(255,255,255,.9),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 20%,
            rgba(110,168,254,.35),
            transparent 30%
        ),
        radial-gradient(
            circle at 50% 100%,
            rgba(60,120,216,.28),
            transparent 35%
        ),
        var(--gris);

    overflow-x: hidden;
}


/* =========================================================
   FONDO LÍQUIDO
========================================================= */

.fondo-liquido {

    position: fixed;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.35),
            transparent 35%,
            rgba(60,120,216,.12)
        );

    backdrop-filter: blur(35px);
    -webkit-backdrop-filter: blur(35px);

    z-index: -3;
}


.burbuja {

    position: fixed;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(2px);

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

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

    box-shadow:
        inset 0 0 35px rgba(255,255,255,.20),
        0 20px 60px rgba(60,120,216,.12);

    z-index: -2;

    animation:
        flotar
        12s
        ease-in-out
        infinite;
}


.burbuja-uno {

    width: 280px;
    height: 280px;

    top: 12%;
    left: -100px;
}


.burbuja-dos {

    width: 180px;
    height: 180px;

    right: 8%;
    top: 25%;

    animation-delay: -4s;
}


.burbuja-tres {

    width: 320px;
    height: 320px;

    bottom: -150px;
    left: 45%;

    animation-delay: -7s;
}


@keyframes flotar {

    0%,
    100% {
        transform:
            translateY(0)
            scale(1);
    }

    50% {
        transform:
            translateY(-25px)
            scale(1.04);
    }
}


/* =========================================================
   ENCABEZADO
========================================================= */

.encabezado {

    width:
        min(
            1400px,
            calc(100% - 40px)
        );

    margin:
        20px
        auto
        0;

    padding:
        14px
        18px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    border:
        1px solid
        var(--borde);

    border-radius: 28px;

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

    backdrop-filter:
        blur(30px)
        saturate(150%);

    -webkit-backdrop-filter:
        blur(30px)
        saturate(150%);

    box-shadow:
        var(--sombra);
}


.logo {

    color:
        var(--negro);

    text-decoration: none;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 20px;

    font-weight: bold;
}


.marca-diviertete {

    position: absolute;

    left: 50%;

    transform:
        translateX(-50%);

    color:
        var(--azul-oscuro);

    font-size: 18px;

    font-weight: 800;
}


.boton-regresar {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding:
        10px
        17px;

    color:
        var(--blanco);

    background:
        var(--azul);

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

    border-radius: 18px;

    text-decoration: none;

    font-weight: 700;

    transition:
        .25s ease;
}


.boton-regresar:hover {

    transform:
        translateY(-2px);

    background:
        var(--azul-oscuro);

    box-shadow:
        0 10px 25px
        rgba(36,89,168,.25);
}


/* =========================================================
   CONTENEDOR PRINCIPAL
========================================================= */

.contenedor-principal {

    width:
        min(
            1400px,
            calc(100% - 40px)
        );

    margin:
        30px
        auto
        70px;

    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        370px;

    gap: 25px;
}


/* =========================================================
   REPRODUCTOR NORMAL
========================================================= */

.cristal-reproductor {

    padding: 10px;

    border:
        1px solid
        var(--borde);

    border-radius: 38px;

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

    backdrop-filter:
        blur(30px)
        saturate(150%);

    -webkit-backdrop-filter:
        blur(30px)
        saturate(150%);

    box-shadow:
        var(--sombra);
}


.video-contenedor {

    position: relative;

    width: 100%;

    aspect-ratio:
        16 / 9;

    overflow: hidden;

    border-radius:
        30px;

    background:
        #111;
}


video {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: contain;

    background:
        #111;
}


/* =========================================================
   PANTALLA INICIAL
========================================================= */

.pantalla-inicial {

    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 18px;

    color: white;

    background:
        linear-gradient(
            135deg,
            rgba(10,35,75,.72),
            rgba(20,60,120,.45)
        );

    backdrop-filter:
        blur(15px);

    -webkit-backdrop-filter:
        blur(15px);

    z-index: 4;

    transition:
        opacity .3s ease;
}


.pantalla-inicial.oculto {

    opacity: 0;

    pointer-events: none;
}


.icono-play-grande {

    width: 80px;
    height: 80px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding-left: 5px;

    border-radius:
        50%;

    color: white;

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

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

    backdrop-filter:
        blur(20px);

    font-size: 28px;
}


/* =========================================================
   PLAY CENTRAL
========================================================= */

.play-central {

    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%,-50%)
        scale(.9);

    width: 75px;
    height: 75px;

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

    border-radius:
        50%;

    color: white;

    background:
        rgba(60,120,216,.85);

    backdrop-filter:
        blur(15px);

    font-size: 27px;

    cursor: pointer;

    opacity: 0;

    pointer-events: none;

    transition:
        .25s ease;

    z-index: 8;
}


.video-contenedor:not(.reproduciendo)
.play-central {

    opacity: 1;

    pointer-events: auto;

    transform:
        translate(-50%,-50%)
        scale(1);
}


.play-central:hover {

    transform:
        translate(-50%,-50%)
        scale(1.08);
}


/* =========================================================
   VIDEO SUPERIOR
========================================================= */

.video-superior {

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    padding: 25px;

    color: white;

    background:
        linear-gradient(
            rgba(0,0,0,.65),
            transparent
        );

    z-index: 5;
}


.video-serie {

    font-weight:
        800;
}


.separador {

    margin:
        0 8px;

    opacity:
        .6;
}


/* =========================================================
   CONTROLES NORMALES
========================================================= */

.controles-video {

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    padding:
        14px
        18px
        16px;

    color: white;

    background:
        linear-gradient(
            transparent,
            rgba(0,0,0,.82)
        );

    opacity: 0;

    transition:
        opacity .25s ease;

    z-index: 10;
}


.video-contenedor:hover
.controles-video,

.video-contenedor.mostrando-controles
.controles-video {

    opacity: 1;
}


/* =========================================================
   BARRA PROGRESO NORMAL
========================================================= */

.barra-progreso {

    width: 100%;

    height: 5px;

    margin-bottom: 12px;

    border-radius:
        10px;

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

    cursor: pointer;
}


.progreso {

    width: 0%;

    height: 100%;

    border-radius:
        inherit;

    background:
        var(--azul-claro);

    box-shadow:
        0 0 12px
        rgba(110,168,254,.7);
}


/* =========================================================
   FILA CONTROLES
========================================================= */

.fila-controles {

    display: flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap: 15px;
}


.controles-izquierda,
.controles-derecha {

    display: flex;

    align-items:
        center;

    gap: 7px;
}


.control {

    width: 36px;
    height: 36px;

    display: flex;

    align-items:
        center;

    justify-content:
        center;

    color: white;

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

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

    border-radius:
        12px;

    cursor: pointer;

    backdrop-filter:
        blur(12px);

    transition:
        .2s ease;
}


.control:hover {

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

    transform:
        translateY(-1px);
}


.tiempo {

    margin-left: 5px;

    font-size: 13px;

    white-space:
        nowrap;
}


.volumen {

    display: flex;

    align-items:
        center;

    gap: 5px;
}


#volumen {

    width: 75px;

    accent-color:
        var(--azul-claro);
}


/* =========================================================
   MENÚ VELOCIDAD
========================================================= */

.menu-control {

    position: relative;
}


.menu-flotante {

    position: absolute;

    right: 0;
    bottom: 48px;

    width: 120px;

    padding: 8px;

    display: none;

    flex-direction: column;

    gap: 4px;

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

    border-radius:
        18px;

    background:
        rgba(20,45,85,.78);

    backdrop-filter:
        blur(25px);

    -webkit-backdrop-filter:
        blur(25px);

    box-shadow:
        0 15px 35px
        rgba(0,0,0,.3);
}


.menu-flotante.abierto {

    display: flex;
}


.menu-flotante button {

    padding: 9px;

    border: 0;

    border-radius:
        11px;

    color: white;

    background:
        transparent;

    cursor: pointer;
}


.menu-flotante button:hover {

    background:
        rgba(255,255,255,.15);
}


/* =========================================================
   INFORMACIÓN EPISODIO
========================================================= */

.informacion-episodio {

    margin-top: 18px;

    padding: 25px;

    display: flex;

    justify-content:
        space-between;

    gap: 25px;

    border:
        1px solid
        var(--borde);

    border-radius:
        30px;

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

    backdrop-filter:
        blur(30px)
        saturate(140%);

    -webkit-backdrop-filter:
        blur(30px)
        saturate(140%);

    box-shadow:
        0 15px 45px
        rgba(0,0,0,.12);
}


.etiquetas {

    display: flex;

    align-items:
        center;

    gap: 9px;

    margin-bottom:
        10px;
}


.etiqueta {

    padding:
        5px
        10px;

    border-radius:
        10px;

    color: white;

    background:
        var(--azul);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        1px;
}


.temporada {

    font-size:
        13px;

    opacity:
        .65;
}


.informacion-episodio h1 {

    margin-bottom:
        10px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            25px,
            3vw,
            38px
        );
}


.informacion-episodio p {

    max-width:
        750px;

    line-height:
        1.6;

    color:
        rgba(17,17,17,.7);
}


.acciones-episodio {

    display: flex;

    align-items:
        center;

    gap: 10px;
}


.accion {

    padding:
        11px
        15px;

    display: flex;

    align-items:
        center;

    gap: 7px;

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

    border-radius:
        17px;

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

    backdrop-filter:
        blur(15px);

    cursor: pointer;

    transition:
        .2s ease;
}


.accion:hover {

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

    transform:
        translateY(-2px);
}


/* =========================================================
   PANEL EPISODIOS
========================================================= */

.panel-episodios {

    min-height: 0;

    padding: 22px;

    border:
        1px solid
        var(--borde);

    border-radius:
        32px;

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

    backdrop-filter:
        blur(30px)
        saturate(150%);

    -webkit-backdrop-filter:
        blur(30px)
        saturate(150%);

    box-shadow:
        var(--sombra);
}


.cabecera-episodios {

    display: flex;

    justify-content:
        space-between;

    align-items:
        flex-start;

    gap: 10px;

    padding-bottom:
        18px;

    border-bottom:
        1px solid
        rgba(0,0,0,.08);
}


.mini-titulo {

    color:
        var(--azul);

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        1.5px;
}


.cabecera-episodios h2 {

    margin-top:
        5px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        25px;
}


.contador {

    padding:
        7px
        10px;

    border-radius:
        12px;

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

    font-size:
        11px;

    white-space:
        nowrap;
}


.lista-episodios {

    margin-top:
        15px;

    max-height:
        650px;

    overflow-y:
        auto;

    padding-right:
        5px;
}


.lista-episodios::-webkit-scrollbar {

    width:
        5px;
}


.lista-episodios::-webkit-scrollbar-thumb {

    border-radius:
        10px;

    background:
        rgba(60,120,216,.5);
}


/* =========================================================
   TARJETA EPISODIO
========================================================= */

.episodio {

    width: 100%;

    margin-bottom:
        10px;

    padding:
        10px;

    display: flex;

    align-items:
        center;

    gap: 12px;

    border:
        1px solid transparent;

    border-radius:
        20px;

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

    cursor: pointer;

    transition:
        .25s ease;

    text-align: left;
}


.episodio:hover {

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

    transform:
        translateX(3px);
}


.episodio.activo {

    background:
        var(--azul);

    color: white;

    border-color:
        rgba(255,255,255,.45);

    box-shadow:
        0 10px 25px
        rgba(60,120,216,.25);
}


.miniatura {

    position: relative;

    flex:
        0 0 105px;

    height:
        65px;

    overflow:
        hidden;

    border-radius:
        14px;

    background:
        linear-gradient(
            135deg,
            #2459A8,
            #6EA8FE
        );
}


.miniatura img {

    width: 100%;
    height: 100%;

    object-fit: cover;
}


.numero-episodio {

    position: absolute;

    left: 7px;
    bottom: 6px;

    padding:
        3px
        6px;

    border-radius:
        7px;

    color: white;

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

    font-size:
        10px;

    font-weight:
        800;
}


.informacion-mini {

    min-width: 0;
}


.informacion-mini h3 {

    margin-bottom:
        5px;

    font-size:
        14px;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;
}


.informacion-mini p {

    display:
        -webkit-box;

    -webkit-line-clamp:
        2;

    -webkit-box-orient:
        vertical;

    overflow:
        hidden;

    font-size:
        11px;

    line-height:
        1.35;

    opacity:
        .65;
}


.episodio.activo
.informacion-mini p {

    opacity:
        .85;
}


/* =========================================================
   MODAL SIGUIENTE
========================================================= */

.modal-siguiente {

    position: fixed;

    inset: 0;

    display: flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        20px;

    background:
        rgba(10,25,50,.38);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    opacity: 0;

    visibility:
        hidden;

    pointer-events:
        none;

    transition:
        .3s ease;

    z-index:
        100;
}


.modal-siguiente.visible {

    opacity: 1;

    visibility:
        visible;

    pointer-events:
        auto;
}


.cristal-siguiente {

    width:
        min(
            480px,
            100%
        );

    padding:
        35px;

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

    border-radius:
        32px;

    color: white;

    background:
        rgba(30,65,120,.72);

    backdrop-filter:
        blur(35px)
        saturate(160%);

    -webkit-backdrop-filter:
        blur(35px)
        saturate(160%);

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


.siguiente-label {

    color:
        #BBD7FF;

    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        1.5px;
}


.cristal-siguiente h2 {

    margin:
        10px 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        30px;
}


.cristal-siguiente p {

    color:
        rgba(255,255,255,.78);

    line-height:
        1.5;
}


.acciones-siguiente {

    margin-top:
        25px;

    display:
        flex;

    gap:
        10px;
}


.boton-siguiente-principal,
.boton-cerrar-siguiente {

    padding:
        12px
        18px;

    border-radius:
        15px;

    cursor:
        pointer;

    font-weight:
        700;
}


.boton-siguiente-principal {

    border:
        0;

    color:
        white;

    background:
        var(--azul);
}


.boton-cerrar-siguiente {

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

    color:
        white;

    background:
        rgba(255,255,255,.12);
}


/* =========================================================
   CARGANDO
========================================================= */

.cargando {

    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    color: white;

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

    backdrop-filter:
        blur(8px);

    z-index:
        20;

    opacity:
        0;

    visibility:
        hidden;

    transition:
        .2s ease;
}


.cargando.visible {

    opacity:
        1;

    visibility:
        visible;
}


.spinner {

    width:
        38px;

    height:
        38px;

    border:
        3px solid
        rgba(255,255,255,.25);

    border-top-color:
        white;

    border-radius:
        50%;

    animation:
        girar
        .8s
        linear
        infinite;
}


@keyframes girar {

    to {
        transform:
            rotate(360deg);
    }
}


/* =========================================================
   TOAST
========================================================= */

.toast {

    position: fixed;

    left:
        50%;

    bottom:
        30px;

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

    padding:
        12px
        18px;

    color: white;

    background:
        rgba(20,50,90,.82);

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

    border-radius:
        16px;

    backdrop-filter:
        blur(20px);

    box-shadow:
        0 15px 40px
        rgba(0,0,0,.25);

    opacity:
        0;

    pointer-events:
        none;

    transition:
        .3s ease;

    z-index:
        200;
}


.toast.visible {

    opacity:
        1;

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


/* =========================================================
   =========================================================
   PANTALLA COMPLETA
   SOLO ESCRITORIO
   =========================================================
========================================================= */

@media (min-width: 769px) {

    /* -----------------------------------------------------
       CONTENEDOR FULLSCREEN
    ----------------------------------------------------- */

    .video-contenedor.modo-pantalla-completa,
    .video-contenedor:fullscreen {

        width:
            100vw;

        height:
            100vh;

        aspect-ratio:
            auto;

        border-radius:
            0;

        overflow:
            hidden;

        background:
            #050505;

        position:
            fixed;

        inset:
            0;

        z-index:
            99999;
    }


    /* -----------------------------------------------------
       VIDEO FULLSCREEN
    ----------------------------------------------------- */

    .video-contenedor.modo-pantalla-completa video,
    .video-contenedor:fullscreen video {

        width:
            100%;

        height:
            100%;

        min-width:
            100%;

        min-height:
            100%;

        object-fit:
            contain;

        background:
            #050505;

        border-radius:
            0;
    }


    /* -----------------------------------------------------
       QUITAR PLAY CENTRAL
       EN FULLSCREEN
    ----------------------------------------------------- */

    .video-contenedor.modo-pantalla-completa
    .play-central,
    .video-contenedor:fullscreen
    .play-central {

        display:
            none;
    }


    /* -----------------------------------------------------
       INFORMACIÓN SUPERIOR
       ESTILO DEL SEGUNDO CSS
    ----------------------------------------------------- */

    .video-contenedor.modo-pantalla-completa
    .video-superior,
    .video-contenedor:fullscreen
    .video-superior {

        top:
            40px;

        left:
            auto;

        right:
            50px;

        padding:
            0;

        text-align:
            right;

        color:
            white;

        background:
            none;

        z-index:
            15;

        transition:
            .5s ease;
    }


    .video-contenedor.modo-pantalla-completa
    .video-serie,
    .video-contenedor:fullscreen
    .video-serie {

        display:
            inline;

        font-size:
            35px;

        font-weight:
            800;
    }


    .video-contenedor.modo-pantalla-completa
    #videoEpisodio,
    .video-contenedor:fullscreen
    #videoEpisodio {

        display:
            block;

        margin-top:
            4px;

        font-size:
            22px;

        font-weight:
            normal;

        opacity:
            .8;
    }


    .video-contenedor.modo-pantalla-completa
    .separador,
    .video-contenedor:fullscreen
    .separador {

        display:
            none;
    }


    /* -----------------------------------------------------
       CONTROLES FULLSCREEN
       CRISTAL LÍQUIDO DEL SEGUNDO DISEÑO
    ----------------------------------------------------- */

    .video-contenedor.modo-pantalla-completa
    .controles-video,
    .video-contenedor:fullscreen
    .controles-video {

        position:
            absolute;

        left:
            50%;

        right:
            auto;

        bottom:
            35px;

        transform:
            translateX(-50%);

        width:
            80%;

        padding:
            15px
            25px;

        display:
            block;

        color:
            white;

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

        backdrop-filter:
            blur(20px);

        -webkit-backdrop-filter:
            blur(20px);

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

        border-radius:
            50px;

        box-shadow:
            0 15px 40px
            rgba(0,0,0,.25);

        opacity:
            1;

        z-index:
            20;
    }


    /* -----------------------------------------------------
       BARRA DE PROGRESO FULLSCREEN
    ----------------------------------------------------- */

    .video-contenedor.modo-pantalla-completa
    .barra-progreso,
    .video-contenedor:fullscreen
    .barra-progreso {

        width:
            100%;

        height:
            8px;

        margin:
            0
            0
            15px;

        border-radius:
            20px;

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

        overflow:
            hidden;

        cursor:
            pointer;
    }


    .video-contenedor.modo-pantalla-completa
    .progreso,
    .video-contenedor:fullscreen
    .progreso {

        height:
            100%;

        background:
            white;

        box-shadow:
            none;
    }


    /* -----------------------------------------------------
       FILA FULLSCREEN
    ----------------------------------------------------- */

    .video-contenedor.modo-pantalla-completa
    .fila-controles,
    .video-contenedor:fullscreen
    .fila-controles {

        width:
            100%;

        display:
            flex;

        align-items:
            center;

        justify-content:
            space-between;

        gap:
            15px;
    }


    /* -----------------------------------------------------
       IZQUIERDA FULLSCREEN
    ----------------------------------------------------- */

    .video-contenedor.modo-pantalla-completa
    .controles-izquierda,
    .video-contenedor:fullscreen
    .controles-izquierda {

        display:
            flex;

        align-items:
            center;

        gap:
            10px;
    }


    /* -----------------------------------------------------
       BOTÓN PLAY FULLSCREEN
    ----------------------------------------------------- */

    .video-contenedor.modo-pantalla-completa
    #botonPlay,
    .video-contenedor:fullscreen
    #botonPlay {

        width:
            48px;

        height:
            48px;

        padding:
            0;

        color:
            white;

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

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

        border-radius:
            50%;

        backdrop-filter:
            blur(20px);

        -webkit-backdrop-filter:
            blur(20px);

        font-size:
            17px;
    }


    .video-contenedor.modo-pantalla-completa
    #botonPlay:hover,
    .video-contenedor:fullscreen
    #botonPlay:hover {

        transform:
            scale(1.08);

        background:
            rgba(255,255,255,.30);
    }


    /* -----------------------------------------------------
       TIEMPO FULLSCREEN
    ----------------------------------------------------- */

    .video-contenedor.modo-pantalla-completa
    .tiempo,
    .video-contenedor:fullscreen
    .tiempo {

        margin-left:
            3px;

        color:
            rgba(255,255,255,.85);

        font-size:
            14px;
    }


    /* -----------------------------------------------------
       OCULTAR CONTROLES QUE NO DEBEN FUNCIONAR
    ----------------------------------------------------- */

    .video-contenedor.modo-pantalla-completa
    #botonAnterior,
    .video-contenedor:fullscreen
    #botonAnterior,

    .video-contenedor.modo-pantalla-completa
    #botonSiguiente,
    .video-contenedor:fullscreen
    #botonSiguiente,

    .video-contenedor.modo-pantalla-completa
    .volumen,
    .video-contenedor:fullscreen
    .volumen,

    .video-contenedor.modo-pantalla-completa
    .menu-control,
    .video-contenedor:fullscreen
    .menu-control {

        display:
            none;
    }


    /* -----------------------------------------------------
       DERECHA FULLSCREEN
    ----------------------------------------------------- */

    .video-contenedor.modo-pantalla-completa
    .controles-derecha,
    .video-contenedor:fullscreen
    .controles-derecha {

        display:
            flex;

        align-items:
            center;

        gap:
            10px;
    }


    /* -----------------------------------------------------
       BOTÓN PANTALLA COMPLETA
    ----------------------------------------------------- */

    .video-contenedor.modo-pantalla-completa
    #botonPantalla,
    .video-contenedor:fullscreen
    #botonPantalla {

        width:
            48px;

        height:
            48px;

        padding:
            0;

        color:
            white;

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

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

        border-radius:
            50%;

        backdrop-filter:
            blur(20px);

        -webkit-backdrop-filter:
            blur(20px);

        font-size:
            20px;
    }


    .video-contenedor.modo-pantalla-completa
    #botonPantalla:hover,
    .video-contenedor:fullscreen
    #botonPantalla:hover {

        transform:
            scale(1.08);

        background:
            rgba(255,255,255,.30);
    }


    /* -----------------------------------------------------
       CARGANDO EN FULLSCREEN
    ----------------------------------------------------- */

    .video-contenedor.modo-pantalla-completa
    .cargando,
    .video-contenedor:fullscreen
    .cargando {

        border-radius:
            0;
    }
}


/* =========================================================
   TABLET / PANTALLAS MEDIANAS
========================================================= */

@media (max-width: 1100px) {

    .contenedor-principal {

        grid-template-columns:
            1fr;
    }


    .panel-episodios {

        width:
            100%;
    }


    .lista-episodios {

        display:
            grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );

        gap:
            10px;
    }


    .episodio {

        margin-bottom:
            0;
    }
}


/* =========================================================
   MÓVIL
   - NUNCA usa el diseño fullscreen
========================================================= */

@media (max-width: 700px) {

    .encabezado {

        width:
            calc(100% - 20px);

        margin-top:
            10px;
    }


    .logo {

        font-size:
            15px;
    }


    .marca-diviertete {

        font-size:
            15px;
    }


    .boton-regresar {

        padding:
            9px
            12px;
    }


    .boton-regresar span:last-child {

        display:
            none;
    }


    .contenedor-principal {

        width:
            calc(100% - 20px);

        margin-top:
            20px;
    }


    .cristal-reproductor {

        padding:
            6px;

        border-radius:
            25px;
    }


    .video-contenedor {

        border-radius:
            21px;
    }


    .informacion-episodio {

        padding:
            18px;

        flex-direction:
            column;
    }


    .acciones-episodio {

        width:
            100%;
    }


    .accion {

        flex:
            1;

        justify-content:
            center;
    }


    .lista-episodios {

        grid-template-columns:
            1fr;
    }


    .controles-izquierda {

        gap:
            3px;
    }


    .volumen input {

        display:
            none;
    }


    .tiempo {

        font-size:
            11px;
    }


    /* Evita cualquier apariencia de fullscreen especial */
    .video-contenedor.modo-pantalla-completa,
    .video-contenedor:fullscreen {

        width:
            100%;

        height:
            auto;

        aspect-ratio:
            16 / 9;

        position:
            relative;

        inset:
            auto;

        border-radius:
            21px;

        background:
            #111;

        z-index:
            auto;
    }
}


/* =========================================================
   MÓVILES PEQUEÑOS
========================================================= */

@media (max-width: 480px) {

    .encabezado {

        padding:
            10px
            12px;
    }


    .logo {

        display:
            none;
    }


    .marca-diviertete {

        position:
            static;

        transform:
            none;

        margin:
            auto;
    }


    .video-superior {

        padding:
            15px;

        font-size:
            12px;
    }


    .controles-video {

        padding:
            10px;
    }


    .barra-progreso {

        margin-bottom:
            8px;
    }


    .control {

        width:
            29px;

        height:
            29px;

        border-radius:
            9px;

        font-size:
            12px;
    }


    .tiempo {

        display:
            none;
    }


    .informacion-episodio h1 {

        font-size:
            25px;
    }


    .cristal-siguiente {

        padding:
            25px;
    }
}