/* ============================================================================
   Lekto × Senac — Formação de Instrutores (landing dos vídeos)
   Plataforma: LEKTO. Página avulsa, marca Lekto + co-marca Senac.
   Não toca em nenhum arquivo compartilhado; consome só css/tokens.css.

   A gramática de scroll desta página tem UM contrato central, portado da
   linguagem expressiva V3: o JS escreve `--progress` (0→1) em cada elemento
   marcado com [data-progress], e o CSS faz o resto. Nada de animação imperativa
   para movimento ligado ao scroll — só o fio (stroke-dashoffset) é scrubado por
   timeline GSAP pausada, porque desenho de path não cabe em custom property.
   ========================================================================== */

/* ---------- 0. base ---------- */
.sn-body {
  margin: 0;
  background: var(--color-surface-tinted);
  color: var(--theme-text-primary);
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.sn-body * { box-sizing: border-box; }
.sn-body :focus-visible {
  outline: var(--border-width-thin) solid var(--color-primary-pure);
  outline-offset: 3px;
  border-radius: var(--border-radius-quark);
}

/* Escala de display da página. Derivada dos tokens de tipografia por razão de
   layout (a rampa do DS termina em 64px e uma landing precisa de mais peso na
   dobra 1). [PROPOSTA] caso o Gustavo queira oficializar os degraus. */
.sn-body {
  /* Duas recalibragens, ambas por causa do texto que o título passou a
     carregar. Foi 10.5vw (manchete de 36 caracteres), depois 8.8vw quando a
     manchete cresceu para 42. Agora o h1 é o NOME DO PROGRAMA — 43 caracteres
     que não se quebram onde a gente quer —, e em 8.8vw ele caía em quatro
     linhas e estourava o herói. Nesta escala assenta em duas.
     Nome de programa não é manchete: pede corpo de lockup, não de display. */
  /* O teto importa mais que o piso aqui: a caixa do herói trava em 1180px
     (ver .sn-hero__inner), então acima disso a largura para de crescer e só a
     fonte cresce — em huge*1.85 o nome voltava a quatro linhas numa tela de
     1920. Este teto é o maior corpo que ainda assenta em duas linhas dentro
     dos 1180px. */
  --sn-display-1: clamp(var(--font-size-xl), 7.4vw, calc(var(--font-size-huge) * 1.65));
  --sn-display-2: clamp(var(--font-size-xl),  6.4vw, calc(var(--font-size-huge) * 1.55));
  --sn-display-3: clamp(var(--font-size-lg),  3.6vw, calc(var(--font-size-huge) * 0.86));
  --sn-gutter: clamp(var(--spacing-sm), 4vw, var(--spacing-huge));
  /* Folga do topo das superfícies imersivas. Herdou o valor da barra fixa que
     existia aqui; subiu de 68px para 96px quando a marca fixa entrou no canto
     — é a faixa que a .sn-marca ocupa, e nenhum conteúdo pode DESCANSAR
     debaixo dela. Atravessar a marca durante a rolagem é inevitável em
     qualquer marca fixa; parar embaixo dela seria erro de layout. */
  --sn-topo-folga: 96px;
  --progress: 0;
  --sn-ink-soft: color-mix(in srgb, var(--theme-text-primary) 68%, transparent);
  --sn-on-dark-soft: color-mix(in srgb, var(--color-surface-tinted) 72%, transparent);
}

.sn-display {
  font-family: var(--font-display);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: -0.04em;
  line-height: 0.96;
  text-wrap: balance;
  margin: 0;
}
.sn-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- 1. primitivo de tween por --progress ----------
   Um elemento declara só a janela (--progress-start/end) e os pares
   start/end que quer animar. O transform é montado uma vez, aqui. */
.sn-tween {
  --progress-start: 0;
  --progress-end: 1;
  --t: clamp(0, 1, calc((var(--progress) - var(--progress-start)) / (var(--progress-end) - var(--progress-start))));
  --tx-start: 0px;  --tx-end: 0px;
  --ty-start: 0px;  --ty-end: 0px;
  --rot-start: 0deg; --rot-end: 0deg;
  --scale-start: 1;  --scale-end: 1;
  --tx:    calc(var(--tx-start)    + (var(--tx-end)    - var(--tx-start))    * var(--t));
  --ty:    calc(var(--ty-start)    + (var(--ty-end)    - var(--ty-start))    * var(--t));
  --rot:   calc(var(--rot-start)   + (var(--rot-end)   - var(--rot-start))   * var(--t));
  --scale: calc(var(--scale-start) + (var(--scale-end) - var(--scale-start)) * var(--t));
  transform: translateX(var(--tx)) translateY(var(--ty)) rotate(var(--rot)) scale(var(--scale));
  will-change: transform;
}

/* ---------- 2. superfície imersiva de marca (fundo granular) ----------
   Receita canônica: gradiente immersive-radial + grão granular em overlay.
   O grão vive ATRÁS do conteúdo e nunca sobre texto pequeno. */
.sn-dark {
  position: relative;
  background: var(--lkt-gradient-immersive-radial);
  color: var(--color-surface-tinted);
  isolation: isolate;
}
.sn-dark::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--lkt-grain-strong);
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
}
.sn-dark > * { position: relative; z-index: 1; }

/* ---------- 3. grifo ondulado (doodle do DS) ----------
   Traço à mão em pastel sob a palavra grifada. Máscara SVG repetida em x —
   sem cor dentro do SVG (só alfa), então a cor vem sempre de token. */
/* CUIDADO ao escolher o que vai dentro do <u>: a onda é um ::after posicionado
   sobre a CAIXA do inline-block, então ela só acerta enquanto o conteúdo couber
   numa linha. Se quebrar, a caixa passa a ocupar a largura disponível e o traço
   sai muito além da última palavra. <u> escrito à mão no html só serve para
   trecho curto que o autor garante que não quebra.

   Texto vindo de DADOS (nome de eixo, título de vídeo) nunca tem essa garantia:
   para ele existe `grifaPalavras` no js, que escreve um <u> por palavra. Cada
   caixa fica justa e a quebra de linha deixa de importar. */
.sn-wave u,
.sn-wave b {
  font-weight: inherit;
  text-decoration: none;
  display: inline-block;
  position: relative;
}
.sn-wave u::after,
.sn-wave b::after {
  content: "";
  position: absolute;
  left: 0.04em;
  right: -0.04em;
  bottom: var(--sn-wave-bottom, -0.16em);
  height: var(--sn-wave-h, 0.13em);
  background: var(--sn-wave-color, var(--color-pastel-lavender-deep));
  -webkit-mask-image: var(--sn-wave-svg);
  mask-image: var(--sn-wave-svg);
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-size: auto 100%;
  mask-size: auto 100%;
  pointer-events: none;
}
/* O vão entre duas palavras grifadas. Sem ele, cada onda para na borda da sua
   palavra e o traço fica picotado a cada espaço. Estica o suficiente para
   encostar no início da onda seguinte (o espaço da Bricolage é ~0.26em, e a
   próxima onda começa 0.04em para dentro). A última palavra não recebe: o
   traço passaria por baixo do ponto final.

   Numa quebra de linha a última palavra da linha sobra com esse tanto de
   traço no vazio — 0.3em, três ou quatro pixels, e a onda já é desenhada com
   sobra de propósito. */
.sn-wave u.sn-wave__vao::after,
.sn-wave b.sn-wave__vao::after { right: -0.3em; }

.sn-body {
  --sn-wave-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 20'><path d='M0,5.7c16,0,16,8.8,32.1,8.8s16-8.8,32.1-8.8' fill='none' stroke='black' stroke-width='10' stroke-linecap='round'/></svg>");
}

/* ---------- 4. botão ---------- */
.sn-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xquark);
  min-height: 44px;
  padding: 0 var(--spacing-sm);
  border: none;
  border-radius: var(--border-radius-pill);
  background: var(--color-primary-pure);
  color: var(--color-surface-tinted);
  font-family: var(--font-body);
  font-size: var(--font-size-xxs);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--motion-dur-fast) var(--motion-ease),
              transform var(--motion-dur-fast) var(--motion-ease);
}
.sn-btn:hover { background: var(--color-primary-dark); transform: translateY(-1px); }
.sn-btn:active { transform: translateY(0); }
.sn-btn svg { width: 18px; height: 18px; flex: none; }
.sn-btn--lg { min-height: 56px; padding: 0 var(--spacing-md); font-size: var(--font-size-xs); }
.sn-btn--ghost {
  background: transparent;
  color: var(--color-surface-tinted);
  box-shadow: inset 0 0 0 var(--border-width-hairline) color-mix(in srgb, var(--color-surface-tinted) 45%, transparent);
}
.sn-btn--ghost:hover { background: color-mix(in srgb, var(--color-surface-tinted) 12%, transparent); }

/* ---------- 5. marca Lekto × Senac ----------
   A barra fixa do topo saiu inteira (pedido do Gustavo): numa landing de
   vídeos ela roubava a dobra e repetia uma navegação que o scroll já dá. O
   lockup das duas marcas agora vive só no fim da página, no rodapé.
   O que sobrou aqui é a rede de segurança do arquivo da marca do Senac. */

/* ---------- 5b. a marca onipresente ----------
   A Lekto fixa no canto superior esquerdo, presente em toda a rolagem. O SVG
   entra como MÁSCARA, não como <img>: assim a cor é do CSS e pode trocar
   conforme a superfície que passa por baixo — lilás-Lekto sobre papel, branco
   sobre a superfície imersiva. Um <img> não recolore.

   Não é link. Numa página que agora anda por portão, um atalho para o topo
   seria uma saída lateral do percurso; aqui a marca é assinatura, não
   navegação — daí o pointer-events: none, que também garante que ela nunca
   roube um clique do que estiver embaixo. */
.sn-marca {
  position: fixed;
  top: clamp(var(--spacing-xxxs), 2vw, var(--spacing-md));
  left: var(--sn-gutter);
  z-index: 70;
  width: clamp(66px, 6.4vw, 96px);
  aspect-ratio: 32 / 16;
  pointer-events: none;
  background-color: var(--sn-marca-cor, var(--color-primary-pure));
  -webkit-mask: url("../assets/lekto-logo.svg") no-repeat left center / contain;
  mask: url("../assets/lekto-logo.svg") no-repeat left center / contain;
  transition: background-color var(--motion-dur-slow) var(--motion-ease);
}
/* A troca é escrita pelo js (ligaMarca), que mede qual [data-fundo] está sob a
   linha da marca. O estado inicial vem no HTML de cada página para não haver
   um quadro com a cor errada antes do primeiro cálculo. */
[data-marca="claro"]  { --sn-marca-cor: var(--color-primary-pure); }
[data-marca="escuro"] { --sn-marca-cor: var(--color-surface-tinted); }

@media (prefers-reduced-motion: reduce) {
  .sn-marca { transition: none; }
}

/* Fallback enquanto o SVG oficial do Senac não está em assets/.
   Trocar o arquivo faz a marca real aparecer sem mexer em mais nada. */
[data-senac-logo][data-asset="pendente"] img { display: none; }
[data-senac-logo][data-asset="pendente"]::after {
  content: "SENAC";
  font-family: var(--font-display);
  font-size: var(--font-size-xxs);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: 0.08em;
  color: var(--theme-text-muted);
  border: var(--border-width-hairline) dashed var(--color-surface-soft);
  border-radius: var(--border-radius-quark);
  padding: 2px var(--spacing-quark);
}

/* ---------- 6. herói ----------
   200svh de trilho, conteúdo em sticky. Conforme sai, o véu escurece
   (opacity ligada a --progress) e o conteúdo encolhe. */
.sn-hero {
  position: relative;
  min-height: calc(150svh + var(--border-radius-lg));
  margin-bottom: calc(var(--border-radius-lg) * -1);
  background: var(--color-surface-tinted);
}
.sn-hero__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.sn-hero__veil {
  position: absolute;
  inset: 0;
  background: var(--color-surface-deepest);
  opacity: calc(var(--progress, 0) * 0.42);
  pointer-events: none;
  z-index: 3;
}
.sn-hero__inner {
  --scale-min: 0.82;
  position: relative;
  z-index: 2;
  width: min(1180px, calc(100% - var(--sn-gutter) * 2));
  padding-top: var(--sn-topo-folga);
  text-align: center;
  transform: scale(calc(1 - (1 - var(--scale-min)) * var(--progress, 0)));
  will-change: transform;
}
.sn-hero__eyebrow {
  margin: 0 0 var(--spacing-sm);
  font-size: var(--font-size-xxs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary-pure);
}
.sn-hero__title {
  font-size: var(--sn-display-1);
  line-height: 1.02;
  --sn-wave-color: var(--color-pastel-lavender-deep);
  --sn-wave-bottom: -0.1em;
}
.sn-hero__lead {
  margin: var(--spacing-md) auto 0;
  max-width: 60ch;
  font-size: clamp(var(--font-size-xs), 1.5vw, var(--font-size-sm));
  color: var(--sn-ink-soft);
  text-wrap: pretty;
}
.sn-hero__cta { margin-top: var(--spacing-lg); display: flex; gap: var(--spacing-xxxs); justify-content: center; flex-wrap: wrap; }
.sn-hero__hint {
  position: absolute;
  left: 50%;
  bottom: var(--spacing-sm);
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--spacing-quark);
  font-size: var(--font-size-xxxs);
  font-weight: var(--font-weight-semi-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--theme-text-muted);
  opacity: calc(1 - var(--progress, 0) * 2.4);
}
.sn-hero__hint svg { width: 16px; height: 16px; animation: sn-nudge 2.2s var(--motion-ease) infinite; }
@keyframes sn-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* Doodles pastel do herói — flutuam de leve e saem com parallax. */
.sn-hero__doodles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: clamp(0, 1, calc(1 - var(--progress, 0) * 1.6));
}
.sn-hero__doodle { position: absolute; color: var(--sn-doodle, var(--color-pastel-lavender-deep)); }
.sn-hero__doodle svg { width: 100%; height: 100%; display: block; }

/* ---------- 7. a superfície imersiva da corrida de vídeos ----------
   Era aqui que vivia o fio contínuo, desenhado pelo scroll de ponta a ponta.
   Saiu: como condutor literal do caminho ele dominava a tela e disputava com o
   conteúdo. O que ficou no lugar são acentos soltos (§16) — mesmo vocabulário
   de doodle, sem linha atravessando nada.

   Camadas: grão (0) · seções (1). */
.sn-flow {
  position: relative;
  isolation: isolate;
  border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
  background: var(--lkt-gradient-immersive-radial);
  background-attachment: fixed;
  color: var(--color-surface-tinted);
}
.sn-flow::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--lkt-grain-strong);
  background-attachment: fixed;
  mix-blend-mode: overlay;
  pointer-events: none;
  border-radius: inherit;
}
.sn-flow > section,
.sn-flow > [data-stages],
.sn-flow > [data-intro],
.sn-flow > [data-eixo] { position: relative; z-index: 1; }

/* ---------- 8. abertura do fio (ilustração em sticky) ---------- */
.sn-open {
  padding: clamp(var(--spacing-huge), 9vw, var(--spacing-super)) 0 clamp(var(--spacing-xl), 5vw, var(--spacing-huge));
}
.sn-open__grid {
  width: min(1320px, calc(100% - var(--sn-gutter) * 2));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(var(--spacing-lg), 4vw, var(--spacing-extra-huge));
  align-items: start;
}
.sn-open__text { position: sticky; top: calc(var(--sn-topo-folga) + var(--spacing-xl)); }
.sn-open__kicker {
  margin: 0 0 var(--spacing-xxxs);
  font-size: var(--font-size-xxs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-pastel-lavender);
}
.sn-open__title { font-size: clamp(var(--font-size-lg), 4.2vw, calc(var(--font-size-huge) * 1.05)); line-height: 1.06; --sn-wave-color: var(--color-pastel-peach); }
.sn-open__body { margin-top: var(--spacing-md); font-size: var(--font-size-xs); color: var(--sn-on-dark-soft); max-width: 46ch; }
/* ---------- o mapa do percurso ----------
   Substituiu a ilustração desta dobra e virou um ORGANOGRAMA: de cima para
   baixo, dois passos comuns, um que se abre num ramo por eixo e um quarto onde
   tudo volta a se encontrar. Antes era horizontal e escondia metade da
   história — os dois primeiros vídeos apareciam colapsados num nó só e a
   avaliação, que fecha o percurso, não aparecia.

   Toda a geometria sai de --sn-ramos, que o js escreve com o número de eixos.
   A barra que abre e a que fecha vão do centro do PRIMEIRO ramo ao centro do
   ÚLTIMO; com N colunas de largura igual isso é exatamente 100%/(2N) em cada
   ponta. Entrou ou saiu um eixo, o desenho acompanha sem número mágico.

   --sn-mapa-vao é o comprimento de todo trecho vertical: o tronco entre dois
   passos, a descida do nó até a barra e a descida da barra até cada ramo. Um
   valor só mantém o desenho respirando por igual em qualquer largura. */
.sn-mapa {
  --scale-start: 0.94; --scale-end: 1;
  --sn-mapa-vao: clamp(16px, 1.6vw, 26px);
  --sn-mapa-fio: color-mix(in srgb, var(--color-surface-tinted) 30%, transparent);
  list-style: none;
  margin: 0;
  padding: clamp(var(--spacing-lg), 3vw, var(--spacing-xxl)) clamp(var(--spacing-md), 3vw, var(--spacing-xl));
  display: grid;
  justify-items: center;
  row-gap: var(--sn-mapa-vao);
  border-radius: var(--border-radius-card-22);
  background: color-mix(in srgb, var(--color-surface-deepest) 24%, transparent);
  box-shadow: inset 0 0 0 var(--border-width-hairline) color-mix(in srgb, var(--color-surface-tinted) 12%, transparent);
  transform-origin: 50% 60%;
}

/* Cada passo ocupa uma linha inteira da grade e é o que ancora os fios: o
   tronco que desce dele mora no vão da linha, logo abaixo da própria caixa. */
.sn-mapa__passo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
/* o tronco entre um passo e o próximo — no último não desce nada */
.sn-mapa__passo::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: var(--border-width-hairline-plus);
  height: var(--sn-mapa-vao);
  background: var(--sn-mapa-fio);
}
.sn-mapa__passo:last-child::after { display: none; }

/* O nó: pastilha com o ícone do passo e o nome. Os quatro ícones são os
   mesmos do balanço final, na mesma ordem. */
.sn-mapa__no {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-nano);
  padding: var(--spacing-nano) var(--spacing-xs);
  border-radius: var(--border-radius-pill);
  background: color-mix(in srgb, var(--color-surface-tinted) 8%, transparent);
  box-shadow: inset 0 0 0 var(--border-width-hairline) color-mix(in srgb, var(--color-surface-tinted) 16%, transparent);
  text-align: left;
}
.sn-mapa__ic { flex: none; display: block; color: var(--color-pastel-lavender); }
.sn-mapa__ic svg { display: block; width: 22px; height: 22px; }
.sn-mapa__rot {
  font-size: var(--font-size-xxs);
  font-weight: var(--font-weight-bold);
  line-height: 1.25;
  color: var(--color-surface-tinted);
}

/* ---- o passo que se abre ----
   O nó primeiro, os ramos abaixo. Os três comprimentos verticais aqui são o
   mesmo --sn-mapa-vao, e é isso que faz cada linha encostar na barra em vez de
   parar perto dela:

     nó ──(margem do <ul>)──> barra que abre    (.sn-mapa__no::after)
     barra ──(padding-top)──> ponto do ramo     (.sn-mapa__ramo::before)
     ramo ──(padding-bottom)──> barra que fecha (.sn-mapa__ramo::after)

   Os ramos ESTICAM na altura da linha (o padrão da grade), e é por isso que a
   barra de baixo encontra os quatro no mesmo lugar apesar de um nome ocupar
   uma linha e outro duas. */
.sn-mapa__passo--abre > .sn-mapa__no { position: relative; }
.sn-mapa__passo--abre > .sn-mapa__no::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: var(--border-width-hairline-plus);
  height: var(--sn-mapa-vao);
  background: var(--sn-mapa-fio);
}
.sn-mapa__ramos {
  position: relative;
  list-style: none;
  margin: var(--sn-mapa-vao) 0 0;
  padding: var(--sn-mapa-vao) 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(var(--sn-ramos, 4), minmax(0, 1fr));
}
/* as duas barras horizontais: a que abre, no topo, e a que fecha, embaixo */
.sn-mapa__ramos::before,
.sn-mapa__ramos::after {
  content: "";
  position: absolute;
  left: calc(100% / (var(--sn-ramos, 4) * 2));
  right: calc(100% / (var(--sn-ramos, 4) * 2));
  height: var(--border-width-hairline-plus);
  background: var(--sn-mapa-fio);
}
.sn-mapa__ramos::before { top: 0; }
.sn-mapa__ramos::after { bottom: 0; }

.sn-mapa__ramo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--spacing-xquark);
  padding: 0 var(--spacing-quark);
  text-align: center;
}
.sn-mapa__ramo::before,
.sn-mapa__ramo::after {
  content: "";
  position: absolute;
  left: 50%;
  width: var(--border-width-hairline-plus);
  height: var(--sn-mapa-vao);
  background: var(--sn-mapa-fio);
}
.sn-mapa__ramo::before { bottom: 100%; }
.sn-mapa__ramo::after { top: 100%; }
/* O ponto é o único lugar do mapa onde a cor do eixo aparece, e é o que amarra
   este desenho aos quatro painéis coloridos da bifurcação logo abaixo. O halo
   existe para ele não sumir contra a superfície escura no tamanho em que está. */
.sn-mapa__ponto {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: var(--border-radius-circle);
  background: var(--sn-ramo-cor);
  box-shadow: 0 0 0 var(--border-width-thick) color-mix(in srgb, var(--sn-ramo-cor) 22%, transparent);
}
.sn-mapa__eixo {
  font-size: var(--font-size-xxs);
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
  color: var(--color-surface-tinted);
  text-wrap: balance;
}

.sn-open__art {
  --scale-start: 0.9; --scale-end: 1;
  border-radius: var(--border-radius-card-22);
  overflow: hidden;
  box-shadow: var(--lkt-shadow-level3);
  transform-origin: 50% 70%;
}
.sn-open__art img { display: block; width: 100%; height: auto; }

/* ---------- 9. stage de vídeo ----------
   Trilho alto, miolo em sticky de 100svh. O player entra em ~0.86 e cresce
   para quase tela cheia; texto e número entram deslocados. */
.sn-stage {
  position: relative;
  /* Uma tela exata por vídeo. Foi 260svh, depois 165svh com sobreposição de
     -100svh entre stages — ambos existiam para dar trilho ao paralax enquanto
     a rolagem era livre. Com o portão (ligaPortao) a rolagem não é mais livre:
     o documento TERMINA no vídeo atual, e ele precisa terminar exatamente onde
     o vídeo encaixa na tela. 100svh sem sobreposição é o que faz o fim do
     documento coincidir com o stage preso no topo — nunca meio quadro. De
     quebra some o descanso morto que o Gustavo reclamou. */
  min-height: 100svh;
}

.sn-stage__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
/* Fundo opaco do stage — a mesma superfície imersiva do .sn-flow, com
   background-attachment: fixed nos dois, então as duas pinturas coincidem
   pixel a pixel e a emenda não aparece. Recuado à esquerda pela faixa do fio,
   que continua transparente para o traço passar. */
.sn-stage__sticky::before,
.sn-stage__sticky::after {
  content: "";
  position: absolute;
  inset: 0 0 0 var(--sn-gutter);
  z-index: 0;
  /* fixed nas duas camadas, aqui e no .sn-flow: assim gradiente E grão são
     pintados em relação à viewport e casam pixel a pixel entre elementos
     diferentes. Com o grão em scroll, cada stage tilava a partir da própria
     origem e a emenda aparecia como um risco horizontal na transição. */
  background-attachment: fixed;
}
.sn-stage__sticky::before { background-image: var(--lkt-gradient-immersive-radial); }
.sn-stage__sticky::after { background-image: var(--lkt-grain-strong); mix-blend-mode: overlay; }
.sn-stage__grid { position: relative; z-index: 1; }
.sn-stage__grid {
  width: 100%;
  padding-left: var(--sn-gutter);
  padding-top: var(--sn-topo-folga);
  display: grid;
  grid-template-columns: clamp(280px, 27vw, 460px) minmax(0, 1fr);
  /* Três áreas, não duas: o botão do portão é filho da grade para poder
     trocar de lugar no empilhado. O vídeo atravessa as duas linhas e continua
     centrado; texto e botão se encostam no meio (end + start), então o par
     também fica centrado. */
  grid-template-areas:
    "texto  media"
    "seguir media";
  column-gap: clamp(var(--spacing-sm), 3vw, var(--spacing-xxl));
  /* linha zero: quem dá o respiro entre a ficha técnica e o botão é a margem
     do próprio botão, senão soma com o gap da grade e abre um vão. */
  row-gap: 0;
  align-items: center;
}
/* O sticky tem 100svh e overflow hidden: sem um teto, conteúdo alto demais
   era cortado em silêncio nas duas pontas. Com o teto, quem cede é o player
   (ver .sn-stage__media logo abaixo) — que é o único elemento aqui que pode
   encolher sem perder informação. */
.sn-stage__grid { max-height: 100%; }
.sn-stage__grid > .sn-stage__text  { grid-area: texto; align-self: end; }
.sn-stage__grid > .sn-stage__media { grid-area: media; }
.sn-stage__grid > .sn-seguir       { grid-area: seguir; align-self: start; }
/* O intervalo de --progress vai de "topo do stage na base da tela" até "base
   do stage no topo da tela": 200svh. O stage ENCAIXA (topo no topo) na metade
   exata, 0.5 — e é aí que o documento acaba enquanto este for o último passo
   liberado. Por isso as duas janelas fecham pouco antes de 0.5: quando a
   rolagem para, o vídeo já está inteiro e parado, não a meio caminho. */
.sn-stage__text {
  --progress-start: 0.18; --progress-end: 0.48;
  --ty-start: 34px; --ty-end: 0px;
  opacity: var(--t);
}
/* A sobrelinha do bloco. Entrou no lugar de um número enorme (01, 02…): o
   número não dizia nada a quem chega, e a fase — "Primeiros passos", "Mão na
   massa" — situa a pessoa no percurso. A numeração continua existindo em
   `data-passo`, que é por onde o portão sabe o que já foi assistido. */
.sn-stage__fase {
  display: block;
  margin: 0;
  font-size: var(--font-size-xxxs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-pastel-lavender);
}
.sn-stage__title {
  margin-top: var(--spacing-xquark);
  font-size: clamp(var(--font-size-lg), 3.2vw, calc(var(--font-size-huge) * 0.8));
  line-height: 1.08;
  --sn-wave-color: var(--color-pastel-peach);
  --sn-wave-bottom: -0.09em;
  --sn-wave-h: 0.11em;
}
/* O nome do Encontro. Vive entre o título e a descrição porque é isso que
   diferencia um eixo do outro — o título é o mesmo nos quatro. Em itálico e na
   cor do eixo: lê como o nome de uma peça, que é o que é. */
.sn-stage__caso {
  /* folga maior que o normal: o traço ondulado do título desce abaixo da linha
     de base (--sn-wave-bottom) e encostava nesta linha */
  margin: var(--spacing-xxxs) 0 0;
  font-size: var(--font-size-xxs);
  font-style: italic;
  color: var(--sn-eixo-cor, var(--color-pastel-peach));
}
.sn-stage__desc {
  margin-top: var(--spacing-xxxs);
  font-size: var(--font-size-xxs);
  line-height: 1.55;
  color: var(--sn-on-dark-soft);
  text-wrap: pretty;
}
.sn-stage__meta { margin-top: var(--spacing-sm); display: flex; flex-wrap: wrap; gap: var(--spacing-quark); }

/* O botão do portão. É a única saída do passo: a página acaba logo abaixo
   dele enquanto este for o último vídeo liberado, então ele é primário e
   grande, nunca um link discreto. */
.sn-seguir { margin: clamp(var(--spacing-sm), 2.4vw, var(--spacing-lg)) 0 0; }

/* `hidden` nos passos travados precisa vencer o display do próprio componente
   (o deck é grid, a banda é flex). Escopado ao portão para não interferir no
   `hidden` que o formulário de registro controla por conta própria. */
[data-portao][hidden],
[data-portao-cauda][hidden] { display: none !important; }

/* Passo focado por programa depois de destravar: o anel de foco atrapalharia
   mais do que ajuda numa seção de tela cheia; quem navega por teclado recebe
   o anúncio pelo próprio foco. */
[data-portao]:focus { outline: none; }
.sn-chip {
  display: inline-flex; align-items: center; gap: var(--spacing-quark);
  padding: var(--spacing-quark) var(--spacing-xxxs);
  border-radius: var(--border-radius-pill);
  background: color-mix(in srgb, var(--color-surface-tinted) 12%, transparent);
  color: var(--color-surface-tinted);
  font-size: var(--font-size-xxxs);
  font-weight: var(--font-weight-semi-bold);
  letter-spacing: 0.02em;
}
.sn-chip svg { width: 14px; height: 14px; }

/* ---------- os rótulos do vídeo de eixo ----------
   Duas famílias, dois tratamentos, e a diferença é informação: marca formativa
   é vocabulário do Senac (contorno), ASET é da Lekto (preenchida). Sem essa
   distinção a linha vira sopa de rótulos — foi o que a especificação pediu
   para não acontecer. Cinco é o teto por card. */
.sn-stage__rotulos {
  list-style: none;
  margin: var(--spacing-xxxs) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-quark);
}
.sn-rotulo {
  padding: var(--spacing-quark) var(--spacing-xxxs);
  border-radius: var(--border-radius-pill);
  font-size: var(--font-size-xxxs);
  font-weight: var(--font-weight-semi-bold);
  line-height: 1.25;
}
.sn-rotulo--marca {
  color: var(--sn-on-dark-soft);
  box-shadow: inset 0 0 0 var(--border-width-hairline) color-mix(in srgb, var(--color-surface-tinted) 34%, transparent);
}
.sn-rotulo--aset {
  color: var(--color-surface-deepest);
  background: var(--color-pastel-lavender);
}

/* ---------- o bloco "Antes de assistir" ----------
   Fundo próprio, não parágrafo corrido: é a única coisa da página que o
   instrutor precisa FAZER antes de assistir, e diluída na prosa ela se perdia.
   O butter é a cor de atenção da paleta — e não é nenhuma das quatro cores de
   eixo, então o bloco não se confunde com o caminho que ele está escolhendo.

   Ganhou peso depois que o Gustavo apontou que a informação, sendo a mais
   importante da tela, passava batido: rubrica em cima, borda cheia em vez de
   fio, texto no corpo da página (16px, não 14) e o botão em butter sólido, que
   é o único elemento realmente amarelo da dobra. Empilhado, não em duas
   colunas: num painel de 420px o texto ao lado do ícone perdia cinco
   caracteres por linha. */
.sn-importante {
  margin-top: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-sm) var(--spacing-sm);
  border-radius: var(--border-radius-xs);
  /* Fundo OPACO, não o pastel a 16%: nos dois lugares em que este bloco vive
     ele fica sobre a superfície imersiva, e translúcido deixava passar o que
     estivesse atrás — na bifurcação, um dos acentos decorativos atravessava
     justamente a frase que o instrutor precisa ler. */
  background: color-mix(in srgb, var(--color-surface-deepest) 76%, var(--color-pastel-butter) 18%);
  box-shadow: inset 0 0 0 var(--border-width-thin) color-mix(in srgb, var(--color-pastel-butter) 58%, transparent);
  text-align: left;
}
.sn-importante__rubrica {
  display: flex;
  align-items: center;
  gap: var(--spacing-xquark);
  margin: 0 0 var(--spacing-nano);
  font-size: var(--font-size-xxxs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-pastel-butter);
}
.sn-importante__ic { flex: none; display: block; color: var(--color-pastel-butter); }
.sn-importante__ic svg { display: block; width: 20px; height: 20px; }
.sn-importante__texto {
  margin: 0;
  font-size: var(--font-size-xs);
  line-height: 1.45;
  color: var(--color-surface-tinted);
  text-wrap: pretty;
}
.sn-importante__cta { margin: var(--spacing-xxxs) 0 0; }
/* Butter sólido, texto escuro: é o botão que o instrutor precisa apertar antes
   de dar play, e em ghost ele desaparecia dentro do próprio bloco de aviso. */
.sn-btn--atencao {
  background: var(--color-pastel-butter);
  color: var(--color-surface-deepest);
}
.sn-btn--atencao:hover { background: color-mix(in srgb, var(--color-pastel-butter) 84%, var(--color-surface-tinted)); }
/* O ícone de link externo é o aviso de que a aba muda — fica menor que a seta
   de avanço dos outros botões, que prometem continuar aqui dentro. */
.sn-importante__cta .sn-btn svg { width: 15px; height: 15px; }

/* ---------- os atalhos do canto, na página do eixo ----------
   Aqui vivia o painel inteiro do aviso, preso no alto à direita durante os
   vídeos. Saiu: quem chega nesta página já leu o aviso na tela de escolha e já
   confirmou no diálogo que baixou o material, e um painel de 440px repetindo a
   instrução passava de lembrete a estorvo.

   Sobraram dois botões pequenos — baixar, para quem perdeu o arquivo, e trocar
   de eixo, no lugar do link que ficava acima do título. `is-fora` (escrito pelo
   js) os retira a partir da avaliação: dali em diante não há material para
   baixar nem eixo para trocar. */
.sn-atalhos {
  position: fixed;
  top: calc(var(--sn-topo-folga) - var(--spacing-sm));
  right: var(--sn-gutter);
  z-index: 60;
  display: flex;
  gap: var(--spacing-nano);
  transition: opacity var(--motion-dur-slow) var(--motion-ease),
              transform var(--motion-dur-slow) var(--motion-ease);
}
.sn-atalhos.is-fora {
  opacity: 0;
  transform: translateY(calc(var(--spacing-sm) * -1));
  pointer-events: none;
}
/* Fundo opaco, não translúcido: eles flutuam sobre o vídeo e o texto que
   passam por baixo, e um pastel a 12% deixaria os dois se misturarem. */
.sn-atalho {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xquark);
  min-height: 40px;
  padding: 0 var(--spacing-xxxs);
  border-radius: var(--border-radius-pill);
  background: color-mix(in srgb, var(--color-surface-deepest) 82%, var(--color-pastel-butter) 14%);
  box-shadow: var(--lkt-shadow-level3),
              inset 0 0 0 var(--border-width-hairline-plus) color-mix(in srgb, var(--color-pastel-butter) 46%, transparent);
  color: var(--color-surface-tinted);
  font-size: var(--font-size-xxs);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  transition: background var(--motion-dur-fast) var(--motion-ease);
}
.sn-atalho svg { flex: none; width: 18px; height: 18px; color: var(--color-pastel-butter); }
.sn-atalho:hover { background: color-mix(in srgb, var(--color-surface-deepest) 70%, var(--color-pastel-butter) 26%); }
/* Trocar de eixo tem MENOS ênfase de propósito: é uma saída, não a ação que a
   página quer. Sem o butter, sem sombra e com o ícone na cor do texto. */
.sn-atalho--fraco {
  background: color-mix(in srgb, var(--color-surface-deepest) 78%, transparent);
  box-shadow: inset 0 0 0 var(--border-width-hairline) color-mix(in srgb, var(--color-surface-tinted) 26%, transparent);
  font-weight: var(--font-weight-medium);
}
.sn-atalho--fraco svg { color: var(--sn-on-dark-soft); }
.sn-atalho--fraco:hover { background: color-mix(in srgb, var(--color-surface-tinted) 12%, transparent); }

/* Na bifurcação o bloco é da SEÇÃO, não de um vídeo. O cabeçalho ali é
   alinhado à esquerda (ver .sn-fork__head: um título centralizado brigaria com
   a diagonal da banda logo abaixo), então o bloco acompanha — e recebe a mesma
   medida de leitura do parágrafo que vem antes dele. */
.sn-fork__aviso .sn-importante { max-width: 52ch; }

/* ---------- a confirmação de material ----------
   Abre no clique de um painel de eixo, na bifurcação. É o único ponto do
   percurso que interrompe o instrutor, e existe porque a condição é real: o
   vídeo do outro lado acompanha um roteiro que precisa estar em mão.

   `<dialog>` nativo. O elemento é o VÉU (inset 0, grade que centraliza) e o
   miolo é um filho — daí o clique-para-fechar do js poder distinguir os dois
   pelo target. `::backdrop` do navegador não é usado: ele não aceita
   color-mix com tokens em todos os motores, e o próprio dialog dá o mesmo
   efeito com controle total. */
.sn-modal {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  max-height: none;
  height: 100%;
  margin: 0;
  padding: var(--sn-gutter);
  border: none;
  background: color-mix(in srgb, var(--color-surface-deepest) 86%, transparent);
  overflow: auto;
}
/* Sem isto o dialog fica com display:block e o miolo cola no topo. `open` é
   necessário porque o padrão do elemento fechado é display:none, e um
   display:grid incondicional o deixaria visível sempre. */
.sn-modal[open] { display: grid; place-items: center; }
.sn-modal::backdrop { background: transparent; }
.sn-modal__inner {
  position: relative;
  width: min(560px, 100%);
  padding: clamp(var(--spacing-lg), 4vw, var(--spacing-xxl));
  border-radius: var(--border-radius-card-22);
  background: var(--lkt-gradient-immersive-radial);
  box-shadow: var(--lkt-shadow-level4),
              inset 0 0 0 var(--border-width-hairline) color-mix(in srgb, var(--color-surface-tinted) 16%, transparent);
  color: var(--color-surface-tinted);
  text-align: left;
}
/* O X é a saída, não uma ação: fica pequeno, sem fundo, e some para o canto. */
.sn-modal__x {
  position: absolute;
  top: var(--spacing-xxxs);
  right: var(--spacing-xxxs);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: var(--border-radius-circle);
  background: transparent;
  color: var(--sn-on-dark-soft);
  cursor: pointer;
}
.sn-modal__x svg { width: 20px; height: 20px; }
.sn-modal__x:hover { background: color-mix(in srgb, var(--color-surface-tinted) 12%, transparent); color: var(--color-surface-tinted); }
.sn-modal__rubrica {
  margin: 0 0 var(--spacing-xquark);
  font-size: var(--font-size-xxxs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-pastel-butter);
}
.sn-modal__title {
  margin: 0;
  font-size: clamp(var(--font-size-md), 3.4vw, var(--font-size-xl));
  line-height: 1.1;
  --sn-wave-color: var(--color-pastel-butter);
}
.sn-modal__texto {
  margin: var(--spacing-md) 0 0;
  font-size: var(--font-size-xs);
  line-height: 1.5;
  color: var(--sn-on-dark-soft);
  text-wrap: pretty;
}
/* Baixar primeiro, seguir depois: a ordem é a da decisão que a pergunta pede.
   No estreito eles empilham em vez de apertar, e o de baixar continua em cima. */
.sn-modal__acoes {
  margin-top: clamp(var(--spacing-md), 3vw, var(--spacing-lg));
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xxxs);
}
.sn-modal__acoes .sn-btn { flex: 1 1 auto; justify-content: center; }

/* ---------- 9b. a tela de passagem ----------
   Uma tela inteira entre um vídeo e o próximo. O texto que vive aqui era um
   parágrafo miúdo embaixo do player, onde competia com o vídeo que acabou de
   terminar e perdia. Sozinho numa tela, ele vira o que é: a costura entre dois
   passos — o que ficou para trás e o que vem a seguir.

   Não pinta fundo próprio: está dentro do .sn-flow e herda o aubergine
   granular, então a passagem lê como o mesmo lugar, num tempo diferente. */
.sn-passo {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sn-topo-folga) var(--sn-gutter) clamp(var(--spacing-xl), 6vw, var(--spacing-huge));
}
.sn-passo__inner {
  position: relative;
  z-index: 1;
  width: min(780px, 100%);
  text-align: center;
}
/* O símbolo de passo cumprido. É o que dá à tela a função de marco: sem ele a
   frase pousa no vazio e vira um slide solto. */
.sn-passo__marca {
  /* flex, não block com margin auto: o span ocupa a linha inteira e a margem
     automática não teria o que centrar — o SVG encostava na esquerda. */
  display: flex;
  justify-content: center;
  margin: 0 0 clamp(var(--spacing-sm), 3vw, var(--spacing-lg));
  color: var(--color-pastel-mint);
}
.sn-passo__marca svg {
  display: block;
  width: clamp(40px, 4.6vw, 64px);
  height: clamp(40px, 4.6vw, 64px);
  stroke-width: 1.4;
}
.sn-passo__fase {
  margin: 0 0 var(--spacing-xs);
  font-size: var(--font-size-xxxs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-pastel-lavender);
}
/* Corpo de leitura em escala de display: grande o bastante para a frase ser o
   assunto da tela, pequeno o bastante para ela ser LIDA — não é manchete, é
   uma frase de duas orações. */
.sn-passo__texto {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--font-weight-semi-bold);
  font-size: clamp(var(--font-size-sm), 2.5vw, calc(var(--font-size-huge) * 0.62));
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--color-surface-tinted);
  /* balance, não pretty: o bloco é curto e centralizado, e é aqui que o
     algoritmo de linhas equilibradas serve — com pretty sobrava uma linha
     muito mais curta no meio, que num texto centrado salta aos olhos. */
  text-wrap: balance;
}
.sn-passo__dica {
  margin: clamp(var(--spacing-lg), 4vw, var(--spacing-xxl)) 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-quark);
  font-size: var(--font-size-xxxs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sn-on-dark-soft);
}
.sn-passo__dica svg { width: 16px; height: 16px; }

@media (max-width: 1000px) {
  .sn-passo { min-height: 76svh; }
}


.sn-stage__media {
  --progress-start: 0.10; --progress-end: 0.44;
  --scale-start: 0.86; --scale-end: 1;
  transform-origin: 30% 50%;
  opacity: var(--t);
  /* Coluna flex para o player poder ceder altura. As notas de antes/depois são
     texto: encolher significaria cortá-las, então elas não cedem (flex: none) e
     o ajuste inteiro recai sobre o player. É o que faz o bloco caber em 720px
     de altura sem que ninguém tenha chutado um `min()` menor — e sem que o
     "Depois de assistir" seja comido pelo overflow em telas de notebook. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  /* O teto tem de ser DECLARADO, não herdado: a linha da grade é dimensionada
     pelo conteúdo, então o max-height da grade não chega até aqui e o player
     nunca recebia o sinal de encolher — o texto abaixo dele saía por baixo do
     sticky numa tela de 720px. A conta é a altura do sticky menos a folga do
     topo, que é o que sobra de fato para esta coluna. */
  max-height: calc(100svh - var(--sn-topo-folga) - var(--spacing-sm));
}
.sn-player {
  position: relative;
  width: 100%;
  /* Era min(70svh, 46vw). O bloco de destaque e o texto de continuidade
     entraram na MESMA coluna, acima e abaixo, e o sticky do stage é 100svh com
     overflow hidden — sem ceder altura aqui, o de baixo saía cortado. */
  height: min(52svh, 38vw);
  /* pode encolher quando a coluna aperta; nunca some */
  flex: 0 1 auto;
  min-height: 180px;
  border-radius: var(--border-radius-card-22);
  overflow: hidden;
  background: var(--color-surface-deepest);
  box-shadow: var(--lkt-shadow-level5);
}
.sn-player__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sn-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sn-player__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xxxs);
  border: none;
  background: color-mix(in srgb, var(--color-surface-deepest) 26%, transparent);
  color: var(--color-surface-tinted);
  font-family: var(--font-body);
  font-size: var(--font-size-xxs);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: background var(--motion-dur-base) var(--motion-ease);
}
.sn-player__play:hover { background: color-mix(in srgb, var(--color-surface-deepest) 10%, transparent); }
.sn-player__play span {
  display: grid; place-items: center;
  width: 84px; height: 84px;
  border-radius: var(--border-radius-circle);
  background: var(--color-primary-pure);
  box-shadow: var(--lkt-shadow-level4);
  transition: transform var(--motion-dur-base) var(--motion-ease);
}
.sn-player__play:hover span { transform: scale(1.07); }
.sn-player__play svg { width: 34px; height: 34px; }
/* Estado sem vídeo publicado: moldura de marca, não caixa quebrada. */
.sn-player--pendente { display: grid; place-items: center; background: var(--lkt-gradient-immersive); }
.sn-player__pendente {
  display: grid;
  justify-items: center;
  gap: var(--spacing-xxxs);
  color: var(--sn-on-dark-soft);
  font-size: var(--font-size-xxs);
  font-weight: var(--font-weight-semi-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sn-player__pendente svg { width: 52px; height: 52px; color: var(--color-pastel-lavender); opacity: 0.7; }

/* ---------- 10. deck de cards empilhados ---------- */
.sn-deck {
  position: relative;
  z-index: 10;
  margin-top: calc(var(--border-radius-lg) * -1);
  background: var(--color-surface-tinted);
  border-radius: var(--border-radius-lg);
  padding: clamp(var(--spacing-huge), 8vw, var(--spacing-super)) 0 clamp(var(--spacing-extra-huge), 10vw, var(--spacing-extra-super));
}
.sn-deck__grid {
  width: min(1320px, calc(100% - var(--sn-gutter) * 2));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(var(--spacing-lg), 4vw, var(--spacing-extra-huge));
  align-items: start;
}
.sn-deck__head { position: sticky; top: calc(var(--sn-topo-folga) + var(--spacing-xl)); }
.sn-deck__title { font-size: var(--sn-display-2); line-height: 1.04; --sn-wave-color: var(--color-pastel-aqua); }
.sn-deck__body { margin-top: var(--spacing-md); max-width: 44ch; color: var(--sn-ink-soft); }
.sn-deck__list { list-style: none; margin: 0; padding: 0; }
.sn-deck__item {
  position: sticky;
  top: calc(var(--sn-topo-folga) + var(--spacing-xl));
  transform: translateY(calc(var(--index, 0) * var(--spacing-sm)));
}
.sn-deck__item + .sn-deck__item { margin-top: var(--spacing-md); }
.sn-deck__card {
  --progress-start: 0; --progress-end: 1;
  --ty-start: 18%; --ty-end: 0%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--spacing-lg);
  min-height: 380px;
  padding: var(--spacing-md);
  border-radius: var(--border-radius-lg);
  background: var(--sn-card-bg, var(--color-pastel-lavender));
  color: var(--theme-text-primary);
  box-shadow: var(--lkt-shadow-level2);
}
.sn-deck__icon {
  display: grid; place-items: center;
  width: 56px; height: 56px;
  border-radius: var(--border-radius-circle);
  background: var(--color-surface-tinted);
  color: var(--color-primary-pure);
}
.sn-deck__icon svg { width: 26px; height: 26px; }
.sn-deck__card h3 { margin: 0; font-family: var(--font-display); font-weight: var(--font-weight-extrabold); font-size: var(--font-size-md); letter-spacing: -0.02em; }
.sn-deck__card p { margin: var(--spacing-nano) 0 0; font-size: var(--font-size-xxs); color: var(--sn-ink-soft); }

/* ---------- 11. rail (marquee com velocidade ligada ao scroll) ---------- */
.sn-rail { overflow: hidden; padding: clamp(var(--spacing-xl), 5vw, var(--spacing-extra-huge)) 0; }
.sn-rail__track { display: flex; width: max-content; will-change: transform; }
.sn-rail__pattern { display: flex; gap: var(--spacing-sm); padding-right: var(--spacing-sm); }
.sn-rail__item {
  display: inline-flex; align-items: center; gap: var(--spacing-xquark);
  padding: var(--spacing-xxxs) var(--spacing-md);
  border-radius: var(--border-radius-pill);
  background: color-mix(in srgb, var(--color-surface-tinted) 10%, transparent);
  box-shadow: inset 0 0 0 var(--border-width-hairline) color-mix(in srgb, var(--color-pastel-lavender) 34%, transparent);
  color: var(--color-surface-tinted);
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: clamp(var(--font-size-sm), 2.2vw, var(--font-size-lg));
  white-space: nowrap;
}
.sn-rail__item svg { width: 22px; height: 22px; color: var(--color-pastel-lavender); }

/* ---------- 12. rodapé ---------- */
.sn-foot { padding: clamp(var(--spacing-huge), 8vw, var(--spacing-super)) 0 var(--spacing-xl); }
.sn-foot__grid {
  width: min(1320px, calc(100% - var(--sn-gutter) * 2));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(var(--spacing-lg), 4vw, var(--spacing-extra-huge));
  align-items: end;
}
.sn-foot__title { font-size: var(--sn-display-2); line-height: 1.04; --sn-wave-color: var(--color-pastel-butter); }
.sn-foot__body { margin-top: var(--spacing-md); max-width: 46ch; color: var(--sn-on-dark-soft); }
.sn-foot__cta { margin-top: var(--spacing-lg); display: flex; gap: var(--spacing-xxxs); flex-wrap: wrap; }
.sn-foot__marks { display: flex; align-items: center; gap: var(--spacing-md); justify-content: flex-end; }
.sn-foot__brands {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xxs);
}
.sn-foot__chip {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-xquark) var(--spacing-nano);
  border-radius: var(--border-radius-nano);
  background: var(--color-surface-tinted);
}
.sn-foot__chip img { height: 30px; width: auto; display: block; }
/* 72px de largura ⇒ 36px de caixa ⇒ ~28px de desenho, a mesma presença do
   lockup do Senac ao lado. */
.sn-foot__lekto { width: 72px; height: auto; display: block; filter: brightness(0) invert(1); opacity: 0.92; }
.sn-foot__rule {
  width: min(1320px, calc(100% - var(--sn-gutter) * 2));
  margin: clamp(var(--spacing-xl), 5vw, var(--spacing-huge)) auto 0;
  padding-top: var(--spacing-sm);
  border-top: var(--border-width-hairline) solid color-mix(in srgb, var(--color-surface-tinted) 18%, transparent);
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  font-size: var(--font-size-xxxs);
  color: var(--sn-on-dark-soft);
}

/* ---------- 13. revelação simples ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--motion-dur-slow) var(--motion-ease),
              transform var(--motion-dur-slow) var(--motion-ease);
  transition-delay: var(--sn-delay, 0ms);
}
[data-reveal].is-inview { opacity: 1; transform: none; }

/* ---------- 14. mobile ---------- */
@media (max-width: 1000px) {
  .sn-body { --sn-topo-folga: 76px; }
  .sn-open__grid,
  .sn-deck__grid,
  .sn-fork__head,
  .sn-foot__grid { grid-template-columns: minmax(0, 1fr); }
  /* O organograma já é vertical, então o tronco atravessa a coluna inteira sem
     mexer. O que não cabe é a abertura em quatro colunas: cada nome ficaria com
     a largura de uma palavra. Vira 2x2, e os fios da abertura somem porque
     numa grade de duas colunas eles ligariam os pontos errados — quem diz que
     os quatro são alternativas do mesmo passo passa a ser a pastilha. */
  .sn-mapa__ramos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-nano); }
  .sn-mapa__ramos::before,
  .sn-mapa__ramos::after,
  .sn-mapa__ramo::before,
  .sn-mapa__ramo::after { display: none; }
  .sn-mapa__ramo {
    flex-direction: row;
    justify-content: flex-start;
    padding: var(--spacing-xquark) var(--spacing-xxxs);
    border-radius: var(--border-radius-pill);
    background: color-mix(in srgb, var(--color-surface-tinted) 8%, transparent);
    text-align: left;
  }
  /* No estreito os atalhos saem do canto e voltam para o fluxo, onde o html
     já os colocou: flutuando, dois botões cobririam o topo do vídeo em vez de
     acompanhá-lo. Aí eles não somem mais na avaliação — no fluxo não há o que
     atrapalhar, e um botão que desaparece sozinho da página confunde. */
  .sn-atalhos {
    position: static;
    margin: 0 var(--sn-gutter) var(--spacing-lg);
    flex-wrap: wrap;
  }
  .sn-atalhos.is-fora { opacity: 1; transform: none; pointer-events: auto; }
  .sn-open__text,
  .sn-deck__head,
  .sn-deck__item { position: static; transform: none; }
  .sn-deck__item + .sn-deck__item { margin-top: var(--spacing-sm); }
  .sn-deck__card { min-height: 0; }
  .sn-foot__marks { justify-content: flex-start; }

  /* Sem pin no mobile: o vídeo ocupa a largura toda e o texto vem por cima. */
  .sn-stage { min-height: 0; padding: var(--spacing-xl) 0; }
  .sn-stage__sticky { position: static; height: auto; }
  .sn-stage__sticky::before,
  .sn-stage__sticky::after { content: none; }
  .sn-stage__grid {
    grid-template-columns: minmax(0, 1fr);
    /* Empilhado o botão desce para depois do vídeo. */
    grid-template-areas: "texto" "media" "seguir";
    padding: 0 var(--sn-gutter);
    gap: var(--spacing-sm);
  }
  .sn-stage__grid > .sn-stage__text { align-self: auto; }
  .sn-stage__media { transform: none; }
  /* Empilhado não há sticky para caber dentro: o player volta a ser governado
     pela proporção, sem ceder altura nem ter piso — que numa tela de 320px
     forçaria letterbox no pôster. */
  .sn-player { height: auto; aspect-ratio: 16 / 9; flex: none; min-height: 0; }
  .sn-stage__media { max-height: none; }
  .sn-player__play span { width: 64px; height: 64px; }

  .sn-hero { min-height: calc(130svh + var(--border-radius-lg)); }
}

@media (max-width: 700px) {
  /* Os doodles são posicionados por porcentagem e, no estreito, caem em cima do
     olho-de-boi e do CTA. São decoração: somem em vez de disputar espaço. */
  .sn-hero__doodles { display: none; }
}

@media (max-width: 640px) {
  .sn-hero__title { font-size: clamp(var(--font-size-xl), 13vw, var(--font-size-huge)); }
  /* Num celular, duas colunas quebram "Turismo, Hospitalidade e Lazer" em três
     linhas. Uma coluna só: cada eixo ocupa a largura toda e se lê de primeira. */
  .sn-mapa__ramos { grid-template-columns: minmax(0, 1fr); }
  .sn-foot__lekto { width: 62px; }
  .sn-foot__chip img { height: 26px; }
}

/* ---------- 15. movimento reduzido ----------
   Tudo que é ligado ao scroll congela no estado final: a página fica legível
   e completa, sem nenhum deslocamento. */
@media (prefers-reduced-motion: reduce) {
  .sn-body * { animation: none !important; }
  .sn-tween,
  .sn-hero__inner,
  .sn-stage__media,
  .sn-deck__item { transform: none !important; }
  .sn-stage__text,
  .sn-stage__media { opacity: 1 !important; }
  .sn-hero__veil { opacity: 0 !important; }
  .sn-hero__hint { display: none; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .sn-stage { min-height: 0; padding: var(--spacing-xl) 0; }
  .sn-stage__sticky { position: static; height: auto; }
  .sn-stage__sticky::before,
  .sn-stage__sticky::after { content: none; }
  .sn-hero { min-height: 100svh; }
  .sn-hero__sticky { position: static; height: auto; min-height: 100svh; }
}

/* ============================================================================
   BIFURCAÇÃO POR EIXO DE ATUAÇÃO
   O percurso deixou de ser uma fila: dois vídeos comuns, uma abertura por eixo
   e o reencontro no avaliativo. Como quem entra num eixo não deve ver o
   conteúdo do outro, o miolo é uma PÁGINA à parte — e o que fica aqui é o
   desenho da estrutura, que era justamente o que a Priscila e o Sergio
   perguntaram se dava para mostrar na própria página.
   ========================================================================== */

/* ---------- a seção da bifurcação ---------- */
.sn-fork {
  /* Respiro menor que o das outras dobras: aqui o cabeçalho e a banda de
     eixos precisam ser vistos JUNTOS — a instrução e as opções que ela manda
     escolher. Cada respiro a mais empurrava a banda para fora da tela. */
  /* Sem respiro embaixo: a banda de eixos é o fim do documento nesta página,
     e qualquer folga ali seria rolagem depois da decisão — exatamente o que a
     trava existe para impedir. */
  padding: clamp(var(--spacing-xl), 6vw, var(--spacing-huge)) 0 0;
}
.sn-fork__head {
  /* o título aqui é uma frase inteira, não três palavras: precisa de mais
     linha para não quebrar em degraus. Alinhado à esquerda: a banda de
     painéis logo abaixo é uma diagonal cheia, e um título centralizado
     brigaria com ela por eixo de simetria.

     Duas colunas: o aviso de baixar o material foi para a direita. Empilhado
     sob o parágrafo ele somava altura a uma dobra que já tem título grande, e
     empurrava a banda de eixos para fora da tela — com metade da largura
     vazia ao lado. Lado a lado, a dobra inteira cabe numa tela média. */
  width: min(1320px, calc(100% - var(--sn-gutter) * 2));
  margin: 0 auto clamp(var(--spacing-md), 2.6vw, var(--spacing-lg));
  text-align: left;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(var(--spacing-lg), 4vw, var(--spacing-xxl));
  align-items: start;
}
/* O empilhamento mora AQUI, não no bloco de 1000px lá acima: aquele bloco vem
   antes desta regra no arquivo e, com a mesma especificidade, perdia por ordem
   — o aviso ficava numa coluna de 126px num celular de 375, com a rubrica
   quebrada em três linhas. */
@media (max-width: 1000px) {
  .sn-fork__head { grid-template-columns: minmax(0, 1fr); }
}
/* no alto da coluna, não centrado nela: é uma instrução a cumprir antes de
   escolher, e alinhada ao título ela é lida junto com ele.

   Posicionado com z-index para passar POR CIMA dos acentos: eles são
   decoração absoluta desta seção e, com o bloco no peso que ganhou, o rabisco
   da direita caía em cima da frase que o instrutor precisa ler. */
.sn-fork__aviso { position: relative; z-index: 1; }
.sn-fork__aviso .sn-importante { max-width: none; margin-top: 0; }
.sn-fork__title {
  font-size: clamp(var(--font-size-lg), 4vw, var(--font-size-huge));
  /* o grifo ondulado fica no vão entre as linhas: com o "um" no meio da frase,
     e não na última linha, a entrelinha abre e o grifo sobe para perto da
     palavra que ele marca, em vez de riscar a linha de baixo */
  line-height: 1.28;
  max-width: 20ch;
  --sn-wave-bottom: -0.05em;
  --sn-wave-color: var(--color-pastel-peach);
}
.sn-fork__body {
  margin: var(--spacing-md) 0 0;
  max-width: 52ch;
  color: var(--sn-on-dark-soft);
  text-wrap: pretty;
}

/* ---------- os ramos: uma banda de painéis inclinados ----------
   A bifurcação deixou de ser uma grade de cards e virou UMA banda que corta a
   página de ponta a ponta em diagonal — um painel por eixo, cada um com a
   ilustração do seu ofício ao fundo. A inclinação é o desenho da própria
   escolha: caminhos que divergem, não itens de uma lista.

   Geometria, que é toda derivada de duas variáveis:
   - o painel é enviesado por --sn-lean;
   - arte e conteúdo levam o CONTRA-viés, então voltam ao prumo na tela;
   - a fileira é mais larga que a banda por --sn-sangria (metade do avanço do
     viés), e a banda corta: assim o bisel nasce fora da tela e a borda que se
     vê nas pontas é a da janela, não um triângulo solto.
   Trocar --sn-lean reposiciona tudo; não há número mágico espalhado. */
.sn-fork__banda {
  --sn-lean: 12deg;
  /* tan(12deg). Escrito à mão em vez de tan(): é o fator que a sangria e o
     bisel do conteúdo precisam, e assim a conta não depende de suporte a
     funções trigonométricas em CSS. Mudou --sn-lean? mude também este. */
  --sn-lean-tan: 0.2126;
  /* Foi 62svh com piso de 420. A banda é a metade de baixo de uma dobra que
     precisa caber inteira numa tela: nesta altura ela divide o espaço com o
     cabeçalho em vez de expulsá-lo. */
  --sn-banda-alt: clamp(360px, 50svh, 560px);
  --sn-sangria: calc(var(--sn-banda-alt) * var(--sn-lean-tan) / 2);
  position: relative;
  overflow: hidden;
}
.sn-fork__eixos {
  list-style: none;
  /* alarga a fileira para os dois lados pelo tanto que o viés avança */
  margin: 0 calc(var(--sn-sangria) * -1);
  padding: 0;
  display: flex;
  align-items: stretch;
  height: var(--sn-banda-alt);
  /* A frincha É o desenho. Dois painéis escuros encostados não têm divisa
     visível — o viés existiria na geometria e não nos olhos. Com a fresta, a
     superfície imersiva da página aparece por trás e cada painel vira uma
     laje inclinada, que é o que a bifurcação precisa mostrar.

     Ela não vem mais do `gap`: com a divisa curva, a fresta é recortada pelo
     próprio clipPath (o `.963` do path), senão o vão somaria dois valores e
     abriria demais no meio da altura. */
  gap: 0;
}

/* O clipPath não desenha nada: é só a forma que as lajes vestem. */
.sn-fork__forma { position: absolute; width: 0; height: 0; }
.sn-eixo {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  position: relative;
  /* visível, não hidden: a laje se estende --sn-curva-folga além da fatia para
     o arco ter onde sair. Quem recorta agora é o clipPath, não a caixa. */
  overflow: visible;
  transform: skewX(calc(var(--sn-lean) * -1));
  /* A folga onde a barriga do arco sai da fatia. Vive aqui porque a laje e o
     traço da divisa precisam da MESMA medida para pousarem um sobre o outro. */
  --sn-curva-folga: 3%;
}

/* A laje. Ela é ABSOLUTA e 3% mais larga que a fatia: é essa folga que dá
   espaço para a barriga do arco: sem ela a curva encostaria no limite da caixa
   e voltaria a ser lida como reta. A porcentagem resolve contra a fatia, então
   a folga acompanha a largura do painel em qualquer tela — nada em px. */
.sn-eixo__card {
  position: absolute;
  inset: 0 calc(var(--sn-curva-folga) * -1) 0 0;
  display: block;
  color: var(--color-surface-tinted);
  text-decoration: none;
  clip-path: url(#sn-laje-curva);
}

/* A borda da laje, na cor do eixo. Era um box-shadow inset, que segue a CAIXA:
   com a divisa curva ele voltaria a desenhar uma reta enquanto a laje arqueia.
   Virou traço vetorial sobre a mesma curva — que além de acertar a forma é o
   traço à mão do DS (pastel, ponta arredondada), e não um contorno de caixa.

   Chegou aqui depois de uma tentativa com filter: drop-shadow, que segue o
   alfa recortado e portanto acertava a curva, mas refiltrava a fotografia
   inteira a cada frame do zoom de hover — caro de sobra para uma linha. */
.sn-eixo__divisa {
  position: absolute;
  inset: 0 calc(var(--sn-curva-folga) * -1) 0 0;
  z-index: 3;
  pointer-events: none;
  fill: none;
  stroke: color-mix(in srgb, var(--sn-eixo-cor) 62%, transparent);
  stroke-width: 1.6;
  stroke-linecap: round;
}
.sn-eixo__card:focus-visible {
  outline: var(--border-width-thin) solid var(--sn-eixo-cor);
  outline-offset: calc(var(--spacing-quark) * -1);
}

/* a arte volta ao prumo. Alargada pelo avanço do viés para os dois lados,
   senão a contra-inclinação deixaria os cantos do paralelogramo vazios. */
.sn-eixo__art {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--sn-banda-alt) * var(--sn-lean-tan) * -0.75);
  right: calc(var(--sn-banda-alt) * var(--sn-lean-tan) * -0.75);
  z-index: 0;
  overflow: hidden;
  transform: skewX(var(--sn-lean));
  background: var(--lkt-gradient-immersive-radial);
}
.sn-eixo__art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* a cena vive na faixa central da foto; puxar o enquadramento um pouco para
     cima deixa mais respiro embaixo, onde entra o resumo */
  object-position: 50% 44%;
  /* Fotografia crua de três salas diferentes chega com temperatura e croma
     diferentes. Baixar um pouco a saturação aproxima as três e impede que a
     cor da foto brigue com os pastéis do eixo, que são a cor que informa. */
  filter: saturate(0.82) contrast(1.06);
  transform: scale(1.02);
  transition: transform var(--motion-dur-slow) var(--motion-ease);
}
.sn-eixo__card:hover .sn-eixo__art img,
.sn-eixo__card:focus-visible .sn-eixo__art img { transform: scale(1.07); }

/* O véu tem DUAS funções, e por isso duas camadas.

   1. Banho aubergine. É o que faz a FOTOGRAFIA pertencer à superfície de
      marca: sem ele o painel é um retângulo claro de sala de aula colado no
      escuro, e a banda deixa de ler como uma peça só. É a receita do DS para
      integrar foto ("leve overlay aubergine"), e substitui o fundo aubergine
      que a ilustração já trazia pronto.
   2. Legibilidade. Escurece topo e pé, onde o texto pousa, e deixa a faixa do
      meio — a cena — mais aberta. Com foto ela precisa vir mais forte que com
      ilustração: a foto tem alta frequência e áreas claras onde a ilustração
      tinha fundo chapado. */
.sn-eixo__veu {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--color-surface-deepest) 82%, transparent) 0%,
      color-mix(in srgb, var(--color-surface-deepest) 8%, transparent) 30%,
      color-mix(in srgb, var(--color-surface-deepest) 18%, transparent) 56%,
      color-mix(in srgb, var(--color-surface-deepest) 70%, transparent) 78%,
      color-mix(in srgb, var(--color-surface-deepest) 94%, transparent) 100%
    ),
    linear-gradient(
      color-mix(in srgb, var(--color-surface-deep) 32%, transparent) 0 100%
    );
}
/* no hover a cor do eixo sobe pelo pé do painel */
.sn-eixo__veu::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, color-mix(in srgb, var(--sn-eixo-cor) 26%, transparent), transparent 58%);
  opacity: 0;
  transition: opacity var(--motion-dur-base) var(--motion-ease);
}
.sn-eixo__card:hover .sn-eixo__veu::after,
.sn-eixo__card:focus-visible .sn-eixo__veu::after { opacity: 1; }

/* o conteúdo também volta ao prumo. O bisel é o quanto a diagonal avança da
   metade da altura até a borda: no TOPO ela come pela esquerda, no PÉ pela
   direita — por isso o recuo extra é trocado entre os dois blocos, e o texto
   acompanha a diagonal em vez de fugir dela. */
.sn-eixo__conteudo {
  --sn-bisel: calc(var(--sn-banda-alt) * var(--sn-lean-tan) / 2);
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-md) var(--spacing-lg);
  transform: skewX(var(--sn-lean));
}
.sn-eixo__topo { padding-left: var(--sn-bisel); }
.sn-eixo__pe { padding-right: var(--sn-bisel); }

/* Os painéis das pontas começam FORA da tela — é assim que o bisel deles vai
   parar no corte da janela. Sem devolver essa sangria ao conteúdo, o texto do
   primeiro painel nasce à esquerda da borda e chega cortado ao leitor. */
.sn-eixo:first-child .sn-eixo__conteudo { padding-left: calc(var(--spacing-md) + var(--sn-sangria)); }
.sn-eixo:last-child .sn-eixo__conteudo { padding-right: calc(var(--spacing-md) + var(--sn-sangria)); }
/* E nas pontas o bisel some: ali a borda que o leitor vê não é a diagonal, é
   o corte reto da janela — o painel da esquerda tem o topo cortado pela borda
   esquerda da tela, e o da direita tem o pé cortado pela direita. Manter o
   recuo do viés ali só empurraria o texto para dentro sem motivo. */
.sn-eixo:first-child .sn-eixo__topo { padding-left: 0; }
.sn-eixo:last-child .sn-eixo__pe { padding-right: 0; }

.sn-eixo__letra {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--font-weight-extrabold);
  font-size: clamp(var(--font-size-md), 3.2vw, var(--font-size-xl));
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--sn-eixo-cor);
}
.sn-eixo__nome {
  margin: var(--spacing-nano) 0 0;
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: clamp(var(--font-size-xs), 1.8vw, var(--font-size-sm));
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.sn-eixo__resumo {
  margin: 0 0 var(--spacing-xxxs);
  font-size: var(--font-size-xxs);
  line-height: 1.5;
  color: var(--sn-on-dark-soft);
  text-wrap: pretty;
}
.sn-eixo__ir {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-quark);
  font-size: var(--font-size-xxs);
  font-weight: var(--font-weight-bold);
  color: var(--sn-eixo-cor);
}
.sn-eixo__ir svg { width: 18px; height: 18px; transition: transform var(--motion-dur-fast) var(--motion-ease); }
.sn-eixo__card:hover .sn-eixo__ir svg,
.sn-eixo__card:focus-visible .sn-eixo__ir svg { transform: translateX(3px); }

/* ---------- entrada da página do eixo ---------- */
.sn-open--eixo { padding-bottom: clamp(var(--spacing-lg), 4vw, var(--spacing-xxl)); }
.sn-open__grid--eixo { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.sn-open--eixo .sn-open__text { position: static; }
.sn-open--eixo .sn-open__title { --sn-wave-color: var(--sn-eixo-cor, var(--color-pastel-peach)); }
.sn-volta-link {
  color: var(--color-pastel-lavender);
  text-decoration: none;
  border-bottom: var(--border-width-hairline) solid color-mix(in srgb, var(--color-pastel-lavender) 50%, transparent);
}
.sn-volta-link:hover { color: var(--color-surface-tinted); }

/* ---------- URL sem eixo válido ---------- */
.sn-vazio {
  width: min(640px, calc(100% - var(--sn-gutter) * 2));
  margin: 0 auto;
  padding: clamp(var(--spacing-huge), 9vw, var(--spacing-super)) 0;
  text-align: center;
}

/* rodapé curto da página de entrada */
/* Na página 1 o rodapé é só a assinatura: o bloco de fecho saiu de lá, porque
   despedia-se de quem estava começando. Sem ele, o respiro de fecho vira um
   vão morto entre a banda de eixos e a linha de assinatura. */
.sn-foot--curto { padding-top: clamp(var(--spacing-lg), 3vw, var(--spacing-xxl)); }

/* No estreito a banda não cabe deitada: os painéis empilham e o viés vai a
   zero. Como sangria e bisel são DERIVADOS de --sn-lean-tan, zerar essa única
   variável desmonta a diagonal inteira — não há geometria repetida aqui. */
@media (max-width: 900px) {
  .sn-fork__banda { --sn-lean: 0deg; --sn-lean-tan: 0; }
  .sn-fork__eixos { flex-direction: column; height: auto; gap: var(--border-width-thick); }
  /* Empilhado, a divisa entre as lajes é horizontal e a curva vertical não tem
     o que dizer ali. A laje volta ao fluxo, a fresta volta a ser o gap, e a
     borda colorida volta a ser um contorno de caixa — que ali acerta. */
  .sn-eixo__card { position: relative; inset: auto; clip-path: none; }
  .sn-eixo__divisa { display: none; }
  .sn-eixo {
    box-shadow: inset var(--border-width-hairline-plus) 0 0 color-mix(in srgb, var(--sn-eixo-cor) 62%, transparent),
                inset calc(var(--border-width-hairline-plus) * -1) 0 0 color-mix(in srgb, var(--sn-eixo-cor) 24%, transparent);
  }
  /* Em coluna, `flex: 1 1 0` mediria a base na ALTURA — e com a fileira em
     height:auto isso é zero, colapsando a banda inteira. Empilhado, cada
     painel volta a se medir pelo próprio conteúdo. */
  .sn-eixo { flex: 0 0 auto; }
  /* o painel passa a crescer com o texto, em vez de ter altura travada */
  .sn-eixo__conteudo,
  .sn-eixo:first-child .sn-eixo__conteudo,
  .sn-eixo:last-child .sn-eixo__conteudo {
    height: auto;
    min-height: clamp(260px, 42svh, 340px);
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-md);
  }
  /* deitada, a janela corta na vertical: centralizar pega a cena */
  .sn-eixo__art img { object-position: 50% 50%; }
  /* Painel curto e deitado mostra uma fatia bem maior da cena: sobra menos
     fundo vazio sob o texto do que na coluna alta do desktop. O véu compensa
     — escurece antes e mais fundo, para o resumo não pousar sobre a arte. */
  .sn-eixo__veu {
    background:
      linear-gradient(
        to bottom,
        color-mix(in srgb, var(--color-surface-deepest) 86%, transparent) 0%,
        /* segura o escuro até passar a linha do nome: empilhado o painel é
           curto, e o nome cai numa faixa da foto que pode vir clara (janela,
           parede). Sem esta parada ele fica em cima do limite de contraste. */
        color-mix(in srgb, var(--color-surface-deepest) 74%, transparent) 16%,
        color-mix(in srgb, var(--color-surface-deepest) 20%, transparent) 34%,
        color-mix(in srgb, var(--color-surface-deepest) 40%, transparent) 52%,
        color-mix(in srgb, var(--color-surface-deepest) 84%, transparent) 74%,
        color-mix(in srgb, var(--color-surface-deepest) 96%, transparent) 100%
      ),
      linear-gradient(
        color-mix(in srgb, var(--color-surface-deep) 32%, transparent) 0 100%
      );
  }
}

@media (prefers-reduced-motion: reduce) {
  .sn-eixo__card:hover .sn-eixo__art img,
  .sn-eixo__card:focus-visible .sn-eixo__art img { transform: scale(1.02); }
  .sn-eixo__card:hover .sn-eixo__ir svg,
  .sn-eixo__card:focus-visible .sn-eixo__ir svg { transform: none; }
}

/* ============================================================================
   17. REGISTRO DE PARTICIPAÇÃO (fim da página do eixo)
   O único formulário do percurso. Vive sobre a superfície imersiva, então o
   campo é uma janela clara sobre o escuro — não uma caixa branca colada.
   ========================================================================== */
.sn-registro {
  padding: clamp(var(--spacing-huge), 9vw, var(--spacing-super)) 0 clamp(var(--spacing-extra-huge), 10vw, var(--spacing-extra-super));
}
.sn-registro__inner {
  width: min(620px, calc(100% - var(--sn-gutter) * 2));
  margin: 0 auto;
  text-align: center;
}
.sn-registro__title {
  font-size: var(--sn-display-3);
  line-height: 1.05;
  --sn-wave-color: var(--sn-eixo-cor, var(--color-pastel-aqua));
}
.sn-registro__body {
  margin: var(--spacing-md) auto 0;
  max-width: 44ch;
  color: var(--sn-on-dark-soft);
  text-wrap: pretty;
}
.sn-registro__form {
  margin-top: clamp(var(--spacing-lg), 4vw, var(--spacing-xl));
  display: grid;
  gap: var(--spacing-sm);
  text-align: left;
}

/* ---------- o campo ---------- */
.sn-campo { display: grid; gap: var(--spacing-quark); }
.sn-campo__label {
  font-size: var(--font-size-xxs);
  font-weight: var(--font-weight-bold);
  color: var(--color-surface-tinted);
}
.sn-campo__input {
  width: 100%;
  min-height: 52px;
  padding: 0 var(--spacing-xs);
  border: none;
  border-radius: var(--border-radius-sm);
  background: color-mix(in srgb, var(--color-surface-tinted) 10%, transparent);
  box-shadow: inset 0 0 0 var(--border-width-hairline) color-mix(in srgb, var(--color-surface-tinted) 32%, transparent);
  color: var(--color-surface-tinted);
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  transition: background var(--motion-dur-fast) var(--motion-ease),
              box-shadow var(--motion-dur-fast) var(--motion-ease);
}
.sn-campo__input::placeholder { color: color-mix(in srgb, var(--color-surface-tinted) 45%, transparent); }
.sn-campo__input:hover { background: color-mix(in srgb, var(--color-surface-tinted) 14%, transparent); }
.sn-campo__input:focus-visible {
  outline: none;
  background: color-mix(in srgb, var(--color-surface-tinted) 16%, transparent);
  box-shadow: inset 0 0 0 var(--border-width-thin) var(--sn-eixo-cor, var(--color-pastel-aqua));
}
.sn-campo__input[aria-invalid="true"] {
  box-shadow: inset 0 0 0 var(--border-width-thin) var(--color-error-light);
}
.sn-campo__erro {
  margin: 0;
  font-size: var(--font-size-xxs);
  font-weight: var(--font-weight-semi-bold);
  color: var(--color-error-light);
}

/* ---------- ação e recados ---------- */
.sn-registro__acoes {
  margin-top: var(--spacing-quark);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-xxxs) var(--spacing-md);
}
.sn-registro__nota {
  margin: 0;
  flex: 1 1 22ch;
  font-size: var(--font-size-xxxs);
  line-height: 1.5;
  color: color-mix(in srgb, var(--color-surface-tinted) 60%, transparent);
}

/* O estado é uma linha só, com a cor dizendo o que aconteceu antes do texto. */
.sn-registro__estado {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-nano);
  margin: 0;
  padding: var(--spacing-xxxs) var(--spacing-sm);
  border-radius: var(--border-radius-sm);
  background: color-mix(in srgb, var(--color-surface-tinted) 8%, transparent);
  font-size: var(--font-size-xxs);
  line-height: 1.5;
  color: var(--color-surface-tinted);
}
.sn-registro__estado[hidden] { display: none; }   /* display:flex venceria o [hidden] */
.sn-registro__estado svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.sn-registro__estado[data-tom="ok"] {
  background: color-mix(in srgb, var(--color-success-light) 16%, transparent);
  box-shadow: inset 0 0 0 var(--border-width-hairline) color-mix(in srgb, var(--color-success-light) 42%, transparent);
}
.sn-registro__estado[data-tom="ok"] svg { color: var(--color-success-light); }
.sn-registro__estado[data-tom="erro"] {
  background: color-mix(in srgb, var(--color-error-light) 16%, transparent);
  box-shadow: inset 0 0 0 var(--border-width-hairline) color-mix(in srgb, var(--color-error-light) 42%, transparent);
}
.sn-registro__estado[data-tom="erro"] svg { color: var(--color-error-light); }

/* Depois do sucesso o formulário sai de cena: o recado basta. */
.sn-registro__form.is-feito .sn-campo,
.sn-registro__form.is-feito .sn-registro__acoes { display: none; }

/* ============================================================================
   16. ACENTOS — o detalhe de marca que substituiu o fio
   Pequenos traços à mão pontuando os momentos, no mesmo vocabulário dos grifos
   ondulados dos títulos. Nenhum deles conduz nada: são pontuação, não caminho.
   Ficam atrás do conteúdo, em opacidade baixa, e somem da leitura quando você
   não está olhando para eles.
   ========================================================================== */
.sn-acento {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  color: var(--sn-acento-cor, var(--color-pastel-lavender));
  opacity: 0.5;
}
.sn-acento svg { width: 100%; height: 100%; display: block; }

/* junto ao número do vídeo, na diagonal de cima */
.sn-stage__text { position: relative; }
.sn-acento--stage {
  width: clamp(44px, 4.4vw, 68px);
  height: clamp(44px, 4.4vw, 68px);
  top: -9%;
  right: 4%;
}
/* um segundo, menor, abaixo da ficha técnica. Ficava à esquerda; com o botão
   do portão fechando a coluna, esse canto virou área de clique — o acento
   mudou de lado para não encostar nele. */
.sn-acento--stage-baixo {
  width: clamp(28px, 2.8vw, 40px);
  height: clamp(28px, 2.8vw, 40px);
  bottom: -11%;
  left: auto;
  right: 4%;
  opacity: 0.32;
}

/* na bifurcação, ladeando o título */
.sn-fork__head { position: relative; }
/* com o título à esquerda, a folga passou a ser à direita: é lá que os
   acentos pousam, sem invadir a medida do texto */
.sn-acento--fork-esq { width: clamp(44px, 4.5vw, 68px); height: clamp(44px, 4.5vw, 68px); top: 2%; left: auto; right: 26%; }
.sn-acento--fork-dir { width: clamp(36px, 3.8vw, 56px); height: clamp(36px, 3.8vw, 56px); bottom: 6%; right: 8%; }

/* no reencontro */
.sn-acento--volta { width: clamp(40px, 4vw, 62px); height: clamp(40px, 4vw, 62px); top: -14%; right: -8%; }

@media (max-width: 1000px) {
  /* no estreito não sobra margem: os acentos sairiam por cima do texto */
  .sn-acento { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sn-acento { transform: none !important; }
}


/* ============================================================================
   19. PÁGINA DE DOCUMENTO (política de privacidade)
   Uma página de texto corrido no mesmo registro de marca do hotsite: superfície
   imersiva, medida curta e hierarquia só de tipografia. Não carrega gsap/lenis
   — é documento, não percurso, e ler não depende de scroll animado.
   ========================================================================== */
.sn-doc {
  width: min(720px, calc(100% - var(--sn-gutter) * 2));
  margin: 0 auto;
  padding: clamp(var(--spacing-xl), 7vw, var(--spacing-extra-huge)) 0 clamp(var(--spacing-huge), 9vw, var(--spacing-mega));
}
.sn-doc__voltar { margin: 0 0 var(--spacing-lg); font-size: var(--font-size-xxs); }
.sn-doc__title {
  margin: var(--spacing-xxxs) 0 0;
  font-size: clamp(var(--font-size-md), 5vw, var(--font-size-xl));
  line-height: 1.14;
  --sn-wave-color: var(--color-pastel-aqua);
}
.sn-doc__lead {
  margin: var(--spacing-md) 0 0;
  font-size: var(--font-size-xs);
  line-height: 1.6;
  color: var(--sn-on-dark-soft);
  text-wrap: pretty;
}
.sn-doc__versao {
  margin: var(--spacing-sm) 0 0;
  font-size: var(--font-size-xxxs);
  color: color-mix(in srgb, var(--color-surface-tinted) 55%, transparent);
}

/* O aviso de rascunho. Existe porque o texto ainda não passou pelo Senac: some
   quando passar, e some inteiro — não é decoração. */
.sn-doc__aviso {
  margin: clamp(var(--spacing-lg), 4vw, var(--spacing-xl)) 0 0;
  padding: var(--spacing-md);
  border-radius: var(--border-radius-lg);
  background: color-mix(in srgb, var(--color-pastel-butter) 10%, transparent);
  box-shadow: inset 0 0 0 var(--border-width-hairline) color-mix(in srgb, var(--color-pastel-butter) 40%, transparent);
  display: flex;
  gap: var(--spacing-xxxs);
  align-items: flex-start;
}
.sn-doc__aviso svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: var(--spacing-quark);
  color: var(--color-pastel-butter);
}
.sn-doc__aviso p { margin: 0; font-size: var(--font-size-xxs); line-height: 1.55; color: var(--sn-on-dark-soft); }
.sn-doc__aviso strong { color: var(--color-surface-tinted); font-weight: var(--font-weight-bold); }

.sn-doc__sec { margin-top: clamp(var(--spacing-xl), 5vw, var(--spacing-xxl)); }
.sn-doc__sec h2 {
  margin: 0 0 var(--spacing-xxxs);
  font-family: var(--font-display);
  font-weight: var(--font-weight-extrabold);
  font-size: var(--font-size-sm);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-surface-tinted);
}
.sn-doc__sec p,
.sn-doc__sec li {
  font-size: var(--font-size-xxs);
  line-height: 1.65;
  color: var(--sn-on-dark-soft);
  text-wrap: pretty;
}
.sn-doc__sec p { margin: 0 0 var(--spacing-xxxs); }
.sn-doc__sec ul { margin: 0 0 var(--spacing-xxxs); padding-left: var(--spacing-sm); }
.sn-doc__sec li { margin-bottom: var(--spacing-xquark); }
.sn-doc__sec li::marker { color: var(--color-pastel-lavender); }
.sn-doc__sec strong { color: var(--color-surface-tinted); font-weight: var(--font-weight-bold); }

/* Ponto que ainda depende de decisão do Senac. Marcado no texto em vez de
   preenchido por suposição: um prazo inventado numa política vira compromisso. */
.sn-doc__pend {
  display: inline-block;
  padding: 0 var(--spacing-xquark);
  border-radius: var(--border-radius-pill);
  background: color-mix(in srgb, var(--color-pastel-butter) 16%, transparent);
  box-shadow: inset 0 0 0 var(--border-width-hairline) color-mix(in srgb, var(--color-pastel-butter) 46%, transparent);
  color: var(--color-pastel-butter);
  font-size: var(--font-size-xxxs);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}