/*
 * Shared shell for the three legal documents (privacidad · terminos · cookies).
 *
 * One file rather than a <style> block per page: the documents are separate on
 * purpose, but they are the same object to the reader, and three copies of a
 * stylesheet is three chances for one of them to end up looking like a
 * different site.
 *
 * THEME. The pages ship the same pre-paint script index.html uses, which
 * stamps data-theme on <html> from the visitor's saved choice. So the palette
 * is defined three times over: dark as the ground, light under
 * prefers-color-scheme for anyone who never chose, and light again under an
 * explicit [data-theme="light"] so a saved choice beats the OS. The middle one
 * is guarded with :not([data-theme="dark"]) or a light OS would override
 * someone who deliberately picked dark. Before this the pages read only the OS
 * setting and a visitor who chose "Claro" on the site walked into a black room.
 */

:root {
  color-scheme: dark light;
  --bg: #0a0a0d;
  --fg: #f5f5f7;
  --accent: #ff2d55;
  --line: rgba(245, 245, 247, 0.14);
  --card: rgba(245, 245, 247, 0.04);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f7f7f8;
    --fg: #16161a;
    --line: rgba(22, 22, 26, 0.14);
    --card: rgba(22, 22, 26, 0.035);
  }
}

:root[data-theme="light"] {
  --bg: #f7f7f8;
  --fg: #16161a;
  --line: rgba(22, 22, 26, 0.14);
  --card: rgba(22, 22, 26, 0.035);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.65 Manrope, system-ui, -apple-system, sans-serif;
  -webkit-text-size-adjust: 100%;
}

main { max-width: 760px; margin: 0 auto; padding: 40px 20px 88px; }

a { color: var(--accent); }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.back { display: inline-block; margin-bottom: 22px; font-weight: 700; text-decoration: none; }

h1 { font-size: 30px; letter-spacing: -0.02em; margin: 0 0 6px; text-wrap: balance; }
h2 {
  font-size: 22px;
  letter-spacing: -0.015em;
  margin: 48px 0 10px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  scroll-margin-top: 20px;
}
h3 { font-size: 16.5px; margin: 26px 0 6px; scroll-margin-top: 20px; }

p, li { opacity: 0.88; }
li { margin-bottom: 6px; }

.muted { opacity: 0.6; font-size: 13.5px; }
.lang { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 13.5px; margin: 0 0 26px; }

/* The other two documents, on every page. They were one page until now; a
   reader who lands on Terms still needs a way to the privacy policy.
   A list rather than links separated by typed interpuncts: at phone width the
   interpuncts became their own flex items and wrapped on their own, leaving a
   stray "·" starting a line. The separator is drawn by the stylesheet and is
   suppressed wherever a row begins. */
.docnav { margin: 22px 0 8px; }
.docnav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  list-style: none;
  margin: 0;
  padding: 12px 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  font-size: 14.5px;
}
.docnav li { margin: 0; }
.docnav li + li::before { content: "·"; opacity: 0.4; margin-right: 16px; }
.docnav a { text-decoration: none; }
.docnav .here { opacity: 0.55; font-weight: 700; }

.toc { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; margin: 22px 0 8px; }
.toc ul { margin: 6px 0 0; padding-left: 18px; }
.toc a { text-decoration: none; }

/* Wide on a narrow phone: the table scrolls inside its own box rather than
   pushing the whole document sideways. */
.tablewrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14.5px; margin-top: 8px; }
th, td { text-align: left; padding: 7px 12px 7px 0; vertical-align: top; opacity: 0.88; border-bottom: 1px solid var(--line); }
th { opacity: 0.6; font-weight: 600; }

.callout {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  padding: 12px 16px;
  margin: 16px 0;
}
.callout p { margin: 0; }

footer { margin-top: 56px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13.5px; opacity: 0.6; }
