/* -----------------------------------------------------------
   assets/css/style.css
   Estructura: variables -> reset -> atoms -> molecules -> organisms -> utilities
   ----------------------------------------------------------- */

/* Variables (tema) */
:root{
  --bg: #fffaf8;
  --surface: #ffffff;
  --muted: #7b7b7b;
  --text: #181818;
  --primary: #8b5cf6;
  --primary-dark: #6f3fe6;
  --accent: #f59e0b;
  --shadow: 0 6px 20px rgba(24,24,24,0.06);

  --space-sm: 12px;
  --space-md: 20px;
  --radius: 12px;

  --font-sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, "Helvetica Neue", Arial;
  --font-display: 'Playfair Display', serif;
}

/* Reset / base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-sans);
  font-size:16px;
  color:var(--text);
  background: linear-gradient(180deg, var(--bg) 0%, #fff 60%);
  -webkit-font-smoothing:antialiased;
  line-height:1.4;
}
.container{ width: min(1200px, 92%); margin:0 auto; }

/* Accessibility helper */
.visually-hidden{
  position:absolute !important;
  height:1px;width:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px);
  white-space:nowrap;
}

/* ---------- Atoms ---------- */

/* Botones */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:.6rem 1rem; border-radius:10px; border:0;
  cursor:pointer; font-weight:600; transition:transform .12s;
  background:var(--surface); box-shadow:var(--shadow);
}
.btn:active{ transform: translateY(1px); }
.btn--primary{ background: linear-gradient(180deg,var(--primary),var(--primary-dark)); color:#fff; }
.btn--ghost{ background:transparent; color:var(--text); border:1px solid rgba(0,0,0,0.06); }
.btn--outline{ background:transparent; border:1px solid rgba(0,0,0,0.06); }
.btn--small{ padding:.4rem .6rem; font-size:.9rem; border-radius:8px; }
.btn--icon{ padding:.45rem; width:40px; height:40px; justify-content:center; }

/* Input */
.input{
  padding:.7rem .9rem; border-radius:10px;
  border:1px solid rgba(0,0,0,0.06); background:var(--surface);
  outline:none; font-size:1rem; box-shadow:var(--shadow);
}
.input:focus{ box-shadow:0 6px 20px rgba(139,92,246,0.12); border-color:rgba(139,92,246,0.3); }

/* Badge */
.badge{
  display:inline-grid; place-items:center; min-width:22px; height:22px;
  padding:0 6px; border-radius:999px; font-size:.75rem; font-weight:700;
  background:var(--primary); color:#fff;
}
.badge--accent{ background:var(--accent); color:#111; }
.badge--sale{ background:#ff6b6b; }

/* Typography */
h1,h2,h3,h4{ margin:0; font-weight:700; }
.hero-title{ font-family:var(--font-display); font-size:clamp(1.6rem,3.4vw,2.6rem); margin-bottom:.6rem; }
.muted{ color:var(--muted); }

/* ---------- Layout / Organismos ---------- */

/* Header */
.site-header{
  position:sticky; top:0; z-index:50; backdrop-filter: blur(6px);
  background: rgba(255,255,255,0.7); border-bottom:1px solid rgba(0,0,0,0.03);
}
.header-inner{ display:flex; align-items:center; gap:16px; padding:14px 0; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); }
.brand__logo{ width:44px; height:44px; object-fit:cover; border-radius:8px; }
.brand__name{ font-weight:700; letter-spacing:1px; }

/* Searchbar */
.searchbar{ display:flex; align-items:center; gap:8px; flex:1; max-width:540px; margin-left:8px; }
.input--search{ flex:1; }

/* Nav / acciones */
.nav{ display:flex; gap:16px; margin-left:16px; }
.nav__link{ text-decoration:none; color:var(--text); padding:8px; border-radius:8px; }
.nav__link:hover{ background: rgba(0,0,0,0.03); }
.actions{ display:flex; gap:8px; align-items:center; margin-left:auto; }
.btn--cart{ position:relative; background:transparent; border-radius:10px; padding:.5rem; }
.btn--cart .badge{ position:absolute; top:-6px; right:-6px; }

/* Hero */
.hero{ padding: calc(var(--space-md) * 1.2) 0; }
.hero-inner{ display:grid; grid-template-columns: 1fr 420px; gap:28px; align-items:center; }
.hero-copy{ max-width:620px; }
.hero-sub{ margin:.8rem 0 1.2rem; color:var(--muted); }
.hero-image{ width:100%; height:auto; border-radius:18px; box-shadow:var(--shadow); object-fit:cover; }

/* Categories */
.categories{ display:flex; gap:18px; margin-top:18px; padding:18px 0; align-items:center; justify-content:space-between; }
.category{ display:flex; flex-direction:column; gap:8px; align-items:center; text-align:center; width:100%; padding:12px; border-radius:12px; background: linear-gradient(180deg, rgba(255,255,255,0.7), rgba(255,255,255,0.9)); box-shadow:var(--shadow); }
.category__icon{ width:48px; height:48px; object-fit:contain; }

/* Product Grid */
.section-header{ padding:20px 0 8px; }
.product-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; margin-top:12px; }

/* Product card */
.product-card{ background:var(--surface); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column; }
.product-card__media{ position:relative; min-height:200px; display:flex; align-items:center; justify-content:center; background: linear-gradient(180deg, rgba(255,255,255,0.8), rgba(245,245,245,1)); }
.product-card__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.product-card__media .badge{ position:absolute; top:12px; left:12px; }
.product-card__body{ padding:14px; display:flex; flex-direction:column; gap:8px; }
.product-title{ font-size:1.05rem; margin-bottom:6px; }
.product-desc{ color:var(--muted); font-size:.95rem; margin:0; }
.product-footer{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.price{ font-weight:700; font-size:1rem; }
.price--old{ text-decoration:line-through; color:var(--muted); margin-right:8px; }

/* Newsletter */
.newsletter{ padding:28px 0; }
.newsletter-card{ display:flex; gap:18px; align-items:center; justify-content:space-between; padding:18px; border-radius:14px; box-shadow:var(--shadow); background: linear-gradient(180deg,#fff,#fffaf0); }
.newsletter-form{ display:flex; gap:8px; align-items:center; }

/* Footer */
.site-footer{ margin-top:36px; padding:32px 0 18px; background: linear-gradient(180deg, #f8f6f4, #fff); border-top:1px solid rgba(0,0,0,0.03); }
.footer-inner{ display:flex; gap:24px; align-items:flex-start; justify-content:space-between; padding-bottom:12px; }
.footer-col{ flex:1; min-width:180px; }
.footer-links{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.footer-bottom{ padding-top:10px; border-top:1px dashed rgba(0,0,0,0.03); margin-top:12px; display:flex; justify-content:space-between; }

/* Utilities y responsive */
.small{ font-size:.85rem; }
.center{ text-align:center; }

@media (max-width:980px){
  .hero-inner{ grid-template-columns:1fr; }
  .product-grid{ grid-template-columns: repeat(2,1fr); }
  .nav{ display:none; }
  .searchbar{ max-width:320px; }
}

@media (max-width:640px){
  .product-grid{ grid-template-columns:1fr; }
  .header-inner{ gap:8px; padding:10px 0; }
  .brand__logo{ width:36px; height:36px; }
  .categories{ flex-direction:row; gap:10px; overflow:auto; padding-bottom:12px; }
  .newsletter-card{ flex-direction:column; align-items:flex-start; }
}