/* ===========================================================
   ODENZE · capa de movimiento, interacción y color
   =========================================================== */

/* ---------- 1. Entrada por scroll, con escalonado ---------- */
[data-rv]{
  opacity:0; transform:translateY(26px) scale(.985);
  transition:opacity .9s cubic-bezier(.22,.7,.26,1), transform .9s cubic-bezier(.22,.7,.26,1);
  transition-delay:var(--d,0ms);
  will-change:opacity,transform;
}
[data-rv].in{opacity:1; transform:none;}
[data-rv="left"]{transform:translateX(-34px);}
[data-rv="right"]{transform:translateX(34px);}
[data-rv="scale"]{transform:scale(.93);}

/* ---------- 2. Tarjetas: inclinación 3D + luz que sigue al cursor ---------- */
.tilt{
  --px:50%; --py:50%; --rx:0deg; --ry:0deg;
  position:relative; transform-style:preserve-3d;
  transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(0);
  transition:transform .5s cubic-bezier(.2,.8,.3,1), border-color .4s, box-shadow .5s;
}
.tilt.on{transition:transform .12s linear, border-color .4s, box-shadow .5s;}
.tilt::after{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(260px 260px at var(--px) var(--py),
    rgba(25,224,166,.16), rgba(25,224,166,.05) 38%, transparent 66%);
  opacity:0; transition:opacity .45s ease; z-index:1;
}
.tilt.on::after{opacity:1;}
.tilt:hover{
  border-color:rgba(25,224,166,.34)!important;
  box-shadow:0 26px 60px -30px rgba(0,0,0,.85), 0 0 46px -22px rgba(25,224,166,.5);
}
.tilt > *{position:relative; z-index:2;}

/* Filo de luz que recorre el borde superior */
.tilt::before{
  content:''; position:absolute; left:0; top:0; height:1px; width:100%;
  border-radius:inherit; z-index:3; pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--emerald),transparent);
  opacity:0; transform:scaleX(.3); transform-origin:center;
  transition:opacity .5s ease, transform .7s cubic-bezier(.2,.8,.3,1);
}
.tilt:hover::before{opacity:.9; transform:scaleX(1);}

/* ---------- 3. Botones magnéticos con brillo ---------- */
.btn{position:relative; overflow:hidden; isolation:isolate;}
/* El brillo NO toca a los botones fantasma: ahí ::after es el relleno
   que hace legible el texto al pasar el cursor. */
.btn:not(.btn-ghost)::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(115deg,transparent 28%,rgba(255,255,255,.28) 48%,transparent 68%);
  transform:translateX(-120%); transition:transform .75s cubic-bezier(.2,.8,.3,1);
}
.btn:not(.btn-ghost):hover::after{transform:translateX(120%);}

/* Botón fantasma: relleno degradado y texto siempre legible */
.btn-ghost::after{
  background:linear-gradient(104deg,#5CF6CC,#19E0A6 50%,#12BC8C)!important;
}
.btn-ghost:hover,.btn-ghost:focus-visible{color:#03120C!important; border-color:transparent!important;}
.btn-ghost:hover svg,.btn-ghost:focus-visible svg{fill:#03120C;}
.btn{transition:transform .35s cubic-bezier(.2,.9,.3,1.1), box-shadow .35s;}
.btn:hover{box-shadow:0 16px 38px -18px rgba(25,224,166,.75);}

/* ---------- 4. Enlaces del menú con barrido ---------- */
.site nav a.link{position:relative;}
.site nav a.link::after{
  content:''; position:absolute; left:0; bottom:-3px; height:1.5px; width:100%;
  background:var(--emerald); transform:scaleX(0); transform-origin:right;
  transition:transform .45s cubic-bezier(.2,.8,.3,1);
}
.site nav a.link:hover::after{transform:scaleX(1); transform-origin:left;}

/* ---------- 5. Degradado vivo en las palabras clave ---------- */
.hero h1 .kw{
  background:linear-gradient(100deg,#4CF2C4,#19E0A6 32%,#5CF6CC 56%,#19E0A6 78%,#4CF2C4);
  background-size:260% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:kwFlow 9s ease-in-out infinite;
}
@keyframes kwFlow{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}

/* ---------- 6. Imágenes: zoom y saturación al pasar ---------- */
.g-slide img,.reel video,.svc-visual img,figure img{
  transition:transform 1.1s cubic-bezier(.2,.8,.3,1), filter .7s ease;
}
figure:hover img,.reel:hover video{transform:scale(1.045); filter:saturate(1.12) contrast(1.04);}

/* ---------- 7. Iconos de servicio: giro y rebote ---------- */
.serv-row{transition:transform .45s cubic-bezier(.2,.9,.3,1.1);}
.serv-row:hover{transform:translateX(8px);}
.serv-row .go{transition:transform .45s cubic-bezier(.2,.9,.3,1.2), background .35s;}
.serv-row:hover .go{transform:translateX(7px) scale(1.12);}

/* ---------- 8. Numeración de pasos que se enciende ---------- */
.step,.proc .p{transition:transform .5s cubic-bezier(.2,.8,.3,1);}
.step:hover,.proc .p:hover{transform:translateY(-7px);}

/* ---------- 9. Barra de progreso de lectura ---------- */
#sprog{
  position:fixed; left:0; top:0; height:2.5px; width:0%; z-index:999;
  background:linear-gradient(90deg,var(--deep),var(--emerald),var(--emerald-2));
  box-shadow:0 0 14px rgba(25,224,166,.75);
  transition:width .12s linear;
}

/* ---------- 10. Titulares que suben línea a línea ---------- */
.ln{display:block;}
.ln > i{
  display:block; font-style:normal;
  opacity:0; transform:translateY(30px);
  transition:opacity .95s cubic-bezier(.19,.9,.22,1), transform .95s cubic-bezier(.19,.9,.22,1);
  transition-delay:var(--ld,0ms);
}
.in .ln > i,[data-rv].in .ln > i,.hero .ln > i{opacity:1; transform:none;}

/* ---------- 11. Luz ambiental que late ---------- */
#aura .b{animation:auraFloat 18s ease-in-out infinite;}
#aura .b2{animation-duration:23s; animation-delay:-6s;}
#aura .b3{animation-duration:28s; animation-delay:-12s;}
@keyframes auraFloat{
  0%,100%{transform:translate3d(0,0,0) scale(1);}
  33%{transform:translate3d(3%,-4%,0) scale(1.09);}
  66%{transform:translate3d(-3%,3%,0) scale(.95);}
}

/* ---------- 12. Respeto por quien no quiere movimiento ---------- */
@media(prefers-reduced-motion:reduce){
  [data-rv],[data-rv].in{opacity:1!important; transform:none!important; transition:none!important;}
  .ln > i{transform:none!important;}
  .tilt{transform:none!important;}
  #aura .b{animation:none!important;}
  .hero h1 .kw{animation:none;}
}
@media(hover:none){
  .tilt::after{display:none;}
}

/* --- Objetivos táctiles del carrusel --- */
.g-btn{width:46px!important; height:46px!important; margin-top:-23px!important;}
@media(max-width:640px){ .g-btn{width:44px!important; height:44px!important; margin-top:-22px!important;} }