/* =====================================================================
   Camada de scroll (GSAP ScrollTrigger + Lenis). Decisão em PLAN.md.
   O motor scrollcraft segue cuidando de reveals de fluxo e da barra de
   progresso; pin, scrub e espaçamento de capítulos moram aqui.

   Três tipos de movimento, e só eles:
   1. absorção  (scrub)  coisas viajam para dentro do prontuário
   2. estado    (tempo)  check, toggle, status: 240ms, curva forte
   3. corte     (tempo)  títulos e chão escuro entram por máscara
   ===================================================================== */

:root {
  --m-estado: 240ms;
  --m-corte: 460ms;
  --m-curva: cubic-bezier(0.23, 1, 0.32, 1);
}

/* ---------------------------------------------------- capítulos ----- */
/* A altura do capítulo é reservada no CSS, não no JS: é isso que zera o
   CLS de carregamento (antes o motor media e escrevia a altura depois do
   primeiro paint e o manifesto pulava 1.300px). */
section[data-act] { position: relative; height: calc(var(--span, 1.5) * 100svh); }
[data-stage] { position: sticky; top: 0; height: 100svh; overflow: clip; z-index: 1; }
.durante [data-stage] { display: grid; align-items: center; }

/* Reserva o canto da lista de pendências no desktop largo */

/* ------------------------------------------------------- antes ----- */
/* O título não viaja mais no trilho: fica parado à esquerda e só os
   cards passam, dentro de uma janela com borda esfumada. Antes o pan
   arrastava a manchete e cortava "A agenda se arruma sozinha". */
.antes [data-stage] { display: flex; align-items: center; }
.antes__grade {
  width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter);
  display: grid; grid-template-columns: minmax(0, 0.5fr) minmax(0, 1.5fr); gap: clamp(24px, 3vw, 48px); align-items: center;
}
.antes .peca { width: min(340px, 78vw); }
.antes__copy .sc-body { margin-top: 18px; font-size: 1.08rem; }
.antes__janela {
  overflow: clip; padding-block: 28px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 56px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 56px), transparent 100%);
}
.antes .trilho { padding-inline: 28px 56px; will-change: transform; }
.antes .trilho__fecha { padding-right: 0; }

/* ----------------------------------------------------- durante ----- */
/* Troca de versão com desfoque: sem ele, as duas versões aparecem
   sobrepostas no meio do crossfade. */
.versao { transition: opacity var(--m-estado) var(--m-curva), transform var(--m-estado) var(--m-curva), filter var(--m-estado) var(--m-curva); }
.editor.v2 .versao--a { filter: blur(3px); }
.versao--b { filter: blur(3px); }
.editor.v2 .versao--b { filter: none; }

/* ---------------------------------------------------- silêncio ----- */
/* Uma tela inteira de respiro. Com 320px o fim do Durante e o começo
   dos Exames apareciam juntos na mesma tela. */
.silencio { min-height: 100svh; display: grid; place-items: center; padding-block: 0; }

/* ------------------------------------------------------ exames ----- */
.pdf { transform: none; opacity: 1; z-index: 2; }
.evo { z-index: 1; }
.pdf tr.alvo { --h: 0; }
.pdf tr.alvo td { background: color-mix(in oklab, var(--lilas-2) calc(var(--h) * 100%), transparent); }
.pdf__varre { top: 14%; opacity: 0; }
.pasta .bolha { transform: none; }

/* Linha do prontuário: vazia de propósito (traço), não fantasma. */
.valor { --v: 0; opacity: 1; transform: none; background: color-mix(in oklab, var(--lilas-1) calc(var(--v) * 100%), transparent); }
.valor b { position: relative; color: transparent; }
.valor b::before {
  content: ""; position: absolute; right: 0; top: 50%; width: 22px; height: 2px; border-radius: 2px;
  background: color-mix(in oklab, var(--sc-ink) 18%, transparent);
  opacity: calc(1 - var(--v));
}
.valor b::after {
  content: attr(data-txt); position: absolute; right: 0; white-space: nowrap; color: var(--sc-ink);
  opacity: var(--v);
}

/* chip que voa do PDF para o prontuário */
.voo {
  position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none;
  padding: 4px 9px; border-radius: var(--radius-8, 8px);
  background: var(--bg-main, #fff); color: var(--sc-ink);
  font: var(--weight-semibold, 600) var(--type-sm, 0.86rem)/1.2 var(--font-body, var(--sc-font-text));
  font-variant-numeric: tabular-nums; white-space: nowrap;
  box-shadow: var(--elev-overlay, 0 8px 24px -8px oklch(0.3 0.06 300 / 0.3));
  outline: 1.5px solid color-mix(in oklab, var(--sc-accent) 40%, transparent);
  opacity: 0; will-change: transform, opacity;
}

/* ------------------------------------------------------- corte ----- */
/* Títulos de capítulo entram por máscara: a linha sobe de trás de uma
   borda limpa, em vez de só esmaecer. */
.mm .corte { clip-path: inset(0 0 100% 0); transform: translateY(0.35em); }
.mm .corte.sem-corte { transition: none !important; }
.mm .corte.dentro {
  clip-path: inset(0 0 -0.2em 0); transform: none;
  transition: clip-path var(--m-corte) var(--m-curva), transform var(--m-corte) var(--m-curva);
}

/* ----------------------------------------------------- estado ------ */
.chk, .slot .st, .tog, .tog::after, .passos p, .check-item, .pend .txt::after {
  transition-duration: var(--m-estado) !important;
  transition-timing-function: var(--m-curva) !important;
}
.pend { transition: opacity 320ms var(--m-curva), transform 320ms var(--m-curva); }
.wpp-msg, .comando, .receita-chip, .historico {
  transition: opacity var(--m-estado) var(--m-curva), transform var(--m-estado) var(--m-curva) !important;
}
.on > .chk, .on .chk--self, .done > a > .chk { animation: m-marca var(--m-estado) var(--m-curva); }
@keyframes m-marca { from { transform: scale(0.82); } to { transform: none; } }

/* ------------------------------------------------------ celular ---- */
@media (max-width: 900px) {
  .antes__grade { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-top: 76px; align-self: start; }
  .antes [data-stage] { align-items: flex-start; }
  .antes__copy .sc-body { display: none; }
  .antes .peca { width: min(320px, 78vw); }
  .antes .peca__ui { min-height: 0; }
  .mesa { height: min(520px, calc(100svh - 300px)); }
  .evo { top: 36%; }
}
@media (max-width: 1179px) {
  /* a barra de pendências ocupa ~64px no pé da tela */
  [data-stage] { padding-bottom: 72px; box-sizing: border-box; }
}

/* ------------------------------------------- movimento reduzido ---- */
/* Menos movimento, não zero informação: sem pin, sem viagem, estados
   finais visíveis, o trilho vira rolagem lateral comum. */
.rm section[data-act] { height: auto; }
.rm [data-stage] { position: relative; height: auto; min-height: 100svh; padding-block: 96px; }
.rm .antes__janela { overflow-x: auto; -webkit-mask-image: none; mask-image: none; scroll-snap-type: x proximity; }
.rm .trilho > * { scroll-snap-align: start; }
.rm .valor { --v: 1; }
.rm .pdf tr.alvo { --h: 1; }
.rm .voo { display: none; }
.rm .versao { filter: none !important; }
.rm .on > .chk, .rm .on .chk--self, .rm .done > a > .chk { animation: none; }

/* =====================================================================
   Rodada 2: composição alternada, cabeçalho sólido, barra compacta,
   capítulos sem buracos. O hero é de outra frente e não é tocado aqui.
   ===================================================================== */

/* ------------------------------------------------- cabeçalho ------- */
.topo { transition: background-color 240ms var(--m-curva), box-shadow 240ms var(--m-curva); }
.topo.rolou {
  background: color-mix(in oklab, var(--sc-canvas) 86%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 0.5px 0 color-mix(in oklab, var(--sc-ink) 10%, transparent);
}
.topo.rolou.escuro {
  background: color-mix(in oklab, oklch(0.235 0.045 300) 80%, transparent);
  box-shadow: 0 0.5px 0 oklch(1 0 0 / 0.08);
}

/* nada fixado passa por baixo do logo nem por baixo da barra de pendências */
section:not(.hero) > [data-stage] { padding-top: 76px; padding-bottom: 88px; box-sizing: border-box; }
html .cap { padding-right: var(--sc-gutter) !important; }

/* ------------------------------------------ pendências: compacta --- */
/* Uma linha só (título, item atual, contador, barra) em todas as larguras.
   A lista inteira abre por clique. Antes, no desktop, era um painel de
   ~230px que cobria cards. */
.pend { left: auto; right: var(--sc-gutter); bottom: 16px; width: min(360px, calc(100vw - 24px)); padding: 0; }
.pend__topo { padding: 12px 14px; gap: 12px; }
.pend__topo b { flex: none; }
.pend__resumo {
  display: block; flex: 1; min-width: 0; font-size: var(--type-xs, 0.84rem); color: var(--sc-ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pend__barra { margin: -6px 14px 10px; }
.pend ol { display: none; padding: 0 6px 8px; }
.pend.aberta ol { display: block; }
.pend li, .pend li.vis { display: block; }
@media (max-width: 1179px) { .pend { left: 12px; right: 12px; bottom: 12px; width: auto; } }

/* -------------------------------------------------- manifesto ------ */
.manifesto { padding-block: clamp(5rem, 9vw, 8rem); }
.manifesto__centro { text-align: center; }
.manifesto h2 { max-width: 20ch; margin-inline: auto; }
.manifesto .lede { margin-inline: auto; }
.manifesto .duas { margin-inline: auto; text-align: left; }
.duas .voce li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; transform: translateY(-2px);
  border: 1.5px solid var(--sc-accent); box-sizing: border-box; }
.integra { justify-content: center; }
.tag-ia { margin-left: 6px; padding: 2px 7px; border-radius: var(--radius-6, 6px); background: var(--accent-soft, var(--lilas-1)); color: var(--sc-accent); font: var(--weight-semibold, 600) var(--type-2xs, 0.72rem)/1.2 var(--font-body, var(--sc-font-text)); letter-spacing: 0.04em; vertical-align: 2px; }

/* ------------------------------------------------------ antes ------ */
/* título em cima, centrado; o trilho ocupa a largura toda */
.antes [data-stage] { background: var(--bg-main, var(--sc-surface)); }
.antes__grade { grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 3vh, 36px); text-align: center; }
.antes__copy { max-width: 760px; margin-inline: auto; }
.antes__copy h2 { margin-top: 10px; }
.antes__copy .sc-body { margin-inline: auto; max-width: 56ch; margin-top: 12px; }
.antes .trilho { justify-content: safe center; text-align: left; }
.antes .peca { width: min(320px, 78vw); }
.antes .trilho__fecha { width: min(300px, 70vw); }

/* ---------------------------------------------------- durante ------ */
/* espelhado: o editor à esquerda, o texto à direita */
@media (min-width: 901px) {
  .durante__grade { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
  .durante .editor { order: -1; }
}

/* ----------------------------------------------------- exames ------ */
/* (rodada da prescrição) o chão próprio passou para a Receita, que é o pico */
.receita [data-stage] {
  background:
    radial-gradient(70% 60% at 50% 0%, color-mix(in oklab, var(--sc-accent) 14%, transparent), transparent 70%),
    color-mix(in oklab, var(--sc-accent) 6%, var(--sc-canvas));
}
.exames__grade { grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 2.4vh, 28px); }
.exames__copy { text-align: center; max-width: 760px; margin-inline: auto; }
.exames__copy .sc-body { max-width: 56ch; margin-top: 12px; }
.exames__copy h2 { margin-top: 0; }
.exames__copy .sc-body { margin-inline: auto; }
.mesa { width: 100%; max-width: 940px; margin-inline: auto; height: min(500px, calc(100svh - 340px)); }

/* ----------------------------------------------------- depois ------ */
@media (min-width: 901px) {
  .depois__grade { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; }
  .depois__copy { order: 2; }
}

/* -------------------------------------------------------- fim ------ */
.fim [data-stage] {
  background: radial-gradient(60% 70% at 70% 60%, color-mix(in oklab, var(--sc-accent) 12%, transparent), transparent 70%), var(--sc-canvas);
}

/* ---------------------------------------------------- celular ------ */
@media (max-width: 900px) {
  section:not(.hero) > [data-stage] { padding-top: 72px; padding-bottom: 76px; }
  .antes__grade { padding-top: 0; }
  .exames__copy .sc-body { display: none; }
  .mesa { height: min(500px, calc(100svh - 280px)); }
}

/* ------------------------------------------- movimento reduzido ---- */
.rm [data-stage] { padding-block: 96px; }

/* =====================================================================
   Rodada da prescrição: a Receita é o pico; Exames vira um bloco curto.
   ===================================================================== */

/* ---------------------------------------------------- receita ------ */
.receita [data-stage] { display: grid; align-items: center; }
.receita__grade {
  width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter);
  display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: clamp(28px, 4vw, 64px); align-items: center;
}
.receita__copy .sc-body { margin-top: 18px; font-size: 1.08rem; }
.balcao { position: relative; height: min(540px, calc(100svh - 200px)); }
.balcao > * { position: absolute; }
.cadastro { left: 0; top: 0; width: 44%; padding: 16px 16px 12px; }
.memed { right: 0; top: 6%; width: 52%; padding: 16px 16px 14px; z-index: 2; }
.envio { left: 0; bottom: 22%; width: 40%; padding: 12px 14px; display: flex; align-items: center; gap: 12px; font-size: var(--type-sm, 0.86rem); z-index: 3; }
.envio small, .arquivo small { display: block; color: var(--sc-ink-soft); font-size: var(--type-xs, 0.8rem); }
.envio .bolha { width: 34px; height: 34px; border-radius: var(--radius-8, 8px); display: grid; place-items: center; flex: none;
  background: color-mix(in srgb, var(--status-confirmado, #2e9d6b) 12%, var(--bg-main, #fff)); color: var(--status-confirmado, #2e9d6b); }
.arquivo { right: 4%; bottom: 0; width: 50%; padding: 12px 14px; display: flex; align-items: center; gap: 12px; font-size: var(--type-sm, 0.86rem); z-index: 3; }
.qr { width: 38px; height: 38px; flex: none; border-radius: 6px;
  background:
    linear-gradient(90deg, var(--sc-ink) 0 30%, transparent 30% 40%, var(--sc-ink) 40% 55%, transparent 55% 70%, var(--sc-ink) 70%) 0 0 / 100% 20%,
    linear-gradient(90deg, transparent 0 15%, var(--sc-ink) 15% 45%, transparent 45% 60%, var(--sc-ink) 60% 85%, transparent 85%) 0 50% / 100% 20%,
    linear-gradient(90deg, var(--sc-ink) 0 20%, transparent 20% 50%, var(--sc-ink) 50% 65%, transparent 65% 80%, var(--sc-ink) 80%) 0 100% / 100% 20%;
  background-repeat: no-repeat; opacity: 0.82; }
.envio, .arquivo { opacity: 0; transform: translateY(14px); transition: opacity var(--m-estado) var(--m-curva), transform var(--m-estado) var(--m-curva); }
.envio.on, .arquivo.on { opacity: 1; transform: none; }
.alerta { --v: 0; margin: 12px 0 0; padding: 8px 12px; border-radius: var(--radius-10, 10px); font-size: var(--type-xs, 0.8rem); font-weight: var(--weight-medium, 500);
  background: color-mix(in srgb, var(--color-warning, #c98a1b) calc(var(--v) * 12%), var(--bg-subtle, #f5f4f7));
  color: color-mix(in srgb, var(--color-warning, #9a6510) calc(var(--v) * 100%), var(--sc-ink-soft)); min-height: 1.3em; position: relative; }
.alerta span { opacity: var(--v); }
.alerta::before { content: ""; position: absolute; left: 12px; top: 50%; width: 46%; height: 6px; margin-top: -3px; border-radius: 4px;
  background: color-mix(in oklab, var(--sc-ink) 8%, transparent); opacity: calc(1 - var(--v)); }
.doc__cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--linha); }
.doc__cab b { font-size: var(--type-md, 0.95rem); font-weight: var(--weight-semibold, 600); }
.doc__cab span { font-size: var(--type-xs, 0.8rem); color: var(--sc-ink-soft); }
.selo-memed { display: inline-flex; align-items: center; height: 22px; padding: 0 var(--space-8, 8px); border-radius: var(--radius-6, 6px);
  background: color-mix(in srgb, var(--accent, var(--sc-accent)) 10%, var(--bg-main, #fff)); color: var(--accent, var(--sc-accent)) !important; font-weight: var(--weight-medium, 500); }
.cadastro .prt__topo { padding-bottom: 10px; margin-bottom: 10px; }
.ficha--fonte, .ficha--destino { gap: 7px 12px; }
.ficha--destino dd { --v: 0; position: relative; min-height: 1.3em; }
.ficha--destino dd span { opacity: var(--v); }
.ficha--destino dd::before { content: ""; position: absolute; left: 0; top: 50%; width: 64%; height: 6px; margin-top: -3px; border-radius: 4px;
  background: color-mix(in oklab, var(--sc-ink) 8%, transparent); opacity: calc(1 - var(--v)); }
.med { margin: 12px 0 0; padding: 10px 12px; border-radius: var(--radius-10, 10px); background: var(--bg-subtle, var(--lilas-1));
  font-size: var(--type-sm, 0.86rem); font-weight: var(--weight-medium, 500); }
.med small { display: block; font-weight: 400; color: var(--sc-ink-soft); font-size: var(--type-xs, 0.8rem); margin-top: 2px; }
.memed .med { opacity: 0; transform: translateY(6px); transition: opacity var(--m-estado) var(--m-curva), transform var(--m-estado) var(--m-curva); }
.memed .med.on { opacity: 1; transform: none; }
.salvo { margin: 12px 0 0; display: flex; align-items: center; gap: 8px; font-size: var(--type-xs, 0.8rem); color: var(--sc-ink-soft); }
.salvo.on { color: var(--color-success, var(--feito)); }
.salvo .chk { width: 18px; height: 18px; }
.salvo.on .chk { background: var(--feito); border-color: var(--feito); color: #fff; }

/* ------------------------------------------------- exames curto ---- */
.exames--curto { padding-block: clamp(4rem, 8vw, 6.5rem); }
.exames__curto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.exames--curto .exames__copy { text-align: left; max-width: none; margin: 0; }
.exames--curto .exames__copy .sc-body { margin-inline: 0; }
.evo--curto { position: static; width: auto; max-width: 440px; justify-self: end; }
.evo--curto .prt__topo .ficticio { margin-left: auto; }

@media (max-width: 900px) {
  .receita__grade { grid-template-columns: minmax(0, 1fr); gap: 16px; align-self: start; }
  .receita [data-stage] { align-items: start; }
  .receita__copy .sc-body, .receita .passos { display: none; }
  .balcao { height: min(540px, calc(100svh - 250px)); }
  /* empilhado: o cadastro vira uma faixa no topo e a Memed começa abaixo dele */
  .cadastro { width: 100%; padding: 10px 12px; }
  .cadastro .prt__topo { display: none; }
  .cadastro .ficha { gap: 4px 10px; font-size: var(--type-xs, 0.8rem); }
  .memed { width: 88%; top: 132px; right: 0; padding: 12px 14px; }
  .memed .med + .med { display: none; }
  .memed .med { margin-top: 10px; padding: 8px 10px; }
  .memed .alerta { margin-top: 10px; }
  .envio, .arquivo { bottom: 0; width: calc(50% - 5px); padding: 10px; gap: 8px; font-size: var(--type-xs, 0.8rem); align-items: flex-start; }
  .envio { left: 0; }
  .arquivo { right: 0; }
  .envio .bolha, .qr { width: 28px; height: 28px; }
  .arquivo small { display: none; }
  .exames__curto { grid-template-columns: minmax(0, 1fr); }
  .evo--curto { justify-self: stretch; max-width: none; }
}

.rm .ficha--destino dd { --v: 1; }
.rm .alerta { --v: 1; }
.rm .memed .med, .rm .envio, .rm .arquivo { opacity: 1; transform: none; }

/* =====================================================================
   Rodada 4: Manifesto em dois lados com contraste, hub de integrações,
   transições de entrada e saída dos capítulos fixos.
   ===================================================================== */

/* ------------------------------------------------- manifesto ------- */
.lados { margin: clamp(36px, 5vw, 64px) auto 0; max-width: 1040px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(14px, 2vw, 24px); text-align: left; }
.lado { border-radius: 28px; padding: clamp(22px, 3vw, 40px); }
.lado h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; text-transform: none; letter-spacing: -0.01em;
  font: 400 clamp(1.45rem, 2.1vw, 1.9rem)/1.1 var(--sc-font-display); color: var(--sc-ink); }
.lado ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.m-it { display: flex; gap: 12px; align-items: flex-start; padding: 13px 14px; border-radius: 14px; font-size: 1.02rem; line-height: 1.4; }
.m-marca { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.m-marca .ico { width: 14px; height: 14px; stroke-width: 2.4; }
.lado--rae { background:
  radial-gradient(80% 70% at 0% 0%, color-mix(in oklab, var(--sc-accent) 20%, transparent), transparent 70%),
  color-mix(in oklab, var(--sc-accent) 9%, var(--sc-canvas)); }
.lado--rae .m-it { background: color-mix(in oklab, white 72%, transparent); }
.lado--rae .m-marca { background: var(--sc-accent); color: #fff; }
.lado--voce { background: var(--bg-main, #fff); box-shadow: var(--elev-overlay), var(--glass-sheen); border: 0.5px solid rgba(0, 0, 0, 0.06); }
.lado--voce .m-it { background: var(--bg-subtle, var(--lilas-1)); }
.lado--voce .m-marca { border: 1.5px solid var(--sc-ink); color: var(--sc-ink); }
.m-voce { width: 20px; height: 20px; border-radius: 50%; background: var(--sc-ink); flex: none; }

/* ------------------------------------------- hub de integrações ---- */
.hub { margin-top: clamp(48px, 6vw, 84px); text-align: center; }
.hub > .rot { display: block; margin-bottom: 8px; }
.hub__palco { position: relative; height: 320px; max-width: 1000px; margin-inline: auto; }
.hub__linhas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hub__linhas path { fill: none; stroke: color-mix(in oklab, var(--sc-accent) 45%, transparent); stroke-width: 1.5;
  vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.mm .hub__linhas path { stroke-dashoffset: 1; }
.hub__centro { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: 20px; background: var(--bg-main, #fff);
  box-shadow: var(--elev-modal), 0 0 0 8px color-mix(in oklab, var(--sc-accent) 10%, transparent); }
.hub__centro b { font: 500 1.5rem/1 var(--sc-font-display); }
.hub__nos { list-style: none; margin: 0; padding: 0; }
.hub__no { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 12px; white-space: nowrap;
  background: var(--bg-main, #fff); box-shadow: var(--elev-raised); font: 500 0.92rem/1 var(--font-body, var(--sc-font-text)); }
.hub__no .ico { width: 18px; height: 18px; color: var(--sc-accent); }

@media (max-width: 900px) {
  .lados { grid-template-columns: minmax(0, 1fr); }
  .hub__palco { height: auto; }
  .hub__linhas { display: none; }
  .hub__centro { position: relative; left: auto; top: auto; transform: none; display: inline-flex; margin: 8px 0 18px; }
  .hub__nos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; text-align: left; }
  .hub__no { position: static; transform: none; }
}

/* =====================================================================
   Rodada 5: chão com borda esfumada. O fundo saiu do palco fixo (que
   desenhava uma borda reta ao entrar e ao soltar) e foi para a seção,
   num ::before com máscara que dissolve em cima e embaixo.
   ===================================================================== */
.antes [data-stage], .receita [data-stage] { background: none; }
.antes, .receita { isolation: isolate; }
.antes::before, .receita::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 32svh, #000 calc(100% - 32svh), transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 32svh, #000 calc(100% - 32svh), transparent);
}
.antes::before { background: var(--bg-main, var(--sc-surface)); }
.receita::before { background: color-mix(in oklab, var(--sc-accent) 7%, var(--sc-canvas)); }
/* o brilho acompanha o palco, mas nasce longe da borda */
.receita [data-stage] {
  background: radial-gradient(60% 55% at 50% 38%, color-mix(in oklab, var(--sc-accent) 12%, transparent), transparent 72%);
}