/* Nort: onboarding em cartões, com prévia do currículo ao vivo */
.ob { min-height: 100vh; }
.ob-topo {
  position: sticky; top: 0; z-index: 30; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s2);
  padding: 16px 24px; background: var(--fog);
}
.ob-topo-dir { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.ob-progresso { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; color: var(--dusk); }
.barra { width: min(260px, 36vw); height: 6px; border-radius: var(--r-pill); background: var(--mist); overflow: hidden; }
.barra i { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--navy); transform: scaleX(0.1); transform-origin: left; transition: transform var(--d-slow) var(--ease); }
.link-demo { border: 0; background: none; color: var(--link); font-weight: 600; font-size: 14px; padding: 8px; }

.ob-palco {
  max-width: var(--max); margin: 0 auto; padding: var(--s6) 24px var(--s12);
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s8); align-items: start;
}
.ob-perguntas { display: grid; gap: var(--s3); min-height: 520px; align-content: start; }
.pergunta { display: grid; gap: var(--s2); animation: entra-dir var(--d-slow) var(--ease) both; }
.pergunta.volta { animation-name: entra-esq; }
.pergunta .h { max-width: 16ch; }
.pergunta .lede { max-width: 46ch; }
@keyframes entra-dir { from { opacity: 0; transform: translateX(32px); } }
@keyframes entra-esq { from { opacity: 0; transform: translateX(-32px); } }

.campo {
  width: 100%; font: inherit; font-size: 20px; font-weight: 500; letter-spacing: -0.02em; color: var(--navy);
  background: var(--white); border: 0; border-radius: var(--r-card); padding: 18px 20px; box-shadow: var(--sh-btn), inset 0 0 0 1.5px transparent;
  transition: box-shadow var(--d-fast) var(--ease);
}
.campo::placeholder { color: var(--smoke); }
.campo:focus { outline: none; box-shadow: var(--sh-raised), inset 0 0 0 1.5px var(--cornflower); }
.campo.area { font-size: 17px; line-height: 1.5; resize: vertical; min-height: 120px; }

.opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.opcao {
  border: 0; background: var(--white); color: var(--navy); border-radius: var(--r-pill); padding: 12px 18px;
  font-weight: 600; font-size: 16px; box-shadow: var(--sh-btn), inset 0 0 0 1.5px var(--mist);
  transition: transform var(--d-fast) var(--ease), background var(--d-fast), color var(--d-fast);
}
.opcao:hover { transform: translateY(-1px); }
.opcao[aria-checked="true"] { background: var(--navy); color: var(--white); box-shadow: var(--sh-raised); }
.opcoes.grandes { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.opcoes.grandes .opcao { border-radius: var(--r-card); padding: 22px 18px; font-size: 18px; text-align: left; }

/* Ladrilhos de trabalho (ícone de linha fina em Cornflower) */
.ladrilhos { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.ladrilho {
  border: 0; background: var(--white); border-radius: var(--r-card); padding: 16px 14px; display: grid; gap: 10px; justify-items: start;
  text-align: left; font-weight: 600; font-size: 15px; color: var(--navy); box-shadow: var(--sh-btn), inset 0 0 0 1.5px var(--mist);
  transition: transform var(--d-fast) var(--ease), box-shadow var(--d-fast), background var(--d-fast);
}
.ladrilho svg { width: 28px; height: 28px; color: var(--cornflower); transition: color var(--d-fast); }
.ladrilho:hover { transform: translateY(-2px); box-shadow: var(--sh-raised); }
.ladrilho[aria-pressed="true"] { background: var(--navy); color: var(--white); box-shadow: var(--sh-raised); }
.ladrilho[aria-pressed="true"] svg { color: var(--white); }

.tempos { display: grid; gap: 10px; }
.tempo-linha { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--white); border-radius: var(--r-card); padding: 12px 12px 12px 18px; box-shadow: var(--sh-btn); }
.tempo-linha b { font-size: 17px; letter-spacing: -0.02em; }

/* Gravador (simulado na demo) */
.gravador { display: flex; align-items: center; gap: 16px; background: var(--white); border-radius: var(--r-card); padding: 12px; box-shadow: var(--sh-btn); }
.gravar { display: inline-flex; align-items: center; gap: 10px; border: 0; background: var(--navy); color: var(--white); border-radius: var(--r-pill); padding: 12px 18px; font-weight: 600; flex: none; }
.gravar .bola { width: 12px; height: 12px; border-radius: 50%; background: var(--white); transition: border-radius var(--d-fast); }
.gravar[aria-pressed="true"] .bola { border-radius: 3px; background: var(--rubro); box-shadow: 0 0 0 2px var(--white); animation: pisca 1s infinite; }
@keyframes pisca { 50% { opacity: 0.35; } }
.onda { flex: 1; min-width: 0; height: 48px; }

.checks { display: grid; gap: 8px; }
.check { display: flex; align-items: center; gap: 14px; background: var(--white); border-radius: var(--r-card); padding: 16px 18px; font-weight: 600; cursor: pointer; box-shadow: var(--sh-btn); }
.check input { width: 22px; height: 22px; accent-color: var(--navy); }

.erro { min-height: 22px; margin: 0; color: var(--navy); font-weight: 600; font-size: 15px; }
.erro:not(:empty)::before { content: "↑ "; color: var(--cornflower); }
/* Os botões ficam sempre visíveis no rodapé da tela: listas longas não escondem o "Continuar" */
.ob-acoes { display: flex; justify-content: space-between; align-items: center; gap: 12px; position: sticky; bottom: 0; z-index: 5; background: var(--fog); padding: 12px 0 16px; box-shadow: 0 -12px 16px -8px var(--fog); }
.ob-acoes #voltar[disabled] { visibility: hidden; }
.ob-dica { margin: 0; font-size: 13px; color: var(--dusk); }

.ob-previa { position: sticky; top: 96px; }
.previa-rotulo { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.previa-rotulo .live { font-size: 10px; }

/* Montagem */
.montagem { min-height: calc(100vh - 80px); display: grid; place-content: center; justify-items: center; gap: var(--s3); text-align: center; padding: 24px; }
.montagem-obj { width: 160px; height: 160px; }
.montagem-etapas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; text-align: left; }
.montagem-etapas li { display: flex; align-items: center; gap: 12px; color: var(--dusk); font-weight: 600; font-size: 17px; transition: color var(--d-mid); }
.montagem-etapas li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--silver); box-sizing: border-box; }
.montagem-etapas li.ativa { color: var(--navy); }
.montagem-etapas li.ativa::before { border-color: var(--cornflower); border-top-color: transparent; animation: gira 0.9s linear infinite; }
.montagem-etapas li.feita { color: var(--dusk); }
.montagem-etapas li.feita::before { background: var(--cornflower); border-color: var(--cornflower); }
@keyframes gira { to { transform: rotate(360deg); } }

/* Revisão */
.revisao { max-width: var(--max); margin: 0 auto; padding: var(--s6) 24px var(--s12); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s8); align-items: start; }
.revisao-texto { display: grid; gap: var(--s3); position: sticky; top: 96px; }
.revisao-texto .lede { margin: 0; }
.revisao .abas { justify-self: start; flex-wrap: wrap; }
.selo-ia { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; font-size: 15px; color: var(--cornflower); }
.revisao-acoes { display: flex; gap: 10px; flex-wrap: wrap; }
.correcao { display: grid; gap: 10px; background: var(--white); border-radius: var(--r-card); padding: var(--s3); box-shadow: var(--sh-card); animation: entra-dir var(--d-slow) var(--ease); }
.correcao .campo { box-shadow: inset 0 0 0 1.5px var(--mist); font-size: 17px; padding: 14px 16px; }
.correcao .btn { justify-self: start; }
.aprovado { display: grid; gap: 10px; justify-items: start; animation: entra-dir var(--d-slow) var(--ease); }
.aprovado p { margin: 0; }

@media (max-width: 900px) {
  .ob-palco, .revisao { grid-template-columns: 1fr; gap: var(--s4); padding-top: var(--s3); }
  .ob-previa { position: static; }
  .ob-previa .folha-caixa { max-height: 340px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
  .revisao-texto { position: static; }
  .ob-topo { grid-template-columns: auto 1fr auto; padding: 12px 16px; }
  .ob-progresso .barra { width: 100%; }
  .ob-progresso { justify-content: center; }
  #exemplo { display: none; }
}
@media (max-width: 520px) {
  .ob-palco, .revisao { padding-left: 16px; padding-right: 16px; }
  .ob-progresso span { display: none; }
  .ob-acoes .btn-lg { padding: 14px 22px; font-size: 17px; }
}
.versoes-txt { margin: 0; font-weight: 600; color: var(--navy); }
.revisao .versoes { background: var(--mist); }
.jornada { font-size: 13px; color: var(--dusk); white-space: nowrap; }
.jornada b { color: var(--navy); }
@media (max-width: 900px) { .jornada { display: none; } }