/* sobre (prefixo sb-) · a história, com a linha de trajetória em arco */
.sb{overflow:hidden;background:var(--noite)}

/* ───────── a noite: a luz fria da janela atrás dele ───────── */
.sb-malha{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.sb-malha i{position:absolute;display:block;border-radius:50%;filter:blur(28px);will-change:transform}
.sb-malha i:nth-child(1){
  left:-10vmax;top:-16vmax;width:60vmax;height:70vmax;
  background:radial-gradient(closest-side in oklch,rgb(159 211 230 / .26) 0%,rgb(86 158 178 / .12) 46%,rgb(6 38 44 / 0) 100%);
  animation:sb-respira-1 30s ease-in-out infinite alternate;
}
.sb-malha i:nth-child(2){
  right:-22vmax;top:-10vmax;width:72vmax;height:60vmax;
  background:radial-gradient(closest-side in oklch,rgb(13 70 81 / .9) 0%,rgb(11 58 67 / .5) 46%,rgb(6 38 44 / 0) 100%);
  animation:sb-respira-2 36s ease-in-out infinite alternate;
}
.sb-malha i:nth-child(3){
  left:30%;bottom:-30vmax;width:70vmax;height:52vmax;
  background:radial-gradient(closest-side in oklch,rgb(4 27 32 / .8) 0%,rgb(4 27 32 / .4) 55%,rgb(6 38 44 / 0) 100%);
  animation:sb-respira-3 26s ease-in-out infinite alternate;
}
@keyframes sb-respira-1{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(3vmax,2vmax,0) scale(1.1)}}
@keyframes sb-respira-2{from{transform:translate3d(0,0,0) scale(1.04)}to{transform:translate3d(-5vmax,3vmax,0) scale(.96)}}
@keyframes sb-respira-3{from{transform:translate3d(0,0,0)}to{transform:translate3d(-4vmax,-2vmax,0) scale(1.08)}}
.sb-malha.wf-pausa i{animation-play-state:paused}

/* ───────── a composição ───────── */
.sb-miolo{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  grid-template-rows:auto auto auto;
  grid-template-areas:
    "foto cabeca"
    "foto texto"
    "foto falas"
    "trajeto trajeto"
    "formacao formacao";
  column-gap:clamp(32px,5vw,80px);
  align-items:start;
}
.sb-miolo > *{min-width:0}

/* o retrato: ele em pé na janela, dissolvido na noite; os pés ficam onde a linha começa */
.sb-foto{grid-area:foto;margin:0;position:relative;justify-self:center;align-self:end;pointer-events:none;margin-bottom:calc(-1 * clamp(36px,6vh,64px) - 110px)}
.sb-foto img{
  --m1:radial-gradient(ellipse 54% 58% at 50% 36%,#000 40%,rgb(0 0 0 / .55) 66%,transparent 100%);
  --m2:linear-gradient(180deg,transparent 0%,#000 8%,#000 56%,rgb(0 0 0 / .5) 74%,transparent 88%);
  display:block;width:auto;height:clamp(620px,58vw,860px);max-width:none;
  -webkit-mask-image:var(--m1),var(--m2);mask-image:var(--m1),var(--m2);
  -webkit-mask-composite:source-in;mask-composite:intersect;
}
.js .sb-foto{transition:opacity 1.5s ease,transform 2.6s var(--ease)}
.js .sb-foto:not(.wf-visto){opacity:0;transform:scale(1.03)}
.js .sb-foto.wf-visto{opacity:1;transform:none}

.sb-cabeca{grid-area:cabeca}
.sb-t2{display:block}

/* os parágrafos, cada um com o ano na margem, em letra de escala */
.sb-texto{grid-area:texto;margin-top:clamp(22px,3.6vh,36px)}
.sb-par{display:grid;grid-template-columns:3.2em minmax(0,1fr);align-items:baseline}
.sb-par + .sb-par{margin-top:var(--passo)}
.sb-ano{
  font:500 1.125rem/1 var(--f-titulo);letter-spacing:.055em;color:var(--ciano);opacity:.85;
  font-variant-numeric:tabular-nums;padding-top:.2em;
}
.sb-par .wf-apoio{max-width:36em}

/* a fala da família grande, a outra pequena */
.sb-falas{grid-area:falas;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--passo) clamp(24px,3vw,48px);align-items:end;margin-top:clamp(28px,4.4vh,44px);padding-top:clamp(18px,2.6vh,26px);border-top:1px solid var(--fio)}
.sb-fala{margin:0}
.sb-destaque{font:500 clamp(1.5rem,2.2vw,2rem)/1.08 var(--f-titulo);letter-spacing:0;color:var(--pedra);text-wrap:pretty;max-width:18em}
.sb-fala--grande .wf-legenda{margin-top:8px}

/* ───────── a linha de trajetória ───────── */
.sb-trajeto{grid-area:trajeto;margin-top:clamp(28px,4.6vh,48px);position:relative;z-index:1}
.sb-linha{position:relative;width:100%;height:clamp(200px,24vh,240px)}
.sb-linha svg{position:absolute;left:0;top:0;display:block;overflow:visible}
.sb-linha-texto{font-size:.9375rem;color:var(--pedra-media)}

.sb-base{fill:none;stroke:var(--pedra);stroke-opacity:.30;stroke-width:1}
.sb-tick{stroke:var(--pedra);stroke-opacity:.34;stroke-width:1}
.sb-tick.est{stroke-opacity:.8}
.sb-num{fill:var(--pedra);fill-opacity:.78;font-family:var(--f-texto);font-weight:500;font-variant-numeric:tabular-nums}
.sb-s1,.sb-s2{fill:none;stroke-width:2.5;stroke-dasharray:1;stroke-dashoffset:0}
.sb-s1{stroke:var(--pedra)}
.sb-s2{stroke:var(--ciano)}
.sb-brilho{filter:url(#sb-brilho);stroke-width:5;opacity:.5}
.sb-limite{stroke:var(--ambar);stroke-width:1.5;stroke-linecap:round}
.sb-losango{fill:var(--ambar)}
.sb-halo{fill:var(--ambar);opacity:.34}
.sb-rot{fill:var(--pedra);font-family:var(--f-titulo);font-weight:500;letter-spacing:.055em;text-rendering:geometricPrecision}
.sb-rot .h{fill:var(--pedra);fill-opacity:.62}
.sb-rot.origem{fill-opacity:.86}
.sb-rot.trecho{fill:var(--pedra);fill-opacity:.82}
.sb-hoje{fill:var(--ambar);font-family:var(--f-titulo);font-weight:600;letter-spacing:.06em}
.sb-sub{fill:var(--pedra);fill-opacity:.62;font-family:var(--f-texto);font-weight:400;font-variant-numeric:tabular-nums}
.sb-sub .n{fill-opacity:1;font-weight:500}

/* entrada: a escala surge, os anos de cirurgia plástica acendem, o Espírito Santo acende, a marca pousa. Uma vez. */
.sb-linha.anim .sb-g-base{opacity:0}
.sb-linha.anim .sb-s1,.sb-linha.anim .sb-s2{stroke-dashoffset:1}
.sb-linha.anim .sb-g-limite,.sb-linha.anim .sb-hoje,.sb-linha.anim .sb-rot.trecho{opacity:0}
.sb-linha.anim.on .sb-g-base{animation:sb-surgir .9s ease both}
.sb-linha.anim.on .sb-s1{animation:sb-tracar 1.1s var(--ease-traco) .5s both}
.sb-linha.anim.on .sb-rot.trecho{animation:sb-surgir .6s ease 1.3s both}
.sb-linha.anim.on .sb-s2{animation:sb-tracar .6s var(--ease-traco) 1.55s both}
.sb-linha.anim.on .sb-g-limite{animation:sb-pousar .5s var(--ease) 2.1s both}
.sb-linha.anim.on .sb-hoje{animation:sb-surgir-fim .6s ease 2.3s both}
@keyframes sb-surgir{from{opacity:0}to{opacity:1}}
@keyframes sb-surgir-fim{from{opacity:0}to{opacity:1}}
@keyframes sb-tracar{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes sb-pousar{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}

/* ───────── formação e registro: uma linha de registro, com fios ───────── */
.sb-formacao{
  grid-area:formacao;margin:clamp(36px,6vh,60px) 0 0;padding-top:clamp(18px,2.6vh,26px);border-top:1px solid var(--fio);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 0;
}
.sb-f{display:flex;flex-direction:column;gap:6px;padding-right:clamp(16px,2vw,32px)}
.sb-f + .sb-f{padding-left:clamp(16px,2vw,32px);border-left:1px solid var(--fio-fraco)}
.sb-f dt{font-size:.9375rem;line-height:1.4;color:var(--pedra);text-wrap:pretty}
.sb-f-num{display:block;margin-bottom:6px;font:500 clamp(1.5rem,1.8vw,1.75rem)/1 var(--f-titulo);letter-spacing:.055em;color:var(--pedra);font-variant-numeric:tabular-nums}
.sb-f-num i{font-style:normal;font-weight:400;color:var(--pedra-baixa);letter-spacing:0;padding:0 .08em}
.sb-f dd{margin:0;font-size:.875rem;line-height:1.5;color:var(--pedra-media);font-variant-numeric:tabular-nums;text-wrap:pretty}

/* ───────── telas largas e baixas ───────── */
@media (min-width:821px) and (max-height:700px){
  .sb-foto img{height:clamp(540px,52vw,700px)}
  .sb-linha{height:190px}
}
@media (min-width:821px) and (max-width:1100px){
  .sb-miolo{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
  .sb-foto img{height:clamp(540px,56vw,720px)}
  .sb-foto{margin-bottom:calc(-1 * clamp(28px,4.6vh,48px) - 70px)}
  .sb-falas{grid-template-columns:1fr}
  .sb-formacao{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sb-f:nth-child(3){padding-left:0;border-left:0}
}

/* ───────── celular: coluna única; a linha vira vertical ───────── */
@media (max-width:820px){
  .sb-miolo{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"cabeca" "foto" "texto" "falas" "trajeto" "formacao";
    column-gap:0;
  }
  .sb-foto{margin:clamp(14px,2.6vh,24px) 0 0;justify-self:center;align-self:start}
  .sb-foto img{
    height:auto;width:min(78vw,360px);
    --m1:radial-gradient(ellipse 64% 60% at 50% 36%,#000 44%,rgb(0 0 0 / .6) 68%,transparent 100%);
    --m2:linear-gradient(180deg,transparent 0%,#000 8%,#000 52%,rgb(0 0 0 / .5) 70%,transparent 84%);
  }
  .sb-texto{margin-top:-10vw}
  .sb-par{grid-template-columns:3em minmax(0,1fr)}
  .sb-falas{grid-template-columns:1fr}
  .sb-destaque{font-size:clamp(1.375rem,6vw,1.75rem)}
  .sb-trajeto{margin-top:clamp(28px,5vh,40px)}
  .sb-linha{height:460px}
  .sb-formacao{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 18px}
  .sb-f{padding-right:0}
  .sb-f + .sb-f{padding-left:0;border-left:0}
  .sb-f-num{font-size:1.375rem}
  .sb-malha i{filter:blur(18px)}
  .sb-malha i:nth-child(1){left:-30vw;top:4%;width:140vw;height:110vw}
}
.sb-ponto{fill:var(--noite);stroke:var(--pedra);stroke-opacity:.8;stroke-width:1}