/* Variante aislada: recorrido AOVE con zócalo editorial. */
html.seleccion-intro-review .oil-process.oil-process-editorial {
  min-height: calc(100svh - var(--header) - 54px);
  padding: 0;
  display: grid;
  grid-template-rows: minmax(360px, 64fr) minmax(220px, 36fr);
  align-items: stretch;
  background: #000;
}

html.seleccion-intro-review .oil-process.oil-process-editorial::before {
  inset: 0 0 34% 0;
  background-position: center 48%;
  filter: saturate(.75) contrast(1.1) brightness(.85);
  transform: none;
}

html.seleccion-intro-review .oil-process.oil-process-editorial::after {
  background:
    linear-gradient(180deg,
      rgba(0, 0, 0, .76) 0%,
      rgba(0, 0, 0, .23) 18%,
      rgba(0, 0, 0, .12) 43%,
      rgba(0, 0, 0, .42) 57%,
      #000 68%,
      #000 100%),
    linear-gradient(90deg,
      rgba(0, 0, 0, .52) 0%,
      rgba(0, 0, 0, .08) 28%,
      rgba(0, 0, 0, .08) 70%,
      rgba(0, 0, 0, .58) 100%);
}

html.seleccion-intro-review .oil-process-editorial .oil-process-head {
  grid-row: 1;
  align-self: center;
  width: min(1060px, calc(100% - 56px));
  max-width: none;
  margin: 0 auto;
  padding: clamp(92px, 14vh, 154px) 0 clamp(34px, 6vh, 70px);
  transform: translateY(-2px);
}

html.seleccion-intro-review .oil-process-editorial .oil-process-head .eyebrow {
  margin-bottom: 22px;
  color: #d4aa58;
  font-family: "Manrope", Arial, sans-serif;
  font-size: 16px;
  letter-spacing: .2em;
}

html.seleccion-intro-review .oil-process-editorial .oil-process-head h2 {
  color: #f1ede4;
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: clamp(64px, 6.7vw, 108px);
  line-height: .96;
  text-shadow: 0 3px 22px #000, 0 0 46px rgba(0, 0, 0, .92);
}

html.seleccion-intro-review .oil-process-editorial .oil-process-head .bodycopy {
  max-width: 820px;
  margin: 32px auto 0;
  color: #eee8de;
  font-family: "Manrope", Arial, sans-serif;
  font-size: clamp(24px, 1.6vw, 29px);
  line-height: 1.55;
  text-shadow: 0 2px 18px #000, 0 0 36px #000;
}

html.seleccion-intro-review .oil-process-editorial .oil-route-editorial {
  grid-row: 2;
  align-self: stretch;
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 92px clamp(38px, 6vw, 116px) 62px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: start;
  border-top: 1px solid rgba(197, 156, 76, .72);
  background: #000;
}

html.seleccion-intro-review .oil-process-editorial .oil-route-track {
  position: absolute;
  z-index: 0;
  top: 72px;
  left: clamp(78px, 9vw, 174px);
  right: clamp(78px, 9vw, 174px);
  height: 1px;
  background: linear-gradient(90deg, rgba(197, 156, 76, .36), #d4aa58 48%, rgba(197, 156, 76, .36));
  transform-origin: left center;
}

html.seleccion-intro-review .oil-process-editorial .oil-route-station {
  z-index: 1;
  min-width: 0;
  padding: 0 clamp(8px, 1vw, 18px);
}

html.seleccion-intro-review .oil-process-editorial .oil-route-station::after {
  display: none;
}

html.seleccion-intro-review .oil-process-editorial .oil-route-station span {
  position: relative;
  width: auto;
  height: auto;
  margin: -40px auto 34px;
  border: 0;
  border-radius: 0;
  background: #000;
  color: #dcb868;
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 34px;
  line-height: 1;
}

html.seleccion-intro-review .oil-process-editorial .oil-route-station span::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -18px;
  width: 7px;
  height: 7px;
  border: 1px solid #d4aa58;
  border-radius: 50%;
  background: #000;
  box-shadow: 0 0 0 5px #000;
  transform: translateX(-50%);
}

html.seleccion-intro-review .oil-process-editorial .oil-route-station strong {
  max-width: 190px;
  margin: 0 auto;
  color: #f3eee5;
  font-family: "Manrope", Arial, sans-serif;
  font-size: clamp(16px, 1.05vw, 19px);
  font-weight: 500;
  line-height: 1.48;
  letter-spacing: .12em;
  text-shadow: none;
}

html.seleccion-intro-review .oil-process-editorial.is-motion-ready .oil-route-track {
  transform: scaleX(0);
}

html.seleccion-intro-review .oil-process-editorial.is-motion-ready .oil-route-station {
  opacity: 0;
  transform: translateY(10px);
}

html.seleccion-intro-review .oil-process-editorial.is-visible .oil-route-track {
  transform: scaleX(1);
  transition: transform 820ms cubic-bezier(.22, .8, .24, 1);
}

html.seleccion-intro-review .oil-process-editorial.is-visible .oil-route-station {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 420ms ease calc(220ms + var(--station-index) * 150ms),
    transform 480ms cubic-bezier(.22, .8, .24, 1) calc(220ms + var(--station-index) * 150ms);
}

html.seleccion-intro-review .oil-process-editorial.is-visible .oil-route-station span::after {
  box-shadow: 0 0 0 5px #000, 0 0 16px rgba(212, 170, 88, .28);
}

@media (max-width: 1100px) {
  html.seleccion-intro-review .oil-process.oil-process-editorial {
    min-height: 1080px;
    grid-template-rows: minmax(610px, 60fr) minmax(440px, 40fr);
  }

  html.seleccion-intro-review .oil-process.oil-process-editorial::before {
    bottom: 40%;
  }

  html.seleccion-intro-review .oil-process-editorial .oil-route-editorial {
    padding: 82px 46px 54px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 74px;
  }

  html.seleccion-intro-review .oil-process-editorial .oil-route-track {
    top: 63px;
    left: 13%;
    right: 13%;
  }

  html.seleccion-intro-review .oil-process-editorial .oil-route-editorial::after {
    content: '';
    position: absolute;
    left: 13%;
    right: 13%;
    top: 245px;
    height: 1px;
    background: rgba(197, 156, 76, .48);
  }

  html.seleccion-intro-review .oil-process-editorial .oil-route-station:nth-of-type(n+5) span {
    margin-top: -27px;
  }
}

@media (max-width: 680px) {
  html.seleccion-intro-review .oil-process.oil-process-editorial {
    min-height: 1440px;
    grid-template-rows: minmax(720px, 52fr) minmax(700px, 48fr);
  }

  html.seleccion-intro-review .oil-process.oil-process-editorial::before {
    inset: 0 0 48% 0;
    background-position: 57% center;
  }

  html.seleccion-intro-review .oil-process.oil-process-editorial::after {
    background:
      linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .38) 15%, rgba(0, 0, 0, .13) 38%, rgba(0, 0, 0, .55) 47%, #000 54%, #000 100%),
      linear-gradient(90deg, rgba(0, 0, 0, .42), rgba(0, 0, 0, .06) 50%, rgba(0, 0, 0, .42));
  }

  html.seleccion-intro-review .oil-process-editorial .oil-process-head {
    width: calc(100% - 46px);
    padding: 168px 0 72px;
  }

  html.seleccion-intro-review .oil-process-editorial .oil-process-head h2 {
    font-size: clamp(55px, 15vw, 68px);
    line-height: 1;
  }

  html.seleccion-intro-review .oil-process-editorial .oil-process-head .bodycopy {
    margin-top: 29px;
    font-size: 22px;
  }

  html.seleccion-intro-review .oil-process-editorial .oil-route-editorial {
    padding: 86px 18px 64px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 88px;
  }

  html.seleccion-intro-review .oil-process-editorial .oil-route-track,
  html.seleccion-intro-review .oil-process-editorial .oil-route-editorial::after {
    display: none;
  }

  html.seleccion-intro-review .oil-process-editorial .oil-route-station {
    min-height: 126px;
    padding: 0 8px;
    border-top: 1px solid rgba(197, 156, 76, .45);
  }

  html.seleccion-intro-review .oil-process-editorial .oil-route-station span,
  html.seleccion-intro-review .oil-process-editorial .oil-route-station:nth-of-type(n+5) span {
    width: max-content;
    margin: -18px auto 32px;
    padding: 0 13px;
    font-size: 32px;
  }

  html.seleccion-intro-review .oil-process-editorial .oil-route-station strong {
    font-size: 16px;
    letter-spacing: .1em;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.seleccion-intro-review .oil-process-editorial .oil-route-track,
  html.seleccion-intro-review .oil-process-editorial .oil-route-station {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}