/* /sistema — abertura: #sis-hero (a promessa) e #sis-sentidos (o pedido do cliente:
   câmera, e os dois sentidos que a gente somou a ela). */

/* ================================================================= HERO */
#sis-hero{
  position:relative; z-index:2;
  min-height:100vh;
  background:#0C0C0C; color:#fff;
  padding:calc(210 * var(--vhu)) var(--gutter) calc(96 * var(--vhu));
  display:flex; flex-direction:column; justify-content:space-between;
  overflow:clip;
}
/* rastro de varredura atrás do título: a "leitura" acontecendo */
#sis-hero::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 60% 45% at 22% 42%, rgba(10,22,200,.30) 0%, rgba(10,22,200,0) 70%),
    radial-gradient(ellipse 40% 60% at 88% 78%, rgba(10,22,200,.16) 0%, rgba(10,22,200,0) 70%);
  pointer-events:none;
}
#sis-hero > *{position:relative}

.sis-hero__eyebrow{
  font-size:calc(8 * var(--u));
  color:#8A8A8A;
  margin-bottom:calc(26 * var(--vhu));
}
.sis-hero__title{
  font-size:calc(70 * var(--u));
  line-height:calc(76 * var(--vhu));   /* +6: acentos de PERGUNTA/RESPONDE */
  color:#fff;
}
.sis-hero__title .ln{display:block; width:fit-content}

/* ---------------------------------------------------------------- o card da IA
   "A UNIDADE" deixa de ser uma linha de texto e vira PRODUTO: um card de fundo vivo,
   com a mesma energia da varredura do raio (js/logo3d.js) correndo por dentro, e uma
   lingueta saindo de trás dele com a etiqueta IA.

   Paleta idêntica à do raio: deep #1A6B3D, brand #4FA845, vivid #40D17A,
   aqua #94F2CC, light #DBFCEB.

   Só que aqui o texto é BRANCO por cima, e não o gradiente recortado dentro dos
   glifos. Isso muda a regra de contraste: o aqua e o light, usados cheios, deixariam
   o branco ilegível (#94F2CC contra branco dá 1,6:1). Então a base fica no fundo da
   paleta e os verdes claros entram só como brilho translúcido passando por cima —
   o pior caso do fundo continua acima de 3:1, que é o piso para tipo display.

   O fluxo orgânico: quatro manchas deslizando, cada uma por um caminho próprio, em
   dois períodos incomensuráveis (24 s do fluxo × 9,5 s da respiração). O ciclo
   aparente só fecha a cada ~7 min, então nunca lê como loop. */
.sis-hero__title .ln--ia{
  display:flex; align-items:center; width:fit-content;
  margin:calc(6 * var(--vhu)) 0;
}

.sis-ia-card{
  position:relative; z-index:1;
  overflow:hidden;
  /* 18/12 e não 15/15: as maiúsculas do display nascem altas na caixa da fonte, então
     padding simétrico deixa o texto empurrado para cima. Medido: com 18/12 sobram
     19,6 px acima das maiúsculas e 21,6 px abaixo — óptica equilibrada para caixa alta. */
  padding:calc(18 * var(--vhu)) calc(30 * var(--u)) calc(12 * var(--vhu));
  border-radius:calc(16 * var(--u));
  background-image:
    radial-gradient(45% 150% at 16% 30%, rgba(219,252,235,.30) 0%, rgba(219,252,235,0) 60%),
    radial-gradient(40% 140% at 52% 78%, rgba(148,242,204,.34) 0%, rgba(148,242,204,0) 62%),
    radial-gradient(50% 160% at 82% 22%, rgba( 64,209,122,.60) 0%, rgba( 64,209,122,0) 64%),
    radial-gradient(58% 170% at 30% 88%, rgba( 79,168, 69,.55) 0%, rgba( 79,168, 69,0) 62%),
    linear-gradient(102deg, #0E4A29 0%, #1A6B3D 42%, #124F2E 72%, #1A6B3D 100%);
  background-size:160% 240%, 190% 260%, 210% 240%, 230% 280%, 100% 100%;
  background-repeat:no-repeat;
  animation:sis-ia-flow 24s ease-in-out infinite, sis-ia-breathe 9.5s ease-in-out infinite;
}
/* fio de luz na borda: dá espessura de objeto ao card */
.sis-ia-card::after{
  content:''; position:absolute; inset:0; border-radius:inherit;
  border:1px solid rgba(219,252,235,.22);
  pointer-events:none;
}
.sis-ia-card .tx{
  display:block;
  line-height:.86;
  color:#fff;
  /* garante o branco separado do fundo, mesmo quando um brilho claro passa por baixo */
  text-shadow:0 calc(2 * var(--u)) calc(16 * var(--u)) rgba(4,38,20,.55);
}

@keyframes sis-ia-flow{
  0%   {background-position:  0% 50%, 100% 20%, 40% 90%, 80% 10%, 0% 0%}
  25%  {background-position: 35% 20%,  60% 70%, 85% 30%, 20% 60%, 0% 0%}
  50%  {background-position: 70% 80%,  20% 30%, 10% 60%, 60% 95%, 0% 0%}
  75%  {background-position: 25% 45%,  85% 90%, 65% 15%, 95% 35%, 0% 0%}
  100% {background-position:  0% 50%, 100% 20%, 40% 90%, 80% 10%, 0% 0%}
}
@keyframes sis-ia-breathe{
  0%, 100% {filter:saturate(1)    brightness(1)}
  50%      {filter:saturate(1.14) brightness(1.08)}
}

/* a lingueta: nasce ATRÁS do card (z-index menor) e escorrega para fora pela direita.
   O canto esquerdo fica reto e escondido sob o card, então ela lê como uma peça só. */
.sis-ia-tab{
  position:relative; z-index:0;
  display:inline-flex; align-items:center; gap:calc(8 * var(--u));
  height:calc(38 * var(--vhu));
  margin-left:calc(-18 * var(--u));
  padding:0 calc(14 * var(--u)) 0 calc(26 * var(--u));
  border-radius:0 calc(9 * var(--u)) calc(9 * var(--u)) 0;
  background:#0B3E22;
  box-shadow:inset 0 1px 0 rgba(148,242,204,.18);
  font-family:var(--font-mono);
  font-size:calc(12 * var(--u));
  font-weight:500; letter-spacing:.18em;
  color:#8FEFC6;
  white-space:nowrap;
}
.sis-ia-tab i{
  display:block;
  width:calc(6 * var(--u)); height:calc(6 * var(--u)); border-radius:50%;
  background:#40D17A;
  box-shadow:0 0 calc(7 * var(--u)) rgba(64,209,122,.95);
  animation:sis-ia-dot 2.4s ease-in-out infinite;
}
@keyframes sis-ia-dot{
  0%, 100% {opacity:1;   transform:scale(1)}
  50%      {opacity:.35; transform:scale(.7)}
}

.sis-hero__para{
  margin-top:calc(38 * var(--vhu));
  width:calc(500 * var(--u));
  font-size:calc(13 * var(--u));
  line-height:calc(17.4 * var(--vhu));
  color:#C2C2C2;
}

/* a cadeia inteira anunciada em uma linha, no pé do hero */
.sis-hero__chain{
  margin-top:calc(88 * var(--vhu));
  display:flex; align-items:center; gap:calc(13 * var(--u));
  font-size:calc(8 * var(--u));
  color:#6E6E6E;
}
.sis-hero__chain b{font-weight:500; color:#fff}
.sis-hero__chain i{
  font-style:normal; display:block;
  width:calc(28 * var(--u)); height:1px; background:#333;
  transform-origin:left center;
}

/* ================================================================= O PEDIDO */
#sis-sentidos{background:#fff}

.sen-rows{margin-top:calc(78 * var(--vhu)); border-top:1px solid #E8E8E8}
.sen-row{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  column-gap:calc(16 * var(--u));
  align-items:start;
  padding:calc(30 * var(--vhu)) 0 calc(34 * var(--vhu));
  border-bottom:1px solid #E8E8E8;
  cursor:none;
}
.sen-row__hair{
  position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:#0C0C0C; transform:scaleX(0); transform-origin:left center;
}
/* Todos na MESMA faixa da grade. Sem isso, como o texto passou a ocupar as colunas
   3 e 4, a auto-alocação não acha lugar livre na coluna 4 e joga a matriz de pontos
   para uma segunda faixa, esticando a linha inteira. */
.sen-row > *{grid-row:1}
.sen-row__n{
  grid-column:1;
  font-size:calc(9.5 * var(--u));
  color:#B0B0B0;
  transition:color .3s ease;
}
.sen-row__id{grid-column:2}
.sen-row__name{
  display:block;
  font-size:calc(34 * var(--u));
  line-height:calc(34 * var(--vhu));
  color:#0C0C0C;
}
.sen-row__papel{
  display:block;
  margin-top:calc(9 * var(--vhu));
  font-family:var(--font-mono);
  font-size:calc(9 * var(--u));
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--c-blue);
}
.sen-row__text{
  /* invade a coluna 4: o texto ficou mais longo e explicativo, e em uma coluna só
     viraria uma tira de sete linhas ao lado de um nome gigante. A matriz de pontos
     fica encostada na margem direita, então sobra folga de ~90u entre as duas. */
  grid-column:3 / span 2;
  width:calc(400 * var(--u));
  font-size:calc(11.5 * var(--u));
  line-height:calc(14.5 * var(--vhu));
  color:#5A5A5A;
  transition:color .3s ease;
}
.sen-row:hover .sen-row__n{color:#0C0C0C}
.sen-row:hover .sen-row__text{color:#0C0C0C}

/* matriz de pontos: mesmo primitivo dos ícones de #values (16 colunas) */
.sen-row__icon{
  grid-column:4;
  justify-self:end;
  display:grid;
  grid-template-columns:repeat(16, calc(5.4 * var(--u)));
  grid-auto-rows:calc(5.4 * var(--vhu));
}
.sen-row__icon i{
  display:block; width:calc(2.1 * var(--u)); height:calc(2.1 * var(--u));
  border-radius:50%; background:#E2E2E2;
  align-self:center; justify-self:center;
}
.sen-row__icon i.on{background:#0C0C0C}

.sen-remate{
  margin-top:calc(62 * var(--vhu));
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  column-gap:calc(16 * var(--u));
}
.sen-remate p{
  grid-column:2 / span 2;
  font-size:calc(18 * var(--u));
  line-height:calc(24 * var(--vhu));
  color:#0C0C0C;
}

/* onda que atravessa a matriz no hover: delay por ponto (--d) faz a varredura */
.sen-row__icon i.on{transition:background-color .3s ease}
.sen-row__icon.is-anim i.on{animation:sen-flash 1.5s var(--d, 0s) infinite}
@keyframes sen-flash{
  0%, 22%, 100%{background:#0C0C0C}
  8%{background:var(--c-blue)}
}