@font-face {
  font-family: "Apolo Montserrat";
  src: url("../fonts/montserrat.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Apolo Comfortaa";
  src: url("../fonts/comfortaa.ttf") format("truetype");
  font-display: swap;
}

.lp-v2,
.lp-v2 button,
.lp-v2 input,
.lp-v2 select,
.lp-v2 textarea {
  font-family: "Apolo Montserrat", Arial, sans-serif;
}

.lp-v2 h1,
.lp-v2 h2,
.lp-v2 h3 {
  font-family: "Apolo Comfortaa", "Apolo Montserrat", Arial, sans-serif;
}

/* Abertura: 1,6 s, só em CSS, sobre a página já montada. O script do <head> liga "lp-intro-on" na primeira visita
   (sem ele, a abertura nem aparece) e troca para "lp-intro-skip" quando a pessoa rola, toca ou aperta uma tecla.
   Os quadros-chave só dizem de onde cada peça vem: o destino é o estilo normal dela. */
.lp-v2 .lp-intro {
  display: none;
  transition: none;
}

html.lp-intro-on .lp-v2 .lp-intro {
  display: grid;
  animation: lp-intro-lift 0.35s cubic-bezier(0.65, 0, 0.35, 1) 1.25s both;
}

html.lp-intro-skip .lp-v2 .lp-intro {
  animation: lp-intro-fade 0.2s ease-out both;
}

html.lp-intro-on .lp-v2 .lp-intro__stage {
  animation: lp-intro-out 0.26s ease-in 1.2s both;
}

html.lp-intro-on .lp-v2 .lp-intro__grid {
  animation: lp-intro-grid 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.lp-v2 .lp-intro__mark {
  width: 106px;
  height: 106px;
  margin-bottom: 22px;
}

html.lp-intro-on .lp-v2 .lp-intro__mark {
  animation: lp-intro-mark 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.06s both;
}

.lp-v2 .lp-intro__mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

html.lp-intro-on .lp-v2 .lp-intro__spark {
  animation: lp-intro-spark 0.32s cubic-bezier(0.22, 1, 0.36, 1) 0.34s both;
}

html.lp-intro-on .lp-v2 .lp-intro__spark--two {
  animation-delay: 0.44s;
}

html.lp-intro-on .lp-v2 .lp-intro__eyebrow {
  animation: lp-rise 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.28s both;
}

/* As letras entram do meio para as pontas (--lp-letter vem da página). */
html.lp-intro-on .lp-v2 .lp-intro__word span {
  animation: lp-intro-letter 0.52s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(0.34s + var(--lp-letter, 0) * 0.04s);
}

html.lp-intro-on .lp-v2 .lp-intro__line {
  animation: lp-rise 0.42s cubic-bezier(0.22, 1, 0.36, 1) 0.62s both;
}

@keyframes lp-intro-grid {
  from {
    opacity: 0;
    translate: 0 40px;
  }
}

@keyframes lp-intro-mark {
  from {
    opacity: 0;
    rotate: -18deg;
    scale: 0.45;
  }
}

@keyframes lp-intro-spark {
  from {
    opacity: 0;
    scale: 0;
  }
}

@keyframes lp-intro-letter {
  from {
    opacity: 0;
    transform: translateY(40px) rotateX(-70deg);
  }
}

@keyframes lp-intro-out {
  to {
    opacity: 0;
    scale: 0.96;
  }
}

@keyframes lp-intro-lift {
  to {
    translate: 0 -100%;
  }
}

@keyframes lp-intro-fade {
  to {
    opacity: 0;
  }
}

/* Entrada padrão da página: o bloco sobe um pouco enquanto aparece. Usa "translate" (e não "transform") para não
   desfazer a inclinação nem o encaixe que alguns blocos já têm no próprio "transform". */
@keyframes lp-rise {
  from {
    opacity: 0;
    translate: 0 14px;
  }
}

/* Primeira dobra: fica escondida só enquanto a abertura toca e entra em cascata quando o <head> liga "lp-hero-in".
   Não depende do script da página. */
html.lp-motion:not(.lp-hero-in) .lp-v2 .lp-hero__content > *,
html.lp-motion:not(.lp-hero-in) .lp-v2 .lp-product,
html.lp-motion:not(.lp-hero-in) .lp-v2 .lp-outcomes {
  opacity: 0;
}

html.lp-motion.lp-hero-in .lp-v2 .lp-hero__content > * {
  animation: lp-rise 0.52s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

html.lp-motion.lp-hero-in .lp-v2 .lp-hero__content > :nth-child(2) {
  animation-delay: 0.07s;
}

html.lp-motion.lp-hero-in .lp-v2 .lp-hero__content > :nth-child(3) {
  animation-delay: 0.14s;
}

html.lp-motion.lp-hero-in .lp-v2 .lp-hero__content > :nth-child(4) {
  animation-delay: 0.21s;
}

html.lp-motion.lp-hero-in .lp-v2 .lp-hero__content > :nth-child(n + 5) {
  animation-delay: 0.28s;
}

html.lp-motion.lp-hero-in .lp-v2 .lp-product {
  animation: lp-product-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.12s backwards;
}

html.lp-motion.lp-hero-in .lp-v2 .lp-outcomes {
  animation: lp-rise 0.52s cubic-bezier(0.22, 1, 0.36, 1) 0.36s backwards;
}

/* O painel vem da direita onde fica ao lado do texto; empilhado (até 1100px), sobe como o resto. */
@keyframes lp-product-in {
  from {
    opacity: 0;
    scale: 0.97;
    translate: var(--lp-product-from, 32px 0);
  }
}

@media (max-width: 1100px) {
  .lp-v2 .lp-product {
    --lp-product-from: 0 18px;
  }
}

/* O painel "liga": a agenda entra linha a linha e as barras crescem uma vez. Os números quem conta é o script. */
html.lp-motion.lp-hero-in .lp-v2 .lp-product__agenda > div {
  animation: lp-slide 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.55s backwards;
}

html.lp-motion.lp-hero-in .lp-v2 .lp-product__agenda > div + div {
  animation-delay: 0.69s;
}

html.lp-motion.lp-hero-in .lp-v2 .lp-product__bars i {
  transform-origin: bottom;
  animation: lp-bar 0.6s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(0.6s + var(--lp-bar, 0) * 0.06s);
}

.lp-v2 .lp-product__bars i:nth-child(2) {
  --lp-bar: 1;
}

.lp-v2 .lp-product__bars i:nth-child(3) {
  --lp-bar: 2;
}

.lp-v2 .lp-product__bars i:nth-child(4) {
  --lp-bar: 3;
}

.lp-v2 .lp-product__bars i:nth-child(5) {
  --lp-bar: 4;
}

.lp-v2 .lp-product__bars i:nth-child(6) {
  --lp-bar: 5;
}

.lp-v2 .lp-product__bars i:nth-child(7) {
  --lp-bar: 6;
}

@keyframes lp-slide {
  from {
    opacity: 0;
    translate: -14px 0;
  }
}

@keyframes lp-bar {
  from {
    scale: 1 0.2;
  }
}

/* Rolagem: cada seção entra de uma vez, com os blocos em cascata curta (--lp-delay vem do script da página, que
   marca "is-in" para animar ou "is-shown" quando a rolagem é rápida demais e o bloco só aparece). Se o script não
   chegar, o <head> liga "lp-motion-late" e nada fica escondido. */
html.lp-motion:not(.lp-motion-late) .lp-v2 [data-reveal]:not(.is-in):not(.is-shown) {
  opacity: 0;
}

html.lp-motion .lp-v2 [data-reveal].is-in {
  animation: lp-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) var(--lp-delay, 0s) backwards;
}

@media print {
  .lp-v2 .lp-intro {
    display: none !important;
  }

  .lp-v2 [data-reveal],
  .lp-v2 .lp-hero__content > *,
  .lp-v2 .lp-product,
  .lp-v2 .lp-outcomes {
    opacity: 1 !important;
    animation: none !important;
  }
}

.lp-v2 .lp-product__brand img {
  display: block;
  width: 104px;
  height: auto;
  /* filter: brightness(0) invert(1); */
}

.lp-v2 .lp-hero {
  min-height: 100vh;
  background:
    url("../images/waves.svg") center top / cover no-repeat,
    linear-gradient(180deg, #fff 0%, #f8fbfb 64%, #edf4f3 100%);
}

.lp-v2 .lp-hero__grid {
  grid-template-columns: minmax(0, 1fr) minmax(520px, 1fr);
  gap: 44px;
}

.lp-v2 .lp-hero h1 {
  font-size: clamp(43px, 3vw, 62px);
  line-height: 1.09;
  letter-spacing: -0.045em;
}

.lp-v2 .lp-hero__content > p {
  font-size: 17px;
}

.lp-v2 .lp-hero__actions {
  flex-wrap: nowrap;
}

.lp-v2 .lp-hero__actions .lp-button {
  white-space: nowrap;
}

.lp-v2 .lp-button,
.lp-v2 .lp-button--compact {
  border-radius: 999px;
}

.lp-v2 .lp-header__actions .lp-button i {
  font-size: 18px;
}

.lp-section--steps {
  padding-bottom: 150px;
  background: #eff2f7;
}

.lp-v2 #como-funciona {
  padding-top: 80px;
  padding-bottom: 110px;
  background: white;
}

.lp-v2 #plataforma {
  padding: 118px 0 40px;
  background-color: rgba(239, 242, 247, 1);
}

.lp-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 52px;
}

.lp-steps::before {
  content: "";
  position: absolute;
  top: 58px;
  right: 16%;
  left: 16%;
  height: 1px;
  background: repeating-linear-gradient(
    90deg,
    #c7d5d7 0 6px,
    transparent 6px 13px
  );
}

.lp-steps article {
  position: relative;
  z-index: 1;
  min-height: 250px;
  padding: 34px;
  background: #fff;
  border: 1px solid var(--lp-line);
  border-radius: 22px;
  box-shadow: 0 18px 45px rgba(7, 31, 39, 0.055);
}

.lp-steps article > span {
  position: absolute;
  top: 24px;
  right: 26px;
  color: #c2ced0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.lp-steps article > i {
  display: grid;
  width: 54px;
  height: 54px;
  margin-bottom: 34px;
  color: var(--lp-orange);
  background: var(--lp-orange-soft);
  border-radius: 16px;
  font-size: 25px;
  place-items: center;
}

.lp-steps h3 {
  margin: 0 0 12px;
  color: var(--lp-ink-strong);
  font:
    700 19px "Manrope",
    sans-serif;
}

.lp-steps p {
  margin: 0;
  color: var(--lp-muted);
  font-size: 14px;
  line-height: 1.7;
}

.lp-section--why {
  padding: 70px 0;
  background-color: #fff;
  background-image: url("../images/division.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
}

.lp-why {
  width: min(100%, 1050px);
  margin: 28px auto 0;
}

.lp-section--why .lp-heading h2 {
  margin: 14px 0 12px;
  font-size: clamp(30px, 3.3vw, 44px);
  line-height: 1.08;
}

.lp-section--why .lp-heading > p {
  max-width: 650px;
  font-size: 14px;
}

.lp-why__tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 6px;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 12px 30px rgba(7, 31, 39, 0.07);
}

.lp-why__tabs button {
  min-height: 44px;
  padding: 0 20px;
  color: #60747b;
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  transition:
    color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
}

.lp-why__tabs button.is-active {
  color: #fff;
  background: var(--lp-orange);
  box-shadow: 0 10px 24px rgba(255, 104, 0, 0.22);
}

/* O cartão fica parado e só o conteúdo troca. Os três painéis ocupam a mesma célula (a altura é a do maior):
   trocar de aba não muda o tamanho da página, e a entrada é uma transição de CSS. Com o painel aparecendo
   por display e animado por script, a troca travava no celular. */
.lp-why__panels {
  display: grid;
  margin-top: 18px;
  overflow: hidden;
  background: #fff;
  border-radius: 25px;
  box-shadow: 0 20px 55px rgba(7, 31, 39, 0.08);
}

.lp-why__panels article {
  display: grid;
  min-height: 278px;
  padding: 30px 42px;
  align-items: center;
  grid-area: 1 / 1;
  grid-template-columns: minmax(240px, 0.85fr) minmax(0, 1.15fr);
  gap: 44px;
  visibility: hidden;
  opacity: 0;
  transform: translateX(16px);
}

/* A transição fica só no painel ativo: quem sai some na hora, quem entra aparece deslizando. */
.lp-why__panels article.is-active {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition:
    opacity 0.36s ease-out,
    transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}

.lp-why__visual {
  position: relative;
  display: grid;
  min-height: 204px;
  overflow: hidden;
  background: #fff;
  border-radius: 22px;
  place-items: center;
}

.lp-why__visual::before,
.lp-why__visual::after {
  display: none;
}

.lp-why__visual::after {
  width: 270px;
  height: 270px;
}

.lp-why__visual > i {
  position: relative;
  z-index: 2;
  display: grid;
  width: 76px;
  height: 76px;
  color: #fff;
  background: var(--lp-orange);
  border-radius: 22px;
  box-shadow: 0 20px 35px rgba(255, 104, 0, 0.25);
  font-size: 36px;
  place-items: center;
}

.lp-why__visual > img {
  display: block;
  width: min(82%, 270px);
  max-height: 172px;
  object-fit: contain;
}

.lp-why__visual span {
  position: absolute;
  right: 24px;
  bottom: 22px;
  left: 24px;
  display: flex;
  align-items: flex-end;
  gap: 7px;
}

.lp-why__visual b {
  width: 33%;
  height: 8px;
  background: rgba(7, 31, 39, 0.1);
  border-radius: 999px;
}

.lp-why__visual b:nth-child(2) {
  height: 15px;
  background: rgba(255, 104, 0, 0.35);
}
.lp-why__visual b:nth-child(3) {
  height: 24px;
  background: rgba(255, 104, 0, 0.7);
}

.lp-why__panels small {
  color: var(--lp-orange);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.lp-why__panels h3 {
  margin: 10px 0 13px;
  color: var(--lp-ink-strong);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 700;
  line-height: 1.2;
}

.lp-why__panels p {
  margin: 0 0 17px;
  color: var(--lp-muted);
  font-size: 14px;
  line-height: 1.65;
}

.lp-why__panels strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--lp-orange);
  font-size: 14px;
}

.lp-v2 .lp-section--plans {
  background: #fff;
}

.lp-v2 .lp-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 28px;
  margin-top: 48px;
}

.lp-v2 .lp-plan-card {
  width: 100%;
  min-height: 560px;
  padding: 38px 34px 30px;
  color: var(--lp-ink-strong);
  background: #fff;
  border: 1px solid #edf0f1;
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(7, 31, 39, 0.08);
  text-align: left;
}

.lp-v2 .lp-plan-card--featured {
  color: var(--lp-ink-strong);
  background: #fff;
  border: 2px solid var(--lp-orange);
  box-shadow: 0 18px 42px rgba(255, 104, 0, 0.12);
  transform: translateY(-10px);
}

.lp-v2 .lp-plan-card__badge {
  top: 20px;
  right: -2px;
  padding: 8px 16px;
  border-radius: 999px 0 0 999px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.lp-v2 .lp-plan-card h3 {
  margin: 8px 0 12px;
  color: #707684;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}

.lp-v2 .lp-plan-card--featured h3 {
  color: var(--lp-orange);
}

.lp-v2 .lp-plan-card--avancado h3 {
  color: #d9a700;
}

.lp-plan-card__description {
  min-height: 52px;
  margin: 0 auto 15px;
  color: #7b8495;
  font-size: 13px;
  line-height: 1.55;
  text-align: center;
}

.lp-v2 .lp-plan-card__price {
  justify-content: center;
  min-height: 66px;
  padding-bottom: 22px;
  color: #080b0d;
  border-color: #edf0f1;
}

.lp-v2 .lp-plan-card--featured .lp-plan-card__price {
  border-color: #edf0f1;
}

.lp-v2 .lp-plan-card__price strong {
  font-size: 31px;
  font-weight: 500;
}

.lp-v2 .lp-plan-card ul,
.lp-v2 .lp-plan-card--featured ul {
  margin: 20px 0 28px;
  gap: 12px;
  color: #1f2529;
  font-size: 13px;
}

.lp-v2 .lp-plan-card li i {
  color: var(--lp-orange);
  font-size: 17px;
}

/* Os limites do plano (alunos e instrutores) em destaque, como na landing anterior. */
.lp-v2 .lp-plan-card li.is-limit {
  font-weight: 700;
}

.lp-v2 .lp-plan-card li.is-unavailable {
  color: #9aa5ae;
}

.lp-v2 .lp-plan-card li.is-unavailable i {
  color: #b9c2ca;
}

.lp-v2 .lp-plan-card--avancado > .lp-button {
  color: #fff;
  background: #e9b600;
  border-color: #e9b600;
}

.lp-v2 .lp-plan-card--avancado > .lp-button:hover,
.lp-v2 .lp-plan-card--avancado > .lp-button:focus-visible {
  background: #d5a700;
  border-color: #d5a700;
}

.lp-why__panels strong i {
  font-size: 21px;
}

.lp-section--faq-v2 {
  background: #fff;
}

.lp-faq--accordion {
  overflow: hidden;
  gap: 0;
  background: #fff;
  border: 1px solid var(--lp-line);
  border-radius: 20px;
  box-shadow: 0 16px 45px rgba(7, 31, 39, 0.07);
}

.lp-faq__item {
  border-bottom: 1px solid #e7eded;
}

.lp-faq__item:last-child {
  border-bottom: 0;
}

.lp-faq__item > button {
  display: flex;
  width: 100%;
  min-height: 78px;
  padding: 21px 26px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: var(--lp-ink-strong);
  background: #fff;
  border: 0;
  cursor: pointer;
  font:
    700 15px "Manrope",
    sans-serif;
  text-align: left;
  transition:
    color 0.22s ease,
    background 0.22s ease;
}

.lp-faq__item > button:hover,
.lp-faq__item.is-open > button {
  color: var(--lp-orange);
  background: #fffaf7;
}

.lp-faq__item > button i {
  font-size: 23px;
  transition: transform 0.3s ease;
}

.lp-faq__item.is-open > button i {
  transform: rotate(180deg);
}

.lp-faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  background: #fffaf7;
  transition: grid-template-rows 0.34s ease;
}

.lp-faq__item.is-open .lp-faq__answer {
  grid-template-rows: 1fr;
}

.lp-faq__answer > div {
  overflow: hidden;
}

.lp-faq__answer p {
  margin: 0;
  padding: 0 58px 25px 26px;
  color: var(--lp-muted);
  font-size: 14px;
  line-height: 1.7;
}

.lp-section--contact {
  background: var(--lp-cloud);
}

.lp-contact {
  display: grid;
  grid-template-columns: minmax(300px, 0.78fr) minmax(0, 1.22fr);
  align-items: center;
  gap: 44px;
}

.lp-contact__aside {
  padding: 52px;
  color: #fff;
  background: linear-gradient(135deg, #db5100, #ff8736);
  border-radius: 28px;
  box-shadow: 0 24px 60px rgba(219, 81, 0, 0.2);
}

.lp-contact__aside .lp-kicker {
  color: #fff;
}

.lp-contact__aside h2 {
  margin: 22px 0 18px;
  /* font:
    700 clamp(32px, 4vw, 48px)/1.12 "Manrope",
    sans-serif; */
  letter-spacing: -0.045em;
}

.lp-contact__aside > p {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 16px;
  line-height: 1.7;
}

.lp-contact__aside > a {
  display: flex;
  margin-top: 38px;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  font-weight: 700;
}

.lp-contact__aside > a > i {
  display: grid;
  width: 48px;
  height: 48px;
  color: var(--lp-orange);
  background: #fff;
  border-radius: 50%;
  font-size: 22px;
  place-items: center;
}

.lp-contact__aside > a span {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.lp-contact__aside > a small {
  color: rgba(255, 255, 255, 0.7);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.lp-contact__form {
  padding: 42px;
  background: #fff;
  border-radius: 28px;
  box-shadow: 0 24px 65px rgba(7, 31, 39, 0.1);
}

.lp-contact__form form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 19px;
}

.lp-contact__honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.lp-field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 8px;
}

.lp-field--wide,
.lp-contact__submit {
  grid-column: 1 / -1;
}

.lp-field label {
  color: var(--lp-ink-strong);
  font-size: 12px;
  font-weight: 700;
}

.lp-field input,
.lp-field select,
.lp-field textarea {
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  color: var(--lp-ink-strong);
  background: #f4f7f7;
  border: 1px solid transparent;
  border-radius: 12px;
  outline: 0;
  font-size: 14px;
  font-weight: 500;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.lp-field textarea {
  min-height: 125px;
  resize: vertical;
}

.lp-field input:focus,
.lp-field select:focus,
.lp-field textarea:focus {
  background: #fff;
  border-color: var(--lp-orange);
  box-shadow: 0 0 0 4px rgba(255, 104, 0, 0.1);
}

.lp-contact__submit {
  width: 100%;
  margin-top: 4px;
  cursor: pointer;
}

.lp-alert {
  display: flex;
  margin-bottom: 20px;
  padding: 13px 15px;
  align-items: center;
  gap: 9px;
  border-radius: 11px;
  font-size: 13px;
}

.lp-alert--success {
  color: #087d5d;
  background: var(--lp-green-soft);
}
.lp-alert--error {
  color: #a93535;
  background: #fff0f0;
}

.lp-footer--v2 {
  position: relative;
  overflow: hidden;
  background: #1d1d1d;
}

.lp-footer--v2::before {
  content: "";
  position: absolute;
  top: -260px;
  right: -190px;
  width: 620px;
  height: 620px;
  background: rgba(255, 255, 255, 0.018);
  transform: rotate(45deg);
}

.lp-footer--v2 .lp-container {
  position: relative;
  z-index: 1;
}

.lp-footer--v2 img {
  filter: none;
}

@media (max-width: 1100px) {
  .lp-v2 .lp-hero__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .lp-steps,
  .lp-contact {
    grid-template-columns: 1fr;
  }

  .lp-v2 .lp-plan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lp-v2 .lp-plan-card--featured {
    transform: none;
  }

  .lp-steps::before {
    display: none;
  }

  .lp-why__panels article {
    padding: 38px;
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .lp-why__visual {
    min-height: 210px;
  }

  .lp-contact__aside {
    padding: 40px;
  }
}

@media (max-width: 620px) {
  .lp-v2 #como-funciona {
    padding-bottom: 62px;
  }
  .lp-v2 .lp-hero__actions {
    flex-direction: column;
  }

  .lp-v2 #plataforma {
    background-size: 165% 190px;
  }

  .lp-section--why {
    padding: 56px 0;
  }

  .lp-why__tabs {
    padding: 5px;
  }

  .lp-why__tabs button {
    min-height: 46px;
    padding: 0 8px;
    font-size: 12px;
  }

  .lp-why__panels article {
    min-height: 0;
    padding: 24px;
  }

  .lp-contact__aside,
  .lp-contact__form {
    padding: 26px;
    border-radius: 20px;
  }

  .lp-contact__form form {
    grid-template-columns: 1fr;
  }

  .lp-field,
  .lp-field--wide,
  .lp-contact__submit {
    grid-column: 1;
  }

  .lp-v2 .lp-plan-grid {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 34px;
  }

  .lp-v2 .lp-plan-card {
    min-height: 0;
  }

  .lp-faq__item > button {
    min-height: 70px;
    padding: 18px;
    font-size: 13px;
  }

  .lp-faq__answer p {
    padding: 0 48px 21px 18px;
  }
}

/* Passos 01 → 03: a linha se desenha quando a seção entra (o script marca "is-in"); sem animação, fica inteira. */
.lp-v2 .lp-steps::before {
  transform-origin: left center;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

html.lp-motion:not(.lp-motion-late) .lp-v2 .lp-steps:not(.is-in)::before {
  transform: scaleX(0);
}

/* Painel do produto: ponto "online" pulsando e números estáveis durante a contagem. */
.lp-v2 .lp-product__status i {
  position: relative;
}

.lp-v2 .lp-product__status i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(63, 210, 162, 0.55);
  border-radius: 50%;
  animation: lp-live-ping 2.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes lp-live-ping {
  0% {
    opacity: 0.8;
    transform: scale(1);
  }

  80%,
  100% {
    opacity: 0;
    transform: scale(3.2);
  }
}

.lp-v2 .lp-product__metrics strong,
.lp-v2 .lp-product__pulse > strong {
  font-variant-numeric: tabular-nums;
}

/* Rodapé: atendimento no lugar do aviso de preview. */
@media (min-width: 881px) {
  .lp-footer--v2 .lp-footer__grid {
    grid-template-columns: 1.3fr 0.7fr 0.7fr 1.2fr;
  }
}

.lp-footer__support {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 12px;
}

.lp-footer__support > strong {
  margin-bottom: 4px;
  color: #fff;
  font-size: 12px;
}

.lp-footer__support > a:not(.lp-button) {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #d4dfe1;
  font-size: 12px;
  line-height: 1.35;
}

.lp-footer__support > a:not(.lp-button) > span {
  min-width: 0;
}

.lp-footer__support > a:not(.lp-button) > i {
  display: grid;
  flex: none;
  width: 32px;
  height: 32px;
  /* color: var(--lp-orange); */
  background: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  font-size: 17px;
  place-items: center;
}

.lp-footer__support small {
  display: block;
  color: #8a9a9d;
  font-size: 10px;
}

.lp-footer nav a:hover,
.lp-footer__support > a:not(.lp-button):hover {
  color: #fff;
}

.lp-footer__support > a:focus-visible {
  outline: 2px solid var(--lp-orange);
  outline-offset: 3px;
  border-radius: 10px;
}

.lp-footer__support .lp-footer__cta {
  margin-top: 6px;
}

/* Como funciona: pergunta curta e o botão contornado da landing anterior, levando para a Plataforma. */
.lp-more {
  margin-top: 56px;
  text-align: center;
}

.lp-more p {
  margin: 0 0 18px;
  color: var(--lp-ink-strong);
  font-size: 16px;
  font-weight: 700;
}

/* O botão contornado da landing anterior, nas mesmas medidas (13px, cerca de 39px de altura). Ao passar o mouse,
   a borda some enquanto o miolo se preenche, e o botão parece encolher: o fundo não pinta sob a borda
   (background-clip) justamente para isso aparecer. Sem o salto e a sombra dos outros botões. */
.lp-button--outline {
  min-height: 0;
  padding: 7.5px 24px;
  gap: 4px;
  color: var(--lp-orange);
  background: transparent;
  background-clip: padding-box;
  border: 2px solid var(--lp-orange);
  box-shadow: none;
  font-size: 13px;
  line-height: 1.5;
  transition:
    color 0.3s ease,
    background-color 0.3s ease,
    border-color 0.3s ease;
}

.lp-button--outline:hover,
.lp-button--outline:focus-visible {
  color: #fff;
  background: var(--lp-orange);
  background-clip: padding-box;
  border-color: transparent;
  box-shadow: none;
  transform: none;
}

.lp-button--hover:hover {
  border-color: transparent;
}

.lp-button--hover:hover {
  background-color: #f97316;
}

.lp-button--hover:hover {
  background-color: #ff6b00;
  color: #fff;
}

.lp-button--hover {
  border: 2px solid #ff6b00;
  font-weight: 700;
  transition: all 0.3s;
}

/* Plataforma: os recursos agrupados em um painel só, com divisórias, como na landing anterior. */
.lp-feature-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  background: #fff;
  border-radius: 22px;
  -webkit-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

/* A sombra de 1px de cada item desenha as divisórias; o painel corta as que ficam na borda. */
.lp-feature-cell {
  padding: 44px 34px;
  box-shadow: 0 0 0 1px var(--lp-line);
  text-align: center;
  transition: background 0.24s ease;
}

.lp-feature-cell:hover {
  background: #fffaf7;
}

.lp-feature-cell > i {
  display: grid;
  width: 54px;
  height: 54px;
  margin: 0 auto 22px;
  color: var(--lp-orange);
  background: var(--lp-orange-soft);
  border-radius: 16px;
  font-size: 25px;
  place-items: center;
  transition:
    color 0.24s ease,
    background 0.24s ease;
}

.lp-feature-cell:hover > i {
  color: #fff;
  background: var(--lp-orange);
}

.lp-feature-cell h3 {
  margin: 0 0 10px;
  color: var(--lp-ink-strong);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.lp-feature-cell p {
  max-width: 310px;
  margin: 0 auto;
  color: var(--lp-muted);
  font-size: 14px;
  line-height: 1.65;
}

.lp-feature-cell small {
  display: block;
  margin-top: 16px;
  color: var(--lp-ink);
  font-size: 12px;
  font-weight: 700;
}

/* Plataforma: "O que muda na prática?" e o convite em destaque, lado a lado, como na landing anterior. */
.lp-benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 48px;
}

.lp-benefits__card {
  display: flex;
  padding: 44px;
  flex-direction: column;
  justify-content: center;
  background: #fff;
  border-radius: 22px;
  -webkit-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

.lp-benefits__card h3 {
  margin: 0;
  color: var(--lp-ink-strong);
  font-size: clamp(22px, 2.3vw, 25px);
  font-weight: 600;
  line-height: 1.2;
}

.lp-benefits__card ul {
  display: grid;
  margin: 26px 0 0;
  padding: 0;
  gap: 14px;
  list-style: none;
}

.lp-benefits__card li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--lp-ink);
  font-size: 15px;
  line-height: 1.55;
}

.lp-benefits__card li i {
  flex: none;
  margin-top: 2px;
  color: var(--lp-green);
  font-size: 19px;
}

/* Sem borda: com o degradê, uma borda transparente deixaria um filete nas laterais. */
.lp-benefits__card--accent {
  color: #fff;
  background: linear-gradient(90deg, #db5100, #ff8736);
  border: 0;
  box-shadow: 0 24px 60px rgba(219, 81, 0, 0.2);
}

.lp-benefits__card--accent h3 {
  color: #fff;
}

.lp-benefits__card--accent p {
  margin: 14px 0 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 17px;
  line-height: 1.6;
}

.lp-benefits__card--accent .lp-button {
  width: 100%;
  margin-top: 28px;
}

@media (max-width: 1100px) {
  .lp-feature-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .lp-benefits {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .lp-more {
    margin-top: 40px;
  }

  .lp-feature-panel {
    grid-template-columns: 1fr;
  }

  .lp-feature-cell {
    padding: 34px 24px;
  }

  .lp-benefits {
    margin-top: 32px;
    gap: 16px;
  }

  .lp-benefits__card {
    padding: 30px 24px;
  }
}

/* Módulo grátis (PDV) na seção de módulos: selo verde, ao lado do Premium. */
.lp-v2 .lp-status--free {
  color: #8fe3bf;
  background: rgba(18, 128, 92, 0.14);
  border-color: rgba(18, 128, 92, 0.38);
}

/* Módulos com quatro cards (WhatsApp, PDV, Treinos e Torneios): quatro colunas no desktop e duas, sem o destaque
   ocupar a linha toda, no tablet. */
.lp-v2 .lp-module-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.lp-v2 .lp-module-card {
  padding: 28px 24px;
}

@media (max-width: 1100px) {
  .lp-v2 .lp-module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lp-v2 .lp-module-card--featured {
    grid-column: auto;
  }
}

@media (max-width: 640px) {
  .lp-v2 .lp-module-grid {
    grid-template-columns: 1fr;
  }
}