/* JETCAR v6.2 · Baias de serviço.
   Identidade: Barlow (texto) e Barlow Condensed 700/800 (títulos, números, botões), vermelho
   chapado, botões em paralelogramo. A linha de luz (Light Trace) é sempre branca, fina, com o
   mesmo halo em qualquer lugar: na cena, nas bordas dos cards, no trilho e na rota. */

@font-face { font-family: "Barlow"; src: url("assets/fonts/barlow-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("assets/fonts/barlow-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("assets/fonts/barlow-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("assets/fonts/barlow-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("assets/fonts/barlow-condensed-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("assets/fonts/barlow-condensed-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("assets/fonts/barlow-condensed-800-italic.woff2") format("woff2"); font-weight: 800; font-style: italic; font-display: swap; }

:root {
  --canvas: #0b0b0c;
  --surface: #121213;
  --surface-2: #19191a;
  --ink: #f2f1ed;
  --ink-soft: #b3b0a9;
  --ink-mute: #8d8a84;
  --rule: rgba(242, 241, 237, .14);
  --rule-2: rgba(242, 241, 237, .28);
  --red: #d7261e;
  --red-ink: #ff5a50;
  --grad-red: linear-gradient(180deg, #e2312a 0%, #d7261e 55%, #c51f18 100%);
  --light: #fff;
  --halo: rgba(255, 255, 255, .32);
  --sans: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --cond: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
  /* escala de 4 px */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px; --s9: 56px; --s10: 72px; --s11: 96px;
  --pad: clamp(18px, 4vw, 56px);
  --bar: 64px;
  --ease: cubic-bezier(.23, 1, .32, 1);
  /* altura visível (svh) e desenhada (lvh) do palco; o JS escreve em px */
  --svh: 100vh;
  --lvh: 100vh;
  --chrome: 0px;
  /* a costura entre o Ceramic e o PPF: a linha que fecha um é a borda da película do outro */
  --seam: 56%;
  /* quadrado do filme e da foto da lavagem no celular em pé */
  --sq: min(92vw, calc(var(--svh) * .44));
  --sq-top: calc(var(--bar) + var(--svh) * .02);
  color-scheme: dark;
}
@supports (height: 1svh) { :root { --svh: 100svh; --lvh: 100lvh; } }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--canvas); color: var(--ink); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; font: 400 17px/1.6 var(--sans); letter-spacing: .005em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; font-feature-settings: "kern", "liga"; }
::selection { background: var(--red); color: #fff; }
img, svg, canvas, video { display: block; }
img { max-width: none; }
button, input, select { font: inherit; color: inherit; }
input { caret-color: var(--red); }
button { background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, h4, p, ul, ol, dl, dd, fieldset, legend, figure { margin: 0; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
ul, ol { padding: 0; list-style: none; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--red-ink); outline-offset: 4px; }
[hidden] { display: none !important; }
[tabindex="-1"]:focus { outline: none; }
html.menu-open { overflow: hidden; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sprite path { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: square; stroke-linejoin: miter; }
svg { width: 20px; height: 20px; flex: none; }
.skip { position: fixed; z-index: 100; left: 12px; top: -80px; padding: 12px 16px; background: var(--red); color: #fff; font-weight: 600; transition: top .2s var(--ease); }
.skip:focus { top: 12px; }
.svh-probe, .lvh-probe { position: absolute; top: 0; left: -10px; width: 1px; visibility: hidden; pointer-events: none; }
.svh-probe { height: 100vh; height: 100svh; }
.lvh-probe { height: 100vh; height: 100lvh; }

/* ——— Tipografia e botões ——— */
h1, h2, h3 { font-family: var(--cond); font-weight: 800; text-transform: uppercase; letter-spacing: -.008em; line-height: .94; text-wrap: balance; }
.kicker { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); font: 600 13px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.kicker::before { content: ""; width: 7px; height: 7px; background: var(--red); flex: none; }
.lead { max-width: 46ch; font-size: 18px; line-height: 1.6; color: var(--ink-soft); text-wrap: pretty; }
.fine { margin-top: var(--s3); font-size: 13.5px; line-height: 1.5; color: var(--ink-mute); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s6); }
.btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: var(--s3); height: 52px; padding: 0 30px; font: 700 17px/1 var(--cond); letter-spacing: .07em; text-transform: uppercase; color: #fff; white-space: nowrap; transition: transform .16s var(--ease); }
.btn::before { content: ""; position: absolute; inset: 0 4px; z-index: -1; background: var(--grad-red); transform: skewX(-14deg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -2px 0 rgba(0, 0, 0, .14); transition: filter .18s var(--ease); }
.btn svg { width: 20px; height: 20px; transition: transform .2s var(--ease); }
.btn:active { transform: translateY(1px); }
.btn-sm { height: 44px; padding: 0 20px; font-size: 15px; }
.link { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; font: 600 16px/1.2 var(--sans); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px; text-decoration-color: rgba(255, 255, 255, .45); transition: text-decoration-color .18s var(--ease); }
.link svg { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover::before { filter: brightness(1.08); }
  .btn:hover svg { transform: translateX(4px); }
  .link:hover { text-decoration-color: var(--red); }
}

/* ——— Barra: marca, trilho de luz (navegação) e ações ——— */
.bar { position: fixed; z-index: 50; top: 0; left: 0; right: 0; height: calc(var(--bar) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) var(--pad) 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s6); color: #fff; pointer-events: none; }
.bar > * { pointer-events: auto; }
.bar::before { content: ""; position: absolute; inset: 0 0 -40px; z-index: -1; background: linear-gradient(180deg, rgba(8, 8, 9, .62), rgba(8, 8, 9, 0)); opacity: var(--bar-shade, 0); transition: opacity .3s var(--ease); pointer-events: none; }
.bar.is-shade { --bar-shade: 1; }
.bar.is-page::before, .no-js .bar::before { background: rgba(11, 11, 12, .96); inset: 0; border-bottom: 1px solid var(--rule); }
.bar.is-page, .no-js .bar { --bar-shade: 1; }
.bar-brand { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; }
.bar-brand img { width: 84px; height: auto; }
.bar-actions { justify-self: end; display: flex; align-items: center; gap: var(--s2); }
.bar-link { padding: 10px var(--s3); font: 600 13px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; color: var(--ink-soft); transition: color .16s var(--ease); }
.bar-link:hover { color: #fff; }
.bar-icon { display: grid; place-items: center; width: 44px; height: 44px; color: var(--ink-soft); transition: color .16s var(--ease); }
.bar-icon:hover { color: #fff; }
.bar-sound svg { width: 22px; height: 22px; }
.bar-menu { display: none; }
.bar-menu svg { width: 26px; height: 26px; }

/* O trilho: a linha de luz com as cinco baias como paradas. Acende até a baia atual. */
.lane { position: relative; width: clamp(340px, 34vw, 540px); height: 44px; }
.lane-rail { position: absolute; left: 0; right: 0; top: 14px; height: 1px; background: rgba(255, 255, 255, .2); }
.lane-lit { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--lane, 0)); background: var(--light); box-shadow: 0 0 6px 1px var(--halo); }
.lane ol { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(5, 1fr); }
.lane li { position: relative; }
.lane a { position: absolute; left: 50%; top: 0; transform: translateX(-50%); display: grid; justify-items: center; gap: 6px; min-width: 64px; padding: 9px 4px 4px; font: 600 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); transition: color .18s var(--ease); }
.lane a::before { content: ""; width: 7px; height: 7px; background: var(--canvas); outline: 1px solid rgba(255, 255, 255, .45); transition: background-color .2s var(--ease), outline-color .2s var(--ease); }
.lane a b { font: italic 800 13px/1 var(--cond); letter-spacing: 0; color: inherit; }
.lane a span { opacity: 0; transform: translateY(-2px); transition: opacity .18s var(--ease), transform .18s var(--ease); white-space: nowrap; }
.lane a.is-past::before { background: var(--light); outline-color: var(--light); }
.lane a.is-past { color: var(--ink-soft); }
.lane a.is-on { color: #fff; }
.lane a.is-on::before { background: var(--red); outline-color: var(--red); }
.lane a.is-on span, .lane a:focus-visible span { opacity: 1; transform: none; }
.bar-trace { display: none; }
.menu-links a.is-on::after { content: ""; flex: 1; align-self: center; height: 1px; margin-left: var(--s2); background: var(--light); box-shadow: 0 0 6px 1px var(--halo); }
@media (hover: hover) and (pointer: fine) { .lane a:hover { color: #fff; } .lane a:hover span { opacity: 1; transform: none; } }

.menu { position: fixed; z-index: 49; inset: 0; padding: calc(var(--bar) + 6vh + env(safe-area-inset-top)) var(--pad) calc(var(--s7) + env(safe-area-inset-bottom)); display: flex; flex-direction: column; justify-content: space-between; gap: var(--s7); background: var(--canvas); overflow-y: auto; }
.menu-links { display: grid; }
.menu-links a { display: flex; align-items: baseline; gap: var(--s4); padding: 10px 0; border-bottom: 1px solid var(--rule); font: 800 34px/1.05 var(--cond); text-transform: uppercase; }
.menu-links a b { font: italic 800 17px/1 var(--cond); color: var(--red-ink); width: 26px; }
.menu-foot { display: grid; gap: var(--s5); justify-items: start; color: var(--ink-soft); }

/* ——— Atos: seção alta com um palco preso. O JS escreve a altura (span em telas). ——— */
main { position: relative; }
.act { position: relative; }
.stage { position: sticky; top: 0; height: var(--lvh); overflow: hidden; background: var(--canvas); }
.gl-slot { position: absolute; inset: 0; }
/* passagem no lugar: o ato terminou e o seguinte já está por baixo com o mesmo quadro */
.stage.is-gone { opacity: 0; pointer-events: none; }
.bay-ceramic .stage, .ppf-photo { touch-action: pan-y; }
.gl-slot canvas, .gl-slot .poster, .gl-slot .snap { position: absolute; inset: 0; width: 100%; height: 100%; }
.gl-slot .poster { object-fit: cover; }
.scrim { position: absolute; pointer-events: none; }

/* ——— Hero: a abertura em camadas (WebGL) entrega ao filme ——— */
.reel { position: absolute; inset: 0; background: #000; }
.act-hero .reel { opacity: var(--reel-a, 0); }
.act-hero .gl-slot { opacity: var(--gl-a, 1); }
.reel-box { position: absolute; inset: 0; overflow: hidden; }
.reel-box video, .reel-box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel-box picture { display: contents; }
.reel-video { opacity: 0; }
.reel.is-live .reel-video { opacity: 1; }
/* o canvas da fusão entre quadros do scrub (js/scrub.js), logo acima do vídeo */
.reel-box .reel-blend { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.reel-box .reel-blend[hidden], .reel:not(.is-live) .reel-blend { display: none; }
.act-hero .reel-still img { opacity: var(--still-a, 0); }
/* a linha de luz como elemento de cena (lavagem → polimento, PPF, interior) */
.trace, .seam, .ppf-edge { position: absolute; z-index: 4; left: 0; top: 50%; width: 2px; height: 200vmax; margin: -100vmax 0 0 -1px; background: #fff; box-shadow: 0 0 10px 2px var(--halo); pointer-events: none; }
.trace { opacity: 0; will-change: transform; }
.seam { left: var(--seam); opacity: 0; transform: rotate(-.05rad); }
.shade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }
/* janela móvel (js/win.js): só transformações por quadro */
.win { position: absolute; left: 0; top: 50%; width: 200vmax; height: 200vmax; margin-top: -100vmax; overflow: hidden; transform-origin: 0 50%; pointer-events: none; will-change: transform; }
.win > img, .win picture > img, .win > i { position: absolute; left: 0; top: calc(100vmax - var(--ch, 100vh) / 2); width: var(--cw, 100vw); height: var(--ch, 100vh); max-width: none; object-fit: cover; transform-origin: 0 calc(var(--ch, 100vh) / 2); will-change: transform; }
.win picture { display: contents; }

/* ——— Hero ——— */
.hero-scrim { left: 0; bottom: 0; width: min(900px, 70vw); height: 70%; background: radial-gradient(120% 100% at 0% 100%, rgba(8, 8, 9, .72), rgba(8, 8, 9, .35) 45%, rgba(8, 8, 9, 0) 75%); }
.hero-copy { position: absolute; left: var(--pad); bottom: calc(var(--chrome) + 7vh + env(safe-area-inset-bottom)); width: min(600px, 46vw); }
.hero-copy h1 { font-size: clamp(46px, 4.6vw, 76px); line-height: .92; }
.hero-copy .lead { margin-top: var(--s4); }
.hero-copy .actions { margin-top: var(--s7); }
.hero-copy > * { opacity: var(--a, 1); transform: translate3d(0, calc((1 - var(--a, 1)) * -18px), 0); }
.hero-copy:focus-within > * { opacity: 1; transform: none; }

/* ——— Cards: editorial de configurador. Fundo chapado, cantos retos, a borda é a luz. ——— */
.card { position: absolute; z-index: 3; width: min(408px, calc(100vw - 2 * var(--pad))); padding: var(--s7) var(--s7) var(--s6); background: var(--surface); color: var(--ink); opacity: var(--a, 0); transform: translate3d(0, calc((1 - var(--a, 0)) * 16px), 0); pointer-events: var(--pe, none); }
.card-trace { position: absolute; left: -1px; top: -1px; width: calc(100% + 2px); height: calc(100% + 2px); overflow: visible; pointer-events: none; }
.card-trace rect { x: .5px; y: .5px; width: calc(100% - 1px); height: calc(100% - 1px); fill: none; vector-effect: non-scaling-stroke; }
.trace-dim { stroke: rgba(255, 255, 255, .24); stroke-width: 1; stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--draw, 0)); }
.trace-head { stroke: #fff; stroke-width: 1.6; stroke-dasharray: .08 .92; stroke-dashoffset: calc(.08 - var(--draw, 0)); opacity: var(--head, 0); filter: drop-shadow(0 0 3px rgba(255, 255, 255, .7)); }
.card-num { display: flex; align-items: baseline; gap: var(--s3); font: italic 800 26px/1 var(--cond); color: var(--red-ink); }
.card-num span { margin-left: auto; font: 600 11.5px/1 var(--sans); font-style: normal; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-mute); }
.card-num::after { content: ""; order: 1; flex: 1; height: 1px; margin-bottom: .3em; background: var(--rule); }
.card-num span { order: 2; margin-left: 0; }
.card-title { margin-top: var(--s5); font-size: clamp(44px, 3.9vw, 60px); line-height: .9; }
.card-title span { display: block; }
.card-title span + span { color: var(--ink-soft); }
.card-lead { margin-top: var(--s4); font: 500 20px/1.3 var(--sans); }
.card-text { margin-top: var(--s2); font-size: 16px; line-height: 1.6; color: var(--ink-soft); text-wrap: pretty; }
.card-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3) var(--s5); margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--rule); }
.card-explore { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 700 16px/1 var(--cond); letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.card-explore svg { width: 18px; height: 18px; transition: transform .2s var(--ease); }
.card-explore[aria-pressed="true"] { color: var(--red-ink); }
.card-add { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 500 14px/1.2 var(--sans); color: var(--ink-soft); transition: color .16s var(--ease); }
.card-add::before { content: ""; width: 12px; height: 12px; outline: 1px solid rgba(255, 255, 255, .5); outline-offset: -1px; transition: background-color .16s var(--ease), outline-color .16s var(--ease); }
.card-add[aria-pressed="true"] { color: #fff; }
.card-add[aria-pressed="true"]::before { background: var(--red); outline-color: var(--red); }
.card-hint { margin-top: var(--s3); font-size: 13px; color: var(--ink-mute); }
.hint-touch { display: none; }
.no-hover .hint-fine { display: none; }
.no-hover .hint-touch { display: inline; }
.no-js .card-hint, .reduced .card-hint, .no-gl .card-hint { display: none; }
@media (hover: hover) and (pointer: fine) {
  .card-explore:hover svg { transform: translateX(4px); }
  .card-add:hover { color: #fff; }
}
/* foco do teclado revela o card (o do clique não: o card sairia de cena aceso) */
.card:has(:focus-visible) { opacity: 1 !important; pointer-events: auto !important; }

/* posição de cada card no desktop (presos a algo da cena); cada um entra de um jeito */
.bay-wash .card { left: clamp(var(--pad), calc(31vw - 360px), 120px); top: 50%; margin-top: -210px; transform: translate3d(0, var(--ty, 0px), 0) scale(var(--sc, 1)); transform-origin: 50% 100%; }
.bay-polish .card { right: var(--pad); top: 50%; margin-top: -200px; transform: none; }
.bay-ceramic .card { left: var(--pad); top: 50%; margin-top: -230px; }
.bay-ppf .card { left: calc(var(--seam) + (100% - var(--seam) - min(408px, calc(100% - var(--seam) - 2 * var(--pad)))) / 2); top: 50%; width: min(408px, calc(100% - var(--seam) - 2 * var(--pad))); transform: translate3d(var(--tx, 0px), -50%, 0); }
.bay-interior .card { right: var(--pad); bottom: calc(var(--chrome) + var(--pad)); transform: translate3d(calc(var(--ox, 0px) * .14 * (1 - var(--grow, 1))), calc(var(--oy, 0px) * .14 * (1 - var(--grow, 1))), 0) scale(calc(.94 + .06 * var(--grow, 1))); }

/* ——— 01 Lavagem: a foto do último quadro; "Ver de perto" aproxima até as gotas ——— */
.wash-photo { position: absolute; inset: 0; overflow: hidden; background: #000; }
/* duas camadas da mesma foto: o galpão atrás e o carro (máscara de profundidade, suave) na frente */
.wash-still, .wash-near { transform-origin: 50% 68%; will-change: transform; }
.wash-near { -webkit-mask: url("assets/wash/near-mask.png") center / cover no-repeat; mask: url("assets/wash/near-mask.png") center / cover no-repeat; }
@media (max-aspect-ratio: 9/10) { .wash-near { -webkit-mask-image: url("assets/wash/near-mask-m.png"); mask-image: url("assets/wash/near-mask-m.png"); } }
.wash-photo .reel-box { transition: transform 1s var(--ease); }
.wash-photo.is-zoom .reel-box { transform: scale(1.5); }
.wash-detail { position: absolute; max-width: none; opacity: 0; transition: opacity .5s var(--ease) .3s; }
.wash-photo.is-zoom.has-detail .wash-detail { opacity: 1; }

/* ——— 02 Polimento: a macro em três estados alinhados e a linha de inspeção ——— */
.paint { position: absolute; inset: 0; overflow: hidden; background: #050506; }
.paint > img, .paint > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.paint > picture { display: contents; }
.win-mid { opacity: .4; }
.win-band { opacity: 0; -webkit-mask-image: linear-gradient(90deg, #000 0, #000 18%, transparent); mask-image: linear-gradient(90deg, #000 0, #000 18%, transparent); }
.paint-refl { opacity: 0; }
.paint-before { opacity: 0; transition: opacity .45s var(--ease); }
.paint.is-before .paint-before { opacity: .42; }
.paint.is-before .paint-refl { opacity: 0 !important; }

/* ——— Silêncio: só tipografia ——— */
.quiet { position: relative; display: grid; align-content: center; min-height: calc(var(--svh) * .92); padding: var(--s11) var(--pad); background: var(--canvas); }
.quiet-type { max-width: 1240px; font: 800 clamp(52px, 8.2vw, 136px)/.88 var(--cond); letter-spacing: -.012em; text-transform: uppercase; text-wrap: balance; }
.quiet-type span { display: block; }
.quiet-type span + span { color: var(--ink-mute); }
.quiet-type .quiet-last { margin-top: .32em; color: var(--ink); font-style: italic; }
.quiet-note { max-width: 1240px; margin-top: var(--s7); font: 500 15px/1.5 var(--sans); letter-spacing: .02em; color: var(--ink-mute); }
/* a ficha da praia ao lado do silêncio: o mapa da orla (scripts/data/build_coast_svg.py), o que a
   pintura enfrenta e o que vem a seguir. Tudo em fio fino e texto pequeno: o título manda */
.quiet { grid-template-columns: minmax(0, 1fr) clamp(300px, 25vw, 400px); column-gap: clamp(40px, 5vw, 96px); align-items: center; }
.quiet .quiet-type { font-size: clamp(52px, 7.2vw, 136px); }
.quiet-sheet .kicker { margin-bottom: var(--s4); }
.quiet-map { margin: 0 0 var(--s6); }
.quiet-map-box { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--canvas); box-shadow: inset 0 0 0 1px var(--rule); }
.quiet-map-box img, .quiet-map-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.quiet-map figcaption { margin-top: var(--s3); font: 400 13px/1.45 var(--sans); color: var(--ink-mute); }
.quiet-map-art text { font-family: var(--cond); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; fill: var(--ink-mute); }
.quiet-map-art .q-beach { font-style: italic; fill: var(--ink-soft); }
.quiet-map-art .q-store { font-weight: 800; letter-spacing: .08em; fill: var(--ink); }
.quiet-map-art .q-street { font-family: var(--sans); font-weight: 500; letter-spacing: .04em; text-transform: none; }
.quiet-map-art .q-wind-name { font-family: var(--sans); font-weight: 500; letter-spacing: .06em; text-transform: none; font-style: italic; }
.quiet-map-art .q-wind { fill: none; stroke: rgba(242, 241, 237, .5); stroke-width: 8; stroke-dasharray: 22 58; stroke-linecap: round; }
.quiet-map-art .q-head { fill: none; stroke: rgba(242, 241, 237, .5); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.quiet-map-art .q-dot { fill: var(--red); }
.quiet-map-art .q-ring { fill: none; stroke: rgba(255, 255, 255, .35); stroke-width: 7; }
.quiet-map-art .q-rule { fill: none; stroke: var(--ink-mute); stroke-width: 7; stroke-linecap: square; }
/* o vento anda devagar do mar para a terra, só com o silêncio na tela (js/ui.js) */
.quiet.is-in .q-wind { animation: q-wind 2.6s linear infinite; }
@keyframes q-wind { to { stroke-dashoffset: -80; } }
@media (prefers-reduced-motion: reduce) { .quiet.is-in .q-wind { animation: none; } }
.reduced .quiet .q-wind { animation: none; }
.quiet-facts { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.quiet-facts li { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--rule); }
.quiet-facts b { font: 800 15px/1.4 var(--cond); letter-spacing: .1em; text-transform: uppercase; }
.quiet-facts span { font-size: 14px; line-height: 1.45; color: var(--ink-soft); }
.quiet-next { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s5); margin-top: var(--s5); font: 600 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); }
.quiet-next a { display: inline-flex; align-items: baseline; gap: var(--s2); padding: var(--s2) 0; font: 700 15px/1 var(--cond); letter-spacing: .08em; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px; text-decoration-color: rgba(255, 255, 255, .35); transition: text-decoration-color .18s var(--ease); }
.quiet-next b { font: 800 italic 15px/1 var(--cond); color: var(--red-ink); }
/* coordenadas da loja (do link do Apple Maps), como numa ficha técnica */
.coords { margin-top: var(--s3); font: 600 12px/1.2 var(--sans); letter-spacing: .16em; color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.footer .coords { margin: 0; padding: 0 0 4px; font-size: 12px; color: rgba(255, 255, 255, .78); }
/* a chegada: uma faixa quadriculada discreta no alto do rodapé, o fim do percurso */
.finish { position: absolute; left: 0; right: 0; top: 0; height: 8px; opacity: .22; background: repeating-conic-gradient(#fff 0 25%, transparent 0 50%) 0 0 / 8px 8px; pointer-events: none; }
main:has(> .band:last-child) + .footer .finish { transform-origin: 0 0; transform: rotate(1.5deg); transform: rotate(atan2(var(--cut), 100vw)); }

/* ——— 04 PPF: a macro à esquerda da costura, o card ao lado ——— */
.ppf-photo { position: absolute; left: 0; top: 0; bottom: 0; width: var(--seam); overflow: hidden; background: #060607; }
.ppf-photo picture { display: contents; }
.ppf-photo > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.ppf-off, .ppf-on { object-fit: cover; object-position: 50% 50%; }
.ppf-edge { z-index: 2; will-change: transform; }
.fl { position: absolute; left: 0; top: calc(var(--bar) + 4vh); font: 600 11.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; pointer-events: none; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.ppf-cover { position: absolute; inset: 0; z-index: 2; background: #000; opacity: 0; pointer-events: none; }
.film-control { margin-top: var(--s4); }
/* o vidro: a película escurece nele no fim do PPF, e o Interior começa nele */
.glass { position: absolute; z-index: 5; left: 0; top: 50%; width: 200vmax; height: 200vmax; margin-top: -100vmax; overflow: hidden; transform-origin: 0 50%; opacity: 0; pointer-events: none; }
.glass-sheet { position: absolute; left: 0; top: calc(100vmax - var(--ch, 100vh) / 2); width: var(--cw, 100vw); height: var(--ch, 100vh); transform-origin: 0 calc(var(--ch, 100vh) / 2); background:
  linear-gradient(104deg, rgba(255, 255, 255, 0) 28%, rgba(255, 255, 255, .06) 41%, rgba(255, 255, 255, 0) 55%),
  repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 0 8.4%, rgba(255, 255, 255, .03) 9% 9.6%, rgba(255, 255, 255, 0) 10.2% 18.6%),
  linear-gradient(170deg, #1a1c20, #0d0e11 45%, #08090a); }
.bay-interior .glass { z-index: 1; opacity: 1; }

/* ——— Proteção: rótulos das camadas, separador, película e o empilhamento dos cards ——— */
.layer-labels { position: absolute; inset: 0; pointer-events: none; }
.layer-labels li { position: absolute; left: 0; top: 0; display: flex; align-items: baseline; gap: 10px; padding-left: 40px; white-space: nowrap; opacity: var(--a, 0); transform: translate3d(var(--x, -999px), var(--y, -999px), 0) translateY(-50%); }
.layer-labels li::before { content: ""; position: absolute; left: 0; top: 50%; width: 30px; height: 1px; background: rgba(255, 255, 255, .55); transform-origin: 0 50%; transform: scaleX(var(--a, 0)); }
.layer-labels li::after { content: ""; position: absolute; left: -3px; top: calc(50% - 3px); width: 6px; height: 6px; background: var(--red); }
.layer-labels b { font: 800 17px/1 var(--cond); letter-spacing: .06em; text-transform: uppercase; transition: color .2s var(--ease); }
.layer-labels li.is-lit b { color: #fff; text-shadow: 0 0 12px rgba(255, 255, 255, .5); }
.layer-labels li { color: var(--ink-soft); }
.layer-labels span { font-size: 13px; color: var(--ink-mute); }
.separator { position: absolute; z-index: 4; opacity: var(--a, 0); pointer-events: var(--pe, none); }
.separator:has(:focus-visible) { opacity: 1 !important; pointer-events: auto !important; }
.separator { left: var(--sx, 60%); top: var(--sy, 82%); width: 240px; transform: translateX(-50%); }
input[type="range"] { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px; margin: 0; background: transparent; cursor: ew-resize; }
input[type="range"]::-webkit-slider-runnable-track { height: 1px; background: rgba(255, 255, 255, .35); }
input[type="range"]::-moz-range-track { height: 1px; background: rgba(255, 255, 255, .35); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 4px; height: 26px; margin-top: -13px; background: #fff; border: 0; border-radius: 0; box-shadow: 0 0 8px 2px var(--halo); }
input[type="range"]::-moz-range-thumb { width: 4px; height: 26px; background: #fff; border: 0; border-radius: 0; box-shadow: 0 0 8px 2px var(--halo); }
input[type="range"]:focus-visible { outline: 2px solid var(--red-ink); outline-offset: 2px; }
.separator-hint { margin-top: 2px; text-align: center; font: 600 11.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); }
/* a fenda: do preto do silêncio, a linha de luz abre o Ceramic */
.slit { position: absolute; inset: 0; z-index: 2; pointer-events: none; visibility: var(--vis, hidden); }
.slit::before, .slit::after { content: ""; position: absolute; left: 0; right: 0; height: 50%; background: var(--canvas); }
.slit::before { top: 0; transform: translateY(calc(var(--open, 0) * -100%)); }
.slit::after { bottom: 0; transform: translateY(calc(var(--open, 0) * 100%)); }
.slit i { position: absolute; left: 0; right: 0; top: 50%; height: 1px; margin-top: -.5px; background: #fff; box-shadow: 0 0 8px 1px var(--halo); transform: scaleX(var(--line, 1)); opacity: var(--line-a, 1); }
/* ——— 05 Interior: a foto em camadas, os pontos e a lupa parada ao lado deles ——— */
.cabin { position: absolute; inset: 0; overflow: hidden; background: #050506; }
.cabin img { position: absolute; left: 0; top: 0; width: 100%; height: auto; max-width: none; transform-origin: 0 0; will-change: transform; }
.spots { position: absolute; inset: 0; pointer-events: none; }
.spot { position: absolute; left: var(--sx, 0); top: var(--sy, 0); display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px 0 0; transform: translate(-22px, -50%); pointer-events: var(--pe, none); opacity: var(--a, 0); color: #fff; }
.spot:focus-visible { opacity: 1 !important; }
.spot i { position: relative; width: 44px; height: 44px; display: grid; place-items: center; }
.spot i::before { content: ""; width: 9px; height: 9px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 0 10px 2px var(--halo); transition: transform .2s var(--ease), background-color .2s var(--ease); }
.spot i::after { content: ""; position: absolute; inset: 11px; outline: 1px solid rgba(255, 255, 255, .55); }
.spot span { padding: 6px 10px; background: rgba(11, 11, 12, .88); font: 700 14px/1 var(--cond); letter-spacing: .12em; text-transform: uppercase; opacity: 0; transform: translateX(-4px); transition: opacity .18s var(--ease), transform .18s var(--ease); }
.spot[aria-pressed="true"] i::before { background: var(--red); transform: scale(1.2); }
.spot.is-auto i::before { background: var(--red); }
.spot.is-auto i::after { animation: ping 1.8s var(--ease) infinite; }
.spot.is-auto span { opacity: 1; transform: none; }
@keyframes ping { 0% { transform: scale(.6); opacity: 1; } 70%, 100% { transform: scale(1.5); opacity: 0; } }
.loupe { position: absolute; left: 0; top: 0; z-index: 2; width: clamp(140px, 13vw, 200px); aspect-ratio: 1; outline: 1px solid rgba(255, 255, 255, .7); outline-offset: -1px; background: #050506; opacity: 0; pointer-events: none; transition: opacity .2s var(--ease); }
.loupe.is-on { opacity: 1; }
.loupe i { position: absolute; inset: 0; background-repeat: no-repeat; }
.spot.is-flip { flex-direction: row-reverse; padding: 0 0 0 12px; transform: translate(calc(-100% + 22px), -50%); }
.spot.is-flip span { transform: translateX(4px); }
.spot[aria-pressed="true"] span, .spot:focus-visible span { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) { .spot:hover span { opacity: 1; transform: none; } }

/* ——— Resultado: foto inteira, parada (uma pausa) ——— */
.result-figure { position: absolute; inset: 0; }
.result-figure img, .act-final .reel-box img, .act-final .reel-box video, .act-final .reel-box canvas { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.result-scrim, .final-scrim { left: 0; bottom: 0; width: min(820px, 75vw); height: 60%; background: radial-gradient(110% 100% at 0% 100%, rgba(8, 8, 9, .78), rgba(8, 8, 9, .3) 50%, rgba(8, 8, 9, 0) 78%); }
.result-copy { position: absolute; left: var(--pad); bottom: calc(var(--chrome) + 9vh); display: grid; justify-items: start; gap: var(--s5); }
.result-copy h2 { font-size: clamp(48px, 6vw, 96px); max-width: 12ch; }
.result-copy > * { opacity: var(--a, 1); }

/* ——— Final: o segundo filme e a marca ——— */
/* as fotos ficam em <picture> (display: contents): a opacidade escrita no <picture> passa para o <img> */
.act-final .reel-end img, .act-final .reel-start img { opacity: inherit; }
.reel-end { opacity: 0; }
.final-scrim { opacity: 0; }
.final-copy { position: absolute; left: var(--pad); bottom: calc(var(--chrome) + 8vh); }
.final-copy > * { opacity: var(--a, 1); transform: translate3d(0, calc((1 - var(--a, 1)) * 14px), 0); }
.final-copy h2 { font-size: clamp(44px, 5vw, 84px); line-height: .92; }
.final-copy h2 span { display: block; }
.final-copy h2 span + span { color: var(--ink-soft); }
.final-logo { display: block; width: clamp(170px, 15vw, 260px); height: auto; margin-bottom: var(--s5); }
.final-copy .actions { margin-top: var(--s7); }

/* ——— Ordem de serviço (configurador) ——— */
.order { position: relative; padding: var(--s11) var(--pad) calc(var(--s11) + var(--s5)); background: var(--canvas); }
.order-head { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: var(--s7); }
.order h2 { font-size: clamp(44px, 5vw, 80px); }
.config { max-width: 1240px; margin: var(--s9) auto 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid var(--rule-2); }
.step { padding: var(--s6) var(--s7) var(--s7) 0; border-bottom: 1px solid var(--rule); }
.step:nth-child(odd) { border-right: 1px solid var(--rule); }
.step:nth-child(even) { padding-left: var(--s7); }
.step:nth-last-child(-n+2) { border-bottom: 0; }
.step-note { margin: calc(var(--s2) * -1) 0 var(--s4); }
.opts-list .opt span { min-height: 52px; align-content: center; }
.step legend, .step .legend { display: flex; align-items: baseline; gap: var(--s3); margin-bottom: var(--s5); font: 800 clamp(22px, 1.9vw, 28px)/1 var(--cond); text-transform: uppercase; }
.step legend b, .step .legend b { font: italic 800 18px/1 var(--cond); color: var(--red-ink); }
.step input:not([type]) { width: 100%; height: 56px; padding: 0 2px; border: 0; border-bottom: 1.5px solid rgba(255, 255, 255, .55); border-radius: 0; background: transparent; color: #fff; font: 500 22px var(--sans); }
.step input::placeholder { color: rgba(255, 255, 255, .55); }
.step input:focus { border-bottom-color: var(--red); box-shadow: 0 1.5px 0 var(--red); }
.step input:focus-visible { outline: none; }
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.opt { position: relative; display: block; cursor: pointer; }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt span { display: grid; gap: 4px; min-height: 64px; padding: 12px 14px; border: 1px solid var(--rule); transition: border-color .16s var(--ease), background-color .16s var(--ease); }
.opt b { display: flex; align-items: center; gap: 10px; font: 800 18px/1.1 var(--cond); letter-spacing: .05em; text-transform: uppercase; }
.opt b::before { content: ""; width: 9px; height: 9px; outline: 1px solid rgba(255, 255, 255, .5); outline-offset: -1px; flex: none; }
.opt small { font-size: 13px; line-height: 1.3; color: var(--ink-mute); }
.opt input:checked + span { border-color: rgba(255, 255, 255, .7); background: var(--surface-2); }
.opt input:checked + span b::before { background: var(--red); outline-color: var(--red); }
.opt input:focus-visible + span { outline: 2px solid var(--red-ink); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .opt:hover span { border-color: var(--rule-2); } }
.message { min-height: 128px; padding: var(--s4); background: var(--surface); font-size: 16.5px; line-height: 1.55; color: #fff; overflow-wrap: anywhere; }
.step-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s5); margin-top: var(--s5); }

/* ——— Endereço: a rota ——— */
.act-route .stage { background: #0a0b0c; }
.route-map { position: absolute; inset: 0; }
.route-map svg, .route-static { position: absolute; inset: 0; width: 100%; height: 100%; }
.route-static { object-fit: cover; }
@media (max-width: 760px) { .route-static { object-position: 62% 50%; } }
.route-scrim { left: 0; top: 0; bottom: 0; width: min(760px, 62vw); background: linear-gradient(90deg, rgba(10, 11, 12, .92) 0%, rgba(10, 11, 12, .7) 55%, rgba(10, 11, 12, 0) 100%); }
.route-copy { position: absolute; left: var(--pad); bottom: calc(var(--chrome) + 9vh); width: min(520px, 44vw); }
.route-copy h2 { font-size: clamp(42px, 4.4vw, 72px); }
.route-copy .lead { margin-top: var(--s4); }
.route-copy .actions { margin-top: var(--s7); }
.route-order { margin-top: var(--s5); padding: var(--s3) var(--s4); background: var(--surface); font-size: 15px; line-height: 1.5; color: var(--ink); }
.route-order b { display: block; margin-bottom: 2px; font: 600 11.5px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); }
.route-copy > * { opacity: var(--a, 1); }
.osm { position: absolute; right: var(--pad); bottom: calc(var(--chrome) + 14px); font-size: 11.5px; color: rgba(255, 255, 255, .5); }

/* ——— Dúvidas e rodapé ——— */
.faq { position: relative; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.25fr); gap: 7vw; padding: var(--s11) var(--pad); background: var(--canvas); border-top: 1px solid var(--rule); }
.faq h2 { font-size: clamp(42px, 4.6vw, 76px); }
.faq-head .lead { margin-top: var(--s4); }
.faq-head .btn { margin-top: var(--s7); }
.faq-list details { border-bottom: 1px solid var(--rule); }
.faq-list details:first-child { border-top: 1px solid var(--rule); }
.faq-list summary { display: grid; grid-template-columns: 1fr 24px; align-items: baseline; gap: var(--s3); padding: var(--s6) 0; font: 600 20px/1.35 var(--sans); cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary i { position: relative; align-self: center; width: 18px; height: 18px; }
.faq-list summary i::before, .faq-list summary i::after { content: ""; position: absolute; left: 0; top: 50%; width: 18px; height: 2px; margin-top: -1px; background: currentColor; transition: transform .25s var(--ease); }
.faq-list summary i::after { transform: rotate(90deg); }
.faq-list details[open] summary i::after { transform: rotate(0); }
.faq-list details p { padding: 0 36px var(--s6) 0; font-size: 17px; line-height: 1.6; color: var(--ink-soft); }
.faq-list details a { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .faq-list summary:hover .q { color: var(--red-ink); } .quiet-next a:hover { text-decoration-color: var(--red); } }
.footer { position: relative; padding: var(--s11) var(--pad) calc(var(--s6) + env(safe-area-inset-bottom)); background: var(--red); color: #fff; }
.footer :focus-visible { outline-color: #fff; }
.footer-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s7); padding-bottom: var(--s8); border-bottom: 1px solid rgba(255, 255, 255, .4); }
.footer-logo { width: 210px; height: auto; }
.footer-line { max-width: 20ch; font: 800 clamp(22px, 2.2vw, 32px)/1.02 var(--cond); text-transform: uppercase; text-align: right; }
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s7); padding: var(--s8) 0; }
.footer-cols h3 { margin-bottom: var(--s3); font: 600 12.5px/1.2 var(--sans); letter-spacing: .14em; color: #fff; }
.footer-cols a, .footer-cols p { display: block; padding: 5px 0; font-size: 16px; }
.footer-cols a { padding: 10px 0; }
/* no rodapé a linha de luz é o registro do percurso: acesa de ponta a ponta, com as cinco paradas */
.footer-steps { padding-left: 22px; }
.footer-steps a { position: relative; }
.footer-steps a::before { content: ""; position: absolute; left: -22px; top: 22px; width: 7px; height: 7px; margin-top: -3.5px; background: #fff; }
.footer-steps a:not(:last-child)::after { content: ""; position: absolute; left: -19px; top: 22px; height: 100%; width: 1px; background: #fff; box-shadow: 0 0 6px 1px rgba(255, 255, 255, .35); }
.footer-cols a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s4); padding-top: var(--s5); border-top: 1px solid rgba(255, 255, 255, .4); font-size: 13.5px; color: #fff; }
.footer-tools { display: flex; align-items: center; gap: var(--s6); }
.footer-tools a, .footer-tools button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 13.5px; text-decoration: underline; text-underline-offset: 4px; }
.footer-tools svg { width: 15px; height: 15px; }
/* o estado do movimento reduzido: quadradinho cheio quando ligado */
.motion::before { content: ""; width: 9px; height: 9px; margin-right: 4px; outline: 1px solid currentColor; outline-offset: -1px; flex: none; }
.motion[aria-pressed="true"]::before { background: currentColor; }

/* Saltos longos: um corte rápido no preto em vez de atravessar todas as baias. */
.curtain { position: fixed; z-index: 45; inset: 0; background: var(--canvas); opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); }
.curtain.is-on { opacity: 1; }

/* ——— Responsivo ——— */
@media (max-width: 1180px) { :root { --seam: 52%; } }
@media (max-width: 1080px) {
  .bar { grid-template-columns: auto 1fr; }
  .lane { display: none; }
  .bar-trace { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(255, 255, 255, .14); opacity: var(--trace-a, 0); transition: opacity .3s var(--ease); }
  .bar-trace i { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--lane, 0)); background: var(--light); box-shadow: 0 0 6px 1px var(--halo); }
  .bar-trace b { position: absolute; top: -2px; width: 5px; height: 5px; margin-left: -2.5px; background: var(--canvas); outline: 1px solid rgba(255, 255, 255, .45); }
  .bar-trace b:nth-of-type(1) { left: 10%; } .bar-trace b:nth-of-type(2) { left: 30%; } .bar-trace b:nth-of-type(3) { left: 50%; } .bar-trace b:nth-of-type(4) { left: 70%; } .bar-trace b:nth-of-type(5) { left: 90%; }
  .bar-trace b.is-past { background: var(--light); outline-color: var(--light); }
  .bar-trace b.is-on { background: var(--red); outline-color: var(--red); }
  .bar-link, .bar-sound { display: none; }
  .bar-menu { display: grid; }
  /* a ficha da praia desce para baixo do título: o mapa à esquerda, a lista à direita */
  .quiet { grid-template-columns: minmax(0, 1fr); row-gap: var(--s9); }
  .quiet .quiet-type { font-size: clamp(52px, 8.2vw, 136px); }
  .quiet-sheet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s8); align-items: start; }
  .quiet-sheet .kicker { grid-column: 1 / -1; }
  .quiet-map { grid-row: 2 / span 2; margin: 0; }
  .quiet-map-box { aspect-ratio: 1; }
}
@media (max-width: 960px) {
  .config { grid-template-columns: 1fr; }
  .step, .step:nth-child(even), .step:nth-child(odd) { padding: var(--s6) 0; border-right: 0; border-bottom: 1px solid var(--rule); }
  .step:nth-last-child(2) { border-bottom: 1px solid var(--rule); }
  .step:last-child { border-bottom: 0; }
  .order-head { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  :root { --bar: 58px; --pad: 16px; --seam: 86%; }
  body { font-size: 16px; }
  .bar-brand img { width: 74px; }
  .hero-copy { left: var(--pad); right: var(--pad); width: auto; bottom: calc(var(--chrome) + 4.5vh + env(safe-area-inset-bottom)); }
  .hero-copy h1 { font-size: clamp(36px, 10.4vw, 48px); }
  .hero-copy .lead { font-size: 16px; }
  .hero-copy .actions { margin-top: var(--s5); }
  .hero-scrim { width: 100%; height: 62%; background: linear-gradient(0deg, rgba(8, 8, 9, .86) 0%, rgba(8, 8, 9, .55) 45%, rgba(8, 8, 9, 0) 100%); }
  .card { left: var(--pad) !important; right: var(--pad) !important; top: auto !important; bottom: calc(var(--chrome) + 12px + env(safe-area-inset-bottom)) !important; width: auto; margin: 0 !important; padding: var(--s4) var(--s4) var(--s2); }
  .card-num { font-size: 20px; }
  .card-title { margin-top: var(--s2); font-size: clamp(28px, 8vw, 34px); }
  .card-title span { display: inline; }
  .card-lead { margin-top: var(--s2); font-size: 16px; }
  .card-text { margin-top: 4px; font-size: 14px; line-height: 1.5; }
  .card-actions { margin-top: var(--s3); padding-top: 2px; }
  .card-hint { margin-top: 6px; font-size: 12.5px; }
  .bay-ppf .card { width: auto; transform: translate3d(0, calc((1 - var(--a, 0)) * 16px), 0); }
  .ppf-photo { width: 100%; }
  .film-control { margin-top: var(--s2); }
  .film-control input { height: 36px; }
  .quiet { min-height: calc(var(--svh) * .8); }
  .quiet .quiet-type { font-size: clamp(44px, 13.4vw, 64px); }
  .quiet-sheet { display: block; }
  .quiet-map { margin-bottom: var(--s5); }
  .quiet-map-box { aspect-ratio: 16 / 10; }
  .quiet-facts li { grid-template-columns: 76px minmax(0, 1fr); }
  .final-copy { left: var(--pad); right: var(--pad); bottom: calc(var(--chrome) + 6vh + env(safe-area-inset-bottom)); }
  .final-copy h2 { font-size: clamp(36px, 10.4vw, 48px); }
  .final-logo { width: 150px; margin-bottom: var(--s3); }
  .final-copy .actions { margin-top: var(--s5); }
  .final-scrim { width: 100%; height: 60%; background: linear-gradient(0deg, rgba(8, 8, 9, .86), rgba(8, 8, 9, 0)); }
  .cabin { bottom: auto; height: 62%; }
  .layer-labels b { font-size: 14px; }
  .layer-labels span { display: none; }
  .layer-labels li { padding-left: 26px; }
  .layer-labels li::before { width: 18px; }
  .separator { left: 50% !important; top: calc(var(--bar) + 4px) !important; width: min(260px, 70vw); }
  .film-control { bottom: auto; top: calc(var(--bar) + 2vh); width: 70vw; }
  .fl { top: calc(var(--bar) + 2vh); }
  .loupe { width: 132px; }
  .result-copy { bottom: calc(6vh + env(safe-area-inset-bottom)); left: var(--pad); right: var(--pad); }
  .result-scrim { width: 100%; height: 55%; background: linear-gradient(0deg, rgba(8, 8, 9, .85), rgba(8, 8, 9, 0)); }
  .order { padding: var(--s10) var(--pad); }
  .opts { grid-template-columns: 1fr 1fr; }
  .route-copy { left: var(--pad); right: var(--pad); width: auto; bottom: calc(var(--chrome) + 5vh + env(safe-area-inset-bottom)); }
  .route-scrim { width: 100%; top: auto; height: 70%; background: linear-gradient(0deg, rgba(10, 11, 12, .95) 30%, rgba(10, 11, 12, 0)); }
  .osm { top: calc(var(--bar) + 8px); bottom: auto; }
  .faq { grid-template-columns: 1fr; gap: var(--s8); padding: var(--s10) var(--pad); }
  .faq-list summary { padding: var(--s5) 0; font-size: 17.5px; }
  .faq-list details p { padding: 0 8px var(--s5) 0; font-size: 16px; }
  .footer-top { flex-direction: column; align-items: flex-start; }
  .footer-line { text-align: left; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .footer-cols > div:last-child { grid-column: 1 / -1; }
}
@media (max-width: 380px) {
  .card-text { display: none; }
  .hero-copy .lead { display: none; }
}

/* ——— Celular em pé: o filme e a foto da lavagem num quadrado (a mesma caixa nos dois atos, para a
   passagem no lugar casar); resultado e final com a foto no alto e o texto embaixo do carro ——— */
@media (max-aspect-ratio: 9/10) {
  .act-hero .reel-box, .bay-wash .reel-box { inset: auto; left: calc((100% - var(--sq)) / 2); top: var(--sq-top); width: var(--sq); height: var(--sq); }
}
@media (max-width: 760px) and (orientation: portrait) {
  .result-figure, .act-final .reel-box { bottom: 24%; }
  .result-figure img, .act-final .reel-box img { -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent); mask-image: linear-gradient(180deg, #000 72%, transparent); }
  .result-copy { bottom: calc(var(--chrome) + 6vh + env(safe-area-inset-bottom)); left: var(--pad); right: var(--pad); }
  .result-scrim { width: 100%; height: 55%; background: linear-gradient(0deg, rgba(8, 8, 9, .85), rgba(8, 8, 9, 0)); }
}
/* tablet em pé: o quadrado da lavagem ocupa o alto; o card vai para baixo dele */
@media (min-width: 761px) and (max-aspect-ratio: 9/10) {
  .bay-wash .card { top: auto; margin-top: 0; bottom: calc(var(--chrome) + var(--pad)); }
}
/* tela baixa (Safari do iPhone com as barras à mostra, ~660 px): a foto ocupa menos altura */
@media (max-width: 760px) and (orientation: portrait) and (max-height: 700px) { .result-figure, .act-final .reel-box { bottom: 36%; } }

/* ——— Sem JavaScript, sem WebGL ou com movimento reduzido: composições paradas, nada preso ——— */
.no-js .act, .reduced .act, .no-gl .act { height: auto !important; }
.no-js .stage, .reduced .stage, .no-gl .stage { position: relative; height: auto; min-height: var(--svh); display: grid; align-content: end; padding: calc(var(--bar) + 6vh) var(--pad) 7vh; }
.no-js .gl-slot, .no-gl .gl-slot { position: absolute; inset: 0; }
/* a cena fica com a altura da tela no alto do palco (o conteúdo empilha embaixo) */
:is(.reduced, .no-gl, .no-js) :is(.gl-slot, .wash-photo, .paint, .ppf-photo, .cabin, .act-final .reel, .result-figure) { bottom: auto; height: var(--lvh); }
@media (max-width: 760px) { :is(.reduced, .no-gl) .bay-ceramic .stage { padding-top: calc(var(--lvh) * .52); } }
.stage.is-tall .gl-slot::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28%; background: linear-gradient(rgba(11, 11, 12, 0), var(--canvas)); pointer-events: none; }
.no-js .card, .reduced .card, .no-gl .card { position: relative; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; margin: 0 !important; --a: 1; --pe: auto; --draw: 1; transform: none !important; opacity: 1 !important; pointer-events: auto !important; clip-path: none !important; }
/* PPF parado no desktop: o card continua na coluna da direita */
@media (min-width: 761px) { :is(.reduced, .no-gl, .no-js) .bay-ppf .card { justify-self: end; width: min(408px, calc(100% - var(--seam))); } }
:is(.no-js, .reduced, .no-gl) :is(.hero-copy, .result-copy, .final-copy, .act-route .route-copy) { position: relative; left: auto; right: auto; bottom: auto; }
:is(.no-js, .reduced, .no-gl) :is(.trace, .seam, .shade, .glass, .ppf-cover, .loupe, .wash-near) { display: none; }
:is(.no-js, .reduced, .no-gl) :is(.result-scrim, .final-scrim) { opacity: 1 !important; }
.no-js .win { display: none; }
.no-js .paint-refl, .no-js .act-final .reel-end { opacity: 1; }
.no-js .layer-labels, .no-js .separator, .no-gl .separator, .no-gl .layer-labels, .no-js .film-control, .no-js .fl { display: none; }
.no-js .spots, .no-gl .spots { display: none; }
.no-js .cabin, .no-gl .cabin { position: absolute; }
.reduced .stage { min-height: var(--svh); }
.reduced .paint-before { transition: none; }
.reduced .wash-photo .reel-box, .reduced .wash-detail { transition: none; }

/* QUEM SOMOS · editorial, sem mídia (o conteúdo do site antigo; mesmos tokens do pedido e das dúvidas) */
.about { position: relative; padding: var(--s11) var(--pad); background: var(--canvas); border-top: 1px solid var(--rule); }
.about-grid, .why, .quote { max-width: 1240px; margin: 0 auto; }
.about-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); gap: var(--s8) 7vw; align-items: start; }
.about h2 { font: 800 clamp(40px, 5.2vw, 84px)/.92 var(--cond); letter-spacing: -.01em; text-transform: uppercase; text-wrap: balance; }
.about h2 span { display: block; }
.about h2 span + span { color: var(--ink-mute); }
.about-main .lead { max-width: 58ch; margin-top: var(--s5); }
.about-facts { margin-top: var(--s2); }
.about-facts li { grid-template-columns: 120px minmax(0, 1fr); }
.why { margin-top: var(--s10); }
.why-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s7); counter-reset: why; }
.why-list li { padding-top: var(--s4); border-top: 1px solid var(--rule-2); counter-increment: why; }
.why-list li::before { content: counter(why, decimal-leading-zero); display: block; margin-bottom: var(--s3); font: italic 800 17px/1 var(--cond); color: var(--red-ink); }
.why-list b { display: block; font: 800 22px/1.1 var(--cond); letter-spacing: .01em; text-transform: uppercase; }
.why-list span { display: block; margin-top: var(--s2); font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); }
.quote { margin-top: var(--s10); padding-left: var(--s6); border-left: 2px solid var(--red); }
.quote blockquote { margin: 0; }
.quote p { max-width: 60ch; font: 500 clamp(19px, 1.6vw, 24px)/1.45 var(--sans); color: var(--ink); text-wrap: pretty; }
.quote figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s4); margin-top: var(--s4); font-size: 14px; color: var(--ink-mute); }
.quote figcaption b { font: 800 15px/1 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
/* COMO FUNCIONA · os cinco passos no alto do pedido */
.how { max-width: 1240px; margin: var(--s8) auto 0; padding: var(--s6) 0 0; list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s5); border-top: 1px solid var(--rule); }
.how li { display: grid; gap: var(--s2); align-content: start; }
.how b { font: italic 800 17px/1 var(--cond); color: var(--red-ink); }
.how span { font: 800 17px/1.15 var(--cond); letter-spacing: .02em; text-transform: uppercase; }
.route-copy .hours { margin-top: var(--s2); text-transform: uppercase; }
@media (max-width: 1080px) {
  .why-list { gap: var(--s5); }
  .how { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .about { padding: var(--s10) var(--pad); }
  .about-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s7); }
  .about h2 { font-size: clamp(36px, 10vw, 48px); }
  .about-facts li { grid-template-columns: 96px minmax(0, 1fr); }
  .why, .quote { margin-top: var(--s8); }
  .why-list { grid-template-columns: minmax(0, 1fr); }
  .how { grid-template-columns: minmax(0, 1fr); gap: var(--s3); margin-top: var(--s7); }
  .how li { grid-template-columns: 28px minmax(0, 1fr); align-items: baseline; }
}
.about-more { max-width: 1240px; margin: var(--s8) auto 0; }

/* FAIXAS · blocos em fluxo com fundo próprio (cinza, foto ou vermelho), cortados na diagonal como
   os botões, para o conteúdo depois dos atos não virar um bloco preto só. A linha de luz percorre
   o fio de cima dos blocos pretos quando eles entram (js: .is-in). */
:root { --cut: clamp(14px, 2.6vw, 44px); }
.band { position: relative; z-index: 21; overflow: hidden; overflow: clip; margin: calc(var(--cut) * -1) 0; padding: calc(var(--s10) + var(--cut)) var(--pad); clip-path: polygon(0 0, 100% var(--cut), 100% 100%, 0 calc(100% - var(--cut))); transition: clip-path 1s cubic-bezier(.16, .84, .3, 1); }
.band + .band { margin-top: 0; }
.band-inner { max-width: 1240px; margin: 0 auto; }
.band-surface { background: var(--surface); }
.band-surface::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 80% 0%, rgba(255, 255, 255, .05), transparent 60%); pointer-events: none; }
.band-red { background: var(--red); color: #fff; }
.band-red::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .06), transparent 40%, rgba(0, 0, 0, .12)); pointer-events: none; }
.band-red .kicker { color: #fff; }
.band-red .kicker::before { background: #fff; }
.band-red .lead { color: rgba(255, 255, 255, .86); }
.band-photo { background: #000; color: var(--ink); isolation: isolate; }
.band-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transition: transform 2.6s cubic-bezier(.2, .6, .2, 1); }
.band-scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11, 11, 12, .94) 0%, rgba(11, 11, 12, .82) 45%, rgba(11, 11, 12, .55) 100%), linear-gradient(180deg, rgba(11, 11, 12, .55), transparent 30%, transparent 70%, rgba(11, 11, 12, .7)); }
.band-photo-low .band-scrim { background: linear-gradient(180deg, rgba(11, 11, 12, .88) 0%, rgba(11, 11, 12, .72) 55%, rgba(11, 11, 12, .9) 100%); }
.band-photo-low .band-bg { object-position: 50% 70%; }
.band-trace { position: absolute; left: 0; right: 0; top: 42%; height: 1px; background: #fff; box-shadow: 0 0 10px 2px var(--halo); transform-origin: 0 50%; transform: scaleX(0); opacity: 0; pointer-events: none; }
.js .is-in > .band-trace { animation: trace-draw 1.6s var(--ease) .3s 1 both; }
@keyframes trace-draw { 0% { opacity: 0; transform: scaleX(0); } 15% { opacity: 1; } 100% { opacity: .6; transform: scaleX(1); } }
.reduced .band-trace { display: none; }
.band > .kicker, .band-inner > .kicker { margin-bottom: var(--s6); }
.band-inner > .lead { margin-top: var(--s4); }
/* a linha de luz no fio de cima de um bloco preto, quando ele entra */
[data-light] { position: relative; }
[data-light]::after, .page-section:not(.band)::after { content: ""; position: absolute; left: var(--pad); right: var(--pad); top: -1px; height: 1px; background: linear-gradient(90deg, transparent, #fff 45%, #fff 55%, transparent); background-size: 24% 100%; background-repeat: no-repeat; background-position: -30% 0; opacity: 0; box-shadow: 0 0 8px 1px var(--halo); pointer-events: none; }
.js [data-light].is-in::after, .js .page-section:not(.band).is-in::after { animation: trace-run 1.4s var(--ease) .15s 1 both; }
@keyframes trace-run { 0% { opacity: 0; background-position: -30% 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; background-position: 130% 0; } }
.reduced [data-light]::after, .reduced .page-section:not(.band)::after { display: none; }
/* a faixa abre na diagonal ao chegar (uma vez; js .is-open, um pouco antes de entrar na tela): a
   borda de baixo desce rápido e assenta, à frente da rolagem, então o vazio por baixo não aparece;
   a luz corre pela borda de cima e a foto assenta devagar. O conteúdo sobe um pouco quando a faixa
   já está na tela (.is-in). A faixa em si nunca some: o fundo dela é o que separa as seções. Quem
   fecha as faixas é o próprio script que as abre (html.bands): se ele não rodar, ficam abertas. */
.bands .band:not(.is-open) { clip-path: polygon(0 0, 100% var(--cut), 100% var(--cut), 0 0); }
.bands .band-photo:not(.is-open) .band-bg { transform: scale(1.07); }
.js .band[data-reveal] { opacity: 1; transform: none; }
.band > :not(.band-bg, .band-scrim, .band-trace) { transition: opacity .7s var(--ease) .08s, transform .8s var(--ease) .08s; }
.bands .band:not(.is-in) > :not(.band-bg, .band-scrim, .band-trace) { opacity: 0; transform: translate3d(0, 16px, 0); }
.band::after { content: ""; position: absolute; z-index: 2; left: 0; top: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, #fff 45%, #fff 55%, transparent); background-size: 26% 100%; background-repeat: no-repeat; background-position: -30% 0; box-shadow: 0 0 10px 1px var(--halo); opacity: 0; transform-origin: 0 0; transform: rotate(1.5deg); transform: rotate(atan2(var(--cut), 100vw)); pointer-events: none; }
.bands .band.is-open::after { animation: trace-run 1.5s var(--ease) .1s 1 both; }
.reduced .band, .reduced .band-bg, .reduced .band > * { transition: none !important; }
.reduced .band > :not(.band-bg, .band-scrim, .band-trace) { opacity: 1 !important; transform: none !important; }
.reduced .band { clip-path: polygon(0 0, 100% var(--cut), 100% 100%, 0 calc(100% - var(--cut))) !important; }
.reduced .band-bg { transform: none !important; }
.reduced .band::after { display: none; }
.band-photo-left .band-scrim { background: linear-gradient(90deg, rgba(11, 11, 12, .3) 0%, rgba(11, 11, 12, .62) 34%, rgba(11, 11, 12, .9) 56%, rgba(11, 11, 12, .95) 100%), linear-gradient(180deg, rgba(11, 11, 12, .4), transparent 30%, transparent 75%, rgba(11, 11, 12, .6)); }
.band-photo-left .band-bg { object-position: 0% 70%; }
.faq.band { border-top: 0; }
@media (max-width: 760px) {
  .band-photo-left .band-scrim { background: linear-gradient(180deg, rgba(11, 11, 12, .5) 0%, rgba(11, 11, 12, .84) 28%, rgba(11, 11, 12, .93) 100%); }
  .band-photo-left .band-bg { object-position: 8% 0%; }
}

/* respostas que abrem deslizando, e a linha de luz no fio da pergunta aberta (onde o navegador anima
   o conteúdo do details; nos outros, abre na hora como antes) */
.faq-list details, .svc { position: relative; interpolate-size: allow-keywords; }
.faq-list details::details-content, .svc::details-content { block-size: 0; overflow-y: clip; transition: block-size .45s var(--ease), content-visibility .45s allow-discrete; }
.faq-list details[open]::details-content, .svc[open]::details-content { block-size: auto; }
.faq-list details::after, .svc::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: #fff; box-shadow: 0 0 8px 1px var(--halo); transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s var(--ease); pointer-events: none; }
.faq-list details[open]::after, .svc[open]::after { transform: scaleX(1); }
.reduced .faq-list details::details-content, .reduced .svc::details-content, .reduced .faq-list details::after, .reduced .svc::after { transition: none; }

/* entre as páginas (principal e Quem somos): a nova entra num corte diagonal, como os botões e as
   faixas; a barra fica no lugar. Sem suporte, a navegação é a de sempre. */
@view-transition { navigation: auto; }
.bar { view-transition-name: bar; }
::view-transition-old(root) { animation: vt-old .7s cubic-bezier(.7, 0, .2, 1) both; }
::view-transition-new(root) { animation: vt-new .7s cubic-bezier(.7, 0, .2, 1) both; }
/* o navegador soma as duas imagens (feito para a fusão padrão): aqui a nova cobre a antiga */
::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; }
@keyframes vt-old { to { opacity: .3; transform: translate3d(0, -3%, 0); } }
@keyframes vt-new { from { clip-path: polygon(0 100%, 100% calc(100% + 3 * var(--cut)), 100% calc(100% + 3 * var(--cut)), 0 100%); } to { clip-path: polygon(0 calc(-3 * var(--cut)), 100% 0, 100% 100%, 0 100%); } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
@media (max-width: 760px) { .band { padding: calc(var(--s9) + var(--cut)) var(--pad); } }

/* a página principal depois dos atos: Quem somos numa faixa com a foto do galpão, o pedido numa
   faixa cinza, as dúvidas com a linha de luz */
.about.band-photo { border-top: 0; }
.about .band-inner { position: relative; }
.about .about-grid, .about .why, .about .quote, .about .about-more { position: relative; }
.order.band-surface { padding-top: calc(var(--s11) + var(--cut)); padding-bottom: calc(var(--s11) + var(--s5) + var(--cut)); }
.faq { border-top: 0; }
.faq[data-light]::after { left: 0; right: 0; }
.faq::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rule); }


/* PÁGINA QUEM SOMOS (quem-somos.html, js/page.js): só HTML, CSS e um script curto, com os mesmos
   tokens e blocos do site. Faixas com fundo próprio alternam com os blocos pretos. As interações:
   revelação por rolagem, a linha de luz nos fios, nas fotos e nas bordas dos valores, números que
   contam, etapas em abas, serviços que abrem com a foto da cena, depoimentos em trilho e a rota que
   se desenha. Com movimento reduzido (html.reduced) tudo aparece pronto. */
.page-bar { grid-template-columns: auto 1fr; }
/* 404: o galpão vazio (a placa do hero), o mesmo fundo do site (sem JavaScript) */
.notfound { display: grid; align-content: center; min-height: calc(100svh - var(--bar) - env(safe-area-inset-top)); }
.notfound .band-inner { width: 100%; }
.notfound h1 { max-width: 12ch; margin-bottom: var(--s5); font-size: clamp(52px, 7.4vw, 116px); }
.notfound .actions { margin-top: var(--s7); }
.notfound-foot { padding: var(--s7) var(--pad) calc(var(--s7) + env(safe-area-inset-bottom)); font-size: 13.5px; color: var(--ink-mute); }
.page-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #fff; box-shadow: 0 0 8px 1px var(--halo); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }
.page-main { padding-top: calc(var(--bar) + env(safe-area-inset-top)); overflow: hidden; }
.js [data-reveal] { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js .vcards li[data-reveal]:nth-child(2), .js .team li[data-reveal]:nth-child(2), .js .numbers li:nth-child(2), .js .values li[data-reveal]:nth-child(2) { transition-delay: .08s; }
.js .vcards li[data-reveal]:nth-child(3), .js .team li[data-reveal]:nth-child(3), .js .numbers li:nth-child(3), .js .values li[data-reveal]:nth-child(3) { transition-delay: .16s; }
.js .numbers li:nth-child(4) { transition-delay: .24s; }
.reduced [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
.page-section { position: relative; max-width: none; margin: 0; padding: var(--s10) var(--pad); border-top: 1px solid var(--rule); }
.page-section:not(.band) > * { max-width: 1240px; margin-left: auto; margin-right: auto; }
.page-section > .kicker, .band-inner > .kicker { margin-bottom: var(--s6); }
.page-section h2 { max-width: 22ch; font: 800 clamp(32px, 3.6vw, 56px)/.95 var(--cond); letter-spacing: -.005em; text-transform: uppercase; text-wrap: balance; }
.page-section > .lead { margin-top: var(--s4); }
.page-cols { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--s7) 7vw; align-items: start; }
.page-cols .lead + .lead { margin-top: var(--s4); }
.page-cols .lead a { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
/* cabeçalho: a foto do resultado em sangria à direita, fundindo com o galpão; a linha varre uma vez */
.page-head { position: relative; min-height: calc(var(--svh) - var(--bar)); display: grid; align-items: center; padding: var(--s10) var(--pad) var(--s11); background: radial-gradient(ellipse 60% 50% at 18% 30%, rgba(255, 255, 255, .045), transparent 65%), var(--canvas); isolation: isolate; }
.page-head-copy { position: relative; z-index: 1; max-width: 1240px; width: 100%; margin: 0 auto; }
.page-head-copy > * { max-width: 620px; }
.page-head h1 { font: 800 clamp(48px, 6.6vw, 112px)/.9 var(--cond); letter-spacing: -.012em; text-transform: uppercase; text-wrap: balance; }
.page-head h1 span { display: block; }
.page-head h1 span + span { color: var(--ink-mute); }
.page-head .lead { max-width: 54ch; margin-top: var(--s6); font-size: 18.5px; }
.page-head .actions { margin-top: var(--s7); }
.page-head-photo { position: absolute; top: 0; right: 0; bottom: 0; width: 60vw; margin: 0; overflow: hidden; }
.page-head-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 55%; }
.page-head-photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--canvas) 0%, rgba(11, 11, 12, .9) 22%, rgba(11, 11, 12, .35) 55%, rgba(11, 11, 12, 0) 100%), linear-gradient(180deg, rgba(11, 11, 12, .6), transparent 30%, transparent 60%, var(--canvas) 100%); }
.sweep { position: absolute; top: -10%; bottom: -10%; left: 0; width: 2px; background: #fff; box-shadow: 0 0 12px 2px var(--halo); opacity: 0; transform: translateX(-20px) rotate(8deg); pointer-events: none; }
.js .page-head-photo.is-in .sweep { animation: sweep 1.8s var(--ease) .4s 1 both; }
@keyframes sweep { 0% { opacity: 0; transform: translateX(-20px) rotate(8deg); } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; transform: translateX(62vw) rotate(8deg); } }
.reduced .sweep { display: none; }
.page-index { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin-top: var(--s8); padding-top: var(--s5); border-top: 1px solid var(--rule); max-width: 760px; }
.page-index a { display: inline-flex; align-items: baseline; gap: var(--s2); padding: 6px 0; font: 700 14px/1 var(--cond); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); text-decoration: none; transition: color .2s var(--ease); }
.page-index a b { font: italic 800 13px/1 var(--cond); color: var(--red-ink); }
.page-index a:hover { color: #fff; }
/* números e ficha */
.numbers { max-width: 1240px; margin: 0 auto; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s6); }
.numbers-band { padding-top: calc(var(--s9) + var(--cut)); padding-bottom: calc(var(--s9) + var(--cut)); }
.numbers li { padding-top: var(--s4); border-top: 1px solid var(--rule-2); }
.numbers b { display: block; font: italic 800 clamp(48px, 5vw, 80px)/1 var(--cond); letter-spacing: -.01em; color: var(--red-ink); font-variant-numeric: tabular-nums; }
.numbers span { display: block; margin-top: var(--s2); font: 600 13px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.page-facts { max-width: 1240px; margin: 0 auto; padding: calc(var(--s10) + var(--cut)) var(--pad) var(--s10); list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s6); }
.page-facts li { padding-top: var(--s4); border-top: 1px solid var(--rule-2); }
.page-facts b { display: block; font: 800 13px/1 var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); }
.page-facts span { display: block; margin-top: var(--s2); font-size: 15.5px; line-height: 1.55; }
.page-facts a { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
/* como começou: sobre a foto do galpão, a frase do fundador à esquerda e o texto à direita */
.story { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--s8) 6vw; align-items: start; }
.story-copy h2 { margin-bottom: var(--s6); }
.story-quote { margin: 0; padding-left: var(--s6); }
.story-quote p { font-size: clamp(22px, 2vw, 30px); }
.story-text { padding-top: calc(var(--s8) + 2vw); }
.story-text .lead + .lead { margin-top: var(--s4); }
.tags { margin: var(--s6) 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); }
.tags li { display: inline-flex; align-items: center; gap: var(--s2); padding: 8px 12px; border: 1px solid var(--rule-2); background: rgba(11, 11, 12, .5); font: 600 12.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.tags li::before { content: ""; width: 6px; height: 6px; background: var(--red); }
/* valores: cards editoriais com a borda desenhada pela luz */
.vcards { margin: var(--s8) auto 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); }
.vcard { position: relative; padding: var(--s7) var(--s7) var(--s7); background: var(--surface); }
.vtrace { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.vtrace rect { fill: none; stroke: #fff; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .9; transition: stroke-dashoffset 1.4s cubic-bezier(.4, 0, .2, 1) .2s; }
.vcard.is-in .vtrace rect { stroke-dashoffset: 0; }
.reduced .vtrace rect { stroke-dashoffset: 0; transition: none; }
.vcard b { display: block; font: italic 800 18px/1 var(--cond); color: var(--red-ink); }
.vcard h3 { margin-top: var(--s4); font: 800 clamp(22px, 2vw, 28px)/1.05 var(--cond); text-transform: uppercase; }
.vcard p { margin-top: var(--s3); font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); }
/* equipe (na faixa vermelha) */
.team { margin: var(--s8) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s7); }
.team li { position: relative; padding: var(--s5) 0 0; border-top: 1px solid rgba(255, 255, 255, .4); }
.team li::after { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 100%; background: #fff; box-shadow: 0 0 8px 1px rgba(255, 255, 255, .5); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--ease); }
.team li:hover::after { transform: scaleX(1); }
.team i { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: var(--s4); background: #0b0b0c; color: #fff; font: italic 800 26px/1 var(--cond); clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%); }
.team b { display: block; font: 800 clamp(30px, 2.8vw, 44px)/1 var(--cond); text-transform: uppercase; }
.team span { display: block; margin-top: var(--s2); font: 600 13px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
/* as cinco etapas em abas, com a linha de luz embaixo da escolhida */
.steps { margin-top: var(--s8); }
.steps-tabs { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s4); padding-bottom: var(--s4); }
.steps-tabs [role="tab"] { display: grid; gap: var(--s2); align-content: start; padding: 0 0 var(--s2); border: 0; background: none; color: var(--ink-mute); text-align: left; cursor: pointer; transition: color .2s var(--ease); }
.steps-tabs [role="tab"] b { font: italic 800 17px/1 var(--cond); color: var(--red-ink); }
.steps-tabs [role="tab"] span { font: 800 17px/1.15 var(--cond); letter-spacing: .02em; text-transform: uppercase; }
.steps-tabs [role="tab"][aria-selected="true"], .steps-tabs [role="tab"]:hover { color: #fff; }
.steps-tabs [role="tab"]:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.steps-rail { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rule-2); }
.steps-lit { position: absolute; left: 0; top: -1px; height: 3px; width: 0; background: #fff; box-shadow: 0 0 8px 1px var(--halo); transition: transform .45s var(--ease), width .45s var(--ease); }
.steps-panels { margin-top: var(--s6); }
.steps-panels [role="tabpanel"] p { max-width: 64ch; font-size: 18px; line-height: 1.6; color: var(--ink-soft); }
.steps-panels [role="tabpanel"]:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }
.js .steps-panels [role="tabpanel"]:not([hidden]) p { animation: panel-in .4s var(--ease) 1 both; }
@keyframes panel-in { from { opacity: 0; transform: translate3d(0, 8px, 0); } to { opacity: 1; transform: none; } }
.reduced .steps-panels [role="tabpanel"] p { animation: none; }
.reduced .steps-lit { transition: none; }
/* serviços: linhas que abrem, com a foto da cena pequena fechada e grande aberta */
.svcs { margin-top: var(--s8); border-top: 1px solid var(--rule-2); }
.svc { border-bottom: 1px solid var(--rule); }
.svc summary { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr) 150px 32px; gap: var(--s5); align-items: center; min-width: 0; padding: var(--s5) 0; cursor: pointer; list-style: none; }
.svc summary::-webkit-details-marker { display: none; }
.svc summary > b { font: italic 800 17px/1 var(--cond); color: var(--red-ink); }
.svc-head h3 { font: 800 clamp(22px, 2vw, 28px)/1.05 var(--cond); text-transform: uppercase; transition: color .2s var(--ease); }
.svc-head em { display: block; margin-top: var(--s2); font: 400 15px/1.45 var(--sans); color: var(--ink-soft); }
.svc summary img { width: 150px; height: 94px; object-fit: cover; object-position: 55% 45%; opacity: .8; transform: scale(1); transition: opacity .25s var(--ease), transform .4s var(--ease); box-shadow: inset 0 0 0 1px var(--rule); }
.svc summary img.alt { object-position: 20% 60%; }
.svc summary > i { position: relative; width: 18px; height: 18px; justify-self: end; }
.svc summary > i::before, .svc summary > i::after { content: ""; position: absolute; left: 0; top: 50%; width: 18px; height: 2px; margin-top: -1px; background: currentColor; transition: transform .25s var(--ease); }
.svc summary > i::after { transform: rotate(90deg); }
.svc[open] summary > i::after { transform: rotate(0); }
.svc summary:hover img { opacity: 1; transform: scale(1.04); }
.svc[open] summary img { opacity: .35; transform: scale(.96); }
.svc summary:hover h3 { color: var(--red-ink); }
.svc summary:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.svc-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: var(--s7) 6vw; align-items: start; padding: 0 0 var(--s7) 68px; }
.svc-text { max-width: 60ch; }
.svc-text p { font-size: 16.5px; line-height: 1.6; color: var(--ink-soft); }
.svc-text ul { margin: var(--s4) 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.svc-text li { position: relative; padding-left: 18px; font-size: 15.5px; line-height: 1.5; color: var(--ink-soft); }
.svc-text li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; background: var(--red); }
.svc-text .link { margin-top: var(--s4); }
.svc-photo { position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: #000; box-shadow: inset 0 0 0 1px var(--rule); }
.svc-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 45%; }
.svc-photo img.alt { object-position: 20% 60%; }
.svc-photo .trace-line { position: absolute; left: 0; right: 0; top: 46%; height: 1px; background: #fff; box-shadow: 0 0 10px 2px var(--halo); transform-origin: 0 50%; transform: scaleX(0); opacity: 0; }
.js .svc[open] .svc-photo .trace-line { animation: trace-draw 1.4s var(--ease) .3s 1 both; }
.js .svc[open] .svc-body { animation: panel-in .35s var(--ease) 1 both; }
.reduced .svc-body, .reduced .svc-photo .trace-line { animation: none !important; }
.reduced .svc-photo .trace-line { display: none; }
.page-faq { margin-top: var(--s8); }
.page-faq details:first-child { border-top: 1px solid var(--rule-2); }
/* depoimentos: trilho com rolagem presa, sobre a foto do galpão */
.quotes { margin-top: var(--s8); }
.quotes-track { display: grid; grid-auto-flow: column; grid-auto-columns: 72%; gap: var(--s6); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s3); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.quotes-track::-webkit-scrollbar { display: none; }
.quotes-track:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }
.qcard { margin: 0; padding: var(--s7) var(--s7) var(--s6); background: rgba(18, 18, 19, .92); border: 1px solid var(--rule); border-left: 2px solid var(--red); scroll-snap-align: start; opacity: .6; transition: opacity .35s var(--ease); }
.qcard.is-on { opacity: 1; }
.qcard p { max-width: none; font-size: clamp(18px, 1.5vw, 23px); }
.qcard figcaption { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--s3); row-gap: 2px; align-items: center; margin-top: var(--s6); }
.qcard figcaption i { grid-row: 1 / span 2; display: grid; place-items: center; width: 40px; height: 40px; background: var(--red); color: #fff; font: italic 800 19px/1 var(--cond); clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%); }
.qcard figcaption b { font: 800 15px/1 var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.qcard figcaption span { font-size: 13.5px; color: var(--ink-mute); }
.qcard figcaption em { grid-column: 2; font-style: normal; font-size: 13px; letter-spacing: .2em; color: var(--red-ink); }
.quotes-nav { display: flex; align-items: center; gap: var(--s4); margin-top: var(--s5); }
.qbtn { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--rule-2); background: rgba(11, 11, 12, .6); color: #fff; cursor: pointer; transition: border-color .2s var(--ease), color .2s var(--ease); }
.qbtn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.qbtn:hover { border-color: #fff; }
.qbtn:disabled { color: var(--ink-mute); border-color: var(--rule); cursor: default; }
.qbtn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.quotes-count { font: 600 13px/1 var(--sans); letter-spacing: .16em; color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.no-js .quotes-nav { display: none; }
/* onde: o mapa com a rota que se desenha */
.place { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--s8); align-items: center; }
.place-map { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #0a0b0c; box-shadow: inset 0 0 0 1px var(--rule); }
.place-map::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 70%, rgba(11, 11, 12, .55)); pointer-events: none; }
.place-map img, .place-map .route-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.place-map .route-halo, .place-map .route-line { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s cubic-bezier(.4, 0, .2, 1); }
.place-map .route-dest { opacity: 0; transition: opacity .4s var(--ease) 1.6s; }
.place-map.is-drawn .route-halo, .place-map.is-drawn .route-line { stroke-dashoffset: 0; }
.place-map.is-drawn .route-dest { opacity: 1; }
.reduced .place-map .route-halo, .reduced .place-map .route-line, .reduced .place-map .route-dest { transition: none; }
.place-copy h2 { font-size: clamp(36px, 3.4vw, 52px); }
.place .lead { margin-top: var(--s4); }
.place .hours { margin-top: var(--s2); text-transform: uppercase; }
.place .actions { margin-top: var(--s7); }
.values { margin-top: var(--s8); }
.cta { position: relative; max-width: none; margin: 0; padding: calc(var(--s10) + var(--cut)) var(--pad) var(--s11); overflow: hidden; }
.cta > * { position: relative; max-width: 1240px; margin-left: auto; margin-right: auto; }
.cta { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s7); }
.cta-inner { display: contents; }
.cta h2 { max-width: 16ch; font: 800 clamp(36px, 5vw, 80px)/.92 var(--cond); text-transform: uppercase; text-wrap: balance; }
.cta-trace { position: absolute; left: -10%; right: -10%; top: 50%; height: 1px; max-width: none; background: #fff; box-shadow: 0 0 12px 2px var(--halo); transform: rotate(-6deg) scaleX(0); transform-origin: 0 50%; opacity: 0; pointer-events: none; }
.js .cta.is-in .cta-trace { animation: trace-draw 1.8s var(--ease) .2s 1 both; }
.reduced .cta-trace { display: none; }
@media (max-width: 1080px) {
  .page-bar .bar-link { display: block; }
  .page-head { min-height: 0; padding-top: 0; }
  .page-head-photo { position: relative; width: calc(100% + 2 * var(--pad)); margin: 0 calc(var(--pad) * -1) var(--s7); aspect-ratio: 16 / 9; bottom: auto; }
  .page-head-photo::before { background: linear-gradient(180deg, rgba(11, 11, 12, .2), transparent 40%, var(--canvas) 100%); }
  .page-head-copy > * { max-width: none; }
  .numbers, .page-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story { grid-template-columns: minmax(0, 1fr); }
  .story-text { padding-top: 0; }
  .vcards { grid-template-columns: minmax(0, 1fr); }
  .svc-body { grid-template-columns: minmax(0, 1fr); }
  .svc-photo { max-width: 560px; }
  .quotes-track { grid-auto-columns: 86%; }
}
@media (max-width: 760px) {
  .page-bar .bar-link { display: none; }
  .page-head { padding: 0 var(--pad) var(--s9); }
  .page-head h1 { font-size: clamp(40px, 11vw, 56px); }
  .page-head .lead { font-size: 17px; }
  .page-index { gap: var(--s1) var(--s4); }
  .numbers { gap: var(--s5); }
  .page-facts { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .page-section { padding: var(--s9) var(--pad); }
  .page-cols { grid-template-columns: minmax(0, 1fr); }
  .team { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .steps-tabs { grid-template-columns: minmax(0, 1fr); gap: 0; padding-bottom: 0; }
  .steps-tabs [role="tab"] { grid-template-columns: 32px minmax(0, 1fr); align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--rule); }
  .steps-rail { display: none; }
  .steps-tabs [role="tab"][aria-selected="true"] span { text-decoration: underline; text-decoration-color: #fff; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
  .svc summary { grid-template-columns: 32px minmax(0, 1fr) 24px; }
  .svc summary img { display: none; }
  .svc-body { padding-left: 0; }
  .quotes-track { grid-auto-columns: 100%; gap: var(--s4); }
  .qcard { padding: var(--s6) var(--s5) var(--s5); }
  .place { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .cta { padding-bottom: var(--s10); }
  .faq-list.page-faq summary { font-size: 18px; }
}