/* (0.5.0) O Simulador de cores: o ambiente em 3D grande à esquerda (arrastar gira, dois dedos ou a rodinha chegam perto, tocar numa
   parte troca a cor dela; no modo "Abrir portas e gavetas", o toque abre e fecha) e as cores à direita. Usa o monte.css (o topo, os
   passos, as amostras, as combinações); aqui só o que é do simulador. No celular, o 3D em cima e as cores embaixo. */
.simulador .palco-3d { width: 100%; aspect-ratio: 16 / 11; max-height: calc(100vh - 160px); background: linear-gradient(#dcd7cf, #c9c2b8); cursor: grab; }
.simulador .palco-3d.arrastando { cursor: grabbing; }
.simulador .palco-3d.abrindo { cursor: pointer; }
.dica-palco { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); max-width: calc(100% - 24px); padding: 7px 14px; border-radius: 999px;
  background: rgba(20, 21, 25, .78); color: #f2f0ec; font-size: 13px; text-align: center; pointer-events: none; transition: opacity .3s; }
.dica-palco:empty { opacity: 0; }
.carregando { position: absolute; right: 12px; top: 12px; padding: 6px 12px; border-radius: 999px; background: rgba(20, 21, 25, .78); color: #f2f0ec; font-size: 12.5px; pointer-events: none; }
.simulador .chip .sw { display: inline-block; width: 18px; height: 18px; border-radius: 5px; margin-right: 6px; vertical-align: -4px; border: 1px solid rgba(0,0,0,.15);
  background-size: cover; background-position: center; }
.simulador .chip { display: inline-flex; align-items: center; }
.grade-cores-sim { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.grade-cores-sim .cor-grande small { display: block; font-size: 10.5px; color: var(--tinta-2); font-weight: 500; }
.resumo-cores { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.resumo-cores li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: center; }
.resumo-cores li .sw { width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--linha); background-size: cover; background-position: center; }
.resumo-cores li span { color: var(--tinta-2); } .resumo-cores li b { color: var(--tinta); font-weight: 650; }
.puxador-amostra { width: 100%; aspect-ratio: 1; border-radius: 10px; border: 2px solid var(--linha); position: relative; background: var(--superficie-2); }
@media (max-width: 1000px) { .simulador .palco-3d { aspect-ratio: 4 / 3.4; max-height: 62vh; } }
@media (max-width: 480px) { .grade-cores-sim { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dica-palco { font-size: 12px; bottom: 8px; } }
.veio { display: grid; gap: 8px; border-top: 1px solid var(--linha); padding-top: 10px; margin-top: 10px; justify-items: start; }
.seta { display: inline-block; width: 16px; height: 16px; margin-right: 6px; border-radius: 3px; opacity: .75;
  background: repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 5px); }
.seta-deitado { background: repeating-linear-gradient(0deg, currentColor 0 2px, transparent 2px 5px); }