/* QuantoVale — tutorial.css: tela "Tutorial" (#/tutorial, set/2026). Prefixo tu-. Só tokens de base.css.
 * Três cartões (1 a 3) com a tela real de cada passo; viram 2 e 1 coluna conforme a largura. */
.tu-cab { margin: 0 0 18px; }
.tu-cab h1 { margin: 0 0 4px; }
.tu-cab .mut { font-size: 14.5px; max-width: 640px; }
.tu-passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; align-items: stretch; }
.tu-p { display: flex; flex-direction: column; gap: 8px; padding: 18px; min-width: 0; }
.tu-n { width: 30px; height: 30px; border-radius: 50%; background: var(--tinta); color: var(--papel); display: grid; place-items: center; font-weight: 700; font-size: 14px; flex: none; }
.tu-p h2 { font-size: 19px; margin: 6px 0 0; }
.tu-p p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--tinta2); }
.tu-img { display: block; width: 100%; height: 230px; object-fit: cover; object-position: left top; margin: 8px 0 6px; border: 1px solid var(--fio2); border-radius: 6px; background: var(--papel2); }
.tu-p .bt { margin-top: auto; align-self: flex-start; }

@media (max-width: 639px) {
  .tu-passos { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .tu-p { padding: 14px; }
  .tu-img { height: auto; }
}