:root{--ax:#F2B634;--ax2:#E0A51F;--ng:#111214;--ng2:#16181c;--ln:#2a2d33;--gr:#5b6170;--gc:#c3c7cf;--bd:#e6e8ec;--fd:#f4f5f7}

.ax-wrap{display:flex;flex-direction:column;gap:4rem;margin-bottom:1rem}

.ax-cond{font-family:"Barlow Condensed",sans-serif;font-weight:800;text-transform:uppercase;line-height:.95}

.ax-hero{background:var(--ng2) url("/img/cms/arqsys-hero.jpg") right center/cover no-repeat;color:#fff;border-radius:12px;padding:4.5rem 3.5rem;position:relative;overflow:hidden}

.ax-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(17,18,20,.92) 40%,rgba(17,18,20,.35))}

.ax-hero>*{position:relative}

.ax-eyebrow{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:1.4rem;letter-spacing:1.5px;text-transform:uppercase;color:#d7dae0;margin:0 0 1rem}

.ax-hero h2{font-size:4.5rem;color:#fff;margin:0 0 1.25rem}

.ax-hero h2 span{color:var(--ax);display:block}

.ax-hero p.ax-lead{font-size:1.1rem;line-height:1.6;color:var(--gc);max-width:34rem;margin:0 0 2rem}

.ax-btns{display:flex;flex-wrap:wrap;gap:.9rem}

.ax-btn{display:inline-block;background:var(--ax);color:var(--ng)!important;font-weight:700;padding:1rem 1.9rem;border-radius:6px;text-decoration:none!important}

.ax-btn:hover{background:var(--ax2)}

.ax-btn-o{display:inline-block;border:2px solid #fff;color:#fff!important;font-weight:700;padding:.875rem 1.75rem;border-radius:6px;text-decoration:none!important}

.ax-btn-o:hover{border-color:var(--ax);color:var(--ax)!important}

.ax-trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;padding-bottom:2rem;border-bottom:1px solid var(--bd);margin-top:-1.5rem}

.ax-trust div{display:flex;align-items:center;gap:.9rem}

.ax-trust svg{flex:none;stroke:var(--ax)}

.ax-trust strong{display:block;font-size:1rem}

.ax-trust small{display:block;color:var(--gr);font-size:.875rem}

.ax-banners{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.75rem}

.ax-banner{display:flex;flex-direction:column;justify-content:center;gap:.4rem;min-height:16rem;padding:2.5rem;border-radius:12px;color:var(--ng)!important;text-decoration:none!important;background-repeat:no-repeat;background-position:right 1.5rem center;background-size:auto 75%}

.ax-banner.a{background-color:var(--ax);background-image:url("/img/cms/banner-mobotix.png")}

.ax-banner.b{background-color:#e7edf4;background-image:url("/img/cms/banner-aruba.png")}

.ax-banner .ax-k{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:1.35rem;text-transform:uppercase}

.ax-banner .ax-cond{font-size:3rem}

.ax-banner.b .ax-cond em{color:#8a6a10;font-style:normal}

.ax-banner u{font-weight:700;margin-top:.75rem}

.ax-h{font-size:2.1rem;font-weight:700;margin:0}

.ax-sub{color:var(--gr);margin:.5rem 0 0}

.ax-line{height:3px;background:var(--bd);margin:1.25rem 0 2rem;position:relative}

.ax-line:after{content:"";position:absolute;left:0;top:0;width:180px;height:3px;background:var(--ax)}

.ax-cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1.25rem}

.ax-cats a{background:var(--fd);border-radius:10px;padding:2rem 1rem;display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center;color:var(--ng)!important;text-decoration:none!important;transition:background .2s}

.ax-cats a:hover{background:var(--ax)}

.ax-cats svg{margin-bottom:.5rem;stroke:currentColor}

.ax-cats strong{font-size:1rem}

.ax-cats small{color:var(--gr);font-size:.8rem}

.ax-cats a:hover small{color:var(--ng)}

.ax-serv{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.75rem}

.ax-serv div{background:var(--ng);color:#fff;border-radius:12px;padding:2.75rem;display:flex;flex-direction:column;gap:.75rem;align-items:flex-start}

.ax-serv .ax-k{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:1.35rem;text-transform:uppercase;color:#d7dae0}

.ax-serv .ax-cond{font-size:2.9rem;color:#fff}
 .ax-serv .ax-cond span{color:var(--ax)}

.ax-serv p{color:var(--gc);line-height:1.6;margin:0 0 .5rem}

.ax-brands{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem}

.ax-brands span{height:6rem;border:1px solid var(--bd);border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:700;color:#3a3f48;font-size:1.05rem}
@media (max-width:767px){
  .ax-hero{padding:3rem 1.5rem}.ax-hero h2{font-size:3rem}
  .ax-banner{background-image:none!important}.ax-banner .ax-cond,.ax-serv .ax-cond{font-size:2.3rem}
}

/* === ARQSYS DINAMICO INICIO === */

/* ---------- Bloque principal: fondo vivo ---------- */
.ax-hero{isolation:isolate;
  background:
    radial-gradient(38rem 26rem at 82% 18%,rgba(242,182,52,.55),transparent 62%),
    radial-gradient(34rem 28rem at 68% 92%,rgba(56,120,255,.45),transparent 60%),
    radial-gradient(26rem 20rem at 30% 110%,rgba(242,182,52,.18),transparent 60%),
    url("/img/cms/arqsys-hero.jpg") right center/cover no-repeat,#0d0f13!important;
  background-size:150% 150%,150% 150%,150% 150%,cover,auto!important;
  animation:axMesh 7s ease-in-out infinite alternate}

.ax-hero:before{background:linear-gradient(90deg,rgba(13,15,19,.88) 30%,rgba(13,15,19,.15))!important;z-index:0}

.ax-hero:after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse at 72% 50%,#000 25%,transparent 72%);mask-image:radial-gradient(ellipse at 72% 50%,#000 25%,transparent 72%);
  animation:axGrid 6s linear infinite}

.ax-hero>*{position:relative;z-index:1;animation:axUp .8s cubic-bezier(.2,.8,.2,1) both}

.ax-hero>*:nth-child(2){animation-delay:.12s}
.ax-hero>*:nth-child(3){animation-delay:.24s}
.ax-hero>*:nth-child(4){animation-delay:.36s}


/* ---------- Botones: relieve, brillo y pulso ---------- */
.btn-primary,.add-to-cart,.ax-btn{position:relative;overflow:hidden;
  box-shadow:0 6px 18px rgba(242,182,52,.35)!important;transition:transform .2s ease,box-shadow .2s ease,background .2s}

.btn-primary:hover,.add-to-cart:hover,.ax-btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(242,182,52,.5)!important}

.btn-primary:active,.add-to-cart:active,.ax-btn:active{transform:translateY(0)}

.btn-primary:after,.add-to-cart:after,.ax-btn:after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:axSweep 2.6s ease-in-out infinite}

.ax-hero .ax-btn{animation:axPulse 2.4s ease-out infinite}

.ax-btn-o{transition:transform .2s,background .2s,color .2s}

.ax-btn-o:hover{transform:translateY(-2px);background:rgba(255,255,255,.08)}


/* ---------- Categorías, banners, servicios y marcas ---------- */
.ax-cats a{border:1px solid transparent;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,background .3s,border-color .3s}

.ax-cats a:hover{transform:translateY(-6px);box-shadow:0 16px 34px rgba(17,18,20,.14);border-color:#E0A51F}

.ax-cats a:hover svg{animation:axBounce .6s ease}

.ax-banner{position:relative;overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,background-size .6s}

.ax-banner:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(17,18,20,.2);background-size:auto 85%}

.ax-banner:after{content:"";position:absolute;width:18rem;height:18rem;right:-5rem;bottom:-7rem;border-radius:50%;
  border:2px solid rgba(17,18,20,.12);animation:axSpin 24s linear infinite;pointer-events:none}

.ax-banner:before{content:"";position:absolute;width:11rem;height:11rem;right:2rem;bottom:-4rem;border-radius:50%;
  border:2px dashed rgba(17,18,20,.12);animation:axSpin 16s linear infinite reverse;pointer-events:none}

.ax-serv>div{position:relative;overflow:hidden;isolation:isolate}

.ax-serv>div>*{position:relative;z-index:1}

.ax-serv>div:before{content:"";position:absolute;z-index:0;width:24rem;height:24rem;right:-7rem;top:-8rem;
  background:radial-gradient(circle,rgba(242,182,52,.38),transparent 65%);animation:axFloat 9s ease-in-out infinite alternate}

.ax-serv>div:nth-child(2):before{background:radial-gradient(circle,rgba(56,120,255,.35),transparent 65%);animation-duration:11s}

.ax-brands span{transition:transform .25s,border-color .25s,color .25s,box-shadow .25s}

.ax-brands span:hover{transform:translateY(-4px);border-color:#F2B634;color:#111214;box-shadow:0 10px 24px rgba(17,18,20,.1)}

.ax-trust svg{transition:transform .4s}

.ax-trust>div:hover svg{transform:rotate(-8deg) scale(1.12)}



/* ---------- Texto del banner siempre legible ---------- */
html body .ax-hero, html body .ax-hero * { opacity: 1; filter: none; mix-blend-mode: normal; }
html body .ax-hero .ax-eyebrow { color: #f2b634 !important; }
html body .ax-hero h2 { color: #ffffff !important; }
html body .ax-hero h2 span { color: #f2b634 !important; }
html body .ax-hero p.ax-lead { color: #d3d6dc !important; }
.ax-hero>* { animation-fill-mode: both; }
.ax-brands a { height:6rem;border:1px solid var(--bd);border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:700;color:#3a3f48 !important;font-size:1.05rem;text-decoration:none !important;transition:transform .25s,border-color .25s,color .25s,box-shadow .25s }
.ax-brands a:hover { transform:translateY(-4px);border-color:#F2B634;color:#111214 !important;box-shadow:0 10px 24px rgba(17,18,20,.1) }
@media (prefers-reduced-motion: reduce) { .ax-hero, .ax-hero *, .ax-banner:before, .ax-banner:after, .ax-serv>div:before, .ax-btn:after { animation: none !important; } }