/* v5j (27/10/2026): vistas Frente · Lado · Cima (miniaturas, opção A) + giro 3D por arraste (opção C) — Design 2026-10-27-vistas-laterais.
   Carregado depois do estilo.v5i.css. Desktop: miniaturas embaixo da prévia, na coluna da prévia (o "Pedir este modelo" fica onde está).
   Celular: a prévia perde a altura das miniaturas (44svh → 36svh), então o bloco fixo do topo fica do mesmo tamanho. */
.faixa-vistas{display:flex;justify-content:center;gap:10px;flex:none;padding:2px 0 0}
.vista-mini{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;width:92px;margin:0;padding:0;border:0;background:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;color:var(--tx-2);transition:color var(--t-ui) var(--ease-out),transform 120ms var(--ease-out)}
.vm-img{position:relative;display:block;width:100%;height:62px;border-radius:3px;overflow:hidden;background:#ebe4d6;
  box-shadow:inset 0 0 0 1px rgba(60,40,25,.06),0 0 0 1px var(--filete);transition:box-shadow var(--t-ui) var(--ease-out)}
.vm-img canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity var(--t-versao) var(--ease-out)}
.vista-mini.pronta canvas{opacity:1}
.vm-nome{font:400 10px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;padding-left:.2em}
.vista-mini[aria-checked="true"]{color:var(--tx)}
.vista-mini[aria-checked="true"] .vm-img{box-shadow:inset 0 0 0 1px rgba(60,40,25,.06),0 0 0 1.5px var(--acento)}
.vista-mini[aria-checked="true"] .vm-nome{font-weight:500}
.vista-mini:focus-visible{outline:none}
.vista-mini:focus-visible .vm-img{box-shadow:0 0 0 2px #faf6f0,0 0 0 3.5px var(--tx)}
@media (hover:hover) and (pointer:fine){ .vista-mini:not([aria-checked="true"]):hover{color:var(--tx)} .vista-mini:not([aria-checked="true"]):hover .vm-img{box-shadow:inset 0 0 0 1px rgba(60,40,25,.06),0 0 0 1px var(--filete-forte)} }
.vista-mini:active{transform:scale(.97)}
/* selo de honestidade: Lado/Cima são montagens de foto real; o 3D é o modelo */
.selo-vista{position:absolute;left:12px;top:12px;z-index:4;margin:0;font:400 9px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;
  color:rgba(59,51,45,.7);pointer-events:none;text-shadow:0 0 6px rgba(251,248,243,.9);opacity:0;transition:opacity var(--t-versao) var(--ease-out)}
.previa[data-vista="lado"] .selo-vista,.previa[data-vista="cima"] .selo-vista,.previa.em-3d .selo-vista{opacity:1}
.previa[data-vista="lado"] .dica-rasgo,.previa[data-vista="cima"] .dica-rasgo,.previa[data-vista="giro"] .dica-rasgo{opacity:0}
/* giro 3D */
.camada-3d{position:absolute;inset:0;z-index:3;opacity:0;visibility:hidden;transition:opacity var(--t-versao) var(--ease-out),visibility 0s linear var(--t-versao)}
.camada-3d canvas{display:block;width:100%!important;height:100%!important}
.previa.em-3d .camada-3d{opacity:1;visibility:visible;transition:opacity var(--t-versao) var(--ease-out),visibility 0s}
#palco{touch-action:pan-y;cursor:grab}
#palco:active{cursor:grabbing}
#palco.em-3d{touch-action:none}
#palco .foto-tecla,#palco button{cursor:pointer}
.previa.carregando-3d::after{content:"Carregando o 3D…";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;padding:7px 14px;border-radius:99px;
  background:rgba(250,246,240,.8);font:italic 300 15px/1 var(--serif);color:var(--tx-2);pointer-events:none}
.previa.carregando-vista::after{content:"Carregando a vista…";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;padding:7px 14px;border-radius:99px;
  background:rgba(250,246,240,.8);font:italic 300 15px/1 var(--serif);color:var(--tx-2);pointer-events:none}
.giro-atalhos{position:absolute;right:10px;top:8px;z-index:4;display:inline-flex;align-items:center;padding:3px;border-radius:99px;
  background:rgba(250,246,240,.74);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:inset 0 0 0 1px var(--filete)}
.ga-rot{padding:0 6px 0 9px;font:500 9px/1 var(--sans);letter-spacing:.16em;color:var(--acento)}
.giro-atalhos button{height:28px;padding:0 10px;border:0;border-radius:99px;background:none;font:400 9.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--tx-2);-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:color var(--t-ui) var(--ease-out),background-color var(--t-ui) var(--ease-out),box-shadow var(--t-ui) var(--ease-out)}
.giro-atalhos button[aria-checked="true"]{background:#fffdf9;color:var(--tx);box-shadow:0 1px 2px rgba(60,40,25,.14),inset 0 0 0 1px rgba(138,90,60,.22)}
.giro-atalhos button:focus-visible{outline:1px solid var(--acento);outline-offset:1px}
@media (hover:hover) and (pointer:fine){ .giro-atalhos button:not([aria-checked="true"]):hover{color:var(--tx)} }
.dica-giro{position:absolute;left:50%;bottom:46px;z-index:2;transform:translateX(-50%);margin:0;padding:6px 12px;border-radius:99px;
  background:rgba(250,246,240,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);white-space:nowrap;
  font:400 9.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--tx-2);pointer-events:none;transition:opacity 400ms ease}
.previa.ja-tocou .dica-giro,.previa[data-vista="lado"] .dica-giro,.previa[data-vista="cima"] .dica-giro{bottom:14px}
.previa.ja-girou .dica-giro,.previa.carregando .dica-giro{opacity:0}
@media (prefers-reduced-motion: reduce){ .vista-mini,.vm-img canvas,.selo-vista,.camada-3d,.dica-giro{transition:none} }
@media (max-width:960px){
  .previa{height:36vh;height:36svh}
  .faixa-vistas{gap:8px;padding:4px 0 2px}
  .vista-mini{width:auto;flex:1 1 0;max-width:104px;gap:3px}
  .vm-img{height:42px}
  .vm-nome{font-size:9px}
  .giro-atalhos{right:6px;top:6px;padding:2px}
  .ga-rot{padding:0 4px 0 7px}
  .giro-atalhos button{height:30px;padding:0 8px;font-size:9px;letter-spacing:.12em}
  .selo-vista{left:8px;top:auto;bottom:8px;font-size:8.5px;letter-spacing:.14em}
  .dica-giro{bottom:40px;font-size:9px;letter-spacing:.12em;padding:5px 11px}
  .previa.ja-tocou .dica-giro,.previa[data-vista="lado"] .dica-giro,.previa[data-vista="cima"] .dica-giro{bottom:10px}
  .previa[data-vista="lado"] .dica-giro,.previa[data-vista="cima"] .dica-giro{bottom:26px}
}