/* /central — #ct-so (a IA como sistema operacional), #ct-sala (o prédio) e #ct-limites
   (o que não resolve, mais a procedência).

   O acordeão de #ct-limites usa as MESMAS classes de css/sistema/limites.css
   (.acc__item, .acc__q, .acc__panel, .acc__inner), com as regras copiadas para cá: as
   folhas da /sistema não são carregadas nesta página. Quem corrigir o acordeão de uma
   olha o da outra. */

/* ================================================================= 08 · SISTEMA OPERACIONAL */
.so__verbos{
  margin-top:calc(86 * var(--vhu));
  border-top:1px solid #222;
}
.so__v{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  column-gap:calc(16 * var(--u));
  align-items:start;
  padding:calc(26 * var(--vhu)) 0 calc(28 * var(--vhu));
  border-bottom:1px solid #222;
}
.so__v__n{grid-column:1; font-size:calc(9.5 * var(--u)); color:#444}
.so__v__nome{
  grid-column:2;
  font-size:calc(24 * var(--u));
  line-height:calc(26 * var(--vhu));
  color:#fff;
}
.so__v__d{
  grid-column:3 / span 2;
  width:calc(500 * var(--u));
  font-size:calc(11.5 * var(--u));
  line-height:calc(15 * var(--vhu));
  color:#B0B0B0;
}

/* o limite fica NO CORPO, com fio próprio — não em nota de rodapé. É a mesma trava da
   fase 02 da implantação da /sistema, e ela não afrouxa porque o cérebro ficou maior. */
.so__limite{
  margin-top:calc(60 * var(--vhu));
  padding-left:calc(24 * var(--u));
  border-left:2px solid #fff;
  width:calc(860 * var(--u));
  font-size:calc(14 * var(--u));
  line-height:calc(19 * var(--vhu));
  color:#fff;
}

/* ================================================================= 09 · SALA E ENERGIA */
.sala__itens{
  margin-top:calc(86 * var(--vhu));
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  column-gap:calc(40 * var(--u));
  border-top:1px solid #E8E8E8;
}
.sala__itens li{
  padding:calc(16 * var(--vhu)) 0;
  border-bottom:1px solid #E8E8E8;
}
.sala__n{
  display:block;
  font-size:calc(8 * var(--u));
  color:#0C0C0C;
  margin-bottom:calc(6 * var(--vhu));
}
.sala__d{
  display:block;
  font-size:calc(11.5 * var(--u));
  line-height:calc(15 * var(--vhu));
  color:#5A5A5A;
}
.sala__airgap{
  margin-top:calc(64 * var(--vhu));
  width:calc(760 * var(--u));
  font-size:calc(18 * var(--u));
  line-height:calc(24 * var(--vhu));
  color:#0C0C0C;
}

/* ================================================================= 10 · OS LIMITES */
.lim__acc{margin-top:calc(86 * var(--vhu))}

.acc__item{border-bottom:1px solid #E0E0E0; transition:border-color .28s cubic-bezier(.45,0,.2,1)}
.acc__item:first-child{border-top:1px solid #E0E0E0}
.acc__item.is-open{border-bottom-color:#0C0C0C}
.acc__q{
  position:relative;
  display:block; width:100%; text-align:left;
  padding:calc(17 * var(--vhu)) calc(40 * var(--u)) calc(17 * var(--vhu)) 0;
  font-family:var(--font-display);
  font-variation-settings:'wdth' var(--disp-wdth),'wght' 760;
  font-size:calc(17 * var(--u)); line-height:calc(20 * var(--vhu));
  text-transform:uppercase;
  color:#6E6E6E;
  transition:color .18s ease;
  cursor:none;
}
.acc__q::after,.acc__q::before{
  content:''; position:absolute; right:calc(4 * var(--u)); top:50%;
  background:#B0B0B0; transition:background-color .22s ease, transform .28s cubic-bezier(.45,0,.2,1);
}
.acc__q::before{width:calc(11 * var(--u)); height:1px; margin-top:-0.5px}
.acc__q::after{width:1px; height:calc(11 * var(--u)); margin-top:calc(-5.5 * var(--u)); margin-right:calc(5 * var(--u))}
.acc__q:hover,.acc__item.is-open .acc__q{color:#0C0C0C}
.acc__q:hover::before,.acc__q:hover::after,
.acc__item.is-open .acc__q::before,.acc__item.is-open .acc__q::after{background:#0C0C0C}
.acc__item.is-open .acc__q::after{transform:scaleY(0)}

.acc__panel{height:0; overflow:hidden; transition:height .28s cubic-bezier(.45,0,.2,1)}
.acc__inner{padding:0 0 calc(22 * var(--vhu))}
.acc__inner p{
  width:calc(620 * var(--u));
  font-size:calc(12.5 * var(--u)); line-height:calc(16 * var(--vhu));
  color:#3A3A3A;
}

/* ---------------------------------------------------------------- a procedência */
.proc{
  margin-top:calc(104 * var(--vhu));
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  column-gap:calc(16 * var(--u));
  align-items:start;
}
.proc__t{grid-column:1; font-size:calc(8 * var(--u)); color:#0C0C0C}
.proc__i{
  grid-column:2 / span 3;
  font-size:calc(13 * var(--u));
  line-height:calc(17.4 * var(--vhu));
  color:#2E2E2E;
}
.proc ul{
  grid-column:2 / span 3;
  margin-top:calc(26 * var(--vhu));
  border-top:1px solid #DCDCDC;
}
.proc li{
  display:grid;
  grid-template-columns:calc(300 * var(--u)) 1fr;
  column-gap:calc(24 * var(--u));
  padding:calc(13 * var(--vhu)) 0;
  border-bottom:1px solid #DCDCDC;
}
.proc__n{
  font-size:calc(11 * var(--u));
  line-height:calc(14.5 * var(--vhu));
  color:#0C0C0C;
}
.proc__o{
  font-size:calc(11 * var(--u));
  line-height:calc(14.5 * var(--vhu));
  color:#6E6E6E;
}