/* Lightweight layout for legal pages (privacidad.html, terminos.html).
   Reuses the color/type variables and reset from styles.css. */

.legal-header{
  border-bottom:1px solid var(--border-light);
  padding:22px 0;
}
.legal-header .container{
  display:flex; align-items:center; justify-content:space-between;
}
.legal-header-actions{ display:flex; align-items:center; gap:16px; }
/* The legal pages always have a plain white/paper header (never over a dark
   hero), so force dark text here regardless of the homepage's light/dark
   header-on-scroll logic. */
.legal-header .brand-word,
.legal-header .lang-switch,
.legal-header .link-ghost{ color:var(--text-body-strong); border-color:rgba(26,26,26,.16); }

.legal-page{ padding:var(--section-pad) 0; background:var(--paper); }
.legal-page h1{ font-size:clamp(2rem,4vw,2.75rem); margin-bottom:8px; }
.legal-updated{ color:var(--text-body); opacity:.7; font-size:.9rem; margin-bottom:40px; }
.legal-page h2{ font-size:1.3rem; margin-top:44px; margin-bottom:14px; }
.legal-page p{ color:var(--text-body); font-size:1rem; }
.legal-page ul{ margin:0 0 1em; padding-left:0; list-style:none; }
.legal-page ul li{
  color:var(--text-body); font-size:1rem; line-height:1.7; padding-left:22px; position:relative; margin-bottom:8px;
}
.legal-page ul li::before{
  content:""; position:absolute; left:0; top:.65em; width:6px; height:6px; border-radius:50%; background:var(--gold-600);
}
.legal-page a{ color:var(--gold-800); font-weight:600; text-decoration:underline; }

.legal-callout{
  background:var(--gold-50); border:1px solid var(--gold-100); border-radius:var(--radius-sm);
  padding:18px 22px; font-size:.92rem; color:var(--text-body); margin-bottom:40px;
}

.legal-footer{ background:var(--ink); color:var(--text-muted-dark); padding:28px 0; }
.legal-footer .container{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.85rem; }
.legal-footer a{ color:var(--gold-300); }