/* ==========================================================================
   PÁGINA: QUEM SOMOS
   Carrega por último, depois de 06-responsive.css. Media queries no fim.

   Instrução da copy: "Essa página não terá menu. Apenas a logo no canto
   inferior esquerdo que redireciona para a home."

   Blocos (docs/copy/quem-somos.txt):
   abertura · Júnio · Ricardo · depoimentos · SOMOS REIWA · resultados ·
   blog · rodapé
   ========================================================================== */

/* O ritmo vertical das seções é compartilhado, mora em 03-layout.css */

/* ==========================================================================
   LOGO DE VOLTA
   Substitui a nav nesta página. Fundo sólido em vez de translúcido: é o
   único caminho de volta pra home, não pode ficar ilegível por cima de
   nenhuma seção.
   ========================================================================== */
.logo-volta{position:fixed;left:26px;bottom:24px;z-index:var(--z-nav);
  display:inline-flex;align-items:center;gap:11px;
  padding:11px 18px 11px 14px;border-radius:var(--r-pill);
  background:#0a0a0d;border:1px solid rgba(212,175,55,.26);
  box-shadow:0 12px 34px rgba(0,0,0,.6);
  font-family:'Sora';font-weight:600;font-size:13.5px;letter-spacing:.02em;
  color:var(--silver);transition:.3s}
.logo-volta:hover{border-color:rgba(212,175,55,.55);color:var(--gold-hi);
  box-shadow:0 14px 40px rgba(212,175,55,.16)}
.logo-volta img{height:24px;width:auto}
.logo-volta svg{width:14px;height:14px;opacity:.7}


/* ==========================================================================
   ABERTURA
   ========================================================================== */
/* overflow-x:clip, não overflow:hidden.

   O corte horizontal existe porque o arco é mais largo que a tela. Mas
   hidden corta nos dois eixos, e o brilho do arco passa da base do
   cabeçalho: ele era cortado a seco ali, desenhando uma linha reta visível
   atravessando a página. clip no eixo x resolve a largura e deixa o brilho
   descer e se apagar sozinho. */
.abertura{position:relative;overflow-x:clip;padding:150px 0 0;text-align:center}

/* Uma só fonte de separação entre a abertura e a primeira seção, igual ao
   FAQ e ao blog. Antes eram o padding de baixo da abertura mais o padding
   padrão de <section>, somando 104px no desktop. */
.abertura + section{padding-top:52px}
.abertura .container{display:flex;flex-direction:column;align-items:center}

/* Halo sem fio, ver .arco-suave em 03-layout.css.
   O topo é 60 e não 0 para a luz ficar atrás do título e não atrás da
   barra de navegação, onde estava batendo na logo. */
.abertura .arco{--arco-topo:60px;--arco-alt:420px;--arco-forca:1}
.abertura h1{font-size:clamp(31px,5vw,58px);font-weight:800;
  max-width:17ch;margin-bottom:26px;letter-spacing:-.025em}
.abertura .intro{font-size:clamp(16px,1.9vw,19px);color:var(--muted);max-width:62ch}


/* ==========================================================================
   SÓCIO
   Duas colunas alternando o lado da foto, para o olho não pegar padrão de
   lista e ler os dois blocos como iguais.
   ========================================================================== */
/* O brilho atrás da foto é um ::before com inset:-14%, e o contêiner dele
   não tem overflow:hidden de propósito, senão o brilho seria recortado.

   No celular a foto tem 340px, então 14% dá 47px para cada lado e o brilho
   passa da largura da tela em cerca de 23px, criando rolagem lateral. Como
   é pseudo-elemento, ele não aparece em varredura do DOM: o sintoma era uma
   página que arrastava de lado sem nenhum elemento culpado.

   clip em vez de hidden: hidden com overflow-y visible vira scroll
   container e traria efeitos colaterais de rolagem. clip só recorta. */
.socios{display:grid;gap:96px;overflow-x:clip}

.socio{display:grid;grid-template-columns:.85fr 1.15fr;gap:52px;align-items:center}
.socio:nth-child(even) .socio-foto{order:2}

/* Sem overflow:hidden aqui de propósito: o brilho precisa extrapolar a caixa.
   Quem arredonda e recorta é o conteúdo, não o contêiner. */
.socio-foto{position:relative;aspect-ratio:4/5}

/* brilho de apoio atrás da foto, mesmo motivo do hero antigo */
.socio-foto::before{content:"";position:absolute;inset:-14%;z-index:0;
  background:radial-gradient(circle,rgba(212,175,55,.2),transparent 62%);filter:blur(34px)}

.socio-foto img,
.socio-foto .slot{position:relative;z-index:1;
  width:100%;height:100%;border-radius:var(--r-xl)}
.socio-foto img{object-fit:cover;display:block}

.socio-texto h2{font-size:clamp(26px,3.4vw,38px);margin-bottom:6px}
.socio-papel{font-family:'Sora';font-size:14px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;margin-bottom:26px;
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.socio-texto p:not(.socio-papel){color:var(--muted);font-size:16.5px;margin-bottom:18px;max-width:56ch}

/* citação: o pedido da copy é destaque e itálico */
.citacao{position:relative;margin-top:30px;padding:26px 30px 26px 34px;
  border-radius:var(--r-md);border:1px solid rgba(212,175,55,.24);
  background:linear-gradient(150deg,rgba(24,22,16,.7),rgba(8,8,10,.4));
  font-family:'Sora';font-style:italic;font-weight:500;
  font-size:16.5px;line-height:1.55;color:var(--silver-hi);max-width:56ch}
/* barra dourada na lateral, marcando fala em vez de texto corrido */
.citacao::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:3px;
  border-radius:3px;background:var(--gold-grad)}

.acao-socios{margin-top:52px}


/* ==========================================================================
   DEPOIMENTOS EM VÍDEO
   ========================================================================== */
.grid-video{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px}
.video-item{position:relative;aspect-ratio:9/16;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);background:rgba(255,255,255,.02)}
.video-item video{width:100%;height:100%;object-fit:cover;display:block}
/* mantém o tracejado do slot: é ele que sinaliza "asset pendente".
   A borda do .video-item é quase invisível (--line), não briga. */
.video-item .slot{height:100%;border-radius:calc(var(--r-lg) - 1px)}

.depoimentos-apoio{margin-top:34px;text-align:center;color:var(--muted);
  font-size:16px;max-width:56ch;margin-left:auto;margin-right:auto}


/* ==========================================================================
   SOMOS REIWA
   Fecho da página. Texto grande, centrado, com a última frase carregando o
   posicionamento inteiro.
   ========================================================================== */
.manifesto{text-align:center}
.manifesto .container{display:flex;flex-direction:column;align-items:center}
.manifesto h2{font-size:clamp(30px,5.4vw,60px);font-weight:800;
  letter-spacing:-.03em;margin-bottom:36px}
.manifesto p{color:var(--muted);font-size:17px;max-width:62ch;margin-bottom:20px}
.manifesto .fecho{font-family:'Sora';font-weight:700;color:var(--ink);
  font-size:clamp(19px,2.6vw,27px);line-height:1.35;letter-spacing:-.01em;
  max-width:26ch;margin-top:14px}
.acao-manifesto{margin-top:42px}


/* ==========================================================================
   RESPONSIVO
   As seções de Resultados e Blog repetem a home: grades e breakpoints delas
   são compartilhados, em 04-components.css e 06-responsive.css.
   ========================================================================== */
@media(max-width:900px){
  .abertura{padding:120px 0 0}
  .abertura + section{padding-top:34px}
  .socios{gap:70px}
  .socio{grid-template-columns:1fr;gap:32px}
  /* no empilhado a foto vem sempre primeiro: rosto antes do texto */
  .socio:nth-child(even) .socio-foto{order:0}
  .socio-foto{max-width:340px;margin:0 auto;width:100%}
  .grid-video{grid-template-columns:1fr;max-width:340px;margin-left:auto;margin-right:auto}

  /* a logo flutuante não pode cobrir o rodapé */
  .rodape{padding-bottom:96px}
  .logo-volta{left:16px;bottom:16px;padding:9px 15px 9px 12px;font-size:12.5px}
  .logo-volta img{height:20px}
}