/* ── Como Funciona ─────────────────────────────────────────────────────────── */

/* Hero */
.jm-cf-hero {
  background: linear-gradient(160deg, oklch(14% 0.05 250) 0%, oklch(20% 0.07 240) 100%);
  padding: clamp(4rem, 8vw, 7rem) 0;
  text-align: center;
}
.jm-cf-hero__kicker {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: oklch(70% 0.14 200);
  margin: 0 0 1rem;
}
.jm-cf-hero__title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  color: #fff;
  margin: 0 0 1rem;
  line-height: 1.1;
}
.jm-cf-hero__sub {
  font-size: clamp(.95rem, 1.5vw, 1.2rem);
  color: rgba(255,255,255,.65);
  max-width: 520px;
  margin: 0 auto 2rem;
  line-height: 1.6;
}
.jm-cf-hero__ctas {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
.jm-btn--inv {
  border-color: rgba(255,255,255,.3);
  color: rgba(255,255,255,.85);
}
.jm-btn--inv:hover {
  border-color: rgba(255,255,255,.7);
  color: #fff;
  background: rgba(255,255,255,.08);
}
.jm-btn--ghost {
  background: transparent;
  color: rgba(255,255,255,.75);
  border-color: rgba(255,255,255,.2);
}
.jm-btn--ghost:hover {
  background: rgba(255,255,255,.1);
  color: #fff;
}

/* Seções */
.jm-cf-section {
  padding: clamp(3.5rem, 7vw, 6rem) 0;
}
.jm-cf-section--alt {
  background: oklch(98% 0.005 250);
}
.jm-cf-section__header {
  text-align: center;
  max-width: 580px;
  margin: 0 auto 3.5rem;
}
.jm-cf-section__header h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  color: var(--color-ink);
  margin: .5rem 0 .75rem;
  line-height: 1.2;
}
.jm-cf-section__header p {
  font-size: .95rem;
  color: var(--color-muted);
  margin: 0;
  line-height: 1.6;
}

/* Pill */
.jm-cf-pill {
  display: inline-block;
  background: rgba(3,105,161,.1);
  color: var(--color-ocean, #0369a1);
  font-size: .75rem;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 100px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.jm-cf-pill--alt {
  background: rgba(21,128,61,.1);
  color: #15803d;
}

/* Steps */
.jm-cf-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
}
.jm-cf-step {
  text-align: center;
  padding: 2rem 1.5rem;
  background: #fff;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 16px;
  position: relative;
}
.jm-cf-step__num {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 2rem;
  font-weight: 900;
  color: var(--color-border, #e2e8f0);
  line-height: 1;
}
.jm-cf-step__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: oklch(97% 0.01 250);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  color: var(--color-ocean, #0369a1);
  border: 1px solid var(--color-border, #e2e8f0);
}
.jm-cf-step h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-ink);
  margin: 0 0 .6rem;
}
.jm-cf-step p {
  font-size: .875rem;
  color: var(--color-muted);
  line-height: 1.6;
  margin: 0;
}

/* Garantias */
.jm-cf-garantias {
  padding: clamp(3.5rem, 7vw, 6rem) 0;
  background: linear-gradient(135deg, oklch(16% 0.05 250) 0%, oklch(21% 0.06 250) 100%);
  text-align: center;
}
.jm-cf-garantias h2 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 800;
  color: #fff;
  margin: 0 0 2.5rem;
}
.jm-cf-garantias__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  max-width: 900px;
  margin: 0 auto;
}
.jm-cf-garantia {
  padding: 1.75rem 1.5rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  text-align: left;
}
.jm-cf-garantia svg {
  color: oklch(70% 0.14 200);
  margin-bottom: 1rem;
}
.jm-cf-garantia h3 {
  font-size: .95rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 .5rem;
}
.jm-cf-garantia p {
  font-size: .85rem;
  color: rgba(255,255,255,.55);
  line-height: 1.6;
  margin: 0;
}

/* Planos */
.jm-cf-planos {
  margin-top: 3.5rem;
  text-align: center;
}
.jm-cf-planos h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-ink);
  margin: 0 0 1.5rem;
}
.jm-cf-planos__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
  max-width: 720px;
  margin: 0 auto;
}
.jm-cf-plano {
  padding: 1.75rem 1.5rem;
  background: #fff;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 14px;
  text-align: center;
  position: relative;
}
.jm-cf-plano--destaque {
  border-color: var(--color-ocean, #0369a1);
  box-shadow: 0 0 0 1px var(--color-ocean, #0369a1);
}
.jm-cf-plano__tag {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-ocean, #0369a1);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 100px;
  white-space: nowrap;
}
.jm-cf-plano__nome {
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-muted);
  margin-bottom: .5rem;
}
.jm-cf-plano__preco {
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--color-ink);
  line-height: 1;
  margin-bottom: 1rem;
}
.jm-cf-plano__preco span { font-size: .9rem; font-weight: 400; color: var(--color-muted); }
.jm-cf-plano ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  font-size: .85rem;
  color: var(--color-ink-mid);
  line-height: 2;
}
.jm-cf-plano ul li::before { content: '✓ '; color: #15803d; font-weight: 700; }

/* FAQ */
.jm-cf-faq {
  padding: clamp(3.5rem, 7vw, 6rem) 0;
  background: var(--color-white, #fff);
}
.jm-cf-faq__inner {
  max-width: 720px;
}
.jm-cf-faq h2 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 800;
  color: var(--color-ink);
  margin: 0 0 2rem;
}
.jm-faq-list { display: flex; flex-direction: column; gap: .75rem; }
.jm-faq-item {
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 10px;
  overflow: hidden;
}
.jm-faq-item summary {
  padding: 1rem 1.25rem;
  font-size: .95rem;
  font-weight: 600;
  color: var(--color-ink);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
}
.jm-faq-item summary::-webkit-details-marker { display: none; }
.jm-faq-item summary::after {
  content: '+';
  font-size: 1.25rem;
  font-weight: 300;
  color: var(--color-muted);
  flex-shrink: 0;
  transition: transform .2s;
}
.jm-faq-item[open] summary::after { transform: rotate(45deg); }
.jm-faq-item[open] { background: oklch(99% 0.003 250); }
.jm-faq-item p {
  padding: 0 1.25rem 1rem;
  font-size: .9rem;
  color: var(--color-muted);
  line-height: 1.65;
  margin: 0;
}

/* CTA final */
.jm-cf-cta {
  padding: clamp(4rem, 8vw, 7rem) 0;
  background: linear-gradient(160deg, oklch(14% 0.05 250) 0%, oklch(20% 0.07 240) 100%);
  text-align: center;
}
.jm-cf-cta h2 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 900;
  color: #fff;
  margin: 0 0 .75rem;
}
.jm-cf-cta p {
  font-size: 1rem;
  color: rgba(255,255,255,.6);
  margin: 0 0 2rem;
}
.jm-cf-cta__btns {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* btn--lg */
.jm-btn--lg { padding: .875rem 2rem; font-size: 1rem; }