.qs-hero { position: relative; height: 836px; overflow: hidden; background: #151515; }
.qs-hero__bg {
  position: absolute; inset: 0;
  background: url("../img/arx/hero-bg.jpg") center top / cover no-repeat;
}

.qs-hero__grad {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(4,6,11,.78) 0%, rgba(4,6,11,.45) 46%, rgba(4,6,11,0) 100%)
      top / 100% 200px no-repeat,
    var(--arx-grad-hero-overlay);
}
.qs-hero__inner { position: relative; z-index: 2; height: 100%; }
.qs-hero__title {
  position: absolute; left: var(--arx-gutter); top: 304px; width: 713px;
  font-size: 64px; line-height: 68px; letter-spacing: -0.68px;
  font-weight: var(--fw-regular); color: var(--arx-white);
}
.qs-hero__title b { font-weight: var(--fw-bold); color: var(--arx-blue); }
.qs-hero__sub {
  position: absolute; left: var(--arx-gutter); top: 469px; width: 577px;
  font-size: 20px; line-height: 22.4px; color: var(--arx-white);
}
.qs-hero__actions { position: absolute; left: var(--arx-gutter); top: 584px; display: flex; gap: 16px; }

/* ── Intro: painel de stats ────────────────────────────────────────────────
   Split assimétrico dentro de um painel: à esquerda a tese e três provas
   numéricas separadas por filetes; à direita o parágrafo que sustenta. O
   painel isola a seção do fundo da página e dá a ela um chão próprio. */

.qs-intro { padding-top: 104px; }
.qs-intro__panel {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  align-items: center;
  gap: 40px 72px;
  padding: 56px 60px;
  border-radius: var(--r-small-xxl);
  /* mesma linguagem de box do resto do site (cvf__metricas / cvd__detalhe):
     tint translúcido sobre o fundo da página + halo azul de canto, borda azul fina */
  background:
    radial-gradient(760px 260px at 10% 0%, rgba(21,116,255,.12), transparent 70%),
    rgba(255,255,255,.018);
}

/* O corpo do título vem da classe .arx-section-title, a mesma da home
   (44/52 semibold), inclusive na escala móvel. Aqui só a folga e a quebra.
   O destaque herda o peso do título e só troca a cor, como .arx-missao__title b. */
.qs-intro__title { margin-top: 16px; text-wrap: balance; }
.qs-intro__title b { color: var(--arx-blue); font-weight: inherit; }

/* As provas repetem o par título/descrição dos cards da home (.mj-card__titulo
   e .mj-card__desc): branco semibold em cima, cinza-70 embaixo, ícone azul sem
   caixa e o filete branco a 10% separando as colunas. */
.qs-stats {
  margin-top: 36px; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
}
.qs-stat {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  column-gap: 10px; row-gap: 5px; align-items: center;
  padding-left: 18px; border-left: 1px solid rgba(255,255,255,.10);
}
.qs-stat:first-child { padding-left: 0; border-left: 0; }
.qs-stat__icon {
  grid-row: 1 / 3; align-self: center;
  width: 38px; height: 38px; flex: none; color: var(--arx-blue);
}
.qs-stat__icon svg { width: 100%; height: 100%; }
.qs-stat__value {
  font-size: 21px; line-height: 27px;
  font-weight: var(--fw-semibold); color: var(--arx-white);
  font-variant-numeric: tabular-nums;
}
.qs-stat__label { font-size: 15px; line-height: 22px; color: var(--arx-grey-70); }

.qs-intro__aside {
  font-size: 18px; line-height: 30px; color: var(--arx-grey-90); max-width: 54ch;
}
.qs-intro__aside p + p { margin-top: 22px; }

/* ── Linha do tempo: nós-ícone sobre um trilho ─────────────────────────────
   A cronologia corre no eixo em que o leitor espera tempo. Cada marco é um
   ícone que pousa no trilho por um pino; abaixo dele, ano, título e uma linha
   de contexto. Oito cabem lado a lado, divisões 8 → 4 → 2, e, no estreito,
   o trilho gira para a vertical e a fileira vira lista. */

/* A linha do tempo fecha a página: o respiro até o rodapé é o mesmo das outras
   seções finais do site (.art-corpo, .evt-corpo, .cs-corpo, .bu-lista). */
.qs-tl { padding-block: 40px 96px; }
.qs-tl__panel {
  position: relative; overflow: hidden;
  padding: 64px 56px 74px;
  border-radius: var(--r-small-xxl);
  /* mesmo box do site, com o halo centrado no topo para acompanhar o header centralizado */
  background:
    radial-gradient(900px 320px at 50% 0%, rgba(21,116,255,.12), transparent 70%),
    rgba(255,255,255,.018);
}
/* Borda estática, na versão dos boxes das páginas de missão (.mo-card /
   .mo-ncard): azul no canto de entrada, apagando para cinza logo em seguida.
   O feixe girando saiu, numa moldura do tamanho de uma seção ele vira ruído
   de fundo, diferente de um cartão pequeno onde acende no hover. */
.qs-intro__panel::before,
.qs-tl__panel::before {
  background: linear-gradient(131.4deg, #1574ff 0%, rgba(112,112,112,.2) 24%);
}
.qs-intro__panel::after,
.qs-tl__panel::after { content: none; }

.qs-tl__head { text-align: center; max-width: 820px; margin: 0 auto; }
.qs-tl__head .arx-eyebrow { display: block; }
/* idem: o corpo vem de .arx-section-title */
.qs-tl__title { margin-top: 12px; text-wrap: balance; }
.qs-tl__title b { color: var(--arx-blue); font-weight: inherit; }
/* mesmo corpo do subtítulo de seção da home (.arx-missao__sub) */
.qs-tl__sub {
  margin-top: 20px; font-size: 18px; line-height: 25px; color: var(--arx-grey-90);
  text-wrap: balance;
}

.qs-tl__lista {
  --node: 88px; /* mesmo diâmetro do anel do Civitas na home */
  position: relative; margin: 66px 0 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: 18px;
}
/* Trilho: uma linha que passa pelos pinos, atrás dos nós. O azul a 28% é o
   mesmo filete que a régua desta seção já usava. */
.qs-tl__lista::before {
  content: ""; position: absolute; z-index: 0;
  top: calc(var(--node) + 44px); left: calc(100% / 16); right: calc(100% / 16); height: 1px;
  /* mesma leitura dos conectores do Civitas: azul-borda alto no miolo e um
     halo curto. A 28% de --arx-blue a linha desaparecia no fundo do painel. */
  background: linear-gradient(90deg,
    rgba(85,154,255,.20) 0%, rgba(85,154,255,.62) 7%,
    rgba(85,154,255,.62) 93%, rgba(85,154,255,.20) 100%);
  box-shadow: 0 0 8px rgba(21,116,255,.45);
}

.qs-marco {
  position: relative; z-index: 1;
  display: grid; justify-items: center; text-align: center; align-content: start;
}
/* O nó é o mesmo anel dos módulos do Civitas na home (.cvh-mod__anel):
   fundo escuro translúcido com brilho no topo, fio de 1px em gradiente azul
   feito por máscara, um segundo anel bem fraco a 9px, e o ícone em azul. */
.qs-marco__node {
  position: relative;
  width: var(--node); height: var(--node); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--arx-blue);
  background:
    radial-gradient(72% 72% at 50% 18%, rgba(255,255,255,.055), transparent 62%),
    rgba(24,24,24,.2);
}
.qs-marco__node::after {
  content: ""; position: absolute; inset: -9px; border-radius: 50%;
  border: 1px solid rgba(21,116,255,.13); pointer-events: none;
}
.qs-marco__node::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; padding: 1px;
  background: linear-gradient(100deg, var(--arx-blue) 0%, var(--arx-blue) 35%,
    color-mix(in srgb, var(--arx-blue) 30%, #181818) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.qs-marco__node svg { width: 52px; height: 52px; }


/* a haste começa abaixo do anel externo, não por baixo dele */
.qs-marco__eixo { position: relative; display: block; width: 100%; height: 34px; margin-top: 10px; }
.qs-marco__eixo::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0;
  width: 1px; background: rgba(85,154,255,.55);
  box-shadow: 0 0 6px rgba(21,116,255,.5);
}
.qs-marco__ponto {
  position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%);
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--arx-blue);
  box-shadow: 0 0 16px 2px rgba(21,116,255,.5);
  transition: background .4s var(--arx-ease), box-shadow .4s var(--arx-ease);
}

/* Texto do marco na mesma escala dos módulos do Civitas: o ano ocupa o papel
   do rótulo (.cvh-mod__nome, azul, semibold, caixa alta), o título fica no
   branco semibold um passo acima, e o contexto repete .cvh-mod__desc. */
.qs-marco__ano {
  margin-top: 14px;
  font-size: 13px; line-height: 1.15; letter-spacing: .5px; text-transform: uppercase;
  font-weight: var(--fw-semibold); color: var(--arx-blue);
  font-variant-numeric: tabular-nums;
}
/* Duas linhas reservadas: um título que quebra não pode empurrar só a sua
   descrição e desalinhar a fileira inteira. */
.qs-marco__titulo {
  margin-top: 6px; max-width: 17ch; min-height: 42px;
  font-size: 15px; line-height: 21px; font-weight: var(--fw-semibold);
  color: var(--arx-white); text-wrap: balance;
}
.qs-marco__texto {
  margin-top: 6px; max-width: 22ch;
  font-size: 11.5px; line-height: 16px; color: rgba(255,255,255,.62);
  text-wrap: balance;
}

/* ── O momento: a fileira entra como uma onda ──────────────────────────────
   Um gesto só, na mesma curva e no mesmo tempo do reveal padrão do site
   (opacity + translateY, --arx-ease): cada marco entra logo atrás do anterior,
   com sobreposição longa, e o trilho é desenhado por baixo da fileira.

   A tentativa anterior quebrava cada marco em cinco animações, anel, arco,
   haste, pino e texto e o arco ainda piscava e sumia no fim. Peça demais em
   movimento não lê como suavidade, lê como pisca-pisca; e enquanto os atrasos
   longos seguravam tudo em opacity 0, a seção parecia vazia. */

html.arx-anim .qs-tl__lista { --t: 70ms; }

/* O container só dispara o gesto. Sem isto o [data-reveal] padrão faria a
   lista inteira desaparecer e voltar por cima da entrada dos marcos, duas
   animações concorrentes no mesmo subárvore. */
html.arx-anim .qs-tl__lista[data-reveal] { opacity: 1; transform: none; transition: none; }

/* Pré-estado sob arx-anim: sem JS a história aparece inteira e parada. */
html.arx-anim .qs-marco { opacity: 0; transform: translateY(16px); }
html.arx-anim .qs-tl__lista::before { transform: scaleX(0); transform-origin: left center; }
html.arx-anim .qs-marco__eixo::before { transform: scaleY(0); transform-origin: top center; }

/* O marco entra inteiro, de uma vez, anel, pino e texto vêm juntos. */
html.arx-anim .qs-tl__lista.is-revealed .qs-marco {
  animation: qs-entra .9s var(--arx-ease) both;
  animation-delay: calc(var(--i, 0) * var(--t));
}
html.arx-anim .qs-tl__lista.is-revealed::before {
  animation: qs-trilho 1.1s var(--arx-ease) both;
}
/* a haste desce e emenda o anel no trilho, o gesto que liga o ícone ao ano */
html.arx-anim .qs-tl__lista.is-revealed .qs-marco__eixo::before {
  animation: qs-haste .55s var(--arx-ease) both;
  animation-delay: calc(var(--i, 0) * var(--t) + 240ms);
}

@keyframes qs-entra  { from { opacity: 0; transform: translateY(16px); }
                       to   { opacity: 1; transform: none; } }
@keyframes qs-trilho { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes qs-haste  { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes qs-haste-v { from { transform: translateX(-50%) scaleY(0); }
                        to   { transform: translateX(-50%) scaleY(1); } }

@media (prefers-reduced-motion: reduce) {
  html.arx-anim .qs-marco { opacity: 1; transform: none; }
  html.arx-anim .qs-tl__lista::before { transform: scaleX(1); }
  html.arx-anim .qs-marco__eixo::before { transform: scaleY(1); }
  html.arx-anim .qs-tl__lista.is-revealed .qs-marco,
  html.arx-anim .qs-tl__lista.is-revealed .qs-marco__eixo::before,
  html.arx-anim .qs-tl__lista.is-revealed::before { animation: none; }
}

/* ── Tablet: oito viram quatro por duas fileiras ──────────────────────────── */
@media (max-width: 1024px) {
  .qs-intro__panel { padding: 44px 40px; gap: 32px 48px; }
  .qs-tl__panel { padding: 52px 36px 60px; }
  .qs-tl__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 46px; }
  .qs-tl__lista::before { display: none; }

  /* o anel encolhe no mesmo ponto e para as mesmas medidas do Civitas */
  .qs-tl__lista { --node: 68px; }
  .qs-marco__node svg { width: 42px; height: 42px; }
  .qs-marco__node::after { inset: -6px; }
  .qs-marco__ano { font-size: 12px; }
}

/* ── Estreito: painel de stats empilha, trilho gira para a vertical ─────────
   O título e o texto acompanham a escala móvel do sistema (27/33 e 16/22),
   a mesma que mobile.css aplica a .qs-tl__title e .qs-about__body. */
@media (max-width: 767px) {
  .qs-intro { padding-top: 72px; }
  /* o corpo do título já escala por .arx-section-title (27/33 em mobile.css) */
  .qs-intro__title { margin-top: 12px; }
  .qs-intro__aside { font-size: 16px; line-height: 22px; }
  .qs-tl__sub { margin-top: 16px; font-size: 16px; line-height: 22px; }
  .qs-intro__panel { grid-template-columns: 1fr; padding: 36px 24px; gap: 30px; }
  .qs-stats { grid-template-columns: 1fr; gap: 14px; }
  .qs-stat { padding: 14px 0 0; }
  .qs-stat:first-child { padding-top: 0; }
  .qs-stat + .qs-stat { border-left: 0; border-top: 1px solid rgba(255,255,255,.10); }

  .qs-tl { padding-bottom: 64px; }
  .qs-tl__panel { padding: 44px 22px 48px; }
  /* especificidade extra para vencer o row-gap de mobile.css e manter o
     trilho vertical contínuo, sem furos entre os marcos */
  .qs-tl__panel .qs-tl__lista {
    --node: 68px; /* mesmo anel reduzido do Civitas no mobile */
    grid-template-columns: 1fr; column-gap: 0; row-gap: 0; margin-top: 44px;
  }
  .qs-marco {
    grid-template-columns: var(--node) 1fr; column-gap: 20px;
    justify-items: start; text-align: left; padding-bottom: 26px;
  }
  .qs-marco:last-child { padding-bottom: 0; }
  .qs-marco__node { grid-row: 1 / 5; align-self: start; }
  /* trilho vertical descendo pelo centro dos nós */
  .qs-marco::before {
    content: ""; position: absolute; left: calc(var(--node) / 2); top: calc(var(--node) + 8px); bottom: -1px;
    width: 1px; transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(85,154,255,.55), rgba(85,154,255,.18));
  }
  .qs-marco:last-child::before { display: none; }
  .qs-marco__eixo { display: none; }
  html.arx-anim .qs-marco::before { transform: translateX(-50%) scaleY(0); transform-origin: top center; }
  html.arx-anim .qs-tl__lista.is-revealed .qs-marco::before {
    animation: qs-haste-v .6s var(--arx-ease) both;
    animation-delay: calc(var(--i, 0) * var(--t) + 240ms);
  }
  @media (prefers-reduced-motion: reduce) {
    html.arx-anim .qs-marco::before { transform: translateX(-50%) scaleY(1); }
    html.arx-anim .qs-tl__lista.is-revealed .qs-marco::before { animation: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    html.arx-anim .qs-marco::before { transform: translateX(-50%) scaleY(1); }
    html.arx-anim .qs-tl__lista.is-revealed .qs-marco::before { animation: none; }
  }
  /* o corpo do ano no estreito vem de mobile.css (26/30) */
  .qs-marco__ano { grid-column: 2; margin-top: 2px; }
  /* na lista vertical cada marco tem a sua própria linha: nada a alinhar */
  .qs-marco__titulo { grid-column: 2; max-width: none; margin-top: 6px; min-height: 0; }
  .qs-marco__texto { grid-column: 2; max-width: 46ch; }
}

                        to   { transform: translateX(-50%) scaleY(1); } }