/* Yishido motion direction: individual botanical layers, vector routes and quiet reading areas. */
body.motion-studio .studio-root{isolation:isolate;position:relative}
body.motion-studio :is(.pillar-botanical,.living-leaf,.brand-floral-corner){display:none!important}
.studio-flora{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;contain:paint}
.flora-cluster{position:absolute;width:245px;height:290px;bottom:-82px;transform:translateY(var(--flora-drift,0px));transition:transform .2s linear}
.flora-left{left:-130px}
.flora-right{right:-130px;scale:-1 1}
.flora-piece{display:block;position:absolute;transform-origin:10% 94%}
.flora-piece img{display:block;width:100%;height:auto;transform-origin:15% 94%}
.flora-palm{width:68%;bottom:12%;left:0;rotate:-18deg;z-index:1}
.flora-monstera{width:76%;bottom:0;left:12%;rotate:48deg;z-index:2}
.flora-hibiscus{width:39%;bottom:2%;left:34%;rotate:-7deg;z-index:3}
.flora-monstera img{transform-origin:78% 12%}
.flora-hibiscus img{transform-origin:50% 65%}
body.motion-studio .studio-root.motion-active .flora-piece{animation:flora-open 1.35s cubic-bezier(.16,.75,.22,1) var(--leaf-delay) both}
body.motion-studio .studio-root.motion-active .flora-piece img{animation:flora-sway var(--leaf-cycle) ease-in-out calc(var(--leaf-delay) + 1.2s) infinite alternate}
@keyframes flora-open{from{opacity:0;transform:translate(-28px,48px) rotate(24deg) scale(.58)}to{opacity:1;transform:translate(0,0) rotate(0) scale(1)}}
@keyframes flora-sway{0%{transform:rotate(-3deg) skewY(-1deg)}45%{transform:rotate(3deg) skewY(1deg)}100%{transform:rotate(-1deg) skewY(-.5deg)}}
body.motion-studio .story-welcome .flora-cluster{width:210px;height:215px;bottom:20px}
body.motion-studio .story-welcome .flora-left{left:-95px}
body.motion-studio .story-welcome .flora-right{right:-95px}
body.motion-studio .story-welcome .flora-monstera{opacity:.65}
body.motion-studio .story-welcome .flora-hibiscus{width:29%;left:45%}
body.motion-studio .story-welcome .flora-palm{opacity:.8}
body.motion-studio .story-welcome>:not(.studio-flora){position:relative;z-index:1}
body.motion-studio .story-content .flora-cluster{opacity:.8;bottom:-124px}
body.motion-studio .story-content .flora-right{display:none}
body.motion-studio .story-automation .flora-right{top:-132px;bottom:auto;rotate:178deg;right:-150px}
body.motion-studio .story-experience .flora-right{top:-158px;bottom:auto;rotate:176deg}
body.motion-studio :is(#digitalizacion,#contenido,#maps-home,#clientes,#casos)>.container{position:relative;z-index:1}
body.motion-studio #digitalizacion .flora-right{top:-145px;bottom:auto;rotate:172deg}
body.motion-studio #digitalizacion .flora-left{bottom:-155px}
body.motion-studio #contenido .flora-cluster{width:300px;height:330px;opacity:.9;bottom:-130px}
body.motion-studio #contenido .flora-left{left:-175px}
body.motion-studio #contenido .flora-right{right:-180px;top:-155px;bottom:auto;rotate:175deg}
body.motion-studio #demo-whatsapp .studio-flora{z-index:1}
body.motion-studio #demo-whatsapp .flora-cluster{position:sticky;top:calc(100svh - 255px);height:250px;opacity:.55}
body.motion-studio #demo-whatsapp .flora-right{display:none}
body.motion-studio #casos .flora-cluster{width:300px;height:330px;bottom:-115px}
body.motion-studio .studio-route{position:absolute;overflow:visible;pointer-events:none;fill:none;stroke-linecap:round;stroke-linejoin:round;z-index:1;color:#73e9cf}
.route-base{stroke:currentColor;stroke-width:1;opacity:.2}
.route-trace{stroke:currentColor;stroke-width:2.5;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--route-progress,1));transition:stroke-dashoffset .3s linear}
.route-node{fill:currentColor;stroke:currentColor;stroke-width:1;transform-box:fill-box;transform-origin:center;opacity:.9}
.motion-active .route-node{animation:route-beacon 3.3s ease-in-out infinite}
.motion-active .route-node-1{animation-delay:.45s}.motion-active .route-node-2{animation-delay:.9s}.motion-active .route-node-3{animation-delay:1.35s}
@keyframes route-beacon{0%,70%,100%{scale:.75;opacity:.55}30%{scale:1.3;opacity:1}}
.automation-route{left:40%;top:28%;width:15%;height:48%;opacity:.8}
body.motion-studio .experience-route{inset:0 3% auto;width:94%;height:20px;z-index:0}
body.motion-studio .story-touchpoints{padding-top:18px}
body.motion-studio .story-touchpoints li{border-top:0}
body.motion-studio .story-touchpoints i{background:#0a2835;position:relative;z-index:1;width:40px;margin-inline:auto}
body.motion-studio .story-touchpoints li.is-reached i{animation:touchpoint-in .6s cubic-bezier(.2,.7,.2,1) both}
@keyframes touchpoint-in{from{translate:0 9px;scale:.85}to{translate:0 0;scale:1}}
body.motion-studio .experience-dragon-window{overflow:visible}
body.motion-studio .motion-active .experience-dragon{animation:dragon-reveal-studio 7.5s cubic-bezier(.25,.7,.3,1) 1 both}
@keyframes dragon-reveal-studio{0%{translate:-15% 40%;opacity:0;rotate:-5deg}25%,72%{translate:0 0;opacity:1;rotate:0deg}88%{translate:3% 9%;opacity:1;rotate:2deg}100%{translate:0 0;opacity:1;rotate:0deg}}
body.motion-studio .story-production{perspective:900px}
body.motion-studio .motion-active .story-production{animation:studio-photo-in .95s cubic-bezier(.16,.8,.2,1) both}
@keyframes studio-photo-in{from{opacity:.15;translate:20px 28px;rotate:2deg;scale:.93}to{opacity:1;translate:0 0;rotate:0deg;scale:1}}
.studio-camera-focus{position:absolute;width:37%;height:36%;left:28%;top:25%;border:1px solid #ffffffb0;border-radius:12px;pointer-events:none;opacity:0}
.motion-active .studio-camera-focus{animation:camera-focus 2s ease both}
@keyframes camera-focus{0%{opacity:0;scale:1.2}30%,65%{opacity:.8;scale:1}100%{opacity:0;scale:.95}}
body.motion-studio .story-production .story-post-brand,body.motion-studio .story-production .story-publish{transition:opacity .35s,translate .5s cubic-bezier(.2,.7,.2,1)}
body.motion-studio .story-production .story-publish:not(.is-reached){translate:0 12px}
body.motion-studio .story-production .story-post-brand:not(.is-reached){translate:0 -12px}
body.motion-studio .journey-service{perspective:1000px}
body.motion-studio .journey-service.studio-card-arrived .service-art-front{animation:service-image-in .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes service-image-in{from{opacity:.35;transform:scale(1.09) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}}
@media(hover:hover) and (pointer:fine){
 body.motion-studio .journey-service:hover .service-flipper{transform:rotateX(var(--card-tilt-x,0deg)) rotateY(var(--card-tilt-y,0deg)) scale(1.045);transition:transform .18s ease-out}
 body.motion-studio .journey-service:hover .service-copy h3{color:var(--service-color)}
}
body.motion-studio .journey-service:active{scale:.985}
body.motion-studio .content-retention-loop{position:relative}
body.motion-studio .retention-route{inset:auto 4% -24px;width:92%;height:24px;color:#9cf5e5}
body.motion-studio #contenido .content-growth-grid{padding-bottom:24px}
body.motion-studio #contenido.motion-active .content-preview:first-child{animation:editorial-lift 1s cubic-bezier(.2,.7,.2,1) both}
body.motion-studio #contenido.motion-active .content-preview:nth-child(2){animation:editorial-lift 1s cubic-bezier(.2,.7,.2,1) .18s both}
body.motion-studio #contenido.motion-active .content-calendar-item{animation:calendar-arrive .8s ease .35s both}
body.motion-studio #contenido.motion-active .content-calendar-item:nth-child(2){animation-delay:.5s}
body.motion-studio #contenido.motion-active .content-calendar-item:nth-child(3){animation-delay:.65s}
@keyframes editorial-lift{from{translate:0 28px;opacity:.3;scale:.94}to{translate:0 0;opacity:1;scale:1}}
@keyframes calendar-arrive{from{translate:0 10px;opacity:.2}to{translate:0 0;opacity:1}}
body.motion-studio .studio-map{position:relative;grid-column:2;grid-row:1 / 3;height:380px;overflow:hidden;border-radius:18px}
body.motion-studio .studio-map .maps-editorial-art{height:100%;width:100%;object-fit:contain}
body.motion-studio .map-route{inset:0;width:100%;height:100%;color:#9cf5e5}
body.motion-studio #maps-home.motion-active .studio-map{animation:editorial-lift .9s ease both}
body.motion-studio #maps-home.motion-active .maps-pin-large{animation:map-pin-arrive 1.15s cubic-bezier(.22,.7,.25,1) .35s both}
@keyframes map-pin-arrive{0%{translate:0 -20px;scale:.75;opacity:0}65%{translate:0 3px;scale:1.05;opacity:1}100%{translate:0 0;scale:1;opacity:1}}
body.motion-studio #maps-home .maps-quick-list>span{transition:translate .45s ease,opacity .45s}
body.motion-studio #maps-home.motion-active .maps-quick-list>span{animation:calendar-arrive .7s ease .55s both}
body.motion-studio #maps-home.motion-active .maps-quick-list>span:nth-child(2){animation-delay:.7s}
body.motion-studio #maps-home.motion-active .maps-quick-list>span:nth-child(3){animation-delay:.85s}
body.motion-studio #clientes.motion-active .client-tile{animation:editorial-lift .8s ease both}
@media(max-width:1000px) and (min-width:761px){.automation-route{left:41%;width:14%;opacity:.6}body.motion-studio .studio-map{height:300px}}
@media(max-width:760px){
 .flora-cluster{width:175px;height:220px;bottom:-96px}
 .flora-left{left:-113px}.flora-right{right:-113px}
 body.motion-studio .story-welcome .flora-cluster{width:155px;height:190px;bottom:-7px}
 body.motion-studio .story-welcome .flora-left{left:-102px}body.motion-studio .story-welcome .flora-right{right:-102px}
 body.motion-studio .story-automation .flora-left{top:20px;bottom:auto;left:-121px;rotate:8deg}
 body.motion-studio .story-automation .flora-right{top:-80px;right:-130px}
 body.motion-studio .story-content .flora-cluster{bottom:-143px;left:-125px}
 body.motion-studio .story-experience .flora-left{top:35px;bottom:auto;left:-127px}
 body.motion-studio .story-experience .flora-right{top:-117px;right:-126px}
 body.motion-studio .automation-route{left:44%;top:18px;width:50%;height:208px;opacity:.6;z-index:0}
 body.motion-studio .story-touchpoints{padding-top:15px}
 body.motion-studio .experience-route{height:14px}
 body.motion-studio .story-customer{top:388px}
 body.motion-studio .studio-map{grid-column:1;grid-row:2;height:260px}
 body.motion-studio .studio-map .maps-editorial-art{height:260px}
 body.motion-studio #digitalizacion .flora-cluster{width:155px;height:190px;opacity:.75}
 body.motion-studio #digitalizacion .flora-right{top:-110px;right:-98px}
 body.motion-studio #digitalizacion .flora-left{bottom:-130px;left:-95px}
 body.motion-studio #contenido .flora-cluster{width:185px;height:230px;bottom:-122px;opacity:.7}
 body.motion-studio #contenido .flora-left{left:-139px}
 body.motion-studio #contenido .flora-right{right:-138px;top:-153px}
 body.motion-studio #demo-whatsapp .flora-cluster{width:155px;height:180px;left:-112px;opacity:.45}
 body.motion-studio #casos .flora-cluster{width:200px;height:240px;bottom:-125px}
 body.motion-studio #casos .flora-left{left:-135px}body.motion-studio #casos .flora-right{right:-135px}
 body.motion-studio .retention-route{bottom:-18px;height:18px}
}
@media(prefers-reduced-motion:reduce){
 body.motion-studio .studio-root *,body.motion-studio .journey-service *{animation:none!important;transition:none!important}
 body.motion-studio .flora-cluster{transform:none}
 body.motion-studio .route-trace{stroke-dashoffset:0}
 body.motion-studio .studio-camera-focus{display:none}
}
body.motion-studio.motion-paused .studio-root *,body.motion-studio.motion-paused .journey-service *{animation-play-state:paused!important;transition:none!important}
body.motion-studio.motion-paused .flora-cluster{transform:none}
body.motion-studio.motion-paused .route-trace{stroke-dashoffset:0}