/* ========================================
   GenApp Tech — light-theme.css
   Vista previa: fondo claro + header/footer con color
   ======================================== */

/* ─── Variables: fondos claros ─── */
:root {
  --bg-base:       #f5f6fa;
  --bg-surface:    #ffffff;
  --bg-card:       #ffffff;
  --bg-card-hover: #f8f9ff;

  --border:        rgba(0, 0, 0, 0.09);
  --border-accent: rgba(46, 43, 87, 0.25);

  --text-primary:   #13132a;
  --text-secondary: #4a5568;
  --text-muted:     #94a3b8;

  --shadow-card:      0 2px 14px rgba(0, 0, 0, 0.07);
  --shadow-glow-blue: 0 0 40px rgba(46, 43, 87, 0.12);
  --shadow-glow-red:  0 0 40px rgba(228, 61, 44, 0.18);
}

/* ─── Navbar: navy medio ─── */
.navbar {
  background: #3E3B70 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}
.navbar.scrolled {
  background: #3E3B70 !important;
  box-shadow: 0 4px 24px rgba(46, 43, 87, 0.3) !important;
}
.nav-link { color: rgba(255, 255, 255, 0.82) !important; }
.nav-link:hover,
.nav-link.active {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.1) !important;
}
.nav-link.nav-cta {
  background: var(--red) !important;
  color: #fff !important;
}
.logo-text { color: #fff !important; }
.nav-toggle span { background: #fff !important; }

@media (max-width: 768px) {
  .nav-links {
    background: #3E3B70 !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
  }
}

/* ─── Hero: fondo lavanda que se funde con blanco ─── */
.hero {
  background: linear-gradient(to bottom, #B4B2D0 0%, #ffffff 100%) !important;
}
.hero-orb { display: none !important; }
.hero-grid { opacity: 0.12 !important; }
.hero-container { padding-bottom: 48px !important; }
.hero-actions { margin-bottom: 0 !important; }
.hero-badge {
  background: rgba(46, 43, 87, 0.08) !important;
  border-color: rgba(46, 43, 87, 0.2) !important;
  color: #2E2B57 !important;
}
.hero-title { color: #13132a !important; }
.hero-subtitle { color: #4a5568 !important; }
.stat-number { color: #13132a !important; }
.stat-label  { color: #6b68a0 !important; }
.stat-divider { background: rgba(46, 43, 87, 0.2) !important; }
.btn-ghost {
  background: rgba(46, 43, 87, 0.08) !important;
  color: #2E2B57 !important;
  border-color: rgba(46, 43, 87, 0.25) !important;
}
.btn-ghost:hover {
  background: rgba(46, 43, 87, 0.15) !important;
}

/* ─── Sección tag ─── */
.section-tag {
  color: #2E2B57 !important;
  background: rgba(46, 43, 87, 0.07) !important;
  border-color: rgba(46, 43, 87, 0.2) !important;
}

/* ─── Títulos de sección ─── */
.section-title { color: #13132a; }
.section-subtitle { color: #4a5568; }

/* ─── Botón ghost (en secciones claras) ─── */
.btn-ghost {
  background: rgba(46, 43, 87, 0.06) !important;
  color: #13132a !important;
  border-color: rgba(46, 43, 87, 0.2) !important;
}
.btn-ghost:hover {
  background: rgba(46, 43, 87, 0.12) !important;
  color: #13132a !important;
}

/* ─── Sección Problema ─── */
.problema { background: #ffffff; }
.problema-label { color: #13132a; }
.problema-desc { color: #4a5568; }
.problema-metrics {
  border-left-color: rgba(0, 0, 0, 0.09);
}

/* ─── Feature cards ─── */
.features { background: #f5f6fa; }
.feature-card {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
}
.feature-card:hover {
  box-shadow: 0 8px 32px rgba(46, 43, 87, 0.1), 0 2px 8px rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(46, 43, 87, 0.22) !important;
}
.feature-card::before {
  background: linear-gradient(90deg, transparent, rgba(46, 43, 87, 0.4), transparent) !important;
}
.feature-title { color: #13132a; }
.feature-desc  { color: #4a5568; }
.feature-list li { color: #4a5568; }

/* ─── Demo IA section ─── */
.demo { background: #ffffff; }
.demo-title { color: #13132a; }
.demo-lead, .demo-body { color: #4a5568; }
.demo-check { color: #4a5568; }

/* ─── Planes ─── */
.plans { background: #f5f6fa; }
.plan-card {
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06) !important;
}
.plan-name   { color: #13132a; }
.plan-desc   { color: #4a5568; }
.plan-amount { color: #13132a; }
.plan-period { color: #4a5568; }
.plan-feature { color: #4a5568; }
.plans-meeting-title { color: #13132a; }
.plans-meeting-sub   { color: #4a5568; }

/* ─── Contacto ─── */
.contact { background: #ffffff; }
.contact-card {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
}
.contact-card:hover {
  box-shadow: 0 8px 28px rgba(46, 43, 87, 0.1) !important;
  border-color: rgba(46, 43, 87, 0.22) !important;
}
.contact-label { color: #13132a !important; }
.contact-value { color: #4a5568 !important; }

/* ─── Footer: color de marca suavizado ─── */
.footer {
  background: #B4B2D0 !important;
  border-top: 1px solid rgba(46, 43, 87, 0.12) !important;
}
.footer-tagline  { color: rgba(46, 43, 87, 0.65) !important; }
.footer-col-title { color: #2E2B57 !important; }
.footer-col-links a { color: rgba(46, 43, 87, 0.75) !important; }
.footer-col-links a:hover { color: #1a1840 !important; }
.footer-bottom-inner { color: rgba(46, 43, 87, 0.55) !important; }
.footer-bottom-inner a { color: rgba(46, 43, 87, 0.75) !important; }
.footer-bottom-inner a:hover { color: #1a1840 !important; }
.footer-divider { border-color: rgba(46, 43, 87, 0.12) !important; }

/* ─── Botón volver arriba ─── */
.back-to-top {
  background: #B4B2D0 !important;
  color: #2E2B57 !important;
  box-shadow: 0 4px 20px rgba(46, 43, 87, 0.2) !important;
}

/* ========================================
   Automatizaciones IA — overrides adicionales
   ======================================== */

/* ─── Hero IA: fondo lavanda que se funde con blanco ─── */
.ai-hero {
  background: linear-gradient(to bottom, #B4B2D0 0%, #ffffff 100%) !important;
}
.ai-hero .hero-orb { display: none !important; }
.ai-hero .hero-grid { opacity: 0.12 !important; }
.ai-hero .ai-hero-title { color: #13132a !important; }
.ai-hero .title-gradient { color: #2E2B57 !important; }
.ai-hero .ai-hero-subtitle { color: #4a5568 !important; }
.ai-hero .eyebrow-page { color: #4a5568 !important; }

/* ─── Sección demos (fondo blanco) ─── */
.demos-grid-section { background: #ffffff; }

/* ─── Sección Coming Soon ─── */
.ai-coming { background: #E1F1DA; }

.coming-card {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
}
.coming-card:hover {
  box-shadow: 0 8px 32px rgba(36, 163, 221, 0.12), 0 4px 16px rgba(0, 0, 0, 0.06) !important;
  border-color: rgba(36, 163, 221, 0.3) !important;
}
.coming-title { color: #13132a; }
.coming-subtitle { color: #4a5568; }

/* ─── Browser mockup del video Dashboard ─── */
.demo-cell-video {
  box-shadow: 0 0 30px rgba(249, 172, 25, 0.08), 0 8px 28px rgba(0, 0, 0, 0.08) !important;
}
.demo-cell-video:hover {
  box-shadow: 0 0 50px rgba(249, 172, 25, 0.14), 0 12px 32px rgba(0, 0, 0, 0.1) !important;
}
.demo-video-topbar {
  background: rgba(46, 43, 87, 0.04) !important;
}

/* ─── Botón ghost (fondo claro) ─── */
.ai-hero .btn-ghost {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}
.ai-hero .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}