/* Galería completa de una sesión (sessions/<sesión>-galeria.html) */
.s-wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.serif-up { font-family: var(--serif); font-weight: 400; text-transform: uppercase; letter-spacing: -.01em; }
.serif-up em { font-style: italic; text-transform: none; color: var(--accent); }
.s-crumb { font-size: 11px; text-transform: uppercase; letter-spacing: .25em; color: var(--muted); margin-bottom: 26px; }
.s-crumb a:hover { color: var(--accent); }
.s-crumb span { color: var(--accent); }

.gl-hero { padding: 170px 0 50px; }
.gl-hero h1 { font-size: clamp(48px, 7vw, 110px); line-height: .9; }
.gl-sub { max-width: 560px; margin-top: 22px; font-size: 16px; color: var(--muted); }
.gl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 34px; }
.gl-back { font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 3px; transition: color .3s, border-color .3s; }
.gl-back:hover { color: #fff; border-color: var(--accent); }

/* Mosaico tipo masonry: cada foto conserva su proporción original */
.gl-grid { padding: 10px 0 100px; }
.gl-masonry { columns: 3 300px; column-gap: 14px; }
.gl-item { break-inside: avoid; margin: 0 0 14px; }
.gl-item button { display: block; width: 100%; padding: 0; border: 0; background: var(--card); border-radius: 4px; overflow: hidden; cursor: zoom-in; }
.gl-item img { display: block; width: 100%; height: auto; transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .5s; }
.gl-item button:hover img { transform: scale(1.04); }
.gl-item button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.gl-cta { padding: 90px 0 120px; border-top: 1px solid var(--line); text-align: center; }
.gl-cta h2 { font-size: clamp(36px, 5vw, 72px); line-height: .95; }
.gl-cta p { max-width: 520px; margin: 18px auto 30px; color: var(--muted); }

/* Visor de fotos */
.lb { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: rgba(8,8,9,.96); }
.lb[hidden] { display: none; }
.lb-fig { margin: 0; max-width: calc(100vw - 160px); max-height: calc(100svh - 110px); }
.lb-fig img { display: block; max-width: 100%; max-height: calc(100svh - 110px); width: auto; height: auto; object-fit: contain; border-radius: 3px; }
.lb button { position: absolute; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,.05); color: #fff; cursor: pointer; transition: background .3s, border-color .3s; }
.lb button:hover { background: var(--accent); border-color: var(--accent); }
.lb button svg { width: 16px; height: 16px; }
.lb-close { top: 22px; right: 22px; font-size: 28px; line-height: 1; }
.lb-prev { left: 24px; top: 50%; translate: 0 -50%; }
.lb-prev svg { transform: rotate(180deg); }
.lb-next { right: 24px; top: 50%; translate: 0 -50%; }
.lb-count { position: absolute; bottom: 22px; left: 50%; translate: -50% 0; font-size: 12px; letter-spacing: .16em; color: var(--muted); }
body.lb-open { overflow: hidden; }

@media (max-width: 760px) {
  .s-wrap { padding: 0 16px; }
  .gl-hero { padding: 130px 0 34px; }
  .gl-masonry { columns: 2; column-gap: 8px; }
  .gl-item { margin-bottom: 8px; }
  .gl-cta { padding: 70px 0 90px; }
  .lb-fig { max-width: 100vw; }
  .lb-fig img { max-height: calc(100svh - 160px); border-radius: 0; }
  .lb-prev, .lb-next { top: auto; bottom: 14px; translate: none; width: 46px; height: 46px; }
  .lb-prev { left: 16px; }
  .lb-next { right: 16px; }
  .lb-close { top: 14px; right: 14px; }
  .lb-count { bottom: 30px; }
}