/* Editor de Clipes — identidade própria: preto profundo, amarelo da tarja,
   nada de emoji fazendo papel de ícone. */

@font-face {
  font-family: "Montserrat ExtraBold";
  src: url("/fontes/Montserrat-ExtraBold.otf") format("opentype");
  font-weight: 800; font-display: block;
}
@font-face {
  font-family: "Poppins Medium";
  src: url("/fontes/Poppins-Medium.ttf") format("truetype");
  font-weight: 500; font-display: block;
}

:root {
  --preto: #0c0c10;
  --preto-2: #14141b;
  --preto-3: #1c1c26;
  --linha: #2a2a38;
  --texto: #ecedf2;
  --texto-2: #9a9bad;
  --amarelo: #fdda00;
  --amarelo-escuro: #c9ae00;
  --verde: #3ddc97;
  --vermelho: #ff5c5c;
  --raio: 16px;
  --sombra: 0 24px 60px rgba(0,0,0,.55);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
/* No iPhone a barra de endereço entra e sai, e 100% mede a tela SEM ela —
   o rodapé da página fica escondido atrás da barra. dvh mede o que está
   realmente visível agora. */
@supports (height: 100dvh) { html, body { height: 100dvh; } }
body {
  margin: 0; background: var(--preto); color: var(--texto);
  font-family: "Poppins Medium", ui-sans-serif, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased; overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* Pares de rótulo: um texto pra quem tem mouse, outro pra quem tem dedo. */
.so-toque, .rotulo-botao-curto { display: none; }
body::before {
  content: ""; position: fixed; inset: -20%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(45rem 30rem at 12% -8%, rgba(253,218,0,.10), transparent 60%),
    radial-gradient(40rem 28rem at 100% 108%, rgba(90,120,255,.10), transparent 62%);
  animation: respirar 18s ease-in-out infinite alternate;
}
@keyframes respirar { from { transform: scale(1) } to { transform: scale(1.08) } }

.fora-da-tela { position: absolute; width: 0; height: 0; }
.oculto { display: none !important; }
svg { width: 1em; height: 1em; fill: currentColor; }

.tela { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; }
.tela-centro { align-items: center; justify-content: center; }

/* ----------------------------------------------------------- topo */
.topo {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 26px; border-bottom: 1px solid var(--linha);
  background: rgba(12,12,16,.72); backdrop-filter: blur(14px);
}
.marca, .marca-login {
  display: flex; align-items: center; gap: 11px;
  font-family: "Montserrat ExtraBold", sans-serif; font-size: 16px;
  letter-spacing: -.2px; text-transform: uppercase;
}
.marca-pulso {
  width: 11px; height: 11px; border-radius: 3px; background: var(--amarelo);
  box-shadow: 0 0 0 0 rgba(253,218,0,.55); animation: pulso 2.6s ease-out infinite;
}
@keyframes pulso {
  0% { box-shadow: 0 0 0 0 rgba(253,218,0,.5) }
  70% { box-shadow: 0 0 0 12px rgba(253,218,0,0) }
  100% { box-shadow: 0 0 0 0 rgba(253,218,0,0) }
}
.topo-nota { color: var(--texto-2); font-size: 13px; }
.topo-acoes { display: flex; gap: 10px; }

/* ---------------------------------------------------------- botões */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: 12px; padding: 11px 18px;
  font: inherit; font-size: 14px; cursor: pointer; text-decoration: none;
  transition: transform .15s cubic-bezier(.2,.9,.3,1.3), background .18s, border-color .18s, opacity .18s;
}
.botao svg { font-size: 17px; }
.botao:active { transform: scale(.96); }
.botao.primario { background: var(--amarelo); color: #17170b; font-weight: 600; }
.botao.primario:hover { background: #ffe633; }
.botao.primario:disabled { background: var(--preto-3); color: var(--texto-2); cursor: default; }
.botao.fantasma { background: var(--preto-3); color: var(--texto); border-color: var(--linha); }
.botao.fantasma:hover { border-color: #3c3c50; background: #22222e; }

/* ---------------------------------------------------------- login */
.cartao-login {
  width: min(380px, 90vw); background: var(--preto-2); border: 1px solid var(--linha);
  border-radius: 22px; padding: 34px; box-shadow: var(--sombra);
  display: flex; flex-direction: column; gap: 14px;
  animation: subir .5s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes subir { from { opacity: 0; transform: translateY(18px) } to { opacity: 1; transform: none } }
.sub { margin: -6px 0 4px; color: var(--texto-2); font-size: 14px; }
input[type=password], input[type=text] {
  width: 100%; background: var(--preto-3); border: 1px solid var(--linha); color: var(--texto);
  border-radius: 12px; padding: 13px 15px; font: inherit; font-size: 14px; outline: none;
  transition: border-color .18s, box-shadow .18s;
}
input[type=password]:focus, input[type=text]:focus {
  border-color: var(--amarelo-escuro); box-shadow: 0 0 0 3px rgba(253,218,0,.14);
}
.erro { color: var(--vermelho); font-size: 13px; min-height: 18px; margin: 0; }

/* --------------------------------------------------------- upload */
.upload-area {
  flex: 1; display: grid; grid-template-columns: 1.25fr .9fr; gap: 26px;
  padding: 26px; align-items: center; justify-items: stretch; min-height: 0;
  max-width: 1200px; width: 100%; margin: 0 auto;
}
.alvo {
  min-height: min(460px, 60vh); max-height: 560px; align-self: center; width: 100%;
  position: relative; overflow: hidden; border-radius: 26px; cursor: pointer;
  border: 2px dashed var(--linha); background: linear-gradient(180deg, var(--preto-2), #101018);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  transition: border-color .2s, transform .2s, background .2s;
}
.alvo:hover, .alvo.sobre { border-color: var(--amarelo); transform: translateY(-2px); }
.alvo.sobre { background: linear-gradient(180deg, #16160f, #101018); }
.alvo-icone {
  width: 78px; height: 78px; border-radius: 22px; display: grid; place-items: center;
  background: var(--preto-3); border: 1px solid var(--linha); font-size: 34px; color: var(--amarelo);
  animation: flutuar 4.5s ease-in-out infinite;
}
@keyframes flutuar { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-7px) } }
.alvo-titulo { font-family: "Montserrat ExtraBold", sans-serif; font-size: 22px; }
.alvo-sub { color: var(--texto-2); font-size: 13px; }
.alvo-brilho {
  position: absolute; inset: auto -40% -60% -40%; height: 60%;
  background: radial-gradient(closest-side, rgba(253,218,0,.16), transparent);
  filter: blur(6px); pointer-events: none;
}
.opcoes-upload { display: flex; flex-direction: column; gap: 18px; overflow: auto; }
.bloco-opcao {
  background: var(--preto-2); border: 1px solid var(--linha); border-radius: 20px; padding: 18px;
}
.rotulo { font-size: 12px; text-transform: uppercase; letter-spacing: .9px; color: var(--texto-2); }
.rotulo-linha { display: flex; align-items: baseline; justify-content: space-between; }
.valor { font-size: 12px; color: var(--amarelo); }

/* --------------------------------------------------------- presets */
.presets { display: grid; gap: 10px; margin-top: 12px; }
.preset {
  display: flex; gap: 12px; align-items: center; text-align: left; cursor: pointer;
  background: var(--preto-3); border: 1px solid var(--linha); border-radius: 14px;
  padding: 12px; color: inherit; font: inherit; transition: border-color .18s, background .18s;
}
.preset:hover { border-color: #3c3c50; }
.preset.ativo { border-color: var(--amarelo); background: #1b1a10; }
.preset-arte { width: 44px; height: 70px; border-radius: 8px; flex: none; position: relative; overflow: hidden;
  background: linear-gradient(160deg, #3a3a48, #23232e); }
.preset-arte .barra { position: absolute; left: 6px; right: 6px; height: 11px; border-radius: 3px; }
.preset-arte .amarela { top: 8px; background: var(--amarelo); }
.preset-arte .branca { top: 22px; background: #fff; width: 22px; left: 6px; right: auto; }
.preset-arte .legenda { bottom: 16px; background: #fff; left: 10px; right: 10px; height: 7px; }
.preset-arte .colchete { position: absolute; left: 4px; top: 20px; width: 6px; height: 26px; border: 2px solid #fff; border-right: 0; }
.preset-nome { display: block; font-size: 14px; font-weight: 600; margin-bottom: 3px; }
.preset-desc { display: block; font-size: 12px; color: var(--texto-2); line-height: 1.35; }

/* ---------------------------------------------------------- chave */
.chave { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; margin-top: 12px; }
.chave input { display: none; }
.chave-pista {
  width: 44px; height: 26px; border-radius: 13px; background: var(--preto-3);
  border: 1px solid var(--linha); flex: none; position: relative; transition: background .2s, border-color .2s;
}
.chave-bola {
  position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--texto-2); transition: transform .22s cubic-bezier(.2,.9,.3,1.4), background .2s;
}
.chave input:checked + .chave-pista { background: #2e2a08; border-color: var(--amarelo-escuro); }
.chave input:checked + .chave-pista .chave-bola { transform: translateX(18px); background: var(--amarelo); }
.chave-texto strong { display: block; font-size: 14px; font-weight: 600; }
.chave-texto small { color: var(--texto-2); font-size: 12px; }
.chave.pequena { margin-top: 10px; }

/* ----------------------------------------------------- processando */
.cartao-processo {
  width: min(420px, 90vw); background: var(--preto-2); border: 1px solid var(--linha);
  border-radius: 24px; padding: 34px; text-align: center; box-shadow: var(--sombra);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  animation: subir .5s cubic-bezier(.2,.8,.3,1) both;
}
.anel { position: relative; width: 120px; height: 120px; margin-bottom: 6px; }
.anel svg { width: 120px; height: 120px; transform: rotate(-90deg); fill: none; }
.anel-fundo { stroke: var(--linha); stroke-width: 6; }
.anel-frente {
  stroke: var(--amarelo); stroke-width: 6; stroke-linecap: round;
  stroke-dasharray: 327; stroke-dashoffset: 250; animation: girar 1.5s linear infinite;
  transform-origin: 60px 60px;
}
@keyframes girar { to { transform: rotate(360deg) } }
.anel-icone { position: absolute; inset: 0; display: grid; place-items: center; font-size: 30px; color: var(--amarelo); }
.processo-titulo { font-family: "Montserrat ExtraBold", sans-serif; font-size: 19px; }
.processo-etapa { color: var(--texto-2); font-size: 13px; min-height: 20px; }
.passos { list-style: none; padding: 0; margin: 14px 0 6px; width: 100%; display: grid; gap: 7px; }
.passos li {
  display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--texto-2);
  background: var(--preto-3); border: 1px solid var(--linha); border-radius: 11px; padding: 9px 12px;
  transition: color .2s, border-color .2s;
}
.passos li::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--linha); flex: none;
}
.passos li.feito { color: var(--texto); }
.passos li.feito::before { background: var(--verde); }
.passos li.agora { color: var(--texto); border-color: var(--amarelo-escuro); }
.passos li.agora::before { background: var(--amarelo); animation: pisca 1.2s ease-in-out infinite; }
@keyframes pisca { 50% { opacity: .25 } }

/* --------------------------------------------------------- editor */
.palco-grade {
  flex: 1; display: grid; grid-template-columns: 1fr 380px; gap: 22px;
  padding: 22px 26px; min-height: 0;
}
.coluna-video { display: flex; flex-direction: column; align-items: center; gap: 14px; min-height: 0; }
.moldura {
  position: relative; flex: 1; min-height: 0; aspect-ratio: 9/16;
  border-radius: 22px; overflow: hidden; background: #000;
  border: 1px solid var(--linha); box-shadow: var(--sombra);
}
.moldura video, .moldura canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.moldura canvas.oculto { display: none !important; }
.moldura video { object-fit: cover; }
.marca-dagua {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  background: rgba(0,0,0,.5); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.12); color: #fff;
  font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase;
  padding: 5px 9px; border-radius: 7px;
}
.controles { display: flex; align-items: center; gap: 14px; width: min(100%, 520px); }
.botao-redondo {
  width: 46px; height: 46px; border-radius: 50%; flex: none; cursor: pointer;
  background: var(--amarelo); color: #17170b; border: 0; display: grid; place-items: center;
  font-size: 19px; transition: transform .15s cubic-bezier(.2,.9,.3,1.4);
}
.botao-redondo:active { transform: scale(.92); }
.linha-tempo {
  flex: 1; height: 6px; border-radius: 3px; background: var(--preto-3); position: relative; cursor: pointer;
}
.linha-preenchida { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--amarelo); border-radius: 3px; }
.linha-bola {
  position: absolute; top: 50%; left: 0; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; transform: translate(-50%,-50%); box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.tempo { font-size: 12px; color: var(--texto-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --------------------------------------------------------- painel */
.painel {
  background: var(--preto-2); border: 1px solid var(--linha); border-radius: 22px;
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
.abas { display: flex; border-bottom: 1px solid var(--linha); }
.aba {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: none; border: 0; border-bottom: 2px solid transparent; color: var(--texto-2);
  font: inherit; font-size: 13px; padding: 14px; cursor: pointer; transition: color .18s, border-color .18s;
}
.aba.ativa { color: var(--amarelo); border-bottom-color: var(--amarelo); }
.aba-conteudo { display: none; padding: 18px; overflow: auto; flex: 1; }
.aba-conteudo.ativa { display: block; animation: aparecer .25s ease both; }
@keyframes aparecer { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
.grupo { margin-bottom: 20px; }
.dica { color: var(--texto-2); font-size: 12px; line-height: 1.45; margin-top: 8px; }

input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; margin-top: 12px;
  border-radius: 3px; background: var(--preto-3); outline: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--amarelo); border: 3px solid var(--preto-2); cursor: grab;
  box-shadow: 0 2px 10px rgba(0,0,0,.5);
}
input[type=range]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; background: var(--amarelo);
  border: 3px solid var(--preto-2); cursor: grab;
}

/* -------------------------------------------------------- palavras */
.palavras { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.palavra {
  background: var(--preto-3); border: 1px solid var(--linha); border-radius: 9px;
  padding: 6px 9px; font-size: 13px; cursor: pointer; outline: none;
  transition: border-color .15s, background .15s, color .15s;
}
.palavra:hover { border-color: #3c3c50; }
.palavra.tocando { border-color: var(--amarelo); background: #241f05; color: var(--amarelo); }
.palavra.mexida { border-color: var(--verde); }
.palavra.vazia { opacity: .4; text-decoration: line-through; }
.palavra[contenteditable=true] { border-color: var(--amarelo); background: var(--preto); cursor: text; }
.atencao {
  display: flex; gap: 9px; align-items: flex-start; background: #241a05;
  border: 1px solid #5a4508; border-radius: 12px; padding: 11px 12px; font-size: 12.5px;
  color: #f3d98a; line-height: 1.45; margin-bottom: 8px;
}
.atencao svg { font-size: 15px; flex: none; margin-top: 1px; color: var(--amarelo); }

/* ------------------------------------------------------ render/fim */
.barra-render {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 5;
  background: rgba(20,20,27,.92); backdrop-filter: blur(14px);
  border: 1px solid var(--linha); border-radius: 16px; padding: 14px 20px;
  box-shadow: var(--sombra); animation: subir .35s ease both;
}
.render-info { display: flex; align-items: center; gap: 13px; }
.render-info strong { display: block; font-size: 14px; }
.render-info small { color: var(--texto-2); font-size: 12px; }
.render-giro {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  border: 3px solid var(--preto-3); border-top-color: var(--amarelo);
  animation: girar 0.9s linear infinite;
}
.pronto { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center;
  background: rgba(8,8,12,.78); backdrop-filter: blur(8px); }
.pronto-cartao {
  width: min(420px, 90vw); background: var(--preto-2); border: 1px solid var(--linha);
  border-radius: 24px; padding: 30px; text-align: center; box-shadow: var(--sombra);
  display: flex; flex-direction: column; gap: 12px; align-items: center;
  animation: subir .4s cubic-bezier(.2,.8,.3,1) both;
}
.pronto-check {
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(61,220,151,.12); color: var(--verde); font-size: 30px;
  animation: brotar .5s cubic-bezier(.2,.9,.3,1.5) both;
}
@keyframes brotar { from { transform: scale(.4); opacity: 0 } to { transform: none; opacity: 1 } }
.pronto-texto strong { display: block; font-family: "Montserrat ExtraBold", sans-serif; font-size: 19px; }
.pronto-texto small { color: var(--texto-2); font-size: 13px; }
.pronto .botao { width: 100%; }

.aviso {
  position: fixed; left: 50%; top: 22px; transform: translateX(-50%); z-index: 50;
  display: flex; align-items: center; gap: 10px; font-size: 13.5px;
  background: #2a1010; border: 1px solid #6a2020; color: #ffd4d4;
  padding: 12px 17px; border-radius: 13px; box-shadow: var(--sombra);
  animation: subir .3s ease both;
}
.aviso svg { color: var(--vermelho); font-size: 17px; }

/* ===================================================== telas estreitas

   Regra que manda daqui pra baixo: a prévia do vídeo NUNCA sai da tela no
   editor. Quem arrasta o slider de altura precisa ver a legenda subir no
   mesmo instante — prévia escondida é editor que não serve. Por isso a
   página não rola; quem rola é só o conteúdo da aba, embaixo.

   O bug que isso conserta: .moldura era `flex: 1; min-height: 0` com
   aspect-ratio. Numa coluna sem altura definida (o que acontece assim que
   a grade vira uma coluna só), isso colapsa pra 2x4 pixels — o vídeo
   sumia inteiro do celular. Agora a altura é dita, não herdada.        */

/* Notebook pequeno e tablet. */
@media (max-width: 1040px) {
  .palco-grade { grid-template-columns: 1fr; overflow: auto; }
  .coluna-video { flex: none; }
  .moldura { flex: none; height: min(58vh, 620px); width: auto; max-width: 100%; margin: 0 auto; }
  .painel { min-height: 340px; }
  .upload-area { grid-template-columns: 1fr; overflow: auto; }
  .alvo { min-height: 240px; }
}

/* Celular em pé. */
@media (max-width: 760px) {
  .so-mouse { display: none; }
  .so-toque { display: inline; }
  .rotulo-botao { display: none; }
  .rotulo-botao-curto { display: inline; }

  .topo {
    padding: 10px 14px; padding-top: max(10px, env(safe-area-inset-top));
    gap: 10px;
  }
  .marca { font-size: 13px; gap: 8px; flex: none; }
  .topo-nota { display: none; }
  .topo-acoes { margin-left: auto; flex: none; gap: 8px; }
  .botao { padding: 11px 15px; font-size: 13px; border-radius: 11px; }
  #botao-novo { padding: 11px 13px; }

  .palco-grade {
    display: flex; flex-direction: column; gap: 10px; overflow: hidden;
    padding: 10px 12px; padding-bottom: max(10px, env(safe-area-inset-bottom));
  }
  .coluna-video { flex: none; width: 100%; gap: 10px; }
  .moldura { height: min(50vh, 540px); border-radius: 16px; }

  .controles { width: 100%; gap: 11px; }
  .botao-redondo { width: 44px; height: 44px; font-size: 18px; }
  .linha-tempo { height: 8px; }
  /* alarga a área de toque da linha do tempo sem engordar o traço */
  .linha-tempo::after { content: ""; position: absolute; inset: -14px 0; }
  .linha-bola { width: 16px; height: 16px; }
  .tempo { font-size: 11px; }

  .painel { flex: 1 1 auto; min-height: 0; border-radius: 18px; }
  .aba { padding: 13px 8px; font-size: 13px; }
  .aba-conteudo { padding: 15px; -webkit-overflow-scrolling: touch; }
  .grupo { margin-bottom: 17px; }

  /* Abaixo de 16px o iOS dá zoom sozinho ao focar o campo. */
  input[type=password], input[type=text] { font-size: 16px; padding: 14px 15px; }

  /* Polegar é mais grosso que ponteiro. */
  input[type=range] { height: 8px; margin-top: 15px; }
  input[type=range]::-webkit-slider-thumb { width: 28px; height: 28px; border-width: 4px; }
  input[type=range]::-moz-range-thumb { width: 28px; height: 28px; border-width: 4px; }

  .preset { padding: 11px; gap: 11px; border-radius: 13px; }
  .preset-arte { width: 34px; height: 54px; }
  .preset-nome { font-size: 13.5px; }
  .preset-desc { font-size: 11.5px; }
  .palavra { padding: 8px 11px; font-size: 14px; }
  .chave-pista { width: 48px; height: 28px; border-radius: 14px; }
  .chave-bola { width: 20px; height: 20px; }
  .chave input:checked + .chave-pista .chave-bola { transform: translateX(20px); }

  .barra-render {
    left: 12px; right: 12px; transform: none; padding: 13px 16px;
    bottom: max(14px, env(safe-area-inset-bottom));
  }
  .pronto-cartao { padding: 26px 22px; border-radius: 20px; }

  .upload-area {
    padding: 14px 12px; padding-bottom: max(18px, env(safe-area-inset-bottom));
    gap: 14px; align-items: start; align-content: start;
  }
  .alvo { min-height: 170px; max-height: 210px; border-radius: 20px; }
  .chave-texto small { display: block; line-height: 1.4; margin-top: 2px; }
  .alvo-icone { width: 58px; height: 58px; border-radius: 17px; font-size: 26px; }
  .alvo-titulo { font-size: 18px; }
  .alvo-sub { font-size: 12px; text-align: center; padding: 0 18px; }
  .bloco-opcao { padding: 15px; border-radius: 17px; }
  .cartao-login { padding: 26px; border-radius: 20px; }
}

/* Celular curto (iPhone SE e parecidos, 667px de altura): com 50vh de prévia
   o painel virava uma fresta de 185px. Tira um pouco da prévia e devolve
   ao painel, que é onde a pessoa trabalha. */
@media (max-width: 760px) and (max-height: 740px) {
  .moldura { height: min(42vh, 430px); }
  .topo { padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: 8px; }
  .aba { padding: 11px 8px; }
  .grupo { margin-bottom: 14px; }
}

/* Tela muito baixa (celular deitado, janela espremida): o vídeo volta pro
   lado do painel, senão não sobra altura pra nenhum dos dois. */
@media (max-height: 560px) and (min-width: 560px) {
  .palco-grade {
    display: grid; grid-template-columns: 1fr minmax(290px, 42%);
    overflow: hidden; padding: 10px 12px; gap: 12px;
  }
  .coluna-video { flex: none; min-height: 0; }
  .moldura { height: calc(100% - 58px); width: auto; max-width: 100%; }
  .painel { min-height: 0; }
  .topo { padding: 8px 14px; }
}