body {
  background-color: #101010;
  color: #f0f0f0;
  font-family: 'Segoe UI', sans-serif;
  margin: 0;
  padding: 0;
}

.store-container {
  max-width: 1000px;
  margin: 60px auto;
  padding: 40px;
  background-color: #1a1a1a;
  border-radius: 16px;
  box-shadow: 0 0 30px rgba(0,0,0,0.7);
}

h1 {
  text-align: center;
  color: #00d9ff;
  margin-bottom: 40px;
  font-size: 2.5rem;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

.product-card {
  background-color: #222;
  border: 1px solid #333;
  border-radius: 14px;
  padding: 20px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 16px rgba(0, 217, 255, 0.2);
}

.product-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 15px;
}

.quantity-selector {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0 20px;
  gap: 10px;
}

.qty-btn {
  background-color: #00d9ff;
  color: #101010;
  border: none;
  padding: 6px 14px;
  font-size: 1.2rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
}

.qty-btn:hover {
  background-color: #008fbf;
}

/* Botón flotante carrito */
#carrito-toggle {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 1001;
}
#carrito-toggle img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Barra lateral del carrito */
#carrito-lateral {
  position: fixed;
  top: 0;
  right: -350px;
  width: 320px;
  height: 100vh;
  background-color: #1a1a1a;
  box-shadow: -4px 0 10px rgba(0,0,0,0.7);
  padding: 20px;
  overflow-y: auto;
  transition: right 0.3s ease;
  z-index: 1000;
  border-left: 2px solid #00d9ff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#carrito-lateral.abierto {
  right: 0;
}

#carrito-lateral h2 {
  margin-bottom: 20px;
  color: #00d9ff;
  text-align: center;
}

#carrito-contenido {
  flex-grow: 1;
}

#carrito-contenido p {
  text-align: center;
  color: #ccc;
}

#carrito-contenido .item-carrito {
  margin-bottom: 15px;
  border-bottom: 1px solid #333;
  padding-bottom: 10px;
}

#carrito-total {
  font-weight: bold;
  font-size: 1.2rem;
  color: #00d9ff;
  text-align: center;
  margin-top: 20px;
}

.top-bar {
  background: #1a1a1a;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 30px;
  border-bottom: 1px solid #00d9ff30;
}

.social-links a img {
  width: 30px;
  height: 30px;
  margin-right: 15px;
  transition: transform 0.3s;
}
.social-links a img:hover {
  transform: scale(1.2);
}

#carrito-toggle {
  background: none;
  border: none;
  cursor: pointer;
}
#carrito-toggle img {
  width: 35px;
  height: 35px;
}

/* Producto con imagen separada */
.product-card {
  background-color: #222;
  border: 1px solid #333;
  border-radius: 14px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 16px rgba(0, 217, 255, 0.2);
}
.product-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 10px;
}
.product-info {
  width: 100%;
  text-align: center;
}

/* Footer legal */
footer.legal {
  background-color: #111;
  padding: 30px;
  text-align: center;
  font-size: 0.9rem;
  color: #888;
  border-top: 1px solid #333;
}
footer.legal strong {
  color: #00d9ff;
}

/* Reset y base */
* {margin:0; padding:0; box-sizing:border-box;}
body {font-family:'Segoe UI',sans-serif; background:#101010; color:#f0f0f0;}

/* Top Bar */
.top-bar {display:flex; justify-content:space-between; align-items:center; padding:10px 30px; background:#1a1a1a; border-bottom:1px solid #00d9ff30;}
.social-links img {width:30px; margin-right:15px; transition:transform .3s;}
.social-links img:hover {transform:scale(1.2);}
#carrito-toggle {background:none; border:none; cursor:pointer;}
#carrito-toggle img {width:35px;}

/* Contenedor principal */
.store-container {max-width:1200px; margin:40px auto; padding:20px;}
.store-container h1 {text-align:center; color:#00d9ff; margin-bottom:30px;}

/* Categorías */
.category {margin-bottom:50px;}
.category h2 {color:#00d9ff; margin-bottom:20px; border-bottom:2px solid #00d9ff30; padding-bottom:5px;}

/* Grid de productos */
.product-grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px;}
.product-card {background:#222; border:1px solid #333; border-radius:12px; overflow:hidden; transition:transform .3s,box-shadow .3s;}
.product-card:hover {transform:translateY(-8px); box-shadow:0 10px 20px rgba(0,217,255,.2);}
.product-card img {width:100%; height:160px; object-fit:cover;}
.product-card .info {padding:15px; text-align:center;}
.product-card h3 {color:#00d9ff; margin-bottom:10px;}

/* Selector de cantidad */
.qty {display:flex; justify-content:center; align-items:center; gap:10px; margin:10px 0;}
.qty button {background:#00d9ff; border:none; padding:5px 12px; font-size:1.1rem; border-radius:6px; cursor:pointer; transition:background .2s;}
.qty button:hover {background:#008fbf;}

/* PayPal button container */
.paypal-btn {margin-top:10px;}

/* Carrito lateral */
#carrito-lateral {position:fixed; top:0; right:-350px; width:300px; height:100vh; background:#1a1a1a; padding:20px; box-shadow:-4px 0 10px rgba(0,0,0,.7); transition:right .3s; z-index:1000; border-left:2px solid #00d9ff;}
#carrito-lateral.abierto {right:0;}
#carrito-lateral h2 {color:#00d9ff; margin-bottom:15px; text-align:center;}
#carrito-contenido {flex:1; overflow-y:auto;}
#carrito-contenido p {text-align:center; color:#888;}
.item-carrito {border-bottom:1px solid #333; padding:10px 0;}
#carrito-total {text-align:center; font-weight:bold; color:#00d9ff; margin-top:15px;}

/* Footer legal */
footer.legal {background:#111; color:#888; text-align:center; padding:20px; margin-top:40px; font-size:.9rem;}
footer.legal strong {color:#00d9ff;}