/* =========================================================
   GALERÍA — índice de proyectos y página de cada proyecto
   ========================================================= */
.gal-hero{ padding-block: clamp(2.5rem, 2rem + 4vw, 5rem) clamp(1.5rem, 1rem + 2vw, 2.5rem); padding-block: round(clamp(2.5rem, 2rem + 4vw, 5rem), .5rem) round(clamp(1.5rem, 1rem + 2vw, 2.5rem), .5rem); }
.gal-hero h1{ font-size: var(--t-3xl); font-weight: 500; }
.gal-hero .lead{ margin-top: .8rem; }
.gal-hero .volver{ display: inline-block; margin-bottom: 1.2rem; font-size: var(--t-sm); text-decoration: none; opacity: .75; }
.gal-hero .volver:hover{ opacity: 1; color: var(--c-marca); }
.gal-meta{ display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-top: .8rem; font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase; opacity: .7; }

/* pestañas del índice */
.pestanas{ display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--gap); }

/* ---------- Filas justificadas ---------- */
.g-fotos{ display: flex; flex-wrap: wrap; gap: 10px; padding-bottom: var(--sec-y); }
.g-item{
    display: block; overflow: hidden; background: rgb(63 32 33 / .08); cursor: zoom-in;
    /* antes de que el JS acomode: rejilla simple */
    width: calc(50% - 5px); height: auto; aspect-ratio: var(--r); flex: none;
}
.g-item[style*="height"]{ aspect-ratio: auto; }
.g-item img{ width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), opacity .3s; }
.g-item:hover img{ transform: scale(1.03); }
.g-item:focus-visible{ outline-offset: -3px; }

/* ---------- Navegación entre proyectos ---------- */
.g-siguiente{ border-top: 1px solid rgb(63 32 33 / .15); padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem); padding-block: round(clamp(2.5rem, 2rem + 3vw, 4.5rem), .5rem); }
.g-siguiente .contenedor{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.5rem; }
.g-siguiente a.prox{ text-decoration: none; display: grid; gap: .2rem; }
.g-siguiente a.prox small{ font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase; opacity: .65; }
.g-siguiente a.prox span{ font-family: var(--f-titulos); font-size: var(--t-xl); }
.g-siguiente a.prox:hover span{ color: var(--c-marca); }

/* ---------- Visor (lightbox) ---------- */
.lightbox{
    position: fixed; inset: 0; z-index: 90; background: rgb(18 10 10 / .96);
    display: grid; grid-template-columns: auto 1fr auto; align-items: center;
    padding: calc(env(safe-area-inset-top, 0px) + 3.5rem) .5rem calc(env(safe-area-inset-bottom, 0px) + 1rem);
}
.lightbox figure{ height: 100%; min-width: 0; min-height: 0; overflow: hidden; display: grid; grid-template-rows: 1fr auto; justify-items: center; gap: .6rem; }
.lightbox img{ max-width: min(100%, calc(100vw - 1rem)); max-height: calc(100svh - 7.5rem); width: auto; height: auto; object-fit: contain; align-self: center; }
.lightbox figcaption{ color: var(--crema); font-size: var(--t-xs); letter-spacing: .16em; opacity: .7; font-variant-numeric: tabular-nums; }
.lightbox button{ background: none; border: 0; color: var(--crema); cursor: pointer; opacity: .75; transition: opacity var(--dur); }
.lightbox button:hover{ opacity: 1; }
.lb-ant, .lb-sig{ padding: 1rem; }
.lb-ant svg, .lb-sig svg{ width: 22px; height: 58px; }
.lb-cerrar{ position: absolute; top: calc(env(safe-area-inset-top, 0px) + .8rem); right: 1rem; font-size: 1.6rem; width: 44px; height: 44px; }
@media (max-width: 600px){
    .lightbox{ grid-template-columns: 1fr; padding-inline: 0; }
    .lb-ant, .lb-sig{ display: none; }   /* en celular se desliza */
}