/* ============================================================
   Visuala Studio — Typography
   Two families only:
   · Inter Tight  — UI, body, and ALL-CAPS display statements.
   · Instrument Serif Italic — editorial accent on key words.
   The serif italic is RESERVED for key typographic moments
   (anchor words, emotional closers) — never body, never UI.
   ============================================================ */

:root {
  /* Families */
  --font-sans:  "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;

  /* Weights (Inter Tight is variable 100–900) */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Semantic weight for the SECTION HEADLINE (h1 role).
     Desktop is intentionally lighter (600) — see the @media block below.
     Mobile keeps the documented 700 lockup. */
  --weight-section-head: var(--fw-bold);

  /* Fluid display + text scale (min … fluid … max).
     hero=display, section=h1, faq=large questions, lead=subtitles. */
  --text-display: clamp(3.5rem, 1.5rem + 8vw, 7.5rem);
  /* Section headline. Lands ~34px on mobile (≈2.125rem) — matches the
     documented type scale (h1 · 34px · 700). On DESKTOP it is intentionally
     refined down to ~48px max (lighter, more editorial — see the @media
     block at the end of this file). Mobile/base is left untouched. */
  --text-h1:      clamp(2.125rem, 1.05rem + 4.3vw, 4.5rem);
  --text-h2:      clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  --text-h3:      clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  /* FAQ questions. "Menú disciplinado" — small + medium-weight (500)
     so the longest approved question ("¿Cuánto cuesta trabajar con
     Visuala?") fits one line at ≥360px viewport. Mobile 16px →
     desktop 24px. Paired with --fw-medium + --ls-normal + --lh-normal
     in .faq-row-q. (Was 26-32px / 350 weight pre-2026-06-25 — the FAQ
     moved from "section headline" tone to "editorial menu" tone.) */
  --text-faq:     clamp(1rem, 0.85rem + 0.75vw, 1.5rem);
  --text-lead:    clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  --text-body:    1.0625rem;
  --text-sm:      0.9375rem;
  --text-xs:      0.8125rem;
  --text-eyebrow: 0.8125rem;

  /* Line heights */
  --lh-tight:  0.98;
  --lh-snug:   1.08;
  --lh-normal: 1.3;
  --lh-body:   1.55;

  /* Letter spacing */
  --ls-display: -0.03em;
  --ls-tight:   -0.02em;
  --ls-normal:  -0.01em;
  --ls-chip:     0.12em;  /* uppercase frosted chips (svc, cases, testi) */
  --ls-eyebrow:  0.14em;
}

/* ------------------------------------------------------------------
   SECTION HEADLINE — desktop refinement (canonical for every section h1).
   · size  : capped ~48px (was ~72px) — smaller, calmer
   · weight: 600 (was 700) — lighter, more editorial
   Gated at >=768px so phones keep the original 34px / 700 lockup. */
@media (min-width: 768px) {
  :root {
    --text-h1:             clamp(2rem, 1.2rem + 2.1vw, 3rem);
    --weight-section-head: var(--fw-semibold);
  }
}