/* ========================================================================
   HERO DE REPUESTOS — IMAGEN ESPECÍFICA + DIFUMINADO SIN BORDE VISIBLE
   Se aplica solo a las páginas que tienen class="repuestos-photo-hero".
   ======================================================================== */
.page-hero.repuestos-photo-hero {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  background: #22272e !important;
  background-image: none !important;
}

.page-hero.repuestos-photo-hero .repuestos-hero-photo {
  display: block !important;
  position: absolute !important;
  z-index: 1 !important;
  top: 0 !important;
  right: 0 !important;
  width: 68% !important;
  height: 100% !important;
  overflow: hidden !important;
  pointer-events: none !important;
  background: #22272e !important;

  /* El borde izquierdo de la foto desaparece gradualmente,
     igual que en el banner principal. */
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,0,0,.06) 6%,
    rgba(0,0,0,.22) 14%,
    rgba(0,0,0,.52) 24%,
    rgba(0,0,0,.82) 34%,
    #000 46%,
    #000 100%
  ) !important;
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,0,0,.06) 6%,
    rgba(0,0,0,.22) 14%,
    rgba(0,0,0,.52) 24%,
    rgba(0,0,0,.82) 34%,
    #000 46%,
    #000 100%
  ) !important;
}

.page-hero.repuestos-photo-hero .repuestos-hero-photo::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background:
    linear-gradient(
      90deg,
      rgba(34,39,46,.96) 0%,
      rgba(34,39,46,.62) 13%,
      rgba(34,39,46,.26) 28%,
      rgba(34,39,46,.06) 48%,
      rgba(34,39,46,0) 70%
    ),
    linear-gradient(
      180deg,
      rgba(34,39,46,.20) 0%,
      rgba(34,39,46,0) 24%,
      rgba(34,39,46,0) 72%,
      rgba(34,39,46,.30) 100%
    ) !important;
}

.page-hero.repuestos-photo-hero .repuestos-hero-photo img {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* Conserva las capas de oscurecimiento del diseño y elimina el corte vertical. */
.page-hero.repuestos-photo-hero::before {
  z-index: 2 !important;
  background: linear-gradient(
    90deg,
    #22272e 0%,
    #22272e 31%,
    rgba(34,39,46,.98) 39%,
    rgba(34,39,46,.86) 48%,
    rgba(34,39,46,.58) 60%,
    rgba(34,39,46,.24) 76%,
    rgba(34,39,46,.05) 92%,
    rgba(34,39,46,0) 100%
  ) !important;
}

.page-hero.repuestos-photo-hero::after {
  z-index: 3 !important;
  background: linear-gradient(
    180deg,
    rgba(34,39,46,.42) 0%,
    rgba(34,39,46,.08) 16%,
    rgba(34,39,46,0) 50%,
    rgba(34,39,46,.12) 82%,
    rgba(34,39,46,.46) 100%
  ) !important;
}

.page-hero.repuestos-photo-hero > .wrap {
  position: relative !important;
  z-index: 4 !important;
}

@media (max-width: 820px) {
  .page-hero.repuestos-photo-hero .repuestos-hero-photo {
    width: 100% !important;
    height: 100% !important;
    opacity: .62 !important;
    -webkit-mask-image: linear-gradient(
      180deg,
      rgba(0,0,0,.40) 0%,
      #000 28%,
      #000 100%
    ) !important;
    mask-image: linear-gradient(
      180deg,
      rgba(0,0,0,.40) 0%,
      #000 28%,
      #000 100%
    ) !important;
  }

  .page-hero.repuestos-photo-hero::before {
    background: linear-gradient(
      90deg,
      rgba(34,39,46,.96) 0%,
      rgba(34,39,46,.86) 42%,
      rgba(34,39,46,.58) 100%
    ) !important;
  }
}