/**
 * A central de ajuda.
 *
 * Folha própria pelo mesmo motivo da de novidades: nada aqui é reaproveitado
 * pelas outras páginas, e um arquivo que só esta carrega é um arquivo que as
 * outras não baixam.
 *
 * Cores só por token de `site.css`. Um verde solto aqui é um verde que não
 * acompanha o dia em que a marca mudar de tom.
 */

/**
 * **O atributo `hidden` perde para qualquer `display`.**
 *
 * Esta página troca de estado escondendo caixas, e as caixas são `grid` ou
 * `flex` — sem esta linha, o esqueleto, o erro, o índice e o artigo aparecem os
 * quatro ao mesmo tempo, um embaixo do outro. Foi o primeiro defeito da página
 * de novidades e o primeiro da de assinatura; é o terceiro arquivo que precisa
 * dela.
 */
[hidden] {
  display: none !important;
}

/**
 * A margem lateral, que o `.wrap` do site não tem: numa tela estreita o texto
 * encostaria nas duas bordas. Mesma decisão da página de novidades, e presa a
 * esta página pelo mesmo motivo — promover para o `site.css` mudaria o
 * enquadramento das outras.
 *
 * Mais estreito que a landing: isto é página de leitura, e linha longa cansa.
 */
.pg-tutoriais .wrap {
  max-width: 940px;
  padding-inline: 22px;
}

@media (max-width: 520px) {
  .pg-tutoriais .wrap {
    padding-inline: 16px;
  }
}

/* ── o topo ──────────────────────────────────────────────────────────────── */

.tut-hero {
  padding: clamp(26px, 4vw, 48px) 0 0;
}

.tut-trilha {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--muted);
}

.tut-trilha a {
  color: var(--accent-3);
  text-decoration: none;
}

.tut-trilha a:hover {
  text-decoration: underline;
}

/** O olho: de que central é esta página. Do arquivo de design. */
.tut-olho {
  margin: 0 0 10px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
}

.tut-cabecalho h1 {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: clamp(26px, 4.2vw, 38px);
  font-weight: 700;
  line-height: 1.12;
  color: var(--ink);
}

.tut-cabecalho p {
  margin: 0;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-3);
}

/* ── a busca ─────────────────────────────────────────────────────────────── */

.tut-busca {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding: 0 14px;
  height: 46px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--panel);
}

.tut-busca:focus-within {
  border-color: var(--accent-line);
}

.tut-busca__lupa {
  display: flex;
  flex: none;
  color: var(--muted);
}

.tut-busca__campo {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
}

.tut-busca__campo::placeholder {
  color: var(--muted-2);
}

/* ── o corpo ─────────────────────────────────────────────────────────────── */

/**
 * Os atalhos de busca, embaixo do campo.
 *
 * São botões, e não links: eles não levam a lugar nenhum, escrevem no campo de
 * busca. Um `<a href="#">` aqui prometeria navegação e mexeria no histórico.
 */
.tut-atalhos {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.tut-atalhos__rotulo {
  margin-right: 2px;
  font-size: 12.5px;
  color: var(--muted-2);
}

.tut-atalho {
  height: 26px;
  padding: 0 12px;
  border: 1px solid var(--line-3);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-3);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

.tut-atalho:hover {
  border-color: var(--accent-line);
  color: var(--accent-2);
}

/**
 * A saída de quem a central não atendeu, no fim do índice.
 */
.tut-ajuda {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: clamp(20px, 3vw, 32px);
  padding: 16px 18px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: var(--panel);
}

.tut-ajuda__icone {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--accent-line);
  border-radius: 10px;
  background: var(--accent-fill);
  color: var(--accent-2);
}

.tut-ajuda__texto {
  display: grid;
  gap: 3px;
  flex: 1 1 240px;
  min-width: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}

.tut-ajuda__titulo {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}

.tut-corpo {
  padding: 26px 0 clamp(40px, 6vw, 76px);
}

/**
 * **O assunto deixou de ser um cartão e virou uma seção.**
 *
 * Do arquivo de design "waFast Central de ajuda". Com catorze assuntos, catorze
 * cartões empilhados viravam catorze retângulos iguais, e a página inteira
 * parecia uma lista de listas. Agora o assunto é um título com ícone, e o
 * cartão passou a ser a **gaveta** — que é o que a pessoa procura: ela não quer
 * "Atendimento", quer "a fila".
 */
.tut-assunto {
  margin-bottom: clamp(28px, 4vw, 44px);
}

.tut-assunto__cabeca {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 5px;
  flex-wrap: wrap;
}

/** Quantos artigos o assunto tem. Diz o tamanho antes de a pessoa rolar. */
.tut-assunto__contagem {
  font-size: 12.5px;
  color: var(--muted-2);
}

.tut-assunto__icone {
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--accent-line);
  border-radius: 10px;
  background: var(--accent-fill);
  color: var(--accent-2);
}

.tut-assunto__nome {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
}

/**
 * O resumo e as gavetas alinham pela borda do texto do título, e não pela do
 * ícone: é o que faz o ícone ler como marca do assunto, e não como marcador de
 * lista.
 */
.tut-assunto__resumo {
  display: block;
  margin: 0 0 16px 45px;
  max-width: 58ch;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}

.tut-gavetas {
  margin-left: 45px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr));
  gap: 12px;
}

/**
 * A gaveta é o cartão.
 *
 * Duas colunas num monitor comum, uma no celular: o `auto-fill` decide sozinho,
 * e o `min()` impede a coluna de 290px estourar a tela estreita.
 */
.tut-gaveta {
  padding: 13px 15px 15px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--panel);
}

.tut-gaveta:hover {
  border-color: var(--accent-line);
}

.tut-gaveta__nome {
  display: block;
  margin-bottom: 11px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.tut-gaveta__lista {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── uma linha de tutorial ───────────────────────────────────────────────── */

/**
 * **Sem seta, e sem moldura própria.**
 *
 * A seta existia para dizer "isto é clicável" numa linha solta. Dentro de um
 * cartão de três títulos ela vira três setas idênticas apontando para o mesmo
 * lugar, e o cartão fica com mais enfeite que texto. Quem diz que é link agora
 * é o título, que acende no hover.
 */
.tut-item {
  display: block;
  color: inherit;
  text-decoration: none;
}

.tut-item__texto {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.tut-item__titulo {
  display: block;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
}

.tut-item:hover .tut-item__titulo {
  color: var(--accent-2);
}

.tut-item__resumo {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}

@media (max-width: 620px) {
  .tut-assunto__resumo,
  .tut-gavetas {
    margin-left: 0;
  }
}

/* ── o artigo ────────────────────────────────────────────────────────────── */

/**
 * "Também chamado de": as palavras-chave viradas para quem lê.
 *
 * Elas ficam **depois** do texto, e antes dos vizinhos: são a confirmação de que
 * este era o artigo certo, e essa pergunta só aparece no fim.
 */
.tut-sinonimos {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid var(--line-2);
}

.tut-sinonimos__rotulo {
  font-size: 12.5px;
  color: var(--muted-2);
}

.tut-sinonimos__lista {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.tut-sinonimo {
  display: flex;
  align-items: center;
  height: 23px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--panel-2);
  font-size: 12px;
  color: var(--ink-3);
}

/**
 * A introdução é markdown como o resto, e um dedo maior que ele: é a primeira
 * coisa que se lê depois do título.
 *
 * O seletor tem as **duas** classes de propósito. Com `.tut-introducao` sozinha
 * ela perde para `.tut-md`, que vem depois no arquivo e tem a mesma força — e o
 * sintoma seria a introdução do mesmo tamanho do resto, que é uma diferença que
 * ninguém nota conferindo, só sentindo.
 */
/**
 * **A introdução virou uma caixa com um risco verde na borda.**
 *
 * Do arquivo de design "waFast Central de ajuda". Ela é a promessa do artigo —
 * "ao final você vai saber…" —, e como parágrafo solto ela se confundia com o
 * primeiro parágrafo do texto. A borda de um lado só separa sem virar mais um
 * cartão na página.
 */
.tut-introducao.tut-md {
  margin: 0 0 30px;
  max-width: 62ch;
  padding: 15px 18px;
  border: 1px solid var(--line-2);
  border-left: 2px solid var(--accent);
  border-radius: 12px;
  background: var(--panel);
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-2);
}

.tut-aviso {
  display: flex;
  gap: 11px;
  margin-bottom: 12px;
  padding: 13px 15px;
  border: 1px solid var(--amber-line);
  border-radius: 12px;
  background: var(--amber-fill);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}

.tut-aviso__icone {
  display: flex;
  flex: none;
  color: var(--amber);
}

/**
 * Os passos são uma `<ol>` de verdade, com a numeração desenhada por nós.
 *
 * Lista ordenada porque **é** uma: quem usa leitor de tela ouve "item 2 de 5",
 * que é metade da instrução. O número visível é `::before` do item, e não o
 * marcador nativo, porque ele precisa de fundo e de alinhamento com o texto.
 */
.tut-passos {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: passo;
}

.tut-passo {
  position: relative;
  counter-increment: passo;
  padding: 0 0 26px 46px;
}

.tut-passo::before {
  content: counter(passo);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--accent-line);
  border-radius: 50%;
  background: var(--accent-fill);
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-2);
}

/** A linha que liga um passo ao próximo. O último não tem para onde ligar. */
.tut-passo:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 36px;
  bottom: 8px;
  left: 15px;
  width: 1px;
  background: var(--line-2);
}

.tut-passo__texto {
  padding-top: 4px;
  max-width: 66ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
}

.tut-passo__texto > * {
  margin: 0 0 12px;
}

.tut-passo__texto > *:last-child {
  margin-bottom: 0;
}

/**
 * A dica ganhou a lâmpada do arquivo de design, e perdeu a palavra "Dica:".
 *
 * O ícone é um `background-image` em SVG, e não um `<svg>` no HTML: a dica é
 * desenhada em dois lugares — a página dinâmica e a página gerada —, e um ícone
 * no CSS chega nos dois sem cada um lembrar de o colocar.
 */
.tut-passo__dica {
  position: relative;
  margin-top: 10px;
  padding: 10px 13px 10px 36px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--panel-3);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-3);
}

.tut-passo__dica::before {
  content: '';
  position: absolute;
  top: 11px;
  left: 13px;
  width: 15px;
  height: 15px;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%2306cf9c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 22h4M12 2a7 7 0 0 0-4 12.7V18h8v-3.3A7 7 0 0 0 12 2z'/%3E%3C/svg%3E");
}

/**
 * A palavra "Dica" fica só para quem não vê o ícone.
 *
 * Ela continua no HTML de propósito: leitor de tela não lê `background-image`,
 * e uma caixa que começa do nada é uma frase sem contexto para quem ouve.
 */
.tut-passo__dica b {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── o índice do artigo ──────────────────────────────────────────────────── */

/**
 * Duas colunas na leitura: o texto e o índice.
 *
 * O índice é a segunda coluna e não a primeira — quem chega quer ler, não
 * escolher. Em tela estreita a coluna some, e não vira um acordeão no topo:
 * um sumário de três itens antes do texto empurra o texto para fora da tela.
 */
.tut-artigo-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  gap: clamp(28px, 4vw, 52px);
  align-items: start;
}

.tut-indice {
  position: sticky;
  top: 78px;
  min-width: 0;
}

.tut-indice__rotulo {
  display: block;
  margin-bottom: 12px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.tut-indice__lista {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  padding-left: 14px;
  border-left: 1px solid var(--line-3);
}

.tut-indice__item {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}

.tut-indice__item:hover {
  color: var(--accent-2);
}

.tut-indice__abrir {
  width: 100%;
  margin-top: 20px;
  justify-content: center;
}

@media (max-width: 940px) {
  .tut-artigo-grade {
    grid-template-columns: minmax(0, 1fr);
  }

  .tut-indice {
    display: none;
  }
}

/* ── o pé do artigo ──────────────────────────────────────────────────────── */

/**
 * **Os vizinhos viraram cartão.**
 *
 * Do arquivo de design. Sem a seta de cada linha — que saiu junto com o resto —
 * a lista solta no fim do texto virava mais parágrafo: títulos e resumos
 * empilhados sem nada dizendo onde acaba o artigo e começa o "e agora?".
 */
.tut-vizinhos {
  margin-top: 26px;
  padding: 14px 16px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--panel);
}

.tut-vizinhos__lista {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tut-vizinhos__titulo {
  display: block;
  margin-bottom: 11px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.tut-fim {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

/* ── os estados ──────────────────────────────────────────────────────────── */

.tut-vazio {
  display: grid;
  justify-items: start;
  gap: 8px;
  padding: 26px 22px;
  border: 1px dashed var(--line-3);
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

.tut-vazio__titulo {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}

.tut-vazio .btn {
  margin-top: 6px;
}

.tut-erro {
  display: flex;
  gap: 14px;
  padding: 22px;
  border: 1px solid var(--red-line);
  border-radius: 16px;
  background: var(--red-fill);
}

.tut-erro__icone {
  display: flex;
  flex: none;
  color: var(--red);
}

.tut-erro__texto h2 {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}

.tut-erro__texto p {
  margin: 0 0 14px;
  max-width: 62ch;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-3);
}

.tut-erro__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tut-assunto--esqueleto {
  display: grid;
  gap: 12px;
}

.tut-esqueleto {
  display: block;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--panel-2), var(--line-2), var(--panel-2));
  background-size: 200% 100%;
  animation: tut-brilho 1.4s ease-in-out infinite;
}

.tut-buscando {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--muted-2);
}

.tut-girando {
  display: flex;
  animation: tut-girar 0.9s linear infinite;
}

@keyframes tut-brilho {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}

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

/**
 * Quem pediu menos movimento não recebe movimento.
 *
 * As duas animações desta página são decorativas: o esqueleto continua dizendo
 * "carregando" parado, e o texto ao lado do giro diz a mesma coisa em palavras.
 */
@media (prefers-reduced-motion: reduce) {
  .tut-esqueleto,
  .tut-girando {
    animation: none;
  }
}

/* ── o markdown desenhado ────────────────────────────────────────────────── */
/**
 * O conteúdo escrito no admin: parágrafo, título, lista, citação, imagem e
 * vídeo. As regras são por elemento **dentro** de `.tut-md`, e não classes em
 * cada nó, porque quem cria os nós é o desenhador — e uma classe esquecida lá
 * viraria um parágrafo sem espaçamento que ninguém liga ao CSS.
 */
.tut-md {
  max-width: 68ch;
  font-size: 15px;
  line-height: 1.62;
  color: var(--ink-2);
}

.tut-md > * {
  margin: 0 0 14px;
}

.tut-md > *:last-child {
  margin-bottom: 0;
}

.tut-md__titulo {
  margin: 26px 0 10px;
  font-family: var(--display);
  font-weight: 600;
  color: var(--ink);
}

h3.tut-md__titulo {
  font-size: 19px;
}

h4.tut-md__titulo {
  font-size: 16px;
}

.tut-md__lista {
  padding-left: 22px;
}

.tut-md__lista li {
  margin-bottom: 6px;
}

.tut-md__citacao {
  padding: 4px 0 4px 16px;
  border-left: 2px solid var(--accent-line);
  color: var(--ink-3);
}

.tut-md__link {
  color: var(--accent-3);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tut-md__codigo {
  padding: 1px 6px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: var(--panel-3);
  font-family: var(--mono);
  font-size: 0.9em;
  color: var(--ink);
}

.tut-md__figura {
  margin: 18px 0;
}

.tut-md__figura img {
  display: block;
  max-width: 100%;
  border: 1px solid var(--line-2);
  border-radius: 12px;
}

.tut-md__figura figcaption {
  margin-top: 7px;
  font-size: 13px;
  color: var(--muted);
}

/**
 * O vídeo guarda a proporção com `aspect-ratio`, e não com o truque do
 * `padding-top: 56.25%`: o quadro precisa caber em tela de telefone sem que
 * ninguém calcule altura, e este site é lido em tela pequena.
 */
.tut-md__video {
  margin: 18px 0;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: #000;
  aspect-ratio: 16 / 9;
}

.tut-md__video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* O texto do passo é markdown, então ele herda o espaçamento de bloco. */
.tut-passo__texto > *:first-child {
  margin-top: 0;
}