/*
 * Design tokens — single source of truth for color, type, spacing and shape.
 * Values extracted from the Figma file "Clinical Talent institute VF".
 * Change a value here and it propagates across the whole site.
 */

:root {
  /* ---- Color: brand & neutrals ---- */
  --color-bg: #fdfdfd;
  --color-surface: #ffffff;
  --color-surface-alt: #eef2f5;      /* soft panel background */
  --color-ink: #2b2d2e;              /* strongest text (headings) */
  --color-text: #565656;            /* body copy */
  --color-text-soft: #6c7273;       /* secondary copy */
  --color-muted: #939b9c;           /* accent / muted teal-grey (buttons, labels) */
  --color-line: #dfe4e6;            /* hairline borders */
  --color-invert: #ffffff;          /* text on dark / imagery */

  /* Dark section (testimonials) — near-black fading to slate */
  --color-dark: #050607;
  --color-dark-soft: #252a2d;
  --color-on-dark: #f4f6f6;
  --color-on-dark-muted: #c5c5c5;

  /* Footer: muted card + black legal bar */
  --color-footer: #939b9c;
  --color-footer-bar: #000000;

  /* Solid dark used by pill CTAs ("Hacer Test", "Más info", "Enviar") */
  --color-btn-dark: #111314;

  /* Highlight tag variant palette (contrast-guaranteed background/foreground pairs) */
  --color-tag-alert-bg: #b91c1c;
  --color-tag-alert-fg: var(--color-invert);
  --color-tag-warn-bg: #f59e0b;
  --color-tag-warn-fg: var(--color-btn-dark);
  --color-tag-success-bg: #15803d;
  --color-tag-success-fg: var(--color-invert);
  --color-tag-info-bg: #1d4ed8;
  --color-tag-info-fg: var(--color-invert);
  --color-tag-neutral-bg: var(--color-ink);
  --color-tag-neutral-fg: var(--color-invert);
  --color-tag-brand-bg: #8fd9c4;
  --color-tag-brand-fg: var(--color-btn-dark);

  /* ---- Gradients ---- */
  /* Large decorative words (TALENTO / DESCUBRE) */
  --gradient-display: linear-gradient(90deg, #c9d7da 0%, #8a9091 100%);
  /* Offer / feature cards */
  --gradient-card: linear-gradient(153deg, #d4dde3 21%, #cee4e2 98%);
  /* Section wash */
  --gradient-wash: linear-gradient(180deg, #ffffff 0%, #d4dde3 100%);
  /* Dark testimonials backdrop */
  --gradient-dark: linear-gradient(180deg, #000000 0%, #0a0e0f 55%, #252a2d 100%);
  /* Per-card DESCUBRE tints */
  --gradient-card-blue: linear-gradient(153deg, #d4dde3 21%, #d0e9fa 98%);
  --gradient-card-green: linear-gradient(153deg, #d4dde3 21%, #cee4e2 98%);

  /* ---- Typography ---- */
  --font-sans: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Fluid type scale (min, preferred, max). Desktop maxima mirror the Figma sizes. */
  --fs-display: clamp(4rem, 16vw, 13.75rem);   /* 220px giant words */
  --fs-h1: clamp(2rem, 4.5vw, 3.5rem);         /* canonical fluid hero title (56px desktop max) */
  --fs-hero-overline: clamp(1.75rem, 2.8vw, 2.5rem); /* canonical fluid hero overline (40px desktop max) */
  --fs-h2: clamp(2rem, 4.4vw, 4rem);           /* section titles up to 64px */
  --fs-h3: clamp(1.75rem, 3.4vw, 3rem);        /* 48px card titles */
  --fs-lead: clamp(1.0625rem, 1.4vw, 1.25rem); /* 20px lead paragraphs */
  --fs-body: 1rem;                             /* 16px base */
  --fs-sm: 0.8125rem;                          /* 13px small print / meta */
  --fs-label: 0.875rem;                        /* 14px labels */
  --fs-price-on-request: clamp(1.125rem, 0.95rem + 0.75vw, 1.5rem);      /* 18px-24px non-numeric "A consultar" price */
  --fs-price-on-request-sm: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem);  /* <=640px step for "A consultar" price */

  /* Line-height scale (unitless ratios) */
  --lh-display-single: 0.95;   /* Single-line display roles: giant decorative words, marquee, stacked hero words (>= 0.95) */
  --lh-display-wrap: 1.12;     /* Wrapping display headings: workshop titles, hero titles, large section titles (~1.08-1.15) */
  --lh-title: 1.15;            /* Section titles, category headings, modal titles (~1.08-1.15) */
  --lh-card: 1.25;             /* Card titles, subtitles, kickers, card names (~1.2-1.3) */
  --lh-label: 1.2;             /* Overlines, labels, badges, tags (~1.2) */
  --lh-normal: 1.5;            /* Body copy, base paragraphs */
  --lh-prose: 1.6;             /* Longform reading, curriculum rich text, descriptions (~1.5-1.65) */

  /* Backward compatibility aliases */
  --lh-tight: var(--lh-display-single);
  --lh-snug: var(--lh-title);

  --tracking-wide: 0.04em;

  /* ---- Spacing scale (4px base) ---- */
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 */
  --space-10: 8rem;     /* 128 */

  /* Vertical rhythm between major sections (fluid) */
  --section-gap: clamp(3.5rem, 8vw, 8rem);

  /* ---- Shape ---- */
  --radius-sm: 5px;
  --radius-md: 12px;
  --radius-card: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* ---- Layout: Gutter & Container Tiers ---- */
  --container-max: 1920px;
  --gutter-frame: clamp(1rem, 4vw, 2.5rem);      /* Frame gutter: header interior, hero panels, workshop detail */
  --gutter-content: clamp(1rem, 4vw, 2.5rem);    /* Content gutter: listing filters/cards, text sections */
  --container-pad: var(--gutter-frame);          /* Backward-compatible alias for container padding */
  --content-max: 1400px;

  /* ---- Effects ---- */
  --shadow-card: 0 18px 40px -24px rgba(38, 48, 47, 0.35);
  --shadow-soft: 0 8px 24px -18px rgba(38, 48, 47, 0.3);
  --ring: 0 0 0 3px rgba(147, 155, 156, 0.5);

  --transition: 200ms ease;
}

/*
 * Breakpoints (for reference — custom properties can't be used inside @media).
 * Media queries in the stylesheets use these literal values:
 *   sm: 40rem  (640px)
 *   md: 48rem  (768px)
 *   lg: 64rem  (1024px)
 *   xl: 80rem  (1280px)
 */