.hero-galeria{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100vh;
    padding:120px 20px;
    overflow:hidden;
    background-image:
        url("/images/banners/Banner08.webp");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.hero-galeria .hero-overlaygalery{
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            rgba(4,31,67,.75),
            rgba(5,58,120,.50),
            rgba(0,0,0,.60)
        );
}

.galeria-institucional{
    padding:120px 0px;
    background:#f8fbff;
    overflow:hidden;
}

.galeria-grid{
    column-count:4;
    column-gap:28px;

}

.galeria-item{
    position:relative;
    display:block;
    overflow:hidden;
    border-radius:24px;
    margin-bottom:28px;
    break-inside:avoid;
    page-break-inside:avoid;
    cursor:zoom-in;
    opacity:0;
    transform:translateY(20px);
    transition:
    opacity .45s ease,
    transform .45s ease;
}

.galeria-item.visible{
    opacity:1;
    transform:translateY(0);
}

.galeria-item .galeria-item_img{
    width:100%;
    height:auto;
    display:block;
    transition:.6s;
}

.galeria-item:hover{
    transform:translateY(-8px);
}

.galeria-item:hover img{
    transform:scale(1.08);
}

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

.galeria-overlay{
    position:absolute;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
    background:rgba(11,103,211,.18);
    backdrop-filter:blur(2px);
    opacity:0;
    transition:.35s ease;
}

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

.galeria-item:hover .galeria-overlay img{
    transform:scale(1);
}

.galeria-overlay{
    position:absolute;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
    background:
        rgba(11,103,211,.35);

    backdrop-filter:blur(3px);
    opacity:0;
    transition:.35s;
}

.overlay-content{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
}

.overlay-content span{
    color:#fff;
    font-weight:600;
    font-size:.95rem;
    letter-spacing:.5px;
}

@media(max-width:1200px){
    .galeria-grid{
        column-count:3;
    }
}


@media(max-width:768px){
    .galeria-grid{
        column-count:2;
    }
}

@media(max-width:576px){
    .galeria-grid{
        column-count:1;
    }
}