---
fonte: 01-canonicos/seed-componentes.md
versao_da_fonte: v1.43
secao: 47
titulo: "Página institucional — esqueleto, camada de máquina e blocos de conteúdo — **`estável`** (v0.55) · MK1–MK22 · pattern F6 · suíte `suite-site.mjs` 66/66 ✓ · render 23/0 · contraste 42/0 · **gate visual aprovado 2026-08-12 — FECHA O BLOCO 6B**"
sequencia: 49 de 98
bytes_do_corpo: 29484
md5_do_corpo: 78b1606a91ecdfbc09bf7dfe21dc7592
gerado_por: 06-validacao/geradores/gen-camada-ia.py
nota: fatia GERADA — o corpo abaixo é byte a byte o trecho do canônico; edite o canônico, nunca esta fatia. Canônico inteiro em https://ds.seed.eng.br/01-canonicos/seed-componentes.md
---
## 47. Página institucional — esqueleto, camada de máquina e blocos de conteúdo — **`estável`** (v0.55) · MK1–MK22 · pattern F6 · suíte `suite-site.mjs` 66/66 ✓ · render 23/0 · contraste 42/0 · **gate visual aprovado 2026-08-12 — FECHA O BLOCO 6B**

> **Natureza:** pattern de **COMPOSIÇÃO** do F6, como o §46 e o §33 — nenhum componente novo
> nasce. Consome o botão (§1), o formulário (Bloco 2), o breadcrumb (§36), o menu como
> *disclosure de links* (§35/MN1), o accordion (§29) e a iconografia (§45).
>
> **O QUE ESTE LOTE ENTREGA E O QUE NÃO ENTREGA.** O bloco 6B foi dividido em dois lotes por
> decisão do Rafael em 2026-08-12, porque o conteúdo se encaixa **dentro** do esqueleto e a ordem
> inversa obrigaria a redesenhar. **Lote 1 (esta seção):** contrato dos tipos de página,
> cabeçalho institucional, rodapé, o padrão de **página de serviço autônoma** e a **camada de
> máquina** (título, descrição, canônica, dados estruturados, orçamento de peso). **Lote 2 (§47.5,
> escrito em 2026-08-12):** hero, prova social, números, card de solução, depoimento, case em
> vídeo, FAQ e bloco de contato por serviço — **MK13 a MK22**. **O preview e o gate visual do 6B são únicos, no fim do lote 2** —
> decisão do Rafael: um esqueleto sem conteúdo pareceria cru e o gate visual precisa de uma página
> de verdade.
>
> **PRINCÍPIO HERDADO DO §46, e que vale igual aqui: CONTRATO POR REGIÃO, COMPOSIÇÃO LIVRE.** As
> regiões e os tipos de página são especificados; **quais páginas existem, quais serviços ganham
> página e o que cada uma diz é decisão do projeto do site — não do Design System.**
>
> **Escopo do produto, decidido em briefing antes da pesquisa (2026-08-12):** o site institucional
> **nasce mobile-first** — é onde está o acesso em massa. O site **informa para converter**: cada
> parte é estruturada para o visitante reconhecer a própria dor e pedir contato **para aquele
> serviço**, e o Rafael quer **direcionar tráfego pago para a página do serviço sem precisar criar
> landing page separada** (o que não impede ter landing pages depois). **Formulário por serviço**,
> não um formulário geral. **Foco B2B**, com exceção de energia solar, que atende também B2C. O
> site novo é **ruptura visual declarada**, reaproveitando conteúdo, algumas imagens e a estrutura
> de mega menu do site atual.
>
> **FRONTEIRA REGISTRADA PARA NÃO VOLTAR (Rafael, 2026-08-12):** o site será **construído do
> zero**; o site atual não será corrigido. Logo, **dívida técnica, nome de pasta, slug e erro de
> digitação do site atual estão FORA DE ESCOPO.** O `estudo-site-atual.md` serve como inventário
> de conteúdo e **diagnóstico de padrão a não repetir** — não como lista de correções.
>
> **Base (3 rodadas encadeadas, 2026-08-12):** **R1 canon interno** — o §46 inteiro (SH2
> landmarks nomeados, SH5 ativo que sobrevive ao grayscale, SH7 foco na troca de rota, SH8 skip
> link) migra sem alteração; MN1 (navegação é *disclosure de links*, nunca `role="menu"`); DF4
> (grayscale como gate estrutural); o pacote mobile v1.2; e o **`estudo-site-atual.md` v1.0**
> (canônico de referência, ancorado no `MANIFESTO.md` v2.6), que forneceu a linha de base medida
> citada nas decisões abaixo. **R2 mercado** — corpus de página de conversão B2B de 2026:
> essencial acima da dobra em desktop e mobile, cada seção como mini-ponto de conversão, prova
> junto do CTA, e o dado incômodo de que página sem barra de navegação converte **até 2×** mais em
> teste controlado. **R3 normas** — schema.org (`Organization`, `LocalBusiness` e subtipos,
> `Service` com `serviceType`/`areaServed`/`provider`, `BreadcrumbList`, `FAQPage`), a regra do
> Google de **nunca marcar o que não está visível ao usuário**, o orçamento de peso de referência
> para mobile e as metas de campo de Core Web Vitals. Consolidado aprovado pelo Rafael em
> 2026-08-12.

### 47.1 A linha de base medida — o que NÃO repetir

Números do `estudo-site-atual.md`, produzidos por leitura do backup do site atual. Não são
crítica ao site antigo: são o **piso** contra o qual o novo é medido, e a razão de várias
decisões abaixo existirem como regra explícita em vez de ficarem implícitas.

| Medida | Site atual |
|---|---|
| Tags `<img>` com `alt` | **0 de 419** |
| Páginas com `<h1>` real | **16 de 22** (as outras usam classe CSS para *parecer* título) |
| Tags `<nav>` no site inteiro | **0** |
| Título e descrição próprios por página | **0** — a classe `SetSeo` existe e nunca é instanciada |
| Dados estruturados, Open Graph, canônica | **0 de cada** |
| Páginas institucionais no sitemap | **0 de 22** |
| Zoom | **bloqueado** (`maximum-scale=1, user-scalable=no`) em toda página |
| Peso | esqueleto fixo de **~2,5 MB**, com páginas de até **8,8 MB** de mídia |

**Diagnóstico central do estudo, e o que ele ensina:** o servidor devolve o **mesmo HTML vazio
para qualquer URL** — o roteamento nunca lê a URL pedida — e o conteúdo só chega numa segunda
requisição feita por JavaScript. *Lição de padrão:* **a página tem de existir na primeira
resposta.** Isso não é escolha de plataforma (que é do projeto do site); é requisito de padrão.

### 47.2 Decisões MK1–MK12

| # | Decisão | Porquê | Descartado |
|---|---|---|---|
| **MK1** | **Quatro tipos de página, cada um com contrato próprio:** **institucional** (quem somos, carreira) · **serviço** (autônoma, ver MK8) · **conteúdo** (artigo, vídeo, case) · **utilitária** (contato, obrigado, erro, legal) | O site atual tem 22 páginas **sem tipagem nenhuma** — mesmo esqueleto e mesmo título para todas, o que é a causa de o título genérico nunca ter incomodado ninguém: não havia onde declarar outro | Contrato único para tudo (produziu exatamente o site atual) · tipagem por assunto em vez de por comportamento (assunto muda, comportamento não) |
| **MK2** | **Toda página declara: um `<h1>` único e REAL · `<title>` próprio · meta descrição própria · URL canônica · `lang="pt-BR"`** | Linha de base: 6 de 22 páginas sem `<h1>` real, e **nenhuma** com título ou descrição próprios. *Classe de defeito a evitar:* **capacidade construída e nunca ligada** — a classe `SetSeo` do site atual estava pronta e nunca foi instanciada, o que é pior que não existir, porque parece resolvido | `<h1>` simulado por classe CSS (quebra 1.3.1 e a hierarquia de leitura) · título por template genérico |
| **MK3** | **Toda `<img>` de conteúdo tem `alt` descritivo; decorativa tem `alt=""` EXPLÍCITO** | 419 tags, zero `alt`, e **nem a distinção** entre conteúdo e decoração sendo feita. O `alt=""` explícito é o que diz ao leitor de tela "pule isto de propósito" — omitir o atributo faz o leitor tentar adivinhar pelo nome do arquivo | `alt` opcional · `alt` gerado do nome do arquivo |
| **MK4** | **Zoom NUNCA é bloqueado.** `maximum-scale` e `user-scalable=no` são proibidos | Está no ar hoje em todas as páginas, e o público massivo é celular. Bloquear zoom não é preferência estética: é impedir alguém de ler | — (não há caso legítimo) |
| **MK5** | **Toda região de navegação é `<nav>` com nome acessível único**, e o nome não contém a palavra "navegação" | Zero `<nav>` no site inteiro. Herda o **SH2** do §46 sem alteração — a página institucional tem cabeçalho, mega menu, trilha e rodapé, todos navegação | `div`/`ul` genérico · `nav` anônimo |
| **MK6** | **Cabeçalho institucional em TRÊS MODOS:** **completo** (institucional e conteúdo: itens de nível 1 expostos + mega menu) · **reduzido** (**serviço**: logo + uma ação primária + gatilho do mega menu, sem os itens de nível 1 expostos) · **mínimo** (utilitária: logo e saída) | **Resolve um conflito medido.** Página sem barra de navegação converte **até 2×** mais em teste controlado, e a recomendação de mercado é remover a navegação da página de conversão. Mas a página de serviço **precisa pertencer ao site** — é isso que evita manter landing pages paralelas, que é o requisito do Rafael. O modo reduzido mantém a navegação a um toque **sem competir com o CTA** | Remover a navegação (a página deixa de pertencer ao site e você mantém duas coisas) · cabeçalho completo na página de serviço (paga o custo de conversão sem necessidade) |
| **MK7** | **Mega menu: *disclosure de links*, nunca `role="menu"`.** Máximo **2 colunas**, cada grupo com título próprio, imagem opcional por item | O **MN1** já decidiu a fronteira semântica das quatro saídas, e o §46 já consome a saída *disclosure*. O teto de 2 colunas vem do inventário: o mega menu atual usa 3 grupos, e o único com 2 colunas é "soluções" — que é o caso real de agrupamento duplo (técnicas + fotovoltaico por segmento) | `role="menu"` (anti-padrão testado, corpus Roselli/APG) · 3+ colunas (o inventário não sustenta a necessidade) |
| **MK8** | **PÁGINA DE SERVIÇO AUTÔNOMA, em cinco movimentos: conversão → dor → prova → escopo → conversão.** Precisa se sustentar para quem cai de anúncio, sem contexto anterior. **Um sinal mínimo de prova acompanha o CTA de topo — um número, não parede de logos.** **O formulário existe UMA VEZ; o CTA do fim é âncora que leva até ele** | Sequência definida pelo Rafael. Dor → prova → escopo é **PAS** (problema, agitação, solução), o mesmo framework que a skill `seed-ds-mensagem` já usa; a conversão vem **antes** porque quem chega de tráfego pago já está no meio do PAS — fazer essa pessoa rolar para achar o formulário friciona quem já está pronto, e quem não está rola e encontra a explicação. O sinal de prova no topo tem número: **contagem de clientes nomeada acima da dobra produziu +22%**, o maior ganho de qualquer formato de prova testado. **Formulário único** porque duplicá-lo cria duas fontes de verdade, duas medições e o erro clássico de a pessoa preencher o de baixo depois que o de cima já falhou | Dor → prova → escopo → conversão (minha proposta inicial: friciona quem já decidiu) · dois formulários na mesma página · parede de logos e metodologia no topo |
| **MK9** | **Variante de PÚBLICO dentro da página de serviço, não página duplicada.** No fotovoltaico o recorte é por **SEGMENTO** — casa, comércio, indústria, área rural | Achado do estudo: **o site atual já resolve exatamente assim**, com quatro páginas por segmento. Segmento é mais operacional que "B2B/B2C" — o visitante se reconhece em "na minha indústria", não em "sou B2B" | Duas páginas B2B/B2C do mesmo serviço (competem entre si no buscador e dobram a manutenção) · uma página tentando falar com os dois ao mesmo tempo |
| **MK10** | **Dados estruturados por TIPO de página:** `Organization` na home e na institucional · **`Service` em cada página de serviço**, com `serviceType`, `areaServed` e `provider` apontando para a `Organization` · `BreadcrumbList` onde há trilha · `FAQPage` **só onde há FAQ real e visível** | O schema.org tem o tipo `Service` exatamente para isto, e página de serviço é onde a maioria subimplementa. A regra do Google é dura: **nunca marcar conteúdo que não está visível ao usuário** — marcação fabricada é pior que marcação ausente | `LocalBusiness` em toda página (dilui o sinal de entidade) · `FAQPage` sem FAQ visível na página |
| **MK11** | **`areaServed` declara MG, ES e BA.** A marcação **nunca afirma sede onde não há** | A orientação é explícita: um negócio não deve fingir ter instalações de onde não opera de fato. A SEED atende três estados a partir de duas bases | Uma `LocalBusiness` por município atendido (fabricaria presença física e é o erro mais comum de marcação local) |
| **MK12** | **Orçamento de peso por página, MEDIDO no gate:** HTML < 50KB · CSS < 60KB · JS < 150KB comprimido · imagens acima da dobra < 200KB. **Metas de campo:** LCP < 2,5s · INP < 200ms · CLS < 0,1. **Toda imagem, vídeo e iframe com dimensão explícita** | Orçamento de referência para mobile, e as metas são os limiares de "bom" avaliados no percentil 75 de usuários reais. Dimensão explícita é o que impede o deslocamento de layout. Linha de base: esqueleto fixo de 2,5 MB e páginas de até 8,8 MB de mídia | Orçamento aspiracional sem medição no gate (não é orçamento, é desejo) |

### 47.3 Anatomia e fronteiras

**Cabeçalho:** herda a zona de identidade/ações do SH10 (§46), mas **não** é o shell de aplicação
— não há rail nem sidebar contextual. **Rodapé:** navegação secundária em `<nav>` nomeado,
identificação da empresa e links legais; é o lugar canônico do que não merece o cabeçalho.
**Conteúdo:** um `<main>` por página, com `tabindex="-1"` se houver troca de rota sem recarga
(herda o **SH7**). **Skip link** como primeiro focável (herda o **SH8**).

**Nenhum par de cor novo** — o lote 1 é esqueleto e camada de máquina; a cor entra com os blocos
de conteúdo, no lote 2, e é lá que a medição de contraste tem objeto.

**Fora do escopo deste lote, declarado:** hero, prova social, números, card de solução,
depoimento, case em vídeo, FAQ e bloco de contato (**lote 2**) · copy de qualquer página
(**projeto do site**) · quais serviços ganham página e o que o formulário pergunta (**projeto do
site**) · escolha de plataforma e de framework (**projeto do site**) · `llms.txt`, `robots`
liberando rastreadores de IA, presença no índice Bing e validação de pré-renderização (**Fase
8**, ver a precisão de fronteira abaixo) · dívida do site atual (**fora de escopo por decisão**).

> **PRECISÃO DE FRONTEIRA COM A FASE 8, aprovada pelo Rafael em 2026-08-12.** O
> `seed-ds-roadmap.md` colocava toda a camada GEO na **F8**. Cumprir isso ao pé da letra faria o
> 6B escrever os padrões de página **sem** a camada de máquina — e o site novo poderia ser
> construído antes da F8, repetindo o defeito que o estudo acabou de medir. A divisão fica:
> **o que é CONTRATO DE PÁGINA vem para o 6B** (título, descrição, canônica, dados estruturados
> daquela página, orçamento de peso); **o que é PUBLICAÇÃO E DESCOBERTA fica na F8** (`llms.txt`,
> `robots` para rastreadores de IA, índice Bing, site do DS, validação de pré-renderização).
> Não é supersede: nenhuma decisão da F8 deixa de valer — o 6B diz *o que toda página tem*, a F8
> diz *como o conjunto é publicado*.

### 47.5 Lote 2 — blocos de conteúdo · MK13–MK22

> **Escrito em 2026-08-12**, depois do lote 1 (MK1–MK12) e com o mesmo princípio: **contrato por
> bloco, composição livre**. O que cada bloco *diz* é do projeto do site; o que ele *é* está aqui.
>
> **Base adicional deste lote (R2/R3, 2026-08-12):** corpus de prova social em página de conversão
> B2B; documentação do Lighthouse e do web.dev sobre o **padrão fachada** para incorporação de
> terceiros; comparações de peso de incorporação de vídeo; e a **deprecação dos resultados ricos de
> FAQ pelo Google em 7 de maio de 2026**, que trocou o racional de uma decisão do lote 1 (ver a
> errata no fim desta seção).

| # | Decisão | Porquê | Descartado |
|---|---|---|---|
| **MK13** | **HERO: um `<h1>` real, uma promessa, um CTA, um visual.** Ficam **fora** do hero: história da empresa, parede de logos e metodologia | O essencial precisa caber numa tela, no desktop e no celular. O hero é a única região onde a **regra do um** (§1.12) vale para tudo ao mesmo tempo | Carrossel de hero (o visitante vê um slide e vai embora; os demais são custo sem leitura) · dois CTAs concorrentes |
| **MK14** | **PROVA SOCIAL EM DOIS NÍVEIS: mínima** no topo — **um número nomeado, junto ao CTA** — e **completa** abaixo (logos, depoimentos, cases) | Contagem de clientes nomeada acima da dobra produziu **+22%**, o maior ganho entre os formatos de prova testados. Parede de logos no topo não converte e ainda rouba a atenção do CTA | Prova só no fim da página · parede de logos acima da dobra · prova genérica ("milhares de clientes") |
| **MK15** | **NÚMEROS declaram fonte e data.** Número sem procedência não entra na página | O site atual afirma números que o banco de dados não sustenta: a tabela de depoimentos está **vazia** e o portfólio é **100% dado de demonstração** (`estudo-site-atual.md`). Numa página de engenharia, número inventado é risco de responsabilidade, não enfeite | Números redondos sem origem · número atualizado à mão sem data (envelhece em silêncio) |
| **MK16** | **CARD DE SOLUÇÃO: título + uma linha de dor + link-com-seta.** Não é mini-anúncio; é uma **porta** | Herda o **A10** do `estudo-viver-de-ia.md` (link-com-seta como terceiro nível de ação, abaixo de primário e secundário). Card com botão compete com o CTA da página e dilui o único objetivo dela | Card com botão primário · card com parágrafo (vira página dentro da página) |
| **MK17** | **DEPOIMENTO exige atribuição: nome, cargo e empresa.** Sem os três, é texto, não prova. Depoimento **nunca** é gerado nem ilustrativo | O site no ar hoje exibe depoimentos que são **copy de exemplo do CMS**. Em B2B, depoimento anônimo tem valor **negativo**: sinaliza que não houve autorização, e o leitor lê isso | Só o primeiro nome · avatar genérico de banco de imagens · depoimento sem empresa |
| **MK18** | **CASE É PEÇA ENDEREÇÁVEL: página própria no domínio da SEED**, com título, cliente, solução, resultado e vídeo | Requisito do Rafael: mandar o link do case direto ao cliente na conversa. **Link do domínio da SEED constrói a autoridade da SEED**; link do YouTube constrói a do YouTube. E case sem endereço próprio não é enviável | Case como item de lista sem âncora (não dá para mandar o link) · enviar o link do YouTube |
| **MK19** | **VÍDEO POR PADRÃO FACHADA, COM MEDIÇÃO — E NEUTRO EM FORNECEDOR.** Contrato de quatro cláusulas: **(a)** miniatura estática + botão de play, e **nada de terceiro carrega antes do clique**; **(b)** ao carregar, o player emite **início e marcos de 25/50/75/100%**; **(c)** a página que hospeda o bloco vive **no domínio da SEED** (MK18); **(d)** se o fornecedor exibir sugestões ao fim da reprodução, elas ficam **restritas ao próprio canal da SEED** — e, quando o fornecedor não permitir sequer isso, o bloco declara a limitação em vez de fingir que a controla. **O Design System NÃO escolhe fornecedor de vídeo** | A incorporação padrão custa centenas de KB de JavaScript, abre várias conexões e disputa a linha principal **mesmo que ninguém clique**; o `loading="lazy"` nativo **apenas adia** o custo. A fachada carrega ~**224×** mais rápido e é a recomendação explícita do Lighthouse. *A medição não briga com a fachada:* só quem clica é medível de qualquer forma, então adiar o player não perde dado nenhum. **Neutralidade de fornecedor decidida pelo Rafael em 2026-08-12:** quem serve o arquivo — YouTube, hospedagem dedicada de plataforma de curso, ou servidor próprio — é decisão de **produto**, revisável sem tocar no padrão. O que o DS garante é o comportamento na página. *Sobre a atribuição por pessoa, que parecia depender do fornecedor:* **não depende** — como a página é da SEED e o colaborador está autenticado nela, a página atribui o progresso; o player só precisa emitir os eventos | Incorporação direta · `loading="lazy"` como solução (adia, não elimina) · fachada sem API (seria performance sem medição, e o requisito é medir) · **exigir hospedagem dedicada** (resolveria os relacionados e os cookies, mas amarra o padrão a uma mensalidade e a um fornecedor, para um ganho que o caso da SEED não pede) · **proibir o YouTube** (custo zero e medição atendida; o único preço real é a grade de sugestões do próprio canal) |
| **MK20** | **FAQ: accordion §29, perguntas reais, com `FAQPage` marcado — pela CAMADA DE MÁQUINA, não pelo Google** | **Os resultados ricos de FAQ deixaram de aparecer no Google em 7 de maio de 2026**, inclusive para os sites de governo e saúde que eram a última exceção desde 2023. A marcação **continua válida** e segue sendo lida por Bingbot — cuja base alimenta a busca do ChatGPT e o Copilot —, pelo PerplexityBot e por indexadores de assistente de voz. Para uma empresa que quer ser citada quando alguém pergunta a um modelo sobre subestação em Minas, **isso vale mais que o dropdown que morreu**. Vale a regra do lote 1: **só com FAQ visível na página** | FAQ inventada para render marcação (foi o abuso que matou o recurso) · remover a marcação porque o dropdown acabou (confunde recurso de busca com leitura de máquina) |
| **MK21** | **BLOCO DE CONTATO POR SERVIÇO, dentro da página, com o mínimo de campos que qualifica.** É o **único** formulário da página (MK8) | Cada campo a mais reduz conversão, mas o caso da SEED pede qualificação — então o mínimo é **por serviço**, não universal. Um formulário de fotovoltaico residencial e um de subestação não perguntam a mesma coisa | Formulário universal (não qualifica) · formulário em página separada (perde a intenção no caminho) · dois formulários na mesma página |
| **MK22** | **O BLOCO DE VÍDEO É O MESMO no site e na plataforma de treinamento interna.** Um contrato, dois consumidores: página de case (externo) e aula (interno) — mesma fachada, mesmos eventos, mesma medição | O Rafael descreveu os dois usos na mesma frase, e são **o mesmo objeto**: vídeo empacotado no domínio da SEED, com progresso medido. Dois componentes divergiriam em seis meses e mediriam diferente, o que impede comparar | Player próprio para o treinamento (duplica manutenção e cria duas medições incomparáveis) |

> **ERRATA MK-E1 — contra o racional do MK10, no lote 1.** O MK10 mandou marcar `FAQPage` sem
> dizer para quê, e a suposição implícita era o **resultado rico** do Google — que **não existe
> mais desde 7 de maio de 2026**. **A decisão permanece; o racional muda:** a marcação serve à
> camada de máquina (Bing, e por consequência a busca do ChatGPT e o Copilot; Perplexity;
> indexadores de assistente), não à aparência na busca do Google. *Classe de defeito:* **decisão
> certa pelo motivo errado** — sobrevive ao teste enquanto o motivo não é questionado, e cai junto
> com ele. Parente da E19 da Fase 5 (regra herdada de outro consumidor sem remedir o contexto).

> **ERRATA MK-E2 — capacidade AFIRMADA e não VERIFICADA, contra a 1ª redação do MK19.** A
> primeira versão mandava **"vídeos relacionados desligados ao fim"**, com o racional de que a
> grade final poderia levar o cliente a um concorrente dentro da própria página de case. **A
> capacidade não existe no YouTube:** desde 2018 o parâmetro que servia para desligar passou a
> apenas **restringir as sugestões ao mesmo canal** — não há como removê-las. O risco real é,
> portanto, muito menor do que o racional supunha (as sugestões são do canal da SEED, não de
> concorrentes), mas **a spec afirmava um controle que o meio não entrega**. O MK19 passou a
> exigir a restrição ao próprio canal e, onde nem isso for possível, a **declaração explícita da
> limitação**. *Classe de defeito:* **capacidade afirmada e não verificada** — prima da MK-E1
> (decisão certa pelo motivo errado), com a diferença de que aqui o motivo estava certo e o
> **mecanismo** é que não existia. *Como foi pega:* pergunta do Rafael — *"por que não podemos
> usar o YouTube?"* — sobre uma proibição que a spec nunca fez, mas que a redação sugeria.

> **FRONTEIRA DE LGPD, declarada — MK19 e MK22.** Medir **o que um cliente assistiu** e medir **o
> que um colaborador assistiu** são coisas juridicamente diferentes: a segunda é monitoramento de
> pessoa identificada em relação de trabalho, e exige base legal, transparência com o colaborador
> e finalidade declarada. **O Design System declara o MECANISMO** — o bloco de vídeo expõe os
> eventos de progresso. **O que se coleta, de quem, por quanto tempo e para quê é decisão de
> produto e de conformidade**, nunca de padrão. É a mesma separação que o **DP12** fez no mapa
> entre destino externo e interno.

> **Origem do vídeo do Viver de IA — lacuna FECHADA em 2026-08-12.** O `estudo-viver-de-ia.md`
> descrevia o player daquela plataforma **apenas como interface** (§3.19), e a medição de código
> da v1.2 mirou tokens, tipografia e movimento — **nenhum dos dois olhou de onde o vídeo vinha**.
> A lacuna ficou declarada como não respondida, e **o Rafael a fechou por medição direta**: o menu
> de contexto do player identifica **Panda Video**, hospedagem brasileira voltada a plataforma de
> curso. Isso explica o player com marca própria e sem grade de sugestões ao fim.
> *Consequência para o DS:* **nenhuma** — o MK19 é neutro em fornecedor de propósito. O achado
> vale como referência do que uma hospedagem dedicada entrega, e está registrado no
> `estudo-viver-de-ia.md`.


### 47.4 Os 7 testes

1. **Nenhum par de cor novo** neste lote; a medição de contraste tem objeto no lote 2.
2. **Escada de mecanismos:** item ativo do cabeçalho por marca + peso + `aria-current`, nunca só
   cor (herda o SH5).
3. **Grayscale:** cabeçalho, trilha e estado ativo permanecem legíveis (DF4 como gate estrutural).
4. **Regra do um:** um `<h1>` real por página · um `<main>` · **um formulário por página de
   serviço** · um item ativo por região de navegação.
5. **Landmarks:** todas as navegações com nome único, nenhum contendo a palavra "navegação"
   (MK5/SH2).
6. **Camada de máquina:** título, descrição e canônica próprios; dados estruturados do tipo certo
   e **só do que está visível**; nada de marcação fabricada (MK10).
7. **Mobile primeiro, medido:** zoom livre (MK4) · alvos ≥44px · **orçamento de peso e metas de
   campo verificados no gate** (MK12) · dimensão explícita em toda mídia · **nenhuma incorporação
   de terceiro carrega antes do clique** (MK19) · **nenhum número, depoimento ou case sem
   procedência** (MK15, MK17) — este último é teste documental, não visual, e reprova a página que
   afirma sem poder sustentar.

*(Estado: **`estável` desde 2026-08-12**, por "aprovo" explícito do Rafael após o gate visual.
**Quatro camadas cumpridas em 2026-08-12** sobre o preview
`seed-site-preview.html` v0.1, que exercita o contrato numa **página de serviço** — o tipo mais
exigente, por ser autônoma: `suite-site.mjs` **66 PASS · 0 FAIL** — *prova de que as guardas são
reais:* contra um preview com 5 defeitos deliberados (zoom bloqueado, `LocalBusiness` no lugar de
`Service`, número sem fonte, player sem API, `nav` sem nome) ela **reprova em 6**;
`render-site.mjs` em Chrome real **23 PASS · 0 FAIL**, medindo CTA acima da dobra em três
larguras, alvos de toque e — o teste que só o render faz — **zero requisições externas antes de
qualquer clique**, com o iframe aparecendo apenas após o clique na fachada; `contraste-site.py`
**42 PASS · 0 FAIL** após as correções que a própria medição exigiu; e o **gate visual humano**.
**Pendência que o bloco leva consigo: nenhuma própria** — a SH-P1 do §46 (falta de token
semântico de borda que passe 3:1 contra `surface-raised` no claro) valia aqui também, porque
o campo de formulário do §47 consumia o mesmo empréstimo de primitivo. **Com a SH-P1 fechada
(gêmeos v1.12, 2026-08-14), o §47 tem o semântico `--seed-border-interactive` à disposição —
a migração do artefato do §47 é retroativo da classe PN-P7** (o preview do site não foi
regenerado nesta janela; regra GI2 vale para quando for).
**✅ O retroativo FECHOU em 2026-08-15 (PN-P7 executado, MANIFESTO v7.6; aprovado pelo Rafael
na v7.7):** o `seed-site-preview.html` foi a v0.2 com `input, select, textarea` consumindo o
semântico — e a prova em pixel mediu **0,00% de diferença** contra o artefato anterior
(mesmo valor renderizado #788F9D: promoção de expressão, não de cor). Suíte 66·0 · render
23·0 · contraste 42·0 contra o artefato final.)*

> **O que a medição de contraste corrigiu, e a lição é reaproveitável.** A primeira execução deu
> **39 PASS · 3 FAIL**, todas no tema escuro e todas pela mesma causa: eu havia usado
> **`surface-brand-deep` como cor de TEXTO** (item ativo do mega menu, link-com-seta, marca). Ele
> é **superfície**: no tema escuro vira um verde quase preto e mede **1,99** contra a página. A
> correção é consumir **`text-link`** para texto de marca (**4,60** no claro · **10,16** no
> escuro) e **`text-brand`** para a barra do depoimento (**4,23** · **9,32**; `surface-brand`
> media 2,50 no claro). *Classe de defeito:* **token usado fora do papel declarado** — o nome
> `brand-deep` sugere "a versão escura da marca", e a leitura natural é que sirva para texto;
> o papel dele é superfície. Parente do SH15 do §46, onde `surface-inverse` invertia com o tema.

---