/* Tela de assinatura — usa os tokens de site.css */
body.assinar{min-height:100vh}
.ck{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:40px; padding-top:44px; padding-bottom:80px; align-items:start}
@media(max-width:900px){.ck{grid-template-columns:1fr; gap:28px}}
.ck h1{font-family:var(--display); font-size:clamp(26px,4vw,34px); font-weight:700; letter-spacing:-.02em; margin:0}
.lede-sm{margin-top:12px; color:var(--txt-2); font-size:16px; max-width:56ch}
.ck-h2{font-family:var(--display); font-size:17px; font-weight:600; margin:34px 0 14px; color:var(--txt)}
.ck-sub{margin:18px 0 10px; font-size:13px; color:var(--txt-3); font-family:var(--mono); letter-spacing:.06em; text-transform:uppercase}
.ck-nota{margin-top:14px; color:var(--txt-4); font-size:13.5px}
.hidden{display:none!important}

/* planos */
.planos{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:26px}
@media(max-width:620px){.planos{grid-template-columns:1fr}}
.plano-opt{position:relative; display:grid; gap:4px; padding:16px 16px 14px; border:1px solid var(--line-2); border-radius:12px; background:var(--surface); cursor:pointer; transition:border-color .15s}
.plano-opt input{position:absolute; opacity:0; inset:0; cursor:pointer}
.plano-opt:has(input:checked){border-color:var(--amber); background:linear-gradient(180deg,var(--amber-bg),var(--surface))}
.plano-opt:has(input:focus-visible){outline:2px solid var(--amber); outline-offset:2px}
.po-nome{font-family:var(--display); font-weight:600; font-size:16px}
.po-nome em{font-style:normal; font-size:10.5px; color:var(--amber); margin-left:6px; text-transform:uppercase; letter-spacing:.06em}
.po-cota{color:var(--txt-3); font-size:13.5px}
.po-preco{font-family:var(--display); font-weight:700; font-size:22px; margin-top:4px; letter-spacing:-.02em}

/* campos */
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.grid3{display:grid; grid-template-columns:1fr 1fr 1.4fr; gap:12px}
@media(max-width:620px){.grid2,.grid3{grid-template-columns:1fr}}
.f{display:grid; gap:6px}
.f-full{grid-column:1/-1}
.f span{font-size:13px; color:var(--txt-3); font-weight:500}
.f input{
  font:inherit; font-size:15.5px; color:var(--txt); background:var(--surface-2);
  border:1px solid var(--line-2); border-radius:9px; padding:11px 13px; outline:none; width:100%;
  transition:border-color .15s;
}
.f input:focus{border-color:var(--amber)}
.f input.inv{border-color:#C96B5A}
.f input::placeholder{color:var(--txt-4)}

/* abas */
.abas{display:flex; gap:6px; background:var(--surface); border:1px solid var(--line); border-radius:11px; padding:5px; margin-bottom:16px; width:fit-content}
.aba{font:inherit; font-weight:600; font-size:14px; color:var(--txt-3); background:transparent; border:0; border-radius:8px; padding:9px 16px; cursor:pointer}
.aba.on{background:var(--surface-2); color:var(--txt); border:1px solid var(--line-2)}

/* alertas e botão */
.alerta{margin-top:18px; padding:12px 14px; border-radius:10px; background:#2A1714; border:1px solid #5A2A24; color:#F0B8AD; font-size:14.5px}
.ck-btn{width:100%; margin-top:22px}
.ck-btn b{font-weight:700}
.ck-btn:disabled{opacity:.55; cursor:default}
.ck-legal{margin-top:14px; font-size:12.5px; color:var(--txt-4); text-align:center}
.ck-legal a{color:var(--txt-3)}

/* lateral */
.ck-side{position:sticky; top:84px}
@media(max-width:900px){.ck-side{position:static; order:-1}}
.resumo{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:22px}
.res-linha{display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--line); font-size:14.5px; color:var(--txt-2)}
.res-linha b{color:var(--txt)}
.res-total{border-bottom:0; padding-top:14px; font-size:16px}
.res-total b{font-family:var(--display); font-size:22px; color:var(--amber)}
.res-lista{list-style:none; margin:16px 0 0; padding:0; display:grid; gap:8px}
.res-lista li{font-size:13.5px; color:var(--txt-3); padding-left:18px; position:relative}
.res-lista li::before{content:""; position:absolute; left:0; top:7px; width:8px; height:5px; border-left:1.6px solid var(--amber); border-bottom:1.6px solid var(--amber); transform:rotate(-45deg)}
.ck-seguro{margin-top:16px; font-size:12.5px; color:var(--txt-4); line-height:1.55}

/* pix e espera */
.pix-box{margin-top:26px; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:24px; display:grid; gap:18px; justify-items:center}
.pix-box img{background:#fff; border-radius:10px; padding:8px; width:240px; height:240px}
.pix-codigo{display:grid; gap:10px; width:100%}
.pix-codigo code{display:block; font-family:var(--mono); font-size:11.5px; color:var(--txt-3); background:var(--surface-2); border:1px solid var(--line-2); border-radius:9px; padding:10px 12px; word-break:break-all; max-height:84px; overflow:auto}
.pix-espera{display:flex; align-items:center; gap:10px; color:var(--txt-2); font-size:14.5px; margin-top:22px}
.spin{width:14px; height:14px; border-radius:50%; border:2px solid var(--line-2); border-top-color:var(--amber); animation:gira .8s linear infinite; flex:none}
@keyframes gira{to{transform:rotate(360deg)}}

/* Escala no checkout: barra dentro da opção */
.plano-opt-escala{grid-column:1/-1}
.plano-opt-escala .escala{display:block; margin-top:12px}
.plano-opt-escala .escala-marcas{display:flex}
.plano-opt-escala .escala-range{position:relative; z-index:1}