/* =====================================================================
   JM Digital · capa FX (robótica / matrix / digital)
   Todo lo de acá es decorativo: si este archivo o fx.js no cargan,
   el sitio se ve y funciona igual. Respeta "Pausar movimiento" y
   prefers-reduced-motion (reglas al final de site.css).
   ===================================================================== */

/* ---------- Transición entre páginas ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:fxVtOut .2s ease both}
::view-transition-new(root){animation:fxVtIn .36s cubic-bezier(.2,.8,.2,1) both}
@keyframes fxVtOut{to{opacity:0;filter:blur(6px)}}
@keyframes fxVtIn{from{opacity:0;transform:translateY(14px)}}

/* ---------- Boot (una vez por sesión) ---------- */
html.boot body::before{content:"";position:fixed;inset:0;z-index:1000;background:var(--ink);pointer-events:none;animation:fxBootFail .3s 2.6s forwards}
@keyframes fxBootFail{to{opacity:0;visibility:hidden}}
.fx-boot{position:fixed;inset:0;z-index:1001;background:var(--ink);display:flex;align-items:center;justify-content:center;padding:24px;font-family:var(--mono);font-size:.8rem;letter-spacing:.08em;color:var(--mute);text-transform:uppercase;transition:clip-path .55s cubic-bezier(.7,0,.2,1),opacity .55s;clip-path:inset(0)}
.fx-boot.out{clip-path:inset(0 0 100% 0);opacity:.6;pointer-events:none}
.fx-boot::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(194,242,75,.035) 0 1px,transparent 1px 4px);pointer-events:none}
.fx-boot-in{width:min(360px,100%);display:grid;gap:8px}
.fx-boot-in b{color:var(--paper);font-family:var(--display);font-size:1.5rem;letter-spacing:-.04em;text-transform:none;font-weight:600;margin-bottom:10px;display:flex;align-items:center;gap:10px}
.fx-boot-in b::after{content:"";width:10px;height:10px;background:var(--lime);animation:blink .5s steps(1) infinite}
.fx-boot-in p{display:flex;justify-content:space-between;gap:12px;opacity:0;transform:translateX(-8px);transition:opacity .15s,transform .15s}
.fx-boot-in p.on{opacity:1;transform:none}
.fx-boot-in p em{font-style:normal;color:var(--lime)}
.fx-boot-bar{height:2px;background:var(--line);margin-top:12px;overflow:hidden}
.fx-boot-bar i{display:block;height:100%;background:var(--lime);transform-origin:left;transform:scaleX(0);transition:transform .9s cubic-bezier(.3,.6,.2,1);box-shadow:0 0 12px var(--lime)}
.fx-boot-bar i.on{transform:scaleX(1)}

/* ---------- Scanlines sutiles + glow del puntero ---------- */
html.fx body::after{content:"";position:fixed;inset:0;z-index:48;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px);mix-blend-mode:overlay}
.fx-glow{position:fixed;left:0;top:0;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;background:radial-gradient(circle,rgba(194,242,75,.075),transparent 62%);pointer-events:none;z-index:47;opacity:0;transition:opacity .5s;will-change:transform;mix-blend-mode:screen}
.fx-glow.on{opacity:1}

/* ---------- Barra de progreso de scroll ---------- */
.fx-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--lime);transform-origin:left;transform:scaleX(var(--p,0));box-shadow:0 0 10px rgba(194,242,75,.7);pointer-events:none}

/* ---------- Hero / cabeceras: lluvia matrix + piso digital ---------- */
.hero,.phead{position:relative;isolation:isolate;overflow:clip}
.fx-rain{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.5;
  -webkit-mask-image:linear-gradient(90deg,transparent 8%,rgba(0,0,0,.25) 45%,#000 78%);mask-image:linear-gradient(90deg,transparent 8%,rgba(0,0,0,.25) 45%,#000 78%)}
.phead .fx-rain{opacity:.34;-webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 90%);mask-image:linear-gradient(90deg,transparent 30%,#000 90%)}
@media (max-width:999px){
  .hero .fx-rain{opacity:.42;-webkit-mask-image:linear-gradient(180deg,transparent 34%,#000 62%,#000 88%,transparent);mask-image:linear-gradient(180deg,transparent 34%,#000 62%,#000 88%,transparent)}
  .phead .fx-rain{opacity:.22;-webkit-mask-image:linear-gradient(200deg,#000,transparent 55%);mask-image:linear-gradient(200deg,#000,transparent 55%)}
}
.fx-floor{position:absolute;left:0;right:0;bottom:0;height:46%;z-index:-2;pointer-events:none;overflow:hidden;perspective:520px;perspective-origin:50% 0;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 55%,rgba(0,0,0,.4));mask-image:linear-gradient(180deg,transparent,#000 55%,rgba(0,0,0,.4))}
.fx-floor i{position:absolute;left:-40%;right:-40%;top:0;height:260%;transform-origin:50% 0;
  background-image:linear-gradient(rgba(194,242,75,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(194,242,75,.16) 1px,transparent 1px);background-size:60px 60px;
  animation:fxFloor 2.4s linear infinite;will-change:transform}
@keyframes fxFloor{from{transform:rotateX(64deg) translateY(0)}to{transform:rotateX(64deg) translateY(60px)}}

/* Entrada del hero: solo CSS, así no depende de JS */
html.fx .hero .h1,html.fx .phead .h1{animation:fxRise 1s cubic-bezier(.2,.8,.2,1) both}
html.fx .hero .lead,html.fx .phead .lead{animation:fxRise 1s .12s cubic-bezier(.2,.8,.2,1) both}
html.fx .hero .btns{animation:fxRise 1s .22s cubic-bezier(.2,.8,.2,1) both}
html.fx .phead .crumb{animation:fxFade .8s both}
html.fx .robot-stage{animation:fxMaterialize 1.3s .1s cubic-bezier(.2,.8,.2,1) both}
html.boot .hero .h1,html.boot .hero .lead,html.boot .hero .btns,html.boot .robot-stage,html.boot .phead .h1,html.boot .phead .lead,html.boot .phead .crumb,html.boot .hero .hl{animation-play-state:paused}
@keyframes fxRise{from{opacity:0;transform:translateY(28px);filter:blur(8px)}}
@keyframes fxFade{from{opacity:0}}
@keyframes fxMaterialize{0%{opacity:0;transform:scale(.9);filter:blur(12px) brightness(2.4)}60%{opacity:1;filter:blur(0) brightness(1.3)}}
.hl{background:linear-gradient(var(--lime),var(--lime)) left center/100% 100% no-repeat}
html.fx .hero .hl{animation:fxWipe .55s .75s cubic-bezier(.7,0,.2,1) both}
@keyframes fxWipe{from{background-size:0 100%;color:var(--paper)}}
.hl.fx-fix{display:inline-block;text-align:left;white-space:nowrap}

/* ---------- Robot: HUD, parpadeo, ecualizador ---------- */
.hud{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;color:var(--mute);text-transform:uppercase}
.hud .c{position:absolute;width:18px;height:18px;border:1px solid var(--lime);opacity:.75;animation:fxCorner 3.2s ease-in-out infinite}
.hud .tl{left:0;top:0;border-right:0;border-bottom:0}
.hud .tr{right:0;top:0;border-left:0;border-bottom:0}
.hud .bl{left:0;bottom:0;border-right:0;border-top:0}
.hud .br{right:0;bottom:0;border-left:0;border-top:0}
@keyframes fxCorner{50%{opacity:.25}}
.hud-l,.hud-r{position:absolute;top:9px;display:flex;align-items:center;gap:7px;white-space:nowrap}
.hud-l{left:28px}.hud-r{right:28px;color:var(--lime);font-variant-numeric:tabular-nums}
.hud-l b{width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 8px var(--lime);animation:pulse 1.4s ease-in-out infinite}
.hud-scan{position:absolute;left:4%;right:4%;top:0;height:18%;background:linear-gradient(180deg,transparent,rgba(194,242,75,.07) 80%,rgba(194,242,75,.3) 100%);border-bottom:1px solid rgba(194,242,75,.8);opacity:0;animation:fxScanLoop 5.5s cubic-bezier(.5,0,.5,1) infinite 1.6s}
@keyframes fxScanLoop{0%{transform:translateY(-100%);opacity:0}10%{opacity:.9}55%{opacity:.9}70%,100%{transform:translateY(560%);opacity:0}}
.robot-eyes rect{transform-box:fill-box;transform-origin:50% 50%;animation:fxBlink 5.2s infinite}
@keyframes fxBlink{0%,45%,49%,92%,96%,100%{transform:scaleY(1)}47%,94%{transform:scaleY(.08)}}
.robot-float>circle:first-of-type{animation:fxAntenna 1.8s ease-in-out infinite}
@keyframes fxAntenna{50%{fill:#f4ffdc;filter:drop-shadow(0 0 9px #c4f24b)}}
.fx-eq rect{transform-box:fill-box;transform-origin:50% 100%;animation:fxEq 1s ease-in-out infinite alternate}
.fx-eq rect:nth-child(2){animation-duration:.7s;animation-delay:-.3s}
.fx-eq rect:nth-child(3){animation-duration:1.2s;animation-delay:-.6s}
.fx-eq rect:nth-child(4){animation-duration:.8s;animation-delay:-.1s}
.fx-eq rect:nth-child(5){animation-duration:1.1s;animation-delay:-.5s}
@keyframes fxEq{from{transform:scaleY(.2)}to{transform:scaleY(1)}}
.robot-head{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.robot-eyes{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover) and (pointer:fine){.robot-head{transition-duration:.16s}.robot-eyes{transition-duration:.13s}}
.fx-caret::after{content:"";display:inline-block;width:.5em;height:1em;background:var(--lime);vertical-align:-.15em;margin-left:2px;animation:blink .6s steps(1) infinite}

/* ---------- Revelado al hacer scroll ---------- */
html.fx [data-fx]{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0ms)}
html.fx [data-fx="left"]{transform:translateX(-30px)}
html.fx [data-fx="right"]{transform:translateX(30px)}
html.fx [data-fx="zoom"]{transform:scale(.94)}
html.fx [data-fx].in{opacity:1;transform:none}
/* celdas de grillas con divisores: la celda queda, se anima el contenido */
html.fx [data-fx="cell"]{opacity:1;transform:none}
html.fx [data-fx="cell"]>*{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0ms)}
html.fx [data-fx="cell"].in>*{opacity:1;transform:none}

/* Títulos palabra por palabra */
.fx-words .w{display:inline-block;clip-path:inset(-.12em -.12em -.14em -.12em)}
html.fx .fx-words .w>span{display:inline-block;transform:translateY(118%);transition:transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0) * 42ms)}
html.fx .fx-words.in .w>span{transform:none}

/* ---------- Tarjetas: spotlight, línea de escaneo, borde vivo ---------- */
.fx-spot{position:relative}
.fx-spot::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--lime) 30%,var(--lime) 70%,transparent);transform:scaleX(0);transform-origin:left;opacity:0;pointer-events:none;z-index:2}
.fx-spot.in::before{animation:fxLine 1.1s var(--d,0ms) cubic-bezier(.2,.8,.2,1) both}
@keyframes fxLine{0%{transform:scaleX(0);opacity:1}70%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@media (hover:hover) and (pointer:fine){
  .fx-spot:hover{background-image:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(194,242,75,.12),transparent 62%)}
  .fx-spot:hover::before{animation:none;transform:scaleX(1);opacity:1}
  .svc:hover .num,.step:hover .num{text-shadow:0 0 12px rgba(194,242,75,.8)}
}
.fx-scan{position:relative;overflow:hidden}
.fx-scan::before{content:"";position:absolute;left:0;right:0;top:0;height:34%;z-index:3;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(194,242,75,.14) 80%,rgba(194,242,75,.85));border-bottom:1px solid var(--lime);transform:translateY(-101%);opacity:0}
.fx-scan.in::before{animation:fxScanOnce 1.3s var(--d,0ms) cubic-bezier(.5,0,.3,1) both}
@keyframes fxScanOnce{0%{transform:translateY(-101%);opacity:1}85%{opacity:1}100%{transform:translateY(300%);opacity:0}}
html.fx .fx-scan>img,html.fx .fx-scan .screen{transition:filter 1.1s var(--d,0ms),opacity 1.1s var(--d,0ms)}
html.fx .fx-scan:not(.in)>img,html.fx .fx-scan:not(.in) .screen{filter:saturate(0) brightness(.5) contrast(1.3);opacity:.4}

/* ---------- Divisores con pulso de datos ---------- */
section.blk{position:relative;overflow-x:clip}
section.blk:not([style*="border-top:0"])::before{content:"";position:absolute;top:-1px;left:0;width:160px;height:1px;background:linear-gradient(90deg,transparent,var(--lime),transparent);animation:fxPulseLine 6.5s linear infinite;pointer-events:none}
section.blk:nth-of-type(even)::before{animation-delay:-3.2s}
@keyframes fxPulseLine{from{transform:translateX(-160px)}to{transform:translateX(100vw)}}

/* ---------- Botones ---------- */
.btn{position:relative;overflow:hidden}
.btn.primary::after{content:"";position:absolute;top:0;bottom:0;left:0;width:46%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);transform:translateX(-130%) skewX(-18deg);pointer-events:none}
.btn.primary:hover::after{animation:fxShine .7s ease}
.hero .btn.primary::after,.cta .btn.primary::after{animation:fxShineIdle 5.5s ease-in-out infinite 2.2s}
.cta .btn.primary::after{background:linear-gradient(100deg,transparent,rgba(194,242,75,.35),transparent)}
@keyframes fxShine{to{transform:translateX(330%) skewX(-18deg)}}
@keyframes fxShineIdle{0%,78%{transform:translateX(-130%) skewX(-18deg)}100%{transform:translateX(330%) skewX(-18deg)}}
.btn:active{transform:scale(.97)}

/* ---------- Marquee, gantt, contadores ---------- */
.marq{-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.g-track i.cur{overflow:hidden}
.g-track i.cur::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);transform:translateX(-100%);animation:fxShimmer 2.8s ease-in-out infinite 1.4s}
@keyframes fxShimmer{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
.ctr strong{text-shadow:0 0 28px rgba(194,242,75,.14)}
.iso-wrap{position:relative;overflow:hidden}
.iso-wrap::after{content:"";position:absolute;inset:0;background:conic-gradient(from 0deg,transparent 0 78%,rgba(194,242,75,.22) 96%,transparent);animation:mechOrbit 7s linear infinite;pointer-events:none}
.iso-wrap img{position:relative;z-index:1;animation:fxFloatY 6s ease-in-out infinite}
@keyframes fxFloatY{50%{transform:translateY(-10px)}}

/* ---------- CTA final ---------- */
.cta{position:relative;overflow:hidden;isolation:isolate}
.cta::before{content:"";position:absolute;inset:-60px;z-index:-1;background-image:linear-gradient(rgba(21,21,21,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(21,21,21,.11) 1px,transparent 1px);background-size:44px 44px;animation:fxGridDrift 5s linear infinite;will-change:transform;-webkit-mask-image:linear-gradient(100deg,transparent 25%,#000 85%);mask-image:linear-gradient(100deg,transparent 25%,#000 85%)}
@keyframes fxGridDrift{to{transform:translate(44px,44px)}}
.cta::after{content:"";position:absolute;top:0;bottom:0;left:0;width:22%;z-index:-1;background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);transform:translateX(-120%) skewX(-14deg);animation:fxSweep 7s ease-in-out infinite 1s;pointer-events:none}
@keyframes fxSweep{0%,55%{transform:translateX(-120%) skewX(-14deg)}100%{transform:translateX(620%) skewX(-14deg)}}

/* ---------- Jota flotante ---------- */
.jota-btn::before{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid var(--lime);animation:fxRing 2.6s ease-out infinite;pointer-events:none}
@keyframes fxRing{0%{transform:scale(1);opacity:.9}70%,100%{transform:scale(1.35,1.7);opacity:0}}
html.fx .bub{animation:fxBub .35s cubic-bezier(.2,.8,.2,1) both}
@keyframes fxBub{from{opacity:0;transform:translateY(8px) scale(.97)}}

/* ---------- Menú móvil animado ---------- */
.burger span,.burger span::before,.burger span::after{transition:transform .28s cubic-bezier(.2,.8,.2,1),background .2s,top .28s}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg);background:var(--lime)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg);background:var(--lime)}
@media (max-width:900px){
  .mnav{overflow-y:auto;overscroll-behavior:contain;background:var(--ink) repeating-linear-gradient(0deg,rgba(194,242,75,.03) 0 1px,transparent 1px 4px)}
  .mnav.open{animation:fxMenu .32s cubic-bezier(.2,.8,.2,1) both}
  .mnav.open>*{animation:fxMenuItem .45s cubic-bezier(.2,.8,.2,1) both}
  .mnav.open>*:nth-child(2){animation-delay:.05s}.mnav.open>*:nth-child(3){animation-delay:.1s}.mnav.open>*:nth-child(4){animation-delay:.15s}.mnav.open>*:nth-child(5){animation-delay:.2s}.mnav.open>*:nth-child(6){animation-delay:.26s}
  .mnav a.ml span{font-family:var(--mono);font-size:.72rem;font-weight:400;color:var(--lime);letter-spacing:.1em;align-self:center}
}
@keyframes fxMenu{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
@keyframes fxMenuItem{from{opacity:0;transform:translateX(-18px)}}

/* ---------- Ajustes de auditoría (mobile / táctil) ---------- */
img{height:auto}
.jota-panel{max-height:min(560px,calc(100dvh - 120px))}
@media (pointer:coarse){
  .fgrid ul{gap:0}
  .fgrid li a{display:inline-flex;align-items:center;min-height:44px}
  .fbot{align-items:center}
  .fbot a,.fbot button{display:inline-flex;align-items:center;min-height:44px}
  .link{padding-top:13px;padding-bottom:9px}
  .filters button{min-height:44px;padding-left:16px;padding-right:16px}
  .crumb a{display:inline-block;padding:12px 0}
  .jp-close{width:44px;height:44px}
}
@media (max-width:699px){.svc{min-height:0;gap:10px;padding-top:24px}.svc .num{margin-bottom:22px}}
@media (max-width:600px){
  .hud{font-size:.56rem}
  .hud-l{left:22px}.hud-r{right:22px}
  .fx-floor{height:38%}
}
@media print{.fx-rain,.fx-floor,.fx-glow,.hud,.jota-btn{display:none!important}html.fx [data-fx]{opacity:1!important;transform:none!important}}
.mnav.open~.jota-btn,.mnav.open~.jota-panel{opacity:0;pointer-events:none}