/* ---------- Treinamentos (guias passo a passo) ---------- */
body.guide { background: var(--paper); }
.g-wrap { max-width: 1080px; margin: 0 auto; padding: 96px 24px 80px; }
.g-head { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.g-head .who { margin: 0 0 10px; font: 600 14px/1.3 var(--text); color: var(--brand); }
.g-head h1 { margin: 0; font: 800 clamp(40px, 6vw, 68px)/.95 var(--display); letter-spacing: -.045em; }
.g-head .intro { margin: 16px 0 0; font: 400 18px/1.5 var(--text); color: var(--muted); max-width: 56ch; }
.g-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.g-meta span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--line); font: 500 13px/1 var(--text); }
.g-meta svg { width: 14px; height: 14px; color: var(--brand); }
.btn-print { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--brand); color: #fff; font: 600 14px/1 var(--text); }
.btn-print svg { width: 16px; height: 16px; }
.btn-print:hover { background: #3d42a0; }

.g-toc { margin: 28px 0 8px; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 18px; padding: 0; list-style: none; counter-reset: toc; }
.g-toc li { counter-increment: toc; }
.g-toc a { display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: baseline; padding: 6px 0; text-decoration: none; color: var(--ink); font: 500 15px/1.35 var(--text); }
.g-toc a::before { content: counter(toc); font: 700 14px/1 var(--display); color: var(--brand); font-variant-numeric: tabular-nums; }
.g-toc a:hover { color: var(--brand); }

.step { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px; align-items: start; padding: 48px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 80px; }
.step:last-of-type { border-bottom: 0; }
.step-n { font: 800 64px/.8 var(--display); letter-spacing: -.05em; color: var(--brand); font-variant-numeric: tabular-nums; }
.step h2 { margin: 16px 0 12px; font: 700 28px/1.1 var(--display); letter-spacing: -.03em; text-wrap: balance; }
.step p { margin: 0 0 12px; font: 400 16px/1.55 var(--text); max-width: 52ch; }
.do { margin: 0 0 16px; padding: 0; list-style: none; counter-reset: do; display: grid; gap: 8px; }
.do li { counter-increment: do; display: grid; grid-template-columns: 26px 1fr; gap: 10px; font: 400 16px/1.5 var(--text); }
.do li::before { content: counter(do); width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font: 700 12px/24px var(--text); text-align: center; }
.ui { font-weight: 600; color: var(--ink); background: #fff; box-shadow: 0 0 0 1px var(--line); padding: 1px 7px; border-radius: 6px; white-space: nowrap; }
.tip, .warn { display: grid; grid-template-columns: 22px 1fr; gap: 10px; margin-top: 12px; padding: 12px 14px; border-radius: 12px; font: 400 15px/1.5 var(--text); }
.tip { background: var(--brand-soft); color: #22266e; }
.warn { background: #FFF4E5; color: #6b3500; }
.tip svg, .warn svg { width: 20px; height: 20px; margin-top: 1px; }
.tip b, .warn b { font-weight: 700; }

.fig { margin: 0; display: grid; gap: 12px; }
.fig .row { display: flex; gap: 12px; align-items: flex-start; justify-content: center; }
.fig .row > .frame { flex: 1 1 0; min-width: 0; }
.frame { position: relative; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(20,22,58,.07), var(--shadow); }
.frame img { width: 100%; height: auto; }
.frame.phone-crop { max-width: 340px; margin: 0 auto; width: 100%; }
.fig figcaption { font: 400 13px/1.45 var(--text); color: var(--muted); text-align: center; }
.frame .ring { position: absolute; border: 2.5px solid var(--brand); border-radius: 999px; box-shadow: 0 0 0 4px rgba(72,77,181,.18); }
.frame .pin { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: var(--brand); color: #fff;
  font: 700 13px/26px var(--text); text-align: center; box-shadow: 0 0 0 3px #fff, 0 4px 12px rgba(72,77,181,.45); }
.msg { border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow); padding: 16px; display: grid; gap: 10px; }
.msg .line { display: grid; grid-template-columns: 20px 1fr; gap: 10px; font: 500 14.5px/1.45 var(--text); }
.msg .line svg { width: 18px; height: 18px; margin-top: 2px; }
.msg .pill { justify-self: start; display: inline-flex; gap: 8px; align-items: center; padding: 7px 12px; border-radius: 999px; background: #FFF4E5; color: #8a4200; font: 600 13px/1 var(--text); }
.msg .pill i { width: 8px; height: 8px; border-radius: 50%; background: #F59E0B; }
.msg small { font: 400 12.5px/1.4 var(--text); color: var(--muted); }

.g-foot { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; font: 400 14px/1.5 var(--text); color: var(--muted); }
.g-foot a { font-weight: 600; text-decoration: none; }

@media (max-width: 800px) {
  .g-wrap { padding: 80px 16px 56px; }
  .g-head { grid-template-columns: 1fr; }
  .g-head .intro { font-size: 16px; }
  .step { grid-template-columns: 1fr; gap: 20px; padding: 36px 0; }
  .step-n { font-size: 52px; }
  .step h2 { font-size: 24px; margin-top: 10px; }
  .fig .row { flex-direction: column; align-items: stretch; }
  .fig .row > .frame.phone-crop { max-width: 300px; }
}

@media print {
  @page { size: A4; margin: 12mm 13mm; }
  body.guide { background: #fff; }
  .topnav, .btn-print, .g-toc, .no-print { display: none !important; }
  .g-wrap { max-width: none; padding: 0; }
  .g-head { padding-bottom: 14px; }
  .g-head h1 { font-size: 34pt; }
  .g-head .intro { font-size: 11pt; margin-top: 8px; }
  .g-meta { margin-top: 10px; }
  .g-meta span { box-shadow: 0 0 0 .5pt #ccc; font-size: 9pt; }
  .step { break-inside: avoid; page-break-inside: avoid; grid-template-columns: 1fr 1fr; gap: 8mm; padding: 6mm 0; border-bottom: .5pt solid #ddd; }
  .step-n { font-size: 30pt; }
  .step h2 { font-size: 15pt; margin: 6px 0 6px; }
  .step p, .do li { font-size: 10pt; line-height: 1.45; }
  .do { gap: 4px; margin-bottom: 8px; }
  .do li { grid-template-columns: 20px 1fr; gap: 6px; }
  .do li::before { width: 18px; height: 18px; font-size: 9pt; line-height: 18px; }
  .tip, .warn { font-size: 9.5pt; padding: 7px 9px; margin-top: 6px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .frame { box-shadow: 0 0 0 .5pt #ccc; border-radius: 8px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .frame img { max-height: 88mm; width: auto; max-width: 100%; margin: 0 auto; }
  .frame.phone-crop { max-width: 58mm; }
  .fig .row { flex-direction: row; }
  .fig figcaption { font-size: 8.5pt; }
  .msg { box-shadow: 0 0 0 .5pt #ccc; font-size: 9pt; }
  .g-foot { display: none; }
  a { color: inherit; text-decoration: none; }
}
@media print {
  .frame { width: fit-content; max-width: 100%; margin: 0 auto; }
  .frame img { display: block; }
}
@media (max-width: 800px) {
  .ui { white-space: normal; }
  .g-head h1 { overflow-wrap: anywhere; }
}
@media print {
  .fig .row { align-items: flex-start; }
  .fig .row > .frame { align-self: flex-start; height: fit-content; flex: 0 1 auto; }
}
.fig .stack { display: grid; gap: 12px; justify-items: center; }
.fig .stack > .frame.phone-crop { max-width: 340px; }
@media print {
  .fig .stack { gap: 3mm; }
  .fig .stack > .frame.phone-crop { max-width: 72mm; }
  .fig .stack .frame img { max-height: 62mm; }
}