/* ============================================================================
   SITE 02 · «ORBIT» — PÁGINA INSTITUCIONAL (about.html)
   Autor: Agente de página · Institucional · segunda rodada (reescrito do zero)
   ----------------------------------------------------------------------------
   Escopo exclusivo: `.page-about` / prefixo `.ab-`.
   Nenhum hex literal (tudo via var(--…) de tokens.css). Nenhum `!important`.
   Nenhuma classe de outra página. Mobile-first · 640 / 900 / 1200.

   REGRA DE FORMA DESTE SITE: nenhum canto vivo em card, foto, input ou botão.
   Tudo aqui usa --radius-sm / --radius / --radius-lg / --radius-pill.

   SUMÁRIO
     01 · Hero — foto em arco + timbre
     02 · 01 História — trilha curva com órbitas
     03 · 02 Missão — citação que quebra a coluna
     04 · 03 Métricas — faixa que atravessa a fronteira de seção
     05 · 04 Princípios — índice sticky + cartões de tamanhos variados
     06 · 05 Regulação — painel de placeholders no bloco escuro
     07 · 06 Segurança de fundos — registro numerado
     08 · 07 Transparência — três documentos + mockup
     09 · 08 Suporte — painel de contato
     10 · CTA final
   ========================================================================== */


/* ==========================================================================
   §01 · HERO
   ====================================================================== */

.page-about .ab-hero__crumb {
  margin-block-end: var(--s-7);
}

/* folga reservada para a deriva do parallax (ADENDO: decorativo não encosta) */
.page-about .ab-hero__media {
  position: relative;
  padding-block: var(--s-4);
}

/* Ponto focal — caixa 3/4 sobre foto 3/2: entram só 50% da largura (medido:
   800 dos 1600 px). A dupla vive em x 1050–1430 da imagem, então o 45% do
   catálogo (janela 360–1160) cortava os dois fora do quadro — sobrava uma
   manga. 85% abre a janela em 680–1480: a dupla inteira, com o panorama da
   janela à esquerda e sem a coluna escura da direita. */
.page-about .ab-hero__media .photo img { object-position: 85% 45%; }

/* O anel de quina vive FORA da <figure>: `.photo` recorta o próprio conteúdo
   (overflow hidden) para manter a máscara curva, e recortaria o anel junto. */
.page-about .ab-hero__ring {
  color: var(--accent);
  opacity: 1;
}

@media (max-width: 639.98px) {
  .page-about .ab-hero__ring {
    inset-block-start: var(--s-1);
    inset-inline-end: var(--s-1);
  }
}

@media (min-width: 900px) {
  .page-about .ab-hero__media { padding-block: var(--s-8); }
  .page-about .ab-hero__grid  { align-items: start; }
}


/* ==========================================================================
   §02 · 01 HISTÓRIA — TRILHA CURVA
   --------------------------------------------------------------------------
   A trilha é UM arco limpo atrás dos selos de órbita. Os cartões ficam ACIMA
   da curva (z-index), então nenhum traço cruza uma linha de texto.
   ====================================================================== */

.page-about .ab-story__lead {
  max-width: 27rem;
}

.page-about .ab-trail {
  position: relative;
  margin-block-start: var(--gap);
}

/* rail vertical discreto no mobile — a trilha continua legível sem a curva */
.page-about .ab-trail::before {
  content: '';
  position: absolute;
  inset-block: 1.6rem;
  inset-inline-start: 1.55rem;
  width: 2px;
  border-radius: var(--radius-pill);
  background-color: var(--line-2);
  opacity: .35;
  z-index: var(--z-timbre);
}

.page-about .ab-trail__line { display: none; }

.page-about .ab-trail__items {
  position: relative;
  z-index: var(--z-base);
  display: grid;
  gap: var(--gap-lg);
}

.page-about .ab-trail__item {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  min-width: 0;
}

/* o selo é a conta no fio: o halo da cor de fundo recorta a curva */
.page-about .ab-trail__mark {
  align-self: flex-start;
  box-shadow: 0 0 0 6px var(--bg);
}

.page-about .ab-step {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: clamp(var(--s-6), 2.4vw, var(--s-8));
  background-color: var(--surface);
  border: var(--border) solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  transition:
    transform var(--dur) var(--ease-soft),
    box-shadow var(--dur) var(--ease-soft);
}

.page-about .ab-trail__item:hover .ab-step {
  transform: translateY(-3px);
  box-shadow: var(--shadow-3);
}

.page-about .ab-step__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--accent);
}

.page-about .ab-step__n { color: var(--fg-faint); }

.page-about .ab-step__body { color: var(--fg-muted); }

.page-about .ab-story__note { margin-block-start: var(--s-9); }

@media (min-width: 900px) {
  .page-about .ab-trail { margin-block-start: var(--gap-lg); }

  .page-about .ab-trail::before { display: none; }

  .page-about .ab-trail__line {
    display: block;
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: clamp(4.5rem, 8vw, 7rem);
    z-index: var(--z-timbre);
    color: var(--accent);
    opacity: .38;
    pointer-events: none;
  }

  .page-about .ab-trail__line svg {
    width: 100%;
    height: 100%;
    fill: none;
  }

  .page-about .ab-trail__curve { stroke-linecap: round; }

  .page-about .ab-trail__items {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap);
    align-items: start;
  }

  /* os marcos pousam sobre a curva: as pontas descem, o centro sobe */
  .page-about .ab-trail__item--side { margin-block-start: var(--s-7); }
  .page-about .ab-trail__item--peak { margin-block-start: 0; }
}


/* ==========================================================================
   §03 · 02 MISSÃO — CITAÇÃO QUE QUEBRA A COLUNA
   --------------------------------------------------------------------------
   Quebra de grade intencional da página: a citação avança sobre a calha do
   split, sem alcançar a coluna da foto (a calha é --gap-lg, o avanço é --s-8).
   ====================================================================== */

.page-about .ab-mission__photo {
  box-shadow: var(--shadow-2);
}

/* Ponto focal — as torres ocupam a metade inferior; o céu limpo fica em cima. */
.page-about .ab-mission__photo img { object-position: 50% 45%; }

.page-about .ab-quote {
  background-color: var(--surface-2);
  border-radius: var(--radius-lg);
  padding-inline-end: var(--s-7);
}

@media (min-width: 1200px) {
  .page-about .ab-quote {
    margin-inline-start: calc(var(--s-8) * -1);
    padding-inline-start: calc(var(--s-9) + var(--s-8));
  }
}


/* ==========================================================================
   §04 · 03 MÉTRICAS — FAIXA QUE ATRAVESSA A FRONTEIRA DE SEÇÃO
   --------------------------------------------------------------------------
   Os cartões são pintados com --surface-tint (azul-céu): lidos tanto sobre o
   branco da seção anterior quanto sobre o azul-névoa desta. A seção anterior
   recebe folga extra para que nada encoste.
   ====================================================================== */

.page-about .ab-metrics__band {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.page-about .ab-metrics__band > * { min-width: 0; }

.page-about .ab-stat {
  padding: clamp(var(--s-5), 2.2vw, var(--s-8));
  background-color: var(--surface-tint);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}

.page-about .ab-stat .stat__value { letter-spacing: -.04em; }

.page-about .ab-metrics__head {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  max-width: 44rem;
  margin-block-start: var(--gap-lg);
}

@media (min-width: 900px) {
  .page-about .ab-metrics__band {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-block-start: calc((var(--sec-tight) + var(--s-9)) * -1);
  }

  /* folga reservada no fluxo para a faixa que sobe */
  .page-about .ab-mission { padding-block-end: calc(var(--sec) + var(--s-10)); }
}


/* ==========================================================================
   §05 · 04 PRINCÍPIOS — ÍNDICE STICKY + CARTÕES DE TAMANHOS VARIADOS
   --------------------------------------------------------------------------
   Recurso característico deste site nesta página: o índice lateral que marca
   o princípio em vista (site.js · [data-section-nav]). Os seis cartões NÃO
   têm o mesmo tamanho: 4/2 · 2/4 · 3/3 na grade de seis colunas.
   ====================================================================== */

.page-about .ab-prin__aside { min-width: 0; }

.page-about .ab-prin__grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: minmax(0, 1fr);
}

.page-about .ab-prin__cell {
  display: flex;
  min-width: 0;
}

.page-about .ab-prin__card {
  flex: 1 1 auto;
  gap: var(--s-4);
}

/* selo sobre cartão tingido: o preenchimento do selo inverte para não sumir */
.page-about .ab-prin__seal--onTint { background-color: var(--surface); }

/* Agrupamento variado: o cartão de abertura e o de acesso global ocupam a
   linha inteira; os outros quatro dividem-se em pares. A coluna da direita do
   split tem ~780px — dividi-la em três ou mais partes espremeria o texto. */
@media (min-width: 640px) {
  .page-about .ab-prin__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-about .ab-prin__cell--wide { grid-column: span 2; }
}


/* ==========================================================================
   §06 · 05 REGULAÇÃO — PAINEL DE PLACEHOLDERS NO BLOCO ESCURO
   --------------------------------------------------------------------------
   Dentro de .tone-deep os tokens semânticos já invertem sozinhos:
   --surface vira --deep-surface e --fg vira --paper (9.98 : 1, medido).
   ====================================================================== */

.page-about .ab-reg__photo { box-shadow: none; }

/* Ponto focal — este é o corte mais duro da página: acima de 900px a foto
   estica junto com a coluna de texto e sobra menos da metade da imagem. O
   contra-plongée tem o assunto na parte alta, daí 38%. */
.page-about .ab-reg__photo img { object-position: 50% 38%; }

/* A coluna de texto é bem mais alta que a foto em 3/4. Em vez de deixar meia
   tela vazia ao lado, a imagem acompanha a altura da coluna (o recorte vertical
   combina com a torre em contra-plongée). */
@media (min-width: 900px) {
  .page-about .ab-reg__photo {
    align-self: stretch;
    aspect-ratio: auto;
    min-height: 32rem;
  }
}

.page-about .ab-reg__panel {
  padding: clamp(var(--s-6), 2.4vw, var(--s-8));
  background-color: var(--surface);
  border: var(--border) solid var(--line);
  border-radius: var(--radius-lg);
}

.page-about .ab-reg__panelhead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-block-end: var(--s-6);
}

.page-about .ab-reg__fields {
  display: grid;
  gap: var(--s-5);
}

@media (min-width: 640px) {
  .page-about .ab-reg__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.page-about .ab-reg__field { min-width: 0; }

.page-about .ab-reg__field dt {
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.page-about .ab-reg__field dd {
  margin-block-start: var(--s-2);
  font-family: var(--ff-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--fg);
  overflow-wrap: anywhere;
}


/* ==========================================================================
   §07 · 06 SEGURANÇA DE FUNDOS — REGISTRO NUMERADO
   --------------------------------------------------------------------------
   Linhas, não cartões: layout diferente do bloco de princípios. O separador
   é um filete recuado; o hover pinta uma superfície arredondada por baixo.
   ====================================================================== */

.page-about .ab-safety__lead { max-width: 26rem; }

.page-about .ab-safety__list {
  display: flex;
  flex-direction: column;
}

.page-about .ab-safety__row {
  position: relative;
  display: grid;
  gap: var(--s-4);
  align-items: start;
  padding: var(--s-6) var(--s-5);
  border-radius: var(--radius-lg);
  transition: background-color var(--dur) var(--ease-soft);
}

.page-about .ab-safety__row > * { min-width: 0; }

.page-about .ab-safety__row:hover { background-color: var(--surface-2); }

.page-about .ab-safety__row + .ab-safety__row::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: var(--s-5);
  height: 1px;
  border-radius: var(--radius-pill);
  background-color: var(--line);
}

.page-about .ab-safety__mark {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
}

.page-about .ab-safety__n {
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-meta);
  color: var(--fg-faint);
}

.page-about .ab-safety__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.page-about .ab-safety__tag { justify-self: start; }

@media (min-width: 900px) {
  .page-about .ab-safety__row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--gap);
    align-items: center;
    padding-inline: var(--s-6);
  }

  .page-about .ab-safety__row + .ab-safety__row::before { inset-inline: var(--s-6); }

  .page-about .ab-safety__tag { justify-self: end; }
}


/* ==========================================================================
   §08 · 07 TRANSPARÊNCIA — TRÊS DOCUMENTOS + MOCKUP
   ====================================================================== */

.page-about .ab-trans__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

.page-about .ab-trans__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-4);
  align-items: start;
}

.page-about .ab-trans__item > * { min-width: 0; }

.page-about .ab-trans__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-pill);
  background-color: var(--surface);
  border: var(--border) solid var(--line);
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-meta);
  color: var(--accent);
}

.page-about .ab-trans__item h3 { margin-block-end: var(--s-2); }

.page-about .ab-trans__mock {
  display: flex;
  flex-direction: column;
  min-width: 0;
}


/* ==========================================================================
   §09 · 08 SUPORTE
   ====================================================================== */

/* título do marcador em linha própria: sem isso o rótulo cola no corpo */
.page-about .ab-support .bullets__title { display: block; }

.page-about .ab-support__panel { gap: var(--s-5); }

.page-about .ab-support__facts {
  display: grid;
  gap: var(--s-4);
}

.page-about .ab-support__facts > * { min-width: 0; }

.page-about .ab-support__facts dt {
  font-family: var(--ff-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  color: var(--fg-faint);
}

.page-about .ab-support__facts dd {
  margin-block-start: var(--s-1);
  font-weight: var(--fw-bold);
  color: var(--fg);
}

@media (min-width: 640px) {
  .page-about .ab-support__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .page-about .ab-support__facts { grid-template-columns: minmax(0, 1fr); }
}


/* ==========================================================================
   §10 · CTA FINAL
   ====================================================================== */

.page-about .ab-cta__inner {
  gap: var(--s-5);
  max-width: 42rem;
}

.page-about .ab-cta__inner .cluster { margin-block-start: var(--s-3); }