/* ============================================================
   Visuala Studio — Legal pages
   Long-form editorial text layout used by /privacidad, /terminos
   and /cookies. Built entirely on the global token layer.

   Page-local rhythm lives in --lg-* custom properties scoped to
   .legal so we don't inflate /tokens with legal-only knobs (same
   pattern the FAQ and case-study use).

   Layout map (top → bottom):
   · header  — eyebrow (last update) + H1 + lead (intro paragraph)
   · article — numbered sections, each with H2, paragraphs, and
               optional ul / table
   · sign    — closing signature block
   · footer  — global footer (reused .footer primitive)

   Tone: legal pages do NOT participate in the page-wide
   light→dark scroll transition (no booking section). The cream
   surface, ink-900 type and warm hairlines hold the editorial
   register from top to bottom.
   ============================================================ */

.legal {
  /* Vertical rhythm between major numbered sections. ~80% of the
     landing section cadence so the long-form article column reads
     as continuous editorial flow without feeling cramped. */
  --lg-section-y: calc(var(--section-y) * 0.75);

  /* Reading measure. Wider than a typical body column so the
     editorial canvas isn't visually pinned to the left of a wide
     viewport — the right margin would otherwise feel like the page
     is half-empty. ~56rem still keeps long-form legal text inside
     a single comfortable scanning band on desktop. The header H1
     spans the full wrap and tables can break wider via .legal-
     table-wrap. */
  --lg-measure:   56rem;

  /* Gap between two consecutive paragraphs inside a section. */
  --lg-p-gap:     var(--space-4);

  /* Gap between a section heading and its first paragraph. */
  --lg-h-gap:     var(--space-5);
}

.legal main { display: block; }


/* ============================================================
   HEADER — H1 · meta · hairline
   Mirrors the case-study intro padding so the nav → page-title
   air reads identically across page types. Padding-bottom is 0
   so the hairline sits SYMMETRICALLY between the meta line and
   the article body: the gap above the rule (rule margin-top) and
   the gap below the rule (article padding-top) are both exactly
   --lg-section-y. Stacking header padding-bottom + article
   padding-top would double the gap below.
   ============================================================ */
.legal-header {
  padding-top: 4.5rem;
  padding-bottom: 0;
}

.legal-header__title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--weight-section-head);
  font-size: clamp(2.35rem, 1.05rem + 5.3vw, 3.1rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--fg-1);
  text-wrap: balance;
}

.legal-header__meta {
  margin-top: var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  letter-spacing: var(--ls-normal);
  color: var(--fg-muted);
}

/* Hairline ending the header, opening the body article. */
.legal-header__rule {
  margin-top: var(--lg-section-y);
  height: 1px;
  background: var(--border-soft);
  border: 0;
}


/* ============================================================
   ARTICLE — long-form body
   A single editorial column anchored to --lg-measure with
   numbered sections, paragraphs, lists, tables and inline links.
   ============================================================ */
.legal-article {
  padding-top: var(--lg-section-y);
  padding-bottom: var(--lg-section-y);
}

/* The intro paragraph between header and first numbered section.
   Sits a step larger than the body to bridge title → article. */
.legal-intro {
  max-width: var(--lg-measure);
  font-family: var(--font-sans);
  font-size: var(--text-lead);
  line-height: 1.45;
  color: var(--fg-1);
  text-wrap: pretty;
}

/* Every numbered section gets the same vertical rhythm above it,
   including the FIRST one (no :first-of-type override). That way
   the rest beat between the intro paragraph and "01" matches the
   rest beat between "01" and "02". */
.legal-section {
  margin-top: var(--lg-section-y);
  max-width: var(--lg-measure);
}

/* Numbered heading. Locks the eyebrow numeral + serif italic
   anchor word combo from the landing's visual language without
   reintroducing a frosted chip. Numeral colour kept muted so
   the H2 stays the dominant element. */
.legal-section__num {
  color: var(--fg-muted);
  letter-spacing: var(--ls-eyebrow);
  margin-bottom: var(--space-3);
}

.legal-section__title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--text-h3);
  line-height: 1.18;
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  text-wrap: balance;
}

.legal-section__body {
  margin-top: var(--lg-h-gap);
  display: flex;
  flex-direction: column;
  gap: var(--lg-p-gap);
}

.legal-section__body p {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
  text-wrap: pretty;
}

.legal-section__body p strong {
  color: var(--fg-1);
  font-weight: var(--fw-semibold);
}


/* ============================================================
   LISTS — disc bullets with a muted accent dot
   The unordered list is a single column; bullets use a ::marker
   so they animate cleanly with text wrap.
   ============================================================ */
.legal-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.legal-list li {
  position: relative;
  padding-left: var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
  text-wrap: pretty;
}

.legal-list li::before {
  content: "";
  position: absolute;
  top: 0.85em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-300);
  transform: translateY(-50%);
}

.legal-list li strong {
  color: var(--fg-1);
  font-weight: var(--fw-semibold);
}


/* ============================================================
   TABLES — minimal hairlines, no zebra striping
   Used by section 1 (identification) of the privacy policy and
   the cookie inventory tables in /cookies. Two layouts via a
   modifier:
   · default (.legal-table)        — 2-col definition pairs.
   · .legal-table--inventory       — 4-col cookie inventory.
   ============================================================ */
.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--fg-2);
  text-align: left;
}

.legal-table th,
.legal-table td {
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: top;
}

.legal-table th {
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  white-space: nowrap;
  width: 38%;
}

/* Inventory table (cookies) — 4 columns, monospace-ish first col
   for the cookie name. */
.legal-table--inventory th {
  width: auto;
  white-space: normal;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.legal-table--inventory td {
  font-size: var(--text-sm);
}
.legal-table--inventory td:first-child {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  letter-spacing: -0.005em;
}

/* Tables get the wider wrap (not the narrow measure) so columns
   read cleanly on desktop. Wrapping div absorbs horizontal
   overflow on mobile via overflow-x: auto. */
.legal-table-wrap {
  max-width: none;
  margin: var(--space-5) 0 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}


/* ============================================================
   INLINE LINKS — editorial underline
   Scoped to article content + sign-off so the global nav and
   footer (which live inside <body class="legal">) keep their
   own link styles. Single border-bottom hairline; no colour
   shift on hover — matches the footer link primitive.
   ============================================================ */
.legal-intro a,
.legal-section__body a,
.legal-list a,
.legal-sign a {
  color: var(--fg-1);
  border-bottom: 1px solid var(--border-soft);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.legal-intro a:hover,
.legal-intro a:focus-visible,
.legal-section__body a:hover,
.legal-section__body a:focus-visible,
.legal-list a:hover,
.legal-list a:focus-visible,
.legal-sign a:hover,
.legal-sign a:focus-visible {
  border-bottom-color: var(--fg-1);
}


/* ============================================================
   SIGN-OFF — closing signature line
   Small editorial closer at the foot of every legal page. Sits
   between the article body and the global footer with the
   standard --lg-section-y rhythm.
   ============================================================ */
.legal-sign {
  margin-top: var(--lg-section-y);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-soft);
  max-width: var(--lg-measure);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--fg-muted);
}

.legal-sign strong {
  display: block;
  color: var(--fg-1);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-normal);
  margin-bottom: var(--space-1);
}


/* ============================================================
   DESKTOP REFINEMENT
   The reading measure stays the same; tables get extra breath.
   ============================================================ */
@media (min-width: 880px) {
  .legal-header {
    padding-top: 5.5rem;
  }
  .legal-header__title {
    font-size: clamp(2.4rem, 1.1rem + 3.4vw, 4rem);
    letter-spacing: -0.04em;
  }

  .legal-table th,
  .legal-table td {
    padding: var(--space-4) var(--space-5) var(--space-4) 0;
  }
}