/* MIX_HERO_HARD_RESET_V1_START */

/*
  Reset final do HERO.
  Este arquivo precisa carregar por último.
  Objetivo: parar conflito entre CSS antigo de .hero, mobile patches e novo hero com imagem.
*/

@media (min-width: 861px) {
  body .mix-hero-image-v1 {
    position: relative !important;
    min-height: auto !important;
    height: auto !important;
    padding: 74px 0 86px !important;
    overflow: visible !important;
  }

  body .mix-hero-image-v1 .mix-hero-image-shell {
    width: min(100% - 72px, 1180px) !important;
    margin: 0 auto !important;

    display: grid !important;
    grid-template-columns: minmax(0, 520px) minmax(360px, 480px) !important;
    gap: 76px !important;

    align-items: center !important;
    justify-content: space-between !important;
  }

  body .mix-hero-image-v1 .mix-hero-image-copy {
    width: 100% !important;
    max-width: 520px !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
  }

  body .mix-hero-image-v1 .mix-hero-image-eyebrow {
    max-width: 460px !important;
    margin: 0 0 20px !important;
    font-size: 0.78rem !important;
    line-height: 1.35 !important;
    letter-spacing: 0.15em !important;
  }

  body .mix-hero-image-v1 .mix-hero-image-copy h1 {
    width: 100% !important;
    max-width: 520px !important;
    margin: 0 0 22px !important;

    font-size: clamp(3.4rem, 5.1vw, 5.3rem) !important;
    line-height: 0.96 !important;
    letter-spacing: -0.065em !important;

    overflow: visible !important;
    word-break: normal !important;
    text-wrap: balance !important;
  }

  body .mix-hero-image-v1 .mix-hero-image-text {
    max-width: 520px !important;
    margin: 0 !important;
    font-size: 1.04rem !important;
    line-height: 1.68 !important;
  }

  body .mix-hero-image-v1 .mix-hero-image-value {
    max-width: 520px !important;
    margin: 20px 0 0 !important;
    font-size: 0.98rem !important;
    line-height: 1.55 !important;
  }

  body .mix-hero-image-v1 .mix-hero-image-actions {
    margin: 24px 0 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    justify-content: flex-start !important;
  }

  body .mix-hero-image-v1 .mix-hero-image-btn {
    min-height: 54px !important;
    padding: 0 22px !important;
    font-size: 0.96rem !important;
  }

  body .mix-hero-image-v1 .mix-hero-image-trust {
    margin: 24px 0 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 9px !important;
    justify-content: flex-start !important;
  }

  body .mix-hero-image-v1 .mix-hero-image-trust span {
    min-height: 38px !important;
    padding: 0 13px !important;
    font-size: 0.84rem !important;
  }

  body .mix-hero-image-v1 .mix-hero-image-visual {
    width: 100% !important;
    max-width: 480px !important;
    min-width: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
    overflow: visible !important;
  }

  body .mix-hero-image-v1 .mix-hero-image-frame {
    width: min(100%, 460px) !important;
    max-width: 460px !important;
    margin: 0 !important;
    padding: 8px !important;
    border-radius: 30px !important;
    overflow: hidden !important;
    transform: none !important;
  }

  body .mix-hero-image-v1 .mix-hero-image-frame img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    border-radius: 20px !important;
    object-fit: contain !important;
    transform: none !important;
  }
}

/* Tablet / mobile */
@media (max-width: 860px) {
  body .mix-hero-image-v1 {
    min-height: auto !important;
    height: auto !important;
    padding: 42px 0 64px !important;
    overflow: hidden !important;
  }

  body .mix-hero-image-v1 .mix-hero-image-shell {
    width: min(100% - 36px, 430px) !important;
    margin: 0 auto !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 30px !important;

    align-items: stretch !important;
    justify-content: flex-start !important;
  }

  body .mix-hero-image-v1 .mix-hero-image-copy {
    max-width: 100% !important;
    text-align: left !important;
  }

  body .mix-hero-image-v1 .mix-hero-image-copy h1 {
    max-width: 100% !important;
    font-size: clamp(2.55rem, 11.8vw, 3.65rem) !important;
    line-height: 1 !important;
    letter-spacing: -0.06em !important;
    margin-bottom: 20px !important;
  }

  body .mix-hero-image-v1 .mix-hero-image-text {
    max-width: 100% !important;
    font-size: 1rem !important;
    line-height: 1.66 !important;
  }

  body .mix-hero-image-v1 .mix-hero-image-value {
    max-width: 100% !important;
    font-size: 0.98rem !important;
    line-height: 1.52 !important;
    margin-top: 18px !important;
  }

  body .mix-hero-image-v1 .mix-hero-image-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 11px !important;
    margin-top: 22px !important;
  }

  body .mix-hero-image-v1 .mix-hero-image-btn {
    width: 100% !important;
    min-height: 52px !important;
  }

  body .mix-hero-image-v1 .mix-hero-image-trust {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    margin-top: 18px !important;
  }

  body .mix-hero-image-v1 .mix-hero-image-visual {
    width: 100% !important;
    max-width: 380px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    transform: none !important;
  }

  body .mix-hero-image-v1 .mix-hero-image-frame {
    width: 100% !important;
    max-width: 380px !important;
    padding: 8px !important;
    border-radius: 26px !important;
    margin: 0 auto !important;
  }

  body .mix-hero-image-v1 .mix-hero-image-frame img {
    width: 100% !important;
    height: auto !important;
    border-radius: 18px !important;
  }
}

@media (max-width: 430px) {
  body .mix-hero-image-v1 .mix-hero-image-shell {
    width: min(100% - 32px, 100%) !important;
  }

  body .mix-hero-image-v1 .mix-hero-image-frame {
    max-width: 350px !important;
  }
}

/* MIX_HERO_HARD_RESET_V1_END */