/* Palco 3D — usado na abertura e na seção de corte.
   Estados: sem classe (sem JavaScript: mostra a foto ou o esquema), .is-loading, .is-live (3D ativo),
   .is-fallback (3D indisponível: mostra a foto real ou o esquema com aviso). */
.stage{position:relative;isolation:isolate;overflow:hidden;min-width:0;max-width:100%;color:var(--v3-white);outline:none}
.stage:focus-visible{box-shadow:inset 0 0 0 2px var(--v3-orange)}
.stage-gl-host{position:absolute;inset:0;z-index:0}
.stage-gl{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;
  opacity:0;transition:opacity .9s var(--ease)}
.stage.dragging .stage-gl{cursor:grabbing}
.stage.is-live .stage-gl{opacity:1}

/* reserva: foto real (abertura) ou esquema da chapa (corte) */
.stage-fallback{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;transition:opacity .6s var(--ease)}
.stage.is-live .stage-fallback,.stage.is-loading .stage-fallback{opacity:0;visibility:hidden}
.stage-note{position:absolute;left:16px;right:16px;bottom:16px;z-index:3;margin:0;max-width:30rem;padding:10px 14px;
  font-size:13.5px;line-height:1.4;color:#fff;background:rgba(10,11,13,.82);border-left:2px solid var(--v3-orange)}

/* carregamento */
.stage-load{position:absolute;inset:0;z-index:1;display:none;place-items:center;font:600 12.5px/1 var(--f-body);
  letter-spacing:.16em;text-transform:uppercase;color:var(--v3-mute)}
.stage.is-loading .stage-load{display:grid}
.stage-load::after{content:"";position:absolute;left:50%;top:calc(50% + 22px);width:120px;height:2px;translate:-50% 0;
  background:linear-gradient(90deg,transparent,var(--v3-orange),transparent);background-size:200% 100%;animation:loadbar 1.4s linear infinite}
@keyframes loadbar{from{background-position:100% 0}to{background-position:-100% 0}}

/* interface sobre o palco */
.stage-ui{position:absolute;inset:0;z-index:2;pointer-events:none}
.stage-ui>*{pointer-events:auto}
.stage-tag{position:absolute;left:16px;top:16px;display:inline-flex;align-items:center;gap:10px;margin:0;padding:8px 12px;
  font:600 11.5px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--v3-soft);
  background:rgba(10,11,13,.66);border:1px solid var(--v3-line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.stage-tag i{width:7px;height:7px;border-radius:50%;background:var(--v3-orange);box-shadow:0 0 0 3px rgba(239,106,44,.22)}
.stage.is-live .stage-tag i{animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(239,106,44,0)}}
.stage:not(.is-live) .live-only{display:none}

.ctl{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;padding:0 14px;
  border:1px solid rgba(255,255,255,.18);background:rgba(10,11,13,.66);color:#fff;font:600 14px/1 var(--f-body);cursor:pointer;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:border-color .2s,background-color .2s}
.ctl:hover{border-color:var(--v3-orange);background:rgba(239,106,44,.14)}
.ctl svg{width:16px;height:16px;flex:none}
.ctl .i-play{display:none}
.ctl[data-state="paused"] .i-play{display:block}
.ctl[data-state="paused"] .i-pause{display:none}
.stage-hint{display:inline-flex;align-items:center;gap:8px;font:500 13px/1.2 var(--f-body);color:var(--v3-mute);
  transition:opacity .5s var(--ease)}
.stage-hint svg{width:18px;height:18px;flex:none;color:var(--v3-orange)}
.stage.touched .stage-hint{opacity:0}

/* cantoneiras de enquadramento */
.stage-frame{position:absolute;inset:10px;z-index:1;pointer-events:none;
  background:
    linear-gradient(var(--fc),var(--fc)) top left/18px 1px no-repeat,linear-gradient(var(--fc),var(--fc)) top left/1px 18px no-repeat,
    linear-gradient(var(--fc),var(--fc)) top right/18px 1px no-repeat,linear-gradient(var(--fc),var(--fc)) top right/1px 18px no-repeat,
    linear-gradient(var(--fc),var(--fc)) bottom left/18px 1px no-repeat,linear-gradient(var(--fc),var(--fc)) bottom left/1px 18px no-repeat,
    linear-gradient(var(--fc),var(--fc)) bottom right/18px 1px no-repeat,linear-gradient(var(--fc),var(--fc)) bottom right/1px 18px no-repeat;
  --fc:rgba(255,255,255,.28)}

@media (prefers-reduced-motion: reduce){
  .stage-gl,.stage-fallback,.stage-hint{transition:none}
  .stage.is-live .stage-tag i,.stage-load::after{animation:none}
}

/* V5.1 — identificação da marca no palco 3D (permanece visível durante a rotação) */
.stage-brand{position:absolute;right:16px;top:16px;display:inline-flex;align-items:center;gap:10px;margin:0;padding:7px 12px 7px 9px;
  background:rgba(9,11,13,.7);border:1px solid rgba(255,255,255,.12);font:600 10.5px/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--c-soft,#C9CED5)}
.stage-brand img{width:58px;height:auto;-webkit-user-drag:none;user-select:none}
@media (max-width:700px){.stage-brand{top:auto;bottom:16px;right:12px;padding:5px 8px}.stage-brand img{width:44px}.stage-brand span{display:none}}