/* ============================================================
   SOBRE (sobre.html): a casa, no padrão das landings do UNA e da Woodstone. Marfim com grão; o depoimento na areia
   (a praia que o Conrado queria em casa); 2026 e 2027 no escuro da tinta, como um capítulo; o fecho no verde do
   rodapé. Cabinet Grotesk 500, Satoshi, Spline Sans Mono; canto curvo único em cima à direita; um acento (cobre no
   claro, caramelo no escuro) na seta, no ano e no foco.
   Assinatura: a linha do tempo, uma faixa de fotos presa na tela que anda na horizontal com a rolagem, com um
   contador de ano que gira junto. Vale só em body[data-page="sobre"].
   ============================================================ */
body[data-page="sobre"] {
  --s-marfim: #f9f6ed; --s-tinta: #191711; --s-verde: #23261b; --s-areia: #d8c7a7; --s-cobre: #8a6a52; --s-caramelo: #b6926f;
  --s-regra: rgba(80, 62, 45, .22); --s-regra-forte: rgba(25, 23, 17, .38); --s-regra-clara: rgba(249, 246, 237, .2);
  --s-display: "Cabinet Grotesk", "Satoshi", "Helvetica Neue", Arial, sans-serif;
  --s-texto: "Satoshi", "Helvetica Neue", Arial, sans-serif;
  --s-dados: "Spline Sans Mono", ui-monospace, Consolas, monospace;
  --s-saida: cubic-bezier(.16, 1, .3, 1); --s-canto: 2px 32px 2px 2px;
  --s-g: var(--ws-gutter, clamp(20px, 3.5vw, 64px)); --s-espaco: clamp(84px, 10vw, 168px);
}
body[data-page="sobre"] .grain-bg { display: none !important; }
body[data-page="sobre"] ::selection { background: var(--s-caramelo); color: var(--s-tinta); }

/* fundos com grão: marfim na página, areia no depoimento, tinta em 2026 e 2027, verde no fecho e no rodapé */
.sobre-pagina { background: var(--s-marfim) image-set(url("../img/una-site/grao-marfim-256.jpg") 1x, url("../img/una-site/grao-marfim-512.jpg") 2x, url("../img/una-site/grao-marfim-768.jpg") 3x);
  color: var(--s-tinta); font-family: var(--s-texto); -webkit-font-smoothing: antialiased; }
.sobre-pagina .so-depoimento { background: var(--s-areia) image-set(url("../img/una-site/grao-areia-256.jpg") 1x, url("../img/una-site/grao-areia-512.jpg") 2x, url("../img/una-site/grao-areia-768.jpg") 3x); }
.sobre-pagina .so-2026 { background: var(--s-tinta) image-set(url("../img/woodstone-site/grao-tinta-256.jpg") 1x, url("../img/woodstone-site/grao-tinta-512.jpg") 2x, url("../img/woodstone-site/grao-tinta-768.jpg") 3x);
  color: var(--s-marfim); }
.sobre-pagina .so-fecho, body[data-page="sobre"] .ws-footer { background: var(--s-verde) image-set(url("../img/woodstone-site/grao-verde-256.jpg") 1x, url("../img/woodstone-site/grao-verde-512.jpg") 2x, url("../img/woodstone-site/grao-verde-768.jpg") 3x);
  color: var(--s-marfim); }
.sobre-pagina, .sobre-pagina .so-depoimento, .sobre-pagina .so-2026, .sobre-pagina .so-fecho, body[data-page="sobre"] .ws-footer { background-size: 256px 256px; background-repeat: repeat; }
body[data-page="sobre"] .ws-footer::before { content: ""; position: absolute; top: 0; left: var(--ws-gutter, 24px); right: var(--ws-gutter, 24px); height: 1px; background: var(--s-regra-clara); }

/* base */
.sobre-pagina :where(section) :is(h1, h2, h3, p, figure, ol, ul, dl, dd, blockquote) { margin: 0; padding: 0; }
.sobre-pagina :where(section) :is(ol, ul) { list-style: none; }
.sobre-pagina :where(section) img { display: block; max-width: none; }
.sobre-pagina section { position: relative; }
.sobre-pagina a:focus-visible, .sobre-pagina button:focus-visible { outline: 2px solid var(--s-cobre); outline-offset: 4px; border-radius: 2px; }
.sobre-pagina :is(.so-2026, .so-fecho) :is(a, button):focus-visible { outline-color: var(--s-caramelo); }
.sobre-pagina figure { position: relative; overflow: hidden; }
.sobre-pagina figure picture { display: block; width: 100%; height: 100%; }
.sobre-pagina figure img { width: 100%; height: 100%; object-fit: cover; }
.sobre-pagina .so-frase { font: 500 clamp(44px, 6.2vw, 112px)/.96 var(--s-display); letter-spacing: -.042em; text-wrap: balance; }
.sobre-pagina .so-titulo { font: 500 clamp(32px, 3.8vw, 64px)/1.04 var(--s-display); letter-spacing: -.034em; text-wrap: balance; }
.sobre-pagina .so-texto { font: 400 clamp(17px, 1.3vw, 21px)/1.6 var(--s-texto); max-width: 40ch; text-wrap: pretty; }
.sobre-pagina .so-legenda { font: 500 11.5px/1.5 var(--s-dados); letter-spacing: .14em; text-transform: uppercase; opacity: .86; }
.sobre-pagina .so-seta { width: 22px; height: 22px; flex: none; }
.sobre-pagina .so-seta path { fill: none; stroke: var(--s-cobre); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s var(--s-saida); }
.sobre-pagina :is(.so-2026, .so-fecho) .so-seta path { stroke: var(--s-caramelo); }
.sobre-pagina .so-link { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 0; color: inherit; text-decoration: none;
  border-bottom: 1px solid currentColor; font: 500 clamp(16px, 1.15vw, 18px)/1.2 var(--s-display); }
@media (hover: hover) { .sobre-pagina :is(.so-link, .so-botao, .so-m26 a):hover .so-seta path { transform: translate(3px, -3px); } }
.sobre-pagina .so-visivel-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ============================================================ 1. abertura: a frase à esquerda, os dois retratos à direita */
.sobre-pagina .so-abre { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px;
  min-height: clamp(640px, 100svh, 1040px); padding: 0 0 0 var(--s-g); }
.sobre-pagina .so-abre-texto { grid-column: 1 / span 5; align-self: end; display: grid; gap: 22px; justify-items: start;
  padding: calc(76px + 48px) 0 clamp(40px, 7vh, 88px); }
.sobre-pagina .so-abre .so-frase { font-size: clamp(48px, 5.4vw, 96px); }
.sobre-pagina .so-abre .so-texto { max-width: 34ch; }
.sobre-pagina .so-abre .so-texto--menor { font-size: clamp(15px, 1.05vw, 17px); max-width: 38ch; opacity: .86; }
/* os dois retratos, colados, saindo pela borda direita e pelo pé da abertura; em cima, uma faixa de marfim para o menu */
.sobre-pagina .so-dupla { grid-column: 6 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding-top: 96px; }
.sobre-pagina .so-retrato { height: 100%; min-height: 0; }
.sobre-pagina .so-retrato:first-child { border-radius: 2px 0 0 0; }
.sobre-pagina .so-retrato figcaption { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: grid; gap: 4px;
  padding: 64px clamp(16px, 1.6vw, 28px) clamp(18px, 2.2vw, 30px); color: var(--s-marfim);
  background: linear-gradient(to top, rgba(25, 23, 17, .62), rgba(25, 23, 17, 0)); }
.sobre-pagina .so-retrato strong { font: 500 clamp(19px, 1.5vw, 25px)/1.1 var(--s-display); letter-spacing: -.02em; }
.sobre-pagina .so-retrato figcaption span { font: 500 11.5px/1.4 var(--s-dados); letter-spacing: .14em; text-transform: uppercase; opacity: .9; }

/* ============================================================ 2. as linhas de atuação (06/10): o título "Do desenho à
   instalação" e um índice das dez linhas, na ordem do dono, que abre cada uma no palco ao lado (no celular, uma embaixo
   da outra). Cada linha mostra as fotos na mesma altura, cada uma na sua proporção, e o texto do dono embaixo; a foto
   entra de baixo para cima, a cortina da home. Sem JS: tudo aberto, uma linha embaixo da outra. */
.sobre-pagina .so-linhas { padding: var(--s-espaco) var(--s-g); }
.sobre-pagina .so-linhas > .so-titulo { max-width: 15ch; font-size: clamp(36px, 4.4vw, 76px); margin-bottom: clamp(40px, 5vw, 84px); }
.sobre-pagina .so-ln-nome { font: 500 clamp(24px, 2.1vw, 34px)/1.1 var(--s-display); letter-spacing: -.03em; }
.sobre-pagina .so-ln-botao { appearance: none; position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%;
  min-height: 52px; margin: 0; padding: 10px 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; }
/* o sinal de abrir e fechar (só no celular): um mais que vira menos */
.sobre-pagina .so-ln-sinal { position: relative; flex: none; width: 16px; height: 16px; }
.sobre-pagina .so-ln-sinal::before, .sobre-pagina .so-ln-sinal::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - .75px); height: 1.5px; background: currentColor; }
.sobre-pagina .so-ln-sinal::after { transform: rotate(90deg); transition: transform .45s var(--s-saida); }
.sobre-pagina .so-ln-botao[aria-expanded="true"] .so-ln-sinal::after { transform: rotate(0deg); }
.sobre-pagina .so-ln-painel { display: grid; gap: 22px; align-content: start; padding: 6px 0 44px; }
.sobre-pagina .so-ln-fotos { display: flex; gap: clamp(8px, .9vw, 14px); }
.sobre-pagina .so-ln-foto { flex: var(--ar) 1 0; min-width: 0; aspect-ratio: var(--ar); border-radius: 2px; }
.sobre-pagina .so-ln-fotos > .so-ln-foto:last-child { border-radius: var(--s-canto); }
/* Projetos: o croqui e o 3D lado a lado, a obra embaixo, na largura toda (a ordem do trabalho); o croqui no papel */
.sobre-pagina .so-ln-fotos--projetos { display: grid; grid-template-columns: 1fr 1fr; }
.sobre-pagina .so-ln-fotos--projetos > .so-ln-foto:last-child { grid-column: 1 / -1; }
.sobre-pagina .so-ln-fotos--projetos > .so-ln-foto:first-child img { mix-blend-mode: multiply; }
.sobre-pagina .so-ln-texto { display: grid; gap: 16px; justify-items: start; }
.sobre-pagina .so-ln-texto .so-texto { max-width: 62ch; font-size: clamp(17px, 1.2vw, 20px); }
.sobre-pagina .so-ln-legenda { opacity: .7; }
/* com JS, no computador: o índice à esquerda (a linha aberta em tinta, com o ponto de cobre; as outras recuam) e o
   palco à direita, com uma linha aberta por vez */
@media (min-width: 992px) {
  .sobre-pagina .so-ln.is-viva { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(10, auto) 1fr; column-gap: 24px; align-items: start; }
  .sobre-pagina .so-ln.is-viva .so-ln-nome { grid-column: 1 / span 3; grid-row: var(--r); }
  .sobre-pagina .so-ln.is-viva .so-ln-painel { grid-column: 5 / -1; grid-row: 1 / -1; padding: 6px 0 0; }
  .sobre-pagina .so-ln.is-viva .so-ln-sinal { display: none; }
  .sobre-pagina .so-ln.is-viva .so-ln-botao { min-height: 44px; padding: 5px 0; opacity: .34; transition: opacity .45s ease; }
  .sobre-pagina .so-ln.is-viva .so-ln-botao[aria-expanded="true"] { opacity: 1; }
  .sobre-pagina .so-ln.is-viva .so-ln-botao::before { content: ""; position: absolute; left: -18px; top: calc(50% - 4px); width: 8px; height: 8px; border-radius: 50%;
    background: var(--s-cobre); transform: scale(0); transition: transform .5s var(--s-saida); }
  .sobre-pagina .so-ln.is-viva .so-ln-botao[aria-expanded="true"]::before { transform: scale(1); }
}
@media (min-width: 992px) and (hover: hover) {
  .sobre-pagina .so-ln.is-viva .so-ln-botao:hover { opacity: .7; }
  .sobre-pagina .so-ln.is-viva .so-ln-botao[aria-expanded="true"]:hover { opacity: 1; }
}
/* com JS, no celular e no tablet: uma linha embaixo da outra, entre fios; abre uma por vez */
@media (max-width: 991.98px) {
  .sobre-pagina .so-ln.is-viva { border-bottom: 1px solid var(--s-regra); }
  .sobre-pagina .so-ln.is-viva .so-ln-nome { border-top: 1px solid var(--s-regra); }
  .sobre-pagina .so-ln.is-viva .so-ln-painel { padding: 4px 0 36px; }
}
/* a entrada de uma linha: as fotos sobem como a cortina da home, uma depois da outra, e o texto vem em seguida */
.so-vivo .sobre-pagina .so-ln-painel.is-entrando .so-ln-foto img { animation: so-ln-cortina 1.05s var(--s-saida) both; animation-delay: calc(var(--k, 0) * 110ms); }
.so-vivo .sobre-pagina .so-ln-painel.is-entrando .so-ln-texto { animation: so-ln-texto .8s var(--s-saida) .28s both; }
.so-vivo .sobre-pagina .so-ln-painel.is-espera .so-ln-foto img { clip-path: inset(100% 0 0 0); }
.so-vivo .sobre-pagina .so-ln-painel.is-espera .so-ln-texto { opacity: 0; }
@keyframes so-ln-cortina { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes so-ln-texto { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ============================================================ 3. o depoimento do Conrado, na areia */
.sobre-pagina .so-depoimento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; align-items: center;
  padding: var(--s-espaco) var(--s-g); }
.sobre-pagina .so-dep-texto { grid-column: 1 / span 6; display: grid; gap: 30px; justify-items: start; }
.sobre-pagina .so-dep-frase { font: 500 clamp(40px, 4.6vw, 82px)/1 var(--s-display); letter-spacing: -.04em; text-wrap: balance; text-indent: -.4em; }
.sobre-pagina .so-dep-citacao p { font: 400 clamp(18px, 1.4vw, 23px)/1.55 var(--s-texto); max-width: 40ch; text-wrap: pretty; text-indent: -.36em; }
.sobre-pagina .so-dep-quem { display: grid; gap: 6px; justify-self: stretch; max-width: 34.5em; padding-top: 18px; border-top: 1px solid var(--s-regra-forte); }
.sobre-pagina .so-depoimento :is(a, button):focus-visible { outline-color: var(--s-tinta); }
.sobre-pagina .so-depoimento .so-video-play:focus-visible { outline: 2px solid var(--s-marfim); outline-offset: 4px; }
.sobre-pagina .so-dep-quem strong { font: 500 22px/1.1 var(--s-display); letter-spacing: -.02em; }
.sobre-pagina .so-dep-quem span { font: 400 15px/1.5 var(--s-texto); }
.sobre-pagina .so-botao-video { display: inline-flex; align-items: center; gap: 18px; min-height: 54px; padding: 0 22px 0 24px; border: 0; border-radius: 2px 16px 2px 2px;
  background: var(--s-tinta); color: var(--s-marfim); font: 500 clamp(16px, 1.2vw, 19px)/1 var(--s-display); cursor: pointer; }
.sobre-pagina .so-duracao { font: 500 11.5px/1 var(--s-dados); letter-spacing: .12em; text-transform: uppercase; color: var(--s-caramelo); }
.sobre-pagina .so-video { grid-column: 8 / -1; justify-self: end; width: min(100%, calc(84svh * 9 / 16)); aspect-ratio: 9 / 16; border-radius: var(--s-canto); background: var(--s-tinta); }
.sobre-pagina .so-video :is(video, .so-video-capa) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sobre-pagina .so-video-capa { transition: opacity .6s var(--s-saida); }
.sobre-pagina .so-video.is-pronto .so-video-capa { opacity: 0; pointer-events: none; }
.sobre-pagina .so-video-play { position: absolute; z-index: 2; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; display: grid; place-items: center;
  border: 0; border-radius: 2px 26px 2px 2px; background: var(--s-marfim); color: var(--s-tinta); cursor: pointer;
  box-shadow: 0 12px 32px rgba(25, 23, 17, .3); transition: transform .45s var(--s-saida), opacity .3s; }
.sobre-pagina .so-video-play svg { width: 34px; height: 34px; }
.sobre-pagina .so-video-play path { fill: currentColor; }
@media (hover: hover) { .sobre-pagina .so-video-play:hover { transform: scale(1.06); } }
.sobre-pagina .so-video.is-carregando .so-video-play { opacity: .72; cursor: progress; }
.sobre-pagina .so-video.is-pronto .so-video-play { display: none; }
.sobre-pagina .so-video-erro { position: absolute; z-index: 3; left: 14px; right: 14px; bottom: 14px; padding: 14px 16px; background: var(--s-marfim); color: var(--s-tinta);
  border-radius: 2px 14px 2px 2px; font: 400 15px/1.45 var(--s-texto); }
.sobre-pagina .so-video-erro a { color: inherit; font-weight: 500; }

/* ============================================================ 4. a linha do tempo: a assinatura da página */
.sobre-pagina .so-linha-cabeca { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 20px; align-items: end;
  padding: var(--s-espaco) var(--s-g) clamp(28px, 3vw, 48px); }
.sobre-pagina .so-linha-cabeca .so-titulo { grid-column: 1 / span 7; }
.sobre-pagina .so-linha-cabeca .so-texto { grid-column: 9 / -1; }
/* sem movimento: a faixa rola na horizontal, com encaixe, e cada foto mostra o seu ano */
.sobre-pagina .so-linha-palco { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding-bottom: var(--s-espaco); }
.sobre-pagina .so-contador { display: none; }
.sobre-pagina .so-fita-anos { min-width: 0; display: flex; align-items: flex-end; gap: clamp(28px, 3.2vw, 60px); overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--s-g); padding: 0 var(--s-g) 14px; scrollbar-color: var(--s-caramelo) transparent; }
.sobre-pagina .so-fita-anos:focus-visible { outline: 2px solid var(--s-cobre); outline-offset: -2px; }
.sobre-pagina .so-quadro { --alto: min(38svh, 380px); flex: none; scroll-snap-align: start; display: grid; gap: 16px; align-content: end;
  width: calc(var(--alto) * 1.5); }
/* todos os anos no mesmo corte (3:2) e no mesmo tamanho: a faixa não pode parecer quebrada (pedido do dono, 06/10) */
.sobre-pagina .so-quadro-foto { height: var(--alto); width: 100%; border-radius: 2px; }
.sobre-pagina .so-quadro-foto img { transition: filter .7s var(--s-saida); }
.sobre-pagina .so-quadro-texto { display: grid; gap: 6px; align-content: start; max-width: 34ch;
  min-height: calc(12px * 1.4 + clamp(19px, 1.5vw, 25px) * 1.15 + clamp(14px, 1vw, 16px) * 1.5 * 3 + 12px); }
.sobre-pagina .so-quadro-ano { font: 500 12px/1.4 var(--s-dados); letter-spacing: .14em; color: var(--s-cobre); }
.sobre-pagina .so-quadro-titulo { font: 500 clamp(19px, 1.5vw, 25px)/1.15 var(--s-display); letter-spacing: -.02em; }
.sobre-pagina .so-quadro-frase { font: 400 clamp(14px, 1vw, 16px)/1.5 var(--s-texto); }
.sobre-pagina .so-regua { position: relative; display: flex; justify-content: space-between; margin: 0 var(--s-g); padding-top: 12px; border-top: 1px solid var(--s-regra);
  font: 500 11.5px/1 var(--s-dados); letter-spacing: .12em; color: var(--s-cobre); }
.sobre-pagina .so-regua::before { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: calc(var(--p, 0) * 100%); background: var(--s-tinta); }
/* o contador: quatro janelas de dígito; cada janela fica da largura do algarismo que mostra */
.sobre-pagina .so-digito { display: block; height: 1em; overflow: hidden; transition: width .9s var(--s-saida); transition-delay: var(--atraso, 0ms); }
.sobre-pagina .so-fita { display: flex; flex-direction: column; align-items: center; transform: translateY(calc(var(--n, 0) * -10%)); }
.sobre-pagina .so-fita span { display: block; height: 1em; line-height: 1; }
/* com movimento: o palco preso na tela, a faixa anda com a rolagem, o ano gira e a foto em foco acende */
.so-vivo .sobre-pagina .so-linha-trilho { height: var(--altura, 500svh); }
.so-vivo .sobre-pagina .so-linha-palco { position: sticky; top: 0; height: 100svh; min-height: 560px; overflow: hidden;
  grid-template-rows: auto minmax(0, 1fr) auto; gap: 0; padding: 92px 0 30px; }
.so-vivo .sobre-pagina .so-contador { display: flex; padding: 0 var(--s-g); font: 500 clamp(88px, 11vw, 196px)/1 var(--s-display); letter-spacing: -.05em;
  font-variant-numeric: tabular-nums; }
.so-vivo .sobre-pagina .so-fita-anos { overflow: visible; scroll-snap-type: none; align-self: end; padding-bottom: 30px; will-change: transform; }
.so-vivo .sobre-pagina .so-quadro:not(.is-atual) .so-quadro-foto img { filter: saturate(.2) brightness(.9) contrast(.92); }
.so-vivo .sobre-pagina :is(.so-quadro-titulo, .so-quadro-frase) { transition: opacity .7s var(--s-saida); }
.so-vivo .sobre-pagina .so-quadro:not(.is-atual) :is(.so-quadro-titulo, .so-quadro-frase) { opacity: .62; }
/* a saída da faixa respira antes da foto de 2026; o contador alinha opticamente à margem */
.so-vivo .sobre-pagina .so-linha-trilho { margin-bottom: clamp(48px, 6vw, 104px); }
.so-vivo .sobre-pagina .so-contador { margin-left: -.05em; }
.so-vivo .sobre-pagina .so-fita { transition: transform 1.15s var(--s-saida); transition-delay: var(--atraso, 0ms); }

/* ============================================================ 5. 2026, o marco, e 2027 */
.sobre-pagina .so-2026-abre { position: relative; height: 100svh; min-height: 640px; max-height: 1100px; overflow: hidden; }
.sobre-pagina .so-2026-foto { position: absolute; inset: 0; }
.sobre-pagina .so-2026-foto::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, var(--s-tinta) 0, rgba(25, 23, 17, .84) 10%, rgba(25, 23, 17, .4) 42%, rgba(25, 23, 17, 0) 70%); }
.sobre-pagina .so-2026-texto { position: absolute; z-index: 2; left: var(--s-g); right: var(--s-g); bottom: clamp(36px, 7vh, 88px);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 16px; align-items: end; }
.sobre-pagina .so-ano-gigante { font: 500 clamp(120px, 22vw, 400px)/.8 var(--s-display); letter-spacing: -.065em; font-variant-numeric: tabular-nums; }
.sobre-pagina .so-2026-texto .so-ano-gigante { grid-column: 1 / span 8; grid-row: 1 / span 2; margin-left: -.05em; }
.sobre-pagina .so-2026-texto .so-texto { grid-column: 9 / -1; grid-row: 1; max-width: 34ch; }
.sobre-pagina .so-2026-texto .so-legenda { grid-column: 9 / -1; grid-row: 2; }
/* os destaques do ano (06/10, refeito: a parede desencontrada não ficou boa): as quatro entregas numa fileira, do mesmo
   tamanho, e as duas peças de design embaixo, maiores; todos alinhados na grade */
.sobre-pagina .so-2026-destaques { display: grid; row-gap: clamp(56px, 6vw, 96px); padding: var(--s-espaco) var(--s-g) clamp(64px, 7vw, 112px); }
.sobre-pagina .so-marcos26 { display: grid; column-gap: 24px; row-gap: 48px; align-items: start; }
.sobre-pagina .so-marcos26--entregas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sobre-pagina .so-marcos26--design { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sobre-pagina .so-m26 a { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 8px; color: inherit; text-decoration: none; }
.sobre-pagina .so-m26-foto { grid-column: 1 / -1; margin-bottom: 12px; border-radius: var(--s-canto); aspect-ratio: 4 / 5; }
.sobre-pagina .so-marcos26--design .so-m26-foto { aspect-ratio: 16 / 9; }
.sobre-pagina .so-m26-foto img { transition: transform 1.4s var(--s-saida); }
@media (hover: hover) { .sobre-pagina .so-m26 a:hover .so-m26-foto img { transform: scale(1.035); } }
.sobre-pagina .so-m26-nome { grid-column: 1; font: 500 clamp(21px, 1.7vw, 28px)/1.08 var(--s-display); letter-spacing: -.025em; text-wrap: balance; }
.sobre-pagina .so-marcos26--design .so-m26-nome { font-size: clamp(26px, 2.4vw, 40px); }
.sobre-pagina .so-m26-feito { grid-column: 1; font: 400 clamp(15px, 1.05vw, 17px)/1.5 var(--s-texto); max-width: 40ch; opacity: .88; }
.sobre-pagina .so-m26 .so-seta { grid-column: 2; grid-row: 2; align-self: start; justify-self: end; width: 24px; height: 24px; margin: 2px -4px 0 0; }
.sobre-pagina .so-2026-obras { justify-self: start; }
.sobre-pagina .so-2027 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 28px; align-items: end;
  margin: 0 var(--s-g); padding: clamp(56px, 6vw, 96px) 0 var(--s-espaco); border-top: 1px solid var(--s-regra-clara); }
.sobre-pagina .so-2027-ano { grid-column: 1 / span 8; display: flex; align-items: flex-start; line-height: 1; margin-left: -.05em; }
.sobre-pagina .so-2027-ano > span[aria-hidden] { display: block; height: 1em; line-height: 1; }
.sobre-pagina .so-sete .so-fita span { color: transparent; -webkit-text-stroke: max(2px, .01em) var(--s-caramelo); }
.sobre-pagina .so-2027-texto { grid-column: 9 / -1; display: grid; gap: 12px; padding-bottom: .4em; }
.sobre-pagina .so-2027-frase { font: 500 clamp(32px, 3.4vw, 58px)/1 var(--s-display); letter-spacing: -.035em; }
@media (min-width: 992px) { .sobre-pagina .so-2027-texto { padding-bottom: 0; margin-bottom: calc(clamp(120px, 22vw, 400px) * .14); } }

/* ============================================================ 6. parceiros: o convite, os contatos e o GBC Brasil */
.sobre-pagina .so-parceiros { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; align-items: start;
  padding: var(--s-espaco) var(--s-g); }
.sobre-pagina .so-parceiros-texto { grid-column: 1 / span 7; grid-row: 1 / span 2; display: grid; gap: 22px; justify-items: start; }
.sobre-pagina .so-contato { grid-column: 9 / -1; grid-row: 1; display: grid; gap: 18px; }
.sobre-pagina .so-contato dt { font: 500 11.5px/1.5 var(--s-dados); letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.sobre-pagina .so-contato dd a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; border-bottom: 1px solid var(--s-regra);
  font: 500 clamp(19px, 1.5vw, 24px)/1.2 var(--s-display); letter-spacing: -.015em; }
.sobre-pagina .so-gbc { grid-column: 9 / -1; grid-row: 2; align-self: end; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 16px; overflow: visible; }
.sobre-pagina .so-gbc img { width: clamp(64px, 5.4vw, 92px); height: auto; }
.sobre-pagina .so-gbc figcaption { font: 400 15px/1.45 var(--s-texto); opacity: .86; max-width: 26ch; }

/* ============================================================ 7. fecho, no verde do rodapé */
.sobre-pagina .so-fecho { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 36px; align-items: end; padding: var(--s-espaco) var(--s-g); }
.sobre-pagina .so-fecho .so-frase { grid-column: 1 / span 8; }
.sobre-pagina .so-botao { grid-column: 9 / -1; justify-self: start; display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 58px;
  padding: 0 22px 0 26px; background: var(--s-marfim); color: var(--s-tinta); border-radius: 2px 16px 2px 2px; text-decoration: none; font: 500 clamp(17px, 1.25vw, 20px)/1 var(--s-display); }

/* movimento (só com JS e sem "reduzir movimento"): a câmera lenta na foto de 2026 */
.so-vivo .sobre-pagina .so-camera img { transform: scale(calc(1.02 + .07 * var(--p, 0))); transform-origin: 50% 58%; }

/* tablet (640 a 991): tudo empilhado, com a escala de tela média */
@media (max-width: 991.98px) {
  body[data-page="sobre"] .sobre-pagina :is(.so-abre, .so-depoimento, .so-linha-cabeca, .so-parceiros, .so-fecho, .so-2027) { grid-template-columns: 1fr; }
  body[data-page="sobre"] .sobre-pagina :is(.so-abre, .so-depoimento, .so-linha-cabeca, .so-parceiros, .so-fecho, .so-2027) > * { grid-column: 1 / -1; grid-row: auto; }
  body[data-page="sobre"] .sobre-pagina .so-abre { min-height: 0; padding: 0; row-gap: 40px; }
  body[data-page="sobre"] .sobre-pagina .so-abre-texto { padding: calc(76px + 40px) var(--s-g) 0; }
  body[data-page="sobre"] .sobre-pagina .so-dupla { padding-top: 0; }
  .sobre-pagina .so-abre .so-frase { font-size: clamp(48px, 8.4vw, 80px); max-width: 12ch; }
  .sobre-pagina .so-titulo, .sobre-pagina .so-linhas > .so-titulo { font-size: clamp(34px, 5.8vw, 54px); }
  .sobre-pagina .so-dep-frase { font-size: clamp(38px, 6.6vw, 60px); }
  .sobre-pagina .so-retrato { aspect-ratio: .62; height: auto; }
  .sobre-pagina .so-retrato:first-child { border-radius: 0; }
  body[data-page="sobre"] .sobre-pagina .so-video { justify-self: start; width: min(100%, 440px); }
  .sobre-pagina .so-quadro { --alto: min(32svh, 320px); }
  .so-vivo .sobre-pagina .so-linha-palco { padding-top: 84px; }
  .so-vivo .sobre-pagina .so-contador { font-size: clamp(72px, 15vw, 132px); }
  .sobre-pagina .so-2026-abre { height: auto; min-height: 0; max-height: none; aspect-ratio: 4 / 5; }
  body[data-page="sobre"] .sobre-pagina .so-2026-texto { grid-template-columns: 1fr; }
  body[data-page="sobre"] .sobre-pagina .so-2026-texto > * { grid-column: 1; grid-row: auto; }
  .sobre-pagina .so-marcos26--entregas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sobre-pagina .so-gbc figcaption { max-width: 32ch; }
}
/* celular (< 640) */
@media (max-width: 639.98px) {
  body[data-page="sobre"] { --s-espaco: 76px; }
  body[data-page="sobre"] .sobre-pagina .so-abre-texto { padding-top: calc(64px + 36px); gap: 18px; }
  .sobre-pagina .so-abre .so-frase { font-size: clamp(42px, 12vw, 56px); }
  .sobre-pagina .so-dupla { gap: 3px; }
  .sobre-pagina .so-retrato figcaption { padding: 48px 12px 14px; }
  .sobre-pagina .so-retrato strong { font-size: 17px; }
  .sobre-pagina .so-retrato figcaption span { font-size: 11px; letter-spacing: .08em; }
  /* as fotos de cada linha numa faixa que desliza com o dedo, na mesma altura (a primeira já mostra que há mais) */
  .sobre-pagina .so-ln-fotos:not(.so-ln-fotos--projetos):not(.so-ln-fotos--1) { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin-right: calc(var(--s-g) * -1); padding-right: var(--s-g); scrollbar-width: none; }
  .sobre-pagina .so-ln-fotos::-webkit-scrollbar { display: none; }
  .sobre-pagina .so-ln-fotos:not(.so-ln-fotos--projetos):not(.so-ln-fotos--1) > .so-ln-foto { flex: none; height: 62vw; width: calc(62vw * var(--ar)); max-width: 86vw;
    aspect-ratio: auto; scroll-snap-align: start; }
  .sobre-pagina .so-dep-frase { font-size: clamp(34px, 9.6vw, 44px); }
  .sobre-pagina .so-botao-video { display: none; }
  body[data-page="sobre"] .sobre-pagina .so-video { width: calc(100% + var(--s-g) * 2); max-width: none; margin: 0 calc(var(--s-g) * -1); border-radius: 0; }
  .sobre-pagina .so-quadro { width: min(78vw, calc(34svh * 1.5)); }
  .sobre-pagina .so-quadro-foto { width: 100%; height: auto; aspect-ratio: 3 / 2; }
  .sobre-pagina .so-fita-anos { gap: 22px; }
  .so-vivo .sobre-pagina .so-linha-palco { padding: 72px 0 22px; min-height: 0; }
  .so-vivo .sobre-pagina .so-contador { font-size: 23vw; }
  .so-vivo .sobre-pagina .so-linha-palco { grid-template-rows: auto auto auto; align-content: center; row-gap: 22px; }
  .so-vivo .sobre-pagina .so-fita-anos { align-self: auto; padding-bottom: 8px; }
  .sobre-pagina .so-2026-abre { height: auto; min-height: 0; max-height: none; aspect-ratio: 4 / 5; }
  .sobre-pagina .so-2026-texto { bottom: 26px; }
  .sobre-pagina .so-2026-texto .so-ano-gigante { font-size: 36vw; }
  .sobre-pagina .so-2026-texto .so-texto { font-size: 16px; }
  .sobre-pagina .so-marcos26 { column-gap: 14px; row-gap: 40px; }
  .sobre-pagina .so-marcos26--design { grid-template-columns: 1fr; }
  .sobre-pagina .so-m26-nome { font-size: 19px; }
  .sobre-pagina .so-m26-feito { font-size: 14.5px; }
  .sobre-pagina .so-m26 .so-seta { display: none; }
  .sobre-pagina .so-2027-ano { font-size: 34vw; }
  .sobre-pagina .so-botao { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .sobre-pagina :is(.so-fita, .so-digito, .so-ln-botao, .so-m26-foto img, .so-seta path, .so-quadro-foto img, .so-quadro-titulo, .so-quadro-frase) { transition: none !important; }
  .sobre-pagina .so-ln-sinal::after { transition: none !important; }
}