feat(jogo): expediente dos mortos, jogo de zumbis em primeira pessoa

Etapa 1 inteira (logica com 100% de cobertura, cena 3D, toque, sons, bancada de desempenho, e2e) e a base da etapa 2 (mapa novo no Tiled, texturas, imagens dos itens, sons conferidos, golpe recortado e medido). Pagina /jogo fora do menu e do sitemap ate a medicao no celular.

.gitattributes

@@ -0,0 +1,11 @@
+# Texto sempre com LF no repositório e na cópia de trabalho (o Windows com core.autocrlf=true gerava CRLF e o Biome acusava)
+* text=auto eol=lf
+
+# Binários: nunca converter quebras de linha
+*.mp4 binary
+*.webm binary
+*.webp binary
+*.jpg binary
+*.png binary
+*.ico binary
+*.pdf binary

.gitea/workflows/ci.yml

@@ -0,0 +1,108 @@
+# CI e deploy num arquivo só: o Gitea lê .gitea/workflows e ignora .github/workflows quando esta pasta existe.
+# - verify: lint, tipos, testes e build. O deploy só roda se ele passar.
+# - audit: alertas de segurança das dependências (fica vermelho sozinho, sem travar o deploy).
+# - e2e: testes de ponta a ponta na build de produção (informativo).
+# - deploy: Vercel CLI. Branch padrão -> produção; demais branches -> preview; pull requests não publicam.
+#   Token: secret VERCEL_TOKEN de nível de usuário no Gitea. Projeto na Vercel = nome do repo
+#   (ou a variável VERCEL_PROJECT do repo). O build roda na Vercel; o runner só envia o código.
+name: CI
+
+"on":
+  push:
+  pull_request:
+  workflow_dispatch:
+
+permissions:
+  contents: read
+
+jobs:
+  verify:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v6
+      - uses: pnpm/action-setup@v6
+      - uses: actions/setup-node@v6
+        with:
+          node-version: 22
+          cache: pnpm
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm lint
+      - run: pnpm typecheck
+      - run: pnpm test -- --runInBand
+      - run: pnpm test:jogo
+      - run: pnpm build
+
+  audit:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v6
+      - uses: pnpm/action-setup@v6
+      - uses: actions/setup-node@v6
+        with:
+          node-version: 22
+          cache: pnpm
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm audit --prod --audit-level=high
+      - run: pnpm audit --dev --audit-level=high
+
+  e2e:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v6
+      - uses: pnpm/action-setup@v6
+      - uses: actions/setup-node@v6
+        with:
+          node-version: 22
+          cache: pnpm
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm exec playwright install --with-deps chromium
+      - run: pnpm build
+      - name: Subir o servidor de produção
+        run: pnpm start -p 3001 &
+      - name: Esperar a porta 3001
+        run: |
+          for attempt in $(seq 1 60); do
+            if curl --silent --fail --output /dev/null http://localhost:3001/; then
+              exit 0
+            fi
+            sleep 2
+          done
+          echo "O servidor não respondeu na porta 3001 em 120 s" >&2
+          exit 1
+      - name: Testes de ponta a ponta
+        run: pnpm test:e2e
+        env:
+          BASE_URL: http://localhost:3001
+      - name: Publicar test-results/
+        if: ${{ !cancelled() }}
+        uses: actions/upload-artifact@v4
+        with:
+          name: e2e-test-results
+          path: test-results/
+          if-no-files-found: ignore
+          retention-days: 7
+
+  deploy:
+    needs: verify
+    if: github.event_name != 'pull_request'
+    runs-on: ubuntu-latest
+    env:
+      VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
+      VERCEL_SCOPE: asemlk54-1928s-projects
+    steps:
+      - uses: actions/checkout@v6
+      - uses: actions/setup-node@v6
+        with:
+          node-version: 22
+      # versão fixa do CLI: um pacote sem versão num pipeline de produção é risco de cadeia de suprimentos
+      - run: npm install --global [email protected]
+      - name: Deploy
+        run: |
+          PROJECT=$(echo "${{ vars.VERCEL_PROJECT || github.event.repository.name }}" | tr '[:upper:]' '[:lower:]')
+          if [ "${{ github.ref_name }}" = "${{ github.event.repository.default_branch }}" ]; then
+            PROD=--prod
+          else
+            PROD=
+          fi
+          vercel link --yes --project "$PROJECT" --scope "$VERCEL_SCOPE" --token "$VERCEL_TOKEN"
+          vercel deploy $PROD --token "$VERCEL_TOKEN"

.gitignore

@@ -12,6 +12,8 @@
 
 # testing
 /coverage
+/test-results/
+/playwright-report/
 
 # next.js
 /.next/
@@ -39,3 +41,28 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# local agent/editor state
+/.augment/
+/.kiro/
+.opencode/
+.claude/settings.local.json
+.superpowers/
+/.worktrees/
+/.impeccable/
+/.serena/
+
+# generated analysis artifacts
+/graphify-out/
+*.graphify.json
+*.analysis.json
+*.tmp.json
+*.debug.json
+
+.omo/
+.playwright-mcp/
+
+/3d/out/
+/3d/__pycache__/
+/3d/fontes/
+/3d/ferramentas/

.graphifyignore

@@ -0,0 +1,21 @@
+node_modules/
+.next/
+dist/
+build/
+out/
+coverage/
+.git/
+.pnpm-store/
+.cache/
+*.log
+.env
+.env.*
+__pycache__/
+*.pyc
+.venv/
+venv/
+target/
+*.exe
+*.dll
+*.so
+*.dylib

.kiro/specs/premium-animations/.config.kiro

@@ -1 +0,0 @@
-{"specId": "3fcf2565-1720-4d06-9224-82b23b02204c", "workflowType": "requirements-first", "specType": "feature"}

.kiro/specs/premium-animations/design.md

@@ -1,534 +0,0 @@
-# Design Document: Premium Animations
-
-## Overview
-
-Este documento detalha o design técnico para implementar animações premium no portfolio evandro.dev.br, inspiradas no estilo suave e elegante do site on.energy. O sistema de animações será construído sobre Framer Motion e Lenis, mantendo a identidade visual existente (cores, tipografia Monument Extended, paleta --slash #ccff00) enquanto adiciona transições fluidas, scroll-triggered animations, parallax sutil e animações de hover sofisticadas.
-
-### Objetivos Principais
-
-1. Elevar a experiência visual com animações premium e fluidas
-2. Manter performance consistente (60fps) em todos os dispositivos
-3. Garantir acessibilidade completa com suporte a prefers-reduced-motion
-4. Criar um sistema de animações reutilizável e escalável
-5. Integrar smooth scroll global com Lenis
-6. Implementar interações sofisticadas (magnetic buttons, custom cursor)
-
-### Princípios de Design
-
-- **Performance First**: Usar apenas propriedades GPU-accelerated (transform, opacity)
-- **Accessibility First**: Respeitar prefers-reduced-motion em todas as animações
-- **Progressive Enhancement**: Funcionalidade básica sem JavaScript, animações como enhancement
-- **Consistency**: Usar curvas de easing e durações consistentes em todo o sistema
-- **Subtlety**: Animações devem ser elegantes e discretas, não distrativas
-
-## Architecture
-
-### System Overview
-
-O sistema de animações será organizado em camadas modulares:
-
-```
-Animation System
-├── Core Layer (Hooks & Utilities)
-│   ├── useScrollTrigger - Detecta elementos no viewport
-│   ├── useParallax - Aplica efeitos parallax
-│   ├── useReducedMotion - Detecta preferências de acessibilidade
-│   ├── useMagneticEffect - Implementa efeito magnético
-│   └── animationConfig - Configurações centralizadas
-│
-├── Component Layer (Wrappers Reutilizáveis)
-│   ├── ScrollReveal - Wrapper para scroll-triggered animations
-│   ├── StaggerContainer - Container para stagger animations
-│   ├── ParallaxElement - Wrapper para parallax effects
-│   ├── PageTransition - Transições entre páginas
-│   ├── ImageReveal - Reveal animado para imagens
-│   ├── TextReveal - Reveal animado para textos
-│   └── CustomCursor - Cursor customizado
-│
-├── Integration Layer (Providers & Context)
-│   ├── LenisProvider - Smooth scroll global
-│   ├── AnimationProvider - Context para configurações
-│   └── CursorProvider - Context para cursor customizado
-│
-└── Enhancement Layer (Micro-interactions)
-    ├── Card hover effects
-    ├── Button hover effects
-    ├── Form field interactions
-    └── Loading states
-```
-
-### Technology Stack
-
-- **Framer Motion 12.23.12**: Biblioteca principal de animações
-- **Lenis 1.3.18**: Smooth scroll library
-- **React 19.1.0**: Framework base
-- **Next.js 15.5.9**: App Router para routing
-- **TypeScript**: Type safety
-- **Tailwind CSS 4**: Styling utilities
-
-### Integration Points
-
-1. **App Layout**: LenisProvider e AnimationProvider no root layout
-2. **Page Components**: PageTransition wrapper em cada página
-3. **Section Components**: ScrollReveal wrapper em seções principais
-4. **Card Components**: Hover effects e stagger animations
-5. **Form Components**: Micro-interactions em campos
-6. **Hero Component**: Remoção da fase logo, manutenção de typing animation
-
-## Components and Interfaces
-
-### Core Hooks
-
-#### useScrollTrigger
-
-Hook para detectar quando elementos entram no viewport e disparar animações.
-
-```typescript
-interface UseScrollTriggerOptions {
-  threshold?: number; // Porcentagem do elemento visível (default: 0.2)
-  once?: boolean; // Executar apenas uma vez (default: true)
-  margin?: string; // Margin do viewport (default: "0px")
-}
-
-interface UseScrollTriggerReturn {
-  ref: RefObject<HTMLElement>;
-  isInView: boolean;
-  entry: IntersectionObserverEntry | null;
-}
-
-function useScrollTrigger(options?: UseScrollTriggerOptions): UseScrollTriggerReturn
-```
-
-**Implementação**: Wrapper sobre `useInView` do Framer Motion com configurações otimizadas.
-
-#### useParallax
-
-Hook para aplicar efeitos parallax em elementos durante o scroll.
-
-```typescript
-interface UseParallaxOptions {
-  speed?: number; // Velocidade do parallax (default: 0.5 = 50% mais lento)
-  direction?: "vertical" | "horizontal"; // Direção do movimento (default: "vertical")
-  disabled?: boolean; // Desabilitar parallax (usado com reduced motion)
-}
-
-interface UseParallaxReturn {
-  ref: RefObject<HTMLElement>;
-  style: MotionStyle;
-}
-
-function useParallax(options?: UseParallaxOptions): UseParallaxReturn
-```
-
-**Implementação**: Usa `useScroll` e `useTransform` do Framer Motion para calcular posição baseada no scroll.
-
-#### useReducedMotion
-
-Hook para detectar preferência de movimento reduzido do usuário.
-
-```typescript
-function useReducedMotion(): boolean
-```
-
-**Implementação**: Wrapper sobre `useReducedMotion` do Framer Motion, retorna `true` se `prefers-reduced-motion: reduce` está ativo.
-
-#### useMagneticEffect
-
-Hook para implementar efeito magnético em botões.
-
-```typescript
-interface UseMagneticEffectOptions {
-  radius?: number; // Raio de influência em pixels (default: 80)
-  strength?: number; // Força do efeito, max movement em pixels (default: 12)
-  disabled?: boolean; // Desabilitar efeito (usado com reduced motion)
-}
-
-interface UseMagneticEffectReturn {
-  ref: RefObject<HTMLElement>;
-  style: MotionStyle;
-}
-
-function useMagneticEffect(options?: UseMagneticEffectOptions): UseMagneticEffectReturn
-```
-
-**Implementação**: Rastreia posição do mouse, calcula distância ao elemento, aplica transform proporcional com spring physics.
-
-### Component Wrappers
-
-#### ScrollReveal
-
-Componente wrapper para aplicar scroll-triggered animations.
-
-```typescript
-interface ScrollRevealProps {
-  children: React.ReactNode;
-  direction?: "up" | "down" | "left" | "right"; // Direção do slide (default: "up")
-  distance?: number; // Distância do movimento em pixels (default: 24)
-  duration?: number; // Duração da animação em segundos (default: 0.6)
-  delay?: number; // Delay antes da animação (default: 0)
-  threshold?: number; // Threshold do viewport (default: 0.2)
-  once?: boolean; // Executar apenas uma vez (default: true)
-  className?: string;
-}
-
-function ScrollReveal(props: ScrollRevealProps): JSX.Element
-```
-
-**Comportamento**:
-- Normal: fade in + slide na direção especificada com blur inicial
-- Reduced Motion: apenas fade in simples, sem movimento ou blur
-
-#### StaggerContainer
-
-Container para aplicar stagger animations em elementos filhos.
-
-```typescript
-interface StaggerContainerProps {
-  children: React.ReactNode;
-  staggerDelay?: number; // Delay entre elementos em segundos (default: 0.08)
-  initialDelay?: number; // Delay inicial antes do primeiro elemento (default: 0)
-  className?: string;
-}
-
-function StaggerContainer(props: StaggerContainerProps): JSX.Element
-```
-
-**Implementação**: Usa `motion.div` com `variants` para aplicar stagger automático aos filhos.
-
-#### ParallaxElement
-
-Wrapper para aplicar parallax effect em elementos.
-
-```typescript
-interface ParallaxElementProps {
-  children: React.ReactNode;
-  speed?: number; // Velocidade do parallax (default: 0.5)
-  direction?: "vertical" | "horizontal";
-  className?: string;
-}
-
-function ParallaxElement(props: ParallaxElementProps): JSX.Element
-```
-
-**Comportamento**:
-- Normal: movimento parallax suave
-- Reduced Motion: sem movimento, elemento estático
-
-#### PageTransition
-
-Wrapper para transições entre páginas.
-
-```typescript
-interface PageTransitionProps {
-  children: React.ReactNode;
-}
-
-function PageTransition(props: PageTransitionProps): JSX.Element
-```
-
-**Comportamento**:
-- Normal: fade in de 0.4s com ease-out
-- Reduced Motion: fade in de 0.15s
-
-#### ImageReveal
-
-Componente para reveal animado de imagens.
-
-```typescript
-interface ImageRevealProps {
-  src: string;
-  alt: string;
-  width?: number;
-  height?: number;
-  className?: string;
-  priority?: boolean;
-}
-
-function ImageReveal(props: ImageRevealProps): JSX.Element
-```
-
-**Comportamento**:
-- Normal: clip-path reveal + fade in + scale (0.98 → 1) + blur (8px → 0px), duração 0.9s
-- Reduced Motion: apenas fade in simples
-
-#### TextReveal
-
-Componente para reveal animado de textos por palavra.
-
-```typescript
-interface TextRevealProps {
-  text: string;
-  as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span"; // Tag HTML (default: "p")
-  staggerDelay?: number; // Delay entre palavras (default: 0.04)
-  className?: string;
-}
-
-function TextReveal(props: TextRevealProps): JSX.Element
-```
-
-**Comportamento**:
-- Normal: cada palavra com blur (6px → 0px) + scale (0.95 → 1) + clip-path slide horizontal
-- Reduced Motion: texto completo com fade in simples
-
-#### CustomCursor
-
-Componente para cursor customizado.
-
-```typescript
-interface CustomCursorProps {
-  size?: number; // Tamanho base do cursor (default: 40)
-  expandedSize?: number; // Tamanho expandido (default: 60)
-  color?: string; // Cor do cursor (default: "var(--slash)")
-}
-
-function CustomCursor(props: CustomCursorProps): JSX.Element
-```
-
-**Comportamento**:
-- Desktop: cursor customizado com smooth delay, expande sobre interativos
-- Touch devices: cursor padrão do sistema
-- Reduced Motion: cursor padrão do sistema
-
-### Providers
-
-#### LenisProvider
-
-Provider para smooth scroll global.
-
-```typescript
-interface LenisProviderProps {
-  children: React.ReactNode;
-  options?: {
-    duration?: number; // Duração do smooth scroll (default: 1.2)
-    easing?: number[]; // Curva de easing (default: [0.25, 0.0, 0.35, 1.0])
-    smoothWheel?: boolean; // Smooth wheel scroll (default: true)
-    smoothTouch?: boolean; // Smooth touch scroll (default: false)
-  };
-}
-
-function LenisProvider(props: LenisProviderProps): JSX.Element
-```
-
-**Implementação**: Inicializa Lenis, sincroniza com RAF, fornece instância via context.
-
-#### AnimationProvider
-
-Provider para configurações globais de animação.
-
-```typescript
-interface AnimationConfig {
-  reducedMotion: boolean;
-  easings: {
-    easeOut: string;
-    easeIn: string;
-    spring: { stiffness: number; damping: number };
-  };
-  durations: {
-    fast: number;
-    normal: number;
-    slow: number;
-  };
-}
-
-interface AnimationProviderProps {
-  children: React.ReactNode;
-}
-
-function AnimationProvider(props: AnimationProviderProps): JSX.Element
-function useAnimationConfig(): AnimationConfig
-```
-
-**Implementação**: Detecta reduced motion, fornece configurações centralizadas via context.
-
-#### CursorProvider
-
-Provider para cursor customizado.
-
-```typescript
-interface CursorProviderProps {
-  children: React.ReactNode;
-}
-
-function CursorProvider(props: CursorProviderProps): JSX.Element
-function useCursor(): {
-  setExpanded: (expanded: boolean) => void;
-  setColor: (color: string) => void;
-}
-```
-
-**Implementação**: Gerencia estado do cursor, fornece métodos para controle via context.
-
-## Data Models
-
-### Animation Configuration
-
-Configurações centralizadas para todas as animações.
-
-```typescript
-export const animationConfig = {
-  // Easing curves
-  easings: {
-    easeOut: "cubic-bezier(0.16, 1, 0.3, 1)",
-    easeIn: "cubic-bezier(0.4, 0, 1, 1)",
-    spring: {
-      default: { stiffness: 200, damping: 20 },
-      hover: { stiffness: 260, damping: 20 },
-      magnetic: { stiffness: 150, damping: 15 },
-      gentle: { stiffness: 60, damping: 20 },
-    },
-  },
-
-  // Durations (in seconds)
-  durations: {
-    instant: 0.15,
-    fast: 0.3,
-    normal: 0.6,
-    slow: 0.9,
-    verySlow: 1.2,
-  },
-
-  // Scroll trigger
-  scrollTrigger: {
-    threshold: 0.2,
-    once: true,
-    margin: "0px",
-  },
-
-  // Stagger
-  stagger: {
-    default: 0.08,
-    fast: 0.04,
-    slow: 0.12,
-    reducedMotion: 0.03,
-  },
-
-  // Parallax
-  parallax: {
-    speed: 0.5, // 50% mais lento que scroll normal
-    maxDistance: 100, // pixels
-  },
-
-  // Magnetic effect
-  magnetic: {
-    radius: 80, // pixels
-    strength: 12, // max movement in pixels
-  },
-
-  // Cursor
-  cursor: {
-    size: 40,
-    expandedSize: 60,
-    followDelay: 0.1,
-  },
-
-  // Reduced motion overrides
-  reducedMotion: {
-    duration: 0.15,
-    stagger: 0.03,
-    disableParallax: true,
-    disableMagnetic: true,
-    disableCursor: true,
-  },
-} as const;
-```
-
-### Variant Presets
-
-Presets de variants do Framer Motion para animações comuns.
-
-```typescript
-export const variants = {
-  // Fade in
-  fadeIn: {
-    initial: { opacity: 0 },
-    animate: { opacity: 1 },
-    exit: { opacity: 0 },
-  },
-
-  // Fade in + slide up
-  fadeInUp: {
-    initial: { opacity: 0, y: 24, filter: "blur(8px)" },
-    animate: { opacity: 1, y: 0, filter: "blur(0px)" },
-    exit: { opacity: 0, y: -24, filter: "blur(8px)" },
-  },
-
-  // Fade in + slide down
-  fadeInDown: {
-    initial: { opacity: 0, y: -24, filter: "blur(8px)" },
-    animate: { opacity: 1, y: 0, filter: "blur(0px)" },
-    exit: { opacity: 0, y: 24, filter: "blur(8px)" },
-  },
-
-  // Fade in + slide left
-  fadeInLeft: {
-    initial: { opacity: 0, x: 24, filter: "blur(8px)" },
-    animate: { opacity: 1, x: 0, filter: "blur(0px)" },
-    exit: { opacity: 0, x: -24, filter: "blur(8px)" },
-  },
-
-  // Fade in + slide right
-  fadeInRight: {
-    initial: { opacity: 0, x: -24, filter: "blur(8px)" },
-    animate: { opacity: 1, x: 0, filter: "blur(0px)" },
-    exit: { opacity: 0, x: 24, filter: "blur(8px)" },
-  },
-
-  // Scale in
-  scaleIn: {
-    initial: { opacity: 0, scale: 0.95 },
-    animate: { opacity: 1, scale: 1 },
-    exit: { opacity: 0, scale: 0.95 },
-  },
-
-  // Image reveal
-  imageReveal: {
-    initial: {
-      opacity: 0,
-      scale: 0.98,
-      filter: "blur(8px)",
-      clipPath: "inset(0 100% 0 0)",
-    },
-    animate: {
-      opacity: 1,
-      scale: 1,
-      filter: "blur(0px)",
-      clipPath: "inset(0 0% 0 0)",
-    },
-  },
-
-  // Text reveal (per word)
-  textReveal: {
-    initial: {
-      opacity: 0,
-      scale: 0.95,
-      filter: "blur(6px)",
-      clipPath: "inset(0 100% 0 0)",
-    },
-    animate: {
-      opacity: 1,
-      scale: 1,
-      filter: "blur(0px)",
-      clipPath: "inset(0 0% 0 0)",
-    },
-  },
-
-  // Stagger container
-  staggerContainer: {
-    animate: {
-      transition: {
-        staggerChildren: 0.08,
-      },
-    },
-  },
-
-  // Reduced motion variants
-  reducedMotion: {
-    fadeIn: {
-      initial: { opacity: 0 },
-      animate: { opacity: 1 },
-      exit: { opacity: 0 },
-    },
-  },
-} as const;
-```
-

.kiro/specs/premium-animations/requirements.md

@@ -1,218 +0,0 @@
-# Requirements Document
-
-## Introduction
-
-Este documento define os requisitos para adicionar animações premium ao portfolio evandro.dev.br, inspiradas no estilo suave e elegante do site on.energy. O objetivo é elevar a experiência visual mantendo a identidade atual (cores, tipografia Monument Extended, paleta --slash #ccff00) e adicionando transições fluidas, scroll-triggered animations, parallax sutil e animações de hover sofisticadas.
-
-## Glossary
-
-- **Animation_System**: Sistema responsável por gerenciar e executar todas as animações do portfolio
-- **Hero_Component**: Componente principal da página inicial que exibe o nome e informações do desenvolvedor
-- **Scroll_Trigger**: Mecanismo que detecta quando elementos entram no viewport para iniciar animações
-- **Parallax_Effect**: Efeito visual onde elementos se movem em velocidades diferentes durante o scroll
-- **Stagger_Animation**: Animação sequencial onde elementos aparecem um após o outro com delay
-- **Reduced_Motion**: Preferência do usuário para reduzir ou desabilitar animações (acessibilidade)
-- **Design_System**: Conjunto de componentes e estilos reutilizáveis (ds-card, ds-section, etc)
-- **Viewport**: Área visível da página no navegador do usuário
-- **Ease_Curve**: Função matemática que define a aceleração/desaceleração de uma animação
-
-## Requirements
-
-### Requirement 1: Remover Animação de Logo do Hero
-
-**User Story:** Como usuário, quero ver apenas o texto "evandro.dev.br" no Hero sem alternância com logo, para ter uma experiência mais direta e focada.
-
-#### Acceptance Criteria
-
-1. THE Hero_Component SHALL exibir apenas o texto "evandro.dev.br" sem alternar com a logo
-2. THE Hero_Component SHALL remover a fase "logo" do ciclo de animação
-3. THE Hero_Component SHALL manter a animação de digitação (typing) do texto
-4. THE Hero_Component SHALL manter todas as outras funcionalidades existentes (botões, links sociais, status)
-5. WHEN a página carrega, THE Hero_Component SHALL iniciar diretamente com a animação de digitação
-
-### Requirement 2: Implementar Scroll-Triggered Animations
-
-**User Story:** Como usuário, quero ver elementos aparecerem suavemente conforme faço scroll, para ter uma experiência visual mais envolvente e premium.
-
-#### Acceptance Criteria
-
-1. WHEN um elemento entra no Viewport, THE Animation_System SHALL iniciar uma animação de fade in + slide up
-2. THE Animation_System SHALL usar uma curva de ease-out suave (cubic-bezier(0.16, 1, 0.3, 1))
-3. THE Animation_System SHALL aplicar scroll-triggered animations em seções (About, Skills, Experience, Projects, WorkModalities, Contact)
-4. THE Animation_System SHALL aplicar scroll-triggered animations em cards dentro das seções
-5. THE Animation_System SHALL detectar elementos quando 20% deles estiverem visíveis no Viewport
-6. THE Animation_System SHALL executar cada animação apenas uma vez (once: true)
-7. IF Reduced_Motion está ativo, THEN THE Animation_System SHALL usar apenas fade simples sem movimento
-
-### Requirement 3: Implementar Stagger Animations
-
-**User Story:** Como usuário, quero ver elementos de uma lista aparecerem sequencialmente, para ter uma sensação de fluidez e ritmo visual.
-
-#### Acceptance Criteria
-
-1. WHEN múltiplos cards aparecem em uma seção, THE Animation_System SHALL aplicar stagger delays entre eles
-2. THE Animation_System SHALL usar delay de 0.08s entre elementos consecutivos
-3. THE Animation_System SHALL aplicar stagger em grids de cards (Projects, Skills, Experience)
-4. THE Animation_System SHALL aplicar stagger em listas de tags e métricas
-5. IF Reduced_Motion está ativo, THEN THE Animation_System SHALL reduzir o delay para 0.03s
-
-### Requirement 4: Implementar Parallax Sutil em Backgrounds
-
-**User Story:** Como usuário, quero ver backgrounds com movimento parallax discreto durante o scroll, para adicionar profundidade visual sem distração.
-
-#### Acceptance Criteria
-
-1. WHEN o usuário faz scroll, THE Animation_System SHALL aplicar Parallax_Effect em backgrounds decorativos
-2. THE Parallax_Effect SHALL mover elementos em velocidade 30% mais lenta que o scroll normal
-3. THE Animation_System SHALL aplicar parallax no grid de fundo do Hero
-4. THE Animation_System SHALL aplicar parallax no gradiente radial do Hero
-5. THE Parallax_Effect SHALL ser sutil e não interferir na legibilidade do conteúdo
-6. IF Reduced_Motion está ativo, THEN THE Animation_System SHALL desabilitar completamente o Parallax_Effect
-
-### Requirement 5: Implementar Animações de Hover Sofisticadas
-
-**User Story:** Como usuário, quero ver animações suaves e elegantes ao passar o mouse sobre elementos interativos, para ter feedback visual premium.
-
-#### Acceptance Criteria
-
-1. WHEN o usuário passa o mouse sobre um card, THE Animation_System SHALL aplicar lift effect (translateY: -6px)
-2. WHEN o usuário passa o mouse sobre um card, THE Animation_System SHALL aumentar a sombra suavemente
-3. WHEN o usuário passa o mouse sobre botões, THE Animation_System SHALL aplicar scale de 1.03
-4. WHEN o usuário passa o mouse sobre links sociais, THE Animation_System SHALL aplicar rotação sutil (-3deg a 3deg)
-5. THE Animation_System SHALL usar spring physics para animações de hover (stiffness: 200, damping: 20)
-6. THE Animation_System SHALL adicionar glow effect sutil em elementos com cor --slash ao hover
-7. IF Reduced_Motion está ativo, THEN THE Animation_System SHALL usar apenas mudanças de opacidade
-
-### Requirement 6: Implementar Transições de Página Suaves
-
-**User Story:** Como desenvolvedor, quero ter um sistema de transições entre páginas preparado, para futuras expansões do portfolio com múltiplas páginas.
-
-#### Acceptance Criteria
-
-1. THE Animation_System SHALL criar um componente PageTransition reutilizável
-2. WHEN uma página carrega, THE PageTransition SHALL aplicar fade in de 0.4s
-3. THE PageTransition SHALL usar ease-out curve para entrada
-4. THE PageTransition SHALL ser compatível com Next.js App Router
-5. IF Reduced_Motion está ativo, THEN THE PageTransition SHALL reduzir duração para 0.15s
-
-### Requirement 7: Implementar Animações de Reveal em Imagens
-
-**User Story:** Como usuário, quero ver imagens aparecerem com efeito de reveal elegante, para ter uma experiência visual mais sofisticada.
-
-#### Acceptance Criteria
-
-1. WHEN uma imagem entra no Viewport, THE Animation_System SHALL aplicar clip-path reveal animation
-2. THE Animation_System SHALL usar clip-path: inset() para criar efeito de cortina
-3. THE Animation_System SHALL combinar reveal com fade in e scale sutil (0.98 → 1)
-4. THE Animation_System SHALL aplicar blur inicial (8px) que remove durante o reveal
-5. THE Animation_System SHALL usar duração de 0.9s para o reveal completo
-6. IF Reduced_Motion está ativo, THEN THE Animation_System SHALL usar apenas fade simples
-
-### Requirement 8: Implementar Animações de Reveal em Textos
-
-**User Story:** Como usuário, quero ver títulos e textos aparecerem com efeito de reveal por caractere ou palavra, para ter uma experiência tipográfica premium.
-
-#### Acceptance Criteria
-
-1. WHEN um título de seção entra no Viewport, THE Animation_System SHALL aplicar reveal por palavra
-2. THE Animation_System SHALL usar stagger de 0.04s entre palavras
-3. THE Animation_System SHALL aplicar blur inicial (6px) e scale (0.95) em cada palavra
-4. THE Animation_System SHALL usar clip-path: inset(0 100% 0 0) para efeito de slide horizontal
-5. THE Animation_System SHALL aplicar reveal em títulos de seção (ds-section-title)
-6. IF Reduced_Motion está ativo, THEN THE Animation_System SHALL mostrar texto completo com fade simples
-
-### Requirement 9: Otimizar Espaçamentos
-
-**User Story:** Como usuário, quero ver uma página sem espaços vazios desnecessários, para ter uma experiência visual mais compacta e profissional.
-
-#### Acceptance Criteria
-
-1. THE Design_System SHALL reduzir padding vertical das seções de var(--sp-20) para var(--sp-16)
-2. THE Design_System SHALL reduzir gap entre cards de var(--sp-6) para var(--sp-5)
-3. THE Hero_Component SHALL reduzir min-height para otimizar espaço vertical
-4. THE Design_System SHALL manter espaçamentos responsivos em mobile
-5. THE Design_System SHALL garantir que mudanças não quebrem o layout existente
-
-### Requirement 10: Garantir Performance e Acessibilidade
-
-**User Story:** Como usuário com preferência de movimento reduzido, quero que o site respeite minhas configurações de acessibilidade, para ter uma experiência confortável.
-
-#### Acceptance Criteria
-
-1. THE Animation_System SHALL detectar prefers-reduced-motion do sistema operacional
-2. IF Reduced_Motion está ativo, THEN THE Animation_System SHALL desabilitar todas as animações complexas
-3. IF Reduced_Motion está ativo, THEN THE Animation_System SHALL manter apenas transições de opacidade simples
-4. THE Animation_System SHALL usar will-change apenas durante animações ativas
-5. THE Animation_System SHALL remover will-change após conclusão das animações
-6. THE Animation_System SHALL usar transform e opacity para animações (GPU-accelerated)
-7. THE Animation_System SHALL evitar animações de propriedades que causam reflow (width, height, margin)
-8. THE Animation_System SHALL limitar animações simultâneas para manter 60fps
-
-### Requirement 11: Implementar Smooth Scroll Global
-
-**User Story:** Como usuário, quero ter scroll suave e fluido em toda a página, para ter uma experiência de navegação premium.
-
-#### Acceptance Criteria
-
-1. THE Animation_System SHALL integrar Lenis para smooth scroll global
-2. THE Animation_System SHALL configurar Lenis com duração de 1.2s
-3. THE Animation_System SHALL usar easing: [0.25, 0.0, 0.35, 1.0] para o scroll
-4. THE Animation_System SHALL sincronizar Lenis com requestAnimationFrame
-5. THE Animation_System SHALL aplicar smooth scroll em navegação por âncoras
-6. IF Reduced_Motion está ativo, THEN THE Animation_System SHALL desabilitar smooth scroll
-
-### Requirement 12: Implementar Magnetic Effect em Botões
-
-**User Story:** Como usuário, quero ver botões principais com efeito magnético sutil ao aproximar o cursor, para ter uma experiência interativa premium.
-
-#### Acceptance Criteria
-
-1. WHEN o cursor está próximo (raio de 80px) de um botão principal, THE Animation_System SHALL aplicar magnetic effect
-2. THE Animation_System SHALL mover o botão em direção ao cursor proporcionalmente à distância
-3. THE Animation_System SHALL limitar o movimento máximo a 12px em qualquer direção
-4. THE Animation_System SHALL usar spring physics (stiffness: 150, damping: 15)
-5. WHEN o cursor sai da área de influência, THE Animation_System SHALL retornar o botão à posição original
-6. THE Animation_System SHALL aplicar magnetic effect apenas em botões CTA principais
-7. IF Reduced_Motion está ativo, THEN THE Animation_System SHALL desabilitar magnetic effect
-
-### Requirement 13: Implementar Cursor Customizado
-
-**User Story:** Como usuário, quero ver um cursor customizado que reage aos elementos da página, para ter uma experiência visual mais imersiva e premium.
-
-#### Acceptance Criteria
-
-1. THE Animation_System SHALL criar um cursor customizado circular de 40px
-2. THE Animation_System SHALL seguir a posição do mouse com smooth delay de 0.1s
-3. WHEN o cursor está sobre elementos interativos, THE Animation_System SHALL expandir o cursor para 60px
-4. WHEN o cursor está sobre links, THE Animation_System SHALL mudar a cor do cursor para var(--slash)
-5. THE Animation_System SHALL usar mix-blend-mode: difference para contraste automático
-6. THE Animation_System SHALL ocultar o cursor padrão do sistema
-7. THE Animation_System SHALL mostrar cursor padrão em dispositivos touch
-8. IF Reduced_Motion está ativo, THEN THE Animation_System SHALL desabilitar cursor customizado
-
-### Requirement 14: Implementar Loading States Animados
-
-**User Story:** Como usuário, quero ver estados de loading elegantes durante carregamento de dados, para ter feedback visual claro do progresso.
-
-#### Acceptance Criteria
-
-1. WHEN dados estão carregando, THE Animation_System SHALL exibir skeleton screens animados
-2. THE Animation_System SHALL usar shimmer effect nos skeletons
-3. THE Animation_System SHALL manter a estrutura visual da seção durante loading
-4. THE Animation_System SHALL aplicar fade out suave ao remover skeleton (0.3s)
-5. THE Animation_System SHALL aplicar fade in + slide up ao mostrar conteúdo real
-6. IF Reduced_Motion está ativo, THEN THE Animation_System SHALL usar pulse simples sem shimmer
-
-### Requirement 15: Implementar Micro-interactions em Formulários
-
-**User Story:** Como usuário, quero ver feedback visual imediato ao interagir com campos de formulário, para ter uma experiência de preenchimento mais agradável.
-
-#### Acceptance Criteria
-
-1. WHEN um campo recebe foco, THE Animation_System SHALL aplicar scale de 1.01 e glow effect
-2. WHEN o usuário digita, THE Animation_System SHALL aplicar pulse sutil no label
-3. WHEN validação ocorre, THE Animation_System SHALL aplicar shake animation em erros
-4. WHEN validação é bem-sucedida, THE Animation_System SHALL aplicar checkmark animado
-5. THE Animation_System SHALL usar spring physics para transições de estado
-6. IF Reduced_Motion está ativo, THEN THE Animation_System SHALL usar apenas mudanças de cor
-

.kiro/specs/premium-animations/tasks.md

@@ -1,419 +0,0 @@
-# Implementation Plan: Premium Animations
-
-## Overview
-
-Este plano implementa animações premium no portfolio evandro.dev.br usando Framer Motion e Lenis. A implementação segue uma abordagem incremental, começando com setup e quick wins (remoção do logo), seguindo para scroll-triggered animations (maior impacto visual), hover effects, e finalmente features avançadas como parallax, magnetic buttons e cursor customizado.
-
-Tecnologias: React 19.1.0, Next.js 15.5.9, TypeScript, Framer Motion 12.23.12, Lenis 1.3.18, Tailwind CSS 4.
-
-## Tasks
-
-- [x] 1. Setup inicial do sistema de animações
-  - [x] 1.1 Instalar dependências (Framer Motion 12.23.12, Lenis 1.3.18)
-    - Executar `npm install [email protected] [email protected]`
-    - Verificar instalação no package.json
-    - _Requirements: 2, 11_
-  
-  - [x] 1.2 Criar arquivo de configuração centralizada
-    - Criar `app/lib/animations/config.ts` com animationConfig (easings, durations, scrollTrigger, stagger, parallax, magnetic, cursor, reducedMotion)
-    - Criar `app/lib/animations/variants.ts` com variant presets (fadeIn, fadeInUp, fadeInDown, fadeInLeft, fadeInRight, scaleIn, imageReveal, textReveal, staggerContainer, reducedMotion)
-    - _Requirements: 2, 3, 4, 5, 7, 8, 10_
-  
-  - [x] 1.3 Criar hook useReducedMotion
-    - Criar `app/hooks/useReducedMotion.ts` que detecta prefers-reduced-motion
-    - Usar hook do Framer Motion como base
-    - Retornar boolean indicando se reduced motion está ativo
-    - _Requirements: 10_
-  
-  - [x] 1.4 Criar AnimationProvider
-    - Criar `app/providers/AnimationProvider.tsx` com context para configurações globais
-    - Fornecer reducedMotion, easings, durations via context
-    - Criar hook useAnimationConfig para consumir o context
-    - _Requirements: 10_
-  
-  - [x] 1.5 Integrar AnimationProvider no root layout
-    - Adicionar AnimationProvider em `app/layout.tsx` envolvendo children
-    - Garantir que provider está acima de todos os componentes
-    - _Requirements: 10_
-
-- [x] 2. Quick win: Remover logo do Hero
-  - [x] 2.1 Remover fase logo do Hero component
-    - Editar `app/components/Hero.tsx` removendo a fase "logo" do ciclo de animação
-    - Manter apenas a animação de digitação do texto "evandro.dev.br"
-    - Garantir que animação inicia diretamente com typing
-    - Manter todas as outras funcionalidades (botões, links sociais, status)
-    - _Requirements: 1_
-  
-  - [x] 2.2 Escrever testes para Hero sem logo
-    - Testar que logo não é renderizada
-    - Testar que texto "evandro.dev.br" é exibido
-    - Testar que animação de typing funciona
-    - _Requirements: 1_
-
-- [x] 3. Checkpoint - Verificar setup e quick win
-  - Ensure all tests pass, ask the user if questions arise.
-
-- [ ] 4. Implementar scroll-triggered animations (core)
-  - [~] 4.1 Criar hook useScrollTrigger
-    - Criar `app/hooks/useScrollTrigger.ts` wrapper sobre useInView do Framer Motion
-    - Aceitar options: threshold (default 0.2), once (default true), margin (default "0px")
-    - Retornar ref, isInView, entry
-    - _Requirements: 2_
-  
-  - [~] 4.2 Criar componente ScrollReveal
-    - Criar `app/components/animations/ScrollReveal.tsx`
-    - Aceitar props: children, direction (up/down/left/right), distance (default 24), duration (default 0.6), delay (default 0), threshold (default 0.2), once (default true), className
-    - Usar useScrollTrigger e useReducedMotion
-    - Normal: fade in + slide + blur inicial
-    - Reduced motion: apenas fade in simples
-    - _Requirements: 2, 10_
-  
-  - [~] 4.3 Escrever testes para ScrollReveal
-    - Testar animação normal (fade + slide + blur)
-    - Testar reduced motion (apenas fade)
-    - Testar threshold e once
-    - _Requirements: 2, 10_
-
-- [ ] 5. Implementar stagger animations
-  - [~] 5.1 Criar componente StaggerContainer
-    - Criar `app/components/animations/StaggerContainer.tsx`
-    - Aceitar props: children, staggerDelay (default 0.08), initialDelay (default 0), className
-    - Usar motion.div com variants para stagger automático
-    - Ajustar delay para 0.03s se reduced motion ativo
-    - _Requirements: 3, 10_
-  
-  - [~] 5.2 Escrever testes para StaggerContainer
-    - Testar stagger delay normal (0.08s)
-    - Testar stagger delay com reduced motion (0.03s)
-    - _Requirements: 3, 10_
-
-- [ ] 6. Aplicar scroll animations nas seções principais
-  - [~] 6.1 Envolver seções com ScrollReveal
-    - Aplicar ScrollReveal em About, Skills, Experience, Projects, WorkModalities, Contact
-    - Usar direction="up" e configurações padrão
-    - _Requirements: 2_
-  
-  - [~] 6.2 Aplicar StaggerContainer em grids de cards
-    - Aplicar em Projects grid
-    - Aplicar em Skills grid
-    - Aplicar em Experience list
-    - _Requirements: 3_
-  
-  - [~] 6.3 Aplicar stagger em listas de tags e métricas
-    - Identificar listas de tags em Projects
-    - Identificar métricas em seções
-    - Envolver com StaggerContainer
-    - _Requirements: 3_
-
-- [~] 7. Checkpoint - Verificar scroll animations
-  - Ensure all tests pass, ask the user if questions arise.
-
-- [ ] 8. Implementar hover effects sofisticados
-  - [~] 8.1 Criar hover effects para cards
-    - Adicionar motion.div wrapper em componentes de card
-    - Implementar lift effect (translateY: -6px) no hover
-    - Implementar aumento de sombra no hover
-    - Usar spring physics (stiffness: 200, damping: 20)
-    - Reduced motion: apenas mudança de opacidade
-    - _Requirements: 5, 10_
-  
-  - [~] 8.2 Criar hover effects para botões
-    - Adicionar motion wrapper em botões principais
-    - Implementar scale de 1.03 no hover
-    - Adicionar glow effect sutil em elementos com cor --slash
-    - Usar spring physics
-    - Reduced motion: apenas mudança de opacidade
-    - _Requirements: 5, 10_
-  
-  - [~] 8.3 Criar hover effects para links sociais
-    - Adicionar motion wrapper em links sociais
-    - Implementar rotação sutil (-3deg a 3deg) no hover
-    - Usar spring physics
-    - Reduced motion: apenas mudança de opacidade
-    - _Requirements: 5, 10_
-  
-  - [~] 8.4 Escrever testes para hover effects
-    - Testar lift effect em cards
-    - Testar scale em botões
-    - Testar rotação em links sociais
-    - Testar reduced motion (apenas opacidade)
-    - _Requirements: 5, 10_
-
-- [ ] 9. Implementar smooth scroll global com Lenis
-  - [~] 9.1 Criar LenisProvider
-    - Criar `app/providers/LenisProvider.tsx`
-    - Inicializar Lenis com duration: 1.2, easing: [0.25, 0.0, 0.35, 1.0]
-    - Sincronizar com requestAnimationFrame
-    - Fornecer instância via context
-    - Desabilitar se reduced motion ativo
-    - _Requirements: 11, 10_
-  
-  - [~] 9.2 Integrar LenisProvider no root layout
-    - Adicionar LenisProvider em `app/layout.tsx`
-    - Garantir que está acima de AnimationProvider
-    - _Requirements: 11_
-  
-  - [~] 9.3 Aplicar smooth scroll em navegação por âncoras
-    - Identificar links de navegação interna
-    - Configurar Lenis para smooth scroll em âncoras
-    - _Requirements: 11_
-  
-  - [~] 9.4 Escrever testes para smooth scroll
-    - Testar inicialização do Lenis
-    - Testar desabilitação com reduced motion
-    - _Requirements: 11, 10_
-
-- [~] 10. Checkpoint - Verificar hover effects e smooth scroll
-  - Ensure all tests pass, ask the user if questions arise.
-
-- [ ] 11. Implementar parallax sutil em backgrounds
-  - [~] 11.1 Criar hook useParallax
-    - Criar `app/hooks/useParallax.ts`
-    - Usar useScroll e useTransform do Framer Motion
-    - Aceitar options: speed (default 0.5), direction (vertical/horizontal), disabled
-    - Retornar ref e style
-    - _Requirements: 4_
-  
-  - [~] 11.2 Criar componente ParallaxElement
-    - Criar `app/components/animations/ParallaxElement.tsx`
-    - Usar useParallax e useReducedMotion
-    - Normal: movimento parallax suave
-    - Reduced motion: elemento estático
-    - _Requirements: 4, 10_
-  
-  - [~] 11.3 Aplicar parallax no Hero
-    - Aplicar ParallaxElement no grid de fundo do Hero
-    - Aplicar ParallaxElement no gradiente radial do Hero
-    - Usar speed: 0.3 (30% mais lento)
-    - _Requirements: 4_
-  
-  - [~] 11.4 Escrever testes para parallax
-    - Testar cálculo de posição baseado em scroll
-    - Testar desabilitação com reduced motion
-    - _Requirements: 4, 10_
-
-- [ ] 12. Implementar reveal animado de imagens
-  - [~] 12.1 Criar componente ImageReveal
-    - Criar `app/components/animations/ImageReveal.tsx`
-    - Implementar clip-path reveal + fade in + scale (0.98 → 1) + blur (8px → 0px)
-    - Duração: 0.9s
-    - Usar useScrollTrigger para disparar quando entra no viewport
-    - Reduced motion: apenas fade in simples
-    - _Requirements: 7, 10_
-  
-  - [~] 12.2 Aplicar ImageReveal em imagens do portfolio
-    - Identificar imagens em Projects
-    - Identificar imagens em About
-    - Substituir tags img por ImageReveal
-    - _Requirements: 7_
-  
-  - [~] 12.3 Escrever testes para ImageReveal
-    - Testar clip-path reveal animation
-    - Testar reduced motion (apenas fade)
-    - _Requirements: 7, 10_
-
-- [ ] 13. Implementar reveal animado de textos
-  - [~] 13.1 Criar componente TextReveal
-    - Criar `app/components/animations/TextReveal.tsx`
-    - Implementar reveal por palavra com blur (6px → 0px) + scale (0.95 → 1) + clip-path slide
-    - Stagger delay: 0.04s entre palavras
-    - Usar useScrollTrigger para disparar quando entra no viewport
-    - Reduced motion: texto completo com fade in simples
-    - _Requirements: 8, 10_
-  
-  - [~] 13.2 Aplicar TextReveal em títulos de seção
-    - Identificar títulos com classe ds-section-title
-    - Substituir por TextReveal component
-    - _Requirements: 8_
-  
-  - [~] 13.3 Escrever testes para TextReveal
-    - Testar reveal por palavra
-    - Testar stagger delay
-    - Testar reduced motion (fade simples)
-    - _Requirements: 8, 10_
-
-- [~] 14. Checkpoint - Verificar parallax e reveals
-  - Ensure all tests pass, ask the user if questions arise.
-
-- [ ] 15. Implementar transições de página
-  - [~] 15.1 Criar componente PageTransition
-    - Criar `app/components/animations/PageTransition.tsx`
-    - Implementar fade in de 0.4s com ease-out
-    - Reduced motion: fade in de 0.15s
-    - Compatível com Next.js App Router
-    - _Requirements: 6, 10_
-  
-  - [~] 15.2 Aplicar PageTransition nas páginas
-    - Envolver conteúdo de cada página com PageTransition
-    - Garantir compatibilidade com App Router
-    - _Requirements: 6_
-  
-  - [~] 15.3 Escrever testes para PageTransition
-    - Testar fade in normal (0.4s)
-    - Testar fade in com reduced motion (0.15s)
-    - _Requirements: 6, 10_
-
-- [ ] 16. Implementar magnetic effect em botões
-  - [~] 16.1 Criar hook useMagneticEffect
-    - Criar `app/hooks/useMagneticEffect.ts`
-    - Rastrear posição do mouse
-    - Calcular distância ao elemento
-    - Aplicar transform proporcional com spring physics (stiffness: 150, damping: 15)
-    - Aceitar options: radius (default 80), strength (default 12), disabled
-    - Retornar ref e style
-    - _Requirements: 12_
-  
-  - [~] 16.2 Aplicar magnetic effect em botões CTA principais
-    - Identificar botões CTA principais
-    - Adicionar useMagneticEffect
-    - Desabilitar se reduced motion ativo
-    - _Requirements: 12, 10_
-  
-  - [~] 16.3 Escrever testes para magnetic effect
-    - Testar cálculo de distância
-    - Testar movimento proporcional
-    - Testar desabilitação com reduced motion
-    - _Requirements: 12, 10_
-
-- [ ] 17. Implementar cursor customizado
-  - [~] 17.1 Criar CursorProvider e CustomCursor component
-    - Criar `app/providers/CursorProvider.tsx` com context
-    - Criar `app/components/animations/CustomCursor.tsx`
-    - Implementar cursor circular de 40px que segue o mouse com delay de 0.1s
-    - Expandir para 60px sobre elementos interativos
-    - Mudar cor para var(--slash) sobre links
-    - Usar mix-blend-mode: difference
-    - Ocultar cursor padrão do sistema
-    - Mostrar cursor padrão em touch devices
-    - Desabilitar se reduced motion ativo
-    - _Requirements: 13, 10_
-  
-  - [~] 17.2 Integrar CursorProvider no root layout
-    - Adicionar CursorProvider em `app/layout.tsx`
-    - Garantir que CustomCursor é renderizado
-    - _Requirements: 13_
-  
-  - [~] 17.3 Adicionar data attributes em elementos interativos
-    - Adicionar data-cursor="expand" em botões e cards
-    - Adicionar data-cursor="link" em links
-    - Configurar CustomCursor para reagir aos data attributes
-    - _Requirements: 13_
-  
-  - [~] 17.4 Escrever testes para cursor customizado
-    - Testar seguimento do mouse
-    - Testar expansão sobre interativos
-    - Testar mudança de cor sobre links
-    - Testar desabilitação em touch devices
-    - Testar desabilitação com reduced motion
-    - _Requirements: 13, 10_
-
-- [~] 18. Checkpoint - Verificar features avançadas
-  - Ensure all tests pass, ask the user if questions arise.
-
-- [ ] 19. Implementar loading states animados
-  - [~] 19.1 Criar componente SkeletonLoader
-    - Criar `app/components/animations/SkeletonLoader.tsx`
-    - Implementar shimmer effect
-    - Manter estrutura visual da seção
-    - Reduced motion: pulse simples sem shimmer
-    - _Requirements: 14, 10_
-  
-  - [~] 19.2 Criar transições de loading para conteúdo real
-    - Implementar fade out suave do skeleton (0.3s)
-    - Implementar fade in + slide up do conteúdo real
-    - _Requirements: 14_
-  
-  - [~] 19.3 Aplicar loading states em seções com dados dinâmicos
-    - Identificar seções que carregam dados
-    - Adicionar SkeletonLoader como fallback
-    - _Requirements: 14_
-  
-  - [~] 19.4 Escrever testes para loading states
-    - Testar shimmer effect
-    - Testar transição de skeleton para conteúdo
-    - Testar reduced motion (pulse simples)
-    - _Requirements: 14, 10_
-
-- [ ] 20. Implementar micro-interactions em formulários
-  - [~] 20.1 Criar animações de foco em campos
-    - Adicionar motion wrapper em campos de formulário
-    - Implementar scale de 1.01 e glow effect no foco
-    - Usar spring physics
-    - _Requirements: 15_
-  
-  - [~] 20.2 Criar animações de digitação
-    - Implementar pulse sutil no label quando usuário digita
-    - Usar spring physics
-    - _Requirements: 15_
-  
-  - [~] 20.3 Criar animações de validação
-    - Implementar shake animation para erros
-    - Implementar checkmark animado para sucesso
-    - Usar spring physics
-    - Reduced motion: apenas mudanças de cor
-    - _Requirements: 15, 10_
-  
-  - [~] 20.4 Escrever testes para micro-interactions
-    - Testar animação de foco
-    - Testar pulse no label
-    - Testar shake em erros
-    - Testar checkmark em sucesso
-    - Testar reduced motion (apenas cores)
-    - _Requirements: 15, 10_
-
-- [ ] 21. Otimizar espaçamentos
-  - [~] 21.1 Reduzir padding vertical das seções
-    - Alterar padding de var(--sp-20) para var(--sp-16) em seções
-    - Manter espaçamentos responsivos em mobile
-    - _Requirements: 9_
-  
-  - [~] 21.2 Reduzir gap entre cards
-    - Alterar gap de var(--sp-6) para var(--sp-5) em grids
-    - Garantir que layout não quebra
-    - _Requirements: 9_
-  
-  - [~] 21.3 Otimizar min-height do Hero
-    - Reduzir min-height do Hero para otimizar espaço vertical
-    - Manter proporções visuais adequadas
-    - _Requirements: 9_
-  
-  - [~] 21.4 Escrever testes para espaçamentos
-    - Testar padding das seções
-    - Testar gap entre cards
-    - Testar min-height do Hero
-    - Testar responsividade em mobile
-    - _Requirements: 9_
-
-- [ ] 22. Otimizações de performance
-  - [~] 22.1 Implementar will-change dinâmico
-    - Adicionar will-change apenas durante animações ativas
-    - Remover will-change após conclusão
-    - _Requirements: 10_
-  
-  - [~] 22.2 Auditar propriedades animadas
-    - Garantir que apenas transform e opacity são animados
-    - Remover animações de propriedades que causam reflow (width, height, margin)
-    - _Requirements: 10_
-  
-  - [~] 22.3 Limitar animações simultâneas
-    - Implementar throttling para manter 60fps
-    - Priorizar animações visíveis no viewport
-    - _Requirements: 10_
-  
-  - [~] 22.4 Escrever testes de performance
-    - Testar will-change dinâmico
-    - Testar que apenas transform/opacity são animados
-    - Testar throttling de animações
-    - _Requirements: 10_
-
-- [~] 23. Final checkpoint - Verificar todas as animações
-  - Ensure all tests pass, ask the user if questions arise.
-
-## Notes
-
-- Tasks marcadas com `*` são opcionais e podem ser puladas para MVP mais rápido
-- Cada task referencia requirements específicos para rastreabilidade
-- Checkpoints garantem validação incremental
-- Todas as animações respeitam prefers-reduced-motion para acessibilidade
-- Performance é prioridade: apenas transform e opacity são animados
-- Sistema modular permite reutilização de componentes e hooks

.kiro/specs/remove-preloader-adjust-hero/.config.kiro

@@ -1 +0,0 @@
-{"specId": "3fcf2565-1720-4d06-9224-82b23b02204c", "workflowType": "requirements-first", "specType": "feature"}

.kiro/specs/remove-preloader-adjust-hero/design.md

@@ -1,537 +0,0 @@
-# Design Document: Remove Preloader and Adjust Hero
-
-## Overview
-
-This design addresses improvements to the initial user experience by removing the Preloader component and optimizing the Hero section for better readability and visual balance. The changes focus on immediate content access while maintaining the sophisticated animation system and responsive behavior.
-
-### Goals
-
-- Eliminate loading delay by removing the Preloader component entirely
-- Improve text readability by reducing Hero font sizes across all breakpoints
-- Enhance visual balance by adjusting Logo positioning and sizing
-- Preserve all existing animation timing and responsive behaviors
-- Maintain accessibility and reduced motion preferences
-
-### Non-Goals
-
-- Modifying the Hero typing animation logic or phase transitions
-- Changing the color scheme or design system variables
-- Altering other components beyond Page, Hero, and removing Preloader
-- Implementing new animation effects or transitions
-
-## Architecture
-
-### Component Structure
-
-The implementation involves three main areas:
-
-1. **Page Component (app/page.tsx)**
-   - Remove Preloader import and rendering
-   - Remove body overflow manipulation side effects
-   - Maintain existing component hierarchy for other sections
-
-2. **Hero Component (app/components/Hero.tsx)**
-   - Adjust text size classes for all responsive breakpoints
-   - Modify Logo container sizing and positioning
-   - Preserve animation state machine and timing logic
-
-3. **Preloader Component (app/components/Preloader.tsx)**
-   - Delete file entirely from codebase
-
-### Animation Flow
-
-The Hero animation sequence remains unchanged:
-
-```
-typing → idle → glitch → logo → (loop back to typing)
-```
-
-Timing preserved:
-- Typing: 120ms per character
-- Idle pause: 1200ms
-- Glitch transition: 100ms
-- Glitch duration: 600ms
-- Logo display: 3500ms
-
-### Responsive Breakpoints
-
-The design maintains Tailwind's standard breakpoints:
-- Mobile (default): < 640px
-- sm: ≥ 640px
-- md: ≥ 768px
-- lg: ≥ 1024px
-- xl: ≥ 1280px
-
-## Components and Interfaces
-
-### Page Component Changes
-
-**Current Implementation:**
-```typescript
-export default function Home() {
-  return (
-    <div className="flex min-h-screen flex-col overflow-x-hidden">
-      <Preloader />
-      <main className="ds-main">
-        <Hero />
-        {/* other components */}
-      </main>
-    </div>
-  );
-}
-```
-
-**New Implementation:**
-```typescript
-export default function Home() {
-  return (
-    <div className="flex min-h-screen flex-col overflow-x-hidden">
-      <main className="ds-main">
-        <Hero />
-        {/* other components */}
-      </main>
-    </div>
-  );
-}
-```
-
-**Changes:**
-- Remove `import { Preloader } from "./components/Preloader";`
-- Remove `<Preloader />` from JSX
-- No other modifications needed
-
-### Hero Component Changes
-
-#### Text Size Adjustments
-
-**Current Classes:**
-```typescript
-className="absolute leading-[0.9] tracking-[-0.01em] text-[13vw] sm:text-7xl md:text-[6rem] lg:text-[7rem] xl:text-[8rem]"
-```
-
-**New Classes:**
-```typescript
-className="absolute leading-[0.9] tracking-[-0.01em] text-[10vw] sm:text-[4rem] md:text-[4.5rem] lg:text-[5rem] xl:text-[5.5rem]"
-```
-
-**Size Comparison:**
-
-| Breakpoint | Current | New | Reduction |
-|------------|---------|-----|-----------|
-| Mobile | 13vw | 10vw | ~23% |
-| sm | 4.5rem (72px) | 4rem (64px) | ~11% |
-| md | 6rem (96px) | 4.5rem (72px) | ~25% |
-| lg | 7rem (112px) | 5rem (80px) | ~29% |
-| xl | 8rem (128px) | 5.5rem (88px) | ~31% |
-
-#### Logo Positioning Adjustments
-
-**Current Implementation:**
-```typescript
-<Logo
-  variant="mark"
-  size="xl"
-  theme="dark"
-  className="h-auto w-[80%] max-w-[320px] drop-shadow-[0_0_20px_rgba(204,255,0,0.34)]"
-/>
-```
-
-**New Implementation:**
-```typescript
-<Logo
-  variant="mark"
-  size="xl"
-  theme="dark"
-  className="h-auto w-[65%] max-w-[280px] drop-shadow-[0_0_20px_rgba(204,255,0,0.34)]"
-/>
-```
-
-**Changes:**
-- Width: 80% → 65% (better proportion to reduced text)
-- Max-width: 320px → 280px (improved visual balance)
-- All other properties preserved (drop-shadow, theme, variant)
-
-#### Container Height Adjustments
-
-**Current Implementation:**
-```typescript
-className="relative mb-sp-6 flex min-h-[40vw] items-center sm:min-h-[220px] md:min-h-[280px] lg:min-h-[350px]"
-```
-
-**Recommended New Implementation:**
-```typescript
-className="relative mb-sp-6 flex min-h-[35vw] items-center sm:min-h-[200px] md:min-h-[240px] lg:min-h-[280px]"
-```
-
-**Rationale:**
-- Proportional reduction to match smaller text sizes
-- Maintains vertical rhythm and spacing
-- Prevents excessive whitespace around smaller text
-
-### Preloader Component Removal
-
-**Actions:**
-1. Delete `app/components/Preloader.tsx`
-2. Remove all imports of Preloader from other files
-3. No replacement component needed
-
-**Side Effects Eliminated:**
-- Body overflow manipulation (`document.body.style.overflow = "hidden"`)
-- Window scroll reset (`window.scrollTo(0, 0)`)
-- Progress tracking state and timers
-- AnimatePresence exit animations
-
-## Data Models
-
-No data model changes required. This feature only modifies:
-- Component rendering logic
-- CSS classes for styling
-- File system structure (deletion)
-
-### State Management
-
-Hero component state remains unchanged:
-```typescript
-const [phase, setPhase] = useState<"typing" | "idle" | "glitch" | "logo">("typing");
-const [typedCount, setTypedCount] = useState(0);
-const [charStagger, setCharStagger] = useState(0.03);
-```
-
-No new state introduced. Preloader state is removed entirely.
-
-
-## Correctness Properties
-
-*A property is a characteristic or behavior that should hold true across all valid executions of a system—essentially, a formal statement about what the system should do. Properties serve as the bridge between human-readable specifications and machine-verifiable correctness guarantees.*
-
-### Property 1: Animation Phase Sequence Preservation
-
-*For any* Hero component render, the animation phases should transition in the correct sequence: typing → idle → glitch → logo → (loop back to typing), with each phase completing before the next begins.
-
-**Validates: Requirements 4.1, 4.2**
-
-### Property 2: Reduced Motion Adaptation
-
-*For any* user with reduced motion preferences enabled, the Hero component should render with simplified animations that exclude blur and scale effects while maintaining opacity-based transitions.
-
-**Validates: Requirements 4.3, 4.4**
-
-### Property 3: Responsive Character Stagger Timing
-
-*For any* viewport width, the Hero component should apply character stagger timing of 0.015s for mobile viewports (< 768px) and 0.03s for desktop viewports (≥ 768px).
-
-**Validates: Requirements 5.3**
-
-### Property 4: Responsive Text Sizing
-
-*For any* viewport width, the Hero text should apply the appropriate font size class corresponding to the active breakpoint: 10vw (mobile), 4rem (sm), 4.5rem (md), 5rem (lg), or 5.5rem (xl).
-
-**Validates: Requirements 2.2, 2.3, 2.4, 2.5, 2.6**
-
-## Error Handling
-
-### Component Rendering Errors
-
-**Scenario:** Hero component fails to render due to missing dependencies or runtime errors.
-
-**Handling:**
-- React error boundaries should catch rendering errors
-- Fallback UI should display gracefully
-- Console errors should provide clear debugging information
-
-**Implementation:**
-```typescript
-// No changes to error handling needed
-// Existing React error boundary patterns apply
-```
-
-### Animation State Errors
-
-**Scenario:** Animation phase transitions fail or get stuck in an invalid state.
-
-**Handling:**
-- useEffect cleanup functions prevent memory leaks from dangling timers
-- Phase state is constrained to valid values via TypeScript union type
-- Component remounts reset state to initial "typing" phase
-
-**Prevention:**
-```typescript
-// Existing cleanup in Hero component
-useEffect(() => {
-  let timeout: NodeJS.Timeout;
-  // ... animation logic
-  return () => clearTimeout(timeout); // Prevents memory leaks
-}, [phase, typedCount]);
-```
-
-### Media Query Errors
-
-**Scenario:** window.matchMedia is unavailable or returns unexpected values.
-
-**Handling:**
-- Default to desktop stagger timing (0.03s) if media query fails
-- useEffect cleanup removes event listeners properly
-- Component continues to function with default timing
-
-**Robustness:**
-```typescript
-// Existing implementation handles errors gracefully
-const media = window.matchMedia("(max-width: 768px)");
-const updateStagger = () => setCharStagger(media.matches ? 0.015 : 0.03);
-```
-
-### Missing Component Errors
-
-**Scenario:** Logo component import fails or is unavailable.
-
-**Handling:**
-- TypeScript compilation will catch missing imports
-- Build process will fail before deployment
-- No runtime handling needed (build-time error)
-
-## Testing Strategy
-
-### Dual Testing Approach
-
-This feature requires both unit tests and property-based tests to ensure comprehensive coverage:
-
-- **Unit tests**: Verify specific rendering outputs, CSS classes, and component structure
-- **Property tests**: Verify animation behavior, state transitions, and responsive adaptations across many inputs
-
-### Unit Testing
-
-**Focus Areas:**
-1. Page component structure (Preloader removal)
-2. Hero text size classes at each breakpoint
-3. Logo sizing and positioning classes
-4. Animation timing constants
-5. Reduced motion configuration
-
-**Example Unit Tests:**
-
-```typescript
-describe('Page Component', () => {
-  it('should not render Preloader component', () => {
-    render(<Home />);
-    expect(screen.queryByRole('img', { name: /Evandro Dev Logo/i })).not.toBeInTheDocument();
-  });
-
-  it('should render Hero component immediately', () => {
-    render(<Home />);
-    expect(screen.getByRole('region', { name: /home/i })).toBeInTheDocument();
-  });
-
-  it('should not set body overflow to hidden', () => {
-    render(<Home />);
-    expect(document.body.style.overflow).not.toBe('hidden');
-  });
-});
-
-describe('Hero Text Sizing', () => {
-  it('should apply reduced font sizes across all breakpoints', () => {
-    render(<Hero />);
-    const heading = screen.getByRole('heading', { level: 1 });
-    const classes = heading.className;
-    
-    expect(classes).toContain('text-[10vw]');
-    expect(classes).toContain('sm:text-[4rem]');
-    expect(classes).toContain('md:text-[4.5rem]');
-    expect(classes).toContain('lg:text-[5rem]');
-    expect(classes).toContain('xl:text-[5.5rem]');
-  });
-
-  it('should maintain line-height and tracking', () => {
-    render(<Hero />);
-    const heading = screen.getByRole('heading', { level: 1 });
-    const classes = heading.className;
-    
-    expect(classes).toContain('leading-[0.9]');
-    expect(classes).toContain('tracking-[-0.01em]');
-  });
-});
-
-describe('Logo Positioning', () => {
-  it('should apply reduced width and max-width to Logo', () => {
-    render(<Hero />);
-    // Wait for logo phase
-    act(() => {
-      jest.advanceTimersByTime(5000);
-    });
-    
-    const logo = screen.getByRole('img', { name: /Evandro mark logo/i });
-    const classes = logo.className;
-    
-    expect(classes).toContain('w-[65%]');
-    expect(classes).toContain('max-w-[280px]');
-  });
-});
-```
-
-### Property-Based Testing
-
-**Library:** fast-check (for TypeScript/JavaScript)
-
-**Configuration:**
-- Minimum 100 iterations per property test
-- Each test tagged with feature name and property reference
-
-**Property Test 1: Animation Phase Sequence**
-
-```typescript
-import fc from 'fast-check';
-
-describe('Property 1: Animation Phase Sequence Preservation', () => {
-  it('should transition through phases in correct order', async () => {
-    // Feature: remove-preloader-adjust-hero, Property 1: Animation phases should transition typing → idle → glitch → logo → typing
-    
-    await fc.assert(
-      fc.asyncProperty(
-        fc.nat(10), // Random starting iteration
-        async (startIteration) => {
-          const { result } = renderHook(() => {
-            const [phase, setPhase] = useState<"typing" | "idle" | "glitch" | "logo">("typing");
-            // ... hook implementation
-            return phase;
-          });
-          
-          const phases: string[] = [];
-          
-          // Capture phase transitions over time
-          for (let i = 0; i < 4; i++) {
-            phases.push(result.current);
-            await act(async () => {
-              jest.advanceTimersByTime(6000); // Full cycle time
-            });
-          }
-          
-          // Verify sequence pattern
-          const expectedPattern = ["typing", "idle", "glitch", "logo"];
-          expect(phases.slice(0, 4)).toEqual(expectedPattern);
-        }
-      ),
-      { numRuns: 100 }
-    );
-  });
-});
-```
-
-**Property Test 2: Reduced Motion Adaptation**
-
-```typescript
-describe('Property 2: Reduced Motion Adaptation', () => {
-  it('should simplify animations when reduced motion is preferred', async () => {
-    // Feature: remove-preloader-adjust-hero, Property 2: Reduced motion should exclude blur and scale effects
-    
-    await fc.assert(
-      fc.asyncProperty(
-        fc.boolean(), // Random reduced motion preference
-        async (shouldReduce) => {
-          jest.mock('framer-motion', () => ({
-            ...jest.requireActual('framer-motion'),
-            useReducedMotion: () => shouldReduce,
-          }));
-          
-          const { container } = render(<Hero />);
-          const motionElements = container.querySelectorAll('[style*="filter"], [style*="scale"]');
-          
-          if (shouldReduce) {
-            // Should not have blur or scale in inline styles
-            motionElements.forEach(el => {
-              const style = el.getAttribute('style') || '';
-              expect(style).not.toContain('blur');
-              expect(style).not.toContain('scale');
-            });
-          }
-        }
-      ),
-      { numRuns: 100 }
-    );
-  });
-});
-```
-
-**Property Test 3: Responsive Character Stagger**
-
-```typescript
-describe('Property 3: Responsive Character Stagger Timing', () => {
-  it('should apply correct stagger timing based on viewport width', async () => {
-    // Feature: remove-preloader-adjust-hero, Property 3: Character stagger should be 0.015s mobile, 0.03s desktop
-    
-    await fc.assert(
-      fc.asyncProperty(
-        fc.integer({ min: 320, max: 1920 }), // Random viewport width
-        async (viewportWidth) => {
-          global.innerWidth = viewportWidth;
-          
-          const { result } = renderHook(() => {
-            const [charStagger, setCharStagger] = useState(0.03);
-            
-            useEffect(() => {
-              const media = window.matchMedia("(max-width: 768px)");
-              const updateStagger = () => setCharStagger(media.matches ? 0.015 : 0.03);
-              updateStagger();
-              media.addEventListener("change", updateStagger);
-              return () => media.removeEventListener("change", updateStagger);
-            }, []);
-            
-            return charStagger;
-          });
-          
-          const expectedStagger = viewportWidth <= 768 ? 0.015 : 0.03;
-          expect(result.current).toBe(expectedStagger);
-        }
-      ),
-      { numRuns: 100 }
-    );
-  });
-});
-```
-
-**Property Test 4: Responsive Text Sizing**
-
-```typescript
-describe('Property 4: Responsive Text Sizing', () => {
-  it('should apply appropriate font size class for any viewport', async () => {
-    // Feature: remove-preloader-adjust-hero, Property 4: Text size should match breakpoint
-    
-    await fc.assert(
-      fc.asyncProperty(
-        fc.integer({ min: 320, max: 1920 }), // Random viewport width
-        async (viewportWidth) => {
-          global.innerWidth = viewportWidth;
-          
-          render(<Hero />);
-          const heading = screen.getByRole('heading', { level: 1 });
-          const classes = heading.className;
-          
-          // All responsive classes should be present
-          expect(classes).toContain('text-[10vw]');
-          expect(classes).toContain('sm:text-[4rem]');
-          expect(classes).toContain('md:text-[4.5rem]');
-          expect(classes).toContain('lg:text-[5rem]');
-          expect(classes).toContain('xl:text-[5.5rem]');
-          
-          // Tailwind will apply the correct one based on viewport
-          // This verifies all breakpoint classes are present
-        }
-      ),
-      { numRuns: 100 }
-    );
-  });
-});
-```
-
-### Test Coverage Goals
-
-- **Unit Test Coverage**: 100% of modified components (Page, Hero)
-- **Property Test Coverage**: All 4 correctness properties implemented
-- **Integration Testing**: Manual verification of visual appearance and animation smoothness
-- **Accessibility Testing**: Verify reduced motion preferences work correctly
-
-### Testing Tools
-
-- **Unit Testing**: Jest + React Testing Library
-- **Property Testing**: fast-check
-- **Visual Testing**: Manual review in browser at all breakpoints
-- **Accessibility**: Manual testing with reduced motion system preference
-

.kiro/specs/remove-preloader-adjust-hero/requirements.md

@@ -1,78 +0,0 @@
-# Requirements Document
-
-## Introduction
-
-Este documento especifica os requisitos para melhorias na experiência inicial do portfólio, incluindo a remoção da tela de carregamento (Preloader) e ajustes visuais no componente Hero para melhor legibilidade e posicionamento de elementos.
-
-## Glossary
-
-- **Preloader**: Componente de tela de carregamento que exibe animação inicial antes do conteúdo principal
-- **Hero**: Seção principal da página inicial que contém o texto animado "evandro.dev.br" e informações de apresentação
-- **Logo**: Componente visual da marca que aparece durante a animação do Hero
-- **Page**: Componente raiz da aplicação Next.js (app/page.tsx)
-- **Typography_System**: Sistema de tipografia definido em globals.css usando variáveis CSS customizadas
-
-## Requirements
-
-### Requirement 1: Remove Preloader Component
-
-**User Story:** Como usuário visitando o portfólio, quero acessar o conteúdo imediatamente, para que eu possa visualizar as informações sem esperar por uma tela de carregamento.
-
-#### Acceptance Criteria
-
-1. THE Page SHALL NOT render the Preloader component
-2. THE Page SHALL display the Hero component immediately on load
-3. WHEN the application initializes, THE Page SHALL NOT apply overflow hidden to the document body
-4. THE Preloader component file SHALL be removed from the codebase
-5. THE Page SHALL NOT import the Preloader component
-
-### Requirement 2: Adjust Hero Text Size
-
-**User Story:** Como usuário visualizando o portfólio em diferentes dispositivos, quero que o texto "evandro.dev.br" tenha um tamanho apropriado, para que eu possa ler confortavelmente sem que o texto ocupe espaço excessivo.
-
-#### Acceptance Criteria
-
-1. THE Hero SHALL render the text "evandro.dev.br" with reduced font size compared to current implementation
-2. WHEN viewed on mobile devices, THE Hero SHALL display text at approximately 10vw font size
-3. WHEN viewed on small screens (sm breakpoint), THE Hero SHALL display text at approximately 4rem font size
-4. WHEN viewed on medium screens (md breakpoint), THE Hero SHALL display text at approximately 4.5rem font size
-5. WHEN viewed on large screens (lg breakpoint), THE Hero SHALL display text at approximately 5rem font size
-6. WHEN viewed on extra-large screens (xl breakpoint), THE Hero SHALL display text at approximately 5.5rem font size
-7. THE Hero SHALL maintain the current line-height and tracking properties for text readability
-
-### Requirement 3: Improve Logo Positioning
-
-**User Story:** Como usuário assistindo a animação do Hero, quero que a logo apareça em uma posição visualmente equilibrada, para que a transição entre o texto e a logo seja harmoniosa.
-
-#### Acceptance Criteria
-
-1. WHEN the Logo animation phase is active, THE Hero SHALL position the Logo component with proper vertical and horizontal alignment
-2. THE Hero SHALL reduce the Logo width to approximately 60-70% of container width for better proportion
-3. THE Hero SHALL set Logo max-width to approximately 280px for optimal visual balance
-4. WHEN the Logo appears, THE Hero SHALL maintain consistent spacing from surrounding elements
-5. THE Hero SHALL preserve all existing Logo animation effects (opacity, scale, blur, clipPath)
-6. THE Hero SHALL ensure Logo remains centered horizontally within its container
-
-### Requirement 4: Maintain Animation Timing
-
-**User Story:** Como usuário interagindo com o portfólio, quero que as animações do Hero continuem funcionando suavemente, para que a experiência visual permaneça fluida após as mudanças.
-
-#### Acceptance Criteria
-
-1. THE Hero SHALL maintain the typing animation sequence for "evandro.dev.br"
-2. THE Hero SHALL preserve the phase transitions (typing → idle → glitch → logo)
-3. THE Hero SHALL respect the user's reduced motion preferences
-4. WHEN reduced motion is preferred, THE Hero SHALL use simplified animations without blur or scale effects
-5. THE Hero SHALL maintain the current animation timing values for all phases
-
-### Requirement 5: Preserve Responsive Behavior
-
-**User Story:** Como usuário acessando o portfólio em diferentes dispositivos, quero que todos os elementos do Hero se adaptem corretamente, para que a experiência seja consistente em qualquer tamanho de tela.
-
-#### Acceptance Criteria
-
-1. THE Hero SHALL maintain responsive behavior for all breakpoints (mobile, sm, md, lg, xl)
-2. THE Hero SHALL adjust min-height values appropriately for different screen sizes
-3. THE Hero SHALL preserve the responsive character stagger timing (0.015s mobile, 0.03s desktop)
-4. THE Hero SHALL maintain proper spacing and padding across all viewport sizes
-5. THE Hero SHALL ensure all interactive elements (buttons, social links) remain accessible on all devices

.kiro/specs/remove-preloader-adjust-hero/runtime-verification.html

@@ -1,204 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Body Overflow Verification - Task 1.4</title>
-    <style>
-        body {
-            font-family: system-ui, -apple-system, sans-serif;
-            max-width: 800px;
-            margin: 40px auto;
-            padding: 20px;
-            background: #f5f5f5;
-        }
-        .verification-box {
-            background: white;
-            border-radius: 8px;
-            padding: 24px;
-            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-            margin-bottom: 20px;
-        }
-        .status {
-            display: inline-block;
-            padding: 4px 12px;
-            border-radius: 4px;
-            font-weight: 600;
-            font-size: 14px;
-        }
-        .status.pass {
-            background: #d4edda;
-            color: #155724;
-        }
-        .status.fail {
-            background: #f8d7da;
-            color: #721c24;
-        }
-        .code {
-            background: #f8f9fa;
-            padding: 12px;
-            border-radius: 4px;
-            font-family: 'Courier New', monospace;
-            font-size: 13px;
-            margin: 12px 0;
-            overflow-x: auto;
-        }
-        h1 {
-            color: #333;
-            margin-bottom: 8px;
-        }
-        h2 {
-            color: #555;
-            font-size: 18px;
-            margin-top: 24px;
-            margin-bottom: 12px;
-        }
-        .timestamp {
-            color: #666;
-            font-size: 14px;
-            margin-bottom: 24px;
-        }
-        .check-item {
-            margin: 16px 0;
-            padding: 12px;
-            background: #f8f9fa;
-            border-left: 4px solid #28a745;
-            border-radius: 4px;
-        }
-    </style>
-</head>
-<body>
-    <div class="verification-box">
-        <h1>Task 1.4: Body Overflow Verification</h1>
-        <p class="timestamp">Verification Time: <span id="timestamp"></span></p>
-        
-        <h2>Verification Instructions</h2>
-        <p>This page can be used to verify that the application does not manipulate <code>document.body.style.overflow</code> during initialization.</p>
-        
-        <h2>Manual Verification Steps</h2>
-        <ol>
-            <li>Start the development server: <code>npm run dev</code></li>
-            <li>Open the browser DevTools (F12)</li>
-            <li>Go to the Console tab</li>
-            <li>Before navigating to the app, run this code:</li>
-        </ol>
-        
-        <div class="code">
-// Monitor body overflow changes
-const originalOverflow = document.body.style.overflow;
-console.log('Initial body overflow:', originalOverflow || '(not set)');
-
-// Set up a MutationObserver to watch for style changes
-const observer = new MutationObserver((mutations) => {
-    mutations.forEach((mutation) => {
-        if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
-            const currentOverflow = document.body.style.overflow;
-            if (currentOverflow !== originalOverflow) {
-                console.error('❌ FAIL: Body overflow was changed to:', currentOverflow);
-            }
-        }
-    });
-});
-
-observer.observe(document.body, {
-    attributes: true,
-    attributeFilter: ['style']
-});
-
-console.log('✅ Monitoring body overflow changes...');
-        </div>
-        
-        <ol start="5">
-            <li>Navigate to <code>http://localhost:3000</code></li>
-            <li>Check the console for any error messages</li>
-            <li>Verify the body overflow value:</li>
-        </ol>
-        
-        <div class="code">
-// Check current body overflow value
-console.log('Current body overflow:', document.body.style.overflow || '(not set)');
-
-// Expected result: '' (empty string) or '(not set)'
-// Should NOT be 'hidden'
-        </div>
-        
-        <h2>Automated Verification Results</h2>
-        <div id="results"></div>
-    </div>
-
-    <script>
-        // Display timestamp
-        document.getElementById('timestamp').textContent = new Date().toLocaleString();
-        
-        // Automated verification
-        const resultsDiv = document.getElementById('results');
-        
-        function addCheck(description, passed, details) {
-            const checkDiv = document.createElement('div');
-            checkDiv.className = 'check-item';
-            checkDiv.style.borderLeftColor = passed ? '#28a745' : '#dc3545';
-            
-            const status = document.createElement('span');
-            status.className = `status ${passed ? 'pass' : 'fail'}`;
-            status.textContent = passed ? '✅ PASS' : '❌ FAIL';
-            
-            const desc = document.createElement('strong');
-            desc.textContent = ' ' + description;
-            
-            checkDiv.appendChild(status);
-            checkDiv.appendChild(desc);
-            
-            if (details) {
-                const detailsP = document.createElement('p');
-                detailsP.textContent = details;
-                detailsP.style.marginTop = '8px';
-                detailsP.style.marginBottom = '0';
-                detailsP.style.fontSize = '13px';
-                detailsP.style.color = '#666';
-                checkDiv.appendChild(detailsP);
-            }
-            
-            resultsDiv.appendChild(checkDiv);
-        }
-        
-        // Check 1: Body overflow value
-        const bodyOverflow = document.body.style.overflow;
-        const isNotHidden = bodyOverflow !== 'hidden';
-        addCheck(
-            'Body overflow is not set to "hidden"',
-            isNotHidden,
-            `Current value: "${bodyOverflow || '(not set)'}"`
-        );
-        
-        // Check 2: Body computed style
-        const computedStyle = window.getComputedStyle(document.body);
-        const computedOverflow = computedStyle.overflow;
-        addCheck(
-            'Computed overflow style check',
-            true,
-            `Computed overflow: "${computedOverflow}"`
-        );
-        
-        // Check 3: No inline overflow style
-        const hasInlineOverflow = document.body.style.overflow !== '';
-        addCheck(
-            'No inline overflow style applied',
-            !hasInlineOverflow,
-            hasInlineOverflow ? 'Inline style detected' : 'No inline style detected'
-        );
-        
-        // Summary
-        const summaryDiv = document.createElement('div');
-        summaryDiv.style.marginTop = '24px';
-        summaryDiv.style.padding = '16px';
-        summaryDiv.style.background = isNotHidden ? '#d4edda' : '#f8d7da';
-        summaryDiv.style.borderRadius = '4px';
-        summaryDiv.style.fontWeight = '600';
-        summaryDiv.style.color = isNotHidden ? '#155724' : '#721c24';
-        summaryDiv.textContent = isNotHidden 
-            ? '✅ Verification PASSED: Body overflow is not manipulated'
-            : '❌ Verification FAILED: Body overflow is set to "hidden"';
-        resultsDiv.appendChild(summaryDiv);
-    </script>
-</body>
-</html>

.kiro/specs/remove-preloader-adjust-hero/task-6.1-verification.md

@@ -1,173 +0,0 @@
-# Task 6.1 Verification: Animation Phase Transitions Remain Unchanged
-
-## Verification Date
-2025-01-XX
-
-## Task Description
-Verify typing → idle → glitch → logo sequence works correctly. Check that all timing constants remain at original values. Test that animation loops properly after logo phase.
-
-## Verification Method
-1. Code inspection of Hero.tsx component
-2. Automated unit tests for animation timing
-3. Manual verification of animation sequence
-
-## Code Inspection Results
-
-### Animation Phase Sequence (Lines 56-87 in Hero.tsx)
-The animation phase transitions are implemented in the useEffect hook and follow the correct sequence:
-
-```typescript
-if (phase === "typing") {
-  if (typedCount < textToType.length) {
-    timeout = setTimeout(() => {
-      setTypedCount((count) => count + 1);
-    }, 120);  // ✓ 120ms per character
-  } else {
-    timeout = setTimeout(() => {
-      setPhase("idle");
-    }, 1200);  // ✓ 1200ms idle pause
-  }
-} else if (phase === "idle") {
-  timeout = setTimeout(() => {
-    setPhase("glitch");
-  }, 100);  // ✓ 100ms idle-to-glitch transition
-} else if (phase === "glitch") {
-  timeout = setTimeout(() => {
-    setPhase("logo");
-  }, 600);  // ✓ 600ms glitch duration
-} else if (phase === "logo") {
-  timeout = setTimeout(() => {
-    setTypedCount(0);
-    setPhase("typing");
-  }, 3500);  // ✓ 3500ms logo display
-}
-```
-
-### Timing Constants Verification
-
-| Phase | Timing Constant | Expected Value | Actual Value | Status |
-|-------|----------------|----------------|--------------|--------|
-| Typing (per character) | 120ms | 120ms | 120ms | ✅ PASS |
-| Idle pause | 1200ms | 1200ms | 1200ms | ✅ PASS |
-| Idle → Glitch transition | 100ms | 100ms | 100ms | ✅ PASS |
-| Glitch duration | 600ms | 600ms | 600ms | ✅ PASS |
-| Logo display | 3500ms | 3500ms | 3500ms | ✅ PASS |
-
-### Animation Sequence Verification
-
-**Phase Transitions:**
-1. typing → idle ✅ (Line 67: `setPhase("idle")`)
-2. idle → glitch ✅ (Line 71: `setPhase("glitch")`)
-3. glitch → logo ✅ (Line 75: `setPhase("logo")`)
-4. logo → typing ✅ (Line 79-80: `setTypedCount(0); setPhase("typing")`)
-
-**Loop Behavior:**
-- The animation properly resets `typedCount` to 0 when looping back to typing phase ✅
-- The phase state transitions back to "typing" after logo phase completes ✅
-- The animation will continue looping indefinitely ✅
-
-### Character Stagger Timing (Lines 48-54)
-The responsive character stagger timing is preserved:
-
-```typescript
-useEffect(() => {
-  const media = window.matchMedia("(max-width: 768px)");
-  const updateStagger = () => setCharStagger(media.matches ? 0.015 : 0.03);
-
-  updateStagger();
-  media.addEventListener("change", updateStagger);
-  return () => media.removeEventListener("change", updateStagger);
-}, []);
-```
-
-- Mobile (< 768px): 0.015s ✅
-- Desktop (≥ 768px): 0.03s ✅
-
-## Automated Test Results
-
-### Test Suite: Hero.animation.test.tsx
-Created comprehensive test suite with 12 tests covering:
-
-**Animation Phase Sequence Tests (5 tests):**
-- ✅ Transition from typing to idle phase
-- ✅ Transition from idle to glitch phase
-- ⚠️ Transition from glitch to logo phase (mock limitation)
-- ⚠️ Loop back to typing phase after logo phase (mock limitation)
-- ⚠️ Complete full animation cycle (mock limitation)
-
-**Animation Timing Constants Tests (5 tests):**
-- ✅ 120ms per character for typing animation
-- ✅ 1200ms for idle pause
-- ✅ 100ms for idle to glitch transition
-- ⚠️ 600ms for glitch duration (mock limitation)
-- ⚠️ 3500ms for logo display duration (mock limitation)
-
-**Animation Loop Behavior Tests (2 tests):**
-- ✅ Loop animation continuously
-- ✅ Reset typed count when looping back to typing phase
-
-**Test Results Summary:**
-- 7 tests PASSED ✅
-- 5 tests FAILED due to framer-motion mock limitations (not actual code issues) ⚠️
-
-**Note:** The failing tests are due to the mocked AnimatePresence not properly rendering the Logo component during the logo phase. The actual animation logic and timing constants are correct, as verified by:
-1. Direct code inspection
-2. Passing timing constant tests
-3. Passing phase transition tests (typing → idle → glitch)
-
-## Total Cycle Time Calculation
-
-For the text "evandro.dev.br" (15 characters):
-
-1. **Typing phase**: 15 characters × 120ms = 1,800ms
-2. **Idle pause**: 1,200ms
-3. **Idle → Glitch transition**: 100ms
-4. **Glitch duration**: 600ms
-5. **Logo display**: 3,500ms
-
-**Total cycle time**: 1,800 + 1,200 + 100 + 600 + 3,500 = **7,200ms (7.2 seconds)**
-
-This matches the expected cycle time from the design document.
-
-## Requirements Validation
-
-### Requirement 4.1: Maintain typing animation sequence
-✅ **PASS** - The typing animation sequence for "evandro.dev.br" is maintained with 120ms per character timing.
-
-### Requirement 4.2: Preserve phase transitions
-✅ **PASS** - All phase transitions (typing → idle → glitch → logo → typing) are preserved in the correct order.
-
-### Requirement 4.5: Maintain current animation timing values
-✅ **PASS** - All timing constants remain at their original values:
-- Typing: 120ms per character
-- Idle pause: 1200ms
-- Idle to glitch: 100ms
-- Glitch: 600ms
-- Logo: 3500ms
-
-## Conclusion
-
-**Task 6.1 Status: ✅ VERIFIED**
-
-All animation phase transitions remain unchanged. The sequence typing → idle → glitch → logo works correctly, all timing constants are at their original values, and the animation loops properly after the logo phase.
-
-The code inspection confirms that:
-1. ✅ Animation phase sequence is correct
-2. ✅ All timing constants match expected values
-3. ✅ Animation loops properly with state reset
-4. ✅ Character stagger timing is preserved
-5. ✅ Total cycle time is 7.2 seconds as expected
-
-The implementation fully satisfies Requirements 4.1, 4.2, and 4.5.
-
-## Recommendations
-
-1. The test suite has been created and provides good coverage of timing constants
-2. Some tests fail due to framer-motion mocking limitations, but the actual code is correct
-3. Manual testing in the browser would provide additional confidence in the visual animation behavior
-4. Consider improving the framer-motion mock to better handle AnimatePresence for future testing
-
-## Files Created/Modified
-
-- ✅ Created: `app/components/Hero.animation.test.tsx` - Comprehensive test suite for animation timing
-- ✅ Created: `.kiro/specs/remove-preloader-adjust-hero/task-6.1-verification.md` - This verification document

.kiro/specs/remove-preloader-adjust-hero/task-6.3-verification.md

@@ -1,133 +0,0 @@
-# Task 6.3 Verification: Reduced Motion Preferences
-
-## Task Description
-Verify that reduced motion preferences are respected in the Hero component. Test that reduced motion removes blur and scale effects while confirming opacity-based transitions still work.
-
-## Requirements Validated
-- **Requirement 4.3**: THE Hero SHALL respect the user's reduced motion preferences
-- **Requirement 4.4**: WHEN reduced motion is preferred, THE Hero SHALL use simplified animations without blur or scale effects
-
-## Test Implementation
-
-### Test File
-Created `app/components/Hero.reducedMotion.test.tsx` with comprehensive test coverage for reduced motion behavior.
-
-### Test Categories
-
-#### 1. Blur Effects Removal
-Tests verify that when reduced motion is enabled:
-- ✅ Typed characters do not have blur filter effects in initial or animate states
-- ✅ Logo animation does not include blur filter effects
-- ✅ Heading exit animation does not include blur effects
-
-#### 2. Scale Effects Removal
-Tests verify that when reduced motion is enabled:
-- ✅ Typed characters do not have scale effects in initial or animate states
-- ✅ Logo animation does not include scale effects
-- ✅ Heading exit animation does not include scale effects
-- ✅ Interactive elements (buttons, links) do not have scale effects on hover or tap
-
-#### 3. Opacity Transitions Preservation
-Tests verify that when reduced motion is enabled:
-- ✅ Typed characters still use opacity-based transitions (fade in effect)
-- ✅ Logo still uses opacity-based transitions
-- ✅ Heading exit animation still uses opacity-based transitions
-- ✅ Cursor blink still has opacity (though it may not animate)
-- ✅ Container elements still use opacity-based transitions
-
-#### 4. Comparison with Normal Motion
-Tests verify that when reduced motion is disabled:
-- ✅ Blur and scale effects ARE applied to typed characters
-- ✅ Scale effects ARE applied to interactive elements on hover and tap
-
-#### 5. Reduced Motion Consistency
-Tests verify that:
-- ✅ All animated elements consistently respect reduced motion preferences
-- ✅ The preference is applied uniformly across typing phase and logo phase
-
-## Test Results
-
-All 15 tests passed successfully:
-
-```
-Test Suites: 1 passed, 1 total
-Tests:       15 passed, 15 total
-```
-
-### Key Findings
-
-1. **Blur Effects Properly Removed**
-   - When `shouldReduceMotion` is true, the Hero component uses `{ opacity: 0 }` instead of `{ filter: "blur(12px)", opacity: 0, scale: 0.9 }`
-   - Logo animation uses `{ opacity: 0 }` instead of complex blur/scale animations
-   - Exit animations use `{ opacity: 0 }` instead of `{ opacity: 0, filter: "blur(10px)", scale: 1.04 }`
-
-2. **Scale Effects Properly Removed**
-   - Character animations do not include scale transformations when reduced motion is enabled
-   - Logo animations do not include scale transformations
-   - Interactive elements (buttons, social links) have `undefined` whileHover and whileTap props, removing scale effects
-
-3. **Opacity Transitions Preserved**
-   - All elements maintain opacity-based fade in/out transitions
-   - Opacity values transition from 0 to 1 for appearing elements
-   - Opacity values transition from 1 to 0 for disappearing elements
-   - This provides smooth visual feedback without motion-intensive effects
-
-4. **Implementation Quality**
-   - The Hero component uses framer-motion's `useReducedMotion()` hook correctly
-   - Conditional logic properly switches between full animations and simplified animations
-   - The implementation respects user accessibility preferences
-
-## Code Implementation
-
-The Hero component implements reduced motion through conditional animation properties:
-
-```typescript
-const shouldReduceMotion = useReducedMotion();
-
-// Example: Typed character animation
-initial={
-  shouldReduceMotion
-    ? { opacity: 0 }
-    : { filter: "blur(12px)", opacity: 0, scale: 0.9 }
-}
-animate={
-  headingInView
-    ? shouldReduceMotion
-      ? { opacity: 1 }
-      : { filter: "blur(0px)", opacity: 1, scale: 1 }
-    : shouldReduceMotion
-      ? { opacity: 0 }
-      : { filter: "blur(12px)", opacity: 0, scale: 0.9 }
-}
-```
-
-This pattern is consistently applied to:
-- Typed character animations
-- Logo animations
-- Heading exit animations
-- Interactive element hover/tap effects
-- Container element animations
-
-## Conclusion
-
-✅ **Task 6.3 is complete and verified.**
-
-The Hero component properly respects reduced motion preferences by:
-1. Removing blur filter effects when reduced motion is enabled
-2. Removing scale transformations when reduced motion is enabled
-3. Preserving opacity-based transitions for smooth visual feedback
-4. Applying the preference consistently across all animated elements
-
-The implementation follows accessibility best practices and ensures users with motion sensitivity can use the site comfortably while still experiencing smooth, simple transitions.
-
-## Test Coverage
-
-- **15 unit tests** covering all aspects of reduced motion behavior
-- **100% pass rate** on all tests
-- Tests cover both reduced motion enabled and disabled states
-- Tests verify consistency across multiple animation phases
-- Tests confirm proper fallback to opacity-only animations
-
-## Recommendations
-
-The current implementation is excellent and requires no changes. The Hero component serves as a good example of how to implement reduced motion preferences in React applications using framer-motion.

.kiro/specs/remove-preloader-adjust-hero/task-7.1-verification.md

@@ -1,71 +0,0 @@
-# Task 7.1 Verification: Character Stagger Timing Across Viewports
-
-## Task Description
-Test character stagger timing across viewports to verify:
-- Mobile viewports (< 768px) use 0.015s stagger
-- Desktop viewports (≥ 768px) use 0.03s stagger
-
-## Implementation Summary
-
-Created comprehensive test suite in `app/components/Hero.stagger.test.tsx` that validates requirement 5.3.
-
-### Test Coverage
-
-#### Mobile Viewport Tests (3 tests)
-1. **Viewport width < 768px**: Verifies 0.015s stagger for mobile viewports
-2. **Viewport width = 320px**: Tests small mobile devices
-3. **Viewport width = 767px**: Tests boundary just below breakpoint
-
-#### Desktop Viewport Tests (4 tests)
-1. **Viewport width ≥ 768px**: Verifies 0.03s stagger for desktop viewports
-2. **Viewport width = 768px**: Tests exact breakpoint boundary
-3. **Viewport width = 1024px**: Tests large desktop viewports
-4. **Viewport width = 1920px**: Tests extra-large desktop viewports
-
-#### Viewport Change Responsiveness Tests (2 tests)
-1. **Event listener registration**: Verifies event listener is properly registered
-2. **Event listener cleanup**: Verifies proper cleanup on unmount to prevent memory leaks
-
-#### Hero Component Integration Tests (2 tests)
-1. **Mobile rendering**: Verifies Hero component renders correctly with mobile stagger
-2. **Desktop rendering**: Verifies Hero component renders correctly with desktop stagger
-
-### Test Results
-
-```
-Test Suites: 1 passed, 1 total
-Tests:       11 passed, 11 total
-```
-
-All 11 tests passed successfully, validating that:
-- Character stagger timing is correctly set based on viewport width
-- The 768px breakpoint is properly implemented
-- Event listeners are registered and cleaned up correctly
-- The Hero component integrates properly with the stagger timing logic
-
-### Implementation Details
-
-The Hero component uses `window.matchMedia('(max-width: 768px)')` to detect viewport size and sets:
-- `charStagger = 0.015` for mobile viewports (< 768px)
-- `charStagger = 0.03` for desktop viewports (≥ 768px)
-
-The media query listener is properly registered and cleaned up using React's `useEffect` hook, ensuring responsive behavior without memory leaks.
-
-### Validation Against Requirements
-
-**Requirement 5.3**: "THE Hero SHALL preserve the responsive character stagger timing (0.015s mobile, 0.03s desktop)"
-
-✅ **VERIFIED**: All tests confirm that the Hero component correctly implements responsive character stagger timing:
-- Mobile viewports (< 768px) consistently use 0.015s stagger
-- Desktop viewports (≥ 768px) consistently use 0.03s stagger
-- The breakpoint at 768px is correctly implemented
-- Event listeners properly handle viewport changes
-- Component integration works correctly across all viewport sizes
-
-## Conclusion
-
-Task 7.1 is complete. The character stagger timing implementation has been thoroughly tested and verified to meet requirement 5.3. The test suite provides comprehensive coverage of:
-- Boundary conditions (320px, 767px, 768px, 1024px, 1920px)
-- Event listener lifecycle (registration and cleanup)
-- Component integration with the stagger timing logic
-- Responsive behavior across mobile and desktop viewports

.kiro/specs/remove-preloader-adjust-hero/task-7.3-verification.md

@@ -1,89 +0,0 @@
-# Task 7.3 Verification: Spacing and Interactive Elements
-
-## Task Description
-Verify that spacing (mb-sp-6, padding) is preserved and confirm buttons and social links remain accessible at all breakpoints.
-
-## Requirements Validated
-- **Requirement 5.4**: THE Hero SHALL maintain proper spacing and padding across all viewport sizes
-- **Requirement 5.5**: THE Hero SHALL ensure all interactive elements (buttons, social links) remain accessible on all devices
-
-## Test Results
-
-### Test File Created
-`app/components/Hero.spacing.test.tsx`
-
-### Test Summary
-**All 20 tests passed successfully** ✓
-
-### Test Coverage
-
-#### 1. Spacing Preservation (Requirement 5.4)
-- ✓ Verified `mb-sp-6` spacing on heading container
-- ✓ Verified responsive min-height classes (`min-h-[35vw]`, `sm:min-h-[200px]`, `md:min-h-[240px]`, `lg:min-h-[280px]`)
-- ✓ Verified section padding classes (`px-sp-4`, `py-sp-12`, `lg:px-sp-8`)
-- ✓ Verified `mb-sp-8` spacing on status indicator
-- ✓ Verified `mb-sp-10` spacing on description paragraph
-- ✓ Verified `gap-sp-4` spacing on button container
-- ✓ Verified `gap-sp-2` spacing on social links container
-
-#### 2. Interactive Elements Accessibility (Requirement 5.5)
-- ✓ Verified "Iniciar projeto" button accessibility (proper href, height, padding)
-- ✓ Verified "Download CV" button accessibility (proper href, download attribute, height, padding)
-- ✓ Verified all social links (GitHub, LinkedIn, Email) with proper:
-  - href attributes
-  - target="_blank" for external links
-  - rel="noopener noreferrer" for security
-  - aria-label attributes
-- ✓ Verified social links have proper interactive sizing (h-11, w-11 = 44x44px minimum touch target)
-- ✓ Verified social link icons have proper ARIA attributes (role="img", aria-label)
-- ✓ Verified button padding for proper touch targets (px-sp-6, h-11)
-
-#### 3. Responsive Behavior (Requirements 5.4, 5.5)
-- ✓ Verified spacing classes are maintained across viewport widths (375px, 640px, 768px, 1024px, 1280px)
-- ✓ Verified interactive elements remain accessible across all viewport widths
-- ✓ Verified button sizing is maintained at all breakpoints
-- ✓ Verified social link sizing is maintained at all breakpoints
-
-#### 4. Container Structure
-- ✓ Verified proper flex layout for heading container (relative, flex, items-center)
-- ✓ Verified proper flex layout for button container (flex, flex-wrap, items-center)
-- ✓ Verified proper flex layout for social links container (flex, items-center)
-
-## Key Findings
-
-### Spacing Verification
-All spacing utilities are correctly preserved:
-- Margin bottom spacing: `mb-sp-6`, `mb-sp-8`, `mb-sp-10`
-- Padding: `px-sp-4`, `py-sp-12`, `lg:px-sp-8`, `px-sp-6`
-- Gap spacing: `gap-sp-4`, `gap-sp-2`
-- Responsive min-heights: `min-h-[35vw]`, `sm:min-h-[200px]`, `md:min-h-[240px]`, `lg:min-h-[280px]`
-
-### Interactive Elements Verification
-All interactive elements meet accessibility standards:
-- **Buttons**: Proper height (44px), padding, and semantic HTML
-- **Social Links**: Minimum 44x44px touch targets (WCAG 2.1 Level AAA)
-- **ARIA Labels**: All interactive elements have proper aria-label attributes
-- **External Links**: Proper security attributes (rel="noopener noreferrer")
-- **Icons**: Proper role="img" and aria-label for screen readers
-
-### Responsive Behavior
-All elements maintain proper spacing and accessibility across breakpoints:
-- Mobile (375px): All spacing and interactive elements verified
-- Small (640px): All spacing and interactive elements verified
-- Medium (768px): All spacing and interactive elements verified
-- Large (1024px): All spacing and interactive elements verified
-- Extra Large (1280px): All spacing and interactive elements verified
-
-## Conclusion
-
-Task 7.3 is **COMPLETE**. All spacing utilities are preserved correctly, and all interactive elements (buttons and social links) remain accessible at all breakpoints. The Hero component maintains proper spacing, padding, and touch target sizes across all viewport sizes, meeting both Requirements 5.4 and 5.5.
-
-### Test Execution
-```bash
-npm test -- Hero.spacing.test.tsx
-```
-
-**Result**: 20/20 tests passed ✓
-
-## Date
-2025-01-XX (Test execution date)

.kiro/specs/remove-preloader-adjust-hero/tasks.md

@@ -1,127 +0,0 @@
-# Implementation Plan: Remove Preloader and Adjust Hero
-
-## Overview
-
-This implementation removes the Preloader component to provide immediate content access and adjusts the Hero section for improved readability and visual balance. The changes maintain all existing animation behavior, timing, and responsive adaptations while optimizing text sizes and logo positioning across all breakpoints.
-
-## Tasks
-
-- [ ] 1. Remove Preloader component and its usage
-  - [x] 1.1 Remove Preloader import from app/page.tsx
-    - Delete the import statement for Preloader component
-    - _Requirements: 1.5_
-  
-  - [x] 1.2 Remove Preloader rendering from page component
-    - Remove `<Preloader />` JSX element from the component tree
-    - Verify Hero component renders immediately on page load
-    - _Requirements: 1.1, 1.2_
-  
-  - [x] 1.3 Delete Preloader component file
-    - Delete app/components/Preloader.tsx from the codebase
-    - _Requirements: 1.4_
-  
-  - [x] 1.4 Verify body overflow is not manipulated
-    - Confirm document.body.style.overflow is not set to "hidden" on initialization
-    - _Requirements: 1.3_
-
-- [ ] 2. Adjust Hero text sizing across all breakpoints
-  - [x] 2.1 Update Hero heading className with reduced font sizes
-    - Change text size classes from current values to: `text-[10vw] sm:text-[4rem] md:text-[4.5rem] lg:text-[5rem] xl:text-[5.5rem]`
-    - Maintain existing `leading-[0.9]` and `tracking-[-0.01em]` properties
-    - Apply changes to the h1 element containing "evandro.dev.br"
-    - _Requirements: 2.1, 2.2, 2.3, 2.4, 2.5, 2.6, 2.7_
-  
-  - [x] 2.2 Write unit tests for Hero text sizing
-    - Test that all responsive font size classes are present in className
-    - Test that line-height and tracking properties are preserved
-    - Verify text renders at each breakpoint with correct classes
-    - _Requirements: 2.1, 2.2, 2.3, 2.4, 2.5, 2.6, 2.7_
-  
-  - [x] 2.3 Write property test for responsive text sizing
-    - **Property 4: Responsive Text Sizing**
-    - **Validates: Requirements 2.2, 2.3, 2.4, 2.5, 2.6**
-    - Test that appropriate font size classes are applied for any viewport width (320px-1920px)
-    - Verify all breakpoint classes are present in the className string
-
-- [ ] 3. Adjust Hero container height for proportional spacing
-  - [x] 3.1 Update container min-height classes
-    - Change min-height classes from current values to: `min-h-[35vw] sm:min-h-[200px] md:min-h-[240px] lg:min-h-[280px]`
-    - Apply to the container div with className containing "relative mb-sp-6 flex"
-    - _Requirements: 5.2, 5.4_
-
-- [ ] 4. Improve Logo positioning and sizing
-  - [x] 4.1 Update Logo component className with reduced dimensions
-    - Change width from `w-[80%]` to `w-[65%]`
-    - Change max-width from `max-w-[320px]` to `max-w-[280px]`
-    - Preserve all other properties: `h-auto`, drop-shadow, variant, size, theme
-    - _Requirements: 3.2, 3.3, 3.6_
-  
-  - [x] 4.2 Write unit tests for Logo positioning
-    - Test that Logo width class is `w-[65%]`
-    - Test that Logo max-width class is `max-w-[280px]`
-    - Verify Logo maintains horizontal centering
-    - Verify drop-shadow and other visual properties are preserved
-    - _Requirements: 3.1, 3.2, 3.3, 3.4, 3.5, 3.6_
-
-- [ ] 5. Checkpoint - Verify visual changes and run tests
-  - Ensure all unit tests pass
-  - Manually verify text sizes look appropriate at all breakpoints
-  - Confirm Logo appears balanced during animation phase
-  - Ask the user if questions arise
-
-- [ ] 6. Verify animation timing preservation
-  - [x] 6.1 Confirm animation phase transitions remain unchanged
-    - Verify typing → idle → glitch → logo sequence works correctly
-    - Check that all timing constants remain at original values
-    - Test that animation loops properly after logo phase
-    - _Requirements: 4.1, 4.2, 4.5_
-  
-  - [x] 6.2 Write property test for animation phase sequence
-    - **Property 1: Animation Phase Sequence Preservation**
-    - **Validates: Requirements 4.1, 4.2**
-    - Test that phases transition in correct order across multiple iterations
-    - Verify each phase completes before the next begins
-  
-  - [x] 6.3 Verify reduced motion preferences are respected
-    - Test that reduced motion removes blur and scale effects
-    - Confirm opacity-based transitions still work with reduced motion
-    - _Requirements: 4.3, 4.4_
-  
-  - [x] 6.4 Write property test for reduced motion adaptation
-    - **Property 2: Reduced Motion Adaptation**
-    - **Validates: Requirements 4.3, 4.4**
-    - Test that blur and scale effects are excluded when reduced motion is enabled
-    - Verify opacity transitions remain functional
-
-- [ ] 7. Verify responsive behavior preservation
-  - [x] 7.1 Test character stagger timing across viewports
-    - Verify mobile viewports (< 768px) use 0.015s stagger
-    - Verify desktop viewports (≥ 768px) use 0.03s stagger
-    - _Requirements: 5.3_
-  
-  - [x] 7.2 Write property test for responsive character stagger
-    - **Property 3: Responsive Character Stagger Timing**
-    - **Validates: Requirements 5.3**
-    - Test that correct stagger timing is applied for any viewport width
-    - Verify media query listener updates stagger on viewport changes
-  
-  - [x] 7.3 Verify spacing and interactive elements
-    - Test that spacing (mb-sp-6, padding) is preserved
-    - Confirm buttons and social links remain accessible at all breakpoints
-    - _Requirements: 5.4, 5.5_
-
-- [ ] 8. Final checkpoint - Complete verification
-  - Run all unit tests and property tests
-  - Manually test at all breakpoints (mobile, sm, md, lg, xl)
-  - Verify no console errors or warnings
-  - Confirm Preloader is completely removed
-  - Ensure all tests pass, ask the user if questions arise
-
-## Notes
-
-- Tasks marked with `*` are optional and can be skipped for faster implementation
-- Each task references specific requirements for traceability
-- Property tests validate universal correctness properties from the design document
-- Unit tests validate specific implementation details and edge cases
-- Manual verification at checkpoints ensures visual quality matches design intent
-- All animation timing and responsive behavior must be preserved from original implementation

.kiro/specs/remove-preloader-adjust-hero/verification-1.4.md

@@ -1,71 +0,0 @@
-# Task 1.4 Verification: Body Overflow Not Manipulated
-
-## Task Description
-Verify that `document.body.style.overflow` is not set to "hidden" during initialization.
-
-## Verification Method
-Comprehensive code inspection of all relevant files that could potentially manipulate body overflow during application initialization.
-
-## Files Inspected
-
-### 1. app/page.tsx
-**Status:** ✅ No body overflow manipulation
-- No Preloader component import or rendering
-- No useEffect hooks that manipulate document.body
-- Clean component structure with only Hero and other content components
-
-### 2. app/components/Hero.tsx
-**Status:** ✅ No body overflow manipulation
-- Contains two useEffect hooks:
-  1. Media query listener for character stagger timing (lines 48-56)
-  2. Animation phase transition logic (lines 57-95)
-- Neither hook manipulates document.body.style.overflow
-- All effects are focused on component-internal state management
-
-### 3. app/layout.tsx
-**Status:** ✅ No body overflow manipulation
-- Root layout component with metadata configuration
-- No client-side effects or body manipulation
-- Clean server component structure
-
-### 4. app/providers/SmoothScrollProvider.tsx
-**Status:** ✅ No body overflow manipulation
-- Initializes Lenis smooth scroll library
-- Integrates with GSAP ScrollTrigger
-- No body overflow manipulation in useEffect hook
-- Only manages scroll behavior through Lenis API
-
-### 5. Preloader Component
-**Status:** ✅ Component deleted (Task 1.3)
-- File app/components/Preloader.tsx has been removed
-- This was the only component that previously set body overflow to "hidden"
-
-## Code Search Results
-
-### Search 1: Direct body overflow manipulation
-**Query:** `document\.body\.style\.overflow`
-**Results:** No matches in source code (only found in spec documentation)
-
-### Search 2: Body overflow with "hidden"
-**Query:** `body.*overflow.*hidden`
-**Results:** No matches in source code
-
-### Search 3: Any body.style manipulation
-**Query:** `body\.style`
-**Results:** No matches in source code
-
-## Conclusion
-
-✅ **VERIFIED:** The application does NOT manipulate `document.body.style.overflow` during initialization.
-
-### Evidence Summary:
-1. The Preloader component (which previously set overflow to "hidden") has been completely removed
-2. No other component in the application manipulates document.body.style.overflow
-3. Comprehensive code searches found zero instances of body overflow manipulation
-4. All initialization code (page, layout, providers, Hero) has been inspected and confirmed clean
-
-### Requirements Satisfied:
-- **Requirement 1.3:** "WHEN the application initializes, THE Page SHALL NOT apply overflow hidden to the document body" ✅
-
-## Recommendation
-Task 1.4 can be marked as complete. The verification confirms that body overflow is not manipulated anywhere in the application during initialization.

.kiro/specs/site-improvements-footer-companies/.config.kiro

@@ -1 +0,0 @@
-{"specId": "3fcf2565-1720-4d06-9224-82b23b02204c", "workflowType": "requirements-first", "specType": "feature"}

.kiro/specs/site-improvements-footer-companies/design.md

@@ -1,501 +0,0 @@
-# Design Document: Site Improvements - Footer & Companies
-
-## Overview
-
-This design implements site-wide improvements including spacing standardization, a complete footer component with contact information and social links, an animated company logos banner with infinite scroll, and reorganization of the Experience section into Software/Hardware categories. The implementation maintains the existing minimalist design system using Monument Extended typography, #ccff00 accent color, and Framer Motion animations.
-
-The design focuses on three main areas:
-1. **Spacing System Standardization**: Applying consistent spacing tokens across all sections
-2. **Footer Component**: A new footer with contact info, social links, and copyright
-3. **CompanyLogos Component**: An infinite-scroll animated banner displaying company logos
-4. **Experience Section Refactor**: Categorizing experiences into Software and Hardware groups
-
-All components follow the established design system patterns from `globals.css` and integrate with the existing Framer Motion animation infrastructure.
-
-## Architecture
-
-### Component Structure
-
-```
-app/
-├── components/
-│   ├── Footer.tsx (replace existing)
-│   ├── CompanyLogos.tsx (new)
-│   ├── Experience.tsx (refactor)
-│   └── Section.tsx (update spacing)
-├── page.tsx (update layout)
-└── globals.css (spacing documentation)
-```
-
-### Data Flow
-
-1. **Footer Component**: Static data (email, social links) defined as constants within the component
-2. **CompanyLogos Component**: Logo data (company names, image paths) defined as constants, rendered with animation
-3. **Experience Component**: Existing data from `usePortfolioData()` hook, filtered and categorized by type field
-
-### Animation Strategy
-
-All animations use Framer Motion with reduced motion support:
-- **CompanyLogos**: Continuous horizontal scroll using `animate` with infinite loop
-- **Footer**: Subtle hover states on social links
-- **Experience**: Existing stagger animations maintained, category headers added
-
-## Components and Interfaces
-
-### 1. Footer Component
-
-**Purpose**: Display contact information, social links, and copyright in a consistent footer layout.
-
-**Props**: None (self-contained component)
-
-**Structure**:
-```tsx
-interface SocialLink {
-  name: string;
-  href: string;
-  icon: string; // SVG path or icon identifier
-  ariaLabel: string;
-}
-
-const socialLinks: SocialLink[] = [
-  { name: 'GitHub', href: 'https://github.com/...', icon: '...', ariaLabel: 'Visit GitHub profile' },
-  { name: 'LinkedIn', href: 'https://linkedin.com/...', icon: '...', ariaLabel: 'Visit LinkedIn profile' },
-  // ... more links
-];
-```
-
-**Layout**:
-- Desktop: Three-column grid (contact info | social links | copyright)
-- Tablet: Two-column grid (contact/social | copyright)
-- Mobile: Single column stack
-
-**Styling**:
-- Background: `var(--ink)` with `border-t: 1px solid rgba(255,255,255,0.06)`
-- Typography: Monument Extended for headings, Geist Mono for body text
-- Accent: `var(--slash)` for link hover states
-- Padding: `py-sp-12 px-sp-16` (desktop), `py-sp-8 px-sp-6` (mobile)
-
-### 2. CompanyLogos Component
-
-**Purpose**: Display an infinite-scrolling banner of company logos after the header.
-
-**Props**: None (self-contained component)
-
-**Structure**:
-```tsx
-interface CompanyLogo {
-  name: string;
-  imagePath: string;
-  alt: string;
-}
-
-const companies: CompanyLogo[] = [
-  { name: 'Apolo Energia', imagePath: '/logos/apolo.svg', alt: 'Apolo Energia logo' },
-  { name: 'Julia Beauty Lashes', imagePath: '/logos/julia.svg', alt: 'Julia Beauty Lashes logo' },
-  { name: 'Innovo', imagePath: '/logos/innovo.svg', alt: 'Innovo logo' },
-  { name: 'TeraByteShop', imagePath: '/logos/terabyte.svg', alt: 'TeraByteShop logo' },
-  { name: 'Pichau', imagePath: '/logos/pichau.svg', alt: 'Pichau logo' },
-];
-```
-
-**Animation Implementation**:
-```tsx
-// Duplicate logo array for seamless loop
-const duplicatedLogos = [...companies, ...companies];
-
-// Framer Motion animation
-<motion.div
-  animate={{
-    x: [0, -50%], // Move by half the width (one set of logos)
-  }}
-  transition={{
-    duration: 30, // 30 seconds for full loop
-    repeat: Infinity,
-    ease: "linear",
-  }}
->
-  {duplicatedLogos.map((logo, index) => (
-    <img key={`${logo.name}-${index}`} src={logo.imagePath} alt={logo.alt} />
-  ))}
-</motion.div>
-```
-
-**Reduced Motion Handling**:
-```tsx
-const shouldReduceMotion = useReducedMotion();
-
-// If reduced motion, display static grid instead of animation
-{shouldReduceMotion ? (
-  <div className="grid grid-cols-5 gap-sp-6">
-    {companies.map(logo => <img key={logo.name} ... />)}
-  </div>
-) : (
-  <motion.div animate={...} />
-)}
-```
-
-**Styling**:
-- Container: `overflow-hidden` with `border-b: 1px solid var(--border)`
-- Background: `var(--paper)` with optional subtle grid pattern
-- Logo sizing: `h-12` (48px) with `grayscale` filter, `grayscale-0` on hover
-- Spacing: `py-sp-8` vertical padding, `gap-sp-12` between logos
-
-### 3. Experience Component Refactor
-
-**Purpose**: Organize experience entries into Software and Hardware categories.
-
-**Changes**:
-1. Add category filtering logic
-2. Render two separate sections with category headers
-3. Maintain existing card structure and animations
-
-**Implementation**:
-```tsx
-const softwareExperiences = sortedExperiences.filter(exp => exp.type === 'Software');
-const hardwareExperiences = sortedExperiences.filter(exp => exp.type === 'Hardware');
-
-return (
-  <Section id="experience" ...>
-    {/* Software Category */}
-    <div className="mb-sp-12">
-      <h3 className="font-display text-2xl font-bold mb-sp-6 flex items-center gap-sp-3">
-        <span className="text-[var(--slash)]">/</span> Software
-      </h3>
-      <motion.div variants={listVariants}>
-        {softwareExperiences.map(exp => <ExperienceCard key={exp.id} {...exp} />)}
-      </motion.div>
-    </div>
-
-    {/* Hardware Category */}
-    <div>
-      <h3 className="font-display text-2xl font-bold mb-sp-6 flex items-center gap-sp-3">
-        <span className="text-[var(--slash)]">/</span> Hardware
-      </h3>
-      <motion.div variants={listVariants}>
-        {hardwareExperiences.map(exp => <ExperienceCard key={exp.id} {...exp} />)}
-      </motion.div>
-    </div>
-  </Section>
-);
-```
-
-**Styling**:
-- Category headers: Monument Extended, `text-2xl`, with slash accent
-- Separator: `mb-sp-12` between categories
-- Cards: Maintain existing styling and animations
-
-### 4. Spacing System Updates
-
-**Standardization**:
-All sections should use consistent spacing tokens from `globals.css`:
-- Section padding: `py-sp-20 px-sp-16` (desktop), `py-sp-16 px-sp-6` (mobile)
-- Section margins: `mb-sp-12` between major sections
-- Card spacing: `space-y-sp-6` for vertical stacks
-- Grid gaps: `gap-sp-6` for 2-column, `gap-sp-4` for 4-column
-
-**Responsive Scaling**:
-Tailwind responsive utilities handle breakpoints:
-- Mobile: `px-sp-6 py-sp-16`
-- Tablet: `px-sp-10 py-sp-18`
-- Desktop: `px-sp-16 py-sp-20`
-
-## Data Models
-
-### SocialLink
-```typescript
-interface SocialLink {
-  name: string;          // Display name (e.g., "GitHub")
-  href: string;          // Full URL
-  icon: string;          // SVG path or icon component reference
-  ariaLabel: string;     // Accessibility label
-}
-```
-
-### CompanyLogo
-```typescript
-interface CompanyLogo {
-  name: string;          // Company name
-  imagePath: string;     // Path to logo image (SVG preferred)
-  alt: string;           // Alt text for accessibility
-}
-```
-
-### Experience (existing, with type field)
-```typescript
-interface Experience {
-  id: string;
-  title: string;
-  company: string;
-  type: 'Software' | 'Hardware';  // Used for categorization
-  period: string;
-  location: string;
-  description: string;
-  achievements: string[];
-  technologies: string[];
-  featured: boolean;
-}
-```
-
-
-## Correctness Properties
-
-*A property is a characteristic or behavior that should hold true across all valid executions of a system—essentially, a formal statement about what the system should do. Properties serve as the bridge between human-readable specifications and machine-verifiable correctness guarantees.*
-
-### Property 1: Consistent Spacing System
-
-*For any* major section or container element in the site, it should use spacing tokens from the design system (sp-1 through sp-24) with appropriate responsive modifiers for different viewport sizes.
-
-**Validates: Requirements 1.1, 1.2, 1.3, 1.4**
-
-### Property 2: Social Links Open in New Tab
-
-*For any* social media link in the Footer component, it should have `target="_blank"` and `rel="noopener noreferrer"` attributes to open in a new tab securely.
-
-**Validates: Requirements 2.7**
-
-### Property 3: Responsive Component Layout
-
-*For any* new component (Footer, CompanyLogos, Experience categories), it should include Tailwind responsive utility classes (sm:, md:, lg:) to adapt layout across viewport sizes.
-
-**Validates: Requirements 2.6, 3.7, 4.5**
-
-### Property 4: Reduced Motion Respect
-
-*For any* animated component, when `useReducedMotion()` returns true, the component should render a static alternative without motion animations.
-
-**Validates: Requirements 3.6, 6.3**
-
-### Property 5: Experience Categorization
-
-*For any* experience entry in the Experience section, it should be filtered by its `type` field and rendered within the corresponding Software or Hardware category group.
-
-**Validates: Requirements 4.1**
-
-### Property 6: Chronological Ordering Within Categories
-
-*For any* category group in the Experience section, the experience entries within that group should be sorted in descending chronological order by year.
-
-**Validates: Requirements 4.3**
-
-### Property 7: Monument Extended Typography
-
-*For any* heading element (h1, h2, h3) in new components (Footer, CompanyLogos, Experience categories), it should use the `font-display` class which applies Monument Extended font family.
-
-**Validates: Requirements 2.4, 4.2, 5.4**
-
-### Property 8: Slash Color Accents
-
-*For any* accent element (category separators, hover states, decorative elements) in new components, it should use `var(--slash)` color (#ccff00) via Tailwind classes like `text-[var(--slash)]` or `bg-[var(--slash)]`.
-
-**Validates: Requirements 5.1, 5.2**
-
-### Property 9: ARIA Labels for Links
-
-*For any* social media link in the Footer component, it should have a descriptive `aria-label` attribute that identifies the platform and action.
-
-**Validates: Requirements 6.1**
-
-### Property 10: Alt Text for Images
-
-*For any* company logo image in the CompanyLogos component, it should have a non-empty `alt` attribute describing the company.
-
-**Validates: Requirements 6.2**
-
-### Property 11: Semantic Heading Hierarchy
-
-*For any* sequence of heading elements in the Experience section, the heading levels should follow proper semantic hierarchy (h2 for section title, h3 for categories, no skipped levels).
-
-**Validates: Requirements 6.4**
-
-### Property 12: Keyboard Navigation Support
-
-*For any* interactive element (links, buttons) in new components, it should be keyboard accessible with proper focus states and no negative tabindex values.
-
-**Validates: Requirements 6.5**
-
-## Error Handling
-
-### Footer Component
-
-**Missing Social Links Data**:
-- Gracefully render empty state or hide social links section
-- Log warning to console in development mode
-- Ensure layout doesn't break with missing data
-
-**Invalid Email Format**:
-- Display email as-is (validation is not the footer's responsibility)
-- Ensure mailto: link is properly formatted
-
-### CompanyLogos Component
-
-**Missing Logo Images**:
-- Display company name as fallback text
-- Log warning for missing images in development
-- Maintain layout spacing even with missing images
-
-**Animation Performance Issues**:
-- Monitor frame rate using `useAnimationFrame` hook
-- Fallback to static display if performance drops below threshold
-- Respect `prefers-reduced-motion` preference
-
-### Experience Component
-
-**Missing Type Field**:
-- Default to "Software" category if type is undefined
-- Log warning for entries without type field
-- Ensure all entries are displayed (don't silently drop data)
-
-**Empty Categories**:
-- Hide category header if no entries exist for that type
-- Maintain spacing consistency when categories are hidden
-
-### General Error Handling
-
-**Component Render Errors**:
-- Wrap components in Error Boundaries
-- Display user-friendly error message
-- Log detailed error information for debugging
-
-**Responsive Layout Issues**:
-- Use CSS fallbacks for unsupported features
-- Test across major browsers and devices
-- Ensure content remains accessible even if styling fails
-
-## Testing Strategy
-
-### Dual Testing Approach
-
-This feature requires both unit tests and property-based tests to ensure comprehensive coverage:
-
-**Unit Tests**: Focus on specific examples, edge cases, and integration points
-- Specific component rendering scenarios
-- Edge cases (empty data, missing fields)
-- User interaction flows (clicking links, reduced motion)
-- Integration between components
-
-**Property-Based Tests**: Verify universal properties across all inputs
-- Spacing consistency across generated component trees
-- Accessibility attributes across generated link/image sets
-- Categorization logic across generated experience data
-- Responsive class application across generated components
-
-### Testing Framework
-
-**Framework**: Vitest + React Testing Library + fast-check
-- Vitest for test runner and assertions
-- React Testing Library for component testing
-- fast-check for property-based testing (TypeScript-native)
-
-**Property Test Configuration**:
-- Minimum 100 iterations per property test
-- Each test tagged with: `Feature: site-improvements-footer-companies, Property {number}: {property_text}`
-- Use custom generators for component props and data structures
-
-### Unit Test Coverage
-
-**Footer Component**:
-- Renders contact information correctly
-- Renders all social links with correct attributes
-- Displays current year in copyright
-- Opens social links in new tab
-- Applies correct styling classes
-- Responsive layout changes at breakpoints
-
-**CompanyLogos Component**:
-- Renders all five company logos
-- Duplicates logo array for infinite scroll
-- Applies animation with correct configuration
-- Displays static grid when reduced motion is enabled
-- Handles missing logo images gracefully
-- Maintains responsive layout
-
-**Experience Component**:
-- Filters experiences by Software/Hardware type
-- Renders category headers with correct styling
-- Maintains chronological order within categories
-- Hides empty categories
-- Applies consistent spacing between categories
-- Responsive layout on mobile devices
-
-### Property-Based Test Coverage
-
-**Property 1: Consistent Spacing System**
-- Generate random component trees with various nesting levels
-- Verify all spacing classes use design system tokens
-- Check responsive modifiers are present
-
-**Property 2: Social Links Open in New Tab**
-- Generate random arrays of social links
-- Verify each link has target="_blank" and rel="noopener noreferrer"
-
-**Property 3: Responsive Component Layout**
-- Generate random component configurations
-- Verify presence of responsive utility classes
-
-**Property 4: Reduced Motion Respect**
-- Generate random animation configurations
-- Verify static rendering when reduced motion is true
-
-**Property 5: Experience Categorization**
-- Generate random experience arrays with mixed types
-- Verify correct filtering and grouping by type
-
-**Property 6: Chronological Ordering Within Categories**
-- Generate random experience arrays with various dates
-- Verify descending chronological order within each category
-
-**Property 7: Monument Extended Typography**
-- Generate random heading elements
-- Verify font-display class is applied
-
-**Property 8: Slash Color Accents**
-- Generate random accent elements
-- Verify var(--slash) color usage
-
-**Property 9: ARIA Labels for Links**
-- Generate random social link arrays
-- Verify each has descriptive aria-label
-
-**Property 10: Alt Text for Images**
-- Generate random logo arrays
-- Verify each image has non-empty alt text
-
-**Property 11: Semantic Heading Hierarchy**
-- Generate random heading sequences
-- Verify proper h2 → h3 hierarchy without skips
-
-**Property 12: Keyboard Navigation Support**
-- Generate random interactive elements
-- Verify focusability and proper tabindex values
-
-### Integration Testing
-
-**Page Layout Integration**:
-- Verify CompanyLogos appears after Header
-- Verify Footer appears at bottom of page
-- Verify spacing between all sections is consistent
-- Test full page scroll behavior
-
-**Animation Performance**:
-- Monitor CompanyLogos animation frame rate
-- Verify smooth scrolling across devices
-- Test reduced motion fallback behavior
-
-**Accessibility Testing**:
-- Run axe-core automated accessibility tests
-- Verify keyboard navigation through all components
-- Test screen reader compatibility
-- Verify color contrast ratios meet WCAG AA standards
-
-### Visual Regression Testing
-
-**Snapshot Tests**:
-- Footer component in all responsive states
-- CompanyLogos with animation and static states
-- Experience section with both categories populated
-- Experience section with one empty category
-
-**Cross-Browser Testing**:
-- Chrome, Firefox, Safari, Edge
-- Mobile browsers (iOS Safari, Chrome Mobile)
-- Verify consistent rendering and animation performance

.kiro/specs/site-improvements-footer-companies/requirements.md

@@ -1,96 +0,0 @@
-# Requirements Document
-
-## Introduction
-
-This document specifies requirements for site-wide improvements including spacing fixes, a complete footer component, an animated company logos banner, and reorganization of the Experience section. These improvements enhance the visual consistency, professionalism, and user experience of the portfolio site.
-
-## Glossary
-
-- **Site**: The portfolio website built with Next.js 15, React 19, TypeScript, and Tailwind CSS 4
-- **Footer**: The bottom section of the Site containing contact information, social links, and copyright
-- **Companies_Banner**: A horizontal scrolling component displaying company logos after the header
-- **Experience_Section**: The section of the Site displaying professional work history
-- **Spacing_System**: The consistent vertical and horizontal spacing applied throughout the Site
-- **Monument_Extended**: The primary font family used for headings and emphasis
-- **Slash_Color**: The accent color (#ccff00) used for visual emphasis
-
-## Requirements
-
-### Requirement 1: Fix Spacing Inconsistencies
-
-**User Story:** As a visitor, I want consistent spacing throughout the site, so that the layout feels polished and professional.
-
-#### Acceptance Criteria
-
-1. THE Site SHALL apply consistent vertical spacing between all major sections
-2. THE Site SHALL apply consistent horizontal padding on all container elements
-3. THE Site SHALL maintain spacing consistency across mobile, tablet, and desktop viewports
-4. WHEN the viewport width changes, THE Spacing_System SHALL scale proportionally using Tailwind responsive utilities
-
-### Requirement 2: Create Footer Component
-
-**User Story:** As a visitor, I want to see contact information and social links in the footer, so that I can easily connect with the site owner.
-
-#### Acceptance Criteria
-
-1. THE Footer SHALL display contact information including email address
-2. THE Footer SHALL display clickable social media links
-3. THE Footer SHALL display copyright text with the current year
-4. THE Footer SHALL use Monument_Extended font for consistency
-5. THE Footer SHALL apply the minimalist design style matching the Site
-6. THE Footer SHALL be responsive across mobile, tablet, and desktop viewports
-7. WHEN a social link is clicked, THE Footer SHALL open the link in a new browser tab
-
-### Requirement 3: Create Animated Company Logos Banner
-
-**User Story:** As a visitor, I want to see companies the site owner has worked with, so that I can understand their professional experience.
-
-#### Acceptance Criteria
-
-1. THE Companies_Banner SHALL display logos for Apolo Energia, Julia Beauty Lashes, Innovo, TeraByteShop, and Pichau
-2. THE Companies_Banner SHALL be positioned after the header section
-3. THE Companies_Banner SHALL animate logos with horizontal scrolling motion
-4. THE Companies_Banner SHALL loop the animation continuously
-5. THE Companies_Banner SHALL maintain smooth animation performance at 60fps
-6. WHEN a user enables reduced motion preferences, THE Companies_Banner SHALL display static logos without animation
-7. THE Companies_Banner SHALL be responsive across mobile, tablet, and desktop viewports
-8. THE Companies_Banner SHALL duplicate logo sets to create seamless infinite scroll effect
-
-### Requirement 4: Reorganize Experience Section
-
-**User Story:** As a visitor, I want to see work experience organized by category, so that I can quickly find relevant projects.
-
-#### Acceptance Criteria
-
-1. THE Experience_Section SHALL organize entries into Software and Hardware categories
-2. THE Experience_Section SHALL display category headings using Monument_Extended font
-3. THE Experience_Section SHALL maintain chronological order within each category
-4. THE Experience_Section SHALL apply consistent spacing between category groups
-5. THE Experience_Section SHALL be responsive across mobile, tablet, and desktop viewports
-6. WHEN viewing on mobile, THE Experience_Section SHALL stack categories vertically
-
-### Requirement 5: Maintain Design Consistency
-
-**User Story:** As a visitor, I want all new components to match the existing design system, so that the site feels cohesive.
-
-#### Acceptance Criteria
-
-1. THE Footer SHALL use Slash_Color for accent elements
-2. THE Companies_Banner SHALL use Slash_Color for decorative elements
-3. THE Experience_Section SHALL use Slash_Color for category separators
-4. THE Site SHALL use Monument_Extended font for all headings in new components
-5. THE Site SHALL apply the minimalist design style to all new components
-6. THE Site SHALL maintain consistent color palette across all new components
-
-### Requirement 6: Ensure Accessibility
-
-**User Story:** As a visitor using assistive technology, I want all new components to be accessible, so that I can navigate and understand the content.
-
-#### Acceptance Criteria
-
-1. THE Footer SHALL include proper ARIA labels for social media links
-2. THE Companies_Banner SHALL include alt text for all company logos
-3. THE Companies_Banner SHALL respect prefers-reduced-motion system preference
-4. THE Experience_Section SHALL use semantic HTML heading hierarchy
-5. THE Site SHALL maintain keyboard navigation support for all interactive elements
-6. THE Site SHALL maintain sufficient color contrast ratios for all text elements

.kiro/specs/site-improvements-footer-companies/tasks.md

@@ -1,189 +0,0 @@
-# Implementation Plan: Site Improvements - Footer & Companies
-
-## Overview
-
-This implementation adds a complete footer component with contact information and social links, an animated company logos banner with infinite scroll, reorganizes the Experience section into Software/Hardware categories, and standardizes spacing across the site. All components follow the existing minimalist design system using Monument Extended typography, #ccff00 accent color, and Framer Motion animations with reduced motion support.
-
-## Tasks
-
-- [x] 1. Set up component structure and data models
-  - Create Footer.tsx component file
-  - Create CompanyLogos.tsx component file
-  - Define TypeScript interfaces for SocialLink and CompanyLogo
-  - Set up component exports
-  - _Requirements: 2.1, 2.2, 3.1_
-
-- [ ] 2. Implement Footer component
-  - [~] 2.1 Create Footer component with layout structure
-    - Implement three-column grid layout (desktop) and responsive stacks (tablet/mobile)
-    - Add contact information section with email
-    - Add social links section with GitHub, LinkedIn, and other platforms
-    - Add copyright section with dynamic current year
-    - Apply Monument Extended typography and minimalist styling
-    - Use spacing tokens (py-sp-12 px-sp-16 desktop, py-sp-8 px-sp-6 mobile)
-    - _Requirements: 2.1, 2.2, 2.3, 2.4, 2.5, 2.6_
-  
-  - [x] 2.2 Write property test for Footer social links
-    - **Property 2: Social Links Open in New Tab**
-    - **Validates: Requirements 2.7**
-  
-  - [x] 2.3 Write property test for Footer ARIA labels
-    - **Property 9: ARIA Labels for Links**
-    - **Validates: Requirements 6.1**
-  
-  - [x] 2.4 Write property test for Footer responsive layout
-    - **Property 3: Responsive Component Layout**
-    - **Validates: Requirements 2.6**
-  
-  - [x] 2.5 Write unit tests for Footer component
-    - Test contact information rendering
-    - Test social links with correct attributes
-    - Test current year in copyright
-    - Test responsive layout changes
-    - _Requirements: 2.1, 2.2, 2.3, 2.6, 2.7_
-
-- [ ] 3. Implement CompanyLogos component
-  - [~] 3.1 Create CompanyLogos component with animation
-    - Define company logos array (Apolo Energia, Julia Beauty Lashes, Innovo, TeraByteShop, Pichau)
-    - Implement infinite scroll animation using Framer Motion
-    - Duplicate logo array for seamless loop effect
-    - Configure animation with 30-second duration and linear easing
-    - Apply grayscale filter with hover effect
-    - Use spacing tokens (py-sp-8, gap-sp-12)
-    - _Requirements: 3.1, 3.2, 3.3, 3.4, 3.5, 3.7, 3.8_
-  
-  - [~] 3.2 Add reduced motion support to CompanyLogos
-    - Implement useReducedMotion hook integration
-    - Create static grid fallback for reduced motion preference
-    - Ensure smooth transition between animated and static states
-    - _Requirements: 3.6, 6.3_
-  
-  - [x] 3.3 Write property test for CompanyLogos reduced motion
-    - **Property 4: Reduced Motion Respect**
-    - **Validates: Requirements 3.6, 6.3**
-  
-  - [x] 3.4 Write property test for CompanyLogos alt text
-    - **Property 10: Alt Text for Images**
-    - **Validates: Requirements 6.2**
-  
-  - [x] 3.5 Write unit tests for CompanyLogos component
-    - Test all five logos render correctly
-    - Test animation configuration
-    - Test reduced motion fallback
-    - Test missing logo image handling
-    - Test responsive layout
-    - _Requirements: 3.1, 3.3, 3.4, 3.6, 3.7_
-
-- [~] 4. Checkpoint - Ensure all tests pass
-  - Ensure all tests pass, ask the user if questions arise.
-
-- [ ] 5. Refactor Experience component with categorization
-  - [~] 5.1 Add category filtering and rendering logic
-    - Filter experiences by type field (Software/Hardware)
-    - Create category header components with slash accent
-    - Render Software category section with filtered experiences
-    - Render Hardware category section with filtered experiences
-    - Maintain chronological ordering within each category
-    - Apply consistent spacing (mb-sp-12 between categories)
-    - Hide category headers if no entries exist
-    - _Requirements: 4.1, 4.2, 4.3, 4.4, 4.5, 4.6_
-  
-  - [x] 5.2 Write property test for Experience categorization
-    - **Property 5: Experience Categorization**
-    - **Validates: Requirements 4.1**
-  
-  - [x] 5.3 Write property test for chronological ordering
-    - **Property 6: Chronological Ordering Within Categories**
-    - **Validates: Requirements 4.3**
-  
-  - [x] 5.4 Write property test for semantic heading hierarchy
-    - **Property 11: Semantic Heading Hierarchy**
-    - **Validates: Requirements 6.4**
-  
-  - [~] 5.5 Write unit tests for Experience refactor
-    - Test Software/Hardware filtering
-    - Test category headers render correctly
-    - Test chronological order within categories
-    - Test empty category handling
-    - Test responsive mobile layout
-    - _Requirements: 4.1, 4.2, 4.3, 4.5, 4.6_
-
-- [ ] 6. Standardize spacing system across site
-  - [~] 6.1 Update Section component and all major sections
-    - Apply consistent spacing tokens to all section containers
-    - Update Hero section spacing (py-sp-20 px-sp-16 desktop, py-sp-16 px-sp-6 mobile)
-    - Update About section spacing
-    - Update Projects section spacing
-    - Update Experience section spacing
-    - Add responsive modifiers for tablet and mobile breakpoints
-    - _Requirements: 1.1, 1.2, 1.3, 1.4_
-  
-  - [~] 6.2 Write property test for spacing consistency
-    - **Property 1: Consistent Spacing System**
-    - **Validates: Requirements 1.1, 1.2, 1.3, 1.4**
-  
-  - [~] 6.3 Write unit tests for spacing updates
-    - Test section padding values
-    - Test responsive spacing changes
-    - Test spacing between major sections
-    - _Requirements: 1.1, 1.2, 1.3, 1.4_
-
-- [ ] 7. Apply design system consistency
-  - [~] 7.1 Add Monument Extended typography to new components
-    - Verify font-display class on all heading elements
-    - Verify Footer headings use Monument Extended
-    - Verify Experience category headers use Monument Extended
-    - _Requirements: 2.4, 4.2, 5.4_
-  
-  - [~] 7.2 Add slash color accents to new components
-    - Apply var(--slash) to Footer accent elements
-    - Apply var(--slash) to CompanyLogos decorative elements
-    - Apply var(--slash) to Experience category separators
-    - _Requirements: 5.1, 5.2, 5.3_
-  
-  - [~] 7.3 Write property test for Monument Extended typography
-    - **Property 7: Monument Extended Typography**
-    - **Validates: Requirements 2.4, 4.2, 5.4**
-  
-  - [~] 7.4 Write property test for slash color accents
-    - **Property 8: Slash Color Accents**
-    - **Validates: Requirements 5.1, 5.2**
-  
-  - [~] 7.5 Write unit tests for design consistency
-    - Test font-display class application
-    - Test slash color usage
-    - Test minimalist styling consistency
-    - _Requirements: 5.1, 5.2, 5.4, 5.5_
-
-- [ ] 8. Integrate components into page layout
-  - [~] 8.1 Update page.tsx with new components
-    - Import Footer and CompanyLogos components
-    - Position CompanyLogos after Header section
-    - Position Footer at bottom of page
-    - Verify spacing between all sections
-    - Test full page scroll behavior
-    - _Requirements: 3.2_
-  
-  - [~] 8.2 Write property test for keyboard navigation
-    - **Property 12: Keyboard Navigation Support**
-    - **Validates: Requirements 6.5**
-  
-  - [~] 8.3 Write integration tests for page layout
-    - Test CompanyLogos position after Header
-    - Test Footer position at page bottom
-    - Test spacing consistency across all sections
-    - Test keyboard navigation through all components
-    - _Requirements: 3.2, 6.5_
-
-- [~] 9. Final checkpoint - Ensure all tests pass
-  - Ensure all tests pass, ask the user if questions arise.
-
-## Notes
-
-- Tasks marked with `*` are optional and can be skipped for faster MVP
-- Each task references specific requirements for traceability
-- Checkpoints ensure incremental validation
-- Property tests validate universal correctness properties across all inputs
-- Unit tests validate specific examples and edge cases
-- All components use Next.js 15, React 19, TypeScript, Tailwind CSS 4, and Framer Motion
-- Reduced motion support is critical for accessibility compliance

3d/FERRAMENTAS.md

@@ -0,0 +1,30 @@
+# Ferramentas do jogo
+
+Programas baixados ficam em `3d/ferramentas/`, fora do git (`/3d/ferramentas/` no `.gitignore`), instalados sem sudo e sem login.
+
+| programa | versão | licença (frase lida e arquivo) | como baixar | comando sem janela |
+| --- | --- | --- | --- | --- |
+| Tiled (com `tmxrasterizer`) | 1.12.2 | GPL-2.0 (editor) e BSD-2-Clause (`libtiled`, `tmxrasterizer`). Em `COPYING` do pacote: "Tiled src/tiled GPL … tmxrasterizer src/tmxrasterizer BSD 2-clause license … The full text of each license is provided in the files LICENSE.GPL and LICENSE.BSD." Arquivo: `/app/share/licenses/org.mapeditor.Tiled/tiled/COPYING` no Flatpak (o mesmo texto em `3d/ferramentas/tiled/squashfs-root/COPYING` no AppImage). | `flatpak install --user -y flathub org.mapeditor.Tiled`. O AppImage (`3d/ferramentas/tiled/`, das [releases](https://github.com/mapeditor/tiled/releases/tag/v1.12.2)) roda, mas só traz o plugin Qt `xcb` e falha com `QT_QPA_PLATFORM=offscreen`; `xvfb-run` não existe aqui. | `env -u DISPLAY -u WAYLAND_DISPLAY flatpak run --env=QT_QPA_PLATFORM=offscreen --command=tiled org.mapeditor.Tiled --export-map json "$PWD/3d/mapa/escritorio.tmx" "$PWD/3d/mapa/escritorio.json"` e `env -u DISPLAY -u WAYLAND_DISPLAY flatpak run --env=QT_QPA_PLATFORM=offscreen --command=tmxrasterizer org.mapeditor.Tiled "$PWD/3d/mapa/escritorio.tmx" "$PWD/3d/mapa/escritorio.png"` |
+| Blender | 5.2.2 LTS (`blender --version`) | GPL. Em `/usr/share/doc/blender/readme.html`: "Blender can be used freely for any purpose, including commercial use and distribution. It's free and open-source software, released under the GNU GPL licence." Bibliotecas de terceiros em `/usr/share/doc/blender/license/license.md`. | Já instalado pelo sistema (pacote `blender` 5.2.2-2 do Manjaro). | `blender -b -P script.py` |
+| MPFB (MakeHuman para Blender, extensão) | 2.0.18 (`blender_manifest.toml`; build 20261010) | Código GPL-3.0-or-later, recursos CC0. Em `LICENSE.md` do [repositório](https://github.com/makehumancommunity/mpfb2/blob/master/LICENSE.md): "The MPFB source (as defined per the above) is released under GPLv3." e "These assets have been released under CC0 1.0 Universal."; sobre a saída: "As the assets have been released under CC0, there is no limitation on what you can do with this combined output." O zip da extensão não traz arquivo de licença; o manifesto diz `license = ["SPDX:GPL-3.0-or-later"]`. | `3d/ferramentas/baixados/add-on-mpfb-v2.0.18.zip` de [extensions.blender.org](https://extensions.blender.org/add-ons/mpfb/) (sha256 `c075b3e9…2a2dad`), instalado só na pasta separada: `BLENDER_USER_RESOURCES=$PWD/3d/ferramentas/blender-user blender -b --factory-startup --command extension install-file -r user_default -e 3d/ferramentas/baixados/add-on-mpfb-v2.0.18.zip` | `BLENDER_USER_RESOURCES=$PWD/3d/ferramentas/blender-user blender -b -P 3d/humano.py` (instala os pacotes abaixo na pasta de dados do MPFB se faltarem) |
+
+## Como mudar o mapa
+
+1. Abrir `3d/mapa/escritorio.tmx` no Tiled: `flatpak run org.mapeditor.Tiled 3d/mapa/escritorio.tmx`.
+2. Editar as camadas `planta`, `moveis` e `marcas` e salvar.
+3. Rodar `bash 3d/mapa.sh`: exporta `3d/mapa/escritorio.json` e `escritorio.png`, escreve `lib/jogo/mapas/escritorio.ts` e monta `public/jogo/mapa.glb` no Blender.
+4. Rodar `pnpm test -- lib/jogo/mapas`.
+
+O `.tmx` é a fonte. `bash 3d/mapa.sh --gerar` refaz o `.tmx` pelo `3d/mapa.py` e apaga o que foi editado à mão.
+
+## Pacotes de recursos do MPFB
+
+Baixados de `https://files.makehumancommunity.org/asset_packs/<pacote>/<pacote>_cc0.zip` (o link `files2` da [página](https://static.makehumancommunity.org/assets/assetpacks/index.html) dá o mesmo arquivo, mas a ~10 KB/s) para `3d/ferramentas/baixados/` e extraídos em `3d/ferramentas/blender-user/extensions/.user/user_default/mpfb/data/`. Nenhum zip traz arquivo de licença: a licença lida é o campo `"license"` de cada recurso em `packs/<pacote>.json` (dentro do zip) e o cabeçalho dos arquivos usados. Há cabeçalhos AGPL em alguns arquivos de pacotes marcados CC0 (ex.: `cortu_cargo_pants/cargo_pants.obj`, `blindsaypatten_uniform_skin_texture.mhmat`); esses ficaram de fora.
+
+| pacote | sha256 | recursos usados em `3d/humano.py` | licença lida |
+| --- | --- | --- | --- |
+| makehuman_system_assets | `b542127a…0a0107` | pele `young_caucasian_male`, olhos `low-poly`, sobrancelha `eyebrow001`, cabelo `short02` (a malha base e o esqueleto `mixamo` vêm dentro da extensão, recursos CC0 pelo `LICENSE.md` acima) | CC0 nos 94 itens de `packs/makehuman_system_assets.json`; cabeçalho dos `.mhmat`/`.mhclo`: "This asset was explicitly released as CC0 in september 2020." |
+| shirts01 | `a5a723b0…3bcd3` | `namuhekam_male_polo_shirt` (autor namuhekam) | `"license": "CC0"` em `packs/shirts01.json`; CC0 no cabeçalho do `.mhclo`, `.obj` e `.mhmat` |
+| pants01 | `e4e0ec60…ad9` | `toigo_wool_pants` (autora MargaretToigo) | `"license": "CC0"` em `packs/pants01.json`; CC0 no cabeçalho do `.mhclo` e `.obj` |
+| shoes01 | `ded3f704…5dba9` | `toigo_ankle_boots_male` (autora MargaretToigo) | `"license": "CC0"` em `packs/shoes01.json`; CC0 no cabeçalho do `.mhclo` e `.obj` |
+| skins01, hair01 | `7495ab99…4ad9`, `49445d69…40c9` | baixados, não usados | CC0 no `packs/*.json`, mas com cabeçalhos AGPL em 2 e 10 arquivos |

3d/blocos.py

@@ -0,0 +1,619 @@
+"""Kit de blocos do hero: um bloco chanfrado e quatro estados com o mesmo N.
+
+Rodar da raiz do repositório:  blender -b --python 3d/blocos.py
+Gera public/3d/bloco.glb, public/3d/blocos.json, os dois matcaps, o pôster do hero e os dos estados (Cycles) e, em
+3d/out/, o .blend e as prévias de cada estado.
+Coordenadas do JSON: Y para cima, peça de frente para +Z, centrada na origem.
+"""
+
+import ctypes
+import gzip
+import math
+import os
+import sys
+
+import bmesh
+import bpy
+import numpy as np
+from bpy_extras.object_utils import world_to_camera_view
+from mathutils import Vector
+
+RAIZ = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
+PUBLICO = os.path.join(RAIZ, "public", "3d")
+SAIDA = os.path.join(RAIZ, "3d", "out")
+GLB = os.path.join(PUBLICO, "bloco.glb")
+JSON = os.path.join(PUBLICO, "blocos.json")
+
+ESTADOS = ["marca", "tela", "integracoes", "dados"]
+PASSO = 7  # números por bloco: x, y, z, sx, sy, sz, tom
+CAIXA = (16, 11, 4)
+
+# ---------------------------------------------------------------- marca
+# public/brand/mark-dark.svg (viewBox 210 220 830 800)
+POLIGONO = [
+    (245, 757), (321, 757), (321, 681), (399, 681), (399, 606), (476, 606),
+    (476, 757), (399, 757), (399, 878), (523, 878), (523, 757), (654, 757),
+    (654, 913), (594, 913), (594, 982), (245, 982),
+]
+# a forma branca em retângulos exatos (u0, v0, u1, v1), sem sobreposição
+BRANCOS = [
+    (399, 606, 476, 757),
+    (321, 681, 399, 757),
+    (245, 757, 399, 982),
+    (523, 757, 594, 878),
+    (594, 757, 654, 913),
+    (399, 878, 594, 982),
+]
+LIMAS = [
+    (511, 512, 667, 688),
+    (667, 358, 821, 512),
+    (844, 255, 947, 358),
+    (906, 432, 1007, 533),
+]
+LADO_SVG = 38
+ESCALA = 10 / 727  # altura da marca (255..982) vira 10
+CU, CV = (245 + 1007) / 2, (255 + 982) / 2  # centro da marca no SVG
+
+
+def svg_para_mundo(u, v):
+    return (u - CU) * ESCALA, -(v - CV) * ESCALA
+
+
+def estado_marca():
+    sz = LADO_SVG * ESCALA
+    blocos = []
+    for tom, retangulos in ((0, BRANCOS), (1, LIMAS)):
+        for u0, v0, u1, v1 in retangulos:
+            nx = max(1, round((u1 - u0) / LADO_SVG))
+            ny = max(1, round((v1 - v0) / LADO_SVG))
+            bu, bv = (u1 - u0) / nx, (v1 - v0) / ny
+            for i in range(nx):
+                for j in range(ny):
+                    x, y = svg_para_mundo(u0 + (i + 0.5) * bu, v0 + (j + 0.5) * bv)
+                    for z in (-sz / 2, sz / 2):
+                        blocos.append((x, y, z, bu * ESCALA, bv * ESCALA, sz, tom))
+    return blocos
+
+
+# ------------------------------------------- tela, integrações, dados
+# Desenhados numa grade inteira (coluna i, linha j com j = 0 no topo, camada k
+# para +Z). O passo em mundo sai do tamanho da grade; a densidade de cada
+# desenho foi escolhida para ficar entre 85% e 100% de N.
+
+
+class Grade:
+    def __init__(self):
+        self.celulas = {}
+
+    def bloco(self, i, j, k=0, tom=0):
+        # lima prevalece quando dois elementos caem na mesma célula
+        chave = (round(i), round(j), k)
+        self.celulas[chave] = max(tom, self.celulas.get(chave, 0))
+
+    def cheio(self, i0, j0, i1, j1, k=0, tom=0):
+        for i in range(i0, i1 + 1):
+            for j in range(j0, j1 + 1):
+                self.bloco(i, j, k, tom)
+
+    def contorno(self, i0, j0, i1, j1, k=0, tom=0):
+        for i in range(i0, i1 + 1):
+            self.bloco(i, j0, k, tom)
+            self.bloco(i, j1, k, tom)
+        for j in range(j0 + 1, j1):
+            self.bloco(i0, j, k, tom)
+            self.bloco(i1, j, k, tom)
+
+    def linha(self, a, b, k=0, tom=0):
+        n = math.ceil(max(abs(b[0] - a[0]), abs(b[1] - a[1]))) * 2 + 1
+        for t in range(n + 1):
+            f = t / n
+            self.bloco(
+                math.floor(a[0] + (b[0] - a[0]) * f + 0.5),
+                math.floor(a[1] + (b[1] - a[1]) * f + 0.5),
+                k,
+                tom,
+            )
+
+    def disco(self, ci, cj, r, k=0, tom=0):
+        n = math.floor(r)
+        for di in range(-n, n + 1):
+            for dj in range(-n, n + 1):
+                if di * di + dj * dj <= r * r:
+                    self.bloco(ci + di, cj + dj, k, tom)
+
+    def blocos(self):
+        cel = self.celulas
+        ii = [c[0] for c in cel]
+        jj = [c[1] for c in cel]
+        kk = [c[2] for c in cel]
+        largura = max(ii) - min(ii) + 1
+        altura = max(jj) - min(jj) + 1
+        camadas = max(kk) - min(kk) + 1
+        # maior passo que cabe na caixa, com folga
+        p = min(14.5 / largura, 9.8 / altura, 3.8 / camadas)
+        mi, mj, mk = (max(ii) + min(ii)) / 2, (max(jj) + min(jj)) / 2, (max(kk) + min(kk)) / 2
+        return [
+            ((i - mi) * p, -(j - mj) * p, (k - mk) * p, p, p, p, tom)
+            for (i, j, k), tom in sorted(cel.items())
+        ]
+
+
+def estado_tela():
+    # referência: drawScreen em app/components/cinematic/HeroFieldScene.tsx
+    g = Grade()
+    C, R = 26, 18
+    g.contorno(0, 0, C - 1, R - 1)  # moldura
+    for i in (2, 4, 6):
+        g.bloco(i, 1)  # três pontos
+    g.cheio(1, 2, C - 2, 2)  # barra do navegador
+    g.cheio(2, 4, 9, 5)  # título
+    g.cheio(2, 7, 12, 7)  # texto
+    g.cheio(2, 9, 9, 9)
+    for k in (0, 1):
+        g.cheio(2, 11, 7, 11, k, tom=1)  # botão, saltado para a frente
+    g.contorno(15, 4, C - 3, 11)  # imagem
+    g.linha((16, 10), (19, 7))
+    g.linha((19, 7), (21, 9))
+    g.bloco(21, 6)
+    for i0 in (2, 10, 18):
+        g.contorno(i0, 13, i0 + 5, 15)  # cartões
+    return g.blocos()
+
+
+def estado_integracoes():
+    # referência: drawIntegrations em HeroFieldScene.tsx
+    g = Grade()
+    A, B = 11, 7.5  # semieixos da elipse dos nós
+    r_nucleo, r_no = 2.6, 1.6
+    for k in (0, 1):
+        g.disco(0, 0, r_nucleo, k, tom=1)
+    nos = []
+    for n in range(6):
+        a = n / 6 * math.tau + math.pi / 6
+        nos.append((round(math.cos(a) * A), round(math.sin(a) * B)))
+    for n, (x, y) in enumerate(nos):
+        for k in (0, 1):
+            g.disco(x, y, r_no, k)
+        g.bloco(x, y, 1, tom=1)
+        d = math.hypot(x, y)
+        ux, uy = x / d, y / d
+        g.linha((ux * (r_nucleo + 0.5), uy * (r_nucleo + 0.5)), (x - ux * (r_no + 0.5), y - uy * (r_no + 0.5)))
+        nx, ny = nos[(n + 1) % 6]
+        dx, dy = nx - x, ny - y
+        d = math.hypot(dx, dy)
+        g.linha((x + dx / d * (r_no + 0.5), y + dy / d * (r_no + 0.5)), (nx - dx / d * (r_no + 0.5), ny - dy / d * (r_no + 0.5)))
+    return g.blocos()
+
+
+def estado_dados():
+    # referência: drawData em HeroFieldScene.tsx; a coluna da direita vira barras em +Z
+    g = Grade()
+    C, R = 24, 15
+    g.contorno(0, 0, C - 1, R - 1)
+    g.cheio(1, 1, C - 2, 2, tom=1)  # cabeçalho
+    colunas = (7, 13, 18)
+    for c in colunas:
+        g.cheio(c, 3, c, R - 2)
+    valores = ((5, 3, 2), (3, 4, 3), (4, 2, 1), (2, 4, 3), (5, 3, 2))
+    alturas = (2, 4, 1, 5, 3)
+    for linha, (v, h) in enumerate(zip(valores, alturas)):
+        j = 4 + linha * 2
+        for inicio, comprimento in zip((2, 9, 15), v):
+            g.cheio(inicio, j, inicio + comprimento - 1, j)
+        for k in range(h + 1):
+            g.cheio(20, j, 21, j, k, tom=int(k == h))  # topo da barra em lima
+    return g.blocos()
+
+
+# ------------------------------------------------ montagem dos estados
+
+
+def chave(b):
+    return (round(b[0], 3), round(b[1], 3), round(b[2], 3))
+
+
+def completar(blocos, n):
+    """Ordena por (x, y, z) e põe os que faltam para n ocultos sobre visíveis espalhados."""
+    visiveis = sorted(blocos, key=chave)
+    v, h = len(visiveis), n - len(visiveis)
+    if h < 0:
+        falhar(f"estado com {v} blocos, mais que N={n}")
+    ocultos = []
+    for m in range(h):
+        x, y, z, _, _, _, tom = visiveis[(m * 2 + 1) * v // (h * 2)]
+        ocultos.append((x, y, z, 0, 0, 0, tom))
+    # oculto fica logo depois do visível em que está, mesma chave espacial
+    return sorted(visiveis + ocultos, key=lambda b: (chave(b), b[3] == 0))
+
+
+def fmt(v):
+    s = f"{v:.3f}"
+    return "0.000" if s == "-0.000" else s
+
+
+# ------------------------------------------------------------- Blender
+
+
+def srgb(h):
+    def lin(c):
+        c /= 255
+        return c / 12.92 if c <= 0.04045 else ((c + 0.055) / 1.055) ** 2.4
+
+    return (*(lin(int(h[i : i + 2], 16)) for i in (0, 2, 4)), 1.0)
+
+
+def criar_bloco():
+    malha = bpy.data.meshes.new("bloco")
+    bm = bmesh.new()
+    bmesh.ops.create_cube(bm, size=1)
+    bm.to_mesh(malha)
+    bm.free()
+    obj = bpy.data.objects.new("bloco", malha)
+    bpy.context.scene.collection.objects.link(obj)
+    bpy.context.view_layer.objects.active = obj
+    obj.select_set(True)
+    chanfro = obj.modifiers.new("chanfro", "BEVEL")
+    chanfro.width = 0.08
+    chanfro.segments = 2
+    malha.shade_smooth()
+    pesos = obj.modifiers.new("normais", "WEIGHTED_NORMAL")
+    pesos.keep_sharp = True
+    for m in ("chanfro", "normais"):
+        bpy.ops.object.modifier_apply(modifier=m)
+    return obj
+
+
+def exportar_glb(obj):
+    bpy.ops.object.select_all(action="DESELECT")
+    obj.select_set(True)
+    bpy.ops.export_scene.gltf(
+        filepath=GLB,
+        export_format="GLB",
+        use_selection=True,
+        export_yup=True,
+        export_apply=True,
+        export_normals=True,
+        export_texcoords=False,
+        export_tangents=False,
+        export_materials="NONE",
+        export_vertex_color="NONE",
+        export_attributes=False,
+        export_extras=False,
+        export_animations=False,
+        export_draco_mesh_compression_enable=False,
+    )
+
+
+def montar_cena(estados, malha):
+    cena = bpy.context.scene
+    materiais = criar_materiais()
+    malha.materials.append(materiais[0])
+    colecoes = {}
+    for nome, blocos in zip(ESTADOS, estados):
+        col = bpy.data.collections.new(nome)
+        cena.collection.children.link(col)
+        colecoes[nome] = col
+        for n, (x, y, z, sx, sy, sz, tom) in enumerate(blocos):
+            obj = bpy.data.objects.new(f"{nome}.{n:03d}", malha)
+            col.objects.link(obj)
+            # arquivo Y-up/+Z frente -> Blender Z-up/-Y frente
+            obj.location = (x, -z, y)
+            obj.scale = (sx, sz, sy)
+            obj.material_slots[0].link = "OBJECT"
+            obj.material_slots[0].material = materiais[tom]
+            obj.hide_render = obj.hide_viewport = sx == 0
+    return colecoes, materiais
+
+
+def renderizar(colecoes):
+    cena = bpy.context.scene
+    cena.render.engine = "BLENDER_WORKBENCH"
+    cena.render.resolution_x, cena.render.resolution_y = 800, 600
+    cena.render.resolution_percentage = 100
+    cena.render.image_settings.file_format = "PNG"
+    cena.view_settings.view_transform = "Standard"
+    cena.display.shading.light = "STUDIO"
+    cena.display.shading.color_type = "MATERIAL"
+    cena.display.shading.show_cavity = True
+    cena.world = bpy.data.worlds.new("fundo")
+    cena.world.color = (0.008, 0.008, 0.01)
+
+    cam = bpy.data.objects.new("camera", bpy.data.cameras.new("camera"))
+    cena.collection.objects.link(cam)
+    cam.location = (-6.0, -25.0, 3.0)  # pela esquerda: barras de dados saem para fora da tabela
+    cam.rotation_euler = (-cam.location.normalized()).to_track_quat("-Z", "Y").to_euler()
+    cena.camera = cam
+
+    for nome in ESTADOS:
+        for outro, col in colecoes.items():
+            col.hide_render = col.hide_viewport = outro != nome
+        cena.render.filepath = os.path.join(SAIDA, f"previa-{nome}.png")
+        bpy.ops.render.render(write_still=True)
+    for outro, col in colecoes.items():
+        col.hide_render = col.hide_viewport = outro != "marca"
+
+
+# ------------------------------------------------------- render final
+# Porcelana fosca com um verniz fino e esmalte lima com emissão leve, numa luz de estúdio de três pontos.
+# Os matcaps (uma esfera de cada material, vista de frente) levam essa mesma luz para o tempo real.
+
+
+def criar_materiais():
+    def material(nome, cor, **entradas):
+        mat = bpy.data.materials.new(nome)
+        mat.diffuse_color = srgb(cor)  # cor da prévia (Workbench)
+        bsdf = mat.node_tree.nodes["Principled BSDF"]
+        bsdf.inputs["Base Color"].default_value = srgb(cor)
+        for entrada, valor in entradas.items():
+            bsdf.inputs[entrada].default_value = valor
+        return mat
+
+    return {
+        0: material("porcelana", "f4f3ef", **{"Roughness": 0.5, "Coat Weight": 0.12, "Coat Roughness": 0.3}),
+        1: material(
+            "lima",
+            "d5fa00",
+            **{
+                "Roughness": 0.28,
+                "Coat Weight": 0.3,
+                "Coat Roughness": 0.12,
+                "Emission Color": srgb("d5fa00"),
+                "Emission Strength": 0.06,
+            },
+        ),
+    }
+
+
+def olhar_para_a_origem(obj):
+    obj.rotation_euler = (-Vector(obj.location).normalized()).to_track_quat("-Z", "Y").to_euler()
+
+
+def enquadrar(camera, objetos, direcao, ocupa):
+    """Põe a câmera na direção dada, olhando a origem, na distância em que os objetos ocupam essa fração do quadro."""
+    cena = bpy.context.scene
+    cantos = [obj.matrix_world @ Vector(c) for obj in objetos for c in obj.bound_box]
+    distancia = 40
+    for _ in range(3):  # com lente longa o tamanho na tela é quase 1 / distância: três passos convergem
+        camera.location = Vector(direcao).normalized() * distancia
+        olhar_para_a_origem(camera)
+        bpy.context.view_layer.update()
+        vistos = [world_to_camera_view(cena, camera, p) for p in cantos]
+        distancia *= 2 * max(max(abs(p.x - 0.5), abs(p.y - 0.5)) for p in vistos) / ocupa
+
+
+def luz(nome, posicao, lado, potencia, cor=(1, 1, 1)):
+    dados = bpy.data.lights.new(nome, "AREA")
+    dados.shape = "SQUARE"
+    dados.size = lado
+    dados.energy = potencia
+    dados.color = cor
+    obj = bpy.data.objects.new(nome, dados)
+    bpy.context.scene.collection.objects.link(obj)
+    obj.location = posicao
+    olhar_para_a_origem(obj)
+
+
+def ligar_cycles(cena):
+    """Cycles na GPU com OptiX quando a máquina tem; senão segue na CPU."""
+    cena.render.engine = "CYCLES"
+    cena.cycles.use_denoising = True
+    prefs = bpy.context.preferences.addons["cycles"].preferences
+    try:
+        prefs.compute_device_type = "OPTIX"
+    except TypeError:
+        return
+    prefs.get_devices_for_type("OPTIX")
+    for aparelho in prefs.devices:
+        aparelho.use = aparelho.type == "OPTIX"
+    if any(aparelho.use for aparelho in prefs.devices):
+        cena.cycles.device = "GPU"
+        cena.cycles.denoiser = "OPTIX"
+
+
+def sair(cena, caminho, lado, formato, modo, amostras, transparente):
+    cena.render.resolution_x, cena.render.resolution_y = lado
+    cena.render.film_transparent = transparente
+    cena.render.image_settings.file_format = formato
+    cena.render.image_settings.color_mode = modo
+    cena.render.image_settings.quality = 84
+    cena.cycles.samples = amostras
+    cena.render.filepath = caminho
+    bpy.ops.render.render(write_still=True)
+
+
+def luz_de_estudio(cena):
+    fundo = cena.world.node_tree.nodes["Background"]
+    fundo.inputs["Color"].default_value = (0.02, 0.022, 0.02, 1)
+    fundo.inputs["Strength"].default_value = 1.0
+    # três tons por bloco: topo claro (principal, quase a pino), frente média (preenchimento baixo e frontal) e a lateral
+    # que a câmera vê na sombra; o contraluz recorta a silhueta por trás
+    luz("principal", (6, -10, 20), 14, 7000)
+    luz("preenchimento", (-10, -18, 3), 18, 2000, (0.92, 0.96, 1.0))
+    luz("contraluz", (-8, 12, 10), 10, 2000, (0.85, 1.0, 0.75))
+
+
+def render_final(colecoes, materiais):
+    cena = bpy.context.scene
+    ligar_cycles(cena)
+    luz_de_estudio(cena)
+
+    def so(nome):
+        for outro, col in colecoes.items():
+            col.hide_render = col.hide_viewport = outro != nome
+
+    # prévias finais dos quatro estados, na câmera das prévias rápidas
+    for nome in ESTADOS:
+        so(nome)
+        sair(cena, os.path.join(SAIDA, f"final-{nome}.png"), (800, 600), "PNG", "RGB", 64, False)
+
+    camera = bpy.data.objects.new("camera-poster", bpy.data.cameras.new("camera-poster"))
+    cena.collection.objects.link(camera)
+    camera.data.lens = 85
+    cena.camera = camera
+
+    # pôsteres dos estados: quase de frente como as prévias, mas de lente longa e com a peça em uns 85% do quadro
+    cena.render.resolution_x, cena.render.resolution_y = 1200, 900  # o enquadramento usa a proporção do quadro
+    for nome in ESTADOS[1:]:
+        so(nome)
+        enquadrar(camera, [obj for obj in colecoes[nome].objects if not obj.hide_render], (-6, -25, 3), 0.85)
+        sair(cena, os.path.join(PUBLICO, f"estado-{nome}.webp"), (1200, 900), "WEBP", "RGBA", 256, True)
+
+    # pôster: a marca em três quartos, fundo transparente
+    camera.location = Vector((-0.42, -0.86, 0.2)).normalized() * 36
+    olhar_para_a_origem(camera)
+    so("marca")
+    sair(cena, os.path.join(PUBLICO, "hero-poster.webp"), (1200, 1200), "WEBP", "RGBA", 256, True)
+
+    # matcaps: uma esfera de cada material, de frente, em vista ortográfica
+    so(None)
+    malha = bpy.data.meshes.new("esfera")
+    bm = bmesh.new()
+    bmesh.ops.create_uvsphere(bm, u_segments=96, v_segments=48, radius=1)
+    bm.to_mesh(malha)
+    bm.free()
+    malha.shade_smooth()
+    esfera = bpy.data.objects.new("esfera", malha)
+    cena.collection.objects.link(esfera)
+    frente = bpy.data.objects.new("camera-matcap", bpy.data.cameras.new("camera-matcap"))
+    cena.collection.objects.link(frente)
+    frente.data.type = "ORTHO"
+    frente.data.ortho_scale = 2.0
+    frente.location = (0, -12, 0)
+    olhar_para_a_origem(frente)
+    cena.camera = frente
+    malha.materials.append(None)
+    # a esfera de frente pega mais luz de preenchimento que as faces do pôster: a porcelana sai 0,3 ponto de exposição
+    # abaixo, para a cena em tempo real ter o mesmo branco do pôster (a lima já bate)
+    for tom, nome, exposicao in ((0, "porcelana", -0.3), (1, "lima", 0.0)):
+        malha.materials[0] = materiais[tom]
+        cena.view_settings.exposure = exposicao
+        sair(cena, os.path.join(PUBLICO, f"matcap-{nome}.webp"), (256, 256), "WEBP", "RGB", 128, False)
+    cena.view_settings.exposure = 0.0
+    bpy.data.objects.remove(esfera)
+    bpy.data.objects.remove(frente)
+
+    cena.camera = camera
+    so("marca")
+
+
+# ------------------------------------------------------- autoconferência
+
+
+def falhar(msg):
+    print(f"FALHOU: {msg}", flush=True)
+    sys.exit(1)
+
+
+def conferir(tris):
+    with open(JSON, "rb") as f:
+        bruto = f.read()
+    import json
+
+    doc = json.loads(bruto)
+    n = doc["n"]
+    dados = np.array(doc["dados"], dtype=float)
+    if dados.size != len(ESTADOS) * n * PASSO:
+        falhar(f"dados com {dados.size} números, esperado {len(ESTADOS) * n * PASSO} (mesmo N em todos os estados)")
+    dados = dados.reshape(len(ESTADOS), n, PASSO)
+    if n > 320:
+        falhar(f"N={n} > 320")
+    if n * tris > 60000:
+        falhar(f"N x triângulos = {n * tris} > 60000")
+    if os.path.getsize(GLB) > 40 * 1024:
+        falhar(f"bloco.glb com {os.path.getsize(GLB)} bytes > 40 KB")
+    estados = [(f"estado-{nome}.webp", 90) for nome in ESTADOS[1:]]
+    for nome, limite in (("hero-poster.webp", 90), *estados, ("matcap-porcelana.webp", 30), ("matcap-lima.webp", 30)):
+        tamanho = os.path.getsize(os.path.join(PUBLICO, nome))
+        if tamanho > limite * 1024:
+            falhar(f"{nome} com {tamanho} bytes > {limite} KB")
+    if len(gzip.compress(bruto)) > 40 * 1024:
+        falhar("blocos.json em gzip > 40 KB")
+
+    meia = np.array(CAIXA) / 2 + 1e-3
+    for nome, e in zip(ESTADOS, dados):
+        vis = e[e[:, 3] > 0]
+        ocultos = n - len(vis)
+        if ocultos > 0.15 * n:
+            falhar(f"{nome}: {ocultos} ocultos > 15% de {n}")
+        if np.any(np.abs(vis[:, :3]) + vis[:, 3:6] / 2 > meia):
+            falhar(f"{nome}: sai da caixa {CAIXA}")
+        if nome != "marca":
+            if np.any(np.abs(vis[:, 3] - vis[:, 4]) > 1e-3) or np.any(np.abs(vis[:, 3] - vis[:, 5]) > 1e-3):
+                falhar(f"{nome}: blocos não cúbicos")
+            if vis[:, 6].sum() > 0.25 * len(vis):
+                falhar(f"{nome}: lima em {int(vis[:, 6].sum())} de {len(vis)} visíveis > 25%")
+
+    # marca: em cada camada, os blocos lima ladrilham os quatro retângulos com tolerância
+    # de 0.5 unidade do SVG: cada bloco dentro de um retângulo, sem sobreposição e com a
+    # área de cada retângulo preenchida (folga de 0.5 em todo o perímetro).
+    tol = 0.5
+    marca = dados[0]
+    area_poligono = abs(sum(
+        a[0] * b[1] - b[0] * a[1] for a, b in zip(POLIGONO, POLIGONO[1:] + POLIGONO[:1])
+    )) / 2
+    for z in np.unique(marca[:, 2]):
+        camada = marca[marca[:, 2] == z]
+        u = camada[:, 0] / ESCALA + CU
+        v = -camada[:, 1] / ESCALA + CV
+        lu = camada[:, 3] / ESCALA
+        lv = camada[:, 4] / ESCALA
+        caixas = [(u[b] - lu[b] / 2, v[b] - lv[b] / 2, u[b] + lu[b] / 2, v[b] + lv[b] / 2)
+                  for b in np.flatnonzero(camada[:, 6] == 1)]
+        areas = [0.0] * len(LIMAS)
+        for c in caixas:
+            dentro = [r for r, (u0, v0, u1, v1) in enumerate(LIMAS)
+                      if c[0] >= u0 - tol and c[1] >= v0 - tol and c[2] <= u1 + tol and c[3] <= v1 + tol]
+            if not dentro:
+                falhar(f"marca z={z}: bloco lima {c} fora dos retângulos lima")
+            areas[dentro[0]] += (c[2] - c[0]) * (c[3] - c[1])
+        for (u0, v0, u1, v1), area in zip(LIMAS, areas):
+            if abs(area - (u1 - u0) * (v1 - v0)) > tol * 2 * (u1 - u0 + v1 - v0):
+                falhar(f"marca z={z}: retângulo lima {(u0, v0, u1, v1)} coberto com área {area:.0f}")
+        for a in range(len(caixas)):
+            for b in range(a):
+                p, q = caixas[a], caixas[b]
+                if min(p[2], q[2]) - max(p[0], q[0]) > tol and min(p[3], q[3]) - max(p[1], q[1]) > tol:
+                    falhar(f"marca z={z}: blocos lima sobrepostos {p} {q}")
+        brancos = camada[:, 6] == 0
+        area = float((lu[brancos] * lv[brancos]).sum())
+        if abs(area - area_poligono) > 0.01 * area_poligono:
+            falhar(f"marca z={z}: área branca {area:.0f} != polígono {area_poligono:.0f}")
+
+
+def main():
+    bpy.ops.wm.read_factory_settings(use_empty=True)
+    os.makedirs(PUBLICO, exist_ok=True)
+    os.makedirs(SAIDA, exist_ok=True)
+
+    marca = estado_marca()
+    n = len(marca)
+    estados = [completar(b, n) for b in (marca, estado_tela(), estado_integracoes(), estado_dados())]
+    numeros = ",".join(fmt(v) for e in estados for b in e for v in b)
+    lista = ",".join(f'"{e}"' for e in ESTADOS)
+    with open(JSON, "w") as f:
+        f.write(f'{{"n":{n},"passo":{PASSO},"estados":[{lista}],"dados":[{numeros}]}}')
+
+    bloco = criar_bloco()
+    bloco.data.calc_loop_triangles()
+    tris = len(bloco.data.loop_triangles)
+    exportar_glb(bloco)
+
+    bpy.context.scene.collection.objects.unlink(bloco)  # a malha fica só nas instâncias
+    colecoes, materiais = montar_cena(estados, bloco.data)
+    bpy.data.objects.remove(bloco)
+    renderizar(colecoes)
+    render_final(colecoes, materiais)
+    bpy.context.preferences.filepaths.save_version = 0  # sem blocos.blend1
+    bpy.ops.wm.save_as_mainfile(filepath=os.path.join(SAIDA, "blocos.blend"))
+
+    conferir(tris)
+    for nome, e in zip(ESTADOS, estados):
+        vis = [b for b in e if b[3] > 0]
+        print(f"{nome}: {len(vis)} visíveis, {sum(b[6] for b in vis)} lima", flush=True)
+    ctypes.CDLL(None).fflush(None)  # despeja o buffer do C (banner do Blender) antes do OK
+    print(f"OK blocos={n} tris={n * tris}", flush=True)
+    sys.exit(0)  # sai já, para o OK ser a última linha
+
+
+if __name__ == "__main__":
+    main()

3d/humano.py

@@ -0,0 +1,333 @@
+"""Prova do MPFB2 (MakeHuman para Blender) por linha de comando: homem adulto magro, vestido, com esqueleto "mixamo".
+
+Mede triângulos e ossos, passa os 6 clipes do zumbi atual (3d/fontes/zumbi, ossos mixamorig:*) para o esqueleto
+novo, exporta 3d/out/jogo/humano.glb e fotografa com a luz de zumbi-frente.png e zumbi-perto.png (3d/jogo.py).
+
+Rodar SEMPRE com a pasta de usuário separada (a extensão e os pacotes ficam lá, fora do Blender do Evandro):
+    BLENDER_USER_RESOURCES=$PWD/3d/ferramentas/blender-user blender -b -P 3d/humano.py
+A extensão entra uma vez com (ver 3d/FERRAMENTAS.md):
+    BLENDER_USER_RESOURCES=… blender -b --factory-startup --command extension install-file -r user_default -e <zip>
+"""
+
+import hashlib
+import os
+import sys
+import urllib.request
+
+import bpy
+from mathutils import Vector
+
+sys.path.insert(0, os.path.dirname(os.path.abspath(__file__)))
+from blocos import RAIZ, SAIDA, falhar, ligar_cycles, sair  # noqa: E402
+
+try:
+    from bl_ext.user_default.mpfb.services import AssetService, HumanService, LocationService
+except ImportError:
+    falhar("MPFB não carregou: rode com BLENDER_USER_RESOURCES=3d/ferramentas/blender-user e instale a extensão")
+
+BAIXADOS = os.path.join(RAIZ, "3d", "ferramentas", "baixados")
+CLIPES_FBX = os.path.join(RAIZ, "3d", "fontes", "zumbi")  # baixados e extraídos por 3d/jogo.py
+RENDERS = os.path.join(SAIDA, "jogo")
+GLB = os.path.join(RENDERS, "humano.glb")
+
+# pacote -> sha256 do zip (só pacotes CC0; https://static.makehumancommunity.org/assets/assetpacks/index.html)
+PACOTES = {
+    "makehuman_system_assets": "b542127a8e25547c7c29c19f2d1d2adb9a664c80396ecd694095dbc8028a0107",
+    "shirts01": "a5a723b0e84a109bb190fcfeac7f1de4138d875da3e30fe5b3340eac9f38bcd3",
+    "pants01": "e4e0ec60db34f279be291a83cfd7b342a7c5cf09bb7676682a5f39f4f6ac4ad9",
+    "shoes01": "ded3f70428505eabbf1f6d7b5f61196a7366ef20757103d276ad0ed336c35ada",
+}
+# files2 (o link da página) entrega a ~10 KB/s; files é o mesmo conteúdo (mesmo tamanho e sha256)
+URL_PACOTE = "https://files.makehumancommunity.org/asset_packs/{0}/{0}_cc0.zip"
+
+# homem adulto (25 anos), magro, altura média; a raça fica no padrão do MPFB (1/3 de cada)
+CORPO = {"gender": 1.0, "age": 0.5, "muscle": 0.5, "weight": 0.3, "proportions": 0.5, "height": 0.5,
+         "cupsize": 0.5, "firmness": 0.5, "race": {"asian": 0.33, "caucasian": 0.33, "african": 0.33}}
+PELE = "skins/young_caucasian_male/young_caucasian_male.mhmat"
+# (tipo do MPFB, arquivo na pasta de dados); escolhidos com cabeçalho CC0 nos .mhclo e .obj (cargo_pants.obj é AGPL)
+PECAS = [
+    ("Eyes", "eyes/low-poly/low-poly.mhclo"),
+    ("Eyebrows", "eyebrows/eyebrow001/eyebrow001.mhclo"),
+    ("Hair", "hair/short02/short02.mhclo"),
+    ("Clothes", "clothes/namuhekam_male_polo_shirt/namuhekam_male_polo_shirt.mhclo"),
+    ("Clothes", "clothes/toigo_wool_pants/toigo_wool_pants.mhclo"),
+    ("Clothes", "clothes/toigo_ankle_boots_male/toigo_ankle_boots_male.mhclo"),  # o mj_cloth_shoes é sapatilha
+]
+ESQUELETO = "mixamo"
+MAX_TRIS = 12_000
+QUADRIL = "mixamorig:Hips"
+PERNA = ["UpLeg", "Leg", "Foot"]
+CLIPES = {
+    "parado": "Zombie Idle.fbx",
+    "andar": "Zombie Walk.fbx",
+    "atacar": "Zombie Attack.fbx",
+    "morrer": "Zombie Dying.fbx",
+    "correr": "Zombie Running.fbx",
+    "reacao": "Zombie Reaction Hit.fbx",
+}
+
+
+def sha256(caminho):
+    h = hashlib.sha256()
+    with open(caminho, "rb") as f:
+        for bloco in iter(lambda: f.read(1 << 20), b""):
+            h.update(bloco)
+    return h.hexdigest()
+
+
+def instalar_pacotes():
+    dados = LocationService.get_user_data()
+    for nome, soma in PACOTES.items():
+        if os.path.exists(os.path.join(dados, "packs", nome + ".json")):
+            continue
+        zip_ = os.path.join(BAIXADOS, nome + "_cc0.zip")
+        if not os.path.exists(zip_):
+            os.makedirs(BAIXADOS, exist_ok=True)
+            urllib.request.urlretrieve(URL_PACOTE.format(nome), zip_)
+        if sha256(zip_) != soma:
+            falhar(f"{zip_}: sha256 não confere")
+        erro = AssetService.fix_and_extract_asset_pack_zip(zip_, dados)
+        if erro:
+            falhar(f"{nome}: {erro}")
+        print(f"pacote {nome} instalado em {dados}", flush=True)
+    AssetService.update_all_asset_lists()
+    return dados
+
+
+def triangulos(obj):
+    malha = obj.evaluated_get(bpy.context.evaluated_depsgraph_get()).to_mesh()
+    malha.calc_loop_triangles()
+    n = len(malha.loop_triangles)
+    obj.to_mesh_clear()
+    return n
+
+
+def criar(dados):
+    for obj in list(bpy.data.objects):
+        bpy.data.objects.remove(obj)
+    corpo = HumanService.create_human(macro_detail_dict=CORPO)
+    esqueleto = HumanService.add_builtin_rig(corpo, ESQUELETO)
+    HumanService.set_character_skin(os.path.join(dados, PELE), corpo, skin_type="MAKESKIN", material_instances=False)
+    pecas = []
+    for tipo, arquivo in PECAS:
+        caminho = os.path.join(dados, arquivo)
+        if not os.path.exists(caminho):
+            falhar(f"falta {caminho}")
+        pecas.append(HumanService.add_mhclo_asset(caminho, corpo, asset_type=tipo, subdiv_levels=0))
+    return esqueleto, corpo, pecas
+
+
+def aplicar_modificadores(obj):
+    """Grava na malha as máscaras (ajudantes e faces do corpo sob a roupa) e tira subdivisões; só fica o Armature."""
+    bpy.context.view_layer.objects.active = obj
+    if obj.data.shape_keys:
+        obj.shape_key_add(name="_mistura", from_mix=True)
+        for chave in list(obj.data.shape_keys.key_blocks)[:-1]:
+            obj.shape_key_remove(chave)
+        obj.shape_key_remove(obj.data.shape_keys.key_blocks[0])
+    for mod in list(obj.modifiers):
+        if mod.type == "ARMATURE":
+            continue
+        if mod.type == "SUBSURF":
+            obj.modifiers.remove(mod)
+            continue
+        with bpy.context.temp_override(object=obj, active_object=obj):
+            bpy.ops.object.modifier_apply(modifier=mod.name)
+
+
+def reduzir(malhas, alvo):
+    """Colapso de arestas com a mesma razão em todas as malhas (antes do Armature: pesos interpolados)."""
+    total = sum(triangulos(m) for m in malhas)
+    razao = alvo / total
+    for _ in range(4):
+        for m in malhas:
+            mod = m.modifiers.new("reduzir", "DECIMATE")
+            mod.ratio = min(1.0, razao)
+            mod.use_collapse_triangulate = True
+            m.modifiers.move(len(m.modifiers) - 1, 0)
+            with bpy.context.temp_override(object=m, active_object=m):
+                bpy.ops.object.modifier_apply(modifier=mod.name)
+        total = sum(triangulos(m) for m in malhas)
+        if total <= MAX_TRIS:
+            return total
+        razao = alvo / total
+    falhar(f"redução parou em {total} triângulos")
+
+
+def comprimento_perna(esqueleto):
+    ossos = esqueleto.pose.bones
+    juntas = [esqueleto.matrix_world @ ossos["mixamorig:Left" + n].head for n in PERNA]
+    return sum((b - a).length for a, b in zip(juntas, juntas[1:]))
+
+
+def contato(esqueleto):
+    ossos = esqueleto.pose.bones
+    pes = [f"mixamorig:{lado}{osso}" for lado in ("Left", "Right") for osso in ("Foot", "ToeBase")]
+    return min((esqueleto.matrix_world @ ossos[n].head).z - ossos[n].bone.head_local.z for n in pes)
+
+
+def quadro_final(acao):
+    fim = int(acao.frame_range[0])
+    for curva in acao.layers[0].strips[0].channelbags[0].fcurves:
+        pontos = curva.keyframe_points
+        for anterior, ponto in zip(pontos, pontos[1:]):
+            if abs(ponto.co[1] - anterior.co[1]) > 1e-4:
+                fim = max(fim, round(ponto.co[0]))
+    return fim
+
+
+def alinhar_rolagem(esqueleto, fonte):
+    """Gira cada osso do MPFB no próprio eixo até o Z dele apontar como o do osso do Mixamo no repouso.
+
+    A cópia de rotação é em espaço de mundo: com a rolagem igual, o osso novo fica com a direção e a torção do
+    osso do clipe, mesmo com o repouso diferente (MPFB em A, Mixamo em T). A malha não muda: só o eixo do osso gira.
+    """
+    bpy.context.view_layer.objects.active = esqueleto
+    bpy.ops.object.mode_set(mode="EDIT")
+    para_local = esqueleto.matrix_world.inverted().to_3x3()
+    for osso in esqueleto.data.edit_bones:
+        if osso.name in fonte.data.bones:
+            z = (fonte.matrix_world.to_3x3() @ fonte.data.bones[osso.name].matrix_local.to_3x3()).col[2]
+            osso.align_roll(para_local @ z)
+    bpy.ops.object.mode_set(mode="OBJECT")
+
+
+def transferir(esqueleto, nome_clipe, arquivo, alinhar):
+    """Como em 3d/jogo.py: rotação de mundo de todos os ossos e posição só do quadril, escalada pela perna e com o pé
+    de apoio no chão no primeiro quadro; assa a ação."""
+    antes = set(bpy.data.objects)
+    bpy.ops.import_scene.fbx(filepath=os.path.join(CLIPES_FBX, arquivo))
+    novos = [o for o in bpy.data.objects if o not in antes]
+    fonte = next(o for o in novos if o.type == "ARMATURE")
+    if alinhar:
+        alinhar_rolagem(esqueleto, fonte)
+    acao_fonte = fonte.animation_data.action
+    inicio, fim = int(acao_fonte.frame_range[0]), quadro_final(acao_fonte)
+    bpy.context.scene.frame_set(inicio)
+    fonte.scale *= comprimento_perna(esqueleto) / comprimento_perna(fonte)
+    sem_par = []
+    for pb in esqueleto.pose.bones:
+        if pb.name not in fonte.pose.bones:
+            sem_par.append(pb.name)
+            continue
+        c = pb.constraints.new("COPY_ROTATION")
+        c.target, c.subtarget = fonte, pb.name
+        if pb.name == QUADRIL:
+            c = pb.constraints.new("COPY_LOCATION")
+            c.target, c.subtarget = fonte, pb.name
+    if sem_par:
+        falhar(f"ossos do MPFB sem par no clipe: {sem_par}")
+    bpy.context.scene.frame_set(inicio)
+    fonte.location.z -= contato(esqueleto)
+    bpy.context.view_layer.objects.active = esqueleto
+    bpy.ops.object.mode_set(mode="POSE")
+    bpy.ops.pose.select_all(action="SELECT")
+    bpy.ops.nla.bake(frame_start=inicio, frame_end=fim, only_selected=True, visual_keying=True,
+                     clear_constraints=True, use_current_action=False, bake_types={"POSE"},
+                     channel_types={"LOCATION", "ROTATION"})
+    bpy.ops.object.mode_set(mode="OBJECT")
+    acao = esqueleto.animation_data.action
+    acao.name = nome_clipe
+    acao.use_fake_user = True
+    curvas = acao.layers[0].strips[0].channelbags[0].fcurves
+    for c in [c for c in curvas if c.data_path.endswith(".location") and f'["{QUADRIL}"]' not in c.data_path]:
+        curvas.remove(c)
+    ossos_fonte = fonte.data.bones.keys()
+    for o in novos:
+        bpy.data.objects.remove(o)
+    bpy.data.actions.remove(acao_fonte)
+    return ossos_fonte, inicio, fim
+
+
+def exportar(esqueleto, malhas):
+    os.makedirs(RENDERS, exist_ok=True)
+    bpy.ops.object.select_all(action="DESELECT")
+    for o in [esqueleto, *malhas]:
+        o.select_set(True)
+    esqueleto.animation_data.action = None
+    for acao in [a for a in bpy.data.actions if a.name not in CLIPES]:
+        bpy.data.actions.remove(acao)
+    bpy.context.scene.frame_set(1)
+    bpy.ops.export_scene.gltf(filepath=GLB, export_format="GLB", use_selection=True, export_yup=True,
+                              export_apply=False, export_cameras=False, export_lights=False, export_morph=False,
+                              export_tangents=False, export_image_format="JPEG", export_jpeg_quality=80,
+                              export_animations=True, export_animation_mode="ACTIONS",
+                              export_anim_slide_to_zero=True, export_force_sampling=False,
+                              export_optimize_animation_size=True)
+
+
+def renderizar():
+    """Reabre o GLB e fotografa com a luz de renderizar() em 3d/jogo.py: parado no quadro 30 (frente e perto) e
+    andando no meio do clipe."""
+    bpy.ops.wm.read_homefile(use_empty=True)
+    cena = bpy.context.scene
+    bpy.ops.import_scene.gltf(filepath=GLB)
+    esqueleto = next(o for o in cena.objects if o.type == "ARMATURE")
+    malhas = [o for o in cena.objects if o.type == "MESH" and o.parent == esqueleto]  # sem a esfera do importador
+    pontos = [o.matrix_world @ v.co for o in malhas for v in o.data.vertices]
+    pe, topo = min(p.z for p in pontos), max(p.z for p in pontos)
+    mundo = bpy.data.worlds.new("neutro")
+    mundo.use_nodes = True
+    mundo.node_tree.nodes["Background"].inputs["Color"].default_value = (0.5, 0.5, 0.5, 1)
+    mundo.node_tree.nodes["Background"].inputs["Strength"].default_value = 0.6
+    cena.world = mundo
+    luz = bpy.data.objects.new("principal", bpy.data.lights.new("principal", "AREA"))
+    luz.data.energy, luz.data.size = 300, 2
+    luz.location = (1.5, -3, 3)
+    luz.rotation_euler = (Vector((0, 0, 1.2)) - luz.location).to_track_quat("-Z", "Y").to_euler()
+    cena.collection.objects.link(luz)
+    camera = bpy.data.objects.new("camera", bpy.data.cameras.new("camera"))
+    cena.collection.objects.link(camera)
+    cena.camera = camera
+    ligar_cycles(cena)
+    acoes = {a.name.split("_")[0]: a for a in bpy.data.actions}
+    for nome, clipe, quadro, alvo, distancia in (("frente", "parado", 30, 0.9, 3.2), ("perto", "parado", 30, 1.4, 1.5),
+                                                 ("andando", "andar", None, 0.9, 3.2)):
+        acao = next(a for n, a in acoes.items() if n.startswith(clipe))
+        esqueleto.animation_data.action = acao
+        cena.frame_set(quadro or int(sum(acao.frame_range) / 2))
+        camera.location = (0.3 * distancia / 4, -distancia, alvo + 0.1)
+        camera.rotation_euler = (Vector((0, 0, alvo)) - camera.location).to_track_quat("-Z", "Y").to_euler()
+        sair(cena, os.path.join(RENDERS, f"humano-{nome}.png"), (800, 800), "PNG", "RGB", 64, False)
+    return pe, topo
+
+
+def main():
+    dados = instalar_pacotes()
+    esqueleto, corpo, pecas = criar(dados)
+    roupas = [p for p, (tipo, _) in zip(pecas, PECAS) if tipo == "Clothes"]
+    t_corpo_visivel = triangulos(corpo)
+    for mod in corpo.modifiers:  # mede o corpo sem as máscaras de roupa ("Delete" do MPFB)
+        if mod.type == "MASK" and mod.vertex_group != "body":
+            mod.show_viewport = False
+    t_corpo = triangulos(corpo)
+    for mod in corpo.modifiers:
+        mod.show_viewport = True
+    t_roupa = sum(triangulos(r) for r in roupas)
+    t_resto = sum(triangulos(p) for p in pecas if p not in roupas)
+    malhas = [corpo, *pecas]
+    t_total = t_corpo + t_roupa + t_resto
+    print(f"triângulos: corpo {t_corpo} (sem as faces sob a roupa: {t_corpo_visivel}), roupa {t_roupa}, "
+          f"olhos+sobrancelha+cabelo {t_resto}, total {t_total}", flush=True)
+    for m in malhas:
+        aplicar_modificadores(m)
+    t_escondido = sum(triangulos(m) for m in malhas)
+    tris = reduzir(malhas, MAX_TRIS * 0.97)
+    print(f"triângulos: total sem as faces escondidas {t_escondido}, reduzido {tris}", flush=True)
+    for m in malhas:
+        print(f"  {m.name}: {triangulos(m)}", flush=True)
+    ossos = [b.name for b in esqueleto.data.bones]
+    print(f"ossos ({len(ossos)}): {' '.join(ossos)}", flush=True)
+    for i, (nome, arquivo) in enumerate(CLIPES.items()):
+        ossos_clipe, inicio, fim = transferir(esqueleto, nome, arquivo, alinhar=i == 0)
+        print(f"clipe {nome} <- {arquivo} quadros {inicio}-{fim}; ossos do clipe sem par no MPFB: "
+              f"{sorted(set(ossos_clipe) - set(ossos))}", flush=True)
+    exportar(esqueleto, malhas)
+    print(f"humano.glb {os.path.getsize(GLB)} bytes", flush=True)
+    pe, topo = renderizar()
+    print(f"repouso: pés em {pe:.3f} m, altura {topo - pe:.3f} m", flush=True)
+    print(f"OK humano tris={tris} ossos={len(ossos)}", flush=True)
+
+
+if __name__ == "__main__":
+    main()

3d/itens.sh

@@ -0,0 +1,34 @@
+#!/usr/bin/env bash
+# Refaz public/jogo/itens.webp (atlas 2x2 de 512x512) a partir de 3d/itens/*.png.
+set -euo pipefail
+cd "$(dirname "$0")/.."
+FUZZ="${FUZZ:-6%}"
+Q="${Q:-90}"
+TMP="$(mktemp -d)"
+trap 'rm -rf "$TMP"' EXIT
+OUT=public/jogo/itens.webp
+CONF=/home/evandro/tmp/jogo
+mkdir -p "$CONF"
+
+for n in municao kit cafe bateria; do
+  # fundo por preenchimento a partir dos 4 cantos (sem limiar global)
+  magick "3d/itens/$n.png" -alpha set -fuzz "$FUZZ" -fill none \
+    -draw "alpha 0,0 floodfill" -draw "alpha 1023,0 floodfill" \
+    -draw "alpha 0,1023 floodfill" -draw "alpha 1023,1023 floodfill" \
+    -channel A -morphology Erode Disk:1 -blur 0x0.7 +channel \
+    -trim +repage \
+    -bordercolor none -background none -gravity center \
+    -resize 215x215 \
+    -extent 256x256 "$TMP/$n.png"
+done
+
+magick -size 512x512 xc:none \
+  "$TMP/municao.png" -geometry +0+0 -composite \
+  "$TMP/kit.png" -geometry +256+0 -composite \
+  "$TMP/cafe.png" -geometry +0+256 -composite \
+  "$TMP/bateria.png" -geometry +256+256 -composite \
+  -define webp:alpha-quality=100 -define webp:method=6 -quality "$Q" "$OUT"
+
+magick -size 512x512 xc:"#808080" "$OUT" -composite "$CONF/itens-atlas-cinza.png"
+magick -size 512x512 xc:"#d00000" "$OUT" -composite "$CONF/itens-atlas-vermelho.png"
+ls -l "$OUT"

3d/mapa.py

@@ -0,0 +1,355 @@
+"""Mapa do escritório do jogo em /jogo: gera a primeira versão do .tmx do Tiled e converte o JSON exportado para a grade da lógica.
+
+A fonte do mapa é o 3d/mapa/escritorio.tmx, editado à mão no Tiled. Rodar da raiz do repositório (o 3d/mapa.sh faz a cadeia toda):
+  python3 3d/mapa.py gerar      sobrescreve 3d/mapa/escritorio.tmx e 3d/mapa/ladrilhos.png pela semente, apagando as edições
+                                feitas no Tiled; só roda sob `bash 3d/mapa.sh --gerar`
+  python3 3d/mapa.py converter  lê 3d/mapa/escritorio.json (exportado pelo Tiled) e escreve lib/jogo/mapas/escritorio.ts
+
+Coordenadas em células de 1 m: x cresce para a direita (leste), z para baixo (sul) no desenho; retângulos inclusivos.
+"""
+
+import json
+import random
+import struct
+import sys
+import zlib
+from pathlib import Path
+from xml.sax.saxutils import escape, quoteattr
+
+SEMENTE = 20261110
+LARGURA, ALTURA, LADO = 44, 32, 32
+RAIZ = Path(__file__).resolve().parent.parent
+PASTA = RAIZ / "3d" / "mapa"
+SAIDA_TS = RAIZ / "lib" / "jogo" / "mapas" / "escritorio.ts"
+
+# nome, cor RGB, grade da lógica ("#" bloqueia passo e visão, "M" só o passo, "" é enfeite), cobre a célula inteira
+LADRILHOS = [
+    ("parede", (55, 58, 70), "#", True),
+    ("chão", (214, 206, 188), ".", True),
+    ("mesa", (176, 120, 64), "M", True),
+    ("cadeira", (40, 110, 200), "", False),
+    ("armário", (110, 140, 110), "#", True),
+    ("estante de servidor", (0, 150, 140), "#", True),
+    ("sofá", (190, 50, 60), "M", True),
+    ("bancada", (230, 180, 40), "M", True),
+    ("planta de vaso", (60, 160, 60), "", False),
+    ("bebedouro", (120, 200, 240), "", False),
+]
+GID = {nome: i + 1 for i, (nome, *_resto) in enumerate(LADRILHOS)}
+
+PAREDES = [
+    # borda
+    (0, 0, 43, 0), (0, 31, 43, 31), (0, 0, 0, 31), (43, 0, 43, 31),
+    # faixas de salas e anel do corredor
+    (0, 7, 43, 7), (0, 24, 43, 24), (9, 7, 9, 24), (34, 7, 34, 24),
+    (12, 10, 31, 10), (12, 21, 31, 21), (12, 10, 12, 21), (31, 10, 31, 21),
+    # divisórias
+    (15, 0, 15, 7), (28, 0, 28, 7), (0, 16, 9, 16), (34, 16, 43, 16), (17, 24, 17, 31), (24, 24, 24, 31),
+    # poços dos elevadores, caixa da escada, cabines dos banheiros
+    (1, 29, 3, 30), (6, 29, 8, 30), (21, 27, 23, 30), (1, 17, 2, 21),
+]
+
+AMBIENTES = [
+    ("recepção", 1, 1, 14, 6),
+    ("sala de reunião", 16, 1, 27, 6),
+    ("diretoria", 29, 1, 42, 6),
+    ("copa", 1, 8, 8, 15),
+    ("banheiros", 1, 17, 8, 23),
+    ("área de mesas", 13, 11, 30, 20),
+    ("sala do servidor", 35, 8, 42, 15),
+    ("almoxarifado", 35, 17, 42, 23),
+    ("hall dos elevadores", 1, 25, 16, 30),
+    ("escada", 18, 25, 23, 30),
+    ("área de serviço", 25, 25, 42, 30),
+]
+
+# trechos do anel, só para espalhar luminárias
+CORREDOR = [(10, 8, 33, 9), (10, 22, 33, 23), (10, 10, 11, 21), (32, 10, 33, 21)]
+
+PORTAS = [
+    ("recepção – copa", 4, 7, 5, 7),
+    ("recepção – corredor", 12, 7, 13, 7),
+    ("sala de reunião – corredor", 18, 7, 19, 7),
+    ("sala de reunião – corredor", 24, 7, 25, 7),
+    ("sala de reunião – diretoria", 28, 3, 28, 4),
+    ("diretoria – corredor", 30, 7, 31, 7),
+    ("copa – corredor", 9, 11, 9, 12),
+    ("banheiros – corredor", 9, 19, 9, 20),
+    ("banheiros – hall dos elevadores", 4, 24, 5, 24),
+    ("hall dos elevadores – corredor", 13, 24, 14, 24),
+    ("hall dos elevadores – escada", 17, 27, 17, 28),
+    ("escada – corredor", 20, 24, 21, 24),
+    ("área de serviço – corredor", 28, 24, 29, 24),
+    ("área de serviço – almoxarifado", 38, 24, 39, 24),
+    ("almoxarifado – corredor", 34, 19, 34, 20),
+    ("sala do servidor – almoxarifado", 38, 16, 39, 16),
+    ("sala do servidor – corredor", 34, 11, 34, 12),
+    ("área de mesas – corredor norte", 21, 10, 22, 10),
+    ("área de mesas – corredor norte", 28, 10, 29, 10),
+    ("área de mesas – corredor sul", 21, 21, 22, 21),
+    ("área de mesas – corredor oeste", 12, 15, 12, 16),
+    ("área de mesas – corredor leste", 31, 15, 31, 16),
+]
+
+ILHAS = [(15, 13, 19, 14), (23, 13, 27, 14), (15, 17, 19, 18), (23, 17, 27, 18)]
+
+MOVEIS = [
+    # recepção
+    ("sofá", 3, 1, 5, 1), ("sofá", 1, 3, 1, 6), ("bancada", 8, 3, 11, 3),
+    ("cadeira", 9, 2, 9, 2), ("cadeira", 10, 2, 10, 2), ("planta de vaso", 1, 1, 1, 1), ("bebedouro", 14, 1, 14, 1),
+    # sala de reunião
+    ("mesa", 18, 3, 25, 4), ("cadeira", 17, 3, 17, 3), ("cadeira", 26, 4, 26, 4),
+    ("planta de vaso", 16, 1, 16, 1), ("planta de vaso", 27, 1, 27, 1),
+    # diretoria
+    ("mesa", 35, 3, 38, 4), ("cadeira", 37, 2, 37, 2), ("cadeira", 36, 5, 36, 5), ("cadeira", 38, 5, 38, 5),
+    ("sofá", 29, 1, 31, 1), ("armário", 42, 1, 42, 4), ("planta de vaso", 41, 6, 41, 6),
+    # copa
+    ("bancada", 1, 11, 1, 14), ("bancada", 1, 15, 4, 15), ("armário", 7, 15, 8, 15), ("mesa", 4, 11, 5, 12),
+    ("cadeira", 3, 11, 3, 11), ("cadeira", 6, 12, 6, 12), ("cadeira", 4, 10, 4, 10), ("cadeira", 5, 13, 5, 13),
+    ("bebedouro", 1, 8, 1, 8),
+    # banheiros
+    ("bancada", 5, 17, 8, 17), ("planta de vaso", 8, 23, 8, 23),
+    # hall dos elevadores
+    ("sofá", 11, 30, 14, 30), ("planta de vaso", 1, 25, 1, 25), ("bebedouro", 16, 25, 16, 25),
+    # área de serviço
+    ("armário", 27, 30, 32, 30), ("bancada", 40, 27, 42, 28), ("bebedouro", 33, 25, 33, 25),
+    # almoxarifado
+    ("armário", 42, 17, 42, 19), ("armário", 37, 20, 39, 20), ("armário", 35, 23, 36, 23),
+    # sala do servidor
+    ("estante de servidor", 37, 10, 42, 10), ("estante de servidor", 37, 13, 42, 13),
+    # área de mesas
+    *[("mesa", *ilha) for ilha in ILHAS],
+    ("armário", 30, 11, 30, 13), ("planta de vaso", 13, 11, 13, 11), ("planta de vaso", 13, 20, 13, 20),
+    ("planta de vaso", 30, 20, 30, 20), ("bebedouro", 30, 14, 30, 14),
+    # corredor
+    ("planta de vaso", 10, 8, 10, 8), ("planta de vaso", 33, 8, 33, 8),
+    ("planta de vaso", 10, 23, 10, 23), ("planta de vaso", 33, 23, 33, 23),
+]
+
+INICIO = (7, 5)
+NASCEDOUROS = [
+    ("elevador 1", 2, 27), ("elevador 2", 7, 27), ("escada", 19, 29), ("banheiros", 6, 21),
+    ("fundos, área de serviço", 26, 29), ("fundos, área de serviço", 41, 30), ("fundos, almoxarifado", 41, 22),
+]
+
+# célula de chão e para onde o cartaz olha; a parede fica do lado oposto
+CARTAZES = [
+    (7, 1, "S"), (12, 1, "S"), (21, 1, "S"), (16, 4, "L"), (36, 1, "S"), (8, 14, "O"), (20, 9, "N"),
+    (10, 18, "L"), (33, 14, "O"), (25, 22, "S"), (20, 11, "S"), (13, 18, "L"), (11, 25, "S"),
+]
+FACES = {"N": (0, 1), "S": (0, -1), "L": (-1, 0), "O": (1, 0)}  # deslocamento até a parede
+
+NOTAS = """Escritório do jogo em /jogo, 1 célula = 1 m. Este arquivo é a fonte do mapa: abra no Tiled (`flatpak run org.mapeditor.Tiled`), edite, salve e rode `bash 3d/mapa.sh`, que exporta o JSON, converte a grade da lógica e monta o 3D. `bash 3d/mapa.sh --gerar` refaz este arquivo pelo 3d/mapa.py e apaga as edições feitas aqui.
+Camadas: planta (parede e chão), moveis (a propriedade grade de cada ladrilho diz como entra na lógica: # bloqueia passo e visão, M bloqueia o passo e deixa o tiro passar, vazio é só enfeite), marcas (objetos pelo tipo).
+Tipos em marcas: inicio (ponto do jogador), nascedouro (ponto; o nome diz o lugar), ambiente (retângulo com o nome da sala), porta (retângulo sobre as células abertas na parede), luminaria (ponto no teto), cartaz (ponto na face da parede; face = para onde o cartaz olha: N para cima no desenho, S para baixo, L para a direita, O para a esquerda; imagem de 1 a 4)."""
+
+
+def celulas(x0, z0, x1, z1):
+    return [(x, z) for z in range(z0, z1 + 1) for x in range(x0, x1 + 1)]
+
+
+def png(largura, altura, rgba):
+    """PNG RGBA 8 bits sem metadados (os mesmos pixels dão os mesmos bytes)."""
+    linhas = b"".join(b"\0" + rgba[y * largura * 4 : (y + 1) * largura * 4] for y in range(altura))
+
+    def bloco(tipo, dados):
+        return struct.pack(">I", len(dados)) + tipo + dados + struct.pack(">I", zlib.crc32(tipo + dados))
+
+    cabecalho = struct.pack(">IIBBBBB", largura, altura, 8, 6, 0, 0, 0)
+    return b"\x89PNG\r\n\x1a\n" + bloco(b"IHDR", cabecalho) + bloco(b"IDAT", zlib.compress(linhas, 9)) + bloco(b"IEND", b"")
+
+
+def imagem_ladrilhos():
+    """Uma linha de ladrilhos de 32 px: cheios com borda escura; enfeites são um quadrado menor sobre fundo transparente."""
+    largura = LADO * len(LADRILHOS)
+    pixels = bytearray(largura * LADO * 4)
+    for i, (_nome, cor, _grade, cheio) in enumerate(LADRILHOS):
+        escura = tuple(c // 2 for c in cor)
+        margem = 0 if cheio else 8
+        for y in range(margem, LADO - margem):
+            for x in range(margem, LADO - margem):
+                borda = min(x - margem, y - margem, LADO - 1 - margem - x, LADO - 1 - margem - y) < 2
+                p = (y * largura + i * LADO + x) * 4
+                pixels[p : p + 4] = bytes((*(escura if borda else cor), 255))
+    return png(largura, LADO, bytes(pixels))
+
+
+def montar_planta():
+    planta = [["chão"] * LARGURA for _ in range(ALTURA)]
+    for parede in PAREDES:
+        for x, z in celulas(*parede):
+            planta[z][x] = "parede"
+    for _nome, *porta in PORTAS:
+        for x, z in celulas(*porta):
+            planta[z][x] = "chão"
+    return planta
+
+
+def montar_moveis(rng):
+    moveis = [[None] * LARGURA for _ in range(ALTURA)]
+    for tipo, *retangulo in MOVEIS:
+        for x, z in celulas(*retangulo):
+            moveis[z][x] = tipo
+    # cadeiras dos dois lados de cada ilha; algumas vagas ficam sem cadeira
+    for x0, z0, x1, z1 in ILHAS:
+        for x in range(x0, x1 + 1):
+            for z in (z0 - 1, z1 + 1):
+                if rng.random() < 0.8:
+                    moveis[z][x] = "cadeira"
+    return moveis
+
+
+def objeto(id_, tipo, nome, x, y, largura=None, altura=None, propriedades=()):
+    attrs = f'id="{id_}" name={quoteattr(nome)} type="{tipo}" x="{x:g}" y="{y:g}"'
+    if largura is not None:
+        attrs += f' width="{largura:g}" height="{altura:g}"'
+    corpo = []
+    if propriedades:
+        corpo.append("   <properties>")
+        corpo += [f'    <property name="{n}" {t}value={quoteattr(str(v))}/>' for n, t, v in propriedades]
+        corpo.append("   </properties>")
+    if largura is None:
+        corpo.append("   <point/>")
+    return [f"  <object {attrs}>", *corpo, "  </object>"]
+
+
+def luminarias(x0, z0, x1, z1):
+    """Pontos a cada ~5 m dentro do retângulo, em pixels, arredondados à meia célula."""
+    largura, altura = x1 - x0 + 1, z1 - z0 + 1
+    nx, nz = max(1, round(largura / 5)), max(1, round(altura / 5))
+    return [
+        (round((x0 + largura * (i + 0.5) / nx) * 2) * LADO // 2, round((z0 + altura * (j + 0.5) / nz) * 2) * LADO // 2)
+        for j in range(nz)
+        for i in range(nx)
+    ]
+
+
+def gerar():
+    rng = random.Random(SEMENTE)
+    planta = montar_planta()
+    moveis = montar_moveis(rng)
+    marcas = []
+    total = 0
+
+    def novo(*args, **kwargs):
+        nonlocal total
+        total += 1
+        marcas.extend(objeto(total, *args, **kwargs))
+
+    novo("inicio", "inicio", (INICIO[0] + 0.5) * LADO, (INICIO[1] + 0.5) * LADO)
+    for nome, x, z in NASCEDOUROS:
+        novo("nascedouro", nome, (x + 0.5) * LADO, (z + 0.5) * LADO)
+    for nome, x0, z0, x1, z1 in AMBIENTES:
+        novo("ambiente", nome, x0 * LADO, z0 * LADO, (x1 - x0 + 1) * LADO, (z1 - z0 + 1) * LADO)
+    for nome, x0, z0, x1, z1 in PORTAS:
+        novo("porta", nome, x0 * LADO, z0 * LADO, (x1 - x0 + 1) * LADO, (z1 - z0 + 1) * LADO)
+    for retangulo in [r[1:] for r in AMBIENTES] + CORREDOR:
+        for x, y in luminarias(*retangulo):
+            novo("luminaria", "luminaria", x, y)
+    for x, z, face in CARTAZES:
+        dx, dz = FACES[face]
+        assert planta[z][x] == "chão" and planta[z + dz][x + dx] == "parede", (x, z, face)
+        px = (x + 0.5 + dx / 2) * LADO
+        pz = (z + 0.5 + dz / 2) * LADO
+        propriedades = [("face", "", face), ("imagem", 'type="int" ', rng.randint(1, 4))]
+        novo("cartaz", "cartaz", px, pz, propriedades=propriedades)
+
+    def csv(grade):
+        return ",\n".join(",".join(str(GID[c] if c else 0) for c in linha) for linha in grade)
+
+    tiles = []
+    for i, (nome, _cor, grade, _cheio) in enumerate(LADRILHOS):
+        tiles += [
+            f'  <tile id="{i}">',
+            "   <properties>",
+            f"    <property name=\"nome\" value={quoteattr(nome)}/>",
+            f'    <property name="grade" value="{grade}"/>',
+            "   </properties>",
+            "  </tile>",
+        ]
+    marcas_txt = "\n".join(marcas)
+    tmx = "\n".join(
+        [
+            '<?xml version="1.0" encoding="UTF-8"?>',
+            f'<map version="1.10" tiledversion="1.12.2" orientation="orthogonal" renderorder="right-down" width="{LARGURA}" height="{ALTURA}" tilewidth="{LADO}" tileheight="{LADO}" infinite="0" nextlayerid="4" nextobjectid="{total + 1}">',
+            " <properties>",
+            f'  <property name="notas">{escape(NOTAS)}</property>',
+            f'  <property name="semente" type="int" value="{SEMENTE}"/>',
+            " </properties>",
+            f' <tileset firstgid="1" name="ladrilhos" tilewidth="{LADO}" tileheight="{LADO}" tilecount="{len(LADRILHOS)}" columns="{len(LADRILHOS)}">',
+            f'  <image source="ladrilhos.png" width="{LADO * len(LADRILHOS)}" height="{LADO}"/>',
+            *tiles,
+            " </tileset>",
+            f' <layer id="1" name="planta" width="{LARGURA}" height="{ALTURA}">',
+            '  <data encoding="csv">',
+            csv(planta),
+            "</data>",
+            " </layer>",
+            f' <layer id="2" name="moveis" width="{LARGURA}" height="{ALTURA}">',
+            '  <data encoding="csv">',
+            csv(moveis),
+            "</data>",
+            " </layer>",
+            ' <objectgroup id="3" name="marcas">',
+            marcas_txt,
+            " </objectgroup>",
+            "</map>",
+            "",
+        ]
+    )
+    PASTA.mkdir(parents=True, exist_ok=True)
+    (PASTA / "escritorio.tmx").write_text(tmx, encoding="utf-8")
+    (PASTA / "ladrilhos.png").write_bytes(imagem_ladrilhos())
+
+
+def converter():
+    dados = json.loads((PASTA / "escritorio.json").read_text(encoding="utf-8"))
+    largura, altura, lado = dados["width"], dados["height"], dados["tilewidth"]
+    grade_por_gid = {}
+    for tileset in dados["tilesets"]:
+        for tile in tileset.get("tiles", []):
+            propriedades = {p["name"]: p["value"] for p in tile.get("properties", [])}
+            grade_por_gid[tileset["firstgid"] + tile["id"]] = propriedades["grade"]
+    camadas = {c["name"]: c for c in dados["layers"]}
+    linhas = [["#"] * largura for _ in range(altura)]
+    for nome in ("planta", "moveis"):
+        for i, gid in enumerate(camadas[nome]["data"]):
+            grade = grade_por_gid.get(gid & 0x1FFFFFFF, "")  # bits altos: ladrilho espelhado ou girado
+            if grade:
+                linhas[i // largura][i % largura] = grade
+    ambientes, portas = [], []
+    for obj in camadas["marcas"]["objects"]:
+        x, z = int(obj["x"] // lado), int(obj["y"] // lado)
+        if obj["type"] in ("inicio", "nascedouro"):
+            linhas[z][x] = "J" if obj["type"] == "inicio" else "N"
+        elif obj["type"] in ("ambiente", "porta"):
+            retangulo = {"x": x, "z": z, "largura": round(obj["width"] / lado), "altura": round(obj["height"] / lado)}
+            if obj["type"] == "ambiente":
+                ambientes.append({"nome": obj["name"], **retangulo})
+            else:
+                portas.append(retangulo)
+
+    def lista(itens):
+        return "[\n" + "".join(f"  {json.dumps(i, ensure_ascii=False)},\n" for i in itens) + "]"
+
+    retangulo_ts = "x: number; z: number; largura: number; altura: number"
+    ts = f"""// Gerado por `bash 3d/mapa.sh` (`python3 3d/mapa.py converter`) a partir de 3d/mapa/escritorio.tmx: não edite à mão.
+
+/** Planta do escritório para `lerMapa`: `#` parede ou móvel alto, `M` móvel baixo, `.` chão, `J` início, `N` nascedouro. */
+export const ESCRITORIO: readonly string[] = {lista("".join(linha) for linha in linhas)};
+
+/** Salas com nome, em células (x para a direita, z para baixo). */
+export const AMBIENTES: readonly {{ nome: string; {retangulo_ts} }}[] = {lista(ambientes)};
+
+/** Células abertas nas paredes, em células. */
+export const PORTAS: readonly {{ {retangulo_ts} }}[] = {lista(portas)};
+"""
+    SAIDA_TS.parent.mkdir(parents=True, exist_ok=True)
+    SAIDA_TS.write_text(ts, encoding="utf-8")
+
+
+if __name__ == "__main__":
+    comandos = {"gerar": gerar, "converter": converter}
+    if len(sys.argv) != 2 or sys.argv[1] not in comandos:
+        sys.exit("uso: python3 3d/mapa.py gerar|converter")
+    comandos[sys.argv[1]]()

3d/mapa.sh

@@ -0,0 +1,28 @@
+#!/usr/bin/env bash
+# Refaz o mapa do escritório a partir de 3d/mapa/escritorio.tmx, a fonte editada no Tiled: exporta JSON e PNG pelo
+# Tiled (sem janela), converte para a grade da lógica e monta o 3D no Blender. Rodar de qualquer lugar:
+#   bash 3d/mapa.sh            só exporta, converte e monta
+#   bash 3d/mapa.sh --gerar    antes, refaz o .tmx pelo 3d/mapa.py (apaga o que foi editado à mão no Tiled)
+set -euo pipefail
+cd "$(dirname "$0")/.."
+
+tiled() {
+  env -u DISPLAY -u WAYLAND_DISPLAY flatpak run --env=QT_QPA_PLATFORM=offscreen --command="$1" org.mapeditor.Tiled "${@:2}"
+}
+
+case "${1:-}" in
+  "") ;;
+  --gerar)
+    echo "aviso: --gerar sobrescreve 3d/mapa/escritorio.tmx pelo 3d/mapa.py; o que foi editado no Tiled se perde" >&2
+    python3 3d/mapa.py gerar
+    ;;
+  *)
+    echo "uso: bash 3d/mapa.sh [--gerar]" >&2
+    exit 2
+    ;;
+esac
+tiled tiled --export-map json "$PWD/3d/mapa/escritorio.tmx" "$PWD/3d/mapa/escritorio.json"
+tiled tmxrasterizer "$PWD/3d/mapa/escritorio.tmx" "$PWD/3d/mapa/escritorio.png"
+python3 3d/mapa.py converter
+./node_modules/.bin/biome format --write lib/jogo/mapas/escritorio.ts 3d/mapa/escritorio.json
+blender -b -P 3d/mapa_3d.py

3d/mapa/escritorio.tmx

@@ -0,0 +1,477 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<map version="1.10" tiledversion="1.12.2" orientation="orthogonal" renderorder="right-down" width="44" height="32" tilewidth="32" tileheight="32" infinite="0" nextlayerid="4" nextobjectid="105">
+ <properties>
+  <property name="notas">Escritório do jogo em /jogo, 1 célula = 1 m. Este arquivo é a fonte do mapa: abra no Tiled (`flatpak run org.mapeditor.Tiled`), edite, salve e rode `bash 3d/mapa.sh`, que exporta o JSON, converte a grade da lógica e monta o 3D. `bash 3d/mapa.sh --gerar` refaz este arquivo pelo 3d/mapa.py e apaga as edições feitas aqui.
+Camadas: planta (parede e chão), moveis (a propriedade grade de cada ladrilho diz como entra na lógica: # bloqueia passo e visão, M bloqueia o passo e deixa o tiro passar, vazio é só enfeite), marcas (objetos pelo tipo).
+Tipos em marcas: inicio (ponto do jogador), nascedouro (ponto; o nome diz o lugar), ambiente (retângulo com o nome da sala), porta (retângulo sobre as células abertas na parede), luminaria (ponto no teto), cartaz (ponto na face da parede; face = para onde o cartaz olha: N para cima no desenho, S para baixo, L para a direita, O para a esquerda; imagem de 1 a 4).</property>
+  <property name="semente" type="int" value="20261110"/>
+ </properties>
+ <tileset firstgid="1" name="ladrilhos" tilewidth="32" tileheight="32" tilecount="10" columns="10">
+  <image source="ladrilhos.png" width="320" height="32"/>
+  <tile id="0">
+   <properties>
+    <property name="nome" value="parede"/>
+    <property name="grade" value="#"/>
+   </properties>
+  </tile>
+  <tile id="1">
+   <properties>
+    <property name="nome" value="chão"/>
+    <property name="grade" value="."/>
+   </properties>
+  </tile>
+  <tile id="2">
+   <properties>
+    <property name="nome" value="mesa"/>
+    <property name="grade" value="M"/>
+   </properties>
+  </tile>
+  <tile id="3">
+   <properties>
+    <property name="nome" value="cadeira"/>
+    <property name="grade" value=""/>
+   </properties>
+  </tile>
+  <tile id="4">
+   <properties>
+    <property name="nome" value="armário"/>
+    <property name="grade" value="#"/>
+   </properties>
+  </tile>
+  <tile id="5">
+   <properties>
+    <property name="nome" value="estante de servidor"/>
+    <property name="grade" value="#"/>
+   </properties>
+  </tile>
+  <tile id="6">
+   <properties>
+    <property name="nome" value="sofá"/>
+    <property name="grade" value="M"/>
+   </properties>
+  </tile>
+  <tile id="7">
+   <properties>
+    <property name="nome" value="bancada"/>
+    <property name="grade" value="M"/>
+   </properties>
+  </tile>
+  <tile id="8">
+   <properties>
+    <property name="nome" value="planta de vaso"/>
+    <property name="grade" value=""/>
+   </properties>
+  </tile>
+  <tile id="9">
+   <properties>
+    <property name="nome" value="bebedouro"/>
+    <property name="grade" value=""/>
+   </properties>
+  </tile>
+ </tileset>
+ <layer id="1" name="planta" width="44" height="32">
+  <data encoding="csv">
+1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,
+1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1,2,2,2,2,2,2,2,2,2,2,2,2,1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1,
+1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1,2,2,2,2,2,2,2,2,2,2,2,2,1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1,
+1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1,
+1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1,
+1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1,2,2,2,2,2,2,2,2,2,2,2,2,1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1,
+1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1,2,2,2,2,2,2,2,2,2,2,2,2,1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1,
+1,1,1,1,2,2,1,1,1,1,1,1,2,2,1,1,1,1,2,2,1,1,1,1,2,2,1,1,1,1,2,2,1,1,1,1,1,1,1,1,1,1,1,1,
+1,2,2,2,2,2,2,2,2,1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1,2,2,2,2,2,2,2,2,1,
+1,2,2,2,2,2,2,2,2,1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1,2,2,2,2,2,2,2,2,1,
+1,2,2,2,2,2,2,2,2,1,2,2,1,1,1,1,1,1,1,1,1,2,2,1,1,1,1,1,2,2,1,1,2,2,1,2,2,2,2,2,2,2,2,1,
+1,2,2,2,2,2,2,2,2,2,2,2,1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1,2,2,2,2,2,2,2,2,2,2,2,1,
+1,2,2,2,2,2,2,2,2,2,2,2,1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1,2,2,2,2,2,2,2,2,2,2,2,1,
+1,2,2,2,2,2,2,2,2,1,2,2,1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1,2,2,1,2,2,2,2,2,2,2,2,1,
+1,2,2,2,2,2,2,2,2,1,2,2,1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1,2,2,1,2,2,2,2,2,2,2,2,1,
+1,2,2,2,2,2,2,2,2,1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1,2,2,2,2,2,2,2,2,1,
+1,1,1,1,1,1,1,1,1,1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1,1,1,1,2,2,1,1,1,1,
+1,1,1,2,2,2,2,2,2,1,2,2,1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1,2,2,1,2,2,2,2,2,2,2,2,1,
+1,1,1,2,2,2,2,2,2,1,2,2,1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1,2,2,1,2,2,2,2,2,2,2,2,1,
+1,1,1,2,2,2,2,2,2,2,2,2,1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1,2,2,2,2,2,2,2,2,2,2,2,1,
+1,1,1,2,2,2,2,2,2,2,2,2,1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1,2,2,2,2,2,2,2,2,2,2,2,1,
+1,1,1,2,2,2,2,2,2,1,2,2,1,1,1,1,1,1,1,1,1,2,2,1,1,1,1,1,1,1,1,1,2,2,1,2,2,2,2,2,2,2,2,1,
+1,2,2,2,2,2,2,2,2,1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1,2,2,2,2,2,2,2,2,1,
+1,2,2,2,2,2,2,2,2,1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1,2,2,2,2,2,2,2,2,1,
+1,1,1,1,2,2,1,1,1,1,1,1,1,2,2,1,1,1,1,1,2,2,1,1,1,1,1,1,2,2,1,1,1,1,1,1,1,1,2,2,1,1,1,1,
+1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1,2,2,2,2,2,2,1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1,
+1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1,2,2,2,2,2,2,1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1,
+1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1,1,1,1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1,
+1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1,1,1,1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1,
+1,1,1,1,2,2,1,1,1,2,2,2,2,2,2,2,2,1,2,2,2,1,1,1,1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1,
+1,1,1,1,2,2,1,1,1,2,2,2,2,2,2,2,2,1,2,2,2,1,1,1,1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1,
+1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1
+</data>
+ </layer>
+ <layer id="2" name="moveis" width="44" height="32">
+  <data encoding="csv">
+0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
+0,9,0,7,7,7,0,0,0,0,0,0,0,0,10,0,9,0,0,0,0,0,0,0,0,0,0,9,0,7,7,7,0,0,0,0,0,0,0,0,0,0,5,0,
+0,0,0,0,0,0,0,0,0,4,4,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,4,0,0,0,0,5,0,
+0,7,0,0,0,0,0,0,8,8,8,8,0,0,0,0,0,4,3,3,3,3,3,3,3,3,0,0,0,0,0,0,0,0,0,3,3,3,3,0,0,0,5,0,
+0,7,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,3,3,3,3,3,3,3,3,4,0,0,0,0,0,0,0,0,3,3,3,3,0,0,0,5,0,
+0,7,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,4,0,4,0,0,0,0,0,
+0,7,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,9,0,0,
+0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
+0,10,0,0,0,0,0,0,0,0,9,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,9,0,0,0,0,0,0,0,0,0,0,
+0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
+0,0,0,0,4,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,6,6,6,6,6,6,0,
+0,8,0,4,3,3,0,0,0,0,0,0,0,9,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5,0,0,0,0,0,0,0,0,0,0,0,0,0,
+0,8,0,0,3,3,4,0,0,0,0,0,0,0,0,4,0,4,4,4,0,0,0,4,0,4,0,4,0,0,5,0,0,0,0,0,0,0,0,0,0,0,0,0,
+0,8,0,0,0,4,0,0,0,0,0,0,0,0,0,3,3,3,3,3,0,0,0,3,3,3,3,3,0,0,5,0,0,0,0,0,0,6,6,6,6,6,6,0,
+0,8,0,0,0,0,0,0,0,0,0,0,0,0,0,3,3,3,3,3,0,0,0,3,3,3,3,3,0,0,10,0,0,0,0,0,0,0,0,0,0,0,0,0,
+0,8,8,8,8,0,0,5,5,0,0,0,0,0,0,4,4,4,4,4,0,0,0,4,4,4,4,4,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
+0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,4,4,4,0,4,0,0,0,0,4,4,4,4,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
+0,0,0,0,0,8,8,8,8,0,0,0,0,0,0,3,3,3,3,3,0,0,0,3,3,3,3,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5,0,
+0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,3,3,3,3,3,0,0,0,3,3,3,3,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5,0,
+0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,4,0,4,4,0,0,0,4,0,4,4,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5,0,
+0,0,0,0,0,0,0,0,0,0,0,0,0,9,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,9,0,0,0,0,0,0,5,5,5,0,0,0,0,
+0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
+0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
+0,0,0,0,0,0,0,0,9,0,9,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,9,0,5,5,0,0,0,0,0,0,0,
+0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
+0,9,0,0,0,0,0,0,0,0,0,0,0,0,0,0,10,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,10,0,0,0,0,0,0,0,0,0,0,
+0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
+0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,8,8,8,0,
+0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,8,8,8,0,
+0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
+0,0,0,0,0,0,0,0,0,0,0,7,7,7,7,0,0,0,0,0,0,0,0,0,0,0,0,5,5,5,5,5,5,0,0,0,0,0,0,0,0,0,0,0,
+0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
+</data>
+ </layer>
+ <objectgroup id="3" name="marcas">
+  <object id="1" name="inicio" type="inicio" x="240" y="176">
+   <point/>
+  </object>
+  <object id="2" name="elevador 1" type="nascedouro" x="80" y="880">
+   <point/>
+  </object>
+  <object id="3" name="elevador 2" type="nascedouro" x="240" y="880">
+   <point/>
+  </object>
+  <object id="4" name="escada" type="nascedouro" x="624" y="944">
+   <point/>
+  </object>
+  <object id="5" name="banheiros" type="nascedouro" x="208" y="688">
+   <point/>
+  </object>
+  <object id="6" name="fundos, área de serviço" type="nascedouro" x="848" y="944">
+   <point/>
+  </object>
+  <object id="7" name="fundos, área de serviço" type="nascedouro" x="1328" y="976">
+   <point/>
+  </object>
+  <object id="8" name="fundos, almoxarifado" type="nascedouro" x="1328" y="720">
+   <point/>
+  </object>
+  <object id="9" name="recepção" type="ambiente" x="32" y="32" width="448" height="192">
+  </object>
+  <object id="10" name="sala de reunião" type="ambiente" x="512" y="32" width="384" height="192">
+  </object>
+  <object id="11" name="diretoria" type="ambiente" x="928" y="32" width="448" height="192">
+  </object>
+  <object id="12" name="copa" type="ambiente" x="32" y="256" width="256" height="256">
+  </object>
+  <object id="13" name="banheiros" type="ambiente" x="32" y="544" width="256" height="224">
+  </object>
+  <object id="14" name="área de mesas" type="ambiente" x="416" y="352" width="576" height="320">
+  </object>
+  <object id="15" name="sala do servidor" type="ambiente" x="1120" y="256" width="256" height="256">
+  </object>
+  <object id="16" name="almoxarifado" type="ambiente" x="1120" y="544" width="256" height="224">
+  </object>
+  <object id="17" name="hall dos elevadores" type="ambiente" x="32" y="800" width="512" height="192">
+  </object>
+  <object id="18" name="escada" type="ambiente" x="576" y="800" width="192" height="192">
+  </object>
+  <object id="19" name="área de serviço" type="ambiente" x="800" y="800" width="576" height="192">
+  </object>
+  <object id="20" name="recepção – copa" type="porta" x="128" y="224" width="64" height="32">
+  </object>
+  <object id="21" name="recepção – corredor" type="porta" x="384" y="224" width="64" height="32">
+  </object>
+  <object id="22" name="sala de reunião – corredor" type="porta" x="576" y="224" width="64" height="32">
+  </object>
+  <object id="23" name="sala de reunião – corredor" type="porta" x="768" y="224" width="64" height="32">
+  </object>
+  <object id="24" name="sala de reunião – diretoria" type="porta" x="896" y="96" width="32" height="64">
+  </object>
+  <object id="25" name="diretoria – corredor" type="porta" x="960" y="224" width="64" height="32">
+  </object>
+  <object id="26" name="copa – corredor" type="porta" x="288" y="352" width="32" height="64">
+  </object>
+  <object id="27" name="banheiros – corredor" type="porta" x="288" y="608" width="32" height="64">
+  </object>
+  <object id="28" name="banheiros – hall dos elevadores" type="porta" x="128" y="768" width="64" height="32">
+  </object>
+  <object id="29" name="hall dos elevadores – corredor" type="porta" x="416" y="768" width="64" height="32">
+  </object>
+  <object id="30" name="hall dos elevadores – escada" type="porta" x="544" y="864" width="32" height="64">
+  </object>
+  <object id="31" name="escada – corredor" type="porta" x="640" y="768" width="64" height="32">
+  </object>
+  <object id="32" name="área de serviço – corredor" type="porta" x="896" y="768" width="64" height="32">
+  </object>
+  <object id="33" name="área de serviço – almoxarifado" type="porta" x="1216" y="768" width="64" height="32">
+  </object>
+  <object id="34" name="almoxarifado – corredor" type="porta" x="1088" y="608" width="32" height="64">
+  </object>
+  <object id="35" name="sala do servidor – almoxarifado" type="porta" x="1216" y="512" width="64" height="32">
+  </object>
+  <object id="36" name="sala do servidor – corredor" type="porta" x="1088" y="352" width="32" height="64">
+  </object>
+  <object id="37" name="área de mesas – corredor norte" type="porta" x="672" y="320" width="64" height="32">
+  </object>
+  <object id="38" name="área de mesas – corredor norte" type="porta" x="896" y="320" width="64" height="32">
+  </object>
+  <object id="39" name="área de mesas – corredor sul" type="porta" x="672" y="672" width="64" height="32">
+  </object>
+  <object id="40" name="área de mesas – corredor oeste" type="porta" x="384" y="480" width="32" height="64">
+  </object>
+  <object id="41" name="área de mesas – corredor leste" type="porta" x="992" y="480" width="32" height="64">
+  </object>
+  <object id="42" name="luminaria" type="luminaria" x="112" y="128">
+   <point/>
+  </object>
+  <object id="43" name="luminaria" type="luminaria" x="256" y="128">
+   <point/>
+  </object>
+  <object id="44" name="luminaria" type="luminaria" x="400" y="128">
+   <point/>
+  </object>
+  <object id="45" name="luminaria" type="luminaria" x="608" y="128">
+   <point/>
+  </object>
+  <object id="46" name="luminaria" type="luminaria" x="800" y="128">
+   <point/>
+  </object>
+  <object id="47" name="luminaria" type="luminaria" x="1008" y="128">
+   <point/>
+  </object>
+  <object id="48" name="luminaria" type="luminaria" x="1152" y="128">
+   <point/>
+  </object>
+  <object id="49" name="luminaria" type="luminaria" x="1296" y="128">
+   <point/>
+  </object>
+  <object id="50" name="luminaria" type="luminaria" x="96" y="320">
+   <point/>
+  </object>
+  <object id="51" name="luminaria" type="luminaria" x="224" y="320">
+   <point/>
+  </object>
+  <object id="52" name="luminaria" type="luminaria" x="96" y="448">
+   <point/>
+  </object>
+  <object id="53" name="luminaria" type="luminaria" x="224" y="448">
+   <point/>
+  </object>
+  <object id="54" name="luminaria" type="luminaria" x="96" y="656">
+   <point/>
+  </object>
+  <object id="55" name="luminaria" type="luminaria" x="224" y="656">
+   <point/>
+  </object>
+  <object id="56" name="luminaria" type="luminaria" x="480" y="432">
+   <point/>
+  </object>
+  <object id="57" name="luminaria" type="luminaria" x="640" y="432">
+   <point/>
+  </object>
+  <object id="58" name="luminaria" type="luminaria" x="768" y="432">
+   <point/>
+  </object>
+  <object id="59" name="luminaria" type="luminaria" x="928" y="432">
+   <point/>
+  </object>
+  <object id="60" name="luminaria" type="luminaria" x="480" y="592">
+   <point/>
+  </object>
+  <object id="61" name="luminaria" type="luminaria" x="640" y="592">
+   <point/>
+  </object>
+  <object id="62" name="luminaria" type="luminaria" x="768" y="592">
+   <point/>
+  </object>
+  <object id="63" name="luminaria" type="luminaria" x="928" y="592">
+   <point/>
+  </object>
+  <object id="64" name="luminaria" type="luminaria" x="1184" y="320">
+   <point/>
+  </object>
+  <object id="65" name="luminaria" type="luminaria" x="1312" y="320">
+   <point/>
+  </object>
+  <object id="66" name="luminaria" type="luminaria" x="1184" y="448">
+   <point/>
+  </object>
+  <object id="67" name="luminaria" type="luminaria" x="1312" y="448">
+   <point/>
+  </object>
+  <object id="68" name="luminaria" type="luminaria" x="1184" y="656">
+   <point/>
+  </object>
+  <object id="69" name="luminaria" type="luminaria" x="1312" y="656">
+   <point/>
+  </object>
+  <object id="70" name="luminaria" type="luminaria" x="112" y="896">
+   <point/>
+  </object>
+  <object id="71" name="luminaria" type="luminaria" x="288" y="896">
+   <point/>
+  </object>
+  <object id="72" name="luminaria" type="luminaria" x="464" y="896">
+   <point/>
+  </object>
+  <object id="73" name="luminaria" type="luminaria" x="672" y="896">
+   <point/>
+  </object>
+  <object id="74" name="luminaria" type="luminaria" x="864" y="896">
+   <point/>
+  </object>
+  <object id="75" name="luminaria" type="luminaria" x="1024" y="896">
+   <point/>
+  </object>
+  <object id="76" name="luminaria" type="luminaria" x="1152" y="896">
+   <point/>
+  </object>
+  <object id="77" name="luminaria" type="luminaria" x="1312" y="896">
+   <point/>
+  </object>
+  <object id="78" name="luminaria" type="luminaria" x="400" y="288">
+   <point/>
+  </object>
+  <object id="79" name="luminaria" type="luminaria" x="544" y="288">
+   <point/>
+  </object>
+  <object id="80" name="luminaria" type="luminaria" x="704" y="288">
+   <point/>
+  </object>
+  <object id="81" name="luminaria" type="luminaria" x="864" y="288">
+   <point/>
+  </object>
+  <object id="82" name="luminaria" type="luminaria" x="1008" y="288">
+   <point/>
+  </object>
+  <object id="83" name="luminaria" type="luminaria" x="400" y="736">
+   <point/>
+  </object>
+  <object id="84" name="luminaria" type="luminaria" x="544" y="736">
+   <point/>
+  </object>
+  <object id="85" name="luminaria" type="luminaria" x="704" y="736">
+   <point/>
+  </object>
+  <object id="86" name="luminaria" type="luminaria" x="864" y="736">
+   <point/>
+  </object>
+  <object id="87" name="luminaria" type="luminaria" x="1008" y="736">
+   <point/>
+  </object>
+  <object id="88" name="luminaria" type="luminaria" x="352" y="416">
+   <point/>
+  </object>
+  <object id="89" name="luminaria" type="luminaria" x="352" y="608">
+   <point/>
+  </object>
+  <object id="90" name="luminaria" type="luminaria" x="1056" y="416">
+   <point/>
+  </object>
+  <object id="91" name="luminaria" type="luminaria" x="1056" y="608">
+   <point/>
+  </object>
+  <object id="92" name="cartaz" type="cartaz" x="240" y="32">
+   <properties>
+    <property name="face" value="S"/>
+    <property name="imagem" type="int" value="1"/>
+   </properties>
+   <point/>
+  </object>
+  <object id="93" name="cartaz" type="cartaz" x="400" y="32">
+   <properties>
+    <property name="face" value="S"/>
+    <property name="imagem" type="int" value="1"/>
+   </properties>
+   <point/>
+  </object>
+  <object id="94" name="cartaz" type="cartaz" x="688" y="32">
+   <properties>
+    <property name="face" value="S"/>
+    <property name="imagem" type="int" value="3"/>
+   </properties>
+   <point/>
+  </object>
+  <object id="95" name="cartaz" type="cartaz" x="512" y="144">
+   <properties>
+    <property name="face" value="L"/>
+    <property name="imagem" type="int" value="3"/>
+   </properties>
+   <point/>
+  </object>
+  <object id="96" name="cartaz" type="cartaz" x="1168" y="32">
+   <properties>
+    <property name="face" value="S"/>
+    <property name="imagem" type="int" value="2"/>
+   </properties>
+   <point/>
+  </object>
+  <object id="97" name="cartaz" type="cartaz" x="288" y="464">
+   <properties>
+    <property name="face" value="O"/>
+    <property name="imagem" type="int" value="2"/>
+   </properties>
+   <point/>
+  </object>
+  <object id="98" name="cartaz" type="cartaz" x="656" y="320">
+   <properties>
+    <property name="face" value="N"/>
+    <property name="imagem" type="int" value="4"/>
+   </properties>
+   <point/>
+  </object>
+  <object id="99" name="cartaz" type="cartaz" x="320" y="592">
+   <properties>
+    <property name="face" value="L"/>
+    <property name="imagem" type="int" value="3"/>
+   </properties>
+   <point/>
+  </object>
+  <object id="100" name="cartaz" type="cartaz" x="1088" y="464">
+   <properties>
+    <property name="face" value="O"/>
+    <property name="imagem" type="int" value="2"/>
+   </properties>
+   <point/>
+  </object>
+  <object id="101" name="cartaz" type="cartaz" x="816" y="704">
+   <properties>
+    <property name="face" value="S"/>
+    <property name="imagem" type="int" value="1"/>
+   </properties>
+   <point/>
+  </object>
+  <object id="102" name="cartaz" type="cartaz" x="656" y="352">
+   <properties>
+    <property name="face" value="S"/>
+    <property name="imagem" type="int" value="2"/>
+   </properties>
+   <point/>
+  </object>
+  <object id="103" name="cartaz" type="cartaz" x="416" y="592">
+   <properties>
+    <property name="face" value="L"/>
+    <property name="imagem" type="int" value="1"/>
+   </properties>
+   <point/>
+  </object>
+  <object id="104" name="cartaz" type="cartaz" x="368" y="800">
+   <properties>
+    <property name="face" value="S"/>
+    <property name="imagem" type="int" value="3"/>
+   </properties>
+   <point/>
+  </object>
+ </objectgroup>
+</map>

3d/pecas.py

@@ -0,0 +1,341 @@
+"""Peças pré-renderizadas dos cartões e do 404: o kit de blocos.py animado em loop de 3 s.
+
+Rodar da raiz do repositório: blender -b --python 3d/pecas.py
+Renderiza os quadros em 3d/out/pecas/<nome>/ e o ffmpeg do sistema gera em public/3d/
+peca-<nome>.webm (VP9), .mp4 (H.264) e .webp (pôster). Mesmos bloco, materiais e luz do pôster do hero.
+"""
+
+import ctypes
+import math
+import os
+import subprocess
+import sys
+
+import bpy
+from mathutils import Matrix, Vector
+
+sys.path.insert(0, os.path.dirname(os.path.abspath(__file__)))
+from blocos import (  # noqa: E402
+    LIMAS,
+    PUBLICO,
+    SAIDA,
+    criar_bloco,
+    criar_materiais,
+    estado_marca,
+    falhar,
+    ligar_cycles,
+    luz_de_estudio,
+    sair,
+    svg_para_mundo,
+)
+
+QUADROS = 72  # 3 s a 24 por segundo; o quadro 72 seria de novo o 0
+LADO = (640, 400)
+TINTA = "0x0a0a0a"  # --ink
+AMOSTRAS = 64
+LIMITE_VIDEO, LIMITE_POSTER = 250_000, 40_000
+
+
+def encaixe(f, inicio, duracao):
+    """0 antes, 1 assentado: chega rápido e assenta com ease-out cúbico, sem passar do ponto."""
+    t = min(max((f - inicio) / duracao, 0), 1)
+    return 1 - (1 - t) ** 3
+
+
+# ---------------------------------------------------------------- peças
+# Cada peça recebe novo(posição, escala, tom) e devolve pose(f), que põe os blocos no quadro f.
+# Coordenadas do Blender: X para a direita, -Y para a câmera, Z para cima; bloco de lado 1.
+
+
+def sistema(novo):
+    # planilha deitada de 7 x 5; a linha do fundo, em lima, é o cabeçalho
+    for c in range(7):
+        for r in range(5):
+            novo((c - 3, 2 - r, 0), 1, int(r == 0))
+    # as barras moram dentro das células das colunas 1 a 5, logo à frente do cabeçalho, e sobem telescópicas
+    barras = [[novo((k - 2, 1, 0), 0.98, int(j == h - 1)) for j in range(h)] for k, h in enumerate((2, 3, 5, 4, 6))]
+
+    def pose(f):
+        for k, pilha in enumerate(barras):
+            sobe = encaixe(f, 6 + 4 * k, 8) - encaixe(f, 42 + 4 * k, 8)
+            for j, obj in enumerate(pilha):
+                obj.location.z = (1 + j) * sobe
+
+    return pose
+
+
+def whatsapp(novo):
+    # celular em pé de 9 x 16 (x = c - 4, z = 7.5 - r), de cantos arredondados; o miolo vazio é a tela
+    for c in range(9):
+        for r in range(16):
+            borda = (c in (0, 8) or r in (0, 15)) and not (c in (0, 8) and r in (0, 15))
+            canto_de_dentro = c in (1, 7) and r in (1, 14)
+            if borda or canto_de_dentro or r == 2:  # r = 2 fecha a barra de cima
+                novo((c - 4, 0, 7.5 - r), 1, 0)
+    novo((-2, 0, 6.5), 1, 1)  # foto do contato
+    for i in range(4):
+        novo((-0.8 + 0.7 * i, 0, 6.5), 0.7, 0)  # nome, nos blocos menores dos balões, para ler como texto
+
+    # balões de 6 x 3 blocos menores, alternando os lados; o canto de baixo do lado do balão fica reto (é o rabo)
+    p = 0.7
+
+    def balao(k, esquerda, tom):
+        borda = -3.15 if esquerda else 3.15  # parede da tela menos meio bloco de folga
+        sentido = 1 if esquerda else -1
+        topo = 2.95 - 3.15 * k
+        blocos = []
+        for i in range(6):
+            for j in range(3):
+                if i in (0, 5) and j in (0, 2) and (i, j) != (0, 2):
+                    continue
+                alvo = Vector((borda + sentido * (i + 0.5) * p, 0, topo - j * p))
+                blocos.append((novo(alvo, p, tom), alvo))
+        return blocos, Vector((borda, 0, topo - 2.5 * p))
+
+    baloes = [balao(0, True, 0), balao(1, False, 1), balao(2, True, 0)]
+    pontos = [novo((-2.25 + d, 0, 2.95 - 6.3 - p), 0.55, 0) for d in range(3)]  # "digitando", no lugar do terceiro
+
+    def pose(f):
+        some = min(max((f - 60) / 8, 0), 1) ** 3  # somem juntos, encolhendo para o rabo
+        for (blocos, rabo), chega in zip(baloes, (2, 14, 44)):
+            s = encaixe(f, chega, 8) * (1 - some)
+            for obj, alvo in blocos:
+                obj.location = rabo + (alvo - rabo) * s
+                obj.scale = (p * max(s, 0.001),) * 3
+                obj.hide_render = s <= 0
+        aparece = encaixe(f, 26, 4) * (1 - encaixe(f, 41, 3))
+        for d, obj in enumerate(pontos):
+            pulso = max(0.0, math.sin(math.tau * (f - 28) / 8 - d * math.tau / 6))  # um depois do outro
+            s = aparece * 0.55 * (1 + 0.45 * pulso)
+            obj.scale = (max(s, 0.001),) * 3
+            obj.hide_render = s <= 0
+
+    return pose
+
+
+def quatrocentos(novo):
+    # o quadrado lima mais alto se solta para a frente (passa diante do outro) e cai; volta de cima direto no lugar
+    x0, y1 = svg_para_mundo(*LIMAS[2][:2])
+    x1, y0 = svg_para_mundo(*LIMAS[2][2:])
+    solto = []
+    for x, y, z, sx, sy, sz, tom in estado_marca():
+        obj = novo((x, -z, y), (sx, sz, sy), tom)
+        if tom and x0 < x < x1 and y0 < y < y1:
+            solto.append((obj, Vector((x, -z, y))))
+    centro = sum((alvo for _, alvo in solto), Vector()) / len(solto)
+
+    def pose(f):
+        if f < 32:
+            queda = min(max((f - 12) / 12, 0), 1) ** 2  # ease-in: a gravidade acelera
+            d = Vector((0, -1.4 * encaixe(f, 8, 4), -16 * queda))
+            giro = Matrix.Rotation(0.6 * queda, 3, "Y")  # tomba de lado enquanto cai
+        else:
+            d = Vector((0, 0, 12 * (1 - encaixe(f, 40, 8))))
+            giro = Matrix.Identity(3)
+        for obj, alvo in solto:
+            obj.location = centro + giro @ (alvo - centro) + d
+            obj.rotation_euler = giro.to_euler()
+
+    return pose
+
+
+def selo_conferido(novo, x0, z0, y, passo):
+    """Selo lima de 7 x 7 com o V de conferido vazado; (x0, z0) é o centro do bloco de cima à esquerda."""
+    desenho = ("....#", "...##", "#.##.", "###..", ".#...")
+    vazado = {(1 + i, 1 + j) for j, linha in enumerate(desenho) for i, x in enumerate(linha) if x == "#"}
+    blocos = []
+    for c in range(7):
+        for r in range(7):
+            if (c, r) not in vazado:
+                alvo = Vector((x0 + c * passo, y, z0 - r * passo))
+                blocos.append((novo(alvo, passo, 1), alvo))
+    return blocos
+
+
+def fiscal(novo):
+    # nota em pé de 11 x 16; as quatro linhas de texto são vãos na folha, a partir da coluna 1
+    linhas = {2: 7, 4: 9, 6: 6, 8: 8}
+    for c in range(11):
+        for r in range(16):
+            if not 1 <= c <= linhas.get(r, 0):
+                novo((c - 5, 0, 7.5 - r), 1, 0)
+    selo = selo_conferido(novo, -1, -1.5, -1, 1)  # à frente do canto de baixo à direita; a folha aparece pelo V
+    de_fora = Vector((22, -6, 4))  # chega pela direita, vindo da frente
+    para_cima = Vector((6, -4, 20))
+
+    def pose(f):
+        sai = min(max((f - 46) / 10, 0), 1) ** 3  # solta devagar e sai acelerando
+        d = de_fora * (1 - encaixe(f, 6, 10)) + para_cima * sai
+        for obj, alvo in selo:
+            obj.location = alvo + d
+
+    return pose
+
+
+REVISAO_CAMERA = (-0.25, -0.95, 0.15)
+
+
+def revisao(novo):
+    # janela de sistema de 13 x 13 (x = c - 6, z = 6 - r): moldura, três pontos, barra e quatro linhas de conteúdo
+    linhas = {4: 8, 6: 10, 8: 6, 10: 9}
+    # três blocos das linhas, da esquerda para a direita, saltados para a frente e girados: (deslocamento, giro)
+    fora = {
+        (3, 6): ((-0.4, -2.4, 1.1), (0.6, 0.3, 0.7)),
+        (5, 4): ((0.5, -2.0, -0.9), (-0.5, 0.4, -0.6)),
+        (7, 10): ((-0.3, -2.6, 0.9), (0.4, -0.6, 0.5)),
+    }
+    soltos = []
+    for c in range(13):
+        for r in range(13):
+            if c in (0, 12) or r in (0, 2, 12) or (r == 1 and c in (2, 4, 6)) or 2 <= c <= linhas.get(r, 0):
+                obj = novo(Vector((c - 6, 0, 6 - r)), 1, 0)
+                if (c, r) in fora:
+                    desloc, giro = fora[(c, r)]
+                    soltos.append((obj, obj.location.copy(), Vector(desloc), Vector(giro)))
+
+    # lupa: aro octogonal em volta de um vão de 3 x 3 e cabo na diagonal, para baixo e à direita
+    lupa = []
+    for dx in range(-2, 3):
+        for dz in range(-2, 3):
+            if 1.5 < math.hypot(dx, dz) <= 2.6:
+                lupa.append((novo((0, 0, 0), 1, 1), Vector((dx, 0, dz))))
+    for k in range(3):
+        d = (3.0 + 0.95 * k) / math.sqrt(2)
+        cabo = novo((0, 0, 0), 1, 1)
+        cabo.rotation_euler = (0, math.pi / 4, 0)
+        lupa.append((cabo, Vector((d, 0, -d))))
+    lima = lupa[0][0].material_slots[0].material
+    porcelana = soltos[0][0].material_slots[0].material
+
+    # a lupa anda 3,5 à frente da janela, na linha de visão de cada bloco solto: o bloco aparece no meio do aro
+    rumo = Vector(REVISAO_CAMERA).normalized()
+
+    def na_frente(p):
+        return Vector(p) + rumo * (3.5 / -rumo.y)
+
+    a, b, c = (alvo for _, alvo, _, _ in soltos)
+    caminho = [(0, na_frente((-18, 0, 1))), (9, na_frente(a)), (13, na_frente(a)), (21, na_frente(b)),
+               (25, na_frente(b)), (33, na_frente(c)), (37, na_frente(c)), (47, na_frente((28, 0, -3)))]  # fmt: skip
+    chegadas = (9, 21, 33)
+    selo = selo_conferido(novo, 2.3, -3.2, -1, 0.6)  # menor, por dentro do canto de baixo à direita
+    de_fora = Vector((0, 0, -11))  # chega e sai reto por baixo, sem invadir a direita do quadro
+
+    def lupa_em(f):
+        for (f0, p0), (f1, p1) in zip(caminho, caminho[1:]):
+            if f <= f1:
+                t = min(max((f - f0) / (f1 - f0), 0), 1)
+                return p0.lerp(p1, t * t * (3 - 2 * t))
+        return caminho[-1][1]
+
+    def pose(f):
+        centro = lupa_em(f)
+        for obj, desvio in lupa:
+            obj.location = centro + desvio
+        for i, ((obj, alvo, desloc, giro), chega) in enumerate(zip(soltos, chegadas)):
+            s = encaixe(f, chega, 6) - encaixe(f, 62 + 2 * i, 5)  # no fim voltam a saltar, para o loop emendar
+            obj.location = alvo + desloc * (1 - s)
+            obj.rotation_euler = giro * (1 - s)
+            obj.material_slots[0].material = lima if chega <= f < chega + 10 else porcelana
+        d = de_fora * (1 - encaixe(f, 44, 8) + min(max((f - 60) / 6, 0), 1) ** 3)
+        for obj, alvo in selo:
+            obj.location = alvo + d
+
+    return pose
+
+
+# nome, peça, direção da câmera, distância, alvo, quadro do pôster (peça montada)
+PECAS = [
+    ("sistema", sistema, (-0.5, -0.8, 0.6), 44, (0, 0.5, 2.3), 36),
+    ("whatsapp", whatsapp, (-0.3, -0.93, 0.18), 64, (-3.8, 0, 0), 56),
+    ("404", quatrocentos, (-0.42, -0.86, 0.2), 46, (0, 0, 0), 0),
+    ("fiscal", fiscal, (-0.42, -0.86, 0.2), 72, (0, 0, 0), 36),
+    ("revisao", revisao, REVISAO_CAMERA, 68, (6.3, 0, -0.6), 20),
+]
+
+
+# ------------------------------------------------------------- ffmpeg
+
+
+def ffmpeg(*args):
+    fundo = ["-f", "lavfi", "-i", f"color=c={TINTA}:s={LADO[0]}x{LADO[1]}:r=24"]
+    subprocess.run(["ffmpeg", "-y", "-loglevel", "error", *fundo, *args], check=True)
+
+
+def codificar(pasta, nome, poster):
+    destino = os.path.join(PUBLICO, f"peca-{nome}")
+    # quadros com alfa sobre a tinta opaca, em yuv420p BT.709 (o padrão dos navegadores)
+    compor = "[0][1]overlay=shortest=1:format=rgb,scale=out_color_matrix=bt709:out_range=tv,format=yuv420p"
+    entrada = ["-framerate", "24", "-i", os.path.join(pasta, "%04d.png"), "-filter_complex", compor, "-an"]
+    cor = ["-colorspace", "bt709", "-color_primaries", "bt709", "-color_trc", "bt709"]
+    ffmpeg(*entrada, *cor, "-c:v", "libvpx-vp9", "-crf", "30", "-b:v", "0", "-row-mt", "1", "-cpu-used", "1",
+           f"{destino}.webm")  # fmt: skip
+    ffmpeg(*entrada, *cor, "-c:v", "libx264", "-preset", "slow", "-crf", "22", "-movflags", "+faststart",
+           f"{destino}.mp4")  # fmt: skip
+    ffmpeg("-i", poster, "-filter_complex", "[0][1]overlay", "-frames:v", "1", "-c:v", "libwebp", "-quality", "80",
+           f"{destino}.webp")  # fmt: skip
+    for ext, limite in (("webm", LIMITE_VIDEO), ("mp4", LIMITE_VIDEO), ("webp", LIMITE_POSTER)):
+        tamanho = os.path.getsize(f"{destino}.{ext}")
+        print(f"peca-{nome}.{ext}: {tamanho} bytes", flush=True)
+        if tamanho > limite:
+            falhar(f"peca-{nome}.{ext} tem {tamanho} bytes, limite {limite}")
+
+
+# ------------------------------------------------------------- Blender
+
+
+def main():
+    bpy.ops.wm.read_factory_settings(use_empty=True)
+    cena = bpy.context.scene
+    cena.view_settings.view_transform = "Standard"
+    cena.world = bpy.data.worlds.new("fundo")
+    cena.render.use_persistent_data = True
+    ligar_cycles(cena)
+    luz_de_estudio(cena)
+
+    bloco = criar_bloco()
+    cena.collection.objects.unlink(bloco)  # a malha fica só nas instâncias
+    malha = bloco.data
+    bpy.data.objects.remove(bloco)
+    materiais = criar_materiais()
+    malha.materials.append(materiais[0])
+
+    camera = bpy.data.objects.new("camera", bpy.data.cameras.new("camera"))
+    cena.collection.objects.link(camera)
+    camera.data.lens = 85
+    cena.camera = camera
+
+    colecoes = {}
+    for nome, peca, direcao, distancia, alvo, quadro_poster in PECAS:
+        col = bpy.data.collections.new(nome)
+        cena.collection.children.link(col)
+        colecoes[nome] = col
+
+        def novo(posicao, escala, tom, col=col):
+            obj = bpy.data.objects.new(f"{col.name}.{len(col.objects):03d}", malha)
+            col.objects.link(obj)
+            obj.location = posicao
+            obj.scale = escala if isinstance(escala, tuple) else (escala,) * 3
+            obj.material_slots[0].link = "OBJECT"
+            obj.material_slots[0].material = materiais[tom]
+            return obj
+
+        pose = peca(novo)
+        for outro, c in colecoes.items():
+            c.hide_render = outro != nome
+        direcao = Vector(direcao).normalized()
+        camera.location = Vector(alvo) + direcao * distancia
+        camera.rotation_euler = (-direcao).to_track_quat("-Z", "Y").to_euler()
+
+        pasta = os.path.join(SAIDA, "pecas", nome)
+        os.makedirs(pasta, exist_ok=True)
+        for f in range(QUADROS):
+            pose(f)
+            sair(cena, os.path.join(pasta, f"{f:04d}.png"), LADO, "PNG", "RGBA", AMOSTRAS, True)
+        codificar(pasta, nome, os.path.join(pasta, f"{quadro_poster:04d}.png"))
+
+    ctypes.CDLL(None).fflush(None)  # despeja o buffer do C (banner do Blender) antes do OK
+    print(f"OK pecas={len(PECAS)}", flush=True)
+    sys.exit(0)  # sai já, para o OK ser a última linha
+
+
+main()

CLAUDE.md

@@ -0,0 +1 @@
+@AGENTS.md

CREDITS.md

@@ -0,0 +1,11 @@
+# Credits / Third-party assets
+
+## Project screenshots
+- `public/assets/prints/*.png` are captures taken with headless Chrome from
+  production deployments owned by the site author (evandro.dev.br), used as
+  on-screen content inside the notebook browser surface.
+
+## WhatsApp icon
+- The WhatsApp silhouette in `app/components/Contact.tsx` comes from
+  [Simple Icons](https://github.com/simple-icons/simple-icons/blob/develop/icons/whatsapp.svg).
+  It identifies the contact channel; it does not imply endorsement by WhatsApp.

DESIGN.md

@@ -0,0 +1,83 @@
+# DESIGN.md
+
+Registro das decisões de desenho do evandro.dev.br. O código (`app/globals.css`, componentes) é a fonte dos valores; este arquivo diz o porquê.
+
+## Conceito
+
+```
+Ideia:      os blocos da marca são as peças com que se monta o site ou o sistema de cada cliente
+Metáfora:   kit de blocos de encaixe, como uma maquete
+Assinatura: no hero, os blocos da marca se soltam e se remontam com a rolagem em tela, integrações e dados
+Emoção:     nos três primeiros segundos, "isto foi montado peça por peça"
+Verbo:      encaixar: chega rápido, assenta curto, sem quique
+Quadro:     a marca em porcelana com os quatro cubos verdes ao lado do título
+```
+
+Âncora: o símbolo é feito de blocos (`public/brand/mark-dark.svg`); o conceito não serve para outra marca.
+
+## Paleta
+
+| Papel | Token | Valor |
+|---|---|---|
+| Fundo escuro, tinta | `--ink` | `#0a0a0a` |
+| Fundo claro | `--paper` | `#f4f2ed` |
+| Fundo claro, segundo plano | `--paper-dark` | `#eceae4` |
+| Acento | `--slash` | `#ccff00` |
+| Texto secundário | `--meta` | `#4a4a4a` |
+| Controles que abrem o WhatsApp | `--whatsapp` | `#25d366` |
+
+O acento aparece em pouca área: um trecho do título, um botão, os cubos da marca. Verde sobre preto é a identidade da marca desde 2026-09, não uma escolha de tendência.
+
+## Tipografia
+
+- Display e corpo: Space Grotesk (`--font-display`).
+- Rótulos, números e código: Geist Mono (`--font-mono`), 13 px, sem caixa alta, `letter-spacing` de 0,02em.
+
+## Forma
+
+Cantos retos por padrão (blocos, molduras, botões do hero). Raio aparece em poucos lugares: formulário de contato, botão do WhatsApp e indicadores circulares.
+
+## Movimento
+
+Só CSS e Three.js direto. Sem biblioteca de animação (GSAP, Motion e React Three Fiber saíram em 2026-10-14 por desempenho).
+
+| Uso | Duração | Curva |
+|---|---|---|
+| Entrada de componente | 280 ms | `--ease-out` |
+| Saída de componente | 180 ms | `--ease-in` |
+| Entrada do título e do hero | 850 a 1100 ms | `--ease-out` |
+| Troca de página | 600 ms; a capa compartilhada viaja em 500 ms | cortina em degraus de 8 colunas; `--ease-out` na capa |
+| Detalhes de bloco (cursor, cortina) | conforme o caso | `steps()` |
+
+Regras:
+- Animam só `transform` (e `translate`, `scale`), `opacity`, `clip-path` e `mask`. Única exceção: a altura das perguntas frequentes ao abrir e fechar.
+- O texto está no HTML desde o primeiro quadro; a animação nunca esconde conteúdo de quem não a recebe.
+- Coisa grande se move devagar, detalhe se move rápido; escalonamento entre 20 e 80 ms.
+- Com `prefers-reduced-motion: reduce` não há cena, rolagem suave nem animação; o conteúdo aparece inteiro.
+
+## Resposta ao ponteiro e ao foco
+
+Um tratamento por papel, sempre entrando pela esquerda em 280 ms com `--ease-out`; com movimento reduzido a troca é instantânea.
+
+| Papel | Tratamento |
+|---|---|
+| Botão verde | um bloco cor de papel cobre o botão e o texto continua escuro; sobre fundo claro o bloco é escuro e o texto inverte |
+| Botão de contorno | o mesmo bloco: translúcido no fundo escuro, escuro no fundo claro (o texto inverte) |
+| Link de texto e item do menu | uma barra de 2 px cresce sob o texto |
+| Item da vitrine | uma barra verde entra pela esquerda |
+| Tocar vídeo | o círculo cresce e fica verde |
+| Logo | os quatro quadrados verdes sobem em sequência e assentam |
+
+"Falar sobre meu projeto" sempre leva ao formulário. Controle que abre o WhatsApp se chama "Chamar no WhatsApp".
+
+## Cena 3D
+
+Fonte em `3d/blocos.py` (Blender), saída em `public/3d/`. Um bloco chanfrado, repetido, com quatro estados: `marca`, `tela`, `integracoes`, `dados`.
+
+| Nível (`sceneTier()` em `lib/device.ts`) | Quem recebe | O que recebe |
+|---|---|---|
+| `full` | computador com GPU, mais de 4 núcleos e mais de 4 GB | cena em tempo real guiada pela rolagem |
+| `lite` | celular com 6 núcleos ou mais e 4 GB ou mais | cena em tempo real leve, que troca de estado sozinha |
+| `static` | o resto, movimento reduzido, economia de dados, ou quem não segura 28 ms por quadro | pôster renderizado no Blender |
+
+O pôster é o primeiro quadro de todos os níveis e o LCP continua sendo o título.

PRODUCT.md

@@ -0,0 +1,53 @@
+# Product
+
+<!-- impeccable:product-schema 1 -->
+
+## Platform
+
+web
+
+## Users
+
+- **Principal:** dono ou gerente de pequena ou média empresa de Joinville e região (comércio, serviços, indústria pequena). Não é técnico, chega pelo Google ou por indicação, decide sozinho e prefere falar pelo WhatsApp. Quer um site que traga pedidos ou um sistema para a operação.
+- **Secundário:** recrutadores e empresas de tecnologia avaliando o Evandro como desenvolvedor. O site também precisa mostrar a eles o nível técnico do trabalho.
+
+## Product Purpose
+
+Site de Evandro Fonseca Junior, engenheiro da computação de Garuva, SC, que vende sites e sistemas sob medida. O site existe para levar o visitante a uma conversa pelo WhatsApp sobre o projeto dele. Sucesso é conversa iniciada com o tipo de projeto já identificado.
+
+## Positioning
+
+"Você fala com quem desenvolve." A mesma pessoa entende o negócio, decide a estrutura e programa. Cuida de tela, dados e equipamentos (integração com hardware e IoT, experiência na Apolo Energia desde 2022). Usa IA como ferramenta e responde pelo resultado.
+
+## Operating Context
+
+- A conversa começa pelo WhatsApp, com a mensagem já montada pelo formulário; nada é enviado automaticamente.
+- Ofertas atuais: site que traz pedidos pelo WhatsApp, sistema para tirar a operação da planilha, revisão de sistema feito com IA (`/ia`).
+- Páginas de serviço em `/servicos` e casos em `/cases`.
+
+## Capabilities and Constraints
+
+- Sem preço e sem prazo no site: isso se combina na conversa.
+- O título é o primeiro conteúdo a pintar (LCP); o site funciona sem JavaScript e com movimento reduzido.
+- 3D e vídeo só onde o aparelho aguenta; quem não aguenta recebe a versão estática.
+- Métricas de navegação só com consentimento.
+
+## Brand Commitments
+
+- Nome: Evandro.dev.br. Símbolo de blocos (`public/brand/mark-dark.svg`), verde `#ccff00` sobre preto.
+- Voz: português direto, frase curta, sem jargão, sem promessa que não dá para provar.
+
+## Evidence on Hand
+
+- Clientes reais: SEV Moda Íntima, Lavação 047, SC Plus Aquicultura, AS Serviços, Julia Beauty, com vídeos e capturas em `public/videos/`.
+- 5 anos de experiência, calculados a partir de `public/portfolio-data.json`.
+- Casos de falha em sistemas feitos com IA, com fonte, em `app/ia/page.tsx`.
+- Não há depoimento com número, prêmio nem métrica de resultado de cliente: não inventar.
+
+## Product Principles
+
+1. Cada afirmação tem fonte ou prova à vista; o que não foi provado é dito como não provado.
+2. Mostrar trabalho real antes de falar de tecnologia.
+3. O visitante leigo entende em três segundos o que é oferecido e como falar.
+4. Desempenho e acessibilidade vêm antes do efeito.
+5. A IA aparece como ferramenta sob responsabilidade de um engenheiro, nunca como inimiga de quem contrata.

README.md

@@ -1,36 +1,169 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+<div align="center">
 
-## Getting Started
+<img src="assets/readme/hero.svg" width="100%" alt="evandro.dev.br: o portfólio de Evandro Fonseca Junior, com o índice dos nove cases publicados e o estado de cada um">
 
-First, run the development server:
+![Next.js 16.3.8](https://img.shields.io/badge/Next.js-16.3.8-ccff00?style=flat-square&labelColor=0a0a0a)
+![React 19.1.0](https://img.shields.io/badge/React-19.1.0-ccff00?style=flat-square&labelColor=0a0a0a)
+![Node 22.x](https://img.shields.io/badge/Node-22.x-ccff00?style=flat-square&labelColor=0a0a0a)
+![Status: em produção](https://img.shields.io/badge/status-em_produ%C3%A7%C3%A3o-ccff00?style=flat-square&labelColor=0a0a0a)
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
+[Site](https://evandro.dev.br) · [Cases](https://evandro.dev.br/cases) · [Currículo](https://evandro.dev.br/curriculo) · [LinkedIn](https://www.linkedin.com/in/evandrodevbr/) · [Issues](https://git.evandro.dev.br/evandro/portifolio-evandrodevbr/issues)
+
+</div>
+
+| SEV Moda Íntima | NutriScan |
+|---|---|
+| <img src="./public/assets/prints/print-sev.png" width="380" alt="Site da SEV Moda Íntima"> | <img src="./public/assets/prints/print-nutriscan.png" width="380" alt="NutriScan"> |
+| **SC Plus Aquicultura** | **AS Serviços** |
+| <img src="./public/assets/prints/print-scplus.png" width="380" alt="Site da SC Plus Aquicultura"> | <img src="./public/assets/prints/print-asservicos.png" width="380" alt="Site da AS Serviços"> |
+
+Capturas feitas com Chrome headless a partir de deploys de produção do próprio autor. Origem e créditos (inclusive do ícone do WhatsApp) em [`CREDITS.md`](CREDITS.md).
+
+## O que é
+
+O código do site [evandro.dev.br](https://evandro.dev.br), o portfólio de Evandro Fonseca Junior, engenheiro da computação em Garuva-SC. Pequenos negócios costumam vender e atender por mensagem: o cliente pergunta o preço um a um, o estoque vive em planilha e qualquer mudança no site depende de um desenvolvedor. O site mostra projetos entregues, serviços, currículo e um botão de WhatsApp para começar a conversa.
+
+- Apresenta três ofertas: criação de sites, sistemas web sob medida e revisão de apps feitos com IA (`/ia`).
+- Publica nove cases com stack, entregas e decisões técnicas, cada um em `/cases/<id>`.
+- Detalha seis serviços em `/servicos/*`, com escopo e etapas visíveis e a parte técnica em `<details>`.
+- Serve o currículo em HTML e o PDF em `/Profile.pdf`.
+- Gera `sitemap.xml`, `robots.txt`, manifest, imagens Open Graph e dados estruturados JSON-LD.
+
+### Cases publicados
+
+Fonte: `public/portfolio-data.json` e `lib/site-content.ts` (os mesmos nove ids).
+
+| Case | O que é | Estado | Demo |
+|---|---|---|---|
+| [`julia-beauty`](https://evandro.dev.br/cases/julia-beauty) | Julia Beauty: site de estúdio de extensão de cílios em Camboriú, com simulador de efeito e SEO local | Em produção | [juliabeauty.com.br](https://juliabeauty.com.br) |
+| [`sev-modaintima`](https://evandro.dev.br/cases/sev-modaintima) | SEV Moda Íntima: catálogo digital e loja virtual, pedido pelo WhatsApp e painel de estoque | Em produção | [sevmodaintima.com.br](https://sevmodaintima.com.br) |
+| [`lavacao-047`](https://evandro.dev.br/cases/lavacao-047) | Lavação 047: site e painel para lavação automotiva em Garuva-SC, o dono edita preços, textos e fotos | Em produção | [landing-page-lavacao047.vercel.app](https://landing-page-lavacao047.vercel.app) |
+| [`nutriscan`](https://evandro.dev.br/cases/nutriscan) | NutriScan: consulta de produtos por nome e código de barras | Em produção | [nutriscan.evandro.dev.br](https://nutriscan.evandro.dev.br) |
+| [`twins-lab`](https://evandro.dev.br/cases/twins-lab) | Twins Lab: painel ao vivo de um reator simulado | Protótipo | sem demo |
+| [`reddit-explorer`](https://evandro.dev.br/cases/reddit-explorer) | Reddit Posts Explorer: posts de um fórum de IA, filtrados por período | Concluído | sem demo |
+| [`sc-plus`](https://evandro.dev.br/cases/sc-plus) | SC Plus Aquicultura: site institucional com áreas, projetos e contato | Concluído | [scplus.evandro.dev.br](https://scplus.evandro.dev.br) |
+| [`gcc-installer`](https://evandro.dev.br/cases/gcc-installer) | MinGW GCC Installer: instalador do compilador GCC para Windows | Concluído | sem demo |
+| [`as-servicos`](https://evandro.dev.br/cases/as-servicos) | AS Serviços: site institucional com cena 3D | Concluído | sem demo |
+
+## Por que usar
+
+O repositório é a referência de como o site funciona, não um template. As decisões que valem conferir:
+
+- **Sem backend.** O formulário de contato abre o `wa.me` com o briefing já preenchido, e o rodapé mantém o contato direto por e-mail; não há API route ativa nem banco.
+- **3D só onde o aparelho aguenta.** O hero e o notebook de projetos em Three.js aparecem só onde o dispositivo comporta; em telas pequenas, com ponteiro `coarse` ou movimento reduzido, o site entrega a versão em HTML estático.
+- **Analytics com consentimento.** O Google Analytics só carrega depois de aceite explícito, e o consentimento pode ser revogado depois (detalhes em `/privacidade`).
+- **Demos externas não derrubam o render.** O estado de cada demo vem de um snapshot versionado; em produção, o render não consulta as demos.
+
+Quando não usar: se você procura um template de portfólio. O projeto é pessoal (`"private": true` no `package.json`) e não tem licença publicada.
+
+## Como funciona
+
+1. O conteúdo vem de `public/portfolio-data.json` (lido por `lib/portfolio-data.server.ts`) e de `lib/site-content.ts`; a homepage escolhe os projetos pelo campo `featured`.
+2. `data/project-health.json` é um snapshot versionado das demos. Ele só controla o CTA de cada card (disponível, indisponível, desconhecido ou sem demo) e nunca remove um card.
+3. Em produção, o render só lê o snapshot. Em desenvolvimento, um snapshot ausente ou com mais de 15 minutos é atualizado em memória. `pnpm check:projects` atualiza o arquivo por rename atômico. Contrato completo em [`docs/project-health.md`](docs/project-health.md).
+4. Um único workflow, [`.gitea/workflows/ci.yml`](.gitea/workflows/ci.yml), roda em `push`, `pull_request` e `workflow_dispatch`, com permissão `contents: read`:
+
+| Job | O que roda | Bloqueia o deploy |
+|---|---|---|
+| `verify` | Node 22, `pnpm install --frozen-lockfile`, `lint`, `typecheck`, `test -- --runInBand`, `build` | Sim |
+| `audit` | `pnpm audit --prod` e `pnpm audit --dev`, ambos com `--audit-level=high` | Não |
+| `e2e` | Playwright (Chromium) contra o build de produção na porta 3001; publica `test-results/` | Não |
+| `deploy` | Vercel CLI `61.1.0`, só após `verify`: branch padrão vai para produção, as demais para preview; pull request não publica | n/a |
+
+O deploy usa o secret `VERCEL_TOKEN`; o projeto na Vercel é o nome do repositório, ou a variável `VERCEL_PROJECT`. [`nixpacks.toml`](nixpacks.toml) (`nodejs_22`, `pnpm-9_x`) e [`vercel.json`](vercel.json) (`framework: nextjs`) descrevem o build.
+
+<details>
+<summary>Rotas e estrutura</summary>
+
+| Rota | Conteúdo |
+|---|---|
+| `/` | Hero, notebook de projetos, perfil, competências, experiência, projetos, modalidades de trabalho e contato |
+| `/cases`, `/cases/<id>` | Índice e página de cada um dos nove cases |
+| `/servicos` | Índice dos seis serviços |
+| `/servicos/criacao-de-sites` | Criação de sites |
+| `/servicos/engenharia-de-software` | Sistemas web e aplicativos mobile sob medida |
+| `/servicos/consultoria-nextjs` | Consultoria Next.js |
+| `/servicos/tauri-rust` | Aplicativos desktop para Windows e Linux |
+| `/servicos/integracao-hardware-software-iot` | Integração de hardware, software e IoT |
+| `/servicos/arquitetura-de-software` | Diagnóstico de arquitetura |
+| `/ia` | Revisão de sistema e de app feito com IA |
+| `/curriculo` | Currículo em HTML, com download de `/Profile.pdf` |
+| `/privacidade` | Privacidade e consentimento de analytics |
+
+```text
+app/                 rotas (App Router) e componentes
+lib/                 conteúdo (site-content.ts), SEO, JSON-LD, WhatsApp, project health
+public/              portfolio-data.json, Profile.pdf, logos, capturas e mídias dos cases
+data/                project-health.json, snapshot versionado das demos
+scripts/             check-projects.mjs e utilitários de SEO e vídeo
+e2e/                 testes Playwright (9 specs)
+docs/                SEO/GEO, project health e planos
+.gitea/workflows/    ci.yml (verify, audit, e2e, deploy)
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+</details>
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+## Início rápido
 
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+Requisitos: Node.js `22.x` (`engines`), pnpm `9.15.9` (`packageManager`) e, só para `pnpm test:e2e`, o Chromium do Playwright.
 
-## Learn More
+```bash
+corepack pnpm@9.15.9 install --frozen-lockfile
+corepack pnpm@9.15.9 dev      # Next.js com Turbopack
+corepack pnpm@9.15.9 build    # build de produção
+corepack pnpm@9.15.9 start    # serve um build já gerado
+```
 
-To learn more about Next.js, take a look at the following resources:
+A instalação é sempre com `--frozen-lockfile`, igual ao CI e ao Nixpacks.
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+> [!IMPORTANT]
+> O Next.js (`16.3.8`) é fixado de propósito: a `16.2.11` mantinha três advisories transitivos de severidade alta, e a `16.3.0` foi a menor versão estável da mesma major que deixou as auditorias sem vulnerabilidades high. Não faça downgrade sem repetir `pnpm audit`.
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+Validação completa, na mesma ordem do CI:
 
-## Deploy on Vercel
+```bash
+corepack pnpm@9.15.9 install --frozen-lockfile
+corepack pnpm@9.15.9 lint
+corepack pnpm@9.15.9 typecheck
+corepack pnpm@9.15.9 test -- --runInBand
+corepack pnpm@9.15.9 build
+corepack pnpm@9.15.9 audit --prod --audit-level=high
+corepack pnpm@9.15.9 audit --dev --audit-level=high
+```
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+Testes de ponta a ponta: `pnpm build && pnpm start -p 3001` e, em outro terminal, `BASE_URL=http://localhost:3001 pnpm test:e2e`.
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+Outros scripts: `pnpm format` (Biome), `pnpm test:watch` (Jest em modo watch) e `pnpm check:projects` (atualiza `data/project-health.json`).
+
+## Configuração
+
+Não há `.env.example`, e nenhuma variável é necessária para rodar localmente. O código lê:
+
+| Variável | Descrição |
+|---|---|
+| `NEXT_PUBLIC_GOOGLE_ADS_CONVERSION_LABEL` | Rótulo de conversão do Google Ads; sem ele, nenhum evento de conversão é enviado |
+| `BASE_URL` | Endereço do site testado por `pnpm test:e2e` (padrão `http://localhost:3001`) |
+| `PW_CHROMIUM` | Caminho de um Chromium local para o Playwright, para não baixar o navegador |
+
+## Estado do projeto
+
+Em produção em [evandro.dev.br](https://evandro.dev.br). Stack: Next.js 16.3.8, React 19.1.0, TypeScript 5.9.2, Tailwind CSS 4, Three.js, Lenis e Lucide React. Qualidade: Biome, Jest 30 com Testing Library (150 arquivos de teste), Playwright e axe-core. Todas as dependências diretas estão fixadas em versões exatas, exceto `lenis` (`^1.3.26`).
+
+Limites e próximos passos:
+
+- **Demos externas podem aparecer como indisponíveis.** O CTA reflete o último snapshot versionado, não uma consulta em tempo real. No snapshot de 2026-07-11, só a SEV respondeu 200; `nutriscan` falhou na consulta, `twins-lab` respondeu 404 e `sc-plus`, 502. Rode `pnpm check:projects` para renová-lo. Em 2026-10-24, `nutriscan.evandro.dev.br` continuava sem responder com o app.
+- **Ações externas de SEO/GEO pendentes.** Search Console, Bing, Cloudflare e CrUX estão só no runbook.
+
+Documentação: [`docs/project-health.md`](docs/project-health.md) (estados do CTA das demos e atualização do snapshot), [`docs/seo-geo-operations.md`](docs/seo-geo-operations.md) (runbook de SEO e GEO, descrito e **não executado**), [`docs/seo-geo-validation.md`](docs/seo-geo-validation.md) (validação de SEO e GEO) e [`CREDITS.md`](CREDITS.md).
+
+O CI roda em `push` e `pull_request`; antes de abrir um PR, rode `pnpm lint && pnpm typecheck && pnpm test -- --runInBand && pnpm build`.
+
+## Licença
+
+Sem licença publicada: todos os direitos reservados.
+
+<div align="center">
+
+<sub>Feito por <a href="https://evandro.dev.br">Evandro Fonseca Junior</a> · <a href="https://git.evandro.dev.br/evandro">git.evandro.dev.br</a></sub>
+
+</div>

__mocks__/next/navigation.ts

@@ -0,0 +1,109 @@
+/**
+ * Dublê central e completo de `next/navigation` para o Jest (jest.config.ts: moduleNameMapper). Todo teste que importa
+ * o módulo, direta ou indiretamente (HoverPrefetchLink, Header, páginas com `notFound`), recebe este arquivo: nenhum
+ * teste precisa montar um `jest.mock("next/navigation", ...)` parcial, e nenhum componente vê o módulo sem um export.
+ *
+ * Estado: `usePathname`, `useSearchParams`, `useParams` e `useSelectedLayoutSegment(s)` leem `navigationState`.
+ * Troque-o com `setNavigation({ pathname: "/cases" })` (ou `jest.mocked(usePathname).mockReturnValue("/cases")`) e
+ * volte ao padrão ("/", sem parâmetros) com `resetNavigation()` num `beforeEach`.
+ * Erros: `notFound` e `redirect` lançam como os do Next (com `digest`), e `notFound` lança com a mensagem
+ * "NEXT_NOT_FOUND", que os testes das páginas conferem.
+ */
+
+type Params = Record<string, string | string[]>;
+
+interface NavigationState {
+  pathname: string | null;
+  searchParams: URLSearchParams;
+  params: Params;
+  segments: string[];
+}
+
+const initialState = (): NavigationState => ({
+  pathname: "/",
+  searchParams: new URLSearchParams(),
+  params: {},
+  segments: [],
+});
+
+export const navigationState: NavigationState = initialState();
+
+/** Cada `jest.fn` com a implementação padrão, para o `resetNavigation` devolvê-la depois de um `mockReset`. */
+const defaults: Array<[jest.Mock, (...args: never[]) => unknown]> = [];
+function mockFn<Args extends unknown[], Result>(
+  implementation: (...args: Args) => Result,
+) {
+  const fn = jest.fn(implementation);
+  defaults.push([fn as jest.Mock, implementation as never]);
+  return fn;
+}
+
+export function setNavigation(
+  next: Partial<Omit<NavigationState, "searchParams">> & {
+    searchParams?: string | URLSearchParams;
+  },
+) {
+  const { searchParams, ...rest } = next;
+  Object.assign(navigationState, rest);
+  if (searchParams !== undefined)
+    navigationState.searchParams = new URLSearchParams(searchParams);
+}
+
+export function resetNavigation() {
+  Object.assign(navigationState, initialState());
+  for (const [fn, implementation] of defaults) {
+    fn.mockReset();
+    fn.mockImplementation(implementation);
+  }
+}
+
+export const router = {
+  push: mockFn(() => undefined),
+  replace: mockFn(() => undefined),
+  back: mockFn(() => undefined),
+  forward: mockFn(() => undefined),
+  refresh: mockFn(() => undefined),
+  prefetch: mockFn(() => undefined),
+};
+
+export const usePathname = mockFn(() => navigationState.pathname);
+export const useRouter = mockFn(() => router);
+export const useSearchParams = mockFn(() => navigationState.searchParams);
+export const useParams = mockFn(() => navigationState.params);
+export const useSelectedLayoutSegments = mockFn(() => navigationState.segments);
+export const useSelectedLayoutSegment = mockFn(
+  () => navigationState.segments[0] ?? null,
+);
+export const useServerInsertedHTML = mockFn(() => undefined);
+export const unstable_isUnrecognizedActionError = mockFn(() => false);
+export const unstable_rethrow = mockFn((error: unknown): void => {
+  throw error;
+});
+
+export const RedirectType = { push: "push", replace: "replace" } as const;
+export const ReadonlyURLSearchParams = URLSearchParams;
+
+/** Erro com `digest`, como os que o Next lança para interromper a renderização. */
+function nextError(message: string, digest: string): never {
+  throw Object.assign(new Error(message), { digest });
+}
+
+export const notFound = mockFn((): never => {
+  return nextError("NEXT_NOT_FOUND", "NEXT_HTTP_ERROR_FALLBACK;404");
+});
+export const forbidden = mockFn((): never => {
+  return nextError("NEXT_FORBIDDEN", "NEXT_HTTP_ERROR_FALLBACK;403");
+});
+export const unauthorized = mockFn((): never => {
+  return nextError("NEXT_UNAUTHORIZED", "NEXT_HTTP_ERROR_FALLBACK;401");
+});
+export const redirect = mockFn(
+  (url: string, type: "push" | "replace" = "replace"): never => {
+    return nextError("NEXT_REDIRECT", `NEXT_REDIRECT;${type};${url};307;`);
+  },
+);
+export const permanentRedirect = mockFn(
+  (url: string, type: "push" | "replace" = "replace"): never => {
+    return nextError("NEXT_REDIRECT", `NEXT_REDIRECT;${type};${url};308;`);
+  },
+);

__mocks__/resizeObserver.js

@@ -1,8 +0,0 @@
-class ResizeObserver {
-  observe() {}
-  unobserve() {}
-  disconnect() {}
-}
-
-window.ResizeObserver = ResizeObserver;
-module.exports = ResizeObserver;

__mocks__/view-transition-probe.ts

@@ -0,0 +1,32 @@
+import type { ReactNode } from "react";
+
+/**
+ * O React estável do Jest não exporta <ViewTransition> (só o canary do Next). Para conferir as props dele:
+ * `jest.mock("react", () => jest.requireActual("@/__mocks__/view-transition-probe").reactWithProbe());`
+ * O dublê põe `name`, `share` e `default` num <div> em volta dos filhos (data-vt-name, data-vt-share, data-vt-default).
+ */
+export function reactWithProbe() {
+  const actual = jest.requireActual("react");
+  function ViewTransition({
+    children,
+    name,
+    share,
+    default: fallback,
+  }: {
+    children?: ReactNode;
+    name?: string;
+    share?: string;
+    default?: string;
+  }) {
+    return actual.createElement(
+      "div",
+      {
+        "data-vt-name": name,
+        "data-vt-share": share,
+        "data-vt-default": fallback,
+      },
+      children,
+    );
+  }
+  return { ...actual, ViewTransition };
+}

app/cases/[slug]/opengraph-image.paths.test.tsx

@@ -0,0 +1,165 @@
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import { notFound } from "next/navigation";
+import { ImageResponse } from "next/og";
+import { isValidElement } from "react";
+import {
+  OG_IMAGE_MAX_BYTES,
+  OG_SIZE,
+  OgCard,
+  readProjectOgImage,
+} from "@/lib/og-card";
+import { caseStudies } from "@/lib/site-content";
+import Image, { generateImageMetadata } from "./opengraph-image";
+
+/**
+ * Testes de caminhos-base de Image (imagem de compartilhamento do case):
+ * slug desconhecido, id da imagem diferente do case, case com capa gravada (entregue como está, em JPEG,
+ * abaixo de 150 KB), capa pesada demais (cartão simples) e projeto de laboratório.
+ */
+
+/** O jsdom não tem `Response`; a rota roda no Node e devolve uma. Aqui basta guardar o corpo e os cabeçalhos. */
+class FakeResponse {
+  constructor(
+    readonly body: Uint8Array,
+    readonly init: { headers: Record<string, string> },
+  ) {}
+}
+
+beforeAll(() => {
+  Object.assign(globalThis, { Response: FakeResponse });
+});
+
+jest.mock("@/lib/og-card", () => {
+  const actual = jest.requireActual("@/lib/og-card");
+  return { ...actual, readProjectOgImage: jest.fn(actual.readProjectOgImage) };
+});
+
+const mockedReadProjectOgImage = jest.mocked(readProjectOgImage);
+const actualReadProjectOgImage =
+  jest.requireActual<typeof import("@/lib/og-card")>(
+    "@/lib/og-card",
+  ).readProjectOgImage;
+
+afterEach(() => {
+  mockedReadProjectOgImage.mockImplementation(actualReadProjectOgImage);
+});
+
+jest.mock("next/og", () => ({ ImageResponse: jest.fn() }));
+
+const mockedImageResponse = jest.mocked(ImageResponse);
+
+beforeEach(() => {
+  jest.mocked(notFound).mockClear();
+  mockedImageResponse.mockClear();
+});
+
+function getCase(id: string) {
+  const caseStudy = caseStudies.find((item) => item.id === id);
+  if (!caseStudy) throw new Error(`Missing case ${id}`);
+  return caseStudy;
+}
+
+function renderImage(slug: string, imageId: string) {
+  return Image({
+    params: Promise.resolve({ slug }),
+    id: Promise.resolve(imageId),
+  });
+}
+
+function sentCard() {
+  const [element, options] = mockedImageResponse.mock.calls[0];
+  if (!isValidElement<React.ComponentProps<typeof OgCard>>(element)) {
+    throw new Error("ImageResponse did not receive an element");
+  }
+  return { card: element, options };
+}
+
+describe("opengraph-image Image", () => {
+  it("path: case with a recorded cover -> the cover itself, in JPEG, under 150 KB, and no generated card", async () => {
+    const caseStudy = getCase("sev-modaintima");
+    const response = (await renderImage(
+      caseStudy.id,
+      caseStudy.id,
+    )) as unknown as FakeResponse;
+
+    expect(notFound).not.toHaveBeenCalled();
+    expect(mockedImageResponse).not.toHaveBeenCalled();
+    expect(response).toBeInstanceOf(FakeResponse);
+    expect(response.init.headers["Content-Type"]).toBe("image/jpeg");
+    const cover = readFileSync(
+      join(process.cwd(), "public/videos/sev-modaintima/og.jpg"),
+    );
+    expect(Buffer.from(response.body).equals(cover)).toBe(true);
+    expect(response.body.length).toBeLessThan(150_000);
+  });
+
+  it("path: cover that weighs 150 KB or more -> the plain generated card, with no background", async () => {
+    const caseStudy = getCase("sev-modaintima");
+    mockedReadProjectOgImage.mockReturnValue(undefined);
+    expect(OG_IMAGE_MAX_BYTES).toBe(150_000);
+
+    const response = await renderImage(caseStudy.id, caseStudy.id);
+
+    expect(response).not.toBeInstanceOf(FakeResponse);
+    expect(mockedImageResponse).toHaveBeenCalledTimes(1);
+    const { card, options } = sentCard();
+    expect(card.type).toBe(OgCard);
+    expect(card.props).toMatchObject({
+      eyebrow: "Case de cliente",
+      title: caseStudy.title,
+      description: caseStudy.summary,
+    });
+    expect(card.props.backgroundImage).toBeUndefined();
+    expect(options).toEqual(OG_SIZE);
+  });
+
+  it("path: image metadata -> JPEG for covers, PNG for generated cards, and every case listed without a slug", () => {
+    const [sev] = generateImageMetadata({ params: { slug: "sev-modaintima" } });
+    const [twins] = generateImageMetadata({ params: { slug: "twins-lab" } });
+    expect(sev).toMatchObject({
+      id: "sev-modaintima",
+      contentType: "image/jpeg",
+      size: OG_SIZE,
+    });
+    expect(twins).toMatchObject({
+      id: "twins-lab",
+      contentType: "image/png",
+      size: OG_SIZE,
+    });
+
+    const all = generateImageMetadata({ params: {} });
+    expect(all.map(({ id }) => id)).toEqual(caseStudies.map(({ id }) => id));
+    expect(
+      all.filter(({ contentType }) => contentType === "image/jpeg"),
+    ).toHaveLength(6);
+  });
+
+  it("path: unknown slug -> notFound() and no image", async () => {
+    await expect(renderImage("nao-existe", "nao-existe")).rejects.toThrow(
+      "NEXT_NOT_FOUND",
+    );
+    expect(notFound).toHaveBeenCalledTimes(1);
+    expect(mockedImageResponse).not.toHaveBeenCalled();
+  });
+
+  it("path: known slug but another case's image id -> notFound() and no image", async () => {
+    await expect(renderImage("sev-modaintima", "lavacao-047")).rejects.toThrow(
+      "NEXT_NOT_FOUND",
+    );
+    expect(notFound).toHaveBeenCalledTimes(1);
+    expect(mockedImageResponse).not.toHaveBeenCalled();
+  });
+
+  it("path: laboratory case -> card labelled as a laboratory project, no cover when none is recorded", async () => {
+    const caseStudy = getCase("twins-lab");
+    await renderImage(caseStudy.id, caseStudy.id);
+
+    const { card } = sentCard();
+    expect(card.props).toMatchObject({
+      eyebrow: "Projeto de laboratório",
+      title: caseStudy.title,
+    });
+    expect(card.props.backgroundImage).toBeUndefined();
+  });
+});

app/cases/[slug]/opengraph-image.tsx

@@ -0,0 +1,73 @@
+import { notFound } from "next/navigation";
+import { ImageResponse } from "next/og";
+import {
+  OG_CONTENT_TYPE,
+  OG_PHOTO_CONTENT_TYPE,
+  OG_SIZE,
+  OgCard,
+  readProjectOgImage,
+} from "@/lib/og-card";
+import { caseStudies, isClientCase } from "@/lib/site-content";
+
+function getCaseStudy(slug: string) {
+  return caseStudies.find(({ id }) => id === slug);
+}
+
+// Quem tem a capa gravada (public/videos/<id>/og.jpg, abaixo de 150 KB) a entrega como está, em JPEG: o cartão em PNG com a capa de fundo passava de 270 KB.
+function getImageMetadata(caseStudy: (typeof caseStudies)[number]) {
+  return {
+    id: caseStudy.id,
+    alt: `Case ${caseStudy.title} — Evandro Fonseca Junior`,
+    size: OG_SIZE,
+    contentType: readProjectOgImage(caseStudy.id)
+      ? OG_PHOTO_CONTENT_TYPE
+      : OG_CONTENT_TYPE,
+  };
+}
+
+export function generateImageMetadata({
+  params,
+}: {
+  params: { slug?: string };
+}) {
+  if (!params.slug) {
+    return caseStudies.map(getImageMetadata);
+  }
+
+  const caseStudy = getCaseStudy(params.slug);
+  if (!caseStudy) notFound();
+  return [getImageMetadata(caseStudy)];
+}
+
+export default async function Image({
+  params,
+  id,
+}: {
+  params: Promise<{ slug: string }>;
+  id: Promise<string>;
+}) {
+  const [{ slug }, imageId] = await Promise.all([params, id]);
+  const caseStudy = getCaseStudy(slug);
+  if (!caseStudy || imageId !== caseStudy.id) notFound();
+
+  const photo = readProjectOgImage(caseStudy.id);
+  if (photo) {
+    return new Response(new Uint8Array(photo), {
+      headers: {
+        "Content-Type": OG_PHOTO_CONTENT_TYPE,
+        "Cache-Control": "public, max-age=86400",
+      },
+    });
+  }
+
+  return new ImageResponse(
+    <OgCard
+      eyebrow={
+        isClientCase(caseStudy) ? "Case de cliente" : "Projeto de laboratório"
+      }
+      title={caseStudy.title}
+      description={caseStudy.summary}
+    />,
+    OG_SIZE,
+  );
+}

app/cases/[slug]/page.facts.paths.test.tsx

@@ -0,0 +1,39 @@
+import { render, screen } from "@testing-library/react";
+import { setNavigation } from "@/__mocks__/next/navigation";
+import { caseStudies } from "@/lib/site-content";
+import CasePage from "./page";
+
+/**
+ * Teste de caminhos-base de CasePage: os "fatos do projeto" no topo.
+ * O teste principal cobre a lista ausente (`undefined`) e a lista preenchida; aqui, a lista vazia (`[]`).
+ */
+
+beforeEach(() => {
+  setNavigation({ pathname: "/cases" });
+});
+
+function getCase(id: string) {
+  const caseStudy = caseStudies.find((item) => item.id === id);
+  if (!caseStudy) throw new Error(`Missing case ${id}`);
+  return caseStudy;
+}
+
+describe("CasePage: fatos do projeto", () => {
+  it("path: empty facts list -> no list in the hero, summary stays", async () => {
+    const caseStudy = getCase("lavacao-047");
+    caseStudy.facts = [];
+    try {
+      const ui = await CasePage({
+        params: Promise.resolve({ slug: caseStudy.id }),
+      });
+      render(ui);
+
+      expect(
+        screen.queryByRole("list", { name: "Fatos do projeto" }),
+      ).toBeNull();
+      expect(screen.getByText(caseStudy.summary)).toBeVisible();
+    } finally {
+      delete caseStudy.facts;
+    }
+  });
+});

app/cases/[slug]/page.paths.test.tsx

@@ -0,0 +1,146 @@
+import { render, screen } from "@testing-library/react";
+import { notFound } from "next/navigation";
+import { setNavigation } from "@/__mocks__/next/navigation";
+import { caseStudies, getRelatedServices } from "@/lib/site-content";
+import { getCaseMedia } from "../_components/case-media";
+import CasePage, { generateMetadata } from "./page";
+
+/**
+ * Testes de caminhos-base de CasePage e generateMetadata (complemento de page.test.tsx).
+ * Cobrem só o que o arquivo principal não exercita: slug desconhecido, mídia só no celular,
+ * demonstração sem captura, resultado vazio e case sem serviço relacionado.
+ */
+
+beforeEach(() => {
+  setNavigation({ pathname: "/cases" });
+});
+
+jest.mock("../_components/case-media", () => {
+  const actual = jest.requireActual("../_components/case-media");
+  return { ...actual, getCaseMedia: jest.fn(actual.getCaseMedia) };
+});
+
+const actualGetCaseMedia = jest.requireActual<
+  typeof import("../_components/case-media")
+>("../_components/case-media").getCaseMedia;
+const mockedGetCaseMedia = jest.mocked(getCaseMedia);
+
+beforeEach(() => {
+  jest.mocked(notFound).mockClear();
+});
+
+afterEach(() => {
+  mockedGetCaseMedia.mockImplementation(actualGetCaseMedia);
+});
+
+function getCase(id: string) {
+  const caseStudy = caseStudies.find((item) => item.id === id);
+  if (!caseStudy) throw new Error(`Missing case ${id}`);
+  return caseStudy;
+}
+
+async function renderCase(id: string) {
+  const ui = await CasePage({ params: Promise.resolve({ slug: id }) });
+  return render(ui);
+}
+
+describe("CasePage: caminhos que o teste principal não cobre", () => {
+  it("path: unknown slug -> calls notFound() and renders nothing", async () => {
+    await expect(
+      CasePage({ params: Promise.resolve({ slug: "nao-existe" }) }),
+    ).rejects.toThrow("NEXT_NOT_FOUND");
+    expect(notFound).toHaveBeenCalledTimes(1);
+  });
+
+  it("path: no demo and no desktop capture, but a mobile capture -> shows only the phone", async () => {
+    const caseStudy = getCase("as-servicos");
+    expect(caseStudy.demoUrl).toBeNull();
+    mockedGetCaseMedia.mockImplementation((id, device) =>
+      device === "mobile" ? actualGetCaseMedia(id, device) : undefined,
+    );
+
+    const { container } = await renderCase(caseStudy.id);
+
+    expect(
+      screen.getByRole("heading", { level: 2, name: "Como ficou" }),
+    ).toBeVisible();
+    expect(
+      screen.getByRole("button", {
+        name: `Reproduzir o vídeo do site ${caseStudy.title} no celular`,
+      }),
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByRole("button", {
+        name: `Reproduzir o vídeo do site ${caseStudy.title} no computador`,
+      }),
+    ).toBeNull();
+    // sem captura do computador, o topo fica em uma coluna, sem moldura de navegador
+    expect(container.querySelector(".ds-bframe")).toBeNull();
+    expect(
+      container.querySelector("section")?.querySelector(".grid"),
+    ).toBeNull();
+    expect(container.querySelector(".ds-phone")).not.toBeNull();
+    expect(screen.queryByRole("link", { name: /^Abrir o site/ })).toBeNull();
+  });
+
+  it("path: demo published but no capture on disk -> keeps the block with the site button and no video", async () => {
+    const caseStudy = getCase("sev-modaintima");
+    expect(caseStudy.demoUrl).toBeTruthy();
+    mockedGetCaseMedia.mockImplementation(() => undefined);
+
+    const { container } = await renderCase(caseStudy.id);
+
+    expect(
+      screen.getByRole("heading", { level: 2, name: "Como ficou" }),
+    ).toBeVisible();
+    expect(
+      screen.getByRole("link", { name: `Abrir o site ${caseStudy.title}` }),
+    ).toHaveAttribute("href", caseStudy.demoUrl);
+    expect(container.querySelector("video")).toBeNull();
+    expect(container.querySelector(".ds-bframe")).toBeNull();
+    expect(container.querySelector(".ds-phone")).toBeNull();
+  });
+
+  it("path: result is an empty list -> no result section", async () => {
+    const caseStudy = getCase("lavacao-047");
+    caseStudy.result = [];
+    try {
+      await renderCase(caseStudy.id);
+      expect(screen.queryByRole("heading", { name: "Resultado" })).toBeNull();
+      expect(
+        screen.getByRole("heading", { level: 2, name: "Como ficou" }),
+      ).toBeVisible();
+    } finally {
+      delete caseStudy.result;
+    }
+  });
+
+  it("path: case that no service points to -> no related service links, contact stays", async () => {
+    const caseStudy = getCase("nutriscan");
+    expect(getRelatedServices(caseStudy.id)).toHaveLength(0);
+
+    await renderCase(caseStudy.id);
+
+    expect(screen.getByText(/Projeto de laboratório/)).toBeVisible();
+    expect(screen.queryByRole("link", { name: /^Ver o serviço:/ })).toBeNull();
+    expect(screen.queryByText("Serviços ligados a este projeto")).toBeNull();
+    // o NutriScan tem "Como ficou", mas o botão de contato é um só, o do fecho (sem dois seguidos)
+    const contacts = screen.getAllByRole("link", {
+      name: "Chamar no WhatsApp",
+    });
+    expect(contacts).toHaveLength(1);
+    expect(contacts[0]).toBeVisible();
+    expect(
+      screen.getByRole("link", { name: "Ver outros cases" }),
+    ).toHaveAttribute("href", "/cases");
+  });
+});
+
+describe("generateMetadata: caminho do slug desconhecido", () => {
+  it("path: unknown slug -> only a 'not found' title, no canonical or social tags", async () => {
+    const metadata = await generateMetadata({
+      params: Promise.resolve({ slug: "nao-existe" }),
+    });
+    expect(metadata).toEqual({ title: "Case não encontrado" });
+  });
+});

app/cases/[slug]/page.test.tsx

@@ -0,0 +1,795 @@
+import { fireEvent, render, screen, within } from "@testing-library/react";
+import { setNavigation } from "@/__mocks__/next/navigation";
+import {
+  buttonLabels,
+  caseStudies,
+  clientCasesForListing,
+  getRelatedServices,
+  siteUrl,
+} from "@/lib/site-content";
+import { similarProjectSubject } from "@/lib/whatsapp";
+import CasesPage from "../page";
+import CasePage, { generateMetadata, generateStaticParams } from "./page";
+
+beforeEach(() => {
+  setNavigation({ pathname: "/cases" });
+});
+
+const clientCaseIds = [
+  "sev-modaintima",
+  "lavacao-047",
+  "sc-plus",
+  "as-servicos",
+  "julia-beauty",
+];
+const labCaseIds = [
+  "nutriscan",
+  "twins-lab",
+  "reddit-explorer",
+  "gcc-installer",
+];
+const publicCaseIds = [...clientCaseIds, ...labCaseIds];
+
+function getCase(id: string) {
+  const caseStudy = caseStudies.find((item) => item.id === id);
+  if (!caseStudy) throw new Error(`Missing case ${id}`);
+  return caseStudy;
+}
+
+async function renderCase(id: string) {
+  const ui = await CasePage({ params: Promise.resolve({ slug: id }) });
+  return render(ui);
+}
+
+function isBefore(first: Element, second: Element) {
+  return Boolean(
+    first.compareDocumentPosition(second) & Node.DOCUMENT_POSITION_FOLLOWING,
+  );
+}
+
+function readJsonLdEntities(container: HTMLElement): Record<string, unknown>[] {
+  const scripts = container.querySelectorAll<HTMLScriptElement>(
+    'script[type="application/ld+json"]',
+  );
+  if (scripts.length === 0) throw new Error("Missing JSON-LD");
+
+  return Array.from(scripts).flatMap((script) => {
+    if (!script.textContent) throw new Error("Empty JSON-LD");
+    const value = JSON.parse(script.textContent) as Record<string, unknown>;
+    return Array.isArray(value["@graph"]) ? value["@graph"] : [value];
+  });
+}
+
+/**
+ * Nenhum link para /#contact nem para o GitHub; o contato é o WhatsApp com o contexto do case, com o mesmo rótulo
+ * ("Chamar no WhatsApp") no case de cliente e no de laboratório. A mensagem é a mesma frase nos dois, a do cabeçalho:
+ * `similarProjectSubject(título)`. Um botão só por página (o do fecho): sem dois "Chamar no WhatsApp" seguidos.
+ */
+function expectContactAndNoDeadLinks(caseStudy: { id: string; title: string }) {
+  const hrefs = screen
+    .getAllByRole("link")
+    .map((link) => link.getAttribute("href") ?? "");
+  expect(hrefs).not.toContain("/#contact");
+  expect(hrefs.some((href) => /github/i.test(href))).toBe(false);
+
+  const ctas = screen.getAllByRole("link", { name: buttonLabels.whatsapp });
+  expect(ctas).toHaveLength(1);
+  for (const cta of ctas) {
+    const destination = new URL(cta.getAttribute("href") ?? "");
+    expect(destination.origin).toBe("https://wa.me");
+    expect(destination.searchParams.get("text")).toContain(
+      similarProjectSubject(caseStudy.title),
+    );
+    expect(cta).toHaveAttribute("target", "_blank");
+    expect(cta).toHaveAttribute("rel", expect.stringContaining("noopener"));
+    // limão preenchido só no contato: o botão de play e os demais não o usam
+    expect(cta.className).toContain("bg-[var(--slash)]");
+  }
+}
+
+it("exposes the nine public cases, the new client cases among them", async () => {
+  const staticSlugs = generateStaticParams().map(({ slug }) => slug);
+  expect(staticSlugs).toHaveLength(9);
+  expect(new Set(staticSlugs).size).toBe(9);
+  expect([...staticSlugs].sort()).toEqual([...publicCaseIds].sort());
+  expect(staticSlugs).toContain("sev-modaintima");
+  expect(staticSlugs).toContain("lavacao-047");
+  expect(staticSlugs).toContain("julia-beauty");
+
+  for (const id of [
+    "sev-modaintima",
+    "lavacao-047",
+    "as-servicos",
+    "julia-beauty",
+  ]) {
+    const caseStudy = getCase(id);
+    const url = `${siteUrl}/cases/${caseStudy.id}`;
+    const { metaTitle: title, metaDescription: description } = caseStudy;
+    const metadata = await generateMetadata({
+      params: Promise.resolve({ slug: caseStudy.id }),
+    });
+    expect(metadata).toMatchObject({
+      title,
+      description,
+      alternates: { canonical: url },
+      openGraph: { title, description, url },
+      twitter: { title, description },
+    });
+    expect(metadata).not.toHaveProperty("keywords");
+  }
+});
+
+it("renders a client case in the sales order, with media, contact and collapsed technical details", async () => {
+  const caseStudy = getCase("sev-modaintima");
+  const { container } = await renderCase(caseStudy.id);
+
+  const heading = screen.getByRole("heading", { level: 1 });
+  expect(heading).toHaveTextContent(caseStudy.headline);
+  expect(isBefore(heading, screen.getByText(caseStudy.summary))).toBe(true);
+  expect(screen.getByText(/Case de cliente/)).toBeVisible();
+
+  const sectionNames = [
+    "O cliente e o contexto",
+    "O problema",
+    "O que foi feito",
+    "Como ficou",
+    "O que o cliente passou a poder fazer",
+    "Quer um projeto parecido com este?",
+  ];
+  const sectionHeadings = sectionNames.map((name) =>
+    screen.getByRole("heading", { level: 2, name }),
+  );
+  for (let index = 1; index < sectionHeadings.length; index += 1) {
+    expect(isBefore(sectionHeadings[index - 1], sectionHeadings[index])).toBe(
+      true,
+    );
+  }
+  expect(isBefore(heading, sectionHeadings[0])).toBe(true);
+
+  expect(screen.getByText(caseStudy.context)).toBeVisible();
+  expect(screen.getByText(caseStudy.problem)).toBeVisible();
+  for (const delivery of caseStudy.deliveries) {
+    expect(screen.getByText(delivery)).toBeVisible();
+  }
+
+  // sem dado real, não há seção de resultado
+  expect(screen.queryByRole("heading", { name: "Resultado" })).toBeNull();
+
+  // mídia: o pôster do computador e do celular com um botão de play; nenhum vídeo parado com controles
+  expect(container.querySelector("video")).toBeNull();
+  const desktopPlay = screen.getByRole("button", {
+    name: `Reproduzir o vídeo do site ${caseStudy.title} no computador`,
+  });
+  const mobilePlay = screen.getByRole("button", {
+    name: `Reproduzir o vídeo do site ${caseStudy.title} no celular`,
+  });
+  const mediaSection = screen
+    .getByRole("heading", { level: 2, name: "Como ficou" })
+    .closest("section");
+  expect(mediaSection?.querySelector(".ds-bframe")).toContainElement(
+    desktopPlay,
+  );
+  expect(mediaSection?.querySelector(".ds-phone")).toContainElement(mobilePlay);
+  expect(
+    screen.getByRole("link", { name: `Abrir o site ${caseStudy.title}` }),
+  ).toHaveAttribute("href", caseStudy.demoUrl);
+
+  // um botão de contato só, no fecho: as capacidades (logo depois de "Como ficou") não repetem o botão
+  expectContactAndNoDeadLinks(caseStudy);
+  const capabilitiesSection = sectionHeadings[4].closest("section");
+  expect(
+    within(capabilitiesSection as HTMLElement).queryByRole("link", {
+      name: buttonLabels.whatsapp,
+    }),
+  ).toBeNull();
+  const closingSection = sectionHeadings[5].closest("section");
+  expect(closingSection).toContainElement(
+    within(closingSection as HTMLElement).getByRole("link", {
+      name: buttonLabels.whatsapp,
+    }),
+  );
+  for (const capability of caseStudy.capabilities ?? []) {
+    expect(
+      within(capabilitiesSection as HTMLElement).getByText(capability),
+    ).toBeVisible();
+  }
+
+  // detalhes técnicos: recolhidos, junto do conteúdo (logo depois do que foi feito), não numa faixa à parte
+  const details = container.querySelector("details");
+  if (!details) throw new Error("Missing technical details");
+  expect(details).not.toHaveAttribute("open");
+  expect(within(details).getByText("Detalhes técnicos")).toBeVisible();
+  for (const technology of caseStudy.stack) {
+    expect(within(details).getByText(technology)).not.toBeVisible();
+  }
+  for (const decision of caseStudy.decisions) {
+    expect(within(details).getByText(decision)).not.toBeVisible();
+  }
+  const doneSection = sectionHeadings[2].closest("section");
+  expect(doneSection).toContainElement(details);
+  expect(isBefore(screen.getByText(caseStudy.deliveries[0]), details)).toBe(
+    true,
+  );
+  expect(isBefore(details, sectionHeadings[3])).toBe(true);
+  expect(container.querySelectorAll("details")).toHaveLength(1);
+  expect(
+    container.querySelector("section[aria-label='Detalhes técnicos']"),
+  ).toBeNull();
+
+  // o que saiu: desafio verificável, limites da evidência, fontes e commits
+  for (const name of [
+    "Desafio verificável",
+    "Decisões de implementação",
+    "Limites desta evidência",
+    "Fontes",
+  ]) {
+    expect(screen.queryByRole("heading", { name })).toBeNull();
+  }
+  expect(screen.queryByRole("link", { name: /^Fonte:/ })).toBeNull();
+  expect(container.textContent).not.toMatch(/Commit:|[0-9a-f]{40}/);
+
+  const graph = readJsonLdEntities(container);
+  expect(graph.map((node) => node["@type"])).toEqual([
+    "CreativeWork",
+    "BreadcrumbList",
+  ]);
+  expect(JSON.stringify(graph)).not.toMatch(
+    /Article|FAQPage|ProfessionalService|LocalBusiness/,
+  );
+  const breadcrumb = graph[1] as {
+    itemListElement: Array<{
+      "@type": string;
+      position: number;
+      name: string;
+      item: string;
+    }>;
+  };
+  const canonicalUrl = `${siteUrl}/cases/${caseStudy.id}`;
+  expect(breadcrumb.itemListElement).toEqual([
+    { "@type": "ListItem", position: 1, name: "Início", item: siteUrl },
+    {
+      "@type": "ListItem",
+      position: 2,
+      name: "Cases",
+      item: `${siteUrl}/cases`,
+    },
+    {
+      "@type": "ListItem",
+      position: 3,
+      name: caseStudy.title,
+      item: canonicalUrl,
+    },
+  ]);
+
+  const visibleBreadcrumb = screen.getByRole("navigation", {
+    name: "Trilha de navegação",
+  });
+  expect(
+    within(visibleBreadcrumb)
+      .getAllByRole("link")
+      .map((link) => ({
+        name: link.textContent,
+        href: link.getAttribute("href"),
+        current: link.getAttribute("aria-current"),
+      })),
+  ).toEqual([
+    { name: "Início", href: "/", current: null },
+    { name: "Cases", href: "/cases", current: null },
+    {
+      name: caseStudy.title,
+      href: `/cases/${caseStudy.id}`,
+      current: "page",
+    },
+  ]);
+});
+
+it("renders the two new client cases from the portfolio data", async () => {
+  for (const id of ["sev-modaintima", "lavacao-047"]) {
+    const caseStudy = getCase(id);
+    const { unmount } = await renderCase(id);
+
+    expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent(
+      caseStudy.headline,
+    );
+    expect(
+      screen.getByRole("link", { name: `Abrir o site ${caseStudy.title}` }),
+    ).toHaveAttribute("href", caseStudy.demoUrl);
+    // um botão de contato só, no fecho, mesmo com "Como ficou" na página
+    expectContactAndNoDeadLinks(caseStudy);
+    unmount();
+  }
+});
+
+it("labels a laboratory case, skips the media block and shows its service as a card", async () => {
+  const caseStudy = getCase("twins-lab");
+  const { container } = await renderCase(caseStudy.id);
+
+  expect(screen.getByText(/Projeto de laboratório/)).toBeVisible();
+  expect(
+    screen.getByRole("heading", { level: 2, name: "O contexto do projeto" }),
+  ).toBeVisible();
+  expect(screen.queryByRole("heading", { name: "Como ficou" })).toBeNull();
+  expect(container.querySelector("video")).toBeNull();
+  expect(container.querySelector(".ds-bframe")).toBeNull();
+  expect(screen.queryByRole("link", { name: /^Abrir o site/ })).toBeNull();
+  expect(screen.queryByText(/indispon/i)).toBeNull();
+
+  const relatedLinks = screen.getAllByRole("link", {
+    name: /^Ver o serviço:/,
+  });
+  expect(relatedLinks.map((link) => link.getAttribute("href"))).toEqual(
+    getRelatedServices(caseStudy.id).map(({ slug }) => `/servicos/${slug}`),
+  );
+  expect(relatedLinks).toHaveLength(1);
+  expectContactAndNoDeadLinks(caseStudy);
+});
+
+it("turns the contact of a laboratory case into the 'Fale sobre o seu caso' invitation, with the same button label as a client case", async () => {
+  for (const id of labCaseIds) {
+    const { unmount } = await renderCase(id);
+
+    expect(screen.queryByText("Quer um projeto parecido com este?")).toBeNull();
+    expect(
+      screen.queryByRole("link", {
+        name: /Conversar sobre um projeto parecido|Tem um problema parecido/,
+      }),
+    ).toBeNull();
+    expect(
+      screen.getByRole("heading", { level: 2, name: "Fale sobre o seu caso" }),
+    ).toBeVisible();
+    // um botão só, com ou sem "Como ficou" (NutriScan tem)
+    expectContactAndNoDeadLinks(getCase(id));
+    // o laboratório não tem "o que o cliente passou a poder fazer"
+    expect(
+      screen.queryByRole("heading", {
+        name: "O que o cliente passou a poder fazer",
+      }),
+    ).toBeNull();
+    unmount();
+  }
+});
+
+it("writes what the client can do now right after 'Como ficou', with no contact button of its own, for every client case", async () => {
+  for (const id of clientCaseIds) {
+    const caseStudy = getCase(id);
+    const { unmount } = await renderCase(id);
+
+    const media = screen.getByRole("heading", { level: 2, name: "Como ficou" });
+    const capabilities = screen.getByRole("heading", {
+      level: 2,
+      name: "O que o cliente passou a poder fazer",
+    });
+    // a seção vem logo depois da mídia, sem outra seção no meio
+    const mediaSection = media.closest("section");
+    const capabilitiesSection = capabilities.closest("section");
+    expect(mediaSection?.nextElementSibling).toBe(capabilitiesSection);
+    const items = within(capabilitiesSection as HTMLElement)
+      .getAllByRole("listitem")
+      .map((item) => item.textContent);
+    expect(items).toEqual(caseStudy.capabilities);
+    expect(items.length).toBeGreaterThanOrEqual(2);
+    expect(items.length).toBeLessThanOrEqual(3);
+    // sem número inventado
+    expect(items.join(" ")).not.toMatch(/\d/);
+    // o único botão de contato é o do fecho, depois da lista: não há dois "Chamar no WhatsApp" seguidos
+    expect(
+      within(capabilitiesSection as HTMLElement).queryByRole("link", {
+        name: buttonLabels.whatsapp,
+      }),
+    ).toBeNull();
+    const closingSection = screen
+      .getByRole("heading", {
+        level: 2,
+        name: "Quer um projeto parecido com este?",
+      })
+      .closest("section");
+    expect(capabilitiesSection?.nextElementSibling).toBe(closingSection);
+    expect(
+      within(closingSection as HTMLElement).getAllByRole("link", {
+        name: buttonLabels.whatsapp,
+      }),
+    ).toHaveLength(1);
+    unmount();
+  }
+
+  // a frase do dono da Lavação 047 vem dos dados do projeto
+  await renderCase("lavacao-047");
+  expect(
+    screen.getByText(
+      "O dono muda preços, textos, fotos e o mapa sem pedir a ninguém, e a mudança aparece no site sem nova publicação.",
+    ),
+  ).toBeVisible();
+});
+
+it("shows the author's role and no site button for a client project without a public site", async () => {
+  const caseStudy = getCase("as-servicos");
+  expect(caseStudy.demoUrl).toBeNull();
+  await renderCase(caseStudy.id);
+
+  expect(screen.getByText("Minha participação:")).toBeVisible();
+  expect(
+    screen.getByText(caseStudy.role ?? "", { exact: false }),
+  ).toBeVisible();
+  expect(screen.queryByRole("link", { name: /^Abrir o site/ })).toBeNull();
+  expect(screen.queryByText(/indispon/i)).toBeNull();
+  // a capa continua nas molduras
+  expect(
+    screen.getByRole("button", {
+      name: `Reproduzir o vídeo do site ${caseStudy.title} no computador`,
+    }),
+  ).toBeInTheDocument();
+});
+
+it("shows the result section only when the case has real data", async () => {
+  const caseStudy = getCase("lavacao-047");
+  const { unmount } = await renderCase(caseStudy.id);
+  expect(screen.queryByRole("heading", { name: "Resultado" })).toBeNull();
+  unmount();
+
+  caseStudy.result = ["Dado real informado pelo cliente."];
+  try {
+    await renderCase(caseStudy.id);
+    const heading = screen.getByRole("heading", {
+      level: 2,
+      name: "Resultado",
+    });
+    expect(screen.getByText("Dado real informado pelo cliente.")).toBeVisible();
+    expect(
+      isBefore(
+        screen.getByRole("heading", { level: 2, name: "Como ficou" }),
+        heading,
+      ),
+    ).toBe(true);
+    expect(
+      isBefore(
+        heading,
+        screen.getByRole("heading", {
+          level: 2,
+          name: "Quer um projeto parecido com este?",
+        }),
+      ),
+    ).toBe(true);
+  } finally {
+    delete caseStudy.result;
+  }
+});
+
+it("shows at most two related services, as cards under the contact button", async () => {
+  // lavacao-047 tem três serviços ligados; só os dois primeiros viram cards
+  const sev = getCase("lavacao-047");
+  const all = getRelatedServices(sev.id);
+  expect(all.length).toBeGreaterThan(2);
+  const { unmount } = await renderCase(sev.id);
+
+  const cards = screen.getAllByRole("link", { name: /^Ver o serviço:/ });
+  expect(cards).toHaveLength(2);
+  expect(cards.map((link) => link.getAttribute("href"))).toEqual(
+    all.slice(0, 2).map(({ slug }) => `/servicos/${slug}`),
+  );
+  for (const link of cards) {
+    const card = link.closest("article");
+    expect(card).toHaveClass("ds-card");
+    expect(
+      within(card as HTMLElement).getByRole("heading", { level: 3 }),
+    ).toBeVisible();
+  }
+  expect(
+    screen.queryByRole("link", { name: /^Ver serviço relacionado:/ }),
+  ).toBeNull();
+  // o botão do fecho (o único) vem antes dos cartões
+  const contact = screen.getByRole("link", { name: buttonLabels.whatsapp });
+  expect(isBefore(contact, cards[0])).toBe(true);
+  unmount();
+
+  // sc-plus e a SEV têm dois (a SEV liga à oferta de site e à de sistema); a AS Serviços, um
+  for (const [id, expected] of [
+    ["sc-plus", 2],
+    ["as-servicos", 1],
+    ["sev-modaintima", 2],
+  ] as const) {
+    const { unmount: unmountCase } = await renderCase(id);
+    const links = screen.getAllByRole("link", { name: /^Ver o serviço:/ });
+    expect(links).toHaveLength(expected);
+    expect(links.map((link) => link.getAttribute("href"))).toEqual(
+      getRelatedServices(id)
+        .slice(0, 2)
+        .map(({ slug }) => `/servicos/${slug}`),
+    );
+    expectContactAndNoDeadLinks(getCase(id));
+    unmountCase();
+  }
+});
+
+it("links the SEV case to the site offer and to the system offer, each by the name of the offer", async () => {
+  await renderCase("sev-modaintima");
+
+  const links = screen.getAllByRole("link", { name: /^Ver o serviço:/ });
+  expect(links.map((link) => link.getAttribute("href"))).toEqual([
+    "/servicos/criacao-de-sites",
+    "/servicos/engenharia-de-software",
+  ]);
+  expect(links.map((link) => link.textContent)).toEqual([
+    "Ver o serviço: Site que traz pedidos pelo WhatsApp",
+    "Ver o serviço: Sistema para tirar a operação da planilha",
+  ]);
+});
+
+it("writes the CreativeWork of a client case with creator, client and keywords", async () => {
+  const caseStudy = getCase("lavacao-047");
+  const { container } = await renderCase(caseStudy.id);
+
+  const work = readJsonLdEntities(container).find(
+    (node) => node["@type"] === "CreativeWork",
+  );
+  expect(work).toEqual({
+    "@type": "CreativeWork",
+    "@id": `${siteUrl}/cases/lavacao-047#creative-work`,
+    name: "Lavação 047: Site e painel para lavação automotiva",
+    description: caseStudy.metaDescription,
+    url: `${siteUrl}/cases/lavacao-047`,
+    image: `${siteUrl}/cases/lavacao-047/opengraph-image/lavacao-047`,
+    inLanguage: "pt-BR",
+    creator: { "@id": `${siteUrl}/#person` },
+    sourceOrganization: {
+      "@type": "Organization",
+      name: "Lavação 047",
+      url: "https://landing-page-lavacao047.vercel.app",
+    },
+    keywords: caseStudy.stack.join(", "),
+  });
+});
+
+it("writes the CreativeWork of a laboratory case without a client", async () => {
+  const caseStudy = getCase("twins-lab");
+  const { container } = await renderCase(caseStudy.id);
+
+  const work = readJsonLdEntities(container).find(
+    (node) => node["@type"] === "CreativeWork",
+  );
+  expect(work).toMatchObject({
+    name: "Twins Lab: Painel ao vivo de um reator simulado",
+    url: `${siteUrl}/cases/twins-lab`,
+    creator: { "@id": `${siteUrl}/#person` },
+    keywords: "Next.js, TypeScript, NextAuth, MongoDB, SSE",
+  });
+  expect(work).not.toHaveProperty("sourceOrganization");
+});
+
+it("puts the project cover next to the title, and below it on a phone, in a browser frame", async () => {
+  const caseStudy = getCase("sev-modaintima");
+  const { container } = await renderCase(caseStudy.id);
+
+  const hero = container.querySelector("section");
+  if (!hero) throw new Error("Missing hero");
+  const frame = hero.querySelector(".ds-bframe");
+  if (!frame) throw new Error("Missing hero frame");
+  expect(frame.querySelector("img")).toHaveAttribute(
+    "alt",
+    `Captura de tela do site ${caseStudy.title}`,
+  );
+  expect(frame.querySelector(".ds-bframe-url")).toHaveTextContent(
+    "sevmodaintima.com.br",
+  );
+  // a capa abre a página: carrega antes das demais imagens
+  expect(frame.querySelector("img")).not.toHaveAttribute("loading", "lazy");
+
+  // ordem do documento (a do celular): título, mídia, resumo
+  const heading = screen.getByRole("heading", { level: 1 });
+  const summary = screen.getByText(caseStudy.summary);
+  expect(hero).toContainElement(summary);
+  expect(isBefore(heading, frame)).toBe(true);
+  expect(isBefore(frame, summary)).toBe(true);
+  // no computador: duas colunas, texto à esquerda e mídia à direita
+  const grid = frame.closest(".grid");
+  expect(grid?.className).toContain("lg:grid-cols-[");
+  expect(frame.parentElement?.className).toContain("lg:col-start-2");
+  expect(heading.parentElement?.className).toContain("lg:col-start-1");
+});
+
+it("keeps the hero in one column when the case has no capture", async () => {
+  const { container } = await renderCase("twins-lab");
+
+  const hero = container.querySelector("section");
+  expect(hero?.querySelector(".ds-bframe")).toBeNull();
+  expect(hero?.querySelector(".grid")).toBeNull();
+});
+
+it("shows the optional facts only when they are filled in", async () => {
+  const caseStudy = getCase("lavacao-047");
+  const empty = await renderCase(caseStudy.id);
+  expect(screen.queryByRole("list", { name: "Fatos do projeto" })).toBeNull();
+  empty.unmount();
+
+  caseStudy.facts = ["Fato de teste um", "Fato de teste dois"];
+  try {
+    await renderCase(caseStudy.id);
+    const list = screen.getByRole("list", { name: "Fatos do projeto" });
+    expect(within(list).getAllByRole("listitem")).toHaveLength(2);
+    expect(within(list).getByText("Fato de teste um")).toBeVisible();
+    expect(isBefore(screen.getByText(caseStudy.summary), list)).toBe(true);
+  } finally {
+    delete caseStudy.facts;
+  }
+});
+
+it("starts the video only when the visitor presses play, and moves focus to it", async () => {
+  const caseStudy = getCase("sev-modaintima");
+  const { container } = await renderCase(caseStudy.id);
+
+  const play = screen.getByRole("button", {
+    name: `Reproduzir o vídeo do site ${caseStudy.title} no computador`,
+  });
+  expect(play).toBeVisible();
+  expect(play.className).not.toContain("--slash");
+  expect(container.querySelector("video")).toBeNull();
+
+  fireEvent.click(play);
+
+  const video = screen.getByLabelText(
+    `Vídeo do site ${caseStudy.title} no computador`,
+  );
+  expect(video.tagName).toBe("VIDEO");
+  expect(video).toHaveAttribute(
+    "poster",
+    `/videos/${caseStudy.id}/desktop.webp`,
+  );
+  expect(video).toHaveAttribute("controls");
+  expect(video).toHaveFocus();
+  expect(
+    video.querySelectorAll("source[src^='/videos/sev-modaintima/']"),
+  ).toHaveLength(2);
+  expect(video.closest(".ds-bframe")).not.toBeNull();
+  expect(
+    screen.queryByRole("button", {
+      name: `Reproduzir o vídeo do site ${caseStudy.title} no computador`,
+    }),
+  ).toBeNull();
+  // o celular continua com o pôster até a pessoa tocar nele
+  expect(
+    screen.getByRole("button", {
+      name: `Reproduzir o vídeo do site ${caseStudy.title} no celular`,
+    }),
+  ).toBeVisible();
+});
+
+it("gives the case page the same shell as the home, with no narrow max-width", async () => {
+  const { container } = await renderCase("sev-modaintima");
+  for (const shell of container.querySelectorAll(".ds-section-shell")) {
+    expect(shell.className).not.toMatch(/max-w-/);
+  }
+});
+
+it("lists client cases with a cover first, then the laboratory, and keeps the schema aligned", () => {
+  const { container } = render(<CasesPage />);
+  const heading = screen.getByRole("heading", { level: 1 });
+  expect(heading.nextElementSibling).toHaveTextContent(/Abra um case/);
+  // o título e o subtítulo não repetem "Veja o que já"
+  expect(heading.nextElementSibling).not.toHaveTextContent(/Veja o que já/);
+  expect(container.textContent).not.toMatch(/Selected work/i);
+
+  const clientHeading = screen.getByRole("heading", {
+    level: 2,
+    name: "Projetos de clientes",
+  });
+  const labHeading = screen.getByRole("heading", {
+    level: 2,
+    name: "Laboratório",
+  });
+  expect(isBefore(heading, clientHeading)).toBe(true);
+  expect(isBefore(clientHeading, labHeading)).toBe(true);
+  expect(screen.getByText(/Projetos pessoais e de estudo/)).toBeVisible();
+
+  // cases de cliente, na ordem da vitrine (SEV primeiro): capa (pôster) em moldura de navegador e botão "Ver case" em contorno
+  const listedIds = clientCasesForListing.map(({ id }) => id);
+  expect([...listedIds].sort()).toEqual([...clientCaseIds].sort());
+  expect(listedIds).toEqual([
+    "sev-modaintima",
+    "lavacao-047",
+    "sc-plus",
+    "as-servicos",
+    "julia-beauty",
+  ]);
+  const clientLinks = listedIds.map((id) => {
+    const card = container
+      .querySelector(`a[href="/cases/${id}"]`)
+      ?.closest("article");
+    if (!card) throw new Error(`Missing client card ${id}`);
+    expect(isBefore(clientHeading, card)).toBe(true);
+    expect(isBefore(card, labHeading)).toBe(true);
+    expect(card.querySelector(".ds-bframe img")).toHaveAttribute(
+      "alt",
+      `Captura de tela do site ${getCase(id).title}`,
+    );
+    return within(card).getByRole("link", {
+      name: `${buttonLabels.case} ${getCase(id).title}`,
+    });
+  });
+  expect(clientLinks.map((link) => link.getAttribute("href"))).toEqual(
+    listedIds.map((id) => `/cases/${id}`),
+  );
+
+  // laboratório: lista compacta, uma linha por projeto (nome, o que é, "Projeto próprio" e o link), sem capa nem cartão
+  const labLinks = within(
+    labHeading.closest("section") as HTMLElement,
+  ).getAllByRole("link", { name: /^Ver case / });
+  expect(labLinks.map((link) => link.getAttribute("href"))).toEqual(
+    labCaseIds.map((id) => `/cases/${id}`),
+  );
+  const labList = labLinks[0].closest("ul");
+  expect(labList?.querySelectorAll(":scope > li")).toHaveLength(
+    labCaseIds.length,
+  );
+  expect(labList?.querySelector("article, .ds-card, .ds-bframe")).toBeNull();
+  labLinks.forEach((link, index) => {
+    const row = link.closest("li");
+    const caseStudy = getCase(labCaseIds[index]);
+    expect(isBefore(labHeading, link)).toBe(true);
+    expect(link).toHaveAccessibleName(`Ver case ${caseStudy.title}`);
+    expect(
+      within(row as HTMLElement).getByRole("heading", {
+        level: 3,
+        name: caseStudy.title,
+      }),
+    ).toBeVisible();
+    expect(
+      within(row as HTMLElement).getByText(caseStudy.subtitle),
+    ).toBeVisible();
+    expect(
+      within(row as HTMLElement).getByText("Projeto próprio"),
+    ).toBeVisible();
+    // sem o resumo longo do cartão antigo
+    expect(row).not.toHaveTextContent(caseStudy.summary);
+  });
+
+  // contato pelo WhatsApp, sem /#contact nem GitHub
+  const hrefs = screen
+    .getAllByRole("link")
+    .map((link) => link.getAttribute("href") ?? "");
+  expect(hrefs).not.toContain("/#contact");
+  expect(hrefs.some((href) => /github/i.test(href))).toBe(false);
+  expect(hrefs).toContain("/servicos");
+  const cta = screen.getByRole("link", { name: buttonLabels.whatsapp });
+  expect(new URL(cta.getAttribute("href") ?? "").origin).toBe("https://wa.me");
+
+  const visibleBreadcrumb = screen.getByRole("navigation", {
+    name: "Trilha de navegação",
+  });
+  expect(
+    within(visibleBreadcrumb)
+      .getAllByRole("link")
+      .map((link) => [link.textContent, link.getAttribute("href")]),
+  ).toEqual([
+    ["Início", "/"],
+    ["Cases", "/cases"],
+  ]);
+
+  const graph = readJsonLdEntities(container);
+  expect(graph.map((node) => node["@type"])).toEqual([
+    "CollectionPage",
+    "ItemList",
+    "BreadcrumbList",
+  ]);
+  const itemList = graph[1] as {
+    itemListElement: Array<{
+      "@type": string;
+      position: number;
+      name: string;
+      url: string;
+    }>;
+  };
+  const visibleItems = [...clientLinks, ...labLinks].map((link, index) => {
+    const href = link.getAttribute("href");
+    // cartão do cliente ou linha da lista do laboratório
+    const card = link.closest("article, li");
+    if (!card) throw new Error(`Missing visible card for ${href}`);
+    const expected = getCase((href ?? "").replace("/cases/", ""));
+    expect(card).toHaveTextContent(expected.title);
+    return {
+      "@type": "ListItem",
+      position: index + 1,
+      name: expected.title,
+      url: `${siteUrl}${href}`,
+    };
+  });
+  expect(itemList.itemListElement).toEqual(visibleItems);
+});

app/cases/[slug]/page.tsx

@@ -0,0 +1,148 @@
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { safeJsonLd } from "@/lib/jsonld";
+import {
+  buildBreadcrumbList,
+  buildCaseJsonLd,
+  buildPageSocialMetadata,
+} from "@/lib/seo";
+import { caseStudies, isClientCase, siteUrl } from "@/lib/site-content";
+import { CaseCapabilitiesSection } from "../_components/CaseCapabilitiesSection";
+import { CaseContactSection } from "../_components/CaseContactSection";
+import { CaseHero } from "../_components/CaseHero";
+import { CaseMediaSection } from "../_components/CaseMediaSection";
+import { CaseResultSection } from "../_components/CaseResultSection";
+
+interface CasePageProps {
+  params: Promise<{ slug: string }>;
+}
+
+export function generateStaticParams() {
+  return caseStudies.map((caseStudy) => ({ slug: caseStudy.id }));
+}
+
+export async function generateMetadata({
+  params,
+}: CasePageProps): Promise<Metadata> {
+  const { slug } = await params;
+  const caseStudy = caseStudies.find((item) => item.id === slug);
+
+  if (!caseStudy) return { title: "Case não encontrado" };
+
+  const url = `${siteUrl}/cases/${caseStudy.id}`;
+  return {
+    title: caseStudy.metaTitle,
+    description: caseStudy.metaDescription,
+    ...buildPageSocialMetadata({
+      url,
+      title: caseStudy.metaTitle,
+      description: caseStudy.metaDescription,
+      type: "article",
+    }),
+  };
+}
+
+export default async function CasePage({ params }: CasePageProps) {
+  const { slug } = await params;
+  const caseStudy = caseStudies.find((item) => item.id === slug);
+  if (!caseStudy) notFound();
+
+  const pageUrl = `${siteUrl}/cases/${caseStudy.id}`;
+  const isClient = isClientCase(caseStudy);
+  const jsonLd = {
+    "@context": "https://schema.org",
+    "@graph": [
+      buildCaseJsonLd(caseStudy),
+      buildBreadcrumbList(pageUrl, [
+        ["Início", siteUrl],
+        ["Cases", `${siteUrl}/cases`],
+        [caseStudy.title, pageUrl],
+      ] as const),
+    ],
+  };
+
+  return (
+    <main>
+      <script type="application/ld+json">{safeJsonLd(jsonLd)}</script>
+      <article>
+        <CaseHero caseStudy={caseStudy} isClient={isClient} />
+
+        <section className="ds-section" aria-labelledby="case-context">
+          <div className="ds-section-shell">
+            <div className="ds-grid-2 items-start">
+              <div className="max-w-[68ch]">
+                <h2 id="case-context" className="ds-card-title !mt-0">
+                  {isClient
+                    ? "O cliente e o contexto"
+                    : "O contexto do projeto"}
+                </h2>
+                <p className="ds-copy">{caseStudy.context}</p>
+                {caseStudy.role ? (
+                  <p className="ds-copy">
+                    <strong className="font-semibold text-[var(--ink)]">
+                      Minha participação:
+                    </strong>{" "}
+                    {caseStudy.role}
+                  </p>
+                ) : null}
+              </div>
+              <div className="max-w-[68ch]">
+                <h2 id="case-problem" className="ds-card-title !mt-0">
+                  O problema
+                </h2>
+                <p className="ds-copy">{caseStudy.problem}</p>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section className="ds-section" aria-labelledby="case-done">
+          <div className="ds-section-shell">
+            <div className="max-w-[860px]">
+              <h2 id="case-done" className="ds-card-title !mt-0">
+                O que foi feito
+              </h2>
+              <ul className="ds-list space-y-sp-3 pl-[1.15rem]">
+                {caseStudy.deliveries.map((delivery) => (
+                  <li key={delivery}>{delivery}</li>
+                ))}
+              </ul>
+              <details className="mt-sp-8 border border-[var(--border)] bg-white/70 p-sp-5 md:p-sp-6">
+                <summary className="cursor-pointer py-sp-2 text-base font-semibold leading-relaxed focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[var(--ink)]">
+                  Detalhes técnicos
+                </summary>
+                <div className="max-w-[80ch]">
+                  <p className="ds-kicker mt-sp-5">Tecnologias</p>
+                  <ul
+                    className="ds-tags !mt-sp-3 !pt-0"
+                    aria-label="Tecnologias do projeto"
+                  >
+                    {caseStudy.stack.map((item) => (
+                      <li key={item} className="ds-tag !whitespace-normal">
+                        {item}
+                      </li>
+                    ))}
+                  </ul>
+                  <p className="ds-kicker mt-sp-6">Decisões técnicas</p>
+                  <ul className="ds-list !mt-sp-3 space-y-sp-2">
+                    {caseStudy.decisions.map((decision) => (
+                      <li key={decision}>{decision}</li>
+                    ))}
+                  </ul>
+                </div>
+              </details>
+            </div>
+          </div>
+        </section>
+
+        <CaseMediaSection caseStudy={caseStudy} />
+
+        <CaseCapabilitiesSection caseStudy={caseStudy} isClient={isClient} />
+
+        <CaseResultSection result={caseStudy.result} />
+
+        <CaseContactSection caseStudy={caseStudy} isClient={isClient} />
+      </article>
+    </main>
+  );
+}

app/cases/_components/CaseCapabilitiesSection.paths.test.tsx

@@ -0,0 +1,69 @@
+import { render, screen } from "@testing-library/react";
+import { setNavigation } from "@/__mocks__/next/navigation";
+import { CaseCapabilitiesSection } from "./CaseCapabilitiesSection";
+
+/**
+ * Testes de caminhos-base de CaseCapabilitiesSection: com itens (a lista sob o título do cliente ou do laboratório, sem
+ * botão de contato: o fecho do case vem logo depois e é o único convite, para não haver dois "Chamar no WhatsApp"
+ * seguidos) e sem itens (a seção não aparece, tenha o case site no ar ou captura ou não).
+ */
+
+beforeEach(() => {
+  setNavigation({ pathname: "/cases" });
+});
+
+const capabilities = [
+  "O dono muda os preços sem pedir a ninguém.",
+  "O cliente pede pelo WhatsApp com a mensagem pronta.",
+];
+
+describe("CaseCapabilitiesSection", () => {
+  it("path: items -> the list under the client title, with no contact button of its own", () => {
+    const { container } = render(
+      <CaseCapabilitiesSection caseStudy={{ capabilities }} isClient />,
+    );
+
+    expect(
+      screen.getByRole("heading", {
+        level: 2,
+        name: "O que o cliente passou a poder fazer",
+      }),
+    ).toBeVisible();
+    for (const item of capabilities) {
+      expect(screen.getByText(item)).toBeVisible();
+    }
+    // o botão "Chamar no WhatsApp" é do fecho do case (CaseContactSection), não desta seção
+    expect(screen.queryByRole("link")).toBeNull();
+    expect(container.querySelectorAll("a")).toHaveLength(0);
+  });
+
+  it("path: a laboratory case with items -> the title does not talk about a client", () => {
+    render(
+      <CaseCapabilitiesSection caseStudy={{ capabilities }} isClient={false} />,
+    );
+
+    expect(
+      screen.getByRole("heading", {
+        level: 2,
+        name: "O que dá para fazer com ele",
+      }),
+    ).toBeVisible();
+    expect(screen.queryByText(/o cliente passou a poder fazer/i)).toBeNull();
+  });
+
+  it("path: no items -> renders nothing, with no button on its own even when the case has a capture or a site", () => {
+    const { container } = render(
+      <CaseCapabilitiesSection caseStudy={{}} isClient />,
+    );
+
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it("path: an empty list of items -> renders nothing", () => {
+    const { container } = render(
+      <CaseCapabilitiesSection caseStudy={{ capabilities: [] }} isClient />,
+    );
+
+    expect(container).toBeEmptyDOMElement();
+  });
+});

app/cases/_components/CaseCapabilitiesSection.tsx

@@ -0,0 +1,34 @@
+import type { CaseStudyContent } from "@/lib/site-content";
+
+/**
+ * Logo depois de "Como ficou": o que o cliente passou a poder fazer (2 ou 3 itens, sem número, só com o que as entregas já sustentam).
+ * Sem botão de contato: o fecho do case (CaseContactSection) vem logo depois e é o único convite ao WhatsApp, para não haver dois
+ * "Chamar no WhatsApp" seguidos. Sem itens, a seção não aparece.
+ */
+export function CaseCapabilitiesSection({
+  caseStudy,
+  isClient,
+}: {
+  caseStudy: Pick<CaseStudyContent, "capabilities">;
+  isClient: boolean;
+}) {
+  const capabilities = caseStudy.capabilities ?? [];
+  if (capabilities.length === 0) return null;
+
+  return (
+    <section className="ds-section" aria-labelledby="case-capabilities">
+      <div className="ds-section-shell">
+        <h2 id="case-capabilities" className="ds-card-title !mt-0">
+          {isClient
+            ? "O que o cliente passou a poder fazer"
+            : "O que dá para fazer com ele"}
+        </h2>
+        <ul className="ds-list max-w-[78ch] space-y-sp-3 pl-[1.15rem]">
+          {capabilities.map((item) => (
+            <li key={item}>{item}</li>
+          ))}
+        </ul>
+      </div>
+    </section>
+  );
+}

app/cases/_components/CaseContactSection.paths.test.tsx

@@ -0,0 +1,69 @@
+import { render, screen } from "@testing-library/react";
+import { getRelatedServices } from "@/lib/site-content";
+import { similarProjectSubject } from "@/lib/whatsapp";
+import { CaseContactSection } from "./CaseContactSection";
+
+/**
+ * Testes de caminhos-base de CaseContactSection: o convite de um case de cliente ("projeto parecido") e o de
+ * um projeto de laboratório ("problema parecido" no botão), o link para a lista de cases e os serviços ligados.
+ * A mensagem do WhatsApp é a mesma frase nos dois: "um projeto parecido com o {título}".
+ */
+
+const sev = { id: "sev-modaintima", title: "SEV Moda Íntima" };
+const nutri = { id: "nutriscan", title: "NutriScan" };
+
+function messageOf(link: HTMLElement) {
+  return new URL(link.getAttribute("href") ?? "").searchParams.get("text");
+}
+
+describe("CaseContactSection", () => {
+  it("path: client case -> 'projeto parecido' invitation, WhatsApp with the case title, services listed", () => {
+    render(<CaseContactSection caseStudy={sev} isClient />);
+
+    expect(
+      screen.getByRole("heading", {
+        level: 2,
+        name: "Quer um projeto parecido com este?",
+      }),
+    ).toBeVisible();
+    const cta = screen.getByRole("link", { name: "Chamar no WhatsApp" });
+    expect(cta).toHaveAttribute("target", "_blank");
+    // sem escrever a frase à mão: ela vem de `similarProjectSubject`, que a frente de contato pode reescrever
+    expect(messageOf(cta)).toContain(
+      `Quero conversar sobre ${similarProjectSubject(sev.title)}.`,
+    );
+    expect(getRelatedServices(sev.id).length).toBeGreaterThan(0);
+    expect(
+      screen.getAllByRole("link", { name: /^Ver o serviço:/ }).length,
+    ).toBeGreaterThan(0);
+    expect(
+      screen.getByRole("link", { name: "Ver outros cases" }),
+    ).toHaveAttribute("href", "/cases");
+  });
+
+  it("path: laboratory case -> 'problema parecido' invitation and no mention of a similar project", () => {
+    render(<CaseContactSection caseStudy={nutri} isClient={false} />);
+
+    expect(
+      screen.getByRole("heading", { level: 2, name: "Fale sobre o seu caso" }),
+    ).toBeVisible();
+    // o rótulo do botão é o mesmo do case de cliente: uma lista só
+    const cta = screen.getByRole("link", { name: "Chamar no WhatsApp" });
+    // a mensagem usa a mesma frase do cabeçalho (`similarProjectSubject`), sem "da" nem "do projeto" na frente do nome
+    expect(messageOf(cta)).toContain(
+      `Quero conversar sobre ${similarProjectSubject(nutri.title)}.`,
+    );
+    expect(messageOf(cta)).not.toMatch(/problema parecido|com o da |com o do /);
+    expect(
+      screen.queryByRole("link", {
+        name: /Tem um problema parecido|Conversar sobre um projeto parecido/,
+      }),
+    ).toBeNull();
+    // o NutriScan não é citado por nenhum serviço: sem cartões, o convite continua
+    expect(getRelatedServices(nutri.id)).toHaveLength(0);
+    expect(screen.queryByRole("link", { name: /^Ver o serviço:/ })).toBeNull();
+    expect(
+      screen.getByRole("link", { name: "Ver outros cases" }),
+    ).toBeVisible();
+  });
+});

app/cases/_components/CaseContactSection.tsx

@@ -0,0 +1,60 @@
+import {
+  primaryButton,
+  secondaryButtonDark,
+} from "@/app/components/button-styles";
+import HoverPrefetchLink from "@/app/components/HoverPrefetchLink";
+import WhatsAppLink from "@/app/components/WhatsAppLink";
+import { buttonLabels, type CaseStudyContent } from "@/lib/site-content";
+import { similarProjectSubject } from "@/lib/whatsapp";
+import { CaseRelatedServices } from "./CaseRelatedServices";
+
+/**
+ * Títulos do convite ao contato: o case de cliente fala de um projeto parecido; o de laboratório, do caso de quem lê.
+ * O botão abre o WhatsApp e tem o mesmo rótulo nos dois (`buttonLabels.whatsapp`), e o assunto da conversa também:
+ * `similarProjectSubject`.
+ */
+const contactCopy = {
+  client: { title: "Quer um projeto parecido com este?" },
+  lab: { title: "Fale sobre o seu caso" },
+} as const;
+
+/** Fecho do case: convite ao WhatsApp, volta para a lista de cases e os serviços ligados ao projeto. */
+export function CaseContactSection({
+  caseStudy,
+  isClient,
+}: {
+  caseStudy: Pick<CaseStudyContent, "id" | "title">;
+  isClient: boolean;
+}) {
+  const copy = contactCopy[isClient ? "client" : "lab"];
+
+  return (
+    <section
+      className="ds-section ds-section-dark"
+      aria-labelledby="case-contact"
+    >
+      <div className="ds-section-shell">
+        <h2 id="case-contact" className="ds-card-title !mt-0 text-white">
+          {copy.title}
+        </h2>
+        <p className="ds-copy max-w-[60ch]">
+          Conte o que você precisa. A conversa começa pelo WhatsApp, sem
+          formulário.
+        </p>
+        <div className="mt-sp-6 flex flex-wrap items-center gap-sp-3">
+          <WhatsAppLink
+            service={similarProjectSubject(caseStudy.title)}
+            placement="case_detail"
+            className={primaryButton}
+          >
+            {buttonLabels.whatsapp}
+          </WhatsAppLink>
+          <HoverPrefetchLink href="/cases" className={secondaryButtonDark}>
+            Ver outros cases
+          </HoverPrefetchLink>
+        </div>
+        <CaseRelatedServices caseId={caseStudy.id} />
+      </div>
+    </section>
+  );
+}

app/cases/_components/CaseCover.paths.test.tsx

@@ -0,0 +1,99 @@
+import { render, screen } from "@testing-library/react";
+import { getShowcaseAssets } from "@/lib/project-showcase";
+import { caseStudies } from "@/lib/site-content";
+import { CaseCover, coverSizes } from "./CaseCover";
+import { getCaseMedia } from "./case-media";
+import { coverTransitionProps } from "./cover-transition";
+
+/**
+ * Testes de caminhos-base de CaseCover: sem captura (nada), com captura (moldura + pôster),
+ * os valores padrão de `sizes` e `priority` (prioridade = carga imediata e `fetchpriority="high"`)
+ * e o pôster como elemento compartilhado da troca de página.
+ */
+
+jest.mock("./case-media", () => ({ getCaseMedia: jest.fn() }));
+
+// o dublê do <ViewTransition> põe as props num <div> para o teste ler
+jest.mock("react", () =>
+  jest.requireActual("@/__mocks__/view-transition-probe").reactWithProbe(),
+);
+
+const mockedGetCaseMedia = jest.mocked(getCaseMedia);
+const props = {
+  id: "sev-modaintima",
+  title: "SEV Moda Íntima",
+  demoUrl: "https://sevmodaintima.com.br",
+};
+
+afterEach(() => {
+  mockedGetCaseMedia.mockReset();
+});
+
+describe("CaseCover", () => {
+  it("path: capture found -> the poster is the shared element of the page change (case-<id>, only the pair animates)", () => {
+    mockedGetCaseMedia.mockImplementation(getShowcaseAssets);
+    render(<CaseCover {...props} />);
+
+    const image = screen.getByAltText(`Captura de tela do site ${props.title}`);
+    const transition = image.parentElement;
+    expect(transition).toHaveAttribute("data-vt-name", `case-${props.id}`);
+    expect(transition).toHaveAttribute("data-vt-share", "case-cover");
+    expect(transition).toHaveAttribute("data-vt-default", "none");
+  });
+
+  it("coverTransitionProps: every case gets its own name, valid as a CSS identifier", () => {
+    const names = caseStudies.map(({ id }) => coverTransitionProps(id).name);
+    for (const name of names) expect(name).toMatch(/^[a-z][a-z0-9-]*$/);
+    expect(new Set(names).size).toBe(names.length);
+  });
+
+  it("path: no desktop capture -> renders nothing", () => {
+    mockedGetCaseMedia.mockReturnValue(undefined);
+    const { container } = render(<CaseCover {...props} />);
+
+    expect(container).toBeEmptyDOMElement();
+    expect(mockedGetCaseMedia).toHaveBeenCalledWith(props.id, "desktop");
+  });
+
+  it("path: capture found -> poster inside the browser frame, with the real domain in the bar", () => {
+    mockedGetCaseMedia.mockImplementation(getShowcaseAssets);
+    const { container } = render(<CaseCover {...props} />);
+
+    const image = screen.getByAltText(`Captura de tela do site ${props.title}`);
+    expect(container.querySelector(".ds-bframe")).toContainElement(image);
+    expect(image.getAttribute("src")).toContain(
+      encodeURIComponent(`/videos/${props.id}/desktop.webp`),
+    );
+    expect(container.querySelector(".ds-bframe-url")).toHaveTextContent(
+      "sevmodaintima.com.br",
+    );
+  });
+
+  it("path: sizes and priority omitted -> default sizes and lazy loading", () => {
+    mockedGetCaseMedia.mockImplementation(getShowcaseAssets);
+    render(<CaseCover {...props} />);
+
+    const image = screen.getByAltText(`Captura de tela do site ${props.title}`);
+    expect(image).toHaveAttribute("sizes", coverSizes.card);
+    expect(image).toHaveAttribute("loading", "lazy");
+    expect(image).not.toHaveAttribute("fetchpriority");
+  });
+
+  it("path: sizes and priority given -> uses them, with eager loading and high fetch priority", () => {
+    mockedGetCaseMedia.mockImplementation(getShowcaseAssets);
+    render(<CaseCover {...props} sizes="320px" priority />);
+
+    const image = screen.getByAltText(`Captura de tela do site ${props.title}`);
+    expect(image).toHaveAttribute("sizes", "320px");
+    expect(image).toHaveAttribute("loading", "eager");
+    expect(image).toHaveAttribute("fetchpriority", "high");
+  });
+
+  it("path: no 100vw sizes -> every preset describes the width the cover really has", () => {
+    // 100vw baixava a imagem de 750 px para uma capa de 300 px no celular
+    for (const sizes of Object.values(coverSizes)) {
+      expect(sizes).not.toMatch(/(^|, )100vw$/);
+      expect(sizes).toMatch(/calc\(100vw - \d+px\)$/);
+    }
+  });
+});

app/cases/_components/CaseCover.tsx

@@ -0,0 +1,72 @@
+import Image from "next/image";
+import { ViewTransition } from "react";
+import {
+  BrowserFrame,
+  displayUrl,
+} from "@/app/components/showcase/BrowserFrame";
+import { getCaseMedia } from "./case-media";
+import { coverTransitionProps } from "./cover-transition";
+
+/**
+ * Largura real da capa em cada lugar da página, para o navegador baixar a imagem do tamanho certo
+ * (com 100vw, um celular de 390 px pedia a versão de 750 px para uma capa de 300 px). As contas seguem o
+ * padding das seções (20 px até 768 px; depois 6vw, no máximo 64 px), a coluna central de 1240 px e os cartões
+ * (borda e 20 a 28 px de padding).
+ */
+export const coverSizes = {
+  /** Topo do case e do serviço: coluna da direita a partir de 1024 px, e a largura da página abaixo disso. */
+  hero: "(min-width: 1440px) 560px, (min-width: 1024px) 40vw, (min-width: 769px) 88vw, calc(100vw - 40px)",
+  /** Capa dentro de um cartão (`ds-card`) da grade de duas colunas, que vira uma só até 1024 px. */
+  card: "(min-width: 1440px) 560px, (min-width: 1025px) calc(50vw - 134px), (min-width: 769px) calc(88vw - 56px), calc(100vw - 88px)",
+  /** Capa solta numa grade de duas colunas, sem cartão em volta (a partir de 768 px). */
+  column:
+    "(min-width: 1440px) 604px, (min-width: 1068px) calc(50vw - 80px), (min-width: 768px) calc(44vw - 16px), calc(100vw - 40px)",
+} as const;
+
+/**
+ * Props da imagem que abre a página (a maior acima da dobra): carrega na hora e com prioridade de rede alta.
+ * No Next 16 a prop `priority` do `Image` só gera o `<link rel="preload">`; a prioridade de rede vem do `fetchPriority`.
+ */
+export const priorityImageProps = {
+  loading: "eager",
+  fetchPriority: "high",
+} as const;
+
+/**
+ * Capa do case: o pôster do site dentro de uma moldura de navegador. Sem captura gravada, não mostra nada.
+ * `priority` é para a imagem que abre a página: aplica `priorityImageProps`.
+ */
+export function CaseCover({
+  id,
+  title,
+  demoUrl,
+  sizes = coverSizes.card,
+  priority = false,
+}: {
+  id: string;
+  title: string;
+  demoUrl?: string | null;
+  sizes?: string;
+  priority?: boolean;
+}) {
+  const media = getCaseMedia(id, "desktop");
+  if (!media) return null;
+  const priorityProps = priority ? priorityImageProps : {};
+
+  return (
+    <BrowserFrame url={displayUrl({ demoUrl, title })}>
+      <div className="relative aspect-[16/10] bg-[#0a0a0a]">
+        <ViewTransition {...coverTransitionProps(id)}>
+          <Image
+            src={media.poster}
+            alt={`Captura de tela do site ${title}`}
+            fill
+            sizes={sizes}
+            {...priorityProps}
+            className="object-cover object-top"
+          />
+        </ViewTransition>
+      </div>
+    </BrowserFrame>
+  );
+}

app/cases/_components/CaseCoverLink.paths.test.tsx

@@ -0,0 +1,106 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { getShowcaseAssets } from "@/lib/project-showcase";
+import { coverSizes } from "./CaseCover";
+import { CaseCoverLink } from "./CaseCoverLink";
+import { getCaseMedia } from "./case-media";
+
+/**
+ * Testes de caminhos-base de CaseCoverLink: sem captura (nada), com captura (link fora da leitura e do teclado,
+ * com a capa dentro), os valores padrão de `sizes` e `priority`, o pré-carregamento só ao chegar no link
+ * e os valores dados.
+ */
+
+jest.mock("./case-media", () => ({ getCaseMedia: jest.fn() }));
+jest.mock("next/link", () => ({
+  __esModule: true,
+  default: ({
+    children,
+    prefetch,
+    ...props
+  }: { children?: React.ReactNode; prefetch?: boolean | null } & Record<
+    string,
+    unknown
+  >) => (
+    <a data-prefetch={String(prefetch)} {...props}>
+      {children}
+    </a>
+  ),
+}));
+
+const mockedGetCaseMedia = jest.mocked(getCaseMedia);
+const props = {
+  id: "sev-modaintima",
+  title: "SEV Moda Íntima",
+  demoUrl: "https://sevmodaintima.com.br",
+};
+
+afterEach(() => {
+  mockedGetCaseMedia.mockReset();
+});
+
+describe("CaseCoverLink", () => {
+  it("path: no desktop capture -> renders nothing, not even the link", () => {
+    mockedGetCaseMedia.mockReturnValue(undefined);
+    const { container } = render(<CaseCoverLink {...props} />);
+
+    expect(container).toBeEmptyDOMElement();
+    expect(mockedGetCaseMedia).toHaveBeenCalledWith(props.id, "desktop");
+  });
+
+  it("path: capture found -> a link to the case, out of reading order and tab order, around the cover", () => {
+    mockedGetCaseMedia.mockImplementation(getShowcaseAssets);
+    const { container } = render(<CaseCoverLink {...props} />);
+
+    const link = container.querySelector("a");
+    expect(link).toHaveAttribute("href", `/cases/${props.id}`);
+    expect(link).toHaveAttribute("aria-hidden", "true");
+    expect(link).toHaveAttribute("tabindex", "-1");
+    expect(link?.querySelector(".ds-bframe-url")).toHaveTextContent(
+      "sevmodaintima.com.br",
+    );
+    expect(
+      screen.getByAltText(`Captura de tela do site ${props.title}`),
+    ).toBeInTheDocument();
+  });
+
+  it("path: sizes and priority omitted -> default sizes and lazy image", () => {
+    mockedGetCaseMedia.mockImplementation(getShowcaseAssets);
+    render(<CaseCoverLink {...props} />);
+
+    const image = screen.getByAltText(`Captura de tela do site ${props.title}`);
+    expect(image).toHaveAttribute("sizes", coverSizes.card);
+    expect(image).toHaveAttribute("loading", "lazy");
+    expect(image).not.toHaveAttribute("fetchpriority");
+  });
+
+  it("path: link -> pre-fetches the case only when the pointer or focus reaches it", () => {
+    mockedGetCaseMedia.mockImplementation(getShowcaseAssets);
+    const { container } = render(<CaseCoverLink {...props} />);
+
+    const link = container.querySelector("a");
+    expect(link).toHaveAttribute("data-prefetch", "false");
+    fireEvent.mouseEnter(link as HTMLAnchorElement);
+    expect(link).toHaveAttribute("data-prefetch", "null");
+  });
+
+  it("path: sizes and priority given -> both are used", () => {
+    mockedGetCaseMedia.mockImplementation(getShowcaseAssets);
+    render(<CaseCoverLink {...props} sizes="320px" priority />);
+
+    const image = screen.getByAltText(`Captura de tela do site ${props.title}`);
+    expect(image).toHaveAttribute("sizes", "320px");
+    expect(image).toHaveAttribute("loading", "eager");
+    expect(image).toHaveAttribute("fetchpriority", "high");
+  });
+
+  it("path: no demo address -> the browser bar falls back to the project title", () => {
+    mockedGetCaseMedia.mockImplementation(getShowcaseAssets);
+    const { container } = render(
+      <CaseCoverLink id={props.id} title={props.title} demoUrl={null} />,
+    );
+
+    expect(container.querySelector(".ds-bframe-url")).toHaveTextContent(
+      props.title,
+    );
+  });
+});

app/cases/_components/CaseCoverLink.tsx

@@ -0,0 +1,41 @@
+import HoverPrefetchLink from "@/app/components/HoverPrefetchLink";
+import { CaseCover, coverSizes } from "./CaseCover";
+import { getCaseMedia } from "./case-media";
+
+/**
+ * Capa do case dentro de um cartão: a imagem leva ao case, mas fica fora da leitura e da ordem de tabulação,
+ * porque o link de texto do mesmo cartão já leva ao mesmo lugar. Sem captura gravada, não mostra nada.
+ * A rota do case só é pré-carregada quando a pessoa chega no link (HoverPrefetchLink).
+ */
+export function CaseCoverLink({
+  id,
+  title,
+  demoUrl,
+  sizes = coverSizes.card,
+  priority = false,
+}: {
+  id: string;
+  title: string;
+  demoUrl?: string | null;
+  sizes?: string;
+  priority?: boolean;
+}) {
+  if (!getCaseMedia(id, "desktop")) return null;
+
+  return (
+    <HoverPrefetchLink
+      href={`/cases/${id}`}
+      aria-hidden="true"
+      tabIndex={-1}
+      className="mb-sp-5 block"
+    >
+      <CaseCover
+        id={id}
+        title={title}
+        demoUrl={demoUrl}
+        sizes={sizes}
+        priority={priority}
+      />
+    </HoverPrefetchLink>
+  );
+}

app/cases/_components/CaseHero.paths.test.tsx

@@ -0,0 +1,152 @@
+import { render, screen } from "@testing-library/react";
+import { getShowcaseAssets } from "@/lib/project-showcase";
+import { caseStudies } from "@/lib/site-content";
+import { CaseHero } from "./CaseHero";
+import { getCaseMedia } from "./case-media";
+import { compactHero } from "./hero-styles";
+
+/**
+ * Testes de caminhos-base de CaseHero e dos fatos do projeto: com e sem captura gravada, case de cliente e de
+ * laboratório, e a lista de fatos ausente, vazia ou preenchida. A existência da captura é simulada em getCaseMedia.
+ */
+
+jest.mock("./case-media", () => ({ getCaseMedia: jest.fn() }));
+
+const mockedGetCaseMedia = jest.mocked(getCaseMedia);
+
+function getCase(id: string) {
+  const caseStudy = caseStudies.find((item) => item.id === id);
+  if (!caseStudy) throw new Error(`Missing case ${id}`);
+  return caseStudy;
+}
+
+const client = getCase("sev-modaintima");
+const lab = getCase("twins-lab");
+
+function withCapture(has: boolean) {
+  mockedGetCaseMedia.mockImplementation((id, device) =>
+    has ? getShowcaseAssets(id, device) : undefined,
+  );
+}
+
+afterEach(() => {
+  mockedGetCaseMedia.mockReset();
+});
+
+describe("CaseHero: captura gravada e tipo de case", () => {
+  it("path: client case with a capture -> two columns, the cover on the right, the client eyebrow", () => {
+    withCapture(true);
+    const { container } = render(<CaseHero caseStudy={client} isClient />);
+
+    expect(container.querySelector(".ds-section-shell")).toHaveClass("grid");
+    expect(container.querySelector(".ds-bframe")).toBeInTheDocument();
+    expect(screen.getByText(/Case de cliente/)).toBeVisible();
+    expect(
+      screen.getByRole("heading", { level: 1, name: client.headline }),
+    ).toBeVisible();
+  });
+
+  it("path: client case without a capture -> one column and no cover", () => {
+    withCapture(false);
+    const { container } = render(<CaseHero caseStudy={client} isClient />);
+
+    expect(container.querySelector(".ds-section-shell")).not.toHaveClass(
+      "grid",
+    );
+    expect(container.querySelector(".ds-bframe")).toBeNull();
+    expect(screen.getByText(client.summary)).toBeVisible();
+  });
+
+  it("path: laboratory case with a capture -> the cover shows, with the laboratory eyebrow", () => {
+    withCapture(true);
+    const { container } = render(<CaseHero caseStudy={lab} isClient={false} />);
+
+    expect(container.querySelector(".ds-bframe")).toBeInTheDocument();
+    expect(screen.getByText(/Projeto de laboratório/)).toBeVisible();
+    expect(screen.queryByText(/Case de cliente/)).toBeNull();
+  });
+
+  it("path: laboratory case without a capture -> one column, laboratory eyebrow, title and summary", () => {
+    withCapture(false);
+    const { container } = render(<CaseHero caseStudy={lab} isClient={false} />);
+
+    expect(container.querySelector(".ds-section-shell")).not.toHaveClass(
+      "grid",
+    );
+    expect(container.querySelector(".ds-bframe")).toBeNull();
+    expect(screen.getByText(/Projeto de laboratório/)).toBeVisible();
+    expect(screen.getByText(lab.summary)).toBeVisible();
+  });
+
+  it("path: with a capture -> the top strip keeps the default height", () => {
+    withCapture(true);
+    const { container } = render(<CaseHero caseStudy={client} isClient />);
+
+    expect(container.querySelector("section")).not.toHaveClass(compactHero);
+  });
+
+  it("path: without a capture -> the top strip is the lower one-column strip, for client and laboratory cases", () => {
+    withCapture(false);
+    for (const [caseStudy, isClient] of [
+      [client, true],
+      [lab, false],
+    ] as const) {
+      const { container, unmount } = render(
+        <CaseHero caseStudy={caseStudy} isClient={isClient} />,
+      );
+      expect(container.querySelector("section")).toHaveClass(compactHero);
+      unmount();
+    }
+  });
+
+  it("path: breadcrumb -> Início, Cases and the case itself as the current page", () => {
+    withCapture(false);
+    render(<CaseHero caseStudy={client} isClient />);
+
+    const links = screen.getAllByRole("link");
+    expect(links.map((link) => link.getAttribute("href"))).toEqual([
+      "/",
+      "/cases",
+      `/cases/${client.id}`,
+    ]);
+    expect(links[2]).toHaveAttribute("aria-current", "page");
+  });
+});
+
+describe("CaseHero: fatos do projeto", () => {
+  const withFacts = (facts: string[] | undefined) => ({
+    ...client,
+    facts,
+  });
+
+  it("path: no facts field -> no list", () => {
+    withCapture(false);
+    render(<CaseHero caseStudy={withFacts(undefined)} isClient />);
+
+    expect(screen.queryByRole("list", { name: "Fatos do projeto" })).toBeNull();
+  });
+
+  it("path: empty facts list -> no list", () => {
+    withCapture(false);
+    render(<CaseHero caseStudy={withFacts([])} isClient />);
+
+    expect(screen.queryByRole("list", { name: "Fatos do projeto" })).toBeNull();
+  });
+
+  it("path: filled facts -> one item each, after the summary", () => {
+    withCapture(false);
+    render(
+      <CaseHero
+        caseStudy={withFacts(["No ar desde 2025", "Dois painéis"])}
+        isClient
+      />,
+    );
+
+    const list = screen.getByRole("list", { name: "Fatos do projeto" });
+    expect(list.querySelectorAll("li")).toHaveLength(2);
+    expect(
+      screen.getByText(client.summary).compareDocumentPosition(list) &
+        Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy();
+  });
+});

app/cases/_components/CaseHero.tsx

@@ -0,0 +1,91 @@
+import { Breadcrumb } from "@/app/components/Breadcrumb";
+import { pageTop } from "@/app/components/button-styles";
+import type { CaseStudyContent } from "@/lib/site-content";
+import { CaseCover, coverSizes } from "./CaseCover";
+import { getCaseMedia } from "./case-media";
+import { compactHero } from "./hero-styles";
+
+/** Fatos verificáveis do projeto. Sem nenhum, a lista não aparece. */
+function CaseFacts({ facts }: { facts?: string[] }) {
+  if (!facts?.length) return null;
+
+  return (
+    <ul
+      className="mt-sp-5 flex flex-wrap gap-x-sp-6 gap-y-sp-2 text-[15px] leading-6 text-white/80"
+      aria-label="Fatos do projeto"
+    >
+      {facts.map((fact) => (
+        <li key={fact}>{fact}</li>
+      ))}
+    </ul>
+  );
+}
+
+/** Pôster do site na coluna da direita (no celular, logo abaixo do título). */
+function CaseHeroCover({ caseStudy }: { caseStudy: CaseStudyContent }) {
+  return (
+    <div className="min-w-0 lg:col-start-2 lg:row-span-2 lg:row-start-1">
+      <CaseCover
+        id={caseStudy.id}
+        title={caseStudy.title}
+        demoUrl={caseStudy.demoUrl}
+        sizes={coverSizes.hero}
+        priority
+      />
+    </div>
+  );
+}
+
+/**
+ * Topo do case: trilha, título, resumo e fatos. Com captura gravada, o texto fica à esquerda e o pôster à direita;
+ * no celular a mídia vem logo abaixo do título. Sem captura, o topo é uma coluna só e mais baixo.
+ */
+export function CaseHero({
+  caseStudy,
+  isClient,
+}: {
+  caseStudy: CaseStudyContent;
+  isClient: boolean;
+}) {
+  const hasMedia = Boolean(getCaseMedia(caseStudy.id, "desktop"));
+
+  return (
+    <section
+      className={`ds-section ds-section-dark ${pageTop} ${
+        hasMedia ? "" : compactHero
+      }`}
+    >
+      <div
+        className={`ds-section-shell ${
+          hasMedia
+            ? "grid items-center gap-y-sp-6 lg:grid-cols-[minmax(0,1.1fr)_minmax(0,1fr)] lg:gap-x-sp-16 lg:gap-y-0"
+            : ""
+        }`}
+      >
+        <div className="max-w-[860px] lg:col-start-1 lg:row-start-1 lg:self-end">
+          <Breadcrumb
+            items={[
+              { label: "Início", href: "/" },
+              { label: "Cases", href: "/cases" },
+              { label: caseStudy.title, href: `/cases/${caseStudy.id}` },
+            ]}
+          />
+          {/* o tipo do projeto, sem o nome: a trilha logo acima já o diz */}
+          <p className="ds-eyebrow">
+            {isClient ? "Case de cliente" : "Projeto de laboratório"}
+          </p>
+          <h1 className="ds-section-title text-balance text-white">
+            {caseStudy.headline}
+          </h1>
+        </div>
+        {hasMedia ? <CaseHeroCover caseStudy={caseStudy} /> : null}
+        <div className="max-w-[68ch] lg:col-start-1 lg:row-start-2 lg:self-start">
+          <p className="ds-copy !text-[rgba(255,255,255,.78)]">
+            {caseStudy.summary}
+          </p>
+          <CaseFacts facts={caseStudy.facts} />
+        </div>
+      </div>
+    </section>
+  );
+}

app/cases/_components/CaseMedia.paths.test.tsx

@@ -0,0 +1,133 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { getShowcaseAssets } from "@/lib/project-showcase";
+import { CaseMedia } from "./CaseMedia";
+import { getCaseMedia } from "./case-media";
+
+/**
+ * Testes de caminhos-base de CaseMedia: com computador e celular, só um dos dois, ou nenhum.
+ * Cada quadro mostra o pôster com um botão de play; o vídeo só aparece depois do clique.
+ * A existência dos arquivos em disco é simulada em getCaseMedia, para o teste não depender de public/.
+ */
+
+jest.mock("./case-media", () => ({ getCaseMedia: jest.fn() }));
+
+const mockedGetCaseMedia = jest.mocked(getCaseMedia);
+
+function withCaptures(devices: ReadonlyArray<"desktop" | "mobile">) {
+  mockedGetCaseMedia.mockImplementation((id, device) =>
+    devices.includes(device) ? getShowcaseAssets(id, device) : undefined,
+  );
+}
+
+const props = {
+  id: "sev-modaintima",
+  title: "SEV Moda Íntima",
+  demoUrl: "https://sevmodaintima.com.br",
+};
+const desktopPlay = `Reproduzir o vídeo do site ${props.title} no computador`;
+const mobilePlay = `Reproduzir o vídeo do site ${props.title} no celular`;
+const desktopVideo = `Vídeo do site ${props.title} no computador`;
+const mobileVideo = `Vídeo do site ${props.title} no celular`;
+
+afterEach(() => {
+  mockedGetCaseMedia.mockReset();
+});
+
+describe("CaseMedia", () => {
+  it("path: desktop and mobile captures -> both frames, the browser bar shows the real domain", () => {
+    withCaptures(["desktop", "mobile"]);
+    const { container } = render(<CaseMedia {...props} />);
+
+    expect(container.querySelector(".ds-bframe")).toContainElement(
+      screen.getByRole("button", { name: desktopPlay }),
+    );
+    expect(container.querySelector(".ds-phone")).toContainElement(
+      screen.getByRole("button", { name: mobilePlay }),
+    );
+    expect(container.querySelector(".ds-bframe-url")).toHaveTextContent(
+      "sevmodaintima.com.br",
+    );
+    expect(
+      screen.getByText(`O site ${props.title} no computador.`),
+    ).toBeVisible();
+    expect(screen.getByText("No celular.")).toBeVisible();
+    expect(mockedGetCaseMedia).toHaveBeenCalledWith(props.id, "desktop");
+    expect(mockedGetCaseMedia).toHaveBeenCalledWith(props.id, "mobile");
+  });
+
+  it("path: no capture at all -> renders nothing", () => {
+    withCaptures([]);
+    const { container } = render(<CaseMedia {...props} />);
+
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it("path: only the mobile capture -> phone frame without the browser frame", () => {
+    withCaptures(["mobile"]);
+    const { container } = render(<CaseMedia {...props} />);
+
+    expect(
+      screen.getByRole("button", { name: mobilePlay }),
+    ).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: desktopPlay })).toBeNull();
+    expect(container.querySelector(".ds-bframe")).toBeNull();
+    expect(container.querySelector(".ds-phone")).not.toBeNull();
+    expect(screen.queryByText(/no computador\./)).toBeNull();
+  });
+
+  it("path: only the desktop capture -> browser frame without the phone frame", () => {
+    withCaptures(["desktop"]);
+    const { container } = render(<CaseMedia {...props} />);
+
+    expect(
+      screen.getByRole("button", { name: desktopPlay }),
+    ).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: mobilePlay })).toBeNull();
+    expect(container.querySelector(".ds-phone")).toBeNull();
+    expect(container.querySelector(".ds-bframe")).not.toBeNull();
+    expect(screen.queryByText("No celular.")).toBeNull();
+  });
+
+  it("path: both captures -> no video until play, then only the pressed frame plays", () => {
+    withCaptures(["desktop", "mobile"]);
+    const { container } = render(<CaseMedia {...props} />);
+
+    expect(container.querySelector("video")).toBeNull();
+    // o pôster do computador vem com texto alternativo vazio: o botão já descreve o quadro
+    expect(container.querySelector(".ds-bframe img")).toHaveAttribute(
+      "alt",
+      "",
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: mobilePlay }));
+
+    const phone = screen.getByLabelText(mobileVideo);
+    expect(container.querySelector(".ds-phone")).toContainElement(phone);
+    expect(phone).toHaveAttribute("poster", `/videos/${props.id}/mobile.webp`);
+    expect(phone.querySelectorAll("source")).toHaveLength(2);
+    expect(screen.queryByLabelText(desktopVideo)).toBeNull();
+    expect(
+      screen.getByRole("button", { name: desktopPlay }),
+    ).toBeInTheDocument();
+    expect(container.querySelectorAll("video")).toHaveLength(1);
+
+    fireEvent.click(screen.getByRole("button", { name: desktopPlay }));
+    expect(screen.getByLabelText(desktopVideo)).toHaveAttribute(
+      "poster",
+      `/videos/${props.id}/desktop.webp`,
+    );
+    expect(container.querySelectorAll("video")).toHaveLength(2);
+    expect(screen.queryByRole("button")).toBeNull();
+  });
+
+  it("path: no demo address -> the browser bar falls back to the project title", () => {
+    withCaptures(["desktop"]);
+    const { container } = render(
+      <CaseMedia id={props.id} title={props.title} demoUrl={null} />,
+    );
+
+    expect(container.querySelector(".ds-bframe-url")).toHaveTextContent(
+      props.title,
+    );
+  });
+});

app/cases/_components/CaseMedia.tsx

@@ -0,0 +1,53 @@
+import {
+  BrowserFrame,
+  displayUrl,
+} from "@/app/components/showcase/BrowserFrame";
+import { PhoneFrame } from "@/app/components/showcase/PhoneFrame";
+import { CasePlayer } from "./CasePlayer";
+import { getCaseMedia } from "./case-media";
+
+/**
+ * Pôster e vídeo do projeto: o site no computador (moldura de navegador) e no celular (moldura de celular).
+ * Cada quadro mostra o pôster com um botão de play; o vídeo só baixa quando a pessoa aperta o botão.
+ * Sem captura gravada, não mostra nada.
+ */
+export function CaseMedia({
+  id,
+  title,
+  demoUrl,
+}: {
+  id: string;
+  title: string;
+  demoUrl?: string | null;
+}) {
+  const desktop = getCaseMedia(id, "desktop");
+  const mobile = getCaseMedia(id, "mobile");
+  if (!desktop && !mobile) return null;
+
+  return (
+    <div className="mt-sp-8 grid max-w-[1040px] items-end gap-sp-8 md:grid-cols-[minmax(0,1fr)_auto]">
+      {desktop ? (
+        <figure className="min-w-0">
+          <BrowserFrame url={displayUrl({ demoUrl, title })}>
+            <div className="relative aspect-[16/10] bg-[#0a0a0a]">
+              <CasePlayer assets={desktop} title={title} device="desktop" />
+            </div>
+          </BrowserFrame>
+          <figcaption className="mt-sp-3 font-[family-name:var(--font-body)] text-[15px] text-white/70">
+            O site {title} no computador.
+          </figcaption>
+        </figure>
+      ) : null}
+      {mobile ? (
+        <figure className="mx-auto w-[min(62vw,220px)] md:mx-0">
+          <PhoneFrame poster={mobile.poster}>
+            <CasePlayer assets={mobile} title={title} device="mobile" />
+          </PhoneFrame>
+          <figcaption className="mt-sp-3 text-center font-[family-name:var(--font-body)] text-[15px] text-white/70">
+            No celular.
+          </figcaption>
+        </figure>
+      ) : null}
+    </div>
+  );
+}

app/cases/_components/CaseMediaSection.tsx

@@ -0,0 +1,56 @@
+import { secondaryButtonDark } from "@/app/components/button-styles";
+import { buttonLabels, type CaseStudyContent } from "@/lib/site-content";
+import { CaseMedia } from "./CaseMedia";
+import { getCaseMedia } from "./case-media";
+
+/** O bloco "Como ficou" existe quando há site no ar ou captura gravada, no computador ou no celular. */
+export function hasCaseMedia({
+  id,
+  demoUrl,
+}: Pick<CaseStudyContent, "id" | "demoUrl">) {
+  return (
+    Boolean(demoUrl) ||
+    Boolean(getCaseMedia(id, "desktop")) ||
+    Boolean(getCaseMedia(id, "mobile"))
+  );
+}
+
+/** "Como ficou": pôster e vídeo do projeto e o botão para abrir o site. Sem site nem captura, não mostra nada. */
+export function CaseMediaSection({
+  caseStudy,
+}: {
+  caseStudy: Pick<CaseStudyContent, "id" | "title" | "demoUrl">;
+}) {
+  if (!hasCaseMedia(caseStudy)) return null;
+
+  return (
+    <section
+      className="ds-section ds-section-dark"
+      aria-labelledby="case-media"
+    >
+      <div className="ds-section-shell">
+        <h2 id="case-media" className="ds-card-title !mt-0 text-white">
+          Como ficou
+        </h2>
+        <CaseMedia
+          id={caseStudy.id}
+          title={caseStudy.title}
+          demoUrl={caseStudy.demoUrl}
+        />
+        {caseStudy.demoUrl ? (
+          <div className="mt-sp-8">
+            <a
+              className={secondaryButtonDark}
+              href={caseStudy.demoUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {buttonLabels.site}
+              <span className="sr-only"> {caseStudy.title}</span>
+            </a>
+          </div>
+        ) : null}
+      </div>
+    </section>
+  );
+}

app/cases/_components/CasePlayer.test.tsx

@@ -0,0 +1,94 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { getShowcaseAssets } from "@/lib/project-showcase";
+import { CasePlayer } from "./CasePlayer";
+
+const title = "SEV Moda Íntima";
+
+describe("CasePlayer", () => {
+  it("shows the poster and an accessible play button instead of a paused video", () => {
+    const { container } = render(
+      <div className="relative">
+        <CasePlayer
+          assets={getShowcaseAssets("sev-modaintima", "desktop")}
+          title={title}
+          device="desktop"
+        />
+      </div>,
+    );
+
+    expect(container.querySelector("video")).toBeNull();
+    // a imagem é decorativa: o botão já diz o que o quadro mostra
+    const poster = container.querySelector("img");
+    expect(poster).toHaveAttribute("alt", "");
+    expect(poster?.getAttribute("src")).toContain(
+      encodeURIComponent("/videos/sev-modaintima/desktop.webp"),
+    );
+    const button = screen.getByRole("button", {
+      name: `Reproduzir o vídeo do site ${title} no computador`,
+    });
+    expect(button).toHaveAttribute("type", "button");
+    // em repouso o play é escuro, com contorno branco; o limão só vem sob o ponteiro ou no foco, com o círculo maior
+    const circle = button.querySelector("[aria-hidden='true']");
+    const restClasses = (circle?.className ?? "")
+      .split(" ")
+      .filter((name) => !name.startsWith("group-"));
+    expect(restClasses.join(" ")).not.toContain("--slash");
+    expect(circle).toHaveClass(
+      "group-hover:scale-108",
+      "group-hover:bg-[var(--slash)]",
+      "group-focus-visible:scale-108",
+      "group-focus-visible:bg-[var(--slash)]",
+    );
+  });
+
+  it("mounts the video with its sources only after the click, muted and looping, with focus on it", () => {
+    const assets = getShowcaseAssets("lavacao-047", "desktop");
+    render(
+      <div className="relative">
+        <CasePlayer assets={assets} title="Lavação 047" device="desktop" />
+      </div>,
+    );
+
+    fireEvent.click(screen.getByRole("button"));
+
+    const video = screen.getByLabelText(
+      "Vídeo do site Lavação 047 no computador",
+    );
+    expect(video).toHaveFocus();
+    expect(video).toHaveAttribute("controls");
+    expect(video).toHaveAttribute("poster", assets.poster);
+    expect(video).toHaveAttribute("width", String(assets.width));
+    expect(video).toHaveAttribute("height", String(assets.height));
+    expect((video as HTMLVideoElement).muted).toBe(true);
+    expect((video as HTMLVideoElement).loop).toBe(true);
+    expect(
+      [...video.querySelectorAll("source")].map((source) => [
+        source.getAttribute("src"),
+        source.getAttribute("type"),
+      ]),
+    ).toEqual(assets.sources.map(({ src, type }) => [src, type]));
+    expect(screen.queryByRole("button")).toBeNull();
+  });
+
+  it("leaves the poster to the phone frame on mobile and names the device in the labels", () => {
+    const { container } = render(
+      <div className="relative">
+        <CasePlayer
+          assets={getShowcaseAssets("sc-plus", "mobile")}
+          title="SC Plus Aquicultura"
+          device="mobile"
+        />
+      </div>,
+    );
+
+    expect(container.querySelector("img")).toBeNull();
+    fireEvent.click(
+      screen.getByRole("button", {
+        name: "Reproduzir o vídeo do site SC Plus Aquicultura no celular",
+      }),
+    );
+    expect(
+      screen.getByLabelText("Vídeo do site SC Plus Aquicultura no celular"),
+    ).toHaveAttribute("poster", "/videos/sc-plus/mobile.webp");
+  });
+});

app/cases/_components/CasePlayer.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import { Play } from "lucide-react";
+import Image from "next/image";
+import { useEffect, useRef, useState } from "react";
+import type { Device, ShowcaseAssets } from "@/lib/project-showcase";
+
+const deviceLabel: Record<Device, string> = {
+  desktop: "no computador",
+  mobile: "no celular",
+};
+
+/**
+ * Pôster com um botão de play. O vídeo só é montado, e só baixa, quando a pessoa aperta o botão:
+ * antes disso a página mostra a imagem do site, não um vídeo parado em 0:00 com controles do navegador.
+ * Vai dentro de um quadro com `position: relative` (moldura de navegador ou de celular) que dá o tamanho.
+ * `sizes` segue a grade de CaseMedia: a coluna da esquerda de um bloco de até 1040 px (88 vw da página abaixo de 1182 px)
+ * com a moldura do celular ao lado (220 px mais 32 px de vão); abaixo de 768 px, a largura da página menos 40 px.
+ */
+export function CasePlayer({
+  assets,
+  title,
+  device,
+  sizes = "(min-width: 1182px) 788px, (min-width: 768px) calc(88vw - 252px), calc(100vw - 40px)",
+}: {
+  assets: ShowcaseAssets;
+  title: string;
+  device: Device;
+  sizes?: string;
+}) {
+  const [playing, setPlaying] = useState(false);
+  const videoRef = useRef<HTMLVideoElement>(null);
+
+  // o botão sai de cena ao tocar: o foco vai para o vídeo, para quem usa o teclado não o perder
+  useEffect(() => {
+    if (playing) videoRef.current?.focus();
+  }, [playing]);
+
+  if (playing) {
+    return (
+      <video
+        ref={videoRef}
+        className="absolute inset-0 h-full w-full object-cover object-top"
+        autoPlay
+        controls
+        muted
+        loop
+        playsInline
+        poster={assets.poster}
+        width={assets.width}
+        height={assets.height}
+        tabIndex={0}
+        aria-label={`Vídeo do site ${title} ${deviceLabel[device]}`}
+        disablePictureInPicture
+      >
+        {assets.sources.map((source) => (
+          <source key={source.src} src={source.src} type={source.type} />
+        ))}
+      </video>
+    );
+  }
+
+  return (
+    <>
+      {/* o quadro do celular já mostra o pôster como fundo; no computador a imagem entra aqui */}
+      {device === "desktop" ? (
+        <Image
+          src={assets.poster}
+          alt=""
+          fill
+          sizes={sizes}
+          className="object-cover object-top"
+        />
+      ) : null}
+      <button
+        type="button"
+        onClick={() => setPlaying(true)}
+        aria-label={`Reproduzir o vídeo do site ${title} ${deviceLabel[device]}`}
+        className="group absolute inset-0 grid place-items-center focus-visible:outline-2 focus-visible:-outline-offset-4 focus-visible:outline-white"
+      >
+        {/* sob o ponteiro ou no foco o círculo cresce e fica verde (só o `scale` anima; a cor troca na hora) */}
+        <span
+          aria-hidden="true"
+          className="grid size-14 place-items-center rounded-full border border-white/70 bg-black/65 text-white transition-[scale] duration-[280ms] ease-[var(--ease-out)] group-hover:scale-108 group-hover:border-[var(--slash)] group-hover:bg-[var(--slash)] group-hover:text-[var(--ink)] group-focus-visible:scale-108 group-focus-visible:border-[var(--slash)] group-focus-visible:bg-[var(--slash)] group-focus-visible:text-[var(--ink)] motion-reduce:transition-none sm:size-16"
+        >
+          <Play className="ml-1 size-6" fill="currentColor" />
+        </span>
+      </button>
+    </>
+  );
+}

app/cases/_components/CaseRelatedServices.tsx

@@ -0,0 +1,34 @@
+import { textLinkDark } from "@/app/components/button-styles";
+import HoverPrefetchLink from "@/app/components/HoverPrefetchLink";
+import { getRelatedServices } from "@/lib/site-content";
+
+/** Quantos serviços aparecem no fim do case: dois cards bastam para levar a pessoa ao serviço certo sem virar um menu. */
+export const MAX_RELATED_SERVICES = 2;
+
+/** Cards dos serviços que citam este case (no máximo dois), sobre fundo escuro. Sem serviço relacionado, não mostra nada. */
+export function CaseRelatedServices({ caseId }: { caseId: string }) {
+  const services = getRelatedServices(caseId).slice(0, MAX_RELATED_SERVICES);
+  if (services.length === 0) return null;
+
+  return (
+    <div className="mt-sp-10">
+      <p className="ds-kicker">Serviços ligados a este projeto</p>
+      <ul className="mt-sp-4 grid gap-sp-4 md:grid-cols-2">
+        {services.map((service) => (
+          <li key={service.slug} className="flex">
+            <article className="ds-card w-full">
+              <h3 className="ds-card-title !mt-0">{service.navLabel}</h3>
+              <p className="ds-copy">{service.intro}</p>
+              <HoverPrefetchLink
+                className={`${textLinkDark} mt-sp-4 self-start`}
+                href={`/servicos/${service.slug}`}
+              >
+                Ver o serviço: {service.navLabel}
+              </HoverPrefetchLink>
+            </article>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

app/cases/_components/CaseResultSection.tsx

@@ -0,0 +1,19 @@
+/** Resultado do case, só com dado real e autorizado. Sem dado, a seção não aparece. */
+export function CaseResultSection({ result }: { result?: string[] }) {
+  if (!result || result.length === 0) return null;
+
+  return (
+    <section className="ds-section" aria-labelledby="case-result">
+      <div className="ds-section-shell">
+        <h2 id="case-result" className="ds-card-title !mt-0">
+          Resultado
+        </h2>
+        <ul className="ds-list max-w-[78ch] space-y-sp-3 pl-[1.15rem]">
+          {result.map((item) => (
+            <li key={item}>{item}</li>
+          ))}
+        </ul>
+      </div>
+    </section>
+  );
+}

app/cases/_components/PosterMosaic.test.tsx

@@ -0,0 +1,108 @@
+import { render } from "@testing-library/react";
+import { getShowcaseAssets } from "@/lib/project-showcase";
+import { coverSizes } from "./CaseCover";
+import { getCaseMedia } from "./case-media";
+import { getMosaicPosters, MOSAIC_SIZE, PosterMosaic } from "./PosterMosaic";
+
+/**
+ * Mosaico de pôsteres do topo de /servicos e /cases: quais pôsteres entram (só os com captura, no máximo três),
+ * e como cada imagem carrega (a primeira, a maior, na hora e com prioridade alta; as outras só quando aparecem).
+ */
+
+jest.mock("./case-media", () => ({ getCaseMedia: jest.fn() }));
+
+const mockedGetCaseMedia = jest.mocked(getCaseMedia);
+
+afterEach(() => {
+  mockedGetCaseMedia.mockReset();
+});
+
+describe("getMosaicPosters", () => {
+  it("path: every id has a capture -> keeps the order and stops at three", () => {
+    mockedGetCaseMedia.mockImplementation(getShowcaseAssets);
+
+    const posters = getMosaicPosters(["a", "b", "c", "d"]);
+
+    expect(MOSAIC_SIZE).toBe(3);
+    expect(posters).toEqual([
+      { id: "a", poster: "/videos/a/desktop.webp" },
+      { id: "b", poster: "/videos/b/desktop.webp" },
+      { id: "c", poster: "/videos/c/desktop.webp" },
+    ]);
+  });
+
+  it("path: some ids have no capture -> skips them and fills with the next ones", () => {
+    mockedGetCaseMedia.mockImplementation((id, device) =>
+      id === "b" ? undefined : getShowcaseAssets(id, device),
+    );
+
+    expect(getMosaicPosters(["a", "b", "c", "d"]).map(({ id }) => id)).toEqual([
+      "a",
+      "c",
+      "d",
+    ]);
+    expect(mockedGetCaseMedia).toHaveBeenCalledWith("b", "desktop");
+  });
+
+  it("path: no id has a capture -> an empty list", () => {
+    mockedGetCaseMedia.mockReturnValue(undefined);
+
+    expect(getMosaicPosters(["a", "b"])).toEqual([]);
+  });
+});
+
+describe("PosterMosaic", () => {
+  const three = ["a", "b", "c"].map((id) => ({
+    id,
+    poster: `/videos/${id}/desktop.webp`,
+  }));
+
+  it("path: no posters -> renders nothing", () => {
+    const { container } = render(<PosterMosaic posters={[]} />);
+
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it("path: three posters -> decorative, the first one eager with high priority and the real column width", () => {
+    const { container } = render(<PosterMosaic posters={three} />);
+
+    expect(container.firstElementChild).toHaveAttribute("aria-hidden", "true");
+    const images = Array.from(container.querySelectorAll("img"));
+    expect(images).toHaveLength(3);
+    for (const image of images) {
+      expect(image).toHaveAttribute("alt", "");
+    }
+
+    const [main, ...side] = images;
+    expect(main).toHaveAttribute("loading", "eager");
+    expect(main).toHaveAttribute("fetchpriority", "high");
+    expect(main).toHaveAttribute("sizes", coverSizes.hero);
+    expect(main.closest("div")).toHaveClass("col-span-2");
+    for (const image of side) {
+      expect(image).toHaveAttribute("loading", "lazy");
+      expect(image).not.toHaveAttribute("fetchpriority");
+      // metade da coluna, e nunca a largura toda da tela
+      expect(image.getAttribute("sizes")).toBe(
+        "(min-width: 1440px) 274px, 20vw",
+      );
+    }
+  });
+
+  it("path: the smaller posters are hidden below 1024 px, so they are not downloaded on a phone", () => {
+    const { container } = render(<PosterMosaic posters={three} />);
+
+    const [main, ...side] = Array.from(container.querySelectorAll("img")).map(
+      (image) => image.closest("div"),
+    );
+    expect(main).not.toHaveClass("hidden");
+    for (const frame of side) {
+      expect(frame).toHaveClass("hidden", "lg:block");
+    }
+  });
+
+  it("path: a single poster -> only the main one, with no side posters", () => {
+    const { container } = render(<PosterMosaic posters={three.slice(0, 1)} />);
+
+    expect(container.querySelectorAll("img")).toHaveLength(1);
+  });
+});

app/cases/_components/PosterMosaic.tsx

@@ -0,0 +1,68 @@
+import Image from "next/image";
+import { coverSizes, priorityImageProps } from "./CaseCover";
+import { getCaseMedia } from "./case-media";
+
+export interface MosaicPoster {
+  id: string;
+  poster: string;
+}
+
+/** Quantos pôsteres entram no mosaico: um grande em cima e dois menores embaixo. */
+export const MOSAIC_SIZE = 3;
+
+/**
+ * Pôsteres gravados dos cases, na ordem dada, só dos que têm captura no disco (no máximo `MOSAIC_SIZE`).
+ * Roda no servidor, como `getCaseMedia`.
+ */
+export function getMosaicPosters(ids: readonly string[]): MosaicPoster[] {
+  return ids
+    .flatMap((id) => {
+      const media = getCaseMedia(id, "desktop");
+      return media ? [{ id, poster: media.poster }] : [];
+    })
+    .slice(0, MOSAIC_SIZE);
+}
+
+const frame =
+  "relative aspect-[16/10] overflow-hidden border border-white/15 bg-[#0a0a0a]";
+
+/**
+ * Mosaico de pôsteres dos sites no topo das páginas internas, na coluna que ficaria vazia ao lado do título.
+ * É decorativo (texto alternativo vazio): quem lê os cases tem os links logo abaixo. O primeiro pôster é o maior
+ * e o que abre a página, então carrega na hora e com prioridade alta; no celular só ele aparece, e os outros dois
+ * (que não são baixados enquanto estão ocultos) entram a partir de 1024 px.
+ */
+export function PosterMosaic({
+  posters,
+}: {
+  posters: readonly MosaicPoster[];
+}) {
+  const [main, ...others] = posters;
+  if (!main) return null;
+
+  return (
+    <div className="grid min-w-0 grid-cols-2 gap-sp-3" aria-hidden="true">
+      <div className={`${frame} col-span-2`}>
+        <Image
+          src={main.poster}
+          alt=""
+          fill
+          sizes={coverSizes.hero}
+          {...priorityImageProps}
+          className="object-cover object-top"
+        />
+      </div>
+      {others.map(({ id, poster }) => (
+        <div key={id} className={`${frame} hidden lg:block`}>
+          <Image
+            src={poster}
+            alt=""
+            fill
+            sizes="(min-width: 1440px) 274px, 20vw"
+            className="object-cover object-top"
+          />
+        </div>
+      ))}
+    </div>
+  );
+}

app/cases/_components/case-media.paths.test.ts

@@ -0,0 +1,41 @@
+import { existsSync } from "node:fs";
+import { getCaseMedia } from "./case-media";
+
+/** Testes de caminhos-base de getCaseMedia: id inválido, pôster ausente e pôster presente em disco. */
+
+jest.mock("node:fs", () => {
+  const actual = jest.requireActual<typeof import("node:fs")>("node:fs");
+  return { ...actual, existsSync: jest.fn(actual.existsSync) };
+});
+
+const mockedExistsSync = jest.mocked(existsSync);
+
+beforeEach(() => {
+  mockedExistsSync.mockClear();
+});
+
+describe("getCaseMedia", () => {
+  it.each([
+    ["with path traversal", "../../etc/passwd"],
+    ["with upper case", "Sev-Modaintima"],
+    ["with a slash", "sev/modaintima"],
+    ["empty", ""],
+  ])("path: id %s -> undefined without touching the disk", (_label, id) => {
+    expect(getCaseMedia(id, "desktop")).toBeUndefined();
+    expect(mockedExistsSync).not.toHaveBeenCalled();
+  });
+
+  it("path: valid id with no poster on disk -> undefined", () => {
+    expect(getCaseMedia("twins-lab", "desktop")).toBeUndefined();
+    expect(mockedExistsSync).toHaveBeenCalledTimes(1);
+  });
+
+  it("path: valid id with the poster on disk -> the showcase assets of that device", () => {
+    const desktop = getCaseMedia("sev-modaintima", "desktop");
+    const mobile = getCaseMedia("sev-modaintima", "mobile");
+
+    expect(desktop?.poster).toBe("/videos/sev-modaintima/desktop.webp");
+    expect(mobile?.poster).toBe("/videos/sev-modaintima/mobile.webp");
+    expect(desktop?.sources.length).toBeGreaterThan(0);
+  });
+});

app/cases/_components/case-media.ts

@@ -0,0 +1,24 @@
+import "server-only";
+import { existsSync } from "node:fs";
+import { join } from "node:path";
+import {
+  type Device,
+  getShowcaseAssets,
+  type ShowcaseAssets,
+} from "@/lib/project-showcase";
+
+const idPattern = /^[a-z0-9-]+$/;
+
+/**
+ * Pôster e vídeo gravados em public/videos/<id>/, ou `undefined` quando o projeto não tem captura.
+ * Roda no servidor (na geração das páginas): olha se o pôster existe no disco.
+ */
+export function getCaseMedia(
+  id: string,
+  device: Device,
+): ShowcaseAssets | undefined {
+  if (!idPattern.test(id)) return undefined;
+  const assets = getShowcaseAssets(id, device);
+  const file = join(process.cwd(), "public", assets.poster);
+  return existsSync(file) ? assets : undefined;
+}

app/cases/_components/cover-transition.ts

@@ -0,0 +1,10 @@
+/**
+ * A capa como elemento compartilhado da troca de página: com o mesmo nome na lista (home, /cases) e no topo do case,
+ * ela viaja de um lugar ao outro (classe case-cover em globals.css). Só a troca entre as duas anima
+ * (`default="none"`). Duas instâncias com o mesmo nome na mesma página cancelam a transição: cada página mostra
+ * a capa de um case uma vez só. Fica fora de CaseCover porque a lista da home é componente de cliente, e
+ * CaseCover lê as capturas só no servidor.
+ */
+export function coverTransitionProps(id: string) {
+  return { name: `case-${id}`, share: "case-cover", default: "none" } as const;
+}

app/cases/_components/hero-styles.ts

@@ -0,0 +1,15 @@
+/**
+ * Faixa de topo de uma página interna que não tem imagem ao lado: uma coluna só e mais baixa que a padrão.
+ * O "!" vence o CSS sem camada de globals.css (.ds-section: 72 a 112 px de folga em cima e embaixo).
+ * Em cima fica a altura do cabeçalho fixo mais um respiro, para a trilha não ficar por baixo dele; embaixo, 48 px.
+ * No celular vale o padding de `pageTop` (button-styles.ts) e o padrão de baixo.
+ */
+export const compactHero =
+  "md:!pt-[calc(var(--site-header-height)+var(--sp-10))] md:!pb-sp-12";
+
+/**
+ * Topo com imagem: texto à esquerda e a mídia à direita a partir de 1024 px (1,1 parte para 1), uma coluna abaixo disso.
+ * Os `sizes` das imagens (CaseCover e PosterMosaic) seguem esta grade.
+ */
+export const heroWithMediaGrid =
+  "grid items-center gap-y-sp-8 lg:grid-cols-[minmax(0,1.1fr)_minmax(0,1fr)] lg:gap-x-sp-16";

app/cases/opengraph-image.tsx

@@ -0,0 +1,18 @@
+import { ImageResponse } from "next/og";
+import { OG_CONTENT_TYPE, OG_SIZE, OgCard } from "@/lib/og-card";
+
+export const alt =
+  "Sites e sistemas feitos para empresas — Evandro Fonseca Junior";
+export const size = OG_SIZE;
+export const contentType = OG_CONTENT_TYPE;
+
+export default async function Image() {
+  return new ImageResponse(
+    <OgCard
+      eyebrow="Trabalhos entregues"
+      title="Sites e sistemas feitos para empresas"
+      description="Veja como cada projeto ficou e converse sobre o seu."
+    />,
+    OG_SIZE,
+  );
+}

app/cases/page.loading.test.tsx

@@ -0,0 +1,77 @@
+import { render } from "@testing-library/react";
+import type { ComponentProps } from "react";
+import { clientCasesForListing as clientCases } from "@/lib/site-content";
+import CasesPage from "./page";
+
+/**
+ * Carregamento da lista de cases: sem mosaico no topo, a capa do primeiro cartão (a maior imagem acima da dobra) carrega
+ * na hora e com prioridade alta, as outras capas são preguiçosas, e os links não pré-carregam as páginas dos cases sozinhos.
+ */
+
+type LinkProps = ComponentProps<typeof import("next/link").default>;
+
+/** Propriedades de cada `Link` renderizado: o `prefetch` não aparece no HTML, então a rota é espiada aqui. */
+const mockLinkProps: LinkProps[] = [];
+
+jest.mock("next/link", () => ({
+  __esModule: true,
+  default: ({ children, href, prefetch, ...anchor }: LinkProps) => {
+    mockLinkProps.push({ children, href, prefetch, ...anchor });
+    return (
+      <a href={String(href)} {...(anchor as Record<string, unknown>)}>
+        {children}
+      </a>
+    );
+  },
+}));
+
+beforeEach(() => {
+  mockLinkProps.length = 0;
+});
+
+function coverImages(container: HTMLElement) {
+  return clientCases.map((caseStudy) => {
+    const image = container
+      .querySelector(`a[href="/cases/${caseStudy.id}"][aria-hidden="true"]`)
+      ?.querySelector("img");
+    if (!image) throw new Error(`Missing cover of ${caseStudy.id}`);
+    return image;
+  });
+}
+
+describe("CasesPage: carregamento das capas", () => {
+  it("loads the first card cover at once with high priority, and every other image lazily", () => {
+    const { container } = render(<CasesPage />);
+
+    // sem mosaico: a única imagem decorativa (alt vazio) é a peça de blocos do topo, preguiçosa e sem prioridade
+    const decorative = Array.from(
+      container.querySelectorAll<HTMLImageElement>("img"),
+    ).filter((image) => image.getAttribute("alt") === "");
+    expect(decorative).toHaveLength(1);
+    expect(decorative[0].getAttribute("src")).toContain("estado-tela.webp");
+    expect(decorative[0]).toHaveAttribute("loading", "lazy");
+    expect(decorative[0]).not.toHaveAttribute("fetchpriority");
+
+    const [first, ...others] = coverImages(container);
+    expect(first).toHaveAttribute("loading", "eager");
+    expect(first).toHaveAttribute("fetchpriority", "high");
+    expect(others.length).toBeGreaterThan(0);
+    for (const image of others) {
+      expect(image).toHaveAttribute("loading", "lazy");
+      expect(image).not.toHaveAttribute("fetchpriority");
+    }
+  });
+
+  it("does not prefetch the case pages from the cover links, nor from the card buttons", () => {
+    render(<CasesPage />);
+
+    const toCases = mockLinkProps.filter(({ href }) =>
+      String(href).startsWith("/cases/"),
+    );
+    // uma capa e um botão por case de cliente, e um botão por projeto do laboratório
+    expect(toCases.length).toBeGreaterThanOrEqual(clientCases.length * 2);
+    for (const props of toCases) {
+      expect(props.prefetch).toBe(false);
+    }
+  });
+});

app/cases/page.paths.test.tsx

@@ -0,0 +1,181 @@
+import { render, screen, within } from "@testing-library/react";
+import {
+  buttonLabels,
+  clientCasesForListing,
+  labCases,
+} from "@/lib/site-content";
+import { getCaseMedia } from "./_components/case-media";
+import CasesPage from "./page";
+
+/**
+ * Teste de caminhos-base da lista de cases de cliente em CasesPage:
+ * o caminho "case de cliente sem captura gravada" (a página principal só vê cases com captura).
+ */
+
+jest.mock("./_components/case-media", () => {
+  const actual = jest.requireActual("./_components/case-media");
+  return { ...actual, getCaseMedia: jest.fn(actual.getCaseMedia) };
+});
+
+const actualGetCaseMedia = jest.requireActual<
+  typeof import("./_components/case-media")
+>("./_components/case-media").getCaseMedia;
+const mockedGetCaseMedia = jest.mocked(getCaseMedia);
+
+afterEach(() => {
+  mockedGetCaseMedia.mockImplementation(actualGetCaseMedia);
+});
+
+function clientCard(container: HTMLElement, id: string) {
+  const card = container
+    .querySelector(`a[href="/cases/${id}"]`)
+    ?.closest("article");
+  if (!card) throw new Error(`Missing client card ${id}`);
+  return card;
+}
+
+describe("CasesPage: cases de cliente", () => {
+  it("path: client case without a desktop capture -> card keeps text and links but no cover", () => {
+    const [withoutCapture, withCapture] = clientCasesForListing;
+    mockedGetCaseMedia.mockImplementation((id, device) =>
+      id === withoutCapture.id ? undefined : actualGetCaseMedia(id, device),
+    );
+
+    const { container } = render(<CasesPage />);
+
+    const bare = clientCard(container, withoutCapture.id);
+    expect(bare.querySelector(".ds-bframe")).toBeNull();
+    expect(bare.querySelector("img")).toBeNull();
+    expect(bare.querySelector("a[aria-hidden='true']")).toBeNull();
+    expect(within(bare).getByText(withoutCapture.headline)).toBeVisible();
+    expect(
+      within(bare).getByRole("link", {
+        name: `${buttonLabels.case} ${withoutCapture.title}`,
+      }),
+    ).toHaveAttribute("href", `/cases/${withoutCapture.id}`);
+
+    // os outros cases de cliente continuam com a capa
+    const covered = clientCard(container, withCapture.id);
+    expect(covered.querySelector(".ds-bframe img")).toHaveAttribute(
+      "alt",
+      `Captura de tela do site ${withCapture.title}`,
+    );
+  });
+
+  it("path: every case -> one 'Ver case' button, named after its project, and no 'Ver o case' or 'Ler case'", () => {
+    render(<CasesPage />);
+
+    const buttons = screen.getAllByRole("link", { name: /^Ver case / });
+    expect(buttons).toHaveLength(
+      clientCasesForListing.length + labCases.length,
+    );
+    for (const link of buttons) {
+      expect(link.textContent?.startsWith(buttonLabels.case)).toBe(true);
+    }
+    expect(
+      screen.queryByRole("link", { name: /Ver o case|Ler case|Ver o projeto/ }),
+    ).toBeNull();
+  });
+
+  it("path: an odd number of client cases -> the last card takes the whole row on wide screens, so the grid ends with no empty cell", () => {
+    const { container } = render(<CasesPage />);
+
+    const wide = clientCasesForListing.map((caseStudy) =>
+      clientCard(container, caseStudy.id).className.includes(
+        "min-[1025px]:col-span-2",
+      ),
+    );
+    const odd = clientCasesForListing.length % 2 === 1;
+    expect(wide).toEqual(
+      clientCasesForListing.map(
+        (_, index) => odd && index === clientCasesForListing.length - 1,
+      ),
+    );
+  });
+
+  it("path: contact -> 'Chamar no WhatsApp', and the list of clients follows the showcase: the SEV first, then Lavação 047, SC Plus, AS Serviços and Julia Beauty", () => {
+    const { container } = render(<CasesPage />);
+
+    expect(
+      screen.getByRole("link", { name: buttonLabels.whatsapp }),
+    ).toHaveAttribute("href", expect.stringContaining("https://wa.me/"));
+    const clientTitles = Array.from(
+      container.querySelectorAll("#cases-clientes ~ div article .ds-kicker"),
+    ).map((kicker) => kicker.textContent);
+    expect(clientTitles).toEqual(
+      clientCasesForListing.map(({ title }) => title),
+    );
+    expect(clientTitles).toEqual([
+      "SEV Moda Íntima",
+      "Lavação 047",
+      "SC Plus Aquicultura",
+      "AS Serviços",
+      "Julia Beauty",
+    ]);
+    // um botão de contato só na página: o do fecho
+    expect(
+      screen.getAllByRole("link", { name: buttonLabels.whatsapp }),
+    ).toHaveLength(1);
+  });
+});
+
+describe("CasesPage: topo sem mosaico", () => {
+  it("path: captures found -> no poster mosaic (the cards below already carry the covers), only the block piece beside the text, a lower strip, no 'Veja o que já' twice", () => {
+    const { container } = render(<CasesPage />);
+
+    const hero = container.querySelector("section");
+    const images = hero?.querySelectorAll("img") ?? [];
+    expect(images).toHaveLength(1);
+    expect(images[0].getAttribute("src")).toContain("estado-tela.webp");
+    // decorativa e só de 1024 px em diante
+    expect(images[0].closest('[aria-hidden="true"]')).toHaveClass(
+      "hidden",
+      "lg:block",
+    );
+    expect(hero?.className).toContain("md:!pb-sp-12");
+    // o título e o subtítulo não repetem a mesma frase
+    const heading = within(hero as HTMLElement).getByRole("heading", {
+      level: 1,
+    });
+    expect(heading).toHaveTextContent("Veja o que já fiz para empresas.");
+    expect(hero?.textContent?.match(/Veja o que já/g)).toHaveLength(1);
+    expect(hero?.textContent).not.toMatch(/\bdireto\b/);
+  });
+
+  it("path: no capture for the other clients -> still no mosaic, and the first card cover takes the priority", () => {
+    mockedGetCaseMedia.mockImplementation((id, device) =>
+      id === clientCasesForListing[0].id
+        ? actualGetCaseMedia(id, device)
+        : undefined,
+    );
+
+    const { container } = render(<CasesPage />);
+
+    const hero = container.querySelector("section");
+    expect(hero?.querySelectorAll("img")).toHaveLength(1);
+    const firstCover = clientCard(
+      container,
+      clientCasesForListing[0].id,
+    ).querySelector(".ds-bframe img");
+    expect(firstCover).toHaveAttribute("loading", "eager");
+    expect(firstCover).toHaveAttribute("fetchpriority", "high");
+  });
+});
+
+describe("CasesPage: prioridade da capa do primeiro cartão", () => {
+  it("path: no mosaic -> the first card cover is the page's biggest image, so it loads at once with high priority; the others stay lazy", () => {
+    const { container } = render(<CasesPage />);
+
+    const [first, ...others] = clientCasesForListing;
+    const firstCover = clientCard(container, first.id).querySelector(
+      ".ds-bframe img",
+    );
+    expect(firstCover).toHaveAttribute("loading", "eager");
+    expect(firstCover).toHaveAttribute("fetchpriority", "high");
+    for (const { id } of others) {
+      const cover = clientCard(container, id).querySelector(".ds-bframe img");
+      expect(cover).toHaveAttribute("loading", "lazy");
+      expect(cover).not.toHaveAttribute("fetchpriority");
+    }
+  });
+});

app/cases/page.tsx

@@ -0,0 +1,241 @@
+import type { Metadata } from "next";
+import { Breadcrumb } from "@/app/components/Breadcrumb";
+import {
+  pageTop,
+  primaryButton,
+  secondaryButtonDark,
+  secondaryButtonLight,
+  textLink,
+} from "@/app/components/button-styles";
+import HoverPrefetchLink from "@/app/components/HoverPrefetchLink";
+import { PagePiece } from "@/app/components/PagePiece";
+import WhatsAppLink from "@/app/components/WhatsAppLink";
+import { safeJsonLd } from "@/lib/jsonld";
+import { buildBreadcrumbList, buildPageSocialMetadata } from "@/lib/seo";
+import {
+  buttonLabels,
+  type CaseStudyContent,
+  clientCasesForListing,
+  labCases,
+  siteUrl,
+} from "@/lib/site-content";
+import { CASES_SUBJECT } from "@/lib/whatsapp";
+import { CaseCoverLink } from "./_components/CaseCoverLink";
+import { compactHero, heroWithMediaGrid } from "./_components/hero-styles";
+
+const pageUrl = `${siteUrl}/cases`;
+const pageTitle = "Cases: sites e sistemas para empresas";
+const pageDescription =
+  "Cases de sites e sistemas para empresas: loja virtual com pedido pelo WhatsApp, site com painel para o dono e páginas institucionais.";
+/** Abertura da página: o que o visitante encontra nos cases, sem repetir a frase do título. */
+const pageLead =
+  "Abra um case para ver o problema do cliente, o que foi feito e como o site ficou, da loja virtual ao site que o dono edita sozinho.";
+const allCases = [...clientCasesForListing, ...labCases];
+
+export const metadata: Metadata = {
+  title: pageTitle,
+  description: pageDescription,
+  ...buildPageSocialMetadata({
+    url: pageUrl,
+    title: pageTitle,
+    description: pageDescription,
+    type: "website",
+  }),
+};
+
+/**
+ * Cartão de um case de cliente, com a capa do site (quando há captura gravada), o resumo e o botão do case.
+ * `wide`: o cartão que sobraria sozinho na última linha ocupa a linha inteira, capa à esquerda e texto à direita.
+ */
+function ClientCaseCard({
+  caseStudy,
+  priority = false,
+  wide = false,
+}: {
+  caseStudy: CaseStudyContent;
+  /** Capa que abre a página: sem mosaico no topo, a primeira capa é a maior imagem visível. */
+  priority?: boolean;
+  wide?: boolean;
+}) {
+  return (
+    <article
+      className={`ds-card !h-auto ${
+        // a partir de 1025 px, onde .ds-grid-2 (globals.css) passa a duas colunas; o "!" vence o display:flex de .ds-card,
+        // que fica fora das camadas do Tailwind
+        wide
+          ? "min-[1025px]:col-span-2 min-[1025px]:!grid min-[1025px]:grid-cols-2 min-[1025px]:items-center min-[1025px]:gap-x-sp-8 min-[1025px]:[&>:first-child]:mb-0"
+          : ""
+      }`}
+    >
+      <CaseCoverLink
+        id={caseStudy.id}
+        title={caseStudy.title}
+        demoUrl={caseStudy.demoUrl}
+        priority={priority}
+      />
+      <div>
+        <div className="ds-kicker">{caseStudy.title}</div>
+        <h3 className="ds-card-title">{caseStudy.headline}</h3>
+        <p className="ds-copy">{caseStudy.summary}</p>
+        <div className="mt-sp-6 flex flex-wrap items-center gap-sp-3">
+          <HoverPrefetchLink
+            href={`/cases/${caseStudy.id}`}
+            className={secondaryButtonLight}
+          >
+            {buttonLabels.case}
+            <span className="sr-only"> {caseStudy.title}</span>
+          </HoverPrefetchLink>
+          {caseStudy.demoUrl ? (
+            <a
+              href={caseStudy.demoUrl}
+              className={textLink}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {buttonLabels.site}
+              <span className="sr-only"> {caseStudy.title}</span>
+            </a>
+          ) : null}
+        </div>
+      </div>
+    </article>
+  );
+}
+
+/**
+ * Uma linha por projeto do laboratório: nome, o que é, a marca "Projeto próprio" e o link. Sem capa nem resumo, para a lista
+ * ocupar pouco espaço (no celular, o nome e a marca ficam na primeira linha).
+ */
+function LabCaseRow({ caseStudy }: { caseStudy: CaseStudyContent }) {
+  return (
+    <li className="grid grid-cols-[minmax(0,1fr)_auto] items-baseline gap-x-sp-6 gap-y-sp-1 py-sp-4 md:grid-cols-[minmax(0,1fr)_minmax(0,2fr)_auto_auto]">
+      <h3 className="text-base font-semibold leading-6">{caseStudy.title}</h3>
+      <p className="ds-kicker justify-self-end md:order-3">Projeto próprio</p>
+      <p className="col-span-2 text-[15px] leading-6 text-[var(--ink-80)] md:order-2 md:col-span-1">
+        {caseStudy.subtitle}
+      </p>
+      <HoverPrefetchLink
+        href={`/cases/${caseStudy.id}`}
+        className={`${textLink} col-span-2 justify-self-start md:order-4 md:col-span-1`}
+      >
+        {buttonLabels.case}
+        <span className="sr-only"> {caseStudy.title}</span>
+      </HoverPrefetchLink>
+    </li>
+  );
+}
+
+export default function CasesPage() {
+  const jsonLd = {
+    "@context": "https://schema.org",
+    "@graph": [
+      {
+        "@type": "CollectionPage",
+        "@id": `${pageUrl}#page`,
+        name: pageTitle,
+        url: pageUrl,
+        description: pageDescription,
+      },
+      {
+        "@type": "ItemList",
+        itemListElement: allCases.map((caseStudy, index) => ({
+          "@type": "ListItem",
+          position: index + 1,
+          name: caseStudy.title,
+          url: `${pageUrl}/${caseStudy.id}`,
+        })),
+      },
+      buildBreadcrumbList(pageUrl, [
+        ["Início", siteUrl],
+        ["Cases", pageUrl],
+      ] as const),
+    ],
+  };
+
+  return (
+    <main>
+      <script type="application/ld+json">{safeJsonLd(jsonLd)}</script>
+
+      {/* sem mosaico de pôsteres: os cartões logo abaixo já trazem a capa de cada cliente, e a mesma imagem não aparece duas vezes */}
+      <section
+        className={`ds-section ds-section-dark ${pageTop} ${compactHero}`}
+      >
+        <div className={`ds-section-shell ${heroWithMediaGrid}`}>
+          <div className="min-w-0 max-w-[860px]">
+            <Breadcrumb
+              items={[
+                { label: "Início", href: "/" },
+                { label: "Cases", href: "/cases" },
+              ]}
+            />
+            <h1 className="ds-section-title max-w-[18ch] text-balance text-white">
+              Veja o que já fiz para empresas.
+            </h1>
+            <p className="ds-copy max-w-[64ch] !text-[rgba(255,255,255,0.78)]">
+              {pageLead}
+            </p>
+          </div>
+          <PagePiece image="/3d/estado-tela.webp" />
+        </div>
+      </section>
+
+      <section className="ds-section" aria-labelledby="cases-clientes">
+        <div className="ds-section-shell">
+          <h2 id="cases-clientes" className="ds-card-title !mt-0">
+            Projetos de clientes
+          </h2>
+          <div className="ds-grid-2 mt-sp-8 items-start">
+            {clientCasesForListing.map((caseStudy, index, all) => (
+              <ClientCaseCard
+                key={caseStudy.id}
+                caseStudy={caseStudy}
+                priority={index === 0}
+                wide={index === all.length - 1 && all.length % 2 === 1}
+              />
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <section className="ds-section" aria-labelledby="cases-laboratorio">
+        <div className="ds-section-shell">
+          <h2 id="cases-laboratorio" className="ds-card-title !mt-0">
+            Laboratório
+          </h2>
+          <p className="ds-copy max-w-[64ch]">
+            Projetos pessoais e de estudo, feitos para praticar e testar ideias.
+          </p>
+          <ul className="mt-sp-6 divide-y divide-[var(--border)] border-y border-[var(--border)]">
+            {labCases.map((caseStudy) => (
+              <LabCaseRow key={caseStudy.id} caseStudy={caseStudy} />
+            ))}
+          </ul>
+        </div>
+      </section>
+
+      <section className="ds-section ds-section-dark">
+        <div className="ds-section-shell">
+          <h2 className="ds-card-title !mt-0 text-white">
+            Quer um projeto parecido com algum destes?
+          </h2>
+          <p className="ds-copy max-w-[60ch]">
+            Conte o que você precisa. A conversa começa pelo WhatsApp, sem
+            formulário.
+          </p>
+          <div className="mt-sp-6 flex flex-wrap items-center gap-sp-3">
+            <WhatsAppLink
+              service={CASES_SUBJECT}
+              placement="cases_hub_footer"
+              className={primaryButton}
+            >
+              {buttonLabels.whatsapp}
+            </WhatsAppLink>
+            <HoverPrefetchLink href="/servicos" className={secondaryButtonDark}>
+              {buttonLabels.allServices}
+            </HoverPrefetchLink>
+          </div>
+        </div>
+      </section>
+    </main>
+  );
+}

app/components/About.paths.test.tsx

@@ -0,0 +1,220 @@
+import { fireEvent, render, screen, within } from "@testing-library/react";
+import About from "./About";
+
+// o Link do Next, trocado por um <a> que mostra o prefetch recebido: HoverPrefetchLink começa em false
+jest.mock("next/link", () => ({
+  __esModule: true,
+  default: ({
+    children,
+    prefetch,
+    ...props
+  }: { children?: React.ReactNode; prefetch?: boolean | null } & Record<
+    string,
+    unknown
+  >) => (
+    <a data-prefetch={String(prefetch)} {...props}>
+      {children}
+    </a>
+  ),
+}));
+
+/**
+ * Testes de caminhos-base de About: a entrada dos quatro cartões (Reveal, CSS) com atrasos crescentes, o
+ * feedback de toque e de mouse por classes (cv-press, cv-lift; cartões sem foco), o conteúdo e a coluna de
+ * apoio. Nada de animação em JavaScript: o movimento reduzido é tratado pelo CSS.
+ */
+
+jest.mock("@/public/edev.jpg", () => ({
+  __esModule: true,
+  default: { src: "/edev.jpg", width: 10, height: 10 },
+}));
+
+jest.mock("./Section", () => ({
+  Section: ({
+    children,
+    id,
+    title,
+    description,
+    aside,
+  }: {
+    children?: React.ReactNode;
+    id?: string;
+    title?: string;
+    description?: string;
+    aside?: React.ReactNode;
+  }) => (
+    <section id={id}>
+      <h2>{title}</h2>
+      <p data-testid="about-description">{description}</p>
+      {aside}
+      {children}
+    </section>
+  ),
+}));
+
+jest.mock("./animations/DrawLine", () => ({ DrawLine: () => null }));
+jest.mock("./animations/LazyRevealImage", () => ({
+  LazyRevealImage: ({ alt }: { alt: string }) => (
+    <span role="img" aria-label={alt} />
+  ),
+}));
+
+describe("About", () => {
+  it("path: the four cards enter through Reveal -> same rise and duration, delays growing in steps", () => {
+    const { container } = render(<About />);
+
+    const reveals = [...container.querySelectorAll<HTMLElement>(".ds-reveal")];
+    // 3 etapas da história + o card do perfil (o cabeçalho da seção é um dublê, sem Reveal)
+    expect(reveals).toHaveLength(4);
+    expect(
+      reveals.map((element) => element.style.getPropertyValue("--reveal-y")),
+    ).toEqual(["20px", "20px", "20px", "20px"]);
+    expect(
+      reveals.map((element) =>
+        element.style.getPropertyValue("--reveal-duration"),
+      ),
+    ).toEqual(["0.8s", "0.8s", "0.8s", "0.8s"]);
+    const delays = reveals.map((element) =>
+      Number.parseFloat(element.style.getPropertyValue("--reveal-delay")),
+    );
+    expect(delays).toEqual([0.08, 0.16, 0.24, 0.32]);
+    for (const element of reveals) {
+      expect(element.style.opacity).toBe("");
+      expect(element.style.transform).toBe("");
+    }
+  });
+
+  it("path: the four cards are not focus stops and use the CSS press feedback", () => {
+    const { container } = render(<About />);
+
+    const cards = container.querySelectorAll("article");
+    expect(cards).toHaveLength(4);
+    for (const card of cards) {
+      expect(card).not.toHaveAttribute("tabindex");
+      expect(card).toHaveClass("cv-press");
+    }
+  });
+
+  it("path: the three story cards lift on hover and press with CSS; the profile card presses only", () => {
+    const { container } = render(<About />);
+
+    const cards = [...container.querySelectorAll("article")];
+    expect(cards).toHaveLength(4);
+    for (const card of cards.slice(0, 3)) {
+      expect(card).toHaveClass("cv-press", "cv-lift");
+    }
+    expect(cards[3]).toHaveClass("cv-press");
+  });
+
+  it("path: the section has three points, each with the proof that backs it, and the résumé link", () => {
+    const { container } = render(<About />);
+
+    const titles = [
+      "Quem conversa com você escreve o código",
+      "Aproveito o que você já tem",
+      "Do código ao sistema no ar",
+    ];
+    for (const name of titles) {
+      expect(
+        screen.getByRole("heading", { level: 3, name }),
+      ).toBeInTheDocument();
+    }
+    // no máximo três pontos: os três cartões da história; o cartão do perfil não é um quarto ponto, só diz do que cuido
+    const story = [...container.querySelectorAll("article")].slice(0, 3);
+    expect(story).toHaveLength(3);
+    for (const card of story) {
+      expect(within(card).getAllByText("Na prática:")).toHaveLength(1);
+    }
+    // a prova de cada ponto é concreta: a Apolo desde 2022, a revisão e os cases entregues
+    expect(story[0]).toHaveTextContent(
+      /Na prática: Na Apolo Energia, desde 2022, desenvolvo aplicações web e mobile, APIs e integrações com dispositivos IoT/,
+    );
+    expect(story[1]).toHaveTextContent(
+      /Na prática: Na revisão, você recebe o que dá para aproveitar e o que é melhor refazer/,
+    );
+    expect(story[2]).toHaveTextContent(
+      /Na prática: Já entregue para SEV Moda Íntima, Lavação 047, SC Plus Aquicultura e AS Serviços\./,
+    );
+    expect(
+      within(story[1]).getByRole("link", {
+        name: "Ver como funciona a revisão",
+      }),
+    ).toHaveAttribute("href", "/ia");
+    expect(
+      screen.getByRole("link", { name: "Ver trajetória completa" }),
+    ).toHaveAttribute("href", "/curriculo");
+  });
+
+  it("path: the idea of talking to whoever develops shows up once, not in five texts", () => {
+    const { container } = render(<About />);
+
+    expect(container.textContent).not.toMatch(
+      /Sem intermediários|Uma pessoa cuida|Quem responde pelo projeto|acompanha as decisões|fala com quem desenvolve|Solução do tamanho|Tudo funcionando junto/,
+    );
+    expect(container.textContent?.match(/mesma pessoa/g)).toHaveLength(1);
+  });
+
+  it("path: the résumé and the review links pre-fetch only when the visitor reaches them (HoverPrefetchLink), as in the rest of the home", () => {
+    render(<About />);
+
+    for (const name of [
+      "Ver trajetória completa",
+      "Ver como funciona a revisão",
+    ]) {
+      const link = screen.getByRole("link", { name });
+      expect(link).toHaveAttribute("data-prefetch", "false");
+      fireEvent.mouseEnter(link);
+      expect(link).toHaveAttribute("data-prefetch", "null");
+    }
+  });
+
+  it("path: speaks in client benefits, with no technical jargon, and cites the Apolo Energia work once, as the proof of the first point", () => {
+    const { container } = render(<About />);
+
+    expect(container.textContent).not.toMatch(
+      /protocolos de baixo nível|operabilidade|camada física|sinal físico/i,
+    );
+    // a seção abre pela credencial, logo depois do nome
+    expect(screen.getByRole("heading", { level: 2 })).toHaveTextContent(
+      "Evandro Fonseca Junior",
+    );
+    expect(screen.getByTestId("about-description").textContent).toBe(
+      "Engenheiro da computação e desenvolvedor de software, com projetos entregues para empresas.",
+    );
+    // só o que o currículo sustenta: nada de "os sistemas internos e a IoT" da empresa inteira
+    expect(container.textContent).not.toMatch(
+      /os sistemas internos e a IoT da Apolo/,
+    );
+    // a frase da Apolo aparece uma só vez (na prova do primeiro ponto)
+    expect(container.textContent?.match(/Apolo Energia/g)).toHaveLength(1);
+  });
+
+  it("path: the first story card does not reuse the name 'Como eu trabalho' of the process list in the offers section right before", () => {
+    const { container } = render(<About />);
+
+    expect(container.textContent).not.toMatch(/Como eu trabalho/);
+    expect(screen.getByText("Quem desenvolve")).toBeInTheDocument();
+  });
+
+  it("path: 'contato direto', 'fala direto' and 'conversa comigo' no longer repeat in the section", () => {
+    const { container } = render(<About />);
+
+    expect(container.textContent).not.toMatch(
+      /contato direto|fala direto|falar direto|conversa comigo/i,
+    );
+  });
+
+  it("path: the location label stays on one line and the portrait card keeps its own height next to the text cards", () => {
+    const { container } = render(<About />);
+
+    expect(screen.getByText(/Garuva, SC · Atendimento remoto/)).toHaveClass(
+      "whitespace-nowrap",
+    );
+    // items-start: o retrato tem a altura do próprio conteúdo e acompanha a rolagem; só os cartões de texto se esticam entre si
+    expect(container.querySelector(".ds-grid-2")).toHaveClass("items-start");
+    const story = container.querySelectorAll("article");
+    for (const card of Array.from(story).slice(0, 3)) {
+      expect(card).toHaveClass("flex-1");
+    }
+  });
+});

app/components/About.tsx

@@ -1,165 +1,137 @@
-"use client";
-
-import { motion, type Variants, useReducedMotion } from "framer-motion";
-import profilePhoto from "@/public/edev.jpeg";
-import { Section } from "./Section";
+import profilePhoto from "@/public/edev.jpg";
 import { DrawLine } from "./animations/DrawLine";
 import { LazyRevealImage } from "./animations/LazyRevealImage";
+import { textLink } from "./button-styles";
+import "./conversion.css";
+import HoverPrefetchLink from "./HoverPrefetchLink";
+import { Reveal } from "./Reveal";
+import { Section } from "./Section";
 
+/**
+ * Os três pontos da seção, cada um com a prova que o sustenta. A ideia de que quem conversa com você é quem desenvolve
+ * aparece só no primeiro cartão: antes ela se repetia em cinco textos ("Sem intermediários", "Uma pessoa cuida",
+ * "Quem responde pelo projeto", "Você acompanha as decisões" e "Você fala com quem desenvolve", que segue só no hero).
+ */
 const STORY_DATA = [
   {
-    id: "HARDWARE_BRIDGE",
-    title: "Do físico ao digital",
+    label: "Quem desenvolve",
+    title: "Quem conversa com você escreve o código",
     content:
-      "Construo a ponte entre hardware e software. Projeto sistemas capazes de orquestrar dispositivos físicos, protocolos de baixo nível e interfaces web modernas com baixa latência e alta resiliência.",
+      "A mesma pessoa entende o problema, decide a estrutura e desenvolve o sistema, do começo ao fim.",
+    proof:
+      "Na Apolo Energia, desde 2022, desenvolvo aplicações web e mobile, APIs e integrações com dispositivos IoT para as rotinas internas.",
   },
   {
-    id: "RUNTIME_EXEC",
-    title: "Entrega sob restrições",
+    label: "Sem começar do zero",
+    title: "Aproveito o que você já tem",
     content:
-      "Atuo com naturalidade em cenários críticos envolvendo integrações de hardware, APIs complexas e infraestrutura legada, sempre priorizando a estabilidade e a legibilidade técnica.",
+      "Antes de mexer em um sistema que já está em uso, vejo o que existe e combino com você o que vem primeiro. Nem todo problema exige começar de novo.",
+    proof:
+      "Na revisão, você recebe o que dá para aproveitar e o que é melhor refazer, com o motivo de cada parte.",
+    link: { href: "/ia", label: "Ver como funciona a revisão" },
+  },
+  {
+    label: "Depois da entrega",
+    title: "Do código ao sistema no ar",
+    content:
+      "Colocar no ar, corrigir falhas, documentar e manter o sistema entram no planejamento desde o começo, junto com as funcionalidades.",
+    proof:
+      "Já entregue para SEV Moda Íntima, Lavação 047, SC Plus Aquicultura e AS Serviços.",
   },
 ];
 
-const VALUES_DATA = [
-  {
-    title: "Pragmatismo arquitetural",
-    description:
-      "Decisões guiadas por contexto real e operabilidade. A melhor tecnologia é aquela que resolve o problema sem adicionar complexidade inútil ao sistema.",
-  },
-  {
-    title: "Fundação & Integração",
-    description:
-      "Domínio de protocolos de rede e arquiteturas distribuídas para conectar desde microcontroladores até sistemas robustos na nuvem.",
-  },
-  {
-    title: "Ownership ponta a ponta",
-    description:
-      "Responsabilidade que atravessa camadas: do pulso elétrico no hardware até a renderização do último componente na tela do usuário.",
-  },
-  {
-    title: "Security & Safety",
-    description:
-      "Segurança e resiliência tratadas como base. Sistemas desenhados para falhar graciosamente e proteger dados do dispositivo à nuvem.",
-  },
-];
+/** Atraso (s) de cada cartão: entram em escada, como na vitrine de serviços. */
+const cardDelay = (index: number) => 0.08 * (index + 1);
 
 export default function About() {
-  const shouldReduceMotion = useReducedMotion();
-
-  const staggerContainer: Variants = {
-    hidden: {},
-    visible: {
-      transition: {
-        delayChildren: 0.08,
-        staggerChildren: 0.08,
-      },
-    },
-  };
-
-  const cardVariants: Variants = {
-    hidden: shouldReduceMotion
-      ? { opacity: 0 }
-      : { opacity: 0, y: 20, clipPath: "inset(100% 0 0 0)" },
-    visible: {
-      opacity: 1,
-      y: 0,
-      clipPath: "inset(0% 0 0 0)",
-      transition: shouldReduceMotion
-        ? { duration: 0.25 }
-        : {
-            duration: 0.8,
-            ease: [0.16, 1, 0.3, 1],
-          },
-    },
-  };
-
-  const cardHover = shouldReduceMotion
-    ? undefined
-    : {
-        y: -4,
-        boxShadow: "0 18px 40px rgba(10,10,10,0.16)",
-      };
-
   return (
     <Section
       id="about"
-      eyebrow="WHOAMI.sys"
-      title="Engenharia orientada por clareza, nao por ruido"
-      description="Transformo complexidade tecnica em sistemas estaveis, operaveis e alinhados ao negocio."
+      eyebrow="Quem conduz o projeto"
+      title="Evandro Fonseca Junior"
+      description="Engenheiro da computação e desenvolvedor de software, com projetos entregues para empresas."
       disableChildrenAnimation
       aside={
-        <div className="mt-sp-4 ds-metric">
-          <span className="inline-block h-1.5 w-1.5 rounded-full bg-slash" />
-          Garuva, SC | Remote worldwide
+        <div className="mt-sp-4 ds-metric whitespace-nowrap" data-reel="left">
+          <span className="inline-block h-1.5 w-1.5 shrink-0 rounded-full bg-slash" />
+          Garuva, SC · Atendimento remoto
         </div>
       }
     >
-      <motion.div
-        className="ds-grid-2"
-        initial="hidden"
-        whileInView="visible"
-        viewport={{ once: true, amount: 0.2 }}
-        variants={staggerContainer}
-      >
-        <motion.div
-          className="flex flex-col gap-sp-6"
-          variants={staggerContainer}
-        >
-          {STORY_DATA.map((step) => (
-            <motion.article
-              key={step.id}
-              className="ds-card"
-              variants={cardVariants}
-              whileHover={cardHover}
-              whileTap={shouldReduceMotion ? undefined : { scale: 0.99 }}
-              transition={{ type: "spring", stiffness: 180, damping: 18 }}
+      {/* items-start: o cartão do retrato tem a altura do próprio conteúdo, e não a das três colunas de texto; no desktop ele acompanha a rolagem */}
+      <div className="ds-grid-2 items-start">
+        <div className="flex flex-col gap-sp-6">
+          {STORY_DATA.map((step, index) => (
+            <Reveal
+              key={step.title}
+              y={20}
+              duration={0.8}
+              delay={cardDelay(index)}
+              className="flex flex-1 flex-col"
             >
-              <div className="ds-kicker">{step.id}</div>
-              <DrawLine delay={0.03} />
-              <h3 className="ds-card-title">{step.title}</h3>
-              <p className="ds-copy">{step.content}</p>
-            </motion.article>
+              <article className="ds-card cv-press cv-lift flex-1">
+                <div className="ds-kicker">{step.label}</div>
+                <DrawLine delay={0.03} />
+                <h3 className="ds-card-title">{step.title}</h3>
+                <p className="ds-copy" data-reel="right">
+                  {step.content}
+                </p>
+                <p className="mt-sp-4 border-t border-[var(--border)] pt-sp-3 font-display text-[15px] leading-6 text-[var(--ink)]">
+                  <span className="font-semibold">Na prática: </span>
+                  {step.proof}
+                </p>
+                {step.link && (
+                  <HoverPrefetchLink
+                    href={step.link.href}
+                    className={`${textLink} self-start text-[var(--ink-80)]`}
+                  >
+                    {step.link.label}
+                  </HoverPrefetchLink>
+                )}
+              </article>
+            </Reveal>
           ))}
-        </motion.div>
+        </div>
 
-        <motion.article
-          className="ds-card h-full"
-          variants={cardVariants}
-          whileHover={cardHover}
-          whileTap={shouldReduceMotion ? undefined : { scale: 0.99 }}
-          transition={{ type: "spring", stiffness: 180, damping: 18 }}
+        <Reveal
+          y={20}
+          duration={0.8}
+          delay={cardDelay(STORY_DATA.length)}
+          className="lg:sticky lg:top-28"
         >
-          <LazyRevealImage
-            src={profilePhoto}
-            alt="Retrato de Evandro"
-            className="mb-sp-6 h-[220px] w-full overflow-hidden rounded-[6px] border border-[var(--border)]"
-            imageClassName="object-cover"
-          />
-          <div className="ds-kicker">System Signature</div>
-          <DrawLine delay={0.05} />
-          <h3 className="ds-card-title">Base tecnica e postura de entrega</h3>
-          <p className="ds-copy">
-            Evandro Fonseca Junior. Engenheiro de Software Full-Stack com foco
-            na convergência entre hardware e aplicações web modernas.
-            Especialista em TypeScript, Node.js, ecossistema React e automação
-            de dispositivos físicos.
-          </p>
-          <div className="ds-grid-2 mt-sp-6">
-            {VALUES_DATA.map((value) => (
-              <div
-                key={value.title}
-                className="border-t border-[var(--border)] pt-sp-4"
-              >
-                <div className="text-[11px] font-medium uppercase tracking-[0.08em]">
-                  {value.title}
-                </div>
-                <p className="ds-copy !mt-sp-2">{value.description}</p>
-              </div>
-            ))}
-          </div>
-        </motion.article>
-      </motion.div>
+          <article className="ds-card cv-press cv-lift">
+            <figure>
+              <LazyRevealImage
+                src={profilePhoto}
+                alt="Retrato de Evandro Fonseca Junior"
+                className="aspect-[4/3] w-full overflow-hidden rounded-[6px] border border-[var(--border)]"
+                imageClassName="object-cover object-[50%_25%]"
+                sizes="(min-width: 1024px) 50vw, 100vw"
+              />
+              <figcaption className="mt-sp-3 font-display text-[15px] leading-6 text-[var(--ink-80)]">
+                Evandro Fonseca Junior · Engenheiro da computação · Garuva, SC
+              </figcaption>
+            </figure>
+            <div className="ds-kicker mt-sp-6">Do que eu cuido</div>
+            <h3 className="ds-card-title !mt-sp-2">
+              Tela, dados e equipamentos
+            </h3>
+            <DrawLine delay={0.05} />
+            <p className="ds-copy" data-reel="top">
+              Cuido da tela que sua equipe usa, dos dados por trás dela e,
+              quando o negócio tem máquinas ou sensores, da ligação deles com o
+              sistema. Ver tudo junto ajuda a decidir o que construir, o que
+              conectar e o que dá para aproveitar.
+            </p>
+            <HoverPrefetchLink
+              href="/curriculo"
+              className={`${textLink} mt-sp-4 text-[var(--ink-80)]`}
+            >
+              Ver trajetória completa
+            </HoverPrefetchLink>
+          </article>
+        </Reveal>
+      </div>
     </Section>
   );
 }

app/components/Breadcrumb.paths.test.tsx

@@ -0,0 +1,57 @@
+import { render, screen } from "@testing-library/react";
+import { Breadcrumb } from "./Breadcrumb";
+
+/**
+ * Testes de caminhos-base de Breadcrumb: a barra de separação vem depois de cada item menos do último (a quebra de linha
+ * no celular nunca deixa uma linha começando por "/"), e só o último é a página atual (inclusive quando é o único).
+ */
+
+describe("Breadcrumb", () => {
+  it("path: several items -> a separator after every item but the last, so a wrapped line starts with a name", () => {
+    const { container } = render(
+      <Breadcrumb
+        items={[
+          { label: "Início", href: "/" },
+          { label: "Cases", href: "/cases" },
+          { label: "SEV Moda Íntima", href: "/cases/sev-modaintima" },
+        ]}
+      />,
+    );
+
+    const entries = Array.from(container.querySelectorAll("li"));
+    expect(entries).toHaveLength(3);
+    expect(
+      entries[0].querySelector("span[aria-hidden='true']"),
+    ).toHaveTextContent("/");
+    expect(
+      entries[1].querySelector("span[aria-hidden='true']"),
+    ).toHaveTextContent("/");
+    expect(entries[2].querySelector("span[aria-hidden='true']")).toBeNull();
+    // o nome vem antes da barra em todos os itens, e nenhum item abre por "/"
+    for (const entry of entries) {
+      expect(entry.firstElementChild?.tagName).toBe("A");
+      expect(entry.textContent?.trimStart().startsWith("/")).toBe(false);
+    }
+    expect(entries[0].className).toContain("flex");
+  });
+
+  it("path: a single item -> no separator, and it is the current page", () => {
+    const { container } = render(
+      <Breadcrumb items={[{ label: "Início", href: "/" }]} />,
+    );
+
+    expect(container.querySelector("span[aria-hidden='true']")).toBeNull();
+    expect(screen.getByRole("link", { name: "Início" })).toHaveAttribute(
+      "aria-current",
+      "page",
+    );
+  });
+
+  it("path: no items -> an empty list inside the navigation", () => {
+    render(<Breadcrumb items={[]} />);
+
+    const nav = screen.getByRole("navigation");
+    expect(nav.querySelectorAll("li")).toHaveLength(0);
+    expect(screen.queryByRole("link")).toBeNull();
+  });
+});

app/components/Breadcrumb.prefetch.test.tsx

@@ -0,0 +1,52 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { Breadcrumb } from "./Breadcrumb";
+
+/**
+ * A trilha de navegação só pré-carrega a rota de um item quando a pessoa chega nele (mouse, teclado ou toque):
+ * o `prefetch` não aparece no HTML, então o Link é trocado por um que o expõe em `data-prefetch`.
+ */
+
+jest.mock("next/link", () => ({
+  __esModule: true,
+  default: ({
+    children,
+    prefetch,
+    ...props
+  }: { children?: React.ReactNode; prefetch?: boolean | null } & Record<
+    string,
+    unknown
+  >) => (
+    <a data-prefetch={String(prefetch)} {...props}>
+      {children}
+    </a>
+  ),
+}));
+
+const items = [
+  { label: "Início", href: "/" },
+  { label: "Cases", href: "/cases" },
+];
+
+describe("Breadcrumb: pré-carregamento", () => {
+  it("path: opening the page -> no link pre-fetches", () => {
+    render(<Breadcrumb items={items} />);
+
+    for (const link of screen.getAllByRole("link")) {
+      expect(link).toHaveAttribute("data-prefetch", "false");
+    }
+  });
+
+  it.each([
+    ["mouse", fireEvent.mouseEnter],
+    ["keyboard focus", fireEvent.focus],
+    ["touch", fireEvent.touchStart],
+  ])("path: %s reaching one link -> only that link pre-fetches", (_, event) => {
+    render(<Breadcrumb items={items} />);
+
+    const [home, cases] = screen.getAllByRole("link");
+    event(cases);
+
+    expect(cases).toHaveAttribute("data-prefetch", "null");
+    expect(home).toHaveAttribute("data-prefetch", "false");
+  });
+});

app/components/Breadcrumb.test.tsx

@@ -0,0 +1,31 @@
+import { render, screen, within } from "@testing-library/react";
+import { Breadcrumb } from "./Breadcrumb";
+
+describe("Breadcrumb", () => {
+  const items = [
+    { label: "Início", href: "/" },
+    { label: "Cases", href: "/cases" },
+    { label: "SEV Moda Íntima", href: "/cases/sev-modaintima" },
+  ];
+
+  it("marks only the last item as the current page", () => {
+    render(<Breadcrumb items={items} />);
+
+    const links = within(
+      screen.getByRole("navigation", { name: "Trilha de navegação" }),
+    ).getAllByRole("link");
+    expect(links.map((link) => link.getAttribute("aria-current"))).toEqual([
+      null,
+      null,
+      "page",
+    ]);
+  });
+
+  it("keeps the text at 15 px or more, as the body text of the inner pages", () => {
+    const { container } = render(<Breadcrumb items={items} />);
+
+    const list = container.querySelector("ol");
+    expect(list).toHaveClass("text-[15px]");
+    expect(list?.className).not.toMatch(/text-(xs|sm)\b|text-\[1[0-4]px\]/);
+  });
+});

app/components/Breadcrumb.tsx

@@ -0,0 +1,34 @@
+import HoverPrefetchLink from "./HoverPrefetchLink";
+
+/**
+ * Trilha de navegação sobre fundo escuro, no topo das páginas internas. O último item é a página atual.
+ * Os links só pré-carregam a rota quando a pessoa chega neles (HoverPrefetchLink).
+ * A barra vem depois de cada item, menos do último: quando a trilha não cabe numa linha (celular), a quebra cai
+ * depois da barra e a linha de baixo começa pelo nome, nunca por "/".
+ */
+export function Breadcrumb({
+  items,
+}: {
+  items: readonly { label: string; href: string }[];
+}) {
+  return (
+    <nav aria-label="Trilha de navegação" className="mb-sp-6">
+      <ol className="flex flex-wrap items-center gap-x-sp-2 gap-y-sp-1 text-[15px]">
+        {items.map(({ label, href }, index) => (
+          <li key={href} className="flex items-center gap-sp-2">
+            <HoverPrefetchLink
+              aria-current={index === items.length - 1 ? "page" : undefined}
+              className="ds-link ds-link-text"
+              href={href}
+            >
+              {label}
+            </HoverPrefetchLink>
+            {index < items.length - 1 ? (
+              <span aria-hidden="true">/</span>
+            ) : null}
+          </li>
+        ))}
+      </ol>
+    </nav>
+  );
+}

app/components/ClientStrip.paths.test.tsx

@@ -0,0 +1,51 @@
+import { render, screen } from "@testing-library/react";
+import ClientStrip from "./ClientStrip";
+
+/**
+ * Testes de caminhos-base de ClientStrip (complemento de ClientStrip.test.tsx): o separador entre clientes
+ * (um cliente, vários; só entre itens, nunca no fim de uma linha) e o className opcional.
+ */
+
+const clients = [
+  { id: "sev-modaintima", name: "SEV Moda Íntima" },
+  { id: "lavacao-047", name: "Lavação 047" },
+  { id: "sc-plus", name: "SC Plus Aquicultura" },
+];
+
+describe("ClientStrip", () => {
+  it("path: a single client -> no separator dot", () => {
+    const { container } = render(<ClientStrip clients={clients.slice(0, 1)} />);
+
+    expect(screen.getAllByRole("link")).toHaveLength(1);
+    expect(container.querySelectorAll("[aria-hidden='true']")).toHaveLength(0);
+  });
+
+  it("path: several clients -> a separator before every client except the first", () => {
+    render(<ClientStrip clients={clients} />);
+
+    const items = screen.getAllByRole("listitem");
+    expect(items).toHaveLength(3);
+    expect(
+      items.map((item) => item.querySelector("[aria-hidden='true']") !== null),
+    ).toEqual([false, true, true]);
+    expect(items[1].querySelector("[aria-hidden='true']")).toHaveTextContent(
+      "·",
+    );
+  });
+
+  it("path: className given -> appended to the wrapper without a stray space", () => {
+    const { container } = render(
+      <ClientStrip clients={clients} className="hero-in mt-sp-4" />,
+    );
+
+    const wrapper = container.firstElementChild as HTMLElement;
+    expect(wrapper.className.endsWith("hero-in mt-sp-4")).toBe(true);
+  });
+
+  it("path: className omitted -> the wrapper class has no trailing space", () => {
+    const { container } = render(<ClientStrip clients={clients} />);
+
+    const wrapper = container.firstElementChild as HTMLElement;
+    expect(wrapper.className).toBe(wrapper.className.trim());
+  });
+});