/* ============================================================
   Reserve — telas de conta (/cadastro e /login)
   Mesma identidade da landing v3: Noto Sans, azul #096fee, navy
   #06162e sobre papel #faf9f5. Os tokens repetem os de
   landing-v3.css de propósito: estas páginas não carregam a
   folha da landing (nada aqui usa hero, grid editorial ou
   carrossel) e precisam funcionar sozinhas.
   ============================================================ */

:root{--blue:#096fee;--navy:#06162e;--cream:#f4f0e7;--paper:#faf9f5;--ink:#101318;--muted:#656b75;--line:#d9d8d2}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:'Noto Sans',sans-serif;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
img{max-width:100%}

/* ── Estrutura ──────────────────────────────────────────── */
.auth{display:grid;grid-template-columns:440px 1fr;min-height:100vh}

/* ── Coluna da marca ────────────────────────────────────── */
.auth-aside{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--navy);color:#fff;padding:46px 42px;display:flex;flex-direction:column}
/* A foto e o véu são absolutos: sem posicionamento no pai eles escapam para o
   viewport e cobrem o formulário (foi o que aconteceu no mobile, onde a coluna
   deixa de ser sticky). */
.auth-aside::before{content:'';position:absolute;inset:0;background:url('/saas/assets/img/landing/v3/pousada-serra-noite.webp') center/cover no-repeat;opacity:.28}
.auth-aside::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,22,46,.86),rgba(6,22,46,.97))}
.auth-aside>*{position:relative;z-index:2}
.auth-logo img{width:136px;display:block}
.auth-kicker{font-size:9px;letter-spacing:.2em;font-weight:800;color:#5b9bff}
.auth-aside h1{font-size:44px;line-height:.98;letter-spacing:-.055em;font-weight:800;margin:16px 0 18px}
.auth-aside h1 em{font-style:normal;color:#5b9bff}
.auth-aside>p{font-size:13px;line-height:1.7;color:#a9b6c8;max-width:300px}
.auth-aside-top{margin-bottom:44px}

/* Passos */
.steps{list-style:none;margin-top:auto}
.steps li{display:flex;gap:15px;padding:13px 0;position:relative}
.steps li:not(:last-child)::after{content:'';position:absolute;left:15px;top:44px;bottom:-13px;width:1px;background:rgba(255,255,255,.16)}
.steps li.done::after{background:rgba(91,155,255,.5)}
.step-n{flex:0 0 31px;height:31px;border-radius:50%;border:1px solid rgba(255,255,255,.22);display:grid;place-items:center;font-size:11px;font-weight:800;color:rgba(255,255,255,.45);transition:.2s}
.steps li.active .step-n{border-color:#5b9bff;color:#5b9bff;background:rgba(91,155,255,.14)}
.steps li.done .step-n{border-color:#5b9bff;background:#5b9bff;color:var(--navy)}
.step-t{padding-top:5px}
.step-t strong{display:block;font-size:12px;font-weight:700;letter-spacing:.02em;color:rgba(255,255,255,.45)}
.steps li.active .step-t strong,.steps li.done .step-t strong{color:#fff}
.step-t span{font-size:10px;letter-spacing:.06em;color:rgba(255,255,255,.35)}

/* Resumo do plano */
.resumo{margin-top:38px;border-top:1px solid rgba(255,255,255,.16);padding-top:22px}
.resumo-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.resumo-top span{font-size:9px;letter-spacing:.18em;font-weight:800;color:rgba(255,255,255,.4)}
.resumo-top strong{display:block;font-size:16px;font-weight:700;margin-top:5px}
.resumo-preco{text-align:right;font-size:30px;font-weight:800;letter-spacing:-.05em;line-height:1;white-space:nowrap}
.resumo-preco sup{font-size:12px;font-weight:400;vertical-align:top;letter-spacing:0;margin-right:5px;line-height:1.5}
.resumo-preco i{font-style:normal;font-size:10px;font-weight:400;color:rgba(255,255,255,.5);letter-spacing:0}
.resumo ul{list-style:none;margin-top:16px;display:grid;gap:7px}
.resumo li{font-size:11.5px;color:rgba(255,255,255,.72);display:flex;gap:9px}
.resumo li b{color:#5b9bff;font-weight:700}

/* ── Coluna do formulário ───────────────────────────────── */
.auth-main{padding:56px 5vw 64px;display:flex;flex-direction:column;max-width:940px;width:100%}
.auth-back{display:inline-flex;align-items:center;gap:8px;font-size:10px;font-weight:800;letter-spacing:.16em;color:var(--muted);margin-bottom:38px;transition:.15s}
.auth-back:hover{color:var(--blue)}
.auth-head>span{font-size:10px;letter-spacing:.2em;font-weight:800;color:var(--blue)}
.auth-head h2{font-size:clamp(34px,3.6vw,50px);line-height:.98;letter-spacing:-.05em;font-weight:800;margin:16px 0 12px}
.auth-head h2 em{font-style:normal;color:var(--blue)}
.auth-head>p{color:var(--muted);font-size:14px;line-height:1.7;max-width:520px}
.progress{height:2px;background:var(--line);margin:34px 0 40px;position:relative}
.progress i{position:absolute;inset:0 auto 0 0;background:var(--blue);transition:width .45s ease}

/* Blocos do formulário */
.bloco{margin-bottom:34px}
.bloco-t{font-size:9px;font-weight:800;letter-spacing:.2em;color:var(--muted);display:flex;align-items:center;gap:14px;margin-bottom:20px}
.bloco-t::after{content:'';flex:1;height:1px;background:var(--line)}
.linha{display:grid;gap:18px;margin-bottom:18px}
.linha.c2{grid-template-columns:1fr 1fr}
.campo{display:flex;flex-direction:column;gap:8px}
.campo label{font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.campo label b{color:var(--blue)}
.field{padding:15px 16px;border:1px solid var(--line);border-radius:10px;background:#fff;font-family:inherit;font-size:14px;color:var(--ink);outline:none;transition:.15s;width:100%}
.field:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(9,111,238,.12)}
.field::placeholder{color:#a9adb5}
select.field{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23656b75' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:11px;padding-right:40px}
.dica{font-size:11px;color:var(--muted);line-height:1.5}

/* Planos */
/* auto-fill e não auto-fit: com um único plano no grupo multi-unidades, o
   auto-fit esticaria o card por toda a largura. */
.planos{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:16px}
.plano{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 24px 24px;cursor:pointer;transition:.18s;display:flex;flex-direction:column}
.plano:hover{border-color:#9fb0c6;transform:translateY(-2px)}
.plano.sel{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue),0 16px 38px rgba(9,111,238,.14)}
.plano input{position:absolute;opacity:0;pointer-events:none}
.plano-mark{position:absolute;top:22px;right:22px;width:19px;height:19px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transition:.18s}
.plano.sel .plano-mark{border-color:var(--blue);background:var(--blue)}
.plano.sel .plano-mark::after{content:'';width:6px;height:6px;border-radius:50%;background:#fff}
.plano-nome{font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding-right:30px}
.plano.sel .plano-nome{color:var(--blue)}
.plano-preco{display:flex;align-items:baseline;margin:14px 0 12px}
.plano-preco sup{font-size:13px;font-weight:400;margin-right:4px}
.plano-preco b{font-size:42px;line-height:1;letter-spacing:-.06em;font-weight:800}
.plano-preco span{font-size:11px;color:var(--muted);margin-left:7px}
.plano-desc{font-size:12.5px;line-height:1.6;color:var(--muted)}
.plano ul{list-style:none;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);display:grid;gap:8px}
.plano li{font-size:11.5px;line-height:1.45;display:flex;gap:9px;color:var(--ink)}
.plano li b{color:var(--blue);font-weight:700;flex:0 0 auto}
.plano-tag{position:absolute;left:0;top:-1px;transform:translateY(-50%);margin-left:24px;background:var(--blue);color:#fff;font-size:8px;font-weight:800;letter-spacing:.14em;padding:6px 10px;border-radius:99px}
.plano.multi{background:var(--navy);border-color:var(--navy);color:#fff}
.plano.multi .plano-nome{color:#5b9bff}
.plano.multi .plano-desc{color:#9fb0c6}
.plano.multi ul{border-top-color:rgba(255,255,255,.16)}
.plano.multi li{color:rgba(255,255,255,.8)}
.plano.multi li b,.plano.multi .plano-preco span{color:#5b9bff}
.plano.multi .plano-mark{border-color:rgba(255,255,255,.35)}
.plano.multi.sel{box-shadow:0 0 0 1px #5b9bff,0 16px 38px rgba(6,22,46,.28)}
.plano.multi.sel .plano-mark{border-color:#5b9bff;background:#5b9bff}

/* Força da senha */
.forca{display:flex;gap:5px;margin-top:2px}
.forca i{flex:1;height:2px;background:var(--line);transition:.3s}
.forca.f1 i:nth-child(1){background:#d94b3c}
.forca.f2 i:nth-child(-n+2){background:#d8942a}
.forca.f3 i:nth-child(-n+3){background:var(--blue)}
.forca.f4 i{background:#1f9d63}

/* Botões */
.acoes{display:flex;gap:14px;align-items:center;margin-top:38px}
.btn{background:var(--blue);color:#fff;border:0;border-radius:8px;padding:17px 22px;font-family:inherit;font-size:12px;font-weight:800;letter-spacing:.04em;cursor:pointer;display:inline-flex;align-items:center;justify-content:space-between;gap:26px;min-width:210px;transition:.18s}
.btn:hover{background:#0a5fcc}
.btn-ghost{background:none;color:var(--ink);border:1px solid var(--line);min-width:0;gap:10px}
.btn-ghost:hover{background:none;border-color:var(--ink)}
.btn-full{width:100%;justify-content:center;gap:12px}

/* Avisos */
.aviso{border:1px solid var(--line);background:#fff;border-radius:12px;padding:16px 18px;font-size:12.5px;line-height:1.65;color:var(--muted);margin-bottom:12px}
.aviso strong{color:var(--ink)}
.aviso a{color:var(--blue);font-weight:700}
.aviso.azul{border-color:#bcd5fb;background:#f0f5ff}
.erro{border:1px solid #f0c2bd;background:#fdf2f1;color:#8f1d1a;border-radius:10px;padding:14px 16px;font-size:13px;margin-bottom:26px}
.erro a{color:#8f1d1a;font-weight:800;text-decoration:underline}
.rodape-nota{margin-top:auto;padding-top:40px;font-size:12px;color:var(--muted)}
.rodape-nota a{color:var(--blue);font-weight:700}

/* Sucesso */
.sucesso{max-width:560px;margin:auto 0}
.sucesso>span{font-size:10px;letter-spacing:.2em;font-weight:800;color:var(--blue)}
.sucesso h2{font-size:clamp(38px,4vw,58px);line-height:.96;letter-spacing:-.055em;font-weight:800;margin:16px 0 18px}
.sucesso h2 em{font-style:normal;color:var(--blue)}
.sucesso>p{color:var(--muted);line-height:1.75;font-size:14px}
.endereco{border:1px solid var(--line);background:#fff;border-radius:12px;padding:20px 22px;margin:28px 0 14px}
.endereco span{font-size:9px;letter-spacing:.18em;font-weight:800;color:var(--muted)}
.endereco strong{display:block;font-size:19px;font-weight:800;letter-spacing:-.02em;margin-top:6px}

/* Pagamento (step 4) */
.pix{max-width:460px}
.pix-valor{font-size:52px;font-weight:800;letter-spacing:-.06em;line-height:1}
.pix-valor sup{font-size:16px;font-weight:400;vertical-align:top;letter-spacing:0;margin-right:7px;line-height:1.6}
.pix-valor span{font-size:12px;font-weight:400;color:var(--muted);letter-spacing:0;margin-left:6px}
.pix-plano{color:var(--muted);font-size:12.5px;margin-top:8px}
.pix-qr{width:224px;height:224px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px;margin:28px 0 18px;display:block}
.pix-code{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px;font-family:ui-monospace,Menlo,monospace;font-size:11px;line-height:1.6;word-break:break-all;color:var(--muted);margin-bottom:14px}
.pix-status{display:flex;align-items:center;gap:10px;padding:14px 16px;border:1px solid #bfe3cf;background:#f1faf4;border-radius:10px;font-size:12.5px;color:#166534;margin-top:26px}
.pix-status i{width:9px;height:9px;border-radius:50%;background:#1f9d63;animation:pulso 1.6s ease-in-out infinite}
@keyframes pulso{0%,100%{opacity:1}50%{opacity:.35}}
.pix-timer{font-size:11.5px;color:var(--muted);margin-top:10px}
.pix-como{margin-top:32px;border-top:1px solid var(--line);padding-top:24px}
.pix-como h3{font-size:9px;font-weight:800;letter-spacing:.2em;color:var(--muted);margin-bottom:16px}
.pix-como div{display:flex;gap:12px;font-size:12.5px;color:var(--ink);margin-bottom:10px;line-height:1.5}
.pix-como b{color:var(--blue);font-weight:800}
.pix-boleto{display:inline-block;font-size:12px;font-weight:700;color:var(--blue);border-bottom:1px solid var(--line);padding-bottom:8px}

/* Passos 2 e 3: campo de e-mail ocupando 800px é campo difícil de ler. */
.form-estreito{max-width:680px}

/* ── Login ─────────────────────────────────────────────── */
.auth-main.centro{justify-content:center}
.aside-nota{margin-top:auto;border-top:1px solid rgba(255,255,255,.16);padding-top:22px;font-size:11.5px;line-height:1.75;color:rgba(255,255,255,.55)}
.aside-nota strong{display:block;color:#fff;font-size:12px;margin-bottom:6px}
.aside-nota a{color:#5b9bff;font-weight:700}
.login-form{max-width:420px}
.login-form .linha{margin-bottom:20px}
.login-links{margin-top:26px;display:flex;flex-direction:column;gap:8px;font-size:12.5px;color:var(--muted)}
.login-links a{color:var(--blue);font-weight:700}

/* ── Responsivo ────────────────────────────────────────── */
@media(max-width:1040px){
  .auth{grid-template-columns:1fr}
  .auth-aside{position:relative;height:auto;padding:36px 24px 32px}
  .auth-aside h1{font-size:32px;margin:12px 0 0}
  .auth-aside>p,.resumo ul,.step-t span{display:none}
  .auth-aside-top{margin-bottom:28px}
  .steps{display:flex;gap:0;margin:26px 0 0;overflow:auto}
  .steps li{flex-direction:column;align-items:flex-start;gap:10px;padding:0 26px 0 0}
  .steps li:not(:last-child)::after{left:31px;top:15px;bottom:auto;width:14px;height:1px}
  /* Em coluna, flex-basis vira altura: sem largura explícita o círculo do
     passo estica e vira uma elipse. */
  .step-n{flex:none;width:31px}
  .resumo{margin-top:26px;padding-top:18px}
  .auth-main{padding:40px 24px 56px;max-width:none}
  .auth-back{margin-bottom:26px}
  .progress{margin:26px 0 32px}
}
@media(max-width:620px){
  .linha.c2{grid-template-columns:1fr}
  .planos{grid-template-columns:1fr}
  .acoes{flex-wrap:wrap}
  .btn{min-width:0;flex:1}
  .pix-valor{font-size:42px}
}