/* ============================================================
   StorageIdol — Legal pages (privacidad · términos)
   Long-form document styles. Loaded AFTER tokens.css + styles.css,
   which already supply the shared nav, brand and footer; only the
   document shell lives here.

   Surface rhythm (keeps the landing's light/dark alternation):
     nav cream · hero INK · document cream · footer INK

   These pages carry NO reveal machinery and no required JS — the
   only script is the decorative scroll-progress bar, which rests
   at 0 width. Everything readable is readable without it.
   ============================================================ */

/* ---- Nav ----------------------------------------------------
   The legal pages ship no drawer toggle (the toggle is driven by
   index.html's inline IIFE), so two of styles.css's mobile rules
   have to be undone here:

   1. `.nav__cta` is hidden below 480 px because the drawer carries
      it. Without a drawer that leaves the bar with no route back,
      so it is forced visible at every width.
   2. The links use `.nav__legal`, NOT `.nav__links` — the latter
      becomes the drawer panel below 860 px and would vanish. Below
      720 px they fold away and the footer carries the navigation. */
.nav--legal .nav__cta { display: inline-flex; }

.nav__legal {
  display: flex; align-items: center; gap: 26px; margin-left: 14px;
  font: var(--ui-xs); font-variation-settings: "wdth" var(--wdth-cond);
  letter-spacing: .1em; text-transform: uppercase;
}
.nav__legal a { color: var(--slate); transition: color var(--dur-base) ease; }
.nav__legal a:hover { color: var(--accent-deep); }
.nav__legal a[aria-current="page"] {
  color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent);
  padding-bottom: 3px;
}

/* ---- Hero (ink) ------------------------------------------- */
.legal-hero { position: relative; background: var(--ink); color: var(--on-dark); overflow: hidden; }
/* Same layered field stack as the landing's ink sections (.metrics, .flow,
   .integr) — the subpages share the nav and footer, so a thinner backdrop
   here would read as an unfinished page rather than a quieter one. */
.legal-hero::before {
  content: ""; position: absolute; inset: 0;
  background: var(--bloom-dark), var(--field-warm-dark), var(--field-cool-dark);
  pointer-events: none;
}
.legal-hero__inner {
  position: relative; max-width: var(--max-width); margin: 0 auto;
  padding: 84px var(--gx) 72px;
}
.legal-hero .eyebrow { color: var(--on-dark-muted); }
.legal-hero .eyebrow::before { background: var(--accent-lift); }
.legal-hero__title {
  font: var(--display-dark); font-variation-settings: var(--axis-sharp);
  letter-spacing: -.026em; color: var(--on-dark-strong);
  margin: 22px 0 0; max-width: 22ch;
}
.legal-hero__lede {
  font: var(--lede); color: var(--on-dark-muted);
  margin: 22px 0 0; max-width: 58ch;
}

/* Meta strip — última actualización · versión · contacto */
.legal-hero__meta {
  display: flex; flex-wrap: wrap; gap: 22px 52px;
  margin: 40px 0 0; padding-top: 24px;
  border-top: 1px solid var(--hairline-dark);
}
.legal-hero__meta > div { display: grid; gap: 7px; }
.legal-hero__meta dt {
  font: var(--label); font-variation-settings: "wdth" var(--wdth-cond);
  letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-muted);
}
.legal-hero__meta dd { margin: 0; font: var(--ui-md); color: var(--on-dark-strong); }
.legal-hero__meta dd a { color: var(--accent-lift); }
.legal-hero__meta dd a:hover { color: var(--on-dark-strong); }

/* ---- Document shell -------------------------------------- */
/* Bloom as a fixed-height top band, not inset:0 — these documents run to
   several thousand px, and a radial stretched over that reads as nothing.
   Sized in px like .hero__glow / .lost__glow. It carries the wash under
   the § 01 panel; panels deeper in the document sit on flat cream and
   take their lift from the lit edge rather than from translucency. */
.legal-body { position: relative; background: var(--canvas); }
.legal-body::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 620px;
  background: var(--bloom-light), var(--field-warm), var(--field-cool);
  pointer-events: none;
}
.legal-body__inner {
  position: relative;
  max-width: var(--max-width); margin: 0 auto;
  padding: 64px var(--gx) 100px;
  display: grid; grid-template-columns: 236px minmax(0, 1fr);
  gap: 68px; align-items: start;
}

/* ---- Índice (sticky rail) --------------------------------- */
/* The index is longer than the viewport on both documents, so it scrolls
   inside itself rather than sliding away with the prose. */
.legal-toc {
  position: sticky; top: 96px;
  max-height: calc(100vh - 132px); overflow-y: auto;
  scrollbar-width: thin;
}
.legal-toc__title {
  font: var(--label); font-variation-settings: "wdth" var(--wdth-cond);
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  padding-bottom: 14px; border-bottom: 1px solid var(--hairline);
}
.legal-toc__list {
  list-style: none; margin: 12px 0 0; padding: 0; display: grid;
}
.legal-toc__list a {
  display: flex; gap: 11px; padding: 7px 0;
  font: var(--body-sm); color: var(--slate);
  transition: color var(--dur-base) ease;
}
.legal-toc__list a:hover { color: var(--accent-deep); }
.legal-toc__num {
  font: var(--ui-xs); font-variation-settings: "wdth" var(--wdth-cond);
  letter-spacing: .06em; color: var(--placeholder);
  flex: none; padding-top: 2px;
}
.legal-toc__list a:hover .legal-toc__num { color: var(--accent); }

/* ---- Prose ------------------------------------------------ */
/* min-width: 0 is load-bearing. A grid item's automatic minimum is its
   min-content width, so the tables' `min-width: 520px` would inflate the
   column past the viewport and scroll the whole PAGE sideways instead of
   scrolling inside .legal-tablewrap. */
.legal-doc { max-width: var(--measure-prose); min-width: 0; }
.legal-doc__intro { font: var(--lede); color: var(--slate); margin: 0 0 8px; }

.legal-sec { scroll-margin-top: 96px; padding-top: 48px; }
.legal-sec:first-of-type { padding-top: 40px; }

.legal-h2 {
  display: flex; gap: 16px; align-items: baseline;
  font: var(--display-card); font-variation-settings: var(--axis-sharp);
  letter-spacing: -.02em; color: var(--ink);
  padding-bottom: 16px; border-bottom: 1px solid var(--hairline);
}
.legal-h2__num {
  font: var(--ui-sm); font-variation-settings: "wdth" var(--wdth-exp);
  letter-spacing: .04em; color: var(--accent-deep); flex: none;
}
.legal-h3 {
  font: var(--ui-lg); font-size: 17px; color: var(--ink);
  margin: 34px 0 0; letter-spacing: -.005em;
}

.legal-sec p { font: var(--body-md); color: var(--slate); margin: 16px 0 0; }
.legal-sec p:first-of-type { margin-top: 20px; }
.legal-sec strong { color: var(--ink); font-weight: 600; }
.legal-sec a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.legal-sec a:hover { color: var(--ink); }

/* Lists — an accent dash instead of a bullet */
.legal-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 11px; }
.legal-list li {
  position: relative; padding-left: 22px;
  font: var(--body-md); color: var(--slate);
}
.legal-list li::before {
  content: ""; position: absolute; left: 0; top: 11px;
  width: 11px; height: 1.5px; background: var(--accent);
}
.legal-list--plain li::before { background: var(--stone-deep); }

/* ---- Panels ----------------------------------------------- */
/* Ivory card — the LSSI identification block and the contact block */
.legal-panel {
  background: var(--glass-sheen), var(--glass-ivory-strong);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-lit-light);
  border-radius: var(--r-card); padding: 26px 28px; margin-top: 22px;
}
.legal-panel .legal-h3:first-child { margin-top: 0; }

.legal-dl { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 13px 24px; margin: 0; }
.legal-dl dt {
  font: var(--ui-xs); font-variation-settings: "wdth" var(--wdth-cond);
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  padding-top: 2px;
}
.legal-dl dd { margin: 0; font: var(--body-sm); color: var(--ink); }

/* Callout — a claim we want read, not skimmed */
.legal-callout {
  border-left: 2px solid var(--accent);
  padding: 2px 0 2px 22px; margin-top: 22px;
}
.legal-callout p { font: var(--body-md); color: var(--ink); margin: 0; }
.legal-callout p + p { margin-top: 12px; }

/* ---- Tables ----------------------------------------------- */
/* Wide tables scroll inside their own box; the page never does. */
.legal-tablewrap { margin-top: 22px; max-width: 100%; overflow-x: auto; border: 1px solid var(--glass-border); border-radius: var(--r-card); background: var(--glass-sheen), var(--glass-ivory-strong); box-shadow: var(--glass-lit-light); }
.legal-table { width: 100%; min-width: 520px; border-collapse: collapse; }
.legal-table th, .legal-table td { text-align: left; padding: 14px 18px; vertical-align: top; }
.legal-table thead th {
  font: var(--label); font-variation-settings: "wdth" var(--wdth-cond);
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--hairline); white-space: nowrap;
}
.legal-table tbody tr + tr th, .legal-table tbody tr + tr td { border-top: 1px solid var(--hairline); }
.legal-table tbody th { font: var(--ui-md); color: var(--ink); }
.legal-table tbody td { font: var(--body-sm); color: var(--slate); }

/* ---- Placeholders ----------------------------------------
   Deliberately loud: anything still wearing this must not ship.
   Currently UNUSED — the pending LSSI identification data is
   omitted from the published pages rather than bracketed (see
   FOLLOWUP.md). Kept because the next draft revision will want
   it, and because a placeholder that is easy to miss is how
   brackets reach production. */
.legal-tbd {
  background: var(--accent-wash); color: var(--accent-deep);
  border-bottom: 1px dashed var(--accent);
  padding: 1px 5px; white-space: nowrap;
  font: var(--ui-sm);
}

/* ---- Document foot --------------------------------------- */
.legal-doc__foot {
  margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--hairline);
  display: flex; flex-wrap: wrap; gap: 14px 30px; justify-content: space-between;
  font: var(--body-sm); color: var(--muted);
}
.legal-doc__foot a { color: var(--accent-deep); }
.legal-doc__foot a:hover { color: var(--ink); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1180px) {
  .legal-body__inner { gap: 52px; grid-template-columns: 210px minmax(0, 1fr); }
}

@media (max-width: 980px) {
  /* The rail stops earning its column — it becomes a block on top */
  /* minmax(0, …), not 1fr — see the min-width note on .legal-doc */
  .legal-body__inner { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 52px; }
  .legal-toc { position: static; max-height: none; overflow: visible; }
  .legal-toc__list { grid-template-columns: 1fr 1fr; gap: 0 32px; }
  .legal-doc { max-width: 100%; }
  .legal-hero__inner { padding: 64px var(--gx) 56px; }
}

@media (max-width: 720px) {
  .nav__legal { display: none; }
}

@media (max-width: 620px) {
  /* One column of 24 entries is a screen and a half of índice before the
     prose starts, so on phones it becomes a scrollable panel again. */
  .legal-toc { max-height: 58vh; overflow-y: auto; }
  .legal-toc__list { grid-template-columns: 1fr; }
  .legal-dl { grid-template-columns: 1fr; gap: 4px 0; }
  .legal-dl dd { margin-bottom: 10px; }
  .legal-panel { padding: 22px 20px; }
  .legal-hero__meta { gap: 20px 34px; }
}

@media (max-width: 440px) {
  /* Brand + CTA share a 400 px bar; tighten the pill so neither wraps */
  .nav--legal .nav__cta { padding: 10px 14px; font-size: 13px; }
}

@media (max-width: 380px) {
  /* 320 px: the pair overflows by a few pixels. The CTA wording is fixed
     ("Solicitar información" everywhere), so the bar gives up size, not words. */
  .nav--legal .nav__cta { padding: 9px 12px; font-size: 12px; }
  .nav--legal .brand__word { font-size: 18px; }
  .nav--legal .brand__mark { width: 24px; height: 24px; }
}

/* ============================================================
   Print — legal documents get printed and filed
   ------------------------------------------------------------
   The only place in this repo with literal colours instead of
   var() tokens, on purpose: print wants true black on true white
   paper, not the brand's ink-on-cream. Minting --print-* tokens
   for four values used in one block would cost more than it says.
   ============================================================ */
@media print {
  .nav, .footer, .legal-toc, .legal-doc__foot { display: none !important; }
  body::after { display: none !important; }
  .legal-hero, .legal-body { background: #fff; color: #000; }
  .legal-hero::before, .legal-body::before { display: none; }
  /* Glass has no meaning on paper: flatten the panes to white with a
     plain rule, and drop the blur (printers rasterise it as a grey
     smear) and the lit inset edge. */
  .legal-panel, .legal-tablewrap {
    background: #fff !important;
    border: 1px solid #999 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
  }
  .legal-hero__title, .legal-hero__meta dt, .legal-hero__meta dd { color: #000; }
  .legal-hero__lede { color: #333; }
  .legal-body__inner { display: block; padding: 0; }
  .legal-doc { max-width: 100%; }
  .legal-sec { padding-top: 24px; break-inside: avoid; }
  .legal-sec p, .legal-list li, .legal-table tbody td { color: #222; }
}