/* ============================================================
   O QUE FAZEMOS — CSS próprio da página (16/ago/2026, F-XXX)
   Carregado SÓ por o-que-fazemos.html, depois de style.css e
   pillnav.css. Tudo aqui é namespaced em .qf-* — zero override
   de componente global.

   O que vem DE GRAÇA do style.css (não redeclarar):
   · tokens (:root), html escuro #0A0A0B, scroll-padding
   · .light-section/.light-in (papel claro + fio âmbar no topo)
   · .sec-eyebrow/.sec-title/.sec-sub/.sec-head (cabeçalho claro)
   · .ruler/.section-title/.section-sub (cabeçalho escuro)
   · .sp-idx/.sp-rule/.sp-title/.sp-lead/.sp-sup/.lg-list (capítulo)
   · .sp-demo/.sp-para (coluna de demo com ALTURA DEFINIDA do palco)
   · .bn-tile/.bn-stage/.ui-bar/.ui-live + TODAS as cenas de demo
     (wa-*, gx-*, d-dash, au, ap, d-web, lp)
   · .btn/.btn-secondary (Forge Line), .btn-ghost (papel), .cascade,
     .reveal, .microcopy, .hero-clients/.hclients-*, .to-top

   ⚠️ CORREÇÃO DE UMA AFIRMAÇÃO QUE ESTAVA AQUI: dizia que as cenas
   vinham "pausadas até .live". Vinha a INTENÇÃO, não o efeito — a
   regra de pausa do style.css é derrotada pela cascata e nunca valeu
   pra maioria das cenas (medido: 61 animações rodando em qualquer
   ponto da página). Quem pausa de verdade é a seção 9 deste arquivo.

   ESTRUTURA DA PÁGINA (portões tonais, sem pin/scroll-jack):
   hero escuro (constelação das 7 frentes) → capítulos claros
   01–07 com demo viva, com uma faixa "atalho" (CTA) depois do 02 e
   depois do 04 → processo escuro (linha de solda) → compromissos
   claros → fecho escuro com CTA + clientes.
   ============================================================ */

/* ---------- 1 · HERO ---------- */
.qf-hero {
  position: relative;
  overflow: clip;
  background: #0A0A0B;
  padding: clamp(7.5rem, 16vh, 11rem) clamp(1.1rem, 5vw, 2rem) clamp(3.6rem, 8vh, 5.5rem);
}
/* planta baixa: grade fina de engenharia, quase subliminar */
.qf-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(oklch(1 0 0 / 0.028) 1px, transparent 1px),
    linear-gradient(90deg, oklch(1 0 0 / 0.028) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
}
/* brasa ambiente atrás da constelação */
.qf-hero::after {
  content: ""; position: absolute; pointer-events: none;
  right: -12%; top: -6%; width: 58%; aspect-ratio: 1;
  background: radial-gradient(circle, oklch(from var(--accent) l c h / 0.11), transparent 62%);
  filter: blur(10px);
}
.qf-hero-in {
  position: relative; z-index: 1;
  max-width: 72rem; margin-inline: auto;
  display: grid; gap: clamp(2.6rem, 6vw, 4rem);
}
@media (min-width: 900px) {
  .qf-hero-in { grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); align-items: center; }
}

.qf-kicker {
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.24em; color: var(--accent);
}
.qf-h1 {
  margin-top: 1rem;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.35rem, 6.6vw, 4.15rem);
  line-height: 1.02; letter-spacing: -0.028em;
  color: var(--text-primary); text-wrap: balance;
}
.qf-h1 em { font-style: italic; color: var(--accent); }
.qf-hero-sub {
  margin-top: 1.3rem; max-width: 54ch;
  color: var(--text-secondary); font-size: clamp(0.98rem, 1.4vw, 1.06rem);
  line-height: 1.65; text-wrap: pretty;
}
.qf-hero-cta {
  margin-top: 2rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 0.9rem;
}
/* pill âmbar sólido — a MESMA joia do CTA do nav/hero da home, reescrita
   aqui porque .btn-hglass é escopado ao #intro da home */
.qf-btn-solid {
  position: relative; display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.9rem 1.55rem; min-height: 48px;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, oklch(0.760 0.163 49), oklch(0.660 0.158 49));
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.32),
    0 12px 30px -14px oklch(from var(--accent) l c h / 0.65);
  color: #fff; font-family: var(--font-sans); font-weight: 600; font-size: 0.92rem;
  letter-spacing: 0.01em; text-decoration: none; white-space: nowrap;
  transition: transform var(--dur-micro) var(--ease-spring),
              box-shadow var(--dur-micro) var(--ease-spring),
              filter var(--dur-micro) var(--ease-spring);
  -webkit-tap-highlight-color: transparent;
}
.qf-btn-solid .arrow { display: inline-block; transition: transform var(--dur-micro) var(--ease-card); }
.qf-btn-solid:hover, .qf-btn-solid:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.36),
    0 16px 40px -16px oklch(from var(--accent) l c h / 0.8);
}
.qf-btn-solid:hover .arrow, .qf-btn-solid:focus-visible .arrow { transform: translateX(4px); }
.qf-btn-solid:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.qf-btn-solid:active { transform: translateY(0) scale(0.975); }
@media (max-width: 559px) { .qf-hero-cta .btn { width: 100%; } .qf-btn-solid { width: 100%; justify-content: center; } }

/* ---------- 2 · TRILHO DAS SETE (âncoras) ---------- */
.qf-rail { margin-top: clamp(2.2rem, 5vh, 3rem); }
.qf-rail-cap {
  font-family: var(--font-mono); font-size: 0.6rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.2em; color: var(--text-muted);
  margin-bottom: 0.65rem;
}
.qf-rail ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.5rem;
}
/* min-height 44px: medido em 390px, a pastilha fechava 34px de altura —
   abaixo do alvo de toque de 44 que o resto da página respeita (o
   .qf-btn-solid já nasce com min-height:48px). `center` no lugar de
   `baseline` não muda nada visualmente aqui (o <b> do número e o rótulo
   dividem fonte, corpo e peso), só deixa o conteúdo centrado na caixa
   mais alta em vez de pendurado no topo. */
.qf-rail a {
  display: inline-flex; align-items: center; gap: 0.5em;
  min-height: 44px;
  padding: 0.52rem 0.8rem;
  border: 1px solid oklch(1 0 0 / 0.13);
  border-radius: var(--radius-forge);
  background: oklch(1 0 0 / 0.02);
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: #D6CFBE; text-decoration: none; white-space: nowrap;
  transition: border-color var(--dur-micro) var(--ease-card),
              color var(--dur-micro) var(--ease-card),
              background var(--dur-micro) var(--ease-card),
              transform var(--dur-micro) var(--ease-card);
}
.qf-rail a b { font-weight: 500; color: var(--accent); font-variant-numeric: tabular-nums; }
.qf-rail a:hover, .qf-rail a:focus-visible {
  border-color: oklch(from var(--accent) l c h / 0.6);
  background: oklch(from var(--accent) l c h / 0.07);
  color: var(--text-primary);
  transform: translateY(-1px);
}
.qf-rail a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ---------- 3 · CONSTELAÇÃO (decorativa, desktop) ---------- */
.qf-const { display: none; }
@media (min-width: 900px) {
  /* ⚠️ `width:100%` NÃO é redundante aqui, é o que faz a constelação
     existir. TODOS os filhos deste bloco são position:absolute (a SVG
     dos fios, os 7 nós e o núcleo), então o conteúdo em fluxo é ZERO —
     e `margin-inline:auto` num item de GRID desliga o stretch da
     coluna, deixando a caixa em shrink-to-fit. Sem largura declarada
     o resultado é 0 de largura, o aspect-ratio deriva 0 de altura e os
     oito filhos empilham no mesmo ponto: só o último (o núcleo) fica
     visível, porque é o que pinta por cima. Com width:100% a largura
     vira definida, o max-width segura o teto e a margem só centra. */
  .qf-const {
    display: block; position: relative;
    width: 100%; max-width: 34rem; margin-inline: auto;
    aspect-ratio: 56 / 58;
    animation: qf-drift 13s ease-in-out infinite;
  }
}
@keyframes qf-drift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.qf-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.qf-wire {
  fill: none; stroke: oklch(from var(--accent) l c h / 0.22);
  stroke-width: 1;
}
/* o cometa: mesmo fio, traço curto correndo com pathLength=1 */
.qf-comet {
  fill: none; stroke: var(--accent-hot); stroke-width: 1.6; stroke-linecap: round;
  stroke-dasharray: 0.12 1;
  stroke-dashoffset: 1.12;
  filter: drop-shadow(0 0 4px oklch(from var(--accent) l c h / 0.55));
  animation: qf-comet 4.6s linear infinite;
  animation-delay: var(--d, 0s);
}
@keyframes qf-comet {
  0% { stroke-dashoffset: 1.12; opacity: 0; }
  6% { opacity: 1; }
  56% { stroke-dashoffset: -0.12; opacity: 1; }
  60%, 100% { stroke-dashoffset: -0.12; opacity: 0; }
}
.qf-node {
  position: absolute; transform: translate(-50%, -50%);
  display: inline-flex; align-items: baseline; gap: 0.5em;
  padding: 0.5rem 0.72rem;
  border: 1px solid oklch(1 0 0 / 0.14);
  border-radius: var(--radius-forge);
  background: oklch(0.17 0.008 65 / 0.82);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-family: var(--font-mono); font-size: 0.58rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em; color: #D6CFBE;
  white-space: nowrap;
  box-shadow: 0 10px 30px -18px oklch(0 0 0 / 0.8);
  animation: qf-node-glow 4.6s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
.qf-node b { font-weight: 500; color: var(--accent); font-variant-numeric: tabular-nums; }
@keyframes qf-node-glow {
  0%, 100% { border-color: oklch(1 0 0 / 0.14); }
  58% { border-color: oklch(from var(--accent) l c h / 0.6); }
  66% { border-color: oklch(1 0 0 / 0.14); }
}
.qf-hub {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
  padding: 0.9rem 1.2rem;
  border: 1px solid oklch(from var(--accent) l c h / 0.5);
  border-radius: var(--radius-forge);
  background: oklch(0.15 0.008 60 / 0.9);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow:
    0 0 0 1px oklch(from var(--accent) l c h / 0.12),
    0 24px 60px -28px oklch(from var(--accent) l c h / 0.5);
}
.qf-hub b {
  display: inline-flex; align-items: center; gap: 0.45em;
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.22em; color: var(--text-primary);
}
.qf-hub b::before {
  content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--accent);
  box-shadow: 0 0 10px oklch(from var(--accent) l c h / 0.7);
}
.qf-hub em {
  font-style: normal; font-family: var(--font-mono); font-size: 0.52rem;
  text-transform: uppercase; letter-spacing: 0.18em; color: var(--text-muted);
}

/* ---------- 4 · CAPÍTULOS (claro) ---------- */
.qf-frentes { padding-top: clamp(4rem, 9vh, 6rem); }
.qf-chaps {
  margin-top: clamp(3rem, 7vh, 4.5rem);
  display: grid; gap: clamp(3.4rem, 8vh, 5.5rem);
}
.qf-chap {
  border-top: 1px solid var(--light-rule);
  padding-top: clamp(2.2rem, 5vh, 3.2rem);
  display: grid; gap: clamp(1.8rem, 5vw, 2.6rem);
  align-items: center;
}
.qf-chap > * { min-width: 0; }
@media (min-width: 900px) {
  .qf-chap { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(2.4rem, 5.5vw, 4.5rem); }
  /* faixa invertida: a demo troca de lado, o texto segue primeiro no DOM */
  .qf-chap.flip { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }
  .qf-chap.flip .qf-copy { order: 2; }
  .qf-chap.flip .sp-demo { order: 1; }
}
/* título do capítulo é h2 (hierarquia da página); a régua visual é a
   mesma .sp-title do palco da home */
.qf-copy .sp-title { margin-top: 0.85rem; }

/* blocos rotulados — a gramática comercial do capítulo */
.qf-fit, .qf-out { margin-top: 1.15rem; max-width: 46ch; }
.qf-fit > span, .qf-out > span {
  display: block; margin-bottom: 0.32rem;
  font-family: var(--font-mono); font-size: 0.58rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.18em; color: var(--accent-deep);
}
.qf-fit > p, .qf-out > p {
  margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--light-ink-2);
  text-wrap: pretty;
}
.qf-out {
  border-left: 2px solid oklch(from var(--accent) l c h / 0.55);
  padding-left: 0.9rem;
}
/* ---------- 4b · ATALHO (CTA no meio do caminho) ----------
   Faixa entre capítulos. Usa a MESMA régua do .qf-chap (border-top +
   var(--light-rule)) de propósito: assim ela entra no ritmo editorial da
   coluna em vez de virar um banner. Sem fundo próprio, sem sombra, sem
   canto arredondado — o único peso visual é o botão âmbar, que já é o
   idioma de CTA da página. */
.qf-cta-mid {
  border-top: 1px solid var(--light-rule);
  padding-top: clamp(2.2rem, 5vh, 3.2rem);
  display: grid; gap: 1.35rem;
}
@media (min-width: 820px) {
  .qf-cta-mid {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; gap: clamp(2rem, 5vw, 3.5rem);
  }
}
.qf-cta-mid-l {
  font-family: var(--font-mono); font-size: 0.58rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.18em; color: var(--accent-deep);
  margin-bottom: 0.42rem;
}
.qf-cta-mid-t {
  margin: 0; max-width: 52ch;
  font-size: clamp(1rem, 1.5vw, 1.1rem); line-height: 1.55;
  color: var(--light-ink); text-wrap: pretty;
}
.qf-cta-mid-a { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 0.8rem; }
@media (max-width: 559px) {
  .qf-cta-mid-a .qf-btn-solid, .qf-cta-mid-a .btn-ghost { width: 100%; justify-content: center; }
}

/* legenda mono sob a demo (dentro do tile) */
.qf-cap {
  margin-top: 0.6rem; padding-inline: 0.15rem;
  display: flex; justify-content: space-between; gap: 0.8rem;
  font-family: var(--font-mono); font-size: 0.55rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--light-ink-3);
}
.qf-cap i { font-style: normal; color: oklch(from var(--light-ink-3) l c h / 0.85); }

/* ---------- 5 · PROCESSO (escuro) ---------- */
.qf-processo {
  position: relative;
  background: #0A0A0B;
  padding: clamp(4.2rem, 10vh, 6.5rem) clamp(1.1rem, 5vw, 2rem);
}
/* fio âmbar na costura papel → carvão (espelho do .light-section::before) */
.qf-processo::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.75;
}
.qf-processo-in { max-width: 72rem; margin-inline: auto; }
.qf-processo-in > .ruler,
.qf-processo-in > .section-title,
.qf-processo-in > .section-sub { max-width: 44rem; margin-inline: auto; text-align: center; }
.qf-processo-in > .section-sub { margin-top: 0.8rem; }

.qf-steps {
  position: relative;
  margin-top: clamp(2.6rem, 6vh, 3.8rem);
  display: grid; gap: 2rem;
}
@media (min-width: 860px) {
  .qf-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.4rem, 3vw, 2.4rem); }
  /* a linha de solda que atravessa as quatro estações */
  .qf-steps::before {
    content: ""; position: absolute; left: 0; right: 0; top: 17px; height: 1px;
    background: linear-gradient(90deg,
      transparent,
      oklch(from var(--accent) l c h / 0.34) 8%,
      oklch(from var(--accent) l c h / 0.34) 92%,
      transparent);
  }
  /* o clarão viajando na linha */
  .qf-steps::after {
    content: ""; position: absolute; top: 16.5px; left: 0; height: 2px; width: 88px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-flare), transparent);
    filter: drop-shadow(0 0 6px oklch(from var(--accent) l c h / 0.6));
    opacity: 0;
    animation: qf-flare 7s linear infinite;
  }
}
@keyframes qf-flare {
  0% { transform: translateX(-90px); opacity: 0; }
  6% { opacity: 1; }
  60% { transform: translateX(calc(100vw - 90px)); opacity: 1; }
  62%, 100% { transform: translateX(calc(100vw - 90px)); opacity: 0; }
}
@media (min-width: 1152px) {
  @keyframes qf-flare {
    0% { transform: translateX(-90px); opacity: 0; }
    6% { opacity: 1; }
    60% { transform: translateX(1152px); opacity: 1; }
    62%, 100% { transform: translateX(1152px); opacity: 0; }
  }
}
.qf-step { position: relative; }
.qf-step-n {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding-inline: 0.55rem;
  border: 1px solid oklch(from var(--accent) l c h / 0.5);
  border-radius: var(--radius-forge);
  background: #0A0A0B;
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500;
  color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: 0.08em;
}
.qf-step h3 {
  margin-top: 0.95rem;
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.18rem; letter-spacing: -0.015em; color: var(--text-primary);
}
.qf-step p {
  margin-top: 0.55rem; font-size: 0.9rem; line-height: 1.62;
  color: var(--text-muted); text-wrap: pretty;
}
/* mobile: trilho vertical à esquerda, estações penduradas nele */
@media (max-width: 859px) {
  .qf-steps::before {
    content: ""; position: absolute; left: 17.5px; top: 8px; bottom: 8px; width: 1px;
    background: linear-gradient(180deg,
      oklch(from var(--accent) l c h / 0.4),
      oklch(from var(--accent) l c h / 0.12));
  }
  .qf-step { padding-left: 3.2rem; }
  .qf-step-n { position: absolute; left: 0; top: -2px; }
  .qf-step h3 { margin-top: 0; }
}
.qf-fineprint {
  margin: clamp(2.4rem, 6vh, 3.4rem) auto 0; max-width: 44rem;
  text-align: center; font-size: 0.92rem; line-height: 1.65; color: var(--text-muted);
  text-wrap: pretty;
}
.qf-fineprint a {
  color: var(--accent-hot); text-decoration: underline;
  text-underline-offset: 0.18em; text-decoration-thickness: 1px;
  text-decoration-color: oklch(from var(--accent-hot) l c h / 0.45);
}
.qf-fineprint a:hover { text-decoration-color: currentColor; }

/* ---------- 6 · O COMBINADO (claro) ---------- */
.qf-terms {
  margin-top: clamp(2.4rem, 6vh, 3.4rem);
  border-top: 1px solid var(--light-rule);
}
.qf-term {
  display: grid; gap: 0.35rem 1.4rem;
  padding: 1.05rem 0.15rem;
  border-bottom: 1px solid var(--light-rule);
}
@media (min-width: 760px) {
  .qf-term { grid-template-columns: 3.4rem 15rem minmax(0, 1fr); align-items: baseline; padding: 1.15rem 0.25rem; }
}
.qf-term > b {
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500;
  color: var(--accent-deep); font-variant-numeric: tabular-nums; letter-spacing: 0.08em;
}
.qf-term > h3 {
  font-family: var(--font-sans); font-weight: 600; font-size: 0.96rem;
  letter-spacing: -0.005em; color: var(--light-ink);
}
.qf-term > p {
  margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--light-ink-2);
  text-wrap: pretty;
}
.qf-orc { margin-top: clamp(3rem, 7vh, 4.2rem); max-width: 46rem; }
.qf-orc h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.35rem, 3vw, 1.7rem); letter-spacing: -0.02em; color: var(--light-ink);
}
.qf-orc p {
  margin-top: 0.85rem; font-size: 0.95rem; line-height: 1.7; color: var(--light-ink-2);
  text-wrap: pretty;
}
.qf-orc a {
  color: var(--accent-deep); text-decoration: underline;
  text-underline-offset: 0.18em; text-decoration-thickness: 1px;
  text-decoration-color: oklch(from var(--accent-deep) l c h / 0.45);
}
.qf-orc a:hover { text-decoration-color: currentColor; }

/* ---------- 7 · FECHO (escuro) ---------- */
.qf-fim {
  position: relative; overflow: clip;
  background: #0A0A0B;
  padding: clamp(4.5rem, 11vh, 7rem) clamp(1.1rem, 5vw, 2rem) clamp(3.6rem, 9vh, 5.5rem);
  text-align: center;
}
.qf-fim::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.75;
}
.qf-fim::after {
  content: ""; position: absolute; pointer-events: none;
  left: 50%; top: -30%; transform: translateX(-50%);
  width: min(60rem, 110%); aspect-ratio: 2.6;
  background: radial-gradient(50% 50% at 50% 50%, oklch(from var(--accent) l c h / 0.1), transparent 70%);
  filter: blur(8px);
}
.qf-fim-in { position: relative; z-index: 1; max-width: 46rem; margin-inline: auto; }
.qf-fim h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.85rem, 5vw, 2.9rem); line-height: 1.08;
  letter-spacing: -0.025em; color: var(--text-primary); text-wrap: balance;
}
.qf-fim h2 em { font-style: italic; color: var(--accent); }
.qf-fim-sub {
  margin-top: 1rem; color: var(--text-muted); font-size: 0.96rem; line-height: 1.65;
  text-wrap: balance;
}
.qf-fim-cta {
  margin-top: 1.9rem;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 0.8rem 0.9rem;
}
@media (max-width: 559px) { .qf-fim-cta .btn { width: 100%; } .qf-fim-cta .qf-btn-solid { width: 100%; justify-content: center; } }

/* ---------- 8 · ESPELHOS DE ESCOPO DAS DEMOS ----------
   As cenas (wa, gx, au, ap, d-web, lp, d-dash) são globais no
   style.css, mas alguns AJUSTES delas vivem escopados em #projetos
   (a seção da home). Aqui os mesmos ajustes valem sob .qf-frentes —
   copiados 1:1, só o escopo muda. Mexeu lá, mexe aqui. */

/* 01 · celular do WhatsApp: palco retrato, mais alto que o padrão */
.qf-frentes .bn-b .bn-stage { height: clamp(390px, 104vw, 470px); }
@media (min-width: 900px) {
  .qf-frentes .bn-b .bn-stage { height: clamp(420px, 40vw, 520px); }
}

/* 02 · busca por IA: palco mais alto */
.qf-frentes .bn-g .bn-stage { height: clamp(280px, 76vw, 345px); }
@media (min-width: 900px) {
  .qf-frentes .bn-g .bn-stage { height: clamp(300px, 29vw, 380px); }
}

/* 04 · o fluxo da automação: palco mais alto.
   Medido: Automações fechava com o MENOR palco da página (242px em
   390px de viewport) enquanto 01 Agentes fica com 406px — e as duas são
   as frentes que mais vendem. O grafo é horizontal e os quatro nós são
   posicionados em % dentro de .au (a SVG dos fios é preserveAspectRatio
   "none"), então altura a mais ESPALHA o fluxo em vez de espremê-lo. */
.qf-frentes .bn-c .bn-stage { height: clamp(300px, 78vw, 340px); }
@media (min-width: 900px) {
  .qf-frentes .bn-c .bn-stage { height: clamp(330px, 30vw, 400px); }
}

/* 04 · a notificação do fluxo (keyframes sp-toast são globais) */
.qf-frentes .bn-c .flow-toast {
  position: absolute; top: 0.45rem; right: 0.45rem; z-index: 3;
  display: inline-flex; align-items: center; gap: 0.3rem;
  font: 500 0.5rem var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--light-ink); background: #fff;
  border: 1px solid oklch(from var(--accent) l c h / 0.4); border-radius: 6px;
  padding: 0.3rem 0.5rem;
  box-shadow: 0 12px 24px -14px oklch(0.3 0.02 60 / 0.7);
  opacity: 0; transform: translateY(-8px);
  animation: sp-toast 4.8s var(--ease-card) infinite;
}
.qf-frentes .bn-c .flow-toast::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none;
}

/* 05 · o toque que troca as telas do app (keyframes sp-tap globais) */
.qf-frentes .bn-f .dv-tap {
  position: absolute; left: 50%; bottom: 14%; width: 10px; height: 10px;
  margin-left: -5px; border-radius: 50%; z-index: 3;
  background: oklch(from var(--accent) l c h / 0.55);
  opacity: 0; animation: sp-tap 9s linear infinite;
}

/* ---------- 9 · PAUSA FORA DA VIEWPORT ----------
   O style.css declara a intenção certa (`.bn-stage *` nasce em
   animation-play-state:paused, `.bn-tile.live` solta), mas na prática
   ela NUNCA valeu para a maioria das cenas — e o motivo é cascata, não
   JavaScript. A regra de pausa vive na linha 2298 com especificidade
   (0,1,0). TODA cena declarada depois dela (bn-build 2309, bn-wire
   2420, bn-bar 2500, bn-dv-cycle 2533, au-*, dw-*, lp-* …) usa a
   FORMA CURTA `animation: nome 7.4s ... infinite`, e forma curta
   reseta as sub-propriedades que ela não cita — inclusive
   animation-play-state, que volta ao inicial `running`. Mesma
   especificidade + vindo depois = a cena ganha e roda sempre.
   Resultado medido (390px, CPU 4x): 61 animações rodando em QUALQUER
   ponto da página, inclusive parado em "O combinado", onde não há uma
   única demo na tela.

   Este arquivo carrega DEPOIS do style.css, então basta uma regra mais
   específica para consertar. O `!important` não é preguiça: é a única
   forma de vencer uma forma curta posterior sem editar o global (e o
   escopo `.qf-frentes … :not(.live)` mantém o alcance no que é desta
   página). Invertemos a lógica — em vez de "solta quem tem .live",
   "trava quem NÃO tem" — porque a trava passa a ser a regra que chega
   por último, e aí nenhuma forma curta a desfaz.
   Contrato preservado: o estado parado JÁ é o estado final desenhado
   ("bonito parado", style.css:2296), então a demo fora da viewport não
   fica quebrada — fica quieta. */
.qf-frentes .bn-tile:not(.live) .bn-stage *,
.qf-frentes .bn-tile:not(.live) .bn-stage *::before,
.qf-frentes .bn-tile:not(.live) .bn-stage *::after {
  animation-play-state: paused !important;
}

/* O mesmo tratamento para o que é só desta página e roda solto:
   a constelação do hero (1 drift + 7 cometas + 7 nós = 15 animações no
   desktop) seguia viva pelos 12.500px de rolagem inteiros, muito depois
   do hero ter saído da tela; e o clarão da linha de solda do processo,
   idem. `.qf-vis` é ligado por IntersectionObserver (inline no HTML).
   Aqui não precisa de !important: estas regras são as últimas do
   arquivo e mais específicas que as declarações originais. */
.qf-hero:not(.qf-vis) .qf-const,
.qf-hero:not(.qf-vis) .qf-comet,
.qf-hero:not(.qf-vis) .qf-node { animation-play-state: paused; }
.qf-processo:not(.qf-vis) .qf-steps::after { animation-play-state: paused; }

/* ---------- reduced motion (reforço do bloco global) ---------- */
@media (prefers-reduced-motion: reduce) {
  .qf-const, .qf-node { animation: none; }
  .qf-comet { animation: none; opacity: 0; }
  .qf-steps::after { animation: none; opacity: 0; }
}