/* ==========================================================
   ARTE CAOS - GALERIA
   CSS EXCLUSIVO Y RESPONSIVE
========================================================== */

/* ==========================================================
   CONTENEDOR GENERAL
========================================================== */

.gallery-page{
    width:100%;
    padding:80px 0;
    background:var(--bg);
    overflow:hidden;
}

.gallery-page > .container,
.gallery-page .container{
    width:100% !important;
    max-width:1400px !important;
    margin:0 auto !important;
    padding-left:30px !important;
    padding-right:30px !important;
    box-sizing:border-box !important;
}

/* ==========================================================
   ENCABEZADO DE PAGINA
========================================================== */

.page-header{
    width:100%;
    padding:150px 30px 80px !important;
    background:#111;
    text-align:center;
    box-sizing:border-box;
}

.page-header .container{
    width:100% !important;
    max-width:1200px !important;
    margin:0 auto !important;
    padding:0 !important;
}

.page-header h1{
    color:#fff !important;
    font-family:"Cormorant Garamond",serif;
    font-size:clamp(42px,6vw,72px) !important;
    line-height:1.05;
    margin:0 0 15px !important;
}

.page-header p{
    color:#ccc !important;
    font-size:clamp(15px,2vw,19px);
    line-height:1.6;
    max-width:700px;
    margin:0 auto;
}

.page-header small{
    color:var(--gold);
}

/* ==========================================================
   TITULO EXPLORAR
========================================================== */

.filtro-titulo{
    width:100%;
    text-align:center;
    margin:0 auto 30px;
    box-sizing:border-box;
}

.filtro-titulo h3{
    color:#111 !important;
    font-family:"Cormorant Garamond",serif;
    font-size:clamp(28px,4vw,38px);
    line-height:1.1;
    margin:0 0 8px;
}

.filtro-titulo p{
    color:#666 !important;
    font-size:15px;
    line-height:1.5;
    margin:0;
}

/* ==========================================================
   FILTROS
========================================================== */

.gallery-filters{
    width:100%;
    display:grid;
    grid-template-columns:
        minmax(220px,2fr)
        minmax(150px,1fr)
        minmax(150px,1fr)
        minmax(150px,1fr)
        auto
        auto;
    gap:12px;
    align-items:center;
    background:#1b1b1b;
    padding:18px;
    border-radius:16px;
    margin:0 0 45px;
    border:1px solid #303030;
    box-shadow:0 15px 35px rgba(0,0,0,.18);
    box-sizing:border-box;
}

.gallery-filters input,
.gallery-filters select{
    width:100% !important;
    min-width:0;
    height:48px;
    padding:0 14px;
    background:#292929;
    border:1px solid #444;
    border-radius:9px;
    color:#fff;
    font-size:14px;
    box-sizing:border-box;
}

.gallery-filters input::placeholder{
    color:#999;
}

.gallery-filters input:focus,
.gallery-filters select:focus{
    outline:none;
    border-color:#b44cff;
    box-shadow:0 0 0 3px rgba(180,76,255,.15);
}

.gallery-filters button,
.gallery-filters .btn-limpiar{
    height:48px;
    padding:0 20px;
    border-radius:9px;
    display:flex;
    align-items:center;
    justify-content:center;
    white-space:nowrap;
    box-sizing:border-box;
    font-size:14px;
    font-weight:600;
}

.gallery-filters button{
    background:#b44cff;
    color:#fff;
    cursor:pointer;
    border:0;
}

.gallery-filters button:hover{
    background:#d16cff;
}

.gallery-filters .btn-limpiar{
    background:#333;
    color:#fff;
}

.gallery-filters .btn-limpiar:hover{
    background:#444;
}

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

.gallery-masonry{
    width:100%;
    columns:3;
    column-gap:24px;
    box-sizing:border-box;
}

.obra-galeria{
    width:100%;
    display:inline-block;
    vertical-align:top;
    break-inside:avoid;
    -webkit-column-break-inside:avoid;
    position:relative;
    margin:0 0 24px;
    overflow:hidden;
    background:#171717;
    border-radius:14px;
    box-shadow:0 10px 30px rgba(0,0,0,.12);
}

.imagen-obra{
    width:100%;
    position:relative;
    cursor:pointer;
    overflow:hidden;
    background:#111;
    line-height:0;
}

.imagen-obra img{
    width:100% !important;
    height:auto !important;
    max-width:100% !important;
    display:block;
    object-fit:contain;
    transition:transform .5s ease;
}

.obra-galeria:hover .imagen-obra img{
    transform:scale(1.045);
}

/* ==========================================================
   INFORMACION DE LA OBRA
========================================================== */

.obra-datos{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    padding:65px 20px 18px;
    background:linear-gradient(
        transparent,
        rgba(0,0,0,.95)
    );
    color:#fff;
    opacity:0;
    transform:translateY(8px);
    transition:.3s ease;
    box-sizing:border-box;
}

.obra-galeria:hover .obra-datos{
    opacity:1;
    transform:translateY(0);
}

.obra-datos h3{
    color:#fff !important;
    font-family:"Cormorant Garamond",serif;
    font-size:23px;
    line-height:1.1;
    margin:0 0 6px;
}

.obra-datos span{
    display:block;
    color:#c46cff;
    font-size:13px;
}

.obra-datos small{
    display:block;
    color:#ddd;
    font-size:12px;
    margin-top:4px;
    text-transform:none;
    letter-spacing:0;
}

.obra-datos strong{
    display:block;
    color:#fff;
    font-size:15px;
    margin-top:8px;
}

.obra-acciones{
    display:flex;
    margin-top:12px;
}

.btn-ficha{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:36px;
    padding:7px 14px;
    background:#b44cff;
    color:#fff !important;
    border-radius:7px;
    font-size:12px;
    font-weight:bold;
    box-sizing:border-box;
}

.btn-ficha:hover{
    background:#d16cff;
}

/* ==========================================================
   SIN RESULTADOS
========================================================== */

.gallery-masonry > p{
    width:100%;
    column-span:all;
}

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

.gallery-page + .lightbox,
body > .lightbox{
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100vh !important;
    padding:20px !important;
    background:rgba(0,0,0,.96) !important;
    z-index:999999 !important;
    display:none;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    overflow:hidden;
}

body > .lightbox.active{
    display:flex !important;
}

.lightbox-contenido{
    position:relative;
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
}

.lightbox-imagen{
    width:auto !important;
    height:auto !important;
    max-width:calc(100vw - 180px) !important;
    max-height:calc(100vh - 150px) !important;
    object-fit:contain;
    border-radius:7px;
    box-shadow:0 20px 70px rgba(0,0,0,.6);
}

.lightbox-close{
    position:absolute;
    top:0;
    right:0;
    width:50px;
    height:50px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff !important;
    font-size:42px;
    cursor:pointer;
    z-index:20;
}

.lightbox-close:hover{
    color:#b44cff !important;
}

.lightbox-prev,
.lightbox-next{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:52px;
    height:52px;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.13);
    color:#fff;
    font-size:28px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:20;
}

.lightbox-prev{
    left:5px;
}

.lightbox-next{
    right:5px;
}

.lightbox-prev:hover,
.lightbox-next:hover{
    background:#b44cff;
}

.lightbox-contador{
    position:absolute;
    bottom:10px;
    left:50%;
    transform:translateX(-50%);
    color:#fff;
    background:rgba(0,0,0,.7);
    padding:6px 13px;
    border-radius:20px;
    font-size:12px;
    z-index:20;
}

.lightbox-info{
    position:absolute;
    left:5px;
    bottom:10px;
    max-width:30%;
    color:#fff;
    background:rgba(0,0,0,.7);
    padding:9px 14px;
    border-radius:9px;
    z-index:20;
    box-sizing:border-box;
}

.lightbox-info strong{
    display:block;
    color:#fff;
    font-size:15px;
    line-height:1.2;
}

.lightbox-info span{
    display:block;
    color:#bbb;
    font-size:12px;
    margin-top:3px;
}

.lightbox-ficha{
    position:absolute;
    right:5px;
    bottom:10px;
    z-index:20;
}

.lightbox-ficha a{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:38px;
    padding:0 16px;
    background:#b44cff;
    color:#fff !important;
    border-radius:8px;
    font-size:12px;
    font-weight:bold;
}

/* ==========================================================
   TABLET GRANDE
========================================================== */

@media(max-width:1200px){

    .gallery-page > .container,
    .gallery-page .container{
        padding-left:25px !important;
        padding-right:25px !important;
    }

    .gallery-filters{
        grid-template-columns:
            2fr
            1fr
            1fr;
    }

    .gallery-filters input{
        grid-column:1 / -1;
    }

    .gallery-masonry{
        columns:3;
        column-gap:20px;
    }

}

/* ==========================================================
   TABLET
========================================================== */

@media(max-width:900px){

    .gallery-page{
        padding:65px 0;
    }

    .page-header{
        padding:125px 20px 65px !important;
    }

    .gallery-page > .container,
    .gallery-page .container{
        padding-left:20px !important;
        padding-right:20px !important;
    }

    .gallery-filters{
        grid-template-columns:1fr 1fr;
        gap:10px;
        padding:14px;
    }

    .gallery-filters input{
        grid-column:1 / -1;
    }

    .gallery-filters button,
    .gallery-filters .btn-limpiar{
        width:100%;
    }

    .gallery-masonry{
        columns:2;
        column-gap:18px;
    }

    .obra-galeria{
        margin-bottom:18px;
    }

    .lightbox-imagen{
        max-width:calc(100vw - 130px) !important;
        max-height:calc(100vh - 150px) !important;
    }

}

/* ==========================================================
   MÓVIL
========================================================== */

@media(max-width:650px){

    .gallery-page{
        padding:50px 0;
    }

    .page-header{
        padding:115px 15px 55px !important;
    }

    .page-header h1{
        font-size:42px !important;
    }

    .page-header p{
        font-size:15px;
    }

    .gallery-page > .container,
    .gallery-page .container{
        width:100% !important;
        padding-left:12px !important;
        padding-right:12px !important;
    }

    .filtro-titulo{
        margin-bottom:20px;
    }

    .filtro-titulo h3{
        font-size:28px;
    }

    .filtro-titulo p{
        font-size:13px;
        padding:0 5px;
    }

    /* FILTROS VERTICALES */

    .gallery-filters{
        display:flex;
        flex-direction:column;
        width:100%;
        gap:9px;
        padding:12px;
        border-radius:12px;
        margin-bottom:25px;
    }

    .gallery-filters input,
    .gallery-filters select,
    .gallery-filters button,
    .gallery-filters .btn-limpiar{
        width:100% !important;
        min-width:0 !important;
        height:46px;
        flex:none;
    }

    /* GALERIA */

    .gallery-masonry{
        columns:2 !important;
        column-gap:10px;
    }

    .obra-galeria{
        margin-bottom:10px;
        border-radius:9px;
    }

    .obra-datos{
        position:relative;
        left:auto;
        right:auto;
        bottom:auto;
        opacity:1;
        transform:none;
        padding:10px;
        background:#171717;
    }

    .obra-datos h3{
        font-size:16px;
        margin-bottom:4px;
    }

    .obra-datos span{
        font-size:11px;
    }

    .obra-datos small{
        font-size:10px;
    }

    .obra-datos strong{
        font-size:13px;
        margin-top:5px;
    }

    .obra-acciones{
        margin-top:8px;
    }

    .btn-ficha{
        width:100%;
        min-height:34px;
        padding:5px 8px;
        font-size:11px;
    }

    /* LIGHTBOX */

    body > .lightbox{
        padding:8px !important;
    }

    .lightbox-imagen{
        max-width:calc(100vw - 50px) !important;
        max-height:calc(100vh - 125px) !important;
    }

    .lightbox-close{
        width:40px;
        height:40px;
        font-size:35px;
        top:0;
        right:0;
    }

    .lightbox-prev,
    .lightbox-next{
        width:38px;
        height:38px;
        font-size:21px;
    }

    .lightbox-prev{
        left:0;
    }

    .lightbox-next{
        right:0;
    }

    .lightbox-info{
        left:50%;
        bottom:45px;
        transform:translateX(-50%);
        max-width:80%;
        width:max-content;
        padding:7px 11px;
        text-align:center;
    }

    .lightbox-info strong{
        font-size:13px;
    }

    .lightbox-info span{
        font-size:10px;
    }

    .lightbox-ficha{
        left:50%;
        right:auto;
        bottom:5px;
        transform:translateX(-50%);
    }

    .lightbox-ficha a{
        min-height:34px;
        padding:0 14px;
    }

    .lightbox-contador{
        top:5px;
        bottom:auto;
        font-size:10px;
        padding:4px 9px;
    }

}

/* ==========================================================
   MÓVIL PEQUEÑO
========================================================== */

@media(max-width:430px){

    .gallery-page > .container,
    .gallery-page .container{
        padding-left:9px !important;
        padding-right:9px !important;
    }

    .gallery-masonry{
        columns:1 !important;
    }

    .obra-galeria{
        margin-bottom:15px;
        border-radius:11px;
    }

    .obra-datos{
        padding:12px;
    }

    .obra-datos h3{
        font-size:18px;
    }

    .obra-datos span{
        font-size:12px;
    }

    .obra-datos small{
        font-size:11px;
    }

    .obra-datos strong{
        font-size:14px;
    }

    .btn-ficha{
        min-height:38px;
        font-size:12px;
    }

}

/* ==========================================================
   MÓVIL MUY PEQUEÑO
========================================================== */

@media(max-width:350px){

    .page-header h1{
        font-size:36px !important;
    }

    .filtro-titulo h3{
        font-size:25px;
    }

    .gallery-page > .container,
    .gallery-page .container{
        padding-left:7px !important;
        padding-right:7px !important;
    }

}