/* Hallmark · shape: Workbench · genre: modern-minimal · theme: brand · redesign: full · job: buy
 * paper: oklch(93.4% 0.007 85) · accent: oklch(80.5% 0.155 100) · display: Funnel Sans · body: Funnel Sans · figures: Doto (round dots) · hero: Counter · nav: floating pill · footer: mast · signature: the first screen is the purchase; the wave leaves the chosen format and the price re-forms dot by dot
 * axes: light/grotesk-sans/chromatic-citrine · posture: committed (petroleum field) · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: E, a live configurator has many states; every one is CSS-driven so the page works without script */
/* Hallmark · waive 44c · readout column centre within 30px of the keys column centre · the Counter visual is the whole buy box (diagram, price, terms, action); the linter measures only its diagram figure */
/* Hallmark · waive 11 · only the hero WhatsApp button, at most 4px of pull on fine pointers, off under reduced motion · the matriz names a subtle magnetic primary as part of Pulso's configurator feedback */
/* Hallmark · dismissed 42 · a floating pill named in the stamp: the dot wordmark, four links and one quiet WhatsApp action, no hairline bar */
/* Hallmark · answered F7 · .wordmark, .menu a and .burger are the pill nav's own links and button; the route tag moved to the card radius */
/* Hallmark · dropped https://wa.me/5568999267597 · the bare link went: every WhatsApp link now carries a ready pt-BR message in ?text=, per the round-4 rules */
/* Hallmark · reworded "Seu cliente aproxima o celular e chega direto ao seu WhatsApp." to "Cartões e placas NFC a partir de R$ 50." · the matriz sets the Counter headline; 38i named its italic phrase */
/* Hallmark · reworded "O que a Kepzen faz pelo seu negócio." to "O que o toque abre." · 38i named the italic phrase; the section now shows the two options once */
/* Hallmark · reworded "Três jeitos de trabalhar com a Kepzen." to "A tabela inteira, com cada taxa." · the old head promised three ways over a two-column table */
/* Hallmark · reworded "Vamos conversar sobre o seu negócio?" to "Seu pedido, direto no WhatsApp." · 38i named the italic phrase; the close names the visitor's configured order */
/* Hallmark · dropped "Cartões e placas NFC", "Serviços digitais", "Kepzen PDV" · these h3 are now the hero, the h2 "Sites, marca, redes e automações." (the four services by name) and an Em breve entry; the PDV feature list is cut by the round-4 content rule */
/* Hallmark · dropped "Soluções", "Institucional", "Contato" · the footer column heads went: F21 named the h2 to h4 jump; the mast lists its links without column heads */
/* Hallmark · dropped dots, tap, i-arr, i-doc, i-img, i-logo, i-nfc, i-prof · the faux QR (82), the CSS tap marker and the old icon set left with the old hero */
/* Hallmark · reworded "$24,90" and "$29,90" to "R$ 24,90." and "R$ 29,90." · 63 named the middle-dot fee string; every fee stays on the page, now ending a sentence */
@import url("./tokens.css");
@import url("./base.css");

/* ------------------------------------------------------------------ base surfaces */
html { scroll-padding-top: calc(var(--space-3xl) + var(--space-xs)); }
body { font-size: 1.0625rem; line-height: 1.55; font-synthesis: none; }
::selection { background: var(--color-accent); color: var(--color-accent-ink); }
a { text-underline-offset: 0.2em; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 20px; height: 20px; flex-shrink: 0; }
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper-hi); border-radius: var(--radius-card); }
.skip:focus-visible { top: var(--space-md); }

/* ------------------------------------------------------------------ controls */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 52px; padding: 0 var(--space-lg); border: 1px solid transparent; border-radius: var(--radius-pill); font: 600 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transform: translate(var(--mx, 0px), var(--my, 0px)); transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
.btn--primary { background: var(--color-field); color: var(--color-paper-hi); }
.btn--primary:hover { background: var(--color-ink); }
.btn--quiet { background: transparent; color: var(--color-field); border-color: var(--color-rule-strong); }
.btn--quiet:hover { background: var(--color-paper-2); border-color: var(--color-field); }
.btn--sm { min-height: 44px; padding: 0 var(--space-md); font-size: var(--text-sm); }
.btn:active { transform: translate(var(--mx, 0px), calc(var(--my, 0px) + 1px)); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.text-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-field); font-weight: 600; text-decoration: underline; text-decoration-color: var(--color-rule-strong); transition: text-decoration-color var(--dur-short) var(--ease-out); }
.text-link:hover { text-decoration-color: var(--color-field); }

/* ------------------------------------------------------------------ nav: floating pill, solid */
.top { position: fixed; inset: var(--space-md) 0 auto; z-index: var(--z-sticky-nav); padding-inline: var(--space-md); pointer-events: none; }
.shot .top { position: absolute; }
.pill { position: relative; pointer-events: auto; max-width: 58rem; margin-inline: auto; display: flex; align-items: center; gap: var(--space-md); min-height: 60px; padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-lg); background: var(--color-paper-hi); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); box-shadow: var(--shadow-card); }
.wordmark { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-figure); font-weight: 900; font-size: 2rem; line-height: 1; color: var(--color-field); text-decoration: none; -webkit-text-stroke: 0.6px currentColor; }
.wordmark:focus-visible, .menu a:focus-visible, .burger:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-pill); }
.menu { display: flex; align-items: center; gap: var(--space-2xs); margin: 0 0 0 auto; padding: 0; list-style: none; }
.menu a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-sm); border-radius: var(--radius-pill); color: var(--color-ink-2); font-size: 0.9375rem; text-decoration: none; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.menu a:not(.btn):hover { background: var(--color-paper-2); color: var(--color-ink); }
.menu-cta { margin-left: var(--space-xs); }
.burger { display: none; position: relative; width: 44px; height: 44px; margin-left: auto; border: 1px solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-paper-hi); color: var(--color-ink); cursor: pointer; }
.burger span { position: absolute; left: 13px; right: 13px; height: 1.5px; background: currentColor; border-radius: 1px; transition: transform var(--dur-short) var(--ease-in-out); }
.burger span:first-child { transform: translateY(-4px); }
.burger span:last-child { transform: translateY(4px); }
.burger[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }
.burger:hover { background: var(--color-paper-2); }
.burger:active { transform: translateY(1px); }

/* ------------------------------------------------------------------ hero: the counter */
.hero { position: relative; isolation: isolate; min-height: 100svh; display: grid; align-items: start; padding-block: calc(var(--space-3xl) + var(--space-xl)) var(--space-2xl); }
.stage { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
#gl { display: block; width: 100%; height: 100%; }
.nogl .stage, html:not(.js) .stage { background: var(--color-paper) url("campo-still.webp") center bottom / cover no-repeat; }
.nogl #gl { display: none; }
.counter { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-3xl); row-gap: var(--space-xl); align-items: start; }
.counter-head { grid-column: 1; grid-row: 1; }
.hero h1 { max-width: 13em; font-size: var(--text-display); font-weight: var(--display-weight); letter-spacing: var(--tracking-display); line-height: 1; color: var(--color-ink); }
.hero .lead { margin-top: var(--space-lg); max-width: 34ch; color: var(--color-ink-2); }
.nw { white-space: nowrap; }
.config { grid-column: 1; grid-row: 2; display: grid; gap: var(--space-lg); }
.display { grid-column: 2; grid-row: 1 / span 2; align-self: start; }

/* the keys: native radios in the counter's vocabulary */
.keys { min-width: 0; margin: 0; padding: 0; border: 0; }
.keys legend { padding: 0; margin-bottom: var(--space-sm); font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-2); }
.keys-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); }
.keys input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.keys label { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-sm); min-height: 64px; padding: var(--space-sm) var(--space-md); background: var(--color-paper-hi); border: 1px solid var(--color-rule); border-radius: var(--radius-key); color: var(--color-ink); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.keys--opt label { grid-template-columns: minmax(0, 1fr); }
.keys label:hover { border-color: var(--color-rule-strong); }
.keys input:checked + label { background: var(--color-field); border-color: var(--color-field); color: var(--color-paper-hi); }
.keys input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.keys input:disabled + label { opacity: 0.55; cursor: not-allowed; }
.keys label:active { transform: translateY(1px); }
.glyph { width: 32px; height: 32px; color: var(--color-field); transition: color var(--dur-short) var(--ease-out); }
.keys input:checked + label .glyph { color: var(--color-accent); }
.k-name { display: block; font-weight: 600; line-height: 1.25; }
.k-name small { display: block; margin-top: var(--space-3xs); font-size: var(--text-sm); font-weight: 400; color: var(--color-muted); }
.keys input:checked + label small { color: var(--color-on-field-muted); }

/* the readout: diagram, price, terms, action */
.diagram { margin: 0; }
.dg { width: 100%; max-width: 23rem; height: auto; aspect-ratio: 420 / 270; overflow: visible; }
@property --draw { syntax: "<number>"; inherits: true; initial-value: 1; }
.dg-f { opacity: 0; --draw: 1; transition: opacity var(--dur-short) var(--ease-out), --draw 640ms var(--ease-out); }
.dg .face { fill: var(--color-paper-hi); stroke: var(--color-field); stroke-width: 1.6; stroke-dasharray: 1 1; stroke-dashoffset: var(--draw); }
.dg .part, .dg .qr rect { fill: none; stroke: var(--color-field); stroke-width: 1.4; }
.dg .qr .pip { fill: var(--color-field); stroke: none; }
.dg .arc { fill: none; stroke: var(--color-field-2); stroke-width: 2.4; stroke-linecap: round; }
.dg .ground { fill: none; stroke: var(--color-rule-strong); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: var(--draw); }
.dg .lead-line { fill: none; stroke: var(--color-muted); stroke-width: 1; }
.dg .side { fill: var(--color-paper-2); stroke: var(--color-field); stroke-width: 1.4; stroke-linejoin: round; }
.dg .hollow { fill: var(--color-paper); stroke: var(--color-field); stroke-width: 1.2; stroke-linejoin: round; }
.dg .slot { fill: none; stroke: var(--color-accent-ink); stroke-width: 3; stroke-linecap: round; }
.dg .sticker { fill: var(--color-paper); stroke: var(--color-field-2); stroke-width: 1.2; }
.dg .art { fill: var(--color-field); font-family: var(--font-body); font-weight: 600; }
.dg .art-line { fill: none; stroke: var(--color-rule-strong); stroke-width: 3; stroke-linecap: round; }
.dg .star { fill: none; stroke: var(--color-field-2); stroke-width: 1.2; stroke-linejoin: round; }
.dg .grain { fill: url(#grao); }
.dg .grain-bg { fill: var(--color-paper-hi); }
.dg .grain-dot { fill: var(--color-rule-strong); }
.dg .lbl { fill: var(--color-ink-2); font: 600 18px var(--font-body); }
.dg .ctx { fill: var(--color-muted); font: 400 17px var(--font-body); }
.diagram figcaption { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }

.price { display: flex; align-items: flex-start; gap: var(--space-sm); margin: var(--space-lg) 0 0; color: var(--color-field); font-variant-numeric: tabular-nums; }
.price .cur { margin-top: 0.3em; font: 600 var(--text-2xl)/1 var(--font-body); }
.digits { display: inline-flex; font-family: var(--font-figure); font-weight: 900; font-size: clamp(7.5rem, 14.5vw + 1rem, 15rem); line-height: 0.82; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.digits .dg-n { display: inline-block; }
.choice { margin-top: var(--space-md); font-size: var(--text-lg); font-weight: 600; line-height: 1.3; color: var(--color-ink); text-wrap: balance; }
.includes { margin-top: var(--space-2xs); color: var(--color-ink-2); }
.c-fmt, .c-opt { display: none; }
.display[data-fmt="cartao"] .dg-cartao, .display[data-fmt="pequena"] .dg-pequena, .display[data-fmt="media"] .dg-media, .display[data-fmt="grande"] .dg-grande,
.hero:has(#f-cartao:checked) .dg-cartao, .hero:has(#f-pequena:checked) .dg-pequena, .hero:has(#f-media:checked) .dg-media, .hero:has(#f-grande:checked) .dg-grande { opacity: 1; --draw: 0; }
.display[data-fmt="cartao"] .c-fmt[data-v="cartao"], .display[data-fmt="pequena"] .c-fmt[data-v="pequena"], .display[data-fmt="media"] .c-fmt[data-v="media"], .display[data-fmt="grande"] .c-fmt[data-v="grande"],
.display[data-opt="link"] .c-opt[data-v="link"], .display[data-opt="perfil"] .c-opt[data-v="perfil"],
.hero:has(#f-cartao:checked) .c-fmt[data-v="cartao"], .hero:has(#f-pequena:checked) .c-fmt[data-v="pequena"], .hero:has(#f-media:checked) .c-fmt[data-v="media"], .hero:has(#f-grande:checked) .c-fmt[data-v="grande"],
.hero:has(#o-link:checked) .c-opt[data-v="link"], .hero:has(#o-perfil:checked) .c-opt[data-v="perfil"] { display: inline; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-lg); margin-top: var(--space-xl); }

/* without script the price still follows the keys (CSS :has), the message stays generic */
html:not(.js) .digits { display: none; }
html:not(.js) .price::after { content: "50"; font-variant-numeric: tabular-nums; font-family: var(--font-figure); font-weight: 900; font-size: clamp(7.5rem, 14.5vw + 1rem, 15rem); line-height: 0.82; letter-spacing: -0.02em; }
html:not(.js) .hero:has(#f-cartao:checked):has(#o-perfil:checked) .price::after { content: "80"; }
html:not(.js) .hero:has(#f-pequena:checked):has(#o-link:checked) .price::after { content: "60"; }
html:not(.js) .hero:has(#f-pequena:checked):has(#o-perfil:checked) .price::after { content: "100"; }
html:not(.js) .hero:has(#f-media:checked):has(#o-link:checked) .price::after { content: "70"; }
html:not(.js) .hero:has(#f-media:checked):has(#o-perfil:checked) .price::after { content: "110"; }
html:not(.js) .hero:has(#f-grande:checked):has(#o-link:checked) .price::after { content: "80"; }
html:not(.js) .hero:has(#f-grande:checked):has(#o-perfil:checked) .price::after { content: "120"; }
html:not(.js) .burger { display: none; }

/* ------------------------------------------------------------------ shared section parts */
.split-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-3xl); align-items: end; margin-bottom: var(--space-2xl); }
.stack-head { margin-bottom: var(--space-2xl); }
.stack-head .lead { margin-top: var(--space-md); max-width: 44ch; color: var(--color-ink-2); }
.split-head h2, .stack-head h2, .close h2 { font-size: var(--text-section); font-weight: var(--display-weight); letter-spacing: -0.03em; line-height: 1.02; max-width: 16ch; }
.split-head .lead { color: var(--color-ink-2); max-width: 40ch; }
h3 { font-weight: 600; letter-spacing: -0.015em; }

/* ------------------------------------------------------------------ o que o toque abre */
.opts { padding-block: var(--section-gap) var(--section-gap-s); border-top: 1px solid var(--color-rule); }
.opts-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.opt { display: grid; grid-template-rows: auto auto 1fr; align-content: start; min-width: 0; }
.opt + .opt { padding-left: var(--space-2xl); border-left: 1px solid var(--color-rule); }
.opt:first-child { padding-right: var(--space-2xl); }
.opt h3 { font-size: var(--text-title); }
.opt > p { margin-top: var(--space-sm); max-width: 46ch; color: var(--color-ink-2); }
.routes, .page-fig { margin: var(--space-xl) 0 0; }
.route-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-rule); }
.route-list li { display: flex; align-items: center; gap: var(--space-md); min-height: 72px; border-bottom: 1px solid var(--color-rule); font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.02em; color: var(--color-muted); }
.route-list .ico { width: 24px; height: 24px; }
.route-list li.is-on { color: var(--color-ink); }
.route-list li.is-on .ico { color: var(--color-field); }
.route-list .now { margin-left: auto; padding: var(--space-3xs) var(--space-sm); border-radius: var(--radius-card); background: var(--color-field); color: var(--color-paper-hi); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0; }
.routes figcaption, .page-fig figcaption { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }
.page-fig { display: grid; justify-items: center; text-align: center; }
.page-sample { width: min(100%, 19rem); aspect-ratio: 9 / 14; border-radius: 28px; background: var(--color-paper-hi); outline: 1px solid var(--color-rule-strong); outline-offset: -1px; box-shadow: var(--shadow-card); }
.ps-cover { height: 34%; background: var(--color-field); }
.ps-body { position: relative; padding: 0 var(--space-lg) var(--space-lg); }
.ps-logo { display: grid; place-items: center; width: 64px; height: 64px; margin-top: -32px; border-radius: 50%; background: var(--color-accent); color: var(--color-accent-ink); border: 3px solid var(--color-paper-hi); font-weight: 600; font-size: var(--text-md); }
.ps-name { margin-top: var(--space-sm); font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.02em; color: var(--color-ink); }
.ps-meta { margin-top: var(--space-3xs); font-size: var(--text-sm); color: var(--color-muted); }
.ps-btns { display: grid; gap: var(--space-xs); margin: var(--space-md) 0 0; padding: 0; list-style: none; }
.ps-btns li { display: flex; align-items: center; gap: var(--space-xs); min-height: 40px; padding: 0 var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); }
.ps-btns li.is-main { background: var(--color-field); border-color: var(--color-field); color: var(--color-paper-hi); }
.ps-btns .ico { width: 16px; height: 16px; }

/* ------------------------------------------------------------------ como funciona */
.steps { padding-block: var(--section-gap-s); background: var(--color-paper-2); }
.step-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap-columns); margin: 0; padding: 0; list-style: none; counter-reset: passo; }
.step-list li { counter-increment: passo; padding-top: var(--space-lg); border-top: 1px solid var(--color-rule-strong); }
.step-list li::before { content: counter(passo); display: block; margin-bottom: var(--space-lg); font-family: var(--font-figure); font-weight: 900; font-size: clamp(5rem, 7vw, 7.5rem); line-height: 0.8; color: var(--color-field); }
.step-list h3 { font-size: var(--text-title); }
.step-list p { margin-top: var(--space-xs); max-width: 30ch; color: var(--color-ink-2); }

/* ------------------------------------------------------------------ trabalho recente: a placa grande real, uma vez */
.work { padding-block: var(--section-gap-s); }
.work-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-3xl); align-items: center; }
.work-fig { margin: 0; justify-self: start; width: min(100%, 24rem); }
.plate { padding: 3%; border-radius: var(--radius-card); background-color: var(--color-plate); background-image: radial-gradient(var(--color-plate-grain) 0.6px, transparent 0.8px); background-size: 4px 4px; box-shadow: var(--shadow-card); }
.plate img { width: 100%; height: auto; border-radius: 2px; }
.work-fig figcaption { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-ink-2); max-width: 44ch; }
.work-copy h2 { font-size: var(--text-section); font-weight: var(--display-weight); letter-spacing: -0.03em; line-height: 1.02; max-width: 19ch; }
.work-copy .lead { margin-top: var(--space-md); color: var(--color-ink-2); max-width: 48ch; }
.work-copy .text-link { margin-top: var(--space-lg); }

/* ------------------------------------------------------------------ preços: o quadro em petróleo */
.board-sec { --color-focus: var(--color-accent); padding-block: var(--section-gap) var(--section-gap-s); background: var(--color-field); color: var(--color-on-field); }
.board-sec h2 { color: var(--color-paper-hi); }
.board-sec .split-head .lead { color: var(--color-on-field-muted); }
.board { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.board thead th { padding: 0 0 var(--space-md); text-align: left; font-size: var(--text-sm); font-weight: 600; color: var(--color-on-field-muted); white-space: nowrap; }
.board thead th:not(:first-child) { padding-left: var(--space-lg); }
.board tbody tr { border-top: 1px solid var(--color-field-rule); }
.board tbody tr:last-child { border-bottom: 1px solid var(--color-field-rule); }
.board tbody th { width: 40%; padding: var(--space-md) 0; text-align: left; font-weight: 600; }
.board tbody th .glyph { display: inline-block; vertical-align: middle; margin-right: var(--space-md); color: var(--color-accent); }
.b-name { display: inline-block; vertical-align: middle; font-size: var(--text-title); letter-spacing: -0.015em; color: var(--color-paper-hi); }
.b-name small { display: block; font-size: var(--text-sm); font-weight: 400; letter-spacing: 0; color: var(--color-on-field-muted); }
.board td { width: 30%; padding: var(--space-xs) 0; }
.board td a { position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-2xs) var(--space-xs); min-height: 96px; padding: var(--space-md) var(--space-lg); border-radius: var(--radius-key); color: var(--color-accent); text-decoration: none; transition: background-color var(--dur-short) var(--ease-out); }
.board td a { box-shadow: inset 0 0 0 1px var(--color-field-rule); }
.board td a:hover { background: var(--color-field-deep); box-shadow: inset 0 0 0 1px var(--color-on-field-muted); }
.board td a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.board .cur { margin-top: 0.45em; font-size: var(--text-lg); font-weight: 600; color: var(--color-on-field); }
.board .fig { font-family: var(--font-figure); font-weight: 900; font-size: 5.25rem; line-height: 0.85; letter-spacing: -0.02em; }
.board td a.is-current { background: var(--color-field-deep); box-shadow: inset 0 0 0 1px var(--color-accent); }
.board .ask { display: flex; align-items: center; gap: var(--space-2xs); flex-basis: 100%; margin-top: var(--space-xs); font-size: var(--text-sm); font-weight: 600; color: var(--color-on-field); }
.board .ask .ico { width: 16px; height: 16px; color: var(--color-on-field-muted); }
.board td a.is-current .ask::after { content: "sua escolha"; margin-left: auto; color: var(--color-accent); }
.terms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); margin: var(--space-2xl) 0 0; }
.terms dt { font-size: var(--text-sm); font-weight: 600; color: var(--color-on-field-muted); }
.terms dd { margin: var(--space-2xs) 0 0; color: var(--color-paper-hi); max-width: 38ch; }

/* ------------------------------------------------------------------ serviços e em breve */
.services { padding-block: var(--section-gap) var(--section-gap-s); }
.svc-list { margin: 0; border-top: 1px solid var(--color-rule-strong); }
.svc-list > div { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-3xl); align-items: baseline; padding-block: var(--space-lg); border-bottom: 1px solid var(--color-rule); }
.svc-list dt { font-size: var(--text-title); font-weight: 600; letter-spacing: -0.015em; }
.svc-list dd { margin: 0; color: var(--color-ink-2); max-width: 52ch; }
.svc-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md) var(--space-xl); padding-block: var(--space-lg); }
.svc-price { color: var(--color-ink-2); max-width: 52ch; }
.svc-price strong { color: var(--color-ink); }
.soon { margin-top: var(--space-2xl); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-3xl); padding-top: var(--space-xl); border-top: 1px solid var(--color-rule); }
.soon h3 { font-size: var(--text-title); color: var(--color-ink-2); }
.soon-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); margin: 0; }
.soon-list dt { font-weight: 600; font-size: var(--text-lg); }
.soon-list dd { margin: var(--space-2xs) 0 0; color: var(--color-ink-2); max-width: 36ch; }

/* ------------------------------------------------------------------ fecho: contato */
.close { padding-block: var(--section-gap-s); background: var(--color-paper-2); }
.close-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-3xl); align-items: end; }
.close-phone { margin-top: var(--space-lg); font-size: var(--text-display-s); font-weight: 600; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.close-phone a { color: var(--color-field); text-decoration: none; }
.close-phone a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.close-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
.facts { margin: 0; border-top: 1px solid var(--color-rule-strong); }
.facts > div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); column-gap: var(--space-md); padding-block: var(--space-md); border-bottom: 1px solid var(--color-rule); }
.facts dt { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-2); padding-top: var(--space-3xs); }
.facts dd { margin: 0; color: var(--color-ink); }
.facts a { color: var(--color-field); }

/* ------------------------------------------------------------------ rodapé: o mastro */
.mast { --color-focus: var(--color-accent); padding-block: var(--space-2xl) var(--space-xl); background: var(--color-field-deep); color: var(--color-on-field); }
.mast a { color: var(--color-paper-hi); text-decoration-color: var(--color-on-field-muted); }
.mast a:hover { text-decoration-color: var(--color-accent); }
.mast-word { margin: 0; font-family: var(--font-figure); font-weight: 900; font-size: clamp(5rem, 26vw, 23.5rem); line-height: 0.8; letter-spacing: -0.03em; color: var(--color-on-field); white-space: nowrap; }
.mast-word span { display: inline-block; }
.mast-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); column-gap: var(--gap-columns); margin-top: var(--space-2xl); padding-top: var(--space-xl); border-top: 1px solid var(--color-field-rule); }
.tagline { font-size: var(--text-lead); line-height: 1.4; color: var(--color-paper-hi); max-width: 30ch; }
.mast-nav ul, .mast-contact { margin: 0; padding: 0; list-style: none; }
.mast-nav a, .mast-contact a { display: inline-flex; align-items: center; min-height: 36px; }
.mast-contact li { min-height: 36px; display: flex; align-items: center; color: var(--color-on-field-muted); }
.legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-xs) var(--space-lg); margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-field-rule); font-size: var(--text-sm); color: var(--color-on-field-muted); }
.legal p { max-width: none; }
.privacy { margin-top: var(--space-md); max-width: 92ch; font-size: var(--text-sm); color: var(--color-on-field-muted); }
.privacy strong { color: var(--color-on-field); }

/* ------------------------------------------------------------------ barra de pedido no celular */
.buybar { display: none; }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 60rem) {
  .pill { padding-left: var(--space-md); }
  .burger { display: inline-block; }
  .js .menu { position: absolute; top: calc(100% + var(--space-xs)); left: 0; right: 0; display: grid; gap: 0; padding: var(--space-xs); margin: 0; background: var(--color-paper-hi); border: 1px solid var(--color-rule); border-radius: var(--radius-key); box-shadow: var(--shadow-card); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out), visibility 0s linear var(--dur-short); }
  .js .menu.open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .js .menu a:not(.btn) { min-height: 52px; padding: 0 var(--space-md); font-size: var(--text-md); border-radius: var(--radius-card); }
  .js .menu-cta { margin: var(--space-xs) 0 0; }
  .js .menu-cta .btn { width: 100%; min-height: 52px; }
  html:not(.js) .pill { flex-wrap: wrap; border-radius: var(--radius-key); }
  html:not(.js) .menu { flex-wrap: wrap; margin: 0; }

  .hero { min-height: 0; padding-block: calc(var(--space-3xl) + var(--space-md)) var(--space-2xl); }
  .counter { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-lg); }
  .counter-head, .config, .display { grid-column: 1; grid-row: auto; }
  .display { display: contents; }
  .counter-head { order: 1; }
  .readout { order: 2; }
  .config { order: 3; }
  .actions { order: 4; margin-top: 0; }
  .price { margin-top: 0; }

  .work-grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xl); }
  .work-copy { order: -1; }
  .split-head, .close-grid, .soon { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-md); }
  .split-head { margin-bottom: var(--space-xl); }
  .opts-grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-2xl); }
  .opt:first-child { padding-right: 0; }
  .opt + .opt { padding-left: 0; padding-top: var(--space-2xl); border-left: 0; border-top: 1px solid var(--color-rule); }
  .step-list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-xl); }
  .stack-head { margin-bottom: var(--space-xl); }
  .svc-list > div { column-gap: var(--space-xl); }
  .terms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mast-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: var(--space-xl); }
  .tagline { grid-column: 1 / -1; }
  .close-grid { row-gap: var(--space-2xl); }

  .js .buybar { position: fixed; left: var(--space-sm); right: var(--space-sm); bottom: calc(var(--space-sm) + env(safe-area-inset-bottom, 0px)); z-index: var(--z-sticky); display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-lg); background: var(--color-paper-hi); border: 1px solid var(--color-rule-strong); border-radius: var(--radius-pill); box-shadow: var(--shadow-card); transform: translateY(calc(100% + var(--space-xl))); visibility: hidden; transition: transform var(--dur-long) var(--ease-out), visibility 0s linear var(--dur-long); }
  .js .buybar.is-on { transform: none; visibility: visible; transition-delay: 0s; }
  .bb-text { display: grid; min-width: 0; margin-right: auto; line-height: 1.2; }
  .bb-price { font-weight: 600; font-size: var(--text-lg); font-variant-numeric: tabular-nums; color: var(--color-field); }
  .bb-choice { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--text-xs); color: var(--color-ink-2); }
  .shot .buybar, html:not(.js) .buybar { display: none; }
}
@media (min-width: 40.0625rem) and (max-width: 60rem) {
  .counter { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: var(--space-xl); }
  .counter-head { grid-column: 1 / -1; }
  .config { grid-column: 1; grid-row: 2 / span 3; align-self: start; }
  .readout { grid-column: 2; grid-row: 2; }
  .actions { grid-column: 2; grid-row: 3; align-self: start; }
}
@media (max-width: 40rem) {
  .hero { padding-top: calc(var(--space-3xl) + var(--space-xs)); }
  .counter { row-gap: var(--space-md); }
  .config { gap: var(--space-md); }
  .keys legend { margin-bottom: var(--space-xs); }
  .includes { line-height: 1.4; }
  .hero h1 { font-size: clamp(2.25rem, 9vw, 2.75rem); }
  .hero .lead { margin-top: var(--space-md); }
  .keys label { min-height: 56px; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); }
  .glyph { width: 28px; height: 28px; }
  .actions .btn--primary { width: 100%; }
  .actions .text-link { margin-inline: auto; }
  .keys label { padding-inline: var(--space-sm) var(--space-xs); }
  .glyph { width: 24px; height: 24px; }

  .route-list li { min-height: 60px; font-size: var(--text-xl); }
  .step-list { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .step-list li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: var(--space-md); align-items: center; padding-block: var(--space-md); }
  .step-list li::before { grid-row: 1 / span 2; margin: 0; font-size: 4.25rem; }
  .step-list h3 { align-self: end; }
  .step-list p { align-self: start; margin-top: var(--space-3xs); }
  .readout { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-md); align-items: center; }
  .readout .price { grid-column: 1; grid-row: 1; }
  .readout .diagram { grid-column: 2; grid-row: 1; justify-self: end; width: 100%; max-width: 8.5rem; }
  .readout .choice, .readout .includes { grid-column: 1 / -1; }
  .dg .lbl, .dg .ctx, .dg .lead-line, .dg .art { display: none; }
  .diagram figcaption { margin-top: var(--space-2xs); font-size: 0.75rem; line-height: 1.3; white-space: nowrap; }
  .cap-x { display: none; }
  .board thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .board, .board tbody, .board tr, .board th, .board td { display: block; width: auto; }
  .board tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-xs); padding-bottom: var(--space-sm); }
  .board tbody th { grid-column: 1 / -1; padding-block: var(--space-lg) var(--space-sm); }
  .board td { padding: 0; }
  .board td a { flex-wrap: wrap; min-height: 0; padding: var(--space-sm); gap: var(--space-2xs) var(--space-xs); }
  .board td[data-label]::before { content: attr(data-label); display: block; margin: 0 0 var(--space-2xs) var(--space-sm); font-size: var(--text-sm); color: var(--color-on-field-muted); }
  .board .fig { font-size: 4.25rem; }
  .board .cur { font-size: var(--text-md); }
  .terms { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .svc-list > div { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-2xs); }
  .soon-list { grid-template-columns: minmax(0, 1fr); }
  .close-phone { font-size: clamp(2rem, 9vw, 2.75rem); }
  .close-actions .btn { width: 100%; }
  .facts > div { grid-template-columns: 7rem minmax(0, 1fr); }
  .mast-row { grid-template-columns: minmax(0, 1fr); }
  .legal { display: grid; }
}

/* ------------------------------------------------------------------ motion preferences */
@media (prefers-reduced-motion: reduce) {
  .btn, .keys label, .dg-f, .menu, .burger span { transition-duration: 0.01ms; }
  .btn { transform: none; }
}
.shot *, .shot *::before, .shot *::after { transition: none !important; animation: none !important; }