/* Carrusel de banners — hero configurable desde /gestion/. Reutiliza el look de .shop-head (gradiente navy). */

.carrusel {
  position: relative;
  overflow: hidden;
}

/* Acotado al ancho de .wrap (1200px) en vez de full-bleed: en la tienda, con
   sidebar de filtros y grilla dentro de .wrap, un hero a todo el ancho de la
   ventana no calzaba con el resto del layout. */
.carrusel--acotado {
  border-radius: var(--radius-lg);
  margin: 26px 0;
}

/* La altura del carrusel la da el aspect-ratio del track, no un fantasma del
   primer slide: cada imagen real (<img> dentro de .carrusel-slide) usa
   object-fit:contain sobre esa caja, así que ninguna queda recortada.
   15:4 en escritorio (medida ideal: 2400×640) y 3:2 desde el breakpoint donde
   entra la imagen_mobile del banner (medida ideal: 1200×800). */
.carrusel-track {
  position: relative;
  aspect-ratio: 15 / 4;
}

@media (max-width: 680px) {
  .carrusel-track { aspect-ratio: 3 / 2; }
}

.carrusel-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(165deg, var(--marine-900) 0%, var(--marine-700) 55%, var(--marine-600) 100%);
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 600ms ease, transform 600ms ease;
  pointer-events: none;
}

.carrusel-img {
  width: 100%;
  height: 100%;
  /* contain, no cover: los banners son piezas con texto y logos, recortarlos los
     mutila. Si la imagen no calza con el aspect-ratio del track, el gradiente de
     fondo rellena el sobrante (banners de antes de imagen_mobile, en mobile). */
  object-fit: contain;
}

.carrusel-slide.is-active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* Sin copy encima de la imagen: si tiene enlace, toda el área del slide es clickeable. */
.carrusel-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.carrusel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(11, 31, 46, 0.35);
  backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}

.carrusel-arrow:hover { background: rgba(11, 31, 46, 0.6); border-color: rgba(255, 255, 255, 0.45); transform: translateY(-50%) scale(1.05); }
.carrusel-arrow .lucide, .carrusel-arrow i { width: 18px; height: 18px; }
.carrusel-arrow.prev { left: 16px; }
.carrusel-arrow.next { right: 16px; }

.carrusel-dots {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

.carrusel-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  padding: 0;
  transition: background var(--dur-fast), width var(--dur-fast), border-color var(--dur-fast);
}

.carrusel-dot:hover { background: rgba(255, 255, 255, 0.55); }

.carrusel-dot.is-active {
  background: #fff;
  border-color: #fff;
  width: 22px;
}

@media (max-width: 680px) {
  .carrusel-arrow { display: none; }
}