/* ============================================================================
   Site institucional — Cleomar Tenedini
   ----------------------------------------------------------------------------
   Consome o design system publicado pelo designer, vendorizado em `ds/` por
   `sincronizar-ds.mjs`. NADA aqui redeclara token: `--ct-*` é exclusivo do DS.

   NAMESPACES (checados por `conferir-tokens.mjs`):
     .st-*    padrões de página nossos (o DS entrega controles, não seções)
     --_*     variável privada de um padrão nosso
     --st-*   valor sem token no DS — dívida contabilizada, meta zero

   REGRA DE FRONTEIRA: `.st-x .ct-btn { }` posiciona (permitido);
   `.ct-btn { }` redefine (proibido).

   MOTION: a base é o `06-motion/` do DS — revelação com opacity + translateY(16px)
   em 600ms `emphasized`, conteúdo visível por padrão, failsafe de 3s. A CAMADA DE
   MOVIMENTO no fim deste arquivo vai ALÉM do DS a pedido do cliente (hover com
   elevação e brilho, parallax no hero, brilho que segue o ponteiro, contadores).
   Divergência consciente, documentada lá; toda ela morre em `prefers-reduced-motion`.
   ========================================================================== */

/* ─────────────────────────────────────────────────────────── esqueleto ── */

html { scroll-behavior: smooth; scroll-padding-block-start: var(--ct-space-24); }
body { margin: 0; overflow-x: clip; }

main :is(h1, h2, h3, h4, p, figure, blockquote, dl, dd) { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

.st-pular {
  position: absolute; inset-inline-start: var(--ct-space-4); inset-block-start: var(--ct-space-4);
  z-index: var(--ct-z-toast); transform: translateY(-200%);
  background: var(--ct-bg-surface); color: var(--ct-text-primary);
  padding: var(--ct-space-3) var(--ct-space-5);
  border-radius: var(--ct-radius-control);
  box-shadow: var(--ct-shadow-2);
}
.st-pular:focus { transform: translateY(0); }

/* ───────────────────────────────────────────────────── revelação no scroll ── */

/* O conteúdo começa visível. `.js-revela` só entra no <html> quando o
   IntersectionObserver existe; o script tem failsafe de 3s. Uma vez por bloco. */
.js-revela [data-revela] {
  opacity: 0;
  transform: translateY(var(--ct-motion-distance-lg));
  transition:
    opacity var(--ct-motion-duration-slower) var(--ct-motion-easing-emphasized),
    transform var(--ct-motion-duration-slower) var(--ct-motion-easing-emphasized);
  transition-delay: calc(var(--_ordem, 0) * var(--ct-motion-duration-fast) / 2);
}
.js-revela [data-revela].is-visivel { opacity: 1; transform: none; }

/* ───────────────────────────────────────────────────────────── cabeçalho ── */

.st-cabecalho {
  position: sticky; inset-block-start: 0; z-index: var(--ct-z-header);
  background: var(--ct-bg-canvas);
  border-block-end: var(--ct-border-width-hairline) solid var(--ct-border-subtle);
  transition: box-shadow var(--ct-motion-duration-fast) var(--ct-motion-easing-standard);
}
.st-cabecalho.is-rolado { box-shadow: var(--ct-shadow-3); }
.st-cabecalho__barra {
  position: relative;
  display: flex; align-items: center; gap: var(--ct-space-6);
  min-height: var(--ct-space-20);
}

/* A marca: a ALTURA é o que se controla, a largura segue a proporção. */
.st-marca { display: inline-flex; align-items: center; margin-inline-end: auto; border-radius: var(--ct-radius-xs); }
.st-marca img { block-size: var(--ct-space-10); inline-size: auto; display: block; }

.st-nav { display: flex; align-items: center; gap: var(--ct-space-8); }
.st-nav__lista { display: flex; align-items: center; gap: var(--ct-space-6); list-style: none; margin: 0; padding: 0; }
.st-nav__lista a {
  display: inline-flex; align-items: center; gap: var(--ct-space-1);
  color: var(--ct-text-secondary); text-decoration: none;
  padding-block: var(--ct-space-2);
  border-block-end: var(--ct-border-width-thick) solid transparent;
  transition: var(--ct-transition-colors);
}
.st-nav__lista a:hover { color: var(--ct-text-primary); }
.st-nav__lista a[aria-current="page"] { color: var(--ct-text-primary); border-block-end-color: var(--ct-border-accent); }
/* O ícone de link externo é informação: diz que o clique LEVA EMBORA. */
.st-nav__lista .ct-icon { inline-size: var(--ct-size-icon-sm); block-size: var(--ct-size-icon-sm); color: var(--ct-text-tertiary); }

.st-nav-toggle { display: none; }
.st-nav-toggle__fechar { display: none; }
.st-nav-toggle[aria-expanded="true"] .st-nav-toggle__abrir { display: none; }
.st-nav-toggle[aria-expanded="true"] .st-nav-toggle__fechar { display: block; }

@media (width < 1024px) {
  .st-nav-toggle { display: inline-grid; }
  .st-nav {
    position: absolute; inset-inline: 0; inset-block-start: 100%;
    flex-direction: column; align-items: stretch; gap: var(--ct-space-5);
    padding: var(--ct-space-4) var(--ct-container-padding) var(--ct-space-8);
    background: var(--ct-bg-canvas);
    border-block-end: var(--ct-border-width-hairline) solid var(--ct-border-subtle);
    box-shadow: var(--ct-shadow-3);
    opacity: 0; visibility: hidden;
    transform: translateY(calc(-1 * var(--ct-motion-distance-md)));
    transition: var(--ct-transition-exit), visibility 0s linear var(--ct-motion-duration-fast);
  }
  .st-nav.is-aberto { opacity: 1; visibility: visible; transform: none; transition: var(--ct-transition-enter), visibility 0s; }
  .st-nav__lista { flex-direction: column; align-items: stretch; gap: 0; }
  .st-nav__lista a {
    display: flex; justify-content: space-between;
    padding-block: var(--ct-space-4);
    font-size: var(--ct-font-size-md);
    border-block-end: var(--ct-border-width-hairline) solid var(--ct-border-subtle);
  }
  .st-nav__lista a[aria-current="page"] { border-block-end-color: var(--ct-border-accent); }
  .st-nav__cta { align-self: flex-start; }
}

/* ─────────────────────────────────────────────────────────────── seções ── */

/* `--inversa` troca o TEMA (data-theme="dark" no markup) e pinta uma vez.
   Todo filho, inclusive `.ct-btn` e `.ct-link`, vira sozinho. */
.st-secao--inversa { background: var(--ct-bg-canvas); color: var(--ct-text-primary); }
.st-secao--sunken { background: var(--ct-bg-surface-sunken); }

.st-secao__cabecalho { max-width: 40rem; }
.st-secao__cabecalho .ct-divider--accent { margin-block: var(--ct-space-6); }
.st-secao__cabecalho .st-lead + .st-lead { margin-block-start: var(--ct-space-4); }

/* Kicker: a linha curta antes do texto é o gesto editorial que numera a seção. */
.st-kicker {
  display: flex; align-items: center; gap: var(--ct-space-3);
  color: var(--ct-text-tertiary);
  margin-block-end: var(--ct-space-5);
}
.st-kicker::before {
  content: ""; flex: none;
  inline-size: var(--ct-space-6); block-size: var(--ct-border-width-thick);
  background: currentColor;
}
.st-hero .st-kicker { color: var(--ct-text-accent); }

.st-lead { color: var(--ct-text-secondary); max-width: 62ch; }
.st-lead + .st-lead { margin-block-start: var(--ct-space-4); }
.st-lead strong { color: var(--ct-text-primary); font-weight: var(--ct-font-weight-semibold); }

.st-subtitulo { color: var(--ct-text-tertiary); margin-block-end: var(--ct-space-6); }

/* Pilha vertical com ritmo — substitui dezenas de `margin-top` avulsos. */
.st-pilha > * + * { margin-block-start: var(--ct-space-6); }
.st-pilha--solta > * + * { margin-block-start: var(--ct-space-12); }

.st-duas-colunas { display: grid; gap: var(--ct-space-10); align-items: start; }

.st-acoes {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--ct-space-4) var(--ct-space-8);
  margin-block-start: var(--ct-space-10);
}
.st-acoes__link { color: var(--ct-text-primary); }

/* Listas com marca: o traço curto laranja é o mesmo da régua de seção, em escala. */
.st-card__lista, .st-lista-marcada { list-style: none; margin: var(--ct-space-6) 0 0; padding: 0; color: var(--ct-text-secondary); }
.st-card__lista li, .st-lista-marcada li { position: relative; padding-inline-start: var(--ct-space-5); }
.st-card__lista li + li, .st-lista-marcada li + li { margin-block-start: var(--ct-space-3); }
.st-card__lista li::before, .st-lista-marcada li::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.7em;
  inline-size: var(--ct-space-2); block-size: var(--ct-border-width-thick);
  background: var(--ct-border-accent);
}

/* ───────────────────────────────────────────────────────────────── hero ── */

.st-hero { position: relative; padding-block: var(--ct-space-16); }
.st-hero__grade { display: grid; gap: var(--ct-space-12); align-items: center; }
.st-hero__titulo { max-width: 20ch; }
.st-hero__lead { margin-block-start: var(--ct-space-8); max-width: 54ch; color: var(--ct-text-secondary); }

.st-hero__fatos {
  display: flex; flex-wrap: wrap; gap: var(--ct-space-3) var(--ct-space-6);
  list-style: none; margin: var(--ct-space-12) 0 0; padding: var(--ct-space-5) 0 0;
  border-block-start: var(--ct-border-width-hairline) solid var(--ct-border-default);
  color: var(--ct-text-tertiary);
}
.st-hero__fatos li { display: inline-flex; align-items: center; gap: var(--ct-space-2); }
.st-hero__fatos li::before {
  content: ""; inline-size: var(--ct-space-1); block-size: var(--ct-space-1);
  border-radius: var(--ct-radius-full); background: var(--ct-border-accent);
}

/* Retrato da home: a foto tem fundo marinho-950 e por isso FLUTUA na seção, sem
   moldura. A legenda ancora o rosto ao nome — dado, não decoração. */
.st-hero--home { padding-block-end: 0; overflow: hidden; }
.st-hero--home .st-hero__grade { align-items: end; gap: var(--ct-space-6); }
.st-hero--home .st-hero__texto { padding-block: var(--ct-space-4) var(--ct-space-8); }
.st-hero__retrato {
  position: relative; margin: 0; justify-self: center; align-self: end;
  inline-size: 100%; max-inline-size: 24rem;
}
.st-hero__retrato img { display: block; inline-size: 100%; block-size: auto; }
.st-hero__legenda {
  position: absolute; inset-inline-start: 0; inset-block-end: var(--ct-space-10);
  display: flex; flex-direction: column; gap: var(--ct-space-1);
  max-inline-size: 18rem;
  padding: var(--ct-space-4) var(--ct-space-5);
  background: var(--ct-bg-surface-raised); color: var(--ct-text-secondary);
  border-inline-start: var(--ct-border-width-accent) solid var(--ct-border-accent);
  box-shadow: var(--ct-shadow-3);
}
.st-hero__legenda .ct-text-overline { color: var(--ct-text-primary); }

.st-hero--interna { padding-block: var(--ct-space-20); }

/* A largura da coluna de texto e a restricao dura do hero: "Comece a gerar valor."
   e uma linha so, e no display-lg do DS ela pede ~598px. A coluna do retrato fica com
   o resto — por isso a razao 1.22/1 e a goteira estreita, e nao um 50/50 qualquer. */
@media (width >= 768px) {
  .st-hero__retrato { max-inline-size: 28rem; }
}

@media (width >= 1024px) {
  .st-hero--home { padding-block-start: var(--ct-space-8); }
  .st-hero--home .st-hero__grade { grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr); gap: var(--ct-space-6); }
  /* Com o retrato mais alto que o texto, o texto centraliza: alinhado ao rodape
     ele deixaria um vazio grande e sem motivo acima do kicker. */
  .st-hero--home .st-hero__texto { align-self: center; padding-block: var(--ct-space-8) var(--ct-space-12); }
  /* O PNG e recortado (fundo transparente), entao o retrato pode sangrar para fora da
     coluna sem mostrar emenda — e o rosto cresce sem roubar largura do texto. */
  .st-hero__retrato {
    max-inline-size: none; justify-self: end;
    inline-size: calc(100% + var(--ct-space-12));
    margin-inline-end: calc(-1 * var(--ct-space-12));
  }
  .st-hero__legenda { transform: translateX(calc(-1 * var(--ct-space-12))); }
  .st-hero--interna { padding-block: var(--ct-space-24); }
  .st-hero__grade--interna { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--ct-space-20); }
  .st-duas-colunas { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--ct-space-20); }
}

/* ───────────────────────────────────────────────────────── números e prova ── */

.st-prova__marcas {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--ct-space-4) var(--ct-space-12);
  list-style: none; margin: 0; padding: 0;
}
/* Wordmark em TEXTO: não há arquivo de logo autorizado. Quando vier, o <li> vira <img>. */
.st-marca-cliente { color: var(--ct-text-tertiary); letter-spacing: var(--ct-font-tracking-wide); }

.st-numeros {
  display: grid; gap: var(--ct-space-8);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.st-numero {
  display: flex; flex-direction: column-reverse; gap: var(--ct-space-3);
  padding-block-start: var(--ct-space-5);
  border-block-start: var(--ct-border-width-thick) solid var(--ct-border-strong);
}
.st-numero__valor { color: var(--ct-text-primary); font-size: var(--ct-font-size-8xl); white-space: nowrap; }
.st-numero__rotulo { color: var(--ct-text-secondary); max-width: 28ch; }
.st-numero__unidade {
  font-size: 0.4em; color: var(--ct-text-accent);
  letter-spacing: var(--ct-font-tracking-wide); text-transform: uppercase;
  font-weight: var(--ct-font-weight-semibold);
  margin-inline: var(--ct-space-1);
}

/* ─────────────────────────────────────────────────────────────── cards ── */

.st-cards { display: grid; gap: var(--ct-space-6); }
.st-cards--3 { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
@media (width >= 1024px) { .st-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ct-space-8); } }

/* Sem sombra: a régua de acento no topo marca o começo, como o DS documenta. */
.st-card {
  position: relative; display: flex; flex-direction: column;
  border-block-start: var(--ct-border-width-accent) solid var(--ct-border-accent);
  padding-block-start: var(--ct-space-6);
}
.st-card--painel {
  padding: var(--ct-space-8);
  background: var(--ct-bg-surface);
  border: var(--ct-border-width-hairline) solid var(--ct-border-subtle);
  border-block-start: var(--ct-border-width-accent) solid var(--ct-border-accent);
  border-radius: var(--ct-radius-card);
}
/* Quem vira o tema TEM de repintar a cor, como `.st-secao--inversa` faz. A heranca
   passa a cor JA COMPUTADA do pai, nao a referencia var() — entao um filho dentro de
   `data-theme="dark"` continua com o marinho da secao clara e some no proprio fundo.
   Era o caso do `.st-card--destaque` da home: titulo e CTA a 1.00:1 de contraste. */
.st-card[data-theme] { color: var(--ct-text-primary); }
.st-card--painel[data-theme] {
  background: var(--ct-bg-canvas);
  border-color: var(--ct-border-subtle);
  border-block-start-color: var(--ct-border-accent);
}

.st-card__icone {
  inline-size: var(--ct-size-icon-xl); block-size: var(--ct-size-icon-xl);
  color: var(--ct-text-accent); margin-block-end: var(--ct-space-6);
}
.st-card__rotulo { color: var(--ct-text-tertiary); margin-block-end: var(--ct-space-3); }
.st-card__titulo { margin-block-end: var(--ct-space-3); }
.st-card > p:not(.st-card__rotulo, .st-card__acao) { color: var(--ct-text-secondary); }
.st-card__acao { margin-block-start: auto; padding-block-start: var(--ct-space-8); }
.st-card__destino { display: block; margin-block-start: var(--ct-space-3); color: var(--ct-text-tertiary); word-break: break-word; }
.st-externo .ct-icon { inline-size: var(--ct-size-icon-sm); block-size: var(--ct-size-icon-sm); }

/* ────────────────────────────────────────────── entregáveis e sequências ── */

/* A quantidade é o dado, então ela ganha a coluna. */
.st-entregaveis { list-style: none; margin: 0; padding: 0; }
.st-entregaveis li {
  display: grid; grid-template-columns: 3.5rem 1fr; gap: var(--ct-space-4); align-items: baseline;
  padding-block: var(--ct-space-4);
  border-block-end: var(--ct-border-width-hairline) solid var(--ct-border-default);
  color: var(--ct-text-secondary);
}
.st-entregaveis li:first-child { border-block-start: var(--ct-border-width-hairline) solid var(--ct-border-default); }
.st-entregavel__qtd {
  font-family: var(--ct-font-family-display); font-weight: var(--ct-font-weight-bold);
  font-size: var(--ct-font-size-3xl); line-height: var(--ct-font-line-height-tight);
  color: var(--ct-text-accent); font-variant-numeric: tabular-nums;
}

/* Trilho de processo: numeração só onde o conteúdo é mesmo uma sequência. */
.st-pilares {
  list-style: none; margin: 0; padding: 0 0 0 var(--ct-space-6);
  border-inline-start: var(--ct-border-width-thick) solid var(--ct-border-default);
}
.st-pilar { display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--ct-space-4); padding-block: var(--ct-space-4); }
.st-pilar + .st-pilar { border-block-start: var(--ct-border-width-hairline) solid var(--ct-border-subtle); }
.st-pilar__num {
  font-family: var(--ct-font-family-display); font-weight: var(--ct-font-weight-bold);
  font-size: var(--ct-font-size-xl); line-height: var(--ct-font-line-height-snug);
  color: var(--ct-text-accent); font-variant-numeric: tabular-nums;
}
.st-pilar p { color: var(--ct-text-secondary); margin-block-start: var(--ct-space-1); }

/* Passos numerados (aplicação): o quadrado vazado é marcador, não pílula. */
.st-passos { list-style: none; margin: var(--ct-space-8) 0 0; padding: 0; display: grid; gap: var(--ct-space-4); }
.st-passo { display: grid; grid-template-columns: var(--ct-space-10) 1fr; gap: var(--ct-space-4); align-items: start; color: var(--ct-text-secondary); }
.st-passo__num {
  display: grid; place-items: center;
  inline-size: var(--ct-space-10); block-size: var(--ct-space-10);
  border: var(--ct-border-width-thick) solid var(--ct-border-accent);
  border-radius: var(--ct-radius-control);
  color: var(--ct-text-accent);
  font-family: var(--ct-font-family-display); font-weight: var(--ct-font-weight-bold);
  font-size: var(--ct-font-size-lg);
}

/* ──────────────────────────────────────────────────────────── contraste ── */

.st-contraste { display: grid; gap: var(--ct-space-10); grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.st-contraste__col { padding-inline-start: var(--ct-space-6); }
.st-contraste__col--sim { border-inline-start: var(--ct-border-width-accent) solid var(--ct-border-accent); }
.st-contraste__col--nao { border-inline-start: var(--ct-border-width-accent) solid var(--ct-border-strong); }
.st-contraste h3 { margin-block-end: var(--ct-space-5); }
.st-contraste ul { list-style: none; margin: 0; padding: 0; color: var(--ct-text-secondary); }
.st-contraste li { padding-block: var(--ct-space-3); border-block-end: var(--ct-border-width-hairline) solid var(--ct-border-default); }
.st-contraste li:last-child { border-block-end: 0; }

/* ───────────────────────────────────────────────────────────── citação ── */

.st-citacao {
  margin: 0; padding: var(--ct-space-8);
  background: var(--ct-bg-surface);
  border-radius: var(--ct-radius-card);
  border-inline-start: var(--ct-border-width-accent) solid var(--ct-border-accent);
}
.st-citacao__texto {
  margin: 0;
  font-family: var(--ct-font-family-display); font-weight: var(--ct-font-weight-regular);
  font-size: var(--ct-font-size-3xl); line-height: var(--ct-font-line-height-snug);
  color: var(--ct-text-primary);
}
.st-citacao__texto::before { content: "“ "; color: var(--ct-text-accent); font-weight: var(--ct-font-weight-bold); }
.st-citacao__autor {
  display: flex; flex-direction: column; gap: var(--ct-space-1);
  margin-block-start: var(--ct-space-6); padding-block-start: var(--ct-space-4);
  border-block-start: var(--ct-border-width-hairline) solid var(--ct-border-default);
  color: var(--ct-text-tertiary);
}
.st-citacao__autor .ct-text-overline { color: var(--ct-text-primary); }

/* ────────────────────────────────────────────────────────────── esquemas ── */

/* Esquemas desenhados com os tokens — nunca print de produto. `currentColor` e
   opacidade do DS; nenhum hex dentro do SVG. */
.st-esquema { margin: 0; color: var(--ct-text-accent); }
.st-esquema svg { display: block; inline-size: 100%; block-size: auto; }
.st-esquema__grade { color: var(--ct-text-primary); opacity: var(--ct-opacity-16); }
.st-esquema__faixas rect { fill: currentColor; }
.st-esquema__faixas rect:nth-child(1) { opacity: 1; }
.st-esquema__faixas rect:nth-child(2) { opacity: 0.8; }
.st-esquema__faixas rect:nth-child(3) { opacity: 0.62; }
.st-esquema__faixas rect:nth-child(4) { opacity: 0.46; }
.st-esquema__faixas rect:nth-child(5) { opacity: 0.32; }
.st-esquema__faixas rect:nth-child(6) { opacity: 0.24; }
/* `__rotulos` e `__legenda` morreram com o funil em SVG do topo — o esquema
   novo é HTML e usa texto de verdade. `__linha` continua viva no card do
   indicador, que é o único SVG do site com traço. */
.st-esquema__linha { color: var(--ct-text-primary); }
.st-esquema__linha polyline { stroke: currentColor; }

/* ──────────────────────────────────────────────────────────────── funil ──

   O esquema-argumento da consultoria. Três decisões, e o porquê de cada uma:

   1. ALINHADO À ESQUERDA, não centralizado. O funil centralizado clássico pede
      que o olho compare centros — e o olho não sabe fazer isso. Com origem
      comum, a diferença de comprimento é lida direto, sem aritmética.

   2. TRILHA CHEIA ATRÁS. Cada faixa desenha o que ENTROU (a trilha) e o que
      SEGUIU (o preenchido). O vazio entre os dois é a perda, que é a única
      coisa que esta página precisa que o leitor veja. Sem a trilha, a perda
      é uma inferência; com ela, é uma área.

   3. UMA COR SÓ. Comprimento é a variável; se a cor também variasse, duas
      codificações disputariam o mesmo dado. A rampa de opacidade da versão
      anterior ainda por cima apagava as etapas finais — justo as decisivas.

   A queda mora ENTRE as faixas porque é ali que ela acontece: é a transição
   que perde, não a etapa. */

.st-funil { margin: 0; }
.st-funil__quadro {
  padding: var(--ct-space-6);
  background: var(--ct-bg-surface);
  border: var(--ct-border-width-hairline) solid var(--ct-border-subtle);
  border-radius: var(--ct-radius-card);
}

.st-funil__cabecalho {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: var(--ct-space-1) var(--ct-space-4);
  padding-block-end: var(--ct-space-3);
  margin-block-end: var(--ct-space-5);
  border-block-end: var(--ct-border-width-hairline) solid var(--ct-border-subtle);
}
.st-funil__titulo { margin: 0; color: var(--ct-text-primary); }
.st-funil__unidade { margin: 0; color: var(--ct-text-tertiary); }

/* Hierarquia dentro do quadro, do mais forte ao mais fraco: nome da etapa,
   queda, cabeçalho. `.ct-text-data` do DS NÃO serve aqui — ele é o papel do
   número gigante de hero (48px) e deixaria o percentual gritando mais alto que
   a etapa que ele explica. Aqui o papel é outro, então o papel é escrito à mão
   com os mesmos tokens. */
.st-funil__etapa { display: grid; gap: var(--ct-space-2); }
.st-funil__etapa + .st-funil__etapa { margin-block-start: var(--ct-space-5); }
.st-funil__nome {
  margin: 0;
  font-family: var(--ct-font-family-display);
  font-weight: var(--ct-font-weight-bold);
  font-size: var(--ct-font-size-md);
  line-height: var(--ct-font-line-height-tight);
  letter-spacing: var(--ct-font-tracking-wide);
  text-transform: uppercase;
  color: var(--ct-text-primary);
}

/* A trilha é o volume que chegou na etapa anterior. `color-mix` sobre os tokens
   em vez de um navy fixo: no tema claro ela escurece e no escuro ela clareia
   sozinha, sem uma segunda regra.

   OS 12% SÃO TETO, NÃO GOSTO. A trilha é fundo de texto: clarear além disso
   derruba "MAIOR PERDA" (laranja, 12px) abaixo de 4.5:1. Medido no tema escuro —
   12%: trilha/quadro 1.37, faixa/trilha 3.96, valor 6.10, marca 4.65. Aos 14% a
   marca cai para 4.36 e reprova. Quem quiser a trilha mais visível sobe o TAMANHO
   da marca acima de 24px (aí vale 3:1), não a mistura. */
.st-funil__trilha {
  display: flex; align-items: center;
  block-size: var(--ct-space-8);
  border-radius: var(--ct-radius-xs);
  background: color-mix(in srgb, var(--ct-text-primary) 12%, var(--ct-bg-surface));
  overflow: hidden;
}
.st-funil__resto {
  flex: none; block-size: 100%;
  inline-size: var(--_resto, 100%);
  border-radius: inherit;
  background: var(--ct-bg-accent);
}

/* O percentual mora DENTRO do vazio que ele mede. Fora da faixa ele flutuaria
   à direita sem se ligar a nada; aqui o número e a área que ele descreve são a
   mesma coisa na tela, e a linha inteira se lê sem legenda.

   `flex: 1` e não `position: absolute`: o rótulo ocupa exatamente a sobra, e
   `min-inline-size: 0` deixa ele encolher em vez de esticar a faixa quando a
   coluna aperta. */
.st-funil__queda {
  flex: 1 1 auto; min-inline-size: 0;
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--ct-space-3);
  padding-inline: var(--ct-space-3);
  color: var(--ct-text-tertiary);
  white-space: nowrap;
}
.st-funil__queda--maior { color: var(--ct-text-accent); }
.st-funil__valor {
  font-family: var(--ct-font-family-display);
  font-weight: var(--ct-font-weight-bold);
  font-size: var(--ct-font-size-xl);
  line-height: var(--ct-font-line-height-tight);
  letter-spacing: var(--ct-font-tracking-tight);
  font-variant-numeric: tabular-nums lining-nums;
}
.st-funil__marca {
  font-family: var(--ct-font-family-display);
  font-weight: var(--ct-font-weight-semibold);
  font-size: var(--ct-font-size-xs);
  letter-spacing: var(--ct-font-tracking-widest);
  text-transform: uppercase;
  color: inherit;
}

/* A legenda acompanha a largura do quadro, como legenda de figura — com um
   `max-inline-size` menor ela quebrava em quatro linhas curtas e parecia sobra. */
.st-funil__legenda {
  display: block; margin-block-start: var(--ct-space-4);
  color: var(--ct-text-tertiary);
}

.st-esquema--card {
  margin-block-end: var(--ct-space-6); padding: var(--ct-space-3);
  background: var(--ct-bg-surface-subtle);
  border: var(--ct-border-width-hairline) solid var(--ct-border-subtle);
  border-radius: var(--ct-radius-md);
}

/* A miniatura do funil segue a regra do esquema grande: a rampa de opacidade
   vale para as OUTRAS duas (lá ela desenha linhas de documento e blocos de
   painel, onde não há dado por trás). Aqui haveria — então comprimento é a
   única variável, e a trilha atrás carrega a perda. */
.st-esquema__trilhas rect { fill: color-mix(in srgb, var(--ct-text-primary) 10%, transparent); }
.st-esquema--funil .st-esquema__faixas rect { opacity: 1; }

/* ────────────────────────────────────────────────────────────── fecho ── */

.st-fecho__grade { display: grid; gap: var(--ct-space-12); align-items: center; }
.st-fecho .ct-text-heading-xl { max-width: 18ch; }
.st-fecho .st-lead { margin-block-start: var(--ct-space-6); }
.st-fecho__fatos {
  list-style: none; margin: 0; padding: 0;
  border-block-start: var(--ct-border-width-hairline) solid var(--ct-border-default);
}
/* No telefone o dado e a glosa empilham: lado a lado, "1 leitura" (nowrap, 6xl)
   comia a coluna e sobravam ~10 caracteres por linha para a explicacao. */
.st-fecho__fatos li {
  display: grid; gap: var(--ct-space-2);
  padding-block: var(--ct-space-5);
  border-block-end: var(--ct-border-width-hairline) solid var(--ct-border-default);
  color: var(--ct-text-secondary);
}
@media (width >= 640px) {
  .st-fecho__fatos li {
    grid-template-columns: minmax(8rem, auto) 1fr; gap: var(--ct-space-6); align-items: baseline;
  }
}
.st-fecho__dado { color: var(--ct-text-primary); font-size: var(--ct-font-size-6xl); white-space: nowrap; }
@media (width >= 1024px) { .st-fecho__grade { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--ct-space-20); } }

/* ─────────────────────────────────────────────────────────── formulário ── */

.st-form { display: grid; gap: var(--ct-space-6); }
.st-form--painel {
  padding: var(--ct-space-8);
  background: var(--ct-bg-surface-raised);
  border: var(--ct-border-width-hairline) solid var(--ct-border-subtle);
  border-radius: var(--ct-radius-card);
}
.st-form__linha { display: grid; gap: var(--ct-space-6); }
@media (width >= 640px) { .st-form__linha { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.st-form__titulo {
  color: var(--ct-text-tertiary);
  padding-block-end: var(--ct-space-4);
  border-block-end: var(--ct-border-width-hairline) solid var(--ct-border-default);
}
.st-form__aviso { color: var(--ct-text-tertiary); }
.st-form__aviso.is-sucesso { color: var(--ct-feedback-success-fg); }
.st-form__aviso.is-erro { color: var(--ct-feedback-error-fg); }
/* `.ct-field__error` é display:flex no DS; o atributo hidden precisa vencer. */
.st-form [hidden] { display: none !important; }

/* ─────────────────────────────────────────────────────────────── rodapé ── */

.st-rodape {
  background: var(--ct-bg-canvas); color: var(--ct-text-primary);
  padding-block: var(--ct-space-16) var(--ct-space-8);
  border-block-start: var(--ct-border-width-hairline) solid var(--ct-border-subtle);
}
.st-rodape__grade { display: grid; gap: var(--ct-space-10); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
@media (width >= 1024px) { .st-rodape__grade { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--ct-space-12); } }
.st-rodape__marca img { block-size: var(--ct-space-12); inline-size: auto; display: block; margin-block-end: var(--ct-space-5); }
.st-rodape__marca p { color: var(--ct-text-secondary); max-width: 28ch; margin: 0; }
.st-rodape h2 { margin: 0 0 var(--ct-space-4); color: var(--ct-text-tertiary); }
.st-rodape ul { list-style: none; margin: 0; padding: 0; }
.st-rodape li + li { margin-block-start: var(--ct-space-2); }
.st-rodape a:not(.ct-btn) { color: var(--ct-text-secondary); text-decoration: none; transition: var(--ct-transition-colors); }
.st-rodape a:not(.ct-btn):hover { color: var(--ct-text-primary); text-decoration: underline; text-underline-offset: 0.2em; }
.st-rodape__nota { color: var(--ct-text-secondary); margin: 0 0 var(--ct-space-4); max-width: 26ch; }
.st-rodape__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--ct-space-2) var(--ct-space-6);
  margin-block-start: var(--ct-space-12); padding-block-start: var(--ct-space-6);
  border-block-start: var(--ct-border-width-hairline) solid var(--ct-border-subtle);
  color: var(--ct-text-tertiary);
}

/* ============================================================================
   CAMADA DE MOVIMENTO
   ----------------------------------------------------------------------------
   Vai além do `06-motion/` do DS a pedido do cliente. Três regras sustentam o
   conjunto, para não virar saco de efeitos:

     1 · PESO, NÃO SALTO. Nada quica. Deslocamento máximo de 0.5rem, sempre em
         `standard` ou `emphasized`. É consultoria industrial, não portfólio.
     2 · O LARANJA ACENDE. Hover e revelação acendem o acento — brilho e régua —
         em vez de trocar a cor do texto. O acento já é o dado da marca.
     3 · O SCROLL CONDUZ. Parallax, progresso e contador derivam da rolagem ou
         da revelação. Nenhum loop autônomo: nada se move sozinho na tela.

   TUDO aqui está sob `prefers-reduced-motion: no-preference`. Sob `reduce` a
   página cai no estado final de cada gesto — o `base.css` do DS já zera duração,
   e o `site.js` nem instala os listeners.

   As cores com alfa saem de `color-mix()` sobre token; `rgba()` cru é proibido
   pelo `conferir-tokens.mjs` e é isso que o mix substitui.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

  /* ── 1 · progresso de leitura ──────────────────────────────────────────────
     Uma régua de acento sob o cabeçalho, escalada pela fração já lida. Substitui
     a sombra como sinal de "você rolou" por algo que também diz QUANTO falta. */
  .st-cabecalho::after {
    content: ""; position: absolute; inset-inline: 0; inset-block-end: 0;
    block-size: var(--ct-border-width-thick);
    background: var(--ct-border-accent);
    transform: scaleX(var(--_progresso, 0)); transform-origin: 0 50%;
    opacity: 0;
    transition: opacity var(--ct-motion-duration-base) var(--ct-motion-easing-standard);
  }
  .st-cabecalho.is-rolado::after { opacity: 1; }

  /* ── 2 · hero: brilho que segue o ponteiro ─────────────────────────────────
     O PNG do retrato é opaco, então o brilho só aparece no marinho vazio ao
     redor dele — um campo quente que reage ao cursor, não um holofote no rosto.
     `z-index: -1` pinta depois do fundo da seção e antes do conteúdo. */
  /* `isolation: isolate` nao e enfeite: sem contexto de empilhamento proprio, o
     filho com `z-index: -1` sobe ate a raiz e some ATRAS do fundo da secao. */
  .st-hero--home { isolation: isolate; }
  .st-hero--home::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(
      32rem 32rem at var(--_ponteiro-x, 72%) var(--_ponteiro-y, 38%),
      color-mix(in srgb, var(--ct-color-orange-500) 18%, transparent) 0%,
      transparent 68%);
    opacity: 0;
    transition: opacity var(--ct-motion-duration-slow) var(--ct-motion-easing-standard);
  }
  .st-hero--home.is-apontado::before { opacity: 1; }

  /* ── 3 · hero: parallax ────────────────────────────────────────────────────
     Só no desktop, e só duas camadas: o retrato sobe mais devagar que o scroll,
     a legenda contra-move. Amplitude curta de propósito — o rosto não pode
     descolar da borda da seção, que é o que faz a foto "flutuar". */
  @media (width >= 1024px) {
    /* `will-change` só onde o parallax de fato roda: promover camada no telefone
       custa memória para nada, já que o JS nem escreve as variáveis lá. */
    .st-hero__retrato img, .st-hero__legenda { will-change: transform; }
    .st-hero__retrato img { transform: translate3d(0, var(--_parallax-foto, 0rem), 0); }
    .st-hero__legenda {
      transform:
        translateX(calc(-1 * var(--ct-space-12)))
        translateY(var(--_parallax-legenda, 0rem));
    }
  }

  /* ── 4 · título do hero: as linhas sobem de trás da máscara ────────────────
     O gesto de abertura. Cada linha é um bloco com `overflow: hidden`; o filho
     começa fora e sobe. Duas linhas, escalonadas — não é letra por letra. */
  .js-revela .st-linha { display: inline-block; overflow: hidden; vertical-align: bottom; }
  .js-revela .st-linha > span {
    display: inline-block; transform: translateY(105%);
    transition: transform var(--ct-motion-duration-slower) var(--ct-motion-easing-emphasized);
  }
  .js-revela .st-linha:nth-of-type(2) > span {
    transition-delay: var(--ct-motion-duration-fast);
  }
  .js-revela .is-visivel .st-linha > span { transform: translateY(0); }

  /* ── 5 · botões: elevação, brilho e varredura ──────────────────────────────
     Sempre com `.st-*` no seletor: posicionar o componente do DS é permitido,
     redefini-lo não. A varredura é `background-position`, não pseudo-elemento —
     `::before` e `::after` do `.ct-btn` já são do DS (alvo de toque e spinner). */
  .st-acoes .ct-btn,
  .st-card__acao .ct-btn,
  .st-nav__cta,
  .st-rodape .ct-btn,
  .st-fecho .ct-btn {
    --_varredura: linear-gradient(
      105deg,
      transparent 42%,
      color-mix(in srgb, var(--ct-color-sand-50) 26%, transparent) 50%,
      transparent 58%);
    background-image: var(--_varredura);
    background-size: 280% 100%;
    background-position: 140% 0;
    transition:
      transform var(--ct-motion-duration-base) var(--ct-motion-easing-standard),
      box-shadow var(--ct-motion-duration-base) var(--ct-motion-easing-standard),
      background-position var(--ct-motion-duration-slow) var(--ct-motion-easing-standard),
      var(--ct-transition-colors);
  }
  .st-acoes .ct-btn:hover,
  .st-card__acao .ct-btn:hover,
  .st-nav__cta:hover,
  .st-rodape .ct-btn:hover,
  .st-fecho .ct-btn:hover {
    background-image: var(--_varredura);
    background-position: -40% 0;
    transform: translateY(-0.125rem);
    box-shadow:
      0 0.5rem 1.5rem -0.375rem color-mix(in srgb, var(--ct-color-orange-500) 55%, transparent),
      0 0.125rem 0.375rem -0.125rem color-mix(in srgb, var(--ct-color-navy-950) 30%, transparent);
  }
  .st-acoes .ct-btn:active,
  .st-card__acao .ct-btn:active,
  .st-nav__cta:active,
  .st-rodape .ct-btn:active,
  .st-fecho .ct-btn:active { transform: translateY(0); }

  /* O secundário/terciário não tem fundo laranja: o brilho vira o contorno. */
  .st-acoes .ct-btn--tertiary:hover,
  .st-fecho .ct-btn--tertiary:hover,
  .st-acoes .ct-btn--secondary:hover,
  .st-fecho .ct-btn--secondary:hover {
    box-shadow: 0 0.5rem 1.5rem -0.5rem color-mix(in srgb, var(--ct-color-navy-950) 38%, transparent);
  }

  /* ── 6 · cards: sobem e a régua de acento acende ───────────────────────────
     O brilho é a própria régua do topo, desfocada e duplicada. A régua já é o
     gesto do DS para "aqui começa"; o hover só a acende. */
  .st-cards .st-card {
    transition:
      transform var(--ct-motion-duration-base) var(--ct-motion-easing-standard),
      box-shadow var(--ct-motion-duration-base) var(--ct-motion-easing-standard);
  }
  .st-cards .st-card::after {
    content: ""; position: absolute; pointer-events: none;
    inset-inline: 0; inset-block-start: calc(-1 * var(--ct-border-width-accent));
    block-size: var(--ct-border-width-accent);
    background: var(--ct-border-accent);
    filter: blur(0.3rem);
    opacity: 0;
    transition: opacity var(--ct-motion-duration-base) var(--ct-motion-easing-standard);
  }
  .st-cards .st-card:hover { transform: translateY(-0.375rem); }
  .st-cards .st-card:hover::after { opacity: 1; }
  .st-cards .st-card--painel:hover {
    box-shadow: 0 1rem 2.5rem -0.75rem color-mix(in srgb, var(--ct-color-navy-950) 32%, transparent);
  }
  .st-cards .st-card__icone {
    transition: transform var(--ct-motion-duration-moderate) var(--ct-motion-easing-emphasized);
  }
  .st-cards .st-card:hover .st-card__icone { transform: translateY(-0.125rem) scale(1.08); }

  /* ── 7 · navegação: o sublinhado varre da esquerda ─────────────────────────
     O `border-block-end` transparente do link já reserva o espaço; o `::after`
     só desenha por cima, então nada pula de altura no hover. */
  .st-nav__lista a::after {
    content: ""; position: absolute; inset-inline: 0;
    inset-block-end: calc(-1 * var(--ct-border-width-thick));
    block-size: var(--ct-border-width-thick);
    background: var(--ct-border-accent);
    transform: scaleX(0); transform-origin: 0 50%;
    transition: transform var(--ct-motion-duration-base) var(--ct-motion-easing-standard);
  }
  .st-nav__lista a { position: relative; }
  .st-nav__lista a:hover::after { transform: scaleX(1); }
  .st-nav__lista a[aria-current="page"]::after { transform: scaleX(1); }

  /* A marca do cabeçalho responde ao hover; a do rodapé não é link e fica quieta. */
  .st-marca img { transition: opacity var(--ct-motion-duration-base) var(--ct-motion-easing-standard); }
  .st-marca:hover img { opacity: var(--ct-opacity-muted); }

  /* ── 8 · revelação: as réguas se desenham ──────────────────────────────────
     A régua da seção, o traço do kicker e o topo de cada número entram por
     `scaleX`, depois do texto. É o mesmo gesto do progresso do cabeçalho. */
  .js-revela [data-revela] .st-secao__cabecalho .ct-divider--accent,
  .js-revela .st-secao__cabecalho[data-revela] .ct-divider--accent {
    transform: scaleX(0); transform-origin: 0 50%;
    transition: transform var(--ct-motion-duration-slower) var(--ct-motion-easing-emphasized);
    transition-delay: var(--ct-motion-duration-base);
  }
  .js-revela [data-revela].is-visivel .st-secao__cabecalho .ct-divider--accent,
  .js-revela .st-secao__cabecalho[data-revela].is-visivel .ct-divider--accent {
    transform: scaleX(1);
  }

  .js-revela [data-revela] .st-kicker::before {
    transform: scaleX(0); transform-origin: 0 50%;
    transition: transform var(--ct-motion-duration-slow) var(--ct-motion-easing-emphasized);
  }
  .js-revela [data-revela].is-visivel .st-kicker::before { transform: scaleX(1); }

  /* A régua do número é a PRÓPRIA borda, redesenhada: a borda fica transparente e
     um `::before` da mesma cor cresce no lugar dela. Assim o estado final é
     idêntico ao de quem pede `reduce` — motion acrescenta movimento, não cor. */
  .st-numero { position: relative; }
  .js-revela [data-revela] .st-numero { border-block-start-color: transparent; }
  .js-revela [data-revela] .st-numero::before {
    content: ""; position: absolute; pointer-events: none;
    inset-inline: 0; inset-block-start: calc(-1 * var(--ct-border-width-thick));
    block-size: var(--ct-border-width-thick);
    background: var(--ct-border-strong);
    transform: scaleX(0); transform-origin: 0 50%;
    transition: transform var(--ct-motion-duration-slower) var(--ct-motion-easing-emphasized);
  }
  .js-revela [data-revela].is-visivel .st-numero::before { transform: scaleX(1); }
  .js-revela [data-revela].is-visivel .st-numero:nth-child(2)::before { transition-delay: var(--ct-motion-duration-fast); }
  .js-revela [data-revela].is-visivel .st-numero:nth-child(3)::before { transition-delay: var(--ct-motion-duration-base); }

  /* ── 9 · listas vivas ──────────────────────────────────────────────────────
     Linhas longas de leitura ganham um alvo de hover: a linha do trilho acende
     e o número vira acento forte. Não é clicável — é o olho achando onde está. */
  .st-pilar, .st-entregaveis li {
    transition: background-color var(--ct-motion-duration-fast) var(--ct-motion-easing-standard);
  }
  .st-pilar:hover, .st-entregaveis li:hover {
    background-color: color-mix(in srgb, var(--ct-color-orange-500) 6%, transparent);
  }
  .st-pilar__num, .st-entregavel__qtd {
    transition: transform var(--ct-motion-duration-base) var(--ct-motion-easing-emphasized);
  }
  .st-pilar:hover .st-pilar__num,
  .st-entregaveis li:hover .st-entregavel__qtd { transform: translateX(0.125rem); }

  /* As marcas de cliente entram uma depois da outra: duas, contadas. */
  .js-revela [data-revela] .st-prova__marcas li {
    opacity: 0; transform: translateY(var(--ct-motion-distance-md));
    transition:
      opacity var(--ct-motion-duration-slow) var(--ct-motion-easing-enter),
      transform var(--ct-motion-duration-slow) var(--ct-motion-easing-enter);
  }
  .js-revela [data-revela].is-visivel .st-prova__marcas li { opacity: 1; transform: none; }
  .js-revela [data-revela].is-visivel .st-prova__marcas li:nth-child(2) { transition-delay: var(--ct-motion-duration-fast); }

  /* ── 11 · o funil se desenha ───────────────────────────────────────────────
     O esquema do `consultoria.html` é a única imagem-argumento do site: mostra
     ONDE a operação vaza. Fazê-lo se desenhar é o gesto mais informativo daqui.

     A ordem é a da vida real: a trilha (o que entrou) já está lá, o preenchimento
     (o que seguiu) cresce da esquerda, e o percentual só aterrissa depois que o
     vazio abriu. Ver a perda ACONTECER é o ponto — se o número entrasse junto,
     ele seria um rótulo; entrando depois, ele é uma medida do que sobrou.

     `--_i` numera a etapa no markup (0…4, descendo o funil) e herda até o
     preenchimento e o percentual. Nunca `nth-of-type`: o cabeçalho é `div` como
     as etapas e entraria na contagem, errando tudo por um.

     Se não houver `[data-revela]` na ascendência, NENHUMA destas regras casa e o
     esquema aparece inteiro — a degradação nunca esconde conteúdo. */
  .js-revela [data-revela] .st-funil__resto {
    transform: scaleX(0); transform-origin: 0 50%;
    transition: transform var(--ct-motion-duration-slower) var(--ct-motion-easing-emphasized);
  }
  .js-revela [data-revela].is-visivel .st-funil__resto {
    transform: scaleX(1);
    transition-delay: calc(var(--_i, 0) * var(--ct-motion-duration-fast) / 2);
  }

  .js-revela [data-revela] .st-funil__queda {
    opacity: 0;
    transition: opacity var(--ct-motion-duration-slow) var(--ct-motion-easing-enter);
  }
  .js-revela [data-revela].is-visivel .st-funil__queda {
    opacity: 1;
    transition-delay: calc(
      var(--_i, 0) * var(--ct-motion-duration-fast) / 2 + var(--ct-motion-duration-slow)
    );
  }

  /* Os esquemas dos cards continuam em SVG: silhueta sem texto, sem dado. */
  .js-revela [data-revela] .st-esquema__faixas rect {
    transform-box: fill-box; transform-origin: left center;
    transform: scaleX(0);
    transition: transform var(--ct-motion-duration-slower) var(--ct-motion-easing-emphasized);
  }
  .js-revela [data-revela].is-visivel .st-esquema__faixas rect { transform: scaleX(1); }
  .js-revela [data-revela].is-visivel .st-esquema__faixas rect:nth-child(2) { transition-delay: calc(var(--ct-motion-duration-fast) / 2); }
  .js-revela [data-revela].is-visivel .st-esquema__faixas rect:nth-child(3) { transition-delay: var(--ct-motion-duration-fast); }
  .js-revela [data-revela].is-visivel .st-esquema__faixas rect:nth-child(4) { transition-delay: calc(var(--ct-motion-duration-fast) * 1.5); }
  .js-revela [data-revela].is-visivel .st-esquema__faixas rect:nth-child(5) { transition-delay: calc(var(--ct-motion-duration-fast) * 2); }
  .js-revela [data-revela].is-visivel .st-esquema__faixas rect:nth-child(6) { transition-delay: calc(var(--ct-motion-duration-fast) * 2.5); }

  .js-revela [data-revela] .st-esquema__linha polyline {
    stroke-dasharray: 1; stroke-dashoffset: 1;
    transition: stroke-dashoffset var(--ct-motion-duration-slower) var(--ct-motion-easing-standard);
    transition-delay: calc(var(--ct-motion-duration-fast) * 3);
  }
  .js-revela [data-revela].is-visivel .st-esquema__linha polyline { stroke-dashoffset: 0; }
}

/* ============================================================================
   JORNADA INTERATIVA (proposta comercial, set/2026)
   ----------------------------------------------------------------------------
   Peças compartilhadas pelas páginas. O que é de uma página só mora no
   `paginas/*.css`. Tudo aqui tem um estado estático completo; o movimento que
   depende de rolagem ou ponteiro fica no bloco `no-preference` logo abaixo.
   ========================================================================== */

/* ── faixa que corre com a rolagem ───────────────────────────────────────────
   Duas linhas de texto gigante, em sentidos opostos. `max-content` faz o `%` do
   translate ser a largura do TEXTO, não do container — é o que deixa o
   deslocamento proporcional em qualquer tela. O -18% inicial esconde a ponta. */
.st-faixa {
  overflow: hidden; display: grid; gap: var(--ct-space-1);
  padding-block: var(--ct-space-10);
  background: var(--ct-bg-canvas); color: var(--ct-text-primary);
  border-block: var(--ct-border-width-hairline) solid var(--ct-border-subtle);
}
.st-faixa__linha {
  --_dir: -1;
  inline-size: max-content; margin: 0;
  font-family: var(--ct-font-family-display); font-weight: var(--ct-font-weight-bold);
  font-size: clamp(var(--ct-font-size-5xl), 8vw, var(--ct-font-size-9xl));
  line-height: var(--ct-font-line-height-tight);
  letter-spacing: var(--ct-font-tracking-tight); text-transform: uppercase;
  white-space: nowrap;
  transform: translate3d(calc(-18% + var(--_p, 0) * var(--_dir) * 10%), 0, 0);
}
.st-faixa__linha--vazada {
  --_dir: 1;
  color: transparent;
  -webkit-text-stroke: var(--ct-border-width-hairline) var(--ct-text-accent);
}

/* ── frase que acende ────────────────────────────────────────────────────────
   O script quebra o texto em palavras só quando pode animar; sem isso, a frase
   fica inteira e acesa. A cor apagada é tinta do próprio texto, não cinza. */
.st-palavra { transition: color var(--ct-motion-duration-slow) var(--ct-motion-easing-standard); }
.js-acende .st-palavra { color: color-mix(in srgb, var(--ct-text-primary) 18%, transparent); }
.js-acende .st-palavra.is-acesa { color: var(--ct-text-primary); }
.js-acende .st-palavra--destaque.is-acesa { color: var(--ct-text-accent); }

/* ── detalhe recolhível ──────────────────────────────────────────────────── */
.st-detalhe { border-block: var(--ct-border-width-hairline) solid var(--ct-border-default); }
.st-detalhe__resumo {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ct-space-4);
  padding-block: var(--ct-space-5); cursor: pointer; list-style: none;
  color: var(--ct-text-primary);
}
.st-detalhe__resumo::-webkit-details-marker { display: none; }
.st-detalhe__resumo .ct-icon { color: var(--ct-text-accent); transition: transform var(--ct-motion-duration-base) var(--ct-motion-easing-emphasized); }
.st-detalhe[open] .st-detalhe__resumo .ct-icon { transform: rotate(45deg); }
.st-detalhe__resumo:hover { color: var(--ct-text-accent); }
.st-detalhe__resumo:focus-visible { outline: var(--ct-size-focus-width) solid var(--ct-border-focus); outline-offset: var(--ct-size-focus-offset); }
.st-detalhe .st-entregaveis { margin-block-end: var(--ct-space-6); }

/* ── superfícies do navegador ────────────────────────────────────────────────
   Seleção e rolagem também carregam a marca. */
::selection { background: var(--ct-color-orange-500); color: var(--ct-color-navy-950); }
html { scrollbar-color: var(--ct-color-navy-400) var(--ct-bg-surface-sunken); }

@media (prefers-reduced-motion: no-preference) {

  /* ── 12 · holofote que segue o ponteiro nos painéis ────────────────────────
     Mesmo gesto do hero, em escala de card: um campo quente e baixo sob o
     cursor. Só com ponteiro fino — o script nem escuta no toque. */
  .js-holofote :is(.st-card--painel, .st-fronteira__col, .st-ritual, .st-sintoma) { position: relative; }
  .js-holofote :is(.st-card--painel, .st-fronteira__col, .st-ritual, .st-sintoma)::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(
      18rem circle at var(--_mx, 50%) var(--_my, 0%),
      color-mix(in srgb, var(--ct-color-orange-500) 12%, transparent),
      transparent 70%);
    opacity: 0;
    transition: opacity var(--ct-motion-duration-slow) var(--ct-motion-easing-standard);
  }
  .js-holofote :is(.st-card--painel, .st-fronteira__col, .st-ritual, .st-sintoma):hover::before { opacity: 1; }

  /* ── 13 · parallax leve ────────────────────────────────────────────────────
     `translate` (a propriedade), não `transform`: a revelação já usa
     `transform` no mesmo elemento, e as duas se somam em vez de brigar. */
  [data-parallax] { translate: 0 var(--_py, 0rem); }
}