/* ==========================================================================
   PÁGINA SOBRE — /sobre
   --------------------------------------------------------------------------
   Carregada entre styles.css e responsive.css, como preco.css e legal.css.

   Só o que NÃO existe no sistema mora aqui. Tudo que já é componente é reusado
   como está: .eyebrow, .display-54, .lede, .btn e variantes, .link-mono,
   .delivers/.deliver (bloco escuro de cards), .audience/.persona (moldura
   clara), .cta e o rodapé. Nenhum token é redefinido e nenhum tamanho de
   fonte é inventado — os quatro que aparecem abaixo (--fs-md, --fs-lede,
   --fs-sm, --fs-label) são degraus da escala de responsive.css.

   O que a página tem de próprio são quatro coisas que nenhuma outra tem:

   1 · a abertura sangrada com a foto ocupando a dobra inteira (.sh);
   2 · o manifesto, uma coluna estreita e centrada sobre branco (.manif);
   3 · a faixa de meia-sangria texto/foto que se repete três vezes (.duo);
   4 · o bloco do espelho, com um grafismo em vez de fotografia (.espelho).

   CONTRASTE. O sistema decide a tinta do .eyebrow e do .lede por herança de
   custom property (ver §4 do responsive.css): a superfície declara em que
   fundo está, e a primitiva só lê. As seções claras daqui declaram o par
   claro; as escuras herdam o padrão do :root e não declaram nada.
   ========================================================================== */

/* ==========================================================================
   1 · ABERTURA — foto sangrada, título embaixo à esquerda
   --------------------------------------------------------------------------
   A topbar é transparente até a primeira rolagem e tem tipo branco (ver
   .nav / .nav.scrolled no styles.css). Como a foto abre com luz de fim de
   tarde entrando pelas janelas, o topo dela é claro demais para sustentar a
   marca — daí o véu ser DUPLO: um degrau curto no topo, só para a barra, e
   um longo embaixo, que é o que dá chão ao título.

   O véu sozinho não foi suficiente (12/09/2026 — pedido do Márcio). O
   sistema de nav foi desenhado para fundo ESCURO CHAPADO: aí a borda quase
   preta (#2e2e2e) dos botões some de propósito contra o preto, e o mosaico
   colorido da marca some contra ele por ter ladrilhos brancos. Numa foto
   variada — com a claraboia iluminada atrás da marca e o vitral colorido
   atrás dos botões —, essa mesma borda escura e esses mesmos ladrilhos
   brancos ficam ilegíveis: têm hora que competem com uma cor da própria
   foto e somem. A correção é só para aqui, só enquanto a nav ainda não
   rolou (`.scrolled` já troca para fundo quase branco sólido, onde o
   desenho padrão volta a funcionar sem ajuda): a marca vira uma silhueta
   branca sólida (perde as seis cores, e só aqui) e a borda dos dois botões
   de ícone ganha opacidade.

   A espessura (1.5px) já vinha certa, herdada da regra-base — só a cor
   trocou. A primeira versão desta correção pintava a borda de #fff sólido:
   fino demais para não ficar seco perto do botão preto e sólido do Jogar,
   que tem 0px de borda. Pedido do Márcio: usar a MESMA configuração — a
   mesma espessura e a mesma opacidade — que a página inicial usa nos
   próprios botões dela. Só que lá a superfície por trás é sempre um preto
   contínuo, então a borda de lá é opaca (#2e2e2e sólido); aqui é uma foto
   variada, e uma borda opaca de novo tinha exatamente o mesmo problema
   descrito acima, só que na cor oposta. Quem já resolve isso no próprio
   site é o `.hero__pausa-btn` (vídeo do herói, também sobre imagem): 1.5px
   e rgba(255, 255, 255, .28) — a mesma receita de espessura+opacidade,
   adaptada para uma superfície que muda, e não para uma chapada.
   ========================================================================== */
.nav:not(.scrolled) .nav-toggle,
.nav:not(.scrolled) .nav-ai {
  border-color: rgba(255, 255, 255, .28);
}
.nav:not(.scrolled) .nav-logo-full-light,
.nav:not(.scrolled) .nav-logo-icon-light {
  /* trava o mosaico colorido em branco sólido sem trocar de arquivo: brightness(0)
     achata todo pixel não-transparente para preto, invert(1) vira branco — a
     transparência do svg não é afetada. */
  filter: brightness(0) invert(1);
}
.sh {
  position: relative;
  /* NÃO é mais uma dobra cheia (88vh/900px de teto). Naquela medida, em
     qualquer notebook comum (800 a 900px de altura útil) a foto sozinha
     ocupava a janela inteira: título encostado no rodapé, e a primeira
     coisa que a leitura de fato precisa — o eyebrow "Nossa missão" da
     seção seguinte — ficava fora da primeira tela, invisível até rolar.
     O visitante via uma foto de tela cheia antes de ver uma frase.

     O teto caiu para 680px (65vh) de propósito: numa janela de 900px de
     altura, sobra folga suficiente para a foto respirar E ainda revelar
     ~150 a 200px da missão logo abaixo — o suficiente para o olho ler o
     começo do próximo título e entender que há conteúdo, não só imagem.
     A primeira dobra passa a mostrar os dois: retrato e começo do texto. */
  height: clamp(480px, 65vh, 680px);
  overflow: hidden;
  background: var(--ink);
  display: flex;
  align-items: flex-end;
}

.sh__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 42% e não o centro: o quadro é uma escada vista de baixo e o assunto
     (os rostos) vive no terço superior. Centrado, o corte comia as cabeças
     em telas largas e sobrava piso. */
  object-position: center 42%;
}

.sh::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(9, 9, 9, .62) 0, rgba(9, 9, 9, 0) 190px),
    linear-gradient(0deg, rgba(9, 9, 9, .88) 0, rgba(9, 9, 9, .55) 26%, rgba(9, 9, 9, 0) 58%);
}

.sh__inner {
  position: relative;
  z-index: 1;
  width: var(--content);
  max-width: 100%;
  margin: 0 auto;
  padding: 0 var(--gutter) var(--sp-8);
}

.sh__titulo {
  margin-top: 11px;              /* mesmo respiro eyebrow → título do site */
  color: var(--paper-fa);
  text-transform: uppercase;
}

/* ==========================================================================
   2 · MISSÃO E MANIFESTO — coluna estreita, centrada, sobre branco
   ========================================================================== */
.manif {
  --tinta-eyebrow: var(--r-base);
  --tinta-mute: var(--gray-600);
  background: var(--paper);
  padding: var(--sp-9) var(--gutter);
  display: flex;
  justify-content: center;
}

.manif__inner {
  width: 920px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.manif__titulo {
  /* os 11px que existiam aqui compensavam o line-height do eyebrow "Nossa
     missão" logo acima — um ajuste óptico para o título não parecer
     distante demais dele. Removido o eyebrow, o título voltou a ser o
     primeiro filho de `.manif__inner`, e aquele deslocamento passou a ser
     só um respiro sem função no topo da seção. */
  max-width: 900px;
  color: var(--ink);
  /* o título tem 73 caracteres e quebra em duas ou três linhas conforme a
     largura; sem `balance` a última linha ficava com uma palavra só */
  text-wrap: balance;
}

/* O manifesto é o único parágrafo LONGO da página em posição de destaque, e
   é o que a pessoa lê primeiro depois do título. Fica um degrau acima do
   corpo (--fs-md, não --fs-base) e em tinta forte (--gray-800), não na
   cinza de apoio: aqui ele é o conteúdo, não a legenda de outra coisa. */
.manif__texto {
  margin-top: var(--sp-4);
  max-width: 660px;
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--gray-800);
}

/* ==========================================================================
   3 · FAIXA DE MEIA-SANGRIA — texto de um lado, foto até a borda do outro
   --------------------------------------------------------------------------
   Usada três vezes (origem, o que resolvemos, o nome). Duas coisas precisam
   ser verdade ao mesmo tempo, e é a segunda que decide a técnica:

   1 · a DIVISA entre foto e texto cai exatamente no eixo vertical da página;
   2 · a borda EXTERNA do texto cai na mesma coluna de 1280 do resto do site.

   A primeira versão punha o recuo de alinhamento como padding da própria
   seção. Funcionava para (2) e quebrava (1): com padding na seção, as duas
   colunas de 1fr passam a dividir o que SOBRA dele, e a divisa nasce meio
   padding à direita do centro — 40px em 1440, mais em telas largas. É o
   deslocamento que aparece quando se traça uma linha no meio da tela.

   Agora a seção não tem padding nenhum: 1fr + 1fr sobre a largura inteira
   dá a divisa no eixo, sempre. O alinhamento com a coluna de 1280 é
   resolvido DENTRO da coluna de texto, com uma caixa de meio --content
   (mais o gutter) encostada no eixo por margem automática. Nenhuma das duas
   contas depende de 100vw, que erra pela barra de rolagem.

   Os dois gutters da caixa são iguais de propósito: o eixo passa a se
   comportar como a borda da página, e o texto guarda dele a mesma distância
   que guarda da borda da tela.
   ========================================================================== */
.duo {
  /* METADE DA COLUNA DE CONTEÚDO — em pixel, e não `--content / 2`.
     `--content` vale 1280px só acima de 1360; abaixo disso o sistema o
     troca por 100% (styles.css, "conteúdo passa a ser fluido"). Ali ele
     deixa de ser uma medida e vira uma proporção, e a divisão passaria a
     significar "metade da própria coluna", não "metade de 1280" — foi
     exatamente o que encolheu o texto para 239px entre 1024 e 1360.
     O teto tem que ser uma medida fixa; quem cuida das telas menores é o
     `width: 100%` do .duo__texto, que já limita pela coluna. */
  --meia-coluna: 640px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

.duo__texto {
  /* `width` explícito, e não só o teto: a margem automática abaixo tira o
     item do estiramento padrão da grade e o faz medir pelo CONTEÚDO. Entre
     1024 e 1280, onde a coluna já é menor que o teto, era essa medida por
     conteúdo que valia — e o texto encolhia para menos da metade da coluna,
     com o resto virando vão morto ao lado do eixo. Com os dois, a conta é
     `min(coluna, teto)` e a margem só posiciona o que sobra. */
  width: 100%;
  /* meio --content + o respiro INTERNO (--duo-respiro, abaixo): com o
     padding, o texto termina a esse respiro do eixo — não mais a um
     --gutter simples. --gutter é a MESMA medida usada na borda externa da
     tela (20 a 40px), e encostada bem no meio da composição, ao lado da
     foto, ela lia como aperto: as duas colunas praticamente se tocavam. */
  max-width: calc(var(--meia-coluna) + var(--duo-respiro));
  padding-block: var(--sp-9);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

/* respiro ASSIMÉTRICO: a borda que dá para a foto (o lado de DENTRO da
   composição, onde o texto encosta no eixo) folga mais que a borda que dá
   para a tela (o lado de fora, que segue no --gutter comum — é o que
   mantém eyebrow e título na mesma coluna vertical do resto do site). */
:root { --duo-respiro: var(--sp-6); }

/* foto à direita: o texto encosta no eixo pela direita — o respiro maior
   vai no fim (direita), o --gutter comum no início (esquerda) */
.duo--dir .duo__texto {
  margin-left: auto;
  padding-inline: var(--gutter) var(--duo-respiro);
}

/* foto à esquerda: o texto encosta no eixo pela esquerda — os dois lados
   trocam de papel */
.duo--esq .duo__texto {
  margin-right: auto;
  padding-inline: var(--duo-respiro) var(--gutter);
}

.duo__titulo { margin-top: 11px; }
.duo__p {
  /* sem teto próprio: a medida já vem da caixa da coluna. Um max-width
     menor aqui reabriria, do lado de dentro, o desalinhamento que a caixa
     acabou de fechar. */
  margin-top: var(--sp-4);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
}
.duo__p:first-of-type { margin-top: var(--sp-3); }

.duo__cta { margin-top: var(--sp-6); }

.duo__foto {
  position: relative;
  /* a foto manda na altura mínima da faixa; acima disso quem manda é o
     texto, e ela acompanha por `align-items: stretch` */
  min-height: 560px;
  overflow: hidden;
  background: var(--ink-deep);
}
.duo__foto img {
  position: absolute;
  /* A FOLGA ESTÁ NA CAIXA, e é isso que faz o zoom existir sem escancarar o
     fundo. `object-fit: cover` recorta DENTRO da caixa da imagem — com
     `inset: 0` a caixa teria o tamanho exato do quadro, e como o zoom
     cresce a partir da escala 1 (o próprio tamanho da caixa), ele já nasce
     preenchendo o quadro sem sobra nenhuma: um arredondamento de subpixel
     bastaria para abrir uma linha do fundo (--ink-deep) na borda. Por isso
     8% de folga de cada lado, mesmo sem deslize algum rodando — é
     margem de segurança para o próprio zoom, não para um parallax.

     (Esta caixa já hospedou um segundo motor, um deslize vertical por
     GSAP preso à rolagem, num elemento `.duo__caixa` à parte — os dois
     não cabiam juntos aqui: uma `animation` CSS tem precedência sobre
     `transform` inline, então o tween do GSAP seria vencido a cada quadro
     pela folha de estilo. O deslize foi removido por pedido explícito —
     só o zoom ficou —, e com ele foi embora a razão de ter dois
     elementos. Estrutura simplificada de volta a um só.) */
  left: 0;
  width: 100%;
  top: -8%;
  height: 116%;
  object-fit: cover;

  /* ---- a respiração ----
     PERENE: roda sempre, independente de rolagem. Escala 1 a 1,09 e volta,
     em loop.

     9s de ida e 9s de volta — metade dos 18s de antes, pedido explícito
     para ficar mais rápido. É mais rápido que os 14s do modal
     (`hist-respira`) mesmo esta foto concorrendo com um bloco de texto ao
     lado, o que normalmente pediria CAUTELA (movimento periférico rápido
     rouba a leitura); se ficar rápido demais na prática, o ajuste é só
     este número. */
  animation: duo-respira 9s ease-in-out infinite alternate;
}
@keyframes duo-respira {
  from { transform: scale(1); }
  to   { transform: scale(1.09); }
}
@media (prefers-reduced-motion: reduce) {
  .duo__foto img { animation: none; }
}

/* ---- as duas superfícies em que a faixa aparece ---- */
.duo--escura {
  background: var(--ink-deep);
  color: var(--paper-fa);
}
.duo--escura .duo__titulo { color: var(--paper-fa); }
.duo--escura .duo__p { color: rgba(255, 255, 255, .70); }

.duo--clara {
  --tinta-eyebrow: var(--r-base);
  --tinta-mute: var(--gray-600);
  background: var(--paper-fa);
}
.duo--clara .duo__titulo { color: var(--ink-deep); }
.duo--clara .duo__p { color: var(--gray-600); }

/* ==========================================================================
   4 · O ESPELHO — grade assimétrica, sem imagem
   --------------------------------------------------------------------------
   É o bloco dos limites (Resolução CFP 06/2019). Duas versões anteriores
   foram descartadas, e o motivo de cada uma vale ficar registrado:

   1 · TEXTO + GRAFISMO À DIREITA. O desenho (um círculo com o traço do
       espectro e um fio saindo dele) ficava pequeno demais para ler como
       intencional e grande demais para ler como detalhe. Nem ilustração
       nem ornamento: um vão à direita do texto.

   2 · COLUNA ÚNICA CENTRADA. Sem a segunda coluna, o bloco perdeu o que o
       segurava. Texto corrido centralizado só funciona em medida curta —
       aqui eram parágrafos de cinco e seis linhas, e cada linha nascia num
       ponto de entrada diferente, o que obriga o olho a procurar o começo
       da seguinte. Pior: sem nenhuma borda comum, título, régua, fecho e
       botões flutuavam no branco sem se referirem a nada, e o resultado
       lia como espaço vazio com texto dentro, não como composição.

   A VERSÃO ATUAL devolve o eixo: tudo alinhado à esquerda, em duas colunas
   de larguras propositalmente diferentes (~1:2). Cada uma tem um papel:

   · COLUNA ESTREITA — rótulo, título e as ações. É a âncora. Título em cima
     e botões embaixo formam um "L" que emoldura o texto ao lado, e a coluna
     inteira compartilha uma borda esquerda com o resto da página.
   · COLUNA LARGA — o argumento, numa medida de leitura confortável (620px,
     perto do teto de 640 que o sistema já usa no .lede), terminando na
     régua âmbar e no fecho.

   A régua e o "Espelho, não destino" ficam ONDE O ARGUMENTO TERMINA, não no
   meio da seção: é a conclusão de um raciocínio, e conclusão mora no fim do
   raciocínio, não num bloco separado dele. As alturas das duas colunas se
   aproximam sozinhas (âncora ~250px, corpo ~280px), então não sobra pé de
   coluna vazio de nenhum dos dois lados.
   ========================================================================== */
.espelho {
  --tinta-eyebrow: var(--r-base);
  --tinta-mute: var(--gray-600);
  background: var(--paper);
  padding: var(--sp-9) var(--gutter);
  display: flex;
  justify-content: center;
}

.espelho__inner {
  width: var(--content);
  max-width: 100%;
  display: grid;
  /* 400px não é medida solta: é o que cabe "A escolha continua sendo sua."
     em duas linhas no corpo display, sem sobra. A coluna larga fica com o
     resto, e a proporção que sai (~1:2) é o que dá a assimetria — duas
     colunas iguais devolveriam a simetria que já não estava funcionando. */
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: var(--sp-8);
  align-items: start;
}

.espelho__cabeca { grid-column: 1; grid-row: 1; }
/* 640px é o teto que o sistema já dá a texto de leitura (o .lede do
   styles.css usa o mesmo) — a medida não é escolhida aqui, é herdada da
   régua do site. Sobra branco entre o fim do texto e a borda direita do
   container, e sobra de propósito: é o respiro da coluna de leitura, o
   mesmo que a foto ocupa nas faixas .duo. */
.espelho__corpo  { grid-column: 2; grid-row: 1 / -1; max-width: 640px; }
.espelho__acoes  { grid-column: 1; grid-row: 2; }

.espelho__titulo {
  margin-top: 11px;
  color: var(--ink-deep);
  /* na coluna de 400px o título quebrava em "A escolha continua sendo /
     sua." e deixava uma palavra órfã na segunda linha. `balance` reparte as
     duas linhas pelo comprimento e devolve "A escolha continua / sendo
     sua." — mesma correção que o título do manifesto já usa. */
  text-wrap: balance;
}

.espelho__p {
  /* --fs-base, e não --fs-md: este parágrafo é corpo de texto, igual ao
     .duo__p da faixa "Por que Loomty" logo acima na mesma página. Estava em
     --fs-md (16,5–18px) enquanto o resto do site usa 15px fixo — a diferença
     era visível lado a lado, sem motivo de hierarquia por trás dela. */
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--gray-600);
}
.espelho__p + .espelho__p { margin-top: var(--sp-4); }

/* a régua marca a virada de "explicação" para "conclusão" — o mesmo papel
   que uma quebra de parágrafo cumpriria em prosa corrida, só que visível,
   porque a frase que vem a seguir muda de registro (deixa de ser corpo de
   texto e vira uma afirmação isolada) e precisa de um sinal equivalente.
   Curta e âmbar: é acento, não separador de seção. */
.espelho__regua {
  /* zera a folha do navegador para <hr>, que traz altura, borda 3D e
     margem automática dos dois lados — esta última centralizaria a régua
     numa composição que agora é toda alinhada à esquerda */
  width: 64px;
  height: 2px;
  margin: var(--sp-6) 0 0;
  border: 0;
  background: var(--r-base);
}

/* --fs-2xl, e não --fs-display: o fecho não pode empatar com o título da
   seção, que já ocupa o topo da hierarquia aqui. Um degrau abaixo dele e
   vários acima do corpo é exatamente a posição que a frase tem no texto. */
.espelho__fecho {
  margin-top: var(--sp-4);
  font-family: var(--display);
  font-size: var(--fs-2xl);
  line-height: var(--lh-title);
  color: var(--ink-deep);
}

.espelho__acoes {
  /* empilhadas, não lado a lado: na coluna estreita elas não caberiam numa
     linha só, e empilhadas viram o pé do "L" que ancora a composição */
  margin-top: var(--sp-7);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
}

/* ==========================================================================
   5 · AJUSTES NOS COMPONENTES DO SISTEMA
   ========================================================================== */

/* ---- a seção sem cabeçalho ----
   .delivers vem com padding assimétrico (100px em cima, 4px embaixo): a
   medida foi calibrada para uma seção com CABEÇALHO + cards + tickers/CTA
   por baixo, onde o respiro de cima é o que separa do título e o de baixo
   é quase zero porque o próximo elemento já traz o próprio espaço. Aqui não
   sobrou cabeçalho, e herdar aquele padding deixava os cards descentrados
   verticalmente — muito ar em cima, quase nenhum embaixo. Com os dois
   lados iguais, os cards passam a ser a seção inteira, centralizados nela
   tanto na horizontal (herança do .delivers__block) quanto na vertical. */
.delivers--sem-cabecalho { padding-block: var(--sp-9); }

/* ---- o par de cards da empresa ----
   .delivers__cards não tem largura própria no sistema: quem a define é o
   conteúdo, e na home os três cards de 416px somam exatamente os 1280 do
   --content. Aqui são DOIS, e sem largura declarada a moldura encolheria
   para 840 e sairia desalinhada do resto da página. Mesma correção que
   iara.html faz para o caso de quatro cards. */
.empresa__cards { width: var(--content); max-width: 100%; }
.empresa__cards .deliver { width: auto; flex: 1 1 0; min-width: 0; }
.empresa__cards .deliver__inner { width: 100%; }

/* o .link-mono dentro do card: inline-flex com o mesmo respiro do .btn
   (10px) para a seta não encostar na última letra — em caixa alta e com
   entreletra de 1,04px o espaço de texto sozinho some */
.empresa__cards .link-mono {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* a lista do que a Loomty não faz. Cada item começa por um traço em mono,
   na cor de acento do card — o mesmo papel que o ícone tem nos cards da
   home, sem inventar um ícone novo para cada recusa. */
.naofaz {
  margin-top: var(--sp-1);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.naofaz li {
  position: relative;
  padding-left: 22px;
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: rgba(255, 255, 255, .70);
}
.naofaz li::before {
  content: "—";
  position: absolute;
  left: 0;
  font-family: var(--mono);
  font-weight: 700;
  color: var(--accent-light, var(--accent));
}

/* ---- os cards de "acompanhe" ----
   Dois dos três levam a algum lugar, então viram <a>. O .persona já é uma
   coluna flex com o meta grudado embaixo (margin-top:auto); aqui o meta
   passa a ser o próprio chamado, e ganha a seta. */
.persona--link { cursor: pointer; }
.persona--link:hover .persona__meta { color: var(--ink-deep); }
.persona__meta .seta {
  display: inline-block;
  margin-left: 6px;
  transition: transform .18s ease;
}
.persona--link:hover .persona__meta .seta { transform: translateX(3px); }

/* o card sem destino não finge que tem: fica como está, e o meta diz o
   estado em vez de prometer um clique */
.persona--breve { cursor: default; }

/* ---- primitivas ----
   .link-mono existe no sistema só na versão de fundo escuro (branco a 62%).
   A variante clara não muda nada além da tinta. */
.link-mono--claro { color: var(--gray-600); }
.link-mono--claro:hover { color: var(--ink-deep); }

/* Palavra citada como palavra (Loom, clarity, identity). Sem itálico — o
   sistema não carrega itálico em nenhuma das três famílias, e forçar
   `font-style: italic` faria o navegador inclinar o desenho por conta
   própria, a mesma falsificação que `font-synthesis-weight: none` já
   proíbe do lado do peso. A PRIMEIRA versão marcava a citação em mono, como
   rótulo ou código; lida ao lado do corpo em Plus Jakarta Sans, a troca de
   família lia como troca de fonte no meio do texto, não como ênfase — dois
   sistemas de letra na mesma frase. A citação continua se destacando pela
   COR (o âmbar já usado nos rótulos do site); a família passa a ser a mesma
   do parágrafo que a cerca, herdada, não redeclarada. */
.termo {
  font-weight: 600;
  color: var(--termo-tinta, var(--amber-light));
}
.duo--clara .termo,
.espelho .termo { --termo-tinta: var(--i-dark); }

/* ==========================================================================
   6 · MODAL DA HISTÓRIA COMPLETA
   --------------------------------------------------------------------------
   Aberto pelo botão "Leia a história completa", na faixa da origem. Mesma
   anatomia do .acm- de auth-modal.css — véu com desfoque, quadro que sobe
   de leve ao abrir, foco preso, Esc fecha — porque é o comportamento de
   modal que o site já ensinou ao visitante; reinventar a mecânica aqui
   criaria dois jeitos de "abrir uma janela" na mesma página.

   O que muda é o miolo: o modal de acesso é um formulário (uma tela, uma
   ação); este é uma leitura longa. Por isso a foto não é um carrossel que
   troca sozinho — é uma imagem só, fixa, e é o TEXTO que rola, na própria
   coluna, sem levar o resto da página junto.
   ========================================================================== */
.hist-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: safe center;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
  background: rgba(9, 9, 9, .74);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .24s ease, visibility linear .24s;
}
.hist-overlay.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }

/* mesmo mecanismo do .acm-aberto de auth-modal.css: trava a rolagem do body
   enquanto o modal está aberto, para a página de trás não rolar junto com
   o texto de dentro */
body.hist-aberto { overflow: hidden; }

.hist-shell {
  position: relative;
  display: grid;
  /* .62fr é a proporção de um retrato 9:16 numa altura de 800px. Com a foto
     agora em `cover` a conta deixou de ser obrigatória, mas continua sendo a
     melhor: quanto mais perto a coluna estiver do formato da imagem, menos
     sobra para o corte comer. */
  grid-template-columns: minmax(0, .62fr) minmax(380px, 1fr);
  /* SEM VÃO E SEM PADDING. Os 10px de respiro interno abriam uma moldura da
     cor do quadro em volta da foto — e, somados às tarjas do `contain`, era
     essa faixa escura que aparecia como se a imagem estivesse solta dentro
     de um passe-partout. Zerados, a foto encosta nas três bordas do modal e
     quem arredonda o canto é o `overflow:hidden` do próprio quadro. */
  gap: 0;
  width: 100%;
  max-width: min(1180px, 100vw - 32px);
  height: min(800px, 100dvh - 48px);
  min-height: 0;
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 18px;
  background: var(--ink-deep);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .48);
  transform: translateY(12px) scale(.985);
  transition: transform .28s cubic-bezier(.22, .8, .26, 1);
}
.hist-overlay.is-open .hist-shell { transform: none; }

.hist-fechar {
  position: absolute;
  top: 22px;
  right: 22px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 4px;
  background: rgba(9, 9, 9, .55);
  color: var(--paper-fa);
  cursor: pointer;
  appearance: none;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background .2s, color .2s, border-color .2s;
}
.hist-fechar:hover { background: var(--paper-fa); border-color: var(--paper-fa); color: var(--ink); }
.hist-fechar svg { width: 20px; height: 20px; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- a foto: um carrossel VERTICAL, comandado pela rolagem do texto ----
   Cinco cenas empilhadas no mesmo lugar, todas em opacidade 0 menos a da
   vez. Quem decide qual é a da vez é o TEXTO ao lado: cada bloco da
   história carrega um data-cena, e o script troca a foto quando o bloco
   correspondente cruza a linha de leitura. Não há relógio nem autoplay —
   se a pessoa parar de rolar, a imagem para junto, porque ela é legenda do
   que está sendo lido, não um slideshow rodando em paralelo.

   O QUADRO É QUE MANDA, e por isso o `object-fit` é `cover`. As cinco fotos
   são 9:16 (0,558); a coluna, não — ela nasce da altura do modal, que muda
   com a janela, e em celular vira uma faixa larga e baixa. `contain`
   mostrava a foto inteira mas pagava com tarjas escuras em volta, e a
   imagem passava a flutuar dentro de um passe-partout em vez de ocupar o
   quadro. `cover` preenche a moldura toda: o que não couber é cortado, que
   é o comportamento normal de foto em caixa fixa.

   Onde o corte cai é escolha, não sorte: cada imagem declara o próprio
   ponto de interesse em `--foco` (ver o style de cada <img> no HTML), e é
   nele que o recorte se ancora. Sem isso o corte sairia do centro
   geométrico e cortaria rosto pela metade nas fotos em que as pessoas não
   estão no meio do quadro. */
.hist-foto {
  /* `margin: 0` NÃO é redundante: este bloco é um <figure>, e a folha do
     navegador dá a ele `margin: 1em 40px`. O reset do styles.css zera
     parágrafo, título e lista, mas não figure — então a foto nascia com
     40px de recuo lateral e 16px em cima, deslocada dentro da própria
     coluna e transbordando a base do quadro. Era essa margem que aparecia
     como uma moldura escura em volta da imagem. */
  margin: 0;
  position: relative;
  min-width: 0;
  min-height: 100%;
  overflow: hidden;
  background: #050505;
}
.hist-foto__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--foco, 50% 50%);
  /* o estado de partida é invisível para TODAS: quem acende a primeira é o
     script, no mesmo passo em que registra qual é a cena ativa. Assim não
     há um quadro em que duas apareçam somadas. */
  opacity: 0;

  /* ---- a respiração ----
     Zoom que entra e volta, sem parar, enquanto a história é lida. Vai a 8%
     em 14 segundos e volta no mesmo tempo (`alternate`), devagar o bastante
     para a pessoa não flagrar o movimento acontecendo — só perceber que a
     cena não está morta.

     POR QUE EM CSS, e não no GSAP como o resto da página: a troca de cena
     (script no fim de sobre.html) anima a opacidade destas mesmas imagens
     com `overwrite: true`, que no GSAP mata TODOS os tweens do elemento e
     não apenas os da propriedade em disputa. Um tween de escala feito ali
     morreria na primeira troca de cena. Em CSS os dois nunca se cruzam: o
     script escreve `opacity` inline, a folha anima `transform`.

     O piso é `scale(1)`, e não menos: a imagem preenche o quadro por
     `cover`, então qualquer escala abaixo de 1 descolaria a borda e
     mostraria o fundo #050505 atrás. Zoom só cresce; quem "sai" é a volta
     ao tamanho natural. */
  animation: hist-respira 14s ease-in-out infinite alternate;
}
@keyframes hist-respira {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}
/* garantia 2 do contrato de movimento do site: quem pediu menos movimento
   não recebe nenhum. */
@media (prefers-reduced-motion: reduce) {
  .hist-foto__img { animation: none; }
}
/* Sem JavaScript (ou com o script travado) a primeira foto fica visível e o
   modal continua legível — a regra abaixo é o piso, e o script sobrescreve
   por `style`, que vence por especificidade. */
.hist-foto__img:first-of-type { opacity: 1; }

/* ---- a régua de cenas ----
   Cinco barras verticais, uma por cena. Não é enfeite: é o que avisa que a
   foto TEM mais estados e que eles andam com o texto. Também são botões —
   clicar leva a leitura ao bloco correspondente, que é o atalho que
   qualquer carrossel deve oferecer a quem quer pular. */
/* véu estreito atrás da régua. Sem ele os traços caem direto sobre a foto e,
   nas cenas claras (o almoço no jardim, a mesa de estudo), 3px de branco a
   30% desaparecem por completo — o controle existia e não se via. O véu é
   uma faixa curta na borda esquerda, forte no canto e nula aos 90px, então
   escurece só o que está atrás dos traços e não invade a cena. */
.hist-foto::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 90px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(5, 5, 5, .5) 0, rgba(5, 5, 5, 0) 100%);
}

.hist-cenas {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
}
/* O BOTÃO é a caixa invisível de 28×34; o TRAÇO é o ::after dentro dela.
   Separar os dois é o que permite o alvo de clique ser confortável sem que
   o desenho engorde junto — o traço continua com 3px de largura. */
.hist-cenas__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 34px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  appearance: none;
}
.hist-cenas__btn::after {
  content: "";
  width: 3px;
  height: 22px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .5);
  transition: background .3s ease, height .3s ease;
}
.hist-cenas__btn:hover::after { background: rgba(255, 255, 255, .85); }
.hist-cenas__btn[aria-current="true"]::after {
  height: 30px;
  background: var(--r-light);
}

/* ---- a coluna que lê ---- */
.hist-corpo {
  /* `relative` não é decoração: é o que faz esta caixa ser o offsetParent
     dos blocos da história. Sem ela o offsetParent vira o .hist-shell (o
     único ancestral posicionado), e o `offsetTop` que os botões da régua
     usam para saltar passa a ser medido a partir do quadro inteiro, não do
     conteúdo que rola — o salto erra por toda a altura do cabeçalho. */
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  background: var(--ink-deep);
}
.hist-corpo:focus-visible { outline: none; }  /* recebe foco por script, não por teclado — ver o js */

.hist-conteudo {
  padding: 64px 56px 56px;
  max-width: 640px;
}

/* UMA FONTE DE TÍTULO, E SÓ UMA.
   A Tanker (--display) fica reservada ao h2 do modal. Todo o resto — os
   intertítulos, a fala citada, o corpo e o fecho — corre em Plus Jakarta
   Sans. O motivo é de leitura, não de gosto: a Tanker é condensada e de
   caixa alta, desenhada para manchete. Repetida a cada intertítulo dentro
   de um texto longo, ela devolve ao leitor cinco "manchetes" concorrendo
   com o título de cima, e a hierarquia achata. Com uma família só no miolo,
   quem separa os níveis passa a ser peso, corpo e cor — que é como texto
   corrido se organiza. */
.hist-titulo {
  color: var(--paper-fa);
  /* 12ch, testado ao vivo, quebrava a frase em quatro linhas curtas —
     apertado demais para o espaço real da coluna. 20ch dá duas linhas,
     mais perto do resto dos títulos display-54 da página. */
  max-width: 20ch;
}

.hist-corpo__texto { margin-top: var(--sp-7); }

/* o intertítulo vira sans em peso 800: mesma família do corpo, dois passos
   de peso acima dele. A caixa alta sai junto — em Plus Jakarta ela pediria
   entreletra para não fechar, e aí já seria outro sistema de rótulo. */
.hist-bloco + .hist-bloco { margin-top: var(--sp-7); }
.hist-bloco h3 {
  font-family: var(--sans);
  font-weight: 800;
  font-size: var(--fs-lg);
  line-height: var(--lh-title);
  color: var(--paper-fa);
}
.hist-bloco p {
  margin-top: var(--sp-3);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: rgba(255, 255, 255, .82);
}
.hist-bloco strong { color: var(--paper-fa); font-weight: 600; }

/* a fala citada (o que o Enzo disse, o que o pai respondeu por dentro) sai
   recuada e mais clara que o corpo — não é narração, é a cena que a
   narração está descrevendo. Peso e tinta a destacam; a família continua
   sendo a do parágrafo em volta. */
.hist-fala {
  margin-top: var(--sp-4);
  padding-left: 18px;
  border-left: 2px solid var(--r-light);
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: var(--lh-body);
  color: var(--paper-fa);
}

.hist-fecho {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.hist-fecho p {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: rgba(255, 255, 255, .56);
}

@media (max-width: 860px) {
  .hist-shell {
    grid-template-columns: minmax(0, 1fr);
    /* empilhado, a foto vira uma faixa larga e baixa. 44dvh dá à cena espaço
       de sobra para se ler bem, ainda deixando o texto com a maior parte da
       altura do modal: com `cover` a foto preenche a faixa inteira, e o
       corte se ancora no --foco de cada imagem.

       A ordem dos tracks segue a ordem do HTML aqui: a foto (figure) vem
       primeiro no markup e por isso ocupa a primeira faixa, a compacta
       (44dvh); o texto vem depois e ocupa a segunda, a flexível (1fr). Sem
       `order` em .hist-foto — ele já é o primeiro filho do grid. */
    grid-template-rows: minmax(0, 44dvh) minmax(0, 1fr);
    height: min(760px, 100dvh - 32px);
  }
  .hist-foto { min-height: 0; }
  .hist-conteudo { padding: 40px 24px 40px; }
  .hist-titulo { max-width: none; }

  /* deitada, a régua acompanha: cinco traços na horizontal, no rodapé da
     faixa. Na vertical ela ficaria com 170px de altura dentro de uma faixa
     de ~280px, encostando nas duas pontas. */
  .hist-cenas {
    left: 50%;
    top: auto;
    bottom: 10px;
    transform: translateX(-50%);
    flex-direction: row;
  }
  .hist-cenas__btn { width: 34px; height: 28px; }
  .hist-cenas__btn::after { width: 22px; height: 3px; }
  .hist-cenas__btn[aria-current="true"]::after { width: 30px; height: 3px; }

  /* o véu vira horizontal junto com a régua */
  .hist-foto::before {
    inset: auto 0 0 0;
    width: auto;
    height: 90px;
    background: linear-gradient(0deg, rgba(5, 5, 5, .5) 0, rgba(5, 5, 5, 0) 100%);
  }
}

@media (max-width: 480px) {
  .hist-overlay { padding: 0; }
  .hist-shell {
    max-width: 100vw;
    height: 100dvh;
    border-radius: 0;
    /* mesma ordem do breakpoint de 860px: foto na faixa compacta — aqui
       40dvh, um pouco menor que os 44dvh de telas maiores porque a altura
       toda já é menor (100dvh em vez de 760px de teto) e a foto não
       precisa da mesma fatia para se ler —, texto na faixa flexível (1fr). */
    grid-template-rows: minmax(0, 40dvh) minmax(0, 1fr);
  }
}

/* ==========================================================================
   7 · RESPONSIVO — mesmos degraus do resto do site (1360 / 1024 / 768)
   ========================================================================== */

@media (max-width: 1360px) {
  /* os títulos de seção do sistema vêm com white-space:nowrap, calibrado
     para as frases da home; as daqui são mais longas */
  .empresa__cards { width: 100%; }
}

@media (max-width: 1024px) {
  .manif,
  .espelho { padding-block: var(--sp-8); }

  /* a faixa desempilha: a foto vira uma banda de largura cheia e o texto
     desce para baixo dela, alinhado ao gutter como qualquer outra seção.
     Some junto o encosto no eixo — sem duas colunas não há eixo a
     alcançar, e a margem automática que encostava lá jogaria o texto para
     um dos lados da tela. */
  .duo,
  .duo--dir,
  .duo--esq { grid-template-columns: minmax(0, 1fr); }
  .duo--dir .duo__texto,
  .duo--esq .duo__texto {
    /* some junto o respiro assimétrico: empilhado não existe mais "lado que
       dá para a foto" e "lado que dá para a tela" — as duas bordas do
       texto agora dão para a tela, e as duas levam o mesmo --gutter */
    margin-inline: 0;
    padding-inline: var(--gutter);
  }
  .duo__foto {
    /* ordem: a foto sempre primeiro, nas três faixas. Empilhado, o texto
       abaixo da imagem é a leitura que o celular já espera de qualquer
       banda editorial. */
    order: -1;
    min-height: 0;
    aspect-ratio: 16 / 10;
  }
  .duo__texto {
    padding: var(--sp-7) var(--gutter);
    max-width: 720px;
  }
  .duo--dir .duo__texto,
  .duo--esq .duo__texto { padding-inline: var(--gutter); }

  /* o espelho desempilha em coluna única. O posicionamento explícito da
     grade precisa sair JUNTO: com `grid-column`/`grid-row` fixos, as ações
     continuariam presas à linha 2 da coluna 1 e apareceriam ao lado (ou por
     cima) do corpo. Voltando ao fluxo automático, a ordem passa a ser a do
     HTML — cabeça, corpo, ações —, que é a leitura certa aqui: título,
     argumento, conclusão e só então o que fazer a respeito. */
  .espelho__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }
  .espelho__cabeca,
  .espelho__corpo,
  .espelho__acoes { grid-column: auto; grid-row: auto; }
  .espelho__corpo { margin-top: var(--sp-5); max-width: 720px; }
  .espelho__acoes { margin-top: var(--sp-6); }
}

@media (max-width: 768px) {
  .sh {
    /* mesma lógica do desktop, um degrau abaixo: em celular o header do
       navegador já come uma fatia da altura útil, então o teto cai junto */
    height: clamp(420px, 60vh, 560px);
  }
  .sh__inner { padding-bottom: var(--sp-6); }

  .manif,
  .espelho { padding-block: var(--sp-7); }
  /* o manifesto abre centrado (é a missão, e centrado ela lê como
     declaração), mas em 320 a 400px o corpo quebra em muitas linhas curtas
     e cada uma nasce num ponto diferente. Só o CORPO vira à esquerda: o
     título segue centrado, herdando o alinhamento do container.
     O .espelho não aparece aqui porque já é todo alinhado à esquerda. */
  .manif__texto { text-align: left; }

  .duo__foto { aspect-ratio: 4 / 3; }
  .duo__texto { padding-block: var(--sp-6); }
  .duo__cta { width: 100%; }
  .duo__cta .btn { width: 100%; }

  .espelho__acoes {
    /* o botão ocupa a largura da tela, como todo CTA do site em celular; o
       link em mono continua alinhado à esquerda, e por isso o stretch é do
       .btn e não do bloco */
    gap: var(--sp-3);
    align-self: stretch;
  }
  .espelho__acoes .btn { width: 100%; }
}