/* Flat illustrations for the "como funciona" steps (scripts/figure.mjs). Animation rules are appended at build time. */
.scene{margin:0 0 16px}
.scene-svg{display:block;width:100%;max-width:320px;margin:0 auto}
.process .step{grid-template-columns:1fr;gap:0}
.step h3{transition:color .3s}
.step.on h3{color:var(--blue)}
.scene .typing circle{animation:scene-blink 1.4s infinite}
.scene .typing circle:nth-child(2){animation-delay:.2s}
.scene .typing circle:nth-child(3){animation-delay:.4s}
@keyframes scene-blink{0%,100%{opacity:.25}40%{opacity:1}}
.scene .mail{transform-box:fill-box;transform-origin:center;transition:transform .5s var(--ease),opacity .4s}
.step:not(.on) .scene .mail{transform:scale(.6);opacity:.2}
.scene .shake{transform-box:fill-box;transform-origin:center}
.step.on .scene .shake{animation:scene-shake 1s ease-in-out 2}
@keyframes scene-shake{50%{transform:translateY(-4px)}}
.scene .sparkle{opacity:0;transition:opacity .5s}
.step.on .scene .sparkle{opacity:1}
@media(prefers-reduced-motion:reduce){.scene .typing circle,.step.on .scene .shake{animation:none}.scene .mail,.scene .sparkle{transition:none}}