/* ============================================================
   conta.html - bloco de estilos 1
   Mantem a aparencia original extraida do <style> inline.
   ============================================================ */
:root {
    --brand:#E05A39; --brand-soft:#FAECE7; --brand-strong:#B6431F;
    --bg:#F4F3F0; --surface:#FFFFFF; --panel:#FAFAF8;
    --text:#1A1A1A; --text-soft:#6B6B6B; --text-faint:#A8A6A0; --border:#E7E5E1;
    --av-green:#2BA36B;
    --radius-card:22px; --radius-field:14px; --radius-pill:999px;
    --shadow:0 24px 60px -24px rgba(20,18,16,.28), 0 2px 8px -2px rgba(20,18,16,.06);
    --ease:cubic-bezier(.22,.61,.36,1);
  }
  * { box-sizing:border-box; margin:0; padding:0; }
  body {
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    color:var(--text); min-height:100dvh; display:grid; place-items:center; padding:24px;
    background:radial-gradient(120% 80% at 50% -10%, color-mix(in srgb,var(--brand) 7%,transparent), transparent 60%), var(--bg);
    -webkit-font-smoothing:antialiased;
  }
  .modal { width:100%; max-width:1340px; background:var(--surface); border:.5px solid var(--border); border-radius:var(--radius-card); box-shadow:var(--shadow); overflow:hidden; animation:rise .55s var(--ease) both; }
  @keyframes rise { from{opacity:0; transform:translateY(16px) scale(.99);} to{opacity:1; transform:none;} }

  .head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 22px; border-bottom:.5px solid var(--border); }
  .head h1 { font-size:17px; font-weight:700; letter-spacing:-.2px; }
  .close { width:34px; height:34px; border-radius:50%; border:none; background:transparent; color:var(--text-soft); font-size:20px; cursor:pointer; display:grid; place-items:center; transition:background .2s var(--ease), color .2s var(--ease); }
  .close:hover { background:var(--brand-soft); color:var(--brand-strong); }

  .body { display:grid; grid-template-columns:240px 1fr 270px; }
  .col-left { padding:22px 20px; border-right:.5px solid var(--border); }
  .col-mid { padding:26px 28px; min-width:0; }
  .col-right { padding:22px 20px; border-left:.5px solid var(--border); background:var(--panel); }

  .step-count { font-size:12px; color:var(--text-soft); font-weight:500; }
  .bar { height:6px; border-radius:var(--radius-pill); background:var(--border); margin:8px 0 20px; overflow:hidden; }
  .bar > span { display:block; height:100%; width:100%; background:var(--brand); border-radius:inherit; }
  .steps { list-style:none; display:flex; flex-direction:column; gap:13px; }
  .steps li { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--text-faint); }
  .steps li .dot { width:22px; height:22px; border-radius:50%; flex:none; display:grid; place-items:center; font-size:12px; font-weight:600; background:var(--border); color:var(--text-soft); }
  .steps li.active { color:var(--text); font-weight:500; }
  .steps li.active .dot { background:var(--brand); color:#fff; }
  .steps li.done .dot { background:color-mix(in srgb,var(--brand) 18%,transparent); color:var(--brand-strong); }
  .hint { margin-top:22px; font-size:12px; line-height:1.5; color:var(--text-soft); }

  /* ---- Formulário ---- */
  .tabs { display:flex; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-pill); padding:4px; gap:4px; margin:0 auto 22px; max-width:360px; }
  .tabs button { flex:1; border:none; background:transparent; font:inherit; font-size:13.5px; font-weight:600; color:var(--text-soft); padding:9px 6px; border-radius:var(--radius-pill); cursor:pointer; transition:background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease); }
  .tabs button.active { background:var(--surface); color:var(--text); box-shadow:0 1px 5px rgba(20,18,16,.12); }

  form { display:flex; flex-direction:column; gap:14px; max-width:520px; margin:0 auto; animation:fade .3s var(--ease) both; }
  @keyframes fade { from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }
  .row2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .field { width:100%; font:inherit; font-size:14px; padding:14px 16px; border:1px solid var(--border); border-radius:var(--radius-field); background:var(--panel); color:var(--text); transition:border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease); }
  .field::placeholder { color:var(--text-faint); }
  .field:focus { outline:none; border-color:var(--brand); background:#fff; box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 14%,transparent); }
  .coupon-link { display:inline-flex; align-items:center; gap:8px; align-self:flex-start; color:var(--brand-strong); font:inherit; font-size:14px; font-weight:600; background:none; border:none; cursor:pointer; padding:4px 0; }
  .coupon-link svg { width:17px; height:17px; }
  .coupon-link:hover { text-decoration:underline; }
  #coupon { display:none; }
  #coupon.show { display:block; }
  .forgot { text-align:center; font-size:13.5px; color:var(--text-soft); margin-top:2px; }
  .forgot a { color:var(--text); font-weight:500; cursor:pointer; }
  .forgot a:hover { color:var(--brand-strong); }
  .btn-primary { font:inherit; font-size:15px; font-weight:600; padding:15px; border:none; border-radius:var(--radius-pill); cursor:pointer; background:var(--brand); color:#fff; box-shadow:0 12px 24px -10px color-mix(in srgb,var(--brand) 70%,transparent); transition:transform .25s var(--ease), background .25s var(--ease), opacity .25s var(--ease); }
  .btn-primary:hover:not(:disabled) { background:var(--brand-strong); transform:translateY(-2px); }
  .btn-primary:disabled { opacity:.4; cursor:default; box-shadow:none; }
  .entrar-wrap { display:flex; justify-content:center; margin-top:14px; }
  .entrar-wrap .btn-primary { min-width:200px; }

  /* ---- Resumo ---- */
  .col-right h3 { font-size:14px; font-weight:700; margin-bottom:14px; }
  .sum { list-style:none; display:flex; flex-direction:column; }
  .sum li { display:flex; justify-content:space-between; gap:10px; font-size:13px; padding:9px 0; border-bottom:.5px solid var(--border); }
  .sum li span:first-child { color:var(--text-soft); }
  .sum li span:last-child { font-weight:500; text-align:right; }
  .sum li.total { border-bottom:none; margin-top:4px; font-size:15px; }
  .sum li.total span:last-child { color:var(--brand-strong); font-weight:700; }
  .sum li.caption { border-bottom:none; padding:9px 0 2px; color:var(--text-soft); font-weight:600; font-size:12px; }
  .sum li.sub { border-bottom:none; padding:4px 0 4px 2px; font-size:12.5px; }
  .sum li.sub span:first-child { color:var(--text); }
  .sum li.sub span:first-child::before { content:"·"; margin-right:6px; color:var(--text-faint); }
  .sum li.sub span:last-child { color:var(--text-soft); font-weight:500; }
  .sum li.divider { border-top:.5px solid var(--border); padding-top:9px; }
  .sum-empty { font-size:12.5px; line-height:1.5; color:var(--text-faint); padding:6px 0; }

  .foot { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 22px; border-top:.5px solid var(--border); }
  .nav-btn { display:inline-flex; align-items:center; gap:8px; font:inherit; font-size:14px; font-weight:600; padding:12px 20px; border-radius:var(--radius-pill); cursor:pointer; border:1px solid var(--border); background:var(--surface); color:var(--text); transition:transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease); }
  .nav-btn:hover { background:var(--panel); border-color:var(--brand); color:var(--brand-strong); transform:translateY(-1px); }
  .cta { display:inline-flex; align-items:center; gap:8px; font:inherit; font-size:14px; font-weight:600; padding:12px 24px; border:none; border-radius:var(--radius-pill); cursor:pointer; background:var(--brand); color:#fff; box-shadow:0 12px 24px -10px color-mix(in srgb,var(--brand) 70%,transparent); transition:transform .25s var(--ease), background .25s var(--ease), opacity .25s var(--ease); }
  .cta:hover:not(:disabled) { background:var(--brand-strong); transform:translateY(-2px); }
  .cta:disabled { opacity:.4; cursor:default; box-shadow:none; }

  /* sucesso (no centro, mantendo etapa e resumo) */
  .ok { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:30px 10px; gap:10px; min-height:300px; animation:fade .4s var(--ease) both; }
  .ok .badge { width:64px; height:64px; border-radius:50%; background:color-mix(in srgb,var(--av-green) 16%,#fff); color:var(--av-green); display:grid; place-items:center; font-size:30px; font-weight:700; margin-bottom:6px; animation:pop .4s var(--ease); }
  @keyframes pop { 0%{transform:scale(.7);} 60%{transform:scale(1.1);} 100%{transform:scale(1);} }
  .ok h2 { font-size:20px; font-weight:700; }
  .ok p { font-size:14px; color:var(--text-soft); max-width:40ch; line-height:1.55; }

  @media (max-width:860px) {
    .body { grid-template-columns:1fr; }
    .col-left { border-right:none; border-bottom:.5px solid var(--border); }
    .col-left .steps { flex-direction:row; flex-wrap:wrap; gap:10px 16px; }
    .col-right { border-left:none; border-top:.5px solid var(--border); }
    .hint { display:none; }
  }
  @media (max-width:520px) {
    body { padding:0; }
    .modal { border-radius:0; min-height:100dvh; }
    .steps li span.lbl { display:none; }
  }
  .ok { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:30px 10px; gap:10px; min-height:320px; animation:fade .4s var(--ease) both; }
  .ok .badge { width:66px; height:66px; border-radius:50%; background:color-mix(in srgb,#2BA36B 16%,#fff); color:#2BA36B; display:grid; place-items:center; font-size:32px; font-weight:700; margin-bottom:6px; animation:pop .4s var(--ease); }
  @keyframes pop { 0%{transform:scale(.7);} 60%{transform:scale(1.1);} 100%{transform:scale(1);} }
  .ok h2 { font-size:21px; font-weight:700; }
  .ok p { font-size:14px; color:var(--text-soft); max-width:42ch; line-height:1.55; }
  .ok .note { font-size:13px; color:var(--text-soft); }

  @media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; } }

  .demo { position:fixed; top:14px; right:14px; display:flex; gap:7px; background:rgba(255,255,255,.85); backdrop-filter:blur(6px); border:.5px solid var(--border); border-radius:var(--radius-pill); padding:7px 10px; }
  .demo button { width:18px; height:18px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px var(--border); cursor:pointer; }
  @media (max-width:520px){ .demo{ display:none; } }