/* ========================================================================== COMPONENTE — uc-secao O bloco que separa um assunto do seguinte dentro de uma pagina. ========================================================================== 1. ⛔ `uc-sec` E `uc-sec2` SAO UMA PECA SO' — MEDIDO, NAO DEDUZIDO ========================================================================== Medido em 05/09/2026 no HTML renderizado de DEZ telas do tema antigo, anonimo, contando por token de atributo `class` (nao por substring) e com a arvore DOM de verdade (BeautifulSoup), nao com regex: uc-sec 10 (2
+ 8
) so' no template de taxonomia uc-sec2 13 (13
) nas outras 8 telas uc-sec-head 6 (6
) uc-sec-note 0 ← declarado no CSS, renderiza ZERO vezes O briefing desta tarefa dizia que a diferenca estrutural era de composicao: "`uc-sec2` carrega o cabecalho DENTRO, como `__h`; `uc-sec` se emparelha com um `uc-sec-head` IRMAO". ⛔ ISSO NAO SE SUSTENTA NA MEDICAO. `uc-sec` seguido de `uc-sec-head` irmao: ZERO de 10. Nas dez ocorrencias o `uc-sec-head` esta DENTRO do proprio `
` -- confirmado tambem no codigo-fonte (`taxonomy.php:250` e `inc/taxonomia.php:861`, que emite a secao inteira numa string so'). Ou seja: a unica diferenca estrutural que o briefing apontava como motivo para manter DUAS pecas nao existe. As duas carregam o cabecalho dentro. O QUE DE FATO DIFERE, LADO A LADO --------------------------------- .uc-sec (theme.css:285) .uc-sec2 (bancada.css:766) padding vertical clamp(2.75rem,5vw,4.25rem) var(--sp-6) = 32px medida horizontal NAO TEM (depende de um `__in` interno: max-width `.uc-shell` ancestral) + gutter cabecalho `.uc-sec-head`, filho `.uc-sec2__h`, filho titulo font-size:var(--uc-s-sec) font-size:var(--uc-s-sec) "ver mais" margin-left:auto + nowrap margin-left:auto + nowrap nota margem de topo NEGATIVA, margem de topo NEGATIVA, max-width 64ch, --uc-ink-2 max-width 60ch, --uc-ink-2 `--band` faixa: fundo --uc-paper-2 fio: border-top + border-block + mais ar e mais nada Titulo, "ver mais" e nota sao A MESMA FORMULA nas duas. O que sobra e' (a) onde mora a medida horizontal e (b) dois numeros de respiro que ninguem escolheu de proposito -- exatamente a forma do par `.uc-lbl`/`.uc-eyebrow` que a tarefa D desfez ("a diferenca sao dois numeros que ninguem escolheu"). ⛔ A PROVA ESTA ESCRITA NO PROPRIO TEMA ANTIGO. `taxonomy.php:391`: "Somava ainda uma SEGUNDA ANATOMIA DE SECAO na mesma pagina (`uc-sec2` ao lado de `uc-sec`) -- o mesmo tipo de ANATOMIA DUPLICADA que o proprio comentario de uc_related() diz ter matado em 24/08/2026." Quem escreveu o tema antigo ja' tinha diagnosticado a duplicacao e removido o SINTOMA (tirou o `uc_related()` do hub para as duas nao aparecerem juntas) sem poder pagar a CAUSA. E ha uma segunda confissao, em `theme.css:142`: a regra de alvo de toque enumera `.uc-sec-head__more` E `.uc-sec2__h a` NA MESMA LISTA. O tema ja' trata os dois "ver mais" como um papel so'. Terceira: `.uc-sec--primeira` esta declarado em `bancada.css:971` -- a camada onde vive o `uc-sec2` estendendo o `uc-sec` da camada de baixo. As duas nao estao separadas por papel; estao emaranhadas. VEREDITO: UMA PECA. Duas entradas de inventario viram uma; `uc-sec-note`, que renderiza zero vezes, nao vem junto (a nota que sobrevive e' a de `uc-sec2`, 5 de 13). O nome e' `uc-secao`, em portugues como o resto do sistema (`uc-cartao`, `uc-botao`, `uc-rotulo`), e sem o "2", que e' cicatriz de migracao e nao informacao -- a mesma decisao que `uc-card2` -> `uc-cartao`. ========================================================================== 2. ⛔ O QUE `--band` SIGNIFICA — E POR QUE ELE NAO SE CHAMA MAIS ASSIM ========================================================================== `--band` existe nos DOIS forks, com renderizacoes diferentes, e essa era a pergunta a responder antes de reproduzir qualquer coisa. ONDE ELE DISPARA, medido no HTML (7 de 13 `uc-sec2`, 2 de 10 `uc-sec`): /provas/ o rodape que cruza para SIMULADO /simulados/ o rodape que cruza para PROVA prova single o "continue praticando" colado no pe do artigo simulado single idem 404 e edital idem (o mesmo bloco, herdado) capa a secao de simulados, depois da de provas taxonomia a secao de simulados, depois das de prova/apostila E o tema antigo escreve o motivo com todas as letras em dois deles: cpt/archive-prova.php:209 "O rodape CRUZA: aqui embaixo vem SIMULADO, nao prova." inc/simulado.php:221 "Rodape cruzado, igual ao dos arquivos." ⛔ `--band` NAO E' DECORACAO: E' FRONTEIRA. Ele marca a secao em que a pagina MUDA DE ASSUNTO. O comentario de `theme.css:283` diz a mesma coisa pelo avesso -- "Densidade alternada: a faixa (--band) respira (...) Ritmo uniforme em toda secao le como SaaS". ENTAO POR QUE A FAIXA NAO VEM JUNTO, SE O SIGNIFICADO VEM --------------------------------------------------------- Porque a faixa NAO SOBREVIVE A PROPRIA FREQUENCIA. Sao 9 secoes de 23 (7 de 13 + 2 de 10). Com fundo tintado, mais de um terco de cada pagina vira faixa -- e uma faixa que se repete a cada duas secoes deixa de ser faixa e vira listra. O proprio fork mais usado (`uc-sec2`, 13 de 23) JA' TINHA ABANDONADO O FUNDO: la' `--band` e' `border-top` e nada mais. A medicao escolheu sozinha qual dos dois desenhos fica. E ha o motivo de craft: "NEM TUDO E' CARTAO". Neste sistema quem gasta borda + preenchimento + raio para dizer "sou um objeto separado" e' o `uc-cartao`. Uma secao com fundo proprio faria toda lista parecer um cartao de cartoes, e a pagina inteira viraria painel. A secao e' feita de AR. O NOME MUDA PORQUE O NOME MENTIA. "band"/"faixa" descreve o DESENHO que nao fica; o que fica e' o SIGNIFICADO. `--divisa` e' a linha que separa dois territorios -- e' o que ele faz, esta em portugues como o resto do sistema, e nao promete um fundo que nao existe. Mesma decisao que fez `__pe` virar `__rodape` na tarefa E: nome que carrega o papel errado se troca. ========================================================================== 3. A ESCADA DE ESPACO — E' ELA QUE FAZ A SECAO EXISTIR ========================================================================== Este e' literalmente o componente que separa grupos, e "espacamento uniforme nao agrupa nada" e' a regra que ele pisa. A escada, toda em tokens da grade de 4px: titulo <-> nota 8px (--sp-2) MESMO grupo: as duas anunciam a secao cabeca <-> conteudo 16px (--sp-4) degrau: anuncio x lista secao <-> secao 48px (24+24) ENTRE grupos secao <-> secao com --divisa 72,8px 24 + fio + 48, mais o fio MEDIDO NO NAVEGADOR em 05/09/2026, palco de 924px, e nao projetado: 8 / 16 / 48 / 72,8 -- as caixas das secoes ENCOSTAM (vao de 0), e o que separa e' o padding das duas. Os 72,8 sao 24 + 0,8 (o fio, que computa 0,8px em dpr 1 pelo fator que a tarefa C documentou) + 48. 48px e' o topo exato da faixa de craft (32-48px entre grupos), e e' 3x o degrau interno de 16px -- a razao e' o que faz o olho agrupar, nao o valor absoluto. Os 16px de cabeca->conteudo NAO sao invencao: sao o `margin-bottom:var(--sp-4)` que o `.uc-sec2__h` ja' usava (o fork de 13 de 23). O que mudou foi o padding da secao: 32px (que dava 64px entre secoes, fora da faixa) virou 24px. ⛔ E' POR AQUI QUE SE CONFERE SE A PECA FUNCIONA: tape o conteudo da tela e as secoes ainda tem de ser contaveis so' pelos vaos. Se precisarem de fundo ou de moldura para aparecer, o ritmo esta errado e o painel esta tapando. ========================================================================== 4. ⛔ A NOTA MORA DENTRO DA CABECA — E ISSO APAGA DUAS MARGENS NEGATIVAS ========================================================================== Nos DOIS forks a nota e' irma do cabecalho e precisa de margem de topo NEGATIVA para se colar nele: .uc-sec-note margin:calc(var(--sp-4) * -1) 0 var(--sp-6) .uc-sec2__nota margin:-.5rem 0 var(--sp-4) Margem negativa aqui e' sempre o mesmo defeito: o cabecalho emitiu um afastamento que nao vale para o vizinho seguinte, e alguem o desfez por fora. A nota nao e' conteudo da secao -- ela ANUNCIA a secao, junto com o titulo. Posta dentro do `
`, ela recebe o `gap` de 8px do proprio grupo e as duas declaracoes negativas somem. Regra que a tarefa E fixou e que vale aqui: NENHUMA REGRA DESTE ARQUIVO DESFAZ OUTRA REGRA DESTE ARQUIVO. ========================================================================== 5. O QUE A SECAO **NAO** DESENHA ========================================================================== O "ver mais" e' `uc-botao uc-botao--texto`, INTEIRO, sem uma linha de override -- nao ha `.uc-secao__mais`. Tres motivos medidos: 1. A SETA. Medido no HTML das 10 telas: 90 ocorrencias de `→` dentro de blocos de secao, e o cabecalho escreve `ver todos →` em 12 dos 16 "ver mais". A tarefa D provou que `PublicSans-400.woff2` NAO TRAZ U+2192 -- essa seta ja' sai hoje numa fonte de sistema. O botao traz o SVG. 2. O ALVO DE TOQUE. `theme.css:142` da' 44px a `.uc-sec-head__more` e a `.uc-sec2__h a` SO' sob `(pointer:coarse)`. No mouse os dois ficam com a altura da linha -- abaixo do piso de 24x24 da WCAG 2.5.8. O `uc-botao--texto` resolve os DOIS pisos (tarefa D, §6.3). 3. NAO CRIAR UM QUARTO CONTROLE DE ACAO. E' a divida que a tarefa C declarou e a D pagou. Repetir aqui seria refaze-la. ⛔ E O `white-space:nowrap` NAO VEM JUNTO -- e' um defeito medido no tema antigo. `theme.css:291`: "Linha de apoio comprida nao cabe ao lado do titulo no celular: com nowrap ela ESTOURAVA A PAGINA EM 152px". O conserto de la' foi um `@media(max-width:640px)` com `flex-basis:100%`. Aqui nao ha nem `nowrap` nem `@media`: `flex-wrap` + `justify-content:space-between` entregam o mesmo resultado em qualquer largura, porque o que empurra o "ver mais" para a direita e' a distribuicao, nao uma margem automatica que depois precise ser desfeita. O PAINEL DE VAZIO/ERRO e' `uc-aviso` (tarefa E). A secao nao desenha um segundo, e nem sequer sabe que ele existe: quem carrega `data-uc-estado` e' a SUPERFICIE que busca dado (a grade, a parede de chips), nunca a secao. Uma secao nao busca nada -- ela e' o lugar onde uma busca acontece. O NIVEL DO TITULO E' DO HOSPEDEIRO. `.uc-secao__titulo` e' CLASSE, nao seletor de elemento: a mesma secao e' `

` numa capa e pode ser `

` dentro de outra estrutura. Estilizar `h2` prenderia o desenho a um nivel e obrigaria a marcacao a mentir sobre o documento -- mesmo raciocinio do `uc-rotulo` (tarefa D) e do `uc-cartao__titulo` (tarefa E). A SECAO NAO EMITE MARGEM EXTERNA. O respiro e' `padding`, de proposito: ele fica DENTRO da secao, entao o fio da `--divisa` cai na borda de cima do bloco e nao no meio de um vao de margem colapsada. ========================================================================== 6. LIMITES NOMEADOS ========================================================================== 1. `uc-secao` e' bloco de TOPO: vai direto dentro do `
`, nunca dentro de outro invólucro de medida. Quem carrega a medida e' o `__in`. Se a tarefa G (chrome) declarar um `.uc-shell` em volta do main, o gutter seria contado duas vezes -- e a decisao correta la' e' NAO envolver, nao tirar o `__in` daqui: e' o `__in` que permite a `--divisa` sangrar de ponta a ponta, que e' o que faz o fio significar "a PAGINA muda de assunto" em vez de "esta coluna muda de assunto". 2. `scroll-margin-top` NAO esta aqui, e a ausencia e' deliberada. Medido: 4 das 13 secoes tem `id` e sao alvo de ancora (`#portas`, `#provas`, `#simulados`, `#hubs`). Quando a barra do topo virar sticky (tarefa G), elas precisam de um recuo do TAMANHO DA BARRA -- e esse numero e' da barra, nao da secao. Escrever um valor chutado aqui seria uma medida absoluta sem dono, justamente o que a R14 desta tarefa fecha. ========================================================================== */ /* O bloco. Sem fundo, sem borda, sem raio, sem sombra -- ver §2. */ .uc-secao{ padding-block:var(--sp-5); } /* FRONTEIRA: a pagina muda de assunto aqui (§2). O fio atravessa a LARGURA INTEIRA porque a secao sangra e a medida esta no `__in`. E' o MESMO primitivo -- `--uc-borda` (1,5px) sobre `--uc-rule` -- que o sistema ja' usa em quatro escalas, e a ESCALA E' O SIGNIFICADO: chip entre dois campos DENTRO de um controle (chip.css:186) botao atravessando a base de UM controle, enquanto ele espera rotulo acima de um bloco de divulgacao cartao entre corpo e rodape, atravessando UM objeto secao entre dois assuntos, atravessando A PAGINA ← esta Uma linha, cinco larguras, e a largura diz o que ela separa. E' a mesma regra que a tarefa D aplicou ao numero em mono ("neste sistema, numero e' dado") um nivel acima: neste sistema, fio e' fronteira, e o quanto ele atravessa e' o tamanho do que ele divide. */ /* `--continua`: A SECAO QUE PERTENCE A ANTERIOR. O vocabulario tinha os dois AFASTAMENTOS (48px entre secoes, 72,8px com `--divisa` quando a pagina muda de assunto) e nao tinha o APROXIMAMENTO. Sem ele, "Comece pelo que voce estuda" ficava a 48px dos proprios grupos -- a mesma distancia que o separava de Simulados, que e' outro assunto --, e o craft e' explicito: espacamento uniforme nao agrupa nada, e a faixa e' 8-12px dentro do grupo contra 32-48 entre grupos. Medido em 08/09/2026: os QUATRO limites daquele trecho mediam 48px. `--sp-3` (12px) cai dentro da faixa de dentro-do-grupo e mantem a grade de 4px. Nao ha `border-top`: fio aqui diria fronteira, que e' o oposto do que este modificador significa. */ /* `--abre`: a secao que ANUNCIA os grupos, e por isso solta menos embaixo. Sem ela o par ficava 24+12=36px do titulo para o primeiro grupo contra 12+12=24px entre grupos -- 12px de diferenca, que o olho nao le como hierarquia. Com ela: 24px dentro do conjunto contra 48px na fronteira de fora (Simulados -> Comece), que e' o dobro e se le. */ .uc-secao--abre{ padding-bottom:var(--sp-3); } .uc-secao--continua{ padding-block:var(--sp-3); } .uc-secao--divisa{ padding-top:var(--sp-7); border-top:var(--uc-borda) solid var(--uc-rule); } /* CONTINUACAO: nao ha nada acima de que se separar. O tema antigo (`bancada.css:971`) explica: "A primeira secao do hub nao repete o respiro de cima: o titulo da pagina acabou de terminar, e o bloco e' continuacao dele, nao uma secao nova." ESPECIFICIDADE DOBRADA DE PROPOSITO. `--primeira` e `--divisa` sao os dois extremos de UM eixo (quanta fronteira ha em cima), e escrever os dois no mesmo elemento e' contradicao. Sem isto quem venceria seria a ORDEM NO ARQUIVO -- comportamento silencioso decidido por posicao, exatamente o que o `mostruario.php` recusou ao trocar dois booleanos por uma chave. `--primeira` vence porque ela afirma um FATO sobre a posicao ("nao ha vizinho acima"), e fato vence enfase. */ /* ⛔ O TOPO DEIXOU DE SER ZERO EM 07/09/2026. Era `padding-top:0` porque quem dava o respiro entre o menu e o conteudo era o ANUNCIO do cabecalho (`uc_anuncio('topo_site')` em header.php), com `margin-block:var(--sp-7)` = 48px. Em 07/09 o dono mandou remover esse anuncio de todo o site -- e o zero daqui, que dependia dele, deixou a primeira secao COLADA no menu. Relato literal: "ficou praticamente colado, sem respiro nenhum". `--sp-6` = 2rem = 32px: o PISO da faixa "entre grupos" que esta folha e a do anuncio ja citam (8-12px DENTRO de um grupo, 32-48px ENTRE grupos). O teto (48px, --sp-7) era do anuncio porque anuncio INTERROMPE a pagina; o inicio do conteudo nao interrompe nada, e 32px segura mais conteudo no primeiro ecra do celular. `border-top:0` fica: a fronteira ali e' o proprio cabecalho, e um fio sob ele seria a segunda linha dizendo a mesma coisa. */ .uc-secao.uc-secao--primeira{ padding-top:var(--sp-6); border-top:0; } /* A MEDIDA. E' o `.uc-sec2__in` do tema antigo, que e' o fork que funciona sozinho -- o `.uc-sec` depende de um `.uc-shell` ancestral que este tema ainda nao tem. */ .uc-secao__in{ max-width:var(--uc-maxw); margin-inline:auto; padding-inline:var(--uc-gutter); } /* O ANUNCIO: a linha do titulo em cima, a nota embaixo (§4). ⛔ SAO DOIS ELEMENTOS, E O SEGUNDO NASCEU DE UM DEFEITO QUE A CAPTURA MOSTROU. A primeira versao punha os TRES (titulo, acao, nota) no mesmo `flex-wrap`, com `width:100%` na nota para forcar a quebra. Nao funciona, e o motivo e' de especificacao: o tamanho hipotetico de um item de flex e' a base LIMITADA PELO max-width, e a nota tem `max-width:var(--uc-medida)` (~500px). Ou seja, ela nunca "pede" a linha inteira -- pede 500px, cabe ao lado da acao, e senta ali. Medido no exemplar de BORDA: com titulo de 122 caracteres o titulo tomou a primeira linha, e a acao e a nota dividiram a segunda, lado a lado. `flex-basis:100%` teria exatamente o mesmo defeito (mesma clausula da especificacao), e `min-width:100%` consertaria a quebra destruindo a MEDIDA -- que e' o motivo de a nota existir. Uma grade de uma coluna resolve sem depender de tamanho nenhum: cada filho e' uma linha, ponto. A `__linha` continua sendo flex, porque ali a quebra E' desejada -- e' ela que dispensa o `nowrap` e o `@media` do tema antigo (§5). */ .uc-secao__cabeca{ display:grid; gap:var(--sp-2); margin:0 0 var(--sp-4); } /* Titulo e acao dividem a linha; `space-between` no lugar de `margin-left:auto`. Com um filho so', `space-between` deixa o titulo no comeco, que e' o que se quer. */ .uc-secao__linha{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:var(--sp-2) var(--sp-4); } /* Cabecalho sem conteudo embaixo nao promete o que nao vem: sem isto uma secao cujo conteudo falhou sem desenhar `uc-aviso` deixa 16px de nada pendurados sob o titulo. E' defesa, nao conserto -- o conserto e' a superficie desenhar o aviso, e o estado de BORDA do mostruario mostra exatamente esse caso. */ .uc-secao__cabeca:last-child{ margin-bottom:0; } .uc-secao__titulo{ margin:0; min-width:0; color:var(--uc-ink); font-size:var(--uc-s-sec); font-weight:var(--uc-w-anunciar); letter-spacing:var(--uc-tr-display); line-height:var(--uc-lh-apertado); /* `anywhere` e nao `break-word`: e' o unico que reduz o min-content do item de flex. A tarefa D mediu 21px de texto CORTADO num botao por causa desta diferenca, e o titulo de secao recebe nome de orgao sem espaco pelo mesmo caminho. */ overflow-wrap:anywhere; } /* A nota e' linha propria da grade do cabecalho -- ela nao precisa pedir largura nenhuma para isso, e por isso nao ha `width` nem `flex-basis` aqui. O `max-width` faz o que ele deve fazer e so' isso: limitar a MEDIDA do texto, nao decidir onde a linha quebra. */ .uc-secao__nota{ max-width:var(--uc-medida); margin:0; color:var(--uc-ink-2); font-size:var(--uc-s--1); font-weight:var(--uc-w-ler); line-height:var(--uc-lh-normal); }