/* Páginas legales (/terms, /privacy, /refunds). Mismo sistema visual que la
   landing (css/style.css: fondo oscuro, acento en degradado), pensado para
   leer texto largo: columna angosta, interlineado amplio, sin decorativos
   animados. Cada página trae el texto en inglés y en español; se muestra el
   del idioma elegido (html[data-lang], ver js/legal.js). */

html[data-lang="en"] [data-lang-only="es"],
html[data-lang="es"] [data-lang-only="en"] { display: none !important; }

.legal-page { background: var(--bg); }
.legal-page .qivi-nav { border-bottom: 1px solid var(--border); }

.legal {
  max-width: 760px; margin: 0 auto; padding: 48px 24px 32px;
  font-size: 16px; line-height: 1.7; color: rgba(242, 243, 247, 0.82);
}
.legal h1 {
  font-size: 34px; line-height: 1.2; margin: 0 0 8px; color: var(--text); letter-spacing: -0.01em;
}
.legal .legal-updated { font-size: 14px; color: rgba(242, 243, 247, 0.5); margin: 0 0 28px; }
.legal .legal-intro {
  padding: 16px 18px; border: 1px solid var(--border); border-radius: 14px;
  background: rgba(255, 255, 255, 0.03); margin: 0 0 32px;
}
.legal h2 {
  font-size: 20px; line-height: 1.35; margin: 36px 0 10px; color: var(--text);
  scroll-margin-top: 24px;
}
.legal p { margin: 0 0 14px; }
.legal ul { margin: 0 0 14px; padding-left: 22px; }
.legal li { margin: 0 0 8px; }
.legal strong { color: var(--text); font-weight: 600; }
.legal a { color: #8fb0ff; text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: #b9ccff; }
.legal a:focus-visible, .legal-page .qivi-lang-btn:focus-visible, .legal-footer a:focus-visible {
  outline: 2px solid #8fb0ff; outline-offset: 2px; border-radius: 4px;
}

.legal-footer {
  max-width: 760px; margin: 24px auto 0; padding: 24px 24px 48px;
  border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between;
  font-size: 14px; color: rgba(242, 243, 247, 0.5);
}
.legal-footer nav { display: flex; flex-wrap: wrap; gap: 20px; }
.legal-footer a { color: rgba(242, 243, 247, 0.6); }
.legal-footer a[aria-current="page"] { color: var(--text); }

@media (max-width: 860px) {
  .legal { padding: 32px 16px 24px; font-size: 15.5px; }
  .legal h1 { font-size: 27px; }
  .legal h2 { font-size: 18px; margin-top: 30px; }
  .legal-footer { padding: 20px 16px 40px; }
}