:root{
  --bg:#0f1221; --card:#161a2b; --muted:#9aa3b2; --text:#e7ecf5;
  --brand:#7c5cff; --brand2:#00e3a2; --border:#242941;
}
*{box-sizing:border-box}
body{margin:0;background:linear-gradient(180deg,#0b0e1a, #0f1221);}
.container{width:min(1120px,92%);margin:auto}

.nav{position:sticky;top:0;background:rgba(15,18,33,.7);backdrop-filter:blur(8px);z-index:50;border-bottom:1px solid var(--border)}
.nav .container{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.logo{font-weight:800;letter-spacing:.5px;color:var(--text)}
.nav a{color:var(--text);margin-left:16px;text-decoration:none}
.btn{padding:10px 16px;border-radius:10px;border:1px solid var(--border);display:inline-block}
.btn.primary{background:linear-gradient(90deg,var(--brand),var(--brand2));color:white;border:none}
.btn.ghost{color:var(--text);background:transparent}
.btn.whats{border-color:#25D366;color:#25D366}
.btn.lg{font-size:18px;padding:14px 20px}

.hero{padding:72px 0;color:var(--text);text-align:center;background:
  radial-gradient(1000px 400px at 50% -10%, rgba(124,92,255,.25), transparent),
  radial-gradient(800px 300px at 70% 0%, rgba(0,227,162,.2), transparent)}
.hero h1{font-size:34px;line-height:1.2;margin:0 0 12px}
.hero p{color:var(--muted);margin:0 0 18px}
.badges{list-style:none;padding:0;margin:14px 0 0;display:flex;gap:12px;justify-content:center;color:var(--muted)}
.badges li{border:1px dashed var(--border);padding:8px 12px;border-radius:999px}

.section{padding:48px 0;color:var(--text)}
.section h2{margin:0 0 18px}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px;min-height:140px}
.card h3{margin:0 0 8px}
.card p{margin:0;color:var(--muted)}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.product{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px;
  display:flex;
  flex-direction:column;
  transition:box-shadow .22s,transform .22s
}
.product h3{margin:0 0 6px;font-size:18px}
.product .meta{color:var(--muted);font-size:14px;margin-bottom:10px}
.product .price{font-weight:700;margin:2px 0}
.product .xlive{color:var(--muted);font-size:13px}
.product .actions{margin-top:auto;display:flex;gap:8px;flex-wrap:wrap}
.badge{font-size:12px;border:1px solid var(--border);border-radius:8px;padding:4px 8px;color:var(--muted)}
.card-effect {transition: box-shadow 0.2s, transform 0.2s;}
.card-effect:hover {
  box-shadow: 0 8px 32px 4px #7c5cff44, 0 2px 8px 1px #00e3a255;
  transform: translateY(-4px) scale(1.02);
  z-index:1;
}

/* Imagen de producto en los cards */
.prodimg {
  display: block;
  width: 180px;
  height: 180px;
  object-fit: contain;
  margin-bottom: 8px;
  margin-left: auto;
  margin-right: auto;
  background: #fff2;
  border-radius: 9px;
}

/* Modal, imagen del producto en detalle */
.prodimg-modal {
  display: block;
  max-width: 90%;
  max-height: 200px;
  object-fit: contain;
  margin: 16px auto 18px auto;
  border-radius: 12px;
  background: #fff2;
  box-shadow: 0 4px 32px #0003;
}


.contact{text-align:center}
.footer{border-top:1px solid var(--border);padding:22px 0;color:var(--muted);text-align:center}

.fab-whats{
  position:fixed;right:18px;bottom:18px;background:#25D366;color:#0b0e1a;
  border-radius:999px;padding:12px 16px;text-decoration:none;font-weight:700
}
@media (max-width:980px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .cards,.grid{grid-template-columns:1fr}
}

/* Search bar */
.search-bar {
  width: 100%;
  max-width: 400px;
  padding: 10px 14px;
  margin-bottom: 28px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: #181b2d;
  color: var(--text);
  font-size: 1.1em;
  outline: none;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.search-bar::placeholder {
  color: var(--muted);
  opacity: 0.9;
}

/* Modal detalles de producto */
.modal-bg {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(0,0,0,.60);
  display: none; align-items: center; justify-content: center;
  z-index: 2000;
}
.modal-content {
  background: var(--card);
  padding: 32px;
  border-radius: 18px;
  max-width: 420px;
  color: var(--text);
  box-shadow: 0 12px 48px #2d195977;
  position: relative;
  text-align: left;
}
.close-modal {
  position: absolute;
  right: 18px;
  top: 16px;
  font-size: 28px;
  color: #7c5cff;
  cursor: pointer;
  font-weight: 800;
}
.vermas {
  display: inline-block; color: var(--brand2); cursor: pointer; font-weight: 700; margin-top: 12px;
}
.modal-actions {
  margin-top: 18px; text-align: center;
}
.btn.lg {
  font-size: 18px; padding: 14px 20px;
}

/* Filtro de categorías */
.filter-bar {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.filter-btn {
  padding: 7px 18px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--muted);
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.filter-btn.active, .filter-btn:hover {
  background: var(--brand2);
  color: #0f1221;
  border-color: var(--brand2);
}

.logo-img {
  height: 44px;
  margin-right: 14px;
  vertical-align: middle;
  display: inline-block;
}


/* Para fondo blanco */

body.light-mode {
  background: #f7f8fa;
}
body.light-mode,
body.light-mode .section,
body.light-mode .container,
body.light-mode .nav,
body.light-mode .hero,
body.light-mode .card,
body.light-mode .product,
body.light-mode .modal-content {
  background: #ffffff !important;
  color: #23262f !important;
  box-shadow: 0 2px 12px #e5e8ef44;
}
body.light-mode .nav {
  border-bottom: 1px solid #e5e8ef;
  background: #fffdfa !important;
}
body.light-mode .btn {
  border-color: #e5e8ef !important;
}
body.light-mode .btn.primary {
  background: linear-gradient(90deg,#00e3a2,#7c5cff);
  color: #fff;
}
body.light-mode .badge,
body.light-mode .meta,
body.light-mode .product .xlive,
body.light-mode .card p,
body.light-mode .footer,
body.light-mode .nav a,
body.light-mode .badges li {
  color: #576175 !important;
}
body.light-mode .search-bar {
  background: #f5f5f5;
  color: #222;
  border-color: #e5e8ef;
}
body.light-mode .prodimg,
body.light-mode .prodimg-modal {
  background: #f6f7f9;
  border: 1px solid #e5e8ef;
}
body.light-mode .card-effect:hover {
  box-shadow: 0 12px 48px #dbd2ffc4, 0 2px 8px 1px #9efadd55;
}
body.light-mode .filter-btn.active, 
body.light-mode .filter-btn:hover {
  background: #00e3a2;
  color: #fff;
  border-color: #00e3a2;
}