/* Páginas legales. Se usa junto con landing.css y tokens.css. */
.legal { width: min(760px, 100% - 2 * var(--gutter)); margin: clamp(40px, 7vw, 88px) auto 0; }
.legal h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); line-height: 1; letter-spacing: -0.035em; max-width: none; }
.legal .meta { margin: 14px 0 0; color: var(--rb-text-muted); font-size: 0.95rem; }
.legal h2 { margin: 52px 0 12px; font-size: 1.4rem; line-height: 1.2; letter-spacing: -0.02em; }
.legal p, .legal li { max-width: 68ch; }
.legal ul { padding-left: 1.2em; margin: 0 0 1em; }
.legal li { margin-bottom: 0.6em; }
.legal a { text-decoration-thickness: 1px; }
.borrador { margin: 28px 0 0; padding: 14px 16px; border: 1px dashed var(--rb-warn); border-radius: var(--rb-radius-md); color: var(--rb-text); font-size: 0.95rem; }
.pendiente { padding: 0 3px; background: none; color: var(--rb-warn); outline: 1px dashed var(--rb-warn); outline-offset: 1px; border-radius: 2px; }
.toc { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 32px 0 0; padding: 16px 0; border-block: 1px solid var(--rb-border); font-size: 0.92rem; }
.toc a { color: var(--rb-text-muted); text-decoration: none; padding-block: 4px; }
.toc a:hover { color: var(--rb-text); text-decoration: underline; }
.legal code { font: var(--rb-fw-medium) 0.85em var(--rb-font-mono); }