.gradient-text {
    background: linear-gradient(90deg, #ff7e39, #c084fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

header {
    position: sticky;
    top: 0; /* Fija el menú en la parte superior */
    z-index: 1000; /* Asegura que el menú se quede encima de otros elementos */
}

#menu {
    transition: transform 0.3s ease-in-out;
}

#menu-toggle i {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.highlight {
    background: radial-gradient(circle at 67% 80%, rgba(252, 101, 0, 0.562) 0%, rgba(39, 38, 38, 0.267) 60%);
    /* border: 1px solid rgba(255, 117, 24, 0.5); Opcional, para destacar la tarjeta */
}


.carousel-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

.carousel-container::before,
.carousel-container::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
  z-index: 2;
  pointer-events: none; /* No obstruir la interacción */
}

.carousel-container::before {
    left: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.918), transparent);
}
  
.carousel-container::after {
    right: 0;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.918), transparent);
}
  
.carousel-track {
    display: flex;
    gap: 0.2rem;
    transition: transform 0.1s linear;
}
  
/* @keyframes scroll {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-115%);
    }
} */