/* sobre · "Quem faz a pergunta" — prefixo sb- */
.sb-secao { position: relative; background: var(--hd-papel); padding: var(--wf-secao) var(--wf-margem); overflow: clip; isolation: isolate; }

/* luz atrás do retrato e no fim da história, na mesma malha do hero */
.sb-malha { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.sb-malha i { position: absolute; border-radius: 50%; filter: blur(50px); }
.sb-malha i:nth-child(1) { width: 62vmax; height: 62vmax; left: -22vmax; top: 4%; background: radial-gradient(closest-side in oklab, var(--hd-nevoa), color-mix(in oklab, var(--hd-nevoa) 0%, transparent)); opacity: .8; }
.sb-malha i:nth-child(2) { width: 56vmax; height: 56vmax; right: -20vmax; bottom: -16vmax; background: radial-gradient(closest-side in oklab, var(--hd-pessego), color-mix(in oklab, var(--hd-pessego) 0%, transparent)); opacity: .75; }

.sb-dentro { max-width: var(--wf-largura); margin: 0 auto; }
.sb-par { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: clamp(3rem, 7vw, 7rem); grid-template-areas: "figura cabeca" "figura historia"; grid-template-rows: auto 1fr; align-items: start; }
.sb-cabeca { grid-area: cabeca; padding-top: clamp(0rem, 3vw, 3rem); }
.sb-titulo { margin-top: 1.4rem; }

/* o retrato: grande, em arco, acompanha a leitura no desktop; a luz morna vem de trás */
.sb-figura { grid-area: figura; position: sticky; top: 1.5rem; padding-bottom: 2.6rem; }
.sb-figura::before { content: ""; position: absolute; z-index: -1; width: 78%; aspect-ratio: 1; left: -16%; bottom: -4%; border-radius: 50%; background: radial-gradient(closest-side in oklab, color-mix(in oklab, var(--hd-ambar) 55%, var(--hd-pessego)), color-mix(in oklab, var(--hd-pessego) 0%, transparent)); filter: blur(34px); opacity: .6; }
.sb-retrato { border-radius: 999px 999px 32px 32px; overflow: hidden; background: var(--hd-nevoa); box-shadow: 0 50px 80px -46px rgba(42, 33, 29, .5), 0 0 0 1px rgba(255, 255, 255, .5) inset; }
.sb-retrato img { display: block; width: 100%; height: auto; max-height: calc(100svh - 6.6rem); object-fit: cover; object-position: 50% 20%; }
.sb-legenda { position: absolute; left: clamp(.9rem, 2vw, 1.6rem); bottom: 0; max-width: calc(100% - 1.8rem); display: flex; flex-direction: column; gap: .1rem; padding: .85rem 1.5rem 1rem 1.3rem; border-radius: 26px; background: color-mix(in oklab, var(--hd-papel-claro) 88%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 22px 40px -24px rgba(42, 33, 29, .45), 0 0 0 1px rgba(255, 255, 255, .7) inset; }
.sb-legenda b { font-family: var(--hd-serifa); font-weight: 400; font-size: 1.55rem; line-height: 1.15; }
.sb-legenda > span { font-size: var(--wf-mini); color: var(--hd-tinta-suave); letter-spacing: .03em; }
.sb-legenda i { font-style: normal; }
.sb-legenda span span { white-space: nowrap; }

.sb-historia { grid-area: historia; margin-top: 1.6rem; }
.sb-abre { max-width: 30em; color: var(--hd-tinta-suave); }

/* três tempos, três estados da forma */
.sb-tempos { list-style: none; padding: 0; margin: clamp(3rem, 6vw, 5rem) 0 0; display: grid; gap: clamp(3rem, 6vw, 5.5rem); }
.sb-tempo { display: grid; grid-template-columns: clamp(9rem, 15vw, 13.5rem) minmax(0, 1fr); column-gap: 1.2rem; align-items: start; margin-left: clamp(-6rem, -5.5vw, -2rem); }
.sb-forma { margin-top: -.6rem; }
.sb-forma img { display: block; width: 100%; height: auto; transform-origin: 50% 74%; transition: transform 1.6s var(--wf-curva) .15s; }
/* o gesto da seção: cada forma pousa e se assenta quando o seu tempo chega */
.wf-js .sb-tempo:not(.wf-visto) .sb-forma img { transform: translateY(-1.6rem) scale(.94, 1.05); }
.sb-quando { font-family: var(--hd-serifa); font-size: clamp(3.4rem, 2rem + 4.2vw, 6rem); line-height: .86; letter-spacing: -.02em; color: var(--hd-tinta); }
.sb-quando span { display: block; font-style: italic; font-size: clamp(1.15rem, 1rem + .5vw, 1.45rem); line-height: 1.2; letter-spacing: 0; color: var(--wf-laranja-texto); margin-bottom: .25rem; }
.sb-tempo-titulo { font-family: var(--hd-serifa); font-weight: 400; font-size: var(--wf-h3); line-height: 1.15; margin: 1.1rem 0 .6rem; }
.sb-tempo-texto > p:not(.sb-quando) { max-width: 27em; }
.sb-fala { margin-top: 1.3rem; max-width: 24em; }
.sb-fala p { font-family: var(--hd-serifa); font-style: italic; font-size: clamp(1.3rem, 1.15rem + .5vw, 1.55rem); line-height: 1.28; }
.sb-fala footer { margin-top: .6rem; display: flex; align-items: center; gap: .6rem; font-size: var(--wf-mini); color: var(--hd-tinta-suave); letter-spacing: .04em; }
.sb-fala footer::before { content: ""; width: 1.6rem; height: 1px; background: var(--hd-laranja); }

/* a prova de quem estuda: a bancada, em foto */
.sb-bancada { margin-top: 1.8rem; max-width: 27em; }
.sb-bancada img { display: block; width: 100%; height: auto; aspect-ratio: 860 / 520; object-fit: cover; border-radius: 24px 24px 24px 80px; box-shadow: 0 30px 50px -34px rgba(42, 33, 29, .5); }
.sb-bancada figcaption { margin-top: .7rem; font-size: var(--wf-mini); color: var(--hd-tinta-suave); letter-spacing: .03em; }

/* fecho: a frase dela, na largura toda, e a conversa ao alcance */
.sb-fecho { margin-top: clamp(4rem, 8vw, 7.5rem); padding-top: clamp(2.2rem, 4vw, 3.4rem); border-top: 1px solid var(--hd-fio); display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 3rem; align-items: end; }
.sb-fecho-antes { font-family: var(--hd-serifa); font-style: italic; font-size: 1.25rem; line-height: 1.3; color: var(--hd-tinta-suave); }
.sb-fecho-frase { margin-top: 1rem; max-width: 17em; font-family: var(--hd-serifa); font-size: clamp(1.95rem, 1.1rem + 3.2vw, 4.3rem); line-height: 1.02; letter-spacing: -.018em; text-wrap: balance; }
.sb-fecho-frase em { font-style: italic; color: var(--wf-laranja-texto); }
.sb-fecho-citacao footer { margin-top: 1.4rem; font-size: var(--wf-mini); font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--hd-tinta-suave); }
.sb-botao { margin-bottom: .2rem; white-space: nowrap; }

@media (max-width: 860px) {
  .sb-par { grid-template-columns: minmax(0, 1fr); grid-template-areas: "cabeca" "figura" "historia"; }
  .sb-cabeca { padding-top: 0; }
  .sb-figura { position: relative; top: auto; margin-top: 1.8rem; }
  .sb-retrato img { max-height: none; }
  .sb-figura { padding-bottom: 4.1rem; }
  .sb-legenda i { display: none; }
  .sb-legenda span span { display: block; }
  .sb-historia { margin-top: 2.4rem; }
  .sb-tempo { margin-left: 0; grid-template-columns: 7.2rem minmax(0, 1fr); column-gap: .9rem; }
  .sb-forma { margin-top: 0; margin-left: -.8rem; }
  .sb-tempo-texto { display: contents; }
  .sb-quando { align-self: center; }
  .sb-tempo-texto > :not(.sb-quando) { grid-column: 1 / -1; }
  .sb-fecho { grid-template-columns: minmax(0, 1fr); row-gap: 1.8rem; justify-items: start; }
  .sb-fecho-antes { font-size: 1.1rem; }
  .sb-legenda b { font-size: 1.4rem; }
  .sb-legenda { padding: .75rem 1.2rem .85rem 1.1rem; }
  .sb-bancada { max-width: none; }
}
@media (max-width: 1100px) and (min-width: 861px) {
  .sb-fecho { grid-template-columns: minmax(0, 1fr); row-gap: 2rem; justify-items: start; }
}