/* =========================================================
   Página Sobre — leitura editorial (rodada 2 · v22)
   Carregado DEPOIS de css/styles.css: usa só os tokens de contexto do
   design system (--a --on --on-body --on-soft --hair --hair-strong …),
   que trocam sozinhos entre grafite e off-white. Nada de hex aqui.
   Tudo escopado em .page-sobre ou em classes próprias (sobre-*, etapa-*,
   linha, marco, hoje-*, fecho-*).

   Composição (fundo alterna): abertura grafite com foto grande
   · pausa (citação) + linha do tempo 01–04 em off-white
   · 05 Hoje em grafite, com a segunda foto
   · fecho em off-white com a assinatura institucional.
   Cabeçalho, rodapé, botões, foco e skip-link vêm de css/styles.css.
   ========================================================= */

.page-sobre {
  /* coluna do numeral na linha do tempo (o filete corre na borda direita dela) */
  --col-num: clamp(150px, 17vw, 232px);
  /* respiro entre o filete e o texto */
  --rail-gap: 26px;
  /* altura do cabeçalho fixo já rolado (borda 2px + nav 10px + 44px + 10px ≈ 66px), usada pela
     foto sticky da seção Hoje. A foto só gruda depois de rolar, quando o cabeçalho já encolheu
     (a 66px sobra, no máximo, 0,6px de sobreposição; nunca um vão). Se o cabeçalho mudar de
     altura em css/styles.css, ajuste aqui. */
  --header-h: 66px;
}
@media (min-width: 860px) {
  .page-sobre { --rail-gap: clamp(40px, 6vw, 84px); }
}

/* ---------- Abertura (grafite): H1 + foto grande ---------- */
.sobre-hero {
  position: relative; overflow: hidden;
  display: flex; align-items: center;
  min-height: clamp(560px, 86vh, 780px);
}
.sobre-hero .container { position: relative; z-index: 2; width: 100%; }
.sobre-hero-texto { padding-block: clamp(44px, 7vw, 96px); }
.sobre-hero h1 {
  font-size: clamp(40px, 0.6rem + 4.2vw, 68px);
  line-height: 1.02; letter-spacing: -0.03em;
  margin-top: 2px;
}
.sobre-hero .lead { margin-top: 28px; max-width: 38ch; color: var(--on-body); }

.sobre-hero-foto { margin: 0; background: var(--ink-bg-2); }
.sobre-hero-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }

@media (min-width: 900px) {
  /* o texto termina antes da foto (42% da direita), com folga de 32px */
  .sobre-hero-texto { max-width: min(620px, calc(58vw - var(--gutter) - max(0px, (100vw - 1120px) / 2) - 32px)); }
  .sobre-hero-foto { position: absolute; top: 0; right: 0; bottom: 0; width: 42%; z-index: 1; border-left: 1px solid var(--hair-strong); }
}
@media (max-width: 899px) {
  .sobre-hero h1 { font-size: clamp(40px, 0.6rem + 6vw, 64px); }
  .sobre-hero { flex-direction: column; align-items: stretch; min-height: 0; }
  .sobre-hero-texto { padding-block: 28px 40px; }
  .sobre-hero-foto { height: clamp(380px, 112vw, 600px); border-top: 1px solid var(--hair-strong); }
}

/* ---------- História (off-white) ---------- */
.sobre-historia { --ring: var(--paper); padding-bottom: clamp(56px, 8vw, 104px); }

/* Pausa: a citação é a imagem */
.sobre-citacao { margin: 0; padding-block: clamp(80px, 13vw, 176px) clamp(64px, 10vw, 128px); }
.sobre-citacao .display-quote {
  /* três linhas: duas formam a primeira frase, a terceira é a segunda frase inteira */
  font-size: clamp(32px, 0.4rem + 4.3vw, 64px);
  line-height: 1.02; letter-spacing: -0.035em;
}
.sobre-citacao .display-quote p { font: inherit; letter-spacing: inherit; color: inherit; }
@media (max-width: 899px) {
  .sobre-citacao .display-quote { font-size: clamp(32px, 0.4rem + 4.8vw, 56px); }
}

/* ---------- Linha do tempo ---------- */
/* um filete contínuo (.linha::before) com um nó por etapa; os marcos (datas) entram sobre o mesmo filete */
.linha { position: relative; --rail-x: 0px; }
.linha::before {
  content: ""; position: absolute; left: var(--rail-x); top: 34px; bottom: 6px;
  width: 1px; background: var(--hair-strong);
}
.linha::after { /* o filete termina num anel: o caminho segue em "Hoje" */
  content: ""; position: absolute; left: calc(var(--rail-x) - 7px); bottom: 0;
  width: 15px; height: 15px; border-radius: 50%;
  border: 3px solid var(--accent); background: var(--ring);
}

.etapa {
  position: relative;
  padding-left: var(--rail-gap);
  padding-bottom: clamp(64px, 9vw, 128px);
  scroll-margin-top: 84px;
}
.etapa:last-child { padding-bottom: clamp(72px, 9vw, 112px); }
.etapa::before { /* nó da etapa */
  content: ""; position: absolute; z-index: 1;
  left: calc(var(--rail-x) - 7px); top: 28px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 7px var(--ring);
}

/* marca da etapa: numeral grande em vermelho + nome */
.etapa-marca { display: flex; align-items: baseline; gap: 6px 16px; margin: 0 0 18px; }
.etapa-n { display: block; font-size: clamp(76px, 2rem + 8vw, 136px); }
.etapa-nome {
  display: inline-flex; align-items: center; gap: 12px;
  font: 600 var(--fs-label)/1.3 var(--font-body); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--on);
}
.etapa-nome::before { content: ""; flex: none; width: 24px; height: 2px; background: var(--a); }

.etapa-corpo h2 {
  font-size: clamp(28px, 1rem + 2.5vw, 46px); line-height: 1.07; letter-spacing: -0.02em;
  max-width: 22ch; scroll-margin-top: 84px;
}
.etapa-corpo p {
  max-width: var(--measure);
  font-size: var(--fs-body); line-height: 1.75; color: var(--on-body);
  margin-top: 1.2em;
}
.etapa-corpo h2 + p { margin-top: 1.4em; }
/* frase de peso: uma por etapa, sem mudar o texto */
.etapa-corpo p.destaque {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(23px, 1rem + 1.5vw, 34px); line-height: 1.18; letter-spacing: -0.02em;
  color: var(--on); max-width: 30ch; margin-top: 1.5em; text-wrap: balance;
}

/* Marco no tempo: o ano em tipografia de título, com um nó vazado sobre o filete */
.marco {
  position: relative;
  margin-top: clamp(36px, 5vw, 56px);
  padding-top: clamp(22px, 3vw, 30px);
  border-top: 1px solid var(--hair);
}
.marco::before { /* nó vazado do marco, sobre o filete */
  content: ""; position: absolute; z-index: 1;
  left: calc(-1 * var(--rail-gap) - 5px); top: -6px;
  width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid var(--accent); background: var(--ring);
}
.marco::after { /* tique ligando o filete ao marco */
  content: ""; position: absolute; left: calc(-1 * var(--rail-gap)); top: 0;
  width: var(--rail-gap); height: 1px; background: var(--hair-strong);
}
.etapa-corpo .marco p:first-child { margin-top: 0; }
.etapa-corpo .marco-data {
  margin: 0 0 12px;
  font: 800 clamp(26px, 1rem + 1.8vw, 40px)/1 var(--font-display); letter-spacing: -0.025em;
  color: var(--on);
}
.etapa-corpo .marco-data + p { margin-top: 0; }

/* telas largas: numeral à esquerda do filete, texto à direita */
@media (min-width: 860px) {
  .linha { --rail-x: var(--col-num); }
  .etapa {
    display: grid; grid-template-columns: var(--col-num) minmax(0, 1fr);
    padding-left: 0;
  }
  .etapa-marca { display: block; margin: 0; }
  .etapa-nome { margin-top: 18px; }
  /* o numeral acompanha a leitura da etapa (só dentro da linha do tempo) */
  .etapa > .etapa-marca { position: sticky; top: 112px; align-self: start; }
  .etapa-corpo { padding-left: var(--rail-gap); }
  .etapa::before { top: 22px; }
  .linha::before { top: 28px; }
}

/* ---------- 05 · Hoje (grafite): foto grande + quatro frentes ---------- */
.hoje-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.hoje-foto { margin: 0; background: var(--ink-bg-2); }
.hoje-foto img { display: block; width: 100%; height: clamp(420px, 120vw, 640px); object-fit: cover; object-position: 55% 10%; }
.hoje-texto { padding: clamp(48px, 8vw, 96px) var(--gutter) clamp(56px, 9vw, 112px); }
.hoje-texto .etapa-marca { margin-bottom: clamp(20px, 3vw, 28px); }
.hoje-texto .etapa-marca { display: block; }
.hoje-texto .etapa-nome { margin-top: 18px; }
.hoje-texto h2 { font-size: clamp(28px, 1rem + 2.5vw, 46px); line-height: 1.07; letter-spacing: -0.02em; max-width: 18ch; }
.hoje-texto .destaque {
  margin-top: 1.4em; max-width: 30ch;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(23px, 1rem + 1.5vw, 34px); line-height: 1.18; letter-spacing: -0.02em;
  color: var(--on); text-wrap: balance;
}

.hoje-lista { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 clamp(28px, 4vw, 56px); margin-top: clamp(36px, 5vw, 56px); }
.hoje-lista li { border-top: 1px solid var(--hair-strong); padding-block: 24px 26px; }
.hoje-lista h3 { font-size: clamp(22px, 1rem + 0.8vw, 26px); }
.hoje-lista p { margin-top: 10px; font-size: 16.5px; line-height: 1.65; color: var(--on-soft); max-width: 38ch; }
.hoje-lista .link-underline {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px;
  font-size: 15px; padding: 0; border-bottom: 0;
  /* o filete vira text-decoration para ficar colado ao texto, mesmo com a área de toque de 44px */
  text-decoration: underline; text-decoration-color: var(--a); text-decoration-thickness: 1px; text-underline-offset: 6px;
}
.hoje-lista .link-underline:hover { color: var(--a); }

@media (min-width: 640px) {
  .hoje-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .hoje-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  /* a foto acompanha a leitura das quatro frentes (sticky). Ela gruda logo ABAIXO do cabeçalho
     fixo (e não atrás dele) e ocupa o resto da tela: a cabeça nunca fica escondida.
     object-position em 0% no eixo Y mantém o topo da foto (cabelo) sempre visível,
     mesmo em telas largas e baixas, onde o recorte passa a ser vertical. */
  .hoje-foto img {
    position: sticky; top: var(--header-h);
    height: calc(min(100vh, 1200px) - var(--header-h));
    object-position: 55% 0%;
  }
  .hoje-texto {
    padding-block: clamp(72px, 8vw, 120px);
    padding-left: clamp(40px, 5vw, 80px);
    padding-right: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
  }
}

/* ---------- Fecho (off-white): assinatura + chamadas ---------- */
.sobre-fecho { padding-block: clamp(72px, 11vw, 140px); }
.fecho { max-width: none; }
.fecho .signature { font-size: clamp(28px, 1.08rem + 3.5vw, 62px); line-height: 1.04; }
.fecho-base {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px clamp(32px, 6vw, 88px); align-items: end;
  margin-top: clamp(40px, 6vw, 72px); padding-top: clamp(28px, 4vw, 40px);
  border-top: 1px solid var(--hair-strong);
}
.fecho-texto h2 { font-size: clamp(26px, 1rem + 1.8vw, 36px); line-height: 1.1; letter-spacing: -0.02em; }
.fecho-texto .lead { margin-top: 14px; max-width: 44ch; }
.fecho-acoes { display: flex; flex-wrap: wrap; gap: 14px; }
@media (min-width: 900px) {
  .fecho-base { grid-template-columns: minmax(0, 1fr) auto; }
  .fecho-acoes { justify-content: flex-end; }
}
@media (max-width: 520px) {
  .fecho-acoes .btn,
  .fecho-acoes .btn-ghost { flex: 1 1 100%; }
}
/* Lema: conteúdo secundário, bem menor que a assinatura */
.fecho-lema {
  margin-top: clamp(40px, 6vw, 64px);
  font: 600 var(--fs-label)/1.4 var(--font-body); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--on-mute);
}