/* Estilos para el contenedor clicable */
.video-lightbox-trigger {
    position:       relative;
    cursor:         pointer;
    transition:     transform 0.3s ease;
}

.video-lightbox-trigger:hover {
    transform:      scale(1.02);
}

.video-lightbox-trigger video {
    display:        block;
    width:          100%;
}

/* Estilo para el icono de reproducción */
.play-icon-overlay {
    position:           absolute;
    top:                50%;
    left:               50%;
    transform:          translate(-50%, -50%);
    font-size:          4rem;
    color:              white;
    background-color:   rgba(0, 0, 0, 0.6);
    border-radius:      50%;
    width:              100px;
    height:             100px;
    display:            flex;
    align-items:        center;
    justify-content:    center;
    pointer-events:     none; /* Asegura que el clic pase al contenedor padre */
    opacity:            0.8;
}

/* Estilos para el lightbox, si no los tienes aún */
.lightbox {
    position:           fixed;
    top:                0;
    left:               0;
    width:              100%;
    height:             100%;
    background-color:   rgba(0, 0, 0, 0.9);
    display:            none; /* Oculto por defecto */
    justify-content:    center;
    align-items:        center;
    z-index:            1000;
}

.lightbox_close {
    position:           absolute;
    top:                20px;
    right:              30px;
    color:              #fff;
    font-size:          40px;
    font-weight:        bold;
    cursor:             pointer;
}

.lightbox_img, .lightbox_video {
    max-width:          90%;
    max-height:         90%;
}