/* Asten Gestão: compra do plano, espera do pagamento e conta bloqueada.
   Mesma linguagem do resto do sistema (verde como ação, claro e espaçado), com mais ar, hierarquia e movimento.
   Todo movimento respeita "reduzir movimento" do aparelho. */

.cp { --cp-raio: 28px; min-height: 100dvh; padding-bottom: 72px; background:
  radial-gradient(70% 38% at 50% -6%, color-mix(in srgb, var(--verde) 13%, transparent), transparent 70%),
  radial-gradient(40% 30% at 100% 12%, color-mix(in srgb, var(--verde) 6%, transparent), transparent 70%); }

/* ---------- topo e etapas ---------- */
.cp__topo { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; max-width: 1120px; margin: 0 auto; padding: 22px 24px 0; }
.cp__topo .marca { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.01em; }
.cp__voltar { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px 0 8px; border-radius: 999px; color: var(--suave); font-weight: 500; text-decoration: none; transition: background 180ms var(--ios), color 180ms var(--ios); }
.cp__voltar:hover { background: rgb(var(--o) / 0.06); color: var(--tinta); }

.cp__passos { display: flex; justify-content: center; align-items: center; gap: 0; max-width: 520px; margin: 26px auto 0; padding: 0 24px; list-style: none; counter-reset: p; }
.cp__passos li { position: relative; display: flex; align-items: center; gap: 9px; color: var(--suave); font-size: 0.875rem; font-weight: 500; white-space: nowrap; }
.cp__passos li + li { margin-left: 14px; padding-left: 30px; }
.cp__passos li + li::before { content: ''; position: absolute; left: 0; top: 50%; width: 22px; height: 2px; border-radius: 2px; background: rgb(var(--o) / 0.14); transition: background 420ms var(--ios); }
.cp__passos li.ok + li::before, .cp__passos li.on::before { background: var(--verde); }
.cp__passos i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-style: normal; font-size: 0.8125rem; font-weight: 700; background: rgb(var(--o) / 0.08); color: var(--suave); transition: background 360ms var(--ios), color 360ms var(--ios), transform 360ms var(--ios); }
.cp__passos li.on { color: var(--tinta); }
.cp__passos li.on i { background: var(--verde); color: #fff; transform: scale(1.08); }
.cp__passos li.ok i { background: var(--verde-suave); color: var(--verde); }
.cp__passos svg { width: 14px; height: 14px; }

/* ---------- título ---------- */
.cp__miolo { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.cp__tit { margin: 44px auto 0; max-width: 16ch; text-align: center; font-size: clamp(2.5rem, 1.4rem + 5.2vw, 4.25rem); line-height: 1.02; font-weight: 700; letter-spacing: -0.04em; text-wrap: balance; animation: cp-sobe 700ms var(--suave-sai) both; }
.cp__sub { margin: 18px auto 0; max-width: 46ch; text-align: center; color: var(--suave); font-size: 1.1875rem; line-height: 1.5; text-wrap: balance; animation: cp-sobe 700ms 90ms var(--suave-sai) both; }

/* ---------- ciclo: pílula com pino que desliza ---------- */
.cp__ciclo { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: min(100%, 300px); margin: 34px auto 0; padding: 4px; border-radius: 999px; background: rgb(var(--o) / 0.07); animation: cp-sobe 700ms 160ms var(--suave-sai) both; }
.cp__ciclo-pino { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--sup); box-shadow: 0 1px 2px rgb(var(--o) / 0.12), 0 4px 14px rgb(var(--o) / 0.1); transition: transform 460ms var(--ios); }
.cp__ciclo[data-ciclo="anual"] .cp__ciclo-pino { transform: translateX(100%); }
.cp__ciclo label { position: relative; display: block; cursor: pointer; }
.cp__ciclo input { position: absolute; opacity: 0; pointer-events: none; }
.cp__ciclo label > span { position: relative; display: block; padding: 11px 0; text-align: center; font-weight: 600; font-size: 0.9375rem; color: var(--suave); transition: color 260ms var(--ios); }
.cp__ciclo input:checked + span { color: var(--tinta); }
.cp__ciclo label { z-index: 1; }
.cp__ciclo label:has(input:focus-visible) { outline: 3px solid var(--verde); outline-offset: 2px; border-radius: 999px; }

/* ---------- cartões dos planos ---------- */
.cp__planos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 40px; align-items: stretch; }
.cp__plano { position: relative; display: block; cursor: pointer; animation: cp-sobe 720ms calc(220ms + var(--i, 0) * 80ms) var(--suave-sai) both; }
.cp__plano input { position: absolute; opacity: 0; pointer-events: none; }
.cp__plano-c { position: relative; display: flex; flex-direction: column; height: 100%; padding: 28px 26px 26px; border-radius: var(--cp-raio); background: var(--sup); box-shadow: inset 0 0 0 1px rgb(var(--o) / 0.1), 0 1px 2px rgb(var(--o) / 0.04), 0 18px 40px -26px rgb(var(--o) / 0.22); transition: transform 520ms var(--ios), box-shadow 520ms var(--ios), background 360ms var(--ios); }
.cp__plano:hover .cp__plano-c { transform: translateY(-3px); }
.cp__plano input:checked + .cp__plano-c { transform: translateY(-8px); background: linear-gradient(180deg, color-mix(in srgb, var(--verde) 9%, var(--sup)), var(--sup) 62%); box-shadow: inset 0 0 0 2px var(--verde), 0 2px 4px rgb(var(--o) / 0.05), 0 34px 60px -28px color-mix(in srgb, var(--verde) 48%, transparent); }
.cp__plano input:focus-visible + .cp__plano-c { outline: 3px solid var(--verde); outline-offset: 4px; }
.cp__marca { position: absolute; top: 22px; right: 22px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--verde); color: #fff; opacity: 0; transform: scale(0.4); transition: opacity 260ms var(--ios), transform 520ms var(--ios); }
.cp__marca svg { width: 16px; height: 16px; }
.cp__plano input:checked + .cp__plano-c .cp__marca { opacity: 1; transform: scale(1); }
.cp__nome { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; }
.cp__desc { margin-top: 4px; min-height: 2.8em; color: var(--suave); font-size: 0.9375rem; line-height: 1.4; }
.cp__valor { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 22px 0 4px; }
.cp__valor b { font-size: clamp(2rem, 1.2rem + 2.2vw, 2.625rem); font-weight: 700; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; line-height: 1; }
.cp__valor small { color: var(--suave); font-size: 0.9375rem; font-weight: 500; }
.cp__itens { display: grid; gap: 11px; margin: 22px 0 0; padding: 22px 0 0; list-style: none; border-top: 1px solid rgb(var(--o) / 0.09); font-size: 0.9375rem; line-height: 1.35; }
.cp__itens li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; }
.cp__itens svg { width: 18px; height: 18px; margin-top: 1px; color: var(--verde); }

/* ---------- dados ---------- */
.cp__dados { max-width: 560px; margin: 56px auto 0; padding: 32px 30px 28px; border-radius: var(--cp-raio); background: var(--sup); box-shadow: inset 0 0 0 1px rgb(var(--o) / 0.1), 0 24px 60px -34px rgb(var(--o) / 0.3); animation: cp-sobe 720ms 520ms var(--suave-sai) both; }
.cp__dados h2 { margin: 0 0 4px; font-size: 1.4375rem; font-weight: 700; letter-spacing: -0.025em; }
.cp__dados > p { margin: 0 0 22px; color: var(--suave); font-size: 0.9375rem; }
.cp__campo { display: block; margin-top: 16px; }
.cp__campo > span { display: block; margin: 0 0 7px 4px; font-size: 0.8125rem; font-weight: 600; color: var(--suave); }
.cp__campo input { width: 100%; height: 54px; padding: 0 18px; border: 0; border-radius: 16px; background: rgb(var(--o) / 0.05); box-shadow: inset 0 0 0 1px transparent; color: var(--tinta); font: inherit; font-size: 1.0625rem; transition: box-shadow 220ms var(--ios), background 220ms var(--ios); }
.cp__campo input::placeholder { color: rgb(var(--o) / 0.34); }
.cp__campo input:hover { background: rgb(var(--o) / 0.07); }
.cp__campo input:focus { outline: 0; background: var(--sup); box-shadow: inset 0 0 0 2px var(--verde), 0 0 0 5px color-mix(in srgb, var(--verde) 16%, transparent); }
.cp__resumo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 26px; padding: 18px 4px 0; border-top: 1px solid rgb(var(--o) / 0.09); }
.cp__resumo span { color: var(--suave); font-size: 0.9375rem; }
.cp__resumo b { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.cp__erro { min-height: 1.4em; margin: 14px 4px 0; color: #C8352B; font-size: 0.9375rem; font-weight: 500; }
.cp__erro.agita { animation: cp-treme 420ms var(--ios); }
.cp__btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 58px; margin-top: 6px; border: 0; border-radius: 999px; background: var(--verde); color: #fff; font: inherit; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.005em; cursor: pointer; box-shadow: 0 1px 0 rgb(255 255 255 / 0.22) inset, 0 14px 28px -12px color-mix(in srgb, var(--verde) 70%, transparent); transition: transform 200ms var(--ios), box-shadow 300ms var(--ios), filter 200ms var(--ios); }
.cp__btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.cp__btn:active { transform: scale(0.985); }
.cp__btn:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; }
.cp__btn[disabled] { cursor: progress; filter: saturate(0.85) brightness(1.02); }
.cp__btn--linha { background: transparent; color: var(--verde); box-shadow: inset 0 0 0 1.5px var(--verde); }
.cp__btn--suave { background: rgb(var(--o) / 0.06); color: var(--tinta); box-shadow: none; }
.cp__giro { display: none; width: 20px; height: 20px; border: 2.5px solid rgb(255 255 255 / 0.35); border-top-color: #fff; border-radius: 50%; animation: cp-gira 700ms linear infinite; }
.cp__btn[disabled] .cp__giro { display: block; }
.cp__seguro { display: flex; align-items: flex-start; justify-content: center; gap: 8px; max-width: 380px; margin: 18px auto 0; color: var(--suave); font-size: 0.8125rem; line-height: 1.45; text-align: center; }
.cp__seguro svg { flex: none; width: 15px; height: 15px; margin-top: 1px; }

/* ---------- espera, confirmação e conta bloqueada ---------- */
.cp__cartao { max-width: 560px; margin: 64px auto 0; padding: 48px 36px 36px; border-radius: 32px; text-align: center; background: var(--sup); box-shadow: inset 0 0 0 1px rgb(var(--o) / 0.1), 0 30px 70px -36px rgb(var(--o) / 0.34); animation: cp-sobe 700ms var(--suave-sai) both; }
.cp__cartao h1 { margin: 26px 0 0; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.375rem); line-height: 1.1; font-weight: 700; letter-spacing: -0.035em; text-wrap: balance; }
.cp__cartao p { margin: 12px auto 0; max-width: 40ch; color: var(--suave); font-size: 1.0625rem; line-height: 1.5; text-wrap: pretty; }
.cp__acoes { display: grid; gap: 12px; max-width: 360px; margin: 30px auto 0; }
.cp__acoes .cp__btn { margin-top: 0; text-decoration: none; }
.cp__pequeno { font-size: 0.875rem !important; margin-top: 22px !important; }
.cp__selo { position: relative; display: grid; place-items: center; width: 84px; height: 84px; margin: 0 auto; border-radius: 50%; background: var(--verde-suave); color: var(--verde); }
.cp__selo svg { width: 38px; height: 38px; }
.cp__selo--espera::before { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--verde) 30%, transparent); animation: cp-pulsa 2200ms var(--ios) infinite; }
.cp__selo--espera .cp__anel { position: absolute; inset: 0; width: 100%; height: 100%; animation: cp-gira 1800ms linear infinite; }
.cp__selo--espera .cp__anel circle { fill: none; stroke: var(--verde); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 60 200; }
.cp__selo--ok { animation: cp-pop 640ms var(--ios) both; }
.cp__selo--ok path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: cp-traco 520ms 260ms var(--ios) forwards; }
.cp__selo--aviso { background: color-mix(in srgb, #E8A100 16%, var(--sup)); color: #B87800; }
.cp__linha { position: relative; height: 3px; max-width: 220px; margin: 30px auto 0; overflow: hidden; border-radius: 3px; background: rgb(var(--o) / 0.08); }
.cp__linha::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; border-radius: 3px; background: var(--verde); animation: cp-vai 1500ms var(--ios) infinite; }

/* ---------- movimento ---------- */
@keyframes cp-sobe { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes cp-gira { to { transform: rotate(360deg); } }
@keyframes cp-pulsa { 0% { transform: scale(0.92); opacity: 0.9; } 70%, 100% { transform: scale(1.22); opacity: 0; } }
@keyframes cp-pop { 0% { transform: scale(0.5); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
@keyframes cp-traco { to { stroke-dashoffset: 0; } }
@keyframes cp-vai { 0% { left: -40%; } 100% { left: 100%; } }
@keyframes cp-treme { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@media (prefers-reduced-motion: reduce) { .cp *, .cp *::before, .cp *::after { animation: none !important; transition: none !important; } .cp__selo--ok path { stroke-dashoffset: 0; } }

/* ---------- celular ---------- */
@media (max-width: 880px) {
  .cp__planos { grid-template-columns: 1fr; gap: 14px; max-width: 520px; margin-left: auto; margin-right: auto; }
  .cp__desc { min-height: 0; }
  .cp__plano input:checked + .cp__plano-c { transform: translateY(-3px); }
  .cp__itens { margin-top: 18px; padding-top: 18px; }
}
@media (max-width: 560px) {
  .cp__topo { padding: 14px 14px 0; }
  .cp__passos { margin-top: 18px; }
  .cp__passos li + li { margin-left: 8px; padding-left: 22px; }
  .cp__passos li + li::before { width: 14px; }
  .cp__passos li span { font-size: 0.8125rem; }
  .cp__miolo { padding: 0 16px; }
  .cp__tit { margin-top: 30px; }
  .cp__sub { font-size: 1.0625rem; }
  .cp__dados { margin-top: 36px; padding: 26px 20px 22px; }
  .cp__cartao { margin: 36px 16px 0; padding: 38px 22px 28px; }
}