/* Visualizador 3D */
.is-viewer { background: var(--ink); }
.vw { display: grid; grid-template-columns: 1fr 380px; height: 100svh; padding-top: 76px; background: var(--ink); color: #e9ecef; }
.vw__stage { position: relative; min-height: 0; overflow: hidden; background: #0c0f12; }
.vw__stage:fullscreen { height: 100vh; }
.vw__canvas { position: absolute; inset: 0; }
.vw__canvas canvas { display: block; width: 100% !important; height: 100% !important; touch-action: none; }
.vw__loading { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; font: 500 12px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted-d); background: #0c0f12; }
.spin { width: 38px; height: 38px; border: 3px solid rgba(255, 255, 255, .12); border-top-color: var(--accent); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.vw__badge { position: absolute; top: 16px; left: 16px; display: flex; gap: 12px; align-items: center; background: rgba(12, 15, 18, .72); backdrop-filter: blur(10px); border: 1px solid var(--line-d); padding: 10px 14px 10px 10px; border-radius: 14px; }
.vw__badge b { display: block; font: 700 15px/1.2 var(--f-display); }
.vw__badge small { font: 500 11px/1.3 var(--f-mono); letter-spacing: .06em; color: #ff9a6b; }
.vw__views { position: absolute; top: 16px; right: 16px; display: flex; background: rgba(12, 15, 18, .72); backdrop-filter: blur(10px); border: 1px solid var(--line-d); border-radius: 12px; padding: 4px; }
.vw__views button { background: none; border: 0; color: #c3c9d0; font-size: 13px; padding: 8px 12px; border-radius: 8px; min-height: 36px; }
.vw__views button.is-on { background: rgba(255, 255, 255, .12); color: #fff; }

.vw__bar { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; gap: 14px; align-items: center; background: rgba(12, 15, 18, .8); backdrop-filter: blur(14px); border: 1px solid var(--line-d); border-radius: 18px; padding: 10px; }
.vw__play, .vw__tools { display: flex; gap: 6px; align-items: center; }
.vbtn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-d); background: rgba(255, 255, 255, .04); color: #e9ecef; font-size: 14px; font-weight: 600; }
.vbtn:hover { background: rgba(255, 255, 255, .1); }
.vbtn--accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.vbtn--accent:hover { background: #ec6e35; }
.vbtn--icon { width: 44px; padding: 0; justify-content: center; }
.vbtn[aria-pressed="true"] { background: rgba(224, 98, 43, .2); border-color: var(--accent); color: #ffb08a; }
.vbtn.is-night { color: #9db7ff; } .vbtn.is-dusk { color: #ffb066; }
.vbtn--walk { background: #fff; color: var(--ink); border-color: #fff; }
.vbtn--walk:hover { background: #e9ecef; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.vw__timeline { flex: 1; position: relative; min-width: 120px; padding: 0 4px; }
.vw__timeline input { width: 100%; appearance: none; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--accent) var(--p, 100%), rgba(255, 255, 255, .15) var(--p, 100%)); outline-offset: 6px; }
.vw__timeline input::-webkit-slider-thumb { appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 4px solid var(--accent); cursor: grab; }
.vw__timeline input::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 4px solid var(--accent); cursor: grab; }
.vw__ticks { position: absolute; left: 4px; right: 4px; top: 16px; display: flex; justify-content: space-between; pointer-events: none; }
.vw__ticks span { width: 2px; height: 6px; background: rgba(255, 255, 255, .25); }
.vtog { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border: 1px solid var(--line-d); border-radius: 12px; color: #c3c9d0; }
.vtog input { width: 80px; accent-color: var(--accent); }

.vw__walkhud { position: absolute; inset: 0; pointer-events: none; }
.vw__walkhud::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: rgba(255, 255, 255, .8); box-shadow: 0 0 0 2px rgba(0, 0, 0, .3); }
.vw__hint { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); background: rgba(12, 15, 18, .78); border: 1px solid var(--line-d); padding: 10px 16px; border-radius: 12px; font-size: 13px; display: grid; gap: 2px; text-align: center; backdrop-filter: blur(10px); }
.vw__hint b { color: #ff9a6b; font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.vw__walkhud .touch { display: none; }
.vw__walkhud.is-touch .touch { display: inline; } .vw__walkhud.is-touch .desk { display: none; }
.vw__exit { pointer-events: auto; position: absolute; right: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; background: #fff; color: var(--ink); border: 0; border-radius: 12px; font-weight: 600; }
.joy { display: none; pointer-events: auto; position: absolute; left: 24px; bottom: 24px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25); touch-action: none; }
.joy span { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px; border-radius: 50%; background: rgba(255, 255, 255, .85); }
.vw__walkhud.is-touch .joy { display: block; }
.is-walking .vw__bar, .is-walking .vw__views, .is-walking .vw__badge { display: none; }

.vw__side { overflow-y: auto; border-left: 1px solid var(--line-d); background: var(--ink-2); }
.vw__sec { padding: 24px; border-bottom: 1px solid var(--line-d); display: grid; gap: 14px; }
.vw__sec h1 { font-size: 30px; font-weight: 750; }
.vw__desc { color: var(--muted-d); font-size: 15px; }
.vw__specs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.vw__specs div { border: 1px solid var(--line-d); border-radius: 12px; padding: 12px; }
.vw__specs dt { font: 500 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted-d); }
.vw__specs dd { margin: 6px 0 0; font: 700 20px/1 var(--f-display); }
.vw__h { font: 500 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.vw__stages { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.vw__stages button { width: 100%; display: flex; gap: 12px; text-align: left; background: none; border: 0; color: inherit; padding: 10px; border-radius: 10px; }
.vw__stages button:hover { background: rgba(255, 255, 255, .05); }
.vw__stages .n { font: 500 12px/1 var(--f-mono); color: var(--muted-d); width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line-d); display: grid; place-items: center; flex: none; }
.vw__stages .t { display: grid; gap: 2px; }
.vw__stages b { font-weight: 600; font-size: 15px; }
.vw__stages small { font: 500 11px/1 var(--f-mono); color: var(--muted-d); }
.vw__stages em { font-style: normal; font-size: 13px; color: var(--muted-d); display: none; }
.vw__stages .is-done .n { background: rgba(47, 138, 87, .25); border-color: #2f8a57; color: #8fe0b1; }
.vw__stages .is-on button { background: rgba(224, 98, 43, .12); }
.vw__stages .is-on .n { background: var(--accent); border-color: var(--accent); color: #fff; }
.vw__stages .is-on em { display: block; }
.vw__cta { gap: 10px; }
.vw__cta .btn { width: 100%; }
.vw__others { display: grid; gap: 6px; }
.vw__others a { display: flex; gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--line-d); border-radius: 12px; text-decoration: none; font-weight: 500; }
.vw__others a:hover { border-color: var(--accent); }
.vw__others .ic { color: #ff9a6b; }
.is-viewer .foot { display: none; }
.is-viewer .wa-float { bottom: 96px; }

@media (max-width: 1000px) {
  .vw { grid-template-columns: 1fr; height: auto; }
  .vw__stage { height: calc(100svh - 76px); min-height: 480px; }
  .vw__side { border-left: 0; }
  .is-viewer .foot { display: block; }
  .vw__bar { flex-wrap: wrap; }
  .vw__timeline { order: -1; flex-basis: 100%; padding: 8px 6px 14px; }
  .vw__play span { display: none; }
  .vw__play .vbtn { width: 44px; padding: 0; justify-content: center; }
  .vw__tools { flex: 1; justify-content: flex-end; flex-wrap: wrap; }
  .vtog input { width: 60px; }
  .vw__views { top: auto; bottom: 150px; right: 16px; }
}
@media (max-width: 560px) {
  .vw__bar { left: 8px; right: 8px; bottom: 8px; }
  .vw__views { display: none; }
  .vtog { display: none; }
  .vw__badge { left: 8px; top: 8px; }
  .vbtn--walk span { display: none; }
  .vbtn--walk { width: 44px; padding: 0; justify-content: center; }
}