/* Jumabeda · motion layer. Loaded after style.css and review.css; only enhances. */

/* ---------- Cross-document page transitions ---------- */
@view-transition{navigation:auto}
.header{view-transition-name:site-header}
::view-transition-old(root){animation:.38s cubic-bezier(.7,0,.84,0) both vt-out}
::view-transition-new(root){animation:.75s cubic-bezier(.16,1,.3,1) both vt-in}
@keyframes vt-out{to{opacity:0;transform:translate3d(0,-24px,0)}}
@keyframes vt-in{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0)}}

/* ---------- Reveals ---------- */
.motion .rv{opacity:0;transform:translate3d(0,42px,0);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform 1.15s cubic-bezier(.16,1,.3,1);transition-delay:var(--d,0ms)}
.motion .rv.in{opacity:1;transform:none}
.ln{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.split-rv .ln-i,.hero h1[data-split] .ln-i{display:block;transform:translate3d(0,112%,0) rotate(2.5deg);transform-origin:0 0;transition:transform 1.25s cubic-bezier(.16,1,.3,1) calc(var(--i)*110ms)}
.split-rv.in .ln-i,.hero h1[data-split].in .ln-i{transform:none}
.hero h1[data-split]{animation:none}
.responsibility h2>.ln{color:inherit}.responsibility h2 .ln-i>span{color:#ec6e5e}
.hero h1[data-split] .ln-i{transition-duration:1.5s;transition-delay:calc(var(--i)*160ms + 150ms)}
.motion .wipe{clip-path:inset(100% 0 0 0);transition:clip-path 1.4s cubic-bezier(.77,0,.18,1) var(--d,0ms)}
.motion .wipe.in{clip-path:inset(0)}
.motion .wipe img{transform:scale(1.18);transition:transform 1.9s cubic-bezier(.16,1,.3,1)}
.motion .wipe.in img{transform:none}
.motion .eyebrow .cross{display:inline-block;transition:transform 1.3s cubic-bezier(.16,1,.3,1) var(--d,0ms)}
.motion .eyebrow.rv:not(.in) .cross{transform:rotate(-180deg) scale(.4)}
.motion .hero .red-period{display:inline-block;animation:caret 1.05s steps(1) infinite}
@keyframes caret{50%{opacity:0}}

/* ---------- Hero: topography + surveyor reticle ---------- */
.hero-picture{will-change:transform;transform-origin:50% 100%}
.topo{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:0;animation:topo-in 2.6s .5s cubic-bezier(.16,1,.3,1) forwards;-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.3),#000 62%);mask-image:linear-gradient(90deg,rgba(0,0,0,.3),#000 62%)}
@keyframes topo-in{to{opacity:.85}}
.survey{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .45s;z-index:2;color:var(--paper)}
.survey.on{opacity:1}
.survey-h,.survey-v{position:absolute;top:0;left:0;will-change:transform}
.survey-h{right:0;height:1px;transform:translate3d(0,var(--y),0);background:linear-gradient(90deg,transparent,#ffffff3d 18%,#ffffff3d 82%,transparent)}
.survey-v{bottom:0;width:1px;transform:translate3d(var(--x),0,0);background:linear-gradient(180deg,transparent,#ffffff3d 18%,#ffffff3d 82%,transparent)}
.survey-label{position:absolute;top:0;left:0;transform:translate3d(calc(var(--x) + 22px),calc(var(--y) + 22px),0);display:flex;flex-direction:column;gap:3px;padding:9px 12px;font-size:9px;line-height:1.3;letter-spacing:.1em;white-space:nowrap;font-variant-numeric:tabular-nums;background:#0b1a1fa6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-left:2px solid var(--red)}
.survey.flip .survey-label{transform:translate3d(calc(var(--x) - 100% - 22px),calc(var(--y) + 22px),0)}
.survey-label b{font-weight:600}
.survey-label i{font-style:normal;color:#ff8f86}

/* ---------- Scrollytelling: del plano a la obra ---------- */
.story{position:relative;height:440vh;background:var(--dark);color:var(--paper)}
.story-sticky{position:sticky;top:var(--hh,0px);height:calc(100vh - var(--hh,0px));height:calc(100svh - var(--hh,0px));overflow:hidden}
.story-sticky:before{content:'';position:absolute;inset:0;background:radial-gradient(60% 70% at 72% 55%,#ffffff0d,transparent 70%);pointer-events:none}
.story-grid{height:100%;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:6%;align-items:center;position:relative}
.story-text .eyebrow{color:#d4dbd6}
.story-steps{display:grid}
.story-step{grid-area:1/1;visibility:hidden;transition:visibility 0s .6s}
.story-step.is-on{visibility:visible;transition-delay:0s}
.story-step>*{opacity:0;transform:translate3d(0,34px,0);transition:opacity .45s,transform .8s cubic-bezier(.16,1,.3,1)}
.story-step.is-on>*{opacity:1;transform:none}
.story-step.is-on>:nth-child(2){transition-delay:.06s}.story-step.is-on>:nth-child(3){transition-delay:.12s}.story-step.is-on>:nth-child(4){transition-delay:.18s}
.story-kicker{display:block;font-size:10px;letter-spacing:.14em;font-weight:600;color:#c4ccc7}
.story-kicker b{color:var(--red);font-weight:600}
.story-step h3{font-size:clamp(42px,4.6vw,78px);line-height:.98;letter-spacing:-.06em;margin:24px 0 26px}
.story-step p{max-width:430px;color:#c3cbc6;font-size:15px;line-height:1.75}
.story-step .text-link{margin-top:28px;border-color:#ffffff60}
.story-rail{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #ffffff26}
.story-rail li{position:relative}
.story-rail li:before{content:'';position:absolute;top:-1px;left:0;height:1px;width:100%;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.story-rail li.is-on:before,.story-rail li.is-done:before{transform:none}
.story-rail button{all:unset;cursor:pointer;display:flex;gap:8px;padding:14px 8px 0 0;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#ffffff73;transition:color .3s}
.story-rail button:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.story-rail button span{color:var(--red)}
.story-rail li.is-on button,.story-rail button:hover{color:var(--paper)}
.story-stage{position:relative;height:min(74vh,640px);height:min(74svh,640px);display:flex;flex-direction:column}
.story-hud{display:flex;justify-content:space-between;gap:20px;font-size:9px;letter-spacing:.14em;font-weight:600;color:#d4dbd6;font-variant-numeric:tabular-nums;padding-bottom:12px;border-bottom:1px solid #ffffff1f}
.hud-cota{color:#ff8f86}
.story-svg{flex:1;min-height:0;width:100%;color:var(--paper);overflow:visible}
.story-bar{height:1px;background:#ffffff1f}
.story-bar i{display:block;height:100%;background:var(--red);transform:scaleX(0);transform-origin:left}

/* SVG pieces: every [data-k] receives --k (0→1) from scroll */
.story-svg *{transform-box:fill-box}
.s-fade{opacity:calc(var(--k,0) * (1 - var(--k2,0)))}
.s-draw{stroke:currentColor;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--k,0));fill:none;vector-effect:non-scaling-stroke}
.s-strata{stroke-opacity:.22}
.s-groundline{stroke-width:1.6}
.s-axis{stroke-opacity:.32}
.s-dim{stroke-opacity:.6}
.s-ghost{stroke:var(--red);stroke-width:1.4}
.s-pit-line{stroke-opacity:.75;stroke-width:1.3}
.s-crane{stroke-opacity:.8;stroke-width:1.1}
.s-hook{stroke-opacity:.6}
.s-txt{font:600 8.5px var(--body);letter-spacing:.14em;fill:currentColor;fill-opacity:.7}
.s-txt-strong{fill-opacity:1;font-size:9px}
.s-stake{fill:var(--red)}
.s-pit{fill:var(--dark);transform-origin:top;transform:scaleY(var(--k,0))}
.s-grow-y{transform-origin:bottom;transform:scaleY(calc(var(--k,0) * (1 - var(--k2,0))))}
.s-grow-x{transform-origin:left;transform:scaleX(var(--k,0))}
.s-solid{fill:currentColor}
.s-solid-red{fill:var(--red)}
.s-hole{fill:var(--dark)}
.s-cab{fill:#ffffff14;stroke:currentColor;stroke-width:1.2}
.s-arm-line{stroke:currentColor;stroke-width:1.5;fill:none}
.s-arm .s-arm-line{stroke:var(--red);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.s-arm{transform-box:view-box;transform-origin:516px 322px;transform:rotate(calc(sin(var(--k,0) * 18.85rad) * 11deg))}
.s-fill{fill:currentColor;fill-opacity:.14;stroke:currentColor;stroke-opacity:.55}
.s-glass{fill:currentColor;fill-opacity:calc(var(--k,0) * .13)}
.s-glass-red{fill:var(--red);fill-opacity:var(--k,0)}
.s-loop{transform-origin:center;animation:spin 9s linear infinite}
.s-ring{stroke:var(--red);stroke-width:1.5}
.s-ring-arrow{stroke:var(--red);stroke-width:1.5;fill:none}
.s-particle{fill:var(--red)}
.s-canopy{fill:currentColor;fill-opacity:.16;stroke:currentColor;stroke-opacity:.7}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Ticker ---------- */
.ticker{overflow:hidden;padding:46px 0 40px;border-top:1px solid var(--line);background:var(--paper)}
.ticker-row{white-space:nowrap;overflow:hidden}
.ticker-track{display:inline-flex;align-items:center;font-family:var(--font);font-size:clamp(46px,8.2vw,132px);line-height:1.08;letter-spacing:-.055em;font-weight:500;will-change:transform}
.ticker-track>*{margin-right:.32em}
.ticker-track i{font-style:normal;font-weight:300;color:var(--red)}
.ticker-outline .ticker-track{color:transparent;-webkit-text-stroke:1px #17252c80}
.ticker-outline .ticker-track i{-webkit-text-stroke:0;color:var(--red)}

/* ---------- Seals ---------- */
.seal svg{width:100%;height:100%;overflow:visible}
.seal text{font:600 8.4px var(--body);letter-spacing:.1em;fill:currentColor}
.seal .seal-center{font:500 23px var(--font);letter-spacing:-.05em}
.seal-ring{fill:none;stroke:currentColor;stroke-opacity:.22}
.seal-spin{transform-box:view-box;transform-origin:60px 60px}
.motion .stat-note .technical-cross{display:none}
.seal-stats{width:104px;height:104px;color:var(--ink);margin-bottom:14px}
.seal-stats .seal-center{fill:var(--red)}
.seal-iso{position:absolute;top:34px;right:42px;width:118px;height:118px;color:var(--paper);z-index:1}
.seal-iso .seal-center{fill:var(--red)}

/* ---------- CTA fill + misc ---------- */
.cta-fill{color:transparent;background:linear-gradient(90deg,var(--paper) var(--fill,0%),#ffffff59 calc(var(--fill,0%) + 8%));-webkit-background-clip:text;background-clip:text}
.cta-link .cta-arrow svg{transition:transform .5s cubic-bezier(.16,1,.3,1)}
.cta-link:hover .cta-arrow svg{transform:rotate(45deg)}
.reading-progress{height:3px;background:repeating-linear-gradient(90deg,var(--red) 0 12px,#ff8f86 12px 13px)}
.motion .service-photo.is-active{animation:svc-wipe 1s cubic-bezier(.77,0,.18,1) both}
@keyframes svc-wipe{from{clip-path:inset(0 0 0 100%);transform:scale(1.08)}to{clip-path:inset(0);transform:none}}
.visual-index{position:absolute;top:22px;left:22px;z-index:2;font-size:10px;letter-spacing:.14em;font-weight:600;color:var(--paper);font-variant-numeric:tabular-nums}
.mag{transition:translate .55s cubic-bezier(.2,.9,.25,1),background .25s,color .25s,border-color .25s}

/* ---------- Cursor ---------- */
.has-cursor,.has-cursor *{cursor:none!important}
.has-cursor input,.has-cursor textarea,.has-cursor select{cursor:auto!important}
.cursor{position:fixed;inset:0;pointer-events:none;z-index:400;opacity:0;transition:opacity .3s}
.cursor.on{opacity:1}
.cursor.is-text{opacity:0}
.cursor-dot,.cursor-ring{position:absolute;top:0;left:0;width:0;height:0;will-change:transform}
.cursor-dot:before,.cursor-dot:after{content:'';position:absolute;background:var(--red);transition:rotate .35s}
.cursor-dot:before{width:13px;height:1.5px;left:-6.5px;top:-.75px}
.cursor-dot:after{width:1.5px;height:13px;left:-.75px;top:-6.5px}
.is-hover .cursor-dot:before,.is-hover .cursor-dot:after{rotate:45deg}
.cursor-ring:before{content:'';position:absolute;width:40px;height:40px;left:-20px;top:-20px;border:1px solid #17252c4d;border-radius:50%;transition:transform .45s cubic-bezier(.16,1,.3,1),background .3s,border-color .3s}
.on-dark .cursor-ring:before{border-color:#ffffff59}
.is-hover .cursor-ring:before{transform:scale(1.45);border-color:var(--red);background:#ec44381a}
.is-card .cursor-ring:before{transform:scale(2.2);background:var(--red);border-color:var(--red)}
.is-card .cursor-dot{opacity:0}
.is-down .cursor-ring:before{transform:scale(.75)}
.cursor-ring em{position:absolute;left:0;top:0;transform:translate(-50%,-50%);font:600 10px var(--body);letter-spacing:.12em;text-transform:uppercase;font-style:normal;color:#fff;opacity:0;transition:opacity .25s}
.is-card .cursor-ring em{opacity:1}

/* ---------- Responsive ---------- */
@media (max-width:1200px){.seal-iso{width:96px;height:96px;right:36px}}
@media (max-width:960px){
 .story{height:400vh}
 .story-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:18px;padding:20px 0 26px}
 .story-stage{order:-1;height:100%;min-height:0}
 .story-text .eyebrow{display:none}
 .story-step h3{font-size:clamp(30px,7.6vw,48px);margin:12px 0 12px}
 .story-step p{font-size:13px;line-height:1.6}
 .story-step .text-link{margin-top:14px;padding:8px 0}
 .story-rail{margin-top:20px}
 .story-rail button{font-size:8px;letter-spacing:.06em;gap:5px;padding-top:10px}
 .seal-iso{display:none}
 .seal-stats{width:84px;height:84px}
}
@media (max-width:640px){
 .story-rail button{flex-direction:column;gap:2px}
 .story-hud{font-size:7.5px;letter-spacing:.08em}
 .ticker{padding:30px 0 26px}
 .story-step .text-link{display:none}
 .has-mobile-contact .story-grid{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
}

@media (prefers-reduced-motion:reduce){
 @view-transition{navigation:none}
 .topo{opacity:.6}
 .story-step>*{transition:none}
}
@media print{.topo,.survey,.cursor,.ticker,.story,.seal{display:none!important}}