/* so · Médica e professora */
.so{--px:clamp(20px,4.4vw,72px);position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);column-gap:clamp(40px,6vw,104px);align-items:center;padding:clamp(80px,11vw,160px) var(--px);max-width:1424px;margin:0 auto;overflow-x:clip}
.so-rotulo{margin:0 0 16px;font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--taupe-escuro)}
.so-titulo{margin:0;font-family:var(--f-titulo);font-weight:600;font-size:clamp(34px,4.2vw,64px);line-height:1.02;letter-spacing:-.015em;max-width:18ch}
.so-titulo em{font-style:italic;font-weight:500;color:var(--taupe-escuro)}
.so-fala{margin:clamp(28px,4vw,48px) 0 0;max-width:46ch}
.so-fala blockquote{margin:0}
.so-fala p{margin:0;font-family:var(--f-titulo);font-style:italic;font-size:clamp(20px,1.7vw,25px);line-height:1.35;color:var(--tinta-suave)}
.so-marca{position:relative;background:none;color:var(--tinta);font-style:normal;font-weight:600;white-space:nowrap}
.so-marca svg{position:absolute;left:-2%;width:104%;bottom:-9px;height:12px;overflow:visible}
.so-marca path{fill:none;stroke:var(--caneta);stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke}
.js .so-marca path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s cubic-bezier(.2,.7,.2,1) .4s}
.so-fala-viva .so-marca path{stroke-dashoffset:0}
.so-fala figcaption{margin-top:12px;font-size:13.5px;color:var(--tinta-suave)}

.so-titulos{margin:28px 0 0;padding-top:20px;border-top:1px solid color-mix(in oklab, var(--taupe) 35%, transparent);font-size:15.5px;line-height:1.55;color:var(--tinta-suave);max-width:52ch}

/* foto presa com ímã */
.so-foto{margin:0;background:#fff;padding:12px 12px 0;box-shadow:0 30px 50px -28px rgba(70,52,38,.45),0 4px 10px -4px rgba(70,52,38,.2);position:relative}
.so-foto img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.so-foto figcaption{font-family:var(--f-caneta);font-size:21px;font-weight:480;font-variation-settings:"INFM" 60,"BNCE" 20;color:var(--caneta);padding:12px 6px 16px;line-height:1.2}
.so-ima{position:absolute;z-index:2;left:50%;top:-12px;width:26px;height:26px;margin-left:-13px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #6f97db, var(--caneta) 55%, #0f2c62);
  box-shadow:0 5px 7px -2px rgba(20,30,60,.45), inset 0 -2px 3px rgba(0,0,0,.25)}
.so-foto-aula{transform:rotate(1.8deg);max-width:520px;justify-self:end;width:100%}

/* quadro com a régua */
.so-quadro{grid-column:1/-1;position:relative;margin-top:clamp(64px,7vw,104px);display:grid;grid-template-columns:clamp(200px,17vw,250px) minmax(0,1fr);gap:clamp(24px,2.6vw,40px);align-items:start;padding:clamp(40px,3.6vw,56px) clamp(28px,3vw,48px) clamp(40px,3.6vw,56px)}
.so-superficie{position:absolute;inset:0;border-radius:6px;
  background:linear-gradient(115deg, transparent 0 40%, rgba(255,255,255,.7) 48%, transparent 58%),radial-gradient(30% 60% at 100% 80%, rgba(94,77,64,.10), transparent),radial-gradient(120% 90% at 20% 0% in oklab, #ffffff, #f4f5f5 60%, #e9ebeb);
  border:10px solid transparent;background-clip:padding-box;
  box-shadow:0 0 0 10px #b9bfc5 inset,0 30px 50px -28px rgba(70,52,38,.45),0 6px 14px -6px rgba(70,52,38,.25)}
.so-superficie::before{content:"";position:absolute;inset:-10px;border-radius:7px;z-index:-1;background:linear-gradient(160deg,var(--aluminio-1),var(--aluminio-2) 40%,#e6e9ec 55%,var(--aluminio-3))}
.so-calha{position:absolute;left:-1%;right:-1%;bottom:-18px;height:13px;border-radius:2px 2px 5px 5px;background:linear-gradient(180deg,#f2f4f5,#c4c9ce 45%,#9aa1a8 80%,#7f868d);box-shadow:0 10px 16px -8px rgba(70,52,38,.45)}
.so-foto-pais{transform:rotate(-2.4deg);margin-top:-4px}
.so-foto-pais figcaption{font-size:19px}
.so-trilho{position:relative;padding-top:6px}
.so-linha{position:absolute;left:0;right:22px;top:62px;height:40px;width:calc(100% - 22px);overflow:visible}
.so-seta{position:absolute;right:0;top:67px;width:30px;height:30px;overflow:visible}
.so-traco{fill:none;stroke:var(--caneta);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.so-regua{position:relative;list-style:none;margin:0;padding:0 34px 0 0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(12px,1.4vw,22px)}
.so-marco{position:relative}
.so-ano{position:relative;display:inline-block;font-family:var(--f-caneta);font-size:clamp(20px,1.6vw,27px);font-weight:580;font-variation-settings:"INFM" 60,"BNCE" 20;color:var(--caneta);line-height:1;height:52px;white-space:nowrap}
.so-ano small{font-size:.66em;font-weight:500;margin-left:1px}
.so-ano-circulo svg{position:absolute;left:-16px;top:-14px;width:calc(100% + 32px);height:58px;overflow:visible}
.so-marco::before{content:"";position:absolute;left:2px;top:76px;width:11px;height:11px;border-radius:50%;background:var(--caneta);box-shadow:0 0 0 4px #f6f7f7}
.so-marco p{margin:52px 0 0;font-size:15px;line-height:1.48;color:var(--tinta-suave);hyphens:manual;overflow-wrap:break-word}
.so-marco b{font-weight:500;color:var(--tinta)}

.so-raiz{grid-column:1/-1;position:relative;margin:clamp(80px,9vw,128px) 0 0 clamp(0px,18vw,300px);max-width:min(860px,100%);padding-left:clamp(22px,2.4vw,36px);border-left:2px solid var(--dourado)}
.so-raiz p{margin:0;font-family:var(--f-titulo);font-style:italic;font-weight:500;font-size:clamp(26px,2.8vw,42px);line-height:1.18;color:var(--tinta)}
.so-raiz footer{margin-top:14px;font-size:13.5px;color:var(--tinta-suave)}

/* revelação: a caneta escreve */
.js .so-ano{clip-path:inset(-30px 100% -30px -30px);transition:clip-path .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(.5s + var(--i) * .24s)}
.js .so-marco p,.js .so-marco::before{opacity:0;transform:translateY(10px);transition:opacity .8s, transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(.65s + var(--i) * .24s)}
.js .so-foto-pais{opacity:0;translate:0 14px;transition:opacity .9s, translate .9s cubic-bezier(.2,.7,.2,1)}
.so.so-vivo .so-ano{clip-path:inset(-30px -30px -30px -30px)}
.so.so-vivo .so-marco p,.so.so-vivo .so-marco::before{opacity:1;transform:none}
.so.so-vivo .so-foto-pais{opacity:1;translate:0 0}

@media (max-width:1180px) and (min-width:960px){
  .so-quadro{grid-template-columns:1fr}
  .so-foto-pais{width:220px;position:absolute;right:40px;top:-60px;z-index:3}
  .so-trilho{padding-top:170px}
}
@media (max-width:959px){
  .so{grid-template-columns:1fr}
  .so-foto-aula{justify-self:end;margin-top:52px;max-width:min(360px,88%)}
  .so-quadro{grid-template-columns:1fr;padding:34px 24px 36px}
  .so-foto-pais{max-width:min(230px,66%);justify-self:start;width:100%;transform:rotate(-3.5deg);margin:4px 0 6px 6px}
  .so-foto-pais figcaption{font-size:18px}
  .so-raiz{margin-left:0}
  .so-linha,.so-seta{display:none}
  .so-regua{grid-template-columns:1fr;gap:26px;padding:0 0 0 26px;border-left:3px solid var(--caneta);border-radius:2px;margin-left:6px}
  .so-marco::before{left:-34px;top:9px}
  .so-ano{height:auto}
  .so-marco p{margin-top:8px;font-size:16px}
}