/* ==========================================================================
   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 */

/* ==========================================================================
   BARRA SÓ COM A LOGO
   Esta página não tem menu, mas precisa de marca no topo enquanto se rola.
   Alinhada ao contêiner do conteúdo, igual à nav das outras páginas.
   ========================================================================== */
.topo-marca{position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);
  display:flex;align-items:center;gap:16px;
  padding:22px max(var(--gutter), calc((100% - var(--maxw)) / 2));
  font-family:var(--ff-ui);font-weight:700;font-size:25px;letter-spacing:.2em;
  transition:padding .35s ease,background .35s ease}
.topo-marca img{height:52px;width:auto;
  filter:drop-shadow(0 4px 18px rgba(212,175,55,.42));transition:height .35s ease}
.topo-marca .rei{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.topo-marca .wa{background:var(--silver-grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* mesma regra da nav: encolhe e ganha fundo ao rolar */
.topo-marca.solid{background:rgba(6,6,8,.88);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
  padding:12px max(var(--gutter), calc((100% - var(--maxw)) / 2));font-size:21px}
.topo-marca.solid img{height:38px}


/* ==========================================================================
   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:var(--elev-2);
  font-family:var(--ff-ui);font-weight:600;font-size:var(--fs-etiqueta);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
   ========================================================================== */
.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}

.abertura h1{font-size:var(--fs-d2);font-weight:600;
  max-width:17ch;margin-bottom:26px;letter-spacing:-.025em}
.abertura .intro{font-size:var(--fs-lead);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}
/* Alterna o lado trocando as colunas, não só a ordem: a foto fica sempre na
   coluna estreita (.85fr), senão no card invertido ela cai na coluna larga e
   sai maior que a do outro sócio. */
.socio:nth-child(even){grid-template-columns:1.15fr .85fr}
.socio:nth-child(even) .socio-foto{order:2}
.socio:nth-child(even) .socio-texto{order:1}

/* 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}

/* 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)}

/* A foto aparece inteira, na proporção dela: nada de cover cortando a cabeça. */
.socio-foto img{position:relative;z-index:1;display:block;
  width:100%;height:auto;border-radius:var(--r-xl)}
/* placeholder (quando não há foto) mantém a caixa 4/5 */
.socio-foto .slot{position:relative;z-index:1;
  width:100%;aspect-ratio:4/5;border-radius:var(--r-xl)}

.socio-texto h2{font-size:var(--fs-d4);margin-bottom:6px}
/* rampa de texto, não a de superfície: em 14px o começo em bronze escuro
   apagaria as primeiras letras do cargo */
.socio-papel{font-family:var(--ff-ui);font-size:var(--fs-corpo-p);font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;margin-bottom:26px;
  background:var(--gold-grad-texto);-webkit-background-clip:text;background-clip:text;color:transparent}
.socio-texto p:not(.socio-papel){color:var(--muted);font-size:var(--fs-corpo);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:var(--sup-quente);box-shadow:var(--luz-aresta);
  font-family:var(--ff-corpo);font-weight:400;
  font-size:var(--fs-corpo);line-height:1.62;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
   Mesmo formato dos sócios: mídia de um lado, texto do outro, alternando.

   Três vídeos verticais lado a lado viravam três retângulos estreitos sem
   nada para ler ao lado. No formato dos sócios cada depoimento ganha espaço
   para nome, negócio e o que a pessoa disse, que é o que convence.
   ========================================================================== */
.depoimentos{display:grid;gap:72px;margin-top:52px;overflow-x:clip}

/* Colunas medindo o conteúdo, e o par centralizado.

   Em fração, as duas faixas dividiam a largura toda do contêiner e cada uma
   ficava maior do que o que tem dentro: o vídeo trava em 330px e a frase em
   46ch. O resultado era o bloco inteiro encostado à esquerda com uns 500px
   de vazio à direita, como se estivesse desalinhado da página.

   Com as faixas em max-content elas encolhem até o conteúdo, e o
   justify-content centra o conjunto. A alternância continua igual: o que
   muda de lado é o vídeo, pela ordem, não o tamanho das faixas. */
.depoimento{display:grid;
  grid-template-columns:max-content minmax(0,max-content);
  justify-content:center;gap:52px;align-items:center}
.depoimento:nth-child(even) .depoimento-video{order:2}

/* width fixo, e não max-width com width:100%.

   A faixa da grade agora é max-content, e numa faixa assim o width:100% não
   tem contra o que resolver: o navegador cai no conteúdo do slot e o vídeo
   encolhia de 330 para 281. Com a largura escrita, a faixa mede 330 e o
   max-width:100% ainda deixa ele diminuir quando o espaço for menor. */
.depoimento-video{position:relative;aspect-ratio:9/16;width:330px;max-width:100%}
/* mesmo brilho de apoio das fotos dos sócios, pela mesma razão: descolar a
   mídia do fundo preto sem precisar de moldura pesada */
.depoimento-video::before{content:"";position:absolute;inset:-12%;z-index:0;
  background:radial-gradient(circle,rgba(212,175,55,.18),transparent 62%);filter:blur(32px)}
.depoimento-video video,
.depoimento-video .slot{position:relative;z-index:1;
  width:100%;height:100%;border-radius:var(--r-xl)}
.depoimento-video video{object-fit:cover;display:block;border:1px solid var(--line)}

.depoimento-texto blockquote{font-family:var(--ff-display);font-weight:500;
  font-size:var(--fs-lead);line-height:1.55;color:var(--silver-hi);
  max-width:46ch;margin-bottom:24px;position:relative;padding-left:26px}
.depoimento-texto blockquote::before{content:"";position:absolute;left:0;top:6px;bottom:6px;
  width:3px;border-radius:3px;background:var(--gold-grad)}

.depoimento-quem b{display:block;font-family:var(--ff-ui);font-size:var(--fs-corpo-g);font-weight:600;color:var(--ink)}
.depoimento-quem span{font-size:var(--fs-corpo-p);color:var(--muted)}

.depoimentos-apoio{margin-top:52px;text-align:center;color:var(--muted);
  font-size:var(--fs-corpo);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:var(--fs-d2);font-weight:600;
  letter-spacing:-.03em;margin-bottom:36px}
.manifesto p{color:var(--muted);font-size:var(--fs-corpo-g);max-width:62ch;margin-bottom:20px}
.manifesto .fecho{font-family:var(--ff-display);font-weight:600;color:var(--ink);
  font-size:var(--fs-titulo);line-height:1.35;letter-spacing:-.01em;
  max-width:26ch;margin-top:14px}
.acao-manifesto{margin-top:42px}


/* ==========================================================================
   RESULTADOS EM DETALHE

   Vieram da página de cases, que saiu do ar: o detalhe de cada campanha
   passou a morar aqui, dentro da seção de resultados desta página. A home
   continua com os quatro painéis simples e o botão dela aponta para cá.

   O que lá era respiro de seção (a página tinha uma seção para o resumo e
   outra para a lista) aqui é margem interna, porque tudo agora é uma seção
   só. Os valores saem da escala de espaço.
   ========================================================================== */

/* --- resumo: os quatro números de longe, antes do detalhe --- */
.grade-resumo{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--e-6) var(--e-6);margin-top:var(--e-7);padding-top:var(--e-7);
  border-top:1px solid var(--line)}
.resumo-item{display:flex;flex-direction:column;gap:10px}
/* white-space:nowrap porque "R$ 1,27" tem o dobro de caracteres de "83", e
   quebrar o valor em duas linhas o tira da categoria de manchete */
.resumo-item b{font-family:var(--ff-display);font-weight:600;line-height:1;
  font-size:var(--fs-d4);letter-spacing:var(--ls-display);white-space:nowrap;
  background-image:var(--gold-grad-texto);background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;color:transparent}
.resumo-item span{font-size:var(--fs-corpo-p);line-height:1.5;color:var(--muted);
  max-width:24ch}

/* --- um bloco por campanha ---

   Painel de um lado, leitura do outro, alternando a cada bloco. A
   alternância não é enfeite: quatro blocos com a imagem sempre à esquerda
   viram uma coluna de imagens com texto pendurado, e o olho para de
   percorrer cada um.

   minmax(0,...) nas duas colunas porque a tabela de métricas tem valores
   que não quebram (R$ 11.400,40), e o mínimo automático de uma coluna de
   grade é o conteúdo: sem isso a coluna da direita empurraria a da
   esquerda. */
.lista-cases{margin-top:var(--e-9)}
.case-bloco{display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);
  gap:var(--e-8);align-items:center}
.case-bloco + .case-bloco{margin-top:var(--e-9)}
.case-bloco:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,520px)}
.case-bloco:nth-child(even) .grafico-img{order:2}

/* o .grafico-img, com a lupa no hover, é o mesmo componente da home e mora
   em 04-components.css */
.case-bloco .grafico-img{max-width:520px}

.case-texto{display:flex;flex-direction:column}

.case-setor{font-family:var(--ff-ui);font-size:var(--fs-etiqueta);font-weight:600;
  letter-spacing:var(--ls-etiqueta);text-transform:uppercase;color:var(--gold-hi);
  margin-bottom:var(--e-3)}

/* o número é a manchete do bloco: é ele que se lê de longe */
.case-numero{font-family:var(--ff-display);font-weight:600;line-height:.95;
  font-size:var(--fs-d1);letter-spacing:var(--ls-display);white-space:nowrap;
  background-image:var(--gold-grad-texto);background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;color:transparent}
/* "Mais de" não é parte do número: entra acima, em corpo pequeno, senão a
   linha inteira teria de encolher para caber e o 20 mil perderia peso */
.case-antes{display:block;font-size:.3em;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:.35em}

.case-frase{margin-top:var(--e-4);font-size:var(--fs-corpo-g);line-height:1.5;
  color:var(--ink);max-width:34ch}
.case-leitura{margin-top:var(--e-4);font-size:var(--fs-corpo);line-height:var(--lh-corpo);
  color:var(--muted);max-width:44ch}

/* --- tabela de métricas ---
   <dl> e não <table>: são pares rótulo/valor, não linhas e colunas com
   cabeçalho. Leitor de tela anuncia "Leads, 6.820" em vez de fazer a pessoa
   navegar uma grade que não existe. */
.case-metricas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;margin:var(--e-6) 0 0;padding:0;
  background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-md);overflow:hidden;box-shadow:var(--luz-aresta)}
.case-metricas > div{background:#08080a;padding:14px 16px;
  display:flex;flex-direction:column;gap:5px}
.case-metricas dt{font-size:var(--fs-etiqueta);letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);line-height:1.3}
.case-metricas dd{margin:0;font-family:var(--ff-ui);font-weight:700;
  font-size:var(--fs-corpo);color:var(--ink);letter-spacing:-.01em;white-space:nowrap}

#resultados .disclaimer{margin-top:var(--e-9)}


/* ==========================================================================
   FECHO DOS RESULTADOS
   A chamada para conversa que a página não tinha depois da prova.
   ========================================================================== */
/* O fecho continua o assunto dos resultados: os dois encostam no compasso
   curto, e só a seção de cima fica com o respiro, senão os dois paddings
   somam e a aproximação não acontece. Mesma regra da home. */
#resultados{padding-bottom:var(--sec-y-perto)}
.resultados-fecho{text-align:center;padding-top:var(--sec-y-perto)}
.resultados-fecho .h-sec{margin-left:auto;margin-right:auto;max-width:20ch}
.resultados-fecho-texto{margin:0 auto;max-width:54ch;font-size:var(--fs-corpo-g);
  line-height:var(--lh-corpo);color:var(--muted)}
.resultados-fecho-acao{margin-top:var(--e-7);display:flex;justify-content:center}


/* ==========================================================================
   RESPONSIVO
   A seção de Blog repete a home: a grade e os breakpoints dela são
   compartilhados, em 04-components.css e 06-responsive.css.
   ========================================================================== */
@media(min-width:2300px){
  .case-bloco{grid-template-columns:minmax(0,640px) minmax(0,1fr)}
  .case-bloco:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,640px)}
  .case-bloco .grafico-img{max-width:640px}
}

@media(max-width:1080px){
  /* quatro colunas com "R$ 1,27" dentro pedem 240px cada; abaixo disso o
     número quebra de linha e deixa de ler como manchete */
  .grade-resumo{grid-template-columns:repeat(2,minmax(0,1fr))}

  /* Coluna única, e o painel sempre em cima. A alternância de lado exige
     duas colunas; empilhado, "alternar" viraria só a imagem pulando de
     ordem entre um bloco e outro, o que lê como erro e não como ritmo. */
  .case-bloco,
  .case-bloco:nth-child(even){grid-template-columns:minmax(0,1fr);gap:var(--e-6)}
  .case-bloco:nth-child(even) .grafico-img{order:0}
  .case-bloco .grafico-img{max-width:none}
  .case-frase,
  .case-leitura{max-width:58ch}
}

@media(max-width:760px){
  .case-metricas{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:600px){
  .grade-resumo{grid-template-columns:1fr;gap:var(--e-5)}
  .resumo-item span{max-width:none}
  /* Uma coluna na tabela. Em 390px, duas colunas dão 165px por célula, e
     rótulo como "Conversas por mensagem" quebra em três linhas. */
  .case-metricas{grid-template-columns:1fr}
  .case-metricas > div{flex-direction:row;align-items:baseline;
    justify-content:space-between;gap:16px}
  .case-metricas dt{text-transform:none;letter-spacing:0}
}
@media(max-width:900px){
  .abertura{padding:120px 0 0}
  .abertura + section{padding-top:34px}
  .socios{gap:70px}
  /* O par (Ricardo) herdava grid-template-columns de duas colunas: .socio
     sozinho perde em especificidade para .socio:nth-child(even), então a
     volta para coluna única só vale se o seletor par for zerado junto. Sem
     isto a foto virava miniatura e o texto espremia numa faixa estreita. */
  .socio,
  .socio:nth-child(even){grid-template-columns:1fr;gap:32px}
  /* no empilhado a foto vem sempre primeiro: rosto antes do texto */
  .socio:nth-child(even) .socio-foto,
  .socio:nth-child(even) .socio-texto{order:0}
  .socio-foto{max-width:340px;margin:0 auto;width:100%}

  .depoimentos{gap:56px}
  .depoimento{grid-template-columns:1fr;gap:28px}
  .depoimento:nth-child(even) .depoimento-video{order:0}
  .depoimento-video{max-width:300px;margin:0 auto}
  .depoimento-texto{text-align:left}

  /* 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:var(--fs-etiqueta)}
  .logo-volta img{height:20px}
}