:root{
        --primario:#14529d;
        --oscuro:#14529d;
        --gris:#f2f5f7;
        --texto:#fff;
    }

    body{
        margin:0;
        font-family:'Poppins',sans-serif;
        background:var(--gris);
        color:var(--texto);
    }




    .section-title{
        text-align:center;
        padding:60px 20px 20px;
    }

    .section-title h1{
        font-size:2.2rem;
        margin:0;
        color:var(--oscuro);
    }

    .section-title p{
        margin-top:10px;
        color:#5b6b73;
    }

    .filter-btns{
        text-align:center;
        margin:30px 0 40px;
    }

    .filter-btns button{
        padding:10px 22px;
        margin:6px;
        border-radius:30px;
        border:1px solid var(--primario);
        background:#fff;
        color:var(--primario);
        cursor:pointer;
        transition:.3s ease;
        font-weight:500;
    }

    .filter-btns button.active,
    .filter-btns button:hover{
        background:var(--primario);
        color:#fff;
        box-shadow:0 6px 16px rgba(20, 82, 157, 0.25);
        transform:translateY(-2px);
    }

    .gallery-grid{
        display:grid;
        grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
        gap:20px;
        padding:0 30px 80px;
        opacity:0;
        transform:translateY(40px);
        animation:fadeUp 1s ease forwards;
    }

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

    .gallery-item{
        position:relative;
        overflow:hidden;
        border-radius:14px;
        background:#fff;
        box-shadow:0 8px 24px rgba(0,0,0,.08);
        cursor:pointer;
        transform:scale(.96);
        transition:.5s ease;
    }

    .gallery-item.show{transform:scale(1)}

    .gallery-item img{
        width:100%;
        height:100%;
        object-fit:cover;
        transition:transform .6s ease, filter .6s ease;
        filter:brightness(.92);
    }

    .gallery-item:hover img{
        transform:scale(1.08);
        filter:brightness(1);
    }

    .gallery-info{
        position:absolute;
        bottom:0;
        left:0;
        width:100%;
        padding:14px;
        font-size:.95rem;
        color:#fff;
        background: linear-gradient(
    to top,
    rgba(20, 82, 157, 0.95) 0%,
    rgba(20, 82, 157, 0.65) 45%,
    rgba(20, 82, 157, 0.0) 100%
);
        letter-spacing:.3px;
    }

    /* LIGHTBOX */
    .lightbox{
        position:fixed;
        inset:0;
        background:rgba(20, 82, 157, 0.25);
        display:flex;
        justify-content:center;
        align-items:center;
        visibility:hidden;
        opacity:0;
        transition:.4s ease;
        z-index:999;
    }

    .lightbox.show{visibility:visible;opacity:1}

    .lightbox img{
        max-width:92%;
        max-height:90%;
        border-radius:10px;
        box-shadow:0 0 40px rgba(0,0,0,.4);
        transform:scale(.85);
        transition:.4s ease;
    }

    .lightbox.show img{transform:scale(1)}

    

    

    @media(max-width:768px){
        .section-title h2{font-size:1.7rem}
        .close-btn{top:14px;right:14px}
    }