/* Página do cliente — réplica do fluxo /b/<slug> do Khrono, com dados de demonstração. Tema claro é o padrão. */
:root{
  --bg:#f1f3ef; --surf:#fff; --muted:#f4f6f2; --ink:#18201c; --soft:#667069; --dim:#8a938f; --line:rgba(24,32,28,.14); --line2:rgba(24,32,28,.08);
  --acc:#6fb596; --acc-dk:#4f8f74; --acc-soft:#e3efe8; --acc-text:#2f7a5c; --r:6px; --rc:12px; --sans:"Instrument Sans",system-ui,sans-serif;
  color-scheme:light;
}
:root[data-theme="dark"]{ --bg:#141816; --surf:#1c211e; --muted:#202622; --ink:#eef2ee; --soft:#a5ada8; --dim:#7d8581; --line:rgba(255,255,255,.14); --line2:rgba(255,255,255,.08); --acc-soft:#1f3a30; --acc-text:#8fd0b3; color-scheme:dark }
*{ box-sizing:border-box; margin:0; padding:0 }
html{ -webkit-text-size-adjust:100% }
body{ font-family:var(--sans); background:var(--bg); color:var(--ink); font-size:15px; line-height:1.45; min-height:100dvh; -webkit-font-smoothing:antialiased }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
input,textarea{ font:inherit; color:inherit }
svg{ display:block }

/* topo */
.top{ position:sticky; top:0; z-index:10; height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 16px; background:color-mix(in srgb, var(--surf) 94%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line2) }
.logo img{ height:32px; width:auto; display:block } :root[data-theme="dark"] .logo img{ filter:invert(1) }
.tools{ display:flex; gap:6px }
.tb{ width:40px; height:40px; border:1px solid var(--line); border-radius:8px; background:var(--surf); display:grid; place-items:center }
.tb svg{ width:20px; height:20px; fill:none; stroke:var(--ink); stroke-width:1.8; stroke-linecap:round } .tb.lang svg{ width:22px; height:16px; stroke:none }
.tb .sun{ display:none } :root[data-theme="dark"] .tb .sun{ display:block } :root[data-theme="dark"] .tb .moon{ display:none }

/* ============ recepção: capa por nicho, marca do negócio e cartão de boas-vindas ============ */
:root{ --tinta:#1f4a3a }
:root[data-nicho="salao"]{ --tinta:#4a2f3f } :root[data-nicho="clinica"]{ --tinta:#1d4f52 }
body{ overflow-x:hidden }
body.welcome-on .top{ position:absolute; inset:0 0 auto 0; width:100%; background:transparent; border-bottom:0; z-index:5 }
body.welcome-on .top .tb{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.28); backdrop-filter:blur(8px) }
body.welcome-on .top .tb svg{ stroke:#fff } body.welcome-on .top .tb.lang svg{ stroke:none } body.welcome-on .logo img{ filter:brightness(0) invert(1) }

.cover{ position:relative; min-height:min(74vh,560px); display:flex; align-items:flex-end; padding:96px 18px 30px; color:#fff; overflow:hidden; isolation:isolate }
.cover .bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.06); animation:kb 22s ease-in-out infinite alternate }
@keyframes kb{ to{ transform:scale(1.14) translateY(-1.5%) } }
.cover .veil{ position:absolute; inset:0; background:
  radial-gradient(130% 85% at 78% 4%, transparent 22%, color-mix(in oklab, var(--tinta) 78%, transparent) 100%),
  linear-gradient(200deg, color-mix(in oklab, var(--tinta) 45%, transparent) 0%, transparent 52%),
  linear-gradient(180deg, rgba(10,14,12,.4) 0%, rgba(10,14,12,.12) 30%, color-mix(in oklab, var(--tinta) 55%, rgba(10,14,12,.72)) 80%, rgba(8,11,10,.94) 100%) }
.cover .grain{ position:absolute; inset:0; opacity:.16; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E") }
.cover .ring{ position:absolute; right:-70px; top:-60px; width:320px; height:320px; border-radius:50%; border:1px solid rgba(255,255,255,.22); pointer-events:none }
.cover .ring::before,.cover .ring::after{ content:''; position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,.14) }
.cover .ring::before{ inset:26px } .cover .ring::after{ inset:58px; border-style:dashed }
.cIn{ position:relative; z-index:1; width:100% }
.mark{ display:grid; place-items:center; width:54px; height:54px; border-radius:16px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3); backdrop-filter:blur(10px); margin-bottom:16px; animation:up .7s var(--ease) both }
.mark svg{ width:26px; height:26px; fill:none; stroke:#fff; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round }
.kicker{ display:block; font-family:var(--mono,inherit); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.82); animation:up .7s var(--ease) .06s both }
.cover h1{ font-size:clamp(34px,10vw,44px); font-weight:500; letter-spacing:-.035em; line-height:1.02; margin:8px 0 10px; text-wrap:balance; animation:up .7s var(--ease) .12s both }
.cover .tag{ font-size:15.5px; line-height:1.5; max-width:30ch; color:rgba(255,255,255,.9); animation:up .7s var(--ease) .18s both }
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; animation:up .7s var(--ease) .24s both }
.chip{ display:inline-flex; align-items:center; gap:7px; padding:8px 12px; border-radius:99px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(10px); font-size:13px; color:#fff; text-decoration:none; transition:background .2s, transform .12s }
a.chip:active{ transform:scale(.97) } a.chip{ background:rgba(255,255,255,.2); font-weight:500 }
.chip svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round } .chip small{ opacity:.75 }
.chip.st i{ width:7px; height:7px; border-radius:50%; background:#79dcae; box-shadow:0 0 0 3px rgba(121,220,174,.25); animation:pulse 2.4s ease-in-out infinite }
.chip.st.off i{ background:#e0a97e; box-shadow:0 0 0 3px rgba(224,169,126,.22); animation:none }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 2px rgba(121,220,174,.3) } 50%{ box-shadow:0 0 0 6px rgba(121,220,174,0) } }
@keyframes up{ from{ opacity:0; transform:translateY(14px) } }

.welcome{ position:relative; z-index:2; margin-top:-26px; border-radius:24px 24px 0 0; background:var(--bg); padding:26px 18px 30px; box-shadow:0 -22px 40px -28px rgba(0,0,0,.45) }
.welcome::before{ content:''; display:block; width:40px; height:4px; border-radius:99px; background:var(--line); margin:-8px auto 20px }
.wHead .eyebrow{ color:var(--acc-text) } .wHead h2{ font-size:26px; font-weight:500; letter-spacing:-.025em; margin:6px 0 8px }
.wHead .sub{ color:var(--soft); font-size:15px; max-width:32ch }
.welcome .btn.lg{ height:54px; font-size:16px; margin-top:20px; box-shadow:0 14px 30px -18px color-mix(in oklab, var(--acc-dk) 90%, transparent) }
.welcome .btn.ghost{ background:var(--surf); border-color:var(--line) }
.perks{ list-style:none; display:grid; gap:2px; margin-top:22px }
.perks li{ display:flex; gap:12px; align-items:flex-start; padding:12px 2px; border-bottom:1px solid var(--line2) } .perks li:last-child{ border:0 }
.perks svg{ width:19px; height:19px; flex:none; margin-top:1px; fill:none; stroke:var(--acc-text); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round }
.perks span{ display:flex; flex-direction:column; font-size:13.5px; color:var(--soft); line-height:1.4 } .perks b{ font-weight:500; font-size:14.5px; color:var(--ink) }
.sep2{ display:flex; align-items:center; gap:12px; margin:20px 0 14px; color:var(--dim); font-size:12px }
.sep2::before,.sep2::after{ content:''; flex:1; height:1px; background:var(--line2) }
.fine2{ margin-top:14px; font-size:12px; color:var(--dim); text-align:center; line-height:1.5 } .fine2 a{ color:var(--acc-text) }
@media (min-width:720px){
  .cover{ min-height:460px; padding:110px 40px 40px } .cIn{ max-width:760px; margin:0 auto } .cover .ring{ width:420px; height:420px; right:-80px }
  .welcome{ max-width:620px; margin:-34px auto 0; border-radius:26px; padding:30px 34px 34px }
  .welcome::before{ display:none }
}
/* botões */
.btn{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; height:44px; padding:0 14px; border-radius:var(--r); border:1px solid var(--line); background:var(--surf); font-weight:500; font-size:15px; transition:transform .12s, background .2s, opacity .2s }
.btn:active{ transform:scale(.985) } .btn svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.btn.acc{ background:var(--acc-dk); border-color:var(--acc-dk); color:#fff } .btn.acc:disabled{ background:#a9cdbc; border-color:#a9cdbc; color:#fff; cursor:default }
.btn + .btn{ margin-top:12px }

/* cabeçalho do negócio + etapas */
.biz{ display:flex; align-items:center; gap:14px; padding:18px 16px 16px; border-bottom:1px solid var(--line2) }
.biz i{ width:44px; height:44px; border-radius:8px; background:var(--acc-soft); color:var(--acc-text); font-style:normal; font-weight:500; display:grid; place-items:center; font-size:14px; flex:none }
.biz small{ display:block; color:var(--soft); font-size:12px; text-transform:uppercase; letter-spacing:.04em } .biz b{ font-weight:500; font-size:20px; letter-spacing:-.01em }
.steps{ display:grid; grid-template-columns:repeat(4,1fr); padding:14px 8px 12px; border-bottom:1px solid var(--line2) }
.steps li{ list-style:none; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; font-size:12.5px; color:var(--soft) }
.steps li i{ width:34px; height:34px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; font-style:normal; font-size:13px; background:var(--surf); transition:background .3s, border-color .3s, color .3s }
.steps li i svg{ width:16px; height:16px; fill:none; stroke:#fff; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; display:none }
.steps li.on i,.steps li.done i{ background:var(--acc); border-color:var(--acc); color:#fff } .steps li.on{ color:var(--ink); font-weight:500 } .steps li.done i svg{ display:block } .steps li.done i span{ display:none }

/* corpo da etapa */
.wrap{ padding:22px 16px 110px } .wrap.done{ padding-bottom:32px }
.lbl{ color:var(--soft); font-size:12.5px; letter-spacing:.04em; text-transform:uppercase } .lbl.dim{ text-transform:none; letter-spacing:0; font-size:15px; margin-top:8px }
h2.q{ font-size:26px; font-weight:500; letter-spacing:-.02em; line-height:1.15; margin:6px 0 18px }
.list{ display:grid; gap:12px }
.opt{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; text-align:left; padding:16px 14px; background:var(--surf); border:1px solid var(--line2); border-radius:var(--rc); transition:border-color .2s, background .2s, transform .12s }
.opt:active{ transform:scale(.99) } .opt.on{ border-color:var(--acc); background:var(--acc-soft) }
.opt .t{ display:flex; flex-direction:column; gap:4px; min-width:0 } .opt .t b{ font-weight:500; font-size:17px } .opt .t span{ color:var(--soft); font-size:14px } .opt .t small{ display:flex; align-items:center; gap:6px; color:var(--soft); font-size:13.5px } .opt .t small svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8 } .opt .t em{ font-style:normal; font-weight:500; font-size:17px; margin-top:2px }
.opt .ck{ width:24px; height:24px; flex:none; border-radius:50%; border:1px solid var(--line); background:var(--surf); display:grid; place-items:center } .opt .ck.sq{ border-radius:6px }
.opt .ck svg{ width:14px; height:14px; fill:none; stroke:#fff; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; opacity:0 } .opt.on .ck{ background:var(--acc); border-color:var(--acc) } .opt.on .ck svg{ opacity:1 }
.opt .av{ width:44px; height:44px; border-radius:50%; flex:none; background:var(--acc-soft); color:var(--acc-text); display:grid; place-items:center; font-weight:500; font-size:14px; object-fit:cover }
.opt .row{ display:flex; align-items:center; gap:12px; min-width:0 }

/* calendário */
.cal{ background:var(--surf); border:1px solid var(--line2); border-radius:var(--rc); padding:12px 12px 10px }
.cal .mo{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px } .cal .mo b{ display:flex; align-items:center; gap:8px; font-weight:500; font-size:15px } .cal .mo b svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8 }
.cal .nb{ width:40px; height:40px; border-radius:8px; border:1px solid var(--line2); background:var(--muted); display:grid; place-items:center } .cal .nb svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2 } .cal .nb:disabled{ opacity:.4 }
.cal .wk,.cal .days{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px } .cal .wk span{ text-align:center; font-size:11px; color:var(--soft); text-transform:uppercase; padding:4px 0 8px }
.cal .d{ aspect-ratio:1; border-radius:8px; display:grid; place-items:center; font-size:15px; color:var(--dim); position:relative; border:1px solid transparent }
.cal .d.ok{ color:var(--ink); background:var(--acc-soft); border-color:color-mix(in srgb, var(--acc) 45%, transparent) } .cal .d.ok::after{ content:''; position:absolute; right:5px; bottom:5px; width:5px; height:5px; border-radius:50%; background:var(--acc) }
.cal .d.sel{ background:var(--acc); border-color:var(--acc); color:#fff } .cal .d.sel::after{ background:#fff }
.cal .leg{ display:flex; align-items:center; gap:8px; color:var(--soft); font-size:14px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line2) } .cal .leg::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--acc) }
.slots-h{ display:flex; align-items:center; gap:8px; font-weight:500; font-size:17px; margin:22px 0 4px } .slots-h svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8 }
.slots-d{ color:var(--soft); font-size:15px; margin-bottom:12px }
.slots{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px } .slots button{ height:44px; border-radius:8px; border:1px solid var(--line2); background:var(--surf); font-size:15px; font-weight:500 } .slots button.on{ background:var(--acc); border-color:var(--acc); color:#fff }
.empty{ color:var(--soft); font-size:14.5px; padding:12px 0 }

/* revisão */
.sum h3{ display:flex; align-items:center; gap:10px; font-weight:500; font-size:19px; margin-bottom:14px } .sum h3 svg{ width:20px; height:20px; fill:none; stroke:var(--acc-text); stroke-width:1.8 }
.sum .k{ color:var(--soft); font-size:14.5px } .sum .v{ font-size:17px; font-weight:500; margin-top:2px }
.sum .line{ display:flex; justify-content:space-between; align-items:baseline } .sum .g2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px }
.sum .tot{ display:flex; justify-content:space-between; align-items:baseline; margin-top:16px; padding-top:14px; border-top:1px solid var(--line2) } .sum .tot b{ font-size:24px; font-weight:500; color:var(--acc-text) }
.sep{ height:1px; background:var(--line2); margin:22px 0 }
.fld{ margin-bottom:16px } .fld label{ display:flex; align-items:center; gap:8px; font-size:15px; margin-bottom:8px } .fld label svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8 }
.inp{ width:100%; height:44px; padding:0 12px; border:1px solid var(--line); border-radius:var(--r); background:var(--surf); outline:none } .inp:focus{ border-color:var(--acc) } textarea.inp{ height:96px; padding:10px 12px; resize:vertical }
.inp.bad{ border-color:#c2483a }
.ccode{ display:flex; gap:20px; margin:4px 0 10px } .ccode label{ display:flex; align-items:center; gap:8px; font-size:15px; margin:0 } .ccode input{ width:18px; height:18px; accent-color:#2f7ad9 }
.tel{ display:flex } .tel .pre{ display:flex; align-items:center; gap:6px; padding:0 12px; border:1px solid var(--line); border-right:0; border-radius:var(--r) 0 0 var(--r); background:var(--muted); color:var(--soft); font-size:14px } .tel .inp{ border-radius:0 var(--r) var(--r) 0 }
.chk{ display:flex; align-items:center; gap:10px; font-size:15px; margin:6px 0 } .chk input{ width:18px; height:18px; accent-color:var(--acc-dk); flex:none } .chk a{ color:var(--acc-text) }
.pol h4{ font-weight:500; font-size:16px; margin-bottom:6px } .pol p{ color:var(--soft); font-size:14.5px }
.err{ color:#c2483a; font-size:13.5px; margin-top:6px; display:none } .fld.bad .err{ display:block }

/* barra de ações */
.bar{ position:fixed; left:0; right:0; bottom:0; z-index:9; display:flex; gap:10px; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(10px); border-top:1px solid var(--line2) }
.bar .btn{ width:auto; flex:1 } .bar .btn.back{ flex:0 0 auto; padding:0 16px }

/* sucesso */
.done .ring{ width:64px; height:64px; border-radius:50%; background:var(--acc); display:grid; place-items:center; margin:12px 0 18px; animation:pop .5s cubic-bezier(.34,1.56,.64,1) } .done .ring svg{ width:28px; height:28px; fill:none; stroke:#fff; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round }
.done h2{ font-size:26px; font-weight:500; letter-spacing:-.02em } .done .sub{ color:var(--soft); margin:6px 0 20px }
.done .card{ background:var(--surf); border:1px solid var(--line2); border-radius:var(--rc); padding:16px; margin-bottom:22px } .done .card .k{ color:var(--soft); font-size:13px } .done .card .v{ font-weight:500; margin-bottom:10px } .done .card .v:last-child{ margin:0 }
@keyframes pop{ from{ transform:scale(.6); opacity:0 } }
.powered{ background:var(--bg); display:flex; justify-content:center; align-items:center; gap:8px; padding:26px 16px; color:var(--dim); font-size:12px } .powered img{ height:14px; width:auto; opacity:.8 } :root[data-theme="dark"] .powered img{ filter:invert(1) }
.fade{ animation:fade .35s ease-out } @keyframes fade{ from{ opacity:0; transform:translateY(8px) } }
@media (prefers-reduced-motion:reduce){ .fade,.done .ring{ animation:none } }