/* Demo: textos da tela de entrada/fim e faixa com relogio. So usa tokens de tokens.css. */
.demo-lista { color: var(--texto-suave); margin: 0 0 var(--sp-4); padding-left: 20px; line-height: 1.7; }
.demo-peq { font-size: var(--fs-xs); color: var(--texto-fraco); margin: var(--sp-4) 0 0; }
.demo-refaz { margin-top: var(--sp-4); }
.demo-link { background: none; border: 0; color: var(--cor-primaria); cursor: pointer; font: inherit; text-decoration: underline; }
.login-caixa a.btn { text-decoration: none; display: inline-flex; justify-content: center; align-items: center; gap: 8px; }
.demo-faixa { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; justify-content: space-between; margin-bottom: 16px; padding: 12px 16px; border-radius: var(--raio); background: var(--cor-primaria-suave); border: 1px solid var(--borda); font-size: 14px; }
.demo-faixa__cta { color: var(--texto-sobre-primaria); background: var(--cor-primaria); padding: 8px 16px; border-radius: var(--raio); font-weight: 600; text-decoration: none; }
.demo-faixa__cta:hover { background: var(--cor-primaria-hover); }