/* SOLO para las cards de demo e index.html. NO va a producción ni a HubSpot.
   Marco de documentación: cabecera de la card, etiquetas de variante y notas. */

.ds-page{ background:var(--bw-paper); color:var(--bw-ink); }
.ds-cardhead{
  background:var(--bw-ink); color:var(--bw-cream);
  padding:18px var(--gutter);
  display:flex; flex-wrap:wrap; gap:8px 18px; align-items:baseline; justify-content:space-between;
  border-bottom:var(--border-sticker) solid var(--bw-gold);
}
.ds-cardhead__title{ margin:0; font-family:var(--font-display); font-weight:900; text-transform:uppercase; font-size:1.25rem; letter-spacing:.04em; }
.ds-cardhead p{ margin:0; font-size:var(--fs-xs); color:var(--bw-cream-muted); }
.ds-cardhead a{ color:var(--bw-gold); }
.ds-variant{
  display:block; padding:10px var(--gutter);
  font-family:var(--font-display); font-weight:700; font-size:0.75rem; letter-spacing:.12em; text-transform:uppercase;
  background:var(--bw-cream-deep); color:var(--bw-ink); border-block:1.5px solid rgba(25,20,16,.2);
}
.ds-notes{
  width:min(var(--container-max), 100% - 2 * var(--gutter)); margin:32px auto 48px;
  padding:20px 24px; border-radius:var(--radius-lg);
  background:var(--bw-white); border:2px dashed var(--bw-control-line);
  font-size:var(--fs-sm); line-height:1.55; color:var(--bw-ink-soft);
}
.ds-notes h2{ font-family:var(--font-display); font-weight:900; text-transform:uppercase; font-size:1rem; letter-spacing:.06em; color:var(--bw-ink); margin:0 0 8px; }
.ds-notes ul{ margin:0; padding-left:1.2em; display:grid; gap:4px; }
.ds-notes code{ font-size:.92em; background:var(--bw-cream); padding:1px 5px; border-radius:4px; }
.ds-pad{ padding:var(--stack-lg) var(--gutter); }
.ds-row{ display:flex; flex-wrap:wrap; gap:12px 16px; align-items:center; }
.ds-static{ position:relative !important; z-index:1 !important; }