/* =========================================================
   Hero motion FINAL (última camada)
   Personalidade: Premium + energia laranja Revel
   Easing assinatura: cubic-bezier(.22, 1, .36, 1)
   ========================================================= */

/* ---- Chips: decorativos, sem hover ---- */
html body .hero-chip-marquee,
html body .hero-chip-marquee *{
  pointer-events:none!important;
  user-select:none!important;
}
html body .hero-chip,
html body .hero-chip:hover,
html body .hero-chip:active{
  transform:none!important;
  transition:none!important;
  box-shadow:none!important;
  cursor:default!important;
}

/* ---- CTAs hero (feedback 150–350ms) ---- */
html body .hero-clean__btn{
  transition:
    transform .32s cubic-bezier(.22,1,.36,1),
    box-shadow .32s cubic-bezier(.22,1,.36,1),
    border-color .22s ease,
    background .22s ease,
    color .22s ease!important;
}
html body .hero-clean__btn:hover{
  transform:translateY(-3px) scale(1.02)!important;
  box-shadow:
    0 10px 24px rgba(0,0,0,.14),
    0 0 0 1px rgba(255,106,0,.2)!important;
}
html body .hero-clean__btn:active{
  transform:translateY(0) scale(.985)!important;
  transition-duration:.12s!important;
}
html body .hero-clean__btn--secondary:hover{
  border-color:#ff6a00!important;
  box-shadow:
    0 10px 24px rgba(255,106,0,.16),
    0 0 0 1px rgba(255,106,0,.28)!important;
}

/* =========================================================
   PILL WhatsApp — contorno premium (luz fina no stroke)
   Preferida: highlight percorre o contorno (SaaS / fintech)
   Sem pulse, sem sheen na superfície, sem neon
   ========================================================= */
html body .hero-clean__cta-block{
  overflow:visible!important;
}

html body a.hero-clean__cta-note,
html body .hero-clean__cta-note{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin:22px auto 0!important;
  padding:11px 22px!important;
  /* UMA borda só (CSS). SVG base fica transparente — evita borda dupla no zoom */
  border:1px solid rgba(255,106,0,.28)!important;
  border-radius:999px!important;
  background:#fffefb!important;
  overflow:visible!important;
  isolation:isolate!important;
  z-index:2!important;
  text-decoration:none!important;
  cursor:pointer!important;
  max-width:min(100%,640px)!important;
  width:max-content!important;
  box-shadow:
    0 1px 2px rgba(17,17,17,.04),
    0 4px 14px rgba(255,106,0,.06);
  transition:
    transform .32s cubic-bezier(.22,1,.36,1),
    box-shadow .32s ease,
    border-color .25s ease;
  animation:none!important;
}
html body a.hero-clean__cta-note:hover{
  transform:translateY(-1.5px);
  border-color:rgba(255,106,0,.42)!important;
  box-shadow:
    0 2px 6px rgba(17,17,17,.05),
    0 8px 20px rgba(255,106,0,.1);
}
html body a.hero-clean__cta-note:active{
  transform:translateY(0);
  transition-duration:.12s;
}
html body a.hero-clean__cta-note:focus-visible{
  outline:2px solid rgba(255,106,0,.55)!important;
  outline-offset:3px!important;
}

/* SVG contorno — centrado no pill, overflow visible */
html body .hero-clean__cta-edge{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  overflow:visible!important;
  z-index:1!important;
  pointer-events:none!important;
  display:block!important;
}
/* contorno base: INVISÍVEL — borda CSS já desenha o anel
   (stroke + border = borda duplicada no zoom) */
html body .hero-clean__cta-edge-base{
  fill:none!important;
  stroke:transparent!important;
  stroke-width:0!important;
  stroke-opacity:0!important;
  opacity:0!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  vector-effect:non-scaling-stroke;
  pointer-events:none!important;
}
/* trecho de luz: fino, head suave, rastro curto */
html body .hero-clean__cta-edge-run{
  fill:none!important;
  stroke:#ff9a4a!important;
  stroke-width:1.35!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  /* pathLength=100 → ~12% brilho, resto vazio */
  stroke-dasharray:12 88!important;
  stroke-dashoffset:0;
  opacity:.82!important;
  vector-effect:non-scaling-stroke;
  /* fallback se JS falhar */
  animation:heroPillEdgeRun 3.6s linear infinite;
}

html body .hero-clean__cta-note-txt{
  position:relative!important;
  z-index:2!important;
  display:inline!important;
  line-height:1.4!important;
  text-align:center!important;
  white-space:nowrap!important;
  font-size:13px!important;
  letter-spacing:-.01em!important;
}
html body .hero-clean__cta-note strong{
  color:#ff6a00!important;
  font-weight:650!important;
}
html body .hero-clean__cta-note-rest{
  color:#2a2722!important;
  font-weight:500!important;
}

/* leftovers de abordagens antigas */
html body .hero-clean__cta-sheen,
html body .hero-clean__cta-note-ring,
html body .hero-clean__cta-spin,
html body .hero-clean__cta-ring-svg{
  display:none!important;
}

@keyframes heroPillEdgeRun{
  to{stroke-dashoffset:-100}
}

/* Variante sutil (caso data-pill-edge="subtle") */
html body a.hero-clean__cta-note[data-pill-edge="subtle"] .hero-clean__cta-edge-run{
  stroke:#ffb06a!important;
  stroke-width:1.1!important;
  stroke-dasharray:8 92!important;
  opacity:.55!important;
  filter:none!important;
  animation-duration:4.2s;
}
/* Variante um pouco mais presente (aplicada: premium) */
html body a.hero-clean__cta-note[data-pill-edge="premium"] .hero-clean__cta-edge-run{
  stroke:#ff8f3a!important;
  stroke-width:1.4!important;
  stroke-dasharray:13 87!important;
  opacity:.88!important;
  animation-duration:3.4s;
}

@media (max-width:640px){
  html body a.hero-clean__cta-note,
  html body .hero-clean__cta-note{
    width:100%!important;
    max-width:100%!important;
    padding:11px 16px!important;
  }
  html body .hero-clean__cta-note-txt{
    white-space:normal!important;
  }
}

@media (prefers-reduced-motion:reduce){
  html body .hero-clean__cta-edge-run{
    animation:none!important;
    stroke-dasharray:100 0!important;
    opacity:.35!important;
  }
}

/* =========================================================
   FAIXA PRETA — altura fixa (sem gap) + ciclo slogan via JS
   IMPORTANTE: NÃO usar opacity/transform !important no slogan
   (matava a WAAPI do hero-trusted-cycle.js)
   ========================================================= */
html body .hero-trusted{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  height:64px!important;
  min-height:64px!important;
  max-height:64px!important;
  margin:0!important;
  padding:0!important;
  /* profundidade sutil — não flat #111 */
  background:
    linear-gradient(180deg,rgba(255,255,255,.04) 0%,transparent 40%),
    #0e0e0e!important;
  border-top:1px solid rgba(255,255,255,.07)!important;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.35)!important;
  overflow:hidden!important;
  position:relative!important;
  box-sizing:border-box!important;
  pointer-events:none!important;
  user-select:none!important;
}
/* brilho laranja bem suave no topo da faixa (ambient) */
html body .hero-trusted::before{
  content:""!important;
  position:absolute!important;
  left:10%!important;
  right:10%!important;
  top:0!important;
  height:1px!important;
  background:linear-gradient(90deg,transparent,rgba(255,106,0,.28),transparent)!important;
  z-index:4!important;
  pointer-events:none!important;
  opacity:.7!important;
  animation:heroTrustedLine 4.5s ease-in-out infinite!important;
}
html body .hero-trusted__label{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
html body .hero-trusted__stage{
  position:relative!important;
  width:100%!important;
  height:64px!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}

/* Marquee + slogan: camadas absolutas (layout estável) */
html body .hero-trusted__marquee,
html body .hero-trusted__slogan{
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:0!important;
  bottom:0!important;
  width:100%!important;
  height:64px!important;
  margin:0!important;
  padding:0!important;
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  overflow:hidden!important;
}

/*
  JS (WAAPI) controla opacity/transform — NÃO usar opacity !important
  no base (isso matava a animação e gerava sobreposição).
*/
html body .hero-trusted__slogan{
  z-index:3!important;
  justify-content:center!important;
  flex-wrap:nowrap!important;
  gap:.35em!important;
  white-space:nowrap!important;
  padding:0 16px!important;
  opacity:0;
  visibility:hidden;
  transform:translate3d(0,10px,0);
  will-change:opacity,transform,filter;
  pointer-events:none!important;
}

html body .hero-trusted__marquee{
  z-index:1!important;
  justify-content:flex-start!important;
  -webkit-mask-image:linear-gradient(
    90deg,
    transparent 0%,
    #000 10%,
    #000 90%,
    transparent 100%
  )!important;
  mask-image:linear-gradient(
    90deg,
    transparent 0%,
    #000 10%,
    #000 90%,
    transparent 100%
  )!important;
  opacity:0;
  visibility:hidden;
  transform:translate3d(0,8px,0);
  will-change:opacity,transform;
  pointer-events:none!important;
}

/* exclusão mútua por fase (reforço se WAAPI atrasar) */
html body .hero-trusted.is-phase-slogan .hero-trusted__slogan{
  z-index:3!important;
}
html body .hero-trusted.is-phase-slogan .hero-trusted__marquee{
  z-index:1!important;
  pointer-events:none!important;
}
html body .hero-trusted.is-phase-keywords .hero-trusted__marquee{
  z-index:3!important;
}
html body .hero-trusted.is-phase-keywords .hero-trusted__slogan{
  z-index:1!important;
  pointer-events:none!important;
}

html body .hero-trusted__track{
  display:flex!important;
  align-items:center!important;
  width:max-content!important;
  will-change:transform;
}

html body .hero-trusted__group{
  display:flex!important;
  align-items:center!important;
  gap:clamp(1.1rem,2.4vw,1.75rem)!important;
  padding-inline-end:clamp(1.1rem,2.4vw,1.75rem)!important;
  flex:0 0 auto!important;
}

/* fallback se JS falhar: keywords legíveis */
html body .hero-trusted:not([data-cycle-running]) .hero-trusted__marquee{
  opacity:1;
  visibility:visible;
  transform:none;
}
html body .hero-trusted:not([data-cycle-running]) .hero-trusted__slogan{
  opacity:0;
  visibility:hidden;
}
html body .hero-trusted__slogan-line{
  color:rgba(255,255,255,.94)!important;
  font-size:clamp(.95rem,1.6vw,1.1rem)!important;
  font-weight:650!important;
  letter-spacing:-.03em!important;
  white-space:nowrap!important;
}
html body .hero-trusted__slogan-accent{
  color:#ff6a00!important;
  font-family:"Libre Bodoni",Georgia,serif!important;
  font-style:italic!important;
  font-weight:500!important;
  font-size:clamp(1rem,1.7vw,1.15rem)!important;
  white-space:nowrap!important;
  will-change:opacity,transform;
}

/* keywords — um pouco mais legíveis e premium */
html body .hero-trusted__item{
  color:rgba(255,255,255,.78)!important;
  font-size:.7rem!important;
  font-weight:700!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
  line-height:1!important;
  text-shadow:0 1px 0 rgba(0,0,0,.35)!important;
}

/* dots reais com glow suave (secondary ambient) */
html body .hero-trusted__sep{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:.42rem!important;
  height:.42rem!important;
  flex:0 0 auto!important;
  color:transparent!important;
  font-size:0!important;
  line-height:0!important;
  position:relative!important;
}
html body .hero-trusted__sep::before{
  content:""!important;
  display:block!important;
  width:5px!important;
  height:5px!important;
  border-radius:50%!important;
  background:#ff6a00!important;
  box-shadow:0 0 0 1px rgba(255,106,0,.2),0 0 10px rgba(255,106,0,.45)!important;
  opacity:.85!important;
  animation:heroTrustedDot 2.8s ease-in-out infinite!important;
}
/* stagger leve nos dots (ritmo, não caos) */
html body .hero-trusted__group > .hero-trusted__sep:nth-child(2)::before{animation-delay:0s!important}
html body .hero-trusted__group > .hero-trusted__sep:nth-child(4)::before{animation-delay:.35s!important}
html body .hero-trusted__group > .hero-trusted__sep:nth-child(6)::before{animation-delay:.7s!important}
html body .hero-trusted__group > .hero-trusted__sep:nth-child(8)::before{animation-delay:1.05s!important}
html body .hero-trusted__group > .hero-trusted__sep:nth-child(10)::before{animation-delay:1.4s!important}
html body .hero-trusted__group > .hero-trusted__sep:nth-child(12)::before{animation-delay:1.75s!important}

@keyframes heroTrustedDot{
  0%,100%{
    opacity:.55;
    transform:scale(.9);
    box-shadow:0 0 0 1px rgba(255,106,0,.12),0 0 6px rgba(255,106,0,.25);
  }
  50%{
    opacity:1;
    transform:scale(1);
    box-shadow:0 0 0 1px rgba(255,106,0,.28),0 0 12px rgba(255,106,0,.55);
  }
}
@keyframes heroTrustedLine{
  0%,100%{opacity:.35}
  50%{opacity:.85}
}

/* Dots / linha ambient — WAAPI do ciclo não depende de CSS transition */
@media (prefers-reduced-motion:reduce){
  html body .hero-trusted__sep::before{
    animation:heroTrustedDot 2.8s ease-in-out infinite!important;
    animation-duration:2.8s!important;
    animation-iteration-count:infinite!important;
    opacity:.8!important;
  }
  html body .hero-trusted::before{
    animation:heroTrustedLine 4.5s ease-in-out infinite!important;
    animation-duration:4.5s!important;
    animation-iteration-count:infinite!important;
  }
}