primocode 8.35.0 → 8.37.0

package/studio/web/js/render.js

@@ -4,6 +4,60 @@
    Dois modos: layout nomeado (o estúdio posiciona) ou "livre" (x/y/l/a).
    ========================================================================== */
 
+/* ── A QUEBRA DA LEGENDA ─────────────────────────────────────────────────
+ * Legenda de vídeo tem regra de ofício, e ela não é opinião: linha curta o
+ * bastante para o olho pegar de relance (~38 caracteres em 1080p), no máximo
+ * três linhas, e a quebra caindo em espaço — nunca no meio da palavra.
+ *
+ * E as linhas saem EQUILIBRADAS. Encher a primeira até o talo e deixar duas
+ * palavras na segunda é o que faz a legenda parecer torta mesmo estando
+ * centralizada — foi essa a reclamação.
+ */
+var LEGENDA_LARGURA = 38;
+
+/** Quebra gulosa numa largura dada: enche a linha até não caber mais. */
+function envolver(palavras, largura) {
+  var linhas = [];
+  var atual = "";
+  for (var i = 0; i < palavras.length; i++) {
+    var tenta = atual ? atual + " " + palavras[i] : palavras[i];
+    if (atual && tenta.length > largura) { linhas.push(atual); atual = palavras[i]; }
+    else atual = tenta;
+  }
+  if (atual) linhas.push(atual);
+  return linhas;
+}
+
+function quebrarLegenda(texto) {
+  var t = String(texto == null ? "" : texto).replace(/\s+/g, " ").trim();
+  if (!t) return "";
+  if (t.length <= LEGENDA_LARGURA) return t;
+
+  var palavras = t.split(" ");
+  var quantas = envolver(palavras, LEGENDA_LARGURA).length;
+
+  /* O EQUILÍBRIO.
+   *
+   * A quebra gulosa enche a primeira linha até o talo e larga duas palavras na
+   * última — é isso que faz a legenda parecer torta mesmo estando
+   * centralizada, e foi essa a reclamação.
+   *
+   * A primeira tentativa foi dividir o comprimento pelo número de linhas e
+   * cortar no alvo. Não serve: o resto se acumula na última, que estourava a
+   * largura (41 caracteres numa régua de 38).
+   *
+   * O que serve é apertar a régua: procurar a MENOR largura que ainda cabe no
+   * mesmo número de linhas. Aí nenhuma linha passa do teto — a régua só
+   * encolheu — e todas ficam parecidas, porque foi o aperto que as igualou.
+   */
+  var melhor = LEGENDA_LARGURA;
+  for (var w = LEGENDA_LARGURA - 1; w >= 12; w--) {
+    if (envolver(palavras, w).length > quantas) break;
+    melhor = w;
+  }
+  return envolver(palavras, melhor).join("\n");
+}
+
 var PAPEIS = {
   chapeu:    { classe: "chapeu" },
   titulo:    { tamanho: 84, peso: 660, altura: 1.06 },
@@ -61,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;
   }
@@ -160,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.
@@ -481,7 +561,15 @@ function renderElemento(e, ctx) {
       if (e.peso || papel.peso) no.style.fontWeight = e.peso || papel.peso;
       if (papel.altura) no.style.lineHeight = papel.altura;
       no.style.color = e.cor || papel.cor || "";
-      if (e.alinhar) { no.style.textAlign = e.alinhar; no.style.alignItems = e.alinhar === "centro" ? "center" : (e.alinhar === "direita" ? "flex-end" : "flex-start"); }
+      /* LEGENDA DE FALA É SEMPRE CENTRALIZADA, e o `alinhar` do modelo não
+         manda nela. Legenda de vídeo alinhada à esquerda não existe em lugar
+         nenhum — ela é lida em movimento, e o olho volta para o meio da tela.
+         Bastava o modelo escrever `alinhar: "esquerda"` uma vez para a legenda
+         sair torta, e ele escrevia. */
+      if (e.alinhar && e.papel !== "fala") {
+        no.style.textAlign = e.alinhar;
+        no.style.alignItems = e.alinhar === "centro" ? "center" : (e.alinhar === "direita" ? "flex-end" : "flex-start");
+      }
       if (e.fonte === "mono") no.style.fontFamily = "var(--f-mono)";
       if (e.fonte === "display") no.style.fontFamily = "var(--f-display)";
       if (e.maiusculas) no.style.textTransform = "uppercase";
@@ -489,7 +577,26 @@ function renderElemento(e, ctx) {
       if (e.altura != null) no.style.lineHeight = e.altura;
       if (e.estilo) no.setAttribute("data-estilo", e.estilo);
 
-      var corpoTexto = _rico(e.texto);
+      /* A LEGENDA SE QUEBRA SOZINHA.
+         "A IA não consegue formatar bem" — e não vai conseguir: ela escreve a
+         frase, não a diagramação. Quem sabe quantos caracteres cabem numa
+         linha de 1080p é este código, e é ele que quebra.
+
+         Sem isto a legenda saía como parágrafo: cinco linhas subindo pela
+         tela, tapando o rosto de quem fala. */
+      var corpoTexto = _rico(e.papel === "fala" ? quebrarLegenda(e.texto) : e.texto);
+      if (e.papel === "fala" && !e.tamanho) {
+        /* Legenda longa ENCOLHE em vez de crescer para cima. Três linhas com o
+           corpo de uma linha comem metade do quadro, e o rosto de quem fala
+           fica atrás delas.
+           
+           Não se corta palavra: perder o que foi dito é pior que letra menor.
+           O piso de 62% é onde a letra ainda se lê num celular. */
+        var nLinhas = String(quebrarLegenda(e.texto)).split("\n").length;
+        var base = (PAPEIS.fala.tamanho || 52) * (ctx.escalaTipo || 1);
+        var fator = Math.max(0.62, 1 - (nLinhas - 1) * 0.10);
+        if (nLinhas > 1) no.style.fontSize = _px(Math.round(base * fator));
+      }
 
       // marcador e fita precisam envolver cada linha para o fundo acompanhar
       if (e.estilo === "marcador" || e.estilo === "fita") {
@@ -844,10 +951,232 @@ function renderElemento(e, ctx) {
       if (typeof e.de === "number") vid.dataset.de = e.de;
       if (typeof e.ate === "number") vid.dataset.ate = e.ate;
       no.style.borderRadius = _px(e.raio != null ? e.raio : 0);
+
+      /* ── SÓ A VOZ, COM A TELA MONTADA POR CIMA ────────────────────────
+       *
+       *   "Não deixa opção de manter só a voz com uma tela de exemplos."
+       *
+       * Faltava mesmo, e não era teimosia do agente: o vocabulário tinha
+       * `mudo` (imagem sem som) e NÃO tinha o contrário. Sem isto, usar a
+       * gravação como narração — a voz da pessoa por cima de telas montadas
+       * pelo estúdio — era impossível de escrever, por mais que se pedisse.
+       *
+       * O <video> continua no lugar, carregando e tocando: é ele que leva o
+       * áudio para o grafo da trilha (e daí para o MP4) e é o `de`/`ate` dele
+       * que dá a duração da cena. O que muda é que ele não aparece — some da
+       * tela e some do quadro exportado, que é o `data-som` lido no
+       * `video.js`. Um <video> com `display:none` também continuaria tocando,
+       * mas alguns navegadores param de decodificar o que não está no
+       * layout, e sem quadro decodificado o player o trata como não-pronto. */
+      if (e.apenas === "som" || e.som === true) {
+        vid.dataset.som = "1";
+        no.style.position = "absolute";
+        no.style.left = "0"; no.style.top = "0";
+        no.style.width = "1px"; no.style.height = "1px";
+        no.style.opacity = "0";
+        no.style.pointerEvents = "none";
+        no.style.overflow = "hidden";
+      }
       no.appendChild(vid);
       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);
@@ -1081,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; }
@@ -1096,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/js/video.js

@@ -192,6 +192,10 @@ var VideoExport = (function () {
       // para desenhar levanta exceção em alguns navegadores e mancha o
       // canvas em outros.
       if (v.readyState < 2 || !v.videoWidth) return;
+      // Clipe de SÓ ÁUDIO: entra pelo som e não pelo quadro. Ele tem 1px na
+      // tela, então sem esta linha o export desenharia uma tira de um pixel
+      // esticada por cima da cena montada — visível, e sem causa aparente.
+      if (v.dataset && v.dataset.som === "1") return;
       var r = v.getBoundingClientRect();
       var dx = (r.left - caixaCena.left) * escX;
       var dy = (r.top - caixaCena.top) * escY;

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; }