/* =========================================================
   Siente Studio · Grilla de portafolio (estilos)
   Todo va dentro de .galeria (y el visor .gl__lb).
   Filas justificadas calculadas en js/galeria.js (sin huecos ni recortes).
   ========================================================= */
.galeria {
  --gl-gap: 10px;
  --gl-text: #e9ecef;
  --gl-muted: #9aa1a9;
  --gl-accent: #c8f23a;
  --gl-tile: #0d0f13;
  --gl-ease: cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  color: var(--gl-text);
}
/* Dentro de un panel (/proyectos/<slug>/): deja de ser una capa fija y crece con las piezas */
.frame__stage.galeria {
  position: relative; inset: auto; width: 100%; flex: 1 1 100%;
  padding: calc(var(--header-h, 76px) + 96px) var(--gutter, 5vw) clamp(48px, 8vw, 96px);
}
.gl__meta {
  position: absolute; right: var(--gutter, 5vw); top: calc(var(--header-h, 76px) + 44px); margin: 0;
  font: 600 0.75rem/1 "Montserrat", system-ui, sans-serif; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gl-muted);
}
.gl__meta span { color: var(--gl-text); font-variant-numeric: tabular-nums; }
:where(.galeria:not(.frame__stage)) .gl__meta { position: static; margin: 0 0 16px; text-align: right; }

.gl__grid {
  list-style: none; margin: 0 auto; padding: 0; width: 100%; max-width: 1600px;
  position: relative; min-height: 50vh;
}
.gl__item { position: absolute; left: 0; top: 0; }
@media (max-width: 640px) {
  .galeria { --gl-gap: 6px; }
  .frame__stage.galeria { padding-top: calc(var(--header-h, 64px) + 84px); }
}

/* ---------- pieza ---------- */
.gl__tile {
  position: absolute; inset: 0; display: block; width: 100%; padding: 0; border: 0; margin: 0;
  background: var(--gl-tile); overflow: hidden; cursor: pointer; color: inherit; font: inherit; text-align: left;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.1s var(--gl-ease) var(--d, 0s), opacity 0.5s, filter 0.5s;
}
.gl__item.is-in .gl__tile { clip-path: inset(0 0 0 0); }
.gl__media { position: absolute; left: 0; right: 0; top: -9%; height: 118%; display: block; will-change: transform; }
.gl__media img, .gl__media video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.22); transition: transform 1.6s var(--gl-ease) var(--d, 0s);
}
.gl__item.is-in .gl__media img, .gl__item.is-in .gl__media video { transform: scale(1); }
.gl__cap {
  position: absolute; left: 12px; bottom: 12px; right: 12px; display: flex; gap: 10px; align-items: baseline;
  font: 600 0.68rem/1.3 "Montserrat", system-ui, sans-serif; letter-spacing: 0.16em; text-transform: uppercase; color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
  opacity: 0; transform: translateY(8px); transition: opacity 0.4s, transform 0.5s var(--gl-ease);
}
.gl__n { color: var(--gl-accent); font-variant-numeric: tabular-nums; }
@media (hover: hover) {
  .gl__grid:hover .gl__item.is-in .gl__tile { filter: brightness(0.55) saturate(0.7); }
  .gl__grid:hover .gl__item.is-in .gl__tile:hover { filter: none; }
  .gl__item.is-in .gl__tile:hover .gl__media img,
  .gl__item.is-in .gl__tile:hover .gl__media video { transform: scale(1.05); transition-delay: 0s; transition-duration: 0.9s; }
  .gl__tile:hover .gl__cap { opacity: 1; transform: none; }
}
.gl__tile:focus-visible { outline: 2px solid var(--gl-accent); outline-offset: 2px; }
.gl__tile:focus-visible .gl__cap { opacity: 1; transform: none; }

/* ---------- cursor ---------- */
.gl__cursor {
  position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none;
  width: 0; height: 0;
}
.gl__cursor span {
  position: absolute; left: -38px; top: -38px; width: 76px; height: 76px; border-radius: 50%;
  display: grid; place-items: center; background: var(--gl-accent, #c8f23a); color: #050608;
  font: 700 0.7rem/1 "Montserrat", system-ui, sans-serif; letter-spacing: 0.18em; text-transform: uppercase;
  transform: scale(0); transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.gl__cursor.is-on span { transform: scale(1); }
.gl__cursor { --gl-accent: #c8f23a; }

/* ---------- visor ---------- */
.gl-open, .gl-open body { overflow: hidden; }
.gl__lb {
  position: fixed; inset: 0; z-index: 200; background: rgba(5, 6, 8, 0.96);
  color: #e9ecef; opacity: 0; transition: opacity 0.4s;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.gl__lb.is-open { opacity: 1; }
.gl__lb-stage {
  position: absolute; inset: 0; display: grid; place-items: center;
  padding: max(64px, env(safe-area-inset-top)) max(72px, 6vw) 84px; cursor: zoom-out;
}
.gl__lb-media {
  grid-area: 1 / 1; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  cursor: default; user-select: none;
  animation: gl-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.gl__lb-media.is-out { animation: gl-out 0.4s ease both; }
@keyframes gl-in { from { opacity: 0; transform: translateX(var(--from)) scale(0.97); } }
@keyframes gl-out { to { opacity: 0; transform: scale(0.98); } }
.gl__lb-cap {
  position: absolute; left: max(20px, 5vw); right: 90px; bottom: max(26px, env(safe-area-inset-bottom)); margin: 0;
  display: flex; gap: 16px; align-items: baseline;
  font: 600 0.72rem/1.4 "Montserrat", system-ui, sans-serif; letter-spacing: 0.18em; text-transform: uppercase;
}
.gl__lb-n { color: #c8f23a; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gl__lb-btn {
  position: absolute; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.06); color: #e9ecef; border: 1px solid rgba(255, 255, 255, 0.2); cursor: pointer;
  transition: background 0.3s, color 0.3s;
}
.gl__lb-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.gl__lb-btn:hover { background: #e9ecef; color: #050608; }
.gl__lb-btn:focus-visible { outline: 2px solid #c8f23a; outline-offset: 3px; }
.gl__lb-close { top: max(16px, env(safe-area-inset-top)); right: max(16px, 2vw); }
.gl__lb-prev, .gl__lb-next { top: 50%; margin-top: -24px; }
.gl__lb-prev { left: max(12px, 1.5vw); }
.gl__lb-next { right: max(12px, 1.5vw); }
@media (max-width: 640px) {
  .gl__lb-stage { padding: 72px 12px 90px; }
  .gl__lb-prev, .gl__lb-next { top: auto; bottom: max(16px, env(safe-area-inset-bottom)); margin: 0; }
  .gl__lb-prev { left: auto; right: 72px; }
  .gl__lb-cap { right: 132px; }
}

@media (prefers-reduced-motion: reduce) {
  .gl__tile { clip-path: none; transition: none; }
  .gl__media img, .gl__media video { transform: none; transition: none; }
  .gl__lb, .gl__lb-media { transition: none; animation: none; }
}