/* Identidad visual de las demos de Código BIM. */
:root {
  --demo-font: system-ui, -apple-system, "Segoe UI", sans-serif;
  --demo-text: #4b443b;
  --demo-background: #f5f1e8;
  --demo-surface: #fffaf0;
  --ink: #1c1a16;
  --muted: #766d61;
  --line: #d8ccba;
  --accent: #d76f1f;
  --accent-hover: #e1843e;
  --accent-text: #964412;
  --tint: #ebe3d5;
  --demo-focus: #964412;
  --demo-radius: 10px;
  --demo-grid:
    linear-gradient(#fffaf00e 1px, transparent 1px),
    linear-gradient(90deg, #fffaf00e 1px, transparent 1px);
}

.demo-masthead {
  color: var(--demo-surface);
  border-top: 3px solid var(--accent);
  background:
    var(--demo-grid) 0 0 / 24px 24px,
    var(--ink);
}

.demo-brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.88rem;
  font-weight: 750;
}

.demo-brand svg {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  color: #e58a43;
}

.demo-brand b {
  color: #e58a43;
}

.demo-brand-label {
  padding-left: 0.55rem;
  border-left: 1px solid #766d61;
  color: #d8ccba;
  font-size: 0.78rem;
  font-weight: 550;
}

.demo-warning {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid #ecd6a6;
  border-radius: 0.75rem;
  background: #fff7e8;
  color: #67460e;
  font-size: 0.83rem;
}

.demo-warning p {
  margin: 0;
}

.demo-warning svg {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
}