/* =============================================================
   Global Experience — Colors & Type
   Design tokens.

   Source of truth: official logo + brand colors (#d92b69 magenta,
   #c6c5c5 cool grey, #1d1c1a warm black) + a reference slide from
   the working presentation. Brand identity is photo-led:
   full-bleed imagery + condensed sans display + magenta accents.

   The brand operates in cultural / landscape / museography work:
   museums, interpretive centers, parks, exhibitions, shows.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- 1. COLOR — raw brand tokens ------------------ */
  /* The three brand colors, exact from spec */
  --gx-magenta:     #d92b69;       /* primary brand accent           */
  --gx-grey:        #c6c5c5;       /* neutral mid-grey               */
  --gx-black:       #1d1c1a;       /* warm near-black, dark surfaces */

  /* Magenta scale — derived from #d92b69 */
  --gx-magenta-900: #6b0e30;
  --gx-magenta-700: #a91d50;
  --gx-magenta-500: #d92b69;       /* base */
  --gx-magenta-300: #f08fb3;
  --gx-magenta-100: #fde3ec;
  --gx-magenta-050: #fdf2f6;

  /* Warm-black / charcoal scale */
  --gx-black-1000: #0a0a09;
  --gx-black-900:  #1d1c1a;        /* base */
  --gx-black-800:  #2b2a27;
  --gx-black-700:  #3a3935;
  --gx-black-600:  #58564f;
  --gx-black-500:  #767368;

  /* Cool grey scale — derived from #c6c5c5 */
  --gx-grey-700: #6e6d6c;
  --gx-grey-500: #c6c5c5;          /* base */
  --gx-grey-400: #d4d3d3;
  --gx-grey-300: #e0dfdf;
  --gx-grey-200: #ececec;
  --gx-grey-100: #f4f4f3;
  --gx-grey-050: #faf9f9;

  --gx-white:    #ffffff;

  /* ---------- 2. SEMANTIC COLOR ---------------------------- */
  /* Two main surface modes: light (page) and dark (panel/cover) */

  /* Light surfaces */
  --bg-page:       var(--gx-white);
  --bg-elevated:   var(--gx-white);
  --bg-sunken:     var(--gx-grey-100);
  --bg-soft:       var(--gx-grey-050);

  /* Dark surfaces — the signature black-panel backdrop */
  --bg-inverse:    var(--gx-black-900);     /* main dark panel */
  --bg-inverse-2:  var(--gx-black-1000);    /* cover, deepest  */

  /* Foreground on light */
  --fg-1: var(--gx-black-900);              /* primary text   */
  --fg-2: var(--gx-black-700);              /* body           */
  --fg-3: var(--gx-black-500);              /* muted          */
  --fg-4: var(--gx-grey-700);               /* hint           */

  /* Foreground on dark */
  --fg-on-dark-1: var(--gx-white);
  --fg-on-dark-2: var(--gx-grey-400);
  --fg-on-dark-3: var(--gx-grey-700);

  /* Borders */
  --border-hairline: var(--gx-grey-300);
  --border-soft:     var(--gx-grey-400);
  --border-strong:   var(--gx-black-700);
  --border-on-dark:  rgba(255,255,255,0.14);

  /* The accent — magenta. Used for headlines, bullet dots,
     marks, eyebrows, tags. Never for large surface fills. */
  --accent:          var(--gx-magenta);
  --accent-hover:    var(--gx-magenta-700);
  --accent-active:   var(--gx-magenta-900);
  --accent-soft-bg:  var(--gx-magenta-100);

  /* Status (kept calm) */
  --status-positive: #2f8a4a;
  --status-warning:  #c97a17;
  --status-danger:   var(--gx-magenta-700);
  --status-info:     var(--gx-black-600);

  /* ---------- 3. TYPOGRAPHY -------------------------------- */
  /* Display: condensed heavy sans (matches the wordmark style) */
  /* Body:    Inter — clean humanist sans, long-form-friendly  */
  --font-display: 'Barlow Condensed', 'Oswald', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale — built for editorial slides at 1920×1080 +
     long-form proposal documents at 1100px wide. */
  --fs-eyebrow:   0.6875rem;   /* 11 — uppercase tag        */
  --fs-caption:   0.8125rem;   /* 13                         */
  --fs-body-sm:   0.875rem;    /* 14                         */
  --fs-body:      1rem;        /* 16                         */
  --fs-body-lg:   1.125rem;    /* 18                         */
  --fs-lead:      1.375rem;    /* 22 — intro paragraphs      */

  --fs-h6:        1.125rem;    /* 18 */
  --fs-h5:        1.25rem;     /* 20 */
  --fs-h4:        1.5rem;      /* 24 */
  --fs-h3:        2rem;        /* 32 */
  --fs-h2:        2.625rem;    /* 42 */
  --fs-h1:        3.5rem;      /* 56 */
  --fs-display:   5.25rem;     /* 84 — section markers       */
  --fs-mega:      8rem;        /* 128 — cover / "01"         */

  --lh-tight:    1.0;
  --lh-snug:     1.15;
  --lh-display:  1.05;
  --lh-body:     1.55;
  --lh-loose:    1.7;

  --tracking-tight:    -0.01em;
  --tracking-display:  -0.005em;
  --tracking-body:     0;
  --tracking-eyebrow:  0.14em;

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  /* ---------- 4. SPACE / RHYTHM ---------------------------- */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* Editorial column widths */
  --measure-narrow: 32rem;
  --measure-text:   40rem;
  --measure-wide:   56rem;

  /* ---------- 5. RADII / SHADOWS / BORDERS ----------------- */
  --radius-0:    0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   12px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* Shadows — soft, photographic, never colored */
  --shadow-flat:    0 0 0 1px var(--border-hairline);
  --shadow-low:     0 1px 2px rgba(20, 14, 8, 0.05),
                    0 0 0 1px rgba(20, 14, 8, 0.04);
  --shadow-mid:     0 6px 14px -8px rgba(20, 14, 8, 0.18),
                    0 2px 4px rgba(20, 14, 8, 0.04);
  --shadow-high:    0 24px 48px -24px rgba(20, 14, 8, 0.28),
                    0 8px 16px -12px rgba(20, 14, 8, 0.12);

  /* ---------- 6. MOTION ------------------------------------ */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 520ms;
}

/* ============================================================
   ELEMENT-LEVEL DEFAULTS — opt-in by adding `.gx` to a wrapper.
   ============================================================ */

.gx,
.gx-page {
  font-family: var(--font-body);
  color: var(--fg-1);
  background: var(--bg-page);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Display / titles — condensed heavy sans, often with magenta
   on the first run of words (per reference slide pattern).   */
.gx h1, .gx-h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  text-transform: none;
  margin: 0;
  color: var(--accent);
}
.gx h2, .gx-h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
  margin: 0;
  color: var(--accent);
}
.gx h3, .gx-h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
  margin: 0;
  color: var(--fg-1);
}
.gx h4, .gx-h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  margin: 0;
  color: var(--fg-1);
}
.gx h5, .gx-h5 {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--fs-h5);
  line-height: var(--lh-snug);
  margin: 0;
}
.gx h6, .gx-h6 {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--fs-h6);
  line-height: var(--lh-snug);
  margin: 0;
}

/* Eyebrow / kicker — tiny uppercase tag, used above titles +
   for breadcrumbs ("Viña Neyen de Apalta / Sala del Proceso") */
.gx-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Display number / section marker — magenta, condensed, big */
.gx-section-number {
  font-family: var(--font-display);
  font-size: var(--fs-mega);
  font-weight: var(--weight-black);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent);
}

/* Body / paragraph */
.gx p, .gx-p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
  max-width: var(--measure-text);
  margin: 0 0 1em 0;
  text-wrap: pretty;
  hyphens: auto;
}
.gx-lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  font-weight: var(--weight-regular);
  max-width: var(--measure-wide);
}
.gx-caption {
  font-size: var(--fs-caption);
  color: var(--fg-3);
  line-height: var(--lh-snug);
}
/* Inline emphasis — magenta strong (per ref slide bold magenta) */
.gx strong, .gx b, .gx-strong { color: var(--fg-1); font-weight: var(--weight-semibold); }
.gx-mark { color: var(--accent); font-weight: var(--weight-semibold); }

.gx code, .gx-code, .gx pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-sunken);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
}

/* Lists — match reference: small magenta dot + tab-indented   */
.gx ul, .gx-list { list-style: none; padding: 0; margin: 0; }
.gx-list > li {
  display: grid;
  grid-template-columns: 0.9em 1fr;
  gap: 0.7em;
  padding: 0.2em 0;
  color: var(--fg-2);
  align-items: baseline;
}
.gx-list > li::before {
  content: "";
  width: 0.36em; height: 0.36em;
  background: var(--accent);
  border-radius: 50%;
  display: inline-block;
  transform: translateY(-0.15em);
}
/* Variant: list on dark background */
.gx-list--on-dark > li { color: var(--fg-on-dark-2); }

/* Hairline divider */
.gx-rule {
  height: 1px;
  background: var(--border-hairline);
  border: 0;
  margin: var(--space-5) 0;
}
.gx-rule--strong { background: var(--border-strong); height: 2px; }
.gx-rule--accent { background: var(--accent); height: 2px; }