/* Visualizador 3D do perfil (assets/js/visualizador-3d.js) — gestor 06/10/2026, protótipo aprovado.
   Padrão do tema: cantos retos, chips iguais aos do configurador (borda preta + negrito no selecionado), rótulos 11px. */
.ark3d [hidden], .ark3d-abrir[hidden] { display: none !important; }

/* botão na foto principal */
.gallery-main { position: relative; }
.ark3d-abrir { position: absolute; left: 12px; bottom: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border: 1px solid var(--cor-cinza-100, #E2E0DB); background: rgba(255,255,255,.94); color: var(--cor-cinza-900, #1A1A1A);
  font: 600 12px/1 var(--font-body, 'Inter', sans-serif); letter-spacing: .04em; text-transform: uppercase; cursor: pointer;
  transition: border-color .12s, background .12s; }
.ark3d-abrir:hover { border-color: var(--cor-cinza-900, #1A1A1A); background: #fff; }
.ark3d-abrir svg { width: 18px; height: 18px; }

/* gaveta (mesmo padrão do .ark-drawer: X à esquerda, título em caixa alta) */
html.ark3d-travado, html.ark3d-travado body { overflow: hidden; }
.ark3d-veu { position: fixed; inset: 0; background: rgba(10,10,10,.4); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; z-index: 10010; }
.ark3d.aberta .ark3d-veu { opacity: 1; visibility: visible; }
.ark3d-gaveta { position: fixed; top: 0; right: 0; width: min(980px, 96vw); height: 100vh; height: 100dvh; background: #fff; z-index: 10011;
  transform: translateX(100%); transition: transform .3s ease; display: flex; flex-direction: column; box-shadow: -8px 0 32px rgba(0,0,0,.08);
  font-family: var(--font-body, 'Inter', sans-serif); color: var(--cor-cinza-900, #1A1A1A); }
.ark3d.aberta .ark3d-gaveta { transform: none; }
.ark3d-topo { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--cor-cinza-100, #E2E0DB); flex: none; }
.ark3d-fechar { width: 32px; height: 32px; display: grid; place-items: center; border: 0; background: none; color: var(--cor-cinza-500, #717171); cursor: pointer; flex: none; }
.ark3d-fechar:hover { color: var(--cor-cinza-900, #1A1A1A); }
.ark3d-tit small { display: block; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cor-cinza-500, #717171); }
.ark3d-tit b { display: block; font-size: 15px; font-weight: 600; margin-top: 2px; }
.ark3d-cod { color: var(--cor-vermelho, #E8001D); margin-right: 6px; }
.ark3d-corpo { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 300px; }

/* palco: o 3D é o foco */
.ark3d-palco { position: relative; min-height: 0; background: radial-gradient(ellipse at 50% 42%, #fff 0, #EEECE7 78%); transition: background .4s; }
.ark3d-palco.aceso { background: radial-gradient(ellipse at 50% 45%, #36332F 0, #121110 78%); }
.ark3d-palco model-viewer { width: calc(100% - 76px); height: 100%; --poster-color: transparent; --progress-bar-color: var(--cor-vermelho, #E8001D); --progress-bar-height: 2px; }
.ark3d-carregando { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--cor-cinza-500, #717171); font-size: 13px; pointer-events: none; }
.ark3d-vistas { position: absolute; left: 16px; bottom: 16px; right: 110px; display: flex; gap: 6px; flex-wrap: wrap; }
.ark3d-vistas button { padding: 7px 12px; border: 1px solid var(--cor-cinza-100, #E2E0DB); background: #fff; font: 500 12px var(--font-body, 'Inter', sans-serif); color: var(--cor-cinza-700, #3D3D3D); cursor: pointer; }
.ark3d-vistas button:hover { border-color: var(--cor-cinza-700, #3D3D3D); color: var(--cor-preto, #0A0A0A); }
.ark3d-vistas button.ativo { border-color: var(--cor-preto, #0A0A0A); color: var(--cor-preto, #0A0A0A); font-weight: 600; }
.ark3d-palco.aceso .ark3d-vistas button { background: rgba(26,26,26,.9); border-color: #3D3D3D; color: #CFCBC5; }
.ark3d-palco.aceso .ark3d-vistas button.ativo { border-color: #fff; color: #fff; }

/* régua das tampas: fio vertical discreto na lateral do desenho */
.ark3d-regua { position: absolute; right: 26px; top: 50%; transform: translateY(-50%); height: min(48%, 300px); width: 24px; display: flex; flex-direction: column; align-items: center; user-select: none; }
.ark3d-regua small { font-size: 9px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--cor-cinza-500, #717171); writing-mode: vertical-rl; transform: rotate(180deg); margin-bottom: 12px; }
.ark3d-trilho { position: relative; flex: 1; width: 24px; cursor: pointer; touch-action: none; }
.ark3d-linha { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); background: var(--cor-cinza-300, #B8B8B8); }
.ark3d-cheio { position: absolute; left: 50%; bottom: 0; width: 1px; transform: translateX(-50%); background: var(--cor-cinza-900, #1A1A1A); }
.ark3d-pega { position: absolute; left: 50%; width: 11px; height: 11px; transform: translate(-50%, 50%); background: #fff; border: 1.5px solid var(--cor-cinza-900, #1A1A1A);
  border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.18); transition: width .15s, height .15s; }
.ark3d-trilho:hover .ark3d-pega, .ark3d-trilho:active .ark3d-pega { width: 14px; height: 14px; }
.ark3d-trilho:focus-visible { outline: 1px solid var(--cor-cinza-900, #1A1A1A); outline-offset: 6px; }
/* 11/10: foco visível no teclado em tudo que se opera na gaveta (diálogo com foco preso) */
.ark3d-fechar:focus-visible, .ark3d-chip:focus-visible, .ark3d-vistas button:focus-visible, .ark3d-girar button:focus-visible, .ark3d-dl:focus-visible,
.ark3d-abrir:focus-visible { outline: 2px solid var(--cor-azul, #3483FA); outline-offset: 2px; }
.ark3d-palco.aceso .ark3d-regua small { color: #9A958F; }
.ark3d-palco.aceso .ark3d-linha { background: #4A4744; }
.ark3d-palco.aceso .ark3d-cheio { background: #E8E4DE; }
.ark3d-palco.aceso .ark3d-pega { background: #121110; border-color: #E8E4DE; }

/* girar a peça no próprio eixo */
.ark3d-girar { position: absolute; right: 16px; bottom: 16px; display: flex; gap: 6px; }
.ark3d-girar button { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--cor-cinza-100, #E2E0DB); background: #fff; color: var(--cor-cinza-700, #3D3D3D); cursor: pointer; }
.ark3d-girar button:hover { border-color: var(--cor-cinza-700, #3D3D3D); color: var(--cor-preto, #0A0A0A); }
.ark3d-palco.aceso .ark3d-girar button { background: rgba(26,26,26,.9); border-color: #3D3D3D; color: #CFCBC5; }

/* coluna de opções (mesmo componente .chip / .config-label da página do produto) */
.ark3d-painel { border-left: 1px solid var(--cor-cinza-100, #E2E0DB); overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 18px; }
.ark3d-grupo { display: flex; flex-direction: column; gap: 8px; }
.ark3d-rotulo { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--cor-cinza-500, #717171); }
.ark3d-rotulo em { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--cor-cinza-900, #1A1A1A); font-weight: 600; margin-left: 4px; }
.ark3d-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 6px; }
.ark3d-chip { padding: 7px 10px; border: 1px solid var(--cor-cinza-100, #E2E0DB); background: #fff; font: 500 12px var(--font-body, 'Inter', sans-serif); color: var(--cor-cinza-700, #3D3D3D);
  cursor: pointer; display: flex; align-items: center; gap: 8px; text-align: left; min-height: 34px; transition: border-color .12s, color .12s; }
.ark3d-chip:hover { border-color: var(--cor-cinza-700, #3D3D3D); color: var(--cor-preto, #0A0A0A); }
.ark3d-chip.ativo { border-color: var(--cor-preto, #0A0A0A); color: var(--cor-preto, #0A0A0A); font-weight: 600; }
.ark3d-chip i { width: 16px; height: 16px; flex: none; border: 1px solid rgba(0,0,0,.08); }
.ark3d-inteiro { grid-column: 1 / -1; }
.ark3d-downloads { display: flex; flex-direction: column; border-top: 1px solid var(--cor-cinza-100, #E2E0DB); }
.ark3d-dl { display: flex; align-items: center; gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--cor-cinza-100, #E2E0DB); text-decoration: none; color: var(--cor-cinza-900, #1A1A1A); }
.ark3d-dl:hover .ark3d-dl-nome { color: var(--cor-vermelho, #E8001D); }
.ark3d-dl-tipo { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border: 1px solid var(--cor-cinza-100, #E2E0DB); font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--cor-cinza-700, #3D3D3D); }
.ark3d-dl-nome { display: block; font-size: 13px; font-weight: 600; line-height: 1.3; transition: color .12s; }
.ark3d-dl-meta { display: block; font-size: 11.5px; color: var(--cor-cinza-500, #717171); margin-top: 2px; }
.ark3d-dl svg { margin-left: auto; flex: none; color: var(--cor-cinza-500, #717171); }
.ark3d-dica { font-size: 11.5px; color: var(--cor-cinza-500, #717171); line-height: 1.5; margin: 0; }

@media (max-width: 760px) {
  .ark3d-gaveta { width: 100%; }            /* 100vw contaria a barra de rolagem: a página rolaria para o lado */
  .ark3d-corpo { grid-template-columns: 1fr; grid-template-rows: 56dvh auto; overflow-y: auto; }
  .ark3d-painel { border-left: 0; border-top: 1px solid var(--cor-cinza-100, #E2E0DB); overflow: visible; }
  .ark3d-vistas { left: 12px; bottom: 12px; }
  .ark3d-regua { right: 6px; height: 62%; }
  .ark3d-palco model-viewer { width: calc(100% - 64px); }
  .ark3d-abrir { left: 8px; bottom: 8px; padding: 8px 12px; }
}