/* Estilos generales */
.gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 20px;
    justify-content: center;
    margin-top: 70px;
}
  
    .item {
        position: relative;
        width: 200px;
        height: 200px;
        overflow: hidden;
        border-radius: 8px;
        cursor: pointer;
    }
        .item img, .item video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .item.video::before {
            content: "🎥";
            position: absolute;
            top: 5px;
            right: 5px;
            font-size: 18px;
            color: white;
            background-color: rgba(0, 0, 0, 0.5);
            padding: 5px;
            border-radius: 50%;
        }

    #lightbox {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.8);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1001;
    }
        #lightbox.hidden {
            display: none;
        }
            #lightbox-content {
                position: relative;
                width: 90%;  /* Limitamos el ancho del contenedor al 90% */
                height: 90%;  /* Limitamos el alto del contenedor al 90% */
                display: flex;
                justify-content: center;
                align-items: center;
                overflow: hidden; /* Asegura que nada sobresalga */
            }
                #lightbox-content img,
                #lightbox-content video {
                    max-width: 100%;  /* La imagen o video ocupará todo el ancho disponible */
                    max-height: 100%; /* La imagen o video ocupará todo el alto disponible */
                    object-fit: contain; /* Ajusta sin distorsionar */
                }
            #close {
                position: absolute;
                top: 20px;
                right: 20px;
                background-color: transparent;
                color: white;
                border: none;
                font-size: 24px;
                cursor: pointer;
                z-index: 1001;
                pointer-events: auto;
            }
            #close:hover {
                color: #005d7c;
            }

video::-webkit-media-controls-volume-slider {display: none;}