/* carrusel.css — las tarjetas asoman por los dos lados; la del centro es más grande y lleva --sombra-3.
   Con dos o menos tarjetas (desde 600px) entra el modo --pocos: centradas, sin asomo, sin flechas. */
.carrusel {
  position: relative;
  --carrusel-ancho: min(68vw, 360px);
  --carrusel-gap: var(--esp-4);
}
.carrusel__ventana {
  overflow: hidden;
  /* Espacio vertical para que la sombra grande no se recorte */
  padding-block: var(--esp-4) var(--esp-6);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.carrusel__pista {
  display: flex;
  align-items: center;
  gap: var(--carrusel-gap);
  transition: transform var(--mov-medio) var(--curva);
  will-change: transform;
}
.carrusel--arrastrando .carrusel__pista { transition: none; }

.carrusel__item {
  flex: 0 0 var(--carrusel-ancho);
  min-width: 0;
  perspective: 1400px;
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-1);
  opacity: .55;
  transform: scale(.9);
  transition:
    transform var(--mov-medio) var(--curva),
    opacity var(--mov-medio) var(--curva),
    flex-basis var(--mov-medio) var(--curva),
    margin var(--mov-medio) var(--curva),
    box-shadow var(--mov-medio) var(--curva);
}
.carrusel__item--activo { opacity: 1; transform: none; box-shadow: var(--sombra-3); }
/* Al filtrar, la tarjeta que sale colapsa su ancho: las demás se reacomodan con transición, no de golpe */
.carrusel__item--oculto {
  flex-basis: 0;
  opacity: 0;
  transform: scale(.8);
  margin-inline: calc(var(--carrusel-gap) / -2);
  overflow: hidden;
  pointer-events: none;
}

.carrusel--pocos .carrusel__pista { justify-content: center; transform: none; }
.carrusel--pocos .carrusel__item { opacity: 1; transform: none; box-shadow: var(--sombra-2); }

.carrusel__flecha {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 48px;
  height: 48px;
  margin-top: -36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--kv-nube);
  color: var(--kv-tinta);
  box-shadow: var(--sombra-2);
  transition: transform var(--mov-rapido) var(--curva), color var(--mov-rapido) var(--curva), opacity var(--mov-rapido) var(--curva);
}
.carrusel__flecha svg { width: 20px; height: 20px; }
.carrusel__flecha:hover { transform: scale(1.06); color: var(--kv-lavanda-profunda); }
.carrusel__flecha:focus-visible { border-radius: 50%; }
.carrusel__flecha--anterior { left: var(--esp-2); }
.carrusel__flecha--siguiente { right: var(--esp-2); }
/* En los extremos la flecha desaparece: no hay flechas que no lleven a ningún lado */
.carrusel__flecha:disabled { opacity: 0; pointer-events: none; }
.carrusel__flecha[hidden] { display: none; }

.carrusel__puntos {
  display: flex;
  justify-content: center;
  gap: var(--esp-1);
}
.carrusel__puntos[hidden] { display: none; }
.carrusel__punto {
  width: var(--toque-min);
  height: var(--toque-min);
  display: grid;
  place-items: center;
  border-radius: 50%;
}
.carrusel__punto::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: var(--radio-pill);
  background: var(--kv-perla);
  transition: width var(--mov-rapido) var(--curva), background-color var(--mov-rapido) var(--curva);
}
/* El activo cambia de forma (más ancho) además de color */
.carrusel__punto[aria-current="true"]::before { width: 24px; background: var(--kv-lavanda-profunda); }

@media (min-width: 600px) {
  .carrusel { --carrusel-ancho: 340px; --carrusel-gap: var(--esp-5); }
  .carrusel__flecha--anterior { left: var(--esp-4); }
  .carrusel__flecha--siguiente { right: var(--esp-4); }
}
@media (min-width: 900px) {
  .carrusel { --carrusel-ancho: 360px; }
  .carrusel__flecha { width: 56px; height: 56px; margin-top: -40px; }
  .carrusel__flecha--anterior { left: var(--esp-6); }
  .carrusel__flecha--siguiente { right: var(--esp-6); }
}