/* IndustriaKit Motion v1 · 22/10/2026
   Capa de movimiento común a toda la web. Solo anima transform, opacity, clip-path y filter
   (no mueve el maquetado). Si el usuario pide reducir movimiento, todo queda estático. */
:root{--ikm-e:cubic-bezier(.22,1,.36,1);--ikm-e2:cubic-bezier(.65,0,.35,1);--ikm-acc:#C55A11;--ikm-acc2:#F2A365}

/* ---------- transición entre páginas (navegadores que la soportan) ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:ikm-vt-out .28s var(--ikm-e2) both}
::view-transition-new(root){animation:ikm-vt-in .42s var(--ikm-e) both}
@keyframes ikm-vt-out{to{opacity:0;transform:translateY(-8px) scale(.995)}}
@keyframes ikm-vt-in{from{opacity:0;transform:translateY(14px)}}

/* ---------- barra de progreso de lectura ---------- */
.ikm-progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:60;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--ikm-acc),var(--ikm-acc2));pointer-events:none}

/* ---------- cabecera que se compacta ---------- */
header{transition:box-shadow .35s var(--ikm-e),background-color .35s var(--ikm-e)}
header.ikm-scrolled{box-shadow:0 8px 28px rgba(15,33,56,.10)}
header .wrap{transition:height .35s var(--ikm-e)}
header.ikm-scrolled .wrap{height:58px}
nav .navlink{position:relative}
nav .navlink:after{content:"";position:absolute;left:10%;right:10%;bottom:-4px;height:2px;border-radius:2px;background:var(--ikm-acc);
  transform:scaleX(0);transform-origin:50% 50%;transition:transform .35s var(--ikm-e)}
nav .navlink:hover:after,nav .navlink.active:after{transform:scaleX(1)}

/* ---------- portada: fondo técnico vivo ---------- */
.hero{isolation:isolate}
.hero .ikm-mesh{position:absolute;inset:-20%;z-index:-1;pointer-events:none;opacity:.9;
  background:radial-gradient(38% 42% at 18% 30%,rgba(242,163,101,.20),transparent 70%),
             radial-gradient(34% 40% at 82% 70%,rgba(91,155,213,.22),transparent 70%);
  animation:ikm-mesh 18s var(--ikm-e2) infinite alternate}
@keyframes ikm-mesh{to{transform:translate3d(4%,-3%,0) rotate(6deg) scale(1.06)}}
.hero .ikm-grid{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.22;
  background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);
  background-size:44px 44px;-webkit-mask-image:radial-gradient(70% 60% at 50% 40%,#000 30%,transparent 80%);mask-image:radial-gradient(70% 60% at 50% 40%,#000 30%,transparent 80%);
  animation:ikm-grid 22s linear infinite}
@keyframes ikm-grid{to{background-position:44px 44px,44px 44px}}
.hero .ikm-scan{position:absolute;left:0;right:0;height:120px;top:-120px;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(242,163,101,.10),transparent);animation:ikm-scan 7s var(--ikm-e2) infinite 1.2s}
@keyframes ikm-scan{to{transform:translateY(900px)}}
.hero .wrap{position:relative;z-index:1}

/* titular palabra a palabra con máscara */
.ikm-split .ikm-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.ikm-split .ikm-w>i{display:inline-block;font-style:normal;
  animation:ikm-word .9s var(--ikm-e) both;animation-delay:calc(var(--i)*55ms + 120ms)}
@keyframes ikm-word{from{transform:translateY(105%);opacity:0}to{transform:none;opacity:1}}
.hero h1 span .ikm-w>i{background:linear-gradient(90deg,var(--ikm-acc2),#ffd2ad,var(--ikm-acc2));background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:ikm-word .9s var(--ikm-e) both,ikm-shimmer 5s linear infinite 1.6s;
  animation-delay:calc(var(--i)*55ms + 120ms),1.6s}
@keyframes ikm-shimmer{to{background-position:-200% 0}}

/* entrada escalonada del resto de la portada */
html.ikm .ikm-in{animation:ikm-in .9s var(--ikm-e) both;animation-delay:var(--d,0ms)}
@keyframes ikm-in{from{opacity:0;transform:translateY(18px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}

/* ventana del panel en 3D */
.ikm-stage{perspective:1400px}
.ikm-3d{transform-style:preserve-3d;will-change:transform;transition:transform .6s var(--ikm-e);
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0)}
.ikm-3d-in{animation:ikm-3d-in 1.3s var(--ikm-e) both .35s}
@keyframes ikm-3d-in{from{opacity:0;transform:rotateX(18deg) rotateY(-10deg) translateY(40px) scale(.94)}}
.mock{position:relative}
.mock:after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.10) 50%,transparent 65%);background-size:250% 100%;background-position:120% 0;
  animation:ikm-glint 6s var(--ikm-e2) infinite 2.2s}
@keyframes ikm-glint{0%,60%{background-position:120% 0}100%{background-position:-120% 0}}
.ikm-float{animation:ikm-float 7s ease-in-out infinite alternate}
@keyframes ikm-float{to{translate:0 -10px}}

/* ---------- aparición al hacer scroll ---------- */
.ikm-r{opacity:0;transform:translateY(34px);filter:blur(8px);transition:opacity .9s var(--ikm-e),transform .9s var(--ikm-e),filter .9s var(--ikm-e);
  transition-delay:var(--d,0ms)}
.ikm-r.ikm-on{opacity:1;transform:none;filter:none}
.ikm-mask{clip-path:inset(0 0 100% 0 round 14px);transition:clip-path 1.1s var(--ikm-e);transition-delay:var(--d,0ms)}
.ikm-mask.ikm-on{clip-path:inset(0 0 0 0 round 14px)}
.ikm-mask img{transform:scale(1.12);transition:transform 1.6s var(--ikm-e);transition-delay:var(--d,0ms)}
.ikm-mask.ikm-on img{transform:none}

/* rótulo y título de sección */
.eyebrow.ikm-eye{display:inline-flex;align-items:center;gap:10px}
.eyebrow.ikm-eye:before{content:"";width:26px;height:2px;border-radius:2px;background:currentColor;transform:scaleX(0);transform-origin:0 50%;
  transition:transform .8s var(--ikm-e) .15s}
.ikm-on .eyebrow.ikm-eye:before,.eyebrow.ikm-eye.ikm-on:before{transform:scaleX(1)}
.section h2.ikm-h2{position:relative}
.section .center h2.ikm-h2:after{content:"";display:block;width:56px;height:3px;border-radius:3px;margin:12px auto 0;
  background:linear-gradient(90deg,var(--ikm-acc),var(--ikm-acc2));transform:scaleX(0);transition:transform .9s var(--ikm-e) .25s}
.section .center h2.ikm-h2.ikm-on:after,.ikm-on h2.ikm-h2:after{transform:scaleX(1)}

/* ---------- tarjetas: relieve, luz que sigue al cursor y leve inclinación ---------- */
html.ikm .ikm-card{position:relative;transform:perspective(900px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) translateY(var(--lift,0px));
  transition:transform .45s var(--ikm-e),box-shadow .45s var(--ikm-e),border-color .45s var(--ikm-e)}
html.ikm .ikm-card:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s var(--ikm-e);
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(197,90,17,.10),transparent 45%)}
html.ikm .ikm-card:hover{--lift:-4px;box-shadow:0 22px 48px rgba(15,33,56,.14);border-color:rgba(197,90,17,.35)}
html.ikm .ikm-card:hover:before{opacity:1}
html.ikm .rcard.ikm-card:before{background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(242,163,101,.16),transparent 45%)}

/* ---------- botones: brillo, imán y pulsación ---------- */
.btn{position:relative;overflow:hidden;transition:transform .35s var(--ikm-e),box-shadow .35s var(--ikm-e),background-color .25s}
.btn:after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);transition:left .7s var(--ikm-e)}
.btn:hover:after{left:130%}
.btn:hover{box-shadow:0 12px 28px rgba(197,90,17,.28)}
.btn:active{transform:translate(var(--bx,0),var(--by,0)) scale(.97)}
.ikm-mag{transform:translate(var(--bx,0),var(--by,0))}
.ikm-ripple{position:absolute;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.45);transform:scale(0);animation:ikm-ripple .6s var(--ikm-e) forwards}
@keyframes ikm-ripple{to{transform:scale(4);opacity:0}}

/* ---------- cifras que cuentan ---------- */
.ikm-count{font-variant-numeric:tabular-nums}

/* ---------- capturas del panel ---------- */
.shot{transition:transform .5s var(--ikm-e),box-shadow .5s var(--ikm-e)}
.shot:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 26px 50px rgba(15,33,56,.22)}
.shot img{transition:transform 1.2s var(--ikm-e)}
.shot:hover img{transform:scale(1.06)}

/* ---------- accesibilidad: sin movimiento si el usuario lo pide ---------- */
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important}
  .ikm-r,.ikm-in,.ikm-split .ikm-w>i,.ikm-3d-in{opacity:1!important;transform:none!important;filter:none!important}
  .ikm-mask{clip-path:none!important}.ikm-mask img{transform:none!important}
  .hero .ikm-mesh,.hero .ikm-grid,.hero .ikm-scan,.ikm-progress{display:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none!important}
}