/* Galería de fotografía: 4 columnas que flotan sobre un fondo de universo */
.gallery-view{position:fixed;inset:0;z-index:72;overflow-y:auto;overscroll-behavior:contain;color:#f4f4f2;padding:clamp(20px,3vw,48px) var(--inset) 12vh;opacity:0;transition:opacity .4s var(--ease-out);
  background:radial-gradient(1px 1px at 12% 18%,rgba(255,255,255,.7),transparent 60%),radial-gradient(1px 1px at 68% 32%,rgba(255,255,255,.55),transparent 60%),radial-gradient(1.5px 1.5px at 38% 72%,rgba(255,255,255,.6),transparent 60%),
    radial-gradient(1px 1px at 86% 82%,rgba(255,255,255,.5),transparent 60%),radial-gradient(1px 1px at 22% 88%,rgba(255,255,255,.45),transparent 60%),
    radial-gradient(60% 50% at 80% 0%,rgba(47,107,255,.18),transparent 70%),radial-gradient(50% 40% at 0% 100%,rgba(255,10,78,.12),transparent 70%),#050506;
  background-attachment:fixed}
.gallery-view[hidden]{display:none}
.gallery-view.is-open{opacity:1}
.gallery-open,.gallery-open body{overflow:hidden}
.gallery-head{position:sticky;top:0;z-index:2;display:grid;grid-template-columns:1fr auto;align-items:end;gap:6px 16px;padding:8px 0 28px}
.gallery-head .mono{grid-column:1/-1;color:rgba(244,244,242,.6);font-size:11px}
.gallery-head h2{font-family:var(--f-display);font-weight:800;font-size:clamp(40px,6vw,110px);line-height:.9;letter-spacing:-.04em}
.gallery-close{width:44px;height:44px;padding:0;justify-content:center}
.gallery-grid{columns:4;column-gap:clamp(12px,1.6vw,26px)}
.gallery-item{break-inside:avoid;margin:0 0 clamp(12px,1.6vw,26px);padding-top:var(--off);opacity:0;transform:translateY(24px) rotate(var(--rot));transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.gallery-item.is-in{opacity:1;transform:translateY(0) rotate(var(--rot))}
.gallery-item.is-in button{animation:gallery-float var(--dur) ease-in-out var(--del) infinite alternate}
.gallery-item button{display:block;width:100%;padding:0;border:0;border-radius:12px;overflow:hidden;cursor:zoom-in;box-shadow:0 30px 70px -30px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.08);transition:box-shadow .4s}
.gallery-item button:hover,.gallery-item button:focus-visible{box-shadow:0 30px 70px -30px rgba(0,0,0,.95),0 0 50px -16px rgba(150,185,255,.8),0 0 0 1px rgba(255,255,255,.25)}
.gallery-item button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.gallery-item img{display:block;width:100%;height:auto;background:#111}
@keyframes gallery-float{from{transform:translateY(calc(var(--amp) * -1))}to{transform:translateY(var(--amp))}}
@media (max-width:1100px){ .gallery-grid{columns:3} }
@media (max-width:700px){ .gallery-grid{columns:2} .gallery-item{padding-top:calc(var(--off) / 2)} }
@media (prefers-reduced-motion:reduce){ .gallery-item,.gallery-item.is-in{transform:none;transition:none} .gallery-item.is-in button{animation:none} }
