/* ==========================================================================
   ProLAT Marketing Agency — Core CSS tokens
   Purple-forward brand, bold display + friendly body, Spanish-language first.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700&family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700&family=Dancing+Script:wght@600;700&family=JetBrains+Mono:wght@500&display=swap');

:root {
  /* ---------- BRAND PURPLES (the core identity) ---------- */
  --prolat-purple:        #7C3AED;  /* primary brand — logo + CTAs */
  --prolat-purple-600:    #6D28D9;  /* pressed / darker */
  --prolat-purple-500:    #8B5CF6;  /* hover */
  --prolat-purple-400:    #A78BFA;  /* accents, glow */
  --prolat-purple-300:    #C4B5FD;  /* soft highlight */
  --prolat-purple-200:    #DDD6FE;  /* very light tint */
  --prolat-purple-100:    #EDE9FE;  /* surface tint */
  --prolat-purple-50:     #F5F3FF;  /* lightest surface */
  --prolat-purple-deep:   #0F0720;  /* near-black purple backgrounds */

  /* ---------- NEUTRALS ---------- */
  --prolat-black:         #0A0A0F;
  --prolat-ink:           #141022;  /* charcoal-purple black */
  --prolat-gray-900:      #1F1B2E;
  --prolat-gray-700:      #3F3A52;
  --prolat-gray-500:      #6B6380;
  --prolat-gray-400:      #8C82A8;
  --prolat-gray-300:      #B8AFCF;
  --prolat-gray-200:      #DDD5E8;
  --prolat-gray-100:      #F0ECF5;
  --prolat-white:         #FFFFFF;
  --prolat-cream:         #F4F0FF;

  /* ---------- SEMANTIC / ACCENTS ---------- */
  --prolat-red:           #EF2B2B;   /* alarm red used in "SIN LEVANTAR UN DEDO", "podemos hacerlo" */
  --prolat-red-soft:      #FF5555;
  --prolat-success:       #22C55E;
  --prolat-warning:       #FBBF24;

  /* ---------- FOREGROUND / BACKGROUND ROLES ---------- */
  --fg1: var(--prolat-ink);          /* primary text on light */
  --fg2: var(--prolat-gray-500);     /* secondary text on light */
  --fg3: var(--prolat-gray-400);     /* tertiary / meta on light */
  --fg-on-purple: var(--prolat-white);
  --fg-on-dark: var(--prolat-cream);
  --fg2-on-dark: var(--prolat-gray-300);

  --bg1: var(--prolat-white);
  --bg2: var(--prolat-gray-100);
  --bg3: var(--prolat-purple-50);
  --bg-dark: var(--prolat-purple-deep);
  --bg-dark-2: #160A2E;

  --border-soft: rgba(124, 58, 237, 0.12);
  --border-default: rgba(124, 58, 237, 0.25);
  --border-strong: rgba(124, 58, 237, 0.45);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Syne', 'Montserrat', system-ui, sans-serif;     /* tight, futurist logo-ish display */
  --font-heavy:   'Montserrat', system-ui, sans-serif;              /* the heavy black caps used everywhere on posters */
  --font-body:    'DM Sans', system-ui, sans-serif;                 /* friendly body */
  --font-script:  'Dancing Script', cursive;                        /* occasional handwritten accent ("Marketing!") */
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ---------- TYPE SCALE ---------- */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;
  --text-3xl:  48px;
  --text-4xl:  64px;
  --text-5xl:  84px;

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

  /* ---------- RADII ---------- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ---------- SHADOWS ---------- */
  --shadow-sm: 0 1px 2px rgba(20, 16, 34, 0.06);
  --shadow-md: 0 4px 16px rgba(20, 16, 34, 0.08);
  --shadow-lg: 0 12px 32px rgba(20, 16, 34, 0.12);
  --shadow-purple: 0 8px 28px rgba(124, 58, 237, 0.28);
  --shadow-purple-lg: 0 16px 48px rgba(124, 58, 237, 0.35);
  --shadow-glow: 0 0 60px rgba(124, 58, 237, 0.35);

  /* ---------- GRADIENTS ---------- */
  --gradient-purple: linear-gradient(135deg, #7C3AED 0%, #A78BFA 100%);
  --gradient-purple-deep: linear-gradient(135deg, #4C1D95 0%, #7C3AED 100%);
  --gradient-purple-dark: linear-gradient(180deg, #160A2E 0%, #0F0720 100%);
  --gradient-purple-soft: linear-gradient(135deg, #EDE9FE 0%, #DDD6FE 100%);
  --gradient-text-display: linear-gradient(180deg, #A78BFA 0%, #7C3AED 100%);

  /* ---------- ANIMATION ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 400ms;
}

/* ==========================================================================
   SEMANTIC TYPE CLASSES (also usable as mixins via @extend or composition)
   ========================================================================== */

.prolat-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--prolat-purple);
}

.prolat-h1, h1.prolat {
  font-family: var(--font-heavy);
  font-weight: 900;
  font-size: clamp(40px, 6.5vw, 84px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--fg1);
}

.prolat-h2, h2.prolat {
  font-family: var(--font-heavy);
  font-weight: 800;
  font-size: clamp(30px, 4.5vw, 48px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--fg1);
}

.prolat-h3, h3.prolat {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-xl);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--fg1);
}

.prolat-h4, h4.prolat {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-md);
  line-height: 1.3;
  color: var(--fg1);
}

.prolat-lead, p.prolat-lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--fg2);
}

.prolat-body, p.prolat {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--fg1);
}

.prolat-small {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--fg2);
}

.prolat-meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg3);
}

.prolat-script {
  font-family: var(--font-script);
  font-weight: 700;
  font-style: italic;
}

/* Highlight treatment used on posters: white text inside black/red pill */
.prolat-pill-highlight {
  display: inline-block;
  background: var(--prolat-ink);
  color: var(--prolat-white);
  padding: 0.05em 0.35em;
  border-radius: 4px;
}
.prolat-pill-highlight.red { background: var(--prolat-red); }
.prolat-pill-highlight.purple { background: var(--prolat-purple); }

/* Gradient fill text (used on big display words like "CLIENTES POTENCIALES") */
.prolat-text-gradient {
  background: var(--gradient-text-display);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}