/* ===========================================================
   EFEITOS — A'CASTRO LP ISO 9001
   Portados do react-bits para JS/CSS puro (sem React, sem GSAP,
   sem OGL, sem framer-motion). Referencias:
     TiltedCard      -> selo 3D que inclina com o mouse
     Particles       -> campo de particulas (GLSL -> canvas 2D)
     SplitText       -> entrada do H1 palavra a palavra
     AnimatedContent -> revelacao por scroll (GSAP -> IntersectionObserver)
     ShinyText       -> varredura de brilho no CTA
     SpotlightCard   -> brilho que segue o cursor nos itens
   =========================================================== */

/* -----------------------------------------------------------
   ESTADO INICIAL VISIVEL
   So escondemos algo se o JS estiver vivo (classe .js no <html>,
   posta por um script inline no <head>). Sem JS a pagina fica
   inteira de pe, sem nada invisivel.
   ----------------------------------------------------------- */

/* ---------- revelacao por scroll ---------- */
.js [data-reveal]{
  opacity:0;
  transition:
    opacity .85s cubic-bezier(.16,1,.3,1),
    transform .85s cubic-bezier(.16,1,.3,1),
    filter .85s cubic-bezier(.16,1,.3,1);
  will-change:opacity,transform;
}
.js [data-reveal="cima"]     { transform:translateY(38px) }
.js [data-reveal="esquerda"] { transform:translateX(-42px) }
.js [data-reveal="direita"]  { transform:translateX(42px) }
.js [data-reveal="escala"]   { transform:scale(.94) }
.js [data-reveal="desfoque"] { filter:blur(9px); transform:translateY(22px) }

.js [data-reveal].visivel{
  opacity:1;transform:none;filter:none;
}

/* grupo: o bloco em si nao se mexe, so' dispara a entrada dos filhos. Usado no carrossel
   de avaliacoes (2026-09-23): observar cada cartao nao serve, porque os que estao fora
   da faixa, de lado, nunca cruzam a tela e ficariam invisiveis ate' alguem rolar. */
.js [data-reveal="grupo"]{opacity:1;transform:none;will-change:auto}
.js .depo .prova,.js .depo .depo__nav{
  opacity:0;transform:translateY(26px);
  transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);
}
.js .depo.visivel .prova,.js .depo.visivel .depo__nav{opacity:1;transform:none}
.js .depo.visivel .prova:nth-child(2){transition-delay:.1s}
.js .depo.visivel .prova:nth-child(3){transition-delay:.2s}
.js .depo.visivel .prova:nth-child(n+4),.js .depo.visivel .depo__nav{transition-delay:.3s}

/* ---------- entrada do H1, palavra a palavra (SplitText) ---------- */
.js .h1-anim .palavra{
  display:inline-block;
  opacity:0;transform:translateY(.5em) rotate(1.5deg);
  animation:palavra-entra .82s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes palavra-entra{
  to{opacity:1;transform:translateY(0) rotate(0)}
}

/* cascata do resto do hero */
.js .hero-cascata > *{
  opacity:0;transform:translateY(22px);
  animation:sobe .8s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes sobe{to{opacity:1;transform:none}}

/* -----------------------------------------------------------
   SELO 3D  (TiltedCard)
   ----------------------------------------------------------- */
.selo3d{perspective:1000px;perspective-origin:50% 50%}
.selo3d__palco{
  position:relative;width:100%;height:100%;
  display:grid;place-items:center;
  transform-style:preserve-3d;
  transform:rotateX(0) rotateY(0) scale(1);
}
/* camadas em Z diferentes: e' o que da' profundidade de verdade,
   em vez de so inclinar uma imagem chapada */
.selo3d .selo__svg   { transform:translateZ(14px) }
.selo3d .selo__centro{ transform:translateZ(58px) }
.selo3d .selo__marca { transform:translateZ(26px) }

/* halo que acompanha o cursor */
.selo3d__brilho{
  position:absolute;inset:-6%;border-radius:50%;
  pointer-events:none;opacity:0;
  transition:opacity .35s ease;
  background:radial-gradient(
    circle 190px at var(--bx,50%) var(--by,50%),
    rgba(201,214,222,.28) 0%,
    rgba(201,214,222,.09) 34%,
    transparent 68%);
  transform:translateZ(4px);
}
.selo3d.ativo .selo3d__brilho{opacity:1}

/* sombra projetada que reage a inclinacao */
.selo3d__sombra{
  position:absolute;left:12%;right:12%;bottom:-2%;height:26px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(0,8,16,.55), transparent 70%);
  filter:blur(11px);
  transform:translateZ(-40px);
  transition:transform .3s ease,opacity .3s ease;
}

/* -----------------------------------------------------------
   VARREDURA — o scanner do hero, na dobra inteira   (2026-09-15)
   O dono gostou do scan e nao do carro. O scan agora nao olha para
   um objeto: varre a pagina. Camadas, de tras para frente:
     piso em perspectiva com luz correndo nos trilhos
     grade que so' aparece no rastro do feixe
     grade + brilho que seguem o cursor
     feixe descendo pela tela
     mira nos cantos e duas leituras de HUD
   Tudo que se move por quadro e' transform/opacity. O unico valor
   animado fora disso e' --varre, uma porcentagem que alimenta dois
   translateY: recalcula estilo de dois elementos, nao repinta tela.
   ----------------------------------------------------------- */
@property --varre{syntax:'<percentage>';inherits:true;initial-value:-14%}

.varre{
  position:absolute;inset:0;z-index:-1;
  pointer-events:none;overflow:hidden;
  animation:varre-desce 7s cubic-bezier(.5,0,.35,1) infinite;
}
@keyframes varre-desce{
  0%      {--varre:-14%}
  64%,100%{--varre:114%}
}
/* horizonte do piso */
.varre::before{
  content:"";position:absolute;left:8%;right:8%;top:56%;height:1px;
  background:linear-gradient(90deg, transparent, rgba(170,215,240,.5) 50%, transparent);
  box-shadow:0 0 44px 12px rgba(40,120,170,.28);
}
/* vinheta: fecha as bordas e segura o olho no centro */
.varre::after{
  content:"";position:absolute;inset:0;
  /* mais leve desde que entrou a foto: a vinheta forte apagava justo as laterais */
  background:radial-gradient(ellipse 80% 75% at 50% 50%, transparent 62%, rgba(0,10,18,.32) 100%);
}

/* ---- piso em perspectiva ----
   O plano gira a partir da borda de baixo: o topo foge para longe e
   as linhas convergem no horizonte (perspective-origin no topo). */
.varre__piso{
  position:absolute;left:0;right:0;bottom:0;height:44%;
  perspective:460px;perspective-origin:50% 0;
  -webkit-mask-image:linear-gradient(0deg, #000 25%, transparent 100%);
          mask-image:linear-gradient(0deg, #000 25%, transparent 100%);
}
.varre__plano{
  position:absolute;left:-110%;right:-110%;bottom:0;height:340%;
  transform-origin:50% 100%;transform:rotateX(78deg);
  overflow:hidden;
}
.varre__trama{
  position:absolute;left:0;right:0;top:-72px;bottom:0;
  background-image:
    linear-gradient(rgba(150,200,230,.3) 1.5px, transparent 1.5px),
    linear-gradient(90deg, rgba(150,200,230,.3) 1.5px, transparent 1.5px);
  background-size:72px 72px;background-position:center top;
  will-change:transform;
  animation:piso-anda 2.6s linear infinite;
}
@keyframes piso-anda{to{transform:translateY(72px)}}

/* luz correndo nos trilhos, vindo do horizonte na direcao de quem le.
   Cada <i> tem a altura do plano e so' o topo pintado: o translateY
   em % percorre o plano inteiro sem mexer em layout. */
.varre__plano i{
  position:absolute;top:0;height:100%;width:5px;margin-left:-2px;
  background:linear-gradient(180deg,
    transparent 0%, rgba(90,170,225,0) 4%,
    rgba(120,195,240,.7) 10%, #F4FBFF 11.6%, transparent 12%);
  filter:drop-shadow(0 0 5px rgba(130,200,245,1)) drop-shadow(0 0 16px rgba(60,150,220,.8));
  transform:translateY(-12%);
  will-change:transform;
  animation:trilho 4.2s cubic-bezier(.55,0,.9,.6) infinite;
}
.varre__plano i:nth-of-type(1){left:calc(50% - 36px - 72px*5);animation-delay:-.4s}
.varre__plano i:nth-of-type(2){left:calc(50% - 36px - 72px*3);animation-delay:-2.9s;animation-duration:3.6s}
.varre__plano i:nth-of-type(3){left:calc(50% - 36px - 72px*1);animation-delay:-1.6s}
.varre__plano i:nth-of-type(4){left:calc(50% - 36px);animation-delay:-3.4s;animation-duration:5s}
.varre__plano i:nth-of-type(5){left:calc(50% - 36px + 72px*2);animation-delay:-.9s;animation-duration:3.8s}
.varre__plano i:nth-of-type(6){left:calc(50% - 36px + 72px*4);animation-delay:-2.2s}
.varre__plano i:nth-of-type(7){left:calc(50% - 36px + 72px*6);animation-delay:-3.9s;animation-duration:4.6s}
@keyframes trilho{
  0%  {transform:translateY(-12%);opacity:0}
  10% {opacity:1}
  100%{transform:translateY(100%);opacity:1}
}

/* ---- grade revelada pelo feixe ----
   A janela desce junto com o feixe e a grade sobe na mesma medida:
   a grade fica parada na tela e so' o recorte anda. Mascara estatica
   dentro da janela = rastro que apaga, sem repintar por quadro. */
.varre__janela{
  position:absolute;left:0;right:0;top:-100%;height:100%;
  transform:translateY(var(--varre));will-change:transform;
  -webkit-mask-image:linear-gradient(180deg, transparent 72%, rgba(0,0,0,.35) 94%, #000 100%);
          mask-image:linear-gradient(180deg, transparent 72%, rgba(0,0,0,.35) 94%, #000 100%);
}
.varre__grade{
  position:absolute;inset:0;
  transform:translateY(calc(100% - var(--varre)));will-change:transform;
  background-image:
    linear-gradient(rgba(201,214,222,.42) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,214,222,.42) 1px, transparent 1px),
    linear-gradient(180deg, transparent 60%, rgba(120,185,225,.14) 100%);
  background-size:56px 56px, 56px 56px, 100% 100%;
  background-position:center top, center top, 0 0;
}

/* ---- o feixe ---- */
.varre__feixe{
  position:absolute;inset:0;
  transform:translateY(var(--varre));will-change:transform;
}
.varre__feixe::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,
    transparent 0%, rgba(201,214,222,.22) 16%,
    #EAF5FB 50%, rgba(201,214,222,.22) 84%, transparent 100%);
  box-shadow:0 0 18px 3px rgba(160,212,240,.5), 0 0 70px 14px rgba(70,145,195,.22);
}

/* ---- grade e brilho que seguem o cursor (so' com mouse) ---- */
.varre__cursor{
  position:absolute;left:0;top:0;width:560px;height:560px;
  margin:-280px 0 0 -280px;border-radius:50%;
  opacity:0;transition:opacity .5s ease;will-change:transform;
  background-image:
    linear-gradient(rgba(201,214,222,.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,214,222,.5) 1px, transparent 1px),
    radial-gradient(circle closest-side, rgba(120,185,225,.3), transparent);
  background-size:56px 56px, 56px 56px, 100% 100%;
  -webkit-mask-image:radial-gradient(circle closest-side, #000 0%, rgba(0,0,0,.4) 50%, transparent 100%);
          mask-image:radial-gradient(circle closest-side, #000 0%, rgba(0,0,0,.4) 50%, transparent 100%);
}
.hero.mirando .varre__cursor{opacity:.55}

/* ---- mira nos cantos da dobra ---- */
.varre__mira{
  position:absolute;
  left:clamp(12px,3vw,40px);right:clamp(12px,3vw,40px);
  top:calc(var(--h-topo) + clamp(12px,2vw,26px));bottom:clamp(12px,2vw,26px);
}
.varre__mira i{
  position:absolute;width:clamp(26px,3.4vw,48px);aspect-ratio:1;
  border:2px solid rgba(201,214,222,.5);
  animation:mira-pulsa 3.6s ease-in-out infinite;
}
.varre__mira i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0;border-radius:6px 0 0 0}
.varre__mira i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0;border-radius:0 6px 0 0;animation-delay:.2s}
.varre__mira i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0;border-radius:0 0 0 6px;animation-delay:.4s}
.varre__mira i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0;border-radius:0 0 6px 0;animation-delay:.6s}
@keyframes mira-pulsa{0%,100%{opacity:.45}50%{opacity:1}}

/* ---- leituras de HUD ---- */
.varre__dado{
  position:absolute;margin:0;
  top:calc(var(--h-topo) + clamp(12px,2vw,26px) + 18px);
  font-size:.64rem;font-weight:600;line-height:1.55;
  letter-spacing:.18em;text-transform:uppercase;
  color:rgba(201,214,222,.6);
}
.varre__dado b{font-weight:700;color:#E6EFF4;letter-spacing:.12em}
.varre__dado--e{left:calc(clamp(12px,3vw,40px) + 22px)}
.varre__dado--d{right:calc(clamp(12px,3vw,40px) + 22px);text-align:right}
@media (max-width:1080px){ .varre__dado{display:none} }

/* ---- pausa quando o hero sai da tela (classe posta no JS) ---- */
.hero.fora .varre,
.hero.fora .varre *,
.hero.fora .trilha *,
.hero.fora .trilha__etapas::after{animation-play-state:paused}

/* -----------------------------------------------------------
   TRILHA DA ECV — a verificacao que o scan faz, em quatro etapas
   Mesmo relogio do feixe (7s). A barra enche em ritmo linear e cada
   no acende quando ela passa por ele: 8%, 26%, 44% e 62% do ciclo.
   ----------------------------------------------------------- */
/* 5 pontos desde 2026-09-15: Processos, Documentos, Registros, Indicadores e
   Auditoria (texto do cliente). A barra enche de 8% a 62% do ciclo e passa
   pelos nos em 8, 21.5, 35, 48.5 e 62%. */
.trilha{width:100%;max-width:940px}
.trilha__etapas{
  list-style:none;margin:0;padding:0;position:relative;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
}
.trilha__etapas::before,
.trilha__etapas::after{
  content:"";position:absolute;top:17px;left:10%;right:10%;height:2px;border-radius:2px;
}
.trilha__etapas b{font-weight:700}
.trilha__etapas small{
  margin-top:-6px;font-size:.72rem;font-weight:500;letter-spacing:0;text-transform:none;
  color:rgba(255,255,255,.62);line-height:1.35;
}
@media (max-width:700px){ .trilha__etapas small{display:none} }
.trilha__etapas::before{background:rgba(201,214,222,.2)}
.trilha__etapas::after{
  background:linear-gradient(90deg, rgba(4,108,144,.95), var(--prata));
  box-shadow:0 0 12px rgba(160,212,240,.5);
  transform-origin:left center;transform:scaleX(0);
}
.trilha__etapas li{
  display:flex;flex-direction:column;align-items:center;gap:11px;
  font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.88);
}
.trilha__no{
  position:relative;z-index:1;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;
  background:#02263A;border:1.5px solid rgba(201,214,222,.4);
}
.trilha__no::before{
  content:"";position:absolute;inset:-1.5px;border-radius:50%;
  background:var(--prata-metal);
  box-shadow:0 0 0 6px rgba(201,214,222,.1), 0 0 24px rgba(160,212,240,.55);
}
.trilha__no svg{
  position:relative;width:20px;height:20px;
  fill:none;stroke:var(--azul-900);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
}
.trilha__rot{margin:18px 0 0;font-size:.84rem;font-weight:500;color:rgba(255,255,255,.74)}
.trilha__rot b{color:var(--prata);font-weight:700}

/* So' anima com JS vivo e movimento liberado. Sem isso a trilha fica
   no estado final: tudo verificado, barra cheia. */
.js .trilha__etapas::after{animation:trilha-enche 7s linear infinite}
.js .trilha__no::before,
.js .trilha__no svg{opacity:0;animation:7s linear infinite}
.js .trilha__etapas li:nth-child(1) .trilha__no::before,
.js .trilha__etapas li:nth-child(1) .trilha__no svg{animation-name:no-1}
.js .trilha__etapas li:nth-child(2) .trilha__no::before,
.js .trilha__etapas li:nth-child(2) .trilha__no svg{animation-name:no-2}
.js .trilha__etapas li:nth-child(3) .trilha__no::before,
.js .trilha__etapas li:nth-child(3) .trilha__no svg{animation-name:no-3}
.js .trilha__etapas li:nth-child(4) .trilha__no::before,
.js .trilha__etapas li:nth-child(4) .trilha__no svg{animation-name:no-4}
.js .trilha__etapas li:nth-child(5) .trilha__no::before,
.js .trilha__etapas li:nth-child(5) .trilha__no svg{animation-name:no-5}
@keyframes trilha-enche{
  0%,8%  {transform:scaleX(0);opacity:1}
  62%,88%{transform:scaleX(1);opacity:1}
  95%    {transform:scaleX(1);opacity:0}
  100%   {transform:scaleX(0);opacity:0}
}
@keyframes no-1{0%,7.5%{opacity:0;transform:scale(.6)} 10%,88%{opacity:1;transform:none} 95%,100%{opacity:0}}
@keyframes no-2{0%,21%{opacity:0;transform:scale(.6)} 23.5%,88%{opacity:1;transform:none} 95%,100%{opacity:0}}
@keyframes no-3{0%,34.5%{opacity:0;transform:scale(.6)} 37%,88%{opacity:1;transform:none} 95%,100%{opacity:0}}
@keyframes no-4{0%,48%{opacity:0;transform:scale(.6)} 50.5%,88%{opacity:1;transform:none} 95%,100%{opacity:0}}
@keyframes no-5{0%,61.5%{opacity:0;transform:scale(.6)} 64%,88%{opacity:1;transform:none} 95%,100%{opacity:0}}

@media (max-width:520px){
  /* 5 nomes em 350px: sem espacamento extra, senao "DOCUMENTOS" encosta em "REGISTROS" */
  .trilha__etapas li{font-size:.5rem;letter-spacing:0;gap:9px}
  .trilha__no{width:30px;height:30px}
  .trilha__no svg{width:16px;height:16px}
  .trilha__etapas::before,.trilha__etapas::after{top:14px}
}

@media (prefers-reduced-motion:reduce){
  .varre,.varre__trama,.varre__plano i,.varre__mira i{animation:none}
  .varre__plano i,.varre__cursor{display:none}
  .js .trilha__etapas::after{animation:none;transform:none}
  .js .trilha__no::before,.js .trilha__no svg{animation:none;opacity:1}
}

/* -----------------------------------------------------------
   BRILHO VARRENDO O CTA  (ShinyText)
   ----------------------------------------------------------- */
.btn--brilho{position:relative;overflow:hidden;isolation:isolate}
.btn--brilho::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(
    105deg,
    transparent 38%,
    rgba(255,255,255,.55) 50%,
    transparent 62%);
  transform:translateX(-120%);
  animation:varre 3.6s ease-in-out 1.4s infinite;
}
@keyframes varre{
  0%{transform:translateX(-120%)}
  38%,100%{transform:translateX(120%)}
}

/* -----------------------------------------------------------
   BRILHO NO CURSOR  (SpotlightCard) — etapas e escopo
   ----------------------------------------------------------- */
.foco{position:relative;isolation:isolate}
.foco::before{
  content:"";position:absolute;inset:0;z-index:-1;
  border-radius:14px;opacity:0;
  transition:opacity .3s ease;
  background:radial-gradient(
    circle 260px at var(--fx,50%) var(--fy,50%),
    rgba(4,108,144,.1) 0%, transparent 62%);
}
.foco:hover::before{opacity:1}

/* a bolinha da etapa cresce e o numero ganha o ambar no hover */
.etapa{transition:transform .3s cubic-bezier(.16,1,.3,1)}
.etapa:hover{transform:translateX(5px)}
.etapa__n{transition:background .3s ease,box-shadow .3s ease,transform .3s cubic-bezier(.16,1,.3,1)}
.etapa:hover .etapa__n{
  background:var(--prata);color:var(--azul-900);
  transform:scale(1.08);
  box-shadow:0 0 0 7px rgba(201,214,222,.14);
}

/* itens de escopo: o check gira de leve e a linha acende */
.escopo-item{transition:border-color .3s ease}
.escopo-item svg{transition:transform .4s cubic-bezier(.16,1,.3,1)}
.escopo-item:hover{border-bottom-color:rgba(201,214,222,.6)}
.escopo-item:hover svg{transform:scale(1.18) rotate(-8deg)}

/* colunas da comparacao: a de ISO ganha relevo no hover */
.comparo__col{transition:background .35s ease}
.comparo__col:last-child:hover{background:linear-gradient(170deg,rgba(0,72,108,.1),rgba(0,72,108,.03))}

/* -----------------------------------------------------------
   ATRACAO MAGNETICA NOS BOTOES  (Magnet)
   ----------------------------------------------------------- */
.btn[data-ima]{will-change:transform}

/* -----------------------------------------------------------
   RESPEITO A QUEM PEDIU MENOS MOVIMENTO
   ----------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1!important;transform:none!important;filter:none!important;transition:none}
  .js .depo .prova,.js .depo .depo__nav{opacity:1;transform:none;transition:none}
  .js .h1-anim .palavra,
  .js .hero-cascata > *{animation:none;opacity:1;transform:none}
  .btn--brilho::after{animation:none;display:none}
  .selo3d__palco{transform:none!important;transition:none}
  .etapa:hover,.etapa:hover .etapa__n,.escopo-item:hover svg{transform:none}
  .rodape__redes a:hover{transform:none}
  .hero__particulas{display:none}
}

/* ===========================================================
   ORBITA — o SGQ no centro, a operacao da ECV em volta.
   Mesma ideia de "energia percorrendo conectores" da referencia,
   com vocabulario proprio: nucleo e' o selo (nao um retrato),
   conectores sao ARCOS (nao raios retos), nos sao quadrados
   arredondados (nao circulos) e o rotulo nao usa pill preta.
   =========================================================== */
.orbita-secao{
  background:
    radial-gradient(80% 70% at 50% 42%, rgba(4,108,144,.34) 0%, transparent 62%),
    linear-gradient(168deg, var(--azul-900) 0%, #002338 55%, var(--azul-900) 100%);
  color:var(--branco);overflow:hidden;
}
.orbita-secao .cabeca{text-align:center;margin-inline:auto}
.orbita-secao .cabeca h2{color:var(--branco);max-width:24ch;margin-inline:auto}
.orbita-secao .cabeca p{color:rgba(255,255,255,.8);margin-inline:auto;text-align:center}

.orbita{position:relative;width:min(720px,100%);margin:clamp(18px,3vw,34px) auto 0}

/* --- sem JS ou em tela estreita: lista legivel, nada escondido --- */
.orbita__lista{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:14px;
}
.orbita__no{
  display:flex;align-items:center;gap:11px;
  padding:13px 15px;border-radius:13px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.13);
  font-size:.86rem;font-weight:600;color:rgba(255,255,255,.9);
}
.orbita__ic{
  flex:0 0 34px;width:34px;height:34px;border-radius:10px;
  display:grid;place-items:center;
  background:rgba(201,214,222,.14);color:var(--prata);
}
.orbita__nucleo{
  margin:22px auto 0;max-width:280px;text-align:center;
  padding:22px;border-radius:18px;
  background:rgba(201,214,222,.08);border:1px solid rgba(201,214,222,.3);
}

/* --- montada pelo JS: vira diagrama --- */
.orbita.montada{aspect-ratio:1;width:min(720px,100%)}
.orbita.montada .orbita__svg{
  position:absolute;inset:0;width:100%;height:100%;overflow:visible;
}
.orbita.montada .orbita__lista{
  position:absolute;inset:0;display:block;gap:0;
}
.orbita.montada .orbita__no{
  position:absolute;transform:translate(-50%,-50%);
  flex-direction:column;gap:9px;text-align:center;
  padding:0;background:none;border:0;width:104px;
  font-size:.78rem;line-height:1.3;
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.orbita.montada .orbita__ic{
  flex:none;width:52px;height:52px;border-radius:15px;
  background:rgba(0,24,36,.85);
  border:1.5px solid rgba(201,214,222,.42);
  box-shadow:0 0 0 0 rgba(201,214,222,.22);
  transition:border-color .3s ease,box-shadow .3s ease,background .3s ease;
}
.orbita.montada .orbita__no:hover{transform:translate(-50%,-50%) scale(1.07)}
.orbita.montada .orbita__no:hover .orbita__ic{
  background:rgba(201,214,222,.16);border-color:var(--prata);
  box-shadow:0 0 0 8px rgba(201,214,222,.1);
}
.orbita.montada .orbita__nucleo{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  margin:0;width:min(216px,30%);aspect-ratio:1;max-width:none;
  border-radius:50%;padding:0;
  display:grid;place-items:center;
  background:radial-gradient(circle at 50% 42%, rgba(201,214,222,.2), rgba(0,20,32,.9) 68%);
  border:2px solid rgba(201,214,222,.5);
  box-shadow:0 0 46px rgba(201,214,222,.2), inset 0 0 34px rgba(0,12,24,.6);
}
.orbita__nucleo b{
  display:block;font-size:clamp(1.2rem,2.6vw,1.7rem);font-weight:800;
  color:var(--branco);line-height:1;letter-spacing:-.03em;
}
.orbita__nucleo span{
  display:block;margin-top:7px;font-size:.72rem;font-weight:600;
  color:var(--prata);
}

/* traco dos conectores */
.orbita__arco{
  fill:none;stroke:rgba(201,214,222,.26);stroke-width:1.2;
  stroke-dasharray:var(--tam);stroke-dashoffset:var(--tam);
  animation:arco-risca 1.5s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes arco-risca{to{stroke-dashoffset:0}}

/* pulso de energia correndo pelo arco */
.orbita__pulso{fill:var(--prata);filter:drop-shadow(0 0 5px rgba(201,214,222,.9))}

/* anel de respiro atras do nucleo */
.orbita__respiro{
  fill:none;stroke:rgba(201,214,222,.16);stroke-width:1;
  transform-origin:50% 50%;
  animation:respira 4.2s ease-in-out infinite;
}
@keyframes respira{
  0%,100%{transform:scale(1);opacity:.5}
  50%    {transform:scale(1.055);opacity:.14}
}

@media (max-width:560px){
  .orbita__lista{grid-template-columns:1fr 1fr}
  .orbita__no{font-size:.8rem;padding:11px 12px}
}
@media (prefers-reduced-motion:reduce){
  .orbita__arco{animation:none;stroke-dashoffset:0}
  .orbita__pulso{display:none}
  .orbita__respiro{animation:none}
}

/* Em tela estreita a entrada lateral empurraria o conteudo para fora
   da viewport enquanto nao revela. Vira entrada vertical. */
@media (max-width:1080px){
  .js [data-reveal="esquerda"],
  .js [data-reveal="direita"]{transform:translateY(34px)}
}

/* ---------- selo 3D como nucleo da orbita ---------- */
.selo--nucleo{width:100%;height:100%;aspect-ratio:1}
.selo--nucleo .selo__marca{height:24px;margin:0 auto 8px}
.selo--nucleo .selo__norma{font-size:clamp(1.25rem,2.9vw,1.85rem);line-height:.94}
.selo--nucleo .selo__rot{font-size:.6rem;margin-top:8px;letter-spacing:.02em}
.selo--nucleo .selo__centro{padding-inline:14%}
.selo--nucleo .selo__anel{stroke-width:2}

/* o nucleo perde a borda propria: quem faz o contorno agora e' o selo */
.orbita.montada .orbita__nucleo{
  border:0;
  background:radial-gradient(circle at 50% 44%,
    rgba(201,214,222,.13) 0%, rgba(0,20,32,.9) 66%, rgba(0,16,26,.96) 100%);
  box-shadow:0 0 58px rgba(201,214,222,.13), inset 0 0 40px rgba(0,10,20,.55);
  width:min(232px,32%);
}

/* o anel so' se risca quando a secao entra na tela — nao gasta a
   animacao la' em cima, onde ninguem esta' olhando */
.orbita__nucleo .selo__anel,
.orbita__nucleo .selo__anel-int,
.orbita__nucleo .selo__marcas line{animation-play-state:paused}
.orbita__nucleo.visivel .selo__anel,
.orbita__nucleo.visivel .selo__anel-int,
.orbita__nucleo.visivel .selo__marcas line{animation-play-state:running}

/* fallback sem JS / tela estreita: selo com tamanho proprio */
.orbita:not(.montada) .orbita__nucleo{
  background:none;border:0;padding:0;max-width:none;
  display:grid;place-items:center;margin-top:26px;
}
.orbita:not(.montada) .selo--nucleo{width:min(220px,60vw);height:auto}


/* ===========================================================
   DESAFIOS E RESULTADOS GANHAM MOVIMENTO  (cliente, 15/09 16:27:
   "tem nenhuma animacao/efeito"). Tudo so' dispara quando o bloco
   entra na tela (.visivel, posto por revelar() em efeitos.js).
   =========================================================== */

/* ---- foto dos desafios: zoom de entrada + scanner com mira ---- */
.js .desafios__visual .secao__foto img{transform:scale(1.1);transition:transform 1.8s cubic-bezier(.16,1,.3,1)}
.js .desafios__visual.visivel .secao__foto img{transform:scale(1)}
.scan-foto{position:absolute;inset:0;z-index:1;pointer-events:none}
.scan-foto::before{
  content:"";position:absolute;left:0;right:0;top:0;height:28%;
  background:linear-gradient(180deg,rgba(201,214,222,0) 0%,rgba(201,214,222,.2) 88%,rgba(255,255,255,.95) 98%,rgba(255,255,255,0) 100%);
  mix-blend-mode:screen;opacity:0;transform:translateY(-100%);
}
.js .desafios__visual.visivel .scan-foto::before{animation:scan-foto 5.6s cubic-bezier(.45,0,.2,1) .7s infinite}
@keyframes scan-foto{
  0%{transform:translateY(-100%);opacity:0}
  8%{opacity:1}
  56%{transform:translateY(360%);opacity:1}
  64%,100%{transform:translateY(360%);opacity:0}
}
.scan-foto i{position:absolute;width:24px;height:24px;border:2px solid rgba(255,255,255,.9);opacity:0}
.scan-foto i:nth-child(1){top:18px;left:18px;border-right:0;border-bottom:0}
.scan-foto i:nth-child(2){top:18px;right:18px;border-left:0;border-bottom:0}
.scan-foto i:nth-child(3){bottom:18px;left:18px;border-right:0;border-top:0}
.scan-foto i:nth-child(4){bottom:18px;right:18px;border-left:0;border-top:0}
.js .desafios__visual.visivel .scan-foto i{animation:mira-entra .6s ease .5s forwards, mira-pulsa 2.8s ease-in-out 1.1s infinite}
@keyframes mira-entra{from{opacity:0;transform:scale(1.6)}to{opacity:1;transform:none}}

/* ---- cartao "ISO 9001" sobe depois da foto e fica flutuando ---- */
.js .desafios__visual .desafios__selo{opacity:0;transform:translateY(26px)}
.js .desafios__visual.visivel .desafios__selo{
  animation:selo-sobe .9s cubic-bezier(.16,1,.3,1) .45s forwards, selo-flutua 6s ease-in-out 1.4s infinite;
}
@keyframes selo-sobe{to{opacity:1;transform:none}}
@keyframes selo-flutua{0%,100%{transform:none}50%{transform:translateY(-8px)}}

/* ---- filete do destaque se desenha de cima para baixo ---- */
.js .cabeca .desafios__destaque::before{transform:scaleY(0);transform-origin:top;transition:transform .9s cubic-bezier(.16,1,.3,1) .5s}
.js .cabeca.visivel .desafios__destaque::before{transform:none}

/* ---- lista dos desafios: itens em cascata (escalonar) e bolinha reage ---- */
.desafios__lista li > span{transition:background .3s ease,color .3s ease,transform .35s cubic-bezier(.16,1,.3,1)}
.desafios__lista li:hover > span{background:var(--azul-700);color:var(--branco);transform:scale(1.08) rotate(-6deg)}

/* ---- cartao escuro: o "A" entra girando e uma luz passeia no fundo ---- */
.desafios__saida{position:relative;isolation:isolate;overflow:hidden}
.desafios__saida::before{
  content:"";position:absolute;z-index:-1;width:70%;aspect-ratio:1;left:40%;top:-30%;border-radius:50%;
  background:radial-gradient(circle,rgba(201,214,222,.16) 0%,transparent 65%);
  animation:luz-passeia 12s ease-in-out infinite alternate;
}
@keyframes luz-passeia{to{transform:translate(-45%,70%)}}
.js .desafios__corpo.visivel .desafios__simbolo{animation:simbolo-entra 1s cubic-bezier(.16,1,.3,1) .35s both}
@keyframes simbolo-entra{from{opacity:0;transform:translateY(-12px) rotate(-12deg) scale(.8)}to{opacity:1;transform:none}}

/* ---- icones se desenhando (riscar() em efeitos.js marca .risca) ---- */
.risca path,.risca circle{stroke-dasharray:1;stroke-dashoffset:1}
.risca [fill="currentColor"]{opacity:0}
li.visivel .risca path,li.visivel .risca circle{animation:risca 1.2s cubic-bezier(.65,0,.35,1) .25s forwards}
li.visivel .risca [fill="currentColor"]{animation:aparece .4s ease 1.1s forwards}
@keyframes risca{to{stroke-dashoffset:0}}
@keyframes aparece{to{opacity:1}}

/* ---- faixa azul dos resultados: grade + luz varrendo ---- */
.resultados__luz{
  position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  background-image:
    linear-gradient(rgba(201,214,222,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(201,214,222,.07) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(70% 85% at 50% 45%,#000 0%,transparent 78%);
  mask-image:radial-gradient(70% 85% at 50% 45%,#000 0%,transparent 78%);
  animation:grade-anda 20s linear infinite;
}
@keyframes grade-anda{to{background-position:56px 56px}}
.resultados__luz::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:34%;
  background:linear-gradient(90deg,transparent 0%,rgba(201,214,222,.12) 50%,transparent 100%);
  transform:translateX(-100%);animation:luz-varre 9s ease-in-out infinite;
}
@keyframes luz-varre{0%{transform:translateX(-100%)}60%,100%{transform:translateX(300%)}}
/* onda saindo do anel de cada icone */
.resultados__ic::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid rgba(201,214,222,.55);opacity:0}
.js .resultados__lista li.visivel .resultados__ic::after{animation:anel-onda 4s ease-out .8s infinite}
@keyframes anel-onda{0%{transform:scale(1);opacity:.7}60%,100%{transform:scale(1.65);opacity:0}}

@media (prefers-reduced-motion:reduce){
  .scan-foto::before,.scan-foto i,.desafios__saida::before,.desafios__simbolo,
  .resultados__luz,.resultados__luz::after,.resultados__ic::after{animation:none!important}
  .js .desafios__visual .desafios__selo{animation:none!important;opacity:1;transform:none}
  .js .desafios__visual .secao__foto img,.js .cabeca .desafios__destaque::before{transform:none;transition:none}
  .desafios__lista li:hover > span,.resultados__lista li:hover .resultados__ic{transform:none}
}

/* a mira do scanner (z-index 1 dentro da foto) aparecia por cima do cartao ISO 9001 */
.desafios__selo{z-index:2}

/* ===========================================================
   REVISAO DA RITA NO CELULAR (15/09): palavra sozinha e balao solto
   =========================================================== */
/* olhos maiores quebravam com palavra sozinha: equilibra as linhas */
.olho{text-wrap:balance}
/* textos da lista de desafios sem palavra sozinha na ultima linha. So' no celular:
   no computador as 3 linhas sao fixas pelo <br> (pedido do cliente) e o pretty quebrava em 4 */
@media (max-width:860px){ .desafios__lista p{text-wrap:pretty} }
@media (max-width:520px){
  /* todos os olhos continuam do mesmo tamanho, so' que menores no celular */
  .olho.olho{font-size:.8rem;letter-spacing:.08em}
  /* no bloco centralizado o icone ia parar na borda, longe da frase: sobe e centraliza */
  .hero .hero__nota,.resultados .hero__nota{flex-direction:column;align-items:center;gap:6px;text-align:center}
  /* botao do cartao escuro em 1 linha ("funciona" ficava sozinha) */
  .desafios__saida .btn{white-space:nowrap;font-size:.84rem;padding-inline:1.15em}
  .desafios__saida .btn .seta{display:none}
}

/* 1024px: cartao escuro estreito deixava "CONSULTORIA" sozinha; empilha antes */
@media (max-width:1100px){ .desafios__corpo{grid-template-columns:1fr} }
/* 360px: sem palavra sozinha no texto dos beneficios */
.resultados__lista li{text-wrap:balance}