/* Sobre (prefixo so-) — "Começou fazendo dentes". Fundo claro morno; o retrato pousado numa lâmina de cerâmica, sob luz de bancada. */
.so-sobre{background:var(--marfim); overflow:hidden}
/* a malha: um foco de luz de bancada atrás dele (alto, à esquerda) e um sopro frio de opala à direita */
.so-sobre .wf-malha i:nth-child(1){left:-10%; top:-26%; width:72vmax; height:72vmax;
  background:radial-gradient(closest-side, #fbf8f1, #fbf8f100);
  background:radial-gradient(closest-side in oklch, oklch(.985 .011 90), oklch(.985 .011 90 / 0))}
.so-sobre .wf-malha i:nth-child(2){left:-6%; bottom:-34%; width:60vmax; height:60vmax;
  background:radial-gradient(closest-side, #e2d0b2, #e2d0b200);
  background:radial-gradient(closest-side in oklch, oklch(.862 .04 84 / .85), oklch(.862 .04 84 / 0))}
.so-sobre .wf-malha i:nth-child(3){right:-14%; bottom:-28%; width:62vmax; height:62vmax;
  background:radial-gradient(closest-side, #f6f1e7, #f6f1e700);
  background:radial-gradient(closest-side in oklch, oklch(.962 .014 88), oklch(.962 .014 88 / 0))}
.so-sobre .wf-malha i:nth-child(4){right:4%; top:-30%; width:54vmax; height:54vmax;
  background:radial-gradient(closest-side, #d5e0e8, #e3e9ec00);
  background:radial-gradient(closest-side in oklch, oklch(.9 .018 232 / .85), oklch(.925 .009 228 / 0))}

.so-grade{display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:clamp(2rem, 6vw, 6.5rem); align-items:stretch}

/* o retrato: uma lâmina de cerâmica em pé, com o tom dela; ele na frente, a cabeça passando da borda de cima, a sombra dele projetada na lâmina */
.so-retrato{margin:0; position:relative; display:flex; flex-direction:column; justify-content:flex-end; padding-top:3.5rem}
.so-lamina{position:relative; aspect-ratio:4/5; border-radius:var(--raio);
  background:linear-gradient(180deg, #ebdfca, #dcc5a0);
  background:linear-gradient(172deg in oklab, var(--marfim-2) 0%, var(--escala-3) 45%, var(--escala-5) 100%);
  box-shadow:0 0 0 1px rgb(37 47 60 / .1), 0 40px 60px -36px rgb(37 47 60 / .55), 0 2px 0 rgb(255 255 255 / .35) inset}
.so-lamina::before{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(58% 46% at 46% 18%, rgb(251 248 241 / .95), rgb(251 248 241 / 0))}
/* a sombra dele pousada no pé da lâmina */
.so-lamina::after{content:""; position:absolute; left:10%; right:10%; bottom:-7px; height:16px; border-radius:50%; background:rgb(37 47 60 / .32); filter:blur(11px); pointer-events:none}
.so-lamina img{position:absolute; left:50%; bottom:0; width:126%; max-width:none; transform:translateX(-50%); z-index:1;
  filter:drop-shadow(-14px 22px 22px rgb(37 47 60 / .3))}
.so-legenda{display:grid; grid-template-columns:auto 1fr; gap:var(--e3); align-items:start; margin-top:var(--e4); padding-top:var(--e3); border-top:1px solid var(--fio)}
.so-ficha{display:flex; flex-direction:column; line-height:1.3}
.so-ficha strong{font-family:var(--f-titulo); font-weight:400; font-size:1.2rem; letter-spacing:.01em}
.so-ficha span{font-size:var(--t-pequeno); letter-spacing:.06em; color:var(--tinta-2)}
.so-prova{margin:0; padding-left:1rem; border-left:1px solid var(--fio)}
.so-prova p{font-family:var(--f-titulo); font-size:1.08rem; line-height:1.3; text-wrap:balance}
.so-prova footer{margin-top:.35rem; font-size:var(--t-pequeno); letter-spacing:.06em; color:var(--tinta-2)}

/* a coluna de texto */
.so-texto{display:flex; flex-direction:column}
.so-texto h2{max-width:11em}
.so-apoio{margin-top:var(--e4)}

/* as palavras dele: a mesma voz do apoio, por isso perto dele */
.so-fala{margin:var(--e4) 0 0; max-width:27em; padding-left:1.4rem; border-left:1px solid var(--mel)}
.so-fala p{font-family:var(--f-titulo); font-size:clamp(1.45rem, 1.05rem + 1.1vw, 1.95rem); line-height:1.22; text-wrap:balance}
.so-fala footer{margin-top:.7rem; font-size:var(--t-pequeno); letter-spacing:.06em; color:var(--tinta-2)}

/* a trajetória: três lâminas em tons e hastes crescentes, cada uma num pino sobre a mesma linha; a última se adianta */
.so-caminho{list-style:none; margin:var(--e6) 0 0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--e3); position:relative}
.so-caminho::before{content:""; position:absolute; left:0; right:0; top:6.8rem; height:1px; background:var(--fio)}
.so-passo{display:flex; flex-direction:column; gap:.3rem; position:relative}
.so-pino{position:relative; display:block; height:6.8rem; margin-bottom:1.2rem}
.so-haste{position:absolute; left:1.3rem; bottom:0; width:1.5px; height:var(--so-alt); background:linear-gradient(180deg, var(--aco), #b9c0c6, var(--aco))}
.so-haste::after{content:""; position:absolute; left:50%; bottom:-4px; width:8px; height:8px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #c9d0d5, var(--aco) 60%, #7f8891); transform:translateX(-50%); box-shadow:0 1px 2px rgb(37 47 60 / .3)}
.so-pino .so-dente{position:absolute; left:0; bottom:calc(var(--so-alt) - 2px); width:2.6rem; height:2.9rem; filter:drop-shadow(0 5px 5px rgb(37 47 60 / .24)); transition:transform .5s var(--curva), filter .5s var(--curva)}
.so-passo--adiante .so-dente{transform:translateY(-4px); filter:drop-shadow(0 10px 9px rgb(37 47 60 / .32))}
.so-passo:hover .so-dente{transform:translateY(-6px); filter:drop-shadow(0 12px 10px rgb(37 47 60 / .32))}
.so-passo__quando{font-size:var(--t-pequeno); letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-2)}
.so-passo__o{font-family:var(--f-titulo); font-weight:400; font-size:var(--t-h3); line-height:1.2; text-wrap:balance}
.so-passo__nota{font-size:.95rem; color:var(--tinta-2); line-height:1.5; max-width:16em}

/* pé da coluna: ele fora do consultório, e o passo seguinte */
.so-pe{margin-top:auto; padding-top:var(--e5); display:flex; justify-content:space-between; align-items:flex-end; gap:var(--e4)}
.so-pessoal{display:flex; flex-direction:column; gap:.3rem; max-width:26em}
.so-pessoal strong{font-family:var(--f-titulo); font-weight:400; font-size:1.2rem; letter-spacing:.01em}
.so-pessoal q{quotes:"“" "”"; font-style:italic; color:var(--tinta-2); font-size:.95rem}
.so-fecho{margin:0; white-space:nowrap}
.so-fecho .wf-link{font-size:1.05rem; gap:.6rem}
.so-fecho .wf-link svg{width:1rem; height:1rem; transition:transform .5s var(--curva)}
.so-fecho .wf-link:hover svg{transform:translateX(5px)}

@media (max-width:1100px){
  .so-grade{grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); gap:var(--e4)}
  .so-legenda{grid-template-columns:1fr}
}
@media (max-width:860px){
  .so-grade{grid-template-columns:1fr; gap:var(--e4)}
  .so-retrato{padding-top:2.75rem; align-items:stretch}
  .so-lamina{aspect-ratio:4/5; width:88%; max-width:22rem; margin-inline:auto}
  .so-lamina img{width:128%}
  .so-legenda{grid-template-columns:auto 1fr; gap:var(--e2) var(--e3); margin-top:var(--e4)}
  .so-apoio{margin-top:var(--e3)}
  .so-fala{margin-top:var(--e3)}
  /* no celular a trajetória vira uma escala em pé: fio vertical, hastes horizontais crescentes, dentes deitados */
  .so-caminho{margin-top:var(--e5); grid-template-columns:1fr; gap:var(--e3); padding-left:0}
  .so-caminho::before{top:.4rem; bottom:.4rem; left:0; right:auto; width:1px; height:auto}
  .so-passo{padding-left:6.4rem; min-height:3.2rem; justify-content:center}
  .so-pino{position:absolute; left:0; top:.1rem; width:6rem; height:3rem; margin:0}
  .so-haste{left:0; top:50%; bottom:auto; width:var(--so-alt); height:1.5px; background:linear-gradient(90deg, var(--aco), #b9c0c6, var(--aco))}
  .so-haste::after{left:-4px; top:50%; bottom:auto; transform:translateY(-50%)}
  .so-pino .so-dente{left:calc(var(--so-alt) + .1rem - 2px); bottom:auto; top:.05rem; width:2.6rem; height:2.9rem; transform:rotate(90deg); filter:drop-shadow(4px 4px 5px rgb(37 47 60 / .24))}
  .so-passo--adiante .so-dente{transform:rotate(90deg) translateY(-3px); filter:drop-shadow(6px 8px 9px rgb(37 47 60 / .32))}
  .so-passo:hover .so-dente{transform:rotate(90deg) translateY(-3px)}
  .so-passo__o{font-size:1.2rem}
  .so-passo__nota{font-size:.9rem; max-width:none}
  .so-pe{flex-direction:column; align-items:flex-start; gap:var(--e3); padding-top:var(--e4)}
}
@media (max-width:480px){
  .so-legenda{grid-template-columns:1fr}
  .so-prova{border-left:0; padding-left:0}
}