:root {
  --ink: #07080b;
  --paper: #f3f1ec;
  --paper-dim: rgba(243, 241, 236, .8);
  --paper-faint: rgba(243, 241, 236, .16);
  --yellow: #ffd23f;
  --sans: "Inter Tight", system-ui, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --gutter: clamp(16px, 5.5vw, 88px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--ink); }
body { color: var(--paper); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body.loading { overflow: hidden; }
em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--yellow); letter-spacing: 0; }

/* ---------- Loader ---------- */
.loader { position: fixed; inset: 0; z-index: 100; background: var(--ink); display: grid; place-content: center; justify-items: center; gap: 20px; }
.loader__logo { font-size: 30px; font-weight: 700; letter-spacing: -.04em; }
.loader__logo span, .logo span { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--yellow); margin-left: 3px; letter-spacing: 0; }
.loader__bar { width: 200px; height: 1px; background: var(--paper-faint); overflow: hidden; }
.loader__bar span { display: block; height: 100%; width: 0; background: var(--yellow); }
.loader__pct { font-size: 11px; letter-spacing: .24em; color: var(--paper-dim); font-variant-numeric: tabular-nums; }

/* ---------- Logo (SVG) ---------- */
.brand { display: block; width: auto; overflow: visible; }
.brand--nav { height: 40px; }
.brand--loader { height: 78px; margin-bottom: 6px; }
.brand--foot { height: 34px; }
.brand path { transition: fill .5s, stroke .5s; }
.brand .brand__icon { transform-box: fill-box; transform-origin: 50% 60%; }
.logo { display: inline-flex; align-items: center; }
.logo:hover .brand__icon { animation: brandWiggle .7s cubic-bezier(.3,1.6,.5,1); }
@keyframes brandWiggle { 0% { transform: rotate(0); } 30% { transform: rotate(-12deg) scale(1.08); } 60% { transform: rotate(8deg); } 100% { transform: rotate(0); } }
/* na planta azul (Ato 5) o logo também vira contorno */
body.is-blueprint .brand--nav path, body.is-blueprint .brand--nav .brand__sites path { fill: transparent; stroke: #9fd4ff; stroke-width: 1.4px; vector-effect: non-scaling-stroke; }

/* ---------- Nav ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 20px var(--gutter); }
.logo { color: var(--paper); text-decoration: none; font-size: 22px; font-weight: 700; letter-spacing: -.04em; }
.nav { transition: background .35s, padding .35s; }
.nav--solid { background: rgba(7,8,11,.9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); padding-top: 14px; padding-bottom: 14px; }
.nav__links { display: flex; gap: 34px; }
.nav__links a { color: var(--paper-dim); text-decoration: none; font-size: 14px; transition: color .25s; }
.nav__links a:hover { color: var(--paper); }
.btn { display: inline-flex; align-items: center; gap: 10px; background: var(--yellow); color: var(--ink); text-decoration: none; font-weight: 600; border-radius: 99px; padding: 15px 26px; font-size: 15px; }
.btn--sm { padding: 10px 18px; font-size: 14px; }

/* ---------- Palco ---------- */
.stage { position: relative; height: 100vh; height: 100lvh; overflow: hidden; } /* altura "grande" estável: não encolhe/estica com a barra do navegador */
#seq { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(7,8,11,.9) 0%, rgba(7,8,11,.6) 30%, rgba(7,8,11,0) 56%),
    linear-gradient(0deg, rgba(7,8,11,.6) 0%, rgba(7,8,11,0) 26%),
    linear-gradient(180deg, rgba(7,8,11,.55) 0%, rgba(7,8,11,0) 20%),
    radial-gradient(ellipse at 60% 50%, rgba(0,0,0,0) 40%, rgba(0,0,0,.45) 100%);
}
/* granulação de filme (substitui a que tiramos dos frames pra ficarem leves) */
.grain {
  position: absolute; inset: -50%; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain .9s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-4%, 3%); } 40% { transform: translate(3%, -5%); }
  60% { transform: translate(-6%, -2%); } 80% { transform: translate(5%, 4%); } 100% { transform: translate(0, 0); }
}

/* Indicador de ato */
.chapter { display: none !important; } /* sem numeração de atos pro visitante */
.chapter-old { position: absolute; left: var(--gutter); bottom: clamp(24px, 5vh, 48px); display: flex; align-items: center; gap: 14px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--paper-dim); z-index: 5; }
.chapter__num { color: var(--yellow); font-variant-numeric: tabular-nums; }
.chapter__bar { width: 90px; height: 1px; background: var(--paper-faint); position: relative; overflow: hidden; }
.chapter__bar i { position: absolute; inset: 0; background: var(--paper); transform-origin: left; transform: scaleX(0); }

/* Camadas de texto */
.layer { position: absolute; left: var(--gutter); top: 50%; transform: translateY(-50%); width: min(600px, 40vw); pointer-events: none; }
.display { font-weight: 700; font-size: clamp(42px, 5.6vw, 92px); line-height: .95; letter-spacing: -.045em; }
.display em { font-size: 1.08em; }
.eyebrow { font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--yellow); margin-bottom: 24px; }
.lede { margin-top: 26px; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; color: var(--paper-dim); max-width: 430px; }

.char { display: inline-block; will-change: transform, opacity; }
.split-chars .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.line { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.line > span { display: inline-block; will-change: transform; }

.scroll-hint { margin-top: 54px; display: flex; align-items: center; gap: 14px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--paper-dim); }
.scroll-hint span { width: 1px; height: 46px; background: var(--paper-faint); position: relative; overflow: hidden; }
.scroll-hint span::after { content: ""; position: absolute; left: 0; top: -40%; width: 100%; height: 40%; background: var(--yellow); animation: drip 1.8s cubic-bezier(.6,0,.3,1) infinite; }
@keyframes drip { to { top: 100%; } }

/* ---------- Busca ---------- */
.a1-search { width: min(460px, 40vw); }
.search__caption { font-size: 13px; color: var(--paper-dim); margin-bottom: 14px; }
.searchbar {
  display: flex; align-items: center; gap: 14px; height: 58px; padding: 0 22px; border-radius: 99px;
  background: var(--paper); color: #1b1c20; box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.searchbar svg { width: 20px; height: 20px; fill: none; stroke: #6b6d73; stroke-width: 2; stroke-linecap: round; flex: none; }
.searchbar__text { font-size: 17px; font-weight: 500; white-space: nowrap; }
.caret { display: inline-block; width: 2px; height: 20px; background: #1b1c20; vertical-align: -4px; margin-left: 2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.results { list-style: none; margin-top: 14px; display: grid; gap: 10px; }
.result {
  padding: 14px 20px; border-radius: 16px; background: rgba(12,13,17,.62); border: 1px solid rgba(243,241,236,.1);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.result b { display: block; font-size: 16px; font-weight: 600; }
.stars { display: block; margin-top: 3px; color: var(--yellow); font-size: 13px; letter-spacing: .06em; }
.stars em { font-family: var(--sans); font-style: normal; color: var(--paper-dim); letter-spacing: 0; font-size: 12px; margin-left: 6px; }
.result small { display: block; margin-top: 4px; font-size: 12px; color: var(--paper-dim); }
.result--missing { position: relative; background: transparent; border: 1px dashed rgba(243,241,236,.35); -webkit-backdrop-filter: none; backdrop-filter: none; min-height: 54px; }
.missing__q, .missing__a { display: block; font-size: 15px; font-weight: 600; }
.missing__a { position: absolute; left: 20px; right: 16px; top: 50%; transform: translateY(-50%); color: #fff; opacity: 0; display: flex; align-items: center; gap: 10px; }
.missing__a i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.22); font-style: normal; font-size: 12px; font-weight: 700; }

/* Ato 2 */
.layer--top { top: max(calc(var(--nav-h, 80px) + 24px), 15vh); transform: none; width: min(860px, 58vw); }
.display--md { font-size: clamp(34px, 4.2vw, 66px); }

/* Anotações da maquete */
.callout-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.callout-lines path { fill: none; stroke: var(--paper); stroke-width: 1; opacity: .8; }
.callout-lines circle { fill: var(--yellow); }
.callout-lines circle.pulse { fill: none; stroke: var(--yellow); stroke-width: 1.2; }
.callout {
  position: absolute; left: 0; top: 0; width: 260px; pointer-events: none; visibility: hidden;
  padding: 14px 18px; border-radius: 14px;
  background: rgba(10,11,15,.55); border: 1px solid rgba(243,241,236,.14);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.callout small { display: block; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--yellow); }
.callout b { display: block; margin: 5px 0 3px; font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.callout span { display: block; font-size: 13px; line-height: 1.45; color: var(--paper-dim); }

/* Ato 3 · corrida de prazos */
.race {
  position: absolute; left: var(--gutter); top: 52%; width: min(500px, 38vw);
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border-radius: 18px; overflow: hidden; pointer-events: none;
  background: rgba(243,241,236,.12); border: 1px solid rgba(243,241,236,.14);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.race__col { padding: 20px 22px 22px; background: rgba(10,11,15,.62); display: flex; flex-direction: column; gap: 8px; }
.race__who { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--paper-dim); }
.race__col--us .race__who { color: var(--yellow); }
.race__day { font-size: 15px; color: var(--paper-dim); }
.race__day b { font-size: 46px; font-weight: 700; letter-spacing: -.04em; color: var(--paper); font-variant-numeric: tabular-nums; margin-left: 4px; }
.race__day i { font-style: normal; }
.race__status { font-size: 14px; font-weight: 500; min-height: 2.6em; line-height: 1.3; }
.race__col--them .race__status { color: var(--paper-dim); }
.race__bar { height: 4px; border-radius: 4px; background: rgba(243,241,236,.12); overflow: hidden; }
.race__bar i { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(0); border-radius: 4px; }
.race__col--them .race__bar i { background: #8b8d93; }
.race__col--us .race__bar i { background: var(--yellow); }
.race.is-done .race__col--us { background: rgba(255,210,63,.14); }

/* Transição 3→4: clarão */
.flash { position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at 50% 50%, #fffaf0 0%, #ffe9c2 45%, #ffd27a 100%); }

/* Ato 4 · notificações */
.toasts { position: absolute; left: var(--gutter); bottom: clamp(90px, 16vh, 160px); width: min(400px, 34vw); height: 0; pointer-events: none; }
.toast {
  position: absolute; left: 0; bottom: 0; width: 100%;
  display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 18px;
  background: rgba(250,248,243,.9); color: #15161a; box-shadow: 0 18px 50px rgba(0,0,0,.35);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.toast__icon { flex: none; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-size: 19px; color: #fff; }
.toast__icon--map { background: #e8453c; }
.toast__icon--star { background: #f5b301; }
.toast__icon--wpp { background: #25d366; }
.toast__icon--order { background: #15161a; }
.toast small { display: block; font-size: 11px; color: #6b6d73; margin-bottom: 2px; }
.toast b { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }

/* Ato 5 · planta azul (quarta parede) */
.blueprint { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: #1659c7; mix-blend-mode: color; }
.bp-grid {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background-color: rgba(6, 26, 70, .28);
  background-image:
    linear-gradient(rgba(160,210,255,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(160,210,255,.22) 1px, transparent 1px),
    linear-gradient(rgba(160,210,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(160,210,255,.08) 1px, transparent 1px);
  background-size: 200px 200px, 200px 200px, 40px 40px, 40px 40px;
}
.wire { position: absolute; inset: 0; pointer-events: none; }
.wire-box { position: absolute; border: 1px dashed #9fd4ff; clip-path: inset(0 100% 100% 0); }
.wire-box::before, .wire-box::after { content: ""; position: absolute; width: 8px; height: 8px; border: 1px solid #9fd4ff; background: rgba(8,38,92,.9); }
.wire-box::before { left: -5px; top: -5px; }
.wire-box::after { right: -5px; bottom: -5px; }
.wire-label {
  position: absolute; white-space: nowrap;
  font: 500 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: #071a3a; background: #9fd4ff; padding: 4px 6px; border-radius: 3px;
}
.wire-stats {
  position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); display: grid; gap: 10px; text-align: right; pointer-events: none;
  font: 500 13px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: #cfe8ff; letter-spacing: .04em;
}
.wire-stats span { opacity: 0; display: block; }
.wire-stats span::before { content: "// "; color: #9fd4ff; }
.a5-price { margin-top: 26px; font-size: clamp(18px, 1.6vw, 24px); color: var(--paper-dim); }
.a5-price b { display: block; margin-top: 4px; font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--yellow); font-size: 1.5em; }
.a5-ctas { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.a5-more { color: var(--paper-dim); text-decoration: none; font-size: 15px; border-bottom: 1px solid rgba(243,241,236,.3); padding-bottom: 2px; }
.a5-more:hover { color: var(--paper); }

/* Durante a planta azul, a própria interface vira contorno */
.nav .btn, .wa-float, .logo, .logo span, .display, .display em { transition: color .5s, background-color .5s, box-shadow .5s, -webkit-text-stroke-color .5s; }
body.is-blueprint .nav .btn, body.is-blueprint .wa-float { background-color: transparent; color: #9fd4ff; box-shadow: none; outline: 1px dashed #9fd4ff; outline-offset: 3px; }
body.is-blueprint .wa-float::after { display: none; }
body.is-blueprint .logo, body.is-blueprint .logo span { color: #9fd4ff; }
body.is-blueprint .stage .display { color: transparent; -webkit-text-stroke: 1px #dcefff; }
body.is-blueprint .stage .display em { color: transparent; -webkit-text-stroke: 1px var(--yellow); }

/* Próximo ato */
.next-act { top: auto; bottom: 16vh; transform: none; }
.next-act__tag { display: inline-block; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink); background: var(--yellow); padding: 6px 10px; border-radius: 4px; margin-bottom: 14px; }
.next-act b { display: block; font-size: clamp(22px, 2.2vw, 32px); font-weight: 600; letter-spacing: -.02em; }

/* ---------- Atalhos pra orçamento ---------- */
.layer a { pointer-events: auto; }
.skip { display: inline-block; margin-top: 22px; text-shadow: 0 1px 12px rgba(0,0,0,.9); font-size: 13px; color: var(--paper-dim); text-decoration: none; border-bottom: 1px solid rgba(243,241,236,.25); padding-bottom: 2px; transition: color .25s, border-color .25s; }
.skip:hover { color: var(--yellow); border-color: var(--yellow); }
.act-cta {
  position: absolute; right: calc(var(--gutter) + 150px); bottom: clamp(24px, 5vh, 44px); z-index: 6;
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 99px;
  background: rgba(10,11,15,.6); border: 1px solid rgba(255,210,63,.55); color: var(--paper);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-size: 14px; font-weight: 600; text-decoration: none; visibility: hidden; opacity: 0;
  transition: background .25s, color .25s;
}
.act-cta i { font-style: normal; color: var(--yellow); transition: transform .25s; }
.act-cta:hover { background: var(--yellow); color: var(--ink); }
.act-cta:hover i { color: var(--ink); transform: translateX(3px); }
.wa-float {
  position: fixed; right: var(--gutter); bottom: clamp(20px, 4.5vh, 40px); z-index: 60;
  display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 20px 0 14px; border-radius: 99px;
  background: #25d366; color: #06210f; text-decoration: none; font-weight: 700; font-size: 14px;
  box-shadow: 0 12px 34px rgba(0,0,0,.35); transition: transform .25s;
}
.wa-float:hover { transform: translateY(-2px); }
.wa-float svg { width: 26px; height: 26px; fill: currentColor; }
.wa-float::after { content: ""; position: absolute; inset: -4px; border-radius: inherit; border: 2px solid #25d366; opacity: 0; animation: waPulse 2.6s ease-out infinite; }
@keyframes waPulse { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.25); } }
.btn--lg { padding: 20px 30px; font-size: 17px; }
.btn i { font-style: normal; }

/* ---------- Visor do elevador (cabeçalho) ---------- */
.lift {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 8px 0 10px; border-radius: 12px; cursor: pointer;
  background: rgba(10,11,15,.6); border: 1px solid rgba(243,241,236,.16); color: var(--paper);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font: 500 13px/1 var(--sans);
  transition: border-color .25s, background .25s;
}
.lift:hover, .lift[aria-expanded="true"] { border-color: rgba(255,210,63,.6); }
.lift__arrows { display: grid; gap: 1px; font-size: 7px; line-height: 1; color: rgba(243,241,236,.3); }
.lift__arrows i { font-style: normal; transition: color .3s; }
.lift__arrows .is-on { color: var(--yellow); }
.lift__floor {
  min-width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px;
  background: #050506; color: var(--yellow); font: 700 15px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  box-shadow: inset 0 0 0 1px rgba(255,210,63,.25), 0 0 14px rgba(255,210,63,.18); text-shadow: 0 0 8px rgba(255,210,63,.6);
}
.lift__label { display: block; overflow: hidden; height: 16px; min-width: 120px; max-width: 220px; white-space: nowrap; }
.lift__label span { display: block; line-height: 16px; }
.lift__open { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 8px; background: rgba(243,241,236,.08); font-size: 12px; color: var(--paper-dim); }
.lift__open::before { content: ""; width: 10px; height: 10px; background:
  linear-gradient(currentColor 0 0) 0 0/4px 4px no-repeat, linear-gradient(currentColor 0 0) 6px 0/4px 4px no-repeat,
  linear-gradient(currentColor 0 0) 0 6px/4px 4px no-repeat, linear-gradient(currentColor 0 0) 6px 6px/4px 4px no-repeat; }
.lift:hover .lift__open { color: var(--yellow); }
body.is-blueprint .lift { border-style: dashed; border-color: #9fd4ff; }

/* ---------- Mapa da obra ---------- */
.directory {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 24px;
  background: rgba(5,6,9,.94);
  background-image: linear-gradient(rgba(159,212,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(159,212,255,.05) 1px, transparent 1px);
  background-size: 40px 40px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.directory[hidden] { display: none; }
.dir__panel { width: min(860px, 100%); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.dir__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.dir__head .eyebrow { margin: 0; }
.dir__close { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(243,241,236,.2); background: none; color: var(--paper); font-size: 16px; cursor: pointer; }
.dir__close:hover { border-color: var(--yellow); color: var(--yellow); }
.dir__body { display: grid; grid-template-columns: 64px 1fr; gap: 26px; align-items: stretch; }
.dir__building { position: relative; padding: 8px 0; }
.dir__shaft { position: relative; height: 100%; width: 40px; margin: 0 auto; border-radius: 6px; border: 1px solid rgba(243,241,236,.18);
  background: repeating-linear-gradient(180deg, transparent 0 calc(100% / 9 - 1px), rgba(243,241,236,.12) calc(100% / 9 - 1px) calc(100% / 9)); }
.dir__car { position: absolute; left: 4px; right: 4px; height: calc(100% / 9 - 8px); top: 4px; border-radius: 4px; background: var(--yellow); box-shadow: 0 0 22px rgba(255,210,63,.55); }
.dir__floors { list-style: none; display: grid; gap: 6px; }
.dir__floors button { all: unset; box-sizing: border-box; cursor: pointer; }
.dir__floors > li > button {
  width: 100%; display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 16px; padding: 12px 16px; border-radius: 14px;
  border: 1px solid rgba(243,241,236,.08); background: rgba(243,241,236,.03); transition: background .2s, border-color .2s, transform .2s;
}
.dir__floors > li > button:hover, .dir__floors > li > button:focus-visible { background: rgba(255,210,63,.1); border-color: rgba(255,210,63,.5); }
.dir__floors > li > button > * { transition: transform .25s ease; }
.dir__floors > li > button:hover > .dir__num, .dir__floors > li > button:hover > .dir__name { transform: translateX(4px); }
.dir__num { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: #050506; color: var(--yellow);
  font: 700 17px/1 ui-monospace, SFMono-Regular, Menlo, monospace; box-shadow: inset 0 0 0 1px rgba(255,210,63,.25); }
.dir__name { font-size: clamp(17px, 1.8vw, 22px); font-weight: 600; letter-spacing: -.02em; color: var(--paper); }
.dir__hint { font-size: 12px; color: var(--paper-dim); text-align: right; }
.dir__floors li.is-here > button { border-color: rgba(255,210,63,.55); }
.dir__floors li.is-here .dir__hint::after { content: " · você está aqui"; color: var(--yellow); }

/* portas do elevador */
.doors { position: fixed; inset: 0; z-index: 95; pointer-events: none; }
.door { position: absolute; top: 0; bottom: 0; width: 50.5%; background: linear-gradient(90deg, #14151a, #1d1f26 50%, #14151a);
  box-shadow: inset 0 0 0 1px rgba(243,241,236,.06); }
.door--l { left: 0; border-right: 2px solid rgba(255,210,63,.6); }
.door--r { right: 0; border-left: 2px solid rgba(255,210,63,.6); }
.doors__sign { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 10px; opacity: 0; text-align: center; }
.doors__sign span { min-width: 64px; height: 64px; padding: 0 10px; display: grid; place-items: center; border-radius: 14px; background: #050506; color: var(--yellow);
  font: 700 30px/1 ui-monospace, SFMono-Regular, Menlo, monospace; box-shadow: inset 0 0 0 1px rgba(255,210,63,.3), 0 0 30px rgba(255,210,63,.25); text-shadow: 0 0 12px rgba(255,210,63,.7); }
.doors__sign b { font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--paper); }

/* ---------- Indicador "site em construção" (no lugar da barra de rolagem) ---------- */
html { scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }
.build-track { position: fixed; right: 41px; top: calc(var(--nav-h, 80px) + 12px); bottom: 24px; width: 1px; z-index: 54; background: rgba(243,241,236,.12); pointer-events: none; }
.build-track i { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(var(--yellow), #f5512a); transform-origin: top; transform: scaleY(0); }
.build-meter {
  position: fixed; right: 18px; top: 0; z-index: 56; cursor: grab; touch-action: none; will-change: transform;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 10px 9px 9px; border-radius: 14px; pointer-events: auto; user-select: none; -webkit-user-select: none;
  transition: box-shadow .3s, border-color .3s;
  background: rgba(10,11,15,.55); border: 1px solid rgba(243,241,236,.12);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.build-meter svg { width: 34px; height: 61px; display: block; overflow: visible; }
.bm-frame { fill: none; stroke: rgba(243,241,236,.45); stroke-width: 1.2; stroke-dasharray: 3 2.5; transition: stroke .5s, stroke-dasharray .5s; }
.bm-b { fill: transparent; stroke: rgba(243,241,236,.28); stroke-width: .8; stroke-dasharray: 2 1.6;
  transform-box: fill-box; transform-origin: 50% 100%; transition: fill .35s, stroke .35s, transform .45s cubic-bezier(.3,1.6,.5,1); }
.bm-b.on { stroke: none; transform: scale(1); animation: bmPop .5s cubic-bezier(.3,1.6,.5,1); }
.bm-head.on, .bm-line.on { fill: #f3f1ec; }
.bm-img.on { fill: #F5512A; }
.bm-card.on { fill: rgba(243,241,236,.55); }
.bm-btn.on { fill: var(--yellow); }
@keyframes bmPop { 0% { transform: scale(.3); } 100% { transform: scale(1); } }
.build-meter.done .bm-frame { stroke: var(--yellow); stroke-dasharray: none; }
.build-meter.done { box-shadow: 0 0 22px rgba(255,210,63,.25); border-color: rgba(255,210,63,.4); }
.build-meter:hover, .build-meter.is-open { border-color: rgba(255,210,63,.55); }
.build-meter.is-dragging { cursor: grabbing; }
.meter-menu {
  position: fixed; right: 74px; z-index: 57; width: 230px; padding: 12px; border-radius: 16px;
  background: rgba(12,13,17,.92); border: 1px solid rgba(243,241,236,.12); box-shadow: 0 24px 60px rgba(0,0,0,.45);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.meter-menu p { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--yellow); padding: 4px 10px 8px; }
.meter-menu button { display: block; width: 100%; text-align: left; background: none; border: 0; color: var(--paper); font: 500 14px/1 var(--sans); padding: 10px; border-radius: 10px; cursor: pointer; }
.meter-menu button:hover, .meter-menu button.is-here { background: rgba(255,210,63,.12); color: var(--yellow); }
.meter-menu hr { border: 0; border-top: 1px solid rgba(243,241,236,.1); margin: 6px 4px; }

/* "Pular história": sempre disponível enquanto a história roda */
.skip-story {
  position: fixed; left: var(--gutter); bottom: clamp(56px, 9vh, 84px); z-index: 52;
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 99px; cursor: pointer;
  background: rgba(10,11,15,.55); border: 1px solid rgba(243,241,236,.22); color: var(--paper);
  font: 600 12px/1 var(--sans); letter-spacing: .04em; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background .25s, color .25s, opacity .4s, visibility .4s;
}
.skip-story i { font-style: normal; color: var(--yellow); }
.skip-story:hover { background: var(--yellow); color: var(--ink); }
.skip-story:hover i { color: var(--ink); }
.skip-story.is-hidden { opacity: 0; visibility: hidden; }

.build-meter__pct { font: 600 10px/1 var(--sans); letter-spacing: .06em; color: rgba(243,241,236,.85); font-variant-numeric: tabular-nums; min-width: 4.5ch; text-align: center; }
.build-meter.done .build-meter__pct { color: var(--yellow); }

/* ---------- Seções depois da história ---------- */
/* ritmo único pra todas as seções: mesmo respiro em cima/embaixo e entre os blocos */
:root { --sec-pad: clamp(96px, 15vh, 168px); --gap-lede: 24px; --gap-block: 56px; }
.info { padding: var(--sec-pad) var(--gutter); }
.info--light { background: var(--paper); color: var(--ink); }
.info--light .eyebrow { color: #9a7a00; }
.info--light em { color: #a87f00; }
.info--dark { background: var(--ink); color: var(--paper); }
.info--dark .info__lede { color: var(--paper); }
.info__title { max-width: 980px; font-size: clamp(36px, 4.8vw, 76px); line-height: 1.06; letter-spacing: -.04em; font-weight: 700; }
.info__title em { letter-spacing: -.01em; }
.info__lede { margin-top: var(--gap-lede); max-width: 560px; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; color: #4a443c; }

/* Como funciona */
.steps { list-style: none; margin-top: 22px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: s; }
.step { position: relative; padding: 26px 24px 30px; border-radius: 20px; background: #fff; border: 1px solid rgba(7,8,11,.08); }
.step__day { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #8a6a00; }
.step__num { position: absolute; right: 22px; top: 18px; font-size: 44px; font-weight: 700; letter-spacing: -.04em; color: rgba(7,8,11,.07); }
.step h3 { margin-top: 34px; font-size: 21px; letter-spacing: -.02em; }
.step p { margin-top: 10px; font-size: 15px; line-height: 1.55; color: #4a443c; }
.step--done { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.step--done p { color: var(--paper-dim); }
.step--done .step__day { color: var(--yellow); }
.step--done .step__num { color: rgba(255,210,63,.25); }

/* Portfólio */
.cases { margin-top: var(--gap-block); display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.case { display: block; color: inherit; text-decoration: none; }
.case__img { aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; background: #15161b; border: 1px solid rgba(243,241,236,.1); }
.case__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.case:hover .case__img img { transform: scale(1.04); }
.case__img--empty { display: grid; place-items: center; border-style: dashed; border-color: rgba(255,210,63,.45); background: rgba(255,210,63,.04); }
.case__img--empty span { font-family: var(--serif); font-style: italic; font-size: 28px; color: var(--yellow); }
.case__tag { display: inline-block; margin-top: 18px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--yellow); }
.case h3 { margin-top: 8px; font-size: 24px; letter-spacing: -.02em; }
.case p { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--paper-dim); }
.case p i { font-style: normal; color: var(--yellow); }

/* Preços */
.plans { margin-top: var(--gap-block); display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: 30px 28px; border-radius: 22px; background: #fff; border: 1px solid rgba(7,8,11,.08); }
.plan h3 { font-size: 26px; letter-spacing: -.03em; }
.plan__pitch { margin-top: 8px; font-size: 15px; line-height: 1.5; color: #4a443c; min-height: 3em; }
.plan__for { margin-top: 6px; font-size: 14px; line-height: 1.45; color: #6b6458; min-height: 2.9em; }
.plan--featured .plan__for { color: var(--paper-dim); }
.plan__price { margin-top: 16px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; font-variant-numeric: tabular-nums; }
.plan__price small { font-size: 18px; font-weight: 600; }
.plan__price b { font-size: clamp(40px, 3.6vw, 54px); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.plan__from { width: 100%; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #9a7a00; margin-bottom: 4px; }
.plan--featured .plan__price b { color: var(--yellow); }
.plan li b { font-weight: 700; }
.plan--cine { background: linear-gradient(160deg, #fff 0%, #fff7e0 100%); }
.plan ul { list-style: none; margin: 22px 0 28px; display: grid; gap: 10px; font-size: 15px; flex: 1; }
.plan li::before { content: "✓"; margin-right: 10px; color: #c99a00; font-weight: 700; }
.plan .btn { justify-content: center; }
.plan--featured { background: var(--ink); color: var(--paper); border-color: var(--ink); transform: translateY(-10px); box-shadow: 0 30px 60px rgba(7,8,11,.2); }
.plan--featured .plan__pitch { color: var(--paper-dim); }
.plan--featured li::before { color: var(--yellow); }
.plan__badge { position: absolute; top: -12px; left: 28px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; background: var(--yellow); color: var(--ink); padding: 6px 10px; border-radius: 99px; }
.btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }

/* Aprender (fim do site) */
.learn { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; padding: 12vh var(--gutter); background: #101116; color: var(--paper); border-top: 1px solid rgba(243,241,236,.08); }
.learn h2 { font-size: clamp(32px, 3.6vw, 56px); line-height: 1; letter-spacing: -.04em; font-weight: 700; }
.learn p:not(.eyebrow) { margin-top: 14px; max-width: 520px; color: var(--paper-dim); line-height: 1.55; }
.btn--light { background: var(--paper); color: var(--ink); }
.foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 28px var(--gutter) 96px; background: #07080b; color: var(--paper-dim); font-size: 13px; }
.foot a { color: var(--paper); }
.foot .logo { font-size: 18px; }

/* linha do tempo dos passos */
.steps__track { position: relative; margin-top: var(--gap-block); height: 2px; background: rgba(7,8,11,.1); border-radius: 2px; overflow: hidden; }
.steps__fill { position: absolute; inset: 0; background: linear-gradient(90deg, #c99a00, var(--yellow)); transform-origin: left; transform: scaleX(0); }
.step { transition: border-color .4s, box-shadow .4s; }
.step.is-on { border-color: rgba(201,154,0,.55); box-shadow: 0 18px 40px rgba(201,154,0,.12); }
.step.step--done.is-on { box-shadow: 0 18px 40px rgba(7,8,11,.25); }

/* animação de palavras (máscara) */
.wm { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.wi { display: inline-block; will-change: transform; }

/* palavra que troca no orçamento */
.keep { white-space: nowrap; }
.rotator { display: inline-block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; vertical-align: bottom; white-space: nowrap; }
.rotator__word { display: inline-block; color: #a87f00; will-change: transform; }

/* Comparativo */
.compare { margin-top: var(--gap-block); border-radius: 20px; overflow: hidden; border: 1px solid rgba(243,241,236,.1); }
.compare__row { display: grid; grid-template-columns: 1.1fr 1.2fr 1fr 1fr; align-items: center; border-top: 1px solid rgba(243,241,236,.08); }
.compare__row:first-child { border-top: 0; }
.compare__row > span { padding: 18px 20px; font-size: 15px; color: var(--paper-dim); }
.compare__row > span[role="rowheader"] { color: var(--paper); font-weight: 600; }
.compare__row > .is-us { background: rgba(255,210,63,.08); color: var(--paper); height: 100%; display: flex; align-items: center; }
.compare__row > .is-us b { color: var(--yellow); }
.compare__head > span { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--paper-dim); padding-top: 22px; padding-bottom: 22px; }
.compare__head > .is-us { color: var(--yellow); font-weight: 700; }
.compare i { font-style: normal; font-weight: 700; font-size: 17px; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; }
.compare .ok { background: rgba(80,200,120,.16); color: #5fd38a; }
.compare .mid { background: rgba(243,241,236,.08); color: var(--paper-dim); }
.compare .no { background: rgba(255,90,70,.14); color: #ff7a66; }

/* Depoimentos */
.proofs { margin-top: var(--gap-block); display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.proofs--two { grid-template-columns: repeat(2, 1fr); max-width: 980px; }
.proof { margin: 0; padding: 14px 14px 24px; border-radius: 22px; background: #fff; border: 1px solid rgba(7,8,11,.08); }
.proof__screen { position: relative; border-radius: 12px; overflow: hidden; background: #111; aspect-ratio: 16 / 10; pointer-events: none; }
.proof__bar { position: absolute; inset: 0 0 auto; height: 22px; display: flex; gap: 5px; align-items: center; padding: 0 10px; background: rgba(7,8,11,.65); z-index: 1; }
.proof__bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(243,241,236,.35); }
.proof__screen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.proof .stars { display: block; margin: 18px 6px 0; color: #e8a800; letter-spacing: .1em; }
.proof blockquote { margin: 10px 6px 0; font-size: 17px; line-height: 1.45; font-weight: 500; letter-spacing: -.01em; }
.proof figcaption { margin: 16px 6px 0; }
.proof figcaption b { display: block; font-size: 15px; }
.proof figcaption span { display: block; font-size: 13px; color: #6b6d73; margin-top: 2px; }
.proofs__note { margin-top: 18px; font-size: 12px; color: #5f5a52; }

/* Atendente no WhatsApp */
.bot { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: center; }
.bot__list { list-style: none; margin: 26px 0 34px; display: grid; gap: 12px; font-size: 16px; }
.bot__list li::before { content: "✓"; margin-right: 12px; color: #25d366; font-weight: 700; }
.phone { justify-self: center; width: min(340px, 100%); border-radius: 36px; padding: 12px; background: #15161b; border: 1px solid rgba(243,241,236,.12); box-shadow: 0 40px 80px rgba(0,0,0,.5); }
.phone__top { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 24px 24px 8px 8px; background: #1f2c34; }
.phone__avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #f5512a; font-size: 18px; }
.phone__top b { display: block; font-size: 15px; }
.phone__top small { color: #8fd18f; font-size: 12px; }
.chat { min-height: 380px; padding: 16px 12px 18px; display: flex; flex-direction: column; gap: 8px; border-radius: 8px 8px 24px 24px;
  background: #0b141a radial-gradient(rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 18px 18px; }
.msg { max-width: 82%; padding: 9px 12px; border-radius: 12px; font-size: 14px; line-height: 1.4; }
.msg--in { align-self: flex-start; background: #202c33; color: #e9edef; border-top-left-radius: 4px; }
.msg--out { align-self: flex-end; background: #005c4b; color: #e9edef; border-top-right-radius: 4px; }
.typing { align-self: flex-end; display: flex; gap: 4px; padding: 12px 14px; border-radius: 12px; background: #005c4b; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: rgba(233,237,239,.7); animation: typing 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* Quiz de orçamento */
.quiz { margin-top: 36px; max-width: 680px; padding: 26px; border-radius: 22px; background: #fff; border: 1px solid rgba(7,8,11,.08); box-shadow: 0 24px 60px rgba(7,8,11,.08); }
.quiz__progress { display: flex; gap: 6px; margin-bottom: 20px; }
.quiz__progress i { flex: 1; height: 4px; border-radius: 4px; background: rgba(7,8,11,.08); transition: background .4s; }
.quiz__progress i.on { background: var(--yellow); }
.quiz__step { display: none; }
.quiz__step.is-active { display: block; }
.quiz__q { font-size: 21px; font-weight: 700; letter-spacing: -.02em; }
.quiz__q span { font-size: 12px; letter-spacing: .12em; color: #9a7a00; margin-right: 8px; vertical-align: 3px; }
.quiz__opts { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; }
.quiz__opts button { padding: 12px 16px; border-radius: 99px; border: 1.5px solid rgba(7,8,11,.15); background: #fff; font: 500 15px/1 var(--sans); color: var(--ink); cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.quiz__opts button:hover { border-color: var(--ink); transform: translateY(-1px); }
.quiz__opts button.is-picked { background: var(--yellow); border-color: var(--yellow); }
.quiz__summary { margin-top: 10px; color: #4a443c; line-height: 1.5; }
.quiz__end { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.quiz__redo { background: none; border: 0; font: 500 14px var(--sans); color: #6b6d73; text-decoration: underline; cursor: pointer; }

/* ---------- Orçamento ---------- */
.orcamento { border-top: 1px solid rgba(7,8,11,.08); }

.orcamento__lede { margin-top: 24px; max-width: 520px; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; color: #4a443c; }
.orcamento__list { list-style: none; margin: 30px 0 38px; display: grid; gap: 12px; font-size: 16px; font-weight: 500; }
.orcamento__list li::before { content: "✓"; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 12px; border-radius: 50%; background: var(--yellow); color: var(--ink); font-size: 12px; font-weight: 700; }

.preco { margin: 6px 0 36px; padding: 26px 28px; max-width: 560px; border-radius: 20px; background: #fff; border: 1px solid rgba(7,8,11,.08); box-shadow: 0 18px 50px rgba(7,8,11,.06); }
.preco__q { font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: #6b6d73; }
.preco__a { margin-top: 6px; font-size: clamp(30px, 3.4vw, 46px); line-height: 1; letter-spacing: -.02em; }
.preco__a em { color: #a87f00; }
.preco__note { margin-top: 12px; font-size: 15px; line-height: 1.55; color: #4a443c; }
.orcamento__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; margin-top: 40px; }
.wa-number { color: #4a443c; text-decoration: none; font-size: 15px; }
.wa-number b { color: var(--ink); border-bottom: 2px solid #25d366; padding-bottom: 1px; }
.wa-number:hover b { color: #128c4a; }

/* ---------- Depois ---------- */
.after { min-height: 70vh; padding: 18vh var(--gutter); background: var(--paper); color: var(--ink); }
.after .eyebrow { color: #9a7a00; }
.after h2 { max-width: 900px; font-size: clamp(32px, 4.4vw, 64px); line-height: 1; letter-spacing: -.04em; font-weight: 700; }

@media (max-width: 1100px) and (min-width: 768px) {
  .proofs { grid-template-columns: 1fr 1fr; }
  .bot { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .cases, .plans { grid-template-columns: 1fr 1fr; }
}

/* quebra de linha equilibrada: nada de uma palavra sozinha na última linha */
h1, h2, h3, .display, .line > span, .info__title, .learn h2, .callout b, .toast b, .a5-price b { text-wrap: balance; }
p, .lede, .info__lede, .step p, .plan__pitch, .case p, .callout span, .search__caption, li { text-wrap: pretty; }

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .nav { flex-wrap: nowrap; padding-top: 14px; padding-bottom: 14px; }
  .nav .btn--sm { display: none; } /* no celular o CTA é o WhatsApp flutuante */
  .nav__links { gap: 18px; }
  .lift { left: auto; right: 16px; transform: none; height: 38px; gap: 8px; padding: 0 10px 0 8px; }
  .lift__open { display: none; }
  .lift__label { min-width: 0; max-width: 150px; font-size: 12px; }
  .lift__floor { min-width: 26px; height: 26px; font-size: 14px; }
  .dir__body { grid-template-columns: 34px 1fr; gap: 12px; }
  .dir__shaft { width: 24px; }
  .dir__floors > li > button { grid-template-columns: 38px 1fr; gap: 12px; padding: 10px 12px; }
  .dir__num { width: 34px; height: 34px; font-size: 15px; }
  .dir__hint { grid-column: 2; text-align: left; margin-top: -6px; }
  .directory { padding: 16px; place-items: start center; }
  .dir__panel { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); padding-bottom: 8px; }
  .nav__links a { font-size: 13px; font-weight: 500; color: var(--paper); }
  .nav__links a + a::before { content: ""; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--yellow); vertical-align: middle; margin: -2px 9px 0 -12px; }
  .brand--nav { height: 30px; }
  .brand--loader { height: 62px; }
  .nav--solid { padding-top: 10px; padding-bottom: 10px; }
  .shade {
    background:
      linear-gradient(180deg, rgba(7,8,11,.92) 0%, rgba(7,8,11,.7) 30%, rgba(7,8,11,0) 55%),
      linear-gradient(0deg, rgba(7,8,11,.75) 0%, rgba(7,8,11,0) 28%);
  }
  .layer, .a1-search { top: calc(var(--nav-h, 58px) + 46px); transform: none; left: 16px; right: 16px; width: auto; }
  .display { font-size: clamp(34px, 9.8vw, 50px); }
  .scroll-hint { margin-top: 28px; }
  .a1-search { top: auto; bottom: 76px; }
  .searchbar { height: 52px; }
  .searchbar__text { font-size: 15px; }
  .result { padding: 11px 16px; }
  .result small { display: none; }
  .next-act { top: auto; bottom: 90px; }
  .layer--top { top: calc(var(--nav-h, 58px) + 46px); }
  .display--md { font-size: clamp(30px, 8.8vw, 42px); }
  .callout, .callout-lines { display: none; }
  .race { top: auto; bottom: 72px; left: 16px; right: 16px; width: auto; }
  .race__col { padding: 14px 16px 16px; }
  .race__day b { font-size: 34px; }
  .race__status { font-size: 12px; }
  .toasts { left: 16px; right: 16px; width: auto; bottom: 84px; }
  .act-cta { right: auto; left: 16px; bottom: 16px; height: 48px; font-size: 13px; padding: 0 14px; }
  .chapter { display: none; }
  .wa-float { right: 16px; bottom: 16px; height: 48px; padding: 0 12px; }
  .wa-float span { display: none; }
  :root { --sec-pad: 88px; --gap-block: 40px; }
  .info { padding: var(--sec-pad) 16px; }
  .steps, .cases, .plans { grid-template-columns: 1fr; }
  .steps__track { display: none; }
  .steps { margin-top: var(--gap-block); }
  .plan--featured { transform: none; }
  .learn { padding: 10vh 16px; }
  .foot { padding: 24px 16px 90px; }
  .wire-stats { display: none; }
  .build-meter { right: 6px; padding: 6px 5px; border-radius: 9px; gap: 0; opacity: .9; }
  .build-track { right: 20px; }
  .meter-menu { right: 46px; width: 210px; }
  .skip-story { left: auto; right: 14px; bottom: auto; top: calc(var(--nav-h, 58px) + 6px); padding: 7px 11px; font-size: 11px; }
  .compare__row { grid-template-columns: 1fr 1fr 1fr; }
  .compare__row > span[role="rowheader"] { grid-column: 1 / -1; padding: 14px 14px 0; font-size: 13px; }
  .compare__head > span:first-child { display: none; }
  .compare__row > span { padding: 10px 12px 14px; font-size: 12px; }
  .compare__head > span { font-size: 9px; letter-spacing: .1em; padding: 14px 12px; }
  .proofs, .proofs--two { grid-template-columns: 1fr; }
  .consent { left: 12px; right: 12px; width: auto; bottom: 12px; padding: 16px; }
  .guarantee { padding: 18px; gap: 14px; }
  .guarantee__seal { width: 40px; height: 40px; }
  .faq__item summary { padding: 18px 2px; }
  .bot { grid-template-columns: 1fr; gap: 40px; }
  .chat { min-height: 340px; }
  .quiz { padding: 20px; }
  .quiz__q { font-size: 18px; }
  .quiz__opts button { font-size: 14px; padding: 11px 14px; }
  .plan__price .plan__from:empty, .plan__price .plan__from[aria-hidden] { display: none; }
  .plan__for { min-height: 0; }
  .build-meter svg { width: 18px; height: 32px; }
  .build-meter__pct { display: none; }

  /* legibilidade no celular: textos de apoio mais claros, mais pesados e com sombra sobre o vídeo */
  .stage .lede, .search__caption, .a5-price, .skip, .scroll-hint, .a5-more {
    color: rgba(243,241,236,.94); font-weight: 500; text-shadow: 0 1px 2px rgba(0,0,0,.6), 0 2px 18px rgba(0,0,0,.75);
  }
  .stage .lede { font-size: 16px; line-height: 1.5; }
  .stage .eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .18em; text-shadow: 0 1px 10px rgba(0,0,0,.8); }
  .scroll-hint { font-size: 11px; font-weight: 600; }
  .skip { border-bottom-color: rgba(243,241,236,.55); font-size: 14px; }
  .search__caption { font-size: 14px; }
  .race__who { font-size: 10px; font-weight: 600; letter-spacing: .1em; white-space: nowrap; color: rgba(243,241,236,.85); }
  .race__day { color: rgba(243,241,236,.85); }
  .race__col--them .race__status { color: rgba(243,241,236,.85); }
  .race__status { font-weight: 600; }
  .stars em { color: rgba(243,241,236,.85); }
  .toast small { color: #4d4f55; font-weight: 500; }
  .info__lede, .step p, .plan__pitch, .learn p:not(.eyebrow) { font-weight: 500; }
  .info--light .info__lede, .step p, .plan__pitch { color: #3a352e; }
  .learn p:not(.eyebrow) { color: rgba(243,241,236,.88); }
  .foot { color: rgba(243,241,236,.8); }
  .shade {
    background:
      linear-gradient(180deg, rgba(7,8,11,.96) 0%, rgba(7,8,11,.82) 32%, rgba(7,8,11,.25) 52%, rgba(7,8,11,0) 62%),
      linear-gradient(0deg, rgba(7,8,11,.8) 0%, rgba(7,8,11,0) 30%);
  }
  .a5-ctas .btn--lg { padding: 16px 20px; font-size: 15px; }
  .toast { padding: 11px 13px; }
  .toast b { font-size: 13px; }
}

/* ===== Garantia ===== */
.guarantee { margin-top: 28px; display: flex; gap: 18px; align-items: flex-start; max-width: 860px; padding: 22px 24px; border-radius: 18px;
  background: #fff; border: 1px solid rgba(201,154,0,.35); box-shadow: 0 10px 30px rgba(7,8,11,.06); }
.guarantee__seal { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--yellow); }
.guarantee__seal svg { width: 24px; height: 24px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.guarantee b { display: block; font-size: clamp(17px, 1.5vw, 20px); letter-spacing: -.02em; }
.guarantee p { margin-top: 6px; color: #3a352e; line-height: 1.55; }

/* ===== Perguntas frequentes ===== */
/* guardadas: só abrem no clique (o conteúdo continua no HTML, Google e IAs leem igual) */
.faq__toggle { margin-top: 36px; display: inline-flex; align-items: center; gap: 14px; padding: 16px 22px 16px 26px; border-radius: 99px; cursor: pointer;
  background: none; border: 1px solid rgba(255,210,63,.55); color: var(--yellow); font: 600 16px/1 var(--sans); letter-spacing: -.01em; transition: background .2s, border-color .2s; }
.faq__toggle:hover { background: rgba(255,210,63,.1); border-color: var(--yellow); }
.faq__toggle i { position: relative; width: 12px; height: 12px; transition: transform .35s; }
.faq__toggle i::before { content: ""; position: absolute; inset: 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-25%) rotate(45deg); }
.faq__toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.faq__panel { height: 0; overflow: hidden; }
.faq__panel.is-open { height: auto; }
.faq__list { margin-top: 40px; max-width: 920px; border-top: 1px solid rgba(243,241,236,.12); }
.faq__item { border-bottom: 1px solid rgba(243,241,236,.12); }
.faq__item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 4px; font-size: clamp(17px, 1.6vw, 22px); font-weight: 600; letter-spacing: -.02em; transition: color .2s; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary span, .guarantee b { text-wrap: balance; }
.faq__item summary:hover, .faq__item[open] summary { color: var(--yellow); }
.faq__item summary i { flex: none; position: relative; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(243,241,236,.25); transition: transform .3s, border-color .2s; }
.faq__item summary i::before, .faq__item summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); }
.faq__item summary i::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .3s; }
.faq__item[open] summary i { border-color: var(--yellow); transform: rotate(180deg); }
.faq__item[open] summary i::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq__item p { padding: 0 4px 24px; max-width: 760px; color: var(--paper-dim); line-height: 1.6; font-size: clamp(15px, 1.2vw, 17px); }
.faq__more { display: inline-block; margin-top: 32px; color: var(--paper-dim); text-decoration: none; }
.faq__more b { color: var(--yellow); font-weight: 600; }
.faq__more:hover b { text-decoration: underline; }

/* ===== Aviso de cookies ===== */
.consent { position: fixed; z-index: 95; left: var(--gutter); bottom: clamp(20px, 4.5vh, 40px); width: min(440px, calc(100vw - 32px)); padding: 18px 20px;
  border-radius: 18px; background: rgba(12,13,17,.96); border: 1px solid rgba(243,241,236,.14); box-shadow: 0 24px 60px rgba(0,0,0,.5); color: var(--paper);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); opacity: 0; transform: translateY(16px); transition: opacity .35s, transform .35s; }
.consent.is-in { opacity: 1; transform: none; }
.consent p { font-size: 14px; line-height: 1.5; color: var(--paper-dim); text-wrap: pretty; }
.consent p b { color: var(--paper); display: block; margin-bottom: 2px; font-size: 15px; }
.consent a { color: var(--yellow); }
.consent__btns { display: flex; gap: 10px; margin-top: 14px; }
.consent__btn { flex: 1; padding: 12px 14px; border-radius: 99px; border: 1px solid rgba(243,241,236,.25); background: none; color: var(--paper); font: 600 14px/1 var(--sans); cursor: pointer; }
.consent__btn:hover { border-color: var(--paper); }
.consent__btn--ok { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.consent__btn--ok:hover { border-color: var(--yellow); filter: brightness(1.05); }
.foot__legal a { color: var(--paper-dim); }
.foot__legal a:hover { color: var(--paper); }

/* só para leitores de tela, Google e IAs */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ===== Menos movimento (preferência do sistema) =====
   A história continua andando com a rolagem (é a pessoa que controla), mas sai tudo o que se mexe sozinho. */
@media (prefers-reduced-motion: reduce) {
  .grain, .scroll-hint span::after, .caret { animation: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}