/* so · Quem é ela — pele noite. A voz dela em legendas, como nos reels. */
.so{padding-bottom:calc(var(--sec) * .9)}
.so-luz{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:clip}
.so-luz i{position:absolute;border-radius:50%;background:radial-gradient(closest-side, var(--c) 0%, color-mix(in oklab, var(--c) 40%, transparent) 55%, transparent 100%)}
.so-l1{--c:color-mix(in oklab, var(--cacau) 55%, transparent);width:70vw;height:70vw;left:-22vw;top:8%}
.so-l2{--c:color-mix(in oklab, var(--ouro) 22%, transparent);width:52vw;height:52vw;right:-18vw;top:46%}
.so-l3{--c:color-mix(in oklab, var(--blusa) 22%, transparent);width:60vw;height:60vw;left:10vw;bottom:-30vw}

/* cabeçalho */
.so-cab{display:flex;flex-direction:column;gap:28px}
.so-titulo .voz-dela{max-width:11em}
.so-lead{font-size:var(--t-lead);line-height:1.45;color:color-mix(in oklab, var(--creme) 86%, transparent);max-width:27em}

/* palco: ela fixa à esquerda, as falas correm à direita */
.so-palco{display:grid;grid-template-columns:minmax(0,5.2fr) minmax(0,6.8fr);gap:clamp(32px,4.4vw,80px)}
.so-fig-col{position:relative}
.so-fig{position:sticky;top:92px;height:min(calc(100svh - 124px), 800px);display:flex;align-items:flex-end;justify-content:center}
.so-fig::before{content:"";position:absolute;z-index:0;left:4%;right:4%;top:2%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side, color-mix(in oklab, var(--rosado) 34%, transparent), color-mix(in oklab, var(--cacau) 22%, transparent) 55%, transparent)}
.so-fig::after{content:"";position:absolute;z-index:2;left:8%;right:8%;bottom:0;height:1px;background:linear-gradient(to right, transparent, color-mix(in oklab, var(--ouro) 70%, transparent), transparent)}
.so-irma{position:absolute;left:-.06em;bottom:-.14em;z-index:3;font-family:var(--f-sua);font-style:italic;font-weight:300;font-size:clamp(7rem, 1rem + 12vw, 14.5rem);line-height:1;letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1.5px var(--ouro-claro);pointer-events:none;user-select:none}
.so-retrato{position:relative;z-index:1;margin:0;height:100%;aspect-ratio:968/1210;max-width:100%;overflow:hidden;
  -webkit-mask:linear-gradient(to bottom, #000 74%, transparent 99%);mask:linear-gradient(to bottom, #000 74%, transparent 99%)}
.so-retrato img{width:100%;height:auto;filter:drop-shadow(0 30px 50px rgba(20,10,5,.5));transition:opacity .9s var(--ease), transform 1.2s var(--ease)}
.so-retrato .so-img-2{position:absolute;left:0;top:0;opacity:0;transform:translateY(14px)}
.so-fala3 .so-img-1{opacity:0}
.so-fala3 .so-img-2{opacity:1;transform:none}

/* as falas */
.so-falas{list-style:none;margin:clamp(72px,11vh,120px) 0 0;padding:0;display:flex;flex-direction:column;gap:clamp(80px,12vh,128px)}
.so-fala{position:relative}
.so-quando{font-size:var(--t-mini);font-weight:500;letter-spacing:.04em;color:color-mix(in oklab, var(--creme) 70%, transparent);margin-bottom:18px}
.so-tom{font-size:.75rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ouro-claro);margin-right:2px}
.so-frase{margin:0}
.so-frase p{font-family:var(--f-dela);font-weight:800;font-size:clamp(2.3rem, 1.1rem + 3vw, 4.4rem);line-height:1;letter-spacing:-.035em;color:var(--creme);text-wrap:balance}
.so-frase .so-w{display:inline-block;white-space:pre}
.so-f2 .so-frase p{font-size:clamp(3rem, 1.2rem + 5vw, 6.6rem)}
.so-f5 .so-frase p{font-size:clamp(1.9rem, 1rem + 2.1vw, 3.2rem);line-height:1.04}

/* a resposta delas: Sentient, fio de ouro */
.so-eco{margin:28px 0 0;padding-left:20px;border-left:2px solid var(--ouro);max-width:30em}
.so-eco blockquote{margin:0}
.so-eco p{font-family:var(--f-sua);font-style:italic;font-weight:300;font-size:clamp(1.2rem, 1rem + .6vw, 1.5rem);line-height:1.3;color:color-mix(in oklab, var(--creme) 92%, transparent)}
.so-eco figcaption{margin-top:6px;font-size:var(--t-mini);color:color-mix(in oklab, var(--creme) 70%, transparent)}

/* fala 3: o painel claro da transcrição (elevação no meio da noite) */
.so-painel{--so-acende:var(--ouro-tinta);background:var(--creme);color:var(--cafe);border-radius:var(--raio-card);padding:clamp(28px,3.4vw,52px);box-shadow:0 40px 80px -40px rgba(0,0,0,.75);margin-left:calc(-1 * clamp(0px,2vw,32px))}
.so-painel .so-quando{color:var(--cafe-2)}
.so-painel .so-tom{color:var(--ouro-tinta)}
.so-painel .so-frase p{color:var(--cafe)}
.so-conta{margin-top:24px;font-size:var(--t-texto);line-height:1.6;color:var(--cafe);max-width:34em}
.so-conta mark{background:linear-gradient(to top, color-mix(in oklab, var(--ouro) 42%, transparent) 38%, transparent 38%);color:inherit;padding:0 .08em;font-weight:600}

.so-f4,.so-f5{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);gap:clamp(24px,3vw,48px);align-items:center}
.so-f5{grid-template-columns:minmax(0,.62fr) minmax(0,1fr)}
.so-quadro{margin:0;border-radius:var(--raio-card);overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.so-quadro img{width:100%;height:auto}

/* fecho: número, enfermeira, a voz delas */
.so-fecho{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);grid-template-rows:auto auto;gap:48px clamp(40px,6vw,104px);align-items:start;margin-top:clamp(96px,11vw,160px);padding-top:clamp(40px,4vw,56px);border-top:1px solid color-mix(in oklab, var(--creme) 16%, transparent)}
.so-num{grid-row:1 / 3;align-self:center}
.so-num-n{font-family:var(--f-dela);font-weight:800;font-size:clamp(6rem, 1rem + 15vw, 17rem);line-height:.82;letter-spacing:-.05em;color:var(--creme)}
.so-num-mais{font-family:var(--f-sua);font-style:italic;font-weight:300;color:transparent;-webkit-text-stroke:1.4px var(--ouro-claro);margin-right:.04em}
.so-num-t{margin-top:22px;font-size:var(--t-lead);line-height:1.4;max-width:19em;color:color-mix(in oklab, var(--creme) 86%, transparent)}
.so-dentro-t{font-weight:800;font-size:var(--t-h3);line-height:1.05;letter-spacing:-.025em;margin-bottom:12px}
.so-dentro p:not(.so-dentro-t){font-size:var(--t-texto);color:color-mix(in oklab, var(--creme) 86%, transparent)}
.so-delas{margin:0;padding:28px 0 0;border-top:1px solid color-mix(in oklab, var(--creme) 16%, transparent)}
.so-delas blockquote{margin:0}
.so-delas p{font-family:var(--f-sua);font-style:italic;font-weight:300;font-size:clamp(1.35rem, 1.05rem + .8vw, 1.8rem);line-height:1.22}
.so-delas figcaption{margin-top:8px;font-size:var(--t-mini);color:color-mix(in oklab, var(--creme) 70%, transparent)}

.so-zap{margin-top:14px;color:var(--creme)}

/* gesto: as palavras entram como legenda (só com JS e movimento) */
.js .so-anima .so-w{opacity:0}

/* ---------- tablet ---------- */
@media (max-width:1023px){
  .so-palco{grid-template-columns:minmax(0,1fr);gap:56px}
  .so-dir{display:contents}
  .so-cab{order:1}
  .so-fig-col{order:2}
  .so-falas{order:3;margin-top:0}
  .so-fig{position:relative;top:auto;height:clamp(460px, 90vw, 720px)}
  .so-retrato .so-img-2{display:none}
  .so-fala3 .so-img-1{opacity:1}
  .so-num{grid-row:auto}
  .so-delas{grid-column:1 / -1}
  .so-falas{padding-top:0;gap:88px}
  .so-fecho{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:640px){
  .so-fig{height:clamp(420px, 118vw, 520px)}
  .so-irma{font-size:34vw}
  .so-painel{margin-left:0}
  .so-f4,.so-f5{grid-template-columns:minmax(0,1fr)}
  .so-f5 .so-quadro{order:2}
  .so-quadro{max-width:300px}
  .so-fecho{grid-template-columns:minmax(0,1fr);gap:48px}
  .so-frase p{font-size:clamp(2.1rem, 1rem + 5.4vw, 2.6rem)}
  .so-f2 .so-frase p{font-size:clamp(2.8rem, 1rem + 9vw, 3.6rem)}
  .so-f5 .so-frase p{font-size:clamp(1.75rem, 1rem + 3.6vw, 2.1rem)}
  .so-conta{font-size:1.0625rem}
}

@media (prefers-reduced-motion:reduce){
  .js .so-anima .so-w{opacity:1!important;transform:none!important}
}