/* so · #sobre — Duas versões */
.so { --p: 1; }
.so-topo { text-align: center; max-width: 52rem; margin: 0 auto clamp(3.5rem, 7vw, 6rem); }

/* o "8": dois círculos iguais, cada um com seu anel; com a rolagem eles se aproximam até os anéis se cruzarem */
.so-oito {
  --d: clamp(16rem, 29vw, 27rem);
  --vao: calc(var(--d) * .07);          /* vão final entre as fotos: os anéis (raio .563d) se cruzam no meio */
  --afasta: clamp(2rem, 8vw, 8rem);
  display: flex; justify-content: center; align-items: flex-start; gap: var(--vao);
}
.so-lado { margin: 0; width: var(--d); display: flex; flex-direction: column; align-items: center; text-align: center; }
.so-lado--a { transform: translateX(calc((1 - var(--p)) * var(--afasta) * -1)); }
.so-lado--b { transform: translateX(calc((1 - var(--p)) * var(--afasta))); }
.so-circ { position: relative; width: var(--d); height: var(--d); }
.so-circ img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
  box-shadow: var(--sombra-foto);
}
.so-lado--a img { object-position: 45% 14%; }
.so-lado--b img { object-position: 50% 0%; }
.so-anel { --tam: 112%; --esp: 4.5%; left: -6%; top: -6%; opacity: 1; }
.so-lado--a { position: relative; z-index: 2; }
.so-oito { position: relative; }
/* fio que desce do nó até a frase do centro (computador) */
.so-oito::after {
  content: ''; position: absolute; left: 50%; width: 1px;
  top: calc(var(--d) / 2 + 1.4rem); bottom: -3.2rem;
  background: linear-gradient(color-mix(in oklab, var(--outono) 55%, transparent), transparent);
  transform-origin: top; scale: 1 clamp(0, (var(--p) - .85) * 6.7, 1);
}
.so-lado--b .so-anel { --de: 20deg; animation-direction: reverse; }

/* o nó do 8: acende quando os dois anéis se tocam */
.so-no {
  position: absolute; z-index: 3; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  top: 50%; left: calc(100% + var(--vao) / 2); translate: -50% -50%;
  background: var(--papel);
  box-shadow: 0 0 0 3px var(--papel), 0 0 28px 8px color-mix(in oklab, var(--verao) 55%, transparent);
  opacity: clamp(0, (var(--p) - .82) * 6, 1);
  scale: clamp(.4, (var(--p) - .7) * 3.4, 1);
}
.so-no i {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 200deg in oklch, var(--inverno), var(--primavera), var(--verao), color-mix(in oklab, var(--outono) 75%, var(--verao)), var(--inverno));
  -webkit-mask: radial-gradient(closest-side, transparent 52%, #000 56%); mask: radial-gradient(closest-side, transparent 52%, #000 56%);
  animation: wf-gira 12s linear infinite;
}
.so-no::after { content: ''; position: absolute; inset: 36%; border-radius: 50%; background: var(--outono); }

.so-lado figcaption { margin-top: 2.4rem; max-width: 21rem; }
.so-quando { display: inline-flex; align-items: center; gap: .6em; margin: 0; font-family: var(--f-texto); font-size: .82rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--tinta); }
.so-lado q { display: block; margin-top: .8rem; font-size: 1.4rem; line-height: 1.28; color: var(--tinta); }
.so q { quotes: '“' '”'; }
.so-credito { display: block; margin-top: .9rem; font-size: .75rem; letter-spacing: .04em; color: var(--tinta-suave); }

/* a frase do centro: o coração da seção */
.so-centro { margin: clamp(3rem, 5vw, 4.5rem) auto 0; position: relative; text-align: center; max-width: 54rem; }
.so-frase { margin: 0; font-family: var(--f-titulo); font-size: calc(var(--t-sec) * .92); line-height: 1.05; letter-spacing: -.012em; text-wrap: balance; }
.so-frase em { color: var(--outono); }
.so-cont { margin: 1.4rem auto 0; max-width: 34rem; font-size: 1.3rem; line-height: 1.35; color: var(--tinta-suave); text-wrap: balance; }

/* espelho das duas versões */
.so-espelho {
  display: grid; grid-template-columns: 1fr 1px 1fr; gap: clamp(2rem, 5vw, 5rem);
  margin-top: clamp(4rem, 8vw, 7rem); padding-top: clamp(2.5rem, 4vw, 3.5rem);
  border-top: 1px solid color-mix(in oklab, var(--outono) 16%, transparent);
}
.so-espelho::before { content: ''; grid-column: 2; grid-row: 1; background: color-mix(in oklab, var(--outono) 16%, transparent); }
.so-col:first-child { grid-column: 1; grid-row: 1; }
.so-col:last-child { grid-column: 3; grid-row: 1; }
.so-col .so-quando { margin-bottom: 1rem; }
.so-col .wf-texto { margin: 0 0 1rem; }
.so-col { display: flex; flex-direction: column; }
.so-puxa { margin: 0 0 1.4rem; font-size: clamp(1.45rem, 1.2rem + .7vw, 1.85rem); line-height: 1.22; color: var(--outono); text-wrap: balance; max-width: 30rem; }
.so-perfil { margin: auto 0 0; }
.so-registro { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.6rem 0 0; }
.so-registro span {
  font-size: .78rem; letter-spacing: .1em; color: var(--tinta-suave);
  padding: .35em .9em; border-radius: 99px; border: 1px solid color-mix(in oklab, var(--outono) 18%, transparent);
}

@media (max-width: 899px) {
  .so-oito { flex-direction: column; align-items: center; --d: min(66vw, 20rem); --afasta: 2.5rem; }
  .so-lado--a { transform: translateY(calc((1 - var(--p)) * var(--afasta) * -1)); }
  .so-lado--b { transform: translateY(calc((1 - var(--p)) * var(--afasta))); }
  .so-lado--a figcaption { order: -1; margin: 0 0 2.4rem; }
  .so-lado figcaption { max-width: 19rem; }
  .so-lado q { font-size: 1.2rem; }
  .so-no { top: calc(100% + var(--vao) / 2); left: 50%; }
  .so-oito::after { display: none; }
  .so-espelho { grid-template-columns: 1fr; }
  .so-espelho::before { display: none; }
  .so-col:first-child, .so-col:last-child { grid-column: 1; grid-row: auto; }
  .so-col:last-child { padding-top: 2rem; border-top: 1px solid color-mix(in oklab, var(--outono) 16%, transparent); }
  .so-quando, .so-registro span, .so-credito { font-size: .875rem; }
  .so-quando { letter-spacing: .14em; }
}
@media (prefers-reduced-motion: reduce) { .so { --p: 1 !important; } .so-no i { animation: none; } }