/* ============================================================
   ARX Cyber — Página Quem Somos (nó 115-51)
   Medidas do Figma (servidor desktop). Reusa civitas.css/sections.css.
   ============================================================ */

/* ---- Seção 1 — Hero ---- */
.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: 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; }
.arx-btn--solid { background-image: none; background-color: var(--arx-blue); }
.arx-btn--solid::before { content: none; }
.arx-btn--solid:hover { filter: brightness(1.1); }

/* ---- Seção 2 / 6 — Sobre + Visão (texto + imagem) ---- */
.qs-about { padding-top: 95px; }
.qs-about__grid { position: relative; min-height: 407px; }
.qs-about .arx-eyebrow { position: absolute; left: 0; top: 19px; }
.qs-about__title {
  position: absolute; left: 0; top: 69px;
  font-size: 40px; line-height: 46px; font-weight: var(--fw-regular); color: var(--arx-white);
}
.qs-about__body { position: absolute; left: 0; top: 138px; width: 568px; font-size: 20px; line-height: 22.4px; color: var(--arx-white); }
.qs-about__body p + p { margin-top: 22px; }
.qs-about__body .destaque { font-size: 32px; line-height: 32px; font-weight: var(--fw-bold); color: var(--arx-blue); }
.qs-about__media { position: absolute; border-radius: 12px; overflow: visible; }
.qs-about__media::before {   /* glow da marca borrada atrás da foto */
  content: ""; position: absolute; inset: -12% -17%;
  background: radial-gradient(52% 55% at 50% 50%, rgba(21,116,255,.42), rgba(21,116,255,.12) 55%, transparent 78%);
  pointer-events: none;
}
.qs-about__media img { position: relative; width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.qs-about--s2 .qs-about__media { left: 744px; top: 19px; width: 524px; height: 384px; }
.qs-about--s6 .qs-about__media { left: 710px; top: 21px; width: 524px; height: 431px; }
.qs-about--s6 { padding-top: 127px; }
.qs-about--s6 .qs-about__grid { min-height: 462px; }
.qs-about--s6 .qs-about__body { width: 524px; }

/* ---- Seção 3 — Frases de transição (scrollytelling) ----
   Sem JS/reduced-motion: lista estática empilhada.
   Com JS (.qs-lines--motion): seção fixa e as frases se substituem no scroll. */
.qs-lines { padding-top: 135px; text-align: center; overflow: visible; }
.qs-lines p {
  font-size: 96px; line-height: 120px; font-weight: var(--fw-bold);
  letter-spacing: -0.68px; color: var(--arx-white); white-space: nowrap;
}
.qs-line { margin-top: 23px; }
.qs-line:first-child { margin-top: 0; }
.qs-lines b { font-weight: var(--fw-bold); color: var(--arx-blue); }
.qs-lines__last {
  margin-top: 30px; display: flex; align-items: center; justify-content: center; gap: 24px;
}
.qs-lines__last p { margin-top: 0; }

.qs-lines--motion { padding-top: 0; }
/* a pista media 100vh + 4 telas de 65vh, uma por linha de construção.
   Elas saíram e ficou só o anúncio do rebrand: a pista encolhe junto, senão
   a pessoa rola quatro telas para ver uma frase parada. */
.qs-lines--motion .qs-lines__track { position: relative; height: calc(100vh + 65vh); }
.qs-lines--motion .qs-lines__sticky {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.qs-lines--motion .qs-line {
  position: absolute; left: 0; right: 0; margin-top: 0;
  opacity: 0; transform: translateY(70px) scale(.96);
  transition: opacity .55s var(--arx-ease), transform .55s var(--arx-ease);
  will-change: opacity, transform;
  pointer-events: none;
}
.qs-lines--motion .qs-line.is-on { opacity: 1; transform: none; }
.qs-lines--motion .qs-line.is-past { opacity: 0; transform: translateY(-70px) scale(.98); }
.qs-logo-horiz { position: relative; width: 592px; height: 108px; flex: none; }
.qs-logo-horiz img { position: absolute; max-width: none; }
.qs-logo-horiz .l1 { left: 3.21%; top: 17.58%; width: 52.52%; }
.qs-logo-horiz .l2 { left: 59.49%; top: 43%; width: 37.3%; }

/* ---- Seção 4 — Trajetória + números ---- */
.qs-s4 { padding-top: 182px; }
.qs-traj {
  position: relative; height: 424px;
  border: 1px solid #1574ff; border-radius: 20px; overflow: hidden;
  background: #0a0d14 url("../img/missoes/chip-bg.png");
  background-size: cover; background-position: 50% 0;
}
.qs-traj .arx-eyebrow { position: absolute; left: 102px; top: 41px; }
.qs-traj__title { position: absolute; left: 103px; top: 76px; font-size: 40px; line-height: 46px; font-weight: var(--fw-regular); color: var(--arx-white); }
.qs-traj__body { position: absolute; left: 102px; top: 141px; width: 1104px; font-size: 20px; line-height: 22.4px; color: var(--arx-white); }
.qs-traj__body p + p { margin-top: 22px; }
.qs-traj__glow {
  position: absolute; left: 780px; top: 0; width: 720px; height: 424px; pointer-events: none;
  background: radial-gradient(50% 42% at 50% 88%, rgba(21,116,255,.4), rgba(21,116,255,.12) 55%, transparent 80%);
}
.qs-nums { position: relative; margin-top: 96px; min-height: 297px; }
.qs-nums .arx-eyebrow { position: absolute; left: 4px; top: 33px; }
.qs-nums__title { position: absolute; left: 0; top: 74px; font-size: 40px; line-height: 46px; font-weight: var(--fw-regular); color: var(--arx-white); }
.qs-nums__note { position: absolute; left: 1px; top: 144px; width: 324px; font-size: 20px; line-height: 22.4px; color: var(--arx-white); }
.qs-nums__row { position: absolute; left: 564px; display: flex; gap: 64px; }
.qs-nums__row--1 { top: 0; }
.qs-nums__row--2 { top: 147px; }
.qs-stat b {
  display: block; font-size: 64px; line-height: 76.8px; letter-spacing: -1px;
  font-weight: var(--fw-regular); color: var(--arx-white); white-space: nowrap;
}
.qs-stat span {
  display: block; margin-top: 16px;
  font-size: 20px; line-height: 28.8px; letter-spacing: -0.2px; color: #acabb2;
}

/* ---- Seção 5 — Linha do tempo (navy) ---- */
.qs-tl { position: relative; margin-top: 155px; background: transparent; }
.qs-tl__bg { position: absolute; left: 0; right: 0; top: 54px; bottom: 0; background: #151542; }
.qs-tl__tab {
  position: absolute; top: 55px; left: 50%; transform: translate(-50%, -100%);
  width: 374px; height: 54px; pointer-events: none; display: block;
}
.qs-tl__inner { position: relative; z-index: 1; padding-top: 131px; padding-bottom: 100px; }
.qs-tl__head { text-align: center; }
.qs-tl__head .arx-eyebrow { display: block; }
.qs-tl__title { margin-top: 15px; font-size: 40px; line-height: 46px; font-weight: var(--fw-regular); color: var(--arx-white); }
.qs-tl__wrap { position: relative; margin-top: 73px; height: 2145px; }
.qs-tl__spine {
  position: absolute; left: calc(50% - 10.1px); top: 0; width: 24px;
  display: flex; flex-direction: column; align-items: center;
}
.qs-tl__dot { width: 24px; height: 24px; border-radius: 50%; background: #1574ff; flex: none; }
.qs-tl__seg { width: 1px; background: #1574ff; flex: none; }
.qs-item { position: absolute; width: 450px; }

/* animação da timeline (ativada pelo JS via .qs-tl--anim no wrap) */
.qs-tl__progress {
  position: absolute; left: calc(50% + 1.9px); top: 0; transform: translateX(-50%);
  width: 2px; height: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, #6aa6ff, #1574ff);
  border-radius: 2px; box-shadow: 0 0 14px rgba(21,116,255,.55);
  display: none;
}
.qs-tl--anim .qs-tl__progress { display: block; }
.qs-tl--anim .qs-tl__spine { position: absolute; z-index: 2; }
.qs-tl--anim .qs-tl__dot {
  background: #22315c;
  transition: background .45s var(--arx-ease), box-shadow .45s var(--arx-ease), transform .45s var(--arx-ease);
}
.qs-tl--anim .qs-tl__dot.is-lit {
  background: #1574ff;
  box-shadow: 0 0 18px 3px rgba(21,116,255,.55);
  transform: scale(1.08);
}
.qs-tl--anim .qs-tl__seg { background: rgba(21,116,255,.16); }
.qs-tl--anim .qs-item {
  opacity: 0;
  transition: opacity .7s var(--arx-ease), transform .7s var(--arx-ease);
  will-change: opacity, transform;
}
.qs-tl--anim .qs-item--r { transform: translateX(70px); }
.qs-tl--anim .qs-item--l { transform: translateX(-70px); }
.qs-tl--anim .qs-item.is-in { opacity: 1; transform: none; }
.qs-item--r { left: calc(50% + 29.4px); }
.qs-item--l { left: calc(50% - 481px); }
.qs-item h3 { font-size: 24px; line-height: 31.2px; font-weight: var(--fw-semibold); color: var(--arx-white); }
.qs-item p { margin-top: 14px; width: 464px; max-width: 100%; font-size: 16px; line-height: 24px; color: #eeeeee; }

/* ---- Responsivo mínimo ---- */
@media (max-width: 1440px) {
  .qs-lines p { font-size: 72px; line-height: 92px; }
  .qs-logo-horiz { width: 444px; height: 81px; }
}