/* Layout: papel milimetrado; etapa por tela; painel de progresso lateral (desktop) e trilha com ícones (celular); opções como cartões ilustrados */
:root{
  --paper:#F2F5F1; --paper-2:#E6EBE5; --card:#FBFCFA; --ink:#1E292C; --ink-2:#526063;
  --line:#C6CFC8; --grid:rgba(30,41,44,.045); --accent:#C27F14; --accent-ink:#FFFFFF; --sel:#FAEFD9; --warn:#9A3B1F; --ok:#2F6B4F;
  --road:#8E9692; --grass:#CFE3C4; --water:#BFE2EE; --wood:#D9B98C; --sun:#E3A21A; --dusk:#D2612A;
  --f-display:"Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --f-body:"Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --f-hand:"Architects Daughter", "Comic Sans MS", cursive;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#131A1C; --paper-2:#1B2427; --card:#182023; --ink:#E6ECEA; --ink-2:#A2AFAF;
  --line:#2E3A3D; --grid:rgba(230,236,234,.04); --accent:#E2A540; --accent-ink:#1A1306; --sel:#2C2416; --warn:#E48A6A; --ok:#7CC4A0;
  --road:#4A5254; --grass:#25392B; --water:#1E4250; --wood:#6B5136; --sun:#F0B83C; --dusk:#E57C4A; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#131A1C; --paper-2:#1B2427; --card:#182023; --ink:#E6ECEA; --ink-2:#A2AFAF;
  --line:#2E3A3D; --grid:rgba(230,236,234,.04); --accent:#E2A540; --accent-ink:#1A1306; --sel:#2C2416; --warn:#E48A6A; --ok:#7CC4A0;
  --road:#4A5254; --grass:#25392B; --water:#1E4250; --wood:#6B5136; --sun:#F0B83C; --dusk:#E57C4A; color-scheme:dark}

*{box-sizing:border-box}
body{
  background-color:var(--paper);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:24px 24px;
  color:var(--ink); font-family:var(--f-body); font-size:17px; line-height:1.5;
  padding-inline:16px; padding-block:0 48px; min-height:100%;
}
.wrap{max-width:1080px; margin:0 auto}
header.top{display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding-block:22px 10px; flex-wrap:wrap}
.brand{font-family:var(--f-display); font-weight:800; font-size:26px; letter-spacing:-.02em}
.brand span{color:var(--accent)}
.tag{font-family:var(--f-hand); color:var(--ink-2); font-size:16px}

/* ícones e ilustrações */
.ic{width:22px; height:22px; flex:none; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
svg.il{display:block; width:100%; height:auto; max-width:100%}
.il .s{stroke:var(--ink-2); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.il .sd{stroke:var(--ink-2); fill:none; stroke-width:1.4; stroke-dasharray:4 3}
.il .ink{stroke:var(--ink); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.il .a{stroke:var(--accent); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.il .ad{stroke:var(--accent); fill:none; stroke-width:1.6; stroke-dasharray:4 3}
.il .af{fill:var(--sel); stroke:var(--accent); stroke-width:1.6}
.il .f{fill:var(--paper-2); stroke:var(--ink-2); stroke-width:1.4}
.il .fc{fill:var(--card); stroke:var(--ink-2); stroke-width:1.4}
.il .road{fill:var(--road)}
.il .grass{fill:var(--grass)}
.il .water{fill:var(--water); stroke:var(--ink-2); stroke-width:1.2}
.il .wood{fill:var(--wood); stroke:var(--ink-2); stroke-width:1.2}
.il .sun{fill:var(--sun)}
.il .dusk{fill:var(--dusk)}
.il .lane{stroke:var(--card); stroke-width:1.4; stroke-dasharray:5 4}
.il .x{stroke:var(--warn); stroke-width:2.2; stroke-linecap:round}
.il text{fill:var(--ink-2); font-family:var(--f-body); font-size:9px}
.il text.b{fill:var(--ink); font-weight:700}
.il text.hand{font-family:var(--f-hand); font-size:10px}
.il text.n{fill:var(--warn); font-weight:700; font-size:10px}

/* esqueleto com painel lateral */
.shell{display:grid; grid-template-columns:minmax(0,1fr); gap:28px}
@media (min-width:920px){.shell{grid-template-columns:minmax(0,1fr) 270px}}
aside.side{display:none}
@media (min-width:920px){aside.side{display:block}}
.side-in{position:sticky; top:calc(env(safe-area-inset-top,0px) + 16px); background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px; margin-top:26px}
.side h2{font-family:var(--f-display); font-size:17px; margin:0 0 12px}
.plist{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.plist button{all:unset; cursor:pointer; display:flex; align-items:center; gap:10px; width:100%; padding:7px 8px; border-radius:8px; color:var(--ink-2); font-size:15px}
.plist button:hover{background:var(--paper-2)}
.plist button:focus-visible{outline:2px solid var(--accent)}
.plist .st{width:24px; height:24px; border-radius:50%; border:1.5px solid var(--line); display:grid; place-items:center; flex:none}
.plist .st svg{width:14px; height:14px}
.plist .done .st{background:var(--ok); border-color:var(--ok); color:var(--card)}
.plist .cur{color:var(--ink); font-weight:700; background:var(--sel)}
.plist .cur .st{border-color:var(--accent); color:var(--accent)}
.plist .cnt{margin-left:auto; font-size:12px; font-variant-numeric:tabular-nums}
.side .mini{margin-top:14px; padding-top:12px; border-top:1px dashed var(--line)}
.side .mini h3{font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); margin:0 0 6px; font-weight:400}

/* trilha (celular e tablet) */
.trail{position:sticky; top:env(safe-area-inset-top,0px); z-index:5; background:var(--paper); padding-block:10px 12px; border-bottom:1px solid var(--line)}
@media (min-width:920px){.trail{display:none}}
.steps{display:grid; grid-template-columns:repeat(9,1fr); gap:6px}
.step{all:unset; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0; color:var(--ink-2)}
.step .ico{width:34px; height:34px; border-radius:50%; border:1.5px solid var(--line); display:grid; place-items:center; background:var(--card)}
.step .ico .ic{width:18px; height:18px}
.step.done .ico{background:var(--ok); border-color:var(--ok); color:var(--card)}
.step.cur .ico{border-color:var(--accent); background:var(--sel); color:var(--accent)}
.step .lbl{font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
.step.cur .lbl{color:var(--ink); font-weight:700}
.step:focus-visible .ico{outline:2px solid var(--accent); outline-offset:2px}
@media (max-width:520px){.step .lbl{display:none} .steps{gap:2px} .step .ico{width:30px; height:30px}}

/* intro */
.intro{padding-block:26px 8px}
.intro h1{font-family:var(--f-display); font-weight:800; font-size:clamp(30px,6vw,46px); line-height:1.05; letter-spacing:-.025em; margin:0 0 14px; text-wrap:balance}
.intro p{color:var(--ink-2); max-width:58ch; margin:0 0 14px}
.how{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin:20px 0}
.how figure{margin:0; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px}
.how figcaption{font-size:15px; margin-top:8px}
.how figcaption b{display:block; font-family:var(--f-display); font-size:16px}
.overview{list-style:none; padding:0; margin:18px 0; display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px}
.overview li{border:1px dashed var(--line); border-radius:8px; padding:12px 14px; background:var(--card); display:flex; gap:12px; align-items:center; min-width:0}
.overview .ic{color:var(--accent); width:26px; height:26px}
.overview b{font-family:var(--f-display); font-size:15px; display:block}
.overview small{display:block; color:var(--ink-2); font-size:14px}

/* bloco */
.block-head{padding-block:26px 6px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:end}
.block-head .hero{width:130px}
@media (max-width:520px){.block-head{grid-template-columns:1fr} .block-head .hero{width:110px; order:-1}}
.eyebrow{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2)}
.block-head h2{font-family:var(--f-display); font-weight:800; font-size:clamp(26px,5vw,36px); letter-spacing:-.02em; margin:4px 0 6px; text-wrap:balance}
.block-head p{margin:0; color:var(--ink-2); max-width:58ch}
.q{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:18px; margin-top:14px}
.q h3{font-size:18px; margin:0 0 4px; display:flex; gap:10px; align-items:baseline}
.q h3 .n{font-family:var(--f-hand); color:var(--accent); font-size:20px; min-width:1.6em}
.q .help{color:var(--ink-2); font-size:15.5px; margin:2px 0 10px 2.4em}
.q .body{margin-left:2.4em}
@media (max-width:480px){.q .body,.q .help{margin-left:0}}
.tip{display:flex; gap:10px; align-items:flex-start; background:var(--paper); border:1px dashed var(--line); border-radius:8px; padding:10px 12px; margin:0 0 12px; font-size:15px; color:var(--ink-2)}
.tip .ic{color:var(--accent); margin-top:1px}
.tip b{color:var(--ink)}
.sub{margin-top:14px; padding-top:12px; border-top:1px dashed var(--line)}
.sub-l{font-size:15px; color:var(--ink-2); margin-bottom:8px}

/* chips */
.opts{display:flex; flex-wrap:wrap; gap:8px}
.opt{position:relative}
.opt input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer}
.opt span{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border:1.5px solid var(--line); border-radius:999px; background:var(--paper); font-size:16px; line-height:1.25; cursor:pointer; transition:border-color .12s, background .12s}
.opt span .ic{width:20px; height:20px; color:var(--ink-2)}
.opt input:checked + span{border-color:var(--accent); background:var(--sel); font-weight:700}
.opt input:checked + span .ic{color:var(--accent)}
.opt input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px}
.opt.stack{flex:1 1 100%}
.opt.stack span{border-radius:8px; display:flex}

/* cartões ilustrados */
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px}
.cards.wide{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.cards.photo{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.vcard{position:relative; display:block; cursor:pointer; min-width:0}
.vcard input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer}
.vcard .in{height:100%; display:flex; flex-direction:column; gap:8px; border:1.5px solid var(--line); border-radius:10px; padding:10px; background:var(--paper); transition:border-color .12s, background .12s}
.vcard .pic{background:var(--card); border-radius:6px; padding:4px}
.vcard .pic img{display:block; width:100%; height:auto; border-radius:4px; background:#fff}
.vcard .cap{font-size:15px; line-height:1.3}
.vcard .cap small{display:block; color:var(--ink-2); font-size:13px; margin-top:2px}
.vcard input:checked + .in{border-color:var(--accent); background:var(--sel)}
.vcard input:checked + .in .cap{font-weight:700}
.vcard input:focus-visible + .in{outline:2px solid var(--accent); outline-offset:2px}
.vcard .chk{position:absolute; top:8px; right:8px; width:22px; height:22px; border-radius:50%; background:var(--accent); color:var(--accent-ink); display:none; place-items:center}
.vcard .chk svg{width:14px; height:14px}
.vcard input:checked ~ .chk{display:grid}

/* campos */
.fields{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px}
.field label{display:block; font-size:14px; color:var(--ink-2); margin-bottom:4px}
.field input, textarea{width:100%; font:inherit; color:var(--ink); background:var(--paper); border:1.5px solid var(--line); border-radius:8px; padding:10px 12px}
.field input:focus, textarea:focus{outline:none; border-color:var(--accent)}
textarea{min-height:96px; resize:vertical}
.measure{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,220px); gap:16px; align-items:center}
@media (max-width:560px){.measure{grid-template-columns:1fr}}

/* contadores */
.counters{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px}
.counter{display:flex; align-items:center; gap:10px; border:1.5px solid var(--line); border-radius:10px; padding:10px; background:var(--paper)}
.counter .ic{width:28px; height:28px; color:var(--accent)}
.counter b{flex:1; font-weight:400}
.counter button{all:unset; cursor:pointer; width:32px; height:32px; border-radius:50%; border:1.5px solid var(--line); display:grid; place-items:center; font-size:20px; line-height:1; background:var(--card)}
.counter button:focus-visible{outline:2px solid var(--accent)}
.counter output{font-variant-numeric:tabular-nums; min-width:1.5em; text-align:center; font-weight:700; font-size:18px}

/* padrão */
.padroes{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px}
.padrao{position:relative; display:block; cursor:pointer}
.padrao input{position:absolute; opacity:0}
.padrao .card{height:100%; border:1.5px solid var(--line); border-radius:10px; padding:14px; background:var(--paper)}
.padrao input:checked + .card{border-color:var(--accent); background:var(--sel)}
.padrao input:focus-visible + .card{outline:2px solid var(--accent); outline-offset:2px}
.padrao .pic{background:var(--card); border-radius:6px; padding:4px; margin-bottom:10px}
.padrao h4{font-family:var(--f-display); font-size:19px; margin:0}
.padrao .lead{font-family:var(--f-hand); color:var(--accent); margin:2px 0 8px}
.padrao ul{margin:0; padding-left:18px; font-size:14.5px; color:var(--ink-2)}
.padrao li{margin-bottom:3px}
.padrao .ex{margin-top:8px; font-size:13.5px; font-style:italic; color:var(--ink-2)}
.dots{display:flex; gap:3px; margin:6px 0 4px}
.dots i{width:9px; height:9px; border-radius:50%; border:1.5px solid var(--accent)}
.dots i.on{background:var(--accent)}

/* prévia do terreno */
.lotcard{background:var(--card); border:1.5px solid var(--accent); border-radius:10px; padding:16px; margin-top:16px; display:grid; grid-template-columns:minmax(0,260px) minmax(0,1fr); gap:18px; align-items:center}
@media (max-width:560px){.lotcard{grid-template-columns:1fr}}
.lotcard h3{font-family:var(--f-display); margin:0 0 6px; font-size:19px}
.lotcard p{margin:0 0 6px; color:var(--ink-2); font-size:15px}
.lotcard .facts{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.fact{display:inline-flex; align-items:center; gap:6px; font-size:14px; border:1px solid var(--line); border-radius:999px; padding:4px 10px; background:var(--paper)}
.fact .ic{width:16px; height:16px; color:var(--accent)}

.nav{display:flex; justify-content:space-between; gap:10px; margin-top:22px; flex-wrap:wrap}
.btn{all:unset; cursor:pointer; padding:13px 22px; border-radius:999px; font-weight:700; font-size:16px; text-align:center}
.btn.pri{background:var(--accent); color:var(--accent-ink)}
.btn.sec{border:1.5px solid var(--line); color:var(--ink)}
.btn:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.saved{font-size:13px; color:var(--ink-2); align-self:center}

/* resumo */
.recap{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; margin-top:16px}
.panel{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px; min-width:0}
.panel h3{font-family:var(--f-display); margin:0 0 10px; font-size:18px}
.prog{display:flex; flex-wrap:wrap; gap:8px}
.pill{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:8px; padding:6px 10px; background:var(--paper); font-size:15px}
.pill .ic{color:var(--accent)}
.pill b{font-variant-numeric:tabular-nums}
.sheet{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:20px; margin-top:16px}
.sheet h3{font-family:var(--f-display); margin:18px 0 6px; font-size:18px; display:flex; gap:8px; align-items:center}
.sheet h3 .ic{color:var(--accent)}
.sheet h3:first-child{margin-top:0}
.sheet dl{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:4px 14px; margin:0}
.sheet dt{color:var(--ink-2); font-size:15px}
.sheet dd{margin:0; font-size:15px}
.sheet dd.empty{color:var(--ink-2); font-style:italic}
@media (max-width:480px){.sheet dl{grid-template-columns:1fr} .sheet dd{margin-bottom:6px}}
.notes{display:grid; gap:8px; margin-top:16px}
.note{display:flex; gap:10px; align-items:flex-start; border-left:4px solid var(--accent); background:var(--card); padding:10px 14px; border-radius:0 8px 8px 0; font-size:15px}
.note .ic{color:var(--accent); margin-top:2px}
.note.warn{border-color:var(--warn)} .note.warn .ic{color:var(--warn)}
.note.ok{border-color:var(--ok)} .note.ok .ic{color:var(--ok)}
.note b{display:block}
.hand{font-family:var(--f-hand)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}