/* =========================================================
   --- SECCIÓN 6: GALERÍA PREMIUM 3D + LIGHTBOX ---
   ========================================================= */

#galeria {
    background: radial-gradient(circle at top center, rgba(232, 180, 97, 0.06) 0%, rgba(255,255,255,0) 30%), linear-gradient(180deg, #ffffff 0%, #fcfcfb 100%);
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    position: relative;
    padding: 70px 0 110px;
    overflow: hidden;
}

/* Encabezado */
.gallery-header-container {
    display: flex;
    justify-content: center;
    margin-bottom: 55px;
    text-align: center;
    position: relative;
    z-index: 2;
}

.gallery-text-block {
    max-width: 660px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gallery-kicker {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: #E8B461;
    margin-bottom: 20px;
    display: block;
}

/* --- TÍTULO EN CAJAS ASIMÉTRICAS --- */
.gallery-title-blocks {
    display: flex;
    flex-direction: column; /* default: columna (VIVIR / EN SAN NICOLÁS) */
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.gallery-title-word {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
}

    .gallery-title-word span {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 50px;
        font-size: 1.15rem;
        font-weight: 900;
        color: #142133;
        box-shadow: 0 4px 12px rgba(0,0,0,0.07);
        border: 1px solid rgba(0,0,0,0.08);
        cursor: default;
        user-select: none;
        transition: all 0.3s ease;
    }

.gb-1 {
    clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
    background: #ffffff;
}

.gb-2 {
    clip-path: polygon(0% 0%, 100% 5%, 95% 100%, 5% 95%);
    background: #f5f5f5;
}

.gb-3 {
    clip-path: polygon(5% 0%, 95% 5%, 100% 100%, 0% 90%);
    background: #ffffff;
}

.gb-4 {
    clip-path: polygon(0% 5%, 90% 0%, 100% 95%, 10% 100%);
    background: #f5f5f5;
}

.gb-5 {
    clip-path: polygon(8% 0%, 100% 0%, 92% 100%, 0% 100%);
    background: #ffffff;
}

.gb-6 {
    clip-path: polygon(0% 0%, 95% 8%, 100% 100%, 5% 92%);
    background: #f5f5f5;
}

.gb-7 {
    clip-path: polygon(5% 5%, 100% 0%, 95% 95%, 0% 100%);
    background: #ffffff;
}

.gb-8 {
    clip-path: polygon(0% 8%, 92% 0%, 100% 92%, 8% 100%);
    background: #f5f5f5;
}

.gb-9 {
    clip-path: polygon(10% 0%, 100% 5%, 90% 100%, 0% 95%);
    background: #ffffff;
}

.gb-10 {
    clip-path: polygon(0% 0%, 100% 8%, 100% 100%, 0% 92%);
    background: #f5f5f5;
}

.gb-11 {
    clip-path: polygon(5% 0%, 95% 5%, 100% 100%, 0% 95%);
    background: #ffffff;
}

.gb-12 {
    clip-path: polygon(0% 5%, 100% 0%, 95% 100%, 5% 100%);
    background: #f5f5f5;
}

.gallery-title-word span:hover {
    transform: translateY(-3px) scale(1.1);
    color: #E8B461;
}

.gallery-title {
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    line-height: 1.08;
    color: #142133;
    font-weight: 300;
    margin-bottom: 18px;
    letter-spacing: -0.02em;
}

    .gallery-title strong {
        font-weight: 900;
    }

.gallery-description {
    font-size: 1.06rem;
    color: #748296;
    line-height: 1.75;
    opacity: 0.95;
}

/* --- GRILLA 5 COLUMNAS --- */
.gallery-mosaic-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: 240px;
    gap: 26px;
    max-width: 1380px;
    margin: 0 auto;
    padding: 30px;
    perspective: 1400px;
    position: relative;
    z-index: 2;
    background: radial-gradient(circle at center, rgba(0,0,0,0.04), transparent 70%);
    border-radius: 30px;
}

.item-main {
    grid-column: span 2;
    grid-row: span 2;
}

.item-tall {
    grid-column: span 1;
    grid-row: span 2;
}

.item-square {
    grid-column: span 1;
    grid-row: span 1;
}

.item-side {
    grid-column: span 1;
    grid-row: span 1;
}

/* Tarjeta — contorno azul oscuro sutil */
.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 26px;
    background: linear-gradient(145deg, #ffffff 0%, #f4f4f4 100%);
    border: 1.5px solid rgba(30, 58, 95, 0.18); /* ← azul oscuro sutil */
    box-shadow: 0 25px 60px rgba(0,0,0,0.12), 0 8px 20px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.8);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    transform-style: preserve-3d;
}

    .gallery-item::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 26px;
        padding: 1px;
        background: linear-gradient(120deg, rgba(232,180,97,0.35), rgba(255,255,255,0.6), rgba(232,180,97,0.25));
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
        opacity: 0.6;
    }

    .gallery-item::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 40%;
        background: linear-gradient(180deg, rgba(255,255,255,0.25), rgba(255,255,255,0));
        pointer-events: none;
        z-index: 2;
    }

.gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1), filter 0.45s ease;
}

.gallery-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 18px;
    background: linear-gradient(to top, rgba(10,16,26,0.78) 0%, rgba(10,16,26,0.18) 38%, rgba(10,16,26,0.04) 60%, rgba(10,16,26,0.02) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.gallery-overlay-top {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.gallery-overlay-bottom {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 14px;
}

.gallery-badge {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}

.gallery-caption {
    color: #FFFFFF;
    font-size: 0.90rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;
    line-height: 1.3;
    transform: translateY(16px);
    opacity: 0;
    transition: all 0.45s ease;
    text-shadow: 0 2px 10px rgba(0,0,0,0.28);
}

.gallery-zoom-btn {
    appearance: none;
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.24);
    border-radius: 999px;
    padding: 11px 16px 11px 13px;
    font-size: 0.82rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.14), inset 0 1px 0 rgba(255,255,255,0.15);
    transform: translateY(16px);
    opacity: 0;
    transition: all 0.45s ease;
}

    .gallery-zoom-btn:hover {
        background: rgba(232, 180, 97, 0.9);
        border-color: rgba(232, 180, 97, 1);
        color: #142133;
        transform: translateY(0) scale(1.03);
    }

.gallery-zoom-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.18);
    font-size: 1rem;
    font-weight: 800;
}

.gallery-item:hover {
    transform: translateY(-14px) scale(1.02);
    box-shadow: 0 40px 80px rgba(0,0,0,0.18), 0 15px 35px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.9);
    border-color: rgba(30, 58, 95, 0.32); /* ← un poco más visible en hover */
}

    .gallery-item:hover .gallery-img {
        transform: scale(1.08);
        filter: saturate(1.05) contrast(1.02) brightness(0.9);
    }

    .gallery-item:hover .gallery-overlay {
        opacity: 1;
    }

    .gallery-item:hover .gallery-caption,
    .gallery-item:hover .gallery-zoom-btn {
        opacity: 1;
        transform: translateY(0);
    }

/* =========================================================
   SECCIÓN VIDEO — AVANCE DE OBRA
   ========================================================= */

.gallery-video-section {
    max-width: 1380px;
    margin: 60px auto 0;
    padding: 0 60px;
}

/* Header centrado */
.gallery-video-header {
    text-align: center;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

    /* AVANCE DE OBRA en una sola línea horizontal */
    .gallery-video-header .gallery-title-blocks {
        flex-direction: row; /* ← sobreescribe el column del estilo base */
        align-items: center;
        gap: 16px;
    }

/* Video — mismo ancho que la grilla, contorno azul oscuro sutil */
.gallery-video-wrapper {
    width: 100%;
    max-width: 1260px;
    margin: 0 auto;
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0,0,0,0.12), 0 8px 20px rgba(0,0,0,0.06);
    border: 1.5px solid rgba(30, 58, 95, 0.18); /* ← mismo contorno azul que fotos */
    background: #000;
    height: 460px;
}

.gallery-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Lightbox */
.gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.35s ease;
}

    .gallery-lightbox.active {
        opacity: 1;
        visibility: visible;
    }

.gallery-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 14, 22, 0.82);
    backdrop-filter: blur(6px);
}

.gallery-lightbox-dialog {
    position: relative;
    z-index: 2;
    width: min(1100px, 96vw);
    transform: translateY(18px) scale(0.98);
    transition: transform 0.35s ease;
}

.gallery-lightbox.active .gallery-lightbox-dialog {
    transform: translateY(0) scale(1);
}

.gallery-lightbox-image-wrap {
    overflow: hidden;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 30px 80px rgba(0,0,0,0.35), 0 10px 30px rgba(0,0,0,0.18);
}

.gallery-lightbox-img {
    width: 100%;
    max-height: 82vh;
    object-fit: cover;
    display: block;
}

.gallery-lightbox-footer {
    padding: 14px 8px 0;
    text-align: center;
}

    .gallery-lightbox-footer h3 {
        color: #fff;
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        margin: 0;
        text-transform: uppercase;
    }

.gallery-lightbox-close {
    position: absolute;
    top: -16px;
    right: -4px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.12);
    color: #fff;
    font-size: 1.9rem;
    line-height: 1;
    cursor: pointer;
    z-index: 3;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.18);
    transition: all 0.25s ease;
}

    .gallery-lightbox-close:hover {
        background: #E8B461;
        color: #142133;
        transform: scale(1.06);
    }

/* =============================================
   RESPONSIVE
   ============================================= */

@media (max-width: 1024px) {
    .gallery-mosaic-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 220px;
    }

    .item-main {
        grid-column: span 2;
        grid-row: span 2;
    }

    .item-tall {
        grid-column: span 1;
        grid-row: span 1;
    }

    .item-square {
        grid-column: span 1;
        grid-row: span 1;
    }

    .item-side {
        grid-column: span 1;
        grid-row: span 1;
    }

    .gallery-overlay-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .gallery-video-section {
        padding: 0 20px;
    }

    .gallery-video-wrapper {
        height: 400px;
    }
}

@media (max-width: 640px) {
    #galeria {
        padding: 60px 0 80px;
    }

    .gallery-title-word span {
        width: 28px;
        height: 36px;
        font-size: 0.78rem;
    }

    .gallery-title-blocks {
        gap: 8px;
    }

    .gallery-title-word {
        gap: 4px;
    }

    /* En mobile el título AVANCE DE OBRA vuelve a columna */
    .gallery-video-header .gallery-title-blocks {
        flex-direction: column;
        gap: 8px;
    }

    .gallery-mosaic-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 260px;
        gap: 16px;
    }

    .item-main, .item-tall, .item-square, .item-side {
        grid-column: span 1;
        grid-row: span 1;
    }

    .gallery-description {
        font-size: 1rem;
    }

    .gallery-item {
        border-radius: 18px;
    }

    .gallery-overlay {
        opacity: 1;
        background: linear-gradient(to top, rgba(10,16,26,0.72) 0%, rgba(10,16,26,0.12) 45%, rgba(10,16,26,0.04) 100%);
    }

    .gallery-caption, .gallery-zoom-btn {
        opacity: 1;
        transform: none;
    }

    .gallery-overlay-bottom {
        flex-direction: row;
        align-items: end;
        justify-content: space-between;
    }

    .gallery-zoom-btn {
        padding: 10px 14px 10px 12px;
        font-size: 0.78rem;
    }

    .gallery-video-section {
        padding: 0 16px;
        margin-top: 40px;
    }

    .gallery-video-wrapper {
        height: 240px;
        border-radius: 18px;
    }

    .gallery-lightbox {
        padding: 14px;
    }

    .gallery-lightbox-image-wrap {
        border-radius: 18px;
    }

    .gallery-lightbox-close {
        top: -12px;
        right: 0;
        width: 42px;
        height: 42px;
    }
}