:root {
  --background: 36 28% 97%;
  --foreground: 230 28% 11%;
  --card: 36 32% 98%;
  --card-foreground: 230 28% 11%;
  --popover: 36 32% 98%;
  --popover-foreground: 230 28% 11%;
  --primary: 345 42% 26%;
  --primary-foreground: 36 30% 97%;
  --secondary: 30 14% 92%;
  --secondary-foreground: 230 28% 11%;
  --muted: 36 14% 90%;
  --muted-foreground: 230 10% 38%;
  --accent: 40 72% 50%;
  --accent-foreground: 230 28% 11%;
  --cream: 36 33% 97%;
  --ink: 230 30% 10%;
  --sage: 30 12% 48%;
  --forest: 345 42% 26%;
  --terracotta: 12 70% 52%;
  --ochre: 40 72% 50%;
  --destructive: 0 70% 45%;
  --destructive-foreground: 36 30% 97%;
  --border: 36 14% 86%;
  --input: 36 14% 86%;
  --ring: 345 42% 26%;
}

.grain::before {
  opacity: 0.028;
}

.underline-wavy {
  text-decoration-color: hsl(var(--ochre) / 0.55);
  text-underline-offset: 0.12em;
  padding-bottom: 0.35em;
}

#root .min-h-screen > section.relative.overflow-hidden p.max-w-xl {
  margin-top: 2.75rem;
}

@media (min-width: 768px) {
  #root .min-h-screen > section.relative.overflow-hidden p.max-w-xl {
    margin-top: 3.5rem;
  }
}

.bg-forest {
  background-color: hsl(var(--forest));
}

.text-terracotta,
.text-terracotta\/65 {
  color: hsl(var(--terracotta));
}

.text-ochre {
  color: hsl(var(--ochre));
}

.bg-terracotta {
  background-color: hsl(var(--terracotta));
}

.hover\:bg-terracotta:hover {
  background-color: hsl(var(--terracotta));
}

.border-terracotta {
  border-color: hsl(var(--terracotta));
}

.bg-cream {
  background-color: hsl(var(--cream));
}

.text-ink {
  color: hsl(var(--ink));
}

.bg-ink {
  background-color: hsl(var(--ink));
}

.bg-sage\/20 {
  background-color: hsl(var(--sage) / 0.14);
}

.bg-secondary {
  background-color: hsl(var(--secondary));
}

#downsell-modal .ds-head {
  background: linear-gradient(135deg, hsl(345 42% 26%), hsl(345 36% 32%));
}

#downsell-modal .ds-cta {
  background: hsl(var(--terracotta));
}

#downsell-modal .ds-cta:hover {
  background: hsl(12 70% 46%);
}

#downsell-modal .ds-price .new {
  color: hsl(var(--forest));
}

#landing-bonus-bar {
  background: linear-gradient(90deg, hsl(230 30% 12%), hsl(345 38% 28%));
}

#ofertas .offer-social-proof {
  background: hsl(var(--forest) / 0.07);
  border-color: hsl(var(--forest) / 0.16);
  color: hsl(var(--forest));
}

#ofertas .offer-card--premium {
  border-color: hsl(var(--forest));
  outline-color: hsl(var(--ochre) / 0.55);
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 16px 32px -8px hsl(var(--forest) / 0.28);
}

#offer-sticky-bar .offer-sticky-btn {
  background: hsl(var(--terracotta));
  box-shadow: 0 4px 14px hsl(var(--terracotta) / 0.35);
}
