/* =============================================================================
   Grupo Axia — BPO Financeiro

   Estilos EXCLUSIVOS desta página. Tudo que é comum ao site inteiro vem de
   /assets/css/: tokens, reset, botões, navbar, rodapé, card de suporte e
   cookies.

   Os dois primeiros blocos são a dobra de depoimentos da home, copiada como
   está — mesma marcação, mesmo comportamento. A home continua com a cópia
   dela: as duas páginas são as únicas que a usam, e extrair um componente
   compartilhado agora mexeria no arquivo da home sem necessidade. Se uma
   terceira página pedir a dobra, aí o lugar dela é em /assets/css/.

   Sumário
     1. Títulos de seção e carrosséis   6.  O que sai da sua rotina
     2. Depoimentos                     7.  Como a troca acontece
     3. Botões extras                   8.  Fecho
     4. Hero (e a hero que fica)        9.  Ajustes do celular
     5. A declaração                    10. Movimento reduzido
     5b. A chamada do meio
   ========================================================================== */

/* ============ 1. Títulos de seção e carrosséis (cópia da home) ============ */
.section-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.section-head--center {
  align-items: center;
  text-align: center;
}

.section-head__title {
  font-size: 28px;
  line-height: 1.167;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--brand-850);
}

.section-head__title--light {
  color: #fff;
}

/* 16px em todas as dobras. Na home este subtítulo é maior, mas aqui ele
   aparece três vezes e sempre com duas ou três linhas: em 20px ele competia
   com o título logo acima. */
.section-head__subtitle {
  font-size: 16px;
  line-height: 26px;
  font-weight: 300;
  color: var(--ink-muted);
}

.section-head__subtitle--light {
  color: var(--ink-soft);
}

@media (min-width: 768px) {
  .section-head__title {
    font-size: 36px;
  }
}

@media (min-width: 1024px) {
  .section-head__title {
    font-size: 48px;
  }
}

/* Pontinhos dos carrosséis */
/* ---------------------------- Os pontinhos --------------------------------
   Um desenho só para o site inteiro: bolinha de 8px, e a ativa vira um traço
   de 24px. A forma se lê antes da cor, então quem enxerga pouco contraste
   continua sabendo onde está. É o mesmo da dobra "o que sai da sua rotina",
   que sobre fundo escuro usa branco no lugar do verde.

   Saíram duas coisas do desenho anterior: a pílula de 40px, que era larga
   demais ao lado de uma bolinha de 12, e o brilho que atravessava o ponto
   ativo a cada troca. Eles chamavam atenção para o indicador, que é a única
   parte de um carrossel que não deveria pedir nada.

   O botão continua maior que a bolinha de propósito. As bordas transparentes
   (8px em cima e embaixo, 4px dos lados) levam a área de toque a 16x24 sem
   mexer no desenho: o background-clip deixa o fundo só no miolo, e a margem
   negativa em bloco devolve os 8px de altura à fileira. Sem essa conta o alvo
   teria 8x8px, difícil de acertar com o dedo.

   Os raios são separados (horizontal / vertical) descontando as bordas, senão
   o miolo não fica redondo: 8/12 dão 4px nos dois sentidos. Um 999px aqui
   seria reduzido ao tamanho da caixa maior e achataria os cantos.

   A bolinha apagada é o mesmo verde da ativa, a 52%. Não é enfeite: é onde
   ela alcança 3:1 contra o cinza da página, o mínimo da WCAG para elemento
   gráfico que carrega informação. Mais clara que isso e ela desaparece —
   aconteceu com os pontos do carrossel de frentes, que começaram na cor de
   filete e sumiam no fundo.
   -------------------------------------------------------------------------- */
.dots {
  display: flex;
  align-items: center;
  /* O espaço entre os pontinhos vem das bordas transparentes de cada botão
     (4px + 4px); a margem negativa devolve à fileira a largura de antes. */
  gap: 0;
  margin-inline: -4px;
}

.dots button {
  height: 24px;
  width: 16px;
  margin-block: -8px;
  border: 8px solid transparent;
  border-inline-width: 4px;
  background-clip: padding-box;
  border-radius: 8px / 12px;
  background-color: rgb(3 50 35 / 0.52);
  transition:
    width 0.3s var(--ease-out-soft),
    background-color 0.3s ease;
}

/* Sem mudar de tamanho: só a cor fecha, para o desenho não se mexer. */
.dots button:not([aria-current="true"]):hover {
  background-color: rgb(3 50 35 / 0.78);
}

.dots button[aria-current="true"] {
  width: 32px;
  background-color: var(--brand-900);
}

/* Seta que se preenche a partir do centro ao passar o mouse */
.round-btn {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border-radius: var(--r-2xl);
  border: 1px solid var(--brand-400);
  color: var(--brand-900);
  transition:
    color 0.3s ease,
    border-color 0.3s ease;
}

.round-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--brand-900);
  transform: scale(0);
  transition: transform 0.35s var(--ease-out-soft);
}

.round-btn:hover,
.round-btn:focus-visible {
  color: #fff;
  border-color: var(--brand-900);
}

.round-btn:hover::before,
.round-btn:focus-visible::before {
  transform: scale(1);
}

.round-btn:active::before {
  background: var(--brand-800);
}

/* Nas pontas de um carrossel com limite, a seta apaga em vez de sumir — quem
   está lendo continua vendo onde a lista termina. */
.round-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.round-btn:disabled::before {
  transform: scale(0);
}

/* Estrelas (preenchidas por JS) */
.stars {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--star);
}

.stars svg {
  width: 20px;
  height: 20px;
}

.stars--sm svg {
  width: 20px;
  height: 20px;
}


/* ============== 2. Depoimentos (cópia da home) ========================== */
/* Cabeçalho com a aspa grande, faixa de cards que anda de um em um e, embaixo,
   as setas. O card da frente acende em verde escuro; os demais ficam claros. */
.reviews {
  padding-block: 48px;
}

/* 36px de linha + os 12px de padding do .reviews__item dão os 48px de respiro
   entre o selo do Google e o topo dos cards. */
.reviews__inner {
  display: grid;
  gap: 36px;
}

.reviews__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  max-width: 720px;
}

/* A aspa que abre a dobra — a mesma forma que antes ficava em cada card */
.reviews__mark {
  width: 44px;
  height: 33px;
  flex: 0 0 auto;
  color: var(--brand-200);
}

.reviews__head .google-badge {
  margin-top: 8px;
}

.google-badge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.06);
  transition: box-shadow 0.2s ease;
}

.google-badge:hover {
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.12);
}

.google-badge__rating {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}

.google-badge__count {
  font-size: 14px;
  color: var(--ink-muted);
}

/* ----------------------------- Carrossel --------------------------------
   Anda de um card por vez, não de uma página inteira: o passo curto é o que
   dá a sensação de leveza. A lista é duplicada no JS, então a volta ao início
   acontece sem salto visível. */
/* Os pontinhos ficam centrados sob a faixa; a janela continua ocupando a
   largura toda por causa do width: 100% dela. */
.reviews__carousel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  min-width: 0;
}

/* O overflow: hidden é o que segura a faixa dentro da janela — mas ele também
   recorta a sombra do card em destaque, que passava dos 12px de folga do item
   e batia num corte reto. O padding aumenta a caixa de recorte e a margem
   negativa devolve o espaço, então a sombra respira sem nada sair do lugar. */
.reviews__viewport {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  padding-block: 28px;
  margin-block: -28px;
}

.reviews__track {
  display: flex;
  transform: translate3d(var(--reviews-shift, 0px), 0, 0);
  transition: transform 0.9s var(--ease-carousel);
  will-change: transform;
}

.reviews__item {
  display: flex;
  flex: 0 0 100%;
  align-items: stretch;
  /* 12px nas laterais, não 8: é a folga que a sombra precisa para não ser
     cortada pela borda da faixa. A largura do item não muda, só a do card. */
  padding: 12px;
}

@media (min-width: 640px) {
  .reviews__item {
    flex-basis: 50%;
  }
}

@media (min-width: 1024px) {
  .reviews__item {
    flex-basis: 33.3333%;
  }
}

/* ------------------------------- Card ----------------------------------- */
.review {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  height: 100%;
  padding: 32px 28px;
  border-radius: var(--r-2xl);
  border: 1px solid var(--line);
  background: #fff;
  transition:
    background-color 0.7s ease,
    border-color 0.7s ease,
    box-shadow 0.7s ease;
}

.review__body {
  flex: 1;
}

.review__text {
  font-size: 16px;
  line-height: 28px;
  font-weight: 300;
  color: var(--ink-muted);
  transition: color 0.7s ease;
}

.review__footer {
  display: flex;
  align-items: center;
  gap: 12px;
}

.review__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--brand-700);
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  transition: background-color 0.7s ease;
}

.review__meta {
  min-width: 0;
}

.review__author {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  line-height: 24px;
  font-weight: 500;
  color: var(--ink);
  transition: color 0.7s ease;
}

.review .stars svg {
  width: 16px;
  height: 16px;
}

/* O card da frente acende. A transição é longa de propósito: como ele muda
   junto com o deslize, um corte seco chamaria mais atenção que o movimento. */
/* Duas camadas rasas em vez de uma funda: a de perto assenta o card e a de
   longe dá a profundidade, sem a mancha densa que a sombra única deixava. */
.review--ativo {
  border-color: transparent;
  background: var(--brand-900);
  box-shadow:
    0 2px 6px rgb(3 50 35 / 0.06),
    0 10px 26px rgb(3 50 35 / 0.09);
}

.review--ativo .review__text {
  color: rgb(255 255 255 / 0.82);
}

.review--ativo .review__author {
  color: #fff;
}

.review--ativo .review__avatar {
  background: var(--brand-600);
}

/* --------------------- Progresso e controles ----------------------------- */
.reviews__controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Sem cursor no celular a seta não serve para nada — ali se passa com o dedo,
   e os dois carrosséis já escutam o arraste. */
.reviews__controls {
  display: none;
}

@media (min-width: 768px) {
  /* Título à esquerda e setas à direita. O align-self: end encosta as setas
     na base da linha do título, logo acima dos cards: presas no topo elas
     ficavam a mais de 250px de distância, porque a linha tem a altura do
     título com subtítulo e selo. */
  .reviews__inner {
    grid-template-columns: 1fr auto;
    gap: 36px 24px;
  }

  .reviews__head {
    grid-column: 1;
  }

  .reviews__controls {
    display: flex;
    grid-column: 2;
    align-self: end;
    justify-self: end;
  }

  .reviews__carousel {
    grid-column: 1 / -1;
  }
}

@media (min-width: 768px) {
  .reviews {
    padding-block: 64px;
  }

  .reviews__mark {
    width: 56px;
    height: 42px;
  }
}

@media (min-width: 1024px) {
  .review__text {
    font-size: 17px;
  }
}


/* ============================ 3. Botões extras ============================
   Variante usada só sobre fundo escuro (hero e fecho). É a mesma mecânica do
   .btn--outline do global.css, com as cores invertidas.
   ========================================================================== */
.btn--ghost-light {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: transparent;
  border: 1px solid rgb(255 255 255 / 0.65);
  color: #fff;
}

.btn--ghost-light::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: #fff;
  transform: scale(0);
  transition: transform 0.35s var(--ease-out-soft);
}

.btn--ghost-light:focus-visible {
  border-color: #fff;
  color: var(--brand-900);
}

.btn--ghost-light:focus-visible::before {
  transform: scale(1);
}

@media (hover: hover) and (pointer: fine) {
  .btn--ghost-light:hover {
    border-color: #fff;
    color: var(--brand-900);
  }

  .btn--ghost-light:hover::before {
    transform: scale(1);
  }
}

.btn--ghost-light:active::before {
  background: #e8f1e5;
}

/* =============================== 4. Hero ==================================
   Mesma construção da hero da página inicial, com a fotografia no lugar do
   vídeo: as medidas do texto, os tamanhos de fonte, o respiro entre os blocos
   e o véu são os de lá, para as duas dobras de abertura do site serem a mesma
   peça.

   O véu é preto e perde opacidade da esquerda para a direita, terminando em
   zero: o texto branco ganha contraste no lado esquerdo e a tela do notebook
   aparece limpa no direito.
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 560px;
  padding-top: 80px;
  overflow: hidden;
  /* Cor de espera enquanto a foto carrega, para o texto branco nunca ficar
     sobre fundo claro */
  background: #0c1512;
}

.hero__image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* No celular o corte puxa para a mesa e para quem digita, onde o fundo é
     calmo; do tablet para cima volta para o centro, com a tela à direita. */
  object-position: 40% 50%;
  pointer-events: none;
}

.hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgb(0 0 0 / 0.88) 0%,
    rgb(0 0 0 / 0.72) 28%,
    rgb(0 0 0 / 0.45) 55%,
    rgb(0 0 0 / 0.12) 80%,
    rgb(0 0 0 / 0) 100%
  );
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  padding-block: 64px;
}

.hero__title {
  max-width: 870px;
  font-size: 32px;
  line-height: 1.125;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
}

/* 16px, como os subtítulos das outras dobras, e branco a 78%: sobre a foto,
   o branco puro em corpo de texto brigava com o título logo acima. */
.hero__lead {
  max-width: 568px;
  margin-top: -16px;
  font-size: 16px;
  line-height: 26px;
  font-weight: 300;
  color: rgb(255 255 255 / 0.78);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

@media (min-width: 768px) {
  .hero {
    min-height: 640px;
  }

  .hero__image {
    object-position: 58% 50%;
  }

  .hero__title {
    font-size: 48px;
  }

  /* Cada span numa linha: a frase do título nunca passa de duas */
  .hero__linha {
    display: block;
  }
}

@media (min-width: 1280px) {
  .hero {
    height: 700px;
  }

  .hero__title {
    font-size: 64px;
  }
}

/* ==================== 4b. A hero que fica e é coberta ======================
   Em vez de a hero subir junto com a página, ela fica presa no topo e o resto
   do site sobe por cima dela. Quem faz isso é o `position: sticky` — nenhuma
   linha de JavaScript: a rolagem continua sendo a do navegador, então o
   movimento é o mais fluido possível e não trava em nenhum aparelho.

   Três cuidados:

     1. o bloco que sobe precisa ser opaco, senão a hero aparece através dele;
     2. a sombra na borda de cima é o que faz o bloco parecer solto, subindo
        por cima, e não apenas emendado na dobra anterior;
     3. a hero só gruda quando cabe inteira na tela. Numa janela mais baixa
        que ela, grudar no topo esconderia para sempre a parte de baixo —
        inclusive o botão. Aí a página volta a rolar do jeito comum.
   ========================================================================== */
/* A altura da hero em cada faixa, só para a conta do sticky abaixo. Não é ela
   que define o tamanho da dobra — isso continua no bloco 4. */
.hero {
  --hero-altura: 620px;
  position: sticky;
  /* Quando a hero cabe na janela, ela gruda no topo (o min escolhe o 0).
     Quando a janela é mais baixa que ela — a maioria dos notebooks —, o valor
     fica negativo e ela gruda pela BASE: sobe só o que falta e para com o pé
     na borda de baixo da tela, então nada dela fica inalcançável.
     A linha "top: 0" antes dela é a rede para navegadores sem svh ou sem
     min(): eles ignoram a segunda e ficam com o comportamento simples. */
  top: 0;
  top: min(0px, calc(100svh - var(--hero-altura)));
}

@media (min-width: 768px) {
  .hero {
    --hero-altura: 640px;
  }
}

@media (min-width: 1280px) {
  .hero {
    --hero-altura: 700px;
  }
}

.apos-hero {
  position: relative;
  z-index: 1;
  background: var(--surface);
  box-shadow: 0 -20px 50px rgb(3 50 35 / 0.22);
}

/* ------------------- A fotografia se aproxima ao rolar ---------------------
   Enquanto o bloco de baixo sobe por cima da hero, a foto cresce um pouco.
   São os dois lados do mesmo movimento: a página avança e a imagem recua.

   Continua sem JavaScript. Quem governa a animação é a própria barra de
   rolagem (`animation-timeline: scroll()`): o navegador roda isso fora da
   linha principal, então não há listener de scroll nem risco de travar.

   O `@supports` não é enfeite. Sem ele, um navegador que não conhece
   `animation-timeline` leria só o `animation` — uma animação sem duração,
   que salta direto para o fim e deixa a foto ampliada desde o começo. Com o
   `@supports`, quem não entende simplesmente fica com a foto parada.

   O `transform-origin` acompanha o `object-position` de cada faixa: assim a
   aproximação empurra a imagem a partir do ponto que já estava em foco, em vez
   de puxar a composição para o meio.
   -------------------------------------------------------------------------- */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes hero-aproximar {
      to {
        transform: scale(1.12);
      }
    }

    .hero__image {
      transform-origin: 40% 50%;
      animation: hero-aproximar linear both;
      animation-timeline: scroll(root block);
      /* Começa no primeiro pixel de rolagem e termina quando o bloco de baixo
         já cobriu a hero inteira. Depois disso ela não está mais à vista. */
      animation-range: 0 var(--hero-altura);
      will-change: transform;
    }

    @media (min-width: 768px) {
      .hero__image {
        transform-origin: 58% 50%;
      }
    }
  }
}

/* Com movimento reduzido ligado no sistema, a página rola do jeito comum */
@media (prefers-reduced-motion: reduce) {
  .hero {
    position: relative;
  }

  .apos-hero {
    box-shadow: none;
  }
}

/* ========================= 5. A declaração ================================
   Uma frase só, em dois tons, com quem opera ao lado. É a dobra que responde
   "o que é isso" antes de a página pedir qualquer coisa.
   ========================================================================== */
.statement {
  padding-block: 64px 0;
}

.statement__inner {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.statement__aside {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Pilha de círculos, como a das fotos que estavam aqui antes: cada um monta um
   pouco sobre o anterior, com a borda da cor da página separando os dois.

   O fundo é o verde escuro da marca porque as logos vêm da faixa de clientes
   da home, onde são brancas sobre preto — num círculo claro elas sumiriam.
   Todas ocupam o mesmo quadrado de 48px e são contidas dentro dele, então
   nenhuma fica maior que a outra, seja qual for o arquivo. */
.statement__logos {
  display: flex;
  align-items: center;
  padding: 0;
  list-style: none;
}

.statement__logos li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  padding: 10px;
  border-radius: 999px;
  border: 2px solid var(--surface);
  background: var(--brand-900);
}

.statement__logos li + li {
  margin-left: -14px;
}

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

.statement__badge {
  display: flex;
  flex-direction: column;
}

.statement__badge-valor {
  font-size: 22px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--brand-850);
}

.statement__badge-rotulo {
  max-width: 22ch;
  font-size: 13px;
  line-height: 19px;
  font-weight: 300;
  color: var(--ink-muted);
}

.statement__text {
  font-size: clamp(22px, 3.2vw, 34px);
  line-height: 1.28;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--brand-850);
  text-wrap: pretty;
}

.statement__muted {
  color: var(--ink-muted);
  font-weight: 300;
}

/* ------------- A frase que acende conforme a pessoa desce ---------------
   Quem quebra a frase em palavras e acende uma a uma é o js/script.js; aqui
   só existe o antes e o depois. A classe .is-animando é ligada por ele, e é
   ela que apaga as palavras — sem JavaScript ou com movimento reduzido, a
   frase nasce inteira e legível. */
.statement__text .palavra {
  transition: opacity 0.3s linear;
}

.statement__text.is-animando .palavra {
  opacity: 0.16;
}

.statement__text.is-animando .palavra.is-acesa {
  opacity: 1;
}

@media (min-width: 1024px) {
  .statement {
    padding-block: 96px 0;
  }
}

/* As duas colunas só a partir de 1200px: num notebook de 1024 a frase ficava
   com metade da largura e passava de seis linhas. Até lá, ela ocupa a dobra
   inteira e a assinatura fica acima. */
@media (min-width: 1200px) {
  /* A coluna da esquerda fica estreita: a frase é a protagonista */
  .statement__inner {
    flex-direction: row;
    align-items: flex-start;
    gap: 56px;
  }

  /* Largura fixa: com "auto", a fileira de logos esticava a coluna e roubava
     uma linha inteira da frase ao lado. */
  .statement__aside {
    flex: 0 0 248px;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding-top: 10px;
  }
}

/* ------------------------- Os três diferenciais -------------------------- */
.feats {
  display: grid;
  gap: 24px;
  margin-top: 48px;
  padding: 0;
  list-style: none;
}

/* Cada coluna tem o seu filete no topo, em vez de um só atravessando as três:
   é o que faz as colunas lerem como uma fileira alinhada, e não como três
   blocos de texto soltos embaixo de uma linha. */
.feat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.feat__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 6px;
  border-radius: 999px;
  /* Círculo verde cheio, no mesmo verde do botão primário, com o desenho em
     branco por cima: assim os três leem como uma fileira só, e não como três
     contornos soltos. A borda acompanha o fundo para a medida não mudar. */
  background: var(--brand-700);
  border: 1px solid var(--brand-700);
  color: #fff;
}

.feat__icone svg {
  width: 28px;
  height: 28px;
}

/* ------------------- Os três ícones ganham vida ---------------------------
   Um gesto por ícone, cada um dizendo o que o texto ao lado diz: o olho
   pisca, o ponteiro do relógio dá a volta e o colega do time entra
   desenhando.

   O que dispara muda conforme o aparelho, e é por isso que há dois blocos
   iguais no fim deste trecho:

     - onde existe mouse, o gesto nasce do `:hover` da coluna inteira. Não é
       do círculo de 56px: quem leva o mouse até ali está lendo o bloco, não
       mirando no ícone.

     - onde não existe, o `js/script.js` marca a coluna com `.is-avistado`
       quando ela entra na tela, e o gesto acontece ao rolar. Usar `:hover`
       no toque deixaria o estado grudado até tocarem em outro lugar — foi o
       que já tinha acontecido no botão "Sou cliente" da home.

   As duas condições são exatamente complementares (`hover: hover` e
   `pointer: fine` de um lado; `hover: none` ou `pointer: coarse` do outro),
   então nenhum aparelho fica sem gesto nem recebe os dois.

   A animação nasce do gatilho, sem estado parado no repouso: assim ela
   recomeça a cada vez e não deixa resíduo quando acaba.

   As transformações são em unidades do viewBox (`transform-box: view-box`),
   e não em pixels da tela: o centro do desenho é 12 12 em qualquer tamanho.
   -------------------------------------------------------------------------- */
.feat__olho,
.feat__ponteiros {
  transform-box: view-box;
  transform-origin: 12px 12px;
}

.feat__cabeca {
  transform-box: view-box;
  transform-origin: 9px 7px;
}

/* O traço do colega mede pouco mais de 7 unidades. Com o tracejado em 12, o
   desenho aparece inteiro no deslocamento 0 e some por completo no 12 — é o
   que permite animar só o deslocamento, sem tocar no resto. */
.feat__colega {
  stroke-dasharray: 12;
}

/* Uma piscada só, com forma. Eram duas em menos de um segundo, e é daí que
   vinha a dureza: cada volta ao aberto no meio do caminho era uma parada
   seca. Aqui o movimento tem quatro tempos e cada um com a sua curva:

     fecha acelerando  ->  segura fechado um instante  ->  abre desacelerando
     ->  passa um fio do aberto e assenta.

   O tempo parado em 34% é o que faz isso ler como piscar, e não como um
   tique. E o 1.04 no fim é o respiro que tira o ar de mecânico: a pálpebra
   não trava no aberto, ela chega e acomoda. */
@keyframes feat-piscar {
  0% {
    transform: scaleY(1);
    animation-timing-function: cubic-bezier(0.4, 0, 0.9, 0.5);
  }
  28% {
    transform: scaleY(0.05);
    animation-timing-function: linear;
  }
  34% {
    transform: scaleY(0.05);
    animation-timing-function: cubic-bezier(0.16, 0.9, 0.3, 1);
  }
  72% {
    transform: scaleY(1.04);
    animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1);
  }
  100% {
    transform: scaleY(1);
  }
}

/* A volta sai devagar, ganha velocidade no meio e chega ao 12 desacelerando
   por muito tempo. A curva longa na saída é de propósito: rotação em
   velocidade constante vira ícone de carregamento, e é a chegada lenta que
   faz o movimento ter começo e fim em vez de só rodar. */
@keyframes feat-girar {
  to {
    transform: rotate(360deg);
  }
}

@keyframes feat-entrar {
  from {
    stroke-dashoffset: 12;
    opacity: 0;
  }
  to {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

@keyframes feat-acenar {
  0%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-1px);
  }
}

/* -- Com mouse: o gesto nasce ao passar por cima -- */
@media (hover: hover) and (pointer: fine) {
  .feat:hover .feat__olho {
    animation: feat-piscar 1s;
  }

  .feat:hover .feat__ponteiros {
    animation: feat-girar 1.25s cubic-bezier(0.52, 0.02, 0.24, 1);
  }

  .feat:hover .feat__colega {
    animation: feat-entrar 0.7s ease-out;
  }

  .feat:hover .feat__cabeca {
    animation: feat-acenar 0.7s ease-in-out;
  }
}

/* -- Sem mouse: o gesto nasce quando a coluna aparece na tela -- */
@media (hover: none), (pointer: coarse) {
  .feat.is-avistado .feat__olho {
    animation: feat-piscar 1s;
  }

  .feat.is-avistado .feat__ponteiros {
    animation: feat-girar 1.25s cubic-bezier(0.52, 0.02, 0.24, 1);
  }

  .feat.is-avistado .feat__colega {
    animation: feat-entrar 0.7s ease-out;
  }

  .feat.is-avistado .feat__cabeca {
    animation: feat-acenar 0.7s ease-in-out;
  }
}

/* Com movimento reduzido ligado no sistema, os ícones ficam parados */
@media (prefers-reduced-motion: reduce) {
  .feat__olho,
  .feat__ponteiros,
  .feat__colega,
  .feat__cabeca {
    animation: none !important;
  }
}

.feat__titulo {
  font-size: 17px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--brand-850);
}

.feat__texto {
  font-size: 15px;
  line-height: 24px;
  font-weight: 300;
  color: var(--ink-muted);
}

@media (min-width: 768px) {
  .feats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    margin-top: 72px;
  }
}

/* ========================= 5b. A chamada do meio ==========================
   Faixa entre a apresentação do serviço e a lista do que ele cobre: um botão
   só, entre dois filetes. Tinha título e linha de apoio, e os dois saíram —
   quem chega aqui acabou de ler os três diferenciais e já sabe o que a página
   oferece; repetir a pergunta só adiava o botão.

   O botão pertence à dobra de cima: ele é a saída de quem se convenceu pelos
   três diferenciais. Por isso o espaço acima é menor que o abaixo, e não o
   contrário — a proximidade é o que diz a quem pertence.

   A conta vem de dois lugares, e é fácil errar olhando só um: o espaço acima
   é o padding da seção mais o da faixa; o abaixo é só o da faixa, porque a
   dobra de baixo começa com fundo próprio e o respiro dela fica do lado de
   dentro do escuro. Daí o padding-bottom aqui, que antes não existia.

   Medido com o bloco já em repouso: 35px acima e 73px abaixo no computador,
   27 e 57 no celular — a mesma proporção de 1 para 2 nos dois. Medir antes da
   entrada do bloco dá número errado, porque o [data-reveal] ainda mantém uns
   36px de deslocamento e eles entram na conta.
   ========================================================================== */
.cta-meio {
  padding-top: 24px;
  padding-bottom: 32px;
}

.cta-meio__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: 24px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}

@media (min-width: 1024px) {
  .cta-meio {
    padding-top: 32px;
    padding-bottom: 48px;
  }
}

/* ====================== 6. O que sai da sua rotina ========================
   Seis frentes sobre uma fotografia, em cartões de vidro. É a única dobra
   escura do meio da página: serve de respiro entre dois blocos claros e
   separa o "o que é" do "como funciona".

   Construção igual à da hero — foto ao fundo, véu por cima, conteúdo acima
   dos dois — e o carrossel é o mesmo mecanismo da dobra de depoimentos: uma
   janela que recorta e um trilho que anda por transform.
   ========================================================================== */
.scope {
  position: relative;
  isolation: isolate;
  padding-block: 64px;
  overflow: hidden;
  /* Cor de espera enquanto a foto carrega, para o texto branco nunca cair
     sobre fundo claro. */
  background: #04241a;
}

.scope__fundo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Quem fala é o assunto da foto, e ela estava caindo atrás dos cartões. O
     corte sobe para trazer o rosto dela para a faixa entre o subtítulo e o
     primeiro cartão, que é a única parte da dobra sem nada por cima. */
  object-position: 46% 26%;
  pointer-events: none;
}

/* O véu é verde por cima e preto embaixo, e não preto puro: o verde amarra a
   dobra ao resto da marca, e o preto no pé é o que segura o contraste dos
   cartões, que ficam justamente ali.

   As opacidades não foram escolhidas no olho: compus a foto, o véu e o vidro
   num canvas e medi o contraste real de cada texto. A primeira tentativa
   passava com folga mas apagava a fotografia — o véu somava 88% e a dobra
   virava um verde chapado. Clareando o véu para ver a foto, o subtítulo caiu
   para 4,27:1, abaixo do mínimo, e a saída foi compensar onde o problema
   estava: mais opacidade no texto e no vidro do cartão, não no véu.

   Como ficou: 5,4:1 no título da dobra, 4,8:1 no subtítulo, 6,4:1 no título
   do cartão e 6,1:1 no corpo — todos acima dos 4,5:1 da WCAG, com a foto à
   vista. */
.scope__veu {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      180deg,
      rgb(3 54 37 / 0.7) 0%,
      rgb(3 54 37 / 0.58) 42%,
      rgb(2 20 14 / 0.74) 100%
    ),
    linear-gradient(90deg, rgb(0 0 0 / 0.2) 0%, rgb(0 0 0 / 0) 55%, rgb(0 0 0 / 0.16) 100%);
}

/* Largura em px, não em ch: o ch se mede pela fonte do próprio elemento, e
   aqui ela é a do corpo — 34ch davam 272px, e o título de 48px quebrava em
   quatro linhas dentro deles. */
.scope__head {
  max-width: 540px;
  margin-bottom: 32px;
  /* Sem isto o cabeçalho, que é flex, não deixaria o título encolher e o topo
     estouraria a largura quando as setas entram ao lado. */
  min-width: 0;
}

.scope .section-head__title {
  color: #fff;
}

/* Mais claro que o subtitulo das dobras brancas (0,76): aqui ele cai sobre a
   parte mais clara do veu, e a 0,76 media 4,27:1 — abaixo do minimo. */
.scope .section-head__subtitle {
  color: rgb(255 255 255 / 0.88);
}

.scope__topo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

/* As setas só aparecem onde há espaço; no celular quem manda é o dedo. */
.scope__setas {
  display: none;
  flex: 0 0 auto;
  gap: 8px;
  margin-bottom: 32px;
}

/* Sobre a fotografia a seta clara é a única que se lê. O preenchimento que
   cresce no hover continua o mesmo gesto, só que em branco. */
.scope__setas .round-btn {
  border-color: rgb(255 255 255 / 0.42);
  color: #fff;
}

.scope__setas .round-btn::before {
  background: #fff;
}

.scope__setas .round-btn:hover,
.scope__setas .round-btn:focus-visible {
  color: var(--brand-850);
  border-color: #fff;
}

.scope__setas .round-btn:active::before {
  background: rgb(255 255 255 / 0.86);
}

/* ------------------------- A janela e o trilho ---------------------------
   O trilho anda em porcentagem da própria largura: um passo é 100% dividido
   pelo número de cartões, qualquer que seja quantos apareçam por vez. É por
   isso que não há conta em pixels no JavaScript e nada precisa ser refeito ao
   virar o telefone.

   O vão entre cartões é o `padding` da célula, não `gap` do trilho: com gap,
   a largura de um passo deixaria de ser uma fração exata do trilho e o
   deslocamento sairia torto card a card.
   -------------------------------------------------------------------------- */
.scope__janela {
  overflow: hidden;
  /* Folga para a sombra do cartão não ser cortada pela borda da janela. */
  margin: 0 -8px;
  /* O corte na borda do recorte é seco: o cartão simplesmente acaba. A
     máscara desmancha os últimos 40px, e aí a fileira parece continuar para
     fora da tela em vez de bater numa parede.

     As variáveis trocam de valor pelas classes que o script põe: do lado onde
     não há mais cartão o esmaecido é zero, senão a primeira e a última
     posição perderiam a borda do cartão sem motivo.

     É máscara, e não um degradê por cima: o que está atrás é uma fotografia,
     então não existe cor sólida com que fazer o disfarce. */
  --esmaece-antes: 0px;
  --esmaece-depois: 0px;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 var(--esmaece-antes),
    #000 calc(100% - var(--esmaece-depois)),
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 var(--esmaece-antes),
    #000 calc(100% - var(--esmaece-depois)),
    transparent 100%
  );
}

.scope__janela.tem-antes {
  --esmaece-antes: 40px;
}

.scope__janela.tem-depois {
  --esmaece-depois: 40px;
}

.scope__trilho {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  transform: translate3d(var(--scope-shift, 0%), 0, 0);
  transition: transform 0.8s var(--ease-carousel);
  will-change: transform;
}

/* 86%, e não 100%: a tira do cartão seguinte é o que conta, antes de
   qualquer ponto ou seta, que a fileira continua. Do tablet para cima os
   cartões dividem a largura em partes exatas e a espia sai de cena. */
.scope__cela {
  flex: 0 0 86%;
  display: flex;
  padding: 8px;
}

.scope__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 28px 24px;
  border-radius: var(--r-xl);
  /* Vidro: o fundo é o que atravessa, e o `backdrop-filter` é o que o embaça.
     A borda clara no topo é o que dá a impressão de espessura — sem ela o
     cartão parece um retângulo de tinta, não uma placa. */
  border: 1px solid rgb(255 255 255 / 0.22);
  background: rgb(3 40 29 / 0.44);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16);
  transition:
    border-color 0.3s ease,
    background-color 0.3s ease,
    transform 0.3s var(--ease-out-soft);
}

/* Onde o `backdrop-filter` não existe, o cartão ficaria quase transparente
   sobre a foto e o texto sumiria. Aí ele vira vidro fosco de tinta mesmo. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .scope__item {
    background: rgb(4 36 26 / 0.66);
  }
}

@media (hover: hover) and (pointer: fine) {
  .scope__item:hover {
    border-color: rgb(255 255 255 / 0.4);
    background: rgb(3 40 29 / 0.54);
    transform: translateY(-2px);
  }
}

.scope__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 6px;
  border-radius: var(--r-md);
  background: rgb(255 255 255 / 0.16);
  color: #fff;
}

.scope__icone svg {
  width: 20px;
  height: 20px;
}

.scope__titulo {
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
}

.scope__texto {
  font-size: 15px;
  line-height: 24px;
  font-weight: 300;
  color: rgb(255 255 255 / 0.85);
}

/* ---------------------------- Os pontos ----------------------------------- */
.scope__pontos {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}

.scope__ponto {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.34);
  cursor: pointer;
  transition:
    width 0.3s var(--ease-out-soft),
    background-color 0.3s ease;
}

/* O ativo vira um traço em vez de só mudar de cor: a forma se lê antes da
   cor, e quem enxerga pouco contraste continua sabendo onde está. */
.scope__ponto[aria-current="true"] {
  width: 24px;
  background: #fff;
}

@media (min-width: 640px) {
  .scope__cela {
    flex-basis: 50%;
  }
}

@media (min-width: 1024px) {
  .scope {
    padding-block: 96px;
  }

  .scope__head {
    margin-bottom: 40px;
  }

  .scope__setas {
    display: flex;
  }

  .scope__cela {
    flex-basis: 33.3333%;
    padding: 10px;
  }

  .scope__janela {
    margin: 0 -10px;
  }

  .scope__item {
    padding: 32px 28px;
  }
}

/* ========================== 7. Como a troca acontece =======================
   Faixa verde de ponta a ponta com duas colunas: à esquerda o título e a lista
   de etapas, à direita o espaço reservado para a imagem.

   A lista abre uma etapa por vez. A aberta vira um cartão claro com o texto
   dentro; as fechadas são só número, nome e seta, separadas por um filete —
   é o desenho da referência. Quem anima a altura é o js/script.js; sem ele,
   todas as etapas ficam abertas e a dobra continua inteira.
   ========================================================================== */
.steps {
  /* Uma curva só para tudo que se mexe nesta dobra: a altura do painel, o
     fundo do cartão, o texto que desce e a seta. Quando cada peça usa uma
     curva diferente, a troca de etapa parece um monte de coisinhas mexendo
     em tempos distintos em vez de um movimento só. */
  --curva-etapa: cubic-bezier(0.22, 0.61, 0.24, 1);
  --tempo-etapa: 0.52s;
  padding-block: 64px;
  background: var(--brand-900);
}

.steps__grid {
  display: grid;
  gap: 40px;
}

.steps__head {
  max-width: 560px;
  margin-bottom: 40px;
}

.steps__lista {
  display: flex;
  flex-direction: column;
  padding: 0;
  list-style: none;
}

/* --------------------------- Cada etapa ---------------------------------- */
.step {
  border-top: 1px solid rgb(255 255 255 / 0.16);
  border-radius: var(--r-lg);
  transition:
    background-color var(--tempo-etapa) var(--curva-etapa),
    border-color var(--tempo-etapa) var(--curva-etapa);
}

/* A aberta vira cartão: ganha fundo e perde o filete, que passaria por dentro
   da caixa. A seguinte também perde o dela, senão sobraria uma linha colada na
   base do cartão. */
.step.is-aberta,
.step.is-aberta + .step {
  border-top-color: transparent;
}

.step.is-aberta {
  background: rgb(255 255 255 / 0.07);
}

.step__cabeca {
  margin: 0;
}

.step__botao {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 22px 20px;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
}

.step__num {
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--brand-200);
}

.step__nome {
  transition: transform 0.35s var(--curva-etapa);
  font-size: 18px;
  line-height: 26px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #fff;
}

.step__seta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 999px;
  color: rgb(255 255 255 / 0.7);
  transition:
    background-color var(--tempo-etapa) var(--curva-etapa),
    color var(--tempo-etapa) var(--curva-etapa),
    transform var(--tempo-etapa) var(--curva-etapa);
}

.step__seta svg {
  width: 18px;
  height: 18px;
}

.step.is-aberta .step__seta {
  background: var(--brand-200);
  color: var(--brand-900);
  transform: rotate(45deg);
}

/* ------------------------- O convite do hover --------------------------
   Passar o mouse numa etapa fechada mostra o que vai acontecer se clicar:
   o cartão acende, o nome dá um passo para dentro e a seta se acende e gira
   até a posição em que ela fica quando a etapa está aberta. Nada muda de
   tamanho, então passar o mouse por cima da lista não empurra as linhas.
   ------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .step:not(.is-aberta):hover {
    background: rgb(255 255 255 / 0.05);
  }

  .step:not(.is-aberta):hover .step__nome {
    transform: translateX(5px);
  }

  .step:not(.is-aberta):hover .step__seta {
    background: rgb(255 255 255 / 0.14);
    color: #fff;
    transform: rotate(45deg);
  }

  .step.is-aberta .step__botao:hover .step__seta {
    color: var(--brand-900);
  }
}

.step__botao:focus-visible {
  outline: 2px solid var(--brand-200);
  outline-offset: -4px;
  border-radius: var(--r-lg);
}

/* O painel é medido pelo script para animar a altura; o overflow escondido é
   o que permite isso sem o texto vazar durante o movimento. */
.step__painel {
  overflow: hidden;
}

.step__painel[hidden] {
  display: none;
}

.step__painel.is-animando {
  transition:
    height var(--tempo-etapa) var(--curva-etapa),
    opacity calc(var(--tempo-etapa) * 0.7) ease;
}

/* O texto desce junto com a caixa que abre, em vez de aparecer parado dentro
   dela. É o que dá a sensação de uma coisa só se abrindo. */
.step__texto {
  transform: translateY(-10px);
  transition: transform var(--tempo-etapa) var(--curva-etapa);
  max-width: 46ch;
  padding: 0 20px 24px 49px;
  font-size: 15px;
  line-height: 25px;
  font-weight: 300;
  color: var(--ink-soft);
}

.step.is-aberta .step__texto {
  transform: translateY(0);
}

/* A coluna da imagem ainda não existe: ela só reserva o lugar no computador,
   e no celular nem ocupa espaço. */
.steps__media {
  display: none;
}

@media (min-width: 1024px) {
  .steps {
    padding-block: 96px;
  }

  .steps__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    gap: 64px;
    align-items: start;
  }

  .steps__media {
    display: block;
    align-self: stretch;
    min-height: 100%;
  }
}

/* ============================== 8. Fecho ==================================
   Cartão do fecho comercial, com o fundo em movimento da apresentação: um
   brilho verde que atravessa a caixa por trás de um ripado de lâminas finas.

   O desenho das camadas está logo abaixo, junto das regras. Aqui só o
   resumo: o cartão dá o verde escuro de base, o brilho e as lâminas se mexem
   por cima dele e um véu escuro no meio segura a leitura do texto.

   É feito em CSS, e não com um GIF: são poucos bytes, não tem banda de cor
   nem serrilhado, acompanha qualquer largura de tela e para sozinho para quem
   pede menos movimento no sistema.
   ========================================================================== */
.closing {
  padding-block: 64px;
}

.closing__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 40px 28px;
  border-radius: var(--r-2xl);
  background: #03241a;
  color: #fff;
  text-align: center;
}

/* --------------------------- O fundo em movimento ------------------------
   Três camadas, todas recortadas pelo cartão:

     ::before          o brilho verde. Atravessa a caixa e respira de escala;
     .closing__ripado  as lâminas verticais. Andam exatamente um período do
                       desenho (8px) e voltam ao começo, então o laço é
                       invisível e o que se vê é a luz correndo entre elas;
     ::after           o véu escuro do meio, parado, que segura a leitura do
                       texto branco por cima do ponto mais claro.

   As duas que se mexem andam só de transform, que fica na placa de vídeo: o
   navegador não repinta nada a cada quadro. Os tempos são diferentes (15s e
   5s) de propósito — como não fecham juntos, o fundo nunca repete o mesmo
   quadro na mesma posição e não vira um laço que o olho decora.
   ----------------------------------------------------------------------- */
.closing__card::before {
  content: "";
  position: absolute;
  inset: -25%;
  z-index: -3;
  background:
    radial-gradient(34% 120% at 74% 50%, #d6f9c6 0%, #7fe39c 14%, #1fa262 36%, rgb(3 36 26 / 0) 66%),
    radial-gradient(26% 100% at 14% 50%, #23a768 0%, rgb(3 36 26 / 0) 60%);
  will-change: transform;
  animation: fecho-brilho 15s ease-in-out infinite;
}

.closing__ripado {
  position: absolute;
  inset: 0 -16px;
  z-index: -2;
  background: repeating-linear-gradient(
    90deg,
    rgb(2 18 12 / 0.58) 0px,
    rgb(2 18 12 / 0.58) 1px,
    rgb(2 18 12 / 0.1) 1px,
    rgb(2 18 12 / 0.1) 4px,
    rgb(255 255 255 / 0.07) 4px,
    rgb(255 255 255 / 0.07) 5px,
    rgb(2 18 12 / 0.1) 5px,
    rgb(2 18 12 / 0.1) 8px
  );
  will-change: transform;
  animation: fecho-ripado 5s linear infinite;
}

.closing__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    72% 76% at 50% 50%,
    rgb(2 20 14 / 0.58) 0%,
    rgb(2 20 14 / 0.14) 62%,
    rgb(2 20 14 / 0) 100%
  );
}

@keyframes fecho-brilho {
  0% {
    transform: translate3d(-16%, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(16%, 0, 0) scale(1.18);
  }
  100% {
    transform: translate3d(-16%, 0, 0) scale(1);
  }
}

/* Anda um período inteiro do desenho e volta: a emenda não aparece */
@keyframes fecho-ripado {
  to {
    transform: translate3d(8px, 0, 0);
  }
}

/* Fora da tela o brilho para: quem liga e desliga é o js/script.js. */
.closing__card.is-parado::before,
.closing__card.is-parado .closing__ripado {
  animation-play-state: paused;
}

/* Quem pede menos movimento no sistema fica com o mesmo fundo, parado */
@media (prefers-reduced-motion: reduce) {
  .closing__card::before,
  .closing__ripado {
    animation: none;
  }
}

.closing__titulo {
  max-width: 20ch;
  font-size: clamp(26px, 3.6vw, 40px);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.closing__texto {
  max-width: 52ch;
  font-size: 16px;
  line-height: 26px;
  font-weight: 300;
  color: rgb(255 255 255 / 0.82);
}

.closing__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 12px;
}

@media (min-width: 768px) {
  .closing__card {
    padding: 64px 40px;
  }
}

@media (min-width: 1024px) {
  .closing {
    padding-block: 96px;
  }
}

/* ======================= 9. Ajustes do celular ============================
   Mesma regra do resto do site: abaixo de 768px o texto das dobras fica
   centralizado, porque numa coluna estreita o alinhamento à esquerda deixa a
   página desequilibrada.
   ========================================================================== */
@media (max-width: 767px) {
  /* Na coluna estreita o texto fica centralizado e cobre a foto inteira, não
     só a metade esquerda: aqui o véu fecha de cima a baixo, no mesmo preto. */
  .hero__veil {
    background: linear-gradient(
      180deg,
      rgb(0 0 0 / 0.72) 0%,
      rgb(0 0 0 / 0.58) 45%,
      rgb(0 0 0 / 0.8) 100%
    );
  }

  .hero__content {
    align-items: center;
    text-align: center;
  }

  .hero__title {
    font-size: 40px;
    line-height: 46px;
  }

  .hero__actions {
    justify-content: center;
  }

  .statement__inner,
  .statement__aside,
  .scope__head,
  .scope__item,
  .feat,
  .reviews__head {
    text-align: center;
  }

  .statement__inner,
  .statement__aside,
  .scope__head,
  .scope__item,
  .feat,
  .reviews__head {
    align-items: center;
  }

  /* A lista de etapas fica à esquerda mesmo no celular: são linhas com número
     de um lado e seta do outro, e centralizá-las quebraria a fileira. Só o
     cabeçalho da dobra acompanha o resto da página. */
  .steps__head {
    text-align: center;
  }

  /* As logos em cima e o número embaixo, os dois centrados: lado a lado
     numa coluna estreita, as logos quebravam em duas fileiras tortas. */
  .statement__aside {
    flex-direction: column;
    gap: 18px;
  }

  .statement__logos {
    justify-content: center;
  }

  .statement__badge,
  .feat__texto {
    align-items: center;
    max-width: 38ch;
  }

  .statement__badge-rotulo {
    max-width: none;
  }

  /* Depoimentos: o próximo card espia, igual à home */
  .reviews__viewport {
    width: calc(100% + var(--pad) * 2);
    margin-inline: calc(var(--pad) * -1);
    padding-left: var(--pad);
  }

  .reviews__item {
    flex-basis: 88%;
  }
}

/* ======================= 10. Movimento reduzido =========================== */
@media (prefers-reduced-motion: reduce) {
  .scope__item {
    transition: none;
    transform: none !important;
  }

  /* O trilho continua andando — e precisa andar, senao o carrossel para de
     funcionar —, so que de uma vez, sem o deslize. */
  .scope__trilho {
    transition: none;
  }
}