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