body {
  font-family: 'Inter', sans-serif;
  background-color: #f8fafc; /* slate-50 */
}

.chart-container {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  height: 300px;
  max-height: 400px;
}

@media (min-width: 640px) {
  .chart-container { height: 350px; }
}

@media (min-width: 768px) {
  .chart-container { height: 350px; }
}

.solution-card.active {
  border-color: #14b8a6; /* teal-500 */
  background-color: #f0fdfa; /* teal-50 */
}

.benefit-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.nav-link { transition: color 0.3s ease; }
.nav-link:hover { color: #0d9488; /* teal-600 */ }

.fade-in { opacity: 0; transition: opacity 0.5s ease-in-out; }
.fade-in.visible { opacity: 1; }

/*
  Define la animación de desplazamiento para el carrusel.
  - Mueve el contenedor de logos desde su posición original (translateX(0))
    hasta la mitad de su ancho total hacia la izquierda (translateX(-50%)).
  - Esto crea un bucle perfecto porque el contenedor tiene una copia de los logos.
*/
@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/*
  Aplica la animación al contenedor de los logos.
  - animation: [nombre] [duración] [velocidad] [repetición];
  - Puedes ajustar los 40s para cambiar la velocidad del carrusel.
*/
.animate-scroll {
  animation: scroll 40s linear infinite;
}

/*
  Pausa la animación cuando el cursor está sobre el carrusel.
  - 'group' es una clase que ponemos en el contenedor principal del carrusel.
*/
.group:hover .animate-scroll {
  animation-play-state: paused;
}