:root {
  --blue-900:#072a6b;--blue-800:#0b3d91;--blue-600:#1366c6;
  --bg:#f4f9ff;--card:#fff;--muted:#526a86;--radius:18px;
  --shadow:0 8px 24px rgba(11,61,145,.1);
}

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Inter,sans-serif;background:var(--bg);color:#0b2340}
.container{width:min(1200px,95%);margin:auto}

/* header */
.appbar{background:#fff;position:sticky;top:0;z-index:10;box-shadow:0 2px 6px rgba(0,0,0,.05)}
.nav{
 display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 0;
  justify-content: space-between}

.logo{height:4rem}
.cart{font-size:1.2rem;font-weight:700;color:var(--blue-800);cursor:pointer}

/* hero */
.hero-products{text-align:center;margin:2rem 0}
.hero-products h1{font-family:Montserrat,sans-serif;font-size:2.4rem;font-weight:800;color:var(--blue-900)}
.hero-products .lead{color:var(--muted);margin:.5rem 0 1.5rem}
.hero-products input{width:300px;max-width:90%;padding:.6rem;border-radius:999px;border:1px solid rgba(0,0,0,.1)}

/* grid */
.product-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;margin:2rem 0}
.card{background:var(--card);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .3s}
.card:hover{transform:translateY(-6px)}
.card img{width:100%;height:20rem;object-fit:cover}
.card-body{padding:1rem}
.card-body h3{font-size:1.2rem;color:var(--blue-800);margin-bottom:.4rem}
.card-body p{font-size:.9rem;color:var(--muted);height:50px;overflow:hidden}
.price-row{display:flex;justify-content:space-between;align-items:center;margin-top:.6rem}
.price{font-weight:800;color:var(--blue-800)}
.btn{background:linear-gradient(180deg,var(--blue-800),var(--blue-900));color:#fff;border:none;border-radius:999px;padding:.6rem 1rem;cursor:pointer;font-weight:700}
.btn:hover{opacity:.9}

/* modal */
.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);align-items:center;justify-content:center;z-index:999}
.modal-content{background:#fff;border-radius:var(--radius);max-width:600px;width:95%;padding:2rem;position:relative;text-align:center;animation:fadeIn .3s}
.modal-content img{width:100%;border-radius:var(--radius);height:250px;object-fit:cover;margin-bottom:1rem}
.modal-close{position:absolute;right:1rem;top:1rem;font-size:1.8rem;cursor:pointer;color:#333}
@keyframes fadeIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}
}
/* footer */
.footer{text-align:center;padding:1rem;background:linear-gradient(180deg,var(--blue-800),var(--blue-900));color:#fff;margin-top:3rem}

@media(max-width:600px){
.hero-products h1{font-size:1.8rem}
}

/* Página de producto */
.product-page {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin: 2rem 0;
}
.product-gallery .main-img {
  width: 100%;
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.thumbs {
  display: flex;
  gap: .6rem;
  margin-top: .6rem;
}
.thumbs img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border: 1px solid #ddd;
  border-radius: 8px;
  cursor: pointer;
}
.product-info .product-title {
  font-size: 1.8rem;
  color: var(--blue-900);
}
.product-info .product-price {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--blue-800);
  margin: .8rem 0;
}
.product-info .product-short {
  color: var(--muted);
  margin-bottom: 1rem;
}
.actions {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.btn-outline {
  border: 2px solid var(--blue-800);
  background: transparent;
  color: var(--blue-800);
  border-radius: 999px;
  padding: .6rem 1.2rem;
  font-weight: 700;
}
.product-benefits li {
  margin: .3rem 0;
  color: #444;
}

/* Tabs */
.tabs {
  display: flex;
  gap: 1rem;
  margin-top: 3rem;
  border-bottom: 2px solid #eee;
}
.tab {
  background: none;
  border: none;
  font-weight: 700;
  padding: .6rem 1rem;
  cursor: pointer;
  color: var(--blue-800);
}
.tab.active {
  border-bottom: 3px solid var(--blue-800);
}
.tab-content {
  margin-top: 1rem;
}
.hidden { display: none; }

/* Related */
.related {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
  gap: 1.5rem;
}
.related-card {
  background: var(--card);
  border-radius: 12px;
  padding: 1rem;
  text-align: center;
  box-shadow: var(--shadow);
}
.related-card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  margin-bottom: .6rem;
}
.btn-sm {
  display: inline-block;
  background: var(--blue-800);
  color: #fff;
  padding: .4rem .8rem;
  border-radius: 8px;
  font-size: .85rem;
}