/* ═══════════════════════════════════════════════════════════════════════
   SOBRE O HANGAR 7 — página institucional
   ─────────────────────────────────────────────────────────────────────
   Só o que é DESTA página. Tudo o que já existe no site.css é reusado
   como está (.blk, .wrap, .display, .eyebrow, .muted, .btn, .photo,
   .aimg, .vgrid, .vcard, .video, .play, .reveal) — aqui só entram o
   ritmo de leitura e as três faixas que a página inventa: o DNA, o
   legado e o convite final.

   Duas decisões que valem explicação:

   1) A página é uma NARRATIVA, não um painel. Por isso existe uma
      coluna de leitura com largura máxima em `ch` (.sb-prosa): a linha
      para de crescer quando fica cansativa de ler, mesmo num monitor de
      1720px — que é a largura do .wrap.

   2) O ritmo alterna claro → escuro → claro. As faixas escuras
      (.sb-dna e .sb-legado) são as duas frases que o pastorado quer que
      fiquem na cabeça de quem lê; elas param a rolagem de propósito.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Abertura ───────────────────────────────────────────────────────── */
.sb-hero{padding:150px 0 0}
@media(max-width:767px){.sb-hero{padding-top:128px}}

.sb-hero .crumbs{margin-bottom:34px}
.sb-h1{font-size:clamp(2.4rem,7.6vw,5.6rem);margin-top:18px;max-width:16ch}

.sb-hgrid{display:grid;gap:34px;grid-template-columns:1fr;margin-top:40px}
/* O carimbo do ano: o fato da história, batido logo abaixo da frase de
   entrada — no fluxo, nunca solto por cima da prosa (em 1440 a coluna da
   direita chega até a borda; em 360 não sobra canto nenhum). */
.sb-carimbo{position:static;margin:28px 0 0 6px}   /* site.css põe .stamp em absolute (colagem da home) */
.sb-hgrid>*{min-width:0}
@media(min-width:1024px){
  .sb-hgrid{grid-template-columns:1.02fr 1fr;gap:64px;align-items:start;margin-top:56px}
}

/* Frase de entrada: maior que o corpo, menor que o título. É a ponte. */
.sb-lead{font-size:clamp(18px,2.1vw,25px);line-height:1.45;font-weight:500;
  color:var(--ink);max-width:17em}

/* Coluna de leitura. O `ch` mede na fonte real, então a linha tem sempre
   mais ou menos o mesmo número de caracteres em qualquer tamanho de tela. */
.sb-prosa{max-width:62ch}
.sb-prosa p{font-size:15.5px;line-height:1.8;color:#414141}
@media(min-width:768px){.sb-prosa p{font-size:16px}}
.sb-prosa p+p{margin-top:18px}
.sb-prosa b,.sb-prosa strong{color:var(--ink);font-weight:600}

/* Fecho da história — o traço curto acima marca que a narrativa terminou. */
/* O fecho da história abre com a pista (hangar-pages.css), não com o fio. */
.sb-fecho{margin-top:56px}
.sb-fecho .runway{margin-top:0;margin-bottom:34px}
.sb-fecho p{font-size:clamp(1.5rem,4vw,3rem);max-width:18ch}
@media(min-width:1024px){.sb-fecho{margin-top:72px}}

/* ── Faixas escuras (DNA e legado) ──────────────────────────────────── */
.sb-escuro{position:relative;background:#0d0d0d;color:#fff;overflow:hidden}
.sb-escuro .dots{position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:22px 22px}
.sb-escuro .wrap{position:relative;z-index:2}
.sb-escuro .sb-prosa p{color:rgba(255,255,255,.74)}
.sb-escuro .sb-prosa b,.sb-escuro .sb-prosa strong{color:#fff}
.sb-escuro .eyebrow{color:var(--cream)}

.sb-dna{margin-top:84px;padding:74px 0}
@media(min-width:768px){.sb-dna{padding:96px 0}}
/* O painel de embarque acima das três linhas: o mesmo da home. Ele gira as
   frases uma a uma; as três linhas paradas embaixo continuam sendo o texto
   inteiro para quem lê de uma vez (e para o leitor de tela). */
/* Auditoria 18/09/2026 (Klaus, Sobre): "alinhar ao centro". O letreiro e as
   tres linhas do DNA eram os unicos do bloco escuro encostados a esquerda. */
.sb-dna .wrap{text-align:center}
.sb-dna .sb-painel{padding:0 0 30px;background:transparent;--sf:clamp(12px,3.2vw,26px)}
.sb-dna .sb-painel .sf-row{justify-content:center}
.sb-dna p{font-family:"Geist","Arial Black",sans-serif;font-weight:800;
  text-transform:uppercase;letter-spacing:-.02em;line-height:1.04;
  font-size:clamp(1.5rem,5.4vw,3.6rem)}

.sb-legado{padding:84px 0}
@media(min-width:768px){.sb-legado{padding:104px 0}}
/* Auditoria 18/09/2026 (Klaus, Sobre): "na secao legado, remover cor amarela
   do titulo e colocar branco". O --cream (#efe7d6) puxa para o palha sobre o
   preto — mesma troca ja feita no rodape (12/09) e no carrossel da home. A
   sobrancelha "Nosso legado" vai junto, pela mesma razao. */
.sb-legado .sb-remate{margin-top:40px;font-family:"Geist","Arial Black",sans-serif;
  font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:1.05;
  font-size:clamp(1.25rem,3.2vw,2.3rem);max-width:22ch;color:#fff}
.sb-legado .eyebrow{color:#fff}

/* ── Cabeçalho de seção ─────────────────────────────────────────────── */
.sb-h2{font-size:clamp(1.7rem,4.3vw,3.1rem);margin-top:14px;max-width:20ch}

/* ── Faixa branca (destaca o bloco do nome) ─────────────────────────── */
.sb-branco{background:var(--surface)}

/* ── Foto de apoio ──────────────────────────────────────────────────── */
.sb-foto{border-radius:18px;min-height:360px;height:100%}
@media(min-width:1024px){.sb-foto{min-height:520px}}
/* O retrato dos pastores é vertical: enquadrar pelo topo mantém os rostos. */
.sb-foto.retrato .aimg{object-position:center 22%}

/* ── Vídeo do nome ──────────────────────────────────────────────────── */
.sb-video{max-width:1000px;margin:44px auto 0}
/* O .video do site.css nasce com a thumbnail invisível porque, no hero da
   home, ela chega depois por JavaScript. Aqui a imagem já vem no HTML —
   então ela aparece de saída, e a página funciona inteira sem script. */
.sb-video .aimg{opacity:1}

/* ── Os quatro verbos ───────────────────────────────────────────────── */
/* Os quatro verbos são a tira por fio da home (.vgrid/.vcard, site.css) — sem
   caixa branca. A ordem é sequência de verdade (conectar → pertencer →
   abastecer → compartilhar), por isso o numeral fica. */
.sb-verbos{margin-top:44px}
@media(min-width:768px){.sb-verbos{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.sb-verbos{grid-template-columns:repeat(4,1fr)}}
@media(min-width:768px) and (max-width:1099px){.sb-verbos .vcard:nth-child(3){padding-left:0;border-left:0}}

/* ── Recado com informação literal (horários, Naves, voluntariado) ──── */
.sb-nota{margin-top:40px;max-width:66ch;border-left:1px solid var(--ink);
  padding-left:22px;font-size:15.5px;line-height:1.8;color:#414141}
.sb-nota b,.sb-nota strong{color:var(--ink);font-weight:600}

/* ── Convite final ──────────────────────────────────────────────────── */
/* Auditoria 18/09/2026 (Klaus, Sobre): "no convite final, trocar o fundo
   amarelo por cinza #d6d9dc". O texto da prosa era um marrom quente pensado
   para o creme; sobre o cinza ele vira o mesmo cinza-escuro do resto do site. */
.sb-cta{background:#d6d9dc;border-radius:28px;padding:52px 28px;text-align:center}
@media(min-width:768px){.sb-cta{padding:76px 56px}}
.sb-cta .sb-cta-pista{max-width:520px;margin:0 auto 26px}
.sb-cta .sb-h2{margin-left:auto;margin-right:auto;max-width:22ch}
.sb-cta .sb-prosa{margin:26px auto 0;max-width:56ch}
.sb-cta .sb-prosa p{color:#41464b}
.sb-cta .sb-prosa b,.sb-cta .sb-prosa strong{color:var(--ink)}
.sb-cta .sb-chamada{margin-top:40px;font-family:"Geist","Arial Black",sans-serif;
  font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:1.02;
  font-size:clamp(1.5rem,4.6vw,3.1rem)}
.sb-acoes{margin-top:32px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.sb-acoes .btn{border-radius:12px}
@media(max-width:479px){.sb-acoes .btn{width:100%}}

/* ── S6 · a citação dos Encounters (09/09, 00:37:13) ───────────────────────
   A linha subiu do pé da seção para debaixo do título, e vira citação: barra
   fina à esquerda, texto um pouco maior que o corpo. */
.sb-cit {
  margin: 22px 0 0; padding: 2px 0 2px 18px;
  border-left: 2px solid rgba(21, 21, 21, .22);
  font-size: 16px; line-height: 1.65; color: var(--muted);
}
.sb-cit b { color: var(--ink); font-weight: 600; }

/* ── S7 · o mosaico do legado (09/09, 00:37:13) ────────────────────────────
   Quatro fotos em grade, do lado do texto. As imagens tem proporcoes
   diferentes (duas em pe, duas deitadas), entao o object-fit iguala; sem
   isso a grade vira escada. */
.sb-mosaico { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 34px; }
.sb-mosaico img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 14px; display: block; }
/* No desktop o mosaico vai para o LADO do texto. A colocacao e' EXPLICITA
   (tudo na coluna 1, mosaico na 2, atravessando as linhas): deixar o grid
   distribuir sozinho depende da quantidade de paragrafos, e um paragrafo a
   mais na copy jogaria o mosaico para o lugar errado sem ninguem perceber. */
@media (min-width: 900px) {
  .sb-legado .wrap { display: grid; grid-template-columns: 1.05fr .95fr; column-gap: 56px; align-items: start; }
  .sb-legado .wrap > * { grid-column: 1; }
  .sb-legado .sb-mosaico { grid-column: 2; grid-row: 1 / span 20; align-self: center; margin-top: 0; }
}

/* ── S9 · o convite final deixa de ter dois titulos do mesmo tamanho ───────
   "dois títulos do mesmo tamanho no mesmo bloco incomoda — hierarquizar e dar
   espaço". O titulo continua titulo; o "Venha voar com a gente!" vira a linha
   de arremate que ele sempre foi. */
.sb-cta .sb-chamada {
  font-size: clamp(1.05rem, 2.2vw, 1.35rem); font-weight: 600;
  text-transform: none; letter-spacing: 0; margin-top: 26px; color: var(--ink);
}