/* Do Terreno à Casa — a drawing sheet on warm paper: blue ink for structure, terracotta for the house and the path,
   PDM-legend colours for land answers. */
@font-face { font-family: "Plex Sans"; src: url(/assets/fonts/plex-sans-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Sans"; src: url(/assets/fonts/plex-sans-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Plex Sans"; src: url(/assets/fonts/plex-sans-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Plex Sans"; src: url(/assets/fonts/plex-sans-400i.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Barlow SC"; src: url(/assets/fonts/barlow-sc-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow SC"; src: url(/assets/fonts/barlow-sc-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url(/assets/fonts/plex-mono-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --paper: #f6f3ee; --paper-2: #efe9e0; --sheet: #ffffff; --sheet-bg: #fffdf9;
  --ink: #17222d; --muted: #5d6773; --line: #ddd5c9; --line-2: #ebe5db; --grid: #eee7dc; --contour: #d9cbb6; --road: #e6ddd0;
  --brand: #1d4f91; --brand-2: #163f75; --brand-ink: #ffffff; --brand-soft: #e6edf6; --ink-line: #1d4f91;
  --accent: #c25e24; --accent-2: #a54d1b; --accent-soft: #f7e6da;
  --ok: #2e7a47; --ok-soft: #e4f1e7; --info: #3c5a78; --info-soft: #e9eef4;
  --warn: #9a5a12; --warn-soft: #f8ebd6; --bad: #a83434; --bad-soft: #f7e2e0;
  --urb: #b9483c; --ran: #4c8536; --ren: #2b8189; --fire: #c56a16; --nat: #2a6448; --hid: #2f63b8;
  --m-madeira: #9a6a2f; --m-lsf: #4f6d8a; --m-betao: #6b6f76; --m-modular: #2b8189; --m-movel: #8a5a9a; --m-contentor: #b0532d; --m-tiny: #4c8536;
  --band: #14283f; --band-ink: #e9eef4; --band-muted: #a9b7c6;
  --shadow: 0 1px 2px rgba(40, 30, 15, .06), 0 6px 22px rgba(40, 30, 15, .07);
  --r: 10px;
  --display: "Barlow SC", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --body: "Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "Plex Mono", ui-monospace, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0f151b; --paper-2: #141c24; --sheet: #17212b; --sheet-bg: #17212b;
    --ink: #e6ebf0; --muted: #9aa8b5; --line: #2a3744; --line-2: #212d38; --grid: #1d2731; --contour: #3b4a59; --road: #26323e;
    --brand: #8db4ea; --brand-2: #a9c7f0; --brand-ink: #0f151b; --brand-soft: #1a2a3c; --ink-line: #8db4ea;
    --accent: #ea915a; --accent-2: #f1a676; --accent-soft: #33231a;
    --ok: #6cc08a; --ok-soft: #15291d; --info: #a3bad3; --info-soft: #182533;
    --warn: #e3a95c; --warn-soft: #2e2314; --bad: #ec8080; --bad-soft: #321a1a;
    --urb: #e0786b; --ran: #82bb68; --ren: #5bb5bd; --fire: #e8964a; --nat: #5fae86; --hid: #7ea8ee;
    --band: #0b1117; --band-ink: #e6ebf0; --band-muted: #93a3b2;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0f151b; --paper-2: #141c24; --sheet: #17212b; --sheet-bg: #17212b;
  --ink: #e6ebf0; --muted: #9aa8b5; --line: #2a3744; --line-2: #212d38; --grid: #1d2731; --contour: #3b4a59; --road: #26323e;
  --brand: #8db4ea; --brand-2: #a9c7f0; --brand-ink: #0f151b; --brand-soft: #1a2a3c; --ink-line: #8db4ea;
  --accent: #ea915a; --accent-2: #f1a676; --accent-soft: #33231a;
  --ok: #6cc08a; --ok-soft: #15291d; --info: #a3bad3; --info-soft: #182533;
  --warn: #e3a95c; --warn-soft: #2e2314; --bad: #ec8080; --bad-soft: #321a1a;
  --band: #0b1117; --band-ink: #e6ebf0; --band-muted: #93a3b2;
  color-scheme: dark;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16.5px/1.62 var(--body); }
a { color: var(--brand); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--brand-2); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
img { max-width: 100%; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--sheet); padding: 8px 12px; z-index: 50; }
.skip:focus { left: 8px; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 780px; }
h1, h2, h3 { font-family: var(--display); line-height: 1.12; text-wrap: balance; margin: 1.7em 0 .5em; color: var(--ink); }
h1 { font-size: clamp(34px, 5.4vw, 54px); font-weight: 700; letter-spacing: -.01em; margin-top: .25em; }
h2 { font-size: clamp(25px, 3vw, 31px); font-weight: 600; }
h3 { font-size: 21px; font-weight: 600; }
p, li { max-width: 72ch; }
code, .mono { font-family: var(--mono); font-size: .88em; }
.lede { font-size: clamp(17.5px, 2vw, 20px); color: var(--muted); line-height: 1.55; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.label { font-family: var(--mono); font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.ico { width: 24px; height: 24px; flex: none; }

/* ---------- header ---------- */
.top { background: color-mix(in srgb, var(--sheet) 92%, transparent); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.top-in { display: flex; align-items: center; gap: 18px; min-height: 64px; }
.logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); }
.logo:hover { color: var(--ink); }
.logo-text { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: .005em; white-space: nowrap; }
.logo-text span { color: var(--accent); }
.nav { display: flex; gap: 2px; margin-left: auto; align-items: center; }
.nav a { text-decoration: none; color: var(--ink); padding: 8px 11px; border-radius: 8px; font-size: 15.5px; font-weight: 500; }
.nav a:hover { background: var(--paper-2); color: var(--ink); }
.nav a[aria-current="page"] { color: var(--brand); background: var(--brand-soft); }
.nav .nav-cta { background: var(--accent); color: #fff; margin-left: 8px; }
.nav .nav-cta:hover { background: var(--accent-2); color: #fff; }
.nav-toggle { display: none; margin-left: auto; font: 500 15px var(--body); background: var(--sheet); border: 1px solid var(--line); border-radius: 8px; padding: 7px 14px; color: var(--ink); }
@media (max-width: 920px) {
  .nav-toggle { display: block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 64px; background: var(--sheet); border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; padding: 8px 16px 16px; box-shadow: var(--shadow); }
  .nav-open .nav { display: flex; }
  .nav .nav-cta { margin: 8px 0 0; text-align: center; }
}
.crumbs { font-size: 14px; color: var(--muted); margin: 0 0 6px; }
.crumbs a { color: var(--muted); }
main { padding-bottom: 56px; }
.updated { color: var(--muted); font-size: 14px; margin-top: 32px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 16px var(--body); padding: 12px 20px; border-radius: 9px; border: 1px solid var(--brand); background: var(--brand); color: var(--brand-ink); text-decoration: none; cursor: pointer; justify-self: start; transition: background .15s, transform .15s; }
.btn:hover { background: var(--brand-2); border-color: var(--brand-2); color: var(--brand-ink); }
.btn:active { transform: translateY(1px); }
.btn.accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.accent:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn.ghost { background: transparent; color: var(--brand); }
.btn.ghost:hover { background: var(--brand-soft); }
.btn .ico { width: 19px; height: 19px; }
.btn[disabled] { opacity: .55; cursor: progress; }
.pill { display: inline-block; font-family: var(--mono); font-size: 12px; padding: 1px 8px; border: 1px solid currentColor; border-radius: 99px; white-space: nowrap; }

/* ---------- home ---------- */
.hero { padding: 44px 0 34px; background: radial-gradient(1200px 500px at 85% -10%, var(--brand-soft), transparent 60%), linear-gradient(var(--paper), var(--paper)); border-bottom: 1px solid var(--line); }
.hero-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: center; }
@media (max-width: 960px) { .hero-in { grid-template-columns: 1fr; gap: 30px; } }
.hero h1 { font-size: clamp(38px, 6vw, 62px); margin: 10px 0 14px; }
.hero h1 em { font-style: normal; color: var(--accent); }
.quick { display: flex; gap: 8px; margin: 26px 0 12px; background: var(--sheet); border: 1px solid var(--line); border-radius: 12px; padding: 7px; box-shadow: var(--shadow); max-width: 560px; }
.quick input { border: 0; background: transparent; font: 16px var(--body); padding: 9px 10px; flex: 1; min-width: 0; color: var(--ink); }
.quick input:focus { outline: none; }
.quick:focus-within { border-color: var(--brand); }
.quick-links { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 15px; }
.quick-links a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-weight: 500; }
.quick-links .ico { width: 18px; height: 18px; }
.sheet { margin: 0; background: var(--sheet-bg); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; position: relative; }
.sheet-top { display: flex; justify-content: space-between; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--line-2); }
.sheet-art { display: block; width: 100%; height: auto; }
.sheet-chips { list-style: none; margin: 0; padding: 0 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: relative; margin-top: -44px; }
.sheet-chips li { max-width: none; margin: 0; display: flex; gap: 9px; align-items: flex-start; background: var(--sheet); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; box-shadow: 0 2px 8px rgba(40, 30, 15, .07); font-size: 13.5px; line-height: 1.3; }
.sheet-chips b { display: block; font-weight: 600; }
.sheet-chips small { color: var(--muted); font-family: var(--mono); font-size: 10.5px; letter-spacing: .03em; }
.sheet-chips .dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; flex: none; background: var(--info); }
.sheet-chips .ok .dot { background: var(--ok); } .sheet-chips .warn .dot { background: var(--warn); } .sheet-chips .bad .dot { background: var(--bad); }
.sheet-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-2); margin-top: 14px; border-top: 1px solid var(--line-2); }
.sheet-foot span { background: var(--sheet-bg); padding: 12px 16px; display: grid; }
.sheet-foot b { font-family: var(--display); font-size: 25px; color: var(--brand); line-height: 1.1; }
.sheet-foot small { color: var(--muted); font-size: 13px; }
@media (max-width: 520px) { .sheet-chips { grid-template-columns: 1fr; margin-top: 10px; } }

.trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; padding: 22px 0; }
.trust div { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; color: var(--muted); }
.trust b { display: block; color: var(--ink); font-weight: 600; }
.trust .ico { color: var(--accent); margin-top: 2px; }
@media (max-width: 900px) { .trust { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .trust { grid-template-columns: 1fr; } }

.section { padding: 46px 0; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.section-head h2 { margin: 0; }
.section-head p { margin: 4px 0 0; color: var(--muted); }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; counter-reset: s; position: relative; }
.steps::before { content: ""; position: absolute; left: 6%; right: 6%; top: 37px; border-top: 2px dashed var(--accent); opacity: .5; }
.steps li { counter-increment: s; margin: 0; max-width: none; position: relative; }
.steps a { display: grid; gap: 8px; height: 100%; text-decoration: none; color: var(--ink); background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 16px 16px; box-shadow: var(--shadow); transition: transform .15s, border-color .15s; }
.steps a:hover { transform: translateY(-2px); border-color: var(--brand); color: var(--ink); }
.steps .num { display: flex; align-items: center; gap: 10px; }
.steps .num i { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: #fff; position: relative; z-index: 1; }
.steps .num i .ico { width: 22px; height: 22px; }
.steps .num span { font: 500 12px var(--mono); color: var(--muted); letter-spacing: .08em; }
.steps .num span::before { content: "0" counter(s) " · "; }
.steps b { font-family: var(--display); font-size: 21px; font-weight: 600; line-height: 1.15; color: var(--ink); }
.steps small { font-size: 14px; color: var(--muted); line-height: 1.45; }
@media (max-width: 1000px) { .steps { grid-template-columns: 1fr 1fr; } .steps::before { display: none; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.feature + .feature { margin-top: 46px; }
.feature.flip > :first-child { order: 2; }
@media (max-width: 860px) { .feature { grid-template-columns: 1fr; gap: 20px; } .feature.flip > :first-child { order: 0; } }
.feature h2 { margin-top: 0; }
.panel { background: var(--sheet); border: 1px solid var(--line); border-radius: 14px; padding: 20px; box-shadow: var(--shadow); }
.waterfall { display: grid; gap: 9px; }
.wf { display: grid; grid-template-columns: 150px 1fr 82px; gap: 10px; align-items: center; font-size: 14px; }
.wf .bar { height: 18px; border-radius: 4px; background: var(--line-2); position: relative; }
.wf .bar i { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: var(--accent); }
.wf .bar i.base { background: var(--brand); }
.wf .bar i.est { background: repeating-linear-gradient(45deg, var(--accent) 0 4px, color-mix(in srgb, var(--accent) 45%, transparent) 4px 8px); }
.wf .v { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
.wf.total { border-top: 1px solid var(--line); padding-top: 9px; font-weight: 600; }
.wf.total .bar i { background: var(--ink); opacity: .85; }
@media (max-width: 520px) { .wf { grid-template-columns: 1fr 72px; } .wf .bar { grid-column: 1 / -1; grid-row: 2; } }
.timeline { display: flex; gap: 6px; margin: 4px 0 12px; }
.timeline div { flex: var(--d) 1 0; border-radius: 6px; padding: 9px 10px; background: var(--brand-soft); font-size: 13px; line-height: 1.3; min-width: 0; }
.timeline div b { display: block; font-family: var(--display); font-size: 21px; color: var(--brand); }
.timeline div.opt { background: var(--accent-soft); } .timeline div.opt b { color: var(--accent); }

.band { background: var(--band); color: var(--band-ink); padding: 42px 0; }
.band-in { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
.band h2 { color: var(--band-ink); margin: 0 0 6px; }
.band p { color: var(--band-muted); margin: 0; }
@media (max-width: 720px) { .band-in { grid-template-columns: 1fr; } }

/* ---------- page header and guides ---------- */
.page-head { background: linear-gradient(180deg, var(--paper-2), var(--paper)); border-bottom: 1px solid var(--line); padding: 26px 0 26px; margin-bottom: 30px; }
.page-head h1 { margin: 6px 0 10px; font-size: clamp(32px, 4.6vw, 48px); }
.page-head .lede { margin: 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 500 13px var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--accent); }
.eyebrow .ico { width: 18px; height: 18px; }
.meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 14px; font-size: 13.5px; color: var(--muted); }
.meta span { display: inline-flex; align-items: center; gap: 6px; }
.meta .ico { width: 16px; height: 16px; }
.guide-grid { display: grid; grid-template-columns: minmax(0, 780px) 250px; gap: 56px; justify-content: space-between; }
@media (max-width: 1100px) { .guide-grid { grid-template-columns: minmax(0, 1fr); } .toc { display: none; } }
.toc { position: sticky; top: 88px; align-self: start; font-size: 14px; border-left: 2px solid var(--line); padding: 2px 0 2px 16px; }
.toc p { margin: 0 0 8px; }
.toc ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.toc a { color: var(--muted); text-decoration: none; display: block; line-height: 1.35; }
.toc a:hover { color: var(--brand); }
.toc .toc-cta { margin-top: 18px; display: grid; gap: 8px; }
.prose > :first-child { margin-top: 0; }
.prose h2 { padding-top: 6px; border-top: 1px solid var(--line-2); padding-top: 22px; }
.prose h2:first-child { border-top: 0; padding-top: 0; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin: 5px 0; }
.prose li::marker { color: var(--accent); }
.prose strong { font-weight: 600; }
.prose blockquote { margin: 18px 0; padding: 12px 18px; border-left: 4px solid var(--accent); background: var(--accent-soft); border-radius: 0 8px 8px 0; }
.box { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; margin: 18px 0; }
.box > :first-child { margin-top: 0; } .box > :last-child { margin-bottom: 0; }
.box.note { border-left: 4px solid var(--brand); }
.box.warn { border-left: 4px solid var(--warn); background: var(--warn-soft); }
.box.bad { border-left: 4px solid var(--bad); background: var(--bad-soft); }
.banner { display: flex; gap: 10px; align-items: flex-start; border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--line)); background: var(--warn-soft); color: var(--ink); border-radius: var(--r); padding: 11px 14px; font-size: 14.5px; margin: 14px 0; }
.banner b { color: var(--warn); white-space: nowrap; }
.tw { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); margin: 18px 0; background: var(--sheet); }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--line-2); }
th { font: 500 11.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--paper-2); white-space: nowrap; }
tbody tr:hover td { background: color-mix(in srgb, var(--paper-2) 50%, transparent); }
td { min-width: 90px; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tfoot td { font-weight: 600; border-top: 1px solid var(--line); background: var(--paper-2); }
td .sub { display: block; color: var(--muted); font-size: 13px; }
.cards { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin: 16px 0; }
.cards li { margin: 0; max-width: none; }
.cards a { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; height: 100%; padding: 16px 18px; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; color: var(--ink); transition: border-color .15s, transform .15s; }
.cards a:hover { border-color: var(--brand); transform: translateY(-1px); color: var(--ink); }
.cards a > .ico { grid-row: span 2; color: var(--accent); margin-top: 2px; }
.cards b { font-family: var(--display); font-size: 20px; color: var(--ink); font-weight: 600; line-height: 1.2; }
.cards span { font-size: 14.5px; color: var(--muted); line-height: 1.45; }
.cards .date { grid-column: 2; font: 500 11.5px var(--mono); color: var(--accent); letter-spacing: .05em; text-transform: uppercase; }
details.fold { border: 1px solid var(--line); border-radius: var(--r); background: var(--sheet); padding: 0 16px; margin: 12px 0; }
details.fold summary { cursor: pointer; padding: 12px 0; font-weight: 600; }
details.fold[open] summary { border-bottom: 1px solid var(--line-2); margin-bottom: 10px; }
.faq { margin-top: 36px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 15px 34px 15px 0; font-weight: 600; font-size: 17px; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 10px; font: 400 26px var(--body); color: var(--accent); }
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding: 0 0 12px; }
.sources { font-size: 14px; color: var(--muted); border-top: 1px solid var(--line); margin-top: 36px; padding-top: 6px; }
.sources h2 { font-size: 20px; }
.sources ul { padding-left: 18px; }
.cta { display: grid; grid-template-columns: auto 1fr auto; gap: 6px 18px; align-items: center; background: var(--sheet); border: 1px solid var(--line); border-left: 5px solid var(--accent); border-radius: var(--r); padding: 18px 20px; margin: 30px 0; box-shadow: var(--shadow); }
.cta > .ico { width: 34px; height: 34px; color: var(--accent); }
.cta h3 { margin: 0; font-size: 21px; }
.cta p { margin: 2px 0 0; color: var(--muted); font-size: 15px; }
.cta .btn { justify-self: end; }
@media (max-width: 640px) { .cta { grid-template-columns: auto 1fr; } .cta .btn { grid-column: 1 / -1; justify-self: stretch; } }

/* ---------- forms and calculators ---------- */
.calc { background: var(--sheet); border: 1px solid var(--line); border-radius: 14px; padding: 22px; margin: 24px 0; box-shadow: var(--shadow); }
.calc > h2, .calc > h3 { margin-top: 0; display: flex; align-items: center; gap: 10px; }
.fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px 18px; align-items: start; }
.fields .wide { grid-column: 1 / -1; }
label.f { display: grid; gap: 5px; font-size: 13.5px; color: var(--muted); align-content: start; }
label.f > span:first-child { color: var(--ink); font-weight: 600; font-size: 14px; }
input[type=text], input[type=number], input[type=email], input[type=tel], input[type=search], select, textarea {
  font: 16px var(--body); color: var(--ink); background: var(--sheet); border: 1px solid var(--line); border-radius: 8px; padding: 0 12px; height: 46px; width: 100%; min-width: 0; transition: border-color .15s, box-shadow .15s; }
textarea { min-height: 96px; height: auto; padding: 10px 12px; resize: vertical; }
select { appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 19px) 20px, calc(100% - 14px) 20px; background-size: 5px 5px; background-repeat: no-repeat; }
input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); outline: none; }
.ig { display: flex; align-items: stretch; }
.ig input { border-radius: 8px 0 0 8px; }
.ig i { font-style: normal; display: grid; place-items: center; padding: 0 12px; border: 1px solid var(--line); border-left: 0; border-radius: 0 8px 8px 0; background: var(--paper-2); color: var(--muted); font-size: 14px; white-space: nowrap; }
.hint { font-size: 13px; color: var(--muted); }
fieldset { border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px 14px; margin: 0; min-width: 0; }
legend { font-weight: 600; font-size: 14px; padding: 0 6px; }
.radios { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.radios label, label.check { display: inline-flex; gap: 8px; align-items: flex-start; font-size: 15px; color: var(--ink); }
.radios label { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; background: var(--sheet); cursor: pointer; }
.radios label:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
[data-makers] label { border: 0; padding: 4px 0; background: none; width: 100%; }
input[type=radio], input[type=checkbox] { accent-color: var(--brand); margin-top: .28em; flex: none; width: 16px; height: 16px; }
.result { margin-top: 20px; border-top: 1px dashed var(--line); padding-top: 18px; }
.big { font-family: var(--display); font-size: 40px; font-weight: 700; line-height: 1.05; color: var(--brand); font-variant-numeric: tabular-nums; }
.figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 14px 0; }
.fig { background: var(--paper); border: 1px solid var(--line-2); border-radius: 10px; padding: 14px 16px; display: grid; gap: 4px; align-content: start; }
.fig .n { font-family: var(--display); font-size: 29px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.05; }
.fig .l { font-size: 13px; color: var(--muted); line-height: 1.4; }
.fig.hl { background: var(--brand); border-color: var(--brand); }
.fig.hl .n, .fig.hl .l, .fig.hl a { color: var(--brand-ink); }
.fig.hl .l { opacity: .85; }
.fig.acc .n { color: var(--accent); }
.err { color: var(--bad); font-size: 14px; }
.costbars { display: grid; gap: 7px; margin: 16px 0 6px; }
.cb { display: grid; grid-template-columns: 190px 1fr 92px; gap: 12px; align-items: center; font-size: 14px; }
.cb .bar { height: 14px; background: var(--line-2); border-radius: 99px; overflow: hidden; }
.cb .bar i { display: block; height: 100%; border-radius: 99px; background: var(--brand); }
.cb.x .bar i { background: var(--accent); }
.cb .v { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
@media (max-width: 560px) { .cb { grid-template-columns: 1fr 86px; } .cb .bar { grid-column: 1 / -1; grid-row: 2; } }

/* ---------- land check ---------- */
.lc-form { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; margin-top: 14px; }
@media (max-width: 560px) { .lc-form { grid-template-columns: 1fr; } }
.lc-examples { font-size: 14px; color: var(--muted); margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lc-examples button { font: 500 13.5px var(--body); color: var(--brand); background: var(--brand-soft); border: 0; border-radius: 99px; padding: 6px 12px; cursor: pointer; }
.lc-examples button:hover { background: color-mix(in srgb, var(--brand) 18%, var(--sheet)); }
.lc-map { width: 100%; aspect-ratio: 16 / 9; max-height: 460px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper-2); display: block; }
.verdict { border: 1px solid var(--line); border-left-width: 6px; border-radius: 10px; padding: 16px 18px; margin: 18px 0 12px; background: var(--sheet); }
.verdict.bad { border-left-color: var(--bad); background: linear-gradient(90deg, var(--bad-soft), var(--sheet) 60%); }
.verdict.warn { border-left-color: var(--warn); background: linear-gradient(90deg, var(--warn-soft), var(--sheet) 60%); }
.verdict.ok { border-left-color: var(--ok); background: linear-gradient(90deg, var(--ok-soft), var(--sheet) 60%); }
.verdict.info { border-left-color: var(--info); }
.verdict h2 { margin: 2px 0 4px; font-size: 27px; }
.verdict .where { color: var(--muted); font-size: 14.5px; margin: 0; }
.chips { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 8px; }
.chips li { max-width: none; margin: 0; display: grid; grid-template-columns: 18px 1fr; gap: 12px; background: var(--sheet); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.chips .sw { width: 18px; height: 13px; margin-top: 5px; border-radius: 3px; }
.chips b { display: block; }
.chips .d { font-size: 14.5px; }
.chips .s { font-size: 12px; color: var(--muted); font-family: var(--mono); }
.chips li.bad { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 30%, var(--line)); }
.chips li.warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 30%, var(--line)); }
.sw.crus-u { background: var(--urb); } .sw.crus-r { background: #c9b26b; } .sw.ran { background: var(--ran); }
.sw.ren { background: repeating-linear-gradient(45deg, var(--ren) 0 2px, transparent 2px 4px); border: 1px solid var(--ren); }
.sw.nat { background: var(--nat); } .sw.fire { background: var(--fire); } .sw.hid { background: var(--hid); }
.sw.her { background: transparent; border: 2px solid var(--urb); } .sw.srv { background: transparent; border-top: 2px dashed var(--muted); height: 2px; margin-top: 11px; }
.sw.ok { background: var(--ok); } .sw.info { background: var(--line); }

/* ---------- seller directory ---------- */
.dir-controls { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 12px; align-items: end; margin: 16px 0 6px; padding: 16px; background: var(--sheet); border: 1px solid var(--line); border-radius: 12px; }
@media (max-width: 760px) { .dir-controls { grid-template-columns: 1fr 1fr; } .dir-controls .wide-m { grid-column: 1 / -1; } }
.count { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.sellers { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; margin: 12px 0; }
.sellers li { margin: 0; max-width: none; }
.seller { display: grid; grid-template-columns: 46px 1fr; gap: 4px 14px; height: 100%; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; text-decoration: none; color: var(--ink); transition: border-color .15s, transform .15s; }
.seller:hover { border-color: var(--brand); transform: translateY(-1px); color: var(--ink); }
.mono-av { width: 46px; height: 46px; border-radius: 10px; display: grid; place-items: center; font: 700 19px var(--display); color: #fff; background: var(--mc, var(--brand)); grid-row: span 3; letter-spacing: .02em; }
.seller b { font-size: 17px; font-weight: 600; line-height: 1.25; }
.seller .meta { margin: 0; font-size: 13.5px; color: var(--muted); }
.badge { display: inline-flex; align-items: center; gap: 6px; font: 500 12px var(--body); color: var(--mc, var(--brand)); background: color-mix(in srgb, var(--mc, var(--brand)) 12%, var(--sheet)); border-radius: 99px; padding: 2px 9px; justify-self: start; }
.seller .px { display: flex; align-items: baseline; gap: 8px; font-variant-numeric: tabular-nums; margin-top: 2px; }
.seller .px strong { font-family: var(--display); font-size: 21px; color: var(--accent); }
.seller .px span { font-size: 12.5px; color: var(--muted); }
.t-madeira { --mc: var(--m-madeira); } .t-lsf { --mc: var(--m-lsf); } .t-betao { --mc: var(--m-betao); } .t-modular { --mc: var(--m-modular); }
.t-movel { --mc: var(--m-movel); } .t-contentor { --mc: var(--m-contentor); } .t-tiny { --mc: var(--m-tiny); }
.seller-head { display: flex; gap: 18px; align-items: center; }
.seller-head .mono-av { width: 72px; height: 72px; font-size: 30px; border-radius: 16px; }
.seller-head h1 { margin: 4px 0 6px; }

/* ---------- licence path ---------- */
.path { list-style: none; padding: 0; margin: 14px 0; display: grid; gap: 0; border-left: 3px solid var(--brand); }
.path li { margin: 0; padding: 6px 0 14px 20px; position: relative; max-width: 72ch; }
.path li::before { content: ""; position: absolute; left: -9px; top: 11px; width: 15px; height: 15px; border-radius: 50%; background: var(--sheet); border: 3px solid var(--brand); }
.path li.pip::before { border-color: var(--accent); }
.path li.phase { padding-left: 36px; } .path li.phase::before { left: 9px; width: 10px; height: 10px; border-width: 2px; top: 14px; }
.path b { display: block; }
.path .art { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }

/* ---------- footer ---------- */
.foot { background: var(--band); color: var(--band-muted); padding: 40px 0 44px; font-size: 14.5px; }
.foot-in { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 30px; }
@media (max-width: 760px) { .foot-in { grid-template-columns: 1fr 1fr; } .foot-about { grid-column: 1 / -1; } }
.foot .logo, .foot .logo:hover { color: var(--band-ink); --brand: #8db4ea; }
.foot-about p { color: var(--band-muted); max-width: 52ch; }
.foot .fine { font-size: 13px; }
.foot-nav { display: grid; gap: 7px; align-content: start; }
.foot-nav p { margin: 0 0 4px; color: var(--band-ink); font-weight: 600; }
.foot-nav a { color: var(--band-muted); text-decoration: none; }
.foot-nav a:hover { color: var(--band-ink); text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media print { .top, .foot, .nav-toggle, .cta, .band, .toc { display: none; } body { background: #fff; } }
.narrow-auto { max-width: 900px; }
/* card grid: icon in its own column, everything else stacked in the second */
.cards a > .ico { grid-row: 1 / span 4; }
.cards a > :not(.ico) { grid-column: 2; }
.steps .num span::before { content: "0" counter(s); }
:root { --cta-band: #1d4f91; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --cta-band: #1a3150; } }
:root[data-theme="dark"] { --cta-band: #1a3150; }
.band { background: var(--cta-band); color: #fff; }
.band h2 { color: #fff; } .band p { color: #d6e2f1; }
main:has(> .band:last-child) { padding-bottom: 0; }
.calc .figs { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
.calc .fig .n { font-size: 25px; }
.seller { align-content: start; }
.seller > .mono-av { grid-row: 1 / span 4; }
.seller > :not(.mono-av) { grid-column: 2; }
/* widgets inside guide text keep their own styles */
.prose .chips, .prose .sellers, .prose .cards, .prose .path, .prose .costbars, .prose .sheet-chips { padding-left: 0; }
.prose .chips li, .prose .cards li, .prose .sellers li { margin: 0; }
.prose .calc h2, .prose .verdict h2, .prose .widget h2 { border-top: 0; padding-top: 0; }
.prose .path { padding-left: 0; }
.prose .path li { margin: 0; }
.pin-ico { width: 30px; height: 40px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
@media (max-width: 960px) { .hero-in { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) { .feature { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) { .band-in { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: minmax(0, 1fr); } .timeline div { padding: 8px 7px; font-size: 12px; } .timeline div b { font-size: 18px; } }
@media (max-width: 480px) { .quick { flex-direction: column; } .quick .btn { width: 100%; } .sheet-top .label + .label { display: none; } }
:root { --accent-ink: #ffffff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --accent-ink: #1f1209; } }
:root[data-theme="dark"] { --accent-ink: #1f1209; }
.btn.accent, .btn.accent:hover, .nav .nav-cta, .nav .nav-cta:hover { color: var(--accent-ink); }