:root{
  --primary:#1458a6;
  --aqua:#02edc5;
  --ink:#0f172a;
  --muted:#6b7280;
  --line:#c8e3ff;
  --soft-shadow:0 8px 38px #1458a610, 0 1.5px 8px #b0c9f011;
}

.tienda-wrap{ max-width: 1200px; margin: 26px auto; padding: 0 16px; }
.tienda-header{ text-align:center; margin-bottom: 18px; }
.tienda-sub{ color:#2762bf; background:#eaf3fd; border:1px solid #bfd8f7; padding:.6rem .9rem; border-radius:9px; display:inline-block; }

.grid-prod{
  display:grid; gap:16px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 1024px){ .grid-prod{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .grid-prod{ grid-template-columns: 1fr; } }

.card-prod{
  background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow: var(--soft-shadow);
  overflow:hidden; display:flex; flex-direction:column;
}
.card-prod .img{ position:relative; height: 160px; background-size:cover; background-position:center; }
.card-prod .img .badge{
  position:absolute; top:10px; left:10px; background:#0b44ff; color:#fff; font-weight:800; border-radius:999px; padding:.25rem .6rem; font-size:.8rem;
}
.card-prod .body{ padding: 12px 14px 14px; display:flex; flex-direction:column; gap:8px; }
.card-prod .ttl{ color:#0f3d71; margin:0; font-size:1.08rem; font-weight:800; }
.card-prod .price{ color:#02edc5; font-weight:900; font-size:1.12rem; }
.bullets{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; }
.bullets li{ color:#124a87; font-weight:600; font-size:.94rem; }
.bullets i{ color:#02edc5; margin-right:6px; }

.actions{ display:flex; gap:8px; margin-top:6px; }
.btn-guardar, .btn-link{ cursor:pointer; text-decoration:none; }
.btn-guardar{
  background:linear-gradient(90deg,#1e78d3,#0c3d7b 95%); color:#fff; border:none; border-radius:10px; padding:.58rem 1rem; font-weight:800;
}
.btn-guardar:hover{ transform: translateY(-1px); }
.btn-link{
  background:#f5faff; color:#1353a8; border:1px solid #bcdfff; border-radius:8px; padding:.52rem .9rem; font-weight:700;
}
.btn-link:hover{ background:#e5f2ff; }

.vacio{ text-align:center; color:#6b7280; padding: 2rem 0; }

/* Drawer carrito */
.fab-cart{
  position:fixed; right:16px; bottom:16px; z-index:9999;
  width:56px; height:56px; border-radius:999px; border:none;
  background:#0b44ff; color:#fff; box-shadow:0 8px 24px rgba(11,68,255,.24);
  display:flex; align-items:center; justify-content:center; font-size:1.2rem;
}
.fab-badge{
  position:absolute; top:-6px; right:-6px; background:#db352b; color:#fff; font-size:.72rem; border-radius:999px; padding:2px 6px; font-weight:800;
}

.cart{
  position:fixed; top:0; right:-420px; width: 380px; height: 100vh; background:#fff;
  border-left:1px solid var(--line); box-shadow:-8px 0 24px rgba(20,88,166,.12);
  display:flex; flex-direction:column; z-index:9998; transition:right .22s ease;
}
.cart.show{ right:0; }
.cart-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--line); }
.cart-body{ flex:1; overflow:auto; padding:10px 12px; display:flex; flex-direction:column; gap:8px; }
.cart-item{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 8px; border:1px solid #eef3ff; border-radius:10px; }
.cart-ttl{ font-weight:800; color:#0f3d71; }
.cart-qty{ display:flex; align-items:center; gap:6px; }
.qty-btn{ width:28px; height:28px; border-radius:8px; background:#f5faff; border:1px solid #bcdfff; cursor:pointer; }
.cart-price{ font-weight:900; color:#02edc5; }
.cart-foot{ border-top:1px solid var(--line); padding:12px 14px; }
.tot-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 10px; }
.btn-full{ width:100%; }

/* Ficha */
.prod-wrap{ max-width: 1100px; margin: 26px auto; padding: 0 16px; }
.prod-hero{ display:grid; grid-template-columns: 1.2fr 1.8fr; gap:20px; }
@media (max-width: 900px){ .prod-hero{ grid-template-columns: 1fr; } }
.hero-img{ border:1px solid var(--line); border-radius:16px; min-height:280px; background-size:cover; background-position:center; }
.hero-body .ttl{ margin:0 0 6px; color:#0f3d71; }
.hero-body .price{ color:#02edc5; font-size:1.3rem; font-weight:900; margin-bottom: 8px; }
.desc{ color:#124a87; }