/* ============================================================
   PUSHFY — PÁGINA DO PUSHAGENT (/pushagent/)
   Só o que é específico desta página. Tudo o que já existia no
   sistema (glass, botões, .infra-grid, .vs-grid, .faq-item,
   .chat, .scores, .cta-band, .facts) vem de components.css,
   sections.css e pages.css e NÃO é redefinido aqui.

   Acento da página: violeta de IA (--accent-3), o mesmo que a
   seção #pushagent usa na home, para a marca do produto ser a
   mesma nos dois lugares.
   ============================================================ */

.pa-page {
  --pa: #8b7bff;
  --pa-soft: rgba(139, 123, 255, 0.14);
  --pa-line: rgba(139, 123, 255, 0.32);
  --cam-regra: #4979ff;
  --cam-ia: #8b7bff;
  --cam-humano: #4fd6a0;
}

/* O eyebrow padrão é azul; nesta página ele é da cor do produto. */
.pa-page .eyebrow {
  color: var(--pa);
  border-color: var(--pa-line);
  background: rgba(139, 123, 255, 0.08);
}

/* Aura de topo: dá profundidade ao herói sem imagem nem canvas. */
.pa-aura {
  position: absolute;
  inset: 0 0 auto 0;
  height: 720px;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(620px 340px at 78% 8%, rgba(139, 123, 255, 0.20), transparent 68%),
    radial-gradient(520px 320px at 12% 0%, rgba(73, 121, 255, 0.14), transparent 66%);
}

/* ---------- Herói em duas colunas ---------- */
.pa-hero { position: relative; z-index: 1; }
.pa-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.pa-hero h1 { max-width: 18ch; }
.pa-hero .lead { max-width: 52ch; }
.pa-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.8rem;
}

/* Nota de reversão de risco: só o que o FAQ desta página documenta. */
.pa-micro {
  margin-top: 1rem;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--ink-dim);
  max-width: 48ch;
}

/* ---------- Demonstração (chat + rastro de decisão) ---------- */
.pa-demo { display: grid; gap: 0.9rem; }
.pa-demo .chat { min-width: 0; }

/* A bolha do atendente humano precisa vencer .msg.bot (0-2-0),
   por isso a regra é escrita com três classes. */
.pa-page .msg.bot.pa-humano {
  background: rgba(79, 214, 160, 0.1);
  border-color: rgba(79, 214, 160, 0.3);
}
/* A barra nasce em width:0 no sections.css; aqui ela ganha o trajeto. */
.pa-page .score-bar i { transition: width 1s var(--ease-out); }

/* Rastro: mostra qual camada resolveu, em fonte mono, como log. */
.pa-trace {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0.85rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.pa-trace b {
  color: var(--ink-soft);
  font-weight: 500;
  margin-right: 0.2rem;
}
.pa-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.04);
  transition: color 0.3s, border-color 0.3s, background 0.3s;
}
.pa-tag.is-on { color: #fff; }
.pa-tag[data-cam="regra"].is-on   { border-color: rgba(73, 121, 255, 0.5);  background: rgba(73, 121, 255, 0.18); }
.pa-tag[data-cam="ia"].is-on      { border-color: var(--pa-line);            background: var(--pa-soft); }
.pa-tag[data-cam="humano"].is-on  { border-color: rgba(79, 214, 160, 0.45); background: rgba(79, 214, 160, 0.14); }

/* ---------- Orquestrador: lista de camadas + painel ---------- */
.pa-orq {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(1.4rem, 3vw, 2.4rem);
  margin-top: 2.8rem;
  align-items: start;
}
.pa-list { display: grid; gap: 0.8rem; }

.pa-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 1.15rem 1.3rem;
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  background: var(--glass);
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out), background 0.3s;
}
.pa-item::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--cam, var(--pa));
  opacity: 0;
  transition: opacity 0.3s;
}
.pa-item:hover { border-color: var(--stroke-strong); transform: translateY(-2px); }
.pa-item[aria-selected="true"] {
  border-color: var(--cam, var(--pa));
  background: var(--glass-strong);
}
.pa-item[aria-selected="true"]::before { opacity: 1; }

.pa-passo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.55rem;
}
.pa-n {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.pa-camada {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.16rem 0.5rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  color: var(--cam, var(--pa));
}
.pa-item h3 {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
}
.pa-item p { font-size: 0.87rem; color: var(--ink-soft); }

/* Painel: exemplo real da camada selecionada. */
.pa-panel { padding: 1.5rem 1.6rem; }
.pa-panel[hidden] { display: none; }
.pa-panel h4 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.7rem;
}
.pa-panel > p { color: var(--ink-soft); font-size: 0.92rem; }
.pa-dialog {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 1.1rem 0 1.2rem;
}
.pa-b {
  max-width: 86%;
  padding: 0.6rem 0.85rem;
  border-radius: 15px;
  font-size: 0.84rem;
  line-height: 1.5;
}
.pa-b-cli {
  align-self: flex-end;
  background: linear-gradient(135deg, rgba(73, 121, 255, 0.4), rgba(73, 121, 255, 0.22));
  border: 1px solid rgba(73, 121, 255, 0.4);
  border-bottom-right-radius: 5px;
  color: var(--ink);
}
.pa-b-bot {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--stroke);
  border-bottom-left-radius: 5px;
  color: var(--ink-soft);
}
.pa-b-hum {
  align-self: flex-start;
  background: rgba(79, 214, 160, 0.1);
  border: 1px solid rgba(79, 214, 160, 0.3);
  border-bottom-left-radius: 5px;
  color: var(--ink-soft);
}
.pa-b-sys {
  align-self: center;
  max-width: 100%;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.03em;
  color: var(--pa);
  background: var(--pa-soft);
  border: 1px dashed var(--pa-line);
  border-radius: 10px;
  padding: 0.35rem 0.7rem;
}
.pa-quem {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--stroke);
  font-size: 0.82rem;
  color: var(--ink-mute);
}
.pa-quem b { color: var(--ink); }

/* ---------- Salvaguarda (jogo responsável) ---------- */
.pa-guard {
  margin-top: 1.4rem;
  padding: 1.2rem 1.4rem;
  border: 1px solid rgba(255, 176, 32, 0.28);
  border-radius: var(--radius);
  background: rgba(255, 176, 32, 0.07);
}
.pa-guard b { display: block; margin-bottom: 0.35rem; color: var(--ink); }
.pa-guard p { font-size: 0.88rem; color: var(--ink-soft); }

/* ---------- Duas colunas de conteúdo com um painel ---------- */
.pa-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.6rem, 4vw, 3.4rem);
  align-items: center;
  margin-top: 2.4rem;
}
.pa-split.is-reverse .pa-split-media { order: -1; }
.pa-checks { display: grid; gap: 0.85rem; margin-top: 1.4rem; }
.pa-checks li {
  position: relative;
  padding-left: 1.8rem;
  font-size: 0.93rem;
  color: var(--ink-soft);
}
.pa-checks li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--pa);
  font-weight: 700;
}
.pa-checks b { color: var(--ink); }

/* ---------- Handoff: linha do tempo ---------- */
.pa-line { display: grid; gap: 0; margin-top: 1.6rem; }
.pa-line li {
  position: relative;
  padding: 0 0 1.4rem 1.9rem;
  border-left: 1px solid var(--stroke);
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.pa-line li:last-child { border-left-color: transparent; padding-bottom: 0; }
.pa-line li::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 0.45rem;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--pa);
  box-shadow: 0 0 0 4px rgba(139, 123, 255, 0.16);
}
.pa-line b { display: block; color: var(--ink); }

/* ---------- Passos numerados ---------- */
.pa-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
  margin-top: 2.6rem;
  counter-reset: passo;
}
.pa-steps li {
  padding: 1.5rem 1.4rem;
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  background: var(--glass);
  counter-increment: passo;
}
.pa-steps li::before {
  content: counter(passo, decimal-leading-zero);
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--pa);
  margin-bottom: 0.6rem;
}
.pa-steps b { display: block; font-family: var(--font-display); margin-bottom: 0.35rem; }
.pa-steps p { font-size: 0.88rem; color: var(--ink-soft); }

/* ---------- Responsivo ---------- */
@media (max-width: 1000px) {
  .pa-hero-grid,
  .pa-orq,
  .pa-split { grid-template-columns: 1fr; }
  .pa-split.is-reverse .pa-split-media { order: 0; }
  .pa-hero h1 { max-width: none; }
  .pa-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .pa-steps { grid-template-columns: 1fr; }
  .pa-hero-actions .btn { flex: 1 1 100%; justify-content: center; }
  .pa-panel { padding: 1.2rem 1.15rem; }
  .pa-b { max-width: 94%; }
}

/* Sem JS os painéis do orquestrador ficam TODOS visíveis, em sequência:
   o atributo hidden é aplicado pelo script no boot, nunca no HTML. Assim
   o conteúdo existe para o leitor e para o crawler mesmo sem JavaScript. */
.pa-panel + .pa-panel { margin-top: 1rem; }
.js .pa-panel + .pa-panel { margin-top: 0; }

/* ============================================================================
   CAMADA ENTERPRISE (15/08/2026)
   Tudo abaixo é acabamento visual e interação. Regras de ouro que valem para
   o bloco inteiro:
   1. Nada aqui pode ser pré-requisito para ler a página. Se o JS não rodar ou
      o usuário pedir menos movimento, o conteúdo continua inteiro e estático.
   2. Só se anima transform, opacity e filter, que o compositor resolve na GPU.
      Nenhuma animação toca width, top, left ou box-shadow em laço.
   3. Nenhum elemento novo é conteúdo: tudo é aria-hidden ou espelha texto que
      já existe em outro lugar da página.
   ============================================================================ */

/* ---------- 1. Aura viva do herói --------------------------------------
   Três orbes que derivam devagar em ciclos de tempo primos entre si, para o
   conjunto nunca repetir o mesmo quadro. Duração longa e deslocamento curto:
   o objetivo é a página parecer viva, não chamar atenção para si. */
.pa-orbes { position: absolute; inset: 0 0 auto 0; height: 760px; overflow: hidden; pointer-events: none; z-index: 0; }
.pa-orbe {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
  will-change: transform;
}
.pa-orbe.o1 { width: 520px; height: 520px; top: -160px; right: -60px;  background: radial-gradient(circle, rgba(139,123,255,0.55), transparent 68%); animation: paDeriva1 23s var(--ease-soft) infinite alternate; }
.pa-orbe.o2 { width: 460px; height: 460px; top:   40px; left:  -120px; background: radial-gradient(circle, rgba(73,121,255,0.45), transparent 68%);  animation: paDeriva2 31s var(--ease-soft) infinite alternate; }
.pa-orbe.o3 { width: 300px; height: 300px; top:  320px; left:   46%;   background: radial-gradient(circle, rgba(79,214,160,0.28), transparent 70%);  animation: paDeriva3 19s var(--ease-soft) infinite alternate; }
@keyframes paDeriva1 { to { transform: translate3d(-90px, 60px, 0) scale(1.15); } }
@keyframes paDeriva2 { to { transform: translate3d(110px, -40px, 0) scale(0.9); } }
@keyframes paDeriva3 { to { transform: translate3d(-60px, -70px, 0) scale(1.2); } }

/* Malha de nós: sugere a rede de decisão sem custar imagem nem canvas. */
.pa-malha { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; opacity: 0.5; }
.pa-malha line { stroke: rgba(139, 123, 255, 0.22); stroke-width: 1; }
.pa-malha circle { fill: rgba(139, 123, 255, 0.75); animation: paPulso 4s ease-in-out infinite; }
.pa-malha circle:nth-child(3n)   { animation-delay: 0.9s; }
.pa-malha circle:nth-child(3n+1) { animation-delay: 1.8s; }
@keyframes paPulso { 0%, 100% { opacity: 0.25; r: 2; } 50% { opacity: 1; r: 3.4; } }

/* O herói ganha profundidade: o conteúdo sobe acima das camadas de fundo. */
.pa-hero .container { position: relative; z-index: 2; }

/* Entrada do herói em cascata, sem esperar rolagem (é o topo da página). */
.pa-hero-copy > * { animation: paSobe 0.7s var(--ease-out) both; }
.pa-hero-copy > .eyebrow      { animation-delay: 0.05s; }
.pa-hero-copy > h1            { animation-delay: 0.13s; }
.pa-hero-copy > .lead         { animation-delay: 0.21s; }
.pa-hero-copy > .pa-hero-actions { animation-delay: 0.29s; }
.pa-hero-copy > .pa-micro     { animation-delay: 0.37s; }
@keyframes paSobe { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }

/* Gradiente animado no trecho em destaque do H1. */
.pa-grad {
  background: linear-gradient(100deg, #8b7bff 0%, #6ea0ff 35%, #4fd6a0 60%, #8b7bff 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: paGrad 9s linear infinite;
}
@keyframes paGrad { to { background-position: 260% 0; } }

/* ---------- 2. Cartão com brilho que segue o ponteiro -------------------
   O mesmo recurso dos cartões da home: um radial-gradient posicionado por
   duas variáveis que o JS atualiza. Custa uma troca de custom property por
   quadro, não um reflow. */
.pa-glow { position: relative; overflow: hidden; }
.pa-glow::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(380px 240px at var(--mx, 50%) var(--my, 0%), rgba(139, 123, 255, 0.14), transparent 62%);
  opacity: 0;
  transition: opacity 0.35s var(--ease-out);
  pointer-events: none;
}
.pa-glow:hover::after { opacity: 1; }

/* Inclinação por ponteiro no cartão de demonstração. */
.pa-tilt { transform-style: preserve-3d; transition: transform 0.4s var(--ease-out); will-change: transform; }

/* ---------- 3. Pipeline do orquestrador --------------------------------
   A peça central da página: mostra em uma imagem o que o texto explica em
   três parágrafos. O pacote viaja da entrada até a estação ativa e para ali,
   então o desenho sempre concorda com a aba selecionada. */
.pa-pipe {
  position: relative;
  margin-top: 2.2rem;
  padding: 1.9rem 1.5rem 1.5rem;
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(139,123,255,0.05), transparent 70%), var(--glass);
}
.pa-pipe-trilho { position: relative; height: 76px; }
.pa-pipe-linha {
  position: absolute; left: 4%; right: 4%; top: 50%;
  height: 2px; transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.09);
  border-radius: 2px;
}
/* Trecho percorrido: escala no eixo X em vez de mudar width. */
.pa-pipe-preenche {
  position: absolute; left: 0; top: 0; height: 100%;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(var(--prog, 0));
  background: linear-gradient(90deg, var(--cam-regra), var(--cam-ia) 55%, var(--cam-humano));
  transition: transform 0.7s var(--ease-out);
  border-radius: 2px;
}
.pa-estacoes {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 4%;
}
.pa-est { display: grid; justify-items: center; gap: 0.5rem; }
.pa-est-ponto {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--bg-1);
  border: 2px solid rgba(255, 255, 255, 0.22);
  transition: border-color 0.4s, box-shadow 0.4s, transform 0.4s var(--ease-out);
}
.pa-est.is-on .pa-est-ponto {
  border-color: var(--cam, var(--pa));
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--cam, var(--pa)) 18%, transparent);
  transform: scale(1.25);
}
.pa-est-rot {
  font-family: var(--font-mono);
  font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-dim);
  transition: color 0.4s;
  white-space: nowrap;
}
.pa-est.is-on .pa-est-rot { color: var(--ink); }

/* O pacote: bolinha que percorre o trilho até a estação ativa. */
.pa-pacote {
  position: absolute; top: 50%; left: 4%;
  width: 11px; height: 11px; border-radius: 50%;
  margin-top: -5.5px;
  background: #fff;
  box-shadow: 0 0 14px 3px rgba(139, 123, 255, 0.75);
  transform: translate3d(var(--px, 0px), 0, 0);
  transition: transform 0.85s var(--ease-out);
  will-change: transform;
}
.pa-pipe-nota {
  margin-top: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.66rem; letter-spacing: 0.04em;
  color: var(--ink-mute);
  text-align: center;
  min-height: 1.2em;
}
.pa-pipe-nota b { color: var(--ink-soft); font-weight: 500; }

/* ---------- 4. Medidores radiais dos indicadores ------------------------ */
.pa-gauges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding: 1.5rem;
}
.pa-gauge { display: grid; justify-items: center; gap: 0.6rem; text-align: center; }
.pa-gauge svg { transform: rotate(-90deg); overflow: visible; }
.pa-gauge .trilha { stroke: rgba(255, 255, 255, 0.08); }
/* stroke-dashoffset é animável na GPU e não recalcula layout. */
.pa-gauge .arco {
  stroke: var(--cor, var(--pa));
  stroke-linecap: round;
  transition: stroke-dashoffset 1.4s var(--ease-out);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--cor, var(--pa)) 45%, transparent));
}
.pa-gauge-num {
  font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 600;
  color: var(--ink);
  line-height: 1;
}
.pa-gauge-rot { font-size: 0.8rem; color: var(--ink-mute); line-height: 1.3; }
.pa-gauge-wrap { position: relative; display: grid; place-items: center; }
.pa-gauge-wrap > div { position: absolute; display: grid; justify-items: center; gap: 0.15rem; }

/* ---------- 5. Trilha de seções (só telas largas) ----------------------- */
.pa-rail {
  position: fixed;
  left: 26px; top: 50%; transform: translateY(-50%);
  z-index: 40;
  display: none;
  gap: 0.9rem;
  grid-auto-flow: row;
}
.pa-rail a {
  display: flex; align-items: center; gap: 0.6rem;
  color: var(--ink-dim);
  font-size: 0.72rem;
  text-decoration: none;
  transition: color 0.3s;
}
.pa-rail i {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transition: transform 0.35s var(--ease-out), background 0.35s;
}
.pa-rail span {
  opacity: 0; transform: translateX(-6px);
  transition: opacity 0.3s, transform 0.3s var(--ease-out);
  white-space: nowrap;
}
.pa-rail a:hover span, .pa-rail a.is-on span { opacity: 1; transform: none; }
.pa-rail a:hover, .pa-rail a.is-on { color: var(--ink); }
.pa-rail a.is-on i { background: var(--pa); transform: scale(1.6); box-shadow: 0 0 0 4px rgba(139,123,255,0.18); }
@media (min-width: 1400px) { .pa-rail { display: grid; } }

/* ---------- 6. Acabamentos ---------------------------------------------- */
/* Cartões de passo e de camada sobem juntos, com atraso em cascata. */
.pa-steps li, .pa-item, .pa-page .infra-card { transition: transform 0.3s var(--ease-out), border-color 0.3s, background 0.3s; }
.pa-steps li:hover, .pa-page .infra-card:hover { transform: translateY(-4px); border-color: var(--pa-line); }

/* Linha superior que corre no cartão em foco. */
.pa-page .infra-card { position: relative; overflow: hidden; }
.pa-page .infra-card::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--pa), transparent);
  transform: scaleX(0);
  transition: transform 0.5s var(--ease-out);
}
.pa-page .infra-card:hover::after { transform: scaleX(1); }

/* Botão magnético: o deslocamento vem de duas variáveis que o JS escreve. */
.pa-mag { transform: translate3d(var(--tx, 0), var(--ty, 0), 0); transition: transform 0.35s var(--ease-out); }

/* Comparativo: cada linha entra em cascata quando a coluna aparece. */
.pa-page .vs-col li { animation: paLinha 0.5s var(--ease-out) both; animation-play-state: paused; }
.pa-page .vs-col.is-in li { animation-play-state: running; }
.pa-page .vs-col li:nth-child(1) { animation-delay: 0.05s; }
.pa-page .vs-col li:nth-child(2) { animation-delay: 0.12s; }
.pa-page .vs-col li:nth-child(3) { animation-delay: 0.19s; }
.pa-page .vs-col li:nth-child(4) { animation-delay: 0.26s; }
.pa-page .vs-col li:nth-child(5) { animation-delay: 0.33s; }
.pa-page .vs-col li:nth-child(6) { animation-delay: 0.40s; }
@keyframes paLinha { from { opacity: 0; transform: translate3d(-10px, 0, 0); } to { opacity: 1; transform: none; } }

@media (max-width: 640px) {
  .pa-gauges { padding: 1.1rem; gap: 0.7rem; }
  .pa-pipe { padding: 1.5rem 0.9rem 1.2rem; }
  .pa-est-rot { font-size: 0.55rem; }
}

/* ---------- 7. Menos movimento: desliga tudo ----------------------------
   Quem pede movimento reduzido recebe a página inteira, parada. */
@media (prefers-reduced-motion: reduce) {
  .pa-orbe, .pa-malha circle, .pa-grad { animation: none !important; }
  .pa-hero-copy > * { animation: none !important; opacity: 1 !important; transform: none !important; }
  .pa-pacote, .pa-pipe-preenche, .pa-gauge .arco, .pa-tilt, .pa-mag { transition: none !important; }
  .pa-page .vs-col li { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ============================================================================
   CAMADA CINEMA (15/08/2026)
   ============================================================================ */

/* ---------- Rede neural em canvas (herói) ---------- */
.pa-rede {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.85;
  /* Some nas bordas para o canvas não terminar em linha reta visível. */
  -webkit-mask-image: radial-gradient(120% 100% at 60% 30%, #000 42%, transparent 78%);
          mask-image: radial-gradient(120% 100% at 60% 30%, #000 42%, transparent 78%);
}

/* ---------- Perguntas que o visitante escolhe ---------- */
.pa-chips {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin: 0 0 0.9rem;
}
.pa-chip {
  font: inherit;
  font-size: 0.79rem;
  color: var(--ink-soft);
  padding: 0.46rem 0.85rem;
  border: 1px solid var(--stroke-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: color 0.25s, border-color 0.25s, background 0.25s, transform 0.25s var(--ease-out);
}
.pa-chip:hover { color: var(--ink); border-color: var(--pa-line); transform: translateY(-2px); }
.pa-chip[aria-pressed="true"] {
  color: #fff;
  border-color: var(--pa);
  background: var(--pa-soft);
  box-shadow: 0 0 18px rgba(139, 123, 255, 0.25);
}
.pa-chips-rot {
  font-family: var(--font-mono);
  font-size: 0.63rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 0.5rem;
}

/* ---------- Cena presa ao scroll ----------
   Só existe quando o JS confirma que a tela comporta. Sem a classe, a seção
   é uma seção comum e a página continua legível de cima a baixo. */
.pa-cena.is-cinema { min-height: 300vh; position: relative; }
.pa-cena.is-cinema .pa-cena-pin {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem 0;
}
/* Barra de progresso da própria cena, no topo do bloco preso. */
.pa-cena.is-cinema .pa-cena-pin::before {
  content: "";
  position: absolute; left: 0; top: 0; height: 2px; width: 100%;
  transform: scaleX(var(--cena, 0));
  transform-origin: left center;
  background: linear-gradient(90deg, var(--cam-regra), var(--cam-ia) 55%, var(--cam-humano));
  opacity: 0.85;
}
.pa-cena-dica {
  font-family: var(--font-mono);
  font-size: 0.63rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-dim);
  text-align: center;
  margin-top: 1.2rem;
}
.pa-cena:not(.is-cinema) .pa-cena-dica { display: none; }

/* ---------- Título palavra a palavra ---------- */
.pa-page .pa-w {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 0.5em, 0);
  filter: blur(6px);
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out), filter 0.55s var(--ease-out);
  will-change: opacity, transform, filter;
}
.pa-page .pa-escrito .pa-w { opacity: 1; transform: none; filter: blur(0); }

/* ---------- Holofote do cursor ----------
   Fixo, sem eventos e em multiply invertido: ilumina de leve o que está
   sob o cursor sem lavar a cor de nada. */
.pa-holofote {
  position: fixed;
  left: 0; top: 0;
  width: 520px; height: 520px;
  margin: -260px 0 0 -260px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(circle, rgba(139, 123, 255, 0.10), transparent 62%);
  will-change: transform;
}

@media (max-width: 1000px) {
  .pa-chips { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .pa-page .pa-w { opacity: 1 !important; transform: none !important; filter: none !important; }
  .pa-cena.is-cinema { min-height: 0; }
  .pa-cena.is-cinema .pa-cena-pin { position: static; min-height: 0; }
  .pa-holofote { display: none; }
}

/* ============================================================================
   DIREÇÃO DE ARTE (15/08/2026)
   O que fazia a página parecer mediana não era falta de animação: era ritmo
   uniforme. Toda seção tinha o mesmo respiro, o mesmo fundo e o mesmo formato
   (eyebrow + título + grade de cartões). Aqui o ritmo passa a variar.
   ============================================================================ */

/* ---------- 1. Respiro: mais apertado e alternado --------------------------
   O padrão do site (até 9rem em cima e 9rem embaixo) empilha 18rem de vazio
   entre duas seções. Numa página longa e narrativa isso vira buraco. */
.pa-page { --section-pad: clamp(3.4rem, 5.4vw, 5.6rem); }
.pa-page section { padding-block: var(--section-pad); }

/* ---------- 2. Faixas: o vazio vira intenção ------------------------------
   Seções alternadas ganham fundo próprio e costura luminosa nas bordas. Com
   a faixa, o mesmo espaço deixa de ser buraco e vira separação de capítulo. */
.pa-faixa {
  position: relative;
  background:
    radial-gradient(1100px 420px at 50% -10%, rgba(139, 123, 255, 0.07), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.022), transparent 55%);
}
.pa-faixa::before,
.pa-faixa::after {
  content: "";
  position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139, 123, 255, 0.38), transparent);
}
.pa-faixa::before { top: 0; }
.pa-faixa::after  { bottom: 0; }

/* ---------- 3. Índice editorial da seção ---------------------------------
   Numeração em mono à esquerda do olho da seção. É o detalhe que separa uma
   landing de um documento de produto. */
.pa-idx {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.9rem;
}
.pa-idx::before {
  content: attr(data-idx);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  color: var(--pa);
  opacity: 0.8;
}
.pa-idx::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--pa-line), transparent);
  opacity: 0.7;
}
.pa-idx .eyebrow { margin-bottom: 0; }

/* ---------- 4. Momento de declaração (full-bleed) -------------------------
   Uma frase só, gigante, ocupando a largura inteira. Quebra o ritmo de
   "título + parágrafo + cartões" e dá ao olho um ponto de descanso alto. */
.pa-decl {
  position: relative;
  padding-block: clamp(4rem, 9vw, 8rem);
  overflow: hidden;
  border-top: 1px solid var(--stroke);
  border-bottom: 1px solid var(--stroke);
  background:
    radial-gradient(760px 380px at 20% 0%, rgba(139, 123, 255, 0.16), transparent 70%),
    radial-gradient(700px 360px at 85% 100%, rgba(73, 121, 255, 0.13), transparent 70%),
    var(--bg-1);
}
.pa-decl-txt {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 1rem + 4.4vw, 4.4rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  max-width: 20ch;
}
.pa-decl-txt em {
  font-style: normal;
  background: linear-gradient(100deg, #8b7bff, #6ea0ff 45%, #4fd6a0);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.pa-decl-p {
  margin-top: 1.6rem;
  max-width: 46ch;
  color: var(--ink-soft);
  font-size: var(--fs-lead);
}
/* Numeral fantasma ao fundo: profundidade sem imagem. */
.pa-decl-ghost {
  position: absolute;
  right: -2%; bottom: -26%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(14rem, 34vw, 30rem);
  line-height: 1;
  color: rgba(255, 255, 255, 0.022);
  pointer-events: none;
  user-select: none;
}

/* ---------- 5. Régua de frases em movimento ------------------------------
   Costura duas seções com movimento contínuo, no lugar de um vão parado. */
.pa-regua {
  position: relative;
  overflow: hidden;
  padding-block: 1.1rem;
  border-top: 1px solid var(--stroke);
  border-bottom: 1px solid var(--stroke);
  background: rgba(139, 123, 255, 0.04);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.pa-regua-fita {
  display: flex;
  width: max-content;
  gap: 3rem;
  animation: paCorre 38s linear infinite;
  will-change: transform;
}
.pa-regua:hover .pa-regua-fita { animation-play-state: paused; }
.pa-regua span {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 3rem;
}
.pa-regua span::after {
  content: "";
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--pa);
  opacity: 0.7;
}
@keyframes paCorre { to { transform: translate3d(-50%, 0, 0); } }

/* ---------- 6. Numeral gigante nos passos -------------------------------- */
.pa-steps li { position: relative; overflow: hidden; }
.pa-steps li::before {
  position: absolute;
  right: 0.6rem; top: 0.1rem;
  font-size: 3.6rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: rgba(139, 123, 255, 0.13);
  margin: 0;
  line-height: 1;
  pointer-events: none;
}
.pa-steps b { position: relative; z-index: 1; }

/* ---------- 7. Textura de grão -------------------------------------------
   Ruído fino sobre a página inteira. É o acabamento que tira o aspecto de
   gradiente chapado sem custar requisição: o SVG vai embutido no CSS. */
.pa-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 8. Revelação por máscara --------------------------------------
   Em vez de só surgir, o bloco é descoberto de baixo para cima. */
.pa-corte {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.9s var(--ease-out);
}
.pa-corte.is-in { clip-path: inset(0 0 0% 0); }

/* ---------- 9. Ajustes de densidade -------------------------------------- */
.pa-page .lead { max-width: 60ch; }
.pa-page .infra-grid { gap: 1rem; margin-top: 2rem; }
.pa-page .vs-grid { margin-top: 2rem; }
.pa-steps { margin-top: 2rem; }
.pa-page .sec-cta { margin-top: clamp(1.8rem, 3vw, 2.4rem); }

@media (max-width: 900px) {
  .pa-decl-ghost { display: none; }
  .pa-steps li::before { font-size: 2.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pa-regua-fita { animation: none; }
  .pa-corte { clip-path: none !important; transition: none; }
}

/* ============================================================================
   DENSIDADE, 2ª PASSAGEM (15/08/2026)
   O vazio que sobrava não vinha de uma regra só. Eram quatro somadas.
   ============================================================================ */

/* 1. O herói de página interna abre com até 10rem de topo. Como a barra é
      fixa e fina, isso é o dobro do necessário e joga o título para baixo. */
.pa-page .page-hero { padding-block: clamp(5.4rem, 8vw, 7rem) clamp(1.6rem, 3vw, 2.4rem); }

/* 2. Respiro entre seções, mais uma redução. */
.pa-page { --section-pad: clamp(2.6rem, 4vw, 4.2rem); }

/* 3. Colunas de alturas diferentes centralizadas deixam a mais curta boiando
      no meio de um vão. Alinhar pelo topo elimina o buraco. */
.pa-split { align-items: start; gap: clamp(1.4rem, 3vw, 2.6rem); margin-top: 1.8rem; }
.pa-orq { align-items: start; margin-top: 1.8rem; gap: clamp(1.2rem, 2.4vw, 2rem); }

/* 4. A cena presa reservava 3 telas de rolagem e centralizava um conteúdo mais
      curto que a viewport, sobrando ar em cima e embaixo. Menos altura, e o
      conteúdo encosta no topo em vez de flutuar. */
.pa-cena.is-cinema { min-height: 230vh; }
.pa-cena.is-cinema .pa-cena-pin {
  justify-content: flex-start;
  padding: clamp(4.5rem, 8vh, 6.5rem) 0 1.5rem;
  min-height: 100vh;
}

/* 5. Encostos menores em blocos que herdam margens generosas do sistema. */
.pa-page .facts { margin-top: 1.8rem; }
.pa-page .lead { margin-bottom: 0; }
.pa-page .pa-decl { padding-block: clamp(3rem, 6vw, 5.5rem); }
.pa-page .pa-checks { margin-top: 1.1rem; }
.pa-page .pa-line { margin-top: 1.2rem; }
.pa-page .section-tight { padding-block: clamp(2.2rem, 4vw, 3.4rem); }
.pa-page .faq-group { margin-top: 1.8rem; }
.pa-hero-actions { margin-top: 1.4rem; }
.pa-micro { margin-top: 0.8rem; }

/* ============================================================================
   GEOMETRIA DA CENA, CORREÇÃO (15/08/2026)
   O maior vazio da página estava aqui e não era espaçamento: era altura
   forçada. O bloco preso tinha min-height:100vh, mas o conteúdo dele é mais
   curto que uma tela. Resultado: sobrava ar em TODOS os quadros da cena, e a
   seção 2 parecia meio vazia enquanto se rolava por ela.

   Correção: o bloco preso passa a ter a altura do próprio conteúdo e gruda a
   uma distância fixa do topo. A distância de rolagem da cena continua vindo do
   contêiner, que é quem tem altura reservada.
   ============================================================================ */
.pa-cena.is-cinema { min-height: 195vh; }
.pa-cena.is-cinema .pa-cena-pin {
  position: sticky;
  top: clamp(80px, 11vh, 110px);
  min-height: 0;          /* estava 100vh: era daí que vinha o vazio */
  display: block;         /* sem flex, sem justify-content a centralizar no vão */
  padding: 0;
}
.pa-cena.is-cinema .pa-cena-pin::before { top: -14px; }
.pa-cena-dica { margin-top: 0.9rem; }

/* Nas seções de duas colunas, o painel acompanha a leitura em vez de terminar
   cedo e deixar metade da tela vazia enquanto o texto continua. */
@media (min-width: 1000px) {
  .pa-split-media { position: sticky; top: clamp(88px, 12vh, 120px); }
}

/* Os cartões de camada ficavam altos por causa do respiro interno; com a lista
   e o painel lado a lado, isso empurrava a coluna curta para longe. */
.pa-item { padding: 0.95rem 1.1rem; }
.pa-item h3 { font-size: 0.98rem; }
.pa-item p { font-size: 0.85rem; line-height: 1.5; }
.pa-list { gap: 0.6rem; }
.pa-panel { padding: 1.2rem 1.3rem; }
.pa-pipe { margin-top: 1.4rem; padding: 1.5rem 1.4rem 1.1rem; }
.pa-pipe-trilho { height: 62px; }

/* ---------- Cabeçalho de seção em duas colunas ----------------------------
   O padrão "olho, título, subtítulo, grade" empilha três blocos na vertical e
   usa metade da largura, o que rende altura sem conteúdo. Aqui o título fica à
   esquerda e o subtítulo à direita, na mesma faixa: menos altura, largura
   inteira ocupada, e a leitura ganha hierarquia em vez de perder. */
.pa-cab {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1.2rem, 3vw, 3rem);
  align-items: end;
}
.pa-cab .pa-idx { grid-column: 1 / -1; margin-bottom: 0.4rem; }
.pa-cab .h2 { margin-bottom: 0; }
.pa-cab .lead { margin: 0; padding-bottom: 0.25rem; }
@media (max-width: 900px) {
  .pa-cab { grid-template-columns: 1fr; gap: 0.9rem; }
}

/* A lista de conformidade ocupava uma coluna só numa faixa de 1200px: linhas
   longuíssimas e muita altura. Em duas colunas o bloco fica denso e legível. */
#compliance .pa-checks {
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem clamp(1.4rem, 3vw, 2.6rem);
  margin-top: 1.6rem;
}
@media (max-width: 860px) { #compliance .pa-checks { grid-template-columns: 1fr; } }

/* A declaração usava 20ch de largura numa faixa inteira, deixando metade vazia.
   Passa a dividir a faixa com o parágrafo de apoio. */
.pa-decl .container {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(1.4rem, 4vw, 3.4rem);
  align-items: end;
}
.pa-decl-p { margin-top: 0; }
@media (max-width: 900px) {
  .pa-decl .container { grid-template-columns: 1fr; }
  .pa-decl-p { margin-top: 1.1rem; }
}

/* Rede de segurança do corte: se o JS marcar o bloco e o observador não abrir,
   uma animação o abre sozinha. Mesma lógica do failsafe de [data-reveal] no
   motion.css. Conteúdo invisível preso por animação é defeito, não efeito. */
.pa-corte:not(.is-in) {
  animation: paCorteFailsafe 0.6s var(--ease-out) 2.6s forwards;
}
@keyframes paCorteFailsafe { to { clip-path: inset(0 0 0% 0); } }

/* Densidade dos cartões desta página: o respiro do sistema foi calibrado para
   a home, que tem menos cartões por seção. */
.pa-page .infra-card { padding: 1.25rem 1.2rem; }
.pa-page .infra-card h3 { font-size: 1rem; margin-bottom: 0.3rem; }
.pa-page .infra-card p { font-size: 0.87rem; line-height: 1.5; }
.pa-page .infra-card .ic { width: 36px; height: 36px; font-size: 1rem; margin-bottom: 0.7rem; }
.pa-page .infra-grid { margin-top: 1.6rem; }