/* Camada de movimento mobile (GSAP ScrollTrigger) sobre o export do canvas (ioUNm) */
html { background: #d9d5cc; }
body { margin: 0; overflow-x: hidden; }
[data-pencil-id="sJWVv"] { position: relative; margin: 0 auto; max-width: 100vw; }

/* Faixas horizontais viram scroll de verdade (arrastar com o dedo) */
.faixa {
  overflow-x: auto !important; overflow-y: hidden; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain;
}
.faixa { height: auto !important; padding-top: 18px !important; padding-bottom: 36px !important; }
.faixa::-webkit-scrollbar { display: none; }
.faixa > * { scroll-snap-align: start; }

/* Fio condutor: trilho fino na margem esquerda */
.fio { position: absolute; inset: 0 auto auto 0; width: 390px; pointer-events: none; z-index: 1; overflow: visible; }
.fio .trilho { fill: none; stroke: #0B0B0D; stroke-opacity: .08; stroke-width: 1; }
.fio .linha { fill: none; stroke: #FF5A1F; stroke-width: 1.5; stroke-linecap: round; }
.fio .ponta-halo { fill: #FF5A1F; opacity: .22; transform-box: fill-box; transform-origin: center; }
.fio .ponta { fill: #FF5A1F; }
.fio-sobre { z-index: 4; }
.fio-sobre .linha { stroke-opacity: .35; }
.fio-sobre .ponta { fill-opacity: .5; }

/* Fundos das seções numa camada própria, abaixo do fio */
.fundo { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.fundo > div { position: absolute; left: 0; width: 100%; }

/* Cabeçalho fixo e barra do WhatsApp fixa no rodapé da tela */
.topo-m {
  position: fixed !important; top: 0; left: 50%; transform: translateX(-50%);
  width: min(390px, 100vw) !important; padding: 14px 20px; box-sizing: border-box; z-index: 90;
  background: #F6F3ECE6; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.barra-m {
  position: fixed !important; left: 50%; bottom: 16px; transform: translateX(-50%);
  width: calc(min(390px, 100vw) - 40px) !important; z-index: 95;
}

/* Progresso de leitura no topo */
.progresso { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 96; background: #FF5A1F; transform-origin: left; transform: scaleX(0); }

/* ---------- Processo em 5 passos: estados do marcador ---------- */
[data-pencil-id="he2So"] [data-pencil-name="Círculo"] {
  background-color: #F6F3EC !important; outline-color: #0B0B0D2E !important;
  transition: background-color .35s ease, outline-color .35s ease;
}
[data-pencil-id="he2So"] [data-pencil-name="n"] { color: #9A9AA2 !important; transition: color .35s ease; }
[data-pencil-id="he2So"] .feito [data-pencil-name="Círculo"] { outline-color: #FF5A1F !important; }
[data-pencil-id="he2So"] .feito [data-pencil-name="n"] { color: #C2410C !important; }
[data-pencil-id="he2So"] .on [data-pencil-name="Círculo"] { background-color: #FF5A1F !important; outline-color: #FF5A1F !important; }
[data-pencil-id="he2So"] .on [data-pencil-name="n"] { color: #0B0B0D !important; }
.trilho-cheio { background-color: #FF5A1F !important; transform-origin: top; z-index: 0; }