/* FONT FAMILIES */
body {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}
.font-monoton { font-family: 'Monoton', 'Orbitron', cursive; }
.font-pacifico { font-family: 'Pacifico', 'Dancing Script', cursive; }

/* COLORS */
:root {
  --electric-luna-green: #39FF14;
  --magenta-moon: #FF2DA5;
  --cumbia-blue: #00CFFF;
  --sunrise-yellow: #FFD700;
  --ink-black: #111111;
  --cosmic-cream: #F5F5F0;
}

/* BUTTONS */
.btn-primary {
  background: var(--magenta-moon);
  color: white;
  transition: all 0.3s ease;
  box-shadow: 0 4px 14px rgba(255, 45, 165, 0.5);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 45, 165, 0.7);
}

/* TEXT EFFECTS */
.electric-text {
  color: var(--electric-luna-green);
  text-shadow: 0 0 10px rgba(57, 255, 20, 0.7);
}
.magenta-text {
  color: var(--magenta-moon);
  text-shadow: 0 0 10px rgba(255, 45, 165, 0.7);
}
.cumbia-text {
  color: var(--cumbia-blue);
  text-shadow: 0 0 10px rgba(0, 207, 255, 0.7);
}
.sunrise-text {
  color: var(--sunrise-yellow);
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.7);
}

/* CARDS */
.card,
.testimonial-card {
  transition: all 0.3s ease;
  background: rgba(245, 245, 240, 0.03);
  backdrop-filter: blur(3px);
  border: 1px solid #333;
  border-radius: 0.75rem;
  color: #d1d5db;
}
.card:hover,
.testimonial-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
.testimonial-card:hover {
  border-color: var(--electric-luna-green);
  box-shadow: 0 10px 25px rgba(57, 255, 20, 0.3);
}
.testimonial-card .quote {
  color: #d1d5db;
  transition: color 0.3s ease;
}
.testimonial-card:hover .quote {
  color: var(--electric-luna-green);
}

/* CTA LINK */
.see-more-link {
  color: #d1d5db;
  font-weight: 500;
  font-size: 1.125rem;
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease;
}
.see-more-link:hover {
  color: var(--electric-luna-green);
  border-color: var(--electric-luna-green);
}

/* MODAL */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 50;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(5px);
}
.modal.active {
  display: flex;
}

/* ANIMATIONS */
.fade-in { animation: fadeIn 1s ease-in-out; }
.pulse { animation: pulse 2s infinite; }
.animated-gradient {
  background-size: 200% 200%;
  animation: gradient-shift 5s ease infinite;
}
.float { animation: float 5s ease-in-out infinite; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

/* WAVE */
.wave-container {
  position: relative;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.wave {
  width: 4px;
  height: 25px;
  margin: 0 2px;
  border-radius: 20px;
  background: linear-gradient(to bottom, var(--electric-luna-green), var(--magenta-moon));
  animation: wave 1s infinite ease-in-out;
}
@keyframes wave {
  0%, 100% { transform: scaleY(0.5); }
  50% { transform: scaleY(1); }
}

/* NAV DOTS */
.moon-phases {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 20px 0;
}
.moon-phase {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--cosmic-cream);
  box-shadow: inset -6px 0 0 0 var(--ink-black);
  transition: all 0.3s ease;
  cursor: pointer;
}
.moon-phase:hover {
  transform: scale(1.2);
}
.moon-phase:nth-child(1) { box-shadow: none; }
.moon-phase:nth-child(2) { box-shadow: inset -3px 0 0 0 var(--ink-black); }
.moon-phase:nth-child(3) { box-shadow: inset 0 0 0 10px var(--ink-black); }
.moon-phase:nth-child(4) { box-shadow: inset 3px 0 0 0 var(--ink-black); }
.moon-phase:nth-child(5) { background: var(--ink-black); }

/* THREAD BACKGROUND */
.thread-pattern {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--cumbia-blue) 1px, transparent 1px),
                    radial-gradient(var(--magenta-moon) 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
  opacity: 0.05;
  pointer-events: none;
}

/* NEON BORDER */
.neon-border {
  position: relative;
  overflow: hidden;
  border-radius: 0.75rem;
}
.neon-border::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid var(--electric-luna-green);
  box-shadow: 0 0 15px var(--electric-luna-green);
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
}
.neon-border.loops-levels::after { border-color: var(--electric-luna-green); }
.neon-border.luna-tejida::after { border-color: var(--magenta-moon); }
.neon-border.mente-radiante::after { border-color: var(--cumbia-blue); }
.neon-border.lider-lunar::after { border-color: var(--sunrise-yellow); }

/* REVEAL */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease;
}
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* MOBILE MENU */
#mobileMenu {
  transition: transform 0.3s ease-in-out;
}
#mobileMenu.active {
  transform: translateX(0);
}
.menu-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
}

.electric-text {
  color: #66f6ff !important;
}

/* Optional: Add a transition effect */
nav a,
#mobileMenu a {
  transition: color 0.3s ease;
}

/* Hide scroll on mobile menu open */
body.mobile-menu-open {
  overflow: hidden;
}