/* Integrar con las variables de marca del sitio. El body no debe tener margen. */
.mf-hero {
  --hero-bg: #121419;
  --hero-fg: #ffffff;
  --hero-cta-bg: #f5be02;
  --hero-cta-fg: #ffffff;
  --hero-shade: transparent;
  --hero-height: 78svh;
  width: 100%;
  color: var(--hero-fg);
  background: var(--hero-bg);
}
.mf-hero *, .mf-hero *::before, .mf-hero *::after { box-sizing: border-box; }
.mf-hero__scene {
  position: relative;
  isolation: isolate;
  min-height: var(--hero-height);
  display: flex;
  align-items: center;
  background-position: center;
  background-size: cover;
}
.mf-hero__scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--hero-shade);
  pointer-events: none;
}
.mf-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  visibility: hidden;
}
.mf-hero__content {
  width: min(100%, 76rem);
  margin-inline: auto;
  padding: clamp(1.5rem, 5vw, 4rem);
}
.mf-hero h1 { max-width: 18ch; font-size: clamp(2rem, 4.5vw, 4.8rem); line-height: 1.08; margin: 0 0 1.2rem; }
.mf-hero__story { max-width: 48ch; font-size: clamp(1rem, 1.6vw, 1.5rem); line-height: 1.4; }
.mf-hero__story p { margin: 0 0 .55em; }
.mf-hero__cta {
  display: inline-block;
  margin-top: 1.2rem;
  padding: .85rem 1.2rem;
  color: var(--hero-cta-fg);
  background: var(--hero-cta-bg);
  border-radius: .4rem;
  text-decoration: none;
  font-weight: 700;
}
.mf-hero__cta:hover { text-decoration: underline; }
.mf-hero__cta:active { transform: translateY(1px); }
.mf-hero__cta:focus-visible { outline: 3px solid var(--hero-fg); outline-offset: 5px; }
.mf-hero.is-scrubbing { min-height: 320svh; }
.mf-hero.is-scrubbing .mf-hero__scene { position: sticky; top: 0; }
.mf-hero.is-scrubbing .mf-hero__video { visibility: visible; }
.mf-hero.is-scrubbing [data-from] { will-change: opacity, transform; }
@media (max-width: 899px) { .mf-hero.is-scrubbing { min-height: 400svh; } }
@media (prefers-reduced-motion: reduce) {
  .mf-hero.is-scrubbing { min-height: 0; }
  .mf-hero.is-scrubbing .mf-hero__scene { position: relative; }
  .mf-hero.is-scrubbing [data-from] { opacity: 1 !important; transform: none !important; }
  .mf-hero.is-scrubbing .mf-hero__video { visibility: hidden; }
}

/* El contraste queda localizado detrás del contenido: ver estilo.css.
   No hay velo oscuro global sobre el video. */

/* Que no se pueda descargar el video con el clic derecho ni manteniendo apretado:
   el video no recibe toques (pasan a la escena) y el celular no ofrece su menú. */
.mf-hero__video{ pointer-events: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.mf-hero__scene{ -webkit-touch-callout: none; }