/* Movimento, diagrama e especializações por página. */

/* ── Entrada de seção ──────────────────────────────────────────────────────
   Não é fade-in de bloco: é o filete que se desenha da esquerda para a direita,
   e a numeração da canaleta subindo junto. Um gesto por seção — numa página de
   cinco seções, cinco gestos, contra os 51 da versão antiga.

   O gesto pertence a esta linguagem: é uma régua sendo traçada, que é o que um
   desenhista faz. E o texto nunca se move: quem se move é a régua. */

.js .entra > .risco-entrada{
  display:block;
  height:1px;
  background:var(--azul);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--t-entrada) var(--curva-entrada);
  margin-bottom:var(--v-3);
}
.js .entra.visivel > .risco-entrada{transform:scaleX(1)}

.js .entra .numero{
  opacity:0;
  transform:translateY(2px);
  transition:opacity var(--t-entrada) var(--curva-entrada),
             transform var(--t-entrada) var(--curva-entrada);
}
.js .entra.visivel .numero{opacity:1; transform:none}

/* Sem JavaScript o filete já está desenhado. */
.risco-entrada{
  display:block; height:1px; background:var(--azul);
  margin-bottom:var(--v-3);
}

@media (prefers-reduced-motion: reduce){
  .js .entra > .risco-entrada{transform:scaleX(1); transition:none}
  .js .entra .numero{opacity:1; transform:none; transition:none}
}

/* ── Diagrama da plataforma ────────────────────────────────────────────────
   A peça central do site. O movimento aqui não é enfeite: o ritmo de cada pulso
   é a taxa de amostragem real daquele dado, anotada na própria figura. Isso
   transforma a animação em legenda. */

.diagrama{margin:var(--v-4) 0; max-width:none}
.diagrama svg{width:100%; height:auto; display:block}
.diagrama figcaption{
  margin-top:var(--v-3);
  font-size:.9375rem;
  color:var(--tinta-3);
  max-width:var(--leitura);
}

.dg-caixa{fill:var(--papel-2); stroke:var(--risco-forte); stroke-width:1}
.secao-alt .dg-caixa{fill:var(--papel)}
.dg-saida{fill:none; stroke:var(--azul); stroke-width:1}
.dg-plat{fill:var(--chapa); stroke:none}

.dg-linha{fill:none; stroke:var(--risco-forte); stroke-width:1}
.dg-terminal{fill:var(--risco-forte)}

.dg-txt{font:400 13px var(--texto); fill:var(--tinta)}
.dg-plat-t1{
  font-family:var(--titulo); font-weight:650; font-stretch:88%;
  font-size:15px; fill:var(--chapa-txt);
}
.dg-plat-t2{font:400 11px var(--texto); fill:var(--chapa-txt-2)}

.dg-rot{
  font-family:var(--mono); font-weight:600; font-stretch:112%;
  font-size:10px; letter-spacing:.06em;
  fill:var(--tinta-3);
}

/* A carga vive DENTRO da caixa da ilha, sob o nome. Fora dela cai no meio do
   leque de conectores e sai riscada pelas curvas. Menor e mais apagada que o
   nome, para anotar sem competir. */
.dg-carga{
  font-family:var(--mono); font-weight:500; font-stretch:100%;
  font-size:9px; letter-spacing:.02em;
  fill:var(--tinta-3);
}

/* O pulso. Uma cópia do conector, tracejada, com o traço correndo pelo caminho.
   stroke-dashoffset é barato e roda na GPU — sem offset-path e sem SMIL. */
.dg-pulso{
  fill:none;
  stroke:var(--verde-vivo);
  stroke-width:2;
  stroke-linecap:round;
  stroke-dasharray:14 340;
  stroke-dashoffset:354;
  animation:correr var(--t-dado) linear infinite;
}
.dg-pulso-saida{stroke:var(--azul-claro)}

@keyframes correr{ to{stroke-dashoffset:0} }

/* Ritmo por linha: é o dado que define, não a estética.
   Rápido = alta taxa de amostragem; esparso = evento. */
.dg-ritmo-rapido  {animation-duration:1400ms}
.dg-ritmo-medio   {animation-duration:2600ms}
.dg-ritmo-lento   {animation-duration:5200ms}
.dg-ritmo-evento  {animation-duration:7000ms}

/* As saídas pulsam depois do trânsito das entradas: o dado chega, a plataforma
   consolida, a informação sai. A animação conta a frase que a seção escreve. */
.dg-pulso-saida{animation-delay:900ms}
.dg-pulso-saida:nth-of-type(2){animation-delay:1100ms}
.dg-pulso-saida:nth-of-type(3){animation-delay:1300ms}

@media (prefers-reduced-motion: reduce){
  /* Pulsos parados e distribuídos ao longo das linhas: o desenho continua
     legível como esquema anotado, que é o que ele já é. */
  .dg-pulso{animation:none; stroke-dashoffset:250}
  .dg-pulso:nth-of-type(2){stroke-dashoffset:210}
  .dg-pulso:nth-of-type(3){stroke-dashoffset:170}
  .dg-pulso:nth-of-type(4){stroke-dashoffset:130}
  .dg-pulso:nth-of-type(5){stroke-dashoffset:90}
  .dg-pulso:nth-of-type(6){stroke-dashoffset:50}
}

/* Alternativa em texto, para leitor de tela e para telas muito estreitas. */
.diagrama-txt{display:none}
.diagrama-txt ol{list-style:none; padding:0; margin:0}
.diagrama-txt li{border-top:1px solid var(--risco); padding:var(--v-2) 0}
.diagrama-txt li:last-child{border-bottom:1px solid var(--risco)}
.diagrama-txt strong{display:block; font-family:var(--titulo); font-stretch:92%}

/* ── Marcador de status ────────────────────────────────────────────────────
   Terceiro dos quatro lugares onde o verde aparece. */

.status{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-weight:600; font-stretch:112%;
  font-size:.75rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--verde);
}
.status::before{
  content:''; width:8px; height:8px;
  background:var(--verde-vivo);
  flex:0 0 auto;
}

/* ── Destaques institucionais da home ──────────────────────────────────────
   Lista de definição, não card: o rótulo nomeia o item e o filete separa. É a
   mesma gramática da tabela e do bloco de identificação. */

.destaques{margin:var(--v-4) 0 0; max-width:var(--leitura)}
.destaques > div{
  border-top:1px solid var(--risco);
  padding:var(--v-3) 0;
}
.destaques > div:last-child{border-bottom:1px solid var(--risco)}
.destaques dt{margin-bottom:var(--v-1)}
.destaques dd{margin:0; color:var(--tinta-2)}
.destaques .status{display:flex; margin-bottom:6px}

/* ── Página da empresa ─────────────────────────────────────────────────────── */

.principios > div{border-top:1px solid var(--risco); padding:var(--v-3) 0}
.principios > div:last-child{border-bottom:1px solid var(--risco)}
.principios h3{margin-bottom:6px}
.principios p{margin:0; color:var(--tinta-2)}

/* ── Contato ───────────────────────────────────────────────────────────────── */

.contato-in{
  display:grid;
  grid-template-columns:minmax(0,1fr) 17rem;
  gap:var(--v-5);
  align-items:start;
}
.contato-lado dt{margin-top:var(--v-3)}
.contato-lado dt:first-child{margin-top:0}
.contato-lado dd{margin:0 0 var(--v-1); font-size:.9375rem}

/* ── 404 ───────────────────────────────────────────────────────────────────── */

.erro-links{list-style:none; padding:0; max-width:var(--leitura)}
.erro-links li{border-top:1px solid var(--risco); margin:0}
.erro-links li:last-child{border-bottom:1px solid var(--risco)}
.erro-links a{
  display:block; padding:14px 0; text-decoration:none;
  font-family:var(--titulo); font-weight:600;
}

/* ── Privacidade ───────────────────────────────────────────────────────────── */

.legal h2{margin-top:var(--v-5)}
.legal h2:first-of-type{margin-top:0}
.revisao{font-family:var(--mono); font-size:.8125rem; color:var(--tinta-3)}