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

.gallery{
    columns:4 250px;
    column-gap:18px;
	width:90%;
}

.gallery-item{
    position:relative;
    margin-bottom:18px;
    overflow:hidden;
    border-radius:18px;
    cursor:pointer;
    break-inside: avoid;

    opacity:0;
    transform:translateY(40px) scale(.95);
    animation:entrada .8s ease forwards;
}

/* Entrada escalonada */
.gallery-item:nth-child(1){ animation-delay:.1s; }
.gallery-item:nth-child(2){ animation-delay:.2s; }
.gallery-item:nth-child(3){ animation-delay:.3s; }
.gallery-item:nth-child(4){ animation-delay:.4s; }
.gallery-item:nth-child(5){ animation-delay:.5s; }
.gallery-item:nth-child(6){ animation-delay:.6s; }
.gallery-item:nth-child(7){ animation-delay:.7s; }
.gallery-item:nth-child(8){ animation-delay:.8s; }
.gallery-item:nth-child(9){ animation-delay:.9s; }
.gallery-item:nth-child(10){ animation-delay:.10s; }
.gallery-item:nth-child(11){ animation-delay:.11s; }
.gallery-item:nth-child(12){ animation-delay:.12s; }
.gallery-item:nth-child(13){ animation-delay:.13s; }
.gallery-item:nth-child(14){ animation-delay:.14s; }
.gallery-item:nth-child(15){ animation-delay:.15s; }
.gallery-item:nth-child(16){ animation-delay:.16s; }
.gallery-item:nth-child(17){ animation-delay:.17s; }
.gallery-item:nth-child(18){ animation-delay:.18s; }
.gallery-item:nth-child(19){ animation-delay:.19s; }

@keyframes entrada{
    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

.gallery-item img{
    width:100%;
    display:block;
    border-radius:18px;
    transition:.5s;
}

/* Hover elegante */
.gallery-item:hover img{
    transform:scale(1.05);
    filter:brightness(.75);
}

/* Texto */
.gallery-text{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    padding:18px;
    color:white;
    font-size:15px;
    background:linear-gradient(
        transparent,
        rgba(0,0,0,.75)
    );
}

/* =========================
   MODAL
========================= */

.modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.88);

    display:flex;
    justify-content:center;
    align-items:center;

    opacity:0;
    visibility:hidden;

    transition:.35s;
    z-index:999;
}

.modal.active{
    opacity:1;
    visibility:visible;
}

.modal-content{
    position:relative;
    max-width:90%;
    max-height:90%;
    animation:zoom .35s ease;
}

@keyframes zoom{
    from{
        transform:scale(.7);
        opacity:0;
    }
    to{
        transform:scale(1);
        opacity:1;
    }
}

.modal img{
    max-width:100%;
    max-height:80vh;
    border-radius:15px;
    display:block;
}

/* Texto modal */
.modal-caption{
    color:white;
    text-align:center;
    margin-top:15px;
    font-size:18px;
}

/* BOTONES */

.close,
.prev,
.next{
    position:absolute;
    color:white;
    background:rgba(255,255,255,.15);
    border:none;
    backdrop-filter:blur(8px);

    cursor:pointer;
    transition:.3s;
}

/* Hover */
.close:hover,
.prev:hover,
.next:hover{
    background:rgba(255,255,255,.3);
}

/* Cerrar */
.close{
    top:-55px;
    right:0;
    width:42px;
    height:42px;
    border-radius:50%;
    font-size:24px;
}

/* Flechas */
.prev,
.next{
    top:50%;
    transform:translateY(-50%);
    width:55px;
    height:55px;
    border-radius:50%;
    font-size:28px;
}

.prev{
    left:-75px;
}

.next{
    right:-75px;
}

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

@media(max-width:768px){

    .gallery{
        columns:2 160px;
    }

    .prev{
        left:10px;
    }

    .next{
        right:10px;
    }

    .prev,
    .next{
        position:fixed;
    }

}

@media(max-width:480px){

    .gallery{
        columns:1;
    }

    .modal-caption{
        font-size:15px;
        padding:0 15px;
    }

}