/* =========================
   MODAIS
========================= */

.modal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.88);

    backdrop-filter:blur(12px);

    display:none;

    align-items:center;

    justify-content:center;

    padding:30px;

    z-index:2000;
}

.modal.active{

    display:flex;
}

.modal-box{

    position:relative;

    width:100%;

    max-width:1000px;

    max-height:90vh;

    background:#080b08;

    border:1px solid #00ff66;

    border-radius:20px;

    overflow:hidden;

    box-shadow:

    0 0 30px rgba(0,255,100,.3),

    0 0 100px rgba(0,255,100,.1);
}

/* BOTÃO X */

.modal-close{

    position:absolute;

    top:15px;

    right:15px;

    width:45px;

    height:45px;

    border-radius:50%;

    border:1px solid #00ff66;

    background:#050505;

    color:#00ff66;

    font-size:30px;

    cursor:pointer;

    z-index:20;

    transition:.3s;
}

.modal-close:hover{

    background:#00ff66;

    color:#000;

    box-shadow:0 0 20px #00ff66;
}

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

.hq-modal{

    display:grid;

    grid-template-columns:40% 60%;

    max-height:80vh;
}

.hq-modal-image{

    background:#020402;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:30px;
}

.hq-modal-image img{

    width:100%;

    max-height:70vh;

    object-fit:contain;

    border-radius:10px;

    box-shadow:0 0 25px rgba(0,255,100,.25);
}

.hq-modal-content{

    padding:50px;

    overflow-y:auto;
}

.hq-modal-content > span{

    color:#00ff66;

    font-size:.8rem;

    letter-spacing:3px;

    font-weight:700;
}

.hq-modal-content h2{

    font-family:'Bebas Neue',sans-serif;

    font-size:4rem;

    margin:10px 0;
}

.hq-year{

    color:#00ff66;

    font-weight:700;

    margin-bottom:25px;
}

.hq-modal-content > p{

    color:#ccc;

    line-height:1.9;
}

.hq-important{

    margin-top:30px;

    padding:20px;

    border-left:3px solid #00ff66;

    background:#0d140e;
}

.hq-important strong{

    color:#00ff66;

    display:block;

    margin-bottom:10px;
}

.hq-important p{

    color:#aaa;

    line-height:1.7;
}

/* =========================
   BOTÃO HQ
========================= */

.hq-content button{

    margin-top:20px;

    background:none;

    border:none;

    color:#00ff66;

    font-weight:700;

    cursor:pointer;

    padding:0;

    font-size:.85rem;
}

/* =========================
   GALERIA
========================= */

.gallery-item{

    overflow:hidden;

    border-radius:15px;

    cursor:pointer;

    position:relative;
}

.gallery-item::after{

    content:"VER";

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(0,0,0,.5);

    color:#00ff66;

    font-weight:800;

    letter-spacing:2px;

    opacity:0;

    transition:.3s;
}

.gallery-item:hover::after{

    opacity:1;
}

.gallery-item img{

    width:100%;

    height:300px;

    object-fit:cover;

    display:block;

    transition:.4s;
}

.gallery-item:hover img{

    transform:scale(1.08);
}

/* =========================
   MODAL DA IMAGEM
========================= */

.image-modal-box{

    position:relative;

    max-width:90vw;

    max-height:90vh;

    display:flex;

    align-items:center;

    justify-content:center;
}

.image-modal-box img{

    max-width:90vw;

    max-height:85vh;

    object-fit:contain;

    border-radius:10px;

    box-shadow:

    0 0 30px #00ff66,

    0 0 100px rgba(0,255,100,.2);
}

/* =========================
   MOBILE
========================= */

@media(max-width:700px){

    .hq-modal{

        grid-template-columns:1fr;

        max-height:90vh;

        overflow-y:auto;
    }

    .hq-modal-image{

        padding:20px;

        height:300px;
    }

    .hq-modal-image img{

        max-height:260px;
    }

    .hq-modal-content{

        padding:30px;
    }

    .hq-modal-content h2{

        font-size:3rem;
    }

}