/* Contenedor Principal */
.galeria-organica {
    background-color: #4a2c2a; /* Terracota Sant Just */
    padding: 80px 5%;
    color: #fff;
}

/* Línea Divisora */
.linea-oro {
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, transparent, #c5a059, transparent);
    margin-bottom: 50px;
}

/* Títulos */
.txt-centro { text-align: center; margin-bottom: 60px; }
.tag-premium { color: #c5a059; letter-spacing: 4px; font-size: 0.8rem; margin-bottom: 15px; }
.title-lux { font-family: 'Playfair Display', serif; font-size: 3.5rem; font-weight: 400; }
.title-lux span { font-style: italic; color: #c5a059; }

/* Grid Desorganizado (Masonry) */
.masonry-grid {
    column-count: 5; /* 5 columnas en Escritorio */
    column-gap: 20px;
    max-width: 1300px;
    margin: 0 auto;
}

.bloque {
    display: inline-block;
    width: 100%;
    margin-bottom: 20px;
    border-radius: 15px;
    overflow: hidden;
    background: rgba(0,0,0,0.3);
    box-shadow: 0 15px 35px rgba(0,0,0,0.4);
}

/* Alturas desiguales para crear el efecto desordenado */
.bloque:nth-child(odd) { height: 300px; }
.bloque:nth-child(even) { height: 220px; }
.bloque:nth-child(3n) { height: 380px; }

/* Efecto de la Imagen (Burbuja) */
.bubble {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(0.8);
    transition: all 1.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.bubble.active {
    opacity: 1;
    transform: scale(1);
}

/* --- AJUSTE PARA MÓVIL --- */
@media (max-width: 768px) {
    .masonry-grid {
        column-count: 2; /* 2 columnas en celular */
        column-gap: 15px;
    }

    /* Ocultamos las últimas 4 para que sean solo 6 (2x3) */
    .bloque.extra { display: none; }

    .title-lux { font-size: 2.2rem; }
    
    /* Mantener alturas desiguales en móvil para el look desorganizado */
    .bloque:nth-child(odd) { height: 240px; }
    .bloque:nth-child(even) { height: 180px; }
}