/* ==========================================================================
   Domina tu Sector — Design tokens (CONTRACT §1)
   ========================================================================== */
:root {
  /* Tipografía */
  --font-display: "Bruno Ace", "Maven Pro", system-ui, sans-serif;
  --font-body: "Maven Pro", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* Color — paleta cerrada */
  --bg: #333033;
  --bg-deep: #2b282b;
  --bg-elev: #3c393c;
  --bg-elev-2: #444144;
  --ink: #f2f2f2;
  --ink-soft: #c7c5c7;
  --ink-mute: #8f8d8f;
  --brand: #2ee869;
  --brand-2: #19c956;       /* verde más profundo para degradados */
  --brand-ink: #06210f;     /* texto sobre verde sólido */
  --danger: #ff6a6a;
  --warn: #ffcf5c;

  --line: rgba(242, 242, 242, .12);
  --line-strong: rgba(242, 242, 242, .20);
  --line-brand: rgba(46, 232, 105, .30);

  /* Superficies con leve transparencia (glass) */
  --glass: rgba(60, 57, 60, .55);
  --glass-border: rgba(242, 242, 242, .10);

  /* Radii */
  --r-xs: 8px;
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* Sombras y glows */
  --shadow: 0 18px 50px rgba(0, 0, 0, .45);
  --shadow-sm: 0 8px 24px rgba(0, 0, 0, .35);
  --glow: 0 0 40px rgba(46, 232, 105, .28);
  --glow-sm: 0 0 18px rgba(46, 232, 105, .35);

  /* Layout */
  --maxw: 1180px;
  --maxw-narrow: 820px;
  --pad-x: clamp(20px, 5vw, 40px);
  --section-y: clamp(72px, 9vw, 132px);

  /* Espaciado base (8px) */
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px;
  --s-5: 48px; --s-6: 64px; --s-7: 96px;

  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: .18s;
  --t: .35s;
  --t-slow: .7s;

  /* Tipografía fluida */
  --fs-display: clamp(2.6rem, 6.2vw, 5.2rem);
  --fs-h1: clamp(2.1rem, 4.6vw, 3.6rem);
  --fs-h2: clamp(1.7rem, 3.4vw, 2.6rem);
  --fs-h3: clamp(1.2rem, 2vw, 1.5rem);
  --fs-lead: clamp(1.06rem, 1.5vw, 1.28rem);
  --fs-body: 1.02rem;
  --fs-sm: .9rem;
  --fs-xs: .78rem;
}