/* /central — abertura: #ct-hero (a promessa da página).

   Irmã de css/sistema/abertura.css no ritmo e na escala, e diferente em uma coisa: aqui
   o raio 3D fica NO HERÓI, e não de fundo. A /central não carrega js/bg3d.js — a
   coreografia daquele módulo é escrita seção a seção por página, e uma data-page
   desconhecida cai no fallback da home, não acha seção nenhuma e o módulo se apaga
   sozinho. Ver o spec 2026-08-30, seção 8.1. */

/* ================================================================= HERO */
#ct-hero{
  position:relative; z-index:2;
  min-height:100vh;
  background:#0C0C0C; color:#fff;
  padding:calc(190 * var(--vhu)) var(--gutter) calc(88 * var(--vhu));
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  column-gap:calc(16 * var(--u));
  align-content:space-between;
  overflow:clip;
}
/* mesmo rastro de varredura da /sistema, espelhado: aqui a massa está à direita,
   onde mora o raio, e o texto fica sobre o lado escuro */
#ct-hero::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 55% 50% at 78% 38%, rgba(10,22,200,.30) 0%, rgba(10,22,200,0) 70%),
    radial-gradient(ellipse 42% 55% at 12% 82%, rgba(10,22,200,.14) 0%, rgba(10,22,200,0) 70%);
  pointer-events:none;
}
#ct-hero > *{position:relative}

.ct-hero__col{grid-column:1 / span 3; grid-row:1}

.ct-hero__eyebrow{
  font-size:calc(8 * var(--u));
  color:#8A8A8A;
  margin-bottom:calc(26 * var(--vhu));
}

/* 58 e não 70 como na /sistema: são QUATRO linhas aqui contra três lá, e no corpo da
   irmã o bloco passava da dobra em telas de 701px de altura. */
.ct-hero__title{
  font-size:calc(58 * var(--u));
  line-height:calc(64 * var(--vhu));   /* +6: acentos de CÉREBRO e MÃO */
  color:#fff;
}
.ct-hero__title .ln{display:block; width:fit-content}
/* as duas últimas linhas são a virada do argumento — ficam em cinza, como o .dim
   dos h2, para o olho ler "isto aqui é a outra metade da frase" */
.ct-hero__title .ln:nth-child(3),
.ct-hero__title .ln:nth-child(4){color:#8A8A8A}

.ct-hero__para{
  grid-column:1 / span 2; grid-row:2;
  margin-top:calc(40 * var(--vhu));
  font-size:calc(13 * var(--u));
  line-height:calc(17.4 * var(--vhu));
  color:#C2C2C2;
}

/* ---------------------------------------------------------------- o raio
   A caixa tem altura declarada porque o canvas do bolt é dimensionado a partir do
   elemento. Sem altura ela colapsa para zero e o raio some — sem erro de console, e
   com a página parecendo apenas "vazia do lado direito". */
.ct-hero__bolt{
  grid-column:4; grid-row:1 / span 2;
  align-self:center;
  width:100%;
  height:calc(420 * var(--vhu));
}

/* ---------------------------------------------------------------- o fio
   Cinco palavras ligadas por traço, no rodapé do herói: é o índice da página em uma
   linha. Mesmo padrão do .sis-hero__chain. */
.ct-hero__fio{
  grid-column:1 / span 4; grid-row:3;
  display:flex; align-items:center; gap:calc(14 * var(--u));
  margin-top:calc(58 * var(--vhu));
  font-size:calc(8 * var(--u));
  color:#8A8A8A;
}
.ct-hero__fio b{font-weight:400; letter-spacing:.06em}
.ct-hero__fio i{
  display:block; width:calc(34 * var(--u)); height:1px;
  background:#333;
}