/* Documentos legales (pages/terms.html, privacy.html, offer.html).
   El cuerpo lo pinta la build desde docs/legal/*.md (tools/landing/lib.mjs):
   h1/h2/h3, párrafos con número de cláusula enlazable, listas y tablas. */

.legal-head { padding-bottom: 8px; }
.legal-switch { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.legal-switch a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px;
  border: 1px solid var(--line); color: var(--soft); text-decoration: none; font-size: 14.5px;
}
.legal-switch a:hover { border-color: var(--gold); color: var(--text-strong); }
.legal-switch a[aria-current="page"] { border-color: var(--gold); color: var(--gold-text); background: var(--surface); }

.legal {
  max-width: var(--wrap); margin: 0 auto; padding: 24px var(--gutter) 104px;
  display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 48px; align-items: start;
}
.legal-toc {
  position: sticky; top: calc(var(--header-h) + 16px); max-height: calc(100vh - var(--header-h) - 32px); overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--line);
}
.legal-toc a {
  padding: 6px 14px; margin-left: -1px; border-left: 2px solid transparent;
  color: var(--soft); text-decoration: none; font-size: 14px; line-height: 1.35;
}
.legal-toc a:hover { color: var(--text-strong); border-left-color: var(--gold); }

.legal-body { min-width: 0; max-width: 78ch; color: var(--soft); font-size: 16px; line-height: 1.65; overflow-wrap: break-word; }
.legal-body > :first-child { margin-top: 0; }
.legal-title {
  margin: 0 0 12px; font-family: var(--f-display); font-weight: 400;
  font-size: clamp(28px, calc(3vw + 16px), 52px); line-height: 1.1; color: var(--text-strong); text-wrap: balance;
  overflow-wrap: normal; hyphens: auto;
}
.legal-body h2, .legal-body h3, .legal-clause, .legal-alias { scroll-margin-top: calc(var(--header-h) + 16px); }
/* Ancla estable extra delante de un título (p. ej. offer.html#refund). */
.legal-alias { display: block; height: 0; }
.legal-body h2 {
  margin: 40px 0 14px; padding-top: 20px; border-top: 1px solid var(--line);
  font-family: var(--f-display); font-weight: 400; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.15; color: var(--text-strong);
}
.legal-body h3 { margin: 24px 0 10px; font-size: 18px; font-weight: 600; color: var(--text-strong); }
.legal-anchor { color: inherit; text-decoration: none; }
.legal-anchor:hover { color: var(--gold-hover); }
.legal-body p { margin: 0 0 12px; }
.legal-num { margin-right: 2px; font-family: var(--f-mono); font-weight: 500; font-size: .92em; color: var(--gold-text); text-decoration: none; }
.legal-num:hover { text-decoration: underline; text-underline-offset: 3px; }
.legal-clause:target { background: var(--surface); outline: 1px solid var(--line-strong); outline-offset: 6px; }
.legal-body ul, .legal-body ol { margin: 0 0 14px; padding-left: 24px; display: flex; flex-direction: column; gap: 6px; }
.legal-body li::marker { color: var(--gold); }
.legal-body strong { color: var(--text-strong); font-weight: 600; }
.legal-body a:not(.legal-num):not(.legal-anchor) { color: var(--gold-text); text-underline-offset: 3px; }
.legal-body a:not(.legal-num):not(.legal-anchor):hover { color: var(--gold-hover); }
.legal-body code { font-family: var(--f-mono); font-size: .9em; color: var(--text); }
.legal-ph { background: none; color: var(--gold-hover); border-bottom: 1px dashed var(--gold-deep); }

.legal-table { margin: 0 0 16px; overflow-x: auto; border: 1px solid var(--line); }
.legal-table table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; }
.legal-table th, .legal-table td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.legal-table tr:last-child td { border-bottom: 0; }
.legal-table th { font-family: var(--f-mono); font-weight: 500; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: var(--surface); }
.legal-table td:first-child { color: var(--text); min-width: 140px; }

@media (max-width: 1080px) {
  .legal { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .legal-toc {
    position: static; max-height: none; flex-direction: row; overflow-x: auto; gap: 8px;
    border-left: 0; padding-bottom: 4px; scrollbar-width: none;
  }
  .legal-toc::-webkit-scrollbar { display: none; }
  .legal-toc a { flex: none; max-width: 70vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; border: 1px solid var(--line); padding: 8px 12px; }
  .legal-toc a:hover { border-color: var(--gold); }
}
@media (max-width: 720px) {
  .legal { padding-bottom: 72px; }
  .legal-body { font-size: 15.5px; }
  .legal-switch a { flex: 1 1 auto; justify-content: center; }
  /* Tablas: cada fila como ficha; el título de columna sale de data-label. */
  .legal-table { overflow: visible; border: 0; }
  .legal-table table, .legal-table tbody, .legal-table tr, .legal-table td { display: block; width: 100%; }
  .legal-table thead { display: none; }
  .legal-table tr { margin-bottom: 12px; border: 1px solid var(--line); background: var(--surface); }
  .legal-table td { padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: 14.5px; }
  .legal-table tr td:last-child { border-bottom: 0; }
  .legal-table td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  }
  .legal-table td:first-child { min-width: 0; color: var(--text-strong); font-weight: 600; }
}

/* Impresión: sólo el documento, en negro sobre blanco. */
@media print {
  .legal-head .legal-switch, .legal-head .page-note, .legal-toc, .site-footer, .skip-link { display: none !important; }
  .legal-head { padding: 0; }
  .legal-head .eyebrow { color: #000; }
  .legal { display: block; padding: 0; max-width: none; }
  .legal-body { max-width: none; color: #000; font-size: 11pt; line-height: 1.45; }
  .legal-title, .legal-body h2, .legal-body h3, .legal-body strong, .legal-num, .legal-ph, .legal-table td:first-child { color: #000; }
  .legal-body h2 { border-top-color: #999; break-after: avoid; page-break-after: avoid; }
  .legal-body h3 { break-after: avoid; page-break-after: avoid; }
  .legal-body a { color: #000 !important; text-decoration: none; }
  .legal-clause:target { background: none; outline: 0; }
  .legal-table { overflow: visible; border-color: #999; }
  .legal-table th { background: none; color: #000; }
  .legal-table th, .legal-table td { border-bottom-color: #999; }
  .legal-table tr { break-inside: avoid; page-break-inside: avoid; }
}