/* ==========================================================================
   Mezcla: portfolio actual + J06 cromada 3D con anillo de trabajos
   ========================================================================== */
.jstage-wrap { position: relative; height: 720vh; }
.jstage-anchor { position: absolute; left: 0; top: 184vh; width: 1px; height: 1px; }
.jstage { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; }
.jstage.is-pick, .jstage.is-pick * { cursor: pointer; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; pointer-events: none; }
.jstage .hero { position: absolute; inset: 0; min-height: 0; z-index: 2; background: none; will-change: opacity, transform; }
.jstage .hero-glow { z-index: -1; }
.jstage .hero-title { max-width: 9.5ch; text-shadow: 0 2px 30px rgba(10,10,10,.55); }

/* capa de trabajos */
.orbit-ui { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; }
.orbit-ui.is-on .orbit-plate { pointer-events: auto; }
.orbit-head { position: absolute; left: var(--pad); top: 108px; max-width: 420px; }
.orbit-head .work-hint { margin-top: 10px; color: var(--muted); font-size: 14px; }
.orbit-count { position: absolute; right: var(--pad); top: 112px; font-family: var(--font-display); font-size: clamp(54px, 6vw, 96px); line-height: .9; letter-spacing: -.02em; }
.orbit-of { font-size: .32em; color: var(--muted); margin-left: .25em; font-style: italic; }
.orbit-pips { position: absolute; right: var(--pad); top: calc(112px + clamp(54px, 6vw, 96px) + 16px); display: flex; gap: 6px; list-style: none; }
.orbit-pips li { width: 22px; height: 2px; background: var(--line); transition: width .4s var(--ease), background .4s ease; }
.orbit-pips li.is-on { width: 40px; background: var(--accent); }
.orbit-plate { position: absolute; left: 50%; bottom: clamp(12px, 2vw, 22px); transform: translateX(-50%); display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 22px; width: min(760px, calc(100vw - 2 * var(--pad))); padding: 16px 16px 16px 24px; border: 1px solid var(--line); border-radius: 999px; background: rgba(16,16,17,.72); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); transition: border-color .4s ease; }
.orbit-plate:hover { border-color: var(--accent); }
.orbit-plate .case-index { font-size: 12px; color: var(--accent); letter-spacing: .08em; }
.orbit-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.orbit-plate .case-name { font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 2.6vw, 38px); line-height: 1; letter-spacing: -.01em; }
.orbit-plate .case-tags { font-size: 13px; color: var(--muted); }
.orbit-plate .case-year { font-size: 13px; color: var(--muted); }
.orbit-go { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; background: var(--accent); color: #0a0a0a; font-size: 13px; font-weight: 500; white-space: nowrap; }
.orbit-go .arr { transition: transform .4s var(--ease); }
.orbit-plate:hover .orbit-go .arr { transform: translateX(4px); }
.orbit-plate.is-swap .orbit-name, .orbit-plate.is-swap .case-index { animation: orbit-swap .5s var(--ease); }
@keyframes orbit-swap { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.orbit-hint { position: absolute; left: var(--pad); bottom: clamp(30px, 4vw, 52px); font-size: 12px; color: var(--muted); letter-spacing: .04em; }
.orbit-noscript { position: absolute; left: var(--pad); bottom: 24px; z-index: 4; color: var(--muted); font-size: 13px; }

@media (max-width: 1100px) { .orbit-hint { display: none; } }
@media (max-width: 760px) {
  .jstage-wrap { height: 700vh; }
  .jstage .hero-title { font-size: clamp(46px, 14vw, 72px); }
  .orbit-head { top: 86px; right: 90px; }
  .orbit-head .section-title { font-size: 40px; }
  .orbit-head .work-hint { font-size: 13px; }
  .orbit-count { top: 90px; font-size: 44px; }
  .orbit-pips { top: 142px; }
  .orbit-pips li { width: 12px; } .orbit-pips li.is-on { width: 22px; }
  .orbit-plate { grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; border-radius: 22px; gap: 10px 14px; padding: 16px 18px; bottom: 16px; }
  .orbit-plate .case-name { font-size: 28px; }
  .orbit-plate .case-year { grid-column: 3; grid-row: 1; }
  .orbit-go { grid-column: 1 / -1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .orbit-plate.is-swap .orbit-name { animation: none; } }