/* /central — #ct-anatomia: o crânio e o sistema nervoso.

   A coluna da direita é desenhada como PILHA, com duas molduras deslocadas atrás dela.
   Isso não é ornamento: a seção existe para matar o mal-entendido de que cada unidade
   precisa de um chassi como os do crânio. A pilha diz "uma por site, e elas se repetem"
   sem gastar uma legenda para isso. */

.ana__split{
  position:relative;
  margin-top:calc(86 * var(--vhu));
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  column-gap:calc(16 * var(--u));
}

/* o fio do meio: a fronteira entre as duas naturezas de máquina */
.ana__fio{
  position:absolute;
  left:calc(50% - 1px); top:0; bottom:0;
  width:1px; background:#E8E8E8;
}

.ana__col{position:relative}
.ana__col--energy{grid-column:1 / span 2; padding-right:calc(34 * var(--u))}
.ana__col--unidade{grid-column:3 / span 2; padding-left:calc(34 * var(--u))}

/* as duas molduras de trás: só a da direita as tem */
.ana__col--unidade::before,
.ana__col--unidade::after{
  content:'';
  position:absolute; left:calc(34 * var(--u)); right:0;
  top:calc(-10 * var(--vhu)); bottom:calc(-10 * var(--vhu));
  border:1px solid #E8E8E8;
  pointer-events:none;
}
.ana__col--unidade::before{transform:translate(calc(10 * var(--u)), calc(10 * var(--vhu)))}
.ana__col--unidade::after{transform:translate(calc(20 * var(--u)), calc(20 * var(--vhu))); opacity:.55}
.ana__col--unidade > *{position:relative; z-index:1}

.ana__t{
  font-size:calc(8 * var(--u));
  color:#0C0C0C;
  padding-bottom:calc(12 * var(--vhu));
  border-bottom:1px solid #0C0C0C;
  margin-bottom:calc(20 * var(--vhu));
}

.ana__col li{
  padding:calc(13 * var(--vhu)) 0;
  border-bottom:1px solid #E8E8E8;
}
.ana__i__n{
  display:block;
  font-size:calc(12 * var(--u));
  line-height:calc(15 * var(--vhu));
  color:#0C0C0C;
  margin-bottom:calc(5 * var(--vhu));
  font-family:var(--font-mono);
  letter-spacing:.04em;
}
.ana__i__d{
  display:block;
  font-size:calc(11.5 * var(--u));
  line-height:calc(15 * var(--vhu));
  color:#5A5A5A;
}

/* ---------------------------------------------------------------- as duas regras
   O que sustenta a arquitetura, em duas frases. Fundo escuro dentro de seção clara:
   elas são a conclusão da seção, não mais um item de lista. */
.ana__regras{
  margin-top:calc(78 * var(--vhu));
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  column-gap:calc(16 * var(--u));
}
.ana__r{
  background:#0C0C0C;
  padding:calc(30 * var(--vhu)) calc(28 * var(--u)) calc(34 * var(--vhu));
}
.ana__r__n{
  display:block;
  font-size:calc(8 * var(--u));
  line-height:calc(12 * var(--vhu));
  color:#fff;
  margin-bottom:calc(16 * var(--vhu));
}
.ana__r__d{
  font-size:calc(12.5 * var(--u));
  line-height:calc(16.5 * var(--vhu));
  color:#B0B0B0;
}

/* ---------------------------------------------------------------- a cascata
   Três camadas, e a coluna da LATÊNCIA é a que carrega o argumento: é ela que mostra por
   que a camada 1 não é o modelo grande, e por que o motivo não é custo. Por isso o par
   fica em corpo de leitura, e não escondido como legenda. */
.ana__casc{
  margin-top:calc(86 * var(--vhu));
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  column-gap:calc(16 * var(--u));
}
.ana__casc__t{grid-column:1; font-size:calc(8 * var(--u)); color:#0C0C0C}
.ana__casc__i{
  grid-column:2 / span 3;
  font-size:calc(13 * var(--u)); line-height:calc(17.4 * var(--vhu)); color:#2E2E2E;
}
.ana__casc ul{
  grid-column:1 / span 4;
  margin-top:calc(34 * var(--vhu));
  display:grid; grid-template-columns:repeat(3, 1fr); column-gap:calc(16 * var(--u));
  border-top:1px solid #0C0C0C;
}
.ana__c{padding:calc(24 * var(--vhu)) calc(24 * var(--u)) 0 0}
.ana__c__n{display:block; font-size:calc(8 * var(--u)); color:#B0B0B0; margin-bottom:calc(12 * var(--vhu))}
.ana__c__nome{
  font-size:calc(22 * var(--u)); line-height:calc(24 * var(--vhu));
  color:#0C0C0C; margin-bottom:calc(14 * var(--vhu));
}
.ana__c__d{font-size:calc(11.5 * var(--u)); line-height:calc(15 * var(--vhu)); color:#5A5A5A}
.ana__c__par{
  display:block;
  margin-top:calc(14 * var(--vhu));
  padding-top:calc(10 * var(--vhu));
  border-top:1px solid #E8E8E8;
  font-size:calc(12.5 * var(--u)); line-height:calc(16 * var(--vhu)); color:#0C0C0C;
}
.ana__c__par i{
  display:block; font-style:normal;
  font-size:calc(8 * var(--u)); color:#8A8A8A; margin-bottom:calc(4 * var(--vhu));
}
.ana__casc__r{
  grid-column:1 / span 4;
  margin-top:calc(40 * var(--vhu));
  padding-left:calc(24 * var(--u));
  border-left:2px solid #0C0C0C;
  width:calc(880 * var(--u));
  font-size:calc(12.5 * var(--u)); line-height:calc(16.5 * var(--vhu)); color:#3A3A3A;
}