/* Amergent Partners — Información legal: plain dark hero, draft notice, section index and the
   three legal texts (aviso legal, privacidad, términos). Loaded after site.css.
   Mobile-first (breakpoints in css/tokens.css): below lg the index is a row of three links above
   the texts; from lg (1024px) it is the original sticky column beside them. */

/* ── Hero (no photo) ────────────────────────────────────────────────── */

.page-hero--legal { --hero-h: 52vh; --hero-min: 440px; }
.page-hero--legal .crumbs,
.page-hero--legal .crumbs a { color: var(--color-neutral-300); }
.page-hero--legal .page-hero__body { padding-bottom: clamp(40px, 1.502vw + 34.4px, 56px); }
.page-hero--legal .page-hero__copy { gap: 22px; }
.legal-hero__lead {
  margin: 0; max-width: 60ch;
  font-size: 16px; line-height: 1.6; color: var(--color-neutral-300); text-wrap: pretty; overflow-wrap: break-word;
}

@media (min-width: 1024px) {
  .page-hero--legal .page-hero__body {
    grid-template-columns: minmax(0,1fr) minmax(0,420px); gap: 72px; padding: 0 var(--pad-x) 56px;
  }
  .page-hero--legal .page-hero__title { font-size: clamp(56px, 5.4vw, 88px); }
}

@media (hover: hover) {
  .page-hero--legal .crumbs a:hover { color: var(--color-bg); }
}

/* ── Body ───────────────────────────────────────────────────────────── */

.legal {
  padding: clamp(64px, 5.258vw + 44.3px, 120px) var(--pad-x) var(--space-section-lg);
  background: var(--color-bg); overflow-wrap: break-word; /* long words / addresses never overflow */
}

.legal__draft {
  margin: 0 0 clamp(40px, 3.005vw + 28.75px, 72px); display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px;
  font-size: var(--fs-14); line-height: 1.5; background: var(--color-accent-100); color: var(--color-accent-800);
}
.legal__draft .ic { margin-top: 4px; }

.legal__grid { align-items: start; gap: 40px; } /* align-items: start lets the lg index stick */

/* Section index, above the texts below lg and never sticky there, so it never covers them:
   phones: a short list of three rows; sm–md: three links side by side; lg: the original sticky
   column beside the texts. The current section gets a filled dot. */
.legal__toc { display: flex; flex-direction: column; border-top: 1px solid var(--color-text); }
.legal__toc a {
  display: grid; grid-template-columns: 12px 28px minmax(0,1fr); align-items: center; gap: 10px;
  min-height: 48px; padding: 12px 0;
  font-size: var(--fs-15); text-decoration: none; color: var(--color-neutral-700);
  border-bottom: 1px solid var(--color-neutral-300); transition: color 250ms ease;
}
.legal__toc a.is-active { color: var(--color-text); }
.legal__dot { display: block; width: 6px; height: 6px; }
.legal__toc a.is-active .legal__dot,
.legal__toc:not(.has-active) a:first-child .legal__dot { background: var(--color-text); }
.legal__n { font-size: 12px; color: var(--color-neutral-700); }

.legal__body { display: flex; flex-direction: column; min-width: 0; max-width: 900px; }

/* Anchors land just below the nav (its height + 24px); the JS scrolls to the same spot. */
.page--inner .legal__sec[id] { scroll-margin-top: calc(var(--nav-h) + var(--safe-top) + 24px); }
.legal__sec { display: flex; flex-direction: column; gap: clamp(28px, 1.127vw + 23.8px, 40px); }
.legal__sec:focus { outline: none; } /* focused only to move the keyboard position after a jump */
.legal__sec + .legal__sec {
  margin-top: clamp(56px, 3.756vw + 41.95px, 96px); padding-top: clamp(56px, 3.756vw + 41.95px, 96px);
  border-top: 1px solid var(--color-text);
}
.legal__head { display: flex; flex-direction: column; gap: 20px; }
.legal__head .eyebrow--nowrap { white-space: normal; } /* long section names may wrap on phones */
.legal__date { font-size: var(--fs-13); color: var(--color-neutral-700); }

/* Definition lists: term above its definition on phones, side by side from md. */
.legal__list { margin: 0; display: flex; flex-direction: column; border-top: 1px solid var(--color-neutral-300); }
.legal__list > div {
  display: grid; grid-template-columns: minmax(0,1fr); gap: 8px; padding: 22px 0;
  border-bottom: 1px solid var(--color-neutral-300);
}
.legal__list dt { font-size: 17px; line-height: 1.4; letter-spacing: -0.01em; }
.legal__list dd { margin: 0; max-width: 70ch; font-size: 16px; line-height: 1.7; color: var(--color-neutral-800); text-wrap: pretty; }

@media (min-width: 480px) {
  .legal__head .eyebrow--nowrap { white-space: nowrap; }

  .legal__toc { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); border-bottom: 1px solid var(--color-neutral-300); }
  .legal__toc a {
    grid-template-columns: auto minmax(0,1fr); grid-template-areas: "dot n" "label label";
    align-content: start; gap: 6px 10px; padding: 14px 12px 16px; border-bottom: 0;
  }
  .legal__toc a + a { border-left: 1px solid var(--color-neutral-300); }
  .legal__toc a:first-child { padding-left: 0; }
  .legal__toc a:last-child { padding-right: 0; }
  .legal__dot { grid-area: dot; }
  .legal__n { grid-area: n; }
  .legal__toc a > span:last-child { grid-area: label; }
}

@media (min-width: 768px) {
  .legal__list > div { grid-template-columns: minmax(0,2fr) minmax(0,5fr); gap: 24px; padding: 24px 0; }
  .legal__list dd { max-width: none; }
}

@media (min-width: 1024px) {
  .legal__draft { align-items: center; }
  .legal__draft .ic { margin-top: 0; }

  .legal__grid { gap: 0 24px; }

  .legal__toc {
    grid-column: 1 / span 3; position: sticky; top: calc(var(--nav-h) + var(--safe-top) + 48px);
    display: flex; flex-direction: column; border-bottom: 0;
  }
  .legal__toc a {
    grid-template-columns: 12px 28px minmax(0,1fr); grid-template-areas: none;
    align-content: normal; gap: 10px; min-height: 0; padding: 16px 0;
    border-bottom: 1px solid var(--color-neutral-300);
  }
  .legal__toc a + a { border-left: 0; }
  .legal__toc a > span,
  .legal__toc a > span:last-child { grid-area: auto; }

  .legal__body { grid-column: 5 / span 8; }

  .legal__list > div { gap: 32px; padding: 28px 0; }
}

@media (hover: hover) {
  .legal__toc a:hover { color: var(--color-text); }
}

@media (prefers-reduced-motion: reduce) {
  .legal__toc a { transition: none; }
}