/* NovaBox Brasil - Ultra Modern E-Commerce & Dropshipping Stylesheet (Anthropic Editorial & Delicate Palette) */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --primary: #059669;
  --primary-light: #ecfdf5;
  --primary-hover: #047857;
  --primary-glow: rgba(5, 150, 105, 0.25);
  --primary-neon: #10b981;
  --dark-bg: #07090e;
  --dark-card: #0e131f;
  --dark-surface: #141b2b;
  --card-bg: rgba(255, 255, 255, 0.95);
  --accent-blue: #0284c7;
  --danger: #e11d48;
  --danger-light: #fff1f2;
  --star-gold: #f59e0b;
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  letter-spacing: -0.015em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #0f172a;
  background-color: #f8fafc;
  overflow-x: hidden;
  selection-background-color: #10b981;
  selection-color: #ffffff;
}

.font-editorial {
  font-family: 'Newsreader', Georgia, serif;
}

.font-mono-code {
  font-family: 'JetBrains Mono', monospace;
}

/* Glassmorphism 2.0 (Delicate Spatial UI) */
.glass-panel {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(226, 232, 240, 0.7);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.04);
}

.glass-dark {
  background: rgba(14, 19, 31, 0.85);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-emerald {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(6, 78, 59, 0.06) 100%);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(16, 185, 129, 0.25);
}

/* 2027 Dynamic Spotlight Hover Glow for Bento Grids */
.spotlight-card {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.8);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}

.spotlight-card::before {
  content: '';
  position: absolute;
  top: var(--mouse-y, -1000px);
  left: var(--mouse-x, -1000px);
  transform: translate(-50%, -50%);
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.12) 0%, transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.spotlight-card:hover::before {
  opacity: 1;
}

.spotlight-dark {
  background: #0e131f;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.spotlight-dark::before {
  background: radial-gradient(circle, rgba(0, 255, 136, 0.18) 0%, transparent 70%);
}

/* 3D Spatial Tilt with Specular Glare */
.tilt-card-container {
  perspective: 1200px;
}

.tilt-card {
  transition: transform 0.15s ease-out, box-shadow 0.2s ease-out;
  transform-style: preserve-3d;
  will-change: transform;
}

.tilt-card:hover {
  box-shadow: 0 25px 50px -12px rgba(16, 185, 129, 0.2);
}

/* Radar & Precision Finding Simulator (Spatial UI 2027) */
.radar-screen {
  background: radial-gradient(circle at center, #091724 0%, #030712 100%);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0, 255, 136, 0.25);
  box-shadow: inset 0 0 40px rgba(0, 255, 136, 0.15), 0 20px 40px -15px rgba(0, 0, 0, 0.7);
}

.radar-grid-bg {
  background-size: 32px 32px;
  background-image: 
    linear-gradient(to right, rgba(0, 255, 136, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 255, 136, 0.05) 1px, transparent 1px);
}

@keyframes sweep-rotation {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.radar-sweep-cone {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
  background: conic-gradient(from 0deg at 0 0, rgba(0, 255, 136, 0.35) 0deg, rgba(0, 255, 136, 0.1) 45deg, transparent 75deg);
  animation: sweep-rotation 4s linear infinite;
  pointer-events: none;
}

@keyframes wave-expand {
  0% { transform: translate(-50%, -50%) scale(0.2); opacity: 0.9; }
  100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
}

.radar-expanding-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 2px solid rgba(0, 255, 136, 0.6);
  box-shadow: 0 0 15px rgba(0, 255, 136, 0.4);
  pointer-events: none;
  animation: wave-expand 3s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;
}

.radar-expanding-ring:nth-child(2) { animation-delay: 1s; }
.radar-expanding-ring:nth-child(3) { animation-delay: 2s; }

/* Audio Wave Visualizer Bars */
.sound-wave-bar {
  width: 4px;
  background: #10b981;
  border-radius: 9999px;
  animation: sound-bounce 1.2s ease-in-out infinite alternate;
}

@keyframes sound-bounce {
  0% { height: 6px; }
  100% { height: 28px; }
}

.sound-wave-bar:nth-child(1) { animation-delay: 0.1s; }
.sound-wave-bar:nth-child(2) { animation-delay: 0.4s; }
.sound-wave-bar:nth-child(3) { animation-delay: 0.2s; }
.sound-wave-bar:nth-child(4) { animation-delay: 0.6s; }
.sound-wave-bar:nth-child(5) { animation-delay: 0.3s; }

/* Smooth Pulsing Beacons */
@keyframes pulse-ring {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 14px rgba(16, 185, 129, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

.radar-pulse {
  animation: pulse-ring 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
}

/* Shimmer Animation for Badges */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.shimmer-badge {
  background: linear-gradient(90deg, #10b981 0%, #34d399 50%, #10b981 100%);
  background-size: 200% 100%;
  animation: shimmer 3s infinite;
}

/* Dynamic Scarcity Progress Bar */
@keyframes liquid-pulse {
  0% { opacity: 0.85; filter: drop-shadow(0 0 4px rgba(244, 63, 94, 0.5)); }
  50% { opacity: 1; filter: drop-shadow(0 0 10px rgba(244, 63, 94, 0.8)); }
  100% { opacity: 0.85; filter: drop-shadow(0 0 4px rgba(244, 63, 94, 0.5)); }
}

.scarcity-bar-pulse {
  animation: liquid-pulse 2s ease-in-out infinite;
}

/* Kit Selector Cards */
.kit-card {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  position: relative;
}

.kit-card:hover {
  transform: translateY(-3px);
  border-color: #10b981;
}

.kit-card.selected {
  border-color: #10b981;
  background-color: #f0fdf4;
  box-shadow: 0 12px 30px -5px rgba(16, 185, 129, 0.22), 0 8px 10px -6px rgba(16, 185, 129, 0.12);
}

/* Magnetic Button Physics */
.btn-magnetic {
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}

.btn-magnetic:hover {
  transform: translateY(-2px) scale(1.02);
}

.btn-magnetic:active {
  transform: translateY(1px) scale(0.98);
}

/* Sticky Buy Bar */
.sticky-buy-bar {
  transform: translateY(120%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.sticky-buy-bar.visible {
  transform: translateY(0);
}

/* Social Proof Toast */
.social-proof-toast {
  transform: translateY(150%);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.social-proof-toast.show {
  transform: translateY(0);
  opacity: 1;
}

/* Accordion Smooth Expand */
.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-content.open {
  max-height: 600px;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* ============================================================
   MODO 2: AR / 3D COMPASS GAMIFIED PRECISION FINDING ENGINE
   ============================================================ */
.radar-perspective-container {
  perspective: 1200px;
  transform-style: preserve-3d;
}

.radar-3d-compass-disc {
  background: radial-gradient(circle at center, #062b1a 0%, #03150d 55%, #020905 100%);
  border: 2px solid rgba(16, 185, 129, 0.4);
  box-shadow: 
    0 0 60px rgba(16, 185, 129, 0.25),
    inset 0 0 50px rgba(16, 185, 129, 0.2),
    inset 0 0 20px rgba(0, 0, 0, 0.8);
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
  user-select: none;
  touch-action: none;
}

.radar-3d-compass-disc.aligned {
  border-color: rgba(52, 211, 153, 0.8);
  box-shadow: 
    0 0 80px rgba(16, 185, 129, 0.5),
    inset 0 0 60px rgba(16, 185, 129, 0.35);
}

.precision-arrow-3d {
  filter: drop-shadow(0 0 16px rgba(16, 185, 129, 0.95)) drop-shadow(0 10px 20px rgba(0, 0, 0, 0.7));
  transform-origin: center center;
  transition: transform 0.15s cubic-bezier(0.1, 0.8, 0.3, 1), filter 0.3s ease;
}

.precision-arrow-3d.misaligned {
  filter: drop-shadow(0 0 8px rgba(148, 163, 184, 0.4));
  opacity: 0.75;
}

.radar-signal-wave {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px dashed rgba(52, 211, 153, 0.45);
  pointer-events: none;
  animation: radar-wave-pulse 2.2s cubic-bezier(0.1, 0.9, 0.2, 1) infinite;
}

@keyframes radar-wave-pulse {
  0% { transform: translate(-50%, -50%) scale(0.2); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}

.radar-target-dot {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 16px #10b981, 0 0 30px #34d399;
  transform: translate(-50%, -50%);
  transition: all 0.2s cubic-bezier(0.1, 0.8, 0.3, 1);
  pointer-events: none;
}

.radar-target-dot::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid #34d399;
  animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.proximity-bar-glow {
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.6);
}

@keyframes victory-sparkle {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.victory-banner-animation {
  animation: victory-sparkle 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}