/* articulo.css — long-form reading layout for the Análisis articles.
   Light editorial theme, consistent with perfil/contacto/aviso. */
.art { background: var(--paper); color: var(--ink); }
.art-top { padding-top: 116px; }
.art-head { max-width: 760px; }
.art-kicker { font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-700); margin-top: 22px; }
.art-h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(34px, 5.4vw, 58px); line-height: 1.06; letter-spacing: -.015em; color: var(--ink); margin: 14px 0 0; }
.art-meta { display: flex; align-items: center; gap: 12px; margin-top: 20px; font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted); }
.art-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gold-500); }
.art-rulewrap { border-top: 1px solid var(--border-strong); margin-top: 34px; }

.art-body { max-width: 720px; padding: 8px 0 30px; }
.art-body p { font-family: var(--font-sans); font-size: 18px; line-height: 1.78; color: var(--n-800); margin-top: 26px; text-wrap: pretty; }
.art-body p.lead { font-size: 21px; line-height: 1.62; color: var(--ink); margin-top: 30px; }
.art-body p.lead::first-letter { initial-letter: 2; -webkit-initial-letter: 2; font-family: var(--font-display); font-weight: 600; color: var(--gold-700); margin-right: 10px; }
.art-h2 { font-family: var(--font-display); font-size: 27px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; margin-top: 48px; padding-top: 30px; border-top: 1px solid var(--border); }

.art-foot { max-width: 720px; padding: 8px 0 90px; }
.art-cta { background: var(--bg-dark); border-radius: var(--r-lg); padding: 32px 30px; margin-top: 8px; }
.art-cta h3 { font-family: var(--font-display); font-size: 24px; font-weight: 600; color: var(--fg-on-dark); }
.art-cta p { font-size: 14.5px; line-height: 1.6; color: var(--fg-on-dark-muted); margin: 10px 0 18px; max-width: 460px; }
.art-back { display: inline-flex; align-items: center; gap: 8px; margin-top: 34px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--gold-700); }

.art-related { margin-top: 56px; }
.art-related .rl-lbl { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-700); margin-bottom: 8px; }
/* The shared .related component defaults to near-white text (for the dark home).
   On the light article page (body.art) make titles/borders dark so they're
   legible — mirrors the .pb modifier used by the light practice pages. */
.art .related .rt { color: var(--ink); }
.art .related a { border-color: var(--border-strong); }