/* so · Sobre — "Nutricionista e enfermeiro" (escuro, oliva-fundo) */
.so { --so-pt: clamp(5rem, 11vw, 9.5rem); --so-pb: clamp(5rem, 9vw, 8rem);
  position: relative; isolation: isolate; overflow: clip; color: var(--creme); background: var(--oliva-fundo);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2rem, 4vw, 5rem);
  padding: var(--so-pt) var(--margem) var(--so-pb); }

.so-fundo { position: absolute; inset: 0; z-index: -2; background:
  linear-gradient(180deg in oklab, color-mix(in oklab, var(--oliva) 80%, black), transparent 9rem),
  radial-gradient(70% 55% at 85% 12% in oklab, color-mix(in oklab, var(--oliva) 70%, var(--oliva-fundo)), transparent),
  linear-gradient(180deg in oklab, var(--oliva-fundo), color-mix(in oklab, var(--oliva-fundo) 78%, black)); }
.so-luz { position: absolute; left: calc(var(--margem) - 12vw); bottom: -20%; width: 60vw; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side in oklab, color-mix(in oklab, var(--musgo) 50%, var(--oliva-fundo)), transparent); opacity: .7; }

.so-grao { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: .06; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px; }

/* costura: ponto corrido desenhado pela rolagem (path montado pelo so.js) */
.so-costura { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; }
.so-cos { fill: none; stroke: var(--fio-3); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 9 7; }
.so-cos-rev { fill: none; stroke: #fff; stroke-width: 14; stroke-dasharray: 1 1; stroke-dashoffset: var(--so-p, 1); }

/* figura: em pé diante de um arco de luz (a janela em arco do consultório), sangrando por baixo */
.so-figura { grid-column: 1; grid-row: 3 / span 4; position: relative; z-index: 2; margin: 2.2rem 0 calc(-1 * var(--so-pb)); min-height: 38rem; }
.so-arco { position: absolute; left: 50%; bottom: 0; translate: -50% 0; height: 82%; aspect-ratio: .62; max-width: 100%; border-radius: 999px 999px 0 0;
  background: linear-gradient(180deg in oklab, color-mix(in oklab, var(--creme) 20%, var(--oliva-fundo)), color-mix(in oklab, var(--musgo) 36%, var(--oliva-fundo)) 50%, color-mix(in oklab, var(--oliva) 55%, var(--oliva-fundo)));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--creme) 16%, transparent); overflow: hidden; }
.so-arco svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.so-arco path { fill: none; stroke: color-mix(in oklab, var(--creme) 14%, transparent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.so-foto { position: absolute; left: 50%; bottom: 0; translate: -50% 0; display: block; height: 100%; width: auto; max-width: none;
  filter: drop-shadow(0 0 6px rgb(18 24 4 / .5)) drop-shadow(0 0 26px rgb(18 24 4 / .45)); }

/* texto */
.so-texto { display: contents; }
.so-sobre { grid-column: 1 / -1; grid-row: 1; }
.so-titulo { grid-column: 1 / -1; grid-row: 2; }
.so-apoio { grid-column: 2; grid-row: 3; }
.so-fatos { grid-column: 2; grid-row: 4; }
.so-onde { grid-column: 2; grid-row: 5; }
.so-fala { grid-column: 2; grid-row: 6; }
.so-sobre, .so-titulo, .so-apoio, .so-fatos, .so-onde, .so-fala { position: relative; z-index: 3; max-width: 46rem; }
.so-titulo { max-width: none; }
.so-sobre { margin: 0 0 1.4rem; display: flex; align-items: baseline; gap: .55rem; font-size: .98rem; font-weight: 600; letter-spacing: .02em;
  color: var(--fio-2); }
.so-sobre::before { content: ""; flex: none; align-self: flex-start; margin-top: .6em; width: 1.9rem; height: 2px;
  background: repeating-linear-gradient(90deg, var(--fio-3) 0 5px, transparent 5px 8px); }
.so-titulo { margin: 0; font-family: var(--f-titulo); font-weight: 760; font-size: clamp(2.3rem, 1rem + 4.3vw, 5.6rem); line-height: 1;
  letter-spacing: -.028em; color: var(--creme); text-wrap: balance; }
.so-leve { display: block; font-weight: 330; color: var(--fio-2); letter-spacing: -.02em; }
.so-apoio { margin: 3rem 0 0; align-self: start; max-width: 33em; font-size: var(--t-apoio); line-height: 1.6; color: color-mix(in oklab, var(--creme) 86%, var(--oliva-fundo)); text-wrap: pretty; }

.so-fatos { list-style: none; margin: 3.4rem 0 0; padding: 0; display: grid; }
.so-fato { position: relative; display: grid; gap: .25rem; padding: 1.15rem 0 1.15rem 2.8rem; }
.so-fato + .so-fato { border-top: 1px solid color-mix(in oklab, var(--creme) 12%, transparent); }
.so-no { position: absolute; left: .3rem; top: 1.5rem; width: 1.05rem; height: 1.05rem; border-radius: 50%;
  background: var(--oliva-fundo); box-shadow: inset 0 0 0 2px var(--fio-3); transition: background-color .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease); }
.so-no.so-tocado { background: var(--fio-2); box-shadow: inset 0 0 0 2px var(--fio-2), 0 0 0 5px color-mix(in oklab, var(--fio-2) 18%, transparent); }
.so-rot { font-size: .9rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: color-mix(in oklab, var(--creme) 70%, var(--oliva-fundo)); }
.so-val { font-family: var(--f-titulo); font-weight: 720; font-size: clamp(1.9rem, 1rem + 2.1vw, 3rem); line-height: 1.04; letter-spacing: -.022em;
  font-variant-numeric: lining-nums; }

.so-onde { list-style: none; margin: 1.6rem 0 0; padding: 0 0 0 2.8rem; display: flex; flex-wrap: wrap; gap: .6rem; }
.so-onde li { display: inline-flex; align-items: center; gap: .55rem; min-height: 2.9rem; padding: .55rem 1.1rem .55rem .9rem; border-radius: 99px;
  font-size: 1.05rem; font-weight: 500; border: 1px solid color-mix(in oklab, var(--creme) 26%, transparent);
  background: color-mix(in oklab, var(--creme) 6%, transparent); }
.so-onde svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: var(--fio-2); stroke-width: 1.7; stroke-linejoin: round; flex: none; }

.so-fala { position: relative; margin: 3.4rem 0 0; padding-left: 2.8rem; }
.so-fala .so-no { top: .75rem; }
.so-fala blockquote { margin: 0; }
.so-fala strong { font-weight: 720; color: var(--creme); }
.so-fala p { margin: 0; font-family: var(--f-titulo); font-weight: 330; font-size: clamp(1.75rem, 1rem + 2vw, 3rem); line-height: 1.12; letter-spacing: -.02em;
  color: var(--fio-2); text-wrap: balance; }
.so-fala figcaption { margin-top: .9rem; font-size: 1rem; font-weight: 600; letter-spacing: .02em; color: color-mix(in oklab, var(--creme) 72%, var(--oliva-fundo)); }

/* ---------- notebook estreito ---------- */
@media (min-width: 981px) and (max-width: 1180px) {
  .so { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }
  .so-figura { width: calc((100% - 2 * var(--margem)) * 4 / 10); }
}

/* ---------- tablet e celular ---------- */
@media (max-width: 980px) {
  .so { grid-template-columns: minmax(0, 1fr); padding-top: clamp(4.5rem, 14vw, 6rem); }
  .so-sobre, .so-titulo, .so-apoio, .so-fatos, .so-onde, .so-fala { grid-column: 1; }
  .so-sobre { font-size: .9rem; margin-bottom: 1rem; }
  .so-apoio { grid-row: 3; margin-top: 1.2rem; }
  .so-figura { grid-column: 1; grid-row: 4; min-height: 0; height: min(158vw, 46rem); margin: 1.6rem calc(-1 * var(--margem)) 0;
    -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent); mask-image: linear-gradient(180deg, #000 80%, transparent); }
  .so-arco { height: 80%; }
  .so-luz { left: 50%; top: 22rem; bottom: auto; width: 130vw; translate: -50% 0; }
  .so-fatos { grid-row: 5; margin-top: 0; }
  .so-onde { grid-row: 6; }
  .so-fala { grid-row: 7; }
}
@media (max-width: 420px) {
  .so-onde li { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .so-cos-rev { stroke-dashoffset: 0; }
}