*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
        font-family:Arial;
}

html, body{
    height:100%;
    margin:0;
    padding:0;
}

/* ESCONDE SCROLL */
body{
    overflow:hidden;
}

/* IFRAME FULLSCREEN */
#frame{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border:none;
    z-index:9999;
    background:#000;
    display:none; /* começa escondido */
}


.gallery_area{
    display:flex;
    flex-wrap:wrap;
    justify-content:center; /* CENTRALIZA HORIZONTAL */
    align-items:center;     /* CENTRALIZA VERTICAL (quando possível) */
    gap:20px;
    padding:30px;
}

.item{
    display:flex;
    flex-direction:column;
    align-items:center; /* CENTRALIZA CONTEÚDO */
}
/* GRID */
.gallery_area{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(150px,1fr));
    
}

/* ITEM */
.item{
    text-align:center;
    cursor:pointer;
    transition:.4s;
}

.item:hover{
    transform:scale(1.05);
}

.item img{
    width:100%;
    border-radius:12px;
}

/* TEXTO */
.item p{
    color:#fff;
    margin-top:10px;
}

/* LIGHTBOX */
#lightbox{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.95);
    display:flex;
    justify-content:center;
    align-items:center;
    opacity:0;
    visibility:hidden;
    transition:.4s;
}

#lightbox.ativo{
    opacity:1;
    visibility:visible;
}

#lightbox{
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;

    background:rgba(0,0,0,0.95);

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

    opacity:0;
    visibility:hidden;
    transition:.4s;

    z-index: 999999; /* 🔥 ISSO RESOLVE */
}

/* IMG */
#imgGrande{
    max-width:90%;
    max-height:85%;
    border-radius:12px;
    transition:transform .2s ease;
}

/* FECHAR */
#fechar{
    position:absolute;
    top:20px;
    right:30px;
    font-size:40px;
    color:#fff;
    cursor:pointer;
}

/* SETAS */
.nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    font-size:60px;
    color:#fff;
    cursor:pointer;
    padding:20px;
}

.prev{ left:10px; }
.next{ right:10px; }

/* CONTADOR */
#contador{
    position:absolute;
    top:20px;
    left:30px;
    color:#fff;
    font-size:18px;
}

/* MOBILE */
@media(max-width:768px){
    .nav{
        font-size:30px;
    }
}