/* Demo: paginas de entrada/fim e faixa com relogio. So usa tokens de tokens.css. */
.demo-pagina { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: var(--sp-5); background: var(--sidebar-bg); font-family: var(--font-sans); }
.demo-card { background: var(--surface); border-radius: var(--radius-lg); padding: var(--sp-8); max-width: 480px; width: 100%; box-shadow: var(--shadow-lg); text-align: center; }
.demo-barra { height: 4px; border-radius: var(--radius-sm); margin-bottom: var(--sp-5); background: linear-gradient(90deg, var(--brand-blue) 0 60%, var(--brand-red) 60% 100%); }
.demo-card h1 { font-family: var(--font-display); font-size: var(--fs-2xl); margin: 0 0 var(--sp-3); }
.demo-card p { color: var(--text-muted); margin: 0 0 var(--sp-4); line-height: 1.5; }
.demo-lista { text-align: left; color: var(--text-muted); margin: 0 0 var(--sp-5); padding-left: var(--sp-5); line-height: 1.7; }
.demo-btn { display: inline-block; border: 0; cursor: pointer; padding: var(--sp-3) var(--sp-6); border-radius: var(--radius-md); background: var(--accent); color: var(--text-on-dark); font: inherit; font-weight: 600; text-decoration: none; }
.demo-btn:hover { filter: brightness(.92); }
.demo-peq { font-size: var(--fs-xs); margin-top: var(--sp-4); }
.demo-refaz { margin-top: var(--sp-4); }
.demo-link { background: none; border: 0; color: var(--accent); cursor: pointer; font: inherit; text-decoration: underline; }
.demo-faixa { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-md); background: var(--surface-alt); border: 1px solid var(--border); font-size: var(--fs-sm); }
.demo-faixa__cta { color: var(--text-on-dark); background: var(--accent); padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-md); font-weight: 600; text-decoration: none; }
.demo-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-4); margin-top: var(--sp-4); }
.demo-numeros div { background: var(--surface-alt); border-radius: var(--radius-md); padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-1); }
.demo-numeros strong { font-family: var(--font-display); font-size: var(--fs-2xl); }
.demo-numeros span { color: var(--text-muted); font-size: var(--fs-sm); }
.demo-passos { color: var(--text-muted); line-height: 1.8; padding-left: var(--sp-5); margin: 0; }