/* Jornada: janela de computador com o ChatGPT ou o Claude, quatro telas trocadas pela rolagem.
 * Telas reencenadas em HTML, com dados fictícios. Cada app tem o próprio tema (app-gpt / app-cld). */
.j-app{display:grid;gap:18px;min-width:0}
.j-abas{display:flex;gap:6px;justify-self:start;padding:4px;border:1px solid var(--line);border-radius:999px}
.j-abas button{min-height:44px;padding:0 20px;border:0;border-radius:999px;background:none;color:var(--fog);font:600 .95rem/1 var(--f-head);cursor:pointer;transition:background .25s,color .25s}
.j-abas button[aria-selected="true"]{background:var(--paper);color:var(--ink)}
.j-abas button:focus-visible{outline:2px solid var(--electric);outline-offset:2px}

.japp{--fundo:#fff;--texto:#0d0d0d;--suave:#5d5d5d;--borda:#e5e5e5;--balao:#f4f4f4;--acao:#0d0d0d;--acao-t:#fff;--serif:var(--f-body);
  position:relative;aspect-ratio:16/10.4;border-radius:14px;overflow:hidden;background:var(--fundo);color:var(--texto);
  font:400 clamp(10px,.95vw,14.5px)/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text",var(--f-body);
  box-shadow:0 0 0 1px rgba(255,255,255,.12),0 50px 100px -30px rgba(0,0,0,.75),0 20px 40px -20px rgba(0,0,0,.6);
  transform:perspective(1800px) rotateY(-7deg) rotateX(3deg);transform-origin:30% 50%;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.japp.app-cld{--fundo:#FAF9F5;--texto:#1f1e1d;--suave:#73726c;--borda:#e8e6dc;--balao:#F0EEE6;--acao:#C96442;--acao-t:#fff;--serif:"Iowan Old Style","Palatino Linotype",Georgia,serif}
.app-gpt .so-cld,.app-cld .so-gpt{display:none}
.japp em{font-style:normal}

.japp-barra{height:2.6em;display:flex;align-items:center;padding:0 1em;border-bottom:1px solid var(--borda);position:relative}
.japp-barra .mac-luzes{padding:0}
.japp-barra>span{position:absolute;left:50%;transform:translateX(-50%);font-weight:600;font-size:.92em;color:var(--suave)}
.japp-corpo{position:absolute;inset:2.6em 0 0;display:flex;flex-direction:column}

/* Telas: só a do passo atual aparece */
.jt{position:absolute;inset:0 0 5.2em;padding:2.2em 12% 0;opacity:0;visibility:hidden;transform:translateY(1.2em);transition:opacity .5s,transform .6s cubic-bezier(.2,.7,.2,1),visibility 0s .5s}
.japp[data-passo="0"] .jt-1,.japp[data-passo="1"] .jt-2,.japp[data-passo="2"] .jt-3,.japp[data-passo="3"] .jt-4{opacity:1;visibility:visible;transform:none;transition:opacity .5s,transform .6s cubic-bezier(.2,.7,.2,1)}

/* 1. Início do app + aviso de e-mail do macOS */
.jt-1{display:grid;place-items:center}
.japp-ola{margin:0;font:400 2.1em/1.2 var(--serif);letter-spacing:-.01em}
.app-gpt .japp-ola{font-family:inherit;font-weight:500;font-size:1.9em}
.mac-notif{position:absolute;top:.9em;right:1em;width:22em;display:flex;gap:.8em;padding:.8em .9em;border-radius:1.1em;
  background:rgba(246,246,246,.86);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color:#1d1d1f;
  box-shadow:0 0 0 .5px rgba(0,0,0,.12),0 10px 30px -8px rgba(0,0,0,.3)}
.mac-notif p{margin:0;font-size:.92em}
.mac-notif p:first-child{display:flex;justify-content:space-between}
.mac-notif time{color:#86868b;font-size:.9em}
.mac-notif-ass{font-weight:600}
.mac-notif-ico{flex:none;width:2.4em;height:2.4em;border-radius:.6em;background:linear-gradient(#3fa2ff,#1667e4);position:relative}
.mac-notif-ico::after{content:"";position:absolute;inset:.7em .5em;border:2px solid #fff;border-radius:.2em;border-top-color:transparent}
.motion .mac-notif{transform:translateX(130%);transition:transform .7s cubic-bezier(.2,.8,.2,1) .25s}
.motion .japp[data-passo="0"] .mac-notif{transform:none}

/* 2. Conector + login com o Google */
.jt-2{inset:0;z-index:2;padding:0;display:grid;place-items:center;background:var(--fundo)}
.jfundo{position:absolute;inset:0;padding:1.8em 9%}
.jfundo-tit{margin:0;display:flex;justify-content:space-between;align-items:center;font-size:1.5em;font-weight:600}
.jfundo-tit b{padding:.35em .9em;border-radius:999px;font-size:.55em;background:#0d0d0d;color:#fff}
.app-cld .jfundo-tit b{border-radius:.5em}
.jfundo-sub{margin:.3em 0 1.4em;color:var(--suave);font-size:.95em}
.jfundo i{display:block;height:2.6em;margin-bottom:.8em;border-radius:.6em;background:var(--balao)}
.jt-2::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.32)}
.jt-2 .jmodal,.jt-2 .jgoogle{position:relative;z-index:1}
.jt-2 .jgoogle{position:absolute}
.jmodal{width:58%;padding:1.2em 1.4em;margin-right:14%;border-radius:1em;background:var(--fundo);box-shadow:0 20px 50px -10px rgba(0,0,0,.35)}
.jmodal-tit{margin:0 0 1em;font-weight:600;font-size:1.15em}
.app-cld .jmodal-tit{font-family:var(--serif);font-weight:500;font-size:1.3em}
.jrot{margin:.7em 0 .3em;font-size:.86em;font-weight:500;color:var(--suave)}
.jcampo{margin:0;padding:.55em .75em;border:1px solid var(--borda);border-radius:.55em;background:#fff}
.jmono{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.88em}
.jmodal-bt{margin:1.2em 0 0;text-align:right}
.jrot-lado{display:flex;justify-content:space-between;align-items:center}
.jrot-lado span{display:flex;gap:.2em;padding:.15em;border-radius:.5em;background:var(--balao);font-size:.92em}
.jrot-lado span b{padding:.1em .6em;border-radius:.4em;background:#fff;color:var(--texto);font-weight:500}
.jrot-lado span{color:var(--suave)}
.javiso{margin:.9em 0 .6em;padding:.55em .8em;border:1px solid #f3c1ae;border-radius:.55em;background:#fff5f1;font-size:.86em}
.jmarca{margin:0;display:flex;align-items:center;gap:.6em;font-weight:600;font-size:.92em}
.jmarca span{display:grid;place-items:center;width:1.2em;height:1.2em;border-radius:.3em;background:#0d0d0d;color:#fff;font-size:.8em}
.jajuda{margin:.35em 0 .9em;font-size:.84em;color:var(--suave)}
.jmodal-bt .jbt-2{background:none;color:var(--texto);margin-right:.4em}
.jmodal-bt span{display:inline-block;padding:.5em 1.2em;border-radius:999px;background:var(--acao);color:var(--acao-t);font-weight:600}
.app-cld .jmodal-bt span{border-radius:.55em}
.jgoogle{position:absolute;right:3%;bottom:6%;width:19em;padding:1.1em 1.2em;border-radius:.6em;background:#fff;color:#1f1f1f;
  box-shadow:0 0 0 1px #dadce0,0 18px 40px -10px rgba(0,0,0,.4);opacity:0;transform:translateY(1em) scale(.97);transition:opacity .4s,transform .5s cubic-bezier(.2,.7,.2,1)}
.japp.google .jgoogle{opacity:1;transform:none}
.jgoogle p{margin:0 0 .5em;font-size:.88em}
.jgoogle-tit{font-size:1.05em!important;font-weight:500}
.jgoogle-conta{display:flex;align-items:center;gap:.6em;margin:.7em 0 0!important;padding:.6em 0 0;border-top:1px solid #e8eaed}
.jgoogle-conta span{display:grid;place-items:center;width:1.9em;height:1.9em;border-radius:50%;background:#7b1fa2;color:#fff;font-weight:600}

/* 3 e 4. Conversa */
.jchat{display:flex;flex-direction:column;gap:.9em;justify-content:flex-end;padding-bottom:1em}
.jchat .m{margin:0;max-width:78%}
.jchat .eu{align-self:flex-end;padding:.6em 1em;border-radius:1.3em;background:var(--balao)}
.app-cld .jchat .eu{border-radius:.8em}
.jchat .ia{align-self:flex-start;font-family:var(--serif)}
.app-cld .jchat .ia{font-size:1.05em}
.jcodigo b{display:block;margin:.4em 0;font:700 1.9em/1.1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.06em}
.jcodigo small{color:var(--suave);font-family:-apple-system,var(--f-body);font-size:.82em}
.jchat .sis{align-self:flex-start;display:flex;align-items:center;gap:.5em;padding:.4em .85em;border:1px solid var(--borda);border-radius:999px;font-size:.88em;color:var(--suave)}
.jchat .sis::before{content:"✓";display:grid;place-items:center;width:1.25em;height:1.25em;border-radius:50%;background:#25D366;color:#fff;font-size:.8em;font-weight:700}
.motion .jchat .m{opacity:0;transform:translateY(.8em);transition:opacity .35s,transform .45s cubic-bezier(.2,.7,.2,1)}
.motion .jchat .m.on{opacity:1;transform:none}

/* Campo de mensagem */
.japp-comp{position:absolute;left:12%;right:12%;bottom:1.2em;display:flex;align-items:center;gap:.8em;padding:.75em 1em;border-radius:1.6em;background:#fff;
  box-shadow:0 0 0 1px var(--borda),0 4px 14px -6px rgba(0,0,0,.12)}
.app-cld .japp-comp{border-radius:1em}
.japp-comp>span{color:var(--suave);font-size:1.2em;line-height:1}
.japp-comp p{flex:1;margin:0;color:#8e8e8e}
.japp-comp i{width:1.9em;height:1.9em;border-radius:50%;background:var(--acao)}
.app-cld .japp-comp i{border-radius:.5em}

@media (max-width:900px){
  .japp{transform:none;aspect-ratio:1/1.12;font-size:clamp(10px,2.9vw,13px)}
  .jt{padding-inline:6%}
  .japp-comp{left:5%;right:5%}
  .jmodal{width:88%;margin:0}
  .mac-notif{width:auto;left:1em}
  .jgoogle{right:5%;left:5%;width:auto}
  .jchat .m{max-width:88%}
}
/* Sem movimento: as quatro telas aparecem em sequência, sem esconder passo */
.no-motion .japp{aspect-ratio:auto;transform:none}
.no-motion .japp-corpo{position:static}
.no-motion .jt{position:relative;inset:auto;opacity:1;visibility:visible;transform:none;min-height:20em;padding-bottom:1.6em;border-bottom:1px solid var(--borda)}
.no-motion .jt-2{min-height:30em}
.no-motion .jt-2 .jgoogle{opacity:1;transform:none}
.no-motion .japp-comp{display:none}
@media (prefers-reduced-motion:reduce){.japp,.jt,.jgoogle,.jchat .m,.mac-notif{transition:none}}