/* ==========================================================================
   Horus Agência — site institucional (versão 3, 05/08/2026)

   Refeito a partir de dez referências que o Marcelo mandou. O que elas têm em
   comum e o que virou regra aqui está em `site/PLANO.md`.

   Cor e tipo saem de identidade/design-guide.md. O fundo agora é MEDIDO no
   arquivo da marca (#0A0B0F), não estimado.

   Forma: pílula para controle clicável, 16px para superfície. Duas formas, e o
   antipadrão da casa autoriza pílula justamente em botão e tag.

   Elevação: declarada UMA vez, por fio. Não existe sombra escura larga por
   baixo de borda de 1px nesta folha (card fantasma).

   Brilho: na v3 não existe nenhum. A permissão da marca é condicional (azul da
   marca E atrás de um objeto de verdade), a arte do hero saiu a pedido do
   Marcelo, e gradiente radial sozinho atrás do título seria `dark-glow` com
   outro nome. Quem sustenta a cena é o metal correndo no aro do botão.

   Vidro: linguagem de superfície da v3, feita de LUZ e não de desfoque.
   Ver os tokens `--vidro*` abaixo.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */

  /* ═══ IDENTIDADE n8n (28/08/2026, Marcelo). O AMARELO SAIU de vez. A casa passa
     a viver na DNA do n8n: VOID violeta-preto + EMBER (laranja→vermelho, só em CTA)
     + ELECTRIC (azul→violeta, em link/foco/conexão) + texto cinza-quente. A
     elevação é por DEGRAU DE COR (void → surface → panel), não por sombra externa.
     Nomes de token legados mantidos (dezenas de usos) carregando a cor nova.
     Marca: a Horus usa o que há de mais moderno em tecnologia e projeta
     experiências estratégicas e mensuráveis, alinhadas às tendências atuais. */
:root {
  --tinta:    #0e0918;  /* void base: fundo de página e hero (violeta-preto)   */
  --tinta-2:  #1a1624;  /* elevated surface: fundo de card                     */
  --carta:    #1b1728;  /* deep panel: painel grande / stage                   */
  --shell:    #2c2834;  /* muted shell: botão fantasma / superfície terciária  */
  --fio:      #3e3a46;  /* border smoke: borda de baixo contraste              */
  --grafite:  #48556a;  /* steel muted                                         */

  /* Legados que carregavam âmbar, agora ELECTRIC (azul→violeta). */
  --azul:     #077ac7;  /* electric solid (preenchimento)                      */
  --azul-esc: #0a63a8;  /* electric hover                                       */
  --azul-luz: #4b93e6;  /* ACENTO electric legível sobre o void (~5:1)          */
  --dourado:  #F4C430;  /* AMARELO da marca (a pupila do olho), acento quente    */

  --osso:     #d1cece;  /* ash text: corpo/primário (nunca branco puro no corpo)*/
  --osso-2:   #9d9797;  /* fog text: secundário, legendas, labels              */
  --branco:   #ffffff;  /* cloud white: SÓ títulos e ênfase alta               */

  /* Os dois gradientes que definem a identidade cromática. */
  /* 31/08/2026: o "ember" laranja→vermelho (importado do n8n) foi trocado pelo
     AMARELO da logo (#F4C430) a pedido do Marcelo. Nome do token mantido (dezenas
     de usos) carregando o amarelo. Gradiente agora amarelo→dourado. ⚠️ Texto
     sobre este fundo é ESCURO (var(--tinta)), nunca branco: amarelo com branco
     reprova contraste. */
  --ember:    linear-gradient(30deg, #F4C430, #dca514);
  --electric: linear-gradient(141deg, rgb(7,122,199), rgb(107,33,239));
  --ember-1:  #F4C430;
  --ember-2:  #dca514;
  --elec-1:   #077ac7;
  --elec-2:   #6b21ef;

  /* c-* (antigas cores por card) repontadas para a paleta nova, sem arco-íris.
     Os dois quentes (âmbar/coral) viraram o amarelo da marca em 31/08/2026. */
  --c-ambar:   #F4C430;
  --c-azul:    #4b93e6;
  --c-verde:   #077ac7;
  --c-coral:   #F4C430;
  --c-violeta: #6b21ef;

  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Escala de tipo (degraus mantidos). */
  --t-13: 0.8125rem;
  --t-16: 1rem;       /* corpo do feature card n8n (16px)          */
  --t-17: 1.0625rem;
  --t-22: 1.375rem;
  --t-24: 1.5rem;     /* título do feature card n8n (24px)         */
  --t-26: 1.625rem;   /* título dos cards da seção 1               */
  --t-28: 1.75rem;
  --t-40: 2.5rem;
  --t-54: 3.375rem;   /* display n8n */
  --t-64: 4rem;
  --t-80: 5rem;
  --t-112: 7rem;

  /* Tipografia n8n: UMA família geométrica leve. geomanist não é web-livre, então
     o substituto do próprio manual — DM Sans — no peso 300 no display (o título
     "sussurra") e 400 no corpo. Tracking negativo apertado no display. */
  --display: "DM Sans", system-ui, sans-serif;
  --corpo:   "DM Sans", system-ui, sans-serif;

  --raio: 16px;       /* card                                     */
  --raio-lg: 24px;    /* painel grande                            */
  --pilula: 999px;
  --raio-reto: 8px;   /* botão/input (n8n)                        */

  /* Vidro: reservado ao cabeçalho (o único painel sobre conteúdo). */
  --vidro:     linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  --vidro-fio: rgba(255,255,255,.10);
  --vidro-luz: inset 0 1px 0 rgba(255,255,255,.13);

  --barra: 56px;
  --cabecalho: 80px;
  --largura: 1200px;   /* n8n page max-width */
  --medida: 66ch;

  --curva: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- 2. Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
/* `overflow-x: clip` (não `hidden`) mata a rolagem lateral que os pilares da
   jornada, fixos, criavam no documento (a barra de arrastar do print 2) sem virar
   contêiner de rolagem — então não quebra o `sticky` dos serviços nem o pin do
   GSAP, ao contrário de `hidden`. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }

body {
  margin: 0;
  background: var(--tinta);
  color: var(--osso);
  font-family: var(--corpo);
  font-size: var(--t-17);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Poeira de partículas pela Home inteira, atrás de todo o conteúdo
   (assets/particles.js — porte vanilla de um componente React de
   referência, regra da casa). `fixed` + baixo z-index: fica no lugar
   enquanto a página rola, sem competir com nada por cima. */
.particulas {
  position: fixed;
  inset: 0;
  /* 1, não 0: cada seção com `position:relative` (o hero, os cards...) conta
     como elemento posicionado com z-index efetivo 0 e pinta seu PRÓPRIO
     fundo depois de quem vier antes dela no documento no mesmo grupo —
     com z-index 0 aqui, o fundo do hero cobria as partículas por inteiro. */
  z-index: 1;
  pointer-events: none;
}
.particulas canvas { display: block; }

h1, h2, h3, h4 {
  font-family: var(--display);
  margin: 0;
  color: var(--branco);
  text-wrap: balance;
}
/* n8n: o display SUSSURRA — peso 300, line-height apertado, tracking negativo. */
h1, h2 { font-weight: 300; line-height: 0.98; letter-spacing: -0.02em; }
h3, h4 { font-weight: 400; line-height: 1.2;  letter-spacing: -0.01em; }
h1 .azul, h2 .azul { color: var(--azul-luz); }

p { margin: 0; }
a { color: var(--azul-luz); text-underline-offset: 3px; }
a:hover { color: var(--branco); }

/* `height:auto` junto de width/height no HTML. Sem isso a altura intrínseca
   fica de pé e a arte do hero empurra o CTA para fora da tela. */
img { max-width: 100%; height: auto; display: block; }

section[id], main[id], #sobre, .s1-secao[id] { scroll-margin-top: calc(var(--cabecalho) + 24px); }

:focus-visible { outline: 2px solid var(--azul-luz); outline-offset: 3px; border-radius: 4px; }

.envelope { width: 100%; max-width: var(--largura); margin-inline: auto; }
.faixa { padding: 120px 24px; }
.faixa-2 { background: var(--tinta-2); }

/* ---------- 3. Rótulo de seção (pílula) ---------- */
/* Padrão presente em nove das dez referências: rótulo miúdo em caixa alta,
   tracking largo, com um ponto ou fio na frente. Vale como categoria de
   seção; o hero usa a variação com ponto aceso. */

.rotulo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-size: var(--t-13);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--azul-luz);
  background: var(--vidro);
  border: 1px solid var(--vidro-fio);
  box-shadow: var(--vidro-luz);
  border-radius: var(--pilula);
  padding: 7px 16px;
  margin-bottom: 22px;
}
.rotulo::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--azul-luz);
  flex: none;
}

/* ---------- 4. Botão de metal líquido ---------- */
/* Porte para WebGL nativo do componente React que o Marcelo mandou. Três
   camadas empilhadas, exatamente como no original:

     z0  .metal-tela   canvas do shader, ocupa a pílula inteira
     z1  .metal-face   pílula de vidro escuro recuada 2px, que tampa o miolo
     z2  .metal-txt    o rótulo

   O que sobra visível do shader é um aro de 2px correndo em volta. O metal
   escorre em preto, azul da marca e branco, então o efeito fica na família da
   marca em vez de prata genérica.

   Elevação declarada UMA vez, por sombra. Não há borda por baixo dela: o
   card fantasma de `90-antipadroes.md` é justamente a soma das duas. */

.metal {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 30px;
  border-radius: var(--pilula);
  text-decoration: none;
  isolation: isolate;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  box-shadow:
    0 20px 26px rgba(0,0,0,.42),
    0 7px 10px rgba(0,0,0,.30),
    0 2px 4px rgba(0,0,0,.24);
  transition: transform .2s var(--curva), box-shadow .25s var(--curva);
}
.metal:hover {
  transform: translateY(-1px);
  box-shadow:
    0 22px 30px rgba(201,153,46,.16),
    0 10px 14px rgba(0,0,0,.34),
    0 2px 4px rgba(0,0,0,.26);
}
.metal:active { transform: translateY(1px); }

/* Contêiner da tela do shader. O ShaderMount do @paper-design cria o próprio
   <canvas> aqui dentro; forçamos ele a preencher a pílula e herdar o raio. */
.metal-tela {
  position: absolute; inset: 0; z-index: 0;
  border-radius: inherit;
  overflow: hidden;
}
.metal-tela canvas {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  display: block !important;
  border-radius: inherit !important;
}
/* Aro parado, para quem não tem WebGL2 (ou o bundle não carregou). Cromo prata
   polido, na mesma família do shader — poucas faixas largas e brilho de metal. */
.metal-parado .metal-tela {
  background: conic-gradient(from 210deg,
    #1C2432, #C9D2DE 16%, #F4F7FB 30%, #9AA6B6 46%,
    #E9EEF7 64%, #FBFCFE 80%, #1C2432);
}

.metal-face {
  position: absolute; inset: 2px; z-index: 1;
  border-radius: var(--pilula);
  background: linear-gradient(180deg, #1A1E26 0%, #05070A 100%);
  box-shadow: var(--vidro-luz);
}

.metal-txt {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display);
  font-size: var(--t-17);
  font-weight: 600;
  color: #EDF1F7;                     /* 15,1:1 sobre a face. O #666666 do
                                         componente original dava 2,9:1 e
                                         reprovava em contraste. */
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
}
.metal-txt .seta { font-size: var(--t-13); }

/* Variante RETA, pedida pelo Marcelo em 25/08/2026 para a chamada final. É o
   mesmo shader e a mesma animação: o que muda é só a forma do recorte.
   O raio de 4px é o do botão do web3.xmethod.de e o de 2px do estrela.studio,
   arredondados para o mesmo lugar: não é canto vivo, que corta a leitura, é o
   canto mínimo que ainda parece peça fabricada.
   A face precisa de raio PRÓPRIO e menor que o do aro: ela é recuada 2px, e
   herdar os 4px deixaria uma sobra clara na quina. */
.metal-reto { border-radius: var(--raio-reto); }
.metal-reto .metal-face { border-radius: calc(var(--raio-reto) - 2px); }

/* Botão da CHAMADA final (26/08/2026, Marcelo). Duas mudanças no hover:
   1. A FACE troca de cor (some o preto, entra um azul escuro da marca). O aro do
      shader já acelera sozinho pelo JS (setSpeed no mouseenter).
   2. SAI a luz solta que o `.metal:hover` jogava atrás (a sombra azul larga): era
      brilho sem objeto atrás, o `dark-glow` disfarçado que a casa proíbe. Fica só
      a sombra neutra de elevação. */
.metal-face { transition: background .4s var(--curva); }
/* O botão da chamada é MAIOR (pedido do Marcelo, 26/08/2026). */
.metal-cta { padding: 22px 46px; }
.metal-cta .metal-txt { font-size: var(--t-22); }
.metal-cta:hover {
  box-shadow:
    0 22px 30px rgba(0,0,0,.42),
    0 7px 10px rgba(0,0,0,.30),
    0 2px 4px rgba(0,0,0,.24);
}
/* No hover a face vira um DEGRADÊ das cores da Horus (azul → dourado). O texto
   segue legível pela sombra que ele já carrega. */
.metal-cta:hover .metal-face {
  background: linear-gradient(115deg, #C9992E 0%, #6E5320 42%, #B8860B 100%);
}

/* ---------- 4c. Botão de vidro ---------- */
/* O botão do CABEÇALHO. É deliberadamente outro objeto que o de metal líquido:
   o Marcelo pediu que os dois não se pareçam, e a diferença precisa valer em
   repouso, não só no hover. O metal é peça sólida com aro correndo; este é
   vidro, chapa translúcida que ACENDE quando o ponteiro chega.

   A luz vem de sombra INTERNA, receita medida no CSS do estrela.studio: a
   larga levanta o miolo, a curta fica presa na aresta e desenha o aro. Sombra
   externa faria o botão flutuar acima da barra, que é o card fantasma de
   `90-antipadroes.md`. A única sombra externa que existe aqui nasce no hover, é
   colorida e é o próprio acender. */
.btn-vidro {
  position: relative;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 20px;
  border-radius: var(--raio-reto);
  font-family: var(--display);
  font-size: var(--t-17); font-weight: 600;
  color: var(--osso);
  text-decoration: none;
  white-space: nowrap;
  background: rgba(255,255,255,.07);
  box-shadow:
    inset 0 0 14px rgba(255,255,255,.03),
    inset 0 0 2px rgba(255,255,255,.22);
  transition:
    background .4s var(--curva),
    box-shadow .4s var(--curva),
    color .3s var(--curva);
}
.btn-vidro .seta { font-size: var(--t-13); transition: transform .4s var(--curva); }
.btn-vidro:hover {
  color: #FFFFFF;
  background: rgba(244,196,48,.18);
  box-shadow:
    inset 0 0 20px rgba(244,196,48,.26),
    inset 0 0 2px rgba(255,255,255,.55),
    0 0 20px rgba(244,196,48,.28);
}
.btn-vidro:hover .seta { transform: translate(2px, -2px); }
.btn-vidro:active { background: rgba(244,196,48,.26); }
/* Variante maior, para o hero. */
.btn-vidro-lg { padding: 15px 32px; font-size: var(--t-17); }

/* ---------- 4d. CTA (Como começa + chamada final) ----------
   Botão LIMPO e minimalista (Marcelo, 31/08): chapa amarela da marca, texto
   escuro, sem halo multicolor animado (as cores que corriam laranja→azul→violeta
   destoavam da paleta). Fica só a forma sólida, harmônica com o resto da página. */
.cta-ember {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 18px 42px; border-radius: var(--raio-reto);
  background: var(--ember); color: var(--tinta);
  background: #f7f9fc; color: #10203b;
  font-family: var(--display); font-size: var(--t-22); font-weight: 600;
  text-decoration: none; white-space: nowrap;
  transition: transform .25s var(--curva), filter .25s var(--curva);
}
.cta-ember .cta-txt { display: inline-flex; align-items: center; gap: 10px; }
.cta-ember .seta { font-size: var(--t-17); }
.cta-ember:hover { transform: translateY(-2px); filter: brightness(1.06); }

/* ---------- 4e. Botão "glow" AZUL (chamada final - réplica fiel ao anexo) ----------
   Cápsula escura (#030712) com contorno azul elétrico vibrante (#0066ff),
   halo luminoso sutil projetado para fora, texto branco e seta diagonal azul. */
.glow-btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 44px;
  border-radius: 9999px;
  border: 1.8px solid #0066ff;
  background: #030712;
  cursor: pointer;
  font-family: var(--display, 'DM Sans', sans-serif);
  font-size: 1.0625rem;
  font-weight: 700;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
  box-shadow:
    0 0 16px -2px rgba(0, 102, 255, 0.55),
    0 0 32px 2px rgba(0, 80, 220, 0.28),
    inset 0 0 12px rgba(0, 102, 255, 0.15);
  transition: transform 0.25s var(--curva), box-shadow 0.25s var(--curva), border-color 0.25s var(--curva);
}
.glow-btn::before {
  content: "";
  position: absolute;
  inset: -3px;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 50%, rgba(0, 119, 255, 0.65), transparent 70%);
  filter: blur(14px);
  opacity: 0.55;
  transition: opacity 0.3s ease;
}
.glow-btn:hover {
  transform: translateY(-2px);
  border-color: #38bdf8;
  box-shadow:
    0 0 24px 0 rgba(0, 130, 255, 0.75),
    0 0 48px 4px rgba(0, 90, 240, 0.4),
    inset 0 0 16px rgba(0, 130, 255, 0.25);
}
.glow-btn:hover::before {
  opacity: 0.85;
}
.glow-btn:active {
  transform: translateY(-1px) scale(0.98);
}
.glow-btn .glow-txt {
  font-family: var(--display, 'DM Sans', sans-serif);
  font-size: 1.0625rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.01em;
}
.glow-btn .glow-arrow {
  width: 15px;
  height: 15px;
  color: #2975e9;
  transition: transform 0.25s var(--curva), color 0.25s ease;
  flex-shrink: 0;
}
.glow-btn:hover .glow-arrow {
  transform: translate(2px, -2px);
  color: #38bdf8;
}
@media (prefers-reduced-motion: reduce) {
  .glow-btn::before { animation: none; }
}

/* A onda do clique nasce onde o dedo tocou. */
.metal-onda {
  position: absolute; z-index: 3;
  width: 20px; height: 20px; border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.42), transparent 70%);
  animation: onda .6s ease-out forwards;
}
@keyframes onda {
  from { transform: translate(-50%,-50%) scale(0);   opacity: .6; }
  to   { transform: translate(-50%,-50%) scale(4.6); opacity: 0;  }
}

/* ---------- 4b. Superfície de vidro ---------- */
/* A mesma lógica da face do botão, disponível para o resto da página. */

.vidro {
  background: var(--vidro);
  border: 1px solid var(--vidro-fio);
  box-shadow: var(--vidro-luz);
}

/* ---------- 5. Cabeçalho ---------- */

/* A faixa azul de demonstração saiu em 05/08/2026. As marcações de pendência
   abaixo ficam: elas são a régua de integridade, e some com elas só quando o
   dado existir de verdade. */
.pend {
  background: rgba(244,196,48,.14);
  border-bottom: 1px dashed var(--dourado);
  color: var(--dourado);
  padding: 0 3px;
}

/* O cabeçalho é o único painel da página que passa por cima de outro
   conteúdo, então é o único lugar em que o desfoque tem o que desfocar.

   Refeito em 25/08/2026 a partir de estrela.studio (referencias/): deixou de
   ser faixa colada nas bordas e virou PAINEL flutuante. A mudança não é de
   gosto, é a condição do efeito que o Marcelo pediu: barra de ponta a ponta só
   tem uma aresta visível, e "iluminar ao redor" nela é impossível porque não
   há redor. Com margem nos quatro lados, o aro existe.

   O `.topo` em si não pinta nada: ele só é a régua sticky e o recuo. Quem é o
   vidro é a `.topo-barra`. */
/* Faixa de largura total (print 1). O `.topo` é a régua sticky e o fundo; a
   `.topo-linha` distribui as três zonas. Transparente no topo; ao rolar ganha
   um véu escuro leve para os links não sumirem sobre seções claras. */
/* Sem fundo (pedido do Marcelo): o cabeçalho é transparente, sempre. Largura
   TOTAL, com pouco recuo lateral, para o nome e o botão ficarem quase nas pontas
   (referências Vivid Motion / orionix). */
/* FIXO (não sticky): sticky ocupa espaço no fluxo e empurrava o hero para baixo,
   deixando uma faixa preta no topo acima do plasma. Fixo flutua sobre o hero, e o
   plasma sangra até a borda de cima. */
.topo {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  padding: 16px 24px;
}

/* Cabeçalho em painel de VIDRO flutuante (28/08): fixo, efeito glass, cantos
   arredondados e SEM contorno (pedido do Marcelo). Três zonas 1fr auto 1fr. */
.topo-linha {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 10px 14px 10px 22px;
  border-radius: 999px;
  background: rgba(20,16,28,0.55);
  -webkit-backdrop-filter: blur(20px) saturate(1.35);
  backdrop-filter: blur(20px) saturate(1.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  transition: background .35s var(--curva);
}
.topo.rolado .topo-linha { background: rgba(14,9,24,0.72); }

.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; justify-self: start; }
/* Símbolo do olho de Horus à esquerda do nome (Marcelo, 31/08). */
.marca-logo { display: block; width: 30px; height: 30px; object-fit: contain; }
/* Cabeçalho em SANS (print 2 do Marcelo): o serifado fica só nos títulos. */
.marca .nome {
  font-family: var(--corpo); font-size: var(--t-22); font-weight: 800;
  letter-spacing: 0.04em; color: var(--osso); line-height: 1;
  transition: color .25s var(--curva);
}
/* Hover do "HORUS" (header e rodapé): AZUL da marca, nunca amarelo (Marcelo, 01/09). */
.marca:hover .nome { color: var(--azul-luz); }
.rodape .marca:hover .nome { color: var(--azul-luz); }

/* Nav central, CAIXA ALTA, sem fundo. Some ao rolar para baixo (classe
   `nav-oculta` no `.topo`); o título e o botão ficam sempre. */
.menu {
  display: flex; align-items: center; justify-content: center; gap: 34px;
  justify-self: center;
  transition: opacity .35s var(--curva), transform .35s var(--curva), visibility .35s;
}
.menu a {
  color: var(--osso); text-decoration: none;
  font-family: var(--corpo); font-size: var(--t-17); font-weight: 500;
  letter-spacing: 0;
  transition: opacity .25s var(--curva);
}
.menu a:hover { opacity: .6; }
.topo.nav-oculta .menu {
  opacity: 0; visibility: hidden; transform: translateY(-10px); pointer-events: none;
}

.topo-dir { display: flex; align-items: center; gap: 12px; justify-self: end; }

/* Botão do header em cápsula escura, com contorno azul luminoso como na
   referência. O efeito de rolo continua no hover. */
.topo-cta {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px;
  border-radius: 999px;
  border: 2px solid #2975e9;
  background: rgba(3, 10, 24, .82);
  color: #ffffff;
  font-family: var(--corpo); font-size: var(--t-17); font-weight: 600;
  letter-spacing: 0;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 0 10px rgba(41,117,233,.35), 0 0 24px rgba(41,117,233,.18);
  transition: transform .25s var(--curva), box-shadow .25s var(--curva), color .25s var(--curva);
}
.topo-cta:hover { color: #ffffff; transform: translateY(-1px); box-shadow: 0 0 14px rgba(41,117,233,.58), 0 0 32px rgba(41,117,233,.28); }

/* Brilho radial que segue o mouse — hoje só no "Fale conosco" azul (`.btn-azul`). */
.cta-brilho {
  position: absolute; inset: -1px; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity .3s var(--curva);
  background: radial-gradient(120px circle at var(--mx, 50%) var(--my, 50%),
              rgba(96,165,250,.85), rgba(37,99,235,.28) 45%, transparent 70%);
}
.cta-lbl { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; }
.topo-cta .seta { color: #2975e9; font-size: var(--t-13); }

/* Gatilho do menu no celular. Ícone de três traços. */
.hamburguer {
  display: none;
  place-items: center;
  width: 40px; height: 40px; flex: none;
  padding: 0;
  background: var(--vidro); border: 1px solid var(--vidro-fio);
  box-shadow: var(--vidro-luz);
  border-radius: var(--raio-reto); color: var(--osso);
  font: inherit; cursor: pointer;
}
.hb-caixa { position: relative; display: block; width: 18px; height: 13px; }
.hb-caixa i {
  position: absolute; left: 0; right: 0; height: 2px;
  background: currentColor; border-radius: 1px;
  transition: transform .35s var(--curva), opacity .25s ease;
}
.hb-caixa i:nth-child(1) { top: 0; }
.hb-caixa i:nth-child(2) { top: 5.5px; }
.hb-caixa i:nth-child(3) { bottom: 0; }
.hamburguer.aberto .hb-caixa i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.hamburguer.aberto .hb-caixa i:nth-child(2) { opacity: 0; }
.hamburguer.aberto .hb-caixa i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ---------- 6. Hero (fundido com a Seção 1 em 31/08/2026) ---------- */
/* Hero e Seção 1 viraram UMA seção só (pedido do Marcelo): `.hero` é o
   container com o fundo (vídeo + tint + fade), `.hero-topo` é o bloco de
   título/subtítulo (100dvh, centralizado, igual antes) e `.valores` (Seção 1)
   vem logo abaixo, SEM fundo próprio — herda o vídeo/tint da seção-mãe, e é
   isso que faz dar pra ver um pedaço do fundo dentro da Seção 1, em vez de um
   corte seco entre as duas. */

.hero {
  position: relative;
  overflow: hidden;
  /* Fallback para navegadores sem WebGL. */
  background: radial-gradient(ellipse at 78% 36%, #173b70 0%, #081a37 40%, #000104 78%);
}
.hero-topo {
  position: relative; z-index: 1;
  min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--cabecalho) 24px 44px;
  text-align: left;
}
/* Brilho atmosférico que ATRAVESSA hero e Seção 1 (`inset:0` cobre a seção
   inteira). É o que faz o fundo da home "continuar" na Seção 1: os radiais
   morrem em `transparent`, então o topo da Seção 1 ainda pega um resto de luz e
   os três cartões, mais abaixo, caem no `--tinta` limpo. AZUL da logo como cor
   dominante, mais um toque SUTIL de laranja no alto-esquerda (pedido do Marcelo,
   31/08/2026), no espírito do print (laranja de um lado, azul do outro).
   Pintado como `::after`, fica POR CIMA do vídeo — é luz somada, não véu que
   lava a cena. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    /* Scrim escuro na coluna esquerda, POR CIMA do vídeo/tint, para o texto ler
       limpo (o vídeo espelhado joga o brilho para a direita; este scrim garante). */
    linear-gradient(90deg, rgba(5,9,20,.60), rgba(5,9,20,.14) 38%, transparent 56%),
    /* AZUL à esquerda, AMARELO à direita. Azul da logo descendo pela borda esquerda. */
    radial-gradient(760px 1300px at -4% 34%, rgba(37,99,235,.22), transparent 58%),
    radial-gradient(900px 1000px at 106% 30%, rgba(32,83,165,.18), transparent 56%);
}
.hero .envelope { max-width: var(--largura); position: relative; z-index: 1; }
.hero .envelope > * { position: relative; z-index: 1; }

/* Hero em duas colunas: texto + logo 3D em Gaussian Splat (assets/hero-splat.js).
   Sem o splat (sem WebGL2, dado economizado, ou erro), o container some via
   `hidden` e o texto simplesmente ocupa a largura toda — sem buraco no layout. */
.hero-grade { display: flex; align-items: center; justify-content: space-between; gap: 48px; }
.hero-txt { flex: 1 1 auto; min-width: 0; }
.hero-splat {
  position: relative;
  flex: 0 0 auto;
  width: min(54vw, 620px);
  aspect-ratio: 1 / 1;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.hero-splat--pronto {
  opacity: 1;
  animation: hero-splat-flutuar 6.5s ease-in-out infinite;
}
.hero-splat canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: auto;
}

/* Arco de luz platinado e shader junto ao olho 3D.
   Concentricamente ancorado ao Olho de Horus, flutua em perfeita sincronia com o splat 3D.
   Acabamento platinado hiper-realista com halo volumétrico, núcleo especular puro (#ffffff),
   anéis orbitais astronômicos finos e micro-estrelas cósmicas. */
.hero-splat .hero-arco {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
  animation: arco-shader-respiro 6.5s ease-in-out infinite;
}

@keyframes arco-shader-respiro {
  0%, 100% {
    filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.45)) drop-shadow(0 0 28px rgba(37, 99, 235, 0.35));
  }
  50% {
    filter: drop-shadow(0 0 16px rgba(224, 242, 254, 0.70)) drop-shadow(0 0 42px rgba(59, 130, 246, 0.55));
  }
}

@keyframes hero-splat-flutuar {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-splat--pronto { animation: none; }
  .hero-splat .hero-arco { animation: none; }
}

@media (max-width: 900px) {
  .hero-grade { flex-direction: column; }
  .hero-splat { width: min(92vw, 500px); margin-top: 8px; }
}

/* Renderizado a 60% da resolução da tela e esticado pelo CSS. A cena é toda
   suave, então a perda não aparece, e o custo por quadro cai à metade. */
.hero-velaris {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  display: block;
  pointer-events: none;
}

/* Vídeo de fundo. Ele passa DA altura do hero e entra ~16dvh na Seção 1, mas o
   `mask-image` dissolve o próprio vídeo até ficar transparente — então NÃO existe
   borda dura em lugar nenhum (era o pedido: nenhuma linha marcando o fim do
   fundo). Onde o vídeo já sumiu, aparece o `--tinta` do `.hero`. O filtro tira o
   matiz original (o Higgsfield entrega em tons roxos) e escurece um pouco; o
   `.hero-tint` por cima devolve a cor da Horus. */
.hero-video {
  position: absolute; top: 0; left: 0; z-index: 0;
  width: 100%; height: 116dvh;
  object-fit: cover;
  display: block; pointer-events: none;
  /* Granulado suavizado + ESPELHADO na horizontal (31/08, 2ª rodada): o feixe de
     luz do vídeo estava caindo atrás do texto (à esquerda) e atrapalhava a
     leitura; `scaleX(-1)` joga o brilho para o lado direito, deixando o texto
     sobre a zona escura. */
  filter: grayscale(0.94) contrast(0.98) brightness(0.8) blur(1.4px);
  transform: scaleX(-1);
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
}
/* A cor da Horus pintada sobre o vídeo em preto e branco: `mix-blend-mode: color`
   mantém a LUMINÂNCIA do vídeo e troca só o MATIZ. Diagonal 135° (canto
   alto-esquerda → baixo-direita): um canto quente sutil (âmbar apagado) →
   azul-marinho quase preto → AZUL DA LOGO (#2563EB, identidade/design-guide.md).
   Predomina azul; o quente é só um respiro no canto. A MESMA máscara do vídeo,
   para os dois dissolverem juntos e nunca sobrar um retângulo cinza. */
.hero-tint {
  position: absolute; top: 0; left: 0; z-index: 0; pointer-events: none;
  width: 100%; height: 116dvh;
  mix-blend-mode: color;
  background: linear-gradient(100deg,
    #2563EB 0%, #0b2858 30%, #4a4420 62%, #6a5417 82%, #7a5f12 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
}
/* Um segundo véu, agora em `overlay`, dá profundidade (queima os graves, acende
   os agudos) sem lavar a imagem — azul claro (#60A5FA) e azul forte (#2563EB) da
   logo, mais uma fagulha quente sutil no alto-esquerda. */
.hero-tint::after {
  content: ""; position: absolute; inset: 0;
  mix-blend-mode: overlay; opacity: .5;
  /* O brilho central que ficava esbranquiçado agora é AMARELO (pedido do
     Marcelo): o radial neutro/azul-claro do meio virou amarelo da marca, então
     a zona clara do vídeo puxa dourado em vez de branco. */
  background: radial-gradient(820px 1120px at 100% 32%, rgba(244,196,48,.32), transparent 58%),
              radial-gradient(1100px 820px at 2% 80%, rgba(37,99,235,.42), transparent 62%),
              radial-gradient(1050px 820px at 58% 60%, rgba(244,196,48,.22), transparent 62%);
}

.hero h1 {
  /* Título da home BOLD e maior (Marcelo, 31/08). O subtítulo não muda. */
  font-size: var(--t-80);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.03em;
  max-width: 15ch;
  margin-inline: 0;
  color: var(--branco);
}
/* O degradê pertence apenas à palavra destacada, não ao título inteiro. */
.h1-am {
  color: #2975e9;
  background: linear-gradient(180deg, #4f9cff 0%, #2975e9 58%, #1e68d8 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- 6b. A palavra que gira ---------- */
/* Pilha em grid: as quatro palavras ocupam a MESMA célula, então a caixa tem
   sempre a largura da mais larga e o título não pula de linha a cada troca.
   Bloco, para a palavra cair sozinha na última linha. Só transform e opacity. */

/* A palavra troca letra por letra, decodificando. O fantasma ocupa a mesma
   célula de grid com a palavra mais longa e fica invisível: é ele que define
   a largura da caixa, senão o título reflui a cada troca.
   `tabular-nums` e a fonte de largura fixa não resolvem aqui porque a Sora é
   proporcional; quem estabiliza é a caixa, não a letra. */
.gira {
  display: grid;
  justify-items: center;
  margin-top: .04em;
}
/* A palavra que gira agora é DOURADA (print 2, 26/08/2026): a fita mais quente
   do fundo é a dourada, e o acento do título acompanha. Era azul da marca. */
.gira > span {
  grid-area: 1 / 1;
  color: #2975e9;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.gira-fantasma { visibility: hidden; }

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  font-family: var(--corpo, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #38bdf8;
  margin-bottom: 20px;
}
.hero-br-mob { display: none; }
.pf-rodape-mob { display: none; }

.hero-lead {
  font-size: var(--t-22); color: var(--osso);
  max-width: 44ch; margin: 24px 0 0; line-height: 1.5;
}
/* Dois botões da home, alinhados à esquerda com o texto do hero. */
.hero-acao { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; justify-content: flex-start; }
/* CTAs da home: cantos mais suaves, sem mudar os botões do restante do site. */
.hero-acao .btn-azul, .hero-acao .btn-linha { border-radius: 14px; }

/* Primário branco ("Fale conosco"): mantém o brilho que segue o mouse do
  botão do header (`.cta-brilho` + `.js-glow`). */
.btn-azul {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 32px; border-radius: var(--raio-reto);
  border: 1.5px solid #ffffff;
  background: #ffffff;
  color: var(--tinta);
  font-family: var(--corpo); font-size: var(--t-17); font-weight: 600;
  text-decoration: none; white-space: nowrap;
  transition: transform .25s var(--curva), box-shadow .25s var(--curva), filter .25s var(--curva);
}
.btn-azul:hover { color: var(--tinta); transform: translateY(-2px); filter: brightness(.96); box-shadow: 0 12px 30px rgba(37,99,235,.30); }
.btn-azul .seta { font-size: var(--t-17); }

/* Secundário ("Nossos serviços"): SEM fundo, só contorno. No hover o texto SOBE e
   some, e uma cópia entra por baixo (rolo). Duas cópias empilhadas numa janela de
   uma linha; o hover desloca as duas para cima em -100%. */
.btn-linha {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 15px 30px; border-radius: var(--raio-reto);
  background: transparent; color: var(--osso);
  border: 1px solid rgba(255,255,255,.24);
  font-family: var(--corpo); font-size: var(--t-17); font-weight: 500;
  text-decoration: none; white-space: nowrap;
  transition: border-color .25s var(--curva), color .25s var(--curva), transform .25s var(--curva);
}
.btn-linha:hover { color: var(--branco); border-color: rgba(255,255,255,.5); transform: translateY(-2px); }
.btn-roll .roll {
  position: relative; display: block; overflow: hidden; height: 1.25em; line-height: 1.25;
}
.btn-roll .roll-t { display: block; transition: transform .38s var(--curva); }
.btn-roll:hover .roll-t { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) {
  .btn-roll:hover .roll-t { transform: none; }
}

/* A faixa de credenciais (4 negócios, 3 setores, 1 bloco, 0 dado inventado)
   saiu do hero em 05/08/2026 a pedido do Marcelo. Os quatro números continuam
   verdadeiros e continuam no repositório: se um dia voltarem, voltam medidos. */

/* ---------- 7. Faixa de palavras ---------- */
/* O ÚNICO marquee da página. A esteira de capacidades que morava no hero saiu:
   dois marquees numa página é antipadrão registrado, e a seção de serviços diz
   a mesma coisa melhor.
   O texto é vazado, que é o vidro da linguagem aplicado à tipografia: contorno
   claro e miolo quase transparente.
   ⚠️ O símbolo ampliado ao fundo contraria a regra do design-guide ("símbolo
   como marca-d'água está proibido"). Entrou a pedido do Marcelo em 05/08/2026,
   com duas defesas: aparece UMA vez na página, e é o único lugar em que o
   símbolo aparece grande. */

/* Sem fundo e sem fio: o símbolo é a superfície da faixa, e qualquer chapa
   por cima dele é justamente o "cinza na frente do símbolo" que o Marcelo
   mandou tirar em 05/08/2026. Sem fundo próprio a faixa também deixa de ser
   um container com boundary visível, então `cramped-padding` sai de cena. */
.faixa-palavras {
  position: relative;
  overflow: hidden;
  padding: 96px 24px;
}
.fp-simbolo {
  position: absolute; z-index: 0;
  left: 50%; top: 50%;
  width: 340px; height: auto;
  transform: translate(-50%, -50%);
  opacity: .55;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, #000 34%, transparent 82%);
  mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, #000 34%, transparent 82%);
}

/* O texto que corre precisa entrar e sair pela borda, senão vira caixa de
   texto rolando. Margem negativa resolveria e anula o recuo da faixa, que é
   justamente o que o detector cobra. Quem devolve o sangramento é a própria
   animação, que começa 24px à esquerda: o trilho nunca deixa a borda
   descoberta, nem no quadro zero nem na volta do laço. */
.fp-trilho {
  position: relative; z-index: 1;
  display: flex; width: max-content;
  animation: correr 42s linear infinite;
}
.fp-trilho span {
  display: flex; align-items: center;
  font-family: var(--display);
  font-size: var(--t-64);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  /* Letra totalmente vazada: miolo transparente de verdade, só o contorno.
     É o que deixa o símbolo aparecer POR DENTRO das letras, e não só entre
     elas. Sem `color:transparent` o miolo mantém um véu que apaga o olho. */
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(229,231,235,.55);
}
/* O separador é o ponto azul da marca, e é ele que carrega a cor aqui. */
.fp-trilho i {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--azul-luz);
  margin-inline: 44px;
  flex: none;
  -webkit-text-stroke: 0;
}
/* Não existe pausa no hover. A versão anterior tinha, e o efeito era o texto
   parar sozinho quando o mouse encostava, o que lê como bug e não como
   recurso. Faixa que corre, corre sempre. */
/* Parte 24px à esquerda para cobrir o recuo: quem devolve o sangramento é o
   `overflow:hidden` da faixa, que recorta na borda de verdade. Sem esse
   deslocamento sobra um vão de 24px na beirada esquerda no instante em que o
   laço reinicia. O recuo da faixa continua lá, e é ele que o detector cobra:
   quem estava zerando era o media query do celular, não isto. */
@keyframes correr {
  from { transform: translateX(-24px); }
  to   { transform: translateX(calc(-50% - 24px)); }
}


/* ---------- 7b. Seção 2 · A Horus / Visão (orbital) ---------- */
/* Print 3 do Marcelo: coluna de texto à esquerda, sistema orbital à direita com
   a esfera dourada no centro e os quatro pilares em volta. O `h` é honesto (sem
   a barra de métrica inventada do print). Toda a coreografia de scroll (o ponto
   que desce, a abertura, a logo que se desenha e sobe) é montada pelo GSAP; o
   estado LEGÍVEL abaixo é o de repouso, que vale sem JS. */
.ouro { color: #2975e9; }
/* Acento editorial: palavra em itálico serifado (Instrument Serif), no dourado
   da marca. É o toque das referências (amphora), usado em pontos de destaque. */
.ouro-it {
  color: #2975e9;
  font-style: normal; font-weight: inherit;
}

/* ---------- 7b. Seção 2 · Abordagem (só texto, grande) ---------- */
/* Só texto (prints Lesse / "WE STRIVE TO DESIGN"): uma frase enorme de duas cores
   à esquerda e um parágrafo de apoio pequeno à direita, no alto. Seção alta. As
   palavras surgem em cascata com a rolagem (SplitText, no index.html). */
.valores {
  position: relative;
  z-index: 1;
  padding: clamp(100px, 12vw, 175px) 24px clamp(120px, 14vw, 200px);
  overflow: hidden;
}

/* Fundo ondulado / wireframe mesh (conforme prints 1 & 2) */
.s1-waves-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.85;
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 65%, transparent 96%);
  mask-image: linear-gradient(to bottom, black 0%, black 65%, transparent 96%);
}

/* Transição contínua entre Seção 1 e Seção 2: dissolve o fundo e ondas no preto obsidiana (#000206) */
.valores::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 260px;
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 2, 6, 0.5) 45%, #000206 100%);
  pointer-events: none;
  z-index: 1;
}

.valores .envelope {
  position: relative;
  z-index: 2;
  max-width: 1140px;
}

/* Bloco principal: alinhado à esquerda com linha vertical guia */
.s1-bloco {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: clamp(24px, 3.4vw, 42px);
  text-align: left;
}

/* Linha vertical à esquerda (print 2) com animação de traçado ao entrar */
.s1-linha-guia {
  position: relative;
  flex: 0 0 1.5px;
  width: 1.5px;
  background: linear-gradient(
    180deg,
    rgba(59, 130, 246, 0.75) 0%,
    rgba(59, 130, 246, 0.35) 50%,
    rgba(255, 255, 255, 0.08) 85%,
    transparent 100%
  );
  border-radius: 1px;
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.s1-linha-guia::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #60a5fa;
  box-shadow: 0 0 8px 2px rgba(96, 165, 250, 0.8);
  opacity: 0;
  transition: opacity 0.8s ease 0.4s;
}

.s1-conteudo {
  flex: 1 1 auto;
  max-width: 860px;
}

/* Título em 3 linhas com motion ao entrar */
.s1-titulo {
  font-family: var(--display);
  font-size: clamp(40px, 5.2vw, 70px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: #ffffff;
  margin: 0 0 clamp(24px, 3vw, 34px);
}

.s1-linha {
  display: block;
  overflow: hidden;
}

.s1-palavra {
  display: inline-block;
  transform: translateY(112%);
  opacity: 0;
  filter: blur(8px);
  transition: transform 0.95s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.95s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.95s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity, filter;
}

/* 3ª linha azul brilhante ("também deveria mudar.") */
.s1-azul {
  color: #0077ff;
  text-shadow: 0 0 40px rgba(0, 119, 255, 0.35);
}

/* Descrição calibrada no tom e na quebra de 4 linhas do print */
.s1-descricao {
  font-family: var(--corpo);
  font-size: clamp(16.5px, 1.25vw, 18.5px);
  font-weight: 350;
  line-height: 1.62;
  color: rgba(226, 232, 240, 0.78);
  max-width: 585px;
  margin: 0;
  opacity: 0;
  transform: translateY(22px);
  filter: blur(5px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) 0.42s,
              transform 1s cubic-bezier(0.16, 1, 0.3, 1) 0.42s,
              filter 1s cubic-bezier(0.16, 1, 0.3, 1) 0.42s;
  will-change: transform, opacity, filter;
}

/* ===== Estado Ativo (Motion ao entrar na Seção 1) ===== */
.s1-secao.ativo .s1-linha-guia {
  transform: scaleY(1);
}
.s1-secao.ativo .s1-linha-guia::after {
  opacity: 1;
}

.s1-secao.ativo .s1-linha:nth-child(1) .s1-palavra {
  transform: translateY(0);
  opacity: 1;
  filter: blur(0);
  transition-delay: 0.1s;
}

.s1-secao.ativo .s1-linha:nth-child(2) .s1-palavra {
  transform: translateY(0);
  opacity: 1;
  filter: blur(0);
  transition-delay: 0.22s;
}

.s1-secao.ativo .s1-linha:nth-child(3) .s1-palavra {
  transform: translateY(0);
  opacity: 1;
  filter: blur(0);
  transition-delay: 0.34s;
}

.s1-secao.ativo .s1-descricao {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

@media (max-width: 860px) {
  .valores { padding: 70px 20px 105px; }
  .s1-bloco { gap: 18px; }
  .s1-titulo { font-size: clamp(32px, 8.5vw, 44px); line-height: 1.12; margin-bottom: 20px; }
  .s1-descricao { font-size: 16px; line-height: 1.55; max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .s1-linha-guia { transform: none; transition: none; }
  .s1-linha-guia::after { opacity: 1; transition: none; }
  .s1-palavra { transform: none; opacity: 1; filter: none; transition: none; }
  .s1-descricao { transform: none; opacity: 1; filter: none; transition: none; }
}

/* ---------- 7a2. Nosso Stack (2 fileiras opostas, ícones coloridos, 31/08) ----------
   Duas fileiras: a de cima corre da direita para a esquerda, a de baixo ao
   contrário. Cada logo é o ícone COLORIDO oficial dentro de uma CAIXA DE VIDRO,
   com um brilho de cor ao fundo (print n8n). Vidro por LUZ (gradiente + borda +
   realce interno), sem backdrop-filter — regra da casa e mais leve com ~70 tiles. */
.stk-secao {
  position: relative;
  z-index: 2;
  padding: clamp(90px, 10vw, 150px) 24px clamp(110px, 12vw, 170px);
  background: #000206;
  overflow: hidden;
}

/* Brilho atmosférico azul sutil e amplo por trás da matriz 3D, sem caixa */
.stk-secao::before {
  content: "";
  position: absolute;
  left: 24%;
  top: 48%;
  width: min(1000px, 92vw);
  height: min(720px, 80vh);
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(14, 46, 98, 0.28) 0%, rgba(5, 18, 42, 0.12) 55%, transparent 75%);
  pointer-events: none;
  filter: blur(70px);
  z-index: 0;
}

.stk-secao .envelope {
  position: relative;
  z-index: 2;
  max-width: 1240px;
}

/* Header superior: NOSSO STACK (com quadradinho azul, sem número) */
.stk-topo-linha {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: clamp(40px, 5.5vw, 68px);
  opacity: 0;
  transform: translateY(-16px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.stk-quadrado {
  width: 7px;
  height: 7px;
  background: #0077ff;
  border-radius: 1.5px;
  box-shadow: 0 0 10px rgba(0, 119, 255, 0.7);
  display: inline-block;
  flex-shrink: 0;
  transform: translateY(-1px);
}
.stk-tag {
  font-family: var(--display, 'DM Sans', sans-serif);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.65);
}

/* Grid principal em 2 colunas */
.stk-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.85fr);
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
  position: relative;
  z-index: 2;
}

/* Coluna Esquerda: Palco 3D de Teclas de Vidro Flutuantes */
.stk-palco-3d {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-left: -40px;
}

/* Cenario 3D 100% borderless com perspectiva profunda e dissolução suave para o fundo escuro */
.stk-cenario-3d {
  position: relative;
  width: calc(100% + 220px);
  height: 700px;
  perspective: 920px;
  perspective-origin: 12% 48%;
  overflow: visible;
  background: transparent;
  border: none;
  mask-image: linear-gradient(to right, black 0%, black 45%, rgba(0,0,0,0.65) 60%, rgba(0,0,0,0.15) 75%, transparent 88%);
  -webkit-mask-image: linear-gradient(to right, black 0%, black 45%, rgba(0,0,0,0.65) 60%, rgba(0,0,0,0.15) 75%, transparent 88%);
}

/* Plano 3D que recua em perspectiva para bem longe no fundo */
.stk-plano-3d {
  position: absolute;
  top: -45px;
  left: -35px;
  width: calc(100% + 820px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  transform: rotateX(-8deg) rotateY(-36deg) rotateZ(8deg);
  transform-style: preserve-3d;
  will-change: transform;
  transition: opacity 0.8s ease;
  opacity: 0;
  pointer-events: auto;
}

/* Fileiras e Trilhos do Marquee */
.stk-fileira {
  position: relative;
  width: 100%;
  overflow: visible;
  transform-style: preserve-3d;
}

.stk-trilho {
  display: flex;
  gap: 20px;
  width: max-content;
  will-change: transform;
  transform-style: preserve-3d;
}

/* Fileiras 1 e 3: da Direita para a Esquerda */
.stk-fileira--r2l .stk-trilho {
  animation: stk-scroll-r2l 40s linear infinite;
}
/* Fileiras 2 e 4: da Esquerda para a Direita */
.stk-fileira--l2r .stk-trilho {
  animation: stk-scroll-l2r 44s linear infinite;
}

/* Variação sutil de tempo para ritmo orgânico */
.stk-fileira:nth-child(1) .stk-trilho { animation-duration: 38s; }
.stk-fileira:nth-child(2) .stk-trilho { animation-duration: 44s; }
.stk-fileira:nth-child(3) .stk-trilho { animation-duration: 40s; }
.stk-fileira:nth-child(4) .stk-trilho { animation-duration: 46s; }

/* Pausa suave ao hover no trilho */
.stk-trilho:hover {
  animation-play-state: paused;
}

@keyframes stk-scroll-r2l {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@keyframes stk-scroll-l2r {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

/* Teclas de Vidro (Glass Squircle Tiles) fiéis ao design de referência */
.stk-card {
  position: relative;
  flex: 0 0 134px;
  width: 134px;
  height: 134px;
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(18, 30, 54, 0.85) 0%, rgba(7, 13, 25, 0.95) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 1px 0 rgba(0, 0, 0, 0.5),
    inset 0 0 16px 0 rgba(0, 119, 255, 0.06),
    0 16px 32px -6px rgba(0, 0, 0, 0.85),
    0 0 20px -2px rgba(0, 102, 255, 0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 10px;
  cursor: default;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s ease,
              border-color 0.35s ease;
  user-select: none;
}

/* Calota de brilho curvo superior (reflexo de vidro acrílico) */
.stk-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.02) 42%, transparent 68%);
  pointer-events: none;
}

/* Hover individual no card */
.stk-card:hover {
  transform: translateY(-4px) scale(1.08) translateZ(28px);
  border-color: rgba(0, 119, 255, 0.65);
  box-shadow:
    inset 0 1.5px 1.5px 0 rgba(255, 255, 255, 0.55),
    inset 0 0 24px 0 rgba(0, 119, 255, 0.32),
    0 22px 42px -4px rgba(0, 0, 0, 0.95),
    0 0 28px 4px rgba(0, 119, 255, 0.4);
  z-index: 25;
}

.stk-card-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  transform: translateZ(12px);
}

.stk-icon {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.45));
  transition: transform 0.3s ease;
}

.stk-card:hover .stk-icon {
  transform: scale(1.12);
}

.stk-icon--inv {
  filter: brightness(0) invert(1) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.45));
}

.stk-nome {
  font-family: var(--ff-base, 'Inter', -apple-system, sans-serif);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.88);
  margin-top: 2px;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}

/* Camadas residuais desligadas */
.stk-dof-blur-dir,
.stk-dof-fade-dir,
.stk-luz-fundo {
  display: none !important;
}

/* Anotação decorativa inferior direita (do print): FERRAMENTAS REAIS PARA RESULTADOS REAIS. */
.stk-anotacao {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 16px;
  padding-right: 18px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s;
}

.stk-anotacao-linha {
  display: flex;
  align-items: center;
  width: 44px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(0, 119, 255, 0.65));
  position: relative;
}

.stk-anotacao-ponto {
  position: absolute;
  right: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0077ff;
  box-shadow: 0 0 10px #0077ff, 0 0 20px #0077ff;
}

.stk-anotacao-texto {
  font-family: var(--ff-base, 'Inter', -apple-system, sans-serif);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  line-height: 1.45;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.55);
  margin: 0;
}

/* Coluna Direita: Informações e Benefícios */
.stk-info {
  text-align: left;
}

.stk-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.65);
  margin-bottom: 22px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}
.stk-eyebrow-dash {
  width: 20px;
  height: 1.5px;
  background: rgba(59, 130, 246, 0.7);
  border-radius: 1px;
}

.stk-titulo {
  font-family: var(--display);
  font-size: clamp(32px, 3.8vw, 52px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: #ffffff;
  margin-bottom: 24px;
}
.stk-linha-t {
  display: block;
  overflow: hidden;
}
.stk-palavra-t {
  display: inline-block;
  transform: translateY(115%);
  opacity: 0;
  filter: blur(8px);
  transition: transform 0.95s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.95s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.95s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity, filter;
}
.stk-destaque-azul {
  color: #0077ff;
  text-shadow: 0 0 35px rgba(0, 119, 255, 0.35);
}

.stk-descricao {
  font-family: var(--corpo);
  font-size: clamp(15px, 1.15vw, 17px);
  font-weight: 350;
  line-height: 1.65;
  color: rgba(226, 232, 240, 0.74);
  margin-bottom: 34px;
  max-width: 530px;
  opacity: 0;
  transform: translateY(18px);
  filter: blur(4px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.38s,
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.38s,
              filter 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.38s;
  will-change: transform, opacity, filter;
}

/* Lista de 4 benefícios */
.stk-beneficios {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0;
  margin: 0;
}
.stk-item {
  display: flex;
  align-items: center;
  gap: 14px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.stk-check {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stk-check svg {
  width: 100%;
  height: 100%;
}
.stk-item-texto {
  font-size: clamp(14.5px, 1.05vw, 16px);
  font-weight: 400;
  color: rgba(241, 245, 249, 0.9);
  letter-spacing: -0.01em;
}

/* ===== Motion ao Entrar (Classe .ativo) ===== */
.stk-secao.ativo .stk-topo-linha {
  opacity: 1;
  transform: translateY(0);
}
.stk-secao.ativo .stk-eyebrow {
  opacity: 1;
  transform: translateY(0);
}
.stk-secao.ativo .stk-linha-t:nth-child(1) .stk-palavra-t {
  transform: translateY(0); opacity: 1; filter: blur(0); transition-delay: 0.15s;
}
.stk-secao.ativo .stk-linha-t:nth-child(2) .stk-palavra-t {
  transform: translateY(0); opacity: 1; filter: blur(0); transition-delay: 0.25s;
}
.stk-secao.ativo .stk-linha-t:nth-child(3) .stk-palavra-t {
  transform: translateY(0); opacity: 1; filter: blur(0); transition-delay: 0.35s;
}
.stk-secao.ativo .stk-linha-t:nth-child(4) .stk-palavra-t {
  transform: translateY(0); opacity: 1; filter: blur(0); transition-delay: 0.45s;
}
.stk-secao.ativo .stk-descricao {
  opacity: 1; transform: translateY(0); filter: blur(0);
}

.stk-secao.ativo .stk-item:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.5s; }
.stk-secao.ativo .stk-item:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.6s; }
.stk-secao.ativo .stk-item:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.7s; }
.stk-secao.ativo .stk-item:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.8s; }

.stk-secao.ativo .stk-anotacao {
  opacity: 1;
  transform: translateY(0);
}

/* Ativação do Plano 3D e Anotação na entrada */
.stk-secao.ativo .stk-plano-3d {
  opacity: 1;
}

.stk-secao.ativo .stk-anotacao {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 960px) {
  .stk-secao {
    padding: calc(var(--cabecalho, 72px) + 36px) 20px 90px;
  }
  .stk-topo-linha {
    margin-bottom: 24px;
  }
  .stk-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .stk-palco-3d {
    order: 2;
  }
  .stk-info {
    order: 1;
  }
  .stk-cenario-3d {
    height: 380px;
    perspective: 900px;
    border-radius: 18px;
  }
  .stk-plano-3d {
    top: -24px;
    left: -32px;
    width: calc(100% + 140px);
    transform: rotateX(10deg) rotateY(-14deg) rotateZ(2deg);
    gap: 12px;
  }
  .stk-card {
    flex: 0 0 88px;
    width: 88px;
    height: 88px;
    border-radius: 16px;
    padding: 8px 6px;
  }
  .stk-icon {
    width: 26px;
    height: 26px;
  }
  .stk-nome {
    font-size: 9.5px;
    margin-top: 1px;
  }
  .stk-anotacao {
    justify-content: flex-start;
    padding-right: 0;
    margin-top: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stk-topo-linha, .stk-eyebrow, .stk-palavra-t, .stk-descricao, .stk-item, .stk-anotacao {
    opacity: 1; transform: none; filter: none; transition: none;
  }
  .stk-plano-3d {
    opacity: 1; transform: none !important; transition: none;
  }
  .stk-trilho {
    animation: none !important;
  }
}

.viagem {
  position: fixed; inset: 0; z-index: 5;
  display: none; place-items: center;
  pointer-events: none;
}
html.viagem-on .viagem { display: grid; }

.vg-palco { position: relative; width: min(88vw, 620px); aspect-ratio: 1 / 1; }

/* A linha vertical reta saiu em 26/08/2026 a pedido do Marcelo: a esfera fica
   sozinha, mais baixa e só com a própria luz. */

.vg-aneis, .vg-olho { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vg-giro  { transform-box: fill-box; transform-origin: center; animation: orbe-gira 64s linear infinite; }
.vg-part  { transform-box: fill-box; transform-origin: center; animation: orbe-gira 30s linear infinite reverse; }
@keyframes orbe-gira { to { transform: rotate(360deg); } }
.pt { filter: drop-shadow(0 0 5px currentColor); }
.pt-a{transform:translate(118px,0)}   .pt-b{transform:translate(0,-150px)}
.pt-c{transform:translate(-200px,44px)} .pt-d{transform:translate(170px,-120px)}
.pt-e{transform:translate(-120px,-160px)} .pt-f{transform:translate(212px,90px)}
.vg-olho { opacity: 0; filter: drop-shadow(0 0 8px rgba(244,196,48,.4)); }

/* A esfera dourada: o ponto da home e a pupila do olho. Menor (108px, no tamanho
   do print) e com mais luz: um brilho especular que gira devagar por cima do
   vidro, além do halo pulsante. */
.vg-sfera {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 108px; height: 108px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #FFF6D4 0%, #F4C430 42%, #C08A0E 76%, #6E4E08 100%);
  box-shadow: 0 0 60px 16px rgba(244,196,48,.55), 0 0 140px 30px rgba(244,196,48,.22), inset 0 0 30px rgba(255,244,196,.55), inset -6px -8px 18px rgba(80,52,4,.55);
  z-index: 3;
}
/* Brilho especular que corre pela superfície: o "shader" pedido, feito de luz. */
.vg-sfera::before {
  content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(255,255,255,.42) 40deg, transparent 120deg, transparent 360deg);
  mix-blend-mode: screen; opacity:.7;
  -webkit-mask: radial-gradient(circle, #000 52%, transparent 72%);
          mask: radial-gradient(circle, #000 52%, transparent 72%);
  animation: sfera-sheen 7s linear infinite;
}
@keyframes sfera-sheen { to { transform: rotate(360deg); } }
.vg-halo { position:absolute; inset:-55%; border-radius:50%; background: radial-gradient(circle, rgba(244,196,48,.4), transparent 66%); animation: nucleo-pulsa 3.4s ease-in-out infinite; }
@keyframes nucleo-pulsa { 0%,100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.14); opacity: 1; } }
/* O clarão do big bang (GSAP acende no estouro). */
.vg-flare { position:absolute; left:50%; top:50%; width:108px; height:108px; margin:-54px 0 0 -54px; border-radius:50%; background: radial-gradient(circle, rgba(255,244,206,.95), rgba(244,196,48,.35) 34%, transparent 62%); opacity:0; pointer-events:none; z-index:2; }

.vg-pilar { position:absolute; z-index:4; width:180px; display:flex; flex-direction:column; gap:6px; opacity:0; }
.vg-ico { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--vidro); border:1px solid var(--vidro-fio); box-shadow:var(--vidro-luz); color:var(--azul-luz); }
.vg-ico svg { width:18px; height:18px; }
.vg-nome { font-family:var(--display); font-weight:600; font-size:var(--t-17); color:var(--osso); }
.vg-txt { font-size:var(--t-13); line-height:1.45; color:var(--osso-2); }
.vg-pv { top:-6%;  left:56%; }
.vg-pe { top:42%;  left:100%; }
.vg-pt { top:100%; left:44%; }
.vg-pi { top:42%;  left:-18%; align-items:flex-end; text-align:right; }

.vg-titulo { position:absolute; top:14vh; left:0; right:0; text-align:center; padding-inline:24px; opacity:0; }
.vg-titulo .rotulo { margin-bottom:18px; }
.vg-titulo h2 { font-size:var(--t-64); max-width:16ch; margin:0 auto; letter-spacing:-0.03em; }

/* ---------- 7c. Seção 3 · Serviços (bento que empilha) ---------- */
/* Cards bento que EMPILHAM: cada um prende no alto e o próximo sobe na frente,
   de cima para baixo (Processes & Management do web3.xmethod.de). É `sticky`
   puro — o card N gruda em `top`, o card N+1 vem no fluxo e o cobre porque
   pinta por cima. O `--i` dá um degrau de `top` por card, então sobra uma tira
   do anterior à mostra. O GSAP só encolhe/escurece o coberto, para profundidade. */

/* A roleta prende no alto e troca de serviço com a rolagem. Três colunas:
   índice 01–06 (esquerda), o serviço ativo (centro), a imagem 3D (direita).
   No repouso (sem JS/mobile) é uma lista simples: `rol-on` (só desktop+motion)
   liga a versão presa e o palco de troca. */
.roleta {
  position: relative;
  border-top: 1px solid rgba(255,255,255,.05);
  /* Serviços · fundo MAIS ESCURO que o void, em contraste com a seção anterior
     (Marcelo). Pontinhos no fundo via .roleta::before. */
  background:
    radial-gradient(1200px 800px at 50% 0%, rgba(7,122,199,.05), transparent 60%),
    #090613;
}
/* Grade de pontinhos ao redor da seção de serviços. */
.roleta::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1.4px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 82%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 82%);
}
.roleta > * { position: relative; z-index: 1; }
.rol-pin { padding: 120px 40px; }
.roleta.rol-on .rol-pin {
  min-height: 100dvh; padding: var(--cabecalho) 40px 40px;
  display: flex; flex-direction: column;
}
/* O intro agora vive FORA do pin e rola normalmente (o título sobe ao rolar).
   Ganha o respiro que o pin dava. */
.rol-intro { margin-bottom: 8px; text-align: center; padding: 116px 24px 0; }
.roleta.rol-on .rol-intro { padding: 168px 40px 40px; }
/* Título MAIOR e CENTRALIZADO (Marcelo, 28/08). As palavras surgem em cascata
   pelo SplitText (data-split), como na seção de abordagem. */
.rol-intro-txt {
  color: var(--osso); font-size: var(--t-40); font-weight: 600;
  line-height: 1.12; letter-spacing: -0.02em;
  max-width: 22ch; margin: 16px auto 0;
}
.rol-intro-txt .linha-mask { display: inline-block; overflow: hidden; vertical-align: top; }
.rol-grid { width: 100%; }
.roleta.rol-on .rol-grid {
  flex: 1; display: grid;
  grid-template-columns: auto minmax(0, 1.15fr) minmax(0, 0.95fr);
  gap: 56px; align-items: center;
}

/* Índice 01–06 numa RODA (print 2): os números ficam num arco à esquerda que
   GIRA com a rolagem; o que chega na posição central (o ponto azul) é o ativo.
   Cada número é radial ao arco, então inclina seguindo a curva. Só na versão presa. */
.rol-indice { display: none; position: relative; width: 110px; height: 56vh; align-self: center; }
.roleta.rol-on .rol-indice { display: block; }
/* O ARCO visível atrás dos números (print 1): um círculo grande e fraco, centrado
   na mesma origem da roda (os números sentam na circunferência, raio 360). */
.rol-arco {
  display: none;
  position: absolute; left: -300px; top: 50%;
  width: 720px; height: 720px; margin: -360px 0 0 -360px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 50%; pointer-events: none;
}
.roleta.rol-on .rol-arco { display: block; }
.rol-roda {
  position: absolute; left: -300px; top: 50%;
  width: 0; height: 0; --rot: 0deg;
  transform: rotate(var(--rot)); transform-origin: 0 0;
}
.rol-num {
  position: absolute; left: 0; top: 0;
  transform: rotate(var(--a)) translate(360px, -0.55em);
  transform-origin: 0 0;
  font-family: var(--mono); font-size: var(--t-28); font-weight: 500;
  color: var(--osso-2); opacity: .3; white-space: nowrap;
  transition: opacity .4s var(--curva), color .4s var(--curva);
}
.rol-num.ativo { opacity: 1; color: var(--azul-real); }
/* O ponto que marca a posição ativa (fixo, o número é que gira até ele). Azul,
   a cor da seção de serviços na paleta recolorida. */
.rol-marca {
  position: absolute; left: 44px; top: 50%; transform: translateY(-50%);
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--azul-real); box-shadow: 0 0 12px var(--azul-real);
}

.rol-eyebrow {
  font-family: var(--mono); font-size: var(--t-13); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--azul-real);
}

/* No repouso, os itens são uma lista vertical. Na versão presa, o palco vira uma
   JANELA: os serviços empilhados ROLAM para cima; o do centro fica nítido e os de
   cima/baixo ficam desfocados e apagados (opacidade e blur setados pelo JS,
   conforme a distância do centro). O de cima "sobe e some", o de baixo entra. */
.rol-palco { position: relative; }
.roleta.rol-on .rol-palco { height: 62vh; overflow: hidden; }
.rol-stack { position: relative; display: flex; flex-direction: column; gap: 48px; }
.roleta.rol-on .rol-stack {
  position: absolute; top: 0; left: 0; right: 0; display: block; gap: 0;
  will-change: transform;
}
.rol-item { max-width: 52ch; }
.roleta.rol-on .rol-item {
  height: 340px; max-width: 44ch;
  display: flex; flex-direction: column; justify-content: center;
}
.rol-cat {
  display: inline-block; font-family: var(--mono);
  font-size: var(--t-13); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--azul-real); margin-bottom: 16px;
}
.rol-item h2 { font-size: var(--t-40); letter-spacing: -0.02em; max-width: 16ch; }
.rol-item p { margin-top: 18px; color: var(--osso-2); font-size: var(--t-17); line-height: 1.55; }
/* Pills por serviço (print 1): três rótulos técnicos abaixo da descrição. */
.rol-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.rol-tags span {
  font-family: var(--mono); font-size: var(--t-13); letter-spacing: .02em;
  color: var(--osso-2);
  padding: 7px 14px; border-radius: var(--pilula);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--vidro-fio);
}

/* As imagens 3D, CIRCULARES e flutuando (print 2): sem moldura de card, com um
   brilho azul atrás para dar o ar de esfera suspensa. Na versão presa empilham no
   mesmo quadro: a ativa nítida, as outras desfocadas atrás. */
.rol-visuais { display: none; position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 460px; justify-self: end; }
/* Maior e sangrando um pouco pela direita (print 1: a esfera 3D encosta e passa
   da borda). O `overflow-x: clip` do html recorta o excesso sem gerar rolagem. */
.roleta.rol-on .rol-visuais { display: block; max-width: 520px; margin-right: -50px; }
.rol-visuais::before {
  content: ""; position: absolute; inset: -6%; border-radius: 50%; z-index: 0;
  background: radial-gradient(circle, rgba(201,153,46,.30), transparent 68%);
  filter: blur(8px);
}
.rol-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: 50%;
  box-shadow: 0 30px 80px rgba(0,0,0,.55), inset 0 0 40px rgba(0,0,0,.4);
  opacity: 0; transform: scale(.9); filter: blur(16px);
  transition: opacity .6s var(--curva), transform .6s var(--curva), filter .6s var(--curva);
}
.rol-img.ativo { opacity: 1; transform: none; filter: none; z-index: 2; }

/* ─── PONTE n8n (28/08/2026) ─────────────────────────────────────────────
   Recolor global aplicado; as seções de serviços, compromisso e etapas ainda
   serão REESTRUTURADAS na próxima rodada (serviços empilhando, padrões em fileira,
   etapas no formato print 5). Enquanto isso: imagens 3D dos serviços FORA (pedido
   do Marcelo), e as cores por card unificadas em ELECTRIC — sem arco-íris. */
.rol-visuais { display: none !important; }
.roleta.rol-on .rol-grid { grid-template-columns: auto minmax(0, 1fr) !important; }
.ql-card, .ps-passo { --cor: #4b93e6 !important; }

/* ---------- 7c-2. Serviços · PILHA sticky (n8n, 28/08/2026) ----------
   Ao rolar, cada serviço SURGE POR CIMA do anterior: painéis `position: sticky`
   de tela cheia, opacos, que se cobrem. Sem JS. */
.svcs { position: relative; background: #020617; }   /* tom pedido pelo Marcelo (16/09/2026) */
.svcs::before {   /* pontinhos ao redor */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1.4px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(ellipse 92% 46% at 50% 16%, #000 30%, transparent 80%);
          mask-image: radial-gradient(ellipse 92% 46% at 50% 16%, #000 30%, transparent 80%);
}
/* Cabeçalho da seção em FLUXO NORMAL (Marcelo, 31/08): NÃO é sticky — rola para
   cima e sai do viewport. Só os cards abaixo empilham. Centralizado, sem a linha
   divisória que ficava acima do título (removida a pedido). */
.svcs-intro { position: relative; z-index: 1; text-align: center; padding: 96px 24px 56px; }
/* Rótulo da seção padronizado com o nosso stack: DM Sans 11.5px 600,
   tracking 0.24em, e o quadradinho azul padrão da Horus. */
.svcs-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--display, 'DM Sans', sans-serif);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.65);
  margin-bottom: 18px;
}
.svcs-quadrado {
  width: 7px;
  height: 7px;
  background: #0077ff;
  border-radius: 1.5px;
  box-shadow: 0 0 10px rgba(0, 119, 255, 0.7);
  display: inline-block;
  flex-shrink: 0;
  transform: translateY(-1px);
}
.svcs-titulo { font-size: var(--t-54); max-width: 20ch; margin: 0 auto; font-weight: 700; letter-spacing: -0.03em; line-height: 1.02; }
.svcs-em { color: #0486f8; }   /* ênfase em "instala." (Marcelo, 16/09/2026) */
.svcs-sub { margin: 18px auto 0; max-width: 58ch; color: #94a3b8; font-size: var(--t-22); font-weight: 400; line-height: 1.5; }

.svcs-stack { position: relative; z-index: 1; }
/* Cada painel gruda a 100px do topo (respeitando a navbar fixa, ~80px) e o
   seguinte sobe por cima, empilhando (gaveta). Puro CSS, sem JS. */
.svc {
  position: sticky; top: 100px;
  min-height: calc(100vh - 100px); min-height: calc(100dvh - 100px);
  display: flex; align-items: center;
  padding: 56px 24px;
  border-top: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 -30px 90px rgba(0,0,0,.6);
  overflow: hidden;
}
.svc--void  { background: var(--tinta); }
.svc--elec  { background:
  radial-gradient(1000px 820px at 80% 28%, rgba(7,122,199,.22), transparent 55%),
  radial-gradient(820px 700px at 14% 92%, rgba(107,33,239,.18), transparent 55%),
  #0c0a1a; }
.svc--ember { background:
  radial-gradient(1000px 820px at 78% 24%, rgba(244,196,48,.18), transparent 52%),
  radial-gradient(760px 680px at 12% 96%, rgba(220,165,20,.12), transparent 55%),
  #141007; }

.svc-in {
  position: relative; z-index: 1; width: 100%;
  display: grid; grid-template-columns: minmax(0,0.9fr) minmax(0,1.1fr);
  gap: 48px; align-items: center;
}
/* Topo do card: número + traço + categoria, padronizados com o design system */
.svc-topo-linha {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.svc-num {
  font-family: var(--display);
  font-size: 0.9375rem;
  font-weight: 700;
  color: #0077ff;
  letter-spacing: 0.05em;
  line-height: 1;
}
.svc-traco {
  width: 28px;
  height: 1.5px;
  background: rgba(59, 130, 246, 0.45);
  flex-shrink: 0;
}
.svc-cat {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #94a3b8;
  margin: 0;
  line-height: 1;
}

/* Fallback caso svc-num e svc-cat não estejam sob .svc-topo-linha */
.svc-txt > .svc-num {
  display: inline-block;
  margin-bottom: 8px;
}
.svc-txt > .svc-cat {
  margin-bottom: 16px;
}

/* Título principal do card: padronizado com o sistema visual de títulos da Hórus */
.svc-h {
  font-family: var(--display);
  font-size: var(--t-40);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #ffffff;
  max-width: 16ch;
  margin: 0 0 20px 0;
}

/* Descrição do serviço: corpo balanceado em slate-400 */
.svc-desc {
  font-family: var(--corpo);
  color: #94a3b8;
  font-size: var(--t-17);
  font-weight: 400;
  line-height: 1.65;
  max-width: 48ch;
  margin: 0;
}

/* Lista de capacidades: itens refinados com ponto luminescente azul */
.svc-caps {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 28px;
}
.svc-caps li {
  position: relative;
  padding-left: 20px;
  font-family: var(--corpo);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.5;
  color: #cbd5e1;
}
.svc-caps li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0077ff;
  box-shadow: 0 0 8px #0077ff;
}

/* ---- Mocks dos serviços (painel com brilho) + MOTION DE ENTRADA ----
   Cada card recebe `.svc-ativo` (JS + IntersectionObserver) quando entra na tela,
   e daí saem os contadores, o gráfico que desenha, o chat que chega e as barras que
   sobem. Os estados iniciais ocultos vivem sob `.js` (a classe que o script põe no
   <html>): sem JS, tudo aparece estático. Tudo pausa em prefers-reduced-motion. */
.svc-vis { display: flex; justify-content: center; }
.mock {
  position: relative; width: 100%; max-width: 560px; aspect-ratio: 4 / 3;
  border-radius: var(--raio-lg); background: var(--carta); overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 30px 70px rgba(0,0,0,.5);
}
.mock::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(620px 420px at 72% 18%, rgba(7,122,199,.12), transparent 60%);
}
.mock > * { position: relative; z-index: 1; }
/* números que contam: tabulares, para não "pular" largura ao rodar */
.mock b[data-count] { font-family: var(--display); font-weight: 600; color: var(--branco); font-variant-numeric: tabular-nums; }
.mock .pn-label { display: block; font-size: 12px; color: var(--osso-2); letter-spacing: .01em; }
.tf-up, .tf-down { color: #34d399; font-size: 12px; font-weight: 600; white-space: nowrap; }
.ag-check { color: #34d399; font-weight: 700; }

/* ===== 01 · dispositivos (print 6): navegador + celular, conteúdo ROLANDO em loop
   (o site "se movimentando"). Contornos violeta luminosos, detalhe amarelo. ===== */
.mock-devices { overflow: hidden; }
.dv-laptop { position: absolute; left: 4%; top: 11%; width: 68%; border-radius: 12px 12px 4px 4px; background: #0d1020; box-shadow: inset 0 0 0 1px rgba(124,140,255,.34), 0 24px 50px rgba(0,0,0,.5); overflow: hidden; animation: dv-float 6s ease-in-out infinite; }
.dv-topbar { display: flex; align-items: center; gap: 5px; padding: 8px 11px; background: #121631; }
.dv-topbar i { width: 6px; height: 6px; border-radius: 50%; background: #4a4f74; }
.dv-nav { margin-left: auto; display: flex; gap: 6px; }
.dv-nav b { width: 16px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.16); }
.dv-view { position: relative; height: 188px; overflow: hidden; padding: 0 13px; }
.dv-scroll { display: flex; flex-direction: column; gap: 11px; padding: 13px 0; animation: dv-updown 11s cubic-bezier(.5,0,.2,1) infinite; }
.dv-hero { position: relative; flex: none; height: 54px; border-radius: 8px; background: linear-gradient(120deg, rgba(107,33,239,.55), rgba(75,147,230,.4)); }
.dv-badge { position: absolute; left: 12px; top: 12px; width: 34px; height: 8px; border-radius: 4px; background: var(--dourado); }
.dv-lines { display: flex; flex-direction: column; gap: 6px; }
.dv-lines i { height: 6px; border-radius: 3px; background: rgba(255,255,255,.12); }
.dv-lines i:last-child { width: 66%; }
.dv-cards { display: flex; gap: 8px; }
.dv-cards span { flex: 1; height: 40px; border-radius: 7px; background: rgba(255,255,255,.05); box-shadow: inset 0 2px 0 rgba(124,140,255,.5); }
.dv-wide { height: 30px; border-radius: 7px; background: rgba(255,255,255,.04); }
.dv-phone { position: absolute; right: 3%; bottom: 6%; width: 27%; border-radius: 18px; background: #0d1020; box-shadow: inset 0 0 0 1px rgba(124,140,255,.4), 0 20px 40px rgba(0,0,0,.55); padding: 10px 8px 12px; overflow: hidden; animation: dv-float 6s ease-in-out .8s infinite; }
.dv-notch { width: 34%; height: 4px; border-radius: 3px; background: #2a3050; margin: 0 auto 8px; }
.dv-pview { height: 150px; overflow: hidden; }
.dv-pscroll { display: flex; flex-direction: column; gap: 6px; animation: dv-updown 11s cubic-bezier(.5,0,.2,1) infinite; }
.dv-pbadge { flex: none; width: 30px; height: 7px; border-radius: 4px; background: var(--dourado); }
.dv-phero { flex: none; height: 42px; border-radius: 8px; background: linear-gradient(160deg, rgba(107,33,239,.55), rgba(75,147,230,.42)); }
.dv-pline { flex: none; height: 6px; border-radius: 3px; background: rgba(255,255,255,.12); }
.dv-pline.dv-short { width: 58%; }
.dv-pbtn { flex: none; margin: 2px 0 6px; height: 14px; width: 74%; border-radius: 5px; background: var(--dourado); }
@keyframes dv-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
/* o site "navega": desce, pausa, sobe, pausa e repete (não é rolagem infinita) */
@keyframes dv-updown {
  0%   { transform: translateY(0); }
  32%  { transform: translateY(-46%); }
  46%  { transform: translateY(-46%); }
  80%  { transform: translateY(0); }
  100% { transform: translateY(0); }
}
/* cursor que aparece, caminha até um botão e clica, em sincronia com a rolagem */
.dv-cursor { position: absolute; z-index: 4; width: 15px; height: 15px; left: 0; top: 0; margin: -3px 0 0 -3px; color: #fff; filter: drop-shadow(0 2px 3px rgba(0,0,0,.55)); pointer-events: none; animation: dv-cursor 11s cubic-bezier(.5,0,.2,1) infinite; }
.dv-cursor svg { display: block; width: 100%; height: 100%; }
@keyframes dv-cursor {
  0%   { left: 66%; top: 80%; opacity: 0; transform: scale(1); }
  6%   { left: 66%; top: 80%; opacity: 1; }
  30%  { left: 66%; top: 80%; opacity: 1; transform: scale(1); }
  44%  { left: 41%; top: 47%; transform: scale(1); }
  48%  { left: 41%; top: 47%; transform: scale(.82); }
  52%  { left: 41%; top: 47%; transform: scale(1); }
  78%  { left: 66%; top: 80%; opacity: 1; }
  100% { left: 66%; top: 80%; opacity: 1; }
}
/* anel de clique: pulsa no instante em que o cursor pressiona */
.dv-clickring { position: absolute; z-index: 3; left: 41%; top: 47%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; border: 1.5px solid var(--dourado); opacity: 0; transform: scale(.3); pointer-events: none; animation: dv-clickring 11s cubic-bezier(.5,0,.2,1) infinite; }
@keyframes dv-clickring {
  0%,46%   { opacity: 0; transform: scale(.3); }
  48%      { opacity: .9; transform: scale(.3); }
  56%      { opacity: 0; transform: scale(1.5); }
  100%     { opacity: 0; transform: scale(1.5); }
}

/* ===== 02 · agente (chat de verdade com avatares pessoa/bot + CRM) ===== */
.mock-agente { display: grid; grid-template-columns: 1.1fr .78fr; gap: 12px; padding: 15px; align-content: center; }
.ag-chat { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.ag-row { display: flex; align-items: flex-end; gap: 7px; }
.ag-row.ag-bot { justify-content: flex-end; }
.ag-ava { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; }
.ag-ava svg { width: 15px; height: 15px; }
.ag-ava-user { background: #232b40; color: #b9c4dc; }
.ag-ava-bot { background: linear-gradient(135deg, #4b93e6, #6b21ef); color: #fff; }
.ag-bubble { max-width: 78%; padding: 8px 11px; font-size: 12px; line-height: 1.35; color: var(--osso); background: #1b2233; border-radius: 12px 12px 12px 3px; }
.ag-bot .ag-bubble { background: linear-gradient(135deg, rgba(75,147,230,.30), rgba(107,33,239,.24)); box-shadow: inset 0 0 0 1px rgba(120,160,240,.32); color: #eaf1ff; border-radius: 12px 12px 3px 12px; }
.ag-confirm { display: flex; align-items: center; gap: 7px; margin-top: 2px; padding: 8px 10px; border-radius: 10px; background: rgba(52,211,153,.10); box-shadow: inset 0 0 0 1px rgba(52,211,153,.28); font-size: 11.5px; color: #cfeee0; }
.ag-crm { border-radius: 12px; background: #131a2a; padding: 13px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); align-self: center; }
.ag-crm-t { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--osso-2); margin-bottom: 11px; }
.ag-crm ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ag-crm li { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--osso); }
.ag-crm li b { margin-left: auto; }
.ag-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.ag-azul { background: #4b93e6; } .ag-ambar { background: #F4C430; } .ag-verde { background: #34d399; } .ag-cinza { background: #8b93a7; }
.js .mock-agente .ag-row, .js .mock-agente .ag-confirm { opacity: 0; transform: translateY(9px); }
.svc-ativo .mock-agente .ag-row:nth-child(1) { animation: msg-in .5s var(--curva) .2s forwards; }
.svc-ativo .mock-agente .ag-row:nth-child(2) { animation: msg-in .5s var(--curva) .95s forwards; }
.svc-ativo .mock-agente .ag-row:nth-child(3) { animation: msg-in .5s var(--curva) 1.7s forwards; }
.svc-ativo .mock-agente .ag-confirm { animation: msg-in .5s var(--curva) 2.4s forwards; }
@keyframes msg-in { to { opacity: 1; transform: translateY(0); } }

/* ===== 03 · sistemas sob medida (print 2: painel de dados, verde) ===== */
.mock-sistema { padding: 14px; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.sy-top { display: grid; grid-template-columns: 1fr .82fr; gap: 10px; }
.sy-card { padding: 11px 12px; border-radius: 11px; background: #131a2a; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.sy-clients { display: flex; flex-direction: column; gap: 3px; }
.sy-ico { color: #34d399; }
.sy-ico svg { width: 22px; height: 22px; }
.sy-num, .sy-big { color: #34d399 !important; }
.sy-num { font-size: 22px; }
.sy-delta { font-size: 11px; color: #34d399; }
.sy-mini { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sy-mini li { display: flex; justify-content: space-between; font-size: 11px; color: var(--osso-2); }
.sy-mini li b { color: var(--osso); font-weight: 600; }
.sy-graf { display: grid; place-items: center; }
.sy-barsvg { width: 100%; height: 62px; }
.sy-barsvg rect { fill: #34d399; opacity: .9; transform-box: fill-box; transform-origin: bottom; }
.js .sy-barsvg rect { transform: scaleY(0); }
.svc-ativo .sy-barsvg rect { animation: bar-rise .7s var(--curva) forwards; }
.svc-ativo .sy-barsvg rect:nth-child(1) { animation-delay: .2s; }
.svc-ativo .sy-barsvg rect:nth-child(2) { animation-delay: .3s; }
.svc-ativo .sy-barsvg rect:nth-child(3) { animation-delay: .4s; }
.svc-ativo .sy-barsvg rect:nth-child(4) { animation-delay: .5s; }
.svc-ativo .sy-barsvg rect:nth-child(5) { animation-delay: .6s; }
.svc-ativo .sy-barsvg rect:nth-child(6) { animation-delay: .7s; }
@keyframes bar-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.sy-prog { display: flex; flex-direction: column; gap: 8px; }
.sy-prow { display: grid; grid-template-columns: 62px 1fr; align-items: center; gap: 10px; }
.sy-bar { height: 7px; border-radius: 4px; background: rgba(255,255,255,.08); position: relative; overflow: hidden; }
.sy-bar::after { content: ""; position: absolute; inset: 0; width: var(--v); border-radius: 4px; transform-origin: left; }
.sy-bar-v::after { background: #34d399; }
.sy-bar-a::after { background: var(--dourado); }
.js .sy-bar::after { transform: scaleX(0); }
.svc-ativo .sy-bar::after { animation: bar-grow .9s var(--curva) .3s forwards; }
.sy-bottom { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; }
.sy-auto { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-radius: 11px; background: rgba(52,211,153,.08); box-shadow: inset 0 0 0 1px rgba(52,211,153,.2); }
.sy-big { font-size: 24px; }
.sy-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.sy-tags span { padding: 4px 10px; border-radius: 999px; font-size: 11px; color: var(--osso); background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }

/* ===== 04 · loja virtual (print 3: carrinho + pagamento, vendas subindo, âmbar) ===== */
.mock-loja { padding: 15px; display: flex; flex-direction: column; gap: 11px; justify-content: center; }
.lj-top { display: flex; gap: 10px; align-items: stretch; }
.lj-cart { flex: none; width: 44px; border-radius: 10px; display: grid; place-items: center; color: var(--tinta); background: var(--dourado); }
.lj-cart svg { width: 22px; height: 22px; }
.lj-pay { flex: 1; min-height: 44px; border-radius: 10px; background: #1c1830; box-shadow: inset 0 0 0 1px rgba(244,196,48,.18); display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 0 12px; }
.lj-pay i { height: 5px; border-radius: 3px; background: rgba(255,255,255,.14); }
.lj-pay i:last-child { width: 55%; }
.lj-chart { position: relative; height: 66px; border-radius: 10px; background: #171226; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.lj-chart svg { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); }
.lj-line { stroke-dasharray: 100; }
.js .lj-line { stroke-dashoffset: 100; }
.svc-ativo .lj-line { animation: tf-draw 1.3s var(--curva) .3s forwards; }
.js .lj-area, .js .lj-p { opacity: 0; }
.svc-ativo .lj-area { animation: fade-in .8s ease .5s forwards; }
.svc-ativo .lj-p { animation: fade-in .5s ease 1.3s forwards; }
.lj-total { padding: 10px 13px; border-radius: 11px; background: #131a2a; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); display: flex; flex-direction: column; gap: 3px; }
.lj-big { font-size: 24px; color: var(--dourado) !important; }
.lj-delta { font-size: 11px; color: var(--osso-2); }
.lj-adds { list-style: none; margin: 6px 0 0; padding: 0; display: flex; gap: 18px; }
.lj-adds li { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--osso); }

/* ===== 05 · dashboard de tráfego (print 4) ===== */
.mock-trafego { padding: 15px; display: flex; flex-direction: column; gap: 11px; justify-content: center; }
.tf-invest { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 10px; background: #141a2b; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.tf-invico { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: #34d399; background: rgba(52,211,153,.12); }
.tf-invico svg { width: 18px; height: 18px; }
.tf-inv-txt { display: flex; flex-direction: column; gap: 2px; }
.tf-invest b { font-size: 19px; }
.tf-cells { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tf-cell { padding: 10px 12px; border-radius: 10px; background: #141a2b; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); display: flex; flex-direction: column; gap: 4px; }
.tf-line2 { display: flex; align-items: baseline; gap: 7px; }
.tf-cell b { font-size: 18px; }
.tf-chart { position: relative; height: 92px; border-radius: 10px; background: #101627; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.tf-chart svg { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); }
.tf-line { stroke-dasharray: 100; stroke-dashoffset: 0; }
.js .tf-line { stroke-dashoffset: 100; }
.svc-ativo .tf-line { animation: tf-draw 1.4s var(--curva) .3s forwards; }
@keyframes tf-draw { to { stroke-dashoffset: 0; } }
.js .tf-area, .js .tf-dot { opacity: 0; }
.svc-ativo .tf-area { animation: fade-in .8s ease .6s forwards; }
.svc-ativo .tf-dot { animation: fade-in .4s ease 1.6s forwards; }
.tf-pill { position: absolute; right: 10px; top: 8px; padding: 3px 10px; border-radius: 999px; background: rgba(75,147,230,.18); color: #8fbaff; font-size: 12px; font-weight: 600; }
@keyframes fade-in { to { opacity: 1; } }
@keyframes bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ===== 06 · visibilidade local (print 5: Desempenho Local completo) ===== */
.mock-local { padding: 13px; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.lc-head { display: flex; align-items: center; justify-content: space-between; }
.lc-h-t { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--branco); }
.lc-hi { display: inline-flex; color: var(--azul-luz); }
.lc-hi svg { width: 15px; height: 15px; }
.lc-drop { font-size: 11px; color: var(--osso-2); padding: 4px 9px; border-radius: 7px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.lc-body { display: grid; grid-template-columns: 1fr .95fr; gap: 10px; }
/* Mapa fiel ao print (Marcelo, 01/09): ruas reais em SVG, rota azul com glow,
   pino dourado com glow, e o ALVO brilhante (ponto + anel elíptico) no destino. */
.lc-map { position: relative; border-radius: 12px; overflow: hidden; background: #0b0f1a; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); min-height: 172px; }
.lc-mapsvg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lc-st { fill: none; stroke-linecap: round; }
.lc-min .lc-st { stroke: #161d30; stroke-width: 2; }
.lc-maj .lc-st { stroke: #262f49; stroke-width: 3.4; }
.lc-routeline { stroke-width: 3.4; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(74,150,255,.7)); stroke-dasharray: 100; }
.js .lc-routeline { stroke-dashoffset: 100; }
.svc-ativo .lc-routeline { animation: tf-draw 1.4s var(--curva) .5s forwards; }
.lc-routestart { fill: #7fc0ff; filter: drop-shadow(0 0 5px rgba(90,160,255,.95)); }
.lc-target { position: absolute; left: 50%; top: 56%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: #ffd54a; box-shadow: 0 0 10px 3px rgba(255,200,60,.9), 0 0 30px 10px rgba(255,185,35,.45); z-index: 3; }
.lc-target::after { content: ""; position: absolute; left: 50%; top: 50%; width: 66px; height: 28px; margin: -14px 0 0 -33px; border-radius: 50%; border: 1px solid rgba(255,200,60,.32); transform: rotate(-9deg); }
.lc-poi { position: absolute; width: 4px; height: 4px; border-radius: 50%; }
.lc-poi--a { left: 71%; top: 13%; background: #ffd54a; box-shadow: 0 0 6px rgba(255,200,60,.85); }
.lc-poi--b { left: 87%; top: 84%; background: #5aa0ff; box-shadow: 0 0 6px rgba(90,160,255,.85); }
.lc-pin { position: absolute; left: 50%; top: 33%; width: 30px; height: 30px; margin-left: -15px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--dourado); box-shadow: 0 10px 24px rgba(244,196,48,.5), 0 0 22px rgba(244,196,48,.7); z-index: 4; }
/* Glow do pino (Marcelo: "ícone brilhando levemente igual ao print"): halo dourado
   que respira por baixo do pino. */
.lc-pinglow { position: absolute; left: 50%; top: 38%; width: 74px; height: 74px; margin: -37px 0 0 -37px; border-radius: 50%; background: radial-gradient(circle, rgba(244,196,48,.5), rgba(244,196,48,0) 66%); z-index: 2; animation: lc-glow 2.6s ease-in-out infinite; }
@keyframes lc-glow { 0%,100% { transform: scale(.82); opacity: .55; } 50% { transform: scale(1.18); opacity: 1; } }
.lc-pin::after { content: ""; position: absolute; left: 50%; top: 42%; transform: translate(-50%,-50%); width: 12px; height: 12px; border-radius: 50%; background: #0b0f1a; }
.js .lc-pin { opacity: 0; }
.svc-ativo .lc-pin { animation: lc-drop .6s var(--curva) .3s forwards; }
@keyframes lc-drop { 0% { opacity: 0; transform: rotate(-45deg) translateY(-16px); } 60% { opacity: 1; transform: rotate(-45deg) translateY(4px); } 100% { opacity: 1; transform: rotate(-45deg) translateY(0); } }
.lc-side { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.lc-stat { padding: 8px 11px; border-radius: 10px; background: #131a2a; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); display: flex; flex-direction: column; gap: 2px; }
.lc-stat-l { display: flex; align-items: center; gap: 7px; }
.lc-stat-l b { font-size: 17px; }
.lc-stars { display: inline-flex; align-items: center; gap: 2px; }
.lc-stars i { width: 12px; height: 12px; background: var(--dourado); clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
.js .lc-stars i { opacity: 0; transform: scale(.4); }
.svc-ativo .lc-stars i { animation: star-in .35s var(--curva) forwards; }
.svc-ativo .lc-stars i:nth-child(1) { animation-delay: .8s; }
.svc-ativo .lc-stars i:nth-child(2) { animation-delay: .9s; }
.svc-ativo .lc-stars i:nth-child(3) { animation-delay: 1s; }
.svc-ativo .lc-stars i:nth-child(4) { animation-delay: 1.1s; }
.svc-ativo .lc-stars i:nth-child(5) { animation-delay: 1.2s; }
@keyframes star-in { to { opacity: 1; transform: scale(1); } }
.lc-foot { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.lc-fc { padding: 9px 5px; border-radius: 10px; background: #131a2a; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.lc-fc i { display: inline-flex; color: var(--azul-luz); }
.lc-fc i svg { width: 16px; height: 16px; }
.lc-fc b { font-size: 15px; }
.lc-fc span { font-size: 10px; color: var(--osso-2); line-height: 1.2; }

/* =====================================================================
   SERVIÇOS v23 · devices reais + fidelidade aos prints (01/09/2026)
   Cards 3 e 4 usam os mockups reais (laptop/celular WebP, fundo transparente
   + glow). A UI é sobreposta na TELA de cada device: retângulo % nos frontais,
   matrix3d (homografia medida do próprio PNG) nos inclinados, então as
   informações ficam na mesma angulação. Card 5 = painel de campanhas (print 1).
   ===================================================================== */

/* -- palco por card (fundo no tom do comp) -- */
.mock--dash { background: radial-gradient(120% 92% at 62% 8%, #15203b, #0a1020 72%); }
.mock--dash::after { background: radial-gradient(560px 380px at 70% 10%, rgba(96,124,255,.16), transparent 62%); }
/* Loja: palco ABERTO (sem caixa, sem corte). Fundo contínuo escuro->ouro que
   se dissolve nas bordas (não é uma caixa de luz), luz difusa, e camadas de
   poeira de ouro + linhas pontilhadas. Marcelo, 01/09: trazer a "alma" da
   referência (aberto, atmosférico, elementos inteiros flutuando). */
.mock--shop { aspect-ratio: 1 / 1; background: transparent; box-shadow: none; overflow: visible; border-radius: 0; }
.mock--shop::before { content: ""; position: absolute; inset: -9% -7% -13%; z-index: 0; border-radius: 28px;
  background:
    radial-gradient(125% 98% at 54% 106%, #2c1e0d 0%, #17110a 46%, rgba(14,10,7,0) 78%),
    radial-gradient(72% 52% at 60% 82%, rgba(244,196,48,.13), transparent 68%); }
.mock--shop::after { inset: 0; background: radial-gradient(66% 48% at 58% 80%, rgba(244,196,48,.10), transparent 72%); }
/* poeira de ouro: pontos difusos espalhados, alguns maiores/borrados */
.shop-dust { position: absolute; inset: -6%; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(2.4px 2.4px at 16% 34%, rgba(244,196,48,.75), transparent 60%),
    radial-gradient(1.6px 1.6px at 30% 16%, rgba(244,196,48,.55), transparent 60%),
    radial-gradient(2px 2px at 47% 8%, rgba(244,196,48,.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 72% 22%, rgba(244,196,48,.6), transparent 60%),
    radial-gradient(2.2px 2.2px at 88% 40%, rgba(244,196,48,.5), transparent 60%),
    radial-gradient(1.6px 1.6px at 12% 66%, rgba(244,196,48,.5), transparent 60%),
    radial-gradient(2px 2px at 40% 88%, rgba(244,196,48,.45), transparent 60%),
    radial-gradient(1.8px 1.8px at 63% 94%, rgba(244,196,48,.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 92% 74%, rgba(244,196,48,.5), transparent 60%),
    radial-gradient(6px 6px at 24% 78%, rgba(244,196,48,.16), transparent 70%),
    radial-gradient(8px 8px at 80% 60%, rgba(244,196,48,.14), transparent 72%);
  animation: shop-dust 9s ease-in-out infinite; }
@keyframes shop-dust { 0%,100% { opacity: .8; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-5px); } }
/* linhas pontilhadas (contornos que flutuam atrás, como na referência) */
.shop-outline { position: absolute; z-index: 0; pointer-events: none; border: 1px dashed rgba(244,196,48,.3); border-radius: 16px; }
.shop-outline--a { right: 3%; top: 10%; width: 20%; height: 40%; }
.shop-outline--b { left: 4%; top: 20%; width: 26%; height: 34%; border-color: rgba(244,196,48,.2); }

/* -- infra de device -- */
.dev-scene { position: relative; }
.dev-frame { position: absolute; container-type: inline-size; }
.dev-lyr { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.dev-img { position: absolute; top: 0; left: 0; display: block; }
.dev-img--flip { transform: scaleX(-1); }
.dev-screen { position: absolute; top: 0; left: 0; transform-origin: 0 0; overflow: hidden; color: #e8ecf6; font-family: var(--corpo); line-height: 1.25; }
.dev-screen b { font-family: var(--display); }

.dev-frame--lap-ang { aspect-ratio: 1536 / 1024; }
.dev-frame--lap-ang .dev-lyr { width: 1536px; height: 1024px; transform: scale(calc(100cqw / 1536px)); }
.dev-frame--lap-ang .dev-img { width: 1536px; height: 1024px; }
.dev-screen--lap-ang { width: 1000px; height: 700px; transform: matrix3d(0.75445,-0.060872,0,-0.000134,-0.150253,0.871561,0,-0.000044,0,0,1,0,524,118,0,1); }

.dev-frame--ph-ang { aspect-ratio: 1024 / 1536; }
.dev-frame--ph-ang .dev-lyr { width: 1024px; height: 1536px; transform: scale(calc(100cqw / 1024px)); }
.dev-frame--ph-ang .dev-img { width: 1024px; height: 1536px; }
.dev-screen--ph-ang { width: 340px; height: 880px; transform: matrix3d(1.187583,-0.221651,0,-0.000157,-0.105124,1.239178,0,-0.000068,0,0,1,0,273,188,0,1); }

.dev-frame--lap-front { aspect-ratio: 1536 / 1024; }
.dev-frame--lap-front .dev-img { width: 100%; height: auto; }
.dev-screen--lap-front { left: 12.9%; top: 13.0%; width: 74.2%; height: 66.3%; container-type: inline-size; }

.dev-frame--ph-front { aspect-ratio: 887 / 1774; }
.dev-frame--ph-front .dev-img { width: 100%; height: auto; }
.dev-screen--ph-front { left: 12.2%; top: 6.4%; width: 76.0%; height: 85.4%; container-type: inline-size; }

/* -- posições de cena -- */
.mock--dash .dev-frame--lap-ang { width: 88%; left: 3%; top: 3%; }
.mock--dash .dev-frame--ph-ang  { width: 32%; right: 0; bottom: -1%; z-index: 3; filter: drop-shadow(-6px 9px 14px rgba(0,0,0,.5)); }
.mock--shop .dev-frame--lap-front { width: 74%; right: 2%; top: 27%; z-index: 1; }
.mock--shop .dev-frame--ph-front  { width: 27%; left: 1%; bottom: 3%; z-index: 3; filter: drop-shadow(-8px 12px 22px rgba(0,0,0,.6)); }

/* ---- 03 · dashboard (na tela do laptop inclinado), fonte grande (é escalada) ---- */
.ui-dash { width: 1000px; height: 700px; display: grid; grid-template-columns: 96px 1fr; background: #0b1322; }
.ud-side { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 34px 0; background: #0e1830; }
.ud-logo { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg,#8090ff,#5566e6); }
.ud-i { width: 32px; height: 32px; border-radius: 9px; background: rgba(255,255,255,.07); }
.ud-i--on { background: rgba(124,140,255,.3); box-shadow: inset 0 0 0 1px rgba(124,140,255,.5); }
.ud-main { padding: 30px 34px; display: flex; flex-direction: column; gap: 20px; }
.ud-head { display: flex; align-items: center; justify-content: space-between; }
.ud-head b { font-size: 34px; font-weight: 600; color: #fff; }
.ud-chip { font-size: 17px; color: #9aa6bd; padding: 8px 16px; border-radius: 10px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); }
.ud-row1 { display: grid; grid-template-columns: 1fr 1.12fr; gap: 18px; }
.ud-card { padding: 20px 22px; border-radius: 16px; background: #111c30; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.ui-dash .pn-label { font-size: 18px; color: #9aa6bd; }
.ud-num { display: block; margin: 8px 0 4px; font-size: 44px; font-weight: 700; color: #34d399 !important; }
.ud-delta { font-size: 18px; color: #34d399; }
.ud-mini { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ud-mini li { display: flex; justify-content: space-between; font-size: 18px; color: #9aa6bd; }
.ud-mini li b { color: #e8ecf6; font-weight: 600; }
.ud-graf { display: flex; flex-direction: column; }
.ud-bars { width: 100%; height: 120px; margin-top: 12px; }
.ud-bars rect { fill: #8090ff; transform-box: fill-box; transform-origin: bottom; }
.ud-bars rect:nth-child(even) { fill: #5566e6; }
.ud-months { display: flex; justify-content: space-between; margin-top: 10px; font-size: 15px; color: #7c88a0; }
.ud-prog { display: flex; flex-direction: column; gap: 14px; }
.ud-prow { display: grid; grid-template-columns: 118px 1fr auto; align-items: center; gap: 16px; font-size: 19px; color: #9aa6bd; }
.ud-prow b { color: #e8ecf6; font-size: 20px; }
.ud-bar { height: 12px; border-radius: 7px; background: rgba(255,255,255,.08); position: relative; overflow: hidden; }
.ud-bar::after { content: ""; position: absolute; inset: 0; width: var(--v); border-radius: 7px; background: #8090ff; transform-origin: left; }
.ud-bar--a::after { background: var(--dourado); }
.ud-bottom { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; }
.ud-auto { padding: 18px 22px; border-radius: 16px; background: rgba(52,211,153,.09); box-shadow: inset 0 0 0 1px rgba(52,211,153,.22); }
.ud-big { display: block; font-size: 40px; font-weight: 700; color: #34d399 !important; margin: 6px 0 3px; }
.ud-donut { display: flex; align-items: center; gap: 18px; }
.ud-ring { width: 98px; height: 98px; border-radius: 50%; flex: none; background: conic-gradient(#8090ff 0 42%, #34d399 42% 74%, var(--dourado) 74% 100%); -webkit-mask: radial-gradient(circle, transparent 52%, #000 53%); mask: radial-gradient(circle, transparent 52%, #000 53%); }
.ud-leg { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 17px; color: #9aa6bd; }
.ud-leg i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--c); margin-right: 9px; vertical-align: middle; }

/* ---- 03 · visão geral (na tela do celular inclinado) ---- */
.ui-mob { width: 340px; height: 880px; background: #0a1120; padding: 42px 26px; display: flex; flex-direction: column; gap: 22px; }
.um-head { display: flex; align-items: center; justify-content: space-between; }
.um-head b { font-size: 30px; font-weight: 600; color: #fff; }
.um-burger { display: flex; flex-direction: column; gap: 5px; }
.um-burger i { width: 26px; height: 3px; border-radius: 2px; background: #9aa6bd; }
.um-bell { color: #9aa6bd; }
.um-bell svg { width: 28px; height: 28px; }
.um-rev { padding: 24px; border-radius: 20px; background: #111c30; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.ui-mob .pn-label { font-size: 20px; color: #9aa6bd; }
.um-big { display: block; margin: 8px 0 4px; font-size: 46px; font-weight: 700; color: #fff; }
.um-delta { font-size: 20px; color: #34d399; }
.um-line { width: 100%; height: 66px; margin-top: 16px; }
.um-sec { font-size: 20px; color: #9aa6bd; }
.um-acts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.um-acts li { display: flex; align-items: center; gap: 14px; }
.um-dot { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.um-azul { background: #8090ff; } .um-verde { background: #34d399; } .um-ambar { background: var(--dourado); }
.um-txt { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.um-txt b { font-size: 22px; color: #e8ecf6; font-weight: 600; }
.um-txt em { font-size: 18px; color: #8290a8; font-style: normal; }
.um-acts time { font-size: 17px; color: #7c88a0; }
.um-btn { margin-top: auto; text-align: center; padding: 20px; border-radius: 16px; background: linear-gradient(135deg,#8090ff,#5566e6); color: #fff; font-size: 22px; font-weight: 600; }

/* ---- 04 · loja: página de produto (tela do laptop reto), unidades cqw p/ escalar ---- */
.ui-shop { width: 100%; height: 100%; background: #0f1218; color: #e7e9ee; display: flex; flex-direction: column; }
.us-bar { display: flex; align-items: center; gap: 4cqw; padding: 1.8cqw 4cqw; background: #16191f; box-shadow: inset 0 -1px 0 rgba(255,255,255,.06); }
.us-logo { width: 9cqw; height: 9cqw; border-radius: 2.4cqw; background: var(--dourado); color: #1a1c22; display: grid; place-items: center; flex: none; }
.us-logo svg { width: 6cqw; height: 6cqw; }
.us-nav { display: flex; gap: 4cqw; flex: 1; }
.us-nav i { width: 8cqw; height: 2.2cqw; border-radius: 2px; background: rgba(255,255,255,.14); }
.us-cart { position: relative; color: #e7e9ee; flex: none; }
.us-cart svg { width: 6.4cqw; height: 6.4cqw; }
.us-cart em { position: absolute; top: -1.4cqw; right: -1.8cqw; min-width: 4.6cqw; height: 4.6cqw; padding: 0 1cqw; border-radius: 50%; background: var(--dourado); color: #1a1c22; font-size: 3cqw; font-weight: 700; display: grid; place-items: center; font-style: normal; }
.us-body { flex: 1; display: grid; grid-template-columns: 1.02fr 1fr; gap: 2.6cqw; padding: 1.4cqw 4cqw; align-items: center; }
.us-prod { aspect-ratio: 16 / 9; border-radius: 3cqw; background: linear-gradient(160deg,#1c1f27,#12141a); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); display: grid; place-items: center; overflow: hidden; }
.us-shoe { width: 98%; height: 90%; object-fit: contain; }
.us-info { display: flex; flex-direction: column; gap: 1.4cqw; }
.us-l { height: 2.6cqw; border-radius: 2px; background: rgba(255,255,255,.16); }
.us-l1 { width: 88%; } .us-l2 { width: 58%; }
.us-stars { color: var(--dourado); font-size: 4.4cqw; letter-spacing: .7cqw; }
.us-stars i { color: rgba(255,255,255,.22); font-style: normal; }
.us-price { font-size: 6cqw; font-weight: 700; color: #fff; }
.us-buyrow { display: flex; align-items: center; gap: 2.2cqw; margin-top: .2cqw; }
.us-buy { flex: 1; text-align: center; padding: 2.3cqw; border-radius: 2.2cqw; background: var(--dourado); color: #1a1c22; font-size: 3.2cqw; font-weight: 700; letter-spacing: 0; white-space: nowrap; }
.us-heart { width: 8.2cqw; height: 8.2cqw; border-radius: 2.2cqw; display: grid; place-items: center; color: #e7e9ee; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.2); flex: none; }
.us-heart svg { width: 4.8cqw; height: 4.8cqw; }
.us-badges { display: grid; grid-template-columns: repeat(3,1fr); gap: 2cqw; padding: 1.8cqw 4cqw 2.2cqw; background: #16191f; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.us-badges span { display: flex; align-items: center; gap: 1.4cqw; font-size: 2.9cqw; color: #aab0bc; }
.us-badges svg { width: 5cqw; height: 5cqw; color: var(--dourado); flex: none; }

/* ---- 04 · pedido confirmado (tela do celular reto) ---- */
.ui-ok { width: 100%; height: 100%; background: radial-gradient(120% 80% at 50% 0%, #14203a, #0a1120 70%); color: #e8ecf6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5cqw; padding: 12cqw 9cqw; text-align: center; }
.uk-check { width: 22cqw; height: 22cqw; border-radius: 50%; display: grid; place-items: center; color: #34d399; box-shadow: inset 0 0 0 2.4cqw rgba(52,211,153,.16); }
.uk-check svg { width: 12cqw; height: 12cqw; }
.uk-title { font-size: 8cqw; font-weight: 700; color: #fff; }
.uk-sub { font-size: 4.4cqw; line-height: 1.5; color: #9aa6bd; }
.uk-btn { margin-top: 3cqw; padding: 4.4cqw 6cqw; border-radius: 3cqw; background: var(--dourado); color: #1a1c22; font-size: 4.4cqw; font-weight: 700; letter-spacing: .04em; }

/* ---- 04 · cards flutuando (vendas + carrinho), print 3 ---- */
.shop-float { position: absolute; z-index: 5; }
.shop-sales { left: 0; top: 1%; width: 36%; min-width: 132px; padding: 11px 13px; border-radius: 12px; background: #12182a; box-shadow: inset 0 0 0 1px rgba(244,196,48,.22), 0 16px 36px rgba(0,0,0,.5); }
.shop-sales .pn-label { font-size: 11px; color: #9aa6bd; }
.ss-big { display: block; margin: 4px 0 2px; font-size: 21px; font-weight: 700; color: var(--dourado) !important; }
.ss-delta { font-size: 10.5px; color: #34d399; white-space: nowrap; }
.ss-spark { width: 100%; height: 26px; margin-top: 7px; }
.shop-cart { right: 2%; top: 5%; width: 12%; aspect-ratio: 1; border-radius: 12px; background: var(--dourado); color: #1a1c22; display: grid; place-items: center; box-shadow: 0 14px 30px rgba(244,196,48,.3); }
.shop-cart svg { width: 52%; height: 52%; }

/* ---- 05 · painel de campanhas (print 1, roxo) ---- */
.mock-camp { padding: 16px; display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.cp-top { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border-radius: 13px; background: #171331; box-shadow: inset 0 0 0 1px rgba(140,108,255,.22); }
.cp-ico { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #a78bff; background: rgba(140,108,255,.16); }
.cp-ico svg { width: 20px; height: 20px; }
.cp-inv { display: flex; flex-direction: column; gap: 2px; }
.cp-inv b { font-size: 22px; }
.cp-drop { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #c9c2e6; padding: 6px 11px; border-radius: 9px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); }
.cp-drop svg { width: 13px; height: 13px; }
.cp-cells { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cp-cell { position: relative; padding: 12px 14px; border-radius: 12px; background: #141024; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); overflow: hidden; }
.cp-cell-l { display: flex; align-items: baseline; gap: 8px; margin-top: 3px; }
.cp-cell-l b { font-size: 22px; }
.cp-spark { position: absolute; right: 10px; bottom: 11px; width: 72px; height: 24px; opacity: .9; }
.cp-panel { padding: 14px 15px 12px; border-radius: 13px; background: #120e26; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.cp-panel-t { font-size: 13px; color: #c9c2e6; }
.cp-plot { position: relative; height: 116px; margin-top: 10px; padding-right: 32px; }
.cp-chart { width: 100%; height: 100%; }
.cp-grid { stroke: rgba(255,255,255,.06); stroke-width: 1; }
.cp-yaxis { position: absolute; right: 0; top: -2px; bottom: -2px; display: flex; flex-direction: column; justify-content: space-between; font-size: 10px; color: #6f6a86; }
.cp-pill { position: absolute; right: 40px; top: 0; padding: 3px 10px; border-radius: 999px; background: rgba(140,108,255,.26); color: #c3b2ff; font-size: 12px; font-weight: 600; }
.cp-xaxis { display: flex; justify-content: space-between; margin-top: 8px; padding-right: 32px; font-size: 10px; color: #6f6a86; }

/* ---- entrada (charts que desenham, barras que sobem), sob .svc-ativo ---- */
.cp-line, .cp-sparkline, .um-stroke, .ss-line { stroke-dasharray: 100; }
.js .cp-line, .js .cp-sparkline, .js .um-stroke, .js .ss-line { stroke-dashoffset: 100; }
.svc-ativo .cp-line { animation: tf-draw 1.4s var(--curva) .3s forwards; }
.svc-ativo .cp-sparkline { animation: tf-draw 1s var(--curva) .5s forwards; }
.svc-ativo .um-stroke { animation: tf-draw 1.3s var(--curva) .4s forwards; }
.svc-ativo .ss-line { animation: tf-draw 1.1s var(--curva) .5s forwards; }
.js .cp-area, .js .cp-dot, .js .um-area { opacity: 0; }
.svc-ativo .cp-area { animation: fade-in .8s ease .6s forwards; }
.svc-ativo .cp-dot { animation: fade-in .4s ease 1.6s forwards; }
.svc-ativo .um-area { animation: fade-in .8s ease .6s forwards; }
.js .ud-bars rect { transform: scaleY(0); }
.svc-ativo .ud-bars rect { animation: ud-rise .7s var(--curva) forwards; }
.svc-ativo .ud-bars rect:nth-child(1) { animation-delay: .2s; }
.svc-ativo .ud-bars rect:nth-child(2) { animation-delay: .3s; }
.svc-ativo .ud-bars rect:nth-child(3) { animation-delay: .4s; }
.svc-ativo .ud-bars rect:nth-child(4) { animation-delay: .5s; }
.svc-ativo .ud-bars rect:nth-child(5) { animation-delay: .6s; }
.svc-ativo .ud-bars rect:nth-child(6) { animation-delay: .7s; }
@keyframes ud-rise { to { transform: scaleY(1); } }
.js .ud-bar::after { transform: scaleX(0); }
.svc-ativo .ud-bar::after { animation: bar-grow .9s var(--curva) .3s forwards; }

/* Movimento reduzido: nada anima; os mocks ficam no estado final legível. */
@media (prefers-reduced-motion: reduce) {
  .dv-laptop, .dv-phone, .dv-scroll, .dv-pscroll { animation: none; }
  .dv-cursor, .dv-clickring, .lc-pinglow { animation: none; opacity: 0; }
  .js .mock-agente .ag-row, .js .mock-agente .ag-confirm,
  .js .mock-loja .lj-toast, .js .tf-area, .js .tf-dot,
  .js .lj-area, .js .lj-p, .js .lc-pin, .js .lc-stars i,
  .js .cp-area, .js .cp-dot, .js .um-area { opacity: 1; transform: none; }
  .js .tf-line, .js .lj-line, .js .cp-line, .js .cp-sparkline, .js .um-stroke, .js .ss-line { stroke-dashoffset: 0; }
  .js .sy-bar::after, .js .sy-barsvg rect, .js .ud-bars rect, .js .ud-bar::after { transform: none; }
}

@media (max-width: 860px) {
  /* No celular a pilha não gruda (tela estreita): cada serviço é um bloco no fluxo. */
  .svc { position: static; min-height: 0; padding: 72px 24px; box-shadow: none; }
  .svc-in { grid-template-columns: 1fr; gap: 32px; }
  .svc-topo-linha { margin-bottom: 14px; gap: 10px; }
  .svc-h { font-size: var(--t-28); font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; margin-bottom: 16px; }
  .svc-desc { font-size: 1rem; line-height: 1.6; }
  .svc-caps { gap: 10px 20px; margin-top: 24px; }
  .svc-caps li { font-size: 0.875rem; }
  /* Cabeçalho da seção no celular: título menor e menos respiro. */
  .svcs-intro { padding: 64px 24px 40px; }
  .svcs-titulo { font-size: var(--t-40); }
  .svcs-sub { font-size: var(--t-17); }
  .stack-logo { width: 86%; opacity: .06; }
  .mock { max-width: 360px; margin: 0 auto; }
}

/* ---------- 7c-bis. Compromissos (sistema orbital, print 26/08) ----------
   Orbe dourado no centro, anéis finos quase neon em camadas, e as cinco
   garantias em volta ligadas por linhas finas com nós. Layout e visual do print;
   o conteúdo dos cards é o da casa. O SVG (.ql-sistema) e as posições dos cards
   vivem na MESMA régua — palco quadrado, viewBox 1000x1000 — então as linhas
   encostam nos cards de verdade em vez de chutar. */
/* ============ POR QUE A HORUS · MATRIZ (27/08/2026) ============
   Matriz comparativa por CATEGORIA (formato amphora), decisão do Conselho. É
   estrutura tabular de verdade (<table>), que é o único caso em que o antipadrões
   permite fio entre linhas. A coluna da Horus é levantada em âmbar (tinta
   translúcida + fios laterais); as alternativas ficam neutras, cada uma com a
   força real dela escrita — nada de matriz de ✓✓✓ contra ✗✗✗. */
.compara {
  padding: 128px 24px;
  background:
    radial-gradient(1100px 760px at 50% 0%, rgba(201,153,46,.07), transparent 60%),
    var(--tinta);
}
.cmp-topo { text-align: center; margin: 0 auto 56px; max-width: 660px; }
.cmp-topo h2 { font-size: var(--t-64); line-height: 1.04; letter-spacing: -0.03em; text-wrap: pretty; }
.cmp-sub { margin: 20px auto 0; color: var(--osso-2); max-width: 46ch; }

.cmp-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.cmp-tabela { width: 100%; min-width: 720px; border-collapse: collapse; font-size: var(--t-17); }
.cmp-tabela th, .cmp-tabela td {
  padding: 20px; text-align: left; vertical-align: top;
  border-top: 1px solid var(--fio);
}
.cmp-tabela thead td, .cmp-tabela thead th { border-top: 0; }
.cmp-tabela thead th {
  font-family: var(--display); font-weight: 600; font-size: var(--t-22);
  color: var(--osso); letter-spacing: -0.01em; padding-bottom: 22px;
}
.cmp-tabela tbody th[scope="row"] {
  font-family: var(--display); font-weight: 600; color: var(--osso);
  white-space: nowrap; padding-right: 28px;
}
.cmp-tabela td { color: var(--osso-2); line-height: 1.5; max-width: 24ch; }
.cmp-tabela .cmp-nos {
  background: rgba(244,196,48,.06); color: var(--osso);
  border-left: 1px solid rgba(244,196,48,.28);
  border-right: 1px solid rgba(244,196,48,.28);
}
.cmp-tabela thead th.cmp-nos {
  color: var(--azul-luz);
  border-top: 1px solid rgba(244,196,48,.28);
  border-radius: var(--raio-reto) var(--raio-reto) 0 0;
}
.cmp-tabela tbody tr:last-child .cmp-nos {
  border-bottom: 1px solid rgba(244,196,48,.28);
  border-radius: 0 0 var(--raio-reto) var(--raio-reto);
}

/* ==========================================================================
   SEÇÃO NOSSOS COMPROMISSOS (5 Pilares de Qualidade & Parceria)
   Fiel à referência visual: fundo dark obsidian, badge pill com indicador azul,
   tipografia nobre, 5 cards com squircle colorido, numeração 01-05,
   botão de seta circular, barra de acento luminosa e motion na entrada.
   ========================================================================== */
.qualidade {
  position: relative;
  z-index: 2;
  padding: 130px 24px 150px;
  background-color: #000206;
  background-image:
    radial-gradient(circle 900px at 50% 12%, rgba(0, 102, 255, 0.15), transparent 70%),
    radial-gradient(circle 650px at 10% 88%, rgba(0, 70, 180, 0.08), transparent 70%),
    radial-gradient(circle 650px at 90% 88%, rgba(0, 90, 220, 0.08), transparent 70%);
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
/* Transição perfeita com o Portfólio: dissolve suavemente o fundo #000206 no #030712 */
.qualidade > * {
  position: relative;
  z-index: 2;
}
.qualidade::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 260px;
  background: linear-gradient(to bottom, transparent, #030712);
  pointer-events: none;
  z-index: 1;
}

/* Header / Topo */
.qp-topo {
  text-align: center;
  margin: 0 auto 58px;
  max-width: 900px;
}

/* Badge / Eyebrow */
.qp-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: rgba(13, 20, 36, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9999px;
  box-shadow: 0 0 16px rgba(0, 119, 255, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  margin-bottom: 24px;
}
.qp-quadrado,
.qp-badge-ponto {
  width: 7px;
  height: 7px;
  border-radius: 1.5px;
  background: #0077ff;
  box-shadow: 0 0 10px rgba(0, 119, 255, 0.7);
  display: inline-block;
  flex-shrink: 0;
  transform: translateY(-1px);
}
.qp-badge-txt {
  font-family: var(--display, 'DM Sans', sans-serif);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.65);
}

/* Título Principal */
.qp-titulo {
  font-family: var(--display);
  font-size: clamp(2.35rem, 4.4vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.08;
  color: #ffffff;
  margin: 0 auto 20px;
  text-align: center;
}
.qp-em {
  color: #0077ff;
}

/* Subtítulo / Apoio */
.qp-sub {
  margin: 0 auto;
  max-width: 680px;
  color: #8e9cb2;
  font-size: clamp(0.95rem, 1.25vw, 1.0625rem);
  font-weight: 400;
  line-height: 1.6;
  text-align: center;
  text-wrap: balance;
}

/* Grade de Cards */
.qp-fila {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  max-width: 1260px;
  margin: 0 auto;
  width: 100%;
}

/* Card Individual */
.qp-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 16px;
  min-height: 320px;
  padding: 30px 24px 34px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(13, 20, 36, 0.65) 0%, rgba(6, 11, 22, 0.85) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1), 0 16px 36px rgba(0, 0, 0, 0.5), 0 20px 40px -15px var(--cor-glow);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s ease;
}

/* Luz difusa na base de cada card conforme a cor temática */
.qp-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle 180px at 50% 112%, var(--cor-glow), transparent 75%);
  opacity: 0.55;
  transition: opacity 0.45s ease;
  z-index: 0;
}

.qp-card > * {
  position: relative;
  z-index: 1;
}

/* Hover nos Cards */
.qp-card:hover {
  transform: translateY(-8px);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.22),
              0 24px 50px rgba(0, 0, 0, 0.65),
              0 25px 45px -8px var(--cor-glow);
}
.qp-card:hover::before {
  opacity: 0.9;
}

/* Topo do Card: Ícone em Squircle + Número */
.qp-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 26px;
  width: 100%;
}

.qp-ico-box {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cor-icon-bg);
  border: 1px solid var(--cor-icon-bd);
  box-shadow: 0 0 16px var(--cor-glow);
  color: var(--cor-icon);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}
.qp-ico-box svg {
  width: 24px;
  height: 24px;
}
.qp-card:hover .qp-ico-box {
  transform: scale(1.06);
  box-shadow: 0 0 24px var(--cor-glow);
}

.qp-card-num {
  font-family: var(--display), sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #52637a;
  letter-spacing: 0.05em;
  padding-top: 3px;
}

.qp-num-mob {
  display: none;
}

/* Corpo do Card: Título + Descrição */
.qp-card-corpo {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.qp-card-corpo h3 {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.25;
  margin: 0 0 14px;
  letter-spacing: -0.02em;
}
.qp-card-corpo p {
  color: #94a3b8;
  font-size: 0.875rem;
  line-height: 1.55;
  margin: 0;
  font-weight: 400;
}

/* Rodapé do Card removido a pedido do usuário */
.qp-card-rodape {
  display: none !important;
}

.qp-btn-seta {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  transition: transform 0.35s ease, border-color 0.35s ease, background 0.35s ease;
}
.qp-btn-seta svg {
  width: 15px;
  height: 15px;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.qp-card:hover .qp-btn-seta {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
}
.qp-card:hover .qp-btn-seta svg {
  transform: translateX(3px);
}

.qp-barra-cor {
  width: 30px;
  height: 2.5px;
  border-radius: 9999px;
  background: var(--cor-accent);
  box-shadow: 0 0 10px var(--cor-glow);
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}
.qp-card:hover .qp-barra-cor {
  width: 44px;
  box-shadow: 0 0 14px var(--cor-accent);
}

/* ==========================================================================
   MOTION DE ENTRADA AO ROLAR ATÉ A SEÇÃO (Scroll Motion Choreography)
   ========================================================================== */
.qualidade .qp-badge {
  opacity: 0;
  transform: translateY(-16px) scale(0.96);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.qualidade .qp-titulo {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(8px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s,
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s,
              filter 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}
.qualidade .qp-sub {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s,
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}

.qualidade .qp-card {
  opacity: 0;
  transform: translateY(48px);
  filter: blur(6px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.45s ease,
              border-color 0.4s ease;
}
.qualidade .qp-ico-box {
  transform: scale(0.85);
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.4s ease;
}
.qualidade .qp-barra-cor {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              width 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s ease;
}

/* Estado ATIVO (quando entra na tela) */
.qualidade.ativo .qp-badge {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.qualidade.ativo .qp-titulo {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.qualidade.ativo .qp-sub {
  opacity: 1;
  transform: translateY(0);
}

.qualidade.ativo .qp-card {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.qualidade.ativo .qp-card:nth-child(1) { transition-delay: 0.28s; }
.qualidade.ativo .qp-card:nth-child(2) { transition-delay: 0.38s; }
.qualidade.ativo .qp-card:nth-child(3) { transition-delay: 0.48s; }
.qualidade.ativo .qp-card:nth-child(4) { transition-delay: 0.58s; }
.qualidade.ativo .qp-card:nth-child(5) { transition-delay: 0.68s; }

.qualidade.ativo .qp-card:nth-child(1) .qp-ico-box { transition-delay: 0.44s; transform: scale(1); }
.qualidade.ativo .qp-card:nth-child(2) .qp-ico-box { transition-delay: 0.54s; transform: scale(1); }
.qualidade.ativo .qp-card:nth-child(3) .qp-ico-box { transition-delay: 0.64s; transform: scale(1); }
.qualidade.ativo .qp-card:nth-child(4) .qp-ico-box { transition-delay: 0.74s; transform: scale(1); }
.qualidade.ativo .qp-card:nth-child(5) .qp-ico-box { transition-delay: 0.84s; transform: scale(1); }

.qualidade.ativo .qp-card:nth-child(1) .qp-barra-cor { transition-delay: 0.52s; transform: scaleX(1); }
.qualidade.ativo .qp-card:nth-child(2) .qp-barra-cor { transition-delay: 0.62s; transform: scaleX(1); }
.qualidade.ativo .qp-card:nth-child(3) .qp-barra-cor { transition-delay: 0.72s; transform: scaleX(1); }
.qualidade.ativo .qp-card:nth-child(4) .qp-barra-cor { transition-delay: 0.82s; transform: scaleX(1); }
.qualidade.ativo .qp-card:nth-child(5) .qp-barra-cor { transition-delay: 0.92s; transform: scaleX(1); }

/* Movimento Reduzido (Acessibilidade) */
@media (prefers-reduced-motion: reduce) {
  .qualidade .qp-badge,
  .qualidade .qp-titulo,
  .qualidade .qp-sub,
  .qualidade .qp-card,
  .qualidade .qp-ico-box,
  .qualidade .qp-barra-cor {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* Responsividade */
@media (max-width: 1180px) {
  .qp-fila {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .qp-card { min-height: 380px; }
}
@media (max-width: 768px) {
  .qualidade {
    padding: 70px 20px 80px;
  }
  .qp-topo {
    margin-bottom: 36px;
  }
  .qp-titulo {
    font-size: clamp(2.1rem, 6vw, 2.7rem);
    line-height: 1.12;
  }
  .qp-sub {
    font-size: 0.95rem;
    max-width: 360px;
  }
  .qp-fila {
    grid-template-columns: 1fr;
    gap: 14px;
    max-width: 480px;
    margin-inline: auto;
  }
  .qp-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-height: auto;
    padding: 16px 18px 16px 16px;
    gap: 14px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(13, 20, 36, 0.72) 0%, rgba(6, 11, 22, 0.9) 100%);
    border: 1px solid color-mix(in srgb, var(--cor-accent) 35%, rgba(255, 255, 255, 0.08));
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1), 0 0 24px -6px var(--cor-glow);
  }
  .qp-card::before {
    opacity: 0.75;
    background: radial-gradient(circle 160px at 50% 50%, var(--cor-glow), transparent 75%);
  }
  .qp-card-head {
    display: flex;
    margin: 0;
    width: auto;
    flex-shrink: 0;
  }
  .qp-card-head .qp-card-num {
    display: none;
  }
  .qp-ico-box {
    width: 54px;
    height: 54px;
    border-radius: 15px;
    flex-shrink: 0;
  }
  .qp-ico-box svg {
    width: 26px;
    height: 26px;
  }
  .qp-card-corpo {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    gap: 2px;
  }
  .qp-num-mob {
    display: block;
    font-family: var(--display), sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    color: #52637a;
    letter-spacing: 0.05em;
    margin-bottom: 1px;
    line-height: 1;
  }
  .qp-card-corpo h3 {
    font-size: clamp(0.98rem, 3.7vw, 1.15rem);
    font-weight: 700;
    color: #ffffff;
    line-height: 1.25;
    margin: 0 0 3px;
    letter-spacing: -0.02em;
    white-space: normal;
  }
  .qp-card-corpo p {
    font-size: 0.82rem;
    color: #94a3b8;
    line-height: 1.45;
    margin: 0;
    font-weight: 400;
  }
}
@media (max-width: 480px) {
  .qualidade {
    padding: 60px 16px 70px;
  }
  .qp-card {
    padding: 14px 14px 14px 12px;
    gap: 12px;
  }
  .qp-ico-box {
    width: 48px;
    height: 48px;
    border-radius: 13px;
  }
  .qp-ico-box svg {
    width: 23px;
    height: 23px;
  }
}

.ql-topo { text-align: center; margin: 0 auto; max-width: 680px; }
.ql-eyebrow {
  font-family: var(--display); font-size: var(--t-13); font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--azul-luz); margin-bottom: 20px;
}
.ql-topo h2 { font-size: var(--t-64); line-height: 1.04; letter-spacing: -0.03em; text-wrap: pretty; }
.ql-topo h2 .azul { color: var(--azul-luz); }
.ql-sub { margin: 20px auto 0; color: var(--osso-2); max-width: 48ch; }

.ql-orbita {
  position: relative;
  width: 100%; max-width: 900px;
  aspect-ratio: 1 / 1;
  margin: 24px auto 44px;
}
.ql-sistema { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; overflow: visible; }
/* Só os anéis pontilhados e os pontos giram; nós e linhas ficam presos aos cards. */
.ql-aneis-giro { transform-box: view-box; transform-origin: 500px 500px; animation: ql-gira 120s linear infinite; }
.ql-orbes-giro { transform-box: view-box; transform-origin: 500px 500px; animation: ql-gira 46s linear infinite reverse; }
@keyframes ql-gira { to { transform: rotate(360deg); } }
.ql-nos circle { filter: drop-shadow(0 0 5px rgba(244,196,48,.7)); }
.ql-orbes-giro circle { filter: drop-shadow(0 0 5px currentColor); }

/* Círculo central: imagem 3D quente gerada no Higgsfield (mais bonita que o orbe
   CSS), com halo pulsante. */
.ql-centro { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; width: 134px; height: 134px; }
.ql-orb-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block;
  box-shadow: 0 0 70px 16px rgba(244,196,48,.35), inset 0 0 30px rgba(0,0,0,.4); }
.ql-centro::after {
  content: ""; position: absolute; inset: -38%; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(244,196,48,.30), transparent 66%);
  animation: nucleo-pulsa 3.6s ease-in-out infinite;
}

/* O anel ORBITA: gira devagar; o conteúdo do card contra-gira para ficar de pé.
   Pausa quando o ponteiro entra na órbita, para dar hover nos cards. */
.ql-anel { position: absolute; inset: 0; z-index: 2; animation: ql-orbe 80s linear infinite; }
.ql-card-in { animation: ql-orbe-contra 80s linear infinite; }
@keyframes ql-orbe { to { transform: rotate(360deg); } }
@keyframes ql-orbe-contra { to { transform: rotate(-360deg); } }
.ql-orbita:hover .ql-anel, .ql-orbita:hover .ql-card-in { animation-play-state: paused; }

/* Card: ícone CENTRALIZADO + título; o texto só aparece no hover (ou sozinho, em
   ordem, pela classe .aberto do JS). Vidro com GRANULADO por dentro e leve brilho. */
.ql-card { position: absolute; transform: translate(-50%, -50%); width: 220px; border-radius: 18px; }
.ql-card-in {
  position: relative;
  padding: 24px 22px; border-radius: 18px; text-align: center; color: var(--osso);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)), rgba(24,18,12,.84);
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 22px color-mix(in srgb, var(--cor) 14%, transparent), 0 20px 44px rgba(0,0,0,.5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: border-color .35s var(--curva), box-shadow .35s var(--curva);
}
.ql-card-in::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--cor) 55%, transparent), transparent 46%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
/* granulado: ruído fino em overlay sobre o vidro */
.ql-card-in::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .45; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ql-card:hover .ql-card-in, .ql-card.aberto .ql-card-in {
  border-color: color-mix(in srgb, var(--cor) 45%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 0 34px color-mix(in srgb, var(--cor) 32%, transparent), 0 22px 48px rgba(0,0,0,.55);
}
.ql-c1 { left: 50%; top: 14%; }
.ql-c2 { left: 15%; top: 45%; }
.ql-c3 { left: 85%; top: 45%; }
.ql-c4 { left: 27%; top: 83%; }
.ql-c5 { left: 73%; top: 83%; }
.ql-ico {
  display: inline-grid; place-items: center;
  width: 48px; height: 48px; border-radius: 13px; color: var(--cor);
  background: color-mix(in srgb, var(--cor) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--cor) 30%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--cor) 20%, transparent);
  margin-bottom: 16px;
}
.ql-ico svg { width: 24px; height: 24px; }
.ql-card h3 { font-size: var(--t-17); font-weight: 700; letter-spacing: .01em; line-height: 1.2; }
.ql-card h3 .ouro { color: var(--cor); }
/* O texto vira uma CAIXA que aparece abaixo do card (print 11): só opacity e
   transform, sem animar altura. */
.ql-card p {
  position: absolute; left: 50%; top: calc(100% + 12px);
  width: 236px; padding: 15px 17px; border-radius: 12px;
  font-size: var(--t-17); line-height: 1.5; color: var(--osso); text-align: center;
  background: rgba(16,12,8,.98);
  border: 1px solid color-mix(in srgb, var(--cor) 35%, transparent);
  box-shadow: 0 16px 34px rgba(0,0,0,.55);
  opacity: 0; transform: translate(-50%, -6px); pointer-events: none; z-index: 3;
  transition: opacity .3s var(--curva), transform .3s var(--curva);
}
.ql-card:hover p, .ql-card.aberto p { opacity: 1; transform: translate(-50%, 0); }

/* Selo de reforço: barra de vidro larga com o olho, a frase de padrão e o CTA. */
.ql-selo {
  display: flex; align-items: center; gap: 28px;
  max-width: 900px; margin: 0 auto;
  padding: 22px 28px; border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)),
    rgba(13,16,22,.6);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 20px 46px rgba(0,0,0,.42);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ql-selo-ico { flex: none; color: var(--azul-luz); display: grid; place-items: center; }
.ql-selo-ico svg { width: 34px; height: 34px; }
.ql-selo p { flex: 1; color: var(--osso-2); font-size: var(--t-17); line-height: 1.45; }
.ql-selo p b { color: var(--osso); font-weight: 600; }
.ql-selo .btn-vidro { flex: none; }
@media (max-width: 720px) {
  .ql-selo { flex-direction: column; align-items: flex-start; gap: 18px; }
}

/* ---------- 7d. Icarus ---------- */
/* Formato do cartaz de produto: linha miúda em monoespaçada, nome em escala
   máxima, parágrafo curto embaixo. A monoespaçada aqui é rótulo técnico de
   três palavras, não texto corrido: é o uso que a casa permite. */

.icarus {
  padding: 130px 24px;
  background:
    radial-gradient(1100px 760px at 82% 48%, rgba(201,153,46,.14), transparent 60%),
    radial-gradient(700px 500px at 8% 90%, rgba(244,196,48,.05), transparent 60%),
    #0C0E14;
}
.ic-linha {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: var(--t-13);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--osso-2);
}
.ic-nome {
  font-family: var(--display);
  font-size: var(--t-112);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: .95;
  margin-top: 26px;
}
.ic-texto {
  margin-top: 34px;
  max-width: 58ch;
  font-size: var(--t-22);
  line-height: 1.55;
  color: var(--osso-2);
}
.ic-texto b { color: var(--osso); font-weight: 600; }

/* ---------- 7e. Portfólio (trionn: título preso, fileira que corre) ----------
   Título PRESO à esquerda, os trabalhos numa FILEIRA à direita. A fileira só
   corre na horizontal quando a seção está ALINHADA (presa no alto da tela), e
   ao fim do terceiro card a seção inteira é puxada como CORTINA para a esquerda,
   revelando a seção seguinte. Pin, corrida horizontal e cortina são do GSAP
   (§ no index.html). O piso sem JS é uma fileira que se arrasta com o dedo. */

/* O `.portfolio` é TRANSPARENTE de propósito: o fundo mora no `.pf-pin`. Assim,
   quando o pin desliza para a esquerda (a cortina), a área que ele libera mostra os
   PASSOS que estão fixos atrás (z-index 1) — antes aparecia o fundo do portfólio
   (preto), que era o bug. */
.portfolio {
  position: relative; overflow: clip; z-index: 2;
  background-color: #030712;
}
.pf-pin {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding: var(--cabecalho) 0 40px;
  background:
    linear-gradient(to bottom, #030712 0%, transparent 160px, transparent calc(100% - 200px), #030712 100%),
    radial-gradient(circle at 12% 25%, rgba(14, 43, 92, 0.45) 0%, transparent 55%),
    radial-gradient(circle at 90% 70%, rgba(30, 58, 138, 0.25) 0%, transparent 50%),
    #030712;
}
.pf-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.72fr) minmax(0, 1.65fr);
  gap: 52px;
  align-items: center;
  width: 100%;
  padding-inline: 48px;
  max-width: 1440px;
  margin-inline: auto;
}
.pf-lado {
  align-self: center;
}
.pf-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--display, 'DM Sans', sans-serif);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.65);
  margin-bottom: 24px;
}
.pf-quadrado {
  width: 7px;
  height: 7px;
  background: #0077ff;
  border-radius: 1.5px;
  box-shadow: 0 0 10px rgba(0, 119, 255, 0.7);
  display: inline-block;
  transform: translateY(-1px);
}
.pf-h2 {
  font-size: clamp(2.5rem, 4.2vw, 3.8rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: #ffffff;
  max-width: 12ch;
}
.pf-destaque-azul,
.pf-azul {
  color: #0077ff;
}
.pf-sub {
  margin-top: 22px;
  color: #94a3b8;
  font-size: 1.05rem;
  line-height: 1.55;
  max-width: 32ch;
}
.pf-btn-todos {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: 36px;
  text-decoration: none;
  color: #ffffff;
  font-weight: 500;
  font-size: 0.95rem;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.pf-btn-circulo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.02);
}
.pf-btn-circulo svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  transition: transform 0.3s ease;
}
.pf-btn-todos:hover {
  color: #38bdf8;
}
.pf-btn-todos:hover .pf-btn-circulo {
  border-color: #0077ff;
  box-shadow: 0 0 16px rgba(0, 119, 255, 0.5);
  color: #38bdf8;
  background: rgba(0, 119, 255, 0.1);
  transform: translateX(4px);
}

/* A pista: a janela por onde a fileira corre */
.pf-pista {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.pf-pista::-webkit-scrollbar { display: none; }
.pf-tira {
  display: flex;
  gap: 32px;
  width: max-content;
}
.pf-item {
  width: clamp(380px, 31vw, 480px);
  flex: none;
  scroll-snap-align: start;
}
.pf-tela {
  aspect-ratio: 16 / 10;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  background: #0b1329;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.pf-item:hover .pf-tela {
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 0 30px rgba(37, 99, 235, 0.25), 0 24px 50px rgba(0, 0, 0, 0.65);
  transform: translateY(-4px);
}
.pf-tela img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.pf-item:hover .pf-tela img {
  transform: scale(1.03);
}
.pf-legenda {
  margin-top: 20px;
}
.pf-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 10px;
}
.pf-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0077ff;
  box-shadow: 0 0 8px #0077ff;
  display: inline-block;
  flex-shrink: 0;
}
.pf-tit-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.pf-item h3 {
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #ffffff;
  margin: 0;
}
.pf-seta {
  color: #0077ff;
  font-size: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease, color 0.25s ease;
}
.pf-item:hover .pf-seta {
  transform: translateX(4px);
  color: #38bdf8;
}
.pf-item p {
  color: #94a3b8;
  margin-top: 8px;
  line-height: 1.5;
  font-size: 0.925rem;
  max-width: 48ch;
}

/* Quando o GSAP assume (desktop, com movimento), a pista para de rolar sozinha:
   quem move a fileira é o scrub do scroll. A classe entra pelo script. */
.portfolio.pf-gsap .pf-pista {
  overflow: hidden;
  scroll-snap-type: none;
  mask-image: linear-gradient(to right, transparent 0%, black 28px, black calc(100% - 28px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 28px, black calc(100% - 28px), transparent 100%);
}
.portfolio.pf-gsap .pf-pin { z-index: 5; }

/* ---------- 7f. A assinatura no pé ----------
   O nome em escala de cartaz, abaixo do rodapé. Estudado em lessestudio.com
   (ver referencias/): lá o wordmark gigante NÃO é texto com `font-size`, é um
   desenho vetorial pintado por gradiente. A diferença importa aqui: o SVG
   escala pela proporção do `viewBox`, então a palavra ocupa a mesma fatia da
   largura em qualquer tela, sem `clamp()` e sem abrir um degrau novo na escala
   de tipo do PLANO.md. A escala de tipo continua servindo o que se lê; isto é
   desenho, e desenho se mede por proporção.

   São duas camadas do MESMO desenho. A de baixo é um gradiente de grafite com
   franja azul no alto, que deixa a palavra quase encostada no fundo, como
   relevo. A de cima é uma luz que só acende no ponteiro e no lugar em que ele
   está: em repouso a assinatura é discreta, e é o gesto de passar por ela que
   revela. Mesmo princípio do lessestudio, que mantém o wordmark quase invisível
   e guarda todo o drama para a luz.
   Substituiu o hex dump em 24/08/2026, a pedido do Marcelo. */

.assinatura { padding: 96px 24px 44px; line-height: 0; }
.assinatura svg { width: 100%; height: auto; display: block; }
/* Sem ponteiro (toque) a luz nunca acende, e a camada de grafite se sustenta
   sozinha: a assinatura não depende do efeito para existir. */
.as-luz { opacity: 0; transition: opacity .5s var(--curva); }
.assinatura:hover .as-luz { opacity: 1; }

/* ---------- 8. Cabeçalho de seção ---------- */

.faixa h2 { font-size: var(--t-40); max-width: 22ch; }
.abertura { color: var(--osso-2); max-width: var(--medida); margin-top: 20px; }

/* As seções A diferença, A Máquina, Para quem é, O que não vai ao ar, Como
   começa e Perguntas saíram em 05/08/2026 a pedido do Marcelo, e o CSS delas
   saiu junto. O trilho numerado da Máquina era o elemento-assinatura da
   página: ver PLANO.md para o que ocupou o lugar dele.
   O histórico continua no git, então nada disso se perdeu. */

/* ---------- 16. Chamada final e contato ---------- */

/* Alinhada à esquerda e em escala de cartaz, no formato das referências que o
   Marcelo mandou em 05/08/2026. Era centralizada até então.

   O que veio de akis.studio (ver referencias/) em 24/08/2026 foi a CAIXA, não a
   diagramação: lá o convite não fica solto na página, mora num painel com recuo
   generoso e ASSIMÉTRICO (mais ar em cima do que embaixo) e com a luz do
   gradiente ancorada fora do centro, a um terço da esquerda. O alinhamento
   continua o nosso, porque isso o Marcelo já decidiu; copiou-se o continente.
   E como no akis não há fio nenhum separando esta seção do rodapé: quem separa
   é a caixa acabar e o ar começar. */
/* ---------- 15b. Como começa · 4 passos (design de referência light/white) ---------- */
/* ---------- 15b. Como começa · 4 passos (Design fiel ao Print 1 / Dark Cosmic Blue — Unificado com Portfólio) ---------- */
.passos {
  min-height: auto;
  padding: 70px 24px 80px;
  position: relative;
  overflow: hidden;
  z-index: 2;
  background-color: #030712;
  background-image:
    linear-gradient(to bottom, #030712 0%, #030712 6%, transparent 32%),
    radial-gradient(circle at 50% 28%, rgba(14, 43, 92, 0.42) 0%, rgba(3, 7, 18, 0) 65%),
    radial-gradient(circle at 85% 20%, rgba(30, 58, 138, 0.25) 0%, rgba(3, 7, 18, 0) 50%),
    radial-gradient(circle at 15% 85%, rgba(14, 43, 92, 0.25) 0%, rgba(3, 7, 18, 0) 55%);
  color: #f1f5f9;
}
.passos > * {
  position: relative;
  z-index: 2;
}
/* Transição perfeita com a Chamada Final: dissolve suavemente o fundo #030712 no #000206 */
.passos::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 260px;
  background: linear-gradient(to bottom, transparent, #000206);
  pointer-events: none;
  z-index: 1;
}
.ps-bg-glow {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 400px;
  background: radial-gradient(ellipse at center, rgba(37, 99, 235, 0.18) 0%, rgba(14, 43, 92, 0.08) 45%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.ps-topo {
  text-align: center;
  margin-bottom: 64px;
}
.ps-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 16px;
  background: rgba(13, 20, 36, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9999px;
  box-shadow: 0 0 16px rgba(0, 119, 255, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-family: var(--display, 'DM Sans', sans-serif);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.65);
  margin-bottom: 24px;
}
.ps-linha-v {
  display: none;
}
.ps-cosmic-arc {
  position: absolute;
  bottom: -40px;
  left: -20%;
  width: 140%;
  height: 240px;
  border-radius: 50% 50% 0 0;
  border-top: 1.5px solid rgba(0, 119, 255, 0.65);
  box-shadow: 0 -12px 35px rgba(0, 119, 255, 0.4), inset 0 10px 30px rgba(0, 119, 255, 0.15);
  pointer-events: none;
  z-index: 1;
}
.ps-quadrado {
  width: 7px;
  height: 7px;
  background: #0077ff;
  border-radius: 1.5px;
  box-shadow: 0 0 10px rgba(0, 119, 255, 0.7);
  display: inline-block;
  transform: translateY(-1px);
}
.ps-titulo {
  font-size: clamp(2.3rem, 4.2vw, 3.6rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.035em;
  color: #ffffff;
  max-width: 24ch;
  margin-inline: auto;
}
.ps-destaque-azul {
  color: #0077ff;
}
.ps-sub {
  margin-top: 20px;
  color: #94a3b8;
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  line-height: 1.6;
  max-width: 58ch;
  margin-inline: auto;
  font-weight: 400;
}

/* Container do fluxo em 4 colunas */
.ps-tl {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  padding-top: 10px;
  max-width: 1240px;
  margin-inline: auto;
}

/* Linha guia de fundo conectando os centros dos círculos */
.ps-trilho-linha {
  position: absolute;
  top: 77px;
  left: 31px;
  width: calc(100% - ((100% - 96px) / 4));
  height: 2px;
  background: rgba(37, 99, 235, 0.35);
  box-shadow: 0 0 8px rgba(37, 99, 235, 0.25);
  border-radius: 9999px;
  z-index: 1;
}

/* Linha azul animada que se move pelo scroll */
.ps-fio {
  position: absolute;
  top: 77px;
  left: 31px;
  width: calc(100% - ((100% - 96px) / 4));
  height: 2.5px;
  z-index: 2;
  background: linear-gradient(90deg, #0052e0, #0077ff 50%, #38bdf8);
  box-shadow: 0 0 10px rgba(0, 119, 255, 0.8), 0 0 18px rgba(56, 189, 248, 0.5);
  border-radius: 9999px;
  transform-origin: left center;
}

/* Pontos luminosos nos intervalos da linha */
.ps-ponto-fio {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 10px #38bdf8, 0 0 4px #ffffff;
  z-index: 3;
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}
.ps-ponto-1 { left: 16.667%; }
.ps-ponto-2 { left: 50.000%; }
.ps-ponto-3 { left: 83.333%; }

/* Etapa individual (clean/borderless conforme Print 1) */
.ps-etapa {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  transition: transform 0.35s ease;
}

/* Bloco superior com número e círculo */
.ps-n-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 24px;
}
.ps-n {
  font-size: 68px;
  font-weight: 800;
  font-family: var(--sans, 'DM Sans', sans-serif);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: rgba(30, 58, 138, 0.4);
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.35) 0%, rgba(30, 58, 138, 0.08) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  user-select: none;
  margin-bottom: -18px;
  margin-left: 2px;
  z-index: 1;
  transition: all 0.4s ease;
}
.ps-circulo {
  position: relative;
  z-index: 2;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #0c1e3d 0%, #030816 100%);
  border: 1px solid rgba(59, 130, 246, 0.45);
  box-shadow: 0 0 20px rgba(37, 99, 235, 0.35), inset 0 0 12px rgba(56, 189, 248, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s ease,
              box-shadow 0.35s ease;
}
.ps-circulo svg {
  width: 28px;
  height: 28px;
  stroke: #ffffff;
  transition: stroke 0.3s ease, transform 0.3s ease;
}

/* Hover e aceso no scroll */
.ps-etapa:hover .ps-circulo,
.ps-etapa.aceso .ps-circulo {
  border-color: #38bdf8;
  box-shadow: 0 0 28px rgba(56, 189, 248, 0.6), inset 0 0 16px rgba(56, 189, 248, 0.3);
  transform: scale(1.05);
}
.ps-etapa:hover .ps-circulo svg,
.ps-etapa.aceso .ps-circulo svg {
  stroke: #38bdf8;
}
.ps-etapa:hover .ps-n,
.ps-etapa.aceso .ps-n {
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.6) 0%, rgba(30, 58, 138, 0.2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Informações do passo */
.ps-info h3 {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: #ffffff;
  margin-bottom: 10px;
}
.ps-info p {
  color: #94a3b8;
  font-size: 0.925rem;
  line-height: 1.55;
  margin: 0;
  font-weight: 400;
  max-width: 26ch;
}

/* Botão CTA conforme Print 1 (Dark Glass Pill com Glow Azul) */
.ps-cta {
  display: flex;
  justify-content: center;
  margin-top: 60px;
}
.ps-btn-dark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(6, 16, 38, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(59, 130, 246, 0.55);
  box-shadow: 0 0 24px rgba(37, 99, 235, 0.35), inset 0 0 14px rgba(37, 99, 235, 0.18);
  color: #ffffff !important;
  font-size: 1rem;
  font-weight: 600;
  padding: 14px 34px;
  border-radius: 9999px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.ps-btn-dark:hover {
  background: rgba(14, 34, 74, 0.92);
  border-color: #38bdf8;
  box-shadow: 0 0 35px rgba(56, 189, 248, 0.5), inset 0 0 18px rgba(56, 189, 248, 0.25);
  transform: translateY(-2px);
  color: #ffffff !important;
}
.ps-btn-dark .ps-seta {
  font-size: 1.15rem;
  color: #38bdf8;
  display: inline-block;
  transition: transform 0.25s ease;
}
.ps-btn-dark:hover .ps-seta {
  transform: translateX(4px);
}

/* Linha Editorial no Rodapé da Seção (sem barra divisória horizontal para integração fluida) */
.ps-rodape-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-top: 90px;
  padding-top: 24px;
  border-top: none;
  max-width: 1240px;
  margin-inline: auto;
}
.ps-pilares {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: #64748b;
  line-height: 1.4;
}
.ps-divisor-fio {
  display: none;
}
.ps-marca-ano {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  color: #64748b;
}
.ps-traco-fio {
  display: inline-block;
  width: 24px;
  height: 1px;
  background: #64748b;
}

@media (max-width: 1060px) {
  .passos {
    padding: 60px 20px 70px;
  }
  .ps-tl {
    grid-template-columns: repeat(2, 1fr);
    gap: 44px 28px;
  }
  .ps-trilho-linha,
  .ps-fio {
    display: none;
  }
  .ps-info p {
    max-width: 34ch;
  }
}
@media (max-width: 768px) {
  .passos {
    padding: 60px 20px 70px;
  }
  .ps-topo {
    margin-bottom: 38px;
  }
  .ps-titulo {
    font-size: clamp(2.1rem, 6vw, 2.7rem);
    line-height: 1.15;
  }
  .ps-sub {
    font-size: 0.95rem;
    max-width: 380px;
    margin-inline: auto;
    text-wrap: balance;
  }
  .ps-tl {
    display: flex;
    flex-direction: column;
    gap: 40px;
    max-width: 440px;
    margin-inline: auto;
    position: relative;
    padding: 0;
  }
  .ps-trilho-linha,
  .ps-fio {
    display: none !important;
  }
  .ps-etapa {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    width: 100%;
    gap: 18px;
    text-align: left;
  }
  .ps-n-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin-bottom: 0;
    flex-shrink: 0;
    position: relative;
  }
  .ps-n {
    font-size: 52px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    width: auto;
    min-width: 64px;
    text-align: right;
    margin: 0;
    color: rgba(60, 95, 150, 0.45);
    background: linear-gradient(180deg, rgba(70, 130, 210, 0.55) 0%, rgba(20, 50, 100, 0.2) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    flex-shrink: 0;
    overflow: visible;
  }
  .ps-circulo {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    background: radial-gradient(circle at 35% 35%, #0c1e3d 0%, #030816 100%);
    border: 1px solid rgba(59, 130, 246, 0.45);
    box-shadow: 0 0 20px rgba(37, 99, 235, 0.35), inset 0 0 12px rgba(56, 189, 248, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #38bdf8;
  }
  .ps-circulo svg {
    width: 26px;
    height: 26px;
    stroke: #ffffff;
  }
  .ps-circulo svg rect[fill="currentColor"] {
    fill: #ffffff;
  }
  .ps-linha-v {
    display: block !important;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 40px;
    background: #0077ff;
    box-shadow: 0 0 8px rgba(0, 119, 255, 0.8), 0 0 14px rgba(56, 189, 248, 0.5);
    z-index: 1;
  }
  .ps-ponto-v {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #38bdf8;
    box-shadow: 0 0 10px #38bdf8, 0 0 4px #ffffff;
  }
  .ps-etapa:last-child .ps-linha-v {
    display: none !important;
  }
  .ps-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
  }
  .ps-info h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.25;
    margin: 0 0 5px;
    letter-spacing: -0.02em;
  }
  .ps-info p {
    font-size: 0.9rem;
    color: #94a3b8;
    line-height: 1.45;
    margin: 0;
    max-width: 26ch;
  }
  .ps-cta {
    margin-top: 48px;
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .ps-btn-dark {
    display: inline-flex;
    width: auto;
    max-width: 320px;
    justify-content: center;
    padding: 14px 34px;
    background: rgba(3, 8, 22, 0.85);
    border: 1px solid #0077ff;
    box-shadow: 0 0 24px rgba(0, 119, 255, 0.45), inset 0 0 14px rgba(0, 119, 255, 0.15);
    border-radius: 9999px;
  }
  .ps-rodape-linha {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 440px;
    margin: 54px auto 0;
    padding: 0;
  }
  .ps-pilares {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: var(--mono, 'JetBrains Mono', monospace);
    font-size: 0.65rem;
    letter-spacing: 0.22em;
    color: #64748b;
    line-height: 1.4;
    flex-shrink: 0;
  }
  .ps-divisor-fio {
    display: block !important;
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 0 16px;
  }
  .ps-marca-ano {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--mono, 'JetBrains Mono', monospace);
    font-size: 0.72rem;
    letter-spacing: 0.25em;
    color: #64748b;
    flex-shrink: 0;
  }
}
@media (max-width: 480px) {
  .passos {
    padding: 50px 16px 60px;
  }
  .ps-etapa {
    gap: 12px;
  }
  .ps-n-wrap {
    gap: 12px;
  }
  .ps-n {
    font-size: 42px;
    width: auto;
    min-width: 52px;
    text-align: right;
  }
  .ps-circulo {
    width: 50px;
    height: 50px;
  }
  .ps-circulo svg {
    width: 22px;
    height: 22px;
  }
  .ps-info h3 {
    font-size: 1.15rem;
  }
  .ps-info p {
    font-size: 0.82rem;
  }
}

/* Encerramento: a chamada e o rodapé dividem UM fundo animado (o gradiente móvel
   antigo da home). O canvas cobre o bloco inteiro; chamada, rodapé e assinatura
   ficam por cima, transparentes. O rodapé deixou de ter fundo próprio. */
/* Fundo do espaço da chamada/rodapé = #000206 (pedido do Marcelo, 16/09) — quase
   preto com um toque de azul, pra as estrelas (partículas) e o brilho azul da
   esfera pegarem mais contraste. Era var(--tinta) (#0e0918, violeta). */
.encerra { position: relative; background: #000206; }
/* Emenda com a seção de cima: em vez de tingir o topo da chamada de violeta
   (o que deixava o espaço com tom vinho/roxo — reclamação do Marcelo, 16/09), o
   gradiente pinta PRA CIMA, dissolvendo o rodapé da seção anterior (--tinta) no
   #000206. Assim o espaço da chamada fica #000206 PURO e a junção some. */
.encerra::before {
  content: ""; position: absolute; left: 0; right: 0; top: -220px; height: 220px; z-index: 0;
  background: linear-gradient(to top, #000206, transparent);
  pointer-events: none;
}
.encerra-fundo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
/* .encerra-glow REMOVIDO (16/09): o brilho âmbar (alto-esquerda) somado ao violeta
   deixava o espaço com o tom vinho que o Marcelo pediu pra tirar. O espaço agora é
   #000206 puro; quem dá a cor é a esfera azul. */
.encerra-glow {
  display: none;
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1100px 720px at 30% 16%, rgba(244,196,48,.10), transparent 55%),
    radial-gradient(1000px 820px at 84% 92%, rgba(107,33,239,.10), transparent 55%);
}
.encerra .chamada, .encerra .rodape, .encerra .assinatura { position: relative; z-index: 1; }
.encerra .rodape { background: transparent; }

/* Chamada final refeita em 26/08/2026: SAIU o cartão de vidro. Título branco,
   sem acento de cor e sem brilho solto atrás. */
.chamada {
  min-height: 112vh;   /* seção mais alta (Marcelo, 17/09) — era 92vh */
  display: flex; flex-direction: column; justify-content: center;
  padding: 120px 24px 90px;
  text-align: center;
  overflow: hidden; /* corta o arco (.ch-arco) nos limites da seção */
}
.chamada .envelope {
  position: relative; z-index: 1; max-width: 1000px;
  transform: translateY(90px);  /* desce título+botão dentro da esfera (Marcelo, 18/09) */
}
/* Escala de cartaz, centralizado. O tracking afrouxou de -0.035em para -0.015em:
   a -0.035 num corpo de 80px as letras de "incrível" encostavam (o acento do í
   colava no v). `max-width` em ch com auto para o texto não virar faixa larga. */
.ch-titulo {
  font-size: var(--t-80);
  max-width: 18ch;
  margin-inline: auto;
  font-weight: 700;              /* padrão estrito do H1 da home */
  letter-spacing: -0.03em;
  line-height: 1.02;
}
.ch-acao { display: flex; justify-content: center; margin-top: 48px; }

/* Efeito de entrada do TÍTULO e BOTÃO (o AnimatedTitleFM do componente): quando a
   seção entra (.visivel, o MESMO gatilho da esfera), o texto RESOLVE — sai de
   borrado + deslocado pra baixo + levemente ampliado e transparente, e assenta
   nítido, com o ease do componente (cubic-bezier .16,1,.3,1). Como usa o mesmo
   `.visivel` do arco, sobe JUNTO com a esfera. Sobrescreve o `.rev` genérico (que
   é só opacity+20px) por especificidade (3 classes). */
.chamada .ch-titulo.rev,
.chamada .ch-acao.rev {
  opacity: 0;
  transform: translateY(48px) scale(1.05);
  filter: blur(18px);
  transition: opacity 1.5s cubic-bezier(.16,1,.3,1),
              transform 1.5s cubic-bezier(.16,1,.3,1),
              filter 1.5s cubic-bezier(.16,1,.3,1);
}
.chamada .ch-acao.rev { transition-delay: .12s; }  /* botão logo atrás do título */
.chamada .ch-titulo.rev.visivel,
.chamada .ch-acao.rev.visivel {
  opacity: 1; transform: none; filter: blur(0);
}
@media (prefers-reduced-motion: reduce) {
  .chamada .ch-titulo.rev, .chamada .ch-acao.rev { transform: none; filter: none; }
}

/* ---------- 4f. Arco de luz (chamada final) ----------
   Porte vanilla do `glow-horizon.tsx` que o Marcelo mandou (Framer Motion +
   shadcn/React) — a stack do site é HTML/CSS nativo, então o EFEITO foi
   replicado, não o framework (mesma regra do `.glow-btn`).

   O alvo é o print de referência: o HORIZONTE de uma esfera de interior
   ESCURO, com o rim aceso (linha fina branca-azul) e um halo azul suave por
   cima — não uma bola branca sólida.

   Técnica (4 círculos concêntricos numa janela baixa que corta):
   - `.ch-arco` é a janela (`overflow:hidden`), colada na base da seção.
   - Todos os discos são CONCÊNTRICOS (mesmo centro `Cy`, bem abaixo da
     janela) e enormes → só o topo da calota entra na janela, dando a curva
     suave. Posiciono cada um por `bottom` = `Cy − raio` (com Cy negativo);
     como o centro é o mesmo, o rim fica com espessura UNIFORME.
   - `.ch-arco-mask` (disco escuro = cor do fundo) é o mais estreito e vem
     por ÚLTIMO no HTML → pintado por cima → escava o miolo, deixando só o
     anel fino do `.ch-arco-rim` (branco) à vista. É o `color="#000"` do
     componente original; 🔴 sem ele a esfera aparecia branca e sólida (o
     erro das primeiras tentativas).
   - `.ch-arco-glow1/2` (azul da marca, maiores e borrados) vazam por FORA do
     rim como halo atmosférico acima do horizonte.

   Entrada pela classe `.rev` (revelador genérico do site — o GSAP dedicado
   do bloco 6 não disparava confiável em mobile): a esfera SOBE do fundo com
   leve blur (`.ch-arco-stage`) e o rim ACENDE com atraso. Depois, o halo
   respira sozinho (`ch-arco-resp`), sempre ligado. */
.ch-arco {
  position: absolute; inset: 0;   /* cobre a seção inteira: o arco ENGLOBA o texto */
  overflow: hidden;
  pointer-events: none; z-index: 0;
}
/* neutraliza o translateY genérico do `.rev`: quem faz a entrada é o stage */
.ch-arco.rev { transform: none; transition: opacity .9s var(--curva); }
/* a esfera sobe do fundo e desfoca ao entrar */
.ch-arco-stage {
  position: absolute; inset: 0;
  transform: translateY(12%) scale(1.04);
  filter: blur(8px);
  transition: transform 1.7s var(--curva), filter 1.7s var(--curva);
}
.ch-arco.visivel .ch-arco-stage { transform: none; filter: none; }
/* discos CONCÊNTRICOS (mesmo centro Cy, bem abaixo → curva suave). As proporções
   e blurs vêm do componente (white 132% s/blur+boxShadow · A558FB 120% blur31 ·
   4922E5 124% blur21 · #000 120% blur51), traduzidas pra AZUL da marca. O branco
   é o MAIOR (rim externo); o brilho fica POR DENTRO; o core escuro (blur pesado)
   escurece o miolo sem borda. Tudo muito borrado = zero linha dura. */
.ch-arco-l {
  position: absolute; left: 50%;
  aspect-ratio: 1 / 1; border-radius: 50%;
  transform: translateX(-50%);
}
/* Esfera GRANDE que ENGLOBA o texto. 🔴 Ancorada ao CENTRO da seção, não à base:
   `bottom: calc(50% + OFFSET - larguraVW)`. Como o texto é centralizado
   (justify-content:center) e a esfera também se referencia ao 50%, os dois andam
   JUNTOS — mudar a altura da seção (92vh→112vh…) só adiciona espaço de estrelas
   no topo, sem quebrar o englobar. (Antes era `bottom: -Xvw` da base, e aumentar
   a altura jogava o título pra fora da esfera.)
   OFFSET = 185px = o apex do rim fica 185px ACIMA do centro, pra o rim passar
   com folga por CIMA do título INTEIRO (com 120/150px a 1ª linha "Pronto para
   criar" ficava pra fora — reclamação do Marcelo). Concêntricos: todos partem de
   `50% + 185px - 58vw` (centro comum), cada um menos o próprio raio. Raio rim
   58vw → curva fechada, laterais caem. */
.ch-arco-rim {
  width: 116vw; bottom: calc(50% + 185px - 116vw);  /* raio 58vw, apex 185px acima do centro */
  background: #fff;
  box-shadow: 0 -2px 18px 1px rgba(200,222,255,.5);
  opacity: 0; transition: opacity 1.2s ease .55s;  /* acende depois da subida */
}
.ch-arco.visivel .ch-arco-rim { opacity: 1; }
/* brilho azul POR DENTRO do rim, LARGO e borrado (A558FB→azul-luz, 4922E5→azul) */
.ch-arco-glowl { width: 115vw; bottom: calc(50% + 185px - 115.5vw); background: #6aa8ff; filter: blur(40px); } /* raio 57.5 */
.ch-arco-glowd { width: 110vw; bottom: calc(50% + 185px - 113vw);   background: #1f5fe0; filter: blur(30px); } /* raio 55 */
/* core escuro na frente, blur pesado = escurece o miolo suave (o #000 blur51),
   GRANDE pra cobrir a área do título. Cor = fundo do espaço (#000206) pra casar. */
.ch-arco-core  { width: 96vw; bottom: calc(50% + 185px - 106vw); background: #000206; filter: blur(62px); } /* raio 48 */
/* o brilho respira (pulso de opacidade) — o "continuar se movendo" */
.ch-arco-glowl { animation: ch-arco-resp 7s ease-in-out infinite; }
.ch-arco-glowd { animation: ch-arco-resp 9.5s ease-in-out infinite reverse; }
@keyframes ch-arco-resp {
  0%, 100% { opacity: .78; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ch-arco-stage { transform: none; filter: none; }
  .ch-arco-rim { opacity: 1; }
  .ch-arco-glowl, .ch-arco-glowd { animation: none; }
}
/* Mobile: a tela é estreita e ALTA, então o raio em vw precisa ser ~3x maior pra
   a esfera englobar. Também ancorado ao CENTRO (50%), com OFFSET menor (90px) já
   que o título mobile é menor. Concêntricos a partir de `50% + 90px - 160vw`. */
@media (max-width: 860px) {
  .ch-arco-rim   { width: 320vw; bottom: calc(50% + 90px - 320vw); }  /* raio 160vw */
  .ch-arco-glowl { width: 318vw; bottom: calc(50% + 90px - 319vw); }  /* raio 159vw */
  .ch-arco-glowd { width: 310vw; bottom: calc(50% + 90px - 315vw); }  /* raio 155vw */
  .ch-arco-core  { width: 270vw; bottom: calc(50% + 90px - 295vw); }  /* raio 135vw */
}

/* Barras pretas de transição entre "Como começa" e a chamada. Oito faixas que
   varrem a tela (fecham em preto) e retraem revelando a seção. Em repouso ficam
   em scaleX 0 (invisíveis); só o GSAP as move. */
.barras { position: fixed; inset: 0; z-index: 50; pointer-events: none; display: flex; flex-direction: column; }
/* Faixas horizontais que enchem de CIMA para BAIXO (scaleY a partir do topo), e
   retraem revelando a seção seguinte — pedido do Marcelo, 26/08/2026. Antes
   varriam pelas laterais (scaleX). */
.barras span { flex: 1; background: #05060a; transform: scaleY(0); transform-origin: top; will-change: transform; }

/* Rodapé enxuto, no formato do web3.xmethod.de (referencias/xmethod-web3.md):
   linha de contato, fio, linha legal. As colunas de navegação e de serviços
   saíram em 25/08/2026. */
.rodape {
  padding: 104px 24px 56px;
  font-size: var(--t-17);
  color: var(--osso-2);
}
.rd-topo {
  display: flex; flex-wrap: wrap; gap: 48px;
  align-items: flex-start; justify-content: space-between;
  padding-bottom: 48px;
}
.rodape .marca img { width: 34px; height: 28px; }
.rd-assinatura {
  margin-top: 20px;
  font-family: var(--display); font-size: var(--t-22); font-weight: 600;
  color: var(--osso);
}

/* O contato em escala de título, que é a decisão forte do rodapé da
   referência: o endereço não é rotulado, é só o endereço, grande. O formato do
   dado já diz o que ele é, e "E-mail:" na frente seria a informação duas vezes.
   O sublinhado nasce recolhido e cresce no hover: em bloco de contato sem
   rótulo, o link precisa se declarar link quando o ponteiro chega. */
.rd-contato { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
@media (min-width: 861px) { .rd-contato { align-items: flex-end; } }

.rd-email, .rd-fone {
  position: relative;
  font-family: var(--display); font-weight: 600;
  color: var(--osso);
  text-decoration: none;
  line-height: 1.25;
}
.rd-email { font-size: var(--t-40); letter-spacing: -0.02em; }
.rd-fone  { font-size: var(--t-28); color: var(--osso-2); }
.rd-email::after, .rd-fone::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px;
  background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--curva);
}
.rd-email:hover, .rd-fone:hover { color: var(--azul-luz); }
.rd-email:hover::after, .rd-fone:hover::after { transform: scaleX(1); transform-origin: left; }

/* O único fio do rodapé. Separa o que é contato do que é registro, e é o mesmo
   papel que ele tem na referência. */
.rd-pe {
  display: flex; flex-wrap: wrap; gap: 24px;
  align-items: center; justify-content: space-between;
  border-top: 1px solid var(--fio);
  padding-top: 28px;
}
.rd-legal { font-size: var(--t-13); letter-spacing: 0.04em; }

/* Rede social é ícone, e ícone é ALVO antes de ser desenho: 42px de área
   clicável, bem acima do piso de 24px, porque no celular o rodapé é a parte da
   página em que o polegar chega mais cansado. */
.rd-redes { list-style: none; display: flex; gap: 12px; padding: 0; margin: 0; }
.rd-rede {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: var(--raio-reto);
  color: var(--osso-2);
  background: rgba(255,255,255,.05);
  box-shadow: inset 0 0 2px rgba(255,255,255,.16);
  transition: color .3s var(--curva), background .3s var(--curva), box-shadow .3s var(--curva);
}
.rd-rede:hover {
  color: #FFFFFF;
  background: rgba(244,196,48,.18);
  box-shadow: inset 0 0 2px rgba(255,255,255,.45), 0 0 16px rgba(244,196,48,.24);
}
/* Marcação de pendência da casa aplicada a ícone: o tracejado dourado do
   `.pend` vira anel. Sai quando o handle for confirmado. */
.rd-rede-pend { box-shadow: none; border: 1px dashed var(--dourado); color: var(--dourado); }
.rd-rede-pend:hover { color: var(--dourado); box-shadow: 0 0 16px rgba(244,196,48,.22); background: rgba(244,196,48,.12); }

/* ---------- 17. Revelação na rolagem ---------- */
/* Só transform e opacity, que não recalculam layout. */

.rev { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--curva), transform .7s var(--curva); }
.rev.visivel { opacity: 1; transform: none; }

/* ---------- 18. Responsivo ---------- */
/* No celular encolhe espaçamento, nunca texto. */

/* A dobra encolhe pela ALTURA, não só pela largura, e é o que quase ninguém
   testa. Em notebook de 720 a 800px de janela o hero já vinha no limite na v2, e
   a terceira linha do título novo estourava. Regra da casa é que quando o hero
   não cabe o problema é a escala, não a regra. A escala desce um degrau. */
@media (min-width: 861px) and (max-height: 900px) {
  .hero h1 { font-size: var(--t-64); }
  .hero-lead { margin-top: 18px; }
  .hero-acao { margin-top: 26px; }
}
@media (min-width: 861px) and (max-height: 780px) {
  .hero-topo { padding-top: 14px; }
  .hero .rotulo { margin-bottom: 12px; }
  .hero-lead { font-size: var(--t-17); }
}

@media (max-width: 1040px) {
  .hero h1 { font-size: var(--t-64); }
  .titulao { font-size: var(--t-40); }
  .ic-nome { font-size: var(--t-80); }
  .chamada h2 { font-size: var(--t-64); }
  .fp-trilho span { font-size: var(--t-40); }
  .fp-simbolo { width: 300px; }
  .sv-in { min-height: 54vh; }
  .sv-corpo { padding: 32px 36px 38px; }
  .sv-corpo h3 { font-size: var(--t-28); }
  .ql-topo h2 { font-size: var(--t-40); }
  .ql-orbita { max-width: 720px; }
  .ql-card { width: 210px; padding: 18px 18px 20px; }
  .rd-email { font-size: var(--t-28); }
  .rd-fone { font-size: var(--t-22); }
  .ch-cartao { padding: 100px 44px 100px; }
  .pf-item { width: 420px; }
}

@media (max-width: 860px) {
  .hamburguer { display: grid; }
  /* No celular a faixa vira flex: HORUS à esquerda, gatilho + botão à direita, e
     a nav vira um painel que desce. O grid de 3 zonas do desktop dá lugar a isto. */
  .topo { position: sticky; padding: 12px 20px; }
  .topo-linha { display: flex; align-items: center; justify-content: space-between; position: relative; }
  .menu {
    display: none; position: absolute; top: calc(100% + 10px); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    justify-self: stretch;
    border-radius: var(--raio-reto);
    background: rgba(12,14,19,.94);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    box-shadow: inset 0 0 2px rgba(255,255,255,.20);
    padding: 6px 20px 14px;
  }
  .menu.aberto { display: flex; opacity: 1; visibility: visible; transform: none; }
  .menu a { padding: 15px 0; border-bottom: 1px solid var(--fio); font-size: var(--t-17); letter-spacing: 0.08em; }
  .menu a:last-child { border-bottom: 0; }
  /* A nav-oculta (esconder ao rolar) é só de desktop; no celular a nav é dropdown. */
  .topo.nav-oculta .menu.aberto { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
  .topo-cta { padding: 9px 16px; }
  .topo-cta .seta { display: none; }
  .marca .nome { font-size: var(--t-17); }

  .faixa { padding: 80px 24px; }
  .chamada { padding: 88px 24px; }
  .hero h1 { font-size: var(--t-40); }
  .faixa h2 { font-size: var(--t-28); }
  /* No celular o vídeo entra menos na Seção 1 (a seção é mais curta e empilha):
     a máscara continua dissolvendo, só o alcance encurta. */
  .hero-video, .hero-tint { height: 110dvh; }

  .sobre { padding: 90px 24px 84px; }
  .icarus { padding: 88px 24px; }

  /* Header mobile: Contate-nos ↗ na esquerda, hamburguer ☰ na direita */
  .topo-dir {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .topo-cta {
    order: 1;
    padding: 8px 18px;
    border-radius: 9999px;
    font-size: 0.85rem;
    font-weight: 600;
  }
  .topo-cta .seta {
    display: inline-block !important;
    color: #38bdf8;
    margin-left: 3px;
  }
  .hamburguer {
    order: 2;
    display: grid;
    border-radius: 9999px;
    width: 38px;
    height: 38px;
  }

  /* Hero no celular */
  .hero-br-mob { display: block; }
  .hero-topo {
    padding-top: calc(var(--cabecalho, 70px) + 20px);
    padding-bottom: 24px;
    min-height: auto;
  }
  .hero-txt {
    text-align: left;
    width: 100%;
  }
  .hero-eyebrow {
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    margin-bottom: 16px;
    color: #38bdf8;
  }
  .hero h1 {
    font-size: clamp(2.35rem, 8.8vw, 3.2rem);
    line-height: 1.08;
    letter-spacing: -0.035em;
  }
  .hero-lead {
    font-size: 0.98rem;
    line-height: 1.55;
    margin-top: 16px;
    color: #94a3b8;
    max-width: 100%;
  }
  .hero-acao {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
    margin-top: 24px !important;
    width: 100% !important;
    position: relative !important;
    z-index: 5 !important;
  }
  .hero-acao .btn-azul,
  .hero-acao .btn-linha {
    border-radius: 9999px !important;
    padding: 12px 20px !important;
    font-size: 0.9rem !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
  }
  .hero-acao .btn-azul {
    background: #ffffff !important;
    color: #050a14 !important;
    border: 1px solid #ffffff !important;
    box-shadow: 0 0 28px rgba(255, 255, 255, 0.35) !important;
    font-weight: 600 !important;
  }
  .hero-acao .btn-azul .cta-lbl {
    color: #050a14 !important;
  }
  .hero-acao .btn-azul .seta {
    color: #050a14 !important;
  }
  .hero-acao .btn-linha {
    background: transparent !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.32) !important;
    font-weight: 500 !important;
  }
  .hero-splat {
    width: min(94vw, 440px) !important;
    margin: -65px auto 0 !important;
    align-self: center !important;
    position: relative !important;
    z-index: 1 !important;
  }
  .hero-splat .hero-arco {
    display: none !important;
  }

  /* Portfólio no celular: cards empilhados verticalmente, sem efeito da direita para a esquerda */
  .portfolio {
    overflow: visible;
  }
  .pf-pin {
    min-height: 0 !important;
    padding: 72px 0 80px !important;
    display: block !important;
    position: static !important;
    height: auto !important;
  }
  .pf-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
    width: 100% !important;
  }
  .pf-lado {
    width: 100% !important;
  }
  .pf-lado .pf-btn-todos {
    display: none !important;
  }
  .pf-h2 {
    font-size: var(--t-40);
  }
  .pf-pista {
    overflow: visible !important;
    scroll-snap-type: none !important;
    -webkit-overflow-scrolling: auto !important;
    width: 100% !important;
    padding: 0 !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
  }
  .pf-tira {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 36px !important;
    transform: none !important;
  }
  .pf-item {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    scroll-snap-align: none !important;
  }
  .pf-tela {
    width: 100% !important;
    aspect-ratio: 16 / 10 !important;
    border-radius: 16px !important;
  }
  .pf-rodape-mob {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    margin-top: 36px !important;
  }
  .pf-rodape-mob .pf-btn-ver-mais {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 14px 28px !important;
    border-radius: 9999px !important;
    background: #ffffff !important;
    color: #050a14 !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    text-decoration: none !important;
    box-shadow: 0 0 24px rgba(255, 255, 255, 0.28) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
  }
  .pf-rodape-mob .pf-btn-ver-mais .cta-lbl {
    color: #050a14 !important;
  }
  .pf-rodape-mob .pf-btn-ver-mais .seta {
    color: #050a14 !important;
    font-size: 16px !important;
  }

  .ch-cartao { padding: 72px 26px 64px; }
  .titulao { font-size: var(--t-28); }
  .ic-nome { font-size: var(--t-40); }
  .chamada h2 { font-size: var(--t-40); }
  .sobre-texto, .ic-texto { font-size: var(--t-17); }
  .faixa-palavras { padding: 52px 24px; }
  .fp-trilho span { font-size: var(--t-28); }
  .fp-trilho i { width: 7px; height: 7px; margin-inline: 26px; }
  /* A roleta vira lista simples no celular (o `rol-on` não liga abaixo de 861). */
  .rol-pin { padding: 80px 24px; }
  .rol-eyebrow { margin-bottom: 22px; }
  .rol-stack { gap: 40px; }
  .rol-item h2 { font-size: var(--t-28); }
  /* Sem órbita no celular: o sistema orbital e o círculo saem, os cards empilham
     e o texto fica sempre visível. */
  .ql-topo h2 { font-size: var(--t-40); }
  .ql-orbita { aspect-ratio: auto; max-width: 460px; margin: 32px auto; }
  .ql-sistema, .ql-centro { display: none; }
  .ql-anel { position: static; animation: none; }
  .ql-card-in { animation: none; }
  .ql-card { position: static; transform: none; width: auto; margin-bottom: 22px; }
  /* No celular a descrição sai do modo tooltip (absoluto) e FLUI abaixo do card,
     senão sobrepõe o card seguinte. */
  .ql-card p {
    position: static; width: auto; transform: none;
    max-height: none; opacity: 1; margin: 12px 0 0;
  }
  .assinatura { padding: 64px 24px 32px; }
}

@media (max-width: 600px) {
  .sv-ficha > div { grid-template-columns: 1fr; gap: 4px; }
  /* O contato desce para baixo da marca e volta a alinhar pela esquerda: em
     coluna única, texto encostado à direita perde a margem de leitura. */
  .rd-topo { gap: 36px; padding-bottom: 36px; }
  .rd-email { font-size: var(--t-22); }
  .rd-fone { font-size: var(--t-17); }
  .rd-pe { gap: 20px; }
  .sv-cat { font-size: var(--t-13); }
}

/* ---------- 19. Movimento reduzido ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rev { opacity: 1; transform: none; transition: none; }
  /* A palavra do título não gira: fica a primeira, e a frase continua
     verdadeira sozinha. O metal do botão congela num quadro só. */
  /* Nada corre, nada boia, nada cai. Tudo aparece pronto e legível. */
  .fp-trilho { animation: none; }
  .forma { animation: none; opacity: 1; }
  .cai > span { transform: none; opacity: 1; transition: none; }
  /* Nada prende e nada corre: a seção volta ao fluxo normal e a fileira vira o
     carrossel de arrastar com o dedo. */
  .pf-pin { position: static; min-height: 0; padding: 88px 0; display: block; }
  .pf-grid { grid-template-columns: 1fr; gap: 32px; }
  .pf-tira { transform: none !important; }
  .pf-pista { overflow-x: auto; scroll-snap-type: x mandatory; }
  /* A luz da assinatura não acende: fica só o grafite, que já é a palavra. */
  .as-luz { opacity: 0 !important; transition: none; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}