/* ============================================================
   HelpBots — layout por seção

   Padrões reutilizáveis definidos aqui:
   · "quote"  — bloco centralizado, largura cheia, aspas verdes (.quote)
   · "itens"  — num + h3 + body em colunas fluidas (.trio / .trio__item)
   ============================================================ */

/* ============================================================
   1 · HERO
   ============================================================ */
.hero {
  padding-inline: var(--gutter);
  padding-block: calc(var(--nav-h) + 3rem) var(--section-y);
  display: grid;
  gap: clamp(2.5rem, 1rem + 5vw, 5rem);
  align-content: center;
}

@media (min-width: 940px) {
  .hero {
    min-height: 100vh;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(3rem, 1rem + 5vw, 6rem);
  }
}

.hero__copy { display: grid; gap: var(--stack); justify-items: start; }

/* cada linha do título é bloco: a quebra é estrutural, não depende
   da largura disponível — cada palavra da roleta abre uma linha */
.h1__line { display: block; }

/* roleta: crossfade da palavra. A largura é animada pelo JS palavra a
   palavra (travar na maior abriria um vão morto após as curtas). */
.roleta {
  display: inline-block;
  position: relative;
  vertical-align: baseline;
  color: var(--green);
  font-weight: 500;
}
.roleta__word { display: inline-block; white-space: nowrap; }

/* ── o box conversacional ─────────────────────────────────────
   Ordem visual, de cima para baixo: cabeçalho → plataformas →
   memória (todos os .md) → painel de conversa → input.
   Lida de baixo para cima é a ordem da narrativa: eu peço, a conversa
   sobe, a memória acende, as plataformas são acionadas.
   ─────────────────────────────────────────────────────────── */
.chat {
  position: relative;
  background: var(--bg);
  border: var(--hairline);
  border-radius: var(--r-ficha);
  box-shadow: var(--shadow-sm);
  padding: clamp(1.25rem, .7rem + 2vw, 1.75rem);
  display: grid;
  gap: 1.1rem;
  overflow: hidden;
}

.chat__vertical {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

.chat__band { display: grid; gap: .5rem; }
.chat__band-label { color: var(--muted-soft); }

/* ── plataformas ──────────────────────────────────────────────
   Estado neutro = cinza. `is-on` acende, `is-off` recua. Toda a
   transição de estado é de CSS: o JS só troca a classe, e é isso que
   deixa o acender legível mesmo com sete ciclos em sequência.
   ─────────────────────────────────────────────────────────── */
.tools { display: flex; flex-wrap: wrap; gap: .35rem; }

.tool {
  font-family: var(--mono);
  font-size: var(--fs-over-s);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--muted-soft);
  padding: .32rem .55rem;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  white-space: nowrap;
  transition: color var(--dur-2) var(--ease),
              background var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease),
              opacity var(--dur-2) var(--ease);
}
.tool.is-on {
  color: var(--green);
  background: var(--green-ghost);
  border-color: var(--green-fill);
}
.tool.is-off { opacity: .4; }

/* ── memória: o campo inteiro de arquivos ─────────────────────
   auto-fill e não auto-fit: a coluna mantém a largura mínima em vez
   de esticar, então os 25 nomes ficam em colunas alinhadas — 3 no
   hero em desktop, 2 no mobile, 1 abaixo de ~340px.

   9rem, e não a largura do nome mais longo: é o que garante duas
   colunas no mobile. Os dois ou três nomes que não couberem quebram
   sozinhos no hífen (que é onde o CSS já quebra por padrão), e uma
   quebra em "template-/resposta-incidente.md" lê bem melhor do que
   uma coluna única de 25 linhas ocupando meia tela.
   ─────────────────────────────────────────────────────────── */
.files {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr));
  gap: .3rem .75rem;
}

.file {
  display: flex;
  align-items: start;
  gap: .4rem;
  font-family: var(--mono);
  font-size: var(--fs-over-s);
  letter-spacing: .01em;
  line-height: 1.5;
  color: var(--muted-soft);
  transition: color var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}
/* a bolinha acompanha a PRIMEIRA linha do nome, não o centro do
   bloco — senão, num nome de duas linhas, ela flutua no meio */
.file__dot {
  flex: none;
  width: 5px; height: 5px;
  margin-top: .47em;
  border-radius: 50%;
  background: var(--border);
  transition: background var(--dur-2) var(--ease),
              box-shadow var(--dur-2) var(--ease);
}
.file.is-on { color: var(--ink-soft); font-weight: 500; }
.file.is-on .file__dot {
  background: var(--green);
  box-shadow: 0 0 0 3px var(--green-ghost);
}
.file.is-off { opacity: .4; }

/* ── painel de conversa ───────────────────────────────────────
   Altura travada + justify-content: flex-end: a mensagem nova entra
   embaixo e empurra as antigas para fora pelo topo. É o que dá o
   "sobe pra janela" sem o card inteiro crescer e sacudir o hero.
   ─────────────────────────────────────────────────────────── */
.chat__panel {
  position: relative;
  height: clamp(15rem, 9rem + 13vw, 17rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding: .75rem .9rem;
  background: var(--wash);
  border: var(--hairline);
  border-radius: var(--r-card);
}

/* Véu no topo: quando a conversa passa da altura do painel, a bolha
   mais antiga precisa DESAPARECER, e não ser serrada ao meio pela
   borda. O gradiente sobre o fundo (e não mask no elemento) preserva
   a borda e o canto arredondado do painel.
   O rgba explícito é o mesmo --wash com alfa 0: `transparent` vira
   preto transparente em parte dos motores e suja o degradê. */
.chat__panel::before {
  content: '';
  position: absolute;
  inset: 0 1px auto 1px;
  height: 2.25rem;
  border-radius: var(--r-card) var(--r-card) 0 0;
  background: linear-gradient(to bottom,
              var(--wash) 30%,
              rgba(248, 250, 252, 0) 100%);
  pointer-events: none;
  z-index: 1;
}

/* O respiro entre mensagens é padding-top DENTRO da .msg, e não gap
   do flex: a .msg é o elemento que o GSAP anima de height 0 para
   auto, e com gap sobraria um vão morto antes da mensagem existir. */
/* flex: none é obrigatório — sem ele, quando a conversa passa da
   altura do painel os itens ENCOLHEM em vez de transbordar, e as
   bolhas ficam esmagadas em vez de saírem pelo topo. */
.msg { display: flex; flex: none; padding-top: .5rem; }
.msg--user { justify-content: flex-end; }
.msg--ai   { justify-content: flex-start; }

.msg__bubble {
  display: block;
  max-width: 88%;
  padding: .5rem .75rem;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--ink-soft);
}
.msg--user .msg__bubble {
  background: var(--green-fill);
  border-radius: 14px 14px 4px 14px;
}
.msg--ai .msg__bubble {
  background: var(--bg);
  border: var(--hairline);
  border-radius: 14px 14px 14px 4px;
}

/* o entregável vive DENTRO da resposta, como link — nunca como card
   solto fora da conversa */
.msg__link {
  color: var(--green);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

/* "digitando…" — três pontos pulsando na vez da IA */
.msg__dots { display: flex; align-items: center; gap: 4px; padding: .7rem .8rem; }
.msg__dots span {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--green-soft);
  animation: msgDot 1.1s var(--ease) infinite;
}
.msg__dots span:nth-child(2) { animation-delay: .16s; }
.msg__dots span:nth-child(3) { animation-delay: .32s; }
@keyframes msgDot {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30%           { opacity: 1;  transform: translateY(-2px); }
}

/* ── input ────────────────────────────────────────────────── */
.chat__input {
  position: relative;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .55rem .55rem .55rem 1.05rem;
  background: var(--bg);
  border: var(--hairline);
  border-radius: var(--r-pill);
}
/* flex-basis 0 (e não auto): com base auto, o texto em nowrap entrega
   a largura inteira da frase como contribuição de min-content, e isso
   ESTICA a coluna do grid do .chat — o card passava a ter 344px de
   mínimo e vazava por dentro em telas estreitas. */
.chat__typed {
  flex: 1 1 0;
  min-width: 0;
  font-size: var(--fs-sm);
  color: var(--ink);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
}

/* Onde o hero empilha, a frase não cabe em uma linha: em vez de
   cortar o fim do que está sendo digitado, deixa quebrar — e reserva
   as duas linhas desde o começo, senão o input cresce no meio da
   digitação e empurra a página inteira a cada ciclo. */
@media (max-width: 939px) {
  .chat__typed { white-space: normal; min-height: 2.8em; }
}
.chat__caret {
  display: inline-block;
  width: 1px;
  height: 1.05em;
  vertical-align: -.16em;
  margin-left: 1px;
  background: var(--green);
}
/* só pisca quando o JS está no comando: sem animação, uma barra fixa */
html.js .chat__caret { animation: caret 1.06s steps(1) infinite; }
@keyframes caret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  html.js .chat__caret { animation: none; }
}

.chat__send {
  flex: none;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--green-fill);
  color: var(--ink-soft);
  transition: background var(--dur) var(--ease);
}
.chat__send:hover { background: var(--green-soft); color: var(--bg); }

/* ============================================================
   PADRÃO "QUOTE" — centralizado, largura cheia
   Usado nas seções 2, 3, 5 e 6.
   ============================================================ */
/* display: block, NÃO grid. Num container grid todo filho inline-block
   vira item próprio — era o que jogava o ∞ para uma linha sozinha, no
   meio da frase. O espaçamento vem do lobotomized owl. */
.quote {
  display: block;
  margin-inline: auto;
  text-align: center;
  max-width: 100%;
}
.quote > * + * { margin-top: 1.1rem; }

/* Nível 3 da escala. O itálico é só do blockquote: marca fala de
   terceiro. Frase autoral em bloco centralizado usa .quote__body. */
.quote__text {
  font-size: var(--fs-quote);
  line-height: 1.3;
  letter-spacing: -.015em;
  color: var(--muted);
}
blockquote.quote__text { font-style: italic; }
.quote__text--ink { color: var(--ink); }

/* mesmo bloco centralizado, em texto normal (nível 4): a medida de
   leitura entra aqui porque texto corrido a 100% da tela não se lê */
.quote__body {
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--muted);
  max-width: 62ch;
  margin-inline: auto;
}
.quote__body--ink { color: var(--ink); }

/* Uma linha só, em texto normal: a própria fonte é o hyperlink — não
   existe "nome da fonte" e depois "endereço". Nível 4 da escala: a
   fonte é crédito de leitura, não metadado apagado. */
.quote__src {
  font-size: var(--fs-body);
  line-height: 1.5;
}
.quote__src a {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  overflow-wrap: anywhere;
  transition: opacity var(--dur) var(--ease);
}
.quote__src a:hover { opacity: .7; }

/* ============================================================
   PADRÃO "INTRO" — rótulo + texto corrido que explica um conceito
   antes do título da seção
   ============================================================ */
.intro { display: grid; gap: .9rem; max-width: var(--measure); }

/* ============================================================
   PADRÃO "ITENS" — num + h3 + body
   ============================================================ */
.trio {
  display: grid;
  gap: var(--stack) clamp(1.5rem, .5rem + 3vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.trio__item { display: grid; gap: .55rem; align-content: start; }
.trio__item .body { max-width: 34ch; }

/* respiro extra antes do bloco de fechamento da seção 4 */
.trio--spaced { margin-top: var(--gap); }

/* ============================================================
   2 · A VIRADA DE CHAVE
   ============================================================ */
/* NÃO usar grid aqui: como item de grid o .struck vira bloco, e aí
   box-decoration-break: clone não tem fragmentos para dividir — o
   risco sai como uma única linha no meio do título de duas linhas. */
.s2__title { display: block; }
.s2__new { display: block; margin-top: .22em; }

/* o problema e a virada, lado a lado */
.duo {
  display: grid;
  gap: var(--stack) clamp(2rem, .5rem + 4vw, 4.5rem);
  align-items: start;
}
@media (min-width: 860px) {
  .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* mesmo bloco, empilhado: um parágrafo puxa o outro em vez de
     dividirem a linha */
  .duo--stack { grid-template-columns: minmax(0, 1fr); }
}

/* Nível 4 (texto normal): o peso do bloco vem do par de colunas e do
   contraste de cor, não do corpo da fonte — as frases de virada logo
   abaixo é que carregam o tamanho grande. */
.duo__text {
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ink);
  max-width: 46ch;
}
.duo__text--ink { color: var(--ink); }

/* Risco desenhável em gradiente de fundo em vez de SVG absoluto:
   sobrevive à quebra de linha (box-decoration-break: clone dá um
   risco por fragmento) e o background-size é animável pelo GSAP. */
.struck {
  color: var(--muted-soft);
  background-image: linear-gradient(var(--ink), var(--ink));
  background-repeat: no-repeat;
  background-position: 0 58%;
  background-size: 100% 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
html.js .struck { background-size: 0% 2px; }
html.no-anim .struck { background-size: 100% 2px; }

@media (prefers-reduced-motion: reduce) {
  html.js .struck { background-size: 100% 2px; }
}

/* ============================================================
   3 · ANATOMIA — anéis concêntricos, textos dentro das bandas
   Percepção no núcleo → Memória → Consciência → Sinapses fora
   ============================================================ */
/* gap: 0 e margens explícitas — o bloco Sinapses precisa encostar na
   ponta da espinha, então não pode entrar no compasso do grid. */
.anat { display: grid; gap: 0; }
.anat__stage { margin-top: var(--gap); }
.anat > .quote { margin-top: var(--gap); }
.anat > .trio { margin-top: var(--gap); }

.anat__stage {
  position: relative;
  width: 100%;
  max-width: 46rem;
  margin-inline: auto;
  aspect-ratio: 1 / 1.5;
}
@media (min-width: 760px) { .anat__stage { aspect-ratio: 1 / 1; } }

/* sombreado radial — mesma família do gradiente da régua, mas radial */
.anat__shade {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%,
              rgba(199, 229, 192, .5) 0%,
              rgba(199, 229, 192, .22) 38%,
              rgba(199, 229, 192, 0) 72%);
}

.anat__ring {
  position: absolute;
  border: 1px solid var(--border);
  border-radius: 50%;
}
.anat__ring--outer { inset: 0;   border-color: #DCDCDC; }
.anat__ring--mid   { inset: 15%; border-color: #D2D2D2; }
.anat__ring--core  { inset: 30%; border-color: var(--green); }

/* espinha: desce do centro, atravessa os anéis, termina em Sinapses */
.anat__spine {
  position: absolute;
  left: 50%; top: 50%;
  width: 1px; height: 52%;
  background: linear-gradient(to bottom, var(--green-fill), var(--green));
  transform: translateX(-50%);
  transform-origin: top center;
}
.anat__hub {
  position: absolute;
  left: 50%; top: 50%;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--green);
  transform: translate(-50%, -50%);
}

/* Halo branco com borda difusa (não um retângulo sólido): interrompe a
   espinha atrás do texto sem recortar o sombreado radial num quadrado
   visível — que é o que um background chapado produzia. */
.anat__block {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  gap: .4rem;
  text-align: center;
  width: 78%;
  padding: .75rem .5rem;
  background: radial-gradient(ellipse 68% 54% at 50% 50%,
              #fff 0%, #fff 58%, rgba(255, 255, 255, 0) 100%);
}
.anat__block .body { max-width: none; font-size: var(--fs-sm); }

.anat__block--core { top: 27%; }
.anat__block--mid  { top: 56%; }
.anat__block--out  { top: 76%; }

@media (min-width: 760px) {
  .anat__block--core { top: 38%; width: 34%; }
  .anat__block--mid  { top: 60%; width: 40%; }
  .anat__block--out  { top: 78%; width: 48%; }
}

.anat__sinapses {
  display: grid;
  gap: .5rem;
  justify-items: center;
  text-align: center;
  max-width: 34rem;
  margin: .35rem auto 0;   /* encosta na ponta da espinha */
}
.anat__sinapses-ring {
  width: 13px; height: 13px;
  border: 1.5px solid var(--green);
  border-radius: 50%;
  background: var(--green-fill);
}

/* ============================================================
   4 · TRANSFORMAÇÃO
   ============================================================ */
.tr { display: grid; gap: var(--stack); }

.tr__head { display: none; }
@media (min-width: 768px) {
  .tr__head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, .5rem + 3vw, 4rem);
    padding-bottom: .9rem;
    border-bottom: var(--hairline);
  }
}

.tr__row {
  display: grid;
  gap: 1.1rem;
  padding-block: clamp(1.35rem, .9rem + 1.4vw, 2rem);
  border-bottom: var(--hairline);
}
@media (min-width: 768px) {
  .tr__row {
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, .5rem + 3vw, 4rem);
    align-items: start;
  }
}

.tr__cell { display: grid; gap: .45rem; }
.tr__label { display: block; }
@media (min-width: 768px) { .tr__label { display: none; } }

.tr__cell--antes p { color: var(--muted); }
.tr__cell--depois {
  padding-left: .9rem;
  border-left: 2px solid var(--green-fill);
}
.tr__cell--depois p { color: var(--ink); }
@media (min-width: 768px) {
  .tr__cell--depois { padding-left: 0; border-left: 0; }
}

/* ============================================================
   ORBS — diagrama de agentes sobre o sistema (página HLP-001)
   ============================================================ */
/* três círculos ligados por uma linha */
.orbs {
  position: relative;
  display: grid;
  gap: 2rem;
  justify-items: center;
  width: 100%;
  max-width: 54rem;
  margin-inline: auto;
}
@media (min-width: 720px) {
  .orbs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 1rem;
  }
  /* a linha corre atrás dos círculos, de centro a centro */
  .orbs__line {
    position: absolute;
    top: 4.5rem;
    left: 16.66%; right: 16.66%;
    height: 1px;
    background: var(--border);
    z-index: 0;
  }
}

.orb {
  position: relative;
  z-index: 1;
  display: grid;
  gap: .55rem;
  justify-items: center;
  text-align: center;
}
.orb__circle {
  display: grid;
  place-items: center;
  width: 9rem; height: 9rem;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg);
}
.orb__id {
  font-family: var(--mono);
  font-size: var(--fs-over);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.orb__name {
  font-family: var(--mono);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.orb--brain .orb__circle {
  width: 11rem; height: 11rem;
  border-color: var(--green);
  background:
    radial-gradient(circle at 50% 45%,
      rgba(199, 229, 192, .75) 0%,
      rgba(199, 229, 192, .3) 55%,
      rgba(199, 229, 192, 0) 78%),
    var(--bg);
}
.orb--brain .orb__id { color: var(--green); font-size: var(--fs-sm); }

.orb--soon .orb__circle { border-style: dashed; }
.orb--soon .orb__name { color: var(--muted); }

/* os dois agentes são links: o círculo reage, o rótulo de saída acende */
a.orb { transition: transform var(--dur) var(--ease); }
.orb__go { color: var(--green); opacity: 0; transition: opacity var(--dur) var(--ease); }
a.orb:hover .orb__circle { border-color: var(--green); }
a.orb:hover .orb__go { opacity: 1; }
a.orb:active { transform: scale(.98); }
/* sem hover (touch), o rótulo não pode ficar invisível para sempre */
@media (hover: none) { .orb__go { opacity: 1; } }

/* ============================================================
   6 · COMO FAZEMOS
   ============================================================ */
/* Cada coluna carrega o seu círculo, o conector e o item que ele
   ilustra — então no mobile, ao empilhar, o círculo continua colado
   no texto correspondente sem nenhum layout paralelo. */
.pillars {
  display: grid;
  gap: var(--gap) clamp(1.5rem, .5rem + 3vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.pillar {
  display: grid;
  gap: .55rem;
  justify-items: center;
  text-align: center;
  align-content: start;
}
.pillar__circle {
  display: grid;
  place-items: center;
  width: 8.5rem; height: 8.5rem;
  border: 1px solid var(--green-fill);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 45%,
      rgba(199, 229, 192, .6) 0%,
      rgba(199, 229, 192, .22) 55%,
      rgba(199, 229, 192, 0) 78%),
    var(--bg);
}
.pillar__word {
  font-family: var(--mono);
  font-size: var(--fs-over);
  font-weight: 700;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--green);
}
/* conector do círculo até o item que ele ilustra */
.pillar__link {
  width: 1px;
  height: 2.25rem;
  background: linear-gradient(to bottom, var(--green-fill), var(--border));
}
.pillar .body { max-width: 32ch; }

/* ── régua ascendente ─────────────────────────────────────── */
/* Ordem do bloco: gráfico → título da legenda → as quatro etapas. */
.ruler { display: grid; gap: 1rem; }
.ruler__caption { margin-top: 1rem; }

/* Mobile: os seis marcos viram uma lista em duas colunas acima do
   gráfico — sobre os pontos, em 375px, não caberiam. */
.ruler__pins {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .4rem 1rem;
  margin-bottom: 1rem;
}
.ruler__pin { color: var(--green); }

.ruler__labels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--stack) 1rem;
}
@media (min-width: 720px) {
  .ruler__labels { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.ruler__label {
  display: grid;
  gap: .4rem;
  align-content: start;
  justify-items: center;
  text-align: center;
}
.ruler__label .body { font-size: var(--fs-sm); max-width: 26ch; }

.ruler__svg { width: 100%; height: auto; overflow: visible; }

/* Desktop: cada marco fica na horizontal, logo acima do seu ponto.
   bottom = (310 − y) / 310, a altura do ponto na caixa do SVG.

   O rótulo termina NO ponto e cresce para a esquerda (12,4% de largura,
   texto alinhado à direita). É o que mantém tudo limpo: à esquerda de
   um ponto a curva está sempre mais baixa que ele, então o rótulo
   nunca é cortado pelo traço; e como os pontos mais próximos distam
   12,5%, dois marcos nunca se cruzam.

   O ponto ocupa raio de ~7px no gráfico renderizado. O respiro de
   .85rem à direita e 1rem acima é o que impede o rótulo de encostar
   na bolinha — inclusive na última, que tem raio maior (6,5).

   1140px e não 720px: com os rótulos por extenso, abaixo disso a
   coluna de 12,4% não comporta nem "ORGANIZACIONAL" numa linha, e o
   texto vazaria por cima do gráfico. Até lá vale a lista empilhada. */
@media (min-width: 1140px) {
  .ruler__stage { position: relative; padding-top: 3rem; }
  .ruler__pins {
    display: block;
    position: absolute;
    inset: 3rem 0 0 0;
    margin-bottom: 0;
  }
  .ruler__pin {
    position: absolute;
    width: 12.4%;
    text-align: right;
    padding-right: .85rem;
    font-size: var(--fs-over-s);
    letter-spacing: .04em;
    line-height: 1.35;
  }
  .ruler__pin:nth-child(1) { left: .1%;   bottom: calc(6.45%  + 1rem); }
  .ruler__pin:nth-child(2) { left: 25.1%; bottom: calc(12.26% + 1rem); }
  .ruler__pin:nth-child(3) { left: 37.6%; bottom: calc(18.29% + 1rem); }
  .ruler__pin:nth-child(4) { left: 50.1%; bottom: calc(28.35% + 1rem); }
  .ruler__pin:nth-child(5) { left: 62.6%; bottom: calc(45.06% + 1rem); }
  .ruler__pin:nth-child(6) { left: 75.1%; bottom: calc(73.1%  + 1rem); }
}

.ruler__caption {
  display: grid;
  gap: .5rem;
  justify-items: center;
  text-align: center;
  max-width: 46rem;
  margin-inline: auto;
}
.ruler__caption .body { max-width: none; }

/* ============================================================
   PADRÃO "FECHAMENTO" — bloco final centralizado
   título → texto → botão → (micro-linha, link de saída)
   ============================================================ */
.close {
  display: grid;
  gap: var(--stack);
  justify-items: center;
  text-align: center;
}
.close .h2 { max-width: none; }
.close .body { max-width: 52ch; }

/* ============================================================
   7 · CTA + QUEM CONSTRUIU
   ============================================================ */
.split {
  display: grid;
  gap: var(--gap);
}
@media (min-width: 940px) {
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(3rem, 1rem + 5vw, 6rem);
    align-items: start;
  }
  /* separador vertical entre a conversa e a assinatura */
  .split > .who {
    padding-left: clamp(3rem, 1rem + 5vw, 6rem);
    border-left: var(--hairline);
  }
}

.cta { display: grid; gap: var(--stack); justify-items: start; align-content: start; }

.who { display: grid; gap: 1.5rem; justify-items: start; }

/* Retrato circular. O corte é do wrapper (overflow + border-radius),
   e não da imagem, porque o PNG já traz o próprio círculo desenhado
   sobre fundo preto: cortar exatamente no mesmo raio deixaria a borda
   serrilhada da imagem aparecer como um aro escuro.

   Daí os 106%: a imagem entra maior que o wrapper, então o corte do
   CSS cai DENTRO do círculo do PNG e o preto dos cantos nunca chega
   a ser desenhado. A margem negativa recentraliza o excedente. */
.who__photo {
  display: block;
  width: 5.5rem; height: 5.5rem;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--wash);
}
.who__photo img {
  width: 125%;
  height: 125%;
  margin: 0%;
  object-fit: cover;
}

.who__text { display: grid; gap: 1.1rem; }
.who__text p { color: var(--muted); max-width: 54ch; font-style: italic; }

/* assinatura: as duas linhas coladas, e o overline recuado até onde o
   nome começa — o travessão fica pendurado na margem */
.who__sign { display: grid; gap: .15rem; line-height: 1.3; }
.who__sign .overline { padding-left: 1.4ch; }

/* ============================================================
   8 · FAQ — centralizado
   ============================================================ */
.faq-wrap {
  display: grid;
  gap: var(--gap);
  justify-items: center;
  width: 100%;
  max-width: 52rem;
  margin-inline: auto;
}
.faq__title { text-align: center; max-width: none; }
.faq { display: grid; width: 100%; }

.faq__item { border-bottom: var(--hairline); }
.faq__item:first-child { border-top: var(--hairline); }

.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: clamp(1.1rem, .85rem + .8vw, 1.5rem);
  cursor: pointer;
  list-style: none;
  /* nível 4: a pergunta se destaca pelo peso, não pelo corpo */
  font-size: var(--fs-body);
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.4;
  transition: color var(--dur) var(--ease);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--green); }

.faq__sign {
  flex: none;
  width: 22px; height: 22px;
  margin-top: .18em;
  position: relative;
}
.faq__sign::before,
.faq__sign::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  background: var(--green);
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}
.faq__sign::before { width: 11px; height: 1.5px; transform: translate(-50%, -50%); }
.faq__sign::after  { width: 1.5px; height: 11px; transform: translate(-50%, -50%); }
.faq__item[open] .faq__sign::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

/* transição de altura sem JS (grid 0fr → 1fr) */
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-2) var(--ease); }
.faq__item[open] .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { color: var(--muted); max-width: 62ch; padding-bottom: 1.4rem; }