:root{
  --W: 3240;
  --H: 1920;
  --COL: 1080;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html, body{
  width:100%;
  height:100%;
  background:#000;
  overflow:hidden;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* viewport */
.viewport{
  position:relative;
  width:100%;
  height:100%;
  background:#000;
  overflow:hidden;
}

/* canvas 3240×1920 — IMPORTANTÍSSIMO: não meter transform aqui */
.scale{
  position:absolute;
  top:50%;
  left:50%;
  width: calc(var(--W) * 1px);
  height: calc(var(--H) * 1px);
  background:#000;
  overflow:hidden;
}

/* stage */
.stage{
  width: calc(var(--W) * 1px);
  height: calc(var(--H) * 1px);
  display:flex;
  gap:0;
}

/* colunas */
.col{
  width: calc(var(--COL) * 1px);
  height: calc(var(--H) * 1px);
  flex: 0 0 calc(var(--COL) * 1px);
  position:relative;
  overflow:hidden;
  background:#000;
}

/* vídeos */
.col-video video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  background:#000;
}

/* painel central */
.col-panel{
  background:#0b0b0f;
}

.panel-iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  background:#0b0b0f;
}