/* Unexly · Como funciona · "Sinal claro": prancha técnica sobre papel, filme de rolagem.
   Um palco preso à tela troca de cena conforme a página rola; sem JS ou com movimento
   reduzido, as cenas ficam empilhadas no estado final. */

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/geist-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/geist-mono-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * Paleta clara da Unexly ("Sinal claro"). Fonte única de verdade para a página
 * inicial e para /como-funciona: as duas usam este bloco :root sem mudar os
 * valores. Pode acrescentar tokens novos, nunca alterar estes.
 *
 * Linguagem: prancha técnica sobre papel. O que no escuro era brilho vira traço
 * preciso, hachura e preenchimento chapado. Nada de glow, sombra difusa ou
 * degradê genérico.
 *
 * Contraste medido (WCAG) sobre --bg #f4f1e9 / --panel #fbfaf6:
 *   --text #15243a 13.8 / 15.0   --text-2 #39445a 8.7 / 9.4   --muted #5d6a7f 4.9 / 5.3
 *   --info #06737a 5.0 / 5.4     --state #b4441c 4.9 / 5.3    --accent #5a3fd1 6.1 / 6.6
 *   Preenchimentos (--cyan, --coral, --violet) NÃO servem para texto pequeno sobre
 *   o papel (1.8 a 3.0). Texto sobre --cyan usa --text (7.6); sobre --coral usa
 *   --text (5.0); branco sobre --info dá 5.6.
 */
:root {
  /* superfícies */
  --bg: #f4f1e9; /* papel da marca (o mesmo da página Como funciona do portal) */
  --bg-2: #efebe1; /* faixas alternadas */
  --panel: #fbfaf6; /* monitor, quadros, cartões */
  --panel-2: #ffffff;

  /* traço e grade (tinta com transparência) */
  --line: rgb(21 36 58 / 12%);
  --line-2: rgb(21 36 58 / 22%);
  --line-3: rgb(21 36 58 / 40%);
  --grid: rgb(21 36 58 / 5%);
  --grid-2: rgb(21 36 58 / 9%);
  --hatch: rgb(21 36 58 / 7%);

  /* texto */
  --text: #15243a; /* tinta */
  --text-2: #39445a;
  --muted: #5d6a7f;

  /* sinal: informação (consulta, mensagem, resposta) */
  --info: #06737a; /* texto e traço fino */
  --cyan: #22c7d6; /* preenchimento, pulsos, trilhas grossas */
  --cyan-soft: #d3f1f3; /* fundo de destaque */
  --teal: #0d9aa3; /* teal de marca, traço médio */

  /* sinal: mudança de estado (ação autorizada, evento) */
  --state: #b4441c; /* texto */
  --coral: #e76e44; /* preenchimento e traço */
  --coral-soft: #fbe2d8;

  /* acento do logo (núcleo, decisão) */
  --accent: #5a3fd1; /* texto */
  --violet: #6d4fe0; /* preenchimento e traço */
  --violet-soft: #e6e0fb;

  /* nomes antigos da versão escura, para facilitar a conversão */
  --cyan-hi: var(--info);
  --coral-hi: var(--state);
  --paper: var(--bg);

  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --gutter: clamp(16px, 4vw, 48px);
  --maxw: 1360px;
  --e-out: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}

/* Acréscimos desta página (os tokens acima ficam como estão). */
:root {
  --head: 60px;
  --hatch-2: rgb(21 36 58 / 11%);
  --stage-top: calc(var(--head) + 16px);
  --stage-h: calc(100svh - var(--head) - 32px);
  --bz-bar: 40px;
  --cue-h: 116px;
  --step: 0.085s;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
}

body {
  margin: 0;
  color: var(--text-2);
  background: var(--bg);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 3px;
}

h1,
h2,
h3,
p,
dl,
dd,
ol,
ul,
figure {
  margin: 0;
}

ol,
ul {
  padding: 0;
  list-style: none;
}

::selection {
  color: var(--text);
  background: var(--cyan-soft);
}

.wrap {
  max-width: var(--maxw);
  margin-inline: auto;
}

.defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.skip {
  position: absolute;
  top: -80px;
  left: 16px;
  z-index: 60;
  padding: 12px 14px;
  color: var(--panel);
  background: var(--text);
  font: 600 14px/1 var(--mono);
  text-decoration: none;
}

.skip:focus {
  top: 10px;
}

.portal svg,
.btn svg,
.cue svg {
  flex: none;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Barra ---------- */

.bar {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--line-2);
  background: var(--bg);
}

.bar-in {
  display: flex;
  align-items: center;
  gap: 28px;
  max-width: calc(var(--maxw) + 2 * var(--gutter));
  height: var(--head);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.brand img {
  width: 28px;
  height: 28px;
}

.nav {
  display: none;
}

.nav a {
  padding-block: 8px;
  color: var(--muted);
  font: 500 11.5px/1 var(--mono);
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.15s;
}

.nav a:hover {
  color: var(--text);
}

.portal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 9px 12px;
  border: 1px solid var(--line-2);
  color: var(--text-2);
  font: 500 13px/1 var(--mono);
  text-decoration: none;
  white-space: nowrap;
  transition:
    color 0.15s,
    border-color 0.15s;
}

.portal:hover {
  border-color: var(--info);
  color: var(--info);
}

.bar-prog {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--info);
  transform: scaleX(var(--pg, 0));
  transform-origin: left;
}

/* ---------- Topo ---------- */

.hero {
  position: relative;
  padding: clamp(28px, 4vw, 56px) var(--gutter) clamp(48px, 6vw, 88px);
  border-bottom: 1px solid var(--line-2);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-position: center -1px;
  background-size: 48px 48px;
}

.hero-slate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
  color: var(--muted);
  font: 500 12px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hs-k {
  padding: 7px 10px 6px;
  color: var(--text);
  background: var(--cyan);
  font-weight: 600;
}

.hs-m {
  color: var(--text-2);
}

.hero-slate i,
.slate i,
.sc-k i {
  flex: 1;
  min-width: 40px;
  height: 10px;
  background:
    repeating-linear-gradient(90deg, var(--line-3) 0 1px, transparent 1px 8px) left bottom / 100% 5px no-repeat,
    repeating-linear-gradient(90deg, var(--line-3) 0 1px, transparent 1px 80px) left bottom / 100% 10px no-repeat;
  transform-origin: left;
}

.hs-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-2);
}

.tally {
  flex: none;
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--coral);
}

.hero-t {
  margin-top: clamp(28px, 3.6vw, 52px);
  color: var(--text);
  font-size: clamp(44px, 9vw, 140px);
  font-weight: 640;
  line-height: 0.9;
  letter-spacing: -0.06em;
}

.hero-t em {
  color: var(--accent);
  font-style: normal;
}

.caret-h {
  display: inline-block;
  width: 0.09em;
  height: 0.7em;
  margin-left: 0.06em;
  background: var(--cyan);
}

.ln {
  display: block;
  clip-path: inset(-0.1em -0.15em -0.26em -0.06em);
}

.ln > span {
  display: inline-block;
}

.hero-grid {
  display: grid;
  gap: 28px 72px;
  margin-top: clamp(28px, 4vw, 52px);
}

.lead {
  max-width: 58ch;
  color: var(--text-2);
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.6;
}

.hero-note {
  display: grid;
  gap: 10px;
  align-content: start;
  padding-left: 18px;
  border-left: 2px solid var(--coral);
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.55;
}

.hn-k {
  color: var(--text);
  font-weight: 600;
}

.cue {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-self: start;
  margin-top: 6px;
  padding: 10px 14px;
  border: 1px solid var(--text);
  color: var(--text);
  font: 600 13px/1 var(--mono);
  letter-spacing: 0.04em;
  text-decoration: none;
  transition:
    color 0.15s,
    background-color 0.15s;
}

.cue:hover {
  color: var(--panel);
  background: var(--text);
}

/* Folha de contato: os oito quadros do filme. */

.sheet {
  position: relative;
  margin-top: clamp(36px, 4vw, 56px);
  padding-block: 18px;
  border: 1px solid var(--line-3);
  background: var(--panel);
}

.sheet::before,
.sheet::after {
  position: absolute;
  right: 10px;
  left: 10px;
  height: 6px;
  background: repeating-linear-gradient(90deg, var(--line-2) 0 10px, transparent 10px 22px);
  content: "";
}

.sheet::before {
  top: 6px;
}

.sheet::after {
  bottom: 6px;
}

.sheet ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border-block: 1px solid var(--line-2);
  background: var(--line-2);
}

.sheet a {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 12px 10px;
  height: 100%;
  padding: 14px 14px 16px;
  background: var(--panel);
  text-decoration: none;
  transition: background-color 0.2s;
}

.sheet svg {
  grid-column: 1 / -1;
  width: 100%;
  height: auto;
  aspect-ratio: 96 / 56;
  padding: 8px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  fill: none;
  stroke: var(--line-3);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: border-color 0.2s;
}

.sheet .th-s {
  stroke: var(--teal);
  stroke-width: 2;
}

.sheet .th-o {
  stroke: var(--coral);
  stroke-width: 2;
}

.sh-n {
  color: var(--info);
  font: 600 12px/1 var(--mono);
  letter-spacing: 0.1em;
}

.sh-l {
  color: var(--text);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.sheet a:hover {
  background: var(--panel-2);
}

.sheet a:hover svg {
  border-color: var(--text);
}

/* ---------- Filme: base empilhada (sem JS, movimento reduzido, celular) ---------- */

.film {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: calc(var(--maxw) + 2 * var(--gutter));
  margin-inline: auto;
  padding: clamp(40px, 6vw, 88px) var(--gutter) clamp(48px, 6vw, 96px);
}

.bezel {
  display: none;
}

.scene {
  position: relative;
  padding-top: clamp(56px, 8vw, 104px);
  scroll-margin-top: var(--head);
}

.scene:first-of-type {
  padding-top: 0;
}

.copy {
  position: relative;
  z-index: 1;
  max-width: 600px;
}

.sc-k {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font: 500 12px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sc-k b {
  color: var(--info);
  font-weight: 600;
}

.sc-k span {
  color: var(--text-2);
}

.sc-k i {
  max-width: 180px;
}

.kt {
  margin-top: 22px;
  color: var(--text);
  font-size: clamp(40px, 4.7vw, 78px);
  font-weight: 640;
  line-height: 0.98;
  letter-spacing: -0.05em;
  text-wrap: balance;
}

.w {
  display: inline-block;
  margin-bottom: -0.12em;
  padding-bottom: 0.12em;
  overflow: hidden;
  vertical-align: top;
}

.w > span {
  display: inline-block;
}

.beat {
  max-width: 32ch;
  margin-top: 20px;
  color: var(--text);
  font-size: clamp(18px, 1.55vw, 23px);
  font-weight: 500;
  line-height: 1.38;
  letter-spacing: -0.012em;
}

.txt {
  max-width: 46ch;
  margin-top: 16px;
  color: var(--text-2);
  font-size: 16.5px;
  line-height: 1.62;
}

.io {
  margin-top: 18px;
  color: var(--text-2);
  font: 500 13px/1.4 var(--mono);
}

.io span {
  margin-right: 10px;
  color: var(--info);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cap {
  margin-top: 26px;
  padding: 16px 18px 18px;
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--text);
  background: var(--panel);
}

.cap-k {
  color: var(--text);
  font: 600 12px/1.3 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cap-k span {
  margin-right: 8px;
  color: var(--muted);
}

.cap-t {
  margin-top: 10px;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.5;
}

.cap-l {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.cap-l li {
  padding: 5px 9px;
  border: 1px solid var(--line-3);
  color: var(--text);
  background: var(--panel-2);
  font: 500 12.5px/1.2 var(--mono);
}

.trio {
  margin-top: 24px;
  border-top: 1px solid var(--line-2);
}

.trio div {
  display: grid;
  grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-2);
}

.trio dt {
  color: var(--accent);
  font: 600 12px/1.5 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.trio dd {
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.5;
}

/* Número fantasma: hachura dentro do contorno, no pé da coluna de texto. */
.ghost {
  position: absolute;
  bottom: 0;
  left: -0.04em;
  display: none;
  z-index: 0;
  color: transparent;
  background: repeating-linear-gradient(-45deg, var(--hatch-2) 0 1px, transparent 1px 7px);
  -webkit-background-clip: text;
  background-clip: text;
  font-size: clamp(120px, 17vw, 280px);
  font-weight: 700;
  line-height: 0.8;
  letter-spacing: -0.07em;
  -webkit-text-stroke: 1px var(--line-2);
  pointer-events: none;
  user-select: none;
}


/* Quadro de cada cena */

.fig {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-top: 32px;
  border: 1px solid var(--line-3);
  background-color: var(--panel);
  background-image:
    linear-gradient(var(--grid-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-2) 1px, transparent 1px),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-position: -1px -1px;
  background-size:
    120px 120px,
    120px 120px,
    24px 24px,
    24px 24px;
}

.fig::before,
.bezel::before,
.end-frame::before {
  position: absolute;
  inset: -7px;
  background:
    linear-gradient(var(--text), var(--text)) top left / 14px 1px no-repeat,
    linear-gradient(var(--text), var(--text)) top left / 1px 14px no-repeat,
    linear-gradient(var(--text), var(--text)) top right / 14px 1px no-repeat,
    linear-gradient(var(--text), var(--text)) top right / 1px 14px no-repeat,
    linear-gradient(var(--text), var(--text)) bottom left / 14px 1px no-repeat,
    linear-gradient(var(--text), var(--text)) bottom left / 1px 14px no-repeat,
    linear-gradient(var(--text), var(--text)) bottom right / 14px 1px no-repeat,
    linear-gradient(var(--text), var(--text)) bottom right / 1px 14px no-repeat;
  content: "";
  pointer-events: none;
}

.fig-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 38px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line-2);
  color: var(--text-2);
  background: var(--bg);
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.fig-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--state);
}

.fig-svg {
  padding: 14px 10px 6px;
}

.fig-svg svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
  font-family: var(--mono);
}

/* Legendas da cena */

.cues {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px 16px;
  padding: 14px 18px 16px;
  border-top: 1px solid var(--line-2);
  background: var(--panel);
}

.cue-k {
  padding: 5px 7px 4px;
  color: var(--state);
  background: var(--coral-soft);
  font: 600 11px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cues ol {
  display: grid;
  gap: 5px;
}

.cues li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 8px;
  color: var(--text-2);
  font-size: 14.5px;
  line-height: 1.45;
}

.cues b {
  color: var(--info);
  font: 600 11.5px/1.75 var(--mono);
  letter-spacing: 0.06em;
}

.cues code {
  color: var(--text);
  font: 500 13px var(--mono);
}

.film-end {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(48px, 6vw, 80px);
  color: var(--muted);
  font: 500 12px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.film-end span:first-child {
  color: var(--text);
}

.film-end i {
  flex: 1;
  height: 1px;
  background: var(--line-3);
}

/* ---------- Filme: modo palco (JS ligado, tela larga, movimento permitido) ---------- */

[data-mode="film"] .film {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-rows: repeat(8, auto) auto;
  column-gap: clamp(32px, 4vw, 64px);
  padding-top: clamp(24px, 3vw, 40px);
}

[data-mode="film"] .scene {
  display: grid;
  grid-column: 1;
  min-height: 128svh;
  padding-top: 0;
}

[data-mode="film"] .scene:last-of-type {
  min-height: 112svh;
}

[data-mode="film"] .scene > * {
  grid-area: 1 / 1;
}

[data-mode="film"] .scene:nth-of-type(1) {
  grid-row: 1;
}
[data-mode="film"] .scene:nth-of-type(2) {
  grid-row: 2;
}
[data-mode="film"] .scene:nth-of-type(3) {
  grid-row: 3;
}
[data-mode="film"] .scene:nth-of-type(4) {
  grid-row: 4;
}
[data-mode="film"] .scene:nth-of-type(5) {
  grid-row: 5;
}
[data-mode="film"] .scene:nth-of-type(6) {
  grid-row: 6;
}
[data-mode="film"] .scene:nth-of-type(7) {
  grid-row: 7;
}
[data-mode="film"] .scene:nth-of-type(8) {
  grid-row: 8;
}

[data-mode="film"] .copy {
  position: sticky;
  top: calc(var(--stage-top) + 28px);
  align-self: start;
  padding-bottom: 32px;
  opacity: clamp(0, calc((1 - var(--p, 0)) * 5.5), 1);
}

[data-mode="film"] .ghost {
  position: sticky;
  bottom: 20px;
  display: block;
  align-self: end;
  justify-self: start;
  font-size: clamp(120px, 26vh, 260px);
  opacity: min(clamp(0, calc(var(--p, 0) * 8 - 0.6), 1), clamp(0, calc((1 - var(--p, 0)) * 5.5), 1));
  transform: translateX(calc((var(--p, 0.3) - 0.3) * -90px));
}

[data-mode="film"] .bezel,
[data-mode="film"] .fig {
  position: sticky;
  grid-column: 2;
  grid-row: 1 / 9;
  align-self: start;
}

[data-mode="film"] .bezel {
  display: block;
  top: var(--stage-top);
  height: var(--stage-h);
  border: 1px solid var(--line-3);
  background-color: var(--panel);
  background-image:
    linear-gradient(var(--grid-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-2) 1px, transparent 1px),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-position: -1px -1px;
  background-size:
    120px 120px,
    120px 120px,
    24px 24px,
    24px 24px;
}

[data-mode="film"] .fig {
  top: calc(var(--stage-top) + var(--bz-bar) + 1px);
  height: calc(var(--stage-h) - var(--bz-bar) - 2px);
  margin: calc(var(--bz-bar) + 1px) 1px 0;
  border: 0;
  background: none;
  visibility: hidden;
}

[data-mode="film"] .fig::before,
[data-mode="film"] .fig-bar {
  display: none;
}

[data-mode="film"] .fig.on {
  z-index: 2;
  visibility: visible;
}

[data-mode="film"] .fig.off {
  z-index: 1;
  visibility: visible;
  animation: fig-off 0.42s var(--e-out) forwards;
}

[data-mode="film"] .fig-svg {
  flex: 1;
  min-height: 0;
  padding: 12px 22px 8px;
}

[data-mode="film"] .fig-svg svg {
  height: 100%;
}

[data-mode="film"] .cues {
  flex: none;
  min-height: var(--cue-h);
  background: var(--panel);
}

[data-mode="film"] .film-end {
  grid-column: 1 / -1;
  grid-row: 9;
}

.bz-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--bz-bar);
  padding-inline: 14px;
  border-bottom: 1px solid var(--line-2);
  color: var(--muted);
  background: var(--bg);
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.bz-id {
  display: none;
  color: var(--info);
  font-weight: 600;
}

@media (min-width: 1560px) {
  .bz-id {
    display: inline;
  }
}

.bz-route {
  letter-spacing: 0.05em;
  text-transform: none;
}

.bz-route b {
  margin-inline: 6px;
  color: var(--line-3);
  font-weight: 400;
}

.r {
  transition: color 0.3s;
}

.bz-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  color: var(--state);
}

.bz-sc,
.bz-tc {
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

.bz-n {
  color: var(--text);
  font-weight: 600;
}

.bz-prog {
  position: absolute;
  top: calc(var(--bz-bar) - 1px);
  right: 0;
  left: 0;
  z-index: 3;
  height: 2px;
}

.bz-prog i {
  display: block;
  height: 100%;
  background: var(--text);
  transform: scaleX(var(--fp, 0));
  transform-origin: left;
}

.film[data-scene="1"] :is(.r1, .r2),
.film:is([data-scene="2"], [data-scene="3"], [data-scene="5"], [data-scene="6"]) .r3,
.film[data-scene="4"] .r4,
.film[data-scene="7"] .r {
  color: var(--info);
  font-weight: 600;
}

.film:is([data-scene="7"], [data-scene="8"]) .r5 {
  color: var(--state);
  font-weight: 600;
}

/* ---------- Desenho das cenas (SVG) ---------- */

.hatch {
  stroke: var(--hatch-2);
  stroke-width: 1;
}

.hatch-c {
  stroke: rgb(231 110 68 / 30%);
  stroke-width: 1;
}

.dot {
  fill: var(--line-2);
}

.fig .mid {
  text-anchor: middle;
}

.lbl {
  fill: var(--muted);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.12em;
}

.lbl-n {
  fill: var(--info);
  font-weight: 600;
}

.lbl-r,
.fine-r,
.tool-r,
.f-v,
.ok-t {
  text-anchor: end;
}

.lbl-a {
  fill: var(--accent);
  font-weight: 600;
}

.lbl-s {
  fill: var(--muted);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1em;
}

.fine {
  fill: var(--muted);
  font-size: 14px;
}

.hum {
  font-family: var(--sans);
  fill: var(--text);
}

.hum-l {
  font-size: 25px;
  font-weight: 500;
  letter-spacing: -0.015em;
}

.hum-m {
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.hum-s {
  font-size: 18px;
}

.hum-o {
  font-size: 18.5px;
  font-weight: 500;
}

.bub-in {
  fill: var(--panel-2);
  stroke: var(--line-3);
  stroke-width: 1.2;
}

.bub-out {
  fill: var(--cyan);
}

.erp-fill {
  fill: var(--bg-2);
}

.erp-hatch {
  fill: url(#hh);
}

.erp-line {
  fill: none;
  stroke: var(--text-2);
  stroke-width: 1.2;
}

.trk {
  fill: none;
  stroke: var(--line-2);
  stroke-width: 1.5;
}

.sig,
.sig-co,
.thread {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sig-co {
  stroke: var(--coral);
}

.port {
  fill: var(--panel-2);
  stroke: var(--text-2);
  stroke-width: 1.2;
}

.mk {
  fill: var(--cyan);
  stroke: var(--text);
  stroke-width: 1.5;
}

.tab-b,
.card-b,
.note-b,
.cal-b,
.base-b,
.mc-b,
.sw-b,
.lane-b,
.node-b,
.cache-b,
.gw-b,
.rec-b {
  fill: var(--panel-2);
  stroke: var(--line-3);
  stroke-width: 1.2;
}

.tab-n,
.card-n {
  fill: var(--cyan);
}

.tab-n.co {
  fill: var(--coral);
}

.tab-k,
.card-k,
.note-k {
  fill: var(--text);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.card-k,
.note-k {
  fill: var(--info);
}

.tab-v {
  font-family: var(--sans);
  fill: var(--text-2);
  font-size: 16px;
}

.core-ticks {
  fill: none;
  stroke: var(--line-3);
  stroke-width: 7;
  stroke-dasharray: 0.1 0.9;
}

.core-disc {
  fill: var(--panel-2);
  stroke: var(--violet);
  stroke-width: 2.5;
}

.core-name {
  fill: var(--text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-anchor: middle;
}

.core-pulse {
  fill: none;
  stroke: var(--violet);
  stroke-width: 2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.core-sweep {
  fill: none;
  stroke: var(--violet);
  stroke-width: 2.5;
  stroke-dasharray: 24 76;
  stroke-linecap: round;
  transform-box: fill-box;
  transform-origin: center;
}

.pk {
  opacity: 0;
  offset-rotate: 0deg;
}

.po {
  fill: var(--panel-2);
  stroke: var(--info);
  stroke-width: 2;
}

.pi {
  fill: var(--info);
}

.pk.co .po {
  stroke: var(--coral);
}

.pk.co .pi {
  fill: var(--coral);
}

/* Cena 2 */

.say {
  font-size: 30px;
  font-weight: 500;
  fill: var(--text);
}

.say.w0 {
  fill: var(--muted);
}

.caret {
  stroke: var(--info);
  stroke-width: 2;
}

.ul {
  fill: var(--cyan);
}

.lead-l {
  fill: none;
  stroke: var(--text-2);
  stroke-width: 1.4;
}

.card-v {
  font-family: var(--sans);
  fill: var(--text);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.card-s {
  fill: var(--muted);
  font-size: 15px;
}

/* Cena 3 */

.axis {
  fill: none;
  stroke: var(--text-2);
  stroke-width: 1.5;
}

.ruler {
  fill: none;
  stroke: var(--line-3);
  stroke-width: 10;
  stroke-dasharray: 1 23;
}

.stem {
  fill: none;
  stroke: var(--line-3);
  stroke-width: 1.5;
}

.node {
  fill: var(--panel-2);
  stroke: var(--text);
  stroke-width: 1.5;
}

.now {
  fill: var(--cyan);
  stroke: var(--text);
  stroke-width: 1.5;
}

.now-ring {
  fill: none;
  stroke: var(--info);
  stroke-width: 1.5;
}

.now-k {
  fill: var(--info);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-anchor: middle;
}

.note-v {
  font-family: var(--sans);
  fill: var(--text-2);
  font-size: 17px;
}

.tool {
  fill: var(--text);
  font-size: 15px;
  font-weight: 500;
}

.tool-s {
  font-size: 13px;
}

.tool-co {
  fill: var(--state);
  font-weight: 600;
}

.chip-b {
  fill: var(--cyan-soft);
  stroke: var(--info);
  stroke-width: 1.2;
}

.chip-t {
  fill: var(--text);
  font-size: 16px;
  font-weight: 500;
}

.brace {
  fill: none;
  stroke: var(--text-2);
  stroke-width: 1.5;
}

/* Cena 4 */

.cal-h {
  fill: var(--text);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.hr {
  fill: var(--muted);
  font-size: 16px;
}

.hr-on {
  fill: var(--text);
  font-weight: 600;
}

.busy {
  fill: url(#hh);
  stroke: var(--line-2);
  stroke-width: 1;
}

.free {
  fill: var(--cyan-soft);
  stroke: var(--info);
  stroke-width: 1.5;
}

.free-x {
  stroke-width: 2.5;
}

.free-t {
  font-family: var(--sans);
  fill: var(--text);
  font-size: 16px;
  font-weight: 500;
}

.field {
  fill: url(#dots);
}

.scan {
  transform: translateX(196px);
}

.scan-band {
  fill: var(--cyan-soft);
}

.scan-bar {
  fill: var(--info);
}

.cand {
  fill: var(--cyan);
  stroke: var(--text);
  stroke-width: 1;
}

.best {
  fill: var(--violet);
}

.best-r {
  fill: var(--panel-2);
  stroke: var(--violet);
  stroke-width: 2;
}

.link-v {
  fill: none;
  stroke: var(--violet);
  stroke-width: 2;
}

/* Cena 5 */

.mc-h {
  fill: var(--violet-soft);
}

.mc-t {
  font-family: var(--sans);
  fill: var(--text);
  font-size: 36px;
  font-weight: 620;
  letter-spacing: -0.035em;
}

.mc-s {
  fill: var(--muted);
  font-size: 16px;
}

.best-tag {
  fill: var(--panel-2);
  stroke: var(--violet);
  stroke-width: 1.5;
}

.best-tag-t {
  fill: var(--accent);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-anchor: middle;
}

.rule-l {
  fill: none;
  stroke: var(--line-2);
  stroke-width: 1;
}

.g-track {
  fill: none;
  stroke: var(--violet-soft);
  stroke-width: 14;
}

.g-arc {
  fill: none;
  stroke: var(--violet);
  stroke-width: 14;
  stroke-dasharray: 75 100;
}

.g-cut {
  fill: none;
  stroke: var(--panel-2);
  stroke-width: 18;
  stroke-dasharray: 0.7 4.3;
}

.g-v {
  font-family: var(--sans);
  fill: var(--text);
  font-size: 30px;
  font-weight: 620;
  letter-spacing: -0.03em;
  text-anchor: middle;
}

.g-k {
  fill: var(--muted);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-anchor: middle;
}

.f-l {
  font-family: var(--sans);
  fill: var(--text-2);
  font-size: 17px;
}

.f-v {
  fill: var(--text);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.f-tr,
.f-on {
  fill: none;
  stroke: var(--violet-soft);
  stroke-width: 12;
  stroke-dasharray: 30 4;
}

.f-on {
  stroke: var(--violet);
}

.ev-chip {
  fill: var(--panel);
  stroke: var(--line-3);
  stroke-width: 1;
}

.next-b {
  fill: var(--cyan-soft);
}

.next-k {
  fill: var(--text);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.next-v {
  font-family: var(--sans);
  fill: var(--text);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.next-a {
  fill: none;
  stroke: var(--text);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Cena 6 */

.sw-t {
  font-family: var(--sans);
  fill: var(--state);
  font-size: 18px;
  font-weight: 600;
}

.sw-c {
  fill: var(--panel-2);
  stroke: var(--text);
  stroke-width: 1.5;
}

.sw-l,
.sw-mini {
  fill: none;
  stroke: var(--coral);
  stroke-width: 3;
  stroke-linecap: round;
}

.sw-mini {
  stroke-width: 2.2;
}

.lane-d {
  fill: none;
  stroke: var(--line-2);
}

.lane-k {
  fill: var(--text);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.lane-a {
  fill: var(--accent);
}

.rec {
  fill: var(--violet);
}

.rec-1 {
  stroke: var(--text);
  stroke-width: 2;
}

.hum-m-b {
  fill: var(--text);
}

.tm {
  fill: var(--text-2);
  font-size: 14px;
  text-anchor: middle;
}

.tm-x {
  fill: var(--state);
  font-weight: 600;
}

.eq-l {
  fill: none;
  stroke: var(--info);
  stroke-width: 2;
}

.ne-l {
  fill: none;
  stroke: var(--coral);
  stroke-width: 2;
}

.eq-c {
  fill: var(--cyan-soft);
  stroke: var(--info);
  stroke-width: 1.5;
}

.ne-c {
  fill: var(--coral-soft);
  stroke: var(--coral);
  stroke-width: 1.5;
}

.eq-t {
  fill: var(--text);
  font-size: 17px;
  font-weight: 600;
  text-anchor: middle;
}

.eq-s {
  font-size: 15px;
}

.cal-tr {
  fill: none;
  stroke: var(--text-2);
  stroke-width: 2;
}

.knob {
  fill: var(--violet);
  stroke: var(--text);
  stroke-width: 1.5;
}

.lg {
  font-family: var(--sans);
  fill: var(--text-2);
  font-size: 16px;
}

/* Cena 7 */

.sdk-b {
  fill: var(--violet-soft);
  stroke: var(--violet);
  stroke-width: 1.2;
}

.sdk-t {
  fill: var(--accent);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-anchor: middle;
}

.dash {
  fill: none;
  stroke: var(--text-2);
  stroke-width: 1.4;
  stroke-dasharray: 3 4;
}

.conn-b {
  fill: var(--panel-2);
  stroke: var(--text);
  stroke-width: 1.2;
}

.conn-t {
  fill: var(--text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-anchor: middle;
}

.pad {
  fill: var(--cyan);
  stroke: var(--text);
  stroke-width: 1;
}

.pad-co {
  fill: var(--coral);
}

.ok-t {
  fill: var(--state);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.evt-b {
  fill: var(--coral-soft);
  stroke: var(--coral);
  stroke-width: 1.2;
}

.evt-t {
  fill: var(--state);
  font-size: 13px;
  font-weight: 600;
  text-anchor: middle;
}

/* Cena 8 */

.unit {
  fill: var(--panel-2);
  stroke: var(--line-3);
  stroke-width: 1.2;
}

.unit-on {
  fill: var(--cyan-soft);
  stroke: var(--info);
}

.lock {
  fill: none;
  stroke: var(--text-2);
  stroke-width: 1.5;
}

.u-tr {
  fill: none;
  stroke: var(--line-3);
  stroke-width: 1.2;
  stroke-dasharray: 2 5;
}

.u-dot {
  fill: var(--text-2);
}

.u-dot-a {
  fill: var(--info);
}

.u-dot-a {
  transform: translateX(150px);
}

.u-dot-b {
  transform: translateX(60px);
}

.u-dot-c {
  transform: translateX(196px);
}

.rec-d {
  fill: none;
  stroke: var(--line-2);
}

.lk {
  fill: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.lv {
  font-family: var(--sans);
  fill: var(--text);
  font-size: 16px;
}

.ok-s {
  fill: var(--state);
  font-size: 13px;
}

.arrow-co {
  fill: none;
  stroke: var(--coral);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.evt-card {
  fill: var(--coral-soft);
  stroke: var(--coral);
  stroke-width: 1.5;
}

.evt-k {
  fill: var(--state);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.evt-n {
  fill: var(--text);
  font-size: 17px;
  font-weight: 600;
}

.evt-d {
  fill: var(--text-2);
  font-size: 13px;
}

/* ---------- Depois do filme ---------- */

.sec {
  position: relative;
  padding: clamp(80px, 9vw, 136px) var(--gutter);
  border-top: 1px solid var(--line-2);
  scroll-margin-top: var(--head);
}

.sec-grid {
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-position: center -1px;
  background-size: 48px 48px;
}

.slate {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--muted);
  font: 500 12px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.slate b {
  color: var(--info);
  font-weight: 600;
}

.slate span {
  color: var(--text-2);
}

.sec-head {
  display: grid;
  gap: 22px 72px;
  margin-top: 32px;
}

.sec h2 {
  max-width: 18ch;
  color: var(--text);
  font-size: clamp(34px, 4.4vw, 64px);
  font-weight: 620;
  line-height: 1.02;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.sec-lead {
  max-width: 52ch;
  color: var(--text-2);
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.55;
}

/* Regras */

.rules {
  display: grid;
  gap: 1px;
  margin-top: clamp(44px, 5vw, 72px);
  border: 1px solid var(--line-3);
  background: var(--line-3);
}

.rule {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 12px;
  padding: clamp(22px, 2.4vw, 32px);
  background: var(--panel);
}

.rule-id {
  color: var(--info);
  font: 600 13px/1 var(--mono);
  letter-spacing: 0.12em;
}

.rule h3 {
  color: var(--text);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 620;
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.rule > p:not([class]) {
  color: var(--text-2);
  font-size: 15.5px;
  line-height: 1.55;
}

.rf {
  margin-top: 14px;
  padding-top: 18px;
  border-top: 1px dashed var(--line-3);
}

.src-line {
  color: var(--text);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.9;
}

.src-line mark {
  position: relative;
  padding: 2px 5px;
  color: var(--text);
  background: var(--cyan-soft);
  box-shadow: inset 0 -3px 0 var(--cyan);
}

.src-line mark::after {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  color: var(--info);
  font: 500 11.5px/1 var(--mono);
  white-space: nowrap;
  content: "← " attr(data-src);
}

.src-null {
  margin-top: 26px;
  color: var(--text-2);
  font: 500 13px/1.5 var(--mono);
}

.src-null span {
  margin-right: 8px;
  padding: 2px 6px;
  border: 1px dashed var(--state);
  color: var(--state);
}

.rf-sw svg {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
  overflow: visible;
  font-family: var(--mono);
}

.rs-m {
  fill: var(--state);
  font-size: 14px;
  font-weight: 600;
}

.rs-t {
  fill: var(--muted);
  font-size: 12px;
}

.rf-sw .mid {
  text-anchor: middle;
}

.rf-sw .end {
  text-anchor: end;
}

.rs-w {
  fill: none;
  stroke: var(--text-2);
  stroke-width: 2;
}

.rs-out {
  stroke: var(--coral);
  stroke-width: 3;
}

.rs-c {
  fill: var(--panel-2);
  stroke: var(--text);
  stroke-width: 1.5;
}

.rs-lever {
  fill: none;
  stroke: var(--coral);
  stroke-width: 3;
  stroke-linecap: round;
  transform-box: view-box;
  transform-origin: 120px 52px;
  transform: rotate(21.5deg);
}

.rf-lanes {
  display: grid;
  gap: 8px;
}

.lane {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.lane span {
  color: var(--text-2);
  font: 500 12px/1 var(--mono);
  letter-spacing: 0.06em;
}

.lane i {
  position: relative;
  height: 22px;
  border: 1px solid var(--line-3);
  background: var(--panel-2);
}

.lane i::after {
  position: absolute;
  top: 6px;
  left: 30%;
  width: 8px;
  height: 8px;
  background: var(--info);
  content: "";
}

.lane:nth-child(2) i::after {
  left: 62%;
  background: var(--text-2);
}

.lane:nth-child(3) i::after {
  left: 12%;
  background: var(--text-2);
}

.evidence {
  display: grid;
  gap: 14px;
  margin-top: clamp(28px, 3vw, 40px);
  padding: clamp(22px, 3vw, 36px);
  border: 1px solid var(--line-3);
  border-left: 3px solid var(--coral);
  color: var(--text);
  background: var(--panel-2);
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 560;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.evidence b {
  font-weight: 650;
  box-shadow: inset 0 -0.14em 0 var(--cyan-soft);
}

.ev-k {
  color: var(--state);
  font: 600 12px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Integração */

.int {
  display: grid;
  gap: clamp(40px, 5vw, 72px);
}

.int h2 {
  margin-top: 32px;
}

.int .sec-lead {
  margin-top: 22px;
}

.route {
  margin-top: 40px;
  max-width: 480px;
}

.route svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  font-family: var(--mono);
}

.rt-box {
  fill: var(--panel-2);
  stroke: var(--text);
  stroke-width: 1.5;
}

.rt-tab {
  fill: var(--cyan);
}

.rt-tab-p {
  fill: var(--coral);
}

.rt-k {
  fill: var(--text);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.rt-v {
  font-family: var(--sans);
  fill: var(--text-2);
  font-size: 15px;
}

.rt-c {
  fill: var(--muted);
  font-size: 11.5px;
  letter-spacing: 0.12em;
}

.rt-c-r {
  text-anchor: end;
}

.rt-base,
.rt-arrow {
  fill: none;
  stroke: var(--text);
  stroke-width: 1.5;
}

.rt-ruler {
  fill: none;
  stroke: var(--line-3);
  stroke-width: 8;
  stroke-dasharray: 1 9;
}

.rt-pk {
  fill: var(--panel-2);
  stroke: var(--info);
  stroke-width: 2.5;
  transform: translateX(70px);
  animation: rt-run 3.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes rt-run {
  0% {
    opacity: 0;
    transform: translateX(0);
  }
  10% {
    opacity: 1;
  }
  80% {
    opacity: 1;
    transform: translateX(140px);
  }
  100% {
    opacity: 0;
    transform: translateX(140px);
  }
}

.spec {
  display: grid;
  border-top: 1px solid var(--text);
}

.spec > div {
  display: grid;
  gap: 6px;
  padding: 18px 0 18px 22px;
  border-bottom: 1px solid var(--line-2);
  position: relative;
}

.spec > div::before {
  position: absolute;
  top: 25px;
  left: 0;
  width: 8px;
  height: 8px;
  background: var(--cyan);
  outline: 1px solid var(--text);
  content: "";
}

.spec dt {
  color: var(--text);
  font: 600 14px/1.3 var(--mono);
  letter-spacing: 0.04em;
}

.spec dd {
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.5;
}

/* Conversar */

.fim {
  padding-bottom: clamp(56px, 6vw, 96px);
  background: var(--bg-2);
}

.end-frame {
  position: relative;
  padding: clamp(24px, 5vw, 72px);
  border: 1px solid var(--line-3);
  background-color: var(--panel);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
}

.fim h2 {
  max-width: 20ch;
  margin-top: 32px;
}

.end-mail-row {
  margin-top: clamp(32px, 4vw, 52px);
}

.end-mail {
  display: inline-block;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--coral);
  color: var(--text);
  font: 400 clamp(26px, 6vw, 88px)/1.05 var(--mono);
  letter-spacing: -0.045em;
  overflow-wrap: anywhere;
  text-decoration: none;
  transition:
    color 0.15s,
    border-color 0.15s;
}

.end-mail:hover {
  border-color: var(--info);
  color: var(--info);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 36px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid transparent;
  font: 600 15px/1 var(--sans);
  letter-spacing: -0.01em;
  text-decoration: none;
  transition:
    color 0.15s,
    border-color 0.15s,
    background-color 0.15s;
}

.btn svg {
  transition: transform 0.2s var(--e-out);
}

.btn:hover svg {
  transform: translateX(3px);
}

.btn-sig {
  color: var(--panel-2);
  background: var(--text);
}

.btn-sig:hover {
  background: var(--accent);
}

.btn-ln {
  border-color: var(--line-3);
  color: var(--text);
  background: var(--panel-2);
}

.btn-ln:hover {
  border-color: var(--text);
}

.bars {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  height: 8px;
  margin-top: clamp(44px, 6vw, 80px);
}

.bars i:nth-child(1) {
  background: var(--bg-2);
  outline: 1px solid var(--line-2);
}
.bars i:nth-child(2) {
  background: var(--cyan);
}
.bars i:nth-child(3) {
  background: var(--teal);
}
.bars i:nth-child(4) {
  background: var(--violet);
}
.bars i:nth-child(5) {
  background: var(--coral);
}
.bars i:nth-child(6) {
  background: var(--info);
}
.bars i:nth-child(7) {
  background: var(--text);
}

/* Rodapé */

.foot {
  padding: 52px var(--gutter) 44px;
  border-top: 1px solid var(--line-2);
  color: var(--muted);
  font-size: 14px;
}

.foot-in {
  display: grid;
  gap: 28px 48px;
}

.foot-name {
  color: var(--text);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.foot-brand p + p {
  margin-top: 6px;
  color: var(--text-2);
}

.foot-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px 28px;
}

.foot-nav a {
  color: var(--text-2);
  text-decoration: none;
  transition: color 0.15s;
}

.foot-nav a:hover {
  color: var(--info);
}

.legal {
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font: 400 12px/1.7 var(--mono);
  letter-spacing: 0.02em;
}

/* ---------- Movimento ---------- */
/* Regra geral: o estado base de tudo é o quadro final, legível. As animações só existem
   com a classe .mo (JS ligado e movimento permitido) e tocam quando o quadro recebe .on. */

.fig .pp {
  transform-box: fill-box;
  transform-origin: center;
}

.fig .wx {
  transform-box: fill-box;
  transform-origin: left center;
}

.core-ticks {
  transform-box: fill-box;
  transform-origin: center;
}

.ne-l {
  stroke-dasharray: 5 4;
}

[data-mode="stack"] .fig:not(.on) .a,
[data-mode="stack"] .fig:not(.on) .cues li {
  opacity: 0;
}

.mo .fig.on .a {
  animation-duration: 0.6s;
  animation-timing-function: var(--e-out);
  animation-fill-mode: both;
}

.mo .fig.on .fd {
  animation-name: a-fd;
  animation-duration: 0.5s;
}

.mo .fig.on .ru {
  animation-name: a-ru;
}

.mo .fig.on .sl {
  animation-name: a-sl;
}

.mo .fig.on .sr {
  animation-name: a-sr;
}

.mo .fig.on .pp {
  animation-name: a-pp;
  animation-duration: 0.5s;
}

.mo .fig.on .dw {
  stroke-dasharray: 100 100;
  animation-name: a-dw;
  animation-duration: 0.7s;
}

.mo .fig.on .wx {
  animation-name: a-wx;
}

.mo .fig.on .ne-l.dw {
  stroke-dasharray: 5 4;
  animation-name: a-fd;
}

.mo .fig.on .g-arc {
  animation-name: a-gauge;
  animation-duration: 1.1s;
}

.mo .fig.on .knob {
  animation-name: a-knob;
  animation-duration: 0.9s;
}

.mo .fig.on .evt {
  animation-name: a-evt;
  animation-duration: 1s;
}

.mo .fig.on .t1 {
  animation-delay: calc(var(--step) * 1 + var(--d0, 0s));
}
.mo .fig.on .t2 {
  animation-delay: calc(var(--step) * 2 + var(--d0, 0s));
}
.mo .fig.on .t3 {
  animation-delay: calc(var(--step) * 3 + var(--d0, 0s));
}
.mo .fig.on .t4 {
  animation-delay: calc(var(--step) * 4 + var(--d0, 0s));
}
.mo .fig.on .t5 {
  animation-delay: calc(var(--step) * 5 + var(--d0, 0s));
}
.mo .fig.on .t6 {
  animation-delay: calc(var(--step) * 6 + var(--d0, 0s));
}
.mo .fig.on .t7 {
  animation-delay: calc(var(--step) * 7 + var(--d0, 0s));
}
.mo .fig.on .t8 {
  animation-delay: calc(var(--step) * 8 + var(--d0, 0s));
}
.mo .fig.on .t9 {
  animation-delay: calc(var(--step) * 9 + var(--d0, 0s));
}
.mo .fig.on .t10 {
  animation-delay: calc(var(--step) * 10 + var(--d0, 0s));
}
.mo .fig.on .t11 {
  animation-delay: calc(var(--step) * 11 + var(--d0, 0s));
}
.mo .fig.on .t12 {
  animation-delay: calc(var(--step) * 12 + var(--d0, 0s));
}
.mo .fig.on .t13 {
  animation-delay: calc(var(--step) * 13 + var(--d0, 0s));
}

/* Cena 2: as palavras que não viram campo perdem a tinta. */
.mo .fig.on .say.w0 {
  animation-name: a-fd, a-dim;
  animation-duration: 0.5s, 0.8s;
  animation-delay: 0.08s, 0.9s;
}

.mo .fig.on .caret {
  animation-name: a-fd, blink;
  animation-duration: 0.3s, 1s;
  animation-delay: 0.1s, 0.5s;
  animation-iteration-count: 1, infinite;
  animation-timing-function: linear, steps(1, end);
}

/* Núcleo */
.mo .fig.on .core-ticks {
  animation: spin 80s linear infinite;
}

.mo .fig.on .core-sweep {
  animation: spin 2.6s linear infinite;
}

.mo .fig.on .cp1 {
  animation: pulse 1.2s 1s var(--e-out) both;
}

.mo .fig.on .cp2 {
  animation: pulse 1.2s 1.05s var(--e-out) both;
}

.mo .fig.on .cp7 {
  animation: pulse 1.2s 0.55s var(--e-out) both;
}

/* Pacotes nas trilhas: a mesma geometria do SVG. */
.mo .fig.on .pk {
  animation: pk 3.4s linear infinite;
}

.mo .fig.on .pk1 {
  offset-path: path("M50 148V398Q50 410 62 410H308Q320 410 320 422V486");
  animation-delay: 0.9s;
}

.mo .fig.on .pk7e {
  offset-path: path("M70 96V236");
  animation-duration: 3.6s;
  animation-delay: 0.2s;
}

.mo .fig.on .pk7a {
  offset-path: path("M188 262H356");
  animation-duration: 3.6s;
  animation-delay: 0.5s;
}

.mo .fig.on .pk7b {
  offset-path: path("M410 320V438Q410 446 402 446H266Q258 446 258 454V534");
  animation-duration: 3.6s;
  animation-delay: 1.4s;
}

.mo .fig.on .pk7c {
  offset-path: path("M372 300V334Q372 344 362 344H204");
  animation-duration: 3.6s;
  animation-delay: 2.3s;
}

.mo .fig.on .pk7d {
  offset-path: path("M150 236V152");
  animation-duration: 3.6s;
  animation-delay: 2.9s;
}

/* Cena 4: a linha de busca varre a base. */
.mo .fig.on .scan {
  animation:
    a-fd 0.5s 0.3s both,
    scan 3.6s 0.5s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate both;
}

/* Cena 8: cada unidade anda só na própria faixa. */
.mo .fig.on .u-dot-a {
  animation:
    a-fd 0.4s 0.35s both,
    u-run 3.4s ease-in-out infinite alternate;
}

.mo .fig.on .u-dot-b {
  animation:
    a-fd 0.4s 0.4s both,
    u-run 4.3s -1.2s ease-in-out infinite alternate;
}

.mo .fig.on .u-dot-c {
  animation:
    a-fd 0.4s 0.45s both,
    u-run 2.9s -2.1s ease-in-out infinite alternate;
}

/* Cortes de continuidade, só rolando para a frente: a peça que sai de uma cena é a que
   entra na seguinte (campos viram marcos da memória, o período vira filtro da agenda, o
   ponto escolhido abre o quadro do match, o quadro encolhe até virar uma recomendação e o
   evento do webhook desce para a trilha de saída). */
.mc3a,
.mc3b,
.mc3c,
.mc4 {
  transform-box: fill-box;
  transform-origin: 0 0;
}

.mc3a {
  --mx: -68px;
  --my: 112px;
  --ms: 1.45;
}

.mc3b {
  --mx: -476px;
  --my: 70px;
  --ms: 1.45;
}

.mc3c {
  --mx: -272px;
  --my: 28px;
  --ms: 1.45;
}

.mc4 {
  --mx: 324px;
  --my: 164px;
  --ms: 1.07;
}

.mc5 {
  transform-box: view-box;
  transform-origin: 491px 233px;
}

.mc-ghost {
  fill: none;
  stroke: var(--violet);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transform-box: view-box;
  transform-origin: 0 0;
}

.evt {
  transform-box: fill-box;
  transform-origin: center;
}

.film[data-dir="fwd"] .fig.on .mc {
  animation-name: mc-move;
  animation-duration: 0.85s;
}

/* O quadro do match abre primeiro; o conteúdo entra depois que ele chega ao tamanho final. */
.film[data-dir="fwd"] .fig-5.on {
  --d0: 0.34s;
  --step: 0.06s;
}

.film[data-dir="fwd"] .fig.on .mc5 {
  animation-name: mc-grow;
  animation-duration: 0.7s;
}

.film[data-dir="fwd"] .fig.on .mc-ghost {
  animation: mc-shrink 0.8s 0.05s cubic-bezier(0.6, 0, 0.2, 1) both;
}


/* Legendas entram em sequência, como em uma decupagem. */
.mo .fig.on .cues li {
  animation: a-ru 0.6s var(--e-out) both;
}

.mo .fig.on .cues li:nth-child(1) {
  animation-delay: 0.15s;
}
.mo .fig.on .cues li:nth-child(2) {
  animation-delay: 0.55s;
}
.mo .fig.on .cues li:nth-child(3) {
  animation-delay: 0.95s;
}

/* Título cinético de cada cena */
.mo .kt .w > span {
  transition: transform 0.9s var(--e-out);
}

.mo .scene:not(.on) .kt .w > span {
  transform: translateY(110%);
}

.mo .scene .kt .w:nth-child(2) > span {
  transition-delay: 0.07s;
}
.mo .scene .kt .w:nth-child(3) > span {
  transition-delay: 0.14s;
}
.mo .scene .kt .w:nth-child(4) > span {
  transition-delay: 0.21s;
}
.mo .scene .kt .w:nth-child(5) > span {
  transition-delay: 0.28s;
}

.mo .scene .beat,
.mo .scene .sc-k i {
  transition:
    opacity 0.6s 0.3s,
    transform 0.8s 0.3s var(--e-out);
}

.mo .scene:not(.on) .beat {
  opacity: 0;
  transform: translateY(12px);
}

.mo .scene:not(.on) .sc-k i {
  transform: scaleX(0);
}

/* Topo: uma vez, no carregamento. */
.ln > span {
  animation: a-rise 1s var(--e-out) both;
}

.ln + .ln > span {
  animation-delay: 0.12s;
}

.hero-slate,
.hero-grid {
  animation: a-fd 0.8s 0.3s var(--e-out) both;
}

.sheet li {
  animation: a-ru 0.7s var(--e-out) both;
}

.sheet li:nth-child(1) {
  animation-delay: 0.45s;
}
.sheet li:nth-child(2) {
  animation-delay: 0.51s;
}
.sheet li:nth-child(3) {
  animation-delay: 0.57s;
}
.sheet li:nth-child(4) {
  animation-delay: 0.63s;
}
.sheet li:nth-child(5) {
  animation-delay: 0.69s;
}
.sheet li:nth-child(6) {
  animation-delay: 0.75s;
}
.sheet li:nth-child(7) {
  animation-delay: 0.81s;
}
.sheet li:nth-child(8) {
  animation-delay: 0.87s;
}

.tally {
  animation: tally 1.2s step-end infinite;
}

.caret-h {
  animation: blink 1.1s 1.2s steps(1, end) infinite;
}

@keyframes a-fd {
  from {
    opacity: 0;
  }
}

@keyframes a-ru {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

@keyframes a-sl {
  from {
    opacity: 0;
    transform: translateX(-22px);
  }
}

@keyframes a-sr {
  from {
    opacity: 0;
    transform: translateX(22px);
  }
}

@keyframes a-pp {
  from {
    opacity: 0;
    transform: scale(0.55);
  }
}

@keyframes a-dw {
  from {
    stroke-dashoffset: 100;
  }
}

@keyframes a-wx {
  from {
    transform: scaleX(0);
  }
}

@keyframes a-gauge {
  from {
    stroke-dashoffset: 75;
  }
}

@keyframes a-knob {
  from {
    opacity: 0;
    transform: translateX(-64px);
  }
  25% {
    opacity: 1;
  }
}

@keyframes a-evt {
  from {
    opacity: 0;
    transform: translateX(-340px);
  }
  20% {
    opacity: 1;
  }
}

@keyframes mc-move {
  from {
    transform: translate(var(--mx), var(--my)) scale(var(--ms, 1));
  }
}

@keyframes mc-grow {
  from {
    opacity: 0.5;
    transform: scale(0.04);
  }
}

@keyframes mc-shrink {
  from {
    opacity: 1;
    transform: none;
  }
  85% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate(180.9px, 181px) scale(0.0473, 0.0538);
  }
}

@keyframes a-dim {
  from {
    fill: var(--text);
  }
}

@keyframes a-rise {
  from {
    transform: translateY(105%);
  }
}

@keyframes fig-off {
  to {
    opacity: 0;
  }
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  0% {
    opacity: 0.9;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

@keyframes pk {
  0% {
    offset-distance: 0%;
    opacity: 0;
  }
  6%,
  90% {
    opacity: 1;
  }
  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}

@keyframes scan {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(222px);
  }
}

@keyframes u-run {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(220px);
  }
}

@keyframes tally {
  50% {
    opacity: 0.2;
  }
}

/* Regras: a chave do ERP fecha quando a figura entra na tela; cada unidade anda na sua faixa. */
@supports (animation-timeline: view()) {
  .mo .rs-lever {
    animation: rs-close linear both;
    animation-timeline: view();
    animation-range: entry 10% entry 100%;
  }

  .mo .rs-out {
    animation: rs-out linear both;
    animation-timeline: view();
    animation-range: entry 10% entry 100%;
  }
}

.mo .lane i::after {
  animation: lane-run 3.2s ease-in-out infinite alternate;
}

.mo .lane:nth-child(2) i::after {
  animation-duration: 4.1s;
  animation-delay: -1.4s;
}

.mo .lane:nth-child(3) i::after {
  animation-duration: 2.7s;
  animation-delay: -0.6s;
}

@keyframes rs-close {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(21.5deg);
  }
}

@keyframes rs-out {
  from {
    stroke: var(--line-3);
    stroke-width: 2;
  }
}

@keyframes lane-run {
  from {
    left: 6%;
  }
  to {
    left: 88%;
  }
}

/* ---------- Larguras ---------- */

@media (min-width: 520px) {
  .sheet ol {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .nav {
    display: flex;
    gap: 26px;
    margin-left: auto;
  }

  .portal {
    margin-left: 0;
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: start;
  }

  .sec-head {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: end;
  }

  .rules {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .int {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .foot-in {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .legal {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1100px) {
  .sheet ol {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}

/* Sem palco (sem JS ou movimento reduzido) em tela larga: texto e quadro lado a lado. */
@media (min-width: 1000px) {
  html:not([data-mode="film"]) .film {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(32px, 4vw, 64px);
  }

  html:not([data-mode="film"]) .fig {
    align-self: start;
    margin-top: clamp(56px, 8vw, 104px);
  }

  html:not([data-mode="film"]) .fig-1 {
    margin-top: 0;
  }

  html:not([data-mode="film"]) .film-end {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1000px) {
  html:not([data-mode="film"]) .ghost {
    display: block;
  }
}

@media (max-width: 519px) {
  .hero-slate i {
    display: none;
  }
}

@media (max-height: 820px) {
  :root {
    --cue-h: 96px;
  }

  [data-mode="film"] .cues {
    padding-block: 10px 12px;
  }

  [data-mode="film"] .cues li {
    font-size: 13.5px;
  }

  [data-mode="film"] .kt {
    font-size: clamp(36px, 4.2vw, 64px);
  }

  [data-mode="film"] .cap-t,
  [data-mode="film"] .io {
    display: none;
  }

  [data-mode="film"] .ghost {
    display: none;
  }
}

@media (max-width: 599px) {
  .fig {
    margin-inline: calc(-1 * var(--gutter));
    border-inline: 0;
  }

  .fig::before {
    display: none;
  }

  .fig-svg {
    padding: 10px 2px 4px;
  }

  .fig .fine {
    display: none;
  }

  .cues {
    padding-inline: var(--gutter);
  }

  .cues li {
    font-size: 14px;
  }

  .ghost {
    font-size: 112px;
  }

  .trio div {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .cta-row .btn {
    flex: 1 1 100%;
    justify-content: space-between;
  }

  .end-frame::before {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}