:root {
  --purple: #7b2cbf; /* Electric Purple */
  --coral: #ff5d73; /* Coral */
  --sky: #38bdf8; /* Sky */
  --sun: #fcd34d; /* Sunflower */
  --ink: #111827; /* Charcoal */
  --soft: #f8fafc; /* Soft */
}
html,
body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color: var(--ink);
  background: #fff;
}
h1,
h2,
h3,
h4,
h5 {
  font-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}
.fw-extrabold {
  font-weight: 800;
}
.nav-link.active {
  color: var(--purple) !important;
  font-weight: 600;
}
.nav-link:hover {
  color: var(--purple);
}

.hero-balida {
  background: radial-gradient(
      1100px 550px at 10% 10%,
      rgba(255, 255, 255, 0.12),
      rgba(255, 255, 255, 0)
    ),
    linear-gradient(135deg, var(--purple), var(--coral));
}
.shadow-neo {
  box-shadow: 0 12px 32px rgba(17, 24, 39, 0.18);
}

.bg-soft {
  background: var(--soft);
}

.card {
  border-radius: 1rem;
}
.card .bi {
  vertical-align: -2px;
}

.text-purple {
  color: var(--purple) !important;
}
.text-sky {
  color: var(--sky) !important;
}

.btn-sky {
  --bs-btn-bg: var(--sky);
  --bs-btn-border-color: var(--sky);
  --bs-btn-hover-bg: #16a9ea;
  --bs-btn-hover-border-color: #16a9ea;
  color: #06202a;
  font-weight: 600;
}

.price-card.highlight {
  outline: 3px solid var(--coral);
}
.price-card .display-6 {
  color: var(--purple);
}

.step-badge-square {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 0.8rem;
  background: var(--purple);
  color: #fff;
  font-weight: 700;
}

.glass {
  background: rgba(255, 255, 255, 0.74);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(123, 44, 191, 0.14);
}

.section-cta {
  background: radial-gradient(
      800px 400px at 80% 10%,
      rgba(252, 211, 77, 0.22),
      rgba(252, 211, 77, 0)
    ),
    linear-gradient(135deg, #ffffff, #f4f7ff);
  border-top: 1px solid rgba(0, 0, 0, 0.04);
}

.hp-field {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
a {
  text-underline-offset: 2px;
}
.breadcrumb a {
  text-decoration: none;
}