/* ============================================================
   Artículo + hub de silo — estatuto demo
   ============================================================ */

.article-header {
    margin-bottom: var(--space-8);
    padding-top: var(--space-4);
}

.article-header__title {
    font-size: clamp(1.875rem, 5vw, 3rem);
    font-weight: var(--fw-black);
    max-width: 52rem;
}

.article-header__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--ink-mute);
}

.article-header__meta-item + .article-header__meta-item::before {
    content: '·';
    color: var(--sol-deep);
    margin-right: var(--space-4);
}

/* Cuerpo del artículo (tablas/blockquotes/listas ya vienen de base.css) */
.article-body {
    max-width: var(--max-width-content);
    font-size: var(--text-lg);
    line-height: 1.8;
}

.article-body h2 {
    scroll-margin-top: calc(var(--header-height) + var(--space-4));
}

.article-body h3 {
    scroll-margin-top: calc(var(--header-height) + var(--space-4));
}

/* Sidebar */
.article-sidebar {
    position: sticky;
    top: calc(var(--header-height) + var(--space-4));
}

@media (max-width: 900px) {
    .article-sidebar { position: static; }
}

/* TOC: caja papel cálido con borde tinta */
.article-toc {
    background: var(--paper-warm);
    border: var(--border-ink);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-6);
}

.article-toc__title {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--fw-medium);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sol-deep);
    margin-bottom: var(--space-3);
}

.article-toc__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.article-toc__list li {
    margin-bottom: var(--space-2);
}

.article-toc__list a {
    display: block;
    font-size: var(--text-sm);
    color: var(--ink-soft);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.article-toc__list a:hover {
    background: var(--sol-pale);
    color: var(--ink);
    text-decoration: none;
}

.article-toc__list a.toc-h3 {
    padding-left: var(--space-5);
    font-size: var(--text-xs);
}

/* Artículos relacionados (y otros grids de tarjetas de contenido) */
.article-related__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-4);
}

.article-related__card {
    display: block;
    background: var(--blanco);
    border: var(--border-ink);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-solid);
    padding: var(--space-5);
    color: inherit;
    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.article-related__card:hover {
    text-decoration: none;
    box-shadow: var(--shadow-solid-press);
    transform: translate(3px, 3px);
}

.article-related__card h4 {
    margin: 0 0 var(--space-2);
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
}

.article-related__card p {
    font-size: var(--text-sm);
    color: var(--ink-soft);
    margin-bottom: 0;
}

/* ---------- Hub de silo ---------- */
.silo-hub__header {
    max-width: 42rem;
    margin-bottom: var(--space-10);
}

.silo-hub__title {
    font-size: clamp(2rem, 5.5vw, 3.4rem);
    font-weight: var(--fw-black);
    margin-bottom: var(--space-3);
}

.silo-hub__desc {
    font-size: var(--text-lg);
    color: var(--ink-soft);
}

.silo-hub__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-5);
    margin-bottom: var(--space-16);
}

.silo-hub__card {
    display: flex;
    flex-direction: column;
}

.silo-hub__card-title {
    margin: 0 0 var(--space-2);
    font-size: var(--text-xl);
    line-height: var(--leading-snug);
}

.silo-hub__card-desc {
    font-size: var(--text-sm);
    color: var(--ink-soft);
    flex: 1;
}

.silo-hub__card-action {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
    font-weight: var(--fw-semibold);
    font-size: var(--text-sm);
    color: var(--ink);
}

.silo-hub__card:hover .silo-hub__card-action { color: var(--sol-deep); }

.silo-hub__card-action svg {
    width: 16px;
    height: 16px;
}

.silo-hub__empty {
    margin: var(--space-8) 0 var(--space-16);
    background: var(--paper-warm);
    border: var(--border-ink);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-6);
    max-width: 42rem;
}