/* ERA GAMER — Banner Hero (variante oscura neón) */
.erabh{width:100%; margin:0 0 8px;}
.erabh-hero{--fs:120px; position:relative; width:100%; max-width:1120px; margin:0 auto;
  height:clamp(185px,25vw,340px); background:#0a0a12; border-radius:14px; overflow:hidden;
  border:1px solid #1c1c36; box-shadow:0 18px 50px rgba(0,0,0,.45);}

/* grilla cyber + glow sutil de fondo */
.erabh-hero::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; z-index:0;
  background:
    linear-gradient(rgba(0,240,255,.05) 1px,transparent 1px) 0 0/44px 44px,
    linear-gradient(90deg,rgba(0,240,255,.05) 1px,transparent 1px) 0 0/44px 44px,
    radial-gradient(ellipse at 50% 42%,rgba(124,58,237,.18),transparent 62%);
  animation:erabh-grid 16s linear infinite;}
@keyframes erabh-grid{to{background-position:0 44px,44px 0,0 0;}}

.erabh-sl{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; visibility:hidden;}
.erabh-sl.cur{visibility:visible;}

.erabh-half{font-family:'Anton',sans-serif; font-weight:400; font-size:var(--fs); line-height:.82;
  white-space:nowrap; letter-spacing:-.01em; text-transform:uppercase; flex:0 0 auto; position:relative; z-index:3;}

/* banda = el VIDEO. width 0 (cerrada) -> 48% (abierta). Al crecer empuja las letras = abren la pantalla */
.erabh-band{flex:0 0 auto; width:0; height:90%; align-self:center; background:#05070d;
  overflow:hidden; position:relative; z-index:2; transition:width .5s cubic-bezier(.62,0,.2,1);}
.erabh-sl.open .erabh-band{width:48%;}
.erabh-scene{position:absolute; inset:0; z-index:0;}
.erabh-vid{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; display:block;}

/* colores neón por categoría */
.erabh-g .erabh-half{color:#00f0ff; text-shadow:0 0 24px rgba(0,240,255,.55);}
.erabh-c .erabh-half{color:#ff00aa; text-shadow:0 0 24px rgba(255,0,170,.55);}
.erabh-w .erabh-half{color:#39ff14; text-shadow:0 0 22px rgba(57,255,20,.5);}

/* animaciones de relleno (fallback si falta el video) */
.erabh-sg{background:linear-gradient(120deg,#06141c,#0a0a16 60%,#10182a);}
.erabh-sc{background:linear-gradient(125deg,#1a0a2e,#3a0d4f 50%,#1a0a20);}
.erabh-sw{background:radial-gradient(circle at 50% 60%,#0e2417,#06120c 72%);}

.erabh-dots{position:absolute; left:0; right:0; bottom:9px; z-index:5; display:flex; gap:10px; justify-content:center;}
.erabh-dots button{width:9px; height:9px; border-radius:50%; border:0; background:rgba(255,255,255,.28);
  cursor:pointer; padding:0; transition:.3s;}
.erabh-dots button.act{background:#00f0ff; width:28px; border-radius:5px; box-shadow:0 0 8px #00f0ff;}

@media (max-width:600px){
  .erabh-hero{border-radius:10px; height:clamp(150px,46vw,230px);}
  .erabh-hero::before{animation:none;}
}

/* En celular el banner se quita por completo: en telefonos cargaba mal y
   entorpecia la navegacion. Esta regla evita el parpadeo antes de que el JS
   lo elimine del DOM. En desktop queda intacto. */
@media (max-width:768px){
  .erabh{display:none !important;}
}