/* /sistema — #sis-ia (a inteligência central: a peça que a página existe para vender)
   e #sis-relatorio (o que chega na mesa de quem decide). */

/* ================================================================= A IA */
#sis-ia{
  background:#0C0C0C; color:#fff;
  overflow:clip;
}

/* frase-manifesto: o degrau entre o cabeçalho e a demonstração */
.ia__manifesto{
  margin-top:calc(96 * var(--vhu));
  display:grid; grid-template-columns:repeat(4, 1fr); column-gap:calc(16 * var(--u));
}
.ia__manifesto p{
  grid-column:2 / span 3;
  border-left:1px solid var(--c-blue);
  padding:calc(4 * var(--vhu)) 0 calc(4 * var(--vhu)) calc(22 * var(--u));
  font-family:var(--font-display);
  font-variation-settings:'wdth' var(--disp-wdth),'wght' 760;
  font-size:calc(26 * var(--u)); line-height:calc(32 * var(--vhu));
  text-transform:uppercase;
  color:#fff;
}

/* ---------------------------------------------------------------- o console */
.ia__console{
  margin-top:calc(84 * var(--vhu));
  border:1px solid #262626;
  background:#0F0F0F;
}
.ia__bar{
  display:flex; align-items:center; gap:calc(10 * var(--u));
  height:calc(30 * var(--vhu));
  padding:0 calc(14 * var(--u));
  border-bottom:1px solid #262626;
  font-size:calc(7.5 * var(--u));
  color:#6E6E6E;
}
.ia__bar .dots{display:flex; gap:calc(5 * var(--u))}
.ia__bar .dots i{display:block; width:calc(4.5*var(--u)); height:calc(4.5*var(--u)); border-radius:50%; background:#2E2E2E}
.ia__bar .dots i:first-child{background:var(--c-blue)}
.ia__bar .live{margin-left:auto; color:#8A8A8A}
.ia__bar .live b{
  display:inline-block; width:calc(5*var(--u)); height:calc(5*var(--u)); border-radius:50%;
  background:var(--c-orange); margin-right:calc(6*var(--u)); vertical-align:calc(0.5*var(--u));
}

.ia__body{
  display:grid;
  grid-template-columns:1fr calc(324 * var(--u));
  column-gap:calc(30 * var(--u));
  padding:calc(34 * var(--vhu)) calc(28 * var(--u)) calc(34 * var(--vhu));
}
.ia__q{display:flex; gap:calc(12 * var(--u)); align-items:baseline}
.ia__q .caret{font-family:var(--font-mono); font-size:calc(15 * var(--u)); color:var(--c-blue)}
.ia__q .txt{
  font-family:var(--font-display);
  font-variation-settings:'wdth' var(--disp-wdth),'wght' 760;
  font-size:calc(24 * var(--u)); line-height:calc(29 * var(--vhu));
  text-transform:uppercase; color:#fff;
}
.ia__q .cursor{
  display:inline-block; width:calc(11 * var(--u)); height:calc(20 * var(--vhu));
  background:var(--c-blue); vertical-align:calc(-3 * var(--vhu));
  margin-left:calc(4 * var(--u));
}

.ia__alabel{
  margin-top:calc(36 * var(--vhu));
  font-size:calc(7.5 * var(--u)); color:#6E6E6E;
}
.ia__a{margin-top:calc(14 * var(--vhu)); width:calc(560 * var(--u))}
.ia__a p{
  font-size:calc(13 * var(--u)); line-height:calc(18 * var(--vhu));
  color:#D6D6D6;
}
.ia__a p + p{margin-top:calc(14 * var(--vhu))}

.ia__ev{border-top:1px solid #262626; padding-top:calc(16 * var(--vhu))}
.ia__ev .lbl{font-size:calc(7.5 * var(--u)); color:var(--c-blue)}
.ia__ev ul{margin-top:calc(14 * var(--vhu))}
.ia__ev li{
  position:relative;
  padding:calc(10 * var(--vhu)) 0 calc(10 * var(--vhu)) calc(20 * var(--u));
  border-bottom:1px solid #1E1E1E;
  font-size:calc(11 * var(--u)); line-height:calc(13.5 * var(--vhu));
  color:#9A9A9A;
}
.ia__ev li:first-child{border-top:1px solid #1E1E1E}
.ia__ev li::before{
  content:''; position:absolute; left:calc(2 * var(--u)); top:calc(15 * var(--vhu));
  width:calc(7 * var(--u)); height:calc(4 * var(--u));
  border-left:1px solid #fff; border-bottom:1px solid #fff;
  transform:rotate(-45deg) scale(0); transform-origin:center;
}
.ia__ev li.is-on::before{transform:rotate(-45deg) scale(1)}
.ia__ev .aviso{
  margin-top:calc(20 * var(--vhu));
  font-size:calc(9.5 * var(--u)); line-height:calc(12.5 * var(--vhu));
  color:#5A5A5A;
}

/* ---------------------------------------------------------------- outras perguntas */
.ia__mq{
  margin-top:calc(46 * var(--vhu));
  height:calc(34 * var(--vhu));
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.ia__mq-track{display:flex; width:max-content; height:100%; align-items:center; will-change:transform}
.ia__mq-track span{
  font-size:calc(17 * var(--u)); color:#3C3C3C; white-space:nowrap;
  padding:0 calc(15 * var(--u));
}
.ia__mq-track i{font-style:normal; color:var(--c-blue); font-size:calc(17 * var(--u))}

/* ---------------------------------------------------------------- por dentro */
.ia__pecas{
  margin-top:calc(96 * var(--vhu));
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  column-gap:calc(16 * var(--u));
}
.ia__peca{
  border-top:1px solid #262626;
  padding-top:calc(16 * var(--vhu));
  transition:border-color .3s ease;
}
.ia__peca:hover{border-top-color:#fff}
.ia__peca__n{font-size:calc(7.5 * var(--u)); color:var(--c-blue)}
.ia__peca__nome{
  display:block; margin-top:calc(12 * var(--vhu));
  font-family:var(--font-display);
  font-variation-settings:'wdth' var(--disp-wdth),'wght' 760;
  font-size:calc(13 * var(--u)); line-height:calc(15 * var(--vhu));
  text-transform:uppercase; color:#fff;
}
.ia__peca__texto{
  margin-top:calc(12 * var(--vhu));
  font-size:calc(10.5 * var(--u)); line-height:calc(13.5 * var(--vhu));
  color:#7A7A7A;
  transition:color .3s ease;
}
.ia__peca:hover .ia__peca__texto{color:#C2C2C2}

/* ---------------------------------------------------------------- antes × depois */
.ia__mudanca{margin-top:calc(104 * var(--vhu))}
.ia__mudanca__t{
  font-size:calc(30 * var(--u)); line-height:calc(34 * var(--vhu));
  color:#fff;
}
.ia__cols{
  margin-top:calc(44 * var(--vhu));
  display:grid; grid-template-columns:repeat(2, 1fr); column-gap:calc(80 * var(--u));
}
.ia__col .head{
  display:flex; align-items:baseline; justify-content:space-between;
  padding-bottom:calc(11 * var(--vhu));
  border-bottom:1px solid #333;
}
.ia__col .head b{
  font-family:var(--font-display);
  font-variation-settings:'wdth' var(--disp-wdth),'wght' 760;
  font-weight:normal;
  font-size:calc(17 * var(--u)); text-transform:uppercase; color:#666;
}
.ia__col .head span{font-family:var(--font-mono); font-size:calc(7.5*var(--u)); letter-spacing:.1em; color:#4A4A4A}
.ia__col--depois .head{border-bottom-color:#fff}
.ia__col--depois .head b{color:#fff}
.ia__col--depois .head span{color:var(--c-blue)}
.ia__col ol{counter-reset:step}
.ia__col li{
  counter-increment:step;
  position:relative;
  padding:calc(12 * var(--vhu)) 0 calc(12 * var(--vhu)) calc(30 * var(--u));
  border-bottom:1px solid #1E1E1E;
  font-size:calc(12 * var(--u)); line-height:calc(15 * var(--vhu));
  color:#6E6E6E;
}
.ia__col li::before{
  content:counter(step, decimal-leading-zero);
  position:absolute; left:0; top:calc(13 * var(--vhu));
  font-family:var(--font-mono); font-size:calc(8 * var(--u)); color:#3C3C3C;
}
.ia__col--depois li{color:#D6D6D6}
.ia__col--depois li::before{color:var(--c-blue)}

/* ================================================================= O RELATÓRIO */
#sis-relatorio{background:#fff}

.rel__wrap{
  margin-top:calc(84 * var(--vhu));
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  column-gap:calc(16 * var(--u));
  align-items:start;
}

/* o documento que se fecha sozinho */
.rel__doc{
  grid-column:1 / span 2;
  border:1px solid #E0E0E0;
  background:#FCFCFC;
}
.rel__doc__bar{
  display:flex; align-items:center; justify-content:space-between;
  height:calc(30 * var(--vhu));
  padding:0 calc(14 * var(--u));
  border-bottom:1px solid #E0E0E0;
  font-size:calc(7.5 * var(--u)); color:#6E6E6E;
}
.rel__doc__bar .st{color:var(--c-blue)}
.rel__doc__body{padding:calc(22 * var(--vhu)) calc(18 * var(--u)) calc(24 * var(--vhu))}
.rel__doc__t{
  font-family:var(--font-display);
  font-variation-settings:'wdth' var(--disp-wdth),'wght' 760;
  font-size:calc(14 * var(--u)); line-height:calc(17 * var(--vhu));
  text-transform:uppercase; color:#0C0C0C;
}
.rel__doc li{
  position:relative;
  padding:calc(11 * var(--vhu)) 0 calc(11 * var(--vhu)) calc(24 * var(--u));
  border-bottom:1px solid #EDEDED;
  font-size:calc(11.5 * var(--u)); line-height:calc(14 * var(--vhu));
  color:#4A4A4A;
}
.rel__doc ul{margin-top:calc(14 * var(--vhu)); border-top:1px solid #EDEDED}
.rel__doc li::before{
  content:''; position:absolute; left:calc(3 * var(--u)); top:calc(16 * var(--vhu));
  width:calc(8 * var(--u)); height:calc(4.5 * var(--u));
  border-left:1.2px solid var(--c-blue); border-bottom:1.2px solid var(--c-blue);
  transform:rotate(-45deg) scale(0); transform-origin:center;
}
.rel__doc li.is-on::before{transform:rotate(-45deg) scale(1)}
.rel__doc__foot{
  margin-top:calc(18 * var(--vhu));
  padding-top:calc(12 * var(--vhu));
  border-top:1px solid #E0E0E0;
  font-size:calc(9.5 * var(--u)); line-height:calc(12.5 * var(--vhu));
  color:#8A8A8A;
}

/* as quatro telas */
.rel__telas{grid-column:3 / span 2}
.rel__tela{
  display:grid;
  grid-template-columns:calc(40 * var(--u)) 1fr;
  column-gap:calc(16 * var(--u));
  padding:calc(20 * var(--vhu)) 0 calc(22 * var(--vhu));
  border-bottom:1px solid #E8E8E8;
  transition:background-color .3s ease;
}
.rel__tela:first-child{border-top:1px solid #E8E8E8}
.rel__tela__n{font-size:calc(9.5 * var(--u)); color:#B0B0B0}
.rel__tela__nome{
  display:block;
  font-family:var(--font-display);
  font-variation-settings:'wdth' var(--disp-wdth),'wght' 760;
  font-size:calc(17 * var(--u)); line-height:calc(19 * var(--vhu));
  text-transform:uppercase; color:#0C0C0C;
}
.rel__tela__quem{
  display:inline-block; margin-top:calc(8 * var(--vhu));
  font-family:var(--font-mono); font-size:calc(7 * var(--u));
  letter-spacing:.12em; text-transform:uppercase;
  color:#fff; background:#0C0C0C;
  padding:calc(4 * var(--u)) calc(7 * var(--u));
}
.rel__tela__texto{
  margin-top:calc(11 * var(--vhu));
  font-size:calc(11.5 * var(--u)); line-height:calc(14 * var(--vhu));
  color:#5A5A5A;
}

/* ---------------------------------------------------------------- acesso ao painel */
.rel__demo{
  grid-column:3 / span 2;
  display:flex; align-items:center; gap:calc(18 * var(--u));
  margin-top:calc(26 * var(--vhu));
}
.rel__demo span{
  font-size:calc(10.5 * var(--u)); line-height:calc(13.5 * var(--vhu));
  color:#8A8A8A;
}