/* ================================================================
   OMNICRAFT NETWORK — TIENDA (Estilo Definitivo)
   ================================================================ */

:root {
    --bg: #050507;
    --bg-card: #0e0e15;
    --bg-card-hover: #13131c;
    --border: rgba(255,255,255,0.05);
    --border-hover: rgba(255,255,255,0.1);
    --border-gold: rgba(212,160,23,0.2);
    --gold: #d4a017;
    --gold-light: #f0c848;
    --gold-dim: rgba(212,160,23,0.1);
    --gold-glow: rgba(212,160,23,0.25);
    --blue: #3b82f6;
    --blue-dim: rgba(59,130,246,0.1);
    --green: #22c55e;
    --red: #ef4444;
    --text: #f1f1f3;
    --text-2: #9ca3af;
    --text-3: #555566;
    --font: 'Inter', system-ui, -apple-system, sans-serif;
    --font-display: 'Orbitron', sans-serif;
    --nav-h: 72px;
    --radius: 12px;
    --radius-sm: 8px;
    --radius-lg: 20px;
    --radius-full: 999px;
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --dur: 0.3s;
    --dur-slow: 0.5s;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
a { text-decoration:none; color:inherit; transition:color var(--dur) var(--ease); }
img { max-width:100%; display:block; } 
button { border:none; background:none; cursor:pointer; font-family:inherit; color:inherit; }
.container { width:100%; max-width:1160px; margin:0 auto; padding:0 24px; }

/* NAVBAR */
.navbar { position:fixed; top:0; left:0; right:0; z-index:1000; height:var(--nav-h); display:flex; align-items:center; background:rgba(5,5,7,0.85); backdrop-filter:blur(24px) saturate(1.4); border-bottom:1px solid var(--border); }
.nav-container { width:100%; max-width:1160px; margin:0 auto; padding:0 24px; display:flex; align-items:center; justify-content:space-between; }
.nav-logo { display:flex; align-items:center; flex-shrink:0; transition:transform var(--dur) var(--ease); }
.nav-logo:hover { transform:scale(1.04); }
.logo-img { height:46px; width:auto; object-fit:contain; filter:drop-shadow(0 0 12px rgba(212,160,23,0.15)); }
.nav-menu { display:flex; align-items:center; gap:4px; }
.nav-link { padding:9px 20px; font-size:0.85rem; font-weight:500; color:var(--text-2); border-radius:var(--radius-sm); transition:color var(--dur) var(--ease), background var(--dur) var(--ease); position:relative; }
.nav-link:hover, .nav-link.active { color:var(--text); background:rgba(255,255,255,0.04); }
.nav-link.active::after { content:''; position:absolute; bottom:3px; left:50%; transform:translateX(-50%); width:18px; height:2px; background:var(--gold); border-radius:2px; }

/* PARTÍCULAS */
#particles-bg { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.particle { position:absolute; border-radius:50%; opacity:0; animation:particleUp linear infinite; }
@keyframes particleUp { 0% { opacity:0; transform:translateY(100vh) scale(0); } 8% { opacity:0.5; } 85% { opacity:0.4; } 100% { opacity:0; transform:translateY(-8vh) scale(1); } }

/* HEADERS */
.section-header { text-align:center; margin-bottom:64px; }
.section-tag { display:inline-block; padding:5px 16px; font-size:0.65rem; font-weight:700; text-transform:uppercase; letter-spacing:2.5px; color:var(--gold); background:var(--gold-dim); border:1px solid rgba(212,160,23,0.12); border-radius:var(--radius-full); margin-bottom:18px; }
.section-title { font-family:var(--font-display); font-size:clamp(1.5rem,3.8vw,2.3rem); font-weight:800; letter-spacing:-0.2px; margin-bottom:14px; }
.section-desc { font-size:0.95rem; color:var(--text-2); max-width:500px; margin:0 auto; line-height:1.75; }
.fade-in-up { opacity:0; transform:translateY(28px); animation:fadeUp 0.75s var(--ease) forwards; animation-delay:var(--delay, 0s); }
@keyframes fadeUp { to { opacity:1; transform:translateY(0); } }

/* CONTENEDOR PRINCIPAL */
.store-main { position:relative; z-index:1; min-height:100vh; padding-bottom: 100px; }

/* GRID DE PRODUCTOS */
.product-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:24px; }

/* TARJETAS */
.product-card {
    background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg);
    padding:32px; display:flex; flex-direction:column; justify-content:space-between;
    position:relative; overflow:hidden; transition:all var(--dur-slow) var(--ease);
}
.product-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg, transparent, var(--gold), transparent); opacity:0; transition:opacity var(--dur) var(--ease); }
.product-card::after { content:''; position:absolute; top:0; left:0; right:0; height:100%; background:radial-gradient(circle at 50% 0%, rgba(212,160,23,0.06) 0%, transparent 60%); opacity:0; transition:opacity var(--dur-slow) var(--ease); }

.product-card:hover { 
    border-color:var(--border-gold); background:var(--bg-card-hover); 
    transform:translateY(-8px); 
    box-shadow:0 24px 60px rgba(0,0,0,0.4), 0 0 50px rgba(212,160,23,0.08);
}
.product-card:hover::before { opacity:1; }
.product-card:hover::after { opacity:1; }

.product-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px; position:relative; z-index:1; }
.product-type-badge { font-size:0.6rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; padding:4px 10px; border-radius:var(--radius-full); background:var(--blue-dim); color:var(--blue); border:1px solid rgba(59,130,246,0.15); }
.product-type-badge.permanente { background:var(--gold-dim); color:var(--gold-light); border-color:var(--border-gold); }
.product-type-badge.consumible { background:rgba(34,197,94,0.1); color:var(--green); border-color:rgba(34,197,94,0.15); }
.product-price { font-family:var(--font-display); font-size:1.5rem; font-weight:800; color:var(--gold-light); text-shadow: 0 0 20px rgba(212,160,23,0.3); }
.product-name { font-size:1.2rem; font-weight:700; margin-bottom:12px; position:relative; z-index:1; }
.product-desc { font-size:0.85rem; color:var(--text-2); line-height:1.7; margin-bottom:32px; flex-grow:1; position:relative; z-index:1; }

/* BOTÓN COMPRAR */
.btn-buy { 
    width:100%; padding:16px; background:linear-gradient(135deg, var(--gold) 0%, #b08010 100%); 
    color:#0a0a0a; font-weight:800; font-size:0.9rem; letter-spacing:0.5px;
    border-radius:var(--radius); text-align:center; transition:all var(--dur) var(--ease); 
    box-shadow:0 0 20px rgba(212,160,23,0.1); position:relative; z-index:1; 
    text-transform: uppercase;
}
.btn-buy:hover { 
    transform:translateY(-3px); 
    box-shadow:0 0 40px rgba(212,160,23,0.3); 
    background:linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);
}

/* MODAL */
.modal-overlay { position:fixed; inset:0; z-index:2000; background:rgba(0,0,0,0.75); backdrop-filter:blur(10px); display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:all 0.3s var(--ease); padding:20px; }
.modal-overlay.active { opacity:1; visibility:visible; }
.checkout-box { background:var(--bg-card); border:1px solid var(--border-hover); border-radius:var(--radius-lg); padding:40px; width:100%; max-width:480px; position:relative; transform:translateY(20px) scale(0.98); transition:all 0.3s var(--ease); }
.modal-overlay.active .checkout-box { transform:translateY(0) scale(1); }
.modal-close { position:absolute; top:16px; right:16px; color:var(--text-3); font-size:1.2rem; transition:color var(--dur) var(--ease); }
.modal-close:hover { color:var(--text); }
.modal-title { font-family:var(--font-display); font-size:1.2rem; margin-bottom:20px; }
.modal-product-info { background:rgba(255,255,255,0.02); border:1px solid var(--border); border-radius:var(--radius-sm); padding:16px; margin-bottom:24px; display:flex; justify-content:space-between; align-items:center; }
.modal-product-name { font-weight:600; font-size:0.95rem; }
.modal-product-price { font-family:var(--font-display); color:var(--gold-light); font-weight:700; }
.input-group { display:flex; flex-direction:column; gap:8px; }
.input-group label { font-size:0.8rem; color:var(--text-2); font-weight:500; }
.input-group input { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm); padding:14px; color:var(--text); font-size:0.95rem; outline:none; transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.input-group input:focus { border-color:var(--gold); box-shadow:0 0 15px rgba(212,160,23,0.1); }
.input-error { font-size:0.75rem; color:var(--red); min-height:18px; }
.modal-disclaimer { font-size:0.7rem; color:var(--text-3); margin-top:20px; line-height:1.6; text-align:justify; }

/* RESPONSIVE */
@media (max-width: 768px) {
    .product-grid { grid-template-columns:1fr; }
    .checkout-box { padding:28px; }
}