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

.gallery{
    width: min(1400px,90%);
    margin: 60px auto;
}

/*=========================================================
    HERO
=========================================================*/

.galleryHero{

    text-align:center;

    margin-bottom:60px;

}

.galleryHero h1{

    font-size:clamp(2.3rem,5vw,4rem);

    font-weight:700;

    margin-bottom:20px;

}

.galleryHero p{

    max-width:700px;

    margin:auto;

    line-height:1.7;

    font-size:1.1rem;

}

/*=========================================================
    FILTROS
=========================================================*/

.galleryFilters{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:20px;

    margin-bottom:50px;

}



.galleryFilters button{

    background:#f5f5f5;
    color:#444;
    border:1px solid #d9d9d9;
    border-radius:999px;
    padding:12px 26px;
    font-size:1rem;
    font-weight:600;
    cursor:pointer;

    transition:
        transform .25s ease,
        background .25s ease,
        color .25s ease,
        border-color .25s ease;

}



.galleryFilters button.active{

    background:#111;

    color:#fff;

    border-color:#111;

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

.galleryGrid{

    columns:3 320px;

    column-gap:20px;

}



/*=========================================================
    TARJETA
=========================================================*/

.galleryCard{

    position:relative;

    overflow:hidden;

    margin-bottom:20px;

    break-inside:avoid;

    cursor:pointer;

}

.galleryCard img{

    width:100%;

    display:block;

    transition:.35s;

}

.galleryOverlay{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    padding:20px;

    color:white;

    background:linear-gradient(
        transparent,
        rgba(0,0,0,.75)
    );

    opacity:0;

    transition:.35s;

}

.galleryCard:hover img{

    transform:scale(1.05);

}

.galleryCard:hover .galleryOverlay{

    opacity:1;

}

.galleryFilters button:hover:not(.active){

    background:#e9e9e9;
    color:#111;
    border-color:#c5c5c5;

    transform:scale(1.08);

}