primocode 9.8.0-beta.8 → 9.8.0-beta.9

package/README.md

@@ -1,4 +1,4 @@
-# PrimoCode v9.8.0-beta.8
+# PrimoCode v9.8.0-beta.9
 
 Agente de engenharia brasileiro para o terminal, no estilo Claude Code.
 Cria arquivos de verdade, roda comandos, **controla o navegador e o desktop** —
@@ -9,7 +9,7 @@ OpenRouter, e cada apelido (`top`/`main`/`fast`) é uma **corrente**: se um mode
 está no limite de pedidos, o próximo atende. Você não vê o erro, e não paga nada.
 
 ```
- ▐▛███▜▌   Primo Code v9.8.0-beta.8
+ ▐▛███▜▌   Primo Code v9.8.0-beta.9
 ▝▜█████▛▘  Bem-vindo de volta, Joel
   ▘▘ ▝▝    ~/primocode  · /dir <pasta> muda
 ```
@@ -311,6 +311,7 @@ primocode -c                           # continua a última conversa salva (--co
 | `/copiar` | Copia a última resposta para a área de transferência (pbcopy, clip, wl-copy/xclip/xsel) |
 | `/historico [termo]` | Procura nos seus pedidos guardados nesta máquina (`~/.primocode/history.jsonl`), do mais recente. As conversas inteiras da conta ficam no `/chats` |
 | `/status` | Health check do servidor |
+| `/offline` | Temporário: sobe o `primocode-server` no seu computador (a pasta ao lado do CLI, ou `/offline <caminho>`) com as chaves de `~/.primocode/servidor.env` e aponta a sessão pra ele. `/offline off` volta ao servidor de antes |
 | `/doctor` | Confere tudo com ✓/✗: Node, servidor, `/api`, Chrome, Python+PyObjC (cursor, macOS), disco e config. Cada ✗ diz como consertar |
 | `/custo` | Tokens enviados e recebidos e pedidos feitos nesta sessão, por provedor (estimado em caracteres ÷ 4 quando o provedor não manda o número) |
 | `/atalhos` | As teclas: Esc Esc para o agente, `!` roda no shell, Alt+Enter quebra linha… |

package/bin/primocode.js

@@ -21,7 +21,6 @@ const api = require('../lib/api');
 const tools = require('../lib/tools');
 const cfg = require('../lib/config');
 const nomeProjeto = require('../lib/nome-projeto');
-const kits = require('../lib/kits');
 const provedorLocal = require('../lib/local/provedor');
 const { runAct, interromper, ehTetoDeToken, ehTransitorio, esperaDoErro } = require('../lib/act');
 const fala = require('../lib/fala');
@@ -44,6 +43,7 @@ const nuvem = require('../lib/nuvem');
 const compat = require('../lib/compatibilidade');
 const mencoesLib = require('../lib/mencoes');
 const extra = require('../lib/comandos-extra');
+const offline = require('../lib/offline');
 
 /* O /custo: toda conversa com o modelo passa pelo lib/api.js, e o contador
    embrulha as funções dele uma vez, aqui. Quem atende é o provedor do /api
@@ -186,6 +186,7 @@ ${c.bold('Comandos')}
   ${c.brand('/logout')}             desconecta este computador da conta
   ${c.brand('/comandos')}           seus comandos (/revisar, /explicar…) · /comandos novo <nome>
   ${c.brand('/status')}             checa o servidor
+  ${c.brand('/offline')}            roda o servidor no seu computador (temporário) · /offline off volta
   ${c.brand('/doctor')}             confere tudo (servidor, /api, Chrome, disco…) e diz como consertar
   ${c.brand('/custo')}              tokens e pedidos desta sessão, por provedor
   ${c.brand('/atalhos')}            as teclas que ajudam
@@ -251,6 +252,7 @@ const SLASH_COMANDOS = [
     ['/comandos', 'seus comandos: um .md vira /nome · /comandos novo <nome>'],
     ['/api', 'usa a SUA chave (Gemini, ChatGPT, Claude…) direto daqui, sem o limite do servidor'],
     ['/status', 'checa o servidor'],
+    ['/offline', 'roda o servidor aqui no seu computador, com as chaves do Render'],
     ['/doctor', 'confere se está tudo certo e diz como consertar'],
     ['/custo', 'tokens e pedidos desta sessão, por provedor'],
     ['/atalhos', 'as teclas que ajudam'],
@@ -769,16 +771,6 @@ function batizarDepois(plan, userText) {
         .then((nome) => { if (nome) plan.nomeEscolhido = nome; });
 }
 
-/* A inspiração visual (lib/kits.js): pedido de landing leva a ficha da
-   direção que combina com o negócio. Nada é copiado para a pasta — o agente
-   escreve a página dele, inspirado, e não troca texto num molde. */
-async function prepararKit(plan, userText) {
-    const kit = kits.escolher(userText, { provedor: provedorLocal.atual() });
-    if (!kit) return '';
-    console.log(c.dim(`  ⎿ inspiração visual: ${kit.titulo}`));
-    return kit.instrucao;
-}
-
 function createPendingProject(plan) {
     const dir = cfg.createProjectDir(plan.nomeEscolhido || plan.name);
     entrarNoProjeto(dir, 'projeto');
@@ -1145,7 +1137,6 @@ async function enviarPedido(userText) {
             tempos.medir('espera do resumo', () => esperarResumo()),
             tempos.medir('plano', () => dividirTarefa(prompt)),
         ]);
-        const instrucaoKit = await prepararKit(plan, userText);
 
         let r = null;
         let jaFeito = '';
@@ -1194,8 +1185,7 @@ async function enviarPedido(userText) {
                 permissoes: state.config.permissoes,
                 // Pedido de mexer no computador leva a dica que libera as
                 // ferramentas desktop_* no servidor (ver DICA_COMPUTADOR).
-                instrucao: [instrucaoKit, i === 0 && querComputador(userText) ? vozModo.DICA_COMPUTADOR : '']
-                    .filter(Boolean).join('\n\n'),
+                instrucao: i === 0 && querComputador(userText) ? vozModo.DICA_COMPUTADOR : '',
             });
 
             r = await rodarPasso();
@@ -2666,6 +2656,45 @@ async function handleSlash(text) {
             break;
         }
 
+        /* O servidor aqui, no computador da pessoa, até a sessão acabar
+           (lib/offline.js). "Enquanto não tenho acesso ao Railway, eu testo
+           com o projeto rodando localmente." (24/09/2026) */
+        case 'offline': case 'local': {
+            if (/^(off|sair|desligar|parar)$/i.test(rest)) {
+                if (!state.servidorAntes) { console.log(c.muted('  O /offline não está ligado.')); break; }
+                offline.desligar();
+                state.config.server = state.servidorAntes;
+                state.servidorAntes = null;
+                console.log(c.ok('  Voltei ao servidor de antes: ') + c.dim(state.config.server));
+                break;
+            }
+            if (state.servidorAntes) { console.log(c.muted('  Já está no servidor local: ') + c.dim(state.config.server) + c.muted(' · /offline off volta')); break; }
+            const chaves = offline.prepararEnv();
+            if (chaves.criado || !chaves.temChave) {
+                console.log(c.warn(`  ${chaves.criado ? 'Criei' : 'Falta chave em'} ${chaves.arquivo}`));
+                console.log(c.muted('  Cole nele as chaves do Render (primocode-server → Environment), uma por linha:'));
+                console.log(c.dim('  GROQ_API_KEY=…  OPENROUTER_API_KEY=…  GEMINI_API_KEY=…'));
+                console.log(c.muted('  Depois rode ') + c.brand('/offline') + c.muted(' de novo.'));
+                break;
+            }
+            const dir = offline.acharServidor({ pedido: rest });
+            const sp = new Spinner('subindo o servidor aqui').start();
+            const r = await offline.ligar({ dir, env: chaves.env });
+            sp.stop();
+            if (!r.ok) {
+                console.log(c.err('  ' + r.error));
+                if (r.comoResolver) console.log(c.dim('  → ' + r.comoResolver));
+                break;
+            }
+            state.servidorAntes = state.config.server;
+            state.config.server = r.url;
+            console.log(c.ok(`  Servidor ${r.versao || ''} ${r.reaproveitado ? 'que já estava de pé' : 'rodando aqui'}: `) + c.dim(r.url));
+            console.log(c.dim(`  ${dir || ''}${dir ? ' · ' : ''}chaves: ${chaves.nomes.join(', ')}${r.reaproveitado ? '' : ' · log em ' + offline.ARQUIVO_LOG}`));
+            if (provedorLocal.atual()) console.log(c.warn('  Atenção: o /api está ligado e fala direto com a IA. Para usar o servidor local, /api off.'));
+            console.log(c.muted('  Vale até fechar o PrimoCode. ') + c.brand('/offline off') + c.muted(' volta antes.'));
+            break;
+        }
+
         /* Os comandos da pessoa: lista, e explica como fazer o dela. */
         case 'comandos': {
             const novo = rest.match(/^(novo|new|criar)\s+(\S+)$/i);
@@ -2867,10 +2896,8 @@ async function main() {
         // Com -c, o pedido continua a última conversa em vez de chegar sozinho.
         if (continuar) await continuarUltima();
         /* O MESMO caminho do pedido digitado (sendPrompt). Este modo tinha um
-           runAct próprio, e por isso ficava sem tudo o que vive lá: o kit de
-           partida, o plano em passos, a retomada automática, o @arquivo, o
-           checkpoint do /desfazer. Medido em 24/09: `primo "crie uma landing…"`
-           não pegou o kit. */
+           runAct próprio, e por isso ficava sem tudo o que vive lá: o plano em
+           passos, a retomada automática, o @arquivo, o checkpoint do /desfazer. */
         state.semTerminal = true;
         await sendPrompt(promptText);
         process.exit(0);

package/lib/offline.js

@@ -0,0 +1,168 @@
+/**
+ * offline.js — o primocode-server rodando AQUI, no computador da pessoa.
+ *
+ *   "Como eu não tenho acesso ao Railway, enquanto isso eu posso testar com o
+ *    projeto rodando localmente, chamando as APIs pelo meu computador."
+ *   (24/09/2026)
+ *
+ * O /offline sobe o servidor da pasta primocode-server com as MESMAS chaves
+ * que o Render usa (coladas em ~/.primocode/servidor.env) e aponta o CLI para
+ * ele até a sessão acabar. É temporário: serve para testar o servidor novo
+ * antes de ele ir para produção.
+ *
+ * "Offline" é o nome que o pedido deu, e ele mente um pouco: as IAs continuam
+ * na internet. O que sai do caminho é o servidor de produção.
+ *
+ * ── O QUE NUNCA APARECE ──────────────────────────────────────────────────
+ * O valor de uma chave. Mostram-se só os NOMES das variáveis que o arquivo
+ * tem, o bastante para ver o que falta.
+ */
+
+'use strict';
+
+const fs = require('fs');
+const os = require('os');
+const path = require('path');
+const http = require('http');
+const { spawn } = require('child_process');
+
+const PORTA = Number(process.env.PRIMOCODE_OFFLINE_PORTA || 3190);
+const CASA = path.join(os.homedir(), '.primocode');
+const ARQUIVO_ENV = path.join(CASA, 'servidor.env');
+const ARQUIVO_LOG = path.join(CASA, 'servidor-local.log');
+
+// As variáveis que o primocode-server lê. As de chave vêm primeiro: sem pelo
+// menos uma delas, o servidor sobe mas não tem com quem falar.
+const CHAVES = ['GROQ_API_KEY', 'OPENROUTER_API_KEY', 'GEMINI_API_KEY', 'GOOGLE_API_KEY', 'COHERE_API_KEY', 'HF_TOKEN', 'HUGGINGFACE_API_KEY', 'PG_GATEWAY_API_KEY'];
+const OUTRAS = ['PG_GATEWAY_BASE_URL', 'CONECTA_API', 'PRIMOCODE_TOKEN', 'REQUIRE_TOKEN', 'RATE_LIMIT_PER_HOUR'];
+
+const MODELO_ENV = `# As chaves do primocode-server rodando no seu computador (/offline).
+# Copie do Render: o serviço primocode-server → Environment. Uma por linha,
+# NOME=valor, sem aspas. Este arquivo é só seu: não mande para ninguém.
+#
+${CHAVES.map((k) => `# ${k}=`).join('\n')}
+#
+${OUTRAS.map((k) => `# ${k}=`).join('\n')}
+`;
+
+/** Lê um .env simples: NOME=valor, # comenta, aspas em volta saem. */
+function lerEnv(texto) {
+    const env = {};
+    for (const linha of String(texto || '').split(/\r?\n/)) {
+        const m = linha.match(/^\s*(?:export\s+)?([A-Za-z_][A-Za-z0-9_]*)\s*=\s*(.*?)\s*$/);
+        if (!m) continue;
+        let valor = m[2];
+        if (/^(['"]).*\1$/.test(valor)) valor = valor.slice(1, -1);
+        if (valor) env[m[1]] = valor;
+    }
+    return env;
+}
+
+/** O arquivo de chaves: cria o modelo (vazio, 600) na primeira vez. */
+function prepararEnv(arquivo = ARQUIVO_ENV) {
+    let criado = false;
+    if (!fs.existsSync(arquivo)) {
+        fs.mkdirSync(path.dirname(arquivo), { recursive: true });
+        fs.writeFileSync(arquivo, MODELO_ENV, { mode: 0o600 });
+        criado = true;
+    }
+    const env = lerEnv(fs.readFileSync(arquivo, 'utf8'));
+    return { arquivo, criado, env, nomes: Object.keys(env), temChave: CHAVES.some((k) => env[k]) };
+}
+
+function ehServidor(dir) {
+    try {
+        const pkg = JSON.parse(fs.readFileSync(path.join(dir, 'package.json'), 'utf8'));
+        return pkg.name === 'primocode-server' && fs.existsSync(path.join(dir, 'server.js'));
+    } catch { return false; }
+}
+
+/** Onde está a pasta do primocode-server. A primeira que existir ganha. */
+function acharServidor({ pedido = '', raizCli = path.join(__dirname, '..') } = {}) {
+    const candidatos = [
+        pedido,
+        process.env.PRIMOCODE_SERVER_DIR,
+        path.join(raizCli, '..', 'primocode-server'),
+        path.join(os.homedir(), 'Primocode CLI', 'primocode-server'),
+        path.join(os.homedir(), 'primocode-server'),
+    ].filter(Boolean).map((p) => path.resolve(p.replace(/^~(?=$|\/)/, os.homedir())));
+    return candidatos.find(ehServidor) || null;
+}
+
+/** GET /health; devolve o JSON ou null. */
+function saude(url, espera = 1500) {
+    return new Promise((resolve) => {
+        const req = http.get(url + '/health', { timeout: espera }, (res) => {
+            let corpo = '';
+            res.on('data', (d) => { corpo += d; });
+            res.on('end', () => { try { resolve(JSON.parse(corpo)); } catch { resolve(null); } });
+        });
+        req.on('timeout', () => req.destroy());
+        req.on('error', () => resolve(null));
+    });
+}
+
+let filho = null;
+
+/**
+ * Sobe o servidor (ou reaproveita um que já responde na porta).
+ * Devolve { ok, url, versao, reaproveitado } ou { ok: false, error, comoResolver }.
+ */
+async function ligar({ dir, env = {}, porta = PORTA, log = ARQUIVO_LOG, prazo = 20000 } = {}) {
+    const url = `http://localhost:${porta}`;
+    const ja = await saude(url);
+    if (ja && ja.status === 'ok') return { ok: true, url, versao: ja.version, reaproveitado: true };
+    if (!dir) {
+        return {
+            ok: false,
+            error: 'Não achei a pasta do primocode-server.',
+            comoResolver: 'clone o repo ao lado do primocode, ou diga onde ele está: /offline ~/caminho/primocode-server',
+        };
+    }
+    if (!fs.existsSync(path.join(dir, 'node_modules'))) {
+        return {
+            ok: false,
+            error: `O servidor em ${dir} ainda não tem as dependências.`,
+            comoResolver: `rode uma vez: cd "${dir}" && npm install`,
+        };
+    }
+    fs.mkdirSync(path.dirname(log), { recursive: true });
+    const saida = fs.openSync(log, 'a');
+    filho = spawn(process.execPath, ['server.js'], {
+        cwd: dir,
+        env: { ...process.env, ...env, PORT: String(porta) },
+        stdio: ['ignore', saida, saida],
+    });
+    let morreu = null;
+    filho.on('exit', (codigo) => { morreu = codigo; filho = null; });
+
+    const fim = Date.now() + prazo;
+    while (Date.now() < fim) {
+        if (morreu !== null) {
+            return { ok: false, error: `O servidor fechou sozinho (código ${morreu}).`, comoResolver: `veja o fim de ${log}` };
+        }
+        const h = await saude(url);
+        if (h && h.status === 'ok') return { ok: true, url, versao: h.version, reaproveitado: false };
+        await new Promise((r) => setTimeout(r, 300));
+    }
+    desligar();
+    return { ok: false, error: `O servidor não respondeu em ${Math.round(prazo / 1000)}s.`, comoResolver: `veja o fim de ${log}` };
+}
+
+/** Desliga o servidor que ESTE processo subiu. Um reaproveitado fica de pé. */
+function desligar() {
+    if (!filho) return false;
+    try { filho.kill(); } catch {}
+    filho = null;
+    return true;
+}
+
+function ligado() { return Boolean(filho); }
+
+// O servidor não pode sobrar rodando quando o CLI fecha.
+process.on('exit', desligar);
+
+module.exports = {
+    PORTA, ARQUIVO_ENV, ARQUIVO_LOG, CHAVES,
+    lerEnv, prepararEnv, acharServidor, ehServidor, saude, ligar, desligar, ligado,
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "primocode",
-  "version": "9.8.0-beta.8",
+  "version": "9.8.0-beta.9",
   "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/entrada.test.js && node test/transparencia.test.js && node test/permissao.test.js && node test/compatibilidade.test.js && node test/skills.test.js && node test/skills-de-fora.test.js && node test/skills-novas.test.js && node test/comandos.test.js && node test/estudio.test.js && node test/voz.test.js && node test/voz-conversa.test.js && node test/modo.test.js && node test/pasta.test.js && node test/projeto.test.js && node test/nome-projeto.test.js && node test/kits.test.js && node test/api-propria.test.js && node test/claude-engine.test.js && node test/codex.test.js && node test/conferir.test.js && node test/catalogo.test.js && node test/desktop.test.js && node test/seta.test.js && node test/effort.test.js && node test/regressao.test.js && node test/memoria-conversa.test.js && node test/repeticao.test.js && node test/autonomia.test.js && node test/desfazer.test.js && node test/desfazer-git.test.js && node test/referencia.test.js && node test/parar.test.js && node test/continuar.test.js && node test/pipeline.test.js && node test/app.test.js && node test/app-janela.test.js && node test/aplicativo.test.js && node test/conta.test.mjs && node test/nuvem.test.js && node test/prazo.test.js && node test/primeira-vez.test.js && node test/janela.test.js && node test/fala.test.js && node test/especialistas.test.js && node test/empurrao.test.js && node test/terminal-novo.test.js && node test/markdown.test.js && node test/coerencia.test.js && node test/contexto.test.js && node test/perigo.test.js && node test/rapidez.test.js && node test/mascotes.test.js && node test/comandos-extra.test.js"
+    "test": "node test/tools.test.js && node test/ui.test.js && node test/entrada.test.js && node test/transparencia.test.js && node test/permissao.test.js && node test/compatibilidade.test.js && node test/skills.test.js && node test/skills-de-fora.test.js && node test/skills-novas.test.js && node test/comandos.test.js && node test/estudio.test.js && node test/voz.test.js && node test/voz-conversa.test.js && node test/modo.test.js && node test/pasta.test.js && node test/projeto.test.js && node test/nome-projeto.test.js && node test/api-propria.test.js && node test/claude-engine.test.js && node test/codex.test.js && node test/conferir.test.js && node test/catalogo.test.js && node test/desktop.test.js && node test/seta.test.js && node test/effort.test.js && node test/regressao.test.js && node test/memoria-conversa.test.js && node test/repeticao.test.js && node test/autonomia.test.js && node test/desfazer.test.js && node test/desfazer-git.test.js && node test/referencia.test.js && node test/parar.test.js && node test/continuar.test.js && node test/pipeline.test.js && node test/app.test.js && node test/app-janela.test.js && node test/aplicativo.test.js && node test/conta.test.mjs && node test/nuvem.test.js && node test/prazo.test.js && node test/primeira-vez.test.js && node test/janela.test.js && node test/fala.test.js && node test/especialistas.test.js && node test/empurrao.test.js && node test/terminal-novo.test.js && node test/markdown.test.js && node test/coerencia.test.js && node test/contexto.test.js && node test/perigo.test.js && node test/rapidez.test.js && node test/mascotes.test.js && node test/comandos-extra.test.js && node test/offline.test.js"
   },
   "engines": {
     "node": ">=18.17.0"
@@ -30,7 +30,6 @@
     "app/",
     "studio/",
     "skills/",
-    "kits/",
     "voz/",
     "README.md",
     "comandos/",

package/skills/design-de-verdade/SKILL.md

@@ -7,6 +7,8 @@ autor: adaptado de "frontend-design" (Anthropic, anthropics/skills, Apache-2.0
 Trabalhe como o diretor de arte de um estúdio conhecido por dar a cada cliente uma identidade que
 ninguém confunde. O cliente já recusou propostas com cara de modelo pronto.
 
+**Não existe modelo.** Toda página começa do zero, e nenhuma sai com a estrutura da anterior.
+
 **Comece pelo assunto.** O ramo, os materiais e o vocabulário do negócio são de onde vem a escolha
 visual. Um brinquedo para meninas de 8 anos e um painel de analista financeiro não se parecem em nada.
 Use o conteúdo real do pedido em tudo, e não texto genérico.

package/skills/motion-de-primeira/SKILL.md

@@ -1,7 +1,7 @@
 ---
 nome: Motion de primeira
 descricao: como um vídeo criado do zero deixa de parecer feito por máquina
-quando: vídeo, video, motion, animação, animacao, anúncio, anuncio, reels, teaser, abertura, comercial, propaganda, estúdio, estudio
+quando: vídeo, video, motion graphics, vídeo animado, video animado, anúncio, anuncio, reels, teaser, vinheta, comercial, propaganda, estúdio, estudio
 autor: PrimoCode
 ---
 Não existe template. Cada propriedade deste vídeo é uma decisão sua, e a

package/skills/site-com-motion/SKILL.md

@@ -0,0 +1,39 @@
+---
+nome: Site com motion
+descricao: movimento em site e landing que parece de estúdio, e não efeito jogado em tudo
+quando: motion, site animado, landing animada, página animada, pagina animada, animação no site, animações no site, animacao no site, com animação, com animacao, com animações, scroll, parallax, transição, transicao, microinteração, microinteracao, efeito, efeitos, gsap, hover, landing, landing page, página, pagina, site, one page
+autor: PrimoCode
+---
+Movimento em site serve para três coisas: **mostrar a ordem** (o que ler primeiro), **responder à
+pessoa** (clicou, passou o mouse, rolou) e **dar um momento memorável**. Fora disso, é ruído.
+
+**Planeje o movimento antes do código**, em três linhas:
+- o momento marcante: UMA coisa (a abertura se montando, o título que se desenha, o produto que gira
+  com o scroll);
+- como as seções entram: cada uma do jeito que o conteúdo pede, e não o mesmo fade em todas;
+- a resposta ao toque: botão, card, link, campo.
+
+**O que denuncia animação feita por IA:** fade subindo em toda seção; hover que aumenta todo card;
+tudo com a mesma duração; `transition: all`; texto piscando; nada que responda ao scroll.
+
+**Como se faz bem:**
+- **Tempo:** resposta ao toque em 120 a 200 ms. Entrada de elemento em 400 a 700 ms. O momento
+  marcante pode levar 1 a 1,5 s, uma vez só.
+- **Curva:** nada linear. Para entrar, `cubic-bezier(.2,.8,.2,1)`. Para sair, a curva ao contrário
+  e mais curta que a entrada.
+- **Cascata:** itens de uma lista entram com 40 a 80 ms de diferença, e não todos juntos.
+- **Scroll:** `IntersectionObserver` põe uma classe quando a seção aparece, e o CSS anima. Pra algo
+  que acompanha o scroll (parallax, barra de progresso, imagem que cresce), use
+  `animation-timeline: view()` e deixe a página parada onde isso não existe (`@supports`).
+- **Só `transform` e `opacity`.** Animar `top`, `width`, `height` ou `box-shadow` trava no celular.
+- **Troca de página ou de estado:** a View Transitions API (`document.startViewTransition`), com o
+  caminho sem animação quando o navegador não tiver.
+- **Biblioteca só se precisar.** CSS e um pouco de JS resolvem quase tudo. Timeline longa ou texto
+  que se quebra letra a letra: GSAP pelo CDN.
+
+**Obrigatório:** `@media (prefers-reduced-motion: reduce)` desliga o movimento grande e deixa só
+troca de cor e opacidade. O conteúdo aparece mesmo sem JS: esconda o elemento só depois que o script
+carregou (uma classe `js` no `<html>`).
+
+**Confira:** abra a página, role do topo ao fim, e pergunte se cada movimento tem um dos três
+motivos. O que não tiver, tire.

package/kits/acolhedor/index.html

@@ -1,130 +0,0 @@
-<!DOCTYPE html>
-<html lang='pt-BR'>
-<head>
-  <meta charset='UTF-8'>
-  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
-  <!-- TROQUE: título e descrição com o nome do negócio e o bairro -->
-  <title>Sua Marca, o que você faz no seu bairro</title>
-  <meta name='description' content='Uma frase que diz o que o negócio faz, onde fica e para quem.'>
-  <link rel='preconnect' href='https://fonts.googleapis.com'>
-  <link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
-  <!-- TROQUE (se quiser): as fontes. Se trocar aqui, troque --fonte-titulo e --fonte-texto no topo do style.css -->
-  <link href='https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600&family=Nunito:wght@400;600;700&display=swap' rel='stylesheet'>
-  <link rel='stylesheet' href='style.css'>
-  <script src='script.js' defer></script>
-</head>
-<body>
-  <a class='pular' href='#conteudo'>Pular para o conteúdo</a>
-
-  <!-- TROQUE: a inicial, o nome, os links e o número do WhatsApp (só dígitos, com 55 e DDD) -->
-  <header class='topo'>
-    <a href='#' class='marca'><span class='marca-selo' aria-hidden='true'>S</span>Sua Marca</a>
-    <nav class='menu' aria-label='Principal'>
-      <a href='#servicos'>Serviços</a>
-      <a href='#horarios'>Horários</a>
-      <a href='https://wa.me/5500000000000' class='botao botao-pequeno'>Chamar no WhatsApp</a>
-    </nav>
-  </header>
-
-  <main id='conteudo'>
-    <!-- TROQUE: o convite (fale como quem atende no balcão), o texto e o bairro. A ilustração é CSS: pode mudar a letra da placa. -->
-    <section class='abertura'>
-      <div class='abertura-texto'>
-        <p class='aviso'><span class='bolinha' aria-hidden='true'></span><span id='statusHoje'>Veja o horário de hoje</span></p>
-        <h1>Um convite simples, do jeito que você falaria no balcão.</h1>
-        <p class='abertura-lead'>Uma ou duas frases sobre o que vocês fazem, para quem e o cuidado que faz a pessoa voltar. No Seu Bairro, em Sua Cidade.</p>
-        <div class='acoes'>
-          <a href='https://wa.me/5500000000000' class='botao'>Chamar no WhatsApp</a>
-          <a href='#servicos' class='botao botao-claro'>Ver os serviços</a>
-        </div>
-      </div>
-      <div class='vitrine' aria-hidden='true'>
-        <div class='sol'></div>
-        <div class='loja'>
-          <div class='toldo'></div>
-          <div class='porta'><span class='placa'>S</span></div>
-        </div>
-        <div class='planta'></div>
-        <div class='nuvem'></div>
-      </div>
-    </section>
-
-    <!-- TROQUE: os serviços e os preços (se não souber o preço, apague o <span class='preco'> daquela linha) -->
-    <section id='servicos' class='secao'>
-      <div class='quadro'>
-        <h2>O que a gente faz</h2>
-        <p class='quadro-lead'>Uma frase curta sobre os serviços, e que dá para combinar pelo WhatsApp.</p>
-        <ul class='precos'>
-          <li><span class='item'>Primeiro serviço</span><span class='pontos' aria-hidden='true'></span><span class='preco'>R$ 00</span></li>
-          <li><span class='item'>Segundo serviço</span><span class='pontos' aria-hidden='true'></span><span class='preco'>R$ 00</span></li>
-          <li><span class='item'>Terceiro serviço</span><span class='pontos' aria-hidden='true'></span><span class='preco'>R$ 00</span></li>
-          <li><span class='item'>Quarto serviço</span><span class='pontos' aria-hidden='true'></span><span class='preco'>R$ 00</span></li>
-          <li><span class='item'>Quinto serviço</span><span class='pontos' aria-hidden='true'></span><span class='preco'>R$ 00</span></li>
-          <li><span class='item'>Sexto serviço</span><span class='pontos' aria-hidden='true'></span><span class='preco'>R$ 00</span></li>
-        </ul>
-      </div>
-    </section>
-
-    <!-- TROQUE: três motivos para escolher vocês, com palavras do dia a dia -->
-    <section class='secao motivos'>
-      <h2>Por que o bairro volta</h2>
-      <ul class='motivos-lista'>
-        <li><span class='forma forma-a' aria-hidden='true'></span><h3>O primeiro motivo</h3><p>Uma frase concreta sobre o cuidado, o produto ou o atendimento.</p></li>
-        <li><span class='forma forma-b' aria-hidden='true'></span><h3>O segundo motivo</h3><p>Uma frase concreta sobre o cuidado, o produto ou o atendimento.</p></li>
-        <li><span class='forma forma-c' aria-hidden='true'></span><h3>O terceiro motivo</h3><p>Uma frase concreta sobre o cuidado, o produto ou o atendimento.</p></li>
-      </ul>
-    </section>
-
-    <!-- TROQUE: duas falas de clientes (reais; se não tiver, apague a seção inteira) -->
-    <section class='secao falas' aria-label='O que os clientes dizem'>
-      <figure class='fala fala-1'>
-        <blockquote>“O que um cliente contou sobre vocês, com as palavras dele.”</blockquote>
-        <figcaption>Nome, do bairro</figcaption>
-      </figure>
-      <figure class='fala fala-2'>
-        <blockquote>“Outra fala curta, de outra pessoa, sobre outro motivo.”</blockquote>
-        <figcaption>Nome, cliente desde 2020</figcaption>
-      </figure>
-    </section>
-
-    <!-- TROQUE: os horários (o texto E os data-abre/data-fecha, no formato 08:00; dia fechado fica sem data-abre) e o endereço -->
-    <section id='horarios' class='secao onde'>
-      <div class='onde-horas'>
-        <h2>Quando estamos abertos</h2>
-        <table id='tabelaHorarios' class='horas'>
-          <tbody>
-            <tr data-dia='1' data-abre='08:00' data-fecha='18:00'><th scope='row'>Segunda</th><td>8h às 18h</td></tr>
-            <tr data-dia='2' data-abre='08:00' data-fecha='18:00'><th scope='row'>Terça</th><td>8h às 18h</td></tr>
-            <tr data-dia='3' data-abre='08:00' data-fecha='18:00'><th scope='row'>Quarta</th><td>8h às 18h</td></tr>
-            <tr data-dia='4' data-abre='08:00' data-fecha='18:00'><th scope='row'>Quinta</th><td>8h às 18h</td></tr>
-            <tr data-dia='5' data-abre='08:00' data-fecha='18:00'><th scope='row'>Sexta</th><td>8h às 18h</td></tr>
-            <tr data-dia='6' data-abre='08:00' data-fecha='13:00'><th scope='row'>Sábado</th><td>8h às 13h</td></tr>
-            <tr data-dia='0'><th scope='row'>Domingo</th><td>Fechado</td></tr>
-          </tbody>
-        </table>
-      </div>
-      <div class='onde-endereco'>
-        <h2>Como chegar</h2>
-        <p class='endereco'>Rua Exemplo, 100<br>Seu Bairro, Sua Cidade</p>
-        <p>Um ponto de referência que ajuda a achar: ao lado de algo que todo mundo conhece.</p>
-        <a class='botao botao-claro' href='https://www.google.com/maps/search/?api=1&amp;query=Rua+Exemplo+100+Sua+Cidade'>Abrir no mapa</a>
-      </div>
-    </section>
-
-    <!-- TROQUE: as dúvidas que o balcão mais ouve (3 a 5) -->
-    <section class='secao duvidas'>
-      <h2>Perguntas de sempre</h2>
-      <details><summary>Uma pergunta que todo cliente faz?</summary><p>A resposta curta e direta.</p></details>
-      <details><summary>Outra pergunta comum?</summary><p>A resposta curta e direta.</p></details>
-      <details><summary>Mais uma pergunta?</summary><p>A resposta curta e direta.</p></details>
-    </section>
-  </main>
-
-  <!-- TROQUE: o convite final, o nome, o ano e o Instagram -->
-  <footer class='rodape'>
-    <p class='rodape-convite'>Passa aqui, ou manda uma mensagem.</p>
-    <a href='https://wa.me/5500000000000' class='botao'>Chamar no WhatsApp</a>
-    <p class='rodape-fim'>© 2026 Sua Marca, Seu Bairro. <a href='https://instagram.com/'>@suamarca</a></p>
-  </footer>
-</body>
-</html>

package/kits/acolhedor/script.js

@@ -1,25 +0,0 @@
-// Acolhedor: o que o cliente de bairro mais pergunta é "está aberto agora?".
-// O script lê a tabela de horários (data-abre / data-fecha) e responde
-// no topo da página, e pinta a linha de hoje. Sem animação decorativa.
-(function(){
-  var tabela=document.getElementById('tabelaHorarios');
-  var status=document.getElementById('statusHoje');
-  if(!tabela||!status) return;
-  var agora=new Date(), dia=agora.getDay();
-  var minutos=agora.getHours()*60+agora.getMinutes();
-  function emMinutos(hhmm){ var p=String(hhmm||'').split(':'); return (+p[0])*60+(+p[1]||0); }
-  function falar(hhmm){ var p=String(hhmm).split(':'); return (+p[0])+'h'+(p[1]&&p[1]!=='00'?p[1]:''); }
-  var linha=tabela.querySelector('tr[data-dia="'+dia+'"]');
-  if(!linha) return;
-  linha.classList.add('hoje');
-  var abre=linha.getAttribute('data-abre'), fecha=linha.getAttribute('data-fecha');
-  if(!abre||!fecha){ status.textContent='Hoje estamos fechados'; return; }
-  if(minutos>=emMinutos(abre)&&minutos<emMinutos(fecha)){
-    status.textContent='Aberto agora, até as '+falar(fecha);
-    status.parentNode.classList.add('aberto');
-  } else if(minutos<emMinutos(abre)){
-    status.textContent='Hoje abrimos às '+falar(abre);
-  } else {
-    status.textContent='Já fechamos por hoje';
-  }
-})();