/* /central — primitivos de layout da página. Mesma grade e mesma escala da /sistema (css/sistema/shell.css): 4 colunas de 280u com gap de 16u, dentro de --gutter. As duas páginas são irmãs — a /central é a continuação técnica da /sistema, e ler uma depois da outra não pode parecer trocar de site. Prefixo próprio (.ct-) e não reaproveitamento do .sis- porque as folhas da /sistema não são carregadas aqui: cada página carrega só as suas. Copiar a grade é o preço de não acoplar duas páginas por uma folha compartilhada que ninguém sabe quem mais usa. Quem corrigir um primitivo aqui olha o irmão em css/sistema/shell.css, e vice-versa. */ /* ---------------------------------------------------------------- o canvas do raio js/brand/bolt.js cria UM canvas `.br-bolt3d` e o pendura no , recortando por scissor o retângulo de cada [data-bolt]. Ele NÃO traz o próprio posicionamento: a regra mora na folha de cada página que usa o raio (css/hub.css, css/premiss.css, css/brand/identidade.css, css/m/kit.css). Sem esta regra o canvas nasce estático, com 300x150 no canto, e o raio simplesmente não aparece — sem erro de console, e com a caixa [data-bolt] continuando a ocupar o espaço dela, então nada transborda e nenhuma verificação reclama. Este defeito já aconteceu neste projeto em 2026-08-28, e voltou a acontecer aqui. */ .br-bolt3d{ position:fixed; inset:0; width:100%; height:100%; z-index:5; pointer-events:none; display:block; } /* ---------------------------------------------------------------- gate pré-boot */ /* Enquanto as fontes não carregam, tudo que tem reveal fica invisível (senão pisca). Na home a lista é explícita em base.css; aqui basta uma classe. */ html:not(.is-ready):not(.is-shot) .ct-rv{visibility:hidden} /* ---------------------------------------------------------------- seção */ .ct-sec{ position:relative; z-index:3; padding:calc(118 * var(--vhu)) var(--gutter) calc(118 * var(--vhu)); } .ct-sec--dark{background:#0C0C0C; color:#fff} .ct-sec--light{background:#fff; color:#0C0C0C} .ct-sec--grey{background:#F5F5F5; color:#0C0C0C} .ct-grid{ display:grid; grid-template-columns:repeat(4, 1fr); column-gap:calc(16 * var(--u)); } /* ---------------------------------------------------------------- cabeçalho de seção */ .ct-head{ display:grid; grid-template-columns:repeat(4, 1fr); column-gap:calc(16 * var(--u)); } .ct-head__label{ grid-column:1; grid-row:1; align-self:start; font-size:calc(8 * var(--u)); color:#6E6E6E; } .ct-sec--dark .ct-head__label{color:#8A8A8A} .ct-head__h2{ grid-column:2 / span 3; grid-row:1; font-size:calc(52 * var(--u)); line-height:calc(58 * var(--vhu)); /* +6: acentos e cedilha do PT-BR */ color:#0C0C0C; } .ct-sec--dark .ct-head__h2{color:#fff} .ct-head__h2 span{display:block; width:fit-content} .ct-head__h2 .dim{color:#A9A9A9} .ct-sec--dark .ct-head__h2 .dim{color:#555} .ct-head__lead{ grid-column:2 / span 2; grid-row:2; width:calc(500 * var(--u)); margin-top:calc(34 * var(--vhu)); font-size:calc(13 * var(--u)); line-height:calc(17.4 * var(--vhu)); color:#2E2E2E; } .ct-sec--dark .ct-head__lead{color:#C2C2C2} /* variante: lead na quarta coluna (cabeçalhos curtos) */ .ct-head--aside .ct-head__lead{ grid-column:4; grid-row:1; width:auto; margin-top:calc(9 * var(--vhu)); } /* ---------------------------------------------------------------- corpo */ .ct-body{margin-top:calc(86 * var(--vhu))} .ct-body--tight{margin-top:calc(52 * var(--vhu))} .ct-p{ font-size:calc(12.5 * var(--u)); line-height:calc(16 * var(--vhu)); color:#333; } .ct-sec--dark .ct-p{color:#C2C2C2} .ct-note{ font-size:calc(10 * var(--u)); line-height:calc(13 * var(--vhu)); color:#8A8A8A; } /* remate: a frase que fecha uma seção, um degrau abaixo do título */ .ct-remate{ margin-top:calc(64 * var(--vhu)); width:calc(660 * var(--u)); font-size:calc(18 * var(--u)); line-height:calc(24 * var(--vhu)); color:#0C0C0C; } .ct-sec--dark .ct-remate{color:#fff} /* ---------------------------------------------------------------- fios */ .ct-hair{ height:1px; background:#E8E8E8; transform-origin:left center; } .ct-sec--dark .ct-hair{background:#222} /* ---------------------------------------------------------------- linhas numeradas (o padrão "values" da home, em fluxo em vez de absoluto) */ .ct-rows{border-top:1px solid #E8E8E8} .ct-sec--dark .ct-rows{border-top-color:#222} .ct-row{ position:relative; display:grid; grid-template-columns:repeat(4, 1fr); column-gap:calc(16 * var(--u)); padding:calc(26 * var(--vhu)) 0 calc(28 * var(--vhu)); border-bottom:1px solid #E8E8E8; cursor:none; } .ct-sec--dark .ct-row{border-bottom-color:#222} /* fio que cresce da esquerda no hover — o "val__hair--active" da home */ .ct-row__hair{ position:absolute; left:0; right:0; bottom:-1px; height:1px; background:#0C0C0C; transform:scaleX(0); transform-origin:left center; } .ct-sec--dark .ct-row__hair{background:#fff} .ct-row__n{ grid-column:1; font-size:calc(9.5 * var(--u)); color:#B0B0B0; transition:color .3s ease; } .ct-sec--dark .ct-row__n{color:#444} .ct-row__name{ grid-column:2; font-size:calc(24 * var(--u)); line-height:calc(26 * var(--vhu)); color:#0C0C0C; transition:color .3s ease; } .ct-sec--dark .ct-row__name{color:#666} .ct-row__text{ grid-column:3 / span 2; width:calc(500 * var(--u)); font-size:calc(11.5 * var(--u)); line-height:calc(14 * var(--vhu)); color:#5A5A5A; transition:color .3s ease; } .ct-sec--dark .ct-row__text{color:#666} .ct-row:hover .ct-row__n{color:#0C0C0C} .ct-row:hover .ct-row__text{color:#0C0C0C} .ct-sec--dark .ct-row:hover .ct-row__n{color:#fff} .ct-sec--dark .ct-row:hover .ct-row__name{color:#fff} .ct-sec--dark .ct-row:hover .ct-row__text{color:#C2C2C2} /* ---------------------------------------------------------------- lista de itens com marcador */ .ct-list li{ position:relative; padding:calc(9 * var(--vhu)) 0 calc(9 * var(--vhu)) calc(20 * var(--u)); border-bottom:1px solid #E8E8E8; font-size:calc(11.5 * var(--u)); line-height:calc(14 * var(--vhu)); color:#3A3A3A; } .ct-sec--dark .ct-list li{border-bottom-color:#222; color:#B0B0B0} .ct-list li:first-child{border-top:1px solid #E8E8E8} .ct-sec--dark .ct-list li:first-child{border-top-color:#222} .ct-list li::before{ content:''; position:absolute; left:calc(3 * var(--u)); top:calc(15 * var(--vhu)); width:calc(4 * var(--u)); height:calc(4 * var(--u)); border-radius:50%; background:var(--c-blue); } .ct-sec--dark .ct-list li::before{background:#fff} /* lista compacta, sem fio (usada dentro de cartões) */ .ct-list--bare li{border:0 !important; padding:calc(5 * var(--vhu)) 0 calc(5 * var(--vhu)) calc(20 * var(--u))} .ct-list--bare li::before{top:calc(11 * var(--vhu))} /* ---------------------------------------------------------------- rótulo de coluna */ .ct-colhead{ display:flex; align-items:baseline; gap:calc(10 * var(--u)); padding-bottom:calc(11 * var(--vhu)); border-bottom:1px solid #0C0C0C; margin-bottom:calc(18 * var(--vhu)); } .ct-sec--dark .ct-colhead{border-bottom-color:#fff} .ct-colhead__idx{font-size:calc(8 * var(--u)); color:var(--c-blue)} .ct-sec--dark .ct-colhead__idx{color:#fff} .ct-colhead__t{ font-size:calc(15 * var(--u)); line-height:1; text-transform:uppercase; font-family:var(--font-display); font-variation-settings:'wdth' var(--disp-wdth),'wght' 760; } /* ---------------------------------------------------------------- pílula da página */ .ct-pill{ border:1px solid #DADADA; color:#0C0C0C; height:calc(32 * var(--vhu)); padding:0 calc(20 * var(--u)); font-size:calc(9 * var(--u)); transition:background-color .25s ease, color .25s ease, border-color .25s ease; cursor:none; } .ct-pill:hover{background:#0C0C0C; color:#fff; border-color:#0C0C0C} .ct-sec--dark .ct-pill{border-color:rgba(255,255,255,.45); color:#fff} .ct-sec--dark .ct-pill:hover{background:#fff; color:#0C0C0C; border-color:#fff}