/* Índice de pantallas y kit de componentes */
.idx-legend{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;font-size:12.5px;color:var(--muted);flex-direction:row}
.idx-legend > span{display:inline-flex;align-items:center;gap:8px}
.idx-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.idx-group{border-radius:var(--r-lg);padding:18px;display:flex;flex-direction:column;gap:12px;min-width:0}
.idx-h{display:flex;align-items:center;gap:12px}
.idx-h h2{font-family:var(--font-display);font-size:18px;font-weight:600;letter-spacing:-.02em}
.idx-list{display:flex;flex-direction:column;gap:6px}
.idx-item{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);transition:background .2s}
.idx-item:hover{background:rgba(255,255,255,.06)}
.idx-item > a{display:flex;flex-direction:column;gap:2px}
.idx-item > a b{font-size:14px;font-weight:600}
.idx-item > a small{font-size:12px;color:var(--dim)}
.idx-st{display:flex;flex-wrap:wrap;gap:6px}
.idx-st .badge{height:24px;font-size:11px}
.idx-st .badge:hover{filter:brightness(1.2)}
/* kit */
.kit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.kit-sec{display:flex;flex-direction:column;gap:14px}
.kit-sec h2{font-family:var(--font-display);font-size:17px;font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:10px}
.kit-sec h2 code{font:600 11px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--dim);background:rgba(255,255,255,.05);padding:3px 7px;border-radius:7px}
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.sw{border-radius:14px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);font-size:11px}
.sw i{display:block;height:54px;background:var(--c)}
.sw span{display:block;padding:6px 8px;color:var(--muted)}
.type-scale{display:flex;flex-direction:column;gap:8px}
.type-scale .t1{font-family:var(--font-display);font-weight:800;font-size:40px;letter-spacing:-.035em;line-height:1}
.type-scale .t2{font-family:var(--font-display);font-weight:700;font-size:26px;letter-spacing:-.03em}
.type-scale .t3{font-family:var(--font-display);font-weight:600;font-size:18px}
.type-scale .t4{font-size:14px;color:var(--muted)}
@media (max-width:1100px){ .idx-grid,.kit-grid{grid-template-columns:minmax(0,1fr)} }