:root {
    --primario: #1a1a2e;
    --secundario: #e94560;
    --fondo: #f8f9fa;
    --texto: #222;
    --gris: #6c757d;
    --borde: #dee2e6;
    --sombra: 0 2px 12px rgba(0,0,0,0.08);
    --radius: 12px;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; background:var(--fondo); color:var(--texto); line-height:1.5; }

.header { background:var(--primario); color:#fff; position:sticky; top:0; z-index:100; padding:0.8rem 1rem; }
.header-inner { max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.logo { font-size:1.4rem; font-weight:700; text-decoration:none; color:#fff; }
.header-actions { display:flex; align-items:center; gap:0.8rem; }
.search-box { display:flex; background:rgba(255,255,255,0.15); border-radius:8px; overflow:hidden; }
.search-box input { border:0; background:transparent; padding:0.5rem 0.8rem; color:#fff; font-size:0.9rem; outline:0; width:160px; }
.search-box input::placeholder { color:rgba(255,255,255,0.6); }
.search-box button { background:transparent; border:0; color:#fff; padding:0.5rem 0.8rem; cursor:pointer; font-size:1rem; }
.cart-btn { position:relative; background:rgba(255,255,255,0.15); border:0; color:#fff; padding:0.5rem 1rem; border-radius:8px; cursor:pointer; font-size:1rem; }
.cart-count { position:absolute; top:-6px; right:-6px; background:var(--secundario); color:#fff; font-size:0.7rem; width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:600; }

.main { max-width:1100px; margin:0 auto; padding:1rem; }

.categorias { display:flex; gap:0.5rem; overflow-x:auto; padding:0.5rem 0; margin-bottom:1rem; -webkit-overflow-scrolling:touch; }
.cat-btn { flex-shrink:0; padding:0.4rem 1rem; border:1px solid var(--borde); background:#fff; border-radius:20px; font-size:0.85rem; cursor:pointer; white-space:nowrap; }
.cat-btn:hover, .cat-btn.active { background:var(--primario); color:#fff; border-color:var(--primario); }

.productos-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:1rem; }
.producto-card { background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--sombra); display:flex; flex-direction:column; transition:transform 0.15s; }
.producto-card:hover { transform:translateY(-2px); }
.producto-img { width:100%; aspect-ratio:1; object-fit:cover; background:#f0f0f0; }
.producto-info { padding:0.8rem; flex:1; display:flex; flex-direction:column; }
.producto-nombre { font-weight:600; font-size:0.9rem; margin-bottom:0.3rem; }
.producto-categoria { font-size:0.75rem; color:var(--gris); margin-bottom:0.3rem; }
.producto-precio { font-weight:700; color:var(--secundario); font-size:1.1rem; margin-bottom:0.5rem; }
.producto-stock { font-size:0.75rem; color:var(--gris); margin-bottom:0.5rem; }
.producto-stock.agotado { color:#e74c3c; }
.btn-agregar { margin-top:auto; padding:0.5rem; background:var(--primario); color:#fff; border:0; border-radius:6px; font-size:0.85rem; cursor:pointer; }
.btn-agregar:hover { opacity:0.9; }
.btn-agregar:disabled { background:#ccc; cursor:not-allowed; }

.cart-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.4); z-index:200; display:none; }
.cart-drawer { position:fixed; top:0; right:0; width:100%; max-width:380px; height:100%; background:#fff; z-index:201; display:none; flex-direction:column; box-shadow:-2px 0 20px rgba(0,0,0,0.1); }
.cart-drawer.open { display:flex; }
.cart-header { display:flex; justify-content:space-between; align-items:center; padding:1rem 1.2rem; border-bottom:1px solid var(--borde); }
.cart-header h2 { font-size:1.1rem; }
.cart-close { background:none; border:0; font-size:1.5rem; cursor:pointer; color:var(--gris); }
.cart-items { flex:1; overflow-y:auto; padding:0.8rem 1.2rem; }
.cart-item { display:flex; gap:0.8rem; padding:0.8rem 0; border-bottom:1px solid var(--borde); align-items:center; }
.cart-item-img { width:50px; height:50px; object-fit:cover; border-radius:8px; background:#f0f0f0; }
.cart-item-info { flex:1; }
.cart-item-nombre { font-size:0.9rem; font-weight:500; }
.cart-item-precio { font-size:0.85rem; color:var(--secundario); }
.cart-item-cant { display:flex; align-items:center; gap:0.5rem; margin-top:0.3rem; }
.cart-item-cant button { width:28px; height:28px; border:1px solid var(--borde); border-radius:6px; background:#fff; cursor:pointer; font-size:1rem; display:flex; align-items:center; justify-content:center; }
.cart-item-cant span { font-weight:600; min-width:20px; text-align:center; }
.cart-item-remove { background:none; border:0; color:#e74c3c; cursor:pointer; font-size:0.8rem; padding:0.3rem; }

.cart-footer { padding:1rem 1.2rem; border-top:1px solid var(--borde); }
.cart-total { display:flex; justify-content:space-between; font-weight:700; font-size:1.1rem; margin-bottom:1rem; }
.cart-vacio { text-align:center; padding:2rem; color:var(--gris); }

.checkout-form { background:#fff; border-radius:var(--radius); padding:1.5rem; box-shadow:var(--sombra); }
.checkout-form h3 { margin-bottom:1rem; font-size:1rem; }
.checkout-form label { display:block; font-size:0.85rem; color:#555; margin:0.6rem 0 0.2rem; }
.checkout-form input, .checkout-form textarea { width:100%; padding:0.6rem; border:1px solid var(--borde); border-radius:6px; font-size:0.95rem; font-family:inherit; }
.checkout-form input:focus, .checkout-form textarea:focus { border-color:var(--primario); outline:0; }
.checkout-form textarea { resize:vertical; min-height:60px; }
.btn-whatsapp { width:100%; padding:0.8rem; background:#25d366; color:#fff; border:0; border-radius:6px; font-size:1rem; font-weight:600; cursor:pointer; margin-top:0.8rem; display:flex; align-items:center; justify-content:center; gap:0.5rem; }
.btn-whatsapp:hover { opacity:0.9; }
.btn-whatsapp:disabled { background:#ccc; cursor:not-allowed; }
.whatsapp-icon { font-size:1.3rem; }

.mensaje-flotante { position:fixed; bottom:1.5rem; left:50%; transform:translateX(-50%); background:var(--primario); color:#fff; padding:0.8rem 1.5rem; border-radius:8px; font-size:0.9rem; z-index:300; display:none; box-shadow:0 4px 12px rgba(0,0,0,0.2); }

@media(max-width:600px) {
    .search-box input { width:100px; }
    .productos-grid { grid-template-columns:repeat(2,1fr); gap:0.6rem; }
    .producto-info { padding:0.6rem; }
    .producto-nombre { font-size:0.85rem; }
    .producto-precio { font-size:1rem; }
    .header { padding:0.5rem 0.8rem; }
    .main { padding:0.8rem; }
    .cart-drawer { max-width:100%; }
    .categorias { padding:0.3rem 0; }
    .cat-btn { font-size:0.8rem; padding:0.3rem 0.8rem; }
}

@media(prefers-color-scheme:dark) {
    :root { --fondo:#121212; --texto:#e0e0e0; --gris:#999; --borde:#333; }
    .producto-card, .checkout-form, .cart-drawer { background:#1e1e1e; }
    .cat-btn { background:#1e1e1e; color:#e0e0e0; }
    .cart-item { border-color:#333; }
    .checkout-form input, .checkout-form textarea, .checkout-form label { background:#1e1e1e; color:#e0e0e0; }
    .checkout-form input, .checkout-form textarea { border-color:#444; }
}