/* ============================================================
   Workshop Modo IA · 5ª edição · theme.css
   Identidade Sling / Modo IA, tema claro para projetor.
   Escala proporcional ao palco: tudo mede em --u (1/100 da largura
   de um palco 16:9 que cabe na tela), então nada quebra entre
   resoluções. Animações só rodam no slide ativo e respeitam
   prefers-reduced-motion; sem animação, cada ilustração mostra o
   estado final (vale para ?still, overview e PDF).
   ============================================================ */

:root {
  --u: min(1vw, 1.7778vh);

  /* paleta clara (projetor) */
  --bg: #FAF8F5;
  --paper: #FFFFFF;
  --ink: #0A0A0A;
  --ink-2: #3F3C47;
  --ink-3: #75707F;
  --line: rgba(10, 10, 10, .10);
  --line-2: rgba(10, 10, 10, .18);
  --violet: #7040F6;
  --deep: #5B2DE0;
  --lilac: #A855F7;
  --pink: #FF6BC8;
  --pink-ink: #D23C8E;
  --mint: #1B9A7C;
  --mint-soft: #4ED3B4;
  --amber: #C98A0C;
  --red: #D33F49;
  --tint: #F1ECFF;
  --tint-mint: #E4F7F1;
  --tint-pink: #FFEAF6;
  --shadow: 0 calc(var(--u)*.4) calc(var(--u)*2.2) rgba(40, 20, 90, .08), 0 1px 2px rgba(10, 10, 10, .05);
  --grad: linear-gradient(115deg, #5B2DE0, #A855F7 55%, #FF6BC8);
  --grad-solid: linear-gradient(135deg, #7040F6 0%, #5B2DE0 55%, #A855F7 100%);

  --head: 'Epilogue', 'Space Grotesk', system-ui, sans-serif;

  /* tokens do motor */
  --deck-bg: var(--bg);
  --deck-fg: var(--ink);
  --deck-accent: var(--violet);
  --deck-accent-2: var(--lilac);
  --deck-muted: #8A8594;
  --deck-line: rgba(10, 10, 10, .16);
  --deck-elevated: #FFFFFF;
  --deck-danger: var(--red);
  --deck-maxw: calc(var(--u) * 84);
  --deck-pad: calc(var(--u) * 4.2) calc(var(--u) * 7.5);
  --deck-font: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --deck-mono: 'Space Mono', ui-monospace, Menlo, monospace;
  --deck-ease: cubic-bezier(.16, 1, .3, 1);
}

/* tema escuro opcional (tecla D) */
body.theme-dark {
  --bg: #0D0B13; --paper: #1A1524; --ink: #F7F4FF; --ink-2: #D2CADF; --ink-3: #A198B2;
  --line: rgba(255, 255, 255, .12); --line-2: rgba(255, 255, 255, .22);
  --violet: #9B7AFF; --mint: #4ED3B4; --tint: #231A38; --tint-mint: #12302A; --tint-pink: #33172A;
  --shadow: 0 10px 40px rgba(0, 0, 0, .35);
  --deck-bg: var(--bg); --deck-fg: var(--ink); --deck-elevated: #1A1524; --deck-line: rgba(255, 255, 255, .16);
}

/* ---------- fundo vivo (sutil, não disputa com o conteúdo) ---------- */
body { background: var(--bg); }
body::before {
  content: ''; position: fixed; inset: -20%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(28% 32% at 12% 14%, rgba(168, 85, 247, .16), transparent 70%),
    radial-gradient(26% 30% at 88% 86%, rgba(255, 107, 200, .14), transparent 70%),
    radial-gradient(22% 26% at 80% 10%, rgba(78, 211, 180, .10), transparent 70%);
  animation: aurora 38s ease-in-out infinite alternate;
}
body::after {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .55;
  background-image: radial-gradient(rgba(10, 10, 10, .06) 1px, transparent 1px);
  background-size: calc(var(--u) * 2.4) calc(var(--u) * 2.4);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000, transparent 100%);
}
@keyframes aurora { to { transform: translate(4%, -3%) rotate(6deg) scale(1.06); } }
#deck { z-index: 1; }
.slide { color: var(--ink); }

/* ---------- chrome ---------- */
#progress { height: 4px; background: var(--grad); }
body[data-owner='paulo'] #progress { background: linear-gradient(90deg, var(--mint-soft), var(--violet)); }
.sidebar-item[data-owner='paulo']:not(.active)::before { background: rgba(27, 154, 124, .55); }
.sidebar-item[data-owner='paulo'][data-level='module']:not(.active)::before { background: rgba(27, 154, 124, .9); }
.module-indicator .module-name { font-size: calc(var(--u) * .62); }
.brand-mark { position: fixed; top: calc(var(--u) * 1.4); left: calc(var(--u) * 1.8); z-index: 60; height: calc(var(--u) * 1.5); opacity: .9; }
.brand-mark img { height: 100%; display: block; }
#wifi {
  position: fixed; left: calc(var(--u) * 1.4); bottom: calc(var(--u) * 1.3); z-index: 90;
  display: flex; align-items: center; gap: calc(var(--u) * .6);
  padding: calc(var(--u) * .35) calc(var(--u) * .8); border-radius: 999px;
  background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow);
  font: 400 calc(var(--u) * .62) var(--deck-mono); color: var(--ink-3);
}
#wifi b { color: var(--ink); }
#wifi i { color: var(--violet); }
body.on-cover #wifi, body.on-cover .brand-mark { opacity: 0; }
body.on-dark #wifi { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); color: rgba(255, 255, 255, .7); }
body.on-dark #wifi b { color: #fff; }
body.on-dark .brand-mark { filter: brightness(0) invert(1); }
body.on-dark .counter { color: rgba(255, 255, 255, .6); }
body.on-dark #hint { color: rgba(255, 255, 255, .6); }
body.on-dark .nav-btn { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .25); color: #fff; }
body.on-dark .sidebar-item:not(.active)::before { background: rgba(255, 255, 255, .3); }

/* ---------- tipografia ---------- */
.kicker {
  display: inline-flex; align-items: center; gap: .6em; margin: 0 0 calc(var(--u) * 1.1);
  font: 700 calc(var(--u) * .78) var(--deck-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--violet);
}
.kicker .dot { width: .6em; height: .6em; border-radius: 50%; background: var(--mint-soft); box-shadow: 0 0 0 .25em rgba(78, 211, 180, .2); }
.mega { font: 900 calc(var(--u) * 5.2)/1 var(--head); letter-spacing: -.035em; margin: 0; text-wrap: balance; }
.title { font: 800 calc(var(--u) * 3.6)/1.04 var(--head); letter-spacing: -.03em; margin: 0; text-wrap: balance; }
.h2 { font: 800 calc(var(--u) * 2.7)/1.08 var(--head); letter-spacing: -.025em; margin: 0; text-wrap: balance; }
.lead { font-size: calc(var(--u) * 1.6); line-height: 1.38; color: var(--ink-2); margin: calc(var(--u) * 1) 0 0; text-wrap: pretty; }
.body { font-size: calc(var(--u) * 1.28); line-height: 1.45; color: var(--ink-2); margin: 0; text-wrap: pretty; }
.small { font-size: calc(var(--u) * .95); color: var(--ink-3); }
.src { font: 400 calc(var(--u) * .7) var(--deck-mono); color: var(--ink-3); letter-spacing: .02em; margin-top: calc(var(--u) * 1.2); }
.em, .grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hl { color: var(--violet); font-weight: 700; }
.hl-mint { color: var(--mint); font-weight: 700; }
.nowrap { white-space: nowrap; }
.maxw-40 { max-width: 40ch; }
.maxw-52 { max-width: 52ch; }
.maxw-60 { max-width: 60ch; }
.center .lead, .center .body { margin-left: auto; margin-right: auto; }
.mt-1 { margin-top: calc(var(--u) * 1); }
.mt-2 { margin-top: calc(var(--u) * 2); }
.mt-3 { margin-top: calc(var(--u) * 3); }

/* selo do termo técnico: o nome real, para o público repetir depois */
.term {
  display: inline-flex; align-items: baseline; gap: .55em; margin: 0 0 calc(var(--u) * 1);
  padding: .38em .85em; border-radius: 999px; background: var(--ink); color: #fff;
  font: 700 calc(var(--u) * 1.05) var(--deck-mono); letter-spacing: .02em;
}
.term small { font: 400 .9em var(--deck-font); opacity: .72; letter-spacing: 0; }
.term + .term { margin-left: .5em; }
.terms { display: flex; flex-wrap: wrap; gap: .5em; justify-content: inherit; }
.center .terms { justify-content: center; }
.terms .term { margin: 0 0 calc(var(--u) * 1); }

/* ---------- layout ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(var(--u) * 5); align-items: center; }
.split.wide-r { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.split.wide-l { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.split > * { min-width: 0; }
.head-block { margin-bottom: calc(var(--u) * 2.4); }
.center .head-block { display: flex; flex-direction: column; align-items: center; }

/* cards */
.cards { display: grid; gap: calc(var(--u) * 1.2); width: 100%; }
.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.c6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.card {
  position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: calc(var(--u) * 1.2);
  padding: calc(var(--u) * 1.6); box-shadow: var(--shadow); text-align: left; display: flex; flex-direction: column; gap: calc(var(--u) * .5);
}
.card > i { font-size: calc(var(--u) * 2.3); color: var(--violet); margin-bottom: calc(var(--u) * .4); }
.card b.n { font: 700 calc(var(--u) * .8) var(--deck-mono); color: var(--violet); letter-spacing: .08em; }
.card strong { font: 800 calc(var(--u) * 1.4)/1.1 var(--head); letter-spacing: -.02em; }
.card span, .card p { font-size: calc(var(--u) * 1.12); line-height: 1.4; color: var(--ink-2); margin: 0; }
.card .ex { margin-top: auto; padding-top: calc(var(--u) * .6); font: 400 calc(var(--u) * .78) var(--deck-mono); color: var(--ink-3); }
.card.hot { background: var(--grad-solid); border: 0; color: #fff; }
.card.hot > i, .card.hot b.n { color: #fff; }
.card.hot span, .card.hot p, .card.hot .ex { color: rgba(255, 255, 255, .88); }
.card.soft { background: var(--tint); border-color: transparent; box-shadow: none; }
.card.mint > i { color: var(--mint); }
.center .card { text-align: left; }

/* faixa de lição / ideia-chave */
.band {
  display: flex; align-items: center; gap: calc(var(--u) * 1.1); margin-top: calc(var(--u) * 1.8);
  padding: calc(var(--u) * .9) calc(var(--u) * 1.3); border-radius: calc(var(--u) * 1); background: var(--tint-mint); border: 1px solid rgba(27, 154, 124, .2);
  text-align: left;
}
.band b { flex: 0 0 auto; padding: .45em .8em; border-radius: 999px; background: var(--mint); color: #fff; font: 700 calc(var(--u) * .66) var(--deck-mono); letter-spacing: .1em; text-transform: uppercase; }
.band span { font: 700 calc(var(--u) * 1.15)/1.35 var(--head); color: var(--ink); }
.band.violet { background: var(--tint); border-color: rgba(112, 64, 246, .2); }
.band.violet b { background: var(--violet); }
.band.warn { background: #FFF4DE; border-color: rgba(201, 138, 12, .25); }
.band.warn b { background: var(--amber); }

/* marcador de demonstração ao vivo */
.demo {
  display: inline-flex; align-items: center; gap: .6em; margin-top: calc(var(--u) * 1.4);
  padding: .55em 1em; border-radius: 999px; background: var(--ink); color: #fff;
  font: 700 calc(var(--u) * .78) var(--deck-mono); letter-spacing: .02em;
}
.demo::before { content: ''; width: .7em; height: .7em; border-radius: 50%; background: #FF5A5F; box-shadow: 0 0 0 0 rgba(255, 90, 95, .6); }
.demo span { font-weight: 400; opacity: .75; }

/* ---------- variantes de slide ---------- */
.slide.dark { background: radial-gradient(90% 110% at 50% 0%, #3A1F79 0%, #1A1030 55%, #0B0912 100%); color: #fff; }
.slide.dark .kicker { color: #CDBBFF; }
.slide.dark .lead, .slide.dark .body { color: rgba(255, 255, 255, .8); }
.slide.dark .em { background: linear-gradient(110deg, #D9CCFF, #B794FF 50%, #FF9AD8); -webkit-background-clip: text; background-clip: text; }
.slide.dark .term { background: #fff; color: var(--ink); }

/* capa */
.cover-logo { width: calc(var(--u) * 34); margin: 0 auto calc(var(--u) * 1.4); display: block; }
.cover-title { font: 900 calc(var(--u) * 4.4)/1 var(--head); letter-spacing: -.035em; margin: 0; }
.cover-meta { display: flex; gap: calc(var(--u) * .8); justify-content: center; flex-wrap: wrap; margin-top: calc(var(--u) * 1.8); }
.cover-meta span { display: inline-flex; align-items: center; gap: .5em; padding: .5em 1em; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); font: 700 calc(var(--u) * .82) var(--deck-mono); color: var(--ink-2); }
.cover-meta i { color: var(--violet); }
.cover-wifi { margin-top: calc(var(--u) * 2); display: inline-grid; grid-template-columns: auto 1px auto; gap: calc(var(--u) * 2.2); align-items: center; padding: calc(var(--u) * 1.1) calc(var(--u) * 2.4); background: var(--paper); border: 1px solid var(--line); border-radius: calc(var(--u) * 1.3); box-shadow: var(--shadow); }
.cover-wifi > span { width: 1px; height: 70%; background: var(--line-2); }
.cover-wifi small { display: block; font: 700 calc(var(--u) * .62) var(--deck-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.cover-wifi strong { font: 800 calc(var(--u) * 2.3)/1.1 var(--head); letter-spacing: -.02em; }
.cover-by { margin-top: calc(var(--u) * 1.4); display: flex; align-items: center; gap: .6em; justify-content: center; font: 400 calc(var(--u) * .8) var(--deck-mono); color: var(--ink-3); }
.cover-by img { height: calc(var(--u) * 1.4); }

/* abertura de módulo */
.module-num { font: 900 calc(var(--u) * 13)/.8 var(--head); letter-spacing: -.06em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .95; margin-bottom: calc(var(--u) * 1); }

/* mapa do dia */
.journey { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: calc(var(--u) * .9); margin-top: calc(var(--u) * 2.2); }
.journey::before { content: ''; position: absolute; left: 6%; right: 6%; top: calc(var(--u) * 2.1); height: 3px; border-radius: 3px; background: linear-gradient(90deg, #7040F6, #A855F7, #FF6BC8); transform-origin: left; }
.journey article { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: calc(var(--u) * .5); }
.journey b { width: calc(var(--u) * 4.2); height: calc(var(--u) * 4.2); border-radius: 50%; display: grid; place-items: center; background: var(--paper); border: 3px solid var(--violet); font: 700 calc(var(--u) * 1) var(--deck-mono); color: var(--violet); box-shadow: var(--shadow); }
.journey article:first-child b { background: var(--ink); border-color: var(--ink); color: #fff; }
.journey article:last-child b { background: var(--grad-solid); border: 0; color: #fff; }
.journey strong { font: 800 calc(var(--u) * 1.3) var(--head); margin-top: calc(var(--u) * .4); }
.journey span { font-size: calc(var(--u) * 1.05); line-height: 1.3; color: var(--ink-2); }

/* ---------- atividade ---------- */
.slide.act { background: var(--grad-solid); color: #fff; }
.slide.act.a1 { background: radial-gradient(90% 120% at 15% 0%, #7A4BFF 0%, #5B2DE0 50%, #3A1C9E 100%); }
.slide.act.a2 { background: radial-gradient(90% 120% at 85% 0%, #9B5BFF 0%, #6B35E8 50%, #3F1FA3 100%); }
.slide.act.a3 { background: radial-gradient(90% 120% at 15% 100%, #B05AF0 0%, #7A38E0 50%, #45209E 100%); }
.slide.act.a4 { background: radial-gradient(90% 120% at 85% 100%, #1FA886 0%, #1A7E8A 45%, #2A3D8F 100%); }
.slide.act.a5 { background: radial-gradient(90% 120% at 50% 0%, #E0529F 0%, #9A3FD6 50%, #4B22A8 100%); }
.act-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: calc(var(--u) * 4); align-items: center; }
.act-num { position: relative; width: calc(var(--u) * 20); height: calc(var(--u) * 20); display: grid; place-items: center; }
.act-num strong { font: 900 calc(var(--u) * 10)/1 var(--head); letter-spacing: -.06em; color: #fff; z-index: 1; }
.act-num::before, .act-num::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); }
.act-num::after { inset: 12%; border-style: dashed; border-color: rgba(255, 255, 255, .5); }
.slide.act .kicker { color: rgba(255, 255, 255, .85); }
.slide.act .kicker .dot { background: #fff; box-shadow: 0 0 0 .25em rgba(255, 255, 255, .25); }
.act-title { font: 900 calc(var(--u) * 4.2)/1 var(--head); letter-spacing: -.035em; margin: 0; text-wrap: balance; }
.act-out { margin-top: calc(var(--u) * 1.8); display: grid; gap: calc(var(--u) * .8); }
.act-out div { display: flex; gap: calc(var(--u) * 1); align-items: baseline; padding: calc(var(--u) * .9) calc(var(--u) * 1.2); border-radius: calc(var(--u) * 1); background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .22); }
.act-out small { flex: 0 0 calc(var(--u) * 8.5); font: 700 calc(var(--u) * .66) var(--deck-mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .75); }
.act-out span { font: 700 calc(var(--u) * 1.2)/1.35 var(--head); }
.act-meta { display: flex; gap: calc(var(--u) * .7); margin-top: calc(var(--u) * 1.4); flex-wrap: wrap; }
.act-meta span { padding: .45em .9em; border-radius: 999px; background: rgba(0, 0, 0, .18); font: 700 calc(var(--u) * .74) var(--deck-mono); }
.act-meta i { margin-right: .35em; }
body.on-act #wifi, body.on-act .counter { color: rgba(255, 255, 255, .8); }

/* pausa */
.break-icon { position: relative; font-size: calc(var(--u) * 9); color: var(--violet); line-height: 1; }
.break-icon .steam { position: absolute; left: 50%; top: -18%; width: 40%; height: 40%; transform: translateX(-60%); display: flex; gap: 14%; justify-content: center; }
.break-icon .steam i { display: block; width: 10%; height: 100%; border-radius: 99px; background: linear-gradient(transparent, rgba(112, 64, 246, .45)); opacity: .0; }
.break-time { font: 900 calc(var(--u) * 6)/1 var(--head); letter-spacing: -.04em; margin-top: calc(var(--u) * 1); }

/* frase de palco */
.statement .mega { max-width: 20ch; margin: 0 auto; }
.statement .lead { max-width: 42ch; }

/* sequência revelada por passos, com linha anterior esmaecida */
.seq { display: grid; gap: calc(var(--u) * 1.4); text-align: left; max-width: calc(var(--u) * 70); margin: 0 auto; }
.seq p { margin: 0; font: 800 calc(var(--u) * 3)/1.1 var(--head); letter-spacing: -.03em; transition: opacity .5s var(--deck-ease), color .5s; }
.seq p span { color: #FF9AD8; }
.slide:has(.seq [data-step="1"].step-on) .seq p:not(.step-on):not([data-step]),
.slide:has(.seq [data-step="2"].step-on) .seq p[data-step="1"],
.slide:has(.seq [data-step="3"].step-on) .seq p[data-step="2"],
.slide:has(.seq [data-step="4"].step-on) .seq p[data-step="3"] { opacity: .32; }

/* pergunta para a sala */
.ask { display: inline-flex; align-items: center; gap: .6em; padding: .5em 1.1em; border-radius: 999px; background: var(--tint-pink); color: var(--pink-ink); font: 700 calc(var(--u) * .85) var(--deck-mono); letter-spacing: .06em; text-transform: uppercase; margin-bottom: calc(var(--u) * 1.4); }
.timer-ring { --p: 100; width: calc(var(--u) * 7); height: calc(var(--u) * 7); border-radius: 50%; display: grid; place-items: center; margin: calc(var(--u) * 2) auto 0; background: conic-gradient(var(--violet) calc(var(--p) * 1%), var(--tint) 0); }
.timer-ring span { width: 78%; height: 78%; border-radius: 50%; background: var(--bg); display: grid; place-items: center; font: 700 calc(var(--u) * 1.3) var(--deck-mono); color: var(--violet); }
@property --p { syntax: '<number>'; inherits: false; initial-value: 100; }

/* ============================================================
   ILUSTRAÇÕES DE CONCEITO
   ============================================================ */

/* contador animado (números que sobem) */
@property --num { syntax: '<integer>'; inherits: false; initial-value: 0; }
.count { --num: var(--to); counter-reset: n var(--num); }
.count::before { content: counter(n); }

/* 3 números */
.stats3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 1.4); margin-top: calc(var(--u) * 1); }
.stats3 article { padding: calc(var(--u) * 2) calc(var(--u) * 1.8); background: var(--paper); border: 1px solid var(--line); border-radius: calc(var(--u) * 1.4); box-shadow: var(--shadow); text-align: left; }
.stats3 .big { font: 900 calc(var(--u) * 6)/.9 var(--head); letter-spacing: -.05em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stats3 p { margin: calc(var(--u) * 1) 0 0; font-size: calc(var(--u) * 1.1); line-height: 1.4; color: var(--ink-2); }

/* celular com autocompletar */
.phone { position: relative; width: calc(var(--u) * 24); margin: 0 auto; padding: calc(var(--u) * 1.2); border-radius: calc(var(--u) * 3); background: #111; box-shadow: 0 calc(var(--u)*1.5) calc(var(--u)*4) rgba(40, 20, 90, .25); }
.phone-screen { border-radius: calc(var(--u) * 2); background: #ECE5DD; overflow: hidden; display: flex; flex-direction: column; }
.phone-top { padding: calc(var(--u) * .9) calc(var(--u) * 1.2); background: #075E54; color: #fff; font: 700 calc(var(--u) * .9) var(--deck-font); display: flex; align-items: center; gap: .6em; }
.phone-top i { font-size: 1.3em; }
.phone-chat { min-height: calc(var(--u) * 12); padding: calc(var(--u) * 1); display: flex; flex-direction: column; justify-content: flex-end; gap: calc(var(--u) * .6); }
.bubble { max-width: 85%; padding: .55em .8em; border-radius: .8em; font-size: calc(var(--u) * 1.05); line-height: 1.3; background: #fff; color: #111; box-shadow: 0 1px 1px rgba(0, 0, 0, .1); }
.bubble.me { align-self: flex-end; background: #DCF8C6; }
.typing { display: flex; align-items: center; gap: .3em; margin: 0 calc(var(--u) * 1) calc(var(--u) * .8); padding: .5em .8em; background: #fff; border-radius: 999px; font-size: calc(var(--u) * 1.1); color: #111; }
.typing .word-new { color: var(--violet); font-weight: 700; }
.typing .caret { width: 2px; height: 1.1em; background: var(--violet); }
.suggest { display: grid; grid-template-columns: repeat(3, 1fr); background: #D1D5DB; }
.suggest span { padding: .7em 0; text-align: center; font-size: calc(var(--u) * 1); color: #111; border-right: 1px solid #B8BDC6; }
.suggest span:last-child { border-right: 0; }
.suggest span.pick { background: #fff; color: var(--violet); font-weight: 700; }
.keys { height: calc(var(--u) * 6); background: repeating-linear-gradient(90deg, #D1D5DB 0 8%, #BFC4CC 8% 8.6%), #D1D5DB; opacity: .8; }
.prob { display: grid; gap: calc(var(--u) * .7); margin-top: calc(var(--u) * 1.6); }
.prob div { display: grid; grid-template-columns: calc(var(--u) * 8) 1fr calc(var(--u) * 3.6); gap: calc(var(--u) * .8); align-items: center; font-size: calc(var(--u) * 1.1); }
.prob div b { font: 700 calc(var(--u) * 1.1) var(--head); }
.prob .bar { height: calc(var(--u) * 1); border-radius: 99px; background: var(--tint); overflow: hidden; }
.prob .bar i { display: block; height: 100%; width: var(--w); border-radius: 99px; background: var(--grad); transform-origin: left; }
.prob small { font: 700 calc(var(--u) * .9) var(--deck-mono); color: var(--ink-3); text-align: right; }

/* escala da leitura */
.shelf { display: flex; align-items: flex-end; gap: calc(var(--u) * .35); height: calc(var(--u) * 16); padding: 0 calc(var(--u) * 1); border-bottom: 4px solid var(--ink); }
.shelf i { flex: 1; height: var(--h); border-radius: calc(var(--u) * .3) calc(var(--u) * .3) 0 0; background: var(--c, var(--violet)); transform-origin: bottom; }
.shelf i:nth-child(3n) { --c: var(--lilac); }
.shelf i:nth-child(4n) { --c: var(--pink); }
.shelf i:nth-child(5n) { --c: var(--mint-soft); }
.scale-num { font: 900 calc(var(--u) * 5.4)/.9 var(--head); letter-spacing: -.05em; }
.scale-num small { font-size: .4em; letter-spacing: -.02em; }

/* notícias lado a lado */
.news2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 1.6); }
.news2 article { background: var(--paper); border: 1px solid var(--line); border-radius: calc(var(--u) * 1.3); overflow: hidden; box-shadow: var(--shadow); text-align: left; }
.news2 img { width: 100%; height: calc(var(--u) * 13); object-fit: cover; display: block; }
.news2 div { padding: calc(var(--u) * 1.2) calc(var(--u) * 1.4); }
.news2 small { font: 700 calc(var(--u) * .7) var(--deck-mono); color: var(--ink-3); letter-spacing: .04em; }
.news2 p { margin: .45em 0 0; font: 800 calc(var(--u) * 1.35)/1.2 var(--head); letter-spacing: -.02em; }
.news2 .good { border-top: 5px solid var(--mint-soft); }
.news2 .bad { border-top: 5px solid var(--red); }

/* fluxo de um pedido (pipeline com ponto viajando) */
.pipe { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(var(--u) * 1); margin-top: calc(var(--u) * 1.8); }
.pipe::before { content: ''; position: absolute; left: 8%; right: 8%; top: calc(var(--u) * 2.9); height: 3px; background: repeating-linear-gradient(90deg, var(--line-2) 0 10px, transparent 10px 18px); }
.pipe .runner { position: absolute; top: calc(var(--u) * 2.9); left: 8%; width: calc(var(--u) * 1.1); height: calc(var(--u) * 1.1); margin-top: calc(var(--u) * -.55 + 1.5px); border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 calc(var(--u) * .45) rgba(255, 107, 200, .25); opacity: 0; }
.pipe article { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: calc(var(--u) * .45); }
.pipe article > i { width: calc(var(--u) * 5.8); height: calc(var(--u) * 5.8); border-radius: 50%; display: grid; place-items: center; background: var(--paper); border: 2px solid var(--line-2); box-shadow: var(--shadow); font-size: calc(var(--u) * 2.4); color: var(--violet); position: relative; z-index: 1; }
.pipe article.hot > i { background: var(--grad-solid); color: #fff; border: 0; }
.pipe strong { font: 800 calc(var(--u) * 1.2) var(--head); margin-top: calc(var(--u) * .4); }
.pipe span { font-size: calc(var(--u) * 1.08); line-height: 1.3; color: var(--ink-2); }
.pipe code { font: 700 calc(var(--u) * .9) var(--deck-mono); color: var(--violet); background: var(--tint); padding: .15em .5em; border-radius: .4em; }

/* tokens */
.toks { display: flex; flex-wrap: wrap; gap: calc(var(--u) * .35); justify-content: center; font: 700 calc(var(--u) * 2) var(--deck-mono); }
.toks b { padding: .12em .22em; border-radius: .25em; background: var(--c, #E4DAFF); color: #1A1033; white-space: pre; }
.toks b:nth-child(5n+1) { --c: #E4DAFF; }
.toks b:nth-child(5n+2) { --c: #FFD9EF; }
.toks b:nth-child(5n+3) { --c: #CFF3E8; }
.toks b:nth-child(5n+4) { --c: #FFE9C2; }
.toks b:nth-child(5n+5) { --c: #D6E6FF; }
.receipt { width: calc(var(--u) * 26); margin: 0 auto; padding: calc(var(--u) * 1.4) calc(var(--u) * 1.6); background: #FFFDF6; border: 1px solid #E8DFC8; box-shadow: var(--shadow); font: 400 calc(var(--u) * .95) var(--deck-mono); color: #3A3326; text-align: left; transform: rotate(-2deg); }
.receipt header { font-weight: 700; letter-spacing: .12em; text-align: center; border-bottom: 1px dashed #CFC3A6; padding-bottom: .6em; margin-bottom: .6em; }
.receipt div { display: flex; justify-content: space-between; padding: .2em 0; }
.receipt .tot { border-top: 1px dashed #CFC3A6; margin-top: .5em; padding-top: .5em; font-weight: 700; }

/* system prompt: mesmo pedido, respostas diferentes */
.sp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 1.6); }
.sp article { background: var(--paper); border: 1px solid var(--line); border-radius: calc(var(--u) * 1.3); box-shadow: var(--shadow); padding: calc(var(--u) * 1.3); display: flex; flex-direction: column; gap: calc(var(--u) * .8); text-align: left; }
.sp .rule { padding: calc(var(--u) * .8) calc(var(--u) * 1); border-radius: calc(var(--u) * .8); background: var(--ink); color: #fff; font: 400 calc(var(--u) * .9)/1.4 var(--deck-mono); }
.sp .rule.none { background: var(--tint); color: var(--ink-3); }
.sp .rule b { display: block; font-size: .8em; letter-spacing: .12em; opacity: .7; margin-bottom: .3em; }
.msg { align-self: flex-end; max-width: 85%; padding: .6em .9em; border-radius: 1em 1em .25em 1em; background: var(--tint); font-size: calc(var(--u) * 1.02); line-height: 1.35; }
.reply { max-width: 92%; padding: .7em .95em; border-radius: 1em 1em 1em .25em; background: #F4F3F6; font-size: calc(var(--u) * 1.02); line-height: 1.4; color: var(--ink-2); }
.reply.good { background: var(--tint-mint); color: var(--ink); }

/* context window: a mesa de trabalho */
.desk { position: relative; height: calc(var(--u) * 25); }
.desk-top { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 3); height: calc(var(--u) * 17); border-radius: calc(var(--u) * 1.4); background: linear-gradient(#F3E6D3, #E9D6BA); border: 2px solid #D8C19F; box-shadow: var(--shadow); }
.desk-legs { position: absolute; left: 8%; right: 8%; bottom: 0; height: calc(var(--u) * 3); display: flex; justify-content: space-between; }
.desk-legs i { width: calc(var(--u) * 1.2); background: #CBB08A; border-radius: 0 0 4px 4px; }
.paper { position: absolute; width: calc(var(--u) * 11.5); padding: calc(var(--u) * .7) calc(var(--u) * .9); background: #fff; border-radius: calc(var(--u) * .5); box-shadow: 0 4px 14px rgba(60, 40, 10, .18); font: 700 calc(var(--u) * .95)/1.25 var(--head); text-align: left; transform: rotate(var(--r)); }
.paper small { display: block; font: 400 calc(var(--u) * .68) var(--deck-mono); color: var(--ink-3); margin-top: .3em; }
.paper::before { content: ''; display: block; height: 4px; width: 40%; border-radius: 4px; background: var(--c, var(--violet)); margin-bottom: .45em; }
.p1 { left: 4%; bottom: calc(var(--u) * 11.5); --r: -4deg; --c: var(--ink); }
.p2 { left: 28%; bottom: calc(var(--u) * 12.4); --r: 3deg; --c: var(--lilac); }
.p3 { left: 52%; bottom: calc(var(--u) * 11.2); --r: -2deg; --c: var(--mint-soft); }
.p4 { left: 75%; bottom: calc(var(--u) * 12); --r: 5deg; --c: var(--pink); }
.p5 { left: 38%; bottom: calc(var(--u) * 5.2); --r: -1deg; --c: var(--violet); width: calc(var(--u) * 16); }
.meter { margin-top: calc(var(--u) * 1.4); }
.meter header { display: flex; justify-content: space-between; font: 700 calc(var(--u) * .8) var(--deck-mono); color: var(--ink-3); margin-bottom: .5em; }
.meter div { height: calc(var(--u) * 1.3); border-radius: 99px; background: var(--tint); overflow: hidden; }
.meter i { display: block; height: 100%; width: 78%; background: linear-gradient(90deg, var(--mint-soft), var(--amber) 70%, var(--red)); border-radius: 99px; transform-origin: left; }

/* memória: relê o caderno toda vez */
.days { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 1.2); }
.day { background: var(--paper); border: 1px solid var(--line); border-radius: calc(var(--u) * 1.2); box-shadow: var(--shadow); overflow: hidden; text-align: left; }
.day header { padding: calc(var(--u) * .6) calc(var(--u) * 1); background: var(--grad-solid); color: #fff; font: 700 calc(var(--u) * .78) var(--deck-mono); letter-spacing: .1em; text-transform: uppercase; }
.day div { padding: calc(var(--u) * 1) calc(var(--u) * 1.1); display: grid; gap: calc(var(--u) * .5); }
.day .read { display: flex; align-items: center; gap: .5em; font: 700 calc(var(--u) * .95) var(--head); }
.day .read i { color: var(--violet); font-size: 1.3em; }
.day .bar { height: calc(var(--u) * .5); border-radius: 99px; background: var(--tint); overflow: hidden; }
.day .bar i { display: block; height: 100%; background: var(--violet); border-radius: 99px; transform-origin: left; }
.day p { margin: 0; font-size: calc(var(--u) * .95); color: var(--ink-2); line-height: 1.35; }

/* não determinismo: três respostas */
.fan { display: grid; gap: calc(var(--u) * 1); }
.fan article { padding: calc(var(--u) * 1.1) calc(var(--u) * 1.4); background: var(--paper); border: 1px solid var(--line); border-radius: calc(var(--u) * 1.2); box-shadow: var(--shadow); text-align: left; transform: translateX(var(--x)) rotate(var(--r)); }
.fan article:nth-child(1) { --x: calc(var(--u) * -1.5); --r: -1.2deg; }
.fan article:nth-child(2) { --x: calc(var(--u) * 1.5); --r: .8deg; border-color: var(--violet); }
.fan article:nth-child(3) { --x: calc(var(--u) * -.5); --r: -.6deg; }
.fan small { font: 700 calc(var(--u) * .75) var(--deck-mono); color: var(--violet); letter-spacing: .1em; }
.fan p { margin: .4em 0 0; font-size: calc(var(--u) * 1.15); line-height: 1.4; }

/* alucinação: prova com resposta inventada */
.exam { position: relative; width: calc(var(--u) * 32); margin: 0 auto; padding: calc(var(--u) * 2) calc(var(--u) * 2.2); background: #fff; border-radius: calc(var(--u) * .6); box-shadow: var(--shadow); text-align: left; background-image: repeating-linear-gradient(transparent 0 calc(var(--u) * 2.35), #E6EEF9 calc(var(--u) * 2.35) calc(var(--u) * 2.45)); border-left: 4px solid #F4B8C0; }
.exam .q { font: 700 calc(var(--u) * 1.1)/1.35 var(--head); }
.exam .a { margin-top: calc(var(--u) * 1); font: 400 calc(var(--u) * 1.5)/1.35 'Space Mono', monospace; color: #1F3FA8; }
.exam .a b { background: #FFF3B0; }
.stamp { position: absolute; right: calc(var(--u) * -2); bottom: calc(var(--u) * -1.5); padding: .35em .8em; border: 4px solid var(--red); border-radius: .4em; color: var(--red); font: 900 calc(var(--u) * 1.6) var(--head); letter-spacing: .04em; text-transform: uppercase; transform: rotate(-12deg); background: rgba(255, 255, 255, .85); }

/* knowledge cutoff: jornais até uma data */
.papers { display: grid; grid-template-columns: repeat(4, auto) calc(var(--u) * 7) auto; gap: calc(var(--u) * 1); align-items: end; justify-content: center; }
.papers article { width: calc(var(--u) * 12.5); height: calc(var(--u) * 16); padding: calc(var(--u) * .9); background: #fff; border: 1px solid var(--line); border-radius: calc(var(--u) * .4); box-shadow: var(--shadow); text-align: left; display: flex; flex-direction: column; gap: .4em; }
.papers article small { font: 700 calc(var(--u) * .85) var(--deck-mono); color: var(--ink-3); }
.papers article strong { font: 900 calc(var(--u) * 1.3)/1.1 var(--head); }
.papers article i.l { display: block; height: calc(var(--u) * .35); border-radius: 9px; background: #E6E3EA; }
.papers article i.l:nth-of-type(2n) { width: 70%; }
.papers .cut { border: 2px solid var(--ink); }
.papers .cut small { color: var(--ink); }
.papers .gap { height: calc(var(--u) * 16); display: grid; place-items: center; }
.papers .gap span { font: 700 calc(var(--u) * .85) var(--deck-mono); color: var(--ink-3); text-align: center; }
.papers .gap i { display: block; width: 100%; height: 3px; background: repeating-linear-gradient(90deg, var(--red) 0 8px, transparent 8px 14px); }
.papers .today { border: 2px dashed var(--mint); background: var(--tint-mint); }
.papers .today small { color: var(--mint); }
.cut-flag { display: inline-block; margin-top: auto; padding: .25em .55em; border-radius: .3em; background: var(--ink); color: #fff; font: 700 calc(var(--u) * .8) var(--deck-mono); }

/* modelo x produto: carro e motor */
.cars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 1.4); }
.car { background: var(--paper); border: 1px solid var(--line); border-radius: calc(var(--u) * 1.4); box-shadow: var(--shadow); padding: calc(var(--u) * 2.2) calc(var(--u) * 1.5); text-align: center; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .6); }
.car img { height: calc(var(--u) * 5); width: auto; }
.car > i { font-size: calc(var(--u) * 4.4); color: var(--ink); line-height: 1; }
.car strong { font: 800 calc(var(--u) * 1.9) var(--head); }
.car small { font: 400 calc(var(--u) * .95) var(--deck-mono); color: var(--ink-3); }
.engine { display: flex; align-items: center; gap: .5em; padding: .55em 1em; border-radius: 999px; background: var(--ink); color: #fff; font: 700 calc(var(--u) * 1.05) var(--deck-mono); overflow: hidden; }
.engine i { color: var(--mint-soft); }
.engine .swap { display: inline-grid; height: 1.3em; overflow: hidden; }
.engine .swap span { display: block; line-height: 1.3em; }

/* reasoning: dial rápido x pensa antes */
.dial { position: relative; margin-top: calc(var(--u) * 1); }
.dial-track { position: relative; height: calc(var(--u) * 1.3); border-radius: 99px; background: linear-gradient(90deg, var(--mint-soft), var(--lilac), var(--pink)); }
.dial-knob { position: absolute; top: 50%; left: 72%; width: calc(var(--u) * 3); height: calc(var(--u) * 3); margin: calc(var(--u) * -1.5) 0 0 calc(var(--u) * -1.5); border-radius: 50%; background: #fff; border: 4px solid var(--violet); box-shadow: var(--shadow); }
.dial-ends { display: flex; justify-content: space-between; margin-top: calc(var(--u) * 1.1); text-align: left; gap: calc(var(--u) * 2); }
.dial-ends div:last-child { text-align: right; }
.dial-ends strong { display: block; font: 800 calc(var(--u) * 1.35) var(--head); }
.dial-ends span { font-size: calc(var(--u) * 1); color: var(--ink-2); }

/* treinar x usar */
.vs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: calc(var(--u) * 1.4); align-items: stretch; }
.vs > i { align-self: center; font-size: calc(var(--u) * 2.2); color: var(--ink-3); }
.vs article { background: var(--paper); border: 1px solid var(--line); border-radius: calc(var(--u) * 1.4); box-shadow: var(--shadow); padding: calc(var(--u) * 1.8); text-align: left; display: flex; flex-direction: column; gap: calc(var(--u) * .6); }
.vs article > i { font-size: calc(var(--u) * 3); color: var(--violet); }
.vs strong { font: 800 calc(var(--u) * 1.7) var(--head); }
.vs p { margin: 0; font-size: calc(var(--u) * 1.05); line-height: 1.4; color: var(--ink-2); }
.vs .tag { align-self: flex-start; margin-top: auto; padding: .35em .75em; border-radius: 999px; background: var(--tint); color: var(--violet); font: 700 calc(var(--u) * .78) var(--deck-mono); }
.vs article.hot { background: var(--ink); color: #fff; border: 0; }
.vs article.hot p { color: rgba(255, 255, 255, .78); }
.vs article.hot > i { color: var(--mint-soft); }
.vs article.hot .tag { background: rgba(255, 255, 255, .12); color: #fff; }
.tick { font: 700 calc(var(--u) * 1.3) var(--deck-mono); color: var(--mint-soft); }

/* recapitulação numerada */
.recap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 1); text-align: left; }
.recap article { display: grid; grid-template-columns: auto 1fr; gap: calc(var(--u) * .9); align-items: start; padding: calc(var(--u) * 1.2); background: var(--paper); border: 1px solid var(--line); border-radius: calc(var(--u) * 1.1); box-shadow: var(--shadow); }
.recap b { width: calc(var(--u) * 2.4); height: calc(var(--u) * 2.4); border-radius: 50%; display: grid; place-items: center; background: var(--tint); color: var(--violet); font: 700 calc(var(--u) * .95) var(--deck-mono); }
.recap strong { display: block; font: 800 calc(var(--u) * 1.4)/1.15 var(--head); }
.recap span { display: block; margin-top: .3em; font: 700 calc(var(--u) * .9) var(--deck-mono); color: var(--violet); }

/* banquinho de três pernas (os 3 pilares) */
.stool { position: relative; width: calc(var(--u) * 34); height: calc(var(--u) * 24); margin: 0 auto; }
.stool-seat { position: absolute; left: 6%; right: 6%; top: 10%; height: calc(var(--u) * 5); border-radius: 50%; background: var(--grad-solid); display: grid; place-items: center; color: #fff; font: 900 calc(var(--u) * 1.9) var(--head); letter-spacing: -.02em; box-shadow: 0 calc(var(--u) * .9) 0 #3E1FA0; z-index: 2; transform-origin: 18% 100%; transition: transform .9s cubic-bezier(.5, -0.4, .3, 1.4); }
.stool-legs { position: absolute; inset: 30% 12% 12%; display: flex; justify-content: space-between; align-items: stretch; }
.leg { position: relative; width: calc(var(--u) * 1.6); background: linear-gradient(90deg, #2A2438, #4A4060); border-radius: 0 0 8px 8px; transform-origin: top; transition: transform .7s var(--deck-ease), opacity .7s; }
.leg:nth-child(1) { transform: rotate(14deg); }
.leg:nth-child(3) { transform: rotate(-14deg); }
.leg:nth-child(2) { width: calc(var(--u) * 1.4); opacity: .9; }
.leg span { position: absolute; top: 108%; left: 50%; transform: translateX(-50%) rotate(var(--rr, 0deg)); white-space: nowrap; padding: .35em .8em; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); font: 800 calc(var(--u) * 1.1) var(--head); color: var(--ink); }
.leg:nth-child(1) span { --rr: -14deg; }
.leg:nth-child(3) span { --rr: 14deg; }
.stool-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--line-2); border-radius: 3px; }
.slide:has(.stool-trigger.step-on) .leg:nth-child(3) { transform: rotate(-14deg) translateY(40%) rotate(40deg); opacity: .15; }
.slide:has(.stool-trigger.step-on) .stool-seat { transform: rotate(9deg) translateY(12%); }
.stool-trigger { font: 700 calc(var(--u) * 1.15)/1.35 var(--head); color: var(--red); margin-top: calc(var(--u) * 5.5); }

/* dados espalhados */
.scatter { position: relative; height: calc(var(--u) * 26); }
.scatter .core { position: absolute; left: 50%; top: 50%; width: calc(var(--u) * 8); height: calc(var(--u) * 8); margin: calc(var(--u) * -4) 0 0 calc(var(--u) * -4); border-radius: 50%; background: var(--grad-solid); color: #fff; display: grid; place-items: center; text-align: center; font: 900 calc(var(--u) * 1.5)/1 var(--head); box-shadow: 0 0 0 calc(var(--u) * 1.2) rgba(112, 64, 246, .1), 0 0 0 calc(var(--u) * 2.4) rgba(112, 64, 246, .06); z-index: 2; }
.scatter svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.scatter svg line { stroke: var(--line-2); stroke-width: 2; stroke-dasharray: 6 8; }
.scatter svg line.ok { stroke: var(--violet); stroke-dasharray: none; stroke-width: 3; }
.src-node { position: absolute; display: flex; align-items: center; gap: .5em; padding: .55em .95em; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); font: 700 calc(var(--u) * 1) var(--head); white-space: nowrap; transform: translate(-50%, -50%); z-index: 1; }
.src-node i { font-size: 1.35em; color: var(--ink-3); }
.src-node.ok { border-color: var(--violet); }
.src-node.ok i { color: var(--violet); }

/* API = garçom, MCP = tomada padrão */
.metaphor { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 1.6); }
.metaphor article { background: var(--paper); border: 1px solid var(--line); border-radius: calc(var(--u) * 1.4); box-shadow: var(--shadow); padding: calc(var(--u) * 1.6); text-align: left; display: flex; flex-direction: column; gap: calc(var(--u) * .7); }
.metaphor p { margin: 0; font-size: calc(var(--u) * 1.05); line-height: 1.42; color: var(--ink-2); }
.route { position: relative; display: flex; align-items: center; justify-content: space-between; height: calc(var(--u) * 7); margin: calc(var(--u) * .4) 0; padding: 0 calc(var(--u) * .4); }
.route::before { content: ''; position: absolute; left: 12%; right: 12%; top: 50%; height: 2px; background: repeating-linear-gradient(90deg, var(--line-2) 0 8px, transparent 8px 14px); }
.route > span { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: .3em; font: 700 calc(var(--u) * .78) var(--deck-mono); color: var(--ink-3); }
.route > span i { width: calc(var(--u) * 4.2); height: calc(var(--u) * 4.2); border-radius: 50%; display: grid; place-items: center; background: var(--tint); color: var(--violet); font-size: calc(var(--u) * 2); }
.route .mover { position: absolute; left: 12%; top: 50%; z-index: 2; width: calc(var(--u) * 2.6); height: calc(var(--u) * 2.6); margin-top: calc(var(--u) * -1.3); border-radius: 50%; background: var(--violet); color: #fff; display: grid; place-items: center; font-size: calc(var(--u) * 1.3); }
.plugs { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: calc(var(--u) * 1); height: calc(var(--u) * 7); margin: calc(var(--u) * .4) 0; }
.plugs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--u) * .35); }
.plugs li { display: flex; align-items: center; gap: .5em; font: 700 calc(var(--u) * .85) var(--head); }
.plugs li i { color: var(--mint); }
.plugs li::after { content: ''; flex: 1; height: 2px; background: linear-gradient(90deg, var(--mint-soft), var(--violet)); transform-origin: left; }
.plugs .socket { width: calc(var(--u) * 6); height: calc(var(--u) * 6); border-radius: calc(var(--u) * 1.4); background: var(--ink); color: #fff; display: grid; place-items: center; text-align: center; font: 900 calc(var(--u) * 1.3)/1 var(--head); }
.plugs .socket small { display: block; font: 400 calc(var(--u) * .6) var(--deck-mono); opacity: .7; margin-top: .3em; }

/* régua: da porta da frente à janela */
.ruler { margin-top: calc(var(--u) * 1.4); }
.ruler-bar { height: calc(var(--u) * 1); border-radius: 99px; background: linear-gradient(90deg, var(--mint), var(--amber) 65%, var(--red)); }
.ruler-marks { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(var(--u) * .9); margin-top: calc(var(--u) * 1); }
.ruler-marks article { position: relative; padding: calc(var(--u) * 1.1); background: var(--paper); border: 1px solid var(--line); border-radius: calc(var(--u) * 1); box-shadow: var(--shadow); text-align: left; }
.ruler-marks article::before { content: ''; position: absolute; top: calc(var(--u) * -1.55); left: calc(var(--u) * 1.3); width: 3px; height: calc(var(--u) * 1.2); background: var(--ink); }
.ruler-marks strong { display: block; font: 800 calc(var(--u) * 1.15) var(--head); }
.ruler-marks code { display: inline-block; margin: .35em 0; font: 700 calc(var(--u) * .7) var(--deck-mono); color: var(--violet); }
.ruler-marks span { display: block; font-size: calc(var(--u) * .9); color: var(--ink-2); line-height: 1.35; }
.ruler-ends { display: flex; justify-content: space-between; font: 700 calc(var(--u) * .8) var(--deck-mono); margin-top: calc(var(--u) * .6); }
.ruler-ends span:first-child { color: var(--mint); }
.ruler-ends span:last-child { color: var(--red); }

/* esteira: IA acelera o que existe */
.belt { position: relative; height: calc(var(--u) * 16); margin-top: calc(var(--u) * 1); }
.belt-track { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 2.2); height: calc(var(--u) * 2.4); border-radius: 99px; background: repeating-linear-gradient(90deg, #3A3447 0 calc(var(--u)*1.4), #2A2536 calc(var(--u)*1.4) calc(var(--u)*2.8)); box-shadow: inset 0 3px 6px rgba(0, 0, 0, .3); }
.belt-wheels { position: absolute; left: 1%; right: 1%; bottom: calc(var(--u) * .6); display: flex; justify-content: space-between; }
.belt-wheels i { width: calc(var(--u) * 2.2); height: calc(var(--u) * 2.2); border-radius: 50%; border: 4px solid #3A3447; background: conic-gradient(#3A3447 0 25%, #D9D3E5 0 50%, #3A3447 0 75%, #D9D3E5 0); }
.boxes { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 4.6); height: calc(var(--u) * 5); overflow: hidden; }
.boxes i { position: absolute; bottom: 0; left: var(--x); width: calc(var(--u) * 4.4); height: calc(var(--u) * 4.4); border-radius: calc(var(--u) * .5); background: #E8D2A6; border: 2px solid #C9AE7A; transform: rotate(var(--rot, 0deg)); }
.boxes i::after { content: ''; position: absolute; left: 45%; top: 0; bottom: 0; width: 10%; background: #C9AE7A; }
.boxes i.bad { background: #FFD6DA; border-color: var(--red); }
.belt-label { position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: flex; gap: calc(var(--u) * .8); }
.belt-label span { padding: .45em .9em; border-radius: 999px; font: 700 calc(var(--u) * .85) var(--deck-mono); background: var(--tint-mint); color: var(--mint); }
.belt-label span.fast { background: #FFE3E6; color: var(--red); }

/* chat x agente */
.cva { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: calc(var(--u) * 1.6); align-items: stretch; }
.cva > article { background: var(--paper); border: 1px solid var(--line); border-radius: calc(var(--u) * 1.4); box-shadow: var(--shadow); padding: calc(var(--u) * 1.6); display: flex; flex-direction: column; gap: calc(var(--u) * .8); text-align: left; }
.cva h3 { margin: 0; font: 800 calc(var(--u) * 1.6) var(--head); display: flex; align-items: center; gap: .45em; }
.cva h3 i { color: var(--violet); }
.cva p { margin: 0; font-size: calc(var(--u) * 1.02); line-height: 1.4; color: var(--ink-2); }
.cva .end { align-self: center; margin-top: auto; padding: .4em .9em; border-radius: 999px; background: #F1F0F4; font: 700 calc(var(--u) * .8) var(--deck-mono); color: var(--ink-3); }
.loop { position: relative; width: calc(var(--u) * 21); height: calc(var(--u) * 21); margin: calc(var(--u) * .4) auto 0; }
.loop-ring { position: absolute; inset: 14%; border-radius: 50%; border: 3px dashed var(--line-2); }
.loop-spin { position: absolute; inset: 14%; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 72%, rgba(112, 64, 246, .0) 72%, rgba(112, 64, 246, .55) 100%); mask: radial-gradient(circle, transparent 62%, #000 63%); }
.loop-core { position: absolute; inset: 34%; border-radius: 50%; background: var(--grad-solid); color: #fff; display: grid; place-items: center; text-align: center; font: 800 calc(var(--u) * 1.05)/1.1 var(--head); }
.loop-node { position: absolute; transform: translate(-50%, -50%); padding: .45em .8em; border-radius: 999px; background: var(--paper); border: 2px solid var(--violet); box-shadow: var(--shadow); font: 800 calc(var(--u) * .95) var(--head); white-space: nowrap; }
.loop-node:nth-of-type(1) { left: 50%; top: 8%; }
.loop-node:nth-of-type(2) { left: 94%; top: 50%; }
.loop-node:nth-of-type(3) { left: 50%; top: 92%; }
.loop-node:nth-of-type(4) { left: 6%; top: 50%; }

/* anatomia do agente */
.anat { position: relative; height: calc(var(--u) * 30); }
.anat svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.anat svg line { stroke: var(--line-2); stroke-width: 2; }
.anat-core { position: absolute; left: 50%; top: 50%; width: calc(var(--u) * 9.5); height: calc(var(--u) * 9.5); transform: translate(-50%, -50%); border-radius: 50%; background: var(--grad-solid); color: #fff; display: grid; place-items: center; text-align: center; box-shadow: 0 0 0 calc(var(--u) * 1.2) rgba(112, 64, 246, .1); }
.anat-core i { font-size: calc(var(--u) * 3.4); display: block; }
.anat-core b { font: 900 calc(var(--u) * 1.2) var(--head); }
.part { position: absolute; width: calc(var(--u) * 21); transform: translate(-50%, -50%); padding: calc(var(--u) * 1) calc(var(--u) * 1.2); background: var(--paper); border: 1px solid var(--line); border-radius: calc(var(--u) * 1.1); box-shadow: var(--shadow); display: grid; grid-template-columns: auto 1fr; gap: 0 calc(var(--u) * .9); align-items: center; text-align: left; }
.part > i { grid-row: span 3; width: calc(var(--u) * 3.4); height: calc(var(--u) * 3.4); border-radius: calc(var(--u) * .9); display: grid; place-items: center; background: var(--tint); color: var(--violet); font-size: calc(var(--u) * 1.8); }
.part code { font: 700 calc(var(--u) * .85) var(--deck-mono); color: var(--violet); }
.part strong { font: 800 calc(var(--u) * 1.2) var(--head); }
.part span { font-size: calc(var(--u) * .85); line-height: 1.3; color: var(--ink-2); }
.part.a { left: 16%; top: 14%; } .part.b { left: 84%; top: 14%; }
.part.c { left: 12%; top: 50%; } .part.d { left: 88%; top: 50%; }
.part.e { left: 16%; top: 86%; } .part.f { left: 84%; top: 86%; }

/* skills: gaveta de receitas */
.drawer { position: relative; height: calc(var(--u) * 24); }
.drawer-box { position: absolute; left: 4%; right: 4%; bottom: 0; height: calc(var(--u) * 8); border-radius: calc(var(--u) * 1); background: linear-gradient(#D9CDF7, #C4B3F2); border: 2px solid #A993E8; box-shadow: var(--shadow); display: grid; place-items: center; }
.drawer-box span { width: calc(var(--u) * 6); height: calc(var(--u) * 1); border-radius: 99px; background: #8E74E0; }
.rcard { position: absolute; bottom: calc(var(--u) * 6.4); width: calc(var(--u) * 12); padding: calc(var(--u) * .8) calc(var(--u) * 1); background: #fff; border: 1px solid var(--line); border-radius: calc(var(--u) * .6); box-shadow: 0 3px 10px rgba(40, 20, 90, .12); font: 800 calc(var(--u) * .95)/1.2 var(--head); text-align: left; }
.rcard small { display: block; font: 400 calc(var(--u) * .65) var(--deck-mono); color: var(--ink-3); margin-top: .3em; }
.rcard.r1 { left: 8%; transform: rotate(-3deg); }
.rcard.r2 { left: 30%; transform: rotate(2deg); }
.rcard.r3 { left: 52%; transform: rotate(-1deg); }
.rcard.r4 { left: 72%; transform: rotate(3deg); }
.rcard.pick { z-index: 3; bottom: calc(var(--u) * 12); transform: rotate(0deg) scale(1.12); border: 2px solid var(--violet); }
.skillfile { margin-top: calc(var(--u) * 1.2); padding: calc(var(--u) * 1.2) calc(var(--u) * 1.4); border-radius: calc(var(--u) * 1); background: #16121F; color: #E9E3FF; font: 400 calc(var(--u) * .88)/1.6 var(--deck-mono); text-align: left; box-shadow: var(--shadow); }
.skillfile .k { color: #7FE3C8; }
.skillfile .c { color: #9C92B5; }
.skillfile .t { color: #FFB5E0; }

/* tipos de agente */
.types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 1.1); }
.types article { background: var(--paper); border: 1px solid var(--line); border-radius: calc(var(--u) * 1.2); box-shadow: var(--shadow); padding: calc(var(--u) * 1.3) calc(var(--u) * 1.4); text-align: left; display: grid; grid-template-columns: auto 1fr; gap: calc(var(--u) * .3) calc(var(--u) * 1); align-items: start; }
.types article > i { grid-row: span 3; width: calc(var(--u) * 3.6); height: calc(var(--u) * 3.6); border-radius: calc(var(--u) * 1); display: grid; place-items: center; background: var(--tint); color: var(--violet); font-size: calc(var(--u) * 2); }
.types strong { font: 800 calc(var(--u) * 1.25)/1.1 var(--head); }
.types strong code { font: 700 .62em var(--deck-mono); color: var(--violet); margin-left: .35em; letter-spacing: 0; }
.types p { margin: 0; font-size: calc(var(--u) * .95); line-height: 1.35; color: var(--ink-2); }
.types small { font: 400 calc(var(--u) * .72) var(--deck-mono); color: var(--ink-3); line-height: 1.35; }

/* níveis de autonomia */
.levels { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--u) * 1.1); margin-top: calc(var(--u) * 1.4); }
.levels::before { content: ''; position: absolute; left: 0; right: 0; top: calc(var(--u) * 1.2); height: calc(var(--u) * .7); border-radius: 99px; background: linear-gradient(90deg, #E4DAFF, var(--violet) 60%, var(--pink)); }
.levels .car-dot { position: absolute; top: calc(var(--u) * .1); left: 36%; width: calc(var(--u) * 2.9); height: calc(var(--u) * 2.9); margin-left: calc(var(--u) * -1.45); border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: calc(var(--u) * 1.5); z-index: 2; box-shadow: var(--shadow); }
.levels article { margin-top: calc(var(--u) * 3.8); background: var(--paper); border: 1px solid var(--line); border-radius: calc(var(--u) * 1.2); box-shadow: var(--shadow); padding: calc(var(--u) * 1.3); text-align: left; display: flex; flex-direction: column; gap: calc(var(--u) * .45); }
.levels b { font: 700 calc(var(--u) * .78) var(--deck-mono); color: var(--violet); letter-spacing: .08em; }
.levels strong { font: 800 calc(var(--u) * 1.3)/1.1 var(--head); }
.levels span { font-size: calc(var(--u) * .95); line-height: 1.35; color: var(--ink-2); }
.levels small { margin-top: auto; padding-top: .5em; font: 400 calc(var(--u) * .72) var(--deck-mono); color: var(--ink-3); }
.levels article.hot { border: 2px solid var(--violet); background: var(--tint); }

/* gráfico: tarefas mais longas */
.chart { position: relative; width: 100%; }
.chart svg { width: 100%; height: auto; overflow: visible; }
.chart .grid-l { stroke: var(--line); stroke-width: 1; }
.chart .curve { fill: none; stroke: url(#cg); stroke-width: 5; stroke-linecap: round; }
.chart .area { fill: url(#ca); }
.chart .pt { fill: #fff; stroke: var(--violet); stroke-width: 4; }
.chart text { font-family: 'Space Mono', monospace; font-size: 15px; fill: var(--ink-3); }
.chart text.lbl { font-family: 'Epilogue', sans-serif; font-weight: 800; font-size: 20px; fill: var(--ink); }

/* escada de maturidade */
.stairs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--u) * .9); align-items: end; }
.stairs article { position: relative; padding: calc(var(--u) * 1.2); border-radius: calc(var(--u) * 1.1) calc(var(--u) * 1.1) 0 0; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); text-align: left; display: flex; flex-direction: column; gap: calc(var(--u) * .45); }
.stairs article:nth-child(1) { min-height: calc(var(--u) * 12); }
.stairs article:nth-child(2) { min-height: calc(var(--u) * 16); background: #F5F0FF; }
.stairs article:nth-child(3) { min-height: calc(var(--u) * 20); background: #ECE3FF; }
.stairs article:nth-child(4) { min-height: calc(var(--u) * 24); background: var(--grad-solid); color: #fff; border: 0; }
.stairs b { font: 700 calc(var(--u) * .78) var(--deck-mono); color: var(--violet); }
.stairs strong { font: 800 calc(var(--u) * 1.35)/1.1 var(--head); }
.stairs span { font-size: calc(var(--u) * .92); line-height: 1.35; color: var(--ink-2); }
.stairs article:nth-child(4) b, .stairs article:nth-child(4) span { color: rgba(255, 255, 255, .9); }
.stairs .climber { position: absolute; top: calc(var(--u) * -2.6); left: calc(var(--u) * 1.2); width: calc(var(--u) * 2.2); height: calc(var(--u) * 2.2); border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 calc(var(--u) * .4) rgba(255, 107, 200, .25); opacity: 0; }
.stairs article.you .climber { opacity: 1; }
.stairs .you-tag { position: absolute; top: calc(var(--u) * -2.5); left: calc(var(--u) * 3.8); font: 700 calc(var(--u) * .72) var(--deck-mono); color: var(--pink-ink); white-space: nowrap; }

/* ilhas desconectadas */
.islands { position: relative; height: calc(var(--u) * 20); }
.island { position: absolute; transform: translate(-50%, -50%); padding: calc(var(--u) * 1.1) calc(var(--u) * 1.3); background: var(--paper); border: 1px solid var(--line); border-radius: calc(var(--u) * 1.4); box-shadow: var(--shadow); text-align: center; width: calc(var(--u) * 15); }
.island i { font-size: calc(var(--u) * 2.4); color: var(--violet); }
.island strong { display: block; font: 800 calc(var(--u) * 1.1)/1.2 var(--head); margin-top: .3em; }
.island small { display: block; font: 400 calc(var(--u) * .72) var(--deck-mono); color: var(--ink-3); margin-top: .3em; }
.island.i1 { left: 14%; top: 30%; } .island.i2 { left: 38%; top: 72%; } .island.i3 { left: 62%; top: 28%; } .island.i4 { left: 86%; top: 70%; }
.islands svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.islands line { stroke: var(--red); stroke-width: 2; stroke-dasharray: 5 9; opacity: .6; }
.islands .x { position: absolute; transform: translate(-50%, -50%); width: calc(var(--u) * 2); height: calc(var(--u) * 2); border-radius: 50%; background: #FFE3E6; color: var(--red); display: grid; place-items: center; font-size: calc(var(--u) * 1.1); }

/* pessoas: 6 entregam como 12 */
.crowd { display: flex; justify-content: center; gap: calc(var(--u) * .6); flex-wrap: wrap; max-width: calc(var(--u) * 60); margin: calc(var(--u) * 1.6) auto 0; }
.crowd i { font-size: calc(var(--u) * 4.4); color: var(--violet); }
.crowd i.ghost { color: var(--lilac); opacity: .55; }
.crowd .plus { display: grid; place-items: center; font: 900 calc(var(--u) * 3) var(--head); color: var(--ink-3); }

/* papéis: executor para revisor */
.shift { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: calc(var(--u) * 1.4); align-items: center; }
.shift article { background: var(--paper); border: 1px solid var(--line); border-radius: calc(var(--u) * 1.4); box-shadow: var(--shadow); padding: calc(var(--u) * 1.6); text-align: left; }
.shift article > i { font-size: calc(var(--u) * 3); color: var(--ink-3); }
.shift article.hot > i { color: var(--violet); }
.shift strong { display: block; font: 800 calc(var(--u) * 1.7) var(--head); margin: .3em 0; }
.shift ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .45em; font-size: calc(var(--u) * 1.02); color: var(--ink-2); }
.shift li::before { content: '•'; color: var(--violet); margin-right: .5em; }
.shift .arrow { font-size: calc(var(--u) * 3); color: var(--violet); }

/* chat mock: pedido ruim x bom */
.asks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 1.6); }
.asks article { background: var(--paper); border: 1px solid var(--line); border-radius: calc(var(--u) * 1.4); box-shadow: var(--shadow); padding: calc(var(--u) * 1.4); display: flex; flex-direction: column; gap: calc(var(--u) * .8); text-align: left; }
.asks header { display: flex; align-items: center; gap: .5em; font: 700 calc(var(--u) * .8) var(--deck-mono); letter-spacing: .08em; text-transform: uppercase; }
.asks .bad header { color: var(--red); }
.asks .good header { color: var(--mint); }

/* forças x fraquezas */
.pros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 1.6); text-align: left; }
.pros article { background: var(--paper); border: 1px solid var(--line); border-radius: calc(var(--u) * 1.4); box-shadow: var(--shadow); padding: calc(var(--u) * 1.5) calc(var(--u) * 1.7); }
.pros h3 { margin: 0 0 calc(var(--u) * .8); font: 800 calc(var(--u) * 1.6) var(--head); display: flex; align-items: center; gap: .4em; }
.pros .ok h3 i { color: var(--mint); }
.pros .no h3 i { color: var(--red); }
.pros ul { margin: 0; padding: 0; list-style: none; display: grid; gap: calc(var(--u) * .65); }
.pros li { font-size: calc(var(--u) * 1.05); line-height: 1.35; color: var(--ink-2); padding-left: 1.3em; position: relative; }
.pros li::before { content: ''; position: absolute; left: 0; top: .5em; width: .6em; height: .6em; border-radius: 50%; background: var(--c, var(--mint)); }
.pros .no li { --c: var(--red); }

/* ferramentas */
.tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--u) * 1); }
.tools article { background: var(--paper); border: 1px solid var(--line); border-radius: calc(var(--u) * 1.1); box-shadow: var(--shadow); padding: calc(var(--u) * 1.1) calc(var(--u) * 1.2); text-align: left; }
.tools small { display: block; font: 700 calc(var(--u) * .68) var(--deck-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--violet); margin-bottom: calc(var(--u) * .7); }
.tools div { display: flex; flex-wrap: wrap; gap: calc(var(--u) * .5); }
.tools span { display: inline-flex; align-items: center; gap: .45em; padding: .35em .65em .35em .4em; border-radius: 999px; background: #F5F3F8; font: 700 calc(var(--u) * .9) var(--head); }
.tools span img { width: 1.5em; height: 1.5em; border-radius: .35em; object-fit: contain; background: #fff; }

/* glossário */
.gloss { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(var(--u) * .9); text-align: left; }
.gloss article { background: var(--paper); border: 1px solid var(--line); border-radius: calc(var(--u) * 1); box-shadow: var(--shadow); padding: calc(var(--u) * 1) calc(var(--u) * 1.1); }
.gloss code { display: block; font: 700 calc(var(--u) * 1) var(--deck-mono); color: var(--violet); }
.gloss span { display: block; margin-top: .4em; font-size: calc(var(--u) * .86); line-height: 1.35; color: var(--ink-2); }

/* ---------- blocos do Paulo (fotos e provas) ---------- */
.duo { margin-top: calc(var(--u) * 2.4) !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 3); width: calc(var(--u) * 56); margin: 0 auto; }
.duo figure { margin: 0; text-align: center; }
.duo img { width: 100%; height: calc(var(--u) * 28); object-fit: contain; display: block; }
.duo strong { display: block; margin-top: calc(var(--u) * .8); font: 800 calc(var(--u) * 1.8) var(--head); letter-spacing: -.02em; }
.duo span { display: block; font: 700 calc(var(--u) * .78) var(--deck-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-top: .3em; }
.turns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--u) * 1.2); }
.turns article { background: var(--paper); border: 1px solid var(--line); border-radius: calc(var(--u) * 1.3); box-shadow: var(--shadow); padding: calc(var(--u) * 1.6); min-height: calc(var(--u) * 20); display: flex; flex-direction: column; text-align: left; }
.turns b { font: 900 calc(var(--u) * 3.6)/.9 var(--head); letter-spacing: -.05em; color: var(--violet); margin-bottom: auto; }
.turns strong { font: 800 calc(var(--u) * 1.45)/1.1 var(--head); margin-top: calc(var(--u) * 1); }
.turns span { font-size: calc(var(--u) * 1); line-height: 1.4; color: var(--ink-2); margin-top: .5em; }
.turns article:last-child { background: var(--grad-solid); color: #fff; border: 0; }
.turns article:last-child b, .turns article:last-child span { color: rgba(255, 255, 255, .92); }
.photo-one img { max-height: calc(var(--u) * 34); max-width: 100%; border-radius: calc(var(--u) * 1.4); box-shadow: var(--shadow); display: block; margin: 0 auto; }
.photo-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 1.4); }
.photo-two img { width: 100%; height: calc(var(--u) * 30); object-fit: contain; border-radius: calc(var(--u) * 1.2); display: block; }
.clients { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--u) * 1); }
.clients figure { margin: 0; width: calc(var(--u) * 12.4); text-align: center; }
.clients img { width: 100%; height: calc(var(--u) * 13); object-fit: cover; border-radius: calc(var(--u) * 1); display: block; box-shadow: var(--shadow); }
.clients figcaption { margin-top: .5em; font: 800 calc(var(--u) * .88)/1.2 var(--head); }
.logos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: calc(var(--u) * 1); }
.logos figure { margin: 0; text-align: center; }
.logos div { height: calc(var(--u) * 14); display: grid; place-items: center; padding: calc(var(--u) * .9); background: var(--paper); border: 1px solid var(--line); border-radius: calc(var(--u) * 1.2); box-shadow: var(--shadow); }
.logos img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: calc(var(--u) * .7); }
.logos figcaption { margin-top: .6em; font: 800 calc(var(--u) * .9)/1.2 var(--head); }
.arms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 1.2); }
.arms-bridge { margin-top: calc(var(--u) * 1.4); padding: calc(var(--u) * 1) calc(var(--u) * 1.4); border-radius: calc(var(--u) * 1.1); background: var(--grad-solid); color: #fff; display: flex; align-items: center; justify-content: center; gap: .7em; font: 800 calc(var(--u) * 1.4) var(--head); }
.growth { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 4); margin-top: calc(var(--u) * 2); }
.growth div { text-align: left; }
.growth strong { display: block; font: 900 calc(var(--u) * 7)/.85 var(--head); letter-spacing: -.06em; }
.growth span { display: block; font: 800 calc(var(--u) * 1.5) var(--head); margin-top: .3em; }
.growth p { margin: .3em 0 0; font-size: calc(var(--u) * 1); color: var(--ink-2); }
.growth > i { font-size: calc(var(--u) * 4); color: var(--violet); }
.growth .now strong { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* provas (Na prática) */
.proof { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: calc(var(--u) * 4); align-items: center; }
.proof .title { font-size: calc(var(--u) * 3); }
.proof-media { display: flex; gap: calc(var(--u) * 1); justify-content: center; align-items: center; }
.proof-media img, .proof-media video { max-height: calc(var(--u) * 36); max-width: 100%; border-radius: calc(var(--u) * 1.2); box-shadow: 0 calc(var(--u)*.8) calc(var(--u)*3) rgba(40, 20, 90, .18); display: block; object-fit: contain; }
.proof-media.three img { max-width: 32%; }
.proof-media.two img { max-width: 49%; }
.proof-links { display: flex; gap: calc(var(--u) * .7); margin-top: calc(var(--u) * 1.4); flex-wrap: wrap; }
.proof-links a { padding: .5em 1em; border-radius: 999px; background: var(--ink); color: #fff; text-decoration: none; font: 700 calc(var(--u) * .8) var(--deck-mono); }

/* demonstração do SlingOS */
.flow4 { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--u) * 1.2); }
.flow4::before { content: ''; position: absolute; left: 10%; right: 10%; top: calc(var(--u) * 2.6); height: 3px; background: linear-gradient(90deg, var(--violet), var(--pink)); }
.flow4 .runner { position: absolute; top: calc(var(--u) * 2.6); left: 10%; width: calc(var(--u) * 1.1); height: calc(var(--u) * 1.1); margin-top: calc(var(--u) * -.55 + 1.5px); border-radius: 50%; background: var(--mint-soft); box-shadow: 0 0 0 calc(var(--u) * .45) rgba(78, 211, 180, .3); opacity: 0; z-index: 2; }
.flow4 article { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: calc(var(--u) * 1.2); box-shadow: var(--shadow); padding: calc(var(--u) * 1.3); text-align: left; margin-top: calc(var(--u) * 5.2); }
.flow4 article > i { position: absolute; top: calc(var(--u) * -5.2); left: 50%; transform: translateX(-50%); width: calc(var(--u) * 5.2); height: calc(var(--u) * 5.2); border-radius: 50%; display: grid; place-items: center; background: var(--paper); border: 2px solid var(--violet); color: var(--violet); font-size: calc(var(--u) * 2.2); }
.flow4 b { font: 700 calc(var(--u) * .75) var(--deck-mono); color: var(--violet); }
.flow4 strong { display: block; font: 800 calc(var(--u) * 1.3) var(--head); margin-top: .2em; }
.flow4 span { display: block; font-size: calc(var(--u) * .95); line-height: 1.35; color: var(--ink-2); margin-top: .3em; }
.compare2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 1.6); text-align: left; }
.compare2 article { border-radius: calc(var(--u) * 1.4); padding: calc(var(--u) * 1.6) calc(var(--u) * 1.8); }
.compare2 article:first-child { background: #F1F0F4; }
.compare2 article:last-child { background: var(--grad-solid); color: #fff; }
.compare2 h3 { margin: 0 0 calc(var(--u) * .9); font: 800 calc(var(--u) * 1.6) var(--head); }
.compare2 ul { margin: 0; padding: 0; list-style: none; display: grid; gap: calc(var(--u) * .7); font-size: calc(var(--u) * 1.1); line-height: 1.35; }
.compare2 li { display: flex; gap: .6em; }
.compare2 li i { flex: 0 0 auto; margin-top: .15em; }
.compare2 article:first-child li i { color: var(--red); }
.compare2 article:last-child li i { color: #BFFFEA; }
.debrief { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: calc(var(--u) * .9); }
.debrief article { background: var(--paper); border: 1px solid var(--line); border-radius: calc(var(--u) * 1.1); box-shadow: var(--shadow); padding: calc(var(--u) * 1.1); text-align: left; min-height: calc(var(--u) * 11); display: flex; flex-direction: column; }
.debrief b { font: 700 calc(var(--u) * .75) var(--deck-mono); color: var(--violet); }
.debrief strong { font: 800 calc(var(--u) * 1.2) var(--head); margin-top: .2em; }
.debrief span { margin-top: auto; font-size: calc(var(--u) * .95); line-height: 1.3; color: var(--ink-2); }

/* oferta (Paulo) */
.steps3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 1.3); }
.steps3 article { background: var(--paper); border: 1px solid var(--line); border-radius: calc(var(--u) * 1.3); box-shadow: var(--shadow); padding: calc(var(--u) * 1.6); text-align: left; }
.steps3 b { display: inline-grid; place-items: center; width: calc(var(--u) * 2.8); height: calc(var(--u) * 2.8); border-radius: 50%; background: var(--grad-solid); color: #fff; font: 700 calc(var(--u) * .9) var(--deck-mono); }
.steps3 strong { display: block; margin-top: calc(var(--u) * .9); font: 800 calc(var(--u) * 1.45)/1.1 var(--head); }
.steps3 span { display: block; margin-top: .4em; font-size: calc(var(--u) * 1.02); line-height: 1.4; color: var(--ink-2); }
.chips { display: flex; flex-wrap: wrap; gap: calc(var(--u) * .7); justify-content: center; margin-top: calc(var(--u) * 1.6); }
.chips span { display: inline-flex; align-items: center; gap: .5em; padding: .6em 1.1em; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); font: 800 calc(var(--u) * 1.1) var(--head); }
.chips i { color: var(--violet); }
.step-big { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: calc(var(--u) * 3); align-items: center; }
.step-big > b { font: 900 calc(var(--u) * 13)/.8 var(--head); letter-spacing: -.07em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.step-big .chips { justify-content: flex-start; }
.price { font: 900 calc(var(--u) * 8)/.9 var(--head); letter-spacing: -.05em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; margin-top: calc(var(--u) * 1); }
.slide.dark .price { background: linear-gradient(110deg, #fff, #E5D9FF 50%, #FFB5E0); -webkit-background-clip: text; background-clip: text; }
.value-label { font: 800 calc(var(--u) * 1.7) var(--head); color: var(--ink-2); margin: 0; }
.slide.dark .value-label { color: rgba(255, 255, 255, .8); }
.priority { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * .9); }
.priority span { min-height: calc(var(--u) * 7); display: grid; place-items: center; text-align: center; padding: calc(var(--u) * 1); border-radius: calc(var(--u) * 1); background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); font: 800 calc(var(--u) * 1.2)/1.2 var(--head); }
.priority span.win { background: var(--grad-solid); color: #fff; border: 0; }
.priority small { display: block; font: 400 .75em var(--deck-font); }
.thirty { width: calc(var(--u) * 20); height: calc(var(--u) * 20); border-radius: 50%; background: var(--grad-solid); color: #fff; display: grid; place-content: center; text-align: center; box-shadow: 0 calc(var(--u)*1.5) calc(var(--u)*4) rgba(112, 64, 246, .3); }
.thirty strong { font: 900 calc(var(--u) * 8)/.8 var(--head); letter-spacing: -.06em; }
.thirty span { font: 800 calc(var(--u) * 1.8) var(--head); }
.thirty small { font: 700 calc(var(--u) * .7) var(--deck-mono); text-transform: uppercase; letter-spacing: .08em; margin-top: .4em; }
.pricing { background: var(--paper); border: 1px solid var(--line); border-radius: calc(var(--u) * 1.6); box-shadow: 0 calc(var(--u)*1) calc(var(--u)*3.5) rgba(40, 20, 90, .14); padding: calc(var(--u) * 2) calc(var(--u) * 2.2); text-align: left; }
.pricing .line { display: flex; justify-content: space-between; gap: 1em; padding: calc(var(--u) * .9) 0; border-bottom: 1px solid var(--line); font-size: calc(var(--u) * 1.15); color: var(--ink-2); }
.pricing .line b { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--red); white-space: nowrap; }
.pricing .final { margin-top: calc(var(--u) * 1.2); }
.pricing .final small, .pricing .final em { display: block; font: 700 calc(var(--u) * .8) var(--deck-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); font-style: normal; }
.pricing .final strong { display: block; font: 900 calc(var(--u) * 5)/1 var(--head); letter-spacing: -.05em; color: var(--violet); margin: .15em 0; }
.pricing .final strong span { font-size: .4em; }
.pricing .final em { color: var(--violet); }
.qr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: calc(var(--u) * 4); align-items: center; }
.qr-card { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .6); padding: calc(var(--u) * 1.6); background: #fff; border-radius: calc(var(--u) * 1.6); box-shadow: 0 calc(var(--u)*1) calc(var(--u)*3.5) rgba(40, 20, 90, .16); text-decoration: none; color: var(--ink); }
.qr-card img { width: calc(var(--u) * 22); height: calc(var(--u) * 22); display: block; }
.qr-card strong { font: 800 calc(var(--u) * 1.2) var(--head); }
.qr-card small { font: 400 calc(var(--u) * .75) var(--deck-mono); color: var(--ink-3); }
.pay-link { display: inline-flex; align-items: center; gap: .5em; margin-top: calc(var(--u) * 1.4); padding: .7em 1.2em; border-radius: 999px; background: var(--grad-solid); color: #fff; text-decoration: none; font: 700 calc(var(--u) * .9) var(--deck-mono); }

/* ============================================================
   MOTION · só no slide ativo, só com animação ligada
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  body.js-anim .slide.active .journey::before { animation: growX 1.6s var(--deck-ease) .3s both; }
  body.js-anim .slide.active .journey article { animation: popIn .6s var(--deck-ease) both; }
  body.js-anim .slide.active .journey article:nth-child(1) { animation-delay: .4s; }
  body.js-anim .slide.active .journey article:nth-child(2) { animation-delay: .55s; }
  body.js-anim .slide.active .journey article:nth-child(3) { animation-delay: .7s; }
  body.js-anim .slide.active .journey article:nth-child(4) { animation-delay: .85s; }
  body.js-anim .slide.active .journey article:nth-child(5) { animation-delay: 1s; }
  body.js-anim .slide.active .journey article:nth-child(6) { animation-delay: 1.15s; }
  body.js-anim .slide.active .journey article:nth-child(7) { animation-delay: 1.3s; }

  body.js-anim .slide.active .count { animation: countUp 2s cubic-bezier(.2, .7, .2, 1) .5s both; }

  body.js-anim .slide.active .act-num::after { animation: spin 18s linear infinite; }
  body.js-anim .slide.active .act-num::before { animation: pulseRing 2.8s ease-out infinite; }
  body.js-anim .slide.active .break-icon .steam i { animation: steam 2.4s ease-in-out infinite; }
  body.js-anim .slide.active .break-icon .steam i:nth-child(2) { animation-delay: .5s; }
  body.js-anim .slide.active .break-icon .steam i:nth-child(3) { animation-delay: 1s; }
  body.js-anim .slide.active .timer-ring { animation: drain 120s linear .6s both; }
  body.js-anim .slide.active .demo::before { animation: rec 1.6s ease-out infinite; }

  /* autocompletar */
  body.js-anim .slide.active .suggest span { animation: chipGlow .5s ease both; }
  body.js-anim .slide.active .suggest span:nth-child(1) { animation-delay: 1.2s; }
  body.js-anim .slide.active .suggest span:nth-child(2) { animation-delay: 1.4s; }
  body.js-anim .slide.active .suggest span:nth-child(3) { animation-delay: 1.6s; }
  body.js-anim .slide.active .suggest span.pick { animation: pickChip 3.6s ease 1.2s both; }
  body.js-anim .slide.active .typing .word-new { animation: typeIn .5s steps(4) 2.9s both; }
  body.js-anim .slide.active .typing .caret { animation: blink 1s steps(1) infinite; }
  body.js-anim .slide.active .prob .bar i { animation: growX 1.2s var(--deck-ease) both; }
  body.js-anim .slide.active .prob div:nth-child(1) .bar i { animation-delay: 1.3s; }
  body.js-anim .slide.active .prob div:nth-child(2) .bar i { animation-delay: 1.5s; }
  body.js-anim .slide.active .prob div:nth-child(3) .bar i { animation-delay: 1.7s; }

  /* estante crescendo */
  body.js-anim .slide.active .shelf i { animation: growY .9s var(--deck-ease) both; animation-delay: calc(var(--i) * 45ms + .4s); }

  /* pedido viajando pelo fluxo */
  body.js-anim .slide.active .pipe .runner { animation: runPipe 5s var(--deck-ease) 1s infinite; }
  body.js-anim .slide.active .pipe article > i { animation: nodeLight 5s ease 1s infinite; }
  body.js-anim .slide.active .pipe article:nth-child(3) > i { animation-delay: 1.8s; }
  body.js-anim .slide.active .pipe article:nth-child(4) > i { animation-delay: 2.6s; }
  body.js-anim .slide.active .pipe article:nth-child(5) > i { animation-delay: 3.4s; }
  body.js-anim .slide.active .pipe article:nth-child(6) > i { animation-delay: 4.2s; }

  /* tokens aparecendo um a um */
  body.js-anim .slide.active .toks b { animation: tokPop .45s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--i) * 90ms + .5s); }
  body.js-anim .slide.active .receipt { animation: slideUp .8s var(--deck-ease) 2.6s both; }

  /* papéis caindo na mesa */
  body.js-anim .slide.active .paper { animation: dropPaper .8s cubic-bezier(.3, 1.3, .5, 1) both; }
  body.js-anim .slide.active .p1 { animation-delay: .5s; }
  body.js-anim .slide.active .p2 { animation-delay: 1s; }
  body.js-anim .slide.active .p3 { animation-delay: 1.5s; }
  body.js-anim .slide.active .p4 { animation-delay: 2s; }
  body.js-anim .slide.active .p5 { animation-delay: 2.5s; }
  body.js-anim .slide.active .meter i { animation: meterFill 2.6s var(--deck-ease) .6s both; }
  body.js-anim .slide.active .p1.rot { animation: dropPaper .8s cubic-bezier(.3, 1.3, .5, 1) .5s both, rot 3s ease 4s forwards; }

  /* memória: relendo o caderno */
  body.js-anim .slide.active .day .bar i { animation: growX 1.4s ease both; }
  body.js-anim .slide.active .day:nth-child(1) .bar i { animation-delay: .6s; }
  body.js-anim .slide.active .day:nth-child(2) .bar i { animation-delay: 1.6s; }
  body.js-anim .slide.active .day:nth-child(3) .bar i { animation-delay: 2.6s; }

  /* três respostas embaralhando */
  body.js-anim .slide.active .fan article { animation: fanOut .9s var(--deck-ease) both; }
  body.js-anim .slide.active .fan article:nth-child(1) { animation-delay: .5s; }
  body.js-anim .slide.active .fan article:nth-child(2) { animation-delay: .8s; }
  body.js-anim .slide.active .fan article:nth-child(3) { animation-delay: 1.1s; }

  /* alucinação: carimbo */
  body.js-anim .slide.active .exam .a { animation: typeLine 1.6s steps(24) .8s both; }
  body.js-anim .slide.active .stamp { animation: stampIn .5s cubic-bezier(.3, 1.8, .5, 1) 2.8s both; }

  /* knowledge cutoff */
  body.js-anim .slide.active .papers article, body.js-anim .slide.active .papers .gap { animation: popIn .5s var(--deck-ease) both; }
  body.js-anim .slide.active .papers > :nth-child(1) { animation-delay: .3s; }
  body.js-anim .slide.active .papers > :nth-child(2) { animation-delay: .45s; }
  body.js-anim .slide.active .papers > :nth-child(3) { animation-delay: .6s; }
  body.js-anim .slide.active .papers > :nth-child(4) { animation-delay: .75s; }
  body.js-anim .slide.active .papers > :nth-child(5) { animation-delay: 1.2s; }

  /* motor trocando */
  body.js-anim .slide.active .engine .swap span { animation: swapEngine 6s steps(1) 1s infinite; }

  /* dial de reasoning */
  body.js-anim .slide.active .dial-knob { animation: knob 5s ease-in-out .6s infinite alternate; }

  /* banquinho entrando */
  body.js-anim .slide.active .stool-seat { animation: seatDrop .8s cubic-bezier(.3, 1.4, .5, 1) .3s both; }

  /* dados: linhas e nós flutuando */
  body.js-anim .slide.active .src-node { animation: bob 4s ease-in-out infinite; }
  body.js-anim .slide.active .src-node:nth-of-type(2n) { animation-delay: -1.3s; }
  body.js-anim .slide.active .src-node:nth-of-type(3n) { animation-delay: -2.6s; }
  body.js-anim .slide.active .scatter svg line { animation: dash 1.6s linear infinite; }
  body.js-anim .slide.active .scatter .core { animation: corePulse 3s ease-in-out infinite; }

  /* garçom indo e voltando, plugues conectando */
  body.js-anim .slide.active .route .mover { animation: waiter 4s ease-in-out .5s infinite; }
  body.js-anim .slide.active .plugs li::after { animation: growX .9s var(--deck-ease) both; }
  body.js-anim .slide.active .plugs li:nth-child(1)::after { animation-delay: .6s; }
  body.js-anim .slide.active .plugs li:nth-child(2)::after { animation-delay: .8s; }
  body.js-anim .slide.active .plugs li:nth-child(3)::after { animation-delay: 1s; }
  body.js-anim .slide.active .plugs li:nth-child(4)::after { animation-delay: 1.2s; }
  body.js-anim .slide.active .plugs .socket { animation: corePulse 3s ease-in-out 1.6s infinite; }

  /* régua */
  body.js-anim .slide.active .ruler-bar { animation: growX 1.4s var(--deck-ease) .4s both; }

  /* esteira */
  body.js-anim .slide.active .belt-track { animation: beltMove 1.2s linear infinite; }
  body.js-anim .slide.active .belt-wheels i { animation: spin 1.2s linear infinite; }
  body.js-anim .slide.active .boxes i { animation: boxRide 6s linear infinite; animation-delay: calc(var(--i) * -1.5s); }
  body.js-anim .slide.active:has(.belt-trigger.step-on) .belt-track { animation-duration: .3s; }
  body.js-anim .slide.active:has(.belt-trigger.step-on) .belt-wheels i { animation-duration: .3s; }
  body.js-anim .slide.active:has(.belt-trigger.step-on) .boxes i { animation-duration: 1.6s; animation-delay: calc(var(--i) * -.4s); }

  /* loop do agente */
  body.js-anim .slide.active .loop-spin { animation: spin 4s linear infinite; }
  body.js-anim .slide.active .loop-node { animation: nodeBeat 4s ease infinite; }
  body.js-anim .slide.active .loop-node:nth-of-type(2) { animation-delay: 1s; }
  body.js-anim .slide.active .loop-node:nth-of-type(3) { animation-delay: 2s; }
  body.js-anim .slide.active .loop-node:nth-of-type(4) { animation-delay: 3s; }

  /* anatomia: linhas desenhando e núcleo pulsando */
  body.js-anim .slide.active .anat-core { animation: corePulse 3s ease-in-out infinite; }
  body.js-anim .slide.active .anat svg line { stroke-dasharray: 400; animation: draw 1.2s var(--deck-ease) .3s both; }

  /* gaveta: receita saindo */
  body.js-anim .slide.active .rcard { animation: popIn .5s var(--deck-ease) both; }
  body.js-anim .slide.active .rcard.r1 { animation-delay: .4s; }
  body.js-anim .slide.active .rcard.r2 { animation-delay: .55s; }
  body.js-anim .slide.active .rcard.r3 { animation-delay: .7s; }
  body.js-anim .slide.active .rcard.r4 { animation-delay: .85s; }
  body.js-anim .slide.active .rcard.pick { animation: pullOut 1s cubic-bezier(.3, 1.4, .5, 1) 1.6s both; }

  /* níveis de autonomia */
  body.js-anim .slide.active .levels::before { animation: growX 1.4s var(--deck-ease) .4s both; }
  body.js-anim .slide.active .levels .car-dot { animation: drive 7s ease-in-out 1s infinite; }

  /* gráfico */
  body.js-anim .slide.active .chart .curve { stroke-dasharray: 1400; animation: draw 2.6s var(--deck-ease) .5s both; }
  body.js-anim .slide.active .chart .area { animation: fadeIn 1.2s ease 2.4s both; }
  body.js-anim .slide.active .chart .pt, body.js-anim .slide.active .chart text { animation: fadeIn .6s ease both; animation-delay: calc(var(--d, 0) * 1s + .6s); }

  /* escada */
  body.js-anim .slide.active .stairs article { animation: growUp .8s var(--deck-ease) both; transform-origin: bottom; }
  body.js-anim .slide.active .stairs article:nth-child(1) { animation-delay: .3s; }
  body.js-anim .slide.active .stairs article:nth-child(2) { animation-delay: .5s; }
  body.js-anim .slide.active .stairs article:nth-child(3) { animation-delay: .7s; }
  body.js-anim .slide.active .stairs article:nth-child(4) { animation-delay: .9s; }
  body.js-anim .slide.active .stairs .climber { animation: hop 1.2s ease-in-out 1.6s infinite; }

  /* ilhas */
  body.js-anim .slide.active .island { animation: bob 5s ease-in-out infinite; }
  body.js-anim .slide.active .island.i2 { animation-delay: -1.2s; }
  body.js-anim .slide.active .island.i3 { animation-delay: -2.4s; }
  body.js-anim .slide.active .island.i4 { animation-delay: -3.6s; }

  /* SlingOS: ponto percorrendo o fluxo */
  body.js-anim .slide.active .flow4 .runner { animation: runFlow 4.5s var(--deck-ease) 1s infinite; }

  /* 6 para 12 */
  body.js-anim .slide.active .crowd i.ghost.step-on { animation: popIn .5s cubic-bezier(.3, 1.6, .5, 1) both; }
}

@keyframes growX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes growY { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes growUp { from { transform: scaleY(.2); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
@keyframes popIn { from { opacity: 0; transform: translateY(14px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(30px) rotate(-2deg); } to { opacity: 1; transform: rotate(-2deg); } }
@keyframes countUp { from { --num: 0; } to { --num: var(--to); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulseRing { 0% { transform: scale(.85); opacity: .9; } 100% { transform: scale(1.18); opacity: 0; } }
@keyframes steam { 0% { opacity: 0; transform: translateY(40%) scaleY(.6); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-50%) scaleY(1.1); } }
@keyframes drain { from { --p: 100; } to { --p: 0; } }
@keyframes rec { 0% { box-shadow: 0 0 0 0 rgba(255, 90, 95, .6); } 100% { box-shadow: 0 0 0 .8em rgba(255, 90, 95, 0); } }
@keyframes chipGlow { from { opacity: .2; } to { opacity: 1; } }
@keyframes pickChip { 0%, 20% { background: #D1D5DB; color: #111; } 40%, 100% { background: #fff; color: var(--violet); } }
@keyframes typeIn { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes typeLine { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes runPipe { 0% { left: 8%; opacity: 0; } 6% { opacity: 1; } 88% { opacity: 1; } 100% { left: 92%; opacity: 0; } }
@keyframes runFlow { 0% { left: 10%; opacity: 0; } 6% { opacity: 1; } 88% { opacity: 1; } 100% { left: 90%; opacity: 0; } }
@keyframes nodeLight { 0%, 12%, 100% { box-shadow: var(--shadow); border-color: var(--line-2); } 4% { box-shadow: 0 0 0 calc(var(--u) * .7) rgba(255, 107, 200, .25); border-color: var(--pink); } }
@keyframes tokPop { from { opacity: 0; transform: translateY(10px) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes dropPaper { from { opacity: 0; transform: translateY(-160%) rotate(calc(var(--r) * 4)); } to { opacity: 1; transform: rotate(var(--r)); } }
@keyframes rot { to { filter: blur(2px); opacity: .45; } }
@keyframes meterFill { from { width: 0; } }
@keyframes fanOut { from { opacity: 0; transform: translateY(calc(var(--u) * 3)) rotate(0deg); } to { opacity: 1; transform: translateX(var(--x)) rotate(var(--r)); } }
@keyframes stampIn { from { opacity: 0; transform: rotate(-12deg) scale(2.2); } to { opacity: 1; transform: rotate(-12deg) scale(1); } }
@keyframes swapEngine { 0%, 100% { transform: translateY(0); } 33% { transform: translateY(-100%); } 66% { transform: translateY(-200%); } }
@keyframes knob { 0% { left: 14%; } 100% { left: 86%; } }
@keyframes seatDrop { from { opacity: 0; transform: translateY(-60%); } to { opacity: 1; transform: none; } }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes dash { to { stroke-dashoffset: -28; } }
@keyframes corePulse { 0%, 100% { box-shadow: 0 0 0 calc(var(--u) * 1.2) rgba(112, 64, 246, .1), 0 0 0 calc(var(--u) * 2.4) rgba(112, 64, 246, .05); } 50% { box-shadow: 0 0 0 calc(var(--u) * 1.8) rgba(112, 64, 246, .14), 0 0 0 calc(var(--u) * 3.4) rgba(112, 64, 246, .06); } }
@keyframes waiter { 0%, 100% { left: 12%; } 45%, 55% { left: calc(88% - var(--u) * 2.6); } }
@keyframes beltMove { to { background-position: calc(var(--u) * 2.8) 0; } }
@keyframes boxRide { from { left: -8%; } to { left: 104%; } }
@keyframes nodeBeat { 0%, 30%, 100% { background: var(--paper); color: var(--ink); } 8%, 22% { background: var(--violet); color: #fff; } }
@keyframes draw { from { stroke-dashoffset: 1400; } to { stroke-dashoffset: 0; } }
@keyframes pullOut { from { transform: rotate(-1deg) translateY(calc(var(--u) * 5.6)) scale(1); } to { transform: rotate(0deg) scale(1.12); } }
@keyframes drive { 0%, 12% { left: 12%; } 25%, 37% { left: 37%; } 50%, 62% { left: 63%; } 75%, 87% { left: 88%; } 100% { left: 12%; } }
@keyframes hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(var(--u) * -1)); } }

/* ---------- LED / impressão ---------- */
body.led .kicker, body.led .small, body.led .src { display: none; }
@media print {
  body::before, body::after { display: none; }
  #wifi, .brand-mark { display: none; }
}

/* ---------- telas estreitas (celular em leitura) ---------- */
@media (max-width: 700px) {
  :root { --u: min(1.9vw, 1.7778vh); --deck-pad: 18px 16px; }
  .split, .c3, .c4, .c5, .c6, .types, .recap, .gloss, .journey, .levels, .turns, .logos, .debrief, .news2, .sp, .metaphor, .pros, .asks, .cva, .vs, .compare2, .steps3, .tools, .flow4, .proof, .act-grid, .qr, .shift { grid-template-columns: 1fr; }
}

/* ajustes pós-render */
.pipe.p4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.module-num .ph { -webkit-text-fill-color: var(--violet); font-size: .7em; }
.part.c { left: 14%; } .part.d { left: 86%; }
pre.skillfile { white-space: pre-wrap; margin: calc(var(--u) * 1.2) 0 0; }
.stool-trigger i { vertical-align: -.1em; }
.journey em { font: 700 calc(var(--u) * .8) var(--deck-mono); font-style: normal; color: var(--violet); background: var(--tint); padding: .2em .6em; border-radius: 999px; }