/* Como funciona: 3 etapas (briefing e estudo → €50 e prévia em 48h → aprovação e site em até 5 dias), logo antes da oferta */
.s-como{position:relative;padding-block:var(--section-py);overflow:hidden}
.s-como::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(50% 60% at 85% 10%,rgb(166 0 255 / .16),transparent 70%),radial-gradient(45% 55% at 10% 95%,rgb(255 90 31 / .14),transparent 70%)}
.s-como .cf-in{position:relative}
.s-como .cf-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 48px;margin-bottom:clamp(40px,7vh,72px)}
.s-como .cf-title{max-width:13ch}
.s-como .cf-lead{max-width:40ch;color:var(--text)}
.s-como .cf-steps{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0;padding:0;list-style:none;counter-reset:cf}
/* linha que liga as etapas */
.s-como .cf-steps::before{content:"";position:absolute;left:28px;right:28px;top:27px;height:1px;background:var(--grad);opacity:.6}
.s-como .cf-step{position:relative;display:flex;flex-direction:column;gap:16px;padding:0 0 4px}
.s-como .cf-num{position:relative;z-index:1;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--ink);font-family:var(--mono);font-weight:500;font-size:15px;letter-spacing:.06em;color:var(--white)}
.s-como .cf-num::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.s-como .cf-card{flex:1;display:flex;flex-direction:column;gap:14px;padding:28px 26px 26px;border:1px solid var(--line);border-radius:8px;background:rgb(255 255 255 / .03)}
.s-como .cf-tag{align-self:flex-start;padding:6px 10px;border-radius:3px;background:rgb(255 90 31 / .12);color:var(--flame);letter-spacing:.14em}
.s-como .cf-step--pay .cf-tag{background:var(--grad);color:#fff}
.s-como .cf-card h3{margin:0;max-width:16ch}
.s-como .cf-card p{margin:0;color:var(--text)}
.s-como .cf-card ul{display:grid;gap:8px;margin:auto 0 0;padding:16px 0 0;border-top:1px solid var(--line);list-style:none}
.s-como .cf-card li{display:flex;gap:10px;align-items:baseline;font-size:14px;color:var(--grey-1)}
.s-como .cf-card li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--grad);translate:0 -1px}
.s-como .cf-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;margin-top:clamp(32px,6vh,56px);padding-top:24px;border-top:1px solid var(--line)}
.s-como .cf-foot p{margin:0;color:var(--grey-2)}
.s-como .cf-foot b{color:var(--white);font-weight:600}
.s-como .cf-link{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:999px;background:var(--grad);color:#fff;text-decoration:none;font-weight:600;font-size:15px;white-space:nowrap;transition:transform .2s,box-shadow .3s}
@media (hover:hover){.s-como .cf-link:hover{transform:translateY(-2px);box-shadow:0 18px 40px -18px rgb(255 90 31 / .9)}}
.s-como .cf-link:focus-visible{outline:2px solid var(--flame);outline-offset:3px}

@media (max-width:899px){
  .s-como .cf-steps{grid-template-columns:1fr;gap:16px}
  /* no celular a linha desce pela esquerda, ligando os números */
  .s-como .cf-steps::before{left:27px;right:auto;top:28px;bottom:28px;width:1px;height:auto;background:var(--grad-v)}
  .s-como .cf-step{display:grid;grid-template-columns:56px minmax(0,1fr);gap:14px;align-items:start}
  .s-como .cf-card{padding:22px 18px 20px}
  .s-como .cf-card h3{max-width:none}
  .s-como .cf-foot{flex-direction:column;align-items:stretch}
  .s-como .cf-link{justify-content:center}
}
@media (max-width:479px){
  .s-como .cf-step{grid-template-columns:44px minmax(0,1fr);gap:10px}
  .s-como .cf-num{width:44px;height:44px;font-size:13px}
  .s-como .cf-steps::before{left:21.5px;top:22px;bottom:22px}
  .s-como .cf-foot p{text-align:center}
}