.ultra-stage{position:relative;overflow:hidden;min-height:700px;background:radial-gradient(circle at 72% 45%,rgba(13,100,255,.2),transparent 35%),#03070d;border-top:1px solid rgba(133,169,211,.18);border-bottom:1px solid rgba(133,169,211,.18);padding:95px 0}
.ultra-grid{position:absolute;inset:0;opacity:.22;background-image:linear-gradient(rgba(43,131,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(43,131,255,.12) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(90deg,transparent,#000 35%,#000);animation:ultraGrid 18s linear infinite}
.ultra-layout{position:relative;display:grid;grid-template-columns:.75fr 1.25fr;align-items:center;gap:55px;min-height:510px}
.ultra-copy{position:relative;z-index:9}.ultra-copy h2{font-size:clamp(40px,5vw,66px);line-height:.98;letter-spacing:-.05em;text-transform:uppercase;margin:14px 0 24px}.ultra-copy h2 span{color:#2b83ff}.ultra-copy>p:not(.eyebrow){color:#9aa9bd;line-height:1.75;max-width:470px}
.ultra-nav{display:flex;gap:15px;align-items:center;margin-top:34px}.ultra-nav button{width:50px;height:50px;border-radius:50%;border:1px solid rgba(43,131,255,.5);background:rgba(8,16,26,.72);color:#fff;cursor:pointer;transition:.25s}.ultra-nav button:hover{background:#0d64ff;transform:scale(1.08)}.ultra-count{color:#9aa9bd;font-size:11px;letter-spacing:.15em}
.ultra-cards{height:500px;position:relative;perspective:1400px}.ultra-card{position:absolute;top:50%;left:50%;width:min(520px,75vw);height:440px;border:1px solid rgba(120,169,230,.28);border-radius:20px;overflow:hidden;background:#08101a;transition:transform .85s cubic-bezier(.22,.8,.2,1),opacity .7s,filter .7s;box-shadow:0 35px 90px rgba(0,0,0,.5)}
.ultra-card[data-offset="0"]{z-index:5;opacity:1;transform:translate(-50%,-50%) translateX(-80px) rotateY(-4deg)}
.ultra-card[data-offset="1"]{z-index:4;opacity:.55;transform:translate(-50%,-50%) translateX(270px) translateZ(-180px) rotateY(-16deg) scale(.82);filter:brightness(.55)}
.ultra-card[data-offset="2"]{z-index:3;opacity:.14;transform:translate(-50%,-50%) translateX(470px) translateZ(-320px) rotateY(-22deg) scale(.67)}
.ultra-card[data-offset="3"],.ultra-card[data-offset="4"]{opacity:0;transform:translate(-50%,-50%) translateX(600px) scale(.55)}
.ultra-card[data-offset="5"]{z-index:2;opacity:.1;transform:translate(-50%,-50%) translateX(-380px) translateZ(-250px) rotateY(18deg) scale(.7)}
.ultra-image{height:285px;background-size:cover;background-color:#0a1420;transition:transform 5s ease}.ultra-card[data-offset="0"] .ultra-image{transform:scale(1.08)}.ultra-card-copy{padding:22px 25px;background:linear-gradient(180deg,#0b1522,#07101a)}.ultra-card-copy span{color:#2b83ff;text-transform:uppercase;letter-spacing:.14em;font-size:9px}.ultra-card-copy h3{margin:7px 0;text-transform:uppercase}.ultra-card-copy p{color:#9aa9bd;font-size:12px;line-height:1.5;margin:0}
.ultra-float{position:absolute;z-index:8;width:72px;height:72px;display:grid;place-items:center;border:1px solid rgba(43,131,255,.42);border-radius:18px;color:#2b83ff;background:rgba(7,17,29,.7);backdrop-filter:blur(12px);box-shadow:0 18px 55px rgba(0,0,0,.45),inset 0 0 25px rgba(13,100,255,.08);font-size:30px}.ultra-float.one{right:8%;top:11%;animation:ultraFloat 6s ease-in-out infinite}.ultra-float.two{right:3%;bottom:12%;animation:ultraFloat 7.5s ease-in-out -2s infinite}.ultra-float.three{left:47%;bottom:8%;animation:ultraFloat 6.8s ease-in-out -4s infinite}
.brand-strip{overflow:hidden}.brand-strip-inner{display:flex!important;width:max-content!important;gap:0!important;animation:brandUltra 28s linear infinite}.brand-strip-inner span,.brand-strip-inner strong{width:165px;flex:0 0 165px}.brand-strip-inner span{padding-left:20px}
.about-art{background-image:url("./images/services-technology.webp")!important}.hero-media,.project-image{background-color:#0c1724}
.ultra-shop{position:relative;overflow:hidden;padding:72px 0;border-block:1px solid rgba(43,131,255,.28);background:linear-gradient(105deg,#07111e 15%,#0b2f69 100%)}.ultra-shop:before{content:"";position:absolute;inset:-100% -20%;background:linear-gradient(100deg,transparent 43%,rgba(255,255,255,.11) 50%,transparent 57%);animation:shopSweep 6s linear infinite}.ultra-shop-content{position:relative;display:flex;justify-content:space-between;align-items:center;gap:35px}.ultra-shop h2{margin:8px 0 10px;font-size:clamp(32px,4vw,52px);text-transform:uppercase}.ultra-shop p{margin:0;color:#bfd0e6}.ultra-shop .button{background:#fff;border-color:#fff;color:#07111e;min-width:210px}
.floating-whatsapp{animation:waUltra 2.8s ease-in-out infinite}
@keyframes ultraGrid{to{background-position:64px 64px}}@keyframes ultraFloat{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-24px) rotate(4deg)}}@keyframes brandUltra{to{transform:translateX(-50%)}}@keyframes shopSweep{to{transform:translateX(55%)}}@keyframes waUltra{50%{transform:scale(1.07);box-shadow:0 15px 45px rgba(0,0,0,.45),0 0 0 14px rgba(22,198,91,0)}}
@media(max-width:1000px){.ultra-layout{grid-template-columns:1fr}.ultra-stage{min-height:980px}.ultra-float{display:none}}
@media(max-width:780px){.ultra-stage{min-height:900px;padding:70px 0}.ultra-cards{height:430px}.ultra-card{width:min(92vw,520px);height:400px}.ultra-card[data-offset="0"]{transform:translate(-50%,-50%)}.ultra-card[data-offset="1"]{transform:translate(-50%,-50%) translateX(170px) scale(.77)}.ultra-card[data-offset="5"]{transform:translate(-50%,-50%) translateX(-190px) scale(.7)}.ultra-image{height:245px}.ultra-shop-content{flex-direction:column;align-items:flex-start}}
@media(prefers-reduced-motion:reduce){.ultra-grid,.ultra-float,.brand-strip-inner,.ultra-shop:before,.floating-whatsapp{animation:none!important}}

/* Proyectos filtrables: la grilla cambia de verdad y conserva una transición premium. */
.projects-grid{align-items:stretch}
.project-card[hidden]{display:none!important}
.project-card.is-filtering{pointer-events:none;transition:opacity .23s ease,transform .23s ease,filter .23s ease!important}
.project-card.is-filtering.will-hide{opacity:0;transform:translateY(18px) scale(.94);filter:blur(7px)}
.project-card.filter-enter{animation:projectFilterIn .58s cubic-bezier(.18,.82,.2,1) var(--filter-delay,0ms) both}
.filters button.active{background:linear-gradient(135deg,#0d64ff,#2b83ff);border-color:#62a7ff;color:#fff;box-shadow:0 10px 30px rgba(13,100,255,.32),inset 0 1px rgba(255,255,255,.2)}
.filters button:active{transform:translateY(1px) scale(.96)}
@keyframes projectFilterIn{from{opacity:0;transform:translateY(28px) scale(.91);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}

/* Carrusel premium de marcas, independiente de la cinta pequeña de la portada. */
.brands-section{position:relative;overflow:hidden}
.brands-section:before{content:"";position:absolute;width:520px;height:520px;left:-240px;top:-180px;border-radius:50%;background:radial-gradient(circle,rgba(13,100,255,.2),transparent 68%);filter:blur(15px);animation:brandAura 9s ease-in-out infinite alternate;pointer-events:none}
.brands-grid{position:relative;display:block!important;max-width:none!important;overflow:hidden;padding:30px 0 42px;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.brands-grid:before,.brands-grid:after{content:"";position:absolute;z-index:2;top:12px;bottom:24px;width:90px;pointer-events:none}
.brands-grid:before{left:0;background:linear-gradient(90deg,var(--bg,#02060c),transparent)}
.brands-grid:after{right:0;background:linear-gradient(-90deg,var(--bg,#02060c),transparent)}
.brands-track{display:flex;width:max-content;gap:18px;animation:brandsMarquee 25s linear infinite;will-change:transform}
.brands-grid:hover .brands-track{animation-play-state:paused}
.brand-chip{position:relative;display:grid!important;place-items:center;flex:0 0 220px!important;height:112px!important;border:1px solid rgba(100,158,235,.22)!important;border-radius:18px!important;background:linear-gradient(145deg,rgba(14,28,47,.9),rgba(5,11,19,.96))!important;color:#9eb3cc!important;font-size:19px!important;font-weight:800!important;letter-spacing:.03em;overflow:hidden;isolation:isolate;box-shadow:0 18px 40px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.05);transition:transform .38s cubic-bezier(.18,.82,.2,1),color .3s,border-color .3s,box-shadow .3s!important}
.brand-chip:before{content:"";position:absolute;inset:-60%;z-index:-1;background:conic-gradient(from 0deg,transparent 0 38%,rgba(43,131,255,.42) 48%,transparent 58% 100%);animation:brandSpin 6s linear infinite;opacity:.55}
.brand-chip:after{content:"";position:absolute;inset:1px;z-index:-1;border-radius:17px;background:radial-gradient(circle at 50% 120%,rgba(13,100,255,.22),transparent 56%),#07101b}
.brand-chip:hover{z-index:3;color:#fff!important;border-color:#2b83ff!important;transform:translateY(-10px) rotateX(7deg) scale(1.06)!important;box-shadow:0 25px 55px rgba(0,0,0,.5),0 0 36px rgba(13,100,255,.24)!important}
.brand-orbit{position:absolute;width:58px;height:58px;border:1px solid rgba(77,150,255,.18);border-radius:50%;animation:brandOrbit 4s ease-in-out infinite;box-shadow:inset 0 0 22px rgba(13,100,255,.08)}
@keyframes brandsMarquee{to{transform:translateX(calc(-50% - 9px))}}
@keyframes brandSpin{to{transform:rotate(360deg)}}
@keyframes brandOrbit{0%,100%{transform:scale(.8);opacity:.35}50%{transform:scale(1.65);opacity:.08}}
@keyframes brandAura{to{transform:translate(120px,70px) scale(1.2)}}
@media(max-width:780px){.brand-chip{flex-basis:172px!important;height:92px!important;font-size:15px!important}.brands-track{gap:12px;animation-duration:20s}@keyframes brandsMarquee{to{transform:translateX(calc(-50% - 6px))}}}
@media(prefers-reduced-motion:reduce){.project-card.filter-enter{animation-duration:.01ms}.brands-track{animation-duration:42s}.brand-chip:before,.brand-orbit,.brands-section:before{animation:none}}

/* Carrusel de marcas v3: dos pistas completas, sin saltos ni espacios vacíos. */
.brands-section{padding-bottom:110px!important;background:
radial-gradient(circle at 50% 50%,rgba(13,100,255,.1),transparent 42%),
linear-gradient(180deg,transparent,rgba(4,12,23,.72),transparent)}
.brands-stage{position:relative;isolation:isolate;margin-top:38px;padding:28px 0;overflow:hidden}
.brands-stage:before,.brands-stage:after{content:"";position:absolute;z-index:6;top:0;bottom:0;width:min(12vw,150px);pointer-events:none}
.brands-stage:before{left:0;background:linear-gradient(90deg,#02060c 5%,rgba(2,6,12,.8) 42%,transparent)}
.brands-stage:after{right:0;background:linear-gradient(-90deg,#02060c 5%,rgba(2,6,12,.8) 42%,transparent)}
.brands-beam{position:absolute;z-index:-1;inset:12% -20%;background:linear-gradient(110deg,transparent 35%,rgba(43,131,255,.12) 48%,rgba(79,169,255,.22) 50%,rgba(43,131,255,.12) 52%,transparent 65%);filter:blur(10px);animation:brandsBeam 6s ease-in-out infinite}
.brands-marquee{display:flex;width:100%;overflow:hidden;padding:12px 0}
.brands-marquee+.brands-marquee{margin-top:10px}
.brands-marquee .brands-track{display:flex!important;width:max-content!important;gap:0!important;animation:brandsForward 24s linear infinite!important;will-change:transform}
.brands-marquee-reverse .brands-track{animation-name:brandsReverse!important;animation-duration:27s!important}
.brands-set{display:flex;flex:none;gap:18px;padding-right:18px}
.brands-stage:hover .brands-track{animation-play-state:paused!important}
.brands-stage .brand-chip{position:relative;display:grid!important;grid-template-columns:54px 1fr!important;grid-template-rows:1fr 1fr!important;align-items:center!important;column-gap:15px!important;flex:0 0 235px!important;width:235px!important;height:104px!important;padding:17px 20px!important;border:1px solid rgba(114,161,224,.24)!important;border-radius:20px!important;background:linear-gradient(145deg,rgba(16,31,51,.94),rgba(4,10,18,.98))!important;overflow:hidden!important;box-shadow:0 16px 40px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.06)!important;transform:translateZ(0);transition:transform .38s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s!important}
.brands-stage .brand-chip:before{content:"";position:absolute;inset:-80%;background:conic-gradient(from 180deg,transparent 0 42%,var(--brand-glow,#287dff) 49%,transparent 56%);opacity:.23;animation:brandCardSpin 7s linear infinite;pointer-events:none}
.brands-stage .brand-chip:after{content:"";position:absolute;inset:1px;z-index:0;border-radius:19px;background:linear-gradient(135deg,rgba(15,28,46,.96),rgba(4,9,16,.98));pointer-events:none}
.brands-stage .brand-chip>*{position:relative;z-index:1}
.brand-symbol{grid-row:1/3;display:grid;place-items:center;width:54px;height:54px;border-radius:16px;color:#fff;font-size:24px;font-weight:900;background:linear-gradient(145deg,var(--brand,#176cff),color-mix(in srgb,var(--brand,#176cff),#000 38%));box-shadow:0 0 0 1px rgba(255,255,255,.1),0 0 28px color-mix(in srgb,var(--brand,#176cff),transparent 62%);animation:brandSymbol 3.2s ease-in-out infinite}
.brands-stage .brand-chip strong{align-self:end;color:#f7fbff!important;font-size:18px!important;line-height:1!important;letter-spacing:.02em;white-space:nowrap}
.brands-stage .brand-chip small{align-self:start;margin-top:7px;color:#7691ae;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.brands-stage .brand-chip:hover{z-index:4;transform:translateY(-7px) scale(1.055)!important;border-color:color-mix(in srgb,var(--brand,#176cff),#fff 20%)!important;box-shadow:0 26px 55px rgba(0,0,0,.48),0 0 34px color-mix(in srgb,var(--brand,#176cff),transparent 70%)!important}
.brand-hikvision{--brand:#e52028;--brand-glow:#e52028}.brand-dahua{--brand:#ef1b2d;--brand-glow:#ef1b2d}.brand-ezviz{--brand:#7b4dff;--brand-glow:#7b4dff}.brand-unv{--brand:#ec6c18;--brand-glow:#ec6c18}.brand-zkteco{--brand:#1477c9;--brand-glow:#1477c9}.brand-akubela{--brand:#0aa99a;--brand-glow:#0aa99a}.brand-ruijie{--brand:#e51d2a;--brand-glow:#e51d2a}.brand-reyee{--brand:#ff7a00;--brand-glow:#ff7a00}.brand-ubiquiti{--brand:#087df0;--brand-glow:#087df0}.brand-tplink{--brand:#16b8be;--brand-glow:#16b8be}
@keyframes brandsForward{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes brandsReverse{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
@keyframes brandsBeam{0%,100%{transform:translateX(-24%);opacity:.3}50%{transform:translateX(24%);opacity:1}}
@keyframes brandCardSpin{to{transform:rotate(360deg)}}
@keyframes brandSymbol{0%,100%{transform:translateY(0);filter:brightness(1)}50%{transform:translateY(-3px);filter:brightness(1.22)}}
@media(max-width:780px){.brands-section{padding-bottom:78px!important}.brands-stage{margin-inline:-20px}.brands-set{gap:12px;padding-right:12px}.brands-stage .brand-chip{flex-basis:196px!important;width:196px!important;height:88px!important;padding:13px 15px!important;grid-template-columns:44px 1fr!important;column-gap:12px!important}.brand-symbol{width:44px;height:44px;border-radius:13px;font-size:20px}.brands-stage .brand-chip strong{font-size:15px!important}.brands-stage .brand-chip small{font-size:9px}.brands-marquee .brands-track{animation-duration:19s!important}.brands-marquee-reverse .brands-track{animation-duration:22s!important}}
@media(prefers-reduced-motion:reduce){.brands-marquee .brands-track{animation-duration:45s!important}.brands-marquee-reverse .brands-track{animation-duration:50s!important}.brands-beam,.brands-stage .brand-chip:before,.brand-symbol{animation:none!important}}

/* El cliente pidió movimiento visible aun cuando Windows tenga desactivadas
   las animaciones del sistema. Se conservan velocidades suaves y sin destellos. */
@media(prefers-reduced-motion:reduce){
.hero-slider .hero-media{transition:opacity 1.1s ease,transform 7s ease!important}
.hero-slide-progress{display:block!important}
.hero-slide-progress.running{animation:slideProgress 6.5s linear forwards!important}
.ultra-grid{animation:ultraGrid 18s linear infinite!important}
.ultra-float{animation:ultraFloat 6s ease-in-out infinite!important}
.brand-strip-inner{animation:brandUltra 32s linear infinite!important}
.brands-marquee .brands-track{animation:brandsForward 45s linear infinite!important}
.brands-marquee-reverse .brands-track{animation:brandsReverse 50s linear infinite!important}
}