/* /sistema — #sis-cadeia (do sensor ao relatório, pinada e scrubbada na horizontal)
   e #sis-dia (o registro de eventos de um dia na unidade). */

/* ================================================================= A CADEIA */
#sis-cadeia{
  position:relative; z-index:3;
  height:100vh;
  background:#0C0C0C; color:#fff;
  overflow:clip;
  padding:calc(104 * var(--vhu)) 0 0;
}
#sis-cadeia .sis-head{padding:0 var(--gutter)}
#sis-cadeia .sis-head__h2{font-size:calc(46 * var(--u)); line-height:calc(50 * var(--vhu))}
#sis-cadeia .sis-head__lead{width:calc(432 * var(--u)); margin-top:calc(26 * var(--vhu))}

.cad__viewport{
  position:absolute; left:0; right:0; top:calc(330 * var(--vhu));
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 calc(74*var(--u)), #000 calc(100% - 6*var(--u)), transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 calc(74*var(--u)), #000 calc(100% - 6*var(--u)), transparent 100%);
}
.cad__track{
  display:flex; gap:calc(16 * var(--u));
  padding-left:var(--gutter);
  width:max-content;
  will-change:transform;
}
.cad__elo{
  flex:none;
  width:calc(376 * var(--u));
  border-top:1px solid #262626;
  padding-top:calc(20 * var(--vhu));
  transition:border-color .35s ease;
}
.cad__elo.is-on{border-top-color:#fff}
.cad__elo__n{
  font-size:calc(9.5 * var(--u));
  color:#4A4A4A;
  transition:color .35s ease;
}
.cad__elo.is-on .cad__elo__n{color:var(--c-blue)}
.cad__elo__name{
  display:block;
  margin-top:calc(14 * var(--vhu));
  font-size:calc(30 * var(--u)); line-height:1;
  color:#4A4A4A;
  transition:color .35s ease;
}
.cad__elo.is-on .cad__elo__name{color:#fff}
.cad__elo__text{
  margin-top:calc(16 * var(--vhu));
  width:calc(310 * var(--u));
  font-size:calc(11.5 * var(--u)); line-height:calc(14.5 * var(--vhu));
  color:#5A5A5A;
  transition:color .35s ease;
}
.cad__elo.is-on .cad__elo__text{color:#C2C2C2}

/* seta entre elos: o dado passando adiante */
.cad__elo__arrow{
  display:block; margin-top:calc(26 * var(--vhu));
  width:calc(310 * var(--u)); height:calc(6 * var(--vhu));
  overflow:hidden;
}
.cad__elo__arrow::before{
  content:''; display:block; height:1px; margin-top:calc(3 * var(--vhu));
  background:linear-gradient(90deg, #262626 0%, #262626 100%);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .5s ease, background .35s ease;
}
.cad__elo.is-on .cad__elo__arrow::before{
  transform:scaleX(1);
  background:linear-gradient(90deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 100%);
}

.cad__line{
  position:absolute; left:var(--gutter); right:var(--gutter); bottom:calc(58 * var(--vhu));
  height:1px;
}
.cad__line-track{position:absolute; inset:0; background:rgba(255,255,255,.13)}
.cad__line-fill{position:absolute; inset:0; background:rgba(255,255,255,.9); transform-origin:left center; transform:scaleX(0)}
.cad__counter{
  position:absolute; right:var(--gutter); bottom:calc(74 * var(--vhu));
  font-size:calc(8.5 * var(--u)); color:#8A8A8A;
}
.cad__counter b{color:#fff; font-weight:500}

/* ================================================================= UM DIA */
#sis-dia{background:#F5F5F5}

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

/* coluna 1: o relógio que acompanha a leitura */
.dia__aside{
  grid-column:1;
  position:sticky; top:calc(150 * var(--vhu));
}
.dia__aside .lbl{display:block; font-size:calc(8 * var(--u)); color:#6E6E6E}
.dia__clock{
  display:block;
  margin-top:calc(14 * var(--vhu));
  font-family:var(--font-display);
  font-variation-settings:'wdth' var(--disp-wdth),'wght' var(--disp-wght);
  font-size:calc(46 * var(--u)); line-height:1;
  color:#0C0C0C;
  font-variant-numeric:tabular-nums;
}
.dia__kind{
  display:block; margin-top:calc(12 * var(--vhu));
  font-family:var(--font-mono); font-size:calc(8 * var(--u));
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--c-blue);
}
.dia__aviso{
  display:inline-block; margin-top:calc(28 * var(--vhu));
  background:#0C0C0C; color:#fff;
  font-family:var(--font-mono); font-size:calc(7 * var(--u));
  letter-spacing:.12em; text-transform:uppercase;
  padding:calc(5 * var(--u)) calc(8 * var(--u));
}

/* colunas 2-4: a trilha */
.dia__log{grid-column:2 / span 3; border-top:1px solid #E0E0E0}
.dia__ev{
  position:relative;
  display:grid;
  grid-template-columns:calc(72 * var(--u)) calc(120 * var(--u)) 1fr;
  column-gap:calc(16 * var(--u));
  align-items:start;
  padding:calc(20 * var(--vhu)) 0 calc(22 * var(--vhu));
  border-bottom:1px solid #E0E0E0;
}
.dia__ev::before{
  content:''; position:absolute; left:0; top:0; bottom:-1px; width:1px;
  background:var(--c-blue); transform:scaleY(0); transform-origin:top center;
  transition:transform .45s ease;
  margin-left:calc(-13 * var(--u));
}
.dia__ev.is-on::before{transform:scaleY(1)}
.dia__ev__hora{
  font-family:var(--font-mono); font-size:calc(11 * var(--u));
  color:#0C0C0C; font-variant-numeric:tabular-nums;
}
.dia__ev__tipo{
  font-family:var(--font-mono); font-size:calc(7.5 * var(--u));
  letter-spacing:.1em; text-transform:uppercase;
  color:#8A8A8A;
  padding-top:calc(2 * var(--vhu));
}
.dia__ev__fato{
  display:block;
  font-size:calc(19 * var(--u)); line-height:calc(21 * var(--vhu));
  color:#0C0C0C;
}
.dia__ev__leitura{
  margin-top:calc(9 * var(--vhu));
  width:calc(500 * var(--u));
  font-size:calc(11.5 * var(--u)); line-height:calc(14 * var(--vhu));
  color:#5A5A5A;
}
/* o punhado de eventos que exige alguém agir agora */
.dia__ev--alerta .dia__ev__tipo{color:var(--c-orange)}
.dia__ev--alerta::before{background:var(--c-orange)}
.dia__ev--alerta .dia__ev__fato{color:var(--c-orange)}
.dia__ev__flag{
  display:inline-block; margin-left:calc(8 * var(--u));
  vertical-align:calc(2 * var(--u));
  width:calc(5 * var(--u)); height:calc(5 * var(--u)); border-radius:50%;
  background:var(--c-orange);
}

/* ================================================================= 03b · A ARQUITETURA
   #sis-agentes. Cinco agentes em linhas numeradas, no mesmo ritmo das .sis-rows, para as
   duas seções lerem como a mesma página. Depois os dois caminhos, e as três camadas. */

/* ---------------------------------------------------------------- o diagrama
   O rascunho da conversa, passado a limpo: caixas em HTML, linhas num SVG por baixo
   (vector-effect segura o fio de 1px; pathLength normalizado dá a mesma velocidade de
   fluxo em toda linha). O fluxo só anda com o painel na tela (.is-live, ligado por
   IntersectionObserver em js/sistema/cadeia.js) e para sob prefers-reduced-motion.
   Em modo de captura (.is-shot) ele fica visível e parado, para o pixel ser sempre o
   mesmo. Spec 2026-08-31. */
.agt__diag{margin-top:calc(64 * var(--vhu))}
.agt__dg__t{font-size:calc(8 * var(--u)); color:#6E6E6E}
.agt__dg__nota{
  margin-top:calc(10 * var(--vhu));
  width:calc(560 * var(--u));
  font-size:calc(11.5 * var(--u)); line-height:calc(14.5 * var(--vhu)); color:#5A5A5A;
}
.agt__dg__painel{
  position:relative;
  margin-top:calc(28 * var(--vhu));
  height:calc(620 * var(--vhu));
  border:1px solid #ECECEC; background:#fff;
  overflow:hidden;
}
.agt__dg__painel svg{position:absolute; inset:0; width:100%; height:100%}
.agt__dg__painel path{fill:none; vector-effect:non-scaling-stroke}
.dg-base{stroke:#C7C7C7; stroke-width:1px}
.dg-flow{stroke:var(--c-blue); stroke-width:1.5px; stroke-dasharray:9 39; opacity:0}
.agt__diag.is-live .dg-flow{opacity:1; animation:dgflow 2.8s linear infinite}
.agt__diag.is-shot .dg-flow{opacity:.4; stroke-dasharray:none}
@keyframes dgflow{to{stroke-dashoffset:-96}}
.dg-ctl{stroke:#0C0C0C; stroke-width:1px}
.dg-cop{stroke:#9A9A9A; stroke-width:1px; stroke-dasharray:4 4}
@media (prefers-reduced-motion: reduce){
  .agt__diag.is-live .dg-flow{animation:none; opacity:.55}
}
.agt__dg__no{
  position:absolute;
  border:1px solid #D8D8D8; background:#fff;
  padding:calc(13 * var(--vhu)) calc(15 * var(--u)) 0;
}
.agt__dg__no b{display:block; font-size:calc(8.5 * var(--u)); color:#0C0C0C; font-weight:500}
.agt__dg__no > span{
  display:block; margin-top:calc(7 * var(--vhu));
  font-size:calc(10.5 * var(--u)); line-height:calc(13.5 * var(--vhu)); color:#5A5A5A;
}
.agt__dg__no--gate{border-color:#0C0C0C}
/* os três sentidos, com o papel que a seção do pedido já lhes deu */
.agt__dg__no--mini{padding:calc(9 * var(--vhu)) calc(11 * var(--u)) 0}
.agt__dg__no--mini b{font-size:calc(7.5 * var(--u))}
.agt__dg__no--mini > span{margin-top:calc(4 * var(--vhu)); font-size:calc(9.5 * var(--u)); line-height:calc(11 * var(--vhu))}
.agt__dg__chips{position:absolute; display:flex; gap:calc(8 * var(--u))}
.agt__dg__chips span{
  display:block; padding:calc(8 * var(--vhu)) calc(11 * var(--u));
  border:1px solid #D8D8D8; background:#fff;
  font-size:calc(7.5 * var(--u)); color:#0C0C0C;
}
.agt__dg__perim{
  position:absolute;
  border:1px dashed #8A8A8A;
}
.agt__dg__perim--g1, .agt__dg__perim--g2{border:0; border-right:1px dashed #E0E0E0; border-bottom:1px dashed #E0E0E0}
.agt__dg__perim--main i{
  position:absolute; top:calc(12 * var(--vhu)); left:calc(14 * var(--u));
  font-style:normal; font-size:calc(7.5 * var(--u)); color:#6E6E6E;
}
.agt__dg__perim--main em{
  position:absolute; top:calc(26 * var(--vhu)); left:calc(14 * var(--u));
  font-style:normal; font-size:calc(9.5 * var(--u)); color:#9A9A9A;
}
/* a etiqueta que diz o que viaja na linha */
.agt__dg__lin{
  position:absolute; white-space:nowrap;
  padding:calc(4 * var(--vhu)) calc(8 * var(--u));
  background:#fff; border:1px solid #E6E6E6;
  font-size:calc(7 * var(--u)); color:#5A5A5A;
}
.agt__dg__tag{position:absolute; font-size:calc(7.5 * var(--u)); color:#8A8A8A}
.agt__dg__tag--video{color:#0C0C0C; border:1px solid #0C0C0C; padding:calc(7 * var(--vhu)) calc(10 * var(--u)); background:#fff}
.agt__dg__tag--ctl{color:#0C0C0C}
.agt__dg__selo{
  position:absolute;
  width:calc(9 * var(--u)); height:calc(9 * var(--u));
  background:#fff; border:1px solid #0C0C0C;
  transform:rotate(45deg);
}

.agt__lista{
  margin-top:calc(86 * var(--vhu));
  border-top:1px solid #E8E8E8;
}
.agt__a{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  column-gap:calc(16 * var(--u));
  align-items:start;
  padding:calc(24 * var(--vhu)) 0 calc(26 * var(--vhu));
  border-bottom:1px solid #E8E8E8;
}
.agt__a__n{grid-column:1; grid-row:1; font-size:calc(9.5 * var(--u)); color:#B0B0B0}
.agt__a__nome{
  grid-column:1; grid-row:2;
  margin-top:calc(10 * var(--vhu));
  font-size:calc(24 * var(--u)); line-height:calc(26 * var(--vhu)); color:#0C0C0C;
}
/* o papel é a linha que o leitor apressado lê: corpo maior que o `onde`, que é referência */
.agt__a__papel{
  grid-column:2; grid-row:1 / span 2;
  font-size:calc(13 * var(--u)); line-height:calc(17 * var(--vhu)); color:#0C0C0C;
}
.agt__a__onde{
  grid-column:2; grid-row:2;
  align-self:end;
  font-size:calc(8 * var(--u)); color:#8A8A8A;
}
.agt__a__d{
  grid-column:3 / span 2; grid-row:1 / span 2;
  width:calc(560 * var(--u));
  font-size:calc(11.5 * var(--u)); line-height:calc(15 * var(--vhu)); color:#5A5A5A;
}

/* ---------------------------------------------------------------- os dois caminhos */
.agt__planos{
  margin-top:calc(74 * var(--vhu));
  padding:calc(32 * var(--vhu)) calc(30 * var(--u)) calc(36 * var(--vhu));
  background:#0C0C0C; color:#fff;
  display:grid; grid-template-columns:repeat(4, 1fr); column-gap:calc(16 * var(--u));
}
.agt__planos__t{grid-column:1; font-size:calc(8 * var(--u)); color:#fff}
.agt__planos__i{
  grid-column:2 / span 3;
  font-size:calc(13 * var(--u)); line-height:calc(17.4 * var(--vhu)); color:#C2C2C2;
}
.agt__planos ul{
  grid-column:2 / span 3; margin-top:calc(28 * var(--vhu));
  display:grid; grid-template-columns:repeat(2, 1fr); column-gap:calc(24 * var(--u));
}
.agt__p__n{display:block; font-size:calc(8 * var(--u)); color:#fff; margin-bottom:calc(9 * var(--vhu))}
.agt__p__d{display:block; font-size:calc(11.5 * var(--u)); line-height:calc(15 * var(--vhu)); color:#B0B0B0}

/* ---------------------------------------------------------------- as três camadas */
.agt__casc{
  margin-top:calc(74 * var(--vhu));
  display:grid; grid-template-columns:repeat(4, 1fr); column-gap:calc(16 * var(--u));
}
.agt__casc__t{grid-column:1; font-size:calc(8 * var(--u)); color:#0C0C0C}
.agt__casc__i{
  grid-column:2 / span 3;
  font-size:calc(13 * var(--u)); line-height:calc(17.4 * var(--vhu)); color:#2E2E2E;
}
.agt__casc ul{
  grid-column:1 / span 4; margin-top:calc(32 * var(--vhu));
  display:grid; grid-template-columns:repeat(3, 1fr); column-gap:calc(16 * var(--u));
  border-top:1px solid #0C0C0C;
}
.agt__c{padding:calc(22 * var(--vhu)) calc(24 * var(--u)) 0 0}
.agt__c__n{display:block; font-size:calc(8 * var(--u)); color:#B0B0B0; margin-bottom:calc(10 * var(--vhu))}
.agt__c__nome{
  font-size:calc(22 * var(--u)); line-height:calc(24 * var(--vhu));
  color:#0C0C0C; margin-bottom:calc(12 * var(--vhu));
}
.agt__c__d{font-size:calc(11.5 * var(--u)); line-height:calc(15 * var(--vhu)); color:#5A5A5A}
.agt__c__par{
  display:block;
  margin-top:calc(13 * var(--vhu)); padding-top:calc(9 * var(--vhu));
  border-top:1px solid #E8E8E8;
  font-size:calc(12.5 * var(--u)); line-height:calc(16 * var(--vhu)); color:#0C0C0C;
}
.agt__c__par i{
  display:block; font-style:normal;
  font-size:calc(8 * var(--u)); color:#8A8A8A; margin-bottom:calc(4 * var(--vhu));
}
.agt__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;
}