/* css/holo-scenes-a.css — HOLO · ESCENAS A (#soluciones #trabajo #banda #servicios) · prefijo ha-
   El DOM decorativo lo inyecta js/holo-scenes-a.js (aria-hidden). Estados:
   html.ha        → el JS corrió (decoración presente)
   html.ha-mo     → hay movimiento (sin reduced-motion): estados iniciales ocultos + animaciones de entrada
   .ha-on         → el bloque entró en pantalla (una vez): se materializa
   .ha-run        → el bloque está en pantalla: corren los bucles (fuera de pantalla quedan en pausa)
   html.ha-hid    → pestaña oculta: todo en pausa
   Sin JS o con reduced-motion se ve el fotograma final, estático. */

#soluciones,#trabajo,#banda,#servicios{
  --ha:var(--holo,#2AA5F5);--ha-hi:var(--holo-hi,#7FD0FF);
  --ha-dim:var(--holo-dim,rgba(42,165,245,.35));--ha-faint:var(--holo-faint,rgba(42,165,245,.12));
  --ha-panel:var(--holo-panel,rgba(8,16,32,.72));--ha-solid:var(--holo-panel-solid,#0A1324);
  --ha-deep:var(--holo-deep,#060B16);--ha-void:var(--holo-void,#03060D);
  --ha-tx:#EAF0FA;--ha-mu:#8C9AB5;--ha-mu2:#B9C5DA;--ha-red:#FF3B3B;
  --ha-glow:0 0 0 1px var(--ha-dim),0 0 36px -10px rgba(42,165,245,.55);
  --ha-ez:cubic-bezier(.22,1,.36,1)
}

/* ---------- primitivas compartidas ---------- */
.ha-br{position:absolute;inset:0;pointer-events:none;z-index:0;--c:var(--ha-dim);--k:14px;
  background:linear-gradient(var(--c),var(--c)) 0 0/var(--k) 1px,linear-gradient(var(--c),var(--c)) 0 0/1px var(--k),
    linear-gradient(var(--c),var(--c)) 100% 0/var(--k) 1px,linear-gradient(var(--c),var(--c)) 100% 0/1px var(--k),
    linear-gradient(var(--c),var(--c)) 0 100%/var(--k) 1px,linear-gradient(var(--c),var(--c)) 0 100%/1px var(--k),
    linear-gradient(var(--c),var(--c)) 100% 100%/var(--k) 1px,linear-gradient(var(--c),var(--c)) 100% 100%/1px var(--k);
  background-repeat:no-repeat}
.ha-dots{position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(127,208,255,.16) 1px,transparent 1.4px) 0 0/16px 16px;
  -webkit-mask:radial-gradient(ellipse 80% 70% at 85% 0%,#000,transparent 70%);mask:radial-gradient(ellipse 80% 70% at 85% 0%,#000,transparent 70%)}
.ha-tag{font-family:var(--f-mono,'JetBrains Mono',monospace);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;line-height:1.3;color:var(--ha-mu)}
/* escaneo de entrada: una línea que baja una vez */
.ha-sweep{position:absolute;left:0;right:0;top:0;height:2px;z-index:6;pointer-events:none;opacity:0;
  background:var(--ha-hi);box-shadow:0 0 14px 2px rgba(42,165,245,.55)}
.ha-mo .ha-on>.ha-fx .ha-sweep,.ha-mo .ha-on>.ha-sweep{animation:haSweep 1.15s var(--ha-ez) .1s both}
@keyframes haSweep{0%{opacity:0;transform:translateY(0)}12%{opacity:.9}88%{opacity:.7}100%{opacity:0;transform:translateY(var(--sh,520px))}}
/* bucles en pausa salvo en pantalla */
.ha-loop{animation-play-state:paused!important}
.ha-run .ha-loop{animation-play-state:running!important}
.ha-hid .ha-run .ha-loop{animation-play-state:paused!important}
.ha-fx{position:absolute;inset:0;pointer-events:none;z-index:0;border-radius:inherit}

/* =====================================================================
   #SOLUCIONES · módulos de telemetría con su proyección (.mk) sobre un emisor
   ===================================================================== */
#soluciones .pb{position:relative;isolation:isolate}
#soluciones .pb>.pb-copy,#soluciones .pb>.pb-vis{position:relative;z-index:1}
#soluciones .pb .ha-sweep{--sh:900px}
/* módulos anchos (más bajos que su vecino): texto arriba y proyección abajo, sin vacío encima del texto */
@media(min-width:961px){#soluciones .pb.w7{align-items:start}#soluciones .pb.w7>.pb-vis{align-self:end}}
.ha-big{position:absolute;right:-.04em;bottom:-.24em;font-family:var(--f-mono,monospace);font-weight:700;font-size:clamp(120px,13vw,190px);line-height:1;letter-spacing:-.06em;
  color:transparent;-webkit-text-stroke:1px rgba(42,165,245,.16);user-select:none}
#soluciones .pb.w7 .ha-big{right:auto;left:-.04em}
.ha-tel{position:absolute;top:16px;right:20px;display:flex;align-items:center;gap:10px}
.ha-bars{display:flex;align-items:flex-end;gap:2px;height:10px}
.ha-bars i{width:2px;background:var(--ha);border-radius:1px;transform-origin:50% 100%}
.ha-bars i:nth-child(1){height:40%}.ha-bars i:nth-child(2){height:70%}.ha-bars i:nth-child(3){height:100%}
.ha-mo .ha-bars i{animation:haBar 2.4s ease-in-out infinite}
.ha-bars i:nth-child(2){animation-delay:.3s!important}.ha-bars i:nth-child(3){animation-delay:.6s!important}
@keyframes haBar{0%,100%{transform:scaleY(1);opacity:1}50%{transform:scaleY(.45);opacity:.6}}
/* proyección */
#soluciones .pb-vis{position:relative;padding-bottom:30px;perspective:900px}
#soluciones .mk{background:rgba(6,14,30,.92);color:var(--ha-tx);box-shadow:var(--ha-glow),0 30px 50px -30px #000;z-index:2}
.ha-mo #soluciones .mk{animation:haFloat 7s ease-in-out infinite}
@keyframes haFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-4px,0)}}
#soluciones .mk-bt i,#soluciones .mk-prog i{box-shadow:0 0 10px rgba(42,165,245,.6)}
/* emisor bajo la proyección */
.ha-pad{position:absolute;left:12%;right:12%;bottom:0;height:22px;z-index:0;pointer-events:none}
.ha-pad i{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(42,165,245,.4)}
.ha-pad i:nth-child(2){inset:5px 14%;border-color:rgba(127,208,255,.55)}
.ha-pad i:nth-child(3){inset:9px 30%;border:0;background:var(--ha-hi);box-shadow:0 0 16px 4px rgba(42,165,245,.6)}
.ha-pad::before{content:"";position:absolute;left:-6%;right:-6%;bottom:50%;height:150px;
  background:linear-gradient(to top,rgba(42,165,245,.2),rgba(42,165,245,0));clip-path:polygon(0 0,100% 0,62% 100%,38% 100%)}
.ha-mo .ha-pad i:nth-child(1){animation:haRing 3.2s ease-out infinite}
@keyframes haRing{0%{transform:scale(.9);opacity:.2}30%{opacity:1}100%{transform:scale(1.12);opacity:0}}
/* entrada: la proyección se imprime con un escaneo */
.ha-mo #soluciones .pb:not(.ha-on) .mk{clip-path:inset(0 0 100% 0)}
.ha-mo #soluciones .pb .mk{transition:clip-path .9s var(--ha-ez) .25s}
.ha-mo #soluciones .pb:not(.ha-on) .ha-pad{opacity:0;transform:scaleX(.4)}
.ha-mo #soluciones .pb .ha-pad{transition:opacity .5s,transform .7s var(--ha-ez)}

/* =====================================================================
   #TRABAJO · archivo de proyecciones
   ===================================================================== */
#trabajo .case-shot{background:transparent;box-shadow:none;isolation:isolate}
#trabajo .case-shot .frame-b{z-index:1;background:var(--ha-solid);box-shadow:var(--ha-glow),0 40px 80px -40px #000;
  transform:perspective(1300px) rotateX(var(--ha-rx,0deg)) rotateY(var(--ha-ry,0deg)) translate3d(0,var(--ha-ty,0px),0);
  transition:transform .5s var(--ha-ez),box-shadow .3s,background-color .4s}
#trabajo .case-shot:hover,#trabajo .case-shot:focus-visible{--ha-ty:-4px}
#trabajo .case-shot:hover .frame-b,#trabajo .case-shot:focus-visible .frame-b{box-shadow:0 0 0 1px rgba(127,208,255,.6),0 0 48px -8px rgba(42,165,245,.7),0 40px 80px -40px #000}
#trabajo .case-shot.ha-move .frame-b{transition:transform .18s linear,box-shadow .3s}
#trabajo .case-ph{transform:translate3d(calc(var(--ha-px,0) * -12px),calc(var(--ha-py,0) * -8px),0);transition:transform .5s var(--ha-ez),translate .6s var(--ha-ez),opacity .6s}
/* aparejo: brackets, rejilla, número, cono y emisor */
.ha-rig{position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit}
.ha-rig .ha-br{--k:22px}
.ha-grid{position:absolute;inset:0;background:radial-gradient(circle,rgba(127,208,255,.14) 1px,transparent 1.4px) 0 0/18px 18px;
  -webkit-mask:radial-gradient(ellipse 70% 60% at 50% 85%,#000,transparent 75%);mask:radial-gradient(ellipse 70% 60% at 50% 85%,#000,transparent 75%)}
.ha-num{position:absolute;left:-.05em;top:-.2em;font-family:var(--f-mono,monospace);font-weight:700;font-size:clamp(110px,12vw,180px);line-height:1;letter-spacing:-.07em;
  color:transparent;-webkit-text-stroke:1px rgba(42,165,245,.22);transform:translate3d(calc(var(--ha-px,0) * 10px),calc(var(--ha-py,0) * 6px),0);transition:transform .6s var(--ha-ez)}
.case.flip .ha-num{left:auto;right:-.05em}
.ha-cone{position:absolute;left:10%;right:18%;bottom:12px;height:62%;clip-path:polygon(0 0,100% 0,64% 100%,36% 100%);
  background:linear-gradient(to top,rgba(42,165,245,.24),rgba(42,165,245,0) 90%)}
.case.flip .ha-cone,.case-shot.no-ph .ha-cone{left:18%;right:10%}
.case-shot.no-ph .ha-cone{left:12%;right:12%}
.ha-mo .ha-cone{animation:haShimmer 5s ease-in-out infinite}
@keyframes haShimmer{0%,100%{opacity:1}50%{opacity:.72}}
.ha-emit{position:absolute;left:16%;right:24%;bottom:-12px;height:30px}
.case.flip .ha-emit{left:24%;right:16%}.case-shot.no-ph .ha-emit{left:18%;right:18%}
.ha-emit i{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(42,165,245,.38)}
.ha-emit i:nth-child(2){inset:6px 10%;border-color:rgba(127,208,255,.55);box-shadow:0 0 18px rgba(42,165,245,.35),inset 0 0 12px rgba(42,165,245,.3)}
.ha-emit i:nth-child(3){inset:13px 28%;border:0;background:var(--ha-hi);box-shadow:0 0 22px 6px rgba(42,165,245,.55)}
.ha-emit i:nth-child(4){border-color:rgba(42,165,245,.5)}
.ha-mo .ha-emit i:nth-child(4){animation:haRing 3.6s ease-out infinite}
/* alambre del marco + impresión de la captura */
.ha-wire{position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none;overflow:visible}
.ha-wire rect{fill:none;stroke:var(--ha-hi);stroke-width:2;vector-effect:non-scaling-stroke}
.ha-wire rect{opacity:.35}
.ha-print{display:none}
.ha-mo .ha-print{display:block;position:absolute;inset:0;z-index:4;pointer-events:none;background-color:var(--ha-deep);
  background-image:linear-gradient(rgba(42,165,245,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(42,165,245,.1) 1px,transparent 1px);background-size:28px 28px;
  transition:transform 1s cubic-bezier(.6,0,.3,1) .62s}
.ha-print::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--ha-hi);box-shadow:0 0 16px 3px rgba(42,165,245,.7)}
.ha-mo #trabajo .ha-on .ha-print{transform:translateY(101%)}
.ha-mo #trabajo .fb-screen::after{display:none}
.ha-mo #trabajo .case:not(.ha-on) .case-shot .frame-b{background:transparent;box-shadow:0 0 0 1px rgba(42,165,245,.2)}
.ha-mo #trabajo .case .case-shot .fb-bar{transition:opacity .35s .45s}
.ha-mo #trabajo .case:not(.ha-on) .case-shot .fb-bar{opacity:0}
.ha-mo #trabajo .case .ha-wire rect{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset .7s var(--ha-ez),opacity .8s 1.4s}
.ha-mo #trabajo .case:not(.ha-on) .ha-wire rect{stroke-dashoffset:1;opacity:1}
.ha-mo #trabajo .case:not(.ha-on) .case-ph{opacity:0;translate:0 18px}
.ha-mo #trabajo .case.ha-on .case-ph{transition-delay:0s,1.25s,1.25s}
.ha-mo #trabajo .case .ha-rig>*{transition:opacity .6s,transform .8s var(--ha-ez)}
.ha-mo #trabajo .case:not(.ha-on) .ha-emit,.ha-mo #trabajo .case:not(.ha-on) .ha-cone{opacity:0}
.ha-mo #trabajo .case:not(.ha-on) .ha-emit{transform:scaleX(.3)}
.ha-mo #trabajo .case:not(.ha-on) .ha-num{opacity:0}
.ha-mo #trabajo .case .ha-cone{transition-delay:.2s}.ha-mo #trabajo .case .ha-num{transition:opacity 1.2s .3s,transform .6s var(--ha-ez)}
/* callouts HUD */
.ha-cos{position:absolute;inset:0;z-index:3;pointer-events:none;--pt:48px;--ps:48px;--pw:96px}
.ha-co{position:absolute;display:flex;align-items:center;white-space:nowrap}
.ha-co-t{display:inline-flex;align-items:baseline;gap:8px;padding:3px 8px;border-radius:4px;background:rgba(6,12,24,.86);box-shadow:inset 0 0 0 1px var(--ha-faint);
  font-family:var(--f-mono,monospace);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ha-tx)}
.ha-co-t em{font-style:normal;color:var(--ha)}
.ha-co-l{position:absolute;border:0 solid var(--ha-dim)}
.ha-co-l::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:var(--ha-hi);box-shadow:0 0 0 3px rgba(42,165,245,.18),0 0 10px var(--ha)}
/* arriba: la guía baja hasta la barra del navegador */
.ha-co-a,.ha-co-b{top:calc(var(--pt) / 2 - 11px)}
.ha-co-a{left:calc(var(--ps) + 26px)}
.case.flip .ha-co-a{left:calc(var(--pw) + 26px)}
.ha-co-b{right:calc(var(--pw) + 26px)}
.case.flip .ha-co-b{right:calc(var(--ps) + 26px)}
.ha-co-a .ha-co-l{right:100%;top:50%;width:14px;height:calc(var(--pt) / 2 + 26px);border-width:1px 0 0 1px}
.ha-co-b .ha-co-l{left:100%;top:50%;width:14px;height:calc(var(--pt) / 2 + 26px);border-width:1px 1px 0 0}
.ha-co-a .ha-co-l::after{left:-4px;bottom:-4px}.ha-co-b .ha-co-l::after{right:-4px;bottom:-4px}
/* abajo: tipo, en el lado libre del teléfono */
.ha-co-c{bottom:calc(var(--pt) / 2 - 11px);left:calc(var(--ps) + 26px)}
.case.flip .ha-co-c{left:auto;right:calc(var(--ps) + 26px)}
.ha-co-c .ha-co-l{right:100%;bottom:50%;width:14px;height:calc(var(--pt) / 2 + 30px);border-width:0 0 1px 1px}
.case.flip .ha-co-c .ha-co-l{right:auto;left:100%;border-width:0 1px 1px 0}
.ha-co-c .ha-co-l::after{left:-4px;top:-4px}.case.flip .ha-co-c .ha-co-l::after{left:auto;right:-4px}
.ha-mo #trabajo .ha-co-l{transition:clip-path .45s var(--ha-ez) 1.35s,opacity .3s 1.35s}
.ha-mo #trabajo .ha-co-t{transition:clip-path .6s steps(16) 1.6s}
.ha-mo #trabajo .case:not(.ha-on) .ha-co-l{clip-path:inset(0 0 100% 0);opacity:0}
.ha-mo #trabajo .case:not(.ha-on) .ha-co-c .ha-co-l{clip-path:inset(100% 0 0 0)}
.ha-mo #trabajo .case:not(.ha-on) .ha-co-t{clip-path:inset(0 100% 0 0)}
.ha-mo #trabajo .case:not(.ha-on) .ha-co-b .ha-co-t{clip-path:inset(0 0 0 100%)}
.ha-co-b .ha-co-l{transition-delay:1.5s!important}.ha-co-b .ha-co-t{transition-delay:1.75s!important}
.ha-co-c .ha-co-l{transition-delay:1.65s!important}.ha-co-c .ha-co-t{transition-delay:1.9s!important}
/* "En línea": señal de transmisión */
#trabajo .case-n .live{position:relative}
#trabajo .case-n .live::before{box-shadow:0 0 8px rgba(255,59,59,.7)}
#trabajo .case-n .live::after{content:"";position:absolute;left:0;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;border:1px solid var(--ha-red);opacity:0}
.ha-mo #trabajo .case.ha-run .case-n .live::after{animation:haPing 2.4s ease-out infinite}
.ha-hid #trabajo .case-n .live::after{animation-play-state:paused}
@keyframes haPing{0%{transform:scale(1);opacity:.85}100%{transform:scale(3.2);opacity:0}}
#trabajo .case-n .sep{background:var(--ha-dim)}
#trabajo .ficha,#trabajo .ficha div{border-color:rgba(42,165,245,.16)}
#trabajo .ficha div{position:relative}
#trabajo .ficha div::before{content:"";position:absolute;left:0;bottom:-1px;width:24px;height:1px;background:var(--ha);box-shadow:0 0 8px var(--ha)}
/* clientes: canales de telemetría */
#trabajo .clients{border-top-color:rgba(42,165,245,.18)}
#trabajo .cl{position:relative;isolation:isolate;overflow:hidden}
#trabajo .cl>:not(.ha-ch):not(.ha-br){position:relative;z-index:1}
#trabajo .cl-ai>.kicker{color:var(--holo-kicker,#74BDEB)}
.ha-ch{position:absolute;top:18px;right:20px;display:flex;align-items:center;gap:10px;z-index:0}
.ha-wave{width:64px;height:18px;overflow:visible}
.ha-wave path{fill:none;stroke:var(--ha);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24 90;filter:drop-shadow(0 0 3px rgba(42,165,245,.8))}
.ha-wave path+path{stroke:rgba(42,165,245,.25);stroke-dasharray:none;filter:none}
.ha-mo .ha-wave path:first-child{animation:haWave 3s linear infinite}
@keyframes haWave{from{stroke-dashoffset:114}to{stroke-dashoffset:0}}

/* =====================================================================
   #BANDA · la imagen como proyección con rejilla y barrido
   ===================================================================== */
#banda{background:var(--ha-void)}
#banda .band-img img{filter:invert(1) sepia(.35) hue-rotate(180deg) saturate(1.5) brightness(.9) contrast(1.08)}
.ha-bandfx{position:absolute;left:0;right:0;top:0;height:var(--ha-bh,100%);z-index:1;pointer-events:none;overflow:hidden}
.ha-bf-tint{position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 75% 50%,rgba(42,165,245,.1),transparent 70%)}
.ha-bf-lines{position:absolute;inset:0;background:repeating-linear-gradient(to bottom,rgba(127,208,255,.07) 0 1px,transparent 1px 4px)}
.ha-bf-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(42,165,245,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(42,165,245,.14) 1px,transparent 1px);background-size:80px 80px;
  -webkit-mask:linear-gradient(90deg,transparent 30%,#000 75%);mask:linear-gradient(90deg,transparent 30%,#000 75%)}
.ha-bf-sweep{position:absolute;top:0;bottom:0;left:0;width:22%;opacity:0;
  background:linear-gradient(90deg,rgba(127,208,255,0),rgba(127,208,255,.14) 50%,rgba(127,208,255,0))}
.ha-bf-sweep::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--ha-hi);box-shadow:0 0 12px 2px rgba(42,165,245,.7)}
.ha-mo #banda.ha-on .ha-bf-sweep{animation:haBandSweep 10s cubic-bezier(.5,0,.4,1) .2s infinite}
@keyframes haBandSweep{0%{transform:translateX(-110%);opacity:0}3%{opacity:1}24%{opacity:1}27%{transform:translateX(460%);opacity:0}100%{transform:translateX(460%);opacity:0}}
.ha-bandfx>.ha-br{inset:24px;--k:26px;--c:rgba(127,208,255,.55)}
.ha-bf-tc{position:absolute;bottom:46px;right:40px;display:flex;justify-content:flex-end;gap:24px}
.ha-bf-tc .ha-tag{color:rgba(234,240,250,.82);text-shadow:0 1px 6px rgba(0,0,0,.6)}
.ha-bf-tc .ha-tag b{font-weight:500;color:var(--ha-hi)}
.ha-bf-ruler{position:absolute;left:40px;right:40px;bottom:30px;height:8px;
  background:linear-gradient(90deg,rgba(127,208,255,.5) 1px,transparent 1px) 0 100%/40px 8px repeat-x,linear-gradient(90deg,rgba(127,208,255,.3) 1px,transparent 1px) 0 100%/8px 4px repeat-x}
.ha-mo #banda:not(.ha-on) .ha-bandfx>:not(.ha-bf-tint){opacity:0}
.ha-mo #banda .ha-bandfx>*{transition:opacity .8s .3s}
#banda .band-card{position:relative;box-shadow:var(--ha-glow),0 30px 60px -28px #000}
#banda .band-card .kicker{color:var(--holo-kicker,#74BDEB)}
#banda .band-card>.ha-br{--k:12px;--c:var(--ha);border-radius:inherit}

/* =====================================================================
   #SERVICIOS · módulos holográficos con objeto en alambre 3D
   ===================================================================== */
#servicios .svc-strip{border-top-color:rgba(42,165,245,.18)}
#servicios .svc{position:relative}
#servicios .svc+.svc{border-left-color:rgba(42,165,245,.14)}
#servicios .svc::before{content:"";position:absolute;left:0;top:-1px;width:56px;height:1px;background:var(--ha);box-shadow:0 0 10px var(--ha);transform-origin:0 50%}
#servicios .svc+.svc::before{left:var(--s6,32px)}
.ha-mo #servicios .svc-strip:not(.in) .svc::before{transform:scaleX(0)}
.ha-mo #servicios .svc-strip .svc::before{transition:transform .7s var(--ha-ez);transition-delay:calc(var(--i,0) * 140ms + 300ms)}
#servicios .svc>.kicker{color:var(--holo-kicker,#74BDEB)}
/* herramientas de IA: nombre y descripción en dos columnas alineadas (antes la 2.ª línea quedaba sangrada) */
#servicios .ia-tools{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;align-items:baseline}
#servicios .ia-tools span+b{margin-left:0}
#servicios .bt{isolation:isolate}
#servicios .bt>:not(.ha-fx):not(.ha-obj){position:relative;z-index:1}
#servicios .bt .ha-sweep{--sh:620px}
/* objetos 3D */
.ha-obj{position:absolute;top:10px;right:18px;width:72px;height:72px;scale:.76;transform-origin:100% 0;z-index:2;pointer-events:none;perspective:420px;
  transition:transform .5s var(--ha-ez),opacity .8s,filter .8s;--w:rgba(127,208,255,.85);--wd:rgba(42,165,245,.4)}
.ha-obj>b{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(-16deg) rotateY(-28deg)}
.ha-mo .ha-obj>b{animation:haSpin 16s linear infinite}
@keyframes haSpin{from{transform:rotateX(-16deg) rotateY(0)}to{transform:rotateX(-16deg) rotateY(360deg)}}
.ha-obj i{position:absolute;display:block;box-sizing:border-box}
#servicios .bt:hover .ha-obj{transform:scale(1.14);filter:drop-shadow(0 0 8px rgba(42,165,245,.7))}
.ha-mo #servicios .bt:not(.ha-on) .ha-obj{opacity:0;transform:scale(.5);filter:blur(4px)}
/* teléfono: losa de 6 caras */
.ha-o-phone i{left:50%;top:50%;border:1.5px solid var(--w);box-shadow:0 0 10px rgba(42,165,245,.35)}
.ha-o-phone i:nth-child(1),.ha-o-phone i:nth-child(2){width:34px;height:66px;margin:-33px 0 0 -17px;border-radius:7px}
.ha-o-phone i:nth-child(1){transform:translateZ(4px)}
.ha-o-phone i:nth-child(1)::before{content:"";position:absolute;inset:5px 3px 7px;border:1px solid var(--wd);border-radius:3px}
.ha-o-phone i:nth-child(1)::after{content:"";position:absolute;left:50%;top:2px;width:10px;height:2px;margin-left:-5px;border-radius:2px;background:var(--w)}
.ha-o-phone i:nth-child(2){transform:translateZ(-4px);border-color:var(--wd)}
.ha-o-phone i:nth-child(3),.ha-o-phone i:nth-child(4){width:8px;height:58px;margin:-29px 0 0 -4px;border-color:var(--wd)}
.ha-o-phone i:nth-child(3){transform:rotateY(90deg) translateZ(17px)}.ha-o-phone i:nth-child(4){transform:rotateY(90deg) translateZ(-17px)}
.ha-o-phone i:nth-child(5),.ha-o-phone i:nth-child(6){width:26px;height:8px;margin:-4px 0 0 -13px;border-color:var(--wd)}
.ha-o-phone i:nth-child(5){transform:rotateX(90deg) translateZ(33px)}.ha-o-phone i:nth-child(6){transform:rotateX(90deg) translateZ(-33px)}
/* IA: esfera neuronal (meridianos + nodos) */
.ha-o-net i{inset:6px;border-radius:50%;border:1px solid var(--wd);transform-style:preserve-3d}
.ha-o-net i:nth-child(2){transform:rotateY(60deg)}.ha-o-net i:nth-child(3){transform:rotateY(120deg)}
.ha-o-net i:nth-child(4){transform:rotateX(90deg);border-color:var(--w)}
.ha-o-net i:nth-child(5){inset:22px;transform:rotateX(90deg) translateZ(18px);border-color:var(--wd)}
.ha-o-net i:nth-child(6){inset:22px;transform:rotateX(90deg) translateZ(-18px);border-color:var(--wd)}
.ha-o-net i::before,.ha-o-net i::after{content:"";position:absolute;width:6px;height:6px;border-radius:50%;background:var(--ha-hi);box-shadow:0 0 8px 1px var(--ha)}
.ha-o-net i::before{left:50%;top:-3px;margin-left:-3px}.ha-o-net i::after{left:14%;bottom:12%}
.ha-o-net i:nth-child(n+4)::after{left:auto;right:-3px;bottom:auto;top:50%;margin-top:-3px}
.ha-o-net i:nth-child(1)::after{animation:haNode 2s ease-in-out infinite;animation-play-state:paused}
.ha-run .ha-o-net i:nth-child(1)::after{animation-play-state:running}.ha-hid .ha-o-net i:nth-child(1)::after{animation-play-state:paused} /* QA: pausa fuera de pantalla */
@media(prefers-reduced-motion:reduce){.ha-o-net i:nth-child(1)::after{animation:none}}
@keyframes haNode{0%,100%{opacity:1}50%{opacity:.35}}
/* escudo: tres capas desplazadas en Z */
.ha-o-shield svg{position:absolute;inset:6px;width:60px;height:60px;overflow:visible}
.ha-o-shield path{fill:none;stroke:var(--wd);stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.ha-o-shield svg:nth-child(1){transform:translateZ(-7px)}.ha-o-shield svg:nth-child(3){transform:translateZ(7px)}
.ha-o-shield svg:nth-child(3) path{stroke:var(--w);filter:drop-shadow(0 0 3px rgba(42,165,245,.9))}
.ha-mo .ha-o-shield>b{animation:haSwing 7s ease-in-out infinite}
@keyframes haSwing{0%,100%{transform:rotateX(-10deg) rotateY(-38deg)}50%{transform:rotateX(-10deg) rotateY(38deg)}}
.ha-o-shield>b{transform:rotateX(-10deg) rotateY(-24deg)}
/* automatizaciones: cubo de nodos conectados */
.ha-o-cube i{left:50%;top:50%;width:36px;height:36px;margin:-18px 0 0 -18px;border:1px solid var(--wd)}
.ha-o-cube i:nth-child(1){transform:translateZ(18px);border-color:var(--w)}.ha-o-cube i:nth-child(2){transform:translateZ(-18px)}
.ha-o-cube i:nth-child(3){transform:rotateY(90deg) translateZ(18px)}.ha-o-cube i:nth-child(4){transform:rotateY(90deg) translateZ(-18px)}
.ha-o-cube i::before,.ha-o-cube i::after{content:"";position:absolute;width:6px;height:6px;border-radius:50%;background:var(--ha-hi);box-shadow:0 0 8px 1px var(--ha)}
.ha-o-cube i::before{left:-3.5px;top:-3.5px}.ha-o-cube i::after{right:-3.5px;bottom:-3.5px}
.ha-o-cube i:nth-child(n+3)::before{left:auto;right:-3.5px}.ha-o-cube i:nth-child(n+3)::after{right:auto;left:-3.5px}
.ha-o-cube>b{transform:rotateX(-22deg) rotateY(-30deg)}
.ha-mo .ha-o-cube>b{animation:haSpinC 14s linear infinite}
@keyframes haSpinC{from{transform:rotateX(-22deg) rotateY(0)}to{transform:rotateX(-22deg) rotateY(-360deg)}}
/* ubicación por tarjeta */
#servicios .bt-apps .ha-obj{top:auto;bottom:32px;left:32px;right:auto;scale:1;transform-origin:50% 50%}
.ha-obj .ha-shadow{position:absolute;left:14px;right:14px;bottom:-8px;height:10px;border-radius:50%;border:1px solid rgba(42,165,245,.35);box-shadow:0 0 14px rgba(42,165,245,.3)}
/* demos vivas: el tema global (holo.css) ya las oscurece; aquí solo el brillo HUD */
#servicios .sl-bar i,#servicios .au-fill,#servicios .ai-card .bar i{box-shadow:0 0 10px rgba(42,165,245,.7)}
#servicios .sl-otp i.cur{box-shadow:inset 0 0 0 1.5px var(--ha),0 0 10px rgba(42,165,245,.5)}
#servicios .checks li::after{color:var(--ha)}

/* ---------- responsive ---------- */
@media(max-width:1359px){.ha-co-b{display:none}}
@media(max-width:1199px){
  .ha-obj{scale:.6;top:8px;right:12px}
  #servicios .bt-apps .ha-obj{display:none}
}
@media(max-width:960px){
  .ha-cos{--pt:32px;--ps:32px}
  #servicios .bt-apps .ha-obj{display:block;top:8px;right:12px;bottom:auto;left:auto;scale:.6;transform-origin:100% 0}
}
@media(max-width:600px){
  .ha-cos,.ha-tel,.ha-big,.ha-bf-ruler,.ha-ch .ha-tag{display:none}
  .ha-num{font-size:88px;top:-.28em}
  .ha-emit{bottom:-10px;height:22px}
  .ha-obj,#servicios .bt-apps .ha-obj{scale:.56;top:6px;right:8px}
  .ha-bandfx>.ha-br{inset:14px;--k:18px}
  .ha-bf-tc{display:none}
  .ha-bf-tc .ha-tag+.ha-tag{display:none}
  .ha-ch{top:14px;right:14px}
  #soluciones .pb-vis{padding-bottom:26px}
  .ha-mo #soluciones .mk{animation:none}
}
@media(prefers-reduced-motion:reduce){
  .ha-sweep,.ha-print,.ha-bf-sweep{display:none!important}
  #soluciones .mk,.ha-obj>b,.ha-emit i,.ha-pad i,.ha-cone,.ha-bars i,.ha-wave path,#trabajo .case-n .live::after{animation:none!important}
  #trabajo .case-shot .frame-b{transform:none!important}
}
#banda .band-copy{z-index:2}

/* QA: el demo de automatización vaciaba .au-out al reiniciar cada ciclo (alto 6px ↔ 22px) y empujaba las secciones de abajo en móvil (CLS); alto reservado */
#servicios .au-out{box-sizing:border-box;min-height:calc(1.5em + 6px)}
/* QA: el paso activo del demo lleva la clase .act, que choca con el botón global del chat (.act{display:inline-flex;padding;borde;píldora…}):
   el nodo cambiaba de display/alto en cada paso (salto de 208 px en móvil, CLS 0,2) y se pintaba como píldora. Se neutraliza. */
#servicios .au-node.act{display:flex;align-items:flex-start;gap:var(--s1);min-height:0;padding:0;border:0;border-radius:0;background:none;
  font-weight:inherit;font-size:inherit;line-height:inherit;color:inherit;cursor:default;transition:none;transform:none}
@media(max-width:600px){#servicios .au-node.act{display:grid;align-items:start;column-gap:var(--s4)}}

/* =====================================================================
   MÓVIL Y TABLETA (MÓVIL-2) · todo por debajo de 1280 px; el escritorio no cambia.
   Jerarquía: en cada caso captura → nombre → descripción → ficha → enlace; en servicios
   el título de la tarjeta manda y la decoración queda en segundo plano y sin pisar texto.
   ===================================================================== */
@media(max-width:1279px){
  /* decoración que en pantallas medianas y pequeñas solo ensucia */
  #trabajo .ha-num,#soluciones .ha-tel{display:none}
  #servicios .bt-apps .ha-obj{display:none!important} /* la tarjeta ya enseña teléfonos reales */
  /* objeto 3D arriba a la derecha: el título le deja su hueco */
  #servicios .bt:not(.bt-apps)>h3,#servicios .bt:not(.bt-apps) .bt-txt>h3{padding-right:48px}
  /* clientes: el canal de telemetría no pisa la etiqueta */
  #trabajo .cl>.kicker{padding-right:128px}
}

/* ---------- tableta horizontal y portátil pequeño (961–1279) ---------- */
@media(min-width:961px) and (max-width:1279px){
  /* problema ancho: texto arriba y panel abajo (en dos columnas el panel quedaba de 260 px y partía todo) */
  #soluciones .pb.w7{grid-template-columns:minmax(0,1fr)}
  /* caso: la columna de texto gana una columna (8/13) y la ficha va en filas apiladas */
  #trabajo .case-info{grid-column:8/13}
  #trabajo .case.flip .case-info{grid-column:1/6}
  #trabajo .case .ficha div{flex-direction:column;align-items:flex-start;gap:4px}
  #trabajo .case .ficha b{text-align:left}
}

/* ---------- tableta vertical y teléfono (≤960): la captura abre el caso ---------- */
@media(max-width:960px){
  #trabajo .case-shot{order:-1;margin-bottom:24px}
  #soluciones .pb-copy>*{max-width:62ch}
}
@media(min-width:601px) and (max-width:960px){
  /* captura a todo el ancho y, debajo, texto (7) + ficha (5) lado a lado */
  #trabajo .case{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:32px;align-items:start;margin-bottom:96px}
  #trabajo .case-shot{grid-column:1/-1;grid-row:1;margin-bottom:32px}
  #trabajo .case-n{grid-column:1;grid-row:2}
  #trabajo .case-info h3{grid-column:1;grid-row:3}
  #trabajo .case-info>p{grid-column:1;grid-row:4;margin-bottom:0}
  #trabajo .case-info .link-u{grid-column:1;grid-row:5;margin-top:24px}
  #trabajo .case .ficha{grid-column:2;grid-row:2/6;align-self:start}
  #trabajo .case .ficha div{flex-direction:column;align-items:flex-start;gap:4px}
  #trabajo .case .ficha b{text-align:left}
}
/* teléfono en horizontal (poca altura): captura e información lado a lado para que el caso quepa en pantalla */
@media(min-width:601px) and (max-width:960px) and (orientation:landscape) and (max-height:600px){
  #trabajo .case{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center;margin-bottom:64px}
  #trabajo .case-shot,#trabajo .case.flip .case-shot{grid-column:1/8;grid-row:1;margin-bottom:0;padding:16px 48px 16px 16px}
  #trabajo .case.flip .case-shot{grid-column:6/13;padding:16px 16px 16px 48px}
  #trabajo .case-shot.no-ph,#trabajo .case.flip .case-shot.no-ph{padding:16px!important}
  #trabajo .case-ph,#trabajo .case.flip .case-ph{width:72px;bottom:12px}
  #trabajo .case-info{display:flex;flex-direction:column;align-items:flex-start;grid-column:8/13;grid-row:1}
  #trabajo .case.flip .case-info{grid-column:1/6}
  #trabajo .case-n,#trabajo .case-info h3,#trabajo .case-info>p,#trabajo .case-info .link-u,#trabajo .case .ficha{grid-column:auto;grid-row:auto}
  #trabajo .case-info>p{margin-bottom:16px}
  #trabajo .case .ficha{align-self:stretch}
  #trabajo .ha-cos{display:none}
}
@media(max-width:600px){
  /* margen lateral de 16 px exacto (antes la placa sangraba 4 px) */
  #trabajo .case-shot,#trabajo .case.flip .case-shot{margin-left:0;margin-right:0}
  #trabajo .cl>.kicker{padding-right:64px}
  /* banda: la tarjeta no toca las esquinas HUD */
  #banda .band-copy{bottom:32px}
  .ha-bandfx>.ha-br{inset:12px;--k:16px}
}

/* ---------- soluciones en tableta: dos columnas de tarjetas ---------- */
@media(min-width:720px) and (max-width:960px){
  #soluciones .pb-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  #soluciones .pb.w7,#soluciones .pb.w5{grid-column:auto}
  #soluciones .pb{padding:24px;align-content:space-between}
}

/* ---------- servicios ---------- */
@media(max-width:768px){#servicios .svc+.svc::before{left:0}}
@media(min-width:720px) and (max-width:960px){
  /* cada tarjeta a todo el ancho, por dentro texto (5) + demostración (6): no es un móvil estirado */
  #servicios .bento{gap:24px}
  #servicios .bt.w7,#servicios .bt.w5{grid-column:1/-1}
  #servicios .bt.bt-apps{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:32px;align-items:start}
  #servicios .bt-apps .bt-txt{padding-bottom:32px}
  #servicios .bt-apps .bt-vis{margin:0 -32px 0 0;align-self:stretch}
  #servicios .bt-apps .bt-phones{height:100%;min-height:0;max-height:360px}
  #servicios .bt-apps .bt-phones .frame-p{width:46%}
  #servicios .bt-mini{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:32px;row-gap:12px;align-items:start;align-content:start}
  #servicios .bt-mini>h3,#servicios .bt-mini>p,#servicios .bt-mini>.checks{grid-column:1}
  #servicios .bt-mini>h3{padding-right:0}
  #servicios .bt-mini>.chat-win{grid-column:2;grid-row:1/span 4;margin-top:0;padding-top:0}
  #servicios .bt-mini>.sec-live{grid-column:2;grid-row:1/span 3;align-self:end;margin-top:0}
  #servicios .bt-mini>.checks{padding-top:12px}
  /* IA: el objeto baja al hueco libre bajo el texto; seguridad: arriba a la derecha, sobre el panel alineado abajo */
  #servicios .bt-ia .ha-obj{top:auto;bottom:24px;left:24px;right:auto;transform-origin:0 100%}
}
/* ---------- teléfono: ficha en filas apiladas (etiqueta sobre valor: en inglés y a 320 px el valor ya no se parte a la derecha) ---------- */
@media(max-width:600px){
  #trabajo .case .ficha div{flex-direction:column;align-items:flex-start;gap:4px}
  #trabajo .case .ficha b{text-align:left}
}
/* teléfonos estrechos (≤400): la barra del navegador, las herramientas de IA y la demo de seguridad caben sin recortes */
@media(max-width:400px){
  #trabajo .fb-url{display:block;max-width:none;min-width:0;margin:0 0 0 4px;padding:0 8px;line-height:18px;text-align:center;transform:none;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  #servicios .ia-tools{grid-template-columns:minmax(0,1fr);row-gap:0}
  #servicios .ia-tools b:not(:first-child){margin-top:12px}
  #servicios .sl-row{grid-template-columns:minmax(0,1fr);gap:4px;padding:12px 0}
  #servicios .sl-v{flex-wrap:nowrap;padding:0}
}