/* Etapas do método: 4 ícones animados ligados por uma barra de progresso em loop. */
.etp-steps{--etp-dwell:1.8s;list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 22px}
.etp-step{position:relative;min-width:0;cursor:default}

/* Barra de progresso: um trilho contínuo com um marcador por etapa. */
.etp-rail{display:flex;align-items:center;gap:10px;margin:0 -22px 18px 0}
.etp-step:last-child .etp-rail{margin-right:0}
.etp-node{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:28px;padding:0 10px;border-radius:99px;font:700 12px/1 Manrope,sans-serif;letter-spacing:.08em;font-variant-numeric:tabular-nums;color:#c7a7ff;background:#130c24;border:1px solid #c7a7ff4d;transition:color .45s,background-color .45s,border-color .45s,box-shadow .45s}
.etp-track{position:relative;flex:1;height:3px;margin-right:10px;border-radius:3px;background:#ffffff14;clip-path:inset(-14px 0 -14px 0)}
.etp-step:last-child .etp-track{margin-right:0}
.etp-fill{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,#6c35cf,#a878ff 70%,#e9dcff);transform:none;transition:opacity .45s}

/* Cartão da etapa. */
.etp-card{position:relative;padding:12px 12px 22px;border-radius:24px;background:linear-gradient(180deg,#160e2a,#100a1e);border:1px solid #ffffff12;box-shadow:inset 0 1px 0 #ffffff0a;transition:border-color .5s,box-shadow .5s,transform .5s cubic-bezier(.2,.8,.2,1)}
.etp-stage{position:relative;height:184px;border-radius:16px;display:grid;place-items:center;overflow:hidden;isolation:isolate;background:radial-gradient(circle at 50% 50%,#ffffff0b 1px,transparent 1.5px) 0 0/14px 14px,#0c0718;border:1px solid #ffffff0a}
.etp-stage::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(105deg,transparent 35%,#ffffff12 48%,#ffffff05 55%,transparent 65%);transform:translateX(-110%)}
.etp-stage::before{content:"";position:absolute;inset:-10%;z-index:-1;background:radial-gradient(closest-side,#9759ff5c,#9759ff14 60%,transparent);opacity:.55;transition:opacity .6s}
.etp-icon{display:block;width:148px;height:148px;overflow:visible;transition:opacity .5s}
.etp-steps .etp-word{margin:18px 8px 0;font:700 30px/1.08 Syne,sans-serif;letter-spacing:-.045em;color:#f5f0ff;transition:color .45s}

/* Estados controlados pelo script (sem script: tudo aceso e parado). */
.etp-live .etp-node{color:#9d8fb6;background:#0f0a1c;border-color:#ffffff1f}
.etp-live .etp-fill{transform:translateX(-101%)}
.etp-live .etp-stage::before{opacity:0}
.etp-live .etp-icon{opacity:.4}
.etp-live .etp-word{color:#9d8fb6}
.etp-live .is-done .etp-node{color:#c7a7ff;background:#130c24;border-color:#c7a7ff4d}
.etp-live .is-done .etp-fill{transform:none}
.etp-live .is-done .etp-icon{opacity:.72}
.etp-live .is-done .etp-word{color:#d9ccef}
.etp-live .is-active .etp-node{color:#fff;background:linear-gradient(120deg,#a466f7,#6b31c6);border-color:#d9c2ff66;box-shadow:0 0 0 4px #9759ff24,0 0 24px #9759ffa6}
.etp-live .is-active .etp-fill{box-shadow:0 0 10px #a878ffa6;animation:etpFill var(--etp-dwell) linear both}
.etp-live .is-active .etp-card{border-color:#c7a7ff52;transform:translateY(-6px);box-shadow:inset 0 1px 0 #ffffff17,0 26px 60px -22px #9759ffa6,0 0 0 1px #9759ff26}
.etp-live .is-active .etp-stage::before{opacity:1;animation:etpBreathe var(--etp-dwell) ease-in-out both}
.etp-live .is-active .etp-stage::after{animation:etpSheen 0.619s cubic-bezier(.4,0,.2,1) 0.028s both}
.etp-live .is-active .etp-icon{opacity:1;filter:drop-shadow(0 8px 22px #9759ff59)}
.etp-live .is-active .etp-word{color:#fff}
.etp-live.etp-finale .etp-fill{transform:none}
.etp-live.etp-finale .etp-node{color:#fff;background:linear-gradient(120deg,#a466f7,#6b31c6);border-color:#d9c2ff66;box-shadow:0 0 0 4px #9759ff1f,0 0 18px #9759ff80}
.etp-live.etp-finale .etp-icon{opacity:1}
.etp-live.etp-finale .etp-word{color:#fff}
.etp-live.etp-finale .etp-card{border-color:#c7a7ff38}
.etp-live.etp-reset .etp-fill{opacity:0}
.etp-live:not(.etp-run) *,.etp-live:not(.etp-run) *::before,.etp-live:not(.etp-run) *::after{animation-play-state:paused!important}

@keyframes etpFill{from{transform:translateX(-101%)}to{transform:none}}
@keyframes etpBreathe{0%{transform:scale(.8)}50%{transform:scale(1.06)}100%{transform:scale(.96)}}
@keyframes etpSheen{from{transform:translateX(-110%)}to{transform:translateX(110%)}}
@keyframes etpPop{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:none}}

/* 01 Prepare: os arquivos caem na pasta, em ordem. */
.etp-prep-file{transform-box:fill-box;transform-origin:50% 100%}
.etp-prep-front{transform-box:fill-box;transform-origin:50% 100%}
.etp-prep-ok{transform-box:fill-box;transform-origin:center}
.etp-live .is-active .etp-prep-file{animation:etpDrop 0.506s cubic-bezier(.25,.7,.35,1) calc(0.084s + var(--etp-d)) both}
.etp-live .is-active .etp-prep-front{animation:etpGulp 0.731s ease-out 0.253s both}
.etp-live .is-active .etp-prep-ok{animation:etpPop 0.309s cubic-bezier(.3,1.7,.5,1) 0.9s both}
@keyframes etpDrop{0%{opacity:0;transform:translateY(-46px) rotate(var(--etp-r))}20%{opacity:1}62%{transform:translateY(4px) rotate(0deg)}82%{transform:translateY(-1.5px)}100%{opacity:1;transform:none}}
@keyframes etpGulp{0%,100%{transform:none}18%{transform:scale(1.025,.94)}36%{transform:none}52%{transform:scale(1.02,.96)}68%{transform:none}82%{transform:scale(1.01,.98)}}

/* 02 Peça: o comando é digitado, enviado e a IA responde com brilho. */
.etp-ask-l1,.etp-ask-l2{transform-box:fill-box;transform-origin:0 50%}
.etp-ask-send,.etp-ask-ring,.etp-ask-spark{transform-box:fill-box;transform-origin:center}
.etp-ask-ring{opacity:0}
.etp-live .is-active .etp-ask-l1{animation:etpType 0.422s steps(7,end) 0.084s both}
.etp-live .is-active .etp-ask-l2{animation:etpType 0.309s steps(5,end) 0.562s both}
.etp-live .is-active .etp-ask-caret{animation:etpCaret 0.787s 0.084s both,etpBlink 0.45s 0.872s steps(1,end) infinite}
.etp-live .is-active .etp-ask-send{animation:etpPress 0.281s ease-out 0.928s both}
.etp-live .is-active .etp-ask-ring{animation:etpRing 0.45s ease-out 1.041s both}
.etp-live .is-active .etp-ask-spark{animation:etpSpark 0.394s cubic-bezier(.3,1.6,.5,1) 1.125s both}
.etp-live .is-active .etp-ask-spark-s{animation-delay:2.18s}
@keyframes etpType{from{transform:scaleX(0)}to{transform:none}}
@keyframes etpCaret{0%{transform:translate(-27px,-15px);animation-timing-function:steps(7,end)}53.6%{transform:translate(25px,-15px);animation-timing-function:steps(1,end)}60.7%{transform:translate(-38px,0);animation-timing-function:steps(5,end)}100%{transform:none}}
@keyframes etpBlink{0%{opacity:1}50%{opacity:0}}
@keyframes etpPress{0%,100%{transform:none}35%{transform:scale(.82)}70%{transform:scale(1.12)}}
@keyframes etpRing{0%{opacity:.9;transform:none}100%{opacity:0;transform:scale(2.3)}}
@keyframes etpSpark{0%{opacity:0;transform:scale(0) rotate(-90deg)}100%{opacity:1;transform:none}}

/* 03 Revise: a lupa confere rosto e legenda, e o check confirma. */
.etp-rev-lens{transform:translate(91px,40px)}
.etp-rev-focus,.etp-rev-cap,.etp-rev-ok{transform-box:fill-box;transform-origin:center}
.etp-rev-focus{opacity:.55}
.etp-rev-scan{opacity:0}
.etp-live .is-active .etp-rev-lens{animation:etpLens 1.238s cubic-bezier(.55,0,.3,1) 0.056s both}
.etp-live .is-active .etp-rev-scan{animation:etpScan 0.956s ease-in-out 0.084s both}
.etp-live .is-active .etp-rev-focus{animation:etpFocus 1.294s ease-out 0.056s both}
.etp-live .is-active .etp-rev-cap{animation:etpCap 0.337s ease-out 0.759s both}
.etp-live .is-active .etp-rev-ok{animation:etpPop 0.309s cubic-bezier(.3,1.7,.5,1) 1.097s both}
@keyframes etpLens{0%{transform:translate(91px,40px)}24%,40%{transform:translate(50px,51px)}60%,72%{transform:translate(50px,90px)}100%{transform:translate(91px,40px)}}
@keyframes etpScan{0%{opacity:0;transform:translateY(-26px)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateY(62px)}}
@keyframes etpFocus{0%,24%{opacity:0;transform:scale(1.3)}36%{opacity:1;transform:none}85%{opacity:1}100%{opacity:.55;transform:none}}
@keyframes etpCap{0%,100%{transform:none}45%{transform:scale(1.12)}}

/* 04 Reutilize: o padrão gira e se multiplica em novos vídeos. */
.etp-reuse-ring{transform-box:view-box;transform-origin:60px 60px}
.etp-reuse-copy{transform-box:view-box;transform-origin:60px 80px;transform:translateX(var(--etp-x)) rotate(var(--etp-r))}
.etp-reuse-main{transform-box:fill-box;transform-origin:center}
.etp-reuse-bar{transform-box:fill-box;transform-origin:0 50%}
.etp-live .is-active .etp-reuse-ring{animation:etpSpin 1.463s cubic-bezier(.65,0,.35,1) 0.056s both}
.etp-live .is-active .etp-reuse-main{animation:etpStamp 0.309s ease-out 0.084s both}
.etp-live .is-active .etp-reuse-copy{animation:etpFan 0.506s cubic-bezier(.3,1.35,.5,1) calc(0.197s + var(--etp-d)) both}
.etp-live .is-active .etp-reuse-bar{animation:etpType 0.253s ease-out calc(0.703s + var(--etp-d)) both}
@keyframes etpSpin{from{transform:none}to{transform:rotate(360deg)}}
@keyframes etpStamp{0%,100%{transform:none}40%{transform:scale(.9)}}
@keyframes etpFan{0%{opacity:0;transform:none}25%{opacity:1}100%{opacity:1;transform:translateX(var(--etp-x)) rotate(var(--etp-r))}}

@media(max-width:1050px){.etp-steps{gap:0 16px}.etp-rail{margin-right:-16px}.etp-stage{height:164px}.etp-icon{width:132px;height:132px}.etp-steps .etp-word{font-size:26px}}
@media(max-width:900px){.etp-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 14px}.etp-rail,.etp-step:last-child .etp-rail{margin-right:0}.etp-track,.etp-step:last-child .etp-track{margin-right:0}}
@media(max-width:760px){.etp-steps{margin-top:34px;gap:22px 12px}.etp-rail{gap:8px;margin-bottom:12px}.etp-node{min-width:36px;height:26px;padding:0 9px}.etp-card{padding:8px 8px 15px;border-radius:18px}.etp-stage{height:124px;border-radius:12px;background-size:12px 12px,auto}.etp-icon{width:104px;height:104px}.etp-steps .etp-word{margin:12px 6px 0;font-size:21px;letter-spacing:-.04em}.etp-live .is-active .etp-card{transform:translateY(-3px)}}
@media(max-width:374px){.etp-steps{gap:20px 10px}.etp-stage{height:114px}.etp-icon{width:96px;height:96px}.etp-steps .etp-word{font-size:19px;margin-left:4px;margin-right:4px}}

/* Movimento reduzido: tudo aceso e parado. */
@media(prefers-reduced-motion:reduce){.etp-steps *,.etp-steps *::before,.etp-steps *::after{animation:none!important;transition:none!important}.etp-live .is-active .etp-card{transform:none}}

/* Sem rótulos miúdos nem frases de instrução na ilustração da linha do tempo. */
.method .edit-simulation,.method .edit-editor-brand div>span,.method .edit-machine-footer{display:none}