/* --- CONFIGURACIÓN GENERAL --- */
body { 
    background-color: #131313; 
    color: white; 
    font-family: 'Comfortaa', sans-serif; 
}

/* --- GRILLA MASONRY --- */
.masonry-grid {
    column-count: 1;
    column-gap: 1.5rem;
}
@media (min-width: 768px) { .masonry-grid { column-count: 2; } }
@media (min-width: 1024px) { .masonry-grid { column-count: 3; } }

.masonry-item {
    break-inside: avoid;
    margin-bottom: 1.5rem;
    transition: all 0.5s ease;
}

.masonry-item img {
    width: 100%;
    display: block;
    border-radius: 1rem;
    border: 1px solid rgba(255,255,255,0.05);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.masonry-item:hover img {
    transform: scale(1.02);
    border-color: rgba(208, 187, 149, 0.5);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* --- SIMPLELIGHTBOX CUSTOM --- */

/* Fondo oscuro y desenfoque detrás de la foto */
.sl-overlay {
    background: rgba(0, 0, 0, 0.9) !important;
    backdrop-filter: blur(5px);
}

/* Botones (Cruceta y Flechas) en Blanco */
.sl-wrapper .sl-navigation button, 
.sl-wrapper .sl-close {
    color: #ffffff !important;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.sl-wrapper .sl-navigation button:hover, 
.sl-wrapper .sl-close:hover {
    opacity: 1;
}

/* Contador 1/15 */
.sl-wrapper .sl-counter {
    color: #ffffff !important;
    opacity: 0.5;
}

/* Evitar cursor de lupa (ya que quitamos el zoom) */
.sl-wrapper .sl-image img {
    cursor: default !important;
}

/* --- EFECTO INMERSIVO (Blur en la web al abrir foto) --- */
body.sl-open main, 
body.sl-open nav, 
body.sl-open header, 
body.sl-open footer {
    filter: blur(8px);
    transition: filter 0.3s ease;
}