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

.evento-hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

}

.evento-banner{

    position:absolute;

    inset:0;

}

.evento-banner img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.evento-overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        rgba(0,0,0,.25),

        rgba(0,0,0,.85)

    ),

    linear-gradient(

        90deg,

        rgba(0,0,0,.85),

        rgba(0,0,0,.35)

    );

}

.evento-info{

    position:relative;

    z-index:5;

    max-width:700px;

    padding-top:130px;

}

.evento-categoria{

    display:inline-block;

    padding:10px 22px;

    border-radius:30px;

    background:rgba(214,178,98,.15);

    color:var(--color-secundario);

    letter-spacing:4px;

    font-size:13px;

    margin-bottom:25px;

}

.evento-info h1{

    font-size:72px;

    line-height:1;

    margin-bottom:25px;

}

.evento-info p{

    color:#d0d0d0;

    font-size:20px;

    line-height:1.9;

    margin-bottom:45px;

}

.evento-meta{

    display:flex;

    gap:20px;

    margin-bottom:45px;

}

.evento-meta div{

    padding:20px 24px;

    background:rgba(255,255,255,.05);

    border-radius:18px;

    backdrop-filter:blur(8px);

}

.evento-meta strong{

    display:block;

    color:#fff;

    font-size:22px;

}

.evento-meta span{

    color:#b8b8b8;

    font-size:14px;

}

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

.evento-galeria{

    padding:140px 0;

    background:#090909;

}

.evento-galeria h2{

    text-align:center;

    font-size:58px;

    margin:18px 0 70px;

}

.masonry{

    columns:4;

    column-gap:22px;

}

.item{

    margin-bottom:22px;

    break-inside:avoid;

}

.item img{

    width:100%;

    display:block;

    border-radius:18px;

    transition:.4s;

    cursor:pointer;

}

.item img:hover{

    transform:scale(1.03);

}
























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

.evento-galeria{

    padding:130px 0;

    background:#090909;

}

.evento-galeria h2{

    text-align:center;

    font-size:64px;

    margin:18px 0;

}

.evento-galeria .titulo-descripcion{

    text-align:center;

    color:#bfbfbf;

    margin-bottom:70px;

}

.masonry{

    column-count:3;

    column-gap:22px;

}

.item{

    break-inside:avoid;

    margin-bottom:22px;

    overflow:hidden;

    border-radius:18px;

    cursor:pointer;

    position:relative;

}

.item img{

    width:100%;

    display:block;

    border-radius:18px;

    transition:.45s;

}

.item:hover img{

    transform:scale(1.06);

}

.item::after{

    content:"";

    position:absolute;

    inset:0;

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

    opacity:0;

    transition:.35s;

}

.item:hover::after{

    opacity:1;

}


/*=========================
        LIGHTBOX
=========================*/

.lightbox{

    position:fixed;

    inset:0;

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

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:99999;

}

.lightbox.activo{

    opacity:1;

    visibility:visible;

}

.lightbox img{

    max-width:90vw;

    max-height:88vh;

    border-radius:16px;

    box-shadow:0 25px 80px rgba(0,0,0,.7);

    animation:zoom .35s;

}

@keyframes zoom{

    from{

        transform:scale(.8);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}

.lightbox button{

    position:absolute;

    border:none;

    background:rgba(255,255,255,.08);

    color:#fff;

    width:58px;

    height:58px;

    border-radius:50%;

    cursor:pointer;

    font-size:22px;

    transition:.3s;

}

.lightbox button:hover{

    background:var(--color-secundario);

    color:#111;

}

.lightbox-cerrar{

    top:35px;

    right:35px;

}

.lightbox-prev{

    left:35px;

    top:50%;

    transform:translateY(-50%);

}

.lightbox-next{

    right:35px;

    top:50%;

    transform:translateY(-50%);

}


/*=========================
        RESPONSIVE
=========================*/

@media(max-width:900px){

    .masonry{

        column-count:2;

    }

}

@media(max-width:600px){

    .masonry{

        column-count:1;

    }

}

















/*==========================================================
LIGHTBOX
==========================================================*/

.lightbox{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

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

    backdrop-filter:blur(12px);

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:99999;

}

.lightbox.activo{

    opacity:1;

    visibility:visible;

}

.lightbox-overlay{

    position:absolute;

    inset:0;

}

.lightbox-contenido{

    position:relative;

    max-width:92vw;

    max-height:92vh;

    display:flex;

    flex-direction:column;

    align-items:center;

    z-index:10;

}

.lightbox img{

    max-width:92vw;

    max-height:82vh;

    border-radius:18px;

    box-shadow:0 30px 80px rgba(0,0,0,.45);

    animation:zoomFoto .25s;

}

@keyframes zoomFoto{

    from{

        transform:scale(.92);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}

.lightbox-info{

    width:100%;

    margin-top:20px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    color:#fff;

    font-size:15px;

}

.lb-btn{

    position:absolute;

    width:60px;

    height:60px;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.10);

    color:#fff;

    cursor:pointer;

    transition:.25s;

    z-index:20;

    backdrop-filter:blur(10px);

}

.lb-btn:hover{

    background:#fff;

    color:#000;

    transform:scale(1.08);

}

.lb-close{

    top:25px;

    right:25px;

}

.lb-prev{

    left:35px;

}

.lb-next{

    right:35px;

}