/* Motion local + composición propia. El scroll conserva su comportamiento nativo. */
.motion-zoom{transform-origin:50% 50%;position:relative}
.hero-scroll{transform-origin:50% 30%;position:relative}
.motion-tools{text-align:center;margin-top:16px}
.motion-tools .motion-toggle{font-size:10px;padding:7px 12px;min-height:36px;margin:0}
.motion-paused .mock-browser{transform:rotate(-3deg)!important}
.motion-paused .is-entering{animation:none!important}
.motion-paused .motion-zoom,.motion-paused .hero-scroll{transform:none!important}
.motion-paused .button,.motion-paused .plan,.motion-paused .steps li{transition:none}
.motion-paused .motion-plan::after{display:none}
.motion-paused .story-steps li{transition:none}
.motion-paused *,.motion-paused *::before,.motion-paused *::after{animation:none!important;transition:none!important}
.motion-paused{scroll-behavior:auto}
.motion-paused .button:hover,.motion-paused .button:active,.motion-paused .plan:hover,.motion-paused .steps li:hover,.motion-paused .close:hover,.motion-paused .demo-style:hover{transform:none}
.motion-paused .button:hover .icon,.motion-paused .text-link:hover .icon{transform:none}
.motion-toggle{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:30px;background:var(--white);color:var(--ink);font-size:11px;padding:9px 14px;min-height:40px;margin:0 0 20px;cursor:pointer}
.motion-toggle .icon{width:14px;height:14px}
.motion-toggle[aria-pressed="true"]{background:var(--sage)}
.motion-toggle[hidden]{display:none}
.motion-hint{display:flex;align-items:center;gap:9px;color:var(--rust);font-size:10px;letter-spacing:.04em;margin:22px 0 0}
.motion-hint .icon{height:16px;width:16px}
.build-story{background:#213f35;color:#f6f3eb;position:relative;isolation:isolate;overflow:clip;margin:0;--build:1;--phone:1;--wire:0;--scene:0}
.story-sticky{max-width:1440px;margin:auto;display:grid;grid-template-columns:.85fr 1.25fr;gap:60px;align-items:center;padding:80px 6%;position:relative}
.story-copy{position:relative;z-index:2;max-width:400px}
.story-copy .eyebrow{color:#d0c4a6}
.story-copy h2{font-size:clamp(38px,4.1vw,62px);margin-bottom:22px}
.story-copy h2 em{color:#e5bb96}
.story-intro{font-size:13px;color:#d5dfcf;max-width:340px;line-height:1.8}
.story-steps{list-style:none;padding:10px 0 0;margin:25px 0 20px;display:grid;gap:10px}
.story-steps li{border-top:1px solid #78927c6b;padding-top:12px}
.story-step{display:flex;gap:14px;align-items:baseline;color:inherit;width:100%;padding:0;border:0;background:none;text-align:left}
.story-step>span{font-size:10px;color:#d4b594}
.story-step b{font-size:13px;font-weight:600}
.story-steps p{font-size:11px;color:#cfdbc9;margin:5px 0 2px 30px;line-height:1.7}
.story-controls-ready .story-step{cursor:pointer}
.story-controls-ready .story-steps li{opacity:.7;transition:opacity .25s,border-color .25s}
.story-controls-ready .story-steps li[data-active="true"]{opacity:1;border-color:#e5bb96}
.story-controls-ready .story-steps li:focus-within,.story-controls-ready .story-steps li:hover{opacity:1}
.story-step:focus-visible{outline:2px solid #e5bb96;outline-offset:5px;border-radius:2px}
.story-caption{font-size:10px;color:#bdcdb8;line-height:1.6;margin:10px 0 0}
.story-canvas{position:relative;aspect-ratio:1.28;perspective:1200px;min-width:0}
.story-canvas::before{content:"";position:absolute;inset:-15px;background-image:linear-gradient(#bed1b610 1px,transparent 1px),linear-gradient(90deg,#bed1b610 1px,transparent 1px);background-size:36px 36px;mask-image:radial-gradient(ellipse,#000 20%,transparent 72%);pointer-events:none}
.story-halo{position:absolute;inset:10% 10%;border:1px solid #c7d3af40;border-radius:50%;transform:scale(calc(.85 + var(--build) * .25)) rotate(calc(var(--scene) * 30deg));pointer-events:none}
.story-halo::after{content:"";position:absolute;inset:-25px;border:1px solid #c7d3af20;border-radius:50%}
.story-window{position:absolute;top:10%;left:2%;width:92%;height:73%;border:1px solid #aab8a0;border-radius:9px;background:#fbf9f0;color:var(--ink);box-shadow:0 30px 65px #071b1835;overflow:hidden;transform:translateX(calc(var(--phone) * -5%)) scale(calc(.84 + var(--build) * .16 - var(--phone) * .04)) rotateY(calc(-16deg + var(--build) * 16deg)) rotate(calc(-6deg + var(--build) * 6deg));transform-origin:50% 60%;will-change:transform}
.story-bar{height:28px;background:#e7ecdf;border-bottom:1px solid #d4dccc;display:flex;justify-content:space-between;align-items:center;padding:0 12px;font-size:7px;color:#5e705a}
.story-bar .browser-dots i{width:4px;height:4px}
.story-screen{position:relative;height:calc(100% - 28px);overflow:hidden}
.story-wire,.story-finish{position:absolute;inset:0;padding:5%}
.story-wire{opacity:var(--wire);transform:translateY(calc(var(--build) * -18px));background:#f6f3eb}
.wire-nav{display:flex;justify-content:space-between;align-items:center;border-bottom:1px dashed #9cae95;padding-bottom:12px}
.wire-nav b{font:15px Fraunces,Georgia,serif}
.wire-nav span{display:block;width:34%;height:5px;background:#c5cdbe;border-radius:4px}
.wire-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:8%;padding-top:10%;height:80%}
.wire-lines{padding-top:7%}
.wire-lines i{display:block;height:7px;background:#c2cbb9;border-radius:3px;margin:0 0 12px;width:95%}
.wire-lines i:nth-child(2){width:75%}.wire-lines i:nth-child(3){width:85%;margin-top:25px;height:4px}.wire-lines i:nth-child(4){width:65%;height:4px}
.wire-lines b{display:block;border:1px dashed #8fa483;border-radius:3px;width:60%;height:25px;margin-top:20px}
.wire-picture{border:1px dashed #93a88a;background:repeating-linear-gradient(135deg,transparent 0 10px,#b8c6af20 10px 11px);border-radius:70px 70px 4px 4px;display:grid;place-items:center;color:#708268;font-size:9px}
.story-finish{opacity:var(--build);transform:translateY(calc(18px - var(--build) * 18px));background:#fbf9f0}
.finish-brand{font:17px Fraunces,Georgia,serif;border-bottom:1px solid #dbe0d2;padding-bottom:10px;display:flex;align-items:center;justify-content:space-between}
.finish-brand small{font:6px Manrope,Arial,sans-serif;letter-spacing:1px;color:#67805f}
.finish-hero{display:grid;grid-template-columns:1fr .85fr;gap:8%;align-items:center;height:82%;padding-top:5%}
.finish-hero h3{font:clamp(20px,2.7vw,40px)/1.05 Fraunces,Georgia,serif;letter-spacing:-.04em;margin:8px 0 12px}
.finish-hero p{font-size:7px;color:#6b7e62;max-width:150px;margin:0 0 14px}
.finish-button{display:inline-block;background:#43604d;color:#fbf9f0;font-size:6px;padding:9px 12px;border-radius:2px}
.finish-art{background:#dfe7d1;border-radius:90px 90px 4px 4px;align-self:stretch;max-height:100%;overflow:hidden;position:relative;display:grid;place-items:center}
.finish-art svg{width:100%;height:100%;max-height:240px;fill:none;stroke:#57744e;stroke-width:2;stroke-linecap:round}
.story-phone{position:absolute;right:0;bottom:2%;width:28%;height:78%;max-height:380px;border:5px solid #c7cfc0;border-radius:23px;background:#f7f5ed;color:var(--ink);box-shadow:0 20px 45px #081c1938;overflow:hidden;opacity:var(--phone);transform:translateX(calc(70px - var(--phone) * 70px)) translateY(calc(35px - var(--phone) * 35px)) rotate(calc(8deg - var(--phone) * 8deg)) scale(calc(.9 + var(--phone) * .1));will-change:transform}
.phone-camera{display:block;width:28%;height:7px;border-radius:0 0 7px 7px;background:#c7cfc0;margin:0 auto 14px}
.phone-page{padding:8% 11%}
.phone-page>b{font:13px Fraunces,Georgia,serif}
.phone-page h3{font:clamp(17px,1.7vw,26px)/1.1 Fraunces,Georgia,serif;margin:20px 0 12px}
.phone-page p{font-size:6px;color:#64775c;line-height:1.7}
.phone-art{height:90px;border-radius:60px 60px 4px 4px;margin-top:15px;background:#dfe7d1;display:grid;place-items:center}
.phone-art svg{height:90%;width:80%;fill:none;stroke:#57744e;stroke-width:2;stroke-linecap:round}
.story-label{position:absolute;left:8%;bottom:3%;font-size:9px;letter-spacing:.1em;color:#d4c5ab;border-left:1px solid #bdc7ac;padding-left:13px}
.story-meter{display:block;height:2px;background:#adc1a140;max-width:280px;margin-top:22px;overflow:hidden}
.story-meter i{display:block;background:#dfb994;height:100%;transform:scaleX(var(--scene));transform-origin:left}
.story-scroll-hint{display:none;color:#becdb5;font-size:9px;gap:8px;align-items:center;margin-top:12px}
.story-scroll-hint .icon{height:14px;width:14px}
.build-story.is-scroll-story{height:230vh}
.is-scroll-story .story-sticky{position:sticky;top:0;height:100svh;min-height:610px;max-height:1000px;padding-block:45px}
.is-scroll-story .story-scroll-hint{display:flex}
.showcase-window{transition:box-shadow .35s}
.showcase-window:focus-within{box-shadow:0 0 0 3px #a4563640}
.motion-plan{position:relative;isolation:isolate;--pointer-x:50%;--pointer-y:30%}
.motion-plan::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(240px circle at var(--pointer-x) var(--pointer-y),#dce5d273,transparent 75%);opacity:0;transition:opacity .25s;pointer-events:none;z-index:-1}
@media(hover:hover) and (pointer:fine){.motion-plan:hover::after{opacity:1}.motion-zoom{will-change:transform}}
@media(max-width:1050px){.story-sticky{gap:30px;padding-inline:5%}.story-canvas{aspect-ratio:1.12}.story-copy h2{font-size:40px}.finish-hero h3{font-size:30px}.story-phone{border-width:4px}.phone-page h3{font-size:20px}.phone-art{height:70px}.phone-page>b{font-size:11px}}
@media(max-width:760px){.story-sticky{grid-template-columns:1fr;gap:22px;padding:55px 24px}.story-copy{max-width:none}.story-copy h2{font-size:37px;margin-bottom:14px}.story-intro{font-size:12px;margin-bottom:0;max-width:390px}.story-steps{grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0 8px;padding:0}.story-step{display:block;line-height:1.4}.story-step>span{display:block;margin-bottom:5px;font-size:9px}.story-step b{font-size:11px}.story-steps p{font-size:10px;margin:7px 0 0}.story-canvas{width:min(100%,480px);margin:auto;aspect-ratio:1.45}.story-phone{border-width:4px;border-radius:17px;height:88%;width:27%;bottom:0}.phone-camera{height:5px;margin-bottom:4px}.phone-page{padding:7% 9%}.phone-page>b{font-size:9px}.phone-page h3{font-size:16px;margin:14px 0 8px}.phone-page p{font-size:5px}.phone-art{height:55px;margin-top:9px}.story-window{height:80%;top:4%}.story-bar{height:20px;font-size:5px}.story-screen{height:calc(100% - 20px)}.finish-brand{font-size:13px;padding-bottom:6px}.finish-brand small{font-size:4px}.finish-hero h3{font-size:27px;margin:6px 0 8px}.finish-hero p{font-size:6px;margin-bottom:9px}.finish-button{font-size:5px;padding:6px 9px}.wire-nav{padding-bottom:7px}.wire-nav b{font-size:11px}.wire-lines i{margin-bottom:7px;height:5px}.wire-lines i:nth-child(3){margin-top:14px}.wire-lines b{height:18px;margin-top:10px}.wire-picture{font-size:7px}.story-label{font-size:7px;bottom:1%;left:4%}.story-caption{font-size:9px;max-width:400px}.story-meter{margin-top:12px;max-width:100%}.build-story.is-scroll-story{height:210svh}.is-scroll-story .story-sticky{height:100svh;min-height:600px;padding-block:30px;gap:18px;align-content:center}.is-scroll-story .story-scroll-hint{margin-top:8px;font-size:8px}.motion-hint{font-size:9px}.motion-toggle{margin-bottom:16px}}
@media(max-width:370px){.story-copy h2{font-size:32px}.story-intro{font-size:11px}.finish-hero h3{font-size:22px}.phone-page h3{font-size:14px}.phone-art{height:40px}.is-scroll-story .story-sticky{padding-inline:20px}}
@media(max-height:650px){.build-story.is-scroll-story{height:auto}.is-scroll-story .story-sticky{position:relative;height:auto;min-height:0;padding-block:45px}.is-scroll-story .story-scroll-hint{display:none}}
@media(prefers-reduced-motion:reduce){.build-story.is-scroll-story{height:auto}.is-scroll-story .story-sticky{position:relative;height:auto;min-height:0;padding-block:60px}.story-window{will-change:auto;transform:none}.story-phone{will-change:auto;transform:none}.motion-zoom,.hero-scroll{transform:none!important}.story-halo{transform:none}.story-scroll-hint{display:none!important}}
/* CSS nativo dirige la maqueta durante el recorrido pegajoso; Motion queda como respaldo. */
@supports (animation-timeline:view()){
  @media(min-width:761px) and (min-height:651px){
    .build-story.css-scroll-story{view-timeline-name:--story-progress;view-timeline-axis:block}
    .css-scroll-story .story-window,.css-scroll-story .story-wire,.css-scroll-story .story-finish,.css-scroll-story .story-phone,.css-scroll-story .story-halo,.css-scroll-story .story-meter i{animation-duration:1ms;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--story-progress;animation-range:30% 70%}
    .css-scroll-story .story-window{animation-name:story-window-build}
    .css-scroll-story .story-wire{animation-name:story-wire-build}
    .css-scroll-story .story-finish{animation-name:story-finish-build}
    .css-scroll-story .story-phone{animation-name:story-phone-build}
    .css-scroll-story .story-halo{animation-name:story-halo-build}
    .css-scroll-story .story-meter i{animation-name:story-meter-build}
  }
  @media(max-width:760px){
    .build-story:not(.is-scroll-story) .story-steps li{animation:story-step-reveal 1ms linear both;animation-timeline:view(block 5% 5%);animation-range:entry 0% cover 42%}
    .build-story:not(.is-scroll-story) .story-canvas{animation:story-canvas-reveal 1ms linear both;animation-timeline:view(block 5% 5%);animation-range:entry 0% cover 55%}
  }
}
@keyframes story-window-build{
  0%{transform:translateX(-5%) scale(.84) rotateY(-16deg) rotate(-6deg)}
  43%{transform:translateX(0) scale(1) rotateY(0) rotate(0)}
  100%{transform:translateX(0) scale(1) rotateY(0) rotate(0)}
}
@keyframes story-wire-build{0%,35%{opacity:1;transform:translateY(-18px)}48%,100%{opacity:0;transform:translateY(0)}}
@keyframes story-finish-build{0%,36%{opacity:0;transform:translateY(18px)}52%,100%{opacity:1;transform:translateY(0)}}
@keyframes story-phone-build{0%,60%{opacity:0;transform:translateX(70px) translateY(35px) rotate(8deg) scale(.9)}100%{opacity:1;transform:translate(0) rotate(0) scale(1)}}
@keyframes story-halo-build{0%{transform:scale(.85) rotate(0)}100%{transform:scale(1.1) rotate(30deg)}}
@keyframes story-meter-build{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}
@keyframes story-step-reveal{0%{opacity:.35;translate:0 16px}100%{opacity:1;translate:0 0}}
@keyframes story-canvas-reveal{0%{opacity:.5;translate:0 22px}100%{opacity:1;translate:0 0}}
@media(max-width:760px){
  .story-steps{grid-template-columns:1fr;gap:8px;margin:16px 0 10px}
  .story-steps li{padding-top:9px}
  .story-step{display:flex;align-items:baseline;gap:10px}
  .story-step b{font-size:12px}
  .story-steps p{font-size:10px;margin:4px 0 0 25px;line-height:1.55}
  .story-sticky{height:auto!important;min-height:0!important;max-height:none!important;padding-block:48px!important;gap:18px!important}
  .build-story.is-scroll-story{height:auto!important}
}
@media(prefers-reduced-motion:reduce){
  .css-scroll-story .story-window,.css-scroll-story .story-wire,.css-scroll-story .story-finish,.css-scroll-story .story-phone,.css-scroll-story .story-halo,.css-scroll-story .story-meter i,.build-story .story-steps li,.build-story .story-canvas{animation:none!important;animation-timeline:none!important;translate:none!important}
}
@supports (animation-timeline:view()){
  @media(min-width:761px) and (max-height:650px){
    .build-story:not(.is-scroll-story) .story-steps li{animation:story-step-reveal 1ms linear both;animation-timeline:view(block 5% 5%);animation-range:entry 0% cover 42%}
    .build-story:not(.is-scroll-story) .story-canvas{animation:story-canvas-reveal 1ms linear both;animation-timeline:view(block 5% 5%);animation-range:entry 0% cover 55%}
  }
}