/* sobre — "Quem é" (claro). Prefixo so-.
   O fio vira linha do tempo vertical: desenha-se ao entrar e acende os marcos no ritmo do hero. */

.so .wf-malha { background: linear-gradient(in oklab 170deg, var(--travertino-claro), var(--travertino) 55%, #e6dacb); }

.so-topo { max-width: 60rem; }
.so-topo .wf-parada { white-space: nowrap; }

.so-grade {
  display: grid; grid-template-columns: minmax(0, 6.4fr) minmax(0, 5.6fr); gap: 0 clamp(2.5rem, 1rem + 4.5vw, 5.5rem);
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); align-items: start;
}

/* ---------- retrato: painel com a assimetria do hero, preso enquanto a história corre ---------- */
.so-retrato { position: sticky; top: 6rem; margin: 0; }
@media (min-width: 981px) { .so-painel { aspect-ratio: auto; height: min(calc(100svh - 12rem), 46rem); min-height: 34rem; } }
.so-luz { position: absolute; z-index: -1; left: -12%; top: -10%; width: 90%; aspect-ratio: 1;
  background: radial-gradient(closest-side in oklch, rgb(246 214 168 / .7), rgb(246 214 168 / 0)); }
.so-painel {
  position: relative; overflow: hidden; aspect-ratio: 886 / 1060;
  border-radius: 140px var(--raio) var(--raio) var(--raio); background: #cdb8a3;
  box-shadow: 0 40px 80px -30px rgb(58 42 32 / .4);
}
.so-painel img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.so-painel::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(in oklab 180deg, rgb(247 226 196 / .08), rgb(106 78 60 / .14)); }

.so-terceira {
  position: relative; z-index: 2; margin: -5.5rem -2.5rem 0 auto; width: min(22rem, 78%);
  padding: 1.25rem 1.4rem 1.1rem; border-radius: 20px;
  background: color-mix(in oklab, var(--travertino-claro) 86%, transparent);
  border: 1px solid rgb(255 255 255 / .6); backdrop-filter: blur(14px);
  box-shadow: 0 24px 50px -24px rgb(58 42 32 / .45);
}
.so-terceira p { margin: 0 0 .7rem; font-family: var(--serif); font-size: 1.3rem; line-height: 1.3; text-wrap: pretty; }
.so-terceira footer { font-size: var(--t-mini); color: var(--cafe-suave); }
.so-terceira cite { font-style: normal; }

/* ---------- história ---------- */
.so-abre { margin: 0; font-family: var(--serif); font-size: var(--t-sub); line-height: 1.25; letter-spacing: -.01em; text-wrap: pretty; }
.so-historia .wf-lead { margin-top: 1.3rem; }

/* linha do tempo */
.so-linha { --so-x: 7px; list-style: none; margin: 3rem 0 0; padding: 0; position: relative; }
.so-linha::before { /* o fio */
  content: ""; position: absolute; left: var(--so-x); top: .9rem; bottom: 1.2rem; width: 1px;
  background: linear-gradient(to bottom, var(--madeira), var(--madeira) 85%, var(--ambar));
  transform-origin: top center;
}
.so-linha li { position: relative; display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0 1.2rem;
  padding: 0 0 1.7rem 2.6rem; }
.so-linha li::before { /* o ponto */
  content: ""; position: absolute; left: 0; top: .55rem; width: 15px; height: 15px; border-radius: 50%;
  background: var(--travertino); border: 1px solid var(--madeira);
}
.so-linha .so-marco::before, .so-linha .so-hoje::before {
  background: var(--ambar); border-color: var(--ambar);
  box-shadow: 0 0 0 5px rgb(192 130 58 / .16), 0 0 22px 4px rgb(240 194 127 / .7);
}
.so-ano { font-family: var(--serif); font-size: 1.75rem; line-height: 1.1; color: var(--madeira-escura); font-variant-numeric: lining-nums; }
.so-ano small { font-size: .62em; color: var(--cafe-suave); }
.so-linha p { margin: .25rem 0 0; line-height: 1.55; color: var(--cafe-suave); text-wrap: pretty; }
.so-linha li:not(.so-marco) { padding-bottom: 1.2rem; }
.so-linha li:not(.so-marco) .so-ano { font-size: 1.375rem; padding-top: .2rem; }
.so-linha li:not(.so-marco) p { font-size: 1.125rem; }
.so-linha .so-marco { grid-template-columns: minmax(0, 1fr); margin: .8rem 0 1rem; padding-bottom: 1.6rem; }
.so-linha .so-marco::before { top: 1.6rem; }
.so-marco .so-ano { font-size: clamp(3.4rem, 2rem + 3.4vw, 5.4rem); line-height: 1; letter-spacing: -.03em; color: var(--madeira-escura); }
.so-marco p { margin-top: .5rem; max-width: 30em; }
.so-marco b { display: block; font-weight: 400; font-family: var(--serif); font-size: var(--t-sub); line-height: 1.2; color: var(--cafe); margin-bottom: .35rem; }
.so-marco p, .so-hoje p { color: var(--cafe); }
.so-hoje .so-ano { color: var(--cafe); }
.so-linha .so-hoje p { font-family: var(--serif); font-size: 1.3rem; line-height: 1.35; color: var(--cafe); }
.so-volta { margin-top: .3rem; font-family: var(--sans); font-size: 1.0625rem; color: var(--madeira-escura); }

.js .so-linha[data-rev] { translate: none; opacity: 1; }
.js .so-linha[data-rev]::before { transform: scaleY(0); transition: transform 1.9s cubic-bezier(.45, .05, .2, 1) .2s; }
.js .so-linha[data-rev] li::before { scale: .4; opacity: 0; transition: scale .6s var(--suave), opacity .4s; transition-delay: calc(.35s + var(--n) * .28s); }
.js .so-linha[data-rev] li > * { opacity: 0; translate: 0 10px; transition: opacity .8s var(--suave), translate .9s var(--suave); transition-delay: calc(.4s + var(--n) * .28s); }
.js .so-linha.wf-on::before { transform: scaleY(1); }
.js .so-linha.wf-on li::before { scale: 1; opacity: 1; }
.js .so-linha.wf-on li > * { opacity: 1; translate: 0 0; }

.so-titulos { list-style: none; margin: 1.4rem 0 0; padding: 1.4rem 0 0; border-top: 1px solid var(--linha);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 1.5rem; }
.so-titulos li { font-family: var(--serif); font-size: 1.125rem; line-height: 1.3; }
.so-titulos span { display: block; font-family: var(--sans); font-size: var(--t-mini); letter-spacing: .1em; text-transform: uppercase; color: var(--cafe-suave); margin-bottom: .3rem; }

/* ---------- quem fica ---------- */
.so-ficam {
  margin-top: clamp(4.5rem, 3rem + 5vw, 8rem); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr);
  gap: 2.5rem clamp(2rem, 1rem + 3vw, 4rem); align-items: start;
}
.so-ficam { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.so-vozes { display: grid; gap: 2.4rem; }
.so-ficam { position: relative; padding: clamp(2.5rem, 1.5rem + 3vw, 4.5rem) clamp(1.5rem, .5rem + 3.5vw, 4.5rem); }
.so-ficam-fundo { position: absolute; inset: 0; z-index: -1; border-radius: 140px var(--raio) var(--raio) var(--raio);
  background: color-mix(in oklab, var(--travertino-claro) 80%, transparent); border: 1px solid rgb(255 255 255 / .7);
  box-shadow: 0 24px 50px -28px rgb(58 42 32 / .45); }
.so-ficam-tit { grid-column: 1 / -1; font-size: clamp(1.9rem, 1.2rem + 2vw, 3rem); }
.so-ficam-tit em { font-style: normal; color: var(--madeira-escura); }
.so-voz { margin: 0; position: relative; padding-top: 1.6rem; border-top: 1px solid var(--madeira); }
.so-voz::before { content: ""; position: absolute; left: 0; top: -7px; width: 13px; height: 13px; border-radius: 50%; background: var(--ambar);
  box-shadow: 0 0 0 5px rgb(192 130 58 / .16), 0 0 18px 3px rgb(240 194 127 / .55); }
.so-voz p { margin: 0 0 .9rem; font-family: var(--serif); font-size: 1.3rem; line-height: 1.36; text-wrap: pretty; }
.so-voz-g p { font-size: clamp(1.9rem, 1rem + 2.4vw, 3.3rem); line-height: 1.18; letter-spacing: -.015em; }
.so-voz footer { font-size: var(--t-mini); color: var(--cafe-suave); }
.so-voz cite { font-style: normal; }

/* ---------- celular e tablet ---------- */
@media (max-width: 980px) {
  .so-grade { grid-template-columns: minmax(0, 1fr); }
  .so-retrato { position: relative; top: auto; max-width: 34rem; margin: 0 auto 3rem; width: 100%; }
  .so-painel { border-radius: 90px 22px 22px 22px; aspect-ratio: 886 / 980; }
  .so-terceira { margin: -4rem 0 0 auto; width: 86%; }
  .so-terceira p { font-size: 1.1875rem; }
  .so-linha li { grid-template-columns: minmax(0, 1fr); padding-left: 2.3rem; padding-bottom: 1.5rem; }
  .so-marco .so-ano { font-size: 2.2rem; }
  .so-ficam { grid-template-columns: minmax(0, 1fr); gap: 2.2rem; }
  .so-titulos { grid-template-columns: minmax(0, 1fr); }
  .so-ficam { padding: 2.4rem 1.3rem; margin-left: calc(-.35 * var(--margem)); margin-right: calc(-.35 * var(--margem)); }
  .so-ficam-fundo { border-radius: 70px 20px 20px 20px; }
  .so-linha .so-marco::before { top: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .js .so-linha[data-rev]::before { transform: none !important; }
  .js .so-linha[data-rev] li::before, .js .so-linha[data-rev] li > * { opacity: 1 !important; scale: none !important; translate: none !important; }
}