/* The new design (approved 2026-10-28): the shell every «novo» page shares — nav .gn, footer .ft3 — and the
   section vocabulary of the guide template G3 and the hub template. Rendered by src/site/novo/shell.ts.
   Ported verbatim from the approved mocks (home-carro/home.html «end-css», briefs guia.css + hub.css), minus the
   mock-only toggles (variant switchers, goal labels). Build pages from these classes; do not fork them per page.
   Fraunces: SIL Open Font License 1.1, served from gotogreg.io (no third-party font host). */
@font-face { font-family: 'Fraunces'; font-weight: 700; font-style: normal; font-display: swap; src: url('/design/fonts/fraunces-700.woff2') format('woff2'); }

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--font-ui); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; }
.marca { display: inline-flex; align-items: center; gap: 6px; font: 600 22px/1 var(--font-ui); letter-spacing: -.02em; color: inherit; text-decoration: none; }
.marca svg { width: 30px; height: 30px; }

/* ── end of page: FAQ, waitlist and footer vocabulary (home «end-css») ── */
.door { margin: auto 0 0; padding-top: 8px; } .door a { font: 600 15px/1 var(--font-ui); color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--peach); padding-bottom: 3px; }
.tl { grid-template-rows: auto; }
.fq { padding: clamp(88px, 9vw, 140px) clamp(18px, 6.5vw, 96px); }
.fq h2, .wl h2 { margin: 0; font: 700 clamp(34px, 3.8vw, 56px)/1.04 'Fraunces', Georgia, serif; letter-spacing: -.02em; text-wrap: balance; }
.fq .lead, .wl .lead { margin: 16px 0 0; font-size: 18px; line-height: 1.5; color: var(--ink-60); max-width: 46ch; }
/* F1 aqqi: dark band, accordion */
.fq1 { background: var(--ink-deep); color: #fff; } .fq1 .lead { color: var(--on-dark-60); }
.f1 { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.f1l { border-top: 1px solid var(--on-dark-20); }
.f1q { border-bottom: 1px solid var(--on-dark-20); }
.f1q summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 24px 0; font: 700 clamp(20px, 1.6vw, 24px)/1.2 'Fraunces', Georgia, serif; }
.f1q summary::-webkit-details-marker { display: none; }
.f1q summary span { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--on-dark-30); display: grid; place-items: center; font: 400 20px/1 var(--font-ui); transition: transform .2s; }
.f1q[open] summary span { transform: rotate(45deg); background: var(--peach); color: var(--ink-deep); border-color: var(--peach); }
.f1q p { margin: 0 0 26px; font-size: 17px; line-height: 1.55; color: var(--on-dark-75); max-width: 56ch; }
/* F2 Jerry: open grid */
.fq2 { background: var(--paper); }
.f2g { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.f2q { background: #F4F2EF; border-radius: 24px; padding: 28px; display: grid; gap: 10px; align-content: start; }
.f2q h3 { margin: 0; font: 700 21px/1.2 'Fraunces', Georgia, serif; } .f2q p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink-60); }
/* F3 conversation */
.fq3 { background: var(--cream); }
.f3l { margin: clamp(40px, 5vw, 64px) auto 0; max-width: 820px; display: grid; gap: 26px; }
.f3p { display: grid; gap: 10px; }
.f3u { justify-self: end; margin: 0; max-width: 70%; background: #D9E8FF; color: var(--ink-deep); border-radius: 20px 20px 4px 20px; padding: 14px 18px; font: 600 17px/1.35 var(--font-ui); }
.f3g { justify-self: start; display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: end; max-width: 82%; }
.f3g .av { width: 34px; height: 34px; border-radius: 10px; background: var(--peach); color: var(--ink-deep); display: grid; place-items: center; } .f3g .av svg { width: 26px; height: 26px; }
.f3g p { margin: 0; background: var(--ink-deep); color: #fff; border-radius: 20px 20px 20px 4px; padding: 14px 18px; font-size: 16.5px; line-height: 1.5; }
/* W1 multi-step card */
.wl { padding: clamp(88px, 9vw, 140px) clamp(18px, 6.5vw, 96px); }
.wl1 { background: var(--peach-pale); }
.wl__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: clamp(32px, 6vw, 96px); align-items: center; max-width: 1240px; margin: 0 auto; }
.pontos2 { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; font-size: 16px; color: var(--ink); }
.pontos2 li::before { content: "✓"; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--band-barato-11); color: var(--band-barato); font-size: 12px; font-weight: 700; margin-right: 10px; }
.wcard { background: #fff; border-radius: 28px; padding: 32px; box-shadow: 0 30px 70px rgba(41,18,16,.12); display: grid; gap: 12px; }
.wbar { height: 6px; background: var(--tint-10); border-radius: 6px; overflow: hidden; } .wbar i { display: block; height: 100%; background: var(--peach-ink); border-radius: 6px; }
.wstep { margin: 6px 0 0; font: 500 12px/1 var(--font-doc); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-50); }
.wcard h3 { margin: 0; font: 700 26px/1.15 'Fraunces', Georgia, serif; }
.why { margin: 0; font-size: 15px; color: var(--ink-60); }
.wm { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; }
.wm span { height: 52px; border-radius: 14px; background: var(--cream); display: grid; place-items: center; font-size: 15.5px; }
.wm span.sel { background: #fff; outline: 2px solid var(--peach-ink); box-shadow: 0 10px 22px rgba(41,18,16,.1); font-weight: 600; }
.skip { margin: 4px 0 0; text-align: center; font-size: 14px; color: var(--ink-50); text-decoration: underline; }
/* W2 photo close */
/* W3 · blue = the visitor's voice (hero voice note, bento quotes). Greg asks in a bubble, you answer in blue. */
:root { --azul: #D9E8FF; --azul-ink: #1D4F91; }
.wl3 { background: var(--cream); }
.wchat { background: #fff; border-radius: 28px; padding: 32px; box-shadow: 0 30px 70px rgba(41,18,16,.12); display: grid; gap: 14px; }
.wchat .wbar i { background: var(--azul-ink); }
.wq { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: end; }
.wq .av { width: 34px; height: 34px; border-radius: 10px; background: var(--peach); color: var(--ink-deep); display: grid; place-items: center; } .wq .av svg { width: 26px; height: 26px; }
.wq p { margin: 0; background: var(--ink-deep); color: #fff; border-radius: 20px 20px 20px 4px; padding: 16px 18px; display: grid; gap: 6px; }
.wq b { font: 700 23px/1.2 'Fraunces', Georgia, serif; } .wq p span { font-size: 14.5px; color: var(--on-dark-75); }
.wm3 { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.wm3 span { min-width: 64px; height: 46px; padding: 0 14px; border-radius: 18px 18px 4px 18px; background: var(--azul); color: var(--ink-deep); display: grid; place-items: center; font-size: 15.5px; }
.wm3 span.sel { background: var(--azul-ink); color: #fff; font-weight: 600; box-shadow: 0 10px 22px rgba(29,79,145,.25); }
.wchat .skip { text-align: right; }
/* W4 · the W1 card on a blue band */
.wl4 { background: var(--azul); } .wl4 .wm span.sel { outline-color: var(--azul-ink); } .wl4 .wbar i { background: var(--azul-ink); } .wl4 .pontos2 li::before { background: #fff; color: var(--azul-ink); }
.soc { display: flex; gap: 14px; } .soc a { color: #fff; font-size: 14px; }
.ft4 { background: var(--cream); color: var(--ink); padding: clamp(64px, 7vw, 96px) clamp(18px, 6.5vw, 96px) 28px; overflow: hidden; }
.ft4 .ft2__cols h3 { margin: 0 0 12px; font: 500 12px/1 var(--font-doc); letter-spacing: .07em; text-transform: uppercase; color: var(--peach-ink); }
.ft4 .ft2__cols a { color: var(--ink-60); } .ft4 .ft2__bar { color: var(--ink-50); border-color: var(--tint-10); }
.ft4__mark { display: flex; align-items: center; gap: .1em; margin-top: 56px; margin-bottom: 40px; font: 600 clamp(120px, 20vw, 300px)/1 var(--font-ui); letter-spacing: -.06em; color: var(--ink-deep); }
.ft4__face { width: .8em; height: .8em; border-radius: .2em; background: var(--peach); color: var(--ink-deep); display: grid; place-items: center; } .ft4__face svg { width: 80%; height: 80%; }

.wl2 { position: relative; color: #fff; padding: clamp(110px, 12vw, 180px) clamp(18px, 6.5vw, 96px); isolation: isolate; overflow: hidden; }
.wl2 img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; z-index: -2; }
.wl2::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(41,18,16,.9), rgba(41,18,16,.55) 55%, rgba(41,18,16,.2)); }
.wl2__in { max-width: 620px; display: grid; gap: 20px; } .wl2 .lead { color: var(--on-dark-75); }
/* footer = site map */
.ft2 { background: var(--ink-deep); color: #fff; padding: clamp(64px, 7vw, 96px) clamp(18px, 6.5vw, 96px) 28px; }
.ft2__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: clamp(32px, 5vw, 80px); }
.ft2__b { display: grid; gap: 12px; align-content: start; } .ft2__b .marca { color: #fff; } .ft2__b p { margin: 0; color: var(--on-dark-60); font-size: 15px; } .mail2 { color: #fff !important; }
.ft2__cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.ft2__cols h3 { margin: 0 0 12px; font: 500 12px/1 var(--font-doc); letter-spacing: .07em; text-transform: uppercase; color: var(--peach); }
.ft2__cols a { display: block; color: var(--on-dark-75); text-decoration: none; font-size: 14.5px; line-height: 1.3; padding: 5px 0; }
.ft2__bar { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--on-dark-20); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--on-dark-60); }
.ft2__note { margin: 14px 0 0; font: 500 11px/1 var(--font-doc); color: var(--peach); }
@media (max-width: 960px) {
  .f1 { grid-template-columns: 1fr; } .f2g { grid-template-columns: 1fr; } .f3u, .f3g { max-width: 92%; }
  .wl__in { grid-template-columns: 1fr; } .wm { grid-template-columns: repeat(3, 1fr); }
  .ft2__in { grid-template-columns: 1fr; } .ft2__cols { grid-template-columns: 1fr 1fr; }
}

/* ── G3 guide template (briefs/guia.css) ── */
:root { --disp: 'Fraunces', Georgia, serif; --azul: #D9E8FF; --azul-ink: #1D4F91; }
body { background: var(--paper); }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 40px); }
/* nav: the same five sections as the footer */
.gn { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px clamp(18px, 4vw, 40px); border-bottom: 1px solid var(--tint-10); background: var(--paper); position: sticky; top: 0; z-index: 20; }
.gn .marca { color: var(--ink-deep); }
.gn__l { display: flex; gap: 26px; } .gn__l a { color: var(--ink-60); text-decoration: none; font-size: 15px; } .gn__l a[aria-current] { color: var(--ink-deep); font-weight: 600; }
.gn__cta { background: var(--ink-deep); color: #fff; text-decoration: none; padding: 11px 18px; border-radius: var(--r-pill); font: 600 14px/1 var(--font-ui); }
.crumbs { margin: 0; display: flex; gap: 8px; font-size: 14px; color: var(--ink-50); } .crumbs a { color: var(--ink-60); }
h1 { margin: 0; font: 700 clamp(40px, 5vw, 68px)/1.03 var(--disp); letter-spacing: -.02em; color: var(--ink-deep); text-wrap: balance; }
.dek { margin: 0; font-size: clamp(18px, 1.4vw, 20px); line-height: 1.5; color: var(--ink-60); max-width: 52ch; }
.gmeta { margin: 0; display: flex; align-items: center; gap: 8px; font: 500 12px/1.3 var(--font-doc); letter-spacing: .03em; color: var(--ink-50); }
.gmeta .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--band-barato); box-shadow: 0 0 0 4px var(--band-barato-11); flex: none; }
/* G1 header */
.g1h { background: var(--cream); padding: clamp(40px, 5vw, 72px) 0 clamp(40px, 5vw, 64px); } .g1h .wrap { display: grid; gap: 18px; }
.g1b { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); padding-top: 48px; padding-bottom: 80px; }
.toc { position: sticky; top: 96px; align-self: start; display: grid; gap: 2px; }
.toc p { margin: 0 0 10px; font: 500 12px/1 var(--font-doc); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-50); }
.toc a { padding: 8px 0 8px 14px; border-left: 2px solid var(--tint-10); color: var(--ink-60); text-decoration: none; font-size: 15px; }
.toc a[aria-current] { border-color: var(--peach-ink); color: var(--ink-deep); font-weight: 600; }
.read { max-width: 720px; display: grid; gap: 56px; } .read.wide { max-width: 760px; margin: 0 auto; }
/* answer box: the AEO block — one sentence an assistant can quote, with its condition */
.ans { background: var(--ink-deep); color: #fff; border-radius: 28px; padding: 28px 30px; display: grid; gap: 10px; }
.ans__k { margin: 0; font: 500 12px/1 var(--font-doc); letter-spacing: .07em; text-transform: uppercase; color: var(--peach); }
.ans__t { margin: 0; font: 700 clamp(24px, 2.2vw, 30px)/1.2 var(--disp); } .ans__t b { color: var(--peach); font-weight: 700; }
.ans__s { margin: 0; font-size: 16px; line-height: 1.55; color: var(--on-dark-75); }
/* tool card */
.tool { background: #fff; border-radius: 28px; padding: 28px; box-shadow: 0 30px 70px rgba(41,18,16,.10); display: grid; gap: 4px; }
.tk { margin: 0; font: 500 12px/1 var(--font-doc); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-50); }
.tool h3 { margin: 6px 0 10px; font: 700 26px/1.15 var(--disp); color: var(--ink-deep); }
.row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid var(--tint-10); font-size: 16px; }
.row.col { display: grid; gap: 12px; } .rl { display: flex; justify-content: space-between; } .rl b { font-size: 18px; }
.in { border: 1px solid var(--tint-20); border-radius: 12px; padding: 10px 14px; min-width: 140px; text-align: right; }
.sl { position: relative; height: 8px; border-radius: 8px; background: var(--tint-10); margin: 8px 0 20px; }
.sl i { position: absolute; inset: 0 auto 0 0; background: var(--ink-deep); border-radius: 8px; }
.sl em { position: absolute; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; background: #fff; border: 3px solid var(--ink-deep); box-shadow: 0 4px 10px rgba(41,18,16,.2); }
.sl u { position: absolute; top: -6px; bottom: -6px; width: 2px; background: var(--band-barato); text-decoration: none; }
.sl u small { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); font: 600 12px/1 var(--font-doc); color: var(--band-barato); white-space: nowrap; }
.hint { margin: 0; font-size: 13.5px; color: var(--ink-50); }
.verd { margin-top: 8px; background: var(--peach-pale); border-radius: 18px; padding: 18px 20px; display: grid; gap: 6px; }
.verd small { font-size: 13px; color: var(--ink-60); } .verd b { font: 700 22px/1.2 var(--disp); color: var(--ink-deep); } .verd span { font-size: 15px; color: var(--ink-60); }
.ghost { margin-top: 12px; width: 100%; padding: 16px; border: 1.5px solid var(--ink-deep); background: transparent; border-radius: var(--r-pill); font: 600 16px/1.2 var(--font-ui); color: var(--ink-deep); display: grid; gap: 4px; cursor: pointer; }
.ghost small { font-weight: 400; font-size: 13px; color: var(--ink-50); }
/* sections */
.sec { display: grid; gap: 16px; } .sec h2, .rel h2 { margin: 0; font: 700 clamp(28px, 2.6vw, 38px)/1.1 var(--disp); letter-spacing: -.015em; color: var(--ink-deep); }
.sec p { margin: 0; font-size: 17.5px; line-height: 1.65; color: var(--ink); max-width: 64ch; } .lead2 { color: var(--ink-60) !important; font-size: 16px !important; }
.nota { background: var(--cream); border-radius: 16px; padding: 16px 18px; font-size: 16px !important; } .fp { display: block; margin-top: 6px; font: 500 12px/1.3 var(--font-doc); color: var(--peach-ink); }
.evq { display: grid; gap: 12px; padding: 24px; background: var(--cream); border-radius: 24px; }
.bub { justify-self: end; max-width: 80%; background: var(--azul) !important; color: var(--ink-deep); border-radius: 20px 20px 4px 20px; padding: 14px 18px; font-size: 16.5px !important; line-height: 1.4 !important; }
.gb { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: end; max-width: 88%; }
.gb .av { width: 34px; height: 34px; border-radius: 10px; background: var(--peach); display: grid; place-items: center; color: var(--ink-deep); } .gb .av svg { width: 26px; height: 26px; }
.gb p { background: var(--ink-deep); color: #fff; border-radius: 20px 20px 20px 4px; padding: 14px 18px; font-size: 16.5px !important; line-height: 1.45 !important; }
.door { justify-self: start; font: 600 16px/1 var(--font-ui); color: var(--ink-deep); text-decoration: none; border-bottom: 2px solid var(--peach); padding-bottom: 4px; }
/* Steps: a vertical blue line (the owner picked S3, 2026-10-28). Numbers in blue circles, joined by a line, no boxes. */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: s; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 44px 1fr; gap: 4px 16px; padding: 0 0 26px; position: relative; }
.steps li::before { content: counter(s); grid-row: span 2; width: 44px; height: 44px; border-radius: 50%; background: var(--azul); color: var(--azul-ink); border: 2px solid var(--azul-ink); box-sizing: border-box; display: grid; place-items: center; font: 700 20px/1 var(--disp); position: relative; z-index: 1; }
.steps li:not(:last-child)::after { content: ""; position: absolute; left: 21px; top: 46px; bottom: 0; width: 2px; background: var(--azul-ink); opacity: .35; }
.steps b { font-size: 17.5px; color: var(--ink-deep); } .steps span { font-size: 16px; line-height: 1.5; color: var(--ink-60); }
.ofl { list-style: none; margin: 0; padding: 0; border-radius: 20px; overflow: hidden; border: 1px solid var(--tint-10); background: #fff; }
.ofl li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 20px; border-top: 1px solid var(--tint-10); }
.ofl li:first-child { border-top: 0; background: var(--band-barato-11); }
.ofl .n { font: 600 14px/1 var(--font-doc); color: var(--ink-50); } .ofl .o { display: grid; gap: 2px; min-width: 0; } .ofl .o b { font-size: 16px; } .ofl .o small { font-size: 14px; color: var(--ink-60); }
.ofl .p { font: 700 20px/1 var(--disp); color: var(--ink-deep); white-space: nowrap; } .ofl .p small { font: 400 13px/1 var(--font-ui); color: var(--ink-50); }
.gfaq { display: grid; gap: 10px; }
.gfaq .f1q { background: #fff; border: 1px solid var(--tint-10); border-radius: 18px; padding: 0 20px; }
.gfaq summary { list-style: none; display: flex; justify-content: space-between; gap: 12px; padding: 18px 0; font: 600 17px/1.3 var(--font-ui); color: var(--ink-deep); cursor: pointer; } .gfaq summary::-webkit-details-marker { display: none; }
.gfaq summary span { font-size: 22px; color: var(--peach-ink); } .gfaq details p { margin: 0 0 18px; font-size: 16.5px; line-height: 1.55; color: var(--ink-60); }
.src { border-top: 1px solid var(--tint-10); padding-top: 24px; display: grid; gap: 8px; font-size: 14px; color: var(--ink-60); }
.src h3 { margin: 0; font: 500 12px/1 var(--font-doc); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-50); } .src ul { margin: 0; padding-left: 18px; } .src p { margin: 0; } .src a { color: var(--ink); }
/* related: the home's photo cards, smaller */
.rel { background: var(--cream); padding: clamp(64px, 7vw, 96px) clamp(18px, 4vw, 40px); }
.rel h2 { max-width: 1180px; margin: 0 auto 28px; }
.relg { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.rc { position: relative; display: grid; align-content: end; gap: 6px; min-height: 300px; padding: 22px; border-radius: 24px; overflow: hidden; color: #fff; text-decoration: none; isolation: isolate; }
.rc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.rc::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(41,18,16,.85), rgba(41,18,16,0) 60%); }
.rc .k { font: 500 12px/1 var(--font-doc); letter-spacing: .07em; text-transform: uppercase; color: var(--peach); } .rc b { font: 700 24px/1.15 var(--disp); }
.gstrip { background: var(--azul); padding: clamp(48px, 5vw, 72px) clamp(18px, 4vw, 40px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 32px; align-items: center; }
.gstrip h2 { margin: 0; font: 700 clamp(28px, 2.6vw, 38px)/1.1 var(--disp); color: var(--ink-deep); } .gstrip p { margin: 8px 0 0; font-size: 17px; color: var(--ink-60); }
.gstrip .mail button { background: var(--ink-deep); color: #fff; }
/* G2 */
.g2h { background: var(--cream); padding: clamp(40px, 5vw, 72px) 0; }
.g2hi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px); gap: clamp(32px, 5vw, 80px); align-items: center; }
.g2t { display: grid; gap: 20px; } .g2t .pontos2 { margin: 0; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 48px auto 0; }
.facts div { background: #fff; border: 1px solid var(--tint-10); border-radius: 24px; padding: 24px; display: grid; gap: 8px; }
.facts b { font: 700 44px/1 var(--disp); color: var(--ink-deep); } .facts span { font-size: 15.5px; line-height: 1.45; color: var(--ink-60); }
.g2b { padding-top: 64px; padding-bottom: 80px; }
@media (max-width: 960px) {
  .gn__l { display: none; }
  .g1b, .g2hi, .gstrip { grid-template-columns: 1fr; } .toc { display: none; }
  .relg, .facts { grid-template-columns: 1fr; } .rc { min-height: 220px; }
  .tool { padding: 22px; } .ans { padding: 24px; }
  .bub, .gb { max-width: 100%; }
}
.row.col { grid-template-columns: minmax(0, 1fr); width: 100%; } .rl, .sl { width: 100%; }
.mail { display: flex; gap: 10px; flex-wrap: wrap; }
.mail input { flex: 1 1 240px; min-width: 0; height: 56px; padding: 0 24px; border: 0; border-radius: var(--r-pill); font: 400 17px/1 var(--font-ui); color: var(--ink); background: #fff; }
.mail button { height: 56px; padding: 0 26px; border: 0; border-radius: var(--r-pill); font: 600 16px/1 var(--font-ui); cursor: pointer; }
/* G3 · sections built from goals */
.b { padding: clamp(64px, 7vw, 104px) 0; } .b h2 { margin: 0; font: 700 clamp(30px, 3vw, 44px)/1.08 var(--disp); letter-spacing: -.015em; color: var(--ink-deep); text-wrap: balance; }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; } .two > div:first-child { display: grid; gap: 18px; }
.b .lead2 { margin: 0; font-size: 18px; line-height: 1.55; color: var(--ink-60); max-width: 46ch; }
.b2 { background: var(--paper); } .b2 .wrap { display: grid; gap: 36px; }
.lim { position: relative; padding-top: 44px; }
.lim__bar { display: flex; height: 64px; border-radius: 18px; overflow: hidden; font: 600 14px/1.2 var(--font-ui); }
.lim__bar span { display: flex; align-items: center; padding: 0 18px; } .z1 { background: var(--cream); color: var(--ink-60); } .z2 { background: var(--band-barato-11); color: var(--band-barato); justify-content: flex-end; }
.lim i { position: absolute; top: 0; bottom: 26px; width: 0; border-left: 2px solid; font-style: normal; } .lim i b { position: absolute; top: 0; left: 8px; white-space: nowrap; font: 600 14px/1 var(--font-doc); }
.lim__you { color: var(--ink-deep); } .lim__t { color: var(--band-barato); border-left-style: dashed !important; }
.lim__ax { display: flex; justify-content: space-between; margin-top: 8px; font: 500 12px/1 var(--font-doc); color: var(--ink-50); }
.why3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.why3 div { background: #fff; border: 1px solid var(--tint-10); border-radius: 22px; padding: 22px; display: grid; gap: 8px; align-content: start; }
.why3 b { font: 700 30px/1 var(--disp); color: var(--ink-deep); } .why3 p { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--ink-60); } .why3 a { color: var(--ink); }
.b3 { background: var(--cream); }
.best { background: #fff; border-radius: 28px; padding: 28px; box-shadow: 0 30px 70px rgba(41,18,16,.10); display: grid; gap: 10px; }
.best__p { margin: 0; font: 700 48px/1 var(--disp); color: var(--ink-deep); } .best__p small { font: 400 15px/1 var(--font-ui); color: var(--ink-50); margin-left: 6px; }
.best__o { margin: 0; font-size: 16px; color: var(--ink-60); } .best__o b { color: var(--ink-deep); }
.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .tags li { font-size: 13px; padding: 5px 10px; border-radius: var(--r-pill); background: var(--band-barato-11); color: var(--band-barato); }
.ofl.mini { margin-top: 8px; } .ofl.mini li:first-child { background: transparent; } .ofl.mini .p { font-size: 17px; }
.b4 { background: var(--ink-deep); color: #fff; } .b4 h2 { color: #fff; } .b4 .lead2 { color: var(--on-dark-75); } .b4 .tk { color: var(--peach); }
.evc { background: rgba(255,255,255,.06); border: 1px solid var(--on-dark-20); border-radius: 28px; padding: 28px; display: grid; gap: 16px; }
.evc__q { margin: 0; font: 700 22px/1.2 var(--disp); }
.kms { display: flex; flex-wrap: wrap; gap: 8px; } .kms span { padding: 12px 16px; border-radius: 18px 18px 4px 18px; background: var(--azul); color: var(--ink-deep); font-size: 15px; } .kms span.sel { background: var(--azul-ink); color: #fff; font-weight: 600; }
.evc__r { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; } .evc__r > span { font-size: 24px; color: var(--on-dark-60); }
.evc__r div { border-radius: 18px; padding: 16px; background: rgba(255,255,255,.06); display: grid; gap: 4px; } .evc__r div.on { background: var(--band-barato); }
.evc__r small { font-size: 13px; color: var(--on-dark-75); } .evc__r b { font: 700 36px/1 var(--disp); }
.evc__n { margin: 0; font-size: 14px; line-height: 1.5; color: var(--on-dark-60); } .b4 .fp { color: var(--peach); }
.b4 .door { color: #fff; }
.b5 { background: var(--azul); } .b5 .wchat { gap: 16px; } .b5 .wm3 span { min-width: 0; padding: 0 16px; }
.b5 .mail input { background: var(--cream); } .b5 .mail button { background: var(--ink-deep); color: #fff; }
.b6 { background: var(--paper); } .fq6 { max-width: 820px; display: grid; gap: 24px; }
@media (max-width: 960px) { .two, .why3 { grid-template-columns: 1fr; } .lim__bar { font-size: 12px; } .lim__bar span { padding: 0 10px; } }
.rel.b h2 { max-width: 1180px; margin: 0 auto 28px; }
.rel.b { padding-left: clamp(18px, 4vw, 40px); padding-right: clamp(18px, 4vw, 40px); } /* .b (above) zeroes the side padding .rel sets: on a phone the cards touched the screen edge */
@media (max-width: 960px) {
  .lim__you b { left: auto; right: 8px; }
  .z1, .z2 { font-size: 0 !important; } .z1::after { content: "simples"; font-size: 13px; } .z2::after { content: "bi-horário"; font-size: 13px; }
  .b5 .mail button, .gstrip .mail button { width: 100%; }
}
.b4 .lead2 { color: var(--on-dark-75) !important; }

/* ── hub template (briefs/hub.css) ── */
:root { --m1: #0F7A5A; --m2: #5FA88B; --m3: #EFCB7B; --m4: #F2A66E; --m5: #C2410C; --m0: #EEEBE9; }
select.in { font: 400 16px/1.2 var(--font-ui); color: var(--ink); appearance: none; -webkit-appearance: none; cursor: pointer;
  padding-right: 36px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%2347201C'/%3E%3C/svg%3E") no-repeat right 14px center; } /* the one select style (QA E15), was only on .g3b */
.seg { display: inline-flex; padding: 4px; gap: 4px; border-radius: var(--r-pill); background: var(--tint-10); justify-self: start; }
.seg button { border: 0; background: transparent; padding: 9px 14px; border-radius: var(--r-pill); font: 500 14px/1 var(--font-ui); color: var(--ink-60); cursor: pointer; }
.seg button[aria-selected] { background: var(--ink-deep); color: #fff; }
.tool .ofl.mini { margin: 6px 0 2px; } .tool .ofl.mini li:first-child { background: var(--band-barato-11); }
.tool .ofl .p small { font-size: 12px; }
a.ghost { text-align: center; text-decoration: none; }
/* 2 · map */
.hmap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.hmap__t { display: grid; gap: 18px; position: sticky; top: 96px; }
.hmap__m { max-width: 560px; justify-self: center; width: 100%; }
.hmap__m svg { width: 100%; height: auto; display: block; }
.hmap__m .cm { fill: var(--m0); stroke: #fff; stroke-width: 1.2; cursor: pointer; transition: opacity .15s; }
.hmap__m .cm:hover { opacity: .8; } .hmap__m .cm.on { stroke: var(--ink-deep); stroke-width: 3.5; }
.hmap__m[data-c="dc"] .cm[data-dc="1"], .hmap__m[data-c="ac"] .cm[data-ac="1"] { fill: var(--m1); }
.hmap__m[data-c="dc"] .cm[data-dc="2"], .hmap__m[data-c="ac"] .cm[data-ac="2"] { fill: var(--m2); }
.hmap__m[data-c="dc"] .cm[data-dc="3"], .hmap__m[data-c="ac"] .cm[data-ac="3"] { fill: var(--m3); }
.hmap__m[data-c="dc"] .cm[data-dc="4"], .hmap__m[data-c="ac"] .cm[data-ac="4"] { fill: var(--m4); }
.hmap__m[data-c="dc"] .cm[data-dc="5"], .hmap__m[data-c="ac"] .cm[data-ac="5"] { fill: var(--m5); }
.mpanel { background: #fff; border: 1px solid var(--tint-10); border-radius: 22px; padding: 20px 22px; display: grid; gap: 6px; }
.mpanel b { font: 700 26px/1.1 var(--disp); color: var(--ink-deep); } .mpanel span { font-size: 15px; color: var(--ink-60); }
.mpanel ol { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 4px; font-size: 15px; } .mpanel ol i { font-style: normal; font-weight: 600; float: right; }
.leg { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font: 500 12.5px/1 var(--font-doc); color: var(--ink-60); }
.leg li { display: flex; align-items: center; gap: 6px; } .sw { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.s1 { background: var(--m1); } .s2 { background: var(--m2); } .s3 { background: var(--m3); } .s4 { background: var(--m4); } .s5 { background: var(--m5); }
.hmap[data-c="ac"] .leg--dc, .hmap:not([data-c="ac"]) .leg--ac { display: none; }
.legu { margin: -8px 0 0; font-size: 13px; color: var(--ink-50); }
.parts { background: var(--cream); border-radius: 22px; padding: 22px; display: grid; gap: 10px; }
.parts__h { margin: 0; font-weight: 600; color: var(--ink-deep); }
.pbar { display: flex; height: 58px; border-radius: 14px; overflow: hidden; font-size: 12.5px; }
.pbar span { display: grid; align-content: center; padding: 0 12px; color: #fff; gap: 2px; } .pbar b { font: 700 17px/1 var(--disp); }
.p1 { background: var(--ink-deep); } .p2 { background: var(--peach-ink); } .p3 { background: var(--peach); }
.parts__n { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-60); } .parts__n b { color: var(--ink-deep); }
/* 3 · ranking */
.rk__h, .ofl.rk li { display: grid; grid-template-columns: 28px minmax(0, 1fr) 64px 64px; gap: 12px; align-items: center; }
.rk__h { padding: 0 20px; font: 500 12px/1 var(--font-doc); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-50); } .rk__h span:nth-child(n+3) { text-align: right; }
.ofl.rk li { padding: 13px 20px; } .ofl.rk .c { text-align: right; font: 500 16px/1 var(--font-ui); color: var(--ink-60); } .ofl.rk .p { text-align: right; font-size: 18px; }
.steps em.fp { font-style: normal; display: inline; }
/* 4 · 100 km */
.cem { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cem li { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr) 76px; gap: 12px; align-items: center; font-size: 14.5px; }
.cem .bl { color: var(--on-dark-75); } .cem .bt { height: 14px; border-radius: 8px; background: rgba(255,255,255,.08); overflow: hidden; } .cem .bt i { display: block; height: 100%; border-radius: 8px; }
.cem .casa i { background: var(--band-barato); } .cem .rua i { background: var(--peach); } .cem .fossil i { background: var(--on-dark-60); }
.cem b { font: 700 18px/1 var(--disp); text-align: right; white-space: nowrap; }
/* 6 · districts */
.b6d { background: var(--cream); } .b6d .wrap { display: grid; gap: 14px; }
@media (max-width: 960px) {
  .hmap { grid-template-columns: 1fr; } .hmap__t { position: static; } .hmap__m { max-width: 420px; }
  .cem li { grid-template-columns: minmax(0, 1fr) 70px; } .cem .bt { grid-column: 1 / -1; grid-row: 2; }
  .pbar span { padding: 0 8px; font-size: 11px; } .pbar b { font-size: 15px; }
}
@media (max-width: 600px) {
  .best { padding: 20px 16px; }
  .rk__h, .ofl.rk li { grid-template-columns: 18px minmax(0, 1fr) 48px 52px; gap: 8px; } .rk__h { padding: 0 12px; } .ofl.rk li { padding: 12px; }
  .ofl.rk .c { font-size: 14px; } .ofl.rk .p { font-size: 16px; } .ofl.rk .o b { font-size: 15px; } .ofl.rk .o small { font-size: 12.5px; }
  .tool .row:not(.col) { flex-direction: column; align-items: stretch; gap: 8px; } .tool .row .in { text-align: left; } .tool .seg { justify-self: stretch; } .tool .seg button { flex: 1; }
  .tool .ofl.mini li { padding: 12px 14px; grid-template-columns: 22px minmax(0, 1fr) auto; }
}
.seg button { white-space: nowrap; }
.cem--l li { grid-template-columns: minmax(0, 1fr) 70px; } .cem--l .bt { grid-column: 1 / -1; grid-row: 2; background: var(--tint-10); } .cem--l .bl { color: var(--ink-60); } .cem--l b { color: var(--ink-deep); }