/* ============================================================
   VagasTrans — a tela "Sobre". Carregada só aqui.

   É o cartão de visitas do projeto: quem chega por ela costuma ser
   parceiro institucional, imprensa ou alguém decidindo se confia na
   plataforma antes de entregar dados a ela. A tela precisa **demonstrar**
   o cuidado de que fala, e não só descrevê-lo — daí o movimento vir todo
   de CSS scroll-driven, sem um único request a terceiros e sem depender
   de JavaScript para o conteúdo aparecer.

   Regra que atravessa o arquivo inteiro: **o padrão é o conteúdo pronto e
   visível**. Toda animação está dentro de `@supports (animation-timeline:
   ...)` e de `prefers-reduced-motion: no-preference`. Num navegador antigo,
   ou para quem pediu menos movimento, a página é a mesma — parada.

   A barra de progresso (`.progresso-rolagem`) e `.revela` vêm de `base.css`.
   ============================================================ */

/* ── 1. abertura ─────────────────────────────────────────────────────── */

.abertura {
  position: relative;
  min-height: min(92vh, 780px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background: var(--violeta-noite);
  color: #fff;
  padding-block: var(--space-16);
  isolation: isolate;
}

.abertura-fundo {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  z-index: -2;
}

/* Zoom lento e contínuo: o movimento que uma abertura institucional pede,
   sem baixar um vídeo para consegui-lo. Cai sob `reduced-motion`. */
@media (prefers-reduced-motion: no-preference) {
  .abertura-fundo-anima { animation: respirar 26s ease-in-out infinite alternate; }
}
@keyframes respirar {
  from { transform: scale(1); }
  to   { transform: scale(1.09) translateY(-1.5%); }
}

/* O véu não é estética: é o que garante contraste AA do texto branco em
   qualquer ponto da imagem, inclusive na faixa clara do arco. */
.abertura::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to right, rgba(28,10,42,.92) 0%, rgba(28,10,42,.74) 46%, rgba(28,10,42,.42) 100%),
    linear-gradient(to top, rgba(28,10,42,.86) 0%, transparent 45%);
}

.abertura-conteudo { position: relative; z-index: 1; }

/* ── seletor de idioma nesta tela ─────────────────────────────────────
   A aparência do seletor mora em `base.css`, porque ele aparece no rodapé de
   toda tela traduzida. O que fica aqui é só a **posição** nesta abertura:
   um canto que a arte já deixava vazio, sobre a imagem.

   `position: absolute` e não `fixed`: acompanhando a rolagem, ele sairia da
   tela junto com a abertura — que é o certo. Um seletor de idioma preso na
   tela durante uma tese de nove seções vira ruído permanente. */
.abertura .idiomas {
  position: absolute;
  inset-block-start: var(--space-6);
  inset-inline-end: var(--space-6);
  z-index: 2;
  text-align: end;
}
/* Sobre a imagem escura da abertura, o seletor é claro. No rodapé das outras
   telas o fundo é claro, e as cores vêm de `base.css`. */
.abertura .idiomas ul {
  background: rgba(14,4,24,.52);
  border-color: rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.abertura .idioma { color: rgba(255,255,255,.78); }
.abertura .idioma:hover,
.abertura .idioma:focus-visible { background: rgba(255,255,255,.14); color: #fff; }
.abertura .idioma-ativo { background: rgba(255,255,255,.92); color: var(--violeta-noite); }
.abertura .idioma-ativo:hover { background: #fff; color: var(--violeta-noite); }
.abertura .idiomas-aviso {
  color: rgba(255,255,255,.72);
  text-shadow: 0 1px 3px rgba(10,3,18,.7);
}

/* No celular o seletor passa a ser uma linha própria acima do conteúdo, e
   não um canto flutuante: sobre 390px de largura ele encostaria no olho da
   abertura, e a ressalva ocuparia meia tela. */
@media (max-width: 640px) {
  .abertura .idiomas {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-inline: var(--space-5);
    margin-block-end: var(--space-6);
    text-align: start;
  }
}

.abertura-olho {
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .8125rem;
  font-weight: 700;
  color: rgba(255,255,255,.68);
  margin-bottom: var(--space-5);
}

.abertura h1 {
  font-size: clamp(2.25rem, 6.4vw, 4.5rem);
  line-height: 1.06;
  letter-spacing: -.02em;
  margin-bottom: var(--space-6);
  /* As quebras são feitas por `<br>` no HTML: a frase é construída em três
     tempos e cada linha é uma delas. Um `max-width` em `ch` cortava
     "Oportunidades existem." no meio e desmanchava o ritmo. */
  max-width: none;
}

/* As três linhas entram uma a uma. É a única animação de entrada por tempo
   da página: a abertura não tem rolagem para servir de gatilho, e a frase
   é construída em três tempos justamente para ser lida assim. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .abertura h1 { animation: subir .9s cubic-bezier(.2,.7,.3,1) both; }
    .abertura-olho { animation: subir .7s cubic-bezier(.2,.7,.3,1) both; }
    .abertura-lead { animation: subir .9s .18s cubic-bezier(.2,.7,.3,1) both; }
  }
}
@keyframes subir {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.gradiente-texto { color: #F5A9B8; }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .gradiente-texto {
    background: var(--espectro);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.abertura-lead {
  font-size: clamp(1.0625rem, 1.7vw, 1.3125rem);
  line-height: 1.55;
  color: rgba(255,255,255,.88);
  max-width: 54ch;
  margin-bottom: 0;
}

/* Convite a rolar. Some assim que a página sai do topo — um indicador que
   continua pedindo rolagem depois de ela ter começado vira ruído. */
.abertura-role {
  position: absolute;
  inset-block-end: var(--space-8);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
.abertura-seta {
  inline-size: .55rem;
  block-size: .55rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
@media (prefers-reduced-motion: no-preference) {
  .abertura-seta { animation: descer 1.8s ease-in-out infinite; }
}
@keyframes descer {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: .5; }
  50%      { transform: rotate(45deg) translate(3px, 3px); opacity: 1; }
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .abertura-role {
      animation: sumir linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 12vh;
    }
  }
}
@keyframes sumir { to { opacity: 0; visibility: hidden; } }

/* ── 2. faixa de assinatura ──────────────────────────────────────────── */

.faixa-assinatura {
  background: var(--brand-violet-deep);
  color: rgba(255,255,255,.82);
  padding-block: var(--space-4);
  font-size: .9375rem;
  text-align: center;
}
/* `text-align: center` na faixa não bastava: `base.css` dá `max-width` a todo
   `p`, e sem `margin-inline: auto` o bloco fica encostado à esquerda — o texto
   sai centrado *dentro de uma caixa descentrada*, que é pior que alinhado à
   esquerda. A medida continua limitada de propósito: a linha inteira, numa
   faixa larga, seria longa demais para ler de um fôlego. */
.faixa-assinatura p { margin: 0 auto; max-width: 68ch; }
.faixa-assinatura strong { color: #fff; font-weight: 700; }

/* ── seções ──────────────────────────────────────────────────────────── */

.secao { padding-block: var(--space-16); }
.secao h2 {
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -.015em;
  margin-bottom: var(--space-5);
  text-wrap: balance;
}
.lead-secao {
  font-size: clamp(1rem, 1.5vw, 1.1875rem);
  color: var(--muted);
  max-width: 64ch;
  margin-bottom: var(--space-8);
}

/* ── 3. a tese, em voo ──────────────────────────────────────────────────

   A seção é um **trilho**: sua altura é a soma das rolagens de cada cena, e o
   palco fica preso (`sticky`) enquanto ela passa. A rolagem não dispara uma
   animação — ela é a linha do tempo do clipe. Quem rola para cima vê o voo de
   trás para frente, e isso é de graça.

   Duas alturas diferentes convivem aqui, e é de propósito:

   - **Sem JavaScript** (ou antes de ele rodar) o palco é um bloco comum, com
     uma fotografia ao fundo e os quatro textos empilhados por cima. É o que o
     servidor entrega, e já é uma seção legível e bonita.
   - **Com `voo.js`** a seção ganha `.voo-ativo`, o palco vira `sticky` de uma
     tela de altura, os textos passam a ocupar todos a mesma célula da grade e
     o script decide a opacidade de cada um pela posição da página.

   Nenhuma opacidade abaixo de 1 é escrita neste arquivo. Todas nascem do
   script, e portanto só existem depois de ele ter assumido a seção — não há
   como um pedaço ficar invisível por falta de suporte a alguma coisa. */

.secao-tese {
  position: relative;
  /* Sem `overflow: hidden`: ele transformaria a seção em contêiner de rolagem
     e o palco `sticky` deixaria de grudar. O corte fica no próprio palco. */
  padding-block: 0;
  background: #150520;
  color: #fff;
}

.voo-palco {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.voo-cena {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.voo-quadro,
.voo-video {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}
/* A fotografia continua sob o vídeo até um quadro de verdade ter pintado. No
   iOS um vídeo mudo que só recebeu `currentTime` fica preto até tocar uma vez;
   trocar na hora em que os metadados chegam mostraria uma cena vazia. A
   opacidade inicial do vídeo é escrita pelo script, não aqui: o elemento nem
   existe antes dele. */
.voo-video { transition: opacity .25s linear; }

/* O véu é contraste, não estética: a faixa do horizonte é pêssego claro, e o
   texto branco sobre ela não passaria em AA. */
/* z-index 30 e 40 (véu e textos) contra 10–20 das cenas: o script escreve o
   `z-index` de cada cena para decidir qual fica por cima na dissolvência, e
   com o véu em 1 a cena passava por cima do texto e o apagava da tela. */
.voo-veu {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  /* Quem garante a leitura agora é a caixa atrás do texto, não o véu — então
     ele deixou de ser uma elipse escura no meio do palco e virou só o
     assentamento das bordas: um pouco de escuro em cima e embaixo, para o
     palco emendar na cor da seção, e quase nada no miolo. Antes da caixa, o
     véu precisava escurecer justamente onde a cena tem o que mostrar, e as
     tiras de ciano e rosa do arco saíam lavadas. */
  background:
    linear-gradient(to bottom, rgba(12,3,20,.36) 0%, rgba(12,3,20,.06) 26%, rgba(12,3,20,.06) 70%, rgba(12,3,20,.48) 100%);
}

/* Sem o script o palco é alto (as quatro falas empilhadas sobre uma fotografia
   só) e a caixa de cada fala é uma ilha clara num campo grande. Aqui o véu
   volta a ser um escurecimento parelho, que é o que um bloco de texto
   comprido sobre imagem pede. */
.secao-tese:not(.voo-ativo) .voo-veu { background: rgba(12,3,20,.5); }

.voo-textos {
  position: relative;
  z-index: 40;
  padding-block: var(--space-16);
  padding-inline: var(--space-5);
  display: grid;
  gap: var(--space-12);
}

/* A fala vive dentro de uma caixa semitransparente, e não solta sobre a cena.
   Sombra de texto resolve contraste pontual; sobre um mundo de papel que muda
   de cor a cada quadro — creme, pêssego, ciano — ela vira contorno sujo e a
   leitura continua difícil. A caixa dá um fundo **previsível** ao texto sem
   apagar a cena em volta, que é o que o véu escuro fazia.

   O desfoque é progressivo (`@supports`): sem ele a caixa é mais opaca, e a
   leitura não depende de o navegador ter `backdrop-filter`.

   A opacidade não é gosto, é conta feita contra o **pior fundo do voo** — o
   papel creme quase branco do arco, na última cena. Com 56% de opacidade o
   título rosa sobre a caixa dá 2,5:1, que reprova até no limite de texto
   grande (3:1); com 70% dá 4,2:1 e o texto branco, 7,8:1. Ao clarear a caixa,
   refaça a conta sobre o creme, não sobre o violeta da primeira cena. */
.voo-texto {
  max-inline-size: 38rem;
  margin-inline: auto;
  padding: var(--space-8) var(--space-8) calc(var(--space-8) + 2px);
  border-radius: var(--radius-lg);
  background: rgba(14,4,24,.8);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 24px 64px rgba(6,1,12,.42);
  text-align: center;
  text-shadow: 0 1px 2px rgba(10,3,18,.5);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .voo-texto {
    background: rgba(14,4,24,.7);
    -webkit-backdrop-filter: blur(14px) saturate(115%);
    backdrop-filter: blur(14px) saturate(115%);
  }
}

/* O rótulo é o **título** da cena, não um olho: quatro palavras que se leem de
   longe enquanto a câmera anda. Era uma linha de .75rem em versalete, e num
   palco de tela inteira ele desaparecia — quem rolava via a fala e não via de
   que capítulo ela era. Em `h2` porque é isso que ele é; a seção não tinha
   cabeçalho nenhum antes, e as quatro falas agora dão estrutura a quem navega
   por títulos. */
/* Seletor com a seção junto (0,2,0) e não `.voo-rotulo` sozinho (0,1,0): a
   regra genérica `.secao h2` é (0,1,1) e vence a classe, prendendo o título
   nos 2,75rem das outras seções — o que faz a classe parecer não ter efeito
   nenhum, e não "ter efeito menor". Não é empate resolvido por ordem: aqui a
   genérica ganha esteja onde estiver no arquivo. */
/* O tamanho caiu junto com a caixa, e as duas mudanças são a mesma decisão: o
   título gigante existia para se impor **sobre a cena**, e agora ele se impõe
   dentro de um bloco com fundo próprio. Grande demais, ele empurrava a fala
   para fora da caixa e a leitura piorava justamente onde se queria melhorar. */
.secao-tese .voo-rotulo {
  font-size: clamp(1.875rem, 5vw, 3.5rem);
  line-height: 1;
  letter-spacing: -.02em;
  font-weight: 800;
  text-transform: none;
  color: #F5A9B8;
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
.voo-frase {
  font-size: clamp(1.0625rem, 1.6vw, 1.375rem);
  line-height: 1.5;
  margin: 0;
  color: rgba(255,255,255,.96);
}
.voo-frase strong { color: #F5A9B8; font-weight: 700; }

/* O remate é a chegada: entra maior que as outras falas. */
.voo-texto-remate .voo-frase {
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  line-height: 1.35;
  text-wrap: balance;
}

/* A entrada é escrita pelo script (translate/scale/rotate com folga no fim do
   percurso). Aqui só se declara o ponto de origem da transformação — girar em
   torno do centro faria o título pivotar no ar; ele pivota apoiado embaixo,
   como uma peça de papel sendo assentada. */
.voo-rotulo,
.voo-frase { transform-origin: 50% 100%; will-change: transform; }

/* ── o que muda quando o script assume ── */

.voo-ativo .voo-palco {
  position: sticky;
  inset-block-start: 0;
  /* `svh` e não `vh`: no celular, `vh` é a tela **sem** a barra de endereço, e
     o palco ficaria maior que o visível no primeiro instante. */
  block-size: 100svh;
}
.voo-ativo .voo-textos {
  position: absolute;
  inset: 0;
  padding-block: 0;
  place-content: center;
}
/* Todos os textos na mesma célula: quem aparece é decidido pela rolagem. */
.voo-ativo .voo-texto { grid-area: 1 / 1; }

/* No celular a caixa fica mais apertada e **sem desfoque**: desfocar o fundo
   de uma caixa que está por cima de um vídeo sendo percorrido quadro a quadro
   obriga o telefone a refazer o borrão a cada busca, e é o aparelho mais
   fraco que paga. Em troca ela fica mais opaca, que dá a mesma leitura por um
   preço que já estava pago. */
@media (max-width: 860px) {
  .voo-texto {
    padding: var(--space-6) var(--space-5);
    background: rgba(14,4,24,.78);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ── 4. números ──────────────────────────────────────────────────────── */

.secao-numeros {
  background: var(--brand-violet-soft);
  border-block: 1px solid var(--line);
}
.numeros-rotulo {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .75rem;
  font-weight: 700;
  color: var(--brand-violet-deep);
  text-align: center;
  margin-bottom: var(--space-8);
}
.numeros {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-8);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  text-align: center;
}

/* O número sobe de zero quando entra na tela.

   `@property` é o que permite interpolar uma variável como inteiro; sem
   ele, `--n` fica no valor declarado na regra base — que já é o valor
   final. É por isso que o keyframe declara só o `from`: o `to` é o estado
   normal, e assim quem não tem suporte vê o número certo, parado. */
@property --n {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}

.numero {
  /* `--alvo` vem do `style` do elemento, e é o único token desta folha que
     não nasce no CSS. O fallback existe para que a regra continue válida se
     ele faltar — token indefinido não degrada, invalida a declaração
     inteira. */
  --n: var(--alvo, 0);
  counter-reset: n var(--n);
  display: block;
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--brand-violet-deep);
}
.numero::after { content: counter(n); }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .numero {
      animation: contar linear both;
      animation-timeline: view();
      animation-range: entry 20% cover 45%;
    }
  }
}
@keyframes contar { from { --n: 0; } }

.numero-rotulo {
  display: block;
  margin-top: var(--space-3);
  color: var(--muted);
  font-size: .9375rem;
  max-width: 18ch;
  margin-inline: auto;
}

/* ── 5. para quem ────────────────────────────────────────────────────── */

.duas-colunas {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}
@media (min-width: 900px) {
  .duas-colunas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-16); }
}

.coluna-figura img {
  inline-size: 100%;
  block-size: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
}

/* Deslocamento suave na rolagem: a figura anda um pouco menos que o texto.
   Amplitude curta de propósito — parallax exagerado numa página
   institucional cansa antes de impressionar. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .coluna-figura img {
      animation: flutuar linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }
}
@keyframes flutuar {
  from { transform: translateY(26px); }
  to   { transform: translateY(-26px); }
}

.nota-secao {
  margin-top: var(--space-6);
  padding-inline-start: var(--space-5);
  border-inline-start: 3px solid var(--accent-sky);
  color: var(--muted);
  font-size: .9375rem;
  margin-bottom: 0;
}

/* ── 6. quem idealizou ───────────────────────────────────────────────── */

/* Fica entre "Para quem" e "Como funciona", e as duas usam o fundo comum —
   sem a troca de superfície a seção não se destacaria como uma pausa na
   argumentação, que é o que ela é: a página para de falar do sistema e fala
   de uma pessoa. */
.secao-idealizador {
  background: var(--surface);
  border-block: 1px solid var(--line);
}

.idealizador-grade {
  display: grid;
  gap: var(--space-8);
  align-items: start;
}
@media (min-width: 900px) {
  /* Retrato mais estreito que o texto: é uma pessoa, não uma paisagem, e em
     colunas iguais o rosto ficaria maior que o argumento. */
  .idealizador-grade { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: var(--space-16); }
  /* Sem retrato a seção é uma coluna só, e ela vai centrada: encostada à
     esquerda com meia tela vazia à direita, pareceria layout quebrado. */
  .idealizador-so-texto { grid-template-columns: minmax(0, 62ch); justify-content: center; }
}

.idealizador-retrato { margin: 0; }
/* Caixa 3:5, e não o quadrado-e-meio de sempre. A foto é um retrato de corpo
   inteiro, e num 4:5 os pés saíam cortados no meio do sapato — cortar uma
   composição dessas para caber num formato de crachá joga fora o que o
   fotógrafo enquadrou. A proporção fica **declarada** em vez de deixada à
   imagem: assim o espaço é reservado antes de o arquivo chegar e a seção não
   pula quando ele pinta. Foto de outra proporção é cortada para caber aqui,
   o que é o comportamento certo para uma página que não pode depender de
   quem envia acertar o formato. */
.idealizador-retrato img {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 3 / 5;
  object-fit: cover;
  object-position: 50% 30%;   /* viés para cima: o rosto nunca fica no centro geométrico */
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  display: block;
}

/* No celular o retrato inteiro tomaria uma tela antes do texto começar. */
@media (max-width: 899px) {
  .idealizador-retrato { max-inline-size: 16rem; }
}

.idealizador-olho {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.6vw, 1.1875rem);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand-violet);
  font-weight: 700;
  margin-bottom: var(--space-4);
}

/* O nome do idealizador, e não o título, é o que a pessoa deve levar desta
   seção — daí o corpo maior e o degradê da marca.

   `--espectro-ink`, e **não** `.gradiente-texto`: aquela classe usa o
   `--espectro`, que é para fundo escuro, e cai para um rosa claro quando o
   navegador não recorta o fundo no texto. Sobre esta superfície branca o
   nome sairia com 1,8:1, ou seja, ilegível — e justamente para quem tem o
   navegador mais antigo. A cor declarada antes do `@supports` é a que vale
   nesse caso, e ela é sólida de propósito. */
.idealizador-nome {
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 2.9vw, 2.125rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--brand-violet-deep);
  margin-block: var(--space-5) var(--space-2);
  /* Sem isto, a caixa do degradê é a linha inteira e o recorte estica as
     cores por toda a largura da coluna: o nome sai quase todo azul, com o
     rosa caindo no espaço vazio à direita. */
  inline-size: fit-content;
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .idealizador-nome {
    background: var(--espectro-ink);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
/* `.secao h2` é (0,1,1) e venceria `.idealizador-texto h2` se este fosse só a
   classe — o seletor vem qualificado com a seção pelo mesmo motivo do
   `.secao-tese .voo-rotulo`. */
/* `text-wrap: balance` porque a coluna é estreita e o título tem cinco
   palavras: sem ele o navegador quebra depois de "quem" e deixa uma
   primeira linha curta com uma segunda longa. */
.secao-idealizador .idealizador-texto h2 { margin-bottom: 0; text-wrap: balance; }
.idealizador-texto p { max-inline-size: 62ch; }
.idealizador-texto p + p { margin-top: var(--space-4); }

/* ── 7. a jornada ────────────────────────────────────────────────────── */

.secao-jornada { background: var(--bg); padding-bottom: var(--space-8); }

.etapa { margin-bottom: var(--space-16); }

.etapa-grade {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}
@media (min-width: 900px) {
  .etapa-grade {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-16);
  }
  /* A figura fica presa enquanto o texto da etapa passa. É a construção
     que melhor serve a uma sequência: o assunto muda, e a imagem fica
     onde o olho já está. Só em tela larga — no celular, `sticky` numa
     coluna estreita prende a imagem sobre o próprio texto. */
  .etapa-visual { position: sticky; top: var(--space-12); }
  .etapa-texto { padding-block: var(--space-8); }
}

.etapa-visual { position: relative; }
.etapa-visual img {
  inline-size: 100%;
  block-size: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  display: block;
}

.etapa-numero {
  position: absolute;
  inset-block-start: calc(var(--space-5) * -1);
  inset-inline-start: calc(var(--space-4) * -1);
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 5rem);
  font-weight: 700;
  line-height: 1;
  color: var(--surface);
  text-shadow: 0 2px 12px rgba(69,24,95,.35);
}

.etapa-texto h3 {
  font-size: clamp(1.375rem, 2.6vw, 1.875rem);
  line-height: 1.2;
  margin-bottom: var(--space-4);
  text-wrap: balance;
}
.etapa-texto p {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--muted);
  margin-bottom: var(--space-4);
}
.etapa-texto p:last-child { margin-bottom: 0; }

/* ── 8. o que a plataforma não faz ───────────────────────────────────── */

.secao-limites {
  background: var(--violeta-noite);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.secao-limites::before {
  content: "";
  position: absolute;
  inset: -40% -20% auto;
  block-size: 120%;
  background: linear-gradient(120deg,
    rgba(91,206,250,.14), rgba(168,85,201,.12), rgba(245,169,184,.14));
  filter: blur(80px);
  z-index: 0;
}
.secao-limites .container { position: relative; z-index: 1; }
.secao-limites .lead-secao { color: rgba(255,255,255,.78); }

.limites {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-6);
}
@media (min-width: 780px) {
  .limites { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
}

.limite {
  position: relative;
  padding-top: var(--space-5);
}

/* O filete em espectro cresce da esquerda quando o item entra: é o gesto
   de "riscar" o que a plataforma não faz, feito com a cor da marca em vez
   de um traço vermelho de proibição — a mensagem aqui é de compromisso,
   não de alerta. */
.limite-risco {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  block-size: 3px;
  inline-size: 100%;
  background: var(--espectro);
  transform-origin: 0 50%;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .limite-risco {
      transform: scaleX(0);
      animation: riscar linear both;
      animation-timeline: view();
      animation-range: entry 20% cover 40%;
    }
  }
}
@keyframes riscar { to { transform: scaleX(1); } }

.limite h3 {
  font-size: 1.125rem;
  line-height: 1.35;
  margin-bottom: var(--space-3);
  text-wrap: balance;
}
.limite p {
  margin: 0;
  color: rgba(255,255,255,.76);
  font-size: .9375rem;
  line-height: 1.6;
}
.limite strong { color: #fff; }

/* ── 9. governança ───────────────────────────────────────────────────── */

.secao-governanca { background: var(--surface); }

.cartoes-governanca {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  margin-bottom: var(--space-8);
}
.cartao-gov {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.cartao-gov h3 {
  font-size: 1.125rem;
  margin-bottom: var(--space-3);
}
.cartao-gov p {
  margin: 0;
  color: var(--muted);
  font-size: .9375rem;
  line-height: 1.6;
}

.carta-belem {
  border-inline-start: 3px solid transparent;
  border-image: var(--espectro) 1;
  padding-inline-start: var(--space-5);
  font-size: 1.0625rem;
  line-height: 1.6;
  max-width: 62ch;
  margin-bottom: var(--space-8);
}

.links-transparencia {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
}
.links-transparencia a {
  font-size: .9375rem;
  font-weight: 700;
  color: var(--brand-violet);
}

/* ── 10. duas portas ──────────────────────────────────────────────────── */

.secao-portas {
  background: var(--violeta-noite);
  color: #fff;
}

.portas {
  display: grid;
  gap: var(--space-6);
}
@media (min-width: 860px) {
  .portas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
}

.porta {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}
.porta h2 {
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  margin: 0;
}
.porta p {
  margin: 0;
  color: rgba(255,255,255,.8);
  line-height: 1.6;
  flex: 1;
}
.porta .btn { margin-top: var(--space-2); }

.porta-secundario {
  color: rgba(255,255,255,.82);
  font-size: .9375rem;
  font-weight: 700;
  text-decoration: none;
}
.porta-secundario:hover { color: #fff; text-decoration: underline; }

/* `.btn-claro` e `.btn-contorno` vêm de `base.css`. */

/* ── impressão ───────────────────────────────────────────────────────── */

@media print {
  .abertura { min-height: 0; background: #fff; color: #000; padding-block: var(--space-6); }
  .abertura-fundo, .abertura::before, .abertura-role, .progresso-rolagem { display: none; }
  /* A paisagem é decorativa e sairia em nove camadas de tinta. O texto da
     tese continua, em preto sobre branco. */
  /* No papel o voo não existe: sai o palco e ficam as quatro falas, em preto
     sobre branco, na ordem em que a câmera as encontraria. */
  .secao-tese { background: #fff; color: #000; height: auto !important; padding-block: var(--space-6); }
  .voo-cena, .voo-veu { display: none; }
  .voo-palco { position: static !important; block-size: auto !important; overflow: visible; }
  .voo-textos { position: static !important; padding-block: 0; }
  .voo-texto { opacity: 1 !important; text-align: start; text-shadow: none; margin-inline: 0; padding: 0; background: none; border: 0; box-shadow: none; backdrop-filter: none; }
  .voo-rotulo, .voo-frase strong { color: #45185F; }
  .voo-frase { color: #000; }
  .secao-limites, .secao-portas { background: #fff; color: #000; }
  .limite p, .porta p { color: #333; }
  .secao { padding-block: var(--space-6); }
  .etapa-visual { position: static; }
}