/* AGENDAR DEMONSTRAÇÃO · CONTAINER 04 · PONTOS DE PARTIDA (único container gráfico) — v0.67.0
   Fundo aurora animado por CSS (_shared/05-aurora.css, variante bl). Ajuste: --uos-dco-veil (véu de contraste, p.ex. rgba(255,255,255,.55)).
   Seis painéis estáticos e o caminho contexto > fluxos > demonstração. Nada depende só de cor. */
.uos-demo-ctx {
  --uos-dco-veil: rgba(255, 255, 255, 0);
  background:
    linear-gradient(var(--uos-dco-veil), var(--uos-dco-veil)),
    var(--uos-aurora-grain),
    var(--uos-aurora-bl),
    var(--uos-sec-bg);
  background-blend-mode: normal, soft-light, normal;
  animation: var(--uos-aurora-motion);
}
.uos-demo-ctx__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 24px);
  margin: clamp(24px, 3vw, 40px) 0 0;
  padding: 0;
  list-style: none;
}
.uos-demo-ctx__grid li {
  display: flex;
  min-width: 0;
  min-height: clamp(150px, 13vw, 190px);
  flex-direction: column;
  padding: clamp(22px, 2.4vw, 34px);
  border: 1px solid var(--uos-line);
  border-radius: var(--hm-radius);
  background: var(--uos-white);
}
.uos-demo-ctx__grid li span { color: var(--uos-red); font-size: 0.875rem; font-weight: 600; }
.uos-main .uos-demo-ctx__grid li strong {
  margin-top: auto;
  padding-top: 18px;
  font-family: var(--uos-font-display);
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.uos-demo-ctx__path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: clamp(24px, 3vw, 40px) 0 0;
  padding: 0;
  list-style: none;
}
.uos-demo-ctx__path li {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  border: 1px solid var(--uos-line);
  border-radius: 999px;
  background: var(--uos-white);
  font-size: 0.9375rem;
  font-weight: 600;
}
.uos-demo-ctx__path li:not(.is-last)::after { color: var(--uos-red); content: "\2192"; font-weight: 400; }
.uos-demo-ctx__path li.is-last { border-color: var(--uos-orange); background: var(--uos-orange); color: var(--uos-black); }
@media (max-width: 900px) { .uos-demo-ctx__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .uos-demo-ctx__grid { grid-template-columns: minmax(0, 1fr); } }