.mh-colibri-intro {
  color-scheme: light;
  width: 100%;
  color: #000000;
  background: #ffffff;
  font-family: "Raleway", sans-serif;
  font-synthesis: none;
}

.mh-colibri-intro,
.mh-colibri-intro *,
.mh-colibri-intro *::before,
.mh-colibri-intro *::after {
  box-sizing: border-box;
}

.mh-colibri-intro ::selection {
  background: #e34341;
  color: #ffffff;
}

.mh-colibri-intro.intro-scroll {
  position: relative;
  height: 300vh;
  height: 300svh;
  overflow: visible;
  isolation: isolate;
}

.mh-colibri-intro .intro-scene {
  --background-progress: 0;

  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: clip;
  isolation: isolate;
  background: #d5d5d5;
}

.mh-colibri-intro .intro-scene::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: #ffffff;
  content: "";
  opacity: var(--background-progress);
  pointer-events: none;
  will-change: opacity;
}

.mh-colibri-intro .intro-scene.is-released::before {
  will-change: auto;
}

.mh-colibri-intro .intro-stage {
  position: absolute;
  inset: 0;
}

.mh-colibri-intro .bird-positioner,
.mh-colibri-intro .shadow-positioner,
.mh-colibri-intro .brand-positioner {
  position: absolute;
  aspect-ratio: 1;
  pointer-events: none;
  transform-origin: 50% 50%;
}

.mh-colibri-intro .bird-positioner {
  z-index: 4;
  top: 69.5%;
  left: 68.5%;
  width: clamp(18rem, 20.8vw, 44rem);
  transform: translate3d(-50%, -50%, 0);
}

.mh-colibri-intro .bird-entrance {
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: translate3d(0, 9px, 0) scale(0.94);
  transition:
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mh-colibri-intro .bird-entrance.is-ready {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.mh-colibri-intro .shadow-positioner {
  --shadow-opacity: 0;
  --shadow-scale: 0.76;
  --shadow-x: 3vw;
  --shadow-y: 2.5vh;

  z-index: 1;
  top: 49.5%;
  left: 55.5%;
  width: clamp(42rem, 64vw, 70rem);
  opacity: var(--shadow-opacity);
  transform: translate3d(-50%, -50%, 0)
    translate3d(var(--shadow-x), var(--shadow-y), 0) scale(var(--shadow-scale));
}

.mh-colibri-intro .shadow-master {
  opacity: 0;
  transition: opacity 280ms ease-out;
}

.mh-colibri-intro .shadow-master.is-ready {
  opacity: 1;
}

.mh-colibri-intro .brand-positioner {
  --brand-opacity: 0;
  --brand-y: 8px;

  z-index: 2;
  top: 61%;
  left: 50%;
  width: clamp(32rem, 62vw, 66rem);
  aspect-ratio: 448.62 / 142.19;
  opacity: var(--brand-opacity);
  transform: translate3d(-50%, calc(-50% + var(--brand-y)), 0);
}

.mh-colibri-intro .brand-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mh-colibri-intro .master-motion {
  --hover-distance: clamp(0.75px, 0.16vmin, 1.6px);

  width: 100%;
  height: 100%;
  margin: 0;
  contain: layout paint;
  transform: translate3d(0, 0, 0);
}

.mh-colibri-intro .master-motion.is-running {
  animation: mh-colibri-hover 1050ms cubic-bezier(0.45, 0, 0.55, 1) infinite;
  will-change: transform;
}

.mh-colibri-intro .frame-stack {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.mh-colibri-intro .master-frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  object-fit: contain;
}

.mh-colibri-intro .master-frame.is-active {
  opacity: 1;
  visibility: visible;
}

.mh-colibri-intro .intro-copy {
  --copy-opacity: 0;
  --copy-y: 12px;
  --copy-blur: 3px;

  position: absolute;
  z-index: 5;
  top: 46.5%;
  left: 50%;
  width: min(84rem, calc(100% - 4rem));
  margin: 0;
  opacity: var(--copy-opacity);
  filter: blur(var(--copy-blur));
  color: inherit;
  font-family: "Raleway", sans-serif;
  font-size: 2.25rem;
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.025em;
  text-align: center;
  text-wrap: balance;
  transform: translate3d(-50%, calc(-50% + var(--copy-y)), 0);
  will-change: opacity, filter, transform;
}

.mh-colibri-intro .intro-copy strong {
  font-size: 2.9375rem;
  font-weight: 900;
  line-height: 0.9;
}

.mh-colibri-intro .intro-copy--question {
  color: #000000;
}

.mh-colibri-intro .intro-copy--question.is-auto-visible {
  --copy-opacity: 1;
  --copy-y: 0px;
  --copy-blur: 0px;

  transition:
    opacity 650ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 650ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mh-colibri-intro .intro-copy--question.is-scroll-controlled {
  transition: none;
}

.mh-colibri-intro .intro-copy--projection {
  color: #e34341;
}

.mh-colibri-intro .scroll-cue {
  position: absolute;
  z-index: 6;
  right: clamp(2.25rem, 7vw, 7.5rem);
  bottom: clamp(2.25rem, 6.5vh, 4rem);
  width: clamp(1.25rem, 1.55vw, 1.75rem);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  transition: opacity 420ms ease-out;
}

.mh-colibri-intro .scroll-cue.is-visible {
  opacity: 0.78;
  animation: mh-colibri-scroll-cue 1900ms cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.mh-colibri-intro .scroll-cue__image {
  display: block;
  width: 100%;
  height: auto;
}

.mh-colibri-intro .load-error {
  position: absolute;
  z-index: 10;
  inset: auto 1rem 1rem;
  margin: 0 auto;
  padding: 0.75rem 1rem;
  background: #ffffff;
  color: #7d1414;
  font: 500 1rem/1.4 "Raleway", sans-serif;
  text-align: center;
}

.mh-colibri-intro .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mh-colibri-intro.mh-colibri-intro--fallback {
  display: grid;
  min-height: 100vh;
  place-content: center;
  gap: 1rem;
  padding: 2rem;
  background: #ffffff;
  font: 500 clamp(1.625rem, 4vw, 2.25rem) / 1.2 "Raleway", sans-serif;
  text-align: center;
}

.mh-colibri-intro.mh-colibri-intro--fallback img {
  width: min(70vw, 25rem);
  margin-inline: auto;
}

.mh-colibri-intro.mh-colibri-intro--fallback p {
  margin: 0;
}

@keyframes mh-colibri-hover {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, calc(-1 * var(--hover-distance)), 0);
  }
}

@keyframes mh-colibri-scroll-cue {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, 5px, 0);
  }
}

@media (max-width: 68.75rem) {
  .mh-colibri-intro.intro-scroll {
    height: 270vh;
    height: 270svh;
  }

  .mh-colibri-intro .bird-positioner {
    top: 67%;
    left: 69%;
    width: clamp(17rem, 28vw, 23rem);
  }

  .mh-colibri-intro .shadow-positioner {
    top: 50%;
    left: 54%;
    width: min(82vw, 50rem);
  }

  .mh-colibri-intro .brand-positioner {
    top: 60%;
    width: min(72vw, 48rem);
  }

  .mh-colibri-intro .intro-copy {
    top: 34%;
    width: min(62rem, calc(100% - 3rem));
    font-size: 2rem;
  }

  .mh-colibri-intro .intro-copy strong {
    font-size: 2.625rem;
  }

  .mh-colibri-intro .scroll-cue {
    right: clamp(2rem, 5vw, 3.5rem);
  }
}

@media (max-width: 43.75rem) {
  .mh-colibri-intro.intro-scroll {
    height: 235vh;
    height: 235svh;
  }

  .mh-colibri-intro .bird-positioner {
    top: 62.5%;
    left: 66%;
    width: clamp(12.5rem, 64vw, 17rem);
  }

  .mh-colibri-intro .shadow-positioner {
    top: 50%;
    left: 49%;
    width: min(132vw, 73svh);
  }

  .mh-colibri-intro .brand-positioner {
    top: 62%;
    width: 92vw;
  }

  .mh-colibri-intro .intro-copy {
    top: 21%;
    width: calc(100% - 2rem);
    font-size: clamp(1.625rem, 7vw, 1.75rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
  }

  .mh-colibri-intro .intro-copy strong {
    font-size: clamp(2.125rem, 9.5vw, 2.375rem);
  }

  .mh-colibri-intro .intro-copy--question {
    max-width: 21ch;
  }

  .mh-colibri-intro .intro-copy--projection {
    max-width: 20ch;
  }

  .mh-colibri-intro .scroll-cue {
    right: 1.5rem;
    bottom: 1.75rem;
    width: 1.25rem;
  }
}

@media (max-height: 40.625rem) and (min-width: 43.8125rem) {
  .mh-colibri-intro .bird-positioner {
    top: 66%;
    width: min(27vw, 42vh);
  }

  .mh-colibri-intro .shadow-positioner {
    width: min(62vw, 88vh);
  }

  .mh-colibri-intro .brand-positioner {
    top: 58%;
    width: min(60vw, 46rem);
  }

  .mh-colibri-intro .intro-copy {
    top: 42%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mh-colibri-intro.intro-scroll {
    height: auto;
  }

  .mh-colibri-intro .intro-scene {
    position: relative;
    display: grid;
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    grid-template-rows: auto minmax(24rem, 1fr) auto;
    gap: clamp(1.25rem, 4vw, 3rem);
    padding: clamp(1.5rem, 5vw, 4rem);
    background: #ffffff !important;
  }

  .mh-colibri-intro .intro-scene::before {
    will-change: auto;
  }

  .mh-colibri-intro .intro-stage {
    position: relative;
    inset: auto;
    grid-row: 2;
    min-height: min(56vw, 38rem);
  }

  .mh-colibri-intro .intro-copy {
    position: relative;
    inset: auto;
    left: auto;
    width: min(64rem, 100%);
    max-width: none;
    margin-inline: auto;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
    will-change: auto;
  }

  .mh-colibri-intro .intro-copy--question {
    grid-row: 1;
  }

  .mh-colibri-intro .intro-copy--projection {
    grid-row: 3;
  }

  .mh-colibri-intro .shadow-positioner {
    --shadow-opacity: 1 !important;
    --shadow-scale: 1 !important;
    --shadow-x: 0px !important;
    --shadow-y: 0px !important;
  }

  .mh-colibri-intro .brand-positioner {
    --brand-opacity: 1 !important;
    --brand-y: 0px !important;
  }

  .mh-colibri-intro .bird-entrance {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .mh-colibri-intro .master-motion.is-running {
    animation: none;
    transform: none;
  }

  .mh-colibri-intro .scroll-cue {
    animation: none;
    transform: none;
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 43.75rem) {
  .mh-colibri-intro .intro-scene {
    grid-template-rows: auto minmax(25rem, 55svh) auto;
    padding: 1.5rem 1rem 2rem;
  }

  .mh-colibri-intro .intro-stage {
    min-height: 25rem;
  }

  .mh-colibri-intro .bird-positioner {
    top: 64%;
  }

  .mh-colibri-intro .shadow-positioner {
    top: 50%;
    width: min(125vw, 34rem);
  }

  .mh-colibri-intro .brand-positioner {
    top: 62%;
  }
}


/* Integración aislada con la fila de WPBakery. */
.mh-intro-row,
.mh-intro-row > .wpb_column,
.mh-intro-row .vc_column_container,
.mh-intro-row .vc_column-inner,
.mh-intro-row .wpb_wrapper {
  overflow: visible !important;
}

.mh-intro-row {
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.mh-intro-row > .wpb_column,
.mh-intro-row .vc_column_container,
.mh-intro-row .vc_column-inner,
.mh-intro-row .wpb_wrapper {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.mh-intro-row .wpb_text_column {
  margin-bottom: 0 !important;
}

@media (prefers-reduced-motion: no-preference) {
  .mh-intro-row .mh-colibri-intro .intro-scene {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100svh !important;
  }

  .mh-intro-row .mh-colibri-intro .intro-scene.is-pinned {
    position: fixed !important;
  }

  .mh-intro-row .mh-colibri-intro .intro-scene.is-released {
    top: auto !important;
    bottom: 0 !important;
  }
}