/* ============================================================
   Budlex · Landing
   Tema "Gradient Black": negro profundo + glow violeta.
   Tokens espejo de app/globals.css del producto.
   ============================================================ */
:root {
  --bg-1: #060409;
  --bg-2: #14121c;

  --card-1: linear-gradient(180deg, #16131f 0%, #100d17 100%);
  --card-2: linear-gradient(180deg, #1b1726 0%, #131019 100%);
  --surface: #14121c;

  --accent: #7c83ff;
  --accent-2: #a78bfa;
  --accent-hover: #949aff;
  --accent-soft: rgba(124, 131, 255, 0.16);
  --accent-glow: rgba(124, 131, 255, 0.45);

  --income: #34d399;
  --income-soft: rgba(52, 211, 153, 0.15);
  --expense: #fb7185;
  --expense-soft: rgba(251, 113, 133, 0.16);
  --info: #38bdf8;
  --info-soft: rgba(56, 189, 248, 0.16);

  --text-main: #eef1fb;
  --text-muted: #a2a9cb;
  --text-faint: #6d7499;

  --hairline: rgba(255, 255, 255, 0.09);
  --fill: rgba(255, 255, 255, 0.05);
  --fill-strong: rgba(255, 255, 255, 0.08);

  --font-base: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "JetBrains Mono", monospace;

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 26px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  min-height: 100dvh;
  color: var(--text-main);
  background-color: var(--bg-1);
  /* La firma visual del producto: negro + glow violeta arriba y en las esquinas. */
  background-image:
    radial-gradient(130% 90% at 50% -20%, #1d1740 0%, rgba(12, 10, 21, 0) 46%),
    radial-gradient(70% 55% at 100% 0%, rgba(124, 131, 255, 0.1), transparent 55%),
    radial-gradient(80% 60% at 0% 100%, rgba(139, 92, 246, 0.09), transparent 55%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  font-family: var(--font-base);
  line-height: 1.6;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { text-decoration: none; color: inherit; }
button { font-family: inherit; }
::selection { background: var(--accent-soft); color: #fff; }

/* === PROGRESO DE SCROLL === */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  z-index: 9999; transition: width 0.1s linear;
  box-shadow: 0 0 12px var(--accent-glow);
}

/* === GLOW DEL CURSOR === */
.cursor-glow {
  position: fixed; top: 0; left: 0; width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(124, 131, 255, 0.07) 0%, transparent 62%);
  pointer-events: none; z-index: 1; border-radius: 50%;
  opacity: 0;
}
@media (hover: hover) { .cursor-glow { opacity: 1; } }

/* === ORBES DE LUZ === */
.glow-orb { position: absolute; border-radius: 50%; filter: blur(110px); opacity: 0.16; z-index: 0; pointer-events: none; }
.glow-orb.top-left { width: 620px; height: 620px; background: var(--accent); top: -220px; left: -180px; }
.glow-orb.center { width: 820px; height: 820px; background: var(--accent-2); top: 12%; left: 50%; transform: translateX(-50%); opacity: 0.1; }
.glow-orb.bottom-right { width: 520px; height: 520px; background: #8b5cf6; bottom: -120px; right: -120px; opacity: 0.09; }
.glow-orb.small { width: 320px; height: 320px; }

.float-slow { animation: float-slow 22s ease-in-out infinite; }
.float-slow-rev { animation: float-slow 26s ease-in-out infinite reverse; }
.pulse { animation: pulse-orb 7s ease-in-out infinite; }
@keyframes float-slow {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(70px, 50px); }
}
@keyframes pulse-orb {
  0%, 100% { opacity: 0.08; transform: translateX(-50%) scale(1); }
  50% { opacity: 0.15; transform: translateX(-50%) scale(1.08); }
}

.particles-canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* === NAVBAR === */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  padding: 16px 24px;
  background: rgba(6, 4, 9, 0.55);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: padding 0.3s, background 0.3s, border-color 0.3s;
}
.navbar.scrolled {
  padding: 10px 24px;
  background: rgba(6, 4, 9, 0.86);
  border-bottom-color: var(--hairline);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45);
}
.nav-content { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.logo { display: flex; align-items: center; gap: 11px; }
.logo-icon {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 11px; color: #fff;
  background: linear-gradient(135deg, #6d5ef6 0%, #9b5cf6 100%);
  box-shadow: 0 6px 22px rgba(124, 131, 255, 0.35);
  display: grid; place-items: center;
}
.logo-icon.small { width: 32px; height: 32px; border-radius: 9px; }
.logo-icon svg { width: 100%; height: 100%; }
.logo-word { font-size: 21px; font-weight: 700; letter-spacing: -0.03em; color: var(--text-main); }

.nav-links { display: flex; gap: 26px; }
.nav-links a { color: var(--text-muted); font-size: 14.5px; font-weight: 500; position: relative; transition: color 0.25s; }
.nav-links a::after {
  content: ''; position: absolute; left: 0; bottom: -5px; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 2px; transition: width 0.3s;
}
.nav-links a:hover { color: var(--text-main); }
.nav-links a:hover::after { width: 100%; }

.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-toggle {
  display: none; width: 40px; height: 40px; border: 1px solid var(--hairline);
  background: var(--fill); border-radius: 11px; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.nav-toggle span { display: block; width: 16px; height: 1.8px; background: var(--text-main); border-radius: 2px; transition: transform 0.3s, opacity 0.2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.8px) rotate(-45deg); }

/* === BOTONES === */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: var(--r-sm);
  font-weight: 600; font-size: 14.5px; line-height: 1; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer;
  position: relative; overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.3, 1), background 0.25s, box-shadow 0.25s, border-color 0.25s, color 0.25s;
}
.btn-lg { padding: 15px 28px; font-size: 15.5px; border-radius: var(--r-md); }
.full-width { width: 100%; }

.btn-primary {
  background: linear-gradient(135deg, #6d5ef6 0%, #9b5cf6 100%);
  color: #fff;
  box-shadow: 0 8px 26px -8px var(--accent-glow);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -10px var(--accent-glow); }

.btn-secondary { background: var(--fill); color: var(--text-main); border-color: var(--hairline); }
.btn-secondary:hover { background: var(--fill-strong); border-color: rgba(255, 255, 255, 0.18); transform: translateY(-2px); }

.btn-outline { background: transparent; color: var(--accent); border-color: rgba(124, 131, 255, 0.4); }
.btn-outline:hover { background: var(--accent-soft); border-color: var(--accent); transform: translateY(-2px); }

.btn-ghost { background: transparent; color: var(--text-muted); padding: 11px 14px; }
.btn-ghost:hover { color: var(--text-main); background: var(--fill); }

.shimmer::before {
  content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transition: left 0.65s;
}
.shimmer:hover::before { left: 100%; }

/* === HERO === */
.hero {
  padding: 150px 24px 90px; text-align: center;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
}
.hero-content { max-width: 820px; margin: 0 auto; z-index: 10; position: relative; }

.badge {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--accent-soft); color: var(--accent-2);
  border: 1px solid rgba(124, 131, 255, 0.28);
  padding: 8px 16px; border-radius: 100px;
  font-size: 12.5px; font-weight: 600; letter-spacing: -0.01em;
  margin-bottom: 26px;
  box-shadow: 0 0 34px rgba(124, 131, 255, 0.12);
}
.badge-dot { width: 7px; height: 7px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 12px var(--accent); animation: dot-pulse 1.8s ease-in-out infinite; }
@keyframes dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(1.35); }
}

.hero-title {
  font-size: clamp(42px, 6.2vw, 76px);
  font-weight: 800; line-height: 1.03; letter-spacing: -0.04em;
  margin-bottom: 22px;
}
.gradient-text {
  background: linear-gradient(120deg, #7c83ff 0%, #a78bfa 45%, #7c83ff 100%);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: gradient-slide 5s linear infinite;
  filter: drop-shadow(0 0 26px rgba(124, 131, 255, 0.28));
}
@keyframes gradient-slide {
  0% { background-position: 0% center; }
  100% { background-position: 220% center; }
}

.hero-subtitle {
  font-size: clamp(16.5px, 1.9vw, 20px); color: var(--text-muted);
  max-width: 640px; margin: 0 auto 38px; line-height: 1.62;
}
.hero-actions { display: flex; gap: 14px; justify-content: center; margin-bottom: 52px; flex-wrap: wrap; }

.hero-stats { display: flex; gap: 52px; justify-content: center; margin-bottom: 76px; flex-wrap: wrap; }
.hero-stat { display: flex; flex-direction: column; gap: 5px; }
.hero-stat-num {
  font-family: var(--font-mono); font-size: 34px; font-weight: 600;
  color: var(--accent-2); letter-spacing: -0.03em; line-height: 1;
  text-shadow: 0 0 26px rgba(124, 131, 255, 0.35);
}
.hero-stat-label { font-size: 12.5px; color: var(--text-faint); letter-spacing: -0.005em; }

/* === MOCKUP DEL PANEL === */
.mockup-wrapper { width: 100%; max-width: 1100px; margin: 0 auto; perspective: 2200px; z-index: 10; position: relative; }
.mockup-glow {
  position: absolute; inset: -50px;
  background: radial-gradient(ellipse at center, rgba(124, 131, 255, 0.18), transparent 62%);
  filter: blur(60px); z-index: -1;
  animation: glow-breath 5s ease-in-out infinite;
}
@keyframes glow-breath {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

.bx-app {
  display: grid; grid-template-columns: 194px 1fr;
  height: 580px; overflow: hidden;
  background: #0a0810;
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.65), 0 0 100px -30px var(--accent-glow);
  transform: rotateX(6deg) translateY(-10px);
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.3, 1);
  font-size: 13px; color: var(--text-main); text-align: left;
}
.bx-app:hover { transform: rotateX(0) translateY(0); }

/* Sidebar */
.bx-sidebar { background: #08060d; border-right: 1px solid var(--hairline); display: flex; flex-direction: column; }
.bx-brand { display: flex; align-items: center; gap: 9px; padding: 16px 16px 14px; border-bottom: 1px solid var(--hairline); }
.bx-brand-mark {
  width: 26px; height: 26px; border-radius: 8px; color: #fff;
  background: linear-gradient(135deg, #6d5ef6 0%, #9b5cf6 100%);
  display: grid; place-items: center; flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(124, 131, 255, 0.35);
}
.bx-brand-mark svg { width: 100%; height: 100%; }
.bx-brand-word { font-size: 15px; font-weight: 700; letter-spacing: -0.03em; }

.bx-nav { flex: 1; padding: 10px 8px; display: flex; flex-direction: column; gap: 1px; overflow: hidden; }
.bx-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 9px;
  color: var(--text-faint); font-size: 12.5px; font-weight: 500;
  transition: background 0.15s, color 0.15s;
}
.bx-nav-item svg { width: 15px; height: 15px; flex-shrink: 0; }
.bx-nav-item:hover { background: var(--fill); color: var(--text-muted); }
.bx-nav-item.active { background: var(--accent-soft); color: var(--accent-2); font-weight: 600; }

.bx-sidebar-foot { display: flex; align-items: center; gap: 9px; padding: 12px 14px; border-top: 1px solid var(--hairline); }
.bx-user-chip {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, #6d5ef6, #9b5cf6); color: #fff;
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
}
.bx-user-meta { display: flex; flex-direction: column; line-height: 1.25; }
.bx-user-meta .n { font-size: 11.5px; font-weight: 600; }
.bx-user-meta .r { font-size: 9.5px; color: var(--accent-2); font-weight: 600; letter-spacing: 0.02em; }

/* Main */
.bx-main { display: flex; flex-direction: column; min-width: 0; }
.bx-topbar { display: flex; align-items: center; gap: 14px; padding: 12px 20px; border-bottom: 1px solid var(--hairline); }
.bx-title { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; }
.bx-clock {
  margin-left: auto; display: flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint);
  white-space: nowrap;
}
.bx-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--income); box-shadow: 0 0 8px var(--income); animation: dot-pulse 2s ease-in-out infinite; }
.bx-add-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 11px; border: none; border-radius: 8px;
  background: linear-gradient(135deg, #6d5ef6, #9b5cf6); color: #fff;
  font-size: 11.5px; font-weight: 600; cursor: default;
  box-shadow: 0 4px 14px -4px var(--accent-glow);
}

.bx-content { padding: 16px; flex: 1; display: flex; flex-direction: column; gap: 13px; overflow: hidden; }
.bx-headline { display: grid; grid-template-columns: 1.05fr 1fr; gap: 13px; }

/* Tarjeta de saldo */
.bx-hero-card {
  background: var(--card-2); border: 1px solid var(--hairline);
  border-radius: var(--r-md); padding: 16px; position: relative; overflow: hidden;
}
.bx-hero-card::after {
  content: ''; position: absolute; right: -50px; top: -60px;
  width: 190px; height: 190px; border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 131, 255, 0.22) 0%, transparent 70%);
  filter: blur(18px); pointer-events: none;
}
.bx-eyebrow { font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent-2); margin-bottom: 10px; }
.bx-balance-label { font-size: 11px; color: var(--text-faint); margin-bottom: 2px; }
.bx-balance { font-family: var(--font-mono); font-size: 32px; font-weight: 600; letter-spacing: -0.035em; line-height: 1.1; margin-bottom: 14px; }
.bx-balance span { font-size: 18px; color: var(--text-muted); }
.bx-hero-meta { display: flex; gap: 18px; padding-top: 12px; border-top: 1px solid var(--hairline); }
.bx-meta-item { display: flex; flex-direction: column; gap: 3px; }
.bx-meta-item .l { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-faint); }
.bx-meta-item .v { font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: -0.02em; }
.income { color: var(--income); }
.expense { color: var(--expense); }

/* KPIs */
.bx-kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bx-kpi {
  background: var(--card-1); border: 1px solid var(--hairline);
  border-radius: var(--r-sm); padding: 11px 13px; position: relative; overflow: hidden;
}
.bx-kpi-bar { position: absolute; top: 0; left: 0; right: 0; height: 2px; }
.bx-kpi-bar.accent { background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); }
.bx-kpi-bar.info { background: var(--info); }
.bx-kpi-bar.expense { background: var(--expense); }
.bx-kpi-bar.income { background: var(--income); }
.bx-kpi-label { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-faint); margin-bottom: 6px; }
.bx-kpi-value { font-family: var(--font-mono); font-size: 20px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; margin-bottom: 4px; }
.bx-kpi-delta { font-size: 9.5px; color: var(--text-faint); }

/* Paneles */
.bx-panels { display: grid; grid-template-columns: 1.15fr 1fr; gap: 13px; flex: 1; min-height: 0; }
.bx-right { display: flex; flex-direction: column; gap: 13px; min-height: 0; }
.bx-panel {
  background: var(--card-1); border: 1px solid var(--hairline);
  border-radius: var(--r-md); overflow: hidden;
  display: flex; flex-direction: column;
}
.bx-panel-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--hairline); }
.bx-panel-head h3 { font-size: 12px; font-weight: 600; letter-spacing: -0.01em; }
.bx-count { margin-left: auto; font-family: var(--font-mono); font-size: 9.5px; color: var(--text-faint); }
.bx-panel-body { display: flex; flex-direction: column; }

.bx-row { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.045); }
.bx-row:last-child { border-bottom: none; }
.bx-cat-icon {
  width: 27px; height: 27px; border-radius: 9px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 13px;
  background: var(--fill); border: 1px solid var(--hairline);
}
.bx-cat-icon.income { background: var(--income-soft); border-color: rgba(52, 211, 153, 0.25); }
.bx-cat-icon.expense { background: var(--expense-soft); border-color: rgba(251, 113, 133, 0.22); }
.bx-row-meta { flex: 1; min-width: 0; }
.bx-row-meta .n { font-size: 12px; font-weight: 500; }
.bx-row-meta .s { font-size: 10px; color: var(--text-faint); margin-top: 1px; }
.bx-amount { font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; }

/* Barras por categoría */
.bx-cats { padding: 12px 14px; display: flex; flex-direction: column; gap: 9px; }
.bx-cat-row { display: grid; grid-template-columns: 74px 1fr 40px; align-items: center; gap: 9px; }
.bx-cat-row .c { font-size: 10.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bx-cat-row .track { height: 6px; border-radius: 4px; background: var(--fill); overflow: hidden; }
.bx-cat-row .fill { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.bx-cat-row .v { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); text-align: right; }

/* Presupuesto en el mockup */
.bx-budget { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.bx-budget-nums { display: flex; justify-content: space-between; gap: 8px; }
.bx-budget-nums > div { display: flex; flex-direction: column; gap: 2px; }
.bx-budget-nums .l { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-faint); }
.bx-budget-nums .v { font-family: var(--font-mono); font-size: 14px; font-weight: 600; letter-spacing: -0.02em; }
.bx-budget-track { height: 7px; border-radius: 4px; background: var(--fill); overflow: hidden; }
.bx-budget-track span { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 0 12px -2px var(--accent-glow); }
.bx-budget-foot { font-size: 10.5px; color: var(--text-faint); }
.bx-budget-foot strong { color: var(--income); }

/* Tarjetas flotantes */
.floating-card {
  position: absolute; z-index: 11;
  display: flex; align-items: center; gap: 12px;
  padding: 13px 17px; border-radius: var(--r-md);
  background: rgba(20, 18, 28, 0.94);
  border: 1px solid rgba(124, 131, 255, 0.22);
  backdrop-filter: blur(18px);
  box-shadow: 0 24px 55px rgba(0, 0, 0, 0.55), 0 0 34px -12px var(--accent-glow);
}
.floating-card strong { display: block; font-size: 12.5px; margin-bottom: 2px; }
.floating-card span { font-size: 11px; color: var(--text-muted); }
.fc-icon { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.fc-icon svg { width: 16px; height: 16px; }
.fc-icon.accent { background: var(--accent-soft); color: var(--accent-2); }
.fc-icon.expense { background: var(--expense-soft); color: var(--expense); }
/* card-1 arranca bajo el ítem activo del sidebar para no taparlo. */
.card-1 { top: 168px; left: -34px; }
.card-2 { bottom: 66px; right: -26px; }
.float-bob { animation: float-bob 4.4s ease-in-out infinite; }
.float-bob-rev { animation: float-bob 5s ease-in-out infinite reverse; }
@keyframes float-bob {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-13px) rotate(1.5deg); }
}

/* === MARQUEE === */
.marquee-section {
  padding: 54px 24px; position: relative; z-index: 2;
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  background: rgba(0, 0, 0, 0.2);
}
.marquee-label { text-align: center; color: var(--text-faint); font-size: 13px; margin-bottom: 22px; letter-spacing: 0.02em; }
.marquee {
  overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track { display: flex; align-items: center; gap: 26px; white-space: nowrap; width: max-content; animation: marquee-scroll 44s linear infinite; }
.marquee-track span { font-size: 19px; font-weight: 700; letter-spacing: 0.02em; color: var(--text-faint); transition: color 0.3s; }
.marquee-track span.sep { color: rgba(124, 131, 255, 0.4); font-weight: 400; }
.marquee-track span:hover { color: var(--accent-2); }
@keyframes marquee-scroll {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

/* === TÍTULOS DE SECCIÓN === */
.section-title {
  text-align: center;
  font-size: clamp(30px, 4vw, 46px); font-weight: 800;
  letter-spacing: -0.035em; line-height: 1.1; margin-bottom: 16px;
}
.section-title.left { text-align: left; }
.section-sub { text-align: center; color: var(--text-muted); font-size: 17px; max-width: 620px; margin: 0 auto 54px; }
.eyebrow {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--accent-2); margin-bottom: 14px;
}

/* === PROBLEMA === */
.problem-section { padding: 100px 24px; position: relative; z-index: 2; }
.problem-content { max-width: 1000px; margin: 0 auto; text-align: center; }
.problem-desc { font-size: 17.5px; color: var(--text-muted); max-width: 700px; margin: 0 auto 60px; line-height: 1.65; }
.metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.metric-card {
  background: var(--card-1); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); padding: 40px 26px;
  position: relative; overflow: hidden; text-align: left;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.3, 1), border-color 0.4s;
}
.metric-card:hover { transform: translateY(-6px); border-color: rgba(124, 131, 255, 0.28); }
.metric-glow {
  position: absolute; top: -50px; right: -50px; width: 160px; height: 160px;
  background: var(--accent); filter: blur(70px); opacity: 0;
  transition: opacity 0.4s; pointer-events: none;
}
.metric-card:hover .metric-glow { opacity: 0.22; }
.metric-number {
  font-family: var(--font-mono); font-size: 54px; font-weight: 600;
  color: var(--accent-2); letter-spacing: -0.05em; line-height: 1;
  margin-bottom: 14px; text-shadow: 0 0 40px rgba(124, 131, 255, 0.3);
  position: relative; z-index: 2;
}
.metric-card p { color: var(--text-muted); font-size: 14.5px; position: relative; z-index: 2; }
.metric-card p strong { color: var(--text-main); font-weight: 600; }

/* === FUNCIONES === */
.features { padding: 110px 24px; max-width: 1180px; margin: 0 auto; position: relative; z-index: 2; }
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(298px, 1fr)); gap: 20px; }
/* Con un número impar de tarjetas la última queda sola a la izquierda: céntrala.
   Si algún día se agrega otra y la fila se completa, el selector deja de aplicar. */
@media (min-width: 964px) {
  .features-grid > .feature-card:last-child:nth-child(3n + 1) { grid-column: 2; }
}
.feature-card {
  background: var(--card-1); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); padding: 30px 26px;
  position: relative; overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.3, 1), border-color 0.4s, box-shadow 0.4s;
}
.feature-card::after {
  content: ''; position: absolute; inset: 0; border-radius: var(--r-lg);
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(124, 131, 255, 0.09), transparent 42%);
  opacity: 0; transition: opacity 0.4s; pointer-events: none;
}
.feature-card:hover { border-color: rgba(124, 131, 255, 0.26); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6); }
.feature-card:hover::after { opacity: 1; }
.feature-icon {
  width: 46px; height: 46px; border-radius: 13px;
  background: var(--accent-soft); color: var(--accent-2);
  border: 1px solid rgba(124, 131, 255, 0.2);
  display: grid; place-items: center; margin-bottom: 20px;
  transition: transform 0.4s, box-shadow 0.4s;
}
.feature-card:hover .feature-icon { transform: scale(1.06); box-shadow: 0 0 26px -6px var(--accent-glow); }
.feature-icon svg { width: 22px; height: 22px; }
.feature-card h3 { font-size: 18.5px; font-weight: 700; letter-spacing: -0.025em; margin-bottom: 10px; position: relative; z-index: 2; }
.feature-card p { color: var(--text-muted); font-size: 14.5px; margin-bottom: 18px; position: relative; z-index: 2; }
.feature-tags { display: flex; flex-wrap: wrap; gap: 6px; position: relative; z-index: 2; }
.feature-tags span {
  font-size: 11px; padding: 4px 10px; border-radius: 100px;
  background: var(--accent-soft); color: var(--accent-2);
  border: 1px solid rgba(124, 131, 255, 0.16);
}

/* === SECCIONES EN DETALLE === */
.deep-section { padding: 100px 24px; position: relative; z-index: 2; overflow: hidden; }
.deep-section.alt { background: rgba(0, 0, 0, 0.22); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.deep-grid { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.deep-grid.reverse .deep-copy { order: 2; }
.deep-grid.reverse .deep-visual { order: 1; }
.deep-desc { font-size: 17px; color: var(--text-muted); line-height: 1.65; margin: 18px 0 26px; }
.deep-desc strong, .deep-note strong { color: var(--text-main); font-weight: 600; }
.deep-note { font-size: 15px; color: var(--text-muted); line-height: 1.65; margin-top: 24px; }
.deep-list { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.deep-list li { display: flex; gap: 13px; align-items: flex-start; font-size: 15px; color: var(--text-muted); }
.deep-list .tick {
  width: 25px; height: 25px; flex-shrink: 0; border-radius: 8px;
  background: var(--accent-soft); color: var(--accent-2);
  border: 1px solid rgba(124, 131, 255, 0.22);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
}
.deep-list strong { color: var(--text-main); font-weight: 600; }

/* Tarjeta visual de presupuesto */
.budget-card, .pnl-card {
  background: var(--card-2); border: 1px solid var(--hairline);
  border-radius: var(--r-xl); padding: 24px;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.8), 0 0 70px -34px var(--accent-glow);
}
.budget-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.bc-title { font-size: 14px; font-weight: 600; letter-spacing: -0.02em; }
.bc-pill {
  margin-left: auto; font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  padding: 4px 9px; border-radius: 100px;
  background: var(--income-soft); color: var(--income);
  border: 1px solid rgba(52, 211, 153, 0.25);
}
.budget-line { padding: 13px 0; border-top: 1px solid var(--hairline); }
.bl-top { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; font-weight: 500; margin-bottom: 9px; }
.bl-diff { font-family: var(--font-mono); font-size: 13px; font-weight: 600; }
.bl-diff.income { color: var(--income); }
.bl-diff.expense { color: var(--expense); }
.bl-bars { display: flex; flex-direction: column; gap: 4px; }
.bl-est, .bl-real { display: block; height: 6px; border-radius: 4px; background: var(--fill); overflow: hidden; }
.bl-est i { display: block; height: 100%; background: rgba(124, 131, 255, 0.28); border-radius: 4px; }
.bl-real i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 4px; }
.bl-real.over i { background: linear-gradient(90deg, var(--expense), #f472b6); }
.bl-foot { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); margin-top: 7px; }

.budget-surplus { margin-top: 20px; padding: 16px; border-radius: var(--r-md); background: var(--accent-soft); border: 1px solid rgba(124, 131, 255, 0.22); }
.bs-head { font-size: 13.5px; margin-bottom: 12px; }
.bs-head strong { color: var(--accent-2); font-weight: 700; }
.bs-options { display: flex; gap: 7px; flex-wrap: wrap; }
.bs-opt {
  flex: 1; min-width: 104px; padding: 9px 8px; border-radius: 10px;
  background: rgba(0, 0, 0, 0.28); border: 1px solid var(--hairline);
  color: var(--text-muted); font-size: 11.5px; font-weight: 500; cursor: default;
  transition: border-color 0.25s, color 0.25s, background 0.25s;
}
.bs-opt.is-on { border-color: var(--accent); color: var(--text-main); background: rgba(124, 131, 255, 0.18); }

/* Tarjeta P&L */
.pnl-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 18px; }
.pnl-name { font-size: 17px; font-weight: 700; letter-spacing: -0.025em; }
.pnl-tag { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.12em; }
.pnl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }
.pnl-cell { background: rgba(0, 0, 0, 0.3); border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: 12px 13px; display: flex; flex-direction: column; gap: 5px; }
.pnl-cell .l { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-faint); }
.pnl-cell .v { font-family: var(--font-mono); font-size: 17px; font-weight: 600; letter-spacing: -0.03em; }
.pnl-break { padding-top: 18px; border-top: 1px solid var(--hairline); }
.pb-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; color: var(--text-muted); margin-bottom: 9px; }
.pb-top strong { font-family: var(--font-mono); font-size: 15px; color: var(--accent-2); }
.pb-track { height: 8px; border-radius: 5px; background: var(--fill); overflow: hidden; }
.pb-track span { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--income), #4ade80); box-shadow: 0 0 14px -3px var(--income); }
.pb-foot { font-size: 11.5px; color: var(--income); margin-top: 8px; }

/* === CÓMO FUNCIONA === */
.steps-section { padding: 100px 24px; max-width: 1100px; margin: 0 auto; position: relative; z-index: 2; }
.steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 20px; }
.step-card {
  background: var(--card-1); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); padding: 30px 26px;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.3, 1), border-color 0.4s;
}
.step-card:hover { transform: translateY(-6px); border-color: rgba(124, 131, 255, 0.26); }
.step-num {
  font-family: var(--font-mono); font-size: 13px; font-weight: 600;
  color: var(--accent-2); letter-spacing: 0.08em; margin-bottom: 14px;
}
.step-card h3 { font-size: 18.5px; font-weight: 700; letter-spacing: -0.025em; margin-bottom: 9px; }
.step-card p { color: var(--text-muted); font-size: 14.5px; }

/* === PRECIOS === */
.pricing { padding: 80px 24px 110px; max-width: 1080px; margin: 0 auto; position: relative; z-index: 2; }
.pricing-subtitle { text-align: center; color: var(--text-muted); font-size: 17px; margin-bottom: 46px; }
.billing-toggle { display: flex; align-items: center; justify-content: center; gap: 15px; margin-bottom: 46px; }
.toggle-label { font-weight: 600; font-size: 14.5px; color: var(--text-faint); cursor: pointer; position: relative; transition: color 0.3s; }
.toggle-label.active { color: var(--text-main); }
.discount-badge {
  position: absolute; top: -25px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, #6d5ef6, #9b5cf6); color: #fff;
  font-size: 10.5px; font-weight: 700; padding: 4px 9px; border-radius: 100px;
  white-space: nowrap; box-shadow: 0 4px 16px -4px var(--accent-glow);
}
.toggle-switch { width: 54px; height: 30px; border-radius: 100px; background: var(--fill-strong); border: 1px solid var(--hairline); position: relative; cursor: pointer; transition: background 0.3s, border-color 0.3s; }
.toggle-switch.annual { background: linear-gradient(135deg, #6d5ef6, #9b5cf6); border-color: transparent; box-shadow: 0 0 20px -6px var(--accent-glow); }
.toggle-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.toggle-knob { width: 22px; height: 22px; border-radius: 50%; background: #fff; position: absolute; top: 3px; left: 3px; transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); }
.toggle-switch.annual .toggle-knob { transform: translateX(24px); }

.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; align-items: stretch; }
@media (min-width: 820px) { .pricing-grid { grid-template-columns: repeat(2, minmax(320px, 460px)); justify-content: center; } }

.pricing-card {
  background: var(--card-1); border: 1px solid var(--hairline);
  border-radius: var(--r-xl); padding: 38px 34px;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
}
.pricing-card.premium {
  background: var(--card-2);
  border-color: rgba(124, 131, 255, 0.32);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9), 0 0 80px -40px var(--accent-glow);
}
.popular-tag {
  position: absolute; top: 18px; right: 18px;
  background: linear-gradient(135deg, #6d5ef6, #9b5cf6); color: #fff;
  font-size: 10.5px; font-weight: 700; padding: 5px 11px; border-radius: 100px;
  box-shadow: 0 4px 16px -4px var(--accent-glow); z-index: 3;
}
.pricing-header { text-align: center; margin-bottom: 26px; position: relative; z-index: 2; }
.pricing-header h3 { font-size: 21px; font-weight: 700; letter-spacing: -0.025em; margin-bottom: 8px; }
.pricing-card-desc { font-size: 13.5px; color: var(--text-muted); margin-bottom: 22px; }
.price { display: flex; justify-content: center; align-items: flex-start; gap: 3px; color: var(--text-main); }
.currency { font-family: var(--font-mono); font-size: 22px; font-weight: 500; margin-top: 10px; color: var(--text-muted); }
.amount {
  font-family: var(--font-mono); font-size: 66px; font-weight: 600;
  line-height: 1; letter-spacing: -0.05em;
}
.pricing-card.premium .amount { color: var(--accent-2); text-shadow: 0 0 44px rgba(124, 131, 255, 0.35); }
.period { font-size: 15px; color: var(--text-faint); align-self: flex-end; margin-bottom: 10px; }
.old-price { font-size: 13px; color: var(--text-faint); margin-top: 10px; }

.pricing-trial {
  text-align: center; padding: 11px; border-radius: var(--r-sm); margin-bottom: 22px;
  background: var(--accent-soft); color: var(--accent-2);
  border: 1px dashed rgba(124, 131, 255, 0.42);
  font-size: 13.5px; font-weight: 600; position: relative; z-index: 2;
}

.pricing-features { list-style: none; flex: 1; margin-bottom: 26px; position: relative; z-index: 2; }
.pricing-features li { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 13px; font-size: 14.5px; color: var(--text-muted); }
.pricing-features li strong { color: var(--text-main); font-weight: 600; }
.pricing-features li svg {
  width: 19px; height: 19px; flex-shrink: 0; margin-top: 1px; padding: 3px;
  border-radius: 50%; background: var(--accent-soft); color: var(--accent-2);
}
.pricing-features li.off { color: var(--text-faint); }
.pricing-features li.off svg { background: var(--fill); color: var(--text-faint); }

.pricing-card .btn { position: relative; z-index: 2; }
.pricing-under { text-align: center; font-size: 12.5px; color: var(--text-faint); margin-top: 12px; position: relative; z-index: 2; }
.pricing-under a { color: var(--accent-2); font-weight: 600; }
.pricing-under a:hover { text-decoration: underline; }
.pricing-guarantee { text-align: center; color: var(--text-faint); font-size: 12.5px; margin-top: 30px; position: relative; z-index: 2; }

/* === FAQ === */
.faq-section { padding: 90px 24px 110px; max-width: 800px; margin: 0 auto; position: relative; z-index: 2; }
.faq-list { display: flex; flex-direction: column; gap: 10px; margin-top: 44px; }
.faq-item { background: var(--card-1); border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden; transition: border-color 0.3s, background 0.3s; }
.faq-item:hover { border-color: rgba(124, 131, 255, 0.2); }
.faq-item.active { border-color: rgba(124, 131, 255, 0.34); }
.faq-question {
  width: 100%; text-align: left; background: none; border: none;
  padding: 20px 22px; color: var(--text-main);
  font-size: 16px; font-weight: 600; letter-spacing: -0.015em; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq-question::after {
  content: '+'; font-family: var(--font-mono); font-size: 24px; font-weight: 400;
  color: var(--accent-2); line-height: 1; flex-shrink: 0;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.faq-item.active .faq-question::after { transform: rotate(135deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out; }
.faq-item.active .faq-answer { max-height: 340px; }
.faq-answer p { padding: 0 22px 22px; color: var(--text-muted); font-size: 14.5px; line-height: 1.7; }
.faq-answer code { font-family: var(--font-mono); font-size: 13px; padding: 2px 6px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-2); }

/* === CTA FINAL === */
.cta-section { padding: 110px 24px; text-align: center; position: relative; overflow: hidden; z-index: 2; border-top: 1px solid var(--hairline); }
.cta-glow { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at center, rgba(124, 131, 255, 0.14) 0%, transparent 62%); pointer-events: none; }
.cta-section h2 { font-size: clamp(32px, 4.6vw, 50px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; margin-bottom: 20px; position: relative; z-index: 2; }
.cta-section p { color: var(--text-muted); font-size: 18px; max-width: 560px; margin: 0 auto 36px; position: relative; z-index: 2; }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; position: relative; z-index: 2; }

/* === FOOTER === */
footer { border-top: 1px solid var(--hairline); padding: 46px 24px; background: rgba(0, 0, 0, 0.3); position: relative; z-index: 2; }
.footer-content { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.footer-links { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; }
.footer-links a { color: var(--text-muted); font-size: 14px; transition: color 0.25s; }
.footer-links a:hover { color: var(--accent-2); }
.footer-tagline { font-size: 14px; color: var(--text-faint); }

/* ============================================================
   BUDLEX MONEY · club de partners (partners.html)
   ============================================================ */

/* Botón de WhatsApp: verde oficial de la marca (#25D366) y texto blanco. */
.btn-whatsapp {
  background: #25d366;
  color: #ffffff;
  box-shadow: 0 8px 26px -8px rgba(37, 211, 102, 0.55);
}
.btn-whatsapp:hover {
  background: #1ebe5b;
  transform: translateY(-2px);
  box-shadow: 0 16px 42px -10px rgba(37, 211, 102, 0.7);
}
.btn-whatsapp svg { flex-shrink: 0; fill: currentColor; }

.badge-elite {
  background: linear-gradient(135deg, rgba(124, 131, 255, 0.18), rgba(167, 139, 250, 0.1));
  border-color: rgba(167, 139, 250, 0.4);
  color: #cbc3ff;
}

.partner-hero { padding-bottom: 40px; }
.partner-hero .hero-stats { margin-bottom: 20px; }

/* Las dos vías de ganancia */
.earn-section { padding: 100px 24px; max-width: 1080px; margin: 0 auto; position: relative; z-index: 2; }
.earn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px; }
.earn-card {
  background: var(--card-1); border: 1px solid var(--hairline);
  border-radius: var(--r-xl); padding: 34px 30px;
  position: relative; overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.3, 1), border-color 0.4s, box-shadow 0.4s;
}
.earn-card:hover { transform: translateY(-6px); border-color: rgba(124, 131, 255, 0.3); }
.earn-card.featured {
  background: var(--card-2);
  border-color: rgba(124, 131, 255, 0.34);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9), 0 0 80px -42px var(--accent-glow);
}
.earn-tag {
  position: absolute; top: 20px; right: 20px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  padding: 4px 10px; border-radius: 100px;
  background: var(--fill); color: var(--text-faint); border: 1px solid var(--hairline);
}
.earn-tag.hot { background: var(--accent-soft); color: var(--accent-2); border-color: rgba(124, 131, 255, 0.28); }
.earn-icon {
  width: 48px; height: 48px; border-radius: 14px;
  background: var(--accent-soft); color: var(--accent-2);
  border: 1px solid rgba(124, 131, 255, 0.2);
  display: grid; place-items: center; margin-bottom: 20px;
}
.earn-icon svg { width: 23px; height: 23px; }
.earn-card h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.025em; margin-bottom: 14px; }
.earn-headline { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.earn-headline .big {
  font-family: var(--font-mono); font-size: 52px; font-weight: 600;
  letter-spacing: -0.05em; line-height: 1; color: var(--accent-2);
  text-shadow: 0 0 40px rgba(124, 131, 255, 0.3);
}
.earn-headline .unit { font-size: 14.5px; color: var(--text-muted); }
.earn-card > p { color: var(--text-muted); font-size: 15px; margin-bottom: 20px; }
.earn-card > p strong { color: var(--text-main); font-weight: 600; }
.earn-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.earn-list li { display: flex; align-items: center; gap: 11px; font-size: 14.5px; color: var(--text-muted); }
.earn-list li strong { color: var(--text-main); font-weight: 600; }
.earn-list .tick {
  width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%;
  background: var(--income-soft); color: var(--income);
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
}

/* Calculadora */
.calc-section { padding: 100px 24px; position: relative; z-index: 2; overflow: hidden; background: rgba(0, 0, 0, 0.22); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.calc-wrap { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.calc-card {
  background: var(--card-2); border: 1px solid var(--hairline);
  border-radius: var(--r-xl); padding: 28px;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.8), 0 0 70px -34px var(--accent-glow);
}
.calc-field { margin-bottom: 22px; }
.calc-label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.calc-label span { font-size: 13.5px; color: var(--text-muted); }
.calc-label output {
  font-family: var(--font-mono); font-size: 15px; font-weight: 600;
  color: var(--accent-2); letter-spacing: -0.02em;
}
.calc-field input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 4px; outline: none; cursor: pointer;
  background: var(--fill);
}
.calc-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 19px; height: 19px; border-radius: 50%;
  background: linear-gradient(135deg, #6d5ef6, #9b5cf6);
  border: 2px solid #f1f0ff; cursor: pointer;
  box-shadow: 0 2px 12px -2px var(--accent-glow);
}
.calc-field input[type="range"]::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%;
  background: linear-gradient(135deg, #6d5ef6, #9b5cf6);
  border: 2px solid #f1f0ff; cursor: pointer;
}
.calc-field input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.calc-hint { font-size: 11.5px; color: var(--income); margin-top: 8px; min-height: 16px; }

.calc-result { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--hairline); }
.calc-rows { display: flex; flex-direction: column; gap: 9px; margin-bottom: 16px; }
.calc-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; color: var(--text-muted); }
.calc-row strong { font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--text-main); }
.calc-total {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 18px; border-radius: var(--r-md);
  background: var(--accent-soft); border: 1px solid rgba(124, 131, 255, 0.24);
}
.calc-total .l { font-size: 14px; font-weight: 600; }
.calc-total .v {
  font-family: var(--font-mono); font-size: 30px; font-weight: 600;
  letter-spacing: -0.04em; color: var(--accent-2);
  text-shadow: 0 0 30px rgba(124, 131, 255, 0.35);
}
.calc-note { font-size: 11.5px; color: var(--text-faint); margin-top: 14px; text-align: center; }

/* Requisitos */
.req-section { padding: 100px 24px; max-width: 1100px; margin: 0 auto; position: relative; z-index: 2; }
.req-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 20px; }
.req-card {
  background: var(--card-1); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); padding: 30px 26px;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.3, 1), border-color 0.4s;
}
.req-card:hover { transform: translateY(-6px); border-color: rgba(124, 131, 255, 0.26); }
.req-num {
  font-family: var(--font-mono); font-size: 34px; font-weight: 600;
  letter-spacing: -0.04em; line-height: 1; color: var(--accent-2);
  margin-bottom: 14px; text-shadow: 0 0 30px rgba(124, 131, 255, 0.3);
}
.req-card h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.025em; margin-bottom: 9px; }
.req-card p { color: var(--text-muted); font-size: 14.5px; }

.niche-chips { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-top: 32px; }
.niche-chips span {
  font-size: 13px; padding: 8px 16px; border-radius: 100px;
  background: var(--accent-soft); color: var(--accent-2);
  border: 1px solid rgba(124, 131, 255, 0.18);
}

.steps-grid.steps-4 { grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }
.steps-cta { display: flex; justify-content: center; margin-top: 44px; }

.footer-links a.is-current { color: var(--accent-2); font-weight: 600; }
/* El enlace al club destaca sobre el resto del menú. */
.nav-links a.nav-partner,
.footer-links a.nav-partner { color: var(--accent-2); font-weight: 600; }

/* === ANIMACIONES DE APARICIÓN === */
.reveal, .reveal-up, .fade-in {
  opacity: 0;
  transition: opacity 0.75s cubic-bezier(0.2, 0.8, 0.3, 1), transform 0.75s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.reveal { transform: translateY(26px); }
.reveal-up { transform: translateY(42px) scale(0.975); }
.fade-in { transform: none; }
.is-visible { opacity: 1 !important; transform: translateY(0) scale(1) !important; }

.delay-1 { transition-delay: 0.08s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.32s; }
.delay-4 { transition-delay: 0.44s; }

/* === RESPONSIVE === */
@media (max-width: 1024px) {
  .calc-wrap { grid-template-columns: 1fr; gap: 40px; }
  .deep-grid { grid-template-columns: 1fr; gap: 44px; }
  .deep-grid.reverse .deep-copy,
  .deep-grid.reverse .deep-visual { order: initial; }
  .bx-app { height: 545px; }
  .bx-headline { grid-template-columns: 1fr; }
  .bx-panels { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .floating-card { display: none; }
  .nav-toggle { display: flex; }
  .nav-login { display: none; }
  .nav-links {
    position: absolute; top: calc(100% + 8px); left: 16px; right: 16px;
    flex-direction: column; gap: 4px; padding: 10px;
    background: rgba(14, 12, 20, 0.97);
    border: 1px solid var(--hairline); border-radius: var(--r-md);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(18px);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity 0.25s, transform 0.25s, visibility 0.25s;
  }
  .nav-links.open { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav-links a { padding: 11px 12px; border-radius: 9px; font-size: 15px; }
  .nav-links a:hover { background: var(--fill); }
  .nav-links a::after { display: none; }
}

@media (max-width: 768px) {
  .hero { padding: 120px 16px 60px; }
  .hero-actions { flex-direction: column; width: 100%; }
  .hero-actions .btn { width: 100%; }
  .hero-stats { gap: 26px; margin-bottom: 60px; }
  .hero-stat-num { font-size: 27px; }
  .cursor-glow { display: none; }
  .marquee-track span { font-size: 15px; }
  .metrics-grid { grid-template-columns: 1fr; }
  .pricing-card { padding: 30px 22px; }
  .amount { font-size: 54px; }
  .pnl-grid { grid-template-columns: repeat(2, 1fr); }
  .earn-headline .big { font-size: 42px; }
  .calc-card { padding: 22px 18px; }
  .calc-total .v { font-size: 25px; }
  .cta-actions { flex-direction: column; }
  .cta-actions .btn { width: 100%; }

  /* Mockup en móvil: sin sidebar ni perspectiva */
  .bx-app { grid-template-columns: 1fr; height: auto; transform: none; }
  .bx-sidebar { display: none; }
  .bx-kpi-grid { grid-template-columns: 1fr 1fr; }
  .bx-hero-meta { flex-wrap: wrap; gap: 14px; }
  .bx-balance { font-size: 27px; }
  .mockup-wrapper { perspective: none; }
}

@media (max-width: 430px) {
  /* En pantallas angostas el nav lleva logo + CTA + hamburguesa: aprieta todo. */
  .navbar { padding: 12px 14px; }
  .navbar.scrolled { padding: 9px 14px; }
  .nav-content { gap: 10px; }
  .logo-icon { width: 34px; height: 34px; border-radius: 10px; }
  .logo-word { font-size: 18px; }
  .nav-actions .btn-primary { padding: 10px 13px; font-size: 13px; }
  .nav-toggle { width: 36px; height: 36px; border-radius: 10px; }
  .hero-stats { gap: 18px; }
  .bx-topbar { gap: 8px; padding: 11px 14px; }
  .bx-clock { font-size: 9.5px; }
  .bx-add-btn { padding: 6px 9px; font-size: 10.5px; }
  .section-sub, .pricing-subtitle, .problem-desc { font-size: 15.5px; }
}

/* Respeta a quien pidió menos movimiento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal-up, .fade-in { opacity: 1; transform: none; }
}