/* ==========================================================================
   WE MAKE MARKETING — Sistema de Diseño
   variables.css — Tokens de marca, tipografía, espaciado y motion
   ========================================================================== */

:root {

  /* --------------------------------------------------------------------
     COLORES DE MARCA
     -------------------------------------------------------------------- */

  /* Fondo principal y capas */
  --color-bg:            #0D0D0D;
  --color-bg-elevated:   #121212;
  --color-bg-soft:       #161616;
  --color-surface:       rgba(255, 255, 255, 0.03);
  --color-surface-hover: rgba(255, 255, 255, 0.06);

  /* Acento corporativo — Cyan tecnológico */
  --color-accent:        #12B7E8;
  --color-accent-soft:   #12B7E833;
  --color-accent-glow:   #12B7E81A;
  --color-accent-deep:   #0E94BC;

  /* Texto */
  --color-text:          #FFFFFF;
  --color-text-soft:     #C9CDD3;
  --color-text-muted:    #8A8F98;
  --color-text-dim:      #5A5F68;

  /* Bordes y separadores */
  --color-border:        rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.14);
  --color-border-accent: rgba(18, 183, 232, 0.35);

  /* Gradientes */
  --gradient-accent:     linear-gradient(135deg, #12B7E8 0%, #0E94BC 100%);
  --gradient-glow:       radial-gradient(circle at 50% 0%, rgba(18, 183, 232, 0.18), transparent 60%);
  --gradient-card:       linear-gradient(160deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);

  /* --------------------------------------------------------------------
     TIPOGRAFÍA
     -------------------------------------------------------------------- */

  --font-sans: 'Montserrat', 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Escala tipográfica modular */
  --fs-xs:   0.75rem;     /* 12px — labels */
  --fs-sm:   0.875rem;    /* 14px — small */
  --fs-base: 1rem;        /* 16px — body */
  --fs-md:   1.125rem;    /* 18px — body large */
  --fs-lg:   1.375rem;    /* 22px — lead */
  --fs-xl:   1.75rem;     /* 28px */
  --fs-2xl:  2.25rem;     /* 36px */
  --fs-3xl:  3rem;        /* 48px */
  --fs-4xl:  3.75rem;     /* 60px — hero */
  --fs-5xl:  4.5rem;      /* 72px */

  /* Pesos */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Tracking */
  --ls-tight:   -0.03em;
  --ls-snug:    -0.015em;
  --ls-normal:   0;
  --ls-wide:     0.06em;
  --ls-wider:    0.14em;

  /* Line height */
  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.55;
  --lh-relaxed: 1.7;

  /* --------------------------------------------------------------------
     ESPACIADO
     -------------------------------------------------------------------- */

  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  2.5rem;
  --space-8:  3rem;
  --space-9:  4rem;
  --space-10: 5rem;
  --space-12: 7rem;
  --space-16: 10rem;

  /* Padding vertical de secciones */
  --section-py: clamp(5rem, 10vw, 9rem);

  /* Container */
  --container-max: 1280px;
  --container-px:  clamp(1.25rem, 4vw, 3rem);

  /* --------------------------------------------------------------------
     RADIOS
     -------------------------------------------------------------------- */

  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* --------------------------------------------------------------------
     SOMBRAS Y ELEVACIÓN
     -------------------------------------------------------------------- */

  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md:  0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg:  0 24px 60px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 40px rgba(18, 183, 232, 0.25);
  --shadow-glow-strong: 0 0 80px rgba(18, 183, 232, 0.35);

  /* --------------------------------------------------------------------
     MOTION — curvas y duraciones
     -------------------------------------------------------------------- */

  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-fast:    180ms;
  --dur-base:    320ms;
  --dur-slow:    560ms;
  --dur-slower:  900ms;

  /* --------------------------------------------------------------------
     LAYOUT
     -------------------------------------------------------------------- */

  --header-height: 76px;
  --z-base:    1;
  --z-dropdown: 50;
  --z-header:   100;
  --z-modal:    200;
}