/* /sobre (rascunho, 2026-10-10). Figma: desktop 29:1532 (1440), celular 54:2404 (390). */

/* Topo: adesivo "Hello my name is Bulb Hub" + frase de abertura */
.so-topo .miolo{display:flex;flex-direction:column;align-items:center;gap:calc(28 * var(--px));
  padding:calc(200 * var(--px)) calc(96 * var(--px)) calc(120 * var(--px));}
.so-ola{width:calc(666 * var(--px));height:calc(467 * var(--px));display:flex;align-items:center;justify-content:center;}
.so-ola>*{width:calc(627 * var(--px));height:auto;transform:rotate(6deg);
  filter:drop-shadow(0 calc(10 * var(--px)) calc(18 * var(--px)) rgba(0,0,0,.18));}
.so-intro{width:calc(780 * var(--px));text-align:center;color:var(--claro);
  font-size:calc(18 * var(--px));line-height:1.5;letter-spacing:-.03em;}

/* Fatos (só celular) */
.so-fatos .miolo{padding:calc(48 * var(--px)) calc(24 * var(--px));}
.so-fatos-lista{display:flex;flex-direction:column;gap:calc(16 * var(--px));}
.so-fatos-lista li{display:flex;flex-direction:column;gap:calc(6 * var(--px));padding:0 calc(24 * var(--px));}
.so-fatos-lista .display{font-size:calc(40 * var(--px));line-height:1;color:var(--laranja);}

/* Acreditamos: manifesto + visão e missão */
.so-acreditamos .miolo{display:flex;gap:calc(72 * var(--px));align-items:flex-start;
  padding:calc(120 * var(--px)) calc(96 * var(--px)) calc(140 * var(--px));}
.so-manifesto{flex:1 0 0;min-width:0;display:flex;flex-direction:column;gap:calc(4 * var(--px));font-weight:400;}
.so-manifesto .acento{font-size:calc(64 * var(--px));}
.so-manifesto .display{font-size:calc(112 * var(--px));line-height:.96;}
.so-manifesto .display>span{display:block;}
.so-visao-missao{width:calc(380 * var(--px));flex-shrink:0;display:flex;flex-direction:column;gap:calc(56 * var(--px));padding-top:calc(40 * var(--px));}
.so-bloco{display:flex;flex-direction:column;gap:calc(8 * var(--px));}
.so-bloco h3{font-size:calc(56 * var(--px));font-weight:300;}
.so-bloco p{padding-left:calc(52 * var(--px));font-size:calc(18 * var(--px));line-height:1.45;letter-spacing:-.03em;}

/* No que acreditamos (valores) */
.so-valores{overflow:hidden;}
.so-valores .miolo{display:flex;gap:calc(96 * var(--px));align-items:flex-start;padding:calc(120 * var(--px)) calc(96 * var(--px));}
.so-valores-titulo{flex:1 0 0;min-width:0;}
.so-valores-titulo>h2{font-size:calc(104 * var(--px));line-height:.96;}
.so-valores-lista{flex:1 0 0;min-width:0;display:flex;flex-direction:column;gap:calc(20 * var(--px));
  font-size:calc(16 * var(--px));letter-spacing:-.03em;}
.so-valores-lista li{display:flex;flex-direction:column;gap:calc(4 * var(--px));}
.so-valores-lista h3{font-size:inherit;font-weight:400;line-height:1.25;}
.so-valores-lista p{line-height:1.5;}
.so-chave{left:calc(590 * var(--px));top:calc(92 * var(--px));}

/* Cabeça de seção: acento laranja + display */
.so-cabeca{display:flex;flex-direction:column;gap:calc(6 * var(--px));}
.so-cabeca .acento{font-size:calc(36 * var(--px));color:var(--laranja);}
.so-cabeca .display{font-size:calc(104 * var(--px));line-height:.96;}

/* Quem faz */
.so-quem .miolo{display:flex;flex-direction:column;gap:calc(48 * var(--px));padding:calc(120 * var(--px)) calc(96 * var(--px));}
.so-socios{display:flex;gap:calc(24 * var(--px));}
.so-socios li{flex:1 0 0;min-width:0;display:flex;flex-direction:column;gap:calc(12 * var(--px));align-items:flex-start;}
.so-foto{width:100%;height:calc(360 * var(--px));background:#e2dfdc;border:1px dashed #c4beb8;display:flex;align-items:center;justify-content:center;
  padding:calc(16 * var(--px));text-align:center;font-weight:700;font-size:calc(12 * var(--px));line-height:1.25;letter-spacing:-.03em;}
.so-socios .so-foto-img{display:block;object-fit:cover;border:0;padding:0;background:none;}
.so-socios .so-foto span{text-transform:uppercase;}
.so-nome{font-weight:400;font-size:calc(22 * var(--px));line-height:1.18;letter-spacing:-.03em;}
.so-socios .b15{line-height:1.5;}

/* Quem já confiou */
.so-confiado .miolo{display:flex;flex-direction:column;gap:calc(24 * var(--px));padding:calc(72 * var(--px)) calc(96 * var(--px));}
.so-logos{padding:calc(28 * var(--px)) 0;border-radius:calc(12 * var(--px));}
.so-logos .trilho{align-items:center;}
.so-logos li{flex-shrink:0;height:calc(64 * var(--px));margin-right:calc(72 * var(--px));display:flex;align-items:center;}
.so-logos img{height:calc(44 * var(--px));width:auto;max-width:calc(140 * var(--px));object-fit:contain;}
.so-logos .lg-spotify{height:calc(36 * var(--px));} .so-logos .lg-viden{height:calc(28 * var(--px));}
.so-logos .lg-kobana{height:calc(11 * var(--px));} .so-logos .lg-nuuvem{height:calc(64 * var(--px));}
.so-logos .lg-noah{height:calc(49 * var(--px));} .so-logos .lg-sand{height:calc(29 * var(--px));}

a.link[data-pendente]{cursor:default;}

/* ---------- Celular (quadro de 390) ---------- */
@media (max-width:767px){
  .so-topo .miolo{gap:calc(16 * var(--px));padding:calc(112 * var(--px)) calc(24 * var(--px)) calc(110 * var(--px));}
  .so-ola{width:calc(333.5 * var(--px));height:calc(234 * var(--px));}
  .so-ola>*{width:calc(314 * var(--px));}
  .so-intro{width:100%;text-align:left;color:var(--branco);font-size:calc(16 * var(--px));}

  .so-acreditamos .miolo{flex-direction:column;gap:calc(40 * var(--px));padding:calc(72 * var(--px)) calc(24 * var(--px)) calc(80 * var(--px));}
  .so-manifesto{flex:none;width:100%;gap:calc(2 * var(--px));}
  .so-manifesto .acento{font-size:calc(32 * var(--px));}
  .so-manifesto .display{font-size:calc(56 * var(--px));}
  .so-manifesto .display>span{display:inline;}
  .so-visao-missao{width:100%;gap:calc(32 * var(--px));padding-top:0;}
  .so-bloco{gap:calc(6 * var(--px));}
  .so-bloco h3{font-size:calc(34 * var(--px));}
  .so-bloco p{padding-left:calc(24 * var(--px));font-size:calc(16 * var(--px));}

  .so-valores .miolo{flex-direction:column;gap:calc(28 * var(--px));padding:calc(72 * var(--px)) calc(24 * var(--px));}
  .so-valores-titulo>div{display:flex !important;flex-direction:column;gap:calc(10 * var(--px));}
  .so-valores-titulo .acento{font-size:calc(26 * var(--px));color:var(--laranja);}
  .so-valores-titulo h2{display:flex;flex-direction:column;gap:calc(10 * var(--px));font-size:calc(48 * var(--px));line-height:1;}
  .so-valores-titulo,.so-valores-lista{flex:none;width:100%;}

  .so-cabeca .acento{font-size:calc(26 * var(--px));}
  .so-cabeca .display{font-size:calc(48 * var(--px));line-height:1;}

  .so-quem .miolo{gap:calc(28 * var(--px));padding:calc(72 * var(--px)) calc(24 * var(--px));}
  .so-socios{flex-wrap:wrap;gap:calc(16 * var(--px));}
  .so-socios li{flex:0 0 calc(163 * var(--px));}
  .so-foto{height:calc(200 * var(--px));padding:calc(16 * var(--px)) calc(8 * var(--px));}
  .so-nome{font-size:calc(21 * var(--px));}

  .so-confiado .miolo{gap:calc(16 * var(--px));padding:calc(48 * var(--px)) calc(24 * var(--px));}
  .so-confiado h2{color:var(--escuro);}
  .so-logos{background:var(--escuro);padding:calc(28 * var(--px)) 0;}
  .so-logos li{height:calc(45 * var(--px));margin-right:calc(24 * var(--px));}
  .so-logos img{height:calc(30 * var(--px));max-width:calc(84 * var(--px));}
  .so-logos .lg-spotify{height:calc(25 * var(--px));} .so-logos .lg-viden{height:calc(20 * var(--px));}
  .so-logos .lg-kobana{height:calc(8 * var(--px));} .so-logos .lg-nuuvem{height:calc(45 * var(--px));}
  .so-logos .lg-noah{height:calc(34 * var(--px));} .so-logos .lg-sand{height:calc(20 * var(--px));}
}

/* ---------- Rolagem (11/10) ---------- */
/* Topo preso por um instante (--a): o adesivo descola (sobe, gira e cresce de leve) e a frase de
   abertura acende da primeira à última palavra. O fundo do texto é um degradê recortado nas letras;
   num <span> em linha, o degradê corre pelas linhas na ordem de leitura. */
.js .so-topo-trilho>.percurso{display:block;height:60svh;}
.js .so-topo-trilho .so-topo{position:sticky;top:0;min-height:100svh;display:flex;align-items:center;}
.so-ola{translate:0 calc(var(--a,0) * -40 * var(--px));rotate:calc(var(--a,0) * -5deg);scale:calc(1 + var(--a,0) * .05);}
.so-intro{--tinta:var(--claro);--luz:calc(.22 + var(--a,1) * .78);}
.so-intro>span{background:linear-gradient(90deg,var(--tinta) calc(var(--luz) * 112% - 12%),rgba(255,255,255,.5) calc(var(--luz) * 112%));
  -webkit-background-clip:text;background-clip:text;color:transparent;}
/* Manifesto preso (--p): as quatro linhas acendem uma a uma; visão e missão chegam no fim */
.js .so-acreditamos-trilho>.percurso{display:block;height:90svh;}
.js .so-acreditamos-trilho .so-acreditamos{position:sticky;top:0;min-height:100svh;display:flex;align-items:center;}
.so-manifesto .display>span{--k:clamp(0, (var(--p,1) - .06 - var(--n) * .16) / .16, 1);
  opacity:calc(.24 + .76 * var(--k));translate:calc((1 - var(--k)) * -40 * var(--px)) 0;}
.so-visao-missao>*{--k:clamp(0, (var(--p,1) - .7 - var(--n,0) * .08) / .16, 1);opacity:var(--k);translate:0 calc((1 - var(--k)) * 30 * var(--px));}
.so-visao-missao>:nth-child(2){--n:1;}
/* Valores: o título anda mais devagar que a página; cada valor entra pela direita, um depois do outro */
.so-valores-titulo>h2{translate:0 calc((var(--v,.5) - .5) * -90 * var(--px));}
.so-valores-lista li{--k:clamp(0, (var(--e,1) - var(--n,0) * .08) / .4, 1);opacity:var(--k);translate:calc((1 - var(--k)) * 50 * var(--px)) 0;}
.so-valores-lista li:nth-child(2){--n:1;} .so-valores-lista li:nth-child(3){--n:2;}
.so-valores-lista li:nth-child(4){--n:3;} .so-valores-lista li:nth-child(5){--n:4;}
/* Quem faz: cabeça sobe; a foto de cada sócio se revela de baixo para cima, em sequência */
.so-quem .so-cabeca>*{--k:clamp(0, (var(--e,1) + .1) / .45, 1);opacity:var(--k);translate:0 calc((1 - var(--k)) * 40 * var(--px));}
.so-socios li{--k:clamp(0, (var(--e,1) - var(--n,0) * .1) / .5, 1);}
.so-socios li:nth-child(2){--n:1;} .so-socios li:nth-child(3){--n:2;} .so-socios li:nth-child(4){--n:3;}
.so-socios .so-foto{clip-path:inset(calc((1 - var(--k)) * 100%) 0 0 0);}
.so-socios li>:not(.so-foto){opacity:var(--k);translate:0 calc((1 - var(--k)) * 20 * var(--px));}
/* Logos: a faixa desliza com a rolagem, por cima do laço */
.so-logos .trilho{translate:calc(var(--v,.5) * -220 * var(--px)) 0;}

@media (max-width:767px){
  .so-intro{--tinta:var(--branco);}
  .js .so-topo-trilho>.percurso{height:45svh;}
  /* no celular o manifesto não fica preso (é mais alto que a tela): acende enquanto passa (--e) */
  .js .so-acreditamos-trilho>.percurso{display:none;}
  .js .so-acreditamos-trilho .so-acreditamos{position:relative;top:auto !important;min-height:0;display:block;}
  .so-manifesto .display>span{--k:clamp(0, (var(--e,1) - var(--n) * .14) / .3, 1);translate:none;}
  .so-visao-missao>*{--k:clamp(0, (var(--e,1) - var(--n,0) * .12) / .45, 1);}
  .so-valores-lista li{translate:calc((1 - var(--k)) * 30 * var(--px)) 0;}
}
@media (prefers-reduced-motion: reduce){
  .js .so-topo-trilho .so-topo,.js .so-acreditamos-trilho .so-acreditamos{position:relative;min-height:0;display:block;}
}