/* ========================================================================== 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; --section-y: calc(clamp(3.25rem, 2.2rem + 3.2vw, 5.5rem) * 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%; --border: 0 0% 90%; /* --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 continua em 90%: divisor estático tem regra diferente. */ --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; } /* -------------------------------------------------------------------------- 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; } /* Redeclara toda propriedade que a versão base de body::before (02-base.css) define, para não herdar máscara, mistura nem animação do sistema de --pattern do estúdio: esta pele tem campo próprio, sempre ligado. */ [data-skin="surface"] body::before { content: ""; position: fixed; inset-block: 0; inset-inline: 0; margin-inline: auto; inline-size: min(100% - var(--gutter) * 2, var(--container)); z-index: -1; pointer-events: none; background-image: none; background-color: transparent; border-inline: var(--hairline) solid hsl(var(--border)); opacity: 1; mix-blend-mode: normal; mask-image: none; -webkit-mask-image: none; animation-name: none; will-change: auto; } @media (min-width: 1560px) { [data-skin="surface"] body::before { inline-size: min( 100% - var(--gutter) * 2, calc(var(--container) + (var(--container-wide) - var(--container)) * 0.5) ); } } @media (min-width: 1900px) { [data-skin="surface"] body::before { inline-size: min(100% - var(--gutter) * 2, var(--container-wide)); } } /* -------------------------------------------------------------------------- 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)); } [data-skin="surface"] .eyebrow::before { inline-size: var(--space-2); block-size: var(--space-2); border-radius: var(--radius-full); background-color: hsl(var(--muted-foreground)); } [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)); border-radius: var(--radius-full); 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-full); 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); padding-block-end: var(--space-5); border-block-end: var(--hairline) solid hsl(var(--border)); margin-block-end: var(--space-8); } [data-skin="surface"] .section__head h2 { letter-spacing: -0.024em; } @media (min-width: 900px) { [data-skin="surface"] .section__head { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); align-items: end; column-gap: var(--space-10); row-gap: var(--space-3); } [data-skin="surface"] .section__head > .eyebrow { grid-column: 1 / -1; } [data-skin="surface"] .section__head > h2 { grid-column: 1; } [data-skin="surface"] .section__head > .lead { grid-column: 2; max-width: 46ch; padding-block-end: 0.35em; } } /* .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"] .tese__intro .section__head, [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"] .tese__intro .section__head > .lead, [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 e precisa do filete, porque a seção inteira é uma sequência de painéis; só a margem continua vindo do ritmo interno da própria seção (.govtech .container > * + *). */ [data-skin="surface"] .govtech__head.section__head { padding-block-end: var(--space-5); border-block-end: var(--hairline) solid hsl(var(--border)); } /* 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); } [data-skin="surface"] #cases > .container > .section__head > .lead { grid-column: 1; max-width: var(--measure); 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); padding-block-start: calc(var(--header-h) + clamp(var(--space-6), 4svh, var(--space-12))); padding-block-end: clamp(var(--space-8), 5svh, var(--space-12)); } [data-skin="surface"] .hero__grid { gap: 0; } /* Célula da copy: empilhada, é a de cima. */ [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-radius: var(--radius-md) var(--radius-md) 0 0; 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-block-start: 0; border-radius: 0 0 var(--radius-md) var(--radius-md); 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. */ [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-full); 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-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-block-start: var(--hairline) solid hsl(var(--border)); 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; } @media (min-width: 880px) { [data-skin="surface"] .capacidades__body { grid-template-columns: minmax(0, 1fr) minmax(min(100%, 260px), 340px); } } @media (min-width: 1560px) { [data-skin="surface"] .capacidades__body { grid-template-columns: minmax(0, 1fr) minmax(min(100%, 300px), 380px); } } /* 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). */ [data-skin="surface"] .capacidades__list { gap: var(--hairline); align-content: start; 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. */ [data-skin="surface"] .capacidades__stage { position: static; align-content: start; gap: var(--space-4); padding: var(--space-5); background-color: hsl(var(--card)); box-shadow: var(--sf-ring); } [data-skin="surface"] .capacidades__media { /* 13ª rodada: o palco de capacidades passou a exibir o vídeo retrato da marca (9/16 nativo). O 4/5 desta pele cortava o logo; a proporção acompanha o arquivo, o raio de célula continua o da identidade. */ --media-ratio: 9 / 16; 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); } [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)); } } [data-skin="surface"] .tese-block { max-width: none; padding: var(--space-6); background-color: hsl(var(--card)); box-shadow: var(--sf-ring); } /* O filete que cresce por scaleX é assinatura de index.html. Aqui a divisão já é a própria borda compartilhada da matriz. */ [data-skin="surface"] .tese-block::before { content: none; } /* Baseline consistente entre as quatro células (varredura "superfície", 06/08/2026). 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; com align-items: center (valor antigo), o numeral centralizava contra a CAIXA do título inteiro, então "04" caía 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. Duas mudanças, as duas necessárias: 1. align-items: flex-start alinha o numeral ao TOPO do título sempre — "01" a "04" ficam no mesmo lugar relativo ao primeiro caractere do título, título de uma linha ou de duas. 2. min-block-size na cabeça RESERVA a altura de duas linhas de título em TODA célula, não só na que precisa. Isso é o que torna a posição inicial do parágrafo idêntica nas quatro células, e não só dentro da mesma linha da grade — a matriz passa a ter uma baseline só, de ponta a ponta, que é a leitura de tabela que o resto do arquivo já persegue. */ [data-skin="surface"] .tese-block__head { gap: var(--space-3); align-items: flex-start; min-block-size: calc(var(--fs-h3) * var(--lh-tight) * 2); } [data-skin="surface"] .tese-block__num { font-size: var(--fs-xs); color: hsl(var(--muted-foreground)); } /* line-height explícito: a reserva de duas linhas acima faz a conta em cima de --lh-tight, então 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 { font-size: var(--fs-h3); font-weight: 600; 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); } [data-skin="surface"] .modelos__card-title { font-size: var(--fs-base); font-weight: 600; } [data-skin="surface"] .modelos__card-text { font-size: var(--fs-xs); line-height: 1.5; } [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); } [data-skin="surface"] .govtech-motor__icon { inline-size: var(--space-9); block-size: var(--space-9); border-radius: var(--radius-cell); 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. */ [data-skin="surface"] .confianca__grid { grid-template-columns: minmax(0, 1fr); column-gap: 0; row-gap: 0; border: var(--hairline) solid hsl(var(--border)); border-radius: var(--radius-md); background-color: hsl(var(--card)); overflow: hidden; } [data-skin="surface"] .confianca__grid .confianca__item { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-4); row-gap: var(--space-2); padding-block: var(--space-5); padding-inline: var(--space-5); border-block-end: var(--hairline) solid hsl(var(--border)); border-inline-start: 0; } [data-skin="surface"] .confianca__grid .confianca__item:last-child { grid-column: auto; border-block-end: 0; padding-block-start: var(--space-5); padding-inline: var(--space-5); } [data-skin="surface"] .confianca__num { font-family: var(--font-mono); font-size: var(--fs-xs); color: hsl(var(--muted-foreground)); } [data-skin="surface"] .confianca__q { font-size: var(--fs-base); font-weight: 600; letter-spacing: -0.012em; } [data-skin="surface"] .confianca__a { font-size: var(--fs-sm); color: hsl(var(--muted-foreground)); } @media (min-width: 900px) { [data-skin="surface"] .confianca__grid .confianca__item, [data-skin="surface"] .confianca__grid .confianca__item:last-child { grid-template-columns: auto minmax(0, 22rem) minmax(0, 1fr); column-gap: var(--space-8); align-items: start; } [data-skin="surface"] .confianca__grid .confianca__item .confianca__num, [data-skin="surface"] .confianca__grid .confianca__item:last-child .confianca__num { grid-column: 1; grid-row: 1; } [data-skin="surface"] .confianca__grid .confianca__item .confianca__q, [data-skin="surface"] .confianca__grid .confianca__item:last-child .confianca__q { grid-column: 2; grid-row: 1; } [data-skin="surface"] .confianca__grid .confianca__item .confianca__a, [data-skin="surface"] .confianca__grid .confianca__item:last-child .confianca__a { grid-column: 3; grid-row: 1; max-width: var(--measure); } } /* 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. */ @media (min-width: 900px) { [data-skin="surface"] .contratacao__item .card__body { grid-template-columns: auto minmax(0, 17rem) 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; } [data-skin="surface"] .contratacao__item .card__desc { grid-column: 3; grid-row: 1; align-self: center; } [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); } /* Defeito 8 da rodada de agosto de 2026, lado surface. Esta regra desligava o cabeçalho grudento em TODAS as larguras, e acima de 1560px, onde a seção é de duas colunas, isso deixava a coluna da esquerda parada e vazia enquanto a linha do tempo descia à direita: 684px de faixa vazia medidos em 1920x1080. A pele não tem motivo para abrir mão do curso de rolagem, que é estrutura, não ornamento; o que ela quer é a sobriedade do estilo, e isso ela mantém. Abaixo de 1560px a seção é de uma coluna só e o estático continua valendo, que é onde a regra fazia sentido. */ [data-skin="surface"] .metodo__intro > .section__head { position: static; } @media (min-width: 1560px) { [data-skin="surface"] .metodo__intro > .section__head { position: sticky; } } /* 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; } [data-skin="surface"] .metodo__legend { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500; letter-spacing: var(--tracking-mono); color: hsl(var(--muted-foreground)); } [data-skin="surface"] .metodo__text { 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); } [data-skin="surface"] .case-block__title { font-size: var(--fs-h2); 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; } /* 12a rodada: com padrao escolhido pelo usuario no estudio, o campo ambiente (grade de 48px + guias verticais) cede o lugar; duas grades empilhadas liam como sujeira. O padrao do usuario passa a ser o unico fundo. */ [data-skin="surface"][data-pattern-user] body::before, [data-skin="surface"][data-pattern-user] body::after { background-image: none; } /* 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; }