/* Manual completo (guia.html) — camada específica.
   Depende de /site.css (tokens, reset, nav, botões, .shot, .paper, .callout,
   .final, rodapé). Aqui ficam só o layout de documentação e seus componentes.
   Classes com prefixo `m` (msteps/mstep/mtag) evitam colidir com os
   componentes homônimos do design system. */

/* ---------- Layout de documentação ---------- */
.manual {
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: clamp(28px, 4vw, 56px);
  padding: clamp(32px, 5vw, 52px) clamp(20px, 5vw, 64px) 0;
}
.docnav {
  position: sticky; top: 84px; align-self: start;
  max-height: calc(100vh - 104px); overflow-y: auto; padding-bottom: 30px;
  border-right: 1px solid var(--line-soft);
}
.docnav .grp {
  font-family: var(--fm); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brass); margin: 20px 0 8px;
}
.docnav .grp:first-child { margin-top: 0 }
.docnav a {
  display: block; font-size: 13px; color: var(--slate-d);
  padding: 5px 12px 5px 12px; border-left: 2px solid transparent;
  transition: color .12s, border-color .12s;
}
.docnav a:hover { color: var(--concrete) }
.docnav a.on { color: var(--brass); border-left-color: var(--brass) }

.doccontent { min-width: 0; padding-bottom: 60px }
.doccontent section { scroll-margin-top: 84px; padding: clamp(30px, 4vw, 44px) 0; border-top: 1px solid var(--line-soft) }
.doccontent section:first-child { border-top: 0; padding-top: 4px }
.doccontent h2 { font-size: clamp(23px, 3vw, 34px); margin-top: 8px; text-wrap: balance; color: var(--concrete-2) }
.doccontent h3 { font-size: clamp(17px, 2vw, 20px); letter-spacing: -.01em; margin-top: 30px; color: var(--concrete-2) }
.doccontent p { color: var(--slate-d); margin-top: 12px; max-width: 72ch }
.doccontent p b, .doccontent li b { color: var(--concrete); font-weight: 600 }
.doccontent .lead2 { font-size: 16px; max-width: 74ch }

ul.plain { margin-top: 14px; padding-left: 0; list-style: none; max-width: 74ch }
ul.plain li { color: var(--slate-d); font-size: 14px; padding: 5px 0 5px 20px; position: relative }
ul.plain li::before {
  content: ""; position: absolute; left: 2px; top: 13px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--brass); opacity: .7;
}

/* ---------- Tabela de referência ---------- */
.reftable { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 14px }
.reftable th {
  text-align: left; font-family: var(--fm); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--slate-d);
  padding: 8px 12px; border-bottom: 1px solid rgba(255, 255, 255, .14); font-weight: 400;
}
.reftable td { padding: 11px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: top; color: var(--slate-d) }
.reftable td:first-child { white-space: nowrap; width: 1% }
.reftable td b { color: var(--concrete); font-weight: 600; font-family: var(--fd); font-size: 14px }
.reftable tr:hover td { background: rgba(255, 255, 255, .02) }
@media (max-width: 640px) { .reftable td:first-child { white-space: normal } }

/* ---------- Passos do manual ---------- */
.msteps { margin-top: 22px; display: grid; gap: 0 }
.mstep { display: grid; grid-template-columns: auto 1fr; gap: 18px; padding: 18px 0; border-top: 1px solid var(--line-soft) }
.mstep:first-child { border-top: 0; padding-top: 6px }
.mstep .n {
  font-family: var(--fd); font-weight: 800; font-size: 14px; width: 32px; height: 32px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(200, 155, 75, .12); color: var(--brass); border: 1px solid rgba(200, 155, 75, .4);
}
.mstep h4 { font-size: 16px; letter-spacing: -.01em; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; color: var(--concrete-2) }
.mstep p { color: var(--slate-d); font-size: 14px; margin-top: 6px; max-width: 70ch }

.mtag {
  font-family: var(--fm); font-size: 9px; letter-spacing: .12em; color: var(--brass-ink);
  background: var(--brass); padding: 3px 7px; border-radius: 999px; font-weight: 700;
}
.mtag.tel { background: #2aabee; color: #fff }
.mtag.role { background: transparent; border: 1px solid rgba(200, 155, 75, .5); color: var(--brass) }

/* ---------- Início rápido (5 cartões) ---------- */
.qgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 22px }
.qstep {
  border: 1px solid var(--line); background: rgba(255, 255, 255, .02);
  border-radius: 12px; padding: 18px 15px; display: flex; flex-direction: column;
}
.qstep .qn {
  font-family: var(--fd); font-weight: 800; font-size: 14px; width: 30px; height: 30px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(200, 155, 75, .12); color: var(--brass); border: 1px solid rgba(200, 155, 75, .4);
  margin-bottom: 12px; flex: none;
}
.qstep b { font-family: var(--fd); font-weight: 700; font-size: 14px; color: var(--concrete) }
.qstep span { color: var(--slate-d); font-size: 12.5px; margin-top: 5px; flex: 1 }
.qstep a { font-family: var(--fm); font-size: 10px; letter-spacing: .08em; color: var(--brass); margin-top: 10px; text-transform: uppercase }
@media (max-width: 1000px) { .qgrid { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 520px) { .qgrid { grid-template-columns: 1fr } }

/* ---------- Responsivo do layout ---------- */
@media (max-width: 900px) {
  .manual { grid-template-columns: 1fr }
  .docnav {
    position: static; max-height: none; border-right: 0;
    border-bottom: 1px solid var(--line); margin-bottom: 10px;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 20px;
  }
  .docnav .grp { grid-column: 1/-1 }
}