/* =============================================================================
   Grupo Axia — página inicial (home)

   Estilos EXCLUSIVOS desta página. Tudo que é comum ao site inteiro saiu
   daqui e vive em /assets/css/:

     global.css        tokens, reset, utilitários, botões, preloader
     navbar.css        header e menu do celular
     footer.css        rodapé
     support-card.css  card e barra de suporte (WhatsApp)
     cookies.css       aviso de cookies e central de preferências

   Este arquivo é o último a carregar, então um ajuste feito aqui vence o
   compartilhado. Use isso com parcimônia: se o ajuste vale para mais de uma
   página, o lugar dele é em /assets/css/.

   Sumário
     1. Títulos de seção                6.  Lideranças
     2. Carrosséis (pontos, setas,      7.  Serviços
        estrelas)                       8.  Depoimentos
     3. Hero                            9.  Power Up
     4. Clientes                        10. Blog
     5. Prova social                    11. Ajustes do celular
                                        12. Movimento reduzido
   ========================================================================== */

/* Títulos de seção */
.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;
}

.section-head__subtitle {
  font-size: 20px;
  line-height: 28px;
  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 */
.dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 12px é a largura que os pontinhos sempre tiveram na tela — antes ela vinha
   do padding do navegador, e a transição corria de 32px a 8px sem nunca
   chegar lá. Declarada, os dois pontinhos trocam de tamanho em espelho e a
   fileira mantém a largura, então as setas ao lado não se mexem. */
.dots button {
  position: relative;
  height: 8px;
  width: 12px;
  border-radius: 999px;
  background: var(--ink-soft);
  overflow: hidden;
  transition:
    width 0.45s var(--ease-out-soft),
    background-color 0.3s ease,
    transform 0.2s ease;
}

/* Inativo cresce um pouco ao passar o mouse */
.dots button:not([aria-current="true"]):hover {
  transform: scale(1.4);
  background: var(--brand-400);
}

/* Ativo vira pílula e recebe um brilho que atravessa uma vez */
.dots button[aria-current="true"] {
  width: 32px;
  background: var(--brand-900);
}

.dots button[aria-current="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgb(160 228 147 / 0.85), transparent);
  transform: translateX(-100%);
  animation: dot-shine 0.7s ease-out 0.15s;
}

@keyframes dot-shine {
  to {
    transform: translateX(100%);
  }
}

/* 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;
}

/* =============================== 7. Hero ================================== */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 560px;
  padding-top: 80px;
  overflow: hidden;
}

.hero__video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;
  pointer-events: none;
}

/* Véu mais escuro à esquerda, para destacar o texto */
.hero__overlay {
  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;
}

.hero__lead {
  max-width: 568px;
  margin-top: -16px;
  font-size: 20px;
  line-height: 28px;
  font-weight: 300;
  color: #fff;
}

@media (min-width: 768px) {
  .hero {
    min-height: 640px;
  }
  .hero__video {
    object-position: 70% 18%;
  }
  .hero__title {
    font-size: 48px;
  }
}

@media (min-width: 1280px) {
  .hero {
    height: 700px;
  }
  .hero__video {
    object-position: 70% 15%;
  }
  .hero__title {
    font-size: 64px;
  }
}

/* ============================= 7b. Clientes =============================== */
.clients {
  background: var(--surface-dark);
  padding-block: 56px;
}

.clients .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-block: 48px;
}

.marquee__track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 64px;
  /* o espaçamento também no fim: sem ele o ciclo emenda com um salto */
  padding-inline-end: 64px;
  animation: marquee 60s linear infinite;
}

/* A animação só vale depois que o JS duplica a lista (senão o -50% corta) */
.marquee__track:not([data-cloned="true"]) {
  animation: none;
  justify-content: center;
  width: 100%;
  flex-wrap: wrap;
  row-gap: 24px;
}

.marquee__track li {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}

.marquee__track img {
  max-height: 52px;
  object-fit: contain;
}

@keyframes marquee {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

.marquee__fade {
  position: absolute;
  inset-block: 0;
  width: 100px;
  pointer-events: none;
}

.marquee__fade--left {
  left: 0;
  background: linear-gradient(to right, var(--surface-dark), transparent);
}

.marquee__fade--right {
  right: 0;
  background: linear-gradient(to left, var(--surface-dark), transparent);
}

@media (min-width: 768px) {
  .marquee__fade {
    width: 160px;
  }
}

/* =========================== 8. Prova social ==============================
   Card recuado das laterais (o respiro de 120px vem do .container), com os
   quatro cantos arredondados. A faixa escura fica dentro do card, encostada
   na base.
   ========================================================================== */
.proof {
  padding-block: 48px;
}

.proof__card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 420px;
  overflow: hidden;
  border-radius: var(--r-xl);
}

.proof__image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 57% no eixo Y reproduz o enquadramento do Figma (valor medido) */
  object-position: 50% 57%;
}

.proof__bar {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 28px 24px;
  background: rgb(0 0 0 / 0.65);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}

.proof__stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.proof__stat {
  text-align: center;
}

.proof__value {
  font-size: 28px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}

.proof__label {
  font-size: 15px;
  line-height: 24px;
  font-weight: 300;
  white-space: nowrap;
  color: var(--ink-soft);
}

/* Divisória vertical só faz sentido com os números lado a lado */
.proof__divider {
  display: none;
  width: 2px;
  height: 48px;
  flex: 0 0 auto;
  background: var(--brand-200);
}

.proof__summary {
  max-width: 240px;
  font-size: 15px;
  line-height: 24px;
  font-weight: 300;
  text-align: center;
  color: #fff;
}

@media (min-width: 768px) {
  .proof__card {
    min-height: 480px;
  }

  .proof__value {
    font-size: 34px;
  }
}

@media (min-width: 1024px) {
  /* 567px = os 680px do Figma reduzidos na mesma proporção do card
     (1200 ÷ 1440), mantendo o enquadramento original */
  .proof__card {
    min-height: 567px;
  }

  .proof__bar {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 40px;
    padding: 32px 48px;
  }

  .proof__stats {
    gap: 40px;
  }

  .proof__divider {
    display: block;
  }

  .proof__value {
    font-size: 40px;
  }

  .proof__label,
  .proof__summary {
    font-size: 16px;
    line-height: 26px;
  }

  .proof__summary {
    text-align: left;
  }
}

/* ============================ 9. Lideranças =============================== */
.leaders {
  padding-block: 48px;
}

.leaders__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.leaders__aside {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  width: 100%;
  text-align: center;
}

/* ------------------------------ Texto ------------------------------------
   Ao trocar de liderança, uma máscara varre o bloco de cima para baixo: o
   texto vai surgindo linha a linha em vez de aparecer inteiro de uma vez.
   A cor em repouso é a mesma do restante do site (--ink).
   ------------------------------------------------------------------------ */
.leaders__bio {
  font-size: 16px;
  line-height: 28px;
  font-weight: 300;
  color: var(--ink);
}

.leaders__bio.is-filling {
  /* A máscara é 2,5× mais alta que o bloco: começa mostrando só a faixa
     transparente (texto oculto) e sobe até a faixa opaca cobrir tudo, de
     modo que o texto se revela de cima para baixo. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 36%, transparent 52%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 36%, transparent 52%, transparent 100%);
  -webkit-mask-size: 100% 250%;
  mask-size: 100% 250%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: bio-wipe 1.1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

@keyframes bio-wipe {
  from {
    -webkit-mask-position: 0 100%;
    mask-position: 0 100%;
  }
  to {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}

.leaders__controls {
  display: none;
  align-items: center;
  gap: 20px;
}

/* ----------------------------- Carrossel ---------------------------------
   Até 768px: os cards têm a mesma largura e a faixa desliza para centralizar
   o ativo. A partir daí vira acordeão — o card ativo abre para 384px e os
   outros fecham para 180px, com a foto sempre em 384px de largura para não
   esmagar durante a transição.
   ------------------------------------------------------------------------ */
.leaders__viewport {
  width: 100%;
  overflow: hidden;
}

.leaders__track {
  display: flex;
  gap: 16px;
  transform: translateX(var(--leader-shift, 0px));
  transition: transform 0.5s ease-in-out;
}

.leader-card {
  position: relative;
  flex: 0 0 auto;
  width: var(--leader-card-w, 300px);
  height: 480px;
  overflow: hidden;
  border-radius: var(--r-2xl);
  background: #000;
  cursor: pointer;
  opacity: 0.6;
  transition:
    width 0.5s ease-in-out,
    opacity 0.5s ease-in-out;
}

.leader-card.is-active {
  opacity: 1;
}

.leader-card__btn {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.leader-card__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Degradê do design: transparente até 60% e preto no fim */
.leader-card__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 60%, #000 100%);
}

.leader-card__info {
  position: absolute;
  bottom: 32px;
  left: 50%;
  display: flex;
  width: 100%;
  transform: translateX(-50%);
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding-inline: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.leader-card.is-active .leader-card__info {
  opacity: 1;
  transition-delay: 0.2s;
}

.leader-card__name {
  font-size: 16px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: -0.1px;
  color: #fff;
}

.leader-card__role {
  font-size: 14px;
  line-height: 24px;
  font-weight: 300;
  color: rgb(255 255 255 / 0.7);
}

.leader-card__name,
.leader-card__role {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leader-card__rule {
  width: 1px;
  height: 52px;
  flex: 0 0 auto;
  background: rgb(255 255 255 / 0.4);
}

.leader-card__linkedin {
  flex: 0 0 auto;
  color: #fff;
  transition: opacity 0.2s ease;
}

.leader-card.is-active .leader-card__linkedin {
  pointer-events: auto;
}

.leader-card__linkedin:hover {
  opacity: 0.8;
}

.leader-card__linkedin svg {
  width: 44px;
  height: 44px;
}

@media (min-width: 768px) {
  /* Acordeão: nada de deslizar, os cards abrem e fecham no lugar */
  .leaders__track {
    justify-content: center;
    gap: 24px;
    transform: none;
  }

  .leader-card {
    width: 180px;
    height: 580px;
    opacity: 1;
  }

  .leader-card.is-active {
    width: 384px;
  }

  /* A foto mantém 384px de largura e fica centralizada: ao fechar o card,
     ela é recortada em vez de espremida. */
  .leader-card__photo {
    position: absolute;
    inset-block: 0;
    left: 50%;
    width: 384px;
    max-width: none;
    margin-left: -192px;
  }

  .leader-card__info {
    gap: 24px;
  }

  .leader-card__name,
  .leader-card__role {
    font-size: 20px;
  }

  .leader-card__role {
    line-height: 28px;
  }

  .leader-card__linkedin svg {
    width: 48px;
    height: 48px;
  }
}

@media (min-width: 1280px) {
  .leaders {
    padding-block: 96px 60px;
  }

  .leaders__inner {
    flex-direction: row;
    align-items: flex-start;
    /* 80px, não 88: o acordeão precisa de 776px para os três cards e cada
       pixel deste vão sai da largura do carrossel. */
    gap: 80px;
  }

  .leaders__aside {
    height: 580px;
    width: 323px;
    align-items: flex-start;
    text-align: left;
  }

  .leaders__bio {
    font-size: 20px;
  }

  .leaders__controls {
    display: flex;
  }

  .leaders__viewport {
    width: 792px;
  }
}

/* ============================= 10. Serviços ===============================
   Faixa verde de ponta a ponta: o fundo sangra na largura toda da tela e só o
   conteúdo respeita o .container. Dentro, uma coluna por pilar, no formato da
   referência: filete, rótulo, foto em retrato e o texto com a abertura em
   destaque. As colunas se esticam em altura iguais, então os filetes de baixo
   ficam alinhados mesmo com textos de tamanhos diferentes.
   ========================================================================== */
.services {
  padding-block: 64px;
  background: var(--brand-900);
}

.services__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 40px;
}

.services__title {
  font-size: 28px;
  line-height: 1.167;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
}

.services__support {
  max-width: 60ch;
  font-size: 18px;
  line-height: 28px;
  font-weight: 300;
  color: rgb(255 255 255 / 0.8);
}

.services__grid {
  display: grid;
  gap: 24px;
}

/* ------------------------------ Pilar -----------------------------------
   Foto em cima, texto embaixo em fundo sólido. A seta fica sobre a foto. */
.pillar {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgb(160 228 147 / 0.18);
  border-radius: var(--r-lg);
  background: #021f15;
}

.pillar__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
}

.pillar__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* As fotos já saem quadradas, do mesmo formato do media: o cover não corta
     nada e o centro basta. */
  object-position: 50% 50%;
  /* Curva quase linear no miolo: sem o arranco do --ease-out-soft, o zoom
     escorre em vez de saltar. 3% é o bastante para perceber sem pesar. */
  transition: transform 1.1s cubic-bezier(0.32, 0.12, 0.2, 1);
  will-change: transform;
}

.pillar:hover .pillar__foto {
  transform: scale(1.03);
}

/* Fio branco no hover. Fica num ::before para não empurrar nada e para poder
   ser acionado também por classe, que é como o celular o usa. */
.pillar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border: 1px solid rgb(255 255 255 / 0);
  border-radius: inherit;
  pointer-events: none;
  transition: border-color 0.5s ease;
}

.pillar:hover::before {
  border-color: rgb(255 255 255 / 0.9);
}

.pillar__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
}

.pillar__title {
  font-size: 22px;
  line-height: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
}

.pillar__text {
  font-size: 14px;
  line-height: 22px;
  font-weight: 300;
  color: rgb(255 255 255 / 0.72);
}

/* Seta decorativa: sem destino definido, então não é um controle.
   O preenchimento no hover é o mesmo das setas dos carrosséis. */
.pillar__arrow {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid rgb(255 255 255 / 0.45);
  background: rgb(255 255 255 / 0.18);
  backdrop-filter: blur(6px);
  color: #fff;
  transition:
    color 0.3s ease,
    border-color 0.3s ease,
    transform 0.45s var(--ease-out-soft);
}

.pillar__arrow::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--brand-200);
  transform: scale(0);
  transition: transform 0.45s var(--ease-out-soft);
}

.pillar:hover .pillar__arrow {
  color: var(--brand-900);
  border-color: var(--brand-200);
  transform: translate(2px, -2px);
}

.pillar:hover .pillar__arrow::before {
  transform: scale(1);
}

.pillar__arrow svg {
  position: relative;
  width: 18px;
  height: 18px;
}

@media (min-width: 1024px) {
  .pillar__body {
    padding: 28px;
  }

  .pillar__title {
    font-size: 24px;
  }
}

/* ------------------------------- CTA ------------------------------------
   Fecha a dobra: copy de apoio e botão, centralizados sob a grade. Na faixa
   verde o .btn--primary quase some (1,95:1 contra o fundo), então o CTA usa
   a variante de contorno — a mesma pensada para fundo escuro. */
.services__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin-top: 48px;
  text-align: center;
}

.services__cta-text {
  max-width: 46ch;
  font-size: 16px;
  line-height: 26px;
  font-weight: 300;
  color: rgb(255 255 255 / 0.7);
}

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

  .services__title {
    font-size: 36px;
  }

  .services__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

  .services__title {
    font-size: 48px;
  }

  .services__support {
    font-size: 20px;
  }

  .services__cta {
    margin-top: 64px;
  }
}

/* Uma coluna por pilar só a partir de 1200px. Em 1024 o respiro lateral já
   subiu para 120px, e três colunas ali deixavam cards de 240px — o texto ia
   a seis linhas e o card virava quase só texto. */
@media (min-width: 1200px) {
  .services__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* =========================== 11. Depoimentos ==============================
   Cabeçalho alinhado à esquerda com a aspa grande, faixa de cards que anda de
   um em um e, embaixo, a barra de progresso com 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;
  }
}

/* ============================= 12. Power Up ===============================
   Faixa preta de ponta a ponta, com o traço decorativo do Figma ao fundo e o
   painel da plataforma dentro de uma moldura de navegador. Texto à direita,
   mockup à esquerda — no celular o texto vem primeiro.
   ========================================================================== */
.powerup {
  position: relative;
  overflow: hidden;
  padding-block: 64px;
  background: var(--surface-dark);
}

/* Traço exportado do Figma. É decorativo: fica fora do fluxo e do alcance do
   ponteiro, com a mesma âncora do desenho (recuado para fora pelo topo). */
.powerup__deco {
  position: absolute;
  top: -311px;
  left: 358px;
  width: 1179px;
  height: 1421px;
  max-width: none;
  pointer-events: none;
}

.powerup__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 48px;
  align-items: center;
}

.powerup__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.powerup__eyebrow {
  font-size: 20px;
  line-height: 32px;
  font-weight: 500;
  letter-spacing: 1.2px;
  color: var(--brand-200);
}

.powerup__title {
  margin-top: 8px;
  font-size: 28px;
  line-height: 1.167;
  font-weight: 600;
  color: #fff;
}

.powerup__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 32px;
}

.powerup__list li {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 300;
  color: rgb(255 255 255 / 0.8);
}

.powerup__list img {
  flex: 0 0 auto;
}

/* No Figma o rótulo do botão é branco, não verde como no resto do site */
.powerup .btn--outline {
  margin-top: 48px;
  color: #fff;
}

.powerup .btn--outline:hover,
.powerup .btn--outline:focus-visible {
  color: var(--brand-900);
}

/* ---------------------------- Mockup ------------------------------------
   Moldura de navegador em CSS puro: nada de imagem de moldura para carregar,
   e a proporção acompanha a captura sozinha. */
.browser {
  overflow: hidden;
  border-radius: var(--r-md);
  border: 1px solid rgb(255 255 255 / 0.12);
  background: #111;
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.5);
}

.browser__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding-inline: 12px;
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
  background: #1a1a1a;
}

.browser__bar span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.2);
}

.browser img {
  width: 100%;
  height: auto;
}

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

  .powerup__title {
    font-size: 36px;
  }
}

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

  .powerup__eyebrow {
    font-size: 24px;
  }

  .powerup__title {
    font-size: 48px;
    line-height: 56px;
  }

  /* Coluna de texto com a largura do Figma (593px); o resto é do mockup */
  .powerup__inner {
    grid-template-columns: 1fr 593px;
    gap: 80px;
  }

  /* O mockup vem depois no HTML — a ordem de leitura é título, itens, botão */
  .powerup__mockup {
    order: -1;
    /* Sai do container e encosta na borda da tela: sobrava um vão morto à
       esquerda e faltava ar entre a captura e o texto. Ganha largura de um
       lado e respiro do outro sem mexer na coluna de texto. */
    margin-left: calc(var(--pad) * -1);
  }
}

/* ============================== 13. Blog ==================================
   Coluna fixa à esquerda com título, apoio, "Ver todos" e as setas; à direita
   uma faixa de cards que anda de um em um. Navegação com limite, não em laço:
   as setas desabilitam nas pontas, então dá para ver onde a lista acaba.
   ========================================================================== */
.blog {
  padding-block: 64px;
}

.blog__inner {
  display: grid;
  gap: 24px 40px;
  align-items: start;
}

.blog__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

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

.blog__subtitle {
  max-width: 42ch;
  font-size: 16px;
  line-height: 26px;
  font-weight: 300;
  color: var(--ink-muted);
}

.blog__aside .btn {
  margin-top: 8px;
}

/* Escondidas no celular pelo mesmo motivo das dos depoimentos: lá se passa
   com o dedo, e o carrossel já escuta o arraste. */
.blog__controls {
  display: none;
  align-items: center;
  gap: 12px;
}

/* ----------------------------- Carrossel --------------------------------- */
.blog__viewport {
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

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

.blog__item {
  display: flex;
  flex: 0 0 100%;
  align-items: stretch;
  padding-right: 24px;
}

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

/* ------------------------------- Card ------------------------------------ */
.post {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.post__media {
  overflow: hidden;
  border-radius: var(--r-lg);
  aspect-ratio: 16 / 9;
  background: var(--icon-soft);
}

.post__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s cubic-bezier(0.32, 0.12, 0.2, 1);
  will-change: transform;
}

.post:hover .post__media img,
.post:focus-visible .post__media img {
  transform: scale(1.03);
}

.post__date {
  font-size: 13px;
  line-height: 20px;
  color: var(--ink-muted);
}

/* Os títulos do blog variam muito de tamanho; o corte em 3 linhas mantém os
   cards com a mesma altura sem depender do tamanho de cada manchete. */
.post__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-size: 18px;
  line-height: 28px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--brand-850);
  transition: color 0.3s ease;
}

.post:hover .post__title,
.post:focus-visible .post__title {
  color: var(--brand-700);
}

.post__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-700);
}

.post__more svg {
  transition: transform 0.35s var(--ease-out-soft);
}

.post:hover .post__more svg,
.post:focus-visible .post__more svg {
  transform: translateX(4px);
}

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

  .blog__title {
    font-size: 36px;
  }
}

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

  .blog__title {
    font-size: 48px;
  }

  /* Duas linhas: as setas ocupam a de cima, à direita, e a faixa de cards a
     de baixo. A coluna de texto atravessa as duas e fica centralizada em
     relação aos cards. */
  .blog__inner {
    grid-template-columns: 320px 1fr;
    grid-template-rows: auto 1fr;
    gap: 24px 32px;
  }

  .blog__aside {
    grid-row: 1 / 3;
    align-self: center;
  }

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

  .blog__viewport {
    grid-column: 2;
  }
}

/* ======================== 16. Ajustes do celular ==========================
   Numa coluna só, texto alinhado à esquerda deixa a página torta: cada bloco
   termina numa borda irregular e não há um segundo elemento ao lado para
   justificar o alinhamento. Vale para os cabeçalhos das dobras e o que os
   acompanha — botões, selos e listas de apoio.

   Fica de fora o conteúdo dentro de card: depoimento, artigo do blog e pilar
   continuam à esquerda, porque ali o texto é um parágrafo corrido e centrar
   parágrafo prejudica a leitura.
   ========================================================================== */
@media (max-width: 767px) {
  .hero__content,
  .proof__summary,
  .leaders__bio,
  .services__head,
  .powerup__content,
  .blog__aside,
  .reviews__head {
    text-align: center;
  }

  /* Blocos em coluna precisam centrar também os filhos que não são texto */
  .hero__content,
  .services__head,
  .blog__aside,
  .reviews__head {
    align-items: center;
  }

  /* 40px é o topo do que cabe em 327px sem quebrar palavra; a entrelinha
     acompanha em 1,15 para o bloco não crescer demais, e o subtítulo desce
     para 16px porque em 20px competia com o título. */
  .hero__title {
    font-size: 40px;
    line-height: 46px;
  }

  .hero__lead {
    font-size: 16px;
    line-height: 26px;
  }

  /* ------------------ Power Up: no formato do exemplo --------------------
     O bloco fica centrado na tela — mesmos 24px de recuo dos dois lados —
     e o texto corre da esquerda para a direita dentro dele. As medidas vêm
     do exemplo: rótulo 14px/500, título 28px com entrelinha de 35, e cada
     item numa grade de duas colunas com o texto começando a 40px. */
  .powerup__content {
    max-width: 480px;
    margin-inline: auto;
    text-align: left;
    align-items: flex-start;
  }

  .powerup__eyebrow {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.4px;
  }

  .powerup__title {
    line-height: 35px;
  }

  .powerup__list {
    width: 100%;
    margin-inline: 0;
  }

  /* Grade de duas colunas: o ícone tem coluna própria de 24px, então a
     segunda e a terceira linha do texto alinham com a primeira em vez de
     voltarem para baixo do ícone. */
  .powerup__list li {
    display: grid;
    grid-template-columns: 24px 1fr;
    align-items: start;
    gap: 16px;
    text-align: left;
  }

  /* Acerta o ícone com a primeira linha do texto, não com o topo da caixa */
  .powerup__list img {
    margin-top: 3px;
  }

  .powerup .btn {
    align-self: flex-start;
  }

  /* O mockup fica dentro do container: encostado na borda da tela, a moldura
     do navegador ficava rente ao limite e parecia cortada. */
  .powerup__mockup {
    margin-inline: 0;
  }

  .hero__content .btn,
  .blog__aside .btn {
    align-self: center;
  }

  /* ------------- Lideranças: bio junto dos cards ------------------------
     A bio fica acima dos cards. O vão de 40px do desktop era demais aqui, e
     a altura reservada (para a dobra não pular ao trocar de pessoa) somava
     mais espaço vazio embaixo do texto. Com o alinhamento ao fim, a sobra
     vai para cima e o texto encosta nos cards sempre à mesma distância. */
  .leaders__inner {
    gap: 16px;
  }

  .leaders__bio {
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }

  /* ------------- Serviços: os cards se empilham ao rolar -----------------
     Cada card gruda no mesmo ponto do alto, então o seguinte vai cobrindo o
     anterior conforme a pessoa desce. Quem fica atrás apaga e encolhe um
     pouco; o da frente ganha o fio branco. Quem decide qual está na frente é
     o bloco "Cards de serviço no celular" do script.js — o CSS sozinho não
     tem como saber quem está coberto. */
  .services__grid {
    gap: 24px;
  }

  .pillar {
    position: sticky;
    top: 88px;
    transition:
      opacity 0.55s var(--ease-out-soft),
      transform 0.55s var(--ease-out-soft);
  }

  .pillar.esta-atras {
    opacity: 0.55;
    transform: scale(0.96);
  }

  .pillar.esta-na-frente::before {
    border-color: rgb(255 255 255 / 0.85);
  }

  /* O card que chega à frente aplica o mesmo zoom que o hover dá no desktop */
  .pillar.esta-na-frente .pillar__foto {
    transform: scale(1.03);
  }

  /* O último card não precisa grudar: não há nada para cobri-lo, e sem isso
     ele fica preso no alto enquanto o resto da dobra passa. */
  .pillar:last-child {
    position: relative;
    top: 0;
  }

  /* ------------- Depoimentos: o próximo card espia ----------------------
     Mesmo recurso do blog: a janela sangra até a borda e o card ocupa 88%,
     então sobra uma fatia do seguinte anunciando que há mais. O width: auto
     é obrigatório — com o 100% da regra base a margem negativa só desloca a
     janela, sem esticá-la. */
  .reviews__viewport {
    /* Largura explícita, não "auto": o .reviews__carousel usa align-items:
       center, então com auto a janela encolhe ao conteúdo, o flex-basis de
       88% passa a medir contra largura indefinida e o carrossel dispara. */
    width: calc(100% + var(--pad) * 2);
    margin-inline: calc(var(--pad) * -1);
    padding-left: var(--pad);
  }

  .reviews__item {
    flex-basis: 88%;
  }

  /* ------------- Prova social: a foto ocupa a dobra inteira --------------
     Adaptação da referência: em vez do card com a faixa escura embaixo, a
     fotografia toma a tela toda e os números viram cartões de vidro por cima. */
  .proof {
    padding-block: 0;
  }

  /* O translate da entrada deixaria uma faixa do fundo da página aparecendo
     no topo, agora que a foto vai de borda a borda. Fica só o fade. */
  .proof[data-reveal] {
    transform: none;
  }

  .proof .container {
    padding-inline: 0;
  }

  .proof__card {
    justify-content: center;
    min-height: 100svh;
    border-radius: 0;
    /* Sem isto o card vira raiz de backdrop e o blur dos cartões só aparece
       depois de um repaint — o efeito surgia ao rolar e sumia. A ordem das
       camadas continua certa: foto e véu em z-index 0, a barra em 1. */
    isolation: auto;
  }

  .proof__card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(
      to bottom,
      rgb(2 20 14 / 0.62) 0%,
      rgb(2 20 14 / 0.42) 40%,
      rgb(2 20 14 / 0.68) 100%
    );
    pointer-events: none;
  }

  .proof__bar {
    gap: 32px;
    padding: 0 24px;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* O texto de apoio abre o bloco, como o título da referência */
  .proof__summary {
    order: -1;
    max-width: none;
    font-size: 20px;
    line-height: 30px;
  }

  .proof__stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  /* Cartão de vidro */
  .proof__stat {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border: 1px solid rgb(255 255 255 / 0.18);
    border-radius: var(--r-md);
    background: rgb(255 255 255 / 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    /* mantém o cartão numa camada própria, para o blur não depender de
       repaint; e o fundo um pouco mais forte segura o visual de vidro mesmo
       onde o navegador não pinta o desfoque */
    will-change: backdrop-filter;
    text-align: left;
  }

  /* O terceiro número ocupa a linha inteira: são três, não quatro */
  .proof__stats > li:nth-of-type(5) {
    grid-column: 1 / -1;
  }

  .proof__value {
    font-size: 30px;
  }

  /* Filete separando o número da legenda, como nos cartões da referência */
  .proof__label {
    padding-top: 12px;
    border-top: 1px solid rgb(255 255 255 / 0.18);
    white-space: normal;
    color: rgb(255 255 255 / 0.82);
  }

  /* --------------------- Blog: card com texto por cima -------------------
     Formato da referência: a foto é o card, o texto fica na base sobre um
     véu, e o próximo card aparece pela borda. */
  .blog__viewport {
    /* Sangra até a borda da tela para o próximo card espiar, mas o primeiro
       continua começando na linha do grid. O width: auto é necessário: com o
       100% da regra base a margem negativa só desloca a janela, não a estica. */
    width: auto;
    margin-inline: calc(var(--pad) * -1);
    padding-left: var(--pad);
  }

  .blog__item {
    flex-basis: 88%;
    padding-right: 16px;
  }

  .post {
    position: relative;
    isolation: isolate;
    justify-content: flex-end;
    gap: 8px;
    aspect-ratio: 4 / 5;
    padding: 20px;
    overflow: hidden;
    border-radius: var(--r-lg);
  }

  .post__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    aspect-ratio: auto;
    border-radius: 0;
  }

  .post::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
      to top,
      rgb(3 50 35 / 0.92) 0%,
      rgb(3 50 35 / 0.7) 32%,
      rgb(3 50 35 / 0) 72%
    );
    pointer-events: none;
  }

  /* O título vem antes da data, como na referência */
  .post__title {
    order: 1;
    font-size: 17px;
    line-height: 24px;
    color: #fff;
  }

  .post__date {
    order: 2;
    color: rgb(255 255 255 / 0.72);
  }

  /* O card inteiro já é o link; o "Ler mais" vira repetição */
  .post__more {
    display: none;
  }

  /* Sem cursor não há hover: quem dá o zoom é o card que está em cena,
     marcado pelo script conforme o carrossel anda. */
  .blog__item.esta-em-cena .post__media img {
    transform: scale(1.03);
  }

  /* --------------------- Botões todos do mesmo tamanho -------------------
     Só no celular: no desktop a variante --lg continua valendo e os botões
     acompanham o rótulo. A largura é fixa para que todos fiquem iguais —
     280 cobre o maior deles ("Fale com especialista"). Um rótulo mais longo
     quebra em duas linhas em vez de esticar. */
  .btn {
    width: 280px;
    padding: 12px 32px;
    font-size: 16px;
    line-height: 24px;
  }

  /* Os preenchidos não têm borda; sem uma transparente ficariam 2px mais
     baixos que os de contorno, porque a borda soma fora do padding. */
  .btn--primary,
  .btn--dark {
    border: 1px solid transparent;
  }


  /* --------------------- Sem cursor, sem hover ---------------------------
     Num aparelho de toque o :hover dispara no toque e fica grudado até o
     próximo toque em outro lugar — o botão volta "aceso" sem motivo. Aqui
     cada estado de hover é devolvido ao valor de repouso. O :active continua
     valendo: é ele que dá o retorno do toque. */
  .btn--primary:hover,
  .btn--dark:hover {
    filter: none;
  }

  .btn--outline:hover,
  .btn--outline:focus-visible {
    color: var(--brand-200);
  }

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

  /* Este nasce preenchido: o repouso dele é o inverso dos outros */
  .btn--outline-reverse:hover,
  .btn--outline-reverse:focus-visible {
    color: var(--brand-900);
  }

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

  .btn--outline-dark:hover,
  .btn--outline-dark:focus-visible {
    color: var(--brand-700);
  }

  .btn--outline-dark:hover::before,
  .btn--outline-dark:focus-visible::before {
    transform: scale(0);
  }

  .round-btn:hover {
    color: var(--brand-900);
    border-color: var(--brand-400);
  }

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

  .footer__social a:hover {
    border-color: var(--brand-400);
    background: none;
    color: var(--icon-soft);
  }

  .support__cta:hover {
    background: var(--brand-600);
  }

  .google-badge:hover {
    box-shadow: 0 2px 8px rgb(0 0 0 / 0.06);
  }

  .dots button:not([aria-current="true"]):hover {
    transform: none;
    background: var(--ink-soft);
  }

  /* Palavras do rodapé: sem cursor, não há o que acender */
  .footer__col a:hover,
  .footer__col a:focus-visible {
    opacity: 0.75;
    color: inherit;
  }

  /* Itens do menu e o "Sou cliente" sobre a navbar branca */
  .header__nav span:hover,
  .header.is-solid .header__nav span:hover {
    opacity: 0.7;
    color: inherit;
  }

  .header__nav span:hover::after {
    transform: scaleX(0);
  }

  .header.is-solid .btn--outline:hover,
  .header.is-solid .btn--outline:focus-visible {
    color: var(--brand-700);
  }

  /* O botão do Power Up nasce com rótulo branco */
  .powerup .btn--outline:hover,
  .powerup .btn--outline:focus-visible {
    color: #fff;
  }

  .leader-card__linkedin:hover {
    opacity: 1;
  }

  /* Cards de serviço: zoom da foto, fio branco e a seta */
  .pillar:hover .pillar__foto {
    transform: none;
  }

  .pillar:hover::before {
    border-color: rgb(255 255 255 / 0);
  }

  .pillar:hover .pillar__arrow {
    color: #fff;
    border-color: rgb(255 255 255 / 0.45);
    transform: none;
  }

  .pillar:hover .pillar__arrow::before {
    transform: scale(0);
  }

  /* Card do blog: zoom da capa, título e seta do "Ler mais" */
  .post:hover .post__media img,
  .post:focus-visible .post__media img {
    transform: none;
  }

  .post:hover .post__title,
  .post:focus-visible .post__title {
    color: #fff;
  }

  .post:hover .post__more svg,
  .post:focus-visible .post__more svg {
    transform: none;
  }

  /* ---------------------- No lugar do hover, o toque ---------------------
     Enquanto o dedo está em cima, a peça acende de leve e volta ao soltar.
     A transição é curta de propósito: é retorno de toque, não animação. */
  .btn,
  .round-btn,
  .support__cta,
  .footer__col a,
  .footer__social a,
  .google-badge,
  .post,
  .leader-card__btn,
  .leader-card__linkedin,
  .header__toggle {
    transition: filter 0.15s ease;
  }

  .btn:active,
  .round-btn:active,
  .support__cta:active,
  .footer__col a:active,
  .footer__social a:active,
  .google-badge:active,
  .post:active,
  .leader-card__btn:active,
  .leader-card__linkedin:active,
  .header__toggle:active {
    filter: brightness(1.18);
  }

  /* O selo do Google é branco: clarear não muda nada, então ele acende com
     um fundo levemente esverdeado. */
  .google-badge:active {
    filter: none;
    background: var(--icon-soft);
  }

  /* Os :active que escureciam saem do caminho — o toque agora acende */
  .btn--primary:active,
  .btn--dark:active {
    filter: brightness(1.18);
  }

  .btn--outline:active::before,
  .btn--outline-dark:active::before {
    background: var(--brand-200);
  }

  .footer__social a:active {
    border-color: var(--brand-400);
    background: none;
    color: var(--icon-soft);
  }

}


/* ======================= 17. Movimento reduzido =========================== */
@media (prefers-reduced-motion: reduce) {
  /*
   * Exceções deliberadas, a pedido do cliente e no mesmo critério da landing
   * page. São movimentos lentos, contínuos e sem deslocamento brusco.
   * Para voltar a respeitar a preferência em qualquer uma, basta apagar o
   * bloco correspondente.
   */

  /* 1. Carrossel de logotipos e shimmer do preloader */
  .marquee__track[data-cloned="true"] {
    animation-duration: 60s !important;
    animation-iteration-count: infinite !important;
  }

  /* 2. Acordeão das lideranças: o card precisa abrir e fechar visivelmente,
        senão a troca vira um salto seco */
  .leader-card {
    transition-duration: 0.5s !important;
  }

  .leaders__track {
    transition-duration: 0.5s !important;
  }

  /* 3. Varredura do texto da bio e brilho do ponto ativo */
  .leaders__bio.is-filling {
    animation-duration: 1.1s !important;
  }

  .dots button[aria-current="true"]::after {
    animation-duration: 0.7s !important;
  }

  .dots button {
    transition-duration: 0.45s !important;
  }

  /* 4. Preenchimento das setas ao passar o mouse */
  .round-btn,
  .round-btn::before {
    transition-duration: 0.35s !important;
  }

  /* 4b. Hover dos pilares de serviço. O zoom da foto entra aqui: sem duração
         ele salta de 100% para 103% num quadro só, que é justamente o oposto
         de um movimento suave. É lento, contínuo e sem deslocamento. */
  .pillar__arrow,
  .pillar__arrow::before {
    transition-duration: 0.45s !important;
  }

  .pillar::before {
    transition-duration: 0.5s !important;
  }

  .pillar__foto {
    transition-duration: 1.1s !important;
  }

  /* 4d. Empilhamento dos cards de serviço no celular. Sem duração o card de
         trás apaga num piscar em vez de recuar. */
  .pillar {
    transition-duration: 0.55s !important;
  }

  /* 4c. Blog: o deslize da faixa e o hover do card, pelo mesmo motivo do
         item anterior — o zoom da capa é o movimento que precisa de tempo. */
  .blog__track {
    transition-duration: 0.9s !important;
  }

  .post__media img {
    transition-duration: 1.1s !important;
  }

  .post__title,
  .post__more svg {
    transition-duration: 0.35s !important;
  }

  /* 5. Carrossel de depoimentos: o deslize, o card da frente acendendo e a
        barra de progresso. Sem duração o card troca de cor num piscar e a
        barra salta — e é justamente o acender que dá sentido à dobra. */
  .reviews__track {
    transition-duration: 0.9s !important;
  }

  .review,
  .review__text,
  .review__author,
  .review__avatar {
    transition-duration: 0.7s !important;
  }

  .dots button[aria-current="true"]::after {
    animation-duration: 0.7s !important;
  }

  /* 7. Preenchimento dos botões de contorno. Sem duração ele aparece inteiro
        de uma vez e não parece que o botão acendeu. */
  .btn--outline::before,
  .btn--outline-dark::before {
    transition-duration: 0.35s !important;
  }

  /* 9. Retorno do toque no celular. Precisa vir por último: várias exceções
        acima casam com os mesmos elementos e imporiam a duração delas — o CTA
        dos serviços chegava a 0,75s, lento demais para responder a um dedo. */
  @media (max-width: 767px) {
    .btn,
    .round-btn,
    .support__cta,
    .footer__col a,
    .footer__social a,
    .google-badge,
    .post,
    .leader-card__btn,
    .leader-card__linkedin,
    .header__toggle {
      transition-duration: 0.15s !important;
    }
  }
}