/* /sistema — primitivos de layout da página.

   A home é uma réplica do vídeo: seções de altura fixa com filhos absolutos. Esta
   página é conteúdo novo e denso, então usa FLUXO (como #alignment e #faq, as duas
   exceções da home) — mas sobre a MESMA grade, a mesma escala tipográfica e os
   mesmos primitivos de reveal.

   Grade da home, extraída dos `left:` que se repetem:
     col1 28u · col2 324u · col3 620u · col4 916u · borda direita 1196u
   Ou seja: 4 colunas de 280u com gap de 16u (passo 296u), dentro de --gutter.
   `.sis-grid` reproduz isso exatamente. */

/* ---------------------------------------------------------------- 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) .sis-rv{visibility:hidden}

/* ---------------------------------------------------------------- seção */
.sis-sec{
  position:relative; z-index:3;
  padding:calc(118 * var(--vhu)) var(--gutter) calc(118 * var(--vhu));
}
.sis-sec--dark{background:#0C0C0C; color:#fff}
.sis-sec--light{background:#fff; color:#0C0C0C}
.sis-sec--grey{background:#F5F5F5; color:#0C0C0C}

.sis-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  column-gap:calc(16 * var(--u));
}

/* ---------------------------------------------------------------- cabeçalho de seção */
.sis-head{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  column-gap:calc(16 * var(--u));
}
.sis-head__label{
  grid-column:1; grid-row:1;
  align-self:start;
  font-size:calc(8 * var(--u));
  color:#6E6E6E;
}
.sis-sec--dark .sis-head__label{color:#8A8A8A}

.sis-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;
}
.sis-sec--dark .sis-head__h2{color:#fff}
.sis-head__h2 span{display:block; width:fit-content}
.sis-head__h2 .dim{color:#A9A9A9}
.sis-sec--dark .sis-head__h2 .dim{color:#555}

.sis-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;
}
.sis-sec--dark .sis-head__lead{color:#C2C2C2}

/* variante: lead na quarta coluna (cabeçalhos curtos) */
.sis-head--aside .sis-head__lead{
  grid-column:4; grid-row:1;
  width:auto; margin-top:calc(9 * var(--vhu));
}

/* ---------------------------------------------------------------- corpo */
.sis-body{margin-top:calc(86 * var(--vhu))}
.sis-body--tight{margin-top:calc(52 * var(--vhu))}

.sis-p{
  font-size:calc(12.5 * var(--u));
  line-height:calc(16 * var(--vhu));
  color:#333;
}
.sis-sec--dark .sis-p{color:#C2C2C2}

.sis-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 */
.sis-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;
}
.sis-sec--dark .sis-remate{color:#fff}

/* ---------------------------------------------------------------- fios */
.sis-hair{
  height:1px; background:#E8E8E8;
  transform-origin:left center;
}
.sis-sec--dark .sis-hair{background:#222}

/* ---------------------------------------------------------------- linhas numeradas
   (o padrão "values" da home, em fluxo em vez de absoluto) */
.sis-rows{border-top:1px solid #E8E8E8}
.sis-sec--dark .sis-rows{border-top-color:#222}

.sis-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;
}
.sis-sec--dark .sis-row{border-bottom-color:#222}

/* fio que cresce da esquerda no hover — o "val__hair--active" da home */
.sis-row__hair{
  position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:#0C0C0C; transform:scaleX(0); transform-origin:left center;
}
.sis-sec--dark .sis-row__hair{background:#fff}

.sis-row__n{
  grid-column:1;
  font-size:calc(9.5 * var(--u));
  color:#B0B0B0;
  transition:color .3s ease;
}
.sis-sec--dark .sis-row__n{color:#444}
.sis-row__name{
  grid-column:2;
  font-size:calc(24 * var(--u));
  line-height:calc(26 * var(--vhu));
  color:#0C0C0C;
  transition:color .3s ease;
}
.sis-sec--dark .sis-row__name{color:#666}
.sis-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;
}
.sis-sec--dark .sis-row__text{color:#666}

.sis-row:hover .sis-row__n{color:#0C0C0C}
.sis-row:hover .sis-row__text{color:#0C0C0C}
.sis-sec--dark .sis-row:hover .sis-row__n{color:#fff}
.sis-sec--dark .sis-row:hover .sis-row__name{color:#fff}
.sis-sec--dark .sis-row:hover .sis-row__text{color:#C2C2C2}

/* ---------------------------------------------------------------- lista de itens com marcador */
.sis-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;
}
.sis-sec--dark .sis-list li{border-bottom-color:#222; color:#B0B0B0}
.sis-list li:first-child{border-top:1px solid #E8E8E8}
.sis-sec--dark .sis-list li:first-child{border-top-color:#222}
.sis-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);
}
.sis-sec--dark .sis-list li::before{background:#fff}

/* lista compacta, sem fio (usada dentro de cartões) */
.sis-list--bare li{border:0 !important; padding:calc(5 * var(--vhu)) 0 calc(5 * var(--vhu)) calc(20 * var(--u))}
.sis-list--bare li::before{top:calc(11 * var(--vhu))}

/* ---------------------------------------------------------------- rótulo de coluna */
.sis-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));
}
.sis-sec--dark .sis-colhead{border-bottom-color:#fff}
.sis-colhead__idx{font-size:calc(8 * var(--u)); color:var(--c-blue)}
.sis-sec--dark .sis-colhead__idx{color:#fff}
.sis-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 */
.sis-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;
}
.sis-pill:hover{background:#0C0C0C; color:#fff; border-color:#0C0C0C}
.sis-sec--dark .sis-pill{border-color:rgba(255,255,255,.45); color:#fff}
.sis-sec--dark .sis-pill:hover{background:#fff; color:#0C0C0C; border-color:#fff}

/* ---------------------------------------------------------------- viradas de ato
   Faixas escuras entre os atos: uma frase em display e o fio da promessa (a cadeia do
   herói) com o trecho já percorrido aceso. Preenchidas por js/sistema/shell.js a partir
   de SISTEMA.viradas. Spec 2026-08-31. */
.sis-virada{
  position:relative; z-index:3;
  background:#0C0C0C; color:#fff;
  padding:calc(88 * var(--vhu)) var(--gutter) calc(84 * var(--vhu));
}
.sis-virada__frase{
  width:calc(880 * var(--u));
  font-size:calc(30 * var(--u)); line-height:calc(37 * var(--vhu));
}
.sis-virada__fio{
  display:flex; align-items:center; gap:calc(14 * var(--u));
  margin-top:calc(36 * var(--vhu));
  font-size:calc(8 * var(--u));
  color:#4A4A4A;
}
.sis-virada__fio b{font-weight:500}
/* o azul da marca some sobre preto; #6E82FF é o azul de fundo escuro do projeto
   (mesma regra do painel /sistema/board) */
.sis-virada__fio b.is-on{color:#6E82FF}
.sis-virada__fio i{flex:none; width:calc(56 * var(--u)); height:1px; background:#262626}
.sis-virada__fio i.is-on{background:#6E82FF}