# Redesign — Redesign Welz Nutrition

> Status: 🟢 Concluído (escopo fechado) — ver "Nota de escopo" abaixo
> Período: 26/08 — 29/08 (2026), com base nas datas de modificação de
> `prototipo/landing-bebidas/design2-peptideos.html`, `design3-peptideos.html`
> e `CHECKPOINT-design2-peptideos.md` [fonte: datas de modificação dos
> arquivos]; fase adicional do Carrinho em 04/09/2026 — ver seção 11;
> refinamentos e nova interação de feedback em 08/09/2026 — ver seção 12
> sugestão: confirmar se esse é o período real ou só o intervalo do
> checkpoint mais recente — pode haver trabalho anterior não capturado em
> metadata de arquivo
> Responsável: Franco

> **Nota de escopo** (esclarecido por Franco em 29/08/2026, reafirmado no
> fechamento do projeto em 29/08/2026; **ampliado em 04/09/2026** — ver
> seção 11): o Redesign **aprofundado** cobre a **página de produto (PDP)
> do Body Peptides** — landing narrativa de 13 seções, com defesa de design
> bloco a bloco — e, desde 04/09/2026, também a **experiência de carrinho**
> (`carrinho.html`), que ganhou um motor de barganha e desconto (Kit
> Experimentação gratuito, desconto progressivo por quantidade, conversão
> de 1 clique entre Compra Única e Assinatura) pensado pra aumentar o
> ticket médio e o giro de produtos. **Home**, **Daily Hydration**, **Por
> quê Welz**, **Minha conta** e as etapas 2-3 do Carrinho (Entrega,
> Pagamento) existem como reestrutura objetiva de arquitetura da informação
> e navegação (esqueleto funcional, interconectado pelo menu), mas **não
> participam do escopo de redesenho aprofundado** deste estudo — servem só
> de suporte de acesso até a PDP do Body Peptides e até a 1ª etapa do
> carrinho. Essa distinção está registrada como modal (`shared/scope-notice.*`)
> em toda página do protótipo publicado, exceto `body-peptides.html` e
> `carrinho.html`. A Avaliação (`docs/02_avaliacao.md`), por contraste,
> cobriu todo o site e a jornada de compra completa (ambos os produtos).
>
> **Histórico:** este arquivo documentava anteriormente o protótipo de
> landing pages "Gaseificada"/"Pó" (scroll-storytelling em 4 atos,
> `prototipo/landing-bebidas/gaseificada/index.html` e `po/index.html`,
> 11–17/08/2026). Segundo Franco, essa frente foi **superada** pela direção
> atual (Body Peptides). Os arquivos originais continuam no repositório para
> referência histórica; o conteúdo que documentava essa fase foi preservado
> no final deste arquivo, na seção "Histórico — exploração anterior
> (superada)", mas não faz mais parte do escopo ativo do Redesign.

---

## 1. Objetivo da fase

Redesenhar Home, a página de produto do Body Peptides (PDP) e o Carrinho de
Compra, reorganizando a arquitetura da informação, definindo o design
system e o copy — com cada decisão embasada nos achados da fase de
Avaliação e, quando aplicável, numa carta do Baralho de Vieses [fonte:
docs/00_briefing.md, seção "Fases do projeto", item 3; esclarecimento de
escopo de Franco em 29/08/2026].

## 2. Perguntas / Hipóteses

- O redesign da PDP como uma página narrativa (não só transacional)
  resolve os achados críticos da Avaliação — findability, jargão
  "peptídeos", falta de flexibilidade de compra, comunicação da proposta
  de valor? [inferido do cruzamento entre docs/02_avaliacao.md e
  prototipo/landing-bebidas/design3-peptideos.html]
- Qual carta do Baralho de Vieses justifica cada decisão de copy da nova
  PDP? [fonte: docs/_raw/notas-fases.md, seção "Redesign"]
- A reorganização de Home + PDP + Carrinho consegue expressar de forma
  consistente os tokens de marca extraídos do Figma? [fonte:
  prototipo/landing-bebidas/design-styles-welz.md]

## 3. Dados e fontes

| Fonte | Tipo | Tamanho amostral | Como foi coletado |
|---|---|---|---|
| PDP transacional original do Body Peptides | Artefato de referência ("antes") | 1 página | `prototipo/welz_bebida-proteica.html` [fonte: arquivo citado] |
| Redesign da PDP como landing narrativa | Artefato de design/código | 1 página, 13 seções, 3 iterações (design1→2→3) | `prototipo/landing-bebidas/design1/2/3-peptideos.html`; processo documentado seção a seção em `CHECKPOINT-design2-peptideos.md` (8+ rodadas de revisão por seção) [fonte: arquivos citados] |
| Copy com mapeamento de vieses | Qualitativo/persuasão | 10 blocos de copy, ~30 cartas do Baralho de Vieses aplicadas | `Welz - Anti/copywriting-bebida-proteica-vieses.md` [fonte: arquivo citado] |
| Design tokens extraídos do Figma | Estruturado (cor, tipografia, espaçamento) | tokens da marca Welz (Shark, Pampas, Khaki, Sycamore, Pesto, Westar, Boulder, Alto) | `prototipo/landing-bebidas/design-styles-welz.md` [fonte: arquivo citado] |
| Base científica (Body Peptides) | Secundário/acadêmico | RCT + revisões já citadas na página de ciência | `prototipo/welz_ciencia-body-peptide.html` [fonte: citado em Welz - Anti/copywriting-bebida-proteica-vieses.md] |
| Versão publicável | Artefato de deploy | 1 site (Firebase) | `prototipo/landing-bebidas/versão publicação/` — `firebase.json`, `.firebaserc` [fonte: arquivos citados] — ⚠️ status de publicação (se está de fato no ar, e onde) não confirmado |
| Estrutura de arquitetura da informação (site inteiro) | Artefato de código | 7 páginas + componentes compartilhados | `prototipo/landing-bebidas/versão publicação/` — `index.html` (Portfolio/estudo de caso, entrada principal da pasta), `home.html` (Home do site, ex-`index.html`), `body-peptides.html` (PDP, ex-`index.html` original), `daily-hydration.html`, `porque-welz.html`, `conta.html`, `carrinho.html` + `shared/site-chrome.css`, `shared/cart-drawer.css`/`.js`, `shared/nav-burger.js`, `shared/scope-notice.css`/`.js` [decisão de Franco, 29/08/2026 — ver seção 11] |

## 4. Métodos aplicados

- **Análise:** reescrita da PDP transacional (`welz_bebida-proteica.html`)
  como landing narrativa em 10 blocos (Hero → A dor → Como funciona/prova →
  Quando tomar → Comparativo → Prova social → Modo de uso → Assinatura →
  FAQ → CTA final), cada bloco justificado por carta(s) do Baralho de
  Vieses [fonte: Welz - Anti/copywriting-bebida-proteica-vieses.md]; regras
  de compliance mantidas em toda a copy (claim de massa/gordura sempre
  associado a treino resistido, cifras sempre vindas de estudo nomeado)
  [fonte: mesmo arquivo, seção "Regras de compliance mantidas em toda a
  copy"]
- **Ferramentas:** Figma (extração de design tokens), HTML/CSS/JS puro,
  GSAP 3.12.5 + ScrollTrigger, sem SplitText (sem licença GreenSock Club)
  [fonte: CHECKPOINT-design2-peptideos.md, seção "Stack e convenções
  gerais"]
- **Justificativa da escolha do método:** ⚠️ PENDENTE — preencher
  manualmente
  sugestão: não há registro explícito de por que a PDP virou uma landing
  narrativa de 13 seções em vez de uma reforma mais pontual da página
  transacional existente — provavelmente decorre direto dos achados da
  Avaliação (findability da proposta de valor, jargão), mas isso não está
  formalizado.

## 5. Resultados

- A PDP do Body Peptides foi reescrita como página narrativa de 13 seções:
  Hero (frame-sequence scroll), Proposta de valor, O que são peptídeos,
  Como age + a prova (RCT), Quando tomar (4 momentos), Kit de
  experimentação, Prova social (carrossel de depoimentos), Modo de uso +
  calculadora de compra mensal, Decisão de compra, FAQ, "Por trás da marca"
  (efeito halo com o grupo LIVE!), Fechamento [fonte:
  CHECKPOINT-design2-peptideos.md]
- O termo "peptídeos" — identificado na Avaliação como incompreensível pra
  3 de 4 participantes — é introduzido só depois de uma analogia em
  linguagem simples ("colágeno pré-quebrado"), não como primeira frase
  [fonte: Welz - Anti/copywriting-bebida-proteica-vieses.md, seção 3]
- A dor de "não consigo comprar pouco pra testar" (mínimo de 6 latas,
  achado da Avaliação) ganhou uma seção própria — "Kit de experimentação" —
  com CTA dedicado [fonte: CHECKPOINT-design2-peptideos.md, seção "06 · Kit
  experimentação"]
- Nenhuma das animações foi verificada visualmente num browser real
  durante a sessão de trabalho mais recente (Chrome MCP não conectou) —
  toda validação foi estática (sintaxe JS, IDs duplicados, resolução de
  assets via servidor local) [fonte: CHECKPOINT-design2-peptideos.md, seção
  "Como validar (sem browser real)"]

⚠️ PENDENTE — preencher manualmente
sugestão: Home e Carrinho de Compra, como páginas distintas da PDP, não
foram localizadas no repositório — o trabalho até aqui parece concentrado
só na PDP-como-landing. Confirmar se Home/Carrinho já existem em algum
lugar não indexado, ou se são de fato os próximos passos.

## 6. Referências e fundamentação de design

- Baralho de Vieses — aplicado bloco a bloco no copy da PDP, ~30 cartas
  citadas com justificativa (ex: Efeito de Contexto, Viés de Confirmação,
  Atalho Metafórico, Viés de Autoridade, Efeito de Ancoragem, Aversão à
  Perda) [fonte: Welz - Anti/copywriting-bebida-proteica-vieses.md] — isto
  resolve o pendente "documento de defesa de design" desta fase [fonte:
  docs/_raw/notas-fases.md, seção "Redesign"]
- Design tokens extraídos do Figma como fonte de verdade da identidade
  visual [fonte: prototipo/landing-bebidas/design-styles-welz.md]
- Base científica já citada na página de ciência do Body Peptides (RCTs
  sobre colágeno/peptídeos) [fonte: prototipo/welz_ciencia-body-peptide.html,
  citado em Welz - Anti/copywriting-bebida-proteica-vieses.md]
- Achados da Avaliação usados como gatilho direto de decisões de copy
  (jargão peptídeos, findability, flexibilidade de compra) [fonte:
  docs/02_avaliacao.md]

## 7. Decisões tomadas

| Decisão | Justificativa (dado/referência) | Alternativas descartadas |
|---|---|---|
| Introduzir "peptídeos" só depois da analogia "colágeno pré-quebrado", nunca como primeira frase | Responde ao achado de Avaliação de que 3/4 participantes não compreendem o termo [fonte: docs/02_avaliacao.md; Welz - Anti/copywriting-bebida-proteica-vieses.md, seção 3] | ⚠️ PENDENTE — não há registro das alternativas descartadas |
| Manter cláusula "aliado a treino de resistência" em todo claim de massa/gordura | Evita repetir o Achado Grade D já documentado (colágeno tem PDCAAS=0 isolado) [fonte: Welz - Anti/copywriting-bebida-proteica-vieses.md, "Regras de compliance"] | ⚠️ PENDENTE — não há registro das alternativas descartadas |
| Criar seção dedicada "Kit de experimentação" em vez de só reduzir o mínimo de compra geral | Resolve a dor de "não posso comprar pouco pra testar" sem reformular toda a política comercial de fardo de 6 [fonte: CHECKPOINT-design2-peptideos.md, seção 06] | ⚠️ PENDENTE — não há registro das alternativas descartadas |

## 8. Riscos e premissas

- **Risco de escopo fechado, conteúdo ainda não:** Home, Carrinho de
  Compra e a arquitetura de navegação do site inteiro (incluindo
  Daily Hydration, Por quê Welz e Minha conta, fora do escopo original do
  Redesign mas necessários pra fechar o menu) agora têm artefato de código
  — como esqueleto navegável, sem conteúdo detalhado. Ver seção 11.
  [fonte: decisão de Franco, 29/08/2026]
- **Risco de validação:** nenhuma das animações/interações da nova PDP foi
  conferida num browser real durante a sessão mais recente [fonte:
  CHECKPOINT-design2-peptideos.md]
- **Risco de depoimentos fictícios:** a seção de prova social usa
  depoimentos simulados — precisam ser substituídos por reais antes de
  qualquer publicação [fonte: Welz - Anti/copywriting-bebida-proteica-vieses.md,
  "Pendências que exigem validação humana"]
- **Pendências de validação humana explícitas no próprio copy:** claim de
  "imunidade" sem nutriente específico confirmado (IN 28/2018), números da
  tabela comparativa (150kcal/250kcal) sem fonte confirmada [fonte: Welz -
  Anti/copywriting-bebida-proteica-vieses.md]
- **Status de publicação incerto:** existe uma pasta `versão publicação/`
  com configuração de deploy (Firebase), mas não há confirmação se está de
  fato publicada e onde [fonte: prototipo/landing-bebidas/versão
  publicação/]

## 9. Entregáveis desta fase

- [x] PDP do Body Peptides redesenhada como landing narrativa (13 seções)
  — `prototipo/landing-bebidas/versão publicação/body-peptides.html`
  [fonte: arquivo citado]
- [x] Copy completo com mapeamento de vieses bloco a bloco — `Welz -
  Anti/copywriting-bebida-proteica-vieses.md` [fonte: arquivo citado]
- [x] Design tokens extraídos do Figma — `prototipo/landing-bebidas/design-styles-welz.md`
  [fonte: arquivo citado]
- [~] Versão empacotada para publicação —
  `prototipo/landing-bebidas/versão publicação/` (existe, status de deploy
  no Firebase ainda não confirmado)
- [x] Home — `home.html` (renomeado de `index.html`; a pasta agora abre pelo
  Portfolio), hero com os dois produtos lado a lado (hover
  dominante, `flex-grow`+`:has()`) + banners simples + rodapé. Skeleton
  intencional ("bem limpa"), sem conteúdo além do hero/banners — melhoria
  de conteúdo é pendência explícita (seção 10) [decisão de Franco,
  29/08/2026]
- [x] Carrinho de Compra — mini-cart (`shared/cart-drawer.*`, abre ao
  clicar na bolsa em qualquer página) + tela cheia `carrinho.html`, ambos
  com marcador de 3 etapas (Carrinho → Entrega → Pagamento). A etapa 1
  passou por redesenho aprofundado em 04/09/2026 (ver seção 11); etapas
  2-3 seguem como placeholder — pendência explícita (seção 10)
- [x] Motor de barganha e desconto no carrinho (04/09/2026) — Kit
  Experimentação gratuito (4 latas, 2 sabores, limite 1/CPF), desconto
  progressivo por quantidade em Compra Única, conversão de 1 clique entre
  Compra Única e Assinatura (linha a linha ou em lote) — ver seção 11
- [x] 3 micro-interações líquidas próprias (04/09/2026) — flavor toggle
  (blob + filtro goo SVG), voo CTA → carrinho, troca de card entre
  Assinatura/Compra única — catalogadas em
  `prototipo/landing-bebidas/versão publicação/micro-interacao-v1.html`
  antes de portadas pro código real — ver seção 11
- [x] Calculadora de consumo mensal (PDP, seção 9) conectada ao carrinho
  via modal (04/09/2026) — adiciona direto em Assinatura, sabor a sabor,
  CTA "Leve agora com 25% off" — ver seção 11
- [x] Menu interconectando todas as páginas (Home, PDP, Daily Hydration,
  Por quê Welz, Minha conta) — `daily-hydration.html`, `porque-welz.html`,
  `conta.html` criadas como esqueleto (nav+footer+placeholder); conteúdo —
  pendência explícita (seção 10)
- [x] Aviso de limite de escopo — modal (`shared/scope-notice.*`) em toda
  página fora do redesenho aprofundado (Home, Daily Hydration, Por quê
  Welz, Minha conta), explicando que a PDP do Body Peptides e a
  experiência de carrinho foram redesenhadas de fato; as demais dão
  suporte de navegação [decisão de Franco, 29/08/2026; texto do modal
  atualizado em 04/09/2026 pra incluir o carrinho]
- [x] Justificativa da arquitetura de informação e das escolhas de design
  — Defesa das Escolhas de Design (FigJam, `Mw4AmqMf7zsWZ7WeYPABMb`,
  node `100:214`) + seção Redesign do Portfolio (levantamento de
  viés/pesquisa por bloco, imagens do wireframe v4 e da captura real)
  [decisão de Franco, 29/08/2026: "ao final teremos que justificar a
  estrutura, além do conteúdo de cada página"]
- [~] Verificação visual da PDP num browser real — feita via Chrome
  headless (CDP) nesta sessão, confirmando renderização correta em todas
  as páginas sem erro de console; fluidez/timing das animações de scroll
  em uso real não foi avaliado — ver pendência de animação (seção 10)
- [ ] Depoimentos reais (substituindo os fictícios da prova social) — ⚠️
  PENDENTE

## 10. Próximos passos

Pendências registradas no fechamento desta fase (Franco, 29/08/2026):

- [x] ~~**Animações e transições mais fluidas**~~ — **fechada como fora de
  escopo definitivo em 22/09/2026** (decisão de Franco): não entra em
  nenhuma fase futura deste projeto
- [x] ~~**Melhoria da Home**~~ — **fechada como fora de escopo definitivo em
  22/09/2026** (decisão de Franco)
- [x] ~~**Finalização das subpáginas de checkout**~~ (Daily Hydration, Por
  quê Welz, Minha conta, etapas 2-3 do Carrinho) — **fechada como fora de
  escopo definitivo em 22/09/2026** (decisão de Franco)
- [x] ~~**Padronização de elementos de design system**~~ — **feita em
  22/09/2026.** `body-peptides.html` mantinha seu próprio `<style>`
  interno com tokens, reset, header/nav e rodapé duplicados de
  `shared/site-chrome.css`. Consolidado: `shared/site-chrome.css` virou a
  fonte única de verdade (85 seletores comuns, 73 idênticos byte a byte,
  12 divergentes só por caminho de fonte relativo — sem mudança de
  comportamento) e `body-peptides.html` passou a importá-lo via `<link>`,
  removendo o `<style>` duplicado (mantendo só as ~200 regras específicas
  da PDP). Achado no processo: **2 correções que só existiam na cópia da
  PDP nunca tinham sido propagadas pro arquivo compartilhado** — agora
  valem pra toda página:
  1. Fix de `overflow-x/overflow-y` no `body` pra não quebrar
     `position: sticky` no Safari/WebKit — `carrinho.html` usa `sticky` e
     estava exposto ao mesmo bug, sem o fix.
  2. Fix de padding do `.footer-inner` (longhand em vez de shorthand) pra
     não perder o padding lateral herdado de `.wrap` no mobile — todas as
     páginas "simples" (home, daily-hydration, porque-welz, conta,
     carrinho) tinham esse bug latente no rodapé mobile.
  Verificação: diff programático de regras CSS confirmando zero
  duplicação residual e nenhuma regra perdida na migração, balanceamento
  de chaves ok, servidor local respondendo 200 em todas as páginas
  testadas. **Checagem visual em navegador real ainda pendente** (extensão
  Chrome indisponível na sessão) — recomendado antes de publicar.

Pendências anteriores ainda válidas:

- [ ] Confirmar/publicar a versão em `versão publicação/` (Firebase) e
  documentar onde ela está disponível
- [ ] Substituir depoimentos fictícios da prova social por reais
- [ ] Resolver as 3 pendências de validação humana sinalizadas no próprio
  copy (claim de imunidade, números da tabela comparativa, depoimentos)

## 11. Fase adicional — Carrinho: barganha e desconto (04/09/2026)

Depois do fechamento do escopo em 29/08/2026, o carrinho (`carrinho.html`)
virou objeto de uma segunda rodada de redesenho aprofundado, agora com um
objetivo comercial explícito: aumentar o ticket médio e o giro de produtos
via estratégias de barganha, em vez de só suportar navegação [decisão de
Franco, 04/09/2026].

**O que foi construído:**

- **Kit Experimentação gratuito** — card fixo no topo da lista de Compra
  Única, 4 latas (2 sabores), limite simulado de 1 por CPF, sem opção de
  conversão pra Assinatura (é o único produto que não pode pertencer ao
  card de assinatura) [decisão de Franco: "é o único produto que não pode
  pertencer ao card assinatura e nunca pode ter a opção 'assinar'"].
- **Desconto progressivo por quantidade** em Compra Única, com badge +
  preço riscado no resumo do carrinho; linhas de desconto separadas por
  tipo (não uma única linha de "economia" combinada); cobrança sempre
  mensal (recorrência quinzenal embute 2 remessas), com "Próxima
  cobrança" e "Recorrência de entrega" em linhas distintas.
- **Conversão de 1 clique entre Compra Única e Assinatura** (25% off),
  linha a linha ou em lote (CTA "Quero aproveitar, vou de assinatura!")
  — excluindo explicitamente o Kit Experimentação da conversão em lote.
- **Calculadora de consumo mensal → carrinho** (PDP, seção 9) — modal que
  lista N fardos calculados, cada um com seletor de sabor (toggle
  compacto por transform CSS, sem filtro SVG por linha) e atalho "Aplicar
  a todos"; ao confirmar, adiciona tudo em modo Assinatura no carrinho.
  CTA: "Leve agora com 25% off" [decisão de Franco: "os produtos
  adicionados via calculadora devem ser adicionados em assinatura no
  carrinho... Antes não tínhamos isso" — reverte a decisão anterior de não
  colocar CTA de compra colado na calculadora, registrada na seção 6 do
  levantamento de viés/pesquisa].
- **3 micro-interações líquidas próprias**, calibradas primeiro num
  laboratório dedicado
  (`prototipo/landing-bebidas/versão publicação/micro-interacao-v1.html`,
  com índice navegável no topo listando as 3 e seu status de produção)
  antes de portadas pro código real:
  1. **Flavor toggle líquido** — thumb que se comporta como um blob (2
     elementos + filtro `feGaussianBlur`/`feColorMatrix` SVG, técnica
     "goo") em vez de transição CSS simples. Portado pra `carrinho.html`.
  2. **Voo CTA → carrinho** — o botão morpha (Flubber, SVG path morph)
     num círculo, viaja até o ícone da bolsa e é absorvido, com
     drop-shadow adicionado nas duas etapas do voo pra manter contraste
     contra fundos de cor parecida. Portado pra `body-peptides.html` e
     seus CTAs (incluindo os que adicionam o Kit Experimentação, seção 6
     e 13 da PDP).
  3. **Troca de card entre Assinatura/Compra única** — 4 fases
     assimétricas (encolhe+funde no lugar → viaja só a bolha → morpha no
     lugar pro destino → revela o novo card por baixo da forma que
     desaparece), sem morph de path via Flubber (troca por animação pura
     de `width`/`height`/`border-radius`). Portado pra `carrinho.html` e
     pro resumo do carrinho no drawer de `body-peptides.html`.
- **Botão "Compre agora" no menu** — presente em `home.html`,
  `body-peptides.html` e `carrinho.html`, leva direto pro carrinho, com
  reflexo (shine) passando a cada 10s (`prefers-reduced-motion`
  respeitado).
- **Generalização do carrinho-resumo de `body-peptides.html`** — o drawer
  lateral decorativo (só local, sem persistência entre páginas) passou a
  suportar múltiplos sabores por modo (chave composta `mode:flavor` em vez
  de só `mode`), pra refletir o resultado da calculadora quando ela
  adiciona sabores mistos.

**Arquivos principais tocados:** `versão publicação/carrinho.html`,
`versão publicação/body-peptides.html`,
`versão publicação/micro-interacao-v1.html`,
`versão publicação/shared/site-chrome.css`,
`versão publicação/shared/scope-notice.css`/`.js` (texto e inclusão
atualizados pra refletir o carrinho como segundo caso de redesenho
aprofundado).

**Pendência não fechada por esta fase:** as etapas 2-3 do Carrinho
(Entrega, Pagamento) continuam como esqueleto — só a etapa 1 (a lista de
produtos e o resumo) recebeu esse aprofundamento.

---
*Última atualização: 04/09/2026*

---

## 12. Fase adicional — Refinamentos e feedback de adição (08/09/2026)

Ajustes sobre a fase do carrinho (seção 11), depois de teste real em
produção no mobile e de uma revisão do case no Portfolio [decisão de
Franco, 08/09/2026].

**Correção — sequenciamento da troca de card:** a técnica "Troca de card
entre Assinatura/Compra única" (seção 11, item 3) tinha um bug de
sequenciamento só na direção Assinatura → Compra única: o card assinatura
(sempre ACIMA de compra única no layout) encolhia JUNTO com a viagem da
bolha, empurrando a lista de destino pra cima enquanto a forma ainda
viajava pro ponto antigo — o card "passava do ponto" ao descer [relato de
Franco: "a animação passa do ponto quando desce com o produto vindo do
card acima"]. A direção oposta sempre funcionou, porque encolher uma
lista nunca desloca o que está ACIMA dela, só o que vem depois dela no
documento. Corrigido em `carrinho.html` e no resumo do drawer de
`body-peptides.html`: a lista de destino continua podendo crescer/encolher
junto com a viagem (mexer na própria altura nunca desloca a própria
posição); a lista de ORIGEM só reduz de tamanho depois que o card já
encaixou no destino — checagem genérica via `compareDocumentPosition`
(qual lista vem antes da outra no documento), não fixa numa direção
específica.

**Nova interação — feedback de adição ao carrinho, só em `carrinho.html`:**
motivado pelo teste em mobile — clicar em "Adicionar" (nos 3 cards de
produto: Body Peptides, Daily Hydration, Kit Experimentação) não dava
nenhum retorno visual de que o item realmente entrou no carrinho.
Reaproveita a linguagem visual do voo CTA→carrinho da PDP (botão encolhe
em bolha, mostra texto, viaja, é absorvido), com 2 diferenças
deliberadas: (1) sem Flubber — usa o mesmo tween de
`width`/`height`/`border-radius` já validado em `cardTransferHop`, não
morph de path (`carrinho.html` não carrega mais essa lib desde a v3 do
Card→Card); (2) a bolha desce até a LINHA correspondente em Compra Única
— não sobe até o ícone da bolsa no header, já que estamos na própria
página do carrinho — com um flash de cor na linha de chegada. O texto
dentro da bolha mostra a quantidade/sabor de verdade (ex.: "3 quantidades
do sabor Limonada c/ Framboesa foram adicionadas"; caso especial pro Kit,
que não tem um sabor único: "1 Kit Experimentação foi adicionado"), em
vez de um "Item adicionado" genérico.

> **Nota de metodologia:** diferente das 3 interações da seção 11
> (calibradas primeiro em `micro-interacao-v1.html` antes de ir pro
> código real), esta foi construída direto em produção, reaproveitando
> uma técnica já validada — não é uma 4ª técnica nova testada em
> laboratório, é uma variação de uso da 3ª (mesma família de tween, alvo
> e texto diferentes). Registrado aqui pra não passar a falsa impressão
> de que todo o catálogo de interações líquidas segue o fluxo
> laboratório-primeiro.

**Portfolio — nova seção "Design de Interação":** adicionada em
`Portifolio/index.html` (+ cópia em `versão publicação/index.html`),
entre "Status" e "Referências". Suporte novo no renderer
(`renderEmbed`, iframe ao vivo) — em vez de só descrever as interações em
prosa, incorpora `micro-interacao-v1.html` de verdade, jogável, dentro do
case: 3 bullets (uma por técnica da seção 11) + player embutido (1200px,
scrollável) + links pra abrir em tela cheia / ver em uso no carrinho. A
nova interação de feedback de adição (acima) não entrou nesta seção do
Portfolio — seguindo a nota de metodologia, ela é tratada como refinamento
de produto, não como peça nova do catálogo de design de interação.

**Outros ajustes menores:**
- Corrigido um link de imagens quebrado em `versão publicação/index.html`
  — regressão introduzida na sessão anterior ao copiar
  `Portifolio/data.json` sem reaplicar o remapeamento de URLs entre as
  duas cópias (`assets/` → `portfolio-assets/`, links de página das
  outras telas viram caminho nu, `../` extra pra compensar a
  profundidade de pasta).
- Menu "Por quê Welz" → "PORQUE WELZ" (maiúsculas) no header de todas as
  páginas do site.
- Margem lateral no mobile da 1ª seção (Hero) do Portfolio — `.hero` e
  `.wrap` ficam na mesma `<section>`, e o padding shorthand de `.hero`
  zerava o padding horizontal de `.wrap` (invisível no desktop, porque a
  centralização por `max-width` já dá a folga; visível no mobile).

**Arquivos tocados:** `versão publicação/carrinho.html`,
`versão publicação/body-peptides.html`, `Portifolio/index.html`,
`Portifolio/data.json` (+ `data.js`), `versão publicação/index.html`,
`versão publicação/data.json` (+ `data.js`).

---
*Última atualização: 08/09/2026*

---

## 13. Metas de negócio — parâmetros de UX com impacto no negócio (17/09/2026)

A seção 9 (Entregáveis) e a tabela "Métricas e variáveis a testar" do
Portfolio (seção Status) já registravam métricas soltas por decisão. Esta
seção consolida essas métricas num framework único, pra deixar explícito
*que tipo* de impacto de negócio cada comportamento de usuário sugerido
pelo redesenho deveria mover — direto (dá pra instrumentar hoje, sem
inferência) ou indireto (efeito colateral esperado, mais difícil de
isolar de outras causas) [decisão de Franco, 17/09/2026]. Os valores-alvo
não foram medidos — o site redesenhado é um protótipo, não está em
produção real (ver "Nota de escopo" no topo deste arquivo) — então cada
indicador abaixo é uma variável a instrumentar, não um resultado já
obtido; a única exceção são os indicadores que citam dado já coletado
(benchmark de compliance, achados de Avaliação, follow-up heurístico),
marcados como tal.

### 13.1 Os 6 parâmetros

**Adoção** — o usuário chega a experimentar o que foi redesenhado.
- *Direto:* taxa de conversão visita→compra na PDP e no funil de carrinho
  redesenhados; taxa de resgate do Kit Experimentação (a isca de baixo
  risco criada especificamente pra destravar a 1ª compra); taxa de
  conversão de 1 clique Compra Única → Assinatura no carrinho.
- *Indireto:* crescimento de tráfego direto/orgânico atribuível à melhoria
  de findability — hoje resolvida só na PDP e no carrinho aprofundados,
  resposta ao achado crítico #1 da Avaliação (4/4 participantes não
  achavam o site) [fonte: docs/02_avaliacao.md]; taxa de uso da
  calculadora de consumo mensal como ponto de entrada de compra.

**Produtividade** — quão rápido e com quanto esforço o usuário completa a
tarefa.
- *Direto:* tempo até a decisão de compra (1ª visita à PDP até o
  add-to-cart); nº de etapas até o checkout completo — o carrinho
  cadenciado em 3 passos (Carrinho → Entrega → Pagamento) substitui um
  fluxo sem indicador de progresso; taxa de abandono por etapa do
  carrinho.
- *Indireto:* redução no volume/tempo de atendimento sobre dúvidas já
  cobertas no copy redesenhado (jargão "peptídeos", quantidade mínima);
  scroll depth necessário até a conversão — mede se os 13 blocos
  narrativos aumentam ou reduzem o esforço até a decisão.

**Custo de Operação** — o que o redesenho custa (ou economiza) pra operar
e manter.
- *Direto:* custo de aquisição por conversão, considerando o Kit
  Experimentação gratuito (limite 1/CPF) como investimento de aquisição;
  volume de tickets de atendimento sobre pontos já resolvidos no
  redesenho (ex.: unidade "fardo (6 latas)" nomeada desde a 1ª versão do
  carrinho, ao contrário do stepper ambíguo achado no site em produção —
  achado #2 do follow-up heurístico, 14/09/2026).
- *Indireto:* custo de manutenção do design system — tokens ainda
  duplicados entre `body-peptides.html` (`<style>` interno) e
  `shared/site-chrome.css`, pendência já registrada na seção 10; custo de
  devolução/troca atribuível a expectativa mal comunicada sobre
  quantidade ou cobrança.

**Risco** — exposição regulatória, legal e reputacional.
- *Direto:* nº de claims em risco alto/muito alto (ANVISA/EFSA) — **dado
  já coletado:** 0/35 na Welz vs. 6 em concorrentes [fonte:
  prototipo/auditoria_welz_electrolytes-AVALIAÇÃO DE APRENDIZADOS.html];
  achados críticos/altos ainda abertos no site em produção — **dado já
  coletado:** 23 achados no follow-up heurístico de 14/09/2026, 2
  críticos [fonte: docs/02_avaliacao.md, seção "Heurísticas de
  Usabilidade"]; risco de conformidade legal, ex.: Política de
  Privacidade do site em produção citando a marca errada ("LIVE!") e
  linkando pro site de outro cliente do grupo — achado #1 do mesmo
  follow-up.
- *Indireto:* risco reputacional de depoimentos fictícios na prova
  social — pendência explícita, seção 8 e seção 10; risco de churn nas
  páginas-esqueleto (Entrega, Pagamento, Conta), fora do redesenho
  aprofundado.

**Qualidade** — precisão, consistência e padrão percebido da experiência.
- *Direto:* taxa de erro/achados de usabilidade — **dado já coletado:**
  13 achados no Think Aloud, 5 críticos [fonte: docs/02_avaliacao.md],
  meta de redução após o redesenho; Core Web Vitals (LCP, CLS, INP) da
  PDP com as animações scroll-driven — ainda não medido em browser real
  (risco já registrado na seção 8); satisfação pós-compra (CSAT/NPS),
  ainda não instrumentado.
- *Indireto:* qualidade percebida da marca — efeito halo do grupo LIVE! e
  credibilidade científica exibida no comparativo; consistência de
  acessibilidade — `prefers-reduced-motion`, `aria-*`, navegação (FAQ,
  menu) intacta mesmo com animação desligada.

**Retenção** — se quem comprou uma vez continua comprando. Adicionado ao
conjunto original (Adoção, Produtividade, Custo de Operação, Risco,
Qualidade) porque o Kit Experimentação e a conversão pra Assinatura — os
dois pilares comerciais da fase 11 — só se justificam economicamente se
gerarem recompra, não só a 1ª conversão.
- *Direto:* taxa de recompra do fardo de 6 em até 60 dias após resgate do
  Kit Experimentação; taxa de retenção em Assinatura vs. cancelamento.
- *Indireto:* LTV por CPF, cruzado com o custo do Kit Experimentação
  gratuito — mede se a isca se paga; recorrência de acesso à Home
  dualizada — retorno pra considerar o segundo produto (Daily Hydration).

### 13.2 Correlação — decisão de design → parâmetro de negócio

| Decisão / seção do redesenho | Parâmetros correlacionados | Como se correlaciona |
|---|---|---|
| Arquitetura da informação — Home dualizada + menu único + carrinho em 3 etapas | Adoção · Produtividade | Reduz a barreira de descoberta (achado crítico #1, Think Aloud) e dá previsibilidade ao funil de checkout |
| PDP como landing narrativa — "peptídeos" só após a analogia "colágeno pré-quebrado" | Adoção · Qualidade | Reduz abandono por incompreensão do termo (achado crítico #2, 3/4 participantes) e eleva a clareza percebida do conteúdo |
| Kit Experimentação gratuito (4 latas, 2 sabores, limite 1/CPF) | Adoção · Custo de Operação · Retenção | Isca de baixo risco pra 1ª compra — só se justifica como custo de aquisição se converter em recompra do fardo de 6 |
| Desconto progressivo + conversão 1 clique Compra Única ↔ Assinatura | Adoção · Retenção | Objetivo comercial explícito da fase 11: aumentar ticket médio e abrir caminho pra receita recorrente |
| Calculadora de consumo mensal conectada ao carrinho | Produtividade · Adoção | Reduz o esforço de decidir a quantidade certa e converte a decisão direto em Assinatura, sabor a sabor |
| Comparativo científico Welz x concorrentes | Qualidade · Risco | Sustenta a credibilidade já identificada como ponto forte (0 riscos regulatórios vs. 6 em concorrentes) pro público técnico do CSD |
| Prova social + efeito halo do grupo LIVE! | Qualidade · Risco | Aumenta confiança percebida — mas os depoimentos ainda são fictícios, risco reputacional pendente |
| Micro-interações líquidas (flavor toggle, voo CTA, troca de card, feedback de adição) | Qualidade · Produtividade | Dá feedback perceptível de estado — resolve a ausência de retorno visual observada em teste real de mobile — sem abrir mão de performance (`prefers-reduced-motion`) |
| Indicador de progresso em 3 etapas no carrinho | Produtividade · Qualidade | Endereça a mesma classe de problema do achado #5 do follow-up heurístico (erro de checkout sem destaque claro), tornando o estado do fluxo sempre visível |
| Modal de aviso de escopo nas páginas-esqueleto | Risco · Qualidade | Comunica o limite de maturidade com transparência, evitando expectativa mal calibrada nas páginas ainda não aprofundadas |
| Pendência — padronização de design tokens (PDP vs. páginas novas) | Custo de Operação | Duplicação já reconhecida (seção 10) — custo de manutenção a resolver antes de qualquer escala do design system |
| Auditoria heurística de acompanhamento no site em produção (14/09) | Risco · Qualidade | O achado mais grave (Política de Privacidade com branding errado) e o stepper ambíguo mostram risco de conformidade e confiança reais, fora do escopo aprofundado — mas já evitados nas duas páginas redesenhadas |

De forma mais geral, além dessas correlações pontuais, a intenção
projetual por trás de quase toda escolha deste redesenho (menos fricção,
mais clareza de linguagem, mais feedback visível de estado) já mira
Adoção, Produtividade e Qualidade por padrão — mesmo nos pontos sem uma
métrica isolada capaz de provar isso ainda.

**Onde isso aparece no Portfolio:** `Portifolio/data.json`, seção
`status` — campos `businessGoals` (os 6 parâmetros com seus indicadores)
e `goalsCorrelationTable` (a tabela acima) [decisão de Franco,
17/09/2026].

---
*Última atualização: 22/09/2026*

---

## Histórico — exploração anterior (superada)

> Conteúdo original desta fase, sobre as landing pages "Gaseificada"/"Pó".
> Segundo esclarecimento de Franco em 29/08/2026, esta frente foi superada
> pela direção atual (Body Peptides), documentada nas seções acima.
> Preservado aqui como registro histórico — não editar sem necessidade.

> Status: ⚠️ PENDENTE — preencher manualmente
> sugestão: um dos dois protótipos de landing page (Gaseificada) já tem copy e estrutura finalizados, o outro (Pó) ainda é um esqueleto com placeholders — sugere fase em andamento, mas o status exato (🟡/🟢) é decisão do Franco
> Período: 11/08 — 17/08 (2026), com base nas datas de modificação dos arquivos de protótipo encontrados [fonte: datas de modificação de prototipo/auditoria_welz_electrolytes-AVALIAÇÃO DE APRENDIZADOS.html, prototipo/storyboard-bebidas-landing.md, prototipo/landing-bebidas/design-styles-welz.md, prototipo/landing-bebidas/gaseificada/index.html]
> sugestão: confirmar se esse é de fato o período da fase ou apenas o intervalo em que esses artefatos específicos foram produzidos/editados
> Responsável: Franco

### 1. Objetivo da fase

Criar o protótipo baseado nos estilos de marca já identificados, com páginas, elementos interativos e fluxo navegacional, acompanhado de um documento explicativo de defesa de design — cada decisão justificada com o que era antes, como foi melhorado, e qual carta do Baralho de Vieses foi usada e por quê [fonte: docs/00_briefing.md, seção "Fases do projeto", item 3; docs/_raw/notas-fases.md, seção "Redesign"].

### 2. Perguntas / Hipóteses

- O protótipo interativo consegue expressar de forma consistente os estilos de marca já identificados (cores, tipografia, componentes) extraídos do Figma? [fonte: docs/_raw/notas-fases.md, seção "Redesign" — "Criar protótipo baseado nos estilos identificados da marca"]
- As decisões de copy e design tomadas no redesign resolvem os problemas identificados na fase de Avaliação (findability, jargão "peptídeos", falta de flexibilidade, comunicação da proposta de valor)? [inferido do cruzamento entre docs/02_avaliacao.md e o conteúdo do protótipo]
- Qual carta do Baralho de Vieses justifica cada decisão de redesign tomada? [fonte: docs/_raw/notas-fases.md, seção "Redesign"]

### 3. Dados e fontes

| Fonte | Tipo | Tamanho amostral | Como foi coletado |
|---|---|---|---|
| Storyboard de 4 atos para as landing pages de bebidas (Gaseificada e Pó) | Qualitativo/design | 2 produtos, 4 sabores mapeados | Storyboard-first no Figma, documentado em markdown [fonte: prototipo/storyboard-bebidas-landing.md] |
| Design tokens extraídos do Figma | Estruturado (cor, tipografia, espaçamento, raio, largura) | 6 pranchetas mapeadas (home, produto/PDP, home#ciência, porquewelz, checkout1, checkout) | Extração via variáveis e código de referência do arquivo Figma "welz" (projeto Live! Experience) — "não são valores inventados" [fonte: prototipo/landing-bebidas/design-styles-welz.md] |
| Benchmarking científico e regulatório Welz vs. concorrentes | Quantitativo/estruturado | 588 alegações mapeadas (553 de concorrentes + 35 da Welz); 10 concorrentes mapeados via crawler, 8 com conteúdo minerável | Reaplicação da árvore de decisão de 6 níveis (Grade A–E) da auditoria original sobre o copy ao vivo da Welz e de 10 concorrentes; achados conferidos manualmente linha por linha [fonte: prototipo/auditoria_welz_electrolytes-AVALIAÇÃO DE APRENDIZADOS.html] |
| Protótipo interativo em HTML/CSS/JS | Artefato de design/código | 2 landing pages (Gaseificada, Pó) | Implementação com GSAP + ScrollTrigger sobre o esqueleto definido no storyboard [fonte: prototipo/landing-bebidas/gaseificada/index.html; prototipo/landing-bebidas/po/index.html; prototipo/landing-bebidas/CLAUDE.md] |

### 4. Métodos aplicados

- **Análise:** reaproveitamento direto dos achados da fase de Avaliação no copy do protótipo — por exemplo, o headline do Ato 2 da landing Gaseificada ("Tecnologia patenteada alemã, escondida atrás de um simples 'tsc'") evita o termo "peptídeos", identificado nas entrevistas Think Aloud como incompreensível para 3/4 participantes [fonte: prototipo/landing-bebidas/gaseificada/index.html:61; docs/02_avaliacao.md]; tabela comparativa de atributos entre Welz e categorias concorrentes ("bebida com colágeno comum", "whey de caixinha") na seção de prova social [fonte: prototipo/landing-bebidas/gaseificada/index.html:108-175]; reaplicação da mesma árvore de decisão de 6 níveis (Grade A–E) de classificação científica/regulatória usada na auditoria original, agora comparando o copy da Welz com 10 concorrentes [fonte: prototipo/auditoria_welz_electrolytes-AVALIAÇÃO DE APRENDIZADOS.html]
- **Ferramentas:** Figma (extração de design tokens), html.to.design (cópia de páginas reais) [fonte: docs/00_briefing.md]; HTML/CSS/JS puro; GSAP + ScrollTrigger para animação de scroll com pin/scrub por ato [fonte: prototipo/landing-bebidas/CLAUDE.md]; Gemini 2.5 Flash Image ("Nano Banana") para geração de assets visuais a partir de fotos reais do produto [fonte: prototipo/landing-bebidas/assets/PROMPTS.md]
- **Justificativa da escolha do método:** ⚠️ PENDENTE — preencher manualmente
  sugestão: não há, nas fontes localizadas, uma justificativa explícita de por que o formato de scroll-storytelling em 4 atos (em vez de outro formato de landing page) foi escolhido para as duas bebidas.

### 5. Resultados

- A landing **"Gaseificada"** está com copy finalizado nos 4 atos (headlines reais, não placeholders), incluindo tabela comparativa de atributos, seção prática ("Modo de uso"/"Conservação") e FAQ [fonte: prototipo/landing-bebidas/gaseificada/index.html].
- A landing **"Pó"** ainda está em esqueleto: headlines com placeholder (`[Headline do Ato N]`) e camadas de asset ainda em comentário, não substituídas [fonte: prototipo/landing-bebidas/po/index.html].
- O benchmarking científico confirmou que o claim de risco alto identificado na fase de Avaliação ("Welz hidrata 50% mais que a água pura") **não existe mais no copy ao vivo do site**, confirmado por nova varredura de conteúdo [fonte: prototipo/auditoria_welz_electrolytes-AVALIAÇÃO DE APRENDIZADOS.html — "Achado central"].
- O mesmo benchmarking mapeou **6 achados de risco alto/muito alto confirmados em concorrentes** (contra **0/35 na Welz**), entre eles: extrapolação de "hidratação 3x mais rápida" (Aguanacaixa, repetida em ~11 páginas), hipérbole de "hidratação a nível celular" (Liquidz), e uma alegação de desintoxicação pelo suor (Liquidz, classificada como risco muito alto/vedação direta pela ANVISA) [fonte: prototipo/auditoria_welz_electrolytes-AVALIAÇÃO DE APRENDIZADOS.html].
- O documento também identificou **3 oportunidades de diferenciação científica** para orientar o copy do redesign: expandir o "Portal de Evidências" (citação de estudo/autor/N) para todos os produtos com claim técnico; reposicionar a ausência de açúcar como vantagem (não limitação); e tornar a precisão de dose um padrão editorial em todo o catálogo, não só na página de ciência do colágeno [fonte: mesmo arquivo, seção "Oportunidades de Diferenciação Científica"].

### 6. Referências e fundamentação de design

- Design tokens extraídos diretamente do arquivo Figma "welz" (projeto Live! Experience) como fonte de verdade da identidade visual da marca [fonte: prototipo/landing-bebidas/design-styles-welz.md]
- Mesma árvore de decisão de 6 níveis (Grade A–E) de classificação científica/regulatória usada na auditoria original, reaplicada no benchmarking competitivo [fonte: prototipo/auditoria_welz_electrolytes-AVALIAÇÃO DE APRENDIZADOS.html]
- ANVISA RDC nº 243/2018 (requisitos sanitários de suplementos), RDC nº 429/2020 (rotulagem nutricional), IN nº 28/2018 (alegações de propriedade funcional) [fonte: mesmo arquivo, seção "Referências"]
- Maughan et al. (2016) — beverage hydration index; Jendricke et al. (2019), Zdzieblik et al. (2015/2021), Paul, Leser & Oesser (2019) — estudos sobre peptídeos de colágeno [fonte: mesmo arquivo, seção "Referências"]

⚠️ PENDENTE — preencher manualmente
sugestão: nenhuma citação ao Baralho de Vieses foi encontrada associada a uma decisão específica do protótipo atual — as notas exigem que cada decisão de redesign cite a carta de viés usada, mas essa associação não está registrada em nenhum arquivo do protótipo.

### 7. Decisões tomadas

| Decisão | Justificativa (dado/referência) | Alternativas descartadas |
|---|---|---|
| Remover cifras de multiplicação/comparação direta do copy (ex: "Welz hidrata 50% mais que a água pura") | Extrapolação do estudo de Maughan (2016)/mecanismo SGLT-1, que não se aplica à fórmula sem açúcar da Welz; risco de publicidade comparativa irregular sob RDC 243/2018 [fonte: prototipo/auditoria_welz_electrolytes-AVALIAÇÃO DE APRENDIZADOS.html — "Reforça a decisão já tomada pela Welz de remover cifras de multiplicação/comparação direta do copy"] | ⚠️ PENDENTE — não há registro das alternativas descartadas |
| Nomear a tecnologia do colágeno como "tecnologia patenteada alemã" no headline do Ato 2, em vez do termo técnico "peptídeos" | Responde ao achado de Avaliação de que 3/4 participantes das sessões Think Aloud não compreendem o termo "peptídeos" [fonte: prototipo/landing-bebidas/gaseificada/index.html:61; docs/02_avaliacao.md] | ⚠️ PENDENTE — não há registro das alternativas descartadas |
| Estrutura de 2 landing pages (não 4), com o seletor de sabor vivendo apenas dentro do Ato 3, sem trocar de página | Registrada como decisão de arquitetura "fechada" do projeto | [fonte: prototipo/landing-bebidas/CLAUDE.md, seção "Decisões já fechadas (não reabrir sem motivo novo)"] — alternativa descartada explícita: 4 landing pages separadas (uma por sabor) |

### 8. Riscos e premissas

- **Risco técnico:** a animação do Ato 4 depende do `MotionPathPlugin` do GSAP, um plugin pago/separado — decisão de uso ainda em aberto; se inviável, precisa ser substituída por animação simples de `x`/`y`/`opacity` [fonte: prototipo/landing-bebidas/CLAUDE.md; prototipo/README.md]
- **Premissa não resolvida:** o token `--font-display` em `tokens.css` é um placeholder comentado como pendente — ainda não decidido entre Georgia (serifada, editorial) ou Fira Code Light (mono), as duas famílias reais identificadas na extração do Figma [fonte: prototipo/landing-bebidas/design-styles-welz.md]
- **Risco de lançamento desigual:** a landing "Pó" está significativamente menos avançada que a "Gaseificada" (ainda em esqueleto com placeholders), o que pode gerar assimetria se o lançamento dos dois produtos for simultâneo [fonte: prototipo/landing-bebidas/po/index.html]
- **Risco de performance:** falta lógica de preload dos assets pesados (SVGs de fruta, silhueta do corpo), o que pode causar pop-in visual durante scroll rápido [fonte: prototipo/README.md]
- **Risco regulatório de conteúdo não comercial:** o achado mais grave do benchmarking (alegação de desintoxicação pelo suor) veio de um artigo de blog de um concorrente — área que, segundo o próprio documento, "costuma escapar da revisão regulatória por 'não vender diretamente'" — vale garantir que o blog da Welz também passe pela mesma auditoria de compliance aplicada às páginas de produto [fonte: prototipo/auditoria_welz_electrolytes-AVALIAÇÃO DE APRENDIZADOS.html]

### 9. Entregáveis desta fase

- [x] Protótipo interativo em HTML/CSS/JS da landing "Gaseificada" — copy finalizado nos 4 atos, tabela comparativa, seção prática, FAQ [fonte: prototipo/landing-bebidas/gaseificada/index.html]
- [~] Protótipo esqueleto da landing "Pó" — estrutura e lógica de sabor prontas, copy e assets ainda placeholder [fonte: prototipo/landing-bebidas/po/index.html] (entregável parcial)
- [x] Storyboard completo dos 4 atos, com tabela de sabores e paleta cromática por variante [fonte: prototipo/storyboard-bebidas-landing.md]
- [x] Extração de design tokens do Figma (cores, tipografia, espaçamento, raio de borda, larguras de container) [fonte: prototipo/landing-bebidas/design-styles-welz.md]
- [x] Documento de benchmarking científico e regulatório Welz vs. 10 concorrentes, com recomendações editoriais [fonte: prototipo/auditoria_welz_electrolytes-AVALIAÇÃO DE APRENDIZADOS.html]
- [ ] Documento explicativo de defesa de design (cada decisão com justificativa e carta do Baralho de Vieses aplicada) — mencionado nas notas, não localizado no repositório [fonte: docs/_raw/notas-fases.md] — ⚠️ PENDENTE
- [ ] Fluxo navegacional completo do site (além das 2 landing pages de bebida) — não localizado no repositório — ⚠️ PENDENTE

### 10. Próximos passos

- [ ] Completar copy e assets da landing "Pó" (hoje só esqueleto com placeholders) [fonte: prototipo/landing-bebidas/po/index.html]
- [ ] Resolver a pendência de `--font-display` em `tokens.css` (Georgia vs. Fira Code Light) [fonte: prototipo/landing-bebidas/design-styles-welz.md]
- [ ] Decidir sobre o uso do `MotionPathPlugin` (GSAP pago) no Ato 4, ou substituir por animação simples [fonte: prototipo/landing-bebidas/CLAUDE.md; prototipo/README.md]
- [ ] Implementar lógica de preload dos assets pesados antes de ir para produção [fonte: prototipo/README.md]
- [ ] Produzir o documento explicativo de defesa de design, citando qual carta do Baralho de Vieses justifica cada decisão [fonte: docs/_raw/notas-fases.md]
- [ ] Expandir o painel de citação de estudo (autor/ano/periódico/N) para todos os produtos com claim técnico, incluindo Daily Hydration, e auditar também o conteúdo de blog/educativo [fonte: prototipo/auditoria_welz_electrolytes-AVALIAÇÃO DE APRENDIZADOS.html, seção "Recomendações Finais"]

---
*Última atualização (histórico): 18/08/2026*