/* Banner do topo em formato de anuncio/produto */
html body #home .hm_clique {
  min-height: 500px !important;
  height: auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 23% 50%, rgba(255, 255, 255, .95) 0 19%, rgba(255, 212, 0, .14) 19.5% 20.6%, transparent 21%),
    linear-gradient(100deg, #ffffff 0%, #f7f9fc 52%, #ffffff 100%) !important;
  border-bottom: 1px solid #dfe4ea !important;
}

html body #home .hm_clique::before,
html body #home .hm_clique::after,
html body #home .hm_clique .centro::before,
html body #home .hm_clique .centro::after {
  display: none !important;
}

html body #home .hm_clique .mc-hero-bg {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
  opacity: 1 !important;
  background:
    radial-gradient(circle at 7% 45%, rgba(0, 135, 63, .11) 0 1px, transparent 2px),
    repeating-linear-gradient(165deg, transparent 0 12px, rgba(0, 135, 63, .035) 13px 14px, transparent 15px 34px) !important;
  background-size: 18px 18px, auto !important;
}

html body #home .hm_clique .mc-hero-bg.has-custom-bg {
  background: var(--mc-top-bg-image) center center / cover no-repeat !important;
}

html body #home .hm_clique .mc-hero-bg.has-custom-bg::before,
html body #home .hm_clique .mc-hero-bg.has-custom-bg::after {
  display: none !important;
}

html body #home .hm_clique .mc-hero-bg::before,
html body #home .hm_clique .mc-hero-bg::after {
  content: "" !important;
  position: absolute !important;
  pointer-events: none !important;
  display: block !important;
}

html body #home .hm_clique .mc-hero-bg::before {
  left: -120px !important;
  top: -80px !important;
  width: 420px !important;
  height: 620px !important;
  background:
    linear-gradient(135deg, #007f3b 0 54%, transparent 55%),
    linear-gradient(145deg, transparent 0 49%, #ffd400 50% 54%, transparent 55%) !important;
  border-radius: 0 0 220px 0 !important;
}

html body #home .hm_clique .mc-hero-bg::after {
  right: -110px !important;
  bottom: -110px !important;
  width: 420px !important;
  height: 340px !important;
  background:
    linear-gradient(315deg, #007f3b 0 48%, transparent 49%),
    linear-gradient(325deg, transparent 0 47%, #ffd400 48% 54%, transparent 55%) !important;
  border-radius: 220px 0 0 0 !important;
}

html body #home .hm_clique .mc-top-ad-bg-number {
  position: absolute !important;
  left: 19% !important;
  top: 51% !important;
  transform: translateY(-50%) !important;
  color: rgba(0, 135, 63, .08) !important;
  font-size: clamp(180px, 19vw, 310px) !important;
  line-height: .78 !important;
  font-weight: 950 !important;
}

html body #home .hm_clique .centro {
  width: min(1780px, calc(100% - 54px)) !important;
  max-width: none !important;
  min-height: 500px !important;
  height: 500px !important;
  display: grid !important;
  grid-template-columns: minmax(420px, 48%) minmax(520px, 52%) !important;
  grid-template-areas: "produto texto" !important;
  gap: 18px !important;
  align-items: center !important;
}

html body #home .hm_clique .centro .lado1,
html body #home .hm_clique .centro .lado2 {
  position: relative !important;
  inset: auto !important;
  z-index: 3 !important;
  width: auto !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
}

html body #home .hm_clique .centro .lado1 {
  grid-area: texto !important;
  justify-content: flex-start !important;
}

html body #home .hm_clique .centro .lado2 {
  grid-area: produto !important;
  justify-content: center !important;
  pointer-events: none !important;
}

html body #home .hm_clique .lado3 {
  display: none !important;
}

html body #home .hm_clique .mc-top-ad-product {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html body #home .hm_clique .mc-top-ad-product img {
  width: auto !important;
  max-width: min(620px, 112%) !important;
  height: min(460px, 94%) !important;
  max-height: 460px !important;
  object-fit: contain !important;
  transform: none !important;
  filter: drop-shadow(0 28px 32px rgba(0, 0, 0, .20)) !important;
}

html body #home .hm_clique .centro .lado2 .mc-top-ad-product img.img {
  width: auto !important;
  max-width: min(620px, 112%) !important;
  height: min(460px, 94%) !important;
  max-height: 460px !important;
  object-fit: contain !important;
  transform: none !important;
  filter: drop-shadow(0 28px 32px rgba(0, 0, 0, .20)) !important;
}

html body #home .hm_clique .detalhes {
  width: min(760px, 100%) !important;
  max-width: 760px !important;
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif !important;
}

html body #home .hm_clique .mc-hero-badge {
  height: 34px !important;
  margin: 0 0 13px !important;
  padding: 0 16px !important;
  border: 1px solid rgba(0, 135, 63, .28) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .74) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.06) !important;
  color: #11244d !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

html body #home .hm_clique .mc-hero-badge i {
  color: #ff8a00 !important;
}

html body #home .hm_clique .detalhes h1 {
  color: #071947 !important;
  font-size: clamp(46px, 5.2vw, 84px) !important;
  line-height: .88 !important;
  font-weight: 950 !important;
  max-width: 820px !important;
  text-transform: uppercase !important;
}

html body #home .hm_clique .mc-hero-desc {
  margin-top: 16px !important;
}

html body #home .hm_clique .mc-hero-desc p:first-child {
  color: #00873f !important;
  font-size: clamp(42px, 6.2vw, 82px) !important;
  line-height: .82 !important;
  font-weight: 950 !important;
}

html body #home .hm_clique .centro .lado1 .detalhes .mc-hero-desc p:first-child {
  color: #00873f !important;
  font-size: clamp(42px, 6.2vw, 82px) !important;
  line-height: .82 !important;
  font-weight: 950 !important;
}

html body #home .hm_clique .mc-hero-desc p:first-child::before {
  content: "POR APENAS" !important;
  display: block !important;
  margin: 0 0 4px !important;
  color: #00873f !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

html body #home .hm_clique .mc-hero-desc p:not(:first-child) {
  max-width: 560px !important;
  color: #666d79 !important;
  font-size: clamp(16px, 1.5vw, 21px) !important;
  line-height: 1.28 !important;
  font-weight: 600 !important;
}

html body #home .hm_clique .botao-ouca-agora {
  min-width: 310px !important;
  height: 58px !important;
  margin-top: 16px !important;
  justify-content: space-between !important;
  padding: 0 28px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #00873f 0%, #ffd400 100%) !important;
  box-shadow: 0 16px 26px rgba(0, 135, 63, .20) !important;
  color: #071947 !important;
  font-size: 18px !important;
  font-weight: 950 !important;
}

html body #home .hm_clique .centro .lado1 .detalhes .botao-ouca-agora {
  min-width: 310px !important;
  width: auto !important;
  height: 58px !important;
  margin-top: 16px !important;
  justify-content: space-between !important;
  padding: 0 28px !important;
  background: linear-gradient(90deg, #00873f 0%, #ffd400 100%) !important;
  color: #071947 !important;
  font-size: 18px !important;
  font-weight: 950 !important;
}

html body #home .hm_clique .mc-top-ad-benefits {
  width: min(900px, 100%) !important;
  min-height: 58px !important;
  margin-top: 18px !important;
  padding: 10px 18px !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.88) !important;
  box-shadow: 0 12px 30px rgba(17,24,39,.08) !important;
}

html body #home .hm_clique .mc-top-ad-benefits span {
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  column-gap: 8px !important;
  align-items: center !important;
}

html body #home .hm_clique .mc-top-ad-benefits i {
  grid-row: 1 / 3 !important;
  color: #00873f !important;
  font-size: 25px !important;
}

html body #home .hm_clique .mc-top-ad-benefits strong {
  color: #071947 !important;
  font-size: 13px !important;
  line-height: 1.1 !important;
  font-weight: 950 !important;
}

html body #home .hm_clique .mc-top-ad-benefits small {
  color: #59606b !important;
  font-size: 12px !important;
  line-height: 1.1 !important;
  font-weight: 650 !important;
}

@media only screen and (max-width: 900px) {
  html body #home .hm_clique {
    min-height: 620px !important;
  }

  html body #home .hm_clique .centro {
    width: min(100% - 30px, 620px) !important;
    min-height: 620px !important;
    height: auto !important;
    grid-template-columns: 1fr !important;
    grid-template-areas: "produto" "texto" !important;
    padding: 24px 0 30px !important;
    text-align: center !important;
  }

  html body #home .hm_clique .centro .lado1,
  html body #home .hm_clique .centro .lado2 {
    width: 100% !important;
    height: auto !important;
    justify-content: center !important;
  }

  html body #home .hm_clique .mc-top-ad-product img {
    height: min(310px, 54vw) !important;
    max-height: 310px !important;
  }

  html body #home .hm_clique .detalhes h1 {
    font-size: clamp(34px, 10vw, 52px) !important;
  }

  html body #home .hm_clique .mc-hero-desc p:first-child {
    font-size: clamp(38px, 14vw, 58px) !important;
  }

  html body #home .hm_clique .botao-ouca-agora {
    width: min(330px, 100%) !important;
    min-width: 0 !important;
  }

  html body #home .hm_clique .mc-top-ad-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    border-radius: 22px !important;
  }
}