/* ===================================================
   AMAZING IDEAS — Design System Compartido
   Fuentes: Orbitron (display) + Inter (body)
   Paleta: #050508 bg · #FFD700 gold · #0A0A12 surface
   =================================================== */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --gold:         #FFD700;
  --gold-light:   #FFE55C;
  --gold-dark:    #B8960C;
  --gold-glow:    rgba(255,215,0,0.25);
  --gold-border:  rgba(255,215,0,0.18);
  --gold-border2: rgba(255,215,0,0.35);
  --white:        #FFFFFF;
  --black:        #000000;
  --dark:         #050508;
  --dark2:        #0A0A12;
  --glass:        rgba(255,255,255,0.04);
  --glass-hover:  rgba(255,255,255,0.07);
  --text-muted:   rgba(255,255,255,0.55);
  --text-secondary: rgba(255,255,255,0.75);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { background:var(--dark); color:var(--white); font-family:'Inter',sans-serif; overflow-x:hidden; }

::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:var(--dark); }
::-webkit-scrollbar-thumb { background:var(--gold); border-radius:4px; }

/* ---- PARTÍCULAS CANVAS ---- */
#particles-canvas {
  position:fixed; top:0; left:0; width:100%; height:100%;
  pointer-events:none; z-index:0; opacity:0.4;
}

/* ---- NAVBAR ---- */
nav.ai-nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:14px 40px;
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(5,5,8,0.88);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--gold-border);
}
.nav-brand {
  display:flex; align-items:center; gap:12px;
  text-decoration:none; color:var(--white);
}
.nav-brand-logo {
  height:42px;
  filter:drop-shadow(0 0 10px rgba(255,215,0,0.5));
  transition:filter 0.3s;
}
.nav-brand-logo:hover { filter:drop-shadow(0 0 22px rgba(255,215,0,1)); }
.nav-brand-text {
  font-family:'Orbitron',sans-serif;
  font-weight:900; font-size:15px;
  letter-spacing:2px; text-transform:uppercase;
  color:var(--gold);
}
.nav-links-list {
  display:flex; gap:32px; list-style:none;
}
.nav-links-list a {
  color:rgba(255,255,255,0.7);
  text-decoration:none;
  font-size:12px; font-weight:500;
  letter-spacing:1.5px; text-transform:uppercase;
  transition:color 0.3s; position:relative;
}
.nav-links-list a::after {
  content:''; position:absolute; bottom:-4px; left:0;
  width:0; height:1px; background:var(--gold); transition:width 0.3s;
}
.nav-links-list a:hover { color:var(--gold); }
.nav-links-list a:hover::after { width:100%; }
.nav-cta-btn {
  padding:10px 24px;
  background:linear-gradient(135deg,var(--gold),#E0A800);
  color:var(--black); border:none; border-radius:5px;
  font-weight:800; font-size:12px; letter-spacing:1px;
  cursor:pointer; text-transform:uppercase;
  transition:all 0.3s;
  box-shadow:0 0 20px var(--gold-glow);
  text-decoration:none; display:inline-block;
}
.nav-cta-btn:hover {
  box-shadow:0 0 40px rgba(255,215,0,0.55);
  transform:translateY(-1px);
}

/* ---- TÍTULOS ---- */
h1,h2,h3,h4,h5 { font-family:'Orbitron',sans-serif; }

/* ---- GRADIENT TEXT GOLD ---- */
.gradient-text {
  background:linear-gradient(135deg,var(--gold-light),var(--gold),var(--gold-dark));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* ---- BOTÓN PRINCIPAL ---- */
.btn-gold {
  display:inline-block;
  padding:14px 32px;
  background:linear-gradient(135deg,var(--gold),#E0A800);
  color:var(--black); border:none; border-radius:5px;
  font-family:'Orbitron',sans-serif;
  font-weight:700; font-size:12px; letter-spacing:1.5px;
  text-transform:uppercase; cursor:pointer;
  text-decoration:none; text-align:center;
  transition:all 0.3s;
  box-shadow:0 0 25px var(--gold-glow);
}
.btn-gold:hover {
  box-shadow:0 0 50px rgba(255,215,0,0.55);
  transform:translateY(-2px);
}

/* ---- BOTÓN GHOST ---- */
.btn-ghost {
  display:inline-block;
  padding:14px 32px;
  background:transparent;
  color:var(--gold); border:1px solid var(--gold-border2);
  border-radius:5px;
  font-family:'Orbitron',sans-serif;
  font-weight:700; font-size:12px; letter-spacing:1.5px;
  text-transform:uppercase; cursor:pointer;
  text-decoration:none; text-align:center;
  transition:all 0.3s;
}
.btn-ghost:hover {
  background:rgba(255,215,0,0.08);
  border-color:var(--gold);
  box-shadow:0 0 20px var(--gold-glow);
}

/* ---- GLASS CARD ---- */
.glass-card {
  background:var(--glass);
  border:1px solid var(--gold-border);
  border-radius:4px;
  backdrop-filter:blur(12px);
  transition:all 0.35s;
}
.glass-card:hover {
  border-color:var(--gold-border2);
  background:var(--glass-hover);
  transform:translateY(-4px);
  box-shadow:0 16px 48px rgba(255,215,0,0.08);
}

/* ---- BADGE PILL ---- */
.badge-gold {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,215,0,0.08);
  border:1px solid rgba(255,215,0,0.2);
  border-radius:2px;
  padding:6px 16px;
  font-size:11px; font-weight:600; letter-spacing:2px;
  text-transform:uppercase; color:var(--gold);
}
.badge-dot { width:6px; height:6px; border-radius:50%; background:var(--gold); animation:pulse-dot 2s infinite; }
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.4;transform:scale(1.3)} }

/* ---- STAT NUMBER ---- */
.stat-num { font-family:'Orbitron',sans-serif; font-size:2.8rem; font-weight:900; color:var(--gold); }

/* ---- SECTION LABEL ---- */
.section-label {
  font-family:'Orbitron',sans-serif;
  font-size:10px; font-weight:700; letter-spacing:4px;
  text-transform:uppercase; color:var(--gold);
  display:block; margin-bottom:16px;
}

/* ---- DIVIDER ---- */
.gold-line { width:60px; height:2px; background:linear-gradient(90deg,var(--gold),transparent); }

/* ---- HERO GRID BG ---- */
.hero-grid {
  background-image:
    linear-gradient(rgba(255,215,0,0.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,215,0,0.025) 1px,transparent 1px);
  background-size:60px 60px;
}

/* ---- FLOAT ANIMATION ---- */
.float { animation:float 6s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-16px)} }

/* ---- SECTION REVEAL ---- */
.sr { opacity:0; transform:translateY(40px); }

/* ---- FEATURE ICON BOX ---- */
.icon-box {
  width:52px; height:52px; border-radius:4px;
  background:rgba(255,215,0,0.06);
  border:1px solid rgba(255,215,0,0.15);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; margin-bottom:16px;
  transition:all 0.3s;
}
.glass-card:hover .icon-box {
  background:rgba(255,215,0,0.12);
  border-color:rgba(255,215,0,0.3);
}

/* ---- FORM INPUT ---- */
.ai-input {
  width:100%;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,215,0,0.15);
  border-radius:4px;
  padding:12px 16px;
  color:var(--white);
  font-family:'Inter',sans-serif; font-size:14px;
  transition:border-color 0.3s;
  outline:none;
}
.ai-input::placeholder { color:rgba(255,255,255,0.3); }
.ai-input:focus { border-color:var(--gold); box-shadow:0 0 12px rgba(255,215,0,0.15); }
.ai-label { display:block; font-size:11px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:rgba(255,255,255,0.5); margin-bottom:8px; }

/* ---- FOOTER ---- */
.ai-footer {
  border-top:1px solid var(--gold-border);
  padding:24px 40px;
  display:flex; align-items:center; justify-content:space-between;
  font-size:12px; color:rgba(255,255,255,0.3);
}
.ai-footer a { color:rgba(255,255,255,0.3); text-decoration:none; transition:color 0.2s; }
.ai-footer a:hover { color:var(--gold); }

/* ---- STAT BAR SECTION ---- */
.stats-bar {
  border-top:1px solid var(--gold-border);
  border-bottom:1px solid var(--gold-border);
  padding:32px 0;
}

/* ---- CHECK LIST ---- */
.check-item { display:flex; gap:12px; align-items:flex-start; color:rgba(255,255,255,0.8); font-size:14px; margin-bottom:14px; }
.check-icon { color:var(--gold); flex-shrink:0; margin-top:1px; }

/* ---- CTA SECTION ---- */
.cta-section {
  position:relative; overflow:hidden;
  padding:100px 0;
  background:linear-gradient(180deg,transparent,rgba(255,215,0,0.03),transparent);
  border-top:1px solid var(--gold-border);
}

/* ---- URGENCY BANNER ---- */
.urgency-banner {
  background:linear-gradient(135deg,rgba(255,215,0,0.06),rgba(255,215,0,0.02));
  border-top:1px solid rgba(255,215,0,0.2);
  border-bottom:1px solid rgba(255,215,0,0.2);
  padding:60px 0;
}

/* ---- RESPONSIVE ---- */
@media(max-width:768px) {
  nav.ai-nav { padding:12px 20px; }
  .nav-links-list { display:none; }
  .hero-grid { background-size:40px 40px; }
}
@media(prefers-reduced-motion:reduce) {
  .float,.badge-dot,.sr { animation:none; transition:none; }
}