/* Como usar (como_usar.py): caminho em 3 etapas, primeiros passos com progresso e guias por tarefa */
.cu-caminho { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cu-etapa { position: relative; background: var(--surface); border-radius: 16px; padding: 20px 22px; }
.cu-etapa + .cu-etapa::before { content: ''; position: absolute; left: -16px; top: 42px; width: 16px; border-top: 2px dashed var(--accent); }
.cu-etapa-ic { width: 44px; height: 44px; border-radius: 50%; background: var(--brand-100); color: var(--brand-700); display: grid; place-items: center; font-size: 19px; margin-bottom: 10px; }
.cu-etapa-n { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-600); }
.cu-titulo { display: block; font-family: var(--font-display); font-size: 16px; color: var(--brand-900); margin: 2px 0 4px; }
.cu-texto { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }

.cu-colunas { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-bottom: 24px; }
.cu-barra { height: 8px; border-radius: 99px; background: var(--surface-2); margin-bottom: 8px; }

.cu-lista { list-style: none; margin: 0; padding: 0; }
.cu-passo { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 16px 0; border-top: 1px solid var(--border); }
.cu-passo:first-child { border-top: 0; }
.cu-num { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--brand-700); color: var(--brand-700); display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.cu-ok { background: var(--brand-700); color: #fff; }
.cu-passo.is-feito .cu-titulo { color: var(--muted); }
.cu-onde { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--brand-600); }
.cu-ir { white-space: nowrap; margin-top: 2px; }

.cu-grupo { font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 18px 0 8px; }
.cu-guia { border: 1px solid var(--border); border-radius: 12px; margin-bottom: 8px; background: var(--surface); }
.cu-guia summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 12px 14px; }
.cu-guia summary::-webkit-details-marker { display: none; }
.cu-guia-titulo { font-weight: 700; color: var(--text); }
.cu-guia summary .cu-onde { grid-column: 1; margin-top: 0; }
.cu-seta { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--brand-700); transition: transform .15s; }
.cu-guia[open] .cu-seta { transform: rotate(180deg); }
.cu-guia[open] summary { border-bottom: 1px solid var(--border); }
.cu-guia-corpo { padding: 12px 14px 14px; }
.cu-guia-passos { margin: 0 0 12px; padding-left: 20px; }
.cu-guia-passos li { margin-bottom: 6px; line-height: 1.5; font-size: 14.5px; }

@media (max-width: 1199px) { .cu-colunas { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) {
  .cu-caminho { grid-template-columns: minmax(0, 1fr); }
  .cu-etapa + .cu-etapa::before { display: none; }
  .cu-passo { grid-template-columns: 32px minmax(0, 1fr); }
  .cu-ir { grid-column: 2; justify-self: start; }
}

/* bloco com tudo feito: uma linha, abre para rever */
.cu-pronto { list-style: none; cursor: pointer; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; }
.cu-pronto::-webkit-details-marker { display: none; }
.cu-pronto .cu-titulo, .cu-pronto .cu-onde { margin: 0; }
.cu-bloco-pronto .cu-seta { grid-row: auto; }
.cu-bloco-pronto[open] .cu-seta { transform: rotate(180deg); }
.cu-pronto .cu-seta { grid-column: auto; grid-row: auto; }
/* próximo passo pendente em destaque */
.cu-passo.is-proximo { background: var(--brand-100); border-radius: 12px; padding: 16px 12px; margin: 0 -12px; border-top-color: transparent; }
.cu-passo.is-proximo + .cu-passo { border-top-color: transparent; }
.cu-tag { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 6px; background: var(--brand-700); color: #fff; font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: 2px; }