/* Sobre — "A farmacêutica" (classes so-). Gesto: a graduação da proveta deitada vira régua do tempo. */
.so-grade{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(300px,.85fr);gap:clamp(32px,5vw,88px);align-items:center}
.so-titulo{max-width:15ch}
.so-texto .wf-texto{margin-top:22px}
.so-texto .wf-texto q{font-style:italic;color:var(--tinta)}
.so-prova{margin-top:34px;padding-left:22px;border-left:1px solid var(--ameixa-clara)}
.so-prova .wf-citacao{font-size:clamp(16px,1.25vw,19px)}

/* retrato emoldurado por vidro */
.so-retrato{position:relative;justify-self:end;align-self:end;width:min(100%,560px);margin:0 0 6px}
.so-halo{position:absolute;left:50%;top:-10%;width:130%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle, color-mix(in oklch, var(--ameixa-clara) 50%, var(--papel)) 0%, color-mix(in oklab, var(--greige-2) 60%, transparent) 45%, transparent 70%);filter:blur(22px);z-index:0}
.so-moldura{position:relative;z-index:1;border-radius:18px;padding:6px;background:var(--vidro);box-shadow:var(--vidro-borda)}
.so-moldura img{width:100%;height:auto;border-radius:13px}
.so-chao{position:absolute;left:8%;right:8%;bottom:-16px;height:30px;border-radius:50%;background:radial-gradient(ellipse at center, rgba(13,50,70,.3), rgba(13,50,70,.1) 50%, transparent 72%);z-index:0}
/* o rótulo colado no vidro */
.so-legenda{position:absolute;z-index:2;left:22px;bottom:22px;margin:0;padding:9px 14px;border-radius:10px;background:color-mix(in oklab, var(--papel) 88%, transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px rgba(13,50,70,.18), 0 10px 24px -16px rgba(13,50,70,.5);color:var(--tinta);line-height:1.5}
.so-legenda b{display:block;font-weight:500;font-size:11.5px;letter-spacing:.1em}
.so-legenda small{display:block;font-size:10px;letter-spacing:.08em;color:var(--tinta-suave)}
.so-legenda i{font-style:normal}

/* régua do tempo, de borda a borda */
.so-tempo{
  position:relative;margin:clamp(40px,4vw,56px) calc(-1 * var(--gutter)) 0;padding-top:84px;
  --so-m:min(100% - 2 * var(--gutter), var(--largura));
  --so-x0:calc((100% - var(--so-m)) / 2);
}
.so-tubo{position:relative;height:28px;background:var(--vidro);box-shadow:var(--vidro-borda);overflow:hidden}
.so-ticks{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.so-ticks line{stroke:var(--petroleo)}
.so-ticks text{font-family:var(--mono);font-size:10.5px;fill:var(--petroleo);fill-opacity:.7;letter-spacing:.04em}
.so-fase,.so-liquido{position:absolute;top:3px;bottom:3px;clip-path:inset(0 100% 0 0);transition:clip-path 1.8s cubic-bezier(.3,.8,.2,1)}
.so-fase{left:calc(var(--so-x0) + .1538 * var(--so-m));width:calc(.6924 * var(--so-m));background:linear-gradient(90deg, color-mix(in oklch, var(--ameixa-clara) 50%, transparent), color-mix(in oklch, var(--ameixa-clara) 72%, transparent));box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.so-liquido{left:calc(var(--so-x0) + .8462 * var(--so-m));right:0;border-radius:11px 0 0 11px;background:linear-gradient(90deg, var(--ameixa-clara), var(--ameixa) 38%, color-mix(in oklch, var(--ameixa) 60%, var(--caramelo)));transition-delay:1.3s;transition-duration:1.6s}
.so-liquido::before{content:"";position:absolute;left:-3px;top:-2px;bottom:-2px;width:11px;border-radius:50%;background:color-mix(in oklch, var(--ameixa-clara) 75%, white);opacity:.95}
.so-liquido::after{content:"";position:absolute;left:14px;right:0;top:4px;height:5px;border-radius:4px;background:rgba(255,255,255,.35)}
.so-tempo.wf-visivel .so-fase,.so-tempo.wf-visivel .so-liquido{clip-path:inset(0 0 0 0)}
.so-ponto{position:absolute;left:calc(var(--so-x0) + .8462 * var(--so-m));top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--ameixa);box-shadow:0 0 0 4px color-mix(in oklab, var(--ameixa) 20%, transparent);opacity:0;transition:opacity .5s 2.6s}
.so-tempo.wf-visivel .so-ponto{opacity:1;animation:so-pulsa 2.6s 3s ease-in-out infinite}
@keyframes so-pulsa{0%,100%{box-shadow:0 0 0 4px color-mix(in oklab, var(--ameixa) 20%, transparent)}50%{box-shadow:0 0 0 9px color-mix(in oklab, var(--ameixa) 8%, transparent)}}

/* as marcas (anos reais) */
.so-marcas{list-style:none;position:relative;height:124px;margin:0 auto;width:var(--so-m)}
.so-marcas li{position:absolute;left:calc(var(--p) * 100%);top:0;padding-top:24px;width:max-content;max-width:200px}
.so-marcas li::before{content:"";position:absolute;left:0;top:0;width:1px;height:16px;background:var(--petroleo);opacity:.5}
.so-marcas b{display:block;font-family:var(--serifa);font-weight:400;font-size:clamp(22px,2.1vw,30px);line-height:1;letter-spacing:-.02em;color:var(--petroleo)}
.so-marcas span{display:block;margin-top:7px;font-size:14px;font-weight:500;color:var(--tinta)}
.so-marcas small{display:block;margin-top:3px;font-size:12.5px;line-height:1.35;color:var(--tinta-suave)}
.so-marcas .so-hoje{transform:translateX(-100%);text-align:right;max-width:260px}
.so-marcas .so-hoje small{white-space:nowrap}
.so-marcas .so-hoje::before{left:auto;right:0}
.so-marcas .so-clinica{top:auto;bottom:calc(100% + 28px);padding:0 0 24px;max-width:280px}
.so-marcas .so-clinica::before{top:auto;bottom:0;height:20px;background:var(--ameixa);opacity:.9}
.so-marcas .so-clinica span{margin-top:6px}
.so-marcas .so-clinica small{font-family:var(--serifa);font-style:italic;font-size:13.5px;color:var(--tinta-suave)}
/* as duas eras escritas dentro do tubo */
.so-era{position:absolute;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;pointer-events:none}
.so-era-farmacia{left:calc(var(--so-x0) + .2308 * var(--so-m) + 6px);color:var(--petroleo);opacity:0;transition:opacity .8s 1.2s}
.so-era-estetica{left:calc(var(--so-x0) + .8462 * var(--so-m) + 18px);color:var(--perola);opacity:0;transition:opacity .8s 2.4s}
.so-tempo.wf-visivel .so-era{opacity:.85}
.so-aqui{display:block;font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ameixa)}

/* fecho: a frase dela */
.so-fecho{margin-top:clamp(40px,5vw,72px);text-align:center}
.so-voz p{font-family:var(--serifa);font-style:italic;font-weight:300;font-size:clamp(24px,2.6vw,38px);line-height:1.2;letter-spacing:-.01em;color:var(--petroleo);max-width:24ch;margin:0 auto}
.so-voz strong{font-weight:300;color:var(--ameixa)}
.so-voz .wf-autor{margin-top:14px}

@media (max-width:1140px){
  .so-marcas li{max-width:150px}
  .so-marcas b{font-size:22px}
  .so-marcas span{font-size:13px}
  .so-marcas small{font-size:11.5px}
  .so-clinica{max-width:200px}
}
@media (max-width:900px){
  .so-grade{grid-template-columns:1fr;gap:40px}
  .so-retrato{justify-self:start;width:min(100%,460px)}
  .so-legenda{left:16px;bottom:16px;padding:8px 12px}
  /* a régua fica em pé: lista com o tubo à esquerda */
  .so-tempo{margin-left:0;margin-right:0;padding-top:0}
  .so-tubo{position:absolute;left:0;top:0;bottom:0;width:22px;height:auto;border-radius:11px}
  .so-fase,.so-liquido{left:3px;right:3px;width:auto;clip-path:inset(0 0 100% 0)}
  .so-fase{top:var(--so-y2004,0);height:var(--so-h-fase,0);bottom:auto}
  .so-liquido{top:var(--so-y2022,0);bottom:3px;border-radius:0 0 9px 9px;background:var(--liquido);transition-delay:1s;transition-duration:1.4s}
  .so-liquido::before{left:-2px;right:-2px;top:-5px;bottom:auto;width:auto;height:10px}
  .so-liquido::after{left:4px;right:auto;top:10px;bottom:10px;width:5px;height:auto}
  .so-ponto{left:50%;top:var(--so-y2022,0);margin:0 0 0 -3.5px;transform:translateY(-50%)}
  .so-marcas{width:auto;height:auto;display:grid;gap:24px;padding-left:46px}
  .so-marcas li,.so-marcas .so-clinica,.so-marcas .so-hoje{position:relative;left:auto;top:auto;bottom:auto;transform:none;text-align:left;padding:0;width:auto;max-width:none}
  .so-marcas li::before,.so-marcas .so-clinica::before,.so-marcas .so-hoje::before{left:-35px;right:auto;top:11px;bottom:auto;width:16px;height:1px;background:var(--petroleo);opacity:.5}
  .so-legenda small i{display:none}
  .so-marcas li::after{content:"";position:absolute;left:-38px;top:8px;width:7px;height:7px;border-radius:50%;background:var(--greige-4)}
  .so-marcas .so-clinica::after,.so-marcas .so-hoje::after{background:var(--ameixa)}
  .so-marcas .so-clinica::after{display:none}
  .so-marcas b,.so-marcas span,.so-marcas small{font-size:revert}
  .so-marcas b{font-size:24px}
  .so-marcas span{font-size:14px}
  .so-marcas small{font-size:12.5px}
  .so-clinica span{margin-top:6px}
}