/* ==========================================
        NOVATECH VIDEOS
========================================== */

#visorVideo{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    background:rgba(0,0,0,.95);

    display:none;

    justify-content:center;
    align-items:center;

    z-index:999999;

    visibility:hidden;
    opacity:0;

    transition:.3s;
}

#visorVideo.activo{

    display:flex;
    visibility:visible;
    opacity:1;

}
/* ==========================
        CONTENEDOR
========================== */

.contenedor-video{

    position:relative;

    width:390px;

    height:90vh;

    background:#000;

    border-radius:20px;

    overflow:hidden;

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

}

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

#videoPrincipal{

    width:100%;

    height:100%;

    object-fit:cover;

    background:black;

}

/* Si tu video es horizontal cambia cover por contain */

/*
#videoPrincipal{
    object-fit:contain;
}
*/

/* ==========================
        CERRAR
========================== */

.cerrar{

    position:absolute;

    top:15px;

    left:18px;

    font-size:35px;

    color:white;

    cursor:pointer;

    z-index:100;

    transition:.3s;

}

.cerrar:hover{

    transform:scale(1.2);

}

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

.info-video{

    position:absolute;

    left:20px;

    bottom:25px;

    color:white;

    z-index:50;

    max-width:260px;

}

.info-video h2{

    font-size:24px;

    margin-bottom:8px;

}

.info-video p{

    font-size:15px;

    opacity:.9;

    line-height:1.5;

}

/* ==========================
        BOTONES
========================== */

.acciones-video{

    position:absolute;

    right:15px;

    bottom:90px;

    display:flex;

    flex-direction:column;

    gap:18px;

    z-index:100;

}

.accion{

    width:65px;

    height:65px;

    border:none;

    border-radius:50%;

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

    backdrop-filter:blur(10px);

    color:white;

    font-size:24px;

    cursor:pointer;

    transition:.25s;

}

.accion:hover{

    transform:scale(1.12);

    background:#00c3ff;

}

/* ==========================
        CONTADORES
========================== */

.accion span{

    display:block;

    font-size:12px;

    margin-top:3px;

}

/* ==========================
       BOTÓN COMPRAR
========================== */

.comprar{

    width:80px;

    height:42px;

    border-radius:12px;

    background:#00b8ff;

    color:white;

    font-size:14px;

    font-weight:bold;

}

.comprar:hover{

    background:#0095d4;

}

/* ==========================
      MENSAJE SUPERIOR
========================== */

.instruccion{

    position:absolute;

    top:20px;

    left:50%;

    transform:translateX(-50%);

    color:white;

    font-size:14px;

    opacity:.75;

    z-index:100;

}

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

@media(max-width:600px){

    .contenedor-video{

        width:100%;

        height:100vh;

        border-radius:0;

    }

}