/**
 * HyperFrames Gallery — focused big-view page
 * Standalone gallery that plays effects one at a time, large.
 * Loaded only on the page-gallery template.
 */
.hf-gallery {
  /* alias → presets de theme.json (mismos valores) */
  --hfg-bg: var(--wp--preset--color--bg);
  --hfg-card: var(--wp--preset--color--bg-card);
  --hfg-border: var(--wp--preset--color--border);
  --hfg-cyan: var(--wp--preset--color--cyan);
  --hfg-pink: var(--wp--preset--color--pink);
  --hfg-text: var(--wp--preset--color--text);
  --hfg-muted: var(--wp--preset--color--text-muted);
  --hfg-dim: var(--wp--preset--color--text-dim);
  --hfg-head: "Inter Tight", sans-serif;
  --hfg-body: "Inter", sans-serif;
  --hfg-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  position: relative;
  font-family: var(--hfg-body);
  color: var(--hfg-text);
  background: var(--hfg-bg);
  min-height: 100vh;
  padding: 88px 24px 48px;
  background-image: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(57,228,228,0.05), transparent 70%);
}
.hf-gallery *, .hf-gallery *::before, .hf-gallery *::after { box-sizing: border-box; }

/* progress bar */
.hfg-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--hfg-cyan), var(--hfg-pink)); z-index: 50; transition: width .12s linear; }

/* header row: title + filter */
.hfg-top { max-width: 1200px; margin: 0 auto 22px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.hfg-title { font-family: var(--hfg-head); font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 900; letter-spacing: -0.02em; }
.hfg-title span { background: linear-gradient(135deg, var(--hfg-cyan), var(--hfg-pink)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hfg-back { font-size: .85rem; color: var(--hfg-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--hfg-border); border-radius: 8px; transition: all .2s; }
.hfg-back:hover { border-color: var(--hfg-cyan); color: var(--hfg-cyan); }

.hfg-filters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 1200px; margin: 0 auto 24px; }
.hfg-pill { background: var(--hfg-card); border: 1px solid var(--hfg-border); color: var(--hfg-muted); border-radius: 20px; padding: 7px 16px; font-size: .8rem; font-weight: 500; cursor: pointer; transition: all .2s; font-family: var(--hfg-body); }
.hfg-pill:hover { color: var(--hfg-text); border-color: var(--hfg-muted); }
.hfg-pill.hfg-active { background: var(--hfg-cyan); color: var(--hfg-bg); border-color: var(--hfg-cyan); font-weight: 600; }
.hfg-pill .n { opacity: .6; margin-left: 4px; }

/* stage */
.hfg-stage { display: flex; align-items: center; gap: 24px; max-width: 1200px; margin: 0 auto; justify-content: center; }
.hfg-arrow { background: rgba(48,54,61,.4); border: 1px solid var(--hfg-border); color: var(--hfg-text); width: 54px; height: 54px; min-width: 54px; border-radius: 50%; font-size: 1.5rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .2s; }
.hfg-arrow:hover { background: rgba(57,228,228,.15); border-color: var(--hfg-cyan); color: var(--hfg-cyan); transform: scale(1.06); }
.hfg-viewport { flex: 1; max-width: 960px; }
.hfg-vidwrap { position: relative; width: 100%; border-radius: 18px; overflow: hidden; border: 1px solid var(--hfg-border); box-shadow: 0 30px 80px -24px rgba(0,0,0,.7); background: #000; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; }
.hfg-vidwrap.is-vert { aspect-ratio: 9/16; max-width: 360px; margin: 0 auto; }
.hfg-vidwrap video, .hfg-vidwrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hfg-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--hfg-dim); font-size: .85rem; }

/* meta */
.hfg-meta { text-align: center; max-width: 760px; margin: 26px auto 0; }
.hfg-chips { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; }
.hfg-chip { font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 5px 12px; border-radius: 20px; background: rgba(48,54,61,.4); color: var(--hfg-muted); border: 1px solid var(--hfg-border); }
.hfg-chip.cat { background: rgba(57,228,228,.12); color: var(--hfg-cyan); border-color: rgba(57,228,228,.25); }
.hfg-chip.cat.pink { background: rgba(239,28,134,.12); color: var(--hfg-pink); border-color: rgba(239,28,134,.25); }
.hfg-name { font-family: var(--hfg-head); font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 900; letter-spacing: -0.02em; margin-bottom: 8px; }
.hfg-desc { color: var(--hfg-muted); font-size: 1rem; line-height: 1.55; margin-bottom: 18px; }
.hfg-cmd { display: inline-flex; align-items: center; gap: 10px; background: var(--hfg-card); border: 1px solid var(--hfg-border); border-radius: 10px; padding: 10px 14px; font-family: var(--hfg-mono); font-size: .82rem; color: var(--hfg-text); max-width: 100%; }
.hfg-cmd code { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hfg-cmd button { background: rgba(57,228,228,.12); border: 1px solid rgba(57,228,228,.25); color: var(--hfg-cyan); border-radius: 6px; padding: 5px 12px; font-size: .72rem; cursor: pointer; font-family: var(--hfg-body); font-weight: 600; white-space: nowrap; }
.hfg-cmd button.ok { background: var(--hfg-cyan); color: var(--hfg-bg); }

/* footer controls */
.hfg-controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 28px; }
.hfg-pp { background: rgba(48,54,61,.4); border: 1px solid var(--hfg-border); color: var(--hfg-text); border-radius: 8px; padding: 8px 16px; cursor: pointer; font-size: .85rem; font-family: var(--hfg-body); font-weight: 500; display: inline-flex; align-items: center; gap: 7px; transition: all .2s; }
.hfg-pp:hover { border-color: var(--hfg-cyan); color: var(--hfg-cyan); }
.hfg-counter { color: var(--hfg-muted); font-size: .9rem; }
.hfg-counter b { color: var(--hfg-cyan); }

@media (max-width: 768px) {
  .hf-gallery { padding: 80px 12px 36px; }
  .hfg-arrow { width: 42px; height: 42px; min-width: 42px; font-size: 1.2rem; }
  .hfg-stage { gap: 8px; }
  .hfg-name { font-size: 1.3rem; }
  .hfg-desc { font-size: .9rem; }
}