/* ==========================================================================
   Acta Robotics — camada cinematográfica
   Carregada DEPOIS de style.css. Responsável por:
     1. sistema tipográfico aplicado          5. seção de slides (referência)
     2. grão de filme e vinheta               6. narrativa da seção statement
     3. barra de progresso da página          7. reveals encadeados
     4. hero (cortina, parallax, título)      8. acessibilidade / movimento
   Variáveis --*-progress são alimentadas por assets/main.js.
   ========================================================================== */

/* ---------- 1. Sistema tipográfico ------------------------------------- */

body { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

.hero-title,
.statement p,
.story-lines p,
.section-heading h2,
.capacity h2,
.contact h2,
.products h2,
.capacity-title,
.products .product-copy h3,
.journey-copy h3,
.post-grid h3,
.ecosystem-core b,
.ecosystem-list h3,
.metrics b,
.journey-pilot > strong,
.brand strong {
  font-family:var(--display);
}

/* Space Grotesk já nasce estreita. O tracking negativo forte que existia
   foi calibrado para Arial e aqui esmaga as letras — afrouxamos. */
.hero-title,
.statement p,
.story-lines p { letter-spacing:-.032em!important; }

.section-heading h2,
.capacity h2,
.contact h2,
.products h2,
.capacity-title,
.products .product-copy h3,
.journey-copy h3 { letter-spacing:-.028em!important; }

.post-grid h3,
.ecosystem-core b { letter-spacing:-.02em!important; }

/* Corpo de texto respira melhor com Inter */
.capacity-copy > p,
.section-heading > span,
.contact-copy > span,
.footer-intro p { line-height:1.62; }

/* Rótulos técnicos em mono, com caixa alta e espaçamento de ficha técnica */
.eyebrow,
.story-label,
.rail-reading,
.products .product-copy > p,
.journey-copy > p,
.capacity-copy > small,
.post-grid article > p { font-feature-settings:"tnum" 1; }


/* ---------- 2. Grão de filme e vinheta ---------------------------------- */

.fx-grain,
.fx-vignette {
  position:fixed;
  inset:0;
  z-index:9998;
  pointer-events:none;
}

.fx-grain {
  inset:-120px;
  opacity:.042;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}

.has-motion .fx-grain { animation:fx-grain-shift 1.4s steps(5) infinite; }

@keyframes fx-grain-shift {
  0%   { transform:translate3d(0,0,0); }
  20%  { transform:translate3d(-3%,2%,0); }
  40%  { transform:translate3d(2%,-3%,0); }
  60%  { transform:translate3d(-2%,-2%,0); }
  80%  { transform:translate3d(3%,1%,0); }
  100% { transform:translate3d(0,0,0); }
}

.fx-vignette {
  z-index:9997;
  background:radial-gradient(ellipse 120% 100% at 50% 50%,transparent 58%,rgba(0,0,0,.38) 100%);
}


/* ---------- 3. Barra de progresso da página ----------------------------- */

.fx-progress {
  position:fixed;
  top:0; right:0; left:0;
  z-index:10000;
  height:2px;
  pointer-events:none;
  background:rgba(255,255,255,.08);
}

.fx-progress i {
  display:block;
  height:100%;
  background:linear-gradient(90deg,var(--orange),var(--orange-soft));
  transform:scaleX(var(--page-progress,0));
  transform-origin:0 50%;
}


/* ---------- 4. Hero ----------------------------------------------------- */

/* Cortina de abertura: as barras recuam uma vez, como um quadro de cinema
   abrindo. Não bloqueia o conteúdo — ele já está visível por baixo. */
.hero-curtain {
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
}

.hero-curtain i {
  position:absolute;
  right:0; left:0;
  height:50%;
  background:#000;
}

/* Estado padrão = aberta. A animação parte do fechado e volta para cá, com
   fill "both". Assim, se o JS não rodar ou a animação falhar, o hero aparece
   normalmente em vez de ficar coberto de preto. */
.hero-curtain i:first-child { top:0;    transform:translate3d(0,-100%,0); }
.hero-curtain i:last-child  { bottom:0; transform:translate3d(0,100%,0); }

.has-motion .hero-curtain i:first-child { animation:curtain-up 1.25s cubic-bezier(.72,0,.16,1) both; }
.has-motion .hero-curtain i:last-child  { animation:curtain-down 1.25s cubic-bezier(.72,0,.16,1) both; }

@keyframes curtain-up   { from { transform:translate3d(0,0,0); } to { transform:translate3d(0,-100%,0); } }
@keyframes curtain-down { from { transform:translate3d(0,0,0); } to { transform:translate3d(0,100%,0); } }

/* Sem motion a cortina simplesmente não existe */
html:not(.has-motion) .hero-curtain { display:none; }

/* Parallax e escala do vídeo conforme o hero sai de cena */
.has-motion .hero-video {
  transform:scale(calc(1 + var(--hero-progress,0) * .14)) translate3d(0,calc(var(--hero-progress,0) * 5vh),0);
  will-change:transform;
}

.has-motion .hero-copy {
  transform:translate3d(0,calc(var(--hero-progress,0) * -7vh),0);
  opacity:calc(1 - var(--hero-progress,0) * 1.35);
  will-change:transform,opacity;
}

.has-motion .scroll-cue { opacity:calc(1 - var(--hero-progress,0) * 2.4); }

/* Título: entrada por máscara, UMA VEZ SÓ, no carregamento.
   A animação fica presa à classe .is-intro (que o JS remove assim que ela
   termina). Se ficasse na regra de base, toda vez que .is-glitching saísse
   o shorthand `animation` voltaria a apontar para cá e a entrada tocaria de
   novo — era o "o texto surge outra vez" depois de cada glitch. */
.has-motion .hero-phrase { display:inline-block; }

.has-motion .hero-phrase.is-intro {
  animation:phrase-in 1.05s .5s cubic-bezier(.16,1,.3,1) both;
}

@keyframes phrase-in {
  from { opacity:0; transform:translate3d(0,42px,0); clip-path:inset(0 0 100% 0); }
  to   { opacity:1; transform:none;                  clip-path:inset(0 0 -20% 0); }
}

/* --- Glitch da frase do hero -------------------------------------------
   Reaproveita as camadas ::before/::after que já existem no style.css
   (content:attr(data-text)). A diferença para a versão antiga é o tempo:
   520ms em três fases, com deslocamento de fatias por clip-path, em vez de
   um piscada de 180ms. Aberração cromática laranja/ciano dá a leitura de
   sinal digital, não de página quebrada. */

.hero-phrase.is-glitching { animation:glitch-body .52s steps(2,end) both; }

/* color/text-shadow levam !important porque as camadas de remendo do
   style.css vencem a declaração normal mesmo com especificidade menor. */
.hero-phrase.is-glitching::before {
  color:var(--orange)!important;
  text-shadow:-2px 0 #00e5ff,2px 0 var(--orange)!important;
  animation:glitch-slice-a .52s steps(2,end) both;
}

.hero-phrase.is-glitching::after {
  color:#00e5ff!important;
  text-shadow:2px 0 var(--orange),-2px 0 #fff!important;
  animation:glitch-slice-b .52s steps(2,end) both;
}

@keyframes glitch-body {
  0%   { transform:translate3d(0,0,0);     opacity:1; }
  12%  { transform:translate3d(-4px,0,0);  opacity:.86; }
  26%  { transform:translate3d(5px,-1px,0); opacity:1; }
  38%  { transform:translate3d(-2px,1px,0); opacity:.72; }
  52%  { transform:translate3d(3px,0,0);   opacity:1; }
  68%  { transform:translate3d(-1px,0,0);  opacity:.9; }
  100% { transform:translate3d(0,0,0);     opacity:1; }
}

@keyframes glitch-slice-a {
  0%   { opacity:0;   clip-path:inset(0 0 100% 0);   transform:translate3d(0,0,0); }
  14%  { opacity:.95; clip-path:inset(8% 0 62% 0);   transform:translate3d(-7px,0,0); }
  30%  { opacity:.9;  clip-path:inset(46% 0 28% 0);  transform:translate3d(6px,0,0); }
  46%  { opacity:.95; clip-path:inset(18% 0 51% 0);  transform:translate3d(-9px,0,0); }
  62%  { opacity:.8;  clip-path:inset(70% 0 12% 0);  transform:translate3d(4px,0,0); }
  78%  { opacity:.6;  clip-path:inset(32% 0 44% 0);  transform:translate3d(-3px,0,0); }
  100% { opacity:0;   clip-path:inset(0 0 100% 0);   transform:translate3d(0,0,0); }
}

@keyframes glitch-slice-b {
  0%   { opacity:0;   clip-path:inset(100% 0 0 0);   transform:translate3d(0,0,0); }
  14%  { opacity:.9;  clip-path:inset(58% 0 16% 0);  transform:translate3d(8px,0,0); }
  30%  { opacity:.95; clip-path:inset(12% 0 66% 0);  transform:translate3d(-6px,0,0); }
  46%  { opacity:.85; clip-path:inset(74% 0 8% 0);   transform:translate3d(9px,0,0); }
  62%  { opacity:.9;  clip-path:inset(28% 0 49% 0);  transform:translate3d(-5px,0,0); }
  78%  { opacity:.55; clip-path:inset(52% 0 30% 0);  transform:translate3d(3px,0,0); }
  100% { opacity:0;   clip-path:inset(100% 0 0 0);   transform:translate3d(0,0,0); }
}


/* --- Seção 01 / Jornada Acta --------------------------------------------
   Fluxo em serpentina com duas bifurcações (catálogo vs. sob medida, compra
   vs. locação) e retorno tracejado de ciclo contínuo.

   O SVG e os rótulos compartilham o mesmo retângulo (.journey-field) e o
   mesmo sistema de coordenadas: viewBox 1680x1000, rótulos em --x/--y como
   porcentagem. Cada elemento carrega --t, o instante em segundos em que
   entra em cena — é o que encadeia a sequência sem nenhum JS.

   Abaixo de 1200px vira lista vertical: o traçado é largo demais (1,68:1)
   para caber legível, e encolher só produziria texto ilegível. */

.journey-map {
  position:relative;
  width:min(1360px,100%);
  margin:clamp(30px,5vw,60px) auto 0;
  aspect-ratio:1680 / 1000;
  container-type:inline-size;
}

/* Soluções Acta: mapa mais compacto para fechar a seção no mesmo respiro. */
@media (min-width:1201px) {
  .ecosystem.section-shell { padding-top:clamp(76px,8vw,108px)!important; padding-bottom:clamp(78px,8vw,112px)!important; }
  .ecosystem .section-heading { margin-bottom:clamp(28px,3.2vw,42px)!important; }
  .ecosystem .section-heading h2 { max-width:720px; font-size:clamp(40px,4.7vw,66px)!important; }
  .ecosystem .section-heading > span { max-width:390px; font-size:14px; }
  .ecosystem .journey-map { width:min(1240px,100%); margin-top:12px; }
  .ecosystem .jm-step { width:20%; min-width: 170px; }
  .ecosystem .jm-step.is-above { padding-bottom:2.1cqw; }
  .ecosystem .jm-step.is-below { padding-top:2.1cqw; }
  .ecosystem .jm-step h3 { font-size:clamp(14px,1.25cqw,19px); }
  .ecosystem .jm-step p { font-size:clamp(12px,1cqw,15px); line-height:1.4; }
  .ecosystem .jm-step b { margin-bottom:.38em; }
}

.journey-field { position:absolute; inset:0; }

.journey-web {
  position:absolute;
  inset:0;
  width:100%;
  pointer-events:none;
  height:100%;
  overflow:visible;
}

/* --- Traçado ----------------------------------------------------------- */

.jm-line,
.jm-return {
  fill:none;
  stroke:var(--orange);
  stroke-linecap:round;
  stroke-linejoin:round;
  /* preserveAspectRatio="none" no SVG casa o viewBox com o campo, mas
     esticaria a espessura do traço nos dois eixos. */
  vector-effect:non-scaling-stroke;
}

.jm-line { stroke-width:2.4; }

/* pathLength="1" no HTML normaliza traços de comprimentos bem diferentes,
   então todos desenham na mesma proporção de tempo. */
.has-motion .journey-map .jm-line { stroke-dasharray:1; stroke-dashoffset:1; }

.has-motion .journey-map.is-visible .jm-line {
  animation:jm-draw calc(var(--dur,.6) * 1s) cubic-bezier(.45,0,.25,1) forwards;
  animation-delay:calc(var(--t,0) * 1s);
}

@keyframes jm-draw { to { stroke-dashoffset:0; } }

/* Retorno: tracejado em marcha contínua, para ler como ciclo e não como
   mais uma etapa do caminho. */
.jm-return {
  stroke-width:2;
  stroke-dasharray:9 9;
  opacity:0;
  transition:opacity .7s ease;
  transition-delay:calc(var(--t,0) * 1s);
}

.journey-map.is-visible .jm-return { opacity:.5; }

.has-motion .journey-map.is-visible .jm-return {
  animation:jm-march 1.2s linear infinite;
  animation-delay:calc(var(--t,0) * 1s);
}

@keyframes jm-march { to { stroke-dashoffset:-36; } }

/* --- Peças do diagrama -------------------------------------------------- */

.jm-diamond { fill:#0b0d11; stroke:var(--orange); stroke-width:2; vector-effect:non-scaling-stroke; }
.jm-arrows polygon { fill:var(--orange); }
.jm-bends circle { fill:#2fd4c4; }
.jm-start { fill:none; stroke:var(--orange); stroke-width:2.4; vector-effect:non-scaling-stroke; }
.jm-ring { fill:#0b0d11; stroke:var(--orange); stroke-width:2.4; vector-effect:non-scaling-stroke; }
.jm-core { fill:var(--orange); }

/* Entrada: tudo que não é traço aparece por opacidade + escala, no seu --t */
.has-motion .journey-map .jm-diamond,
.has-motion .journey-map .jm-arrows polygon,
.has-motion .journey-map .jm-bends circle,
.has-motion .journey-map .jm-start,
.has-motion .journey-map .jm-node {
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
}

.has-motion .journey-map.is-visible .jm-diamond,
.has-motion .journey-map.is-visible .jm-arrows polygon,
.has-motion .journey-map.is-visible .jm-bends circle,
.has-motion .journey-map.is-visible .jm-start,
.has-motion .journey-map.is-visible .jm-node {
  animation:jm-pop .45s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:calc(var(--t,0) * 1s);
}

@keyframes jm-pop {
  from { opacity:0; transform:scale(.4); }
  to   { opacity:1; transform:scale(1); }
}

/* --- Pulso viajante -----------------------------------------------------
   Um ponto percorre a rota inteira, do início ao ciclo. Há um pulso por
   combinação de bifurcação (4 no total) e só o da rota vigente fica visível
   — é assim que o traçado "anda" pelo caminho que o visitante escolheu. */

.jm-pulse {
  /* Duração de uma volta completa pela rota. O JS define --pd como fração
     dessa volta (0 ou 0,5), então os dois pulsos seguem defasados na metade
     do percurso sem precisar repetir o número em dois lugares. */
  --travel:5.2s;
  fill:#fff5ec;
  opacity:0;
  offset-path:var(--path);
  offset-rotate:0deg;
  filter:drop-shadow(0 0 7px var(--orange));
  pointer-events:none;
}

.has-motion .journey-map.is-visible .jm-pulse.is-live {
  animation:jm-travel var(--travel) linear infinite calc(3.6s + var(--pd,0) * var(--travel)),
            jm-pulse-in .6s ease forwards calc(3.6s + var(--pd,0) * var(--travel));
}

@keyframes jm-travel   { from { offset-distance:0%; } to { offset-distance:100%; } }
@keyframes jm-pulse-in { to { opacity:.95; } }


/* --- Rótulos ------------------------------------------------------------ */

.journey-steps { position:absolute; inset:0; margin:0; padding:0; list-style:none; }

.jm-step {
  position:absolute;
  top:var(--y);
  left:var(--x);
  width:17%;
  text-align:center;
}

/* O afastamento até o nó acompanha o palco (cqw), não a viewport */
.jm-step.is-above { transform:translate(-50%,-100%); padding-bottom:2.7cqw; }
.jm-step.is-below { transform:translate(-50%,0);     padding-top:2.7cqw; }

.jm-step b {
  display:block;
  margin-bottom:.5em;
  color:var(--orange);
  font-family:var(--mono);
  font-size:clamp(8px,.68cqw,11px);
  font-weight:700;
  letter-spacing:.18em;
}

.jm-step h3 {
  margin:0 0 .42em;
  color:#f2f1ee;
  font-family:var(--display);
  font-size:clamp(13px,1.14cqw,19px);
  font-weight:700;
  letter-spacing:-.015em;
  line-height:1.18;
}

.jm-step p {
  margin:0;
  color:var(--muted);
  font-size:clamp(11px,.92cqw,14px);
  line-height:1.45;
}

.has-motion .journey-map .jm-step { opacity:0; }

.has-motion .journey-map.is-visible .jm-step {
  animation:jm-fade .55s ease forwards;
  animation-delay:calc(var(--t,0) * 1s);
}

@keyframes jm-fade { to { opacity:1; } }

/* Etiquetas soltas: INÍCIO, CICLO CONTÍNUO e os losangos "OU" */
.jm-tag,
.jm-or {
  position:absolute;
  margin:0;
  color:#8f9194;
  font-family:var(--mono);
  font-size:clamp(8px,.66cqw,11px);
  font-weight:700;
  letter-spacing:.2em;
}

.jm-inicio { top:var(--y); left:var(--x); transform:translate(-50%,-260%); }

.jm-ciclo {
  top:52%;
  left:1.1%;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
}

.jm-or {
  top:var(--y);
  left:var(--x);
  padding:.42em .7em;
  border:1px solid rgba(255,255,255,.22);
  border-radius:5px;
  background:#0b0d11;
  color:#c9cacb;
  letter-spacing:.14em;
  transform:translate(-50%,-50%);
}

.has-motion .journey-map .jm-tag,
.has-motion .journey-map .jm-or { opacity:0; }

.has-motion .journey-map.is-visible .jm-tag,
.has-motion .journey-map.is-visible .jm-or {
  animation:jm-fade .55s ease forwards;
  animation-delay:calc(var(--t,0) * 1s);
}

/* --- Escolha de rota ----------------------------------------------------
   As quatro etapas de bifurcação são controles: apontar dá uma prévia,
   clicar fixa a escolha. O caminho escolhido acende de ponta a ponta e o
   resto recua — é a headline da seção ("o caminho do seu jeito") virando
   comportamento, não só texto. */

.jm-step.is-branch { cursor:pointer; }

.jm-step.is-branch::after {
  display:inline-block;
  margin-top:.8em;
  color:var(--orange);
  font-family:var(--mono);
  font-size:clamp(9px,.7cqw,11px);
  font-weight:700;
  letter-spacing:.12em;
  opacity:0.75;
  border:1px solid rgba(255,106,0,0.35);
  padding:4px 8px;
  border-radius:4px;
  transition:all .25s ease;
  content:"ESCOLHER ESTE CAMINHO";
}

.jm-step.is-branch:hover::after,
.jm-step.is-branch:focus-visible::after {
  opacity:1;
  background:rgba(255,106,0,0.1);
  border-color:var(--orange);
}

.jm-step.is-branch[aria-pressed="true"]::after {
  opacity:1;
  content:"CAMINHO SELECIONADO";
  background:var(--orange);
  color:#000;
  border-color:var(--orange);
}

.jm-step.is-branch:focus-visible {
  outline:1px solid var(--orange);
  outline-offset:10px;
  border-radius:4px;
}

/* Estado atenuado: vale para prévia (hover) e para escolha fixada.
   Precisa de !important porque as animações de entrada usam fill "forwards",
   e valor preenchido por animação vence declaração normal na cascata —
   sem isso o ramo não escolhido continuava em opacidade 1. */
.journey-map.is-picking .jm-step:not(.is-hot),
.journey-map.is-picking .jm-tag { opacity:.3!important; transition:opacity .3s ease; }

.journey-map.is-picking .jm-line:not(.is-hot) { opacity:.22!important; transition:opacity .3s ease; }

.journey-map.is-picking .jm-node:not(.is-hot),
.journey-map.is-picking .jm-arrows polygon,
.journey-map.is-picking .jm-bends circle { opacity:.28!important; transition:opacity .3s ease; }

/* O caminho vivo ganha corpo e brilho */
.journey-map .jm-line.is-hot {
  stroke-width:3.4;
  filter:drop-shadow(0 0 6px rgba(255,106,0,.55));
  transition:stroke-width .3s ease;
}

.journey-map .jm-node.is-hot .jm-ring { stroke-width:3.2; }
.journey-map .jm-node.is-hot .jm-core { fill:#fff2e6; }
.journey-map .jm-step.is-hot h3 { color:var(--orange); }

.jm-step h3 { transition:color .28s ease; }


/* --- Lista vertical abaixo de 1200px ------------------------------------ */

@media (max-width:1200px) {
  .journey-map { aspect-ratio:auto; margin-top:34px; }

  /* O campo tem de voltar ao fluxo, senão .journey-map fica com altura 0 e a
     seção inteira sai do fluxo do documento. */
  .journey-field { position:static; }
  .journey-web { display:none; }
  .jm-ciclo { display:none; }

  .jm-inicio {
    position:static;
    margin-bottom:18px;
    transform:none;
    font-size:10px;
  }

  .journey-steps {
    position:static;
    display:grid;
    gap:0;
    border-left:1px solid var(--line);
  }

  .jm-step {
    /* relative (não static) porque o ::before do marcador se posiciona por
       ele. Mas relative HONRA left/top — e a regra base tem left:var(--x) /
       top:var(--y), que aqui deslocariam cada item por uma porcentagem do
       container. Precisam ser zerados explicitamente. */
    position:relative;
    top:auto;
    left:auto;
    /* width:17% e os translate só fazem sentido sobre o traçado */
    width:auto;
    padding:20px 0 20px 26px;
    text-align:left;
    transform:none!important;
  }

  .jm-step::before {
    position:absolute;
    top:20px;
    left:-5px;
    width:9px;
    height:9px;
    margin-top:.35em;
    border-radius:50%;
    background:var(--orange);
    content:"";
  }

  /* As alternativas ficam recuadas, para a bifurcação continuar legível
     mesmo sem o traçado. */
  .jm-step.is-branch { margin-left:26px; border-left:1px solid rgba(255,106,0,.32); padding-left:22px; }
  .jm-step.is-branch::before { left:-5px; background:var(--orange-soft); }

  .jm-step h3 { font-size:18px; }
  .jm-step p { font-size:14px; max-width:56ch; }
  .jm-step b { font-size:10px; }

  .jm-or {
    position:static;
    display:inline-block;
    margin:0 0 0 52px;
    transform:none;
  }
}

@media (prefers-reduced-motion:reduce) {
  .jm-step,
  .jm-tag,
  .jm-or,
  .journey-map .jm-node,
  .journey-map .jm-diamond,
  .journey-map .jm-start,
  .journey-map .jm-arrows polygon,
  .journey-map .jm-bends circle { opacity:1!important; animation:none!important; transform:none; }

  .jm-step.is-above { transform:translate(-50%,-100%); }
  .jm-step.is-below { transform:translate(-50%,0); }
  .jm-inicio { transform:translate(-50%,-260%); }
  .jm-or { transform:translate(-50%,-50%); }
  .jm-ciclo { transform:rotate(180deg); }

  .jm-line { stroke-dasharray:none!important; stroke-dashoffset:0!important; }
  .jm-return { opacity:.5!important; animation:none!important; }
}


/* --- Seção 07 / Diagnóstico guiado --------------------------------------
   A seção inteira é o questionário. Duas colunas sobre a cena de fábrica
   dessaturada: a pergunta à esquerda, as opções de resposta à direita.

   Ao responder, a escolha acende, as demais recuam e o bloco inteiro SOBE
   para dar lugar ao próximo — o avanço de uma conversa.

   Por que grade de duas colunas e não pastilhas espalhadas: com posições
   soltas, cada pergunta muda de largura e de número de linhas, e o conjunto
   parecia desalinhado a cada passo (medido: as opções encostavam na caixa
   do texto). Aqui as duas colunas são fixas e nada dança entre etapas. */

.diagnostic { position:relative; padding:0; background:#0a0b0d; }

.diag-stage {
  position:relative;
  display:grid;
  min-height:100svh;
  overflow:hidden;
  grid-template-rows:auto 1fr auto;
  isolation:isolate;
}

.diag-stage::before {
  position:absolute;
  z-index:-2;
  inset:0;
  background:url("../acta-robots-cinematic.jpg") center/cover no-repeat;
  filter:grayscale(1) contrast(1.06) brightness(.5);
  content:"";
}

.diag-stage::after {
  position:absolute;
  z-index:-1;
  inset:0;
  background:linear-gradient(100deg,rgba(0,0,0,.86),rgba(0,0,0,.55) 55%,rgba(0,0,0,.8));
  content:"";
}

.diag-top {
  width:min(1200px,100%);
  margin:0 auto;
  padding:clamp(26px,4vw,44px) max(20px,5vw) 0;
}

.diag-top .eyebrow {
  margin:0;
  color:var(--orange);
  font-family:var(--mono);
  font-size:10px;
  font-weight:700;
  letter-spacing:.2em;
}

.diag-scroll {
  display:grid;
  padding:clamp(24px,4vh,50px) max(20px,5vw);
  align-content:center;
}

.diag-current { width:min(1200px,100%); margin:0 auto; }
.has-motion .diag-current.is-fresh { animation:diag-in .55s cubic-bezier(.16,1,.3,1) both; }
.has-motion .diag-current.is-leaving { animation:diag-out .34s cubic-bezier(.5,0,.75,0) both; }

@keyframes diag-in  { from { opacity:0; transform:translateY(42px); } to { opacity:1; transform:none; } }
@keyframes diag-out { from { opacity:1; transform:none; } to { opacity:0; transform:translateY(-48px); } }

/* --- As duas colunas --- */
.diag-ask-block {
  display:grid;
  min-height:clamp(280px,42vh,400px);
  gap:clamp(28px,5vw,80px);
  grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  align-items:center;
}

.diag-pergunta { display:grid; gap:16px; align-content:center; }

.diag-ask {
  max-width:15ch;
  margin:0;
  color:#fff;
  font-family:var(--display);
  font-size:clamp(30px,4.3vw,58px);
  font-weight:700;
  letter-spacing:-.03em;
  line-height:1.05;
}

.diag-hint {
  max-width:40ch;
  margin:0;
  color:rgba(255,255,255,.66);
  font-size:14px;
  line-height:1.5;
}

/* --- Coluna das respostas --- */
.diag-options {
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:stretch;
}

.diag-option {
  display:flex;
  width:100%;
  align-items:center;
  gap:13px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:12px;
  padding:16px 20px;
  background:rgba(246,246,244,.94);
  color:#16181b;
  font-family:var(--mono);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.08em;
  line-height:1.35;
  text-align:left;
  text-transform:uppercase;
  box-shadow:0 10px 26px rgba(0,0,0,.34);
  transition:transform .24s cubic-bezier(.16,1,.3,1),background .22s,color .22s,box-shadow .24s,opacity .24s;
}

.diag-option::before {
  flex:none;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--orange);
  content:"";
}

.has-motion .diag-current.is-fresh .diag-option {
  animation:diag-opt .46s cubic-bezier(.16,1,.3,1) both;
  animation-delay:calc(.2s + var(--i,0) * .06s);
}

@keyframes diag-opt {
  from { opacity:0; transform:translateX(26px); }
  to   { opacity:1; transform:none; }
}

.diag-option:hover {
  background:#fff;
  transform:translateX(-4px);
  box-shadow:0 16px 34px rgba(0,0,0,.45);
}

.diag-option.is-on { background:var(--orange); color:#fff; }
.diag-option.is-on::before { background:#fff; }

/* Ao escolher: a selecionada acende, as demais recuam */
.diag-option.is-chosen { background:var(--orange); color:#fff; transform:translateX(-6px); }
.diag-option.is-chosen::before { background:#fff; }
.diag-option.is-dropped { opacity:0; transform:translateX(16px); }

.diag-confirm,
.diag-send {
  align-self:start;
  margin-top:12px;
  border:0;
  border-radius:999px;
  padding:15px 30px;
  background:var(--orange);
  color:#fff;
  font-family:var(--mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  transition:transform .24s,box-shadow .24s,opacity .24s;
}

.diag-confirm:hover:not(:disabled),
.diag-send:hover { transform:translateY(-2px); box-shadow:0 14px 30px rgba(255,106,0,.4); }
.diag-confirm:disabled { opacity:.4; }

/* --- Etapa final: o formulário ocupa a coluna da direita --- */
.diag-form {
  display:grid;
  margin:0;
  padding:clamp(20px,2.4vw,26px);
  gap:13px 14px;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  border:1px solid rgba(255,255,255,.16);
  border-radius:16px;
  background:rgba(10,11,13,.8);
  backdrop-filter:blur(10px);
  text-align:left;
}

.diag-form label { display:grid; gap:7px; }
.diag-form .diag-full { grid-column:1 / -1; }

.diag-form span {
  color:rgba(255,255,255,.6);
  font-family:var(--mono);
  font-size:10px;
  font-weight:700;
  letter-spacing:.14em;
}

.diag-form input,
.diag-form textarea {
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  padding:12px 14px;
  background:rgba(255,255,255,.06);
  color:#f1f0ee;
  font-size:14.5px;
  transition:border-color .22s,background .22s;
}

.diag-form input:focus,
.diag-form textarea:focus {
  border-color:var(--orange);
  background:rgba(255,255,255,.09);
  outline:none;
}

.diag-form textarea { resize:vertical; }
.diag-form .diag-send { grid-column:1 / -1; justify-self:start; margin-top:2px; }

.diag-error {
  grid-column:1 / -1;
  margin:0;
  border-left:2px solid #ff5a4d;
  padding:10px 14px;
  background:rgba(255,90,77,.14);
  color:#ffb3ac;
  font-family:var(--mono);
  font-size:12px;
}

/* --- Barra inferior --- */
.diag-bar {
  display:flex;
  width:min(1200px,100%);
  margin:0 auto;
  padding:16px max(20px,5vw) clamp(26px,4vw,44px);
  align-items:center;
  gap:18px;
}

.diag-count {
  flex:none;
  color:rgba(255,255,255,.72);
  font-family:var(--mono);
  font-size:10px;
  font-weight:700;
  letter-spacing:.16em;
}

.diag-meter {
  flex:1;
  height:3px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.16);
}

.diag-meter i {
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--orange),var(--orange-soft));
  transition:width .5s cubic-bezier(.16,1,.3,1);
}

.diag-back {
  flex:none;
  border:1px solid rgba(255,255,255,.28);
  border-radius:999px;
  padding:8px 15px;
  background:transparent;
  color:rgba(255,255,255,.8);
  font-family:var(--mono);
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
  transition:border-color .24s,color .24s;
}

.diag-back:hover { border-color:var(--orange); color:var(--orange); }

.diag-noscript {
  width:min(760px,100%);
  margin:0 auto;
  padding:26px max(20px,5vw);
  color:var(--muted);
  font-size:14px;
}

@media (max-width:900px) {
  .diag-ask-block {
    min-height:0;
    gap:28px;
    grid-template-columns:1fr;
    align-items:start;
  }

  .diag-ask { max-width:none; }
  .has-motion .diag-current.is-fresh .diag-option { animation-name:diag-opt-empilhado; }

  @keyframes diag-opt-empilhado {
    from { opacity:0; transform:translateY(14px); }
    to   { opacity:1; transform:none; }
  }

  .diag-option:hover { transform:translateY(-2px); }
  .diag-option.is-chosen { transform:none; }
  .diag-option.is-dropped { opacity:0; transform:none; }

  .diag-bar { flex-wrap:wrap; gap:12px; }
  .diag-count { order:1; }
  .diag-back { order:2; margin-left:auto; }
  .diag-meter { order:3; flex:1 0 100%; }
}


/* --- Submenu do cabeçalho -----------------------------------------------
   O dropdown abre 16px abaixo do título. Esse vão não pertence nem ao
   título nem ao submenu, então ao descer o mouse em direção a ele o
   ponteiro atravessa uma faixa "de ninguém", o mouseleave dispara e o menu
   fecha antes de ser alcançado — era o motivo de o submenu não funcionar.
   A ponte invisível abaixo mantém o ponteiro dentro do grupo o tempo todo. */
.desktop-nav .nav-dropdown::before {
  position:absolute;
  top:-18px;
  right:0;
  left:0;
  height:18px;
  content:"";
}

/* Área de clique confortável no título, em vez dos 14px atuais */
.desktop-nav .nav-group summary { padding:6px 0; }

.desktop-nav .nav-group[open] summary { color:var(--orange); }

.desktop-nav .nav-dropdown {
  animation:nav-drop .22s cubic-bezier(.16,1,.3,1) both;
}

@keyframes nav-drop {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:none; }
}


/* --- Seção 05 / Jornada Acta --------------------------------------------
   Duas mudanças: o marcador do trilho vertical passa a ser o ícone da Acta,
   e os cartões deixam de trocar por fade empilhado para deslizar num trilho
   preso ao scroll — o mesmo comportamento da seção de soluções. */

/* Marcador: era um ponto de 9px; vira o ícone da marca. Como é um
   pseudo-elemento, entra por background-image. O box-shadow saiu porque
   desenharia um halo retangular atrás de uma arte transparente — quem faz
   o brilho agora é o drop-shadow, que segue o contorno. */
.journey .journey-pilot:after {
  left:-7px;            /* centraliza os 28px sobre o trilho vertical */
  z-index:2;
  width:28px;
  height:22px;
  border-radius:0;
  background:url("../acta-robot-icon.png") center/contain no-repeat;
  box-shadow:none;
  filter:drop-shadow(0 0 8px rgba(255,106,0,.62));
}

.journey .journey-pilot:before {
  background:#2fd4c4;
}

/* O encaixe dos cartões é feito no JS (ver "encaixe ao parar" em main.js).
   Testei antes com scroll-snap nativo e não resolve o caso relatado: com
   "proximity" o navegador ignora justamente o meio do caminho, que é a
   distância máxima de qualquer ponto — medido, desvio 0 ao soltar em 0.5,
   1.5 e 2.5 cartões. E "mandatory" no scroller da página inteira deixaria
   trechos sem ponto de encaixe difíceis de alcançar. */
.journey { position:relative; }
.journey-snap { display:none; }

/* Trilho VERTICAL: os cartões sobem conforme a rolagem. A posição vem
   direto do progresso de scroll, sem transição — presa ao scroll, transição
   só atrasaria o movimento. */
.journey .journey-cards { position:relative; overflow:hidden; }

.journey .journey-track {
  display:flex;
  width:100%;
  height:600%;
  flex-direction:column;
  /* 6 cartões: do primeiro ao último são 5 janelas = 83,3333% do trilho */
  transform:translate3d(0,calc(var(--journey-progress,0) * -83.3333%),0);
  will-change:transform;
}

/* As regras antigas prendiam cada cartão em position:absolute com
   opacity/transform !important para o efeito de fade empilhado. Precisam
   ser desfeitas com a mesma força. */
.journey .journey-cards .journey-card,
.journey .journey-cards .journey-card[data-reveal],
.journey .journey-cards .journey-card.is-active,
.journey .journey-cards .journey-card.is-active[data-reveal] {
  position:relative!important;
  inset:auto!important;
  flex:0 0 16.6667%;
  width:100%!important;
  min-height:0!important;
  height:16.6667%!important;
  opacity:1!important;
  transform:none!important;
  pointer-events:auto!important;
  transition:border-color .4s ease!important;
}

.journey .journey-cards .journey-card.is-active { border-color:var(--orange)!important; }

/* O 6º cartão e o 6º botão estavam ocultos por CSS, casando com um corte em
   5 que também existia no JS. O conteúdo de "06 · Treinamento & educação"
   está escrito e completo, e no trilho a contagem não muda o encaixe — cada
   cartão ocupa uma janela inteira. Então volta para a jornada. */
.journey .journey-cards .journey-card:nth-child(n+6) { display:grid!important; }
.journey .journey-nav button:nth-child(n+6) { display:inline-block!important; }


/* --- Seção 04 / Gestão de frotas ----------------------------------------
   Havia três recuos diferentes disputando a mesma coluna: o rótulo em
   max(24px,6vw), o botão em max(44px,8vw) (sobrescrito para 36px numa media
   query) e o texto grande em 0. O texto ficava colado na borda porque
   .story-lines resolvia o recuo com padding-left, e padding do pai não
   indenta filho com position:absolute — o bloco contêiner dele é a padding
   box, então left:0 cai na borda.

   Agora os três usam a mesma variável, alinhada com a moldura do mockup
   (o mesmo max(30px,5vw) do padding de .software-demo). Moldura, rótulo,
   título e botão passam a compartilhar uma única linha vertical. */

.scroll-story { --story-gutter:max(30px,5vw); }

/* A moldura do mockup passa a ler a mesma variável do texto. Sem isso, cada
   breakpoint tinha um padding próprio (72 / 22 / 14px) e a coluna de texto
   desencontrava da moldura por alguns pixels em cada faixa. */
.scroll-story .software-demo {
  padding-right:var(--story-gutter)!important;
  padding-left:var(--story-gutter)!important;
}

.scroll-story .story-label,
.scroll-story .story-actions {
  left:var(--story-gutter)!important;
  right:auto!important;
}

.scroll-story .story-lines {
  padding-left:0!important;
  place-items:center start;
}

.scroll-story .story-lines p {
  left:var(--story-gutter)!important;
  right:auto!important;
  /* O painel de frota ocupa 246px fixos na direita do quadro. A largura do
     texto desconta esse painel mais uma folga de 40px, senão entre ~900 e
     1024px a manchete passa por cima dele (medido: -47px de folga a 935px).
     286px = 246 do painel + 40 de respiro. */
  width:min(640px,calc(100% - var(--story-gutter) * 2 - 286px))!important;
  text-align:left;
}

/* Abaixo de 900px a moldura do mockup recua para 22px (e 14px em telas bem
   estreitas). O recuo do texto acompanha, para as duas colunas continuarem
   na mesma linha. */
@media (max-width:900px) {
  .scroll-story { --story-gutter:22px; }
  .scroll-story .story-lines p { width:calc(100% - var(--story-gutter) * 2)!important; }

  /* Aqui a manchete ocupa a largura inteira e passa por cima do painel de
     frota, onde o scrim original tinha só 18% de opacidade. Sem reforço, o
     texto branco cai sobre a área clara do painel. */
  .scroll-story .story-shade {
    background:linear-gradient(90deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.8) 55%,rgba(0,0,0,.68) 100%)!important;
  }
}

@media (max-width:560px) {
  .scroll-story { --story-gutter:18px; }
}


/* --- Decodificação de texto (efeito "bugando") --------------------------
   Os caracteres entram embaralhados e vão se resolvendo da esquerda para a
   direita. Enquanto não resolveu, o caractere fica laranja — o olho lê como
   dado sendo decodificado, e não como erro de fonte. */

/* display:inline, NÃO inline-block. Caixas inline-block criam oportunidade
   de quebra de linha entre si, então uma palavra fatiada em caracteres
   passava a poder quebrar em qualquer letra — "uma" virava "u / ma" no meio
   do título. Como aqui só mudam cor e texto (nenhum transform), inline basta. */
.ch { display:inline; }
.ch.is-noise { color:var(--orange); opacity:.92; }

/* Enquanto decodifica, um leve rastro luminoso na linha inteira */
.is-decoding { text-shadow:0 0 18px rgba(255,106,0,.22); }


/* ---------- 5. Seção de slides ------------------------------------------ */

/* Moldura que abriga o cartão e os brackets de canto */
.product-frame {
  position:relative;
  width:min(1514px,calc(100% - 80px));
  height:min(68svh,610px);
  margin:0 auto;
  flex:0 1 min(68svh,610px);
}

.products .product-frame > .product-window {
  width:100%!important;
  height:100%!important;
  margin:0!important;
  flex:none!important;
}

/* Brackets: quatro cantos em L, fora do cartão */
.stage-brackets { position:absolute; inset:-26px; pointer-events:none; }

.stage-brackets i {
  position:absolute;
  width:34px;
  height:34px;
  border:1px solid rgba(255,255,255,.34);
}

.stage-brackets i:nth-child(1) { top:0;    left:0;    border-width:1px 0 0 1px; }
.stage-brackets i:nth-child(2) { top:0;    right:0;   border-width:1px 1px 0 0; }
.stage-brackets i:nth-child(3) { bottom:0; right:0;   border-width:0 1px 1px 0; }
.stage-brackets i:nth-child(4) { bottom:0; left:0;    border-width:0 0 1px 1px; }

/* "CONTINUE ROLANDO" ganha o chevron da referência */
.rail-reading > span:first-child::after {
  margin-left:7px;
  content:"\2304";
  font-size:13px;
  line-height:1;
  vertical-align:middle;
}

/* O mesmo marcador acompanha o fim do preenchimento da barra de slides. */
.products .rail-meter > i {
  background:#2fd4c4;
}

.products .rail-meter {
  --rail-meter-marker-gap:0px;
  --rail-meter-marker-width:26px;
  position:relative;
  overflow:visible;
  background:linear-gradient(
    90deg,
    #222325 0,
    #222325 var(--rail-meter-progress,20%),
    transparent var(--rail-meter-progress,20%),
    transparent calc(var(--rail-meter-progress,20%) + var(--rail-meter-marker-gap) + var(--rail-meter-marker-width)),
    #222325 calc(var(--rail-meter-progress,20%) + var(--rail-meter-marker-gap) + var(--rail-meter-marker-width)),
    #222325 100%
  );
}

.products .rail-meter::after {
  position:absolute;
  z-index:2;
  top:50%;
  left:calc(var(--rail-meter-progress,20%) + var(--rail-meter-marker-gap));
  width:var(--rail-meter-marker-width);
  height:21px;
  border-radius:0;
  background:url("../acta-robot-icon.png") center/contain no-repeat;
  content:"";
  filter:drop-shadow(0 0 7px rgba(255,106,0,.58));
  pointer-events:none;
  transform:translateY(-50%);
  transition:left .55s cubic-bezier(.2,.8,.2,1);
}

@media (max-width:620px) {
  .products .rail-meter {
    --rail-meter-marker-gap:0px;
    --rail-meter-marker-width:24px;
  }

  .products .rail-meter::after {
    height:19px;
  }
}

/* Pill pequeno com o nome da linha (estava oculto por !important) */
.products .product-copy > span {
  position:static!important;
  display:inline-flex!important;
  width:max-content;
  margin:0 0 18px!important;
  padding:8px 15px;
  align-items:center;
  border:1px solid rgba(32,33,36,.32);
  border-radius:999px;
  color:#202124!important;
  font-family:var(--mono);
  font-size:10px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* CTA com o ponto branco da referência */
.products .product-copy a::before {
  width:7px;
  height:7px;
  margin-right:10px;
  border-radius:50%;
  background:#fff;
  content:"";
}

.products .product-copy a {
  display:inline-flex!important;
  width:max-content;
  align-items:center;
  gap:0;
  font-family:var(--mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.11em;
  transition:transform .28s cubic-bezier(.16,1,.3,1),box-shadow .28s;
}

.products .product-copy a:hover {
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(255,106,0,.32);
}

/* Botão-seta circular, canto superior direito do cartão */
.card-next {
  position:absolute;
  z-index:5;
  top:clamp(26px,3.2vw,44px);
  right:clamp(26px,3.2vw,44px);
  display:grid;
  width:40px;
  height:40px;
  place-items:center;
  border:1px solid rgba(32,33,36,.34);
  border-radius:50%;
  background:transparent;
  color:#202124;
  font-size:15px;
  line-height:1;
  transition:background .24s,color .24s,transform .24s;
}

.card-next:hover { background:#202124; color:#fff; transform:scale(1.06); }
.card-next:focus-visible { outline:2px solid var(--orange); outline-offset:3px; }

/* Pill "RECURSOS", canto inferior direito */
.card-features {
  position:absolute;
  z-index:5;
  right:clamp(26px,3.2vw,44px);
  bottom:clamp(26px,3.2vw,44px);
  display:inline-flex;
  align-items:center;
  gap:12px;
  border-radius:999px;
  padding:11px 13px 11px 20px;
  background:rgba(255,255,255,.82);
  color:#202124;
  font-family:var(--mono);
  font-size:10px;
  font-weight:700;
  letter-spacing:.14em;
}

.card-features i {
  display:grid;
  width:24px;
  height:24px;
  place-items:center;
  border-radius:50%;
  background:#202124;
  color:#fff;
  font-size:11px;
  font-style:normal;
}

/* O trilho agora acompanha o dedo/roda continuamente. A transição de 1,05 s
   existia para suavizar os saltos do scroll-jacking; presa ao scroll ela só
   causa atraso. Fora. */
.products .product-track {
  transition:none!important;
  will-change:transform;
}

/* Tabs: estados de foco e hover que faltavam */
.product-tabs button { font-family:var(--mono)!important; }
.product-tabs button:hover:not(.is-active) { background:#292a2b; color:#c8c9ca; }
.product-tabs button:focus-visible { outline:2px solid var(--orange); outline-offset:3px; }

@media (max-width:900px) {
  .product-frame { width:calc(100% - 34px); }
  .stage-brackets { inset:-14px; }
  .stage-brackets i { width:20px; height:20px; }
  .card-features { display:none; }
  .products .product-copy > span { margin-bottom:12px!important; padding:6px 12px; font-size:9px; }
}


/* ---------- 6. Statement: leitura palavra a palavra --------------------- */

/* O parágrafo é fatiado em palavras por JS. Elas acendem conforme o scroll,
   o que dá ritmo de legenda de filme sem sequestrar a rolagem. */
.statement p .word {
  color:rgba(241,241,239,.19);
  transition:color .5s ease;
}

.statement p .word.is-lit { color:#f1f1ef; }
.statement p em .word.is-lit { color:var(--orange); }
html:not(.has-motion) .statement p .word { color:inherit; }


/* ---------- 7. Reveals encadeados --------------------------------------- */

.has-motion [data-reveal] { clip-path:inset(0 0 12% 0); }
.has-motion [data-reveal].is-visible { clip-path:inset(0 0 -25% 0); transition:opacity .8s ease,transform .85s cubic-bezier(.16,1,.3,1),clip-path .95s cubic-bezier(.16,1,.3,1)!important; }

/* Escalonamento nas grades — cada item entra logo depois do anterior.
   (O ecossistema saiu daqui: virou o diagrama orbital, que tem o próprio
   encadeamento por --i.) */
.has-motion .post-grid article:nth-child(1) { transition-delay:.04s; }
.has-motion .post-grid article:nth-child(2) { transition-delay:.11s; }
.has-motion .post-grid article:nth-child(3) { transition-delay:.18s; }


/* ---------- 8. Acessibilidade e foco ------------------------------------ */

.skip-link {
  position:absolute;
  z-index:10001;
  top:10px;
  left:10px;
  padding:12px 18px;
  border-radius:999px;
  background:var(--orange);
  color:#fff;
  font-family:var(--mono);
  font-size:12px;
  transform:translateY(-160%);
  transition:transform .2s;
}

.skip-link:focus { transform:none; }

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline:2px solid var(--orange);
  outline-offset:3px;
}

/* O botão de pausa da frase do hero foi retirado a pedido: a animação roda
   sempre. Quem precisa de menos movimento continua atendido pela preferência
   do sistema (prefers-reduced-motion), que interrompe a rotação por completo. */

/* Retorno do formulário com estado visível, não só texto solto */
.form-notice {
  border-left:2px solid var(--orange);
  padding:14px 18px;
  background:rgba(255,106,0,.09);
  font-family:var(--mono);
  font-size:12px;
  line-height:1.5;
}

.form-notice[data-state="enviado"] { border-color:#3ddc84; background:rgba(61,220,132,.1); }
.form-notice[data-state="erro"],
.form-notice[data-state="invalido"] { border-color:#ff5a4d; background:rgba(255,90,77,.1); }

/* Quem pede menos movimento não recebe grão, parallax nem cortina */
@media (prefers-reduced-motion:reduce) {
  .fx-grain { display:none; }
  .hero-curtain { display:none; }
  .statement p .word { color:inherit!important; }

  /* Glitch e decodificação ficam totalmente desligados. O JS já não os
     dispara; isto é a segunda trava, caso a classe chegue por outro caminho. */
  .hero-phrase.is-glitching { animation:none!important; }
  .hero-phrase.is-glitching::before,
  .hero-phrase.is-glitching::after { animation:none!important; opacity:0!important; }
  .ch.is-noise { color:inherit!important; }
  .is-decoding { text-shadow:none!important; }
}

/* ---------- 9. Constelação de soluções Acta ---------------------------- */

.solution-constellation {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:clamp(96px,10vw,148px) clamp(24px,5vw,88px) clamp(112px,11vw,168px);
  background:
    radial-gradient(circle at 50% 57%, rgba(47,212,196,.12), transparent 24%),
    linear-gradient(180deg,#0c0e10 0%,#08090b 100%);
}

.solution-constellation::before {
  position:absolute;
  z-index:-1;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:72px 72px;
  content:"";
  mask-image:linear-gradient(180deg,transparent 0%,#000 18%,#000 82%,transparent 100%);
}

.solution-constellation-shell {
  width:min(100%,1460px);
  margin:0 auto;
}

.solution-constellation-heading {
  position:relative;
  z-index:4;
  max-width:650px;
  margin:0;
}

.solution-constellation-heading h2 {
  margin:18px 0 16px;
  color:#f1f1ef;
  font-family:var(--display-face);
  font-size:clamp(38px,5vw,76px);
  font-weight:500;
  letter-spacing:-.055em;
  line-height:.98;
}

.solution-constellation-heading h2 em {
  color:var(--orange);
  font-style:normal;
}

.solution-constellation-heading > span {
  display:block;
  max-width:560px;
  color:rgba(241,241,239,.62);
  font-size:clamp(15px,1.35vw,19px);
  line-height:1.55;
}

.solution-orbit {
  position:relative;
  width:min(100%,1220px);
  min-height:690px;
  margin:clamp(34px,4vw,72px) auto 0;
}

.solution-orbit::before {
  position:absolute;
  top:50%;
  left:50%;
  width:66%;
  height:82%;
  border:1px dashed rgba(47,212,196,.24);
  border-radius:50%;
  content:"";
  pointer-events:none;
  transform:translate(-50%,-50%) rotate(-8deg);
}

.solution-orbit::after {
  position:absolute;
  top:50%;
  left:50%;
  width:31%;
  aspect-ratio:1;
  border:1px solid rgba(255,106,0,.18);
  border-radius:50%;
  box-shadow:0 0 90px rgba(47,212,196,.12), inset 0 0 40px rgba(255,106,0,.07);
  content:"";
  pointer-events:none;
  transform:translate(-50%,-50%);
}

.solution-connector {
  position:absolute;
  z-index:1;
  top:calc(50% - 1px);
  left:50%;
  width:31%;
  height:1px;
  background:linear-gradient(90deg,rgba(47,212,196,.7),rgba(47,212,196,.06));
  content:"";
  opacity:.68;
  transform-origin:0 50%;
}

.solution-connector::after {
  position:absolute;
  top:50%;
  right:0;
  width:6px;
  height:6px;
  border:1px solid rgba(47,212,196,.85);
  border-radius:50%;
  background:#0b0d0f;
  content:"";
  transform:translate(50%,-50%);
}

.solution-connector--nw { transform:rotate(-148deg); }
.solution-connector--ne { transform:rotate(-32deg); }
.solution-connector--sw { transform:rotate(148deg); }
.solution-connector--se { transform:rotate(32deg); }

.solution-center {
  position:absolute;
  z-index:3;
  top:50%;
  left:50%;
  display:flex;
  width:clamp(218px,23vw,286px);
  aspect-ratio:1;
  padding:30px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(47,212,196,.78);
  border-radius:50%;
  background:radial-gradient(circle at 42% 32%,rgba(47,212,196,.18),rgba(13,16,18,.98) 65%);
  box-shadow:0 0 0 14px rgba(10,12,14,.58),0 0 50px rgba(47,212,196,.16),inset 0 0 34px rgba(255,106,0,.08);
  text-align:center;
  transform:translate(-50%,-50%);
}

.solution-center::before,
.solution-center::after {
  position:absolute;
  border-radius:50%;
  content:"";
  pointer-events:none;
}

.solution-center::before {
  inset:-10px;
  border:1px solid rgba(241,241,239,.16);
}

.solution-center::after {
  inset:12px;
  border:1px dashed rgba(255,106,0,.3);
}

.solution-center-kicker {
  position:relative;
  z-index:1;
  color:var(--orange);
  font-family:var(--mono);
  font-size:9px;
  font-weight:700;
  letter-spacing:.18em;
}

.solution-center-logo {
  position:relative;
  z-index:1;
  display:grid;
  width:min(100%,170px);
  height:58px;
  margin:10px 0 8px;
  place-items:center;
}

.solution-center-logo img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 0 12px rgba(255,106,0,.22));
}

.solution-center p {
  position:relative;
  z-index:1;
  margin:0;
  color:rgba(241,241,239,.7);
  font-size:13px;
  line-height:1.35;
}

.solution-center p em {
  color:#f1f1ef;
  font-style:normal;
}

.solution-node {
  --solution-accent:#2fd4c4;
  position:absolute;
  z-index:2;
  display:grid;
  width:min(31%,340px);
  min-height:194px;
  padding:18px 20px 16px;
  grid-template-columns:1fr auto;
  align-content:start;
  border:1px solid rgba(241,241,239,.2);
  border-top:2px solid var(--solution-accent);
  border-radius:2px;
  background:linear-gradient(145deg,rgba(25,28,30,.96),rgba(11,13,15,.96));
  box-shadow:0 18px 45px rgba(0,0,0,.26);
  color:#f1f1ef;
  text-decoration:none;
  transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease,background .3s ease;
}

.solution-node::before {
  position:absolute;
  inset:7px;
  border:1px solid rgba(255,255,255,.055);
  content:"";
  pointer-events:none;
}

.solution-node:hover,
.solution-node:focus-visible {
  border-color:var(--solution-accent);
  background:linear-gradient(145deg,rgba(31,36,37,.98),rgba(12,15,16,.98));
  box-shadow:0 20px 55px rgba(0,0,0,.38),0 0 28px color-mix(in srgb,var(--solution-accent) 18%,transparent);
  transform:translateY(-7px);
}

.solution-node--roboteazy { --solution-accent:#2fd4c4; top:2%; left:2%; }
.solution-node--robot-forge { --solution-accent:#ff6a00; top:2%; right:2%; }
.solution-node--kappabot { --solution-accent:#f4b942; bottom:2%; left:2%; }
.solution-node--ninefleet { --solution-accent:#6b83ff; bottom:2%; right:2%; }

.solution-node-index {
  position:relative;
  z-index:1;
  color:rgba(241,241,239,.44);
  font-family:var(--mono);
  font-size:9px;
  font-weight:700;
  letter-spacing:.15em;
}

.solution-node > i {
  position:relative;
  z-index:1;
  color:var(--solution-accent);
  font-size:17px;
  font-style:normal;
  line-height:1;
}

.solution-node-logo {
  position:relative;
  z-index:1;
  display:grid;
  width:100%;
  height:72px;
  margin:14px 0 14px;
  padding:8px 16px;
  grid-column:1/-1;
  place-items:center;
  border-radius:1px;
  background:#f5f6f3;
  overflow:hidden;
}

.solution-node-logo img {
  display:block;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  object-fit:contain;
}

.solution-node-type {
  position:relative;
  z-index:1;
  align-self:end;
  color:rgba(241,241,239,.72);
  font-family:var(--mono);
  font-size:10px;
  font-weight:700;
  letter-spacing:.1em;
  line-height:1.35;
  text-transform:uppercase;
}

@media (max-width:980px) {
  .solution-orbit {
    display:grid;
    min-height:0;
    padding-top:218px;
    gap:14px;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .solution-orbit::before {
    width:78%;
    height:180px;
    top:106px;
  }

  .solution-orbit::after {
    top:108px;
    width:190px;
  }

  .solution-center {
    top:108px;
    width:190px;
  }

  .solution-connector { display:none; }

  .solution-node {
    position:relative;
    top:auto;
    right:auto;
    bottom:auto;
    left:auto;
    width:100%;
  }
}

@media (max-width:560px) {
  .solution-constellation {
    padding-right:18px;
    padding-left:18px;
  }

  .solution-constellation-heading h2 {
    font-size:clamp(38px,12vw,58px);
  }

  .solution-orbit {
    padding-top:184px;
    grid-template-columns:1fr;
  }

  .solution-orbit::before {
    top:94px;
    width:88%;
    height:162px;
  }

  .solution-orbit::after,
  .solution-center {
    top:94px;
  }

  .solution-center {
    width:168px;
    padding:22px;
  }

  .solution-center-logo {
    width:128px;
    height:44px;
  }

  .solution-node {
    min-height:174px;
  }
}

@media (prefers-reduced-motion:reduce) {
  .solution-node { transition:none; }
}

/* ---------- 11. Roda radial do ecossistema Acta ------------------------- */

.acta-ecosystem {
  --acta-navy:#061a40;
  --acta-blue:#159fe7;
  --acta-cyan:#39d7dc;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:calc(100vh - 72px);
  padding:clamp(76px,8vw,132px) clamp(24px,5vw,88px) clamp(92px,9vw,148px);
  background:
    radial-gradient(circle at 72% 48%,rgba(24,157,224,.2),transparent 27%),
    linear-gradient(180deg,#071b42 0%,#061838 100%);
  color:#f5f8ff;
}

.acta-ecosystem::before {
  position:absolute;
  z-index:-1;
  inset:0;
  background-image:
    linear-gradient(rgba(120,185,245,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(120,185,245,.07) 1px,transparent 1px);
  background-size:72px 72px;
  content:"";
  opacity:.48;
  mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 92%,transparent 100%);
}

.acta-ecosystem__shell {
  width:min(100%,1480px);
  margin:0 auto;
}

.acta-ecosystem__grid {
  display:grid;
  min-height:820px;
  align-items:center;
  gap:clamp(24px,3vw,64px);
  grid-template-columns:minmax(320px,.78fr) minmax(0,1.22fr);
}

.acta-ecosystem__copy {
  position:relative;
  z-index:8;
  max-width:620px;
}

.acta-ecosystem__copy .eyebrow {
  color:#b7d9ff;
}

.acta-ecosystem__copy h2 {
  max-width:720px;
  margin:24px 0 22px;
  color:#f5f8ff;
  font-family:var(--display-face);
  font-size:clamp(48px,5.7vw,90px);
  font-weight:500;
  letter-spacing:-.075em;
  line-height:.87;
}

.acta-ecosystem__copy h2 strong {
  display:block;
  color:#1e9eea;
  font-weight:600;
}

.acta-ecosystem__copy h2 em {
  color:#32a9f2;
  font-style:normal;
}

.acta-ecosystem__tagline {
  max-width:480px;
  margin:0;
  color:#e7f2ff;
  font-size:clamp(17px,1.5vw,23px);
  line-height:1.3;
}

.acta-ecosystem__description {
  max-width:510px;
  margin:22px 0 0;
  color:rgba(231,242,255,.68);
  font-size:15px;
  line-height:1.6;
}

.acta-ecosystem__metrics {
  display:grid;
  max-width:510px;
  margin-top:30px;
  gap:10px;
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.acta-ecosystem__metric {
  display:flex;
  min-height:92px;
  padding:13px 14px 12px;
  flex-direction:column;
  justify-content:space-between;
  border:1px solid rgba(184,224,255,.16);
  border-radius:3px;
  background:rgba(2,22,61,.56);
  color:#f5f8ff;
  text-decoration:none;
  transition:border-color .3s ease,background .3s ease,transform .3s ease;
}

.acta-ecosystem__metric:hover,
.acta-ecosystem__metric:focus-visible {
  border-color:rgba(57,215,220,.7);
  background:rgba(12,70,122,.7);
  transform:translateY(-4px);
}

.acta-ecosystem__metric strong {
  color:var(--acta-cyan);
  font-family:var(--display-face);
  font-size:clamp(22px,2.1vw,32px);
  font-weight:600;
  letter-spacing:-.05em;
  line-height:1;
}

.acta-ecosystem__metric span {
  color:rgba(231,242,255,.68);
  font-family:var(--mono);
  font-size:9px;
  font-weight:700;
  letter-spacing:.08em;
  line-height:1.3;
  text-transform:uppercase;
}

.acta-ecosystem__guide {
  display:flex;
  max-width:430px;
  margin:24px 0 0;
  align-items:center;
  gap:10px;
  color:rgba(231,242,255,.58);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.08em;
  line-height:1.4;
  text-transform:uppercase;
}

.acta-ecosystem__guide span {
  display:grid;
  width:24px;
  height:24px;
  flex:0 0 auto;
  place-items:center;
  border:1px solid rgba(57,215,220,.7);
  border-radius:50%;
  color:var(--acta-cyan);
  font-size:17px;
  line-height:1;
}

.acta-wheel-stage {
  position:relative;
  z-index:2;
  min-width:0;
  min-height:820px;
}

.acta-wheel {
  position:relative;
  width:min(100%,820px);
  aspect-ratio:1;
  margin:0 auto;
  overflow:visible;
}

.acta-wheel__svg {
  position:absolute;
  z-index:1;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  filter:drop-shadow(0 18px 35px rgba(0,0,0,.38));
}

.acta-wheel__slice {
  cursor:pointer;
  opacity:.96;
  paint-order:stroke fill;
  stroke:var(--acta-navy);
  stroke-width:12;
  transition:opacity .35s ease,filter .35s ease,stroke .35s ease,stroke-width .35s ease;
}

.acta-wheel__slice:hover,
.acta-wheel__slice.is-active {
  opacity:1;
  filter:url(#acta-wheel-glow);
  stroke:rgba(223,248,255,.92);
  stroke-width:4;
}

.acta-wheel__outer-ring,
.acta-wheel__inner-ring,
.acta-wheel__guide-ring {
  fill:none;
  pointer-events:none;
}

.acta-wheel__outer-ring {
  stroke:rgba(184,224,255,.38);
  stroke-dasharray:7 10;
  stroke-width:2;
}

.acta-wheel__inner-ring {
  stroke:rgba(212,239,255,.72);
  stroke-dasharray:4 6;
  stroke-width:2;
}

.acta-wheel__guide-ring {
  stroke:rgba(188,226,255,.28);
  stroke-dasharray:3 8;
  stroke-width:1.5;
}

.acta-wheel__divider {
  pointer-events:none;
  stroke:rgba(193,229,255,.55);
  stroke-dasharray:5 7;
  stroke-width:2;
}

.acta-wheel__hub {
  position:absolute;
  z-index:6;
  top:50%;
  left:50%;
  display:flex;
  width:clamp(186px,25%,250px);
  aspect-ratio:1;
  padding:28px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.58);
  border-radius:50%;
  background:radial-gradient(circle at 42% 28%,rgba(56,201,231,.95),rgba(8,94,162,.98) 67%,#062452 100%);
  box-shadow:0 0 0 12px rgba(5,27,66,.82),0 0 0 13px rgba(159,216,255,.3),0 18px 60px rgba(0,0,0,.38);
  text-align:center;
  transform:translate(-50%,-50%);
}

.acta-wheel__hub::before,
.acta-wheel__hub::after {
  position:absolute;
  border-radius:50%;
  content:"";
  pointer-events:none;
}

.acta-wheel__hub::before {
  inset:10px;
  border:1px dashed rgba(221,245,255,.42);
}

.acta-wheel__hub::after {
  inset:-9px;
  border:1px solid rgba(196,230,255,.2);
}

.acta-wheel__hub > span,
.acta-wheel__hub > img,
.acta-wheel__hub > small {
  position:relative;
  z-index:1;
}

.acta-wheel__hub > span {
  color:#e9f4ff;
  font-family:var(--mono);
  font-size:8px;
  font-weight:700;
  letter-spacing:.17em;
}

.acta-wheel__hub > img {
  display:block;
  width:min(100%,170px);
  height:58px;
  margin:10px 0 6px;
  object-fit:contain;
}

.acta-wheel__hub > small {
  color:#f0f7ff;
  font-family:var(--mono);
  font-size:8px;
  font-weight:700;
  letter-spacing:.1em;
  line-height:1.35;
}

.acta-wheel__hub > small em {
  color:#cfeaff;
  font-style:normal;
}

.acta-wheel__nodes {
  position:absolute;
  z-index:5;
  inset:0;
  pointer-events:none;
}

.acta-wheel__node {
  --node-accent:var(--acta-cyan);
  position:absolute;
  display:block;
  width:38%;
  min-height:190px;
  padding:23px 25px 21px;
  overflow:hidden;
  border:1px solid rgba(230,246,255,.38);
  color:#fff;
  text-decoration:none;
  pointer-events:auto;
  transition:filter .3s ease,transform .3s ease,box-shadow .3s ease;
}

.acta-wheel__node::before {
  position:absolute;
  z-index:-1;
  inset:10px;
  border:1px solid rgba(255,255,255,.15);
  content:"";
  pointer-events:none;
}

.acta-wheel__node::after {
  position:absolute;
  right:12%;
  bottom:13%;
  color:rgba(255,255,255,.9);
  content:"↗";
  font-size:23px;
  font-weight:300;
}

.acta-wheel__node:hover,
.acta-wheel__node:focus-visible {
  z-index:8;
  filter:brightness(1.13) saturate(1.08);
  box-shadow:0 17px 34px rgba(0,0,0,.3),0 0 25px rgba(57,215,220,.16);
  transform:translateY(-6px);
}

.acta-wheel__node--roboteazy {
  --node-accent:#39d7dc;
  top:0;
  right:0;
  background:linear-gradient(135deg,#159fe7,#0c78bd);
  clip-path:polygon(0 0,84% 0,100% 21%,95% 100%,12% 91%,0 71%);
}

.acta-wheel__node--robot-forge {
  --node-accent:#9fd8ff;
  right:0;
  bottom:0;
  background:linear-gradient(135deg,#0b5ca5,#08427f);
  clip-path:polygon(14% 0,100% 8%,94% 91%,9% 100%,0 21%);
}

.acta-wheel__node--kappabot {
  --node-accent:#f0c7ff;
  bottom:0;
  left:0;
  background:linear-gradient(135deg,#6655e7,#3f2ea5);
  clip-path:polygon(6% 0,91% 5%,100% 85%,8% 100%,0 73%);
}

.acta-wheel__node--ninefleet {
  --node-accent:#b9f4ff;
  top:0;
  left:0;
  background:linear-gradient(135deg,#147cc3,#105b9e);
  clip-path:polygon(13% 0,100% 8%,93% 100%,0 84%);
}

.acta-wheel__node-index {
  display:block;
  color:rgba(246,250,255,.82);
  font-family:var(--mono);
  font-size:9px;
  font-weight:700;
  letter-spacing:.14em;
}

.acta-wheel__node-logo {
  display:grid;
  width:min(100%,225px);
  height:59px;
  margin:13px 0 12px;
  padding:7px 13px;
  place-items:center;
  background:#f5f6f3;
}

.acta-wheel__node-logo img {
  display:block;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  object-fit:contain;
}

.acta-wheel__node strong {
  display:block;
  max-width:230px;
  color:#fff;
  font-family:var(--display-face);
  font-size:clamp(17px,1.55vw,23px);
  font-weight:600;
  letter-spacing:-.04em;
  line-height:1;
}

.acta-wheel__node > span:last-child {
  display:block;
  max-width:220px;
  margin-top:7px;
  color:rgba(242,249,255,.82);
  font-size:11px;
  line-height:1.3;
}

@media (max-width:1160px) {
  .acta-ecosystem__grid {
    grid-template-columns:minmax(280px,.76fr) minmax(0,1.24fr);
    gap:20px;
  }

  .acta-ecosystem__copy h2 {
    font-size:clamp(46px,5.2vw,74px);
  }

  .acta-wheel__node {
    min-height:172px;
    padding:19px 21px 18px;
  }

  .acta-wheel__node-logo {
    height:52px;
    margin:10px 0;
  }

  .acta-wheel__node > span:last-child {
    font-size:10px;
  }
}

@media (max-width:900px) {
  .acta-ecosystem {
    min-height:0;
    padding:82px 22px 106px;
  }

  .acta-ecosystem__grid {
    display:block;
    min-height:0;
  }

  .acta-ecosystem__copy {
    max-width:760px;
  }

  .acta-ecosystem__copy h2 {
    font-size:clamp(50px,8.7vw,82px);
  }

  .acta-wheel-stage {
    min-height:820px;
    margin-top:54px;
  }

  .acta-wheel {
    width:min(100%,800px);
  }

  .acta-wheel__node {
    width:36%;
  }
}

@media (max-width:560px) {
  .acta-ecosystem {
    padding:72px 17px 92px;
  }

  .acta-ecosystem__copy h2 {
    margin-top:18px;
    font-size:clamp(43px,12vw,62px);
  }

  .acta-ecosystem__tagline {
    font-size:15px;
  }

  .acta-ecosystem__description {
    margin-top:17px;
    font-size:13px;
  }

  .acta-ecosystem__metrics {
    gap:7px;
    margin-top:23px;
  }

  .acta-ecosystem__metric {
    min-height:80px;
    padding:10px;
  }

  .acta-ecosystem__metric strong {
    font-size:21px;
  }

  .acta-ecosystem__metric span {
    font-size:7px;
  }

  .acta-ecosystem__guide {
    margin-top:18px;
    font-size:8px;
  }

  .acta-wheel-stage {
    min-height:900px;
    margin-top:55px;
  }

  .acta-wheel {
    width:116%;
  }

  .acta-wheel__hub {
    width:174px;
    padding:21px;
  }

  .acta-wheel__hub > img {
    height:48px;
    margin:7px 0 4px;
  }

  .acta-wheel__hub > span,
  .acta-wheel__hub > small {
    font-size:7px;
  }

  .acta-wheel__node {
    width:58%;
    min-height:168px;
    padding:20px 22px 18px;
  }

  .acta-wheel__node--roboteazy { top:0; right:0; }
  .acta-wheel__node--ninefleet { top:194px; left:0; }
  .acta-wheel__node--kappabot { bottom:194px; left:0; }
  .acta-wheel__node--robot-forge { right:0; bottom:0; }

  .acta-wheel__node-index {
    font-size:8px;
  }

  .acta-wheel__node-logo {
    height:47px;
    margin:9px 0;
    padding:6px 11px;
  }

  .acta-wheel__node strong {
    font-size:16px;
  }

  .acta-wheel__node > span:last-child {
    margin-top:5px;
    font-size:9px;
  }

  .acta-wheel__node::after {
    right:9%;
    bottom:12%;
    font-size:19px;
  }
}

@media (prefers-reduced-motion:reduce) {
  .acta-ecosystem__metric,
  .acta-wheel__slice,
  .acta-wheel__node { transition:none; }
}

/* ---------- 12. Modo tipográfico, sem logos ----------------------------- */

.acta-wheel__hub > strong {
  position:relative;
  z-index:1;
  margin-top:12px;
  color:#fff;
  font-family:var(--display-face);
  font-size:clamp(22px,2.5vw,34px);
  font-weight:600;
  letter-spacing:-.065em;
  line-height:.95;
}

.acta-wheel__hub > small {
  margin-top:10px;
  color:#d8efff;
  font-size:9px;
}

.acta-wheel__node {
  border-color:rgba(230,246,255,.28);
  background-color:rgba(6,26,64,.84);
  backdrop-filter:blur(6px);
}

.acta-wheel__node-index {
  color:var(--node-accent);
}

.acta-wheel__node-index::after {
  display:block;
  width:34px;
  height:2px;
  margin-top:11px;
  background:var(--node-accent);
  content:"";
  opacity:.9;
}

.acta-wheel__node-name {
  display:block;
  margin-top:23px;
  color:#fff;
  font-family:var(--display-face);
  font-size:clamp(22px,2vw,31px);
  font-weight:600;
  letter-spacing:-.06em;
  line-height:.95;
}

.acta-wheel__node strong {
  display:block;
  margin-top:7px;
  color:rgba(242,249,255,.88);
  font-family:var(--mono);
  font-size:10px;
  font-weight:700;
  letter-spacing:.1em;
  line-height:1.25;
  text-transform:uppercase;
}

.acta-wheel__node > span:last-child {
  max-width:205px;
  margin-top:9px;
  color:rgba(242,249,255,.74);
  font-size:11px;
  letter-spacing:.01em;
}

@media (max-width:1160px) {
  .acta-wheel__node-name {
    margin-top:19px;
    font-size:clamp(20px,2vw,27px);
  }
}

@media (max-width:560px) {
  .acta-wheel__hub > strong {
    margin-top:9px;
    font-size:24px;
  }

  .acta-wheel__hub > small {
    margin-top:8px;
    font-size:7px;
  }

  .acta-wheel__node-name {
    margin-top:19px;
    font-size:20px;
  }

  .acta-wheel__node strong {
    margin-top:6px;
    font-size:8px;
  }

  .acta-wheel__node > span:last-child {
    margin-top:7px;
    font-size:9px;
  }
}

/* ---------- 13. Núcleo somente com a logo Acta -------------------------- */

.acta-wheel__hub {
  padding:20px;
}

.acta-wheel__hub > img {
  width:70%;
  height:auto;
  max-height:68px;
  margin:0;
  object-fit:contain;
}

@media (max-width:560px) {
  .acta-wheel__hub {
    padding:18px;
  }

  .acta-wheel__hub > img {
    width:72%;
    max-height:52px;
  }
}

/* ---------- 10. Ecossistema em composição editorial -------------------- */

.solution-constellation {
  --reference-navy:#061a40;
  --reference-blue:#168fda;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:1120px;
  padding:clamp(86px,8vw,132px) clamp(24px,5vw,88px) clamp(100px,9vw,150px);
  background:
    radial-gradient(circle at 69% 66%,rgba(18,149,218,.2),transparent 25%),
    linear-gradient(180deg,#071b42 0%,#061838 100%);
  color:#f5f8ff;
}

.solution-constellation::before {
  position:absolute;
  z-index:-1;
  inset:0;
  background-image:
    linear-gradient(rgba(120,185,245,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(120,185,245,.07) 1px,transparent 1px);
  background-size:72px 72px;
  content:"";
  opacity:.48;
  mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 92%,transparent 100%);
}

.solution-constellation-shell {
  position:relative;
  width:min(100%,1480px);
  margin:0 auto;
}

.solution-reference-heading {
  position:relative;
  z-index:7;
  max-width:790px;
  margin:0;
}

.solution-reference-heading .eyebrow {
  position:relative;
  z-index:1;
  color:#b7d9ff;
}

.solution-reference-heading h2 {
  position:relative;
  z-index:1;
  max-width:820px;
  margin:24px 0 22px;
  color:#f5f8ff;
  font-family:var(--display-face);
  font-size:clamp(52px,7.2vw,112px);
  font-weight:500;
  letter-spacing:-.075em;
  line-height:.84;
}

.solution-reference-heading h2 strong {
  display:block;
  color:#1e9eea;
  font-weight:600;
}

.solution-reference-heading h2 em {
  color:#32a9f2;
  font-style:normal;
}

.solution-reference-heading > span {
  position:relative;
  z-index:1;
  display:block;
  color:#e7f2ff;
  font-size:clamp(17px,1.65vw,25px);
  line-height:1.25;
}

.solution-reference-empty {
  position:absolute;
  z-index:0;
  top:calc(100% + 54px);
  left:0;
  width:min(58%,740px);
  height:150px;
  background:rgba(1,22,61,.68);
  box-shadow:inset 0 0 0 1px rgba(75,162,230,.05);
}

.solution-reference-canvas {
  position:relative;
  z-index:2;
  height:clamp(780px,68vw,980px);
  margin:clamp(28px,4vw,60px) auto 0;
}

.solution-reference-wheel {
  position:absolute;
  z-index:1;
  top:57%;
  left:54%;
  width:min(72%,790px);
  aspect-ratio:1;
  border:1px solid rgba(145,207,255,.2);
  border-radius:50%;
  background:conic-gradient(
    from:-42deg,
    #159fe7 0deg 74deg,
    var(--reference-navy) 74deg 81deg,
    #1264aa 81deg 164deg,
    var(--reference-navy) 164deg 171deg,
    #5b49df 171deg 253deg,
    var(--reference-navy) 253deg 261deg,
    #147cc3 261deg 344deg,
    var(--reference-navy) 344deg 360deg
  );
  box-shadow:0 0 0 18px rgba(3,21,57,.62),0 0 90px rgba(19,158,232,.19);
  transform:translate(-50%,-50%);
}

.solution-reference-wheel::before {
  position:absolute;
  inset:15%;
  border:4px solid var(--reference-navy);
  border-radius:50%;
  background:radial-gradient(circle at 43% 35%,#159fe7,#0b5d9f 72%,#061a40 100%);
  box-shadow:0 0 0 1px rgba(153,221,255,.35),inset 0 0 40px rgba(0,27,79,.72);
  content:"";
}

.solution-reference-wheel::after {
  position:absolute;
  inset:7%;
  border:1px dashed rgba(205,230,255,.5);
  border-radius:50%;
  content:"";
}

.solution-reference-orbit {
  position:absolute;
  z-index:2;
  top:57%;
  left:54%;
  aspect-ratio:1;
  border:1px dashed rgba(183,220,255,.35);
  border-radius:50%;
  pointer-events:none;
  transform:translate(-50%,-50%);
}

.solution-reference-orbit--outer { width:min(86%,940px); }
.solution-reference-orbit--inner { width:min(50%,540px); border-color:rgba(255,255,255,.28); }

.solution-reference-core {
  position:absolute;
  z-index:6;
  top:57%;
  left:54%;
  display:flex;
  width:clamp(190px,25vw,310px);
  aspect-ratio:1;
  padding:32px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.5);
  border-radius:50%;
  background:radial-gradient(circle at 42% 28%,rgba(31,174,238,.9),rgba(8,94,162,.98) 67%,#062452 100%);
  box-shadow:0 0 0 12px rgba(5,27,66,.8),0 0 0 13px rgba(159,216,255,.3),0 18px 60px rgba(0,0,0,.38);
  text-align:center;
  transform:translate(-50%,-50%);
}

.solution-reference-core > span {
  position:relative;
  z-index:1;
  color:#e9f4ff;
  font-family:var(--mono);
  font-size:9px;
  font-weight:700;
  letter-spacing:.17em;
}

.solution-reference-core img {
  position:relative;
  z-index:1;
  display:block;
  width:min(100%,180px);
  height:66px;
  margin:10px 0 6px;
  object-fit:contain;
}

.solution-reference-core small {
  position:relative;
  z-index:1;
  color:#f0f7ff;
  font-family:var(--mono);
  font-size:9px;
  font-weight:700;
  letter-spacing:.1em;
  line-height:1.35;
}

.solution-reference-core small em {
  color:#cfeaff;
  font-style:normal;
}

.solution-panel {
  --panel-blue:#159fe7;
  position:absolute;
  z-index:4;
  display:block;
  overflow:hidden;
  width:47%;
  height:290px;
  color:#fff;
  text-decoration:none;
  transition:filter .3s ease,transform .3s ease;
}

.solution-panel::after {
  position:absolute;
  right:10%;
  bottom:16%;
  color:rgba(255,255,255,.9);
  content:"↗";
  font-size:26px;
  font-weight:300;
}

.solution-panel:hover,
.solution-panel:focus-visible {
  filter:brightness(1.12) saturate(1.08);
  transform:translateY(-6px);
}

.solution-panel-body {
  position:absolute;
  inset:34px 42px 30px;
}

.solution-panel-kicker {
  display:block;
  color:rgba(246,250,255,.82);
  font-family:var(--mono);
  font-size:10px;
  font-weight:700;
  letter-spacing:.14em;
}

.solution-panel-logo {
  display:grid;
  width:min(100%,270px);
  height:70px;
  margin:15px 0 16px;
  padding:8px 16px;
  place-items:center;
  background:#f5f6f3;
}

.solution-panel-logo img {
  display:block;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  object-fit:contain;
}

.solution-panel strong {
  display:block;
  max-width:270px;
  color:#fff;
  font-size:clamp(20px,2vw,29px);
  font-weight:600;
  letter-spacing:-.045em;
  line-height:.98;
}

.solution-panel p {
  max-width:260px;
  margin:9px 0 0;
  color:rgba(242,249,255,.82);
  font-size:13px;
  line-height:1.32;
}

.solution-panel--roboteazy {
  top:0;
  right:0;
  background:linear-gradient(135deg,#159fe7,#0c78bd);
  clip-path:polygon(0 0,83% 0,100% 21%,95% 100%,12% 91%,0 71%);
}

.solution-panel--robot-forge {
  top:185px;
  left:0;
  background:linear-gradient(135deg,#0b5ca5,#08427f);
  clip-path:polygon(0 9%,86% 0,100% 90%,8% 100%);
}

.solution-panel--kappabot {
  bottom:0;
  left:2%;
  background:linear-gradient(135deg,#167dc7,#105b9e);
  clip-path:polygon(6% 0,91% 5%,100% 85%,8% 100%,0 73%);
}

.solution-panel--ninefleet {
  right:0;
  bottom:0;
  background:linear-gradient(135deg,#6a55e7,#4d37bf);
  clip-path:polygon(13% 0,100% 8%,93% 100%,0 84%);
}

@media (max-width:980px) {
  .solution-constellation {
    min-height:1240px;
    padding:82px 22px 100px;
  }

  .solution-reference-heading h2 {
    font-size:clamp(48px,9.5vw,80px);
  }

  .solution-reference-heading > span {
    max-width:360px;
    font-size:16px;
  }

  .solution-reference-empty {
    top:calc(100% + 28px);
    width:72%;
    height:88px;
  }

  .solution-reference-canvas {
    height:1020px;
    margin-top:94px;
  }

  .solution-reference-wheel {
    top:51%;
    left:50%;
    width:104%;
  }

  .solution-reference-orbit {
    top:51%;
    left:50%;
  }

  .solution-reference-orbit--outer { width:119%; }
  .solution-reference-orbit--inner { width:71%; }

  .solution-reference-core {
    top:51%;
    left:50%;
    width:210px;
  }

  .solution-panel {
    width:76%;
    height:218px;
  }

  .solution-panel-body {
    inset:25px 30px 23px;
  }

  .solution-panel-logo {
    width:min(100%,220px);
    height:57px;
    margin:11px 0 11px;
  }

  .solution-panel strong { font-size:20px; }
  .solution-panel p { font-size:11px; }

  .solution-panel--roboteazy { top:0; right:0; }
  .solution-panel--robot-forge { top:185px; left:0; }
  .solution-panel--kappabot { bottom:184px; left:0; }
  .solution-panel--ninefleet { right:0; bottom:0; }
}

@media (max-width:560px) {
  .solution-constellation {
    min-height:1250px;
    padding:74px 17px 94px;
  }

  .solution-reference-heading h2 {
    margin-top:18px;
    font-size:clamp(44px,12.4vw,62px);
  }

  .solution-reference-heading > span { font-size:15px; }

  .solution-reference-canvas {
    height:1030px;
    margin-top:92px;
  }

  .solution-reference-wheel { width:122%; }
  .solution-reference-core { width:174px; padding:21px; }
  .solution-reference-core img { height:48px; margin:7px 0 4px; }
  .solution-reference-core > span { font-size:7px; }
  .solution-reference-core small { font-size:7px; }

  .solution-panel {
    width:88%;
    height:202px;
  }

  .solution-panel-body { inset:22px 24px 20px; }
  .solution-panel-kicker { font-size:8px; }
  .solution-panel-logo { height:52px; margin:10px 0; padding:6px 12px; }
  .solution-panel strong { font-size:18px; }
  .solution-panel p { margin-top:6px; font-size:10px; }
  .solution-panel::after { right:9%; bottom:13%; font-size:20px; }

  .solution-panel--roboteazy { top:0; right:0; }
  .solution-panel--robot-forge { top:190px; left:0; }
  .solution-panel--kappabot { bottom:190px; left:0; }
  .solution-panel--ninefleet { right:0; bottom:0; }
}

@media (prefers-reduced-motion:reduce) {
  .solution-panel { transition:none; }
}

/* ---------- 15. Ecossistema Acta — composição da referência PDF -------- */

.acta-ecosystem--reference {
  --acta-reference-bg:#0c0c0c;
  --acta-reference-orange:#f98200;
  --acta-reference-petal:#1a1c20; /* Cor Carbono Fosco (Stealth) */
  position:relative;
  min-height:min(100svh,960px);
  padding:clamp(88px,7vw,120px) max(24px,5vw) clamp(80px,8vw,120px);
  overflow:hidden;
  background: linear-gradient(180deg, var(--acta-reference-bg) 0%, var(--acta-reference-bg) 85%, #0b0d11 100%);
  color:#f5f5f3;
}

.acta-ecosystem--reference::before { display:none; }

.acta-reference__shell {
  display:flex;
  width:min(100%,1760px);
  height:100%;
  margin:0 auto;
  align-items:center;
}

.acta-reference__grid {
  display:grid;
  width:100%;
  min-height:100%;
  align-items:center;
  gap:clamp(32px,4vw,88px);
  grid-template-columns:minmax(0,1.06fr) minmax(430px,.94fr);
}

.acta-reference__copy {
  max-width:800px;
  align-self:center;
}

.acta-reference__copy .eyebrow {
  color:#f1f1ef;
  font-family:var(--sans);
  font-size:clamp(11px,.82vw,15px);
  font-weight:500;
  letter-spacing:.01em;
}

.acta-reference__copy h2 {
  margin:clamp(36px,4vw,64px) 0 0;
  color:#f5f5f3;
  font-family:var(--sans);
  font-size:clamp(48px,5.25vw,100px);
  font-weight:800;
  letter-spacing:-.075em;
  line-height:.91;
}

.acta-reference__line { display:block; }
.acta-reference__line--orange { color:var(--acta-reference-orange); }

.acta-reference__tagline {
  margin:clamp(24px,3vw,40px) 0 0;
  color:#f2f2f0;
  font-family:var(--sans);
  font-size:clamp(18px,1.9vw,30px);
  font-weight:400;
  letter-spacing:-.03em;
  line-height:1.2;
}

.acta-reference__description {
  max-width:760px;
  margin:clamp(20px,2vw,28px) 0 0;
  color:#b0b2b8;
  font-family:var(--sans);
  font-size:clamp(15px,1.2vw,20px);
  font-weight:400;
  letter-spacing:-.01em;
  line-height:1.55;
}

.acta-reference__visual {
  display:grid;
  min-width:0;
  place-items:center;
}

.acta-petal-wheel {
  position:relative;
  width:min(100%,760px);
  aspect-ratio:1;
}

.acta-petal-wheel__svg {
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
  filter:drop-shadow(0 22px 42px rgba(0,0,0,.22));
}

.acta-petal-wheel__petal {
  opacity:1;
  transform-box:view-box;
  transform-origin:50% 50%;
}

/* Colocamos z-index no wrapper principal no hover para ele ir para a frente (SVG2) */
.acta-petal-wheel__petal:hover {
  z-index: 10;
}

.petal-hover-layer {
  fill:var(--acta-reference-petal);
  paint-order:stroke fill;
  stroke:var(--acta-reference-bg);
  stroke-width:20;
  stroke-linejoin:round;
  transform-origin:50% 50%;
  transition: fill 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), stroke 0.3s ease;
  cursor: pointer;
}

.has-motion .acta-petal-wheel__petal {
  opacity:0;
  transform:scale(.08);
}

.has-motion .acta-reference__visual.is-visible .acta-petal-wheel__petal {
  animation:acta-petal-open .92s var(--petal-delay) cubic-bezier(.16,1,.3,1) both;
}

.petal-hover-layer:hover,
.petal-hover-layer.is-cloned { 
  fill: #2c3038; /* Fica um pouco mais claro */
  transform: scale(1.08); /* Aumentado de 1.04 para 1.08 para mais destaque */
  stroke: transparent; /* Remove a borda preta do hover para não cruzar o desenho */
}

.petal-desc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  height: 100%;
  color: #ffffff;
  pointer-events: none;
}

.petal-desc h4 {
  font-family: var(--sans);
  font-size: 1.65rem; /* Aumentado de 1.25rem */
  font-weight: 800; /* Peso extra */
  color: var(--acta-reference-orange); /* Laranja Acta para destacar brutalmente do texto */
  letter-spacing: -0.02em;
  margin: 0 0 6px 0;
}

.petal-desc p {
  font-family: var(--sans);
  font-size: 0.95rem; /* Diminuído de 1.15rem para um visual mais equilibrado */
  line-height: 1.35;
  margin: 0;
  color: #b0b2b8; /* Cinza mais contido para dar contraste e evidenciar o título */
}

.acta-petal-wheel__guides {
  opacity:1;
  pointer-events:none;
}

.has-motion .acta-petal-wheel__guides { opacity:0; }

.has-motion .acta-reference__visual.is-visible .acta-petal-wheel__guides {
  animation:acta-petal-guides-in .55s .56s ease both;
}

.acta-petal-wheel__guide-ring,
.acta-petal-wheel__spoke {
  fill:none;
  stroke:#2FD4C4; /* Alterado do azul padrão para o turquesa específico */
  stroke-width:1.5;
  stroke-dasharray:4 8;
  stroke-dashoffset:0;
}

.acta-petal-wheel__spoke {
  opacity:.92;
  transform-origin:center;
}

.has-motion .acta-petal-wheel__spoke {
  opacity:0;
  stroke-dashoffset:26;
}

.has-motion .acta-reference__visual.is-visible .acta-petal-wheel__spoke {
  animation:
    acta-trace-in .72s var(--trace-delay) cubic-bezier(.16,1,.3,1) both,
    acta-trace-flow 2.8s calc(.72s + var(--trace-delay)) linear infinite;
}

.acta-petal-wheel__core {
  fill:var(--acta-reference-bg);
  stroke:var(--acta-reference-bg);
  stroke-width:10;
}

.acta-petal-wheel__hub {
  position:absolute;
  top:50%;
  left:50%;
  display:grid;
  width:29%;
  min-width:136px;
  max-width:214px;
  aspect-ratio:1;
  place-items:center;
  border:1px solid rgba(249,130,0,.58);
  border-radius:50%;
  background:var(--acta-reference-bg);
  box-shadow:0 0 0 1px rgba(255,255,255,.025),0 0 32px rgba(0,0,0,.2);
  opacity:1;
  transform:translate(-50%,-50%);
}

.has-motion .acta-petal-wheel__hub {
  opacity:0;
  transform:translate(-50%,-50%) scale(.08);
}

.has-motion .acta-reference__visual.is-visible .acta-petal-wheel__hub {
  animation:acta-core-open .72s .04s cubic-bezier(.16,1,.3,1) both;
}

.acta-petal-wheel__hub img {
  display:block;
  width:82%;
  height:auto;
  object-fit:contain;
}

@keyframes acta-core-open {
  0% { opacity:0; transform:translate(-50%,-50%) scale(.08); }
  68% { opacity:1; transform:translate(-50%,-50%) scale(1.08); }
  100% { opacity:1; transform:translate(-50%,-50%) scale(1); }
}

@keyframes acta-petal-open {
  0% { 
    opacity: 0; 
    transform: scale(0.2) rotate(-15deg); 
  }
  60% { 
    opacity: 1; 
    transform: scale(1.03) rotate(2deg); 
  }
  100% { 
    opacity: 1; 
    transform: scale(1) rotate(0deg); 
  }
}

@keyframes acta-petal-guides-in {
  from { opacity:0; }
  to { opacity:1; }
}

@keyframes acta-trace-in {
  0% { opacity:0; stroke-dashoffset:26; }
  100% { opacity:.92; stroke-dashoffset:0; }
}

@keyframes acta-trace-flow {
  from { stroke-dashoffset:0; }
  to { stroke-dashoffset:-12; }
}

@media (max-width:1120px) {
  .acta-ecosystem--reference { min-height:0; }

  .acta-reference__grid {
    grid-template-columns:minmax(0,1fr) minmax(360px,.88fr);
  }

  .acta-reference__copy h2 { font-size:clamp(46px,5.6vw,78px); }
  .acta-reference__tagline { font-size:clamp(19px,2.35vw,30px); }
}

@media (max-width:900px) {
  .acta-ecosystem--reference {
    padding:86px 22px 98px;
  }

  .acta-reference__shell { display:block; }

  .acta-reference__grid {
    display:block;
    min-height:0;
  }

  .acta-reference__copy { max-width:760px; }
  .acta-reference__copy h2 { font-size:clamp(48px,8.5vw,82px); }
  .acta-reference__tagline { margin-top:44px; font-size:clamp(20px,3vw,30px); }
  .acta-reference__description { margin-top:36px; font-size:16px; }

  .acta-reference__visual {
    width:min(100%,720px);
    margin:60px auto 0;
  }
}

@media (max-width:560px) {
  .acta-ecosystem--reference { padding:76px 17px 84px; }

  .acta-reference__copy h2 {
    margin-top:28px;
    font-size:clamp(43px,12.1vw,62px);
    line-height:.94;
  }

  .acta-reference__tagline {
    margin-top:38px;
    font-size:21px;
  }

  .acta-reference__description {
    margin-top:30px;
    font-size:14px;
    line-height:1.45;
  }

  .acta-reference__visual { margin-top:46px; }
  .acta-petal-wheel { width:108%; }
  .acta-petal-wheel__hub { min-width:108px; }
}

@media (prefers-reduced-motion:reduce) {
  .acta-petal-wheel__petal,
  .acta-petal-wheel__guides,
  .acta-petal-wheel__hub,
  .acta-petal-wheel__spoke {
    animation:none!important;
    opacity:1!important;
    transform:none!important;
    stroke-dashoffset:0!important;
  }

  .acta-petal-wheel__hub { transform:translate(-50%,-50%)!important; }
}