# Manifesto de Design e Engenharia Mupin Marketing (Versão 2026) Este documento define a alma visual e técnica de todos os projetos da Mupin Marketing. Ele deve ser seguido rigorosamente por qualquer sistema de IA para manter a consistência entre desktop e mobile. ## 1. Arquitetura de Código (Obrigatório) - **Separação de Preocupações:** Cada seção do site deve ter seu próprio arquivo `.tsx` (para estrutura visual e lógica) e um arquivo `.css` correspondente (para configuração de estilo). - **Responsividade Nativa:** A configuração responsiva deve ser tratada diretamente no `.tsx` (classes Tailwind/ShadCN) e refinada no `.css`. - **Intercalagem de Seções:** O layout deve alternar entre fundos escuros e variações sutis (como gradientes de glow ou fundos brancos estratégicos) para manter o ritmo visual. ## 2. Tipografia e Ênfase - **Fontes Primárias:** - `Geist`: Para textos modernos e limpos. - `Instrument Serif`: Estritamente para termos em *itálico* que precisam de elegância e autoridade. - `JetBrains Mono`: Para detalhes técnicos, "eyebrows" (olhinhos de seção) e micro-textos. - **Mix de Fontes:** Use a `Instrument Serif` no meio de frases em `Geist` para destacar a palavra mais importante da seção, criando um contraste de alto impacto. ## 3. Diretrizes por Seção ### (O Impacto Inicial) - **Visual:** Vídeo de fundo em loop, fluido e com baixa opacidade/filtros escuros. - **Interação:** Botões com gradiente em movimento constante (Magenta/Ciano). - **Cards:** À direita, cards com efeito "Glass" (vidro líquido) e textos minimalistas. - **Menu:** Topbar fundida ao topo do Hero, mix-blend mode para legibilidade. - **Adaptação:** O Hero deve ocupar exatamente 100% da altura da tela (100vh) tanto no desktop quanto no mobile (terminando exatamente na base da tela do celular). ### - Movimento lateral contínuo de frases curtas, separadas por ícones sutis. ### (O Poder Visual) - Fundo branco contrastando com um card central enorme em fundo preto/glow. - Cards internos que mostram o "poder visual" através de ícones minimalistas. ### (O Fundo Mágico) - Fundo com até 3 cores em "glow" (Magenta, Roxo, Ciano) fundindo-se com o tema dark. - Cards de serviço com efeito "Liquid Glass" e animação de escala/brilho ao passar o mouse. ### (Adaptação Fluida) - Organização de cards que se fundem, trazendo um novo conceito visual. - Alta adaptabilidade: No desktop são colunas largas; no mobile, transformam-se em uma lista elegante que mantém o peso visual. ### (Organização Inteligente) - Layout de cards que não repete os anteriores. - Estrutura de "Antes e Depois" ou "Comparativo" que se adapta sem esmagar o conteúdo em telas menores. ### (Conversão Sofisticada) - Mix de imagens e cards de serviço. - Botoes com gradiente em movimento. - Tabela comparativa com cards adaptados à cor da seção. ###