/***************************************************
 * Scroll infinito de logos de tecnologías
 * Clon adaptado de: httpdocs/assets/css/scroll-horizontal-infinito-akutangulo.css
 * Clases conservadas del componente original (para que el ensamblador las
 * copie del demo): .contenedor-scroll-akutangulo, .scroll-tecnologias-akutangulo,
 * .logo-tecnologia, .tecnologias-akutangulo.
 * Animación 100% CSS: no requiere JS.
 ***************************************************/

/* 1. Contenedor "ventana": oculta el desborde y aplica fundido en los bordes.
   La variable --aku-scroll-mascara-color debe coincidir con el fondo sobre el
   que se coloca la franja (por defecto --aku-fondo). */
.contenedor-scroll-akutangulo {
  --aku-scroll-mascara-color: var(--aku-fondo);

  width: 100%;
  overflow: hidden;
  padding: 3rem 0 2rem;
  -webkit-mask-image: linear-gradient(to right, transparent, var(--aku-scroll-mascara-color) 15%, var(--aku-scroll-mascara-color) 85%, transparent);
  mask-image: linear-gradient(to right, transparent, var(--aku-scroll-mascara-color) 15%, var(--aku-scroll-mascara-color) 85%, transparent);
}

/* 2. Pista que se desplaza. Sin `gap`: el espaciado se aplica con
   margin-right uniforme en .logo-tecnologia (incluido el último), de modo
   que -50% del ancho total equivale exactamente a un conjunto de logos y el
   bucle se cierra sin salto visible. */
.scroll-tecnologias-akutangulo {
  display: flex;
  width: max-content;
  animation: aku-scroll-infinito 40s linear infinite;
}

/* 3. Wrapper de cada logo */
.logo-tecnologia {
  flex-shrink: 0;
  display: block;
  line-height: 0;
  margin-right: 2rem;
}

/* 4. Logotipo: chip claro (los logos oscuros de AWS, Notion o Azure necesitan
   fondo claro para ser legibles) con acento del morado de la marca. En reposo
   van en escala de grises y se revelan en color al pasar por encima. */
.tecnologias-akutangulo {
  display: block;
  height: 2.75rem;
  padding: 0.5rem;
  box-sizing: border-box;
  background-color: #f4f5fa;
  border: 1px solid rgba(147, 0, 211, 0.3);
  border-radius: 0.625rem;
  max-width: 100%;
  object-fit: contain;
  opacity: 0.85;
  filter: grayscale(1);
  transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease;
}

/* 5. Pausa la animación al pasar el ratón (o recibir foco) sobre la franja */
.contenedor-scroll-akutangulo:hover .scroll-tecnologias-akutangulo,
.contenedor-scroll-akutangulo:focus-within .scroll-tecnologias-akutangulo {
  animation-play-state: paused;
}

/* 6. Revelado de color al interactuar con un logo concreto */
.logo-tecnologia:hover .tecnologias-akutangulo,
.logo-tecnologia:focus-within .tecnologias-akutangulo {
  opacity: 1;
  filter: grayscale(0);
  transform: scale(1.1);
}

/* 7. Animación del bucle: -50% desplaza exactamente un conjunto completo */
@keyframes aku-scroll-infinito {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* 8. Movimiento reducido: la franja queda estática y visible */
@media (prefers-reduced-motion: reduce) {
  .scroll-tecnologias-akutangulo {
    animation: none;
  }
}