/* ════════════════════════════════════════════════════════════════════
   DSPC · DECK · componentes didáticos
   - checkpoints (pausa de recordação · pergunta provocativa)
   - blocos da pesquisa (mesmos componentes do painel de análise)
   - exemplo consolidado (uma dor → os quatro passos)
   - colinha / one-pager do método
   Carregar DEPOIS da casca (deck.css). Específico deste deck.
   ════════════════════════════════════════════════════════════════════ */

/* ═══════════ CHECKPOINT · pare e responda ═══════════ */
deck-stage section.checkpoint {
  background: radial-gradient(1150px 800px at 50% 40%, rgba(139,0,0,.18), transparent 62%),
              radial-gradient(900px 600px at 50% 52%, rgba(246,195,36,.05), transparent 60%),
              var(--preto);
  text-align: center;
}
section.checkpoint .eyebrow { justify-content: center; color: var(--vermelho-sinal); }
section.checkpoint .eyebrow::before { display: none; }
section.checkpoint .eyebrow .z { color: var(--bronze); }

.cp-main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 38px; position: relative; z-index: 2; }
.cp-mark { font-family: var(--voz-monumental); font-size: 132px; line-height: 0.7; color: transparent;
  -webkit-text-stroke: 2px var(--amarelo-40); letter-spacing: -0.04em; }
.cp-q { font-family: var(--voz-monumental); text-transform: uppercase; letter-spacing: -0.02em;
  line-height: 1.0; margin: 0; color: var(--bege); font-size: clamp(54px, 5.2vw, 90px); max-width: 22ch; }
.cp-q .am { color: var(--amarelo); }
.cp-hint { font-family: var(--voz-sagrada); font-size: 22px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--bronze); display: inline-flex; align-items: center; gap: 16px; }
.cp-hint::before, .cp-hint::after { content: ""; width: 46px; height: 1px; background: var(--linha-bronze); }
section.checkpoint .ftr .pg { color: var(--vermelho-sinal); }

/* ═══════════ BLOCOS DA PESQUISA · iguais aos do painel de análise ═══════════ */
/* faixa de estatística de topo */
.ap-strip { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2,1fr); gap: 1px;
  background: var(--linha-fraca); border: 1px solid var(--linha-bronze); }
.ap-stat { background: var(--preto-2); padding: 26px 28px; position: relative; }
.ap-stat .v { font-family: var(--voz-monumental); font-size: 62px; line-height: 1; color: var(--amarelo); letter-spacing: -0.02em; }
.ap-stat .v small { font-size: 30px; color: var(--bronze-claro); }
.ap-stat .l { font-family: var(--voz-sagrada); font-size: 15px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--bronze); margin-top: 14px; line-height: 1.45; }
.ap-stat.warn .v { color: var(--vermelho-sinal); }

/* barras de dor / necessidade */
.need-list { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 11px; }
.need-row .top { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; margin-bottom: 5px; }
.need-row .nm { font-family: var(--voz-sagrada); font-size: 23px; letter-spacing: 0.01em; color: var(--bege); }
.need-row .vl { font-family: var(--voz-monumental); font-size: 28px; color: var(--bege); flex: none; letter-spacing: -0.01em; }
.need-row .vl.spark { color: var(--amarelo); }
.need-row .vl.shade { color: var(--vermelho-sinal); }
.bar { height: 12px; background: var(--preto-3); border: 1px solid var(--linha-fraca); position: relative; overflow: hidden; }
.bar .fl { position: absolute; inset: 0 auto 0 0; background: var(--bronze); width: var(--w, 0);
  transform: scaleX(0); transform-origin: left center; transition: transform 1.15s cubic-bezier(0.2,0,0,1); }
deck-stage section[data-deck-active] .bar .fl { transform: scaleX(1); }
.bar .fl.spark { background: linear-gradient(90deg, var(--brasa), var(--amarelo)); }
.bar .fl.shade { background: var(--vermelho-sinal); }
.need-row .gloss { margin-top: 5px; font-style: italic; font-size: 19px; color: var(--fg3); line-height: 1.34; }
.need-row .gloss b { color: var(--bege); font-style: normal; font-weight: 500; }
.need-row .gloss .am { color: var(--amarelo); font-style: normal; }

/* nota / callout emoldurada */
.callout { position: relative; z-index: 2; padding: 28px 32px 28px 30px; background: var(--amarelo-05);
  border: 1px solid var(--amarelo-30); border-left: 1px solid var(--amarelo); }
.callout.alert { background: var(--brasa-08); border-color: var(--brasa-40); border-left-color: var(--vermelho-sinal); }
.callout .clbl { font-family: var(--voz-sagrada); font-size: 15px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--amarelo); margin-bottom: 14px; }
.callout p { font-family: var(--voz-operacional); font-size: 25px; line-height: 1.5; color: var(--fg2); margin: 0; }
.callout p b { color: var(--bege); font-weight: 500; }
.callout p .am { color: var(--amarelo); font-weight: 500; }

/* grade da pesquisa · barras + leitura */
.research { position: relative; z-index: 2; flex: 1; display: grid; grid-template-columns: 1.32fr 0.68fr;
  gap: 40px; align-items: start; }
.research .rcol { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* ═══════════ EXEMPLO CONSOLIDADO · uma dor, os quatro passos ═══════════ */
.cex-head { position: relative; z-index: 2; display: flex; align-items: center; gap: 18px;
  font-family: var(--voz-sagrada); font-size: 21px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bronze); }
.cex-head b { color: var(--amarelo); font-weight: 400; }
.cex-head .tagn { font-family: var(--voz-monumental); font-size: 24px; color: var(--bege); letter-spacing: 0; text-transform: none; }
.cex { position: relative; z-index: 2; flex: 1; display: grid; grid-template-columns: repeat(4,1fr);
  gap: 2px; background: var(--linha-fraca); border: 1px solid var(--linha-bronze); }
.cex .cstep { background: var(--preto-2); padding: 30px 28px; display: flex; flex-direction: column; gap: 18px;
  min-width: 0; border-top: 3px solid var(--amarelo); position: relative; }
.cex .cstep .ch { display: flex; align-items: baseline; gap: 14px; }
.cex .cstep .cl { font-family: var(--voz-monumental); font-size: 72px; line-height: 0.7; color: var(--amarelo); letter-spacing: -0.04em; }
.cex .cstep .cn { font-family: var(--voz-sagrada); font-size: 17px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bronze-claro); }
.cex .cstep .cwhat { font-size: 24px; line-height: 1.4; color: var(--fg2); margin: 0; }
.cex .cstep .cwhat b { color: var(--bege); font-weight: 500; }
.cex .cstep .cmetric { margin-top: auto; border-top: 1px solid var(--linha-fraca); padding-top: 16px;
  font-family: var(--voz-monumental); font-size: 30px; color: var(--amarelo); letter-spacing: -0.01em; line-height: 1; }
.cex .cstep .cmetric small { display: block; font-family: var(--voz-sagrada); font-size: 13px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--bronze); margin-top: 8px; }
.cex .cstep.final { background: linear-gradient(180deg, var(--amarelo-08), var(--preto-2)); }
.cex .cstep .arrow { position: absolute; top: 46px; right: -16px; z-index: 3; width: 28px; height: 28px;
  display: grid; place-items: center; color: var(--amarelo); font-family: var(--voz-sagrada); font-size: 26px; }

/* ═══════════ COLINHA · one-pager do método ═══════════ */
.cheat { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; gap: 20px; }
.cheat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 2px; background: var(--linha-fraca);
  border: 1px solid var(--linha-bronze); }
.cheat-grid .cc { background: var(--preto-2); padding: 24px 26px; display: flex; flex-direction: column; gap: 12px;
  border-top: 3px solid var(--amarelo); min-width: 0; }
.cheat-grid .cc .cl { font-family: var(--voz-monumental); font-size: 60px; line-height: 0.66; color: var(--amarelo); letter-spacing: -0.04em; }
.cheat-grid .cc .cnm { font-family: var(--voz-sagrada); font-size: 19px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bege); }
.cheat-grid .cc .cseq { font-size: 21px; line-height: 1.46; color: var(--fg2); }
.cheat-grid .cc .cseq div { margin-bottom: 5px; }
.cheat-grid .cc .cseq b { color: var(--amarelo); font-family: var(--voz-sagrada); font-size: 13px; letter-spacing: 0.1em;
  text-transform: uppercase; font-weight: 400; margin-right: 9px; }

.cheat-row { display: grid; grid-template-columns: 1.5fr 1fr 1.1fr; gap: 2px; background: var(--linha-fraca);
  border: 1px solid var(--linha-bronze); }
.cheat-row .cbox { background: var(--preto-2); padding: 24px 26px; min-width: 0; }
.cheat-row .cbox .cbl { font-family: var(--voz-sagrada); font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--amarelo); margin-bottom: 13px; }
.cheat-row .cbox p { font-size: 23px; line-height: 1.4; color: var(--fg1); margin: 0; }
.cheat-row .cbox p .am { color: var(--amarelo); }
.cheat-row .cbox .big { font-family: var(--voz-monumental); font-size: 44px; line-height: 1; color: var(--bege); letter-spacing: -0.01em; }
.cheat-row .cbox .big b { color: var(--amarelo); }

.cheat-gloss { display: grid; grid-template-columns: repeat(5,1fr); gap: 2px; background: var(--linha-fraca);
  border: 1px solid var(--linha-bronze); }
.cheat-gloss .gt { background: var(--preto-2); padding: 18px 20px; min-width: 0; }
.cheat-gloss .gt b { display: block; font-family: var(--voz-sagrada); font-size: 15px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--amarelo); margin-bottom: 9px; }
.cheat-gloss .gt span { font-size: 18px; line-height: 1.36; color: var(--fg2); }