/* ========================================================================== uc-capa — o HEROI da capa (Fase 2b, tarefa J, 06/09/2026) ========================================================================== ========================================================================== 1. O QUE A MEDICAO DISSE, E ONDE ELA CONTRARIOU O BRIEFING ========================================================================== Medido em 06/09/2026 no HTML renderizado da capa em producao, ANONIMO, por token de atributo `class` e com arvore de DOM de verdade (nao substring). Os seis prefixos que o briefing atribuiu a esta tarefa: uc-capa2 7 uc-peek 9 uc-mais 8 uc-faixa 5 uc-portas 1 uc-selo 1 = 31 tokens Os numeros batem. A ATRIBUICAO nao bate em tres pontos, e cada um muda o que esta tarefa entrega: (a) ⛔ `uc-peek` NAO E' um "peek" de chips. E' A QUESTAO DE VITRINE — uma questao real do acervo, com as cinco alternativas e o gabarito marcado, dentro do heroi. Arvore medida: a.uc-peek.uc-peek--porta[href][aria-label] div.uc-peek__h > span.uc-r__tags > span + span.uc-lbl "exemplo" div.uc-peek__b > p (enunciado) + div.uc-peek__a x5 Sao 9 TOKENS em 8 ELEMENTOS (`uc-peek` e `uc-peek--porta` estao no mesmo ). Quem le "peek 9" e imagina parede de chips desenha a peca errada — e o `span.uc-r__tags` de dentro dele e' justamente o 42o emprestimo que a tarefa I mediu ("o 42o esta em div.uc-peek__h"). (b) `uc-mais` NAO E' da capa. Quem o emite e' `inc/taxonomia.php:1496,1504` (os hubs) e `inc/filtro.php:200,544,618` (o filtro do banco) — cinco usos, dois componentes, zero em `front-page.php`. As 8 renderizacoes medidas na capa vem dos hubs, que a capa apenas HOSPEDA. E ele ja tem dono desde a tarefa C: `
` com ``. (c) `uc-portas` NAO E' componente. E' UM MODIFICADOR numa secao: `section.uc-sec2.uc-portas#portas`, uma unica ocorrencia, e a unica regra que existe para ele e' `.uc-portas .uc-card2__pe{border-top:0}` (bancada.css:859) — literalmente o seletor que motivou a Regra 16. As "tres portas" sao `uc-secao` (F) com `uc-cartoes`/`uc-cartao` (E) sem rodape: `uc_mostruario_cartao()` ja desenha titulo + descricao sem `n`, que e' exatamente a anatomia das tres. ========================================================================== 2. O QUE SAI, E PARA QUEM — 13 nomes viram 8 ========================================================================== uc-mais + uc-mais__b -> uc-chips__mais / uc-chip--mais (tarefa C) uc-faixa __in __d -> uc-contadores / uc-contador (tarefa H) e o motivo dela ja esta escrito la: contador.css:196 cita bancada.css:748 pelo nome ao decidir a quebra da faixa. uc-portas -> uc-secao (F) + uc-cartoes (E) uc-capa2__ferramenta -> uc-montador (tarefa H) uc-capa2__saldo -> uc-contador--destaque (tarefa H) uc-selo -> NAO VEM — secao 4 uc-peek__h > uc-r__tags -> uc-rotulo (D) uc-peek--porta -> deixa de ser variante: a porta e' UM elemento proprio, `__porta` (secao 5) FICA: `.uc-capa` e sete sufixos — `__promessa`, `__apoio`, `__exemplo`, `__enunciado`, `__alternativas`, `__alternativa`, `__porta`. ========================================================================== 3. ⛔ O HEROI E' DESENHADO COM O ANUNCIO NO LUGAR, E O NUMERO E' ESTE ========================================================================== Medido em 06/09/2026, em producao, anonimo, com `getBoundingClientRect`: visor 390x844 div.uc-ad-topo top 91,6 altura 443,4 (uc-ad--servido) 411 dos 844 px do PRIMEIRO ECRA sao anuncio = 48,7% o

comeca em y=606,7 — 72% da primeira tela abaixo visor 1400x900 div.uc-ad-topo top 56 altura 312 280 px de primeiro ecra sao anuncio o

comeca em y=439,8 A spec diz "o visitante novo tem 78 segundos de paciencia e gasta os primeiros vendo meia tela de cinza". "Meia tela" nao era figura de linguagem: sao 48,7%, medidos. ⚠️ CORRIGI UM NUMERO MEU AQUI, e a correcao muda a conclusao para melhor. A primeira versao deste cabecalho dizia "restam ~237px de primeiro ecra", porque eu subtrai a partir do y do

DE HOJE (606,7). Errado: 606,7 e' o topo do h1 DEPOIS do selo verde, e o selo nao vem (secao 4). O que sobra de verdade e' o que ha depois do ANUNCIO: fim do bloco de anuncio 91,6 + 443,4 = 535,0 visor 844 ORCAMENTO REAL DO PRIMEIRO ECRA 309,0 px E o bloco da promessa desta peca, medido no navegador a 390px:

3 linhas a 29,83px ......... 102,9 apoio 3 linhas .................. 78,2 botao ........................... 44,0 vaos (12 + 32) .................. 44,0 TOTAL .......................... 269,1 px -> cabe, com 39,9 de folga Ou seja: **tirar o selo e' o que faz a ACAO caber acima da dobra num celular de 390x844.** Os ~72px que ele ocupava (535,0 -> 606,7) sao exatamente a diferenca. O QUE ISSO DECIDE, e nao e' gosto: - a ordem do heroi e PROMESSA -> APOIO -> ACAO, e a questao de vitrine vem DEPOIS, como recompensa da primeira rolagem. Um heroi que pusesse a vitrine antes do botao gastaria os 309px provando, e a acao so' existiria para quem rolasse duas vezes; - ⚠️ o limite honesto: a 320x720 o bloco mede 323,1px (o h1 vai a 4 linhas) contra ~185px de sobra, e ai o botao FICA abaixo da dobra. Nao ha desenho que caiba 323 em 185; o que existe e' escolher o que fica visivel, e o que fica e' a promessa; - e o anuncio NAO SE MOVE E NAO SE REMOVE (decisao em aberto do dono). O mostruario desenha o heroi com o bloco servido E com o bloco em reserva, porque "funciona quando o anuncio nao preenche" nao e' requisito — e' sorte. ========================================================================== 4. ⛔ O SELO NAO VEM, E SAO TRES MOTIVOS MEDIDOS ========================================================================== `

Gabarito oficial da banca · sem cadastro

` (a) Ele gasta a PRIMEIRA LINHA — o pixel mais caro do site, pelo item 3. Medido: 71,7px entre o fim do anuncio (535,0) e o topo do

de hoje (606,7), num ecra em que sobram 309. E' um quarto do orcamento gasto num antetitulo decorativo, e e' o que faz a ACAO caber ou nao caber acima da dobra. (b) `·` como separador esta na lista de tiques de texto de maquina da propria spec (secao 8: "nada de `·` como separador"). (c) Ele pinta texto de 12,16px com `--uc-certo` sobre `--uc-certo-soft`. Medido no navegador: `rgb(13,117,73)` sobre `rgba(15,123,79,.1)`, razao ~5,08:1 — ele PASSA no contraste, e nao e' esse o problema. O problema e' de vocabulario: a tarefa I fixou que neste sistema `--uc-certo` carrega FIO e ICONE, nunca texto pequeno, e a spec fixou que cor semantica nao e' segundo acento. Um selo de marketing verde gasta o verde de "voce acertou". Os dois fatos dele ("gabarito oficial da banca", "sem cadastro") nao se perdem: eles sao a SUBSTANCIA do `__apoio`, e aparecem UMA vez. ========================================================================== 5. ⛔ A VITRINE MARCA O GABARITO SEM UMA PALAVRA — medido, nao lido ========================================================================== Lido no DOM, nao no CSS: o `
` tem EXATAMENTE dois filhos, `A` e `25,6 m².`. Nao ha palavra, nao ha icone. Os canais sao dois: COR fundo `rgba(15,123,79,.1)`, borda `rgba(15,123,79,.24)` FORMA o quadrado da letra PREENCHIDO contra os outros quatro vazados O craft cobra tres, e o que falta e' o mais barato: a PALAVRA. Aqui a alternativa certa carrega `gabarito` — e "gabarito" (e nao "resposta certa", que e' a palavra do resolvedor) e' deliberado: na capa ninguem respondeu nada. E' o gabarito oficial da banca, que e' o vocabulario do proprio site. O quadrado da letra continua sendo o canal de FORMA: preenchido contra vazado sobrevive ao cinza e a impressao. `--uc-acao-ink` e' o unico token de "texto sobre superficie preenchida" que este sistema tem, e e' o mesmo papel que ele cumpre dentro do `uc-botao--forte`. Contraste calculado: #FFFFFF sobre `--uc-certo` (#0D7549) = 5,79:1. ⚠️ E DUAS COISAS QUE EU NAO CONSIGO CONSERTAR AQUI, medidas e reportadas: - `href="https://universoconcursos.com/questoes/"` — a porta mostra UMA questao especifica e leva para o banco inteiro. Quem e' dono do destino e' o template da capa (Fase 4); aqui o destino e' parametro. - `aria-label="Exemplo de questao com o gabarito. Comecar a resolver."` — o nome acessivel do link esta escrito SEM ACENTO enquanto o texto visivel esta correto. Nao ha `aria-label` nesta peca: o nome do link e' o texto dele. ========================================================================== 6. UM PONTO DE ENTRADA DOMINANTE — o pedido do dono, traduzido ========================================================================== "A home tem que ser top de linha, nao pode ser apenas um empilhado de cards e um hero estranho." O heroi de hoje tem DOIS primarios lado a lado: a promessa a esquerda e a ferramenta de montar bloco a direita, os dois em 380px+ de peso visual. `craft/typography-hierarchy.md` chama isso de "enfase simetrica" e manda escolher um. Aqui a coluna da esquerda vence por TRES vetores ao mesmo tempo — escala (`--uc-s-3` contra `--uc-s--1`), peso, e o unico uso de `--uc-acao` da peca — e a vitrine e' PROVA, nao co-primario. A ferramenta de montar bloco (`uc-montador`, tarefa H) nao entra no heroi: pedir "escolha banca, materia e nivel" nos primeiros 78 segundos e' fazer uma pergunta antes de fazer uma promessa. Onde ela vai e' composicao de tela, e isso e' Fase 4. ⚠️ ORCAMENTO DE ACENTO. Esta peca gasta UM uso visivel de `--uc-acao`: o botao. A porta da vitrine NAO e' acento — ela usa o vocabulario de link nao-cromatico que o `uc-contador[href]` fixou (sublinhado hairline + cursor, cor so' no hover). Isso deixa o segundo uso da tela livre para quem montar a capa. ========================================================================== */ /* -------------------------------------------------------------------------- UMA CONSTANTE FORA DA GRADE, COM O MOTIVO ESCRITO -------------------------------------------------------------------------- A guarda acusou este valor quando ele estava solto na regra (R11, "caixa fora da grade de 4px em width -> 20px"), e ela estava certa: 20px nao esta na escala de espaco deste sistema (0 4 8 12 16 24 32 48 64 96). Ele nao e' espaco — e' a caixa do quadrado da letra, e ela tem de casar com a PRIMEIRA LINHA do texto da alternativa, que mede `--uc-s--1` x `--uc-lh-normal` ~= 20,8px. Os dois degraus vizinhos da escala nao servem: 16px o glifo de ~13px dentro de 1,5px de borda encosta nas paredes; 24px 3,2px mais alto que a linha, e o quadrado passa a boiar acima do texto — que e' exatamente o desalinhamento que o tema antigo corrigia com `margin-top:.05rem` escolhido a mao. Nomeado aqui em vez de escondido numa regra: e' o mesmo padrao do `--uc-anuncio-reserva` (tarefa H) e do `--uc-resolvedor-avanco` (I), e o mesmo motivo pelo qual `--uc-alvo-toque:44px` e `--uc-chrome-altura:56px` moram no `00-tokens.css`. */ :root{ --uc-capa-letra:20px; } /* -------------------------------------------------------------------------- A SUPERFICIE -------------------------------------------------------------------------- Duas colunas em PROPORCAO e nao em pixel — a mesma decisao do `uc-montador` e do `uc-resolvedor`. 3:2 e nao 2:1: a coluna da direita hospeda cinco alternativas de texto, e no exemplar de borda (alternativa de 200 caracteres) uma coluna de 350px quebra em seis linhas. O tema antigo resolvia com `380px` fixo, que e' o mesmo numero escrito a mao em quatro lugares diferentes deste site. `align-items:start`: a coluna da promessa e a da vitrine NUNCA tem a mesma altura, e iguala-las e' a simetria vazia que o craft nomeia como assinatura de tela gerada sem autoria. */ .uc-capa{ display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:var(--sp-6); align-items:start; min-width:0; } /* -------------------------------------------------------------------------- A PROMESSA — coluna 1 -------------------------------------------------------------------------- Sem `gap` uniforme de proposito. O craft pede 8–12px DENTRO de um grupo e 24–48px ENTRE grupos, e aqui ha dois grupos: (promessa + apoio) e (acao). Um `gap` unico igualaria as duas fronteiras e destruiria a informacao que o espaco carrega — e' o anti-padrao literal do `typography-hierarchy.md` ("uniform spacing between all elements destroys spatial hierarchy"). */ .uc-capa__promessa{ display:grid; min-width:0; } /* O

nao ganha classe: a `01-base.css` ja lhe da `--uc-s-3`, que e' o degrau de display desta escala. O que se acrescenta e' o que a base nao pode decidir por todo

do site: entreletra negativa (regra do craft para display >=32px) e a altura de linha apertada. O compound da direita e' `h1`, sem prefixo — a Regra 16 nao julga alvo sem prefixo `uc-`, e e' a mesma forma que o `.uc-marca__nome b` usa. */ .uc-capa__promessa h1{ margin:0 0 var(--sp-3); letter-spacing:var(--uc-tr-display); line-height:var(--uc-lh-apertado); } /* 12px acima (mesmo grupo: o apoio termina a frase que o titulo comeca) e 32px abaixo (grupo diferente: dali em diante e' acao). */ .uc-capa__apoio{ max-width:var(--uc-medida); margin:0 0 var(--sp-6); min-width:0; color:var(--uc-ink-2); font-size:var(--uc-s-0); line-height:var(--uc-lh-normal); } /* -------------------------------------------------------------------------- A VITRINE — coluna 2 -------------------------------------------------------------------------- Esta E' uma caixa, e a excecao esta justificada. A tarefa H tirou quatro molduras do montador e a I tirou cinco do resolvedor, pelo mesmo motivo: moldura em volta da propria pagina e' moldura em volta de nada. Aqui e' o contrario: o objeto INTEIRO e' clicavel, e borda + raio sao a afordancia de "isto se clica" — a mesma que o `uc-cartao` e o `uc-chip` ja gastam. ⛔ E O FUNDO ERA `--uc-paper-2`, POR ANALOGIA ERRADA — CORRIGIDO MEDINDO. A primeira versao copiou o `--uc-paper-2` que a tarefa I deu ao texto de apoio da banca ("conteudo citado, outra voz"). Medido no navegador, com o fundo composto de verdade (alfa sobre alfa, ancestral por ancestral): `--uc-ink-3` (a palavra "gabarito") sobre --uc-certo-soft composto sobre --uc-paper-2 -> rgb(217,229,228) -> 4,14:1 ✗ Abaixo do piso de 4,5:1 para texto de 13px. E a analogia estava errada por um motivo estrutural, nao so' pelo numero: neste sistema `--uc-paper-2` sem borda e' CONTEUDO CITADO (uc-resolvedor__apoio) e `--uc-field` com borda e' OBJETO CLICAVEL (uc-cartao, uc-chip). Este cartao e' clicavel. Com `--uc-field` o mesmo par mede 4,69:1 e a peca passa a se parecer com os outros dois objetos clicaveis do sistema, que e' o que ela e'. O raio acompanha: `--uc-r-3`, o mesmo do `uc-cartao`. SEM BARRA COLORIDA A ESQUERDA — esta na lista de tells do craft. `position:relative` ancora o `::after` da porta (fim deste arquivo). `gap:var(--sp-3)` uniforme aqui e' correto e nao contradiz a decisao da coluna 1: a vitrine e' UM grupo so' — uma questao — e quem agrupa e' a moldura, nao o vao. */ .uc-capa__exemplo{ position:relative; display:grid; gap:var(--sp-3); min-width:0; padding:var(--sp-4); border:var(--uc-borda) solid var(--uc-rule); border-radius:var(--uc-r-3); background:var(--uc-field); } /* `overflow-wrap:anywhere` e nao `break-word`: enunciado real traz formula, codigo de lei e URL sem espaco, e `break-word` quebra a linha mas NAO reduz o min-content do item de grade, entao a coluna estoura. Mesmo defeito e mesmo conserto que o chip, o botao e o montador ja pagaram. */ .uc-capa__enunciado{ margin:0; min-width:0; color:var(--uc-ink); font-size:var(--uc-s--1); line-height:var(--uc-lh-normal); overflow-wrap:anywhere; } /*