/* ================= BASE =================
   Variables CSS, reset, body y animaciones globales.
*/

:root {
  --bg: #04161F;
  --bg-2: #082231;
  --card: #0C2D40;
  --card-2: #103850;
  --card-3: #154561;
  --border: rgba(56, 189, 248, 0.22);
  --border-strong: rgba(56, 189, 248, 0.45);
  --fg: #ECFEFF;
  --fg-2: #BAE6FD;
  --muted: #7BA8C4;
  --accent: #00D4FF;
  --accent-2: #38BDF8;
  --accent-3: #0EA5E9;
  --danger: #ff5a5f;
  --warning: #ffb84d;
  --info: #7DD3FC;
}
* {
  font-family: 'DM Sans', sans-serif;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}
.font-display { font-family: 'Space Grotesk', sans-serif; letter-spacing: -0.02em; }
html, body { margin: 0; padding: 0; }
body {
  background: #030a07;
  color: var(--fg);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 0%, rgba(56, 189, 248, 0.25), transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 100%, rgba(0, 212, 255, 0.10), transparent 60%),
    radial-gradient(ellipse 40% 30% at 50% 50%, rgba(14, 165, 233, 0.08), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* Status bar (unused, kept for compatibility) */
.status-bar { display: none; }

/* Keyframes globales */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}
@keyframes barGrow {
  from { height: 0 !important; opacity: 0; }
}
@keyframes pinPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.15); }
}
@keyframes sheetUp {
  from { transform: translateY(100vh); }
  to { transform: translateY(0); }
}
@keyframes bubble {
  0% { transform: translateY(0) scale(0.5); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(-900px) scale(1.2); opacity: 0; }
}

/* Hide native scrollbar */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }