/* Banners con marco animado (tema claro): el banner deja de ir de borde a borde, se redondea y lleva un contorno
   cian → azul → violeta que gira despacio, más un brillo suave debajo. Sin degradado que lo "lave" contra el fondo claro.
   Solo transform/opacity de un ángulo: no mueve el diseño ni gasta batería. Con "reducir movimiento" queda quieto. */
@property --giro{syntax:'<angle>';inherits:false;initial-value:0deg;}
@keyframes marco-giro{to{--giro:360deg;}}

/* ---- inicio ---- */
.hero{padding:88px 24px 0;}
.hero-fade{display:none;}
.hero-img-wrap{max-width:1180px;margin:0 auto;border-radius:22px;isolation:isolate;
  box-shadow:0 22px 50px -18px rgba(59,130,246,.45),0 10px 30px -12px rgba(124,58,237,.35);}

/* ---- Portátiles (imagen) y Computadores (video) ---- */
.head.bn-img,.head.bn-video{width:auto;max-width:1180px;margin:84px auto 0;border-radius:22px;isolation:isolate;
  box-shadow:0 22px 50px -18px rgba(59,130,246,.45),0 10px 30px -12px rgba(124,58,237,.35);}
.head.bn-img .wrap,.head.bn-video .wrap{padding:0 clamp(22px,4vw,48px);}
@media(max-width:1228px){.head.bn-img,.head.bn-video{margin-left:24px;margin-right:24px;}}

/* ---- el contorno ---- */
.hero-img-wrap::before,.head.bn-img::before,.head.bn-video::before{
  content:'';display:block;position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:inherit;padding:2.5px;
  background:conic-gradient(from var(--giro),#00d9ff,#3b82f6 22%,#7c3aed 44%,rgba(124,58,237,.15) 60%,#00d9ff 80%,#00d9ff);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:marco-giro 7s linear infinite;}

/* ---- banner de cada marca (logo con efecto eléctrico): azul noche COMERTEC para que el neón resalte ---- */
.marca-banner{max-width:1180px;margin:84px auto 0;border-radius:22px;isolation:isolate;border-bottom:0;color:#f5f7fa;
  background:
    radial-gradient(circle at 70% 50%,rgba(173,109,255,.30),transparent 44%),
    radial-gradient(circle at 88% 85%,rgba(0,217,255,.16),transparent 38%),
    linear-gradient(180deg,#081033 0%,#0b1440 55%,#0a0f2e 100%);
  box-shadow:0 22px 50px -18px rgba(59,130,246,.45),0 10px 30px -12px rgba(124,58,237,.35);}
.marca-banner .mb-text{padding:0 clamp(22px,4vw,48px);}
.marca-banner h1{color:#f5f7fa;}
.marca-banner .mb-sub{color:#b8c1d0;}
.marca-banner .mb-back{color:#00d9ff;}
@media(max-width:1228px){.marca-banner{margin-left:24px;margin-right:24px;}}
.marca-banner::after{
  content:'';position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:inherit;padding:2.5px;
  background:conic-gradient(from var(--giro),#00d9ff,#3b82f6 22%,#7c3aed 44%,rgba(124,58,237,.15) 60%,#00d9ff 80%,#00d9ff);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:marco-giro 7s linear infinite;}

@media(max-width:760px){
  .marca-banner{margin:76px 12px 0;border-radius:16px;padding-bottom:6px;}
  .hero{padding:80px 12px 0;}
  .hero-img-wrap,.head.bn-img,.head.bn-video{border-radius:16px;}
  .head.bn-img,.head.bn-video{margin:76px 12px 0;}
}
@media (prefers-reduced-motion: reduce){
  .hero-img-wrap::before,.head.bn-img::before,.head.bn-video::before,.marca-banner::after{animation:none;}
}