/* Demo del escaparate: solo lo que la app no trae ya.
   Colores siempre desde los tokens de la app (regla 0 de DISENO.md). */

.top .mark { display: inline-flex; align-items: center; }

.demo-pill {
  margin-left: .6rem;
  min-height: 32px; padding: .3rem .75rem;
  border: none; border-radius: 999px;
  background: var(--tinta); color: var(--l0);
  font: inherit; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer;
}
.demo-pill:focus-visible, .demo-enlace:focus-visible, .demo-ok:focus-visible {
  outline: 2px solid var(--brass-txt); outline-offset: 2px;
}

.demo-hoja { gap: .6rem; }
.demo-et {
  margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brass-txt);
}
.demo-tit { margin: 0 0 .2rem; line-height: 1.2; }
.demo-flojo { font-size: .84rem; }
.demo-ok { margin-top: .4rem; }
.demo-acciones { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.demo-enlace {
  min-height: 44px; display: inline-flex; align-items: center;
  background: none; border: none; padding: 0 .2rem;
  color: var(--brass-txt); font: inherit; font-size: .9rem; font-weight: 600;
  text-decoration: none; cursor: pointer;
}