/* ===== MEJORAS SUTILES OPCIONALES ===== */

/* 1. Hover sutil en enlaces del menú */
.nav-link:hover {
  color: var(--header-link-hover);
  transition: color 0.2s ease;
}

/* 2. Sombra sutil al hacer scroll en el header */
.navbar-scrolled {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}

/* 3. Hover muy sutil en el formulario */
.contact-form-input:hover {
  border-color: #999;
  transition: border-color 0.2s ease;
}

/* 4. Botón scroll-to-top más elegante */
#scrollToTopButton {
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

#scrollToTopButton:hover {
  opacity: 1;
}

/* 5. Cards de servicios con hover muy sutil */
.service-card-hover:hover {
  transform: translateY(-2px);
  transition: transform 0.3s ease;
}

/* 6. Mejorar el focus de los elementos para accesibilidad */
button:focus, 
input:focus, 
textarea:focus, 
a:focus {
  outline: 2px solid var(--header-link-hover);
  outline-offset: 2px;
}

/* 7. Smooth scroll para toda la página */
html {
  scroll-behavior: smooth;
}

/* 8. Loading state muy sutil para el botón enviar */
.btn-loading {
  opacity: 0.7;
  cursor: not-allowed;
}

.btn-loading::after {
  content: "...";
  animation: dots 1s infinite;
}

@keyframes dots {
  0%, 20% { content: "..."; }
  40% { content: "...."; }
  60% { content: "....."; }
  80%, 100% { content: "..."; }
}