/* Portada: hero, taxonomía y catálogo agrupado */
.hub-hero { padding: 56px 0 20px; }
.hub-hero h1 { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 750; letter-spacing: -0.035em; max-width: 16em; }
.hub-hero h1 span { color: var(--accent-ink); }
.hub-hero .lead { font-size: clamp(1.02rem, 1.5vw, 1.2rem); color: var(--ink-2); max-width: 46em; margin: 18px 0 26px; }
.eyebrow { margin: 0 0 12px; font-size: 0.8rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); }
.cta { display: flex; gap: 10px; flex-wrap: wrap; }
.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 36px 0 8px; }
.principles .card { padding: 18px 20px; }
.principles h3 { font-size: 1rem; margin-bottom: 6px; }
.principles p { margin: 0; color: var(--ink-2); font-size: 0.92rem; }

.sec-head { margin: 56px 0 18px; }
.sec-head h2 { font-size: 1.55rem; letter-spacing: -0.02em; }
.sec-head p { color: var(--ink-2); margin: 6px 0 0; max-width: 60em; }
.cat-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; flex-wrap: wrap; }

/* Taxonomía */
.tax-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tax-card { padding: 20px 22px; position: relative; }
.tax-n { position: absolute; top: 18px; right: 20px; font-size: 2.2rem; font-weight: 750; color: var(--surface-2); line-height: 1; }
.tax-card h3 { font-size: 1.05rem; margin-bottom: 10px; }
.tax-card dl { margin: 0; }
.tax-card dt { font-weight: 650; font-size: 0.9rem; margin-top: 10px; }
.tax-card dt:first-of-type { margin-top: 0; }
.tax-card dd { margin: 2px 0 0; color: var(--ink-2); font-size: 0.88rem; }

/* Catálogo */
.par-block { margin-bottom: 40px; scroll-margin-top: 72px; }
.par-head { padding: 16px 20px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); margin-bottom: 20px; position: relative; }
.par-head h3 { font-size: 1.3rem; letter-spacing: -0.02em; }
.par-head p { margin: 4px 0 0; color: var(--ink-2); font-size: 0.92rem; max-width: 62em; }
.par-count { position: absolute; top: 16px; right: 20px; font-size: 0.78rem; font-weight: 650; color: var(--ink-2); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; }
.fam-block { margin-bottom: 26px; }
.fam-title { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-2); margin-bottom: 10px; cursor: help; }
.fam-title::before { content: ""; width: 14px; height: 2px; background: var(--accent); border-radius: 2px; }
.fam-n { font-size: 0.72rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 0 7px; letter-spacing: 0; }
.algos { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.algo { padding: 18px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; transition: transform .15s, border-color .15s; }
a.algo:hover { transform: translateY(-3px); border-color: var(--accent); }
.algo h4 { font-size: 1.05rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.algo p { margin: 0; color: var(--ink-2); font-size: 0.9rem; flex: 1; }
.algo .tags { display: flex; gap: 6px; flex-wrap: wrap; }
.algo.soon { opacity: 0.72; }
.badge-live { background: var(--accent-wash); color: var(--accent-ink); border-color: var(--accent); }
.go { font-weight: 600; color: var(--accent-ink); font-size: 0.9rem; }
.thumb { height: 108px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
.thumb svg { width: 100%; height: 100%; display: block; }
.hp-list { display: flex; flex-wrap: wrap; gap: 5px; }
.hp-list code { font-size: 0.72rem; padding: 1px 6px; }
.sup-sup { background: color-mix(in srgb, var(--s4) 16%, var(--surface)); border-color: color-mix(in srgb, var(--s4) 40%, var(--border)); }
.sup-unsup { background: color-mix(in srgb, var(--s3) 15%, var(--surface)); border-color: color-mix(in srgb, var(--s3) 40%, var(--border)); }
.sup-semi { background: color-mix(in srgb, var(--s1) 13%, var(--surface)); border-color: color-mix(in srgb, var(--s1) 40%, var(--border)); }
.sup-self { background: color-mix(in srgb, var(--s5, var(--s2)) 13%, var(--surface)); border-color: color-mix(in srgb, var(--s2) 36%, var(--border)); }
.empty-cat { color: var(--ink-2); padding: 30px 0; }

@media (max-width: 1000px) { .principles, .tax-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .hub-hero { padding-top: 32px; }
  .cat-head { align-items: flex-start; }
  .par-count { position: static; display: inline-block; margin-top: 8px; }
}