/* Camada de movimento (GSAP ScrollTrigger) sobre o export do canvas */
html { background: #F3F0E8; }
body { overflow-x: hidden; }
[data-pencil-id="DTfcD"] { position: relative; margin: 0 auto; }

/* Notas de design do canvas não entram no protótipo */
[data-pencil-name="Nota de movimento"],
[data-pencil-id="O0EWY"] { display: none !important; }

/* Fio condutor */
.fio {
  position: absolute; inset: 0 auto auto 0;
  width: calc(var(--u) * 1440); pointer-events: none; z-index: 1; overflow: visible;
}
.fio .trilho { fill: none; stroke: #0B0B0D; stroke-opacity: .08; stroke-width: 1.5; }
.fio .linha { fill: none; stroke: #FF5A1F; stroke-width: 2; stroke-linecap: round; }
.fio .estacao { fill: #F3F0E8; stroke: #FF5A1F; stroke-width: 1.5; transition: fill .5s ease; }
.fio .estacao.on { fill: #FF5A1F; }
.fio .ponta-halo { fill: #FF5A1F; opacity: .22; transform-box: fill-box; transform-origin: center; }
.fio .ponta { fill: #FF5A1F; }
/* cópia do fio por cima do conteúdo, bem translúcida */
.fio-sobre { z-index: 4; }
.fio-sobre .linha { stroke-opacity: .35; }
.fio-sobre .ponta { fill-opacity: .5; }

/* Camada dos fundos das seções (abaixo do fio) */
.fundo { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.fundo > div { position: absolute; left: 0; width: calc(var(--u) * 1440); }

/* Cabeçalho e barra fixos */
.topo {
  position: fixed; top: 0; left: 50%; width: calc(var(--u) * 1440); height: calc(var(--u) * 120);
  transform: translateX(-50%); z-index: 90; pointer-events: none;
}
.topo > * { pointer-events: auto; }
.barra-fixa {
  position: fixed !important; left: 50% !important; top: auto !important;
  bottom: calc(var(--u) * 28); transform: translateX(-50%); z-index: 95 !important;
}

/* Contador de seção: tira vertical na margem direita (não cobre o conteúdo) */
.hud {
  position: fixed; right: calc(var(--u) * 18); top: 50%; transform: translateY(-50%); z-index: 95;
  font: 500 calc(var(--u) * 11)/1 "Geist Mono", ui-monospace, monospace; letter-spacing: .08em;
  color: #0B0B0D; background: #F3F0E8E6; padding: calc(var(--u) * 10) calc(var(--u) * 6); border-radius: calc(var(--u) * 999);
  border: 1px solid #0B0B0D14; display: flex; flex-direction: column; gap: calc(var(--u) * 8); align-items: center;
}
.hud .barra { width: calc(var(--u) * 2); height: calc(var(--u) * 72); background: #0B0B0D1A; position: relative; overflow: hidden; }
.hud .barra i { position: absolute; inset: 0; background: #FF5A1F; transform-origin: top; transform: scaleY(0); }

.split-mask { display: inline-block; overflow: hidden; vertical-align: top; }

/* ---------- Processo em 5 passos: estados do marcador ---------- */
[data-pencil-id="pTegM"] [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="pTegM"] [data-pencil-name="n"] { color: #9A9AA2 !important; transition: color .35s ease; }
[data-pencil-id="pTegM"] .feito [data-pencil-name="Círculo"] { outline-color: #FF5A1F !important; }
[data-pencil-id="pTegM"] .feito [data-pencil-name="n"] { color: #C2410C !important; }
[data-pencil-id="pTegM"] .on [data-pencil-name="Círculo"] { background-color: #FF5A1F !important; outline-color: #FF5A1F !important; }
[data-pencil-id="pTegM"] .on [data-pencil-name="n"] { color: #0B0B0D !important; }
[data-pencil-id="pTegM"] [data-pencil-name="Rótulo"] { color: #9A9AA2 !important; font-weight: 500 !important; transition: color .35s ease; }
[data-pencil-id="pTegM"] .feito [data-pencil-name="Rótulo"] { color: #6B6760 !important; }
[data-pencil-id="pTegM"] .on [data-pencil-name="Rótulo"] { color: #0B0B0D !important; font-weight: 600 !important; }
[data-pencil-id="pTegM"] [data-pencil-name="Linha"] {
  background: linear-gradient(90deg, #FF5A1F calc(var(--p, 0) * 100%), #0B0B0D1F 0) !important;
}

/* ---------- Hub: carrossel vertical de serviços ---------- */
.hub-janela { position: relative; height: calc(var(--u) * 260); width: 100%; overflow: hidden; }
.hub-trilha { display: flex; flex-direction: column; align-items: flex-end; animation: hub-sobe linear infinite; }
/* margem em vez de gap: com a lista duplicada, -50% cai exatamente no começo da segunda cópia */
.hub-trilha > * { margin-bottom: calc(var(--u) * 8); }
@keyframes hub-sobe { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.hub-fade { position: absolute; left: 0; right: 0; height: calc(var(--u) * 72); pointer-events: none; z-index: 1; }
.hub-fade.topo-fade { top: 0; background: linear-gradient(#F6F3EC, rgba(246, 243, 236, 0)); }
.hub-fade.base-fade { bottom: 0; background: linear-gradient(rgba(246, 243, 236, 0), #F6F3EC); }
@media (prefers-reduced-motion: reduce) { .hub-trilha { animation: none; } }