/* ============================================================
   Show Solutions Latam — Colors & Type
   Variables CSS de fundamentos. Importar primero.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ---------- COLOR — Stage (gradient principal) ---------- */
  --ssl-stage-50:  #FCE9F2;
  --ssl-stage-100: #F9C9DF;
  --ssl-stage-200: #F291BF;
  --ssl-stage-300: #EA5BA0;
  --ssl-stage-400: #E0247B;   /* magenta primary */
  --ssl-stage-500: #C32072;   /* magenta deep */
  --ssl-stage-600: #9F2680;   /* mid purple */
  --ssl-stage-700: #6E2EA5;   /* purple primary */
  --ssl-stage-800: #4A1F73;
  --ssl-stage-900: #2B1247;

  /* Gradients principales */
  --ssl-gradient-stage:        linear-gradient(135deg, #E0247B 0%, #6E2EA5 100%);
  --ssl-gradient-stage-soft:   linear-gradient(135deg, rgba(224,36,123,0.18) 0%, rgba(110,46,165,0.18) 100%);
  --ssl-gradient-stage-radial: radial-gradient(circle at 30% 30%, #E0247B 0%, #6E2EA5 60%, #2B1247 100%);

  /* ---------- COLOR — Spotlight (azul acento) ---------- */
  --ssl-spotlight-50:  #E8F1F9;
  --ssl-spotlight-100: #C5DDF0;
  --ssl-spotlight-300: #6EA8D5;
  --ssl-spotlight-500: #3C81BD;   /* blue primary (cara azul del logo) */
  --ssl-spotlight-600: #2E6BA0;
  --ssl-spotlight-700: #1F5482;
  --ssl-spotlight-glow: 0 0 28px rgba(60,129,189,0.45);

  /* ---------- COLOR — Neutrals (dark theatrical) ---------- */
  --ssl-bg-0:        #0A0A0F;   /* canvas */
  --ssl-bg-1:        #13131A;   /* surface */
  --ssl-bg-2:        #1B1B25;   /* surface elevated */
  --ssl-bg-3:        #242430;   /* surface highest */
  --ssl-bg-inverse:  #FAFAFC;   /* light bg para invertidos */

  --ssl-fg-1:        #FFFFFF;          /* primary text */
  --ssl-fg-2:        rgba(255,255,255,0.78); /* secondary */
  --ssl-fg-3:        rgba(255,255,255,0.56); /* tertiary / muted */
  --ssl-fg-4:        rgba(255,255,255,0.36); /* placeholder / disabled */
  --ssl-fg-on-stage: #FFFFFF;          /* text sobre gradient */
  --ssl-fg-inverse:  #0A0A0F;          /* text on light */

  --ssl-stroke-1:    rgba(255,255,255,0.06);  /* divider sutil */
  --ssl-stroke-2:    rgba(255,255,255,0.12);  /* divider */
  --ssl-stroke-3:    rgba(255,255,255,0.20);  /* énfasis */
  --ssl-stroke-stage: rgba(224,36,123,0.45);

  /* ---------- COLOR — Semantic ---------- */
  --ssl-success: #2BBF7F;
  --ssl-warning: #E8A93C;
  --ssl-danger:  #EF4F5E;
  --ssl-info:    var(--ssl-spotlight-500);

  /* ---------- TYPE — Families ---------- */
  --ssl-font-display: 'Space Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ssl-font-body:    'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ssl-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  /* ---------- TYPE — Scale (rem-based, root 16px) ---------- */
  --ssl-text-xs:   0.75rem;    /* 12 */
  --ssl-text-sm:   0.875rem;   /* 14 */
  --ssl-text-base: 1rem;       /* 16 */
  --ssl-text-lg:   1.125rem;   /* 18 */
  --ssl-text-xl:   1.375rem;   /* 22 */
  --ssl-text-2xl:  1.75rem;    /* 28 */
  --ssl-text-3xl:  2.25rem;    /* 36 */
  --ssl-text-4xl:  3rem;       /* 48 */
  --ssl-text-5xl:  4rem;       /* 64 */
  --ssl-text-6xl:  5.5rem;     /* 88 */

  --ssl-leading-tight: 1.05;
  --ssl-leading-snug:  1.2;
  --ssl-leading-base:  1.5;
  --ssl-leading-loose: 1.7;

  --ssl-tracking-tight: -0.02em;
  --ssl-tracking-snug:  -0.01em;
  --ssl-tracking-base:  0;
  --ssl-tracking-wide:  0.06em;
  --ssl-tracking-uppercase: 0.12em;

  --ssl-weight-regular: 400;
  --ssl-weight-medium:  500;
  --ssl-weight-semi:    600;
  --ssl-weight-bold:    700;

  /* ---------- SPACING ---------- */
  --ssl-space-1:  4px;
  --ssl-space-2:  8px;
  --ssl-space-3:  12px;
  --ssl-space-4:  16px;
  --ssl-space-5:  20px;
  --ssl-space-6:  24px;
  --ssl-space-8:  32px;
  --ssl-space-10: 40px;
  --ssl-space-12: 48px;
  --ssl-space-16: 64px;
  --ssl-space-20: 80px;
  --ssl-space-24: 96px;
  --ssl-space-32: 128px;

  /* ---------- RADII ---------- */
  --ssl-radius-xs:   4px;
  --ssl-radius-sm:   8px;
  --ssl-radius-md:   12px;
  --ssl-radius-lg:   16px;
  --ssl-radius-xl:   24px;
  --ssl-radius-pill: 999px;

  /* ---------- SHADOWS / GLOWS ---------- */
  --ssl-shadow-1: 0 1px 2px rgba(0,0,0,0.4);
  --ssl-shadow-2: 0 8px 24px rgba(0,0,0,0.5);
  --ssl-shadow-3: 0 16px 48px rgba(0,0,0,0.6);
  --ssl-glow-stage:     0 0 32px rgba(224,36,123,0.35);
  --ssl-glow-spotlight: 0 0 28px rgba(60,129,189,0.45);

  /* ---------- MOTION ---------- */
  --ssl-ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ssl-ease-std:  cubic-bezier(0.4, 0, 0.2, 1);
  --ssl-dur-fast:  150ms;
  --ssl-dur-base:  240ms;
  --ssl-dur-slow:  480ms;
  --ssl-dur-hero:  900ms;
}

/* ============================================================
   SEMANTIC TYPE STYLES
   Aplicar como `.ssl-h1`, `.ssl-body`, etc.
   ============================================================ */

.ssl-display {
  font-family: var(--ssl-font-display);
  font-weight: var(--ssl-weight-bold);
  font-size: var(--ssl-text-6xl);
  line-height: var(--ssl-leading-tight);
  letter-spacing: var(--ssl-tracking-tight);
}
.ssl-h1 {
  font-family: var(--ssl-font-display);
  font-weight: var(--ssl-weight-bold);
  font-size: var(--ssl-text-5xl);
  line-height: var(--ssl-leading-tight);
  letter-spacing: var(--ssl-tracking-tight);
}
.ssl-h2 {
  font-family: var(--ssl-font-display);
  font-weight: var(--ssl-weight-semi);
  font-size: var(--ssl-text-4xl);
  line-height: var(--ssl-leading-snug);
  letter-spacing: var(--ssl-tracking-snug);
}
.ssl-h3 {
  font-family: var(--ssl-font-display);
  font-weight: var(--ssl-weight-semi);
  font-size: var(--ssl-text-3xl);
  line-height: var(--ssl-leading-snug);
  letter-spacing: var(--ssl-tracking-snug);
}
.ssl-h4 {
  font-family: var(--ssl-font-display);
  font-weight: var(--ssl-weight-semi);
  font-size: var(--ssl-text-2xl);
  line-height: var(--ssl-leading-snug);
}
.ssl-h5 {
  font-family: var(--ssl-font-body);
  font-weight: var(--ssl-weight-semi);
  font-size: var(--ssl-text-xl);
  line-height: var(--ssl-leading-snug);
}

.ssl-eyebrow {
  font-family: var(--ssl-font-body);
  font-weight: var(--ssl-weight-semi);
  font-size: var(--ssl-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--ssl-tracking-uppercase);
  color: var(--ssl-spotlight-300);
}

.ssl-body {
  font-family: var(--ssl-font-body);
  font-weight: var(--ssl-weight-regular);
  font-size: var(--ssl-text-base);
  line-height: var(--ssl-leading-loose);
  color: var(--ssl-fg-2);
}
.ssl-body-lg {
  font-family: var(--ssl-font-body);
  font-weight: var(--ssl-weight-regular);
  font-size: var(--ssl-text-lg);
  line-height: var(--ssl-leading-loose);
  color: var(--ssl-fg-2);
}
.ssl-body-sm {
  font-family: var(--ssl-font-body);
  font-weight: var(--ssl-weight-regular);
  font-size: var(--ssl-text-sm);
  line-height: var(--ssl-leading-base);
  color: var(--ssl-fg-3);
}
.ssl-caption {
  font-family: var(--ssl-font-body);
  font-weight: var(--ssl-weight-medium);
  font-size: var(--ssl-text-xs);
  line-height: var(--ssl-leading-base);
  color: var(--ssl-fg-3);
}
.ssl-mono {
  font-family: var(--ssl-font-mono);
  font-weight: var(--ssl-weight-regular);
  font-size: var(--ssl-text-sm);
  line-height: var(--ssl-leading-base);
  letter-spacing: 0;
}

/* Gradient text helper */
.ssl-text-gradient {
  background: var(--ssl-gradient-stage);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Reset común para preview cards */
.ssl-base {
  font-family: var(--ssl-font-body);
  color: var(--ssl-fg-1);
  background: var(--ssl-bg-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}