/* ══════════════════════════════════════════════════════════════════════════
   Celestial Bound — páginas legales (privacidad · términos · reembolsos).

   HTML plano en public/: Vite copia public/ a dist/ verbatim, así que estas
   páginas existen igual en dev (:5173) y en prod sin tocar rollupOptions y sin
   entrar al bundle de Svelte. Un documento legal no necesita runtime.

   Tokens y base (body, h1-h4, a, hr): /brand/styles.css. Esta hoja sólo arma
   la columna de lectura. No define colores ni tipografías propios.

   Bilingüe sin diccionario: los dos idiomas viven en el MARKUP, uno por
   <article data-lang>, y el inglés arranca con [hidden]. Sin JS se lee el
   español, que es el idioma del lanzamiento (es-CR) — el mismo criterio que
   la landing.
   ══════════════════════════════════════════════════════════════════════════ */

body { background: var(--bg-page); }

.legal-shell {
  max-width: var(--measure-read);
  margin: 0 auto;
  padding: var(--space-8) clamp(20px, 6vw, 48px) var(--space-24);
}

/* ── cabecera ─────────────────────────────────────────────────────────── */
.legal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4) var(--space-10);
}
.legal-top .wordmark { border-bottom: 0; display: block; }
/* El PNG del logotipo trae su propio aire adentro (≈3× la mancha): 58px de
   <img> son ~19px de logotipo real. No bajar de acá o queda ilegible. */
.legal-top .wordmark img { display: block; width: auto; height: 58px; }

.legal-langs { display: flex; gap: var(--space-2); font: var(--type-meta); }
.legal-langs button {
  font: inherit;
  color: var(--text-faint);
  background: none;
  border: 0;
  padding: 4px 6px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.legal-langs button[aria-pressed="true"] { color: var(--text-title); }
.legal-langs button:focus-visible { outline: 0; box-shadow: var(--ring-focus); }

/* ── documento ────────────────────────────────────────────────────────── */
.legal-doc { font: var(--type-body); color: var(--text-body); }
.legal-doc h1 { font: var(--type-title); margin-bottom: var(--space-2); }
.legal-doc h2 {
  font: var(--type-subhead);
  margin-top: var(--space-10);
  padding-top: var(--space-4);
  border-top: var(--border-hairline);
}
.legal-doc h3 { font: var(--type-ui); color: var(--text-title); margin-top: var(--space-6); }
.legal-doc p, .legal-doc ul, .legal-doc ol { margin: var(--space-3) 0; }
.legal-doc li { margin-bottom: var(--space-2); }
.legal-doc ul, .legal-doc ol { padding-left: 1.25em; }
.legal-doc strong { color: var(--text-title); }

.legal-updated { font: var(--type-meta); color: var(--text-faint); text-transform: uppercase; letter-spacing: .08em; }
.legal-lede { font: var(--type-lede); color: var(--text-muted); margin-top: var(--space-4); }

/* Dato duro (correo, plazo, nombre) fuera del párrafo, para que se encuentre
   sin leer la sección entera. */
.legal-card {
  border: var(--border-hairline);
  padding: var(--space-5);
  margin: var(--space-6) 0;
  background: var(--bg-sunk, transparent);
}
.legal-card p { margin: var(--space-2) 0; }
.legal-card :first-child { margin-top: 0; }
.legal-card :last-child { margin-bottom: 0; }

/* La tabla de proveedores es la única pieza ancha del documento: en un teléfono desborda
   y se lee cortada. El scroll va en un contenedor propio — la página nunca scrollea de lado. */
.legal-scroll { overflow-x: auto; margin: var(--space-4) 0; }
.legal-doc table { width: 100%; min-width: 34rem; border-collapse: collapse; margin: var(--space-4) 0; font: var(--type-body-sm); }
.legal-doc th, .legal-doc td { text-align: left; vertical-align: top; padding: var(--space-2) var(--space-3) var(--space-2) 0; border-bottom: var(--border-hairline); }
.legal-doc th { font: var(--type-meta); color: var(--text-faint); text-transform: uppercase; letter-spacing: .08em; }

/* ── pie ──────────────────────────────────────────────────────────────── */
.legal-foot {
  margin-top: var(--space-16);
  padding-top: var(--space-5);
  border-top: var(--border-hairline);
  font: var(--type-body-sm);
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: baseline;
}
.legal-foot nav { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.legal-foot .legal-here { color: var(--text-faint); }