/* ==========================================================================
   /sobre, editorial claro: fundo claro com textura leve, tipografia grande, trajetoria em linha do
   tempo, foto grande do Leo e as frentes em lista numerada, sem cards. Depende de /styles.css
   (tokens, menu, rodape, botoes e as animacoes .reveal).
   ========================================================================== */
body.pagina-clara{background:var(--light-bg);color:var(--ink-2)}
/* o menu e de vidro claro com texto branco; no fundo claro ele fica sempre na versao escura */
.pagina-clara .header .nav{background:linear-gradient(135deg,rgba(20,8,40,.92) 0%,rgba(12,5,30,.88) 55%,rgba(123,22,219,.62) 100%);border-color:rgba(123,22,219,.35)}

.sb2{position:relative;overflow:hidden;color:var(--ink-2);background:
  radial-gradient(1000px 560px at 92% -6%,rgba(123,22,219,.11),transparent 62%),
  radial-gradient(720px 440px at -12% 34%,rgba(123,22,219,.06),transparent 60%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .29 0 0 0 0 .04 0 0 0 0 .54 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E"),
  linear-gradient(180deg,var(--light-bg) 0%,var(--light-bg-2) 100%)}
.sb2-k{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--roxo)}
.sb2-k::before{content:"";width:28px;height:1.5px;background:currentColor}
.sb2-bloco{padding:clamp(56px,7vw,104px) 0;border-top:1px solid rgba(123,22,219,.14)}
.sb2-h2{font-family:var(--f-display);font-weight:600;color:var(--ink);font-size:clamp(26px,3.4vw,44px);line-height:1.1;letter-spacing:-.015em;margin:16px 0 28px;max-width:20ch;text-wrap:balance}

/* topo */
.sb2-hero{padding:clamp(140px,16vw,190px) 0 clamp(56px,7vw,88px)}
.sb2-h1{font-family:var(--f-display);font-weight:600;color:var(--ink);font-size:clamp(34px,6.4vw,90px);line-height:1.02;letter-spacing:-.03em;margin:22px 0 0;max-width:13ch;text-wrap:balance}
.sb2-h1 span{color:var(--roxo)}
.sb2-hero-baixo{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end;margin-top:clamp(32px,4vw,48px);padding-top:28px;border-top:1px solid rgba(123,22,219,.24)}
.sb2-lead{font-size:clamp(17px,1.5vw,21px);line-height:1.6;color:var(--ink-2);max-width:56ch;margin:0}
.sb2-raio{width:clamp(64px,7vw,96px);height:auto;filter:drop-shadow(0 14px 30px rgba(123,22,219,.35))}

/* trajetoria: a linha passa pelos pontos no topo de cada etapa */
.sb2-tempo{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));position:relative}
.sb2-tempo::before{content:"";position:absolute;left:0;right:0;top:6px;height:1px;background:rgba(123,22,219,.3)}
.sb2-tempo li{position:relative;padding:30px 28px 0 0}
.sb2-tempo li::before{content:"";position:absolute;left:0;top:0;width:13px;height:13px;border-radius:50%;background:var(--light-bg-2);border:2px solid var(--roxo)}
.sb2-tempo li.agora::before{background:var(--roxo);box-shadow:0 0 0 6px rgba(123,22,219,.14)}
.sb2-tempo .ano{display:block;font-family:var(--f-display);font-weight:600;font-size:clamp(28px,3.2vw,44px);line-height:1;color:var(--ink)}
.sb2-tempo li.agora .ano{color:var(--roxo)}
.sb2-tempo p{margin:12px 0 0;font-size:16.5px;line-height:1.55;color:var(--ink-2);max-width:30ch}

/* quem fundou */
.sb2-leo{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(28px,4.5vw,72px);align-items:center}
.sb2-foto{border-radius:24px;overflow:hidden;aspect-ratio:16/11;box-shadow:0 30px 70px rgba(74,10,138,.18)}
.sb2-foto img{width:100%;height:100%;object-fit:cover;display:block}
.sb2-nome{font-family:var(--f-display);font-weight:600;color:var(--ink);font-size:clamp(28px,3.4vw,46px);line-height:1.05;letter-spacing:-.02em;margin:16px 0 8px}
.sb2-papel{font-size:15px;color:var(--ink-mute);margin:0 0 20px}
.sb2-bio{font-size:17px;line-height:1.65;color:var(--ink-2);margin:0 0 22px}
.sb2-links{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0}
.sb2-links a{color:var(--roxo);font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(123,22,219,.35)}
.sb2-links a:hover{text-decoration-color:currentColor}

/* as quatro frentes */
.sb2-lista{list-style:none;margin:0;padding:0;border-top:1px solid rgba(123,22,219,.24)}
.sb2-lista li>a,.sb2-lista li>div{display:grid;grid-template-columns:76px minmax(0,1fr) 36px;gap:20px;align-items:baseline;padding:28px 4px;border-bottom:1px solid rgba(123,22,219,.24);color:inherit}
.sb2-lista .n{font-family:var(--f-display);font-weight:600;font-size:clamp(18px,1.8vw,24px);color:var(--roxo)}
.sb2-lista b{display:block;font-family:var(--f-display);font-weight:600;font-size:clamp(21px,2.5vw,34px);line-height:1.12;letter-spacing:-.015em;color:var(--ink);transition:color .2s ease}
.sb2-lista em{display:block;font-style:normal;margin-top:8px;font-size:16.5px;line-height:1.55;color:var(--ink-2);max-width:62ch}
.sb2-lista .seta{width:28px;height:28px;color:var(--roxo);align-self:center;transition:transform .25s ease}
.sb2-lista a:hover b{color:var(--roxo)}
.sb2-lista a:hover .seta{transform:translateX(6px)}

/* como trabalha */
.sb2-principios{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px;margin-top:28px}
.sb2-principios div{padding:24px 0;border-top:1px solid rgba(123,22,219,.24)}
.sb2-principios h3{font-family:var(--f-display);font-weight:600;font-size:19px;line-height:1.3;color:var(--ink);margin:0 0 8px}
.sb2-principios p{margin:0;font-size:16.5px;line-height:1.55;color:var(--ink-2)}

/* clientes */
.sb2-logos{display:flex;flex-wrap:wrap;align-items:center;gap:28px 48px;margin-top:30px}
.sb2-logos img{height:30px;width:auto;opacity:.72;filter:grayscale(1)}
.sb2-logos .lg{display:inline-flex;align-items:center;gap:8px}
.sb2-logos img.alto{height:42px}
.sb2-logos .lg-nome{font-family:var(--f-display);font-weight:600;font-size:15px;color:var(--ink);opacity:.72}
.sb2-vermais{display:inline-flex;align-items:center;gap:8px;margin-top:34px;color:var(--roxo);font-weight:600}
.sb2-vermais .seta{width:20px;height:20px;transition:transform .25s ease}
.sb2-vermais:hover .seta{transform:translateX(5px)}

/* chamada final */
.sb2-cta{padding:clamp(80px,10vw,140px) 0;text-align:center;border-top:1px solid rgba(123,22,219,.14)}
.sb2-cta h2{font-family:var(--f-display);font-weight:600;color:var(--ink);font-size:clamp(28px,4.6vw,64px);line-height:1.06;letter-spacing:-.025em;margin:0 auto;max-width:17ch;text-wrap:balance}
.sb2-cta p{font-size:18px;line-height:1.6;color:var(--ink-2);margin:20px auto 32px;max-width:52ch}

@media(max-width:860px){
  .sb2-hero-baixo{grid-template-columns:minmax(0,1fr)}
  .sb2-raio{display:none}
  .sb2-tempo{grid-template-columns:minmax(0,1fr)}
  .sb2-tempo::before{left:6px;right:auto;top:6px;bottom:24px;width:1px;height:auto}
  .sb2-tempo li{padding:0 0 30px 34px}
  .sb2-tempo p{max-width:none}
  .sb2-leo{grid-template-columns:minmax(0,1fr)}
  .sb2-lista li>a,.sb2-lista li>div{grid-template-columns:40px minmax(0,1fr) 24px;gap:14px;padding:22px 0}
  .sb2-lista .seta{width:22px;height:22px}
  .sb2-principios{grid-template-columns:minmax(0,1fr)}
  .sb2-logos{gap:22px 32px}
  .sb2-logos img{height:24px}
  .sb2-logos img.alto{height:34px}
}
@media(prefers-reduced-motion:reduce){
  .sb2-lista .seta,.sb2-vermais .seta,.sb2-lista b{transition:none}
}