/* ═════════════════════════════════════════════════════════════════
   RIVIO — Página de carreiras

   Ela é composta como a HOME, não como um case. A grade de rótulo +
   conteúdo dos cases (384 + 800) existe para documento longo; uma
   página de carreiras é uma sequência de seções de largura cheia, cada
   uma com cabeçalho, e é isso que a home faz. Daí tudo aqui ser
   emprestado dela, medida por medida:

   · o HERÓI da home, com vídeo no lugar da foto;
   · o `dark-section` (cabeçalho de eyebrow + título, `--dark-pad`,
     trilho com setas) para o ponto de partida e para o GARRA;
   · o par LEAD 312 + COLUNAS 751 da Visão para as seções de texto;
   · a GRADE de cards da § 4.6 (16 de calha, 1216 de largura) para os
     caminhos e os benefícios;
   · o cabeçalho com CTA à direita da § 4.6 para as vagas;
   · o CTA fotográfico que prende no topo, para o fecho.

   As classes `dark-section*`, `eyebrow`, `rail`, `rail-nav`, `cta__*` e
   `cta-seta*` vêm do `componentes.css` sem uma linha nova. O que está aqui é
   só o que a home não tem.
   ═════════════════════════════════════════════════════════════════ */

/* ── O herói ─────────────────────────────────────────────────────
   A estrutura — vídeo sangrando, véu, manchete com o convite para
   rolar e o cartão do vídeo alinhado pela base — subiu para o
   `componentes.css` (`.hero-video`) em 2026-09-23, quando a página de
   produto passou a abrir do mesmo jeito. Aqui fica só a manchete. */

/* A manchete tem 55 caracteres contra os 40 da home, e a caixa da home
   (10,77em, calibrada para "Hospitais eficientes / salvam mais vidas.")
   a partia em três linhas — e uma caixa maior partia em três também,
   só que em outro lugar (14,4em: "…o seu / chamado. Talvez este seja o
   / seu."). A quebra certa aqui é SINTÁTICA, não métrica: a segunda
   frase começa em linha própria, e é isso que o `display: block` faz. A
   caixa solta, para a primeira frase caber inteira na sua linha.

   O `em` não é itálico: é a segunda frase em cor de marca, que é como o
   documento de copy a destaca. E é por ele que este título NÃO usa a
   divisão em linhas do hero da home: `splitLines` remonta o texto a
   partir do `textContent` e a marcação interna se perde. */
.carr-hero .hero__headline { max-width: none; }
/* O `<em>` só quebra a linha: a segunda frase é da MESMA cor da
   primeira — "muito feio título com 2 cores". */
.carr-hero .hero__headline em {
  display: block;
  font-style: normal;
  color: inherit;
}

/* SEM LEDE. O parágrafo que morava na coluna da direita virou o texto
   que se lê na seção seguinte (`.carr-tell`), e o lugar dele na linha
   é do CARTÃO DO VÍDEO, alinhado pela base como no obrigado. */

/* O cartão do vídeo e o modal subiram para o `componentes.css`
   (`.video-cartao`, `.video-modal`) em 2026-09-23, quando a página de
   produto passou a usar os dois. */

/* ── O texto que se lê ───────────────────────────────────────────
   É a § 2 da home, sem uma linha de CSS nova para o palco: `.tell`,
   `.tell__track`, `.tell__stage`, `.tell__text` e a animação das letras
   vêm do `componentes.css`, e o `tell.js` — que já roda em toda página pelo
   `main.js` — monta o palco. Com UM texto ele faz só a revelação: aqui
   entre 3% e 60% da fita (`data-tell-fim="0.6"` no markup; o padrão do
   módulo é 80%).

   O FIM DA FITA NÃO É ESPERA: é onde o texto se APAGA enquanto a seção
   dos aros acende por cima, com os dois palcos presos juntos (ver
   `.carr-aros`). A leitura termina em 78%: depois dela sobra só o que a
   troca pede, e quase nenhuma espera — com 60% eram 42svh parados com o
   texto aceso antes de a troca começar, e a passagem demorava.

   O que muda é a FITA, e ela sai do ritmo da home, não do olho. Conta
   CARACTERE, não letra: vírgula e ponto também acendem — 103 lá e 115
   aqui (a frase vai até o primeiro ponto; a segunda abre a seção dos
   aros). A cabeça de leitura anda `n − 1 + 22` passos (22 é o rastro).
   Na home o parágrafo acende em 158svh (180 de leitura × 0,88 de
   respiro) ao longo de 124 passos: 1,277svh por passo. Aqui são 136
   passos, que no mesmo ritmo pedem 174svh; como a revelação ocupa 75%
   da fita (de 3% a 78%), a fita é 174 / 0,75 ≈ 233 além da tela do
   palco. Os 22% finais são 51svh: 11 de respiro com o texto inteiro
   aceso e 40 de sobreposição (`--carr-aros-sobre`).

   No celular a home acende a 0,390svh por passo (55 × 0,88 / 124): aqui
   dá 53svh de leitura e 71 de fita, com 16 finais — 4 de respiro e 12
   de sobreposição. Mesmo corte de 860 dos tokens. */
.carr-tell { --carr-leitura: 233; }

/* O texto se apaga pela troca que o `carreiras.js` escreve na seção
   (`--carr-some`, de 0 a 1). Sem JS ou com movimento reduzido a variável
   não existe, e o texto fica inteiro. */
.carr-tell .tell__text { opacity: calc(1 - var(--carr-some, 0)); }

.carr-tell .tell__track {
  height: calc((100 + var(--carr-leitura)) * 1svh);
}

@media (max-width: 860px) {
  .carr-tell { --carr-leitura: 71; }
}

/* A regra acima é (0,2,0) e a que solta o palco no `componentes.css` é
   `.tell__track` (0,1,0) dentro de um `@media` — ESPECIFICIDADE VENCE
   MEDIA QUERY. Sem desfazer aqui, com movimento reduzido ou sem JS o
   texto já aceso ficava perdido numa fita de 460svh. */
@media (prefers-reduced-motion: reduce), (scripting: none) {
  .carr-tell .tell__track { height: auto; }
}

/* ── Os missionários: os aros · Figma 1162:2227 ─────────────────
   O palco dos aros é o COMPONENTE `.aros` (`componentes.css` e
   `js/aros.js`) desde 2026-09-25, quando o Quem somos passou a usar o
   mesmo palco. Aqui fica só o que é desta página: a seção ENTRA POR CIMA
   do fim da fita da § 2 (`--carr-aros-sobre`) e a seção seguinte sobe
   por cima do fim desta (`--carr-aros-cobre`).

   Os dois números moram em `:root` porque a seção seguinte é IRMÃ desta,
   e custom property não passa de irmão para irmão. */
:root {
  /* (A FITA — 250svh, 190 no celular — mora no componente, `.aros`.)
     250svh de rolagem presa. Foram 400 (roda demais), 200 (rápido
     demais) e 280. A coreografia começa no PRIMEIRO QUARTO da troca
     (10svh) e ocupa os 240 restantes, em atos separados: 65 de aros, 70
     de pessoas, 55 de frase aparecendo aos poucos, 12 de respiro, 22 de
     frase saindo e 48 de saída — as bordas se sobrepõem um pouco (ver
     `ATOS` no JS). */
  /* Quanto esta seção entra POR CIMA do fim da fita da § 2. Nesse trecho
     os dois palcos estão presos ao mesmo tempo: o texto de lá se apaga e
     este palco acende. Pedido do Jefferson — o efeito de sobrepor em vez
     de a seção subir com a rolagem. Eram 80, e a passagem demorava. */
  --carr-aros-sobre: 40;
  /* Quanto a seção seguinte sobe por cima do fim da fita — o mecanismo
     da § 4.6 sobre a constelação. Com a fita curta, 100 a trazia no meio
     das pessoas chegando; 40 a faz despontar só quando a frase já está
     saindo (210svh), e a saída começa logo antes, para a órbita ser vista
     antes de ser coberta. */
  --carr-aros-cobre: 40;
}

/* No celular: 190 de fita, a coreografia começa em 3 (primeiro quarto dos
   12 de troca) e a seção seguinte desponta em 160 — o mesmo ponto
   relativo do desktop (84% da coreografia contra 83%). */
@media (max-width: 860px) {
  :root {
    --carr-aros-cobre: 30;
    --carr-aros-sobre: 12;
  }
}

/* ── A entrada por sobreposição ──────────────────────────────────
   A seção sobe `100 + sobre` telas para dentro da fita da § 2. A conta:
   o palco de lá fica preso até faltar uma tela para o fim da fita dele;
   subindo 100 telas, este palco prende exatamente quando aquele solta.
   As `sobre` telas a mais são o trecho em que OS DOIS estão presos — e
   é nele que um se apaga e o outro acende, sem nada deslizar.

   `z-index` e `position` para pintar por cima do palco de lá. Os dois
   fundos são brancos, então a troca lê como o texto se dissolvendo e os
   aros nascendo no mesmo lugar. */
.carr-aros {
  position: relative;
  z-index: 1;
  margin-top: calc((100 + var(--carr-aros-sobre)) * -1svh);
}


/* ── A seção seguinte sobe por cima ──────────────────────────────
   Margem negativa e `z-index`, o mecanismo da § 4.6 sobre a
   constelação. O fundo dela já é opaco (Dark-01). */
/* ── O PONTO DE PARTIDA · a cena · Figma 1176:2532 ───────────────
   Uma seção PRESA com a sequência inteira dos quadros 4.01 a 4.05. O JS
   escreve números (`--cresce`, `--malha`, o tamanho do cartão e as
   opacidades) e quem desenha é o CSS.

   A geometria do Figma, a 1440 × 816:

     · o título parte em duas, e as duas partes ficam COLADAS no centro
       (35 + 70 de altura, nada entre elas);
     · a foto nasce entre elas e cresce mantendo 1,4394 de proporção —
       233 × 162 no quadro 4.02, 832 × 578 no 4.03 —, sempre com 16 de
       folga para cada parte do título;
     · no fim ela sangra a tela e as duas partes já saíram.

   A folga também cresce com a foto: no 4.01 não há foto, e o vão entre
   as partes é zero. */
.carr-cena {
  position: relative;
  z-index: 1;
  /* sobe por cima do fim da fita dos aros, como a § 4 fazia */
  margin-top: calc(var(--carr-aros-cobre) * -1svh);
  background: var(--dark-01);
  color: var(--light-01);
}

:root {
  /* 440svh: a cena inteira mora aqui — título, foto crescendo, malha,
     cartão, parágrafo com tempo de leitura, frase. Medido: com 360 o
     parágrafo ficava 3% da fita em cena, 11svh. */
  --carr-cena-fita: 500;
  /* Quanto a seção seguinte sobe por cima do palco preso. Com 100 ela
     começava a cobrir em 72% da fita — antes de a frase entrar. Com 60
     a cobertura começa em 83%, e os atos acabam em 82%. */
  --carr-cena-cobre: 55;
}

@media (max-width: 860px) {
  :root {
    --carr-cena-fita: 420;
    --carr-cena-cobre: 46;
  }
}

.carr-cena__fita { height: calc((100 + var(--carr-cena-fita)) * 1svh); }

.carr-cena__palco {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: clip;
  isolation: isolate;

  /* A proporção do retângulo do Figma (233 × 162 e 832 × 578), e a
     LARGURA CHEIA é a que cobre a tela com ela: em janela baixa manda a
     largura, em janela alta manda a altura. */
  --prop: 1.4394;
  --cheia: max(100vw, calc(100svh * var(--prop)));
  --larg: calc(var(--cheia) * var(--cresce, 0));
  --alt: calc(var(--larg) / var(--prop));
  /* A folga do Figma entre a foto e cada parte do título. */
  --folga: calc(16px * var(--cresce, 0));
}

/* Sem JS (ou com movimento reduzido) o quadro final é a foto inteira com
   o texto por cima — ver o fim do arquivo. */
.js .carr-cena__palco { --cresce: 0; }

.carr-cena__moldura {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--larg);
  height: var(--alt);
  margin: 0;
  transform: translate(-50%, -50%);
  /* SEM raio: pedido do Jefferson. O retângulo que divide o título tem
     canto vivo do começo ao fim. */
  overflow: clip;
  background: var(--dark-02);
}

.carr-cena__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
}

/* ── A malha de pontos ───────────────────────────────────────────
   A malha do cartão da CTA e da /contato, nos mesmos números medidos do
   Figma: passo de 18,5, ponto de ~2px, e `overlay` — assim ela some na
   sombra e acende no claro da foto, em vez de ser uma grade chapada. */
.carr-cena__malha {
  position: absolute;
  inset: 0;
  overflow: clip;
  pointer-events: none;
  /* O teto é 0,55 e não 1: a 1 a grade competia com a fotografia em vez
     de assentar nela. */
  opacity: calc(var(--malha, 0) * 0.55);
  mix-blend-mode: overlay;
}

/* A malha de CSS: o quadro de quem não recebe o canvas. */
.carr-cena__malha i {
  position: absolute;
  inset: 0;
  display: block;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.85) 0.9px, transparent 1.6px);
  background-size: 20px 20px;
}

/* Com o canvas vivo, o fundo de CSS sai — senão os dois desenham a mesma
   grade, uma parada e outra reagindo ao cursor. */
.carr-cena__malha[data-malha='viva'] i { display: none; }

/* A tela do `malha.js` (o nome da classe é dele). */
.carr-cena__malha .ct-malha__tela {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ── O título em duas partes ─────────────────────────────────────
   Cada parte encosta no vão do centro: a de cima pela BASE, a de baixo
   pelo TOPO. Quem as afasta é a altura da foto. */
.carr-cena__titulo {
  position: absolute;
  inset: 0;
  margin: 0;
  font-weight: 400;
  /* 36 a 1440 — o mesmo `--h2` do resto do site, e o corpo do Figma. */
  font-size: var(--h2);
  line-height: 1.24;
  text-align: center;
  opacity: var(--titulo, 1);
}

/* A PINTURA do Figma (nó 1176:2366): Dark-02 com a lavada `#DDE7FF`
   recortada no texto — a mesma receita da frase dos aros. A lavada é uma
   ELIPSE INCLINADA (os dois eixos da matriz do Figma não são
   perpendiculares), que `radial-gradient` não desenha; então é o SVG que
   o `get_design_context` exporta, tal como veio, esticado na caixa.

   Cada parte tem a SUA: no arquivo a lavada corre pelo bloco inteiro, e
   o Figma a fatia por linha (as duas matrizes são a mesma, com o eixo
   vertical dobrado na parte de baixo, que tem duas linhas). Aqui isso é
   ainda mais necessário, porque as duas partes se afastam.

   A caixa é a do Figma, 488: com os 398 de antes o título de 36 quebrava
   "Medicina de classe mundial" em duas linhas. */
.carr-cena__parte {
  position: absolute;
  left: 50%;
  width: min(488px, calc(100% - 2 * var(--gutter)));
  transform: translateX(-50%);
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.carr-cena__parte--cima {
  background-image:
    url("data:image/svg+xml;utf8,<svg viewBox='0 0 488 45' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-56.166 26.036 -6.9966 -29.43 459 -97.071)'><stop stop-color='rgba(221,231,255,1)' offset='0'/><stop stop-color='rgba(221,231,255,0)' offset='1'/></radialGradient></defs></svg>"),
    linear-gradient(var(--dark-02), var(--dark-02));
}

.carr-cena__parte--baixo {
  background-image:
    url("data:image/svg+xml;utf8,<svg viewBox='0 0 488 90' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-56.166 52.071 -6.9966 -58.861 459 -194.14)'><stop stop-color='rgba(221,231,255,1)' offset='0'/><stop stop-color='rgba(221,231,255,0)' offset='1'/></radialGradient></defs></svg>"),
    linear-gradient(var(--dark-02), var(--dark-02));
}

.carr-cena__parte--cima { bottom: calc(50% + var(--alt) / 2 + var(--folga)); }
.carr-cena__parte--baixo { top: calc(50% + var(--alt) / 2 + var(--folga)); }


/* ── O cartão de vidro ───────────────────────────────────────────
   Nasce no canto de baixo à esquerda e cresce em dois tempos: primeiro
   o cartão pequeno com o parágrafo, depois até 32px do topo e da
   direita, com a frase e as três elipses.

   O desfoque é do FUNDO: a foto continua nítida nas faixas que sobram,
   e é isso que faz o cartão ler como vidro e não como chapa. */
.carr-cena__vidro {
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--cartao-l, 0px);
  height: var(--cartao-a, 0px);
  overflow: clip;
  opacity: var(--cartao-o, 0);
  /* Vidro ESCURO, e não claro: a foto por baixo tem papel branco e mesa
     ao sol, e sobre ela um véu claro deixava o texto em branco sem
     contraste. O degradê é mais denso embaixo, onde o parágrafo mora. */
  background: linear-gradient(to top, rgba(12, 13, 16, 0.46), rgba(12, 13, 16, 0.2));
  backdrop-filter: blur(28px) saturate(1.2);
  -webkit-backdrop-filter: blur(28px) saturate(1.2);
}

/* O cartão ABRAÇA o parágrafo: a caixa dele sai do texto mais 32 de
   respiro em volta (ver `carreiras.js`), e não de uma fração da tela. */
.carr-cena__par {
  position: absolute;
  left: 32px;
  bottom: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* A medida sai da JANELA e não do cartão: é o texto que dá tamanho ao
     cartão (o JS mede esta caixa), então ela não pode depender dele. */
  /* 96 = os 32 de respiro de cada lado do cartão mais os 32 que o cartão
     guarda da borda direita: assim, no estreito, ele abraça o texto E
     respeita a margem. */
  width: min(560px, calc(100vw - 96px));
  opacity: var(--par, 0);
  transform: translateY(calc((1 - var(--par, 0)) * 20px));
}

.carr-cena__par p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--light-80);
}

.carr-cena__par strong {
  font-weight: 500;
  color: var(--light-01);
}

/* 32px acima do meio: a seção seguinte sobe por cima do palco, e no
   meio exato a frase ficava sufocada na emenda — "era só um pouco, uns
   32px em baixo". O símbolo acompanha. */
.carr-cena__frase {
  position: absolute;
  left: 32px;
  top: calc(50% - 32px);
  width: min(760px, calc(100vw - 80px));
  margin: 0;
  /* DUAS linhas, como no quadro: a 32px numa caixa de 600 ela quebrava
     em três. */
  font-size: clamp(20px, 1.806vw, 26px);
  line-height: 1.35;
  color: var(--light-01);
  opacity: var(--frase, 0);
  transform: translateY(calc(-50% + (1 - var(--frase, 0)) * 20px));
}

.carr-cena__frase[data-cena-frase2] {
  opacity: var(--frase2, 0);
  transform: translateY(calc(-50% + (1 - var(--frase2, 0)) * 20px));
}


/* As três elipses do quadro 4.05, do lado oposto à frase e na mesma
   altura dela. */
.carr-cena__elipses {
  position: absolute;
  right: 40px;
  top: calc(50% - 32px);
  width: 64px;
  height: 56px;
  /* Ele GIRA 90° quando a frase troca: é assim que o último quadro o
     mostra, com uma elipse à esquerda e duas à direita. */
  transform: translateY(-50%) rotate(calc(var(--elipses-giro, 0) * 90deg));
  color: var(--light-01);
  opacity: var(--elipses, 0);
  /* Vazada e em `overlay`, como no quadro: assim ela acende no claro do
     vidro e some na sombra, em vez de ser um desenho chapado. */
  mix-blend-mode: overlay;
}

.carr-cena__elipses svg {
  width: 100%;
  height: 100%;
}

/* ── ONDE VOCÊ ENTRA · Figma 1185:3434, 1186:3565, 1186:3592 ─────
   Três blocos empilhados, cada um com a linha no topo: etiqueta à
   esquerda (coluna de 384) e, à direita (800), título, parágrafo e os
   cartões de ícone. Medidas do arquivo: bloco de 1216, calha de 32, 60
   entre a linha e o conteúdo e entre um bloco e a linha do próximo,
   cartões de 180 de altura com 12 de calha e raio 8.

   Sem palco preso e sem troca: a entrada é o `data-rise` do site, um
   bloco atrás do outro. */
.carr-entra {
  padding: 60px 0 120px;
  background: #fff;
}

/* A seção SOBE POR CIMA do palco preso da cena (`.carr-sec--cobre`, a
   mesma cobertura que o Resultado tinha), e por isso a entrada do
   título e do primeiro bloco é puxada pelo scroll, não por gatilho: o
   `carreiras.js` escreve `--res-titulo` e `--res-par` conforme o
   `[data-res-pe]` entra pela base da tela (regra das DIRETRIZES — o
   `data-rise` acabava com a seção ainda a meio caminho). Os blocos
   seguintes continuam com o `data-rise`. */
.js .carr-entra__abre {
  opacity: var(--res-titulo, 0);
  transform: translateY(calc((1 - var(--res-titulo, 0)) * 18px));
}

.js .carr-entra__bloco--primeiro {
  opacity: var(--res-par, 0);
  transform: translateY(calc((1 - var(--res-par, 0)) * 18px));
}

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

/* O título de abertura mora na COLUNA DE CONTEÚDO, alinhado com os
   títulos dos blocos — e leva a mesma pintura do título da cena: Dark-02
   com a lavada do Figma recortada no texto. */
.carr-entra__abre {
  width: 800px;
  max-width: 100%;
  margin: 0 0 60px auto;
  font-weight: 400;
  font-size: var(--h2);
  line-height: 1.24;
  background-image:
    url("data:image/svg+xml;utf8,<svg viewBox='0 0 800 90' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-91.271 40.55 -24.943 -45.982 939.23 -190)'><stop stop-color='rgba(221,231,255,1)' offset='0'/><stop stop-color='rgba(221,231,255,0)' offset='1'/></radialGradient></defs></svg>"),
    linear-gradient(var(--dark-02), var(--dark-02));
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.carr-entra__bloco {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 800px;
  column-gap: 32px;
  align-items: start;
  padding-top: 60px;
  border-top: 1px solid rgba(24, 27, 31, 0.12);
}

.carr-entra__bloco + .carr-entra__bloco { margin-top: 60px; }

.carr-entra__tag {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 12px 0;
  font-family: var(--font-label);
  font-weight: var(--tag-peso);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: var(--tag-track);
  text-transform: uppercase;
  color: var(--cor);
}

.carr-entra__ponto {
  width: 8px;
  height: 8px;
  flex: none;
  background: var(--cor);
}

.carr-entra__conteudo {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.carr-entra__titulo {
  margin: 0;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.5;
  color: var(--dark-01);
}

.carr-entra__par {
  margin: 0;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  color: var(--dark-04);
}

.carr-entra__itens {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  height: 180px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.carr-entra__itens--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.carr-entra__item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px;
  border-radius: var(--r-caixa);
  background: var(--light-01);
}

.carr-entra__item img {
  display: block;
  width: 32px;
  height: 32px;
}

.carr-entra__item p {
  margin: 0;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
  color: var(--dark-04);
}

@media (max-width: 900px) {
  .carr-entra { padding: 48px 0 80px; }

  .carr-entra__abre {
    width: 100%;
    margin-bottom: 40px;
  }

  .carr-entra__bloco {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 16px;
    padding-top: 32px;
  }

  .carr-entra__bloco + .carr-entra__bloco { margin-top: 40px; }

  /* Os cartões empilham: a 375 quatro colunas dariam 78px. */
  .carr-entra__itens,
  .carr-entra__itens--4 {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    height: auto;
  }

  /* Em coluna o card não tem altura para o `space-between` separar o
     ícone do texto — eles encostavam ("muito sufocado"). */
  .carr-entra__item {
    justify-content: flex-start;
    gap: 20px;
    padding: 16px;
  }
}

/* ── O RESULTADO · Figma 1182:2539 ───────────────────────────────
   Fotografia sangrando a seção (1440 × 720 no arquivo) e, no pé, uma
   linha de 1px a 24% de branco com o título à esquerda (506) e o
   parágrafo à direita (346), separados por 24 da linha e com 32 de
   respiro em volta.

   A ENTRADA é a do site (`data-rise`, do `rail.js`, disparada ao entrar
   em cena): a linha cresce da esquerda, e os dois textos sobem depois
   dela, em ordem de leitura. */
.carr-res {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: min(720px, 100svh);
  padding: 32px 0;
  overflow: clip;
  isolation: isolate;
  background: var(--dark-01);
  color: var(--light-01);
}

.carr-res__foto {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 25%;
}

.carr-res__pe { padding: 0 32px; }

/* A linha do Figma é a borda de cima da fileira; aqui ela é elemento
   próprio porque precisa CRESCER na entrada, e borda não anima. */
.carr-res__linha {
  display: block;
  height: 1px;
  background: rgba(255, 255, 255, 0.24);
  transform-origin: left center;
}

/* Quem move os três é o SCROLL, e não uma transição disparada ao entrar
   em cena: o `carreiras.js` escreve `--res-linha`, `--res-titulo` e
   `--res-par` (0 → 1) conforme a seção sobe, e o CSS desenha. Sem JS, as
   regras acima já são o quadro final. */
.js .carr-res__linha { transform: scaleX(var(--res-linha, 0)); }

.js .carr-res__titulo {
  opacity: var(--res-titulo, 0);
  transform: translateY(calc((1 - var(--res-titulo, 0)) * 18px));
}

.js .carr-res__par {
  opacity: var(--res-par, 0);
  transform: translateY(calc((1 - var(--res-par, 0)) * 18px));
}

.carr-res__cols {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
  padding-top: 24px;
}

.carr-res__titulo {
  width: 506px;
  max-width: 100%;
  margin: 0;
  font-weight: 400;
  font-size: clamp(20px, 1.944vw, 28px);
  line-height: 1.24;
  color: var(--light-01);
}

.carr-res__par {
  width: 346px;
  max-width: 100%;
  margin: 0;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
  color: var(--light-01);
}

.carr-res__par em {
  font-style: normal;
  color: var(--purple);
}

/* ── A variante "entrega vira sociedade" ─────────────────────────
   Mesmo componente, com o rótulo em cima do título e o convite para o
   livro embaixo do parágrafo. As colunas alinham pela BASE: o botão é o
   que fica na linha de baixo. */
/* Um véu só no pé, onde o texto mora: a foto tem madeira clara e a tela
   do notebook atrás do título. De 0 no meio a 0,55 na base. */
.carr-res::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(12, 13, 16, 0.55) 0%, rgba(12, 13, 16, 0.2) 40%, rgba(12, 13, 16, 0) 70%);
  pointer-events: none;
}

@media (max-width: 900px) {
  .carr-res { padding: 24px 0; }
  .carr-res__pe { padding: 0 var(--gutter); }

  .carr-res__cols {
    flex-direction: column;
    gap: 20px;
    padding-top: 20px;
  }

  .carr-res__titulo,
  .carr-res__par,
}

@media (prefers-reduced-motion: reduce) {
  /* O JS não roda com movimento reduzido, e sem ele as variáveis não
     existem: sem isto a linha ficaria em `scaleX(0)` e os textos em
     opacidade 0. */
  .js .carr-res__linha { transform: none; }

  .js .carr-res__titulo,
  .js .carr-res__par,
}

/* A seção seguinte sobe POR CIMA do palco preso.

   O TETO DE 640px não é enfeite: a seção que cobre tem 720 de altura, e
   numa janela alta 55svh passa disso — a partir de ~1310px de altura
   sobrava uma faixa do palco preto aparecendo embaixo dela. O `min`
   garante que a cobertura nunca seja maior que quem cobre. */
/* A cobertura também é limitada pela FRASE final da cena: ela mora 32px
   acima do meio do palco e precisa de 32px de folga sobre a emenda em
   qualquer altura de janela — numa janela baixa, 55svh passava por cima
   dela ("deu um erro na tela menor"). `50svh − 72px` é o meio menos a
   meia altura da frase (uma linha, ~36) e a folga; com duas linhas
   (janelas estreitas) ainda sobram ~15px. */
.carr-sec--cobre {
  position: relative;
  z-index: 2;
  margin-top: calc(-1 * min(var(--carr-cena-cobre) * 1svh, 50svh - 72px, 640px));
}

@media (max-width: 900px) {
  /* EM PÉ no estreito. Com a proporção deitada, na metade do crescimento
     a foto já sangrava as laterais enquanto a altura ainda era de 530 de
     812 — ela deixava de ler como um retângulo crescendo entre as duas
     partes do título. Medido a 375. */
  .carr-cena__palco { --prop: 0.75; }

  /* O respiro de 32 vale também no estreito: é ele que dá o tamanho do
     cartão. E a MEDIDA do texto sai da janela, nunca do cartão — o
     cartão começa com largura zero, e com `100%` daqui o texto quebrava
     letra a letra e o cartão herdava 64 × 1692. Medido a 375. */
  .carr-cena__par { gap: 16px; }

  /* Três parágrafos não cabem em 15/1,5 dentro do cartão pequeno de
     341px de altura — medido a 375, sobravam ~40px para fora. */
  .carr-cena__par p { font-size: 14px; line-height: 1.5; }



  /* O símbolo das três elipses não aparece no celular — a pedido: a
     frase basta, e ele só disputava o canto. */
  .carr-cena__elipses { display: none; }
}

@media (prefers-reduced-motion: reduce), (scripting: none) {
  /* Sem movimento a cena é o quadro final: a foto sangrando a tela, a
     malha acesa, o cartão grande com a frase — e o título e o parágrafo
     continuam legíveis, empilhados em cima. */
  .carr-cena__fita { height: auto; }

  .carr-cena__palco {
    position: relative;
    height: auto;
    min-height: 100svh;
  }

  .js .carr-cena__palco { --cresce: 1; }

  .carr-cena__malha { opacity: 1; }

  .carr-cena__titulo {
    position: relative;
    inset: auto;
    padding: 120px var(--gutter) 40px;
  }

  .carr-cena__parte {
    position: relative;
    left: auto;
    bottom: auto;
    top: auto;
    display: block;
    margin-inline: auto;
    transform: none;
  }

  .carr-cena__vidro {
    position: relative;
    width: auto;
    height: auto;
    opacity: 1;
    border-radius: 0;
  }

  /* O `[data-cena-frase2]` do bloco de cima é (0,2,0) e venceria este
     seletor: sem repeti-lo aqui, a última frase ficava invisível com
     movimento reduzido. */
  .carr-cena__par,
  .carr-cena__frase,
  .carr-cena__frase[data-cena-frase2] {
    position: relative;
    left: auto;
    top: auto;
    bottom: auto;
    width: auto;
    padding: 32px var(--gutter);
    opacity: 1;
    transform: none;
  }

  .carr-cena__elipses { display: none; }

  .carr-sec--cobre { margin-top: 0; }

  .js .carr-entra__abre,
  .js .carr-entra__bloco--primeiro { opacity: 1; transform: none; }
}


/* Sem movimento, ou sem JS: o quadro final vem do componente; aqui só
   sai a margem negativa, que comeria a seção. */
@media (prefers-reduced-motion: reduce), (scripting: none) {
  .carr-aros,
  .carr-partida { margin-top: 0; }
}

/* ── A seção clara ───────────────────────────────────────────────
   É a § 4.6 da home: 120 de respiro, coluna de 1216 centrada com o
   recuo de `--gutter`. `--suave` é o `Light-01` da Visão, para as seções
   claras alternarem como a home alterna. */
.carr-sec {
  padding: 120px 0;
  background: #fff;
}

.carr-sec--suave { background: var(--light-01); }

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

/* ── O par lead + colunas, da Visão ──────────────────────────────
   Eyebrow e título numa coluna de 312 à esquerda; o texto numa de 751 à
   direita, em duas colunas de 14. São as medidas do `.vision__top`. */
.carr-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
}

.carr-lead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  width: 312px;
  flex: none;
}

/* O título de seção clara: `--h2`, 1,24, Dark-02 — o `.vision__title`
   sem a lavada, que na Visão é do Figma daquela seção. O `em` é o
   destaque em cor de marca do documento de copy. */
.carr-titulo {
  margin: 0;
  font-weight: 400;
  font-size: var(--h2);
  line-height: 1.24;
  color: var(--dark-02);
  text-wrap: balance;
}

.carr-titulo em,
.dark-section__title em,
.carr-frase em {
  font-style: normal;
  color: var(--blue);
}

.carr-cols {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 752px;
  flex: none;
}

.carr-par {
  display: flex;
  gap: 48px;
}

.carr-par p {
  flex: 1;
  margin: 0;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.6;
  color: #0f0f0f;
}

.carr-par strong { font-weight: 500; }

/* A frase de fecho de uma seção: um degrau acima do parágrafo, um
   abaixo do título. É o corpo da citação dos cases (28 / 1,4) — a
   única coisa desta página que não vem da home, porque a home não tem
   frase de fecho. */
.carr-frase {
  margin: 0;
  max-width: 712px;
  font-weight: 400;
  font-size: clamp(22px, 1.944vw, 28px);
  line-height: 1.4;
  color: var(--dark-02);
  text-wrap: balance;
}

/* ── A grade de cards, da § 4.6 ──────────────────────────────────
   Três colunas iguais e 16 de calha, como os quatro cards da home. O
   card é superfície `Light-01` sem traço; o título em 20 / Dark-03 e a
   descrição em 14 / Dark-05 são o `.card__titulo` e o `.card__desc`. */
.carr-grade {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 60px 0 0;
  padding: 0;
  list-style: none;
}

.carr-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border-radius: var(--r-caixa);
  background: var(--light-01);
}

/* Sobre seção `Light-01` o card é branco: a mesma inversão que separa
   as caixas do fundo em toda a home. */
.carr-sec--suave .carr-card { background: #fff; }

.carr-card h3 {
  margin: 0;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.24;
  color: var(--dark-03);
}

.carr-card p {
  margin: 0;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--dark-05);
}

/* A etiqueta do caminho: o padrão `.eyebrow`, com a cor do caminho só
   no QUADRADO. 10px em azul de marca sobre `Light-01` dá 3,0:1 — e
   etiqueta que não se lê não rotula. */
.carr-card .eyebrow::before { background: var(--cor, currentColor); }

.carr-card ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.carr-card li {
  display: flex;
  gap: 10px;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--dark-05);
}

/* O marcador é o mesmo quadrado da etiqueta, em 6, na cor do caminho.
   7,5 de recuo centra o quadrado na primeira linha: (21 − 6) / 2. */
.carr-card li::before {
  content: '';
  width: 6px;
  height: 6px;
  flex: none;
  margin-top: 8px;
  background: var(--cor, currentColor);
}

/* O ícone dos benefícios: a moldura de 42 dos ícones do artigo, aqui
   sobre card branco ou `Light-01` — em qualquer dos dois o `#F0F5FF`
   da moldura ainda se separa. */
.carr-card img {
  width: 42px;
  height: 42px;
  flex: none;
}

/* ── O que a seção escura acrescenta ─────────────────────────────
   O `dark-section` da home dá o fundo, o recuo, o cabeçalho e o trilho.
   O que falta é um corpo de TEXTO — a home nunca põe prosa numa seção
   escura —, e ele ocupa a mesma largura do cabeçalho. */
/* A COLUNA DE TEXTO da grade. Ela era o corpo centrado da seção, com o
   recuo próprio; agora quem posiciona é a grade, e daqui só saem a
   direção e o respiro. Vem DEPOIS da regra da grade de propósito: a
   ordem no arquivo é o que decide entre regras de mesmo peso. */
.carr-partida__texto {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: auto;
  margin-left: 0;
}

.carr-partida__texto .carr-par {
  flex-direction: column;
  gap: 20px;
  max-width: none;
}

/* Sobre Dark-01 a prosa sobe de 14 para 16 e vai a `Light-80`: 14 em
   cinza sobre preto é o que a home evita ao não pôr prosa no escuro.
   `Light-80` dá 12:1. */
.carr-partida__texto .carr-par p {
  font-size: 16px;
  line-height: 1.5;
  color: var(--light-80);
}

.carr-partida__texto .carr-par strong { color: var(--light-01); }

/* ── GARRA · o carrossel das layers ──────────────────────────────
   A mecânica da § 3 da home: cinco painéis numa pista; a largura de
   cada um é a ABERTURA (`--a`, 0 = tira, 1 = aberto), que o JS escreve
   a cada quadro como função-tenda — a soma é sempre 1, e é isso que
   mantém a fileira fechando 100% em qualquer meio-termo. Sem giro: os
   cinco cabem na tela, e fechados eles escrevem G·A·R·R·A.

   A palavra é o ponto: as letras precisam ser GRANDES para GARRA ler
   de longe. Cada painel tem a LETRA (Bai Jamjuree Light, 74% da tira —
   112 a 1440, teto 150 — centrada no pé da tira, sempre no mesmo lugar)
   e, atrás dela, uma PLACA de vidro (preto a 32%, desfoque de 17 — a
   receita da home) que só existe FECHADA. A placa cobre o painel
   INTEIRO, com uma máscara que é cheia na largura da tira e cai a zero
   na borda direita: fechada, é a tira inteira; abrindo, o desfoque
   DESVANECE sobre a foto em vez de terminar num corte vertical no meio
   dela, e a placa toda apaga até 70% da abertura. A letra é branca a
   50% com uma cópia em `overlay` por cima (o pseudo-elemento, mesmo
   glifo): o overlay tinge a letra com a foto e dá o brilho; a base
   garante a leitura onde a foto é escura (só overlay, o G sumia no
   paletó). Sem rótulo de "Princípio 0n" — o princípio já está no texto
   da barra. A letra nunca troca de elemento nem some, e as cinco ficam
   num passo regular em qualquer meio-termo — é o que mantém a palavra
   legível com um painel aberto. */
:root { --carr-garra-fita: 320; }

@media (max-width: 860px) {
  :root { --carr-garra-fita: 280; }
}

/* `--garra-desloca` (0 no largo; a altura do cabeçalho no estreito, medida
   pelo JS) é quanto o cabeçalho ROLA PARA FORA antes de o palco prender:
   um `top` negativo no sticky, e o palco e a fita crescem o mesmo tanto. */
.carr-garra__fita { height: calc((100 + var(--carr-garra-fita)) * 1svh + var(--garra-desloca, 0px)); }

.carr-garra__palco {
  position: sticky;
  top: calc(-1 * var(--garra-desloca, 0px));
  display: flex;
  flex-direction: column;
  height: calc(100svh + var(--garra-desloca, 0px));
  padding-top: 96px;
  outline: none;
}

.carr-garra__palco:focus-visible { box-shadow: inset 0 0 0 2px var(--light-48); }

.carr-garra__cabeca {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  width: min(1216px, calc(100% - 2 * var(--dark-pad)));
  margin: 0 auto 32px;
  flex: none;
}

.carr-garra__titulo {
  max-width: 560px;
  margin: 24px 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--h2);
  line-height: 1.24;
  /* duas linhas parelhas ("Nossos valores cabem / em cinco palavras."),
     não uma cheia e "palavras." órfã */
  text-wrap: balance;
  /* a lavada dos títulos em fundo escuro do site — a radial clara de
     fora do canto de cima à direita sobre Dark-02, recortada no texto —
     com os raios desta caixa (560 × 89, duas linhas): 1400 × 700 a
     (620, −60) deixa o canto mais longe, "palavras." embaixo à esquerda,
     com metade da lavada, que é o piso de 4,5:1 sobre Dark-01. A lavada
     dos aros esticada nesta caixa deixava "Nossos" a ~2:1. Nada de
     meia frase colorida. */
  background:
    radial-gradient(
      1400px 700px at 620px -60px,
      rgba(221, 231, 255, 1) 0%,
      rgba(221, 231, 255, 0) 100%
    ),
    linear-gradient(var(--dark-02), var(--dark-02));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.carr-garra__def {
  width: 448px;
  flex: none;
  margin: 0;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  color: var(--light-80);
}

/* A janela da pista preenche o que sobra entre o cabeçalho e a barra. */
.carr-garra__janela {
  flex: 1 1 auto;
  min-height: 0;
  overflow: clip;
}

.carr-garra__pista {
  --garra-aberto: 58%;
  --garra-tira: calc((100% - var(--garra-aberto)) / 4);
  display: flex;
  width: 100%;
  height: 100%;
}

.carr-garra__painel {
  position: relative;
  flex: 0 0 auto;
  /* a largura é a abertura, não um estado; 1px a mais fecha a emenda
     entre camadas de composição vizinhas (lição da home) */
  width: calc(var(--garra-tira) + 1px + var(--a, 0) * (var(--garra-aberto) - var(--garra-tira)));
  height: 100%;
  background: var(--dark-02);
  overflow: clip;
}

.carr-garra__painel + .carr-garra__painel { margin-left: -1px; }

/* A ENTRADA dos painéis: puxada pelo scroll (`--entra`, 0 → 1 ao longo
   de 70% de tela enquanto a seção chega), em cascata — cada painel
   começa 10% depois do anterior e sobe 48px enquanto acende. Sem JS ou
   com movimento reduzido, `--entra` é 1 (bloco lá embaixo). */
.carr-garra__painel:nth-child(2) { --k: 1; }
.carr-garra__painel:nth-child(3) { --k: 2; }
.carr-garra__painel:nth-child(4) { --k: 3; }
.carr-garra__painel:nth-child(5) { --k: 4; }

.carr-garra__painel {
  --e: clamp(0, calc((var(--entra, 0) - var(--k, 0) * 0.1) / 0.55), 1);
  opacity: var(--e);
  transform: translateY(calc((1 - var(--e)) * 48px));
}

.carr-garra__painel > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

.carr-garra__painel { --letra: min(150px, calc(var(--tira, 152px) * 0.74)); }

.carr-garra__placa {
  position: absolute;
  left: -1px;
  top: 0;
  bottom: 0;
  width: calc(100% + 2px);
  background: rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  /* cheia na tira, zero na borda: o desfoque desvanece, não corta */
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 var(--tira, 100%), transparent 100%);
  mask-image: linear-gradient(to right, #000 0, #000 var(--tira, 100%), transparent 100%);
  /* e apaga ao longo de 70% da abertura: aberto, a letra fica solta */
  opacity: clamp(0, calc(1 - var(--a, 0) / 0.7), 1);
  pointer-events: none;
}

@media (hover: hover) {
  .carr-garra__painel:not([data-aberto]):hover .carr-garra__placa { background: rgba(0, 0, 0, 0.2); }
}

.carr-garra__letra {
  position: absolute;
  left: 0;
  bottom: 24px;
  width: var(--tira, 100%);
  text-align: center;
  font-family: var(--font-label);
  font-weight: 300;
  font-size: var(--letra);
  line-height: 0.9;
  color: rgba(255, 255, 255, 0.5);
  pointer-events: none;
}

/* a cópia em overlay: mesmo glifo, mesma caixa, tingida pela foto */
.carr-garra__letra::before {
  content: attr(data-letra);
  position: absolute;
  inset: 0;
  color: #fff;
  mix-blend-mode: overlay;
}

/* ── O texto do princípio, DENTRO do painel aberto ─────────────────
   Sem barra e sem Prev · pontos · Next: cada painel carrega o seu
   texto, à direita da letra, no pé, e ele acende nos últimos 45% da
   abertura. A troca é sequencial por construção — a soma das aberturas
   é 1, então dois painéis a 0,5 estão AMBOS com o texto apagado. Um
   véu escuro sobe do pé junto com a abertura, para o texto ler sobre
   céu claro. O botão-alvo cobre o painel inteiro: é o clique (e o
   foco) — `h3`/`p` não podem viver dentro de um `<button>`. */
.carr-garra__veu {
  position: absolute;
  inset: auto -1px 0 -1px;
  height: 62%;
  background: linear-gradient(to top, rgba(12, 13, 16, 0.62), rgba(12, 13, 16, 0));
  opacity: var(--a, 0);
  pointer-events: none;
}

.carr-garra__copia {
  position: absolute;
  left: calc(var(--tira, 152px) + 16px);
  right: 32px;
  bottom: 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 520px;
  text-align: left;
  opacity: clamp(0, calc((var(--a, 0) - 0.55) / 0.45), 1);
  transform: translateY(calc((1 - var(--a, 0)) * 14px));
  pointer-events: none;
}

.carr-garra__tag {
  margin: 0;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  letter-spacing: var(--tag-track);
  text-transform: uppercase;
  color: var(--light-64);
}

.carr-garra__nome {
  margin: 0;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.24;
  color: var(--light-01);
}

.carr-garra__linha {
  margin: 0;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  color: var(--light-80);
}

.carr-garra__alvo {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.carr-garra__alvo:focus-visible { box-shadow: inset 0 0 0 2px var(--light-48); }
.carr-garra__painel[data-aberto] .carr-garra__alvo { cursor: default; }

/* ── O estreito: a pista vira COLUNA, como na home ───────────────
   A abertura vira `flex-grow` — a soma é 1, então quem está aberto
   recebe toda a sobra — e a placa deita. O cabeçalho (título + definição,
   ~240 de altura) não cabe no palco de um celular junto com cinco
   painéis e a barra: sobravam 297px para a pista a 375 × 812 e 225 a
   360 × 740. Então ele rola para fora antes de o palco prender
   (`--garra-desloca`), e a pista fica com ~540. */
@media (max-width: 900px) {
  .carr-garra__palco { padding-top: 80px; }

  /* empilhado, título → texto 24 (o padrão, DIRETRIZES § 3; era 16) */
  .carr-garra__cabeca {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 20px;
  }

  .carr-garra__def { width: 100%; }

  .carr-garra__janela { display: flex; flex-direction: column; }

  .carr-garra__pista {
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
  }

  .carr-garra__painel {
    width: 100%;
    height: auto;
    min-height: 0;
    flex-grow: var(--a, 0);
    flex-shrink: 0;
    flex-basis: 64px;
  }

  .carr-garra__painel + .carr-garra__painel { margin-left: 0; margin-top: -1px; }

  /* Deitada: a placa é uma faixa de 64 no ALTO de cada painel, a letra
     de 40 à esquerda, no meio da faixa. */
  .carr-garra__painel { --letra: 40px; }

  .carr-garra__placa {
    left: 0;
    top: -1px;
    width: 100%;
    /* deitada, a máscara cai para BAIXO: cheia na faixa de 64, zero na base */
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 64px, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0, #000 64px, transparent 100%);
  }

  .carr-garra__letra {
    left: var(--gutter);
    top: 14px;
    bottom: auto;
    width: auto;
    text-align: left;
  }

  /* o texto no pé do painel aberto, de calha a calha */
  .carr-garra__copia {
    left: var(--gutter);
    right: var(--gutter);
    bottom: 20px;
    max-width: none;
  }

  .carr-garra__veu { height: 75%; }
  .carr-garra__nome { font-size: 22px; }
  .carr-garra__linha { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce), (scripting: none) {
  /* Sem movimento: sem palco preso; a pista vira a coluna do estreito
     com os cinco painéis iguais, e as cinco cópias aparecem embaixo. */
  .carr-garra__fita { height: auto; }

  .carr-garra__palco {
    position: relative;
    height: auto;
    padding-bottom: 40px;
  }

  .carr-garra__janela { height: auto; }

  .carr-garra__pista {
    flex-direction: column;
    height: auto;
  }

  .carr-garra__painel {
    --entra: 1;
    width: 100%;
    height: 240px;
    flex: none;
  }

  .carr-garra__painel { --letra: 56px; }
  .carr-garra__placa { left: 0; width: 100%; opacity: 1; -webkit-mask-image: none; mask-image: none; }

  .carr-garra__letra {
    left: var(--dark-pad);
    bottom: 20px;
    width: auto;
    text-align: left;
  }

  .carr-garra__veu { opacity: 1; }

  .carr-garra__copia {
    left: calc(var(--dark-pad) + 96px);
    right: var(--dark-pad);
    bottom: 24px;
    opacity: 1;
    transform: none;
  }
}

/* ── "Aqui, entrega vira sociedade" · Figma 1226:19164 ────────────
   Seção branca de 60 em cima e embaixo, com 60 entre as duas partes:
   a linha do cabeçalho (rótulo na coluna de 384, parágrafo de 16 Light
   na de 800, calha 32) e a CAIXA de 1216 × 758 com raio 8 — um quadro
   do vídeo do herói (o time nas mesas, 5,83s), véu de 0 a 20% de preto
   de cima para baixo, padding 34, o título de 60 Light (−2,4 de
   tracking) no pé à esquerda e o convite ao livro no pé à direita, em
   duas linhas, com o glifo de 31 do site. */
.carr-soc {
  /* 120 em cima (pedido: mais respiro depois da Garra), 60 embaixo */
  padding: 120px 0 60px;
  background: #fff;
}

.carr-soc__inner {
  display: flex;
  flex-direction: column;
  gap: 60px;
  width: min(1216px, calc(100% - 2 * var(--gutter)));
  margin: 0 auto;
}

.carr-soc__cabeca {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 800px;
  column-gap: 32px;
  align-items: start;
}

.carr-soc__par {
  margin: 0;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  color: var(--dark-04);
}

.carr-soc__caixa {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 24px;
  height: 758px;
  padding: 34px;
  border-radius: var(--r-caixa);
  overflow: clip;
  isolation: isolate;
  background: var(--dark-02);
}

/* `z-index: -2`, uma camada ABAIXO dos véus (2026-09-27): foto e
   `::before` tinham os dois −1, e o pseudo-elemento vem antes da foto
   na árvore — a foto pintava por cima e o fade do pé NUNCA aparecia
   (captura com e sem o véu: idênticas, PSNR 68,6 dB). A caixa é
   `isolation: isolate`, então o −2 não vaza dela. */
.carr-soc__foto {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 42% 50%;
}

/* dois véus: o do Figma (0 → 20% de cima para baixo) e um FADE no pé,
   de 0 a 45% da altura, que segura o título e o convite quando a foto
   é clara ali — pedido do cliente */
.carr-soc__caixa::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(0, 0, 0, 0.6) 0, rgba(0, 0, 0, 0) 45%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
}

/* O Figma apara a caixa do texto na linha de base (`text-box-trim`),
   e é isso que põe o convite NA MESMA LINHA do título: os dois encostam
   no pé da caixa, e o pé do título é a base das letras, não o fundo do
   line-box. Onde não há `text-box`, a margem negativa faz o mesmo com
   as métricas medidas no Chrome (`measureText` a 60px: ascendente 60,
   descendente 15 — caixa da fonte de 75 contra 74,4 de line-box, meia-
   entrelinha ~0): o fundo do line-box fica 0,25em abaixo da base. */
.carr-soc__titulo {
  flex: 1 1 0;
  min-width: 0;
  margin: 0 0 -0.25em;
  font-weight: 300;
  font-size: clamp(32px, 4.167vw, 60px);
  line-height: 1.24;
  letter-spacing: -0.04em;
  color: var(--light-01);
  text-wrap: balance;
}

@supports (text-box-trim: trim-both) {
  .carr-soc__titulo {
    margin-bottom: 0;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
  }
}

/* o `.cta-seta` do site traz `align-self: flex-start` (para não esticar
   na Visão); aqui ele mora no pé da caixa */
.carr-soc__cta { flex: none; align-self: flex-end; }
.carr-soc__cta .cta-seta__txt { line-height: 1.2; }

@media (max-width: 1256px) {
  .carr-soc__caixa { height: clamp(420px, 60vw, 758px); }
}

@media (max-width: 900px) {
  .carr-soc__cabeca {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 16px;
  }

  .carr-soc__caixa {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 24px;
    height: clamp(420px, 125vw, 560px);
    padding: 24px var(--gutter);
  }

  .carr-soc__titulo { flex: none; }
  .carr-soc__cta { align-self: flex-start; }
  /* a foto do encontro do time (2026-09-27): no recorte em pé, 52%
     centra o telão e quem fala (eram 36%, para a foto anterior) */
  .carr-soc__foto { object-position: 52% 50%; }
}

/* ── BENEFÍCIOS · a grade de seis cards ─────────────────────────
   Três em cima, três embaixo, no card dos itens dos caminhos: Light-01,
   raio 8, padding 12, ícone de 32 no alto (chapa branca, traço no
   degradê da marca — os mesmos dos caminhos) e o texto no pé. Funcional,
   não embelezado. */
.carr-ben {
  padding: 96px 0 120px;
  background: #fff;
}

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

.carr-ben__cabeca { margin-bottom: 48px; }

.carr-ben__titulo {
  margin: 24px 0 0;
  font-weight: 400;
  font-size: var(--h2);
  line-height: 1.24;
  color: var(--dark-01);
}

.carr-ben__grade {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.carr-ben__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  min-height: 180px;
  padding: 12px;
  border-radius: var(--r-caixa);
  background: var(--light-01);
}

.carr-ben__card > img {
  display: block;
  width: 32px;
  height: 32px;
}

.carr-ben__texto {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.carr-ben__texto h3 {
  margin: 0;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.3;
  color: var(--dark-01);
}

.carr-ben__texto p {
  margin: 0;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
  color: var(--dark-04);
}

@media (max-width: 900px) {
  .carr-ben { padding: 64px 0 80px; }
  .carr-ben__cabeca { margin-bottom: 32px; }
  .carr-ben__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* A etiqueta a 12 do título no celular, como em todo cabeçalho
   (2026-09-27, DIRETRIZES § 3). */
@media (max-width: 860px) {
  .carr-ben__titulo,
  .carr-garra__titulo { margin-top: 12px; }
  /* o texto do cabeçalho no corpo de celular (era 16) */
  .carr-garra__def { font-size: var(--p-mobile); }
}

@media (max-width: 600px) {
  .carr-ben__grade { grid-template-columns: minmax(0, 1fr); }
  .carr-ben__card { min-height: 0; gap: 20px; padding: 16px; }
}

/* ── VAGAS · o trilho dos Cases, INFINITO ────────────────────────
   O formato de lista mais forte do site: a `.dark-section` com o
   cabeçalho (rótulo + título à esquerda, `rail-nav` à direita) e o
   `.rail` de cards — snap, setas, arrasto e a mira "Ver vagas" no
   cursor. O trilho não é o `initRails` (que, no fim, desliga o Next e o
   autoplay dele VOLTA AO COMEÇO num salto): é o `trilhoInfinito` do
   `carreiras.js`, com um conjunto de clones em cada ponta e o
   reposicionamento invisível quando a rolagem assenta num clone. Sem fotografia, de propósito (cadência): cada
   área é um card de 384 × 300 em Dark-02 com uma LUZ radial na cor da
   marca (azul, roxo, âmbar, a rodar), o número no alto, o nome e uma
   linha no pé e a seta dos cases. Todos abrem a página de vagas. */
/* TRÊS cards fecham a coluna: largura = (coluna − 2 calhas) ÷ 3, com a
   coluna medida pelo JS (`--vaga-l`, largura útil do trilho sem os
   paddings) — a 1440 dá 394,67, e o terceiro card termina em x = 1328,
   a borda direita das setas. Sem JS, a mesma conta em `vw` (o
   `--dark-pad` do site reescrito, a menos da barra de rolagem). */
.carr-vaga {
  width: var(--vaga-l, calc((min(1216px, 100vw - 2 * clamp(20px, 7.778vw, 112px)) - 32px) / 3));
  aspect-ratio: 384 / 300;
  background: var(--dark-02);
}

.carr-vaga__luz {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 95% at 100% 0%, color-mix(in srgb, var(--cor, var(--blue)) 34%, transparent), transparent 62%);
  opacity: 0.8;
  transition: opacity 0.4s var(--ease-out-soft), transform 0.6s var(--ease-out-expo);
  transform-origin: 100% 0;
}

a.carr-vaga:hover .carr-vaga__luz,
a.carr-vaga:focus-visible .carr-vaga__luz {
  opacity: 1;
  transform: scale(1.12);
}

.carr-vaga__num {
  position: absolute;
  top: 24px;
  left: 24px;
  margin: 0;
  font-family: var(--font-label);
  font-weight: 300;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.12em;
  color: var(--light-48);
}

.carr-vaga__pe { align-items: flex-end; }

.carr-vaga__texto {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

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

.carr-vaga__linha {
  margin: 0;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
  color: var(--light-64);
  text-wrap: pretty;
}

.carr-vagas__titulo { max-width: 560px; }

/* O pé do trilho: a linha de apoio à esquerda, em DUAS linhas, e a CTA
   "Ver todas as vagas" à direita, `space-between` — a seção precisa da
   chamada, o trilho sozinho não é. */
.carr-vagas__pe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 0 var(--dark-pad);
}

.carr-vagas__apoio {
  max-width: 360px;
  margin: 0;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
  color: var(--light-64);
}

.carr-vagas__apoio a {
  color: var(--light-01);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--light-48);
}

.carr-vagas__apoio a:hover { text-decoration-color: var(--light-01); }

@media (max-width: 900px) {
  .carr-vaga { width: 82vw; aspect-ratio: 384 / 320; }
  .carr-vaga__area { font-size: 22px; }

  .carr-vagas__pe {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
}

/* ── O fecho · o livro da cultura ────────────────────────────────
   A `.foto-cta` do `componentes.css` (2026-09-27: "essa sessão de CTA
   não está seguindo o mesmo padrão das demais… o conteúdo está de
   largura total… o ícone está diferente"). Era uma cópia desta página
   com o recuo da home (`--dark-pad`, 112 fixos) e o símbolo das três
   elipses no selo: a 1796 o bloco ficava a 112 da borda e o resto da
   página a 290. Agora o recuo, o véu, o selo e as medidas são os do
   componente; daqui só o que é desta página — o `sticky` (o rodapé sobe
   por cima, como nos cases), o enquadramento da foto e a nota. */
.carr-fecho {
  position: sticky;
  top: 0;
  z-index: 0;
}

.carr-fecho__foto img { object-position: 50% 45%; }

.carr-fecho__nota {
  margin: 0;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
  color: var(--light-64);
}

/* O botão do livro ainda não tem arquivo, e ele diz isso do mesmo jeito
   que o convite do vídeo. Sem `href` o `<a>` não entra na tabulação. */
.cta-seta[aria-disabled='true'] {
  cursor: default;
  opacity: 0.72;
}

/* ── Tablet: o mesmo colapso da Visão ────────────────────────────
   Lead e colunas empilham, as molduras viram fluidas. */
@media (max-width: 1100px) {
  .carr-top,
  .carr-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
  }

  .carr-lead,
  .carr-cols,
  .carr-aside,
  .carr-shot { width: 100%; }

  .carr-shot {
    height: auto;
    aspect-ratio: 751 / 396;
  }

  .carr-garra {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .carr-garra__def { width: auto; max-width: 560px; }

  /* Três cards de texto em 315 ainda leem; seis benefícios em três
     colunas não — o nome quebra em três linhas. Dois por linha. */
  .carr-grade--beneficios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Estreito ────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Numa coluna de 335 a primeira frase quebra de qualquer jeito, e a
     segunda em linha própria custava uma linha a mais: 4 a 375 e 5 a
     320, medido. Aqui a frase corre em linha — o `em` continua marcando
     a segunda pela cor — e `balance` reparte as linhas em pesos
     parecidos, em vez de deixar "chamado." sozinho. */
  .carr-hero .hero__headline { text-wrap: balance; }
  .carr-hero .hero__headline em { display: inline; }

  /* 80 de respiro, como a § 4.6 no celular. */
  .carr-sec { padding: 80px 0; }

  .carr-par {
    flex-direction: column;
    gap: 16px;
  }

  .carr-cols { gap: 24px; }
  .carr-partida__texto { gap: 32px; }
  .carr-frase { font-size: 20px; }

  .carr-grade {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 40px;
  }

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

  .carr-card { padding: 20px; }

  .carr-bottom { margin-top: 40px; }



  .carr-principio {
    min-height: 0;
    padding: 20px;
  }

  .carr-principio__letra { font-size: 48px; }
}



/* O rodapé com a altura do conteúdo nasceu aqui ("o rodapé n precisa
   ter altura total da tela, pode deixar ele pra ajustar a altura do
   conteudo") e em 2026-09-17 virou o padrão do site, no `site.css`.
   Nada de rodapé é desta página. */

/* ── O ritmo vertical do celular: UM número ─────────────────────────
   "pode deixar o espaço acima da seção com até 60px e temos q
   padronizar isso". Cada seção de conteúdo tinha o seu no estreito (48,
   64, 88 da `.dark-section`, 120 na sociedade, que não tinha regra de
   celular). Agora todas as seções de fluxo usam `--carr-ritmo-y` em
   cima e embaixo, e o vão entre um parágrafo e a imagem que ele abre é
   `--carr-ritmo-bloco`. Ficam de fora os palcos presos (aros, cena,
   Garra — a altura deles é a tela) e o CTA fotográfico do fecho, que
   segue o padrão do site. Mora no FIM do arquivo para vencer as regras
   de cada seção sem `!important`. */
@media (max-width: 900px) {
  :root {
    --carr-ritmo-y: 60px;
    --carr-ritmo-bloco: 40px;
  }

  .carr-entra,
  .carr-soc,
  .carr-ben { padding-block: var(--carr-ritmo-y); }

  .carr-vagas .dark-section__inner { padding-block: var(--carr-ritmo-y); }

  .carr-soc__inner { gap: var(--carr-ritmo-bloco); }
}