/* Página de checkout /contratar.html — direção B "um passo por vez", escolhida pelo
   Gustavo em 06/11/2026. Clara de propósito: pagamento tem de passar leveza e segurança.
   IGUAL nas duas LPs (live e imovbrasil). */
:root{
  --papel:#ffffff; --nevoa:#f5f7f6; --tinta:#16201c; --cinza:#5d6b65; --fio:#dfe5e2;
  --verde:#0b7d56; --verde-hover:#096b4a; --verde-vivo:#1ac984; --verde-claro:#e7f6ef;
  --erro:#b42318; --erro-fundo:#fef3f2; --ambar:#8a5a00;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{min-height:100vh;background:linear-gradient(180deg,var(--nevoa) 0,var(--papel) 260px) no-repeat,var(--papel);color:var(--tinta);font:400 16px/1.55 var(--sans);
  padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px));padding-bottom:calc(48px + env(safe-area-inset-bottom,0px))}
a{color:var(--verde)}
button{font:inherit}
:focus-visible{outline:2px solid var(--verde);outline-offset:3px;border-radius:4px}

.topo{max-width:880px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:calc(20px + env(safe-area-inset-top,0px)) 0 20px}
.topo img{height:30px;width:auto;display:block}
.seguro{display:inline-flex;align-items:center;gap:6px;font:500 .85rem var(--sans);color:var(--cinza)}
.seguro svg,.selos svg{width:16px;height:16px;color:var(--verde);flex:none}

.ck{max-width:560px;margin:0 auto}
.pilula{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--papel);border:1px solid var(--fio);border-radius:999px;padding:7px 7px 7px 18px;font-size:.92rem;margin-top:4px}
.pilula b{font-weight:700;white-space:nowrap}
.pilula button{flex:none;border:0;background:var(--verde-claro);color:var(--verde);font:600 .84rem var(--sans);padding:7px 13px;border-radius:999px;cursor:pointer}
.detalhes{background:var(--papel);border:1px solid var(--fio);border-radius:16px;padding:6px 18px;margin-top:10px}
.linha{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--fio);font-size:.93rem}
.linha:last-child{border-bottom:0}
.linha span:first-child{color:var(--cinza)}
.linha.total{font-weight:700}
.linha.total span:last-child{font-size:1.15rem;letter-spacing:-.02em}

.prog{height:4px;border-radius:4px;background:var(--fio);margin:26px 0 30px;overflow:hidden}
.prog i{display:block;height:100%;background:var(--verde);border-radius:4px;transition:width .35s ease}
.etq{font:600 .85rem var(--sans);color:var(--verde);margin-bottom:8px}
.ck h1{font:800 clamp(1.7rem,5vw,2.1rem)/1.12 var(--sans);letter-spacing:-.035em;text-wrap:balance;margin-bottom:8px}
.sub{color:var(--cinza);margin-bottom:22px}
.passo{animation:entra .3s ease}
@keyframes entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* 1. termos */
.termos{background:var(--papel);border:1px solid var(--fio);border-radius:14px;padding:20px 22px;max-height:min(46vh,380px);overflow:auto;font-size:.93rem;line-height:1.65;color:#2b3631}
.termos h1{font:700 1.05rem/1.3 var(--sans);letter-spacing:-.01em;margin:0 0 2px}
.termos .versao{color:var(--cinza);font-size:.82rem;margin-bottom:6px}
.termos h2{font:700 .93rem/1.3 var(--sans);margin:1rem 0 .3rem;color:var(--tinta)}
.termos p,.termos li{margin-bottom:.5rem}
.termos ul{padding-left:1.1rem}
.abrir{display:inline-block;margin-top:10px;font-size:.86rem;color:var(--cinza)}
.aceite{display:flex;gap:12px;align-items:flex-start;margin-top:18px;font:500 1rem/1.4 var(--sans);cursor:pointer}
.aceite input{appearance:none;flex:none;width:22px;height:22px;border:1.5px solid #b9c4bf;border-radius:6px;background:var(--papel);display:grid;place-items:center;cursor:pointer;margin-top:-1px}
.aceite input:checked{background:var(--verde);border-color:var(--verde)}
.aceite input:checked::after{content:"";width:6px;height:11px;border:solid #fff;border-width:0 2.4px 2.4px 0;transform:rotate(45deg) translate(-1px,-1px)}
.aceite.lgpd{font-weight:400;font-size:.92rem;color:var(--cinza);margin-top:6px}

/* 2. entregáveis: uma lista num cartão só (06/11: as caixinhas em grade foram reprovadas) */
.leva{list-style:none;background:var(--papel);border:1px solid var(--fio);border-radius:16px;overflow:hidden}
.leva li{display:grid;grid-template-columns:64px 1fr;gap:16px;align-items:center;padding:16px 20px;border-bottom:1px solid var(--fio)}
.leva .n{font:800 1.9rem/1 var(--sans);letter-spacing:-.03em;color:var(--verde);text-align:center;font-variant-numeric:tabular-nums}
.leva .n.ok{justify-self:center;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--verde-claro)}
.leva .n.ok svg{width:18px;height:18px}
.leva b{display:block;font-weight:600}
.leva li div span{display:block;font-size:.9rem;color:var(--cinza)}
.leva .rodape{display:flex;justify-content:space-between;gap:12px;background:var(--nevoa);border-bottom:0;padding:14px 20px;font-size:.92rem;color:var(--cinza)}
.leva .rodape b{color:var(--tinta)}

/* 3. dados */
.campos{display:grid;gap:16px}
.campo label{display:block;font:500 .86rem var(--sans);color:var(--cinza);margin-bottom:6px}
.campo label small{font-weight:400;color:#8a9691}
.campo input{width:100%;font:400 1rem var(--sans);color:var(--tinta);border:1px solid var(--fio);border-radius:10px;padding:13px 14px;background:var(--papel);transition:border-color .15s,box-shadow .15s}
.campo input:focus{outline:none;border-color:var(--verde);box-shadow:0 0 0 3px rgba(11,125,86,.14)}
.campo input[aria-invalid="true"]{border-color:var(--erro)}
.dupla{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* 4. pagamento */
.formas{display:grid;gap:12px}
.forma{position:relative;display:flex;flex-direction:column;gap:3px;border:1.5px solid var(--fio);border-radius:14px;padding:18px 52px 18px 18px;cursor:pointer;background:var(--papel);transition:border-color .15s,background .15s}
.forma input{position:absolute;opacity:0;pointer-events:none}
.forma::after{content:"";position:absolute;top:20px;right:18px;width:20px;height:20px;border-radius:50%;border:2px solid #b9c4bf;box-sizing:border-box;transition:border .15s}
.forma:hover{border-color:#b9c4bf}
.forma:has(input:checked){border-color:var(--verde);background:var(--verde-claro)}
.forma:has(input:checked)::after{border:6px solid var(--verde)}
.forma:has(input:focus-visible){outline:2px solid var(--verde);outline-offset:3px}
.forma .q{font:600 .85rem var(--sans);color:var(--cinza)}
.forma .v{font:800 1.9rem/1.1 var(--sans);letter-spacing:-.03em}
.forma .v small{font:600 .9rem var(--sans);margin-right:4px}
.forma .d{font-size:.9rem;color:var(--cinza)}
.forma .eco{color:var(--verde);font-weight:600;white-space:nowrap}

/* botões e rodapé do passo */
.acoes{margin-top:26px}
.btn{display:flex;width:100%;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;background:var(--verde);color:#fff;font:600 1.02rem var(--sans);padding:16px 22px;cursor:pointer;text-decoration:none;transition:background .15s}
.btn:hover{background:var(--verde-hover)}
.btn[disabled]{background:#a7c9bb;cursor:not-allowed}
.btn svg{width:18px;height:18px}
.voltar{display:block;margin:12px auto 0;border:0;background:none;color:var(--cinza);font:500 .95rem var(--sans);cursor:pointer;padding:6px 10px;text-decoration:none;text-align:center}
.voltar:hover{color:var(--tinta)}
.erro{background:var(--erro-fundo);color:var(--erro);border-radius:10px;padding:10px 14px;font-size:.93rem;margin-top:16px}
.erro:empty{display:none}
.selos{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;color:var(--cinza);font-size:.85rem;margin-top:22px}
.selos span{display:inline-flex;align-items:center;gap:6px}

/* volta da InfinitePay */
.fim{text-align:center;padding-top:28px}
.fim .ok{display:inline-grid;place-items:center;width:68px;height:68px;border-radius:50%;background:var(--verde-claro);color:var(--verde);margin-bottom:20px}
.fim .ok svg{width:32px;height:32px}
.fim .gira{width:46px;height:46px;border-radius:50%;border:3px solid var(--fio);border-top-color:var(--verde);animation:gira 1s linear infinite;margin:0 auto 22px}
@keyframes gira{to{transform:rotate(360deg)}}
.fim .sub{max-width:44ch;margin-inline:auto}
.fim .numero{display:inline-block;font:600 .9rem var(--sans);background:var(--nevoa);border:1px solid var(--fio);border-radius:8px;padding:6px 12px;margin-bottom:22px;font-variant-numeric:tabular-nums}

@media (max-width:520px){
  .dupla{grid-template-columns:1fr}
  .leva li{grid-template-columns:48px 1fr;gap:12px;padding:14px 16px}
  .topo img{height:24px}
  .pilula{border-radius:16px;align-items:flex-start;flex-direction:column;padding:12px 14px;gap:8px}
}
@media (prefers-reduced-motion:reduce){.passo{animation:none}.prog i{transition:none}.fim .gira{animation-duration:3s}}