/* Kudilonga — branco quente com lilás, laranja e verde suaves, inspirado nas capulanas */
:root {
  --sans: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --wm-font: "Fraunces", Georgia, serif;
  --wm-ls: -0.03em;

  --bg: #fffdf8;
  --bg-2: #f7f1fc;
  --surface: #ffffff;
  --surface-2: #f8f3fd;
  --line: #e7ddf3;
  --grid: rgba(122, 88, 194, .07);
  --text: #2b2140;
  --muted: #6b6082;
  --accent: #7a58c2;
  --accent-hi: #6745b0;
  --accent-ink: #ffffff;
  --ok: #2c8a55;
  --warn: #b85c10;
  --bad: #c0392b;
  --lilac: #b79df0;
  --orange: #ec8a3f;
  --green: #5aa469;
  --header-bg: rgba(255, 253, 248, .92);
  --panel-shadow: 0 28px 60px -34px rgba(122, 88, 194, .45);
  --ring: rgba(122, 88, 194, .22);
  --rad-btn: 12px;
  --rad-in: 10px;
  --rad-panel: 20px;
}
body { font-size: 1.02rem; }
.wordmark { font-weight: 600; font-variation-settings: "opsz" 144; }
.wordmark i { font-weight: 400; }
.tagline, .section h2, .cta h2 { font-weight: 600; letter-spacing: -0.02em; }
.feat h3, .steps h3 { font-weight: 600; }

.hero::before {
  -webkit-mask-image: none; mask-image: none;
  background-image:
    radial-gradient(circle at 88% 8%, rgba(236, 138, 63, .20), transparent 38%),
    radial-gradient(circle at 8% 92%, rgba(90, 164, 105, .18), transparent 38%),
    radial-gradient(circle at 62% 30%, rgba(183, 157, 240, .28), transparent 46%);
  background-size: auto;
}

/* faixa em ziguezague, no espírito dos padrões de capulana */
.hero::after, .site-footer::before {
  content: ""; display: block; height: 14px; width: 100%;
  background:
    linear-gradient(135deg, var(--lilac) 25%, transparent 25%) -14px 0 / 28px 14px,
    linear-gradient(225deg, var(--lilac) 25%, transparent 25%) -14px 0 / 28px 14px,
    linear-gradient(315deg, var(--orange) 25%, transparent 25%) 0 0 / 28px 14px,
    linear-gradient(45deg, var(--orange) 25%, transparent 25%) 0 0 / 28px 14px;
  background-color: var(--green);
}
.hero::after { position: absolute; left: 0; right: 0; bottom: 0; }
.site-footer { padding-top: 0; }
.site-footer::before { margin-bottom: 1.5rem; }

.btn-primary { box-shadow: 0 6px 16px -8px rgba(122, 88, 194, .7); }
.seg button[aria-selected="true"], .seg button[aria-pressed="true"] { box-shadow: 0 3px 10px -4px rgba(122, 88, 194, .6); }

.feat > div:nth-child(4n+1) { border-top: 3px solid var(--lilac); }
.feat > div:nth-child(4n+2) { border-top: 3px solid var(--orange); }
.feat > div:nth-child(4n+3) { border-top: 3px solid var(--green); }
.feat > div:nth-child(4n+4) { border-top: 3px solid var(--lilac); }
.steps li:nth-child(1)::before { background: var(--lilac); width: 100%; }
.steps li:nth-child(2)::before { background: var(--orange); width: 100%; }
.steps li:nth-child(3)::before { background: var(--green); width: 100%; }
.steps li { border-top-color: transparent; border-top-width: 3px; }
.steps li::before { height: 3px; top: -3px; }

.checks li.ok::before, .meter i { background-color: var(--green); }
.meter i { background: linear-gradient(90deg, var(--lilac), var(--green)); }
.ficha { background: var(--bg-2); border-color: var(--lilac); }
.cta { background: linear-gradient(180deg, var(--bg-2), var(--bg)); }