/* =============================================================================
   Grupo Axia · Certificados Digitais
   checkout.css: a página do produto e as três etapas do checkout.

   Carrega depois do css/style.css nas páginas de pages/, e só nelas. A landing
   page não o carrega: lá não há mais formulário nem resumo de pedido.

   Boa parte deste arquivo veio da dobra "Área de compra" que existia no fim da
   landing page. Ela não foi recriada: foi movida para cá inteira, com os mesmos
   nomes de classe. É por isso que o formulário do carrinho tem exatamente a
   mesma aparência que tinha antes, sem uma linha de CSS duplicada entre os dois
   arquivos.

   Sumário
     1. Estrutura da etapa                 6. Etapa: pedido realizado
     2. Indicador de passos                7. Página do produto
     3. Área de compra                     8. A linha do produto no carrinho
     4. Peças compartilhadas               9. A revisão do pedido
     5. Etapa: pagamento                   10. Movimento reduzido
   ========================================================================== */

/* ======================= 1. Estrutura da etapa ============================
   Toda página da jornada tem a mesma moldura: cabeçalho enxuto, um título de
   etapa e o miolo. O recuo de cima soma a altura da navbar fixa, como na
   landing page, e por isso sai da mesma variável.

   As três últimas etapas não têm faixa de anúncio: ali a pessoa já decidiu, e
   relógio correndo durante o preenchimento é pressão, não informação. Nessas
   páginas o `--faixa-altura` é zerado e todo o resto se acomoda sozinho.
   ========================================================================== */
.etapa-sem-faixa {
  --faixa-altura: 0px;
}

/* O ritmo entre dobras é simétrico: o mesmo respiro em cima e embaixo. O
   recuo grande, que limpa a navbar e a faixa (as duas fixas), é só da
   primeira: ela é a única que passa por baixo delas.

   Antes ele valia para todas, e entre duas dobras davam 224px de vão (64 de
   baixo mais 160 de cima). A página ficava cheia de buraco, e o buraco crescia
   justamente onde o assunto mudava. */
.etapa {
  padding-block: 64px;
  background: var(--icon-soft);
}

main > .etapa:first-child {
  padding-top: calc(112px + var(--faixa-altura));
}

/* Duas dobras seguidas do mesmo fundo dividem o respiro em vez de somarem os
   dois: 88 embaixo mais 88 em cima davam 176px de vão, e como elas repartem o
   mesmo cinza o vão virava uma faixa vazia no meio da leitura, sem nada que a
   justificasse.

   Quando o fundo muda, a soma continua valendo: ali o vão não é buraco, é a
   moldura que separa a faixa clara das cinzas em volta. Por isso a regra pede
   que as duas vizinhas sejam do mesmo tipo. */
.etapa:not(.etapa--clara) + .etapa:not(.etapa--clara) {
  padding-top: 0;
}

.etapa--clara {
  background: #fff;
}

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

  main > .etapa:first-child {
    padding-top: calc(128px + var(--faixa-altura));
  }
}

/* O título da etapa, com a volta para a etapa anterior logo acima dele */
.etapa__topo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 40px;
}

.etapa__voltar {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-muted);
  transition: color 0.2s ease;
}

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

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

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

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

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

/* ======================= 2. Indicador de passos ==========================
   Onde a pessoa está e quanto falta. É a peça que faz as cinco páginas
   parecerem uma coisa só, e não cinco telas soltas.

   No celular vira uma linha de texto ("Passo 3 de 5") mais uma barra de
   progresso: cinco rótulos lado a lado não cabem sem virar letra miúda
   ilegível, e o que importa ali é a posição, não o nome de cada etapa.
   ========================================================================== */
.passos-jornada {
  margin-bottom: 32px;
}

.passos-jornada__resumo {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-muted);
}

.passos-jornada__resumo strong {
  font-size: 15px;
  font-weight: 600;
  color: var(--brand-850);
}

.passos-jornada__barra {
  height: 4px;
  margin-top: 12px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}

.passos-jornada__preenchido {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--brand-700);
  transition: width 0.4s var(--ease-out-soft);
}

/* A lista nomeada só aparece quando cabe */
.passos-jornada__lista {
  display: none;
}

@media (min-width: 768px) {
  .passos-jornada__resumo,
  .passos-jornada__barra {
    display: none;
  }

  .passos-jornada__lista {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .passos-jornada__item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-muted);
  }

  /* O filete entre um passo e o outro cresce para ocupar o vão; é ele que faz
     a fila parecer um caminho e não uma lista. */
  .passos-jornada__item:not(:last-child)::after {
    content: "";
    flex: 1 1 auto;
    min-width: 16px;
    height: 1px;
    background: var(--line);
  }

  .passos-jornada__item {
    flex: 1 1 auto;
  }

  .passos-jornada__item:last-child {
    flex: 0 0 auto;
  }

  .passos-jornada__marca {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #fff;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-muted);
  }

  /* Etapa cumprida: verde cheio com o visto. Etapa atual: verde na borda e no
     texto, para ela se distinguir das que já passaram sem virar um terceiro
     estilo. */
  .passos-jornada__item.is-feito .passos-jornada__marca {
    border-color: var(--brand-700);
    background: var(--brand-700);
    color: #fff;
  }

  .passos-jornada__item.is-atual {
    color: var(--brand-850);
    font-weight: 600;
  }

  .passos-jornada__item.is-atual .passos-jornada__marca {
    border-color: var(--brand-700);
    color: var(--brand-700);
  }
}

/* ==================== 3. Área de compra ===================================
   Movido da landing page sem alteração de nomes. Ver o cabeçalho deste
   arquivo. */
/* A dobra em si (fundo e recuo) agora vem do `.etapa`, que é a moldura comum
   das cinco páginas. Aqui sobrou o que é do arranjo em duas colunas: sem esta
   remoção, `.compra` venceria `.etapa` por vir depois no arquivo e o conteúdo
   subiria para trás da navbar fixa. */

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

.compra__form {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: #fff;
}

/* ------------------------------ Os campos --------------------------------
   O `.form` do forms.css é flex, e `display` vence o atributo `hidden`. A
   regra vale para os campos de pessoa jurídica, logo abaixo: no carrinho do
   e-CPF eles saem da tela e do formulário, e sem isto continuariam visíveis.
   ------------------------------------------------------------------------ */
.form__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.field--full {
  grid-column: 1 / -1;
}

.form__subtitulo {
  padding-top: 8px;
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Campo escondido pela troca de produto: `hidden` sozinho perderia a briga
   com o `display: flex` do .field. */
.field[hidden] {
  display: none;
}

/* Aviso geral do envio (o que aparece quando algum campo está inválido) */
.form__aviso {
  font-size: 13px;
  line-height: 20px;
  color: var(--danger);
}

.form__aviso:empty {
  display: none;
}

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

.form__seguranca li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  line-height: 20px;
  font-weight: 300;
  color: var(--ink-muted);
}

.form__seguranca svg {
  width: 16px;
  height: 16px;
  color: var(--brand-700);
}

/* O botão de envio e a lista de segurança respiram mais que os campos */
.form > [data-enviar] {
  margin-top: 8px;
}

/* Enquanto envia, o rótulo dá lugar a um giro de 16px */
.btn.is-loading {
  pointer-events: none;
  opacity: 0.75;
}

.btn.is-loading [data-enviar-rotulo]::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 8px;
  vertical-align: -3px;
  border: 2px solid rgb(255 255 255 / 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: girar 0.7s linear infinite;
}

@keyframes girar {
  to {
    transform: rotate(360deg);
  }
}

/* --------------------------- Resumo do pedido ----------------------------
   O card do certificado escolhido é verde, não branco: ele fica ao lado de um
   formulário branco, sobre uma dobra clara, e é o único bloco da tela que
   responde "o que estou comprando". Em branco ele se dissolvia no entorno;
   em verde vira o ponto de parada do olho, e o preço passa a ser lido antes
   dos campos.

   Daqui para baixo tudo é a inversão do card claro: texto claro, filetes em
   branco translúcido e o preço no verde de acento, que é o único que tem
   contraste sobre o fundo escuro.
   ------------------------------------------------------------------------ */
.resumo__card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border-radius: var(--r-xl);
  background: linear-gradient(to bottom, var(--brand-900), var(--brand-deep));
  box-shadow: 0 16px 40px rgb(3 50 35 / 0.18);
}

.resumo__title {
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-200);
}

.resumo__produto {
  font-size: 24px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
}

/* O nome do produto e o tipo são um par: o tipo cola no nome, não na lista */
.resumo__tipo {
  margin-top: -12px;
  font-size: 14px;
  font-weight: 300;
  color: rgb(255 255 255 / 0.7);
}

/* A lista herda o visto do bloco de peças recorrentes, desenhado para fundo
   claro. Aqui o disco e o traço trocam de lado: fundo verde translúcido e
   visto em verde claro. */
.resumo__specs li {
  color: rgb(255 255 255 / 0.8);
}

.resumo__specs li::before {
  background-color: rgb(160 228 147 / 0.16);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a0e493' 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");
}

.resumo__precos {
  padding-top: 16px;
  border-top: 1px solid rgb(255 255 255 / 0.15);
}

.resumo__linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
  font-weight: 300;
  color: rgb(255 255 255 / 0.7);
}

.resumo__linha--total {
  margin-top: 8px;
}

.resumo__linha--total strong {
  font-size: 32px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--brand-200);
}

.resumo__desconto {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 13px;
  line-height: 20px;
  font-weight: 300;
  color: rgb(255 255 255 / 0.7);
}


.resumo__rodape {
  padding-top: 16px;
  border-top: 1px solid rgb(255 255 255 / 0.15);
  font-size: 13px;
  line-height: 20px;
  font-weight: 300;
  color: rgb(255 255 255 / 0.7);
}

@media (min-width: 768px) {
  .compra__form {
    padding: 40px 32px;
  }
  .resumo__card {
    padding: 32px;
  }
}

@media (min-width: 1024px) {
  .compra__grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
  }

  /* 104px = os 80px da navbar fixa mais 24px de respiro */
  .resumo {
    position: sticky;
    top: 104px;
  }
}

/* ============= 4. Peças compartilhadas entre produto e etapas ============
   O convite de troca de certificado e os blocos de informação. Aparecem na
   página do produto e podem ser reaproveitados por qualquer etapa que precise
   apresentar um bloco de texto em card.
   ========================================================================== */

/* --------------------- A troca de certificado ----------------------------
   Um convite discreto, não um segundo botão de compra: quem chegou aqui já
   escolheu, e o lugar de comparar os dois é a landing page. */
/* `margin-top: auto` empurra a caixa para a base da coluna, e o
   `align-self` devolve a largura inteira, que o `align-items: flex-start`
   da coluna tinha encolhido. Juntos, é o que faz o fim do texto emparelhar com
   o fim do card ao lado. */
.troca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-self: stretch;
  gap: 8px 12px;
  margin-top: auto;
  padding-top: 24px;
  padding: 16px 20px;
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  font-size: 14px;
  line-height: 22px;
  font-weight: 300;
  color: var(--ink-muted);
}

.troca a {
  font-weight: 600;
  color: var(--brand-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------------------- Requisitos e aplicações -------------------------- */
.etapa__blocos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

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

/* ========================= Onde usar, em cards ===========================
   Um card por uso: ícone em cima, título, e uma linha dizendo onde aquilo
   acontece. Antes era uma lista de vistos, e o nome do uso sozinho não dizia
   muito: "acessar sistemas governamentais" pode ser qualquer coisa. O card
   tem lugar para a frase que faltava.

   Abaixo de 1024px a trilha desliza com o dedo por `scroll-snap` nativo, sem
   biblioteca: a inércia e o atrito são os do próprio sistema. É o mesmo
   arranjo dos cards de preço da landing page. Do desktop para cima ela vira
   grade de três colunas e para de rolar.
   ========================================================================== */
.usos-cards__title {
  margin-bottom: 20px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--brand-850);
}

/* A trilha sangra até a borda da tela pelas margens negativas, e devolve o
   respiro como recuo interno: assim o primeiro card começa alinhado com o
   texto, e o último pode encostar na borda ao rolar, em vez de parar antes
   dela. */
.usos-cards {
  display: flex;
  gap: 16px;
  margin-inline: calc(var(--pad) * -1);
  padding: 4px 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 some: quem diz que há mais card é o pedaço do próximo à mostra */
  scrollbar-width: none;
}

.usos-cards::-webkit-scrollbar {
  display: none;
}

.uso-item {
  display: flex;
  flex: 0 0 78%;
  max-width: 340px;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: #fff;
  scroll-snap-align: start;
  /* O card em repouso já carrega a sombra em zero: animar de "none" para uma
     sombra não interpola, e a entrada sairia seca. */
  box-shadow: 0 0 0 rgb(3 50 35 / 0);
  transition:
    border-color 0.32s var(--ease-out-soft),
    box-shadow 0.32s var(--ease-out-soft),
    translate 0.32s var(--ease-out-soft);
}

/* O último encaixa pelo fim, e não pelo começo: com o card ocupando 78% da
   trilha, a borda esquerda dele nunca alcança a borda esquerda da trilha, e o
   ponto de encaixe ficaria fora do alcance. Com `mandatory`, ponto fora de
   alcance faz o arrasto ser puxado de volta e o gesto parece não pegar. */
.usos-cards > .uso-item:last-child {
  scroll-snap-align: end;
}

.uso-item__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 4px;
  border-radius: var(--r-md);
  background: var(--icon-soft);
  color: var(--brand-700);
  transition:
    background-color 0.32s var(--ease-out-soft),
    color 0.32s var(--ease-out-soft);
}

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

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

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

/* O destaque ao passar o mouse: o card sobe 4px, a borda ganha cor e a sombra
   aparece. Só onde há mouse de verdade: no toque não existe hover, e sem esta
   cerca o card ficaria preso no estado destacado depois do primeiro toque.

   A subida vai em `translate`, propriedade independente, e não em
   `transform`: deixa o transform livre e evita disputa se um dia o card
   precisar de um. */
@media (hover: hover) and (pointer: fine) {
  .uso-item:hover {
    border-color: var(--brand-400);
    box-shadow: 0 14px 30px rgb(3 50 35 / 0.1);
    translate: 0 -4px;
  }

  .uso-item:hover .uso-item__icone {
    background: var(--brand-900);
    color: var(--brand-200);
  }
}

@media (min-width: 768px) {
  .usos-cards__title {
    font-size: 26px;
  }
}

/* Do desktop para cima os três cabem lado a lado, e ver os três de uma vez é
   o que ajuda a comparar: a trilha vira grade e tudo o que ela acrescentou é
   desfeito aqui. */
@media (min-width: 1024px) {
  .usos-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-inline: 0;
    padding: 4px 0 8px;
    overflow: visible;
  }

  .uso-item {
    flex: initial;
    max-width: none;
  }
}

/* ==================== O que você precisa ter, com foto ===================
   Foto de um lado, requisitos do outro. No celular a foto vai por cima, e não
   ao lado: numa coluna só, imagem lateral vira uma tira estreita que não
   mostra nada.

   Cada requisito tem ícone próprio. Numa lista de três linhas o visto repetido
   não distingue nada, e o ícone diz de que documento se trata antes da leitura.
   ========================================================================== */
.requisitos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
}

.requisitos__figura {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-xl);
  /* Cor de espera enquanto a foto carrega, no lugar do branco piscando */
  background: var(--icon-soft);
}

.requisitos__img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.requisitos__title {
  margin-bottom: 24px;
  font-size: 26px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--brand-850);
}

.requisitos__lista {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.requisitos__item {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 15px;
  line-height: 23px;
  font-weight: 500;
  color: var(--brand-850);
}

/* Círculo, e num cinza mais fechado que o da dobra. O `--icon-soft` é a
   mesma cor do fundo desta seção: o preenchimento existia, mas era invisível.
   O `--line` é o cinza claro seguinte da paleta, e o verde do ícone fica em
   contraste forte sobre ele. */
.requisitos__icone {
  display: inline-flex;
  flex: 0 0 52px;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--line);
  color: var(--brand-700);
}

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

.requisitos__nota {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  line-height: 20px;
  font-weight: 300;
  color: var(--ink-muted);
}

@media (min-width: 768px) {
  .requisitos {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    gap: 40px;
  }

  .requisitos__title {
    font-size: 32px;
  }
}

/* ======================= Compatibilidade de sistema ======================
   Os dois sistemas, cada um numa foto com a marca por cima. Quem chega aqui
   quer saber se roda na máquina dela, e reconhece o próprio sistema pelo logo
   antes de ler a palavra.

   O véu sobre a foto não é enfeite: o nome é branco, e as duas fotos têm
   cantos claros onde ele sumiria. Ele escurece de baixo para cima, que é onde
   o nome pousa.
   ========================================================================== */
/* A dobra inteira é centrada: título, linha de apoio, fotos, nota e botão. É
   o único bloco da página que fala de uma coisa só (roda ou não roda na minha
   máquina), e centrado ele se lê como um aviso, não como mais uma seção de
   texto corrido. */
.so__title {
  font-size: 26px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--brand-850);
}

.so__lead {
  margin: 10px auto 0;
  max-width: 60ch;
  font-size: 17px;
  line-height: 27px;
  font-weight: 300;
  text-align: center;
  color: var(--ink-muted);
}

/* As fotos são apoio, não protagonistas: elas mostram os dois sistemas de
   relance e saem do caminho. Por isso a fileira tem teto de largura em vez de
   ocupar a dobra inteira, e o recorte é deitado (16/9) em vez de 4/3. Sem o
   teto, cada card passava dos 580px e a fileira virava o assunto da dobra, no
   lugar do texto. */
.so__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 32px;
  max-width: 920px;
  margin-inline: auto;
}

.so-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--icon-soft);
  /* A sombra nasce em zero para poder interpolar: de `none` para uma sombra
     não há transição possível, e o destaque sairia seco. */
  box-shadow: 0 0 0 rgb(3 50 35 / 0);
  transition:
    box-shadow 0.32s var(--ease-out-soft),
    translate 0.32s var(--ease-out-soft);
}

/* `height: auto` não é enfeite: os atributos width/height do <img> entram
   como presentational hint e o height sobrevive ao `width: 100%`. Com altura e
   largura resolvidas, o `aspect-ratio` é ignorado, e o card ficava com os 600px
   do arquivo em vez dos 153 do recorte. */
.so-card__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: scale 0.45s var(--ease-out-soft);
}

/* O véu, por cima da foto e por baixo do nome */
.so-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgb(4 22 16 / 0) 52%,
    rgb(4 22 16 / 0.58) 100%
  );
}

.so-card__marca {
  position: absolute;
  left: 16px;
  bottom: 13px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}

.so-card__logo {
  width: 18px;
  height: 18px;
  color: #fff;
}

/* A maçã do vetor oficial é mais estreita e mais alta que o quadriculado da
   janela: sem este ajuste as duas marcas pousariam com pesos diferentes. */
.so-card__logo--apple {
  width: 16px;
  height: 19px;
  margin-bottom: 2px;
}

/* Só onde há mouse: no toque não existe hover, e sem a cerca o card ficaria
   preso no estado destacado depois do primeiro toque. */
@media (hover: hover) and (pointer: fine) {
  .so-card:hover {
    box-shadow: 0 16px 34px rgb(3 50 35 / 0.14);
    translate: 0 -4px;
  }

  .so-card:hover .so-card__img {
    scale: 1.04;
  }
}

/* Nota e botão dividem a largura dos cards e ficam centrados sob eles: o
   grupo inteiro (fileira, nota e botão) vira uma coluna só, alinhada pelo
   meio. Solto na largura da dobra, o texto ficava mais largo que as fotos que
   ele explica. */
.so__nota {
  max-width: 760px;
  margin: 22px auto 0;
  font-size: 14px;
  line-height: 22px;
  font-weight: 300;
  text-align: center;
  color: var(--ink-muted);
}

/* O botão é inline-flex, e margem automática não centra elemento em linha:
   por isso ele vira flex de largura sob medida antes de receber o auto. */
.so__cta {
  display: flex;
  width: fit-content;
  margin: 16px auto 0;
}

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

  .so__lead {
    font-size: 19px;
    line-height: 30px;
  }

  .so__cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .so__nota {
    font-size: 15px;
    line-height: 24px;
  }
}

.bloco-info {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: #fff;
}

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

/* ======================== 5. Etapa: pagamento ============================
   As formas de pagamento só existem na tela quando `PAGAMENTO.ativo` está
   ligado no js/config.js. Enquanto não houver gateway contratado, a etapa
   mostra o resumo e encaminha o pedido para a equipe: é a diferença entre uma
   tela honesta e uma vitrine de meios que ninguém consegue usar.
   ========================================================================== */
.metodos[hidden] {
  display: none;
}

.metodos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 24px;
}

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

/* Mesma mecânica dos cards de certificado do carrinho: radio de verdade por
   baixo, estado desenhado pelo :checked. */
.metodo__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.metodo__conteudo {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: #fff;
  font-size: 15px;
  font-weight: 500;
  color: var(--brand-850);
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.metodo__input:checked + .metodo__conteudo {
  border-color: var(--brand-700);
  box-shadow: 0 0 0 4px rgb(11 99 71 / 0.1);
}

.metodo__input:focus-visible + .metodo__conteudo {
  outline: 2px solid var(--brand-200);
  outline-offset: 3px;
}

/* ------------------------- O aviso do encaminhamento ---------------------
   Sem gateway, esta é a explicação do que vai acontecer ao clicar. Fica em
   destaque porque é a informação que evita a pergunta "e agora?". */
.aviso {
  display: flex;
  gap: 12px;
  padding: 20px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand-700);
  border-radius: var(--r-md);
  background: var(--icon-soft);
  font-size: 14px;
  line-height: 22px;
  font-weight: 300;
  color: var(--ink-muted);
}

.aviso svg {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: var(--brand-700);
}

.aviso strong {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
  color: var(--ink);
}

/* ==================== 6. Etapa: pedido realizado ========================= */
.confirmacao {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 640px;
  margin-inline: auto;
  padding: 40px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: #fff;
  text-align: center;
}

.confirmacao__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--brand-200);
  color: var(--brand-900);
}

.confirmacao__icone svg {
  width: 36px;
  height: 36px;
}

/* As três páginas de retorno usam o mesmo bloco, e só a cor do ícone muda. Ela
   é o primeiro sinal que a pessoa lê, antes de qualquer texto: verde para pago,
   âmbar para "ainda não deu", vermelho para recusado. O texto diz o mesmo logo
   abaixo — a cor sozinha nunca carrega a informação. */
.confirmacao__icone--pendente {
  background: #fdf1d0;
  color: #8a6100;
}

.confirmacao__icone--erro {
  background: #f7dedc;
  color: var(--danger);
}

/* A linha que aparece quando o endereço afirma uma situação diferente da
   página. Nasce escondida no HTML e o js/retorno.js a revela. */
.confirmacao__divergencia {
  max-width: 46ch;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--icon-soft);
  font-size: 14px;
  line-height: 22px;
  font-weight: 300;
  color: var(--ink-muted);
}

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

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

/* O protocolo é a referência que a pessoa cita ao falar com a equipe. Fonte
   tabular e letra espaçada para ele ser lido em voz alta sem erro. */
.confirmacao__protocolo {
  padding: 12px 20px;
  border: 1px dashed var(--brand-400);
  border-radius: var(--r-md);
  background: var(--icon-soft);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: var(--brand-850);
}

.confirmacao__acoes {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin-top: 8px;
}

@media (min-width: 560px) {
  .confirmacao__acoes {
    flex-direction: row;
    justify-content: center;
  }
}

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

/* ----------------------- Os próximos passos ------------------------------ */
.proximos {
  max-width: 640px;
  margin: 32px auto 0;
}

.proximos__title {
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: 600;
  color: var(--brand-850);
  text-align: center;
}

.proximos__lista {
  display: flex;
  flex-direction: column;
  gap: 16px;
  counter-reset: proximos;
}

.proximos__lista li {
  position: relative;
  padding-left: 44px;
  font-size: 15px;
  line-height: 24px;
  font-weight: 300;
  color: var(--ink-muted);
  counter-increment: proximos;
}

.proximos__lista li::before {
  content: counter(proximos);
  position: absolute;
  left: 0;
  top: -2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--brand-900);
  color: var(--brand-200);
  font-size: 13px;
  font-weight: 600;
}


/* ====================== 7. Página do produto =============================
   A página que vem ANTES do checkout: é onde a pessoa lê o que é o certificado
   e decide comprar. Não é uma etapa numerada, e por isso não tem o indicador
   de passos: dizer "passo 1 de 4" enquanto ela ainda está decidindo daria a
   impressão de que a compra já começou.
   ========================================================================== */

/* A primeira dobra: o certificado à esquerda, o preço e o botão à direita. É a
   mesma divisão em duas colunas das etapas seguintes, e de propósito: quem
   chega ao carrinho já viu esse arranjo e sabe onde procurar o preço. */
/* `stretch` em vez de `start`: as duas colunas passam a ter a mesma altura,
   e é isso que permite a caixa de troca descer até a base. Com `start` a
   coluna de texto parava na própria altura (255px contra 632px da direita), e a
   dobra ficava com um degrau de quase 400px no meio. */
.produto-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: stretch;
  margin-top: 24px;
}

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

.produto-hero__specs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.produto-hero__specs li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 24px;
  font-weight: 300;
  color: var(--ink-muted);
}

/* Cada item traz o seu próprio ícone no HTML, como na faixa de confiança da
   landing. Eram três checks iguais desenhados por ::before: diziam "sim" três
   vezes sem informar do que o item tratava. Em 20px o desenho ainda se lê;
   dentro do disco de 12px que o check ocupava, não se leria.

   O `align-items: flex-start` com o recuo de 2px alinha o ícone à primeira
   linha, e não ao centro do bloco, para o item que quebra em duas linhas no
   celular continuar com o ícone junto ao começo do texto. */
.produto-hero__specs .icon {
  margin-top: 2px;
  color: var(--brand-700);
}

/* A coluna da direita empilha o resumo, o botão e o convite de troca */
.etapa__lateral {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 1024px) {
  .produto-hero {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 40px;
  }

  /* 104px = a navbar fixa mais 24px de respiro, mais a faixa quando existe */
  .etapa__lateral {
    position: sticky;
    top: calc(104px + var(--faixa-altura));
  }
}

/* Abaixo do desktop o preço sobe para antes do texto: é a informação que a
   pessoa procura primeiro numa página de produto. */
@media (max-width: 1023px) {
  .etapa__lateral,
  .resumo {
    order: -1;
  }
}

/* --------------------------- Títulos das dobras -------------------------- */
.bloco-titulo {
  margin-bottom: 32px;
  font-size: 26px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--brand-850);
  text-align: center;
}

@media (min-width: 768px) {
  .bloco-titulo {
    font-size: 32px;
  }
}

/* ------------------------- Como emitir: os três passos -------------------
   Compre, valide e instale. São os passos que acontecem DEPOIS da compra, e
   ficam aqui porque são a dúvida que mais aparece antes dela: responder na
   página do produto evita que a pessoa saia do carrinho para procurar. */
.emissao {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

.emissao__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;
}

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

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

@media (min-width: 768px) {
  .emissao {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }

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

/* -------------------------- Blocos de informação ------------------------- */
.bloco-info__texto {
  font-size: 15px;
  line-height: 24px;
  font-weight: 300;
  color: var(--ink-muted);
}

.bloco-info__texto strong {
  font-weight: 600;
  color: var(--ink);
}

.bloco-info__nota {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  line-height: 20px;
  font-weight: 300;
  color: var(--ink-muted);
}

/* ===================== 8. A linha do produto no carrinho =================
   O que está sendo comprado, no topo do formulário do carrinho: produto à
   esquerda, preço à direita, como numa nota. O resumo da coluna ao lado
   repete o valor de propósito — ali ele é o total, aqui é o item.
   ========================================================================== */
.item-pedido {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.item-pedido__nome {
  font-size: 18px;
  font-weight: 600;
  color: var(--brand-850);
}

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

.item-pedido__preco {
  font-size: 20px;
  font-weight: 600;
  color: var(--brand-700);
  white-space: nowrap;
}

/* ======================== 9. A revisão do pedido =========================
   A lista de dados conferidos, no pagamento e na confirmação. Era a
   `.sucesso__resumo` do painel de sucesso da landing page; virou `.revisao`
   quando o painel virou página, porque o nome antigo já não descrevia nada.
   ========================================================================== */
.revisao {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 16px;
  margin-bottom: 24px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--icon-soft);
  text-align: left;
  font-size: 14px;
  line-height: 22px;
}

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

.revisao dd {
  margin: 0;
  font-weight: 500;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* ======================= 10. Movimento reduzido ==========================
   A política geral está no global.css. Aqui fica só a exceção desta parte do
   projeto: a barra de progresso das etapas mantém a duração, porque o
   deslizamento dela é o que comunica que a pessoa avançou.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .passos-jornada__preenchido {
    transition-duration: 0.4s !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;
  }
}

/* ========================== A barra de compra ============================
   Fica logo abaixo da navbar e da faixa, as duas fixas, e por isso o `top`
   soma as duas alturas: a da faixa pela variável, a da navbar pelo mesmo 80
   que o resto do projeto usa.

   Ela desliza para dentro em vez de piscar. O deslocamento vai em
   `translate` e a opacidade acompanha, as duas na mesma curva, para a
   entrada parecer um movimento só. Fechada, ela some da tabulação por
   `visibility`: sem isso o botão "Comprar" dela continuaria alcançável pelo
   teclado com a barra fora da tela.
   ========================================================================== */
.barra-compra {
  position: fixed;
  inset-inline: 0;
  /* No lugar da navbar, não abaixo dela: a barra ocupa a mesma faixa da tela,
     logo sob a faixa de anúncio. As duas nunca aparecem juntas. */
  top: var(--faixa-altura);
  /* Acima do 50 do header: enquanto uma sai e a outra entra, elas se cruzam no
     mesmo lugar, e é a barra que deve ficar por cima nessa passagem. */
  z-index: 55;
  background: linear-gradient(90deg, var(--brand-900), var(--brand-deep));
  box-shadow: 0 10px 30px rgb(3 50 35 / 0.18);
  opacity: 0;
  translate: 0 -100%;
  visibility: hidden;
  transition:
    opacity 0.32s var(--ease-out-soft),
    translate 0.32s var(--ease-out-soft),
    visibility 0s linear 0.32s;
}

.barra-compra[hidden] {
  display: none;
}

.barra-compra.is-visivel {
  opacity: 1;
  translate: 0 0;
  visibility: visible;
  transition:
    opacity 0.32s var(--ease-out-soft),
    translate 0.32s var(--ease-out-soft),
    visibility 0s linear 0s;
}

/* --------------------- A troca entre navbar e barra ----------------------
   O header sobe e some no mesmo tempo em que a barra desce: são dois
   movimentos na mesma direção, e é isso que faz a passagem parecer uma troca
   de conteúdo, e não duas peças disputando o mesmo lugar.

   A transição vai em longhand porque a visibilidade precisa de atraso só na
   saída: escondida de imediato, o header sumiria antes de terminar de subir.
   Na volta o atraso é zero, senão ele desceria invisível.

   `visibility` é o que tira o header da tabulação de verdade. Sem isso o menu
   e o botão dele continuariam alcançáveis pelo teclado com o header fora da
   tela. É a mesma correção do card de suporte da landing. */
.header {
  transition-property: background-color, box-shadow, translate, visibility;
  transition-duration: 0.3s, 0.3s, 0.32s, 0s;
  transition-timing-function: ease, ease, var(--ease-out-soft), linear;
  transition-delay: 0s, 0s, 0s, 0s;
}

.header.is-recolhido {
  translate: 0 -100%;
  visibility: hidden;
  transition-delay: 0s, 0s, 0s, 0.32s;
}

.barra-compra__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 12px;
}

.barra-compra__nome {
  font-size: 16px;
  line-height: 1.25;
  font-weight: 600;
  color: #fff;
}

.barra-compra__validade {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 300;
  color: rgb(255 255 255 / 0.68);
}

.barra-compra__acao {
  display: flex;
  align-items: center;
  gap: 16px;
}

.barra-compra__preco {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--brand-200);
}

/* Abaixo de 560px o nome do certificado e o preço não cabem lado a lado com o
   botão. O nome fica, porque diz o que se está comprando; a validade sai. */
@media (max-width: 559px) {
  .barra-compra__validade {
    display: none;
  }

  .barra-compra__preco {
    font-size: 17px;
  }

  .barra-compra__acao {
    gap: 10px;
  }
}

@media (min-width: 768px) {
  .barra-compra__nome {
    font-size: 18px;
  }

  .barra-compra__preco {
    font-size: 24px;
  }
}