/* ============================================================
   Óptica Carampangue — visor de producto 360°/zoom (Etapa 5)
   Rotación 3D simulada con CSS (rotateY) sobre la misma imagen SVG del
   armazón + lupa de zoom que sigue el cursor. Sin librerías, sin CDN.
   ============================================================ */
.prod-viewer{display:flex;flex-direction:column;gap:10px;background:#fff}
.viewer-stage{position:relative;aspect-ratio:480/340;background:var(--bg);overflow:hidden;
  border-radius:var(--r-lg);cursor:grab;perspective:1100px;touch-action:pan-y}
.viewer-stage.dragging{cursor:grabbing}
.viewer-stage img{width:100%;height:100%;object-fit:cover;user-select:none;pointer-events:none;
  transform:rotateY(0deg);transition:transform .45s var(--ease);will-change:transform}
.viewer-stage.dragging img{transition:none}
.viewer-stage.reduce-motion img{transition:none}
.viewer-lens{position:absolute;inset:0;pointer-events:none;border-radius:var(--r-lg);
  background-repeat:no-repeat;opacity:0;transition:opacity .15s}
.viewer-lens.on{opacity:1}
.viewer-controls{display:flex;align-items:center;justify-content:center;gap:12px;padding:2px 4px 4px}
.viewer-btn{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:#fff;
  display:grid;place-items:center;color:var(--navy);box-shadow:var(--sh-sm);cursor:pointer;flex:0 0 auto}
.viewer-btn:hover{border-color:var(--aqua);color:var(--blue)}
.viewer-btn svg{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.viewer-hint{font-size:11px;color:var(--muted);font-weight:600;text-align:center}
@media(max-width:760px){.viewer-hint{display:none}}
@media(hover:none){.viewer-lens{display:none}}