/* ==========================================================================
   introducao.css — Sistema de Progresso · «Como funciona o progresso»
   Página de texto (FR03 de
   docs/specs/core/introducao-ao-progresso-e-avatar.md).
   Depends on abrigo-tokens.css.
   ========================================================================== */

.introducao-wrapper {
  /* Largura de leitura, e não a largura do ecrã: uma linha de texto corrido
     com 120 caracteres perde-se de uma linha para a outra. */
  max-width: 68ch;
  margin: 0 auto;
  font-family: var(--font-body);
  color: var(--color-text);
}

.introducao-cabecalho { margin-bottom: var(--space-6); }

.introducao-titulo {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 1.5rem;
  margin: 0;
}

.introducao-sub {
  margin: var(--space-3) 0 0;
  color: var(--color-text-soft);
  line-height: 1.65;
}

.introducao-seccao { margin-bottom: var(--space-6); }

.introducao-seccao h2 {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.1rem;
  margin: 0 0 var(--space-3);
  color: var(--color-primary);
}

.introducao-seccao p {
  margin: 0 0 var(--space-3);
  line-height: 1.7;
}

.introducao-seccao p:last-child { margin-bottom: 0; }

.introducao-lista {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-5);
  line-height: 1.7;
}

.introducao-lista li { margin-bottom: var(--space-2); }

/* --------------------------------------------------------------------------
   Saídas da página — o Caderno de Pista (externo) e o regresso aos trilhos
   -------------------------------------------------------------------------- */
.introducao-saidas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.introducao-btn {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: .6rem 1.2rem;
  border-radius: var(--radius);
  font-size: .9rem;
  font-weight: 600;
  transition: var(--transicao);
}

.introducao-btn--externo {
  background: var(--color-primary);
  color: #fff;
}
.introducao-btn--externo:hover { background: var(--color-primary-dark); }

.introducao-btn--voltar {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}
.introducao-btn--voltar:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* A nota que diz que a ligação sai do Abrigo (RN02). Discreta, mas presente:
   é texto do documento, não um `title` que só aparece ao passar o rato. */
.introducao-btn__nota {
  font-weight: 500;
  font-size: .75rem;
  opacity: .85;
}

.introducao-btn__marca { font-size: .85rem; }

@media (max-width: 600px) {
  .introducao-saidas { flex-direction: column; }
  .introducao-btn { justify-content: center; }
}