/* ===================================
   AEO — Color Palette Override
   Variante B: Neon Orange
   #FF5500 · #FF7A33 · #FFAA80
   =================================== */

:root {
  --velo-black: #080810;
  --velo-white: #F5F2EE;
  --velo-speed: #FF5500;
  --velo-surface: #100F1C;
  --velo-gray: #8A8A9A;
  --velo-light: #E8E5E0;
  --velo-border: #1E1D2E;

  /* AEO-specific tokens */
  --aeo-accent: #FF5500;
  --aeo-accent-mid: #FF7A33;
  --aeo-accent-soft: #FFAA80;
}

/* Body */
body {
  background: var(--velo-black);
}

/* Nav */
.nav {
  background: rgba(8, 8, 16, 0.95);
}

/* Logo */
.logo-accent {
  color: var(--aeo-accent);
}

/* Hero gradient glow */
.hero-gradient {
  background: radial-gradient(circle, rgba(255, 85, 0, 0.08) 0%, transparent 70%);
}

/* Hero title — second line italic orange */
.hero-title em,
.hero-title i {
  color: var(--aeo-accent);
  font-style: italic;
}

/* Hero particles */
.hero-points-wrapper .hero-point {
  background-color: var(--aeo-accent);
}

/* Hero button — Neon Orange */
.hero-btn {
  background: var(--aeo-accent);
  border-radius: 100px;
  padding: 18px 48px;
  font-size: 18px;
}

.hero-btn::before {
  border-radius: 100px;
  background: linear-gradient(
    177.95deg,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(255, 255, 255, 0) 100%
  );
}

.hero-btn::after {
  border-radius: 100px;
  background: var(--aeo-accent);
}

.hero-btn:hover {
  background: var(--aeo-accent-mid);
  box-shadow: 0 0 32px rgba(255, 85, 0, 0.35);
}

.hero-btn:hover::after {
  background: var(--aeo-accent-mid);
}

.hero-btn-inner {
  color: var(--velo-white);
}

/* Fold corner — orange */
.hero-btn-fold {
  background: radial-gradient(
    100% 75% at 55%,
    rgba(255, 85, 0, 0.8) 0%,
    rgba(255, 85, 0, 0) 100%
  );
}

.hero-btn-fold::after {
  background-color: var(--velo-black);
}

/* Button particles */
.hero-btn-points .point {
  background-color: rgba(255, 255, 255, 0.9);
}

/* Primary button — pill shape */
.btn-primary {
  background: var(--aeo-accent);
  color: var(--velo-white);
  border-radius: 100px;
}

.btn-primary:hover {
  background: var(--aeo-accent-mid);
  color: var(--velo-white);
}

/* Ghost button */
.btn-ghost {
  border-color: var(--velo-border);
  color: var(--velo-white);
  border-radius: 100px;
}

.btn-ghost:hover {
  border-color: var(--aeo-accent);
  background: rgba(255, 85, 0, 0.05);
}

/* Stats */
.stat-num {
  color: var(--aeo-accent);
}

/* Problem */
.problem-card:hover {
  border-color: var(--aeo-accent);
}

.problem-num {
  color: var(--aeo-accent);
}

/* How it works */
.how-it-works {
  background: var(--velo-surface);
  border-color: var(--velo-border);
}

.step:hover {
  border-color: var(--aeo-accent);
}

.step-num {
  color: var(--aeo-accent);
}

.step-duration {
  color: var(--aeo-accent-mid);
}

/* Services */
.service-card.featured {
  border-color: var(--aeo-accent);
  background: linear-gradient(135deg, var(--velo-surface) 0%, rgba(255, 85, 0, 0.04) 100%);
}

.service-card:hover {
  border-color: var(--velo-gray);
}

#precios:hover {
  border-color: var(--velo-border) !important;
  box-shadow: 0 0 80px rgba(255, 85, 0, 0.15), inset 0 0 20px rgba(255, 85, 0, 0.05) !important;
  transform: translateY(-2px);
}

.featured-badge {
  background: var(--aeo-accent);
  color: var(--velo-white);
}

.service-num {
  color: var(--aeo-accent);
}

.service-pricing {
  color: var(--aeo-accent);
}

.service-includes li:before {
  color: var(--aeo-accent);
}

/* Social proof */
.social-proof {
  background: var(--velo-surface);
  border-color: var(--velo-border);
}

.case-card:hover {
  border-color: var(--aeo-accent);
}

.case-result {
  color: var(--aeo-accent);
}

/* CTA section */
.cta-section .cta-box {
  border-color: var(--aeo-accent);
  background: linear-gradient(135deg, var(--velo-surface) 0%, rgba(255, 85, 0, 0.05) 100%);
}

.cta-points-wrapper .cta-point {
  background-color: var(--aeo-accent);
}

/* Footer */
.footer-tagline {
  color: var(--aeo-accent);
}

/* Velo CTA — orange remap */
.velo-cta {
  --c-color-1: rgba(255, 85, 0, 0.6);
  --c-color-2: rgba(204, 68, 0, 0.8);
  --c-color-3: rgba(255, 122, 51, 0.7);
  --c-color-4: rgba(255, 170, 128, 0.7);
  --c-shadow: rgba(255, 85, 0, 0.4);
  --c-shadow-inset-top: rgba(255, 85, 0, 0.7);
  --c-shadow-inset-bottom: rgba(255, 170, 128, 0.6);
  --c-radial-inner: #cc4400;
  --c-radial-outer: #FF5500;
  --c-color: var(--velo-white);
  background:
    radial-gradient(65.28% 65.28% at 50% 100%, rgba(255, 85, 0, 0.8) 0%, rgba(255, 85, 0, 0) 100%),
    linear-gradient(0deg, #cc4400, #cc4400);
  border-radius: 100px;
}

.velo-cta::before {
  border-radius: 100px;
}

.velo-cta::after {
  background:
    radial-gradient(65.28% 65.28% at 50% 100%, rgba(255, 85, 0, 0.8) 0%, rgba(255, 85, 0, 0) 100%),
    linear-gradient(0deg, #cc4400, #cc4400);
  border-radius: 100px;
}

.velo-cta .cta-wrap {
  border-radius: 100px;
}

.velo-cta:hover {
  box-shadow: 0 0 28px rgba(255, 85, 0, 0.4), 0 0 8px rgba(255, 85, 0, 0.3) inset;
}

.velo-cta .cta-text {
  color: var(--velo-white);
}

/* Page loader rings */
.page-loader {
  background: var(--velo-black);
}

.page-loader .pl__ring--a {
  stroke: var(--aeo-accent);
}

.page-loader .pl__ring--b {
  stroke: var(--aeo-accent-mid);
}

.page-loader .pl__ring--c {
  stroke: var(--velo-white);
}

.page-loader .pl__ring--d {
  stroke: var(--aeo-accent-soft);
}