/* /css/fx.css */
/* ==========================================================================
   fx.css — camada de movimento (anime.js + three.js)
   Carregado depois de site.css. Nada aqui esconde conteúdo sem que o JS
   tenha assumido a página: as classes .fx-on / .fx-webgl só entram quando
   as libs carregam. Se falharem, a página continua a do site.css.
   ========================================================================== */

/* ---------- 1. Hero em WebGL ----------
   O canvas cobre o hero inteiro e fica atrás do conteúdo. Enquanto o WebGL
   não sobe, os blobs borrados do CSS original continuam valendo. */
.fx-hero-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .9s ease;
  pointer-events: none;
}
.fx-hero-canvas.is-ready { opacity: 1; }
.fx-hero > *:not(canvas):not(.hero-blob) { position: relative; z-index: 1; }
.fx-webgl .hero-blob { opacity: 0; transition: opacity .9s ease; }

/* ---------- 2. Reveal: o anime.js assume ----------
   site.css já deixa [data-anim] em opacity 0. Aqui só tiramos a transição
   do CSS para não brigar com a animação (uma propriedade, um dono só). */
.fx-on [data-anim] { transition: none; }

/* ---------- 3. Título do hero em linhas mascaradas ----------
   O splitText cria .fx-line; o clip fica no wrapper que ele mesmo gera. */
.fx-on .hero-heading,
.fx-on .hero .text-size-display-lg { will-change: transform; }

/* ---------- 4. Contador ----------
   O número vira um <span> para animar só ele, sem tocar no resto do texto. */
.fx-num { font-variant-numeric: tabular-nums; }

/* ---------- 5. Medidor do NPS ----------
   Arco que se desenha no canto do box escuro. */
.fx-gauge {
  position: absolute;
  top: var(--margin-sm);
  right: var(--margin-sm);
  width: 5.5rem;
  height: 5.5rem;
  pointer-events: none;
}
.fx-gauge circle { fill: none; stroke-linecap: round; }
.fx-gauge .fx-gauge-track { stroke: rgba(255, 255, 255, .12); }
.fx-gauge .fx-gauge-arc { stroke: var(--tertiary--tertiary-500); }
.fx-gauge text {
  fill: rgba(255, 255, 255, .55);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .08em;
  text-anchor: middle;
}
@media screen and (max-width: 767px) { .fx-gauge { display: none; } }

/* ---------- 6. Tilt dos cards ----------
   Perspectiva no container (ponto de fuga compartilhado) e transform no
   card — que não tem [data-anim], então o tilt é o único dono. */
.fx-tilt-scope { perspective: 1600px; perspective-origin: 50% 46%; }
.fx-tilt { transform-style: preserve-3d; will-change: transform; }

/* ---------- 7. Botões magnéticos ---------- */
.fx-on .button { will-change: transform; }

/* ---------- 8. Marquee das operadoras ----------
   O fx.js passa a escrever o transform; a animação do CSS sai de cena. */
.fx-on .company-logos-wrapper { animation: none !important; }
.fx-on .companylogos { cursor: grab; touch-action: pan-y; }
.fx-on .companylogos.is-dragging { cursor: grabbing; }
.fx-on .companylogos img { -webkit-user-drag: none; user-select: none; }

/* ---------- 9. Reduced motion ----------
   Nada se perde: tudo aparece, nenhum loop roda. */
@media (prefers-reduced-motion: reduce) {
  .fx-hero-canvas { display: none; }
  .fx-on [data-anim] { opacity: 1 !important; transform: none !important; }
  .fx-tilt, .fx-on .button { will-change: auto; }
}

/* ==========================================================================
   12. Estrutura: dar eixo ao que estava solto na tela
   O Webflow posiciona cada filho por regras de ID (#w-node-…), que vencem por
   especificidade — daí o !important pontual, só em grid-column.
   ========================================================================== */
.fx-on .sectionheader {
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--margin-lg);
  align-items: end;
  padding-bottom: var(--margin-sm);
}
.fx-on .sectionheader > h1,
.fx-on .sectionheader > h2 { grid-column: 1 / span 7 !important; margin: 0; }
.fx-on .sectionheader > p {
  grid-column: 8 / span 5 !important;
  max-width: 34rem;
  margin: 0 0 .35rem;
  color: var(--neutral--neutral-500);
}

/* soluções: imagem e opções lado a lado, sem coluna vazia */
.fx-on .grid { align-items: center; }
.fx-on .home-plans {
  grid-column: 1 / -1 !important;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--margin-lg);
  align-items: center;
}
.fx-on .home-plans > .image.h29 {
  width: 100%;
  height: 100%;
  max-height: 27rem;
  object-fit: cover;
  border-radius: 1.5rem;
}
.fx-on .home-plans-links { width: 100%; }
.fx-on .home-plans-links .accordion { width: 100%; border-top: 1px solid var(--neutral--neutral-100); }
.fx-on .home-plans-links .accordion:last-child { border-bottom: 1px solid var(--neutral--neutral-100); }
.fx-on .accordion-trigger { padding: 1.25rem 0; gap: 1rem; }

@media screen and (max-width: 991px) {
  /* 12 colunas + gap grande estouravam a largura no celular (rolagem lateral) */
  .fx-on .sectionheader { grid-template-columns: 1fr; row-gap: var(--margin-sm); }
  .fx-on .sectionheader > h1,
  .fx-on .sectionheader > h2,
  .fx-on .sectionheader > p { grid-column: 1 / -1 !important; }
  .fx-on .home-plans { grid-template-columns: 1fr; }
}

/* ==========================================================================
   13. Números: de texto solto para cartão
   ========================================================================== */
.fx-on .bignumbers {
  position: relative;
  align-items: flex-start;
  text-align: left;
  gap: 1.1rem;
  padding: var(--margin-md);
  background: #fff;
  border: 1px solid var(--neutral--neutral-100);
  border-radius: 1.5rem;
  overflow: hidden;
  transition: transform .45s cubic-bezier(.2, .7, .3, 1), box-shadow .45s ease, border-color .45s ease;
}
.fx-on .bignumbers::before {                 /* fio de cor no topo, como acento */
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--accent);
  opacity: .9;
}
.fx-on .bignumbers:nth-child(1)::before { background: var(--secondary--secondary-500); }
.fx-on .bignumbers:nth-child(2)::before { background: var(--tertiary--tertiary-500); }
.fx-on .bignumbers:hover {
  transform: translateY(-6px);
  border-color: var(--main--main-200);
  box-shadow: 0 34px 56px -34px rgba(12, 40, 69, .45);
}
.fx-on .bignumbers .icon-wrap { width: 3.25rem; height: 3.25rem; }
.fx-on .bignumbers .bignumbers-heading { font-size: 3.25rem; letter-spacing: -.02em; }
.fx-on .bignumbers .text-size-body-lg { color: var(--neutral--neutral-500); font-size: 1rem; }

/* ==========================================================================
   14. Cards de vantagem: relevo, ordem de leitura e reação ao cursor
   ========================================================================== */
.fx-on .advantage {
  position: relative;
  justify-content: flex-start;
  gap: 1.1rem;
  padding: var(--margin-md);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(16, 18, 43, .06);
  transition: box-shadow .45s ease;
}
.fx-on .advantage::after {                   /* brilho diagonal: tira o ar de bloco chapado */
  content: "";
  position: absolute;
  inset: -40% -40% auto auto;
  width: 18rem;
  height: 18rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .55), transparent 62%);
  pointer-events: none;
}
.fx-on .advantage:hover { box-shadow: 0 38px 64px -38px rgba(12, 40, 69, .6); }
.fx-on .advantage h3 { font-size: 1.15rem; line-height: 1.25; margin: 0; }
.fx-on .advantage p { margin-top: auto; font-size: .95rem; line-height: 1.6; }
.fx-on .advantage-icon { width: 3rem; height: 3rem; }

/* ==========================================================================
   15. Ritmo de cor na metade de baixo
   As faixas alternam para o olho saber onde descansar e onde agir; a seção de
   lead fica na terceira cor (azul da marca), que é onde a ação mora.
   ========================================================================== */
.fx-on .fx-tone-soft { background-color: var(--main--main-50); }
.fx-on .fx-tone-blue {
  background: linear-gradient(135deg, var(--main--main-800), var(--main--main-500));
  color: var(--text-negative);
}
.fx-on .fx-tone-blue h2,
.fx-on .fx-tone-blue .text-size-display-sm { color: var(--text-negative); }
.fx-on .fx-tone-blue .newsletter-box {
  background-color: rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .18);
}
.fx-on .fx-tone-blue .text-field {
  background-color: rgba(255, 255, 255, .92);
  border-color: transparent;
}
.fx-on .fx-tone-blue .link { color: var(--secondary--secondary-300); }
.fx-on .fx-tone-blue .button { background-color: var(--text-negative); color: var(--main--main-800); }

/* ==========================================================================
   16. Scroll lock: a seção segura o scroll enquanto conta os quatro tempos
   ========================================================================== */
.fx-on .fx-scrolly { padding-top: 0; padding-bottom: 0; }
.fx-on .fx-stage {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--margin-md);
  padding: var(--margin-lg) 0;
}
.fx-on .fx-stage .advantage { opacity: 0; }              /* o scrub assume a partir daqui */
.fx-progresso {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 0 var(--margin-lg);
  color: var(--neutral--neutral-400);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.fx-progresso-trilho {
  position: relative;
  flex: 1;
  max-width: 22rem;
  height: 2px;
  background: var(--neutral--neutral-100);
  border-radius: 2px;
  overflow: hidden;
}
.fx-progresso-barra {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--accent);
  border-radius: 2px;
}
@media screen and (max-width: 991px) { .fx-progresso { display: none; } }

/* ==========================================================================
   17. Ajustes de ritmo vertical e alinhamento
   O espaçamento herdado do Webflow soma margin + padding e deixa os blocos
   boiando; aqui ele vira um valor só, e os cards passam a ter altura igual.
   ========================================================================== */
.fx-on .section { margin-top: 0; padding-top: 4.5rem; padding-bottom: 4.5rem; }
.fx-on .grid { padding-top: 0; }

/* trio de números: três colunas iguais, ocupando a largura do container */
.fx-on .quick-stack { align-items: stretch; }
.fx-on .quick-stack:has(.bignumbers) { grid-template-columns: repeat(3, 1fr); }
.fx-on .bignumbers {
  height: 100%;
  grid-column: auto !important;
}
.fx-on .bignumbers .bignumbers-heading {
  font-size: clamp(2.1rem, 2.6vw, 2.9rem);
  white-space: nowrap;                       /* "+240 mil" não quebra no meio */
}
/* o título do bloco acompanha o alinhamento dos cards */
.fx-on .w-layout-cell.center:has(h1),
.fx-on .w-layout-cell.center:has(h2) { align-items: flex-start; text-align: left; }

/* imagem das soluções preenche a coluna */
.fx-on .home-plans > .image.h29 {
  width: 100% !important;
  height: 26rem;
  max-height: none;
}

@media screen and (max-width: 991px) {
  .fx-on .quick-stack:has(.bignumbers) { grid-template-columns: 1fr; }
  .fx-on .home-plans > .image.h29 { height: 18rem; }
}

/* a fila de cards do palco ganha respiro lateral e gap consistente */
.fx-on .fx-stage .desktopview {
  gap: var(--margin-sm);
  padding-inline: var(--margin-lg);
}
.fx-on .fx-stage .advantage { max-width: none; min-height: 21rem; }
.fx-on .fx-progresso { padding: 0; margin-top: .5rem; }

@media screen and (max-width: 991px) {
  .fx-on .fx-stage .desktopview { padding-inline: var(--margin-sm); }
}

/* texto de apoio e rótulos dentro da faixa azul precisam de contraste */
.fx-on .fx-tone-blue .newsletter-form > div,
.fx-on .fx-tone-blue .text-size-body-lg,
.fx-on .fx-tone-blue p { color: rgba(255, 255, 255, .78); }
.fx-on .fx-tone-blue .newsletter-icon-wrap { background: rgba(255, 255, 255, .16); }

/* cartão de número sobre faixa tonalizada: mantém o contraste do card */
.fx-on .fx-tone-soft .bignumbers,
.fx-on .fx-tone-soft .accordion { background-color: #fff; }
.fx-on .fx-tone-soft .accordion { border-radius: 0; }

/* ==========================================================================
   18. Ajustes pedidos na revisão
   ========================================================================== */

/* — as duas cores dos boxes escuros trocam de lado — */
.fx-on .box-dark-heading { color: var(--secondary--secondary-500); }
.fx-on .box-dark-heading.secondary { color: var(--tertiary--tertiary-500); }
.fx-on .fx-gauge .fx-gauge-arc { stroke: var(--secondary--secondary-500); }

/* — soluções: título em cima, imagem à esquerda, apoio + opções à direita — */
.fx-on .sectionheader { align-items: start; }
.fx-on .home-plans { align-items: start; gap: var(--margin-lg); }
.fx-on .home-plans-links { gap: var(--margin-sm); }
.fx-on .fx-apoio {
  margin: 0 0 .5rem;
  color: var(--neutral--neutral-500);
  font-size: 1.05rem;
  line-height: 1.65;
}
.fx-on .home-plans > .image.h29 { height: 24rem; }


/* ==========================================================================
   19. Newsletter: de pilha centralizada a bloco com discurso e captura
   Movimento na mesma linguagem do córtex: aurora derivando no fundo e um
   fio de luz percorrendo a borda do cartão — nada de WebGL aqui, só CSS.
   ========================================================================== */
.fx-on .fx-tone-blue { position: relative; overflow: hidden; }
.fx-on .fx-tone-blue::before,
.fx-on .fx-tone-blue::after {          /* aurora: dois halos lentos, sub-perceptivos */
  content: "";
  position: absolute;
  width: 46rem;
  height: 46rem;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .5;
  pointer-events: none;
}
.fx-on .fx-tone-blue::before {
  top: -22rem; left: -12rem;
  background: radial-gradient(circle, var(--secondary--secondary-400), transparent 66%);
  animation: aurora-a 22s ease-in-out infinite;
}
.fx-on .fx-tone-blue::after {
  right: -16rem; bottom: -24rem;
  background: radial-gradient(circle, var(--main--main-300), transparent 66%);
  animation: aurora-b 26s ease-in-out infinite;
}
@keyframes aurora-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(6rem, 4rem, 0) scale(1.12); }
}
@keyframes aurora-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); }
  50%      { transform: translate3d(-7rem, -3rem, 0) scale(.95); }
}

/* o bloco em si deixa de ser cartão: quem vira cartão é o formulário */
.fx-on .fx-news {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--margin-lg);
  align-items: center;
  max-width: 68rem;
  margin: 0 auto;
  padding: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
  text-align: left;
}
.fx-on .fx-news-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.fx-on .fx-news .newsletter-icon-wrap {
  width: 3.25rem;
  height: 3.25rem;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .22);
  animation: pulso-ring 3.4s ease-out infinite;
}
@keyframes pulso-ring {
  0%        { box-shadow: 0 0 0 0 rgba(112, 217, 240, .45); }
  70%, 100% { box-shadow: 0 0 0 1.1rem rgba(112, 217, 240, 0); }
}
.fx-on .fx-news-eyebrow {
  color: var(--secondary--secondary-300);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.fx-on .fx-news h2 { margin: 0; text-align: left; line-height: 1.12; text-wrap: balance; }
.fx-on .fx-news-sub {
  margin: 0;
  max-width: 26rem;
  color: rgba(255, 255, 255, .72);
  font-size: 1rem;
  line-height: 1.6;
}

/* cartão de captura */
.fx-on .fx-news-card {
  position: relative;
  padding: 2rem;
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .2);
  box-shadow: 0 40px 70px -40px rgba(3, 20, 40, .8);
  overflow: hidden;
}
.fx-on .fx-news-card::after {          /* fio de luz percorrendo a borda de cima */
  content: "";
  position: absolute;
  top: 0; left: -40%;
  width: 40%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(159, 230, 255, .95), transparent);
  animation: fio-luz 4.5s linear infinite;
}
@keyframes fio-luz {
  0%   { transform: translateX(0); }
  100% { transform: translateX(350%); }
}

.fx-on .fx-news .newsletter-form {
  display: grid;
  gap: .9rem;
  margin: 0;
}
.fx-on .fx-news .text-field {
  height: 3.4rem;
  margin: 0;
  padding: 0 1.25rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .95);
  font-size: 1rem;
  transition: box-shadow .3s ease, border-color .3s ease;
}
.fx-on .fx-news .text-field:focus {
  border-color: var(--secondary--secondary-300);
  box-shadow: 0 0 0 4px rgba(112, 217, 240, .28);
}
.fx-on .fx-news-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  width: 100%;
  height: 3.4rem;
  border: 0;
  border-radius: 1rem;
  background: var(--text-negative);
  color: var(--main--main-800);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: transform .3s ease, box-shadow .3s ease;
}
.fx-on .fx-news-btn svg { transition: transform .3s ease; }
.fx-on .fx-news-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -16px rgba(0, 0, 0, .65); }
.fx-on .fx-news-btn:hover svg { transform: translateX(4px); }
.fx-on .fx-news .newsletter-form > div {
  order: 3;
  font-size: .78rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .6);
}
.fx-on .fx-news .success-message,
.fx-on .fx-news .w-form-fail { border-radius: 1rem; }

@media screen and (max-width: 991px) {
  .fx-on .fx-news { grid-template-columns: 1fr; gap: var(--margin-md); }
  .fx-on .fx-news-sub { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-on .fx-tone-blue::before,
  .fx-on .fx-tone-blue::after,
  .fx-on .fx-news .newsletter-icon-wrap,
  .fx-on .fx-news-card::after { animation: none; }
}

/* O bloco herda um grid de 2 colunas e o cartão de vidro da seção 15; ambos
   precisam ser desfeitos com a mesma força de seletor que os criou. */
.fx-on .quick-stack:has(.fx-news) {
  grid-template-columns: 1fr;
  padding-block: 0;                    /* o padding lateral fica: no celular é ele que dá a margem */
}
.fx-on .fx-tone-blue .newsletter-box.fx-news {
  grid-column: 1 / -1 !important;
  width: 100%;
  padding: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
  box-shadow: none;
}

/* O Webflow fixa a largura do wrap do formulário (40rem) e dá um grid próprio
   ao form — as duas coisas impediam as colunas de respirar. */
.fx-on .fx-news > * { min-width: 0; }
.fx-on .fx-news .fx-news-card { width: 100%; max-width: none; }
.fx-on .fx-news .newsletter-form { grid-template-columns: 1fr; width: 100%; }
.fx-on .fx-news .text-field,
.fx-on .fx-news-btn { width: 100%; }