.galeria {
    display: flex; /* Utiliza un modelo de caja flexible */
    flex-wrap: wrap; /* Permite que los elementos se envuelvan en filas */
    justify-content: flex-start; /* Alinea los elementos al inicio horizontalmente */
}
.imagen, .video {
    margin: 10px; /* Margen exterior */
    width: calc(20% - 20px); /* Ancho del elemento (calculado con margen) */
}
.imagen img {
    width: 100%; /* Ancho completo */
    height: 200px; /* Altura fija */
    object-fit: cover; /* Ajusta la imagen al contenedor manteniendo la relación de aspecto */
    border-radius: 15px; /* Borde redondeado */
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); /* Sombra */
    transition: transform 0.3s ease; /* Transición suave al hacer hover */
}
.video video{
    width: 100%; /* Ancho completo */
    height: 200px; /* Altura fija */
    border-radius: 15px; /* Borde redondeado */
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); /* Sombra */
    transition: transform 0.3s ease; /* Transición suave al hacer hover */
}
.imagen img:hover, .video video:hover {
    transform: scale(1.05); /* Escala la imagen o video al 105% del tamaño original */
}

/* Estilos para el modal */
.modal {
    display: none; /* Oculta el modal por defecto */
    position: fixed; /* Posición fija */
    z-index: 1; /* Índice z */
    padding-top: 50px; /* Espaciado superior */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Habilita el desplazamiento si el contenido es más grande que el área visible */
    background-color: rgba(0, 0, 0, 0.9); /* Fondo oscuro semi-transparente */
}
.modal-content {
    margin: auto; /* Margen automático */
    display: block; /* Muestra el contenido como bloque */
    max-width: 80%; /* Ancho máximo del contenido */
    max-height: 80%; /* Altura máxima del contenido */
}
.close {
    color: white; /* Color del texto */
    position: absolute; /* Posición absoluta */
    top: 10px; /* Espaciado superior */
    right: 25px; /* Espaciado derecho */
    font-size: 35px; /* Tamaño de fuente */
    font-weight: bold; /* Peso de la fuente */
}
.close:hover, .close:focus {
    color: #999; /* Color del texto al hacer hover o focus */
    text-decoration: none; /* Sin decoración de texto */
    cursor: pointer; /* Cambia el cursor */
}
/* Estilos para las flechas de navegación */
.prev, .next {
    cursor: pointer; /* Cambia el cursor */
    position: absolute; /* Posición absoluta */
    top: 50%; /* Alinea verticalmente al 50% */
    width: auto; /* Ancho automático */
    padding: 16px; /* Espaciado interno */
    margin-top: -22px; /* Margen superior negativo */
    color: white; /* Color del texto */
    font-weight: bold; /* Peso de la fuente */
    font-size: 20px; /* Tamaño de fuente */
    transition: 0.6s ease; /* Transición suave */
    user-select: none; /* No se puede seleccionar */
}
/* Posicionamiento de la flecha izquierda */
.prev {
    left: 10px; /* Espaciado izquierdo */
}
/* Posicionamiento de la flecha derecha */
.next {
    right: 10px; /* Espaciado derecho */
}
/* Estilo de hover para las flechas */
.prev:hover, .next:hover {
    background-color: rgba(0, 0, 0, 0.8); /* Color de fondo al hacer hover */
}

@media only screen and (max-width: 850px) {
    .imagen{
        width: calc(50% - 20px); /* Cambiar a 4 imágenes por fila en pantallas de hasta 900px */
    }
    .video {
        width: calc(50% - 20px); /* Cambiar a 3 videos por fila en pantallas de hasta 900px */
    }
    .video video {
        width: 100%;
        height: 200px;
        border-radius: 15px;
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
        transition: transform 0.3s ease;
    }
}