/* Click Experience v3.5.0 — Motion System v1
   Motion is used as hierarchy: ambient -> narrative -> response.
   All effects are progressive enhancement and preserve native scrolling. */
:root{
  --cxs-motion-blue:#27adff;
  --cxs-motion-navy:#00155c;
  --cxs-motion-yellow:#ffbd59;
  --cxs-motion-red:#ff3131;
  --cxs-motion-ease:cubic-bezier(.16,1,.3,1);
  --cxs-motion-soft:cubic-bezier(.22,.75,.2,1);
}

/* ---------- shared motion primitives ---------- */
.cxs-motion-ribbon{
  position:absolute;
  inset:-6% -4%;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  opacity:.72;
  mix-blend-mode:screen;
  contain:paint;
}
.cxs-motion-ribbon svg{width:100%;height:100%;display:block;overflow:visible;transform:translate3d(0,0,0)}
.cxs-motion-ribbon .cxs-ribbon-path{
  fill:none;
  vector-effect:non-scaling-stroke;
  stroke-linecap:round;
  transform-box:fill-box;
  transform-origin:center;
  will-change:transform,opacity,stroke-dashoffset;
}
.cxs-motion-ribbon .is-glow{stroke-width:22;opacity:.11;filter:blur(12px);animation:cxsRibbonFloat 15s ease-in-out infinite alternate}
.cxs-motion-ribbon .is-main{stroke-width:5;opacity:.52;stroke-dasharray:12 9;animation:cxsRibbonFlow 16s linear infinite,cxsRibbonFloat 11s ease-in-out infinite alternate}
.cxs-motion-ribbon .is-fine{stroke-width:1.4;opacity:.72;stroke-dasharray:3 14;animation:cxsRibbonFlow 11s linear infinite reverse,cxsRibbonFloat 18s ease-in-out infinite alternate-reverse}
@keyframes cxsRibbonFlow{to{stroke-dashoffset:-210}}
@keyframes cxsRibbonFloat{from{transform:translate3d(-1.5%,-1.2%,0) scale(1.01)}to{transform:translate3d(1.7%,1.4%,0) scale(1.035)}}

.cxs-motion-ambient{
  position:absolute;
  width:62vw;
  height:62vw;
  max-width:980px;
  max-height:980px;
  border-radius:50%;
  pointer-events:none;
  z-index:0;
  opacity:.36;
  filter:blur(54px);
  background:radial-gradient(circle at 35% 35%,rgba(39,173,255,.48),rgba(16,86,212,.18) 34%,transparent 67%);
  animation:cxsAmbientDrift 18s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes cxsAmbientDrift{from{transform:translate3d(-6%,-4%,0) scale(.95)}to{transform:translate3d(7%,5%,0) scale(1.08)}}

.cxs-motion-accent-target{position:relative}
.cxs-motion-accent-target::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-.13em;
  width:min(100%,5.5em);
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--cxs-motion-yellow),var(--cxs-motion-blue),transparent);
  transform:scaleX(0);
  transform-origin:left center;
  opacity:0;
}
.is-motion-visible .cxs-motion-accent-target::after,
.cxs-motion-accent-target.is-motion-visible::after{
  animation:cxsAccentDraw .82s var(--cxs-motion-ease) .18s forwards;
}
@keyframes cxsAccentDraw{0%{transform:scaleX(0);opacity:0}30%{opacity:1}100%{transform:scaleX(1);opacity:.92}}

.cxs-motion-reveal{
  opacity:0;
  transform:translate3d(0,30px,0);
  clip-path:inset(0 0 12% 0 round 14px);
  transition:opacity .72s ease var(--cxs-motion-delay,0ms),transform .88s var(--cxs-motion-ease) var(--cxs-motion-delay,0ms),clip-path .9s var(--cxs-motion-ease) var(--cxs-motion-delay,0ms);
}
.cxs-motion-reveal.is-motion-visible{opacity:1;transform:none;clip-path:inset(0 round 0)}

/* responsive pointer illumination without moving the actual target */
.cxs-motion-response{
  --cxs-motion-x:50%;
  --cxs-motion-y:50%;
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.cxs-motion-response::after{
  content:"";
  position:absolute;
  inset:-2px;
  z-index:-1;
  border-radius:inherit;
  pointer-events:none;
  opacity:var(--cxs-motion-pointer,0);
  background:radial-gradient(circle at var(--cxs-motion-x) var(--cxs-motion-y),rgba(255,255,255,.23),rgba(39,173,255,.10) 24%,transparent 52%);
  transition:opacity .24s ease;
}

/* ---------- HOME / HERO ---------- */
.cxs-hero--reference{isolation:isolate}
.cxs-hero--reference>.cxs-container{position:relative;z-index:3}
.cxs-hero--reference>.cxs-motion-ribbon{z-index:-1;inset:17% -5% -15%;opacity:.67}
.cxs-hero--reference>.cxs-motion-ambient{z-index:-1;right:-18%;top:8%}
.cxs-hero--reference.cxs-motion-live::after{
  background:
   radial-gradient(circle at calc(68% + (var(--cxs-motion-hero-phase,0) * 5%)) 38%,rgba(39,173,255,.22),transparent 27%),
   radial-gradient(circle at 40% 104%,rgba(26,100,218,.18),transparent 36%),
   linear-gradient(120deg,rgba(0,21,92,.04),rgba(39,173,255,.08),rgba(0,13,61,.18))!important;
  background-size:130% 130%;
  animation:cxsHeroGradient 14s ease-in-out infinite alternate;
}
@keyframes cxsHeroGradient{from{background-position:0% 45%}to{background-position:100% 55%}}
.cxs-hero--reference .cxs-scene-category{transition:text-shadow .4s ease,color .4s ease}
.cxs-hero--reference .cxs-scene.is-active .cxs-scene-category{text-shadow:0 0 20px rgba(39,173,255,.16)}
.cxs-hero--reference .cxs-hero-title>strong{position:relative;width:max-content;max-width:100%;text-shadow:0 0 0 rgba(39,173,255,0);transition:text-shadow .8s ease}
.cxs-hero--reference .cxs-scene.is-active .cxs-hero-title>strong{text-shadow:0 0 28px rgba(39,173,255,.10)}
.cxs-hero--reference .cxs-hero-title>strong::after{
  content:"";
  position:absolute;
  left:.02em;right:8%;bottom:-.13em;
  height:3px;border-radius:999px;
  background:linear-gradient(90deg,var(--cxs-motion-blue),rgba(39,173,255,.28),transparent);
  transform:scaleX(0);transform-origin:left center;opacity:0;
}
.cxs-hero--reference .cxs-scene.is-copy-animating .cxs-hero-title>strong::after{animation:cxsAccentDraw .95s var(--cxs-motion-ease) .34s forwards}
.cxs-hero--reference .cxs-hero-cta{background-image:radial-gradient(circle at var(--cxs-motion-x,50%) var(--cxs-motion-y,50%),rgba(255,255,255,.18),transparent 42%)!important;background-blend-mode:screen}
.cxs-hero--reference .cxs-assistant{position:relative;overflow:hidden}
.cxs-hero--reference .cxs-assistant::before{
  content:"";position:absolute;inset:-35%;pointer-events:none;z-index:0;
  background:linear-gradient(112deg,transparent 39%,rgba(39,173,255,.08) 49%,transparent 59%);
  transform:translateX(-64%) rotate(8deg);animation:cxsAssistantSweep 8s ease-in-out infinite;
}
.cxs-hero--reference .cxs-assistant>*{position:relative;z-index:1}
@keyframes cxsAssistantSweep{0%,52%{transform:translateX(-68%) rotate(8deg);opacity:0}64%{opacity:1}82%,100%{transform:translateX(68%) rotate(8deg);opacity:0}}

/* ---------- HOME / SERVICES ---------- */
.cxs-services.cxs-motion-live{isolation:isolate}
.cxs-services>.cxs-container{position:relative;z-index:2}
.cxs-services>.cxs-motion-ribbon{z-index:0;inset:1% -20% -8% -20%;opacity:.17;mix-blend-mode:multiply;transform:rotate(-5deg)}
.cxs-services .cxs-services-heading h2>span{position:relative;width:max-content;max-width:100%}
.cxs-services .cxs-services-heading h2>span::after{bottom:-.14em;width:72%;background:linear-gradient(90deg,var(--cxs-motion-blue),rgba(39,173,255,.08),transparent)}
.cxs-services .cxs-svc-card.cxs-motion-reveal{transform:translate3d(0,34px,0) scale(.985)}
.cxs-services .cxs-svc-card.cxs-motion-reveal.is-motion-visible{transform:none}
.cxs-services .cxs-svc-index>span{transform-origin:left center;transform:scaleX(.25);transition:transform .72s var(--cxs-motion-ease) calc(var(--cxs-motion-delay,0ms) + 140ms)}
.cxs-services .cxs-svc-card.is-motion-visible .cxs-svc-index>span{transform:scaleX(1)}
@media(hover:hover) and (pointer:fine){
 .cxs-services .cxs-svc-card{transition:transform .38s var(--cxs-motion-ease),box-shadow .38s ease,border-color .3s ease}
 .cxs-services .cxs-svc-card:hover{transform:translateY(-7px)!important;box-shadow:0 22px 54px rgba(15,51,100,.12)}
 .cxs-services .cxs-svc-card:hover .cxs-svc-copy h3{transform:translateX(4px)}
 .cxs-services .cxs-svc-copy h3{transition:transform .35s var(--cxs-motion-ease),color .3s ease}
}

/* ---------- HOME / WHY CLICK ---------- */
.cxs-why.cxs-motion-live{isolation:isolate;--cxs-why-index:0}
.cxs-why>.cxs-container{position:relative;z-index:2}
.cxs-why>.cxs-motion-ambient{left:-24%;top:10%;opacity:.26}
.cxs-why .cxs-why-stage{position:relative;overflow:visible}
.cxs-why .cxs-why-stage::before{
  content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(120deg,rgba(39,173,255,.16),transparent 34%,rgba(255,189,89,.06) 66%,rgba(39,173,255,.12));
  filter:blur(18px);opacity:.7;transform:translate3d(calc((var(--cxs-why-index) - 2) * 6px),0,0);transition:transform .8s var(--cxs-motion-ease);
}
.cxs-why .cxs-why-copy-panel.is-active h3{animation:cxsWhyTitleIn .72s var(--cxs-motion-ease) both}
.cxs-why .cxs-why-copy-panel.is-active p{animation:cxsWhyTextIn .72s var(--cxs-motion-ease) .08s both}
@keyframes cxsWhyTitleIn{from{opacity:0;transform:translate3d(0,24px,0);clip-path:inset(0 0 70% 0)}to{opacity:1;transform:none;clip-path:inset(0)}}
@keyframes cxsWhyTextIn{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
.cxs-why .cxs-why-visual.is-active::after{
  content:"";position:absolute;inset:-18% -30%;z-index:3;pointer-events:none;
  background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.14) 50%,transparent 60%);
  transform:translateX(-75%) rotate(3deg);animation:cxsWhySweep 1.18s var(--cxs-motion-ease) .12s both;
}
@keyframes cxsWhySweep{to{transform:translateX(75%) rotate(3deg)}}
.cxs-why .cxs-why-rail button{transition:transform .32s var(--cxs-motion-ease),background .32s ease,color .32s ease,opacity .32s ease}
.cxs-why .cxs-why-rail button.is-active{transform:translateY(-5px)}

/* ---------- HOME / CLICK ACADEMY ---------- */
.cxs-academy.cxs-motion-live{isolation:isolate}
.cxs-academy>.cxs-container{position:relative;z-index:2}
.cxs-academy>.cxs-motion-ambient{right:-25%;bottom:-35%;opacity:.20}
.cxs-academy .cxs-section-head h2>strong{position:relative;display:inline-block}
.cxs-academy .cxs-course-card.cxs-motion-reveal{transform:translate3d(0,38px,0) scale(.985)}
.cxs-academy .cxs-course-card.cxs-motion-reveal.is-motion-visible{transform:none}
.cxs-academy .cxs-course-card figure img{transition:transform 1.1s var(--cxs-motion-ease),opacity .6s ease,filter .6s ease!important}
.cxs-academy .cxs-course-card.is-motion-visible figure img{transform:translate3d(0,calc((var(--cxs-local-progress,.5) - .5) * -12px),0) scale(1.045)!important}
.cxs-academy .cxs-course-card__copy>*{transition:transform .45s var(--cxs-motion-ease),opacity .45s ease}
@media(hover:hover) and (pointer:fine){
 .cxs-academy .cxs-course-card:hover{transform:translateY(-7px)}
 .cxs-academy .cxs-course-card:hover figure img{opacity:.38!important;transform:scale(1.075)!important}
 .cxs-academy .cxs-course-card:hover .cxs-course-more{transform:translateY(-3px)}
}

/* ---------- NOSOTROS / SCROLL STORY ---------- */
.cxs-about-page{--cxs-about-story-index:0}
.cxs-about-page__hero,.cxs-about-story{isolation:isolate}
.cxs-about-page__hero>.cxs-container,.cxs-about-story>.cxs-container{position:relative;z-index:3}
.cxs-about-page__hero>.cxs-motion-ambient{right:-20%;top:8%;opacity:.28}
.cxs-about-story>.cxs-motion-ribbon{z-index:1;inset:0 -24% 0 -26%;opacity:.32;mix-blend-mode:screen;transform:rotate(7deg)}
.cxs-about-story::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(circle at calc(12% + (var(--cxs-about-story-index) * 15%)) 54%,rgba(39,173,255,.13),transparent 25%);
  transition:background 1s ease;
}
.cxs-about-story__chapter{transition:opacity .45s ease,transform .55s var(--cxs-motion-ease),filter .45s ease!important}
.cxs-about-story__chapter:not(.is-active){filter:saturate(.7)}
.cxs-about-story__chapter.is-active{filter:none;transform:translateX(14px)!important}
.cxs-about-story__chapter.is-active h3{animation:cxsAboutChapter .75s var(--cxs-motion-ease) both}
.cxs-about-story__chapter.is-active p{animation:cxsAboutChapter .75s var(--cxs-motion-ease) .08s both}
@keyframes cxsAboutChapter{from{opacity:.12;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}
.cxs-about-story__progress i{box-shadow:0 0 18px rgba(39,173,255,.32)}
.cxs-about-story__visual.is-active img{animation:cxsAboutImageDrift 7s ease-out both}
@keyframes cxsAboutImageDrift{from{transform:scale(1.06)}to{transform:scale(1.015)}}
.cxs-about-system__route span{position:relative}
.cxs-about-system__route span::after{content:"";position:absolute;left:0;bottom:-9px;width:38%;height:2px;border-radius:99px;background:var(--cxs-motion-blue);transform:scaleX(0);transform-origin:left;transition:transform .52s var(--cxs-motion-ease)}
.cxs-about-system__route.is-motion-visible span::after{transform:scaleX(1)}

/* ---------- mobile/performance tuning ---------- */
@media(max-width:760px){
 .cxs-motion-ribbon{opacity:.36}
 .cxs-motion-ribbon .is-glow{display:none}
 .cxs-motion-ribbon .is-main{stroke-width:3;opacity:.40}
 .cxs-motion-ribbon .is-fine{stroke-width:1;opacity:.50}
 .cxs-motion-ambient{width:94vw;height:94vw;filter:blur(34px);opacity:.20}
 .cxs-hero--reference>.cxs-motion-ribbon{inset:24% -38% 8% -35%;opacity:.36}
 .cxs-services>.cxs-motion-ribbon{opacity:.10}
 .cxs-why .cxs-why-rail button.is-active{transform:none}
 .cxs-about-story>.cxs-motion-ribbon{opacity:.18}
 .cxs-about-story__chapter.is-active{transform:none!important}
}
@media(max-width:480px){
 .cxs-motion-ribbon .is-fine{display:none}
 .cxs-hero--reference>.cxs-motion-ribbon{opacity:.28}
 .cxs-motion-ambient{display:none}
}
@media(prefers-reduced-motion:reduce){
 .cxs-motion-ribbon .cxs-ribbon-path,.cxs-motion-ambient,.cxs-hero--reference.cxs-motion-live::after,.cxs-hero--reference .cxs-assistant::before,.cxs-why .cxs-why-copy-panel.is-active h3,.cxs-why .cxs-why-copy-panel.is-active p,.cxs-why .cxs-why-visual.is-active::after,.cxs-about-story__chapter.is-active h3,.cxs-about-story__chapter.is-active p,.cxs-about-story__visual.is-active img{animation:none!important}
 .cxs-motion-reveal{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
 .cxs-motion-accent-target::after{animation:none!important;transform:scaleX(1)!important;opacity:.7!important}
}

/* Home / Somos Click inherits the same motion language without competing with its content. */
.cxs-about-home.cxs-motion-live{isolation:isolate}
.cxs-about-home>.cxs-container{position:relative;z-index:2}
.cxs-about-home>.cxs-motion-ambient{right:-28%;top:4%;opacity:.16}
.cxs-about-home .cxs-about-copy h2>strong{position:relative;display:inline-block}
.cxs-about-home .cxs-about-visual.is-motion-visible .cxs-about-scene{filter:drop-shadow(0 28px 44px rgba(0,21,92,.15))}