/* MAYA MU ONLINE — contador de actividad ESTIMADA (conexiones reales × factor).
   Solo interfaz pública: no cambia registros, conexiones, panel ni API. */

/* Cabecera: cápsula dark fantasy con indicador vivo. */
.webzen-hero__online-chip.mu-nav-online-chip,
.webzen-hero__online-chip {
  box-sizing:border-box;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:11px;
  width:max-content;
  max-width:100%;
  min-height:39px;
  padding:6px 13px !important;
  border:1px solid rgba(82,218,157,.34) !important;
  border-radius:999px !important;
  background:linear-gradient(130deg,rgba(2,31,26,.97),rgba(8,15,25,.96)) !important;
  color:#eaf9f2;
  box-shadow:0 0 15px rgba(41,215,122,.12),inset 0 1px 0 rgba(255,255,255,.055);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  white-space:nowrap;
  vertical-align:middle;
}
.webzen-hero__online-chip .webzen-hero__online-label{
  display:inline-flex !important;
  align-items:center;
  gap:6px;
  margin:0;
  color:#a6ddc5 !important;
  font-family:Arial,Helvetica,sans-serif;
  font-size:9px !important;
  line-height:1.1;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.11em;
}
.webzen-hero__online-label small{
  color:#9fbdac;
  font-weight:700;
  font-size:9px;
  letter-spacing:.02em;
}
.webzen-hero__online-chip .webzen-hero__online-value{
  display:inline-block;
  margin:0;
  padding-left:10px;
  border-left:1px solid rgba(112,190,150,.3);
  color:#fff !important;
  font:bold 21px/1.05 Arial,Helvetica,sans-serif !important;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.03em;
  text-shadow:0 0 12px rgba(135,255,181,.26);
}
.maya-live-indicator{
  display:inline-block;
  flex:0 0 auto;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#55f5a8;
  box-shadow:0 0 0 3px rgba(74,255,151,.10),0 0 13px rgba(74,255,151,.68);
  animation:mayaLiveBreath 2.4s ease-in-out infinite;
}
@keyframes mayaLiveBreath{50%{opacity:.6;box-shadow:0 0 0 6px rgba(74,255,151,.04),0 0 20px rgba(74,255,151,.38)}}
@keyframes mayaOnlinePop{0%{transform:scale(.93);opacity:.68}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
.maya-online-pop{animation:mayaOnlinePop .38s ease-out}

/* Pantalla de entrada: cuenta grande sobre la franja inaugural existente. */
.maya-intro-online{
  position:relative;
  box-sizing:border-box;
  isolation:isolate;
  margin-top:17px;
  padding:13px 10px 2px;
  border-top:1px solid rgba(236,199,120,.26);
  text-align:center;
}
.maya-intro-online::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:5px;
  left:15%;
  right:15%;
  height:92px;
  background:radial-gradient(ellipse at center,rgba(74,244,157,.13),transparent 72%);
  pointer-events:none;
}
.maya-intro-online__eyebrow{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:9px;
  color:#e2f8e8;
  font:800 11px/1.2 Arial,Helvetica,sans-serif;
  letter-spacing:.19em;
  text-shadow:0 2px 9px rgba(0,0,0,.8);
}
.maya-intro-online__eyebrow em{
  font-style:normal;
  color:#bfb18d;
  letter-spacing:.12em;
}
.maya-intro-online__main{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:19px;
  margin-top:0;
}
.maya-intro-online__count{
  display:block;
  min-width:2ch;
  color:#f6fffa;
  font:900 clamp(52px,7vw,82px)/1.08 Arial,Helvetica,sans-serif;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.075em;
  text-shadow:0 0 17px rgba(93,241,155,.4),0 6px 20px #000;
}
.maya-intro-online__side{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:5px;
  color:#e6c887;
  font:800 10px/1.35 Arial,Helvetica,sans-serif;
  text-align:left;
  letter-spacing:.13em;
  text-shadow:0 2px 8px #000;
}
.maya-intro-online__side i{font-size:20px;color:#64f1ae;filter:drop-shadow(0 0 6px rgba(100,241,174,.4))}
.maya-intro-online__disclaimer{
  margin-top:-1px;
  color:#bdb69f;
  font:600 10px/1.4 Arial,Helvetica,sans-serif;
  letter-spacing:.06em;
}
/* La apertura ya ocurrió: el panel permanece para el contador grande. */
.maya-launch-countdown.is-open .maya-intro-online{
  margin-top:14px;
}
@media(max-width:720px){
  .maya-launch-countdown{max-width:440px}
  .maya-intro-online{margin-top:12px;padding:10px 2px 0}
  .maya-intro-online__count{font-size:clamp(47px,11vw,70px)}
  .maya-intro-online__main{gap:13px}
  .maya-intro-online__eyebrow{font-size:9px;letter-spacing:.09em;gap:6px}
  .maya-intro-online__side{font-size:9px}
  .maya-intro-online__disclaimer{font-size:9px}
  .webzen-hero__online-chip.mu-nav-online-chip{gap:6px;padding:6px 9px !important}
  .webzen-hero__online-chip .webzen-hero__online-label{font-size:8px !important;letter-spacing:.05em;gap:4px}
  .webzen-hero__online-chip .webzen-hero__online-value{font-size:19px !important;padding-left:7px}
}
@media(max-width:390px){
  .maya-intro-online__side i{font-size:16px}
  .maya-intro-online__count{font-size:47px}
  .maya-intro-online__main{gap:9px}
  .maya-intro-online__eyebrow{flex-wrap:wrap}
}
@media(max-height:580px) and (min-width:721px){
  .maya-intro-online{margin-top:7px;padding-top:8px}
  .maya-intro-online__count{font-size:49px}
  .maya-intro-online__disclaimer{font-size:9px}
}
@media(prefers-reduced-motion:reduce){.maya-live-indicator,.maya-online-pop{animation:none}}