/* Atavux: tactile comparison and product-development sequence. */
.operation-editorial{padding-block:120px 110px}
.transformation-heading,.process-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:60px;margin-bottom:48px}
.transformation-heading h2,.process-heading h2{font:400 72px/.98 var(--serif);letter-spacing:-.035em;margin:0;max-width:700px}
.transformation-heading h2 em,.process-heading h2 em{font-weight:400;color:var(--accent)}
.transformation-heading>div{max-width:330px;padding-bottom:4px}.transformation-heading p,.process-heading>p{font-size:15px;line-height:1.85;color:var(--muted);margin:0}
.comparison-presets{display:flex;align-items:center;gap:9px;margin-top:24px}.comparison-presets button{display:flex;align-items:center;gap:22px;padding:10px 15px;border:1px solid #cec5bb;border-radius:999px;background:transparent;font-size:12px;cursor:pointer;transition:background .25s,color .25s,border-color .25s}.comparison-presets button:last-child{border-color:#a49acb;color:var(--accent-dark)}.comparison-presets button:hover,.comparison-presets button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}.comparison-presets span{font-size:17px;line-height:1}
.editorial-stage{height:620px;border:0;border-radius:14px;background:#eee7dc;box-shadow:0 22px 70px -36px #33281930;overflow:hidden;isolation:isolate}.editorial-stage .editorial-side{position:absolute;inset:0;overflow:hidden}.editorial-stage .editorial-side>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 53%;user-select:none;pointer-events:none}.editorial-stage .editorial-side:after{content:"";position:absolute;inset:50% 0 0;background:linear-gradient(transparent,#f5f0e7ec);pointer-events:none}.editorial-stage .manual{background:#f1eadd;clip-path:inset(0 calc(100% - var(--compare)) 0 0)}.editorial-stage .connected{background:#eee7de}.scene-label{position:absolute;top:28px;left:30px;z-index:2;display:flex;align-items:center;gap:9px;padding:10px 14px;border:1px solid #cec6bc;background:#f8f5eeda;border-radius:99px;font-size:12px;line-height:1.2;color:var(--ink);white-space:nowrap}.scene-indicator{width:6px;height:6px;border-radius:50%;background:#827566}.connected .scene-indicator{background:var(--accent)}.connected .scene-label{left:auto;right:30px;border-color:#c1b7dc;color:var(--accent-dark)}.scene-description{position:absolute;bottom:31px;left:33px;z-index:2}.scene-description>span{font:400 37px/1.05 var(--serif);letter-spacing:-.02em}.scene-description p{font-size:12px;margin:10px 0 0;color:#5b5148}.connected .scene-description{left:auto;right:33px;text-align:right}.connected .scene-description>span{color:var(--accent-dark)}.editorial-stage .compare-divider{width:1px;background:#ffffffd9;box-shadow:0 0 0 1px #51406d15;z-index:4}.editorial-stage .compare-divider>span{width:64px;height:64px;border:1px solid #d1c6e6;background:var(--paper-soft);color:var(--accent);box-shadow:0 8px 28px #26154225}.editorial-stage .compare-divider svg{width:32px;height:24px;stroke-width:1.4}.editorial-stage input{z-index:5;touch-action:pan-y}.editorial-stage:focus-within{outline:none}.editorial-stage:focus-within .compare-divider>span{outline:2px solid var(--accent);outline-offset:-5px}.drag-hint{position:absolute;top:calc(50% + 49px);left:var(--compare);translate:-50% 0;z-index:4;background:#f8f5eef0;border:1px solid #d9d1c6;border-radius:99px;padding:8px 12px;color:#554b40;font-size:10px;white-space:nowrap;pointer-events:none;transition:opacity .35s}.comparison-used .drag-hint{opacity:0}.comparison-snap .manual{transition:clip-path .7s var(--motion-ease)}.comparison-snap .compare-divider{transition:left .7s var(--motion-ease)}.comparison-snap .drag-hint{transition:left .7s var(--motion-ease),opacity .3s}
.transformation-footnote{display:flex;justify-content:space-between;gap:25px;margin-top:20px;color:var(--muted);font-size:11px;line-height:1.6}.transformation-footnote>span:last-child{font-style:italic}
.process-editorial{display:block;padding-block:80px 125px}.process-heading{align-items:flex-end}.process-heading>p{max-width:350px;padding-bottom:4px}.process-board{display:grid;grid-template-columns:320px minmax(0,1fr);gap:0;border:1px solid #d9d1c7;border-radius:14px;background:#f8f4ed;overflow:hidden;box-shadow:0 25px 70px -45px #33281920}.process-navigation{position:relative;padding:24px 25px 25px;background:#f7f2ea;display:flex;flex-direction:column}.process-steps{border:0;flex:1}.process-item{position:relative;padding:17px 0 20px;border-bottom:1px solid #e0d8cc;transition:background .3s}.process-item:last-child{border-bottom:0}.process-step{display:grid;grid-template-columns:25px 34px 1fr 16px;align-items:center;gap:11px;padding:8px 0;border:0;width:100%;background:none;cursor:pointer;text-align:left;transition:color .25s}.process-step .step-number{font:400 11px var(--sans);color:#817365;font-variant-numeric:tabular-nums}.process-step .step-title{font:500 17px/1.2 var(--sans);color:var(--ink);width:auto;height:auto;border:0;background:none;border-radius:0;display:block}.process-step .step-icon{width:27px;height:27px;fill:none;stroke:#9a8b7c;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s}.process-step .step-arrow{width:16px;height:16px;fill:none;stroke:var(--accent);stroke-width:1.4;opacity:0;transform:translateX(-4px);transition:opacity .3s,transform .3s}.process-step[aria-expanded=true] .step-title{color:var(--accent-dark)}.process-step[aria-expanded=true] .step-icon{stroke:var(--accent)}.process-step[aria-expanded=true] .step-arrow{opacity:1;transform:none}.process-step:hover .step-title{color:var(--accent)}.process-step:focus-visible{outline:1px solid #a89ad2;outline-offset:6px;border-radius:3px}.process-item>p{font-size:12px;line-height:1.75;color:#6a5c50;margin:5px 0 0 70px;padding-right:10px;max-width:205px}.process-item.is-playing{background:none;animation:none}.step-progress{position:absolute;bottom:0;left:70px;right:0;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left}.process-item.is-playing .step-progress{transform:scaleX(var(--process-fraction,0))}.process-playback{display:flex;justify-content:space-between;align-items:center;gap:15px;border-top:1px solid #ddd4c8;padding-top:22px;margin-top:22px}.process-autoplay{display:flex;align-items:center;gap:9px;justify-self:auto;background:none;border:0;padding:0;font-size:11px;cursor:pointer;min-height:24px;color:var(--accent-dark);white-space:nowrap}.process-autoplay>svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.2}.process-autoplay[aria-pressed=true]>svg{fill:currentColor}.process-count{font-size:10px;color:#7c6f63;font-variant-numeric:tabular-nums;white-space:nowrap}
.process-scene{height:560px;min-width:0;border:0;border-left:1px solid #d9d1c7;border-radius:0;background:#eee7dd;position:relative;overflow:hidden}.process-scene .process-drawing{position:relative;width:100%;height:100%}.process-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%;transition:opacity .85s var(--motion-ease),transform 1.3s var(--motion-ease),filter .9s;pointer-events:none;user-select:none}.process-scene .process-drawing:after{content:"";position:absolute;inset:62% 0 0;background:linear-gradient(transparent,#f7f2eaf2);pointer-events:none}.process-scene-header{position:absolute;top:27px;left:30px;right:30px;display:flex;align-items:start;justify-content:space-between;gap:20px;z-index:2}.process-scene-phase{font-size:12px;color:#4e4339;padding:9px 12px;border:1px solid #d6cbbe;border-radius:99px;background:#f8f4ecdd;line-height:1.3}.process-scene-number{font:400 42px/.9 var(--serif);color:#574bc887;letter-spacing:-.04em}.scene-corners{position:absolute;inset:20px;pointer-events:none;z-index:2}.scene-corners i{position:absolute;width:10px;height:10px;border-color:#998a78;border-style:solid;border-width:0}.scene-corners i:first-child{left:0;top:0;border-left-width:1px;border-top-width:1px}.scene-corners i:nth-child(2){right:0;top:0;border-right-width:1px;border-top-width:1px}.scene-corners i:nth-child(3){left:0;bottom:0;border-left-width:1px;border-bottom-width:1px}.scene-corners i:last-child{right:0;bottom:0;border-right-width:1px;border-bottom-width:1px}.process-annotation{position:absolute;left:61%;top:52%;display:flex;align-items:center;gap:10px;z-index:2;transition:top .9s var(--motion-ease),left .9s var(--motion-ease)}.annotation-point{position:relative;display:block;width:9px;height:9px;border:1px solid #f8f4ec;background:var(--accent);border-radius:50%;box-shadow:0 0 0 4px #f8f4ecb3}.annotation-label{white-space:nowrap;font-size:10px;line-height:1;background:var(--paper-soft);border:1px solid #c7b9ac;border-radius:5px;padding:9px 11px;box-shadow:0 4px 10px #392d2210;color:#504237}.process-drawing[data-step="1"] .process-annotation{left:47%;top:43%}.process-drawing[data-step="2"] .process-annotation{left:37%;top:56%}.process-drawing[data-step="3"] .process-annotation{left:52%;top:48%}.process-scene-caption{position:absolute;left:32px;right:32px;bottom:30px;z-index:3;border-top:1px solid #c1b5a578;padding-top:19px;display:flex;flex-direction:column;gap:9px}.process-scene .drawing-caption{position:static;background:none;padding:0;color:var(--ink);font:400 24px/1.15 var(--serif);min-height:28px;max-width:90%;letter-spacing:-.01em}.process-image-note{font-size:10px;color:#766858}
@media(max-width:1100px){.transformation-heading h2,.process-heading h2{font-size:64px}.editorial-stage{height:550px}.process-board{grid-template-columns:285px minmax(0,1fr)}.process-navigation{padding-inline:20px}.process-scene{height:550px}.process-annotation{left:50%}.process-heading>p{max-width:310px}.process-step{gap:8px;grid-template-columns:22px 30px 1fr 14px}.process-item>p{margin-left:60px}.step-progress{left:60px}}
@media(max-width:760px){.operation-editorial{padding-block:75px}.transformation-heading,.process-heading{display:block;margin-bottom:30px}.transformation-heading h2,.process-heading h2{font-size:54px;line-height:1.02}.transformation-heading>div{margin-top:25px;max-width:100%}.transformation-heading p,.process-heading>p{font-size:14px;line-height:1.8}.comparison-presets{margin-top:20px;gap:9px}.comparison-presets button{padding:9px 15px;font-size:11px;gap:20px}.editorial-stage{height:500px;border-radius:10px}.editorial-stage .editorial-side>img{object-fit:cover;object-position:50% 52%}.scene-label{left:15px;top:17px;padding:9px 11px;font-size:10px;gap:7px}.connected .scene-label{right:15px}.scene-description{left:20px;bottom:27px;max-width:230px}.connected .scene-description{right:20px;max-width:210px}.scene-description>span{font-size:29px}.scene-description p{font-size:10px;line-height:1.6;max-width:200px;margin-top:8px}.editorial-stage .compare-divider>span{width:52px;height:52px}.editorial-stage .compare-divider svg{width:27px;height:22px}.drag-hint{font-size:9px;top:calc(50% + 39px);padding:7px 10px}.transformation-footnote{font-size:10px;gap:15px;align-items:start;margin-top:16px}.transformation-footnote>span{max-width:210px}.transformation-footnote>span:last-child{max-width:100px;text-align:right}.process-editorial{padding-block:40px 80px}.process-heading>p{margin-top:25px;max-width:100%}.process-board{display:flex;flex-direction:column;border-radius:10px}.process-navigation{padding:14px 20px 20px}.process-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;border:0}.process-item{padding:13px 0 14px;min-width:0;border-bottom:1px solid #dcd2c4}.process-item:last-child{border-bottom:1px solid #dcd2c4}.process-step{display:flex;flex-direction:column;align-items:start;gap:10px;padding:0;min-height:91px}.process-step .step-number{font-size:9px}.process-step .step-icon{width:24px;height:24px}.process-step .step-title{font-size:11px;line-height:1.25;max-width:70px}.process-step .step-arrow{display:none}.process-item>p{display:none!important}.step-progress{left:0}.process-playback{margin-top:16px;padding-top:0;border:0}.process-autoplay{font-size:11px;gap:7px}.process-count{font-size:10px}.process-scene{width:100%;height:440px;border-left:0;border-top:1px solid #d9d1c7}.process-scene-header{top:23px;left:23px;right:23px;gap:15px}.process-scene-phase{font-size:10px;padding:8px 10px;max-width:250px}.process-scene-number{font-size:34px}.scene-corners{inset:15px}.process-photo{object-position:50% 50%}.process-scene-caption{left:24px;right:24px;bottom:24px;padding-top:15px;gap:9px}.process-scene .drawing-caption{font-size:24px;line-height:1.2;max-width:100%;min-height:58px}.process-image-note{font-size:9px}.annotation-label{font-size:9px;padding:8px 9px}.process-annotation{left:48%;top:48%;gap:8px}.process-drawing[data-step="1"] .process-annotation{left:32%;top:43%}.process-drawing[data-step="2"] .process-annotation{left:29%;top:52%}.process-drawing[data-step="3"] .process-annotation{left:32%;top:45%}}
@media(prefers-reduced-motion:reduce){.comparison-snap .manual,.comparison-snap .compare-divider,.process-photo,.process-annotation{transition:none}.process-scene .drawing-caption{min-height:58px}}

.comparison-presets svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.2;fill:none}

/* Captions remain readable while the artwork itself is clipped by the slider. */
.editorial-stage>.scene-description{z-index:3;pointer-events:none;transition:opacity .3s;max-width:calc(50% - 65px)}.editorial-stage>.connected-description{left:auto;right:33px;text-align:right}.editorial-stage>.connected-description>span{color:var(--accent-dark)}.editorial-stage.only-connected>.manual-description,.editorial-stage.only-manual>.connected-description{opacity:0}.show-to-top.artwork-in-view .to-top{opacity:0;visibility:hidden;pointer-events:none}
@media(max-width:760px){.editorial-stage>.scene-description{max-width:calc(50% - 25px);bottom:26px}.editorial-stage>.connected-description{right:20px}.editorial-stage>.scene-description>span{font-size:28px;line-height:1.05;display:block;text-wrap:balance}.editorial-stage>.scene-description p{font-size:10px;line-height:1.6}.process-scene .drawing-caption{width:100%;max-width:260px;min-width:0;font-size:25px;line-height:1.15;text-wrap:balance;overflow-wrap:break-word;min-height:58px}}

/* Four predecoded scenes crossfade without changing layout or leaving a blank frame. */
.process-scene .process-photo{opacity:0;transform:translate3d(0,5px,0) scale(1.025);filter:none;transition:opacity 950ms cubic-bezier(.4,0,.2,1),transform 1400ms cubic-bezier(.22,1,.36,1)}.process-scene .process-photo.is-active{opacity:1;transform:translate3d(0,0,0) scale(1)}.process-scene.is-changing .process-photo{will-change:opacity,transform}.process-scene-phase{min-width:245px}.process-scene-number{min-width:42px;text-align:right;font-variant-numeric:tabular-nums}.process-editorial .process-item{height:110px;min-height:110px}.process-editorial .process-item>p{position:absolute;top:57px;left:70px;right:0;margin:0}.process-scene .drawing-caption{min-height:56px}.process-scene .process-scene-caption{gap:8px}.process-annotation{transition:transform 950ms var(--motion-ease);left:50%!important;top:48%!important;transform:translate(20px,15px)}.process-drawing[data-step="1"] .process-annotation{transform:translate(-60px,-30px)}.process-drawing[data-step="2"] .process-annotation{transform:translate(-35px,22px)}.process-drawing[data-step="3"] .process-annotation{transform:translate(0,-5px)}
@media(max-width:1100px){.process-editorial .process-item>p{left:60px}}
@media(max-width:760px){.process-editorial .process-item{height:auto;min-height:0}.process-scene-phase{min-width:0;width:230px;max-width:calc(100% - 50px)}.process-scene-number{min-width:30px}.process-annotation{transform:translate(-50px,10px)}.process-drawing[data-step="1"] .process-annotation{transform:translate(-65px,-25px)}.process-drawing[data-step="2"] .process-annotation{transform:translate(-60px,20px)}.process-drawing[data-step="3"] .process-annotation{transform:translate(-65px,-5px)}}
.reduced-motion .process-photo,.motion-paused .process-photo,.reduced-motion .process-annotation,.motion-paused .process-annotation{transition:none!important}
@media(prefers-reduced-motion:reduce){.process-scene .process-photo,.process-annotation{transition:none!important;transform:none!important}.process-scene.is-changing .process-photo{will-change:auto}}
@media(max-width:760px){.process-photo[data-stage-image="1"]{object-position:22% 50%}.process-photo[data-stage-image="2"]{object-position:35% 50%}}
.process-scene-phase{background:var(--paper-soft)}.process-scene-number{display:grid;place-items:center;width:48px;min-width:48px;height:48px;border:1px solid #cfc3dd;border-radius:8px;background:var(--paper-soft);color:var(--accent-dark);font-size:32px;line-height:1;letter-spacing:-.02em}.process-scene-header{align-items:center}
@media(max-width:760px){.process-scene-number{width:39px;min-width:39px;height:39px;font-size:27px;border-radius:6px}.process-scene-phase{max-width:calc(100% - 54px)}}

/* El Potrero keeps its own black/lime product identity inside Atavux's frame. */
.potrero-process .process-step[aria-expanded=true] .step-title,.potrero-process .process-step:hover .step-title{color:#35520b}.potrero-process .process-step[aria-expanded=true] .step-icon,.potrero-process .process-step[aria-expanded=true] .step-arrow{stroke:#557d16}.potrero-process .process-scene-number{color:#35520b;border-color:#c8d4b2}.potrero-process .annotation-point{background:#8dce16}.potrero-process .annotation-label{color:#314117;border-color:#c4cfb3}.potrero-process .process-photo{object-position:50% 52%}
@media(max-width:760px){.potrero-process .process-scene{background:#f4efe7}.potrero-process .process-photo{top:72px;height:calc(100% - 190px);object-fit:contain;object-position:center!important}.potrero-process .process-annotation{display:none}.potrero-process .process-image-note{max-width:270px;line-height:1.5}}
/* One continuous Atavux paper surface for the complete project story. */
#proyectos{background:var(--paper);background-image:none;border-block:0;padding-bottom:0}
#proyectos:before,#proyectos .project-showcase:before{display:none}
#proyectos #proceso{background:var(--paper);padding-top:70px;padding-bottom:70px}
#proyectos .demo-index{background:var(--paper)}
#proceso .process-board{--process-accent:#557d16;--process-ink:#35520b}
#proceso .process-board[data-project="waygo"]{--process-accent:#3264bd;--process-ink:#254b91}
#proceso .process-board[data-project="urbanstore"]{--process-accent:#b3582e;--process-ink:#914321}
#proceso .process-step[aria-expanded=true] .step-title,#proceso .process-step:hover .step-title{color:var(--process-ink)}
#proceso .process-step[aria-expanded=true] .step-icon,#proceso .process-step[aria-expanded=true] .step-arrow{stroke:var(--process-accent)}
@media(max-width:760px){#proyectos #proceso{padding-top:35px;padding-bottom:45px}}
/* Keep the homepage's outer sections on the same paper, including the closing. */
#site .closing-section{background:var(--paper);border-top-color:var(--line)}