*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{background:#f0f2f0;display:flex;justify-content:center;font-family:Instrument Sans,ui-sans-serif,system-ui,sans-serif;min-height:100vh}.app{width:100%;max-width:430px;min-height:100vh;background:#fff;border-radius:1.5rem;overflow:hidden;box-shadow:0 20px 60px #0000001a}.header{background:#edf3e3;padding:1rem 1.25rem;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:10}.header-center{text-align:center;flex:1}.header-center h1{font-size:1rem;font-weight:800;color:#111}.header-center p{font-size:.7rem;color:#888;margin-top:.1rem}.header-back{width:36px;height:36px;border-radius:50%;background:#fff;border:none;display:flex;align-items:center;justify-content:center;text-decoration:none;box-shadow:0 2px 8px #00000014;transition:transform .15s}.header-back:hover{transform:translate(-2px)}.header-back svg{width:16px;height:16px;color:#333}.header-cart{position:relative;width:36px;height:36px;border-radius:50%;background:#fff;border:none;display:flex;align-items:center;justify-content:center;text-decoration:none;box-shadow:0 2px 8px #00000014}.header-cart svg{width:18px;height:18px;color:#333}.cart-badge{position:absolute;top:-6px;right:-6px;background:#d41b11;color:#fff;font-size:.6rem;font-weight:700;min-width:16px;height:16px;border-radius:999px;display:flex;align-items:center;justify-content:center;padding:0 3px}.direccion{display:flex;align-items:center;gap:.75rem;padding:.75rem 1.25rem;background:#f8fdf0;border-bottom:1px solid #e8f5d0}.direccion svg{width:18px;height:18px;color:#a8df11;flex-shrink:0}.direccion-texto{flex:1}.direccion-texto p:first-child{font-size:.68rem;color:#999}.direccion-texto p:last-child{font-size:.82rem;font-weight:700;color:#4a8a06}.direccion-arrow svg{width:16px;height:16px;color:#bbb}.search-wrap{padding:.85rem 1.25rem 0}.search-inner{display:flex;align-items:center;gap:.5rem;background:#f5f5f5;border:1.5px solid #e8f5d0;border-radius:.85rem;padding:.6rem 1rem;transition:border-color .2s,box-shadow .2s}.search-inner:focus-within{border-color:#a8df11;box-shadow:0 0 0 3px #a8df111f;background:#fff}.search-inner svg{width:16px;height:16px;color:#a8df11;flex-shrink:0}.search-inner input{flex:1;border:none;outline:none;background:transparent;font-size:.85rem;font-family:inherit;color:#111}.search-inner input::placeholder{color:#bbb}.categorias-wrap{padding:1rem 1.25rem 0}.categorias-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.categorias-header h2{font-size:.88rem;font-weight:800;color:#111}.categorias-header span{font-size:.75rem;color:#a8df11;font-weight:600;cursor:pointer}.categorias-scroll{display:flex;gap:.6rem;overflow-x:auto;scrollbar-width:none;padding-bottom:.25rem}.categorias-scroll::-webkit-scrollbar{display:none}.cat-chip{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:.35rem;background:#f8fdf0;border:1.5px solid #e8f5d0;border-radius:.85rem;padding:.6rem 1rem;font-size:.7rem;font-weight:600;color:#4a8a06;cursor:pointer;transition:all .2s;white-space:nowrap}.cat-chip:hover,.cat-chip.active{background:#a8df11;border-color:#a8df11;color:#fff}.filtros-wrap{display:flex;gap:.6rem;padding:.85rem 1.25rem 0}.filtro-btn{background:#f0f0f0;border:none;border-radius:999px;padding:.4rem 1rem;font-size:.78rem;font-weight:600;color:#555;cursor:pointer;font-family:inherit;transition:all .2s}.filtro-btn.active{background:linear-gradient(135deg,#a8df11,#7cc10a);color:#fff;box-shadow:0 3px 10px #a8df114d}.productos-grid{display:grid;grid-template-columns:1fr 1fr;gap:.85rem;padding:1rem 1.25rem 6rem}.producto-wrapper{position:relative}.producto-item{background:#fff;border-radius:1rem;border:1.5px solid #e8f5d0;padding:.85rem;position:relative;transition:transform .2s,box-shadow .2s,border-color .2s;text-decoration:none;display:block}.producto-item:hover{transform:translateY(-3px);box-shadow:0 8px 24px #a8df112e;border-color:#a8df11}.favorito-btn{position:absolute;top:.6rem;right:.6rem;width:28px;height:28px;border:none;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;z-index:5;box-shadow:0 2px 6px #0000001a}.favorito-btn:hover{transform:scale(1.1);box-shadow:0 3px 8px #00000026}.favorito-btn svg{width:16px;height:16px;color:#d4af37;stroke-width:2;stroke:#d4af37;fill:none;transition:all .3s}.favorito-btn:hover svg{color:#ffed4e;stroke:#ffed4e}.producto-wrapper[data-favorito=true] .favorito-btn svg{fill:#d4af37;stroke:#d4af37}.favorito-btn.favorito-activo svg{fill:#d4af37;stroke:#d4af37}.producto-img{width:100%;height:90px;object-fit:contain;margin-bottom:.6rem}.producto-img-empty{width:100%;height:90px;background:#f8fdf0;border-radius:.75rem;display:flex;align-items:center;justify-content:center;margin-bottom:.6rem}.producto-img-empty svg{width:36px;height:36px;color:#c6f135}.nombre{font-size:.8rem;font-weight:700;color:#111;line-height:1.3;margin-bottom:.15rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.marca{font-size:.68rem;color:#aaa;margin-bottom:.5rem}.producto-footer{display:flex;align-items:center;justify-content:space-between}.precio{font-size:.9rem;font-weight:800;color:#111}.btn-add{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#a8df11,#7cc10a);color:#fff;border:none;font-size:1.1rem;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 3px 8px #a8df1166;transition:transform .15s,opacity .15s;line-height:1}.btn-add:hover{transform:scale(1.1);opacity:.9}.btn-add--agotado{background:#e5e7eb;color:#9ca3af;cursor:not-allowed;font-size:1rem;font-weight:700}.btn-add--agotado:hover{transform:none;opacity:1}.bottom-nav{position:fixed;bottom:0;left:50%;transform:translate(-50%);width:100%;max-width:430px;background:#fff;border-top:1px solid #f0f0f0;display:flex;justify-content:space-around;padding:.85rem 0;z-index:10}.nav-item{display:flex;align-items:center;text-decoration:none;color:#bbb;transition:color .15s}.nav-item.active{color:#a8df11}.nav-item svg{width:24px;height:24px}