/* Layout compartido por las páginas legales (términos, privacidad, responsiva).
   Importar después de design-system/tokens.css. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg0); color: var(--t1);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
.legal-header {
  max-width: 720px; margin: 0 auto; padding: 32px 24px 0;
  display: flex; align-items: center; justify-content: space-between;
}
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-dot {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--lime); display: flex; align-items: center; justify-content: center;
  font-size: 0.68rem; font-weight: 900; color: var(--bg0);
}
.logo-text { font-size: 0.95rem; font-weight: 700; letter-spacing: -0.03em; color: var(--t1); }
.back-link { font-size: 0.83rem; color: var(--t2); text-decoration: none; }
.back-link:hover { color: var(--t1); }

.legal-doc { max-width: 720px; margin: 0 auto; padding: 40px 24px 100px; }
.legal-doc h1 { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 8px; }
.legal-updated { font-size: 0.8rem; color: var(--t3); margin-bottom: 28px; }
.legal-doc h2 {
  font-size: 1.05rem; font-weight: 700; color: var(--t1);
  margin: 32px 0 10px;
}
.legal-doc p, .legal-doc li { font-size: 0.92rem; color: var(--t2); margin-bottom: 10px; }
.legal-doc ul, .legal-doc ol { padding-left: 20px; margin-bottom: 14px; }
.legal-doc strong { color: var(--t1); font-weight: 600; }
.legal-doc a { color: var(--lime); text-decoration: none; }
.legal-doc a:hover { text-decoration: underline; }
.legal-callout {
  background: var(--bg1); border: 1px solid var(--border); border-left: 3px solid var(--coral);
  border-radius: 10px; padding: 16px 18px; margin: 20px 0;
  font-size: 0.88rem; color: var(--t2);
}
.legal-callout strong { color: var(--coral); }
.legal-toc {
  background: var(--bg1); border: 1px solid var(--border); border-radius: 12px;
  padding: 18px 20px; margin-bottom: 8px;
}
.legal-toc div { font-size: 0.78rem; font-weight: 700; color: var(--t3); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 10px; }
.legal-toc a { display: block; font-size: 0.85rem; color: var(--t2); padding: 3px 0; text-decoration: none; }
.legal-toc a:hover { color: var(--lime); }