/* =============================================================================
   TAKA DESIGN — 3ª DOBRA: SOBRE A TAKA DESIGN
   -----------------------------------------------------------------------------
   Carregue DEPOIS de passage.css: este arquivo consome --narrative-axis e a
   variante .spectrum-rule--v declaradas lá, e substitui o antigo bloco
   ".about / .about__thread" que apenas reservava a seção.

   Tudo aqui vem do Design System PRISMA. Nenhum token novo de cor, tipografia
   ou motion é criado:
     · .spectrum-rule / .spectrum-rule--v  → o fio narrativo e a régua da dobra
     · .badge badge-pill badge-indigo      → o cabeçalho numerado documentado
                                             pelo DS ("0X · Nome da seção")
     · .t-h2 / .t-body-lg / .t-caption / .t-label / .t-h4 / .t-body-sm
     · .text-spectrum                      → o destaque de "IA de verdade"
     · .card / .card-neon / .spotlight     → os três diferenciais
     · .aurora                             → a atmosfera que toda dobra carrega
     · --ds-void / --ds-r-* / --ds-ease    → superfície, raios e curva

   A COMPOSIÇÃO
   ------------
   Editorial assimétrico em duas colunas, 1.31fr : 1fr (≈ 57 / 43) — vizinho do
   55/45 do briefing, mas o número exato foi decidido por medição, não por
   gosto.

   --narrative-axis é a coordenada por onde a spectrum-rule desce da Barra de
   Confiança: o divisor entre o 2º e o 3º dado da faixa, medido em passage.js.
   Como a última coluna daquela faixa tem largura `auto`, o eixo não é uma
   fração fixa da janela — medido no Chrome, ele anda de 53,6% (1024) a 56,2%
   (1920), voltando a 54,6% em 2560, onde o container satura em 1700px.

   A proporção das colunas e a largura da calha foram então escolhidas juntas
   para que esse intervalo inteiro caiba DENTRO do vão entre o texto e a
   fotografia. Medida a folga do fio até a borda mais próxima da calha, o pior
   caso é 14px (1024) e 28px (1920/2560) — em nenhuma largura o fio encosta
   numa coluna.

   É isso que torna a solução robusta: o fio não precisa coincidir com borda
   nenhuma, só precisa estar no vão. A linha não foi encaixada no layout; o
   layout foi construído em volta dela.

   AS CAMADAS (z-index dentro de .about)
   -------------------------------------
     0  .about__ambient   profundidade cromática estática + .aurora contida
     1  .about__spine     o fio vertical, o nó e o segmento que deriva dele
     1  .about__rule      a régua que fecha o capítulo e abre os diferenciais
     2  .about__frame     editorial + fotografia (cobre a cauda do segmento)
     2  .about__diffs     os três cartões

   DOIS ESTADOS
   ------------
   estático   sem GSAP, sem rede ou com prefers-reduced-motion: about.js sai
              sem tocar no DOM e tudo abaixo fica visível, completo e no lugar.
   ao vivo    about.js confirma GSAP + movimento permitido, escreve os estados
              iniciais e conduz a entrada pelo scroll.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Trilho da seção
   -----------------------------------------------------------------------------
   .about é a própria grade: linhas explícitas em vez de padding, porque o fio
   vertical precisa nascer exatamente em y = 0 (a costura com a borda inferior
   do palco da passagem) e terminar exatamente na régua. Com padding-top o fio
   começaria depois da costura e a linha "teleportaria".

     1  var(--about-lead)   o vão que a linha atravessa antes do conteúdo
     2  auto                frame: editorial + fotografia
     3  var(--about-mid)    respiro
     4  auto                a régua espectral
     5  auto                diferenciais
   -------------------------------------------------------------------------- */
.about {
  --about-lead: clamp(4.5rem, 11vh, 8.5rem);
  /* Respiro entre o frame e a régua. Reduzido de 8vh/6rem: com a moldura da
     fotografia ~18% menor (ver .about__media), o frame já termina mais cedo —
     manter o respiro no tamanho antigo teria devolvido como "vazio antes da
     régua" o espaço que acabou de ser cortado do retrato. Ainda é folga
     deliberada, só não generosa a mais. */
  --about-mid: clamp(2.75rem, 5.5vh, 4.5rem);
  --about-tail: clamp(6rem, 16vh, 12rem);

  /* A calha entre as colunas. É ela que hospeda o fio, então precisa ser larga
     o bastante para absorver a oscilação de --narrative-axis entre
     breakpoints. O piso de 4rem não é arredondamento: é o que devolve folga no
     ponto mais apertado medido (1024–1100px, onde o eixo chega mais perto da
     coluna de texto — ver a nota de composição no topo). */
  --about-channel: clamp(4rem, 5vw, 6rem);

  /* A fotografia desce em relação ao texto. Não é enfeite: é o que faz a
     coluna direita entrar em cena DEPOIS do bloco editorial, dando motivo
     compositivo para a ordem de revelação (eyebrow → H2 → corpo → foto). */
  --about-media-drop: clamp(2rem, 9vh, 6.5rem);

  /* Onde o segmento horizontal deriva do fio e encontra a fotografia —
     medido a partir do topo da imagem, ≈ 20% da altura dela. */
  --about-link-inset: clamp(4.5rem, 13vh, 10rem);

  /* Alcance do segmento: a calha inteira mais a entrada por baixo da moldura,
     que a própria fotografia cobre ao ser revelada — ver a nota de tamanho em
     .about__media logo abaixo. Como a moldura agora é 82% da coluna e fica
     ancorada na DIREITA (justify-self: end), a borda esquerda dela recuou:
     antes ficava colada à calha, agora fica ~18% da largura da coluna mais
     adiante. clamp(5rem, 9vw, 8.5rem) foi medido para cobrir essa distância
     com folga em qualquer breakpoint (pior caso ~58px em 1024px, ~102px em
     1920/2560px) sem ultrapassar a borda direita da própria moldura — a régua
     nunca aparece solta no vão, e o excesso vira cauda escondida sob a foto
     quando ela abre, exatamente como antes. */
  --about-link-reach: calc(var(--about-channel) + clamp(5rem, 9vw, 8.5rem));

  position: relative;
  isolation: isolate;
  overflow: clip;                    /* contém o sangramento da .aurora */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows:
    var(--about-lead)
    auto
    var(--about-mid)
    auto
    auto;
  padding-bottom: var(--about-tail);
  background: var(--ds-void);
}

/* -----------------------------------------------------------------------------
   Atmosfera
   -----------------------------------------------------------------------------
   A Barra de Confiança é a dobra mais silenciosa do site. O Sobre recupera um
   passo de profundidade cromática — não de cor. Mesma gramática de
   .trust__ambient: campos radiais gigantes, alfa entre .02 e .05, terminados
   em `rgba(cor, 0)` (e não `transparent`) para nenhum navegador passar por um
   cinza no meio da interpolação. Nada aqui anima.

   A concentração fica do lado da fotografia, como pede a composição: é a foto
   que precisa de ar em volta, não a tipografia.
   -------------------------------------------------------------------------- */
.about__ambient {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    /* 1. o eixo narrativo — elipse alta acompanhando o percurso do fio */
    radial-gradient(26% 58% at var(--narrative-axis) 34%,
      rgba(99, 102, 241, .05), rgba(99, 102, 241, 0) 74%),

    /* 2. o campo da fotografia, um pouco à direita e acima do centro dela */
    radial-gradient(42% 46% at 78% 30%,
      rgba(168, 85, 247, .038), rgba(168, 85, 247, 0) 76%),

    /* 3. contraponto frio embaixo à esquerda, para a dobra não pender toda
          para o lado quente e o bloco de texto não ficar num vazio chapado */
    radial-gradient(48% 38% at 12% 76%,
      rgba(34, 211, 238, .024), rgba(34, 211, 238, 0) 78%);

  /* --- Zona de transição vinda da 2ª dobra --------------------------------
     Espelho exato da máscara de .trust__ambient (passage.css). Lá a atmosfera
     da Barra de Confiança se dissipa nos últimos 24vh antes da costura; aqui a
     do Sobre só começa a existir 24vh DEPOIS dela. As duas chegam a zero na
     emenda, então não há degrau: o que o usuário atravessa é uma troca gradual
     de atmosfera ao longo de ~48vh, sem uma linha onde uma seção termina.

     A máscara é a peça-chave para a .aurora, que é filha desta camada: ela
     nasce em `top: -6%` e era fatiada a fio pelo `overflow: clip` de .about
     exatamente na costura — medido, um degrau de 1,19 L no desktop. Sendo
     filha, ela herda esta máscara e passa a entrar esmaecida, sem borda.

     Nenhuma cor nova é introduzida: a máscara só atenua o que já existia.
     O fio narrativo não é afetado — .about__spine é irmão desta camada. */
  -webkit-mask-image: linear-gradient(180deg,
      transparent 0, #000 24vh, #000 100%);
          mask-image: linear-gradient(180deg,
      transparent 0, #000 24vh, #000 100%);
}

/* "Toda dobra segue o mesmo esqueleto: régua espectral, atmosfera animada ao
   fundo, cabeçalho e conteúdo" — design_system.html. Aqui a .aurora entra
   contida e baixa, ancorada na região da fotografia: é o "glow spectrum muito
   difuso" pedido para a foto, resolvido com o componente que já existe em vez
   de um filtro novo sobre a imagem. */
.about__aurora {
  inset: -6% -12% auto 34%;
  height: clamp(22rem, 52vh, 38rem);
  opacity: .13;
  filter: blur(100px);
}

/* -----------------------------------------------------------------------------
   O fio narrativo
   -----------------------------------------------------------------------------
   A mesma .spectrum-rule que abriu a Barra de Confiança e desceu dela, agora
   como eixo estrutural desta dobra. Ela nasce em y = 0 — a borda inferior do
   palco da passagem é a borda superior desta seção, e a descida foi cortada
   exatamente ali — e termina na régua que abre os diferenciais.

   `margin-left` em vez de `left`: o item ocupa a coluna inteira da grade e a
   porcentagem resolve contra a largura de .about, que é a mesma largura de
   .passage. É a mesma coordenada, sem recalcular nada.

   O `translate` fica no invólucro e o GSAP anima `scaleY` no filho: assim a
   centragem permanece do CSS e nenhuma matriz é disputada (mesma regra que
   .trust__sep já segue em passage.css).
   -------------------------------------------------------------------------- */
.about__spine {
  grid-row: 1 / 4;
  grid-column: 1;
  position: relative;
  z-index: 1;
  justify-self: start;
  width: 1px;
  margin-left: var(--narrative-axis);
  translate: -50% 0;
  pointer-events: none;
}

/* Sem máscara: em cima o fio encosta na costura, embaixo entrega o lugar para
   a régua. Uma ponta esmaecida em qualquer um dos dois diria "acabou". */
.about__spine-line {
  height: 100%;
  transform-origin: 50% 0%;
  -webkit-mask-image: none;
          mask-image: none;
}

/* --- O nó ------------------------------------------------------------------
   A junta por onde o fio vira em direção à fotografia. É o .trust__node da
   dobra anterior girado 90°: um trecho curto da própria régua, um degrau acima
   em opacidade, com o halo índigo que o DS usa nos badges. Duas camadas pelo
   mesmo motivo de lá — a máscara do componente recortaria o brilho se ele
   morasse no mesmo elemento. */
.about__node {
  --about-node-h: clamp(2.25rem, 5vh, 3.5rem);
  position: absolute;
  left: 0;
  top: calc(var(--about-lead) + var(--about-media-drop) + var(--about-link-inset));
  width: 1px;
  height: var(--about-node-h);
  margin-top: calc(var(--about-node-h) / -2);
  translate: -50% 0;
  pointer-events: none;
}
.about__node > .spectrum-rule--v {
  opacity: 1;
  box-shadow: 0 0 18px -4px rgba(99, 102, 241, .85);
}
.about__node::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.5rem;
  height: 320%;
  translate: -50% -50%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(99, 102, 241, .3), transparent 100%);
}

/* --- O segmento que deriva -------------------------------------------------
   Atravessa a calha e entra por baixo da moldura da fotografia. A cauda que
   sobra é coberta pela própria imagem quando ela é revelada — é isso que faz a
   estrutura parecer ter aberto a foto, e não uma linha parada ao lado dela. */
.about__link {
  position: absolute;
  left: 0;
  top: calc(var(--about-lead) + var(--about-media-drop) + var(--about-link-inset));
  width: var(--about-link-reach);
  height: 1px;
  transform-origin: 0% 50%;
  pointer-events: none;
}
.about__link > .spectrum-rule {
  opacity: 1;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 72%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 0%, #000 72%, transparent 100%);
}

/* -----------------------------------------------------------------------------
   Frame editorial — 59 / 41
   -------------------------------------------------------------------------- */
.about__frame {
  grid-row: 2;
  grid-column: 1;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.31fr) minmax(0, 1fr);
  column-gap: var(--about-channel);
  align-items: start;
}

/* --- Coluna esquerda: o conteúdo ------------------------------------------- */
.about__editorial {
  /* O texto para antes da calha: a última linha nunca encosta no fio. */
  padding-right: clamp(0rem, 2vw, 2.5rem);
}

/* BUG MEDIDO entre 1024px e 1116px — a 2ª linha do H2 ("Velocidade de quem
   usa") quebra em duas, virando um H2 de 4 linhas em vez de 3.
   -----------------------------------------------------------------------
   O layout de duas colunas só liga em 1024px (ver `max-width: 1023px`
   mais abaixo, que empilha tudo antes disso). Bem no primeiro pixel em que
   liga, a coluna de texto despenca para ~463px — a fonte (.t-h2, clamp de
   4vw) e a coluna encolhem juntas ao longo do breakpoint fluido, mas não na
   mesma proporção, e a linha mais longa do H2 fica sem espaço por uma
   margem pequena: medido via getBoundingClientRect + probe de texto (mesma
   fonte/peso/letter-spacing, white-space: nowrap), o déficit é 10px em
   1024px e cai — não perfeitamente linear, por causa de arredondamento de
   subpixel na renderização da fonte — até 0px por volta de 1117-1120px;
   fora da janela coberta abaixo (com folga até 1119px) a linha sempre
   coube inteira.

   NÃO é --about-channel quem cede espaço aqui: seu piso de 4rem é
   deliberado — protege exatamente esta mesma faixa (1024–1100px) contra o
   fio/nó do .about__spine encostando na coluna de texto (ver a nota em
   --about-channel acima). Reduzi-lo reabriria aquele bug para fechar este.
   A correção também não mexe na proporção 1.31fr/1fr do frame (afetaria o
   tamanho/posição da foto, calculados em cima dela).

   A CORREÇÃO tira 12px (folga sobre os 10px medidos) só do padding-right
   desta coluna, só nesta janela — o resto do respiro entre texto e calha
   (mínimo ~8px no ponto mais apertado da faixa) continua de pé, então a
   última linha ainda não encosta no fio. Fora de 1024–1119px o padding
   volta ao clamp normal, sem nenhuma mudança. */
@media (min-width: 1024px) and (max-width: 1119px) {
  .about__editorial {
    padding-right: calc(clamp(0rem, 2vw, 2.5rem) - 12px);
  }
}

.about__eyebrow {
  margin-bottom: clamp(1rem, 2.1vh, 1.5rem);
}

.about__headline {
  margin-bottom: clamp(1.375rem, 3.1vh, 2.25rem);
  color: #fff;
}

/* Revelação por linha, no mesmo princípio de .split-line do DS (invólucro com
   overflow, filho em bloco). Classe própria em vez do componente porque
   .split-line > span carrega `animation: line-up … both`, que venceria o
   inline style do GSAP — aqui quem conduz é a timeline.

   O padding compensa as descendentes ("Design de agência.") que o
   overflow: hidden cortaria; a margem negativa devolve o espaço ao fluxo. */
.about__line {
  display: block;
  overflow: hidden;
  padding-bottom: .18em;
  margin-bottom: -.18em;
}
/* `balance` age só quando a linha não cabe e precisa quebrar sozinha — no
   desktop as três cabem inteiras e a propriedade é inerte. Em telas estreitas
   ela evita o órfão: "Velocidade de quem usa" quebrava como
   "Velocidade de quem / usa", e passa a quebrar como "Velocidade de / quem
   usa". Preferido a reduzir o corpo abaixo do mínimo de .t-h2 — a escala do
   Design System continua intacta. */
.about__line > span {
  display: block;
  text-wrap: balance;
}

/* Destaque de "IA de verdade": .text-spectrum, o tratamento que o DS já usa
   para refratar o espectro dentro de uma palavra. Nenhuma cor nova. O <em>
   guarda a ênfase semântica; o itálico não faz parte do desenho. */
.about__accent { font-style: normal; }

/* Parágrafo institucional. Largura travada em 54ch — a recomendação do DS é
   "60 caracteres por linha para não competir com o título", e 54 deixa a
   coluna respirando dentro dos 59% sem virar bloco maciço. */
.about__body {
  display: grid;
  gap: clamp(.875rem, 1.8vh, 1.25rem);
  max-width: 54ch;
  color: rgba(255, 255, 255, .62);
  text-wrap: pretty;
}

/* --- Coluna direita: a fotografia ------------------------------------------
   `width: 82%` + `justify-self: end` encolhem o BLOCO inteiro (moldura e
   legenda juntas, como uma unidade — nenhum dos dois filhos precisa de regra
   própria) mantendo-o rente à margem direita da página, exatamente onde
   estava quando ocupava a coluna inteira.

   Por que a coluna, e não só a moldura: o container do retrato inclui a
   legenda, e as duas peças precisam encolher e realinhar juntas para a
   legenda continuar começando sob a borda esquerda da foto — trocar só a
   largura da moldura deslocaria a legenda para fora de alinhamento.

   `justify-self: end`, e não `margin-left: auto`: mesma escolha que
   `.about__stage` já faz no empilhado (linha 613), e evita reintroduzir o bug
   de alinhamento à direita corrigido numa rodada anterior — sem isto, um item
   de grade com largura explícita perde o `stretch` padrão e cai para
   `justify-self: start`, o que abriria um vão à direita, contra a margem da
   página, exatamente o oposto do que se quer aqui. */
.about__media {
  grid-column: 2;
  position: relative;
  width: 82%;
  justify-self: end;
  margin: var(--about-media-drop) 0 0;
  display: grid;
  /* Reduzido de 1.7vh: a legenda lida sozinha, sem nada abaixo dela, pedia
     mais proximidade da moldura para se ler como parte da mesma peça — não
     um rótulo solto no rodapé da coluna. */
  gap: clamp(.5rem, 1vh, .75rem);
}

/* O glow espectral da fotografia. Fica ATRÁS da moldura (não sobre a imagem):
   a foto continua sendo a foto, e o que a integra à linguagem da Taka é a luz
   em volta dela. Radial em vez de `filter: blur`, pelo mesmo motivo do halo do
   nó da dobra anterior — custo.

   O padrão de --about-halo é 1: sem JS o glow simplesmente existe. Quando
   about.js assume, ele parte de 0 e sobe depois que a foto já foi revelada —
   a fotografia primeiro, a luz em volta dela depois. */
.about__media::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -14% -12% -8%;
  pointer-events: none;
  opacity: var(--about-halo, 1);
  background:
    radial-gradient(50% 42% at 36% 20%, rgba(99, 102, 241, .17), rgba(99, 102, 241, 0) 72%),
    radial-gradient(46% 40% at 76% 74%, rgba(168, 85, 247, .13), rgba(168, 85, 247, 0) 74%);
}

/* A moldura. É ela que é recortada no reveal — borda, superfície e imagem
   entram juntas, então a coluna fica de fato vazia até o fio chegar.
   aspect-ratio reserva a caixa desde o primeiro frame: nenhum layout shift
   quando a fotografia real for colocada. */
.about__stage {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  /* Teto de altura, só para telas baixas. Sem ele, o 4:5 da coluna dava 84vh
     num viewport de 900px e a fotografia passava a dominar a tela inteira — o
     oposto do equilíbrio pedido. Não precisa de um teto em rem junto: a altura
     é derivada da largura da coluna, que já satura quando o container atinge
     1700px, então ela não tem como crescer sem limite.

     Na prática o teto quase nunca morde — medido, a proporção sai exatamente
     4:5 em 1024, 1280, 1440, 1920 e 2560, e só abre para 1:1,19 em janelas
     largas e baixas (1600 × 900), que é justamente o caso a proteger.

     `width: 100%` NÃO é redundante: sem largura explícita, o Chrome resolve o
     teto preservando a proporção e encolhendo a CAIXA — medido, a fotografia
     perdia de 27 a 50px na direita e deixava de alinhar com a margem do
     container, quebrando o eixo direito da página. Com a largura fixada, o
     teto corta só a altura, e o recorte fica por conta de
     object-fit/object-position — que é onde ele deve ficar. */
  width: 100%;
  max-height: 80vh;
  border-radius: var(--ds-r-lg);
  border: 1px solid rgba(255, 255, 255, .08);
  background: var(--ds-surface);
}

.about__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 50% 50%, e não um valor "adivinhado": assets/img/gabriel-maranhao.jpg já
     chega recortado (script em Python/Pillow) com o rosto centralizado no
     eixo horizontal — object-fit só precisa cobrir a pequena folga entre o
     recorte de origem (0,85 de proporção, de propósito, com margem) e a
     caixa real 4:5. Nada de posição fixa arbitrária que quebraria se a foto
     um dia for trocada por outra com enquadramento diferente. */
  object-position: 50% 50%;
  /* O DS trata fotografia com dessaturação leve para o texto nunca depender da
     imagem ("toda foto recebe saturate(.65)"); aqui a foto é protagonista e
     não carrega texto por cima, então a correção é mínima. */
  filter: saturate(.92) contrast(1.02);
}

/* Microparalaxe do cursor: about.js escreve --px/--py (limitado a 5px).
   Propriedade `translate` autônoma de propósito — o GSAP escreve `transform`
   (scale) no mesmo elemento durante o reveal, e as duas não se atropelam. */
.about__img {
  translate: var(--px, 0px) var(--py, 0px);
  transition: translate .6s var(--ds-ease);
}

/* --- GC (gerador de caracteres) ---------------------------------------------
   Nome e cargo SOBRE a própria fotografia, no canto inferior — o mesmo
   vocabulário de um rodapé de telejornal, não uma legenda abaixo da moldura.
   Irmão de .about__stage dentro do <figure> (figcaption só pode ser o
   primeiro ou o último filho — HTML válido), posicionado por cima dela via
   absolute; os cantos arredondados são redeclarados aqui porque, sendo
   irmão e não filho de .about__stage, não herda o recorte do overflow:hidden
   da moldura. */
.about__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .3rem;
  padding: clamp(2.5rem, 8vh, 4rem) clamp(1.25rem, 3vw, 1.75rem) clamp(1.125rem, 3vh, 1.5rem);
  border-radius: 0 0 var(--ds-r-lg) var(--ds-r-lg);
  /* Escurece só a base da foto — o suficiente pro texto branco nunca depender
     de a fotografia por trás dele ser clara ali, sem apagar a imagem inteira.
     Altura do gradiente maior que o padding: a transição precisa terminar
     ANTES do rosto, nunca cortando em cima dele. */
  background: linear-gradient(0deg,
      rgba(2, 2, 5, .85) 0%, rgba(2, 2, 5, .6) 40%, rgba(2, 2, 5, 0) 100%);
}
.about__caption::before {
  content: '';
  width: 1.75rem;
  height: 2px;
  margin-bottom: .15rem;
  background: var(--ds-spectrum);
  background-size: 300% 100%;
  animation: spectrum-slide 11s linear infinite;
  opacity: .9;
}
.about__caption-name {
  margin: 0;
  color: #fff;
}
.about__caption-role {
  margin: 0;
  color: rgba(255, 255, 255, .58);
}

/* -----------------------------------------------------------------------------
   A régua e os diferenciais
   -----------------------------------------------------------------------------
   O fio vertical termina exatamente onde esta régua começa, e ela se abre a
   partir daquele ponto (transform-origin no eixo narrativo): a linha não some,
   ela vira 90° outra vez — a mesma troca de função que a lâmina fez na Barra
   de Confiança, ao contrário.
   -------------------------------------------------------------------------- */
.about__rule {
  grid-row: 4;
  grid-column: 1;
  position: relative;
  z-index: 1;
  margin: 0;
  border: 0;
  transform-origin: var(--narrative-axis) 50%;
}

.about__diffs {
  grid-row: 5;
  grid-column: 1;
  position: relative;
  z-index: 2;
  padding-top: clamp(2.5rem, 6vh, 4.5rem);
}

.about__diffs-title {
  margin-bottom: clamp(1.25rem, 3vh, 2rem);
  color: rgba(255, 255, 255, .3);
}

.about__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.6vw, 1.5rem);
}

/* .card do DS, com o padding documentado (28px). Nada de ícone: o set Solar do
   DS chega por Iconify, que não é dependência deste site — no lugar dele fica
   o índice, que é a mesma linguagem numerada do eyebrow e do próprio DS ("a
   numeração existe porque a leitura é sequencial"). */
.about__card {
  /* .card do DS descansa em .025/.06 (pensado para um grid denso, onde vários
     cartões vizinhos já dão presença ao bloco). Aqui os três são o único
     conteúdo depois da régua — precisam se anunciar como o início de um
     capítulo novo, não fundir na mesma penumbra do frame acima. O aumento é
     só de contraste (mesmo branco, mais presente); nem tamanho nem o estado
     de :hover do DS são tocados. */
  background: rgba(255, 255, 255, .045);
  border-color: rgba(255, 255, 255, .09);
  padding: 1.75rem;
  display: grid;
  align-content: start;
}
.about__card > :not(.about__card-glow) { position: relative; z-index: 1; }

.about__card-index {
  margin-bottom: 1.25rem;
  color: rgba(255, 255, 255, .3);
}
.about__card-title {
  margin-bottom: .625rem;
  color: #fff;
  text-wrap: balance;
}
.about__card-text {
  color: rgba(255, 255, 255, .42);
  text-wrap: pretty;
}

/* Cartão do meio — .card-neon.
   A variante existe no DS e, em repouso, é idêntica a .card: a linha espectral
   do topo só acende no hover. Então ela não tem como competir com a headline
   nem com a fotografia. O que marca o cartão parado é o blob de acento que o
   próprio DS documenta para a variante (`-top-6 -right-6 w-32 h-32
   bg-indigo-500/25 blur-[60px]`), aqui a 22% em vez de 25%. Elemento real e
   não pseudo porque .spotlight já ocupa o ::before do cartão e .card-neon o
   ::after. */
.about__card-glow {
  position: absolute;
  z-index: 0;
  top: -1.5rem;
  right: -1.5rem;
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  background: rgba(99, 102, 241, .22);
  filter: blur(60px);
  pointer-events: none;
}

/* -----------------------------------------------------------------------------
   Responsivo
   -----------------------------------------------------------------------------
   Empilhado abaixo de 1024px. A ordem de leitura passa a ser eyebrow → H2 →
   corpo → fotografia → diferenciais, e o fio muda de papel: em vez de correr
   pela calha (que deixou de existir), ele desce o vão do topo e vira na régua
   logo acima do conteúdo — a mesma lâmina que abre a dobra na Barra de
   Confiança. As linhas da grade são reordenadas; o DOM não muda.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .about {
    --about-lead: clamp(3.5rem, 9vh, 6rem);
    --about-media-drop: 0px;
    grid-template-rows:
      var(--about-lead)   /* 1 — o vão que a linha atravessa */
      auto                /* 2 — a régua, agora abrindo a dobra */
      auto                /* 3 — frame empilhado */
      var(--about-mid)    /* 4 — respiro */
      auto;               /* 5 — diferenciais */
  }

  .about__spine { grid-row: 1 / 2; }
  .about__rule  { grid-row: 2; }

  /* O nó e o segmento pertencem à composição em duas colunas. Empilhado, a
     fotografia não está à direita do fio — está abaixo dele —, então quem
     conduz o reveal passa a ser a régua, com um recorte de cima para baixo
     (about.js troca a direção do clip-path). */
  .about__node,
  .about__link { display: none; }

  .about__frame {
    grid-row: 3;
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(2.25rem, 6vh, 3.5rem);
    padding-top: clamp(2.5rem, 6vh, 4rem);
  }
  .about__media {
    grid-column: 1;
    /* Reverte o encolhimento/alinhamento-à-direita do desktop (que existe só
       para equilibrar a foto com a coluna de texto ao lado). Empilhado não há
       coluna de texto ao lado para equilibrar, e a composição já aprovada
       aqui é centralizada — ver .about__stage abaixo. */
    width: auto;
    justify-self: stretch;
  }
  .about__editorial { padding-right: 0; }

  /* Retrato ocupando boa parte da largura, mas ainda com margem: cheio de
     ponta a ponta ele viraria banner, não fotografia.

     `width: min()` + `justify-self`, e NÃO `max-width` + `margin-inline: auto`:
     a moldura é item de grade e uma margem automática desliga o `stretch` do
     alinhamento, fazendo a caixa cair para o tamanho do conteúdo. Como o único
     filho é absoluto (fora de fluxo), esse tamanho é zero — medido, a moldura
     colapsava para 3px de altura em tablet e mobile. */
  .about__stage {
    /* 56vh = 70vh (max-height acima) × 4/5 — sem este terceiro limite, em
       telas baixas (ex. 1023×600) o max-height passa a ser o único fator
       restritivo, a largura fica presa em 32rem e a moldura 4:5 vira uma
       caixa larga e baixa (medido: proporção ~1,22 em vez de 0,8). */
    width: min(100%, 32rem, 56vh);
    justify-self: center;
    max-height: 70vh;
  }

  /* Empilhado, .about__stage fica centralizado na coluna (justify-self:
     center acima) — o GC acompanha, centralizado também, em vez de nascer
     preso à esquerda com espaço vazio de sobra dos dois lados. */
  .about__caption { align-items: center; text-align: center; }

  .about__aurora { inset: auto -12% -4% -12%; opacity: .1; }

  .about__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 719px) {
  .about { --about-tail: clamp(4rem, 12vh, 8rem); }
  .about__cards { grid-template-columns: minmax(0, 1fr); }
  .about__card { padding: 1.5rem; }
  .about__body { max-width: none; }
  .about__stage { max-width: none; border-radius: var(--ds-r-md); }
}

/* -----------------------------------------------------------------------------
   Movimento reduzido
   -----------------------------------------------------------------------------
   about.js já não monta timeline nenhuma neste modo (gsap.matchMedia trata a
   condição), então nada abaixo depende de animação para existir. Estas regras
   são a rede de segurança: o conteúdo fica inteiro, no lugar, imediatamente.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .about__img { translate: none; transition: none; }
  .about__caption::before,
  .about__spine-line,
  .about__rule { animation: none; }
}

/* -----------------------------------------------------------------------------
   Sinalização de camada
   -----------------------------------------------------------------------------
   Mesma política de passage.css: `will-change` só enquanto a dobra está de
   fato em curso (about.js liga e desliga .about-active no <html>).
   -------------------------------------------------------------------------- */
.about-active .about__spine-line,
.about-active .about__link,
.about-active .about__node { will-change: transform, opacity; }

.about-active .about__stage { will-change: clip-path; }
.about-active .about__img { will-change: transform; }
.about-active .about__line > span { will-change: transform, opacity; }