/* ============================================================================
 * sca-tokens.css
 * Sistema Consultor Autónomo (SCA) landing — design tokens + fold shell.
 * Implements B4 (global setup), B6 (background contract), B14 (responsive).
 *
 * Loaded AFTER tailwind.css so these rules win without !important.
 * Nothing here leaks outside the landing: every non-:root selector is either
 * `.sca-*` or scoped under `body.sca-active`.
 *
 * NO SECTION MAY INTRODUCE a colour, radius or spacing value outside this file.
 * ==========================================================================*/

:root {
  /* -- CONVERSION / STRUCTURAL ACCENTS ------------------------------------ */

  /* Conversion accent — the only chromatic accent on a clickable thing */
  --accent:            #00fca8;
  /* Structural accent — diagram connectors and telemetry lines ONLY.
     Never a CTA, never a gradient. */
  --accent-2:          #1cdaff;
  /* Dark stop of the two gradients on the page. Same hue as --accent, so a
     gradient gains depth without introducing a second colour where the accent
     must stay singular. */
  --accent-deep:       #00A86E;
  /* Text and icons that sit on top of --accent */
  --on-accent:         #000000;

  /* -- TONAL LADDER ------------------------------------------------------- */

  /* Step 1 — page background, folds 1, 3, 6, 9, 12, 14 */
  --surface:           #000000;
  /* Step 2 — folds 2, 4, 7, 10, 13 */
  --surface-alt:       #07090C;
  /* Step 3 — folds 5 and 8. Same hex as --surface-elevated, different role:
     fold background, not card. */
  --surface-alt-2:     #0A0A0A;
  /* Card, panel, pill, glass */
  --surface-elevated:  #0A0A0A;
  /* The one rupture of the page — fold 11 only */
  --surface-inverted:  #F4F4F2;
  /* Text on --surface-inverted */
  --text-on-inverted:  #0B0B0B;

  /* -- TEXT --------------------------------------------------------------- */

  /* Maximum-hierarchy text and strokes */
  --text-primary:      #FFFFFF;
  /* Secondary text and strokes */
  --text-muted:        rgba(255,255,255,0.62);
  /* Fold 5 only — "where you'll be in 12 months". One use on the whole page. */
  --danger:            #FF5A4E;

  /* -- TYPE FAMILIES ------------------------------------------------------ */
  /* Titles now use Inter — the SAME stack as --font-body — for one consistent
     type voice across the whole landing (heads + body). Inter ships weights
     300–900 (the Google Fonts <link> in index.html loads 300;400;…;700;…;900),
     so headings get a REAL 700 bold, not a synthesised fake bold. This replaced
     Instrument Serif (single 400 weight), whose <link> was removed. */
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* -- RADII -------------------------------------------------------------- */
  --radius-0:    0px;
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   20px;   /* card and panel radius */
  --radius-pill: 999px;

  /* -- LAYOUT ------------------------------------------------------------- */
  /* Tightened ~18-20% (was clamp(88px, 11vh, 160px)) after a full-page audit
     found ~12,257px of desktop scroll height with large near-empty dark
     stretches between folds — the tonal ladder above is barely
     distinguishable step to step, so padding-block was the only thing
     separating adjacent folds visually. Still scales with viewport height
     (own vertical rhythm per device) and still clears the fixed nav/sticky
     bar; just less of it. Folds 5 (#sca-twelve-months), 6 (#sca-flow) and 8
     (#sca-projectroom) layer their own extra bottom room on top of this —
     see sca-sections-2.css / sca-sections-3.css. */
  --fold-pad:   clamp(72px, 9vh, 128px);    /* padding-block of every fold */
  --content-w:  min(1160px, 100vw - 48px);  /* content column */
  --prose-w:    68ch;                       /* long-form text column */

  /* -- MOTION CURVES (B7) -------------------------------------------------
     One vocabulary for the whole site. Referenced BY NAME everywhere.
     Never re-write a bezier array outside this block. There is no fifth curve
     and no spring anywhere on this page. */

  /* EASE — expo-out. THE default. Every section entrance, every reveal, every
     image mask, every layout transition, unless a declared exception applies. */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  /* OVERSHOOT — DECLARED EXCEPTION 1. Exactly two places: the pop of the
     guarantee badge (fold 11) and the hover of the primary CTA. */
  --overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* WORDRISE — DECLARED EXCEPTION 2. Only the per-word rise of h1 and h2. */
  --wordrise:  cubic-bezier(0.25, 1, 0.5, 1);
  /* ACCORDION — only the height 0 → auto transition of the fold-13 FAQ. */
  --accordion: cubic-bezier(0.25, 0.1, 0.25, 1);
  /* ARROWSWAP — symmetric ease-in-out. Only the double-arrow bullet of
     fold 12 and the CTA chevron. */
  --arrowswap: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ----------------------------------------------------------------------------
 * OPACITY POLICY — five steps, no sixth.
 * Permitted derived values, written out so nobody has to compute them:
 *
 *   rgba(255,255,255,0.04)  rgba(255,255,255,0.06)  rgba(255,255,255,0.10)
 *   rgba(255,255,255,0.38)  rgba(255,255,255,0.62)
 *   rgba(0,252,168,0.04)    rgba(0,252,168,0.06)    rgba(0,252,168,0.10)
 *   rgba(0,252,168,0.38)    rgba(0,252,168,0.62)
 *
 * Any other alpha, and any new grey hex, is forbidden. Five steps is what makes
 * five near-black surfaces read as a deliberate ladder instead of an accident.
 *
 * SPACING SCALE — 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 128 · 160 px.
 * No other spacing value. Every fold gets padding-block: var(--fold-pad).
 *
 * STRUCTURAL COLOURS — copied literally, NEVER tokenised:
 *   the five stops of the nav scrim; black/transparent inside any mask-image;
 *   the eight backdrop-filter steps of the fold-2 progressive blur;
 *   rgba(0,0,0,0.25) behind the mobile menu blur.
 * --------------------------------------------------------------------------*/

/* ============================================================================
 * PAGE PAINT HOOK
 * `sca-gate.js` adds `sca-active` to <body> on init and `destroyScaState()`
 * removes it. Scoped, because <body> is shared with the director / developer /
 * client panels — a global body rule would repaint all of them.
 * ==========================================================================*/

body.sca-active {
  background: var(--surface);
  color: var(--text-primary);
  font-family: var(--font-body);
}

/* ============================================================================
 * FOLD SHELL — the container every one of the 16 render units uses.
 *   <section id="sca-x" class="sca-fold sca-fold--{black|alt|alt2|inverted}">
 *     <div class="sca-fold__inner"> … </div>
 *   </section>
 *
 * Background assignment is a contract (B6). Exactly one fold is light.
 *   --black    folds 1, 3, 6, 9, 12, 14   #000000
 *   --alt      folds 2, 4, 7, 10, 13      #07090C
 *   --alt2     folds 5, 8                 #0A0A0A
 *   --inverted fold 11 only               #F4F4F2
 * The cycle is 1-2-1-2-3 with one inversion. Do not "even it out".
 * ==========================================================================*/

.sca-fold {
  position: relative;
  padding-block: var(--fold-pad);
  background: var(--surface);
  color: var(--text-primary);
  font-family: var(--font-body);
}

.sca-fold--black    { background: var(--surface); }
.sca-fold--alt      { background: var(--surface-alt); }
.sca-fold--alt2     { background: var(--surface-alt-2); }
.sca-fold--inverted { background: var(--surface-inverted); color: var(--text-on-inverted); }

/* Content column. margin-inline:auto is what produces the gutters —
   --content-w already subtracts them. Do not add padding-inline on top. */
.sca-fold__inner {
  width: var(--content-w);
  margin-inline: auto;
}

/* Long-form text column. Opt-in, on the paragraph, never on the fold. */
.sca-prose { max-width: var(--prose-w); }

/* ============================================================================
 * BASE TYPOGRAPHY
 * --font-display (Inter, bold) is applied to h1, every fold h2, and the display
 * figures (value stack, price, watermark). Sections set their own font-size via
 * clamp(); they never re-declare family or colour. The display figures keep
 * their local font-weight: 400 by design — only h1/h2 carry the 700 bold.
 * ==========================================================================*/

.sca-fold h1 {
  margin: 0;
  font-family: var(--font-display);
  /* Inter 700 — a real, loaded bold. Instrument Serif could only be 400; on a
     sans face 400 reads as body text, so titles get a genuine bold instead. */
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--text-primary);
}

.sca-fold h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.sca-fold--inverted h1,
.sca-fold--inverted h2 { color: var(--text-on-inverted); }

/* Body defaults — everything that is not h1/h2 is Inter. */
.sca-fold p,
.sca-fold li,
.sca-fold h3,
.sca-fold h4,
.sca-fold a,
.sca-fold button,
.sca-fold td,
.sca-fold th { font-family: var(--font-body); }

/* NO container that holds text may declare a fixed height, a max-height or
   overflow:hidden. Spanish runs 8–12% longer per line than English and this
   page ships both from the same DOM. The three places where overflow:hidden IS
   required are named in their own sections: the marquee track (fold 3), the
   per-word reveal wrappers (folds 1, 5, 11, 14) and the video subtitle crop
   (fold 2). Nowhere else. */

/* Inline accent run — the slot count, the price emphasis. */
.sca-accent { color: var(--accent); font-weight: 600; }

/* Muted run — secondary text inside an otherwise primary block. */
.sca-muted  { color: var(--text-muted); }

/* ============================================================================
 * RESPONSIVE — ONE declared breakpoint on this page: 768px.
 * Everything above and below it is handled by clamp(). Do not add a second
 * media query for layout, do not add sm:/lg:/xl:/2xl: variants.
 * Nothing on this page is inside a scaled wrapper, so declared px == rendered
 * px and every touch-target measurement can be read straight off the CSS.
 * ==========================================================================*/

@media (max-width: 768px) {
  :root {
    /* B14 — fold horizontal gutter 24px → 20px per side. */
    --content-w: min(1160px, 100vw - 40px);
  }
}