/* ========================================================================== NEXUS theme-final / assets/css/12-secoes.css Folha da feature "Seções 2.0", Lote B: as variantes de LAYOUT por seção. DOUTRINA (leia antes de mexer em qualquer bloco abaixo) 1. ALTITUDE. Todo seletor nasce em html[data-nx-lay~=…] ou html[data-nx-sec~=…], seguido do id da seção como reforço de especificidade: html[data-nx-lay~="metodo:grade"] #metodo. Esse piso vence qualquer pele por especificidade E por ordem de carga — esta folha é a ÚLTIMA do (depois de 10-skin-smooth.css e de 11-fx-extra.css) — sem !important em lugar nenhum. Variante de layout só existe quando o estúdio escreveu o token no . 2. POR QUE O PORTÃO É NO . Mesmo motivo do §11 do contrato para data-nx-sec: o estúdio nunca escreve no DOM da própria seção (território dos partials), só no elemento raiz. data-nx-lay é emitido por core/theme.js ao lado de data-nx-sec, some no reset, e vale antes do primeiro paint (script inline no , contrato §1). Esta folha só CONSOME o atributo; quem escreve é o Lote A. 3. LISTA BRANCA (contrato §1.5): grid-template-columns/rows/areas, grid-column, grid-row, order, display (grid|contents|flex), flex-direction, gap, row-gap, column-gap, justify-items, justify-content, align-items, align-content, align-self, justify-self, text-align, max-inline-size, inline-size, margin-inline, aspect-ratio, position (só static), custom properties --grid-min / --nxs-*. PROIBIDO: background*, color, border*, box-shadow, border-radius, font-*, opacity (fora do bloco de fundo, que nem existe aqui), filter, backdrop-filter. Pele pinta superfície, variante move caixa — nunca o contrário. Duas extensões conscientes onde a lista estrita travaria uma variante que o §2 da especificação pede por nome: a) grid-auto-flow/-columns/-rows: primos diretos de grid-template-columns/rows, sem os quais um grid-auto-flow: column não existe. Usados só em provas:faixa. b) .metodo__line { opacity: 0 } em metodo:grade: ÚNICA exceção ao veto de opacity, prevista no corpo da própria especificação ("trilho some por opacity:0, NUNCA display:none — metodo.js mede [data-metodo-fill]"). display:none quebraria essa leitura de JS; opacity:0 preserva a caixa e esconde só o pixel. Não existe outra ocorrência de opacity neste arquivo. Onde o mecanismo do §2 descrevia padding ou border (ex.: "provas:cartoes… sem filete, padding space-6"), a lista branca prevalece: a própria frase já delega borda e fundo aos controles da seção ("variante não inventa tinta"); o efeito de "cartão" nasce só de geometria — trilha mais larga, gap maior — nunca de border/padding. 4. GUARDA DE SURFACE (bloco 16). 08-skin-surface simula filete compartilhado em sete seções com gap: var(--hairline) nos grids que viram "matriz de células contíguas" (contrato §12.2). O eixo de densidade (dens → --nxs-gap) multiplicaria esse gap e destruiria a ilusão de tabela. O bloco 16 devolve gap ao hairline nesses nove seletores, com especificidade maior que qualquer regra de densidade deste arquivo — por isso mora depois de todas elas. 5. SEM MOVIMENTO (bloco 17). Nenhuma variante anima; nenhuma propriedade daqui entra em transition/animation. grid-template-columns/order/gap são estruturais, não visuais (contrato §6.0). ESTRUTURA: bloco 1 mapeamento genérico (14 seções, header fica de fora — só tem eixo de fundo); blocos 2–14 (com o 11b de #faq) as 34 variantes, duas ou três por seção, na ordem canônica do §10 (a "fábrica" de cada seção já existe em sections/*.css e não pede regra aqui); bloco 15 eixos genéricos de disposição; bloco 16 guarda de surface; bloco 17 nota de animação. ========================================================================== */ /* -------------------------------------------------------------------------- BLOCO 1 — Mapeamento genérico por seção Mesma arquitetura de duas camadas do §19.6 de 07-studio.css (mapeamento + consumo), só que para os quatro eixos de DISPOSIÇÃO em vez dos de moldura/fundo: cada seção traduz o seu --nxs--gap/-ord/-ai/-mw (escrito por core/theme.js só quando a seção foi tocada) para as quatro variáveis genéricas --nxs-gap/--nxs-ord/--nxs-ai/--nxs-mw, válidas dentro do escopo de #. Os blocos 2–15 consomem só as genéricas: nenhum deles precisa saber o nome da seção em que está. -------------------------------------------------------------------------- */ html[data-nx-sec~="hero"] #hero { --nxs-gap: var(--nxs-hero-gap); --nxs-ord: var(--nxs-hero-ord); --nxs-ai: var(--nxs-hero-ai); --nxs-mw: var(--nxs-hero-mw); } html[data-nx-sec~="provas"] #provas { --nxs-gap: var(--nxs-provas-gap); --nxs-ord: var(--nxs-provas-ord); --nxs-ai: var(--nxs-provas-ai); --nxs-mw: var(--nxs-provas-mw); } html[data-nx-sec~="tese"] #tese { --nxs-gap: var(--nxs-tese-gap); --nxs-ord: var(--nxs-tese-ord); --nxs-ai: var(--nxs-tese-ai); --nxs-mw: var(--nxs-tese-mw); } html[data-nx-sec~="capacidades"] #capacidades { --nxs-gap: var(--nxs-capacidades-gap); --nxs-ord: var(--nxs-capacidades-ord); --nxs-ai: var(--nxs-capacidades-ai); --nxs-mw: var(--nxs-capacidades-mw); } html[data-nx-sec~="metodo"] #metodo { --nxs-gap: var(--nxs-metodo-gap); --nxs-ord: var(--nxs-metodo-ord); --nxs-ai: var(--nxs-metodo-ai); --nxs-mw: var(--nxs-metodo-mw); } html[data-nx-sec~="cases"] #cases { --nxs-gap: var(--nxs-cases-gap); --nxs-ord: var(--nxs-cases-ord); --nxs-ai: var(--nxs-cases-ai); --nxs-mw: var(--nxs-cases-mw); } html[data-nx-sec~="modelos"] #modelos { --nxs-gap: var(--nxs-modelos-gap); --nxs-ord: var(--nxs-modelos-ord); --nxs-ai: var(--nxs-modelos-ai); --nxs-mw: var(--nxs-modelos-mw); } html[data-nx-sec~="portfolio"] #portfolio { --nxs-gap: var(--nxs-portfolio-gap); --nxs-ord: var(--nxs-portfolio-ord); --nxs-ai: var(--nxs-portfolio-ai); --nxs-mw: var(--nxs-portfolio-mw); } html[data-nx-sec~="govtech"] #govtech { --nxs-gap: var(--nxs-govtech-gap); --nxs-ord: var(--nxs-govtech-ord); --nxs-ai: var(--nxs-govtech-ai); --nxs-mw: var(--nxs-govtech-mw); } html[data-nx-sec~="confianca"] #confianca { --nxs-gap: var(--nxs-confianca-gap); --nxs-ord: var(--nxs-confianca-ord); --nxs-ai: var(--nxs-confianca-ai); --nxs-mw: var(--nxs-confianca-mw); } html[data-nx-sec~="faq"] #faq { --nxs-gap: var(--nxs-faq-gap); --nxs-ord: var(--nxs-faq-ord); --nxs-ai: var(--nxs-faq-ai); --nxs-mw: var(--nxs-faq-mw); } html[data-nx-sec~="contratacao"] #contratacao { --nxs-gap: var(--nxs-contratacao-gap); --nxs-ord: var(--nxs-contratacao-ord); --nxs-ai: var(--nxs-contratacao-ai); --nxs-mw: var(--nxs-contratacao-mw); } html[data-nx-sec~="contato"] #contato { --nxs-gap: var(--nxs-contato-gap); --nxs-ord: var(--nxs-contato-ord); --nxs-ai: var(--nxs-contato-ai); --nxs-mw: var(--nxs-contato-mw); } html[data-nx-sec~="footer"] #footer { --nxs-gap: var(--nxs-footer-gap); --nxs-ord: var(--nxs-footer-ord); --nxs-ai: var(--nxs-footer-ai); --nxs-mw: var(--nxs-footer-mw); } /* -------------------------------------------------------------------------- BLOCO 2 — #hero (.hero__grid › .hero__copy + .hero__stage) centrado é a fábrica (sections/hero.css): 1 coluna centrada, sem regra aqui. lateral e palcoprimeiro compartilham a grade de duas colunas a partir de 60rem (limiar próprio desta variante; §7.4 do contrato trata outro caso, 2200–2560px). Ajuste de agosto de 2026 (captura do dono em 1600px): 1fr/1fr deixava o palco (moldura do vídeo) com ~540px ao lado de um título que, sozinho, já ocupa metade da tela — a proporção 50/50 lia como "título grande, vídeo pequeno colado do lado", não como duas colunas equilibradas. 0.9fr/1.1fr dá ao palco a fatia maior (~55% em vez de 50%) sem inverter a hierarquia (a copy continua tendo espaço de sobra para o título, o lead e os CTAs, que são o motivo de a seção existir). Some também o teto de max-inline-size que duas peles (glass, e por herança a página sem pele nenhuma não tem teto próprio, só a fábrica) aplicam a .hero__media (min(100%, 54rem) ≈ 864px) — com a coluna agora maior que isso em telas largas, o teto da pele voltaria a travar o ganho que a proporção nova dá; max-inline-size: none dentro da variante deixa a trilha do grid (não mais um valor fixo em rem) ser o único limite. --media-ratio continua intocado (nenhuma pele nem este bloco mexem nele): a proporção do quadro não muda, só a área que ele pode ocupar. cult e surface já têm seu próprio breakpoint sempre- ligado para o hero (1080px/1024px, independente de --nx-lay) com proporção e teto próprios — este bloco não os sobrescreve na prática acima desses limiares (a regra da pele é tão ou mais específica e carrega depois, por ordem de ), então não recebem este ajuste; o pedido do dono era sobre a leitura de fábrica/glass, confirmada por captura em 1600px sem pele. */ @media (min-width: 60rem) { html[data-nx-lay~="hero:lateral"] #hero .hero__grid, html[data-nx-lay~="hero:palcoprimeiro"] #hero .hero__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; } html[data-nx-lay~="hero:lateral"] #hero .hero__copy, html[data-nx-lay~="hero:palcoprimeiro"] #hero .hero__copy { justify-items: start; text-align: start; } html[data-nx-lay~="hero:lateral"] #hero .hero__stage, html[data-nx-lay~="hero:palcoprimeiro"] #hero .hero__stage, html[data-nx-lay~="hero:lateral"] #hero .hero__media, html[data-nx-lay~="hero:palcoprimeiro"] #hero .hero__media { max-inline-size: none; } } /* .hero__stage é o SEGUNDO bloco do DOM (depois de .hero__copy): trazê-lo para a frente é só order, funciona em qualquer contagem de colunas (inclusive 1, empilhado) e não move um único nó no DOM. Não interativo (figura/vídeo decorativo), então a ordem visual invertida não abre armadilha de Tab — o precedente é .case-block--flip, contrato §6/Riscos. */ html[data-nx-lay~="hero:palcoprimeiro"] #hero .hero__stage { order: var(--nxs-ord, -1); } /* Guarda de pele: smooth esconde .hero__stage por decisão de IDENTIDADE, não por bug (display: none, 10-skin-smooth.css, "Ponto 6: o quadro de vídeo sai da dobra" — ver também adendo H de docs/shots/provas/, essa pele nunca mostra o palco do hero, em nenhum lay). lateral e palcoprimeiro abrem uma segunda coluna para um elemento que esta pele não renderiza — reportado pelo dono com captura em index5: título à esquerda, NADA à direita, e o resto da dobra com metade da largura desperdiçada. Correção honesta (a pele não está errada em esconder o vídeo, a variante que não sabia disso): sob esta pele as duas variantes degradam para a MESMA leitura da fábrica (centrado, 1 coluna) — não é tentar forçar o vídeo escondido de volta à tela, contrariando a decisão de identidade da pele. Único caso: `grep -n "hero__stage\|hero__media" assets/css/0[6-9]|10- skin-*.css` confirmou que só 10-skin-smooth.css usa display: none no palco do hero (glass/surface/cult sempre mostram, cada um com sua própria proporção) — as outras três peles não precisam desta guarda. */ @media (min-width: 60rem) { html[data-nx-lay~="hero:lateral"]:is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) #hero .hero__grid, html[data-nx-lay~="hero:palcoprimeiro"]:is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) #hero .hero__grid { grid-template-columns: minmax(0, 1fr); } html[data-nx-lay~="hero:lateral"]:is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) #hero .hero__copy, html[data-nx-lay~="hero:palcoprimeiro"]:is([data-skin="smooth"], [data-skin-base="smooth"]:not([data-skin])) #hero .hero__copy { justify-items: center; text-align: center; } } /* -------------------------------------------------------------------------- BLOCO 3 — #provas (.stat-rail › .stat) regua é a fábrica (04-sections.css), sem regra aqui. -------------------------------------------------------------------------- */ /* cartoes: o "cartão" nasce de geometria (trilha mais larga, mais gap), não de borda nova — a régua de 04-sections.css já desenha o filete entre itens, e removê-lo pediria border*, fora da lista branca. Borda e fundo de moldura própria continuam sendo trabalho dos controles existentes da seção (Fundo/Moldura), não desta variante. */ html[data-nx-lay~="provas:cartoes"] #provas .stat-rail { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); } /* faixa: acima de 60rem a régua vira uma fileira única (grid-auto-flow em coluna, não em linha) e cada .stat passa a ter rótulo e valor lado a lado, alinhados pela linha de base. grid-auto-flow/grid-auto-columns são a extensão documentada no cabeçalho deste arquivo (doutrina, item 3a). */ @media (min-width: 60rem) { html[data-nx-lay~="provas:faixa"] #provas .stat-rail { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; } html[data-nx-lay~="provas:faixa"] #provas .stat { grid-template-columns: auto 1fr; align-items: baseline; gap: calc(var(--space-2) * var(--nxs-gap, 1)); } } /* -------------------------------------------------------------------------- BLOCO 4 — #tese (.tese__layout › intro + list › .tese-block) lateral é a fábrica (sections/tese.css), sem regra aqui. -------------------------------------------------------------------------- */ /* empilhado: layout inteiro em 1 coluna (a intro deixa de ficar presa numa barra lateral e o sticky perde sentido nesse arranjo, por isso volta a position: static, o único valor de position que a lista branca permite); a lista de blocos vira grade fluida em vez de coluna única. */ html[data-nx-lay~="tese:empilhado"] #tese .tese__layout { grid-template-columns: minmax(0, 1fr); } html[data-nx-lay~="tese:empilhado"] #tese .tese__list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); } html[data-nx-lay~="tese:empilhado"] #tese .tese__intro { position: static; } /* fileira: a lista volta a 1 coluna e cada bloco vira uma linha de três trilhas (número, título, texto). display: contents no cabeçalho do bloco tira o wrapper do fluxo de grade sem tocar no DOM: os dois filhos dele (número e título) entram como itens diretos de .tese-block, ao lado do texto, e a fileira fecha em auto/24ch/1fr sem nenhum nó novo. */ html[data-nx-lay~="tese:fileira"] #tese .tese__list { grid-template-columns: minmax(0, 1fr); } html[data-nx-lay~="tese:fileira"] #tese .tese-block__head { display: contents; } html[data-nx-lay~="tese:fileira"] #tese .tese-block { display: grid; grid-template-columns: auto minmax(0, 24ch) minmax(0, 1fr); align-items: baseline; gap: calc(var(--space-4) * var(--nxs-gap, 1)); } /* vitrine (smoothui features-1: grade de cartões com ícone acima do título): cabeçalho sobe para cima da grade — deixa de ficar preso na lateral fixa, como o título centralizado da referência que abre a seção inteira — e a lista de blocos vira matriz de duas colunas a partir do mesmo ponto em que a fábrica já assume duas colunas para intro+lista (900px, sections/tese.css §1); dentro de cada bloco o numeral sobe para a própria linha ACIMA do título, no papel que o ícone tem na referência (âncora visual no topo do "cartão", título e texto empilhados abaixo dele). Duas colunas fecham os quatro blocos sem órfão, mesmo raciocínio do comentário em sections/tese.css §7.3. */ html[data-nx-lay~="tese:vitrine"] #tese .tese__layout { grid-template-columns: minmax(0, 1fr); } html[data-nx-lay~="tese:vitrine"] #tese .tese__intro { position: static; } html[data-nx-lay~="tese:vitrine"] #tese .tese__list { grid-template-columns: minmax(0, 1fr); } @media (min-width: 900px) { html[data-nx-lay~="tese:vitrine"] #tese .tese__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } html[data-nx-lay~="tese:vitrine"] #tese .tese-block__head { grid-template-columns: minmax(0, 1fr); } /* alternado (smoothui features-3: linhas lado a lado que alternam de lado a cada feature): cabeçalho sobe para cima da lista pelo mesmo motivo do vitrine; cada bloco vira uma linha de duas colunas — numeral sozinho de um lado (o papel que a imagem tem na referência: âncora grande, isolada), título+texto empilhados do outro — e o lado do numeral alterna a cada bloco (ímpar à esquerda, par à direita), exatamente a alternância `index % 2` da referência. display:contents no cabeçalho (mesma técnica de tese:fileira) solta numeral e título dos filhos diretos de .tese-block para virarem células independentes de uma grade de áreas nomeadas, ao lado do texto. Abaixo de 900px cai de volta no arranjo da fábrica (numeral+título em linha, texto embaixo) sem regra nenhuma daqui — mesmo critério que as variantes de #contato usam para só divergir da fábrica a partir do ponto em que a seção já vira multi-coluna. */ html[data-nx-lay~="tese:alternado"] #tese .tese__layout { grid-template-columns: minmax(0, 1fr); } html[data-nx-lay~="tese:alternado"] #tese .tese__intro { position: static; } html[data-nx-lay~="tese:alternado"] #tese .tese__list { grid-template-columns: minmax(0, 1fr); } @media (min-width: 900px) { html[data-nx-lay~="tese:alternado"] #tese .tese-block__head { display: contents; } html[data-nx-lay~="tese:alternado"] #tese .tese-block { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); grid-template-areas: "num title" "num text"; align-items: center; column-gap: calc(var(--space-10) * var(--nxs-gap, 1)); row-gap: var(--space-2); } html[data-nx-lay~="tese:alternado"] #tese .tese-block__num { grid-area: num; justify-self: center; } html[data-nx-lay~="tese:alternado"] #tese .tese-block__title { grid-area: title; } html[data-nx-lay~="tese:alternado"] #tese .tese-block__text { grid-area: text; } html[data-nx-lay~="tese:alternado"] #tese .tese-block:nth-child(even) { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-areas: "title num" "text num"; } } /* -------------------------------------------------------------------------- BLOCO 5 — #capacidades (.capacidades__body › list + stage) listapalco é a fábrica (sections/capacidades.css), sem regra aqui. -------------------------------------------------------------------------- */ /* palcoprimeiro: .capacidades__stage é o segundo filho de .capacidades__body (depois de .capacidades__list); order traz a figura para a frente sem mover nó nenhum. O palco é uma
com imagem e legenda, sem controle focável dentro — reordenar não cria armadilha de Tab. */ html[data-nx-lay~="capacidades:palcoprimeiro"] #capacidades .capacidades__stage { order: var(--nxs-ord, -1); } /* coluna: o corpo vira 1 coluna, o palco sobe para o topo (faixa acima da lista, por isso order fixo, não o eixo de disposição) e deixa de ser sticky — sticky preso ao topo de uma coluna única, acima da lista, não tem curso de rolagem para acompanhar e só atrapalharia. */ html[data-nx-lay~="capacidades:coluna"] #capacidades .capacidades__body { grid-template-columns: minmax(0, 1fr); } html[data-nx-lay~="capacidades:coluna"] #capacidades .capacidades__stage { order: -1; position: static; max-inline-size: 100%; } /* -------------------------------------------------------------------------- BLOCO 6 — #metodo (.metodo__layout › intro + timeline › list › step) linha é a fábrica (sections/metodo.css), sem regra aqui. -------------------------------------------------------------------------- */ /* grade: a lista de etapas vira grade fluida (auto-fit) e cada etapa passa a ter o nó ACIMA do conteúdo (1 coluna), não ao lado. O trilho de progresso não faz sentido geométrico numa grade — não há uma linha só para ele acompanhar — e por isso some. NUNCA por display: none: é ele que metodo.js mede via [data-metodo-fill] para saber até onde preencher; tirá-lo da árvore de layout quebraria essa leitura. opacity: 0 é a única exceção ao veto de opacity deste arquivo, documentada no cabeçalho. */ html[data-nx-lay~="metodo:grade"] #metodo .metodo__list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); column-gap: calc(var(--space-6) * var(--nxs-gap, 1)); } html[data-nx-lay~="metodo:grade"] #metodo .metodo__step { grid-template-columns: minmax(0, 1fr); justify-items: start; } html[data-nx-lay~="metodo:grade"] #metodo .metodo__line { opacity: 0; } /* fileira: desliga o aproveitamento de duas colunas acima de 1560px (sections/metodo.css bloco 0) e devolve o cabeçalho ao fluxo normal — sticky desligado pelo mesmo motivo do bloco 5: sem curso de rolagem dedicado, sticky só atrapalha. */ html[data-nx-lay~="metodo:fileira"] #metodo .metodo__layout { grid-template-columns: minmax(0, 1fr); } html[data-nx-lay~="metodo:fileira"] #metodo .metodo__intro > .section__head { position: static; } /* -------------------------------------------------------------------------- BLOCO 7 — #cases (.cases__list › .case-block + --flip) alternado é a fábrica (sections/cases.css, o zebra com --flip), sem regra aqui. -------------------------------------------------------------------------- */ /* empilhado: cada case vira 1 coluna e o --flip (que troca mídia e corpo de lado a partir de 60rem) é neutralizado devolvendo order:0 aos filhos — sem isso um case ímpar ficaria com a ordem trocada dentro de uma coluna única, o que não lê como zebra, lê como bagunça. */ html[data-nx-lay~="cases:empilhado"] #cases .case-block { grid-template-columns: minmax(0, 1fr); } html[data-nx-lay~="cases:empilhado"] #cases .case-block--flip > * { order: 0; } /* compacto: duas colunas assimétricas (mídia mais estreita, corpo mais largo) a partir do mesmo limiar que a própria seção já usa para virar duas colunas (60rem, sections/cases.css) — abaixo disso o layout continua empilhado por auto-fit, sem risco de espremer conteúdo. */ @media (min-width: 60rem) { html[data-nx-lay~="cases:compacto"] #cases .case-block { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr); align-items: start; gap: calc(var(--space-8) * var(--nxs-gap, 1)); } } /* -------------------------------------------------------------------------- BLOCO 8 — #modelos (.modelos__grid › item) faixas é a fábrica (sections/modelos.css: uma faixa por linha), sem regra aqui. -------------------------------------------------------------------------- */ /* grade: a pilha de faixas vira grade fluida. O item já é container de consulta (container-type: inline-size, sections/modelos.css bloco 2): abaixo de 46rem de largura, a apresentação empilhada (cartão) já é a base da folha, então basta estreitar a coluna para o próprio mecanismo de container query assumir o cartão, sem regra extra aqui. */ html[data-nx-lay~="modelos:grade"] #modelos .modelos__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); } /* indice: a grade vira 1 coluna larga; a partir de 46rem de item (mesmo limiar da container query de faixa já declarada) o texto passa a 4 trilhas — marca, título, descrição, seta — na MESMA linha, em vez de duas linhas como na faixa fábrica. A imagem deixa de ser fundo em absolute e vira tarja real no fluxo via position: static + aspect-ratio, o mecanismo que a lista branca já antecipa para este caso. */ @container modelo-item (min-width: 46rem) { html[data-nx-lay~="modelos:indice"] #modelos .modelos__card { grid-template-columns: minmax(0, 1fr) clamp(4rem, 10%, 7rem); } html[data-nx-lay~="modelos:indice"] #modelos .modelos__content { grid-template-columns: auto minmax(0, 20ch) minmax(0, 1fr) auto; } html[data-nx-lay~="modelos:indice"] #modelos .modelos__marca { grid-column: 1; grid-row: 1; align-self: center; } html[data-nx-lay~="modelos:indice"] #modelos .modelos__card-title { grid-column: 2; grid-row: 1; align-self: center; } html[data-nx-lay~="modelos:indice"] #modelos .modelos__card-text { grid-column: 3; grid-row: 1; align-self: center; } html[data-nx-lay~="modelos:indice"] #modelos .modelos__cta { grid-column: 4; grid-row: 1; align-self: center; } html[data-nx-lay~="modelos:indice"] #modelos .modelos__img { position: static; inline-size: 100%; aspect-ratio: 1 / 3; } } html[data-nx-lay~="modelos:indice"] #modelos .modelos__grid { grid-template-columns: minmax(0, 1fr); } /* -------------------------------------------------------------------------- BLOCO 9 — #portfolio (.portfolio__grid .grid-auto--lg › card) arejado é a fábrica: sections/portfolio.css já declara --grid-min: 320px no próprio seletor (a classe utilitária .grid-auto--lg de 02-base.css parte de 360px, sobrescrita por ordem de carga). Sem regra aqui. -------------------------------------------------------------------------- */ /* denso: trilha mínima menor cabe mais colunas na mesma largura. */ html[data-nx-lay~="portfolio:denso"] #portfolio .portfolio__grid { --grid-min: 250px; gap: calc(var(--space-6) * var(--nxs-gap, 1)); } /* lista: --grid-min: 100% derruba a grade para 1 coluna (sem contagem fixa, sem rolagem horizontal); a partir de 860px — o MESMO limiar do cartão de resumo, sections/portfolio.css:766 — cada cartão é promovido à mesma grade de 4 trilhas que ali já existe (mídia, título+meta, tagline, ação), agora estendida a todos: geometria já validada, não uma trilha nova. */ html[data-nx-lay~="portfolio:lista"] #portfolio .portfolio__grid { --grid-min: 100%; } @media (min-width: 860px) { html[data-nx-lay~="portfolio:lista"] #portfolio .portfolio__card { display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr) minmax(0, 1.5fr) auto; align-items: center; } } /* -------------------------------------------------------------------------- BLOCO 10 — #govtech (.govtech__panel › panels/catalogo/footer) paineis é a fábrica (sections/govtech.css), sem regra aqui. -------------------------------------------------------------------------- */ /* empilhado: o par de painéis (famílias/motores) vira 1 coluna. */ html[data-nx-lay~="govtech:empilhado"] #govtech .govtech-panels { grid-template-columns: minmax(0, 1fr); } /* denso: trilha mínima menor nos três agrupamentos multi-coluna da seção — painéis (famílias/motores), chips do catálogo (que ganham display: grid no lugar do flex-wrap fábrica, mesma lógica de trilha mínima) e o rodapé (vias formais + referências normativas) — mais gap escalado pela densidade em todos os três. */ html[data-nx-lay~="govtech:denso"] #govtech .govtech-panels { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: calc(var(--space-6) * var(--nxs-gap, 1)); } html[data-nx-lay~="govtech:denso"] #govtech .govtech-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: calc(var(--space-3) * var(--nxs-gap, 1)); } html[data-nx-lay~="govtech:denso"] #govtech .govtech-footer { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: calc(var(--space-8) * var(--nxs-gap, 1)); } /* -------------------------------------------------------------------------- BLOCO 11 — #confianca (.confianca__grid › item) duas é a fábrica (auto-fit de 420px, sections/confianca.css), sem regra aqui. Redesenho de agosto de 2026 (ver o cabeçalho de sections/ confianca.css): a fábrica passou a dar a MESMA borda aos sete itens, sem caso especial para o último; as três variantes abaixo continuam válidas porque nenhuma delas dependia do antigo seletor :last-child:nth-child (odd) — cada uma já reescreve grid-template-columns/-q/-a por conta própria, e a única borda nova da fábrica (border-block-end no item, border-block-start na grade) não muda com a contagem de colunas. Exceção consciente de contagem: esta é a única seção do arquivo com três variantes de lay em vez de duas (coluna, cartões, destaque) — pedido direto do dono junto com o redesenho, não descuido; as demais 13 seções continuam na régua de duas. */ /* coluna: a grade externa vira 1 coluna e cada item passa a três trilhas na mesma linha (número, pergunta, resposta) em vez de número ao lado de pergunta-sobre-resposta empilhadas — o mesmo desenho de leitura em mesa, generalizado para todos os itens por igual (nenhum tratamento de fecho). */ html[data-nx-lay~="confianca:coluna"] #confianca .confianca__grid { grid-template-columns: minmax(0, 1fr); } html[data-nx-lay~="confianca:coluna"] #confianca .confianca__item { grid-template-columns: auto minmax(0, 28ch) minmax(0, 1fr); } html[data-nx-lay~="confianca:coluna"] #confianca .confianca__q { grid-column: 2; grid-row: 1; } html[data-nx-lay~="confianca:coluna"] #confianca .confianca__a { grid-column: 3; grid-row: 1; } /* cartoes: grade fluida de cartões (auto-fit, 20rem) e cada item volta a ser 1 coluna empilhada (número, pergunta, resposta em fluxo vertical). */ html[data-nx-lay~="confianca:cartoes"] #confianca .confianca__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); } html[data-nx-lay~="confianca:cartoes"] #confianca .confianca__item { grid-template-columns: minmax(0, 1fr); } /* destaque: o primeiro item (a pergunta que mais pesa na due diligence, "onde o dado fica") ganha a linha inteira para si, com as mesmas três trilhas da variante coluna; os outros seis continuam na grade de duas colunas da fábrica logo abaixo. Maior por GEOMETRIA (mais largura, trilha própria), nunca por tinta — nenhuma borda, cor ou padding nasce aqui, só grid-column e grid-template-columns, dentro da lista branca do §3. */ html[data-nx-lay~="confianca:destaque"] #confianca .confianca__item:first-child { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 32ch) minmax(0, 1fr); } html[data-nx-lay~="confianca:destaque"] #confianca .confianca__item:first-child .confianca__q { grid-column: 2; grid-row: 1; } html[data-nx-lay~="confianca:destaque"] #confianca .confianca__item:first-child .confianca__a { grid-column: 3; grid-row: 1; } /* -------------------------------------------------------------------------- BLOCO 11b — #faq (.faq__list › item) empilhado (uma coluna) é a fábrica (sections/faq.css), sem regra aqui. As duas variantes abaixo só existem a partir de 60rem — abaixo disso as nove perguntas continuam empilhadas, mesmo com uma delas ativa: accordion de duas colunas em tela estreita é o cenário onde a leitura embaralha (pergunta 1 na coluna A, pergunta 2 na coluna B, resposta longa da pergunta 1 empurra a 3 para baixo enquanto a 2 fica solta ao lado — mesmo raciocínio que já vale para as três variantes de #confianca, seção anterior). align-items: start evita que a abertura de uma pergunta estique visualmente a vizinha da mesma linha da grade (comportamento de fábrica do CSS Grid quando a linha não tem masonry real). */ /* colunas: grade de duas colunas, cada pergunta ocupa uma célula. */ @media (min-width: 60rem) { html[data-nx-lay~="faq:colunas"] #faq .faq__list { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } } /* destaque: a primeira pergunta (a mais frequente na due diligence, "como começa uma conversa") ocupa a linha inteira; as outras oito seguem na mesma grade de duas colunas da variante acima. Maior por GEOMETRIA (grid-column, nunca border/padding/cor) — mesma disciplina do bloco 11. */ @media (min-width: 60rem) { html[data-nx-lay~="faq:destaque"] #faq .faq__list { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } html[data-nx-lay~="faq:destaque"] #faq .faq__item:first-child { grid-column: 1 / -1; } } /* -------------------------------------------------------------------------- BLOCO 12 — #contratacao (#contratacao > .container › head + spotlight + grid) destaqueacima é a fábrica (spotlight em cima, grade de vias embaixo, sections/contratacao.css), sem regra aqui. -------------------------------------------------------------------------- */ /* destaqueaolado: o container vira duas colunas a partir de 60rem — abaixo fica o empilhamento fábrica. Cabeçalho ocupa a linha inteira; vias na coluna esquerda, destaque na direita, ancorado no topo (align-self: start), independente da altura da grade de vias. */ @media (min-width: 60rem) { html[data-nx-lay~="contratacao:destaqueaolado"] #contratacao .container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: calc(var(--space-10) * var(--nxs-gap, 1)); } html[data-nx-lay~="contratacao:destaqueaolado"] #contratacao .section__head { grid-column: 1 / -1; } html[data-nx-lay~="contratacao:destaqueaolado"] #contratacao .contratacao__grid { grid-column: 1; grid-row: 2; } html[data-nx-lay~="contratacao:destaqueaolado"] #contratacao .contratacao__spotlight { grid-column: 2; grid-row: 2; align-self: start; } } /* fileira: a grade de vias vira 1 coluna e cada cartão passa a uma linha de três trilhas (ícone, título, texto) em vez do cartão vertical fábrica. */ html[data-nx-lay~="contratacao:fileira"] #contratacao .contratacao__grid { grid-template-columns: minmax(0, 1fr); } html[data-nx-lay~="contratacao:fileira"] #contratacao .contratacao__item .card__body { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: calc(var(--space-3) * var(--nxs-gap, 1)); } /* -------------------------------------------------------------------------- BLOCO 13 — #contato (.contato__grid › content + stage) duas é a fábrica (sections/contato.css: assimétrica a partir de 62rem), sem regra aqui. -------------------------------------------------------------------------- */ /* coluna: força 1 coluna em qualquer largura (a fábrica já empilha abaixo de 62rem; esta variante empilha sempre, de propósito, e centraliza) e limita a moldura de mídia a uma medida confortável de coluna única. */ html[data-nx-lay~="contato:coluna"] #contato .contato__grid { grid-template-columns: minmax(0, 1fr); justify-items: center; } html[data-nx-lay~="contato:coluna"] #contato .contato__content { text-align: center; } html[data-nx-lay~="contato:coluna"] #contato .contato__stage { max-inline-size: 28rem; } /* palcoprimeiro: .contato__stage é o segundo filho de .contato__grid; order traz a mídia para a frente. Exceção do §6 de risco: a mídia hospeda vídeo e a seção abre um diálogo — reordenar entra na checagem de Tab do aceite dinâmico, diferente de hero/capacidades (palco decorativo). */ html[data-nx-lay~="contato:palcoprimeiro"] #contato .contato__stage { order: var(--nxs-ord, -1); } /* palcofaixa: a mídia deixa de ser cartão-retrato e vira faixa horizontal abaixo do texto. A coluna única é a mesma técnica de "coluna" — força grid-template-columns fora de qualquer media query, o que já vence a grade assimétrica da fábrica (62rem) por especificidade e por ordem de carga, sem precisar repetir o limiar — só que aqui a moldura ganha TODA a largura do contêiner (em vez do teto de 24rem) e proporção 21/9 (em vez de 4/5). aspect-ratio está na lista branca; a receita 21/9 já existe nomeada em .media-frame--wide (04-sections.css), reescrita aqui como propriedade porque a lista branca deste arquivo não inclui customs fora de --nxs-*, e --media-ratio não é uma delas. object-fit: cover (fábrica, §3 de sections/contato.css) já resolve o recorte do filme retrato dentro da faixa larga; nenhuma regra nova precisa disso. */ html[data-nx-lay~="contato:palcofaixa"] #contato .contato__grid { grid-template-columns: minmax(0, 1fr); } html[data-nx-lay~="contato:palcofaixa"] #contato .contato__frame { aspect-ratio: 21 / 9; max-inline-size: none; inline-size: 100%; } /* palcoamplo: a partir do MESMO limiar em que a fábrica assume duas colunas (62rem, sections/contato.css) — reaproveitado, não reinventado — a proporção se inverte: a mídia passa a pesar mais que o texto (1.2fr contra 0.8fr; a fábrica é 0.85fr contra 1.15fr, texto pesando). O teto da moldura sobe de 24rem para 34rem, senão o palco ganharia coluna mais larga só para sobrar vazio ao lado dela — 34rem é maior que os 30rem que a própria fábrica já usa em telas ultralargas (min-width: 1900px), e vence essa regra por especificidade (seletor com data-nx-lay + #contato), então continua maior em qualquer largura acima de 62rem. Abaixo de 62rem a seção empilha como a fábrica; o palco mais generoso é propositalmente um efeito de duas colunas, não de coluna única. */ @media (min-width: 62rem) { html[data-nx-lay~="contato:palcoamplo"] #contato .contato__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } } html[data-nx-lay~="contato:palcoamplo"] #contato .contato__frame { max-inline-size: 34rem; } /* palcocompacto: o inverso do amplo. A mídia vira um acento quadrado e pequeno (aspect-ratio 1/1 — a mesma receita de .media-frame--square, também reescrita como propriedade pelo motivo do palcofaixa — e teto de 16rem em vez de 24rem) enquanto o texto domina a leitura. Essa troca vale em QUALQUER largura, inclusive coluna única: um cartão pequeno e centrado ainda lê como acento discreto, não precisa de duas colunas para fazer sentido. Só o ancoramento na base (align-self: end, sem mover nó nenhum) é exclusivo de duas colunas — é o que dá o efeito de "acento pousado ao pé do texto"; numa coluna só, cada item ocupa a própria linha da grade e align-self não teria nada visível para mover. */ html[data-nx-lay~="contato:palcocompacto"] #contato .contato__frame { aspect-ratio: 1 / 1; max-inline-size: 16rem; } @media (min-width: 62rem) { html[data-nx-lay~="contato:palcocompacto"] #contato .contato__stage { align-self: end; } } /* -------------------------------------------------------------------------- BLOCO 14 — #footer (.footer__inner › statement/nav/base) diretorio é a fábrica (sections/footer.css), sem regra aqui. -------------------------------------------------------------------------- */ /* compacto: a navegação do rodapé vira grade fluida (auto-fit, 12rem) em vez do flex-wrap/display:contents fábrica — vale em qualquer largura, inclusive acima de 62rem, onde vence por especificidade a regra de pele que faz .footer__nav virar display: contents. */ html[data-nx-lay~="footer:compacto"] #footer .footer__nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: calc(var(--space-8) * var(--nxs-gap, 1)); } /* centrado: a faixa de fecho inteira centraliza (o wrapper vira grade de 1 coluna implícita só para justify-items ter efeito; um
comum não responde a justify-items) e a linha final (copyright + voltar ao topo) empilha em coluna, em vez de ficar lado a lado. */ html[data-nx-lay~="footer:centrado"] #footer .footer__inner { display: grid; justify-items: center; text-align: center; } html[data-nx-lay~="footer:centrado"] #footer .footer__base { flex-direction: column; } /* -------------------------------------------------------------------------- BLOCO 15 — Eixos genéricos de disposição disp/alin/dens/larg são ortogonais à variante de layout: valem em cima de qualquer "lay", inclusive a fábrica. Por isso as regras abaixo são gateadas só por data-nx-sec (seção tocada), nunca por data-nx-lay, e escrevem nas MESMAS variáveis genéricas do bloco 1: --nxs-gap (dens, 0.6..1.6 sobre o gap fábrica do contêiner principal), --nxs-mw (larg, teto de .container), --nxs-ai (alin, cabeçalho da seção) e --nxs-ord (disp, só onde inverter não abre armadilha de foco: hero, capacidades, contato, cases). Sem valor escrito pelo estúdio (eixo 'auto'), a custom property referenciada não existe e a declaração fica inválida no cálculo: o navegador ignora só aquela propriedade, mantém fábrica, sem quebrar as outras — mesmo comportamento do mapeamento do bloco 1. footer não declara --nxs-ai por não ter .section__head (evita seletor morto). -------------------------------------------------------------------------- */ html[data-nx-sec~="hero"] #hero .hero__grid { gap: calc(clamp(var(--space-8), 5.5svh, var(--space-12)) * var(--nxs-gap, 1)); } html[data-nx-sec~="hero"] #hero .container { max-inline-size: var(--nxs-mw); } html[data-nx-sec~="provas"] #provas .stat-rail { gap: calc(var(--space-6) * var(--nxs-gap, 1)); } html[data-nx-sec~="provas"] #provas .container { max-inline-size: var(--nxs-mw); } html[data-nx-sec~="tese"] #tese .tese__list { gap: calc(var(--space-14) * var(--nxs-gap, 1)); } html[data-nx-sec~="tese"] #tese .container { max-inline-size: var(--nxs-mw); } html[data-nx-sec~="tese"] #tese .section__head { justify-items: var(--nxs-ai); text-align: var(--nxs-ai); } html[data-nx-sec~="capacidades"] #capacidades .capacidades__body { gap: calc(var(--space-10) * var(--nxs-gap, 1)); } html[data-nx-sec~="capacidades"] #capacidades .container { max-inline-size: var(--nxs-mw); } html[data-nx-sec~="capacidades"] #capacidades .section__head { justify-items: var(--nxs-ai); text-align: var(--nxs-ai); } html[data-nx-sec~="metodo"] #metodo .metodo__list { row-gap: calc(clamp(2.25rem, 1.6rem + 2.6vw, 4rem) * var(--nxs-gap, 1)); } html[data-nx-sec~="metodo"] #metodo .container { max-inline-size: var(--nxs-mw); } html[data-nx-sec~="cases"] #cases .cases__list { gap: calc(clamp(var(--space-12), 8vw, var(--space-16)) * var(--nxs-gap, 1)); } html[data-nx-sec~="cases"] #cases .container { max-inline-size: var(--nxs-mw); } @media (min-width: 60rem) { html[data-nx-sec~="cases"] #cases .case-block__body { order: var(--nxs-ord); } } html[data-nx-sec~="modelos"] #modelos .modelos__grid { gap: calc(var(--space-5) * var(--nxs-gap, 1)); } html[data-nx-sec~="modelos"] #modelos .container { max-inline-size: var(--nxs-mw); } html[data-nx-sec~="modelos"] #modelos .section__head { justify-items: var(--nxs-ai); text-align: var(--nxs-ai); } html[data-nx-sec~="portfolio"] #portfolio .portfolio__grid { gap: calc(var(--space-6) * var(--nxs-gap, 1)); } html[data-nx-sec~="portfolio"] #portfolio .container { max-inline-size: var(--nxs-mw); } html[data-nx-sec~="govtech"] #govtech .govtech-panels { gap: calc(var(--space-6) * var(--nxs-gap, 1)); } html[data-nx-sec~="govtech"] #govtech .container { max-inline-size: var(--nxs-mw); } html[data-nx-sec~="govtech"] #govtech .govtech__head.section__head { justify-items: var(--nxs-ai); text-align: var(--nxs-ai); } html[data-nx-sec~="confianca"] #confianca .confianca__grid { column-gap: calc(var(--space-10) * var(--nxs-gap, 1)); } html[data-nx-sec~="confianca"] #confianca .container { max-inline-size: var(--nxs-mw); } html[data-nx-sec~="confianca"] #confianca .section__head { justify-items: var(--nxs-ai); text-align: var(--nxs-ai); } html[data-nx-sec~="faq"] #faq .faq__list { gap: calc(var(--space-3) * var(--nxs-gap, 1)); } html[data-nx-sec~="faq"] #faq .container { max-inline-size: var(--nxs-mw); } html[data-nx-sec~="faq"] #faq .section__head { justify-items: var(--nxs-ai); text-align: var(--nxs-ai); } html[data-nx-sec~="contratacao"] #contratacao .contratacao__grid { gap: calc(var(--space-6) * var(--nxs-gap, 1)); } html[data-nx-sec~="contratacao"] #contratacao .container { max-inline-size: var(--nxs-mw); } html[data-nx-sec~="contratacao"] #contratacao .section__head { justify-items: var(--nxs-ai); text-align: var(--nxs-ai); } html[data-nx-sec~="contato"] #contato .contato__grid { gap: calc(var(--space-12) * var(--nxs-gap, 1)); } html[data-nx-sec~="contato"] #contato .container { max-inline-size: var(--nxs-mw); } html[data-nx-sec~="contato"] #contato .contato__content > .section__head { justify-items: var(--nxs-ai); text-align: var(--nxs-ai); } html[data-nx-sec~="contato"] #contato .contato__stage { order: var(--nxs-ord); } html[data-nx-sec~="footer"] #footer .footer__lead { row-gap: calc(var(--space-10) * var(--nxs-gap, 1)); column-gap: calc(var(--space-16) * var(--nxs-gap, 1)); } html[data-nx-sec~="footer"] #footer .container { max-inline-size: var(--nxs-mw); } /* hero e capacidades: o eixo de ordem (disp) já foi resolvido nos blocos 2 e 5 com fallback fixo (-1) só para a variante palcoprimeiro; aqui, fora de uma variante específica, disp vale em cima de QUALQUER lay, inclusive centrado/listapalco fábrica — por isso a regra genérica mora aqui, sem fallback (some quando disp = 'auto'). */ html[data-nx-sec~="hero"] #hero .hero__stage { order: var(--nxs-ord); } html[data-nx-sec~="capacidades"] #capacidades .capacidades__stage { order: var(--nxs-ord); } /* -------------------------------------------------------------------------- BLOCO 16 — Guarda de surface Os nove grids abaixo (sete seções: provas, capacidades ×2, tese, modelos, portfolio, govtech ×2, contratacao) são os que 08-skin-surface remonta como matriz de células contíguas usando gap: var(--hairline) como borda compartilhada (contrato §12.2). O eixo de densidade (bloco 15 e alguns dos blocos 2–14) multiplicaria esse gap e destruiria a ilusão de tabela. A guarda devolve gap ao hairline só sob [data-skin="surface"], com especificidade maior que qualquer regra anterior sobre o mesmo seletor — por isso mora por último. Só gap, dentro da lista branca. */ html[data-nx-sec~="provas"][data-skin="surface"] #provas .stat-rail { gap: var(--hairline); } html[data-nx-sec~="capacidades"][data-skin="surface"] #capacidades .capacidades__body { gap: var(--hairline); } html[data-nx-sec~="capacidades"][data-skin="surface"] #capacidades .capacidades__list { gap: var(--hairline); } html[data-nx-sec~="tese"][data-skin="surface"] #tese .tese__list { gap: var(--hairline); column-gap: var(--hairline); row-gap: var(--hairline); } html[data-nx-sec~="modelos"][data-skin="surface"] #modelos .modelos__grid { gap: var(--hairline); } html[data-nx-sec~="portfolio"][data-skin="surface"] #portfolio .portfolio__grid { gap: var(--hairline); } html[data-nx-sec~="govtech"][data-skin="surface"] #govtech .govtech-panels { gap: var(--hairline); } html[data-nx-sec~="govtech"][data-skin="surface"] #govtech .govtech-chips { gap: var(--hairline); } html[data-nx-sec~="contratacao"][data-skin="surface"] #contratacao .contratacao__grid { gap: var(--hairline); } /* -------------------------------------------------------------------------- BLOCO 16b — Guarda de surface para #confianca (achado na verificação do redesenho de agosto de 2026, não estava coberto pelo bloco 16 porque a pele usa border ali, não gap: var(--hairline) — por isso confianca não está na lista de sete seções do bloco 16). 08-skin-surface.css remonta #confianca como tabela de UMA coluna, com `.confianca__item` virando três trilhas (número, pergunta de 22rem, resposta) só a partir de 900px, por seletor próprio ([data-skin="surface"] .confianca__grid .confianca__item, sem id). As variantes coluna/cartões/destaque (bloco 11) reescrevem grid-template-columns do mesmo `.confianca__item` para larguras pensadas para a grade de duas colunas da fábrica — dentro de um cartão de ~356px (variante cartões) a trilha de 22rem da pele não cabe, e a medição confirmou texto empurrado para fora da caixa visível (prova: `confianca-surface-variant-cartoes-check.png`/`-coluna-check.png` no adendo do relatório do dia, caixa preta sem texto legível). A pele já é uma matriz de células completa por conta própria — aqui ela CONTINUA vencendo por cima, mesma doutrina do bloco 16, devolvendo os valores de fábrica da própria pele com especificidade maior que qualquer variante deste arquivo (por isso mora depois do bloco 11, com #confianca no seletor). Variante de lay para #confianca vira no-op sob esta pele — comportamento aceitável: a pele nunca prometeu suportar as três variantes, só o próprio desenho de tabela. */ html[data-skin="surface"] #confianca .confianca__grid { grid-template-columns: minmax(0, 1fr); } html[data-skin="surface"] #confianca .confianca__item, html[data-skin="surface"] #confianca .confianca__item:first-child { grid-column: auto; grid-template-columns: auto minmax(0, 1fr); } @media (min-width: 900px) { html[data-skin="surface"] #confianca .confianca__item, html[data-skin="surface"] #confianca .confianca__item:last-child, html[data-skin="surface"] #confianca .confianca__item:first-child { grid-template-columns: auto minmax(0, 22rem) minmax(0, 1fr); } html[data-skin="surface"] #confianca .confianca__item .confianca__q, html[data-skin="surface"] #confianca .confianca__item:last-child .confianca__q, html[data-skin="surface"] #confianca .confianca__item:first-child .confianca__q { grid-column: 2; grid-row: 1; } html[data-skin="surface"] #confianca .confianca__item .confianca__a, html[data-skin="surface"] #confianca .confianca__item:last-child .confianca__a, html[data-skin="surface"] #confianca .confianca__item:first-child .confianca__a { grid-column: 3; grid-row: 1; } } /* -------------------------------------------------------------------------- BLOCO 17 — Nota de ausência de animação Nenhuma variante deste arquivo anima. Nenhum seletor entra em transition ou animation, e nenhuma propriedade estrutural (grid-template-columns, grid-template-rows, order, gap, position) participa de transição em lugar nenhum — são propriedades de LAYOUT, e o contrato (§6.0) reserva movimento para transform e opacity, nunca para o que decide onde a caixa fica. Trocar de variante é instantâneo: troca de atributo no , recálculo no próximo frame, sem quadro intermediário. A exceção de opacity (bloco 6, .metodo__line em metodo:grade) também não transiciona: é um valor final, não uma trajetória. ========================================================================== */