.gallery {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 15px;
            padding: 20px;
            width: 100%;
            max-width: 100%;
            margin: 0 auto;
        }
        .image {
            cursor: pointer;
            position: relative;
            overflow: hidden;
            width: 100%;
            height: auto;z-index: 10000;
        }
        .image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 5px;
            display: block;
			z-index: 10000;
        }
        .image:nth-child(6n+1), .image:nth-child(6n+2), .image:nth-child(6n+5), .image:nth-child(6n+6) {
            grid-column: span 1;
            grid-row: span 1;
        }
        .image:nth-child(6n+3), .image:nth-child(6n+4) {
            grid-column: span 2;
            grid-row: span 2;
        }
        
        /* Responsive: todas las imágenes en una sola columna en móviles */
        @media (max-width: 1024px) {
            .gallery {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        @media (max-width: 768px) {
            .gallery {
                grid-template-columns: repeat(1, 1fr);
            }
            .image {
                grid-column: span 1 !important;
                grid-row: span 1 !important;
            }
        }
        
        .modal {
            display: none;
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.8);
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
			z-index: 10000;
        }
        .modal.show {
            display: flex;
            opacity: 1;
        }
        .modal-content {
            position: relative;
            background: white;
            padding: 15px;
            border-radius: 5px;
            max-width: 90%;
            max-height: 90%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .modal img {
            max-width: 100%;
            max-height: 100%;
        }
        .close {
            position: absolute;
            top: -10px;
            right: -10px;
            background: red;
            color: white;
            border: none;
            padding: 10px; width: 40px; height: 40px;
            cursor: pointer;
            border-radius: 50%;
			font-weight:900;
        }
        .nav-button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            padding: 10px;
            cursor: pointer;
            border-radius: 50%;
        }
        .prev { left: 10px; }
        .next { right: 10px; }