/* M4RTIAL V118 · Emblema fotográfico exclusivo de la portada móvil */

@media (max-width: 700px) {
  .hero-image {
    inset: 0;
    clip-path: none;
  }

  .hero-image picture {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    -webkit-mask-image: radial-gradient(ellipse 76% 57% at 50% 40%, #000 28%, rgba(0, 0, 0, .72) 62%, transparent 100%);
    mask-image: radial-gradient(ellipse 76% 57% at 50% 40%, #000 28%, rgba(0, 0, 0, .72) 62%, transparent 100%);
  }

  .hero-image img {
    position: absolute;
    top: 40%;
    left: 50%;
    width: min(146vw, 620px);
    height: auto;
    max-width: none;
    object-fit: contain;
    object-position: center;
    opacity: .34;
    filter: saturate(.72) contrast(1.12) brightness(.82);
    mix-blend-mode: screen;
    transform: translate(-50%, calc(-50% + var(--hero-shift))) scale(1.02);
  }

  .hero-image::after {
    background:
      radial-gradient(ellipse 64% 48% at 50% 40%, rgba(10, 10, 9, .02) 0%, rgba(10, 10, 9, .22) 62%, rgba(10, 10, 9, .78) 100%),
      linear-gradient(180deg, rgba(10, 10, 9, .5) 0%, rgba(10, 10, 9, .06) 31%, rgba(10, 10, 9, .18) 62%, rgba(10, 10, 9, .86) 100%);
  }

  .hero-title {
    position: relative;
    z-index: 1;
    text-shadow: 0 2px 20px rgba(0, 0, 0, .22);
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 700px) {
  .hero-image img {
    transform: translate(-50%, -50%) scale(1.02) !important;
  }
}