body.variant-clara { background: var(--bg-lilas); }

body.variant-clara .hero { overflow: hidden; }

body.variant-clara .eyebrow {
  display: inline-block;
  justify-self: start;
  background: var(--roxo-tint);
  border-radius: var(--radius-pill);
  padding: 4px 14px;
}

body.variant-clara .cta-primary { border-radius: var(--radius-pill); }

body.variant-clara .cta-secondary {
  border-radius: var(--radius-pill);
  background: transparent;
}

body.variant-clara .hero-visual { position: relative; }

body.variant-clara .hero-visual::before {
  content: "";
  position: absolute;
  inset: -15% -20%;
  background: radial-gradient(circle, var(--roxo-glow), transparent 70%);
  filter: blur(32px);
  z-index: 0;
  pointer-events: none;
}

body.variant-clara .inbox-mock {
  position: relative;
  z-index: 1;
  background: #fff;
  box-shadow: var(--shadow-roxo);
}

body.variant-clara .inbox-mock__header { border-bottom: 1px solid rgba(27, 30, 52, 0.06); }
body.variant-clara .inbox-mock__title { color: var(--navy-900); }
body.variant-clara .inbox-mock__badge { background: var(--roxo); color: #fff; }
body.variant-clara .inbox-mock__avatar { background: var(--roxo-tint); color: var(--roxo); }
body.variant-clara .inbox-mock__name { color: var(--navy-900); }
body.variant-clara .inbox-mock__preview { color: var(--text-secondary); }
body.variant-clara .inbox-mock__time { color: var(--text-muted); }
body.variant-clara .inbox-mock__unread { background: var(--roxo); color: #fff; }

body.variant-clara .step,
body.variant-clara .value-card {
  background: #fff;
  border-radius: var(--radius-xl);
  box-shadow: 0 2px 8px rgba(27, 30, 52, 0.05);
}

body.variant-clara .price-card { background: #fff; border-radius: var(--radius-xl); }
body.variant-clara .price-card.is-featured { box-shadow: var(--shadow-roxo); }

body.variant-clara .section-intro { color: var(--text-secondary); }

body.variant-clara .testimonial-card {
  background: #fff;
  box-shadow: 0 2px 8px rgba(27, 30, 52, 0.05);
}

body.variant-clara .testimonial-card__avatar { background: var(--roxo-tint); color: var(--roxo); }
body.variant-clara .testimonial-card__quote { color: var(--navy-900); }
body.variant-clara .testimonial-card__name { color: var(--navy-900); }
body.variant-clara .testimonial-card__role { color: var(--text-secondary); }

@media (max-width: 900px) {
  body.variant-clara .eyebrow { justify-self: center; }
}