/* ============================================================
   ARE Trüst — System / Legal pages polish
   Pages: system/politicas-de-privacidad.html, system/terminos-del-servicio.html
   Additive only. Scoped to the legal content (.grid body + hero).
   Never touches shared nav / footer (footer uses .footer-grid, not .grid).
   Tokens + easings only. Respects reduced motion.
   ============================================================ */

:root {
  --ar-emerald: #015d3a;
  --ar-emerald-deep: #012e1d;
  --ar-emerald-bright: #0a7a4d;
  --ar-forest: #172d1b;
  --ar-mint: #e7f2ee;
  --ar-gold: #c9a44c;
  --ar-ease: cubic-bezier(.22, 1, .36, 1);
  --ar-ease-soft: cubic-bezier(.4, 0, .2, 1);
}

/* ------------------------------------------------------------
   1. PAGE TITLE + INTRO (hero)
   .heading-h2 is used EXACTLY ONCE per page (the h1 page title) and
   never in nav/footer. .paragraph-32 (politicas) and .paragraph-36
   (terminos) are the unique intro/lead paragraphs. Safe to target
   directly — verified by grep on both files.
   ------------------------------------------------------------ */

/* Calm, generous spacing under the page title */
.heading-h2 {
  text-wrap: balance;
  letter-spacing: -.014em;
}

/* Intro / lead paragraph — comfortable measure + refined rhythm.
   "Última actualización" lives at the tail of this paragraph (after a
   <br>); keeping the whole lead elegant reads as a quiet caption. */
.paragraph-32,
.paragraph-36 {
  max-width: 60ch;
  line-height: 1.45em;
  color: var(--text--default--black-medium, #444);
}

/* ------------------------------------------------------------
   2. SECTION HEADINGS (sticky left column, h2.heading-h4)
   Scope tightly to .styles-sticky-wrap so we never hit footer headings.
   Add a small emerald accent rule before each section heading.
   ------------------------------------------------------------ */

.grid .styles-sticky-wrap .heading-h4 {
  position: relative;
  text-wrap: balance;
  letter-spacing: -.005em;
  color: var(--ar-emerald-deep);
  padding-top: 1rem;
}

/* Refined emerald marker rule above the heading */
.grid .styles-sticky-wrap .heading-h4::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2.25rem;
  height: 2px;
  background-color: var(--ar-emerald);
  border-radius: 1px;
}

/* ------------------------------------------------------------
   3. RUNNING TEXT (right column, .styles-contents)
   Scope: .grid .styles-contents — this is the legal body copy.
   .paragraph-18 also appears in the footer, so we DO NOT style bare
   .paragraph-18; we prefix with .styles-contents.
   ------------------------------------------------------------ */

/* Comfortable readable measure + relaxed line-height for long-form legal text */
.grid .styles-contents {
  max-width: 46rem; /* ~68ch at this font-size; the 2fr column can exceed this on wide viewports */
}

.grid .styles-contents .paragraph-18 {
  line-height: 1.72em;
  letter-spacing: .002em;
  color: var(--text--default--black-medium, #333);
}

/* The <br>-separated "lists" (e.g. Cómo Usamos su Información) gain air via
   line-height above; nothing structural changes. */

/* If real lists ever get added inside the legal body, give them
   comfortable indentation + item spacing (future-proof, scoped). */
.grid .styles-contents ul,
.grid .styles-contents ol {
  margin: .25rem 0 0;
  padding-left: 1.5rem;
  line-height: 1.72em;
}

.grid .styles-contents li {
  margin-bottom: .5rem;
  padding-left: .25rem;
}

.grid .styles-contents li::marker {
  color: var(--ar-emerald);
}

/* ------------------------------------------------------------
   4. IN-TEXT LINKS (scoped to legal body only)
   No real <a> currently inside .styles-contents (emails are plain
   text), but scope this so it's safe + future-proof. Never touches
   nav-link / footer-links (those are outside .styles-contents).
   ------------------------------------------------------------ */

.grid .styles-contents a:not(.w-button):not(.w-inline-block) {
  color: var(--ar-emerald);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(1, 93, 58, .4);
  text-underline-offset: .18em;
  transition: color .25s var(--ar-ease-soft),
              text-decoration-color .25s var(--ar-ease-soft);
}

.grid .styles-contents a:not(.w-button):not(.w-inline-block):hover {
  color: var(--ar-emerald-bright);
  text-decoration-color: var(--ar-emerald-bright);
}

/* ------------------------------------------------------------
   5. VERTICAL RHYTHM between legal sections
   The shared .grid already gives margin-bottom + a 1px card-grey
   divider. Keep it; just ensure heading/intro spacing feels generous.
   (No override of the divider — quiet by design.)
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   6. Reduced motion — neutralize link transitions
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .grid .styles-contents a:not(.w-button):not(.w-inline-block) {
    transition: none;
  }
}