body[data-page="design-system"]{ background:#F1F1F1; color:#1a1410; }
body[data-page="design-system"] code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.78rem; }

.ds-app{ padding:0; max-width:none; margin:0; }

body[data-page="design-system"] .nav,
body[data-page="design-system"] .pie,
body[data-page="design-system"] .skip-link{ display:none; }

.ds-lateral{ position:fixed; z-index:850; left:0; top:0; width:268px; height:100vh;
  padding:34px 26px 28px; overflow-y:auto; background:#ffffff;
  border-right:1px solid rgba(0,0,0,.1); }
.ds-lateral__titulo{ margin:0 0 20px; font-size:.86rem; font-weight:800; letter-spacing:-.02em; line-height:1.3; }
.ds-lateral__logo{ display:block; margin:0 0 30px; color:inherit; text-decoration:none;
  font-family:'BwModelica Black', sans-serif; font-feature-settings:'salt' on;
  font-size:34px; font-weight:900; line-height:1em; letter-spacing:-.056em; white-space:nowrap; }
.ds-lateral__lista{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:3px; }
.ds-lateral__lista a{ display:block; padding:7px 0; color:inherit; text-decoration:none;
  font-size:.86rem; opacity:.72;
  transition:opacity .18s var(--ease-out), padding-left .18s var(--ease-out); }
.ds-lateral__lista a:hover{ opacity:1; padding-left:7px; }
.ds-lateral__resumen{ margin:0; display:flex; flex-direction:column; gap:12px; }
.ds-lateral__resumen div{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.ds-lateral__resumen dt{ font-size:.7rem; letter-spacing:.07em; text-transform:uppercase; opacity:.5; }
.ds-lateral__resumen dd{ margin:0; font-size:1rem; font-weight:800; font-variant-numeric:tabular-nums; }

.ds-centro{ min-width:0; margin-left:268px;
  padding-top:clamp(46px,6vh,74px); padding-bottom:clamp(80px,10vh,140px);
  padding-inline:max(clamp(24px,4vw,70px), calc((100% - 980px) / 2)); }
.ds-h1{ margin:0 0 clamp(36px,5vw,64px); font-size:clamp(1.9rem,3.6vw,3rem); font-weight:800;
  letter-spacing:-.035em; line-height:1.03; }
.ds-seccion{ padding-top:clamp(44px,5vw,72px); margin-top:clamp(44px,5vw,72px); border-top:1px solid var(--border);
  scroll-margin-top:100px; }
.ds-seccion:first-of-type{ border-top:0; margin-top:0; padding-top:0; }
.ds-titulo{ margin:0 0 10px; font-size:clamp(1.3rem,2.2vw,1.9rem); font-weight:800; letter-spacing:-.03em; }
.ds-nota{ margin:0 0 26px; max-width:76ch; font-size:.9rem; font-weight:300; line-height:1.6; opacity:.7; }

.ds-grupo{ margin-top:26px; }
.ds-grupo__titulo{ display:flex; align-items:center; gap:9px; margin:0 0 12px; font-size:.78rem;
  font-weight:700; letter-spacing:.07em; text-transform:uppercase; opacity:.72; }
.ds-grupo__titulo span{ padding:1px 8px; border-radius:999px; background:rgba(0,0,0,.08);
  font-size:.68rem; letter-spacing:0; font-variant-numeric:tabular-nums; }

.ds-logos{ list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px; }
.ds-logo{ display:flex; flex-direction:column; gap:9px; }
.ds-logo__caja{ display:grid; place-items:center; padding:24px; min-height:104px; background:#fff; border-radius:14px; }
.ds-logo--neg .ds-logo__caja{ background:#111113; }
.ds-logo img{ max-width:100%; max-height:48px; height:auto; display:block; }
.ds-logo code{ opacity:.72; word-break:break-all; font-size:.66rem; }

.ds-muestras{ list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:9px; }
.ds-muestras li{ display:flex; align-items:center; gap:9px; padding:9px 11px; background:#fff; border-radius:9px; }
.ds-muestras small{ margin-left:auto; font-size:.68rem; opacity:.72; font-variant-numeric:tabular-nums; }
.ds-swatch{ width:24px; height:24px; flex:none; border-radius:6px; border:1px solid rgba(0,0,0,.12); }
.ds-muestras--radios .ds-radio{ width:28px; height:28px; flex:none; background:#111113; }

.ds-temas{ list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:9px; }
.ds-tema{ display:flex; align-items:center; gap:9px; padding:9px 11px; background:#fff; border-radius:9px; }
.ds-tema__caja{ position:relative; width:30px; height:30px; flex:none; border-radius:8px; border:1px solid rgba(0,0,0,.12); }
.ds-tema__ac{ position:absolute; right:3px; bottom:3px; width:10px; height:10px; border-radius:50%; border:1px solid rgba(0,0,0,.18); }

.ds-sombras{ list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px; }
.ds-sombras li{ display:flex; align-items:center; gap:13px; }
.ds-sombra{ width:40px; height:40px; flex:none; border-radius:9px; background:#fff; }
.ds-sombras small{ margin-left:auto; font-size:.68rem; opacity:.72; }
.ds-sombras code{ font-size:.62rem; line-height:1.4; word-break:break-word; }

.ds-lista-datos,.ds-chips,.ds-familias,.ds-bps{ list-style:none; margin:0; padding:0; }
.ds-lista-datos{ display:flex; flex-wrap:wrap; gap:9px; }
.ds-lista-datos li{ display:flex; align-items:center; gap:9px; padding:8px 13px; background:#fff; border-radius:999px; }
.ds-lista-datos small{ font-size:.68rem; opacity:.72; }
.ds-chips{ display:flex; flex-wrap:wrap; gap:5px; }
.ds-chips li{ padding:4px 9px; background:#fff; border-radius:6px; }
.ds-vacio{ opacity:.5; font-size:.84rem; }

.ds-bps{ display:flex; flex-direction:column; gap:8px; }
.ds-bp{ display:grid; grid-template-columns:150px 92px minmax(0,1fr); gap:14px; align-items:baseline;
  padding:12px 14px; background:#fff; border-radius:10px; }
.ds-bp__n{ font-size:.7rem; opacity:.72; font-variant-numeric:tabular-nums; }
.ds-bp__sels{ font-size:.68rem; opacity:.5; word-break:break-word; }

.ds-imagenes{ list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.ds-img{ display:flex; flex-direction:column; gap:7px; }
.ds-img img{ width:100%; height:104px; object-fit:contain; background:#fff; border-radius:11px; padding:9px; }
.ds-img code{ font-size:.6rem; word-break:break-all; opacity:.72; }

.ds-tipo{ display:flex; flex-direction:column; gap:20px; margin-bottom:8px; }
.ds-tipo__fila{ display:grid; grid-template-columns:130px minmax(0,1fr); gap:20px; align-items:start;
  padding-top:16px; border-top:1px solid var(--border); }
.ds-tipo__fila > code{ padding-top:5px; opacity:.5; }
.ds-tipo__fila p,.ds-tipo__fila .title-xl,.ds-tipo__fila .lead{ margin:0; }
.ds-tipo-muestra{ line-height:1; white-space:nowrap; }

.ds-fila-demo{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
#formularios .lead-form-card{ max-width:none; background:#fff; border-radius:14px;
  padding:clamp(22px,2.6vw,36px); }
#formularios .lead-form__step{ gap:26px; align-items:stretch; }
#formularios .field-group{ max-width:none; }
#formularios .lead-form input,#formularios .lead-form textarea{ width:100%; }
.ds-dato-suelto{ margin:0; font-size:.9rem; opacity:.7; }

.ds-avisos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:22px; margin-bottom:28px; }
.ds-aviso h3{ display:flex; align-items:center; gap:9px; margin:0 0 10px; font-size:.9rem; font-weight:700; }
.ds-aviso h3 span{ padding:2px 8px; border-radius:999px; background:#111113; color:#fff;
  font-size:.66rem; font-variant-numeric:tabular-nums; }
.ds-familias{ display:flex; flex-direction:column; gap:7px; max-height:320px; overflow-y:auto; }
.ds-familias li{ padding:8px 11px; background:#fff; border-radius:8px; font-size:.78rem; }
.ds-familias li span{ opacity:.72; margin-left:5px; font-variant-numeric:tabular-nums; }
.ds-familia__hijos{ display:block; margin-top:3px; font-size:.64rem; opacity:.5 !important; word-break:break-word; }

.ds-tabla-caja{ background:#fff; border-radius:12px; overflow:hidden; }
.ds-tabla{ width:100%; border-collapse:collapse; font-size:.78rem; }
.ds-tabla th{ text-align:left; padding:12px 14px; font-size:.66rem; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; opacity:.72; border-bottom:1px solid var(--border); }
.ds-tabla td{ padding:10px 14px; border-bottom:1px solid rgba(0,0,0,.05); vertical-align:middle; }
.ds-tabla tr:last-child td{ border-bottom:0; }
.ds-tabla__num{ font-variant-numeric:tabular-nums; opacity:.72; width:62px; }
.ds-tabla__donde{ font-size:.68rem; opacity:.5; }
.ds-tabla__estado{ width:100px; font-size:.68rem; opacity:.5; }
.ds-tabla__valor code{ word-break:break-word; }
.ds-tabla__muestra{ width:60px; }

@media (max-width:1000px){
  .ds-lateral{ position:static; width:auto; height:auto; padding:34px var(--pad-nav) 20px;
    border-right:0; border-bottom:1px solid rgba(0,0,0,.1); }
  .ds-centro{ padding:30px var(--pad-nav) clamp(70px,9vh,120px); margin-left:0; }
  .ds-lateral__logo{ margin-bottom:20px; }
  .ds-lateral__lista{ flex-direction:row; flex-wrap:wrap; gap:6px; border-top:0; }
  .ds-lateral__lista a{ border:1px solid var(--border); border-radius:999px; padding:6px 12px; }
  .ds-lateral__resumen{ flex-direction:row; flex-wrap:wrap; gap:18px; }
  .ds-tipo__fila{ grid-template-columns:1fr; gap:10px; }
  .ds-bp{ grid-template-columns:1fr; gap:5px; }
  .ds-tabla__donde{ display:none; }
}