/* El carrusel puede asomar dentro de la sección, pero no ensancha la página. */
.kbx-coverflow-section,
.kbx-coverflow-section .elementor-widget-shortcode,
.kbx-coverflow-section .elementor-widget-container,
.kbx-coverflow-section__box {
  overflow-x: clip;
  max-width: 100%;
}

/* Kobrex Coverflow — contenedor */
.kbx-coverflow {
  --kbx-cf-gold: #b77824;
  --kbx-cf-gold-light: #e8c878;
  --kbx-cf-gold-dark: #9a6320;
  --kbx-cf-border: 5px;
  /* Ancho de cada tarjeta: sube/baja este valor (232 ≈ original, 255 ≈ +10 %) */
  --kbx-cf-slide-w: 255px;
  --kbx-cf-card-min-w: var(--kbx-cf-slide-w);
  --kbx-cf-red: #e30613;
  --kbx-cf-text: #111111;
  --kbx-cf-muted: #5a5a5a;
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 48px 0 56px;
  overflow-x: clip;
  background: transparent;
}

/* Stage: flechas + carrusel */
.kbx-coverflow__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 100%;
}

.kbx-coverflow__swiper-wrap {
  flex: 1;
  min-width: 0;
  max-width: calc(100% - 92px);
  overflow: hidden;
  padding: 0 8px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.25) 7%, #000 18%, #000 82%, rgba(0, 0, 0, 0.25) 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.25) 7%, #000 18%, #000 82%, rgba(0, 0, 0, 0.25) 93%, transparent 100%);
}

.kbx-coverflow__arrow {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  z-index: 999;
  border-radius: 4px;
  background: var(--kbx-cf-red);
  color: #ffffff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.kbx-coverflow__arrow:hover {
  background: #c50510;
}

.kbx-coverflow__arrow:active {
  transform: scale(0.96);
}

.kbx-coverflow .kbx-coverflow__swiper,
.kbx-coverflow .swiper {
  width: 100%;
  padding: 36px 0 48px;
  overflow: hidden;
}

.kbx-coverflow .kbx-coverflow__swiper .swiper-wrapper,
.kbx-coverflow .swiper-wrapper {
  align-items: center;
}

/* El cursor nativo del enlace no sigue la tarjeta pintada (el 3D mueve el área de clic).
   Por defecto no hay manita. Solo la tarjeta centrada, vía .kbx-coverflow--link-cursor. */
.kbx-coverflow .kbx-coverflow__swiper,
.kbx-coverflow .swiper,
.kbx-coverflow .swiper-wrapper,
.kbx-coverflow .swiper-slide,
.kbx-coverflow .swiper-slide * {
  cursor: default !important;
}

.kbx-coverflow.kbx-coverflow--link-cursor .kbx-coverflow__swiper,
.kbx-coverflow.kbx-coverflow--link-cursor .swiper,
.kbx-coverflow.kbx-coverflow--link-cursor .swiper-wrapper,
.kbx-coverflow.kbx-coverflow--link-cursor .swiper-slide,
.kbx-coverflow.kbx-coverflow--link-cursor .swiper-slide * {
  cursor: pointer !important;
}

.kbx-coverflow__arrow,
.kbx-coverflow__arrow * {
  cursor: pointer !important;
}

/* Ancho fijo por variable — Swiper usa slidesPerView: auto */
.kbx-coverflow .kbx-coverflow__swiper .swiper-slide,
.kbx-coverflow .swiper-slide {
  width: var(--kbx-cf-slide-w);
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  opacity: 1 !important;
  visibility: visible !important;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
}

/* Evita que Swiper/coverflow oculte slides al mover */
.kbx-coverflow .kbx-coverflow__swiper .swiper-slide:not(.swiper-slide-active),
.kbx-coverflow .swiper-slide:not(.swiper-slide-active) {
  pointer-events: auto;
}

.kbx-coverflow__slide-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-bottom: 0;
}

/* Sombra en el “piso” — separada de la tarjeta */
.kbx-coverflow__floor-shadow {
  display: block;
  width: 76%;
  height: 14px;
  margin-top: 18px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0.18) 0%,
    rgba(0, 0, 0, 0.07) 42%,
    rgba(0, 0, 0, 0) 70%
  );
  pointer-events: none;
  flex-shrink: 0;
  transition: width 0.35s ease, height 0.35s ease, margin 0.35s ease;
}

.kbx-coverflow .kbx-coverflow__swiper .swiper-slide-active .kbx-coverflow__floor-shadow,
.kbx-coverflow .swiper-slide-active .kbx-coverflow__floor-shadow {
  width: 86%;
  height: 17px;
  margin-top: 20px;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0.24) 0%,
    rgba(0, 0, 0, 0.09) 45%,
    rgba(0, 0, 0, 0) 72%
  );
}

/* Tarjeta — borde degradado dorado, sin sombra trasera */
.kbx-coverflow__card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: var(--kbx-cf-card-min-w);
  min-height: 320px;
  text-decoration: none;
  color: inherit;
  border: var(--kbx-cf-border) solid transparent;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: none;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(
      155deg,
      var(--kbx-cf-gold-light) 0%,
      #d4a84b 22%,
      var(--kbx-cf-gold) 48%,
      #e0bc62 72%,
      var(--kbx-cf-gold-dark) 100%
    ) border-box;
  transition: filter 0.25s ease;
}

.kbx-coverflow__card:not(.kbx-coverflow__card--active):hover {
  filter: brightness(1.03);
}

.kbx-coverflow__card--active:hover {
  filter: brightness(1.02);
}

/* Refuerzo visual: centro más grande, centrado respecto a laterales */
.kbx-coverflow .kbx-coverflow__swiper .swiper-slide-active .kbx-coverflow__slide-inner,
.kbx-coverflow .swiper-slide-active .kbx-coverflow__slide-inner {
  transform: scale(1.08);
  transform-origin: center center;
  transition: transform 0.55s cubic-bezier(0.25, 0.8, 0.25, 1);
}

@media (min-width: 1025px) {
  .kbx-coverflow .kbx-coverflow__swiper .swiper-slide-active .kbx-coverflow__slide-inner,
.kbx-coverflow .swiper-slide-active .kbx-coverflow__slide-inner {
    transform: scale(1.1);
  }
}

.kbx-coverflow .swiper-slide:not(.swiper-slide-active) .kbx-coverflow__slide-inner {
  transition: transform 0.55s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Cabecera categoría + icono */
.kbx-coverflow__head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 18px 8px;
  min-height: 44px;
}

.kbx-coverflow__cat {
  font-family: Oswald, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kbx-cf-text);
}

.kbx-coverflow__head i {
  font-size: 14px;
  color: var(--kbx-cf-text);
  opacity: 0.85;
}

/* Icono PNG/SVG en cabecera de producto (campo icon = URL en slides.php) */
.kbx-coverflow__head .kbx-coverflow__icon-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
  opacity: 0.9;
}

/* Imagen producto */
.kbx-coverflow__media {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: end;
  padding: 0px 0px 0px 20px;
  min-height: 120px;
}

.kbx-coverflow__media img {
  display: block;
  max-width: 100%;
  max-height: 120px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Pie título + subtítulo */
.kbx-coverflow__foot {
  padding: 12px 20px 22px;
  text-align: left;
}

.kbx-coverflow__title {
  margin: 0 0 0px;
  font-family: Raleway, sans-serif;
  font-size: 22px;
  text-align: center;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--kbx-cf-text);
}

/* Números / palabras destacadas en el título (span) */
.kbx-coverflow__title span {
  font-family: Oswald, Impact, sans-serif;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-size: 20px;
}

.kbx-coverflow__subtitle {
  margin: 0;
  font-family: Raleway, sans-serif;
  font-size: 11px;
  text-align: center;
  font-weight: 500;
  line-height: 1.45;
  color: var(--kbx-cf-muted);
}

/* Números / palabras destacadas en descripción (span en slides.php) */
.kbx-coverflow__subtitle span {
  font-family: Oswald, Impact, sans-serif;
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* Banner dorado (Super Carretera, etc.) */
.kbx-coverflow__card--banner {
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  padding: 28px 22px;
  min-height: 320px;
  background: 
    linear-gradient(145deg, #e3a103 0%, #fdac13 38%, #ab6103 100%) padding-box, 
    linear-gradient( 155deg, #d8a526 0%, #b18416 22%, #c78022 48%, #e0bc62 72%, var(--kbx-cf-gold-dark) 100% ) border-box;
  /*background:
    linear-gradient(145deg, #f0c96b 0%, #d4a84b 38%, #c8962e 100%) padding-box,
    linear-gradient(
      155deg,
      var(--kbx-cf-gold-light) 0%,
      #d4a84b 22%,
      var(--kbx-cf-gold) 48%,
      #e0bc62 72%,
      var(--kbx-cf-gold-dark) 100%
    ) border-box;*/
}

.kbx-coverflow__banner-icon {
  position: absolute;
  font-size: 22px;
  color: rgba(255, 255, 255, 0.55);
}

.kbx-coverflow__banner-icon--tl {
  top: 18px;
  left: 18px;
}

.kbx-coverflow__banner-icon--br {
  bottom: 18px;
  right: 18px;
  font-size: 18px;
}

.kbx-coverflow__banner-icon.kbx-coverflow__icon-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.kbx-coverflow__banner-icon--br.kbx-coverflow__icon-img {
  width: 22px;
  height: 22px;
}

.kbx-coverflow__banner-body {
  position: relative;
  z-index: 1;
  max-width: 92%;
}

.kbx-coverflow__banner-eyebrow {
  display: block;
  margin-bottom: 8px;
  font-family: Raleway, sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
}

.kbx-coverflow__banner-title {
  display: block;
  margin: 0 0 10px;
  font-family: Raleway, sans-serif;
  font-size: clamp(18px, 2.2vw, 30px);
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.kbx-coverflow__banner-title span {
  display: inline-block;
  font-size: clamp(28px, 3.2vw, 50px);
  line-height: 1;
}

.kbx-coverflow__banner-tagline {
  display: block;
  font-family: Oswald, sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.95);
}

/* Desktop */
@media (min-width: 1025px) {
  .kbx-coverflow {
    --kbx-cf-slide-w: 255px;
    --kbx-cf-border: 4px;
  }
}

/* Tablet */
@media (max-width: 1024px) {
  .kbx-coverflow {
    --kbx-cf-slide-w: 220px;
    --kbx-cf-border: 4px;
    padding: 40px 0 48px;
  }

  .kbx-coverflow__card {
    min-height: 340px;
    border-radius: 24px;
  }

  .kbx-coverflow__floor-shadow {
    margin-top: 14px;
  }
}

/* Móvil: una sola tarjeta entre las flechas. El resto entra al deslizar. */
@media (max-width: 767px) {
  .kbx-coverflow-section,
  .kbx-coverflow-section .elementor-widget-shortcode,
  .kbx-coverflow-section .elementor-widget-container,
  .kbx-coverflow-section__box {
    overflow-x: hidden !important;
    max-width: 100%;
    min-width: 0;
  }

  .kbx-coverflow {
    --kbx-cf-border: 3px;
    --kbx-cf-slide-w: 255px;
    --kbx-cf-card-min-w: 0px;
    padding: 32px 0 40px;
    overflow: hidden;
    max-width: 100%;
    min-width: 0;
  }

  .kbx-coverflow {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  .kbx-coverflow__stage {
    position: relative;
    justify-content: center;
    gap: 14px;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  .kbx-coverflow__swiper-wrap {
    container-type: inline-size;
    --kbx-cf-card-min-w: 0px;
    flex: 0 1 255px;
    width: 255px;
    max-width: calc(100vw - 112px);
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    overflow: hidden;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .kbx-coverflow__arrow--prev,
  .kbx-coverflow__arrow--next {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    z-index: 5;
  }

  .kbx-coverflow .kbx-coverflow__swiper,
  .kbx-coverflow .swiper {
    overflow: hidden;
  }

  .kbx-coverflow .kbx-coverflow__swiper .swiper-slide-active .kbx-coverflow__slide-inner,
  .kbx-coverflow .swiper-slide-active .kbx-coverflow__slide-inner {
    transform: none;
  }

  .kbx-coverflow__title {
    font-size: 16px;
    line-height: 1.15;
  }

  .kbx-coverflow__title span {
    font-size: 14px;
  }

  .kbx-coverflow__foot {
    padding: 8px 10px 16px;
  }

  .kbx-coverflow__card {
    box-sizing: border-box;
    max-width: 100%;
  }
  .kbx-coverflow__banner-eyebrow {
    font-size: 18px;
    line-height: 20px;
  }

  .kbx-coverflow__banner-tagline {
    font-size: 18px;
    letter-spacing: 0.15em;
  }

  .kbx-coverflow__arrow {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }

  .kbx-coverflow .swiper {
    padding: 16px 0 40px;
  }

  .kbx-coverflow__card {
    min-width: 0;
    width: 100%;
    min-height: 320px;
    border-radius: 22px;
  }

  .kbx-coverflow__floor-shadow {
    margin-top: 12px;
    height: 12px;
  }

  .kbx-coverflow__media {
    min-height: 160px;
  }

  .kbx-coverflow__media img {
    max-height: 170px;
  }
}