/* =====================================================================
   Quem somos · /quem-somos
   Papel (abertura, os dois sócios e os créditos de cada um com a prova ao lado) · Papel (marcas)
   · Noite (a história, com a ponte pro caso de casa) · Noite (fecho).
   Tokens e componentes no base.css; o painel desenhado no telas.css.
   ===================================================================== */

/* ---------- 1. Abertura ---------- */
.qs-abertura{padding-top:calc(var(--cabecalho-altura) + var(--e7))}
@media (min-width:1024px){ .qs-abertura{padding-top:calc(var(--cabecalho-altura) + var(--e6));padding-bottom:calc(var(--secao) * .5)} }
.qs-cabeca{display:flex;align-items:center;justify-content:space-between;gap:var(--e5);padding-bottom:var(--e4);border-bottom:1px solid var(--linha);margin-bottom:var(--e6)}
@media (min-width:1024px){ .qs-cabeca{margin-bottom:var(--e5)} }
.qs-nomes{color:var(--apoio);text-transform:uppercase;letter-spacing:.02em}
.qs-titulo{max-width:15ch}
/* no computador o título cabe numa linha só: sobra altura pra os dois rostos aparecerem inteiros na primeira tela */
@media (min-width:1024px){ .qs-titulo{max-width:none;font-size:min(5.6rem, 4.6vw);line-height:1} }
/* telas de 320: "do seu negócio." e "com os sócios." cabem numa linha (sem palavra sozinha) */
@media (max-width:359px){ .qs-titulo,.fecho .fecho-titulo{font-size:2.25rem} }
.qs-apoio{margin-top:var(--e5)}
@media (min-width:1024px){ .qs-apoio{margin-top:var(--e4);max-width:none} } /* uma linha só no computador */
/* "responde no WhatsApp" é o caminho pro WhatsApp na primeira tela, discreto, dentro da frase */
.qs-apoio-whats{color:var(--texto);text-decoration:underline;text-decoration-color:var(--apoio);text-decoration-thickness:1px;text-underline-offset:.22em;transition:color var(--d-ui),text-decoration-color var(--d-ui)}
@media (hover:hover) and (pointer:fine){ .qs-apoio-whats:hover{color:var(--acento);text-decoration-color:currentColor} }

/* ---------- 2. Os dois sócios: retrato grande ----------
   Os dois arquivos já saem com o MESMO recorte 4:5 e a MESMA altura de rosto (olhos a 31% da altura,
   cabeça com 48% da altura), em preto e branco com contraste parecido. Aqui só se encaixa. */
.socios-par{margin-top:var(--e8);display:grid;grid-template-columns:minmax(0,1fr);row-gap:var(--e9)}
.socio{min-width:0}
.socio-foto{position:relative;margin:0;aspect-ratio:4/5;border-radius:var(--r-painel);overflow:hidden;background:var(--noite-painel);isolation:isolate}
.socio-recorte{position:absolute;inset:0}
.socio-recorte picture,.socio-recorte img{display:block;width:100%;height:100%}
.socio-recorte img{object-fit:cover;object-position:50% 0%}
/* legenda dentro da foto, sobre o degradê Noite no terço de baixo */
.socio-foto::after{content:"";position:absolute;inset:auto 0 0 0;height:46%;z-index:1;pointer-events:none;
  background:linear-gradient(to top, rgba(10,11,13,.86) 0%, rgba(10,11,13,.5) 45%, rgba(10,11,13,0) 100%)}
.socio-legenda{position:absolute;left:20px;right:20px;bottom:20px;z-index:2;display:flex;flex-direction:column;gap:6px}
.socio-nome{font-size:var(--t-destaque);font-weight:700;letter-spacing:-.03em;line-height:1.05;color:var(--claro)}
.socio-faz{font-size:12px;color:#D4D6DB;text-transform:uppercase;letter-spacing:.02em;line-height:1.35}
/* o perfil de cada sócio, pra quem quer conferir que é gente de verdade. Discreto, embaixo do que ele faz;
   alvo de 44 px com margem negativa (a legenda não cresce no olho), abre em nova aba (fora da cortina) */
.socio-insta{display:inline-flex;align-items:center;width:fit-content;min-height:44px;margin:-10px 0 -14px;
  font-size:13px;line-height:1.2;letter-spacing:.01em;color:var(--claro);
  text-decoration:underline;text-decoration-color:rgba(245,245,242,.5);text-decoration-thickness:1px;text-underline-offset:.3em;
  transition:color var(--d-ui),text-decoration-color var(--d-ui)}
.socio-insta:focus-visible{outline-color:var(--menta)}
@media (hover:hover) and (pointer:fine){ .socio-insta:hover{color:var(--menta);text-decoration-color:currentColor} }
@media (min-width:1024px){
  .socio-legenda{left:32px;right:32px;bottom:30px;gap:8px}
  .socio-nome{font-size:clamp(2rem, 1rem + 1.6vw, 2.75rem)}
  .socio-faz{font-size:14px}
  .socio-insta{font-size:14px}
}

/* ---------- 3. Créditos: o número, o que foi e a prova ao lado ----------
   Cada linha: o texto à esquerda e a prova à direita, numa coluna de largura fixa (--prova-w), pra as provas formarem
   uma coluna só. A prova é print real (com o selo), o painel desenhado ou um desenho que sai do dado. Linha sem prova
   na mão (5 e 45 milhões) fica só com o texto, sem enfeite. As duas colunas terminam com um print real. */
.socios-par{--prova-w:120px}
@media (max-width:359px){ .socios-par{--prova-w:96px} }
.creditos{list-style:none;padding:0;margin-top:var(--e3)}
.cred{display:grid;grid-template-columns:minmax(0,1fr) var(--prova-w);column-gap:var(--e4);align-items:start;border-top:1px solid var(--linha);padding:20px 0}
.cred:last-child{border-bottom:1px solid var(--linha)}
.cred--texto{grid-template-columns:minmax(0,1fr)}
.cred-texto{min-width:0}
.cred-numero{
  font-size:clamp(1.625rem, 1.2rem + 2vw, 2rem);font-weight:700;letter-spacing:-.04em;line-height:1.04;
  color:var(--texto);font-variant-numeric:tabular-nums;text-wrap:balance;
}
.cred-numero--acento{color:var(--acento)}
.cred-junto{white-space:nowrap}
.cred-legenda{margin-top:6px;font-size:15px;line-height:1.42;color:var(--apoio)}
.cred>.prova{justify-self:end}

@media (min-width:1024px){
  .socios-par{--prova-w:176px;margin-top:var(--e7);grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px, 3.4vw, 56px);row-gap:0;
    grid-template-rows:auto repeat(4, auto)}
  /* as linhas dos dois andam juntas: o filete de um sócio fica na mesma altura do filete do outro */
  .socio{display:grid;grid-row:span 5;grid-template-rows:subgrid}
  .creditos{grid-row:span 4;display:grid;grid-template-rows:subgrid;margin-top:var(--e6)}
  .cred{padding:var(--e6) 0;column-gap:var(--e6)}
  .cred-numero{font-size:clamp(1.875rem, 1.48rem + 1.69vw, 3rem);line-height:1.02}
  .cred-legenda{margin-top:var(--e2);font-size:var(--t-texto);max-width:30ch}
}
@supports not (grid-template-rows:subgrid){
  @media (min-width:1024px){ .socio,.creditos{display:block} }
}

/* as provas */
.prova{margin:0;display:flex;flex-direction:column;gap:10px;align-items:flex-start;width:var(--prova-w);min-width:0}
.prova-legenda{font-family:var(--fonte-mono);font-size:11px;font-weight:500;letter-spacing:.04em;line-height:1.35;text-transform:uppercase;color:var(--apoio);text-wrap:balance}
@media (max-width:1023px){ .prova{gap:8px} .prova-legenda{font-size:10px;letter-spacing:.03em} }
@media (min-width:1024px){ .prova-legenda{font-size:12px} }

/* 262 mil para 1 milhão: 100 pontos, 1 ponto = 10 mil seguidores. Os 26 de baixo (o começo) em cinza, os 74 de cima em verde */
.pontos{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:calc(var(--prova-w) * .042);width:100%}
.pontos>i{display:block;aspect-ratio:1;border-radius:50%;background:var(--acento)}
.pontos>i.a{background:color-mix(in srgb, var(--texto) 24%, var(--fundo))}

/* top 10 do YouTube Rewind: uma linha por posição; as três da LOUD (1º, 8º e 9º) em verde */
.ranking{list-style:none;padding:0;margin:0;display:grid;gap:4px;width:100%}
.ranking>li{display:grid;grid-template-columns:2.1em minmax(0,1fr) 1.9em;align-items:center;column-gap:8px;
  font-family:var(--fonte-mono);font-size:10px;font-weight:500;line-height:1;color:var(--apoio)}
.ranking>li>i{position:relative;display:block;height:4px;border-radius:2px;background:color-mix(in srgb, var(--texto) 13%, transparent)}
.ranking>li.sim{color:var(--texto)}
.ranking>li.sim>i{height:8px;overflow:hidden}
.ranking>li.sim>i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--acento);transform-origin:left center}
.ranking>li>b{font-weight:600;color:var(--acento);text-align:right}
@media (max-width:1023px){ .ranking{gap:3px} .ranking>li{column-gap:5px;font-size:9px} .ranking>li.sim>i{height:6px} }
@media (min-width:1024px){ .ranking>li{font-size:11px} }

/* mais de 15 canais: 1 bloco = 1 canal, no formato de tela de vídeo */
.blocos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:calc(var(--prova-w) * .05);width:100%}
.blocos>i{display:block;aspect-ratio:16/10;border-radius:3px;background:var(--apoio)}

/* print real dentro da janela fina, com o selo embaixo */
.prova--print .janela{width:100%}
.prova--print .janela-barra{height:22px;padding:0 10px}
.prova--print img{display:block;width:100%;height:auto;aspect-ratio:281/437;object-fit:cover}
@media (max-width:1023px){ .prova--print .janela-barra{height:18px;padding:0 7px} .prova--print .viral-conta{font-size:9px} }

/* o painel do cliente (tela desenhada do telas.js), só a parte de cima do aparelho */
.prova--fone .iphone-recorte{--iphone-w:var(--prova-w);--recorte:.6}

/* o dado acende quando chega na tela: o socios.js arma (.prova--armada) e acende (.prova--viva) uma vez.
   Sem JS, com movimento reduzido ou sem o gatilho, nada é armado e fica o estado final. */
.prova--armada .pontos>i:not(.a){background:var(--linha-forte)}
.prova--viva .pontos>i:not(.a){background:var(--acento);transition:background-color .45s var(--ease-entra) calc(var(--k) * 13ms)}
.prova--armada .ranking>li.sim>i::after{transform:scaleX(0)}
.prova--viva .ranking>li.sim>i::after{transform:none;transition:transform .8s var(--ease-entra) calc(.12s + var(--k) * .16s)}
.prova--armada .ranking>li>b{opacity:0}
.prova--viva .ranking>li>b{opacity:1;transition:opacity .4s ease calc(.5s + var(--k) * .16s)}
.prova--armada .blocos>i{background:var(--linha-forte)}
.prova--viva .blocos>i{background:var(--apoio);transition:background-color .35s var(--ease-entra) calc(var(--k) * 45ms)}

/* ---------- 4. Marcas (o mesmo mural do Início, compacto) ---------- */
.qs-marcas-titulo{margin:var(--e4) 0 var(--e5);max-width:19ch;font-size:var(--t-titulo)}
.qs-marcas-titulo .grad{display:block}
/* celular: "da Presq já trabalharam." numa linha só em qualquer largura (a frase mede ~11,2em) */
@media (max-width:1023px){ .qs-marcas-titulo{font-size:min(var(--t-titulo), calc((100vw - 44px) / 11.2))} }
.qs-logos>li{min-height:46px;padding:7px 8px}
@media (min-width:600px){ .qs-logos>li{min-height:88px} }
@media (min-width:1024px){ .qs-marcas-titulo{margin-bottom:var(--e7)} .qs-logos>li{min-height:104px} }
/* filetes do mural dentro de cada célula (e não no fundo da lista): antes de os logos entrarem em cascata, a grade fica
   só com a borda, sem virar um bloco cinza. 2 colunas no celular, 7 a partir de 600 px */
.qs-logos{gap:0;background:transparent}
.qs-logos>li{box-shadow:inset -1px -1px 0 var(--linha)}
.qs-logos>li:nth-child(2n){box-shadow:inset 0 -1px 0 var(--linha)}
.qs-logos>li:nth-last-child(-n+2){box-shadow:inset -1px 0 0 var(--linha)}
.qs-logos>li:nth-child(2n):nth-last-child(-n+2){box-shadow:none}
@media (min-width:600px){
  .qs-logos>li,.qs-logos>li:nth-child(2n),.qs-logos>li:nth-last-child(-n+2){box-shadow:inset -1px -1px 0 var(--linha)}
  .qs-logos>li:nth-child(7n){box-shadow:inset 0 -1px 0 var(--linha)}
  .qs-logos>li:nth-last-child(-n+7){box-shadow:inset -1px 0 0 var(--linha)}
  .qs-logos>li:nth-last-child(1){box-shadow:none}
}
/* os 14 logos ficam fora da primeira carga: o .svg só é pedido quando o mural chega perto (o socios.js põe .perto) */
html.js .qs-logos:not(.perto) .logo{-webkit-mask:none!important;mask:none!important;background-color:transparent!important}

/* ---------- 5. A história (Noite) ---------- */
.qs-historia-grade{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--e7)}
.qs-historia h2{max-width:14ch}
.historia{list-style:none;padding:0}
.historia-linha{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--e3);border-top:1px solid var(--linha);padding:var(--e6) 0}
.historia-linha:last-child{border-bottom:1px solid var(--linha)}
.historia-num{color:var(--acento);font-size:13px}
.historia-frase{font-size:clamp(1.625rem, 1.17rem + 1.95vw, 2.875rem);font-weight:650;letter-spacing:-.032em;line-height:1.12;max-width:24ch}
@media (min-width:1024px){
  .qs-historia-grade{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start}
  .qs-historia-cabeca{grid-column:1 / 6;position:sticky;top:calc(var(--cabecalho-altura) + var(--e7))}
  .historia{grid-column:6 / 13}
  .historia-linha{grid-template-columns:72px minmax(0,1fr);gap:0;padding:var(--e7) 0}
  .historia-num{padding-top:.9em;font-size:14px}
}
/* a ponte pro caso de casa, uma linha com link no pé da história */
.historia-casa{margin-top:var(--e6);font-size:var(--t-texto);line-height:1.5;color:var(--apoio);max-width:46ch}
.historia-casa .link-seta{display:inline-flex;margin-top:0;color:var(--claro);white-space:nowrap}
@media (min-width:1024px){ .historia-casa{grid-column:6 / 13;margin-top:var(--e7)} }

/* a história e o fecho são duas telas Noite seguidas: um filete separa */
.qs-historia + .fecho{padding-top:0}
.qs-historia + .fecho>.conteudo{padding-top:calc(var(--secao) * .6);
  background:linear-gradient(var(--filete-noite),var(--filete-noite)) var(--margem) 0 / calc(100% - 2 * var(--margem)) 1px no-repeat}

/* ---------- Celular: mesma página, mais enxuta ---------- */
@media (max-width:1023px){
  .qs-abertura{padding-bottom:var(--e5)}
  .socios-par{margin-top:var(--e7);row-gap:0}
  /* retrato em largura total, quadrado: a cabeça fica inteira (o recorte é o mesmo dos dois) */
  .socio-foto{aspect-ratio:1/1}
  .socio-recorte img{object-position:50% 4%}
  .socio-foto::after{height:52%}
  /* reserva do botão fixo no pé de cada lista de créditos (o botão nunca cobre número nem legenda) */
  .creditos{padding-bottom:var(--reserva-fixo)}
  .qs-historia{padding-block:var(--e8)}
  .qs-historia-grade{gap:var(--e5)}
  .historia-linha{padding:var(--e5) 0;gap:var(--e2)}
  .historia-frase{font-size:clamp(1.375rem, 1.1rem + 1.3vw, 1.625rem);line-height:1.16}
}
/* título da história: "o seu negócio." nunca se separa (sem "o" sobrando no fim da linha) */
.qs-junto{white-space:nowrap}