/* Página About us: mesma largura das demais páginas internas (--site-w) e os mesmos cantos entalhados da identidade. */
body[data-pagina="about"] .container{max-width:calc(var(--site-w) + 96px);padding-left:48px;padding-right:48px}
@media (min-width:1367px){body[data-pagina="about"] .cab__in{max-width:var(--site-w)}}
@media (max-width:1100px){body[data-pagina="about"] .container{padding-left:24px;padding-right:24px}}
.lista-hero--sobre{background:linear-gradient(rgba(2,8,14,.50),rgba(2,8,14,.50)),#3B9E8C url("/assets/sobre/about-hero.webp") center/cover no-repeat}

/* nossa história */
.sb-historia{padding-top:90px;padding-bottom:90px}
.sb-historia__grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:70px;align-items:start}
.sb-historia .titulo-secao{font-size:clamp(40px,4.4vw,68px);line-height:1.02}
.sb-historia__texto{display:flex;gap:24px;align-items:flex-start;margin-top:26px;flex-wrap:wrap}.sb-historia__texto p{flex:1 1 280px;max-width:52ch;color:var(--texto);line-height:1.75;font-size:15.5px}
.sb-linha{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.sb-marco{--c:26px;display:grid;grid-template-columns:150px minmax(0,1fr);gap:22px;align-items:start;padding:16px 20px 18px 16px;
  clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,0 100%)}
.sb-marco:nth-child(even){background:linear-gradient(180deg,var(--fundo-claro),rgba(240,249,247,0))}
.sb-marco h3{font:600 17px/1.25 var(--fonte-texto);color:#14232f;margin:2px 0 8px}.sb-marco p{font-size:14px;line-height:1.65;color:var(--texto)}
.sb-ano{position:relative;display:block;aspect-ratio:150/118;border-radius:12px;overflow:hidden;background:var(--sb-foto,none) center/cover,linear-gradient(135deg,#8fa5a0,#46605b)}
.sb-ano::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(4,12,30,0) 40%,rgba(4,12,30,.45))}
.sb-ano b{z-index:2;position:absolute;left:10px;bottom:4px;font:900 44px/1 var(--fonte-titulo);color:var(--primario);text-shadow:0 2px 10px rgba(4,12,30,.35)}
.sb-ano--2000{--sb-foto:url("/assets/sobre/2000.webp");--sb-cor:url("/assets/sobre/2000-cor.webp")}
.sb-ano--2025a{--sb-foto:url("/assets/sobre/2025-vizinho.webp");--sb-cor:url("/assets/sobre/2025-vizinho-cor.webp")}
.sb-ano--2025b{--sb-foto:url("/assets/sobre/2025-gamejam.webp")}.sb-ano--2026{--sb-foto:url("/assets/sobre/2026.webp")}
.sb-ano::after{content:"";position:absolute;inset:0;background:var(--sb-cor,none) center/cover;opacity:0;transition:opacity .35s}.sb-marco:hover .sb-ano::after{opacity:1}

/* o que nos guia */
.sb-valores{--c:44px;margin:var(--margem);border-radius:var(--raio);padding:96px 0 110px;color:#fff;
  background:radial-gradient(ellipse 38% 70% at 30% 62%,rgba(108,177,121,.9),rgba(108,177,121,0)),linear-gradient(105deg,#99E2B4 0%,#7dc09a 48%,#69ad92 100%);
  clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)))}
.sb-valores .titulo-secao{color:#fff;text-shadow:0 2px 20px rgba(4,12,30,.18)}.sb-valores .rotulo-v{color:#fff}
.sb-valores__lista{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin-top:56px}
.sb-valor{--c:26px;padding:34px 26px 38px;background:linear-gradient(135deg,rgba(255,255,255,.26),rgba(255,255,255,.07));clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c))}
.sb-valor h3{font:600 20px/1.2 var(--fonte-texto);margin-bottom:12px}.sb-valor p{font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.92)}

/* onde trabalhamos */
.sb-banda{--c:44px;margin:90px var(--margem) 0;border-radius:var(--raio);background:var(--fundo-claro);clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c))}
.sb-local{padding-top:90px;padding-bottom:110px}.sb-local .titulo-secao{font-size:clamp(40px,4.4vw,68px);line-height:1.02}
.sb-fotos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:52px auto 0;max-width:1000px}
.sb-foto{position:relative;margin:0;aspect-ratio:3/2;border-radius:12px;overflow:hidden;background:var(--sb-foto,none) center/cover,linear-gradient(135deg,#cfe9e1,#e8f6f1)}
.sb-foto figcaption{position:absolute;left:0;right:0;bottom:0;display:grid;gap:3px;padding:44px 20px 16px;color:#fff;background:linear-gradient(180deg,rgba(4,12,30,0),rgba(4,12,30,.72))}
.sb-foto figcaption b{font:600 18px/1.15 var(--fonte-texto)}.sb-foto figcaption small{font:500 12.5px/1.2 var(--fonte-texto);opacity:.85;letter-spacing:.03em}
.sb-foto--1{--sb-foto:url("/assets/sobre/local-1.webp")}.sb-foto--2{--sb-foto:url("/assets/sobre/local-2.webp")}

/* equipe */
.sb-equipe{padding:80px 0 40px;overflow:hidden;text-align:center}
.sb-equipe__trilho{display:inline-flex;white-space:nowrap;animation:marquee 46s linear infinite}
.sb-equipe__trilho span{font:900 clamp(80px,11vw,170px)/1 var(--fonte-titulo);color:transparent;-webkit-text-stroke:2px rgba(153,226,180,.6);padding:0 .3em;text-transform:uppercase}
.sb-equipe__titulo{position:relative;display:block;width:max-content;max-width:90%;margin:calc(-1 * clamp(40px,5.5vw,85px)) auto 46px;padding:8px 16px;background:#fff;font:900 14px/1 var(--fonte-titulo);letter-spacing:.04em;text-transform:uppercase;color:var(--primario)}
.sb-equipe__lista{display:flex;gap:30px;justify-content:center;flex-wrap:wrap;margin:0;padding:34px 0 0;list-style:none}
/* cartão da pessoa: foto com um recorte (aba) no canto de baixo, onde fica o nome; o cargo vem logo abaixo */
.sb-pessoa{width:min(305px,44vw);text-align:left}
.sb-pessoa__quadro{position:relative;display:block}
.sb-pessoa__foto{--w:57%;--h:42px;--d:34px;display:block;aspect-ratio:305/388;border-radius:20px;overflow:hidden;background:var(--acento);
  clip-path:polygon(0 0,100% 0,100% 100%,var(--w) 100%,calc(var(--w) - var(--d)) calc(100% - var(--h)),0 calc(100% - var(--h)))}
.sb-pessoa__foto img{display:block;width:100%;height:100%;object-fit:cover}
.sb-equipe__ini{display:grid;place-items:center;width:100%;height:100%;font:900 90px/1 var(--fonte-titulo);color:#14232f}
.sb-pessoa__nome{position:absolute;left:0;bottom:-8px;font:900 clamp(22px,2.2vw,29px)/1 var(--fonte-titulo);color:var(--acento);white-space:nowrap}
.sb-pessoa small{display:block;margin-top:20px;font:500 15px/1.2 var(--fonte-texto);color:var(--texto-claro)}

/* faixa inclinada + chamada final */
.sb-faixa{margin:80px 0 0;overflow:hidden;white-space:nowrap;background:var(--primario);color:#fff;padding:20px 0;transform:rotate(-1.6deg);position:relative;z-index:2}
.sb-faixa__trilho{display:inline-flex;animation:marquee 40s linear infinite}
.sb-faixa__trilho span{font:900 clamp(26px,3.4vw,44px)/1 var(--fonte-titulo);text-transform:uppercase;padding:0 .2em}.sb-faixa__trilho span::after{content:"/";margin:0 .7em;opacity:.7}
.sb-final{display:grid;grid-template-columns:minmax(220px,440px) minmax(0,520px);justify-content:center;gap:56px;align-items:center;text-align:center;padding-top:50px;padding-bottom:100px}
.sb-final>img:not(.sb-sparks){width:100%;height:auto;max-width:440px;margin-top:-70px;position:relative;z-index:3}
.sb-final h2{font-size:clamp(34px,3.6vw,54px);color:var(--acento);max-width:12ch;line-height:1.02;margin-inline:auto}.sb-final p{margin:16px auto 26px;max-width:42ch;color:var(--texto);line-height:1.7}

@media (max-width:1100px){.sb-historia__grade{grid-template-columns:minmax(0,1fr);gap:40px}.sb-valores__lista{grid-template-columns:repeat(2,minmax(0,1fr))}.sb-final{grid-template-columns:minmax(160px,300px) minmax(0,1fr);gap:30px}}
@media (max-width:700px){.sb-historia{padding-top:56px;padding-bottom:56px}.sb-marco{grid-template-columns:104px minmax(0,1fr);gap:14px}.sb-ano b{font-size:32px}
  .sb-valores{padding:64px 0 72px}.sb-valores__lista{grid-template-columns:1fr;margin-top:36px}.sb-fotos{grid-template-columns:1fr}.sb-banda{margin-top:60px}.sb-local{padding-top:60px;padding-bottom:70px}
  .sb-final{grid-template-columns:1fr;text-align:center;justify-items:center}.sb-final>img:not(.sb-sparks){max-width:260px;margin-top:-40px}}
@media (prefers-reduced-motion:reduce){.sb-equipe__trilho,.sb-faixa__trilho{animation:none}}

/* respingos decorativos (não atrapalham clique nem leitura) */
.sb-historia,.sb-final{position:relative}
.sb-sparks{position:absolute;pointer-events:none;user-select:none;width:min(46vw,620px);height:auto;opacity:.75;z-index:0}
.sb-sparks--b{left:-3%;bottom:-100px;width:min(40vw,520px)}
.sb-historia__grade,.sb-final>*:not(.sb-sparks){position:relative;z-index:1}
@media (max-width:700px){.sb-sparks{opacity:.4;width:80vw}}