/* ===== Diseño ARQSYS · negro + amarillo ===== */
@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap");
:root{--ax:#F2B634;--ax2:#E0A51F;--ng:#111214;--ng2:#16181c;--ln:#2a2d33;--gr:#5b6170;--gc:#c3c7cf;--bd:#e6e8ec;--fd:#f4f5f7}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif!important;color:var(--ng)}
#wrapper{background:#fff!important}
h1,h2,h3,.h1,.h2,.h3{color:var(--ng);text-transform:none!important}
a{color:var(--ng)} a:hover{color:var(--ax2)}

/* Encabezado */
#header,#header .header-nav,#header .header-top{background:var(--ng)!important;border:0!important;box-shadow:none!important;color:#fff}
#header .header-nav{max-height:none;font-size:.85rem}
#header .header-nav a,#header .header-nav span,#header .header-nav i,#header .header-nav button,#header .header-nav .material-icons{color:var(--gc)!important}
#header .header-nav a:hover{color:var(--ax)!important}
#header .header-top{padding:.75rem 0 1rem}
#header .logo{max-height:56px;width:auto}
.top-menu a[data-depth="0"]{color:#fff!important;font-weight:500;font-size:15px;text-transform:none!important;padding:.6rem .9rem!important}
.top-menu a[data-depth="0"]:hover{color:var(--ax)!important}
.top-menu .sub-menu{border-radius:10px;border:1px solid var(--bd)}
#search_widget form input[type=text]{background:#1e2026!important;border:1px solid var(--ln)!important;color:#fff!important;border-radius:6px!important}
#search_widget form input::placeholder{color:#9aa0ab} #search_widget form i{color:#9aa0ab!important}
#header .blockcart{background:var(--ax)!important;border-radius:6px;padding:.4rem 1rem!important}
#header .blockcart *{color:var(--ng)!important;font-weight:700}
#menu-icon,#menu-icon i,#_mobile_user_info i,#_mobile_cart i{color:#fff!important}

/* Botones */
.btn{border-radius:6px!important;font-weight:700!important;text-transform:none!important;box-shadow:none!important}
.btn-primary,.add-to-cart{background:var(--ax)!important;border-color:var(--ax)!important;color:var(--ng)!important}
.btn-primary:hover,.add-to-cart:hover{background:var(--ax2)!important;border-color:var(--ax2)!important}

/* Títulos de sección */
.products-section-title{text-align:left!important;font-size:2rem!important;font-weight:700!important;margin:3rem 0 2rem!important;
  padding-bottom:1rem;border-bottom:3px solid var(--bd);position:relative}
.products-section-title:after{content:"";position:absolute;left:0;bottom:-3px;width:180px;height:3px;background:var(--ax)}

/* Tarjetas de producto */
.product-miniature .thumbnail-container{border:1px solid var(--bd);border-radius:10px;box-shadow:none!important;overflow:hidden;transition:box-shadow .2s}
.product-miniature .thumbnail-container:hover{box-shadow:0 10px 28px rgba(17,18,20,.12)!important}
.product-miniature .product-description{box-shadow:none!important}
.product-miniature .product-title a{color:var(--ng)!important;font-weight:600;text-transform:none!important}
.product-price-and-shipping .price,.current-price span{color:var(--ng)!important;font-weight:700}
.regular-price{color:var(--gr)!important}
.product-flags li.product-flag{background:var(--ng);color:#fff;border-radius:4px;box-shadow:none;font-weight:700}
.product-flags li.product-flag.discount,.product-flags li.product-flag.on-sale{background:#c0262d}
.all-product-link{color:var(--ng)!important;font-weight:700;text-decoration:underline}

/* Pie y boletín */
#footer{background:var(--ng)!important;color:var(--gc);padding-top:0!important;margin-top:4rem}
#footer .block_newsletter{background:var(--ng)!important;border-bottom:1px solid var(--ln);padding:2.5rem 0!important;margin:0!important}
#footer .block_newsletter p,#footer #block-newsletter-label{color:#fff!important;font-weight:700;font-size:1.4rem}
#footer .block_newsletter input[type=email]{border:0!important;border-radius:6px!important;height:3.25rem}
#footer .block_newsletter .btn{height:3.25rem}
#footer .block_newsletter .custom-checkbox+label,#footer .block_newsletter .condition-label,#footer .block_newsletter label{color:var(--gc)!important}
.footer-container{background:var(--ng)!important;box-shadow:none!important;padding-top:2.5rem!important;margin-top:0!important}
.footer-container,.footer-container li a,.footer-container a,.footer-container .block-contact{color:var(--gc)!important}
.footer-container a:hover{color:var(--ax)!important}
.footer-container .h3,.footer-container .h4,.footer-container .block-contact-title{color:#fff!important;text-transform:none!important}
.block-social ul li{background-color:#2a2d33!important}
.block-social ul li:hover{background-color:var(--ax)!important}

/* ===== Bloques de la portada (texto personalizado) ===== */
#custom-text{background:transparent!important;padding:0!important;box-shadow:none!important;text-align:left!important;margin:0!important}
.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}
@keyframes axMesh{
  0%{background-position:0% 0%,100% 100%,0% 100%,right center,0 0}
  100%{background-position:100% 70%,0% 20%,100% 0%,right center,0 0}}
.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}
@keyframes axGrid{to{background-position:48px 48px,48px 48px}}
.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}
@keyframes axUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes axShine{to{background-position:200% center}}

/* ---------- 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}
@keyframes axSweep{0%,55%{left:-70%}100%{left:130%}}
.ax-hero .ax-btn{animation:axPulse 2.4s ease-out infinite}
@keyframes axPulse{0%{box-shadow:0 0 0 0 rgba(242,182,52,.6)}70%{box-shadow:0 0 0 18px rgba(242,182,52,0)}100%{box-shadow:0 0 0 0 rgba(242,182,52,0)}}
.ax-btn-o{transition:transform .2s,background .2s,color .2s}
.ax-btn-o:hover{transform:translateY(-2px);background:rgba(255,255,255,.08)}

/* ---------- Productos: escenario y tarjetas con vida ---------- */
.featured-products,#products .products,.product-accessories{position:relative}
.featured-products{padding:1rem 1.5rem 2.5rem;border-radius:18px;
  background:radial-gradient(circle at 1px 1px,#dde1e7 1px,transparent 0) 0 0/22px 22px,linear-gradient(180deg,#fafbfc,#f2f4f7)}
.product-miniature .thumbnail-container{position:relative;background:#fff;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s}
.product-miniature .thumbnail-container:hover{transform:translateY(-8px);border-color:#F2B634!important;
  box-shadow:0 20px 44px rgba(17,18,20,.16),0 0 0 3px rgba(242,182,52,.25)!important}
.product-miniature .thumbnail-top{overflow:hidden}
.product-miniature .thumbnail-top img{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.product-miniature .thumbnail-container:hover .thumbnail-top img{transform:scale(1.08)}
.product-miniature .thumbnail-container:before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-130%);transition:transform .9s ease}
.product-miniature .thumbnail-container:hover:before{transform:translateX(130%)}
.product-miniature .product-price-and-shipping .price{font-size:1.3rem}
.product-flags li.product-flag.discount,.product-flags li.product-flag.on-sale{animation:axBadge 1.8s ease-in-out infinite}
@keyframes axBadge{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}

/* ---------- 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}
@keyframes axBounce{0%,100%{transform:translateY(0)}40%{transform:translateY(-8px)}70%{transform:translateY(-3px)}}
.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}
@keyframes axSpin{to{transform:rotate(360deg)}}
.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}
@keyframes axFloat{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-5rem,6rem) scale(1.25)}}
.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)}

/* ---------- Encabezado y pie ---------- */
.top-menu a[data-depth="0"]{position:relative}
.top-menu a[data-depth="0"]:after{content:"";position:absolute;left:.9rem;right:.9rem;bottom:.2rem;height:2px;background:#F2B634;
  transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.top-menu a[data-depth="0"]:hover:after{transform:scaleX(1)}
#header .blockcart{transition:transform .2s,box-shadow .2s}
#header .blockcart:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(242,182,52,.45)}
#footer:before{content:"";display:block;height:4px;background:linear-gradient(90deg,#F2B634,#3878ff,#F2B634);background-size:200% auto;animation:axShine 6s linear infinite}

/* ---------- Aparición al hacer scroll (navegadores compatibles) ---------- */
@keyframes axReveal{from{opacity:0;transform:translateY(42px) scale(.97)}to{opacity:1;transform:none}}

/* ---------- Respeta a quien prefiere menos movimiento ---------- */
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important}
}
/* === ARQSYS DINAMICO FIN === */
/* === ARQSYS AJUSTES INICIO === */
/* Carrito: texto negro sobre amarillo */
#header .header-nav .blockcart,#header .header-nav .blockcart .header,#header .header-nav .blockcart .header *,
#header .header-nav .blockcart a,#header .header-nav .blockcart span,#header .header-nav .blockcart i,
#header .blockcart.cart-preview .header,#header .blockcart.cart-preview.inactive .header *{color:#111214!important;opacity:1!important}
#header .header-nav .blockcart{background:#F2B634!important}
/* Encabezado de categoría: ocultar el espacio de imagen cuando no hay imagen */
.block-category .category-cover,#category .category-cover{display:none!important}
.block-category{min-height:0!important;padding:1.5rem 0!important;margin-bottom:1rem}
.block-category h1{margin-bottom:.5rem}
/* === ARQSYS AJUSTES FIN === */
/* === ARQSYS CATEGORIAS INICIO === */
.block-category img,.block-category .category-cover,#category .category-cover{display:none!important}
.block-category{background:none!important;border:0!important;box-shadow:none!important;padding:1rem 0 1.5rem!important;min-height:0!important}
/* Videovigilancia inteligente: el banner es el encabezado */
#category.category-id-6 .block-category{background:#111214 url("/img/c/6.jpg") center/cover no-repeat!important;
  aspect-ratio:16/5;border-radius:14px;padding:0!important;margin-bottom:1.5rem;position:relative;overflow:hidden}
#category.category-id-6 .block-category>*{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* === ARQSYS CATEGORIAS FIN === */