/* ============================================================
   SECCIÓN: PROYECTOS — CARRUSEL
============================================================ */
.proyectos {
  background: var(--color-fondo-secundario);
  border-top: 1px solid var(--color-borde);
  border-bottom: 1px solid var(--color-borde);
}

.proyectos__cabecera {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
  gap: clamp(0.75rem, 2vw, 1.5rem);
}

.carrusel {
  overflow: hidden;
  position: relative;
  border-radius: clamp(12px, 3vw, 20px);
  cursor: none;
}

.carrusel::before,
.carrusel::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(40px, 10vw, 80px);
  z-index: 2;
  pointer-events: none;
}

.carrusel::before {
  left: 0;
  background: linear-gradient(to right, var(--color-fondo-secundario), transparent);
}

.carrusel::after {
  right: 0;
  background: linear-gradient(to left, var(--color-fondo-secundario), transparent);
}

.carrusel__pista {
  display: flex;
  gap: clamp(1rem, 3vw, 1.5rem);
  padding: clamp(0.5rem, 1.5vw, 1rem) 0;
  width: max-content;
  animation: deslizarCarrusel 30s linear infinite;
}

.carrusel:hover .carrusel__pista {
  animation-play-state: paused;
}

@keyframes deslizarCarrusel {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}