/* ════════════════════════════════════════════════════════════
   🥚 LIMPIAAI v14.0 — IMPERIAL GOLD EDITION
   Oro imperial + morado real · Tipografía Cinzel de lujo
   Título héroe dorado · Iconos premium con anillo de oro
   Se apila sobre style/premium/celestial/quantum/titan/pixar.
   ════════════════════════════════════════════════════════════ */

/* ═══ TOKENS DE ORO ═══ */
:root {
  --gold1: #fde68a;   /* highlight */
  --gold2: #fbbf24;   /* mid */
  --gold3: #d97706;   /* deep */
  --gold4: #92400e;   /* shadow */
  --gold-glow: rgba(251,191,36,.35);
  --royal: #7c3aed;
  --royal-deep: #4c1d95;
  /* Gradiente oro metálico multi-parada (efecto lingote) */
  --g-gold: linear-gradient(105deg,
    #8a5a12 0%, #d99a26 18%, #fde68a 32%, #fff7d6 42%,
    #fde68a 50%, #eab308 62%, #b45309 78%, #d99a26 92%, #8a5a12 100%);
  /* Gradiente oro-morado imperial */
  --g-imperial: linear-gradient(135deg, #a78bfa 0%, #fde68a 45%, #fbbf24 55%, #7c3aed 100%);
  --font-royal: 'Cinzel', 'Playfair Display', serif;
}

/* ═══ 👑 TIPOGRAFÍA REAL — Cinzel para display ═══ */
.hero-title,
.splash-brand,
.section-heading,
.upload-header h2,
.legal-header h2,
.results-header h2,
.scr-inner > h2 {
  font-family: var(--font-royal) !important;
  letter-spacing: .02em;
  font-weight: 800;
}

/* ═══ ✨ TÍTULO HÉROE — ORO LÍQUIDO ANIMADO ═══ */
.hero-title,
.hero-title.shimmer-text {
  background: var(--g-gold) !important;
  background-size: 220% auto !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  animation: goldFlow 5.5s linear infinite !important;
  text-shadow: none !important;
  filter:
    drop-shadow(0 2px 0 rgba(146,64,14,.55))
    drop-shadow(0 5px 14px rgba(251,191,36,.28))
    drop-shadow(0 12px 40px rgba(124,58,237,.30));
  line-height: 1.18;
}
@keyframes goldFlow {
  0%   { background-position: 0% center; }
  100% { background-position: 220% center; }
}

/* Marco imperial bajo el título (filete dorado) */
.hero-title::after {
  content: '';
  display: block;
  width: 120px; height: 3px;
  margin: 14px auto 0;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, var(--gold2) 30%, #fff7d6 50%, var(--gold2) 70%, transparent);
  box-shadow: 0 0 18px var(--gold-glow), 0 0 40px rgba(124,58,237,.25);
}

/* ═══ SPLASH BRAND — logo de oro ═══ */
.splash-brand,
.splash-brand.shimmer-text {
  background: var(--g-gold) !important;
  background-size: 220% auto !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: goldFlow 5.5s linear infinite !important;
  filter:
    drop-shadow(0 2px 0 rgba(146,64,14,.6))
    drop-shadow(0 8px 24px rgba(251,191,36,.3));
  text-shadow: none !important;
}

/* Marca del header también en oro */
.hdr-title,
.hdr-title.shimmer-text {
  font-family: var(--font-royal) !important;
  background: var(--g-gold) !important;
  background-size: 220% auto !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: goldFlow 6s linear infinite !important;
}

/* ═══ EYEBROW — insignia morado + oro ═══ */
.hero-eyebrow {
  border: 1px solid rgba(251,191,36,.35) !important;
  background: linear-gradient(180deg, rgba(124,58,237,.30), rgba(76,29,149,.18)) !important;
  box-shadow:
    0 1px 0 rgba(253,230,138,.18) inset,
    0 4px 14px rgba(0,0,0,.35),
    0 0 24px rgba(251,191,36,.10) !important;
  color: var(--gold1) !important;
}
.hero-eyebrow .dot { background: var(--gold2) !important; box-shadow: 0 0 10px var(--gold2) !important; }

/* Badge del header en oro */
.hdr-badge {
  background: var(--g-gold) !important;
  background-size: 220% auto;
  color: #3b2205 !important;
  font-weight: 900;
  border: none !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 2px 8px rgba(251,191,36,.4);
  animation: goldFlow 6s linear infinite;
}

/* ═══ SUBTÍTULO HÉROE — strong en oro ═══ */
.hero-sub strong { color: var(--gold1); text-shadow: 0 0 14px rgba(251,191,36,.3); }

/* ═══ 🏆 CTA — botón imperial morado con filete de oro ═══ */
.btn-primary,
.pixar-mode .btn-primary {
  background: linear-gradient(180deg, #a78bfa 0%, #7c3aed 45%, #5b21b6 100%) !important;
  border: 1px solid rgba(251,191,36,.5) !important;
  box-shadow:
    0 2px 0 rgba(255,255,255,.22) inset,
    0 -8px 16px rgba(76,29,149,.4) inset,
    0 0 0 1px rgba(253,230,138,.12),
    0 8px 22px rgba(124,58,237,.45),
    0 4px 14px rgba(251,191,36,.18),
    0 20px 48px rgba(124,58,237,.25) !important;
}
.btn-primary:hover { box-shadow:
    0 2px 0 rgba(255,255,255,.28) inset,
    0 -8px 16px rgba(76,29,149,.35) inset,
    0 0 0 1px rgba(253,230,138,.28),
    0 12px 30px rgba(124,58,237,.55),
    0 6px 20px rgba(251,191,36,.30) !important; }

/* ═══ 💎 ICONOS PREMIUM — anillo de oro + gema morada ═══ */
.stat-emoji, .tech-icon {
  width: 52px; height: 52px;
  margin: 0 auto 8px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.14), transparent 45%),
    linear-gradient(160deg, rgba(124,58,237,.35), rgba(76,29,149,.5));
  border: 1.5px solid rgba(251,191,36,.45);
  box-shadow:
    0 1px 0 rgba(253,230,138,.25) inset,
    0 -4px 10px rgba(0,0,0,.35) inset,
    0 4px 12px rgba(0,0,0,.4),
    0 0 18px rgba(251,191,36,.14),
    0 0 30px rgba(124,58,237,.18);
  font-size: 1.5rem !important;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.4));
  transition: transform .3s var(--spring, ease), box-shadow .3s ease;
}
.stat-card:hover .stat-emoji, .tech-card:hover .tech-icon {
  transform: scale(1.12) rotate(-4deg);
  box-shadow:
    0 1px 0 rgba(253,230,138,.35) inset,
    0 -4px 10px rgba(0,0,0,.3) inset,
    0 6px 16px rgba(0,0,0,.45),
    0 0 26px rgba(251,191,36,.30),
    0 0 44px rgba(124,58,237,.30);
}

/* Iconos FontAwesome de secciones → dorados */
.section-heading i,
.notice i,
.weather-title i, .bio-title i, .heat-title i {
  background: var(--g-gold);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: goldFlow 6s linear infinite;
  filter: drop-shadow(0 1px 4px rgba(251,191,36,.35));
}

/* Números de pasos → medallones dorados */
.step-num {
  background: var(--g-gold) !important;
  background-size: 220% auto;
  color: #3b2205 !important;
  font-weight: 900 !important;
  border: none !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.4) inset,
    0 -3px 6px rgba(146,64,14,.5) inset,
    0 3px 10px rgba(0,0,0,.45),
    0 0 16px rgba(251,191,36,.25) !important;
  animation: goldFlow 7s linear infinite;
}

/* Valores de estadísticas en oro */
.stat-val {
  background: var(--g-gold);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: goldFlow 6.5s linear infinite;
  font-family: var(--font-royal);
  font-weight: 900;
}

/* ═══ NAV INFERIOR — activo en oro ═══ */
.bnav-item.active { color: var(--gold1) !important; }
.bnav-item.active .bnav-icon { filter: drop-shadow(0 3px 10px rgba(251,191,36,.5)) !important; }

/* ═══ TARJETAS — filete dorado sutil en hover ═══ */
.pixar-mode .stat-card:hover,
.pixar-mode .tech-card:hover,
.pixar-mode .hist-item:hover {
  border-color: rgba(251,191,36,.35) !important;
}

/* ═══ ANILLOS DEL HÉROE — uno de oro ═══ */
.hero-ring.ring2 {
  border-color: rgba(251,191,36,.35) !important;
  box-shadow: 0 0 24px rgba(251,191,36,.12);
}

/* ═══ ORÁCULO / MODALES — cabeceras imperiales ═══ */
.oracle-card, .journal-head h3, .cmp-head h3 { font-family: var(--font-royal); }

/* ═══ SCROLLBAR de oro ═══ */
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--gold2), var(--royal)) !important; }

/* ═══ SELECCIÓN de texto ═══ */
::selection { background: var(--gold3); color: #fff; }

/* ═══ REDUCED MOTION ═══ */
@media (prefers-reduced-motion: reduce) {
  .hero-title, .splash-brand, .hdr-title, .hdr-badge, .step-num, .stat-val,
  .section-heading i, .notice i, .weather-title i, .bio-title i, .heat-title i {
    animation: none !important;
  }
}