/* Hallmark · shape: Feature Stack (16) with pinned scenes · genre: editorial · job: buy · theme: brand · redesign: full
 * paper: oklch(95.6% 0.004 230) · accent: oklch(74% 0.15 68) · display: Hanken Grotesk 300 · body: Hanken Grotesk 400/600 · hero: Index · nav: three-part bar · footer: letter close · signature: the destination list lighting the matching button on the phone the card just tapped
 * axes: light/grotesk-sans/warm · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: E, a stage with three modes (scroll story, baked still, static SVG) has many seams; one geometry file (formatos.js) feeds all three so the drawings cannot drift */
/* Hallmark · dropped https://wa.me/5568999267597 · every WhatsApp action now opens with a ready message naming what the visitor chose, so the bare link became prefilled ones */
/* Hallmark · reworded "Seu cliente aproxima o celular e chega direto ao seu WhatsApp." to "Aproximou o celular ou leu o QR Code, abriu." · the coordinator's matrix gives this direction that headline */
/* Hallmark · dropped "Três jeitos de trabalhar com a Kepzen.", "Soluções", "Institucional", "Contato" · services left the price table, so the table now heads itself; the four-column footer became a letter close */
/* Hallmark · dropped i-arr, i-img, i-logo · the arrow glued to button text, the photo placeholder and the provisional app-icon logo left the page; the callouts are numbered now */
/* Hallmark · waive 44c · hero: Index, the lineup runs under the head across all twelve columns · the four formats are the visual, so head and lineup stack instead of sitting side by side */
/* Hallmark · dismissed 42 · the bar is three cells parted by vertical hairlines (wordmark, five destinations, the WhatsApp action): the three-part bar the matrix assigns to Estúdio, not the default strip */

@import url("./tokens.css");
@import url("./base.css");

/* Uma consulta só decide o empilhamento; o palco.js lê esta string e usa a mesma no matchMedia */
:root { --mq-pilha: "(max-width: 60rem), (orientation: portrait)"; }

/* ---------- página ---------- */
html { scroll-padding-top: calc(var(--nav-h) + var(--space-md)); }
body { font-weight: var(--weight-text); }
h1, h2 { font-weight: var(--display-weight); letter-spacing: var(--tracking-display); line-height: 1.02; }
h3 { font-weight: var(--weight-strong); letter-spacing: var(--tracking-title); }
b, strong { font-weight: var(--weight-strong); }
ul, ol { margin: 0; padding: 0; list-style: none; }
.ico { width: 24px; height: 24px; fill: currentColor; flex-shrink: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pular { 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-3); border-radius: var(--radius-control); }
.pular:focus-visible { top: var(--space-md); }
.lead { color: var(--color-ink-2); }

/* ---------- controles ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-lg); border: 1px solid var(--color-ink); border-radius: var(--radius-control); background: var(--color-ink); color: var(--color-paper-3); font: var(--weight-strong) var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-ink-2); border-color: var(--color-ink-2); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn .ico { width: 20px; height: 20px; }
.btn--linha { background: transparent; color: var(--color-ink); border-color: var(--color-rule-strong); }
.btn--linha:hover { background: var(--color-paper-2); border-color: var(--color-ink); }
.link { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink); font-weight: var(--weight-strong); text-decoration: underline; text-decoration-color: var(--color-rule-strong); text-underline-offset: 0.3em; transition: text-decoration-color var(--dur-short) var(--ease-out); }
.link:hover { text-decoration-color: var(--color-ink); }
.acoes { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* ---------- barra de três partes ---------- */
.barra { position: fixed; inset: 0 0 auto; z-index: var(--z-sticky-nav); height: var(--nav-h); background: var(--color-paper); border-bottom: 1px solid var(--color-rule); }
.barra__in { height: 100%; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); }
.barra__marca { display: flex; align-items: center; justify-self: start; min-height: 44px; font: var(--weight-strong) var(--text-xl)/1 var(--font-display); letter-spacing: -0.045em; color: var(--color-ink); text-decoration: none; }
.barra__nav { display: flex; align-items: stretch; justify-content: center; gap: var(--space-lg); border-inline: 1px solid var(--color-rule); }
.barra__nav a { position: relative; display: flex; align-items: center; color: var(--color-ink-2); font-size: var(--text-sm); text-decoration: none; transition: color var(--dur-short) var(--ease-out); }
.barra__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--color-accent); transform: scaleX(0); transition: transform var(--dur-short) var(--ease-out); }
.barra__nav a:hover { color: var(--color-ink); }
.barra__nav a[aria-current="true"] { color: var(--color-ink); }
.barra__nav a[aria-current="true"]::after { transform: scaleX(1); }
.barra__nav .barra__wa { display: none; }
.barra__acao { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-xs); }
.barra__acao .btn { min-height: 44px; padding-inline: var(--space-md); font-size: var(--text-sm); }
.barra__menu { display: none; min-height: 44px; min-width: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-rule-strong); border-radius: var(--radius-control); background: transparent; color: var(--color-ink); font: var(--weight-strong) var(--text-sm)/1 var(--font-body); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out); }
.barra__menu:hover { background: var(--color-paper-2); }
.barra__menu:active { transform: translateY(1px); }
.barra__menu:disabled { opacity: 0.55; cursor: not-allowed; }

/* ---------- palco (three.js) ---------- */
#gl { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: none; pointer-events: none; }
.story #gl { display: block; }
.story.palco-fora #gl { visibility: hidden; }
main { position: relative; z-index: var(--z-base); padding-top: var(--nav-h); }

/* ---------- desenhos (SVG estático gerado de formatos.js; o palco desenha os mesmos em 3D) ---------- */
.desenho { display: block; width: 100%; height: auto; overflow: visible; }
.desenho path, .desenho circle, .desenho line, .desenho rect { vector-effect: non-scaling-stroke; }
.desenho .s { vector-effect: none; }
.d-band { fill: var(--color-paper-2); stroke: var(--color-ink); stroke-width: 1.25; stroke-linejoin: round; }
.d-cap { fill: var(--color-paper-3); stroke: var(--color-ink); stroke-width: 1.25; stroke-linejoin: round; }
.d-pla { fill: var(--color-pla); stroke: var(--color-pla-line); stroke-width: 1; stroke-linejoin: round; }
.d-pla2 { fill: var(--color-pla-2); stroke: var(--color-pla-line); stroke-width: 1; stroke-linejoin: round; }
.d-pla3 { fill: var(--color-pla-3); stroke: var(--color-pla-line); stroke-width: 1; stroke-linejoin: round; }
.d-trilho { fill: none; stroke: var(--color-pla-rail); stroke-width: 1; }
.d-coil, .d-line-only { fill: none; stroke: var(--color-ink); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.d-chip { fill: var(--color-accent); stroke: var(--color-ink); stroke-width: 1.25; }
.d-cam { fill: var(--color-ink); }
.f-ink { fill: var(--color-ink); } .f-ink2 { fill: var(--color-ink-2); } .f-muted { fill: var(--color-muted); } .f-paper2 { fill: var(--color-paper-2); } .f-paper3 { fill: var(--color-paper-3); } .f-rule { fill: var(--color-rule); } .f-accent { fill: var(--color-accent); } .f-none { fill: none; }
.k-ink { stroke: var(--color-ink); } .k-rule { stroke: var(--color-rule); } .k-ink2 { stroke: var(--color-ink-2); } .k-accent { stroke: var(--color-accent); } .k-muted { stroke: var(--color-muted); }
text.s { font-family: var(--font-body); }
[data-gl] > .desenho { visibility: hidden; }
/* a única entrada da página: a fila se desenha uma vez, em traço, ao abrir (no SVG, então funciona sem WebGL) */
@property --traco { syntax: "<number>"; inherits: true; initial-value: 0; }
.d-band[pathLength], .d-cap[pathLength], .d-pla[pathLength], .d-pla2[pathLength], .d-pla3[pathLength] { stroke-dasharray: 1 1; stroke-dashoffset: var(--traco, 0); fill-opacity: calc(1 - var(--traco, 0)); }
.d-arte { opacity: calc(1 - var(--traco, 0)); }
@media (prefers-reduced-motion: no-preference) {
  .anima .peca__slot > .desenho { animation: desenha 620ms var(--ease-in-out) both; }
  .anima .peca:nth-child(2) .desenho { animation-delay: 60ms; }
  .anima .peca:nth-child(3) .desenho { animation-delay: 120ms; }
  .anima .peca:nth-child(4) .desenho { animation-delay: 180ms; }
}
@keyframes desenha { from { --traco: 1; } to { --traco: 0; } }
.assado { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; }
.cena__vis > .desenho { max-height: calc(var(--screen) * 0.7); }

/* ---------- cenas ---------- */
.cena { position: relative; }
.cena__pin { padding-block: var(--section-gap-s); }
html:not(.story) .cena:not(.cena--a) .cena__pin { padding-block: calc(var(--section-gap-s) / 2); }
.cena__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: center; }
.cena__vis { position: relative; margin: 0; min-width: 0; }
.cena__texto { min-width: 0; display: grid; align-content: center; gap: var(--space-lg); }
.cena__texto h2 { max-width: 14ch; }
.cena__legenda { font-size: var(--text-sm); color: var(--color-muted); }

/* Hero: a fila dos quatro formatos é o visual (postura Index), o título pequeno em cima */
.cena--a .cena__pin { min-height: var(--stage-h); display: flex; align-items: center; padding-block: var(--space-lg); }
.hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-lg); align-items: end; }
.hero h1 { grid-column: 1 / span 7; font-size: var(--text-display-s); max-width: 17ch; }
.hero__lado { grid-column: 8 / span 5; display: grid; gap: var(--space-lg); }
.hero__lado .lead { max-width: 42ch; }
.linha { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto auto auto; column-gap: var(--gap-columns); }
.peca { grid-row: span 4; display: grid; grid-template-rows: subgrid; row-gap: 0; }
.peca__slot { position: relative; aspect-ratio: 47 / 54; max-height: calc(var(--stage-h) - 27.5rem); /* o que sobra da tela depois do título, dos rótulos e dos respiros */ justify-self: center; width: 100%; border-bottom: 1px solid var(--color-ink); }
.peca__slot > .desenho { position: absolute; inset: 0; height: 100%; }
.peca__nome { grid-row: 2; margin-top: var(--space-md); font: var(--weight-strong) var(--text-title)/1.2 var(--font-body); letter-spacing: var(--tracking-title); }
.peca__lugar { grid-row: 3; color: var(--color-muted); }
.peca__preco { grid-row: 4; margin-top: var(--space-xs); color: var(--color-ink-2); font-variant-numeric: tabular-nums; }
.peca__preco b { color: var(--color-ink); }
.peca__nome, .peca__lugar, .peca__preco { opacity: calc(1 - var(--a, 0)); transform: translateY(calc(var(--a, 0) * 12px)); }
.hero__nota { grid-column: 1 / -1; justify-self: end; font-size: var(--text-sm); color: var(--color-muted); opacity: calc(1 - var(--a, 0)); }

/* Cena do toque: a lista acende o mesmo botão na tela */
.cena--b .cena__vis { grid-column: 1 / span 6; grid-row: 1; }
.cena--b .cena__legenda { grid-column: 1 / span 6; grid-row: 2; margin-top: var(--space-md); }
.cena--b .cena__texto { grid-column: 8 / span 5; grid-row: 1 / span 2; }
.dests { display: grid; }
.dest { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: var(--space-md); align-items: baseline; padding-block: var(--space-sm); border-top: 1px solid var(--color-rule); }
.dest:last-child { border-bottom: 1px solid var(--color-rule); }
.dest .ico { align-self: center; color: var(--color-muted); transition: color var(--dur-short) var(--ease-out); }
.dest b { display: block; font: var(--display-weight) var(--text-2xl)/1.1 var(--font-display); letter-spacing: -0.02em; transition: color var(--dur-short) var(--ease-out); }
.dest small { display: block; margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-muted); }
.dest::before { content: ""; position: absolute; left: calc(-1 * var(--space-md)); top: var(--space-sm); bottom: var(--space-sm); width: 2px; background: var(--color-accent); transform: scaleY(0); transform-origin: 50% 0; transition: transform var(--dur-long) var(--ease-out); }

/* Cena da placa aberta em camadas */
.cena--c .cena__texto { grid-column: 1 / span 4; }
.cena--c .cena__vis { grid-column: 6 / span 7; }
.camadas { display: grid; counter-reset: camada; }
.camadas li { counter-increment: camada; display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: var(--space-sm); align-items: center; padding-block: var(--space-sm); border-top: 1px solid var(--color-rule); }
.camadas li:last-child { border-bottom: 1px solid var(--color-rule); }
.camadas li::before { content: counter(camada); }
.camadas li::before, .marca { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--color-ink); border-radius: 50%; background: var(--color-paper-3); color: var(--color-ink); font-size: var(--text-xs); font-weight: var(--weight-strong); font-variant-numeric: tabular-nums; }
.marca { --dx: 0px; --dy: 0px; position: absolute; z-index: var(--z-raised); left: calc(var(--x) + var(--dx)); top: calc(var(--y) + var(--dy)); translate: -50% -50%; }
.marca[data-camada="adesivo"] { --dx: -40px; --dy: -34px; }
.marca[data-camada="chip"] { --dx: 34px; --dy: -46px; }
.marca::before { content: ""; position: absolute; left: 50%; top: 50%; width: calc(hypot(var(--dx), var(--dy)) - 12px); height: 1px; background: var(--color-ink); transform-origin: 0 50%; transform: rotate(atan2(calc(-1 * var(--dy)), calc(-1 * var(--dx)))) translateX(12px); }
.marca::after { content: ""; position: absolute; left: calc(50% - var(--dx) - 3px); top: calc(50% - var(--dy) - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--color-ink); }
.marca--sinal { background: var(--color-accent); }

/* Cena dos quatro passos */
.cena--d .cena__texto { grid-column: 1 / span 5; }
.cena--d .cena__vis { grid-column: 7 / span 6; }
.passos { display: grid; counter-reset: passo; }
.step { counter-increment: passo; position: relative; display: grid; align-content: start; grid-template-columns: var(--space-xl) minmax(0, 1fr); column-gap: var(--space-sm); padding-block: var(--space-md); border-top: 1px solid var(--color-rule); }
.step:last-child { border-bottom: 1px solid var(--color-rule); }
.step::after { content: counter(passo); grid-column: 1; grid-row: 1 / span 2; font: var(--display-weight) var(--text-2xl)/1 var(--font-display); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.step h3 { grid-column: 2; font-size: var(--text-title); }
.step p { grid-column: 2; margin-top: var(--space-2xs); color: var(--color-ink-2); }
.step::before { content: ""; position: absolute; left: calc(-1 * var(--space-md)); top: var(--space-md); bottom: var(--space-md); width: 2px; background: var(--color-accent); transform: scaleY(0); transform-origin: 50% 0; transition: transform var(--dur-long) var(--ease-out); }

/* Sem a história (sem script, sem WebGL, reduzir movimento): o mesmo arranjo, os passos em lista e a placa real ao lado */
/* trabalho recente (uma vez na página): a placa grande real da Auto Base, no passo "Receba" */
.trabalho { margin: 0; display: grid; justify-items: center; gap: var(--space-md); }
.trabalho__placa { width: min(300px, 64%); aspect-ratio: 2 / 3; padding: 1.4%; border-radius: var(--radius-card); background-color: var(--color-pla); background-image: radial-gradient(var(--color-pla-line) 0.5px, transparent 0.9px), radial-gradient(var(--color-pla-2) 0.6px, transparent 1px); background-size: 4px 4px, 7px 7px; background-position: 0 0, 2px 3px; }
.trabalho__placa img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }
.trabalho__legenda { max-width: 40ch; font-size: var(--text-sm); color: var(--color-muted); text-align: center; }
.story .trabalho { position: absolute; left: 0; right: 0; bottom: 0; }
.story .trabalho__placa { display: none; }
.story .trabalho__legenda { opacity: 0; transition: opacity var(--dur-long) var(--ease-out); }
.story .trabalho-on .trabalho__legenda { opacity: 1; }

/* ---------- história fixa (palco.js liga .story quando WebGL, GSAP e movimento estão disponíveis) ---------- */
.cena--a { --pin: var(--pin-a); } .cena--b { --pin: var(--pin-b); } .cena--c { --pin: var(--pin-c); } .cena--d { --pin: var(--pin-d); }
.story .cena { height: calc(var(--stage-h) * (1 + var(--pin))); }
.story .cena__pin { position: sticky; top: var(--nav-h); height: var(--stage-h); min-height: 0; display: flex; align-items: stretch; padding-block: var(--space-xl); }
.story .cena--a .cena__pin { align-items: center; padding-block: var(--space-lg); }
.story .cena__grid { width: 100%; grid-template-rows: minmax(0, 1fr); }
.story .cena--b .cena__grid { grid-template-rows: minmax(0, 1fr) auto; }
.story .cena__vis { align-self: stretch; }
.story .cena__vis > .desenho { display: none; }
.story .marca { left: var(--dx); top: var(--dy); opacity: 0; will-change: transform; }
.story .dest b { color: var(--color-quiet); }
.story .dest.on b, .story .dest.on .ico { color: var(--color-ink); }
.story .dest.on::before, .story .step.on::before { transform: scaleY(1); }
.story .step.on::after { color: var(--color-ink); }

/* ---------- preços: quatro formatos × duas opções, cada preço abre o WhatsApp ---------- */
.precos { position: relative; z-index: var(--z-raised); background: var(--color-paper); padding-block: var(--section-gap) var(--section-gap-s); border-top: 1px solid var(--color-rule); }
.precos__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: end; margin-bottom: var(--space-2xl); }
.precos__head h2 { grid-column: 1 / span 7; }
.precos__head .lead { grid-column: 9 / span 4; max-width: 34ch; }
.oferta { display: grid; grid-template-columns: minmax(0, 1.35fr) repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto auto auto; }
.oferta__formatos { grid-column: 2 / -1; grid-row: 1 / -1; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; }
.formato { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; }
.formato__desenho { margin: 0 var(--space-md); padding-bottom: 0; border-bottom: 1px solid var(--color-ink); }
.formato__desenho .desenho { width: 64%; margin-inline: auto; }
.formato__nome { padding: var(--space-md) var(--space-md) var(--space-lg); }
.formato__nome h3 { font-size: var(--text-title); }
.formato__nome p { color: var(--color-muted); }
.oferta__opcoes { grid-column: 1; grid-row: 3 / -1; display: grid; grid-template-rows: subgrid; }
.opcao { padding: var(--space-md) var(--space-xl) var(--space-md) 0; border-top: 1px solid var(--color-rule); }
.opcao h3 { font-size: var(--text-title); }
.opcao p { margin-top: var(--space-2xs); color: var(--color-ink-2); font-size: var(--text-sm); max-width: 36ch; }
.preco { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-xs); padding: var(--space-md); border-top: 1px solid var(--color-rule); color: var(--color-ink); text-decoration: none; transition: background-color var(--dur-short) var(--ease-out); }
.preco:hover { background: var(--color-paper-2); }
.preco:active { background: var(--color-paper-3); }
.preco:focus-visible { outline-offset: -2px; }
.preco__op { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.preco__v { font: var(--display-weight) var(--text-3xl)/1 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.preco__v small { margin-right: var(--space-2xs); font: var(--weight-text) var(--text-md)/1 var(--font-body); letter-spacing: 0; }
.preco .ico { width: 20px; height: 20px; color: var(--color-muted); transition: color var(--dur-short) var(--ease-out); }
.preco:hover .ico { color: var(--color-ink); }
.oferta__nota { margin-top: var(--space-md); text-align: right; font-size: var(--text-sm); color: var(--color-muted); }
.termos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap-columns); margin-top: var(--space-2xl); }
.termos div { padding-top: var(--space-md); border-top: 1px solid var(--color-ink); }
.termos dt { font-weight: var(--weight-strong); }
.termos dd { margin: var(--space-2xs) 0 0; color: var(--color-ink-2); font-size: var(--text-sm); }

/* ---------- faixa grafite: serviços digitais e o que vem aí ---------- */
.faixa { position: relative; z-index: var(--z-raised); background: var(--color-night); color: var(--color-night-ink); padding-block: var(--section-gap-s); --color-focus: var(--color-accent); }
.faixa__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); }
.servicos { grid-column: 1 / span 5; display: grid; align-content: start; gap: var(--space-lg); }
.servicos .lead { color: var(--color-night-muted); max-width: 30ch; }
.servicos .acoes { margin-top: var(--space-xs); }
.servicos__lista { grid-column: 7 / span 6; }
.servicos__lista div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: var(--gap-columns); padding-block: var(--space-lg); border-top: 1px solid var(--color-night-rule); }
.servicos__lista div:last-child { border-bottom: 1px solid var(--color-night-rule); }
.servicos__lista dt { font: var(--weight-strong) var(--text-title)/1.2 var(--font-body); letter-spacing: var(--tracking-title); }
.servicos__lista dd { margin: 0; color: var(--color-night-muted); }
.faixa .btn--linha { color: var(--color-night-ink); border-color: var(--color-night-rule); }
.faixa .btn--linha:hover { background: var(--color-night-2); border-color: var(--color-night-ink); }
.embreve { margin-top: var(--section-gap-s); padding-top: var(--space-2xl); border-top: 1px solid var(--color-night-rule); align-items: start; }
.embreve h2 { grid-column: 1 / span 5; font-size: var(--text-2xl); }
.embreve article { grid-column: span 3; display: grid; gap: var(--space-xs); align-content: start; }
.embreve article:first-of-type { grid-column: 7 / span 3; }
.embreve h3 { font-size: var(--text-title); }
.embreve p { color: var(--color-night-muted); }
.faixa .link { color: var(--color-night-ink); text-decoration-color: var(--color-night-rule); }
.faixa .link:hover { text-decoration-color: var(--color-night-ink); }

/* ---------- carta de despedida e rodapé ---------- */
.carta { position: relative; z-index: var(--z-raised); background: var(--color-paper-2); padding-block: var(--section-gap) var(--space-3xl); }
.carta__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: end; }
.carta__texto { grid-column: 1 / span 7; display: grid; gap: var(--space-lg); }
.carta__texto h2 { font-size: var(--text-display-s); max-width: 20ch; }
.carta__assinatura { grid-column: 9 / span 4; display: grid; gap: var(--space-md); font-style: normal; color: var(--color-ink-2); }
.carta__despedida { font: var(--display-weight) var(--text-2xl)/1.1 var(--font-display); color: var(--color-ink); }
.carta__marca { font: var(--weight-strong) var(--text-3xl)/1 var(--font-display); letter-spacing: -0.05em; color: var(--color-ink); }
.carta__assinatura a { color: var(--color-ink); text-underline-offset: 0.2em; }
.rodape { position: relative; z-index: var(--z-raised); background: var(--color-paper-2); padding-block: var(--space-xl) var(--space-2xl); }
.rodape .container { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-lg); padding-top: var(--space-xl); border-top: 1px solid var(--color-rule-strong); }
.rodape nav { grid-column: 1 / -1; display: flex; flex-wrap: wrap; column-gap: var(--space-lg); }
.rodape nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink); font-size: var(--text-sm); }
.rodape__legal { grid-column: 1 / span 5; display: grid; gap: var(--space-xs); align-content: start; font-size: var(--text-sm); color: var(--color-muted); }
.rodape__priv { grid-column: 7 / span 6; font-size: var(--text-sm); color: var(--color-ink-2); max-width: 75ch; }

/* ---------- empilhado: retrato ou abaixo de 60rem (a mesma consulta de --mq-pilha) ---------- */
@media (max-width: 60rem), (orientation: portrait) {
  .barra__in { grid-template-columns: minmax(0, 1fr) auto; }
  .barra__nav { position: fixed; inset: var(--nav-h) 0 auto; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: var(--space-xs) var(--gutter) var(--space-lg); background: var(--color-paper); border: 0; border-bottom: 1px solid var(--color-rule); }
  .barra.aberta .barra__nav { display: flex; }
  .barra__nav a { min-height: 52px; font-size: var(--text-md); border-bottom: 1px solid var(--color-rule); }
  .barra__nav a::after { display: none; }
  .barra__nav .barra__wa { display: inline-flex; margin-top: var(--space-md); border-bottom: 0; color: var(--color-paper-3); }
  .barra__acao { padding-left: var(--space-md); }
  .barra__menu { display: inline-flex; align-items: center; }
  .hero h1, .hero__lado { grid-column: 1 / -1; }
  .cena__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-lg); }
  .cena--b .cena__vis, .cena--b .cena__legenda, .cena--b .cena__texto, .cena--c .cena__texto, .cena--c .cena__vis, .cena--d .cena__texto, .cena--d .cena__vis { grid-column: 1; grid-row: auto; }
  .cena__texto { order: -1; }
  .cena--b .cena__legenda { margin-top: 0; }
  .cena__texto h2 { max-width: 22ch; }
  .story .cena__grid { grid-template-rows: auto minmax(0, 1fr); row-gap: var(--space-md); }
  .story .cena--b .cena__grid { grid-template-rows: auto minmax(0, 1fr) auto; }
  .story .cena__texto { gap: var(--space-md); }
  .story .dest { padding-block: var(--space-xs); }
  .story .dest b { font-size: var(--text-xl); }
  .story .dest small { display: inline; margin-left: var(--space-xs); }
  .story .step { padding-block: var(--space-sm); }
  .precos__head h2, .precos__head .lead { grid-column: 1 / -1; }
  .precos__head .lead { margin-top: var(--space-md); }
  .oferta { display: block; }
  .oferta__opcoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap-columns); margin-bottom: var(--space-xl); }
  .opcao { padding-right: 0; }
  .oferta__formatos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); }
  .formato { grid-row: auto; display: flex; flex-direction: column; }
  .oferta__opcoes { grid-row: auto; }
  .formato__desenho, .formato__nome { margin-inline: 0; padding-inline: 0; }
  .formato__nome { padding-bottom: var(--space-md); min-height: 5.5rem; }
  .formato__desenho .desenho { width: 52%; }
  .preco { align-items: center; padding-inline: 0; }
  .preco__op { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; flex: 1; font-size: var(--text-sm); color: var(--color-ink-2); }
  .preco__v { font-size: var(--text-2xl); }
  .termos { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-xl); }
  .servicos, .servicos__lista, .embreve h2 { grid-column: 1 / -1; }
  .servicos__lista { margin-top: var(--space-2xl); }
  .embreve article, .embreve article:first-of-type { grid-column: span 6; margin-top: var(--space-lg); }
  .carta__texto, .carta__assinatura { grid-column: 1 / -1; }
  .carta__assinatura { margin-top: var(--space-2xl); }
  .rodape__legal, .rodape__priv { grid-column: 1 / -1; }
}

/* ---------- celular: abaixo de 40rem ---------- */
@media (max-width: 40rem) {
  :root { --nav-h: 56px; --pin-a: 0; }
  .barra__acao .btn { width: 44px; padding: 0; }
  .barra__acao .btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .linha { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto auto auto auto auto auto; row-gap: 0; }
  .peca:nth-child(n + 3) { margin-top: var(--space-xl); }
  .peca__slot { max-height: none; }
  .hero .acoes .btn { flex: 1 1 auto; }
  .story .cena--a { height: auto; }
  .story .cena--a .cena__pin { position: relative; top: 0; height: auto; }
  .story .step p { font-size: var(--text-sm); }
  .story .cena__pin { padding-block: var(--space-md); }
  .story .cena__texto h2 { font-size: var(--text-2xl); }
  .story .cena__texto { gap: var(--space-sm); }
  .story .dest b { display: inline; font-size: var(--text-lg); }
  .story .dest small { font-size: var(--text-xs); }
  .story .dest, .story .step { padding-block: var(--space-xs); }
  .story .step::after { font-size: var(--text-xl); }
  .story .camadas li { padding-block: var(--space-xs); }
  .marca[data-camada="adesivo"] { --dx: -26px; --dy: -26px; }
  .marca[data-camada="chip"] { --dx: 22px; --dy: -34px; }
  .oferta__opcoes, .termos { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-md); }
  .oferta__formatos { gap: var(--space-xl) var(--space-md); }
  .formato__desenho .desenho { width: 78%; }
  .formato__nome { min-height: 6.25rem; }
  .preco { flex-wrap: wrap; row-gap: var(--space-2xs); }
  .preco__op { flex-basis: 100%; }
  .embreve article, .embreve article:first-of-type { grid-column: 1 / -1; }
}

/* telas baixas: a história fixa não cabe, a página fica corrida */
@media (max-height: 34rem) { .cena--a .cena__pin { min-height: 0; } }