/* Efectos de animación suave para enlaces de navegación */

/* Quitar outline por defecto */
button:focus, 
button:active,
.nav-link:focus,
.nav-link:active,
.btn-custom:focus,
.btn-custom:active {
  outline: none !important;
  box-shadow: none !important;
}

/* Quitar outline de los inputs del formulario */
input:focus,
textarea:focus,
select:focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: #3a0ca3 !important;
}
@keyframes floatUp {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes colorPulse {
  0% {
    color: inherit;
  }
  50% {
    color: #3a0ca3; /* Color morado de tu tema */
  }
  100% {
    color: inherit;
  }
}

/* Estilos base para los enlaces */
.nav-link {
  position: relative;
  display: inline-block;
  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  padding: 5px 10px;
  border-radius: 4px;
}

/* Efecto al pasar el mouse */
.nav-link:hover {
  animation: floatUp 1.5s ease-in-out infinite, colorPulse 3s ease-in-out infinite;
  text-decoration: none;
}

/* Efecto para los iconos */
.iconfont-wrapper {
  transition: transform 0.3s ease, opacity 0.3s ease;
  display: inline-block;
}

.iconfont-wrapper:hover {
  transform: scale(1.15) rotate(5deg);
  opacity: 0.9;
}

/* Efecto moderno sin subrayado */
.nav-link {
  position: relative;
  overflow: hidden;
  text-decoration: none !important;
  transition: all 0.3s ease;
  display: inline-block;
}

.nav-link::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #3a0ca3;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
}

.nav-link:hover {
  color: #3a0ca3 !important;
  transform: translateY(-2px);
}

.nav-link:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}

/* Efecto de transición suave para el menú desplegable */
.navbar-nav {
  transition: all 0.4s ease-out;
}

/* Efecto de carga escalonada para los elementos del menú */
.nav-item {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeInUp 0.5s forwards;
  animation-delay: calc(0.1s * var(--i));
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Efecto sutil en el botón de cotizar */
.btn-custom {
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.btn-custom:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(58, 12, 163, 0.3);
}

.btn-custom:active {
  transform: translateY(0);
}