/* "Como funciona": a rolagem passa pelas 4 etapas. À esquerda o texto da etapa em destaque; à direita uma cena do dia a dia
   daquela etapa (a mensagem, a agenda, a sessão por vídeo, a anotação). A linha do tempo leva direto a cada etapa (processo.js). */
.pf{--pf-bg:#1f0b33;--paper:#f7efdc;--paper-ink:#2a1f33;position:relative;background:var(--pf-bg);color:var(--cream);transition:background-color .6s linear}
.pf-track{position:relative;height:calc(100svh + 340svh)}
.pf-stage{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;
  gap:clamp(24px,6vw,96px);max-width:1280px;margin:0 auto;padding:clamp(80px,12vh,120px) clamp(20px,6vw,96px) clamp(96px,15vh,140px)}

/* introdução (some quando a primeira etapa entra) */
.pf-intro{position:absolute;z-index:3;left:50%;top:50%;width:min(760px,88vw);transform:translate(-50%,-50%);text-align:center;transition:opacity .8s ease,filter .8s ease,transform .8s cubic-bezier(.16,1,.3,1)}
.pf-intro .eyebrow{margin-left:auto;margin-right:auto;color:var(--cream-muted)}
.pf-intro h2{margin:14px 0 0;font-family:var(--font-headline);font-weight:900;font-size:clamp(2.4rem,5.4vw,4.6rem);line-height:1.02;letter-spacing:-.025em}
.pf-lede{margin:20px auto 0;max-width:46ch;font-size:clamp(16px,1.3vw,19px);line-height:1.6;color:rgba(250,243,224,.86)}
.pf-lede strong{color:var(--cream)}
.pf.is-going .pf-intro{opacity:0;filter:blur(8px);transform:translate(-50%,-58%) scale(.97);pointer-events:none}

/* etapas: só a da vez fica nítida */
.pf-steps{position:relative;margin:0;padding:0;list-style:none;height:min(56vh,460px);order:-1}
.pf-step{position:absolute;left:0;right:0;top:50%;max-width:30rem;opacity:0;filter:blur(8px);transform:translateY(calc(-50% + 34px));
  transition:opacity .7s ease,filter .9s ease,transform .9s cubic-bezier(.16,1,.3,1);pointer-events:none}
.pf-step.is-past{transform:translateY(calc(-50% - 34px))}
.pf-step.on{opacity:1;filter:blur(0);transform:translateY(-50%);pointer-events:auto}
.pf-tag{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;padding:7px 14px 7px 8px;border-radius:999px;background:rgba(245,158,11,.13);border:1px solid rgba(245,158,11,.28);
  font:600 13px var(--font-body);letter-spacing:.02em;color:#fbbf5a}
.pf-tag b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#f59e0b;color:#1f0b33;font-size:12px}
.pf-step h3{margin:0 0 18px;font-family:var(--font-headline);font-weight:900;font-size:clamp(2.6rem,5vw,4.6rem);line-height:1;letter-spacing:-.03em;color:var(--cream)}
.pf-step p:last-child{margin:0;font-size:clamp(16.5px,1.35vw,20px);line-height:1.62;color:rgba(250,243,224,.86)}
.pf-step strong{color:var(--cream);font-weight:600;background:linear-gradient(transparent 62%,rgba(245,158,11,.38) 62%,rgba(245,158,11,.38) 92%,transparent 92%)}

/* cenas: um cartão por etapa, empilhados; só o da vez aparece */
.pf-vis{position:relative;height:min(56vh,460px);display:grid;place-items:center;opacity:0;transition:opacity .9s ease}
.pf.is-going .pf-vis{opacity:1}
.pf-card{position:absolute;width:min(400px,100%);border-radius:24px;background:var(--paper);color:var(--paper-ink);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.06);
  opacity:0;transform:translateY(40px) rotate(2deg) scale(.96);transition:opacity .7s ease,transform 1s cubic-bezier(.16,1,.3,1);will-change:transform}
.pf-card.is-past{transform:translateY(-40px) rotate(-2deg) scale(.96)}
.pf-card.on{opacity:1;transform:none}

/* 1. a mensagem no WhatsApp */
.pfc-top{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid rgba(42,31,51,.1)}
.pfc-ava,.pfv-ava{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#521180;color:var(--paper);font:700 14px var(--font-body)}
.pfc-who{display:flex;flex-direction:column;line-height:1.2}
.pfc-who b{font-size:15px}
.pfc-who small{font-size:12.5px;color:#1f8a4c}
.pfc-body{display:flex;flex-direction:column;gap:12px;padding:20px 18px 24px;min-height:190px;background:radial-gradient(rgba(42,31,51,.05) 1px,transparent 1.5px) 0 0/14px 14px;border-radius:0 0 24px 24px}
.pfc-msg{align-self:flex-end;max-width:86%;margin:0;padding:12px 14px 8px;border-radius:16px 16px 4px 16px;background:#d9f7c8;font-size:14.5px;line-height:1.45;
  opacity:0;transform:translateY(14px) scale(.96);transform-origin:right bottom;transition:opacity .5s ease .45s,transform .7s cubic-bezier(.16,1,.3,1) .45s}
.pfc-msg i{display:block;margin-top:4px;text-align:right;font-style:normal;font-size:11px;color:rgba(42,31,51,.5)}
.pfc-typing{align-self:flex-start;display:flex;gap:5px;margin:0;padding:13px 15px;border-radius:16px 16px 16px 4px;background:#fff;opacity:0;transition:opacity .5s ease 1.4s}
.pfc-typing span{width:7px;height:7px;border-radius:50%;background:rgba(42,31,51,.4);animation:pfDot 1.4s ease-in-out infinite}
.pfc-typing span:nth-child(2){animation-delay:.2s}
.pfc-typing span:nth-child(3){animation-delay:.4s}
.pf-chat.on .pfc-msg{opacity:1;transform:none}
.pf-chat.on .pfc-typing{opacity:1}
@keyframes pfDot{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-4px);opacity:1}}

/* 2. a agenda: o mesmo dia, toda semana */
.pf-cal{padding:22px 22px 24px}
.pfk-head{display:flex;flex-direction:column;margin:0 0 18px;line-height:1.25}
.pfk-head b{font-size:18px}
.pfk-head small{font-size:13px;color:rgba(42,31,51,.6)}
.pfk-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}
.pfk-d{text-align:center;font:600 11.5px var(--font-body);color:rgba(42,31,51,.5);padding-bottom:4px}
.pfk-c{aspect-ratio:1;display:grid;place-items:center;border-radius:10px;font-size:13px;color:rgba(42,31,51,.55);background:rgba(42,31,51,.04);transition:background .5s ease,color .5s ease,transform .6s cubic-bezier(.16,1,.3,1)}
.pf-cal.on .pfk-c.is-s{background:#521180;color:var(--paper);transform:scale(1.06)}

/* 3. a sessão por vídeo */
.pf-call{padding:12px;background:#221a2a;color:var(--cream)}
.pfv-main{position:relative;display:grid;place-items:center;aspect-ratio:4/3;border-radius:16px;background:radial-gradient(circle at 50% 40%,#4a2a66,#1c1324 72%);overflow:hidden}
.pfv-main .pfv-ava{position:relative;width:92px;height:92px;font-size:28px;background:#6b2aa0}
.pfv-ring{position:absolute;left:50%;top:50%;width:92px;height:92px;margin:-46px 0 0 -46px;border-radius:50%;border:2px solid rgba(245,158,11,.55);opacity:0}
.pf-call.on .pfv-ring{animation:pfRing 3.2s ease-out infinite}
@keyframes pfRing{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.7);opacity:0}}
.pfv-name{position:absolute;left:12px;bottom:10px;padding:3px 9px;border-radius:8px;background:rgba(0,0,0,.4);font-size:12.5px}
.pfv-self{position:absolute;right:24px;top:24px;display:grid;place-items:center;width:28%;aspect-ratio:3/4;border-radius:12px;background:linear-gradient(160deg,#3a3040,#16111b);box-shadow:0 10px 24px rgba(0,0,0,.4);
  transform:translateY(-8px);opacity:0;transition:opacity .6s ease .5s,transform .8s cubic-bezier(.16,1,.3,1) .5s}
.pf-call.on .pfv-self{opacity:1;transform:none}
.pfv-ava--s{width:34px;height:34px;background:rgba(250,243,224,.18)}
.pfv-self .pfv-name{left:6px;bottom:6px;font-size:11px}
.pfv-bar{display:flex;align-items:center;gap:8px;padding:12px 6px 2px}
.pfv-live{width:8px;height:8px;border-radius:50%;background:#34d399}
.pfv-time{font-size:13px;color:rgba(250,243,224,.75)}
.pfv-btns{display:flex;gap:8px;margin-left:auto}
.pfv-btns i{width:34px;height:34px;border-radius:50%;background:rgba(250,243,224,.12)}
.pfv-btns i.end{width:48px;border-radius:999px;background:#c2410c}

/* 4. a anotação à mão */
.pf-note{padding:34px 34px 30px;transform-origin:50% 0;background:var(--paper) repeating-linear-gradient(transparent 0 33px,rgba(82,17,128,.12) 33px 34px)}
.pf-note.on{transform:rotate(-2deg)}
.pfn-hand{margin:0;font-family:'Caveat',cursive;font-weight:700;font-size:clamp(2.6rem,4.4vw,3.6rem);line-height:1;color:#521180}
.pfn-line{display:block;width:72%;margin-top:10px;stroke:#f59e0b;stroke-width:3;stroke-linecap:round}
.pfn-line path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s cubic-bezier(.65,0,.35,1) .6s}
.pf-note.on .pfn-line path{stroke-dashoffset:0}

/* convite final */
.pf-end{position:absolute;z-index:3;left:50%;top:50%;width:min(760px,90vw);transform:translate(-50%,-40%);text-align:center;opacity:0;pointer-events:none;transition:opacity .8s ease,transform .9s cubic-bezier(.16,1,.3,1)}
.pf-end h3{margin:0 0 26px;font-family:var(--font-headline);font-weight:900;font-size:clamp(2.4rem,5.4vw,4.6rem);line-height:1.02;letter-spacing:-.025em}
.pf.is-end .pf-end{opacity:1;transform:translate(-50%,-50%);pointer-events:auto}
.pf.is-end .pf-steps,.pf.is-end .pf-vis{opacity:0;transition:opacity .6s ease;pointer-events:none}

/* linha do tempo clicável */
.pf-nav{position:absolute;z-index:4;left:50%;bottom:clamp(22px,5vh,46px);transform:translateX(-50%);display:flex;gap:clamp(10px,3vw,40px);opacity:0;transition:opacity .8s ease}
.pf.is-going .pf-nav{opacity:1}
.pf-nav-line{position:absolute;left:0;right:0;top:-12px;height:1px;background:rgba(250,243,224,.18)}
.pf-nav-line i{display:block;height:100%;width:0;background:var(--figure-bright);transition:width .4s linear}
.pf-nav button{padding:4px 2px;border:0;background:none;cursor:pointer;font:500 13px var(--font-body);letter-spacing:.04em;color:rgba(250,243,224,.5);transition:color .4s}
.pf-nav button:hover,.pf-nav button[aria-current="step"]{color:var(--cream)}
.pf-nav button:focus-visible{outline:2px solid var(--figure-bright);outline-offset:4px}

/* tablet e celular: cena em cima (menor), texto embaixo, tudo centralizado */
@media (max-width:900px){
  .pf-stage{grid-template-columns:1fr;grid-template-rows:auto auto;align-content:center;gap:clamp(16px,3vh,32px);padding:76px 20px 92px}
  .pf-vis{order:-1;height:clamp(200px,36svh,340px)}
  .pf-card{width:min(340px,86%);transform-origin:50% 50%}
  .pf-card.on{transform:scale(var(--pf-s,1))}
  .pf-note.on{transform:scale(var(--pf-s,1)) rotate(-2deg)}
  .pf-steps{order:1;height:clamp(240px,38svh,340px)}
  .pf-step{max-width:34rem;margin:0 auto;text-align:center}
  .pf-tag{margin-bottom:12px}
  .pf-step h3{font-size:clamp(2.1rem,8.6vw,3.2rem);margin-bottom:12px}
  .pf-step p:last-child{font-size:16px}
}
@media (max-width:640px){
  .pf-nav{gap:10px;left:18px;transform:none;width:calc(100% - 100px);justify-content:space-between}   /* espaço para o botão do WhatsApp */
  .pf-nav button{font-size:11.5px}
  .pfc-body{min-height:150px;padding:14px 14px 18px}
  .pfc-msg{font-size:13px}
}

/* sem movimento: tudo em lista, sem rolagem presa */
.pf.is-static .pf-track{height:auto}
.pf.is-static .pf-stage{position:relative;height:auto;display:block;padding:clamp(80px,10vw,120px) clamp(20px,6vw,96px)}
.pf.is-static .pf-intro,.pf.is-static .pf-end{position:static;transform:none;opacity:1;margin:0 auto 40px}
.pf.is-static .pf-vis,.pf.is-static .pf-nav{display:none}
.pf.is-static .pf-steps{height:auto;display:grid;gap:32px;max-width:720px;margin:0 auto 48px}
.pf.is-static .pf-step{position:static;opacity:1;filter:none;transform:none}
/* título acendendo letra a letra (revelar.js); "processo" e "tem forma" em laranja */
#pfTitle.rv .rv-w{display:inline-block;white-space:nowrap}
#pfTitle.rv .rv-c{color:rgba(250,243,224,.16);transition:color .3s ease}
#pfTitle.rv .rv-c.on{color:var(--cream,#faf3e0)}
#pfTitle.rv .rv-lar .rv-c.on{color:#f59e0b}

/* correções de encaixe (telas baixas): a cena sempre cabe no espaço dela, inclusive no computador */
.pf-card.on{transform:scale(var(--pf-s,1))}
.pf-note.on{transform:scale(var(--pf-s,1)) rotate(-2deg)}
@media (min-width:901px) and (max-height:760px){
  .pf-stage{padding-top:76px;padding-bottom:84px}
  .pf-steps,.pf-vis{height:calc(100svh - 190px)}
  .pf-step h3{font-size:clamp(2.2rem,7.4vh,4.2rem)}
  .pf-step p:last-child{font-size:clamp(15px,2.3vh,19px)}
}
/* celular deitado ou tablet baixo: volta a ficar lado a lado, que é o que cabe */
@media (max-width:900px) and (orientation:landscape){
  .pf-stage{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto;align-items:center;gap:24px;padding:62px 28px 58px}
  .pf-vis{order:0;height:calc(100svh - 140px)}
  .pf-steps{order:-1;height:calc(100svh - 140px)}
  .pf-step{text-align:left;margin:0}
  .pf-step h3{font-size:clamp(1.7rem,8vh,2.6rem);margin-bottom:10px}
  .pf-step p:last-child{font-size:clamp(13.5px,3.4vh,16px);line-height:1.5}
  .pf-tag{margin-bottom:10px}
  .pf-nav{bottom:12px}
}
/* celular em pé com tela curta (ex.: iPhone SE): um pouco mais de espaço para o texto */
@media (max-width:900px) and (orientation:portrait) and (max-height:700px){
  .pf-stage{padding:68px 18px 80px;gap:10px}
  .pf-vis{height:30svh}
  .pf-steps{height:clamp(220px,40svh,300px)}
  .pf-step h3{font-size:clamp(1.9rem,8vw,2.6rem)}
}