/* Studio de Reels: estilos da camada do vídeo (studio_camada.js). 1080x1920, áreas seguras do Reels: topo 250 px,
   base 340 px, laterais 90 px. Mesmo arquivo no editor (admin) e no render (motor). Sem animação CSS: o JS põe cada
   quadro no instante pedido. As cores e a fonte vêm da marca por variáveis --st-*. */
.st-palco {
  position: relative; width: 1080px; height: 1920px; overflow: hidden;
  font-family: var(--st-fonte, "Figtree", system-ui, sans-serif);
  -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision;
}
.st-palco * { box-sizing: border-box; }

/* textos da tela */
.st-texto {
  position: absolute; left: 90px; right: 90px; display: flex; justify-content: center; align-items: flex-start;
  transform-origin: 50% 0; will-change: transform, opacity; pointer-events: none;
}
.st-pos-topo { top: 300px; }
.st-pos-meio { top: 640px; height: 520px; align-items: center; transform-origin: 50% 50%; }
.st-pos-base { top: 960px; }
.st-corpo {
  max-width: 100%; text-align: center; line-height: 1.08; letter-spacing: -0.012em; font-weight: var(--st-peso, 800);
  overflow-wrap: break-word; hyphens: manual;
}
.st-corpo em { font-style: normal; }

.st-gancho .st-corpo {
  background: color-mix(in srgb, var(--st-tinta) 90%, transparent); color: #fff; padding: 28px 36px; border-radius: 30px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
}
.st-gancho .st-corpo em { color: var(--st-acento); }

.st-titulo .st-corpo {
  background: rgba(255, 255, 255, .95); color: var(--st-tinta); padding: 24px 32px; border-radius: 26px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .22);
}
.st-titulo .st-corpo em { color: var(--st-marca); }

.st-rotulo .st-corpo {
  background: var(--st-marca); color: var(--st-btn-texto, #fff); padding: 16px 30px; border-radius: 999px; font-weight: 800;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .22); line-height: 1.1;
}
.st-rotulo .st-corpo em { color: #fff; text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 8px; }

.st-lista .st-corpo {
  list-style: none; margin: 0; padding: 26px 34px; background: rgba(255, 255, 255, .96); color: var(--st-tinta);
  border-radius: 28px; text-align: left; box-shadow: 0 14px 40px rgba(0, 0, 0, .22);
}
.st-lista li { position: relative; padding-left: 1.25em; margin: .18em 0; }
.st-lista li::before {
  content: ""; position: absolute; left: 0; top: .32em; width: .62em; height: .62em; border-radius: 50%;
  background: var(--st-marca);
}
.st-lista li em { color: var(--st-marca); }

.st-numero .st-corpo {
  display: flex; flex-direction: column; align-items: center; gap: 10px; background: var(--st-marca); color: #fff;
  padding: 30px 46px 36px; border-radius: 34px; box-shadow: 0 18px 50px rgba(0, 0, 0, .3);
}
.st-numero b { font-weight: 800; line-height: .95; letter-spacing: -0.03em; white-space: nowrap; }
.st-numero span { font-size: 46px; font-weight: 700; line-height: 1.15; opacity: .96; }

.st-cta-estilo .st-corpo, .st-texto.st-cta .st-corpo {
  background: var(--st-marca); color: #fff; padding: 26px 36px; border-radius: 30px; font-weight: 800;
}

/* legenda palavra a palavra (mesmas medidas do corte.css) */
.st-leg { position: absolute; left: 90px; right: 90px; height: 280px; display: flex; justify-content: center; align-items: flex-start; }
.st-leg-grupo { text-align: center; line-height: 1.12; will-change: transform, opacity; }
.st-p {
  display: inline-block; font-weight: 800; font-size: 84px; color: #fff; padding: 0 12px; border-radius: 18px;
  -webkit-text-stroke: 3px rgba(0, 0, 0, .88); paint-order: stroke fill; text-shadow: 0 6px 24px rgba(0, 0, 0, .45);
}
.st-p.st-d { color: var(--st-acento); }
.st-p.st-ativa { background: var(--st-marca); color: #fff; -webkit-text-stroke: 0; text-shadow: none; }

/* transições */
.st-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.st-varredura { position: absolute; inset: 0; background: var(--st-marca); visibility: hidden; pointer-events: none; }

/* marca d'água */
.st-logo { position: absolute; top: 270px; width: 76px; height: 76px; object-fit: contain; opacity: .92;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .45)); }
.st-logo-topo-esq { left: 90px; }
.st-logo-topo-dir { right: 90px; }

/* cartão de CTA */
.st-cta {
  position: absolute; left: 90px; right: 90px; top: 600px; display: flex; flex-direction: column; align-items: center;
  gap: 40px; padding: 64px 56px 70px; border-radius: 44px; background: var(--st-marca); color: #fff; text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35); visibility: hidden; will-change: transform, opacity;
}
.st-cta-logo { height: 64px; max-width: 70%; object-fit: contain; }
.st-cta-chamada { font-weight: 800; line-height: 1.06; letter-spacing: -0.015em; width: 100%; }
.st-cta-chamada em { font-style: normal; color: var(--st-acento); }
.st-cta-pilula {
  background: #fff; color: var(--st-marca); border-radius: 999px; padding: 22px 44px; font-size: 46px; font-weight: 800;
  line-height: 1.1;
}
.st-cta-pilula em { font-style: normal; }

/* guias das áreas seguras (só no editor) */
.st-guia { position: absolute; pointer-events: none; }
.st-guia span {
  position: absolute; left: 50%; transform: translateX(-50%); font: 600 30px/1 system-ui, sans-serif; color: #fff;
  background: rgba(220, 38, 38, .85); padding: 8px 16px; border-radius: 10px; white-space: nowrap;
}
.st-guia-topo { left: 0; right: 0; top: 0; height: 250px; background: rgba(220, 38, 38, .16); border-bottom: 4px dashed rgba(220, 38, 38, .8); }
.st-guia-topo span { bottom: 14px; }
.st-guia-base { left: 0; right: 0; bottom: 0; height: 340px; background: rgba(220, 38, 38, .16); border-top: 4px dashed rgba(220, 38, 38, .8); }
.st-guia-base span { top: 14px; }
.st-guia-lado { top: 0; bottom: 0; left: 90px; right: 90px; border-left: 3px dashed rgba(220, 38, 38, .55); border-right: 3px dashed rgba(220, 38, 38, .55); }