/* ============================================================================
   ReelEstate — páginas legales (términos, privacidad). Va después de ui.css.
   ========================================================================= */

.legal { max-width: 760px; margin: 0 auto; padding: clamp(64px, 10vw, 110px) var(--gut) 96px; }
.legal h1 { font-size: clamp(36px, 5vw, 56px); line-height: 1.02; margin-top: 14px; }
.legal p.legal-meta { margin-top: 18px; line-height: 1.6; }

.legal-card {
  margin-top: 40px; padding: clamp(24px, 4vw, 44px);
  border: 1px solid var(--line); border-radius: 18px; background: var(--card);
}
.legal h2 { margin-top: 2.2em; font-size: 22px; line-height: 1.2; letter-spacing: -.02em; }
.legal-card > h2:first-child { margin-top: 0; }
.legal p, .legal li { font-size: 16px; line-height: 1.65; color: var(--ink-2); }
.legal p { margin-top: 1em; }
.legal ul { margin: 1em 0 0; padding-left: 1.25em; }
.legal li { margin-top: .45em; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* Datos del titular que todavía hay que completar antes de publicar. Se ven
   a propósito: una cifra o un nombre inventado en un documento legal es peor
   que un hueco a la vista. */
.legal mark.todo {
  background: color-mix(in srgb, var(--hold) 22%, transparent);
  color: var(--ink);
  padding: 1px 6px; border-radius: 5px;
  font-family: var(--mono); font-size: .86em;
}

.legal-table { width: 100%; margin-top: 1.2em; border-collapse: collapse; font-size: 15px; }
.legal-table th, .legal-table td {
  text-align: left; vertical-align: top; padding: 11px 12px 11px 0;
  border-bottom: 1px solid var(--line); color: var(--ink-2);
}
.legal-table th { color: var(--ink); font-weight: 600; width: 30%; }
.foot .legal-row { border-top: 0; margin-top: 0; }
.foot .legal-row a:hover { color: var(--ink); }