/* =============================================================================
   Grupo Axia · Certificados Digitais (e-CNPJ A1 e e-CPF A1)

   Estilos EXCLUSIVOS desta página. Tudo que é comum ao site do Grupo Axia
   ficou de fora daqui e vive em ../assets/css/, nos mesmos arquivos usados
   pelo site oficial:

     global.css        tokens, reset, utilitários, botões
     navbar.css        header e menu do celular
     footer.css        rodapé
     forms.css         campos de formulário
     support-card.css  card e barra de suporte (WhatsApp)

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

   Todo espaçamento é múltiplo de 8. As exceções são poucas e estão
   comentadas onde aparecem.

   Sumário
     1. Base da página e títulos de seção   7.  Para que serve / diferenciais
     2. Navbar transparente                 8.  Como funciona
     3. Peças recorrentes                   9.  Os dois botões do fecho
     4. Hero                                10. Perguntas frequentes
     5. Selo de confiança                   11. Chamada final
     6. Escolha do certificado              12. Movimento reduzido
   ========================================================================== */

/* ================== 1. Base da página e títulos de seção ================== */

/* O corpo do site oficial é cinza porque lá as dobras alternam com faixas
   coloridas. Aqui cada dobra pinta o próprio fundo e a página abre em branco:
   sem esta linha, sobraria uma borda cinza nas laterais acima de 1440px. */
body {
  background: #fff;
}

/* A navbar é fixa e tem 80px. Sem o recuo, chegar por um link com âncora
   (#certificados vindo de outra página, por exemplo) deixaria o título embaixo
   dela. */
section[id] {
  scroll-margin-top: calc(96px + var(--faixa-altura));
}

/* Impede a linha viúva, a palavra sozinha na última linha de um bloco.
   `balance` distribui as linhas dos títulos por igual; o `pretty` dos
   parágrafos já vem do global.css. */
h1,
h2,
h3,
.hero__title,
.hero__lead,
.section-head__title,
.section-head__subtitle,
.axia-faq__title,
.axia-faq__desc,
.fecho__title,
.fecho__text,
.support__text {
  text-wrap: balance;
}

.axia-faq__a {
  text-wrap: pretty;
}

/* Títulos de seção: mesma escala do site oficial. */
.section-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 760px;
}

.section-head--center {
  align-items: center;
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
}

.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: 18px;
  line-height: 27px;
  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: 44px;
  }
}

/* ===================== 1b. Faixa de anúncio ===============================
   Faixa fixa acima da navbar. A altura mora numa variável porque quatro coisas
   dependem dela e precisam andar juntas: o `top` do header, o recuo de cima da
   hero (nas três larguras) e o `scroll-margin-top` das âncoras. Com o número
   solto em cada lugar, mudar a faixa quebraria três deles em silêncio.

   Fixa, e não rolando junto com a página, para o desconto continuar à vista em
   qualquer ponto: é a única razão de a faixa existir. O preço é o de sempre,
   36px de tela no celular, e é por isso que ela é uma linha só e sem botão.
   ========================================================================== */
:root {
  --faixa-altura: 44px;
}

@media (min-width: 768px) {
  :root {
    --faixa-altura: 48px;
  }
}

/* O degradê corre na horizontal, do verde escuro da marca ao verde de botão:
   numa faixa larga e baixa, um degradê vertical se resolveria em poucos pixels
   e não seria visto. Os três tons são os da marca, sem cor nova no sistema. */
.faixa {
  position: fixed;
  top: 0;
  inset-inline: 0;
  /* acima do 50 do header: a faixa é a primeira coisa da pilha */
  z-index: 60;
  display: flex;
  align-items: center;
  height: var(--faixa-altura);
  background: linear-gradient(
    100deg,
    var(--brand-900) 0%,
    var(--brand-deep) 38%,
    var(--brand-800) 100%
  );
  color: #fff;
}

/* A mensagem fica centrada na tela e a contagem encosta na direita do
   container, que é onde mora o botão "Comprar agora" da navbar. Como a
   contagem sai do fluxo, o centro da mensagem não é puxado por ela. */
.faixa__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* Numa linha só e sem quebra: a faixa tem altura fixa, então texto em duas
   linhas vazaria por baixo em vez de empurrar. Se não couber, o que sai de
   cena é a nota da direita, pelo `hidden` do bloco de baixo. */
.faixa__linha {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 500;
  white-space: nowrap;
}

/* O acento da marca no lugar do amarelo da referência: numa página inteira em
   verde, o amarelo entraria como um segundo sistema de cor.

   `overflow: hidden` recorta o reflexo na pílula; `isolation` mantém o
   ::after preso a este contexto de empilhamento. */
.faixa__selo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--brand-200);
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-900);
}

/* ------------------------- O reflexo de luz ------------------------------
   Uma faixa clara e inclinada atravessa o selo devagar. O que faz o
   movimento parecer contínuo sem ficar agitado é o desenho do ciclo: a
   travessia leva pouco mais da metade dos 6,5s e o resto do tempo o reflexo
   espera fora do selo, à esquerda. Sem essa espera, o brilho reapareceria
   assim que sumisse e a pílula ficaria piscando.

   O gradiente vai a 55% de branco no miolo, não a 100%: sobre o verde claro
   do selo, o branco cheio estoura e o "23% OFF" some por um instante.
   ------------------------------------------------------------------------ */
.faixa__selo::after {
  content: "";
  position: absolute;
  /* passa da altura do selo para o corte inclinado não deixar cantos vazios */
  top: -50%;
  bottom: -50%;
  left: 0;
  width: 40%;
  background: linear-gradient(
    100deg,
    rgb(255 255 255 / 0) 0%,
    rgb(255 255 255 / 0.55) 50%,
    rgb(255 255 255 / 0) 100%
  );
  transform: skewX(-18deg) translateX(-280%);
  animation: faixaReflexo 2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes faixaReflexo {
  0% {
    transform: skewX(-18deg) translateX(-280%);
  }
  /* A travessia ocupa 70% dos 2s (1,4s) e o reflexo espera os 0,6s restantes
     fora do selo. Num ciclo curto a pausa não pode ser longa como era antes,
     senão a passagem vira um estalo; 70/30 mantém o deslizar visível e ainda
     dá o respiro que impede a pílula de parecer piscando. */
  70%,
  100% {
    transform: skewX(-18deg) translateX(380%);
  }
}

/* ---------------------------- A contagem --------------------------------
   Fonte tabular para os dígitos não dançarem a cada segundo: sem ela, o "1"
   é mais estreito que o "8" e a linha inteira treme de um tique para o
   outro. */
.faixa__prazo[hidden] {
  display: none;
}

.faixa__prazo {
  display: flex;
  /* baseline, não center: com o relógio maior que o rótulo, centrar pelas
     caixas deixaria os dois desalinhados na linha de escrita */
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 500;
  white-space: nowrap;
  color: rgb(255 255 255 / 0.82);
}

/* Os dígitos são o que a pessoa lê de relance, então vêm dois degraus acima do
   rótulo. Cabem: a faixa tem 44px no celular e 48px do tablet para cima. */
.faixa__relogio {
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: #fff;
}

.faixa__nota {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.72);
}

/* Com a contagem dividindo a faixa, o que cabe muda em cada largura. A ordem
   do que sai de cena vai do mais dispensável para o menos: primeiro a nota da
   direita, depois o complemento "no certificado digital". O desconto e o
   prazo ficam até o fim, porque são o que a faixa existe para dizer. */
/* A nota volta só em 1280px. Em 1024 o respiro lateral da grade Axia sobe
   para 120px, o container fica com 784px e a mensagem com a nota encosta na
   contagem: sobram 0px entre as duas. */
@media (max-width: 1279px) {
  .faixa__nota {
    display: none;
  }
}

@media (max-width: 559px) {
  .faixa__texto {
    display: none;
  }
}

/* Até 767px a contagem entra na própria linha da mensagem, centrada com ela:
   não há botão na navbar para acompanhar, e sobra pouca largura. */
@media (max-width: 767px) {
  .faixa__inner {
    gap: 10px;
  }
}

/* Do tablet para cima a contagem sai do fluxo e encosta na direita do
   container: é a linha vertical do botão "Comprar agora" da navbar (e do
   hambúrguer, antes de 1024px). */
@media (min-width: 768px) {
  .faixa__inner {
    display: flex;
  }

  .faixa__prazo {
    position: absolute;
    right: var(--pad);
    font-size: 14px;
  }

  .faixa__relogio {
    font-size: 17px;
  }

  .faixa__linha {
    gap: 12px;
    font-size: 14px;
  }

  .faixa__selo {
    font-size: 14px;
  }

  .faixa__nota {
    font-size: 12px;
  }
}

/* A navbar desce a altura da faixa. O .header do assets/css/navbar.css nasce
   em `top: 0`; esta regra tem a mesma especificidade e vence por vir depois. */
.header {
  top: var(--faixa-altura);
}

/* ========================= 2. Navbar transparente =========================
   Ao contrário do site oficial, onde a navbar nasce transparente sobre a hero
   escura e vira branca ao rolar, aqui ela faz o inverso: nasce branca sobre a
   hero clara e fica transparente a partir do primeiro gesto de rolagem, com o
   desfoque deixando a página passar por baixo.

   Por isso o <header> continua com `data-solid="always"`: assim o
   assets/js/navbar.js compartilhado não disputa o fundo com esta página, e
   quem alterna a classe `.is-transparente` é o js/main.js.

   Os dois seletores trazem `.is-solid` de propósito: é a classe que o
   navbar.js aplica, e sem ela estas regras perderiam para as de lá por
   especificidade.
   ========================================================================== */
.header.is-solid.is-transparente {
  background: transparent;
  box-shadow: none;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}

/* ------------------- Transparente sobre dobra escura ---------------------
   Sem fundo próprio, a navbar assume a cor do que está atrás. Sobre as dobras
   claras o verde escuro do logo e dos links continua legível; sobre a foto da
   dobra de diferenciais e sobre o rodapé, não: ali tudo vira claro.

   Quem marca essas dobras é o atributo data-nav-escura no HTML; quem acende a
   classe é o js/main.js.
   ------------------------------------------------------------------------ */

/* A hero é o único caso que depende da largura: abaixo de 1024px a foto é o
   fundo dela e a navbar precisa ficar clara; do desktop para cima ela volta a
   ser branca com o texto ao lado da imagem.

   O aviso vai por variável em vez de um segundo atributo no HTML porque o
   ponto de corte é uma decisão de layout, e layout mora no CSS. O js/main.js
   lê esta variável ao carregar e a cada redimensionamento. */
.hero {
  --nav-escura: 1;
}

@media (min-width: 1024px) {
  .hero {
    --nav-escura: 0;
  }
}
.header.is-transparente.is-sobre-escuro .header__logo svg {
  color: #fff;
}

.header.is-transparente.is-sobre-escuro .header__nav ul {
  color: var(--nav);
}

.header.is-transparente.is-sobre-escuro .header__nav a::after {
  background: var(--brand-200);
}

@media (hover: hover) and (pointer: fine) {
  .header.is-transparente.is-sobre-escuro .header__nav a:hover {
    color: #fff;
  }
}

/* O hambúrguer acompanha: sobre dobra escura ele volta ao verde claro */
.header.is-transparente.is-sobre-escuro .header__toggle {
  border-color: rgb(160 228 147 / 0.6);
  color: var(--brand-200);
}

/* ======================== 3. Peças recorrentes ============================ */

/* -------------------------------- Etiquetas ------------------------------
   Duas variantes e só duas: `--tipo` diz de quem é o certificado (pessoa
   física ou jurídica) e `--desconto` mostra o percentual. O verde claro fica
   reservado ao desconto, que é a informação que precisa saltar.
   ------------------------------------------------------------------------ */
.tag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tag--tipo {
  background: var(--icon-soft);
  color: var(--brand-800);
}

.tag--desconto {
  background: var(--brand-200);
  color: var(--brand-900);
}

/* --------------------------- Listas com marca ----------------------------
   O visto vem como imagem de fundo, no mesmo recurso que o forms.css usa para
   a seta do select: um SVG embutido, sem requisição extra e sem um <svg> por
   item repetido dezenas de vezes no HTML.
   ------------------------------------------------------------------------ */
.lista-check,
.cert-card__specs,
.resumo__specs {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lista-check li,
.cert-card__specs li,
.resumo__specs li {
  position: relative;
  padding-left: 32px;
  font-size: 15px;
  line-height: 24px;
  font-weight: 300;
  color: var(--ink-muted);
}

.lista-check li::before,
.cert-card__specs li::before,
.resumo__specs li::before {
  content: "";
  position: absolute;
  left: 0;
  /* 2px alinha o miolo do visto com a primeira linha de 24px do texto */
  top: 2px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background-color: var(--icon-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b6347' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}

/* O botão que ocupa a largura do bloco em que está */
.btn--full {
  width: 100%;
}

/* =============================== 4. Hero =================================
   Fundo branco, duas colunas no desktop. O recuo de cima soma a altura da
   navbar fixa (76px) ao respiro da dobra, por isso ele é maior que o das
   outras seções.
   ========================================================================== */
.hero {
  background: #fff;
  padding-block: calc(120px + var(--faixa-altura)) 64px;
}

.hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}

.hero__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

/* ------------------ No celular a hero vai para o centro ------------------
   Numa coluna só, texto à esquerda deixa a dobra torta: cada bloco termina
   numa borda irregular e não há um segundo elemento ao lado para justificar o
   alinhamento, e é a mesma decisão que o rodapé oficial toma abaixo de 768px.

   O corte é 1024px porque é onde a hero volta a ter duas colunas: com a foto
   ao lado, o alinhamento à esquerda passa a fazer sentido de novo.

   As larguras máximas do título e do texto viram `auto` nas laterais, senão
   os dois blocos ficariam centrados por fora e colados à esquerda por dentro.
   ------------------------------------------------------------------------ */
@media (max-width: 1023px) {
  .hero__col {
    align-items: center;
    text-align: center;
  }

  .hero__title,
  .hero__lead {
    margin-inline: auto;
  }
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--icon-soft);
  font-size: 13px;
  line-height: 20px;
  font-weight: 500;
  color: var(--brand-800);
}

.hero__badge svg {
  width: 16px;
  height: 16px;
}

/* O piso do clamp é o tamanho do celular: 5,6vw só alcança 34px lá pelos
   607px de largura, então abaixo disso quem manda é o primeiro valor. Subir o
   piso de 34 para 42px aumenta o título no telefone sem tocar no tablet nem no
   desktop, que continuam na rampa fluida e no teto de 56px.

   Numa hero que é foto e texto centrado, o título é o único elemento com peso
   para competir com a imagem: em 34px ele ficava do tamanho de um subtítulo. */
.hero__title {
  max-width: 15ch;
  font-size: clamp(42px, 5.6vw, 56px);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--brand-850);
}

.hero__lead {
  max-width: 52ch;
  font-size: 17px;
  line-height: 28px;
  font-weight: 300;
  color: var(--ink-muted);
}

.hero__lead strong {
  font-weight: 500;
  color: var(--ink);
}

/* ------------------------- Os dois preços na hero ------------------------
   Uma linha por produto: nome à esquerda, "de → por" à direita. É a mesma
   informação dos cards mais abaixo, aqui só para quem decide na primeira
   dobra.

   As duas etiquetas pousam sobre a foto, no canto de baixo, em vidro: o
   branco translúcido deixa a imagem passar e o desfoque a borra, para o preço
   continuar legível sem precisar de uma placa opaca por cima do rosto.

   `--deriva` é escrito pelo js/main.js conforme a página desce, e entra na
   conta do `bottom`, não num `translate`. É de propósito: qualquer
   `transform` ou `translate` num ancestral cria um backdrop root, e o
   `backdrop-filter` das etiquetas passaria a não enxergar a foto. Pelo
   `bottom` o efeito de vidro sobrevive à rolagem.

   A variável nasce em 0, então sem JavaScript as etiquetas ficam paradas no
   lugar certo.
   ------------------------------------------------------------------------ */
.hero__precos {
  position: absolute;
  z-index: 2;
  left: 16px;
  right: 16px;
  bottom: calc(16px + var(--deriva, 0px));
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* A entrada vem depois da foto: os 320ms são o tempo de a imagem terminar de
   subir, e o --d é o escalonamento que o assets/js/global.js calcula para
   cada filho, e assim uma etiqueta pousa atrás da outra, não as duas juntas. */
.hero__precos > li {
  transition-delay: calc(var(--d, 0ms) + 320ms);
}

/* Nome em cima, "de → por" embaixo. Lado a lado a linha precisa de 369px, e
   sobre a foto isso é largura demais: a etiqueta tomaria dois terços da
   imagem no desktop e quebraria sozinha no celular. Empilhado ela fica em
   280px e se comporta igual em qualquer tela. */
.preco-pill {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 12px 16px;
  border-radius: var(--r-md);
  /* Vidro: 78% de branco é o piso para o verde escuro do nome continuar em
     contraste sobre as partes claras da foto. O filete branco na borda
     simula a quina iluminada, e a sombra é o que descola a placa da imagem. */
  background: rgb(255 255 255 / 0.78);
  border: 1px solid rgb(255 255 255 / 0.6);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 10px 28px rgb(3 50 35 / 0.18);
}

/* Sem suporte a backdrop-filter o vidro vira uma placa translúcida sobre a
   foto crua, e o preço fica ilegível: aí a etiqueta volta a ser branca. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .preco-pill {
    background: #fff;
    border-color: var(--line);
  }
}

/* As duas linhas trazem altura própria: o 1.75 do corpo é entrelinha de texto
   corrido e, numa placa de duas linhas, engorda a etiqueta em 12px sem
   ganhar legibilidade. */
.preco-pill__nome {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--brand-850);
}

/* `wrap` é a rede de segurança: sem ela, numa tela estreita o preço encolhe e
   o navegador quebra "R$ 180,00" no meio, virando "R$" numa linha e "180,00"
   na outra. Com a quebra permitida, quem desce é a etiqueta de desconto,
   inteira, e só quando realmente não couber. */
.preco-pill__valores {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  line-height: 24px;
}

/* Nenhum dos dois valores pode partir: são um número só */
.preco-pill__de,
.preco-pill__por {
  white-space: nowrap;
}

.preco-pill__de {
  font-size: 12px;
  font-weight: 300;
  color: var(--ink-muted);
}

.preco-pill__por {
  font-size: 18px;
  font-weight: 600;
  color: var(--brand-700);
}

/* A etiqueta é o único elemento fora da linha de base do preço; sem o
   translate ela desce junto com o baseline e fica desalinhada. */
.preco-pill .tag {
  transform: translateY(-1px);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* --------------------------- A foto da hero ------------------------------
   A placa verde-clara atrás, deslocada, é o que dá profundidade sem precisar
   de sombra pesada. Ela é decorativa e some do fluxo de leitura.
   ------------------------------------------------------------------------ */
.hero__figura {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
}

/* No celular o deslocamento é menor: com 24px a placa encostaria na borda da
   tela, já que o respiro lateral da página também é de 24px. */
.hero__figura::before {
  content: "";
  position: absolute;
  inset: 16px -16px -16px 16px;
  border-radius: var(--r-2xl);
  background: var(--icon-soft);
}

@media (min-width: 640px) {
  .hero__figura::before {
    inset: 24px -24px -24px 24px;
  }
}

/* No celular o corte é em pé. Deitado (5/4) sobravam 274px de altura, e as
   duas etiquetas pousadas em cima tomavam 56% da foto; em 4/5 elas ficam em
   pouco mais de um terço, e o enquadramento vertical cai melhor numa pessoa. */
.hero__img {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  /* O rosto fica no terço de cima da foto: sem o deslocamento, o corte tira a
     cabeça. */
  object-position: 50% 22%;
  border-radius: var(--r-2xl);
  box-shadow: 0 24px 60px rgb(3 50 35 / 0.16);
}

/* ================= Abaixo de 1024px a foto vira o fundo ===================
   No celular e no tablet a hero é uma coluna só, e a foto deixa de ser um
   bloco ao lado do texto para virar o fundo da dobra inteira: a `<figure>`
   sai do fluxo, cobre a seção e vai para trás do conteúdo.

   A placa verde decorativa dá lugar ao véu escuro: é o mesmo elemento
   (`::before`), com outro papel em cada largura. Sem ele o texto branco
   ficaria sobre as partes claras da foto e sumiria.

   As duas etiquetas de preço não vêm para cá: nesta largura a dobra é uma
   coluna só e elas repetiam, em cima da foto, o preço que os cards logo abaixo
   já dão com mais espaço e com botão. Some com elas o recuo de baixo que as
   reservava (eram 208px: 74px por etiqueta, 8px entre elas e o respiro), e a
   dobra volta ao ritmo das outras.
   ========================================================================== */
@media (max-width: 1023px) {
  .hero {
    position: relative;
    /* Cria o contexto de empilhamento onde a figura, com z-index negativo,
       fica atrás do conteúdo sem escapar para trás do fundo da seção. */
    isolation: isolate;
    overflow: hidden;
    /* Cor de espera enquanto a foto carrega, para o texto branco nunca ficar
       sobre fundo claro. */
    background: #0c1512;

    /* A dobra toma a tela inteira. Numa hero que é foto, altura é o que dá
       presença à imagem: no tamanho antigo (584px) a pessoa da foto ficava
       espremida atrás do texto. O `svh` é a altura pequena da viewport, a que
       ignora o recolher da barra do navegador, então a dobra não muda de
       tamanho no meio da rolagem. O `vh` acima fica de reserva para quem não
       conhece a unidade nova. */
    min-height: 100vh;
    min-height: 100svh;

    /* Com a dobra mais alta, o texto centra na sobra em vez de ficar colado no
       topo. É o que tira o título de cima do rosto: a folga vai metade para
       cima, empurrando o bloco para a altura do peito e do notebook. */
    display: grid;
    align-content: center;

    padding-block: calc(120px + var(--faixa-altura)) 64px;
  }

  .hero__figura {
    position: absolute;
    inset: 0;
    z-index: -2;
    max-width: none;
    margin: 0;
  }

  .hero__img {
    height: 100%;
    /* Sem proporção fixa: a altura passa a ser a da dobra, e o recorte fica
       por conta do object-fit. */
    aspect-ratio: auto;
    border-radius: 0;
    box-shadow: none;

    /* Numa dobra alta e estreita a foto quadrada entra pela altura, então quem
       sobra é a largura e só o eixo horizontal age (o vertical é exato e o
       22% da regra base fica sem efeito aqui). O rosto está a 47% da largura
       da foto, e não no meio: com 50% o recorte o empurrava para a esquerda.
       Os 45% recentram a pessoa na dobra. */
    object-position: 45% 50%;
  }

  /* A placa decorativa vira o véu, por cima da foto e por baixo do texto */
  .hero__figura::before {
    inset: 0;
    z-index: 1;
    border-radius: 0;
    background: linear-gradient(
      180deg,
      rgb(4 22 16 / 0.74) 0%,
      rgb(4 22 16 / 0.66) 45%,
      rgb(4 22 16 / 0.8) 100%
    );
  }

  /* Fora de cena, não escondidas por baixo da foto: `display: none` tira a
     lista do fluxo e do leitor de tela, que é o certo, porque a informação
     dela continua inteira nos cards da dobra seguinte. */
  .hero__precos {
    display: none;
  }

  /* ---------------------- O texto sobre a foto -------------------------- */
  .hero__badge {
    border-color: rgb(255 255 255 / 0.26);
    background: rgb(255 255 255 / 0.12);
    color: var(--brand-200);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .hero__title {
    color: #fff;
  }

  .hero__lead {
    color: rgb(255 255 255 / 0.92);
  }

  .hero__lead strong {
    color: #fff;
  }
}

@media (min-width: 1024px) {
  .hero {
    padding-block: calc(128px + var(--faixa-altura)) 96px;
  }

  /* A foto fica com pouco menos da metade da dobra, como pede a referência */
  .hero__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 64px;
  }

  /* No desktop as etiquetas avançam para fora da foto, sobre o vão entre as
     duas colunas: é o que tira delas a cara de legenda e dá profundidade à
     dobra. O vão tem 64px, então os 32px de avanço não alcançam o texto. */
  .hero__precos {
    left: -32px;
    /* explícito: a regra base define `right`, e deixar os três valores
       (left, right e width) resolvendo por implicação é pedir surpresa */
    right: auto;
    bottom: calc(40px + var(--deriva, 0px));
    width: 320px;
  }

  /* ---------------------- A flutuação das etiquetas ----------------------
     As duas sobem e descem devagar, como se estivessem soltas sobre a foto.

     Três decisões que não são livres:

       1. a animação vai em CADA etiqueta, nunca no `.hero__precos`. Mover o
          pai criaria um backdrop root e o `backdrop-filter` das filhas
          pararia de enxergar a foto — o mesmo motivo que fez a deriva usar
          `bottom` em vez de `translate`;

       2. ela usa a propriedade `translate`, não `transform`. O `transform`
          das etiquetas já é do assets/js/global.js, que o usa na entrada
          escalonada; em propriedades separadas, as duas coisas convivem sem
          uma apagar a outra;

       3. as durações são diferentes (6s e 7,2s). Com a mesma duração o par
          subiria e desceria em bloco, que é o oposto de flutuar; períodos
          diferentes fazem as duas entrarem e saírem de fase sozinhas, e o
          movimento nunca se repete igual.

     Os 8px são deliberadamente pouco: o suficiente para o olho perceber que
     elas não estão coladas na imagem, e pouco demais para disputar atenção
     com o preço, que é o que a etiqueta existe para mostrar.

     O atraso de 1,2s deixa a entrada escalonada terminar antes. Sem ele, a
     etiqueta começaria a flutuar enquanto ainda está pousando.
     -------------------------------------------------------------------- */
  .preco-pill {
    animation: flutuarEtiqueta 6s ease-in-out 1.2s infinite;
  }

  .preco-pill:nth-child(2) {
    animation-duration: 7.2s;
  }
}

@keyframes flutuarEtiqueta {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -8px;
  }

  /* Em 1024 o respiro lateral da grade Axia sobe para 120px e a coluna da
     foto fica com 335px. No quadrado, as duas etiquetas cobririam metade da
     imagem. Em pé, ficam em pouco mais de um terço. */
  .hero__img {
    aspect-ratio: 4 / 5;
  }
}

@media (min-width: 1280px) {
  .hero__inner {
    gap: 80px;
  }

  /* Daqui para cima a coluna já tem largura suficiente: o quadrado volta, e
     com ele o enquadramento mais aberto da foto. */
  .hero__img {
    aspect-ratio: 1 / 1;
  }
}

/* ========================= 5. Selo de confiança ===========================
   Faixa estreita logo abaixo da hero. Quatro informações, nada além do que a
   página pode sustentar.
   ========================================================================== */
.confianca {
  background: #fff;
  padding-bottom: 64px;
}

/* Abaixo de 1024px a foto é o fundo da hero e a dobra termina na borda de baixo
   da imagem: sem este recuo o card encostaria nela, e as duas dobras virariam
   uma só. No desktop a hero é branca e já entrega os 64px de baixo dela, então
   lá o recuo seria espaço dobrado. */
@media (max-width: 1023px) {
  .confianca {
    padding-top: 40px;
  }
}

.confianca__lista {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px 32px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--icon-soft);
}

.confianca__lista li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
  color: var(--brand-850);
}

/* Em 1024 a faixa vira quatro colunas e o `justify-items: center` já centra
   cada par de ícone e texto. Abaixo disso é aqui que a centralização
   acontece, para o comportamento ser o mesmo em qualquer largura. */
@media (max-width: 1023px) {
  .confianca__lista li {
    justify-content: center;
  }
}

.confianca__lista svg {
  color: var(--brand-700);
}

/* --------------------------- A marca da parceira -------------------------
   "Parceiro" escrito, logo em seguida: a palavra e a marca formam um par, e
   por isso o vão entre elas é menor que o dos outros itens (que separam ícone
   de texto). A altura de 24px deixa o logo na mesma linha ótica das outras
   três linhas, de 22px.
   ------------------------------------------------------------------------ */
.confianca__marca {
  gap: 8px;
}

.confianca__marca img {
  width: auto;
  height: 24px;
}

@media (min-width: 640px) {
  .confianca__lista {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .confianca__lista {
    grid-template-columns: repeat(4, 1fr);
    justify-items: center;
  }
}

/* ============ 6. Escolha do certificado (grade e carrossel) =============== */
.certificados {
  background: var(--icon-soft);
  padding-block: 64px;
}

/* ----------------------- O carrossel do celular --------------------------
   Abaixo de 900px os dois cards deslizam com o dedo. Não há biblioteca: a
   rolagem é a nativa do navegador, com `scroll-snap` para ela parar sempre
   num card inteiro. Isso mantém a inércia e o atrito do sistema, que nenhum
   carrossel em JavaScript imita bem, e continua funcionando com o teclado,
   já que cada card tem um link dentro.

   A trilha sangra até a borda da tela (`margin-inline` negativo) e devolve o
   respiro por dentro (`padding-inline`). Assim o primeiro card fica alinhado
   com o resto da página e o segundo espia na borda, avisando que há mais.
   ------------------------------------------------------------------------ */
.certificados__grid {
  display: flex;
  gap: 16px;
  margin-top: 40px;
  margin-inline: calc(var(--pad) * -1);
  /* 16px em cima: a etiqueta "Ideal para empresas" sobe metade da própria
     altura para fora do card, e `overflow-x` também corta na vertical. */
  padding: 16px var(--pad) 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--pad);
  -webkit-overflow-scrolling: touch;
  /* A barra de rolagem não some sozinha no desktop com mouse, e aqui ela só
     sujaria a dobra: quem diz que há um segundo card é o pedaço dele que fica
     à mostra, porque cada card ocupa 82% da trilha. */
  scrollbar-width: none;
}

.certificados__grid::-webkit-scrollbar {
  display: none;
}

/* O último card encaixa pelo fim, e não pelo começo. Pelo começo o ponto de
   encaixe dele cai em 284px de rolagem numa trilha que só tem 225px para rolar:
   o card ocupa 82% da tela, e depois dele só resta o respiro da borda, então a
   borda esquerda dele nunca alcança a borda esquerda da trilha.

   Ponto de encaixe fora de alcance com `mandatory` não é detalhe: o navegador é
   obrigado a repousar num ponto válido, e como não havia um, qualquer arrasto
   parcial era puxado direto para o fim. Em outros motores o mesmo caso devolve
   a trilha para o começo, e aí o gesto parece não pegar.

   Encaixando pelo fim, os dois pontos passam a existir de verdade: 0 com o
   primeiro card na borda esquerda, e o máximo com o segundo inteiro na tela. */
.certificados__grid > .cert-card:last-child {
  scroll-snap-align: end;
}

.cert-card {
  position: relative;
  display: flex;
  flex: 0 0 82%;
  max-width: 400px;
  scroll-snap-align: start;
  flex-direction: column;
  gap: 20px;
  padding: 24px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: #fff;
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
}


.cert-card--destaque {
  border-color: var(--brand-700);
  box-shadow: 0 16px 40px rgb(3 50 35 / 0.1);
}

@media (hover: hover) and (pointer: fine) {
  .cert-card:hover {
    border-color: var(--brand-700);
    box-shadow: 0 16px 40px rgb(3 50 35 / 0.12);
    transform: translateY(-4px);
  }
}

.cert-card__flag {
  position: absolute;
  top: 0;
  right: 20px;
  transform: translateY(-50%);
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--brand-700);
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
  color: #fff;
  box-shadow: 0 4px 10px rgb(2 40 28 / 0.2);
}

.cert-card__topo {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cert-card__title {
  font-size: 22px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--brand-850);
}

.cert-card__desc {
  font-size: 14px;
  line-height: 22px;
  font-weight: 300;
  color: var(--ink-muted);
}

/* Dentro do card a lista é de apoio, não é o conteúdo principal: fica um
   degrau abaixo do tamanho que ela tem nas outras dobras. */
.cert-card__specs {
  gap: 8px;
}

.cert-card__specs li {
  padding-left: 28px;
  font-size: 14px;
  line-height: 22px;
}

.cert-card__specs li::before {
  width: 18px;
  height: 18px;
  top: 2px;
  background-size: 11px 11px;
}

/* O preço encosta no rodapé do card: com dois cards de alturas diferentes, o
   `margin-top: auto` mantém os dois botões na mesma linha. */
.cert-card__preco {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.cert-card__de {
  font-size: 14px;
  font-weight: 300;
  color: var(--ink-muted);
}

.cert-card__por {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 30px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--brand-700);
}

.cert-card__nota {
  margin-top: 4px;
  font-size: 12px;
  line-height: 18px;
  font-weight: 300;
  color: var(--ink-muted);
}

/* Do tablet para cima o carrossel desaparece e os dois cards voltam a ser uma
   grade: tudo o que a trilha acrescentou é desfeito aqui. A partir de 768px
   os dois cabem lado a lado, e ver os dois de uma vez é o que ajuda na
   comparação. Deslizar só faz sentido quando um card já ocupa a tela. */
@media (min-width: 768px) {
  .certificados {
    padding-block: 88px;
  }

  .certificados__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: stretch;
    gap: 24px;
    margin-top: 56px;
    margin-inline: 0;
    padding: 16px 0 0;
    overflow: visible;
  }

  .cert-card {
    flex: initial;
    max-width: none;
    padding: 28px 24px;
  }

  .cert-card__flag {
    right: 24px;
  }
}

/* ================= 7. Para que serve / diferenciais ======================= */
.usos {
  background: #fff;
  padding-block: 64px;
}

.usos__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 48px;
}

.uso-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: #fff;
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .uso-card:hover {
    border-color: var(--brand-400);
    box-shadow: 0 12px 32px rgb(3 50 35 / 0.08);
  }
}

.uso-card__head {
  display: flex;
  align-items: center;
  gap: 16px;
}

.uso-card__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: var(--r-lg);
  background: var(--icon-soft);
  color: var(--brand-700);
}

.uso-card__icone svg {
  width: 24px;
  height: 24px;
}

.uso-card__title {
  font-size: 20px;
  line-height: 1.2;
  font-weight: 600;
  color: var(--brand-850);
}

.uso-card__sub {
  font-size: 13px;
  line-height: 20px;
  font-weight: 300;
  color: var(--ink-muted);
}

@media (min-width: 768px) {
  .usos {
    padding-block: 88px;
  }
  .usos__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .uso-card {
    padding: 40px 32px;
  }
}

/* --------------------------- Dobra dos diferenciais -----------------------
   Fotografia ao fundo com véu escuro por cima, e os cards em vidro deixando a
   imagem passar borrada. É o mesmo tratamento da dobra "A marca" do site
   oficial. A foto, inclusive, é a mesma.

   `isolation: isolate` cria o contexto de empilhamento onde a foto e o véu
   ficam atrás do conteúdo com z-index negativo, sem escapar para o resto da
   página.
   ------------------------------------------------------------------------ */
.diferenciais {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: 64px;
  background: var(--brand-900);
}

.diferenciais__image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  pointer-events: none;
}

/* O véu é o que garante o contraste do texto branco: sem ele, as áreas claras
   da foto derrubam a leitura. */
.diferenciais__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgb(4 22 16 / 0.78) 0%,
    rgb(4 22 16 / 0.7) 45%,
    rgb(4 22 16 / 0.74) 100%
  );
}

/* Sobre foto o --ink-soft fica em 4,7:1, no limite do mínimo. Sobre as faixas
   verdes sólidas ele continua; aqui o branco dá margem. */
.diferenciais .section-head__subtitle--light {
  color: rgb(255 255 255 / 0.9);
}

.diferenciais__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 48px;
}

/* Vidro: o branco translúcido deixa a foto passar e o desfoque a borra, para
   o texto continuar legível sobre a imagem. O filete claro em cima simula a
   quina iluminada. */
.dif-card {
  padding: 28px 24px;
  border: 1px solid rgb(255 255 255 / 0.18);
  border-top-color: rgb(255 255 255 / 0.38);
  border-radius: var(--r-xl);
  background: rgb(255 255 255 / 0.1);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16);
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

/* Sem suporte a backdrop-filter o card ficaria quase transparente sobre a foto
   e o texto sumiria: aí vira uma placa escura sólida. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .dif-card {
    background: rgb(6 26 19 / 0.8);
  }
}

/* ------------------- A entrada dos cards sobre a foto --------------------
   Cada card traz o seu próprio `data-reveal`, e não há `data-reveal-stagger`
   no contêiner: assim eles acendem um a um, conforme a pessoa desce, em vez
   de os quatro entrarem juntos quando a dobra assoma.

   O `data-reveal` do global.css é seguro aqui, mesmo com o aviso do backdrop
   root, porque o atributo está no PRÓPRIO card, que é quem carrega o
   `backdrop-filter`. O que quebra o vidro é um ANCESTRAL transformado ou
   translúcido, e nenhum ancestral destes cards recebe estilo nenhum. É a
   mesma situação das etiquetas de preço da hero, que entram assim desde
   sempre e continuam de vidro.

   A exceção é o `will-change`, que a especificação lista como criador de
   backdrop root por si só: aqui ele não vale a aposta e cai fora. São quatro
   cards pequenos, e o `backdrop-filter` já promove cada um a camada própria.
   ------------------------------------------------------------------------ */
.dif-card[data-reveal] {
  will-change: auto;
}

/* Do desktop para cima os quatro cards cabem na tela de uma vez e não há
   "descer por eles": a entrada perde o sentido e eles nascem prontos. É onde
   a grade vira quatro colunas. */
@media (min-width: 1024px) {
  .dif-card[data-reveal] {
    opacity: 1;
    transform: none;
  }
}

@media (hover: hover) and (pointer: fine) {
  .dif-card:hover {
    border-color: rgb(160 228 147 / 0.75);
    background: rgb(255 255 255 / 0.16);
    box-shadow:
      0 10px 26px rgb(0 0 0 / 0.22),
      inset 0 1px 0 rgb(255 255 255 / 0.2);
    transform: translateY(-3px);
  }
}

.dif-card__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 20px;
  border-radius: var(--r-lg);
  border: 1px solid rgb(160 228 147 / 0.28);
  background: rgb(160 228 147 / 0.14);
  color: var(--brand-200);
}

.dif-card__icone svg {
  width: 24px;
  height: 24px;
}

/* No card da parceria o quadrado do ícone dá lugar a uma plaqueta com a marca
   da Soluti. A altura é a mesma dos outros três, para os quatro títulos
   nascerem na mesma linha. O que muda é só a largura.

   O logo entra em 88px: no tamanho anterior ele competia com o título do
   card, e a marca da parceira não deve pesar mais que o texto do Grupo Axia. */
.dif-card__icone--marca {
  width: auto;
  padding-inline: 12px;
}

.dif-card__icone--marca img {
  width: 88px;
  height: auto;
}

.dif-card__title {
  margin-bottom: 8px;
  font-size: 17px;
  font-weight: 600;
  color: #fff;
}

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

@media (min-width: 640px) {
  .diferenciais__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

@media (min-width: 1024px) {
  .diferenciais__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* ---------------- O card de suporte some da tabulação também --------------
   Correção local, sem tocar no assets/css/support-card.css compartilhado.

   Escondido, o card fica em `opacity: 0` com `pointer-events: none`: some da
   tela e do mouse, mas o link de WhatsApp lá dentro continua na ordem de
   tabulação. Quem navega por teclado caía num link invisível, inalcançável
   pelo mouse e já marcado com `aria-hidden="true"` pelo support-card.js, ou
   seja, escondido também do leitor de tela. Um ponto morto no caminho.

   `visibility: hidden` é o que tira o elemento da tabulação de verdade.
   O atraso de 0,7s casa com a duração do fade: a visibilidade só vira
   `hidden` depois de o card ter terminado de sumir, então a animação de saída
   continua igual. Na entrada não há atraso, senão o card apareceria antes de
   poder receber foco.

   A barra do celular (.axia-sup) já usa `display: none` e não tem o problema.
   ------------------------------------------------------------------------ */
.support:not(.is-visible) {
  visibility: hidden;
  /* Em longhand de propósito. No atalho, `visibility 0s linear 0.7s` é lido
     como duração 0,7s mais atraso 0,7s, e não como duração zero: funciona, mas
     por acidente, e a visibilidade só cai 0,35s depois de o fade acabar.
     Separado, cada valor fica onde deve. */
  transition-property: opacity, translate, visibility;
  transition-duration: 0.7s, 0.7s, 0s;
  transition-timing-function: ease-out, ease-out, linear;
  transition-delay: 0s, 0s, 0.7s;
}

/* ------------------- O suporte flutuante sai da frente --------------------
   Enquanto a dobra de compra está na tela, o card (e a barra do celular) se
   recolhem: eles ficam exatamente onde ficam o botão de enviar e o resumo, e
   cobrir o CTA principal é o oposto do que se quer aqui. Quem liga e desliga
   a classe é o js/main.js.

   Os dois seletores têm .is-visible de propósito: é a classe que o
   assets/js/support-card.js aplica, e sem ela esta regra perderia para a de
   lá por especificidade.
   ------------------------------------------------------------------------ */
.support.is-visible.is-oculto,
.axia-sup.is-visible.is-oculto {
  opacity: 0;
  translate: 0 32px;
  pointer-events: none;
}


/* ========================== 8. Como funciona ==============================
   Os três passos da jornada. A dobra ocupa o lugar do formulário que existia
   aqui: com o preenchimento e o pagamento em páginas próprias, o que a landing
   precisa fazer neste ponto é dizer o que vem depois do clique.

   A grade sobe num degrau só: uma coluna até o tablet e três a partir de
   1024px. Não há degrau de duas colunas de propósito: com três itens, ele
   deixaria o terceiro sozinho na segunda linha.

   Os passos acendem conforme a página desce, e quem controla isso é o
   js/main.js, bloco 4. São três classes, e cada uma tem um estado próprio aqui
   embaixo: `is-pendente` (ainda não chegou), `is-feito` (já passou)
   e `is-ativo` (é onde a leitura está agora). Sem JavaScript nenhuma
   delas existe, e a dobra fica no estado neutro, que é o desenho de sempre.
   ========================================================================== */
.passos {
  background: #fff;
  padding-block: 64px;
}

/* ------------------------ A dobra presa no lugar -------------------------
   O palco é só altura, e a caixa de dentro gruda no topo enquanto ele passa.
   Enquanto isso acontece, a tela parece parada e o que muda é a jornada: o
   trilho enche e os passos acendem, um a um.

   É rolagem nativa, e essa é a diferença que importa. Nada de escutar a roda
   do mouse e cancelar o gesto: quem rola continua sendo a pessoa, então a
   barra de rolagem, o teclado, o Page Down, o "ir para o fim" e o gesto de
   rolar rápido continuam funcionando como em qualquer outra dobra.

   `--passo-preso` é o aviso para o js/main.js: com ele em 1, o bloco 4
   mede o progresso pelo quanto do palco já passou; em 0, volta a medir pela
   posição da lista na tela. Quem decide é o CSS, porque a decisão é de
   layout, e o JavaScript só lê a variável ao carregar e a cada
   redimensionamento, nunca a cada quadro.

   Fora do desktop a dobra não prende. Numa tela alta e estreita os três
   passos empilhados já ocupam quase tudo, e prender ali só faria a página
   parecer travada.
   ------------------------------------------------------------------------ */
.passos__palco {
  --passo-preso: 0;
}

@media (min-width: 1024px) {
  .passos__palco {
    --passo-preso: 1;
    /* 280vh: descontada a tela que fica visível, sobram 180vh de percurso,
       ou 60vh por passo. Mais que isso a dobra cansa; menos, os passos
       acendem antes de a pessoa ter lido o anterior. */
    height: 280vh;
  }

  .passos__fixo {
    position: sticky;
    top: 0;
    min-height: 100svh;
    display: grid;
    align-content: center;
    /* O recuo de cima tira o conteúdo de baixo da navbar e da faixa, as duas
       peças fixas que continuam por cima do palco. */
    padding-block: calc(88px + var(--faixa-altura)) 88px;
  }
}

/* Com "reduzir movimento" ligado nada prende: a dobra volta a ser uma seção
   comum. Prender é o oposto do que a preferência pede, porque tira da pessoa
   a correspondência direta entre o gesto e o que a tela faz. */
@media (prefers-reduced-motion: reduce) {
  .passos__palco {
    --passo-preso: 0;
    height: auto;
  }

  .passos__fixo {
    position: static;
    min-height: 0;
    padding-block: 0;
  }
}

.passos__lista {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-top: 48px;
}

.passo {
  position: relative;
}

.passo__numero {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--brand-900);
  border: 1px solid rgb(160 228 147 / 0.4);
  color: var(--brand-200);
  font-size: 14px;
  font-weight: 600;
}

.passo__title {
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--brand-850);
}

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

/* ------------------- Os três estados de cada passo -----------------------
   A duração vive numa variável para que círculo, número, título e texto mudem
   no mesmo tempo e na mesma curva: é o que faz a troca parecer um movimento
   só, em vez de quatro coisas acontecendo perto uma da outra.
   ------------------------------------------------------------------------ */
.passo {
  --passo-troca: 0.4s;
}

.passo__numero,
.passo__title,
.passo__text {
  transition:
    background-color var(--passo-troca) var(--ease-out-soft),
    border-color var(--passo-troca) var(--ease-out-soft),
    box-shadow var(--passo-troca) var(--ease-out-soft),
    color var(--passo-troca) var(--ease-out-soft),
    opacity var(--passo-troca) var(--ease-out-soft),
    scale var(--passo-troca) var(--ease-out-soft);
}

/* Ainda não chegou: recua, sem sumir. O texto continua legível porque a dobra
   fica à vista inteira de uma vez, e passo ilegível ao lado do aceso viraria
   um bloco cinza no meio da leitura. */
.passo.is-pendente .passo__numero {
  background: var(--icon-soft);
  border-color: var(--line);
  color: var(--ink-muted);
}

.passo.is-pendente .passo__title,
.passo.is-pendente .passo__text {
  opacity: 0.55;
}

/* Já passou: volta ao verde cheio, que é o desenho de sempre, com o filete do
   acento inteiro em vez de translúcido. */
.passo.is-feito .passo__numero {
  background: var(--brand-900);
  border-color: var(--brand-200);
  color: var(--brand-200);
}

/* É onde a leitura está: o círculo inverte, cresce um pouco e ganha o halo.
   O crescimento vai em `scale`, propriedade independente, e não em
   `transform`: o número já usa position e z-index para ficar acima do
   filete, e deixar o transform livre evita disputa se um dia ele precisar. */
.passo.is-ativo .passo__numero {
  background: var(--brand-200);
  border-color: var(--brand-200);
  color: var(--brand-900);
  scale: 1.08;
  box-shadow: 0 0 0 6px rgb(160 228 147 / 0.22);
}

.passo.is-ativo .passo__title {
  color: var(--brand-700);
}

.passo.is-ativo .passo__text {
  color: var(--ink);
}

/* As três linhas de segurança que ficavam ao lado do botão do formulário
   antigo. O formulário saiu; o que elas diziam continua valendo, e é aqui que
   a pessoa decide se começa. */
.passos__seguranca {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 48px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--icon-soft);
}

.passos__seguranca li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
  color: var(--brand-850);
}

.passos__seguranca svg {
  flex: 0 0 20px;
  color: var(--brand-700);
}

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

  .passos__seguranca {
    flex-direction: row;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
  }
}

@media (min-width: 1024px) {
  .passos__lista {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  /* O filete atrás dos círculos nasce no centro do primeiro e morre no centro
     do último, por isso os recuos laterais de 24px (metade do círculo). Só
     existe quando os três estão numa fila; empilhados, ele cruzaria o texto. */
  .passos__lista::before {
    content: "";
    position: absolute;
    top: 24px;
    left: 24px;
    right: 24px;
    height: 1px;
    background: var(--line);
  }

  /* O trilho aceso, por cima do filete. A largura é a fração que o js/main.js
     escreve em `--passo-progresso`, e não há transição nela de propósito:
     assim ela acompanha a rolagem quadro a quadro, e o traço parece puxado pelo
     dedo em vez de perseguir a página com atraso.

     O brilho na ponta é uma sombra, e não um elemento: o traço tem 1px de
     altura, e um ponto de verdade ali pediria mais uma caixa só para posicionar. */
  .passos__lista::after {
    content: "";
    position: absolute;
    top: 24px;
    left: 24px;
    width: calc((100% - 48px) * var(--passo-progresso, 0));
    height: 1px;
    background: linear-gradient(90deg, var(--brand-700), var(--brand-200));
    box-shadow: 0 0 10px rgb(160 228 147 / 0.75);
  }
}

/* ===================== 9. Os dois botões do fecho =========================
   O fecho deixou de mandar a pessoa subir de volta para os cards: aqui embaixo
   ela já leu a página e sabe qual quer, então cada botão leva direto para a
   primeira etapa do produto correspondente.
   ========================================================================== */
.fecho__acoes {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 380px;
  margin-top: 8px;
}

.fecho__nota {
  margin-top: 16px;
  font-size: 13px;
  line-height: 20px;
  font-weight: 300;
  color: rgb(255 255 255 / 0.72);
}

/* Contorno claro sobre o card escuro, para o segundo botão não competir com o
   primeiro. Mesma mecânica do .btn--outline do global.css, com o traço em
   branco em vez de verde. */
.btn--ghost-light {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 0.5);
  background: transparent;
  color: #fff;
}

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

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

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

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

.btn--ghost-light:active::before {
  background: rgb(255 255 255 / 0.22);
  transform: scale(1);
}

@media (min-width: 560px) {
  .fecho__acoes {
    flex-direction: row;
    justify-content: center;
    max-width: none;
  }
}
/* ====================== 10. Perguntas frequentes =========================
   Mesmo componente do site oficial: um item aberto por vez e o sinal do
   círculo acompanhando o estado.
   ========================================================================== */
.axia-faq {
  background: #fff;
  padding-block: 64px;
}

.axia-faq__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

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

/* Abaixo de 1024px a dobra é uma coluna só, e nela o texto à esquerda deixa a
   abertura torta: título, linha de apoio e botão terminam cada um numa borda
   diferente, sem um segundo elemento ao lado para justificar o alinhamento. É a
   mesma decisão que a hero e o rodapé oficial tomam. Em 1024 o bloco volta a
   ser a coluna lateral fixa, ao lado da lista, e a esquerda faz sentido de novo. */
@media (max-width: 1023px) {
  .axia-faq__aside {
    align-items: center;
    text-align: center;
  }
}

.axia-faq__title {
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--brand-850);
  font-size: clamp(32px, 4.5vw, 48px);
}

.axia-faq__desc {
  font-weight: 300;
  line-height: 1.75;
  color: var(--ink-muted);
  font-size: clamp(15px, 1.5vw, 18px);
}

.axia-faq__cta {
  margin-top: 8px;
}

.axia-faq__list {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.axia-faq__item {
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: #fff;
  padding: 20px 24px;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
  .axia-faq__item:hover {
    border-color: var(--brand-700);
  }
}

.axia-faq__item.is-open {
  border-color: var(--brand-700);
  box-shadow: 0 6px 16px rgb(3 50 35 / 0.08);
}

.axia-faq__q {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
}

.axia-faq__chev {
  display: flex;
  height: 32px;
  width: 32px;
  flex: 0 0 32px;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: var(--icon-soft);
  color: var(--ink);
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  transition:
    background 0.25s ease,
    color 0.25s ease;
}

.axia-faq__item.is-open .axia-faq__chev {
  background: var(--brand-900);
  color: #fff;
}

.axia-faq__a {
  margin-top: 16px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--ink-muted);
  font-size: clamp(15px, 1.4vw, 17px);
  animation: axiaFaqIn 0.25s ease-out;
}

/* Fechado, o item sai do fluxo sem tirar a resposta do DOM */
.axia-faq__item:not(.is-open) .axia-faq__a {
  display: none;
}

@keyframes axiaFaqIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (min-width: 768px) {
  .axia-faq {
    padding-block: 88px;
  }
  .axia-faq__item {
    padding: 24px 32px;
  }
}

@media (min-width: 1024px) {
  .axia-faq__inner {
    flex-direction: row;
    align-items: flex-start;
    gap: 80px;
  }

  /* Os 80px da navbar fixa mais 24px de respiro, e mais a faixa de anúncio,
     que também é fixa e fica acima dela. Sem somar a faixa o bloco parava
     alto demais e a navbar comia o título, que é o que se via na tela. Pelo
     --faixa-altura a conta acompanha a faixa nas duas alturas que ela tem. */
  .axia-faq__aside {
    flex: 0 0 34%;
    position: sticky;
    top: calc(104px + var(--faixa-altura));
  }
}

/* =========================== 11. Chamada final ============================
   Um card com foto de fundo dentro de uma dobra branca. Se a faixa fosse de
   borda a borda, ela encostaria no rodapé, que também é verde, e os dois
   virariam um bloco só.
   ========================================================================== */
.fecho {
  background: #fff;
  padding-block: 64px 96px;
}

/* `isolation` cria o contexto de empilhamento onde a foto e o véu moram: sem
   ele os dois z-index negativos escapariam do card e iriam parar atrás da
   dobra. `overflow: hidden` é o que faz a foto respeitar o canto arredondado.

   O degradê continua aqui e não é enfeite: os filhos de z-index negativo
   pintam DEPOIS do fundo do próprio elemento, então ele fica por baixo da foto
   e só aparece se a imagem não carregar. É o mesmo papel do `--brand-900` na
   dobra de diferenciais. */
.fecho__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 48px 24px;
  border-radius: var(--r-2xl);
  background: linear-gradient(to bottom, var(--brand-900), var(--brand-deep));
  text-align: center;
}

/* O enquadramento tira o papel de trás do texto, e faz isso com um valor só
   porque cada largura usa um eixo diferente do `object-position`. Com
   `cover`, quem sobra é sempre o eixo em que a foto é mais folgada que a
   caixa, e o outro encosta exato:

     no desktop  o card é uma faixa larga (proporção ~4:1) e a foto (3:2) entra
                 pela largura, então sobra altura e só o 30% vertical age;
     no celular  o card é mais alto que largo e a foto entra pela altura, então
                 sobra largura e só o 100% horizontal age.

   30% na vertical desce a faixa até a linha dos ombros: o documento sai de
   trás do título e do parágrafo e fica na altura do botão, que é opaco e não
   se importa. 100% na horizontal encosta o recorte na borda direita da foto,
   onde está o cliente. Um eixo nunca atrapalha o outro porque, na largura em
   que ele agiria, não há sobra nenhuma para ele mexer.

   No celular o 100% é o extremo e ainda sobra uma quina do papel na base do
   parágrafo: ali a caixa é mais alta que a foto é larga, então a altura
   inteira da imagem sempre aparece e o recorte não tem para onde fugir. Se um
   dia isso incomodar, o caminho é um <picture> com um corte próprio para o
   celular, não mais um ajuste aqui. */
.fecho__image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 100% 30%;
  pointer-events: none;
}

/* O véu é o que segura o contraste: o papel branco e a parede clara da foto
   derrubariam a leitura do texto. Mais fechado nas pontas, onde ficam o título
   e o botão, e um pouco mais aberto no meio, que é onde a foto aparece. */
.fecho__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgb(3 50 35 / 0.9) 0%,
    rgb(3 50 35 / 0.84) 45%,
    rgb(3 50 35 / 0.92) 100%
  );
}

.fecho__title {
  max-width: 20ch;
  font-size: clamp(26px, 4vw, 40px);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
}

.fecho__text {
  max-width: 52ch;
  font-size: 16px;
  line-height: 26px;
  font-weight: 300;
  color: var(--ink-soft);
}

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

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

/* ======================== 12. Movimento reduzido ==========================
   A política geral está no global.css. Aqui ficam só as exceções desta
   página: movimentos lentos e contínuos, que não são "susto", mantêm a
   duração.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .sucesso,
  .axia-faq__a {
    animation-duration: 0.25s !important;
  }

  /* O global.css zera a duração das transições, mas não o atraso. Sem esta
     regra, o escalonamento dos itens da opção marcada viraria o contrário do
     pedido: em vez de entrarem juntos e sem movimento, eles apareceriam de
     supetão um a cada 60ms. */
  .opcao__specs > span,
  .opcao__condicao {
    transition-delay: 0s !important;
  }

  /* O giro do botão é o sinal de que o envio está em curso: sem ele, o botão
     parece travado. */
  .btn.is-loading [data-enviar-rotulo]::after {
    animation-duration: 0.7s !important;
    animation-iteration-count: infinite !important;
  }
}

/* --------------------------- A seta dos botões ---------------------------
   Minimalista: uma haste e a ponta, no mesmo traço dos outros ícones. Ao
   passar o mouse ela anda 4px para a direita, que é o bastante para o botão
   parecer responder sem virar um salto.

   O movimento vai em `translate`, propriedade independente, e não em
   `transform`: alguns botões já usam transform no hover, e as duas coisas
   brigariam pela mesma declaração.

   Só onde há mouse de verdade: no toque não existe hover, e sem a cerca a
   seta ficaria deslocada depois do primeiro toque.
   ------------------------------------------------------------------------ */
.btn__seta {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  transition: translate 0.28s var(--ease-out-soft);
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover .btn__seta {
    translate: 4px 0;
  }
}