/* /como-funciona: por cima do landing.css (mesma identidade das landings). Visual e curto: cards, passos, cotas. */
.button-ghost { color:var(--ink); background:var(--paper); border:1px solid var(--line); box-shadow:none; }
.button-ghost:hover { border-color:var(--accent); filter:none; }
.cf-hero .cta-note { display:block; margin-top:12px; color:var(--soft); font-size:14px; }

.cf-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; margin:20px 0 0; padding:0; list-style:none; }
.cf-card { display:flex; flex-direction:column; padding:18px; border:1px solid var(--line); border-radius:22px; background:var(--paper); }
.cf-card h3 { margin:14px 0 6px; font-size:23px; }
.cf-card p { margin:0 0 14px; color:var(--muted); font-size:15px; line-height:1.5; }
.cf-link { margin-top:auto; align-self:flex-start; padding:9px 16px; border-radius:100px; color:var(--accent); background:var(--accent-bg); font-size:14px; font-weight:700; text-decoration:none; }
.cf-link:hover { filter:brightness(.95); }
.cf-mini { display:grid; gap:6px; padding:12px; border-radius:16px; background:var(--cream); }
.cf-mini span { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; border-radius:12px; background:#fff; font-size:18px; }
.cf-mini i { font-style:normal; font-size:12px; font-weight:700; color:var(--accent); }
.cf-mini i.ok { color:#2f7a4c; }
.cf-mini-ss span { justify-content:center; padding:18px 10px; font-size:16px; font-weight:700; }
.cf-mini-ss b { display:inline-grid; place-items:center; width:26px; height:26px; margin-left:4px; border-radius:50%; color:#fff; background:#b23a3a; }
.cf-card-ss { --accent:#8f2b2b; --accent-bg:#f6dede; }

.cf-flow { display:grid; gap:10px; margin:20px 0 0; padding:0; list-style:none; counter-reset:cf; }
.cf-flow li { position:relative; display:grid; grid-template-columns:48px 1fr; column-gap:14px; align-items:center; padding:14px 16px; border:1px solid var(--line); border-radius:20px; background:var(--paper); counter-increment:cf; }
.cf-flow li:after { content:counter(cf); position:absolute; top:10px; right:14px; color:var(--soft); font-size:12px; font-weight:700; }
.cf-ico { grid-row:1 / 3; width:48px; height:48px; display:grid; place-items:center; border-radius:16px; background:var(--accent-bg); font-size:22px; }
.cf-flow strong { padding-right:18px; font-size:16px; line-height:1.3; }
.cf-flow span:last-child { color:var(--muted); font-size:14px; line-height:1.45; }
.cf-flow-ss .cf-ico { background:#f6dede; }

.cf-quota { display:grid; grid-template-columns:1.2fr 1fr; gap:20px; align-items:center; margin-top:22px; padding:22px; border-radius:24px; background:var(--accent-bg); }
.cf-quota h3 { margin:0 0 8px; font-size:26px; }
.cf-quota p { margin:0 0 8px; color:var(--ink); }
.cf-quota-example { display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:18px; }
.cf-quota-card { display:grid; gap:6px; padding:18px; border-radius:20px; background:#fff; box-shadow:0 18px 40px -26px rgba(48,40,34,.5); }
.cf-quota-badge { justify-self:start; padding:3px 10px; border-radius:100px; color:var(--accent); background:var(--accent-bg); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.cf-quota-row { display:flex; justify-content:space-between; align-items:baseline; }
.cf-quota-row b { color:var(--accent); font-family:Fraunces,Georgia,serif; font-size:26px; font-weight:500; }
.cf-quota-row span,.cf-quota-card small { color:var(--muted); font-size:13px; }
.cf-bar { height:10px; overflow:hidden; border-radius:100px; background:var(--line); }
.cf-bar span { display:block; height:100%; border-radius:inherit; background:var(--accent); }

.cf-final-buttons { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:18px; }
.cf-others { justify-content:center; margin-top:18px; }

@media (max-width:620px) {
  /* modalidades em carrossel (arrasta para o lado): a página fica curta no celular */
  .cf-cards { display:flex; gap:12px; overflow-x:auto; margin:16px -16px 0; padding:0 16px 10px; scroll-snap-type:x mandatory; scroll-padding:0 16px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .cf-cards::-webkit-scrollbar { display:none; }
  .cf-card { flex:0 0 80%; scroll-snap-align:start; }
  .cf-quota { grid-template-columns:1fr; padding:18px; }
  .cf-final-buttons .button { width:100%; }
  .hero .cta-row .button { width:100%; }
}