/* Bonsai theme overrides — loaded after site.css */
:root {
  --bo-forest-deep: #10261a;
  --bo-forest: #1c4029;
  --bo-leaf: #3f8f45;
  --bo-leaf-bright: #58c26a;
  --bo-moss: #86c232;
  --bo-clay: #c3652f;
  --bo-amber: #f2a52b;
  --bo-amber-hot: #ff7a18;
  --bo-cream: #f7f3e8;

  --color-brand-dark: #10261a;
  --color-brand-navy: #1c4029;
  --color-brand-red: #16321f;
  --color-brand-teal: #3f8f45;
  --color-brand-teal-dark: #2c6b33;
  --color-brand-teal-light: #dceec9;
  --color-brand-green: #2fa84f;
  --color-brand-gold: #f2a52b;
  --color-brand-gold-dark: #c07c14;
}

html {
  background:
    radial-gradient(1200px 600px at 50% -10%, #eaf3dc 0%, transparent 60%),
    linear-gradient(180deg, #f7f3e8 0%, #eef3e2 40%, #dfe9d0 100%);
  background-attachment: fixed;
}

body {
  background: transparent;
}

/* Panels: warm rice-paper cards */
.bg-white {
  background-color: color-mix(in srgb, var(--bo-cream) 94%, transparent) !important;
}

.min-h-screen.bg-white {
  background-color: transparent !important;
}

.border-gray-100 {
  border-color: color-mix(in srgb, var(--bo-forest) 18%, transparent) !important;
}

/* Dark forest bands */
.bg-brand-red,
.bg-brand-navy,
.bg-brand-dark {
  background-image:
    radial-gradient(900px 380px at 15% 0%, rgba(134, 194, 50, 0.22), transparent 65%),
    linear-gradient(160deg, rgba(88, 194, 106, 0.14), transparent 60%);
}

/* ---------- CTAs: high contrast amber/clay ---------- */
.bg-green-600 {
  background-color: var(--bo-amber-hot) !important;
  background-image: linear-gradient(135deg, #ffc233 0%, var(--bo-amber) 42%, var(--bo-amber-hot) 100%) !important;
  color: #23150a !important;
  font-weight: 900;
  letter-spacing: 0.01em;
  box-shadow:
    0 14px 34px -10px rgba(255, 122, 24, 0.85),
    0 0 0 3px rgba(255, 255, 255, 0.4) inset !important;
  text-shadow: none;
  animation: bo-cta-pulse 2.4s ease-in-out infinite;
}

.bg-green-600:hover {
  background-image: linear-gradient(135deg, #ffd15c 0%, #ffab2e 42%, #ff8a24 100%) !important;
  box-shadow: 0 18px 42px -10px rgba(255, 122, 24, 0.95) !important;
  animation: none;
}

@keyframes bo-cta-pulse {
  0%, 100% { transform: translateZ(0) scale(1); }
  50% { transform: translateZ(0) scale(1.018); }
}

@media (prefers-reduced-motion: reduce) {
  .bg-green-600 { animation: none; }
}

.text-green-600 {
  color: #1f7a3a !important;
}

.bg-red-600 {
  background-color: var(--bo-clay) !important;
}

/* ---------- Highlights: benefits, bonuses, badges ---------- */
.bg-brand-gold {
  background-color: var(--bo-amber) !important;
  color: #23150a !important;
}

.text-brand-gold {
  color: #ffc94d !important;
}

.bg-white .text-brand-gold {
  color: #b8760d !important;
}

.text-brand-green {
  color: #1f8f44 !important;
}

.bg-brand-red .text-brand-green,
.bg-brand-navy .text-brand-green,
.bg-brand-dark .text-brand-green {
  color: #7ee08d !important;
}

.text-brand-teal,
.text-brand-teal-dark {
  color: #2c7a3a !important;
}

.bg-brand-teal-light\/40 {
  background-color: color-mix(in srgb, #dceec9 60%, transparent) !important;
}

.border-brand-gold,
.border-brand-gold\/40 {
  border-color: var(--bo-amber) !important;
}

/* Emoji icons before benefit/plan items — vivid chips */
.aq-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.9rem;
  font-size: 1.2rem;
  line-height: 1;
  background: linear-gradient(140deg, #f9e7b8 0%, #d8ecc0 100%);
  box-shadow: 0 6px 16px -8px rgba(16, 38, 26, 0.55), 0 0 0 1px rgba(242, 165, 43, 0.5) inset;
}

.bg-brand-red .aq-ico,
.bg-brand-navy .aq-ico,
.bg-brand-dark .aq-ico {
  background: linear-gradient(140deg, rgba(242, 165, 43, 0.28) 0%, rgba(88, 194, 106, 0.28) 100%);
  box-shadow: 0 0 0 1px rgba(255, 201, 77, 0.55) inset;
}

/* Cards holding product/bonus images */
.bg-white.rounded-2xl {
  border: 1px solid rgba(242, 165, 43, 0.35);
  box-shadow: 0 18px 40px -26px rgba(16, 38, 26, 0.55);
}

img[src*="bonus-bonsai"],
img[src*="plano-"],
img[src*="mockup-bonsai"],
img[src*="tablet-bonsai"],
img[src*="material-impresso"] {
  filter: drop-shadow(0 18px 24px rgba(16, 38, 26, 0.28));
}

/* ---------- Animated bonsai background ---------- */
.bonsai-bg {
  position: fixed;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.55;
}

.bonsai-bg__mist {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(600px 320px at 20% 20%, rgba(134, 194, 50, 0.18), transparent 70%),
    radial-gradient(700px 360px at 80% 70%, rgba(63, 143, 69, 0.16), transparent 70%);
  animation: bo-mist 26s ease-in-out infinite alternate;
}

@keyframes bo-mist {
  0% { transform: translate3d(-2%, -1%, 0) scale(1); }
  100% { transform: translate3d(2%, 2%, 0) scale(1.06); }
}

.bonsai-bg__branch {
  position: absolute;
  width: min(34vw, 24rem);
  opacity: 0.5;
  aspect-ratio: 320 / 220;
  color: #4f9a58;
  transform-origin: top center;
}

.bonsai-bg__branch--left {
  top: 2%;
  left: -4%;
  animation: bo-sway 12s ease-in-out infinite alternate;
}

.bonsai-bg__branch--right {
  bottom: 4%;
  right: -6%;
  transform-origin: bottom center;
  animation: bo-sway 15s ease-in-out infinite alternate-reverse;
}

@keyframes bo-sway {
  0% { transform: rotate(-1.2deg); }
  100% { transform: rotate(1.6deg); }
}

.bonsai-leaf {
  position: absolute;
  top: -8vh;
  color: #59ab5f;
  opacity: 0;
  animation-name: bo-fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform, opacity;
}

.bonsai-leaf__inner {
  display: block;
  width: 100%;
  height: 100%;
  animation: bo-spin 5s ease-in-out infinite alternate;
}

@keyframes bo-fall {
  0% { transform: translate3d(0, -10vh, 0); opacity: 0; }
  8% { opacity: 0.75; }
  25% { transform: translate3d(4vw, 25vh, 0); }
  50% { transform: translate3d(-3vw, 52vh, 0); }
  75% { transform: translate3d(5vw, 78vh, 0); }
  92% { opacity: 0.65; }
  100% { transform: translate3d(-2vw, 108vh, 0); opacity: 0; }
}

@keyframes bo-spin {
  0% { transform: rotate(-35deg) rotateY(0deg); }
  100% { transform: rotate(40deg) rotateY(180deg); }
}

@media (prefers-reduced-motion: reduce) {
  .bonsai-leaf, .bonsai-bg__branch, .bonsai-bg__mist { animation: none; }
  .bonsai-leaf { opacity: 0.5; }
}