primocode 8.36.0 → 8.37.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "primocode",
-  "version": "8.36.0",
+  "version": "8.37.0",
   "description": "PrimoCode — agente de engenharia com IA e cursor próprio. Requer conta Conecta Primo AI (Premium ou Super). Cria arquivos, roda comandos, controla navegador e desktop: abre apps, clica em botões e ícones pelo nome, digita e usa atalhos.",
   "main": "bin/primocode.js",
   "bin": {
@@ -8,7 +8,7 @@
   },
   "scripts": {
     "start": "node bin/primocode.js",
-    "test": "node test/tools.test.js && node test/ui.test.js && node test/modo.test.js && node test/pasta.test.js && node test/catalogo.test.js && node test/desktop.test.js && node test/effort.test.js && node test/claude-engine.test.js && node test/regressao.test.js && node test/memoria-conversa.test.js && node test/repeticao.test.js && node test/referencia.test.js && node test/parar.test.js && node test/continuar.test.js && node test/studio-spec.test.js && node test/studio-versoes.test.js && node test/voz.test.js && node test/editor.test.js && node test/estudio-projeto.test.js && node test/vocabulario.test.js && node test/video-export.test.js && node test/monotonia.test.js && node test/clipe.test.js && node test/midia-envio.test.js && node test/pausas.test.js && node test/fala-repetida.test.js && node test/trilha.test.js && node test/pipeline.test.js && node test/app.test.js && node test/elementos.test.js && node test/remotion.test.js && node test/aplicativo.test.js && node test/conta.test.mjs && node test/nuvem.test.js && node test/codex.test.js && node test/chaves.test.js && node test/prazo.test.js && node test/primeira-vez.test.js && node test/janela.test.js"
+    "test": "node test/tools.test.js && node test/ui.test.js && node test/modo.test.js && node test/pasta.test.js && node test/catalogo.test.js && node test/desktop.test.js && node test/effort.test.js && node test/claude-engine.test.js && node test/regressao.test.js && node test/memoria-conversa.test.js && node test/repeticao.test.js && node test/referencia.test.js && node test/parar.test.js && node test/continuar.test.js && node test/studio-spec.test.js && node test/studio-versoes.test.js && node test/voz.test.js && node test/editor.test.js && node test/estudio-projeto.test.js && node test/vocabulario.test.js && node test/video-export.test.js && node test/monotonia.test.js && node test/clipe.test.js && node test/midia-envio.test.js && node test/pausas.test.js && node test/fala-repetida.test.js && node test/trilha.test.js && node test/anuncio.test.js && node test/pipeline.test.js && node test/app.test.js && node test/elementos.test.js && node test/remotion.test.js && node test/aplicativo.test.js && node test/conta.test.mjs && node test/nuvem.test.js && node test/codex.test.js && node test/chaves.test.js && node test/prazo.test.js && node test/primeira-vez.test.js && node test/janela.test.js"
   },
   "engines": {
     "node": ">=18.17.0"

package/studio/ferramentas/corte.md

@@ -227,6 +227,106 @@ baratos de escrever e mudam completamente o resultado.
 último, é o vídeo que o usuário chamou de "sem efeito nenhum" — e não é falta
 de recurso: é este bloco não ter sido lido.
 
+## Anúncio de marca — o kit
+
+Quando o pedido é o COMERCIAL de um produto (um cartão, um app, um plano), o
+que separa uma peça de agência de um slide com música são quatro coisas, e as
+quatro têm elemento próprio. Uma peça de marca sem elas sai genérica por mais
+bonito que esteja o texto.
+
+**Primeiro, declare a marca no documento.** Ela pinta o destaque de tudo —
+número, botão, detalhe, o cartão — e libera o fundo `"marca"`:
+
+```json
+"marca": { "cor": "#21C25E", "logo": "/midia/logo.svg" },
+"tema": "claro"
+```
+
+Tema CLARO na maioria dos anúncios de marca. O escuro é para a cena de
+produto e para a vitrine; o resto da peça respira no branco.
+
+### `cartao` — o produto
+
+```json
+{ "tipo": "cartao", "nome": "PicPay", "variante": "Gold", "movimento": "flutuar" }
+```
+
+Sai um cartão desenhado: chip, símbolo de aproximação, numeração mascarada,
+nome e validade, com luz e sombra. `cor` (sem ela, a da marca), `largura`,
+`numero` (só os 4 últimos aparecem), `titular`, `validade`, `face: "verso"`,
+`movimento`: `flutuar` | `girar`.
+
+**Mostre o produto antes de falar dele.** Um anúncio de cartão que só tem
+frases é um anúncio sem produto.
+
+### `app` — a tela do aplicativo
+
+```json
+{ "tipo": "app", "topo": "Minha conta", "rotulo": "saldo disponível",
+  "valor": "R$ 1.284,90",
+  "linhas": [["Café da manhã", "R$ 18,90"], ["Mercado", "R$ 92,40"]],
+  "botao": "Pagar com o cartão" }
+```
+
+Cabeçalho, um número grande, linhas com o nome à esquerda e o valor à direita
+separadas por fio, e o botão cheio embaixo — que é o que faz o olho ler
+"aplicativo". Aceita `["nome", "valor"]` e `"nome|valor"`. `escuro: true` para
+a versão noturna.
+
+**Ele vai DENTRO do `dispositivo`**, e aí ocupa a tela inteira do aparelho:
+
+```json
+{ "tipo": "dispositivo", "forma": "celular", "dentro": [ { "tipo": "app", ... } ] }
+```
+
+Solto na cena ele vira o print da campanha. É o mesmo elemento de propósito:
+com dois, a tela do celular e o print divergiriam na primeira mudança.
+
+### `vitrine` — a linha de produtos
+
+```json
+{ "tipo": "vitrine", "titulo": "Escolha seu cartão", "atual": 1, "nome": "PicPay",
+  "itens": [ { "nome": "Gold", "cor": "#C9A227", "detalhe": "sem anuidade" },
+             { "nome": "Verde", "detalhe": "cashback" },
+             { "nome": "Black", "cor": "#181B1F", "detalhe": "sala VIP" } ] }
+```
+
+Os cartões numa fila, o `atual` à frente e os outros recuados. Vai bem sobre
+fundo escuro (`"fundo": "#0b0f0c"`), que é como toda tela de "escolha o seu" é
+desenhada.
+
+### `assinatura` — o ponto final
+
+```json
+{ "tipo": "assinatura", "nome": "PicPay", "frase": "o jeito fácil de pagar", "sobre": "marca" }
+```
+
+Ela toma a CENA INTEIRA: o logo sozinho, grande, sobre a cor da casa. `sobre`:
+`marca` | `claro` | `escuro`. Com `logo` ela usa a imagem; sem, o `nome`.
+
+**Todo anúncio termina assim.** Sem a assinatura a peça acaba numa frase, e
+ninguém fica sabendo quem falou.
+
+### A ordem que funciona
+
+Uma peça de marca de 20 a 30 segundos, com 8 a 10 cenas:
+
+| # | cena | o que entra |
+|---|---|---|
+| 1 | a promessa, em uma frase curta | `texto` pequeno, muito ar, fundo claro |
+| 2 | o produto | `cartao` com `movimento` |
+| 3 | o mote, na cor da casa | `fundo: "marca"`, `texto` branco, `anim: "palavra"` |
+| 4 | funcionando | `dispositivo` + `app` |
+| 5 | o benefício | `texto` |
+| 6 | a linha | `vitrine` sobre fundo escuro |
+| 7 | a última razão | `texto` |
+| 8 | assinatura | `assinatura` |
+
+E o rosto de quem fala, quando houver, entra por `clipe` entre a 4 e a 5 — o
+depoimento é o que dá confiança, e nenhum desenho substitui.
+
+---
+
 ### `icone` — o desenho ao lado do argumento
 
 ```json

package/studio/server.py

@@ -893,6 +893,28 @@ def revisar_monotonia(doc, ferramenta):
             "(aproximar, afastar, esquerda, direita, cima), e uma ou duas peças por "
             "vídeo levam chaves de animação.")
 
+    # ── ANÚNCIO DE MARCA SEM PRODUTO E SEM ASSINATURA ───────────────────
+    #
+    #   "Ainda não tá bom, tá genérico. Quero nesse nível." — o dono, sobre um
+    #   comercial de fintech mandado como referência.
+    #
+    # O que separava a peça daqui daquela não era tema nem cor: era não ter o
+    # PRODUTO na tela e não assinar no fim. Quem declarou uma `marca` está
+    # fazendo peça de marca, e aí estas duas ausências são o defeito inteiro.
+    if doc.get("marca") and len(cenas) >= 4:
+        if not (tipos & {"cartao", "app", "vitrine", "dispositivo", "imagem", "clipe"}):
+            avisos.append(
+                "esta peça tem marca declarada e nenhuma cena mostra o PRODUTO — são %d cenas "
+                "de texto sobre fundo. Um anúncio de cartão mostra o cartão (`cartao`), o app "
+                "funcionando dentro do celular (`dispositivo` + `app`) e a linha de produtos "
+                "(`vitrine`). É essa ausência que se lê como genérico." % len(cenas))
+        if "assinatura" not in tipos:
+            avisos.append(
+                'o anúncio acaba sem assinar. A última cena de uma peça de marca é '
+                '{"tipo":"assinatura","nome":"…","sobre":"marca"} — o logo sozinho, grande, '
+                "sobre a cor da casa. Sem ela a peça termina numa frase e ninguém fica "
+                "sabendo quem falou.")
+
     # Só a voz com tela montada: existe e quase nunca é lembrado, porque é o
     # contrário do `mudo` e o contrário não estava no vocabulário até agora.
     clipes = [e for e in todos if e.get("tipo") == "clipe"]
@@ -1061,9 +1083,16 @@ def validar_doc(modelo, doc):
     # default do renderizador: texto cru de 16px num canvas de 1920 — ou nada,
     # quando o texto estava noutro campo. Era o "vídeo com música mas tudo
     # preto": documento válido na forma, invisível na tela.
+# O kit de anúncio (cartao, app, vitrine, assinatura) entra na lista abaixo.
+#
+# A LISTA É LIDA POR UM TESTE (`vocabulario.test.js`), que a recorta com uma
+# expressão regular e pega as palavras — então comentário DENTRO dela vira
+# "tipo que o render precisa desenhar", e o teste passa a cobrar `produto`,
+# `linha` e `fim`. Texto sobre os tipos mora aqui fora.
     TIPOS_VALIDOS = {"texto", "lista", "cartoes", "numeros", "tabela", "codigo",
                      "citacao", "forma", "imagem", "icone", "grafico", "no", "conector",
                      "objeto3d", "clipe",
+                     "cartao", "app", "vitrine", "assinatura",
                      "selo", "progresso", "avatar", "dispositivo", "conversa",
                      "passos", "opcoes"}
     # Os sete últimos são o vocabulário do vídeo de referência. O comentário

package/studio/web/js/render.js

@@ -115,6 +115,13 @@ function aplicarFundo(no, fundo) {
     // Era metade do "os vídeos ficaram todos iguais".
     if (/^(malha|brilho|grade|pontos|suave|vinheta|aurora|nevoa|ondas|raios|xadrez)$/.test(fundo)) {
       no.setAttribute("data-fundo", fundo);
+    } else if (fundo === "marca") {
+      /* A cor da casa, chapada e sem efeito nenhum. Num anúncio de marca é o
+         fundo mais usado de todos — e escrevê-lo como `"#21C25E"` obrigaria a
+         repetir o hexadecimal em cada cena, que é como uma delas acaba com a
+         cor de ontem depois de a marca mudar de tom. */
+      no.style.background = "var(--c-tom)";
+      no.setAttribute("data-fundo", "marca");
     } else no.style.background = fundo;
     return;
   }
@@ -214,11 +221,30 @@ function svgGrafico(e, l, a) {
 
 /* -------------------------------------------------------------- elementos */
 
+/* O KIT DE ANÚNCIO — os quatro últimos da lista abaixo.
+ *
+ * Nasceram de um vídeo de referência mandado pelo dono — um comercial de
+ * fintech — com uma frase só: "ainda não tá bom, tá genérico. Quero nesse
+ * nível."
+ *
+ * Medindo a peça de hoje contra aquela, o que faltava não era tema nem cor:
+ * tema claro e `marca.cor` já existiam e resolvem o mundo da marca. O que não
+ * existia era o PRODUTO. Um anúncio de cartão mostra o cartão, mostra o app
+ * funcionando dentro do celular, mostra a linha de produtos e assina no fim.
+ * Com o vocabulário antigo, "o cartão" era um retângulo verde com a palavra
+ * "cartão" escrita dentro — e é exatamente isso que se lê como genérico.
+ *
+ * ── A LISTA ABAIXO É LIDA POR UM TESTE, e por isso não tem comentário dentro.
+ * O `vocabulario.test.js` recorta este objeto com uma expressão regular e
+ * pega as palavras: qualquer texto entre as chaves vira "tipo que o servidor
+ * precisa aceitar", e o teste passa a cobrar `fintech`, `genérico` e `dono`.
+ * Comentário sobre os tipos mora AQUI FORA. */
 var TIPOS_CONHECIDOS = { texto: 1, lista: 1, cartoes: 1, numeros: 1, tabela: 1, codigo: 1,
   citacao: 1, forma: 1, imagem: 1, icone: 1, grafico: 1, no: 1, conector: 1,
   objeto3d: 1, clipe: 1,
   selo: 1, progresso: 1, avatar: 1, dispositivo: 1, conversa: 1, passos: 1,
-  opcoes: 1 };
+  opcoes: 1,
+  cartao: 1, app: 1, vitrine: 1, assinatura: 1 };
 /* Os sete últimos são o vocabulário do vídeo de referência: pílula de estado,
    trilha de progresso, foto de pessoa, celular/notebook com conteúdo dentro,
    balões de conversa, etapas com uma acesa, e pergunta com alternativas.
@@ -955,6 +981,202 @@ function renderElemento(e, ctx) {
       break;
     }
 
+    /* ── O CARTÃO ────────────────────────────────────────────────────────
+       Um produto desenhado, não um retângulo com o nome dele escrito dentro.
+       O que faz o olho ler "cartão" são quatro detalhes pequenos e nenhum
+       deles é o formato: o CHIP, o símbolo de aproximação, a numeração
+       mascarada e o pé com nome e validade. Sem eles o desenho é uma caixa;
+       com eles, qualquer pessoa reconhece em um quadro de vídeo.
+
+       A cor sai da marca (`--c-tom`) quando ninguém diz outra, para o cartão
+       pertencer à peça em vez de ser mais um objeto colorido nela. */
+    case "cartao": {
+      var cc = e.cor || "var(--c-tom)";
+      no.style.setProperty("--cc", cc);
+      if (e.largura) no.style.width = _px(e.largura);
+      if (e.movimento) no.setAttribute("data-mov", e.movimento);
+      if (e.face === "verso") no.setAttribute("data-face", "verso");
+
+      var corpo = document.createElement("div");
+      corpo.className = "cartao-corpo";
+
+      var topo = document.createElement("div");
+      topo.className = "cartao-topo";
+      var marca = document.createElement("span");
+      marca.className = "cartao-marca";
+      marca.textContent = e.nome || "";
+      var vari = document.createElement("span");
+      vari.className = "cartao-variante";
+      vari.textContent = e.variante || "";
+      topo.appendChild(marca); topo.appendChild(vari);
+
+      var meio = document.createElement("div");
+      meio.className = "cartao-meio";
+      var chip = document.createElement("i");
+      chip.className = "cartao-chip";
+      // O símbolo de aproximação: três arcos. Em SVG porque em texto ele
+      // depende de uma fonte que a máquina pode não ter.
+      var onda = document.createElement("span");
+      onda.className = "cartao-onda";
+      onda.innerHTML = '<svg viewBox="0 0 24 24" aria-hidden="true">'
+        + '<path d="M8 5a10 10 0 0 1 0 14M13 8a5.6 5.6 0 0 1 0 8M17.6 2.4a15 15 0 0 1 0 19.2"'
+        + ' fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>';
+      meio.appendChild(chip); meio.appendChild(onda);
+
+      var num = document.createElement("div");
+      num.className = "cartao-numero";
+      // Os quatro últimos dígitos e mais nada: é o que aparece num cartão de
+      // verdade em foto de campanha, e é o que não vira dado de ninguém.
+      num.textContent = "•••• •••• •••• " + String(e.numero || "4821").slice(-4);
+
+      var pe = document.createElement("div");
+      pe.className = "cartao-pe";
+      var quem = document.createElement("span");
+      quem.textContent = e.titular || "SEU NOME AQUI";
+      var val = document.createElement("span");
+      val.textContent = e.validade || "12/29";
+      pe.appendChild(quem); pe.appendChild(val);
+
+      var brilho = document.createElement("i");
+      brilho.className = "cartao-brilho";
+
+      corpo.appendChild(brilho);
+      corpo.appendChild(topo);
+      corpo.appendChild(meio);
+      corpo.appendChild(num);
+      corpo.appendChild(pe);
+      no.appendChild(corpo);
+      break;
+    }
+
+    /* ── A TELA DO APP ───────────────────────────────────────────────────
+       O `dispositivo` já desenhava o aparelho; o que ele mostrava DENTRO era
+       texto centralizado no meio do vidro, que não se parece com aplicativo
+       nenhum. O que faz uma tela parecer um app é a ARRUMAÇÃO: cabeçalho em
+       cima, um número grande, linhas com o nome à esquerda e o valor à
+       direita separadas por fio, e um botão cheio embaixo.
+
+       Vale sozinho na cena e vale dentro do `dispositivo` — é o mesmo
+       elemento, e por isso a tela do celular e a do print da campanha não
+       divergem. */
+    case "app": {
+      if (e.escuro) no.setAttribute("data-escuro", "1");
+      if (e.topo) {
+        var cab = document.createElement("div");
+        cab.className = "app-topo";
+        cab.innerHTML = "<span>" + _fugir(e.topo) + "</span><i></i>";
+        no.appendChild(cab);
+      }
+      if (e.valor) {
+        var caixaV = document.createElement("div");
+        caixaV.className = "app-valor";
+        if (e.rotulo) {
+          var rot = document.createElement("small");
+          rot.textContent = e.rotulo;
+          caixaV.appendChild(rot);
+        }
+        var vv = document.createElement("strong");
+        vv.textContent = e.valor;
+        caixaV.appendChild(vv);
+        no.appendChild(caixaV);
+      }
+      var linhas = e.linhas || e.itens || [];
+      if (linhas.length) {
+        var lista = document.createElement("div");
+        lista.className = "app-linhas";
+        linhas.slice(0, 8).forEach(function (li) {
+          /* Aceita ["nome", "valor"] e "nome|valor" — o segundo é a forma que
+             todo o resto da spec usa (lista, cartoes, passos), e quem escreve
+             o documento vai chutar a que já conhece. */
+          var nome = li, valor = "";
+          if (Array.isArray(li)) { nome = li[0]; valor = li[1] || ""; }
+          else if (typeof li === "string" && li.indexOf("|") > -1) {
+            var par = li.split("|"); nome = par[0]; valor = par.slice(1).join("|");
+          }
+          var linha = document.createElement("div");
+          linha.className = "app-linha";
+          linha.innerHTML = "<span>" + _fugir(String(nome).trim()) + "</span>"
+            + "<b>" + _fugir(String(valor).trim()) + "</b>";
+          lista.appendChild(linha);
+        });
+        no.appendChild(lista);
+      }
+      if (e.botao) {
+        var bt = document.createElement("div");
+        bt.className = "app-botao";
+        bt.textContent = e.botao;
+        no.appendChild(bt);
+      }
+      break;
+    }
+
+    /* ── A VITRINE ───────────────────────────────────────────────────────
+       A linha de produtos, com um escolhido. O `cartoes` genérico resolvia
+       isso com três caixinhas de vidro do tamanho de um selo; aqui os itens
+       são CARTÕES, o atual vem à frente e os outros recuam — que é o desenho
+       de toda tela de "escolha o seu". */
+    case "vitrine": {
+      var itens = (e.itens || []).slice(0, 5);
+      var atual = e.atual != null ? Number(e.atual) : 0;
+      if (e.titulo) {
+        var tt = document.createElement("div");
+        tt.className = "vitrine-titulo";
+        tt.textContent = e.titulo;
+        no.appendChild(tt);
+      }
+      var fila = document.createElement("div");
+      fila.className = "vitrine-fila";
+      itens.forEach(function (it, i) {
+        var dado = typeof it === "string"
+          ? { nome: it.split("|")[0], detalhe: it.split("|").slice(1).join("|") }
+          : (it || {});
+        var mini = renderElemento({
+          tipo: "cartao", nome: e.nome || dado.marca || "",
+          variante: dado.nome || dado.variante || "",
+          cor: dado.cor || e.cor, numero: dado.numero,
+          titular: " ", validade: " ",
+        }, ctx);
+        var col = document.createElement("div");
+        col.className = "vitrine-item" + (i === atual ? " atual" : "");
+        col.appendChild(mini);
+        if (dado.detalhe) {
+          var d = document.createElement("small");
+          d.textContent = dado.detalhe;
+          col.appendChild(d);
+        }
+        fila.appendChild(col);
+      });
+      no.appendChild(fila);
+      break;
+    }
+
+    /* ── A ASSINATURA ────────────────────────────────────────────────────
+       O fim do anúncio. Toda peça de marca fecha assim — o logo sozinho,
+       grande, sobre a cor da casa, e nada mais na tela. Sem este elemento a
+       última cena do vídeo era mais uma frase, e a peça acabava sem assinar
+       quem falou. */
+    case "assinatura": {
+      no.setAttribute("data-sobre", /^(marca|claro|escuro)$/.test(e.sobre || "") ? e.sobre : "marca");
+      if (e.logo) {
+        var img2 = document.createElement("img");
+        img2.className = "assinatura-logo";
+        img2.src = e.logo; img2.alt = e.nome || "";
+        no.appendChild(img2);
+      } else if (e.nome) {
+        var nm = document.createElement("div");
+        nm.className = "assinatura-nome";
+        nm.textContent = e.nome;
+        no.appendChild(nm);
+      }
+      if (e.frase) {
+        var fr = document.createElement("div");
+        fr.className = "assinatura-frase";
+        fr.textContent = e.frase;
+        no.appendChild(fr);
+      }
+      break;
+    }
+
     case "icone": {
       var t = e.tamanho || 90;
       no.style.width = _px(e.l || t);
@@ -1188,6 +1410,11 @@ function renderCena(cena, doc, op) {
   elementos = elementos.filter(function (e) {
     if (!e || e.x != null || e.y != null) return true;
     if (e.tipo === "clipe") { deChao.push(e); return false; }
+    /* A ASSINATURA É A CENA INTEIRA, e por isso entra pelo chão e não pelo
+       fluxo. Pelo fluxo ela vira uma caixinha colorida no meio da tela, com a
+       margem do layout em volta — que é o oposto de assinar: o logo tem de
+       encostar nas bordas do quadro, como em qualquer fim de comercial. */
+    if (e.tipo === "assinatura") { deChao.push(e); return false; }
     // Legenda de fala mora no terço de baixo, como toda legenda de vídeo.
     // Pelo fluxo ela iria para o meio da tela, em cima do rosto de quem fala.
     if (e.tipo === "texto" && e.papel === "fala") { falas.push(e); return false; }
@@ -1203,6 +1430,21 @@ function renderCena(cena, doc, op) {
   // tela vertical pede tipografia maior: os padrões são calibrados em 1920x1080
   var escalaTipo = H > W ? 1.35 : 1;
   no.style.setProperty("--esc", escalaTipo);
+  // A altura do quadro, para o CSS dimensionar o que precisa ocupar a cena
+  // (o aparelho, hoje) em proporção e não em pixels calibrados num formato só.
+  no.style.setProperty("--alto", H + "px");
+  /* A UNIDADE DA CENA: 1% da largura do quadro.
+
+     Sem ela, tudo o que o CSS escreve em `em` cai na fonte herdada — que numa
+     cena é a do navegador, ~14px — e o desenho colapsa sem erro nenhum. Foi
+     medido num quadro de 1080x1920: a linha do extrato saiu com 7,84px e o
+     nome da assinatura com 30,8px, num quadro de 1920 de altura. Na tela
+     aquilo não é "pequeno": é invisível.
+
+     O resto do sistema resolve isso mandando PIXEL do documento (`tamanho`).
+     Peça que não tem `tamanho` — a tela do app, a vitrine, a assinatura — se
+     mede por aqui, e assim acompanha o formato em vez de ser calibrada num só. */
+  no.style.setProperty("--u", (W / 100) + "px");
   var ctx = {
     i: 0, escalaTipo: escalaTipo,
     animPadrao: op.animar ? (cena.anim || "subir") : null,

package/studio/web/render.css

@@ -511,8 +511,17 @@
 }
 
 .el.dispositivo[data-forma="celular"] { width: 100%; }
+/* O TETO DO APARELHO ACOMPANHA O QUADRO. Ele era 780px fixos, calibrados em
+   1920x1080 — e num vídeo vertical de 1080x1920 isso deixa o celular ocupando
+   um terço da altura, boiando no meio do branco. Num anúncio o aparelho é o
+   assunto da cena: ele ocupa a tela. `--alto` é a altura da cena, posta pelo
+   renderCena. */
 .el.dispositivo[data-forma="celular"] .moldura {
-  height: min(100%, 780px); width: auto; max-width: 100%;
+  /* Altura em PIXEL vindo do quadro, sem porcentagem: `min(100%, …)` dentro de
+     um pai de altura automática é percentagem circular — o navegador desiste
+     dela e o aparelho volta a ser medido pela largura. Medido: 408px de altura
+     num quadro de 1920, um quinto da tela. */
+  height: calc(var(--alto, 1080px) * .62); width: auto; max-width: 100%;
   aspect-ratio: 9 / 19;
   border-radius: 42px; padding: 12px;
 }
@@ -761,8 +770,14 @@
 .cena.animar .el[data-an="cortina"]  { animation-name: anCortina; animation-duration: .85s; }
 .cena.animar .el[data-an="elastico"] { animation-name: anElastico; animation-duration: .95s; }
 
-/* palavra a palavra — cada palavra entra sozinha */
-.el.txt .pal { display: inline-block; opacity: 0; }
+/* palavra a palavra — cada palavra entra sozinha.
+
+   A palavra nasce VISÍVEL, e quem a esconde é a animação (com `both`, o
+   estado inicial do keyframe já vale antes de ela começar). Com `opacity: 0`
+   aqui na base, toda cena com `anim: "palavra"` saía EM BRANCO fora do player
+   — na miniatura, na prévia parada do editor, em qualquer render estático.
+   Texto que some sem erro nenhum é o defeito mais caro deste arquivo. */
+.el.txt .pal { display: inline-block; }
 .cena.animar .el[data-an="palavra"] { animation: none; opacity: 1; }
 .cena.animar .el[data-an="palavra"] .pal {
   animation: anSubir .58s cubic-bezier(.22, 1, .36, 1) both;
@@ -933,3 +948,212 @@
   display: grid; place-items: center; min-height: 0; overflow: visible;
 }
 .cena .fluxo .lado-imagem.com-aparelho > .el { max-height: 100%; }
+
+/* ══ O KIT DE ANÚNCIO ═══════════════════════════════════════════════════════
+   Nasceu de um vídeo de referência mandado pelo dono — um comercial de
+   fintech — com uma frase só: "ainda não tá bom, tá genérico. Quero nesse
+   nível." Medindo a peça de hoje contra aquela, o que faltava não era tema
+   nem cor (tema claro e `marca.cor` já existiam): era o PRODUTO.
+   ══════════════════════════════════════════════════════════════════════════ */
+
+/* ── cartão ───────────────────────────────────────────────────────────────
+   A proporção é a de verdade (85,6 × 54 mm = 1,586). Ela importa mais que o
+   desenho: um retângulo na proporção errada não é lido como cartão por mais
+   chip que tenha. */
+.el.cartao {
+  --cc: var(--c-tom);
+  width: min(100%, 620px);
+  perspective: 1400px;
+}
+.el.cartao .cartao-corpo {
+  position: relative;
+  aspect-ratio: 1.586;
+  border-radius: 6.2%;
+  padding: 7% 7.5%;
+  display: flex; flex-direction: column; justify-content: space-between;
+  color: #fff;
+  /* Duas fontes de luz e uma sombra longa: é o que separa "objeto pousado na
+     cena" de "retângulo colado por cima". */
+  background:
+    radial-gradient(120% 140% at 12% 4%, rgba(255, 255, 255, .30), transparent 52%),
+    linear-gradient(145deg,
+      color-mix(in srgb, var(--cc) 88%, #fff),
+      var(--cc) 46%,
+      color-mix(in srgb, var(--cc) 72%, #000) 100%);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, .38),
+    inset 0 -1px 0 rgba(0, 0, 0, .22),
+    0 2.2% 5% -1% rgba(0, 0, 0, .45);
+  transform: rotate(-1.6deg);
+}
+/* O reflexo diagonal. Sem ele o plástico vira papel colorido. */
+.el.cartao .cartao-brilho {
+  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
+  background: linear-gradient(102deg, transparent 34%, rgba(255, 255, 255, .20) 46%,
+    rgba(255, 255, 255, .05) 54%, transparent 62%);
+}
+.el.cartao .cartao-topo {
+  display: flex; align-items: baseline; justify-content: space-between; gap: 1em;
+}
+.el.cartao .cartao-marca {
+  font-weight: 800; font-size: 6.4cqw; letter-spacing: -.01em;
+}
+.el.cartao .cartao-variante {
+  font-size: 3.4cqw; letter-spacing: .18em; text-transform: uppercase;
+  opacity: .82; font-weight: 600;
+}
+.el.cartao .cartao-meio { display: flex; align-items: center; gap: 4%; }
+/* O chip: dourado, com os contatos. É o detalhe que mais faz o desenho ser
+   reconhecido — some ele e sobra um cartão de visita. */
+.el.cartao .cartao-chip {
+  width: 13%; aspect-ratio: 1.32; border-radius: 14%;
+  background: linear-gradient(150deg, #f7e3a1, #d9b558 46%, #b8912f);
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
+  position: relative; flex: none;
+}
+.el.cartao .cartao-chip::before,
+.el.cartao .cartao-chip::after {
+  content: ""; position: absolute; left: 12%; right: 12%; height: 1px;
+  background: rgba(0, 0, 0, .28);
+}
+.el.cartao .cartao-chip::before { top: 36%; }
+.el.cartao .cartao-chip::after { top: 64%; }
+.el.cartao .cartao-onda { width: 7%; opacity: .9; display: block; flex: none; }
+.el.cartao .cartao-onda svg { width: 100%; height: auto; display: block; }
+.el.cartao .cartao-numero {
+  font-family: var(--f-mono);
+  font-size: 5.6cqw; letter-spacing: .06em; opacity: .95;
+}
+.el.cartao .cartao-pe {
+  display: flex; justify-content: space-between; gap: 1em;
+  font-size: 3.1cqw; letter-spacing: .13em; text-transform: uppercase;
+  opacity: .8; font-weight: 600;
+}
+/* As medidas de dentro são `cqw` — por cento da LARGURA DO CARTÃO, não da
+   tela. Sem o contexto de contêiner o mesmo cartão sai com o chip do tamanho
+   de uma unha na vitrine e do tamanho de uma caixa na cena cheia. */
+.el.cartao .cartao-corpo { container-type: inline-size; }
+
+.el.cartao[data-face="verso"] .cartao-corpo { transform: rotate(1.6deg); }
+.el.cartao[data-mov="flutuar"] .cartao-corpo { animation: cartao-flutua 6s ease-in-out infinite; }
+.el.cartao[data-mov="girar"] .cartao-corpo { animation: cartao-gira 9s ease-in-out infinite; }
+@keyframes cartao-flutua {
+  0%, 100% { transform: rotate(-1.6deg) translateY(0); }
+  50%      { transform: rotate(-.6deg) translateY(-2.2%); }
+}
+@keyframes cartao-gira {
+  0%, 100% { transform: rotate(-1.6deg) rotateY(-16deg); }
+  50%      { transform: rotate(-1.6deg) rotateY(16deg); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .el.cartao .cartao-corpo { animation: none; }
+}
+
+/* ── a tela do app ────────────────────────────────────────────────────────
+   Vale sozinha na cena e vale dentro do `dispositivo`. É o mesmo elemento de
+   propósito: com dois, o print da campanha e a tela do celular divergiriam na
+   primeira mudança. */
+.el.app {
+  width: 100%;
+  font-size: calc(var(--u, 10px) * 3.4);
+  display: flex; flex-direction: column; gap: 4%;
+  text-align: left;
+  background: #fff; color: #10161d;
+  border-radius: 22px; padding: 7% 6.5%;
+  box-shadow: 0 18px 50px rgba(0, 0, 0, .16);
+}
+.el.app[data-escuro] { background: #0e1319; color: #eaf0f6; box-shadow: none; }
+.el.app .app-topo {
+  display: flex; align-items: center; justify-content: space-between;
+  font-size: .62em; font-weight: 700; opacity: .75;
+}
+.el.app .app-topo i {
+  width: 2.2em; height: .34em; border-radius: 999px;
+  background: currentColor; opacity: .25; display: block;
+}
+.el.app .app-valor { display: flex; flex-direction: column; gap: .12em; }
+.el.app .app-valor small { font-size: .5em; opacity: .6; font-weight: 600; }
+.el.app .app-valor strong {
+  font-size: 1.5em; font-weight: 800; letter-spacing: -.02em;
+  font-variant-numeric: tabular-nums;
+}
+.el.app .app-linhas { display: flex; flex-direction: column; }
+/* O FIO entre as linhas é o que faz o olho ler "extrato". Sem ele são frases
+   empilhadas, que é como a tela saía antes. */
+.el.app .app-linha {
+  display: flex; align-items: center; justify-content: space-between; gap: 1em;
+  padding: .62em 0; font-size: .56em;
+  border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
+}
+.el.app .app-linha:first-child { border-top: 0; }
+.el.app .app-linha span { opacity: .82; }
+.el.app .app-linha b { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
+.el.app .app-botao {
+  margin-top: auto;
+  background: var(--c-tom); color: #fff;
+  border-radius: 999px; padding: .78em 1em;
+  text-align: center; font-weight: 700; font-size: .58em;
+}
+
+/* Dentro do aparelho a tela do app OCUPA o vidro: com o padrão do
+   `dispositivo` (conteúdo centrado com folga) ela ficava boiando no meio, e o
+   que se vê num celular de verdade é a tela cheia. */
+.el.dispositivo .tela { justify-content: flex-start; }
+.el.dispositivo .tela > .el.app {
+  flex: 1; border-radius: 0; box-shadow: none;
+  margin: -26px -20px; padding: 34px 22px 26px;
+  background: transparent; color: var(--c-texto);
+}
+
+/* ── vitrine ──────────────────────────────────────────────────────────────
+   A linha de produtos com um escolhido. O item atual vem à frente; os outros
+   recuam — sem isso são quatro cartões do mesmo tamanho e ninguém sabe qual
+   está sendo oferecido. */
+.el.vitrine {
+  width: 100%; font-size: calc(var(--u, 10px) * 3.4);
+  display: flex; flex-direction: column; gap: 1.2em;
+}
+.el.vitrine .vitrine-titulo {
+  text-align: center; font-size: .62em; font-weight: 700;
+  letter-spacing: .04em; opacity: .82;
+}
+.el.vitrine .vitrine-fila {
+  display: flex; align-items: center; justify-content: center; gap: 2.2%;
+}
+.el.vitrine .vitrine-item {
+  flex: 1 1 0; min-width: 0;
+  display: flex; flex-direction: column; align-items: center; gap: .5em;
+  /* Recuado, não apagado: a .42 sobre fundo escuro os outros cartões somem, e
+     uma vitrine com um produto só não é vitrine. */
+  opacity: .58; transform: scale(.86);
+  transition: opacity .4s ease, transform .4s ease;
+}
+.el.vitrine .vitrine-item.atual { opacity: 1; transform: scale(1.06); z-index: 2; }
+.el.vitrine .vitrine-item small {
+  font-size: .42em; opacity: .75; text-align: center; font-weight: 600;
+}
+.el.vitrine .el.cartao { width: 100%; }
+
+/* ── assinatura ───────────────────────────────────────────────────────────
+   O fim do anúncio: o logo sozinho, grande, sobre a cor da casa. Ela toma a
+   cena INTEIRA porque é isso que uma assinatura é — se dividisse espaço com
+   outra coisa, seria mais um bloco em vez do ponto final. */
+.el.assinatura {
+  position: absolute; inset: 0; z-index: 4;
+  font-size: calc(var(--u, 10px) * 3);
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  gap: .5em; text-align: center; padding: 8%;
+}
+.el.assinatura[data-sobre="marca"] { background: var(--c-tom); color: #fff; }
+.el.assinatura[data-sobre="claro"] { background: #fff; color: #10161d; }
+.el.assinatura[data-sobre="escuro"] { background: #080b0e; color: #fff; }
+.el.assinatura .assinatura-logo { width: min(52%, 520px); height: auto; display: block; }
+.el.assinatura .assinatura-nome {
+  font-size: 3.6em; font-weight: 800; letter-spacing: -.03em; line-height: 1;
+}
+.el.assinatura .assinatura-frase { font-size: .62em; opacity: .82; letter-spacing: .02em; }
+
+/* Título de anúncio quebra EQUILIBRADO. "Um cartão. Seu jeito." saía em
+   quatro linhas — três palavras e um órfão —, e é assim que uma frase curta
+   vira um bloco desengonçado no meio do quadro. */
+.el.texto.titulo, .el.texto[data-papel="titulo"] { text-wrap: balance; }