/* =====================================================================
   TPD HUB — Página de legales (V8)
   Se carga solo en legales.html, además de styles.css (tokens, header,
   footer, botones y aviso de cookies son los mismos del hub).
   Texto de lectura: nada se mueve (sistema de movimiento, regla 4).
   ===================================================================== */
.legal-header .header-inner { height: 64px; }
.legal-header .btn-sm { min-height: 44px; }
@media (max-width: 420px) { .legal-header .brand-sep, .legal-header .brand-claim { display: none; } }

.legal { padding: clamp(40px, 7vw, 88px) 0 clamp(64px, 9vw, 120px); }
.legal-hero { max-width: 860px; }
.legal h1 { font-size: clamp(34px, 5.6vw, 64px); font-weight: 900; }
.legal-lead { font-size: clamp(17px, 1.4vw, 19px); color: var(--text-2); margin-top: 20px; max-width: 640px; }
.legal-date { margin-top: 16px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

.legal-toc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 36px; }
.legal-toc a { display: flex; flex-direction: column; gap: 6px; min-height: 44px; padding: 14px 16px; border-radius: var(--radius-md); border: 1px solid var(--line-2); background: rgba(255,255,255,.025); color: var(--text); text-decoration: none; font-weight: 600; font-size: 15px; line-height: 1.25; transition: border-color var(--t-fast), background var(--t-fast); }
.legal-toc a:hover { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.06); }
.legal-toc .mono { font-size: 11px; font-weight: 500; letter-spacing: .14em; color: var(--muted); }
@media (max-width: 760px) { .legal-toc { grid-template-columns: 1fr 1fr; } }

.legal-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 0 56px; margin-top: clamp(40px, 6vw, 72px); align-items: start; }
.legal-body > .legal-sec { grid-column: 1; }
.legal-card { grid-column: 2; grid-row: 1 / span 4; position: sticky; top: 88px; padding: 20px 22px; border-radius: var(--radius-lg); background: var(--graphite); border: 1px solid var(--line-2); font-size: 14px; line-height: 1.55; color: var(--text-2); }
.legal-card-t { font-size: 16px; letter-spacing: -.01em; color: var(--text); margin-bottom: 12px; line-height: 1.2; }
.legal-data { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.legal-data b { color: var(--text); }
.legal-card a { color: var(--text); overflow-wrap: anywhere; }
@media (max-width: 1000px) {
  .legal-body { grid-template-columns: minmax(0, 1fr); }
  .legal-card { grid-column: 1; grid-row: auto; position: static; margin-bottom: 32px; }
}

.legal-sec { max-width: 760px; padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--line); color: var(--text-2); font-size: 16px; line-height: 1.7; }
.legal-sec + .legal-sec { margin-top: clamp(24px, 3vw, 40px); }
.legal-n { font-size: 12px; letter-spacing: .18em; color: var(--muted); margin-bottom: 8px; }
.legal-sec h2 { font-size: clamp(26px, 3.2vw, 36px); font-weight: 900; color: var(--text); margin-bottom: 18px; }
.legal-sec h3 { font-size: 18px; letter-spacing: -.015em; color: var(--text); margin: 32px 0 10px; line-height: 1.25; }
.legal-sec p + p { margin-top: 12px; }
.legal-sec strong { color: var(--text); }
.legal-sec a:not(.btn):not(.link-wa) { color: var(--text); text-underline-offset: 3px; }
.legal-sec ul { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 10px; }
.legal-sec code { font-family: var(--font-mono); font-size: 13px; color: #d8d0ff; background: var(--steel); padding: 2px 6px; border-radius: 6px; white-space: nowrap; }
.legal-inline-btn { display: inline; padding: 0; background: none; border: 0; color: var(--text); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.legal-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 16px !important; }
.legal-actions .btn { min-height: 44px; }
.legal-wa { display: inline-flex; align-items: center; min-height: 44px; border-bottom: 0; text-decoration: underline; text-underline-offset: 4px; }
.legal-note { font-size: 13px; color: var(--muted); }

.legal-table { margin-top: 14px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); }
.legal-table table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.legal-table th { text-align: left; font: 500 11px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); background: rgba(255,255,255,.03); padding: 10px 14px; border-bottom: 1px solid var(--line); }
.legal-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.legal-table tr:last-child td { border-bottom: 0; }
.legal-table td:first-child { color: var(--text); }
.legal-table:focus-visible { outline-offset: 2px; }

.legal-legend { margin-top: 32px; padding: 18px 20px; border-left: 2px solid var(--violet); background: rgba(123,92,255,.07); border-radius: 0 var(--radius-md) var(--radius-md) 0; font-size: 14px; line-height: 1.6; }
.legal-legend-t { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); margin-bottom: 8px; }

html { scroll-padding-top: 84px; }

/* V10 · Modo día */
[data-theme="light"] .legal-toc a { background: #fff; }
[data-theme="light"] .legal-toc a:hover { border-color: rgba(17, 17, 17, .4); background: #f4f4f8; }
[data-theme="light"] .legal-sec code { color: #4a2fcf; }
[data-theme="light"] .legal-table th { background: rgba(17, 17, 17, .03); }