@media(max-width:618px) {
  .hero:where(:not(.hero-v1)) {
    --hero-rendered-width: 618.26px;
    --hero-left-limit: -123.65px;
    --mobile-loss: max(0px, calc(700px - 100vw));
    --mobile-limit: calc(var(--hero-rendered-width) * .2);
    /* Conclui o recorte direito em 550px; depois avança só à esquerda. */
    --mobile-extra-left: clamp(0px, calc(550px - 100vw), var(--mobile-limit));
    --mobile-left: calc(min(var(--mobile-loss), var(--mobile-limit)) + var(--mobile-extra-left));
    --mobile-right: clamp(0px, calc((var(--mobile-loss) - var(--mobile-limit)) * 4.693031729164), var(--mobile-limit));
    --mobile-image-end: calc(var(--hero-rendered-width) - var(--mobile-left) - var(--mobile-right))
  }

  :where(.hero:not(.hero-v1)) .hero-picture .hero-image {
    left: calc(0px - var(--mobile-left));
    clip-path: inset(0 var(--mobile-right) 0 0)
  }

  .hero:where(:not(.hero-v1)) > .hero-veil {
    --nuvem-borda: var(--mobile-image-end)
  }
}

@media(max-width:398.98px) {
  .hero:where(:not(.hero-v1)) .hero-note {
    max-width: 190px;
    margin-left: auto
  }

  .hero:where(:not(.hero-v1)) .hero-note .little-line {
    flex-shrink: 0
  }
}

@media(max-width:500px) {
  .hero:where(:not(.hero-v1)) h1 em {
    text-shadow:
      0 0 8px #fcfcf7,
      0 0 16px #fcfcf7,
      0 0 28px rgba(252, 252, 247, .95),
      0 0 42px rgba(252, 252, 247, .85)
  }
}

/* Mantém a proporção do véu de 567px e cobre o fundo após a foto. */
@media(max-width:567px) {
  .hero:where(:not(.hero-v1)) > .hero-veil {
    background: linear-gradient(90deg,
      rgba(249, 249, 242, 0) calc(var(--mobile-image-end) * 0.667212098196),
      rgba(255, 255, 255, .55) calc(var(--mobile-image-end) * 0.811420188978),
      rgba(251, 251, 246, .92) calc(var(--mobile-image-end) * 0.942316763687),
      rgba(252, 252, 247, 1) var(--mobile-image-end),
      rgba(252, 252, 247, 1) 100%)
  }
}

@media(max-width:370px) {
  .hero:where(:not(.hero-v1)) h1 {
    font-size: 43px
  }

  :where(.hero:not(.hero-v1)) .hero-content {
    padding-top: 47px
  }

  :where(.hero:not(.hero-v1)) .hero-description {
    font-size: 13px
  }

  .hero:where(:not(.hero-v1)) .button {
    padding: 14px 18px;
    font-size: 12px
  }
}

/* Imagem mobile em sua proporção natural, sem máscara ou ampliação. */
@media(max-width:618px) {
  :where(.hero:not(.hero-v1)) .hero-picture .hero-image {
    left: max(-123.65px, calc(100% - 618.2767624px));
    width: auto !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: left center !important;
    clip-path: none;
    filter: none;
  }
}
/* Legibilidade do texto sobre a imagem de celular. */
@media(max-width:618px) {
  .hero:where(:not(.hero-v1)) > .hero-veil { display: none; }
  .hero:where(:not(.hero-v1)) > .hero-content::before { content: none; }
  .hero:where(:not(.hero-v1)) {
    --text-halo: 0 0 8px #fcfcf7, 0 0 16px #fcfcf7,
      0 0 28px rgba(252,252,247,.95), 0 0 42px rgba(252,252,247,.85);
  }
  .hero:where(:not(.hero-v1)) .hero-content,
  .hero:where(:not(.hero-v1)) .hero-content * {
    text-shadow: var(--text-halo);
  }
  .hero:where(:not(.hero-v1)) .hero-content .button,
  .hero:where(:not(.hero-v1)) .hero-content .button * {
    text-shadow: 0 1px 2px rgba(20,35,15,.75);
  }
}