:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --stagger: 90ms;
}

.js .reveal:not(.is-visible) {
  opacity: 0;
}

.reveal.is-visible {
  animation: surgir 1s var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * var(--stagger));
}

.reveal--direita.is-visible {
  animation-name: surgir-direita;
}

.js .reveal-group:not(.is-visible) > * {
  opacity: 0;
}

.reveal-group.is-visible > * {
  animation: surgir 0.9s var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * var(--stagger));
}

.header {
  animation: descer 0.9s var(--ease-out) backwards;
  transition: transform 0.55s var(--ease-out), border-color 0.3s, box-shadow 0.3s;
}

.header__progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  background: var(--verde-lima);
  transform: scaleX(var(--progresso, 0));
  transform-origin: left;
}

.header__logo img {
  transition: transform 0.5s var(--ease-out);
}

.header__logo:hover img {
  transform: scale(1.03);
}

.btn {
  transition:
    background-color 0.35s var(--ease-out),
    border-color 0.35s var(--ease-out),
    color 0.35s var(--ease-out);
}

.btn__icon {
  transition: background-color 0.35s var(--ease-out);
}

.hero__inner {
  will-change: transform, opacity;
}

.hero__line {
  overflow: hidden;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

.hero__line > span {
  display: inline-block;
  transition: transform 1.2s var(--ease-out);
}

.js .hero__line > span {
  transform: translate3d(0, 112%, 0);
}

.hero__line--destaque > span {
  transition-delay: 0.12s;
}

.js.is-loaded .hero__line > span {
  transform: none;
}

.intro {
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}

.js .intro {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
}

.js.is-loaded .intro {
  opacity: 1;
  transform: none;
}

.hero__lead.intro {
  transition-delay: 0.4s;
}

.hero__actions.intro {
  transition-delay: 0.55s;
}

.hero__pill {
  transition:
    opacity 0.8s var(--ease-out),
    transform 0.8s var(--ease-spring),
    border-color 0.4s;
  transition-delay: calc(0.75s + var(--i, 0) * 0.11s);
}

.hero__pill--result {
  --i: 4;
}

.js .hero__pill {
  opacity: 0;
  transform: translate3d(0, 12px, 0) scale(0.9);
}

.js.is-loaded .hero__pill {
  opacity: 1;
  transform: none;
}

.hero__flow .hero__pill + .hero__pill::before {
  transform-origin: left center;
  transition: transform 0.6s var(--ease-out);
  transition-delay: calc(0.8s + var(--i, 0) * 0.11s);
}

.js .hero__flow .hero__pill + .hero__pill::before {
  transform: scaleX(0);
}

.js.is-loaded .hero__flow .hero__pill + .hero__pill::before {
  transform: scaleX(1);
}

.hero__lead.is-live .hero__pill {
  animation: sinal 5s var(--ease-in-out) infinite;
  animation-delay: calc(var(--i, 0) * 0.55s);
}

.hero__lead.is-live .hero__pill--result {
  animation-name: sinal-resultado;
}

.marquee {
  animation: aparecer 1.2s var(--ease-out) 0.9s backwards;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

.marquee__group li::after {
  transition: transform 0.5s var(--ease-spring);
}

.marquee__group li:hover::after {
  transform: scale(1.8);
}

.funnel__bar {
  transition: filter 0.4s, transform 0.5s var(--ease-out);
}

.funnel__stage:hover .funnel__bar {
  transform: scale(1.025);
  filter: brightness(1.06);
}

.funnel__leak {
  transition: transform 0.5s var(--ease-out);
}

.funnel__stage:hover .funnel__leak {
  transform: translateX(6px);
}

.funnel__leak::before {
  transform-origin: left center;
}

.js .funnel:not(.is-visible) .funnel__bar,
.js .funnel:not(.is-visible) .funnel__leak {
  opacity: 0;
}

.funnel.is-visible > * {
  animation: none;
}

.funnel.is-visible .funnel__bar {
  animation: abrir-barra 0.9s var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 0.16s);
}

.funnel.is-visible .funnel__leak {
  animation: surgir-esquerda 0.8s var(--ease-out) backwards;
  animation-delay: calc(0.4s + var(--i, 0) * 0.16s);
}

.funnel.is-visible .funnel__leak::before {
  animation: desenhar-x 0.6s var(--ease-out) backwards;
  animation-delay: calc(0.3s + var(--i, 0) * 0.16s);
}

.funnel.is-visible .alert-dot {
  animation: pop 0.7s var(--ease-spring) backwards;
  animation-delay: calc(0.55s + var(--i, 0) * 0.16s);
}

.alert-dot {
  position: relative;
}

.alert-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--coral);
  opacity: 0;
}

.funnel.is-visible .alert-dot::after {
  animation: alerta 2.8s var(--ease-out) infinite;
  animation-delay: calc(1.6s + var(--i, 0) * 0.35s);
}

.statement span {
  display: inline-block;
}

.statement.is-visible span {
  animation: surgir 1s var(--ease-out) 0.25s backwards;
}

.flow.is-visible > .flow__item {
  animation-delay: calc(var(--i, 0) * 110ms);
}

.flow.is-visible > .flow__arrow {
  animation:
    surgir-esquerda 0.8s var(--ease-out) backwards,
    empurrar 2.6s var(--ease-in-out) infinite;
  animation-delay: calc(var(--i, 0) * 110ms), calc(1.4s + var(--i, 0) * 0.15s);
}

.flow__word {
  transition: color 0.4s var(--ease-out);
}

.flow__tag,
.flow__text {
  transition: transform 0.5s var(--ease-out);
}

.flow__item:hover .flow__word {
  color: var(--verde);
}

.flow__item:hover .flow__tag {
  transform: translateY(-2px);
}

.logos.is-visible > * {
  animation-name: surgir-escala;
  animation-duration: 0.8s;
  animation-delay: calc(var(--i, 0) * 45ms);
}

.logos li {
  transition: background-color 0.4s var(--ease-out);
}

.logos li:hover {
  background: #FAFDF6;
}

.steps::before {
  transform-origin: left center;
}

.js .steps:not(.is-visible)::before {
  transform: scaleX(0);
}

.steps.is-visible::before {
  transform: scaleX(1);
  transition: transform 1.4s var(--ease-in-out) 0.2s;
}

.steps.is-visible > * {
  animation-delay: calc(0.15s + var(--i, 0) * 0.28s);
}

.steps.is-visible .step__num {
  animation: pop 0.8s var(--ease-spring) backwards;
  animation-delay: calc(0.1s + var(--i, 0) * 0.28s);
}

.step__num {
  transition: transform 0.6s var(--ease-spring), background-color 0.4s, color 0.4s;
}

.step:hover .step__num {
  transform: scale(1.08);
  background: var(--verde-lima);
  color: var(--verde-escuro);
}

.qualifica__col.is-visible .checklist li {
  animation: surgir-esquerda 0.8s var(--ease-out) backwards;
  animation-delay: calc(0.2s + var(--i, 0) * 0.1s);
}

.qualifica__col.is-visible .checklist li::before {
  animation: pop 0.7s var(--ease-spring) backwards;
  animation-delay: calc(0.35s + var(--i, 0) * 0.1s);
}

.checklist li {
  transition: padding-left 0.45s var(--ease-out), color 0.3s;
}

.checklist li::before {
  transition: transform 0.6s var(--ease-spring);
}

.checklist li:hover {
  padding-left: 52px;
}

.checklist li:hover::before {
  transform: scale(1.12) rotate(-8deg);
}

.qualifica__col.is-visible .faq__item {
  animation: surgir 0.8s var(--ease-out) backwards;
  animation-delay: calc(0.2s + var(--i, 0) * 0.1s);
}

.faq__item summary {
  transition: color 0.3s, padding-left 0.45s var(--ease-out);
}

.faq__item summary:hover {
  color: var(--verde);
  padding-left: 6px;
}

.faq__item summary::before {
  transition: transform 0.5s var(--ease-spring), background-color 0.35s;
}

.faq__item summary:hover::before {
  background-color: #DDEFC6;
}

.faq__item[open] summary::before {
  background-color: var(--verde-lima);
}

.cta-final__panel {
  transition: background-position 0.3s;
}

.checkpoints li::before {
  transition: background-color 0.4s, color 0.4s, transform 0.5s var(--ease-spring);
}

.checkpoints li:hover::before {
  transform: scale(1.1);
}

.cta-final__text.is-visible .checkpoints li {
  animation: surgir 0.7s var(--ease-out) backwards;
  animation-delay: calc(0.35s + var(--i, 0) * 0.12s);
}

.cta-final__text.is-visible .checkpoints li + li::after {
  animation: desenhar-x 0.5s var(--ease-out) backwards;
  animation-delay: calc(0.45s + var(--i, 0) * 0.12s);
  transform-origin: left center;
}

.checkpoints.is-live li::before {
  animation: ponto 6s var(--ease-in-out) infinite;
  animation-delay: calc(var(--i, 0) * 0.7s);
}

.field.has-error input {
  animation: tremer 0.45s var(--ease-out);
}

.field__error:not(:empty) {
  animation: surgir 0.4s var(--ease-out);
}

.lead-form__success:not([hidden]) {
  animation: aparecer 0.6s var(--ease-out);
}

.lead-form__success:not([hidden]) .lead-form__success-icon {
  animation: pop 0.8s var(--ease-spring) 0.15s backwards;
}

.lead-form__success-icon path {
  stroke-dasharray: 24;
}

.lead-form__success:not([hidden]) .lead-form__success-icon path {
  animation: desenhar-traco 0.6s var(--ease-out) 0.45s backwards;
}

.lead-form__success:not([hidden]) h3,
.lead-form__success:not([hidden]) p {
  animation: surgir 0.7s var(--ease-out) backwards;
}

.lead-form__success:not([hidden]) h3 {
  animation-delay: 0.3s;
}

.lead-form__success:not([hidden]) p {
  animation-delay: 0.4s;
}

.footer__line {
  transform-origin: left center;
  transition: transform 1.4s var(--ease-in-out);
}

.js .footer:not(.is-visible) .footer__line {
  transform: scaleX(0);
}

.footer__giant svg {
  transition: transform 1.6s var(--ease-out) 0.2s, opacity 1.2s var(--ease-out) 0.2s;
}

.js .footer:not(.is-visible) .footer__giant svg {
  opacity: 0;
  transform: translate3d(0, 45%, 0);
}

.footer__totop svg {
  transition: transform 0.5s var(--ease-out);
}

.footer__totop:hover svg {
  animation: subir 0.75s var(--ease-out);
}

.footer__brand img {
  transition: transform 0.5s var(--ease-out);
}

.footer__brand:hover img {
  transform: scale(1.03);
}

.whatsapp-float {
  transition: opacity 0.6s var(--ease-out), transform 0.8s var(--ease-spring);
}

.js .whatsapp-float:not(.is-visible) {
  opacity: 0;
  transform: translate3d(0, 24px, 0) scale(0.6);
  pointer-events: none;
}

.whatsapp-float__icon {
  transition: background-color 0.3s;
}

.whatsapp-float:hover .whatsapp-float__icon {
  background: #1EBE5A;
}

.whatsapp-float__icon::before,
.whatsapp-float__icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25D366;
  opacity: 0;
  animation: onda 2.8s var(--ease-out) infinite;
}

.whatsapp-float__icon::after {
  animation-delay: 1.4s;
}

.whatsapp-float__icon svg {
  animation: chamar 6s var(--ease-in-out) 3s infinite;
}

.whatsapp-float__label {
  opacity: 0;
  transform: translate3d(12px, 0, 0);
  pointer-events: none;
  transition: opacity 0.45s var(--ease-out), transform 0.6s var(--ease-out);
}

.whatsapp-float.is-hint .whatsapp-float__label,
.whatsapp-float:hover .whatsapp-float__label,
.whatsapp-float:focus-visible .whatsapp-float__label {
  opacity: 1;
  transform: none;
}

@keyframes onda {
  0% {
    opacity: 0.45;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.75);
  }
}

@keyframes chamar {
  0%,
  84%,
  100% {
    transform: rotate(0) scale(1);
  }
  87% {
    transform: rotate(-14deg) scale(1.1);
  }
  90% {
    transform: rotate(12deg) scale(1.1);
  }
  93% {
    transform: rotate(-8deg) scale(1.05);
  }
  96% {
    transform: rotate(5deg);
  }
}

@keyframes surgir {
  from {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes surgir-direita {
  from {
    opacity: 0;
    transform: translate3d(40px, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes surgir-esquerda {
  from {
    opacity: 0;
    transform: translate3d(-16px, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes surgir-escala {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes aparecer {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes descer {
  from {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes abrir-barra {
  from {
    opacity: 0;
    transform: scaleX(0.6);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes desenhar-x {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes desenhar-y {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

@keyframes desenhar-traco {
  from {
    stroke-dashoffset: 24;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes pop {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes subir {
  0% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-140%);
    opacity: 0;
  }
  41% {
    transform: translateY(140%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes sinal {
  0%,
  18%,
  100% {
    border-color: var(--borda-forte);
    box-shadow: 0 0 0 0 rgba(140, 198, 60, 0);
  }
  7% {
    border-color: var(--verde-lima);
    box-shadow: 0 0 0 6px rgba(140, 198, 60, 0.18);
  }
}

@keyframes sinal-resultado {
  0%,
  22%,
  100% {
    box-shadow: 0 0 0 0 rgba(140, 198, 60, 0);
  }
  8% {
    box-shadow: 0 0 0 10px rgba(140, 198, 60, 0.25);
  }
}

@keyframes alerta {
  0% {
    opacity: 0.55;
    transform: scale(1);
  }
  70%,
  100% {
    opacity: 0;
    transform: scale(2.2);
  }
}

@keyframes empurrar {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(5px);
  }
}

@keyframes ponto {
  0%,
  16%,
  100% {
    background-color: var(--verde-escuro);
    color: var(--verde-lima);
  }
  6% {
    background-color: var(--verde-lima);
    color: var(--verde-escuro);
  }
}

@keyframes tremer {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-6px);
  }
  40% {
    transform: translateX(5px);
  }
  60% {
    transform: translateX(-3px);
  }
  80% {
    transform: translateX(2px);
  }
}

@media (max-width: 640px) {
  .steps::before {
    transform-origin: center top;
  }

  .js .steps:not(.is-visible)::before {
    transform: scaleY(0);
  }

  .steps.is-visible::before {
    transform: scaleY(1);
  }

  .checklist li:hover {
    padding-left: 46px;
  }

  .cta-final__text.is-visible .checkpoints li + li::after {
    animation-name: desenhar-y;
    transform-origin: center top;
  }
}

@media (hover: none) {
  .funnel__stage:hover .funnel__bar,
  .funnel__stage:hover .funnel__leak,
  .faq__item summary:hover {
    transform: none;
    filter: none;
    padding-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }

  .js .reveal:not(.is-visible),
  .js .reveal-group:not(.is-visible) > *,
  .js .intro,
  .js .hero__pill,
  .js .whatsapp-float:not(.is-visible),
  .js .funnel:not(.is-visible) .funnel__bar,
  .js .funnel:not(.is-visible) .funnel__leak {
    opacity: 1;
    transform: none;
  }

  .js .hero__line > span,
  .js .hero__flow .hero__pill + .hero__pill::before,
  .js .steps:not(.is-visible)::before,
  .js .footer:not(.is-visible) .footer__line,
  .js .footer:not(.is-visible) .footer__giant svg {
    opacity: 1;
    transform: none;
  }
}