/* Acabamento premium: "Como funciona" e "Planos" */
@property --pa{syntax:"<angle>";inherits:false;initial-value:0deg}

/* ---------- Como funciona ---------- */
.steps{position:relative}
.steps::before{content:"";position:absolute;left:6%;right:6%;top:52px;height:0;border-top:2px dashed var(--mint2);z-index:0;opacity:.9}
.step{position:relative;z-index:1;overflow:hidden;background:linear-gradient(180deg,#fff,#fbfaf6);box-shadow:var(--shadow),inset 0 1px 0 #fff;transition:transform 500ms var(--ease),box-shadow 500ms var(--ease),border-color 500ms var(--ease)}
.step::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,transparent,var(--accent),var(--mint-hi),transparent);transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease) .3s}
.step.in::before{transform:scaleX(1)}
.step::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.7) 50%,transparent 62%);transform:translateX(-130%)}
@media (hover:hover) and (pointer:fine){
  .step:hover{transform:translateY(-6px);border-color:rgba(31,157,85,.35);box-shadow:0 2px 4px rgba(17,22,19,.05),0 36px 60px -28px rgba(17,22,19,.35)}
  .step:hover::after{transform:translateX(130%);transition:transform 2s var(--ease)}
  .step:hover .n{box-shadow:0 0 0 4px var(--mint-hi)}
}
.s-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s4);margin-bottom:var(--s8)}
.step .n{margin-bottom:0;background:linear-gradient(135deg,#2a352e,#111613);box-shadow:0 0 0 4px var(--mint);transition:box-shadow 400ms var(--ease)}
.s-ico{display:grid;place-items:center;width:60px;height:60px;border-radius:18px;background:linear-gradient(180deg,#fff,var(--mint));border:1px solid rgba(31,157,85,.18);box-shadow:0 14px 26px -14px rgba(17,22,19,.35),inset 0 1px 0 #fff;transition:transform 500ms var(--ease);margin-top:-6px}
.s-ico img{width:38px;height:38px;object-fit:contain}
.s-chip{display:inline-flex;align-items:center;gap:6px;margin-top:var(--s5);padding:4px 12px;border-radius:var(--r-full);background:var(--mint);color:var(--accent-ink);font-size:12.5px;line-height:20px;font-weight:500}
.s-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}

/* ---------- Planos ---------- */
.plan{background:linear-gradient(180deg,#fff,#fbfaf6);box-shadow:var(--shadow),inset 0 1px 0 #fff;overflow:hidden}
.plan::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.65) 50%,transparent 62%);transform:translateX(-130%)}
@media (hover:hover) and (pointer:fine){
  .plan:hover{border-color:rgba(31,157,85,.4);box-shadow:0 2px 4px rgba(17,22,19,.05),0 40px 64px -30px rgba(17,22,19,.4)}
  .plan:hover::after{transform:translateX(130%);transition:transform 2s var(--ease)}
}
.price b{background:linear-gradient(180deg,#111613 30%,#3b4a40);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.save:not(:empty){display:inline-flex;align-items:center;gap:6px;width:fit-content;padding:2px 10px;border-radius:var(--r-full);background:var(--mint);font-weight:500}
.save:empty,.save.sp{background:none;padding:0}
.plan .btn-ghost{transition:background-color 300ms var(--ease),color 300ms var(--ease),transform 160ms var(--ease),border-color 300ms var(--ease)}
@media (hover:hover){.plan .btn-ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}}

/* plano em destaque: aurora, borda que gira e brilho */
.plan.best{position:relative;overflow:visible;background:radial-gradient(120% 70% at 100% 0%,rgba(47,191,116,.38),transparent 60%),radial-gradient(90% 60% at 0% 100%,rgba(98,198,210,.16),transparent 60%),linear-gradient(180deg,#18201b,#0f1411);border-color:transparent;box-shadow:0 2px 4px rgba(17,22,19,.2),0 44px 80px -30px rgba(31,157,85,.55),inset 0 1px 0 rgba(255,255,255,.14)}
.plan.best::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--pa),rgba(155,235,184,0) 0deg,rgba(155,235,184,.95) 60deg,rgba(155,235,184,0) 140deg,rgba(255,255,255,.0) 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:pspin 6s linear infinite;pointer-events:none}
.plan.best::after{display:none}
@keyframes pspin{to{--pa:360deg}}
.plan.best .price b{background:linear-gradient(180deg,#fff 30%,#b9f2cf);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.plan.best .save:not(:empty){background:rgba(155,235,184,.16)}
.plan .tag{background:linear-gradient(110deg,#9bebb8 20%,#e9ffe3 45%,#9bebb8 70%);background-size:220% 100%;animation:tagshine 3.6s ease-in-out infinite;box-shadow:0 8px 20px -8px rgba(155,235,184,.8)}
@keyframes tagshine{0%{background-position:120% 0}60%,100%{background-position:-60% 0}}
.plan.best .btn-primary{background:linear-gradient(180deg,#38cf80,#1f9d55);color:#fff;border-color:transparent;box-shadow:0 16px 30px -12px rgba(47,191,116,.85),inset 0 1px 0 rgba(255,255,255,.35)}
@media (hover:hover){.plan.best .btn-primary:hover{background:linear-gradient(180deg,#43d98b,#25a85d)}}
@media (min-width:1025px){.plan.best{transform:translateY(-10px)}}
@media (hover:hover) and (pointer:fine) and (min-width:1025px){.plan.best:hover{transform:translateY(-14px)}}

@media (max-width:1024px){.steps::before{display:none}}
@media (max-width:760px){.s-top{margin-bottom:var(--s6)}}
@media (prefers-reduced-motion:reduce){.plan.best::before,.plan .tag{animation:none}.step::before{transform:none;transition:none}}