/* =========
   style.css
   ========= */

/* Reset */
* { box-sizing: border-box; margin:0; padding:0; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: #f4f6f9;
  color:#111;
  line-height:1.5;
}

/* Variables */
:root {
  --accent: #0f6cff;
  --bg-dark: #1e293b;
  --muted: #6b7280;
  --radius: 12px;
  --shadow: 0 8px 24px rgba(0,0,0,0.08);
  --gap: 1.5rem;
}

/* Containers */
.container { width:90%; max-width:1200px; margin:0 auto; }

/* Header */
.site-header {
  background:#fff;
  border-bottom:1px solid #e5e7eb;
  position:sticky; top:0; z-index:100;
}
.header-inner {
  display:flex; justify-content:space-between; align-items:center;
  padding:1rem 0;
}
.brand { font-weight:700; font-size:1.2rem; color:var(--accent); text-decoration:none; }
.main-nav a { margin-left:1rem; text-decoration:none; color:var(--muted); font-weight:500; }

/* Hero Banner */
.hero-banner { position:relative; width:100%; height:60vh; min-height:380px; overflow:hidden; }
.hero-img { width:100%; height:100%; object-fit:cover; display:block; }
.hero-overlay {
  position:absolute; inset:0;
  background:rgba(0,0,0,0.45);
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center; color:#fff; padding:1rem;
}
.hero-overlay h1 { font-size:clamp(1.8rem,4vw,2.5rem); margin-bottom:.5rem; }
.hero-overlay p { font-size:1.1rem; margin-bottom:1rem; color:#f3f4f6; }
.btn-hero { background:var(--accent); color:#fff; padding:.75rem 1.25rem; border-radius:var(--radius); font-weight:600; text-decoration:none; }

/* Section */
.section-title { font-size:1.5rem; margin:2rem 0 1rem; color:var(--bg-dark); }

/* Product Grid */
.product-grid {
  list-style:none; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:var(--gap);
}
.product-card {
  background:#fff;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
}
.product-card:hover { transform:translateY(-5px); box-shadow:0 12px 30px rgba(0,0,0,0.12); }
.product-media { position:relative; padding-top:75%; }
.product-media img {
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transition:transform .3s ease;
}
.product-card:hover img { transform:scale(1.05); }
.product-info { padding:1rem; display:flex; flex-direction:column; gap:0.5rem; }
.product-title { font-size:1rem; color:var(--bg-dark); margin:0; }
.product-price { font-weight:700; text-align:right; }

/* Precios */
.price-discount { font-weight:700; color:var(--accent); margin-right:.4rem; }
.price-original { text-decoration:line-through; color:var(--muted); font-size:.9rem; }

/* Footer */
.site-footer {
  margin-top:2rem; padding:1.5rem 0; background:#fff;
  border-top:1px solid #e5e7eb;
}
.footer-inner { display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.footer-nav a { color:var(--muted); text-decoration:none; margin-right:1rem; }
.footer-nav a:hover { color:var(--accent); }

/* Utility */
.btn { display:inline-block; cursor:pointer; transition:background .2s; }
.btn:hover { opacity:.9; }