/* Jornada Terart — animação do processo */
.jr{padding:88px 0 40px;font-family:'Poppins',system-ui,sans-serif}
.jr-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:56px;align-items:center}
@media (max-width:980px){.jr-grid{grid-template-columns:1fr;gap:32px}.jr-art{order:-1}}
.jr-txt{display:flex;flex-direction:column;gap:16px;min-width:0}
.jr-eyebrow{display:flex;align-items:center;gap:10px;margin:0;font-size:13px;font-weight:700;letter-spacing:.1em;color:#0083BE;text-transform:uppercase}
.jr-eyebrow:before{content:"";border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:12px solid #A9D046}
.jr-h2{margin:0;font-size:clamp(28px,3.2vw,42px);line-height:1.14;color:#0A2E4A;font-weight:700;letter-spacing:-.015em}
.jr-lead{margin:0;font-size:17px;line-height:1.7;color:#3A4651}
.jr-steps{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;counter-reset:jr}
.jr-st{position:relative;border-radius:16px;background:#FFFFFF;border:1.5px solid #E3EAEF;overflow:hidden;transition:border-color .3s,box-shadow .3s,background .3s}
.jr-sb{all:unset;box-sizing:border-box;display:flex;gap:14px;align-items:flex-start;width:100%;padding:14px 16px;cursor:pointer}
.jr-sb:focus-visible{outline:3px solid #0098DB;outline-offset:-3px;border-radius:16px}
.jr-n{flex-shrink:0;width:34px;height:34px;border-radius:50%;background:#EAF6FC;color:#0083BE;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;transition:background .3s,color .3s}
.jr-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.jr-tx strong{font-size:16px;line-height:1.35;color:#0A2E4A}
.jr-tx span{font-size:14px;line-height:1.55;color:#56636E;max-height:0;opacity:0;overflow:hidden;transition:max-height .45s ease,opacity .35s ease}
.jr-st.on{border-color:#0098DB;box-shadow:0 10px 28px rgba(0,152,219,.14)}
.jr-st.on .jr-n{background:#0098DB;color:#FFFFFF}
.jr-st.on .jr-tx span{max-height:90px;opacity:1}
.jr-st.done .jr-n{background:#A9D046;color:#0A2E4A}
.jr-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:transparent}
.jr-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#0098DB,#A9D046)}
.jr-st.on .jr-bar i{animation:jrBar var(--dur,4200ms) linear forwards}
.jr.paused .jr-st.on .jr-bar i,.jr.idle .jr-st.on .jr-bar i{animation-play-state:paused}
@keyframes jrBar{to{width:100%}}
.jr-art{display:flex;flex-direction:column;gap:18px;min-width:0}
.jr-card{position:relative;border-radius:28px;box-shadow:0 24px 60px rgba(10,46,74,.12);background:#FFFFFF;overflow:hidden}
.jr-svg{display:block;width:100%;height:auto}
.jr-cap{position:absolute;left:16px;top:16px;display:flex;align-items:center;gap:10px;background:rgba(10,46,74,.88);color:#FFFFFF;border-radius:999px;padding:7px 14px 7px 8px;font-size:13px;font-weight:600}
.jr-capn{background:#A9D046;color:#0A2E4A;border-radius:999px;padding:2px 8px;font-weight:800;font-size:12px}
.jr-play{position:absolute;right:14px;top:14px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:#0A2E4A;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(10,46,74,.15)}
.jr-play .pl{display:none}.jr.paused .jr-play .pz{display:none}.jr.paused .jr-play .pl{display:block}
.jr-cta{display:flex;flex-wrap:wrap;gap:12px}
/* cena */
.jr-svg *{transform-box:fill-box}
.jr-e{opacity:0;transition:opacity .45s ease}
.jr.s1 .jr-e1,.jr.s2 .jr-e2,.jr.s3 .jr-e3,.jr.s4 .jr-e4,.jr.s5 .jr-e5{opacity:1}
.jr-pop{transform-origin:center;transform:scale(.4) translateY(20px);opacity:0;transition:transform .6s cubic-bezier(.34,1.56,.64,1),opacity .35s ease}
.jr.s1 .jr-e1 .jr-pop,.jr.s2 .jr-e2 .jr-pop,.jr.s3 .jr-e3 .jr-pop,.jr.s4 .jr-e4 .jr-pop,.jr.s5 .jr-e5 .jr-pop{transform:none;opacity:1}
.jr-d2{transition-delay:.35s}.jr-d3{transition-delay:.7s}
.jr-ck{opacity:0;transform:translateX(-8px);transition:opacity .35s ease var(--dl),transform .35s ease var(--dl)}
.jr.s3 .jr-ck{opacity:1;transform:none}
@media (max-width:620px){.jr{padding:64px 0 24px}.jr-cap{left:10px;top:10px;font-size:11px;padding:5px 10px 5px 6px}.jr-capn{font-size:10px}.jr-play{width:34px;height:34px;right:10px;top:10px}}
/* cenários: formas flutuando nas etapas 1-3, sala com piso só na instalação */
.jr-deco{transition:opacity .5s ease}
.jr.s4 .jr-deco,.jr.s5 .jr-deco{opacity:0}
.jr-deco .f1{animation:jrFloat 5s ease-in-out infinite}
.jr-deco .f2{animation:jrFloat 6s ease-in-out .8s infinite reverse}
.jr-deco .f3{animation:jrFloat 7s ease-in-out 1.6s infinite}
@keyframes jrFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(14deg)}}
.jr-room{opacity:0;transform:translateY(30px);transition:opacity .55s ease,transform .7s cubic-bezier(.34,1.3,.64,1)}
.jr.s4 .jr-room,.jr.s5 .jr-room{opacity:1;transform:none}
/* etapa 1: catálogo folheando */
.bk{opacity:0}
.jr.s1 .bk{animation:jrBk 3.6s linear .6s infinite backwards}
.jr.s1 .bk-b{animation-delay:1.8s}.jr.s1 .bk-c{animation-delay:3s}
@keyframes jrBk{0%{opacity:0}4%,33%{opacity:1}36%,100%{opacity:0}}
.bk-flip{transform-origin:left center;opacity:0}
.jr.s1 .bk-flip{animation:jrFlip 1.2s ease-in .6s infinite}
@keyframes jrFlip{0%{opacity:1;transform:scaleX(1)}30%{opacity:1;transform:scaleX(0)}31%,100%{opacity:0;transform:scaleX(0)}}
/* etapa 2: vitrine de amostras passando com destaque */
.jr-belt{transform:translateX(80px)}
.jr.s2 .jr-belt{animation:jrBelt 4.5s cubic-bezier(.6,0,.3,1) .3s infinite}
@keyframes jrBelt{0%,14%{transform:translateX(80px)}20%,34%{transform:translateX(-44px)}40%,54%{transform:translateX(-168px)}60%,74%{transform:translateX(-292px)}80%,94%{transform:translateX(-416px)}100%{transform:translateX(-540px)}}
.jr-hl-frame{opacity:0;transform-origin:center}
.jr.s2 .jr-hl-frame{opacity:1;animation:jrHl .9s ease-in-out .3s infinite}
@keyframes jrHl{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
/* piso */
.pk{opacity:0;transform:translateY(-26px) scaleY(.6);transition:none}
.jr.s4 .pk,.jr.s5 .pk{opacity:1;transform:none;transition:transform .45s cubic-bezier(.34,1.4,.64,1) calc(.9s + var(--d) * 55ms),opacity .25s ease calc(.9s + var(--d) * 55ms)}
.jr.s5 .pk{transition:none}
.jr-level{transform:translateX(0)}
.jr.s4 .jr-level{animation:jrLevel 1s ease-in-out forwards}
@keyframes jrLevel{to{transform:translateX(660px)}}
.jr.s5 .jr-shine{animation:jrShine 1.6s ease-in-out .3s 2}
@keyframes jrShine{from{transform:skewX(-20deg) translateX(0)}to{transform:skewX(-20deg) translateX(820px)}}
.jr-spk path{transform-origin:center;opacity:0}
.jr.s5 .jr-spk path{animation:jrSpk 1.6s ease-in-out infinite}
.jr.s5 .jr-spk .s2{animation-delay:.4s}.jr.s5 .jr-spk .s3{animation-delay:.8s}
@keyframes jrSpk{0%,100%{opacity:0;transform:scale(.4) rotate(0)}50%{opacity:1;transform:scale(1.1) rotate(45deg)}}
/* mãos */
.jr-hand{opacity:0;transform:translateX(-70px);transition:transform .7s cubic-bezier(.34,1.4,.64,1),opacity .4s ease}
.jr.s1 .jr-e1 .jr-hand,.jr.s2 .jr-e2 .jr-hand{opacity:1;transform:none;animation:jrPoint 1.5s ease-in-out 1.1s infinite}
@keyframes jrPoint{0%,100%{transform:translateX(0)}50%{transform:translateX(9px)}}
.jr-shake{opacity:0;transform:translateY(24px) scale(.8);transform-origin:center;transition:transform .6s cubic-bezier(.34,1.4,.64,1) .2s,opacity .4s ease .2s}
.jr.s3 .jr-shake{opacity:1;transform:none;animation:jrShake .8s ease-in-out .9s 3}
@keyframes jrShake{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-7px) rotate(-2deg)}75%{transform:translateY(6px) rotate(2deg)}}
.jr-thumb{opacity:0;transform:translateY(46px) scale(.6);transform-origin:center bottom;transition:transform .6s cubic-bezier(.34,1.56,.64,1),opacity .35s ease}
.jr.s5 .jr-thumb{opacity:1;transform:none;animation:jrJump 1s ease-in-out .8s infinite}
.jr.s5 .jr-thumb.jr-d2{animation-delay:1.1s}
@keyframes jrJump{0%,100%{transform:translateY(0)}40%{transform:translateY(-12px) rotate(-6deg)}}
.jr-sun{transform-origin:center;animation:jrSun 6s ease-in-out infinite}
.jr-cloud{animation:jrCloud 9s ease-in-out infinite alternate}
.jr-plant{transform-origin:50% 100%;animation:jrPlant 4s ease-in-out infinite}
@keyframes jrSun{50%{transform:scale(1.12)}}
@keyframes jrCloud{to{transform:translateX(22px)}}
@keyframes jrPlant{50%{transform:rotate(2deg)}}
@media (prefers-reduced-motion:reduce){
  .jr *,.jr *:before{animation:none!important;transition:none!important}
  .jr-tx span{max-height:none!important;opacity:1!important}
}
