/* Money Magic — camada de identidade da nova plataforma.
   Mantém o DOM, a ordem e as imagens do funil original. A camada apenas
   traduz a identidade do desafio para verde + dourado + amarelo e aplica
   acabamentos responsivos da stack atual. */
:root {
  --mm-green-deep: #0d3b2a;
  --mm-green: #087a4b;
  --mm-green-bright: #20a866;
  --mm-green-soft: #e9f6ee;
  --mm-gold-deep: #9f7100;
  --mm-gold: #c39b02;
  --mm-gold-light: #e4bd38;
  --mm-yellow: #f3d766;
  --mm-cream: #fbfbed;
  --mm-ink: #183127;
}

html { scroll-behavior: smooth; }
body { color: var(--mm-ink); }

/* Ações principais: verde Money Magic. */
.btn,
.form-btn,
#block-1754475905505 .btn,
#block-1754476965649_0 .btn,
#block-1706729452851 .btn {
  border-color: var(--mm-green) !important;
  background-color: var(--mm-green) !important;
  background-image: linear-gradient(135deg, var(--mm-green), var(--mm-green-bright)) !important;
  color: #fff !important;
  box-shadow: 0 12px 30px rgba(8, 122, 75, .22);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn:hover,
.form-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(8, 122, 75, .28);
  filter: saturate(1.05);
}
.btn-outline,
#block-1754475905505 .btn-outline,
#block-1754476965649_0 .btn-outline,
#block-1706729452851 .btn-outline {
  color: var(--mm-green) !important;
  background: transparent !important;
}

/* A oferta e o último portal continuam dourados, como no funil original. */
#block-1754312333690_1 .btn,
#block-1709894021476_0 .btn,
#block-1583530576858 .form-btn {
  border-color: var(--mm-gold) !important;
  background-color: var(--mm-gold) !important;
  background-image: linear-gradient(135deg, var(--mm-gold-deep), var(--mm-gold-light)) !important;
  box-shadow: 0 12px 30px rgba(195, 155, 2, .24);
}
#block-1754312333690_1 .btn-outline,
#block-1709894021476_0 .btn-outline,
#block-1583530576858 .btn-outline {
  color: var(--mm-gold-deep) !important;
}

/* Converte os destaques roxos do template Kajabi para a identidade verde. */
[style*="background-color: #622066"],
[style*="background-color:#622066"],
[style*="background-color: rgb(98, 32, 102)"],
[style*="background-color:rgb(98, 32, 102)"] {
  background-color: var(--mm-green) !important;
}
[style*="color: #622066"],
[style*="color:#622066"],
[style*="color: rgb(98, 32, 102)"],
[style*="color:rgb(98, 32, 102)"] {
  color: var(--mm-green) !important;
}

#section-1697736502111 .section,
#section-1709894021476 .section {
  background-color: var(--mm-green-deep) !important;
}
#block-1709551869359 .block,
#block-1754307634109 .block,
#block-1754307729053 .block,
#block-1754311312202_1 .block,
#block-1754310644280_1 .block,
#block-1757274359467_1 .block,
#block-1757274359467_2 .block,
#block-1757274359467_3 .block,
#block-1757274359467_4 .block,
#block-1757274359467_5 .block,
#block-1757274359467_6 .block,
#block-1754312333690_1 .block {
  background-color: var(--mm-green-deep) !important;
}

/* Dourado e amarelo preservados e harmonizados. */
#section-1754476965649 .section,
#section-1709893853074 .section,
#section-1697735580690 .section {
  background-color: var(--mm-gold-deep) !important;
}
#block-1709894021476_0 .pricing__content ul li::before,
#block-1709894021476_0 .pricing__name {
  color: var(--mm-gold-light) !important;
}

/* Acabamento da nova stack, sem alterar sequência ou conteúdo. */
.image__image {
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(13, 59, 42, .14);
}
.pricing {
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(228, 189, 56, .45);
  box-shadow: 0 20px 52px rgba(13, 59, 42, .2);
}
.pricing__price { color: var(--mm-green-deep) !important; }

.mm-campaign-bar {
  position: relative;
  z-index: 5;
  background: linear-gradient(90deg, var(--mm-green-deep), var(--mm-green));
  color: #fff;
  padding: 10px 18px;
  text-align: center;
  font: 600 13px/1.45 Montserrat, sans-serif;
  letter-spacing: .02em;
}
.mm-campaign-bar strong { color: var(--mm-yellow); }
.mm-campaign-bar[hidden] { display: none !important; }

@media (max-width: 767px) {
  .image__image,
  .pricing { border-radius: 14px; }
  .mm-campaign-bar { padding: 9px 14px; font-size: 12px; }
  .btn { min-height: 48px; white-space: normal; }
}
