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

package/kits/acolhedor/style.css

@@ -1,146 +0,0 @@
-:root{
-  /* ── A MARCA ───────────────────────────────────────────────────────
-     Para mudar a cara da página inteira, troque SÓ estas linhas:
-       --primaria   a cor da marca (loja da ilustração, botões, títulos)
-       --destaque   o sol, o sublinhado e o dia de hoje nos horários
-       --apoio      o toldo, as falas e os detalhes
-       --fundo      o fundo da página (sempre bem claro)
-       --fonte-titulo / --fonte-texto   as duas fontes (e o link do
-                    Google Fonts no index.html)
-     O resto do arquivo usa estas variáveis: não precisa mexer nele. */
-  --primaria:#2f7a5f;
-  --destaque:#ffc247;
-  --apoio:#f28b74;
-  --fundo:#fff9f2;
-  --fonte-titulo:'Fredoka',system-ui,sans-serif;
-  --fonte-texto:'Nunito',system-ui,sans-serif;
-
-  --tinta:#2b2a28;
-  --suave:#62605b;
-  --branco:#ffffff;
-  --raio:28px;
-}
-
-/* Acolhedor: formas redondas, cor quente e a fala do balcão. A ilustração
-   é feita de CSS para não depender de foto (e não pesar no celular). */
-*{margin:0;padding:0;box-sizing:border-box;}
-html{scroll-behavior:smooth;}
-body{font-family:var(--fonte-texto);font-size:1.08rem;line-height:1.6;color:var(--tinta);background:var(--fundo);-webkit-font-smoothing:antialiased;overflow-x:hidden;}
-a{color:inherit;}
-:focus-visible{outline:3px solid var(--primaria);outline-offset:3px;border-radius:8px;}
-h1,h2,h3{font-family:var(--fonte-titulo);font-weight:600;line-height:1.12;color:var(--primaria);}
-h2{font-size:clamp(1.8rem,3.6vw,2.6rem);margin-bottom:18px;}
-.pular{position:absolute;left:-9999px;top:8px;background:var(--tinta);color:var(--branco);padding:8px 14px;border-radius:10px;z-index:10;}
-.pular:focus{left:8px;}
-
-.topo{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1180px;margin:0 auto;padding:22px 24px;}
-.marca{display:flex;white-space:nowrap;align-items:center;gap:10px;font-family:var(--fonte-titulo);font-weight:600;font-size:1.3rem;text-decoration:none;color:var(--primaria);}
-.marca-selo{display:grid;place-items:center;width:42px;height:42px;border-radius:50% 50% 50% 14px;background:var(--primaria);color:var(--branco);font-size:1.2rem;}
-.menu{display:flex;align-items:center;gap:26px;font-weight:700;}
-.menu a:not(.botao){text-decoration:none;}
-.menu a:not(.botao):hover{text-decoration:underline;text-decoration-color:var(--destaque);text-decoration-thickness:4px;text-underline-offset:6px;}
-
-.botao{display:inline-block;padding:14px 26px;border-radius:999px;background:var(--primaria);color:var(--branco);font:700 1.02rem var(--fonte-texto);text-decoration:none;border:2px solid var(--primaria);transition:transform .2s,box-shadow .2s;}
-.botao:hover{transform:translateY(-2px);box-shadow:0 6px 0 color-mix(in srgb,var(--primaria) 35%,transparent);}
-.botao-claro{background:var(--branco);color:var(--primaria);}
-.botao-pequeno{padding:9px 18px;font-size:.95rem;}
-
-/* Abertura: texto à esquerda, a "lojinha" desenhada à direita */
-.abertura{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;max-width:1180px;margin:0 auto;padding:40px 24px 90px;}
-.aviso{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:999px;background:var(--branco);font-weight:700;font-size:.95rem;box-shadow:0 2px 0 rgba(0,0,0,.06);margin-bottom:22px;}
-.bolinha{width:10px;height:10px;border-radius:50%;background:var(--suave);}
-.aberto .bolinha{background:#2fa35a;}
-.abertura h1{font-size:clamp(2.4rem,5.2vw,4.1rem);max-width:15ch;margin-bottom:20px;}
-.abertura-lead{font-size:1.2rem;color:var(--suave);max-width:44ch;margin-bottom:30px;}
-.acoes{display:flex;flex-wrap:wrap;gap:14px;}
-
-.vitrine{position:relative;aspect-ratio:1/1;max-width:500px;width:100%;justify-self:center;}
-.sol{position:absolute;right:4%;top:2%;width:34%;aspect-ratio:1;border-radius:50%;background:var(--destaque);}
-.nuvem{position:absolute;left:0;top:14%;width:32%;height:11%;border-radius:999px;background:var(--branco);box-shadow:30px -18px 0 -4px var(--branco);}
-.loja{position:absolute;left:12%;right:12%;bottom:6%;top:26%;border-radius:46% 46% 22px 22px / 30% 30% 22px 22px;background:var(--primaria);overflow:hidden;}
-/* O toldo: listras num bloco, e a franja de meias-luas embaixo, com as
-   mesmas duas cores alternadas (duas camadas de gradiente defasadas). */
-.toldo{position:absolute;left:0;right:0;top:22%;height:13%;background:repeating-linear-gradient(90deg,var(--apoio) 0 12.5%,var(--branco) 12.5% 25%);}
-.toldo::after{content:'';position:absolute;left:0;right:0;top:100%;height:34%;
-  background:radial-gradient(25% 100% at 25% 0,var(--apoio) 98%,transparent) 0 0/25% 100% repeat-x,
-             radial-gradient(25% 100% at 75% 0,var(--branco) 98%,transparent) 0 0/25% 100% repeat-x;}
-.porta{position:absolute;left:34%;right:34%;bottom:0;height:44%;border-radius:999px 999px 0 0;background:var(--fundo);display:grid;place-items:start center;}
-.placa{margin-top:22%;display:grid;place-items:center;width:44%;aspect-ratio:1;border-radius:50%;background:var(--destaque);font-family:var(--fonte-titulo);font-weight:600;color:var(--tinta);font-size:clamp(.9rem,2vw,1.4rem);}
-.planta{position:absolute;left:4%;bottom:6%;width:18%;aspect-ratio:1/1.3;border-radius:50% 50% 12px 12px;background:var(--apoio);}
-.planta::after{content:'';position:absolute;left:18%;right:18%;bottom:-2px;height:34%;border-radius:6px;background:var(--tinta);opacity:.85;}
-
-.secao{max-width:1180px;margin:0 auto;padding:70px 24px;}
-
-/* Serviços: um quadro de preços, como o que fica na parede */
-.quadro{background:var(--branco);border-radius:var(--raio);padding:clamp(28px,5vw,56px);box-shadow:0 3px 0 rgba(0,0,0,.05);border:2px solid color-mix(in srgb,var(--primaria) 14%,transparent);}
-.quadro-lead{color:var(--suave);margin-bottom:26px;max-width:52ch;}
-.precos{list-style:none;display:grid;grid-template-columns:1fr 1fr;column-gap:56px;}
-.precos li{display:flex;align-items:baseline;gap:10px;padding:14px 0;font-size:1.12rem;}
-.item{font-weight:700;}
-.pontos{flex:1;border-bottom:3px dotted color-mix(in srgb,var(--primaria) 40%,transparent);transform:translateY(-5px);}
-.preco{font-family:var(--fonte-titulo);font-weight:600;color:var(--primaria);white-space:nowrap;}
-
-/* Motivos: uma forma de cor diferente em cada, e não um card por item */
-.motivos-lista{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:10px;}
-.motivos-lista h3{font-size:1.35rem;margin:16px 0 6px;color:var(--tinta);}
-.motivos-lista p{color:var(--suave);max-width:32ch;}
-.forma{display:block;width:64px;height:64px;}
-.forma-a{border-radius:50%;background:var(--destaque);}
-.forma-b{border-radius:22px;background:var(--apoio);transform:rotate(12deg);}
-.forma-c{border-radius:50% 50% 50% 8px;background:var(--primaria);}
-
-/* Falas: balões de conversa */
-.falas{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start;}
-.fala{position:relative;padding:30px 32px;border-radius:var(--raio);}
-.fala blockquote{font-family:var(--fonte-titulo);font-weight:500;font-size:clamp(1.25rem,2.2vw,1.6rem);line-height:1.3;}
-.fala figcaption{margin-top:14px;font-weight:700;}
-.fala::after{content:'';position:absolute;bottom:-18px;width:36px;height:36px;background:inherit;clip-path:polygon(0 0,100% 0,0 100%);}
-.fala-1{background:var(--destaque);color:var(--tinta);}
-.fala-1::after{left:48px;}
-.fala-2{background:var(--apoio);color:var(--tinta);margin-top:56px;}
-.fala-2::after{right:48px;clip-path:polygon(0 0,100% 0,100% 100%);}
-
-/* Horários e endereço */
-.onde{display:grid;grid-template-columns:1fr 1fr;gap:48px;}
-.horas{width:100%;border-collapse:separate;border-spacing:0 6px;font-size:1.08rem;}
-.horas th,.horas td{padding:10px 16px;text-align:left;background:var(--branco);}
-.horas th{border-radius:14px 0 0 14px;font-weight:700;}
-.horas td{border-radius:0 14px 14px 0;text-align:right;color:var(--suave);}
-.horas tr.hoje th,.horas tr.hoje td{background:var(--destaque);color:var(--tinta);}
-.endereco{font-family:var(--fonte-titulo);font-weight:500;font-size:1.5rem;line-height:1.3;margin-bottom:12px;}
-.onde-endereco p:not(.endereco){color:var(--suave);margin-bottom:22px;max-width:40ch;}
-
-/* Dúvidas */
-.duvidas{max-width:820px;}
-.duvidas details{background:var(--branco);border-radius:18px;margin-bottom:12px;padding:4px 22px;}
-.duvidas summary{cursor:pointer;padding:14px 0;font-weight:700;font-size:1.1rem;list-style:none;display:flex;justify-content:space-between;gap:16px;}
-.duvidas summary::-webkit-details-marker{display:none;}
-.duvidas summary::after{content:'+';font-family:var(--fonte-titulo);font-size:1.5rem;line-height:1;color:var(--primaria);}
-.duvidas details[open] summary::after{content:'–';}
-.duvidas details p{padding:0 0 16px;color:var(--suave);}
-
-/* Rodapé com a borda de cima em ondinha */
-.rodape{position:relative;margin-top:60px;background:var(--primaria);color:var(--branco);text-align:center;padding:70px 24px 40px;}
-.rodape::before{content:'';position:absolute;left:0;right:0;top:-23px;height:24px;background:radial-gradient(24px 24px at 24px 24px,var(--primaria) 98%,transparent) 0 0/48px 24px repeat-x;}
-.rodape-convite{font-family:var(--fonte-titulo);font-weight:600;font-size:clamp(1.7rem,4vw,2.6rem);margin-bottom:22px;}
-.rodape .botao{background:var(--destaque);border-color:var(--destaque);color:var(--tinta);}
-.rodape-fim{margin-top:34px;opacity:.85;font-size:.95rem;}
-
-@media (max-width:860px){
-  .abertura{grid-template-columns:1fr;padding-bottom:50px;}
-  .vitrine{max-width:360px;order:-1;}
-  .precos{grid-template-columns:1fr;}
-  .motivos-lista{grid-template-columns:1fr;gap:28px;}
-  .falas,.onde{grid-template-columns:1fr;}
-  .fala-2{margin-top:10px;}
-}
-@media (max-width:560px){
-  .menu a:not(.botao){display:none;}
-  .topo{padding:16px 20px;}
-  .marca{font-size:1.1rem;}
-  .marca-selo{width:36px;height:36px;}
-  .botao-pequeno{padding:8px 14px;font-size:.88rem;}
-  .secao{padding:50px 20px;}
-  .vitrine{max-width:260px;}
-}
-@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*{transition:none!important;}}

package/kits/editorial/index.html

@@ -1,115 +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 e a promessa do negócio -->
-  <title>Sua Marca, o que você faz numa frase</title>
-  <meta name='description' content='Uma frase que diz o que o negócio faz 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=Archivo:wdth,wght@62..125,400..900&family=Newsreader:ital,opsz,wght@0,6..72,400..600;1,6..72,400&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: o nome e os links (cada link aponta para o id de uma seção) -->
-  <header class='topo'>
-    <a href='#' class='marca'>Sua Marca</a>
-    <nav class='menu' aria-label='Principal'>
-      <a href='#servicos'>O que fazemos</a>
-      <a href='#sobre'>Quem somos</a>
-      <a href='#contato' class='menu-acao'>Marcar uma conversa</a>
-    </nav>
-  </header>
-
-  <main id='conteudo'>
-    <!-- TROQUE: a promessa em uma frase forte (o título é o elemento que marca a página), o texto de apoio e o telefone -->
-    <section class='abertura'>
-      <h1>A frase que diz o que você faz, sem rodeio.</h1>
-      <div class='abertura-base'>
-        <p class='nota'>Em Sua Cidade desde 2012</p>
-        <p class='abertura-texto'>Duas frases para quem chegou agora: para quem é o trabalho, o que muda depois dele, e por que confiar em vocês.</p>
-        <div class='abertura-acao'>
-          <a href='#contato' class='botao'>Marcar uma conversa</a>
-          <a href='tel:+5500000000000' class='telefone'>(00) 0000-0000</a>
-        </div>
-      </div>
-    </section>
-
-    <!-- TROQUE: os serviços. Cada <li> é uma linha: o nome à esquerda, a explicação à direita. Pode ter 3 a 6. -->
-    <section id='servicos' class='bloco'>
-      <h2 class='bloco-titulo'>O que fazemos</h2>
-      <ul class='lista'>
-        <li>
-          <h3>O primeiro serviço</h3>
-          <p>O que é, para quem serve e o resultado que a pessoa leva. Uma ou duas frases concretas.</p>
-        </li>
-        <li>
-          <h3>O segundo serviço</h3>
-          <p>O que é, para quem serve e o resultado que a pessoa leva. Uma ou duas frases concretas.</p>
-        </li>
-        <li>
-          <h3>O terceiro serviço</h3>
-          <p>O que é, para quem serve e o resultado que a pessoa leva. Uma ou duas frases concretas.</p>
-        </li>
-        <li>
-          <h3>O quarto serviço</h3>
-          <p>O que é, para quem serve e o resultado que a pessoa leva. Uma ou duas frases concretas.</p>
-        </li>
-      </ul>
-    </section>
-
-    <!-- TROQUE: uma frase de cliente (real, se houver; se não houver, apague a seção inteira) -->
-    <section class='citacao' aria-label='O que dizem'>
-      <blockquote>
-        <p>“Uma frase de cliente que conta o que mudou depois do trabalho, com as palavras dele.”</p>
-        <footer>Nome do cliente, o que ele faz</footer>
-      </blockquote>
-    </section>
-
-    <!-- TROQUE: a história do negócio em 2 ou 3 parágrafos curtos, e os fatos ao lado (só fatos que você sabe) -->
-    <section id='sobre' class='bloco'>
-      <h2 class='bloco-titulo'>Quem somos</h2>
-      <div class='sobre'>
-        <div class='sobre-texto'>
-          <p>O primeiro parágrafo conta de onde o negócio veio e o que ele faz melhor que os outros. Frases curtas, na voz de quem atende.</p>
-          <p>O segundo parágrafo diz como é trabalhar com vocês: o primeiro contato, o combinado, a entrega. Nada de palavra vazia.</p>
-        </div>
-        <dl class='fatos'>
-          <div><dt>Onde</dt><dd>Rua Exemplo, 100, Sua Cidade</dd></div>
-          <div><dt>Atende</dt><dd>Para quem é o trabalho</dd></div>
-          <div><dt>Registro</dt><dd>Um dado que dá confiança</dd></div>
-        </dl>
-      </div>
-    </section>
-
-    <!-- TROQUE: o convite, os contatos e a pergunta do formulário -->
-    <section id='contato' class='bloco contato'>
-      <h2 class='bloco-titulo'>Vamos conversar</h2>
-      <div class='contato-grade'>
-        <div class='contato-texto'>
-          <p class='contato-chamada'>Conte em poucas linhas o que você precisa. A resposta chega em até um dia útil.</p>
-          <p><a href='mailto:contato@suamarca.com.br'>contato@suamarca.com.br</a><br><a href='tel:+5500000000000'>(00) 0000-0000</a></p>
-        </div>
-        <form id='formContato' class='form' novalidate>
-          <label>Seu nome<input type='text' name='nome' required autocomplete='name'></label>
-          <label>Seu e-mail<input type='email' name='email' required autocomplete='email'></label>
-          <label>O que você precisa?<textarea name='mensagem' rows='4' required></textarea></label>
-          <button type='submit' class='botao'>Enviar mensagem</button>
-          <p id='formOk' class='form-ok' role='status' hidden>Recebido. (Demonstração: o formulário ainda não envia para lugar nenhum.)</p>
-        </form>
-      </div>
-    </section>
-  </main>
-
-  <!-- TROQUE: ano, nome e cidade -->
-  <footer class='rodape'>
-    <p>© 2026 Sua Marca, Sua Cidade</p>
-    <a href='#'>Voltar ao topo</a>
-  </footer>
-</body>
-</html>

package/kits/editorial/script.js

@@ -1,19 +0,0 @@
-// Editorial: a página não se mexe sozinha (a força dela é o tipo parado).
-// O script só confirma o formulário, porque ainda não há servidor.
-(function(){
-  var form=document.getElementById('formContato');
-  var ok=document.getElementById('formOk');
-  if(!form||!ok) return;
-  form.addEventListener('submit',function(e){
-    e.preventDefault();
-    // Sem o novalidate o navegador mostraria balões em inglês em alguns sistemas;
-    // aqui a checagem é a mesma, mas o foco vai para o primeiro campo vazio.
-    if(!form.checkValidity()){
-      var vazio=form.querySelector(':invalid');
-      if(vazio) vazio.focus();
-      return;
-    }
-    ok.hidden=false;
-    form.reset();
-  });
-})();

package/kits/editorial/style.css

@@ -1,112 +0,0 @@
-:root{
-  /* ── A MARCA ───────────────────────────────────────────────────────
-     Para mudar a cara da página inteira, troque SÓ estas linhas:
-       --primaria   a cor da marca (título, linhas grossas, links)
-       --destaque   o botão e a seleção de texto
-       --apoio      o fundo claro da citação
-       --fonte-titulo / --fonte-texto   as duas fontes (e o link do
-                    Google Fonts no index.html)
-     O resto do arquivo usa estas variáveis: não precisa mexer nele. */
-  --primaria:#1432c8;
-  --destaque:#111111;
-  --apoio:#e7ebfb;
-  --fonte-titulo:'Archivo',system-ui,sans-serif;
-  --fonte-texto:'Newsreader',Georgia,serif;
-
-  --tinta:#141414;
-  --cinza:#5e5e5e;
-  --papel:#fcfcfb;
-  --linha:#d9d9d6;
-  --lado:clamp(20px,5vw,72px);
-}
-
-/* Editorial: a página é uma grade de 12 colunas e tudo encosta à esquerda.
-   A hierarquia vem do TAMANHO do tipo e das linhas, não de caixas. */
-*{margin:0;padding:0;box-sizing:border-box;}
-html{scroll-behavior:smooth;}
-body{font-family:var(--fonte-texto);font-size:1.125rem;line-height:1.6;color:var(--tinta);background:var(--papel);-webkit-font-smoothing:antialiased;}
-a{color:inherit;}
-::selection{background:var(--destaque);color:var(--papel);}
-:focus-visible{outline:3px solid var(--primaria);outline-offset:3px;}
-h1,h2,h3{font-family:var(--fonte-titulo);font-weight:800;line-height:1;letter-spacing:-.02em;}
-
-.pular{position:absolute;left:-9999px;top:8px;background:var(--tinta);color:var(--papel);padding:8px 14px;z-index:10;}
-.pular:focus{left:8px;}
-
-/* Topo: uma linha fina, sem fundo de vidro nem sombra */
-.topo{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:22px var(--lado);border-bottom:1px solid var(--tinta);}
-.marca{font-family:var(--fonte-titulo);font-weight:800;font-size:1.35rem;letter-spacing:-.02em;text-decoration:none;font-stretch:90%;}
-.menu{display:flex;gap:28px;font-family:var(--fonte-titulo);font-size:.98rem;}
-.menu a{text-decoration:none;}
-.menu a:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px;}
-.menu-acao{color:var(--primaria);font-weight:700;}
-
-/* Abertura: o título enorme e estreito é o único elemento que grita */
-.abertura{padding:clamp(48px,9vw,120px) var(--lado) clamp(40px,6vw,80px);border-bottom:6px solid var(--primaria);}
-.abertura h1{font-size:clamp(3rem,11vw,11.5rem);font-stretch:68%;font-weight:850;line-height:.88;letter-spacing:-.03em;max-width:15ch;color:var(--primaria);}
-.abertura-base{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;margin-top:clamp(36px,5vw,64px);align-items:start;}
-.nota{grid-column:1/4;font-family:var(--fonte-titulo);font-size:.95rem;color:var(--cinza);padding-top:6px;border-top:1px solid var(--tinta);}
-.abertura-texto{grid-column:4/9;font-size:clamp(1.2rem,1.7vw,1.45rem);line-height:1.45;max-width:36ch;}
-.abertura-acao{grid-column:9/13;display:flex;flex-direction:column;align-items:flex-start;gap:14px;}
-.telefone{font-family:var(--fonte-titulo);font-size:1.05rem;text-decoration:none;border-bottom:1px solid currentColor;}
-
-.botao{display:inline-block;padding:15px 26px;background:var(--destaque);color:var(--papel);font:700 1rem var(--fonte-titulo);text-decoration:none;border:0;border-radius:0;cursor:pointer;transition:background .2s;}
-.botao:hover{background:var(--primaria);}
-
-/* Blocos: o título mora na coluna estreita da esquerda, o conteúdo na larga */
-.bloco{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding:clamp(56px,8vw,112px) var(--lado);border-bottom:1px solid var(--linha);}
-.bloco-titulo{grid-column:1/4;font-size:clamp(1.5rem,2.2vw,2rem);font-stretch:85%;align-self:start;position:sticky;top:24px;}
-.lista,.sobre,.contato-grade{grid-column:4/13;}
-
-/* Serviços: linhas com filete, como índice de revista, e não cards */
-.lista{list-style:none;border-top:2px solid var(--tinta);}
-.lista li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px;padding:26px 0 30px;border-bottom:1px solid var(--linha);}
-.lista h3{font-size:clamp(1.35rem,2.3vw,2.1rem);font-stretch:80%;font-weight:750;}
-.lista p{color:#333;max-width:48ch;}
-
-/* Citação: o respiro no meio da página */
-.citacao{background:var(--apoio);padding:clamp(64px,9vw,128px) var(--lado);}
-.citacao blockquote{max-width:1100px;margin-left:calc((100% - 0px)/12*3);}
-.citacao p{font-style:italic;font-size:clamp(1.7rem,3.4vw,3rem);line-height:1.2;letter-spacing:-.01em;max-width:30ch;}
-.citacao footer{margin-top:24px;font-family:var(--fonte-titulo);font-size:1rem;color:var(--cinza);}
-
-/* Quem somos: texto em coluna de leitura, fatos numa lista seca ao lado */
-.sobre{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;}
-.sobre-texto p{max-width:60ch;}
-.sobre-texto p+p{margin-top:1em;}
-.sobre-texto p:first-child::first-letter{float:left;font-family:var(--fonte-titulo);font-weight:850;font-stretch:70%;font-size:4.6em;line-height:.8;padding:6px 10px 0 0;color:var(--primaria);}
-.fatos{border-top:2px solid var(--tinta);}
-.fatos div{display:grid;grid-template-columns:7em 1fr;gap:12px;padding:14px 0;border-bottom:1px solid var(--linha);}
-.fatos dt{font-family:var(--fonte-titulo);font-weight:700;font-size:.95rem;}
-.fatos dd{font-size:1.02rem;}
-
-/* Contato */
-.contato{border-bottom:0;}
-.contato-grade{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;}
-.contato-chamada{font-size:clamp(1.3rem,2vw,1.6rem);line-height:1.35;margin-bottom:20px;max-width:26ch;}
-.contato-texto a{font-family:var(--fonte-titulo);text-underline-offset:4px;}
-.form{display:grid;gap:22px;}
-.form label{display:grid;gap:6px;font-family:var(--fonte-titulo);font-size:.95rem;font-weight:600;}
-.form input,.form textarea{font:inherit;font-family:var(--fonte-texto);font-size:1.1rem;font-weight:400;padding:10px 0;border:0;border-bottom:2px solid var(--tinta);background:transparent;color:var(--tinta);border-radius:0;resize:vertical;}
-.form input:focus,.form textarea:focus{outline:0;border-bottom-color:var(--primaria);}
-.form .botao{justify-self:start;}
-.form-ok{font-family:var(--fonte-titulo);color:var(--primaria);}
-
-.rodape{display:flex;justify-content:space-between;gap:20px;padding:26px var(--lado);border-top:6px solid var(--primaria);font-family:var(--fonte-titulo);font-size:.95rem;}
-
-/* Celular: a grade vira uma coluna, e o título do bloco sobe para cima */
-@media (max-width:900px){
-  .abertura-base,.bloco{grid-template-columns:1fr;}
-  .nota,.abertura-texto,.abertura-acao,.bloco-titulo,.lista,.sobre,.contato-grade{grid-column:auto;}
-  .bloco-titulo{position:static;}
-  .abertura-acao{flex-direction:row;flex-wrap:wrap;align-items:center;gap:18px;}
-  .sobre,.contato-grade{grid-template-columns:1fr;gap:36px;}
-  .citacao blockquote{margin-left:0;}
-}
-@media (max-width:640px){
-  .menu a:not(.menu-acao){display:none;}
-  .lista li{grid-template-columns:1fr;gap:8px;}
-  .abertura h1{font-size:clamp(2.9rem,15vw,5rem);}
-  .rodape{flex-direction:column;}
-}
-@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*{transition:none!important;}}

package/kits/landing/index.html

@@ -1,162 +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 e a promessa do negócio -->
-  <title>Sua Marca · O que você faz, numa frase</title>
-  <meta name='description' content='Uma frase que diz o que o negócio faz e para quem.'>
-  <link rel='preconnect' href='https://fonts.googleapis.com'>
-  <link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
-  <link href='https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap' rel='stylesheet'>
-  <link rel='stylesheet' href='style.css'>
-  <script src='script.js' defer></script>
-</head>
-<body>
-  <div class='progress' id='progress'></div>
-  <div class='cursor-glow' id='glow' aria-hidden='true'></div>
-
-  <!-- TROQUE: a inicial, o nome e os links (cada link aponta para o id de uma seção) -->
-  <nav class='nav' id='nav'>
-    <a href='#hero' class='brand'>
-      <span class='brand-mark'>S</span>
-      <span>Sua Marca</span>
-    </a>
-    <div class='nav-links'>
-      <a href='#modelo'>Como funciona</a>
-      <a href='#produtos'>O que fazemos</a>
-      <a href='#imersao'>Oferta</a>
-      <a href='#contato' class='btn btn-small magnetic'>Fale com a gente</a>
-    </div>
-  </nav>
-
-  <!-- TROQUE: a promessa. O <em> é a palavra que brilha: uma só. Os números contam sozinhos (data-count). -->
-  <header id='hero' class='hero'>
-    <canvas id='net' class='hero-canvas' aria-hidden='true'></canvas>
-    <div class='blob b1' aria-hidden='true'></div>
-    <div class='blob b2' aria-hidden='true'></div>
-    <div class='blob b3' aria-hidden='true'></div>
-    <div class='hero-inner'>
-      <p class='eyebrow reveal'><span class='dot'></span>O que você é · Cidade</p>
-      <h1 class='split'>A frase que <em>vende</em> o negócio.</h1>
-      <p class='lead reveal' style='--d:.7s'>Uma frase curta que explica para quem é e o que muda na vida de quem compra.</p>
-      <div class='hero-actions reveal' style='--d:.9s'>
-        <a href='#contato' class='btn magnetic'><span>A ação principal</span></a>
-        <a href='#modelo' class='btn btn-ghost magnetic'><span>Saiba mais</span></a>
-      </div>
-      <dl class='stats reveal' style='--d:1.1s'>
-        <div><dt><span data-count='10'>0</span> anos</dt><dd>de um fato que dá confiança</dd></div>
-        <div><dt><span data-count='500'>0</span>+</dt><dd>clientes atendidos</dd></div>
-        <div><dt><span data-count='4'>0</span>,9</dt><dd>de nota média</dd></div>
-      </dl>
-    </div>
-    <a href='#modelo' class='scroll-hint' aria-label='Rolar para baixo'><span></span></a>
-  </header>
-
-  <!-- TROQUE: 5 palavras-chave do negócio. A lista se repete DUAS vezes (é o que faz a faixa rodar sem emenda). -->
-  <div class='marquee' aria-hidden='true'>
-    <div class='marquee-track'>
-      <span>Palavra um</span><i>✦</i><span>Palavra dois</span><i>✦</i><span>Palavra três</span><i>✦</i><span>Palavra quatro</span><i>✦</i><span>Palavra cinco</span><i>✦</i>
-      <span>Palavra um</span><i>✦</i><span>Palavra dois</span><i>✦</i><span>Palavra três</span><i>✦</i><span>Palavra quatro</span><i>✦</i><span>Palavra cinco</span><i>✦</i>
-    </div>
-  </div>
-
-  <!-- TROQUE: os 3 diferenciais (ou os 3 passos de como funciona) -->
-  <section id='modelo' class='section'>
-    <p class='eyebrow reveal'>Como funciona</p>
-    <h2 class='reveal'>Por que escolher a <em>gente</em>.</h2>
-    <div class='cards'>
-      <article class='card tilt reveal' style='--d:.05s'>
-        <span class='card-tag tag-blue'>01</span>
-        <h3>O primeiro diferencial</h3>
-        <p>Uma ou duas frases concretas: o que é, e por que importa para quem compra.</p>
-      </article>
-      <article class='card tilt reveal' style='--d:.15s'>
-        <span class='card-tag tag-orange'>02</span>
-        <h3>O segundo diferencial</h3>
-        <p>Uma ou duas frases concretas: o que é, e por que importa para quem compra.</p>
-      </article>
-      <article class='card tilt reveal' style='--d:.25s'>
-        <span class='card-tag tag-cyan'>03</span>
-        <h3>O terceiro diferencial</h3>
-        <p>Uma ou duas frases concretas: o que é, e por que importa para quem compra.</p>
-      </article>
-    </div>
-  </section>
-
-  <!-- TROQUE: o que o negócio oferece. O número no círculo é o destaque (data-count). -->
-  <section id='produtos' class='section section-dark'>
-    <div class='products'>
-      <div class='products-text'>
-        <p class='eyebrow reveal'>O que fazemos</p>
-        <h2 class='reveal'>Tudo o que você <em>precisa</em></h2>
-        <p class='section-lead reveal'>Uma frase sobre os produtos ou serviços, e onde ver todos.</p>
-        <a href='#contato' class='btn magnetic reveal'><span>Ver os serviços ↗</span></a>
-      </div>
-      <div class='orbit reveal' aria-hidden='true'>
-        <div class='orbit-core'><strong data-count='12'>0</strong><small>serviços</small></div>
-        <div class='ring r1'></div>
-        <div class='ring r2'></div>
-        <div class='ring r3'></div>
-        <div class='orbit-dots' id='orbitDots'></div>
-      </div>
-    </div>
-  </section>
-
-  <!-- TROQUE: a oferta principal (um plano, um evento, uma promoção) e as 3 etapas ou opções dela -->
-  <section id='imersao' class='section'>
-    <div class='split-box reveal'>
-      <div>
-        <p class='eyebrow'>A oferta</p>
-        <h2>A oferta em <em>uma linha</em>.</h2>
-        <p>O que a pessoa leva, quanto tempo leva, e por que agora.</p>
-        <div class='days'><span>Etapa 1</span><span>Etapa 2</span><span>Etapa 3</span></div>
-      </div>
-      <a href='#contato' class='btn magnetic'><span>Quero essa oferta</span></a>
-    </div>
-  </section>
-
-  <!-- TROQUE: a captura (lista de espera, newsletter, cupom). Os 3 itens dizem o que a pessoa recebe. -->
-  <section id='newsletter' class='section section-accent'>
-    <div class='accent-grid' aria-hidden='true'></div>
-    <div class='news'>
-      <div class='news-text'>
-        <p class='eyebrow reveal'>Novidades</p>
-        <h2 class='reveal'>O motivo para deixar o <em>e-mail</em>.</h2>
-        <p class='news-lead reveal' style='--d:.15s'>O que chega, com que frequência, e a promessa de não encher.</p>
-        <ol class='news-list'>
-          <li class='reveal' style='--d:.2s'><span class='news-num'>01</span><div><strong>O primeiro benefício</strong><p>Uma frase concreta.</p></div></li>
-          <li class='reveal' style='--d:.26s'><span class='news-num'>02</span><div><strong>O segundo benefício</strong><p>Uma frase concreta.</p></div></li>
-          <li class='reveal' style='--d:.32s'><span class='news-num'>03</span><div><strong>O terceiro benefício</strong><p>Uma frase concreta.</p></div></li>
-        </ol>
-      </div>
-      <form class='news-form reveal' style='--d:.3s' onsubmit="event.preventDefault(); this.querySelector('.form-ok').hidden = false; this.reset();">
-        <p class='news-form-title'>Quero receber</p>
-        <label class='field'><input type='email' name='email' placeholder=' ' required autocomplete='email'><span>Seu e-mail</span></label>
-        <button type='submit' class='btn btn-light magnetic'><span>Quero receber</span></button>
-        <p class='news-note'>Sem spam. Cancele quando quiser.</p>
-        <p class='form-ok' hidden>Anotado! (Demonstração: ainda não envia para lugar nenhum.)</p>
-      </form>
-    </div>
-  </section>
-
-  <!-- TROQUE: o convite final e a pergunta do último campo -->
-  <section id='contato' class='section'>
-    <p class='eyebrow reveal'>Contato</p>
-    <h2 class='reveal'>Fale com a <em>gente</em></h2>
-    <form class='reveal' onsubmit="event.preventDefault(); this.querySelector('.form-ok').hidden = false; this.reset();">
-      <label class='field'><input type='text' name='nome' placeholder=' ' required><span>Seu nome</span></label>
-      <label class='field'><input type='email' name='email' placeholder=' ' required><span>Seu e-mail</span></label>
-      <label class='field'><textarea name='mensagem' rows='4' placeholder=' ' required></textarea><span>Como podemos ajudar?</span></label>
-      <button type='submit' class='btn magnetic'><span>Enviar</span></button>
-      <p class='form-ok' hidden>Recebido! (Demonstração: o formulário ainda não envia para lugar nenhum.)</p>
-    </form>
-  </section>
-
-  <!-- TROQUE: ano, nome, cidade e o link -->
-  <footer class='footer'>
-    <p>&copy; 2026 Sua Marca · Cidade</p>
-    <a href='#hero'>voltar ao topo</a>
-  </footer>
-</body>
-</html>