/* ===== CATEGORY NAV (anchor pills) ===== */
.hub-cat-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0 2.5rem;
    padding: 4px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: 50px;
    width: fit-content;
}
.hub-cat-pill {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.45rem 1.1rem;
    border-radius: 50px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 500;
    transition: all var(--t);
}
.hub-cat-pill:hover {
    color: var(--text);
    background: rgba(255,255,255,0.05);
}
.hub-cat-pill .dot {
    width: 8px; height: 8px;
    border-radius: 50%;
}
.hub-cat-pill[data-cat="lgpd"] .dot { background: var(--hl-pink); }
.hub-cat-pill[data-cat="ia"] .dot { background: var(--hl-blue); }
.hub-cat-pill[data-cat="proj"] .dot { background: var(--hl-green); }

/* ===== SECTION HEADERS ===== */
.hub-section {
    scroll-margin-top: 80px;
    margin-bottom: 3rem;
}
.hub-section-head {
    display: flex; align-items: baseline; gap: 0.75rem;
    margin: 0 0 0.4rem;
    flex-wrap: wrap;
}
.hub-section-title {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text);
    text-transform: none;
}
.hub-section-anchor {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    padding: 2px 10px;
    border-radius: 50px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
}
.hub-section-desc {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    max-width: 720px;
}

/* ===== GRID ===== */
.hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}

/* ===== SUBGROUP (within section) ===== */
.hub-subgroup {
    margin-top: 2rem;
}
.hub-subgroup:first-of-type { margin-top: 0; }
.hub-subgroup-head {
    display: flex; align-items: center; gap: 0.6rem;
    margin: 0 0 1rem;
}
.hub-subgroup-title {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.hub-subgroup-line {
    flex: 1; height: 1px;
    background: var(--border);
}

/* ===== CARDS ===== */
.hub-card {
    display: flex; flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    text-decoration: none;
    color: var(--text);
    transition: all var(--t);
    position: relative;
    overflow: hidden;
}
.hub-card:hover {
    border-color: var(--border-hover);
    background: var(--bg-card-hover);
    transform: translateY(-2px);
}
.hub-card.disabled {
    cursor: not-allowed; opacity: 0.55;
}
.hub-card.disabled:hover {
    transform: none;
    border-color: var(--border);
    background: var(--bg-card);
}

.hub-card-icon {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-xs);
    margin-bottom: 1rem;
}
.hub-card[data-cat="lgpd"] .hub-card-icon {
    background: rgba(240,98,146,0.12);
    color: var(--hl-pink);
}
.hub-card[data-cat="ia"] .hub-card-icon {
    background: rgba(100,181,246,0.12);
    color: var(--hl-blue);
}
.hub-card[data-cat="proj"] .hub-card-icon {
    background: rgba(129,199,132,0.12);
    color: var(--hl-green);
}

.hub-card h3 {
    font-size: 1.1rem; font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 0.5rem;
}
.hub-card p {
    font-size: 0.9rem; color: var(--text-secondary);
    line-height: 1.5; flex-grow: 1;
    margin-bottom: 1rem;
}
.hub-card-footer {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.5rem;
}
.hub-badge {
    display: inline-flex; align-items: center;
    padding: 3px 10px; border-radius: 50px;
    font-size: 0.7rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.hub-badge.cat-lgpd { background: rgba(240,98,146,0.12); color: var(--hl-pink); }
.hub-badge.cat-ia { background: rgba(100,181,246,0.12); color: var(--hl-blue); }
.hub-badge.cat-proj { background: rgba(129,199,132,0.12); color: var(--hl-green); }
.hub-badge.live { background: rgba(34,197,94,0.12); color: var(--green); }
.hub-badge.soon { background: rgba(255,255,255,0.05); color: var(--text-muted); }
.hub-badge.pdf {
    background: rgba(239,68,68,0.12);
    color: var(--red);
    gap: 4px;
}
.hub-badge.pdf svg {
    width: 11px; height: 11px;
    stroke: currentColor;
    stroke-width: 2.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 600px) {
    .hub-cat-nav { width: 100%; justify-content: center; }
    .hub-cat-pill { padding: 0.4rem 0.85rem; font-size: 0.78rem; }
}

/* ===== BREADCRUMB (subhubs) ===== */
.hub-breadcrumb {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 0.5rem;
    margin: 1rem 0 1.25rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.hub-breadcrumb a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color var(--t);
}
.hub-breadcrumb a:hover { color: var(--accent); }
.hub-breadcrumb .sep { color: var(--text-muted); }

/* ===== LANDING (entry hub with 3 category cards) ===== */
.hub-landing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}
.hub-landing-card {
    display: flex; flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2rem;
    text-decoration: none;
    color: var(--text);
    transition: all var(--t);
    position: relative;
    overflow: hidden;
}
.hub-landing-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; height: 3px;
    background: var(--cat-color, var(--accent));
    opacity: 0.7;
}
.hub-landing-card:hover {
    border-color: var(--border-hover);
    background: var(--bg-card-hover);
    transform: translateY(-3px);
}
.hub-landing-card[data-cat="lgpd"] { --cat-color: var(--hl-pink); }
.hub-landing-card[data-cat="ia"] { --cat-color: var(--hl-blue); }
.hub-landing-card[data-cat="proj"] { --cat-color: var(--hl-green); }

.hub-landing-icon {
    width: 56px; height: 56px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm);
    margin-bottom: 1.25rem;
    background: rgba(255,255,255,0.04);
    color: var(--cat-color, var(--accent));
}
.hub-landing-icon svg { width: 28px; height: 28px; }

.hub-landing-card h3 {
    font-size: 1.4rem; font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 0.6rem;
}
.hub-landing-card p {
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.55;
    margin-bottom: 1.25rem;
}
.hub-landing-tools {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 1.5rem;
}
.hub-landing-tool {
    font-size: 0.72rem;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 50px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    color: var(--text-muted);
}
.hub-landing-footer {
    margin-top: auto;
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}
.hub-landing-count {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 500;
}
.hub-landing-cta {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.85rem; font-weight: 600;
    color: var(--cat-color, var(--accent));
}
.hub-landing-cta svg {
    width: 14px; height: 14px;
    transition: transform var(--t);
}
.hub-landing-card:hover .hub-landing-cta svg {
    transform: translateX(3px);
}