/* Mini-telas dos apps (mesma ideia do site da Linear Tech). Parada, é a tela pronta; quando o cartão entra na tela
   (classe .vendo, posta pelo script da página) os itens entram um a um e o ciclo se repete.
   Usada pela página inicial e pelos slides de divulgação. Nomes e dados são de exemplo. */
.demo {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* sem isso, uma linha comprida empurra a mini-tela para fora do cartão */
  align-content: center;
  gap: 0.35rem;
  min-height: 9rem;
  padding: 0.7rem;
  overflow: hidden;
  border-radius: 0.9rem;
  background: #0b1f2a;
  color: #e2e8f0;
  font-size: 0.78rem;
  line-height: 1.25;
}
.demo .q {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.32rem 0.5rem;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.07);
}
.demo .q b { color: color-mix(in srgb, var(--cor) 45%, #ffffff); white-space: nowrap; }
.demo .q span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo .q i {
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}
.demo .q i.ok { background: rgba(34, 197, 94, 0.22); color: #4ade80; }
.demo .q i.alerta { background: rgba(245, 158, 11, 0.22); color: #fbbf24; }
.demo .q.destaque {
  justify-content: center;
  white-space: nowrap;
  background: color-mix(in srgb, var(--cor) 80%, #000000);
  color: #ffffff;
  font-weight: 700;
}
.vendo .demo .q {
  animation: demo-entra 6s ease-out infinite both;
  animation-delay: calc(var(--n, 0) * 0.45s);
}
@keyframes demo-entra {
  0% { opacity: 0; transform: translateY(8px); }
  8%, 88% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .vendo .demo .q { animation: none; }
}