/* =============================================================
   AfroChip — PÁGINAS DE APOIO

   Como funciona, perguntas, compatibilidade e empresas: as quatro
   páginas que decidem se quem hesita compra ou fecha o separador.

   Folha própria enquanto esta peça se refaz em paralelo. Funde-se na
   `estilo.css` quando assentar — vem depois dela no <head>, mesma
   especificidade, e a última ganha.

   REGRA DESTA FOLHA: só entram classes que vivem nestas páginas. O
   ficheiro carrega em TODAS as páginas do site, e um selector largo
   escrito aqui pinta a loja inteira sem ninguém dar por isso.
   ============================================================= */


/* -------------------------------------------------------------
   OS TRÊS PASSOS, LADO A LADO

   Queixa do dono, com fotografia do ecrã: "o como funciona está a
   aparecer assim, com quebra de linhas e eu não quero assim".

   Era isto. `.passos` é uma grelha de UMA coluna em qualquer
   largura, e num portátil cada passo ficava com mais de mil pixels
   de largura para uma frase de duas linhas — a segunda com uma
   palavra sozinha ("pagar.") no meio de um vazio enorme. Três
   cartões empilhados também se lêem como uma lista comprida, e o
   que a página tem de dizer à primeira vista é o contrário: são só
   três coisas.

   A partir de 780 px ficam os três lado a lado, cada frase com
   medida de leitura e os três passos à vista sem rolar. Abaixo
   disso continuam empilhados, com o número à esquerda do texto, que
   no telemóvel é o que ocupa menos altura.

   Serve o "como funciona" e os três passos da página de empresas.

   A CLASSE MUDOU DE NOME, E NÃO FOI POR GOSTO. Chamava-se `passos`,
   e entretanto a barra de progresso do checkout — outra peça, outro
   ficheiro, `passos.css` — passou a chamar `.passos` à sua própria
   barra e a declarar-lhe `display: flex`. Duas coisas diferentes com
   o mesmo nome numa folha global: a barra do checkout ganhava, e
   estes cartões deixavam de ser grelha. `passos-guia` é só destas
   páginas, e as duas peças deixam de se pisar.

   Os cartões continuam a ser `.passo`, que é o que lhes dá o aspecto
   na `estilo.css`. Só a lista à volta mudou de nome.
   ------------------------------------------------------------- */
.passos-guia {
  display: grid;
  gap: clamp(20px, 3vw, 30px);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 780px) {
  .passos-guia {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }

  /* Em coluna o número deixa de disputar a largura com o texto: fica
     por cima, como um número de passo, e a frase ganha a coluna toda. */
  .passos-guia .passo {
    flex-direction: column;
    gap: 14px;
  }
}


/* -------------------------------------------------------------
   O TESTE DO *#06# TAMBÉM NA PÁGINA INICIAL

   O bloco da compatibilidade é o mesmo nos dois sítios, com tudo
   (decisão do dono). O que muda é o nível dos títulos: na página
   própria o bloco é <h1> e o teste é <h2>; na inicial o bloco é
   <h2> — o <h1> da inicial é o do herói — e o teste desce a <h3>.

   A `estilo.css` só veste o <h2>. Esta regra veste o <h3> com o
   mesmo tamanho, para o mesmo bloco ter o mesmo aspecto nas duas
   páginas.
   ------------------------------------------------------------- */
.verificador__eid h3 {
  margin: 0 0 8px;
  font-size: clamp(1rem, .96rem + .3vw, 1.12rem);
}


/* -------------------------------------------------------------
   O QUE PÔR NA MENSAGEM — PÁGINA DE EMPRESAS

   O bloco reaproveita a `.nota-bloco` da página da compatibilidade,
   que zera as margens dos parágrafos porque lá dentro só há um. Aqui
   há sobrancelha, texto de entrada, lista e nota: o espaçamento tem
   de voltar, e só dentro deste bloco.
   ------------------------------------------------------------- */
#pedido .nota-bloco .sobrancelha { margin-bottom: 10px; }
#pedido .nota-bloco > p { margin-bottom: 18px; }
#pedido .nota-bloco > p:last-child { margin-bottom: 0; }

/* A lista das quatro linhas que a mensagem tem de trazer. Herda os
   sinais da `.lista-vantagens`; só se recolhe o espaço final, que ali
   existe para separar a lista dos botões e aqui separa de uma nota. */
#pedido .pedido__lista { margin-bottom: 18px; }


/* -------------------------------------------------------------
   AS LIGAÇÕES DENTRO DE UMA RESPOSTA

   `a { color: inherit }` é regra da casa, e numa lista de perguntas
   deixava as ligações do mesmo tom do texto à volta: quem não passa
   o rato por cima não sabe que ali se pode carregar — e são estas
   ligações que levam o cliente da dúvida à página que a resolve.

   Fica a tinta cheia, meio grau de peso a mais e o traço por baixo
   em amarelo, grosso o suficiente para se ver num telemóvel ao sol.
   O amarelo é traço e fundo, nunca a letra: a palavra continua em
   tinta escura, como manda a marca.
   ------------------------------------------------------------- */
.pergunta__corpo a,
#pedido .nota-fina a {
  color: var(--tinta);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--amarelo);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  border-radius: 3px;
}

.pergunta__corpo a:hover,
.pergunta__corpo a:focus-visible,
#pedido .nota-fina a:hover,
#pedido .nota-fina a:focus-visible {
  background: var(--amarelo-luz);
}