/* Shared styles for the legal pages (privacidad.html, terminos.html).
   They follow the landing's design rules: tokens, header, footer, buttons and keyframes are copied
   from the <style> block of index.html (keep them in sync when the landing changes;
   test/design.test.mjs fails when a shared token differs). Light, like the desktop app: white page,
   stone text, teal-700 buttons and links, the app's system font stack, no dark theme.
   Layout: the page head is a flat --bg-2 band with a hairline under it, no glow or texture (the
   landing's effects policy: gradients only in its hero scene); the reading text below is still and
   keeps a calm column of about 70ch. From 1080px the table of contents is a sticky column on the
   left; below that it is a card above the text.
   Motion: one-shot entrances only (assets/legal.js adds html.reveal-ready while motion is
   allowed). Nothing loops; reduced motion and html[data-motion="off"] show everything in place. */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --bg-2: #fafaf9;
  --bg-3: #f0fdfa;
  --surface: #ffffff;
  --surface-2: #fafaf9;
  --ink: #1c1917;
  --soft: #57534e;
  --muted: #78716c;
  --line: #e7e5e4;
  --line-strong: rgba(13, 148, 136, .45);
  --brand: #0d9488;
  --brand-2: #0f766e;
  --accent: #0f766e;
  --accent-2: #115e59;
  --on-accent: #ffffff;
  --glow: rgba(13, 148, 136, .22);
  --glow-soft: rgba(13, 148, 136, .08);
  --hero-teal: #ccfbf1;
  --shadow: rgba(28, 25, 23, .14);
  --warn: #b45309;
  --warn-soft: #fffbeb;
  --focus: #0f766e;
  --glyph-bg: #0d9488;
  --glyph-ink: #ffffff;

  --font-display: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-text: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --gutter: clamp(16px, 4vw, 40px);
  --maxw: 1200px;
  --measure: 70ch;
  --toc-w: 250px;

  /* Corner radii: the app's scale (frontend/src/index.css: --radius 0.625rem and its @theme offsets),
     plus Tailwind's default rounded-xs for hairline bars. Large cards and panels use 2xl, like the app's Card. */
  --radius-xs: 2px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-2xl: 18px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.0625rem/1.7 var(--font-text);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
main { flex: 1 0 auto; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); text-wrap: balance; }
p { margin: 0; }
a { color: var(--accent); text-underline-offset: .18em; }
a:hover { color: var(--accent-2); }
code { font-family: var(--font-mono); font-size: .88em; overflow-wrap: anywhere; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: var(--radius-sm); }
.skip { position: absolute; left: 16px; top: -100px; z-index: 100; background: var(--accent); color: var(--on-accent); padding: 10px 14px; border-radius: var(--radius-md); font-weight: 700; }
.skip:focus { top: 12px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.muted { color: var(--muted); }
.small { font-size: .92rem; }

.wrap {
  width: 100%;
  max-width: calc(var(--maxw) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}

/* Values still to be filled in, if a page ever needs one again (see landing/README.md). */
[data-pending] {
  padding: 0 .3em;
  border: 1px dashed currentColor;
  border-radius: var(--radius-sm);
  background: var(--warn-soft);
  color: var(--warn);
  font-weight: 600;
}

/* ---------- Header (copied from index.html) ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: 12px 16px; min-height: 66px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.08rem; letter-spacing: -.02em; color: var(--ink); text-decoration: none; white-space: nowrap; }
.logo:hover { color: var(--ink); }
.glyph { flex: none; width: 34px; height: 34px; border-radius: var(--radius-lg); background: var(--glyph-bg); display: grid; place-items: center; }
.glyph svg { width: 20px; height: 20px; stroke: var(--glyph-ink); fill: none; stroke-width: 2; stroke-linejoin: round; }
.logo:hover .glyph svg { animation: wobble .6s var(--ease-spring); }
@keyframes wobble { 30% { transform: rotate(-12deg) scale(1.1); } 60% { transform: rotate(8deg); } }
.site-nav ul { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.site-nav a { position: relative; display: block; padding: 8px 10px; border-radius: var(--radius-md); color: var(--soft); font-size: .92rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.site-nav a::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 4px; height: 2px; border-radius: var(--radius-xs); background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease-out); }
.site-nav a:hover { color: var(--ink); }
.site-nav a:hover::after { transform: scaleX(1); }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.nav-toggle { display: none; width: 42px; height: 42px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface); color: var(--ink); align-items: center; justify-content: center; cursor: pointer; }
.nav-toggle svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
@media (max-width: 1100px) {
  .site-header .wrap { flex-wrap: wrap; }
  .site-nav { order: 3; width: 100%; overflow-x: auto; padding-bottom: 8px; }
  .site-nav ul { width: max-content; }
  .js .nav-toggle { display: inline-flex; }
  .js .site-nav { display: none; overflow: visible; }
  .js .site-nav[data-open] { display: block; }
  .js .site-nav ul { flex-direction: column; width: auto; padding-block: 4px 12px; }
  .js .site-nav a { padding: 12px 10px; font-size: 1.05rem; }
}

.btn { display: inline-flex; align-items: center; gap: 12px; padding: 13px 20px; border-radius: var(--radius-xl); font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none; border: 1px solid transparent; cursor: pointer; font-family: inherit; transition: background-color .2s ease, border-color .2s ease; }
.btn svg { flex: none; width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-sm { padding: 9px 14px; font-size: .92rem; border-radius: var(--radius-lg); }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { color: var(--on-accent); background: var(--accent-2); }

/* ---------- Page head: a flat band ---------- */
.page-hero {
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(36px, 6vw, 72px) clamp(40px, 6vw, 80px);
}

/* ---------- Document layout ---------- */
.page-hero-in, .doc-layout { max-width: calc(var(--measure) + 2 * var(--gutter)); }
.doc-layout { display: grid; gap: 28px; padding-block: clamp(28px, 5vw, 56px) clamp(48px, 7vw, 96px); }
.doc-head, .toc, .doc { min-width: 0; }
@media (min-width: 1080px) {
  .page-hero-in, .doc-layout {
    max-width: calc(var(--toc-w) + 56px + var(--measure) + 2 * var(--gutter));
    display: grid;
    grid-template-columns: var(--toc-w) minmax(0, var(--measure));
    column-gap: 56px;
  }
  .doc-head, .doc { grid-column: 2; }
  .toc { grid-column: 1; grid-row: 1; align-self: start; position: sticky; top: 92px; max-height: calc(100vh - 116px); overflow-y: auto; }
}

.doc-head { display: flex; flex-direction: column; gap: 14px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: var(--radius-xs); background: var(--accent); }
.doc-head h1 { font-size: clamp(2.2rem, 1.4rem + 3vw, 3.6rem); font-weight: 800; line-height: 1; letter-spacing: -.045em; }
.lead { font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); color: var(--soft); }
.updated { font-size: .92rem; color: var(--muted); }

/* ---------- Table of contents ---------- */
.toc { padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius-2xl); background: var(--surface); }
.toc-title { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.toc ol { margin: 0; padding-left: 1.6em; display: grid; gap: 4px; font-size: .94rem; line-height: 1.45; }
.toc li::marker { color: var(--muted); font-variant-numeric: tabular-nums; }
.toc a { color: var(--soft); text-decoration: none; transition: color .2s ease; }
.toc a:hover { color: var(--accent); text-decoration: underline; }
/* legal.js marks the section being read. */
.toc a[aria-current] { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.toc li:has(> a[aria-current])::marker { color: var(--accent); }
@media (min-width: 640px) and (max-width: 1079.98px) {
  .toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
}

/* ---------- Document text ---------- */
.doc > section { padding-top: 30px; margin-top: 30px; border-top: 1px solid var(--line); }
.doc > section:first-child { margin-top: 0; }
.doc h2 { display: flex; gap: .5em; font-size: clamp(1.3rem, 1.15rem + .6vw, 1.55rem); font-weight: 700; line-height: 1.25; letter-spacing: -.02em; margin-bottom: 14px; }
.doc h2 .n { color: var(--accent); font-variant-numeric: tabular-nums; }
.doc h3 { font-size: 1.06rem; font-weight: 700; letter-spacing: -.01em; margin: 22px 0 8px; }
.doc p, .doc ul, .doc ol, .doc dl { margin: 0 0 14px; }
.doc p:last-child, .doc ul:last-child, .doc ol:last-child, .doc dl:last-child { margin-bottom: 0; }
.doc p, .doc li, .doc dd { color: var(--soft); }
.doc strong { color: var(--ink); font-weight: 600; }
.doc ul, .doc ol { padding-left: 1.3em; }
.doc li + li { margin-top: 6px; }
.doc li::marker { color: var(--accent); }

.summary { padding: 22px 24px; border: 1px solid var(--glow); border-radius: var(--radius-2xl); background: var(--surface); }
.doc > section.summary { margin-top: 0; padding-top: 22px; border-top: 1px solid var(--glow); }
.summary h2 { font-size: 1.1rem; margin-bottom: 10px; }

/* Provider cards: a definition list instead of a table, so it never scrolls sideways on a phone. */
.cards { display: grid; gap: 12px; padding: 0; }
.cards > div { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); }
.cards dt { color: var(--ink); font-weight: 700; }
.cards dd { margin: 4px 0 0; font-size: .97rem; }
.cards dd + dd { margin-top: 6px; }

/* ---------- Footer (copied from index.html) ---------- */
.site-footer { padding-block: 48px calc(40px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--bg); }
.foot { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.foot p { max-width: 65ch; }
/* Footer column titles are paragraphs, not headings, styled like the h3s they replaced. */
.foot .foot-title { max-width: none; font-family: var(--font-display); text-wrap: balance; font-size: .78rem; font-weight: 700; line-height: 1.3; text-transform: uppercase; letter-spacing: .12em; color: var(--accent); margin-bottom: 10px; }
.foot ul { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; font-size: .94rem; }
.foot a { color: var(--soft); text-decoration: none; }
.foot a:hover { color: var(--accent); }
.foot a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.foot .logo { color: var(--ink); }
.fine { margin-top: 32px; font-size: .86rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; align-items: center; max-width: none; }

/* The cookie notice sits under the sticky header (z-index 50), so the open mobile menu is never
   covered by it. Scoped to these pages; index.html keeps cookie-notice.css as is. */
html .cookie-notice { z-index: 40; }

/* ---------- Motion: one-shot entrances ---------- */
/* Title words: the landing's kinetic headline (rise keyframe, 70ms stagger, --ease-out). */
.kinetic .w { display: inline-block; }
@keyframes rise { from { transform: translateY(.26em) rotate(3deg); } to { transform: none; } }
/* Blocks: the landing's pop keyframe values (role cards) plus a fade. The rotation of rise is
   kept for single words only; tilting whole paragraphs would read as decoration. */
@keyframes reveal { from { opacity: 0; transform: translateY(10px) scale(.98); } }

.reveal-ready [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(10px) scale(.98); }
/* backwards, not both: once played, a block keeps no leftover (identity) transform. */
.reveal-ready [data-reveal].is-in { animation: reveal .7s var(--ease-out) backwards; }
.reveal-ready .doc-head.is-in .kinetic .w { animation: rise .9s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}
html[data-motion="off"] { scroll-behavior: auto; }
html[data-motion="off"] [data-reveal],
html[data-motion="off"] .kinetic .w { opacity: 1 !important; transform: none !important; animation: none !important; }

/* ---------- Print ---------- */
@media print {
  :root { color-scheme: light; }
  html, body { background: #fff; color: #000; }
  .site-header, .skip, .toc, .site-footer, .cookie-notice { display: none !important; }
  .page-hero { background: none; border: 0; padding: 0 0 16px; }
  .doc p, .doc li, .doc dd, .lead, .updated { color: #000; }
  .page-hero-in, .doc-layout { display: block; max-width: none; padding: 0; }
  [data-reveal] { opacity: 1 !important; transform: none !important; animation: none !important; }
  a { color: #000; }
  .summary, .cards > div { box-shadow: none; border-color: #999; background: none; }
}