/* ───────── Hub de recursos y artículos ───────── */
.art--hub { max-width: 760px; margin: 0 auto; padding: clamp(2.4rem, 6vw, 4rem) 1.25rem clamp(4rem, 8vw, 6rem); }
.art--hub h1 { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.08; margin-bottom: .9rem; }
.art--hub h2 { font-size: clamp(1.45rem, 3.4vw, 1.9rem); margin: 2.4rem 0 .8rem; scroll-margin-top: 5rem; }
.art--hub h3 { font-size: 1.08rem; margin: 1.5rem 0 .5rem; }
.art--hub p, .art--hub li { color: var(--muted); font-size: 1.02rem; line-height: 1.85; }
.art--hub p { margin-bottom: 1rem; }
.art--hub ul, .art--hub ol { margin: 0 0 1.1rem 1.2rem; }
.art--hub li { margin-bottom: .45rem; }
.art--hub p strong, .art--hub li strong { color: var(--ink); }
.art--hub a { color: var(--green); }
.art-crumbs { font-size: .8rem; color: var(--faint); margin-bottom: 1rem; }
.art-crumbs a { color: var(--faint); text-decoration: none; }
.art-crumbs a:hover { color: var(--green); }
.art-meta { font-size: .85rem; color: var(--faint); margin-bottom: 1.6rem; }
.art-meta strong { color: var(--muted); }
.art-toc { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 1.1rem 1.4rem; margin: 1.6rem 0 2rem; }
.art-toc p { font-family: var(--display); font-weight: 700; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: .5rem; }
.art-toc ol { margin: 0 0 0 1.1rem; }
.art-toc li { margin-bottom: .3rem; font-size: .92rem; }
.art-toc a { color: var(--muted); text-decoration: none; }
.art-toc a:hover { color: var(--green); }
.art-tablewrap { overflow-x: auto; margin: 1rem 0 1.4rem; border: 1px solid var(--line); border-radius: 14px; }
.art-table { width: 100%; border-collapse: collapse; background: var(--card); font-size: .92rem; min-width: 480px; }
.art-table th { text-align: left; font-family: var(--display); font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); background: var(--card2); padding: .7rem .9rem; }
.art-table td { padding: .65rem .9rem; border-top: 1px solid var(--line); color: var(--muted); }
.art-table td:first-child { color: var(--ink); font-weight: 600; }
.art-cta { background: var(--card2); border: 1px solid var(--line2); border-radius: 18px; padding: 1.5rem 1.6rem; margin: 2.2rem 0; text-align: center; }
.art-cta p { color: var(--ink); font-size: 1.02rem; margin-bottom: 1rem; }
.art-cta small { display: block; color: var(--faint); font-size: .8rem; margin-top: .8rem; }
.art-cta--suave { background: var(--card); }
.art-rel { border-top: 1px solid var(--line); margin-top: 2.6rem; padding-top: 1.6rem; }
.art-rel > p { font-family: var(--display); font-weight: 700; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: .9rem; }
.art-rel__card { display: block; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: .95rem 1.2rem; margin-bottom: .6rem; text-decoration: none; transition: border-color .25s, transform .25s; }
.art-rel__card:hover { border-color: var(--green); transform: translateY(-2px); }
.art-rel__card span { display: block; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--green); font-weight: 700; margin-bottom: .2rem; }
.art-rel__card b { color: var(--ink); font-family: var(--display); font-size: 1rem; line-height: 1.35; }
/* ── Hub /recursos ── */
.hub { max-width: 1060px; margin: 0 auto; padding: clamp(2.6rem, 6vw, 4.4rem) 1.25rem clamp(4rem, 8vw, 6rem); }
.hub h1 { font-size: clamp(2.1rem, 5.4vw, 3.3rem); margin-bottom: .7rem; }
.hub > p { color: var(--muted); max-width: 62ch; margin-bottom: 2rem; }
.hub__grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.hub__card { display: flex; flex-direction: column; gap: .5rem; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 1.4rem 1.5rem; text-decoration: none; transition: border-color .25s, transform .25s; }
.hub__card:hover { border-color: var(--green); transform: translateY(-3px); }
.hub__card span { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--green); font-weight: 700; }
.hub__card b { color: var(--ink); font-family: var(--display); font-size: 1.16rem; line-height: 1.3; }
.hub__card p { color: var(--muted); font-size: .9rem; line-height: 1.65; margin: 0; }
.hub__card small { color: var(--faint); font-size: .78rem; margin-top: auto; padding-top: .4rem; }