html {
      scroll-behavior: smooth;
    }
    #backToTop {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background: #1e3a8a;
      color: white;
      border: none;
      padding: 10px 15px;
      border-radius: 9999px;
      cursor: pointer;
      display: none;
      z-index: 50;
    }
    #backToTop:hover {
      background-color: #2563eb;
    }


/* Fade-in básico */
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Zoom leve + fade */
  @keyframes zoomFade {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
  }

  .animate-fade-in {
    animation: fadeIn 1s ease forwards;
  }

  .animate-zoom-fade {
    animation: zoomFade 1.2s ease forwards;
  }

  .animate-stagger-left > * {
    opacity: 0;
    animation: fadeIn 0.8s ease forwards;
  }

  .animate-stagger-left > *:nth-child(1) { animation-delay: 0.3s; }
  .animate-stagger-left > *:nth-child(2) { animation-delay: 0.6s; }
  .animate-stagger-left > *:nth-child(3) { animation-delay: 0.9s; }
  .animate-stagger-left > *:nth-child(4) { animation-delay: 1.2s; }

  .delay-1 { animation-delay: 0.4s; }
  .delay-2 { animation-delay: 0.7s; }
  .delay-3 { animation-delay: 1s; }
  .delay-4 { animation-delay: 1.3s; }

  /* Hover suave para preguntas (opcional) */
  .question {
    transition: transform 0.3s ease, color 0.3s ease;
  }
  .question:hover {
    transform: translateX(5px);
    color: #1f2937; /* gray-800 */
  }

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(2deg); }
  50% { transform: rotate(-2deg); }
  75% { transform: rotate(1deg); }
}
.animate-wiggle {
  animation: wiggle 1.5s ease-in-out infinite;
}