/* ==========================================================================
   FASOL Custom & Fallback Styles
   ========================================================================== */

:root {
  --primary: #0d59f2;
  --primary-dark: #0a47c2;
  --background-dark: #101622;
  --surface-dark: #161d2f;
}

html, body {
  background-color: #101622 !important;
  color: #f1f5f9 !important;
  font-family: 'Space Grotesk', sans-serif !important;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

.bg-background-dark {
  background-color: #101622 !important;
}

.bg-surface-dark {
  background-color: #161d2f !important;
}

.bg-primary {
  background-color: #0d59f2 !important;
}

.text-primary {
  color: #0d59f2 !important;
}

/* Reset de listas para que los menús de WordPress no tengan viñetas */
nav ul, nav li, header ul, header li {
  list-style: none !important;
  list-style-type: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.glass-effect {
  background: rgba(16, 22, 34, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(13, 89, 242, 0.1);
}

.fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.step-connector {
  position: relative;
}

.step-connector::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #0d59f2, transparent);
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.float-anim {
  animation: float 3s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(13, 89, 242, 0.2); }
  50% { box-shadow: 0 0 40px rgba(13, 89, 242, 0.4); }
}

.pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.3s ease;
}

.faq-answer.open {
  max-height: 300px;
}

.form-step {
  display: none;
}

.form-step.active {
  display: block;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(13, 89, 242, 0.3);
  border-color: #0d59f2;
}

.mobile-menu {
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.mobile-menu.open {
  transform: translateX(0);
}