:root{
  --bg:#FDFCFA; --surface:#F4F1EC; --line:#DDD6CC; --ink:#3B3835; --ink-2:#5C564F; --muted:#7A726A;
  --accent:#9C8471; --accent-ink:#FFFFFF; --pin:#8A6E57; --ok:#5F7359; --new:#A2673F;
  --placeholder:#EEE9E2;
  --display:'Josefin Sans', 'Century Gothic', 'Futura', Arial, sans-serif;
  --body:'Jost', 'Avenir Next', 'Segoe UI', Arial, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#1D1B19; --surface:#26231F; --line:#3A3631; --ink:#ECE6DE; --ink-2:#C9C1B6; --muted:#A39A8F;
    --accent:#C4AE98; --accent-ink:#1D1B19; --pin:#C9A98A; --ok:#9DB294; --new:#D79B72; --placeholder:#2C2925;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#1D1B19; --surface:#26231F; --line:#3A3631; --ink:#ECE6DE; --ink-2:#C9C1B6; --muted:#A39A8F;
  --accent:#C4AE98; --accent-ink:#1D1B19; --pin:#C9A98A; --ok:#9DB294; --new:#D79B72; --placeholder:#2C2925;
}
*{box-sizing:border-box}
body{background:var(--bg); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.6; margin:0; padding-inline:clamp(16px,4vw,56px)}
.wrap{max-width:1180px; margin:0 auto}
h1,h2,h3{font-family:var(--display); font-weight:300; letter-spacing:.14em; text-transform:uppercase; text-wrap:balance; margin:0}
h1{font-size:clamp(28px,4.2vw,46px); line-height:1.2}
h2{font-size:clamp(20px,2.4vw,26px); line-height:1.3}
h3{font-size:15px; letter-spacing:.18em}
p{margin:0}
.label{font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
.lead{font-size:18px; color:var(--ink-2); max-width:62ch}
button,.btn{font:inherit; cursor:pointer}
.btn{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--ink); background:transparent; color:var(--ink); padding:10px 18px; font-size:13px; letter-spacing:.16em; text-transform:uppercase}
.btn.solid{background:var(--ink); color:var(--bg)}
.btn.small{padding:6px 12px; font-size:11px}
.btn:focus-visible,button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
a{color:inherit}
/* header */
.demo-bar{font-size:12px; letter-spacing:.08em; color:var(--muted); text-align:center; padding-block:8px; border-bottom:1px solid var(--line)}
header.site{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-block:22px; border-bottom:1px solid var(--line)}
.brand{display:flex; flex-direction:column; line-height:1.1; background:none; border:0; color:var(--ink); text-align:left; padding:0}
.brand b{font-family:var(--display); font-weight:300; font-size:26px; letter-spacing:.3em}
.brand span{font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); margin-top:4px}
nav.main{display:flex; gap:clamp(12px,2.4vw,28px); flex-wrap:wrap; align-items:center}
nav.main button{background:none; border:0; color:var(--ink-2); font-size:12px; letter-spacing:.2em; text-transform:uppercase; padding:4px 0; border-bottom:1px solid transparent}
nav.main button[aria-current="page"]{color:var(--ink); border-bottom-color:var(--ink)}
main{padding-block:48px 72px}
section.view{display:flex; flex-direction:column; gap:48px}
/* home */
.intro{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:end}
.intro .meta{display:flex; flex-direction:column; gap:14px; border-left:1px solid var(--line); padding-left:24px}
.grid-projects{display:grid; grid-template-columns:repeat(3,1fr); gap:28px 24px}
.proj{display:flex; flex-direction:column; gap:10px; background:none; border:0; padding:0; text-align:left; color:var(--ink)}
.ph{background:var(--placeholder); border:1px dashed var(--line); display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:13px; text-align:center; padding:16px; aspect-ratio:4/5; width:100%; max-width:100%}
.proj .ph{aspect-ratio:4/5}
.proj:nth-child(3n+2) .ph{aspect-ratio:4/4.4}
.proj h3{font-size:13px}
.proj p{font-size:13px; color:var(--muted)}
/* about/process */
.two-col{display:grid; grid-template-columns:.8fr 1.2fr; gap:48px}
.principles{display:grid; grid-template-columns:repeat(2,1fr); gap:28px 32px}
.principles div{border-top:1px solid var(--line); padding-top:14px; display:flex; flex-direction:column; gap:6px}
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:24px}
.steps div{border-top:1px solid var(--ink); padding-top:16px; display:flex; flex-direction:column; gap:8px}
.steps .n{font-family:var(--display); font-size:28px; font-weight:300; color:var(--accent)}
.contact-list{display:flex; flex-direction:column; gap:16px}
.contact-row{display:flex; gap:12px; align-items:center; flex-wrap:wrap; border-bottom:1px solid var(--line); padding-bottom:14px}
.contact-row .label{min-width:110px}
.contact-row span.v{font-size:18px; user-select:all}
/* login */
.login{max-width:440px; display:flex; flex-direction:column; gap:20px}
.field{display:flex; flex-direction:column; gap:6px}
.field input,.field textarea{font:inherit; color:var(--ink); background:var(--bg); border:1px solid var(--line); padding:12px 14px}
.seg{display:flex; border:1px solid var(--line)}
.seg button{flex:1; background:none; border:0; padding:10px; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2)}
.seg button[aria-pressed="true"]{background:var(--ink); color:var(--bg)}
.note{font-size:13px; color:var(--muted)}
/* client area */
.area-head{display:flex; justify-content:space-between; align-items:end; gap:16px; flex-wrap:wrap; border-bottom:1px solid var(--line); padding-bottom:20px}
.tabs{display:flex; gap:24px; flex-wrap:wrap}
.tabs button{background:none; border:0; padding:6px 0; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid transparent}
.tabs button[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--ink)}
.how{display:flex; gap:20px; flex-wrap:wrap; font-size:13px; color:var(--ink-2); background:var(--surface); padding:14px 18px}
.how b{font-family:var(--display); font-weight:400; color:var(--accent); margin-right:6px}
.viewer{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:32px; align-items:start}
.pages{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px}
.pages button{background:none; border:1px solid var(--line); color:var(--ink-2); padding:6px 12px; font-size:12px; letter-spacing:.1em; text-transform:uppercase}
.pages button[aria-current="true"]{border-color:var(--ink); color:var(--ink)}
.pages button .c{font-variant-numeric:tabular-nums; color:var(--pin); margin-left:4px}
.stage{position:relative; width:100%; cursor:crosshair; user-select:none; background:var(--surface)}
.stage img{display:block; width:100%; height:auto}
.stage .ph{aspect-ratio:16/10}
.pin{-webkit-appearance:none; appearance:none; position:absolute; width:28px; height:28px; border-radius:50%; transform:translate(-50%,-50%); background-color:var(--pin); background-image:none; color:#fff; font-size:12px; font-weight:500; display:flex; align-items:center; justify-content:center; border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.35); cursor:pointer; padding:0; font-variant-numeric:tabular-nums}
.pin.done{background:var(--ok)}
.pin.flash{animation:flash 1.2s ease 2}
@keyframes flash{50%{transform:translate(-50%,-50%) scale(1.35)}}
@media (prefers-reduced-motion: reduce){.pin.flash{animation:none; outline:3px solid var(--accent)}}
.pop{position:absolute; z-index:5; width:min(300px,80vw); background:var(--bg); border:1px solid var(--line); box-shadow:0 8px 24px rgba(0,0,0,.18); padding:14px; display:flex; flex-direction:column; gap:10px; cursor:default}
.pop textarea{font:inherit; font-size:14px; color:var(--ink); background:var(--bg); border:1px solid var(--line); padding:8px; min-height:84px; resize:vertical}
.pop .row{display:flex; gap:8px; justify-content:flex-end}
.caption{display:flex; flex-direction:column; gap:6px; margin-top:16px}
.caption p{color:var(--ink-2); max-width:70ch; font-size:15px}
.side{display:flex; flex-direction:column; gap:12px}
.cmt{display:flex; gap:12px; border-top:1px solid var(--line); padding-top:12px; background:none; border-left:0; border-right:0; border-bottom:0; text-align:left; color:var(--ink); width:100%}
.cmt .num{flex:none; width:24px; height:24px; border-radius:50%; background:var(--pin); color:#fff; font-size:11px; display:flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums}
.cmt.done .num{background:var(--ok)}
.cmt .t{font-size:14px}
.cmt .m{font-size:12px; color:var(--muted)}
.empty{font-size:14px; color:var(--muted)}
.timeline{display:grid; grid-template-columns:repeat(4,1fr); gap:0}
.timeline div{border-top:3px solid var(--line); padding:16px 16px 0 0; display:flex; flex-direction:column; gap:6px}
.timeline div.done{border-top-color:var(--ink-2)}
.timeline div.now{border-top-color:var(--accent)}
.state{font-size:11px; letter-spacing:.18em; text-transform:uppercase}
.state.now{color:var(--accent)}
.files{display:flex; flex-direction:column}
.file{display:grid; grid-template-columns:1fr auto auto; gap:16px; align-items:center; border-top:1px solid var(--line); padding-block:16px}
.file .d{font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums}
/* office */
.stats{display:flex; gap:32px; flex-wrap:wrap}
.stats div{display:flex; flex-direction:column}
.stats b{font-family:var(--display); font-weight:300; font-size:34px; font-variant-numeric:tabular-nums}
.filters{display:flex; gap:8px; flex-wrap:wrap}
.table-wrap{overflow-x:auto}
table{border-collapse:collapse; width:100%; min-width:720px; font-size:14px}
th{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); font-weight:400; text-align:left; padding:10px 12px; border-bottom:1px solid var(--ink)}
td{padding:14px 12px; border-bottom:1px solid var(--line); vertical-align:top}
td.date{font-variant-numeric:tabular-nums; color:var(--muted); white-space:nowrap}
.chip{display:inline-block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; padding:3px 8px; border:1px solid currentColor}
.chip.new{color:var(--new)} .chip.done{color:var(--ok)}
.linkish{background:none; border:0; padding:0; color:var(--ink); text-decoration:underline; text-underline-offset:3px; font-size:13px}
footer.site{border-top:1px solid var(--line); padding-block:28px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:center; font-size:13px; color:var(--muted)}
footer .logo{background:#FDFCFA; padding:6px 10px; display:inline-flex}
footer .logo img{height:56px; width:auto}
@media (max-width:860px){
  .intro,.two-col,.viewer{grid-template-columns:1fr}
  .grid-projects{grid-template-columns:repeat(2,1fr)}
  .steps,.timeline{grid-template-columns:repeat(2,1fr); row-gap:24px}
  .principles{grid-template-columns:1fr}
}
@media (max-width:480px){
  .grid-projects{grid-template-columns:1fr}
  .steps,.timeline{grid-template-columns:1fr}
  .file{grid-template-columns:1fr; gap:6px}
}

/* ===== versão funcional: componentes novos (mesmos tokens do protótipo) ===== */
img{max-width:100%}
.proj .thumb{width:100%;display:block;object-fit:cover;aspect-ratio:4/5}
.proj:nth-child(3n+2) .thumb{aspect-ratio:4/4.4}
.portrait{width:100%;max-width:360px;display:block;aspect-ratio:4/5;object-fit:cover}
.card{border:1px solid var(--line);padding:20px;display:flex;flex-direction:column;gap:14px;background:var(--bg)}
.card.cred{background:var(--surface);border-color:var(--accent)}
.card h3{font-size:13px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field select{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);padding:12px 14px}
.field select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.field input[type=file]{padding:8px;font-size:14px}
.field textarea{min-height:96px;resize:vertical}
.checks{display:flex;flex-wrap:wrap;gap:8px 22px}
.checks label{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--ink-2)}
.msg-err{color:var(--new);font-size:14px}
.msg-ok{color:var(--ok);font-size:14px}
.pagecard{border-top:1px solid var(--line);padding-top:18px;display:grid;grid-template-columns:220px minmax(0,1fr);gap:22px}
.pagecard .thumb-sm{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--placeholder);display:block}
.pagecard .ph{aspect-ratio:16/10;padding:8px;font-size:12px}
.pagecard .stack{display:flex;flex-direction:column;gap:12px}
.row-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.btn.danger{border-color:var(--new);color:var(--new)}
.btn[disabled]{opacity:.5;cursor:default}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 18px;font-size:13px;letter-spacing:.08em;z-index:50;max-width:90vw;text-align:center}
.cred-line{display:flex;gap:12px;flex-wrap:wrap;align-items:baseline}
.cred-line .label{min-width:70px}
.cred-line .v{font-size:18px;user-select:all;word-break:break-all}
.subhead{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap}
.projlist{display:flex;flex-direction:column}
.projrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;border-top:1px solid var(--line);padding-block:16px}
.projrow .meta{display:flex;flex-direction:column;gap:4px}
.chip.off{color:var(--muted)}
.inline-form{display:flex;gap:12px;flex-wrap:wrap;align-items:end}
.inline-form .field{flex:1 1 200px}
.switch{background:none;border:0;padding:0;color:var(--ink-2);font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-decoration:underline;text-underline-offset:3px}
.pill-row{display:flex;gap:8px;flex-wrap:wrap}
.tabs.wrap-tabs{row-gap:10px}
@media (max-width:860px){.grid2{grid-template-columns:1fr}.pagecard{grid-template-columns:1fr}.projrow{grid-template-columns:1fr}}
#pages,#portfolio{display:flex;flex-direction:column;gap:28px}

/* ===== orçamento, WhatsApp, depoimentos, aprovação, escolhas, contrato, resumo ===== */
.chip.wait{color:var(--accent)} .chip.late{color:var(--new)}
.late{color:var(--new);font-size:13px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink-2);line-height:1.5}
.consent input{margin-top:4px;flex:none}
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* botão flutuante de WhatsApp */
.wa-float{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:40;display:inline-flex;align-items:center;gap:10px;background:#25623F;color:#fff;text-decoration:none;padding:12px 18px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;box-shadow:0 4px 16px rgba(0,0,0,.25);border-radius:999px}
.wa-float svg{width:20px;height:20px;flex:none}
.wa-float:hover{background:#1D4F32}
.wa-float:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (max-width:480px){.wa-float span{display:none}.wa-float{padding:14px;border-radius:50%}}
/* contato + formulário de orçamento */
.contact-split{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:start}
.lead-form{display:flex;flex-direction:column;gap:16px;position:relative}
.lead-form h2{margin-bottom:4px}
/* depoimentos */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px}
.quote{margin:0;border-top:1px solid var(--ink);padding-top:18px;display:flex;flex-direction:column;gap:14px}
.quote blockquote{margin:0;font-size:17px;line-height:1.65;color:var(--ink-2)}
.quote figcaption{display:flex;flex-direction:column;gap:2px;font-size:13px;color:var(--muted)}
.quote figcaption b{font-weight:500;color:var(--ink);letter-spacing:.08em;text-transform:uppercase;font-size:12px}
/* aprovação de etapa */
.banner{border:1px solid var(--accent);background:var(--surface);padding:20px;display:flex;flex-direction:column;gap:14px}
.banner h3{margin-top:4px}
.decision{font-size:12px;margin-top:4px}
.decision.approved{color:var(--ok)} .decision.adjust{color:var(--new)}
/* respostas a comentários */
.reply{margin-left:36px;border-left:2px solid var(--line);padding:2px 0 2px 12px;display:flex;flex-direction:column;gap:2px;font-size:14px}
.reply.office{border-left-color:var(--accent)}
.reply .m{font-size:12px;color:var(--muted)}
.reply-actions{margin-left:36px;display:flex;gap:16px;padding-block:4px}
.reply-form{margin-left:36px;display:flex;flex-direction:column;gap:8px}
.reply-form textarea{font:inherit;font-size:14px;color:var(--ink);background:var(--bg);border:1px solid var(--line);padding:8px;min-height:70px;resize:vertical}
.reply-form .row{display:flex;gap:8px;justify-content:flex-end}
/* escolhas e pendências */
.choices{display:flex;flex-direction:column;gap:16px}
.choice{border:1px solid var(--line);border-left-width:3px;padding:18px;display:flex;flex-direction:column;gap:12px;background:var(--bg)}
.choice.pendente{border-left-color:var(--accent)}
.choice.respondido{border-left-color:var(--new)}
.choice.confirmado{border-left-color:var(--ok)}
.choice-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:flex-start}
.choice-head h3{font-size:14px;margin-top:4px}
.choice-meta{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.choice-form{display:flex;flex-direction:column;gap:12px}
/* contrato e parcelas */
.payrows{display:flex;flex-direction:column;gap:14px}
.payrow{border-top:1px solid var(--line);padding-top:14px;display:grid;grid-template-columns:2fr 1.2fr 1.2fr 1.2fr;gap:12px;align-items:end}
.payrow .row-actions,.payrow .msg-err{grid-column:1/-1}
.field select{max-width:100%}
/* resumo do painel */
.dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:20px;align-items:start}
.dash-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.dash-row{border-top:1px solid var(--line);padding-top:10px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;font-size:14px}
/* contatos (funil) */
.leads{display:flex;flex-direction:column;gap:12px}
details.lead{padding:0;gap:0;max-width:none;font-size:16px;color:var(--ink)}
details.lead>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:16px 20px}
details.lead>summary::-webkit-details-marker{display:none}
details.lead>summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.lead-name{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.lead-right{display:flex;gap:12px;align-items:center}
.lead-body{border-top:1px solid var(--line);padding:18px 20px;display:flex;flex-direction:column;gap:16px}
.lead-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.lead-info>div{display:flex;flex-direction:column;gap:2px}
.lead-convert{display:flex;flex-direction:column;gap:12px;border-top:1px dashed var(--line);padding-top:14px}
.chip.lead-novo{color:var(--new)} .chip.lead-conversa{color:var(--accent)} .chip.lead-proposta{color:var(--pin)} .chip.lead-fechado{color:var(--ok)} .chip.lead-perdido{color:var(--muted)}
@media (max-width:860px){
  .contact-split{grid-template-columns:1fr;gap:32px}
  .grid3{grid-template-columns:1fr}
  .payrow{grid-template-columns:1fr 1fr}
  .reply,.reply-actions,.reply-form{margin-left:12px}
}
@media (max-width:480px){.dash-grid{grid-template-columns:1fr}.payrow{grid-template-columns:1fr}}
[hidden]{display:none!important}