/* /sistema — #sis-dominios (carrossel dos quatro olhares sobre a mesma cadeia)
   e #sis-remoto (o que viaja e o que fica dentro do perímetro da fábrica). */

/* ================================================================= OS DOMÍNIOS */
#sis-dominios{background:#fff; overflow:clip}

.dom__ctrl{
  margin-top:calc(70 * var(--vhu));
  display:flex; align-items:center; gap:calc(19 * var(--u));
  font-size:calc(8.5 * var(--u)); color:#000;
}
.dom__ctrl .sep{display:block; width:1px; height:calc(11 * var(--vhu)); background:#E6E6E6}
.dom__ctrl button{padding:0; letter-spacing:.08em; text-transform:uppercase; cursor:none}
.dom__ctrl button[disabled]{color:#C7C7C7; pointer-events:none}
.dom__ctrl .dom__counter{margin-left:auto; color:#BBBBBB}
.dom__ctrl .dom__counter b{color:#0C0C0C; font-weight:500}

.dom__rulewrap{position:relative; margin-top:calc(16 * var(--vhu)); height:1px}
.dom__rule{position:absolute; inset:0; background:#ECECEC}
.dom__progress{
  position:absolute; left:0; top:0; height:1px; background:#0C0C0C;
  width:25%;
  transition:width 1s cubic-bezier(.9,.2,.7,.7);
}

.dom__viewport{margin-top:calc(46 * var(--vhu)); overflow:hidden}
.dom__track{
  display:flex; gap:calc(16 * var(--u));
  width:max-content;
  transition:transform .5s cubic-bezier(.25,.1,.25,1);
  will-change:transform;
}
.dom__slide{
  flex:none;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  column-gap:calc(16 * var(--u));
  align-items:start;
  opacity:.25;
  transition:opacity .45s ease;
}
.dom__slide.is-active{opacity:1}

.dom__slide__id{grid-column:1}
.dom__slide__n{font-size:calc(9.5 * var(--u)); color:var(--c-blue)}
.dom__slide__nome{
  display:block; margin-top:calc(14 * var(--vhu));
  font-size:calc(26 * var(--u)); line-height:calc(28 * var(--vhu));
  color:#0C0C0C;
}
.dom__slide__main{grid-column:2 / span 2}
.dom__slide__promessa{
  font-family:var(--font-display);
  font-variation-settings:'wdth' var(--disp-wdth),'wght' 760;
  font-size:calc(21 * var(--u)); line-height:calc(26 * var(--vhu));
  text-transform:uppercase; color:#0C0C0C;
  border-left:1px solid var(--c-blue);
  padding-left:calc(18 * var(--u));
}
.dom__slide__texto{
  margin-top:calc(24 * var(--vhu));
  padding-left:calc(19 * var(--u));
  font-size:calc(12.5 * var(--u)); line-height:calc(16 * var(--vhu));
  color:#3A3A3A;
}
.dom__slide__entrega{grid-column:4}
.dom__slide__entrega .lbl{
  display:block; padding-bottom:calc(10 * var(--vhu));
  border-bottom:1px solid #0C0C0C;
  font-size:calc(7.5 * var(--u)); color:#0C0C0C;
}
.dom__slide__entrega li{
  padding:calc(9 * var(--vhu)) 0;
  border-bottom:1px solid #EDEDED;
  font-size:calc(10.5 * var(--u)); line-height:calc(13 * var(--vhu));
  color:#5A5A5A;
}

/* ================================================================= REMOTO */
#sis-remoto{background:#0C0C0C; color:#fff; overflow:clip}

.rem__split{
  position:relative;
  margin-top:calc(96 * var(--vhu));
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:calc(150 * var(--u));
}
/* o perímetro da fábrica, desenhado no meio da seção */
.rem__wall{
  position:absolute; left:50%; top:calc(-24 * var(--vhu)); bottom:calc(-24 * var(--vhu));
  width:1px; background:repeating-linear-gradient(180deg, #3A3A3A 0 calc(5*var(--vhu)), transparent calc(5*var(--vhu)) calc(11*var(--vhu)));
  transform-origin:top center;
}
.rem__wall span{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%) rotate(90deg);
  white-space:nowrap;
  width:max-content;      /* o pai tem 1px: sem isso o texto quebra letra a letra */
  background:#0C0C0C;
  padding:0 calc(12 * var(--u));
  font-family:var(--font-mono); font-size:calc(7.5 * var(--u));
  letter-spacing:.12em; text-transform:uppercase; color:#6E6E6E;
}

.rem__col .head{
  display:flex; align-items:baseline; justify-content:space-between;
  padding-bottom:calc(11 * var(--vhu));
  border-bottom:1px solid #333;
}
.rem__col .head b{
  font-family:var(--font-display);
  font-variation-settings:'wdth' var(--disp-wdth),'wght' 760;
  font-weight:normal;
  font-size:calc(18 * var(--u)); text-transform:uppercase; color:#fff;
}
.rem__col .head span{font-family:var(--font-mono); font-size:calc(7*var(--u)); letter-spacing:.12em; color:#6E6E6E}
.rem__col li{
  position:relative;
  padding:calc(13 * var(--vhu)) 0 calc(13 * var(--vhu)) calc(22 * var(--u));
  border-bottom:1px solid #1E1E1E;
  font-size:calc(12 * var(--u)); line-height:calc(15 * var(--vhu));
  color:#B0B0B0;
}
.rem__col li::before{
  content:''; position:absolute; left:0; top:calc(19 * var(--vhu));
  width:calc(9 * var(--u)); height:1px; background:#4A4A4A;
}
.rem__col--sobe li::before{background:var(--c-blue); width:calc(12 * var(--u))}

.rem__garantias{
  margin-top:calc(96 * var(--vhu));
  display:grid; grid-template-columns:repeat(3, 1fr); column-gap:calc(16 * var(--u));
}
.rem__g{border-top:1px solid #333; padding-top:calc(16 * var(--vhu))}
.rem__g b{
  display:block;
  font-family:var(--font-display);
  font-variation-settings:'wdth' var(--disp-wdth),'wght' 760;
  font-weight:normal;
  font-size:calc(14 * var(--u)); line-height:calc(16 * var(--vhu));
  text-transform:uppercase; color:#fff;
}
.rem__g p{
  margin-top:calc(12 * var(--vhu));
  font-size:calc(11.5 * var(--u)); line-height:calc(14.5 * var(--vhu));
  color:#8A8A8A;
}