/* Marcas: portada cinematográfica con paneles de imagen. */
.page-hero {
  min-height: 100dvh !important;
  height: 100dvh !important;
  padding: 0 !important;
  background: #0a0a0a !important;
  color: #fff !important;
  overflow: hidden !important;
}

.page-hero::after {
  display: none !important;
}

nav#nav:not(.sc) {
  border-bottom-color: rgba(255, 255, 255, 0.18) !important;
  background: rgba(10, 10, 10, 0.16) !important;
  color: #fff !important;
}

nav#nav:not(.sc) .nav-links a {
  border-color: rgba(255, 255, 255, 0.24) !important;
  color: #fff !important;
}
nav#nav:not(.sc) .nav-links a.active {
  border-color: #fff !important;
  background: #fff !important;
  color: #0a0a0a !important;
}
nav#nav:not(.sc) .nav-mb {
  color: #fff !important;
}

.mh-grid {
  --mh-x: 0px;
  --mh-y: 0px;
  position: relative;
  display: grid;
  grid-template-columns: 34% 43% 23%;
  width: 100%;
  height: 100%;
  min-height: 720px;
  overflow: hidden;
  isolation: isolate;
  background: #0a0a0a;
}

.mh-panel {
  position: relative;
  min-width: 0;
  overflow: hidden;
}
.mh-panel-copy {
  z-index: 2;
  overflow: visible;
  background: #0a0a0a;
  color: #fff;
}
.mh-panel-rider {
  z-index: 1;
  background: #dedbd5;
}
.mh-panel-macro {
  z-index: 1;
  background: #d8d8d5;
}

.mh-image {
  position: absolute;
  inset: -3%;
  width: 106%;
  height: 106%;
  max-width: none;
  object-fit: cover;
  will-change: transform;
  filter: contrast(1.02) saturate(1.02);
  transition:
    transform 1.6s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.mh-rider-image {
  object-position: 50% 18%;
  transform: translate3d(calc(var(--mh-x) * -0.32), calc(var(--mh-y) * -0.24 + 9%), 0) scale(1.08);
}
.mh-macro-image {
  object-position: 52% 50%;
  transform: translate3d(calc(var(--mh-x) * 0.5), calc(var(--mh-y) * 0.35 - 9%), 0) scale(1.1);
}
.mh-grid.is-ready .mh-rider-image {
  transform: translate3d(calc(var(--mh-x) * -0.32), calc(var(--mh-y) * -0.24), 0) scale(1.03);
}
.mh-grid.is-ready .mh-macro-image {
  transform: translate3d(calc(var(--mh-x) * 0.5), calc(var(--mh-y) * 0.35), 0) scale(1.05);
}

.mh-panel-rider::after,
.mh-panel-macro::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(10, 10, 10, 0.16),
    transparent 26%,
    transparent 68%,
    rgba(10, 10, 10, 0.2)
  );
}

.mh-top {
  position: absolute;
  top: 26px;
  z-index: 5;
  font: 800 0.55rem/1 var(--ft);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0;
  transform: translate3d(0, -16px, 0);
  transition:
    opacity 0.75s 0.95s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s 0.95s cubic-bezier(0.22, 1, 0.36, 1);
}

.mh-grid.is-ready .mh-top {
  opacity: 0.76;
  transform: none;
}
.mh-top-left {
  left: 4vw;
}
.mh-top-center {
  left: 50%;
  transform: translate3d(-50%, -16px, 0);
  white-space: nowrap;
}
.mh-grid.is-ready .mh-top-center {
  transform: translate3d(-50%, 0, 0);
}
.mh-top-right {
  right: 24px;
}

.mh-word {
  position: absolute;
  top: 10.5%;
  left: 4vw;
  z-index: 2;
  width: 145%;
  overflow: visible;
  font-family: var(--fd);
  font-size: clamp(13rem, 25vw, 30rem);
  font-weight: 400;
  line-height: 0.72;
  letter-spacing: -0.045em;
  color: #fff;
  white-space: nowrap;
}

.mh-panel-copy .mh-word--statement {
  top: 18%;
  width: calc(100% - 7vw);
  font-size: clamp(4rem, 6vw, 8rem);
  line-height: 0.84;
  letter-spacing: -0.025em;
  white-space: normal;
}

.mh-word span {
  display: block;
  transform: translate3d(0, 110%, 0);
  transition: transform 1.25s 0.48s cubic-bezier(0.16, 1, 0.3, 1);
}
.mh-grid.is-ready .mh-word span {
  transform: none;
}

.mh-bottom {
  position: absolute;
  z-index: 5;
  bottom: 0;
  min-height: 31%;
  padding: clamp(26px, 3.6vw, 58px) 4vw;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
}

.mh-bottom-left {
  left: 0;
  right: 0;
}
.mh-bottom-center {
  left: 0;
  right: 0;
  padding-left: 42px;
}
.mh-bottom-right {
  left: 0;
  right: 0;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  background: #fff;
  color: #0a0a0a;
  text-decoration: none;
}
.mh-kicker {
  margin-bottom: 18px;
  font: 800 0.54rem/1 var(--ft);
  letter-spacing: 0.18em;
  opacity: 0.5;
}
.mh-bottom strong {
  font-family: var(--fd);
  font-size: clamp(2.4rem, 4.5vw, 5.7rem);
  font-weight: 400;
  line-height: 0.78;
  letter-spacing: -0.02em;
}
.mh-bottom-left strong {
  font-size: clamp(2rem, 3.1vw, 4.2rem);
}
.mh-panel-copy .mh-bottom-left strong {
  font-size: clamp(3.5rem, 5.4vw, 7.2rem);
  line-height: 0.82;
}
.mh-bottom-right strong {
  font-size: clamp(2.8rem, 4.6vw, 5.8rem);
}
.mh-bottom-right > span {
  font-size: clamp(2.5rem, 4vw, 5rem);
  line-height: 0.7;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.mh-bottom-right:hover > span {
  transform: translate3d(8px, 8px, 0);
}
.mh-star {
  margin: 0 0 4px -24px;
  font-size: clamp(2rem, 4vw, 4.8rem);
  line-height: 1;
}

.mh-orbit {
  position: absolute;
  z-index: 4;
  top: 36%;
  right: -48px;
  width: 138px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(10, 10, 10, 0.25);
  border-radius: 50%;
  color: #0a0a0a;
  font: 800 0.54rem/1 var(--ft);
  letter-spacing: 0.26em;
  opacity: 0;
  transform: scale(0.7) rotate(-20deg);
  transition:
    opacity 0.7s 1.15s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.1s 1.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.mh-grid.is-ready .mh-orbit {
  opacity: 0.7;
  transform: scale(1) rotate(0);
}
.mh-rule {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 4;
  height: 1px;
  background: rgba(255, 255, 255, 0.25);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.mh-grid.is-ready .mh-rule {
  transform: scaleX(1);
}
.mh-rule-one {
  top: 63%;
}
.mh-rule-two {
  top: 69%;
}

.mh-intro {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 34% 43% 23%;
  pointer-events: none;
}
.mh-intro i {
  display: block;
  background: #0a0a0a;
  transform: scaleY(1);
  transition: transform 1.25s cubic-bezier(0.76, 0, 0.24, 1);
  will-change: transform;
}
.mh-intro i:nth-child(1) {
  transform-origin: top;
  transition-delay: 0.08s;
}
.mh-intro i:nth-child(2) {
  transform-origin: bottom;
  transition-delay: 0.22s;
}
.mh-intro i:nth-child(3) {
  transform-origin: top;
  transition-delay: 0.38s;
}
.mh-grid.is-ready .mh-intro i {
  transform: scaleY(0);
}

@media (max-width: 900px) {
  .mh-grid {
    grid-template-columns: 40% 60%;
  }
  .mh-panel-macro {
    display: none;
  }
  .mh-intro {
    grid-template-columns: 40% 60%;
  }
  .mh-intro i:nth-child(3) {
    display: none;
  }
  .mh-word {
    font-size: 32vw;
  }
  .mh-panel-copy .mh-word--statement {
    font-size: clamp(3.5rem, 6vw, 5.5rem);
  }
  .mh-panel-copy .mh-bottom-left strong {
    font-size: clamp(3rem, 5.4vw, 5rem);
  }
  .mh-bottom-center {
    padding-left: 28px;
  }
}

@media (max-width: 680px) {
  .page-hero {
    height: auto !important;
    min-height: 100dvh !important;
    padding-top: 64px !important;
  }
  .mh-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 43dvh 57dvh;
    min-height: calc(100dvh - 64px);
  }
  .mh-panel-copy {
    grid-row: 1;
    overflow: hidden;
    padding: 0 16px;
  }
  .mh-panel-rider {
    grid-row: 2;
  }
  .mh-word {
    top: 19%;
    left: 16px;
    width: calc(100% - 32px);
    overflow: hidden;
    font-size: 43vw;
    line-height: 0.7;
  }
  .mh-panel-copy .mh-word--statement {
    top: 18%;
    font-size: clamp(2.7rem, 12.5vw, 4.2rem);
    line-height: 0.84;
    overflow: visible;
  }
  .mh-panel-copy .mh-bottom-left strong {
    font-size: clamp(2.5rem, 10.5vw, 3.5rem);
    line-height: 0.82;
  }
  .mh-top {
    top: 18px;
  }
  .mh-top-left {
    left: 16px;
  }
  .mh-top-center {
    left: 16px;
    transform: translate3d(0, -16px, 0);
  }
  .mh-grid.is-ready .mh-top-center {
    transform: none;
  }
  .mh-bottom {
    min-height: auto;
    padding: 22px 16px;
  }
  .mh-bottom-left {
    padding-bottom: 18px;
  }
  .mh-bottom-left strong {
    font-size: 2.25rem;
  }
  .mh-bottom-center {
    padding: 24px 16px;
  }
  .mh-bottom-center strong {
    font-size: 4.1rem;
  }
  .mh-star {
    margin-left: 0;
  }
  .mh-orbit {
    top: 20%;
    right: -35px;
    width: 112px;
  }
  .mh-rule-one {
    top: 43%;
  }
  .mh-rule-two {
    display: none;
  }
  .mh-intro {
    grid-template-columns: 1fr;
    grid-template-rows: 43dvh 57dvh;
  }
  .mh-intro i:nth-child(2) {
    grid-row: 2;
  }
  .mh-intro i:nth-child(3) {
    display: none;
  }
  .mh-rider-image {
    object-position: 50% 14%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mh-intro {
    display: none;
  }
  .mh-word span,
  .mh-image,
  .mh-top,
  .mh-orbit,
  .mh-rule {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}