.project-card {
  /* Estado inicial para la animación de scroll */
  opacity: 0;
  transform: translateY(30px);
  /* La transición ahora está en la clase de la tarjeta en index.html */
}
.project-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Estilos para una barra de scroll personalizada y sutil */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #4b5563 #1f2937; /* thumb track - gray-600 gray-800 */
}
/* Estilos para la barra de scroll en navegadores Webkit (Chrome, Safari) */
.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: #1f2937; /* bg-gray-800 */
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: #4b5563; /* bg-gray-600 */
  border-radius: 4px;
  border: 2px solid #1f2937; /* bg-gray-800 */
}
.glass-effect {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.animated-gradient {
  background: linear-gradient(90deg, #1f2937, #4f688bff, #ec7948ff, #1f2937);
  background-size: 300% 300%;
  animation: gradient 6s ease infinite;
}
@keyframes gradient {
  0%,
  100% {
    background-position: 0% 100%;
  }
  50% {
    background-position: 40% 25%;
  }
}
.tab-button {
  position: relative;
  overflow: hidden;
}
.tab-button::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, #3b82f6, #9333ea);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}
.tab-button.active::after {
  width: 100%;
}
.fade-in {
  animation: fadeIn 0.6s ease-in;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}