/* WebForge · Dr. Eduardo · seção pp — Como cuido (#cuidado, noite)
   O braço sobe passo a passo: palco fixo com a gravura clara; cada etapa que cruza a linha de leitura
   eleva o úmero (0° → 40° → 90° → 150°), no mesmo ritmo 2:1 do topo. */

.pp-sec{overflow:clip}
.pp-malha{position:absolute;inset:0;z-index:-1;pointer-events:none}
.pp-malha i{position:absolute;display:block;border-radius:50%}
.pp-malha i:nth-child(1){width:90vmax;height:90vmax;left:-35vmax;top:10%;background:radial-gradient(circle closest-side in oklch, #17345A, transparent)}
.pp-malha i:nth-child(2){width:70vmax;height:70vmax;right:-30vmax;top:45%;background:radial-gradient(circle closest-side in oklch, var(--petroleo), transparent);opacity:.8}
.pp-malha i:nth-child(3){width:60vmax;height:60vmax;left:10%;bottom:-30vmax;background:radial-gradient(circle closest-side in oklch, var(--salvia-apagada), transparent);opacity:.45}

.pp-cabeca{max-width:760px}

/* ---------- corpo: palco + etapas ---------- */
.pp-corpo{margin-top:clamp(24px,4vw,56px);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,4vw,72px)}
.pp-palco{position:relative}
.pp-palco-in{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;justify-content:flex-end}
.pp-luz{position:absolute;left:50%;top:50%;width:min(80vh,100%);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle closest-side in oklch, rgba(60,120,140,.34), rgba(30,80,100,.1) 62%, transparent)}
/* o palco sangra para a margem esquerda: o braço sai do quadro, como no topo */
.pp-svg{position:relative;flex:none;height:min(92svh, 880px);width:auto;aspect-ratio:1020/1200;overflow:visible}
.pp-svg .pp-osso{fill:currentColor}
.pp-svg .pp-esc{color:var(--osso);opacity:.26}
.pp-svg .pp-hum{color:var(--osso)}
.pp-svg .pp-aro{fill:none;stroke:rgba(244,245,250,.5);stroke-width:1.3;vector-effect:non-scaling-stroke;stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset .35s linear}
.pp-svg .pp-aro-base{fill:none;stroke:rgba(244,245,250,.1);stroke-width:1;vector-effect:non-scaling-stroke}
.pp-svg .pp-aro-fim{fill:var(--salvia);opacity:0;transition:opacity .6s}
.pp-svg .pp-aro-fim.pp-on{opacity:1}
.pp-svg .pp-aro2{fill:none;stroke:rgba(181,195,184,.16);stroke-width:1;stroke-dasharray:2 7;vector-effect:non-scaling-stroke}
.pp-svg .pp-eixo{fill:none;stroke:rgba(181,195,184,.42);stroke-width:1;stroke-dasharray:3 5;vector-effect:non-scaling-stroke}
.pp-svg .pp-ang{fill:none;stroke:var(--salvia);stroke-width:1.4;vector-effect:non-scaling-stroke}
.pp-svg .pp-curso{fill:none;stroke:rgba(181,195,184,.3);stroke-width:1;stroke-dasharray:2 6;vector-effect:non-scaling-stroke}
.pp-svg .pp-feito{fill:none;stroke:var(--salvia);stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-linecap:round}
.pp-svg .pp-marca circle{fill:var(--noite);stroke:rgba(181,195,184,.6);stroke-width:1.2;vector-effect:non-scaling-stroke;transition:fill .5s, stroke .5s}
.pp-svg .pp-marca text:not(.pp-marca-t){font-family:var(--f-mono);font-size:24px;fill:var(--tinta-fina);text-anchor:middle;transition:fill .5s}
.pp-svg .pp-marca.pp-on circle{fill:var(--salvia);stroke:var(--salvia)}
.pp-svg .pp-marca.pp-on text:not(.pp-marca-t){fill:var(--noite);font-weight:600}
.pp-svg .pp-marca-t{paint-order:stroke;stroke:var(--noite);stroke-width:9px;stroke-linejoin:round;font-family:var(--f-mono);font-size:23px;letter-spacing:.05em;fill:var(--tinta-fina);transition:fill .5s, opacity .5s;opacity:.7}
.pp-svg .pp-marca-f{stroke:rgba(181,195,184,.35);stroke-width:1;vector-effect:non-scaling-stroke;fill:none}
.pp-svg .pp-marca.pp-on .pp-marca-t{fill:var(--salvia);opacity:1}
.pp-svg .pp-pivo{fill:none;stroke:rgba(181,195,184,.75);stroke-width:1;vector-effect:non-scaling-stroke}

.pp-leitor{position:absolute;right:0;bottom:clamp(40px,11vh,110px);text-align:right;font-family:var(--f-mono);z-index:2}
.pp-leitor p{margin:0}
.pp-leitor-etapa{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--salvia)}
.pp-leitor-de{color:var(--tinta-fina)}
.pp-leitor-grau{font-family:var(--f-titulo);font-weight:800;font-variation-settings:"wdth" 75;font-size:clamp(3.2rem,2rem + 3vw,5.2rem);line-height:.9;color:var(--gelo);font-variant-numeric:tabular-nums;margin-top:4px!important}
.pp-leitor-grau span{color:var(--salvia)}
.pp-leitor-txt{font-size:.74rem;letter-spacing:.06em;color:var(--tinta-fina);margin-top:6px!important}

/* etapas, com o trilho de progresso à esquerda */
.pp-etapas{list-style:none;margin:0;padding:0 0 0 44px;position:relative;--pp-prog:0}
.pp-etapas::before,.pp-etapas::after{content:"";position:absolute;left:4px;top:var(--pp-t0,0px);bottom:var(--pp-t1,0px);width:1px;background:rgba(181,195,184,.22)}
.pp-etapas::after{background:var(--salvia);bottom:auto;height:calc((100% - var(--pp-t0,0px) - var(--pp-t1,0px)) * var(--pp-prog));transition:height .25s linear}
.pp-etapa{position:relative}
.pp-etapa::before{content:"";position:absolute;left:-44px;top:var(--pp-ponto,50%);width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:var(--noite);border:1.5px solid rgba(181,195,184,.6);z-index:1;transition:background .5s, border-color .5s}
.pp-etapa.pp-passou::before,.pp-etapa.pp-ativa::before{background:var(--salvia);border-color:var(--salvia)}
.pp-etapa{min-height:86vh;display:flex;flex-direction:column;justify-content:center;padding:40px 0;opacity:.32;transition:opacity .7s var(--curva)}
.pp-etapa.pp-ativa{opacity:1}
.pp-mini-linha{display:none}
.pp-etapa-n{margin:0 0 14px;font-family:var(--f-mono);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--salvia)}
.pp-etapa-t{margin:0;font-weight:800;font-variation-settings:"wdth" 75;font-size:clamp(2rem,1.3rem + 1.9vw,3.1rem);line-height:.98;text-wrap:balance}
.pp-etapa-p{margin:16px 0 0;font-size:1.06rem;line-height:1.62;color:var(--tinta-suave);max-width:30em;text-wrap:pretty}
.pp-fala{margin:24px 0 0;padding-left:18px;border-left:1px solid rgba(181,195,184,.4);max-width:30em}
.pp-fala-2{margin-top:14px}
.pp-fala:not(.pp-fala-2) blockquote{font-size:clamp(1.14rem,1rem + .45vw,1.36rem);line-height:1.42}
.pp-fala blockquote{margin:0;font-style:italic;font-variation-settings:"wdth" 92;font-size:1.04rem;line-height:1.5;color:var(--tinta);text-wrap:pretty}
.pp-fala figcaption{margin-top:6px;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.04em;color:var(--tinta-fina)}

.pp-fim{margin-top:clamp(40px,6vw,80px);display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:16px 28px}
.pp-fim p{margin:0;font-size:1.1rem;color:var(--tinta-suave)}

/* notebook estreito: palco menor */
@media (max-width:1080px) and (min-width:861px){
  .pp-svg{height:min(70svh, 600px)}
  .pp-palco-in{justify-content:center}
  .pp-corpo{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .pp-leitor{bottom:clamp(24px,6vh,60px)}
  .pp-leitor-grau{font-size:3rem}
}

/* sem JS: sem palco, as etapas todas acesas */
html:not(.js) .pp-palco{display:none}
html:not(.js) .pp-corpo{grid-template-columns:1fr}
html:not(.js) .pp-etapa{opacity:1;min-height:0}

/* ---------- celular e tablet: sem palco fixo; cada etapa traz o seu mostrador ---------- */
@media (max-width:860px){
  .pp-corpo{grid-template-columns:minmax(0,1fr)}
  .pp-palco{display:none}
  .pp-etapa{min-height:0;opacity:1;padding:36px 0}
  .pp-mini-linha{display:flex;align-items:center;gap:18px;margin-bottom:14px}
  .pp-mini{display:block;width:112px;height:112px;overflow:visible;flex:none}
  .pp-mini-grau{margin:0;font-weight:800;font-variation-settings:"wdth" 75;font-size:3.4rem;line-height:1;color:var(--gelo);font-variant-numeric:tabular-nums}
  .pp-mini-grau span{color:var(--salvia)}
  .pp-mini-curso{fill:none;stroke:rgba(181,195,184,.35);stroke-width:1;stroke-dasharray:2 3}
  .pp-mini-cot{fill:var(--salvia)!important;stroke:none!important}
  .pp-etapas{padding-left:30px}
  .pp-etapa::before{left:-30px}
  .pp-mini-aro{fill:none;stroke:rgba(244,245,250,.22);stroke-width:1}
  .pp-mini-eixo{stroke:rgba(181,195,184,.45);stroke-width:1;stroke-dasharray:2 4}
  .pp-mini-arco{fill:none;stroke:var(--salvia);stroke-width:1.4}
  .pp-mini-braco path{fill:none;stroke:var(--osso);stroke-width:1.6;stroke-linejoin:round}
  .pp-mini-braco circle{fill:var(--noite);stroke:var(--osso);stroke-width:1.6}
  .pp-mini-braco .pp-mini-veio{stroke:rgba(238,242,245,.45);stroke-width:1;stroke-dasharray:6 3 2 3}
  .pp-mini-braco{transform-origin:60px 60px;transform:rotate(var(--pp-a,0deg));transition:transform 1.4s var(--curva-articula) .2s}
  .js .pp-etapa:not(.pp-vista) .pp-mini-braco{transform:rotate(0deg)}
  .pp-fim{justify-content:flex-start}
}