/* ============================================================
   BRAVIX · site claro, editorial (set/2026)
   Direção: revista de negócio, não landing de IA. Título grande em grotesca com
   personalidade, a palavra que importa em serifa itálica azul, lista com filete no lugar
   de card com ícone, papel quase branco com grão. Escuro só no palco do robô e no rodapé.
   ============================================================ */

:root {
  --papel:    #F7F7F4;
  --papel-2:  #EEEEE9;
  --papel-3:  #FBFBF9;
  --tinta:    #121317;
  --tinta-2:  #4A4D55;
  --tinta-3:  #6B6E77;
  --filete:   rgba(18, 19, 23, 0.12);
  --azul:     #005CFC;
  --azul-2:   #2B74FF;
  --azul-cl:  #9CC0FF;
  --noite:    #07080C;
  --noite-2:  #11131A;
  --claro-tx: #F2F2EE;
  --claro-2:  rgba(242, 242, 238, 0.68);
  --whats:    #25D366;

  --f-disp:  'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif;
  --f-serif: 'Instrument Serif', Georgia, serif;
  --f-corpo: 'Hanken Grotesk', system-ui, sans-serif;

  --ease: cubic-bezier(.22, .8, .24, 1);
  --raio: 22px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body {
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--f-corpo);
  font-size: 17px;
  line-height: 1.55;
  overflow-x: clip;               /* hidden viraria container de scroll e quebraria o sticky */
  -webkit-font-smoothing: antialiased;
}
/* grão de papel: tira o chapado digital sem pesar (SVG estático, sem animação) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none;
  opacity: .045; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { max-width: 100%; display: block; }
a { color: inherit; }
em { font-style: normal; }
:focus-visible { outline: 2px solid var(--azul-2); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.pular { position: absolute; left: 12px; top: -60px; z-index: 300; background: var(--azul); color: var(--claro-tx); padding: 10px 14px; border-radius: 10px; text-decoration: none; }
.pular:focus { top: 12px; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--f-corpo); font-weight: 600; font-size: 1rem; line-height: 1;
  padding: 15px 24px; border-radius: 999px; border: 1px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .2s var(--ease);
}
.btn:active { transform: scale(.98); }
.btn-lg { padding: 18px 26px; font-size: 1.05rem; }
.btn-sm { padding: 10px 17px; font-size: .9rem; }
.btn-primary { background: var(--azul); color: var(--claro-tx); }
.btn-primary:hover { background: var(--azul-2); }
.btn .seta { transition: transform .3s var(--ease); }
.btn:hover .seta { transform: translateX(4px); }
.btn-ghost { background: transparent; color: var(--tinta); border-color: rgba(18, 19, 23, .22); }
.btn-ghost:hover { border-color: var(--tinta); }
.btn-whats { background: var(--whats); color: #062712; }
[hidden] { display: none !important; }

/* ---------- Nav ---------- */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  color: var(--claro-tx);
  transition: background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease);
}
#nav.scrolled { background: rgba(7, 8, 12, .62); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); }
#nav.nav-light { color: var(--tinta); background: rgba(247, 247, 244, .82); box-shadow: 0 1px 0 var(--filete); }
.nav-inner { display: flex; align-items: center; gap: 28px; height: 64px; }
.logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font-family: var(--f-disp); font-weight: 700; font-size: 1.12rem; letter-spacing: -.02em; }
.logo-mark { width: 26px; height: 26px; }
.logo-mark--escuro { display: none; }
#nav.nav-light .logo-mark--claro { display: none; }
#nav.nav-light .logo-mark--escuro { display: block; }
.logo-word { display: inline-block; overflow: hidden; white-space: nowrap; max-width: 120px; transition: max-width .4s var(--ease), opacity .3s var(--ease); }
.nav-links { display: flex; gap: 26px; margin-left: auto; font-size: .93rem; }
.nav-links a { text-decoration: none; opacity: .72; transition: opacity .2s; }
.nav-links a:hover { opacity: 1; }
.nav-acoes { display: flex; gap: 8px; }
#nav .btn-ghost { color: inherit; border-color: currentColor; opacity: .85; }
.nav-cta { transition: opacity .3s var(--ease), transform .3s var(--ease); }
/* modo compacto enquanto o robô gira no topo (liga/desliga no heroRobotScrub) */
.nav-compact .logo-word { max-width: 0; opacity: 0; }
/* visibility junto com a opacidade: escondido também sai do Tab */
.nav-compact .nav-acoes, .nav-compact .nav-links { opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s .3s; }
.nav-compact.nav-revealed .logo-word { max-width: 120px; opacity: 1; }
.nav-compact.nav-revealed .nav-acoes, .nav-compact.nav-revealed .nav-links { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s; }

/* ---------- Topo (palco do robô) ----------
   O comportamento do robô é o mesmo do site anterior (heroRobotScrub). Só a moldura mudou:
   o palco escuro termina arredondado e a página clara começa logo abaixo. */
.hero {
  position: relative; height: 180vh;
  background: var(--noite); color: var(--claro-tx);
  border-radius: 0 0 32px 32px; overflow: clip;
}
.hero-pin {
  position: sticky; top: 0; height: 100vh;
  display: flex; align-items: center; padding: 104px 0 64px; overflow: hidden;
}
@media (max-height: 860px) and (min-width: 761px) { .hero-pin { align-items: flex-start; } }
.hero-content { position: relative; z-index: 2; }
.hero-copy { max-width: 780px; }

.hero-robot-wrap { position: absolute; inset: 0; z-index: 0; pointer-events: none; transform-origin: 51% 28%; }
.hero-robot, .hero-robot-static { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 58% center; }
.hero-robot-static { display: none; }
.hero-eye-flare {
  position: absolute; left: 51%; top: 28%; width: 140px; height: 140px; z-index: 1;
  transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; opacity: 0; filter: blur(1px);
  background: radial-gradient(circle, rgba(219,234,254,.95) 0%, rgba(96,165,250,.6) 32%, rgba(0,92,252,.18) 62%, transparent 78%);
}
.hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(7,8,12,.94) 0%, rgba(7,8,12,.86) 18%, rgba(7,8,12,.6) 34%, rgba(7,8,12,.28) 52%, rgba(7,8,12,.08) 70%, rgba(7,8,12,0) 88%),
    linear-gradient(180deg, rgba(7,8,12,.4) 0%, rgba(7,8,12,0) 30%, rgba(7,8,12,0) 62%, rgba(7,8,12,.6) 100%);
}
@media (min-width: 761px) {
  .hero-robot-wrap {
    left: 46%; transform-origin: 46% 30%;
    -webkit-mask-image: linear-gradient(to right, transparent 0, rgba(7,8,12,.5) 13%, var(--noite) 32%);
            mask-image: linear-gradient(to right, transparent 0, rgba(7,8,12,.5) 13%, var(--noite) 32%);
  }
  .hero-robot, .hero-robot-static { object-position: 50% center; }
  .hero-eye-flare { left: 72%; }
  .hero-scrim {
    background:
      linear-gradient(100deg, rgba(7,8,12,.5) 0%, rgba(7,8,12,.42) 32%, rgba(7,8,12,.2) 50%, rgba(7,8,12,0) 72%),
      linear-gradient(180deg, rgba(7,8,12,.3) 0%, rgba(7,8,12,0) 26%, rgba(7,8,12,0) 60%, rgba(7,8,12,.55) 100%);
  }
}

/* selo com cara de linha de sistema (o Gui gostava desse detalhe do site anterior): mono + cursor */
.selo {
  display: inline-flex; align-items: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .8rem; letter-spacing: .02em;
  color: var(--claro-2); margin-bottom: 22px;
}
.selo::before { content: ">"; margin-right: 10px; color: var(--claro-2); }
.selo b { font-weight: 500; color: var(--azul-cl); }
.selo .cur { display: inline-block; width: 8px; height: 1.1em; margin-left: 5px; background: var(--azul-cl); animation: piscaCur 1.1s steps(1) infinite; }
@keyframes piscaCur { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .selo .cur { animation: none; } }

/* chuva de código: por cima do robô, por baixo do véu; screen soma a luz em vez de tampar */
.hero-chuva { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; mix-blend-mode: screen; }
.hero h1 {
  font-family: var(--f-disp); font-weight: 600;
  font-size: clamp(2.7rem, 5.3vw, 4.9rem); line-height: .96; letter-spacing: -.04em;
  font-variation-settings: "opsz" 96;
  margin-bottom: 24px; text-shadow: 0 2px 30px rgba(7,8,12,.45);
}
.hero h1 em { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -.015em; color: var(--azul-cl); font-size: 1.06em; }
.hero-sub { font-size: clamp(1.02rem, 1.5vw, 1.2rem); color: var(--claro-2); max-width: 540px; margin-bottom: 30px; text-shadow: 0 1px 18px rgba(7,8,12,.5); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.hero .btn-ghost, .rodape .btn-ghost { color: var(--claro-tx); border-color: rgba(242,242,238,.34); }
.hero .btn-ghost:hover, .rodape .btn-ghost:hover { border-color: var(--claro-tx); }
.hero-objecoes { display: flex; flex-wrap: wrap; gap: 6px 0; font-size: .86rem; color: var(--claro-2); }
.hero-objecoes span + span::before { content: "·"; margin: 0 10px; opacity: .6; }

@media (prefers-reduced-motion: reduce) {
  .hero { height: auto; }
  .hero-pin { position: static; height: auto; min-height: 100vh; }
  .hero-robot { display: none; }
  .hero-robot-static { display: block; }
  .hero-eye-flare { display: none; }
}

/* ---------- Seções ---------- */
.bloco { padding: 136px 0; background: var(--papel); }
.bloco--cinza { background: var(--papel-2); }
.cab { margin-bottom: 64px; }
.cab h2, .oferta h2, .duvidas h2 {
  font-family: var(--f-disp); font-weight: 600;
  font-size: clamp(2.2rem, 5.2vw, 4.4rem); line-height: 1; letter-spacing: -.04em;
  font-variation-settings: "opsz" 96; max-width: 17ch;
}
h2 em, .final-h em, .time-fecho em {
  font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em;
  color: var(--azul); font-size: 1.07em;
}
.cab-sub { color: var(--tinta-2); font-size: 1.08rem; max-width: 40ch; }

/* ---------- Abertura do meio ---------- */
.bloco--abre { padding-bottom: 40px; }
.cab--abre { margin-bottom: 0; }
.cab--abre .cab-sub { margin-top: 20px; }

/* ---------- Os 4 capítulos (palco preso; a rolagem troca o capítulo) ----------
   Altura da seção = runway da rolagem. app.js (capitulos) lê o progresso e liga .is-on no
   capítulo e .escuro na seção a partir do 3º (Operação e Gestão no escuro). */
.capitulos { position: relative; height: 420vh; background: var(--papel); transition: background .6s var(--ease), color .6s var(--ease); }
.capitulos.escuro { background: var(--noite); color: var(--claro-tx); }
.cap-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; padding: 84px 0 28px; overflow: hidden; }
.cap-grade { width: 100%; }
.cap-indice { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 34px; }
.cap-indice li {
  padding-top: 12px; border-top: 2px solid var(--filete);
  font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3);
  transition: color .4s var(--ease), border-color .4s var(--ease);
}
.cap-indice li.on { color: var(--azul); border-color: var(--azul); }
.capitulos.escuro .cap-indice li { color: rgba(242,242,238,.45); border-color: rgba(242,242,238,.14); }
.capitulos.escuro .cap-indice li.on { color: var(--azul-cl); border-color: var(--azul-cl); }

.cap-palco { position: relative; height: min(560px, calc(100svh - 190px)); }
.cap {
  position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
  opacity: 0; visibility: hidden; transform: translateY(28px);
  transition: opacity .55s var(--ease), transform .55s var(--ease), visibility 0s .55s;
}
.cap.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .55s var(--ease), transform .55s var(--ease), visibility 0s; }
.cap-rot { font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--azul); }
.capitulos.escuro .cap-rot { color: var(--azul-cl); }
.cap-txt h3 {
  font-family: var(--f-disp); font-weight: 600; font-variation-settings: "opsz" 96;
  font-size: clamp(2rem, 4.4vw, 3.8rem); line-height: 1; letter-spacing: -.04em; margin: 12px 0 22px; max-width: 13ch;
}
.cap-itens { list-style: none; }
.cap-itens li { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--filete); color: var(--tinta-2); font-size: 1.04rem; }
.cap-itens li::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: .55em; border-radius: 50%; background: var(--azul); }
.capitulos.escuro .cap-itens li { color: var(--claro-2); border-color: rgba(242,242,238,.12); }
.capitulos.escuro .cap-itens li::before { background: var(--azul-cl); }
.cap-caso { margin-top: 18px; font-size: .92rem; color: var(--tinta-2); padding-left: 14px; border-left: 2px solid var(--azul); }

.cap-vis {
  position: relative; height: 100%; max-height: 460px; border-radius: 28px; overflow: hidden;
  background: var(--papel-2); display: flex; align-items: flex-end; justify-content: center; padding: 26px 26px 0;
}
.capitulos.escuro .cap-vis { background: var(--noite-2); }
.cap-tag {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta-3); background: var(--papel-3); border: 1px solid var(--filete); padding: 5px 10px; border-radius: 999px;
}
.cap-tag--real { color: var(--azul); border-color: rgba(0,92,252,.3); }
.capitulos.escuro .cap-tag { color: var(--claro-2); background: var(--noite); border-color: rgba(242,242,238,.14); }
/* visuais dentro do palco */
.cap-vis .prova-art { display: flex; justify-content: center; align-items: flex-end; }
.cap-vis .mini-chat { max-width: 420px; padding-bottom: 30px; }
.cap-vis.vis-tarefas { flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 10px; padding: 26px; }
.cap-vis .mini-painel { max-width: 440px; padding-bottom: 36px; display: block; }
.capitulos.escuro .mp-head { color: var(--claro-2); border-color: rgba(242,242,238,.14); }
.capitulos.escuro .mp-k { color: var(--claro-2); }
.capitulos.escuro .mp-bar { background: rgba(242,242,238,.1); }
.capitulos.escuro .mp-row--win .mp-v { color: var(--azul-cl); }
@keyframes sobe { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }

/* sem JS ou reduced-motion: os 4 empilhados, nada preso */
html:not(.js) .capitulos { height: auto; }
html:not(.js) .cap-pin { position: static; height: auto; padding: 40px 0 100px; }
html:not(.js) .cap-indice { display: none; }
html:not(.js) .cap-palco { height: auto; display: grid; gap: 70px; }
html:not(.js) .cap { position: relative; opacity: 1; visibility: visible; transform: none; }
html:not(.js) .cap-vis { height: 380px; }
@media (prefers-reduced-motion: reduce) {
  .capitulos { height: auto; }
  .cap-pin { position: static; height: auto; padding: 40px 0 100px; }
  .cap-indice { display: none; }
  .cap-palco { height: auto; display: grid; gap: 70px; }
  .cap { position: relative; opacity: 1; visibility: visible; transform: none; }
  .cap-vis { height: 380px; }
}

/* ---------- O time que ele não precisa contratar (preso; a rolagem risca um por vez) ---------- */
.time { position: relative; height: 260vh; background: var(--papel); }
.time-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; padding-top: 64px; }
.time-intro { font-size: clamp(1.1rem, 1.8vw, 1.35rem); color: var(--tinta-2); margin-bottom: 22px; max-width: 34ch; }
.cargos { list-style: none; }
.cargos li {
  font-family: var(--f-disp); font-weight: 600; font-variation-settings: "opsz" 96;
  font-size: clamp(1.9rem, 5.2vw, 4.2rem); line-height: 1.1; letter-spacing: -.04em;
}
/* cargo sempre numa linha só (nowrap + fonte que cabe em 320px), então o risco é um traço só */
.cargos li span { position: relative; display: inline-block; white-space: nowrap; color: var(--tinta); transition: color .5s var(--ease); }
.cargos li span::after {
  content: ""; position: absolute; left: -.04em; top: 53%; height: .075em; width: 0;
  background: var(--azul); border-radius: 2px; transition: width .5s var(--ease);
}
.cargos li.riscado span { color: rgba(18,19,23,.22); }
.cargos li.riscado span::after { width: calc(100% + .08em); }
.time-fecho {
  font-family: var(--f-disp); font-weight: 600; font-variation-settings: "opsz" 96;
  font-size: clamp(2.1rem, 5.6vw, 4.6rem); line-height: 1.1; letter-spacing: -.04em; margin-top: 16px;
}
.time-fecho em { font-size: 1.1em; }
.time-sub { color: var(--tinta-2); font-size: 1.1rem; max-width: 46ch; margin-top: 14px; }


@media (prefers-reduced-motion: reduce) {
  .time { height: auto; padding: 100px 0; }
  .time-pin { position: static; height: auto; }

}

/* a máscara de linha do SplitText cortava a perna do "g" e do "p" no itálico serifado:
   dá respiro embaixo e devolve o espaço com margem negativa */
.split-lines > div { padding-bottom: .16em; margin-bottom: -.16em; }

.oferta-pra { margin-top: 26px; color: var(--tinta-2); }
.oferta-pra b { color: var(--tinta); }
.oferta .setores { margin-top: 14px; }

.vis-tarefas { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding-bottom: 28px; }
.vis-tarefas p { display: flex; align-items: center; gap: 12px; font-size: .98rem; padding: 13px 16px; border-radius: 14px; background: var(--noite-2); color: var(--claro-tx); animation: sobe .5s var(--ease) both; }
.vis-tarefas p:nth-child(2) { animation-delay: .12s; } .vis-tarefas p:nth-child(3) { animation-delay: .24s; }
.vis-tarefas i { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--azul-cl); position: relative; animation: marca .4s var(--ease) both; }
.vis-tarefas p:nth-child(1) i { animation-delay: .5s; } .vis-tarefas p:nth-child(2) i { animation-delay: .8s; } .vis-tarefas p:nth-child(3) i { animation-delay: 1.1s; }
@keyframes marca { to { background: var(--azul); border-color: var(--azul); box-shadow: inset 0 0 0 4px var(--noite-2); } }

.prova-art { width: 100%; padding: 0 6%; }
.prova-art img { width: 64%; border-radius: 10px 10px 0 0; box-shadow: 0 18px 40px -18px rgba(18,19,23,.45); transition: transform .6s var(--ease); }
.prova-art img:first-child { transform: rotate(-5deg) translateY(12px); z-index: 2; }
.prova-art img:last-child { transform: rotate(5deg) translateY(28px); margin-left: -22%; z-index: 1; }

.mini-painel { width: 100%; padding: 0 0 74px; flex-direction: column; justify-content: flex-end; align-items: stretch; }
.mp-head { font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); padding-bottom: 8px; border-bottom: 1px solid var(--filete); text-align: right; }
.mp-row { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 12px; padding: 10px 0 0; }
.mp-k { color: var(--tinta-2); font-size: .82rem; }
.mp-v { font-family: var(--f-disp); font-weight: 600; font-size: 1.45rem; font-variant-numeric: tabular-nums; line-height: 1.1; }
.mp-bar { grid-column: 1 / -1; height: 5px; margin-top: 4px; border-radius: 3px; background: rgba(18,19,23,.07); overflow: hidden; }
.mp-bar i { display: block; height: 100%; min-width: 7px; border-radius: 3px; width: var(--w, 0%); background: rgba(0,92,252,.4); }
.mp-row--win .mp-v { color: var(--azul); }
.mp-row--win .mp-bar i { background: var(--azul); }
.js .mp-bar i { width: 0; transition: width 1.15s var(--ease); }
.js .prova-card.is-visible .mp-bar i { width: var(--w, 0%); }
.js .prova-card.is-visible .mp-row:nth-of-type(3) .mp-bar i { transition-delay: .12s; }
.js .prova-card.is-visible .mp-row:nth-of-type(4) .mp-bar i { transition-delay: .24s; }

.mini-chat { width: 100%; padding: 0 0 70px; display: grid; gap: 8px; align-content: end; }
.mini-chat p { font-size: .84rem; line-height: 1.42; padding: 8px 12px; border-radius: 14px; max-width: 86%; }
.mc-in { background: var(--noite-2); color: var(--claro-tx); border-bottom-left-radius: 4px; }
.mc-out { background: var(--azul); color: var(--claro-tx); justify-self: end; border-bottom-right-radius: 4px; }
.mini-chat .mc-meta { font-size: .76rem; color: var(--azul-cl); padding: 2px 0 0; border: 0; background: none; }
.mc-slot { display: grid; justify-items: end; }
.mc-slot > * { grid-area: 1 / 1; }
.mc-typing { display: inline-flex; align-items: center; gap: 4px; padding: 11px 13px; border-radius: 14px; border-bottom-right-radius: 4px; background: var(--noite-2); opacity: 0; }
.mc-typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--azul-cl); }
.js .mini-chat > *, .js .mc-slot > * { opacity: 0; }
.js .prova-card.is-visible .mini-chat > *, .js .prova-card.is-visible .mc-slot > .mc-out { animation: mcPop .5s var(--ease) var(--d, 0s) both; }
.js .prova-card.is-visible .mc-slot { animation: none; opacity: 1; }
.js .prova-card.is-visible .mc-typing { animation: mcTyping 1.9s var(--ease) .55s both; }
.js .prova-card.is-visible .mc-typing i { animation: mcDot 1.1s ease-in-out infinite; }
.js .prova-card.is-visible .mc-typing i:nth-child(2) { animation-delay: .16s; }
.js .prova-card.is-visible .mc-typing i:nth-child(3) { animation-delay: .32s; }
@keyframes mcPop { from { opacity: 0; transform: translateY(9px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes mcTyping { 0% { opacity: 0; transform: translateY(9px); } 14%, 74% { opacity: 1; transform: none; } 88%, 100% { opacity: 0; } }
@keyframes mcDot { 0%, 100% { opacity: .35; transform: none; } 50% { opacity: 1; transform: translateY(-3px); } }

.setores { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 40px; }
.setores-rot { font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); margin-right: 8px; }
.setor { font-size: .95rem; padding: 8px 15px; border-radius: 999px; border: 1px solid rgba(18,19,23,.2); }

/* ---------- A equação (presa na tela enquanto os termos entram) ---------- */
.equacao { position: relative; background: var(--papel); }
.eq-pin { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center; padding: 0 28px; }
.eq {
  max-width: 15ch; text-align: center;
  font-family: var(--f-disp); font-weight: 600; font-variation-settings: "opsz" 96;
  font-size: clamp(2.4rem, 7.4vw, 6.8rem); line-height: 1.04; letter-spacing: -.045em;
}
.eq-t { display: inline; transition: opacity .6s var(--ease), color .6s var(--ease); }
.js .eq-t { opacity: .1; }
.js .eq-t.on { opacity: 1; }
.eq-op { color: var(--azul); font-weight: 500; }
.eq-fim em { font-family: var(--f-serif); font-style: italic; font-weight: 400; color: var(--azul); font-size: 1.12em; letter-spacing: -.015em; }
@media (prefers-reduced-motion: reduce) {
  .equacao { height: auto; padding: 120px 0; }
  .eq-pin { position: static; height: auto; }
  .js .eq-t { opacity: 1; }
}

/* ---------- Oferta ---------- */
.oferta { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; }
.oferta-lead { color: var(--tinta-2); font-size: 1.15rem; max-width: 38ch; margin: 24px 0 34px; }
.ficha { background: var(--noite); color: var(--claro-tx); border-radius: 28px; padding: 40px 38px; box-shadow: 0 40px 80px -40px rgba(7,8,12,.55); }
.ficha-rot { font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--azul-cl); margin-bottom: 14px; }
.ficha-rot--depois { margin-top: 30px; }
.ficha-lista { list-style: none; }
.ficha-lista li { display: flex; gap: 14px; padding: 13px 0; border-top: 1px solid rgba(242,242,238,.12); font-size: 1.02rem; }
.ficha-lista li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%; background: var(--azul) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2F2EE' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat; }
.ficha-depois { color: var(--claro-2); }

/* ---------- Como funciona ---------- */
.passos { list-style: none; position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; --p: 0; }
.passos::before, .passos::after { content: ""; position: absolute; top: 26px; left: 0; height: 2px; border-radius: 2px; }
.passos::before { right: 0; background: var(--filete); }
.passos::after { width: calc(var(--p) * 100%); background: var(--azul); }
.passo { position: relative; padding-top: 64px; }
.passo-n {
  position: absolute; top: 0; left: 0;
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  background: var(--papel-2); border: 2px solid var(--filete);
  font-family: var(--f-serif); font-style: italic; font-size: 1.35rem; color: var(--tinta-3);
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.passo.aceso .passo-n { background: var(--azul); border-color: var(--azul); color: var(--claro-tx); }
.passo h3 { font-family: var(--f-disp); font-weight: 600; font-size: 1.5rem; letter-spacing: -.025em; margin-bottom: 8px; }
.passo p { color: var(--tinta-2); max-width: 32ch; }

/* ---------- Dúvidas ---------- */
.duvidas { display: grid; grid-template-columns: .85fr 1.15fr; gap: 64px; align-items: start; }
.duvidas-cab { position: sticky; top: 110px; }
.faq-item { border-top: 1px solid var(--filete); }
.faq-item:last-child { border-bottom: 1px solid var(--filete); }
.faq-item summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: center;
  padding: 24px 0; font-family: var(--f-disp); font-weight: 600; font-size: 1.22rem; letter-spacing: -.015em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; flex: none; font-family: var(--f-corpo); font-weight: 400; font-size: 1.6rem; line-height: 1; color: var(--azul); transition: transform .3s var(--ease); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { color: var(--tinta-2); padding: 0 40px 26px 0; max-width: 60ch; }

/* ---------- Rodapé + chamada final ---------- */
.rodape { position: relative; isolation: isolate; background: var(--noite); color: var(--claro-tx); border-radius: 32px 32px 0 0; padding: 130px 0 0; overflow: hidden; }
.rodape > .wrap { position: relative; z-index: 1; }
/* chama azul: canvas atrás do conteúdo; screen soma a luz no fundo escuro */
.chama { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; mix-blend-mode: screen; }
.chama-fonte { display: none; }
.final { max-width: 900px; padding-bottom: 110px; }
.final-h { font-family: var(--f-disp); font-weight: 600; font-variation-settings: "opsz" 96; font-size: clamp(2.2rem, 5.4vw, 4.6rem); line-height: 1; letter-spacing: -.04em; margin-bottom: 36px; }
.final-h em { color: var(--azul-cl); }
.final-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.final-nota { color: var(--claro-2); font-size: .92rem; margin-top: 16px; }
.rodape-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; padding: 26px 0; border-top: 1px solid rgba(242,242,238,.12); font-size: .9rem; color: var(--claro-2); }
.rodape-marca { display: flex; align-items: center; gap: 10px; }
.rodape-links { display: flex; flex-wrap: wrap; gap: 22px; }
.rodape-links a { text-decoration: none; }
.rodape-links a:hover { color: var(--claro-tx); }
/* ---------- Barra fixa do celular ---------- */
.barra-cel { display: none; }

/* ---------- Revelar na rolagem ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .08s !important; }
.reveal-d2 { transition-delay: .16s !important; }
.reveal-d3 { transition-delay: .24s !important; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .js .mini-chat > *, .js .mc-slot > * { opacity: 1; animation: none !important; }
  .mc-typing { display: none; }
  .js .mp-bar i { width: var(--w, 0%); transition: none; }
  .cargos li span, .cargos li span::after, .passos::after { transition: none; }
}

/* ============================================================
   Tablet e celular (declarado junto, não remendado depois)
   ============================================================ */
@media (max-width: 980px) {
  .nav-links { display: none; }
  .nav-acoes { margin-left: auto; }
  .oferta, .duvidas { grid-template-columns: 1fr; gap: 40px; }
  .duvidas-cab { position: static; }
}

@media (max-width: 760px) {
  /* capítulos no celular: texto em cima, visual embaixo, o palco preso ocupando a tela.
     A barra fixa de "Agendar" cobre ~80px do pé, por isso o palco desconta ela. */
  .cap-pin { align-items: flex-start; padding: 76px 0 0; }
  .cap-indice { gap: 6px; margin-bottom: 18px; }
  .cap-indice li { font-size: .6rem; letter-spacing: .08em; padding-top: 9px; }
  .cap-palco { height: calc(100svh - 76px - 40px - 96px); }
  .cap { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 16px; align-items: stretch; }
  .cap-txt h3 { font-size: 1.9rem; margin: 8px 0 12px; }
  .cap-itens li { padding: 8px 0; font-size: .92rem; }
  .cap-caso { margin-top: 10px; font-size: .82rem; }
  .cap-vis { height: 100%; max-height: 300px; min-height: 170px; border-radius: 22px; padding: 18px 18px 0; }
  .cap-vis .mini-chat { padding-bottom: 18px; }
  .cap-vis .mini-painel { padding-bottom: 20px; }
  .cap-vis.vis-tarefas { padding: 18px; }
  .vis-tarefas p { font-size: .88rem; padding: 10px 12px; }
  .prova-art img { width: 52%; }
  .time-pin { padding-top: 56px; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .wrap { padding: 0 20px; }
  .bloco { padding: 88px 0; }
  .cab { margin-bottom: 40px; }

  /* topo: o robô preenche o palco e o texto fica na base (mesma lógica do site anterior) */
  .hero { border-radius: 0 0 24px 24px; }
  .hero-pin { align-items: flex-end; padding: 0 0 22px; }
  .hero-robot-wrap { inset: 0; transform-origin: 50% 24%; }
  .hero-robot, .hero-robot-static { object-fit: cover; object-position: 50% 14%; }
  .hero-eye-flare { display: none; }
  .hero-scrim { background: linear-gradient(180deg, transparent 0%, rgba(7,8,12,.1) 24%, rgba(7,8,12,.58) 40%, rgba(7,8,12,.9) 56%, rgba(7,8,12,.97) 72%, rgba(7,8,12,.98) 100%); }
  .selo { margin-bottom: 14px; font-size: .68rem; }
  .hero h1 { font-size: clamp(2.3rem, 11vw, 3rem); margin-bottom: 14px; }
  .hero-sub { font-size: .98rem; margin-bottom: 20px; }
  .hero-ctas { flex-direction: column; margin-bottom: 14px; }
  .hero-ctas .btn { width: 100%; }
  /* no celular a linha quebra: sem o "·", pra nenhuma linha começar com um ponto solto */
  .hero-objecoes { font-size: .78rem; gap: 4px 16px; }
  .hero-objecoes span + span::before { display: none; }

  #nav .btn-ghost { display: none; }





  .ficha { padding: 30px 24px; border-radius: 22px; }

  .passos { grid-template-columns: 1fr; gap: 34px; padding-left: 76px; }
  .passos::before, .passos::after { top: 0; left: 26px; width: 2px; height: auto; }
  .passos::before { bottom: 0; right: auto; }
  .passos::after { height: calc(var(--p) * 100%); }
  .passo { padding-top: 4px; }
  .passo-n { left: -76px; }

  .faq-item summary { font-size: 1.08rem; padding: 20px 0; }
  .faq-item p { padding-right: 0; }

  .rodape { border-radius: 24px 24px 0 0; padding-top: 90px; }
  .final { padding-bottom: 80px; }
  .final-ctas .btn { width: 100%; }
  .rodape-base { flex-direction: column; padding-bottom: 96px; }

  /* barra fixa: entra depois do topo, some sobre a chamada final (app.js) */
  .barra-cel {
    display: flex; gap: 8px; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60;
    padding: 8px; border-radius: 18px; background: rgba(7,8,12,.78);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    transform: translateY(140%); visibility: hidden; transition: transform .45s var(--ease), visibility 0s .45s;
  }
  .barra-cel.on { transform: none; visibility: visible; transition: transform .45s var(--ease), visibility 0s; }
  .oferta-txt .btn { width: 100%; white-space: normal; text-align: center; }
  .barra-cel .btn-primary { flex: 1; }
  .barra-cel .btn-whats { width: 54px; padding: 0; }
}

@media (max-width: 760px) and (max-height: 700px) {
  .hero h1 { font-size: 2.05rem; }
  .hero-sub { font-size: .9rem; margin-bottom: 14px; }
}

/* ---------- Rodada 2b (30/09): abertura, 3 capítulos claros, cargos com a dor, o cérebro ---------- */
.bloco--abre { padding: 130px 0 56px; }
.abre-h {
  font-family: var(--f-disp); font-weight: 600; font-variation-settings: "opsz" 96;
  font-size: clamp(2.2rem, 5.2vw, 4.4rem); line-height: 1; letter-spacing: -.04em; max-width: 18ch;
}
.abre-real { font-family: var(--f-serif); font-style: italic; color: var(--azul); font-size: clamp(1.9rem, 4vw, 3.2rem); line-height: 1.1; margin-top: 18px; }
.abre-estrutura { margin-top: 42px; font-size: clamp(1.1rem, 1.8vw, 1.4rem); color: var(--tinta-2); max-width: 36ch; padding-top: 18px; border-top: 1px solid var(--filete); }

/* 3 capítulos: menos rolagem entre eles, e todos claros (Operação não escurece mais) */
.capitulos { height: 310vh; }
.cap-indice { grid-template-columns: repeat(3, 1fr); }
.cap-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.cap-chips li { font-size: .95rem; padding: 8px 14px; border-radius: 999px; background: var(--papel-2); border: 1px solid var(--filete); color: var(--tinta); }
.cap-vis.vis-tarefas p { background: var(--papel-3); color: var(--tinta); border: 1px solid var(--filete); }
.cap-vis.vis-tarefas i { border-color: var(--azul); animation-name: marcaClaro; }
@keyframes marcaClaro { to { background: var(--azul); border-color: var(--azul); box-shadow: inset 0 0 0 4px var(--papel-3); } }

/* cargos com a dor embaixo de cada um */
.cargos li { display: block; margin-bottom: 6px; font-size: clamp(1.8rem, 4.6vw, 3.6rem); }
.cargos li small {
  display: block; font-family: var(--f-corpo); font-weight: 400; font-size: clamp(.86rem, 1.2vw, 1rem);
  letter-spacing: 0; line-height: 1.3; color: var(--tinta-2); margin: 2px 0 0; transition: opacity .5s var(--ease);
}
.cargos li.riscado small { opacity: .45; }
.time-cta { margin-top: 22px; }
.js [data-time-fim] { opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js [data-time-fim].on { opacity: 1; transform: none; pointer-events: auto; }
.time-fecho { margin-top: 20px; }

/* o cérebro: seção escura, os temas orbitam o núcleo (CSS puro: o anel gira, os rótulos contra-giram) */
/* overflow: o anel, girando, tem a diagonal maior que a caixa e empurrava a página pro lado */
.cerebro { background: var(--noite); color: var(--claro-tx); border-radius: 32px; margin: 0 12px; overflow: hidden; }
.cerebro-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.cerebro-rot { font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--azul-cl); }
.cerebro h2 { font-family: var(--f-disp); font-weight: 600; font-variation-settings: "opsz" 96; font-size: clamp(2.1rem, 4.6vw, 3.9rem); line-height: 1; letter-spacing: -.04em; margin: 14px 0 22px; max-width: 16ch; }
.cerebro h2 em { color: var(--azul-cl); }
.cerebro-lead { color: var(--claro-2); font-size: 1.12rem; max-width: 44ch; }
.cerebro-fecho { margin-top: 18px; color: var(--claro-2); max-width: 44ch; }
.cerebro-fecho b { color: var(--claro-tx); }

.orbita { position: relative; width: min(100%, 480px); aspect-ratio: 1; justify-self: center; }
.orbita::before { content: ""; position: absolute; inset: 9%; border-radius: 50%; border: 1px dashed rgba(156,192,255,.28); }
.orbita-anel { position: absolute; inset: 0; animation: gira 60s linear infinite; }
/* cada rótulo vai pro seu ponto da circunferência (cos/sin) e contra-gira no próprio centro,
   então o anel roda e o texto fica sempre em pé */
.orbita-anel span {
  --ang: calc(var(--i) * (360deg / 7) - 90deg);
  position: absolute;
  left: calc(50% + 40% * cos(var(--ang)));
  top: calc(50% + 40% * sin(var(--ang)));   /* 40% = o mesmo raio das linhas do SVG */
  translate: -50% -50%;
  white-space: nowrap; font-size: .9rem; padding: 8px 14px; border-radius: 999px;
  background: var(--noite-2); border: 1px solid rgba(156,192,255,.3); color: var(--claro-tx);
  animation: contraGira 60s linear infinite;
}
.orbita-nucleo {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 38%; aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; text-align: center;
  background: radial-gradient(circle at 50% 40%, rgba(43,116,255,.55), rgba(0,92,252,.18) 60%, transparent 72%);
  box-shadow: 0 0 60px rgba(0,92,252,.35), inset 0 0 0 1px rgba(156,192,255,.35);
}
.orbita-nucleo b { font-family: var(--f-disp); font-size: 1.35rem; letter-spacing: -.02em; }
.orbita-nucleo small { font-size: .82rem; color: var(--claro-2); }
@keyframes gira { to { rotate: 360deg; } }
@keyframes contraGira { to { rotate: -360deg; } }

@media (max-width: 760px) {
  .bloco--abre { padding: 88px 0 20px; }
  .abre-estrutura { margin-top: 30px; }
  .cap-chips { gap: 6px; }
  .cap-chips li { font-size: .8rem; padding: 6px 11px; }
  .cerebro { margin: 0 8px; border-radius: 24px; }
  .cerebro-grade { grid-template-columns: 1fr; gap: 34px; }
  .orbita { width: 100%; max-width: 340px; }
  .orbita-anel span { font-size: .72rem; padding: 6px 10px; }
  .orbita-nucleo b { font-size: 1.05rem; }
  .cargos li small { font-size: .82rem; }
}
@media (prefers-reduced-motion: reduce) {
  .orbita-anel, .orbita-anel span { animation: none; }
  .js [data-time-fim] { opacity: 1; transform: none; pointer-events: auto; }
}

/* ============================================================
   Rodada 3 (30/09): abertura sonho → realidade, capítulos em língua de dono, a virada dos cargos,
   "por que somos diferentes", equação que não prende, oferta por área, passos premium.
   Vem depois das regras antigas de propósito: sobrescreve no mesmo nível de especificidade.
   ============================================================ */

/* ---------- Abertura: o sonho desfoca, a realidade firma ---------- */
.abre { --p: 1; background: var(--papel); padding: 150px 0 70px; }
.js .abre { --p: 0; }
.abre-h {
  font-family: var(--f-disp); font-weight: 600; font-variation-settings: "opsz" 96;
  font-size: clamp(2.3rem, 5.6vw, 4.8rem); line-height: 1.02; letter-spacing: -.04em; max-width: 17ch;
}
.abre-l1 { display: block; }
.abre-sonho {
  display: block; font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em;
  font-size: 1.06em; color: var(--tinta-3);
  /* sem desfoque: o Gui não conseguia ler (30/09). O contraste com a "realidade" fica no traço azul. */
}
.abre-real {
  margin-top: 30px; font-family: var(--f-disp); font-style: normal; font-weight: 600; font-variation-settings: "opsz" 96;
  font-size: clamp(1.9rem, 4.4vw, 3.6rem); line-height: 1.05; letter-spacing: -.035em; color: var(--tinta);
}
/* a frase e o traço não dependem mais de quanto a pessoa rolou (o traço parava no meio da palavra):
   quando a frase aparece (.real-on, abertura() no app.js), ela sobe e o traço corre a palavra inteira */
.js .abre-real { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .abre.real-on .abre-real { opacity: 1; transform: none; }
.abre-marca { position: relative; color: var(--azul); white-space: nowrap; }
.abre-marca::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.1em; height: .1em; border-radius: .1em; background: var(--azul);
  transform: scaleX(1); transform-origin: left;
}
.js .abre-marca::after { transform: scaleX(0); transition: transform .8s var(--ease) .1s; }
.js .abre.traco-on .abre-marca::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .js .abre-real { opacity: 1; transform: none; }
  .js .abre-marca::after { transform: scaleX(1); }
}
.abre-estrutura {
  margin-top: 64px; padding-top: 20px; border-top: 1px solid var(--filete);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--tinta-2); max-width: 44ch;
}

/* ---------- Capítulos: barrinha do índice enche com a rolagem; lista em vez de chip ---------- */
.cap-indice li { position: relative; border-top: 0; padding-top: 14px; }
.cap-indice li::before, .cap-indice li::after { content: ""; position: absolute; top: 0; left: 0; height: 2px; border-radius: 2px; }
.cap-indice li::before { right: 0; background: var(--filete); }
.cap-indice li::after { width: calc(var(--f, 0) * 100%); background: var(--azul); }
.cap-chips { display: block; }
.cap-chips li {
  display: flex; gap: 12px; padding: 11px 0; border: 0; border-top: 1px solid var(--filete); border-radius: 0;
  background: none; font-size: 1.02rem; color: var(--tinta-2);
}
.cap-chips li::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: .55em; border-radius: 50%; background: var(--azul); }

/* ---------- Cargos → "Agora, você só precisa contratar a Bravix" ---------- */
.time { height: 300vh; }
.time-palco { position: relative; }
.time-lista { transition: opacity .5s var(--ease); }
.js .time-lista.somem .time-intro { opacity: 0; transform: translateY(-16px); }
.time-intro, .cargos li { transition: opacity .55s var(--ease), transform .55s var(--ease), filter .55s var(--ease); }
.js .time-lista.somem .cargos li { opacity: 0; transform: translateY(-34px) scale(.96); filter: blur(6px); }
.js .time-lista.somem .cargos li:nth-child(2) { transition-delay: .05s; }
.js .time-lista.somem .cargos li:nth-child(3) { transition-delay: .1s; }
.js .time-lista.somem .cargos li:nth-child(4) { transition-delay: .15s; }
.js .time-lista.somem .cargos li:nth-child(5) { transition-delay: .2s; }

.time-final { text-align: center; }
.js .time-final {
  position: absolute; inset: 0; padding: 0 28px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .4s var(--ease);
}
.js .time-final.on { opacity: 1; pointer-events: auto; }
.time-final .time-fecho {
  font-family: var(--f-disp); font-weight: 600; font-variation-settings: "opsz" 96;
  font-size: clamp(2.3rem, 6.2vw, 5.2rem); line-height: 1.02; letter-spacing: -.045em; max-width: 15ch; margin: 0 auto;
}
.js .time-final .time-fecho { transform: scale(.82); transition: transform .7s cubic-bezier(.34, 1.56, .64, 1); }
.js .time-final.on .time-fecho { transform: none; }
.time-marca { position: relative; display: inline-block; color: var(--azul); padding: 0 .12em; isolation: isolate; transition: color .35s var(--ease) .35s; }
.time-marca::before {
  content: ""; position: absolute; inset: .06em 0 .02em; z-index: -1; border-radius: .16em; background: var(--azul);
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease) .3s;
}
.time-final.on .time-marca, html:not(.js) .time-marca { color: var(--papel); }
.time-final.on .time-marca::before, html:not(.js) .time-marca::before { transform: none; }
.time-final .time-sub { margin: 20px auto 0; max-width: 40ch; }
.time-final .time-cta { margin-top: 26px; }
.js .time-final .time-sub, .js .time-final .time-cta { opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease) .55s, transform .5s var(--ease) .55s; }
.js .time-final.on .time-sub, .js .time-final.on .time-cta { opacity: 1; transform: none; }
/* o estouro: anel que se abre e 12 pontos azuis saindo do centro, uma vez a cada virada */
.estouro { position: absolute; left: 50%; top: 42%; width: 0; height: 0; pointer-events: none; }
.estouro::before { content: ""; position: absolute; left: -60px; top: -60px; width: 120px; height: 120px; border-radius: 50%; border: 2px solid var(--azul); opacity: 0; }
.estouro i { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--azul); opacity: 0; }
.estouro i:nth-child(3n) { background: var(--azul-cl); width: 7px; height: 7px; }
.time-final.on .estouro::before { animation: anelAbre .9s var(--ease) both; }
.time-final.on .estouro i { animation: pontoSai 1s var(--ease) both; }
@keyframes anelAbre { 0% { opacity: .9; transform: scale(.2); } 100% { opacity: 0; transform: scale(3.4); } }
@keyframes pontoSai {
  0% { opacity: 0; transform: rotate(var(--a)) translateY(-10px) scale(1); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(-190px) scale(.4); }
}

/* ---------- Por que somos diferentes ---------- */
.cerebro { padding: 130px 0; }
.cerebro-cab { text-align: center; margin: 0 auto 56px; max-width: 900px; }
.cerebro-cab h2 { margin: 16px auto 0; max-width: 17ch; }


.cerebro-grade { grid-template-columns: .95fr 1.05fr; gap: 64px; }
.orbita-raios { position: absolute; inset: 0; width: 100%; height: 100%; animation: gira 60s linear infinite; }
.orbita-raios line { stroke: rgba(156,192,255,.4); stroke-width: .35; stroke-dasharray: 1.1 2.3; stroke-linecap: round; animation: fluxo 2.4s linear infinite; }
@keyframes fluxo { to { stroke-dashoffset: -6.8; } }
.orbita-nucleo { animation: pulsa 3.2s ease-in-out infinite; }
@keyframes pulsa { 0%, 100% { box-shadow: 0 0 50px rgba(0,92,252,.3), inset 0 0 0 1px rgba(156,192,255,.35); } 50% { box-shadow: 0 0 90px rgba(0,92,252,.55), inset 0 0 0 1px rgba(156,192,255,.6); } }
.cerebro-lead { font-size: 1.15rem; }
.cerebro-lead b { color: var(--claro-tx); }
.cerebro-fecho { font-size: 1.15rem; margin: 22px 0 30px; }
.cerebro-txt .btn { margin-top: 4px; }

/* ---------- Equação: não prende a tela, monta sozinha quando aparece ---------- */
.equacao { height: auto; padding: 130px 0; }
.eq { margin: 0 auto; max-width: 16ch; }
.eq-t { display: inline-block; }
.js .eq-t { opacity: 0; filter: blur(8px); transform: translateY(18px); transition: opacity .6s var(--ease), filter .6s var(--ease), transform .6s var(--ease); }
.js .eq-t.on { opacity: 1; filter: none; transform: none; }
.eq-fim em { position: relative; }
.eq-fim em::after { content: ""; position: absolute; left: 0; right: 0; bottom: .04em; height: .08em; border-radius: .08em; background: var(--azul); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease) .45s; }
.eq-fim.on em::after, html:not(.js) .eq-fim em::after { transform: none; }

/* ---------- Oferta: o que pode entrar, por área ---------- */
.oferta-cab { max-width: 860px; margin-bottom: 52px; }
.oferta-cab h2 { font-family: var(--f-disp); font-weight: 600; font-variation-settings: "opsz" 96; font-size: clamp(2.2rem, 5.2vw, 4.4rem); line-height: 1; letter-spacing: -.04em; }
.oferta-cab .oferta-lead { max-width: 56ch; margin: 22px 0 0; }
.entra { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.entra-card { position: relative; overflow: hidden; border-radius: 24px; padding: 30px 24px 26px; background: var(--papel-3); border: 1px solid var(--filete); }
.entra-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--azul), var(--azul-cl)); }
.entra-rot { display: block; font-family: var(--f-disp); font-weight: 600; font-size: 1.3rem; letter-spacing: -.02em; margin-bottom: 14px; }
.entra-card ul { list-style: none; }
.entra-card li { position: relative; padding: 9px 0 9px 24px; border-top: 1px solid var(--filete); font-size: .95rem; color: var(--tinta-2); line-height: 1.4; }
.entra-card li:first-child { border-top: 0; }
.entra-card li::before { content: ""; position: absolute; left: 0; top: 13px; width: 14px; height: 14px; border-radius: 50%; background: var(--azul) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F7F7F4' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 9px no-repeat; }
.entra-card--base { background: var(--noite); color: var(--claro-tx); border-color: transparent; }
.entra-card--base li { color: var(--claro-2); border-color: rgba(242,242,238,.12); }
.praquem { margin-top: 44px; padding: 28px 30px; border-radius: 24px; background: var(--papel-2); display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.praquem-h { font-size: 1.08rem; color: var(--tinta-2); flex: 1 1 320px; }
.praquem-h b { color: var(--tinta); }
.praquem-lista { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 420px; }
.praquem-lista li { font-size: .92rem; padding: 8px 14px; border-radius: 999px; background: var(--papel-3); border: 1px solid var(--filete); }
.oferta-cta { margin-top: 34px; }

/* ---------- Como funciona: cards com barra que enche em sequência ---------- */
.passos { grid-template-columns: repeat(3, 1fr); gap: 18px; padding-left: 0; }
.passos::before, .passos::after { display: none; }
.passo { padding: 28px 26px 30px; border-radius: 24px; background: var(--papel-3); border: 1px solid var(--filete); transition: border-color .5s var(--ease), box-shadow .5s var(--ease); }
.passo.aceso { border-color: rgba(0,92,252,.35); box-shadow: 0 26px 60px -34px rgba(0,92,252,.45); }
.passo-barra { display: block; height: 4px; border-radius: 4px; background: var(--filete); overflow: hidden; margin-bottom: 24px; }
.passo-barra i { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--azul); transition: width .8s var(--ease); }
.passo.aceso .passo-barra i { width: 100%; }
.passo .passo-n, .passo.aceso .passo-n {
  position: static; display: block; width: auto; height: auto; border: 0; background: none; box-shadow: none; left: auto;
  font: 600 .76rem var(--f-corpo); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: 10px;
}
.passo.aceso .passo-n { color: var(--azul); }
.passo h3 { font-size: 1.45rem; }
.passo p { max-width: none; }

/* ---------- Tablet e celular da rodada 3 ---------- */
@media (max-width: 980px) {
  .entra { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cerebro-grade { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .abre { padding: 96px 0 40px; }
  .abre-real { margin-top: 22px; }
  .abre-estrutura { margin-top: 40px; }
  .cap-chips li { padding: 8px 0; font-size: .9rem; }
  .time-final .time-fecho { font-size: clamp(2.1rem, 10vw, 2.8rem); }
  .js .time-final { padding: 0 20px; }
  .estouro { top: 36%; }
  .cerebro { padding: 90px 0; }
  .cerebro-cab { text-align: left; margin-bottom: 40px; }
  .cerebro-cab h2 { margin-left: 0; }
  .equacao { height: auto; padding: 90px 0; }
  .entra { grid-template-columns: 1fr; }
  .oferta-cta, .cerebro-txt .btn, .time-cta { width: 100%; white-space: normal; text-align: center; }
  .praquem { padding: 22px 20px; }
  .passos { grid-template-columns: 1fr; gap: 14px; padding-left: 0; }
  .passo { padding: 24px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .abre { --p: 1 !important; }
  .time { height: auto; }
  .js .time-lista.somem .cargos li, .js .time-lista.somem .time-intro { opacity: 1; transform: none; filter: none; }
  .js .time-final { position: static; opacity: 1; pointer-events: auto; margin-top: 40px; }
  .js .time-final .time-fecho, .js .time-final .time-sub, .js .time-final .time-cta { opacity: 1; transform: none; }
  .time-marca { color: var(--papel); } .time-marca::before { transform: none; }
  .estouro { display: none; }
  .orbita-raios, .orbita-raios line, .orbita-nucleo { animation: none; }
  .js .eq-t { opacity: 1; filter: none; transform: none; }
}
html:not(.js) .time { height: auto; }
html:not(.js) .time-final { margin-top: 40px; }

/* cérebro em cima, texto embaixo, tudo centralizado (a simulação saiu, Gui 30/09) */
.cerebro-grade--pilha { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 44px; }
.cerebro-grade--pilha .orbita { width: min(100%, 460px); }
.cerebro-grade--pilha .cerebro-txt { max-width: 640px; }
.cerebro-grade--pilha .cerebro-lead, .cerebro-grade--pilha .cerebro-fecho { margin-left: auto; margin-right: auto; }
.cerebro-cab { margin-bottom: 36px; }
/* a máscara de cada palavra (SplitText) cortaria a perna do "j" e do "p": dá respiro embaixo */
.abre .abw-mask { padding-bottom: .14em; margin-bottom: -.14em; }
/* "realidade" e o ponto viram duas palavras no SplitText: o nowrap impede o ponto de cair sozinho */
.abre-junto { white-space: nowrap; }
@media (max-width: 760px) {
  .cerebro-grade--pilha { text-align: left; justify-items: stretch; }
  .cerebro-grade--pilha .orbita { justify-self: center; }
}
/* ---------- "Por que somos diferentes" sobe e entra na frente da tela anterior (Gui, 30/09) ----------
   A seção dos cargos ganha uma tela a mais de altura; o bloco escuro tem margem negativa de uma
   tela, então ele sobe por cima enquanto a virada ("Agora, você só precisa contratar a Bravix")
   continua presa atrás, encolhendo e apagando conforme --cobre (app.js, cargos). */
.time { height: 420vh; }
/* meia tela de sobreposição: ele entra logo depois que a virada sumiu, sem buraco e sem cobrir texto */
.cerebro { position: relative; z-index: 3; margin-top: -50vh; margin-top: -50svh; }
.time-pin .time-palco { transform: translateY(calc(var(--sai, 0) * -70px)) scale(calc(1 - var(--sai, 0) * .1)); opacity: calc(1 - var(--sai, 0)); }
@media (prefers-reduced-motion: reduce) {
  .cerebro { margin-top: 0; }
  .time-pin .time-palco { transform: none; opacity: 1; }
}
html:not(.js) .cerebro { margin-top: 0; }
/* ---------- A equação sai antes do "Projeto de 90 dias" entrar (Gui, 30/09) ----------
   Mesma linguagem do bloco escuro: a equação fica presa uma tela e a oferta sobe por cima, como um
   card; a equação encolhe e apaga conforme --cobre (app.js, equacao). */
.equacao { height: 280vh; height: 280svh; padding: 0; }   /* 1 tela só dela + 80% de respiro antes da oferta subir */
.equacao > .wrap { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; justify-content: center; }
.equacao .eq { transform: scale(calc(1 - var(--cobre, 0) * .1)); opacity: calc(1 - var(--cobre, 0) * .85); }
#oferta { position: relative; z-index: 3; margin-top: -100vh; margin-top: -100svh; border-radius: 32px 32px 0 0; box-shadow: 0 -30px 70px -34px rgba(18,19,23,.35); }
@media (max-width: 760px) { #oferta { border-radius: 24px 24px 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .equacao { height: auto; padding: 120px 0; }
  .equacao > .wrap { position: static; height: auto; }
  .equacao .eq { transform: none; opacity: 1; }
  #oferta { margin-top: 0; }
}
html:not(.js) .equacao { height: auto; padding: 120px 0; }
html:not(.js) .equacao > .wrap { position: static; height: auto; }
html:not(.js) #oferta { margin-top: 0; }
/* abertura: palavras que acendem com a rolagem (app.js, abertura); "sonho" em azul (Gui, 30/09) */
.abre-sonho { color: var(--azul); }
.js .abre .acende { opacity: calc(.14 + .86 * var(--a, 0)); transition: opacity .15s linear; }
.js .abre-real { opacity: 1; transform: none; }
/* abertura = uma tela inteira, com o conteúdo centralizado (Gui, 30/09): primeiro só ela, depois os
   capítulos. Some o vão entre "Veja onde a IA entra" e o índice. */
.abre { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 96px 0 72px; }
.abre > .wrap { width: 100%; }
@media (max-width: 760px) {
  .abre { padding: 84px 0 96px; }
  .abre-estrutura { margin-top: 36px; }
}
/* abertura de volta como bloco próprio, mas sem ocupar a tela inteira (Gui, 30/09): o vão até o
   índice dos capítulos ficou curto. */
.abre { min-height: 0; display: block; padding: 120px 0 8px; }
@media (max-width: 760px) {
  .abre { padding: 88px 0 0; }
  .abre-estrutura { margin-top: 30px; }
}

/* ---------- Crachás: os cargos que caem (rodada 3, 30/09) ----------
   Foto do crachá (Higgsfield, recortada) com o texto em HTML por cima, na área do cartão
   (--cx/--cy/--cw/--ch). Balanço leve parado; a queda é o app.js (cargos) que escreve. */
.crachas {
  --ar: .481; --cx: 8%; --cy: 35%; --cw: 84%; --ch: 58%;
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; margin-top: 4px;
}
/* a sombra mora aqui fora: no .cracha-corpo a máscara do cordão cortaria a sombra num retângulo */
.cracha { position: relative; width: 100%; max-width: 124px; transform-origin: 50% 0; will-change: transform; filter: drop-shadow(0 16px 18px rgba(18, 19, 23, .16)); }
.cracha--bravix { filter: drop-shadow(0 22px 26px rgba(0, 40, 120, .28)); }
/* a queda gira o crachá pra fora da borda: a seção corta, senão o celular alarga a página */
.time { overflow: clip; }
.crachas .cracha { width: calc((100% - 24px) / 3); }
.cracha-corpo {
  position: relative; display: block; aspect-ratio: var(--ar);
  background: url("assets/cenas/cracha-branco.webp") center / 100% 100% no-repeat;
  transform-origin: 50% 0; animation: balanca 3.6s ease-in-out infinite alternate;
  /* o cordão nasce do alto: some suave na ponta de cima */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, var(--noite) 16%);
          mask-image: linear-gradient(to bottom, transparent 0, var(--noite) 16%);
}
.cracha:nth-child(2n) .cracha-corpo { animation-duration: 4.3s; animation-delay: -1.2s; }
.cracha:nth-child(3n) .cracha-corpo { animation-duration: 3.9s; animation-delay: -2.1s; }
@keyframes balanca { from { transform: rotate(-1.6deg); } to { transform: rotate(1.6deg); } }
.cracha-txt {
  position: absolute; left: var(--cx); top: var(--cy); width: var(--cw); height: var(--ch);
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px;
  padding: 8% 7%; text-align: center; container-type: inline-size;
}
.cracha-txt b { font-family: var(--f-disp); font-weight: 600; font-size: 15cqw; line-height: 1.02; letter-spacing: -.03em; color: var(--tinta); }
.cracha-txt small { font-size: 10.4cqw; line-height: 1.25; color: var(--tinta-3); }
.cracha-txt small { font-size: 11.6cqw; }
/* o X vermelho (Gui, 30/09): dois traços que se desenham por cima do cartão quando a rolagem chega nele */
.cracha-x { position: absolute; left: var(--cx); top: var(--cy); width: var(--cw); height: var(--ch); pointer-events: none; }
.cracha-x::before, .cracha-x::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 118%; height: 5px; border-radius: 4px;
  background: #E5383B; box-shadow: 0 2px 6px rgba(229, 56, 59, .35);
  transform: translate(-50%, -50%) rotate(var(--r)) scaleX(0); transition: transform .35s var(--ease);
}
.cracha-x::before { --r: 52deg; }
.cracha-x::after { --r: -52deg; transition-delay: .12s; }
.cracha.riscado .cracha-x::before, .cracha.riscado .cracha-x::after { transform: translate(-50%, -50%) rotate(var(--r)) scaleX(1); }
.cracha.riscado .cracha-txt { opacity: .45; transition: opacity .4s var(--ease); }
/* a fileira sai antes da Bravix entrar */
.crachas { transition: opacity .5s var(--ease), transform .5s var(--ease); }
.js .time-lista.somem .crachas { opacity: 0; transform: translateY(-30px) scale(.96); }
/* o da Bravix: maior, azul, desce balançando como pêndulo quando a virada entra */
.cracha--bravix { --ar: .509; --cx: 6%; --cy: 30%; --cw: 88%; --ch: 66%; width: 100%; max-width: 150px; margin: 0 auto 16px; }
.cracha--bravix .cracha-corpo { background-image: url("assets/cenas/cracha-azul.webp"); animation: none; }
.cracha--bravix .cracha-txt b { color: var(--claro-tx); font-size: 17cqw; }
.cracha--bravix .cracha-txt small { color: rgba(242, 242, 238, .78); }
.cracha--bravix .cracha-txt img { width: 26cqw; height: auto; }
.js .cracha--bravix { opacity: 0; transform: translateY(-110vh); }
.js .time-final.on .cracha--bravix { opacity: 1; animation: pendulo 1.9s cubic-bezier(.3, .7, .4, 1) both; }
@keyframes pendulo {
  0% { transform: translateY(-110vh) rotate(0); }
  38% { transform: translateY(0) rotate(9deg); }
  54% { transform: translateY(0) rotate(-6deg); }
  70% { transform: translateY(0) rotate(3.5deg); }
  84% { transform: translateY(0) rotate(-1.6deg); }
  100% { transform: translateY(0) rotate(0); }
}
/* o estouro sai do crachá quando ele chega */
.time-final .estouro { top: 30%; }
.js .time-final.on .estouro::before, .js .time-final.on .estouro i { animation-delay: .7s; }
.js .time-final .time-fecho { transition-delay: .6s; }
.js .time-final .time-sub, .js .time-final .time-cta { transition-delay: 1.1s; }
@media (min-width: 761px) {
  .crachas { flex-wrap: nowrap; gap: 0 22px; max-width: 980px; margin: 10px auto 0; }
  .time-lista .time-intro { text-align: center; margin-left: auto; margin-right: auto; }
  .crachas .cracha { width: calc((100% - 88px) / 5); max-width: 176px; }
  .cracha--bravix { max-width: 190px; }
}
@media (prefers-reduced-motion: reduce) {
  .cracha-corpo { animation: none; }
  .js .cracha--bravix { opacity: 1; transform: none; animation: none; }
}
html:not(.js) .cracha--bravix { opacity: 1; transform: none; }

/* ---------- Cérebro: vídeo do segundo cérebro (rodada 3b, 30/09) ----------
   Sem prender a tela: título, o vídeo em loop do Higgsfield (cérebro no centro, ícones girando e
   mandando informação) e o texto. A máscara radial funde as bordas do vídeo no fundo da seção. */
.cerebro { height: auto; padding: 120px 0 110px; overflow: clip; }
.cerebro .cerebro-cab { text-align: center; margin: 0 auto; max-width: 900px; }
.cerebro .cerebro-cab h2 { margin: 16px auto 0; max-width: 17ch; font-size: clamp(2.1rem, 4.6vw, 3.9rem); }
/* Camadas, de trás pra frente: fios e pulsos (canvas) → ícones de trás → cérebro em vídeo (screen:
   o preto vira transparente e a luz soma) → ícones da frente → brilho da chegada. */
.cerebro-video { position: relative; isolation: isolate; width: min(100%, 600px); aspect-ratio: 1; margin: 18px auto 8px; }
.cerebro-video video, .anel-fios { position: absolute; inset: 0; width: 100%; height: 100%; }
.anel-fios { z-index: 1; }
.cerebro-video video {
  z-index: 2; object-fit: cover; background: transparent; mix-blend-mode: screen;
  transform: scale(.74);
  -webkit-mask-image: radial-gradient(closest-side, var(--noite) 70%, transparent 100%);
          mask-image: radial-gradient(closest-side, var(--noite) 70%, transparent 100%);
}
.cerebro-video::after {
  content: ""; position: absolute; inset: 22%; z-index: 4; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle, rgba(64, 132, 255, .55), rgba(0, 92, 252, 0) 66%);
  mix-blend-mode: screen; opacity: calc(var(--brilho, 0) * .9); transform: scale(calc(.9 + var(--brilho, 0) * .18));
}
.anel { position: absolute; inset: 0; }
.anel-i { position: absolute; left: 0; top: 0; z-index: 3; width: 15%; will-change: transform, opacity; }
.anel-i img { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 18px rgba(0, 30, 90, .55)); }
/* recebeu mensagem do cérebro: halo azul atrás do ícone (--rec, app.js) */
.anel-i::before { content: ""; position: absolute; inset: -35%; z-index: -1; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(64, 132, 255, .6), rgba(0, 92, 252, 0) 62%); opacity: var(--rec, 0); }
.anel-i::after {
  content: attr(data-rot); position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%);
  white-space: nowrap; font-size: .74rem; font-weight: 600; letter-spacing: .02em; color: var(--claro-tx);
  padding: 4px 10px; border-radius: 999px; background: rgba(17, 19, 26, .78); border: 1px solid rgba(156, 192, 255, .22);
  opacity: var(--rot, 0); transition: opacity .25s linear;
}
/* sem JS os ícones não têm posição: fica só o cérebro (com reduzir movimento o app.js os põe parados) */
html:not(.js) .anel-i { display: none; }
.cerebro .cerebro-txt { max-width: 640px; margin: 0 auto; text-align: center; }
.cerebro .cerebro-lead { font-size: 1.15rem; margin: 0 auto; max-width: 46ch; }
.cerebro .cerebro-fecho { font-size: 1.15rem; margin: 18px auto 28px; max-width: 46ch; }
@media (max-width: 760px) {
  .cerebro { padding: 88px 0 90px; }
  .cerebro .cerebro-cab, .cerebro .cerebro-txt { text-align: left; }
  .cerebro .cerebro-cab h2 { margin-left: 0; font-size: clamp(1.95rem, 8.6vw, 2.6rem); }
  .cerebro-video { width: calc(100% + 24px); margin: 10px -12px 0; }
  .cerebro .cerebro-lead, .cerebro .cerebro-fecho { font-size: 1rem; margin-left: 0; }
}

/* ---------- Projeto de 90 dias: linha do tempo que enche com a rolagem (app.js, linha90) ---------- */
.linha90 { list-style: none; position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin: 52px 0 60px; padding-top: 34px; }
.linha90::before, .linha90::after { content: ""; position: absolute; left: 0; top: 0; height: 2px; border-radius: 2px; }
.linha90::before { right: 0; background: var(--filete); }
.linha90::after { width: calc(var(--f, 1) * 100%); background: var(--azul); }
.linha90 li { position: relative; }
.linha90 li::before {
  content: ""; position: absolute; left: 0; top: -41px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--azul); border: 2px solid var(--azul); transition: background .4s var(--ease), border-color .4s var(--ease);
}
.l90-n { font-family: var(--f-disp); font-weight: 600; font-size: clamp(3.4rem, 7vw, 5.6rem); line-height: 1; letter-spacing: -.05em; color: var(--tinta); transition: color .5s var(--ease); }
.linha90 small { margin-left: 8px; font-size: .95rem; color: var(--tinta-3); }
.linha90 b { display: block; margin-top: 14px; font-family: var(--f-disp); font-weight: 600; font-size: 1.35rem; letter-spacing: -.02em; }
.linha90 p { margin-top: 6px; max-width: 30ch; color: var(--tinta-2); }
.js .linha90 { --f: 0; }
.js .linha90 li:not(.on) .l90-n { color: #C4C6CC; }
.js .linha90 li:not(.on)::before { background: var(--papel); border-color: rgba(18, 19, 23, .22); }
@media (max-width: 760px) {
  .linha90 { grid-template-columns: 1fr; gap: 30px; margin: 40px 0 48px; padding: 0 0 0 30px; }
  .linha90::before, .linha90::after { top: 0; left: 6px; width: 2px; height: auto; }
  .linha90::before { bottom: 0; right: auto; }
  .linha90::after { height: calc(var(--f, 1) * 100%); }
  .linha90 li::before { left: -30px; top: 14px; }
  .l90-n { font-size: 3.4rem; }
}

/* ---------- Projeto de 90 dias: os cards chegam empilhados e se distribuem (app.js, baralho) ---------- */
.js .entra-card.baralho-espera { opacity: 0; }
/* ---------- Fallbacks que precisam vir por último (vencem as regras do celular acima) ----------
   Sem isso, no celular com "reduzir movimento" o palco dos capítulos voltava a ter altura fixa e
   cortava os capítulos 2 a 4, e a equação deixava 1,5 tela vazia. */
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .cap-pin { overflow: visible; }
  .cap-palco { height: auto; }
  .cap-vis { height: 300px; max-height: none; }
  .equacao { height: auto; }
}
html:not(.js) .time, html:not(.js) .equacao { height: auto; padding: 100px 0; }
html:not(.js) .time-pin, html:not(.js) .eq-pin { position: static; height: auto; }
/* no capítulo Comercial (claro) o azul-claro do "respondido em…" some no papel */
.capitulos:not(.escuro) .mini-chat .mc-meta { color: var(--azul); }
/* A equação saiu (Gui, 30/09): a oferta vem direto depois do cérebro, sem subir por cima de nada */
#oferta { margin-top: 0; }

/* ---------- Projeto de 90 dias, versão contínua (30/09): 4 marcos, o último é o "depois" ---------- */
.linha90 { grid-template-columns: repeat(4, 1fr); }
.linha90 .l90-sempre .l90-n { color: var(--azul); }
.js .linha90 li.l90-sempre:not(.on) .l90-n { color: #C4C6CC; }
.oferta-nota { font-size: 1.15rem; color: var(--tinta-2); margin: 0 0 22px; }
.oferta-nota b { color: var(--tinta); font-weight: 600; }
@media (max-width: 760px) { .linha90 { grid-template-columns: 1fr; } .oferta-nota { font-size: 1.02rem; } }

/* ---------- Pra quem é: faixa de cards com foto que anda sozinha (molde Gallery Play) ---------- */
.quem { padding: 110px 0 120px; background: var(--papel); overflow: clip; }
.quem-rot { font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--azul); }
.quem-cab h2 { margin-top: 14px; max-width: 18ch; font-family: var(--f-disp); font-weight: 600; font-variation-settings: "opsz" 96; font-size: clamp(2.1rem, 4.6vw, 3.9rem); line-height: 1; letter-spacing: -.04em; }
.quem-faixa {
  margin-top: 44px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--noite) 5%, var(--noite) 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, var(--noite) 5%, var(--noite) 95%, transparent);
}
.quem-trilho { display: flex; width: max-content; animation: quemAnda 52s linear infinite; }
.quem-faixa:hover .quem-trilho { animation-play-state: paused; }
.quem-lista { display: flex; gap: 16px; padding-right: 16px; list-style: none; }
.qc { position: relative; flex: none; width: 250px; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; background: var(--papel-2); }
.qc img { width: 100%; height: 100%; object-fit: cover; }
.qc::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(7, 8, 12, .8) 0%, rgba(7, 8, 12, .38) 36%, rgba(7, 8, 12, 0) 60%); }
.qc p { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 1; font-size: .92rem; line-height: 1.35; color: rgba(242, 242, 238, .84); }
.qc b { display: block; margin-bottom: 4px; font-family: var(--f-disp); font-weight: 600; font-size: 1.35rem; letter-spacing: -.02em; color: var(--claro-tx); }
@keyframes quemAnda { to { transform: translateX(-50%); } }
@media (min-width: 761px) { .qc { width: 300px; } }
@media (max-width: 760px) { .quem { padding: 84px 0 90px; } .quem-faixa { margin-top: 32px; } }
@media (prefers-reduced-motion: reduce) {
  .quem-trilho { animation: none; }
  .quem-faixa { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .quem-lista[aria-hidden="true"] { display: none; }
}

/* ---------- Como funciona: número gigante e foto que se revela (molde The Romans) ---------- */
.pgs { list-style: none; margin-top: 30px; }
.pg { display: grid; grid-template-columns: auto 1fr; gap: 6px 22px; align-items: start; padding: 30px 0; border-top: 1px solid var(--filete); }
.pg:last-child { border-bottom: 1px solid var(--filete); }
.pg-n { font-family: var(--f-disp); font-weight: 600; font-size: clamp(4.2rem, 10vw, 8rem); line-height: .82; letter-spacing: -.06em; color: var(--tinta); transition: color .6s var(--ease); }
.js .pg:not(.aceso) .pg-n { color: #C9CBD0; }
.pg-txt h3 { font-family: var(--f-disp); font-weight: 600; font-size: clamp(1.4rem, 2.6vw, 2.2rem); line-height: 1.08; letter-spacing: -.03em; }
.pg-txt p { margin-top: 8px; max-width: 40ch; color: var(--tinta-2); }
.pg-foto { grid-column: 1 / -1; margin-top: 18px; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; background: var(--papel-3); }
.pg-foto img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.2s var(--ease); }
.js .pg .pg-foto { clip-path: inset(100% 0 0 0 round 20px); transition: clip-path .9s var(--ease); }
.js .pg.foto-on .pg-foto { clip-path: inset(0 0 0 0 round 20px); }
.js .pg.foto-on .pg-foto img { transform: none; }
@media (min-width: 761px) {
  .pg { grid-template-columns: 200px 1fr 38%; align-items: center; gap: 40px; padding: 44px 0; }
  .pg-foto { grid-column: auto; margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .js .pg .pg-foto { clip-path: none; }
  .pg-foto img { transform: none; }
}
.linha90 small { margin-left: 1px; }
.linha90 .l90-sempre small { margin-left: 10px; }

/* ---------- Pra quem é, dentro do projeto: nichos organizados, sem foto (30/09) ---------- */
.nichos-bloco { margin: 8px 0 44px; }
.nichos-h { font-size: 1.15rem; color: var(--tinta-2); margin-bottom: 18px; }
.nichos-h b { color: var(--tinta); font-weight: 600; }
.nichos { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.nichos li { display: grid; gap: 6px; padding: 18px 20px; border-radius: 18px; background: var(--papel-3); border: 1px solid var(--filete); }
.nichos b { font-family: var(--f-disp); font-weight: 600; font-size: 1.12rem; letter-spacing: -.02em; }
.nichos span { font-size: .92rem; line-height: 1.4; color: var(--tinta-3); }
@media (max-width: 760px) { .nichos { grid-template-columns: 1fr; gap: 10px; } .nichos li { padding: 16px 18px; } .nichos-h { font-size: 1.02rem; } }

/* ---------- Cargos de volta em lista (01/10): traço VERMELHO, um por vez com a rolagem ---------- */
.cargos li span::after { background: #E5383B; height: .08em; }
.cargos li.riscado span { color: rgba(18, 19, 23, .3); }
.cargos li small { transition: opacity .5s var(--ease); }
.js .time-lista.somem .cargos { opacity: 0; transform: translateY(-30px) scale(.96); }
.cargos { transition: opacity .5s var(--ease), transform .5s var(--ease); }
/* frase e lista de cargos centralizadas, alinhadas com a virada do crachá que vem depois (Gui, 01/10) */
.time-lista { text-align: center; }
.time-lista .time-intro { margin-left: auto; margin-right: auto; }
.cargos li small { font-size: clamp(.95rem, 1.3vw, 1.1rem); color: var(--tinta-2); margin: 4px 0 12px; }
.cargos li.riscado small { opacity: .7; }

/* ---------- Diferencial com as 3 camadas (01/10) ---------- */
.cerebro-apoio { margin: 18px auto 0; max-width: 44ch; font-size: 1.15rem; color: var(--claro-2); }
.camadas { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 980px; margin: 8px auto 40px; }
.camadas li { padding: 26px 24px; border-radius: 22px; background: rgba(17, 19, 26, .7); border: 1px solid rgba(156, 192, 255, .16); text-align: left; }
.cam-n { font-family: var(--f-disp); font-weight: 600; font-size: .85rem; letter-spacing: .08em; color: var(--azul-cl); }
.camadas h3 { margin: 10px 0 8px; font-family: var(--f-disp); font-weight: 600; font-size: 1.5rem; letter-spacing: -.03em; color: var(--claro-tx); }
.camadas p { color: var(--claro-2); font-size: 1rem; line-height: 1.45; }
.cerebro .cerebro-txt .cerebro-fecho { margin-top: 0; }
@media (max-width: 760px) {
  .cerebro-apoio { margin-left: 0; font-size: 1rem; }
  .camadas { grid-template-columns: 1fr; gap: 10px; margin: 4px 0 30px; }
  .camadas li { padding: 20px; }
  .camadas h3 { font-size: 1.3rem; }
}

/* ---------- Projeto de 90 dias: rótulos em palavra e "Como acompanhamos" (01/10) ---------- */
.linha90 small, .linha90 .l90-sempre small { margin-left: 10px; }
.acompanha { margin: 0 0 48px; padding: 28px; border-radius: 24px; background: var(--papel-2); border: 1px solid var(--filete); }
.acompanha-h { font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--azul); margin-bottom: 16px; }
.acompanha ul { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.acompanha li { display: grid; gap: 6px; padding-left: 16px; border-left: 2px solid var(--azul); }
.acompanha b { font-family: var(--f-disp); font-weight: 600; font-size: 1.2rem; letter-spacing: -.02em; }
.acompanha span { color: var(--tinta-2); font-size: .98rem; }
@media (max-width: 760px) { .acompanha { padding: 22px 20px; } .acompanha ul { grid-template-columns: 1fr; gap: 16px; } }

/* ---------- Intro do robô (01/10, molde 1367 Studio) ----------
   Palco preso: o loop de vídeo (robô vivo, sem texto) e, por cima, o canvas da cena que a rolagem
   escolhe quadro a quadro (--cena = quanto a cena já tomou a tela). No fim, a intro some de vez
   (app.js, introRobo) e o topo começa com o mesmo "universo" do último quadro. */
.intro-robo { position: relative; height: 270vh; height: 270svh; background: var(--noite); }
.sem-intro .intro-robo, html:not(.js) .intro-robo { display: none; }
.intro-palco { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--noite); }
.intro-loop, .intro-cena { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.intro-cena { opacity: var(--cena, 0); }
.intro-dica {
  position: absolute; left: 50%; bottom: 5vh; bottom: 5svh; transform: translateX(-50%);
  font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(242, 242, 238, .6); opacity: calc(1 - var(--cena, 0) * 4); transition: opacity .3s;
}
.intro-dica::after {
  content: ""; display: block; width: 1px; height: 40px; margin: 12px auto 0;
  background: linear-gradient(rgba(156, 192, 255, .7), transparent); transform-origin: top;
  animation: introDica 1.8s ease-in-out infinite;
}
@keyframes introDica { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
/* a navegação só aparece quando o site "abre" */
#nav { transition: opacity .6s var(--ease), transform .6s var(--ease); }
.com-intro #nav { opacity: 0; transform: translateY(-14px); pointer-events: none; }

/* ---------- Topo sem o robô: o universo de fundo ---------- */
.hero { height: auto; }
.hero-pin { position: relative; min-height: 100vh; min-height: 100svh; }
.hero-fundo, .hero-fundo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
/* o vídeo gerado veio com uma faixa preta fina no alto: um zoom leve esconde a borda */
.intro-loop, .intro-cena { transform: scale(1.035); }
.intro-dica { text-shadow: 0 1px 12px rgba(7, 8, 12, .9); }
.intro-palco::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28%; pointer-events: none; background: linear-gradient(transparent, rgba(7, 8, 12, .55)); opacity: calc(1 - var(--cena, 0)); }
.hero-fundo img { transform: scale(1.035); }

/* ---------- O "pum" ao sair do robô (01/10) ----------
   .abrindo segura a rolagem 1,4 s; .hero-abre: o universo vem de perto e claro (como se a câmera
   ainda estivesse saindo do olho), um clarão azul apaga e o texto entra em sequência. */
html.abrindo, html.abrindo body { overflow: hidden; touch-action: none; }
.hero-abre .hero-fundo img { animation: universoAbre 1.7s cubic-bezier(.16, .8, .24, 1) both; }
@keyframes universoAbre { from { transform: scale(1.5); filter: brightness(2) saturate(1.3); } to { transform: scale(1.035); filter: none; } }
.hero-pin::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 42%, rgba(205, 225, 255, .9), rgba(43, 116, 255, .45) 38%, rgba(7, 8, 12, 0) 72%); }
.hero-abre .hero-pin::after { animation: clarao 1.2s ease-out both; }
@keyframes clarao { from { opacity: 1; } to { opacity: 0; } }
.hero-abre .hero-copy > * { animation: heroEntra 1s var(--ease) both; }
.hero-abre .hero-copy > :nth-child(1) { animation-delay: .45s; }
.hero-abre .hero-copy > :nth-child(2) { animation-delay: .6s; }
.hero-abre .hero-copy > :nth-child(3) { animation-delay: .78s; }
.hero-abre .hero-copy > :nth-child(4) { animation-delay: .92s; }
.hero-abre .hero-copy > :nth-child(5) { animation-delay: 1.05s; }
@keyframes heroEntra { from { opacity: 0; transform: translateY(28px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
/* o universo do topo não fica parado: gira e respira bem devagar (o "ainda estamos dentro do olho") */
.hero-fundo { animation: universoVive 46s ease-in-out infinite alternate; transform-origin: 50% 45%; }
@keyframes universoVive { from { transform: scale(1.12) rotate(-1.6deg); } to { transform: scale(1.2) rotate(1.6deg); } }
@media (max-width: 760px) { .hero-fundo { transform-origin: 50% 22%; } }
@media (prefers-reduced-motion: reduce) { .hero-fundo, .hero-abre .hero-fundo img, .hero-abre .hero-copy > * { animation: none; } }

/* ---------- Abertura presa + cenas subindo por cima (01/10) ---------- */
.abre-cenas { position: relative; }
.js .abre-cenas > .abre {
  position: sticky; top: 0; z-index: 1; min-height: 0; height: 100vh; height: 100svh;
  display: flex; align-items: center; padding: 72px 0 40px;
  opacity: calc(1 - var(--cob, 0) * .75); transform: scale(calc(1 - var(--cob, 0) * .06)); transform-origin: 50% 30%;
}
.abre-cenas > .cenas { position: relative; z-index: 2; border-radius: 34px 34px 0 0; box-shadow: 0 -34px 80px -40px rgba(18, 19, 23, .4); }
.abre-cenas .abre-estrutura { border-top: 0; padding-top: 0; margin-top: 46px; font-size: 1rem; font-weight: 600; letter-spacing: .02em; color: var(--azul); }
.abre-cenas .abre-estrutura span { display: inline-block; margin-left: 6px; animation: setaDesce 1.6s ease-in-out infinite; }
@keyframes setaDesce { 0%, 100% { transform: none; } 50% { transform: translateY(5px); } }
@media (max-width: 760px) {
  .js .abre-cenas > .abre { padding: 64px 0 30px; }
  .abre-cenas > .cenas { border-radius: 26px 26px 0 0; }
  .abre-cenas .abre-estrutura { margin-top: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .abre-cenas > .abre { position: relative; height: auto; opacity: 1; transform: none; padding: 96px 0 60px; }
  .abre-cenas .abre-estrutura span { animation: none; }
}

/* ---------- Intro reversível (01/10, 2ª versão) ----------
   O topo sobe por baixo da última tela da intro (margem -100svh) e o palco apaga (--sai) revelando
   ele: sem corte, e rolar pra cima volta pra cena. A intro não recebe clique (o topo por baixo sim). */
.intro-robo { background: none; z-index: 5; pointer-events: none; }
.intro-palco { opacity: calc(1 - var(--sai, 0)); }
.com-intro .hero { margin-top: -100vh; margin-top: -100svh; }
.com-intro #nav { opacity: 1; transform: none; pointer-events: auto; }
.na-intro #nav { opacity: 0; transform: translateY(-14px); pointer-events: none; }
.na-intro .hero-copy, .na-intro .hero-chuva { opacity: 0; }
.hero-chuva { transition: opacity .8s var(--ease) .6s; }

/* universo vivo, agora visível: gira e respira, e o núcleo pulsa */
.hero-fundo { animation: universoVive 22s ease-in-out infinite alternate; transform-origin: 50% 48%; }
@keyframes universoVive { from { transform: scale(1.2) rotate(-3deg); } to { transform: scale(1.3) rotate(3deg); } }
.hero-pin::before {
  content: ""; position: absolute; z-index: 1; left: 50%; top: 48%; width: 60vmin; height: 60vmin; pointer-events: none;
  transform: translate(-50%, -50%); border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(170, 205, 255, .55), rgba(43, 116, 255, .18) 40%, rgba(7, 8, 12, 0) 70%);
  animation: nucleoPulsa 5s ease-in-out infinite;
}
@keyframes nucleoPulsa { 0%, 100% { opacity: .35; transform: translate(-50%, -50%) scale(.9); } 50% { opacity: .85; transform: translate(-50%, -50%) scale(1.08); } }
@media (max-width: 760px) {
  .hero-fundo { transform-origin: 50% 20%; }
  .hero-pin::before { top: 20%; width: 80vmin; height: 80vmin; }
}
@media (prefers-reduced-motion: reduce) { .hero-pin::before { animation: none; } }
@media (max-width: 760px) { .intro-loop, .intro-cena { transform-origin: 50% 100%; transform: scale(1.1); } }

/* ---------- Intro no computador com a cena vertical aprovada (01/10) ----------
   O vídeo fica inteiro no centro, na altura da tela, com as laterais fundidas no espaço (máscara) e
   um brilho azul de fundo, no estilo da composição centralizada da 1367. O fundo escuro da intro
   cobre só a parte de cima dela: o vão que aparecia cinza enquanto a cena apaga agora é escuro, e a
   última tela continua transparente pra revelar o topo. */
.intro-robo { background: linear-gradient(var(--noite) calc(100% - 100vh), transparent calc(100% - 100vh)); }
@supports (height: 100svh) { .intro-robo { background: linear-gradient(var(--noite) calc(100% - 100svh), transparent calc(100% - 100svh)); } }
@media (min-width: 761px) {
  .intro-palco { background: radial-gradient(ellipse 60% 70% at 50% 42%, #0B1A3C 0%, #08101F 45%, var(--noite) 80%); }
  .intro-loop, .intro-cena {
    object-fit: contain; transform: scale(1.06); transform-origin: 50% 100%;
    -webkit-mask-image: linear-gradient(90deg, transparent calc(50% - 30vh), var(--noite) calc(50% - 21vh), var(--noite) calc(50% + 21vh), transparent calc(50% + 30vh));
            mask-image: linear-gradient(90deg, transparent calc(50% - 30vh), var(--noite) calc(50% - 21vh), var(--noite) calc(50% + 21vh), transparent calc(50% + 30vh));
  }
}
@media (min-width: 761px) {
  .intro-loop, .intro-cena {
    -webkit-mask-image: linear-gradient(90deg, transparent calc(50% - 27vh), var(--noite) calc(50% - 13vh), var(--noite) calc(50% + 13vh), transparent calc(50% + 27vh));
            mask-image: linear-gradient(90deg, transparent calc(50% - 27vh), var(--noite) calc(50% - 13vh), var(--noite) calc(50% + 13vh), transparent calc(50% + 27vh));
  }
  .intro-palco::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22%; z-index: 1; pointer-events: none; background: linear-gradient(var(--noite), rgba(7, 8, 12, 0)); opacity: calc(1 - var(--cena, 0)); }
}
/* o loop apaga quando a cena assume (nas bordas suavizadas os dois somavam e o corpo do robô vazava) */
.intro-loop { opacity: calc(1 - var(--cena, 0)); }
.intro-ambiente { display: none; }
@media (min-width: 761px) {
  .intro-ambiente { display: block; position: absolute; inset: -10%; width: 120%; height: 120%; filter: blur(48px) saturate(1.3) brightness(.62); opacity: calc(var(--cena, 0) * .9); }
}
@media (min-width: 761px) {
  .intro-ambiente { filter: blur(70px) saturate(2) brightness(.34) contrast(1.1); opacity: calc(var(--cena, 0) * .85); }
}
@media (min-width: 761px) {
  .intro-ambiente {
    inset: 0; width: 100%; height: 100%; filter: saturate(1.4) brightness(.55); opacity: calc(var(--cena, 0) * .9);
    -webkit-mask-image: radial-gradient(ellipse 62% 75% at 50% 45%, var(--noite) 0%, rgba(7, 8, 12, .45) 45%, transparent 78%);
            mask-image: radial-gradient(ellipse 62% 75% at 50% 45%, var(--noite) 0%, rgba(7, 8, 12, .45) 45%, transparent 78%);
  }
}
/* halo: o canvas de 1 px só mede; quem pinta é o fundo do palco, no azul da marca, na força do quadro */
.intro-ambiente { display: none !important; }
@media (min-width: 761px) {
  .intro-palco { background: radial-gradient(ellipse 60% 72% at 50% 45%, rgba(0, 92, 252, calc(.1 + var(--lum, 0) * .9 * var(--cena, 0))) 0%, rgba(0, 40, 120, calc(var(--lum, 0) * .35 * var(--cena, 0))) 40%, rgba(7, 8, 12, 0) 75%), var(--noite); }
}
@media (min-width: 761px) {
  .intro-palco { background: radial-gradient(ellipse 70% 85% at 50% 45%, rgba(0, 92, 252, calc(.12 + var(--lum, 0) * 1.3 * var(--cena, 0))) 0%, rgba(0, 50, 150, calc(var(--lum, 0) * .7 * var(--cena, 0))) 45%, rgba(7, 8, 12, 0) 80%), var(--noite); }
}

/* ---------- Topo parado e nítido (01/10) ----------
   O fundo agora é a imagem original em 2K (não mais um quadro do vídeo esticado) e fica PARADO: o Gui
   achou que o giro parecia "FPS baixo". Saem o giro, o pulso e o zoom de enquadramento. A íris do
   fim da cena acende (bloom) enquanto apaga e revela o topo; a entrada do topo ficou curta e suave. */
.hero-fundo { animation: none; transform: none; }
.hero-fundo img { transform: none; }
.hero-pin::before { content: none; }
.intro-palco { filter: brightness(calc(1 + var(--sai, 0) * 1.4)); }
.hero-abre .hero-fundo img { animation: universoAbre 1.2s cubic-bezier(.16, .8, .24, 1) both; }
@keyframes universoAbre { from { transform: scale(1.1); filter: brightness(1.7); } to { transform: none; filter: none; } }
/* pausa de leitura: a abertura fica sozinha mais ~70% de tela antes da folha das cenas começar a subir (Gui, 01/10) */
.js .abre-cenas > .cenas { margin-top: 70vh; margin-top: 70svh; }
@media (prefers-reduced-motion: reduce) { .js .abre-cenas > .cenas { margin-top: 0; } }

/* ---------- Projeto de 90 dias: folha nova + "pra quem é" em uma frase (01/10) ---------- */
#oferta { position: relative; z-index: 3; margin-top: -56px; border-radius: 36px 36px 0 0; box-shadow: 0 -30px 70px -30px rgba(7, 8, 12, .55); }
.oferta-rot { display: block; font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--azul); margin-bottom: 14px; }
.praquem-frase { margin: 6px 0 40px; padding: 26px 28px; border-radius: 22px; background: var(--noite); color: var(--claro-tx); font-family: var(--f-disp); font-weight: 600; font-size: clamp(1.25rem, 2.4vw, 1.9rem); line-height: 1.2; letter-spacing: -.02em; }
.praquem-frase span { display: block; margin-bottom: 10px; font-family: var(--f-corpo); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--azul-cl); }
@media (max-width: 760px) { #oferta { margin-top: -40px; border-radius: 28px 28px 0 0; } .praquem-frase { padding: 22px 20px; } }

/* cérebro: imagem fixa por baixo, vídeo por cima só quando toca (.vid-on) */
.cerebro-poster {
  position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; transform: scale(.74);
  -webkit-mask-image: radial-gradient(closest-side, var(--noite) 70%, transparent 100%);
          mask-image: radial-gradient(closest-side, var(--noite) 70%, transparent 100%);
}
.cerebro-video video { opacity: 0; transition: opacity .5s ease; }
.cerebro-video.vid-on video { opacity: 1; }
.cerebro { padding-bottom: 170px; }
@media (max-width: 760px) { .cerebro { padding-bottom: 130px; } }

/* ---------- Laser do Projeto de 90 dias (01/10) ----------
   O preenchimento da linha vira um feixe: núcleo branco, corpo azul e brilho. A ponta (.l90-ponta)
   anda junto com --f e faísca; o marco atingido acende com pulso. */
.linha90::after { background: linear-gradient(90deg, rgba(0, 92, 252, .15), #2B74FF 55%, #CFE0FF); height: 3px; box-shadow: 0 0 10px rgba(43, 116, 255, .9), 0 0 26px rgba(0, 92, 252, .55); }
.l90-ponta { position: absolute; left: calc(var(--f, 0) * 100%); top: 1px; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fff 0 22%, #9CC0FF 40%, rgba(0, 92, 252, 0) 72%); box-shadow: 0 0 22px 6px rgba(43, 116, 255, .75); animation: laserFaisca .9s ease-in-out infinite alternate; }
@keyframes laserFaisca { from { transform: scale(.85); opacity: .85; } to { transform: scale(1.25); opacity: 1; } }
.js .linha90 li.on::before { animation: marcoAcende .7s var(--ease) both; box-shadow: 0 0 0 5px rgba(0, 92, 252, .18), 0 0 18px rgba(43, 116, 255, .8); }
@keyframes marcoAcende { from { transform: scale(.4); } 60% { transform: scale(1.4); } to { transform: none; } }
@media (max-width: 760px) {
  .linha90::after { width: 3px; background: linear-gradient(180deg, rgba(0, 92, 252, .15), #2B74FF 55%, #CFE0FF); }
  .l90-ponta { left: 7px; top: calc(var(--f, 0) * 100%); margin: -8px 0 0 -7px; }
}
@media (prefers-reduced-motion: reduce) { .l90-ponta { display: none; } }
@media (max-width: 760px) { .linha90::after { height: calc(var(--f, 1) * 100%); width: 3px; left: 5px; } }
/* a linha e o laser param no ∞ (--fim, app.js); na chegada a ponta clareia e some dentro dele */
.js .linha90::before { right: auto; width: var(--fim, 100%); }
.js .linha90::after { width: calc(var(--f, 1) * var(--fim, 100%)); }
.js .l90-ponta { left: calc(var(--f, 0) * var(--fim, 100%)); transition: opacity .3s; }
.js .linha90.fim .l90-ponta { animation: laserChega .7s ease-out forwards; }
@keyframes laserChega { 0% { transform: scale(1.25); opacity: 1; } 40% { transform: scale(2.6); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; } }
.js .linha90.fim li.l90-sempre::before { animation: marcoAcende .7s var(--ease) both, sempreVivo 2.6s ease-in-out .7s infinite; }
@keyframes sempreVivo { 0%, 100% { box-shadow: 0 0 0 5px rgba(0, 92, 252, .18), 0 0 18px rgba(43, 116, 255, .8); } 50% { box-shadow: 0 0 0 10px rgba(0, 92, 252, .1), 0 0 34px rgba(43, 116, 255, 1); } }
@media (max-width: 760px) {
  .js .linha90::before { width: 2px; bottom: auto; height: var(--fim, 100%); }
  .js .linha90::after { width: 3px; height: calc(var(--f, 1) * var(--fim, 100%)); }
  .js .l90-ponta { left: 7px; top: calc(var(--f, 0) * var(--fim, 100%)); }
}
/* fora da tela, toda animação CSS em loop fica pausada (app.js, pausaForaDaTela) */
.fora, .fora *, .fora *::before, .fora *::after { animation-play-state: paused !important; }

/* ---------- Intro: o robô nunca some (01/10) ----------
   O 1º quadro (imagem) fica sempre por baixo; o loop só aparece por cima quando está tocando (.loop-on).
   Mesmo enquadramento do vídeo em cada tamanho de tela. */
.intro-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.035); opacity: calc(1 - var(--cena, 0)); }
.intro-palco:not(.loop-on) .intro-loop { opacity: 0; }
.intro-loop { transition: opacity .35s ease; }
@media (max-width: 760px) { .intro-poster { transform-origin: 50% 100%; transform: scale(1.1); } }
@media (min-width: 761px) {
  .intro-poster {
    object-fit: contain; transform: scale(1.06); transform-origin: 50% 100%;
    -webkit-mask-image: linear-gradient(90deg, transparent calc(50% - 27vh), var(--noite) calc(50% - 13vh), var(--noite) calc(50% + 13vh), transparent calc(50% + 27vh));
            mask-image: linear-gradient(90deg, transparent calc(50% - 27vh), var(--noite) calc(50% - 13vh), var(--noite) calc(50% + 13vh), transparent calc(50% + 27vh));
  }
}

/* aviso da volta: ao subir até o topo do site, a página dá uma pausa curta e explica o que vem */
.volta-dica {
  position: fixed; left: 50%; top: 84px; z-index: 60; transform: translate(-50%, -10px); opacity: 0; pointer-events: none;
  padding: 9px 16px; border-radius: 999px; background: rgba(17, 19, 26, .82); color: var(--claro-tx);
  font-size: .8rem; font-weight: 600; letter-spacing: .02em; white-space: nowrap;
  border: 1px solid rgba(156, 192, 255, .25); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.volta-dica.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Diferencial e Projeto: duas seções, não uma (01/10) ----------
   O cérebro termina num cartão escuro de cantos redondos e o Projeto começa depois de um respiro claro,
   sem folha encostada (o Gui achou "grudado"). */
#oferta { margin-top: 0; border-radius: 0; box-shadow: none; }
.cerebro { padding-bottom: 110px; }
@media (max-width: 760px) { #oferta { margin-top: 0; border-radius: 0; } .cerebro { padding-bottom: 88px; } }

/* ---------- As 3 camadas com objeto 3D (01/10) ---------- */
.cam3d-intro { text-align: center; margin: 6px auto 26px; font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--azul-cl); }
.cam3d-lista { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: 1040px; margin: 0 auto 48px; }
.cam3d { display: flex; flex-direction: column; align-items: center; text-align: center; }
.cam3d-obj { position: relative; width: min(100%, 250px); aspect-ratio: 1; margin: 0 0 6px; }
.cam3d-obj img, .cam3d-obj video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(closest-side, var(--noite) 66%, transparent 100%);
          mask-image: radial-gradient(closest-side, var(--noite) 66%, transparent 100%);
}
.cam3d-obj video { opacity: 0; transition: opacity .5s ease; }
.cam3d-obj.vid-on video { opacity: 1; }
.cam3d-txt .cam-n { display: block; font-family: var(--f-disp); font-weight: 600; font-size: .9rem; letter-spacing: .1em; color: var(--azul-cl); }
.cam3d-txt h3 { margin: 6px 0 8px; font-family: var(--f-disp); font-weight: 600; font-size: 1.55rem; letter-spacing: -.03em; color: var(--claro-tx); }
.cam3d-txt p { max-width: 28ch; margin: 0 auto; color: var(--claro-2); font-size: 1rem; line-height: 1.45; }
/* celular: lista em linhas alternadas, objeto de um lado e texto do outro */
@media (max-width: 760px) {
  .cam3d-intro { text-align: left; margin: 0 0 14px; }
  .cam3d-lista { grid-template-columns: 1fr; gap: 6px; margin-bottom: 34px; }
  .cam3d { flex-direction: row; align-items: center; gap: 14px; text-align: left; padding: 10px 0; }
  .cam3d:nth-child(2) { flex-direction: row-reverse; text-align: right; }
  .cam3d-obj { flex: none; width: 138px; margin: 0; }
  .cam3d-txt h3 { font-size: 1.3rem; margin: 4px 0 6px; }
  .cam3d-txt p { font-size: .95rem; margin: 0; }
  .cam3d:nth-child(2) .cam3d-txt p { margin-left: auto; }
}
.cam3d-obj.sem-obj { display: none; }
@media (max-width: 760px) { .cam3d:nth-child(2) .cam3d-txt { display: flex; flex-direction: column; align-items: flex-end; } }

/* ---------- Os Agentes Bravix (01/10): carrossel 3D de cartões com foto, guiado pela rolagem ----------
   A seção prende (.fx-palco sticky) e a rolagem vertical move o trilho na horizontal (--x, app.js
   fluxos()). Cada cartão tem --d (distância até o centro, em telas): o que sai recua, vira e apaga; o que
   entra chega virado e assenta, como uma foto chegando num carrossel. A foto anda mais devagar que o
   cartão (paralaxe) e as etapas acendem com ✓ e um pulso no fio enquanto a área está no centro. */
.fluxos { position: relative; background: var(--papel); }
/* o título vem antes, sozinho; só o cartão fica preso. O trecho preso tem 3 áreas × (etapas + painel + deslize) */
.fx-rolo { height: 540vh; height: 540svh; }
.fx-palco { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 84px 0 22px; perspective: 1600px; }
.fx-cab { padding-top: 120px; padding-bottom: 8px; }
.fx-cab h2 { font-family: var(--f-disp); font-weight: 600; font-variation-settings: "opsz" 96; font-size: clamp(1.8rem, 4.2vw, 3.4rem); line-height: 1.02; letter-spacing: -.04em; max-width: 22ch; }
.fx-cab h2 em { font-family: var(--f-serif); font-style: italic; font-weight: 400; color: var(--azul); }
.fx-cab p { margin-top: 10px; color: var(--tinta-2); font-size: 1.02rem; max-width: 60ch; }
.fx-trilho { display: flex; align-items: center; transform: translateX(calc(var(--x, 0) * -100vw)); transform-style: preserve-3d; will-change: transform; }
.fx-bloco { flex: none; width: 100vw; padding: 0 max(20px, calc((100vw - 1140px) / 2)); box-sizing: border-box; --d: 0; --rot: 0deg; --esc: 1; --op: 1; }
.fx-cartao, .fx-bloco > * { position: relative; }
/* o cartão inteiro (foto + corpo) vira e encolhe junto: o 3D fica no bloco, centrado */
.fx-bloco { display: grid; height: min(620px, calc(100svh - 150px)); transform: rotateY(var(--rot)) scale(var(--esc)); opacity: var(--op); transform-origin: 50% 50%; backface-visibility: hidden; }
.fx-bloco::before { content: none; }
.fx-bloco { grid-template-columns: minmax(0, 36%) minmax(0, 1fr); grid-template-rows: 1fr; }
.fx-foto { margin: 0; overflow: hidden; border-radius: 28px 0 0 28px; background: var(--papel-2); min-height: 100%; }
.fx-foto img, .fx-foto picture { display: block; width: 100%; height: 100%; }
.fx-foto img { object-fit: cover; transform: translateX(calc(var(--d) * -9%)) scale(1.18); will-change: transform; }
.fx-corpo { overflow: hidden; background: var(--papel-3); border: 1px solid var(--filete); border-left: 0; border-radius: 0 28px 28px 0; padding: 24px 28px 24px; box-shadow: 0 34px 70px -40px rgba(18, 19, 23, .38); }
/* a foto e o corpo são um cartão só: a sombra e a borda contornam os dois */
.fx-foto { box-shadow: 0 34px 70px -40px rgba(18, 19, 23, .38); border: 1px solid var(--filete); border-right: 0; }
.fx-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.fx-area { font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--azul); }
.fx-status { display: inline-flex; align-items: center; gap: 7px; font-size: .74rem; color: var(--tinta-3); white-space: nowrap; }
.fx-status i { width: 7px; height: 7px; border-radius: 50%; background: #1FB862; box-shadow: 0 0 0 0 rgba(31, 184, 98, .5); animation: rodando 2s ease-out infinite; }
@keyframes rodando { to { box-shadow: 0 0 0 8px rgba(31, 184, 98, 0); } }
.fx-corpo h3 { margin: 10px 0 0; font-family: var(--f-disp); font-weight: 600; font-size: clamp(1.4rem, 2.6vw, 2.1rem); letter-spacing: -.03em; line-height: 1.05; max-width: 22ch; }
.fx-sub { margin: 8px 0 18px; color: var(--tinta-2); font-size: .96rem; max-width: 56ch; }
.fx-corpo { display: flex; flex-direction: column; }
.fx-fluxos { display: grid; gap: 14px; margin-block: auto; }
.fx-nome { font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: 8px; }
.fx-nome:empty { display: none; }
.fx-linha { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; }
.fx-linha--3x { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); row-gap: 16px; }
.fx-etapa { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
/* o chip da etapa tem relevo: luz em cima, sombra embaixo; aceso vira azul com brilho */
.fx-ic { position: relative; z-index: 1; width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; color: var(--tinta-3); background: linear-gradient(180deg, var(--papel-3), var(--papel-2)); border: 1px solid var(--filete); box-shadow: inset 0 1px 0 rgba(251, 251, 249, .9), 0 1px 2px rgba(18, 19, 23, .05); transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease); }
.fx-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fx-t { font-size: .78rem; line-height: 1.25; color: var(--tinta-3); transition: color .4s var(--ease); }
.fx-ok { position: absolute; z-index: 2; top: -5px; left: calc(50% + 14px); width: 18px; height: 18px; border-radius: 50%; background: #1FB862; box-shadow: 0 2px 6px rgba(31, 184, 98, .45); transform: scale(0); transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.fx-ok::after { content: ""; position: absolute; left: 6px; top: 3px; width: 4px; height: 8px; border: solid #FBFBF9; border-width: 0 2px 2px 0; transform: rotate(45deg); }
/* fio entre etapas + pulso */
.fx-etapa:not(:last-child)::before { content: ""; position: absolute; top: 23px; left: calc(50% + 28px); width: calc(100% - 56px + 10px); height: 2px; border-radius: 2px; background: var(--filete); }
.fx-etapa:not(:last-child)::after { content: ""; position: absolute; top: 23px; left: calc(50% + 28px); width: calc(100% - 56px + 10px); height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--azul), var(--azul-cl)); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.fx-linha--3x .fx-etapa:nth-child(3n)::before, .fx-linha--3x .fx-etapa:nth-child(3n)::after { display: none; }
.fx-etapa.on .fx-ic { color: #FBFBF9; background: linear-gradient(180deg, #2F7BFF, #004FE0); border-color: #004FE0; box-shadow: inset 0 1px 0 rgba(251, 251, 249, .35), 0 12px 26px -10px rgba(0, 92, 252, .85); transform: translateY(-1px); }
.fx-etapa.on .fx-t { color: var(--tinta); }
.fx-etapa.on .fx-ok { transform: scale(1); }
.fx-etapa.on.passou::after { transform: scaleX(1); }
.fx-etapa.on.passou::before { background: transparent; }
.fx-etapa.pulso::after { transform: scaleX(1); background: linear-gradient(90deg, rgba(0, 92, 252, .2), #FBFBF9 50%, rgba(0, 92, 252, .2)); background-size: 200% 100%; animation: pulsoFio 1s linear infinite; }
@keyframes pulsoFio { from { background-position: 100% 0; } to { background-position: -100% 0; } }
/* o painel escuro: depois que o fluxo roda, ele sobe por cima do corpo do cartão (--sobe, app.js) e os
   ganhos entram um por um (.on). A foto continua à mostra. */
.fx-painel { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 30px 36px; overflow: hidden; color: #F2F2EF; background: radial-gradient(70% 50% at 0% 100%, rgba(0, 92, 252, .16), transparent 70%), linear-gradient(180deg, #0C0F18, #06070B 70%); box-shadow: inset 0 1px 0 rgba(156, 192, 255, .45); transform: translateY(calc((1 - var(--sobe, 0)) * 101%)); will-change: transform; }
/* textura: grade de pontos que some pra baixo + um brilho azul que respira devagar no canto */
.fx-painel::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(156, 192, 255, .17) 1px, transparent 1.3px); background-size: 18px 18px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 75%); mask-image: linear-gradient(180deg, #000, transparent 75%); }
.fx-painel::after { content: ""; position: absolute; top: -45%; right: -25%; width: 85%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(0, 92, 252, .55), rgba(0, 92, 252, .12) 60%, transparent); animation: aurora 9s ease-in-out infinite alternate; }
@keyframes aurora { from { transform: translate(0, 0) scale(1); } to { transform: translate(-22%, 14%) scale(1.15); } }
.fx-painel > * { position: relative; z-index: 1; }
.fx-painel-rot { display: block; font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--azul-cl); }
.fx-painel-rot::before { content: ""; display: inline-block; vertical-align: middle; width: 18px; height: 1px; margin-right: 10px; background: var(--azul-cl); }
/* o nome do agente em destaque: branco com brilho azul, mesma família do neon dos números */
.fx-painel-rot b { font-weight: 700; color: #E6F0FF; text-shadow: 0 0 8px rgba(61, 139, 255, .9), 0 0 20px rgba(0, 92, 252, .6); }
.fx-painel-tit { margin-top: 8px; font-family: var(--f-disp); font-weight: 600; font-size: clamp(1.5rem, 2.6vw, 2.3rem); letter-spacing: -.035em; line-height: 1.05; }
.fx-painel-tit em { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; color: var(--azul-cl); }
/* cada ganho: número em serifa itálica, frase forte e complemento; ao acender, um fio de luz corre por cima */
.fx-painel ol { list-style: none; display: grid; border-bottom: 1px solid rgba(242, 242, 239, .08); }
/* entrada de cada ganho, em ordem: o fio de luz corre, o número acende em neon (as sombras já existem
   transparentes e só ganham cor, pra o brilho crescer sem estalar) e o texto desliza. Apagar é sem atraso. */
.fx-painel li { position: relative; display: grid; grid-template-columns: 34px 1fr; align-items: baseline; gap: 12px; padding: 12px 0; border-top: 1px solid rgba(242, 242, 239, .08); opacity: .16; transition: opacity .5s var(--ease); }
.fx-painel li::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: linear-gradient(90deg, var(--azul-cl), rgba(0, 92, 252, .7) 45%, transparent); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease); }
.fx-painel li > div { transform: translateX(-10px); transition: transform .6s var(--ease); }
.fx-painel li i { font-family: var(--f-serif); font-style: italic; font-size: 1.3rem; line-height: 1; color: #6FA6FF; text-shadow: 0 0 2px rgba(242, 242, 239, 0), 0 0 7px rgba(125, 178, 255, 0), 0 0 14px rgba(61, 139, 255, 0), 0 0 26px rgba(10, 102, 255, 0), 0 0 48px rgba(0, 92, 252, 0), 0 0 80px rgba(0, 92, 252, 0); transition: color .7s var(--ease), text-shadow .7s var(--ease); }
.fx-painel li.on { opacity: 1; }
.fx-painel li.on::after { transform: scaleX(1); }
.fx-painel li.on i { color: #E6F0FF; text-shadow: 0 0 2px rgba(242, 242, 239, 1), 0 0 7px rgba(125, 178, 255, 1), 0 0 14px rgba(61, 139, 255, 1), 0 0 26px rgba(10, 102, 255, 1), 0 0 48px rgba(0, 92, 252, .85), 0 0 80px rgba(0, 92, 252, .55); transition-delay: .15s; }
.fx-painel li.on > div { transform: none; transition-delay: .25s; }
.fx-painel b { display: block; font-family: var(--f-disp); font-weight: 600; font-size: clamp(1.15rem, 1.8vw, 1.5rem); letter-spacing: -.02em; line-height: 1.15; }
.fx-painel span { display: block; margin-top: 3px; font-size: .9rem; line-height: 1.35; color: rgba(242, 242, 239, .58); }
.fx-pontos { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.fx-pontos i { width: 8px; height: 8px; border-radius: 999px; background: rgba(18, 19, 23, .18); transition: width .4s var(--ease), background .4s var(--ease); }
.fx-pontos i.on { width: 28px; background: var(--azul); }
@media (min-width: 761px) {
  .fx-painel { padding: 44px 64px; gap: 28px; }
  .fx-painel-rot { font-size: .76rem; }
  .fx-painel li { grid-template-columns: 50px 1fr; padding: 15px 0; }
  .fx-painel li i { font-size: 1.7rem; }
  .fx-painel b { font-size: clamp(1.35rem, 2vw, 1.8rem); }
  .fx-painel span { font-size: 1rem; }
}
@media (max-width: 760px) {
  .fx-palco { padding: 80px 0 14px; justify-content: flex-start; }
  .fx-cab { padding-top: 96px; padding-bottom: 24px; }
  .fx-cab h2 { font-size: clamp(1.55rem, 7vw, 1.9rem); }
  .fx-cab p { font-size: 1rem; margin-top: 12px; line-height: 1.45; }
  .fx-trilho { align-items: flex-start; }
  .fx-bloco { height: calc(100svh - 128px); grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .fx-foto { min-height: 0; height: clamp(120px, 34svh, 300px); border-radius: 24px 24px 0 0; border: 1px solid var(--filete); border-bottom: 0; }
  .fx-foto img { transform: translateX(calc(var(--d) * -9%)) scale(1.12); }
  .fx-corpo { border-left: 1px solid var(--filete); border-top: 0; border-radius: 0 0 24px 24px; padding: 12px 16px 14px; }
  .fx-topo { gap: 8px; }
  .fx-area { font-size: .66rem; letter-spacing: .1em; }
  .fx-status { font-size: .68rem; }
  .fx-corpo h3 { margin-top: 5px; font-size: 1.12rem; }
  .fx-sub { display: none; }
  .fx-corpo h3 { margin-bottom: 14px; }
  .fx-fluxos { gap: 14px; }
  .fx-nome { margin-bottom: 5px; font-size: .62rem; }
  .fx-linha { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-auto-columns: auto; row-gap: 16px; gap: 8px; }
  .fx-ic { width: 38px; height: 38px; border-radius: 12px; }
  .fx-ic svg { width: 18px; height: 18px; }
  .fx-t { font-size: .68rem; line-height: 1.2; }
  .fx-etapa { gap: 6px; }
  .fx-etapa:not(:last-child)::before, .fx-etapa:not(:last-child)::after { top: 19px; left: calc(50% + 24px); width: calc(100% - 48px + 8px); }
  .fx-etapa:nth-child(3n)::before, .fx-etapa:nth-child(3n)::after { display: none; }
  .fx-ok { left: calc(50% + 10px); width: 16px; height: 16px; }
  .fx-ok::after { left: 5px; top: 2px; }
  .fx-painel { padding: 22px 20px; gap: 16px; }
  .fx-painel-rot { font-size: .62rem; letter-spacing: .14em; }
  .fx-painel-tit { font-size: 1.5rem; margin-top: 6px; }
  .fx-painel li { grid-template-columns: 28px 1fr; gap: 8px; padding: 11px 0; }
  .fx-painel li i { font-size: 1.32rem; }
  .fx-painel b { font-size: 1.1rem; }
  .fx-painel span { font-size: .83rem; }
  .fx-pontos { margin-top: 8px; }
}
/* tela baixa (celular pequeno): foto menor e etapas mais justas */
@media (max-height: 740px) and (max-width: 760px) {
  .fx-foto { height: clamp(96px, 22svh, 160px); }
  .fx-linha { row-gap: 10px; }
  .fx-fluxos { gap: 8px; }
  .fx-painel { gap: 10px; padding: 16px 18px; }
  .fx-painel-tit { font-size: 1.25rem; }
  .fx-painel li { padding: 7px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-rolo { height: auto; }
  .fx-palco { position: relative; height: auto; overflow: visible; padding: 40px 0 80px; perspective: none; }
  .fx-bloco { height: auto; }
  .fx-corpo { overflow: visible; }
  .fx-painel { position: relative; inset: auto; transform: none; margin: 18px -28px -24px; border-radius: 0 0 28px 0; }
  .fx-painel li, .fx-painel li > div { opacity: 1; transform: none; }
  .fx-painel li::after { transform: scaleX(1); }
  .fx-painel::after { animation: none; }
  .fx-trilho { flex-direction: column; gap: 28px; transform: none; }
  .fx-bloco { transform: none; opacity: 1; }
  .fx-foto img { transform: none; }
  .fx-pontos { display: none; }
}
html:not(.js) .fx-rolo { height: auto; }
html:not(.js) .fx-bloco { height: auto; }
html:not(.js) .fx-painel { position: relative; transform: none; }
html:not(.js) .fx-palco { position: relative; height: auto; overflow: visible; }
html:not(.js) .fx-trilho { flex-direction: column; gap: 28px; transform: none; }

/* ---------- Revisão de 01/10 (Gui): abertura com uma ênfase só e as 3 áreas em pílulas; "O que acontece na reunião" ---------- */
.abre-marca { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; font-size: 1.08em; }
.abre-marca::after { content: none; }
.abre-cenas .abre-estrutura { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 40px; }
.abre-areas { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.abre-areas i { font-style: normal; font-size: .86rem; font-weight: 600; letter-spacing: .02em; color: var(--azul); padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(0, 92, 252, .28); background: rgba(0, 92, 252, .06); }
.abre-cenas .abre-estrutura .abre-seta { margin-left: 2px; }
.abre-cenas .abre-estrutura .abre-areas { animation: none; }
.cab-sub { margin-top: 14px; color: var(--tinta-2); font-size: clamp(1rem, 1.5vw, 1.2rem); }
@media (max-width: 760px) {
  /* no celular a abertura preenche a tela: título maior e pílulas com mais presença */
  .abre-h { font-size: clamp(2.5rem, 11vw, 3rem); max-width: none; }
  .abre-real { font-size: clamp(2.1rem, 9.2vw, 2.6rem); margin-top: 26px; }
  .abre-cenas .abre-estrutura { margin-top: 36px; }
  .abre-areas i { font-size: .9rem; padding: 10px 16px; }
}
.abre-cenas .abre-estrutura { font-size: 1.08rem; }
.final-sub { margin: -16px 0 32px; color: var(--claro-2, rgba(242, 242, 239, .7)); font-size: clamp(1rem, 1.5vw, 1.2rem); max-width: 46ch; }
/* aviso pra quem já respondeu o quiz e clica em "Agendar" de novo (app.js, agendar) */
dialog.ja-fez { position: fixed; inset: 0; margin: auto; height: fit-content; border: 0; padding: 0; background: transparent; width: min(460px, calc(100vw - 32px)); max-width: none; }
dialog.ja-fez::backdrop { background: rgba(7, 8, 12, .55); backdrop-filter: blur(6px); }
.ja-caixa { position: relative; background: var(--papel-3); color: var(--tinta); border-radius: 26px; padding: 34px 28px 26px; box-shadow: 0 40px 90px -30px rgba(7, 8, 12, .6); text-align: center; }
.ja-x { position: absolute; top: 12px; right: 14px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--papel-2); color: var(--tinta-2); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.ja-rot { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--azul); }
.ja-caixa h3 { margin-top: 10px; font-family: var(--f-disp); font-weight: 600; font-size: 1.7rem; letter-spacing: -.03em; line-height: 1.1; }
.ja-caixa p:not(.ja-rot) { margin: 12px auto 22px; color: var(--tinta-2); max-width: 34ch; }
.ja-caixa .btn { width: 100%; justify-content: center; }
.ja-refazer { display: inline-block; margin-top: 16px; font-size: .9rem; color: var(--tinta-3); text-decoration: underline; text-underline-offset: 3px; }
/* garantias do topo (01/10): 3 itens curtos, cada um com o mesmo ✓ azul, alinhados em linha no computador
   e em coluna no celular (antes quebravam torto, com ponto no meio e uma frase bem maior que as outras) */
.hero-objecoes { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: .9rem; color: var(--claro-2); }
.hero-objecoes span { display: inline-flex; align-items: center; gap: 8px; }
.hero-objecoes span::before, .hero-objecoes span + span::before { display: block; margin: 0; opacity: 1; content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%; background: rgba(0, 92, 252, .9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-5' fill='none' stroke='%23F2F2EF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; box-shadow: 0 0 10px rgba(0, 92, 252, .55); }
@media (max-width: 760px) {
  .hero-objecoes { flex-direction: column; gap: 10px; font-size: .9rem; }
}
/* sem copiar (Gui, 01/10): ninguém seleciona texto nem segura a imagem pra salvar; campo de formulário continua normal */
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, [contenteditable] { -webkit-user-select: text; user-select: text; }
img, video, canvas { -webkit-user-drag: none; user-drag: none; }
/* ---------- Robô no computador cobrindo a tela (01/10) ----------
   O loop parado é a versão horizontal, cobrindo a tela inteira (na intro não há nav por cima). A cena vertical
   entra centralizada e abre até cobrir a tela enquanto a câmera chega no olho. */
@media (min-width: 761px) {
  .intro-palco .intro-loop, .intro-palco .intro-poster {
    object-fit: cover; object-position: 50% 40%; transform: none;
    -webkit-mask-image: none; mask-image: none;
  }
  /* a cena vertical abre até cobrir a tela (--abre, --k no app.js); o borrão nas laterais saiu (Gui achou feio) */
  .intro-palco .intro-cena { transform-origin: 50% 42%; transform: scale(calc(1.06 + var(--abre, 0) * (var(--k, 2.9) - 1.06))); }
}

/* ---------- iPhone (01/10): o palco do robô tem a altura da tela GRANDE (barra do Safari recolhida) ----------
   Com 100svh, ao rolar a barra sumia, a tela crescia e o fundo do topo aparecia embaixo do robô. Com a barra
   aberta, a sobra fica escondida atrás dela (o vídeo é cover). O aviso de rolar fica preso à tela pequena. */
.intro-palco { height: 100vh; height: 100lvh; }
.com-intro .hero { margin-top: -100vh; margin-top: -100lvh; }
@supports (height: 100lvh) { .intro-robo { background: linear-gradient(var(--noite) calc(100% - 100lvh), transparent calc(100% - 100lvh)); } }
.intro-robo.rolou .intro-dica { opacity: 0; }
/* aviso de rolar: pílula de vidro escura, legível, com a seta descendo */
.intro-palco .intro-dica {
  top: calc(100vh - 128px); top: calc(100svh - 128px); bottom: auto; z-index: 4;
  display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px 11px 20px; border-radius: 999px;
  background: rgba(10, 14, 24, .55); border: 1px solid rgba(156, 192, 255, .28);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #F2F2EF; font-size: .78rem; letter-spacing: .14em; text-shadow: none; white-space: nowrap;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .6);
}
.intro-palco .intro-dica::after { content: none; }
.intro-dica i { position: relative; display: block; width: 14px; height: 18px; animation: setaRola 1.6s ease-in-out infinite; }
.intro-dica i::before { content: ""; position: absolute; left: 6px; top: 0; width: 2px; height: 13px; border-radius: 2px; background: #9CC6FF; }
.intro-dica i::after { content: ""; position: absolute; left: 2px; bottom: 2px; width: 8px; height: 8px; border: solid #9CC6FF; border-width: 0 2px 2px 0; transform: rotate(45deg); }
@keyframes setaRola { 0%, 100% { transform: translateY(-3px); opacity: .55; } 50% { transform: translateY(4px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .intro-dica i { animation: none; } }
/* traço embaixo de "realidade" de volta (Gui, 01/10): corre em 0,45 s no instante em que a palavra acende */
.abre-marca::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.04em; height: .07em; border-radius: .07em; background: var(--azul);
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease);
}
.abre.traco-on .abre-marca::after, html:not(.js) .abre-marca::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .abre-marca::after { transform: scaleX(1); transition: none; } }

.js .abre-marca::after { transition: transform .45s var(--ease); }


.abre-cenas .abre-estrutura { display: block; }
.abre-cenas .abre-estrutura .abre-seta { white-space: nowrap; margin-left: 6px; }

/* ---------- Agentes: volta a rolagem pra baixo (01/10, Gui) + aviso no canto direito ----------
   O arrastar pro lado saiu: a pessoa passava pela seção sem ver. O aviso some quando a rolagem começa. */
.fx-dica {
  position: absolute; right: max(28px, calc((100vw - 1140px) / 2 + 12px)); top: 96px; z-index: 7;
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px; border-radius: 999px; pointer-events: none;
  background: var(--azul); color: #F2F2EF; font-size: .78rem; font-weight: 600; letter-spacing: .02em; white-space: nowrap;
  box-shadow: 0 10px 26px -8px rgba(0, 92, 252, .75); transition: opacity .4s var(--ease), transform .4s var(--ease);
  animation: dicaPulsa 2s ease-in-out infinite;
}
.fluxos.comecou .fx-dica { opacity: 0; transform: translateY(-6px); animation: none; }
.fx-dica i { position: relative; display: block; width: 12px; height: 15px; animation: setaRola 1.6s ease-in-out infinite; }
.fx-dica i::before { content: ""; position: absolute; left: 5px; top: 0; width: 2px; height: 11px; border-radius: 2px; background: #F2F2EF; }
.fx-dica i::after { content: ""; position: absolute; left: 1px; bottom: 2px; width: 7px; height: 7px; border: solid #F2F2EF; border-width: 0 2px 2px 0; transform: rotate(45deg); }
@keyframes dicaPulsa { 0%, 100% { box-shadow: 0 10px 26px -8px rgba(0, 92, 252, .75), 0 0 0 0 rgba(0, 92, 252, .45); } 50% { box-shadow: 0 10px 26px -8px rgba(0, 92, 252, .75), 0 0 0 8px rgba(0, 92, 252, 0); } }
@media (max-width: 760px) { .fx-dica { right: 30px; top: 92px; font-size: .72rem; padding: 8px 13px; } }
@media (prefers-reduced-motion: reduce) { .fx-dica { display: none; } }

/* ---------- Safari do iPhone: o espiral do topo aparecia embaixo do robô (01/10) ----------
   1) o palco do robô passa 90px da tela (cobre mesmo se o Safari medir a altura errada);
   2) enquanto a cena roda, o topo fica invisível e o fundo da página é escuro: ele só aparece na revelação. */
.intro-palco { height: calc(100vh + 90px); height: calc(100lvh + 90px); margin-bottom: -90px; }
html.na-intro { background: var(--noite); }
html.na-intro:not(.revelando) .hero { opacity: 0; }
.hero { transition: opacity .25s linear; }

/* ---------- Rolagem natural no celular (01/10) ----------
   No dedo cada tela de rolagem é um gesto: os trechos presos encurtaram pra não parecer travado.
   Agentes: 4,0 telas presas (4,4 era demais, 3,1 ficou rápido). Cargos: 3,2 → 2,2 telas. */
@media (max-width: 760px) {
  .fx-rolo { position: relative; height: 540vh; height: 540svh; }   /* 4,4 telas presas; o ritmo vem do fluxos() (Gui, 01/10) */
  .js .time { height: 320vh; height: 320svh; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) { .fx-rolo, .js .time { height: auto; } }