primocode 8.26.0 → 8.27.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "primocode",
-  "version": "8.26.0",
+  "version": "8.27.0",
   "description": "PrimoCode — agente de engenharia com IA e cursor próprio. Modelos grátis. 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/app.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/app.test.js && node test/elementos.test.js"
   },
   "engines": {
     "node": ">=18.17.0"

package/studio/ferramentas/00-protocolo.md

@@ -57,7 +57,8 @@ Em dúvida entre duas, escolha a que o usuário vai **mostrar para outra pessoa*
 - **Ritmo.** Em decks longos, um `layout: "secao"` a cada 3–5 cenas.
 - **Escolha o tema pelo assunto:** `meia-noite` produto e tecnologia · `claro`
   corporativo e projetor · `papel` editorial e longo · `neon` técnico e dev ·
-  `brasa` energia e urgência · `floresta` sustentabilidade e saúde.
+  `brasa` energia e urgência · `floresta` sustentabilidade e saúde ·
+  `ambar` curso, aula e conteúdo longo · `grafite` técnico sóbrio e relatório.
 - **Notas do apresentador** (`notas` na cena) em quem vai falar por cima.
 - **Nunca invente dado com cara de real.** Sem fonte, escreva a ordem de grandeza
   ou deixe o campo como pergunta explícita ao usuário.

package/studio/ferramentas/01-modelos.md

@@ -134,9 +134,10 @@ Sem declarar nada, os elementos já entram em cascata na ordem em que aparecem.
 
 ### Temas
 
-`meia-noite` `claro` `papel` `neon` `brasa` `floresta` `retro` `oceano` `doce` `mono`
+`meia-noite` `claro` `papel` `neon` `brasa` `floresta` `retro` `oceano` `doce`
+`mono` `ambar` `grafite`
 
-São esses dez, e só. Nome fora da lista é recusado: escuro é `meia-noite`, não
+São esses doze, e só. Nome fora da lista é recusado: escuro é `meia-noite`, não
 `noite`. Vale no documento ou por cena.
 
 ### Identidade — o que separa um vídeo genérico de um da marca

package/studio/ferramentas/corte.md

@@ -89,6 +89,8 @@ cena. Se o assunto não empurrar para nenhuma, escolha a que você NÃO usou da
 | explicação, tutorial, passo a passo | `papel` ou `claro` | `lofi` | **Aula** |
 | conquista, agradecimento, celebração | `doce` ou `neon` | `alegre` | **Brinde** |
 | memória, história, retrospectiva | `retro` ou `mono` | `lofi` | **Linha** |
+| curso, aula, treinamento, método | `ambar` | `lofi` | **Aula** |
+| relatório, número, análise técnica | `grafite` | `ambiente` | **Manchete** |
 
 ### As seis estruturas
 
@@ -178,6 +180,85 @@ livre de direitos, ou uma das trilhas geradas acima.
 
 ---
 
+## Elementos que dão cara de produção
+
+Estes seis existem porque um vídeo genérico é feito só de título + texto. São
+baratos de escrever e mudam completamente o resultado.
+
+### `selo` — a pílula de estado
+
+```json
+{ "tipo": "selo", "texto": "Módulo 2 de 5" }
+{ "tipo": "selo", "texto": "Resultado 4", "icone": "★", "estilo": "vivo" }
+```
+
+`estilo`: sem nada (contorno), `"vivo"` (preenchido) ou `"solto"` (só o texto
+em versalete). Vai sozinho para cima do título.
+
+### `progresso` — onde estamos no caminho
+
+```json
+{ "tipo": "progresso", "atual": 4, "total": 15 }
+```
+
+Mostra "4/15" e os pontinhos. Use em série de cenas: diz ao espectador que
+existe um percurso, e isso segura ele até o fim. `"numero": false` deixa só
+os pontos.
+
+### `avatar` — a pessoa
+
+```json
+{ "tipo": "avatar", "src": "/midia/foto.jpg", "nome": "Cleiton Paris", "tamanho": 280 }
+```
+
+Círculo com anel aceso. Sem `src`, mostra as iniciais do `nome` — melhor que
+um buraco cinza. Vai para cima do nome sozinho.
+
+### `dispositivo` — celular, notebook ou navegador com conteúdo dentro
+
+```json
+{ "tipo": "dispositivo", "forma": "celular", "dentro": [ ...elementos... ] }
+```
+
+`forma`: `celular` | `notebook` | `tablet` | `navegador` (este aceita
+`"endereco": "primocode.dev"`). `dentro` é uma lista de elementos comuns — o
+que couber. Nos layouts `imagem-direita` / `imagem-esquerda` o aparelho vai
+para o lado sozinho, com o texto do outro. É o enquadramento mais forte que
+existe aqui: use quando estiver mostrando uma tela.
+
+### `conversa` — balões de pergunta e resposta
+
+```json
+{ "tipo": "conversa", "itens": [
+    { "de": "eu",  "texto": "Como acelero meu workflow?" },
+    { "de": "ela", "texto": "Peça o storyboard em seis quadros." } ] }
+```
+
+Entram um de cada vez, como diálogo. `de: "eu"` à esquerda; qualquer outra
+coisa à direita, com a cor do tema. Combina com `dispositivo` — a conversa
+dentro do celular é a cena mais usada em vídeo de IA.
+
+### `passos` e `opcoes`
+
+```json
+{ "tipo": "passos", "atual": 2, "itens": ["Passo 1|roteiro", "Passo 2|storyboard", "Passo 3|corte"] }
+{ "tipo": "opcoes", "pergunta": "O que garante o look?", "certa": 1,
+  "itens": ["LUT uniforme", "Saturação aleatória", "Espaços de cor diferentes"] }
+```
+
+`passos` acende a etapa `atual` e apaga as outras — mude o `atual` a cada
+cena e a série ganha movimento sem esforço. `opcoes` marca a alternativa
+`certa` com ✓ (não escreva o ✓ no texto: ele vem sozinho). Alternativa faz o
+espectador pensar antes da resposta, e pensar é o que segura alguém no vídeo.
+
+### Vidro
+
+`"estilo": "vidro"` em `cartoes` dá painel translúcido com bisel de luz em
+cima e sombra embaixo — o "liquid glass". Funciona em tema escuro; em tema
+claro use os cartões normais.
+
+---
+
 ## Editar o vídeo do usuário (`clipe`)
 
 Quando a pessoa manda uma gravação dela — o rosto falando, uma tela gravada,

package/studio/server.py

@@ -784,7 +784,7 @@ def gravar_analise(ident, dados):
 # "Ele não alterna entre os temas, usa um tema só pra todos os vídeos, e o
 # vídeo sempre tem a mesma estrutura. Fica tudo genérico."
 #
-# O estúdio tem dez temas, onze fundos, oito transições e seis trilhas. O
+# O estúdio tem doze temas, onze fundos, oito transições e seis trilhas. O
 # agente usa uma fatia estreita e repete — porque a spec tem UM exemplo
 # completo e modelo ancora em exemplo. Conselho escrito na spec ajuda pouco
 # quando ela nem sempre é relida.
@@ -922,7 +922,7 @@ def _texto_do_doc(doc):
 # Os temas que o render.css de fato define. Fora desta lista não existe cor
 # nenhuma — foi o que aconteceu com "noite", que passou como se fosse tema.
 TEMAS_VALIDOS = {"claro", "meia-noite", "papel", "neon", "brasa", "floresta",
-                 "retro", "oceano", "doce", "mono"}
+                 "retro", "oceano", "doce", "mono", "ambar", "grafite"}
 
 
 def _tema_invalido(tema, onde=""):
@@ -989,7 +989,13 @@ def validar_doc(modelo, doc):
     # preto": documento válido na forma, invisível na tela.
     TIPOS_VALIDOS = {"texto", "lista", "cartoes", "numeros", "tabela", "codigo",
                      "citacao", "forma", "imagem", "icone", "grafico", "no", "conector",
-                     "objeto3d", "clipe"}
+                     "objeto3d", "clipe",
+                     "selo", "progresso", "avatar", "dispositivo", "conversa",
+                     "passos", "opcoes"}
+    # Os sete últimos são o vocabulário do vídeo de referência. O comentário
+    # mora aqui fora porque test/vocabulario.test.js lê esta lista com
+    # expressão regular, comparando com a do render.js — palavra de comentário
+    # dentro das chaves entrava na lista como se fosse um tipo válido.
 
     # Tema inventado tinha o mesmo destino silencioso do tipo inventado: o CSS
     # não casa com [data-tema="noite"], nenhuma cor é definida e a peça sai

package/studio/web/js/ferramentas.js

@@ -2,10 +2,10 @@
    ferramentas.js — o que cada ferramenta oferece na interface.
    ========================================================================== */
 
-// Os dez que o render.css define. A lista tinha seis: quatro temas existiam
+// Os doze que o render.css define. A lista tinha seis: quatro temas existiam
 // no CSS, a IA podia usá-los, e o editor não os oferecia a ninguém.
 var TEMAS = ["meia-noite", "claro", "papel", "neon", "brasa", "floresta",
-  "retro", "oceano", "doce", "mono"];
+  "retro", "oceano", "doce", "mono", "ambar", "grafite"];
 
 var PALETA = ["#ff5a36", "#ffb03a", "#f4e04d", "#2fbf7f", "#1f8fe0", "#8b5cf6",
               "#f472b6", "#ffffff", "#9aa4b2", "#111318"];

package/studio/web/js/render.js

@@ -162,7 +162,16 @@ function svgGrafico(e, l, a) {
 
 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 };
+  objeto3d: 1, clipe: 1,
+  selo: 1, progresso: 1, avatar: 1, dispositivo: 1, conversa: 1, passos: 1,
+  opcoes: 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.
+
+   O comentário mora AQUI FORA porque test/vocabulario.test.js lê esta lista
+   com expressão regular, comparando com a do servidor — e palavra de
+   comentário dentro das chaves entrava na lista como se fosse um tipo. */
 
 /* ── chaves de animação ──────────────────────────────────────────────────
    Transforma a lista de instantes de um elemento numa regra @keyframes de
@@ -528,6 +537,192 @@ function renderElemento(e, ctx) {
       break;
     }
 
+    /* ── selo ────────────────────────────────────────────────────────────
+       A pílula pequena, em versalete, que diz onde a cena está: "AVANÇADO",
+       "MÓDULO 2 DE 5", "RESULTADO 4". Custa quase nada e é o que separa uma
+       cena que parece produzida de uma cena que parece um slide.
+
+       Antes disso a saída era um `texto` com papel "chapeu", que é só letra
+       menor — sem a pílula, sem a marcação de estado. */
+    case "selo": {
+      no.textContent = "";
+      if (e.icone) {
+        var ic = document.createElement("span");
+        ic.className = "selo-icone";
+        ic.textContent = e.icone;
+        no.appendChild(ic);
+      }
+      var rot = document.createElement("span");
+      rot.textContent = e.texto || e.rotulo || "";
+      no.appendChild(rot);
+      if (e.estilo) no.setAttribute("data-estilo", e.estilo);   // "vivo" | "solto"
+      break;
+    }
+
+    /* ── progresso ───────────────────────────────────────────────────────
+       "4 de 15", com os pontinhos. Diz ao espectador que existe um caminho e
+       onde ele está nele — é o que faz um vídeo de dez cenas não parecer dez
+       cenas soltas. */
+    case "progresso": {
+      var total = Math.max(1, Math.min(40, Number(e.total) || 1));
+      var atual = Math.max(1, Math.min(total, Number(e.atual) || 1));
+      if (e.numero !== false) {
+        var num = document.createElement("b");
+        num.textContent = atual + "/" + total;
+        no.appendChild(num);
+      }
+      var pontos = document.createElement("span");
+      pontos.className = "pontos";
+      for (var pi = 1; pi <= total; pi++) {
+        var pt = document.createElement("i");
+        if (pi === atual) pt.className = "aqui";
+        else if (pi < atual) pt.className = "feito";
+        pontos.appendChild(pt);
+      }
+      no.appendChild(pontos);
+      break;
+    }
+
+    /* ── avatar ──────────────────────────────────────────────────────────
+       A foto redonda com o anel aceso. É como se apresenta uma PESSOA — e
+       vídeo com rosto retém mais que vídeo sem. Antes só existia `imagem`,
+       que é retângulo. */
+    case "avatar": {
+      var d = e.tamanho || 260;
+      no.style.width = _px(d);
+      no.style.height = _px(d);
+      if (e.src) {
+        var foto = document.createElement("img");
+        foto.src = e.src;
+        foto.alt = e.nome || "";
+        no.appendChild(foto);
+      } else {
+        // Sem foto, as iniciais — melhor que um buraco cinza.
+        var ini = document.createElement("b");
+        // Em px, calculado do diâmetro. Em `%` o navegador mede contra a
+        // fonte do PAI, não contra a caixa: as iniciais saíam com 8px dentro
+        // de um círculo de 280 — um pontinho no meio do nada.
+        ini.style.fontSize = _px(Math.round(d * 0.34));
+        ini.textContent = String(e.nome || "?").trim().split(/\s+/)
+          .slice(0, 2).map(function (w) { return w[0]; }).join("").toUpperCase();
+        no.appendChild(ini);
+      }
+      break;
+    }
+
+    /* ── dispositivo ─────────────────────────────────────────────────────
+       O celular, o notebook ou a janela de navegador com conteúdo DENTRO.
+       É o enquadramento que faz uma tela parecer uma tela em vez de um
+       retângulo de texto — e o vídeo de referência usa isso o tempo todo,
+       com a conversa acontecendo dentro do celular.
+
+       O conteúdo é `dentro`: uma lista de elementos comuns, renderizados
+       recursivamente. Assim qualquer coisa cabe ali — conversa, lista,
+       imagem — sem inventar um vocabulário só para o miolo. */
+    case "dispositivo": {
+      var forma = /^(celular|notebook|navegador|tablet)$/.test(e.forma || "")
+        ? e.forma : "celular";
+      no.setAttribute("data-forma", forma);
+      if (e.altura) no.style.height = _px(e.altura);
+      if (e.largura) no.style.width = _px(e.largura);
+
+      var moldura = document.createElement("div");
+      moldura.className = "moldura";
+
+      if (forma === "navegador") {
+        var barra = document.createElement("div");
+        barra.className = "barra-nav";
+        barra.innerHTML = "<i></i><i></i><i></i>"
+          + (e.endereco ? '<span class="url">' + _fugir(e.endereco) + "</span>" : "");
+        moldura.appendChild(barra);
+      }
+
+      var tela = document.createElement("div");
+      tela.className = "tela";
+      if (e.imagem) {
+        tela.style.backgroundImage = "url('" + e.imagem + "')";
+        tela.style.backgroundSize = "cover";
+        tela.style.backgroundPosition = "center";
+      }
+      (e.dentro || []).forEach(function (filho) {
+        if (!filho || !TIPOS_CONHECIDOS[filho.tipo]) return;
+        ctx.i++;
+        tela.appendChild(renderElemento(filho, ctx));
+      });
+      moldura.appendChild(tela);
+      no.appendChild(moldura);
+
+      if (forma === "notebook") {
+        var base = document.createElement("div");
+        base.className = "base";
+        no.appendChild(base);
+      }
+      break;
+    }
+
+    /* ── conversa ────────────────────────────────────────────────────────
+       Balões de pergunta e resposta. É a forma mais direta de mostrar como
+       se usa uma ferramenta de IA — e é o que o vídeo de referência faz
+       dentro do celular. `de: "eu"` alinha à direita; qualquer outra coisa
+       vai para a esquerda, com destaque. */
+    case "conversa": {
+      (e.itens || []).forEach(function (fala, iFala) {
+        var b = document.createElement("div");
+        var quem = typeof fala === "string" ? (iFala % 2 ? "ela" : "eu") : (fala.de || "eu");
+        b.className = "balao " + (quem === "eu" ? "meu" : "dela");
+        b.style.setProperty("--atraso", (0.12 + iFala * 0.28).toFixed(2));
+        b.textContent = typeof fala === "string" ? fala : (fala.texto || "");
+        no.appendChild(b);
+      });
+      break;
+    }
+
+    /* ── passos ──────────────────────────────────────────────────────────
+       Os cartões de etapa com UM aceso. Diferente de `cartoes`: aqui existe
+       ordem e existe "onde estamos agora", e é isso que se quer mostrar. */
+    case "passos": {
+      var itens = e.itens || [];
+      var vivo = Number(e.atual) || 0;                 // 1-based; 0 = nenhum
+      no.style.gridTemplateColumns = "repeat(" + Math.max(1, itens.length) + ", 1fr)";
+      itens.forEach(function (it, k) {
+        var p = document.createElement("div");
+        p.className = "passo" + (k + 1 === vivo ? " agora" : (k + 1 < vivo ? " feito" : ""));
+        var partes = typeof it === "string" ? it.split("|") : [it.titulo, it.texto];
+        var cab = document.createElement("b");
+        cab.textContent = (partes[0] || "").trim();
+        p.appendChild(cab);
+        if (partes[1]) {
+          var sub = document.createElement("span");
+          sub.textContent = String(partes[1]).trim();
+          p.appendChild(sub);
+        }
+        no.appendChild(p);
+      });
+      break;
+    }
+
+    /* ── opcoes ──────────────────────────────────────────────────────────
+       A pergunta com alternativas e uma certa. Faz o espectador PENSAR antes
+       de a resposta aparecer — e uma pausa de pensamento é o que segura
+       alguém num vídeo. `certa` é o índice (1-based) da alternativa boa. */
+    case "opcoes": {
+      if (e.pergunta) {
+        var q = document.createElement("b");
+        q.className = "pergunta";
+        q.textContent = e.pergunta;
+        no.appendChild(q);
+      }
+      var certa = Number(e.certa) || 0;
+      (e.itens || []).forEach(function (it, k) {
+        var o = document.createElement("div");
+        o.className = "opcao" + (k + 1 === certa ? " certa" : "");
+        o.textContent = typeof it === "string" ? it : (it.texto || "");
+        o.style.setProperty("--atraso", (0.1 + k * 0.18).toFixed(2));
+        no.appendChild(o);
+      });
+      break;
+    }
+
     case "numeros": {
       var m = (e.itens || []).length;
       no.style.gridTemplateColumns = "repeat(" + Math.min(m || 1, e.colunas || m) + ", 1fr)";
@@ -975,9 +1170,21 @@ function renderCena(cena, doc, op) {
   elementos.forEach(function (e) {
     if (e.tipo === "conector") return;
     if (e.x != null || e.y != null) { flutuantes.push(e); return; }
-    if ((layout === "imagem-direita" || layout === "imagem-esquerda") && e.tipo === "imagem" && !imagem) { imagem = e; return; }
-    if (e.papel === "chapeu" || e.papel === "titulo") cabecalho.push(e);
-    else corpo.push(e);
+    /* O aparelho também vai para o lado, não só a imagem. É o enquadramento
+       do vídeo de referência: texto de um lado, celular com a conversa do
+       outro. Sem isto o celular caía na coluna de texto e o outro lado ficava
+       vazio — metade do quadro em branco. */
+    if ((layout === "imagem-direita" || layout === "imagem-esquerda")
+        && (e.tipo === "imagem" || e.tipo === "dispositivo") && !imagem) { imagem = e; return; }
+    /* Selo, progresso e foto são material de CABEÇALHO: vêm antes do título,
+       como sobrancelha da cena. Caindo no corpo, apareciam DEPOIS do título —
+       a pílula "Módulo 2 de 5" embaixo do nome do módulo, e o rosto da pessoa
+       embaixo do nome dela. Dentro do grupo a ordem é a do documento, então
+       quem escreveu decide o resto. */
+    if (e.papel === "chapeu" || e.papel === "titulo"
+        || e.tipo === "selo" || e.tipo === "progresso" || e.tipo === "avatar") {
+      cabecalho.push(e);
+    } else corpo.push(e);
   });
 
   function solta(lista, alvo) {
@@ -992,7 +1199,14 @@ function renderCena(cena, doc, op) {
     solta(cabecalho, lado); solta(corpo, lado);
     var box = document.createElement("div");
     box.className = "lado-imagem";
-    if (imagem) {
+    if (imagem && imagem.tipo === "dispositivo") {
+      // O aparelho tem moldura e sombra próprias: encostar nas bordas do
+      // quadro comeria as duas. Ele entra com respiro.
+      box.classList.add("com-aparelho");
+      box.style.padding = margem + "px " + Math.round(W * 0.04) + "px";
+      ctx.i++;
+      box.appendChild(renderElemento(imagem, ctx));
+    } else if (imagem) {
       var im = renderElemento({ tipo: "imagem", src: imagem.src, ajuste: imagem.ajuste, raio: 0 }, ctx);
       im.style.position = "absolute";
       im.style.inset = "0";

package/studio/web/render.css

@@ -65,6 +65,23 @@
   --c-fundo: #ffffff; --c-fundo2: #eeeeee; --c-texto: #000000; --c-fraco: #666666;
   --c-tom: #000000; --c-tom2: #000000; --c-linha: #000000; --c-cartao: #f2f2f2;
 }
+/* "âmbar" — o marrom quente com dourado, que é a cara de curso e de aula.
+   Entrou porque faltava: os dez temas tinham roxo, ciano, laranja de fogo e
+   verde, e nenhum tom terroso onde o texto branco descansa. É o tema que
+   sustenta cena longa sem cansar a vista. */
+[data-tema="ambar"] {
+  --f-display: "Primo Geo", "Space Grotesk", system-ui, sans-serif;
+  --c-fundo: #1a100b; --c-fundo2: #2a1710; --c-texto: #f7efe8; --c-fraco: #b8a08f;
+  --c-tom: #e8a33d; --c-tom2: #d0703a; --c-linha: rgba(232, 163, 61, .22); --c-cartao: rgba(232, 163, 61, .07);
+}
+/* "grafite" — o cinza-azulado sóbrio, para conteúdo técnico e relatório.
+   Sem cor de festa: quando o assunto é número, a cor não pode competir. */
+[data-tema="grafite"] {
+  --f-display: "Primo Geo", "Space Grotesk", system-ui, sans-serif;
+  --c-fundo: #0d1117; --c-fundo2: #161d26; --c-texto: #e6edf3; --c-fraco: #8b97a6;
+  --c-tom: #4a9eff; --c-tom2: #7ee0c0; --c-linha: rgba(255, 255, 255, .1); --c-cartao: rgba(255, 255, 255, .04);
+}
+
 [data-tema="mono"] .el.no,
 [data-tema="mono"] .el.cartoes .cartao { border-width: 3px; border-radius: 0; }
 [data-tema="mono"] .el.txt { letter-spacing: -.04em; }
@@ -382,6 +399,259 @@
 .el.cartoes .cartao b { font-family: var(--f-display); font-size: 27px; font-weight: 620; letter-spacing: -.02em; }
 .el.cartoes .cartao span { font-size: 19px; line-height: 1.45; color: var(--c-fraco); }
 
+/* ═══════════════════════════════════════════════════════════════════════
+   O vocabulário do vídeo de referência.
+
+   Tudo aqui existe porque o dono mandou um vídeo e disse "pega tudo que tem
+   esse vídeo, e coloca pro Primo poder fazer também" — cartão com relevo,
+   vidro, foto, celular com conversa dentro.
+
+   O fio comum é o VIDRO: painel translúcido, borda clara em cima (onde a luz
+   bateria) e sombra embaixo. Não é enfeite — é o que dá profundidade sem
+   precisar de imagem, e o que separa "cartão" de "retângulo com borda".
+   ═══════════════════════════════════════════════════════════════════════ */
+
+.vidro, .el.cartoes[data-estilo="vidro"] .cartao, .el.passos .passo {
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .015)),
+    var(--c-cartao);
+  border: 1px solid var(--c-linha);
+  /* A luz de cima e a sombra de baixo, dentro da própria caixa. É o truque
+     inteiro do "liquid glass": a borda superior clara finge um bisel. */
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, .13),
+    0 18px 44px rgba(0, 0, 0, .34);
+}
+
+/* ── selo ──────────────────────────────────────────────────────────────── */
+.el.selo {
+  display: inline-flex; align-items: center; gap: .5em;
+  align-self: flex-start;
+  font-family: var(--f-corpo);
+  font-size: 21px; font-weight: 620;
+  letter-spacing: .13em; text-transform: uppercase;
+  color: var(--c-tom);
+  background: color-mix(in srgb, var(--c-tom) 13%, transparent);
+  border: 1px solid color-mix(in srgb, var(--c-tom) 42%, transparent);
+  border-radius: 999px;
+  padding: .42em 1.05em;
+}
+.el.selo[data-estilo="vivo"] {
+  color: var(--c-fundo);
+  background: var(--c-tom);
+  border-color: var(--c-tom);
+}
+.el.selo[data-estilo="solto"] {
+  background: none; border-color: transparent; padding-left: 0; padding-right: 0;
+}
+.el.selo .selo-icone { font-size: 1.15em; letter-spacing: 0; }
+.cena .fluxo[data-layout="capa"] > .el.selo,
+.cena .fluxo[data-layout="centro"] > .el.selo { align-self: center; }
+
+/* ── progresso ─────────────────────────────────────────────────────────── */
+.el.progresso {
+  display: flex; align-items: center; gap: 18px;
+  color: var(--c-tom); font-family: var(--f-corpo);
+}
+.el.progresso > b { font-size: 24px; font-weight: 620; letter-spacing: .04em; }
+.el.progresso .pontos { display: flex; align-items: center; gap: 9px; }
+.el.progresso .pontos i {
+  width: 9px; height: 9px; border-radius: 50%;
+  background: var(--c-linha);
+  transition: none;
+}
+.el.progresso .pontos i.feito { background: color-mix(in srgb, var(--c-tom) 45%, transparent); }
+.el.progresso .pontos i.aqui {
+  background: var(--c-tom); width: 12px; height: 12px;
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-tom) 18%, transparent);
+}
+
+/* ── avatar ────────────────────────────────────────────────────────────── */
+.el.avatar {
+  border-radius: 50%; overflow: hidden; position: relative;
+  display: grid; place-items: center; flex: 0 0 auto;
+  background: var(--c-cartao);
+  /* O anel aceso: dois anéis, um forte colado e um aberto e fraco. Um só
+     fica duro; dois viram luz. */
+  box-shadow:
+    0 0 0 3px var(--c-tom),
+    0 0 0 12px color-mix(in srgb, var(--c-tom) 16%, transparent),
+    0 22px 50px rgba(0, 0, 0, .42);
+}
+.el.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.el.avatar b {
+  font-family: var(--f-display); font-weight: 640;
+  color: var(--c-tom); letter-spacing: .02em;
+}
+.cena .fluxo[data-layout="capa"] > .el.avatar,
+.cena .fluxo[data-layout="centro"] > .el.avatar { align-self: center; }
+
+/* ── dispositivo ───────────────────────────────────────────────────────── */
+/* O aparelho ENCOLHE para caber na cena. Preso só pela largura, o celular de
+   380px virava 800px de altura e vazava pelo pé do quadro — metade da
+   conversa ficava fora do vídeo, e na tela do editor parecia certo porque ali
+   a página rola. A altura é que manda; a largura vem da proporção. */
+.el.dispositivo {
+  display: grid; align-content: center; justify-items: center;
+  flex: 0 1 auto; min-height: 0; max-height: 100%;
+}
+.el.dispositivo .moldura {
+  background: linear-gradient(180deg, #22262c, #14171b);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, .16),
+    0 30px 70px rgba(0, 0, 0, .5);
+  overflow: hidden;
+  display: flex; flex-direction: column;
+}
+.el.dispositivo .tela {
+  flex: 1; overflow: hidden;
+  background: var(--c-fundo2);
+  display: flex; flex-direction: column; justify-content: center;
+  gap: 16px;
+}
+
+.el.dispositivo[data-forma="celular"] { width: 100%; }
+.el.dispositivo[data-forma="celular"] .moldura {
+  height: min(100%, 780px); width: auto; max-width: 100%;
+  aspect-ratio: 9 / 19;
+  border-radius: 42px; padding: 12px;
+}
+.el.dispositivo[data-forma="celular"] .tela { border-radius: 31px; padding: 26px 20px; }
+/* A ilha da câmera. Sem ela um retângulo arredondado é só um retângulo
+   arredondado — é este detalhe que faz o olho ler "celular". */
+.el.dispositivo[data-forma="celular"] .moldura::before {
+  content: ""; position: absolute; left: 50%; top: 20px;
+  width: 88px; height: 9px; border-radius: 999px;
+  background: rgba(0, 0, 0, .55); transform: translateX(-50%); z-index: 2;
+}
+.el.dispositivo[data-forma="celular"] .moldura { position: relative; }
+
+.el.dispositivo[data-forma="tablet"] .moldura {
+  height: min(100%, 740px); width: auto; max-width: 100%;
+  aspect-ratio: 3 / 4;
+  border-radius: 26px; padding: 16px;
+}
+.el.dispositivo[data-forma="tablet"] .tela { border-radius: 12px; padding: 26px; }
+
+.el.dispositivo[data-forma="notebook"] { width: 100%; }
+.el.dispositivo[data-forma="notebook"] .moldura {
+  width: 100%; max-height: 100%; aspect-ratio: 16 / 10;
+  border-radius: 16px 16px 4px 4px; padding: 12px 12px 14px;
+}
+.el.dispositivo[data-forma="notebook"] .tela { border-radius: 7px; padding: 26px 28px; }
+.el.dispositivo[data-forma="notebook"] .base {
+  width: 116%; height: 13px; margin-top: -1px;
+  border-radius: 0 0 12px 12px;
+  background: linear-gradient(180deg, #2c3138, #171a1e);
+  box-shadow: 0 12px 26px rgba(0, 0, 0, .45);
+}
+
+.el.dispositivo[data-forma="navegador"] { width: 100%; }
+.el.dispositivo[data-forma="navegador"] .moldura {
+  width: 100%; max-height: 100%; aspect-ratio: 16 / 10; border-radius: 14px; padding: 0;
+}
+.el.dispositivo .barra-nav {
+  display: flex; align-items: center; gap: 8px;
+  padding: 13px 16px; flex: 0 0 auto;
+  border-bottom: 1px solid rgba(255, 255, 255, .07);
+}
+.el.dispositivo .barra-nav i {
+  width: 11px; height: 11px; border-radius: 50%; background: rgba(255, 255, 255, .17);
+}
+.el.dispositivo .barra-nav .url {
+  margin-left: 12px; flex: 1;
+  font-family: var(--f-mono); font-size: 15px; color: rgba(255, 255, 255, .45);
+  background: rgba(0, 0, 0, .3); border-radius: 999px; padding: 5px 14px;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.el.dispositivo[data-forma="navegador"] .tela { padding: 24px 26px; }
+
+/* ── conversa ──────────────────────────────────────────────────────────── */
+.el.conversa {
+  display: flex; flex-direction: column; gap: 14px; justify-content: flex-end;
+}
+.el.conversa .balao {
+  max-width: 88%; padding: 13px 17px; line-height: 1.42;
+  font-size: 20px; border-radius: 16px;
+}
+.el.conversa .balao.meu {
+  align-self: flex-start;
+  background: var(--c-cartao); border: 1px solid var(--c-linha);
+  color: var(--c-texto); border-bottom-left-radius: 5px;
+}
+/* A resposta é o que importa: ela leva a cor do tema. */
+.el.conversa .balao.dela {
+  align-self: flex-end;
+  background: color-mix(in srgb, var(--c-tom) 20%, transparent);
+  border: 1px solid color-mix(in srgb, var(--c-tom) 40%, transparent);
+  color: var(--c-texto); border-bottom-right-radius: 5px;
+}
+/* Os balões entram um de cada vez, como numa conversa de verdade. Todos ao
+   mesmo tempo lê como captura de tela, não como diálogo. */
+.cena.animar .el.conversa .balao {
+  animation: balaoEntra .46s cubic-bezier(.22, 1, .36, 1) both;
+  animation-delay: calc(var(--atraso, 0) * 1s);
+}
+@keyframes balaoEntra {
+  from { opacity: 0; transform: translateY(14px) scale(.96); }
+  to   { opacity: 1; transform: none; }
+}
+
+/* ── passos ────────────────────────────────────────────────────────────── */
+/* Sem largura declarada, o grid encolhe até o conteúdo e as três etapas
+   viram três selinhos no meio da tela — em `capa` e `centro`, onde o eixo
+   está centralizado, isso é o padrão. Etapa é estrutura: ocupa a linha. */
+.el.passos { display: grid; gap: 18px; align-items: stretch; width: 100%; }
+.el.passos .passo {
+  border-radius: 18px; padding: 22px 20px;
+  display: grid; gap: 6px; align-content: start;
+  color: var(--c-fraco);
+}
+.el.passos .passo b {
+  font-family: var(--f-display); font-size: 23px; font-weight: 620;
+  letter-spacing: -.015em; color: inherit;
+}
+.el.passos .passo span { font-size: 17px; line-height: 1.4; }
+.el.passos .passo.feito { color: var(--c-texto); }
+/* O de agora cresce e acende. Escala pequena de propósito: 1.06 lê como
+   "este", 1.2 lê como erro de layout. */
+.el.passos .passo.agora {
+  color: var(--c-texto);
+  transform: scale(1.06);
+  border-color: color-mix(in srgb, var(--c-tom) 55%, transparent);
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--c-tom) 17%, transparent),
+                            color-mix(in srgb, var(--c-tom) 6%, transparent));
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, .16),
+    0 20px 46px color-mix(in srgb, var(--c-tom) 16%, transparent);
+}
+.el.passos .passo.agora b { color: var(--c-tom); }
+
+/* ── opcoes ────────────────────────────────────────────────────────────── */
+.el.opcoes { display: grid; gap: 12px; align-content: center; }
+.el.opcoes .pergunta {
+  font-family: var(--f-display); font-size: 26px; font-weight: 640;
+  letter-spacing: -.018em; margin-bottom: 6px; color: var(--c-texto);
+}
+.el.opcoes .opcao {
+  border: 1px solid var(--c-linha); border-radius: 12px;
+  padding: 14px 18px; font-size: 19px; color: var(--c-fraco);
+  background: var(--c-cartao);
+}
+.el.opcoes .opcao.certa {
+  color: var(--c-tom);
+  border-color: color-mix(in srgb, var(--c-tom) 60%, transparent);
+  background: color-mix(in srgb, var(--c-tom) 12%, transparent);
+}
+/* O ✓ vem do CSS, não do texto: assim o autor escreve só a alternativa e a
+   marca nunca aparece por engano na errada. */
+.el.opcoes .opcao.certa::before { content: "✓ "; font-weight: 700; }
+.cena.animar .el.opcoes .opcao {
+  animation: balaoEntra .4s cubic-bezier(.22, 1, .36, 1) both;
+  animation-delay: calc(var(--atraso, 0) * 1s);
+}
+
 .el.numeros { display: grid; gap: calc(30px * var(--esc, 1)); align-content: center; }
 .el.numeros .num { display: grid; gap: 6px; }
 .el.numeros .num b {
@@ -656,3 +926,10 @@
 
 /* painel: sem moldura, é uma superfície flutuando em profundidade */
 .el.obj3d.f-painel .face3d { border: 0; box-shadow: 0 40px 90px -30px rgba(0,0,0,.7); }
+
+/* O lado do aparelho não é o lado da imagem: a imagem sangra até a borda, o
+   celular precisa de ar em volta para a moldura e a sombra aparecerem. */
+.cena .fluxo .lado-imagem.com-aparelho {
+  display: grid; place-items: center; min-height: 0; overflow: visible;
+}
+.cena .fluxo .lado-imagem.com-aparelho > .el { max-height: 100%; }