:root{
  --color-primario:#2af421;
  --color-secundario:#e9e9e9;
  --color-fondo:#000;
  --color-texto:#fff;
  --color-boton:#2af421;
  --color-boton-texto:#000;
  --color-boton-aceptar:#25D366;
  --color-boton-aceptar-texto:#FFFFFF;
}
body{background:var(--color-fondo);color:var(--color-texto);font-family:'Arial Black',Arial;margin:0;padding:0;position:relative;}
body::before{content:'';position:fixed;top:0;left:0;width:100%;height:100%;background:url('/img/fondo.jpg')no-repeat center fixed;background-size:cover;filter:brightness(0.3);z-index:-1;}
header{text-align:center;padding:5px 0 10px 0;position:relative;}
header img{width:175px;filter:drop-shadow(0 0 15px var(--color-primario));margin-top:-5px;}
.slogan{color:var(--color-primario);font-size:16px;margin:8px 0 5px;font-weight:bold;text-shadow:0 0 10px var(--color-primario),0 0 20px var(--color-secundario);text-transform:uppercase;animation:flotar 2s ease-in-out infinite;line-height:1.4;}
.envio{
  color:#fff;
  font-size:14px;
  margin:0 0 10px 0;
  font-weight:bold;
  text-shadow:0 0 4px rgba(255,255,255,0.8), 0 0 8px rgba(255,255,255,0.6);
  text-transform:uppercase;
  animation:flotar 2s ease-in-out infinite;
  text-align:center;
  line-height:1.4;
}
.stats-bar{display:flex;gap:6px;padding:12px 10px;margin-bottom:15px;justify-content:center;align-items:stretch;}
.stat-box{flex:1;min-width:80px;background:rgba(0,0,0,0.6);border:1px solid var(--color-primario);border-radius:10px;padding:10px 4px;text-align:center;box-shadow:0 0 10px rgba(42,244,33,0.3);display:flex;flex-direction:column;justify-content:center;cursor:pointer;transition:0.3s;}
.stat-box:hover{transform:scale(1.05);box-shadow:0 0 20px var(--color-primario);}
.stat-num{display:block;font-size:18px;font-weight:bold;color:var(--color-primario);margin-bottom:3px;}
.stat-text{display:block;font-size:11px;color:var(--color-texto);text-transform:uppercase;line-height:1.2;white-space:normal;text-align:center;}
.btn-diamantes-stat{background:rgba(0,0,0,0.6);}
.btn-diamantes-stat.stat-num{font-size:18px;margin-bottom:3px;}
.btn-diamantes-stat.stat-text{font-size:11px;line-height:1.2;white-space:normal;text-align:center;}
.selector-dropdown-centro{flex:1;position:relative;z-index:100;background:rgba(0,0,0,0.6);border:1px solid var(--color-primario);border-radius:10px;box-shadow:0 0 10px rgba(42,244,33,0.3);display:flex;}
.btn-selector-principal{width:100%;height:100%;background:transparent;border:none;color:var(--color-texto);padding:0;cursor:pointer;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;text-transform:uppercase;}
.btn-selector-principal.flecha{font-size:9px;color:var(--color-primario);margin-left:2px;}
.dropdown-content{display:none;position:absolute;top:100%;left:0;width:100%;background:#111;border:1px solid var(--color-primario);border-radius:10px;margin-top:4px;overflow:hidden;box-shadow:0 5px 20px rgba(0,0,0,0.5);z-index:999;max-height:250px;overflow-y:auto;}
.dropdown-content.show{display:block;}
.dropdown-content div{padding:10px;text-align:center;font-weight:bold;cursor:pointer;border-bottom:1px solid #333;color:var(--color-texto);font-size:12px;text-transform:uppercase;}
.dropdown-content div:last-child{border-bottom:none;}
.dropdown-content div:hover{background:var(--color-primario);color:var(--color-boton-texto);}
@keyframes flotar{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes parpadeo{0%,100%{opacity:1}50%{opacity:0.4}}
@keyframes flotarIndiv{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes neonPulse{0%,100%{box-shadow:0 0 10px var(--color-primario),0 0 20px var(--color-primario)}50%{box-shadow:0 0 15px var(--color-primario),0 0 30px var(--color-primario),0 0 40px var(--color-primario)}}
.tabs{display:flex;gap:12px;margin:0 15px 25px;}
.tab-btn{flex:1;padding:14px;border:2px solid var(--color-primario);border-radius:15px;font-weight:bold;font-size:14px;cursor:pointer;background:#111;color:var(--color-primario);transition:0.3s;}
.tab-btn.active{background:linear-gradient(90deg,var(--color-primario),var(--color-secundario));color:var(--color-boton-texto);box-shadow:0 0 20px var(--color-primario);transform:scale(1.05);}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;padding:0 15px 20px;}
.card{background:#111;border:2px solid var(--color-primario);border-radius:15px;padding:12px;text-align:center;position:relative;transition:0.3s;}
.card:hover{transform:translateY(-3px);}
.card.gris{background:#1a1a1a;border-color:#444;}
.img-wrap{position:relative;}
.card img{width:100%;height:140px;object-fit:cover;border-radius:10px;margin-bottom:8px;}
.card.gris img{filter:grayscale(1);}
.card h3{margin:8px 0;font-size:14px;font-weight:900;color:#ffffff;text-shadow:0 0 4px rgba(255,255,255,0.8), 0 0 8px rgba(255,255,255,0.6);text-transform:uppercase;}
.card.gris h3{color:#aaa;}
.desc{font-size:12px;color:#ffffff;margin:4px 0 8px 0;text-shadow:0 0 3px rgba(255,255,255,0.7), 0 0 6px rgba(255,255,255,0.5);opacity:0.95;}
.entrega{font-size:11px;color:currentColor;margin:4px 0 8px 0;font-weight:900;text-shadow:0 0 5px currentColor, 0 0 10px currentColor;text-transform:uppercase;}
.stock-badge{background:linear-gradient(90deg,#00c3ff,#00e5ff);color:#000;font-size:11px;font-weight:bold;padding:6px 10px;border-radius:20px;margin:0 auto 8px;width:fit-content;box-shadow:0 0 12px #00c3ff;display:flex;align-items:center;gap:4px;}
.precios-box{display:flex;flex-direction:column;gap:4px;margin:8px 0;}
.precio{font-size:19px;font-weight:bold;margin:0;text-shadow:0 0 8px currentColor;animation:parpadeo 1.5s infinite;}
.pen{color:#ff0000;}.usd{color:#00aaff;}.ven{color:#00aaff;}.clp{color:#00aaff;}.cop{color:#ffcc00;}.mxn{color:#00ff88;}.esp{color:#FFC107;}.bob{color:#fff50e;}.ars{color:#2dd1ff;}.brl{color:#12ac19;}
.dropdown-content {display: none; position: absolute; background: #0a0a0a; width: 160px; z-index: 999; border: 2px solid #00ff00; border-radius: 10px; box-shadow: 0 0 15px #00ff00; max-height: none !important; overflow: visible !important;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown-content div {padding: 10px 12px; border-bottom: 1px solid #222; cursor: pointer; font-weight: bold; display: flex; align-items: center; gap: 8px; color: #fff;}
.dropdown-content div:hover {background: #00ff00; color: #000;}
.badge-promo{background:#ff004f;color:#fff;font-size:8px;font-weight:900;padding:3px 8px;border-radius:0 0 8px 0;box-shadow:0 0 8px #ff004f;position:absolute;top:0;left:0;z-index:10;}
.seccion{display:none;}.seccion.active{display:block;}
.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.95);justify-content:center;align-items:center;z-index:999;padding:10px;box-sizing:border-box;}
.modal-content{background:#111;padding:12px;border-radius:12px;width:82%;max-width:320px;text-align:center;border:2px solid var(--color-primario);}
.modal-content h3{color:var(--color-primario);font-size:14px;margin:6px 0;}
.modal-content img{width:65px;margin:6px auto;display:block;border-radius:8px;}
.modal-content p{color:var(--color-primario);font-weight:bold;font-size:12px;margin:4px 0;}
.btn-pago-container{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin:8px 0;}
.btn-pago{padding:10px;border:none;border-radius:50px;font-weight:bold;font-size:12px;cursor:pointer;box-shadow:0 0 15px currentColor;}
.btn-yape{background:linear-gradient(90deg,#9c27b0,#e040fb);color:#fff;}
.btn-binance{background:linear-gradient(90deg,#F0B90B,#FFD700);color:#000;}
.btn-paypal{background:linear-gradient(90deg,#0070ba,#009cde);color:#fff;}
.btn-azteca{background:linear-gradient(90deg,#006633,#00A859);color:#fff;}
.btn-bancolombia{background:linear-gradient(90deg,#FDC500,#FFDD00);color:#000;}
.btn-nequi{background:linear-gradient(90deg,#961E7E,#C42CC7);color:#fff;}
.btn-prexpe{background:linear-gradient(90deg,#7B2FFF,#B86BFF);color:#fff;font-weight:bold;}
.btn-takenos{background:linear-gradient(90deg,#6A0DAD,#9B30FF);color:#fff;font-weight:bold;}
input{background:#222;color:var(--color-texto);border:1px solid #444;padding:8px;border-radius:8px;width:90%;margin:4px 0;font-size:12px;}
.warning{color:#ff004f;font-size:11px;}
#toast{position:fixed;top:20px;left:50%;transform:translateX(-50%) translateY(-100px);background:linear-gradient(90deg,var(--color-primario),var(--color-secundario));color:var(--color-boton-texto);padding:12px 20px;border-radius:50px;font-weight:bold;z-index:1000;transition:0.4s;box-shadow:0 0 20px var(--color-primario);}
#toast.show{transform:translateX(-50%) translateY(0);}
.btn-verify-wrap{display:flex;justify-content:center;margin:4px 0;}
.btn-verify{background:#00aaff;color:#000;border:none;padding:8px 20px;border-radius:8px;font-weight:bold;cursor:pointer;}
#nick-result{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:10px 0;gap:2px;}
#nick-result img{width:40px;height:40px;border-radius:50%;border:2px solid var(--color-primario);object-fit:cover;}
#nick-result.ok{color:var(--color-texto);}#nick-result.error{color:#ff004f;}
#region-detectada{display:none;}
.loading{text-align:center;padding:20px;color:var(--color-primario);}
.badge-mas-vendido{position:absolute;top:-8px;right:-8px;background:linear-gradient(90deg,#FF3D00,#FF8C00);color:#fff;font-size:10px;font-weight:bold;padding:5px 10px;border-radius:15px;box-shadow:0 0 15px #FF3D00;z-index:10;animation:flotarIndiv 1s infinite;}
.card.bloqueado{background:#2a2a2a;border-color:#555;opacity:1;pointer-events:none;}
.card.bloqueado::after{content:'AGOTADO';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-15deg);background:rgba(255,0,79,0.95);color:#fff;font-weight:bold;font-size:14px;padding:8px 15px;border:2px solid #ff004f;border-radius:8px;z-index:5;}
.modal-referencias{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:99999;overflow-y:auto;backdrop-filter:blur(4px);}
.modal-referencias-content{background:#1a1a1a;color:var(--color-texto);margin:10% auto;padding:20px;width:85%;max-width:380px;border-radius:12px;border:1px solid #25D366;position:relative;}
.modal-referencias-content span{position:absolute;top:12px;right:18px;font-size:26px;cursor:pointer;color:var(--color-primario);font-weight:bold;}
.modal-referencias-content h3{color:var(--color-primario);margin-top:0;font-size:18px;border-bottom:1px solid #333;padding-bottom:10px;text-align:center;}
.modal-referencias-content img{width:100%;height:auto;max-height:70vh;object-fit:contain;margin:10px 0;border-radius:10px;border:2px solid var(--color-primario);}
.modal-referencias-content button{background:var(--color-primario);color:var(--color-boton-texto);border:none;padding:10px 20px;border-radius:8px;font-weight:bold;margin-top:10px;cursor:pointer;width:100%;}
.btn-cancelar{background:#333;color:var(--color-texto);border:none;padding:7px;border-radius:8px;width:100%;margin-top:4px;font-size:11px;cursor:pointer;}
#pago-seleccionado{color:var(--color-primario);font-size:11px;}
.btn-top-bar{display:flex;justify-content:space-between;gap:8px;padding:10px 15px;}
.btn-terminos button{background:rgba(42,244,33,0.15);color:var(--color-primario);border:1px solid var(--color-primario);padding:8px 10px;border-radius:20px;font-size:10px;font-weight:bold;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;animation:neonPulse 2s infinite;}
.btn-referencias button{background:rgba(37,211,102,0.15);color:#25D366;border:1px solid #25D366;padding:8px 10px;border-radius:20px;font-size:10px;font-weight:bold;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;animation:neonPulse 2s infinite;}
.btn-app{display:none;animation:flotar 2s ease-in-out infinite;}
.btn-app button{background:rgba(0,170,255,0.15);color:#00aaff;border:1px solid #00aaff;padding:8px 10px;border-radius:20px;font-size:10px;font-weight:bold;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;animation:neonPulse 2s infinite;}
.ref-gallery{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 5px;scrollbar-width:thin;}
.ref-gallery::-webkit-scrollbar{height:6px;}
.ref-gallery::-webkit-scrollbar-thumb{background:#25D366;border-radius:10px;}
.ref-gallery img{width:280px;height:480px;object-fit:cover;flex-shrink:0;scroll-snap-align:center;border-radius:12px;border:2px solid #25D366;margin:0;}
#modal-terminos.modal-referencias-content{border:2px solid var(--color-primario);background:#111}
#modal-terminos.modal-referencias-content h3{color:var(--color-primario);border-bottom:2px solid var(--color-primario)}
#modal-terminos.modal-referencias-content span{color:var(--color-primario)}
#lista-terminos{color:var(--color-texto);text-align:left;line-height:1.6;font-size:13px}
#lista-terminos strong{color:var(--color-primario)}
#modal-terminos.modal-referencias-content button{background:linear-gradient(90deg,var(--color-boton-aceptar),#1F9D55);color:var(--color-boton-aceptar-texto);border:none;padding:10px 30px;border-radius:8px;font-weight:bold;font-size:14px;cursor:pointer;display:block;margin:15px auto 0}

.selector-planes{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 15px 15px 15px;width:calc(100% - 30px);}
.btn-plan{padding:14px;border:2px solid transparent;border-radius:15px;background:#111;color:var(--color-primario);font-weight:bold;font-size:14px;cursor:pointer;transition:all 0.15s ease;text-transform:uppercase;height:55px;}
.btn-plan:hover{transform:scale(1.05);filter:brightness(1.2);}

.btn-plan:active{transform:scale(0.88) !important; filter:brightness(1.4); box-shadow:0 0 25px currentColor !important;}
.btn-plan.spark{border-color:#00F7FF;background:linear-gradient(90deg,#00F7FF,#C0C0C0);color:#000;box-shadow:0 0 20px #00F7FF;}
.btn-plan.pulse{border-color:#ed00ca;background:linear-gradient(90deg,#ed00ca,#C0C0C0);color:#000;box-shadow:0 0 20px #ed00ca;}
.btn-plan.nova{border-color:#FFD700;background:linear-gradient(90deg,#FFD700,#C0C0C0);color:#000;box-shadow:0 0 20px #FFD700;}

.banner-plan-info{
  margin:0 15px 25px 15px;
  padding:0;
  text-align:center;
  font-size:17px;
  font-weight:900;
  font-family:'Arial Black', Arial;
  text-transform:uppercase;
  background:transparent;
  border:none;
  line-height:1.4;
}
.banner-plan-info span{
  display:block;
  font-size:17px!important;
  font-weight:900!important;
  margin:3px 0;
  letter-spacing:0.5px;
  text-shadow:0 0 4px currentColor, 0 0 8px currentColor;
}
body.spark .banner-plan-info span{ color:#00F7FF; }
body.pulse .banner-plan-info span{ color:#ed00ca; }
body.nova .banner-plan-info span{ color:#FFD700; }

.card.spark{border-color:#00F7FF;}
.card.spark:hover{box-shadow:0 0 20px #00F7FF;}
.card.spark .btn-detalles{background:linear-gradient(90deg,#00F7FF,#C0C0C0);color:#000;box-shadow:0 0 15px #00F7FF;border:none;padding:10px;width:100%;border-radius:8px;font-weight:bold;cursor:pointer;transition:0.3s;}
.card.pulse{border-color:#ed00ca;}
.card.pulse:hover{box-shadow:0 0 20px #ed00ca;}
.card.pulse .btn-detalles{background:linear-gradient(90deg,#ed00ca,#C0C0C0);color:#000;box-shadow:0 0 15px #ed00ca;border:none;padding:10px;width:100%;border-radius:8px;font-weight:bold;cursor:pointer;transition:0.3s;}
.card.nova{border-color:#FFD700;}
.card.nova:hover{box-shadow:0 0 20px #FFD700;}
.card.nova .btn-detalles{background:linear-gradient(90deg,#FFD700,#C0C0C0);color:#000;box-shadow:0 0 15px #FFD700;border:none;padding:10px;width:100%;border-radius:8px;font-weight:bold;cursor:pointer;transition:0.3s;}
.btn-detalles{
  background:linear-gradient(90deg,var(--color-boton),var(--color-secundario));
  color:var(--color-boton-texto);
  border:none;
  padding:10px;
  width:100%;
  border-radius:8px;
  font-weight:bold;
  cursor:pointer;
  transition:0.3s;
  box-shadow:0 0 15px var(--color-boton);
}

@media(max-width:400px){
.stat-num{font-size:16px;}
.stat-text{font-size:9px;}
.stats-bar{gap:4px;padding:10px 5px;}
.selector-planes{gap:8px;margin:0 10px 15px 10px;}
.btn-plan{font-size:12px;padding:12px;}
.banner-plan-info{font-size:16px;margin:0 10px 20px 10px;}
.banner-plan-info span{font-size:16px!important;}
}
/* ===== GD17 FINAL - HISTORIAL EN MEDIO - CERRAR AL FINAL ===== */
.btn-top-bar{
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  width: 100% !important; height: 0 !important;
  overflow: visible !important; background: transparent !important;
  border: none !important; z-index: 9999 !important; display: block !important; padding: 0 !important;
}
header{ padding-top: 5px !important; margin-top: 0 !important; }
header .logo, header img, .logo{ margin-top: 8px !important; position: relative !important; z-index: 1 !important; }

.btn-top-bar .btn-referencias,
.btn-top-bar .btn-terminos,
.btn-top-bar .btn-app,
.btn-top-bar #btn-login,
.btn-top-bar #user-box,
.btn-top-bar #btn-cerrar-medio,
.btn-top-bar #btn-historial{
  position: absolute !important;
  width: 70px !important; min-width: 70px !important; max-width: 70px !important;
  height: 43px !important; min-height: 43px !important;
  margin: 0 !important; background: transparent !important; border: none !important;
}

/* IZQUIERDA 3 */
.btn-referencias{ left: 5px !important; top: 5px !important; }
.btn-terminos{ left: 5px !important; top: 53px !important; }
.btn-app{ left: 5px !important; top: 101px !important; }

/* DERECHA 3 - AHORA HISTORIAL EN MEDIO Y CERRAR AL FINAL */
#btn-login, #user-box{ right: 5px !important; left: auto !important; top: 5px !important; }
#btn-historial{ right: 5px !important; left: auto !important; top: 53px !important; }
#btn-cerrar-medio{ right: 5px !important; left: auto !important; top: 101px !important; }

/* FONDO + TEXTO 10px */
.btn-top-bar button{
  width: 100% !important; height: 100% !important;
  border-radius: 10px !important; background: #0e0e0e !important;
  display: flex !important; justify-content: center !important; align-items: center !important;
  padding: 0 3px !important; text-align: center !important;
}
.btn-top-bar button span{ font-size: 10px !important; font-weight: bold !important; line-height: 11px !important; white-space: normal !important; }

/* NEON SUAVE */
.btn-referencias button{ border:1.2px solid #00ff00 !important; box-shadow: 0 0 8px rgba(0,255,0,0.4), inset 0 0 6px rgba(0,255,0,0.2) !important; }
.btn-referencias span{ color:#00ff88 !important; text-shadow: 0 0 5px rgba(0,255,136,0.6) !important; }
.btn-terminos button{ border:1.2px solid #00ff00 !important; box-shadow: 0 0 8px rgba(0,255,0,0.4), inset 0 0 6px rgba(0,255,0,0.2) !important; }
.btn-terminos span{ color:#00ff88 !important; text-shadow: 0 0 5px rgba(0,255,136,0.6) !important; }
.btn-app button{ border:1.2px solid #00ff00 !important; box-shadow: 0 0 8px rgba(0,255,0,0.4), inset 0 0 6px rgba(0,255,0,0.2) !important; }
.btn-app span{ color:#00ff88 !important; text-shadow: 0 0 5px rgba(0,255,136,0.6) !important; }
#btn-login button, #user-box button{ border:1.2px solid #00a6ff !important; box-shadow: 0 0 8px rgba(0,166,255,0.4), inset 0 0 6px rgba(0,166,255,0.15) !important; }
#btn-login span, #user-box span{ color:#00a6ff !important; text-shadow: 0 0 5px rgba(0,166,255,0.6) !important; }
#btn-historial button{ border:1.2px solid #ffc107 !important; box-shadow: 0 0 8px rgba(255,193,7,0.35), inset 0 0 6px rgba(255,193,7,0.15) !important; }
#btn-historial span{ color:#ffc107 !important; text-shadow: 0 0 5px rgba(255,193,7,0.5) !important; }
#btn-cerrar-medio button{ border:1.2px solid #ff0000 !important; box-shadow: 0 0 8px rgba(255,0,0,0.4), inset 0 0 6px rgba(255,0,0,0.15) !important; }
#btn-cerrar-medio span{ color:#ff4444 !important; text-shadow: 0 0 5px rgba(255,68,68,0.6) !important; }