.demo-bar{
  position:relative;z-index:70;
  background:#16232E;color:#F2EFE7;
  font-family:"Figtree",system-ui,sans-serif;
  padding:.7rem clamp(1.25rem,5vw,4rem);
}
.demo-bar-in{
  max-width:1720px;margin:0 auto;
  display:flex;align-items:center;gap:.9rem 1.4rem;flex-wrap:wrap;
}
.demo-tag{
  flex:none;font-size:.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:#16232E;background:#C9AE82;padding:.3rem .6rem;border-radius:2px;
}

.demo-txt{flex:1 1 22rem;min-width:0;font-size:.9rem;line-height:1.45;margin:0;color:#DDD8CC}
.demo-txt b{color:#fff;font-weight:600}
.demo-txt a.demo-marca{color:#C9AE82;font-weight:600;border-bottom:1px solid rgba(201,174,130,.45)}

.demo-cores{
  margin-left:auto;flex:none;
  display:inline-flex;align-items:center;gap:.4rem;
}
.demo-cores-lbl{
  font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:#A9A296;margin-right:.15rem;white-space:nowrap;
}
.demo-cores .pv-swatch{
  width:28px;height:28px;border-radius:50%;border:2px solid transparent;background:none;
  cursor:pointer;padding:0;flex:none;display:flex;align-items:center;justify-content:center;
  transition:transform .15s ease, border-color .15s ease;
}
.demo-cores .pv-swatch > span{
  width:18px;height:18px;border-radius:50%;background:var(--sw);
  box-shadow:inset 0 0 0 3px var(--sw2);
}

.demo-cores .pv-swatch.is-active{border-color:#F2EFE7}
.demo-cores .pv-swatch:focus-visible{outline:2px solid #C9AE82;outline-offset:2px}
@media (hover:hover) and (pointer:fine){ .demo-cores .pv-swatch:hover{transform:translateY(-2px)} }
@media (prefers-reduced-motion:reduce){ .demo-cores .pv-swatch{transition:none} }


@media (hover:none){
  .demo-cores .pv-swatch{width:44px;height:44px;border-color:transparent}
  .demo-cores .pv-swatch.is-active{border-color:transparent}
  .demo-cores .pv-swatch.is-active > span{box-shadow:inset 0 0 0 3px var(--sw2), 0 0 0 2px #F2EFE7}
}

.demo-cta{
  flex:none;
  display:inline-flex;align-items:center;gap:.45rem;
  background:#C9AE82;color:#16232E;
  font-weight:600;font-size:.88rem;line-height:1;
  padding:.7rem 1.15rem;border-radius:2px;
  transition:background .2s ease;
}

@media (hover:hover) and (pointer:fine){
  .demo-cta:hover{background:#DCC49C}
  .demo-txt a.demo-marca:hover{color:#fff;border-bottom-color:#fff}
}
@media (hover:none){ .demo-cta{min-height:44px} }


:root{--demo-h:0px;--demo-top:0px}
body.tem-demo-bar header{top:var(--demo-top)}


body.tem-demo-bar .nav-links.open{top:var(--demo-top)}


@media(max-height:520px) and (orientation:landscape){
  body.tem-demo-bar header{top:var(--demo-h)}
}


.demo-rights{
  border-top:1px solid rgba(255,255,255,.08);
  margin-top:1.4rem;padding-top:1.2rem;
  font-size:.75rem;line-height:1.65;color:var(--on-dark-faint);max-width:88ch;
}
.demo-rights p{margin:0 0 .4rem}
.demo-rights p:last-child{margin-bottom:0}
.demo-rights a{display:inline;margin:0;font-size:.75rem;color:var(--on-dark-soft);border-bottom:1px solid rgba(255,255,255,.22)}
@media (hover:hover) and (pointer:fine){ .demo-rights a:hover{color:var(--champ-soft)} }


@media(max-width:860px){
  .demo-bar{padding-top:.6rem;padding-bottom:.6rem}
  .demo-bar-in{gap:.6rem .9rem}
  .demo-txt{font-size:.84rem;flex:1 1 100%;order:3}
  .demo-cta{font-size:.84rem;padding:.6rem .9rem}
  .demo-cores{margin-left:auto;gap:.3rem}
  .demo-cores-lbl{display:none}
}

@media(max-width:460px){
  .demo-cores{flex:1 1 100%;order:2;margin:0;justify-content:center}
  .demo-cta{margin-left:auto}
}