/* ============================================================
   Ideal Sistemas — vocabulário compartilhado "demo" (demo.css)
   Autônomo: todo seletor tem prefixo demo- e toda cor usa
   var() com fallback, para não depender do style.css do site.

   ATENÇÃO: .demo-pip e .demo-sig são usados também pelas páginas
   da rota /demo/ (ver deploy/demo/**). Não remover nem renomear
   sem atualizar as duas pontas.

   O layout da seção "00 · Em operação" (grade de miniaturas ao
   vivo) está em demo-home.css — este arquivo cuida só do
   cabeçalho da seção e do vocabulário compartilhado.
   ============================================================ */

.demo-sec{
  position:relative;
  padding:clamp(64px,7vw,104px) var(--pad, clamp(24px,5vw,88px));
  border-top:1px solid var(--line, #E3E8DF);
  background:var(--ground, #F7F9F5);
  overflow:hidden;
}
.demo-sec > *{ max-width:1240px; margin-left:auto; margin-right:auto; }

/* cabeçalho da seção ----------------------------------------- */
.demo-label{
  font-family:var(--mono, 'IBM Plex Mono', ui-monospace, Consolas, monospace);
  font-size:11px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--muted, #718070);
  margin:0 0 18px;
}
.demo-label i{ font-style:normal; color:var(--accent, #5F8F26); margin-right:10px; }
.demo-titulo{
  font-family:var(--display, 'Archivo', 'Helvetica Neue', Arial, sans-serif);
  font-weight:900;
  font-size:clamp(28px,3.5vw,45px); line-height:1.06; letter-spacing:-.035em;
  color:var(--ink, #18211B);
  margin:0 0 18px; max-width:19ch; text-wrap:balance;
}
.demo-nota{
  color:var(--ink-2, #47544A); font-size:15px; line-height:1.65;
  max-width:62ch; margin:0 0 clamp(22px,3vw,30px);
}

/* assinatura mono (usada por painéis das demos /demo/) ------- */
.demo-sig{ color:var(--ink, #18211B); font-weight:600; }

/* pip pulsante "ao vivo" (usado na home e em toda a rota /demo/) */
.demo-pip{
  width:6px; height:6px; border-radius:50%; flex:none;
  background:var(--jade, #5F8F26);
  box-shadow:0 0 0 0 rgba(141,198,63,.55);
  animation:demoPulse 3.4s infinite;
}
@keyframes demoPulse{
  0%{ box-shadow:0 0 0 0 rgba(141,198,63,.5); }
  70%{ box-shadow:0 0 0 7px rgba(141,198,63,0); }
  100%{ box-shadow:0 0 0 0 rgba(141,198,63,0); }
}

@media (prefers-reduced-motion:reduce){
  .demo-pip{ animation:none !important; }
}