/* ============================================
   UPCOM Afiliados ML — Landing Page
   Tokens & global styles
   ============================================ */

:root {
  /* Brand */
  --purple-900: #2A0F4F;
  --purple-800: #3A1668;
  --purple-700: #4A1D85;
  --purple-600: #5C24A3;
  --purple-500: #7B2DD6;
  --purple-400: #9D5CE5;
  --purple-300: #C9A4F2;
  --purple-200: #E5D3F7;
  --purple-100: #F1E9FA;
  --purple-50:  #F8F3FC;

  --coral-600: #E85540;
  --coral-500: #FF6B57;
  --coral-400: #FF8676;

  --yellow-500: #FFCB47;
  --yellow-400: #FFD96B;
  --yellow-100: #FFF4D1;

  --green-500: #25D366;
  --green-600: #1FB855;

  --ink-900: #1A0B33;
  --ink-700: #3D2466;
  --ink-500: #6B5688;
  --ink-300: #A89AC2;

  --white: #FFFFFF;
  --off-white: #FAF8FD;

  /* Type */
  --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --font-body: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;

  /* Radii */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* Shadows */
  --sh-card: 0 8px 32px -12px rgba(58, 22, 104, 0.18);
  --sh-card-lg: 0 20px 60px -20px rgba(58, 22, 104, 0.35);
  --sh-btn: 0 8px 22px -6px rgba(232, 85, 64, 0.5);

  /* Layout */
  --container: 1200px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink-900);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

button { font-family: inherit; cursor: pointer; border: none; background: none; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* === Buttons === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--coral-500);
  color: var(--white);
  box-shadow: var(--sh-btn);
}
.btn-primary:hover { background: var(--coral-600); }

.btn-secondary {
  background: var(--white);
  color: var(--purple-700);
  border: 2px solid var(--purple-200);
}
.btn-secondary:hover { border-color: var(--purple-500); color: var(--purple-700); }

.btn-ghost {
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255,255,255,0.4);
}
.btn-ghost:hover { background: rgba(255,255,255,0.1); border-color: var(--white); }

.btn-whatsapp {
  background: var(--green-500);
  color: var(--white);
  box-shadow: 0 8px 22px -6px rgba(37, 211, 102, 0.5);
}
.btn-whatsapp:hover { background: var(--green-600); }

.btn-lg { padding: 18px 34px; font-size: 17px; }
.btn-sm { padding: 10px 18px; font-size: 14px; }

/* === Pills/Badges === */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.pill-coral { background: var(--coral-500); color: var(--white); }
.pill-yellow { background: var(--yellow-500); color: var(--purple-900); }
.pill-purple { background: var(--purple-500); color: var(--white); }
.pill-light { background: var(--white); color: var(--purple-700); border: 1px solid var(--purple-200); }

/* === Type === */
.eyebrow {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--purple-500);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(36px, 5vw, 60px); }
h2 { font-size: clamp(30px, 4vw, 48px); }
h3 { font-size: clamp(22px, 2.4vw, 28px); }

p { line-height: 1.55; margin: 0; }

.text-yellow { color: var(--yellow-500); }
.text-coral { color: var(--coral-500); }
.text-purple { color: var(--purple-500); }

/* === Sections === */
section { position: relative; }

.section-pad { padding: clamp(64px, 9vw, 120px) 0; }
.section-pad-sm { padding: clamp(48px, 6vw, 80px) 0; }

.bg-purple-deep {
  background:
    radial-gradient(ellipse at 80% 30%, var(--purple-500) 0%, transparent 60%),
    radial-gradient(ellipse at 20% 80%, var(--purple-400) 0%, transparent 50%),
    var(--purple-800);
  color: var(--white);
}
.bg-purple-flat { background: var(--purple-700); color: var(--white); }
.bg-purple-soft { background: var(--purple-100); color: var(--ink-900); }
.bg-white-soft { background: var(--off-white); color: var(--ink-900); }

/* Header / Logo */
.brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 0.95;
}
.brand-logo .lockup {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand-logo .divider {
  width: 1px;
  height: 38px;
  background: rgba(255,255,255,0.4);
}
.brand-logo .word {
  font-size: 20px;
  font-style: italic;
}
.brand-logo .word .top { display: block; font-size: 14px; opacity: 0.85; letter-spacing: 0.18em; font-style: normal; }
.brand-logo .ml-tag { font-size: 18px; font-weight: 900; }
.brand-logo .ml-tag .top { font-size: 11px; opacity: 0.85; letter-spacing: 0.18em; display: block; font-weight: 700; }

/* Decorative blob */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  opacity: 0.6;
}

/* Helpers */
.grid { display: grid; gap: 24px; }
.flex { display: flex; }
.center { display: flex; align-items: center; justify-content: center; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Animations */
@keyframes float-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* Floating WhatsApp */
.fab-whatsapp {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--green-500);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 32px -8px rgba(37, 211, 102, 0.6);
  z-index: 50;
  transition: transform 0.18s ease;
}
.fab-whatsapp:hover { transform: scale(1.08); }
.fab-whatsapp svg { width: 32px; height: 32px; fill: white; }

/* Scrollbar in light areas */
::selection { background: var(--purple-500); color: white; }

/* Responsive */
@media (max-width: 900px) {
  .container { padding: 0 18px; }
}