/* =========================================================
   CARRUSEL (componente reutilizable)
   LedLab — landing.
   ---------------------------------------------------------
   Un slide por vez, con flechas a los costados. La lógica está en
   initCarousel() de js/main.js, que solo actualiza --carousel-index;
   todo el movimiento lo hace este CSS.

   Uso:
     <div class="carousel" data-carousel>
       <button class="carousel__nav carousel__nav--prev" data-carousel-prev>…</button>
       <div class="carousel__viewport">
         <div class="carousel__track">
           <div class="carousel__slide">…</div>
         </div>
       </div>
       <button class="carousel__nav carousel__nav--next" data-carousel-next>…</button>
     </div>
   ========================================================= */
.carousel {
  --carousel-index: 0;
  position: relative;
}

.carousel__viewport {
  overflow: hidden;
  width: 100%;
}

.carousel__track {
  display: flex;
  /* Un slide ocupa el 100% del viewport, así que moverse un slide es
     correr la pista exactamente un 100% por índice. */
  transform: translateX(calc(var(--carousel-index) * -100%));
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.carousel__slide {
  flex: 0 0 100%;
  min-width: 0; /* sin esto, el contenido largo ensancha el slide */
}

/* --- Flechas ---
   Van centradas sobre el borde del slide (mitad adentro, mitad afuera),
   como en el Figma. */
.carousel__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(34px, 3.4vw, 46px);
  aspect-ratio: 1;
  background: var(--color-7);
  color: var(--color-text-light);
  border: none;
  border-radius: 0; /* cuadrado, como el resto del sitio */
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.carousel__nav--prev { left: 0; transform: translate(-50%, -50%); }
.carousel__nav--next { right: 0; transform: translate(50%, -50%); }

.carousel__nav:hover,
.carousel__nav:focus-visible {
  background: var(--color-8);
}
.carousel__nav--prev:hover,
.carousel__nav--prev:focus-visible { transform: translate(-50%, -50%) scale(0.94); }
.carousel__nav--next:hover,
.carousel__nav--next:focus-visible { transform: translate(50%, -50%) scale(0.94); }

.carousel__nav svg {
  width: 45%;
  height: 45%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
}

@media (prefers-reduced-motion: reduce) {
  .carousel__track { transition: none; }
}