/* Modo demonstração (só na pasta publicada): aviso de proposta, selo no cabeçalho e a explicação dos botões */

.demo-aviso {
  background: #1d1d1f; color: #FFFFFF;
  padding: 8px var(--lado); font-size: 0.8125rem; line-height: 1.4;
}
.demo-aviso strong { color: #FAB12E; margin-right: 6px; }

.demo-selo {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border: 2px dashed var(--borda); border-radius: 999px;
  font-size: 0.75rem; font-weight: 800; color: var(--tinta); white-space: nowrap;
}
.demo-selo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--primaria); }
@media (max-width: 360px) { .demo-selo { padding: 3px 7px; font-size: 0.6875rem; } .demo-selo::before { display: none; } }

.demo-explica {
  max-width: min(92vw, 420px); padding: 26px 24px 22px;
  border: var(--contorno); border-radius: 20px; box-shadow: var(--sombra-dura);
  background: var(--fundo); color: var(--tinta); font-family: var(--texto);
}
.demo-explica::backdrop { background: rgba(0, 0, 0, .45); }
.demo-explica h2 { font-size: 1.6rem; }
.demo-explica p { margin-top: 10px; font-size: 1.0625rem; }
.demo-explica .demo-nota { font-size: 0.875rem; color: var(--tinta-suave); }
.demo-explica .botao { margin-top: 18px; width: 100%; cursor: pointer; }
@media (prefers-reduced-motion: no-preference) {
  .demo-explica[open] { animation: arte-pula .45s cubic-bezier(.3, 1.5, .5, 1); }
}