/*----------------------------PARA LA GALERIA DE FOTOS -------------------------------------------*/


/* Estilo para el contenedor principal de la galería */
.contenedorgaleria {
    max-width: 1200px; /* Establece un ancho máximo para el contenedor */
    margin: 0 auto; /* Centra el contenedor horizontalmente */
    display: grid; /* Utiliza un sistema de cuadrícula para organizar los elementos */
    grid-template-columns: repeat(3, 1fr); /* Crea 3 columnas iguales */
    /*grid-template-rows: 500px; /* Establece la altura de las filas */
    grid-gap: 10px; /* Agrega espacio entre las imágenes */
    padding: 50px 0; /* Añade espacio interno arriba y abajo del contenedor */
}

/* Estilo para las imágenes dentro de cada caja (box) */
.box img {
    width: 100%; /* Hace que las imágenes ocupen el 100% del ancho de la caja */
    height: 100%; /* Hace que las imágenes ocupen el 100% de la altura de la caja */
    object-fit: cover; /* Ajusta la imagen manteniendo sus proporciones y recortándola según sea necesario */
    object-position: center; /* Coloca la imagen en el centro del contenedor */
}




/* Media query para pantallas con un ancho máximo de 900px */
@media(max-width: 900px) {
    .contenedorgaleria {
        padding: 30px; /* Ajusta el espacio interno arriba y abajo del contenedor para pantallas más pequeñas */
        grid-template-columns: repeat(1, 1fr); /* Cambia a una sola columna para pantallas más pequeñas */
    }


}




/*----------------------------ESTO ES PARA CUANDO DES CLICK A LA FOTO SE PONGA EN GRANDE -------------------------------------------*/
/* Estilo para la modal */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9); /* Fondo negro semi-transparente */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Estilo para el contenido de la modal */
.modal-contenido {
    max-width: 90%;
    max-height: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: auto;
    border: 12px solid #fff; /* Ajusta el grosor del borde y el color según tus necesidades */
    box-sizing: border-box; /* Asegura que el borde no afecte el tamaño total de la imagen */
}

/* Estilo para el botón de cerrar */
.cerrar {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 30px;
    color: #fff;
    cursor: pointer;
}

/*----------------------------PARA LA GALERIA DE FOTOS -------------------------------------------*/