/* ============================================================
   CLIQ — capa de animaciones (deliberadamente excesiva)
   Se activa con assets/fx.js. Todo respeta prefers-reduced-motion.
   ============================================================ */

/* ---------- 1. Cortina de entrada (CSS puro, sin JS) ---------- */
html::before{content:'';position:fixed;inset:0;z-index:9999;background:#FFFFFF;pointer-events:none;
  animation:fxCurtain 1.5s cubic-bezier(.77,0,.18,1) 2s forwards;}
html::after{content:'CLIQ';position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;pointer-events:none;
  font-family:'Archivo','Arial Narrow',sans-serif;font-weight:900;font-size:clamp(3.5rem,12vw,9rem);letter-spacing:-.04em;color:#16281B;
  animation:fxCurtainWord 3.5s cubic-bezier(.77,0,.18,1) forwards;}
@keyframes fxCurtain{0%{transform:translateY(0)}100%{transform:translateY(-101%);visibility:hidden}}
@keyframes fxCurtainWord{0%{opacity:0;transform:scale(.6) rotate(-6deg)}22%{opacity:1;transform:scale(1) rotate(0)}57%{opacity:1;transform:scale(1.05)}100%{opacity:0;transform:translateY(-60vh) scale(1.2);visibility:hidden}}
@media (prefers-reduced-motion: reduce){html::before,html::after{display:none}}

/* ---------- 2. Barra de progreso de scroll ---------- */
.fx-progress{position:fixed;top:0;left:0;width:100%;height:5px;z-index:9998;pointer-events:none;transform-origin:0 50%;
  transform:scaleX(var(--p,0));background:linear-gradient(90deg,#A6E24C,#DDD0F7 55%,#5B3FA6);box-shadow:0 0 14px rgba(166,226,76,.8);}

/* ---------- 3. Cursor personalizado (solo puntero fino) ---------- */
.fx-cursor,.fx-cursor-dot{position:fixed;left:0;top:0;pointer-events:none;z-index:9997;border-radius:50%;will-change:transform;}
.fx-cursor{width:40px;height:40px;margin:-20px 0 0 -20px;border:1.5px solid #82BE2E;
  transition:width .3s cubic-bezier(.2,.8,.2,1),height .3s cubic-bezier(.2,.8,.2,1),margin .3s cubic-bezier(.2,.8,.2,1),background .3s,border-color .3s,opacity .3s;}
.fx-cursor.hot{width:80px;height:80px;margin:-40px 0 0 -40px;background:rgba(166,226,76,.22);border-color:#16281B;}
.fx-cursor.down{width:24px;height:24px;margin:-12px 0 0 -12px;background:rgba(91,63,166,.35);}
.fx-cursor-dot{width:8px;height:8px;margin:-4px 0 0 -4px;background:#14140F;transition:opacity .3s;}
.fx-cursor.off,.fx-cursor-dot.off{opacity:0;}

/* ---------- 4. Titulares: reveal palabra por palabra ---------- */
.fx-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em;padding-right:.04em;}
.fx-wi{display:inline-block;opacity:0;filter:blur(8px);transform:translateY(118%) rotate(9deg);transform-origin:0 100%;
  transition:transform .95s cubic-bezier(.2,.8,.2,1),opacity .6s ease,filter .8s ease;
  transition-delay:calc(var(--i,0) * 75ms);}
.fx-split.fx-in .fx-wi{opacity:1;filter:none;transform:none;}
.hl .fx-wi{background-image:linear-gradient(100deg,#82BE2E 0%,#c9f27f 45%,#82BE2E 90%);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:fxShimmer 3.2s linear infinite;}
@keyframes fxShimmer{to{background-position:-220% 0}}

/* subrayado dibujado (acento alterno al color) */
.hl-line{background:linear-gradient(#A6E24C,#A6E24C) 0 94%/0% .3em no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone;
  transition:background-size 1.2s cubic-bezier(.2,.8,.2,1) .7s;}
.fx-in .hl-line,.hl-line.fx-in{background-size:100% .3em;}

/* ---------- 5. Reveal por variantes (usa propiedades individuales, no pisa transform) ---------- */
html.fx-ready [data-fx]{transition:opacity .9s cubic-bezier(.2,.8,.2,1),translate .9s cubic-bezier(.2,.8,.2,1),scale .9s cubic-bezier(.2,.8,.2,1),
  rotate .9s cubic-bezier(.2,.8,.2,1),filter .9s ease,clip-path 1.1s cubic-bezier(.7,0,.2,1);transition-delay:var(--d,0ms);}
html.fx-ready [data-fx]:not(.fx-in){opacity:0;}
html.fx-ready [data-fx="up"]:not(.fx-in){translate:0 70px;}
html.fx-ready [data-fx="left"]:not(.fx-in){translate:-110px 0;}
html.fx-ready [data-fx="right"]:not(.fx-in){translate:110px 0;}
html.fx-ready [data-fx="zoom"]:not(.fx-in){scale:.6;filter:blur(12px);}
html.fx-ready [data-fx="pop"]:not(.fx-in){scale:.2;rotate:-24deg;}
html.fx-ready [data-fx="pop"]{transition-timing-function:cubic-bezier(.34,1.7,.5,1);}
html.fx-ready [data-fx="tilt-l"]:not(.fx-in){translate:-90px 60px;rotate:-9deg;scale:.9;}
html.fx-ready [data-fx="tilt-r"]:not(.fx-in){translate:90px 60px;rotate:9deg;scale:.9;}
html.fx-ready [data-fx="clip"]:not(.fx-in){clip-path:inset(0 100% 0 0 round 28px);}
html.fx-ready [data-fx="clip"]{clip-path:inset(0 0 0 0 round 28px);}

/* ---------- 6. Botones: destello, ondas, flecha viva ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate;}
.btn-arrow{display:inline-block;animation:fxNudge 1.7s ease-in-out infinite;}
@keyframes fxNudge{0%,100%{translate:0 0}50%{translate:5px 0}}
.fx-ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);transform:scale(0);animation:fxRipple .75s ease-out forwards;pointer-events:none;z-index:-1;}
@keyframes fxRipple{to{transform:scale(1);opacity:0}}

/* ---------- 7. Navegación ---------- */
.nav-links a{position:relative;}
.nav-links a::after{content:'';position:absolute;left:0;bottom:-5px;width:100%;height:2px;background:#82BE2E;transform:scaleX(0);transform-origin:right;transition:transform .4s cubic-bezier(.2,.8,.2,1);}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1);transform-origin:left;}
.logo:hover .word{animation:fxWobble .7s ease;}
@keyframes fxWobble{0%,100%{rotate:0}20%{rotate:-6deg;scale:1.08}45%{rotate:5deg}70%{rotate:-3deg}}
.logo{animation:fxDropIn .9s cubic-bezier(.2,.8,.2,1) 3.05s backwards;}
.nav-actions > *{animation:fxDropIn .9s cubic-bezier(.2,.8,.2,1) backwards;}
.nav-actions > *:nth-child(1){animation-delay:3.15s}.nav-actions > *:nth-child(2){animation-delay:3.25s}
.nav-actions > *:nth-child(3){animation-delay:3.35s}.nav-actions > *:nth-child(4){animation-delay:3.45s}
@media (min-width:981px){
  .nav-links a{animation:fxDropIn .9s cubic-bezier(.2,.8,.2,1) backwards;}
  .nav-links a:nth-child(1){animation-delay:3.1s}.nav-links a:nth-child(2){animation-delay:3.2s}.nav-links a:nth-child(3){animation-delay:3.3s}
}
@keyframes fxDropIn{from{opacity:0;translate:0 -30px;filter:blur(6px)}}

/* ---------- 8. Blobs a la deriva ---------- */
.fx-host{position:relative;overflow:clip;isolation:isolate;}

.fx-blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;pointer-events:none;z-index:-1;animation:fxDrift 17s ease-in-out infinite alternate;}
.fx-blob.b1{width:340px;height:340px;background:#A6E24C;left:-6%;top:-20%;}
.fx-blob.b2{width:300px;height:300px;background:#DDD0F7;right:22%;bottom:-25%;animation-duration:23s;animation-delay:-6s;}
.fx-blob.b3{width:220px;height:220px;background:#5B3FA6;left:38%;top:30%;opacity:.28;animation-duration:29s;animation-delay:-12s;}
@keyframes fxDrift{0%{transform:translate(0,0) scale(1)}33%{transform:translate(90px,-50px) scale(1.3)}66%{transform:translate(-60px,70px) scale(.85)}100%{transform:translate(50px,30px) scale(1.15)}}

/* ---------- 9. Hero ---------- */
.map-pill{animation:fxFloat 4s ease-in-out infinite;}
@keyframes fxFloat{0%,100%{translate:0 0}50%{translate:0 -10px}}
.hero-stats strong.fx-pop,.stats-row strong.fx-pop{animation:fxPop .8s cubic-bezier(.34,1.6,.5,1);transform-origin:left center;}
@keyframes fxPop{0%{scale:1}35%{scale:1.32;text-shadow:0 0 24px rgba(166,226,76,.9)}100%{scale:1}}

/* ---------- 10. Marquee de logos (real, infinito) ---------- */
.marquee-logos{--mg:clamp(1.8rem,4vw,3.2rem);flex:1 1 300px;min-width:0;overflow:hidden;flex-wrap:nowrap;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);}
.marquee-track{display:flex;align-items:center;gap:var(--mg);padding-right:var(--mg);width:max-content;animation:fxMarq 28s linear infinite;}
.marquee-track:hover{animation-play-state:paused;}
@media (max-width:980px){ .marquee-track{animation-duration:10s;} }
.marquee-track img{flex:none;}
@keyframes fxMarq{to{transform:translateX(-50%)}}

/* ---------- 12. Servicios / proceso / testimonios ---------- */
.service-item{position:relative;transition:padding-left .4s cubic-bezier(.2,.8,.2,1),background .4s;}
.service-item:hover{padding-left:1.1rem;background:linear-gradient(90deg,rgba(166,226,76,.2),transparent 70%);}
.service-num{display:inline-block;transition:transform .45s cubic-bezier(.34,1.7,.5,1);}
.service-item:hover .service-num{transform:scale(1.35) rotate(-10deg);}
.process-step .badge{position:relative;}
.process-step .badge::after{content:'';position:absolute;inset:-6px;border-radius:50%;border:1.5px solid #82BE2E;animation:fxRing 2.8s ease-out infinite;animation-delay:calc(var(--k,0) * .45s);}
@keyframes fxRing{0%{transform:scale(.85);opacity:.9}100%{transform:scale(1.7);opacity:0}}
.process-step .arrow{animation:fxArrow 1.8s ease-in-out infinite;}
@keyframes fxArrow{0%,100%{translate:0 0}50%{translate:10px 0}}
.fx-tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .18s ease-out;will-change:transform;}
.testi .qm{display:inline-block;animation:fxBob 3.4s ease-in-out infinite;}
@keyframes fxBob{0%,100%{translate:0 0;rotate:0}50%{translate:0 -8px;rotate:-6deg}}

/* ---------- 13. Mapa del mundo y focos de luz ---------- */
.wm-label{animation:fxLabel 4.2s ease-in-out infinite;}
@keyframes fxLabel{0%,100%{opacity:.55}50%{opacity:1}}
.world-map-card::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:2;opacity:0;transition:opacity .45s ease;background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(166,226,76,.42),rgba(166,226,76,.14) 45%,transparent 70%);}
.world-map-card:hover::after{opacity:1;}
.stats-band::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(166,226,76,.2),transparent 60%);}
.stats-band > .wrap{position:relative;z-index:1;}

/* ---------- 14. CTA y footer ---------- */
footer.site .logo .word{background:linear-gradient(100deg,#14140F 30%,#82BE2E 50%,#14140F 70%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:fxShimmer 4s linear infinite;}

/* ---------- 15. Legibilidad si algo falla ---------- */
@media (prefers-reduced-motion: reduce){
  .fx-progress,.fx-cursor,.fx-cursor-dot,.fx-blob{display:none !important;}
}

/* evita scroll horizontal por elementos desplazados */
html,body{overflow-x:clip;}
.hero .fx-blob.b2,.hero .fx-blob.b3{display:none;}