/* Telas simuladas do SketchUp para as páginas de venda. Ilustração, não captura. */
.demo { --win: #F0F0F0; --bar: #FFFFFF; --edge: #C9CDD0; --sel: #2F6FD6;
  position: relative; width: 100%; aspect-ratio: 16 / 10.5; background: var(--win); border-radius: 6px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.08); font: 12px/1.35 'Segoe UI', 'Poppins', Arial, sans-serif; color: #1E1E1E;
  display: grid; grid-template-rows: auto auto auto auto 1fr auto; user-select: none; }
.demo * { box-sizing: border-box; }
.d-title { background: #FFFFFF; padding: 6px 10px; font-size: 11px; color: #333; display: flex; justify-content: space-between; border-bottom: 1px solid var(--edge); }
.d-title i { font-style: normal; letter-spacing: 6px; color: #777; }
.d-menu { background: #FFFFFF; padding: 3px 10px; display: flex; gap: 14px; font-size: 11px; color: #333; border-bottom: 1px solid var(--edge); flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
.d-menu b { font-weight: 400; padding: 0 4px; border-radius: 2px; }
.d-menu b.on { background: #CCE4F7; }
.d-tool { background: var(--win); padding: 4px 8px; display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--edge); }
.d-tool .g { width: 22px; height: 22px; border-radius: 3px; display: grid; place-items: center; }
.d-tool .g svg { width: 16px; height: 16px; stroke: #4A4A4A; fill: none; stroke-width: 1.4; }
.d-tool .sep { width: 1px; height: 20px; background: var(--edge); margin: 0 6px; }
.d-tool img { width: 22px; height: 22px; display: block; border-radius: 3px; padding: 1px; }
.d-tool img.on { background: #CCE4F7; box-shadow: 0 0 0 1px #8BB8E8; }
.d-tabs { background: var(--win); display: flex; gap: 2px; padding: 3px 6px 0; min-height: 24px; overflow: hidden; border-bottom: 1px solid var(--edge); flex-wrap: nowrap; }
.d-tab { background: #E2E2E2; border: 1px solid var(--edge); border-bottom: 0; padding: 3px 8px; font-size: 10.5px; white-space: nowrap; border-radius: 3px 3px 0 0; }
.d-tab.new { animation: d-in .25s ease both; }
.d-tab.on { background: #FFFFFF; font-weight: 600; }
.d-view { position: relative; background: #FFFFFF; overflow: hidden; }
.d-view > svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .35s ease; }
.d-view .axes { position: absolute; left: 10px; bottom: 8px; font-size: 10px; color: #888; }
.d-status { background: var(--win); border-top: 1px solid var(--edge); padding: 4px 10px; font-size: 10.5px; color: #444; display: flex; justify-content: space-between; gap: 12px; white-space: nowrap; overflow: hidden; }
.d-status span:last-child { color: #777; }

/* Diálogos sobre a janela */
.d-layer { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.d-msg, .d-input, .d-html, .d-lo { animation: d-pop .22s ease both; box-shadow: 0 10px 30px rgba(0,0,0,.28); }
.d-msg, .d-input { background: #FFFFFF; border: 1px solid #A8A8A8; min-width: 260px; max-width: 78%; }
.d-msg header, .d-input header, .d-html > header { background: #FFFFFF; padding: 6px 10px; font-size: 11px; border-bottom: 1px solid #E3E3E3; display: flex; justify-content: space-between; }
.d-msg p { padding: 16px 16px 10px; font-size: 12px; }
.d-btns { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 12px 12px; background: #F3F3F3; border-top: 1px solid #E5E5E5; }
.d-btn { min-width: 64px; padding: 4px 10px; border: 1px solid #ADADAD; background: #E1E1E1; font-size: 11.5px; text-align: center; border-radius: 2px; transition: background .15s, transform .1s; }
.d-btn.def { border-color: #0078D7; }
.d-btn.press { background: #CCE4F7; border-color: #0078D7; transform: translateY(1px); }
.d-input .rows { padding: 14px 14px 6px; display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; align-items: center; font-size: 12px; }
.d-input .sel { border: 1px solid #ADADAD; padding: 3px 8px; background: #FFFFFF; display: flex; justify-content: space-between; min-width: 140px; }
.d-input .sel::after { content: "\25BE"; color: #555; margin-left: 10px; }
.d-input .sel.flash { background: #CCE4F7; }

/* Janela HTML do plugin (fiel à interface Oriva) */
.d-html { position: absolute; right: 3%; top: 17%; bottom: 7%; width: 40%; background: #F7F7F5; border: 1px solid #A8A8A8; display: flex; flex-direction: column; overflow: hidden; font-family: 'Sora', 'Segoe UI', Arial, sans-serif; }
.d-html .top { background: #00171F; color: #F2F4F3; padding: 9px 12px; display: flex; align-items: center; justify-content: space-between; }
.d-html .top img { height: 18px; }
.d-html .top span { font-size: 9.5px; opacity: .8; }
.d-html .pg { padding: 12px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; flex: 1; }
.d-html h4 { margin: 0; font: 400 15px/1.2 'Sora', sans-serif; color: #00171F; letter-spacing: -.01em; }
.d-html .sub { font-size: 10px; color: rgba(0,23,31,.7); }
.d-html .srch { display: flex; border: 1px solid rgba(0,23,31,.32); background: #FFFFFF; border-radius: 4px; font-size: 10px; }
.d-html .srch span { flex: 1; padding: 5px 8px; color: rgba(0,23,31,.5); }
.d-html .srch b { background: #00171F; color: #F2F4F3; font-weight: 500; padding: 5px 8px; border-radius: 0 3px 3px 0; }
.d-html .rule { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: rgba(0,23,31,.6); border-bottom: 1px solid rgba(0,23,31,.14); padding-bottom: 3px; }
.d-arches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 6px; }
.d-arch { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 8.5px; color: #00171F; transition: transform .15s; }
.d-arch i { width: 100%; aspect-ratio: 5 / 6; border-radius: 999px 999px 0 0; display: grid; place-items: center; }
.d-arch i svg { width: 46%; stroke: #F2F4F3; fill: none; stroke-width: 1.5; margin-top: 14%; }
.d-arch.press { transform: scale(.94); }
.d-arch.press i { box-shadow: 0 0 0 2px #2F6FD6; }
.t-ink { background: #00171F; } .t-granite { background: #3F5246; } .t-cordovan { background: #4C0025; } .t-slate { background: #5A7684; }
.d-opt { display: flex; align-items: center; gap: 8px; padding: 8px; background: #FFFFFF; border: 1px solid rgba(0,23,31,.14); border-radius: 4px; font-size: 10.5px; transition: border-color .15s; }
.d-opt small { display: block; font-size: 9px; color: rgba(0,23,31,.65); }
.d-opt.press { border-color: #2F6FD6; box-shadow: 0 0 0 2px rgba(47,111,214,.25); }
.d-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.d-blk { background: #FFFFFF; border: 1px solid rgba(0,23,31,.14); border-radius: 4px; padding: 6px 4px; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 8.5px; text-align: center; transition: border-color .15s; }
.d-blk svg { width: 60%; height: 34px; stroke: #00171F; fill: none; stroke-width: 1.3; }
.d-blk.press { border-color: #2F6FD6; box-shadow: 0 0 0 2px rgba(47,111,214,.25); }
.d-toast { position: absolute; left: 10px; right: 10px; bottom: 10px; background: #3F5246; color: #F2F4F3; padding: 7px 10px; font-size: 10px; border-radius: 4px; animation: d-pop .2s ease both; }
.d-tbl { width: 100%; border-collapse: collapse; font-size: 9.5px; background: #FFFFFF; }
.d-tbl th, .d-tbl td { border: 1px solid #DADADA; padding: 4px 6px; text-align: left; }
.d-tbl th { background: #EEF1F1; font-weight: 600; }
.d-tbl td.n { text-align: right; font-variant-numeric: tabular-nums; }
.d-pav { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 14px; text-align: center; font: 600 12px Arial, sans-serif; }
.d-pav .row2 { display: flex; gap: 8px; }
.d-pav b { background: #005F9E; color: #FFFFFF; font-weight: 400; padding: 7px 12px; font-size: 11px; transition: background .15s; }
.d-pav b.press { background: #009AD9; }

/* LayOut */
.d-lo { position: absolute; inset: 4%; background: #6E6E6E; border: 1px solid #555; display: flex; flex-direction: column; }
.d-lo > header { background: #FFFFFF; padding: 5px 10px; font-size: 11px; border-bottom: 1px solid #CCC; display: flex; justify-content: space-between; }
.d-lo .sheet { margin: auto; width: 86%; aspect-ratio: 420 / 297; background: #FFFFFF; position: relative; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.d-lo .sheet svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Botão para assistir (quando o sistema pede menos movimento) */
.d-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5; display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px; border: 0; border-radius: 999px; background: #00171F; color: #F2F4F3; font: 500 14px 'Poppins', 'Segoe UI', sans-serif;
  cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.d-play:hover { background: #3F5246; }
.d-play:focus-visible { outline: 3px solid #5A7684; outline-offset: 3px; }

@keyframes d-pop { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes d-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }