/* PAWHEX · Páginas legales (privacidad y términos). Usa los tokens de styles.css. */

.legal-body { background: var(--white); }

.legal-header { border-bottom: 1px solid var(--line); background: var(--white); position: sticky; top: 0; z-index: 10; }
.legal-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 68px; }
.legal-header .brand { color: var(--ink); }

.legal-page { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) 3rem; font-size: 1rem; line-height: 1.75; color: var(--ink-2); }
.legal-page h1 { font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.6rem); font-weight: 600; color: var(--ink); line-height: 1.2; margin-bottom: .5rem; text-wrap: balance; }
.legal-page h2 { font-size: 1.25rem; font-weight: 600; color: var(--ink); margin: 2.5rem 0 .75rem; }
.legal-page p { margin: 0 0 1rem; }
.legal-page ul, .legal-page ol { margin: 0 0 1rem; padding-left: 1.25rem; }
.legal-page ul { list-style: disc; }
.legal-page ol { list-style: decimal; }
.legal-page li { margin-bottom: .45rem; padding-left: .25rem; }
.legal-page strong { color: var(--ink); font-weight: 600; }
.legal-page a { color: var(--teal-ink); text-underline-offset: 3px; }
.legal-meta { font-size: .875rem; color: var(--ink-3); margin-bottom: 2rem !important; }

/* Campos por completar: visibles en ámbar */
mark.fill { background: var(--amber-bg); color: var(--amber); padding: .05rem .3rem; border-radius: 4px; font-weight: 500; }

.legal-note { margin: 1.5rem 0; padding: 1.25rem 1.4rem; border-radius: var(--r-md); background: var(--mist); color: var(--ink-2); }
.legal-note blockquote { margin: .75rem 0 0; padding-left: 1rem; border-left: 3px solid var(--teal); font-style: italic; }

.legal-footer { padding-block: 1.5rem 3rem; border-top: 1px solid var(--line); font-size: .875rem; color: var(--ink-3); }
.legal-footer a { color: var(--ink-2); }
.legal-footer a:hover { color: var(--teal-ink); }

@media (max-width: 640px) {
  .legal-header .btn { padding-inline: 1rem; }
}

@media print {
  .legal-header, .review-banner, .legal-footer { display: none; }
  mark.fill { background: none; color: inherit; }
}