:root{
  --primary:#2ecc71;
  --text:#111;
  --muted:#666;
  --bg:#f6f6f6;
  --card:#fff;
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
}

*{ box-sizing:border-box }
html,body{ margin:0; color:var(--text);
  font-family:system-ui,Segoe UI,Roboto,Inter,Arial,sans-serif; background:var(--bg);
}

/* Marca de agua con fallback (PNG -> JPG) */
body::before{
  content:""; position:fixed; inset:0;
  background-image:url("../images/logo.png"), url("../images/logo.jpg");
  background-position:center 120px; background-size:320px; background-repeat:no-repeat;
  opacity:.06; pointer-events:none; z-index:-1; filter:grayscale(100%);
}

/* Layout base */
.container{ max-width:1000px; margin:24px auto; padding:0 12px }
h1{ font-size:34px; margin:14px 4px 18px }
h2{ font-size:26px; margin:24px 4px 14px }
h3{ font-size:18px; margin:8px 0 6px }
p.muted, .muted{ color:var(--muted); font-size:14px }

/* Header */
header{ position:sticky; top:0; z-index:10; background:#fff; box-shadow:0 2px 12px rgba(0,0,0,.06) }
.topbar{ max-width:1000px; margin:0 auto; padding:10px 12px; display:flex; align-items:center; gap:12px }
.brand{ display:flex; align-items:center; gap:8px; text-decoration:none; color:inherit }
.brand img{ width:40px; height:40px; border-radius:10px; background:#fff; object-fit:contain }
.spacer{ flex:1 }

/* Botones */
.btn{ display:inline-flex; align-items:center; gap:10px; border:2px solid var(--primary);
  padding:10px 16px; border-radius:999px; color:var(--primary); background:#fff;
  font-weight:700; text-decoration:none; cursor:pointer; transition:opacity .15s;
}
.btn:hover{ opacity:.9 }
.btn.primary{ background:var(--primary); color:#fff }
.btn.ghost{ border-color:#e7e7e7; color:#333 }

/* Tarjetas / grids */
.card{ background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px }
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px }
.grid-2{ display:grid; grid-template-columns:1fr 360px; gap:16px }
@media (max-width:900px){ .grid-2{ grid-template-columns:1fr } }

/* Items */
.item{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid #efefef }
.total{ display:flex; align-items:center; justify-content:space-between; font-weight:800; font-size:18px; margin-top:10px }

/* Inputs */
.field{ display:flex; flex-direction:column; gap:6px; margin:10px 0 }
input, textarea{ width:100%; padding:10px 12px; border:1px solid #e7e7e7; border-radius:12px }

/* Pills / radios */
.inline{ display:flex; gap:12px; flex-wrap:wrap; margin:8px 0 }
.pill{ display:inline-flex; align-items:center; gap:8px; border:1px solid #e7e7e7; border-radius:999px; padding:8px 12px }

/* Drawer */
.drawer{ position:fixed; top:0; right:-460px; width:460px; max-width:92vw; height:100vh;
  background:#fff; box-shadow:-8px 0 30px rgba(0,0,0,.18); transition:right .25s; z-index:30; display:flex; flex-direction:column
}
.drawer.open{ right:0 }
.drawer header{ padding:14px 16px; box-shadow:0 2px 12px rgba(0,0,0,.06) }
.drawer .body{ padding:14px 16px; overflow:auto; flex:1 }
.close{ position:absolute; top:10px; right:10px; width:38px; height:38px; border-radius:999px; border:1px solid #eee; background:#fff; font-weight:900; cursor:pointer }

/* Modal */
.overlay{ position:fixed; inset:0; background:rgba(0,0,0,.25); display:none; align-items:center; justify-content:center; z-index:40 }
.overlay.open{ display:flex }
.modal{ background:#fff; border-radius:20px; box-shadow:var(--shadow); width:520px; max-width:92vw; padding:16px }
.rowx{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:10px 0 }
.qtybox{ display:inline-flex; align-items:center; gap:10px; border:1px solid #e7e7e7; border-radius:999px; padding:6px 10px }
.qtybox button{ width:28px; height:28px; border:1px solid #e5e5e5; background:#fff; border-radius:999px; font-weight:900; cursor:pointer }

/* Cards de producto */
.card .content{ padding:12px }
.card img{ width:100%; height:160px; object-fit:cover; background:#f0f0f0 }
.row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px }
.price{ font-weight:800 }
.actions{ display:flex; gap:8px; flex-wrap:wrap }