/* Hallmark · shape: Narrative Workflow · genre: editorial · theme: brand · redesign: full · job: buy
 * paper: oklch(96.1% 0.011 90) · accent: oklch(65.6% 0.168 43) · display: Archivo · body: Archivo · hero: Poster · nav: edge-aligned · footer: statement · signature: the descent, canopy to river to counter
 * axes: warm paper/expanded grotesk/urucum · posture: committed · imagery: 3D canopy (procedural) with WebP stills, filled illustrations of the four real formats, one phone sample, one real work (the Auto Base plaque art) · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P5 H4 E4 S5 R4 V4 · weakest: E, the tablet first screen keeps a tall band of sky between the actions and the wordmark; kept as the Poster's air, the head grew to 48px there and the canopy still closes the screen */
/* Hallmark · hero-review: fix · 5 findings · 3 resolved (palms grow in clumps, the wordmark is lit and fades into the mist, the river corridor is open) · 1 to the owner (a photo of a real card on a counter) · 1 note (the owner's 11-word headline) · finish-review: fix · 9 findings + 1 coordinator note · 9 resolved (river carried to the table rule, ribbon river, WebP still fallback with cross-fade, Pedir in every price cell, filled format drawings, descent frames captured, styled select, tablet framing, Soluções in the nav) · 1 partial (light through leaves: sun shadows, warm rim and scrubbed shafts are in, the crowns stay low-poly) */
/* Hallmark · dismissed 42 · the 1px rule belongs to the phone menu rows and the button is the menu toggle; the bar itself is edge-aligned with no hairline */
/* Hallmark · dropped #circ, circ, canopy, onsubmit="return false" · the spinning price stamp is retired and its validity date is set as text above the price table; the inert submit is replaced by a handler that writes the message and opens WhatsApp; the drawn canopy silhouette over Contato is cut */
/* Hallmark · dropped form 1 · the unnamed inert form is rebuilt as #contactForm with the same four fields, now named and validated, and it posts to wa.me */
/* Hallmark · reworded "cartões e placas nfc disponível" to "cartões e placas nfc", "serviços digitais valor a combinar" to "serviços digitais", "$79,90." to "$79,90" · the status tags left the headings (67 named the tracked-caps tag) and now sit in their own column */
/* Hallmark · dropped link gerenciado, página de perfil, soluções, kepzen, contato · the option names are now the price table column heads and the step-one terms; the footer column heads went with the statement footer */
/* Hallmark · dismissed F20 · the terms grid is two named areas: Alterações spans both rows on the right beside Renovação over Entrega, so no term sits alone under a fuller row */
@import url("./tokens.css");
@import url("./base.css");

/* ---------- Base ---------- */
html { scroll-padding-top: calc(var(--nav-h) + var(--space-md)); }
body { line-height: 1.6; font-stretch: 100%; }
h1, h2 { font-stretch: var(--display-width); letter-spacing: var(--tracking-display); }
h3 { font-weight: 600; font-stretch: 108%; letter-spacing: -0.015em; }
a:hover { text-decoration-color: var(--color-accent); }
.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); border-radius: var(--radius-input); }
.skip:focus-visible { top: var(--space-md); }

/* ---------- Controls: one primary (urucum, dark ink on it), one quiet ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 52px; padding: 0 var(--space-lg); border: 1.5px solid transparent; border-radius: var(--radius-pill); font: 600 var(--text-md)/1 var(--font-body); font-stretch: 104%; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn-primary { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); }
.btn-primary:hover { background: var(--color-accent-2); border-color: var(--color-accent-2); }
.btn-quiet { background: transparent; color: var(--color-ink); border-color: var(--color-ink); }
.btn-quiet:hover { background: var(--color-ink); color: var(--color-paper); }
.btn svg { width: 20px; height: 20px; flex-shrink: 0; }

/* ---------- Nav: edge-aligned, fixed once the page moves ---------- */
.nav { position: absolute; inset: 0 0 auto; z-index: var(--z-sticky-nav); }
.js .nav { position: fixed; transition: background-color var(--dur-short) var(--ease-out); }
.nav.is-solid, .nav.is-open { background: var(--color-paper); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: var(--nav-h); }
.logo { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; color: var(--color-ink); font: 800 1.5rem/1 var(--font-display); font-stretch: 115%; letter-spacing: -0.04em; text-decoration: none; }
.logo svg { width: 28px; height: 28px; flex-shrink: 0; }
.logo .leaf { fill: var(--color-ink-2); }
.logo .vein { fill: none; stroke: var(--color-sky); stroke-width: 1.8; stroke-linecap: round; }
.nav-menu { display: flex; align-items: center; gap: var(--space-lg); }
.nav-menu a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink); font-size: var(--text-sm); font-weight: 600; text-decoration: none; transition: color var(--dur-short) var(--ease-out); }
.nav-menu a:hover { color: var(--color-accent-text); }
.nav-menu .nav-wa { padding: 0 var(--space-md); border: 1.5px solid var(--color-ink); border-radius: var(--radius-pill); transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.nav-menu .nav-wa:hover { background: var(--color-ink); color: var(--color-paper); }
.nav-menu a:active { transform: translateY(1px); }
.nav-toggle { display: none; align-items: center; gap: var(--space-xs); min-height: 44px; padding: 0 var(--space-md); border: 1.5px solid var(--color-ink); border-radius: var(--radius-pill); background: transparent; color: var(--color-ink); font-weight: 600; font-size: var(--text-sm); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.nav-toggle:hover { background: var(--color-ink); color: var(--color-paper); }
.nav-toggle:active { transform: translateY(1px); }
.nav-toggle-bars { position: relative; width: 16px; height: 10px; border-block: 2px solid currentColor; transition: transform var(--dur-short) var(--ease-out); }
.nav.is-open .nav-toggle-bars { transform: scaleY(0.4); }

/* ---------- Hero: the descent (Poster) ---------- */
.descent { position: relative; display: grid; background: var(--color-forest); }
.descent > .stage, .descent > .hero { grid-area: 1 / 1; }
.descent-on .descent { min-height: calc(100svh + var(--descent, 90svh)); }
@media (max-width: 40rem) { .descent-on .descent { --descent: 60svh; } }
.stage { position: sticky; top: 0; align-self: start; height: 100svh; min-height: 34rem; overflow: hidden; background: linear-gradient(180deg, var(--color-sky-0) 0%, var(--color-sky) 35%, var(--color-sky-2) 72%); }
.scene, .scene3d { position: absolute; inset: 0; }
.scene3d { opacity: 0; transition: opacity 900ms var(--ease-out); }
.scene3d.ready { opacity: 1; }
.scene3d canvas { display: block; width: 100%; height: 100%; }
.scene img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.gl-on .scene { visibility: hidden; transition: visibility 0s linear 900ms; }
.stage-foot { position: absolute; inset: auto 0 0; height: 20%; background: linear-gradient(180deg, transparent, var(--color-forest)); pointer-events: none; }
.hero { position: relative; z-index: var(--z-raised); align-self: start; min-height: max(100svh, 34rem); }
.hero-copy { padding-top: calc(var(--nav-h) + var(--space-2xl)); }
.hero h1 { max-width: none; font-size: clamp(2.25rem, 4.6vw + 0.6rem, 4.375rem); line-height: 1; letter-spacing: -0.03em; color: var(--color-ink); }
.hero .lead { margin-top: var(--space-lg); max-width: 46ch; color: var(--color-muted); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
@keyframes settle { from { opacity: 0; transform: translateY(8px); } }
.hero-copy > * { animation: settle 640ms var(--ease-out) both; }
.hero-copy > :nth-child(2) { animation-delay: 70ms; }
.hero-copy > :nth-child(3) { animation-delay: 140ms; }
.shot .hero-copy > * { animation: none; }

/* ---------- Como funciona: o rio e as quatro paradas (faixa da floresta) ---------- */
.river-sec { position: relative; background: var(--color-forest); color: var(--color-on-dark); padding-block: var(--section-gap-s) var(--section-gap); }
.river-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; }
.river-reveal { fill: none; stroke: var(--color-on-dark); stroke-linecap: round; }
.river-bank { fill: var(--color-forest-night); }
.river-bed { fill: var(--color-rule-dark); }
.river-flow { fill: var(--color-river); }
.river-marks circle { fill: var(--color-forest); stroke: var(--color-forest-night); stroke-width: 3; transition: fill var(--dur-short) var(--ease-out), stroke var(--dur-short) var(--ease-out); }
.river-marks circle.is-reached { fill: var(--color-accent); stroke: var(--color-forest-night); }
.counter { position: relative; }
.river-tail { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; }
.tail-river { fill: none; stroke: var(--color-river); stroke-width: 3; stroke-linecap: round; }
.tail-ink { fill: none; stroke: var(--color-ink); stroke-width: 1.5; stroke-linecap: round; }
.counter > .container { position: relative; }
.river-grid { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); }
.river-head, .stops { grid-column: 5 / -1; }
.river-head h2 { max-width: 16ch; color: var(--color-on-dark); }
.stops { counter-reset: stop; display: grid; gap: var(--space-3xl); margin: var(--space-3xl) 0 0; padding: 0; list-style: none; }
.stop { counter-increment: stop; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gap-columns); align-items: start; padding-top: var(--space-xl); border-top: 1px solid var(--color-rule-dark); }
.stop h3 { max-width: none; color: var(--color-on-dark); font-size: clamp(1.75rem, 1.4vw + 1.1rem, 2.5rem); font-weight: 800; font-stretch: var(--display-width); letter-spacing: var(--tracking-display); }
.stop h3::before { content: counter(stop) ". "; }
.stop-text p { margin-top: var(--space-sm); max-width: 32ch; color: var(--color-on-dark-muted); font-size: var(--text-lead); line-height: 1.45; }
.stop-obj { margin: 0; }
.options { display: grid; gap: var(--space-lg); }
.options div { padding-top: var(--space-sm); border-top: 1px solid var(--color-rule-dark); }
.options dt { color: var(--color-on-dark); font-weight: 600; font-size: var(--text-lg); }
.options dd { margin: var(--space-2xs) 0 0; color: var(--color-on-dark-muted); max-width: 40ch; }
.big-number { display: inline-block; color: var(--color-on-dark); font: 800 clamp(1.75rem, 1.6vw + 1rem, 2.5rem)/1.1 var(--font-display); font-stretch: 112%; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--color-accent); text-underline-offset: 0.18em; white-space: nowrap; transition: color var(--dur-short) var(--ease-out); }
.big-number:hover { color: var(--color-accent); }
.big-number:active { transform: translateY(1px); }
.send p { margin-top: var(--space-sm); color: var(--color-on-dark-muted); }
.device { display: grid; justify-items: start; gap: var(--space-md); }
.stop-caption { margin-top: var(--space-md); max-width: 32ch; color: var(--color-on-dark-muted); font-size: var(--text-sm); }
.stop-device { align-items: center; }
.phone { width: 248px; aspect-ratio: 248 / 500; padding: var(--space-xs); border-radius: 40px; background: var(--color-forest-night); box-shadow: inset 0 0 0 1.5px var(--color-rule-dark), var(--shadow-phone); }
.screen { display: flex; flex-direction: column; align-items: center; height: 100%; padding: 0 var(--space-md); overflow: hidden; border-radius: 32px; background: var(--color-paper); color: var(--color-ink); }
.cover { flex-shrink: 0; width: calc(100% + 2 * var(--space-md)); height: 128px; background: var(--color-ink-2); }
.avatar { display: grid; place-items: center; width: 72px; height: 72px; margin-top: calc(-1 * (var(--space-lg) + var(--space-sm))); border: 4px solid var(--color-paper); border-radius: 50%; background: var(--color-accent); color: var(--color-accent-ink); font-weight: 800; font-stretch: 110%; }
.shop { margin-top: var(--space-xs); font-weight: 800; font-size: 1.125rem; font-stretch: 108%; letter-spacing: -0.02em; }
.shop-sub { margin-bottom: var(--space-sm); color: var(--color-muted); font-size: 0.8125rem; }
.pbtn { width: 100%; margin-top: var(--space-xs); padding: var(--space-sm) 0; border: 1.5px solid var(--color-rule); border-radius: var(--radius-pill); font-size: 0.8125rem; font-weight: 600; text-align: center; }
.pbtn-main { border-color: var(--color-ink); background: var(--color-ink); color: var(--color-paper); }
.places { max-width: 18ch; color: var(--color-on-dark); font: 800 var(--text-title)/1.15 var(--font-display); font-stretch: var(--display-width); letter-spacing: -0.02em; }

/* ---------- O balcão: formatos e preços (papel) ---------- */
.counter { padding-block: var(--section-gap) var(--section-gap-l); background: var(--color-paper); }
.counter-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: end; margin-bottom: var(--space-2xl); }
.counter-head h2 { grid-column: 1 / 8; }
.validity { grid-column: 9 / -1; max-width: 34ch; font-size: var(--text-lead); line-height: 1.45; }
.order-note { margin-top: var(--space-xs); color: var(--color-muted); font-size: var(--text-md); }
.validity strong { display: block; font-weight: 600; }
.prices { width: 100%; border-collapse: collapse; }
.prices thead th { padding: 0 var(--space-lg) var(--space-md) 0; border-bottom: 1.5px solid var(--color-ink); font-size: var(--text-lg); font-weight: 600; font-stretch: 108%; text-align: left; vertical-align: top; }
.prices thead th:first-child { width: 46%; }
.prices thead th small { display: block; max-width: 32ch; margin-top: var(--space-2xs); color: var(--color-muted); font-size: var(--text-sm); font-weight: 400; font-stretch: 100%; }
.prices tbody th, .prices td { padding: var(--space-md) var(--space-lg) var(--space-md) 0; border-bottom: 1px solid var(--color-rule); text-align: left; vertical-align: middle; }
.fmt { display: grid; grid-template-columns: 12rem minmax(0, 1fr); column-gap: var(--space-lg); align-items: center; }
.fmt-draw { width: 12rem; height: auto; color: var(--color-ink); }
.fmt-draw .d-face { fill: var(--color-ink); }
.fmt-draw .d-side { fill: var(--color-forest-night); }
.fmt-draw .d-rim { fill: var(--color-ink-2); }
.fmt-draw .d-grain { fill: url(#g-grain); }
.d-glint { fill: var(--color-on-dark-muted); opacity: 0.55; }
.fmt-draw .d-ground { fill: var(--color-rule-strong); }
.fmt-draw .d-sticker { fill: var(--color-paper-2); }
.fmt-draw .d-slot, .fmt-draw .d-nfc { color: var(--color-accent); fill: var(--color-accent); }
.fmt-draw .d-text { fill: var(--color-ink); font-family: var(--font-display); font-weight: 800; font-stretch: 100%; }
.fmt-draw .d-qr-ink, .fmt-draw .d-stars { color: var(--color-ink); fill: var(--color-ink); }
.fmt-draw .d-art { color: var(--color-ink-2); }
.fmt-name { font-size: var(--text-title); font-weight: 600; font-stretch: 108%; letter-spacing: -0.015em; }
.fmt-name small { display: block; color: var(--color-muted); font-size: var(--text-sm); font-weight: 400; font-stretch: 100%; letter-spacing: 0; }
.price { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 56px; margin-left: calc(-1 * var(--space-sm)); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-input); color: var(--color-ink); font: 800 var(--text-price)/1 var(--font-display); font-stretch: var(--price-width); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; text-decoration: none; white-space: nowrap; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.price .cur { align-self: flex-start; margin-top: 0.2em; font-size: 0.42em; font-weight: 600; font-stretch: 100%; letter-spacing: 0; }
.price-act { display: inline-flex; align-items: center; gap: var(--space-2xs); margin-left: var(--space-sm); color: var(--color-ink); font: 600 var(--text-md)/1 var(--font-body); font-stretch: 100%; letter-spacing: 0; text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.22em; }
.price svg { width: 20px; height: 20px; color: var(--color-accent-text); }
.price:hover { background: var(--color-paper-2); }
.price:active { transform: translateY(1px); }
.price:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.table-note { margin-top: var(--space-md); max-width: 70ch; color: var(--color-muted); font-size: var(--text-sm); }
.counter-foot { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: start; margin-top: var(--space-3xl); }
.work { grid-column: 1 / 5; margin: 0; }
.work-plaque { padding: var(--space-xs); border-radius: var(--radius-card); background-color: var(--color-forest-night); background-image: radial-gradient(circle, color-mix(in oklab, var(--color-on-dark) 22%, transparent) 0.6px, transparent 0.9px); background-size: 4px 4px; }
.work-plaque img { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 2px; }
.work figcaption { margin-top: var(--space-sm); max-width: 36ch; color: var(--color-muted); font-size: var(--text-sm); }
.terms { grid-column: 6 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "ren alt" "ent alt"; gap: var(--space-xl) var(--gap-columns); align-content: start; }
.term:nth-child(1) { grid-area: ren; } .term:nth-child(2) { grid-area: alt; } .term:nth-child(3) { grid-area: ent; }
.term { padding-top: var(--space-md); border-top: 1.5px solid var(--color-ink); }
.term h3 { margin-bottom: var(--space-sm); font-size: var(--text-lg); }
.term dl { margin: 0; }
.term dl div { display: flex; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-xs); border-bottom: 1px solid var(--color-rule); }
.term dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.term p + p { margin-top: var(--space-xs); }

/* ---------- Soluções: índice do que a Kepzen faz (papel 2) ---------- */
.offers { padding-block: var(--section-gap-s); background: var(--color-paper-2); }
.offers-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: end; margin-bottom: var(--space-2xl); }
.offers-head h2 { grid-column: 1 / 8; max-width: 18ch; }
.offers-head .lead { grid-column: 9 / -1; color: var(--color-muted); }
.rows { margin: 0; padding: 0; list-style: none; border-top: 1.5px solid var(--color-ink); }
.row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-lg); border-bottom: 1px solid var(--color-rule-strong); }
.row h3 { grid-column: 1 / 4; font-size: var(--text-title); font-weight: 800; font-stretch: var(--display-width); letter-spacing: var(--tracking-display); }
.row-state { grid-column: 4 / 6; color: var(--color-muted); font-size: var(--text-sm); font-weight: 600; }
.row-state.is-soon { color: var(--color-accent-text); }
.row-desc { grid-column: 6 / 11; max-width: 52ch; }
.row-act, .link { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.2em; transition: color var(--dur-short) var(--ease-out); }
.row-act { grid-column: 11 / -1; justify-self: end; white-space: nowrap; }
.row-act:hover { color: var(--color-accent-text); }
.row-act:active { transform: translateY(1px); }

/* ---------- Perguntas frequentes (papel) ---------- */
.faq { padding-block: var(--section-gap) var(--section-gap); background: var(--color-paper); }
.faq-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: start; }
.faq h2 { grid-column: 1 / 5; max-width: 12ch; }
.faq-list { grid-column: 6 / -1; border-top: 1.5px solid var(--color-ink); }
.faq details { border-bottom: 1px solid var(--color-rule-strong); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); min-height: 64px; padding-block: var(--space-md); cursor: pointer; font-size: var(--text-lg); font-weight: 600; list-style: none; transition: color var(--dur-short) var(--ease-out); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { flex-shrink: 0; width: 24px; height: 24px; transition: transform var(--dur-short) var(--ease-in-out); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq summary:hover { color: var(--color-accent-text); }
.faq summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.faq details p { max-width: 60ch; padding-bottom: var(--space-lg); color: var(--color-muted); }

/* ---------- Contato: o formulário que escreve a mensagem (faixa da floresta) ---------- */
.contact { padding-block: var(--section-gap); background: var(--color-forest); color: var(--color-on-dark); }
.contact-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: start; }
.contact-copy { grid-column: 1 / 6; }
.contact h2 { max-width: 14ch; color: var(--color-on-dark); }
.contact .lead { margin-top: var(--space-md); color: var(--color-on-dark-muted); }
.contact-facts { margin: var(--space-xl) 0 0; }
.contact-facts div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-sm); border-top: 1px solid var(--color-rule-dark); }
.contact-facts dt { color: var(--color-on-dark-muted); }
.contact-facts dd { margin: 0; }
.contact-facts a { display: inline-flex; align-items: center; min-height: 44px; margin-block: calc(-1 * var(--space-sm)); color: var(--color-on-dark); font-weight: 600; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; transition: color var(--dur-short) var(--ease-out); }
.contact-facts a:hover { color: var(--color-accent); }
.form { grid-column: 7 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xs) var(--space-lg); }
.form .full { grid-column: 1 / -1; }
.field label { display: block; margin-bottom: var(--space-xs); color: var(--color-on-dark); font-size: var(--text-sm); font-weight: 600; }
.field label span { color: var(--color-on-dark-muted); font-weight: 400; }
.field input, .field select, .field textarea { width: 100%; min-height: 52px; padding: var(--space-sm) var(--space-md); border: 1.5px solid var(--color-paper-3); border-radius: var(--radius-input); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-md); outline: 2px solid transparent; outline-offset: 2px; transition: border-color var(--dur-short) var(--ease-out); }
.field textarea { min-height: 112px; resize: vertical; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; }
.select-wrap { position: relative; display: block; }
.select-wrap svg { position: absolute; top: 50%; right: var(--space-md); width: 20px; height: 20px; color: var(--color-ink); transform: translateY(-50%); pointer-events: none; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--color-muted); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline-color: var(--color-focus); }
.field [aria-invalid="true"] { border-color: var(--color-error); }
.field input:disabled, .field select:disabled, .field textarea:disabled { opacity: 0.55; cursor: not-allowed; }
.help { min-height: 1lh; margin-top: var(--space-2xs); color: var(--color-error-on-dark); font-size: var(--text-sm); }
.form .btn { margin-top: var(--space-md); }
.form-note { margin-top: var(--space-sm); color: var(--color-on-dark-muted); font-size: var(--text-sm); }

/* ---------- Rodapé: a frase grande, os links, a linha legal e a privacidade ---------- */
.foot { padding-block: var(--section-gap-s) var(--space-2xl); background: var(--color-forest-deep); color: var(--color-on-dark-muted); }
.foot-statement { max-width: 22ch; color: var(--color-on-dark); font: 800 clamp(2.25rem, 4.2vw + 0.6rem, 4.75rem)/1.02 var(--font-display); font-stretch: var(--price-width); letter-spacing: -0.03em; text-wrap: balance; overflow-wrap: break-word; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0 var(--space-lg); margin-top: var(--space-2xl); padding-top: var(--space-md); border-top: 1px solid var(--color-rule-dark); }
.foot-links a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; color: var(--color-on-dark); font-weight: 600; text-decoration: none; transition: color var(--dur-short) var(--ease-out); }
.foot-links a:hover { color: var(--color-accent); }
.foot-links a:active { transform: translateY(1px); }
.foot-meta { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); margin-top: var(--space-xl); font-size: var(--text-sm); }
.foot-legal { grid-column: 1 / 6; display: grid; gap: var(--space-2xs); }
.privacy { grid-column: 7 / -1; max-width: 70ch; }
.privacy strong { color: var(--color-on-dark); font-weight: 600; }
.privacy a { color: var(--color-on-dark); }
.privacy a:hover { color: var(--color-accent); }

/* ---------- WhatsApp no polegar (celular e tablet) ---------- */
.thumb-wa { position: fixed; right: var(--space-md); bottom: calc(var(--space-md) + env(safe-area-inset-bottom)); z-index: var(--z-sticky); display: none; align-items: center; gap: var(--space-xs); min-height: 52px; padding: 0 var(--space-lg); border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-paper); font-weight: 600; text-decoration: none; box-shadow: var(--shadow-lift); transform: translateY(calc(100% + 2 * var(--space-md))); transition: transform var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.thumb-wa svg { width: 20px; height: 20px; }
.thumb-wa.is-shown { transform: none; }
.thumb-wa:hover { background: var(--color-forest); }
.thumb-wa:active { transform: translateY(1px); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- ?shot: tudo parado no estado final ---------- */
.shot .nav { position: absolute; }
.shot-offset .nav { display: none; }
.shot .thumb-wa { display: none !important; }
.shot body { margin-top: calc(-1 * var(--shot-y, 0px)); }

/* ---------- Responsive ---------- */
@media (min-width: 72rem) { .hero h1 { font-size: min(4.375rem, calc(5.376vw - 0.43rem)); } .hero h1 .line { display: block; } }
@media (max-width: 60rem) {
  .js .nav-toggle { display: inline-flex; }
  .js .nav-menu { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: var(--space-xs) var(--gutter) var(--space-xl); background: var(--color-paper); visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity var(--dur-short) var(--ease-in), transform var(--dur-short) var(--ease-in), visibility 0s linear var(--dur-short); }
  .js .nav.is-open .nav-menu { visibility: visible; opacity: 1; transform: none; transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out), visibility 0s; }
  .js .nav-menu a { min-height: 56px; font-size: var(--text-lg); border-bottom: 1px solid var(--color-rule); }
  .js .nav-menu .nav-wa { justify-content: center; margin-top: var(--space-lg); border-bottom: 1.5px solid var(--color-ink); }
  html:not(.js) .nav-inner { flex-wrap: wrap; }
  html:not(.js) .nav-menu { flex-wrap: wrap; gap: 0 var(--space-md); }
  .js .thumb-wa { display: inline-flex; }
  .river-head, .stops { grid-column: 3 / -1; }
  .stop { row-gap: var(--space-lg); }
  .fmt { grid-template-columns: 8rem minmax(0, 1fr); }
  .fmt-draw { width: 8rem; }
  .counter-head, .offers-head { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-md); }
  .counter-head h2, .validity, .offers-head h2, .offers-head .lead { grid-column: 1 / -1; }
  .work { grid-column: 1 / 6; }
  .terms { grid-column: 7 / -1; grid-template-columns: minmax(0, 1fr); grid-template-areas: "ren" "alt" "ent"; row-gap: var(--space-xl); }
  .row { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: var(--space-xs); }
  .row h3 { grid-column: 1 / 5; }
  .row-state { grid-column: 5 / -1; justify-self: end; }
  .row-desc { grid-column: 1 / -1; }
  .row-act { grid-column: 1 / -1; justify-self: start; }
  .faq-grid, .contact-grid, .foot-meta { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xl); }
  .faq h2, .faq-list, .contact-copy, .form, .foot-legal, .privacy { grid-column: 1 / -1; }
}
@media (max-width: 40rem) {
  .hero-copy { padding-top: calc(var(--nav-h) + var(--space-md)); }
  .hero h1 { font-size: 2.25rem; }
  .hero .lead { margin-top: var(--space-md); }
  .actions { margin-top: var(--space-lg); }
  .actions .btn { flex: 1 1 100%; min-height: 48px; }
  .river-grid { display: block; padding-left: var(--space-xl); }
  .stops { gap: var(--space-2xl); margin-top: var(--space-2xl); }
  .stop { padding-top: var(--space-lg); }
  .phone { width: 220px; }
  .counter { padding-block: var(--section-gap) var(--section-gap); }
  .prices thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .prices, .prices tbody { display: block; }
  .prices tbody { border-top: 1.5px solid var(--color-ink); }
  .prices tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-md); padding-block: var(--space-md); border-bottom: 1px solid var(--color-rule); }
  .prices tbody th { grid-column: 1 / -1; padding: 0 0 var(--space-sm); border: 0; }
  .prices td { padding: 0; border: 0; }
  .prices td::before { content: attr(data-label); display: block; color: var(--color-muted); font-size: var(--text-sm); }
  .fmt { grid-template-columns: 5.5rem minmax(0, 1fr); column-gap: var(--space-md); }
  .fmt-draw { width: 5.5rem; }
  .price { font-size: 2rem; margin-left: 0; padding-inline: 0; }
  .price:hover { background: transparent; }
  .row { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-md); row-gap: var(--space-2xs); padding-block: var(--space-md); }
  .row h3 { grid-column: 1; }
  .row-state { grid-column: 2; justify-self: end; }
  .row-desc, .row-act { grid-column: 1 / -1; justify-self: start; }
  .offers-head, .counter-head { margin-bottom: var(--space-xl); }
  .form { grid-template-columns: minmax(0, 1fr); }
  .stops { gap: var(--space-xl); margin-top: var(--space-xl); }
  .stop { grid-template-columns: minmax(0, 1fr); padding-top: var(--space-md); row-gap: var(--space-md); }
  .stop-text p { font-size: var(--text-md); }
  .options { gap: var(--space-md); }
  .options dd { font-size: var(--text-sm); }
  .phone { width: 176px; border-radius: 30px; }
  .screen { border-radius: 24px; padding-inline: var(--space-sm); }
  .cover { height: 88px; width: calc(100% + 2 * var(--space-sm)); }
  .avatar { width: 64px; height: 64px; margin-top: calc(-1 * (var(--space-lg) + var(--space-xs))); }
  .pbtn { padding-block: var(--space-2xs); font-size: 0.75rem; }
  .shop-sub { margin-bottom: var(--space-xs); }
  .prices tbody tr { padding-block: var(--space-sm); }
  .fmt { grid-template-columns: 4.5rem minmax(0, 1fr); }
  .fmt-draw { width: 4.5rem; }
  .price { min-height: 48px; font-size: 1.75rem; }
  .price-act { margin-left: var(--space-xs); font-size: var(--text-sm); }
  .table-note { margin-top: var(--space-sm); }
  .counter-foot { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-2xl); margin-top: var(--space-2xl); }
  .work, .terms { grid-column: 1 / -1; }
  .work-plaque { max-width: 15rem; }
  .terms { row-gap: var(--space-lg); }
  .fmt-draw .d-text { display: none; }
  .faq summary { min-height: 56px; font-size: var(--text-md); }
  .contact-facts { margin-top: var(--space-lg); }
  .foot-statement { font-size: 1.875rem; }
  .foot-links { column-gap: var(--space-md); margin-top: var(--space-xl); }
  .foot-meta { margin-top: var(--space-lg); }
  h2 { font-size: 1.875rem; }
  .term { padding-top: var(--space-sm); }
  .term h3 { margin-bottom: var(--space-2xs); font-size: var(--text-md); }
  .term dl div { padding-block: var(--space-2xs); font-size: var(--text-sm); }
  .term p { font-size: var(--text-sm); }
  .contact-facts div { padding-block: var(--space-xs); grid-template-columns: 7rem minmax(0, 1fr); }
  .validity { font-size: var(--text-md); }
  .foot-legal { gap: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-copy > * { animation: none; }
  .scene3d, .thumb-wa, .river-marks circle, .faq summary svg { transition: none; }
}