/* Frame Lab — sistema de design (tema escuro de estúdio) */
/* tokens em tokens.css */



*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg); color: var(--tx);
  font: 400 var(--t-md)/1.5 var(--f);
  min-height: 100vh; -webkit-font-smoothing: antialiased; font-feature-settings: 'ss01', 'cv11';
}
img, video { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
button:disabled { cursor: not-allowed; }
a { color: inherit; }
code { font-family: var(--f-mono); font-size: .9em; background: var(--bg-3); padding: 1px 6px; border-radius: 4px; }
b, strong { font-weight: 600; }
:focus { outline: none; }
:focus-visible { box-shadow: var(--foco); border-radius: var(--r-sm); }
::selection { background: rgba(139, 92, 246, .35); }
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--f-mono); }
.ico { width: 16px; height: 16px; flex: none; }

.pular { position: fixed; left: var(--e4); top: -60px; z-index: 100; background: var(--ac); color: var(--ac-tinta);
  padding: var(--e2) var(--e4); border-radius: var(--r-md); font-weight: 600; text-decoration: none; transition: top var(--trans); }
.pular:focus { top: var(--e2); }

/* ---------- topo ---------- */
.topo {
  position: sticky; top: 0; z-index: 30; height: var(--topo-h);
  display: flex; align-items: center; gap: var(--e6); padding: 0 var(--e5);
  background: rgba(5, 5, 10, .85); backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--linha);
}
.marca { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; letter-spacing: -.01em; text-decoration: none; }
.marca-ico { width: 20px; height: 20px; border-radius: 6px; background: var(--bg-3); border: 1px solid var(--linha-2); position: relative; }
.marca-ico::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: var(--ac); box-shadow: 0 0 10px rgba(139,92,246,.6); }
.nav { display: flex; gap: var(--e1); }
.nav a {
  text-decoration: none; color: var(--tx-2); padding: 6px 12px; border-radius: var(--r-md); font-weight: 500;
  transition: color var(--trans), background var(--trans);
}
.nav a:hover { color: var(--tx); background: var(--bg-2); }
.nav a.ativo { color: var(--tx); background: var(--bg-3); }
.topo-dir { margin-left: auto; display: flex; align-items: center; gap: var(--e3); }
.selo-sim {
  display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-xs); font-weight: 500; color: var(--alerta);
  padding: 3px 10px; border-radius: var(--r-full); background: var(--alerta-suave); border: 1px solid rgba(245,158,11,.25); cursor: default;
}
.selo-sim .ponto { width: 6px; height: 6px; border-radius: 50%; background: var(--alerta); }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  height: 36px; padding: 0 14px; border-radius: var(--r-md); border: 1px solid transparent;
  font-weight: 500; font-size: var(--t-md); white-space: nowrap; text-decoration: none; user-select: none;
  transition: background var(--trans), border-color var(--trans), color var(--trans), transform var(--trans), opacity var(--trans);
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .5; }
.btn-primario { background: var(--ac); color: var(--ac-tinta); font-weight: 600; }
.btn-primario:hover:not(:disabled) { background: var(--ac-hover); }
.btn-sec { background: var(--bg-2); border-color: var(--linha-2); color: var(--tx); }
.btn-sec:hover:not(:disabled) { background: var(--bg-3); border-color: #46465a; }
.btn-fantasma { color: var(--tx-2); }
.btn-fantasma:hover:not(:disabled) { color: var(--tx); background: var(--bg-2); }
.btn-perigo { background: var(--perigo); color: #2a0707; font-weight: 600; }
.btn-perigo:hover:not(:disabled) { background: #ff7a7a; }
.btn-escolhido { background: var(--ac-suave); border-color: var(--ac-linha); color: var(--ac); }
.btn-sm { height: 30px; padding: 0 10px; font-size: var(--t-sm); gap: 6px; }
.btn-bloco { width: 100%; }
.btn.enviando { opacity: .85; } /* não usar .carregando: é o indicador de página (padding 120px) */
.btn-icone {
  display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-md); color: var(--tx-2);
  transition: background var(--trans), color var(--trans);
}
.btn-icone.sm { width: 30px; height: 30px; }
.btn-icone:hover:not(:disabled) { background: var(--bg-3); color: var(--tx); }
.btn-icone:disabled { opacity: .35; }
.link {
  color: var(--ac); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(139,92,246,.35);
  text-underline-offset: 3px; font-size: inherit; padding: 0;
}
.link:hover { text-decoration-color: currentColor; }
.link-suave { color: var(--tx-2); text-decoration-color: var(--linha-2); }

.spinner {
  width: 14px; height: 14px; border-radius: 50%; flex: none;
  border: 2px solid currentColor; border-right-color: transparent; animation: girar .7s linear infinite; opacity: .8;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- tooltip ---------- */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip); display: none; position: absolute; z-index: 40; top: calc(100% + 6px); right: 0;
  width: max-content; max-width: 240px; padding: 6px 9px; border-radius: var(--r-sm);
  background: #2b2b38; color: var(--tx); font: 500 var(--t-xs)/1.4 var(--f); text-align: left; white-space: normal;
  box-shadow: 0 6px 20px rgba(0,0,0,.4); pointer-events: none;
}
[data-tip]:hover::after, [data-tip]:focus-visible::after { display: block; animation: surgir 120ms ease-out .25s both; }
.info[data-tip]::after { right: auto; left: 0; }
@keyframes surgir { from { opacity: 0; transform: translateY(-2px); } }
@media (hover: none) { [data-tip]:hover::after { display: none; } }

/* ---------- campos ---------- */
.input {
  width: 100%; background: var(--bg-2); border: 1px solid var(--linha-2); border-radius: var(--r-md);
  padding: 9px 12px; color: var(--tx); line-height: 1.5; transition: border-color var(--trans), box-shadow var(--trans), background var(--trans);
}
.input::placeholder { color: var(--tx-3); }
.input:hover { border-color: #46465a; }
.input:focus { border-color: var(--ac); box-shadow: 0 0 0 3px var(--ac-suave); background: var(--bg-1); }
.input[aria-invalid="true"] { border-color: var(--perigo); box-shadow: 0 0 0 3px var(--perigo-suave); }
textarea.input { resize: vertical; min-height: 84px; }
select.input { appearance: none; padding-right: 32px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 8l4 4 4-4' fill='none' stroke='%23a6a7ae' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 18px; }
fieldset { border: 0; min-width: 0; }
.campo { display: flex; flex-direction: column; gap: var(--e2); }
.campo > label, .campo > legend, .campo-topo > label, .campo-topo > span:first-child { font-weight: 500; font-size: var(--t-md); }
.campo > legend { margin-bottom: var(--e2); padding: 0; }
.campo-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); width: 100%; }
legend.campo-topo { justify-content: flex-start; }
.contador { font: 400 var(--t-xs) var(--f-mono); color: var(--tx-3); }
.rotulo { font-weight: 500; font-size: var(--t-sm); color: var(--tx-2); }
.ajuda { font-size: var(--t-sm); color: var(--tx-3); line-height: 1.5; }
.ajuda-alerta { color: var(--alerta); }
.erro-campo { font-size: var(--t-sm); color: var(--perigo); font-weight: 500; }
.info {
  display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; margin-left: 6px;
  border: 1px solid var(--linha-2); color: var(--tx-3); font: 600 11px/1 var(--f); vertical-align: middle;
}
.info:hover { color: var(--tx); border-color: var(--tx-3); }

/* chips e controles segmentados */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  height: 32px; padding: 0 12px; border-radius: var(--r-full); font-size: var(--t-sm); font-weight: 500;
  background: var(--bg-2); border: 1px solid var(--linha-2); color: var(--tx-2);
  transition: background var(--trans), border-color var(--trans), color var(--trans);
}
.chip:hover { color: var(--tx); border-color: #46465a; }
.chip[aria-pressed="true"] { background: var(--ac-suave); border-color: var(--ac-linha); color: var(--ac); }
.seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--bg-2); border: 1px solid var(--linha-2); border-radius: var(--r-md); }
.seg button {
  height: 28px; padding: 0 12px; border-radius: 5px; color: var(--tx-2); font-weight: 500; font-size: var(--t-sm);
  font-variant-numeric: tabular-nums; transition: background var(--trans), color var(--trans); white-space: nowrap;
}
.seg button:hover { color: var(--tx); }
.seg button[aria-pressed="true"] { background: var(--bg-4); color: var(--tx); box-shadow: 0 1px 2px rgba(0,0,0,.4); }
.seg-sm button { height: 24px; padding: 0 10px; }
.seg-n { color: var(--tx-3); font-family: var(--f-mono); font-size: var(--t-xs); margin-left: 4px; }

.exemplos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.exemplos > span { font-size: var(--t-xs); color: var(--tx-3); margin-right: 2px; }
.chip-ex {
  height: 26px; padding: 0 10px; border-radius: var(--r-full); font-size: var(--t-xs); color: var(--tx-2);
  border: 1px dashed var(--linha-2); transition: color var(--trans), border-color var(--trans), background var(--trans);
}
.chip-ex:hover { color: var(--tx); border-color: var(--tx-3); border-style: solid; background: var(--bg-2); }

.aviso-inline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: var(--t-sm); color: var(--tx-2);
  padding: 8px 12px; border-left: 2px solid var(--alerta); background: var(--alerta-suave); border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.aviso-acoes { display: inline-flex; gap: 12px; }

.tag { font-size: 11px; font-weight: 500; padding: 1px 7px; border-radius: var(--r-full); background: var(--bg-3); color: var(--tx-2); }
.tag-real { background: var(--ok-suave); color: var(--ok); }
.pill {
  display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-xs); font-weight: 500; white-space: nowrap;
  padding: 2px 8px; border-radius: var(--r-full); background: var(--bg-3); color: var(--tx-2);
}
.pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-frame { background: var(--info-suave); color: var(--info); }
.pill-animada { background: var(--ok-suave); color: var(--ok); }

/* ---------- páginas ---------- */
main { outline: none; transition: padding var(--trans); }
.pagina { max-width: 1200px; margin: 0 auto; padding: var(--e8) var(--e5) 96px; }
.pag-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e4); flex-wrap: wrap; margin-bottom: var(--e6); }
.pag-topo-acoes { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
h1 { font-size: var(--t-2xl); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.pag-sub { color: var(--tx-2); margin-top: var(--e1); }
.carregando { display: flex; gap: 6px; justify-content: center; padding: 120px 0; }
.carregando span { width: 6px; height: 6px; border-radius: 50%; background: var(--tx-3); animation: pulsar 1s infinite ease-in-out; }
.carregando span:nth-child(2) { animation-delay: .15s; } .carregando span:nth-child(3) { animation-delay: .3s; }
@keyframes pulsar { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* estados vazios que ensinam */
.vazio { text-align: center; color: var(--tx-2); padding: var(--e10) var(--e5); display: flex; flex-direction: column; align-items: center; gap: var(--e3); }
.vazio h2 { color: var(--tx); font-size: var(--t-xl); font-weight: 600; letter-spacing: -.01em; }
.vazio p { max-width: 460px; }
.vazio-ico { width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--r-lg); background: var(--bg-2); border: 1px solid var(--linha-2); color: var(--ac); }
.vazio-ico .ico { width: 24px; height: 24px; }
.vazio-hero { border: 1px dashed var(--linha-2); border-radius: var(--r-xl); padding: 56px var(--e5); background: var(--bg-1); }
.vazio-acoes { display: flex; flex-wrap: wrap; gap: var(--e2); justify-content: center; margin-top: var(--e2); }
.passos-vazio { list-style: none; counter-reset: p; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e3); max-width: 720px; width: 100%; margin: var(--e3) 0; text-align: left; }
.passos-vazio li { counter-increment: p; background: var(--bg-2); border: 1px solid var(--linha); border-radius: var(--r-lg); padding: var(--e4); display: flex; flex-direction: column; gap: 2px; }
.passos-vazio li::before { content: counter(p, decimal-leading-zero); font: 500 var(--t-xs) var(--f-mono); color: var(--ac); margin-bottom: 6px; }
.passos-vazio b { color: var(--tx); }
.passos-vazio span { font-size: var(--t-sm); color: var(--tx-3); }

/* ---------- projetos ---------- */
.grade-projetos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--e4); }
.card-projeto {
  position: relative; background: var(--bg-1); border: 1px solid var(--linha); border-radius: var(--r-lg);
  transition: border-color var(--trans), transform var(--trans);
}
.card-projeto:hover { border-color: var(--linha-2); }
.card-projeto:focus-within { border-color: var(--linha-2); }
.cp-capa { display: block; aspect-ratio: 16 / 10; background: var(--bg-2); border-radius: var(--r-lg) var(--r-lg) 0 0; overflow: hidden; position: relative; }
.cp-capa img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.card-projeto:hover .cp-capa img { transform: scale(1.03); }
.cp-vazio { position: absolute; inset: 0; display: grid; place-items: center; color: var(--tx-3); }
.cp-vazio .ico { width: 28px; height: 28px; }
.cp-fmt { position: absolute; left: 10px; top: 10px; font: 500 11px var(--f-mono); padding: 2px 6px; border-radius: 4px; background: rgba(0,0,0,.6); color: var(--tx-2); }
.cp-info { padding: var(--e3) var(--e4) var(--e4); display: flex; flex-direction: column; gap: 6px; }
.cp-nome { font-size: 15px; font-weight: 600; letter-spacing: -.01em; padding-right: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-nome a { text-decoration: none; }
.cp-nome a::before { content: ''; position: absolute; inset: 0; border-radius: var(--r-lg); } /* card inteiro clicável */
.cp-nome a:focus-visible { box-shadow: none; }
.cp-nome a:focus-visible::before { box-shadow: var(--foco); }
.cp-meta { font-size: var(--t-sm); color: var(--tx-3); }
.cp-acoes { position: absolute; right: 8px; bottom: 48px; display: flex; gap: 2px; z-index: 1; }
.barra-status { display: flex; gap: 2px; height: 4px; border-radius: 2px; overflow: hidden; background: var(--bg-3); margin-top: 4px; }
.barra-status.vazia { background: var(--bg-3); }
.bs-animada { background: var(--ok); } .bs-frame { background: var(--info); } .bs-rascunho { background: var(--bg-4); }

/* ---------- estúdio (projeto) ---------- */
.estudio { max-width: 1520px; margin: 0 auto; }
.proj-barra {
  display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; padding: var(--e3) var(--e5);
  border-bottom: 1px solid var(--linha);
}
.voltar { display: inline-flex; align-items: center; gap: 6px; color: var(--tx-2); text-decoration: none; font-size: var(--t-sm); padding: 6px 8px; margin-left: -8px; border-radius: var(--r-md); }
.voltar:hover { color: var(--tx); background: var(--bg-2); }
.proj-nome {
  flex: 1 1 200px; min-width: 0; background: transparent; border: 1px solid transparent; border-radius: var(--r-md);
  font-size: var(--t-xl); font-weight: 600; letter-spacing: -.015em; padding: 4px 8px; text-overflow: ellipsis;
}
.proj-nome:hover { border-color: var(--linha-2); }
.proj-nome:focus { border-color: var(--ac); background: var(--bg-1); }
.proj-opcoes { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.select-inline select {
  appearance: none; height: 36px; padding: 0 32px 0 12px; border-radius: var(--r-md); background: var(--bg-2); border: 1px solid var(--linha-2);
  font-size: var(--t-sm); font-weight: 500; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 8l4 4 4-4' fill='none' stroke='%23a6a7ae' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 18px;
}
.select-inline select:hover { border-color: #46465a; }
.select-inline select:focus-visible { box-shadow: var(--foco); }
.proj-progresso { display: flex; flex-direction: column; gap: 4px; min-width: 120px; }
.pp-txt { font-size: var(--t-xs); color: var(--tx-3); font-variant-numeric: tabular-nums; }
.pp-txt b { color: var(--tx); }
.proj-progresso .barra-status { margin: 0; }

.estudio-corpo { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: calc(100vh - var(--topo-h) - 61px); }

/* Editor (cenas/montagem): trava a página — só painéis internos rolam */
body.modo-editor { height: 100%; overflow: hidden !important; }
body.modo-editor #conteudo { height: calc(100vh - var(--topo-h)); overflow: hidden; }
body.modo-editor .estudio {
  max-width: none; height: 100%; display: flex; flex-direction: column; overflow: hidden;
}
body.modo-editor .estudio .proj-barra,
body.modo-editor .estudio #proxPasso { flex: none; }
body.modo-editor .estudio #estudioVista {
  flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
}
body.modo-editor:not(.modo-montagem) .estudio-corpo {
  flex: 1; min-height: 0; height: 100%; overflow: hidden; grid-template-rows: minmax(0, 1fr);
}
body.modo-editor:not(.modo-montagem) .storyboard {
  position: static; max-height: none; height: 100%; min-height: 0;
}
body.modo-editor:not(.modo-montagem) .area-cena {
  min-height: 0; overflow: hidden; display: flex; flex-direction: column;
  padding: 12px var(--e4) 0;
}
body.modo-editor:not(.modo-montagem) .cena-topo { margin-bottom: 8px; }
body.modo-editor:not(.modo-montagem) .abas { margin-bottom: 12px; }
body.modo-editor:not(.modo-montagem) .cena-topo,
body.modo-editor:not(.modo-montagem) .abas { flex: none; }
body.modo-editor:not(.modo-montagem) .painel {
  flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column;
}
body.modo-editor:not(.modo-montagem) .bancada {
  flex: 1; min-height: 0; height: 100%; align-items: stretch; overflow: hidden; gap: var(--e4);
}
body.modo-editor:not(.modo-montagem) .ficha {
  min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 0;
}
body.modo-editor:not(.modo-montagem) .ficha-corpo {
  flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 14px; padding-bottom: 8px;
}
body.modo-editor:not(.modo-montagem) .tomadas {
  position: static; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
}
body.modo-editor .passo-faixa.passo-editando { padding-block: 8px; }
body.modo-editor .passo-faixa.passo-editando.recolhida .passo-agora { display: none; }

/* storyboard */
.storyboard {
  border-right: 1px solid var(--linha); display: flex; flex-direction: column;
  position: sticky; top: var(--topo-h); align-self: start; max-height: calc(100vh - var(--topo-h));
}
.sb-topo { display: flex; align-items: center; gap: var(--e2); padding: var(--e4) var(--e4) var(--e2); }
.sb-topo h2 { font-size: var(--t-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--tx-3); }
.sb-lista { list-style: none; overflow-y: auto; padding: var(--e1) var(--e2); display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; }
.sb-item { position: relative; }
.sb-sel {
  width: 100%; display: grid; grid-template-columns: 22px 48px minmax(0, 1fr); gap: 10px; align-items: center; text-align: left;
  padding: 8px; border-radius: var(--r-md); border: 1px solid transparent; transition: background var(--trans), border-color var(--trans);
}
.sb-sel:hover { background: var(--bg-2); }
.sb-item.ativo .sb-sel { background: var(--bg-2); border-color: var(--linha-2); }
.sb-item.ativo .sb-sel::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: var(--ac); }
.sb-num { font: 500 var(--t-xs) var(--f-mono); color: var(--tx-3); }
.sb-item.ativo .sb-num { color: var(--ac); }
.sb-thumb { position: relative; width: 48px; height: 48px; border-radius: var(--r-sm); background: var(--bg-3); overflow: hidden; display: grid; place-items: center; }
.sb-thumb img, .sb-thumb video { width: 100%; height: 100%; object-fit: cover; }
.sb-thumb-vazio { color: var(--tx-3); }
.sb-play { position: absolute; right: 3px; bottom: 3px; width: 16px; height: 16px; border-radius: 50%; background: rgba(0,0,0,.7); display: grid; place-items: center; }
.sb-play .ico { width: 10px; height: 10px; }
.sb-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.sb-rotulo { font-size: var(--t-sm); color: var(--tx); width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.35; }
.sb-gerando { display: none; position: absolute; right: 10px; top: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--ac); animation: pulsar 1.2s infinite; }
.sb-item.gerando .sb-gerando { display: block; }
.sb-vazio { color: var(--tx-3); font-size: var(--t-sm); padding: var(--e3) var(--e2); }
.sb-acoes { padding: var(--e3) var(--e3) var(--e4); display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--linha); }

/* área da cena */
.area-cena { container-type: inline-size; min-width: 0; padding: var(--e5) var(--e6) 96px; }
.cena-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); flex-wrap: wrap; margin-bottom: var(--e4); }
.cena-id { display: flex; align-items: center; gap: var(--e2); min-width: 0; flex: 1 1 260px; }
.cena-num { font: 500 var(--t-sm) var(--f-mono); color: var(--ac); white-space: nowrap; }
.cena-titulo {
  flex: 1; min-width: 0; background: transparent; border: 1px solid transparent; border-radius: var(--r-md);
  font-size: var(--t-lg); font-weight: 600; padding: 4px 8px; letter-spacing: -.01em;
}
.cena-titulo::placeholder { color: var(--tx-3); font-weight: 500; }
.cena-titulo:hover { border-color: var(--linha-2); }
.cena-titulo:focus { border-color: var(--ac); background: var(--bg-1); }
.cena-topo-dir { display: flex; align-items: center; gap: var(--e3); }
.salvo { font-size: var(--t-xs); color: var(--tx-3); min-width: 56px; text-align: right; }
.salvo.erro { color: var(--perigo); }
.grupo-icones { display: flex; gap: 2px; padding-left: var(--e2); border-left: 1px solid var(--linha); }

/* abas de etapa */
.abas { display: flex; align-items: center; gap: var(--e2); border-bottom: 1px solid var(--linha); margin-bottom: var(--e5); }
.abas [role=tab] {
  display: inline-flex; align-items: center; gap: var(--e2); padding: 10px 4px 12px; margin-bottom: -1px;
  color: var(--tx-2); font-weight: 500; border-bottom: 2px solid transparent; border-radius: 0; transition: color var(--trans), border-color var(--trans);
}
.abas [role=tab]:hover { color: var(--tx); }
.abas [role=tab][aria-selected="true"] { color: var(--tx); border-bottom-color: var(--ac); }
.abas [role=tab]:focus-visible { border-radius: var(--r-sm); }
.aba-num {
  width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center;
  font: 500 11px var(--f-mono); background: var(--bg-3); color: var(--tx-2);
}
[aria-selected="true"] .aba-num { background: var(--ac); color: var(--ac-tinta); }
.feito .aba-num { background: var(--ok-suave); color: var(--ok); }
[aria-selected="true"].feito .aba-num { background: var(--ac); color: var(--ac-tinta); }
.aba-info { font: 500 11px var(--f-mono); color: var(--tx-3); }
.aba-info:empty { display: none; }
.aba-info::before { content: '· '; }
.aba-seta { color: var(--linha-2); display: inline-flex; }

/* bancada: ficha (formulário) + tomadas */
.bancada { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e6); align-items: start; }
@container (min-width: 780px) {
  .bancada { grid-template-columns: minmax(340px, 440px) minmax(0, 1fr); gap: var(--e8); }
  .tomadas { position: sticky; top: calc(var(--topo-h) + 16px); }
}
.ficha { display: flex; flex-direction: column; gap: var(--e4); min-width: 0; }
.ficha-corpo { display: flex; flex-direction: column; gap: var(--e4); min-width: 0; }

.campo-estetica { gap: 6px; }
.estetica-linha { display: flex; align-items: center; gap: 10px; }
.est-swatch {
  width: 28px; height: 28px; border-radius: 8px; flex: none;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 70%, #fff), var(--c) 55%, color-mix(in srgb, var(--c) 55%, #000));
  border: 1px solid var(--linha-2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.estetica-linha .input, .estetica-linha select {
  flex: 1; min-width: 0; height: 40px; padding: 0 12px;
  border-radius: var(--r-md); background: var(--bg-1); border: 1px solid var(--linha-2);
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 8l4 4 4-4' fill='none' stroke='%23a6a7ae' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; padding-right: 32px;
}
.campo-linha { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); flex-wrap: wrap; }
.campo-linha .ajuda { margin: 0; }
.grade-esteticas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.estetica {
  text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--r-md);
  background: var(--bg-1); border: 1px solid var(--linha); transition: border-color var(--trans), background var(--trans);
}
.estetica:hover { border-color: var(--linha-2); background: var(--bg-2); }
.estetica[aria-pressed="true"] { border-color: var(--ac-linha); background: var(--ac-suave); }
.est-nome { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: var(--t-sm); }
.est-nome i { width: 8px; height: 8px; border-radius: 2px; background: var(--c); flex: none; }
.est-desc { font-size: var(--t-xs); color: var(--tx-3); padding-left: 16px; }
.est-tags { display: flex; gap: 4px; padding-left: 16px; margin-top: 2px; flex-wrap: wrap; }
.est-tags:empty { display: none; }

/* seções recolhíveis */
.dobra { border: 1px solid var(--linha); border-radius: var(--r-lg); background: var(--bg-1); }
.dobra summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--e2);
  padding: 12px 14px; font-weight: 500; border-radius: var(--r-lg);
}
.dobra summary::-webkit-details-marker { display: none; }
.dobra summary::after {
  content: ''; width: 8px; height: 8px; border-right: 1.5px solid var(--tx-3); border-bottom: 1.5px solid var(--tx-3);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--trans); margin-left: var(--e2);
}
.dobra[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.dobra summary:hover { background: var(--bg-2); }
.dobra summary > span:first-child { flex: 1; }
.opcional { font-size: var(--t-xs); color: var(--tx-3); font-weight: 400; }
.dobra-corpo { padding: 2px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.dobra-sm { background: transparent; }

.refs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }
.ref { position: relative; width: 56px; height: 56px; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--linha-2); }
.ref img { width: 100%; height: 100%; object-fit: cover; }
.ref-x { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 50%; background: rgba(0,0,0,.75); display: grid; place-items: center; color: #fff; }
.ref-x .ico { width: 12px; height: 12px; }

.ficha-rodape {
  position: sticky; bottom: 0; z-index: 5; flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: var(--e3); flex-wrap: wrap;
  padding: 12px 0 14px; margin-top: auto;
  background: linear-gradient(to bottom, transparent, var(--bg) 22%); border-top: 1px solid var(--linha);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.versoes { display: flex; align-items: center; gap: var(--e2); font-size: var(--t-sm); color: var(--tx-2); }
.acao-final { display: flex; align-items: center; gap: var(--e3); margin-left: auto; }
.custo { font: 500 var(--t-sm) var(--f-mono); color: var(--tx-2); }

.campo-duplo { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--e4); }

.frame-escolhido { display: flex; gap: var(--e3); align-items: center; padding: 10px; border: 1px solid var(--linha); border-radius: var(--r-lg); background: var(--bg-1); }
.fe-midia { width: 64px; flex: none; border-radius: var(--r-sm); overflow: hidden; background: var(--bg-3); }
.fe-midia img { width: 100%; height: 100%; object-fit: cover; }
.fe-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: var(--t-sm); color: var(--tx-2); }

/* tomadas */
.tomadas { display: flex; flex-direction: column; gap: var(--e3); min-width: 0; }
.tomadas-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e3); }
.tomadas-topo h3 { font-size: var(--t-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--tx-3); margin-bottom: 2px; }
.cta-animar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e3); flex-wrap: wrap;
  padding: 10px 12px 10px 14px; border-radius: var(--r-lg); background: var(--bg-1); border: 1px solid var(--linha); font-size: var(--t-sm); color: var(--tx-2);
}
.cta-animar[hidden] { display: none; }
.cta-proximo { margin-bottom: var(--e3); border-color: var(--ac-linha); }
.cta-proximo b { color: var(--tx); }
.cta-acoes { display: flex; flex-wrap: wrap; gap: var(--e2); }
.grade-tomadas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--e3); }
.grade-tomadas.g-fmt-16x9 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.grade-tomadas.g-fmt-1x1 { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.grade-tomadas > .vazio { grid-column: 1 / -1; }
.tomada { position: relative; display: flex; flex-direction: column; border-radius: var(--r-lg); background: var(--bg-1); border: 1px solid var(--linha); transition: border-color var(--trans); }
.tomada:hover { border-color: var(--linha-2); }
.tomada.escolhida { border-color: var(--ac-linha); box-shadow: 0 0 0 1px var(--ac-linha); }
.tomada-midia { position: relative; display: block; width: 100%; overflow: hidden; border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0; background: var(--bg-2); cursor: zoom-in; }
.tomada-midia img, .tomada-midia video { width: 100%; height: 100%; object-fit: cover; }
.tomada.pendente .tomada-midia { cursor: default; border-radius: calc(var(--r-lg) - 1px); }
.fmt-9x16 .tomada-midia, .fmt-9x16.bib-midia, .fe-midia.fmt-9x16, .escolha.fmt-9x16 { aspect-ratio: 9 / 16; }
.fmt-1x1 .tomada-midia, .fmt-1x1.bib-midia, .fe-midia.fmt-1x1, .escolha.fmt-1x1 { aspect-ratio: 1; }
.fmt-16x9 .tomada-midia, .fmt-16x9.bib-midia, .fe-midia.fmt-16x9, .escolha.fmt-16x9 { aspect-ratio: 16 / 9; }
.tomada-rodape { display: flex; align-items: center; gap: 2px; padding: 4px 6px 6px; flex-wrap: wrap; }
.tomada-rodape .btn { order: 2; width: 100%; margin-top: 2px; }
.tomada-meta { flex: 1; min-width: 0; font-size: 11px; color: var(--tx-3); padding-left: 4px; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selo-escolha {
  position: absolute; left: 8px; top: 8px; display: inline-flex; align-items: center; gap: 4px; pointer-events: none;
  font-size: 11px; font-weight: 600; padding: 3px 8px 3px 6px; border-radius: var(--r-full); background: var(--ac); color: var(--ac-tinta);
}
.selo-escolha .ico { width: 12px; height: 12px; }
.selo-canto { position: absolute; right: 8px; top: 8px; font-size: 10px; font-weight: 500; padding: 2px 6px; border-radius: 4px; background: rgba(0,0,0,.65); color: var(--alerta); }
.shimmer { position: absolute; inset: 0; background: linear-gradient(100deg, var(--bg-2) 30%, var(--bg-3) 50%, var(--bg-2) 70%); background-size: 300% 100%; animation: brilho 1.6s linear infinite; }
@keyframes brilho { from { background-position: 100% 0; } to { background-position: -50% 0; } }
.job-info { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-size: var(--t-sm); color: var(--tx-2); text-align: center; padding: var(--e3); }
.job-info .spinner { color: var(--ac); width: 18px; height: 18px; }
.job-tempo { font-family: var(--f-mono); font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
.job-info small { color: var(--tx-3); font-size: 11px; }
.vazio-tomadas { border: 1px dashed var(--linha-2); border-radius: var(--r-lg); padding: var(--e8) var(--e5); gap: 4px; font-size: var(--t-sm); }
.vazio-tomadas b { color: var(--tx); }
.vazio-cenas, .vazio-painel { padding-top: 72px; }
.vazio-cenas { max-width: 520px; margin: 0 auto; text-align: left; align-items: stretch; }
.vazio-cenas h2 { text-align: left; }
.vazio-lead { color: var(--tx-2); font-size: var(--t-md); margin: 0 0 var(--e5); line-height: 1.45; }
.comece-caminhos { display: flex; flex-direction: column; gap: 10px; margin-bottom: var(--e5); }
.caminho {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) 20px; gap: 12px; align-items: center;
  width: 100%; text-align: left; padding: 14px 16px; border-radius: var(--r-lg);
  border: 1px solid var(--linha-2); background: var(--bg-1); color: var(--tx);
  transition: border-color var(--trans), background var(--trans), transform var(--trans);
}
.caminho:hover { border-color: var(--ac-linha); background: var(--bg-2); }
.caminho:active { transform: scale(.995); }
.caminho-primario { border-color: var(--ac-linha); background: var(--ac-suave); }
.caminho-primario:hover { border-color: var(--ac); background: color-mix(in srgb, var(--ac-suave) 70%, var(--bg-2)); }
.cam-ico { width: 40px; height: 40px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--bg-3); color: var(--tx-2); }
.caminho-primario .cam-ico { background: var(--ac); color: var(--ac-tinta); }
.cam-ico .ico { width: 20px; height: 20px; }
.cam-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cam-txt b { font-size: var(--t-md); font-weight: 600; letter-spacing: -.01em; }
.cam-txt span { font-size: var(--t-sm); color: var(--tx-3); line-height: 1.4; }
.cam-seta { color: var(--tx-3); }
.caminho:hover .cam-seta { color: var(--ac); }
.vazio-cenas .link { align-self: flex-start; }
/* Sem cenas: some a lateral — o centro é o único lugar com ações.
   Precisa resetar as colunas do grid: com display:none no storyboard,
   o area-cena cairia sozinho na faixa de 272px. */
.estudio-corpo.sem-cenas { grid-template-columns: minmax(0, 1fr); }
.estudio-corpo.sem-cenas .storyboard { display: none; }
.estudio-corpo.sem-cenas .area-cena { width: 100%; max-width: 640px; margin: 0 auto; }

.kenburns { animation: kenburns 8s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.12) translate(-2%, -2%); } }

/* ---------- biblioteca ---------- */
.grade-bib { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--e3); align-items: start; }
.card-bib { background: var(--bg-1); border: 1px solid var(--linha); border-radius: var(--r-lg); transition: border-color var(--trans); }
.card-bib:hover { border-color: var(--linha-2); }
.bib-midia { position: relative; display: block; width: 100%; overflow: hidden; border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0; background: var(--bg-2); cursor: zoom-in; }
.bib-midia img, .bib-midia video { width: 100%; height: 100%; object-fit: cover; }
.selo-tipo { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; font: 500 11px var(--f-mono); padding: 3px 7px; border-radius: 4px; background: rgba(0,0,0,.7); color: var(--tx); }
.selo-tipo .ico { width: 12px; height: 12px; }
.bib-rodape { display: flex; align-items: center; gap: 2px; padding: 8px 6px 8px 12px; }
.bib-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bib-proj { font-size: var(--t-sm); font-weight: 500; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bib-proj:hover { color: var(--ac); }
.bib-proj.sem { color: var(--tx-3); font-weight: 400; }
.bib-data { font-size: 11px; color: var(--tx-3); }

/* ---------- guia (painel lateral) ---------- */
.gaveta {
  position: fixed; z-index: 25; top: var(--topo-h); right: 0; bottom: 0; width: var(--guia-w); max-width: 100%;
  display: flex; flex-direction: column; background: var(--bg-1); border-left: 1px solid var(--linha);
  transform: translateX(100%); transition: transform 220ms cubic-bezier(.2, .7, .3, 1), box-shadow 220ms;
}
.gaveta.aberta { transform: none; box-shadow: -24px 0 48px rgba(0,0,0,.35); }
@media (min-width: 1360px) {
  body.guia-aberta main { padding-right: var(--guia-w); }
  .gaveta.aberta { box-shadow: none; }
}
.gaveta-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e3); padding: var(--e5) var(--e5) var(--e3); }
.gaveta-topo h2 { font-size: var(--t-lg); font-weight: 600; letter-spacing: -.01em; }
.sobretitulo { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--ac); margin-bottom: 2px; }
.gaveta-indice { display: flex; gap: 6px; overflow-x: auto; padding: 0 var(--e5) var(--e3); border-bottom: 1px solid var(--linha); scrollbar-width: none; }
.gaveta-indice::-webkit-scrollbar { display: none; }
.gaveta-indice a { flex: none; font-size: var(--t-xs); color: var(--tx-2); text-decoration: none; padding: 4px 10px; border-radius: var(--r-full); border: 1px solid var(--linha-2); }
.gaveta-indice a:hover { color: var(--tx); background: var(--bg-2); }
.gaveta-corpo { position: relative; overflow-y: auto; padding: var(--e2) var(--e5) var(--e10); overscroll-behavior: contain; }
.gaveta-corpo section { padding: var(--e5) 0; border-bottom: 1px solid var(--linha); display: flex; flex-direction: column; gap: 10px; scroll-margin-top: 8px; }
.gaveta-corpo section:last-child { border-bottom: 0; }
.gaveta-corpo section.destaque h3 { animation: realce 1.4s ease-out; }
@keyframes realce { 0%, 30% { color: var(--ac); } }
.gaveta-corpo h3 { font-size: var(--t-md); font-weight: 600; }
.gaveta-corpo p, .gaveta-corpo li { color: var(--tx-2); font-size: var(--t-sm); }
.gaveta-corpo b { color: var(--tx); }
.gaveta-corpo ul { padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.fluxo { list-style: none; counter-reset: f; display: flex; flex-direction: column; gap: 2px; }
.fluxo li { counter-increment: f; display: grid; grid-template-columns: 28px 1fr; column-gap: 8px; padding: 8px 0; position: relative; }
.fluxo li::before { content: counter(f); grid-row: span 2; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-3); color: var(--ac); font: 500 11px var(--f-mono); }
.fluxo li:not(:last-child)::after { content: ''; position: absolute; left: 10.5px; top: 32px; bottom: -6px; width: 1px; background: var(--linha-2); }
.fluxo b { font-size: var(--t-sm); }
.regras { padding-left: 0; list-style: none; counter-reset: r; display: flex; flex-direction: column; gap: 10px; }
.regras li { counter-increment: r; display: grid; grid-template-columns: 24px 1fr; gap: 4px; }
.regras li::before { content: counter(r); font: 500 var(--t-xs) var(--f-mono); color: var(--ac); padding-top: 1px; }
.roteiro-ex { border: 1px solid var(--linha); border-radius: var(--r-lg); overflow: hidden; }
.roteiro-ex-txt { padding: 10px 12px; background: var(--bg-2); font-style: italic; }
.roteiro-ex-txt .sobretitulo { font-style: normal; color: var(--tx-3); }
.tabela-rolagem { overflow-x: auto; }
.tabela-rolagem table { width: 100%; border-collapse: collapse; font-size: var(--t-xs); min-width: 320px; }
.tabela-rolagem th, .tabela-rolagem td { padding: 8px 10px; text-align: left; vertical-align: top; border-top: 1px solid var(--linha); color: var(--tx-2); }
.tabela-rolagem th { color: var(--tx-3); font-weight: 500; text-transform: uppercase; letter-spacing: .05em; font-size: 10px; }
.tabela-rolagem td:first-child { font-family: var(--f-mono); color: var(--ac); width: 36px; }
.ex { padding: 8px 10px; border-radius: var(--r-md); font-size: var(--t-sm); display: flex; flex-direction: column; gap: 2px; }
.ex span { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.ex-ruim { background: var(--perigo-suave); } .ex-ruim span { color: var(--perigo); }
.ex-bom { background: var(--ok-suave); } .ex-bom span { color: var(--ok); }
.custos { display: flex; flex-direction: column; border: 1px solid var(--linha); border-radius: var(--r-lg); }
.custos div { display: flex; justify-content: space-between; padding: 8px 12px; font-size: var(--t-sm); }
.custos div + div { border-top: 1px solid var(--linha); }
.custos dt { color: var(--tx-2); } .custos dd { font-family: var(--f-mono); color: var(--tx); }

/* ---------- modal ---------- */
.modal {
  margin: auto; width: min(560px, calc(100% - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 0;
  border-radius: var(--r-xl); background: var(--bg-1); color: var(--tx); box-shadow: var(--sombra-alta); overflow: auto;
}
.modal[open] { animation: entrar 180ms cubic-bezier(.2, .7, .3, 1); }
@keyframes entrar { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.modal::backdrop { background: rgba(5, 5, 7, .7); backdrop-filter: blur(3px); }
.modal-sm { width: min(420px, calc(100% - 32px)); }
.modal-lg { width: min(980px, calc(100% - 32px)); }
.modal-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); padding: var(--e4) var(--e4) var(--e2) var(--e5); }
.modal-topo h2 { font-size: var(--t-lg); font-weight: 600; letter-spacing: -.01em; }
.modal-corpo { padding: var(--e2) var(--e5) var(--e5); color: var(--tx-2); }
.modal-corpo.form { display: flex; flex-direction: column; gap: var(--e5); color: var(--tx); }
.modal-rodape { display: flex; justify-content: flex-end; gap: var(--e2); padding: var(--e3) var(--e5) var(--e5); }
.modal-corpo.form .modal-rodape { padding: var(--e2) 0 0; }
.grade-formatos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e2); }
.opcao-formato input { position: absolute; opacity: 0; pointer-events: none; }
.of-caixa {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px 12px; border-radius: var(--r-lg); cursor: pointer;
  background: var(--bg-2); border: 1px solid var(--linha-2); text-align: center; transition: border-color var(--trans), background var(--trans);
}
.of-caixa:hover { border-color: #46465a; }
.opcao-formato input:checked + .of-caixa { border-color: var(--ac-linha); background: var(--ac-suave); }
.opcao-formato input:focus-visible + .of-caixa { box-shadow: var(--foco); }
.of-caixa small { font-size: var(--t-xs); color: var(--tx-3); }
.of-ret { display: block; border: 1.5px solid var(--tx-2); border-radius: 3px; height: 30px; margin-bottom: 4px; }
.of-ret.fmt-9x16 { width: 17px; } .of-ret.fmt-1x1 { width: 30px; } .of-ret.fmt-16x9 { width: 44px; height: 25px; margin-top: 2.5px; margin-bottom: 6.5px; }
.opcao-formato input:checked + .of-caixa .of-ret { border-color: var(--ac); }

.lb { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--e5); align-items: start; }
.lb-midia { background: #000; border-radius: var(--r-lg); overflow: hidden; max-height: calc(100vh - 160px); display: grid; place-items: center; }
.lb-midia.fmt-9x16 { aspect-ratio: 9 / 16; justify-self: center; height: min(calc(100vh - 160px), 720px); width: auto; }
.lb-midia img, .lb-midia video { width: 100%; height: 100%; object-fit: contain; }
.lb-info { display: flex; flex-direction: column; gap: var(--e4); }
.lb-meta { display: flex; flex-direction: column; gap: 8px; font-size: var(--t-sm); }
.lb-meta div { display: flex; justify-content: space-between; gap: var(--e3); }
.lb-meta dt { color: var(--tx-3); } .lb-meta dd { color: var(--tx); text-align: right; }
.prompt { font: 400 var(--t-xs)/1.6 var(--f-mono); color: var(--tx-2); word-break: break-word; }

.previa-roteiro .rotulo { margin-bottom: 6px; }
.previa-roteiro ol { padding-left: 24px; display: flex; flex-direction: column; gap: 4px; font-size: var(--t-sm); color: var(--tx-2); max-height: 200px; overflow-y: auto; }
.previa-roteiro li::marker { color: var(--ac); font-family: var(--f-mono); font-size: var(--t-xs); }

.grade-escolha { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: var(--e2); margin-top: var(--e3); max-height: 56vh; overflow-y: auto; padding: 4px; }
.escolha { position: relative; border-radius: var(--r-md); overflow: hidden; cursor: pointer; border: 2px solid transparent; background: var(--bg-2); }
.escolha img { width: 100%; height: 100%; object-fit: cover; }
.escolha:has(input:checked) { border-color: var(--ac); }
.escolha:has(input:focus-visible) { box-shadow: var(--foco); }
.escolha-rot { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 6px 4px; font-size: 11px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.8)); }
.escolha-check { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%; display: none; place-items: center; background: var(--ac); color: var(--ac-tinta); }
.escolha-check .ico { width: 12px; height: 12px; }
.escolha:has(input:checked) .escolha-check { display: grid; }

/* ---------- toasts ---------- */
.toasts { position: fixed; z-index: 60; right: var(--e5); bottom: var(--e5); display: flex; flex-direction: column; gap: var(--e2); align-items: flex-end; pointer-events: none; }
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: 10px; max-width: 380px; padding: 8px 8px 8px 14px; border-radius: var(--r-lg);
  background: #1c1c27; border: 1px solid var(--linha-2); box-shadow: var(--sombra); font-size: var(--t-sm);
  animation: toastIn 200ms cubic-bezier(.2, .7, .3, 1);
}
.toast.saindo { opacity: 0; transform: translateY(4px); transition: opacity 180ms, transform 180ms; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }
.toast-ponto { width: 6px; height: 6px; border-radius: 50%; background: var(--tx-3); flex: none; }
.toast-ok .toast-ponto { background: var(--ok); } .toast-erro .toast-ponto { background: var(--perigo); }
.toast-erro { border-color: rgba(248,113,113,.35); }
.toast-msg { flex: 1; }
.toast-acao { color: var(--ac); font-weight: 600; padding: 4px 8px; border-radius: var(--r-sm); }
.toast-acao:hover { background: var(--bg-3); }
.toast-fechar { width: 24px; height: 24px; display: grid; place-items: center; color: var(--tx-3); border-radius: var(--r-sm); }
.toast-fechar:hover { color: var(--tx); background: var(--bg-3); }

/* ---------- responsivo ---------- */
@media (max-width: 960px) {
  .estudio-corpo { grid-template-columns: minmax(0, 1fr); }
  .storyboard { position: static; max-height: none; border-right: 0; border-bottom: 1px solid var(--linha); flex-direction: row; align-items: stretch; }
  .sb-topo { display: none; }
  .sb-lista { flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: var(--e2) var(--e3); gap: 6px; scroll-snap-type: x proximity; }
  .sb-item { flex: none; scroll-snap-align: start; }
  .sb-sel { grid-template-columns: 1fr; width: 76px; padding: 6px; gap: 4px; justify-items: center; }
  .sb-thumb { width: 56px; height: 56px; }
  .sb-num { order: 2; }
  .sb-txt { display: none; }
  .sb-item.ativo .sb-sel::before { left: 14px; right: 14px; top: auto; bottom: -1px; width: auto; height: 2px; }
  .sb-acoes { flex-direction: column; justify-content: center; border-top: 0; border-left: 1px solid var(--linha); padding: var(--e2); }
  .sb-acoes .btn { width: auto; justify-content: flex-start; }
  .sb-vazio { white-space: nowrap; align-self: center; }
  .area-cena { padding: var(--e4) var(--e4) 96px; }
}
@media (max-width: 640px) {
  :root { --t-2xl: 24px; }
  .topo { gap: var(--e3); padding: 0 var(--e4); }
  .marca span:last-child { display: none; }
  .nav a { padding: 6px 10px; }
  #btnGuia span { display: none; }
  #btnGuia { width: 36px; padding: 0; }
  .selo-sim { padding: 3px 8px; }
  .pagina { padding: var(--e5) var(--e4) 96px; }
  .pag-topo { align-items: flex-start; }
  .passos-vazio { grid-template-columns: 1fr; }
  .vazio-hero { padding: var(--e8) var(--e4); }
  .proj-barra { padding: var(--e2) var(--e4); gap: var(--e2); }
  .proj-nome { font-size: var(--t-lg); flex-basis: 140px; }
  .proj-opcoes { width: 100%; gap: var(--e2); }
  .proj-progresso { flex: 1; min-width: 90px; }
  .select-inline select { max-width: 170px; }
  .sb-acoes .btn span, .sb-acoes .btn { font-size: var(--t-xs); }
  .cena-id { flex-basis: 100%; }
  .cena-topo-dir { width: 100%; justify-content: space-between; }
  .salvo { order: 3; min-width: 0; }
  .grade-esteticas { grid-template-columns: minmax(0, 1fr); }
  .grade-tomadas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e2); }
  .grade-tomadas.g-fmt-16x9 { grid-template-columns: minmax(0, 1fr); }
  .grade-bib { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e2); }
  .tomadas-topo .ajuda { display: none; }
  .ficha-rodape { margin-left: calc(var(--e4) * -1); margin-right: calc(var(--e4) * -1); padding: var(--e3) var(--e4); background: var(--bg); }
  .acao-final { width: 100%; justify-content: space-between; }
  .acao-final .btn { flex: 1; max-width: 240px; }
  .versoes { width: 100%; justify-content: space-between; }
  .lb { grid-template-columns: minmax(0, 1fr); }
  .lb-midia.fmt-9x16 { height: auto; width: 100%; max-height: 60vh; }
  .modal { width: calc(100% - 24px); max-height: calc(100vh - 24px); }
  .toasts { left: var(--e3); right: var(--e3); bottom: var(--e3); align-items: stretch; }
  .toast { max-width: none; }
  .gaveta { width: 100%; }
  .grade-formatos { gap: 6px; }
}
@media (max-width: 380px) {
  .nav a { padding: 6px 8px; font-size: var(--t-sm); }
  .abas { gap: 4px; }
  .seg button { padding: 0 9px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .kenburns { animation: none; }
}

/* ajustes */
.gaveta-topo, .gaveta-indice { flex: none; }
.gaveta-corpo { flex: 1; min-height: 0; }
#btnGuia[aria-expanded="true"] { color: var(--ac); background: var(--ac-suave); }
.campo > .seg, fieldset.campo .seg { align-self: flex-start; }
@media (max-width: 640px) {
  .grade-esteticas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .est-desc { display: none; }
  .est-tags { padding-left: 0; }
  .estetica { padding: 9px 10px; }
  .ficha-rodape { flex-wrap: nowrap; gap: var(--e2); }
  .versoes { width: auto; }
  .versoes > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .acao-final { width: auto; flex: 1; gap: var(--e2); }
  .acao-final .btn { max-width: none; }
  .custo { font-size: var(--t-xs); }
}
@media (max-width: 640px) { .grupo-icones { border-left: 0; padding-left: 0; margin-left: auto; } }

/* ================= rodada 2: Comece aqui, abas do projeto, próximo passo, montagem ================= */
.pag-acoes { display: flex; gap: var(--e2); flex-wrap: wrap; }
.btn-grande { height: 44px; padding: 0 20px; font-size: 15px; border-radius: var(--r-lg); }

/* Comece aqui */
.pagina-comece { max-width: 1120px; display: flex; flex-direction: column; gap: 56px; }
.comece-hero { display: flex; flex-direction: column; gap: var(--e3); max-width: 720px; padding-top: var(--e4); }
.comece-hero h1 { font-size: clamp(30px, 5vw, 44px); letter-spacing: -.03em; line-height: 1.1; }
.comece-lead { font-size: 17px; color: var(--tx-2); line-height: 1.55; }
.comece-lead b { color: var(--tx); }
.comece-acoes { display: flex; gap: var(--e2); flex-wrap: wrap; margin-top: var(--e2); }
.fluxo-passos { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--e2); counter-reset: none; }
.fp-card {
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: var(--e4); border-radius: var(--r-lg);
  background: var(--bg-1); border: 1px solid var(--linha);
}
.fp-card:not(:last-child)::after {
  content: ''; position: absolute; top: 30px; right: -9px; width: 10px; height: 1px; background: var(--linha-2); z-index: 1;
}
.fp-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.fp-num { font: 500 var(--t-xs) var(--f-mono); color: var(--ac); }
.fp-ico { width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--r-md); background: var(--bg-3); color: var(--tx); }
.fp-card h2 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.fp-card p { font-size: var(--t-sm); color: var(--tx-3); line-height: 1.45; }
.fp-custo { margin-top: auto; padding-top: 6px; font: 500 11px var(--f-mono); color: var(--ok); }
.comece-regra { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--e8); align-items: center;
  padding: var(--e8); border-radius: var(--r-xl); background: var(--bg-1); border: 1px solid var(--linha); }
.cr-txt { display: flex; flex-direction: column; gap: var(--e2); }
.cr-txt h2, .comece-cta h2 { font-size: var(--t-2xl); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.cr-txt p { color: var(--tx-2); }
.cr-txt b { color: var(--tx); }
.comece-regra .roteiro-ex { background: var(--bg); }
.comece-regra .roteiro-ex-txt, .comece-regra td, .comece-regra th { font-size: var(--t-sm); }
.comece-regra .tabela-rolagem th { font-size: 10px; }
.comece-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e4); }
.comece-card { display: flex; flex-direction: column; gap: var(--e3); padding: var(--e5); border-radius: var(--r-xl); background: var(--bg-1); border: 1px solid var(--linha); }
.comece-card h3 { font-size: var(--t-lg); font-weight: 600; }
.comece-card p, .comece-card li { color: var(--tx-2); font-size: var(--t-sm); }
.comece-card b { color: var(--tx); }
.comece-cta { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--e3); padding: var(--e10) var(--e5);
  border-radius: var(--r-xl); border: 1px dashed var(--linha-2); }
@media (max-width: 1080px) { .fluxo-passos { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fp-card::after { display: none; } }
@media (max-width: 860px) { .comece-regra { grid-template-columns: minmax(0, 1fr); padding: var(--e5); gap: var(--e5); } .comece-grade { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .pagina-comece { gap: var(--e10); }
  .fluxo-passos { grid-template-columns: minmax(0, 1fr); }
  .fp-card { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: var(--e3); row-gap: 2px; padding: var(--e3) var(--e4); }
  .fp-topo { grid-row: span 3; flex-direction: column; justify-content: flex-start; gap: 6px; margin: 0; }
  .comece-lead { font-size: 15px; }
  .comece-acoes .btn { flex: 1 1 100%; }
}

/* abas do projeto */
.proj-abas { display: flex; gap: 2px; padding: 3px; border-radius: var(--r-md); background: var(--bg-1); border: 1px solid var(--linha); }
.proj-abas a {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 5px;
  color: var(--tx-2); text-decoration: none; font-weight: 500; font-size: var(--t-sm); transition: background var(--trans), color var(--trans);
}
.proj-abas a:hover { color: var(--tx); }
.proj-abas a.ativo { background: var(--bg-3); color: var(--tx); }
.proj-abas a.ativo .ico { color: var(--ac); }
.proj-abas .contador:empty { display: none; }
.pp-custo { font: 500 11px var(--f-mono); color: var(--tx-3); white-space: nowrap; cursor: default; }

/* faixa "próximo passo" */
.passo-faixa {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e2) var(--e4); align-items: center;
  padding: var(--e3) var(--e5); border-bottom: 1px solid var(--linha); background: var(--bg-1);
}
.passo-faixa.passo-mini {
  display: flex; justify-content: flex-end; padding: 4px var(--e4);
  background: transparent;
}
.passo-faixa.passo-mini .passo-toggle { gap: 6px; color: var(--tx-3); font-size: var(--t-xs); }
.passo-faixa.passo-mini .passo-toggle .ico { width: 12px; height: 12px; }
.passo-trilha { list-style: none; display: flex; gap: var(--e1); flex-wrap: wrap; grid-column: 1; }
.passo-trilha li {
  display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-xs); color: var(--tx-3); padding: 3px 10px 3px 4px;
  border-radius: var(--r-full); border: 1px solid var(--linha);
}
.pt-num { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-3); font: 500 10px var(--f-mono); }
.pt-num .ico { width: 11px; height: 11px; }
.passo-trilha li.feito { color: var(--tx-2); }
.passo-trilha li.feito .pt-num { background: var(--ok-suave); color: var(--ok); }
.passo-trilha li.atual { color: var(--tx); border-color: var(--ac-linha); background: var(--ac-suave); }
.passo-trilha li.atual .pt-num { background: var(--ac); color: var(--ac-tinta); }
.passo-agora { grid-column: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 6px var(--e3); font-size: var(--t-sm); }
.passo-rot { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--ac); }
.passo-txt { color: var(--tx); }
.passo-acoes { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.passo-toggle { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
.passo-toggle .ico { transition: transform var(--trans); transform: rotate(180deg); }
.passo-faixa.recolhida .passo-trilha { display: none; }
.passo-faixa.recolhida .passo-toggle { grid-row: 1; align-self: center; }
.passo-faixa.recolhida .passo-toggle .ico { transform: none; }

/* montagem — editor fixo no viewport: sem scroll da página.
   Só a timeline (horizontal) e a lateral (se os painéis não couberem) rolam. */
html:has(.montagem),
body:has(.montagem) { height: 100%; overflow: hidden !important; }
body:has(.montagem) #conteudo {
  height: calc(100vh - var(--topo-h));
  overflow: hidden;
}
.estudio:has(.montagem) {
  max-width: none;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.estudio:has(.montagem) .proj-barra,
.estudio:has(.montagem) #proxPasso { flex: none; }
.estudio:has(.montagem) #estudioVista {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.montagem {
  flex: 1;
  min-height: 0;
  padding: 12px var(--e4) 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}
.mont-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); flex: none; }
.mont-topo h2 { font-size: var(--t-lg); font-weight: 600; letter-spacing: -.01em; }
.mont-topo .ajuda { display: none; }
.mont-total { display: flex; align-items: baseline; gap: 8px; }
.mont-total span { font-size: 11px; color: var(--tx-3); text-transform: uppercase; letter-spacing: .08em; }
.mont-total b { font-size: var(--t-lg); font-weight: 500; }
.mont-grade {
  flex: 1;
  min-height: 0;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) 300px;
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "player lado" "tl lado";
  align-items: stretch;
}
.player-col {
  grid-area: player;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  align-items: center;
  justify-content: center;
}
.timeline { grid-area: tl; min-width: 0; flex: none; }
.mont-lado {
  grid-area: lado;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.palco {
  position: relative; background: #000; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--linha);
  margin: 0 auto; max-width: 100%; display: grid; place-items: center;
}
/* preview cabe no espaço livre — não empurra a timeline pra fora da tela */
.montagem .palco.fmt-9x16 { aspect-ratio: 9 / 16; height: min(100%, 340px); width: auto; }
.montagem .palco.fmt-1x1 { aspect-ratio: 1; height: min(100%, 300px); width: auto; }
.montagem .palco.fmt-16x9 { aspect-ratio: 16 / 9; height: min(100%, 280px); width: auto; max-width: 100%; }
.palco.fmt-9x16 { aspect-ratio: 9 / 16; height: min(44vh, 460px); }
.palco.fmt-1x1 { aspect-ratio: 1; height: min(44vh, 420px); }
.palco.fmt-16x9 { aspect-ratio: 16 / 9; width: 100%; }
.palco video, .palco img { width: 100%; height: 100%; object-fit: contain; grid-area: 1 / 1; }
.palco-cena { position: absolute; left: 10px; top: 10px; font: 500 11px var(--f-mono); padding: 3px 8px; border-radius: 4px; background: rgba(0,0,0,.65); color: var(--tx); }
.palco-cena:empty { display: none; }
.palco-vazio { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; gap: var(--e2); color: var(--tx-3); font-size: var(--t-sm); padding: var(--e4); text-align: center; }
.palco-vazio .ico { width: 28px; height: 28px; }
.player-ctrl { display: flex; align-items: center; gap: var(--e3); max-width: 720px; width: 100%; margin: 0 auto; }
.btn-play { background: var(--ac); color: var(--ac-tinta); border-radius: 50%; flex: none; }
.btn-play:hover:not(:disabled) { background: var(--ac-hover); color: var(--ac-tinta); }
.pl-tempo { font-size: var(--t-xs); color: var(--tx-2); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* sliders */
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 20px; background: transparent; cursor: pointer; --p: 0%; }
input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--bg-4); }
input[type=range]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--bg-4); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--tx); margin-top: -5px; border: 0; box-shadow: 0 0 0 3px rgba(0,0,0,.35); }
input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--tx); border: 0; }
input[type=range]:focus-visible { box-shadow: none; }
input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ac); }
input[type=range]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ac); }
.pl-seek::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--ac) var(--p), var(--bg-4) var(--p)); }

/* linha do tempo */
.tl-topo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e3); flex-wrap: wrap; margin-bottom: 6px; }
.tl-topo h3, .mont-sec h3 { font-size: var(--t-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--tx-3); }
.tl-topo .ajuda { font-size: 11px; }
.tl-rolagem {
  position: relative; overflow-x: auto; overflow-y: hidden; padding: 10px; border-radius: var(--r-lg); background: var(--bg-1); border: 1px solid var(--linha);
  display: flex; flex-direction: column; gap: 6px; scrollbar-color: var(--bg-4) transparent;
}
.tl-trilha { list-style: none; display: flex; gap: 4px; min-height: 84px; width: max-content; min-width: 100%; position: relative; }
.tl-item { position: relative; flex: none; min-width: 64px; transition: transform var(--trans), opacity var(--trans); }
.tl-item.arrastando { opacity: .4; }
.tl-item.drop-antes::before, .tl-item.drop-depois::after {
  content: ''; position: absolute; top: -4px; bottom: -4px; width: 3px; border-radius: 2px; background: var(--ac); z-index: 3;
}
.tl-item.drop-antes::before { left: -4px; } .tl-item.drop-depois::after { right: -4px; }
.tl-clip {
  position: relative; display: block; width: 100%; height: 84px; border-radius: var(--r-md); overflow: hidden; text-align: left;
  border: 1px solid var(--linha-2); background: var(--bg-3); cursor: grab; transition: border-color var(--trans), box-shadow var(--trans);
}
.tl-clip:active { cursor: grabbing; }
.tl-clip:hover { border-color: #4c4c60; }
.tl-clip[aria-pressed="true"] { border-color: var(--ac); box-shadow: 0 0 0 1px var(--ac); }
.tl-clip:focus-visible { border-radius: var(--r-md); }
.tl-thumb { position: absolute; inset: 0; background-size: auto 100%; background-repeat: repeat-x; background-position: left center; opacity: .85; }
.tl-info { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: 4px; padding: 14px 6px 5px;
  background: linear-gradient(transparent, rgba(0,0,0,.85)); font-size: 11px; }
.tl-num { font: 600 11px var(--f-mono); color: var(--tx); }
.tl-dur { color: var(--tx-2); font-size: 10px; }
.tl-corte { position: absolute; right: 5px; top: 5px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 4px; background: rgba(0,0,0,.65); color: var(--ac); }
.tl-corte .ico { width: 11px; height: 11px; }
.tl-parada .tl-clip { border-style: dashed; }
.tl-parada .tl-thumb { filter: grayscale(.6); opacity: .55; }
.tl-cta {
  position: absolute; left: 50%; top: 26px; transform: translateX(-50%); z-index: 2; height: 24px; padding: 0 9px; border-radius: var(--r-full);
  font-size: 11px; font-weight: 600; background: var(--ac); color: var(--ac-tinta); white-space: nowrap;
}
.tl-cta:hover { background: var(--ac-hover); }
.tl-sem-frame { width: 104px; }
.tl-sem-frame .tl-clip { background: repeating-linear-gradient(135deg, var(--bg-2) 0 8px, var(--bg-1) 8px 16px); border-style: dashed; display: flex; flex-direction: column; justify-content: flex-end; padding: 6px; gap: 2px; }
.tl-falta { font-size: 10px; color: var(--tx-3); }
.tl-vazio { color: var(--tx-3); font-size: var(--t-sm); align-self: center; padding: 0 var(--e2); }
.tl-faixa-audio:empty { display: none; }
.tl-trilha-audio {
  display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px; border-radius: var(--r-sm); font-size: 11px; color: var(--info);
  background: repeating-linear-gradient(90deg, rgba(96,165,250,.18) 0 2px, rgba(96,165,250,.08) 2px 5px); border: 1px solid rgba(96,165,250,.3);
}
.tl-trilha-audio span:nth-child(2) { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-cursor { position: absolute; top: 6px; bottom: 6px; left: 12px; width: 2px; background: var(--rec); border-radius: 1px; pointer-events: none; z-index: 4; box-shadow: 0 0 6px rgba(255,77,61,.6); }

/* painéis laterais da montagem */
.mont-sec { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--r-lg); background: var(--bg-1); border: 1px solid var(--linha); flex: none; }
.sec-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); }
.clipe-rot { font-size: var(--t-sm); color: var(--tx-2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.trim { display: flex; flex-direction: column; gap: 4px; }
.trim-linha { display: flex; justify-content: space-between; align-items: center; font-size: var(--t-sm); font-weight: 500; }
.trim-linha output { font-size: var(--t-xs); color: var(--ac); }
.clipe-acoes, .clipe-mover { display: flex; gap: 6px; flex-wrap: wrap; }
.clipe-mover .btn { flex: 1; }
.switch { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--t-sm); font-weight: 500; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-trilho { position: relative; width: 34px; height: 20px; border-radius: 10px; background: var(--bg-4); flex: none; transition: background var(--trans); }
.switch-trilho::after { content: ''; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--tx-2); transition: transform var(--trans), background var(--trans); }
.switch input:checked + .switch-trilho { background: var(--ac); }
.switch input:checked + .switch-trilho::after { transform: translateX(14px); background: var(--ac-tinta); }
.switch input:focus-visible + .switch-trilho { box-shadow: var(--foco); }
.trilha-item { display: flex; align-items: center; gap: var(--e2); padding: 6px 6px 6px 10px; border-radius: var(--r-md); background: var(--bg-2); border: 1px solid var(--linha-2); color: var(--info); font-size: var(--t-sm); }
.trilha-nome { flex: 1; min-width: 0; color: var(--tx); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mont-sec label[role=button] { align-self: flex-start; }
.export-prog { display: flex; flex-direction: column; gap: 6px; }
.prog-barra { height: 6px; border-radius: 3px; background: var(--bg-4); overflow: hidden; }
.prog-barra span { display: block; height: 100%; width: 0; background: var(--ac); border-radius: 3px; transition: width 300ms ease; }
.export-res { display: flex; gap: var(--e3); align-items: flex-start; padding-top: var(--e3); border-top: 1px solid var(--linha); }
.export-res video { width: 96px; border-radius: var(--r-sm); background: #000; flex: none; }
.export-res video.fmt-16x9 { width: 140px; }
.export-res-info { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-size: var(--t-sm); min-width: 0; }
.export-res-info span { color: var(--tx-3); font-size: var(--t-xs); }
.selo-final { position: absolute; right: 8px; top: 8px; font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: var(--r-full); background: var(--ac); color: var(--ac-tinta); }

@media (max-width: 1100px) {
  /* Em telas estreitas volta o scroll da página — o stack vertical não cabe fixo */
  body.modo-editor { height: auto; overflow: auto !important; }
  body.modo-editor #conteudo { height: auto; overflow: visible; }
  body.modo-editor .estudio { height: auto; overflow: visible; }
  body.modo-editor .estudio #estudioVista { flex: none; display: block; }
  body.modo-editor:not(.modo-montagem) .estudio-corpo { height: auto; overflow: visible; }
  body.modo-editor:not(.modo-montagem) .area-cena { overflow: visible; display: block; padding: var(--e4) var(--e4) 48px; }
  body.modo-editor:not(.modo-montagem) .painel,
  body.modo-editor:not(.modo-montagem) .bancada,
  body.modo-editor:not(.modo-montagem) .ficha,
  body.modo-editor:not(.modo-montagem) .ficha-corpo,
  body.modo-editor:not(.modo-montagem) .tomadas { overflow: visible; height: auto; max-height: none; }
  .montagem { height: auto; overflow: visible; padding: var(--e4) var(--e4) 48px; }
  .mont-topo .ajuda { display: block; }
  .mont-grade { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "player" "tl" "lado"; }
  .mont-lado { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); overflow: visible; }
  .montagem .palco.fmt-9x16 { height: min(42vh, 380px); }
  .montagem .palco.fmt-1x1 { height: min(40vh, 340px); }
  .montagem .palco.fmt-16x9 { height: min(36vh, 300px); }
}
@media (max-width: 640px) {
  .proj-abas { order: 3; width: 100%; }
  .proj-abas a { flex: 1; justify-content: center; }
  .passo-faixa { padding: var(--e3) var(--e4); }
  .passo-trilha li { font-size: 11px; padding-right: 8px; }
  .passo-agora .passo-acoes { width: 100%; }
  .montagem { padding: var(--e4) var(--e4) 48px; }
  .mont-lado { grid-template-columns: minmax(0, 1fr); }
  .nav-comece { display: none; }
  .pp-custo { white-space: normal; }
}
.regras li { display: block; position: relative; padding-left: 24px; }
.regras li::before { position: absolute; left: 0; top: 0; }

/* home: Como funciona sempre no topo */
.pagina-home { max-width: 1200px; display: flex; flex-direction: column; gap: var(--e10); }
.como-funciona { display: flex; flex-direction: column; gap: var(--e5); padding: 0; background: none; border: 0; border-radius: 0; }
/* landing pós-login: solta no fundo da página, sem card */
.como-funciona.landing { gap: var(--e10); padding: var(--e2) 0 var(--e8); }
.cf-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--e4); }
.cf-hero { display: flex; flex-direction: column; gap: var(--e2); max-width: 720px; }
.cf-hero h2 { font-size: clamp(26px, 4vw, 38px); font-weight: 600; letter-spacing: -.03em; line-height: 1.12; }
.fp-card h3 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.fp-card { background: var(--bg); }
.gira { display: inline-flex; transition: transform var(--trans); }
.gira.aberto { transform: rotate(180deg); }
.como-funciona.recolhida { padding: var(--e3) var(--e4); }
.cf-linha { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.cf-titulo-sm { font-size: var(--t-sm); font-weight: 600; color: var(--ac); white-space: nowrap; }
.fluxo-passos.compacto { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.fp-chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-xs); color: var(--tx-2); padding: 4px 10px; border-radius: var(--r-full); border: 1px solid var(--linha-2); }
.fp-chip:not(:last-child)::after { content: '→'; color: var(--tx-3); margin-left: 4px; }
.cf-regra { border: 1px solid var(--linha); border-radius: var(--r-lg); background: var(--bg); }
.cf-regra summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; padding: 12px 14px; font-size: var(--t-sm); color: var(--tx-2); border-radius: var(--r-lg); }
.cf-regra summary::-webkit-details-marker { display: none; }
.cf-regra summary b { color: var(--tx); }
.cf-regra summary > span:nth-child(2) { flex: 1; min-width: 200px; }
.cf-regra-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--ac); }
.cf-regra-ver { color: var(--ac); font-weight: 500; }
.cf-regra[open] .cf-regra-ver { color: var(--tx-3); }
.cf-regra[open] .cf-regra-ver::before { content: 'Esconder exemplo'; }
.cf-regra[open] .cf-regra-ver { font-size: 0; } .cf-regra[open] .cf-regra-ver::before { font-size: var(--t-sm); }
.cf-regra-corpo { padding: 0 14px 14px; }
.home-projetos .pag-topo { margin-bottom: var(--e4); }
.home-dicas { display: flex; flex-direction: column; gap: var(--e4); }
.home-dicas-tit { font-size: var(--t-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--tx-3); }
@media (max-width: 640px) {
  .pagina-home { gap: var(--e8); }
  .como-funciona.landing { padding: 0 0 var(--e6); }
  .cf-cab { flex-direction: column-reverse; gap: var(--e2); }
  .cf-cab > .btn { align-self: flex-end; }
  .fluxo-passos.compacto { order: 3; flex-basis: 100%; }
  .cf-linha > .btn { margin-left: auto; }
}

/* ================= home "landing": Como funciona elaborado ================= */
.landing { gap: var(--e10); }
.lp-barra { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); flex-wrap: wrap; margin-bottom: calc(var(--e6) * -1); }
.lp-barra .sobretitulo { margin: 0; }
.lp-barra-acoes { display: flex; gap: var(--e2); flex-wrap: wrap; }
.lp-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--e8); align-items: center; }
.lp-hero-txt { display: flex; flex-direction: column; gap: var(--e4); }
.lp-hero h2 { font-size: clamp(30px, 4.6vw, 52px); font-weight: 650; letter-spacing: -.035em; line-height: 1.04; }
.lp-selos { list-style: none; display: flex; flex-wrap: wrap; gap: var(--e2) var(--e5); font-size: var(--t-sm); color: var(--tx-3); }
.lp-selos b { color: var(--tx); font-weight: 600; }
.lp-bloco { display: flex; flex-direction: column; gap: var(--e4); scroll-margin-top: calc(var(--topo-h) + 16px); }
.lp-bloco:focus { outline: none; }
.lp-cab h3, .lp-fim h3 { font-size: var(--t-xl); font-weight: 600; letter-spacing: -.015em; }
.lp-cab p { color: var(--tx-3); font-size: var(--t-sm); margin-top: 2px; }
.lp-cab-acao { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--e4); flex-wrap: wrap; }
.lp-roteiro { font-style: italic; color: var(--tx-2) !important; font-size: var(--t-md) !important; max-width: 640px; }

/* demo animada: frame -> clipe -> linha do tempo */
.demo { position: relative; justify-self: center; width: min(100%, 380px); padding: var(--e4); border-radius: var(--r-xl);
  background: var(--bg); border: 1px solid var(--linha-2); box-shadow: 0 30px 60px rgba(0,0,0,.35); display: flex; flex-direction: column; gap: var(--e3); }
.demo-palco { display: grid; grid-template-columns: 150px 1fr; gap: var(--e4); align-items: center; }
.demo-frame { position: relative; width: 150px; aspect-ratio: 9 / 16; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--linha-2); animation: dFrame 8s infinite; }
.demo-frame > .quadro, .demo-frame > .ex-midia { width: 100%; height: 100%; display: block; object-fit: cover; }
.demo-frame > .ex-midia, .demo-frame .q-luz, .demo-frame .q-janela, .demo-frame .q-paineis { animation: dZoom 8s infinite; transform-origin: 30% 50%; }
.demo-play { position: absolute; inset: 0; margin: auto; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--ac); color: var(--ac-tinta); opacity: 0; animation: dPlay 8s infinite; }
.demo-rotulos { position: relative; height: 120px; }
.demo-rotulos span { position: absolute; left: 0; top: 50%; transform: translateY(-50%); font: 600 var(--t-md) var(--f); color: var(--tx); opacity: 0; white-space: nowrap; }
.demo-rotulos .d1 { animation: dR1 8s infinite; } .demo-rotulos .d2 { animation: dR2 8s infinite; } .demo-rotulos .d3 { animation: dR3 8s infinite; }
.demo-tl { position: relative; display: flex; gap: 4px; padding: 6px; border-radius: var(--r-md); background: var(--bg-1); border: 1px solid var(--linha); height: 44px; }
.demo-slot { flex: 1; border-radius: 4px; background: var(--bg-3); }
.demo-slot.cheio { background: radial-gradient(90% 120% at 0% 40%, hsla(28,60%,45%,.55), transparent 70%), linear-gradient(180deg, hsl(28,22%,10%), hsl(28,30%,4%)); }
.demo-slot.cheio.b { background: radial-gradient(90% 120% at 0% 40%, hsla(36,60%,48%,.5), transparent 70%), linear-gradient(180deg, hsl(36,22%,10%), hsl(36,30%,4%)); }
.demo-slot.cheio.c { background: radial-gradient(90% 120% at 0% 40%, hsla(22,60%,42%,.55), transparent 70%), linear-gradient(180deg, hsl(22,22%,10%), hsl(22,30%,4%)); }
.demo-slot.alvo { border: 1px dashed var(--linha-2); background: transparent; position: relative; overflow: hidden; }
.demo-slot.alvo::after { content: ''; position: absolute; inset: 0; background: radial-gradient(90% 120% at 0% 40%, hsla(32,65%,50%,.6), transparent 70%), linear-gradient(180deg, hsl(32,22%,11%), hsl(32,30%,4%)); opacity: 0; animation: dSlot 8s infinite; }
.demo-cursor { position: absolute; top: 3px; bottom: 3px; left: 6px; width: 2px; background: var(--rec); border-radius: 1px; animation: dCursor 8s infinite linear; }
.demo-voo { position: absolute; width: 30px; height: 30px; border-radius: 4px; background: radial-gradient(90% 120% at 0% 40%, hsla(32,65%,50%,.6), transparent 70%), hsl(32,25%,7%); border: 1px solid var(--ac); opacity: 0;
  left: calc(var(--e4) + 60px); top: calc(var(--e4) + 120px); animation: dVoo 8s infinite; }
@keyframes dFrame { 0%, 5% { opacity: 0; transform: translateY(6px); } 10%, 100% { opacity: 1; transform: none; } }
@keyframes dZoom { 0%, 30% { transform: none; } 30%, 55% { transform: scale(1.12) translateY(-3%); } 60%, 100% { transform: none; } }
@keyframes dPlay { 0%, 22% { opacity: 0; transform: scale(.6); } 27%, 34% { opacity: 1; transform: none; } 38%, 100% { opacity: 0; } }
@keyframes dR1 { 0%, 4% { opacity: 0; } 8%, 24% { opacity: 1; } 28%, 100% { opacity: 0; } }
@keyframes dR2 { 0%, 28% { opacity: 0; } 32%, 54% { opacity: 1; } 58%, 100% { opacity: 0; } }
@keyframes dR3 { 0%, 58% { opacity: 0; } 62%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes dVoo { 0%, 56% { opacity: 0; transform: none; } 58% { opacity: 1; transform: none; } 70% { opacity: 1; transform: translate(232px, 162px) scale(.9); } 72%, 100% { opacity: 0; transform: translate(232px, 162px); } }
@keyframes dSlot { 0%, 70% { opacity: 0; } 73%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes dCursor { 0%, 74% { transform: translateX(0); opacity: 0; } 75% { opacity: 1; } 96% { transform: translateX(calc(min(100vw, 340px) - 80px)); opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .demo-frame, .demo-play, .demo-rotulos span, .demo-voo, .demo-slot.alvo::after, .demo-cursor, 
  .demo-rotulos .d3, .demo-slot.alvo::after { opacity: 1; }
}

/* passos ilustrados */
.lp-passos { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e3); }
.lp-passo { display: flex; flex-direction: column; border-radius: var(--r-lg); background: var(--bg); border: 1px solid var(--linha); overflow: hidden; transition: border-color var(--trans), transform var(--trans); }
.lp-passo:hover { border-color: var(--linha-2); transform: translateY(-2px); }
.lp-mk { background: radial-gradient(120% 90% at 50% 0%, rgba(139,92,246,.08), transparent 60%), var(--bg-1); border-bottom: 1px solid var(--linha); padding: var(--e2); }
.lp-mk svg { display: block; width: 100%; height: auto; max-height: 120px; }
.mk-bg { fill: var(--bg-3); } .mk-l { fill: var(--bg-4); } .mk-ac { fill: var(--ac); } .mk-ok { fill: var(--ok-suave); stroke: var(--ok); stroke-width: 1; }
.mk-sel { fill: var(--bg-3); stroke: var(--ac); stroke-width: 1.5; } .mk-tela { fill: #2a1d3a; }
.mk-clip { fill: hsl(210,35%,30%); stroke: var(--linha-2); } .mk-clip:nth-of-type(odd) { fill: hsl(30,35%,30%); }
.mk-audio { fill: rgba(96,165,250,.22); stroke: rgba(96,165,250,.5); stroke-width: .8; } .mk-rec { fill: var(--rec); }
.mk-n { fill: var(--ac-tinta); font: 700 7px var(--f-mono); text-anchor: middle; }
.mk-t { fill: var(--tx-2); font: 600 9px var(--f-mono); text-anchor: middle; } .mk-t2 { fill: var(--ok); font: 700 8px var(--f-mono); text-anchor: middle; }
.mk-check, .mk-seta, .mk-seta2, .mk-onda { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mk-check { stroke: var(--ac-tinta); stroke-width: 1.8; } .mk-seta { stroke: var(--tx-3); stroke-width: 1.5; }
.mk-seta2 { stroke: var(--ac); stroke-width: 2.5; } .mk-onda { stroke: var(--ac); stroke-width: 1.5; opacity: .6; }
.mk-play { fill: var(--ac-tinta); }
.lp-passo-txt { padding: var(--e4); display: flex; flex-direction: column; gap: 4px; flex: 1; }
.lp-passo-txt h4 { font-size: var(--t-lg); font-weight: 600; letter-spacing: -.01em; }
.lp-passo-txt p { font-size: var(--t-sm); color: var(--tx-2); }
.lp-decide { color: var(--tx-3) !important; padding-top: 4px; }
.lp-decide b { color: var(--tx); font-weight: 500; }
.lp-passo .fp-custo { margin-top: auto; padding-top: 8px; }

/* exemplo em storyboard */
.lp-story { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e3); counter-reset: none; }
.lp-cena { position: relative; display: flex; flex-direction: column; border-radius: var(--r-lg); background: var(--bg); border: 1px solid var(--linha); overflow: visible; }
.lp-cena:not(:last-child)::after { content: '→'; position: absolute; right: -14px; top: 30%; z-index: 2; width: 16px; text-align: center; color: var(--tx-3); font-size: 14px; }
.lp-cena-ilu { position: relative; aspect-ratio: 9 / 10; overflow: hidden; border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0; }
.lp-cena-ilu > .quadro, .lp-cena-ilu > .ex-midia { width: 100%; height: 100%; display: block; object-fit: cover; }
.lp-cena-n { position: absolute; left: 8px; top: 8px; font: 600 11px var(--f-mono); padding: 2px 7px; border-radius: 4px; background: rgba(0,0,0,.6); color: var(--ac); }
.lp-cena-txt { padding: var(--e3); display: flex; flex-direction: column; gap: 6px; font-size: var(--t-sm); }
.lp-cena-txt p { color: var(--tx-2); line-height: 1.45; }
.lp-k { display: inline-block; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; padding: 1px 6px; border-radius: 4px; margin-right: 6px; background: var(--info-suave); color: var(--info); }
.lp-k2 { background: var(--ac-suave); color: var(--ac); }

/* fórmula + custo */
.lp-duas { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: var(--e6); align-items: start; }
.formula { display: grid; grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr) 18px minmax(0, 1fr); gap: var(--e2); align-items: stretch; }
.fm-card { display: flex; flex-direction: column; gap: 2px; padding: var(--e3) var(--e4); border-radius: var(--r-lg); background: var(--bg); border: 1px solid var(--linha); font-size: var(--t-sm); }
.fm-card b { font-size: var(--t-md); } .fm-card span { color: var(--tx-3); }
.fm-op { font: 500 20px var(--f-mono); color: var(--ac); text-align: center; align-self: center; }
.formula > :nth-child(6) { grid-column: 1 / -1; line-height: 1; }
.fm-res { grid-column: 1 / -1; align-items: center; text-align: center; background: var(--ac-suave); border-color: var(--ac-linha); }
.fm-res b { color: var(--ac); font-size: var(--t-lg); }
.recibo { display: flex; flex-direction: column; border-radius: var(--r-lg); background: var(--bg); border: 1px solid var(--linha); padding: var(--e2) var(--e4) var(--e4); }
.recibo > div { display: flex; justify-content: space-between; gap: var(--e3); padding: 10px 0; border-bottom: 1px dashed var(--linha-2); font-size: var(--t-sm); color: var(--tx-2); }
.recibo small { color: var(--tx-3); }
.recibo b { font-family: var(--f-mono); font-weight: 500; color: var(--tx); white-space: nowrap; }
.recibo .gratis { color: var(--ok); }
.recibo-total { border-bottom: 0 !important; font-size: var(--t-md) !important; color: var(--tx) !important; font-weight: 600; }
.recibo-total b { color: var(--ac); font-size: var(--t-lg); }

/* regras e FAQ */
.lp-regras { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--e3); }
.lp-regras li { display: flex; flex-direction: column; gap: 6px; padding: var(--e4); border-radius: var(--r-lg); background: var(--bg); border: 1px solid var(--linha); }
.lp-regra-n { font: 500 28px/1 var(--f-mono); color: var(--ac); margin-bottom: 6px; }
.lp-regras b { font-size: var(--t-md); line-height: 1.3; } .lp-regras p { font-size: var(--t-sm); color: var(--tx-3); }
.faq { display: flex; flex-direction: column; border-radius: var(--r-lg); border: 1px solid var(--linha); background: var(--bg); overflow: hidden; }
.faq-item + .faq-item { border-top: 1px solid var(--linha); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--e3); padding: 14px var(--e4); font-weight: 500; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: var(--bg-1); }
.faq-item summary:focus-visible { border-radius: 0; }
.faq-item[open] .gira { transform: rotate(180deg); }
.faq-item p { padding: 0 var(--e4) var(--e4); color: var(--tx-2); font-size: var(--t-sm); max-width: 760px; }
.faq-item p b { color: var(--tx); }
.lp-fim { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--e3); padding: var(--e8) var(--e4) var(--e4); border-top: 1px solid var(--linha); }

@media (max-width: 1080px) {
  .lp-hero { grid-template-columns: minmax(0, 1fr); }
  .lp-passos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-story { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-cena:nth-child(2)::after { display: none; }
  .lp-duas { grid-template-columns: minmax(0, 1fr); }
  .lp-regras { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}
@media (max-width: 640px) {
  .landing { gap: var(--e8); }
  .lp-barra { margin-bottom: calc(var(--e3) * -1); }
  .lp-passos, .lp-story { grid-template-columns: minmax(0, 1fr); }
  .lp-passo { flex-direction: row; }
  .lp-mk { width: 112px; flex: none; border-bottom: 0; border-right: 1px solid var(--linha); display: grid; place-items: center; }
  .lp-cena { flex-direction: row; }
  .lp-cena-ilu { width: 96px; flex: none; aspect-ratio: auto; border-radius: calc(var(--r-lg) - 1px) 0 0 calc(var(--r-lg) - 1px); }
  .lp-cena::after { display: none; }
  .formula { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .formula > *, .formula > :nth-child(6) { grid-column: 1; }
  .fm-op { font-size: 16px; }
  .lp-cab-acao .btn { width: 100%; }
  .demo-palco { grid-template-columns: 96px 1fr; }
  .demo-frame { width: 96px; }
  .demo-voo { display: none; }
}

/* quadro de storyboard (reserva enquanto não há mídia real): low-key, sem desenhar personagem */
.quadro { position: relative; width: 100%; height: 100%; overflow: hidden; container-type: inline-size; isolation: isolate;
  background: linear-gradient(180deg, hsl(var(--h) 22% 8%), hsl(var(--h) 30% 3.5%)); }
.quadro > div { position: absolute; pointer-events: none; }
.q-luz { inset: 0; background:
  radial-gradient(75% 55% at -5% 42%, hsla(var(--h), 70%, 52%, .42), transparent 70%),
  radial-gradient(60% 40% at 55% 105%, hsla(var(--h), 45%, 30%, .35), transparent 70%); }
.q-paineis { inset: 0; opacity: .5;
  background: repeating-linear-gradient(90deg, hsla(var(--h), 35%, 22%, .35) 0 1px, transparent 1px 16.6%),
              linear-gradient(180deg, transparent 62%, hsla(var(--h), 30%, 14%, .5) 62.2%, transparent 63%); }
.q-janela { left: -10%; top: 6%; width: 46%; height: 70%; filter: blur(6px); opacity: .55; transform: skewY(-8deg);
  background: linear-gradient(90deg, hsla(40, 80%, 80%, .5), transparent 85%); mix-blend-mode: screen; }
.q-grao { inset: -20%; opacity: .22; mix-blend-mode: overlay; animation: grao 0.9s steps(3) infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@keyframes grao { 0% { transform: translate(0, 0); } 33% { transform: translate(-4%, 3%); } 66% { transform: translate(3%, -2%); } }
.q-vinheta { inset: 0; background: radial-gradient(ellipse 80% 70% at 45% 45%, transparent 45%, rgba(0,0,0,.78) 100%); box-shadow: inset 0 0 6cqw 2cqw rgba(0,0,0,.75); }
.q-hud { left: 7%; right: 7%; top: 5%; display: flex; justify-content: space-between; align-items: center;
  font: 500 max(7px, 4.8cqw)/1 var(--f-mono); color: rgba(255,255,255,.72); letter-spacing: .05em; }
.q-rec { display: inline-flex; align-items: center; gap: .5em; }
.q-rec i { width: .65em; height: .65em; border-radius: 50%; background: var(--rec); animation: piscar 1.4s steps(2) infinite; }
@keyframes piscar { 50% { opacity: .2; } }
.q-texto { left: 9%; right: 9%; bottom: 17%; display: flex; flex-direction: column; gap: 1.5cqw; }
.q-plano { font: 500 max(7px, 4.2cqw)/1 var(--f-mono); text-transform: uppercase; letter-spacing: .14em; color: hsla(var(--h), 70%, 70%, .85); }
.q-titulo { font: italic 400 max(14px, 12cqw)/1.02 var(--f-titulo); color: rgba(255,247,235,.92); letter-spacing: -.01em; text-wrap: balance; }
.q-selo { left: 7%; right: 7%; bottom: 5%; font: 500 max(7px, 3.8cqw)/1.3 var(--f); color: rgba(255,255,255,.55); }
.q-selo-curto { display: none; }
@container (max-width: 140px) { .q-selo-longo { display: none; } .q-selo-curto { display: inline; } .q-titulo { font-size: 16px; } .q-hud { display: none; } }
.lp-cena-plano { display: none; }
.lp-cena-ilu:has(.ex-midia) .lp-cena-plano { display: block; position: absolute; right: 8px; top: 8px; font: 500 10px var(--f-mono); padding: 2px 6px; border-radius: 4px; background: rgba(0,0,0,.6); color: var(--tx-2); z-index: 1; }
.lp-cena-n { z-index: 1; }
.lp-cena-ilu .quadro .q-hud { left: auto; right: 7%; justify-content: flex-end; gap: 1em; }

/* =====================================================================
   RODADA 3 — sistema vivo: fúcsia→coral (ação), ciano (IA), menta (sucesso)
   ===================================================================== */
body {
  background:
    radial-gradient(1100px 560px at 88% -12%, rgba(139, 92, 246, .10), transparent 60%),
    radial-gradient(900px 520px at -12% 8%, rgba(34, 211, 238, .055), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
::selection { background: rgba(139, 92, 246, .4); }
.marca-ico { background: var(--bg-2); }
.marca-ico::after { background: var(--ac-grad); box-shadow: 0 0 12px rgba(139, 92, 246, .75); }
.nav a.ativo { background: var(--bg-3); box-shadow: inset 0 -2px 0 var(--ac); }
.topo { background: rgba(5, 5, 10, .78); }

/* botões com profundidade */
.btn { transition: background var(--trans), border-color var(--trans), color var(--trans), transform var(--mola), box-shadow var(--trans), filter var(--trans), opacity var(--trans); }
.btn:active:not(:disabled) { transform: translateY(0) scale(.97); }
.btn-primario { position: relative; overflow: hidden; background: var(--ac-grad); color: var(--ac-tinta); font-weight: 650; box-shadow: var(--ac-brilho); }
.btn-primario::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.38) 50%, transparent 65%); transform: translateX(-130%); transition: transform .7s ease; }
.btn-primario:hover:not(:disabled) { background: var(--ac-grad); filter: brightness(1.07) saturate(1.05); transform: translateY(-1px);
  box-shadow: 0 16px 36px -12px rgba(139, 92, 246, .9), 0 6px 16px -6px rgba(244, 63, 94, .65); }
.btn-primario:hover:not(:disabled)::after { transform: translateX(130%); }
.btn-primario:disabled { filter: grayscale(.5); box-shadow: none; }
.btn-sec:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 20px -12px rgba(0,0,0,.8); }
.btn-escolhido { background: var(--ac-suave); border-color: var(--ac-linha); color: #c4b5fd; }
.btn-play { background: var(--ac-grad); box-shadow: var(--ac-brilho); }
.btn-play:hover:not(:disabled) { background: var(--ac-grad); filter: brightness(1.08); }
.link { color: #c4b5fd; }
.chip[aria-pressed="true"] { color: #c4b5fd; box-shadow: 0 0 0 1px var(--ac-linha) inset, 0 6px 16px -10px rgba(139,92,246,.7); }
.seg button[aria-pressed="true"] { background: var(--bg-4); box-shadow: 0 1px 2px rgba(0,0,0,.4), inset 0 -2px 0 var(--ac); }
.estetica[aria-pressed="true"] { border-color: var(--ac-linha); background: linear-gradient(135deg, rgba(139,92,246,.14), rgba(244,63,94,.06)); box-shadow: 0 10px 24px -16px rgba(139,92,246,.8); }
.tag-diretor { display: inline-flex; align-items: center; gap: 4px; background: var(--ciano-suave); color: var(--ciano); }
.tag-diretor .ico { width: 11px; height: 11px; }

/* cartões com profundidade */
.card-projeto, .lp-passo, .card-bib, .tomada, .lp-cena, .comece-card, .lp-regras li, .fm-card, .mont-sec {
  transition: transform var(--mola), border-color var(--trans), box-shadow var(--trans); }
.card-projeto:hover, .card-bib:hover, .lp-cena:hover { transform: translateY(-3px); box-shadow: var(--sombra-card); border-color: var(--linha-2); }
.tomada:hover { transform: translateY(-2px); box-shadow: var(--sombra-card); }
.tomada.escolhida { border-color: var(--ac-linha); box-shadow: 0 0 0 1px var(--ac-linha), 0 16px 34px -18px rgba(139,92,246,.8); }
.selo-escolha { background: var(--ac-grad); }
.tomada.nova { animation: chegar .55s var(--mola) both; }
.tomada.nova::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; animation: anel 2.2s ease-out forwards; }
@keyframes chegar { from { opacity: 0; transform: translateY(10px) scale(.96); } }
@keyframes anel { 0% { box-shadow: 0 0 0 2px var(--ac), 0 0 30px rgba(139,92,246,.6); } 100% { box-shadow: 0 0 0 2px transparent, 0 0 0 transparent; } }

/* status claros no storyboard */
.pill-rascunho { background: transparent; box-shadow: inset 0 0 0 1px var(--linha-2); color: var(--tx-3); }
.pill-animada i { box-shadow: 0 0 6px var(--ok); }
.sb-sel:has(.pill-frame) .sb-thumb { box-shadow: 0 0 0 2px var(--info); }
.sb-sel:has(.pill-animada) .sb-thumb { box-shadow: 0 0 0 2px var(--ok); }
.sb-sel:has(.pill-rascunho) .sb-thumb { outline: 1px dashed var(--linha-2); outline-offset: -1px; }
.sb-item.ativo .sb-sel { background: linear-gradient(90deg, rgba(139,92,246,.10), var(--bg-2) 60%); }
.sb-item.ativo .sb-sel::before { background: var(--ac-grad); }
.sb-gerando { background: var(--ac); box-shadow: 0 0 8px var(--ac); }
.abas [role=tab][aria-selected="true"] { border-bottom-color: transparent; background: var(--ac-grad) bottom / 100% 2px no-repeat; }
[aria-selected="true"] .aba-num, [aria-selected="true"].feito .aba-num { background: var(--ac-grad); color: var(--ac-tinta); }
.prog-barra span { background: var(--ac-grad); box-shadow: 0 0 12px rgba(139,92,246,.6); }
.passo-trilha li.atual .pt-num { background: var(--ac-grad); }
.passo-faixa:not(.passo-mini) { background: color-mix(in srgb, var(--ac) 6%, var(--bg-1)); }
.proj-abas a.ativo .ico { color: var(--ac); }
.tl-clip[aria-pressed="true"] { border-color: var(--ac); box-shadow: 0 0 0 1px var(--ac), 0 10px 24px -12px rgba(139,92,246,.8); }
.tl-cta { background: var(--ac-grad); }
.export-res { border-top-color: var(--linha); }

/* estados vazios caprichados */
.vazio-ico { border: 1px solid transparent; background: linear-gradient(var(--bg-2), var(--bg-2)) padding-box, var(--ac-grad) border-box;
  color: #c4b5fd; box-shadow: 0 0 34px -8px rgba(139,92,246,.55); }
.vazio-hero { background: radial-gradient(60% 80% at 50% 0%, rgba(139,92,246,.07), transparent 70%), var(--bg-1); }

/* toasts bonitos */
.toast { background: rgba(26, 26, 36, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 14px;
  padding: 10px 8px 10px 12px; box-shadow: 0 18px 40px -16px rgba(0,0,0,.8), 0 0 0 1px var(--linha-2); border: 0; animation: toastIn 360ms var(--mola); }
@keyframes toastIn { from { opacity: 0; transform: translateX(16px) scale(.96); } }
.toast-ponto { width: 8px; height: 8px; }
.toast-ok { box-shadow: 0 18px 40px -16px rgba(0,0,0,.8), 0 0 0 1px rgba(16,185,129,.35), 0 0 30px -12px rgba(16,185,129,.5); }
.toast-ok .toast-ponto { width: 20px; height: 20px; position: relative; background: var(--ok); box-shadow: 0 0 0 4px var(--ok-suave); }
.toast-ok .toast-ponto::after { content: ''; position: absolute; left: 7px; top: 4px; width: 5px; height: 9px; border: solid #03261a; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.toast-erro { box-shadow: 0 18px 40px -16px rgba(0,0,0,.8), 0 0 0 1px rgba(248,113,113,.4); }
.toast-acao { color: #c4b5fd; }

/* confete */
.confete { position: fixed; z-index: 80; width: 0; height: 0; pointer-events: none; }
.confete i { position: absolute; left: 0; top: 0; width: 6px; height: 10px; border-radius: 2px; opacity: 0; animation: confete 1.15s cubic-bezier(.15, .7, .3, 1) forwards; }
.confete i.redondo { width: 6px; height: 6px; border-radius: 50%; }
@keyframes confete { 0% { opacity: 1; transform: translate(0, 0) rotate(0) scale(.5); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 70px)) rotate(var(--rot)) scale(1); } }

/* esqueleto de carregamento */
.esqueleto { background: linear-gradient(100deg, var(--bg-2) 30%, var(--bg-3) 50%, var(--bg-2) 70%); background-size: 300% 100%; animation: brilho 1.4s linear infinite; border-radius: 10px; }
.esq-titulo { width: 240px; height: 34px; }
.esq-linha { width: min(360px, 80%); height: 14px; margin: 12px 0 28px; }
.esq-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--e4); }
.esq-card { height: 260px; border-radius: var(--r-lg); }

/* entradas suaves */
.pagina, .estudio-corpo, .montagem { animation: paginaIn .34s cubic-bezier(.2, .7, .3, 1) both; }
.painel { animation: paginaIn .22s ease-out both; }
@keyframes paginaIn { from { opacity: 0; transform: translateY(6px); } }

/* ---------------- home: vitrine ---------------- */
.lp-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; }
.lp-kicker { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-size: 12px; font-weight: 600; color: var(--tx);
  padding: 5px 12px 5px 9px; border-radius: var(--r-full); border: 1px solid transparent;
  background: linear-gradient(var(--bg-2), var(--bg-2)) padding-box, var(--ac-grad) border-box; }
.lp-kicker i { width: 8px; height: 8px; border-radius: 50%; background: var(--ac-grad); box-shadow: 0 0 10px var(--ac); animation: pulsar 2.2s infinite; }
.lp-hero h2 em { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; padding-right: .06em;
  background: var(--ac-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-selos li b { background: var(--ac-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vitrine { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.vit-glow { position: absolute; inset: 6% 0 16%; z-index: 0; filter: blur(34px);
  background: radial-gradient(closest-side, rgba(139,92,246,.34), rgba(244,63,94,.14) 55%, transparent); }
.vit-pilha { position: relative; z-index: 1; width: min(100%, 470px); height: 500px; }
.vit-principal { position: absolute; left: 50%; top: 0; width: 280px; aspect-ratio: 768 / 1344; transform: translateX(-50%); z-index: 2;
  border-radius: 18px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.08); }
.vit-principal > img, .vit-principal > .quadro { width: 100%; height: 100%; object-fit: cover; display: block; }
.vit-kb { animation: kbLento 20s ease-in-out infinite alternate; transform-origin: 50% 40%; }
@keyframes kbLento { from { transform: scale(1.02); } to { transform: scale(1.13) translate(-1.5%, 1%); } }
.vit-lado { position: absolute; width: 168px; aspect-ratio: 400 / 700; border-radius: 14px; overflow: hidden; z-index: 1;
  box-shadow: 0 30px 60px -28px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.06); transform: translateY(var(--py, 0px)) rotate(var(--rot)); }
.vit-lado > img, .vit-lado > .quadro { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(.82) saturate(.95); }
.vit-l1 { left: 0; top: 76px; --rot: -6deg; }
.vit-l2 { right: 0; top: 160px; --rot: 5deg; }
.vit-hud { position: absolute; left: 12px; right: 12px; top: 12px; display: flex; justify-content: space-between; z-index: 1;
  font: 500 11px var(--f-mono); color: rgba(255,255,255,.88); text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.vit-hud span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.vit-hud i { width: 7px; height: 7px; border-radius: 50%; background: var(--rec); animation: piscar 1.4s steps(2) infinite; }
.vit-leg { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--tx-2);
  padding: 6px 12px; border-radius: var(--r-full); background: rgba(18,18,25,.82); border: 1px solid var(--linha-2); backdrop-filter: blur(8px); text-align: center; }
.vit-leg b { color: var(--tx); font-weight: 600; }
.vit-ponto { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); flex: none; }

/* Diretor IA: antes e depois */
.diretor-bloco { padding: 28px; border-radius: var(--r-xl); border: 1px solid var(--linha);
  background: radial-gradient(70% 120% at 0% 0%, rgba(34,211,238,.08), transparent 60%), radial-gradient(70% 120% at 100% 100%, rgba(139,92,246,.08), transparent 60%), var(--bg); }
.diretor-bloco .lp-cab h3 { font-size: clamp(20px, 2.4vw, 26px); max-width: 760px; margin-top: 10px; letter-spacing: -.02em; line-height: 1.2; }
.diretor-bloco .lp-cab p { max-width: 680px; }
.antes-depois { display: grid; grid-template-columns: minmax(0, .8fr) 44px minmax(0, 1.55fr) 150px; gap: 14px; align-items: stretch; }
.ad-card { padding: 16px; border-radius: var(--r-lg); background: var(--bg-1); border: 1px solid var(--linha); display: flex; flex-direction: column; gap: 10px; }
.ad-rot { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--tx-3); }
.ad-rot small { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 6px; }
.ad-ideia { font: italic 400 19px/1.35 var(--f-serif); color: var(--tx); }
.ad-depois { border-color: rgba(34,211,238,.3); box-shadow: 0 0 40px -24px rgba(34,211,238,.6); }
.ad-prompt { font: 400 12.5px/1.7 var(--f-mono); color: var(--tx-2); }
.ad-prompt mark { background: var(--ciano-suave); color: var(--ciano); border-radius: 3px; padding: 0 2px; }
.ad-seta { display: grid; place-items: center; }
.ad-seta span { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--ciano-suave); color: var(--ciano); box-shadow: 0 0 24px rgba(34,211,238,.4); }
.ad-res { position: relative; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--linha-2); min-height: 200px; }
.ad-res > img, .ad-res > .quadro { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ad-res .ad-rot { position: absolute; left: 8px; bottom: 8px; color: #fff; background: rgba(0,0,0,.6); padding: 2px 7px; border-radius: 4px; }

/* exemplo: cartões com foto real */
.lp-cena-ilu { aspect-ratio: 9 / 13; }
.lp-cena-ilu > .ex-midia { transition: transform .6s ease; }
.lp-cena:hover .lp-cena-ilu > .ex-midia { transform: scale(1.04); }
.lp-cena-ideia { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.lp-k { background: var(--info-suave); color: var(--info); }
.lp-k2 { background: var(--ac-suave); color: #c4b5fd; }

/* galeria de estéticas */
.galeria-est { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.est-card { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; text-align: left; border-radius: 14px; overflow: hidden;
  background: var(--bg); border: 1px solid var(--linha); transition: transform var(--mola), border-color var(--trans), box-shadow var(--trans); }
.est-card:hover, .est-card:focus-visible { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c) 60%, transparent);
  box-shadow: 0 22px 40px -22px color-mix(in srgb, var(--c) 70%, transparent); }
.est-card > .arte { aspect-ratio: 4 / 5; height: auto; flex: none; }
.est-card-info { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 3px; }
.est-card-info b { font-size: var(--t-md); }
.est-card-info > span:not(.est-badges) { font-size: var(--t-xs); color: var(--tx-3); }
.est-badges { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.est-badges:empty { display: none; }
.est-card-cta { position: absolute; right: 10px; top: 10px; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 650;
  padding: 4px 9px; border-radius: var(--r-full); background: var(--ac-grad); color: var(--ac-tinta); opacity: 0; transform: translateY(-4px); transition: opacity var(--trans), transform var(--mola); }
.est-card-cta .ico { width: 12px; height: 12px; }
.est-card:hover .est-card-cta, .est-card:focus-visible .est-card-cta { opacity: 1; transform: none; }
@media (hover: none) { .est-card-cta { opacity: 1; transform: none; } }

/* arte por estética (CSS puro) */
.arte { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 80% at 30% 20%, color-mix(in srgb, var(--c) 50%, #000), #07070a 78%); }
.arte i { position: absolute; display: block; font-style: normal; }
.a-vinheta { inset: 0; background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.6)); z-index: 5; }
.arte-foto { background: #111; }
.arte-foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.est-card:hover .arte-foto img { transform: scale(1.06); }
.a-grao { inset: -20%; opacity: .22; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.a-janela { left: -10%; top: 8%; width: 46%; height: 70%; filter: blur(6px); transform: skewY(-8deg); background: linear-gradient(90deg, rgba(255,214,160,.45), transparent 85%); }
.a-paineis { inset: 0; background: repeating-linear-gradient(90deg, rgba(200,148,90,.12) 0 1px, transparent 1px 16.6%); }
.arte-satira70 { background: linear-gradient(180deg, #3d4128, #12130b); }
.arte-celular { background: linear-gradient(160deg, #1f4278, #0a1222); }
.a-barra { top: 5%; left: 32%; right: 32%; height: 3.5%; border-radius: 99px; background: rgba(255,255,255,.22); }
.a-rec { top: 12%; left: 8%; font: 600 9px var(--f-mono); color: #ff7b7b; }
.a-acoes { right: 7%; bottom: 14%; display: flex !important; flex-direction: column; gap: 8px; }
.a-acoes b { width: 15px; height: 15px; border-radius: 50%; background: rgba(255,255,255,.3); }
.arte-cinema { background: radial-gradient(70% 45% at 50% 50%, rgba(255,184,107,.28), transparent 70%), linear-gradient(180deg, #2a1607, #0a0603); }
.a-tarja { left: 0; right: 0; height: 13%; background: #000; z-index: 4; }
.a-tarja-c { top: 0; } .a-tarja-b { bottom: 0; }
.a-flare { top: 46%; left: -10%; right: -10%; height: 2px; background: linear-gradient(90deg, transparent, rgba(255,184,107,.95), rgba(120,180,255,.8), transparent); box-shadow: 0 0 16px 4px rgba(255,170,90,.45); }
.arte-cctv { background: radial-gradient(80% 60% at 50% 45%, #1f3b22, #08120a); filter: saturate(.8); }
.a-linhas { inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 3px); }
.a-txt { top: 7%; left: 7%; font: 600 8.5px var(--f-mono); color: #b7f5a8; }
.a-rec2 { top: 7%; right: 7%; font: 600 8.5px var(--f-mono); color: #ff7b7b; }
.arte-vlog { background: linear-gradient(160deg, #5a1f42, #160812); }
.a-bokeh { width: 42%; aspect-ratio: 1; left: 6%; top: 12%; border-radius: 50%; background: radial-gradient(circle, rgba(255,122,182,.6), transparent 65%); }
.a-bokeh.b2 { width: 32%; left: auto; right: 4%; top: 46%; background: radial-gradient(circle, rgba(255,190,120,.45), transparent 65%); }
.a-bokeh.b3 { width: 26%; left: 34%; top: auto; bottom: 8%; }
.a-aro { width: 36%; aspect-ratio: 1; left: 32%; top: 30%; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.55); }
.arte-noticia { background: linear-gradient(180deg, #14244a, #070b16); }
.a-estudio { inset: 0; background: radial-gradient(60% 40% at 50% 35%, rgba(90,140,255,.38), transparent); }
.a-gc { left: 6%; right: 6%; bottom: 17%; height: 14%; border-radius: 3px; background: #eef0f6; display: flex !important; align-items: center; gap: 6px; padding: 0 6px; }
.a-gc b { font: 800 7.5px var(--f); color: #fff; background: #e53935; padding: 2px 4px; border-radius: 2px; }
.a-gc span { flex: 1; height: 3px; border-radius: 2px; background: #9aa3b8; }
.a-ticker { left: 0; right: 0; bottom: 7%; height: 6%; background: #e53935; }
.arte-anos90 { background: linear-gradient(160deg, #3a2457, #120a1c); }
.arte-anos90 .a-linhas { background: repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 2px, transparent 2px 5px), linear-gradient(180deg, transparent 62%, rgba(255,255,255,.12) 64%, transparent 68%); }
.a-vhs, .a-data { font: 700 11px var(--f-mono); color: #fff; text-shadow: 2px 0 rgba(255,0,90,.75), -2px 0 rgba(0,220,255,.75); }
.a-vhs { top: 8%; left: 8%; } .a-data { bottom: 9%; right: 8%; font-size: 9px; }
.arte-produto { background: linear-gradient(180deg, #0f2f30, #061212); }
.a-spot { top: -10%; left: 22%; width: 56%; height: 92%; filter: blur(5px); clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, rgba(150,240,240,.38), transparent); }
.a-podio { bottom: 17%; left: 22%; width: 56%; height: 11%; border-radius: 50%; background: radial-gradient(ellipse, rgba(200,255,255,.5), rgba(95,212,212,.14) 60%, transparent 72%); }
.a-brilho { bottom: 24%; left: 41%; width: 18%; aspect-ratio: 1; border-radius: 28%; background: linear-gradient(135deg, #eaffff, #5fd4d4 60%, #1f6d6d); box-shadow: 0 10px 18px -6px rgba(0,0,0,.7); }
.arte-retrato { background: linear-gradient(180deg, #2a1b10, #090604); }
.arte-animacao { background: linear-gradient(160deg, #3f3510, #120f05); }
.a-bola { border-radius: 50%; box-shadow: 0 14px 22px -10px rgba(0,0,0,.7); }
.a-bola.b1 { width: 36%; aspect-ratio: 1; left: 16%; top: 30%; background: radial-gradient(circle at 35% 30%, #fff6c9, #ffd36b 35%, #b8860b 75%); }
.a-bola.b2 { width: 27%; aspect-ratio: 1; right: 12%; top: 50%; background: radial-gradient(circle at 35% 30%, #ffd1e3, #ff7ab6 40%, #a0305f 78%); }
.a-bola.b3 { width: 20%; aspect-ratio: 1; left: 44%; top: 15%; background: radial-gradient(circle at 35% 30%, #d6fbff, #4fd8f5 40%, #1d6f86 78%); }

/* seletor de estética da cena com miniatura */
.estetica { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; align-items: start; }
.est-mini { width: 38px; aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden; border: 1px solid var(--linha-2); display: block; }
.est-mini .a-rec, .est-mini .a-txt, .est-mini .a-rec2, .est-mini .a-vhs, .est-mini .a-data, .est-mini .a-gc b, .est-mini .a-acoes { display: none !important; }
.est-corpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.est-corpo .est-desc, .est-corpo .est-tags { padding-left: 0; }
.estetica:hover .est-mini { border-color: color-mix(in srgb, var(--c) 60%, transparent); }

/* capa de projeto sem imagem */
.cp-vazio > .arte { position: absolute; inset: 0; }
.cp-vazio-ico { position: relative; z-index: 6; color: rgba(255,255,255,.75); }

@media (max-width: 1080px) {
  .antes-depois { grid-template-columns: minmax(0, 1fr); }
  .ad-seta span { transform: rotate(90deg); }
  .ad-res { min-height: 220px; }
  .ad-res > img { object-position: 50% 35%; }
  .vit-pilha { height: 470px; }
}
@media (max-width: 640px) {
  .diretor-bloco { padding: var(--e4); }
  .vit-pilha { height: 390px; }
  .vit-principal { width: 214px; }
  .vit-lado { width: 118px; }
  .vit-l1 { top: 60px; } .vit-l2 { top: 120px; }
  .galeria-est { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .est-card-info { padding: 10px; }
  .est-card-info > span:not(.est-badges) { display: none; }
  .lp-cena-ilu { aspect-ratio: auto; }
  .esq-grade { grid-template-columns: minmax(0, 1fr); }
  .lp-hero { gap: var(--e6); }
}
@media (prefers-reduced-motion: reduce) {
  .vit-kb, .lp-kicker i, .vit-hud i { animation: none !important; }
  .vit-lado { transform: rotate(var(--rot)); }
}


/* =====================================================================
   FRAME LAB — sistema visual roxo/rosa
   ===================================================================== */
body {
  background:
    radial-gradient(1000px 520px at 85% -10%, rgba(139, 92, 246, .14), transparent 60%),
    radial-gradient(800px 480px at -10% 6%, rgba(34, 211, 238, .05), transparent 60%),
    radial-gradient(700px 420px at 50% 110%, rgba(244, 63, 94, .05), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
h1, h2, h3, h4, .marca, .lp-hero h2, .cf-hero h2, .vazio h2, .modal-topo h2, .proj-nome, .cena-titulo, .mont-topo h2 {
  font-family: var(--f-titulo); letter-spacing: -.03em;
}
h1 { font-weight: 800; } h2, h3 { font-weight: 700; }
.topo { background: rgba(5, 5, 10, .8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: rgba(255,255,255,.05); }
::selection { background: var(--ac); color: #fff; }

/* barra de progresso do scroll  */
#progressoScroll { position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 60; background: var(--ac-grad); box-shadow: 0 0 10px rgba(139,92,246,.6); transition: width .1s linear; pointer-events: none; }

/* logo: orbe roxa + "Frame Lab." com ponto rosa */
.marca { gap: 10px; font-weight: 800; font-size: 17px; letter-spacing: -.04em; }
.marca-ico { width: 22px; height: 22px; border-radius: 50%; border: 0; background: radial-gradient(circle at 35% 30%, #c4b5fd 0%, #8b5cf6 38%, #5b21b6 75%, #2e1065 100%);
  box-shadow: 0 0 16px rgba(139, 92, 246, .65), inset 0 -3px 6px rgba(244, 63, 94, .35); }
.marca-ico::after { display: none; }
.marca-ponto { color: var(--rosa); }
.marca-dl { font: 600 10.5px/1 var(--f); letter-spacing: .02em; color: var(--tx-3); padding: 3px 7px; border-radius: var(--r-full); border: 1px solid var(--linha-2); margin-left: 2px; }
.nav a.ativo { background: var(--ac-suave); color: var(--ac-claro); box-shadow: none; }

/* botões roxo com glow, sobe no hover */
.btn { border-radius: var(--r-lg); }
.btn-primario { background: var(--ac-btn); color: #fff; font-weight: 700; box-shadow: var(--ac-brilho); }
.btn-primario:hover:not(:disabled) { background: var(--ac-btn-h); filter: none; transform: translateY(-2px); box-shadow: 0 12px 30px rgba(139, 92, 246, .5); }
.btn-primario.btn-grande { animation: pulsoCta 2.6s ease-out infinite; }
.btn-primario.btn-grande:hover { animation: none; }
@keyframes pulsoCta { 0% { box-shadow: var(--ac-brilho), 0 0 0 0 rgba(139,92,246,.45); } 70% { box-shadow: var(--ac-brilho), 0 0 0 14px rgba(139,92,246,0); } 100% { box-shadow: var(--ac-brilho), 0 0 0 0 rgba(139,92,246,0); } }
.btn-sec { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.1); backdrop-filter: blur(8px); }
.btn-sec:hover:not(:disabled) { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); }
.btn-escolhido { color: var(--ac-claro); }
.link { color: var(--ac-claro); text-decoration-color: rgba(196,181,253,.4); }
.chip[aria-pressed="true"] { color: var(--ac-claro); }
.lp-k2 { color: var(--ac-claro); }
.toast-acao { color: var(--ac-claro); }
.vazio-ico { color: var(--ac-claro); }

/* ripple e "click burst"  */
.btn, .btn-icone, .chip, .est-card, .tl-clip { position: relative; overflow: hidden; }
.ripple { position: absolute; border-radius: 50%; pointer-events: none; transform: scale(0); background: rgba(255, 255, 255, .28); animation: ripple .6s linear forwards; }
@keyframes ripple { to { transform: scale(3.2); opacity: 0; } }
.estouro { position: fixed; z-index: 90; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; border: 2px solid var(--ac); pointer-events: none; animation: estouro .6s cubic-bezier(.16, 1, .3, 1) forwards; }
@keyframes estouro { from { transform: scale(.4); opacity: 1; } to { transform: scale(5.5); opacity: 0; } }

/* preenchimentos com texto: roxo AA */
.pular, .selo-final, .escolha-check, .demo-play, .tl-cta, .est-card-cta, .selo-escolha,
[aria-selected="true"] .aba-num, [aria-selected="true"].feito .aba-num, .passo-trilha li.atual .pt-num { background: var(--ac-fill); color: #fff; }
.btn-play { background: var(--ac-btn); color: #fff; }
.btn-play:hover:not(:disabled) { background: var(--ac-btn-h); color: #fff; }
.switch input:checked + .switch-trilho { background: var(--ac-fill); }
.switch input:checked + .switch-trilho::after { background: #fff; }
.abas [role=tab][aria-selected="true"] { background: var(--ac-grad) bottom / 100% 2px no-repeat; }
.tag-diretor { background: var(--ciano-suave); color: var(--ciano); }
.lp-kicker i { background: var(--ac-grad); box-shadow: 0 0 10px var(--ac); }
.lp-hero h2 em { font-family: var(--f-titulo); font-style: normal; font-weight: 800; letter-spacing: -.04em; padding-right: 0; }
.ad-ideia { font: italic 500 17px/1.45 var(--f); }
.q-titulo { font-family: var(--f-titulo); font-style: normal; font-weight: 700; letter-spacing: -.03em; }
.toast-ok .toast-ponto { background: var(--ok); }
.confete i { box-shadow: 0 0 6px currentColor; }

/* glow-orb atrás do hero  */
.vit-glow { background: radial-gradient(closest-side, rgba(139,92,246,.42), rgba(244,63,94,.12) 60%, transparent); }
.lp-rodape-dl { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--tx-3); font-size: var(--t-xs); padding: var(--e6) 0 0; }
.lp-rodape-dl b { color: var(--tx-2); font-family: var(--f-titulo); font-weight: 800; letter-spacing: -.03em; }
.lp-rodape-dl b span { color: var(--rosa); }
.orbe-mini { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #c4b5fd, #8b5cf6 45%, #4c1d95); box-shadow: 0 0 10px rgba(139,92,246,.6); }
@media (max-width: 640px) { .marca-dl { display: none; } }
@media (prefers-reduced-motion: reduce) { .btn-primario.btn-grande { animation: none; } .ripple, .estouro { display: none; } }

/* cartões do exemplo: compactos, altura natural */
.lp-story { align-items: start; }
.lp-cena { height: auto; }
.lp-cena-txt { gap: 6px; }
.lp-cena-txt > b { font-family: var(--f-titulo); font-size: 15px; letter-spacing: -.02em; }
.lp-cena-resumo { color: var(--tx-2); font-size: var(--t-sm); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ver-prompt { margin-top: 2px; border-top: 1px solid var(--linha); padding-top: 8px; }
.ver-prompt summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-xs); font-weight: 600; color: var(--ac-claro); border-radius: var(--r-sm); }
.ver-prompt summary::-webkit-details-marker { display: none; }
.ver-prompt summary .ico { width: 14px; height: 14px; }
.ver-prompt[open] summary .gira { transform: rotate(180deg); }
.ver-prompt p { font-size: var(--t-xs); color: var(--tx-3); line-height: 1.55; margin-top: 8px; }
.lp-cena-ilu { aspect-ratio: 9 / 14; }
@media (max-width: 640px) { .lp-cena-ilu { aspect-ratio: auto; } }
.lp-cena-n { color: var(--ac-claro); }
.diretor-bloco .lp-cab p { margin-top: 8px; }
.lp-kicker i { opacity: 1; }
@media (max-width: 1080px) {
  .lp-hero { grid-template-columns: minmax(0, 1fr); gap: var(--e8); }
  .vitrine { order: 2; }
}
@media (max-width: 640px) {
  .lp-cena-plano { display: none !important; }
  .vit-leg { font-size: 11px; max-width: 100%; }
  .lp-hero h2 { font-size: clamp(30px, 9vw, 40px); }
}

/* ================= marketing pré-login  ================= */
body.pagina-marketing { overflow-x: hidden; }
body.pagina-marketing .topo { background: transparent; border-bottom-color: transparent; backdrop-filter: none; }
body.pagina-marketing #conteudo { padding: 0; }
body.pagina-marketing .pagina,
body.pagina-marketing .pagina-home { max-width: none; gap: 0; padding: 0; margin: 0; }
.mk-landing {
  position: relative; min-height: calc(100vh - var(--topo-h));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(28px, 5vh, 48px); padding: clamp(24px, 5vw, 56px) clamp(20px, 4vw, 40px) 40px;
  text-align: center; overflow: hidden;
}
.mk-atmosfera {
  position: absolute; inset: -20% -10% auto; height: 70vh; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 55% 50% at 50% 0%, rgba(139,92,246,.22), transparent 70%),
    radial-gradient(ellipse 40% 40% at 85% 40%, rgba(244,63,94,.1), transparent 70%),
    radial-gradient(ellipse 35% 35% at 10% 50%, rgba(139,92,246,.08), transparent 70%);
  animation: mkPulse 10s ease-in-out infinite alternate;
}
@keyframes mkPulse { from { opacity: .85; transform: scale(1); } to { opacity: 1; transform: scale(1.04); } }
.mk-hero { position: relative; z-index: 1; max-width: 720px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.mk-brand {
  font-family: 'Plus Jakarta Sans', var(--f-titulo), var(--f);
  font-size: clamp(42px, 8vw, 72px); font-weight: 800; letter-spacing: -.045em; line-height: 1;
  color: var(--tx); margin: 0; animation: mkRise .7s cubic-bezier(.16,1,.3,1) both;
}
.mk-brand span { color: var(--ac); }
.mk-kicker {
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ac-claro); margin: 0; animation: mkRise .7s .08s cubic-bezier(.16,1,.3,1) both;
}
.mk-hero h1 {
  font-family: 'Plus Jakarta Sans', var(--f-titulo), var(--f);
  font-size: clamp(22px, 3.6vw, 34px); font-weight: 650; letter-spacing: -.03em; line-height: 1.2;
  color: var(--tx); margin: 0; max-width: 18ch; animation: mkRise .7s .14s cubic-bezier(.16,1,.3,1) both;
}
.mk-lead {
  font-size: clamp(15px, 2vw, 17px); color: var(--tx-2); line-height: 1.55; max-width: 38ch; margin: 0;
  animation: mkRise .7s .2s cubic-bezier(.16,1,.3,1) both;
}
.mk-acoes { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 8px;
  animation: mkRise .7s .28s cubic-bezier(.16,1,.3,1) both; }
@keyframes mkRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.mk-vitrine { position: relative; z-index: 1; margin: 0; width: min(100%, 520px);
  animation: mkRise .8s .35s cubic-bezier(.16,1,.3,1) both; }
.mk-vitrine .vit-pilha { width: 100%; height: min(52vh, 460px); margin: 0 auto; }
.mk-vitrine .vit-principal { width: min(52%, 240px); }
.mk-vitrine .vit-lado { width: min(34%, 150px); }
.mk-rodape {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 12px; color: var(--tx-3); max-width: 420px;
}
.mk-rodape b { color: var(--tx-2); font-family: 'Plus Jakarta Sans', var(--f-titulo), var(--f); font-weight: 800; letter-spacing: -.03em; }
.mk-rodape b span { color: var(--ac); }
@media (max-width: 640px) {
  .mk-acoes .btn { flex: 1 1 100%; }
  .mk-vitrine .vit-pilha { height: 340px; }
  .mk-hero h1 { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mk-atmosfera, .mk-brand, .mk-kicker, .mk-hero h1, .mk-lead, .mk-acoes, .mk-vitrine { animation: none; }
}

/* conta + créditos */
.conta-barra { display: flex; align-items: center; gap: 8px; }
.pill-creditos {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px;
  border-radius: var(--r-full); border: 1px solid var(--linha-2); background: var(--bg-2);
  color: var(--tx-2); font-size: 12px; font-weight: 500; cursor: pointer;
}
.pill-creditos:hover { border-color: var(--ac-linha); color: var(--tx); }
.pill-creditos b { font-family: var(--f-mono); font-weight: 600; color: var(--ac-claro); }
.pill-ponto { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.menu-conta { position: relative; }
.btn-avatar {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--ac-linha);
  background: var(--ac-suave); color: var(--ac-claro); font: 700 13px var(--f-titulo); cursor: pointer;
}
.btn-avatar:hover { background: rgba(139,92,246,.22); }
.menu-conta-pop {
  position: absolute; right: 0; top: calc(100% + 8px); width: 260px; padding: 14px;
  border-radius: var(--r-lg); border: 1px solid var(--linha-2); background: var(--bg-1);
  box-shadow: 0 20px 50px rgba(0,0,0,.45); display: flex; flex-direction: column; gap: 10px; z-index: 40;
}
.menu-conta-nome { font-weight: 600; font-size: 14px; margin: 0; }
.menu-conta-email { font-size: 12px; color: var(--tx-3); margin: -6px 0 0; word-break: break-all; }
.menu-conta-saldo {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  padding: 10px 12px; border-radius: var(--r-md); background: var(--bg); border: 1px solid var(--linha);
  font-size: 12px; color: var(--tx-3);
}
.menu-conta-saldo strong { color: var(--tx); font-size: 13px; }
.loja-corpo { display: flex; flex-direction: column; gap: 14px; }
.loja-corpo > .ajuda { margin: 0; }
.loja-packs { display: grid; gap: 10px; }
.loja-pack {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; text-align: left;
  padding: 14px 16px; border-radius: var(--r-lg); border: 1px solid var(--linha-2);
  background: var(--bg); color: inherit; cursor: pointer; transition: border-color var(--trans), transform var(--trans);
}
.loja-pack:hover { border-color: var(--ac-linha); transform: translateY(-1px); }
.loja-pack.destaque { border-color: var(--ac-linha); background: var(--ac-suave); }
.loja-pack-nome { font-weight: 600; grid-column: 1; }
.loja-pack-nome em { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ac); margin-left: 6px; }
.loja-pack-cred { grid-column: 1; font-size: 13px; color: var(--tx-2); }
.loja-pack-cred b { color: var(--tx); font-family: var(--f-mono); }
.loja-pack-preco { grid-column: 2; grid-row: 1 / span 2; align-self: center; font: 700 18px var(--f-mono); color: var(--ac-claro); }
.loja-pack-desc { grid-column: 1 / -1; font-size: 12px; color: var(--tx-3); margin-top: 4px; }

/* login full-screen (porta de entrada) */
.tela-login {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center;
  padding: 24px; background: var(--bg);
}
.tela-login[hidden] { display: none !important; }
body.login-obrigatorio .topo,
body.login-obrigatorio #conteudo,
body.login-obrigatorio #progressoScroll { visibility: hidden; }
.login-orbe { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(40px); }
.login-orbe-a { width: 420px; height: 420px; top: -120px; left: 50%; transform: translateX(-50%); background: rgba(139,92,246,.16); }
.login-orbe-b { width: 280px; height: 280px; bottom: -80px; right: -40px; background: rgba(244,63,94,.1); }
.login-card {
  position: relative; width: min(100%, 420px); padding: 36px 32px; border-radius: 20px;
  background: var(--bg-1); border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 40px 80px rgba(0,0,0,.55), 0 0 60px rgba(139,92,246,.05);
  animation: mkRise .45s cubic-bezier(.16,1,.3,1) both;
}
.login-fechar { position: absolute; top: 12px; right: 12px; }
.login-brand { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 22px; }
.login-orbe-marca {
  width: 44px; height: 44px; border-radius: 14px;
  background: var(--bg-3); border: 1px solid var(--linha-2); position: relative;
  box-shadow: 0 0 28px rgba(139,92,246,.35);
}
.login-orbe-marca::after {
  content: ''; position: absolute; inset: 10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #c4b5fd, #8b5cf6 45%, #4c1d95);
  box-shadow: 0 0 16px rgba(139,92,246,.7);
}
.login-logo {
  font-family: 'Plus Jakarta Sans', var(--f-titulo), var(--f);
  font-size: 26px; font-weight: 800; letter-spacing: -.04em; text-align: center; margin: 0; line-height: 1;
}
.login-logo span { color: var(--ac); }
.login-tag { text-align: center; font-size: 12px; color: var(--tx-3); margin: 0; }
.login-demo {
  margin: 0 0 16px; padding: 10px 12px; border-radius: 10px;
  background: rgba(139,92,246,.06); border: 1px solid rgba(139,92,246,.18);
  font-size: 12px; color: var(--tx-3); text-align: center; line-height: 1.45;
}
.login-demo code { font-family: var(--f-mono); color: var(--ac-claro); font-size: 12px; }
.login-demo-btn {
  background: none; border: 0; padding: 0; color: var(--ac-claro); font: inherit; font-weight: 600;
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.login-demo-btn:hover { color: var(--tx); }
.login-card h2 { font-size: 20px; font-weight: 700; letter-spacing: -.03em; margin: 0 0 6px; }
.login-card #loginHeader p, .login-card #registerHeader p { font-size: 13px; color: var(--tx-3); margin: 0 0 20px; line-height: 1.45; }
.login-card .field { margin-bottom: 14px; }
.login-card .field label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 6px; }
.login-card .field input {
  width: 100%; height: 46px; padding: 0 14px; border-radius: 10px;
  background: rgba(255,255,255,.03); border: 1px solid var(--linha-2); color: var(--tx); font: inherit;
}
.login-card .field input:focus { outline: none; border-color: var(--ac); background: rgba(139,92,246,.05); }
.login-card .err-box {
  background: rgba(244,63,94,.08); border: 1px solid rgba(244,63,94,.25); color: #fb7185;
  border-radius: 10px; padding: 10px 12px; font-size: 13px; text-align: center; margin-bottom: 14px;
}
.login-toggle { text-align: center; font-size: 13px; color: var(--tx-3); margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--linha); }
.login-toggle a { color: var(--ac-claro); font-weight: 600; text-decoration: none; }
.login-toggle a:hover { text-decoration: underline; }
body.login-aberto { overflow: hidden; }


/* ---------- conta: força da senha, isca anti-robô, orbe do login, saldo insuficiente ---------- */
.forca-senha { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 12px; color: var(--tx-3); }
.forca-barra { flex: 1; height: 4px; border-radius: 2px; background: var(--bg-4); overflow: hidden; }
.forca-barra i { display: block; height: 100%; width: 10%; border-radius: 2px; background: var(--perigo); transition: width .25s, background .25s; }
.forca-senha[data-forca="1"] .forca-barra i { width: 30%; background: var(--perigo); }
.forca-senha[data-forca="2"] .forca-barra i { width: 55%; background: var(--alerta); }
.forca-senha[data-forca="3"] .forca-barra i { width: 80%; background: #a3e635; }
.forca-senha[data-forca="4"] .forca-barra i { width: 100%; background: var(--ok); }
.campo-isca { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.login-brand .login-orbe-marca { width: 46px; height: 46px; border-radius: 50%; border: 0;
  background: radial-gradient(circle at 35% 30%, #c4b5fd 0%, #8b5cf6 40%, #5b21b6 76%, #2e1065 100%);
  box-shadow: 0 0 30px rgba(139,92,246,.55), inset 0 -4px 8px rgba(244,63,94,.35); }
.login-brand .login-orbe-marca::after { display: none; }
.custo.custo-falta { color: #fca5a5; }

/* topo compacto no celular: o saldo de créditos sempre visível */
@media (max-width: 640px) {
  .topo { gap: 8px; }
  .topo .nav a { padding: 6px 8px; font-size: 13px; }
  .selo-sim { font-size: 0; gap: 0; padding: 0; width: 26px; height: 26px; justify-content: center; }
  .selo-sim .ponto { width: 8px; height: 8px; }
  .topo-dir { gap: 6px; flex: none; }
}
@media (max-width: 400px) { .topo .nav a[data-nav="inicio"], .topo .nav a[href="#/"] { display: none; } }
@media (max-width: 640px) {
  .pill-creditos { padding: 0 10px; gap: 6px; }
  .pill-creditos > span:not(.pill-ponto) { display: none; }
}
@media (max-width: 400px) {
  #btnGuia { display: none !important; }
  .topo .nav { gap: 0; }
  .topo .nav a { padding: 6px 6px; }
}

/* ================= home pública (visitante) ================= */
.nav-visitante button {
  color: var(--tx-2); padding: 6px 12px; border-radius: var(--r-md); font-weight: 500; font-size: var(--t-md);
  transition: color var(--trans), background var(--trans);
}
.nav-visitante button:hover { color: var(--tx); background: var(--bg-2); }
.topo-visitante { display: flex; align-items: center; gap: var(--e2); }
.topo-visitante[hidden], .nav-visitante[hidden] { display: none; }
body.visitante .lp-barra { display: none; }

.lp-precos { padding-top: var(--e4); }
.lp-precos .lp-cab { text-align: center; align-items: center; display: flex; flex-direction: column; gap: 6px; }
.lp-precos .lp-cab h3 { font-size: var(--t-2xl); letter-spacing: -.02em; }
.lp-precos .lp-cab p { max-width: 52ch; }
.precos-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--e4); max-width: 980px; width: 100%; margin: 0 auto; }
.preco-pack {
  position: relative; display: flex; flex-direction: column; gap: var(--e3); padding: var(--e6);
  background: var(--bg-2); border: 1px solid var(--linha-2); border-radius: var(--r-xl);
  transition: transform var(--trans), border-color var(--trans), box-shadow var(--trans);
}
.preco-pack:hover { transform: translateY(-3px); border-color: var(--ac-linha); }
.preco-pack.destaque {
  border-color: var(--ac-linha); box-shadow: var(--ac-brilho);
  background: linear-gradient(180deg, rgba(139,92,246,.14), rgba(139,92,246,0) 60%), var(--bg-2);
}
.preco-selo {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  padding: 3px 12px; border-radius: var(--r-full); font-size: var(--t-xs); font-weight: 700; color: #fff; background: var(--ac-grad);
}
.preco-pack h4 { font-family: var(--f-titulo); font-size: var(--t-lg); font-weight: 600; color: var(--tx); }
.preco-valor { font-family: var(--f-titulo); font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--tx); }
.preco-valor span { font-size: var(--t-lg); font-weight: 600; color: var(--tx-3); margin-right: 4px; vertical-align: super; }
.preco-cred { color: var(--tx-2); font-size: var(--t-md); }
.preco-cred b { color: var(--tx); font-size: var(--t-lg); }
.preco-cred em { font-style: normal; color: var(--ac-claro); font-weight: 600; }
.preco-itens { list-style: none; display: grid; gap: 8px; margin: var(--e1) 0 var(--e2); padding-top: var(--e3); border-top: 1px dashed var(--linha-2); color: var(--tx-2); font-size: var(--t-sm); }
.preco-itens li { display: flex; gap: 8px; align-items: baseline; }
.preco-itens li::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); transform: translateY(-1px); }
.preco-pack .btn-bloco { margin-top: auto; }
.precos-nota { text-align: center; max-width: 60ch; margin: 0 auto; }

.lp-rodape {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--e4);
  margin-top: var(--e10); padding: var(--e8) 0 var(--e6); border-top: 1px solid var(--linha);
}
.lp-rodape-marca { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--tx-3); font-size: var(--t-sm); }
.lp-rodape-marca b { font-family: var(--f-titulo); color: var(--tx); font-size: var(--t-lg); letter-spacing: -.02em; }
.lp-rodape-acoes { display: flex; gap: var(--e2); }
.lp-rodape-copy { grid-column: 1 / -1; color: var(--tx-3); font-size: var(--t-xs); }
@media (max-width: 760px) {
  .nav-visitante { display: none !important; }
  .topo-visitante .btn-fantasma { padding-inline: 10px; }
  .lp-rodape { grid-template-columns: 1fr; }
  .preco-valor { font-size: 34px; }
}

/* ---------- storyboard: canvas tipo fluxograma ---------- */
/* garante tela cheia mesmo se a classe do body atrasar */
html:has(.fluxo-canvas),
body:has(.fluxo-canvas) { height: 100%; overflow: hidden !important; }
body:has(.fluxo-canvas) #conteudo { height: calc(100vh - var(--topo-h)); overflow: hidden; }
.estudio:has(.fluxo-canvas) {
  max-width: none; height: 100%; display: flex; flex-direction: column; overflow: hidden;
}
.estudio:has(.fluxo-canvas) .proj-barra,
.estudio:has(.fluxo-canvas) #proxPasso { flex: none; }
.estudio:has(.fluxo-canvas) #estudioVista {
  flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
}

.canvas { padding: var(--e4) var(--e5) var(--e5); min-width: 0; min-height: 0; }
.fluxo-canvas {
  flex: 1 1 auto; min-height: 0; width: 100%; height: 100%;
  display: flex; flex-direction: column; gap: 8px;
  padding: 8px 12px 12px; box-sizing: border-box;
}
.canvas-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e3); flex-wrap: wrap; flex: none; }
.canvas-topo h2 { margin: 0 0 2px; font-size: var(--t-lg); }
.canvas-topo .ajuda { margin: 0; font-size: var(--t-xs); }
.leg-continua { color: var(--ac); font-weight: 600; }
.leg-corte { color: var(--tx-2); font-weight: 600; }
.canvas-total { color: var(--tx-3); font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.canvas-acoes { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }

.fluxo-shell {
  position: relative; flex: 1 1 auto; min-height: 0; width: 100%;
  border: 1px solid var(--linha); border-radius: 14px; overflow: hidden; background:
  radial-gradient(1200px 600px at 20% 0%, rgba(139,92,246,.08), transparent 55%),
  radial-gradient(900px 500px at 90% 80%, rgba(52,211,153,.04), transparent 50%),
  #0a0a10;
}
.fluxo-viewport {
  position: absolute; inset: 0; overflow: hidden; cursor: grab; touch-action: none;
  background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 22px 22px;
}
.fluxo-viewport.pantando { cursor: grabbing; }
.fluxo-mundo { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.fx-nos { position: relative; }
.fx-edges { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.fx-path { stroke: rgba(255,255,255,.28); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fx-path.corte { stroke-dasharray: 5 6; }
.fx-path.proximo { stroke: rgba(255,255,255,.16); stroke-dasharray: 2 6; }
.fx-path.continua { stroke: #a78bfa; stroke-width: 2.2; filter: drop-shadow(0 0 4px rgba(139, 92, 246, .55)); }
/* selos dos elos: acima dos cartões, centralizados no vão */
.fx-selos { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.fx-selo {
  position: absolute; transform: translate(-50%, -50%); pointer-events: auto; z-index: 3;
  display: inline-flex; align-items: center; gap: 2px; height: 22px; padding: 0 3px 0 8px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10); background: #12121b; color: var(--tx-3);
  font-size: 10.5px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; box-shadow: 0 6px 18px rgb(0 0 0 / .45);
}
.fx-selo.continua { color: #c4b5fd; border-color: rgba(167,139,250,.45); background: #1b1530; }
.fx-selo-txt { display: inline-flex; align-items: center; gap: 4px; }
.fx-selo-txt .ico { width: 11px; height: 11px; }
.fx-selo-mais { width: 18px; height: 18px; display: grid; place-items: center; border: 0; border-radius: 50%; padding: 0;
  background: transparent; color: var(--tx-3); cursor: pointer; opacity: .55; transition: opacity var(--trans), background var(--trans), color var(--trans); }
.fx-selo:hover .fx-selo-mais, .fx-selo-mais:focus-visible { opacity: 1; }
.fx-selo-mais:hover { background: var(--ac-suave); color: var(--ac-claro); }
.fx-selo-mais .ico { width: 11px; height: 11px; }
.fx-no {
  position: absolute; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--linha); border-radius: 12px; background: var(--bg-1);
  box-shadow: 0 10px 28px rgb(0 0 0 / .35); cursor: grab; user-select: none;
  transition: border-color var(--trans), box-shadow var(--trans);
}
.fx-no:hover { border-color: var(--linha-2); box-shadow: 0 14px 36px rgb(0 0 0 / .45); z-index: 2; }
.fx-no.ativo { border-color: var(--ac-linha); box-shadow: 0 0 0 1px var(--ac-linha), 0 14px 36px rgb(0 0 0 / .45); }
.fx-no.arrastando { opacity: .92; cursor: grabbing; z-index: 5; box-shadow: 0 18px 40px rgb(0 0 0 / .55); }
.fx-arrasta {
  position: absolute; left: 50%; top: 4px; z-index: 3; transform: translateX(-50%);
  width: 28px; height: 4px; border-radius: 999px; background: rgba(255,255,255,.22); pointer-events: none;
}
.fx-midia {
  position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; padding: 0; border: 0;
  background: var(--bg-2); cursor: pointer; overflow: hidden;
}
.fx-no.fmt-1x1 .fx-midia { aspect-ratio: 1; }
.fx-no.fmt-16x9 .fx-midia { aspect-ratio: 16 / 9; }
.fx-midia img, .fx-midia video { width: 100%; height: 100%; object-fit: cover; display: block; }
.fx-vazio { position: absolute; inset: 0; display: grid; place-items: center; color: var(--tx-3); }
.fx-vazio .ico { width: 22px; height: 22px; }
.fx-gerando { position: absolute; left: 6px; right: 6px; bottom: 28px; z-index: 2; display: flex; justify-content: center; padding: 4px; border-radius: 999px; background: rgb(0 0 0 / .65); }
.cv-badge {
  position: absolute; left: 6px; top: 6px; z-index: 2;
  min-width: 22px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center;
  border-radius: 6px; background: rgb(0 0 0 / .72); color: #fff;
  font: 600 11px/1 var(--f-mono); letter-spacing: .02em; backdrop-filter: blur(4px);
}
.fx-st {
  position: absolute; right: 6px; bottom: 6px; z-index: 2;
  font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 999px;
  color: #e4e4e7; background: rgb(0 0 0 / .55); backdrop-filter: blur(4px);
}
.fx-no.st-animada .fx-st { color: #6ee7b7; }
.fx-no.st-frame .fx-st { color: #93c5fd; }
.fx-info { display: flex; flex-direction: column; gap: 3px; padding: 7px 8px 8px; background: var(--bg-1); }
.fx-rotulo { margin: 0; min-height: 2.4em; font-size: 11px; line-height: 1.25; color: var(--tx); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fx-meta { margin: 0; font-size: 10px; color: var(--tx-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-acoes { display: flex; align-items: center; gap: 4px; }
.fx-acoes .btn-sm { flex: 1; min-width: 0; height: 26px; padding: 0 8px; font-size: 11px; gap: 4px; }
.fx-acoes .btn-sm .ico { width: 12px; height: 12px; }
.fx-acoes .btn-icone.sm { flex: none; width: 26px; height: 26px; border: 1px solid var(--linha-2); border-radius: var(--r-md); background: var(--bg-2); }
.fx-no .sb-play { position: absolute; top: 6px; right: 6px; bottom: auto; width: 22px; height: 22px; z-index: 2; border-radius: 50%; background: rgba(0,0,0,.7); display: grid; place-items: center; }
.fx-no .sb-play .ico { width: 10px; height: 10px; color: #fff; }

.fx-novo {
  justify-content: center; gap: 6px; padding: 12px; cursor: default;
  border-style: dashed; background: rgb(255 255 255 / .03); box-shadow: none;
}
.fx-novo:hover { transform: none; box-shadow: none; }
.cv-novo-rot { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tx-3); }
.fx-novo .btn-bloco { justify-content: flex-start; height: 30px; font-size: 11px; padding: 0 10px; }

.fluxo-ui { position: absolute; right: 12px; bottom: 12px; z-index: 5; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; }
.fluxo-zoom, .fluxo-mapa { pointer-events: auto; }
.fluxo-zoom {
  display: flex; align-items: center; gap: 4px; padding: 4px;
  border-radius: 10px; border: 1px solid var(--linha); background: rgb(12 12 18 / .92); backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgb(0 0 0 / .35);
}
.fluxo-zoom .btn-fantasma { min-width: 48px; font-variant-numeric: tabular-nums; }
.fluxo-mapa {
  display: block; border-radius: 10px; border: 1px solid var(--linha); cursor: crosshair;
  box-shadow: 0 8px 24px rgb(0 0 0 / .4); background: #08080e;
}
@media (max-width: 640px) {
  .fluxo-canvas { padding: 8px; }
  .fluxo-mapa { width: 132px !important; height: 86px !important; }
  .fluxo-ui { right: 8px; bottom: 8px; }
}

/* ---------- editor da cena: painel por cima do storyboard ---------- */
body.editor-aberto { overflow: hidden; }
body.editor-aberto .gaveta { z-index: 55; }
.editor-cena { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; }
.editor-cena[hidden] { display: none; }
.ec-veu { position: absolute; inset: 0; background: rgb(2 2 6 / .82); backdrop-filter: blur(8px) saturate(.6); -webkit-backdrop-filter: blur(8px) saturate(.6); }
.ec-janela {
  position: relative; width: min(1440px, calc(100vw - 48px)); height: calc(100vh - 48px); height: calc(100dvh - 48px);
  display: flex; flex-direction: column; overflow: hidden; outline: none;
  /* superfície mais clara que a página + borda e brilho: o painel se destaca do fundo */
  background: #10101a; border: 1px solid rgb(255 255 255 / .16); border-radius: var(--r-xl);
  box-shadow: 0 0 0 1px rgb(139 92 246 / .18), 0 0 60px rgb(139 92 246 / .14), 0 40px 100px rgb(0 0 0 / .7), inset 0 1px 0 rgb(255 255 255 / .06);
  animation: entrar .18s ease-out;
}
@media (prefers-reduced-motion: reduce) { .ec-janela { animation: none; } }
.ec-barra { flex: none; display: flex; align-items: center; gap: var(--e2); padding: 10px var(--e4); border-bottom: 1px solid rgb(255 255 255 / .1); background: var(--bg-3); }
.ec-pos { font: 500 var(--t-sm) var(--f-mono); color: var(--tx-2); white-space: nowrap; }
.ec-mini { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; overflow-x: auto; padding: 3px; scrollbar-width: none; }
.ec-mini::-webkit-scrollbar { display: none; }
.ec-thumb { position: relative; flex: none; width: 36px; height: 36px; display: grid; place-items: center; overflow: hidden; border-radius: var(--r-sm); background: var(--bg-3); border: 1px solid var(--linha); color: var(--tx-3); transition: border-color var(--trans); }
.ec-thumb:hover { border-color: var(--linha-2); }
.ec-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ec-thumb span { position: absolute; left: 0; right: 0; bottom: 0; font: 500 9px/1.5 var(--f-mono); text-align: center; color: #fff; background: rgb(0 0 0 / .6); }
.ec-thumb.ativo { border-color: var(--ac); box-shadow: 0 0 0 1px var(--ac); }
.ec-elo { flex: none; width: 12px; border-top: 2px dashed var(--linha-2); }
.ec-elo.continua { border-top: 2px solid var(--ac); }
.ec-fechar { flex: none; }
/* dentro do painel, só a ficha e as tomadas rolam */
.ec-janela .area-cena { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding: 12px var(--e5) 0; }
.ec-janela .cena-topo, .ec-janela .abas { flex: none; }
.ec-janela .cena-topo { margin-bottom: 8px; }
.ec-janela .abas { margin-bottom: 12px; }
.ec-janela .painel { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.ec-janela .bancada { flex: 1; min-height: 0; height: 100%; align-items: stretch; overflow: hidden; gap: var(--e4); }
.ec-janela .ficha { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 0; }
.ec-janela .ficha-corpo { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; gap: 14px; padding-bottom: 8px; }
.ec-janela .tomadas { position: static; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding-bottom: var(--e4); }
@media (max-width: 1100px) {
  .ec-janela { width: 100vw; height: 100vh; height: 100dvh; border: 0; border-radius: 0; }
  .ec-janela .area-cena { display: block; overflow-y: auto; padding: var(--e4) var(--e4) 48px; }
  .ec-janela .painel, .ec-janela .bancada, .ec-janela .ficha, .ec-janela .ficha-corpo, .ec-janela .tomadas { overflow: visible; height: auto; max-height: none; }
}
@media (max-width: 640px) {
  .ec-barra { padding: 8px var(--e3); }
  .ec-pos, .ec-fechar span { display: none; }
  .ec-mini { justify-content: flex-start; }
}
/* dentro do painel, os blocos internos ganham um degrau de cor sobre a superfície */
.ec-janela .ficha-rodape { background: #10101a; }
.ec-janela .frame-escolhido, .ec-janela .vazio-tomadas, .ec-janela .cta-animar, .ec-janela .tomada { background: var(--bg-3); }

/* continuidade da história (frame da cena anterior + da cena 01 como referência) */
.continuidade { padding: var(--e3); border: 1px solid var(--ac-linha); border-radius: var(--r-lg); background: var(--ac-suave); gap: var(--e3); }
.continuidade.desligada { border-color: var(--linha-2); background: transparent; }
.continuidade.desligada .cont-frames { opacity: .35; filter: grayscale(1); }
.cont-topo { display: flex; align-items: flex-start; gap: var(--e2); cursor: pointer; }
.cont-topo input { margin-top: 3px; accent-color: var(--ac); width: 16px; height: 16px; flex: none; }
.cont-topo b { display: block; font-size: var(--t-sm); color: var(--tx); }
.cont-topo .ajuda { display: block; margin: 2px 0 0; }
.cont-frames { display: flex; gap: var(--e2); transition: opacity var(--trans); }
.cont-frames figure { margin: 0; width: 64px; }
.cont-frames img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--linha-2); display: block; }
.cont-frames figcaption { margin-top: 4px; font-size: 10px; line-height: 1.3; color: var(--tx-3); }

/* assistir a história (player em sequência) */
.modal-assistir { width: min(620px, calc(100% - 32px)); }
.assistir { display: flex; flex-direction: column; gap: var(--e3); }
.as-palco { position: relative; align-self: center; background: #000; border-radius: var(--r-lg); overflow: hidden; }
.as-palco.fmt-9x16 { height: min(64vh, 620px); aspect-ratio: 9 / 16; }
.as-palco.fmt-1x1 { width: min(100%, 60vh); aspect-ratio: 1; }
.as-palco.fmt-16x9 { width: 100%; aspect-ratio: 16 / 9; }
.as-palco video, .as-palco img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.as-palco video[hidden], .as-palco img[hidden] { display: none; }
.as-rot { position: absolute; left: 10px; top: 10px; padding: 3px 10px; border-radius: var(--r-full); background: rgb(0 0 0 / .6); color: #fff; font: 500 var(--t-xs) var(--f-mono); }
.as-barra { display: flex; gap: 3px; }
.as-seg { height: 6px; padding: 0; border-radius: 3px; background: var(--bg-4); overflow: hidden; cursor: pointer; min-width: 8px; }
.as-seg i { display: block; height: 100%; width: 0; background: var(--ac); }
.as-seg.atual { box-shadow: 0 0 0 1px var(--ac-linha); }
.as-ctrl { display: flex; align-items: center; gap: var(--e2); }
.as-info { flex: 1; min-width: 0; font-size: var(--t-sm); color: var(--tx-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* menu da conta: links secundários */
.menu-conta-links { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.menu-link { text-align: left; padding: 8px 6px; border-radius: var(--r-sm); font-size: var(--t-sm); color: var(--tx-2); }
.menu-link:hover, .menu-link:focus-visible { background: var(--bg-3); color: var(--tx); }

/* histórico de compras e extrato */
.hist { display: flex; flex-direction: column; gap: var(--e4); }
.hist-abas { align-self: flex-start; }
.hist-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e2); max-height: 60vh; overflow-y: auto; }
.hist-item { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); flex-wrap: wrap; padding: var(--e3) var(--e4); border: 1px solid var(--linha); border-radius: var(--r-lg); background: var(--bg-2); }
.hist-principal { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hist-principal b { color: var(--tx); font-size: var(--t-sm); }
.hist-sub { font-size: var(--t-xs); color: var(--tx-3); }
.hist-lado { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.hist-valor { font: 600 var(--t-sm) var(--f-mono); color: var(--tx); }
.hist-status { font-size: var(--t-xs); padding: 2px 8px; border-radius: var(--r-full); border: 1px solid var(--linha-2); color: var(--tx-2); }
.hist-status.st-ok { color: #34d399; border-color: rgb(52 211 153 / .4); background: rgb(52 211 153 / .08); }
.hist-status.st-aguardando { color: #fbbf24; border-color: rgb(251 191 36 / .4); background: rgb(251 191 36 / .08); }
.hist-status.st-alerta { color: #f87171; border-color: rgb(248 113 113 / .4); background: rgb(248 113 113 / .08); }
.hist-tabela { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.hist-tabela th { text-align: left; font-weight: 500; color: var(--tx-3); font-size: var(--t-xs); padding: 6px 8px; border-bottom: 1px solid var(--linha-2); position: sticky; top: 0; background: var(--bg-1); }
.hist-tabela td { padding: 8px; border-bottom: 1px solid var(--linha); color: var(--tx-2); }
.hist-tabela .num { text-align: right; font-family: var(--f-mono); white-space: nowrap; }
.hist-tabela .pos { color: #34d399; } .hist-tabela .neg { color: var(--tx-2); }
.hist-tipo { display: inline-block; font-size: var(--t-xs); padding: 1px 6px; border-radius: var(--r-sm); background: var(--bg-3); color: var(--tx-2); margin-right: 4px; }
.hist .tabela-wrap { max-height: 60vh; overflow: auto; }

/* aba Som: narração e som ambiente */
.som-bloco { display: flex; flex-direction: column; gap: var(--e3); padding: var(--e4); border: 1px solid var(--linha); border-radius: var(--r-lg); background: var(--bg-1); }
.ec-janela .som-bloco { background: var(--bg-3); }
.som-tit { display: flex; align-items: center; gap: var(--e2); margin: 0; font-size: var(--t-base, 15px); }
.som-tit .ico { color: var(--ac); }
.som-atual { display: flex; flex-direction: column; gap: 6px; }
.som-atual audio { width: 100%; height: 36px; }
.som-gerando { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--r-md); background: var(--ac-suave); color: var(--tx-2); font-size: var(--t-sm); }
.som-gerando small { color: var(--tx-3); margin-left: auto; }
.som-ok { display: flex; align-items: center; gap: 6px; margin: 0; color: #34d399; font-size: var(--t-sm); }
.som-bloco .acao-final { justify-content: flex-end; margin-left: 0; }
.previa-som { position: relative; align-self: center; width: 100%; max-width: 340px; border-radius: var(--r-lg); overflow: hidden; background: #000; margin: 0 auto var(--e3); }
.previa-som.fmt-16x9 { max-width: 560px; }
.previa-som video, .previa-som img { display: block; width: 100%; height: auto; max-height: 56vh; object-fit: contain; }
.cv-som { display: flex; flex-wrap: wrap; gap: 4px; }
.cv-som span { display: inline-flex; align-items: center; gap: 2px; font-size: 10px; color: var(--ac-claro); padding: 0 5px; border-radius: var(--r-full); background: var(--ac-suave); }
.cv-som .ico { width: 10px; height: 10px; }
.ajuda-destaque { padding: 8px 10px; border-radius: var(--r-md); background: var(--ac-suave); border: 1px solid var(--ac-linha); color: var(--tx-2); }
.seg button[data-v="2"][aria-pressed="true"] { background: var(--ac-grad); color: #fff; }

/* transições entre cenas */
.tl-trans { position: absolute; left: -13px; top: 50%; transform: translateY(-50%); z-index: 5; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; line-height: 1; background: var(--bg-2); border: 1px solid var(--linha-2); color: var(--tx-2); cursor: pointer; }
.tl-trans:hover, .tl-trans:focus-visible { border-color: var(--ac); color: var(--tx); }
.tl-trans-dissolver, .tl-trans-preto { border-color: var(--ac-linha); color: var(--ac-claro); }
.palco.fx-dissolver video, .palco.fx-dissolver img, .as-palco.fx-dissolver video, .as-palco.fx-dissolver img { animation: fxDissolver .5s ease-out; }
.palco.fx-preto::after, .as-palco.fx-preto::after { content: ''; position: absolute; inset: 0; background: #000; pointer-events: none; animation: fxPreto .5s ease-out forwards; z-index: 2; }
@keyframes fxDissolver { from { opacity: .35; } to { opacity: 1; } }
@keyframes fxPreto { from { opacity: 1; } to { opacity: 0; } }

/* vozes: seletor + clonagem */
.voz-linha { display: flex; gap: 8px; align-items: center; }
.voz-linha select { flex: 1; min-width: 0; }
.cv-consent { align-items: flex-start; font-size: var(--t-sm); color: var(--tx-2); line-height: 1.45; }
.cv-consent input { margin-top: 3px; }
.lista-vozes { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lista-vozes li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--linha); border-radius: var(--r-md); }
.lv-nome { flex: 1; min-width: 0; font-size: var(--t-sm); color: var(--tx); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-vozes audio { width: 150px; height: 30px; }
.chk { display: flex; gap: 8px; cursor: pointer; }

/* storyboard no celular / tela estreita: a página rola e o canvas tem altura própria
   (o cabeçalho do projeto ocupa muito espaço; travar na altura da tela deixava o canvas com 0 px) */
@media (max-width: 900px) {
  html:has(.fluxo-canvas), body:has(.fluxo-canvas) { height: auto; overflow: auto !important; }
  body:has(.fluxo-canvas) #conteudo { height: auto; overflow: visible; }
  .estudio:has(.fluxo-canvas), .estudio:has(.fluxo-canvas) #estudioVista { height: auto; overflow: visible; display: block; }
  .fluxo-canvas { height: auto; }
  .fluxo-shell { height: 72vh; height: 72dvh; min-height: 420px; }
}
.fx-no { cursor: grab; }
.fx-no.arrastando, .fx-no.arrastando .fx-midia { cursor: grabbing; }