/* Páginas legales de HeyShop (/terminos, /privacidad, /reembolsos). Misma identidad que el portal (public/css/portal.css):
   papel porcelana, tinta azul noche, acento ultramar solo en links, foco y la página actual, chispa damasco solo en el sello,
   Gloock para títulos y la sans del sistema para leer. Se leen como un documento impreso: una columna angosta, mucho aire,
   secciones numeradas con filete fino. Sin estilos ni scripts en línea (la CSP no los deja). */

:root {
  --f-texto: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-display: "Gloock", "Iowan Old Style", Georgia, serif;

  --papel: oklch(98.3% 0.0045 85);
  --papel-hondo: oklch(95.2% 0.008 80);
  --tinta: oklch(22% 0.035 265);
  --tinta-2: oklch(40% 0.03 262);
  --tinta-3: oklch(50% 0.025 260);
  --filete: oklch(90.5% 0.008 80);
  --acento-texto: oklch(45% 0.2 270);
  --acento-suave: oklch(94.5% 0.03 270);
  --chispa: oklch(80% 0.115 62);
  --sobre-tinta: oklch(98.5% 0.004 85);
  --foco: color-mix(in oklch, oklch(45% 0.2 270) 75%, transparent);
  --lado: 20px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--papel-hondo); }
body {
  margin: 0 auto;
  max-width: 720px;
  min-height: 100dvh;
  background: var(--papel);
  color: var(--tinta);
  font: 400 1.0625rem/1.65 var(--f-texto);
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 760px) { body { box-shadow: 0 0 0 1px var(--filete), 0 30px 80px -40px oklch(22% 0.04 264 / 0.3); } }
h1, h2, p, ul, ol { margin: 0; }
a { color: var(--acento-texto); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 4px; }
.saltar { position: absolute; left: 12px; top: -60px; z-index: 9; background: var(--tinta); color: var(--sobre-tinta); padding: 10px 16px; border-radius: 999px; text-decoration: none; }
.saltar:focus { top: 12px; }

/* cabecera: la marca y las tres páginas */
.legal-cabecera { padding: 22px var(--lado) 0; }
.marca { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-display); font-size: 1.3125rem; letter-spacing: -0.01em; color: var(--tinta); text-decoration: none; }
.marca-sello { position: relative; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--tinta); color: var(--sobre-tinta); font-family: var(--f-display); font-size: 1.3125rem; line-height: 1; padding-bottom: 3px; }
.marca-sello::after { content: ""; position: absolute; right: 7px; bottom: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--chispa); }

.legal-nav { margin: 20px calc(-1 * var(--lado)) 0; padding: 0 var(--lado); overflow-x: auto; scrollbar-width: none; }
.legal-nav::-webkit-scrollbar { display: none; }
.legal-nav ul { display: flex; gap: 8px; list-style: none; padding: 0; }
.legal-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--filete); color: var(--tinta-2); font-size: 0.9375rem; font-weight: 550; text-decoration: none;
}
.legal-nav a:hover { border-color: var(--tinta-3); color: var(--tinta); }
.legal-nav a[aria-current="page"] { background: var(--acento-suave); border-color: transparent; color: var(--acento-texto); }

/* el documento */
.legal { padding: 36px var(--lado) 56px; }
.legal-titulo { font-family: var(--f-display); font-weight: 400; font-size: clamp(2.125rem, 8vw, 2.75rem); line-height: 1.08; letter-spacing: -0.015em; text-wrap: balance; }
.legal-fecha { margin-top: 12px; font-size: 0.875rem; color: var(--tinta-3); }
.legal-bajada { margin-top: 20px; font-size: 1.125rem; line-height: 1.55; color: var(--tinta-2); max-width: 36em; text-wrap: pretty; }

.legal-indice { margin-top: 28px; padding: 18px 20px; border-radius: 20px; background: var(--papel-hondo); }
.legal-indice-titulo { font-size: 0.75rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-3); }
.legal-indice ol { margin-top: 8px; padding-left: 1.4em; columns: 2 15em; column-gap: 24px; font-size: 0.9375rem; line-height: 1.5; }
.legal-indice li { break-inside: avoid; padding: 3px 0; }
.legal-indice a { color: var(--tinta); text-decoration: none; }
.legal-indice a:hover { color: var(--acento-texto); text-decoration: underline; }

.legal section { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--filete); scroll-margin-top: 16px; }
.legal h2 { font-family: var(--f-display); font-weight: 400; font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
.legal section p, .legal section ul { margin-top: 14px; max-width: 38em; text-wrap: pretty; }
.legal section ul { padding-left: 1.2em; }
.legal section li { margin-top: 8px; }
.legal section li::marker { color: var(--tinta-3); }
.legal strong { font-weight: 650; }

.legal-contacto { margin-top: 18px; padding: 18px 20px; border-radius: 20px; border: 1px solid var(--filete); max-width: 38em; }
.legal-contacto p { margin-top: 0; }
.legal-contacto p + p { margin-top: 6px; }

/* pie: quién está detrás */
.legal-pie { padding: 28px var(--lado) 40px; border-top: 1px solid var(--filete); font-size: 0.875rem; line-height: 1.6; color: var(--tinta-3); }
.legal-pie p + p { margin-top: 6px; }
.legal-pie a { color: var(--tinta-2); }
.legal-pie ul { display: flex; flex-wrap: wrap; gap: 4px 18px; list-style: none; padding: 0; margin-top: 12px; }

@media print {
  html, body { background: #fff; box-shadow: none; }
  .legal-nav, .saltar, .legal-indice { display: none; }
  .legal section { break-inside: avoid-page; }
}