:root {
    --videos-superficie: rgba(255, 255, 255, 0.045);
    --videos-superficie-hover: rgba(255, 255, 255, 0.08);
    --videos-borde: rgba(255, 255, 255, 0.1);
    --videos-borde-fuerte: rgba(255, 255, 255, 0.22);
    --videos-texto-tenue: rgba(255, 255, 255, 0.62);
    --videos-texto-tenue-fuerte: rgba(255, 255, 255, 0.38);
    --videos-sombra: rgba(0, 0, 0, 0.55);
}





/* SECCIÓN ENCABEZADO VIDEOS | INICIO */
.seccion-encabezado-videos{
    width: calc(100% - clamp(40px, 10vw, 160px));
    height: calc(100vh - clamp(100px,15vw,200px));
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:flex-end;
    gap:30px;
    padding:clamp(20px,5vw,80px);
    margin-bottom:clamp(40px,6vw,70px);
    position:relative;
    overflow:hidden;
}

.video-fondo-videos{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:0;
}

.capa-video-videos{
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.75));
    z-index:1;
}

.contenedor-titulo-videos,
.contenedor-filtros-videos{
    position:relative;
    z-index:2;
}

.contenedor-titulo-videos {
    display: flex;
    flex-wrap: wrap;
    max-width: 640px;
}

.contenedor-filtros-videos {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
}
/* SECCIÓN ENCABEZADO VIDEOS | FINAL */





/* SECCIÓN CONTENIDO VIDEOS | INICIO */
.seccion-contenido-videos{
    width: calc(100% - clamp(40px, 10vw, 100px));
    height: auto;
    padding: 0px clamp(20px, 5vw, 50px);
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: start;
    align-content: start;
    background-color: #ffffff;
    position: relative;
    overflow: hidden;
    padding-bottom: clamp(20px, 5vw, 50px);
}

.seccion-contenido-videos::before {
    content: "";
    position: absolute;
    top: -20%;
    right: -10%;
    width: 55%;
    height: 70%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 65%);
    pointer-events: none;
    z-index: 0;
}
.divisor-cinta {
    width: 100%;
    height: 14px;
    margin: clamp(36px, 5vw, 60px) 0px;
    background-image: repeating-linear-gradient(
        90deg,
        var(--color-texto-negro) 0px,
        var(--color-texto-negro) 8px,
        transparent 8px,
        transparent 22px
    );
    background-position: center;
    background-repeat: repeat-x;
    background-size: auto 8px;
    opacity: 0.55;
    position: relative;
    z-index: 1;
}

.contenedor-destacado-videos {
    width: 100%;
    position: relative;
    z-index: 1;
    opacity: 0;
    transform: translateY(24px);
}

.contenedor-destacado-videos.en-vista {
    animation: aparecer-subir 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.video-destacado {
    width: 100%;
    aspect-ratio: 21 / 9;
    border-radius: var(--radio-xl);
    overflow: hidden;
    position: relative;
    cursor: pointer;
    background-color: var(--videos-superficie);
    border: 1px solid var(--videos-borde);
}

.overlay-video-destacado {
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
    padding: clamp(20px, 4vw, 50px);
    display: flex;
    flex-wrap: wrap;
    align-content: flex-end;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0) 100%);
    box-sizing: border-box;
}

.grid-videos {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 2.5vw, 34px);
    position: relative;
    z-index: 1;
}
.grid-blog {
    width: 100%;
    display: none;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: clamp(20px, 2.5vw, 34px);
    position: relative;
    z-index: 1;
}
.tarjeta-blog{
    border-radius: 15px;
    width: calc(100% - clamp(30px, 3vw, 40px));
    height: auto;
    padding: clamp(15px, 1.5vw, 20px);
    display: flex;
    flex-wrap: wrap;
    border: 1px #999999 solid;
}
.tarjeta-video {
    display: flex;
    flex-wrap: wrap;
    align-content: start;
    cursor: pointer;
    opacity: 0;
    transform: translateY(28px);
}

.tarjeta-video.en-vista {
    animation: aparecer-subir 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.miniatura-video {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radio-lg);
    overflow: hidden;
    position: relative;
    background-color: var(--videos-superficie);
    border: 1px solid var(--videos-borde);
}
.overlay-miniatura {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 55%);
    opacity: 0;
}
.info-tarjeta-video {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding-top: 14px;
}
.contenedor-cargar-mas {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: clamp(40px, 6vw, 70px);
    position: relative;
    z-index: 1;
}
.contenedor-modal-video {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    z-index: 9999;
    display: none;
    justify-content: center;
    align-items: center;
    padding: clamp(15px, 3vw, 40px);
    box-sizing: border-box;
}
.modal-video {
    width: 100%;
    max-width: 960px;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    transform: scale(0.92);
    opacity: 0;
}
.contenedor-modal-video.activo .modal-video {
    animation: aparecer-modal 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.reproductor-modal-video {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radio-lg);
    overflow: hidden;
    position: relative;
    background-color: #000000;
    cursor: pointer;
}
.imagen-fondo-modal {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.55;
}
.info-modal-video {
    width: 100%;
    padding-top: 22px;
    display: flex;
    flex-wrap: wrap;
}
.contenedor-buscador-videos{
    width:100%;
    display:flex;
    justify-content:flex-start;
    margin-bottom:clamp(25px,3vw,40px);
    position:relative;
    z-index:2;
}
.buscador-videos{
    width:100%;
    height:52px;
    padding:0px 20px;
    color:var(--color-texto-negro);
    font-family:var(--fuente-avenir);
    font-weight:350;
    font-size:clamp(13px,1vw,15px);
    background-color:#ffffff;
    border:1px solid #d8d8d8;
    border-radius:100px;
    outline:none;
    box-sizing:border-box;
    transition:border-color .3s ease,box-shadow .3s ease;
}
.buscador-videos::placeholder{
    color:#999999;
}
.buscador-videos:focus{
    border-color:#505050;
    box-shadow:0px 5px 20px rgba(0,0,0,.08);
}
.contenedor-h2{
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}
/* CONTENEDORES | FINAL */



/* TEXTOS | INICIO */
.h2-colecciones{
    width: auto;
    color: #505050;
    font-weight: 100;
    font-family: var(--fuente-avenir);
    font-size: clamp(15px, 1.5vw, 20px);
    margin-bottom: 15px;
    cursor: pointer;
    transition: 0.25s;
    padding-bottom: 5px;
}
.h2-colecciones:hover{
    color: #252525;
}
.h2-colecciones:active{
    color: #252525;
}
.h2-colecciones-activo{
    border-bottom: 2px #505050 solid;
    color: #252525;
}
.etiqueta-videos {
    width: 100%;
    color: var(--color-texto-blanco);
    font-family: var(--fuente-avenir);
    font-weight: 500;
    font-size: clamp(11px, 1vw, 13px);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.titulo-videos {
    width: 100%;
    color: var(--color-texto-blanco);
    font-family: var(--fuente-avenir);
    font-weight: 900;
    font-size: clamp(32px, 4.2vw, 58px);
    line-height: 1.05;
    letter-spacing: -0.5px;
}
.h3-tarjeta-blog{
    width: 100%;
    text-align: start;
    color: var(--color-texto-negro);
    font-weight: 600;
    font-size: clamp(17px, 2vw, 20px);
    font-family: var(--fuente-avenir);
    margin-bottom: 10px;

    line-height: 1.15;
    height: calc(1.15em * 3);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
.parrafo-tarjeta-blog{
    width: 100%;
    text-align: start;
    color: var(--color-texto-negro);
    font-weight: 400;
    font-size: clamp(14px, 1vw, 17px);
    font-family: var(--fuente-avenir);
    margin-bottom: 10px;

    line-height: 1.15;
    height: calc(1.15em * 4);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    
}
.parrafo-videos {
    width: 100%;
    color: var(--color-texto-blanco);
    font-family: var(--fuente-avenir);
    font-weight: 350;
    font-size: clamp(14px, 1.1vw, 17px);
    line-height: 1.6;
    margin-top: 14px;
    max-width: 480px;
}

.filtro-videos {
    color: var(--color-texto-blanco);
    font-family: var(--fuente-avenir);
    font-weight: 500;
    font-size: clamp(12px, 0.95vw, 14px);
    text-transform: uppercase;
    letter-spacing: 1px;
    background-color: transparent;
    border: 1px solid var(--color-texto-blanco);
    border-radius: 100px;
    padding: 10px 22px;
    cursor: pointer;
}

.filtro-videos:hover {
    color: var(--color-texto-blanco);
    border-color: var(--color-texto-blanco);
}

.filtro-videos.activo {
    background-color: var(--color-texto-blanco);
    color: var(--color-texto-b);
    border-color: var(--color-texto-negro);
}

.etiqueta-destacado {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-texto-blanco);
    font-family: var(--fuente-avenir);
    font-weight: 600;
    font-size: clamp(11px, 0.9vw, 13px);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.etiqueta-destacado::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-texto-blanco);
    animation: latir 1.8s ease-in-out infinite;
}

.titulo-video-destacado {
    width: 100%;
    max-width: 720px;
    color: var(--color-texto-blanco);
    font-family: var(--fuente-avenir);
    font-weight: 800;
    font-size: clamp(22px, 3vw, 36px);
    line-height: 1.15;
}

.meta-video-destacado {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    color: var(--color-texto-blanco);
    font-family: var(--fuente-avenir);
    font-weight: 350;
    font-size: clamp(12px, 0.95vw, 15px);
    margin-top: 12px;
}

.meta-video-destacado span:not(:last-child)::after {
    content: "·";
    margin-left: 10px;
    color: var(--color-texto-negro);
}

.duracion-video {
    position: absolute;
    right: 10px;
    bottom: 10px;
    color: var(--color-texto-negro);
    font-family: var(--fuente-avenir);
    font-weight: 600;
    font-size: 12px;
    background-color: rgba(0, 0, 0, 0.75);
    padding: 4px 9px;
    border-radius: var(--radio-sm);
    letter-spacing: 0.5px;
}

.titulo-tarjeta-video {
    width: 100%;
    color: var(--color-texto-negro);
    font-family: var(--fuente-avenir);
    font-weight: 600;
    font-size: clamp(14px, 1.1vw, 16px);
    line-height: 1.4;
}

.meta-tarjeta-video {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    color: var(--color-texto-negro);
    font-family: var(--fuente-avenir);
    font-weight: 350;
    font-size: clamp(12px, 0.9vw, 13.5px);
    margin-top: 6px;
}

.meta-tarjeta-video span:not(:last-child)::after {
    content: "·";
    margin-left: 6px;
    color: var(--videos-texto-tenue-fuerte);
}

.titulo-modal-video {
    width: 100%;
    color: var(--color-texto-negro);
    font-family: var(--fuente-avenir);
    font-weight: 800;
    font-size: clamp(18px, 1.8vw, 24px);
    line-height: 1.3;
    display: none;
}

.meta-modal-video {
    width: 100%;
    color: var(--color-texto-negro);
    font-family: var(--fuente-avenir);
    font-weight: 350;
    font-size: 14px;
    margin-top: 8px;
}
/* TEXTOS | FINAL */



/* BOTONES | INICIO */
.boton-play-destacado,
.boton-play-video,
.boton-play-modal {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    cursor: pointer;
}

.boton-play-destacado {
    width: clamp(56px, 5vw, 74px);
    height: clamp(56px, 5vw, 74px);
    position: absolute;
    top: clamp(20px, 4vw, 50px);
    right: clamp(20px, 4vw, 50px);
}

.boton-play-destacado svg {
    width: 38%;
    margin-left: 3px;
}

.video-destacado:hover .boton-play-destacado {
    background-color: var(--color-texto-blanco);
    border-color: var(--color-texto-blanco);
    transform: scale(1.08);
}

.video-destacado:hover .boton-play-destacado svg path {
    fill: var(--color-texto-negro);
}

.boton-play-video {
    width: 56px;
    height: 56px;
    transform: scale(0.8);
}

.boton-play-video svg {
    width: 36%;
    margin-left: 3px;
}

.tarjeta-video:hover .overlay-miniatura {
    opacity: 1;
}

.tarjeta-video:hover .boton-play-video {
    transform: scale(1);
    background-color: var(--color-texto-blanco);
    border-color: var(--color-texto-blanco);
}

.tarjeta-video:hover .boton-play-video svg path {
    fill: var(--color-texto-negro);
}

.boton-cargar-mas {
    color: var(--color-texto-negro);
    font-family: var(--fuente-avenir);
    font-weight: 600;
    font-size: clamp(13px, 1vw, 15px);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    background-color: transparent;
    border: 1px solid var(--color-texto-negro);
    border-radius: 100px;
    padding: 15px 34px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.boton-cargar-mas::before {
    content: "";
    position: absolute;
    top: 0px;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: var(--color-texto-blanco);
    z-index: -1;
    transition: left 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.boton-cargar-mas:hover {
    color: var(--color-texto-negro);
}

.boton-cargar-mas:hover::before {
    left: 0%;
}

.boton-cargar-mas.cargando {
    pointer-events: none;
    opacity: 0.6;
}

.boton-cerrar-modal {
    position: absolute;
    top: -46px;
    right: 0px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    border: 1px solid var(--videos-borde-fuerte);
    color: var(--color-texto-negro);
    font-family: var(--fuente-avenir);
    font-size: 16px;
    cursor: pointer;
}

.boton-cerrar-modal:hover {
    background-color: var(--color-texto-blanco);
    color: var(--color-texto-negro);
    transform: rotate(90deg);
}

.boton-play-modal {
    width: 78px;
    height: 78px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.boton-play-modal svg {
    width: 38%;
    margin-left: 3px;
}

.reproductor-modal-video:hover .boton-play-modal {
    background-color: var(--color-texto-blanco);
    border-color: var(--color-texto-blanco);
}

.reproductor-modal-video:hover .boton-play-modal svg path {
    fill: var(--color-texto-negro);
}
.boton-piedra-eterna {
    border-radius: clamp(15px, 1.5vw, 20px);
    color: var(--color-texto-gris);
    background-color: transparent;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    border: 1px solid var(--color-texto-gris);
    padding: clamp(5px, 1vw, 8px) clamp(11px, 1.5vw, 16px);
    font-weight: 600;
    font-family: var(--fuente-avenir);
    font-size: var(--texto-botones-generales);
    text-transform: uppercase;
    cursor: pointer;
    margin-top: clamp(20px, 2.5vw, 30px);
}
.boton-piedra-eterna span {
    margin-left: 10px;
}
.boton-piedra-eterna:hover {
    background-color: #ffffff50;
}
.boton-piedra-eterna:active {
    background-color: #ffffff;
    color: var(--color-texto-gris);
}
.tarjeta-blog:has(.boton-piedra-eterna:hover){
    background-color: #252525;
}
.tarjeta-blog:has(.boton-piedra-eterna:hover) p{
    color: #ffffff;
}
.tarjeta-blog:has(.boton-piedra-eterna:hover) h3{
    color: #ffffff;
}
.tarjeta-blog:has(.boton-piedra-eterna:hover) a{
    background-color: #ffffff;
}
/* BOTONES | FINAL */



/* EFECTOS Y ANIMACIONES | INICIO */
.video-destacado img,
.miniatura-video img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
    opacity: 0;
}

.video-destacado img.cargada,
.miniatura-video img.cargada {
    opacity: 1;
}

.miniatura-video::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: linear-gradient(100deg, var(--videos-superficie) 30%, var(--videos-superficie-hover) 50%, var(--videos-superficie) 70%);
    background-size: 250% 100%;
    animation: destello 1.6s ease-in-out infinite;
    z-index: 0;
}

.miniatura-video img.cargada ~ .duracion-video,
.miniatura-video:has(img.cargada)::before {
    display: none;
}

.video-destacado:hover img,
.tarjeta-video:hover .miniatura-video img {
    transform: scale(1.06);
}

.tarjeta-video:hover .titulo-tarjeta-video {
    color: var(--color-texto-negro);
}

@keyframes aparecer-subir {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: translateY(0px);
    }
}

@keyframes aparecer-modal {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes destello {
    0% { background-position: 0% 0%; }
    100% { background-position: -250% 0%; }
}

@keyframes latir {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.75); }
}

.filtro-videos,
.boton-play-destacado,
.boton-play-video,
.boton-play-modal,
.boton-cargar-mas,
.boton-cerrar-modal,
.video-destacado,
.miniatura-video,
.overlay-miniatura {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}

.grid-videos.filtrando {
    opacity: 0.35;
    transform: scale(0.99);
}

button:focus-visible,
.filtro-videos:focus-visible,
.tarjeta-video:focus-visible,
.video-destacado:focus-visible {
    outline: 2px solid var(--color-texto-blanco);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}
/* EFECTOS Y ANIMACIONES | FINAL */



/* RESPONSIVO | INICIO */
@media screen and (min-width: 701px) and (max-width: 1100px) {
    .grid-videos {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (min-width: 0px) and (max-width: 700px) {

    .seccion-encabezado-videos {
        align-items: center;
        justify-content: center;
        align-content: center;
    }
    

    .contenedor-filtros-videos {
        width: 100%;
        justify-content: center;
        align-content: center;
    }
    .contenedor-buscador-videos{
        justify-content:center;
    }

    .buscador-videos{
        max-width:100%;
    }
    .video-destacado {
        aspect-ratio: 4 / 5;
    }

    .boton-play-destacado {
        top: auto;
        bottom: clamp(20px, 4vw, 50px);
        right: clamp(20px, 4vw, 50px);
    }
    .h2-colecciones{
        text-align: center;
    }
    .titulo-video-destacado {
        max-width: 100%;
    }

    .grid-videos {
        grid-template-columns: 1fr;
    }
    .boton-cerrar-modal {
        top: -44px;
        right: 4px;
    }
    .etiqueta-videos{
        text-align: center;
    }
    .titulo-videos{
        text-align: center;
    }
    .capa-video-videos{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-content: center;
        align-items: center;
    }
}
/* RESPONSIVO | FINAL */



/* SECCIÓN CONTENIDO FINAL | INICIO */







.boton-opciones-video {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 38px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 0px;
    margin: 0px;
    background-color: transparent;
    border: 0px;
    cursor: pointer;
    z-index: 5;
    opacity: 1;
    transform: translateY(0px);
    transition: transform 0.25s ease;
}

.boton-opciones-video span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #ffffff;
    display: block;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.45);
}

.boton-opciones-video:hover {
    transform: scale(1.08);
}

.boton-opciones-video:hover span {
    transform: scale(1.15);
}

.boton-opciones-video:focus-visible {
    opacity: 1;
    transform: scale(1.08);
}
.menu-opciones-video {
    position: absolute;
    top: 48px;
    right: 10px;
    min-width: 165px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background-color: rgba(20, 20, 20, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 10px;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 20;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(0.96);
    transform-origin: top right;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

.menu-opciones-video.activo {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px) scale(1);
    pointer-events: auto;
}

.opcion-video {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 11px 13px;
    margin: 0px;
    color: #ffffff;
    font-family: var(--fuente-avenir);
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    background-color: transparent;
    border: 0px;
    border-radius: 7px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.opcion-video:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.opcion-video.completado {
    background-color: rgba(255, 255, 255, 0.12);
}