/*==================================================
GALERÍA
==================================================*/

.gallery{

    padding:90px 0;

    background:#F7F4EE;

    position:relative;

}

/*==================================================
CONTENEDOR
==================================================*/

.gallery .container{

    max-width:1400px;

}

/*==================================================
IMAGEN DESTACADA
==================================================*/

.gallery-feature{

    margin:70px 0 45px;

    border-radius:30px;

    overflow:hidden;

    box-shadow:0 35px 70px rgba(0,0,0,.12);

}

.gallery-feature img{

    width:100%;

    display:block;

    object-fit:cover;

    transition:.8s;

}

.gallery-feature:hover img{

    transform:scale(1.03);

}

/*==================================================
GRID
==================================================*/

.gallery-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:28px;

}

/*==================================================
ITEM
==================================================*/

.gallery-item{

    position:relative;

    overflow:hidden;

    border-radius:24px;

    cursor:pointer;

    background:#fff;

    box-shadow:0 18px 40px rgba(0,0,0,.08);

    transition:.35s;

}

.gallery-item:hover{

    transform:translateY(-8px);

    box-shadow:0 30px 60px rgba(0,0,0,.18);

}

.gallery-item img{

    width:100%;

    height:260px;

    object-fit:cover;

    display:block;

    transition:.8s;

}

.gallery-item:hover img{

    transform:scale(1.08);

}
/*==================================================
OVERLAY
==================================================*/

.gallery-overlay{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(0,0,0,.35);

    opacity:0;

    transition:.35s;

    pointer-events:none;

}

.gallery-item:hover .gallery-overlay{

    opacity:1;

}

.gallery-overlay i{

    width:68px;

    height:68px;

    border-radius:50%;

    background:rgba(255,255,255,.92);

    color:#111;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.3rem;

    transform:scale(.8);

    transition:.35s;

}

.gallery-item:hover .gallery-overlay i{

    transform:scale(1);

}

/*==================================================
LIGHTBOX
==================================================*/

.lightbox{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.94);

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    transition:.35s ease;

    z-index:9999;

}

.lightbox.active{

    opacity:1;

    visibility:visible;

}

.lightbox img{

    max-width:88vw;

    max-height:82vh;

    border-radius:12px;

    box-shadow:0 30px 80px rgba(0,0,0,.45);

    animation:zoomIn .35s ease;

}

/*==================================================
BOTONES
==================================================*/

.lightbox button{

    position:absolute;

    border:none;

    background:rgba(255,255,255,.12);

    color:#fff;

    width:58px;

    height:58px;

    border-radius:50%;

    cursor:pointer;

    transition:.3s;

    backdrop-filter:blur(12px);

}

.lightbox button:hover{

    background:#C9A45C;

    transform:scale(1.08);

}

.lightbox-close{

    top:35px;

    right:35px;

}

.lightbox-prev{

    left:35px;

    top:50%;

    transform:translateY(-50%);

}

.lightbox-next{

    right:35px;

    top:50%;

    transform:translateY(-50%);

}

.lightbox-counter{

    position:absolute;

    bottom:35px;

    color:#fff;

    font-size:1rem;

    letter-spacing:2px;

}

/*==================================================
ANIMACIÓN
==================================================*/

@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.92);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}