/* O nome (2026-11-13): até aqui a empresa se chamava Faro; tudo foi
   renomeado de faro para facto, inclusive as citações nos comentários. */
/* ═════════════════════════════════════════════════════════════════
   RIVIO — Facto (facto.html) · desde 2026-11-10

   A página da Facto, a empresa de treinamento de modelos de IA para a
   operação do faturamento hospitalar, part of Rivio. Família HOME
   (DIRETRIZES § 3.5), e o guia é O PRÓPRIO SITE DA RIVIO: herói,
   `cabeca-pilha`, eyebrow, `cta-seta` e o CTA fotográfico vêm da
   `componentes.css`. O que mora aqui é só o
   que o site não tinha:

   · o LOCKUP DO MENU (`.nav--facto`, a variante que o `partes.mjs`
     carimba): no lugar do logo da Rivio, a marca "facto." (Funnel Display
     600 com o ponto quadrado) e "AI · PART OF RIVIO" ao lado (desde
     2026-11-12; antes o fio com "FACTO AI / PART OF RIVIO", e antes ainda
     o símbolo das barras com a Rivio a 64%). É o ÚNICO lugar da marca na
     página (a faixa azul com o logo foi recusada: "entra do nada, uma
     faixa azul, totalmente desintegrado");
   · a MIRA DE RASTREAMENTO do filme da home (`.facto-mira`): colchetes,
     cruz, chip de dados em mono e a linha entre dois alvos, sobre
     fotografia. O `js/facto.js` escreve a posição em px (as custom
     properties `--bx --by --bw --bh --cx --cy`, `--lx --ly --ll --la`);
     aqui mora o desenho e a animação (só `transform`/`opacity`);
   · o herói com o degradê da marca em movimento e o texto no centro;
   · a seção de carreiras, o palco preso com vidro e texto trocando
     (`.facto-carreira`, `.facto-palco`);
   · os modelos em treinamento: retratos com a mira, índice, nome e
     capacidade (`.facto-gente`, `.facto-modelo`).

   A cor da Facto (#2E27F3) fica escopada no `.facto-pagina`, não é
   token; aparece só nas etiquetas das seções claras. Medidas na grade
   de 8 (§ 3.13); os tipos são os do site.
   ═════════════════════════════════════════════════════════════════ */

.facto-pagina {
  --facto-azul: #2e27f3;
  --facto-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  background: #fff;
}

/* ── O lockup do menu ───────────────────────────────────────────
   A MARCA "facto." (2026-11-12, escolhida pelo Matheus depois de várias
   rodadas: "vamos com esse aqui mesmo", no peso 600): "facto" em
   minúsculas na Funnel Display 600, junto, com o PONTO FINAL QUADRADO do
   tamanho do traço (o mesmo quadradinho das etiquetas e do chip da
   página), e "AI · PART OF RIVIO" espaçado ao lado. Antes: o fio e
   "FACTO AI / PART OF RIVIO" em Bai Jamjuree. O menu é carimbado pelo
   `partes.mjs`, então a marca é desenhada nos dois pseudos do
   `.nav__logo` (o SVG da Rivio some): o nome no `::before`, com o ponto
   como um fundo de `currentColor` no fim dele, e o tag no `::after`.
   O ponto pousa na linha de base: na Funnel Display, com altura de linha
   1, a base fica a 0,125em do pé da caixa (medido no navegador); por isso
   o fundo está a `bottom 0.125em`.
   Segue o `currentColor` do menu nos dois tons. */
/* "facto." e "PART OF RIVIO" na MESMA LINHA DE BASE (2026-11-12, "tem que
   deixar sempre alinhado… as duas têm que ser na mesma linha"): o logo
   alinha pela base. E o FIO fica CENTRADO nos dois textos ("no meio da
   barra, não precisa ficar no pé"): o meio dele cai no meio da altura de
   x do "facto" e das maiúsculas de "PART OF RIVIO" (~6px acima da base),
   e ele passa igual para cima e para baixo. `--fio-h` é a altura, e
   `--fio-b` o pé dele medido do pé da caixa do tag (nas duas fontes, com
   altura de linha 1, a base fica a 0,125em do pé da caixa) */
.nav--facto .nav__logo {
  --fio-h: 24px;
  --fio-b: -4px;
  display: flex;
  align-items: baseline;
  gap: 16px;
  width: auto;
}

/* "facto." (o ponto quadrado é um fundo de `currentColor` no fim; a linha
   de base da Funnel Display, com altura de linha 1, fica a 0,125em do pé
   da caixa, medido no navegador) */
.nav__facto {
  padding-right: 0.18em;
  font-family: 'Funnel Display', sans-serif;
  font-weight: 600;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.035em;
  background: linear-gradient(currentColor, currentColor) no-repeat right 0 bottom 0.125em / 0.14em 0.14em;
}

/* "| Part of Rivio": o fio e o vínculo, em caixa alta espaçada */
.nav__parte {
  position: relative;
  padding-left: 16px;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.8;
}

.nav__parte::before,
.facto-sobre-grupo__parte::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: var(--fio-b);
  width: 1px;
  height: var(--fio-h);
  background: currentColor;
}

.nav--facto .nav__link--fora span { margin-left: 4px; }

@media (max-width: 860px) {
  .nav--facto .nav__logo { --fio-h: 20px; --fio-b: -4px; gap: 12px; }
  .nav__facto { font-size: 24px; }
  .nav__parte { padding-left: 12px; font-size: 10px; letter-spacing: 0.22em; }
}

/* ── O herói: o degradê da marca em movimento ────────────────────
   As três cores do `--grad-brand` (tokens) em manchas grandes e
   desfocadas sobre o Dark-01, como luz no escuro: o texto em branco
   lê sem esforço (no claro o grafite ficava apagado, 2026-11-12). Cada
   mancha anda num ciclo próprio (14 a 23 s, ida e volta), só
   `transform`: o desfoque é desenhado uma vez e a camada só desliza.
   Mancha em `vmax`, para o degradê ter a mesma cara em qualquer tela.
   Um véu escuro no centro segura o texto. Com movimento reduzido,
   tudo parado. */
.facto-hero { background: var(--dark-01); }

.facto-hero__media { inset: 0; }

/* o véu do herói do site sai; o daqui fecha no PÉ, atrás do texto (que
   desceu para o pé em 2026-11-12, e a mão do primeiro plano é clara), e
   no topo, sob o menu */
.facto-hero .hero__media::after {
  background:
    linear-gradient(0deg, rgba(24, 27, 31, 0.72) 0%, rgba(24, 27, 31, 0.32) 32%, rgba(24, 27, 31, 0) 56%),
    linear-gradient(180deg, rgba(24, 27, 31, 0.48) 0%, rgba(24, 27, 31, 0) 20%);
}

.facto-hero__degrade {
  position: absolute;
  inset: 0;
  overflow: clip;
  background: var(--dark-01);
}

.facto-hero__mancha {
  position: absolute;
  width: 56vmax;
  height: 56vmax;
  border-radius: 50%;
  filter: blur(88px);
  opacity: 0.8;
  will-change: transform;
  animation: facto-deriva 17s var(--ease-in-out-soft) infinite alternate;
}

.facto-hero__mancha--azul {
  left: -12vmax;
  top: -20vmax;
  background: var(--blue);
  --dx: 32vmax;
  --dy: 20vmax;
}

.facto-hero__mancha--lilas {
  right: -16vmax;
  top: -8vmax;
  background: var(--purple);
  --dx: -32vmax;
  --dy: 24vmax;
  animation-duration: 21s;
  animation-delay: -6s;
}

.facto-hero__mancha--amarela {
  left: 12vmax;
  bottom: -32vmax;
  width: 40vmax;
  height: 40vmax;
  background: var(--yellow);
  opacity: 0.56;
  --dx: 28vmax;
  --dy: -20vmax;
  animation-duration: 14s;
  animation-delay: -4s;
}

.facto-hero__mancha--azul2 {
  right: 4vmax;
  bottom: -32vmax;
  width: 48vmax;
  height: 48vmax;
  background: var(--blue);
  opacity: 0.64;
  --dx: -36vmax;
  --dy: -16vmax;
  animation-duration: 23s;
  animation-delay: -11s;
}

@keyframes facto-deriva {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(var(--dx), var(--dy), 0) scale(1.24); }
}

/* ── A cena e a abertura (2026-11-12) ────────────────────────────
   Embaixo, a CENA: a sequência de fotos do banco, com a TINTA (as
   manchas do degradê em `mix-blend-mode: color`) e um véu escuro para
   o texto branco.
   Em cima, a ABERTURA: duas folhas, metade de cima e metade de baixo,
   cada uma com uma cópia do degradê do tamanho do herói (o corte não
   aparece). 1,4 s depois de carregar elas correm para fora, como a
   faixa que se abre da referência, e a cena assenta (escala 1,06 → 1).
   Só `transform`. Com movimento reduzido, a cena já aberta. */
.facto-hero__cena {
  position: absolute;
  inset: 0;
  overflow: clip;
  background: var(--dark-01);
}

/* a SEQUÊNCIA, montada como filme e não como slide (2026-11-12, "como
   a gente faz agora não parecer uma transição de slides"): cada plano
   tem a SUA câmera (a MÃO com o disco abre, em vídeo, com um avanço
   lento; a fachada sobe, a claraboia avança girando de leve, a fresta
   puxa para dentro, o objeto recua, o bloco corre de lado), as durações
   variam (5, 3,5, 3, 3,5, 3,5 e 3,5 s; ciclo de 22 s) e os cortes são SECOS, como no filme da home: o plano
   de cima aparece de uma vez e o de baixo some logo depois, sem fusão.
   Em cada corte, um lampejo de luz quase imperceptível
   (`.facto-hero__clarao`). Movimento linear, como um dolly. Só
   `opacity` e `transform`; as chaves foram geradas a partir das
   durações (o tempo de cada corte em %). */
.facto-hero__quadro {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

/* o primeiro plano é a mão: a foto e, por cima, o vídeo dela (Kling,
   mesmo quadro no início e no fim, em laço), que entra quando toca */
.facto-hero__quadro > img,
.facto-hero__quadro > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.facto-hero__quadro > video { opacity: 0; transition: opacity 0.6s var(--ease-out-soft); }
.facto-hero__quadro > video.is-tocando { opacity: 1; }

.facto-hero__quadro {
  animation: 22s linear infinite;
}

.facto-hero__quadro:nth-child(1) { animation-name: facto-plano-1; }
.facto-hero__quadro:nth-child(2) { animation-name: facto-plano-2; }
.facto-hero__quadro:nth-child(3) { animation-name: facto-plano-3; }
.facto-hero__quadro:nth-child(4) { animation-name: facto-plano-4; }
.facto-hero__quadro:nth-child(5) { animation-name: facto-plano-5; }
.facto-hero__quadro:nth-child(6) { animation-name: facto-plano-6; }

@keyframes facto-plano-1 {
  0% { opacity: 1; transform: scale(1.02); }
  22.73% { opacity: 1; }
  23.13% { opacity: 0; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(1.02); }
}

@keyframes facto-plano-2 {
  0%, 22.72% { opacity: 0; transform: translate3d(0, 5%, 0) scale(1.14); }
  22.73% { opacity: 1; transform: translate3d(0, 5%, 0) scale(1.14); }
  38.64% { opacity: 1; }
  39.04% { opacity: 0; transform: translate3d(0, -5%, 0) scale(1.14); }
  100% { opacity: 0; transform: translate3d(0, -5%, 0) scale(1.14); }
}

@keyframes facto-plano-3 {
  0%, 38.63% { opacity: 0; transform: scale(1.02) rotate(0deg); }
  38.64% { opacity: 1; transform: scale(1.02) rotate(0deg); }
  52.27% { opacity: 1; }
  52.67% { opacity: 0; transform: scale(1.16) rotate(1.5deg); }
  100% { opacity: 0; transform: scale(1.16) rotate(1.5deg); }
}

@keyframes facto-plano-4 {
  0%, 52.26% { opacity: 0; transform: scale(1.04); }
  52.27% { opacity: 1; transform: scale(1.04); }
  68.18% { opacity: 1; }
  68.58% { opacity: 0; transform: scale(1.24); }
  100% { opacity: 0; transform: scale(1.24); }
}

@keyframes facto-plano-5 {
  0%, 68.17% { opacity: 0; transform: scale(1.2); }
  68.18% { opacity: 1; transform: scale(1.2); }
  84.09% { opacity: 1; }
  84.49% { opacity: 0; transform: scale(1.04); }
  100% { opacity: 0; transform: scale(1.04); }
}

@keyframes facto-plano-6 {
  0%, 84.08% { opacity: 0; transform: translate3d(-4%, 2%, 0) scale(1.14); }
  84.09% { opacity: 1; transform: translate3d(-4%, 2%, 0) scale(1.14); }
  100% { opacity: 1; transform: translate3d(4%, -2%, 0) scale(1.14); }
}

@keyframes facto-lampejo {
  0% { opacity: 0.18; }
  1.2% { opacity: 0; }
  22.43% { opacity: 0; }
  22.73% { opacity: 0.18; }
  23.93% { opacity: 0; }
  38.34% { opacity: 0; }
  38.64% { opacity: 0.18; }
  39.84% { opacity: 0; }
  51.97% { opacity: 0; }
  52.27% { opacity: 0.18; }
  53.47% { opacity: 0; }
  67.88% { opacity: 0; }
  68.18% { opacity: 0.18; }
  69.38% { opacity: 0; }
  83.79% { opacity: 0; }
  84.09% { opacity: 0.18; }
  85.29% { opacity: 0; }
  100% { opacity: 0.18; }
}

.facto-hero__clarao {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  animation: facto-lampejo 22s linear infinite;
}

/* a TINTA: a MESMA da foto do médico nas carreiras (2026-11-12, "o
   azul e o rosa estão muito fortes… o tom ideal é o mesmo da foto do
   médico na seção de carreiras"): o degradê azul, lilás e rosa em
   `color` a 0,32, sem escurecer a foto. (Antes: as manchas do degradê
   andando em `color` a 1, com a foto a 0,78 de brilho.) */
.facto-hero__cena::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(135deg, #6694ff 0%, #a99bff 55%, #e992ff 100%);
  mix-blend-mode: color;
  opacity: 0.32;
  pointer-events: none;
}

.facto-hero__cena::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(24, 27, 31, 0.28);
  pointer-events: none;
}

.facto-hero__abre {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.facto-hero__folha {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  overflow: clip;
  animation: 1.6s var(--ease-in-out-soft) 1.4s forwards;
}

.facto-hero__folha--cima { top: 0; animation-name: facto-folha-sobe; }
.facto-hero__folha--baixo { bottom: 0; animation-name: facto-folha-desce; }

.facto-hero__folha .facto-hero__degrade { inset: auto 0; height: 200%; }
.facto-hero__folha--cima .facto-hero__degrade { top: 0; }
.facto-hero__folha--baixo .facto-hero__degrade { bottom: 0; }

@keyframes facto-folha-sobe {
  to { transform: translateY(-100%); }
}

@keyframes facto-folha-desce {
  to { transform: translateY(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .facto-hero__mancha { animation: none; }
  .facto-hero__abre { display: none; }
  .facto-hero__quadro,
  .facto-hero__clarao { animation: none; }
  .facto-hero__quadro:first-child { opacity: 1; }
}

/* ── O texto no pé ──────────────────────────────────────────────
   (2026-11-12, pela referência da Legora que o Matheus mandou: "quem
   sabe a gente posiciona o texto assim, e coloca um texto de apoio
   falando o que é a Facto"). O título numa linha só, maior, centrado
   no pé da tela, e embaixo uma linha de apoio menor, sobre o que a Facto
   é. Antes: um bloco pequeno no meio, "AI models" numa linha e o resto
   embaixo, a 28 em 300. O `site.js` levanta e apaga este bloco com a
   rolagem (é o `.hero__inner`). A instrução de rolar fica no pé. */
.facto-hero { justify-content: flex-end; padding-bottom: 128px; }

.facto-hero__centro {
  align-items: center;
  gap: 16px;
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
}

.facto-hero__titulo {
  margin: 0;
  font-weight: 400;
  font-size: clamp(32px, 3.6vw, 56px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--light-01);
  text-wrap: balance;
}

.facto-hero__lede {
  max-width: 36em;
  margin: 0;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  color: var(--light-80);
  text-wrap: balance;
}

/* a MARCA no topo (2026-11-12, testada como exercício e aprovada, "fica
   assim"): "facto." grande, na Funnel Display 600 com o ponto quadrado (um
   fundo de `currentColor` no fim, como no menu), e "AI models for
   healthcare" embaixo */
.facto-hero__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin: 0;
  color: var(--light-01);
}

.facto-hero__facto {
  padding-right: 0.18em;
  font-family: 'Funnel Display', sans-serif;
  font-weight: 600;
  font-size: clamp(72px, 9vw, 144px);
  line-height: 1;
  letter-spacing: -0.035em;
  background: linear-gradient(currentColor, currentColor) no-repeat right 0 bottom 0.125em / 0.14em 0.14em;
}

.facto-hero__tagline {
  font-family: 'Funnel Display', sans-serif;
  font-weight: 300;
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--light-80);
}

/* no celular o título desce para 24 e o apoio para 14 ("pode ser
   menor no mobile… dá para diminuir um pouco mais aqui também") */
@media (max-width: 860px) {
  .facto-hero__titulo { font-size: 24px; line-height: 1.2; }
  /* e em duas linhas: "AI models" / "para gestão da saúde." */
  .facto-hero__marca { display: block; }
  .facto-hero__lede { font-size: 14px; line-height: 1.5; max-width: 30em; }
}

.facto-hero__hint {
  position: absolute;
  left: 50%;
  bottom: 32px;
  translate: -50% 0;
}

/* ── A mira de rastreamento ─────────────────────────────────────
   Quatro cantos em L de 1px (a exceção do fio, § 3.13), a cruz de 12
   e o chip em mono com o ponto azul, posicionados em px pelo
   `facto.js` (sobre a foto em `cover`, a posição muda com a largura).
   O chip fica em cima da caixa; sem lugar, embaixo
   (`.facto-mira--chip-baixo`, decidido na medida). */
.facto-mira {
  position: absolute;
  inset: 0;
  color: #fff;
  pointer-events: none;
}

.facto-mira__caixa {
  position: absolute;
  left: var(--bx);
  top: var(--by);
  width: var(--bw);
  height: var(--bh);
  --l: 12px;
  background:
    linear-gradient(currentColor, currentColor) left top / var(--l) 1px no-repeat,
    linear-gradient(currentColor, currentColor) left top / 1px var(--l) no-repeat,
    linear-gradient(currentColor, currentColor) right top / var(--l) 1px no-repeat,
    linear-gradient(currentColor, currentColor) right top / 1px var(--l) no-repeat,
    linear-gradient(currentColor, currentColor) left bottom / var(--l) 1px no-repeat,
    linear-gradient(currentColor, currentColor) left bottom / 1px var(--l) no-repeat,
    linear-gradient(currentColor, currentColor) right bottom / var(--l) 1px no-repeat,
    linear-gradient(currentColor, currentColor) right bottom / 1px var(--l) no-repeat;
  opacity: 0.9;
}

.facto-mira__cruz {
  position: absolute;
  left: var(--cx);
  top: var(--cy);
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%);
  background:
    linear-gradient(currentColor, currentColor) center / 12px 1px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1px 12px no-repeat;
  opacity: 0.9;
}

.facto-mira__chip {
  position: absolute;
  left: var(--chx, var(--bx));
  top: calc(var(--by) - 8px);
  transform: translateY(-100%);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 12px 8px 24px;
  border-radius: var(--r-chip);
  background: rgba(10, 11, 15, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-family: var(--facto-mono);
  font-weight: 500;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: #fff;
}

.facto-mira--chip-baixo .facto-mira__chip {
  top: var(--chy, calc(var(--by) + var(--bh) + 8px));
  transform: none;
}

.facto-mira__chip::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 10px;
  width: 6px;
  height: 6px;
  background: #7eb8ff;
}

.facto-mira__chip small {
  font-size: 10px;
  font-weight: 400;
  color: var(--light-64);
}

/* alvo fora do quadro (o `facto.js` decide pela medida): some */
.facto-mira.is-fora,
.facto-mira__liga.is-fora { display: none; }

/* a linha que liga dois alvos: um fio de 1px girado a partir do
   primeiro, com o ponto azul no meio */
.facto-mira__liga {
  position: absolute;
  left: var(--lx);
  top: var(--ly);
  width: var(--ll);
  height: 1px;
  transform-origin: 0 50%;
  transform: rotate(var(--la));
  background: rgba(255, 255, 255, 0.7);
  pointer-events: none;
}

.facto-mira__liga::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  transform: translate(-50%, -50%);
  background: #7eb8ff;
}

/* No herói e na faixa o chip é maior (12/10) e a mira só aparece
   depois de medida (`is-pronta`), entrando escalonada pelo `--d` de
   cada uma: a caixa converge (escala 1,4 → 1), a cruz nasce e pulsa,
   o chip sobe 8px, a linha se desenha (escala em X). Nos retratos o
   gatilho é o `is-seen` do `data-rise` do cartão (`.facto-modelo`). Com movimento reduzido tudo
   nasce pronto. */
.facto-mira--heroi .facto-mira__chip { font-size: 12px; }
.facto-mira--heroi .facto-mira__chip small { font-size: 10px; }
.facto-mira--heroi .facto-mira__chip::before { top: 12px; }

.js .facto-mira__caixa,
.js .facto-mira__cruz,
.js .facto-mira__chip,
.js .facto-mira__liga {
  opacity: 0;
}

.js .is-pronta .facto-mira--heroi .facto-mira__caixa,
.js .facto-modelo.is-seen .facto-gente__foto.is-pronta .facto-mira__caixa {
  animation: facto-mira-caixa 0.9s var(--ease-out-expo) calc(var(--d, 0ms) + 400ms) forwards,
    facto-mira-rastreia 4.8s var(--ease-in-out-soft) calc(var(--d, 0ms) + 1300ms) infinite;
}

/* depois de travar no rosto, a caixa segue o alvo: pequenos ajustes
   de posição e de escala, como um rastreador corrigindo a leitura */
@keyframes facto-mira-rastreia {
  0%, 100% { transform: translate(0, 0) scale(1); }
  20% { transform: translate(4px, -2px) scale(1.02); }
  45% { transform: translate(-4px, 2px) scale(0.98); }
  70% { transform: translate(2px, 4px) scale(1.03); }
  85% { transform: translate(-2px, -2px) scale(1); }
}

.js .is-pronta .facto-mira--heroi .facto-mira__cruz,
.js .facto-modelo.is-seen .facto-gente__foto.is-pronta .facto-mira__cruz {
  animation: facto-mira-cruz 0.6s var(--ease-out-soft) calc(var(--d, 0ms) + 800ms) forwards,
    facto-mira-pulsa 2.4s var(--ease-in-out-soft) calc(var(--d, 0ms) + 1400ms) infinite;
}

.js .is-pronta .facto-mira--heroi .facto-mira__chip,
.js .facto-modelo.is-seen .facto-gente__foto.is-pronta .facto-mira__chip {
  animation: facto-mira-chip 0.5s var(--ease-out-soft) calc(var(--d, 0ms) + 1100ms) forwards;
}

.js .is-pronta .facto-mira__liga {
  animation: facto-mira-liga 0.8s var(--ease-out-soft) calc(var(--d, 0ms)) forwards;
}

.js .is-pronta .facto-mira--heroi .facto-mira__chip::before,
.js .facto-modelo.is-seen .facto-gente__foto.is-pronta .facto-mira__chip::before {
  animation: facto-mira-pulsa 1.6s var(--ease-in-out-soft) infinite;
}

@keyframes facto-mira-caixa {
  from { opacity: 0; transform: scale(1.4); }
  to { opacity: 0.9; transform: scale(1); }
}

@keyframes facto-mira-cruz {
  from { opacity: 0; transform: translate(-50%, -50%) scale(1.8); }
  to { opacity: 0.9; transform: translate(-50%, -50%) scale(1); }
}

@keyframes facto-mira-pulsa {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 0.4; }
}

@keyframes facto-mira-chip {
  from { opacity: 0; transform: translateY(calc(-100% + 8px)); }
  to { opacity: 1; transform: translateY(-100%); }
}

/* chip embaixo (ou dentro da caixa): entra subindo 8px, sem o −100%.
   Com a especificidade dos gatilhos acima, senão eles vencem */
.facto-mira--chip-baixo .facto-mira__chip,
.js .is-pronta .facto-mira--heroi.facto-mira--chip-baixo .facto-mira__chip,
.js .facto-modelo.is-seen .facto-gente__foto.is-pronta .facto-mira--chip-baixo .facto-mira__chip { animation-name: facto-mira-chip-baixo; }

@keyframes facto-mira-chip-baixo {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes facto-mira-liga {
  from { opacity: 0; transform: rotate(var(--la)) scaleX(0); }
  to { opacity: 1; transform: rotate(var(--la)) scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .js .facto-mira__caixa,
  .js .facto-mira__cruz,
  .js .facto-mira__chip,
  .js .facto-mira__liga { opacity: 1; animation: none !important; }
  .js .facto-mira__caixa,
  .js .facto-mira__cruz { opacity: 0.9; }
}

/* ── As seções claras ───────────────────────────────────────────── */
.facto-sec {
  padding: 120px 0;
  background: #fff;
}

.facto-eyebrow { color: var(--facto-azul); }

/* ── § 2 · Os modelos em treinamento ─────────────────────────────
   A afirmação em duas batidas, a segunda apagada (Dark-05, como o
   "AI-driven" da Palantir), e os modelos em CARTÕES GRANDES em pé, como
   os da Google DeepMind ("os cards tinham que ser maiores, mais
   imponentes"): 2:3, até 416 de largura, num trilho (`.rail` do site,
   com as setas) que começa na coluna de 1216 e passa da borda direita.
   Cada cartão é o retrato, o vídeo por cima, a mira e o texto sobre a
   imagem, no pé, num véu escuro: o índice em mono ("/0.1") com o
   estado, o nome a 24 e a capacidade a 16. */
.facto-gente {
  --dark-pad: max(var(--gutter), (100% - 1216px) / 2);
  overflow: clip;
}

.facto-gente__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  width: min(1216px, calc(100% - 2 * var(--gutter)));
  margin: 0 auto;
}

.facto-gente__head .cabeca-pilha { width: auto; margin: 0; padding: 0; }

.facto-gente__nav button { background: rgba(24, 27, 31, 0.08); color: var(--dark-01); }
.facto-gente__nav button:hover:not(:disabled) { background: rgba(24, 27, 31, 0.16); }

/* sem a lavada do `.cabeca-pilha` (ela apagava o meio da primeira
   frase e as duas batidas se confundiam): grafite chapado, a segunda
   frase em Dark-05 */
.cabeca-pilha .facto-modelos__titulo {
  background: none;
  color: var(--dark-02);
}

.facto-modelos__titulo span { color: var(--dark-05); }

/* a frase dos especialistas, menor, embaixo do título (2026-11-12: "uma
   frase impactante que é o título da seção, com esse texto escrito
   menor") */
.facto-gente__lede {
  max-width: 34em;
  margin: 24px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--dark-03);
}

.facto-gente__fila {
  gap: 24px;
  margin: 64px 0 0;
  list-style: none;
}

.facto-modelo { width: clamp(280px, 30vw, 416px); }

.facto-gente__foto {
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: 24px;
  overflow: clip;
  background: var(--dark-01);
}

.facto-gente__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* o véu do pé, onde o texto mora */
.facto-gente__foto::before {
  content: '';
  position: absolute;
  inset: 40% 0 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(10, 11, 15, 0) 0%, rgba(10, 11, 15, 0.48) 48%, rgba(10, 11, 15, 0.8) 100%);
  pointer-events: none;
}

/* a varredura: uma faixa de luz azul com rastro desce pelo retrato
   num ciclo de 6 s, como a leitura de um modelo. O pseudo tem a altura
   do cartão e anda de −100% a 0 (só `transform`/`opacity`), então vale
   para qualquer tamanho de cartão. */
.facto-gente__foto::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(126, 184, 255, 0) 0%, rgba(126, 184, 255, 0) 80%, rgba(126, 184, 255, 0.16) 98%, rgba(126, 184, 255, 0.72) 100%);
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
}

.js .facto-modelo.is-seen .facto-gente__foto::after {
  animation: facto-varre 6s var(--ease-in-out-soft) calc(var(--d, 0ms) + 1600ms) infinite;
}

@keyframes facto-varre {
  0% { opacity: 0; transform: translateY(-100%); }
  12% { opacity: 1; }
  64% { opacity: 1; transform: translateY(0); }
  76%, 100% { opacity: 0; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .js .facto-modelo.is-seen .facto-gente__foto::after { animation: none; }
}

.facto-gente__foto .facto-mira { z-index: 2; }

.facto-modelo__texto {
  position: absolute;
  inset: auto 0 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  color: var(--light-01);
}

.facto-modelo__num {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 8px;
  font-family: var(--facto-mono);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--light-80);
}

.facto-modelo__num span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-label);
  font-weight: var(--tag-peso);
  font-size: var(--tag-corpo);
  letter-spacing: var(--tag-track);
  text-transform: uppercase;
  color: var(--light-80);
}

.facto-modelo__num span::before {
  content: '';
  width: var(--tag-quad);
  height: var(--tag-quad);
  border-radius: 50%;
  background: #7eb8ff;
  animation: facto-mira-pulsa 1.6s var(--ease-in-out-soft) infinite;
}

.facto-modelo__nome {
  margin: 0;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.24;
  color: var(--light-01);
}

.facto-modelo__txt {
  margin: 0;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  color: var(--light-80);
  text-wrap: pretty;
}

/* o vídeo do retrato por cima da foto. Ele já sai CORTADO no
   enquadramento 2:3 do cartão (o mesmo `object-position` da foto, no
   ffmpeg), então fica centrado e a mira continua sobre o rosto.
   Aparece em fade quando começa a tocar; até lá a foto segura o lugar */
.facto-gente__foto video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s var(--ease-out-soft);
}

.facto-gente__foto video.is-tocando { opacity: 1; }

/* nos retratos o `facto.js` decide a posição do chip (em cima, ou
   embaixo, longe do texto do pé); aqui só o corte se ele não couber */
.facto-gente__foto .facto-mira__chip {
  max-width: calc(100% - 32px);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── § 2b · As fontes: o fluxo ────────────────────────────────────
   No CLARO ("branco com rosa degradê… o preto está quebrando a pegada
   do site"): o branco das seções com duas luzes do degradê da marca,
   rosa no alto à direita e azul embaixo à esquerda. Um Sankey de fios
   finos, pelas referências do Matheus: à esquerda as 46 fontes em
   texto leve, uma por linha de 16 (os rótulos são HTML; o SVG estica
   na altura da lista, viewBox 0 0 100 1000 sem proporção, traço que não
   escala); os fios chegam espalhados nas barras dos cinco modelos (o
   índice dos cartões), os cinco seguem para a barra dos modelos da
   Facto, e dela uma linha leva ao Rivio Group. Um modelo por vez
   acende (as fontes dele em azul, os fios e a barra), 2 s cada, ciclo
   de 10 s. Só `opacity`. */
.facto-hospital {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: #fff;
}

.facto-hospital__luz {
  position: absolute;
  z-index: -1;
  width: 56vw;
  max-width: 880px;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
}

.facto-hospital__luz--rosa { right: -16vw; top: 24%; background: #e992ff; opacity: 0.2; }
.facto-hospital__luz--azul { left: -20vw; bottom: -24%; background: #6694ff; opacity: 0.14; }

.facto-hospital__lede {
  max-width: 40em;
  margin: 24px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--dark-03);
}

.facto-fontes {
  display: grid;
  grid-template-columns: auto minmax(80px, 1fr) 160px minmax(40px, 0.5fr) 8px auto;
  width: min(1216px, calc(100% - 2 * var(--gutter)));
  margin: 72px auto 0;
}

.facto-fontes__lista {
  margin: 0;
  padding: 0 16px 0 0;
  list-style: none;
  text-align: right;
}

.facto-fontes__lista li {
  position: relative;
  font-size: 12px;
  font-weight: 300;
  line-height: 16px;
  white-space: nowrap;
  color: var(--dark-05);
}

/* a mesma palavra em azul, por cima: acende com o modelo dela */
.facto-fontes__lista li::after,
.facto-fontes__modelos b::after {
  content: attr(data-t);
  position: absolute;
  top: 0;
  white-space: nowrap;
  color: var(--facto-azul);
  opacity: 0;
}

.facto-fontes__lista li::after { right: 0; font-weight: 400; }

.facto-fontes__fios {
  align-self: stretch;
  width: 100%;
  height: 100%;
  overflow: visible;
  contain: size; /* não pede altura pelo viewBox: estica na da lista */
}

.facto-fontes__fios path {
  fill: none;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.facto-fontes__base path { stroke: rgba(24, 27, 31, 0.12); }
.facto-fontes__acesos path { stroke: var(--facto-azul); opacity: 0; }

/* as barras dos modelos, cada uma da altura das fontes que chegam */
.facto-fontes__modelos {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.facto-fontes__modelos li {
  position: absolute;
  left: 0;
  height: var(--h);
  display: flex;
  align-items: center;
  gap: 12px;
  transform: translateY(-50%);
}

.facto-fontes__modelos i {
  position: relative;
  align-self: stretch;
  width: 4px;
  background: rgba(24, 27, 31, 0.16);
}

.facto-fontes__modelos i::after,
.facto-fontes__barra {
  background: linear-gradient(to bottom, #6694ff, #a99bff 55%, #e992ff);
}

.facto-fontes__modelos i::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
}

.facto-fontes__modelos em {
  position: relative;
  font-style: normal;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  color: var(--dark-02);
}

.facto-fontes__modelos b { position: relative; font-weight: 400; }
.facto-fontes__modelos b::after { left: 0; }

.facto-fontes__modelos span,
.facto-fontes__nucleo,
.facto-fontes__grupo small {
  font-family: var(--facto-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
}

.facto-fontes__modelos span { color: var(--dark-05); }

/* a barra da Facto e o fim: os modelos da Facto → o Rivio Group */
.facto-fontes__facto {
  display: flex;
  align-items: center;
}

.facto-fontes__barra {
  width: 8px;
  height: 36%;
}

.facto-fontes__fim {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 12px;
}

.facto-fontes__nucleo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--dark-03);
}

.facto-fontes__rivio { background: var(--dark-01); }

.facto-fontes__saida {
  position: relative;
  width: 48px;
  height: 1px;
  overflow: hidden;
  background: rgba(24, 27, 31, 0.24);
}

.facto-fontes__saida i {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 30%, var(--facto-azul) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: facto-fontes-corre 2s var(--ease-in-out-soft) infinite;
}

@keyframes facto-fontes-corre {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

.facto-fontes__grupo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid rgba(24, 27, 31, 0.16);
  border-radius: var(--r-chip);
  background: #fff;
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
  color: var(--dark-01);
}

.facto-fontes__grupo small {
  margin-right: 4px;
  text-transform: uppercase;
  color: var(--dark-05);
}

.facto-fontes__rivio {
  width: 54px;
  height: 16px;
  -webkit-mask: url('/assets/facto/rivio-logo.svg') center / contain no-repeat;
  mask: url('/assets/facto/rivio-logo.svg') center / contain no-repeat;
}

/* a entrada: os FIOS SE FORMAM (o Matheus: "as linhas têm que ir se
   formando, conforme vão se conectando"). Cada SVG tem uma máscara com
   um retângulo que cresce da esquerda (`scaleX`, só `transform`): as
   fontes entram em cascata, os fios correm até os modelos, as barras
   acendem quando eles chegam, depois a saída até a Facto e o Rivio
   Group. No ciclo, o fio aceso também se forma, da fonte ao modelo e
   do modelo à Facto, a cada 2 s. */
.facto-fontes__varre {
  transform-box: fill-box;
  transform-origin: left center;
}

.js .facto-fontes__varre { transform: scaleX(0); }

.js .facto-fontes__lista li,
.js .facto-fontes__modelos,
.js .facto-fontes__facto,
.js .facto-fontes__fim { opacity: 0; }

.js .facto-fontes.is-seen .facto-fontes__lista li { animation: facto-hosp-entra 0.5s var(--ease-out-soft) calc(var(--k) * 24ms) forwards; }
.js .facto-fontes.is-seen .facto-fontes__varre { animation: facto-fontes-forma 1.6s var(--ease-in-out-soft) calc(0.6s + var(--atraso, 0) * 1.6s) forwards; }
.js .facto-fontes.is-seen .facto-fontes__modelos { animation: facto-hosp-entra 0.6s var(--ease-out-soft) 1.8s forwards; }
.js .facto-fontes.is-seen .facto-fontes__facto { animation: facto-hosp-entra 0.6s var(--ease-out-soft) 3.2s forwards; }
.js .facto-fontes.is-seen .facto-fontes__fim { animation: facto-hosp-entra 0.6s var(--ease-out-soft) 3.4s forwards; }

.js .facto-fontes.is-seen .facto-fontes__varre--aceso {
  animation: facto-fontes-forma-aceso 2s linear calc(4s + var(--atraso, 0) * 0.6s) infinite;
}

@keyframes facto-fontes-forma {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes facto-fontes-forma-aceso {
  0%, 10% { transform: scaleX(0); }
  50%, 100% { transform: scaleX(1); }
}

.facto-fontes.is-seen .facto-fontes__lista li::after,
.facto-fontes.is-seen .facto-fontes__acesos path,
.facto-fontes.is-seen .facto-fontes__modelos i::after,
.facto-fontes.is-seen .facto-fontes__modelos b::after {
  animation: facto-fontes-acende 10s linear calc(4s + var(--m) * 2s) infinite;
}

@keyframes facto-hosp-entra {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes facto-fontes-acende {
  0%, 21%, 100% { opacity: 0; }
  3%, 18% { opacity: 1; }
}

@media (max-width: 860px) {
  .facto-fontes {
    grid-template-columns: auto minmax(24px, 1fr) 96px minmax(16px, 0.4fr) 6px;
    margin-top: 48px;
  }

  .facto-fontes__lista { padding-right: 8px; }
  .facto-fontes__lista li { font-size: 10px; line-height: 14px; }
  .facto-fontes__modelos li { gap: 6px; }
  .facto-fontes__modelos em { font-size: 10px; }
  .facto-fontes__modelos span { display: none; }
  .facto-fontes__barra { width: 6px; }

  .facto-fontes__fim {
    grid-column: 1 / -1;
    justify-content: flex-end;
    gap: 8px;
    padding: 32px 0 0;
  }

  .facto-fontes__saida { width: 24px; }
  .facto-fontes__grupo { padding: 8px 12px; font-size: 12px; }
  .facto-fontes__grupo small { display: none; }
  .facto-fontes__rivio { width: 40px; height: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .facto-fontes__lista li,
  .js .facto-fontes__modelos,
  .js .facto-fontes__facto,
  .js .facto-fontes__fim { opacity: 1; animation: none !important; }
  .js .facto-fontes__varre { transform: none; animation: none !important; }
  .facto-fontes.is-seen .facto-fontes__lista li::after,
  .facto-fontes.is-seen .facto-fontes__acesos path,
  .facto-fontes.is-seen .facto-fontes__modelos i::after,
  .facto-fontes.is-seen .facto-fontes__modelos b::after,
  .facto-fontes__saida i { animation: none; }
}

/* ── § 3 · Carreiras: o palco preso ──────────────────────
   A pista tem cinco passos de 80svh além da tela; o palco (100svh)
   fica preso enquanto ela passa. Cinco marcos invisíveis, um por passo,
   avisam o `facto.js` qual está no meio da tela, e ele escreve o
   `data-passo` na pista. A foto ocupa tudo; a metade da esquerda é um
   VIDRO fosco (desfoque de 32 sobre a foto) com o degradê da marca por
   dentro (as manchas do herói, lilás e azul, andando atrás do fosco) e
   a lista dos quatro temas. No centro, sobre a divisa do vidro, a
   frase do passo, a 48 em 300, que troca subindo 16 e acendendo (só
   `transform`/`opacity`). A seta para as vagas fica no pé. No estreito
   o vidro desce para a metade de baixo (ver "O estreito"). */
.facto-carreira { padding: 0; background: var(--dark-01); }

.facto-palco {
  position: relative;
  height: calc(100svh + 400svh);
}

.facto-palco__marco {
  position: absolute;
  left: 0;
  top: calc(var(--i) * 80svh + 10svh);
  width: 1px;
  height: 80svh;
  pointer-events: none;
}

.facto-palco__tela {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: clip;
  isolation: isolate;
  color: var(--light-01);
}

.facto-palco__tela > img {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% 40%;
}

/* o véu: escurece de leve o todo e mais no pé, onde fica a seta */
.facto-palco__tela::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(10, 11, 15, 0.16) 0%, rgba(10, 11, 15, 0) 24%, rgba(10, 11, 15, 0) 64%, rgba(10, 11, 15, 0.4) 100%);
  pointer-events: none;
}

/* a tinta da foto: um véu azul e lilás em `color`, a 32%, que puxa os
   tons quentes do pôr do sol para a luz de estúdio dos retratos dos
   modelos (2026-11-12, "ir mais nessa linha, pra não descasar") */
.facto-palco__tela::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(135deg, #6694ff 0%, #a99bff 55%, #e992ff 100%);
  mix-blend-mode: color;
  opacity: 0.32;
  pointer-events: none;
}

.facto-palco__vidro {
  position: absolute;
  inset: 0 50% 0 0;
  z-index: -2;
  overflow: clip;
  /* o degradê de estúdio do fundo dos retratos: azul em cima, lilás no
     meio, um toque de pêssego embaixo, translúcido sobre a foto */
  background: linear-gradient(170deg, rgba(102, 148, 255, 0.56) 0%, rgba(150, 156, 255, 0.44) 36%, rgba(233, 146, 255, 0.4) 72%, rgba(255, 190, 120, 0.28) 100%);
  backdrop-filter: blur(40px) saturate(1.1);
  -webkit-backdrop-filter: blur(40px) saturate(1.1);
  border-right: 1px solid rgba(255, 255, 255, 0.32);
}

/* as manchas do herói por dentro do vidro, em `soft-light`: dão
   movimento à luz sem sujar o degradê de estúdio */
.facto-palco__luz {
  position: absolute;
  inset: 0;
  opacity: 0.4;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.facto-palco__luz .facto-hero__mancha { width: 48vmax; height: 48vmax; }

.facto-palco__menu {
  position: absolute;
  bottom: 120px;
  left: max(var(--gutter), (100vw - 1216px) / 2);
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* a chamada no alto à esquerda, sobre o vidro (2026-11-12, "no desktop
   esse texto pode ficar na parte de cima, do lado esquerdo, fora do
   box"); a lista desce para o pé da coluna */
.facto-palco__chamada {
  position: absolute;
  top: 120px;
  left: max(var(--gutter), (100vw - 1216px) / 2);
  width: min(320px, 28vw);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.facto-palco__chamada .eyebrow { margin: 0; }

.facto-palco__chamada-titulo {
  margin: 0;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--light-01);
  text-wrap: balance;
}

.facto-palco__chamada-linha {
  margin: 0;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.6;
  color: var(--light-64);
  text-wrap: pretty;
}

.facto-palco__menu .eyebrow { display: none; }

/* no largo o passo 0 do texto da direita sai (a chamada está à
   esquerda); a direita fica vazia até o primeiro scroll, quando entra
   Operação */
.facto-palco__texto[data-passo='0'] { display: none; }

.facto-palco__lista {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.facto-palco__lista button {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
  color: var(--light-48);
  cursor: pointer;
  transition: color 0.4s var(--ease-out-soft), transform 0.4s var(--ease-out-soft);
}

.facto-palco__lista button span {
  font-family: var(--facto-mono);
  font-size: 10px;
  letter-spacing: 0.02em;
}

.facto-palco__lista button:hover { color: var(--light-80); }

.facto-palco[data-passo='1'] [data-carreira-ir='1'],
.facto-palco[data-passo='2'] [data-carreira-ir='2'],
.facto-palco[data-passo='3'] [data-carreira-ir='3'],
.facto-palco[data-passo='4'] [data-carreira-ir='4'] {
  color: var(--light-01);
  transform: translateX(8px);
}

/* o texto do passo, SOLTO e na COLUNA DO VIDRO (2026-11-12: "colocar
   todo o escrito na parte desfocada… e deixar o médico sem
   interferência"): no largo, a chamada no alto, o passo no meio, a
   lista embaixo e a seta no pé, todos na mesma margem esquerda da
   coluna de 1216; a foto da direita fica limpa. Os cinco textos ficam empilhados no mesmo
   lugar (grid 1/1). O véu do palco escurece esse lado para o texto
   claro ler sobre a parede clara da foto. No estreito ele desce para
   o pé, acima da seta. */
/* o descritivo ABRE EMBAIXO DO ITEM ATIVO (2026-11-12, "embaixo de cada
   item… operação sobe e o texto aparece embaixo… uma linha entre
   operação e o descritivo"): no largo, a lista vira o índice e o
   conteúdo. O painel de cada item fica fechado (`grid-template-rows:
   0fr`) e abre para 1fr no passo dele; como a lista está presa ao pé,
   ela cresce para cima. Uma linha fina separa o rótulo do texto. Fora
   do laço de quadro: é transição de CSS disparada pelo `data-passo`. */
.facto-palco__lista li { display: grid; }

.facto-palco__painel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.6s var(--ease-out-soft), opacity 0.4s var(--ease-out-soft);
}

.facto-palco__painel > div {
  min-height: 0;
  overflow: hidden;
  width: min(360px, 28vw);
}

.facto-palco[data-passo='1'] .facto-palco__lista li:nth-child(1) .facto-palco__painel,
.facto-palco[data-passo='2'] .facto-palco__lista li:nth-child(2) .facto-palco__painel,
.facto-palco[data-passo='3'] .facto-palco__lista li:nth-child(3) .facto-palco__painel,
.facto-palco[data-passo='4'] .facto-palco__lista li:nth-child(4) .facto-palco__painel {
  grid-template-rows: 1fr;
  opacity: 1;
  transition-delay: 0.08s;
}

.facto-palco__painel-titulo {
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.24);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.3;
  color: var(--light-01);
  text-wrap: balance;
}

.facto-palco__painel-linha {
  margin: 8px 0 8px;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.6;
  color: var(--light-64);
  text-wrap: pretty;
}

/* no largo o bloco do passo no meio sai: o texto mora na lista */
.facto-palco__textos { display: none; }

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

.facto-palco__textos {
  position: absolute;
  top: 50%;
  left: max(var(--gutter), (100vw - 1216px) / 2);
  width: min(360px, 28vw);
  transform: translateY(-50%);
  display: none;
  pointer-events: none;
}

.facto-palco__texto {
  grid-area: 1 / 1;
  text-align: left;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--ease-out-soft), transform 0.7s var(--ease-out-soft);
}

.facto-palco[data-passo='0'] .facto-palco__texto[data-passo='0'],
.facto-palco[data-passo='1'] .facto-palco__texto[data-passo='1'],
.facto-palco[data-passo='2'] .facto-palco__texto[data-passo='2'],
.facto-palco[data-passo='3'] .facto-palco__texto[data-passo='3'],
.facto-palco[data-passo='4'] .facto-palco__texto[data-passo='4'] {
  opacity: 1;
  transform: none;
  transition-delay: 0.12s;
}

.facto-palco__num {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-family: var(--facto-mono);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--light-80);
}

.facto-palco__num::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7eb8ff;
  animation: facto-mira-pulsa 1.6s var(--ease-in-out-soft) infinite;
}

.facto-palco__titulo {
  margin: 0;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--light-01);
  text-wrap: balance;
}

.facto-palco__linha {
  margin: 8px 0 0;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.6;
  color: var(--light-64);
  text-wrap: pretty;
}

.facto-palco__acao {
  position: absolute;
  left: max(var(--gutter), (100vw - 1216px) / 2);
  bottom: 40px;
}

.facto-palco__acao .cta-seta__txt { white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .facto-palco__texto,
  .facto-palco__lista button { transition: none; }
}

/* ── § 3 · Carreiras no largo: a linha do meio ────────────────────
   (2026-11-12, referência do Matheus: o ambiente inteiro desfocado,
   "dá para ver que tem uma imagem de fundo", e três coisas alinhadas
   numa linha horizontal no meio da tela). Só no largo; o estreito
   (aprovado) não muda. O vidro cobre a tela toda (a foto do médico
   vira atmosfera); à esquerda a chamada em etiqueta; no centro a lista
   em roda, com o item ativo entre colchetes no meio e os outros
   apagados, deslizando 40 por passo; à direita, na mesma linha, o
   título do passo e um descritivo pequeno. A seta para as vagas fica
   no pé, à esquerda. */
/* a LINHA DO MEIO vale em TODAS as larguras desde 2026-11-12 ("ajustar
   a seção de carreiras do mobile para ficar igual do desktop… um padrão
   único"); antes ficava em `@media (min-width: 53.8125em)`. No
   estreito só muda a posição: as três coisas empilham (ver lá). */
.facto-palco__vidro { inset: 0; border-right: 0; }

/* a TRANSIÇÃO (2026-11-12, "no scroll aparece a foto do médico, e
   conforme vou dando scroll a textura rosa, azul vai entrando e aí
   entra o texto"): no passo 0 a foto fica nítida e sozinha; do passo
   1 em diante o vidro entra em fade (1 s) e o texto vem logo depois.
   A tinta azul e lilás da foto fica ligada desde o passo 0 ("a
   fotografia já com aquele tom mais para o rosa e azul… transição
   mais suave"). Só opacidade. */
.facto-palco__vidro,
.facto-palco__acao {
  transition: opacity 1s var(--ease-out-soft);
}

.facto-palco[data-passo='0'] .facto-palco__vidro,
.facto-palco[data-passo='0'] .facto-palco__acao { opacity: 0; }

.facto-palco__chamada,
.facto-palco__menu {
  transition: opacity 0.8s var(--ease-out-soft) 0.4s;
}

.facto-palco[data-passo='0'] .facto-palco__chamada,
.facto-palco[data-passo='0'] .facto-palco__menu {
  opacity: 0;
  transition-delay: 0s;
}

.facto-palco__chamada {
  top: 50%;
  width: min(280px, 22vw);
  transform: translateY(-10px);
  gap: 0;
}

.facto-palco__chamada .eyebrow,
.facto-palco__chamada-linha { display: none; }

.facto-palco__chamada-titulo {
  font-family: var(--font-label);
  font-weight: var(--tag-peso);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: var(--tag-track);
  text-transform: uppercase;
  color: var(--light-01);
}

.facto-palco__menu {
  top: 50%;
  bottom: auto;
  left: 50%;
  transform: translate(-50%, -20px);
  gap: 0;
}

.facto-palco__lista {
  gap: 0;
  align-items: center;
  transition: transform 0.7s var(--ease-out-soft);
}

.facto-palco[data-passo='2'] .facto-palco__lista { transform: translateY(-40px); }
.facto-palco[data-passo='3'] .facto-palco__lista { transform: translateY(-80px); }
.facto-palco[data-passo='4'] .facto-palco__lista { transform: translateY(-120px); }

.facto-palco__lista li { display: flex; justify-content: center; height: 40px; align-items: center; }

.facto-palco__lista button {
  gap: 12px;
  font-family: var(--font-label);
  font-weight: var(--tag-peso);
  font-size: 12px;
  letter-spacing: var(--tag-track);
  text-transform: uppercase;
  color: var(--light-48);
  opacity: 0.72;
}

.facto-palco__lista button span { display: none; }

.facto-palco__lista button::before,
.facto-palco__lista button::after {
  opacity: 0;
  transition: opacity 0.4s var(--ease-out-soft);
}

.facto-palco__lista button::before { content: '['; }
.facto-palco__lista button::after { content: ']'; }

.facto-palco[data-passo='1'] [data-carreira-ir='1'],
.facto-palco[data-passo='2'] [data-carreira-ir='2'],
.facto-palco[data-passo='3'] [data-carreira-ir='3'],
.facto-palco[data-passo='4'] [data-carreira-ir='4'] {
  color: var(--light-01);
  opacity: 1;
  transform: none;
}

.facto-palco[data-passo='1'] [data-carreira-ir='1']::before,
.facto-palco[data-passo='1'] [data-carreira-ir='1']::after,
.facto-palco[data-passo='2'] [data-carreira-ir='2']::before,
.facto-palco[data-passo='2'] [data-carreira-ir='2']::after,
.facto-palco[data-passo='3'] [data-carreira-ir='3']::before,
.facto-palco[data-passo='3'] [data-carreira-ir='3']::after,
.facto-palco[data-passo='4'] [data-carreira-ir='4']::before,
.facto-palco[data-passo='4'] [data-carreira-ir='4']::after { opacity: 1; }

.facto-palco__painel { display: none; }

.facto-palco__textos {
  display: grid;
  top: 50%;
  left: auto;
  right: max(var(--gutter), (100vw - 1216px) / 2);
  width: min(320px, 24vw);
  transform: translateY(-10px);
}

.facto-palco__num { display: none; }

.facto-palco__titulo { font-size: 12px; font-family: var(--font-label); font-weight: var(--tag-peso); letter-spacing: var(--tag-track); text-transform: uppercase; line-height: 1.6; }

.facto-palco__linha { margin-top: 8px; font-size: 12px; line-height: 1.7; }

/* ── O estreito ─────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .facto-sec { padding: 80px 0; }
  .facto-gente__head { flex-direction: column; align-items: flex-start; gap: 24px; }
  .facto-gente__fila { gap: 16px; margin-top: 40px; }
  .facto-modelo { width: 72vw; }
  .facto-modelo__texto { padding: 20px; }
  .facto-modelo__nome { font-size: 20px; }
  .facto-modelo__txt { font-size: var(--p-mobile); }
  /* o palco no estreito: o MESMO do largo (vidro inteiro, transição,
     roda com colchetes), só que EMPILHADO na vertical: a chamada no
     alto, a roda no meio e o passo embaixo, centrados; a roda ocupa
     ±140 do meio, então a chamada fica 200 acima e o passo 168 abaixo */
  .facto-palco__tela > img { object-position: 56% 30%; }
  .facto-palco__chamada {
    left: 50%;
    right: auto;
    top: calc(50% - 200px);
    width: calc(100% - 2 * var(--gutter));
    transform: translateX(-50%);
    text-align: center;
  }
  .facto-palco__textos {
    top: calc(50% + 168px);
    left: var(--gutter);
    right: var(--gutter);
    width: auto;
    transform: none;
    text-align: center;
  }
  .facto-palco__acao { left: 50%; translate: -50% 0; bottom: 24px; }
  .facto-palco__texto { text-align: center; }
  .facto-mira--heroi .facto-mira__chip { font-size: 10px; }
  .facto-mira--heroi .facto-mira__chip::before { top: 10px; }
}

/* ── O rodapé da Facto ──────────────────────────────────────────────
   (2026-11-12, "bem simples e clean"): uma faixa no Dark-01. Em cima, a
   marca "facto." com "AI · PART OF RIVIO" embaixo, à esquerda e três links à direita; um fio; embaixo, a linha legal da
   Rivio em 12, apagada. No estreito, tudo empilha à esquerda. */
.facto-foot {
  padding: 64px 0 40px;
  background: var(--dark-01);
  color: var(--light-01);
}

.facto-foot__inner {
  width: min(1216px, calc(100% - 2 * var(--gutter)));
  margin: 0 auto;
}

.facto-foot__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* a marca "facto." (o ponto quadrado é um fundo de `currentColor` no
   fim, como no menu e no herói) e o tag espaçado embaixo */
.facto-foot__marca {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
}

.facto-foot__facto {
  padding-right: 0.18em;
  font-family: 'Funnel Display', sans-serif;
  font-weight: 600;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.035em;
  background: linear-gradient(currentColor, currentColor) no-repeat right 0 bottom 0.125em / 0.14em 0.14em;
}

.facto-foot__tag {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--light-80);
}

.facto-foot__links {
  display: flex;
  gap: 32px;
}

.facto-foot__links a,
.facto-foot__legal a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s var(--ease-out-soft);
}

.facto-foot__links a {
  font-size: 14px;
  color: var(--light-80);
}

.facto-foot__links a:hover,
.facto-foot__legal a:hover { color: var(--light-01); }

.facto-foot__legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 24px;
  font-size: 12px;
  color: var(--light-48);
}

.facto-foot__legal p { margin: 0; }

.facto-foot__legal nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

@media (max-width: 860px) {
  .facto-foot { padding: 48px 0 32px; }
  .facto-foot__topo,
  .facto-foot__legal { flex-direction: column; align-items: flex-start; }
  .facto-foot__topo { gap: 32px; padding-bottom: 32px; }
}

/* ── Sobre a Facto (`/facto/sobre`, 2026-11-12) ───────────────────────
   Uma página curta. A ABERTURA: a claraboia do banco com a tinta das
   carreiras e um véu no pé, o título em branco no pé à esquerda. O TEXTO:
   o lede grande à esquerda e, à direita, como a Facto trabalha e o bloco
   "part of Rivio" (a marca, a frase do grupo e o link para a Rivio); a
   seta para as vagas embaixo. */
.facto-sobre-topo {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: min(80svh, 720px);
  padding: 160px 0 80px;
  overflow: hidden;
  background: var(--dark-01);
  color: var(--light-01);
}

.facto-sobre-topo > img {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.facto-sobre-topo::before,
.facto-sobre-topo::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.facto-sobre-topo::before {
  z-index: -2;
  background: linear-gradient(135deg, #6694ff 0%, #a99bff 55%, #e992ff 100%);
  mix-blend-mode: color;
  opacity: 0.32;
}

.facto-sobre-topo::after {
  z-index: -1;
  background:
    linear-gradient(0deg, rgba(24, 27, 31, 0.72) 0%, rgba(24, 27, 31, 0) 60%),
    linear-gradient(180deg, rgba(24, 27, 31, 0.48) 0%, rgba(24, 27, 31, 0) 20%);
}

.facto-sobre-topo__texto {
  width: min(1216px, calc(100% - 2 * var(--gutter)));
  margin: 0 auto;
}

.facto-sobre-etiqueta { color: var(--light-80); }

/* delicado (2026-11-12, "títulos muito grandes… um negócio um pouco
   mais delicado, lembra do que a gente já ajustou"): o título a 32 em
   300 no largo, como a frase do herói tinha; o lede a 20 em 300; o
   corpo a 14 */
.facto-sobre-topo__titulo {
  max-width: 22em;
  margin: 16px 0 0;
  font-family: 'Funnel Display', sans-serif;
  font-weight: 300;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.25;
  letter-spacing: 0;
}

.facto-sobre-texto {
  padding: 120px 0;
  background: #fff;
}

.facto-sobre-texto__grade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 96px;
  width: min(1216px, calc(100% - 2 * var(--gutter)));
  margin: 0 auto;
}

.facto-sobre-texto__lede {
  margin: 0;
  text-wrap: pretty;
  font-family: 'Funnel Display', sans-serif;
  font-weight: 300;
  font-size: 20px;
  line-height: 1.5;
  color: var(--dark-02);
}

.facto-sobre-texto__col > p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--dark-03);
}

.facto-sobre-grupo {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid rgba(24, 27, 31, 0.12);
}

.facto-sobre-grupo > p:not(.facto-sobre-grupo__marca) {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--dark-03);
}

.facto-sobre-grupo__marca {
  --fio-h: 22px;
  --fio-b: -4px;
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0;
  color: var(--dark-01);
}

.facto-sobre-grupo__facto {
  padding-right: 0.18em;
  font-family: 'Funnel Display', sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 1;
  letter-spacing: -0.035em;
  background: linear-gradient(currentColor, currentColor) no-repeat right 0 bottom 0.125em / 0.14em 0.14em;
}

.facto-sobre-grupo__parte {
  position: relative;
  padding-left: 14px;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.facto-sobre-grupo__link {
  display: inline-flex;
  gap: 6px;
  margin-top: 16px;
  font-size: 14px;
  color: var(--dark-01);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.facto-sobre-acao {
  width: min(1216px, calc(100% - 2 * var(--gutter)));
  margin: 72px auto 0;
}

@media (max-width: 860px) {
  .facto-sobre-topo { min-height: 72svh; padding: 120px 0 56px; }
  .facto-sobre-texto { padding: 80px 0; }
  .facto-sobre-texto__grade { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .facto-sobre-acao { margin-top: 48px; }
}