/* ========================================================================== NEXUS theme-final / assets/css/08-skin-surface.css TERCEIRA pele do projeto. Território exclusivo deste arquivo: só CSS. Ativada por [data-skin="surface"] no mais esta folha, carregada por último no . Nenhum partial, nenhum dado e nenhum script sabe que ela existe (§0.1 do contrato). Todo seletor começa por [data-skin="surface"]: as três peles podem coexistir no mesmo documento e o atributo decide qual vale, o que é o que permite o estúdio trocar de pele ao vivo. DE ONDE ELA VEM Referência apurada da página real de preços do reui.io (renderizada e extraída antes, porque este projeto proíbe rede). O que foi lido de lá e traduzido aqui: - Uma família só de tipo, inclusive nos títulos (lá Inter, aqui Geist, o equivalente local mais próximo). Título com peso alto e tracking levemente negativo, corpo em 400. Nada de dupla display/corpo. - Paleta idêntica à nossa: branco, quase preto, cinzas neutros puros. Convertida para a notação do projeto (H S% L%): background 0 0% 100%, foreground 0 0% 4%, primary 0 0% 9%, muted 0 0% 96%, muted-foreground 0 0% 41%, border 0 0% 90%. Matiz 0, saturação 0%. Nossa paleta já servia; o que muda são os degraus, não a família. - Escala de raio 2/4/6/8/12/16/24/full, bem menor que a nossa. Aqui --radius passa a 8px e os componentes densos usam 6px (--radius-cell). - A ASSINATURA: densidade em grade com bordas contíguas. A página é uma matriz. Linhas e colunas separadas por filetes de 1px que se ENCONTRAM, sem espaço entre células, como uma tabela. Cartão não flutua: é célula de uma grade maior, com borda compartilhada. - Efeito de produto, não de marketing: hover muda a superfície da célula, foco tem anel, transição curta. Sem glow, sem parallax, sem aurora. AS TRÊS PROPOSTAS, LADO A LADO index.html editorial denso. Bricolage Grotesque sobre Manrope, dobra empilhada e centrada, halo radial, grade de fundo com fade, cartão com raio de 12px e sombra, régua de provas em display. index2.html arejado e luminoso. Funnel Display sobre Geist, tudo centralizado, raio de 24px, ambiente aceso, vidro. index3.html FERRAMENTA. Geist em tudo, dobra em duas colunas com a copy à esquerda, raio de 8px, campo dividido por filetes de 1px alinhados ao container, e sete seções remontadas como MATRIZ de células contíguas. Zero flutuação: nada tem sombra, nada tem halo, nada emite luz. A hierarquia é resolvida por filete, superfície e alinhamento, exatamente como em um produto. ONDE A MATRIZ ENCAIXOU NO NOSSO CONTEÚDO (mapa do arquivo) provas régua de células com filete compartilhado, números em mono tabular. capacidades seis linhas de matriz mais a coluna de apoio, todas na mesma grade de filetes. tese quatro blocos em matriz 2x2 contígua. modelos quatro colunas contíguas, a primeira marcada por um filete de destaque. portfolio grade de células coladas; o filtro continua em chip pill. govtech painéis contíguos e os 27 produtos como chips densos em grade de células. confianca tabela de perguntas: índice, pergunta e resposta em faixas, uma linha por resposta. contratacao as cinco vias como linhas de comparação, ícone, título, texto e índice em colunas alinhadas. Onde não encaixou (metodo, cases, contato, footer) a seção recebe o tratamento sóbrio da pele: aresta reta, filete no lugar da sombra, mono nos dados. Não se força matriz onde o conteúdo não é tabular. DIVERGÊNCIAS REGISTRADAS a) CONTAGEM FIXA DE COLUNAS em .tese__list (2), .modelos__grid (4) e .confianca__grid (1). O §7.5 pede repeat(auto-fit, minmax(...)). Numa grade de células CONTÍGUAS a contagem deixa de ser preferência estética e vira integridade do desenho: com auto-fit, quatro itens em três trilhas deixam uma célula órfã e a linha da matriz morre no meio da largura. O próprio projeto já abre esta exceção em sections/tese.css (repeat(2, ...) acima de 1560px) e em sections/modelos.css (trilha mínima escolhida para proibir três colunas). Aqui a contagem cai por media query em cada degrau (1 coluna no mobile, 2 no tablet, 4 no desktop), então continua não havendo rolagem horizontal em nenhum viewport da matriz do §7.1. b) CÉLULAS ESTICADAS. sections/portfolio.css alinha cartões ao topo (align-items: start) de propósito. A técnica de filete usada aqui (gap de 1px sobre um fundo da cor da borda) exige que a célula PREENCHA a linha, senão o fundo da grade aparece como bloco sólido. Por isso a pele volta a esticar. O vazio que aquela decisão evitava não retorna: o quadro de mídia continua com flex: 1 e absorve a folga, e o cartão sem mídia continua distribuindo os blocos com align-content: space-between. Dentro de uma matriz, célula alta com respiro interno lê como tabela, não como caixa vazia. c) SEM CHEVRON EM #confianca. A referência tem FAQ em accordion com chevron à direita. Aqui as sete respostas não são um accordion: partials/confianca.js entrega pergunta e resposta sempre visíveis, sem botão e sem estado. Desenhar um chevron ali seria prometer um controle que não existe, o que é defeito de acessibilidade, não estilo. A linguagem foi mantida por outro meio: a tabela de FAQ aberta, que é o mesmo componente da referência no estado expandido. REGRAS DURAS RESPEITADAS Zero rede, zero hex (toda cor é hsl(var(--token))), nenhuma cor derivada de matiz por calc(), só transform e opacity animam, toda duração multiplicada por var(--motion), contraste AA medido nos dois modos, português com acentuação correta. Índice: 1. Tokens da pele, por tema 2. Campo: grade ambiente e filetes do container 3. Primitivos: aresta reta, filete no lugar da sombra 4. Chassi: cabeçalho, navegação em segmented, cabeçalho de seção 5. Dobra em duas colunas 6. A matriz: provas, capacidades, tese, modelos, portfolio, govtech, confianca, contratacao 7. Seções sóbrias: metodo, cases, contato, footer 8. Efeitos desligados: halo, glow, brilho de ponteiro ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens da pele Tudo aqui é redefinição de token de 01-tokens.css no MESMO elemento raiz, então toda derivação por calc() daquele arquivo (--radius-sm..xl a partir de --radius, --space-1..16 a partir de --density, --fs-* a partir de --scale, --section-y a partir de --density) recalcula sozinha. Nenhum valor derivado é reescrito à mão. --scale NÃO é tocado: é o efetivo do §7.3 e as media queries de 1900/2400/3200px continuam mandando nele. O que muda é a FORMA da escala. -------------------------------------------------------------------------- */ [data-skin="surface"] { /* --- família única, inclusive no título --- A referência usa Inter em tudo. Geist é o parente local: mesma escola de grotesca neutra de interface, altura de x alta, numerais tabulares de verdade. index.html usa Bricolage Grotesque sobre Manrope e index2.html usa Funnel Display sobre Geist; aqui não há par, há UMA família, que é justamente o que faz a página ler como produto e não como peça editorial. */ --font-display: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* --- escala de ferramenta --- Corpo em 15px, rótulo em 13px, título grande com teto BAIXO: o h1 desta pele para em 3.25rem contra 5.25rem de index.html e 5.75rem de index2.html. Densidade de painel, não de capa de revista. Nenhum px fixo, tudo multiplicado por var(--scale) como o §3 exige. */ --fs-mono: calc(0.6875rem * var(--scale)); --fs-xs: calc(0.75rem * var(--scale)); --fs-sm: calc(0.8125rem * var(--scale)); --fs-base: calc(0.9375rem * var(--scale)); --fs-lead: calc(clamp(0.9375rem, 0.88rem + 0.22vw, 1.125rem) * var(--scale)); --fs-h3: calc(clamp(1rem, 0.94rem + 0.26vw, 1.1875rem) * var(--scale)); --fs-h2: calc(clamp(1.4rem, 1.15rem + 1.05vw, 2.25rem) * var(--scale)); --fs-h1: calc(clamp(1.9rem, 1.35rem + 2.1vw, 3.25rem) * var(--scale)); --fs-mega: calc(clamp(2.2rem, 1.5rem + 2.6vw, 4rem) * var(--scale)); /* --- ritmo: aperta o corpo, aperta mais o título --- index.html tem display em 1.02 e medida de 68ch; index2.html tem 1.20 e 56ch. Aqui o display fica em 1.12 (mais alto que o denso, mais baixo que o arejado) e a medida cai para 60ch, que é a largura de coluna de um painel, não de um artigo. */ --lh-body: 1.6; --lh-display: 1.12; --lh-tight: 1.25; --tracking-display: -0.022em; --tracking-mono: 0.06em; --measure: 60ch; /* --- densidade e chassi --- 14% mais apertado que o padrão e respiro de seção quase metade do de index.html no teto. O container encolhe de 1240px para 1200px e o container largo de 1600px para 1440px, porque uma matriz de células precisa de trilha legível, não de largura de outdoor. */ --density: 0.86; /* +2.5rem nas três pontas do clamp, mesma correção e mesmo racional de 01-tokens.css (dono: "tá tudo mt colado", 30px+ de respiro). Sem isto o ganho do arquivo-fábrica não aparece aqui: esta pele é a publicada e redefine --section-y por conta própria (§0 acima). */ --section-y: calc(clamp(5.75rem, 4.7rem + 3.2vw, 8rem) * var(--density)); --gutter: clamp(1rem, 0.7rem + 1.3vw, 2.25rem); --container: 1200px; --container-wide: 1440px; --grid-min: 260px; --header-h: 3.5rem; /* --- forma: a escala de raio da referência --- --radius em 8px devolve 4/8/12/16 nas derivadas de 01-tokens.css, que é exatamente a escada da referência. --radius-cell é o degrau de 6px dos componentes densos (botão, crachá dentro de célula, chip de catálogo). */ --radius: 0.5rem; --radius-cell: calc(var(--radius) * 0.75); /* --- profundidade: quase nenhuma --- A separação é feita por filete de 1px, não por sombra. --shadow-strength baixo mantém o token vivo para o estúdio, sem que nada pareça flutuar. */ --shadow-strength: 0.3; /* --- passo da grade ambiente, acalmada (varredura "superfície", 06/08/2026) --- Pedido do dono, com captura: o fundo tinha "quadrados demais" no tema escuro, a malha dominando a tela em vez de ficar atrás do conteúdo. --sf-grid subia de 48px para 96px: metade das linhas em cada eixo, um quarto das interseções na mesma área. --sf-grid-alpha desce de 0,5/0,6 para 0,32/0,4 (claro/escuro, este último redefinido no bloco de tema escuro abaixo) — tinta mais fraca, na MESMA composição já usada aqui (--border com alfa, nunca cor derivada de matiz por calc(), §2.5). As duas mudanças juntas, não uma só: célula maior sozinha ainda pesava no escuro, tinta mais fraca sozinha ainda lia como grade cerrada de tão frequente. A identidade não sai — continua papel milimetrado de ponta a ponta do documento, sem máscara, sem fade — só o passo fica no registro de "ferramenta com fundo técnico discreto", não "papel quadriculado". */ --sf-grid: 96px; --sf-grid-alpha: 0.32; /* --- padrão de fundo do estúdio: a receita muda, o token NÃO --- DEFEITO 3 DO VEREDITO, corrigido aqui. A linha que existia neste ponto era `--pattern: none`, e ela desligava exatamente um valor dos seis: `core/theme.js` remove do estilo inline do toda propriedade igual ao padrão de fábrica (§11, estado limpo), e o padrão de fábrica de `--pattern` é `grid`. Escolher "Grade" no painel apagava o inline, devolvia a palavra para esta folha, e a camada `.nx-pattern` (§12.3) computava `none`: o controle marcava, e nada pintava. Medido antes da correção em index3 escuro, 1280x800, limiar 2: pctAcimaLimiar 0,00. Declarar outra palavra aqui não resolveria nada, só trocaria qual dos seis valores fica morto, porque quem some do inline é sempre o de fábrica. Então o token sai da folha de vez (é o que a pele `cult` já fazia de propósito) e o que a pele passa a redefinir é a RECEITA. E ela precisa ser redefinida, senão duas grades se sobrepõem: o campo desta pele já é uma grade de --sf-grid (48px, ver §2), e a receita do projeto tem passo de 64px com um radial que apaga o desenho abaixo da dobra. Duas grades incomensuráveis produzem batimento, não papel milimetrado. Aqui "Grade" vira a DIVISÃO MAIOR do mesmo papel: quatro vezes o passo do campo, então toda linha maior cai exatamente em cima de uma linha do campo, com o dobro da espessura do filete. É a mesma leitura de papel milimetrado, com o quarto traço mais forte. --pat-grid-opacity fica com o valor do projeto de propósito: o estúdio emite `--pat-grid-opacity` e `--pat-grid-size` como inline quando o dono mexe nos controles de opacidade e escala do padrão, e um valor próprio aqui só faria o slider partir de outro lugar. A tinta da linha maior NÃO é --border, e a razão está medida. --border é calibrado para ser filete de divisor sobre a superfície desta pele: em tema claro ele vive a 12 pontos de canal do campo branco, então a linha maior saía com a mesma força da linha do campo e a hierarquia dependia só da espessura (medido: maior diferença de canal 12 no claro, 22 no escuro). A tinta passou a ser --foreground com alfa baixo, que é PINTURA DE FUNDO e não tinta de glifo (§2.5 e §6.1, a mesma forma que --pat-dots-image já usa): ela escurece no claro e clareia no escuro pelo mesmo número, e a diferença de canal sobe para 43 e 49. Alfa aqui não é escala de ênfase de texto, é a opacidade de um desenho de fundo, que é o único uso que o §2.5 permite. Medido na época, na mesma dobra congelada: pctAcimaLimiar 0,45 nos dois modos, e a régua de contraste de index3 fecha em zero com 1.031 remedições em pixel. ADENDO (varredura "superfície", 06/08/2026): 0,22 descia para a mesma folha que acabou de dobrar de passo (--sf-grid, 48px → 96px, ver acima) e ainda lia como o traço mais forte de uma malha cheia. Cai para 0,14, acompanhando a mesma calibração de --sf-grid-alpha: célula maior e tinta mais fraca juntas, nunca uma sozinha. §8 (AA) mede TEXTO e UI, não pintura de fundo (§2.5) — o piso aqui continua sendo "o traço se lê contra o campo nos dois temas", verificado nas capturas desta rodada, não um limiar de contraste de glifo. */ --sf-grid-major-w: calc(var(--hairline) * 2); --sf-grid-major-ink: hsl(var(--foreground) / 0.14); --pat-grid-image: linear-gradient(to right, var(--sf-grid-major-ink) var(--sf-grid-major-w), transparent var(--sf-grid-major-w)), linear-gradient(to bottom, var(--sf-grid-major-ink) var(--sf-grid-major-w), transparent var(--sf-grid-major-w)); --pat-grid-size: calc(var(--sf-grid) * 4) calc(var(--sf-grid) * 4); --pat-grid-mask: none; /* --- o filete da matriz, em uma variável só --- */ --sf-ring: 0 0 0 var(--hairline) hsl(var(--border)); /* --- paleta, tema claro --- Os números da referência, lidos da página e convertidos para a notação do projeto: background 0 0% 100%, foreground 0 0% 4%, primary 0 0% 9%, muted 0 0% 96%, border 0 0% 90%. Nossa paleta já era essa família; aqui só os degraus são acertados. --muted-foreground NÃO é o 0 0% 41% da referência, e a razão está medida: sections/portfolio.css escreve o rótulo da nota como hsl(var(--muted-foreground) / 0.8), ou seja, o token chega ali já rebaixado por alfa. Com 41% esse rótulo dá 3,60:1 sobre branco, abaixo do mínimo AA do §8 (index.html carrega o mesmo defeito, medido em 3,54:1, e esta pele não pode corrigir lá). Em 0 0% 32% o rótulo sobe para 4,72:1 e o texto de corpo para 7,86:1. Ambiente claro é pago com tinta mais escura, nunca com texto mais fraco. */ --background: 0 0% 100%; --foreground: 0 0% 4%; --card: 0 0% 100%; --card-foreground: 0 0% 4%; --popover: 0 0% 100%; --popover-foreground: 0 0% 4%; --secondary: 0 0% 96%; --secondary-foreground: 0 0% 9%; --muted: 0 0% 96%; --muted-foreground: 0 0% 32%; --accent: 0 0% 94%; --accent-foreground: 0 0% 9%; /* Escurecido (31/08/2026, pedido do dono: "está muito clarinha, fraca... não muito, mas só um pouco") — mesma calibração de 01-tokens.css, e precisa ser redefinida aqui de novo porque esta pele é quem desenha a matriz (--sf-ring, §6): sem o próprio valor, esta folha carregaria por último e o 90% de fábrica venceria por ordem de origem, e o filete que fecha toda célula continuaria fraco. Medido contra --card/--background (100% os dois, nesta pele): 90% dava 1,25:1; 82% dá 1,53:1. */ --border: 0 0% 82%; /* --input é borda de COMPONENTE INTERATIVO e o §8 pede 3:1, não o hairline de divisor. Os dois consumidores visíveis desta pele, .btn--outline e .chip[aria-pressed="false"], têm preenchimento transparente: a borda é o único traço que desenha o limite, e ela pousa em cima de --card, que aqui é branco puro. Medido no documento: 0 0% 58% dá 3,04:1 contra 0 0% 100%, o mínimo que atende. O valor antigo (0 0% 84%) media 1,45:1. --border segue com regra própria (ver acima): divisor estático não é borda de componente interativo, e por isso não mira o piso de 3:1. */ --input: 0 0% 56%; --surface-1: 0 0% 100%; --surface-2: 0 0% 97.5%; --surface-3: 0 0% 95%; } [data-skin="surface"][data-theme="dark"] { /* --- paleta, tema escuro --- Mesmo desenho, invertido. O campo sobe um passo (4% para 4.5%) e a célula sobe outro (6.5% para 7%): a matriz precisa que a célula seja distinguível do campo mesmo antes de o filete aparecer. A borda sobe de 16% para 19%, porque nesta pele o filete de 1px é o único instrumento de separação e ele não pode sumir no preto. A célula fica em 0 0% 9.5%, praticamente a mesma tinta que a própria referência usa em --primary no tema claro (0 0% 9%). Contra um campo de 4.5% dá 14 pontos de separação em sRGB: a célula se lê como célula ANTES de o filete aparecer, que é o que uma matriz precisa. index.html resolve elevação com card em 6.5% sobre campo de 4%, dois pontos, o oposto desta decisão. Medido: --muted-foreground em 0 0% 68% sobre a célula (9.5%) dá 7,9:1, e o mesmo token com o alfa 0.8 do rótulo de nota do portfólio dá 5,51:1, os dois acima do mínimo AA de 4,5:1 do §8. --foreground (98%) sobre a célula dá 15,4:1. A borda em 21% fica 30 pontos acima da célula, então o filete de 1px continua visível no escuro, que é a condição de existência desta pele. */ --background: 0 0% 4.5%; --foreground: 0 0% 98%; --card: 0 0% 9.5%; --card-foreground: 0 0% 98%; --popover: 0 0% 11%; --popover-foreground: 0 0% 98%; --secondary: 0 0% 15%; --secondary-foreground: 0 0% 96%; --muted: 0 0% 14%; --muted-foreground: 0 0% 68%; --accent: 0 0% 18%; --accent-foreground: 0 0% 98%; --border: 0 0% 21%; /* Aqui o token NÃO pode ser o 0 0% 36.5% de 01-tokens.css, e a razão é estrutural desta pele: a célula (--card) está em 0 0% 9.5%, cinco pontos acima do 4.5% do campo, justamente para se ler como célula antes do filete aparecer. O .btn--outline da dobra vive DENTRO dessa célula, com preenchimento transparente: os dois lados da borda são 0 0% 9.5%, e é contra 9.5% que o §8 cobra os 3:1, não contra o campo. Medido no documento: o mínimo é 39,21% e 0 0% 40% dá 3,09:1 contra a célula e 4,32:1 contra o campo. O valor antigo (0 0% 26%) media 1,77:1 dentro da célula. --border segue em 21%: divisor estático, regra diferente, e é ele que desenha a matriz. */ --input: 0 0% 42%; --surface-1: 0 0% 9.5%; --surface-2: 0 0% 13%; --surface-3: 0 0% 16%; /* 0,6 → 0,4 na mesma varredura do bloco claro acima: era o modo onde a malha "dominava a tela" na captura do dono. Continua mais forte que o claro (0,32) de propósito — o filete precisa sobreviver contra um campo escuro — só não mais o dobro de intenso que a leitura pedia. */ --sf-grid-alpha: 0.4; } /* -------------------------------------------------------------------------- 1.5 .container--wide, corrigido para os tokens desta pele ACHADO (varredura de alinhamento, 01/09/2026): #portfolio e #govtech (os dois moram em .container--wide) nasciam 32px mais à esquerda que as outras onze seções em 1440px, só nesta pele. A fórmula de 02-base.css (`max(var(--container), min(var(--container-wide), 100% - var(--space-20) * 2))`) foi calibrada contra os tokens de fábrica (1280/1600, 320px de vão) para nunca superar --container antes do degrau de 1560px do §7.3. Esta pele redefine --container/--container-wide para 1200/1440 (§1, vão de 240px) sem redefinir --space-20: o termo "100% - vão" passou a superar 1200px já em 1440px de viewport, e .container--wide destravou mais cedo que .container — as duas paravam de coincidir bem antes do degrau que deveria uni-las. Travar no valor desta pele (--container) abaixo de 1560px devolve a coincidência; dali para cima os dois media queries de 02-base.css (1560px, 1900px) já leem --container-wide por var() e continuam corretos sem tocar naquele arquivo. */ [data-skin="surface"] .container--wide { max-width: var(--container); } @media (min-width: 1560px) { [data-skin="surface"] .container--wide { max-width: var(--container-wide); } } /* -------------------------------------------------------------------------- 2. Campo Duas camadas próprias, as duas estáticas, mais a camada do estúdio por cima delas. Nada aqui deriva, pulsa ou respira: esta pele é uma ferramenta, e ferramenta não tem ambiente. Camada 1, a GRADE AMBIENTE: background-image do próprio , passo de 48px, sem máscara. A diferença para a grade de index.html não é o passo e sim a máscara: lá o padrão --pattern: grid tem 64px e um radial que o apaga abaixo da dobra, aqui a grade vale de ponta a ponta do documento, como papel milimetrado. background-attachment: fixed ancora na viewport em vez de esticar por mais de 20.000px de documento. Camada 1b, a DIVISÃO MAIOR: é a camada `.nx-pattern` do estúdio (§12.3), com a receita --pat-grid-* redefinida no bloco de tokens acima para quatro vezes o passo do campo. Ela só existe quando o dono escolhe "Grade" no painel, que é o valor de fábrica, e por isso a leitura de fábrica desta pele é papel milimetrado com o quarto traço mais forte. Nenhuma das duas grades tem passo próprio inventado: a maior é múltiplo exato da menor, senão o que aparece é batimento. Camada 2, os FILETES DO CONTAINER: body::before reaproveitado como duas linhas verticais fixas, exatamente na largura do container. É a peça que transforma a página inteira em uma tabela: toda seção nasce entre duas guias, e as bordas das matrizes caem em cima delas. A largura acompanha a rampa do §7.3 (1560px e 1900px), senão as guias descolariam do conteúdo justamente nos monitores grandes. -------------------------------------------------------------------------- */ [data-skin="surface"] { background-image: linear-gradient(to right, hsl(var(--border) / var(--sf-grid-alpha)) var(--hairline), transparent var(--hairline)), linear-gradient(to bottom, hsl(var(--border) / var(--sf-grid-alpha)) var(--hairline), transparent var(--hairline)); background-repeat: repeat; background-position: 0 0; background-size: var(--sf-grid) var(--sf-grid); background-attachment: fixed; } /* AS GUIAS VERTICAIS SAÍRAM (31/08/2026, pedido do dono com captura: "essa linha descendo, tá cortando tudo"). Eram as bordas laterais deste pseudo-elemento fixo, então atravessavam a tela inteira por cima de texto, cartão e imagem em toda rolagem. Sem elas, `body::before` volta a ser o que é em 02-base.css: a camada de --pattern do estúdio. */ /* -------------------------------------------------------------------------- 3. Primitivos: aresta reta, filete no lugar da sombra Uma regra governa o arquivo inteiro: NADA FLUTUA. Toda superfície é opaca, com filete de 1px e sem sombra. O que muda no hover é a superfície da célula, nunca a posição dela. -------------------------------------------------------------------------- */ [data-skin="surface"] .card { border-radius: var(--radius-md); box-shadow: none; background-color: hsl(var(--card)); } [data-skin="surface"] .card__body { padding: var(--space-6); gap: var(--space-3); } [data-skin="surface"] .card__header { padding: var(--space-6) var(--space-6) 0; } [data-skin="surface"] .card__footer { padding: 0 var(--space-6) var(--space-6); } [data-skin="surface"] .card__title { font-weight: 600; letter-spacing: -0.012em; } /* Interação de produto: a célula muda de superfície e o filete escurece. Sem translateY, porque numa matriz um cartão que sobe 2px rasga a linha que ele compartilha com o vizinho. */ [data-skin="surface"] .card--interactive:hover, [data-skin="surface"] .card--interactive:focus-visible { transform: none; background-color: hsl(var(--surface-2)); border-color: hsl(var(--input)); } /* Botão: raio de 6px, peso 500, altura de painel no desktop. No mobile a altura mínima continua sendo --tap-min (§7.5, alvo de 44px); a compressão só vale de 768px para cima, onde existe cursor fino. */ [data-skin="surface"] .btn { border-radius: var(--radius-cell); font-size: var(--fs-sm); font-weight: 500; letter-spacing: -0.006em; } @media (min-width: 768px) { [data-skin="surface"] .btn { min-block-size: 2.25rem; padding-block: var(--space-2); padding-inline: var(--space-4); } [data-skin="surface"] .btn--lg { min-block-size: 2.5rem; padding-inline: var(--space-5); font-size: var(--fs-sm); } [data-skin="surface"] .btn--sm { min-block-size: 2rem; } } /* CORRIGIDO NA 14ª RODADA (06/08/2026, júri). O bloco acima comprime a altura do botão a partir de 768px "onde existe cursor fino", e essa premissa é falsa: tablet em retrato tem 768px e ponteiro GROSSO. O §7.5 já avisa que o teste do alvo de toque é o dedo, não a largura. Medido em 768x1024 com `isMobile: true, hasTouch: true` em `index3.html`: o "voltar ao topo" do rodapé (`.btn--ghost.btn--sm`) saía 134x32, doze pixels abaixo do piso, e o `@media (pointer: coarse)` de 03-ui.css que repõe `--tap-min` em `.btn--sm` perdia porque `[data-skin="surface"]` tem especificidade maior. A compressão continua valendo onde ela foi pensada (tela larga com cursor fino); onde o ponteiro é grosso, a altura volta ao piso. Bloco DEPOIS do de cima de propósito: mesma especificidade, vence por ordem, sem `!important`. */ @media (min-width: 768px) and (pointer: coarse) { [data-skin="surface"] .btn, [data-skin="surface"] .btn--lg, [data-skin="surface"] .btn--sm { min-block-size: var(--tap-min); } } /* Crachá: retângulo de canto pequeno, não pílula. Pílula continua existindo, mas reservada ao chip de filtro, que é o segmented control da referência. */ [data-skin="surface"] .badge { border-radius: var(--radius-sm); font-weight: 500; padding-block: calc(var(--space-1) * 0.9); } [data-skin="surface"] .chip { font-size: var(--fs-xs); font-weight: 500; background-color: hsl(var(--surface-1)); } @media (min-width: 768px) { [data-skin="surface"] .chip { min-block-size: 2rem; padding-block: var(--space-1); padding-inline: var(--space-3); } } [data-skin="surface"] .chip:hover { background-color: hsl(var(--surface-2)); border-color: hsl(var(--input)); } /* Mesmo defeito, mesma causa e mesma correção do nó de #metodo, um seletor acima na página: a regra genérica [data-skin="surface"] .chip trocava o fundo do chip (0,2,0, carga posterior) e com isso vencia também o background-color de .chip[aria-pressed="true"] em 03-ui.css, que tem os mesmos (0,2,0). Sobrava o color: hsl(var(--primary-foreground)) daquela regra sobre --surface-1: rgb(15,15,15) sobre rgb(24,24,24) no escuro (1,08:1) e rgb(250,250,250) sobre rgb(255,255,255) no claro (1,04:1). O rótulo "Todos" desaparecia, e ele é o controle principal da seção de 14 produtos: o usuário não conseguia ler qual filtro estava aplicado. O PAR volta inteiro, na mesma regra, inclusive no hover, porque [data-skin="surface"] .chip:hover acima é (0,3,0) e sozinho voltaria a pintar o chip pressionado de --surface-2. Medido no documento: 18,86:1 no escuro e 17,93:1 no claro, que é a mesma ordem de grandeza das outras duas peles (18,36:1 e 17,18:1). */ [data-skin="surface"] .chip[aria-pressed="true"] { background-color: hsl(var(--primary)); border-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); } [data-skin="surface"] .chip[aria-pressed="true"]:hover { background-color: hsl(var(--primary) / 0.9); border-color: hsl(var(--primary) / 0.9); color: hsl(var(--primary-foreground)); } /* Skip link: com --density em 0.86 o respiro interno de 02-base.css encolhe e a caixa cai para 40px de altura, abaixo dos 44x44 do §7.5. Medido no harness em 360x740, 390x844 e 414x896. A densidade desta pele não pode ser paga com alvo de toque, então a altura mínima é reposta aqui. */ [data-skin="surface"] .skip-link { display: inline-flex; align-items: center; min-block-size: var(--tap-min); border-radius: var(--radius-cell); } /* Moldura de mídia: mesmo raio das células, sem exceção. */ [data-skin="surface"] .media-frame { border-radius: var(--radius-md); } /* Rótulo de seção: o filete de 24px de 02-base.css é vocabulário editorial. Aqui vira um ponto, que é marcador de estado, não régua. */ [data-skin="surface"] .eyebrow { font-weight: 500; color: hsl(var(--muted-foreground)); } /* RÓTULO DE SEÇÃO REDESENHADO (31/08/2026, pedido do dono: "esse negócio acima dos títulos, poderia mudar?"). Era uma bolinha — a única forma redonda do vocabulário, num site de aresta reta. Vira um TRAÇO curto na linha de base do texto, que é a marcação de índice do resto da página (a mesma régua que abre cada bloco da tese). */ [data-skin="surface"] .eyebrow::before { inline-size: var(--space-6); block-size: calc(var(--hairline) * 2); border-radius: 0; background-color: hsl(var(--signal)); } [data-skin="surface"] .lead { line-height: 1.6; } /* -------------------------------------------------------------------------- 4. Chassi 4.1 Cabeçalho sempre sólido, com filete inferior. index.html e index2.html abrem com o cabeçalho transparente sobre a dobra; aqui ele é uma barra de aplicação desde o primeiro pixel de rolagem. 4.2 Navegação em SEGMENTED CONTROL, o componente mais característico da referência. Só a partir de 1100px: entre 880px e 1099px a cápsula com seis itens disputaria largura com a marca e o CTA, e barra de navegação que estoura é defeito, não estilo. 4.3 Cabeçalho de seção em duas faixas: título à esquerda, lead à direita, filete embaixo separando da seção. É o cabeçalho de página de documentação, e vale para as doze seções que usam .section__head sem que nenhum partial saiba. -------------------------------------------------------------------------- */ /* 4.1 */ [data-skin="surface"] .header { background-color: hsl(var(--background) / 0.88); border-block-end-color: hsl(var(--border)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } [data-skin="surface"] .header--scrolled, [data-skin="surface"] .header--menu-open { background-color: hsl(var(--background) / 0.94); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { [data-skin="surface"] .header, [data-skin="surface"] .header--scrolled, [data-skin="surface"] .header--menu-open { background-color: hsl(var(--background)); } } [data-skin="surface"] .header__mark { inline-size: clamp(4.5rem, 3.9rem + 1.6vw, 6rem); } /* 4.2 */ @media (min-width: 1100px) { [data-skin="surface"] .header__nav-list { gap: 0; padding: calc(var(--hairline) * 3); border: var(--hairline) solid hsl(var(--border)); /* Caixa, não cápsula (01/09/2026, "layout em geral é quadrado"). */ border-radius: var(--radius-sm); background-color: hsl(var(--surface-2)); } [data-skin="surface"] .header__nav-link { padding-block: var(--space-2); padding-inline: var(--space-4); border-radius: var(--radius-sm); font-size: var(--fs-xs); font-weight: 500; transition: background-color calc(var(--dur-fast) * var(--motion)) var(--ease-out), color calc(var(--dur-fast) * var(--motion)) var(--ease-out); } /* O sublinhado que cresce é vocabulário de link editorial; aqui o estado é preenchimento de segmento, como na referência. */ [data-skin="surface"] .header__nav-link::after { content: none; } [data-skin="surface"] .header__nav-link:hover, [data-skin="surface"] .header__nav-link:focus-visible { background-color: hsl(var(--surface-1)); color: hsl(var(--foreground)); } } @media (min-width: 880px) and (max-width: 1099px) { [data-skin="surface"] .header__nav-list { gap: var(--space-4); } [data-skin="surface"] .header__nav-link { font-size: var(--fs-xs); font-weight: 500; } } /* 4.3 */ [data-skin="surface"] .section__head { max-width: none; gap: var(--space-3); /* Respiro em duas voltas (31/08/2026): de 5 para 7 e agora para 8, com a margem indo de 8 para 11 — o dono pediu "um espaço maior desse texto pra parte de baixo, de todos na verdade". Vale para o cabeçalho de qualquer seção, não só o da tese. */ padding-block-end: var(--space-8); border-block-end: var(--hairline) solid hsl(var(--border)); margin-block-end: var(--space-11); } [data-skin="surface"] .section__head h2 { letter-spacing: -0.024em; } /* CABEÇALHO EM UMA COLUNA, EM TODA SEÇÃO (31/08/2026, pedido do dono: "subtítulo longe do título, tem que padronizar"). A grade de duas colunas punha o lead à DIREITA do título, a meia página de distância dele, e nem todas as seções entravam nela: #portfolio e #govtech usam `.section__head--split` e já liam empilhado, então o site tinha duas leituras diferentes para o mesmo bloco. Agora é uma só: rótulo, título, lead, um abaixo do outro. */ @media (min-width: 900px) { [data-skin="surface"] .section__head { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-3); } [data-skin="surface"] .section__head > .eyebrow, [data-skin="surface"] .section__head > h2, [data-skin="surface"] .section__head > .lead { grid-column: 1; } [data-skin="surface"] .section__head > .lead { max-width: min(100%, 64ch); padding-block-end: 0; } } /* .section__head--split é flex (04-sections.css): a grade acima não a alcança, então ela só herda o filete e a base alinhada. */ [data-skin="surface"] .section__head--split { align-items: flex-end; } /* Cabeçalhos que vivem DENTRO de uma coluna estreita não podem virar duas faixas nem carregar filete de largura total: seriam duas faixas de 150px e um traço solto no meio da página. Voltam a ser uma coluna simples e recuperam a margem que a própria seção já controla. */ [data-skin="surface"] .metodo__intro > .section__head, [data-skin="surface"] .contato__content .section__head, [data-skin="surface"] .govtech__head.section__head { grid-template-columns: minmax(0, 1fr); border-block-end: 0; padding-block-end: 0; margin-block-end: 0; } [data-skin="surface"] .metodo__intro > .section__head > .lead, [data-skin="surface"] .contato__content .section__head > .lead, [data-skin="surface"] .govtech__head.section__head > .lead { grid-column: 1; max-width: var(--measure); padding-block-end: 0; } /* O cabeçalho de govtech é split, mas SEM filete próprio (queixa do dono, 01/09/2026: "aqui ta com 2 linhas de divisoria" — duas réguas horizontais empilhadas acima dos números, com vão entre elas). A causa era dupla fonte de borda: esta regra desenhava um border-block-end aqui, e `.govtech__numeros` já é `.stat-rail` (04-sections.css), que sozinho carrega `border-block` (topo E base) por contrato. As duas linhas coexistiam com a margem do ritmo interno da seção (.govtech .container > * + *) no meio, sobrando o vão que ele viu. Só o padding fica; o filete que resta é o topo do próprio .stat-rail, que já cumpria esse papel sozinho. */ [data-skin="surface"] .govtech__head.section__head { padding-block-end: var(--space-5); } /* CORREÇÃO da varredura "surface" (agosto/2026): #cases também vira coluna única, pelo mesmo motivo das três acima — ela é seção SÓBRIA (§7, mapa do arquivo), não matriz, e o cabeçalho dela não tem por que abrir em duas faixas. Diferença para o grupo de cima: cases não tem um `.xxx__layout` com gap próprio para sustentar a distância até o primeiro bloco, então o filete e a margem do §4.3 (padrão de TODA .section__head desta pele) continuam de pé aqui — só a grade de colunas muda para 1fr. Antes: título numa coluna curta e o lead pousando ~230px à direita dele, sobre um vão vazio, com o container largo (§7.3) aumentando ainda mais a distância — "lead solto/desalinhado", no relato do dono. Título e lead passam a empilhar em ordem de leitura, como em metodo/contato. */ [data-skin="surface"] #cases > .container > .section__head { grid-template-columns: minmax(0, 1fr); } /* 01/09/2026, pedido do dono: a frase (uma só, com destaque sublinhado) quebrava em duas linhas com o teto de --measure (52ch), sobrando ~510px vazios à direita do texto quebrado. Medido por Range (glifo real, não a caixa esticada pelo grid): a frase inteira ocupa ~758px nesta fonte a 1440px, ~72ch. 78ch dá folga sem sobrar caixa vazia atrás do ponto final em nenhum viewport medido. */ [data-skin="surface"] #cases > .container > .section__head > .lead { grid-column: 1; max-width: min(100%, 78ch); padding-block-end: 0; } /* -------------------------------------------------------------------------- 5. Dobra: a primeira matriz da página Esta é a ruptura de maior alcance do arquivo, e é de LAYOUT, não de acabamento. index.html e index2.html empilham a dobra, centralizam a copy e deixam o quadro de mídia solto sobre o campo. Aqui a dobra é a PRIMEIRA CÉLULA DA MATRIZ: copy e mídia são duas células contíguas, com um único filete de 1px compartilhado entre elas, e de 1024px para cima elas ficam lado a lado. Nenhum partial foi tocado: a ordem do DOM já é copy e depois mídia. A borda compartilhada aqui é feita por supressão, não por gap: a célula da direita simplesmente não tem borda do lado que encosta na da esquerda. Sem gap e sem overflow: hidden no container, porque .hero__grid é o próprio .container e precisa manter o recuo lateral do resto da página. O §7.2 continua respeitado: nenhuma altura em vh, o hero continua com min-height por clamp em svh, e o termo em svh do tamanho do título continua impedindo que ele coma a dobra em tela baixa. -------------------------------------------------------------------------- */ [data-skin="surface"] .hero { min-height: clamp(440px, 66svh, 700px); /* 31/08/2026, segunda passada: o dono mediu de novo ("cadê a margem do topo, mais uns 20px?"). A folga real abaixo da barra fixa era 35px em 900px de altura e 29px em 760px — esta regra da pele vencia a de sections/hero.css, que já tinha subido. Sobe aqui, que é onde manda. */ padding-block-start: calc(var(--header-h) + clamp(var(--space-12), 7svh, var(--space-16))); padding-block-end: clamp(var(--space-8), 5svh, var(--space-12)); } [data-skin="surface"] .hero__grid { gap: 0; } /* NO CELULAR O FILME VEM PRIMEIRO (31/08/2026, pedido do dono: "no mobile somente nele inverte, coloca o vídeo acima do texto"). Só a ordem VISUAL muda: no DOM a copy continua antes, então leitor de tela e Tab leem a promessa antes da arte. Acima de 1024px a regra de duas colunas mais abaixo devolve a mídia para a direita. */ [data-skin="surface"] .hero__stage { order: -1; } /* Célula da copy: empilhada, é a de baixo no celular. */ [data-skin="surface"] .hero__copy { gap: clamp(var(--space-4), 2.4svh, var(--space-6)); max-width: none; margin-inline: 0; padding: var(--space-7) var(--space-6); border: var(--hairline) solid hsl(var(--border)); border-block-start: 0; border-radius: 0 0 var(--radius-md) var(--radius-md); background-color: hsl(var(--card)); } /* Célula da mídia: empilhada, é a de baixo, e não repete o filete que já existe na base da célula de cima. */ [data-skin="surface"] .hero__stage { overflow: hidden; border: var(--hairline) solid hsl(var(--border)); border-radius: var(--radius-md) var(--radius-md) 0 0; background-color: hsl(var(--card)); } /* Dentro da célula o quadro não tem moldura própria: moldura dentro de moldura é caixa dentro de caixa, e a matriz existe justamente para não ter isso. A célula é o quadro. */ [data-skin="surface"] .hero__stage .hero__media { border: 0; border-radius: 0; } [data-skin="surface"] .hero__title { gap: 0; font-size: calc(clamp(1.85rem, min(1.05rem + 2.6vw, 7svh), 3.4rem) * var(--scale)); font-weight: 600; line-height: 1.1; letter-spacing: -0.028em; } /* A última linha do título não vira "cor de marca": vira segundo plano tipográfico. --muted-foreground sobre a célula da dobra dá 7,9:1 no escuro e 7,86:1 no claro, muito acima do mínimo de 3:1 de texto grande e também do de 4,5:1 de corpo (§8). */ [data-skin="surface"] .hero__line--accent { font-weight: 600; color: hsl(var(--muted-foreground)); } /* O rótulo da dobra vira a etiqueta de status da referência. Canto quadrado desde 01/09/2026 (dono: "tira esse caso arredondado de cada escrita, nosso layout em geral é quadrado"). */ [data-skin="surface"] .hero__copy > .eyebrow { padding-block: var(--space-2); padding-inline: var(--space-3); border: var(--hairline) solid hsl(var(--border)); border-radius: var(--radius-sm); background-color: hsl(var(--surface-2)); } [data-skin="surface"] .hero__media { --media-ratio: 16 / 9; border-radius: var(--radius-md); } @media (min-width: 1024px) { [data-skin="surface"] .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); /* stretch, não center: as duas células precisam ter a MESMA altura para o filete compartilhado atravessar a dobra inteira, de cima a baixo. */ align-items: stretch; column-gap: 0; } [data-skin="surface"] .hero__copy { justify-items: start; align-content: center; text-align: start; padding: var(--space-9) var(--space-8); border-block-start: var(--hairline) solid hsl(var(--border)); border-radius: var(--radius-md) 0 0 var(--radius-md); } [data-skin="surface"] .hero__lead { margin-inline: 0; max-width: 44ch; } [data-skin="surface"] .hero__ctas { justify-content: flex-start; } [data-skin="surface"] .hero__stage { order: 2; display: grid; border-inline-start: 0; border-radius: 0 var(--radius-md) var(--radius-md) 0; } /* Lado a lado, o quadro deixa de ter proporção própria e passa a ter a ALTURA DA CÉLULA VIZINHA: é assim que as duas colunas fecham na mesma linha de base e o filete não sobra para nenhum lado. O piso de 18rem protege o caso em que a copy encolhe (tela baixa, --scale pequeno). */ [data-skin="surface"] .hero__media { aspect-ratio: auto; block-size: 100%; min-block-size: 18rem; max-width: none; } } /* -------------------------------------------------------------------------- 6. A MATRIZ Técnica única, repetida em sete seções, sempre a mesma receita: contêiner gap: var(--hairline) background-color: hsl(var(--card)) border: var(--hairline) solid hsl(var(--border)) border-radius: var(--radius-md) overflow: hidden célula border: 0; border-radius: 0 background-color: hsl(var(--card)) box-shadow: var(--sf-ring) /* 0 0 0 1px hsl(border) */ O filete é um ANEL de 1px desenhado por fora de cada célula, e o gap de 1px é exatamente a folga que ele ocupa. Duas células vizinhas desenham o anel na mesma faixa de 1px, então a linha é sempre 1px, nunca 2, e os cruzamentos fecham perfeitos. Na borda externa o anel é recortado pelo overflow: hidden do contêiner e quem aparece é a borda do contêiner, de novo 1px. POR QUE ANEL E NÃO "GAP SOBRE FUNDO COLORIDO" A primeira versão pintava o contêiner com a cor da borda e deixava o gap revelar esse fundo. Funciona enquanto TODA célula da grade existe, e quebra no primeiro buraco: o catálogo GovTech tem 27 produtos em uma grade de seis colunas, sobram três células na última linha, e ali o fundo do contêiner aparecia como um retângulo cinza sólido de meia largura. Medido na captura de 1280x800. O anel não tem esse problema, porque a cor da linha pertence à célula e não ao contêiner: onde não há célula não há linha, e o buraco fica com a mesma superfície do resto da grade. O mesmo vale para o portfólio quando o filtro por vertical deixa uma linha incompleta. Consequência obrigatória: a célula tem que preencher a linha. Onde a folha de seção alinhava ao topo, a pele volta a esticar (divergência "b" do cabeçalho). Consequência de acessibilidade: com overflow: hidden no contêiner, um outline com offset positivo seria cortado nas bordas. Toda célula focável dentro de matriz usa outline-offset negativo, o anel interno da referência. -------------------------------------------------------------------------- */ /* 6.1 provas: régua de células, números em mono tabular ------------------- */ [data-skin="surface"] .stat-rail { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: var(--hairline); padding-block: 0; border: var(--hairline) solid hsl(var(--border)); border-block-width: var(--hairline); border-radius: var(--radius-md); background-color: hsl(var(--card)); overflow: hidden; } /* #provas tem seletores com id em sections/provas.css (especificidade 1,2,0) que devolvem borda e recuo às células em telas estreitas e em paisagem baixa. Um seletor de classe nunca venceria aquilo, por mais tarde que carregue: a pele precisa do mesmo id na frente. */ [data-skin="surface"] .stat-rail .stat, [data-skin="surface"] #provas .stat-rail .stat, [data-skin="surface"] #govtech .stat-rail .stat { padding: var(--space-5); border: 0; background-color: hsl(var(--card)); box-shadow: var(--sf-ring); } [data-skin="surface"] .stat__value { font-family: var(--font-mono); font-size: calc(var(--fs-h2) * 0.82); font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } [data-skin="surface"] .stat__unit { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 500; color: hsl(var(--muted-foreground)); } [data-skin="surface"] .stat__label { font-family: var(--font-body); font-size: var(--fs-xs); letter-spacing: 0; text-transform: none; color: hsl(var(--muted-foreground)); } /* --faint-foreground, nao alfa sobre --muted-foreground: a forma literal proibida pelo §2.5. Passava hoje (5,25:1 claro, 6,08:1 escuro) mas queimava um terco da folga, e desfazia nesta pele a correcao de sections/provas.css no elemento exato que a motivou, por carregar depois e com especificidade maior. Com --pattern e densidade expostos no estudio, o que esta atras muda e a aposta quebra. */ [data-skin="surface"] .provas .stat__note { font-size: var(--fs-xs); color: hsl(var(--faint-foreground)); } /* 6.2 capacidades: seis linhas de matriz mais a coluna de apoio ----------- */ [data-skin="surface"] .capacidades__body { gap: var(--hairline); align-items: stretch; border: var(--hairline) solid hsl(var(--border)); border-radius: var(--radius-md); background-color: hsl(var(--card)); overflow: hidden; } /* MÍDIA À ESQUERDA: mesma inversão de sections/capacidades.css §1 (pedido do dono, 31/08/2026). A coluna estreita passa a ser a primeira faixa física; quem já move .capacidades__stage para lá é o `order: -1` do arquivo- fábrica (não escopado por pele), então esta folha só redefine largura. */ @media (min-width: 880px) { [data-skin="surface"] .capacidades__body { grid-template-columns: minmax(min(100%, 260px), 340px) minmax(0, 1fr); } } @media (min-width: 1560px) { [data-skin="surface"] .capacidades__body { grid-template-columns: minmax(min(100%, 300px), 380px) minmax(0, 1fr); } } /* A lista é os dois papéis ao mesmo tempo: célula da grade externa (por isso o anel) e contêiner das seis linhas (por isso o gap). align-self: start (achado de alinhamento, 01/09/2026): .capacidades__body estica as duas colunas (§6.2) para o vídeo ficar mais alto que as seis linhas de accordion, e a lista esticada com align-content: start deixava uma faixa vazia com o próprio anel desenhado em volta, abaixo do último item. align-self tira só a LISTA do estica-mento; a célula volta a medir a própria altura, e a coluna de vídeo continua alta do mesmo jeito. */ /* A lista fecha na mesma linha do mural ao lado (01/09/2026, achado da auditoria de gosto). `align-self: start` tirou a sobra de dentro da lista, mas o painel continuava acompanhando a coluna mais alta e sobravam 44px de caixa vazia com filete em volta, abaixo de "Operação contínua". Voltando a esticar e distribuindo a folga entre as seis linhas, a moldura acaba onde o conteúdo acaba — mesma solução dos quatro motores de #govtech. */ [data-skin="surface"] .capacidades__list { gap: var(--hairline); align-content: space-between; align-self: stretch; background-color: hsl(var(--card)); box-shadow: var(--sf-ring); } [data-skin="surface"] .capacidades__item { border: 0; border-radius: 0; background-color: hsl(var(--card)); box-shadow: var(--sf-ring); } /* Linha aberta: a superfície muda, como a célula em foco da referência. */ [data-skin="surface"] .capacidades__list .capacidades__item:has(.capacidades__trigger[aria-expanded="true"]) { background-color: hsl(var(--surface-2)); } [data-skin="surface"] .capacidades__trigger { gap: var(--space-3); padding: var(--space-4) var(--space-5); } [data-skin="surface"] .capacidades__trigger:hover { background-color: hsl(var(--surface-2)); } [data-skin="surface"] .capacidades__trigger-title { font-size: var(--fs-base); font-weight: 600; letter-spacing: -0.012em; } /* Achado da varredura de contraste desta rodada, não estava na tabela de defeitos. sections/capacidades.css escreve o índice como hsl(var(--muted-foreground) / 0.6), ou seja, o token chega ali já rebaixado por alfa, do mesmo jeito que o rótulo de nota do portfólio (ver o comentário de --muted-foreground no §1). Sobre a célula desta pele isso dava 3,66:1 no escuro e 2,91:1 no claro, abaixo dos 4,5:1 do §8, e "01" a "06" é numeração de conteúdo, não ornamento: é ela que amarra a linha aberta ao índice da capacidade. A pele resolve como resolve todo dado secundário seu, com o token inteiro e sem alfa: medido 7,17:1 no escuro e 7,43:1 no claro sobre a linha aberta (--surface-2), 7,9:1 e 7,86:1 sobre a linha em repouso (--card). A tinta mais escura é o preço do ambiente, nunca o texto mais fraco. O mesmo defeito existe nas peles default (3,36:1 e 2,43:1) e glass (3,63:1 e 2,98:1), e a correção de lá não cabe neste arquivo: mora em sections/capacidades.css, que esta pele não pode tocar. */ [data-skin="surface"] .capacidades__index { color: hsl(var(--muted-foreground)); } /* Ícone quadrado de 6px, do tamanho de um ícone de tabela, não de um selo. */ [data-skin="surface"] .capacidades__trigger-icon { inline-size: var(--space-8); block-size: var(--space-8); border-radius: var(--radius-cell); background-color: hsl(var(--secondary)); color: hsl(var(--foreground)); } [data-skin="surface"] .capacidades__trigger[aria-expanded="true"] .capacidades__trigger-icon { background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); } [data-skin="surface"] .capacidades__pulse { display: none; } [data-skin="surface"] .capacidades__panel-inner { padding: 0 var(--space-5) var(--space-5); padding-inline-start: calc(var(--space-5) + var(--space-8) + var(--space-3)); } [data-skin="surface"] .capacidades__markers .badge { font-family: var(--font-body); font-size: var(--fs-xs); letter-spacing: 0; text-transform: none; background-color: hsl(var(--surface-2)); color: hsl(var(--muted-foreground)); } /* Coluna de apoio: célula da mesma matriz, então não pode ser sticky (o ancestral tem overflow: hidden) nem ter caixa própria. SEM align-content: start (rodada do "espaço em branco", captura do dono). A célula já chega esticada até a altura da lista (align-items: stretch em .capacidades__body, §6.2), mas "start" empacotava a única linha da grade interna no próprio tamanho do vídeo, sobrando cartão vazio embaixo dele — com --card, sombra e tudo, então o vazio aparecia como parte da célula. Sem a declaração, o padrão do grid ("normal") estica a linha inteira até a altura do container, e .capacidades__media (abaixo) preenche. */ [data-skin="surface"] .capacidades__stage { position: static; gap: var(--space-4); padding: var(--space-5); background-color: hsl(var(--card)); box-shadow: var(--sf-ring); } [data-skin="surface"] .capacidades__media { /* ALTURA SEGUE A LISTA, NÃO O VÍDEO (mesma correção de sections/capacidades.css §5): a proporção 9/16 travava a altura pela LARGURA da célula, curta demais frente à lista de seis linhas. --auto desliga o aspect-ratio, block-size: 100% preenche a célula esticada acima, e object-fit: cover (04-sections.css) corta o vídeo em vez de deixar vazio. */ --media-ratio: auto; block-size: 100%; border-radius: var(--radius-cell); } [data-skin="surface"] .capacidades__stage-badge { padding: var(--space-3) var(--space-4); border-radius: var(--radius-cell); background-color: hsl(var(--surface-2)); } [data-skin="surface"] .capacidades__stage-icon { inline-size: var(--space-8); block-size: var(--space-8); border-radius: var(--radius-cell); background-color: hsl(var(--secondary)); color: hsl(var(--foreground)); } /* 6.3 tese: matriz 2x2 --------------------------------------------------- */ [data-skin="surface"] .tese__layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); } /* O layout com mural tem duas colunas próprias (sections/tese.css): texto de um lado, imagens passando do outro. A regra de coluna única acima é da matriz da pele e venceria por especificidade, deixando o mural embaixo do texto — que foi o que apareceu na primeira captura. */ @media (min-width: 1024px) { [data-skin="surface"] .tese__layout--mural { grid-template-columns: minmax(0, 1fr) minmax(0, 0.5fr); grid-template-rows: auto minmax(0, 1fr); column-gap: var(--space-8); row-gap: 0; align-items: stretch; } } [data-skin="surface"] .tese__intro { position: static; } [data-skin="surface"] .tese__list { grid-template-columns: minmax(0, 1fr); gap: var(--hairline); column-gap: var(--hairline); row-gap: var(--hairline); border: var(--hairline) solid hsl(var(--border)); border-radius: var(--radius-md); background-color: hsl(var(--card)); overflow: hidden; } @media (min-width: 760px) { [data-skin="surface"] .tese__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* MOSAICO ASSIMÉTRICO a partir de 1180px (31/08/2026, duas voltas do dono: primeiro "muito texto, faz algo diferente", depois "assimetria aqui, está faltando"). A régua de quatro colunas iguais resolveu o texto mas manteve o desenho de tabela. Agora são 6 trilhas e o span vem da POSIÇÃO: 4+2 na primeira linha, 2+4 na segunda, então o bloco largo troca de lado a cada fileira e nenhuma coluna fica estreita demais para o texto. Abaixo de 1180px continua 2x2, e abaixo de 760px, uma coluna. */ @media (min-width: 1180px) { [data-skin="surface"] .tese__list { grid-template-columns: repeat(6, minmax(0, 1fr)); } [data-skin="surface"] .tese__list > .tese-block:nth-child(1), [data-skin="surface"] .tese__list > .tese-block:nth-child(4) { grid-column: span 4; } [data-skin="surface"] .tese__list > .tese-block:nth-child(2), [data-skin="surface"] .tese__list > .tese-block:nth-child(3) { grid-column: span 2; } } [data-skin="surface"] .tese-block { max-width: none; /* Respiro de 6 para 7 (31/08/2026): o dono viu o bloco apertado contra a borda da célula. Sete e não oito porque o oitavo degrau roubava largura demais da coluna estreita e empurrava o texto para cinco linhas. */ padding: var(--space-7); background-color: hsl(var(--card)); box-shadow: var(--sf-ring); } /* REDESENHO (31/08/2026, pedido do dono: "muito simples essa section" — quatro células com filete e nada mais). O numeral ganha a escala de DISPLAY que sections/tese.css já define (var(--fs-mega); aqui herda o próprio --fs-mega desta pele, 4rem no teto, não o 8rem de index.html, porque a variável é lida no escopo de [data-skin="surface"]) e a régua + marcador do bloco base passam a valer dentro da célula também: a divisão da matriz (--sf-ring) continua fechando o desenho por fora, e agora a célula tem uma segunda camada de hierarquia por dentro, numeral fino e enorme atrás, régua+marcador+título grosso na frente — não precisa mais ficar "quatro caixas com filete e nada mais". Nenhum selector próprio para a régua/marcador: o de sections/tese.css já serve, só o token --fs-mega muda de valor por pele. */ [data-skin="surface"] .tese-block__num { color: hsl(var(--faint-foreground)); } /* Baseline consistente entre as quatro células (varredura "superfície", 06/08/2026, mantida no redesenho acima). Pedido do dono, com captura: numeral e texto desalinhados entre colunas na matriz da tese. Causa raiz medida — o bloco 04 ("Entendemos compras regulamentadas...") é o único título de duas linhas do conjunto; sem reserva de altura, "04" ficava mais baixo que "01"/"02"/"03" (título de uma linha só) e o parágrafo abaixo herdava o mesmo deslocamento — a leitura de tabela quebrava exatamente onde uma tabela não pode quebrar, na borda entre colunas da mesma linha. min-block-size no título RESERVA a altura de duas linhas em TODA célula, não só na que precisa: a posição inicial do parágrafo fica idêntica nas quatro, e não só dentro da mesma linha da grade — uma baseline só, de ponta a ponta, que é a leitura de tabela que o resto do arquivo persegue. line-height explícito porque a conta acima é feita em cima de --lh-tight: o título precisa realmente usar --lh-tight, não herdar o line-height de h3 de outra camada. */ [data-skin="surface"] .tese-block__title { min-block-size: calc(var(--fs-h3) * var(--lh-tight) * 2); font-size: var(--fs-h3); line-height: var(--lh-tight); } [data-skin="surface"] .tese-block__text { margin-block-start: var(--space-3); font-size: var(--fs-sm); } /* 6.4 modelos: quatro colunas contíguas ---------------------------------- */ [data-skin="surface"] .modelos__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--hairline); border: var(--hairline) solid hsl(var(--border)); border-radius: var(--radius-md); background-color: hsl(var(--card)); overflow: hidden; } /* O item de grade vira grade ele mesmo para o cartão esticar até a altura da linha: célula que não preenche a linha rasga a matriz. */ [data-skin="surface"] .modelos__item { display: grid; } @media (max-width: 1023px) { [data-skin="surface"] .modelos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 519px) { [data-skin="surface"] .modelos__grid { grid-template-columns: minmax(0, 1fr); } } /* CORREÇÃO da varredura "surface" (agosto/2026): cartões maiores, por pedido do dono ("mais respiro/presença na matriz"). Piso e teto sobem ~15% sobre os valores antigos (18rem/23rem → 20rem/26rem), com a rampa em vw um pouco mais aberta para a curva continuar suave entre os dois. */ [data-skin="surface"] .modelos__card { border: 0; border-radius: 0; min-height: clamp(20rem, 15.5rem + 9vw, 26rem); box-shadow: var(--sf-ring); } [data-skin="surface"] .modelos__card:focus-visible { outline-offset: -2px; } [data-skin="surface"] .modelos__content { padding: var(--space-5); gap: var(--space-2); } /* min-block-size EM CADA UM (achado de alinhamento, 01/09/2026): a matriz de 4 colunas desta pele põe os cartões lado a lado, e .modelos__content é ancorado no rodapé do cartão (justify-content: flex-end, folha-fábrica). Título e texto de B2B/B2C/B2G/white label têm comprimentos diferentes; quando um deles quebra em mais ou menos linhas que os outros (medido: só em algumas larguras de item, ex. 1024px), a altura total do bloco muda e o selo/título/texto de CADA cartão nasce numa régua diferente da dos vizinhos. Reservar 2 linhas de título e 4 de texto (o pior caso medido em toda a faixa de larguras da matriz) trava a altura do bloco inteiro, e a régua passa a ser a mesma em qualquer largura, com qualquer quebra real. */ [data-skin="surface"] .modelos__card-title { font-size: var(--fs-base); font-weight: 600; min-block-size: calc(var(--fs-base) * var(--lh-tight) * 2); } [data-skin="surface"] .modelos__card-text { font-size: var(--fs-xs); line-height: 1.5; min-block-size: calc(var(--fs-xs) * 1.5 * 4); } [data-skin="surface"] .modelos__numeral { inset-block-start: var(--space-4); inset-inline-end: var(--space-5); font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 500; } [data-skin="surface"] .modelos__cta { font-family: var(--font-body); font-size: var(--fs-xs); letter-spacing: 0; text-transform: none; } /* Coluna de destaque REMOVIDA na varredura "surface" (agosto/2026). Era um filete de 3px em --primary (branco no escuro) cravado no topo do primeiro cartão, "no espírito da coluna recomendada da referência" (pricing table, onde uma barra colorida sinaliza o plano indicado). O problema é que #modelos não é uma pricing table: os quatro cartões (B2B/B2C/B2G/white label) são modelos de NEGÓCIO equivalentes, não planos para o visitante comparar e escolher — não existe "recomendado" no conteúdo (content.js não declara nada do tipo, e inventar um seria claim falso, §9.2). Sem rótulo e sem correspondência semântica, a barra lia como o próprio dono relatou: "lascas de imagem no topo do primeiro card" — um traço claro e sem explicação, indistinguível de um artefato de render. Removida por inteiro; a assinatura da matriz (filetes de 1px entre células) continua intocada, ela nunca dependeu deste acento. */ /* 6.5 portfolio: grade de células coladas -------------------------------- */ /* A divergência "b" (CÉLULAS ESTICADAS) CAIU. O contrato §12.2 já a registrava sob objeção, com a alternativa escrita: "ou a célula distribui o conteúdo no espaço que sobra, ou a divergência cai". Medido nesta rodada, antes de mexer: a célula do CEB IPes tinha 557px de vazio dentro de 792px em 1920x1080 (70,3%) e a da MAIA 467px dentro de 773px em 1280x800 (60,4%). Esticar a célula era a causa direta, e distribuir aquele tanto de folga entre dois parágrafos não produz tabela, produz dois parágrafos perdidos. O filete não depende do esticão: cada célula desenha o próprio anel de 1px (--sf-ring) e o gap de 1px faz os anéis de células vizinhas coincidirem em um traço só. O que se perde é a régua na base da última célula de cada linha, e é exatamente esse o preço que o contrato autorizou pagar. O alinhamento por altura de conteúdo vem de sections/portfolio.css, que agora vale igual nas três peles. */ [data-skin="surface"] .portfolio__grid { gap: var(--hairline); align-content: start; border: var(--hairline) solid hsl(var(--border)); border-radius: var(--radius-md); background-color: hsl(var(--card)); overflow: hidden; } [data-skin="surface"] .portfolio__card { border: 0; border-radius: 0; background-color: hsl(var(--card)); box-shadow: var(--sf-ring); } [data-skin="surface"] .portfolio__card:hover, [data-skin="surface"] .portfolio__card:focus-within { transform: none; border-color: transparent; background-color: hsl(var(--surface-2)); } [data-skin="surface"] .portfolio__card-media { border-block-end-color: hsl(var(--border)); } [data-skin="surface"] .portfolio__tagline { font-size: var(--fs-base); font-weight: 600; letter-spacing: -0.012em; } [data-skin="surface"] .portfolio__card-body { gap: var(--space-4); } [data-skin="surface"] .portfolio__meta { font-family: var(--font-body); font-size: var(--fs-xs); letter-spacing: 0; text-transform: none; } /* Segundo achado da varredura. sections/portfolio.css pinta o separador da linha de metadados com hsl(var(--border)), que é tinta de DIVISOR, não de texto: sobre a célula desta pele o ponto media 1,47:1 no escuro e 1,25:1 no claro. O efeito não é cosmético, é de leitura, porque a linha inteira colapsa para "Água e saneamento Produto proprietário" sem nada separando os dois campos. Volta a ser o mesmo --muted-foreground do resto da linha, que é o que a própria .portfolio__meta já usa e que está medido em 7,9:1 no escuro e 7,86:1 no claro. A subordinação do ponto continua existindo: ela vem dos espaços em volta e do tamanho do glifo, não de tinta ilegível. Nas peles default (1,30:1 e 1,25:1) e glass (1,00:1 e 1,25:1) o mesmo separador reprova, e a correção de lá é em sections/portfolio.css. */ [data-skin="surface"] .portfolio__meta-sep { color: hsl(var(--muted-foreground)); } [data-skin="surface"] .portfolio__badge { font-family: var(--font-mono); font-size: var(--fs-mono); } [data-skin="surface"] .portfolio__toolbar { padding-block-end: var(--space-5); margin-block-end: 0; border-block-end: var(--hairline) solid hsl(var(--border)); } /* A grade encosta no mostruário de verticais: uma matriz não flutua abaixo de uma faixa, ela começa onde a faixa termina. */ [data-skin="surface"] .portfolio__grid { margin-block-start: var(--space-6); } /* [data-skin="surface"] .portfolio__status saiu na rodada "mostruário" (agosto de 2026): o elemento (contagem sr-only, existia só para anunciar o resultado de um filtro clicável) não existe mais no HTML — sem filtro, não há resultado para contar (verticalItems(), partials/portfolio.js). Grep confirmado antes de apagar: nenhum outro seletor deste arquivo depende de `.portfolio__status`. */ /* Varredura "surface" (agosto/2026): o dono relatou o rail de verticais "colidindo com a linha dos filtros" (sobreposição visível). Reproduzido com o harness de captura (headless-shell, metrics de viewport honestos — ver nota de ambiente do relatório): de 360px a 2000px, claro e escuro, a margem entre o fim do rail e o início da barra de filtros nunca fechou (mínimo medido: ~20px). Pode ser diferença de motor de renderização (fonte/hinting) entre o harness e o navegador do dono. Sem reproduzir uma colisão de verdade para corrigir a causa, a resposta é abrir mais fôlego aqui — nunca reduz legibilidade, e tira qualquer viewport/fonte da faixa de risco onde os dois blocos quase se tocavam. */ [data-skin="surface"] .portfolio__rail { margin-block: var(--space-8) var(--space-8); padding-block: var(--space-2); } [data-skin="surface"] .portfolio__rail-item { font-family: var(--font-body); font-size: var(--fs-xs); letter-spacing: 0; text-transform: none; } /* Terceiro achado da varredura, e este é da própria pele: o alfa 0.5 daqui deixava o marcador do rail em 2,94:1 no escuro e 2,36:1 no claro. É o mesmo caso do separador da linha de metadados, logo acima, e recebe a mesma resposta: o token inteiro, sem alfa. Pseudo-elemento com glifo é texto renderizado e o §8 vale igual. */ [data-skin="surface"] .portfolio__rail-item::after { color: hsl(var(--muted-foreground)); } [data-skin="surface"] .portfolio__note { padding-block-start: var(--space-3); } /* 6.6 govtech: painéis contíguos e 27 chips densos em grade -------------- */ [data-skin="surface"] .govtech .container > * + * { margin-block-start: var(--space-10); } [data-skin="surface"] .govtech-ressalva { padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); border-inline-start-width: calc(var(--hairline) * 3); background-color: hsl(var(--surface-2)); } [data-skin="surface"] .govtech-ressalva__text { font-size: var(--fs-sm); } [data-skin="surface"] .govtech-panels { gap: var(--hairline); border: var(--hairline) solid hsl(var(--border)); border-radius: var(--radius-md); background-color: hsl(var(--card)); overflow: hidden; align-items: stretch; } [data-skin="surface"] .govtech-panels > .card { border: 0; border-radius: 0; background-color: hsl(var(--card)); box-shadow: var(--sf-ring); } [data-skin="surface"] .govtech-panel__title { margin-block-end: var(--space-4); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: hsl(var(--muted-foreground)); } [data-skin="surface"] .govtech-familia__track { block-size: calc(var(--space-2) * 0.7); border-radius: var(--radius-sm); background-color: hsl(var(--secondary)); } [data-skin="surface"] .govtech-familia__fill { border-radius: var(--radius-sm); } /* Bloco de identidade (ícone + código, sections/govtech.css §4) acompanha o ícone menor desta pele (--space-9, não --space-11 de fábrica) e o raio "denso" (--radius-cell) que o resto da matriz surface usa — sem isso o selo ficaria largo demais para o ícone compacto e reabriria o vão vazio que a correção de §4 resolveu. */ [data-skin="surface"] .govtech-motor__id { --govtech-icon-size: var(--space-9); border-radius: var(--radius-cell); } [data-skin="surface"] .govtech-motor__icon { background-color: hsl(var(--secondary)); color: hsl(var(--foreground)); font-size: var(--fs-base); } /* Os 27 produtos: matriz de células, não nuvem de pílulas. */ [data-skin="surface"] .govtech-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: var(--hairline); border: var(--hairline) solid hsl(var(--border)); border-radius: var(--radius-md); background-color: hsl(var(--card)); overflow: hidden; } [data-skin="surface"] .govtech-chips .govtech-chip { display: flex; inline-size: 100%; block-size: 100%; align-items: center; justify-content: flex-start; padding: var(--space-3) var(--space-4); border: 0; border-radius: 0; background-color: hsl(var(--card)); color: hsl(var(--foreground)); font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 500; line-height: 1.4; letter-spacing: 0; text-transform: none; white-space: normal; box-shadow: var(--sf-ring); } [data-skin="surface"] .govtech-inco { border-radius: var(--radius-md); } [data-skin="surface"] .govtech-inco__body { padding: var(--space-6); gap: var(--space-3); } [data-skin="surface"] .govtech-inco__stat-value { font-family: var(--font-mono); font-weight: 500; } [data-skin="surface"] .govtech-inco__stat-label, [data-skin="surface"] .govtech-inco__pais, [data-skin="surface"] .govtech-legal__chip { font-family: var(--font-body); font-size: var(--fs-xs); letter-spacing: 0; text-transform: none; } [data-skin="surface"] .govtech-footer { padding-block-start: var(--space-6); } /* 6.7 confianca: tabela de perguntas ------------------------------------- Uma linha por resposta, de borda a borda, com índice, pergunta e resposta em faixas alinhadas. É o componente de FAQ da referência no estado aberto. Sem chevron, pelo motivo registrado na divergência "c" do cabeçalho. Os seletores de sections/confianca.css que precisam ser vencidos vivem dentro de uma container query e chegam a (0,3,0) no último item; por isso a pele qualifica pelo contêiner e ganha um degrau de especificidade. */ /* A PELE CEDE O LAYOUT DA CONFIANÇA (31/08/2026). O que existia aqui era uma tabela de linha única — número, título e resposta em três colunas, uma linha por item — e é exatamente o "isso lê como tabela" que o dono pediu para acabar. Como esta é a pele publicada, o mosaico de sections/confianca.css não aparecia para visitante nenhum enquanto este bloco vencia. A pele mantém o que é dela (superfície opaca, filete, aresta reta, escala tipográfica) e devolve a GRADE para a folha da seção. */ [data-skin="surface"] .confianca__grid { border: 0; border-radius: 0; background-color: transparent; overflow: visible; } [data-skin="surface"] .confianca__grid .confianca__item { border: var(--hairline) solid hsl(var(--border)); border-radius: var(--radius-md); background-color: hsl(var(--card)); box-shadow: var(--sf-ring); } [data-skin="surface"] .confianca__num { font-family: var(--font-mono); font-size: var(--fs-xs); color: hsl(var(--muted-foreground)); } [data-skin="surface"] .confianca__a { color: hsl(var(--muted-foreground)); } /* 6.8 contratacao: as cinco vias como linhas de comparação --------------- */ [data-skin="surface"] .contratacao__spotlight { gap: var(--space-4); margin-block-end: var(--space-6); padding: var(--space-5) var(--space-6); border-radius: var(--radius-md); border-color: hsl(var(--border)); background: hsl(var(--surface-2)); box-shadow: none; } [data-skin="surface"] .contratacao__spotlight-icon { inline-size: var(--space-10); block-size: var(--space-10); border-radius: var(--radius-cell); background-color: hsl(var(--secondary)); color: hsl(var(--foreground)); font-size: var(--fs-base); } [data-skin="surface"] .contratacao__spotlight-title { font-size: var(--fs-base); font-weight: 600; } [data-skin="surface"] .contratacao__grid { grid-template-columns: minmax(0, 1fr); gap: var(--hairline); border: var(--hairline) solid hsl(var(--border)); border-radius: var(--radius-md); background-color: hsl(var(--card)); overflow: hidden; } [data-skin="surface"] .contratacao__item { border: 0; border-radius: 0; background-color: hsl(var(--card)); box-shadow: var(--sf-ring); } [data-skin="surface"] .contratacao__item:hover { border-color: transparent; background-color: hsl(var(--surface-2)); } [data-skin="surface"] .contratacao__item .card__body { padding: var(--space-4) var(--space-5); padding-block-start: var(--space-4); gap: var(--space-3); } [data-skin="surface"] .contratacao__item-icon { inline-size: var(--space-8); block-size: var(--space-8); margin-block-end: 0; border-radius: var(--radius-cell); background-color: hsl(var(--secondary)); color: hsl(var(--foreground)); font-size: var(--fs-sm); } [data-skin="surface"] .contratacao__item .card__title { font-size: var(--fs-base); } [data-skin="surface"] .contratacao__item .card__desc { font-size: var(--fs-sm); } /* Linha de comparação de verdade a partir de 900px: ícone, título, texto e índice em quatro faixas alinhadas entre as cinco vias. A colocação é explícita porque a ordem do DOM (índice, ícone, título, texto) não é a ordem visual, e o partial não pode ser tocado. 01/09/2026, dono: "aqui chega o texto mais pra esquerda, tá mt distante". A coluna de título tinha 17rem (299px) fixos para caber qualquer título nas 5 vias e nos 5 idiomas, mas o mais longo (pt "Contratação pública") só usa 151px — o resto virava vão morto de até 235px antes da descrição começar. 12rem (211px) ainda cobre o título mais longo medido em pt/en/es/de/ru com folga (~150-170px) e cai o vão pela metade sem arriscar quebra de linha no título em nenhum idioma. */ @media (min-width: 900px) { [data-skin="surface"] .contratacao__item .card__body { grid-template-columns: auto minmax(0, 12rem) minmax(0, 1fr) auto; align-items: start; column-gap: var(--space-6); padding-block: var(--space-5); } [data-skin="surface"] .contratacao__item .contratacao__item-icon { grid-column: 1; grid-row: 1; } [data-skin="surface"] .contratacao__item .card__title { grid-column: 2; grid-row: 1; align-self: center; } /* Teto de medida (01/09/2026, achado da auditoria de gosto): a coluna de descrição herdava toda a largura que sobrava — 789px em 1440 e 1016px em 1920 — e a linha chegava a 107 caracteres, contra a faixa confortável de 45 a 75. O texto é para leitor jurídico e de compras, que lê linha por linha; a caixa continua ocupando a coluna, só o texto para antes. */ [data-skin="surface"] .contratacao__item .card__desc { grid-column: 3; grid-row: 1; align-self: center; max-width: min(100%, 76ch); } [data-skin="surface"] .contratacao__item .contratacao__item-index { position: static; grid-column: 4; grid-row: 1; align-self: center; justify-self: end; } } /* -------------------------------------------------------------------------- 7. Seções sóbrias metodo, cases, contato e footer não são tabulares e não viram matriz. O que muda é o vocabulário: aresta reta, filete no lugar da sombra, dado em mono, nenhum degradê de marca. -------------------------------------------------------------------------- */ /* metodo */ [data-skin="surface"] .metodo__layout { gap: var(--space-8); } /* O nó da etapa tem DOIS estados, e a pele precisa redefinir o PAR nos dois (§12): trocar a superfície e herdar o primeiro plano do estado antigo é exatamente o que produz texto invisível. O que estava errado: esta regra trocava o fundo do nó (--primary para --surface-2) com especificidade (0,2,0) e carga posterior, então ela também vencia o background-color de .metodo__node[data-metodo-active] em sections/metodo.css, que tem os mesmos (0,2,0) e carrega antes. Sobrava o color: hsl(var(--primary-foreground)) daquela regra em cima de --surface-2: rgb(15,15,15) sobre rgb(33,33,33) no escuro (1,19:1) e rgb(250,250,250) sobre rgb(249,249,249) no claro (1,01:1), contra os 4,5:1 do §8. As cinco etapas ficam ativas depois que a linha de progresso passa, então a coluna inteira de numeração 01 a 05 sumia. Nas peles default e glass o mesmo elemento media 18,36:1 e 17,18:1. Repouso: --muted-foreground sobre --surface-2, medido 7,17:1 no escuro e 7,43:1 no claro. Ativo: o par --primary / --primary-foreground volta INTEIRO, na mesma regra, medido 18,86:1 no escuro e 17,93:1 no claro. */ [data-skin="surface"] .metodo__node { border-radius: var(--radius-cell); background-color: hsl(var(--surface-2)); color: hsl(var(--muted-foreground)); font-size: var(--fs-mono); } [data-skin="surface"] .metodo__node[data-metodo-active] { transform: none; background-color: hsl(var(--primary)); border-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); } [data-skin="surface"] .metodo__line { inline-size: var(--hairline); border-radius: 0; background-color: hsl(var(--border)); } [data-skin="surface"] .metodo__line-fill { background-image: none; background-color: hsl(var(--primary)); } [data-skin="surface"] .metodo__title { font-weight: 600; } /* SEM MONO na legenda (01/09/2026, achado do dono: "está usando title, subtitle, descritivo... com fontes diferentes"). Esta regra trocava a legenda por --font-mono maiúsculo, e a legenda é frase corrida, não rótulo curto — era o mono no meio do texto que a folha de base agora proíbe. Sem override aqui a legenda herda o par de sections/metodo.css (mesmo tratamento do rótulo "Entregável", nível 2 dos três da etapa). */ /* .metodo__entregavel entra na MESMA regra que .metodo__text: a pele reduz o corpo em um degrau (fs-base para fs-sm) e a lista de entregáveis reusa esse par, então precisa encolher junto — senão os dois voltam a divergir e reabre o quarto tratamento. */ [data-skin="surface"] .metodo__text, [data-skin="surface"] .metodo__entregavel { font-size: var(--fs-sm); } /* cases */ /* CORREÇÃO da varredura "surface" (agosto/2026): o filete vertical fixo do §2 (body::before, "os FILETES DO CONTAINER") é calibrado na rampa de .container (1240px / 1420px / 1600px, §7.3 de 02-base.css) — é essa largura que o campo inteiro usa como referência, e é contra ela que as bordas das matrizes (provas, capacidades, tese, modelos, confianca, contratacao, todas em .container simples) se alinham. #cases é a exceção: sections/cases.css e 02-base.css marcam a seção como uma das "de grade densa" que usam .container--wide (junto de portfolio, govtech e a barra do header, §7.3), 1600px de teto INCONDICIONAL, sem acompanhar a rampa abaixo de 1560px. Só que cases não é matriz nesta pele (§7 do mapa do arquivo, "onde não encaixou") — o conteúdo dela (moldura de mídia e bloco de texto) fica direto sobre o campo, sem célula opaca por baixo. Resultado medido em 1440px: .container--wide media ~1332px de conteúdo, o par de guias media 1200px centralizado — a guia da direita caía ~46px DENTRO de .case-block__body, cortando o texto ("Restrição", "Alternativa descartada"...) ao meio. Em portfolio/govtech o mesmo descompasso existe, mas o conteúdo deles é célula opaca (--card/--surface-* por cima do campo), então a guia fica escondida atrás da própria matriz; em cases não há célula, então ela cortava por cima do texto — "um filete vertical atravessando o conteúdo dos cases", no relato do dono. Fix: cases volta a acompanhar a MESMA rampa do guia (não o teto fixo de .container--wide), nos mesmos dois degraus do §7.3. .container--wide segue intocado nas outras quatro peles e em portfolio/govtech/header dentro desta — a regra abaixo só pega o container de dentro de #cases. */ [data-skin="surface"] #cases > .container--wide { max-width: var(--container); } @media (min-width: 1560px) { [data-skin="surface"] #cases > .container--wide { max-width: calc(var(--container) + (var(--container-wide) - var(--container)) * 0.5); } } @media (min-width: 1900px) { [data-skin="surface"] #cases > .container--wide { max-width: var(--container-wide); } } [data-skin="surface"] .case-block__frame { border-radius: var(--radius-md); } /* Um degrau abaixo do h2 da seção (auditoria de gosto, 01/09/2026, achado 2 — a regra desta pele vence sections/cases.css por especificidade de atributo, então o degrau precisa ser repetido aqui). */ [data-skin="surface"] .case-block__title { font-size: var(--fs-h3); letter-spacing: -0.024em; } [data-skin="surface"] .case-block__resumo { font-size: var(--fs-base); } [data-skin="surface"] .case-block__vertical { color: hsl(var(--muted-foreground)); } [data-skin="surface"] .case-block__facts { gap: var(--space-4); } [data-skin="surface"] .case-block__fact-label { font-family: var(--font-body); font-size: var(--fs-xs); letter-spacing: 0; text-transform: none; } [data-skin="surface"] .case-block__stat .stat__value { font-family: var(--font-mono); } /* contato */ [data-skin="surface"] .contato__grid { gap: var(--space-10); } [data-skin="surface"] .contato__email { font-size: var(--fs-h3); font-weight: 600; } [data-skin="surface"] .contato__frame { border-radius: var(--radius-md); } /* O feixe que atravessa a moldura é efeito de marketing; esta pele não tem nenhum. A duração já era gated por --motion; aqui a camada some por completo, sem sobrar quadro parado. */ [data-skin="surface"] .contato__beam { display: none; } /* footer */ [data-skin="surface"] .section--band { background-color: hsl(var(--surface-2)); border-block-start: var(--hairline) solid hsl(var(--border)); } [data-skin="surface"] .footer__col-title { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0; text-transform: none; color: hsl(var(--muted-foreground)); } /* -------------------------------------------------------------------------- 8. Efeitos desligados A referência não tem glow, não tem halo e não tem aurora. Três camadas do visual base precisam ser apagadas, e nenhuma delas mora em arquivo que esta pele possa tocar; por isso são apagadas aqui. -------------------------------------------------------------------------- */ /* O halo do hero (sections/hero.css) ainda carrega --signal, o único token cromático do site. Numa pele que é ferramenta ele vira uma mancha azulada sem função. A camada não é apagada por cor e sim REMOVIDA (content: none), e a diferença é medida, não estética: .hero::before é `position: absolute; inset: -20% -8% -12%`, e os 12% que sobram embaixo entram no overflow rolável de .hero, que é `overflow: hidden`. Caixa com overflow escondido continua rolável por programa: em 1280x800 o hero desta pele media 554px de altura contra 620px de scrollHeight, sobra de exatos 66px. Basta um scrollIntoView em qualquer elemento de dentro (o harness de captura faz isso ao auditar alvo de toque, §7.1.1) para o hero rolar 66px dentro de si mesmo e comer o rótulo da dobra. Sem a camada, scrollHeight volta a ser igual a clientHeight e não há o que rolar. */ [data-skin="surface"] .hero::before { content: none; } /* Brilho que segue o cursor (03-ui.css .card--glow::before): efeito de vitrine. Numa matriz de células ele acenderia a célula errada. */ [data-skin="surface"] .card--glow::before { content: none; } /* Nenhuma superfície desta pele flutua: onde a folha de seção pedia sombra, fica o filete. A lista é só de peças FORA de matriz; célula de matriz não entra aqui, porque nela o box-shadow não é sombra, é o próprio filete (--sf-ring). */ [data-skin="surface"] .contratacao__spotlight, [data-skin="surface"] .capacidades__stage-badge, [data-skin="surface"] .govtech-ressalva, [data-skin="surface"] .stat-rail, [data-skin="surface"] .media-frame { box-shadow: none; } /* CORREÇÃO da varredura "surface" (agosto/2026): os dois modais do site (produto, em sections/portfolio.css §13, e contato, em sections/contato.css) nasceram só com o vocabulário de sombra das outras peles — painel com `box-shadow: var(--shadow-lg)` e `border-radius: var(--radius-lg)` — porque nenhum dos dois arquivos de modal sabe que "surface" existe, e esta pele nunca tinha escrito a contrapartida. Pedido explícito do dono para o modal de produto (o mais novo dos dois, "acabou de ganhar... um modal de produto"): "precisa estar digno na surface". O painel já é opaco por padrão (--surface-2, nunca vidro) — falta só apagar a sombra e trazer o raio para a escala desta pele (--radius-md, a mesma das células e do .media-frame), no lugar do --radius-lg maior das outras três. O resto do modal (véu, carrossel, setas, badges/claims herdados do cartão) já usa só tokens e não precisa de pintura própria aqui. */ [data-skin="surface"] .portfolio-modal__painel, [data-skin="surface"] .contato-modal__painel { border-radius: var(--radius-md); box-shadow: none; } /* Foco dentro de matriz: anel interno, porque o contêiner recorta. */ [data-skin="surface"] .portfolio__grid a:focus-visible, [data-skin="surface"] .portfolio__grid button:focus-visible, [data-skin="surface"] .modelos__grid a:focus-visible, [data-skin="surface"] .govtech-chips a:focus-visible, [data-skin="surface"] .contratacao__grid a:focus-visible, [data-skin="surface"] .capacidades__body a:focus-visible { outline-offset: -2px; } /* A regra da 12a rodada que ficava aqui apagava `background-image` de body::before quando o dono escolhia um padrão — e body::before É onde o padrão pinta. Escolher "Malha" no estúdio desligava a grade da pele E o padrão escolhido: fundo liso, medido em produção em 31/08/2026 com --pattern-image: none e --pattern-opacity: 0. Quem cede o lugar é só o campo da pele, na regra logo abaixo. */ /* CORREÇÃO 2026-08-05 (varredura --pattern × pele, §12.3 do contrato): a linha "muita linha" (12a rodada) queria a divisão maior (192px) SÓ quando o dono ESCOLHE "Grade" no painel, nunca de fábrica — mas "Grade" é LITERALMENTE o valor de fábrica de --pattern (01-tokens.css), e core/theme.js nunca escreve data-pattern-user para um valor igual ao de fábrica (§11, estado limpo: só o que DIFERE do padrão vira atributo/ inline). Escolher "Grade" e nunca ter mexido no controle ficam IDÊNTICOS aos olhos deste seletor — não existe sinal no estado para diferenciar "o dono clicou em Grade" de "o dono nunca abriu a aba Fundo". Resultado medido: o gate ficava sempre fechado, e a divisão maior nunca pintava um pixel — nem de fábrica, nem depois de o dono clicar em "Grade" (a mesma armadilha do defeito 3 do veredito, um nível acima). Correção: a camada volta a ser incondicional para --pattern: grid (mesmo caminho que 10-skin-smooth.css já usa para o pattern inteiro, ver comentário ali) — fábrica e escolha explícita produzem o MESMO --pattern-image, então mostrar sempre é o único jeito de a escolha "Grade" ter efeito de verdade. Identidade preservada: o campo de 48px (--sf-grid) e os filetes do container continuam intocados; só a divisão maior de 192px (múltiplo exato, sem batimento) passa a somar por cima sempre que --pattern resolver para grid. */ /* Padrao escolhido que NAO e grade (pontos, ruido, aurora, malha): o campo de 48px tambem cede, senao vira textura dupla. So a dupla campo+grade convive, por serem multiplos exatos. */ [data-skin="surface"][data-pattern-user]:not([data-pattern-user="grid"]) { background-image: none; } /* Estilo de menu escolhido no estudio vence a capsula da pele: quando ha variante ativa (data-nx-menu com valor nomeado), a pele cede o segmented. */ [data-skin="surface"][data-nx-menu]:not([data-nx-menu="on"]) .header__nav-list { background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; } /* O CABEÇALHO DA TESE VOLTA AO PADRÃO DAS OUTRAS SEÇÕES (31/08/2026, pedido do dono: "precisa pôr essa linha e todo o padrão de espaçamento de cada section também no quem somos, ele está diferente dos demais"). A exceção que o tirava da régua existia porque o cabeçalho vivia numa coluna estreita ao lado da matriz — com o layout de duas linhas ele ocupa a largura toda, como em qualquer outra seção, e a exceção deixou de ter razão. */ [data-skin="surface"] .tese__layout--mural > .tese__intro > .section__head { border-block-end: var(--hairline) solid hsl(var(--border)); padding-block-end: var(--space-8); margin-block-end: 0; } /* SUBTÍTULO ABAIXO DO TÍTULO, como nas seções de #portfolio e #govtech (31/08/2026, pedido do dono: "segue o padrão dos demais"). A grade de duas colunas do cabeçalho desta pele punha o lead ao LADO do título; as duas seções que usam `.section__head--split` já escapavam dela, e a tese passa a ler igual a elas. */ [data-skin="surface"] .tese__layout--mural > .tese__intro > .section__head { grid-template-columns: minmax(0, 1fr); } [data-skin="surface"] .tese__layout--mural > .tese__intro > .section__head > .lead { grid-column: 1; max-width: min(100%, 64ch); padding-block-end: 0; }